@wrongstack/webui 0.270.0 → 0.272.1

package/dist/index.js

@@ -607,6 +607,9 @@ var WrongStackWebSocketClient = class {
   listFiles(query, limit, path) {
     this.send({ type: "files.list", payload: { query, limit, path } });
   }
+  requestCompletion(payload) {
+    this.send({ type: "completion.request", payload });
+  }
   getTodos() {
     this.send({ type: "todos.get" });
   }
@@ -879,16 +882,7 @@ var useConfigStore = create2()(
     (set) => ({
       provider: "anthropic",
       model: "claude-sonnet-4-20250514",
-      wsUrl: (() => {
-        if (typeof window === "undefined" || !window.location?.hostname) {
-          return "ws://127.0.0.1:3457";
-        }
-        const h = window.location.hostname.toLowerCase();
-        if (h === "localhost" || h === "127.0.0.1" || h === "[::1]" || h === "::1") {
-          return "ws://127.0.0.1:3457";
-        }
-        return `ws://${window.location.hostname}:3457`;
-      })(),
+      wsUrl: defaultWsUrl(),
       wsConnected: false,
       wsStatus: { state: "connecting" },
       theme: "system",
@@ -903,7 +897,23 @@ var useConfigStore = create2()(
       setSoundOnComplete: (on) => set({ soundOnComplete: on })
     }),
     {
-      name: "wrongstack-config"
+      name: "wrongstack-config",
+      partialize: (state) => ({
+        provider: state.provider,
+        model: state.model,
+        baseUrl: state.baseUrl,
+        apiKey: state.apiKey,
+        theme: state.theme,
+        autoConnect: state.autoConnect,
+        soundOnComplete: state.soundOnComplete
+      }),
+      merge: (persisted, current) => ({
+        ...current,
+        ...persisted,
+        wsUrl: defaultWsUrl(),
+        wsConnected: false,
+        wsStatus: { state: "connecting" }
+      })
     }
   )
 );
@@ -973,6 +983,10 @@ var useSessionStore = create3()(
         cacheReadCost: env.cacheReadCost ?? state.cacheReadCost
       })),
       setIteration: (iteration) => set({ iteration }),
+      setContextUsage: (tokens, maxContext) => set((state) => ({
+        lastInputTokens: tokens,
+        maxContext: maxContext ?? state.maxContext
+      })),
       setModes: (modes) => set({ modes }),
       setContextModes: (contextModes) => set({ contextModes }),
       setTodos: (todos) => set({ todos })
@@ -1023,7 +1037,9 @@ var useUIStore = create4()(
       refineEnabled: true,
       refinePanel: null,
       dockSection: null,
+      workDashboardTab: "todos",
       hiddenChips: [],
+      dockCustomizeOpen: false,
       fleetMonitorOpen: false,
       agentsMonitorOpen: false,
       inspectorOpen: false,
@@ -1085,6 +1101,7 @@ var useUIStore = create4()(
       toggleRefineEnabled: () => set((s) => ({ refineEnabled: !s.refineEnabled })),
       setRefinePanel: (panel) => set({ refinePanel: panel }),
       setDockSection: (section) => set({ dockSection: section }),
+      setWorkDashboardTab: (tab) => set({ workDashboardTab: tab }),
       toggleDockSection: (section) => set((s) => ({ dockSection: s.dockSection === section ? null : section })),
       toggleChipHidden: (section) => set((s) => {
         const hidden = s.hiddenChips.includes(section);
@@ -1094,6 +1111,7 @@ var useUIStore = create4()(
           dockSection: !hidden && s.dockSection === section ? null : s.dockSection
         };
       }),
+      setDockCustomizeOpen: (open) => set({ dockCustomizeOpen: open }),
       setFleetMonitorOpen: (open) => set({ fleetMonitorOpen: open }),
       setAgentsMonitorOpen: (open) => set({ agentsMonitorOpen: open }),
       setInspectorOpen: (open) => set({ inspectorOpen: open }),
@@ -1141,6 +1159,7 @@ var useUIStore = create4()(
         fileExplorerWidth: s.fileExplorerWidth,
         refineEnabled: s.refineEnabled,
         hiddenChips: s.hiddenChips,
+        workDashboardTab: s.workDashboardTab,
         inspectorOpen: s.inspectorOpen,
         inspectorTab: s.inspectorTab,
         skillsState: s.skillsState
@@ -1422,13 +1441,21 @@ var useFleetStore = create10()((set, get) => ({
   fleetConcurrency: 0,
   fleetConcurrencyMax: 4,
   eventTimeline: [],
+  agentTimeline: [],
+  pushAgentTimelineEntry: (entry) => set((state) => ({
+    agentTimeline: [
+      { id: `agent_tl_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`, ...entry },
+      ...state.agentTimeline
+    ].slice(0, 200)
+  })),
   clear: () => set({
     agents: /* @__PURE__ */ new Map(),
     leaderId: void 0,
     fleetTokensIn: 0,
     fleetTokensOut: 0,
     fleetConcurrency: 0,
-    eventTimeline: []
+    eventTimeline: [],
+    agentTimeline: []
   }),
   getAgentsBySession: (sessionId) => {
     const result = [];
@@ -1544,6 +1571,22 @@ var useFleetStore = create10()((set, get) => ({
           value: e.costUsd
         });
         break;
+      case "budget_warning": {
+        const kind = e.budgetKind ?? "budget";
+        const used = typeof e.used === "number" ? e.used : 0;
+        const limit = typeof e.limit === "number" ? e.limit : 0;
+        next.budgetWarning = { kind, used, limit };
+        timeline = pushTimeline(timeline, {
+          id: makeTimelineId(),
+          kind: "budget_warning",
+          agentId: e.subagentId,
+          agentName: next.name,
+          timestamp: now,
+          message: `${next.name} hit ${kind} budget ${used}/${limit}`,
+          value: used
+        });
+        break;
+      }
       case "budget_extended":
         next.extensions = e.totalExtensions ?? next.extensions + 1;
         next.budgetWarning = void 0;
@@ -1644,6 +1687,18 @@ var useGoalStore = create11()((set) => ({
   goal: null,
   setGoal: (raw) => set({ goal: parseGoalState(raw) }),
   clear: () => set({ goal: null }),
+  appendJournalEntry: (entry) => set((state) => {
+    if (!state.goal) return state;
+    return {
+      goal: {
+        ...state.goal,
+        iterations: Math.max(state.goal.iterations, entry.iteration),
+        lastTask: entry.task ?? state.goal.lastTask,
+        lastStatus: entry.status ?? state.goal.lastStatus,
+        journal: [entry, ...state.goal.journal ?? []].slice(0, 200)
+      }
+    };
+  }),
   refresh: () => {
     try {
       getWSClient()?.send?.({ type: "goal.get" });
@@ -1660,19 +1715,31 @@ var useAutoPhaseStore = create12()((set) => ({
   overallPercent: 0,
   autonomous: false,
   title: null,
+  status: "idle",
+  lastEvent: null,
+  lastError: null,
+  progress: null,
   setState: (patch) => set((prev) => ({
     phases: patch.phases ?? prev.phases,
     activePhaseId: patch.activePhaseId !== void 0 ? patch.activePhaseId : prev.activePhaseId,
     overallPercent: patch.overallPercent ?? prev.overallPercent,
     autonomous: patch.autonomous ?? prev.autonomous,
-    title: patch.title !== void 0 ? patch.title : prev.title
+    title: patch.title !== void 0 ? patch.title : prev.title,
+    status: patch.status ?? prev.status,
+    lastEvent: patch.lastEvent !== void 0 ? patch.lastEvent : prev.lastEvent,
+    lastError: patch.lastError !== void 0 ? patch.lastError : prev.lastError,
+    progress: patch.progress !== void 0 ? patch.progress : prev.progress
   })),
   clear: () => set({
     phases: [],
     activePhaseId: null,
     overallPercent: 0,
     autonomous: false,
-    title: null
+    title: null,
+    status: "idle",
+    lastEvent: null,
+    lastError: null,
+    progress: null
   })
 }));
 
@@ -1842,6 +1909,7 @@ function inferKind(event, isTarget = false) {
     case "agent:status":
     case "agent:text":
     case "agent:ctx":
+    case "budget:warning":
     case "budget:extended":
       return "agent";
     case "tool:started":
@@ -1851,10 +1919,13 @@ function inferKind(event, isTarget = false) {
     case "mailbox:send":
     case "mailbox:deliver":
       return "mailbox";
+    case "collab:event":
+      return "system";
     case "session:start":
     case "session:end":
     case "iteration:start":
     case "iteration:end":
+    case "eternal:iteration":
     case "fleet:snapshot":
       return "session";
     case "context:compacted":
@@ -2093,6 +2164,21 @@ function wsToVizEvent(wsType, payload) {
         flowGroup: "provider"
       };
     }
+    case "provider.stream_error": {
+      const message = payload.message ?? "Provider stream error";
+      return {
+        id: nextId(),
+        kind: "error",
+        timestamp: Date.now(),
+        source: "provider",
+        target: "leader",
+        label: message.slice(0, 80),
+        magnitude: 1,
+        data: payload,
+        color: NODE_COLORS.error,
+        flowGroup: "provider"
+      };
+    }
     case "tool.started": {
       const name = payload.name ?? "tool";
       return {
@@ -2140,6 +2226,54 @@ function wsToVizEvent(wsType, payload) {
         flowGroup: `tool:${name}`
       };
     }
+    case "tool.loop_detected": {
+      const tools = payload.tools ?? "";
+      const kind = payload.kind ?? "loop";
+      return {
+        id: nextId(),
+        kind: "error",
+        timestamp: Date.now(),
+        source: tools || kind,
+        target: "leader",
+        label: `${kind} loop x${payload.repeatCount ?? 0}`,
+        magnitude: payload.repeatCount ?? 1,
+        data: payload,
+        color: NODE_COLORS.error,
+        flowGroup: "tool"
+      };
+    }
+    case "delegate.started": {
+      const target = payload.target ?? "delegate";
+      const task = payload.task ?? "";
+      return {
+        id: nextId(),
+        kind: "agent:status",
+        timestamp: Date.now(),
+        source: "leader",
+        target,
+        label: task.slice(0, 80) || `Delegating to ${target}`,
+        magnitude: 1,
+        data: payload,
+        color: NODE_COLORS.agent,
+        flowGroup: `delegate:${target}`
+      };
+    }
+    case "delegate.completed": {
+      const target = payload.subagentId ?? payload.target ?? "delegate";
+      const ok = payload.ok ?? false;
+      return {
+        id: nextId(),
+        kind: ok ? "agent:status" : "error",
+        timestamp: Date.now(),
+        source: target,
+        target: "leader",
+        label: (payload.summary ?? payload.status ?? "delegate completed").slice(0, 80),
+        magnitude: payload.durationMs ?? 1,
+        data: payload,
+        color: ok ? NODE_COLORS.agent : NODE_COLORS.error,
+        flowGroup: `delegate:${target}`
+      };
+    }
     case "subagent.event": {
       const kind = payload.kind;
       const agentId = payload.subagentId ?? "unknown";
@@ -2228,6 +2362,19 @@ function wsToVizEvent(wsType, payload) {
             color: "hsl(40, 90%, 55%)",
             flowGroup: `agent:${agentId}`
           };
+        case "budget_warning":
+          return {
+            id: nextId(),
+            kind: "budget:warning",
+            timestamp: Date.now(),
+            source: agentId,
+            target: "session",
+            label: `${agentName} hit ${payload.budgetKind ?? "budget"} ${payload.used ?? 0}/${payload.limit ?? 0}`,
+            magnitude: payload.used ?? 1,
+            data: payload,
+            color: NODE_COLORS.error,
+            flowGroup: `agent:${agentId}`
+          };
       }
       return null;
     }
@@ -2265,6 +2412,37 @@ function wsToVizEvent(wsType, payload) {
         flowGroup: "iteration"
       };
     }
+    case "iteration.completed": {
+      const idx = payload.index ?? 0;
+      return {
+        id: nextId(),
+        kind: "iteration:end",
+        timestamp: Date.now(),
+        source: "leader",
+        target: "session",
+        label: `Iteration ${idx} done`,
+        magnitude: idx,
+        data: payload,
+        color: NODE_COLORS.session,
+        flowGroup: "iteration"
+      };
+    }
+    case "ctx.pct": {
+      const load = payload.load ?? 0;
+      const tokens = payload.tokens ?? 0;
+      return {
+        id: nextId(),
+        kind: "agent:ctx",
+        timestamp: Date.now(),
+        source: "leader",
+        target: "session",
+        label: `ctx ${Math.round(load * 100)}%`,
+        magnitude: tokens,
+        data: payload,
+        color: NODE_COLORS.agent,
+        flowGroup: "leader"
+      };
+    }
     case "error": {
       const msg = payload.message ?? "Error";
       return {
@@ -2293,6 +2471,21 @@ function wsToVizEvent(wsType, payload) {
         color: "hsl(220, 60%, 50%)",
         flowGroup: "context"
       };
+    case "compaction.failed": {
+      const message = payload.message ?? "Compaction failed";
+      return {
+        id: nextId(),
+        kind: "error",
+        timestamp: Date.now(),
+        source: "compactor",
+        target: "session",
+        label: message.slice(0, 80),
+        magnitude: payload.tokens ?? 1,
+        data: payload,
+        color: NODE_COLORS.error,
+        flowGroup: "context"
+      };
+    }
     case "context.repaired":
       return {
         id: nextId(),
@@ -3223,6 +3416,10 @@ function pipeViz2(msg) {
     useVizStore.getState().setActive(true);
   }
 }
+var warnedCostModels = /* @__PURE__ */ new Set();
+function truncateLine(text, max = 140) {
+  return text.length > max ? `${text.slice(0, max - 1)}\u2026` : text;
+}
 function handleSessionStart(msg) {
   const vizStart = wsToVizEvent("session.start", msg.payload);
   if (vizStart) {
@@ -3346,6 +3543,17 @@ function handleContextCompacted(msg) {
   useChatStore.getState().addMessage({ role: "assistant", content: `\u{1F5DC}\uFE0F Context compacted: ${payload.before} \u2192 ${payload.after} tokens (saved ~${payload.saved}). ${summary}` });
   useSessionStore.setState({ lastInputTokens: payload.after });
 }
+function handleCompactionFailed(msg) {
+  pipeViz2(msg);
+  const payload = msg.payload;
+  const load = payload.maxContext > 0 ? Math.round(payload.tokens / payload.maxContext * 100) : 0;
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Compaction failed at ${payload.level} (${load}% context): ${payload.message}`,
+    isError: payload.fatal
+  });
+  toast.error(`Compaction failed: ${payload.message}`);
+}
 function handleProviderResponse(msg) {
   pipeViz2(msg);
   const payload = msg.payload;
@@ -3366,6 +3574,127 @@ function handleProviderResponse(msg) {
   useChatStore.getState().setCurrentAssistantMessage(null);
   useChatStore.getState().clearThinking();
 }
+function handleIterationCompleted(msg) {
+  pipeViz2(msg);
+  const p = msg.payload;
+  const current = useSessionStore.getState().iteration;
+  if (current) {
+    useSessionStore.getState().setIteration({
+      index: p.index,
+      max: current.max
+    });
+  }
+}
+function handleIterationLimitReached(msg) {
+  const p = msg.payload;
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Iteration limit reached: ${p.currentIterations}/${p.currentLimit}.`,
+    isError: true
+  });
+  toast.warn(`Iteration limit reached (${p.currentIterations}/${p.currentLimit})`);
+}
+function handleProviderRetry(msg) {
+  const payload = msg.payload;
+  const seconds = Math.max(0, Math.round(payload.delayMs / 100) / 10);
+  toast.warn(
+    `${payload.providerId} retry ${payload.attempt} after ${seconds}s (${payload.status})`
+  );
+}
+function handleProviderError(msg) {
+  const payload = msg.payload;
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: [
+      `Provider error from \`${payload.providerId}\` (${payload.status}).`,
+      payload.description,
+      payload.retryable ? "_Retryable; WrongStack may recover automatically._" : ""
+    ].filter(Boolean).join("\n\n"),
+    isError: true
+  });
+  toast.error(`${payload.providerId} provider error (${payload.status})`);
+}
+function handleProviderFallback(msg) {
+  const payload = msg.payload;
+  const from = `${payload.from.providerId}/${payload.from.model}`;
+  const to = `${payload.to.providerId}/${payload.to.model}`;
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Provider fallback: \`${from}\` returned ${payload.status}; switching to \`${to}\`${payload.providerSwitched ? " with provider change" : ""}.`
+  });
+  toast.warn(`Fallback to ${to}`);
+}
+function handleProviderStreamError(msg) {
+  pipeViz2(msg);
+  const p = msg.payload;
+  toast.warn(`Provider stream event skipped: ${p.eventType}`);
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Provider stream warning (${p.eventType}): ${p.message}`,
+    isError: true
+  });
+}
+function handleToolLoopDetected(msg) {
+  pipeViz2(msg);
+  const p = msg.payload;
+  const subject = p.tools || p.kind || "assistant response";
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Loop guard triggered: ${subject} repeated ${p.repeatCount} time(s) at iteration ${p.iteration}.`,
+    isError: true
+  });
+  toast.warn("Loop guard triggered");
+}
+function handleDelegateStarted(msg) {
+  pipeViz2(msg);
+  const p = msg.payload;
+  const task = truncateLine(p.task, 180);
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Delegating to \`${p.target}\`: ${task}`
+  });
+  useFleetStore.getState().pushAgentTimelineEntry({
+    subagentId: p.target,
+    agentName: p.target,
+    content: task,
+    kind: "status",
+    iteration: 0,
+    ts: (/* @__PURE__ */ new Date()).toISOString(),
+    status: "delegating"
+  });
+}
+function handleDelegateCompleted(msg) {
+  pipeViz2(msg);
+  const p = msg.payload;
+  const seconds = Math.max(0, Math.round(p.durationMs / 100) / 10);
+  const cost = typeof p.costUsd === "number" && p.costUsd > 0 ? ` \xB7 $${p.costUsd.toFixed(4)}` : "";
+  const stats = `${p.iterations} iteration(s), ${p.toolCalls} tool call(s), ${seconds}s${cost}`;
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: [
+      `Delegate ${p.ok ? "completed" : "failed"} for \`${p.target}\`${p.status ? ` (${p.status})` : ""}.`,
+      p.summary,
+      stats
+    ].join("\n"),
+    isError: !p.ok
+  });
+  useFleetStore.getState().pushAgentTimelineEntry({
+    subagentId: p.subagentId ?? p.target,
+    agentName: p.target,
+    content: p.summary,
+    kind: p.ok ? "status" : "error",
+    iteration: p.iterations,
+    ts: (/* @__PURE__ */ new Date()).toISOString(),
+    status: p.status ?? (p.ok ? "completed" : "failed")
+  });
+  if (!p.ok) toast.warn(`Delegate failed: ${p.target}`);
+}
+function handleTrustPersisted(msg) {
+  const p = msg.payload;
+  const label = `${p.tool}: ${p.pattern}`;
+  if (p.decision === "always") toast.success(`Always allowed ${label}`);
+  else toast.warn(`Denied ${label}`);
+}
 function handleContextRepaired(msg) {
   pipeViz2(msg);
   const payload = msg.payload;
@@ -3373,6 +3702,68 @@ function handleContextRepaired(msg) {
   const msgCount = payload.beforeMessages !== void 0 && payload.afterMessages !== void 0 ? ` Messages: ${payload.beforeMessages} -> ${payload.afterMessages}.` : "";
   useChatStore.getState().addMessage({ role: "assistant", content: `Context repaired: removed ${removed} orphan protocol item(s).${msgCount} tool_use ${payload.removedToolUses.length}, tool_result ${payload.removedToolResults.length}.` });
 }
+function handleContextPct(msg) {
+  pipeViz2(msg);
+  const p = msg.payload;
+  useSessionStore.getState().setContextUsage(p.tokens, p.maxContext);
+}
+function handleContextMaxContext(msg) {
+  const p = msg.payload;
+  useSessionStore.getState().setEnv({ maxContext: p.maxContext });
+}
+function handleTokenThreshold(msg) {
+  const p = msg.payload;
+  useSessionStore.getState().setContextUsage(p.used, p.limit);
+  const pct = p.limit > 0 ? Math.round(p.used / p.limit * 100) : 0;
+  toast.warn(`Token threshold reached (${pct}%)`);
+}
+function handleTokenCostEstimateUnavailable(msg) {
+  const p = msg.payload;
+  const model = p.model || "<unknown>";
+  if (warnedCostModels.has(model)) return;
+  warnedCostModels.add(model);
+  toast.warn(`Cost estimate unavailable for ${model}`);
+}
+function handleSessionDamaged(msg) {
+  const p = msg.payload;
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Session ${p.sessionId} is damaged: ${p.detail}`,
+    isError: true
+  });
+  toast.error("Session damage detected");
+}
+function handleSessionRewound(msg) {
+  const p = msg.payload;
+  useChatStore.getState().addMessage({
+    role: "assistant",
+    content: `Session rewound to prompt #${p.toPromptIndex}. Removed ${p.removedEvents} event(s); reverted ${p.revertedFiles.length} file(s).`
+  });
+  toast.info("Session rewound");
+}
+function handleCheckpointWritten(msg) {
+  const p = msg.payload;
+  toast.success(`Checkpoint #${p.promptIndex} written (${p.fileCount} file(s))`);
+}
+function handleInFlightStarted(msg) {
+  const p = msg.payload;
+  useVizStore.getState().pushEvent({
+    id: `inflight_${Date.now()}`,
+    kind: "session:start",
+    timestamp: Date.now(),
+    source: "session",
+    target: "leader",
+    label: `In-flight: ${p.context}`,
+    magnitude: 1,
+    data: p,
+    raw: msg.payload,
+    flowGroup: "session"
+  });
+}
+function handleInFlightEnded(msg) {
+  const p = msg.payload;
+  if (p.reason === "recovered") toast.info("Recovered previous in-flight operation");
+}
 function handleSessionEnd() {
   useConfigStore.getState().setWsConnected(false);
 }
@@ -3398,9 +3789,29 @@ var sessionHandlerMap = {
   "context.debug": handleContextDebug,
   "key.operation_result": handleKeyOperationResult,
   "context.compacted": handleContextCompacted,
+  "compaction.failed": handleCompactionFailed,
   "provider.response": handleProviderResponse,
+  "iteration.completed": handleIterationCompleted,
+  "iteration.limit_reached": handleIterationLimitReached,
+  "provider.retry": handleProviderRetry,
+  "provider.error": handleProviderError,
+  "provider.fallback": handleProviderFallback,
+  "provider.stream_error": handleProviderStreamError,
+  "tool.loop_detected": handleToolLoopDetected,
+  "delegate.started": handleDelegateStarted,
+  "delegate.completed": handleDelegateCompleted,
+  "trust.persisted": handleTrustPersisted,
   "context.repaired": handleContextRepaired,
+  "ctx.pct": handleContextPct,
+  "ctx.max_context": handleContextMaxContext,
+  "token.threshold": handleTokenThreshold,
+  "token.cost_estimate_unavailable": handleTokenCostEstimateUnavailable,
   "session.end": handleSessionEnd,
+  "session.damaged": handleSessionDamaged,
+  "session.rewound": handleSessionRewound,
+  "checkpoint.written": handleCheckpointWritten,
+  "in_flight.started": handleInFlightStarted,
+  "in_flight.ended": handleInFlightEnded,
   "context.modes.list": handleContextModesList,
   "context.mode.changed": handleContextModeChanged,
   "sessions.list": handleSessionsList,
@@ -3544,14 +3955,85 @@ var filesMailboxHandlerMap = {
 
 // src/hooks/ws-handlers/misc-handlers.ts
 import { normalizedEqual } from "@wrongstack/core";
+function deriveAutoPhaseStatus(phases) {
+  if (!phases || phases.length === 0) return void 0;
+  const statuses = phases.map((p) => p.status);
+  if (statuses.some((s) => s === "failed")) return "failed";
+  if (statuses.every((s) => s === "completed" || s === "skipped")) return "completed";
+  if (statuses.some((s) => s === "paused")) return "paused";
+  return "running";
+}
 function handleAutoPhaseState(msg) {
   const p = msg.payload;
+  const phases = Array.isArray(p.phases) ? p.phases : void 0;
+  const status = deriveAutoPhaseStatus(phases);
   useAutoPhaseStore.getState().setState({
-    phases: Array.isArray(p.phases) ? p.phases : void 0,
+    phases,
     activePhaseId: typeof p.activePhaseId === "string" ? p.activePhaseId : void 0,
     overallPercent: typeof p.overallPercent === "number" ? p.overallPercent : void 0,
     autonomous: typeof p.autonomous === "boolean" ? p.autonomous : void 0,
-    title: typeof p.title === "string" ? p.title : void 0
+    title: typeof p.title === "string" ? p.title : void 0,
+    status,
+    lastError: status === "failed" ? useAutoPhaseStore.getState().lastError : null
+  });
+}
+function handleAutoPhaseProgress(msg) {
+  const p = msg.payload;
+  const progress = {
+    totalPhases: typeof p.totalPhases === "number" ? p.totalPhases : 0,
+    completed: typeof p.completed === "number" ? p.completed : 0,
+    failed: typeof p.failed === "number" ? p.failed : 0,
+    totalTasks: typeof p.totalTasks === "number" ? p.totalTasks : 0,
+    completedTasks: typeof p.completedTasks === "number" ? p.completedTasks : 0,
+    failedTasks: typeof p.failedTasks === "number" ? p.failedTasks : 0
+  };
+  useAutoPhaseStore.getState().setState({
+    progress,
+    overallPercent: typeof p.percentComplete === "number" ? Math.round(p.percentComplete) : void 0,
+    status: progress.failed > 0 || progress.failedTasks > 0 ? "failed" : "running",
+    lastEvent: "progress"
+  });
+}
+function handleAutoPhaseLifecycle(msg) {
+  const p = msg.payload;
+  const title = typeof p.title === "string" && p.title ? p.title : "AutoPhase";
+  const error = typeof p.error === "string" && p.error ? p.error : void 0;
+  if (msg.type === "autophase.paused") {
+    useAutoPhaseStore.getState().setState({ status: "paused", autonomous: false, lastEvent: "paused" });
+    toast.info("AutoPhase paused");
+    return;
+  }
+  if (msg.type === "autophase.resumed") {
+    useAutoPhaseStore.getState().setState({ status: "running", autonomous: true, lastEvent: "resumed" });
+    toast.info("AutoPhase resumed");
+    return;
+  }
+  if (msg.type === "autophase.stopped") {
+    useAutoPhaseStore.getState().setState({ status: "stopped", autonomous: false, lastEvent: "stopped" });
+    toast.warn("AutoPhase stopped");
+    return;
+  }
+  if (msg.type === "autophase.saved") {
+    useAutoPhaseStore.getState().setState({ lastEvent: "saved" });
+    toast.success("AutoPhase graph saved");
+    return;
+  }
+  if (msg.type === "autophase.completed") {
+    useAutoPhaseStore.getState().setState({ status: "completed", autonomous: false, overallPercent: 100, lastEvent: "completed", lastError: null });
+    toast.success(`${title} completed`);
+    return;
+  }
+  if (msg.type === "autophase.failed" || msg.type === "autophase.error") {
+    const message = error ?? (typeof p.message === "string" ? p.message : `${title} failed`);
+    useAutoPhaseStore.getState().setState({ status: "failed", autonomous: false, lastEvent: "failed", lastError: message });
+    toast.error(message);
+  }
+}
+function handleAutoPhaseList(msg) {
+  const p = msg.payload;
+  useAutoPhaseStore.getState().setState({
+    lastEvent: "list",
+    progress: p.graphs ? { totalPhases: p.graphs.length, completed: 0, failed: 0, totalTasks: 0, completedTasks: 0, failedTasks: 0 } : void 0
   });
 }
 function handleGoalUpdated(msg) {
@@ -3611,6 +4093,62 @@ function handleBrainEvent(msg) {
     toast.warn(`Brain denied: ${p.decision?.reason ?? p.request?.question ?? "request"}`);
   }
 }
+function handleCollabEvent(msg) {
+  const p = msg.payload;
+  const label = typeof p.kind === "string" ? p.kind : typeof p.event === "string" ? p.event : "collab.event";
+  useVizStore.getState().pushEvent({
+    id: `collab_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`,
+    kind: "collab:event",
+    timestamp: Date.now(),
+    source: "collab",
+    target: typeof p.sessionId === "string" ? p.sessionId : "session",
+    label,
+    magnitude: 1,
+    data: p,
+    raw: msg.payload,
+    color: "hsl(200, 70%, 55%)",
+    flowGroup: "collab"
+  });
+  useVizStore.getState().setActive(true);
+}
+function handleCollabInjectionGranted(msg) {
+  handleCollabEvent(msg);
+  const p = msg.payload;
+  if (p?.phase === "consumed") {
+    toast.success(`Tool injection applied${p.toolName ? ` to ${p.toolName}` : ""}`);
+  } else {
+    toast.info("Collab tool injection queued");
+  }
+}
+function handleEternalIteration(msg) {
+  const payload = msg.payload;
+  const entry = payload?.entry;
+  if (!entry) return;
+  const iteration = typeof entry.iteration === "number" ? entry.iteration : 0;
+  const task = typeof entry.task === "string" ? entry.task : void 0;
+  const status = typeof entry.status === "string" ? entry.status : void 0;
+  const timestamp = typeof entry.at === "string" ? entry.at : (/* @__PURE__ */ new Date()).toISOString();
+  useGoalStore.getState().appendJournalEntry({
+    iteration,
+    task,
+    status,
+    timestamp
+  });
+  useVizStore.getState().pushEvent({
+    id: `eternal_${Date.now()}_${iteration}`,
+    kind: "eternal:iteration",
+    timestamp: Date.now(),
+    source: "eternal",
+    target: "goal",
+    label: task ? `L${iteration}: ${task}` : `Eternal iteration ${iteration}`,
+    magnitude: typeof entry.costUsd === "number" ? entry.costUsd : 1,
+    data: entry,
+    raw: msg.payload,
+    color: status === "failure" ? "hsl(0, 80%, 55%)" : "hsl(220, 80%, 60%)",
+    flowGroup: "eternal"
+  });
+  useVizStore.getState().setActive(true);
+}
 function handleWorkingDirChanged(msg) {
   const p = msg.payload;
   useSessionStore.getState().setEnv({
@@ -3672,9 +4210,21 @@ var miscHandlerMap = {
   "goal.updated": handleGoalUpdated,
   "prefs.updated": handlePrefsUpdated,
   "autophase.state": handleAutoPhaseState,
+  "autophase.progress": handleAutoPhaseProgress,
+  "autophase.paused": handleAutoPhaseLifecycle,
+  "autophase.resumed": handleAutoPhaseLifecycle,
+  "autophase.stopped": handleAutoPhaseLifecycle,
+  "autophase.saved": handleAutoPhaseLifecycle,
+  "autophase.completed": handleAutoPhaseLifecycle,
+  "autophase.failed": handleAutoPhaseLifecycle,
+  "autophase.error": handleAutoPhaseLifecycle,
+  "autophase.list": handleAutoPhaseList,
   "brain.status": handleBrainStatus,
   "brain.answer": handleBrainAnswer,
   "brain.event": handleBrainEvent,
+  "collab.event": handleCollabEvent,
+  "collab.injection.granted": handleCollabInjectionGranted,
+  "eternal.iteration": handleEternalIteration,
   "working_dir.changed": handleWorkingDirChanged,
   "model.refine_result": handleModelRefineResult,
   "git.info": handleGitInfo,
@@ -3862,6 +4412,30 @@ var WS_HANDLERS = {
   "todos.cleared": (_msg) => {
     useSessionStore.getState().setTodos([]);
   },
+  "agent.timeline.message": (msg) => {
+    const p = msg.payload;
+    useFleetStore.getState().pushAgentTimelineEntry({
+      subagentId: p.subagentId,
+      agentName: p.agentName,
+      content: p.content.slice(0, 200),
+      kind: p.kind,
+      iteration: p.iteration,
+      ts: p.ts,
+      toolName: p.toolName
+    });
+  },
+  "agent.status_changed": (msg) => {
+    const p = msg.payload;
+    useFleetStore.getState().pushAgentTimelineEntry({
+      subagentId: p.subagentId,
+      agentName: p.agentName,
+      content: p.summary ?? p.status,
+      kind: "status",
+      iteration: 0,
+      ts: p.ts,
+      status: p.status
+    });
+  },
   "tasks.updated": (msg) => {
   },
   "plan.updated": (msg) => {
@@ -4912,6 +5486,8 @@ function AutoPhaseView({ onClose }) {
   const overallPercent = useAutoPhaseStore((s) => s.overallPercent);
   const autonomous = useAutoPhaseStore((s) => s.autonomous);
   const title = useAutoPhaseStore((s) => s.title);
+  const status = useAutoPhaseStore((s) => s.status);
+  const lastError = useAutoPhaseStore((s) => s.lastError);
   const worktrees = useWorktreeStore((s) => s.worktrees);
   const baseBranch = useWorktreeStore((s) => s.baseBranch);
   const [goal, setGoal] = useState3("");
@@ -4936,8 +5512,8 @@ function AutoPhaseView({ onClose }) {
     client2?.send?.({ type: "autophase.toggleAutonomous", payload: {} });
   }, [client2]);
   const handleTaskStatusChange = useCallback2(
-    (taskId, status) => {
-      client2?.send?.({ type: "autophase.taskStatus", payload: { taskId, status } });
+    (taskId, status2) => {
+      client2?.send?.({ type: "autophase.taskStatus", payload: { taskId, status: status2 } });
     },
     [client2]
   );
@@ -4957,7 +5533,18 @@ function AutoPhaseView({ onClose }) {
             overallPercent,
             "% complete"
           ] })
-        ] })
+        ] }),
+        hasPhases && /* @__PURE__ */ jsx10(
+          "span",
+          {
+            className: cn(
+              "rounded border px-2 py-0.5 text-[11px] font-medium capitalize",
+              status === "failed" ? "border-destructive/40 bg-destructive/10 text-destructive" : status === "paused" || status === "stopped" ? "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300" : status === "completed" ? "border-green-500/40 bg-green-500/10 text-green-700 dark:text-green-300" : "border-primary/30 bg-primary/10 text-primary"
+            ),
+            title: lastError ?? void 0,
+            children: status
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx10(Button, { variant: "ghost", size: "icon", onClick: onClose, children: /* @__PURE__ */ jsx10(X2, { className: "h-4 w-4" }) })
     ] }),
@@ -5316,7 +5903,7 @@ var SLASH_COMMANDS = [
   { name: "/f2", category: "App", description: "Fleet orchestration monitor", hidden: true },
   { name: "/f3", category: "App", description: "Agents live monitor", hidden: true },
   { name: "/f4", category: "App", description: "Worktree monitor", hidden: true },
-  { name: "/f5", category: "App", description: "Autonomy settings", hidden: true },
+  { name: "/f5", category: "App", description: "Plan panel", hidden: true },
   { name: "/f6", category: "App", description: "Todos monitor overlay", hidden: true },
   { name: "/f7", category: "App", description: "Queue panel", hidden: true },
   { name: "/f8", category: "App", description: "Process list overlay", hidden: true },
@@ -6093,6 +6680,12 @@ function runChatSlashCommand(options) {
   const head = (sp === -1 ? trimmed : trimmed.slice(0, sp)).toLowerCase();
   const args = sp === -1 ? "" : trimmed.slice(sp + 1).trim();
   const cmd = head;
+  const openWorkTab = (tab) => {
+    const ui = useUIStore.getState();
+    ui.setCurrentView("chat");
+    ui.setDockSection("work");
+    ui.setWorkDashboardTab(tab);
+  };
   switch (cmd) {
     case "/help": {
       const lines = [
@@ -6270,7 +6863,7 @@ _Pass \`/working-dir <path>\` to change it._` : "Working directory unknown. Pass
     case "/plan":
       ws.getPlan();
       setCurrentView("chat");
-      useUIStore.getState().setDockSection("work");
+      openWorkTab("plan");
       return true;
     case "/todos": {
       const sub = args.toLowerCase();
@@ -6278,6 +6871,7 @@ _Pass \`/working-dir <path>\` to change it._` : "Working directory unknown. Pass
         client2?.clearTodos?.();
         return true;
       }
+      openWorkTab("todos");
       const list = useSessionStore.getState().todos;
       if (list.length === 0) {
         addMessage({
@@ -6398,7 +6992,7 @@ ${err}` : "Investigate the most recent error or failing test, find the root caus
         "/f2": "fleetMonitor",
         "/f3": "agentsMonitor",
         "/f4": "worktreeMonitor",
-        "/f5": "autonomySettings",
+        "/f5": "planPanel",
         "/f6": "todosMonitor",
         "/f7": "queuePanel",
         "/f8": "processList",
@@ -6407,7 +7001,7 @@ ${err}` : "Investigate the most recent error or failing test, find the root caus
         "/f11": "coordinatorMonitor",
         "/f12": "statuslinePicker"
       };
-      const panel = panelMap[cmd];
+      const panel = cmd === "/f" && args ? panelMap[`/f${args.trim()}`] : panelMap[cmd];
       if (!panel) {
         const lines = [
           "\u{1F39B}\uFE0F  **F-key panels**",
@@ -6416,7 +7010,7 @@ ${err}` : "Investigate the most recent error or failing test, find the root caus
           "/f 2 \u2014 Fleet orchestration monitor",
           "/f 3 \u2014 Agents live monitor",
           "/f 4 \u2014 Worktree monitor",
-          "/f 5 \u2014 Autonomy settings",
+          "/f 5 \u2014 Plan panel",
           "/f 6 \u2014 Todos monitor overlay",
           "/f 7 \u2014 Queue panel",
           "/f 8 \u2014 Process list overlay",
@@ -6431,6 +7025,13 @@ ${err}` : "Investigate the most recent error or failing test, find the root caus
         return true;
       }
       const ui = useUIStore.getState();
+      ui.setCurrentView("chat");
+      ui.setDockCustomizeOpen(false);
+      if (panel === "projectPicker") {
+        ui.setSidebarOpen(true);
+        ui.selectActivity("projects");
+        return true;
+      }
       if (panel === "fleetMonitor") {
         ui.setFleetMonitorOpen(true);
         return true;
@@ -6439,6 +7040,21 @@ ${err}` : "Investigate the most recent error or failing test, find the root caus
         ui.setAgentsMonitorOpen(true);
         return true;
       }
+      if (panel === "worktreeMonitor") {
+        ui.setDockSection("worktrees");
+        return true;
+      }
+      if (panel === "planPanel") {
+        ws.getPlan();
+        ui.setDockSection("work");
+        ui.setWorkDashboardTab("plan");
+        return true;
+      }
+      if (panel === "todosMonitor") {
+        ui.setDockSection("work");
+        ui.setWorkDashboardTab("todos");
+        return true;
+      }
       if (panel === "queuePanel") {
         ui.setQueuePanelOpen(true);
         return true;
@@ -6447,10 +7063,27 @@ ${err}` : "Investigate the most recent error or failing test, find the root caus
         ui.setProcessMonitorOpen(true);
         return true;
       }
-      addMessage({
-        role: "assistant",
-        content: `Panel \`${panel}\` is not available in the WebUI. Try the TUI for full F-key panel support.`
-      });
+      if (panel === "goalPanel") {
+        client2?.send?.({ type: "goal.get" });
+        ui.setDockSection("goal");
+        return true;
+      }
+      if (panel === "sessionsPanel") {
+        ws.listSessions(50);
+        setCurrentView("sessions");
+        return true;
+      }
+      if (panel === "coordinatorMonitor") {
+        ui.setSidebarOpen(true);
+        ui.selectActivity("officemap");
+        ui.setCurrentView("officemap");
+        return true;
+      }
+      if (panel === "statuslinePicker") {
+        ui.setDockSection("work");
+        ui.setDockCustomizeOpen(true);
+        return true;
+      }
       return true;
     }
     default:
@@ -11223,6 +11856,72 @@ function ChatView() {
   ] });
 }
 
+// src/lib/completion.ts
+var LANG_MAP = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  json: "json",
+  css: "css",
+  html: "html",
+  svg: "xml",
+  md: "markdown",
+  yml: "yaml",
+  yaml: "yaml",
+  toml: "toml",
+  sh: "shell",
+  bash: "shell",
+  ps1: "powershell",
+  py: "python",
+  rs: "rust",
+  go: "go",
+  rb: "ruby",
+  java: "java",
+  c: "c",
+  cpp: "cpp",
+  h: "c",
+  hpp: "cpp",
+  sql: "sql",
+  xml: "xml"
+};
+var COMPLETION_LANGUAGES = Array.from(new Set(Object.values(LANG_MAP))).filter((lang) => lang !== "plaintext");
+var COMPLETION_PREFIX_CHARS = 12e3;
+var COMPLETION_SUFFIX_CHARS = 4e3;
+var COMPLETION_TIMEOUT_MS = 5e3;
+var COMPLETION_CACHE_TTL_MS = 1e4;
+var COMPLETION_DOCUMENT_CHARS = 5e5;
+function getLanguage(filePath) {
+  const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
+  return LANG_MAP[ext] ?? "plaintext";
+}
+function currentToken(linePrefix) {
+  return linePrefix.match(/([A-Za-z_$][\w$]*)$/)?.[1] ?? "";
+}
+function shouldAskCompletionServer(trigger, tokenText) {
+  if (trigger.triggerCharacter) return true;
+  return tokenText.length >= 3;
+}
+function shouldAllowCompletionLlm(trigger, tokenText) {
+  if (trigger.triggerCharacter === ".") return true;
+  if (trigger.triggerCharacter) return false;
+  return /^(findBy|findAllBy|create|update|delete|remove|get[A-Z_]|set[A-Z_]|use[A-Z_])/.test(
+    tokenText
+  );
+}
+function buildCompletionCacheKey(input) {
+  return [
+    input.filePath,
+    input.language,
+    input.lineNumber,
+    input.column,
+    input.versionId ?? "",
+    input.triggerCharacter ?? "",
+    input.linePrefix.slice(-160),
+    input.suffix.slice(0, 160)
+  ].join("\0");
+}
+
 // src/components/CodeEditor.tsx
 import { X as X8, Circle as Circle3 } from "lucide-react";
 import { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo8, useRef as useRef16 } from "react";
@@ -11587,37 +12286,43 @@ function getMonacoTheme() {
 // src/components/CodeEditor.tsx
 import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
 loader.config({ monaco: monaco2 });
-var LANG_MAP = {
-  ts: "typescript",
-  tsx: "typescript",
-  js: "javascript",
-  jsx: "javascript",
-  json: "json",
-  css: "css",
-  html: "html",
-  svg: "xml",
-  md: "markdown",
-  yml: "yaml",
-  yaml: "yaml",
-  toml: "toml",
-  sh: "shell",
-  bash: "shell",
-  ps1: "powershell",
-  py: "python",
-  rs: "rust",
-  go: "go",
-  rb: "ruby",
-  java: "java",
-  c: "c",
-  cpp: "cpp",
-  h: "c",
-  hpp: "cpp",
-  sql: "sql",
-  xml: "xml"
-};
-function getLanguage(filePath) {
-  const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
-  return LANG_MAP[ext] ?? "plaintext";
+function completionKind(kind) {
+  switch (kind) {
+    case "method":
+      return monaco2.languages.CompletionItemKind.Method;
+    case "function":
+      return monaco2.languages.CompletionItemKind.Function;
+    case "constructor":
+      return monaco2.languages.CompletionItemKind.Constructor;
+    case "field":
+      return monaco2.languages.CompletionItemKind.Field;
+    case "variable":
+      return monaco2.languages.CompletionItemKind.Variable;
+    case "class":
+      return monaco2.languages.CompletionItemKind.Class;
+    case "interface":
+      return monaco2.languages.CompletionItemKind.Interface;
+    case "module":
+      return monaco2.languages.CompletionItemKind.Module;
+    case "property":
+      return monaco2.languages.CompletionItemKind.Property;
+    case "unit":
+      return monaco2.languages.CompletionItemKind.Unit;
+    case "value":
+      return monaco2.languages.CompletionItemKind.Value;
+    case "enum":
+      return monaco2.languages.CompletionItemKind.Enum;
+    case "keyword":
+      return monaco2.languages.CompletionItemKind.Keyword;
+    case "snippet":
+      return monaco2.languages.CompletionItemKind.Snippet;
+    case "file":
+      return monaco2.languages.CompletionItemKind.File;
+    case "reference":
+      return monaco2.languages.CompletionItemKind.Reference;
+    default:
+      return monaco2.languages.CompletionItemKind.Text;
+  }
 }
 function EditorTabs() {
   const openFiles = useFileStore((s) => s.openFiles);
@@ -11672,16 +12377,120 @@ function CodeEditor() {
   const updateContent = useFileStore((s) => s.updateContent);
   const { theme: appTheme } = useTheme();
   const editorRef = useRef16(null);
+  const activeFilePathRef = useRef16(activeFilePath);
+  const completionCacheRef = useRef16(/* @__PURE__ */ new Map());
   const activeFile = useMemo8(
     () => openFiles.find((f) => f.path === activeFilePath) ?? null,
     [openFiles, activeFilePath]
   );
   const language = activeFilePath ? getLanguage(activeFilePath) : "plaintext";
   const monacoTheme = getMonacoTheme();
+  useEffect21(() => {
+    activeFilePathRef.current = activeFilePath;
+  }, [activeFilePath]);
   useEffect21(() => {
     const resolved = getMonacoTheme();
     monaco2.editor.setTheme(resolved);
   }, [appTheme]);
+  useEffect21(() => {
+    const disposables = COMPLETION_LANGUAGES.map(
+      (registeredLanguage) => monaco2.languages.registerCompletionItemProvider(registeredLanguage, {
+        triggerCharacters: [".", "_"],
+        provideCompletionItems: async (model, position, context, token) => {
+          const filePath = activeFilePathRef.current;
+          if (!filePath) return { suggestions: [] };
+          const offset = model.getOffsetAt(position);
+          const value = model.getValue();
+          const prefix = value.slice(Math.max(0, offset - COMPLETION_PREFIX_CHARS), offset);
+          const suffix = value.slice(offset, offset + COMPLETION_SUFFIX_CHARS);
+          const linePrefix = model.getLineContent(position.lineNumber).slice(0, Math.max(0, position.column - 1));
+          const tokenText = currentToken(linePrefix);
+          const trigger = {
+            triggerCharacter: context.triggerCharacter,
+            triggerKind: context.triggerKind
+          };
+          if (!shouldAskCompletionServer(trigger, tokenText)) return { suggestions: [] };
+          const requestId = `cmp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+          const word = model.getWordUntilPosition(position);
+          const range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: word.startColumn,
+            endColumn: position.column
+          };
+          const client2 = getWSClient(useConfigStore.getState().wsUrl);
+          const toSuggestions = (items) => items.map((item, index) => ({
+            label: item.label,
+            kind: completionKind(item.kind),
+            insertText: item.insertText,
+            detail: item.detail ?? (item.source ? `WrongStack ${item.source}` : void 0),
+            documentation: item.documentation,
+            sortText: item.sortText ?? `${String(index).padStart(3, "0")}-${item.label}`,
+            range,
+            insertTextRules: item.kind === "snippet" ? monaco2.languages.CompletionItemInsertTextRule.InsertAsSnippet : void 0
+          }));
+          const cacheKey = buildCompletionCacheKey({
+            filePath,
+            language: model.getLanguageId(),
+            lineNumber: position.lineNumber,
+            column: position.column,
+            versionId: model.getVersionId(),
+            triggerCharacter: context.triggerCharacter,
+            linePrefix,
+            suffix
+          });
+          const cached = completionCacheRef.current.get(cacheKey);
+          if (cached && cached.expiresAt > Date.now()) {
+            return { suggestions: toSuggestions(cached.items) };
+          }
+          return await new Promise(
+            (resolve) => {
+              let settled = false;
+              let unsubscribe = () => {
+              };
+              let cancelDisposable = null;
+              let timer;
+              const finish = (suggestions) => {
+                if (settled) return;
+                settled = true;
+                unsubscribe();
+                if (timer !== void 0) window.clearTimeout(timer);
+                cancelDisposable?.dispose();
+                resolve({ suggestions });
+              };
+              unsubscribe = client2.on("completion.result", (message) => {
+                const result = message;
+                if (result.payload.requestId !== requestId) return;
+                completionCacheRef.current.set(cacheKey, {
+                  expiresAt: Date.now() + COMPLETION_CACHE_TTL_MS,
+                  items: result.payload.items
+                });
+                finish(toSuggestions(result.payload.items));
+              });
+              timer = window.setTimeout(() => finish([]), COMPLETION_TIMEOUT_MS);
+              cancelDisposable = token.onCancellationRequested(() => finish([]));
+              client2.requestCompletion({
+                requestId,
+                filePath,
+                language: model.getLanguageId(),
+                lineNumber: position.lineNumber,
+                column: position.column,
+                content: value.length <= COMPLETION_DOCUMENT_CHARS ? value : void 0,
+                prefix,
+                suffix,
+                triggerCharacter: context.triggerCharacter,
+                triggerKind: context.triggerKind,
+                allowLlm: shouldAllowCompletionLlm(trigger, tokenText)
+              });
+            }
+          );
+        }
+      })
+    );
+    return () => {
+      disposables.forEach((disposable) => disposable.dispose());
+    };
+  }, []);
   const handleMount = useCallback11((editor4) => {
     editorRef.current = editor4;
     monaco2.editor.setTheme(getMonacoTheme());
@@ -13290,12 +14099,38 @@ function MCPSection() {
       if (msg.type === "mcp.server.connected") {
         const p = msg.payload;
         setServers(
-          (prev) => prev.map((s) => s.name === p.name ? { ...s, status: "connected", pid: p.pid } : s)
+          (prev) => prev.map(
+            (s) => s.name === p.name ? { ...s, status: "connected", pid: p.pid, error: void 0, lastError: void 0 } : s
+          )
         );
         setPendingOp(null);
         toast.success(`Server "${p.name}" connected`);
       }
     };
+    const handleMcpServerReconnected = (msg) => {
+      if (msg.type === "mcp.server.reconnected") {
+        const p = msg.payload;
+        setServers(
+          (prev) => prev.map(
+            (s) => s.name === p.name ? { ...s, status: "connected", error: void 0, lastError: void 0 } : s
+          )
+        );
+        setPendingOp(null);
+        toast.success(`Server "${p.name}" reconnected`);
+      }
+    };
+    const handleMcpServerDisconnected = (msg) => {
+      if (msg.type === "mcp.server.disconnected") {
+        const p = msg.payload;
+        setServers(
+          (prev) => prev.map(
+            (s) => s.name === p.name ? { ...s, status: "error", error: p.reason, lastError: p.reason, pid: void 0 } : s
+          )
+        );
+        setPendingOp(null);
+        toast.warn(`Server "${p.name}" disconnected: ${p.reason}`);
+      }
+    };
     const handleMcpServerError = (msg) => {
       if (msg.type === "mcp.server.error") {
         const p = msg.payload;
@@ -13325,6 +14160,8 @@ function MCPSection() {
     const off8 = ws.client.on("mcp.server.connected", handleMcpServerConnected);
     const off9 = ws.client.on("mcp.server.error", handleMcpServerError);
     const off10 = ws.client.on("mcp.operation_result", handleMcpOperationResult);
+    const off11 = ws.client.on("mcp.server.reconnected", handleMcpServerReconnected);
+    const off12 = ws.client.on("mcp.server.disconnected", handleMcpServerDisconnected);
     setLoading(true);
     ws.client?.listMcpServers();
     return () => {
@@ -13338,6 +14175,8 @@ function MCPSection() {
       off8?.();
       off9?.();
       off10?.();
+      off11?.();
+      off12?.();
     };
   }, [ws.client]);
   const handleAddCustom = useCallback13(
@@ -15449,10 +16288,27 @@ var SHORTCUTS = [
       { keys: ["Ctrl", "K"], description: "Open command palette" },
       { keys: ["?"], description: "Show this shortcuts overlay" },
       { keys: ["Ctrl", "\\"], description: "Toggle sidebar" },
-      { keys: ["Ctrl", "1-6"], description: "Open side panel (Session, Agents, History, Files, Projects, Mailbox)" },
+      { keys: ["Ctrl", "1-9"], description: "Open side panel (Session, Agents, History, Files, Changes, Projects, Mailbox, Skills, Office Map)" },
       { keys: ["Ctrl", "/"], description: "Focus the message input" }
     ]
   },
+  {
+    section: "TUI Panel Parity",
+    items: [
+      { keys: ["F1"], description: "Project switcher" },
+      { keys: ["F2"], description: "Fleet monitor overlay" },
+      { keys: ["F3"], description: "Agents monitor overlay" },
+      { keys: ["F4"], description: "Worktree monitor" },
+      { keys: ["F5"], description: "Plan panel" },
+      { keys: ["F6"], description: "Todos panel" },
+      { keys: ["F7"], description: "Queue panel" },
+      { keys: ["F8"], description: "Process monitor" },
+      { keys: ["F9"], description: "Goal panel" },
+      { keys: ["F10"], description: "Sessions dashboard" },
+      { keys: ["F11"], description: "Coordinator office map" },
+      { keys: ["F12"], description: "Dock chip picker" }
+    ]
+  },
   {
     section: "Fleet & Agents",
     items: [
@@ -18998,7 +19854,7 @@ function SidePanel() {
 
 // src/components/WorkspaceDock.tsx
 import { Bot as Bot10, GitBranch as GitBranch3, ListTodo as ListTodo3, Maximize2 as Maximize22, Rocket as Rocket4, SlidersHorizontal as SlidersHorizontal2, Target as Target2, Users as Users4 } from "lucide-react";
-import { useCallback as useCallback30, useEffect as useEffect47, useMemo as useMemo16, useRef as useRef27, useState as useState50 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect47, useMemo as useMemo16, useRef as useRef27, useState as useState49 } from "react";
 
 // src/hooks/useGitInfo.ts
 import { useCallback as useCallback25, useEffect as useEffect41, useRef as useRef23 } from "react";
@@ -19020,18 +19876,38 @@ function useGitInfo() {
 }
 
 // src/components/CollabPanel.tsx
-import { Eye as Eye2, LogIn, LogOut, MessageSquareWarning, Pause as Pause5, Play as Play5, Users as Users3 } from "lucide-react";
+import {
+  Eye as Eye2,
+  LogIn,
+  LogOut,
+  MessageSquareWarning,
+  Pause as Pause5,
+  Play as Play5,
+  Syringe,
+  UserPlus,
+  Users as Users3
+} from "lucide-react";
 import { useEffect as useEffect42, useState as useState44 } from "react";
 import { jsx as jsx72, jsxs as jsxs65 } from "react/jsx-runtime";
 function CollabPanel({ sessionId, className }) {
   const [participants, setParticipants] = useState44([]);
   const [joined, setJoined] = useState44(false);
-  const [joinedRole, setJoinedRole] = useState44(null);
+  const [joinedRole, setJoinedRole] = useState44(
+    null
+  );
   const [error, setError] = useState44(null);
   const [openAnnotationCount, setOpenAnnotationCount] = useState44(0);
   const [paused, setPaused] = useState44(false);
+  const [injectOpen, setInjectOpen] = useState44(false);
+  const [injectToolUseId, setInjectToolUseId] = useState44("");
+  const [injectContent, setInjectContent] = useState44("");
+  const [injectIsError, setInjectIsError] = useState44(false);
+  const [injectReason, setInjectReason] = useState44("");
   const wsUrl = useConfigStore((s) => s.wsUrl);
   const client2 = getWSClient(wsUrl);
+  const pendingTools = useChatStore((s) => s.messages).filter(
+    (m) => m.role === "tool" && m.toolResult === void 0 && !!m.toolUseId
+  );
   useEffect42(() => {
     const offs = [];
     offs.push(
@@ -19119,6 +19995,28 @@ function CollabPanel({ sessionId, className }) {
     setJoined(false);
     setParticipants([]);
   };
+  const handleGrantControl = (toParticipant) => {
+    client2.send({ type: "collab.grant_control", payload: { sessionId, toParticipant } });
+  };
+  const handleInjectTool = () => {
+    if (!injectToolUseId) return;
+    client2.send({
+      type: "collab.inject_tool",
+      payload: {
+        sessionId,
+        toolUseId: injectToolUseId,
+        content: injectContent,
+        isError: injectIsError,
+        reason: injectReason.trim() || "controller injection"
+      }
+    });
+    setInjectOpen(false);
+    setInjectToolUseId("");
+    setInjectContent("");
+    setInjectIsError(false);
+    setInjectReason("");
+  };
+  const isController = joined && joinedRole === "controller";
   if (participants.length === 0 && !error) {
     return /* @__PURE__ */ jsxs65(
       "div",
@@ -19209,7 +20107,7 @@ function CollabPanel({ sessionId, className }) {
     "div",
     {
       className: cn(
-        "flex items-center gap-2 px-3 py-2 rounded-md border border-emerald-500/40 bg-emerald-500/5",
+        "relative flex items-center gap-2 px-3 py-2 rounded-md border border-emerald-500/40 bg-emerald-500/5",
         className
       ),
       children: [
@@ -19255,7 +20153,17 @@ function CollabPanel({ sessionId, className }) {
               className: "inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
               children: [
                 /* @__PURE__ */ jsx72(Eye2, { className: "w-3 h-3" }),
-                p.role
+                p.role,
+                isController && p.role !== "controller" && /* @__PURE__ */ jsx72(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleGrantControl(p.participantId),
+                    title: "Grant control \u2014 promote this participant to controller",
+                    className: "ml-0.5 inline-flex items-center rounded hover:bg-emerald-500/20 transition-colors",
+                    children: /* @__PURE__ */ jsx72(UserPlus, { className: "w-3 h-3" })
+                  }
+                )
               ]
             },
             p.participantId
@@ -19265,31 +20173,46 @@ function CollabPanel({ sessionId, className }) {
             participants.length - 3
           ] })
         ] }),
-        joined && joinedRole === "controller" && (paused ? /* @__PURE__ */ jsxs65(
-          "button",
-          {
-            type: "button",
-            onClick: handleResume,
-            className: "ml-auto inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-rose-500/40 bg-rose-500/10 text-rose-700 dark:text-rose-300 hover:bg-rose-500/20 transition-colors",
-            title: "Resume the agent loop",
-            children: [
-              /* @__PURE__ */ jsx72(Play5, { className: "w-3 h-3" }),
-              "Resume"
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs65(
-          "button",
-          {
-            type: "button",
-            onClick: handleRequestPause,
-            className: "ml-auto inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300 hover:bg-amber-500/20 transition-colors",
-            title: "Pause the agent before the next tool call",
-            children: [
-              /* @__PURE__ */ jsx72(Pause5, { className: "w-3 h-3" }),
-              "Pause agent"
-            ]
-          }
-        )),
+        isController && /* @__PURE__ */ jsxs65("div", { className: "ml-auto flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxs65(
+            "button",
+            {
+              type: "button",
+              onClick: () => setInjectOpen((v) => !v),
+              className: "inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300 hover:bg-sky-500/20 transition-colors",
+              title: "Inject a synthetic result for an in-flight tool call",
+              children: [
+                /* @__PURE__ */ jsx72(Syringe, { className: "w-3 h-3" }),
+                "Inject"
+              ]
+            }
+          ),
+          paused ? /* @__PURE__ */ jsxs65(
+            "button",
+            {
+              type: "button",
+              onClick: handleResume,
+              className: "inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-rose-500/40 bg-rose-500/10 text-rose-700 dark:text-rose-300 hover:bg-rose-500/20 transition-colors",
+              title: "Resume the agent loop",
+              children: [
+                /* @__PURE__ */ jsx72(Play5, { className: "w-3 h-3" }),
+                "Resume"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs65(
+            "button",
+            {
+              type: "button",
+              onClick: handleRequestPause,
+              className: "inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300 hover:bg-amber-500/20 transition-colors",
+              title: "Pause the agent before the next tool call",
+              children: [
+                /* @__PURE__ */ jsx72(Pause5, { className: "w-3 h-3" }),
+                "Pause agent"
+              ]
+            }
+          )
+        ] }),
         joined && joinedRole !== "controller" && /* @__PURE__ */ jsxs65(
           "button",
           {
@@ -19302,7 +20225,92 @@ function CollabPanel({ sessionId, className }) {
               "Leave"
             ]
           }
-        )
+        ),
+        isController && injectOpen && /* @__PURE__ */ jsxs65("div", { className: "absolute top-full left-0 right-0 mt-1 z-50 flex flex-col gap-2 p-3 rounded-md border border-sky-500/40 bg-card shadow-lg text-xs", children: [
+          /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx72(Syringe, { className: "w-3.5 h-3.5 text-sky-600 dark:text-sky-400" }),
+            /* @__PURE__ */ jsx72("span", { className: "font-medium", children: "Inject tool result" }),
+            /* @__PURE__ */ jsx72(
+              "button",
+              {
+                type: "button",
+                onClick: () => setInjectOpen(false),
+                className: "ml-auto text-muted-foreground hover:text-foreground",
+                children: "close"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs65("label", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx72("span", { className: "text-muted-foreground", children: "Target tool_use id" }),
+            /* @__PURE__ */ jsx72(
+              "input",
+              {
+                list: "collab-inject-tools",
+                value: injectToolUseId,
+                onChange: (e) => setInjectToolUseId(e.target.value),
+                placeholder: "pick an in-flight call or type a tool_use id",
+                className: "px-2 py-1 rounded border border-border bg-background font-mono"
+              }
+            ),
+            /* @__PURE__ */ jsx72("datalist", { id: "collab-inject-tools", children: pendingTools.map((m) => {
+              const snip = m.toolInput === void 0 ? "" : ` \u2014 ${JSON.stringify(m.toolInput).slice(0, 40)}`;
+              return /* @__PURE__ */ jsxs65("option", { value: m.toolUseId, children: [
+                m.toolName ?? "tool",
+                snip
+              ] }, m.toolUseId);
+            }) }),
+            pendingTools.length === 0 && /* @__PURE__ */ jsx72("span", { className: "text-[10px] text-muted-foreground", children: "No in-flight tool calls \u2014 type a tool_use id to pre-queue, or pause the agent first." })
+          ] }),
+          /* @__PURE__ */ jsxs65("label", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx72("span", { className: "text-muted-foreground", children: "Result content" }),
+            /* @__PURE__ */ jsx72(
+              "textarea",
+              {
+                value: injectContent,
+                onChange: (e) => setInjectContent(e.target.value),
+                rows: 3,
+                placeholder: "Synthetic tool result fed to the agent in place of running the tool",
+                className: "px-2 py-1 rounded border border-border bg-background font-mono"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs65("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx72(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: injectIsError,
+                  onChange: (e) => setInjectIsError(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx72("span", { children: "mark as error" })
+            ] }),
+            /* @__PURE__ */ jsx72(
+              "input",
+              {
+                type: "text",
+                value: injectReason,
+                onChange: (e) => setInjectReason(e.target.value),
+                placeholder: "reason (audit log)",
+                className: "flex-1 px-2 py-1 rounded border border-border bg-background"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs65(
+            "button",
+            {
+              type: "button",
+              onClick: handleInjectTool,
+              disabled: !injectToolUseId,
+              className: "self-end inline-flex items-center gap-1 text-xs px-3 py-1 rounded bg-sky-600 text-white hover:bg-sky-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              children: [
+                /* @__PURE__ */ jsx72(Syringe, { className: "w-3 h-3" }),
+                "Queue injection"
+              ]
+            }
+          )
+        ] })
       ]
     }
   );
@@ -19601,9 +20609,6 @@ var DropdownMenuShortcut = ({ className, ...props }) => {
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-// src/components/WorkDashboard.tsx
-import { useState as useState49 } from "react";
-
 // src/components/TodosPanel.tsx
 import { CheckCircle2 as CheckCircle212, Circle as Circle8, Clock as Clock11, Trash2 as Trash26 } from "lucide-react";
 import { useCallback as useCallback27, useEffect as useEffect44, useRef as useRef24, useState as useState46 } from "react";
@@ -20066,7 +21071,8 @@ var TABS = [
   { id: "plan", label: "Plan", icon: "\u{1F5FA}\uFE0F" }
 ];
 function WorkDashboard() {
-  const [activeTab, setActiveTab] = useState49("todos");
+  const activeTab = useUIStore((s) => s.workDashboardTab);
+  const setActiveTab = useUIStore((s) => s.setWorkDashboardTab);
   return /* @__PURE__ */ jsxs71("div", { className: "rounded-lg border border-border bg-card/50 backdrop-blur-sm overflow-hidden", children: [
     /* @__PURE__ */ jsx78("div", { className: "flex border-b border-border/50 bg-muted/30", children: TABS.map((tab) => /* @__PURE__ */ jsxs71(
       "button",
@@ -20163,6 +21169,8 @@ function WorkspaceDock({ sessionId }) {
   const setCurrentView = useUIStore((s) => s.setCurrentView);
   const hiddenChips = useUIStore((s) => s.hiddenChips);
   const toggleChipHidden = useUIStore((s) => s.toggleChipHidden);
+  const dockCustomizeOpen = useUIStore((s) => s.dockCustomizeOpen);
+  const setDockCustomizeOpen = useUIStore((s) => s.setDockCustomizeOpen);
   const goal = useGoalStore((s) => s.goal);
   const autoPhase = useAutoPhaseStore((s) => s);
   const worktrees = useWorktreeStore((s) => s.worktrees);
@@ -20178,7 +21186,7 @@ function WorkspaceDock({ sessionId }) {
     () => toggleAutoPhaseAutonomous(!autoPhase.autonomous),
     [toggleAutoPhaseAutonomous, autoPhase.autonomous]
   );
-  const [worktreeView, setWorktreeView] = useState50("graph");
+  const [worktreeView, setWorktreeView] = useState49("graph");
   const fleetTotal = fleetAgents.size;
   const fleetRunning = useMemo16(
     () => Array.from(fleetAgents.values()).filter((a) => a.status === "running").length,
@@ -20320,7 +21328,7 @@ function WorkspaceDock({ sessionId }) {
           onClick: () => toggleDockSection("collab")
         }
       ),
-      /* @__PURE__ */ jsxs72(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs72(DropdownMenu, { open: dockCustomizeOpen, onOpenChange: setDockCustomizeOpen, children: [
         /* @__PURE__ */ jsx79(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx79(
           "button",
           {
@@ -20399,7 +21407,7 @@ function WorkspaceDock({ sessionId }) {
 
 // src/components/AgentsMonitor.tsx
 import { Bot as Bot11, ChevronLeft, ChevronRight as ChevronRight11, Cpu as Cpu13, Crown as Crown2, Loader2 as Loader215, Wrench as Wrench8, X as X15, Zap as Zap9 } from "lucide-react";
-import { useCallback as useCallback31, useEffect as useEffect48, useMemo as useMemo17, useState as useState51 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect48, useMemo as useMemo17, useState as useState50 } from "react";
 import { Fragment as Fragment17, jsx as jsx80, jsxs as jsxs73 } from "react/jsx-runtime";
 function fmtCost4(v) {
   if (v <= 0) return "$0";
@@ -20524,7 +21532,7 @@ function AgentCard2({ agent, isLeader }) {
 function AgentsMonitor({ onClose }) {
   const fleetAgents = useFleetStore((s) => s.agents);
   const leaderId = useFleetStore((s) => s.leaderId);
-  const [selectedIdx, setSelectedIdx] = useState51(0);
+  const [selectedIdx, setSelectedIdx] = useState50(0);
   const fleetList = useMemo17(() => {
     const arr = Array.from(fleetAgents.values());
     arr.sort((x, y) => {
@@ -20678,7 +21686,7 @@ import {
   XCircle as XCircle8,
   Zap as Zap10
 } from "lucide-react";
-import { useCallback as useCallback32, useEffect as useEffect49, useMemo as useMemo18, useState as useState52 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect49, useMemo as useMemo18, useState as useState51 } from "react";
 
 // src/components/ui/concurrency-gauge.tsx
 import { jsx as jsx81, jsxs as jsxs74 } from "react/jsx-runtime";
@@ -20721,6 +21729,7 @@ var KIND_ICONS = {
   task_started: "\u25B6",
   tool_executed: "\u26A1",
   iteration_summary: "\u{1F504}",
+  budget_warning: "!",
   budget_extended: "\u26A1",
   task_completed: "\u2705",
   ctx_pct: "\u{1F4AC}",
@@ -20763,8 +21772,8 @@ function FleetAgentDetailPanel({
   agent,
   now
 }) {
-  const [copied, setCopied] = useState52(false);
-  const [showFullToolLog, setShowFullToolLog] = useState52(false);
+  const [copied, setCopied] = useState51(false);
+  const [showFullToolLog, setShowFullToolLog] = useState51(false);
   const meta2 = STATUS_META6[agent.status];
   const active = agent.status === "running";
   const handleCopy = useCallback32(async (text) => {
@@ -21085,8 +22094,9 @@ function FleetMonitor({
   const fleetConcurrency = useFleetStore((s) => s.fleetConcurrency);
   const fleetConcurrencyMax = useFleetStore((s) => s.fleetConcurrencyMax);
   const eventTimeline = useFleetStore((s) => s.eventTimeline);
-  const [selectedIdx, setSelectedIdx] = useState52(null);
-  const [nowTick, setNowTick] = useState52(Date.now());
+  const fleetAgentTimeline = useFleetStore((s) => s.agentTimeline);
+  const [selectedIdx, setSelectedIdx] = useState51(null);
+  const [nowTick, setNowTick] = useState51(Date.now());
   useEffect49(() => {
     const t = setInterval(() => setNowTick(Date.now()), 1e3);
     return () => clearInterval(t);
@@ -21243,9 +22253,26 @@ function FleetMonitor({
               /* @__PURE__ */ jsxs76("div", { className: "border-t bg-card/80 shrink-0", children: [
                 /* @__PURE__ */ jsx83("div", { className: "px-4 py-2 border-b", children: /* @__PURE__ */ jsxs76("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground font-medium flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx83(Clock15, { className: "h-3 w-3" }),
-                  "Event Timeline"
+                  "Agent Timeline"
                 ] }) }),
                 /* @__PURE__ */ jsx83("div", { className: "px-4 py-2 max-h-32 overflow-y-auto", children: /* @__PURE__ */ jsx83(EventTimeline, { events: eventTimeline, max: 10 }) }),
+                /* @__PURE__ */ jsx83("div", { className: "border-t border-dashed" }),
+                /* @__PURE__ */ jsx83("div", { className: "px-4 py-2 max-h-40 overflow-y-auto", children: fleetAgentTimeline.length === 0 ? /* @__PURE__ */ jsx83("p", { className: "text-[10px] text-muted-foreground italic", children: "No agent conversation events yet." }) : /* @__PURE__ */ jsx83("div", { className: "space-y-1", children: fleetAgentTimeline.slice(0, 15).map((entry) => {
+                  const iconMap = { text: "\u{1F4AC}", tool_use: "\u{1F527}", error: "\u274C", status: "\u{1F4AC}" };
+                  const icon = iconMap[entry.kind] ?? "\u25CF";
+                  const statusColor = entry.status === "running" || entry.status === "spawned" ? "text-emerald-500" : entry.status === "failed" || entry.status === "timeout" ? "text-destructive" : "text-muted-foreground";
+                  return /* @__PURE__ */ jsxs76("div", { className: "flex items-start gap-1.5 text-[10px] leading-tight", children: [
+                    /* @__PURE__ */ jsx83("span", { className: "shrink-0", children: icon }),
+                    /* @__PURE__ */ jsx83("span", { className: "font-medium text-primary shrink-0", children: entry.agentName }),
+                    entry.status && /* @__PURE__ */ jsx83("span", { className: `${statusColor} shrink-0`, children: entry.status }),
+                    entry.toolName && /* @__PURE__ */ jsxs76("span", { className: "text-muted-foreground shrink-0", children: [
+                      "[",
+                      entry.toolName,
+                      "]"
+                    ] }),
+                    /* @__PURE__ */ jsx83("span", { className: "text-muted-foreground truncate", children: entry.content })
+                  ] }, entry.id);
+                }) }) }),
                 /* @__PURE__ */ jsxs76("div", { className: "px-4 py-1.5 border-t text-[10px] text-muted-foreground flex items-center gap-4", children: [
                   /* @__PURE__ */ jsx83("span", { children: "\u2191\u2193 navigate" }),
                   /* @__PURE__ */ jsx83("span", { children: "\u21B5 select detail" }),
@@ -21299,7 +22326,7 @@ function FleetMonitor({
 
 // src/components/InspectorPanel.tsx
 import { Bot as Bot13, ChevronDown as ChevronDown11, ChevronUp, Users as Users6 } from "lucide-react";
-import { useMemo as useMemo19, useState as useState53 } from "react";
+import { useMemo as useMemo19, useState as useState52 } from "react";
 import { Fragment as Fragment19, jsx as jsx84, jsxs as jsxs77 } from "react/jsx-runtime";
 var PANEL_HEIGHT = 320;
 function fmtCost5(v) {
@@ -21344,7 +22371,7 @@ function InspectorPanel() {
   const runningCount = fleetList.filter((a) => a.status === "running").length;
   const totalCost = fleetList.reduce((sum, a) => sum + a.costUsd, 0);
   const fleetTotal = fleetList.length;
-  const [selectedAgentId, setSelectedAgentId] = useState53(null);
+  const [selectedAgentId, setSelectedAgentId] = useState52(null);
   const selectedAgent = useMemo19(() => {
     if (!selectedAgentId) return fleetList[0] ?? null;
     return fleetAgents.get(selectedAgentId) ?? fleetList[0] ?? null;
@@ -22035,7 +23062,7 @@ import {
   BookOpen
 } from "lucide-react";
 import TextareaCodeEditor from "@uiw/react-textarea-code-editor";
-import { useCallback as useCallback34, useEffect as useEffect52, useMemo as useMemo20, useRef as useRef30, useState as useState54 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect52, useMemo as useMemo20, useRef as useRef30, useState as useState53 } from "react";
 import ReactMarkdown3 from "react-markdown";
 import rehypeHighlight2 from "rehype-highlight";
 import { Fragment as Fragment20, jsx as jsx88, jsxs as jsxs81 } from "react/jsx-runtime";
@@ -22067,23 +23094,23 @@ function SkillDetailView({ className }) {
   const selectedSkill = skillsState.selectedSkill;
   const navHistory = skillsState.navHistory;
   const historyIndex = skillsState.historyIndex;
-  const [skillContent, setSkillContent] = useState54(null);
-  const [contentLoading, setContentLoading] = useState54(false);
-  const [contentError, setContentError] = useState54(null);
-  const [editMode, setEditMode] = useState54(false);
-  const [editContent, setEditContent] = useState54("");
-  const [editSaving, setEditSaving] = useState54(false);
-  const [editError, setEditError] = useState54(null);
-  const [splitPreview, setSplitPreview] = useState54(false);
-  const [draftSavedAt, setDraftSavedAt] = useState54(null);
-  const [draftRestored, setDraftRestored] = useState54(false);
+  const [skillContent, setSkillContent] = useState53(null);
+  const [contentLoading, setContentLoading] = useState53(false);
+  const [contentError, setContentError] = useState53(null);
+  const [editMode, setEditMode] = useState53(false);
+  const [editContent, setEditContent] = useState53("");
+  const [editSaving, setEditSaving] = useState53(false);
+  const [editError, setEditError] = useState53(null);
+  const [splitPreview, setSplitPreview] = useState53(false);
+  const [draftSavedAt, setDraftSavedAt] = useState53(null);
+  const [draftRestored, setDraftRestored] = useState53(false);
   const lastSavedDraftRef = useRef30("");
-  const [checkingForUpdates, setCheckingForUpdates] = useState54(false);
-  const [updateResult, setUpdateResult] = useState54(null);
-  const [copiedSourceUrl, setCopiedSourceUrl] = useState54(false);
-  const [uninstallConfirmSkill, setUninstallConfirmSkill] = useState54(null);
-  const [uninstalling, setUninstalling] = useState54(false);
-  const [skills, setSkills] = useState54([]);
+  const [checkingForUpdates, setCheckingForUpdates] = useState53(false);
+  const [updateResult, setUpdateResult] = useState53(null);
+  const [copiedSourceUrl, setCopiedSourceUrl] = useState53(false);
+  const [uninstallConfirmSkill, setUninstallConfirmSkill] = useState53(null);
+  const [uninstalling, setUninstalling] = useState53(false);
+  const [skills, setSkills] = useState53([]);
   const skillsStateRef = useRef30(skillsState);
   skillsStateRef.current = skillsState;
   const isNavigatingBack = useRef30(false);
@@ -22783,7 +23810,7 @@ import {
   EdgeLabelRenderer
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { useCallback as useCallback36, useEffect as useEffect54, useMemo as useMemo22, useRef as useRef32, useState as useState56 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect54, useMemo as useMemo22, useRef as useRef32, useState as useState55 } from "react";
 import {
   Bot as Bot16,
   Monitor as Monitor4,
@@ -22807,13 +23834,21 @@ import {
 } from "lucide-react";
 
 // src/components/SessionWatchPanel.tsx
-import { useCallback as useCallback35, useEffect as useEffect53, useMemo as useMemo21, useRef as useRef31, useState as useState55 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect53, useMemo as useMemo21, useRef as useRef31, useState as useState54 } from "react";
 
 // src/components/WatchMessageBubble.tsx
 import ReactMarkdown4 from "react-markdown";
 import remarkGfm2 from "remark-gfm";
-import { AlertCircle as AlertCircle3, Bot as Bot14, Terminal as Terminal7, User as User3 } from "lucide-react";
+import { AlertCircle as AlertCircle3, Bot as Bot14, Clock as Clock17, Terminal as Terminal7, User as User3 } from "lucide-react";
 import { jsx as jsx89, jsxs as jsxs82 } from "react/jsx-runtime";
+function fmtDuration3(durationMs) {
+  if (durationMs < 1e3) return `${durationMs}ms`;
+  const s = Math.round(durationMs / 100);
+  if (s < 600) return `${(s / 10).toFixed(1)}s`;
+  const m = Math.floor(s / 600);
+  const sec = Math.round(s % 600 / 10);
+  return `${m}m ${sec}s`;
+}
 var ROLE_CONFIG = {
   user: {
     Icon: User3,
@@ -22867,29 +23902,41 @@ var ROLE_CONFIG = {
   }
 };
 function WatchBubbleContent({ entry }) {
-  if (!entry.text) return null;
   if (entry.role === "error") {
     return /* @__PURE__ */ jsx89(ErrorBodyWithStack, { text: entry.text });
   }
   if (entry.role === "tool") {
-    const lines = entry.text.split("\n");
-    let toolName = entry.tool || "tool";
-    let inputText = null;
-    if (lines.length > 1) {
-      const maybeJson = lines.slice(1).join("\n");
-      try {
-        JSON.parse(maybeJson);
-        toolName = lines[0] || entry.tool || "tool";
-        inputText = maybeJson;
-      } catch {
-      }
-    }
     return /* @__PURE__ */ jsxs82("div", { className: "flex flex-col gap-1.5 tool-details", children: [
       /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-1.5 text-sm font-medium text-foreground", children: [
         /* @__PURE__ */ jsx89(Terminal7, { className: "h-3 w-3" }),
-        /* @__PURE__ */ jsx89("span", { className: "font-mono", children: toolName })
+        /* @__PURE__ */ jsx89("span", { className: "font-mono", children: entry.tool ?? "tool" }),
+        entry.durationMs !== void 0 && /* @__PURE__ */ jsxs82("span", { className: "ml-auto text-[10px] text-muted-foreground font-normal tabular-nums", children: [
+          /* @__PURE__ */ jsx89(Clock17, { className: "h-3 w-3 inline mr-0.5 align-text-bottom" }),
+          fmtDuration3(entry.durationMs)
+        ] })
       ] }),
-      inputText ? /* @__PURE__ */ jsx89("div", { className: "p-3 bg-muted/50 rounded-lg overflow-x-auto", children: /* @__PURE__ */ jsx89(ToolInputView, { input: JSON.parse(inputText) }) }) : /* @__PURE__ */ jsx89("div", { className: "text-sm leading-relaxed markdown-content", children: /* @__PURE__ */ jsx89(ReactMarkdown4, { remarkPlugins: [remarkGfm2], rehypePlugins, components: markdownComponents, children: entry.text }) })
+      entry.input !== void 0 && entry.input !== null && /* @__PURE__ */ jsx89("div", { className: "p-3 bg-muted/50 rounded-lg overflow-x-auto", children: /* @__PURE__ */ jsx89(ToolInputView, { input: entry.input }) }),
+      entry.output !== void 0 && entry.output !== null ? /* @__PURE__ */ jsx89("div", { className: "text-sm leading-relaxed markdown-content", children: typeof entry.output === "string" ? /* @__PURE__ */ jsx89(
+        ReactMarkdown4,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins,
+          components: markdownComponents,
+          children: entry.output
+        }
+      ) : /* @__PURE__ */ jsx89("pre", { className: "whitespace-pre-wrap font-mono text-xs bg-card rounded-lg p-2 border border-border overflow-x-auto", children: JSON.stringify(entry.output, null, 2) }) }) : entry.text ? /* @__PURE__ */ jsx89("div", { className: "text-sm leading-relaxed markdown-content", children: /* @__PURE__ */ jsx89(
+        ReactMarkdown4,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins,
+          components: markdownComponents,
+          children: entry.text
+        }
+      ) }) : null,
+      entry.isError && /* @__PURE__ */ jsxs82("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2", children: [
+        /* @__PURE__ */ jsx89("span", { className: "text-xs font-medium text-destructive", children: "Tool failed" }),
+        entry.text && /* @__PURE__ */ jsx89("pre", { className: "mt-1 text-xs whitespace-pre-wrap text-destructive/80", children: entry.text })
+      ] })
     ] });
   }
   return /* @__PURE__ */ jsx89("div", { className: "text-sm leading-relaxed markdown-content", children: /* @__PURE__ */ jsx89(
@@ -22923,20 +23970,15 @@ function WatchMessageBubble({
     ),
     /* @__PURE__ */ jsxs82("div", { className: "flex flex-col gap-1.5 min-w-0 flex-1", children: [
       !isContinuation && /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx89(
-          "span",
-          {
-            className: cn(
-              "text-xs font-medium",
-              cfg.textColor
-            ),
-            children: entry.role === "tool" && entry.tool ? entry.tool : cfg.label
-          }
-        ),
+        /* @__PURE__ */ jsx89("span", { className: cn("text-xs font-medium", cfg.textColor), children: entry.role === "tool" && entry.tool ? entry.tool : cfg.label }),
         /* @__PURE__ */ jsx89("span", { className: "text-xs text-muted-foreground", children: new Date(entry.ts).toLocaleTimeString([], {
           hour: "2-digit",
           minute: "2-digit"
-        }) })
+        }) }),
+        entry.role === "tool" && entry.durationMs !== void 0 && /* @__PURE__ */ jsxs82("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: [
+          "\xB7 ",
+          fmtDuration3(entry.durationMs)
+        ] })
       ] }),
       /* @__PURE__ */ jsx89(
         "div",
@@ -22951,16 +23993,7 @@ function WatchMessageBubble({
             cfg.bubbleBg,
             cfg.bubbleBorder
           ),
-          children: /* @__PURE__ */ jsx89(
-            "div",
-            {
-              className: cn(
-                "text-sm leading-relaxed markdown-content",
-                cfg.textColor
-              ),
-              children: /* @__PURE__ */ jsx89(WatchBubbleContent, { entry })
-            }
-          )
+          children: /* @__PURE__ */ jsx89("div", { className: cn("text-sm leading-relaxed markdown-content", cfg.textColor), children: /* @__PURE__ */ jsx89(WatchBubbleContent, { entry }) })
         }
       ),
       entry.text && entry.role !== "error" && /* @__PURE__ */ jsx89("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx89(CopyButton, { text: entry.text, label: "Copy" }) })
@@ -22982,15 +24015,15 @@ function SessionWatchPanel({
   sessionId,
   limit = 200
 }) {
-  const [data, setData] = useState55(null);
-  const [error, setError] = useState55(null);
-  const [draft, setDraft] = useState55("");
-  const [sending, setSending] = useState55(false);
-  const [sent, setSent] = useState55(null);
-  const [msgType, setMsgType] = useState55("steer");
-  const [priority, setPriority] = useState55("high");
-  const [thread, setThread] = useState55([]);
-  const [interrupting, setInterrupting] = useState55(false);
+  const [data, setData] = useState54(null);
+  const [error, setError] = useState54(null);
+  const [draft, setDraft] = useState54("");
+  const [sending, setSending] = useState54(false);
+  const [sent, setSent] = useState54(null);
+  const [msgType, setMsgType] = useState54("steer");
+  const [priority, setPriority] = useState54("high");
+  const [thread, setThread] = useState54([]);
+  const [interrupting, setInterrupting] = useState54(false);
   const scrollRef = useRef31(null);
   const stickRef = useRef31(true);
   const aliveRef = useRef31(true);
@@ -24018,12 +25051,12 @@ function OfficeMapCanvas() {
   const background = useOfficeMapStore((s) => s.background);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const [selectedNode, setSelectedNode] = useState56(null);
-  const [watch, setWatch] = useState56(null);
-  const [broadcastOpen, setBroadcastOpen] = useState56(false);
-  const [broadcastDraft, setBroadcastDraft] = useState56("");
-  const [broadcasting, setBroadcasting] = useState56(false);
-  const [broadcastResult, setBroadcastResult] = useState56(null);
+  const [selectedNode, setSelectedNode] = useState55(null);
+  const [watch, setWatch] = useState55(null);
+  const [broadcastOpen, setBroadcastOpen] = useState55(false);
+  const [broadcastDraft, setBroadcastDraft] = useState55("");
+  const [broadcasting, setBroadcasting] = useState55(false);
+  const [broadcastResult, setBroadcastResult] = useState55(null);
   const sendBroadcast = useCallback36(async () => {
     const text = broadcastDraft.trim();
     if (!text || broadcasting) return;
@@ -24510,7 +25543,7 @@ function OfficeMapCanvas() {
     );
     setTimeout(() => fitView({ padding: 0.2, duration: 300 }), 50);
   }, [setNodes, fitView]);
-  const [, setTick] = useState56(0);
+  const [, setTick] = useState55(0);
   useEffect54(() => {
     const interval = setInterval(() => setTick((t) => t + 1), 2e3);
     return () => clearInterval(interval);
@@ -24889,8 +25922,8 @@ function OfficeMapPanel() {
 }
 
 // src/components/DebugDashboard.tsx
-import { useCallback as useCallback37, useEffect as useEffect55, useState as useState57 } from "react";
-import { Activity as Activity7, AlertCircle as AlertCircle4, BarChart3 as BarChart32, Clock as Clock17, Eye as Eye3, FileWarning, Gauge as Gauge2, RefreshCw as RefreshCw8, Server as Server3, TrendingUp as TrendingUp2 } from "lucide-react";
+import { useCallback as useCallback37, useEffect as useEffect55, useState as useState56 } from "react";
+import { Activity as Activity7, AlertCircle as AlertCircle4, BarChart3 as BarChart32, Clock as Clock18, Eye as Eye3, FileWarning, Gauge as Gauge2, RefreshCw as RefreshCw8, Server as Server3, TrendingUp as TrendingUp2 } from "lucide-react";
 import { jsx as jsx93, jsxs as jsxs85 } from "react/jsx-runtime";
 function MetricCard({
   title,
@@ -24917,14 +25950,14 @@ function MetricCard({
   ] });
 }
 function DebugDashboard() {
-  const [data, setData] = useState57({
+  const [data, setData] = useState56({
     fileWatcher: null,
     system: null,
     lastUpdated: null,
     error: null
   });
-  const [isLoading, setIsLoading] = useState57(true);
-  const [refreshInterval, setRefreshInterval] = useState57(2e3);
+  const [isLoading, setIsLoading] = useState56(true);
+  const [refreshInterval, setRefreshInterval] = useState56(2e3);
   const fetchMetrics = useCallback37(async () => {
     try {
       const watcherRes = await fetch("/debug/watcher-metrics");
@@ -25010,7 +26043,7 @@ function DebugDashboard() {
       ] })
     ] }),
     data.lastUpdated && /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx93(Clock17, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx93(Clock18, { className: "w-4 h-4" }),
       "Last updated: ",
       data.lastUpdated.toLocaleTimeString()
     ] }),
@@ -25095,7 +26128,7 @@ function DebugDashboard() {
             title: "Avg Debounce Delay",
             value: `${(data.fileWatcher?.averageDebounceDelayMs ?? 0).toFixed(1)}ms`,
             subtitle: "Actual delay applied",
-            icon: Clock17,
+            icon: Clock18,
             color: "text-yellow-500"
           }
         ),
@@ -25143,7 +26176,7 @@ function DebugDashboard() {
             title: "Page Uptime",
             value: formatUptime(data.system?.uptime ?? 0),
             subtitle: "Since page load",
-            icon: Clock17,
+            icon: Clock18,
             color: "text-purple-500"
           }
         )
@@ -25295,6 +26328,64 @@ function AppInner() {
           return;
         }
       }
+      if (!inField && !mod && !e.altKey && /^F([1-9]|1[0-2])$/.test(e.key)) {
+        e.preventDefault();
+        const ui = useUIStore.getState();
+        const ws = getWSClient(useConfigStore.getState().wsUrl);
+        const n = Number(e.key.slice(1));
+        ui.setDockCustomizeOpen(false);
+        switch (n) {
+          case 1:
+            openPanel("projects");
+            return;
+          case 2:
+            ui.setFleetMonitorOpen(true);
+            return;
+          case 3:
+            ui.setAgentsMonitorOpen(true);
+            return;
+          case 4:
+            ui.setCurrentView("chat");
+            ui.setDockSection("worktrees");
+            return;
+          case 5:
+            ws?.getPlan?.();
+            ui.setCurrentView("chat");
+            ui.setDockSection("work");
+            ui.setWorkDashboardTab("plan");
+            return;
+          case 6:
+            ui.setCurrentView("chat");
+            ui.setDockSection("work");
+            ui.setWorkDashboardTab("todos");
+            return;
+          case 7:
+            ui.setQueuePanelOpen(true);
+            return;
+          case 8:
+            ui.setProcessMonitorOpen(true);
+            return;
+          case 9:
+            ws?.send?.({ type: "goal.get" });
+            ui.setCurrentView("chat");
+            ui.setDockSection("goal");
+            return;
+          case 10:
+            ws?.listSessions?.(50);
+            ui.setCurrentView("sessions");
+            return;
+          case 11:
+            ui.setSidebarOpen(true);
+            ui.selectActivity("officemap");
+            ui.setCurrentView("officemap");
+            return;
+          case 12:
+            ui.setCurrentView("chat");
+            ui.setDockSection("work");
+            ui.setDockCustomizeOpen(true);
+            return;
+        }
+      }
       if (mod && e.key.toLowerCase() === "f") {
         e.preventDefault();
         setSearchOpen(true);