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>
   );
 }