Skip to content

Edit Project dialog crashes with useDialog must be used within a DialogProvider in browser web mode (opencode web) #35132

Description

@enjoyer-hub

Issue for this PR

This is a bug report.

What does this bug do?

Clicking Edit project (the pencil/edit action next to a project name) in the browser-served web UI (opencode web) immediately throws and the dialog never opens:

Error: useDialog must be used within a DialogProvider
    at Ur (assets/index-<hash>.js)
    at we (assets/dialog-edit-project-<hash>.js:1:1479)
    at ... (assets/index-<hash>.js)

The lazily-imported DialogEditProject component calls useDialog() from @opencode-ai/ui/context/dialog, but in the browser opencode web build there is no DialogProvider in the context scope where the dialog is rendered, so useContext returns undefined and it throws.

This is web-mode specific — it is not the same as the existing desktop "edit project doesn't persist" reports (#25946, #32164, #32691, #32708). Here the dialog does not open at all; it crashes on click.

Steps to reproduce

  1. On a server (or locally), run the browser web UI:
    opencode web --port 4096 --hostname 0.0.0.0
    
  2. Open the web UI in a browser and open any project.
  3. In the sidebar, click the Edit project action next to the project name.
  4. Observe the error overlay: useDialog must be used within a DialogProvider. The edit dialog never renders.

Reproduces on a fresh session, any project, both a localhost server connection and a remote "Add server" connection.

Expected behavior

The Edit project dialog opens, allowing the display name / icon / color to be edited (as it does in the desktop app).

Relevant code

  • packages/app/src/pages/layout.tsxshowEditProjectDialog() lazy-imports the component and calls dialog.show(() => <x.DialogEditProject ... />):
    const showEditProjectDialog = (conn, project) => {
      const run = ++dialogRun
      void import("@/components/dialog-edit-project").then((x) => {
        if (dialogDead || dialogRun !== run) return
        dialog.show(() => <x.DialogEditProject server={conn} project={project} />)
      })
    }
  • packages/app/src/components/dialog-edit-project.tsx — imports and calls useDialog() from @opencode-ai/ui/context/dialog, which throws when no provider is mounted in that render scope.

The DialogProvider appears to be present for the desktop app path but not wired up for the browser opencode web render tree (or dialog.show's callback renders outside the provider in web mode).

Environment

  • opencode v1.17.13 (latest at time of report)
  • Mode: browser web UI via opencode web --hostname 0.0.0.0 (server on Linux/Ubuntu 24.04, accessed from a Chromium-based browser)
  • Also reproduced pointing a local opencode web instance at a remote server via "Add server"

Notes

Happy to test a fix. The feature itself is arguably desktop-oriented, but the button is visible and clickable in the browser web UI, so at minimum it should either work or be hidden/guarded in web mode rather than throwing an unhandled error.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions