feat: add OpenCode to spawn dialogs and empty-state UI

src/main/broker.ts

@@ -81,7 +81,7 @@ function augmentedPath(): string {
   return Array.from(entries).join(delimiter)
 }
 
-function resolveCommandWithAugmentedPath(command: string): string | undefined {
+export function resolveCommandWithAugmentedPath(command: string): string | undefined {
   const resolved = resolveCommandOnPath(command)
   if (resolved) return resolved
 

src/main/ipc-handlers.ts

@@ -17,7 +17,7 @@ import {
   addProjectIntegration,
   removeProjectIntegration
 } from './store'
-import { brokerManager } from './broker'
+import { brokerManager, resolveCommandWithAugmentedPath } from './broker'
 import * as git from './git'
 import * as filesystem from './filesystem'
 import * as auth from './auth'
@@ -351,6 +351,10 @@ export function registerIpcHandlers(): void {
     return brokerManager.listAgents(projectId)
   })
 
+  ipcMain.handle('broker:check-cli-available', (_, cli: string) => {
+    return Boolean(resolveCommandWithAugmentedPath(cli))
+  })
+
   ipcMain.handle('broker:list-details', async () => {
     return brokerManager.listBrokerDetails()
   })

src/preload/index.ts

@@ -275,6 +275,8 @@ const api = {
       invoke<void>('broker:release-agent', projectId, name),
     listAgents: (projectId?: string) =>
       invoke<BrokerListAgent[]>('broker:list-agents', projectId),
+    checkCliAvailable: (cli: string) =>
+      invoke<boolean>('broker:check-cli-available', cli),
     listDetails: () => invoke<BrokerDetails[]>('broker:list-details'),
     listEvents: () => invoke<BrokerEventRecord[]>('broker:list-events'),
     shutdown: () => invoke<void>('broker:shutdown'),

src/renderer/src/components/sidebar/SpawnAgentDialog.tsx

@@ -1,15 +1,16 @@
 import type React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Loader2, X } from 'lucide-react'
-import { ClaudeIcon, CodexIcon } from '@/components/common/AgentIcons'
+import { ClaudeIcon, CodexIcon, OpenCodeIcon } from '@/components/common/AgentIcons'
 import { listProjectPersonas, spawnProjectAgent, spawnProjectPersona, type SpawnAgentCli } from '@/lib/spawn-agent'
-import type { WorkforcePersona } from '@/lib/ipc'
+import { pear, type WorkforcePersona } from '@/lib/ipc'
 import { useProjectStore, type ProjectRoot } from '@/stores/project-store'
 import { useUIStore } from '@/stores/ui-store'
 
 const AGENT_OPTIONS: Array<{ cli: SpawnAgentCli; label: string; Icon: typeof ClaudeIcon }> = [
   { cli: 'claude', label: 'Claude', Icon: ClaudeIcon },
-  { cli: 'codex', label: 'Codex', Icon: CodexIcon }
+  { cli: 'codex', label: 'Codex', Icon: CodexIcon },
+  { cli: 'opencode', label: 'OpenCode', Icon: OpenCodeIcon }
 ]
 
 export function SpawnAgentDialog(): React.ReactNode {
@@ -20,6 +21,7 @@ export function SpawnAgentDialog(): React.ReactNode {
   const [selectedPersonaId, setSelectedPersonaId] = useState('')
   const [customName, setCustomName] = useState('')
   const [error, setError] = useState<string | null>(null)
+  const [cliAvailability, setCliAvailability] = useState<Partial<Record<SpawnAgentCli, boolean>>>({})
   const [selectedRootId, setSelectedRootId] = useState<string | null>(null)
   const project = useProjectStore((s) => s.getActiveProject())
   const defaultRoot = useProjectStore((s) => s.getActiveRoot())
@@ -45,6 +47,16 @@ export function SpawnAgentDialog(): React.ReactNode {
     }
   }, [project, root?.id, selectedRootId])
 
+  useEffect(() => {
+    const clis: SpawnAgentCli[] = ['claude', 'codex', 'opencode']
+    void Promise.all(clis.map(async (cli) => {
+      const available = await pear.broker.checkCliAvailable(cli).catch(() => false)
+      return [cli, available] as const
+    })).then((results) => {
+      setCliAvailability(Object.fromEntries(results))
+    })
+  }, [])
+
   useEffect(() => {
     let cancelled = false
 
@@ -207,16 +219,20 @@ export function SpawnAgentDialog(): React.ReactNode {
                   className="h-9 w-full rounded-md border border-[var(--pear-border-subtle)] bg-[var(--pear-bg)] px-3 text-sm text-[var(--pear-text)] outline-none placeholder:text-[var(--pear-text-faint)] focus:border-[var(--pear-accent-dim)] disabled:opacity-50"
                 />
               </div>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-3 gap-3">
                 {AGENT_OPTIONS.map(({ cli, label, Icon }) => (
                   <button
                     key={cli}
                     type="button"
                     autoFocus={cli === 'claude'}
                     onClick={() => handleSpawn(cli)}
-                    disabled={!root?.pathExists || spawning}
+                    disabled={!root?.pathExists || spawning || cliAvailability[cli] === false}
                     className="flex min-h-[92px] flex-col items-center justify-center gap-2 rounded-lg border border-[var(--pear-border)] text-sm text-[var(--pear-text-dim)] hover:border-[var(--pear-accent-dim)] hover:text-[var(--pear-text)] disabled:cursor-not-allowed disabled:opacity-40"
-                    title={root?.pathExists ? `Spawn ${label}` : `Path not found: ${root?.path || project.rootPath}`}
+                    title={
+                      !root?.pathExists ? `Path not found: ${root?.path || project.rootPath}`
+                      : cliAvailability[cli] === false ? `${label} is not installed — run: npm install -g ${cli}`
+                      : `Spawn ${label}`
+                    }
                   >
                     <Icon className="h-6 w-6" />
                     <span>{spawningCli === cli ? 'Starting' : label}</span>

src/renderer/src/components/terminal/TerminalPane.tsx

@@ -1,7 +1,7 @@
 import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { AlertTriangle, ChevronLeft, ChevronRight, Columns2, Loader2, Network, PanelTop, X } from 'lucide-react'
-import { AgentHarnessIcon, ClaudeIcon, CodexIcon } from '@/components/common/AgentIcons'
+import { AgentHarnessIcon, ClaudeIcon, CodexIcon, OpenCodeIcon } from '@/components/common/AgentIcons'
 import { GraphView } from '@/components/graph/GraphView'
 import { ChatComposerInput } from '@/components/chat/ChatComposerInput'
 import { spawnProjectAgent, type SpawnAgentCli } from '@/lib/spawn-agent'
@@ -432,6 +432,7 @@ export function TerminalPane(): React.ReactNode {
   const setTerminalLayout = useUIStore((s) => s.setTerminalLayout)
   const [spawningCli, setSpawningCli] = useState<SpawnAgentCli | null>(null)
   const [spawnError, setSpawnError] = useState<string | null>(null)
+  const [cliAvailability, setCliAvailability] = useState<Partial<Record<SpawnAgentCli, boolean>>>({})
   const spawnRequestRef = useRef(false)
   const [burnSummariesByAgentKey, setBurnSummariesByAgentKey] = useState<Record<string, BurnAgentSummary>>({})
   const [splitPage, setSplitPage] = useState(0)
@@ -567,6 +568,16 @@ export function TerminalPane(): React.ReactNode {
     })
   }
 
+  useEffect(() => {
+    const clis: SpawnAgentCli[] = ['claude', 'codex', 'opencode']
+    void Promise.all(clis.map(async (cli) => {
+      const available = await pear.broker.checkCliAvailable(cli).catch(() => false)
+      return [cli, available] as const
+    })).then((results) => {
+      setCliAvailability(Object.fromEntries(results))
+    })
+  }, [])
+
   useEffect(() => {
     let cancelled = false
 
@@ -781,27 +792,28 @@ export function TerminalPane(): React.ReactNode {
           {activeProject ? 'No agents running' : 'No project selected'}
         </p>
         {activeProject ? (
-          <div className="mt-4 grid w-full max-w-[340px] grid-cols-2 gap-3">
-            <button
-              type="button"
-              onClick={() => handleSpawn('claude')}
-              disabled={!activeRoot?.pathExists || spawningCli !== null}
-              className="flex items-center justify-center gap-2 rounded-lg border border-[var(--pear-border)] px-4 py-3 text-sm text-[var(--pear-text-dim)] hover:border-[var(--pear-accent-dim)] hover:text-[var(--pear-text)] disabled:cursor-not-allowed disabled:opacity-40"
-              title={activeRoot?.pathExists ? 'Spawn Claude' : `Path not found: ${activeRoot?.path || activeProject.rootPath}`}
-            >
-              <ClaudeIcon className="h-4 w-4" />
-              <span>{spawningCli === 'claude' ? 'Starting' : 'Claude'}</span>
-            </button>
-            <button
-              type="button"
-              onClick={() => handleSpawn('codex')}
-              disabled={!activeRoot?.pathExists || spawningCli !== null}
-              className="flex items-center justify-center gap-2 rounded-lg border border-[var(--pear-border)] px-4 py-3 text-sm text-[var(--pear-text-dim)] hover:border-[var(--pear-accent-dim)] hover:text-[var(--pear-text)] disabled:cursor-not-allowed disabled:opacity-40"
-              title={activeRoot?.pathExists ? 'Spawn Codex' : `Path not found: ${activeRoot?.path || activeProject.rootPath}`}
-            >
-              <CodexIcon className="h-4 w-4" />
-              <span>{spawningCli === 'codex' ? 'Starting' : 'Codex'}</span>
-            </button>
+          <div className="mt-4 grid w-full max-w-[420px] grid-cols-3 gap-3">
+            {([
+              { cli: 'claude', label: 'Claude', Icon: ClaudeIcon },
+              { cli: 'codex', label: 'Codex', Icon: CodexIcon },
+              { cli: 'opencode', label: 'OpenCode', Icon: OpenCodeIcon }
+            ] as const).map(({ cli, label, Icon }) => (
+              <button
+                key={cli}
+                type="button"
+                onClick={() => handleSpawn(cli)}
+                disabled={!activeRoot?.pathExists || spawningCli !== null || cliAvailability[cli] === false}
+                className="flex items-center justify-center gap-2 rounded-lg border border-[var(--pear-border)] px-4 py-3 text-sm text-[var(--pear-text-dim)] hover:border-[var(--pear-accent-dim)] hover:text-[var(--pear-text)] disabled:cursor-not-allowed disabled:opacity-40"
+                title={
+                  !activeRoot?.pathExists ? `Path not found: ${activeRoot?.path || activeProject.rootPath}`
+                  : cliAvailability[cli] === false ? `${label} is not installed`
+                  : `Spawn ${label}`
+                }
+              >
+                <Icon className="h-4 w-4" />
+                <span>{spawningCli === cli ? 'Starting' : label}</span>
+              </button>
+            ))}
           </div>
         ) : (
           <button

src/renderer/src/lib/spawn-agent.ts

@@ -3,7 +3,7 @@ import { getAgentKey, useAgentStore } from '@/stores/agent-store'
 import { useProjectStore, type Project, type ProjectRoot } from '@/stores/project-store'
 import { useUIStore } from '@/stores/ui-store'
 
-export type SpawnAgentCli = 'claude' | 'codex'
+export type SpawnAgentCli = 'claude' | 'codex' | 'opencode'
 
 function nextAgentName(cli: SpawnAgentCli, projectId: string, liveNames: string[]): string {
   const existingNames = new Set([

src/shared/types/ipc.ts

@@ -883,6 +883,7 @@ export interface PearAPI {
     unsubscribeAgentChannel: (projectId: string | undefined, name: string, channel: string) => Promise<void>
     releaseAgent: (projectId: string | undefined, name: string) => Promise<void>
     listAgents: (projectId?: string) => Promise<BrokerListAgent[]>
+    checkCliAvailable: (cli: string) => Promise<boolean>
     listDetails: () => Promise<BrokerDetails[]>
     listEvents: () => Promise<BrokerEventRecord[]>
     shutdown: () => Promise<void>