feat: close UI visibility gaps — toast, circuit breaker, process logs, adapter selector (#26)

* feat: close UI visibility gaps — toast system, circuit breaker, process logs, adapter selector

Implement 14-step UI gap plan exposing backend capabilities to the frontend:

Backend:
- Circuit breaker snapshot via SlidingWindowBreaker.getSnapshot() with relative timing
- Process output forwarding with secret redaction (PARTICIPANT_ONLY)
- Watchdog timer events for reconnect grace period
- Resume failure broadcasting to consumers
- Session auto-naming from first user message (with secret redaction)
- Adapter selector inbound message type

Frontend:
- Toast notification system (auto-dismiss, FIFO eviction, max 5)
- Circuit breaker banner with live countdown (open/half_open states)
- Watchdog countdown in ConnectionBanner
- Process log drawer with ANSI stripping and ring buffer (200 lines)
- Observer mode banner and action gating
- Permission mode picker with YOLO confirmation dialog
- Adapter selector dropdown in StatusBar
- Model picker with abbreviated names in StatusBar
- Tool result polish: line numbers, copy button, grep highlighting
- Web Audio API completion sound + browser notifications
- Connection health section in TaskPanel
- Session state badges in Sidebar
- Encryption status icon stub in TopBar

Code quality (from dual review):
- Fix circuit breaker casing (backend sends lowercase)
- Memoize breakerEndMs to prevent re-render loops
- Fix observer role check (=== "observer" not !== "participant")
- Add Notification typeof guard for SSR safety
- Strip ANSI from process logs before storing
- Clean processLogBuffers on session close (memory leak fix)
- Clean processLogs in store.removeSession()
- Reset confirmingBypass dialog on session switch
- Fix CopyButton setTimeout cleanup on unmount
- Extract shared useDropdown hook (5 components)

Tests: 419 frontend + 1543 backend passing, TypeScript clean

* fix: broadcastToParticipants excludes owner/operator roles

The role filter used `!== "participant"` which incorrectly skipped
owner and operator roles. Changed to `=== "observer"` to only
exclude read-only observers, matching the PARTICIPANT_ONLY_TYPES
check pattern already used elsewhere.

Author: teng-lin

docs/reviews/2026-02-16-ui-gap-analysis.md

@@ -170,6 +170,19 @@ export interface ConsumerSessionState {
   last_duration_ms?: number;
   last_duration_api_ms?: number;
   team?: ConsumerTeamState | null;
+  circuitBreaker?: {
+    state: string;
+    failureCount: number;
+    recoveryTimeRemainingMs: number;
+  } | null;
+  encryption?: {
+    isActive: boolean;
+    isPaired: boolean;
+  } | null;
+  watchdog?: {
+    gracePeriodMs: number;
+    startedAt: number;
+  } | null;
 }
 
 // ── Stream Events ──────────────────────────────────────────────────────────
@@ -234,6 +247,12 @@ export type ConsumerMessage =
       models: InitializeModel[];
       account: InitializeAccount | null;
       skills: string[];
+    }
+  | { type: "resume_failed"; sessionId: string }
+  | {
+      type: "process_output";
+      stream: "stdout" | "stderr";
+      data: string;
     };
 
 // ── Inbound Messages (consumer → bridge) ────────────────────────────────────
@@ -256,4 +275,5 @@ export type InboundMessage =
   | { type: "set_model"; model: string }
   | { type: "set_permission_mode"; mode: string }
   | { type: "presence_query" }
-  | { type: "slash_command"; command: string; request_id?: string };
+  | { type: "slash_command"; command: string; request_id?: string }
+  | { type: "set_adapter"; adapter: string };

package-lock.json

@@ -510,4 +510,13 @@ export class SdkUrlLauncher extends ProcessSupervisor<LauncherEventMap> {
       this.persistState();
     }
   }
+
+  /** Set the display name for a session. */
+  setSessionName(sessionId: string, name: string): void {
+    const info = this.sessions.get(sessionId);
+    if (info) {
+      info.name = name;
+      this.persistState();
+    }
+  }
 }

shared/consumer-types.ts

@@ -109,4 +109,19 @@ export class SlidingWindowBreaker implements CircuitBreaker {
     const cutoff = Date.now() - this.windowMs;
     return this.failureTimestamps.filter((t) => t > cutoff).length;
   }
+
+  /**
+   * Get a snapshot of the breaker state for consumer reporting.
+   * Uses relative recoveryTimeRemainingMs to avoid leaking server clock.
+   */
+  getSnapshot(): { state: string; failureCount: number; recoveryTimeRemainingMs: number } {
+    const state = this.getState();
+    const failureCount = this.getFailureCount();
+    let recoveryTimeRemainingMs = 0;
+    if (state === "open" && this.lastFailureTime > 0) {
+      const elapsed = Date.now() - this.lastFailureTime;
+      recoveryTimeRemainingMs = Math.max(0, this.recoveryTimeMs - elapsed);
+    }
+    return { state, failureCount, recoveryTimeRemainingMs };
+  }
 }

src/adapters/sdk-url/sdk-url-launcher.ts

@@ -5,10 +5,22 @@ import type { Logger } from "../interfaces/logger.js";
 import type { ProcessHandle, ProcessManager } from "../interfaces/process-manager.js";
 import { TypedEventEmitter } from "./typed-emitter.js";
 
+/** Circuit breaker snapshot included in process:exited when breaker is not CLOSED. */
+export interface BreakerSnapshot {
+  state: string;
+  failureCount: number;
+  recoveryTimeRemainingMs: number;
+}
+
 /** Minimum event map that any ProcessSupervisor must support. */
 export interface SupervisorEventMap {
   "process:spawned": { sessionId: string; pid: number };
-  "process:exited": { sessionId: string; exitCode: number | null; uptimeMs: number };
+  "process:exited": {
+    sessionId: string;
+    exitCode: number | null;
+    uptimeMs: number;
+    circuitBreaker?: BreakerSnapshot;
+  };
   "process:stdout": { sessionId: string; data: string };
   "process:stderr": { sessionId: string; data: string };
   error: { source: string; error: Error; sessionId?: string };
@@ -248,7 +260,14 @@ export abstract class ProcessSupervisor<
       this.processes.delete(sessionId);
       this.onProcessExited(sessionId, exitCode, uptimeMs);
 
-      this.emit("process:exited", { sessionId, exitCode, uptimeMs });
+      // Include circuit breaker snapshot when breaker is not CLOSED
+      const breakerState = this.restartCircuitBreaker.getState();
+      const circuitBreaker =
+        breakerState !== "closed" && this.restartCircuitBreaker instanceof SlidingWindowBreaker
+          ? this.restartCircuitBreaker.getSnapshot()
+          : undefined;
+
+      this.emit("process:exited", { sessionId, exitCode, uptimeMs, circuitBreaker });
     });
   }
 }

src/adapters/sliding-window-breaker.ts

@@ -120,6 +120,7 @@ const PARTICIPANT_ONLY_TYPES = new Set([
   "set_model",
   "set_permission_mode",
   "slash_command",
+  "set_adapter",
 ]);
 
 // ─── SessionBridge ───────────────────────────────────────────────────────────
@@ -1351,6 +1352,50 @@ export class SessionBridge extends TypedEventEmitter<BridgeEventMap> {
     });
   }
 
+  /** Broadcast resume_failed to all consumers for a session. */
+  broadcastResumeFailedToConsumers(sessionId: string): void {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+    this.broadcastToConsumers(session, { type: "resume_failed", sessionId });
+  }
+
+  /** Broadcast process output to participants only (observers must not see process logs). */
+  broadcastProcessOutput(sessionId: string, stream: "stdout" | "stderr", data: string): void {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+    this.broadcastToParticipants(session, {
+      type: "process_output",
+      stream,
+      data,
+    });
+  }
+
+  /** Broadcast watchdog state update via session_update. */
+  broadcastWatchdogState(
+    sessionId: string,
+    watchdog: { gracePeriodMs: number; startedAt: number } | null,
+  ): void {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+    this.broadcastToConsumers(session, {
+      type: "session_update",
+      session: { watchdog } as Partial<SessionState>,
+    });
+  }
+
+  /** Broadcast circuit breaker state update via session_update. */
+  broadcastCircuitBreakerState(
+    sessionId: string,
+    circuitBreaker: { state: string; failureCount: number; recoveryTimeRemainingMs: number },
+  ): void {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+    this.broadcastToConsumers(session, {
+      type: "session_update",
+      session: { circuitBreaker } as Partial<SessionState>,
+    });
+  }
+
   private static readonly MAX_CONSUMER_MESSAGE_SIZE = 262_144; // 256 KB
   private static readonly BACKPRESSURE_THRESHOLD = 1_048_576; // 1 MB
 
@@ -1386,7 +1431,7 @@ export class SessionBridge extends TypedEventEmitter<BridgeEventMap> {
     const json = JSON.stringify(msg);
     const failed: WebSocketLike[] = [];
     for (const [ws, identity] of session.consumerSockets.entries()) {
-      if (identity.role !== "participant") continue;
+      if (identity.role === "observer") continue;
       try {
         ws.send(json);
       } catch (err) {

src/core/process-supervisor.ts

@@ -16,6 +16,7 @@ import type {
 import type { ProviderConfig, ResolvedConfig } from "../types/config.js";
 import { resolveConfig } from "../types/config.js";
 import type { SessionManagerEventMap } from "../types/events.js";
+import { redactSecrets } from "../utils/redact-secrets.js";
 import { SessionBridge } from "./session-bridge.js";
 import { TypedEventEmitter } from "./typed-emitter.js";
 
@@ -162,6 +163,10 @@ export class SessionManager extends TypedEventEmitter<SessionManagerEventMap> {
     this.started = false;
   }
 
+  /** Ring buffer for process output per session. */
+  private processLogBuffers = new Map<string, string[]>();
+  private static readonly MAX_LOG_LINES = 500;
+
   private wireEvents(): void {
     // When the backend reports its session_id, store it for --resume on relaunch
     this.bridge.on("backend:session_id", ({ sessionId, backendSessionId }) => {
@@ -173,6 +178,59 @@ export class SessionManager extends TypedEventEmitter<SessionManagerEventMap> {
       this.launcher.markConnected(sessionId);
     });
 
+    // ── Resume failure → broadcast to consumers (Step 3) ──
+    this.launcher.on("process:resume_failed", ({ sessionId }) => {
+      this.bridge.broadcastResumeFailedToConsumers(sessionId);
+    });
+
+    // ── Process output forwarding with redaction (Step 11) ──
+    for (const stream of ["process:stdout", "process:stderr"] as const) {
+      this.launcher.on(stream, ({ sessionId, data }) => {
+        const redacted = redactSecrets(data);
+        // Ring buffer
+        const buffer = this.processLogBuffers.get(sessionId) ?? [];
+        const lines = redacted.split("\n").filter((l) => l.trim());
+        buffer.push(...lines);
+        if (buffer.length > SessionManager.MAX_LOG_LINES) {
+          buffer.splice(0, buffer.length - SessionManager.MAX_LOG_LINES);
+        }
+        this.processLogBuffers.set(sessionId, buffer);
+        // Forward to consumers (participant-only is enforced in bridge)
+        this.bridge.broadcastProcessOutput(
+          sessionId,
+          stream === "process:stdout" ? "stdout" : "stderr",
+          redacted,
+        );
+      });
+    }
+
+    // ── Circuit breaker state from process:exited (Step 9) ──
+    this.launcher.on("process:exited", ({ sessionId, circuitBreaker }) => {
+      if (circuitBreaker) {
+        this.bridge.broadcastCircuitBreakerState(sessionId, circuitBreaker);
+      }
+    });
+
+    // ── Session auto-naming on first turn (Step 4) ──
+    this.bridge.on("session:first_turn_completed", ({ sessionId, firstUserMessage }) => {
+      const session = this.launcher.getSession(sessionId);
+      if (session?.name) return; // Already named
+
+      // Derive name: first line, truncated, redacted
+      let name = firstUserMessage.split("\n")[0].trim();
+      name = redactSecrets(name);
+      if (name.length > 50) name = `${name.slice(0, 47)}...`;
+      if (!name) return;
+
+      this.bridge.broadcastNameUpdate(sessionId, name);
+      this.launcher.setSessionName(sessionId, name);
+    });
+
+    // Clean up process log buffer when a session is closed
+    this.bridge.on("session:closed", ({ sessionId }) => {
+      this.processLogBuffers.delete(sessionId);
+    });
+
     // Auto-relaunch when a consumer connects but backend is dead (with dedup — A5)
     this.bridge.on("backend:relaunch_needed", async ({ sessionId }) => {
       if (this.relaunchingSet.has(sessionId)) return;
@@ -290,19 +348,27 @@ export class SessionManager extends TypedEventEmitter<SessionManagerEventMap> {
     const starting = this.launcher.getStartingSessions();
     if (starting.length === 0) return;
 
+    const gracePeriodMs = this.config.reconnectGracePeriodMs;
     this.logger.info(
-      `Waiting ${this.config.reconnectGracePeriodMs / 1000}s for ${starting.length} CLI process(es) to reconnect...`,
+      `Waiting ${gracePeriodMs / 1000}s for ${starting.length} CLI process(es) to reconnect...`,
     );
 
+    // Broadcast watchdog:active to all sessions
+    for (const info of starting) {
+      this.bridge.broadcastWatchdogState(info.sessionId, { gracePeriodMs, startedAt: Date.now() });
+    }
+
     this.reconnectTimer = setTimeout(async () => {
       this.reconnectTimer = null;
       const stale = this.launcher.getStartingSessions();
       for (const info of stale) {
+        // Clear watchdog state
+        this.bridge.broadcastWatchdogState(info.sessionId, null);
         if (info.archived) continue;
         this.logger.info(`CLI for session ${info.sessionId} did not reconnect, relaunching...`);
         await this.launcher.relaunch(info.sessionId);
       }
-    }, this.config.reconnectGracePeriodMs);
+    }, gracePeriodMs);
   }
 
   /** Periodically reap idle sessions (no CLI or consumer connections). */

src/core/session-bridge.ts

@@ -7,6 +7,11 @@ export type {
 
 import type { ConsumerIdentity } from "../interfaces/auth.js";
 
+/**
+ * Create an anonymous identity with participant role.
+ * Note: Observer mode is inert without a configured Authenticator —
+ * anonymous identities always receive "participant" role.
+ */
 export function createAnonymousIdentity(index: number): ConsumerIdentity {
   return { userId: `anonymous-${index}`, displayName: `User ${index}`, role: "participant" };
 }

src/core/session-manager.ts

@@ -180,4 +180,10 @@ export type ConsumerMessage =
       models: InitializeModel[];
       account: InitializeAccount | null;
       skills: string[];
+    }
+  | { type: "resume_failed"; sessionId: string }
+  | {
+      type: "process_output";
+      stream: "stdout" | "stderr";
+      data: string;
     };