feat: wire OpenCode process control UI

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/components/layout/WorkspaceShell.tsx

@@ -1,14 +1,22 @@
+import { useMemo } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import { PanelLeftClose, PanelLeftOpen, Terminal } from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen, Play, RotateCw, Square, Terminal } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
 import { EditorPanel } from "@/components/editor/EditorPanel";
 import { TerminalPanel } from "@/components/terminal/TerminalPanel";
 import { FileExplorerPanel } from "@/components/workspace/FileExplorerPanel";
 import { StatusBar } from "@/components/workspace/StatusBar";
 import { WorkspaceSelector } from "@/components/workspace/WorkspaceSelector";
 import { useWorkspaceUiStore } from "@/lib/store/workspace-ui-store";
+import {
+  useProcessRestart,
+  useProcessStart,
+  useProcessStatus,
+  useProcessStop,
+} from "@/lib/api/process";
 
 interface WorkspaceShellProps {
   workspaceId: string;
@@ -21,6 +29,19 @@ export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
   const toggleSidebar = useWorkspaceUiStore((s) => s.toggleSidebar);
   const toggleTerminal = useWorkspaceUiStore((s) => s.toggleTerminal);
 
+  const status = useProcessStatus(workspaceId);
+  const start = useProcessStart();
+  const stop = useProcessStop();
+  const restart = useProcessRestart();
+
+  const isRunning = status.data?.running ?? false;
+  const statusUnknown = status.isPending || status.isError;
+
+  const mutationError = useMemo(
+    () => start.error ?? stop.error ?? restart.error,
+    [start.error, stop.error, restart.error],
+  );
+
   return (
     <div className="flex h-full w-full flex-col bg-background text-foreground">
       {/* Toolbar */}
@@ -50,6 +71,41 @@ export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
           >
             <Terminal className="size-4" aria-hidden="true" />
           </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={() => start.mutate(workspaceId)}
+            disabled={!workspaceId || statusUnknown || isRunning || start.isPending}
+          >
+            <Play className="size-4" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={() => stop.mutate(workspaceId)}
+            disabled={!workspaceId || statusUnknown || !isRunning || stop.isPending}
+          >
+            <Square className="size-4" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={() => restart.mutate(workspaceId)}
+            disabled={!workspaceId || statusUnknown || !isRunning || restart.isPending}
+          >
+            <RotateCw
+              className={cn("size-4", restart.isPending && "animate-spin")}
+              aria-hidden="true"
+            />
+          </Button>
+          {mutationError && (
+            <span className="ml-1 text-[11px] text-destructive">
+              {mutationError.message}
+            </span>
+          )}
         </div>
       </header>
 
@@ -89,7 +145,7 @@ export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
       </div>
 
       {/* Status bar */}
-      <StatusBar activeFilePath={activeFilePath} />
+      <StatusBar activeFilePath={activeFilePath} workspaceId={workspaceId} />
     </div>
   );
 }

web/src/components/workspace/StatusBar.tsx

@@ -3,15 +3,19 @@ import { Terminal, FileCode2 } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { useWorkspaceUiStore } from "@/lib/store/workspace-ui-store";
+import { useProcessStatus } from "@/lib/api/process";
 
 interface StatusBarProps {
   activeFilePath: string;
+  workspaceId: string | null;
 }
 
-export function StatusBar({ activeFilePath }: StatusBarProps) {
+export function StatusBar({ activeFilePath, workspaceId }: StatusBarProps) {
   const terminalVisible = useWorkspaceUiStore((s) => s.terminalVisible);
   const toggleTerminal = useWorkspaceUiStore((s) => s.toggleTerminal);
 
+  const status = useProcessStatus(workspaceId);
+
   return (
     <footer className="flex h-6 shrink-0 items-center border-t border-border bg-sidebar px-3 text-[11px] text-muted-foreground">
       <div className="flex items-center gap-2">
@@ -19,6 +23,37 @@ export function StatusBar({ activeFilePath }: StatusBarProps) {
         <span className="truncate max-w-48">{activeFilePath}</span>
       </div>
       <Separator orientation="vertical" className="mx-2 h-3" />
+      {workspaceId && (
+        <>
+          <div className="flex items-center gap-1.5">
+            <span
+              className={cn(
+                "h-2 w-2 shrink-0 rounded-full",
+                status.isPending && "bg-muted-foreground/50 animate-pulse",
+                status.isError && "bg-destructive",
+                status.isSuccess && status.data.running && "bg-green-500",
+                status.isSuccess && !status.data.running && "bg-red-500",
+              )}
+              aria-hidden="true"
+            />
+            <span
+              className={cn(
+                status.isPending && "text-muted-foreground/70",
+                status.isError && "text-destructive",
+              )}
+            >
+              {status.isPending
+                ? "checking…"
+                : status.isError
+                  ? "opencode: error"
+                  : status.data?.running
+                    ? `opencode: running${status.data.pid !== undefined ? ` (PID ${status.data.pid})` : ""}`
+                    : "opencode: stopped"}
+            </span>
+          </div>
+          <Separator orientation="vertical" className="mx-2 h-3" />
+        </>
+      )}
       <span className="font-medium">codespace</span>
       <div className="ml-auto flex items-center gap-1">
         <button