feat(app): panel zoom — full-grid render + header toggle

Wire Cmd::SetZoom through Tauri bridge (set_zoom command), add zoomed
field to WorkspaceView, short-circuit LayoutEngine to render only the
zoomed panel full-grid, and toggle Maximize2/Minimize2 in panel header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/src-tauri/src/bridge.rs

@@ -299,6 +299,17 @@ pub async fn focus(state: BridgeState<'_>, surface_id: String) -> Result<Value,
     data_of(state.request(Cmd::Focus { surface_id: SurfaceId(surface_id) }).await.map_err(|e| e.to_string())?)
 }
 
+// ---- SP4 zoom command ----
+
+#[tauri::command]
+pub async fn set_zoom(state: BridgeState<'_>, workspace_id: String, surface_id: Option<String>) -> Result<Value, String> {
+    let cmd = Cmd::SetZoom {
+        workspace_id: spacesh_proto::WorkspaceId(workspace_id),
+        surface_id: surface_id.map(spacesh_proto::SurfaceId),
+    };
+    data_of(state.request(cmd).await.map_err(|e| e.to_string())?)
+}
+
 // ---- M3 event log commands ----
 
 #[tauri::command]

app/src-tauri/src/lib.rs

@@ -49,6 +49,7 @@ pub fn run() {
             bridge::set_group,
             bridge::delete_group,
             bridge::focus,
+            bridge::set_zoom,
             bridge::event_log,
             bridge::mark_read,
             bridge::health,

app/src/App.tsx

@@ -113,7 +113,7 @@ export function App() {
           )}
           <div style={{ flex: 1, minHeight: 0 }}>
             {active
-              ? <LayoutEngine workspaceId={active.id} layout={active.layout} running={running} states={states} surfaces={active.surfaces} focusedId={effectiveFocus} onFocus={setFocusedId} />
+              ? <LayoutEngine workspaceId={active.id} layout={active.layout} running={running} states={states} surfaces={active.surfaces} focusedId={effectiveFocus} onFocus={setFocusedId} zoomed={active.zoomed} />
               : <div style={{ color: COLORS.textMuted, padding: 24 }}>No workspace — create one to begin.</div>}
           </div>
         </div>

app/src/LayoutEngine.tsx

@@ -1,10 +1,10 @@
 import { useRef } from "react";
-import { Maximize2, RotateCw } from "lucide-react";
+import { Maximize2, Minimize2, RotateCw } from "lucide-react";
 import { TerminalView } from "./TerminalView";
 import { StatusRing } from "./StatusRing";
 import { COLORS, FONT, STATE_COLOR } from "./theme";
 import type { LayoutNode, SurfaceState, SurfaceView } from "./layoutTypes";
-import { setRatios, restartSurface } from "./socketBridge";
+import { setRatios, restartSurface, setZoom } from "./socketBridge";
 
 interface Props {
   workspaceId: string;
@@ -15,6 +15,7 @@ interface Props {
   surfaces: Record<string, SurfaceView>;
   focusedId: string | null;
   onFocus: (id: string) => void;
+  zoomed: string | null;
 }
 
 /** Collapse an absolute cwd into a ~/<leaf> style label for the panel header. */
@@ -23,21 +24,29 @@ function shortPath(cwd: string): string {
   return leaf ? `~/${leaf}` : cwd;
 }
 
-export function LayoutEngine({ workspaceId, layout, running, states, surfaces, focusedId, onFocus }: Props) {
+export function LayoutEngine({ workspaceId, layout, running, states, surfaces, focusedId, onFocus, zoomed }: Props) {
   if (!layout) {
     return <div style={{ color: COLORS.textMuted, padding: 24 }}>Empty workspace — apply a preset to add panels.</div>;
   }
+  if (zoomed) {
+    return (
+      <div style={{ width: "100%", height: "100%", padding: 12, boxSizing: "border-box" }}>
+        <Node workspaceId={workspaceId} node={{ leaf: { surface_id: zoomed } }} path={[]} running={running} states={states} surfaces={surfaces} focusedId={focusedId} onFocus={onFocus} zoomed={zoomed} />
+      </div>
+    );
+  }
   return (
     <div style={{ width: "100%", height: "100%", padding: 12, boxSizing: "border-box" }}>
-      <Node workspaceId={workspaceId} node={layout} path={[]} running={running} states={states} surfaces={surfaces} focusedId={focusedId} onFocus={onFocus} />
+      <Node workspaceId={workspaceId} node={layout} path={[]} running={running} states={states} surfaces={surfaces} focusedId={focusedId} onFocus={onFocus} zoomed={zoomed} />
     </div>
   );
 }
 
-function Node({ workspaceId, node, path, running, states, surfaces, focusedId, onFocus }: {
+function Node({ workspaceId, node, path, running, states, surfaces, focusedId, onFocus, zoomed }: {
   workspaceId: string; node: LayoutNode; path: number[];
   running: Record<string, boolean>; states: Record<string, SurfaceState>;
   surfaces: Record<string, SurfaceView>; focusedId: string | null; onFocus: (id: string) => void;
+  zoomed: string | null;
 }) {
   if ("leaf" in node) {
     const id = node.leaf.surface_id;
@@ -60,10 +69,18 @@ function Node({ workspaceId, node, path, running, states, surfaces, focusedId, o
       return card(
         <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", width: "100%", color: COLORS.textSecondary, flexDirection: "column", gap: 10 }}>
           <div style={{ fontFamily: FONT.mono, fontSize: 13 }}>Process exited</div>
-          <button onClick={() => void restartSurface(id)}
-            style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 12 }}>
-            <RotateCw size={13} /> Restart
-          </button>
+          <div style={{ display: "flex", gap: 8 }}>
+            <button onClick={() => void restartSurface(id)}
+              style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 12 }}>
+              <RotateCw size={13} /> Restart
+            </button>
+            {zoomed === id && (
+              <button onClick={() => void setZoom(workspaceId, null)}
+                style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", background: "transparent", color: COLORS.textSecondary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 12 }}>
+                <Minimize2 size={13} /> Exit zoom
+              </button>
+            )}
+          </div>
         </div>
       );
     }
@@ -81,7 +98,11 @@ function Node({ workspaceId, node, path, running, states, surfaces, focusedId, o
           <span style={{ display: "flex", alignItems: "center", height: 16, padding: "0 7px", borderRadius: 8, background: "#000", fontFamily: FONT.mono, fontSize: 10, fontWeight: 600, color: STATE_COLOR[state] }}>
             {state}
           </span>
-          <Maximize2 size={13} color={COLORS.textMuted} style={{ cursor: "pointer" }} aria-label="Zoom (mock)" />
+          {zoomed === id
+            ? <Minimize2 size={13} color={COLORS.textSecondary} style={{ cursor: "pointer" }} aria-label="Unzoom"
+                onMouseDown={(e) => { e.stopPropagation(); void setZoom(workspaceId, null); }} />
+            : <Maximize2 size={13} color={COLORS.textMuted} style={{ cursor: "pointer" }} aria-label="Zoom"
+                onMouseDown={(e) => { e.stopPropagation(); onFocus(id); void setZoom(workspaceId, id); }} />}
         </div>
         <div style={{ flex: 1, minHeight: 0 }}>
           <TerminalView key={id} surfaceId={id} />
@@ -102,7 +123,7 @@ function Node({ workspaceId, node, path, running, states, surfaces, focusedId, o
             next[i + 1] = Math.max(0.05, (next[i + 1] ?? 1) - deltaFrac);
             void setRatios(workspaceId, path, next);
           }}>
-          <Node workspaceId={workspaceId} node={child} path={[...path, i]} running={running} states={states} surfaces={surfaces} focusedId={focusedId} onFocus={onFocus} />
+          <Node workspaceId={workspaceId} node={child} path={[...path, i]} running={running} states={states} surfaces={surfaces} focusedId={focusedId} onFocus={onFocus} zoomed={zoomed} />
         </Pane>
       ))}
     </div>

app/src/layoutTypes.ts

@@ -35,6 +35,7 @@ export interface WorkspaceView {
   order: number;
   unread: boolean;
   layout: LayoutNode | null;
+  zoomed: string | null;
   surfaces: Record<string, SurfaceView>;
 }
 

app/src/socketBridge.ts

@@ -181,3 +181,7 @@ export interface DaemonHealth { version: string; pid: number; started_at_ms: num
 export async function getHealth(): Promise<DaemonHealth> {
   return await invoke<DaemonHealth>("health");
 }
+
+export async function setZoom(workspaceId: string, surfaceId: string | null): Promise<void> {
+  await invoke("set_zoom", { workspaceId, surfaceId });
+}