Files
openwork/apps/app/pr/browser-entry-button.md
Omar McAdam 2b91b4d777 refactor: repo folder structure (#1038)
* refactor(repo): move OpenWork apps into apps and ee layout

Rebase the monorepo layout migration onto the latest dev changes so the moved app, desktop, share, and cloud surfaces keep working from their new paths. Carry the latest deeplink, token persistence, build, Vercel, and docs updates forward to avoid stale references and broken deploy tooling.

* chore(repo): drop generated desktop artifacts

Ignore the moved Tauri target and sidecar paths so local cargo checks do not pollute the branch. Remove the accidentally committed outputs from the repo while keeping the layout migration intact.

* fix(release): drop built server cli artifact

Stop tracking the locally built apps/server/cli binary so generated server outputs do not leak into commits. Also update the release workflow to check the published scoped package name for @openwork/server before deciding whether npm publish is needed.

* fix(workspace): add stable CLI bin wrappers

Point the server and router package bins at committed wrapper scripts so workspace installs can create shims before dist outputs exist. Keep the wrappers compatible with built binaries and source checkouts to avoid Vercel install warnings without changing runtime behavior.
2026-03-19 11:41:38 -07:00

3.6 KiB

Browser Entry Button

Branch: feat/browser-entry-button Priority: P1


Goal

Add a single entry button in the empty chat state that triggers browser automation setup via OpenCode command.


Implementation

Location

packages/app/src/app/pages/session.tsx L1025-1037

Code references

  • Empty state render: packages/app/src/app/pages/session.tsx:1039-1049
  • Command runner used by slash commands: packages/app/src/app/pages/session.tsx:645-663 (runOpenCodeCommand)
  • Command registry wiring: packages/app/src/app/pages/session.tsx:881-892
  • Programmatic command execution: packages/app/src/app/command-state.ts:293-313
  • .opencode/commands loader: packages/app/src/app/command-state.ts:334
  • Existing button pattern: packages/app/src/app/pages/dashboard.tsx:557 (onClick={() => props.runCommand(command)})
  • Command write API (desktop): packages/app/src/app/lib/tauri.ts:223 (opencodeCommandWrite)
  • Frontmatter parser: packages/app/src/app/utils/index.ts:271 (parseTemplateFrontmatter)

Current empty state

<Show when={props.messages.length === 0}>
  <div class="text-center py-16 px-6 space-y-6">
    <h3 class="text-xl font-medium">Start a conversation</h3>
    <p class="text-gray-10 text-sm">Describe what you want to do...</p>
  </div>
</Show>

Add button

<Show when={props.messages.length === 0}>
  <div class="text-center py-16 px-6 space-y-6">
    <div class="w-16 h-16 bg-gray-2 rounded-3xl mx-auto flex items-center justify-center border border-gray-6">
      <Zap class="text-gray-7" />
    </div>
    <div class="space-y-2">
      <h3 class="text-xl font-medium">What do you want to do?</h3>
      <p class="text-gray-10 text-sm max-w-sm mx-auto">
        Pick a starting point or just type below.
      </p>
    </div>
    <div class="flex justify-center">
      <button
        type="button"
        class="px-4 py-2.5 rounded-xl border border-gray-6 bg-gray-2 text-sm text-gray-12 hover:bg-gray-3 hover:border-gray-7 transition-all"
        onClick={() => {
          void (async () => {
            const command = await ensureBrowserSetupCommand();
            if (command) {
              runOpenCodeCommand(command);
            }
          })();
        }}
      >
        Automate your browser
      </button>
    </div>
  </div>
</Show>

Why runOpenCodeCommand

  • It handles $ARGUMENTS and opens the command run modal when needed (session.tsx:645-663)
  • Keeps behavior identical to slash commands

Create OpenCode command

File: .opencode/commands/browser-setup.md

App template source: packages/app/src/app/data/commands/browser-setup.md

If the command is missing in the active workspace, the button auto-writes it via opencodeCommandWrite (desktop only) before running.

---
name: browser-setup
description: Guide user through Chrome browser automation setup
---

Help the user set up browser automation.

1. Ask: "Do you have Chrome installed on this computer?"
2. If they say no or are unsure, guide them to install Chrome
3. If yes, check if browser MCP/plugin is available
4. If not available, guide them to install the OpenCode browser extension
5. Once setup is complete, offer to run a simple first task (e.g., "Let's try opening a webpage")

Flow (handled by LLM)

  1. User clicks "Automate your browser"
  2. Command triggers, LLM asks: "Do you have Chrome installed?"
  3. User answers Yes/No
  4. LLM guides through extension install if needed
  5. LLM offers first browser task

NOT doing

  • Custom guided prompts in the UI
  • Multiple entry buttons (start with one)
  • Hardcoded installation scripts