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)

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

NOT doing

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

3.6 KiB Raw Blame History