style: 完成所有文件的lint

2026-06-18 22:35:51 +00:00 · 2026-05-01 21:39:30 +08:00
parent d136872cc9
commit 6182015005
1333 changed files with 68255 additions and 77882 deletions
--- a/packages/remote-control-server/web/src/components/ACPDirectView.tsx
+++ b/packages/remote-control-server/web/src/components/ACPDirectView.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from "react";
-import { ACPClient, DisconnectRequestedError } from "../acp/client";
-import type { ConnectionState } from "../acp/types";
-import { ACPMain } from "../../components/ACPMain";
+import { useState, useEffect, useRef } from 'react';
+import { ACPClient, DisconnectRequestedError } from '../acp/client';
+import type { ConnectionState } from '../acp/types';
+import { ACPMain } from '../../components/ACPMain';

 interface ACPDirectViewProps {
  url: string;
@@ -11,7 +11,7 @@ interface ACPDirectViewProps {

 export function ACPDirectView({ url, token, onBack }: ACPDirectViewProps) {
  const [client, setClient] = useState<ACPClient | null>(null);
-  const [connectionState, setConnectionState] = useState<ConnectionState>("disconnected");
+  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
  const [error, setError] = useState<string | null>(null);
  const clientRef = useRef<ACPClient | null>(null);

@@ -26,35 +26,32 @@ export function ACPDirectView({ url, token, onBack }: ACPDirectViewProps) {
    clientRef.current = acpClient;
    setClient(acpClient);

-    acpClient.connect().catch((e) => {
+    acpClient.connect().catch(e => {
      if (e instanceof DisconnectRequestedError) return;
      setError((e as Error).message);
-      setConnectionState("error");
+      setConnectionState('error');
    });

    return () => {
      acpClient.disconnect();
      clientRef.current = null;
      setClient(null);
-      setConnectionState("disconnected");
+      setConnectionState('disconnected');
    };
  }, [url, token]);

  return (
    <div className="flex flex-1 flex-col overflow-hidden">
-      {error && connectionState === "error" && (
+      {error && connectionState === 'error' && (
        <div className="px-4 py-2 bg-status-error/10 text-status-error text-sm border-b">
          {error}
-          <button
-            onClick={onBack}
-            className="ml-3 underline hover:no-underline"
-          >
+          <button onClick={onBack} className="ml-3 underline hover:no-underline">
            Back to Dashboard
          </button>
        </div>
      )}

-      {connectionState === "connecting" && (
+      {connectionState === 'connecting' && (
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin h-8 w-8 border-2 border-brand border-t-transparent rounded-full mx-auto mb-3" />
@@ -63,7 +60,7 @@ export function ACPDirectView({ url, token, onBack }: ACPDirectViewProps) {
        </div>
      )}

-      {connectionState === "error" && !client && (
+      {connectionState === 'error' && !client && (
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <p className="font-medium mb-1">Connection Failed</p>
@@ -78,9 +75,7 @@ export function ACPDirectView({ url, token, onBack }: ACPDirectViewProps) {
        </div>
      )}

-      {client && connectionState === "connected" && (
-        <ACPMain client={client} />
-      )}
+      {client && connectionState === 'connected' && <ACPMain client={client} />}
    </div>
  );
 }
--- a/packages/remote-control-server/web/src/components/ControlBar.tsx
+++ b/packages/remote-control-server/web/src/components/ControlBar.tsx
@@ -1,6 +1,6 @@
-import { useState, useRef, useEffect } from "react";
-import { cn, isClosedSessionStatus } from "../lib/utils";
-import { Square, SendHorizonal } from "lucide-react";
+import { useState, useRef, useEffect } from 'react';
+import { cn, isClosedSessionStatus } from '../lib/utils';
+import { Square, SendHorizonal } from 'lucide-react';

 interface ControlBarProps {
  sessionId: string;
@@ -10,22 +10,16 @@ interface ControlBarProps {
  onInterrupt: () => Promise<void>;
 }

-export function ControlBar({
-  sessionId,
-  sessionStatus,
-  activityMode,
-  onSend,
-  onInterrupt,
-}: ControlBarProps) {
-  const [text, setText] = useState("");
+export function ControlBar({ sessionId, sessionStatus, activityMode, onSend, onInterrupt }: ControlBarProps) {
+  const [text, setText] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const closed = isClosedSessionStatus(sessionStatus);
-  const working = activityMode === "working";
+  const working = activityMode === 'working';

  const handleSend = async () => {
    const trimmed = text.trim();
    if (!trimmed || closed) return;
-    setText("");
+    setText('');
    try {
      await onSend(trimmed);
    } catch {
@@ -34,7 +28,7 @@ export function ControlBar({
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent?.isComposing) {
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent?.isComposing) {
      e.preventDefault();
      handleSend();
    }
@@ -51,9 +45,9 @@ export function ControlBar({
          ref={inputRef}
          type="text"
          value={text}
-          onChange={(e) => setText(e.target.value)}
+          onChange={e => setText(e.target.value)}
          onKeyDown={handleKeyDown}
-          placeholder={closed ? "Session is closed" : "Type a message..."}
+          placeholder={closed ? 'Session is closed' : 'Type a message...'}
          disabled={closed}
          className="flex-1 rounded-lg border border-border bg-surface-2 px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand/20 disabled:opacity-50 transition-colors"
        />
@@ -61,14 +55,14 @@ export function ControlBar({
          onClick={working ? onInterrupt : handleSend}
          disabled={closed}
          className={cn(
-            "flex h-10 w-10 items-center justify-center rounded-lg transition-colors",
+            'flex h-10 w-10 items-center justify-center rounded-lg transition-colors',
            working
-              ? "bg-status-error/20 text-status-error hover:bg-status-error/30"
-              : "bg-brand text-white hover:bg-brand-light",
-            closed && "opacity-50 cursor-not-allowed",
+              ? 'bg-status-error/20 text-status-error hover:bg-status-error/30'
+              : 'bg-brand text-white hover:bg-brand-light',
+            closed && 'opacity-50 cursor-not-allowed',
          )}
-          aria-label={working ? "Stop" : "Send"}
-          title={closed ? "Session is closed" : working ? "Stop" : "Send"}
+          aria-label={working ? 'Stop' : 'Send'}
+          title={closed ? 'Session is closed' : working ? 'Stop' : 'Send'}
        >
          {working ? (
            <Square className="h-4.5 w-4.5 fill-current" />
--- a/packages/remote-control-server/web/src/components/EnvironmentList.tsx
+++ b/packages/remote-control-server/web/src/components/EnvironmentList.tsx
@@ -1,6 +1,6 @@
-import type { Environment } from "../types";
-import { StatusBadge } from "./Navbar";
-import { esc, formatTime } from "../lib/utils";
+import type { Environment } from '../types';
+import { StatusBadge } from './Navbar';
+import { esc, formatTime } from '../lib/utils';

 interface EnvironmentListProps {
  environments: Environment[];
@@ -18,10 +18,10 @@ export function EnvironmentList({ environments, onSelectEnvironment }: Environme

  return (
    <div className="space-y-2">
-      {environments.map((env) => {
-        const isAcp = env.worker_type === "acp";
-        const typeLabel = isAcp ? "ACP Agent" : "Claude Code";
-        const typeColor = isAcp ? "bg-brand/15 text-brand" : "bg-status-running/15 text-status-running";
+      {environments.map(env => {
+        const isAcp = env.worker_type === 'acp';
+        const typeLabel = isAcp ? 'ACP Agent' : 'Claude Code';
+        const typeColor = isAcp ? 'bg-brand/15 text-brand' : 'bg-status-running/15 text-status-running';

        return (
          <button
@@ -29,26 +29,20 @@ export function EnvironmentList({ environments, onSelectEnvironment }: Environme
            type="button"
            onClick={() => onSelectEnvironment?.(env)}
            disabled={isAcp}
-            className={`flex w-full items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 text-left transition-colors ${isAcp ? "cursor-default opacity-80" : "hover:border-border-light cursor-pointer"}`}
+            className={`flex w-full items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 text-left transition-colors ${isAcp ? 'cursor-default opacity-80' : 'hover:border-border-light cursor-pointer'}`}
          >
            <div className="flex items-center gap-3">
              <div>
                <div className="flex items-center gap-2">
-                  <span className="font-medium text-text-primary">
-                    {env.machine_name || env.id}
-                  </span>
-                  <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${typeColor}`}>
-                    {typeLabel}
-                  </span>
+                  <span className="font-medium text-text-primary">{env.machine_name || env.id}</span>
+                  <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${typeColor}`}>{typeLabel}</span>
                </div>
-                <div className="text-sm text-text-muted">{env.directory || ""}</div>
+                <div className="text-sm text-text-muted">{env.directory || ''}</div>
              </div>
            </div>
            <div className="text-right">
              <StatusBadge status={env.status} />
-              <div className="mt-1 text-xs text-text-muted">
-                {env.branch || ""}
-              </div>
+              <div className="mt-1 text-xs text-text-muted">{env.branch || ''}</div>
            </div>
          </button>
        );
--- a/packages/remote-control-server/web/src/components/EventStream.tsx
+++ b/packages/remote-control-server/web/src/components/EventStream.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from "react";
-import type { SessionEvent, EventPayload } from "../types";
-import { esc, truncate, cn, extractEventText, isConversationClearedStatus } from "../lib/utils";
+import { useState, useEffect, useRef } from 'react';
+import type { SessionEvent, EventPayload } from '../types';
+import { esc, truncate, cn, extractEventText, isConversationClearedStatus } from '../lib/utils';

 // ============================================================
 // Tool Trace State
@@ -8,9 +8,9 @@ import { esc, truncate, cn, extractEventText, isConversationClearedStatus } from

 interface TraceHost {
  id: string;
-  kind: "assistant" | "orphan";
+  kind: 'assistant' | 'orphan';
  assistantContent: string;
-  entryKinds: ("use" | "result")[];
+  entryKinds: ('use' | 'result')[];
 }

 interface ToolTraceState {
@@ -26,7 +26,7 @@ function createTraceState(): ToolTraceState {
 function addAssistantHost(state: ToolTraceState, content: string): { state: ToolTraceState; host: TraceHost } {
  const host: TraceHost = {
    id: `trace-${state.nextHostId}`,
-    kind: "assistant",
+    kind: 'assistant',
    assistantContent: content,
    entryKinds: [],
  };
@@ -45,26 +45,29 @@ function clearActiveHost(state: ToolTraceState): ToolTraceState {
  return { ...state, activeHostId: null };
 }

-function addTraceEntry(state: ToolTraceState, entryKind: "use" | "result"): {
+function addTraceEntry(
+  state: ToolTraceState,
+  entryKind: 'use' | 'result',
+): {
  state: ToolTraceState;
  host: TraceHost;
  createdHost: TraceHost | null;
 } {
-  let host = state.hosts.find((h) => h.id === state.activeHostId);
+  let host = state.hosts.find(h => h.id === state.activeHostId);
  let createdHost: TraceHost | null = null;

  if (!host) {
    createdHost = {
      id: `trace-${state.nextHostId}`,
-      kind: "orphan",
-      assistantContent: "",
+      kind: 'orphan',
+      assistantContent: '',
      entryKinds: [],
    };
    host = createdHost;
  }

  const updatedHost = { ...host, entryKinds: [...host.entryKinds, entryKind] };
-  const newHosts = state.hosts.map((h) => (h.id === updatedHost.id ? updatedHost : h));
+  const newHosts = state.hosts.map(h => (h.id === updatedHost.id ? updatedHost : h));
  if (createdHost) newHosts.push(createdHost);

  return {
@@ -83,12 +86,12 @@ function addTraceEntry(state: ToolTraceState, entryKind: "use" | "result"): {
 // ============================================================

 interface UserMessage {
-  kind: "user";
+  kind: 'user';
  content: string;
 }

 interface AssistantMessage {
-  kind: "assistant";
+  kind: 'assistant';
  content: string;
  traceEntries: TraceEntry[];
  traceExpanded: boolean;
@@ -96,7 +99,7 @@ interface AssistantMessage {
 }

 interface TraceEntry {
-  entryKind: "use" | "result";
+  entryKind: 'use' | 'result';
  toolName?: string;
  toolInput?: unknown;
  content?: string;
@@ -105,12 +108,12 @@ interface TraceEntry {
 }

 interface SystemMessage {
-  kind: "system";
+  kind: 'system';
  content: string;
 }

 interface PermissionMessage {
-  kind: "permission";
+  kind: 'permission';
  requestId: string;
  toolName: string;
  toolInput: unknown;
@@ -118,21 +121,21 @@ interface PermissionMessage {
 }

 interface AskUserMessage {
-  kind: "ask_user";
+  kind: 'ask_user';
  requestId: string;
-  questions: import("../types").Question[];
+  questions: import('../types').Question[];
  description: string;
 }

 interface PlanMessage {
-  kind: "plan";
+  kind: 'plan';
  requestId: string;
  planContent: string;
  description: string;
 }

 interface LoadingMessage {
-  kind: "loading";
+  kind: 'loading';
  verb: string;
  startTime: number;
 }
@@ -150,15 +153,40 @@ type DisplayMessage =
 // Spinner
 // ============================================================

-const SPINNER_FRAMES = ["·", "✢", "✱", "✶", "✻", "✽"];
+const SPINNER_FRAMES = ['·', '✢', '✱', '✶', '✻', '✽'];
 const SPINNER_CYCLE = [...SPINNER_FRAMES, ...SPINNER_FRAMES.slice().reverse()];

 const SPINNER_VERBS = [
-  "Accomplishing", "Baking", "Calculating", "Clauding", "Cogitating", "Computing",
-  "Considering", "Contemplating", "Cooking", "Crafting", "Creating", "Crunching",
-  "Deliberating", "Doing", "Effecting", "Generating", "Hatching", "Ideating",
-  "Imagining", "Inferring", "Manifesting", "Mulling", "Pondering", "Processing",
-  "Ruminating", "Simmering", "Synthesizing", "Thinking", "Tinkering", "Working",
+  'Accomplishing',
+  'Baking',
+  'Calculating',
+  'Clauding',
+  'Cogitating',
+  'Computing',
+  'Considering',
+  'Contemplating',
+  'Cooking',
+  'Crafting',
+  'Creating',
+  'Crunching',
+  'Deliberating',
+  'Doing',
+  'Effecting',
+  'Generating',
+  'Hatching',
+  'Ideating',
+  'Imagining',
+  'Inferring',
+  'Manifesting',
+  'Mulling',
+  'Pondering',
+  'Processing',
+  'Ruminating',
+  'Simmering',
+  'Synthesizing',
+  'Thinking',
+  'Tinkering',
+  'Working',
 ];

 // ============================================================
@@ -169,7 +197,11 @@ interface EventStreamProps {
  messages: DisplayMessage[];
  onApprovePermission: (requestId: string) => void;
  onRejectPermission: (requestId: string) => void;
-  onSubmitAnswers: (requestId: string, answers: Record<string, unknown>, questions: import("../types").Question[]) => void;
+  onSubmitAnswers: (
+    requestId: string,
+    answers: Record<string, unknown>,
+    questions: import('../types').Question[],
+  ) => void;
  onSubmitPlanResponse: (requestId: string, value: string, feedback?: string) => void;
 }

@@ -192,28 +224,42 @@ export function EventStream({
    <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4">
      <div className="mx-auto max-w-5xl space-y-3">
        {messages.map((msg, i) => (
-          <MessageRow key={i} message={msg} {...{ onApprovePermission, onRejectPermission, onSubmitAnswers, onSubmitPlanResponse }} />
+          <MessageRow
+            key={i}
+            message={msg}
+            {...{ onApprovePermission, onRejectPermission, onSubmitAnswers, onSubmitPlanResponse }}
+          />
        ))}
      </div>
    </div>
  );
 }

-function MessageRow({ message, onApprovePermission, onRejectPermission, onSubmitAnswers, onSubmitPlanResponse }: {
+function MessageRow({
+  message,
+  onApprovePermission,
+  onRejectPermission,
+  onSubmitAnswers,
+  onSubmitPlanResponse,
+}: {
  message: DisplayMessage;
  onApprovePermission: (requestId: string) => void;
  onRejectPermission: (requestId: string) => void;
-  onSubmitAnswers: (requestId: string, answers: Record<string, unknown>, questions: import("../types").Question[]) => void;
+  onSubmitAnswers: (
+    requestId: string,
+    answers: Record<string, unknown>,
+    questions: import('../types').Question[],
+  ) => void;
  onSubmitPlanResponse: (requestId: string, value: string, feedback?: string) => void;
 }) {
  switch (message.kind) {
-    case "user":
+    case 'user':
      return <UserBubble content={message.content} />;
-    case "assistant":
+    case 'assistant':
      return <AssistantBubble content={message.content} traceEntries={message.traceEntries} />;
-    case "system":
+    case 'system':
      return <SystemBubble content={message.content} />;
-    case "permission":
+    case 'permission':
      return (
        <PermissionPrompt
          {...message}
@@ -221,22 +267,22 @@ function MessageRow({ message, onApprovePermission, onRejectPermission, onSubmit
          onReject={() => onRejectPermission(message.requestId)}
        />
      );
-    case "ask_user":
+    case 'ask_user':
      return (
        <AskUserPanel
          {...message}
-          onSubmit={(answers) => onSubmitAnswers(message.requestId, answers, message.questions)}
+          onSubmit={answers => onSubmitAnswers(message.requestId, answers, message.questions)}
          onSkip={() => onRejectPermission(message.requestId)}
        />
      );
-    case "plan":
+    case 'plan':
      return (
        <PlanPanel
          {...message}
          onSubmit={(value, feedback) => onSubmitPlanResponse(message.requestId, value, feedback)}
        />
      );
-    case "loading":
+    case 'loading':
      return <LoadingIndicator verb={message.verb} />;
    default:
      return null;
@@ -266,7 +312,7 @@ function formatAssistantContent(content: string): string {
  // Inline code
  html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-tool-card px-1.5 py-0.5 font-mono text-xs">$1</code>');
  // Bold
-  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
  return html;
 }

@@ -279,6 +325,7 @@ function AssistantBubble({ content, traceEntries }: { content: string; traceEntr
        {content && (
          <div
            className="rounded-2xl rounded-bl-md bg-surface-2 px-4 py-2.5 text-sm text-text-primary"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: content is sanitized by formatAssistantContent
            dangerouslySetInnerHTML={{ __html: formatAssistantContent(content) }}
          />
        )}
@@ -288,8 +335,10 @@ function AssistantBubble({ content, traceEntries }: { content: string; traceEntr
              onClick={() => setExpanded(!expanded)}
              className="flex items-center gap-1.5 text-xs text-text-muted hover:text-text-secondary transition-colors"
            >
-              <span className={cn("transition-transform", expanded && "rotate-90")}>›</span>
-              <span>{traceEntries.length} tool {traceEntries.length === 1 ? "call" : "calls"}</span>
+              <span className={cn('transition-transform', expanded && 'rotate-90')}>›</span>
+              <span>
+                {traceEntries.length} tool {traceEntries.length === 1 ? 'call' : 'calls'}
+              </span>
            </button>
            {expanded && (
              <div className="mt-1 space-y-1 pl-2">
@@ -308,8 +357,8 @@ function AssistantBubble({ content, traceEntries }: { content: string; traceEntr
 function ToolCard({ entry }: { entry: TraceEntry }) {
  const [expanded, setExpanded] = useState(false);

-  if (entry.entryKind === "use") {
-    const inputStr = typeof entry.toolInput === "string" ? entry.toolInput : JSON.stringify(entry.toolInput, null, 2);
+  if (entry.entryKind === 'use') {
+    const inputStr = typeof entry.toolInput === 'string' ? entry.toolInput : JSON.stringify(entry.toolInput, null, 2);
    return (
      <div
        className="cursor-pointer rounded-lg border border-border bg-tool-card"
@@ -317,7 +366,7 @@ function ToolCard({ entry }: { entry: TraceEntry }) {
      >
        <div className="flex items-center gap-2 px-3 py-2 text-xs">
          <span className="text-brand">▶</span>
-          <span className="font-medium text-text-primary">{entry.toolName || "tool"}</span>
+          <span className="font-medium text-text-primary">{entry.toolName || 'tool'}</span>
        </div>
        {expanded && (
          <pre className="border-t border-border px-3 py-2 text-xs text-text-secondary overflow-x-auto">
@@ -328,22 +377,18 @@ function ToolCard({ entry }: { entry: TraceEntry }) {
    );
  }

-  const contentStr = typeof entry.output === "string" ? entry.output : JSON.stringify(entry.output, null, 2);
+  const contentStr = typeof entry.output === 'string' ? entry.output : JSON.stringify(entry.output, null, 2);
  return (
    <div
      className={cn(
-        "cursor-pointer rounded-lg border bg-tool-card",
-        entry.isError ? "border-status-error/30" : "border-border",
+        'cursor-pointer rounded-lg border bg-tool-card',
+        entry.isError ? 'border-status-error/30' : 'border-border',
      )}
      onClick={() => setExpanded(!expanded)}
    >
      <div className="flex items-center gap-2 px-3 py-2 text-xs">
-        <span className={entry.isError ? "text-status-error" : "text-status-active"}>
-          {entry.isError ? "✕" : "✓"}
-        </span>
-        <span className="font-medium text-text-primary">
-          {entry.isError ? "Error" : "Result"}
-        </span>
+        <span className={entry.isError ? 'text-status-error' : 'text-status-active'}>{entry.isError ? '✕' : '✓'}</span>
+        <span className="font-medium text-text-primary">{entry.isError ? 'Error' : 'Result'}</span>
      </div>
      {expanded && (
        <pre className="border-t border-border px-3 py-2 text-xs text-text-secondary overflow-x-auto">
@@ -357,9 +402,7 @@ function ToolCard({ entry }: { entry: TraceEntry }) {
 function SystemBubble({ content }: { content: string }) {
  return (
    <div className="flex justify-center">
-      <div className="rounded-full bg-surface-2 px-4 py-1.5 text-xs text-text-muted">
-        {esc(content)}
-      </div>
+      <div className="rounded-full bg-surface-2 px-4 py-1.5 text-xs text-text-muted">{esc(content)}</div>
    </div>
  );
 }
@@ -379,14 +422,14 @@ function PermissionPrompt({
  onApprove: () => void;
  onReject: () => void;
 }) {
-  const inputStr = typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput, null, 2);
+  const inputStr = typeof toolInput === 'string' ? toolInput : JSON.stringify(toolInput, null, 2);

  return (
    <div className="rounded-xl border border-status-warning/30 bg-surface-1 p-4">
      <div className="mb-2 text-sm font-semibold text-status-warning">Permission Request</div>
      {description && <div className="mb-2 text-sm text-text-secondary">{esc(description)}</div>}
      <div className="mb-2 font-mono text-xs font-bold text-text-primary">{esc(toolName)}</div>
-      {toolName !== "AskUserQuestion" && (
+      {toolName !== 'AskUserQuestion' && (
        <pre className="mb-3 max-h-40 overflow-auto rounded-lg bg-tool-card p-2 text-xs text-text-secondary">
          {truncate(inputStr, 500)}
        </pre>
@@ -416,7 +459,7 @@ function AskUserPanel({
  onSkip,
 }: {
  requestId: string;
-  questions: import("../types").Question[];
+  questions: import('../types').Question[];
  description: string;
  onSubmit: (answers: Record<string, unknown>) => void;
  onSkip: () => void;
@@ -427,7 +470,7 @@ function AskUserPanel({
  const handleSelect = (qIdx: number, oIdx: number, multiSelect: boolean) => {
    if (multiSelect) {
      const current = (answers[qIdx] as number[]) || [];
-      const next = current.includes(oIdx) ? current.filter((i) => i !== oIdx) : [...current, oIdx];
+      const next = current.includes(oIdx) ? current.filter(i => i !== oIdx) : [...current, oIdx];
      setAnswers({ ...answers, [qIdx]: next });
    } else {
      setAnswers({ ...answers, [qIdx]: oIdx });
@@ -438,7 +481,7 @@ function AskUserPanel({
    const text = otherTexts[qIdx]?.trim();
    if (!text) return;
    setAnswers({ ...answers, [qIdx]: text });
-    setOtherTexts({ ...otherTexts, [qIdx]: "" });
+    setOtherTexts({ ...otherTexts, [qIdx]: '' });
  };

  const handleSubmit = () => {
@@ -446,10 +489,10 @@ function AskUserPanel({
    for (const [qIdx, val] of Object.entries(answers)) {
      const q = questions[parseInt(qIdx, 10)];
      if (!q) continue;
-      if (typeof val === "number") {
+      if (typeof val === 'number') {
        mapped[qIdx] = q.options?.[val]?.label || String(val);
      } else if (Array.isArray(val)) {
-        mapped[qIdx] = val.map((i) => q.options?.[i]?.label || String(i));
+        mapped[qIdx] = val.map(i => q.options?.[i]?.label || String(i));
      } else {
        mapped[qIdx] = val;
      }
@@ -465,22 +508,20 @@ function AskUserPanel({
    return (
      <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
        <div className="mb-3 text-sm font-semibold text-text-primary">
-          {esc(description || q.question || "Question")}
+          {esc(description || q.question || 'Question')}
        </div>
        <div className="space-y-2">
          {(q.options || []).map((opt, j) => {
-            const isSelected = multiSelect
-              ? ((answers[0] as number[]) || []).includes(j)
-              : selectedIdx === j;
+            const isSelected = multiSelect ? ((answers[0] as number[]) || []).includes(j) : selectedIdx === j;
            return (
              <button
                key={j}
                onClick={() => handleSelect(0, j, multiSelect)}
                className={cn(
-                  "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+                  'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
                  isSelected
-                    ? "border-brand bg-brand/10 text-text-primary"
-                    : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+                    ? 'border-brand bg-brand/10 text-text-primary'
+                    : 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
                )}
              >
                <div className="font-medium">{esc(opt.label)}</div>
@@ -491,11 +532,11 @@ function AskUserPanel({
          <div className="flex gap-2">
            <input
              type="text"
-              value={otherTexts[0] || ""}
-              onChange={(e) => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
+              value={otherTexts[0] || ''}
+              onChange={e => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
              placeholder="Other..."
              className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
-              onKeyDown={(e) => e.key === "Enter" && handleOtherSubmit(0)}
+              onKeyDown={e => e.key === 'Enter' && handleOtherSubmit(0)}
            />
            <button
              onClick={() => handleOtherSubmit(0)}
@@ -528,17 +569,15 @@ function AskUserPanel({

  return (
    <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
-      <div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || "Questions")}</div>
+      <div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || 'Questions')}</div>
      <div className="mb-3 flex gap-1 overflow-x-auto">
        {questions.map((q, i) => (
          <button
            key={i}
            onClick={() => setActiveTab(i)}
            className={cn(
-              "rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors",
-              activeTab === i
-                ? "bg-brand/20 text-brand"
-                : "text-text-muted hover:bg-surface-2",
+              'rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors',
+              activeTab === i ? 'bg-brand/20 text-brand' : 'text-text-muted hover:bg-surface-2',
            )}
          >
            {q.header || `Q${i + 1}`}
@@ -557,7 +596,9 @@ function AskUserPanel({
        />
      )}
      <div className="mt-4 flex items-center justify-between">
-        <span className="text-xs text-text-muted">{activeTab + 1} / {questions.length}</span>
+        <span className="text-xs text-text-muted">
+          {activeTab + 1} / {questions.length}
+        </span>
        <div className="flex gap-2">
          <button
            onClick={handleSubmit}
@@ -586,7 +627,7 @@ function QuestionTab({
  onOtherTextChange,
  onOtherSubmit,
 }: {
-  question: import("../types").Question;
+  question: import('../types').Question;
  qIdx: number;
  answers: Record<string, unknown>;
  otherTexts: Record<string, string>;
@@ -601,18 +642,16 @@ function QuestionTab({
      <div className="mb-2 text-sm text-text-secondary">{esc(question.question)}</div>
      <div className="space-y-2">
        {(question.options || []).map((opt, j) => {
-          const isSelected = multiSelect
-            ? ((answers[qIdx] as number[]) || []).includes(j)
-            : answers[qIdx] === j;
+          const isSelected = multiSelect ? ((answers[qIdx] as number[]) || []).includes(j) : answers[qIdx] === j;
          return (
            <button
              key={j}
              onClick={() => onSelect(qIdx, j, multiSelect)}
              className={cn(
-                "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+                'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
                isSelected
-                  ? "border-brand bg-brand/10 text-text-primary"
-                  : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+                  ? 'border-brand bg-brand/10 text-text-primary'
+                  : 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
              )}
            >
              <div className="font-medium">{esc(opt.label)}</div>
@@ -623,11 +662,11 @@ function QuestionTab({
        <div className="flex gap-2">
          <input
            type="text"
-            value={otherTexts[qIdx] || ""}
-            onChange={(e) => onOtherTextChange(qIdx, e.target.value)}
+            value={otherTexts[qIdx] || ''}
+            onChange={e => onOtherTextChange(qIdx, e.target.value)}
            placeholder="Other..."
            className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
-            onKeyDown={(e) => e.key === "Enter" && onOtherSubmit(qIdx)}
+            onKeyDown={e => e.key === 'Enter' && onOtherSubmit(qIdx)}
          />
          <button
            onClick={() => onOtherSubmit(qIdx)}
@@ -652,58 +691,59 @@ function PlanPanel({
  onSubmit: (value: string, feedback?: string) => void;
 }) {
  const [selected, setSelected] = useState<string | null>(null);
-  const [feedback, setFeedback] = useState("");
+  const [feedback, setFeedback] = useState('');
  const isEmpty = !planContent || !planContent.trim();

  const handleSubmit = () => {
    if (!selected) return;
-    onSubmit(selected, selected === "no" ? feedback : undefined);
+    onSubmit(selected, selected === 'no' ? feedback : undefined);
  };

  return (
    <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
      <div className="mb-3 text-sm font-semibold text-text-primary">
-        {isEmpty ? "Exit plan mode?" : "Ready to code?"}
+        {isEmpty ? 'Exit plan mode?' : 'Ready to code?'}
      </div>
      {!isEmpty && (
        <div
          className="mb-4 max-h-64 overflow-auto rounded-lg bg-tool-card p-4 text-sm text-text-secondary prose prose-invert"
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: content is sanitized by formatPlanContent
          dangerouslySetInnerHTML={{ __html: formatPlanContent(planContent) }}
        />
      )}
      <div className="space-y-2">
        {isEmpty ? (
          <>
-            <PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes" />
-            <PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No" />
+            <PlanOption selected={selected === 'yes-default'} onClick={() => setSelected('yes-default')} label="Yes" />
+            <PlanOption selected={selected === 'no'} onClick={() => setSelected('no')} label="No" />
          </>
        ) : (
          <>
            <PlanOption
-              selected={selected === "yes-accept-edits"}
-              onClick={() => setSelected("yes-accept-edits")}
+              selected={selected === 'yes-accept-edits'}
+              onClick={() => setSelected('yes-accept-edits')}
              label="Yes, auto-accept edits"
              desc="Approve plan and auto-accept file edits"
            />
            <PlanOption
-              selected={selected === "yes-default"}
-              onClick={() => setSelected("yes-default")}
+              selected={selected === 'yes-default'}
+              onClick={() => setSelected('yes-default')}
              label="Yes, manually approve edits"
              desc="Approve plan but confirm each edit"
            />
            <PlanOption
-              selected={selected === "no"}
-              onClick={() => setSelected("no")}
+              selected={selected === 'no'}
+              onClick={() => setSelected('no')}
              label="No, keep planning"
              desc="Provide feedback to refine the plan"
            />
          </>
        )}
      </div>
-      {selected === "no" && (
+      {selected === 'no' && (
        <textarea
          value={feedback}
-          onChange={(e) => setFeedback(e.target.value)}
+          onChange={e => setFeedback(e.target.value)}
          placeholder="Tell Claude what to change..."
          className="mt-3 w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
          rows={3}
@@ -737,10 +777,10 @@ function PlanOption({
    <button
      onClick={onClick}
      className={cn(
-        "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+        'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
        selected
-          ? "border-brand bg-brand/10 text-text-primary"
-          : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+          ? 'border-brand bg-brand/10 text-text-primary'
+          : 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
      )}
    >
      <div className="font-medium">{label}</div>
@@ -758,7 +798,7 @@ function formatPlanContent(content: string): string {
  // Inline code
  html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-tool-card px-1.5 py-0.5 font-mono text-xs">$1</code>');
  // Bold
-  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
  return html;
 }

@@ -767,8 +807,8 @@ function LoadingIndicator({ verb }: { verb: string }) {
  const [elapsed, setElapsed] = useState(0);

  useEffect(() => {
-    const spinInterval = setInterval(() => setFrame((f) => (f + 1) % SPINNER_CYCLE.length), 120);
-    const timerInterval = setInterval(() => setElapsed((e) => e + 1), 1000);
+    const spinInterval = setInterval(() => setFrame(f => (f + 1) % SPINNER_CYCLE.length), 120);
+    const timerInterval = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => {
      clearInterval(spinInterval);
      clearInterval(timerInterval);
@@ -788,7 +828,17 @@ function LoadingIndicator({ verb }: { verb: string }) {
 // Event Processing Hook
 // ============================================================

-export { type DisplayMessage, type TraceEntry, type UserMessage, type AssistantMessage, type SystemMessage, type PermissionMessage, type AskUserMessage, type PlanMessage, type LoadingMessage };
+export type {
+  DisplayMessage,
+  TraceEntry,
+  UserMessage,
+  AssistantMessage,
+  SystemMessage,
+  PermissionMessage,
+  AskUserMessage,
+  PlanMessage,
+  LoadingMessage,
+};

 export function useEventProcessor() {
  const [messages, setMessages] = useState<DisplayMessage[]>([]);
@@ -802,19 +852,19 @@ export function useEventProcessor() {
  };

  const removeLoading = () => {
-    setMessages((prev) => prev.filter((m) => m.kind !== "loading"));
+    setMessages(prev => prev.filter(m => m.kind !== 'loading'));
  };

  const showLoading = () => {
    removeLoading();
    const verb = SPINNER_VERBS[Math.floor(Math.random() * SPINNER_VERBS.length)];
-    setMessages((prev) => [...prev, { kind: "loading", verb, startTime: Date.now() }]);
+    setMessages(prev => [...prev, { kind: 'loading', verb, startTime: Date.now() }]);
  };

  const processEvent = (event: SessionEvent, replay = false) => {
    const type = event.type;
    const payload = event.payload || ({} as EventPayload);
-    const direction = event.direction || "inbound";
+    const direction = event.direction || 'inbound';

    // Skip bridge init noise
    const serialized = JSON.stringify(event);
@@ -826,14 +876,14 @@ export function useEventProcessor() {
    }

    switch (type) {
-      case "user": {
-        const toolResultBlocks = getEmbeddedToolBlocks(payload, "tool_result");
+      case 'user': {
+        const toolResultBlocks = getEmbeddedToolBlocks(payload, 'tool_result');
        if (toolResultBlocks.length > 0) {
          // Process tool results
          for (const block of toolResultBlocks) {
-            addToolTraceEntry("result", {
-              content: block.content as string || "",
-              output: block.content as string || "",
+            addToolTraceEntry('result', {
+              content: (block.content as string) || '',
+              output: (block.content as string) || '',
              is_error: !!block.is_error,
            });
          }
@@ -847,25 +897,25 @@ export function useEventProcessor() {
        traceStateRef.current = clearActiveHost(traceStateRef.current);
        const text = extractEventText(payload as Record<string, unknown>);
        if (text) {
-          setMessages((prev) => [...prev, { kind: "user", content: text }]);
+          setMessages(prev => [...prev, { kind: 'user', content: text }]);
          if (!replay) showLoading();
        }
        break;
      }
-      case "partial_assistant":
+      case 'partial_assistant':
        return;
-      case "assistant": {
+      case 'assistant': {
        removeLoading();
        const text = extractEventText(payload as Record<string, unknown>);
-        const toolUseBlocks = getEmbeddedToolBlocks(payload, "tool_use");
+        const toolUseBlocks = getEmbeddedToolBlocks(payload, 'tool_use');

        if (text && text.trim()) {
          const result = addAssistantHost(traceStateRef.current, text);
          traceStateRef.current = result.state;
-          setMessages((prev) => [
+          setMessages(prev => [
            ...prev,
            {
-              kind: "assistant",
+              kind: 'assistant',
              content: text,
              traceEntries: [],
              traceExpanded: false,
@@ -875,169 +925,172 @@ export function useEventProcessor() {
        }

        for (const block of toolUseBlocks) {
-          addToolTraceEntry("use", {
-            tool_name: (block.name as string) || "tool",
+          addToolTraceEntry('use', {
+            tool_name: (block.name as string) || 'tool',
            tool_input: block.input,
          });
        }
        break;
      }
-      case "task_state":
-      case "automation_state":
+      case 'task_state':
+      case 'automation_state':
        return;
-      case "result":
-      case "result_success":
+      case 'result':
+      case 'result_success':
        removeLoading();
        return;
-      case "tool_use":
-        addToolTraceEntry("use", payload as Record<string, unknown> as { tool_name: string; tool_input: unknown });
+      case 'tool_use':
+        addToolTraceEntry('use', payload as Record<string, unknown> as { tool_name: string; tool_input: unknown });
        break;
-      case "tool_result":
-        addToolTraceEntry("result", payload as Record<string, unknown> as { content: string; output: string; is_error: boolean });
+      case 'tool_result':
+        addToolTraceEntry(
+          'result',
+          payload as Record<string, unknown> as { content: string; output: string; is_error: boolean },
+        );
        break;
-      case "control_request":
-      case "permission_request": {
+      case 'control_request':
+      case 'permission_request': {
        const req = payload.request;
-        if (req && req.subtype === "can_use_tool") {
-          const toolName = req.tool_name || "unknown";
+        if (req && req.subtype === 'can_use_tool') {
+          const toolName = req.tool_name || 'unknown';
          const toolInput = req.input || req.tool_input || {};
-          if (toolName === "AskUserQuestion") {
-            setMessages((prev) => [
+          if (toolName === 'AskUserQuestion') {
+            setMessages(prev => [
              ...prev,
              {
-                kind: "ask_user",
-                requestId: payload.request_id || event.id || "",
-                questions: (toolInput as Record<string, unknown>).questions as import("../types").Question[] || [],
-                description: req.description || "",
+                kind: 'ask_user',
+                requestId: payload.request_id || event.id || '',
+                questions: ((toolInput as Record<string, unknown>).questions as import('../types').Question[]) || [],
+                description: req.description || '',
              },
            ]);
-          } else if (toolName === "ExitPlanMode") {
-            setMessages((prev) => [
+          } else if (toolName === 'ExitPlanMode') {
+            setMessages(prev => [
              ...prev,
              {
-                kind: "plan",
-                requestId: payload.request_id || event.id || "",
-                planContent: ((toolInput as Record<string, unknown>).plan as string) || "",
-                description: req.description || "",
+                kind: 'plan',
+                requestId: payload.request_id || event.id || '',
+                planContent: ((toolInput as Record<string, unknown>).plan as string) || '',
+                description: req.description || '',
              },
            ]);
          } else {
-            setMessages((prev) => [
+            setMessages(prev => [
              ...prev,
              {
-                kind: "permission",
-                requestId: payload.request_id || event.id || "",
+                kind: 'permission',
+                requestId: payload.request_id || event.id || '',
                toolName,
                toolInput,
-                description: req.description || "",
+                description: req.description || '',
              },
            ]);
          }
        }
        break;
      }
-      case "control_response":
-      case "permission_response":
+      case 'control_response':
+      case 'permission_response':
        return;
-      case "status": {
+      case 'status': {
        if (isConversationClearedStatus(payload as Record<string, unknown>)) {
          reset();
          return;
        }
        const rawMsg = payload.message;
-        const msg = (typeof rawMsg === "string" ? rawMsg : "") || payload.content || "";
+        const msg = (typeof rawMsg === 'string' ? rawMsg : '') || payload.content || '';
        if (/connecting|waiting|initializing|Remote Control/i.test(msg)) return;
        if (!msg.trim()) return;
-        setMessages((prev) => [...prev, { kind: "system", content: msg }]);
+        setMessages(prev => [...prev, { kind: 'system', content: msg }]);
        break;
      }
-      case "error":
+      case 'error':
        removeLoading();
-        setMessages((prev) => [
+        setMessages(prev => [
          ...prev,
-          { kind: "system", content: `Error: ${(typeof payload.message === "string" ? payload.message : "") || payload.content || "Unknown error"}` },
+          {
+            kind: 'system',
+            content: `Error: ${(typeof payload.message === 'string' ? payload.message : '') || payload.content || 'Unknown error'}`,
+          },
        ]);
        break;
-      case "session_status":
-        if (payload.status === "archived" || payload.status === "inactive") {
+      case 'session_status':
+        if (payload.status === 'archived' || payload.status === 'inactive') {
          removeLoading();
-          setMessages((prev) => [...prev, { kind: "system", content: `Session ${payload.status}` }]);
+          setMessages(prev => [...prev, { kind: 'system', content: `Session ${payload.status}` }]);
        }
        break;
-      case "interrupt":
+      case 'interrupt':
        removeLoading();
-        setMessages((prev) => [...prev, { kind: "system", content: "Session interrupted" }]);
+        setMessages(prev => [...prev, { kind: 'system', content: 'Session interrupted' }]);
        break;
-      case "system":
+      case 'system':
        return;
      default: {
        const raw = JSON.stringify(payload);
        if (/Remote Control connecting/i.test(raw)) return;
-        setMessages((prev) => [...prev, { kind: "system", content: `${type}: ${truncate(raw, 200)}` }]);
+        setMessages(prev => [...prev, { kind: 'system', content: `${type}: ${truncate(raw, 200)}` }]);
      }
    }
  };

  function processReplayEvent(type: string, payload: EventPayload, direction: string, event: SessionEvent) {
    switch (type) {
-      case "user": {
+      case 'user': {
        const text = extractEventText(payload as Record<string, unknown>);
        if (text) {
          traceStateRef.current = clearActiveHost(traceStateRef.current);
-          setMessages((prev) => [...prev, { kind: "user", content: text }]);
+          setMessages(prev => [...prev, { kind: 'user', content: text }]);
        }
        break;
      }
-      case "assistant": {
+      case 'assistant': {
        const text = extractEventText(payload as Record<string, unknown>);
        if (text && text.trim()) {
          const result = addAssistantHost(traceStateRef.current, text);
          traceStateRef.current = result.state;
-          setMessages((prev) => [
+          setMessages(prev => [
            ...prev,
-            { kind: "assistant", content: text, traceEntries: [], traceExpanded: false, traceId: result.host.id },
+            { kind: 'assistant', content: text, traceEntries: [], traceExpanded: false, traceId: result.host.id },
          ]);
        }
        break;
      }
-      case "error":
-        setMessages((prev) => [...prev, { kind: "system", content: `Error: ${payload.message || "Unknown error"}` }]);
+      case 'error':
+        setMessages(prev => [...prev, { kind: 'system', content: `Error: ${payload.message || 'Unknown error'}` }]);
        break;
-      case "session_status":
-        if (payload.status === "archived" || payload.status === "inactive") {
-          setMessages((prev) => [...prev, { kind: "system", content: `Session ${payload.status}` }]);
+      case 'session_status':
+        if (payload.status === 'archived' || payload.status === 'inactive') {
+          setMessages(prev => [...prev, { kind: 'system', content: `Session ${payload.status}` }]);
        }
        break;
    }
  }

-  function addToolTraceEntry(entryKind: "use" | "result", payload: Record<string, unknown>) {
+  function addToolTraceEntry(entryKind: 'use' | 'result', payload: Record<string, unknown>) {
    const result = addTraceEntry(traceStateRef.current, entryKind);
    traceStateRef.current = result.state;

-    const entry: TraceEntry = entryKind === "use"
-      ? {
-          entryKind: "use",
-          toolName: (payload.tool_name as string) || (payload.name as string) || "tool",
-          toolInput: payload.tool_input || payload.input,
-        }
-      : {
-          entryKind: "result",
-          content: (payload.content as string) || "",
-          output: (payload.output as string) || (payload.content as string) || "",
-          isError: !!payload.is_error,
-        };
+    const entry: TraceEntry =
+      entryKind === 'use'
+        ? {
+            entryKind: 'use',
+            toolName: (payload.tool_name as string) || (payload.name as string) || 'tool',
+            toolInput: payload.tool_input || payload.input,
+          }
+        : {
+            entryKind: 'result',
+            content: (payload.content as string) || '',
+            output: (payload.output as string) || (payload.content as string) || '',
+            isError: !!payload.is_error,
+          };

    // Add entry to the last assistant message
-    setMessages((prev) => {
+    setMessages(prev => {
      for (let i = prev.length - 1; i >= 0; i--) {
-        if (prev[i].kind === "assistant") {
+        if (prev[i].kind === 'assistant') {
          const msg = prev[i] as AssistantMessage;
-          return [
-            ...prev.slice(0, i),
-            { ...msg, traceEntries: [...msg.traceEntries, entry] },
-            ...prev.slice(i + 1),
-          ];
+          return [...prev.slice(0, i), { ...msg, traceEntries: [...msg.traceEntries, entry] }, ...prev.slice(i + 1)];
        }
      }
      return prev;
@@ -1045,20 +1098,20 @@ export function useEventProcessor() {
  }

  function getUserUuid(payload: EventPayload): string | null {
-    if (!payload || typeof payload !== "object") return null;
-    if (typeof payload.uuid === "string" && payload.uuid) return payload.uuid;
-    if (payload.raw && typeof payload.raw === "object" && typeof payload.raw.uuid === "string" && payload.raw.uuid) {
+    if (!payload || typeof payload !== 'object') return null;
+    if (typeof payload.uuid === 'string' && payload.uuid) return payload.uuid;
+    if (payload.raw && typeof payload.raw === 'object' && typeof payload.raw.uuid === 'string' && payload.raw.uuid) {
      return payload.raw.uuid;
    }
    return null;
  }

-  function getEmbeddedToolBlocks(payload: EventPayload, blockType: string): import("../types").ContentBlock[] {
-    if (!payload || typeof payload !== "object") return [];
+  function getEmbeddedToolBlocks(payload: EventPayload, blockType: string): import('../types').ContentBlock[] {
+    if (!payload || typeof payload !== 'object') return [];
    const msg = payload.message as Record<string, unknown> | undefined;
-    if (!msg || typeof msg !== "object" || !Array.isArray(msg.content)) return [];
-    return (msg.content as import("../types").ContentBlock[]).filter(
-      (b) => b && typeof b === "object" && b.type === blockType,
+    if (!msg || typeof msg !== 'object' || !Array.isArray(msg.content)) return [];
+    return (msg.content as import('../types').ContentBlock[]).filter(
+      b => b && typeof b === 'object' && b.type === blockType,
    );
  }

--- a/packages/remote-control-server/web/src/components/IdentityPanel.tsx
+++ b/packages/remote-control-server/web/src/components/IdentityPanel.tsx
@@ -1,16 +1,11 @@
-import { useState, useRef, useEffect } from "react";
-import QRCode from "qrcode";
-import QrScanner from "qr-scanner";
-import { getUuid, setUuid } from "../api/client";
-import { cn } from "../lib/utils";
-import { Scan } from "lucide-react";
-import { useTheme } from "../lib/theme";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "../../components/ui/dialog";
+import { useState, useRef, useEffect } from 'react';
+import QRCode from 'qrcode';
+import QrScanner from 'qr-scanner';
+import { getUuid, setUuid } from '../api/client';
+import { cn } from '../lib/utils';
+import { Scan } from 'lucide-react';
+import { useTheme } from '../lib/theme';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog';

 interface IdentityPanelProps {
  open: boolean;
@@ -26,9 +21,8 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
  const uuid = getUuid();
  const { resolvedTheme } = useTheme();

-  const qrColors = resolvedTheme === "dark"
-    ? { dark: "#ECE9E0", light: "#1C1B18" }
-    : { dark: "#141413", light: "#FDFCF8" };
+  const qrColors =
+    resolvedTheme === 'dark' ? { dark: '#ECE9E0', light: '#1C1B18' } : { dark: '#141413', light: '#FDFCF8' };

  useEffect(() => {
    if (!open) return;
@@ -41,7 +35,7 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
        margin: 1,
        color: qrColors,
      }).catch((err: unknown) => {
-        console.error("QR generation failed:", err);
+        console.error('QR generation failed:', err);
      });
    });
    return () => cancelAnimationFrame(rafId);
@@ -71,7 +65,7 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
    try {
      const scanner = new QrScanner(
        videoRef.current,
-        (result) => {
+        result => {
          handleScannedData(result.data);
        },
        { returnDetailedScanResult: true },
@@ -79,7 +73,7 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
      scannerRef.current = scanner;
      await scanner.start();
    } catch (e) {
-      console.error("Camera error:", e);
+      console.error('Camera error:', e);
      setScanning(false);
    }
  };
@@ -101,8 +95,8 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
        // Store ACP connection data and navigate to ACP direct connect view
        stopCamera();
        onClose();
-        sessionStorage.setItem("acp_connection", JSON.stringify({ url: parsed.url, token: parsed.token }));
-        window.location.href = "/code/?acp=1";
+        sessionStorage.setItem('acp_connection', JSON.stringify({ url: parsed.url, token: parsed.token }));
+        window.location.href = '/code/?acp=1';
        return;
      }
    } catch {
@@ -112,7 +106,7 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
    // Try URL with uuid param
    try {
      const url = new URL(data);
-      const importedUuid = url.searchParams.get("uuid");
+      const importedUuid = url.searchParams.get('uuid');
      if (importedUuid) {
        setUuid(importedUuid);
        stopCamera();
@@ -133,10 +127,10 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
  };

  const handleScanUpload = () => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "image/*";
-    input.onchange = async (e) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = async e => {
      const file = (e.target as HTMLInputElement).files?.[0];
      if (!file) return;
      try {
@@ -145,14 +139,19 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
        });
        handleScannedData(result.data);
      } catch {
-        alert("No QR code found in image");
+        alert('No QR code found in image');
      }
    };
    input.click();
  };

  return (
-    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+    <Dialog
+      open={open}
+      onOpenChange={o => {
+        if (!o) onClose();
+      }}
+    >
      <DialogContent className="max-w-sm rounded-2xl border-border bg-surface-1 p-6 shadow-2xl">
        <DialogHeader>
          <DialogTitle className="font-display text-lg font-semibold text-text-primary">Identity</DialogTitle>
@@ -170,7 +169,7 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
                onClick={handleCopy}
                className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
              >
-                {copied ? "Copied!" : "Copy"}
+                {copied ? 'Copied!' : 'Copy'}
              </button>
            </div>
          </div>
@@ -206,14 +205,14 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
            <button
              onClick={scanning ? stopCamera : startCamera}
              className={cn(
-                "flex items-center gap-2 rounded-lg border px-4 py-2 text-sm transition-colors",
+                'flex items-center gap-2 rounded-lg border px-4 py-2 text-sm transition-colors',
                scanning
-                  ? "border-status-error/30 text-status-error hover:bg-status-error/10"
-                  : "border-border text-text-secondary hover:bg-surface-2",
+                  ? 'border-status-error/30 text-status-error hover:bg-status-error/10'
+                  : 'border-border text-text-secondary hover:bg-surface-2',
              )}
            >
              <Scan className="h-4 w-4" />
-              {scanning ? "Stop Camera" : "Scan with Camera"}
+              {scanning ? 'Stop Camera' : 'Scan with Camera'}
            </button>
            <button
              onClick={handleScanUpload}
--- a/packages/remote-control-server/web/src/components/LoadingIndicator.tsx
+++ b/packages/remote-control-server/web/src/components/LoadingIndicator.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from 'react';

-const SPINNER_FRAMES = ["·", "✢", "✱", "✶", "✻", "✽"];
+const SPINNER_FRAMES = ['·', '✢', '✱', '✶', '✻', '✽'];
 const SPINNER_CYCLE = [...SPINNER_FRAMES, ...SPINNER_FRAMES.slice().reverse()];

 interface LoadingIndicatorProps {
@@ -8,7 +8,7 @@ interface LoadingIndicatorProps {
  stalled?: boolean;
 }

-export function LoadingIndicator({ verb = "Thinking", stalled = false }: LoadingIndicatorProps) {
+export function LoadingIndicator({ verb = 'Thinking', stalled = false }: LoadingIndicatorProps) {
  const [frame, setFrame] = useState(0);
  const [elapsed, setElapsed] = useState(0);
  const startTimeRef = useRef(Date.now());
@@ -16,7 +16,7 @@ export function LoadingIndicator({ verb = "Thinking", stalled = false }: Loading
  // Spinner animation — 120ms per frame
  useEffect(() => {
    const id = setInterval(() => {
-      setFrame((f) => (f + 1) % SPINNER_CYCLE.length);
+      setFrame(f => (f + 1) % SPINNER_CYCLE.length);
    }, 120);
    return () => clearInterval(id);
  }, []);
@@ -34,7 +34,7 @@ export function LoadingIndicator({ verb = "Thinking", stalled = false }: Loading
    <div className="flex items-center gap-2.5 py-2">
      <span
        className="text-xl leading-none min-w-[1.2em] transition-colors duration-2000"
-        style={{ color: stalled ? "var(--color-status-error)" : "var(--color-brand)" }}
+        style={{ color: stalled ? 'var(--color-status-error)' : 'var(--color-brand)' }}
      >
        {SPINNER_CYCLE[frame]}
      </span>
@@ -44,9 +44,7 @@ export function LoadingIndicator({ verb = "Thinking", stalled = false }: Loading
      >
        {verb}…
      </span>
-      <span className="ml-auto text-xs font-mono text-text-muted">
-        {elapsed}s
-      </span>
+      <span className="ml-auto text-xs font-mono text-text-muted">{elapsed}s</span>
    </div>
  );
 }
--- a/packages/remote-control-server/web/src/components/Navbar.tsx
+++ b/packages/remote-control-server/web/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
-import { cn } from "../lib/utils";
-import { ThemeToggle } from "../../components/ui/theme-toggle";
-import { ChevronLeft, LayoutGrid, UserPlus, KeyRound } from "lucide-react";
+import { cn } from '../lib/utils';
+import { ThemeToggle } from '../../components/ui/theme-toggle';
+import { ChevronLeft, LayoutGrid, UserPlus, KeyRound } from 'lucide-react';

 interface NavbarProps {
  onIdentityClick: () => void;
@@ -27,16 +27,18 @@ export function Navbar({ onIdentityClick, onTokenClick, activeTokenLabel, sessio
            </button>
            <span className="text-text-muted/40">/</span>
            <span className="text-sm font-display font-medium text-text-primary truncate">{sessionTitle}</span>
-            <span className="rounded-full bg-brand/15 px-2 py-0.5 text-[10px] font-medium text-brand flex-shrink-0">ACP</span>
+            <span className="rounded-full bg-brand/15 px-2 py-0.5 text-[10px] font-medium text-brand flex-shrink-0">
+              ACP
+            </span>
          </div>
        ) : (
          /* Dashboard 页面 — 品牌 */
-          <a href="/code/" className="flex items-center gap-2 font-display text-lg font-semibold text-text-primary no-underline">
+          <a
+            href="/code/"
+            className="flex items-center gap-2 font-display text-lg font-semibold text-text-primary no-underline"
+          >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" className="flex-shrink-0">
-              <path
-                d="M10 1L12.2 7.8L19 10L12.2 12.2L10 19L7.8 12.2L1 10L7.8 7.8L10 1Z"
-                fill="var(--color-brand)"
-              />
+              <path d="M10 1L12.2 7.8L19 10L12.2 12.2L10 19L7.8 12.2L1 10L7.8 7.8L10 1Z" fill="var(--color-brand)" />
            </svg>
            <span className="hidden sm:inline">Remote Control</span>
          </a>
@@ -56,15 +58,15 @@ export function Navbar({ onIdentityClick, onTokenClick, activeTokenLabel, sessio
          <button
            onClick={onTokenClick}
            className={cn(
-              "flex items-center gap-1 rounded-md px-2 sm:px-3 py-1.5 text-sm transition-colors",
+              'flex items-center gap-1 rounded-md px-2 sm:px-3 py-1.5 text-sm transition-colors',
              activeTokenLabel
-                ? "bg-brand/10 text-brand hover:bg-brand/20"
-                : "text-text-secondary hover:bg-surface-2 hover:text-text-primary"
+                ? 'bg-brand/10 text-brand hover:bg-brand/20'
+                : 'text-text-secondary hover:bg-surface-2 hover:text-text-primary',
            )}
            title="Token Manager"
          >
            <KeyRound className="h-4 w-4" />
-            <span className="hidden sm:inline max-w-24 truncate">{activeTokenLabel || "No Token"}</span>
+            <span className="hidden sm:inline max-w-24 truncate">{activeTokenLabel || 'No Token'}</span>
          </button>
          <button
            onClick={onIdentityClick}
@@ -82,20 +84,20 @@ export function Navbar({ onIdentityClick, onTokenClick, activeTokenLabel, sessio

 export function StatusBadge({ status }: { status: string }) {
  const colorMap: Record<string, string> = {
-    active: "bg-status-active/20 text-status-active",
-    running: "bg-status-running/20 text-status-running",
-    idle: "bg-status-idle/20 text-status-idle",
-    inactive: "bg-text-muted/20 text-text-muted",
-    requires_action: "bg-status-warning/20 text-status-warning",
-    archived: "bg-text-muted/20 text-text-muted",
-    error: "bg-status-error/20 text-status-error",
+    active: 'bg-status-active/20 text-status-active',
+    running: 'bg-status-running/20 text-status-running',
+    idle: 'bg-status-idle/20 text-status-idle',
+    inactive: 'bg-text-muted/20 text-text-muted',
+    requires_action: 'bg-status-warning/20 text-status-warning',
+    archived: 'bg-text-muted/20 text-text-muted',
+    error: 'bg-status-error/20 text-status-error',
  };

  return (
    <span
      className={cn(
-        "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
-        colorMap[status] || "bg-surface-3 text-text-secondary",
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+        colorMap[status] || 'bg-surface-3 text-text-secondary',
      )}
    >
      {status}
--- a/packages/remote-control-server/web/src/components/NewSessionDialog.tsx
+++ b/packages/remote-control-server/web/src/components/NewSessionDialog.tsx
@@ -1,13 +1,7 @@
-import { useState, useEffect } from "react";
-import type { Environment, Session } from "../types";
-import { apiCreateSession } from "../api/client";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "../../components/ui/dialog";
+import { useState, useEffect } from 'react';
+import type { Environment, Session } from '../types';
+import { apiCreateSession } from '../api/client';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../components/ui/dialog';

 interface NewSessionDialogProps {
  open: boolean;
@@ -17,22 +11,22 @@ interface NewSessionDialogProps {
 }

 export function NewSessionDialog({ open, environments, onClose, onCreated }: NewSessionDialogProps) {
-  const [title, setTitle] = useState("");
-  const [envId, setEnvId] = useState("");
-  const [error, setError] = useState("");
+  const [title, setTitle] = useState('');
+  const [envId, setEnvId] = useState('');
+  const [error, setError] = useState('');
  const [creating, setCreating] = useState(false);

  useEffect(() => {
    if (open) {
-      setTitle("");
-      setEnvId("");
-      setError("");
+      setTitle('');
+      setEnvId('');
+      setError('');
    }
  }, [open]);

  const handleCreate = async () => {
    setCreating(true);
-    setError("");
+    setError('');
    try {
      const body: Record<string, string> = {};
      if (title.trim()) body.title = title.trim();
@@ -40,14 +34,19 @@ export function NewSessionDialog({ open, environments, onClose, onCreated }: New
      const session = await apiCreateSession(body);
      onCreated(session);
    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create session");
+      setError(err instanceof Error ? err.message : 'Failed to create session');
    } finally {
      setCreating(false);
    }
  };

  return (
-    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+    <Dialog
+      open={open}
+      onOpenChange={o => {
+        if (!o) onClose();
+      }}
+    >
      <DialogContent className="max-w-md rounded-2xl border-border bg-surface-1 p-6 shadow-2xl">
        <DialogHeader>
          <DialogTitle className="font-display text-lg font-semibold text-text-primary">New Session</DialogTitle>
@@ -59,7 +58,7 @@ export function NewSessionDialog({ open, environments, onClose, onCreated }: New
            <input
              type="text"
              value={title}
-              onChange={(e) => setTitle(e.target.value)}
+              onChange={e => setTitle(e.target.value)}
              placeholder="My session"
              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
            />
@@ -69,13 +68,13 @@ export function NewSessionDialog({ open, environments, onClose, onCreated }: New
            <label className="mb-1 block text-sm text-text-secondary">Environment</label>
            <select
              value={envId}
-              onChange={(e) => setEnvId(e.target.value)}
+              onChange={e => setEnvId(e.target.value)}
              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-brand focus:outline-none"
            >
              <option value="">-- None --</option>
-              {environments.map((env) => (
+              {environments.map(env => (
                <option key={env.id} value={env.id}>
-                  {env.machine_name || env.id} ({env.branch || "no branch"})
+                  {env.machine_name || env.id} ({env.branch || 'no branch'})
                </option>
              ))}
            </select>
@@ -96,7 +95,7 @@ export function NewSessionDialog({ open, environments, onClose, onCreated }: New
            disabled={creating}
            className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light disabled:opacity-50 transition-colors"
          >
-            {creating ? "Creating..." : "Create"}
+            {creating ? 'Creating...' : 'Create'}
          </button>
        </DialogFooter>
      </DialogContent>
--- a/packages/remote-control-server/web/src/components/PermissionViews.tsx
+++ b/packages/remote-control-server/web/src/components/PermissionViews.tsx
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import type { Question } from "../types";
-import { esc, cn, truncate } from "../lib/utils";
-import { TriangleAlert, Check } from "lucide-react";
+import { useState } from 'react';
+import type { Question } from '../types';
+import { esc, cn, truncate } from '../lib/utils';
+import { TriangleAlert, Check } from 'lucide-react';

 // ============================================================
 // PermissionPromptView — simple approve/reject for tool use
@@ -22,7 +22,7 @@ export function PermissionPromptView({
  onApprove: () => void;
  onReject: () => void;
 }) {
-  const inputStr = typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput, null, 2);
+  const inputStr = typeof toolInput === 'string' ? toolInput : JSON.stringify(toolInput, null, 2);

  return (
    <div className="rounded-xl border border-warning-border/30 bg-surface-1 p-4">
@@ -34,7 +34,7 @@ export function PermissionPromptView({
      </div>
      {description && <div className="mb-2 text-sm text-text-secondary">{esc(description)}</div>}
      <div className="mb-2 font-mono text-xs font-bold text-text-primary">{esc(toolName)}</div>
-      {toolName !== "AskUserQuestion" && (
+      {toolName !== 'AskUserQuestion' && (
        <pre className="mb-3 max-h-40 overflow-auto rounded-lg bg-surface-1 p-2 text-xs text-text-secondary font-mono">
          {truncate(inputStr, 500)}
        </pre>
@@ -80,7 +80,7 @@ export function AskUserPanelView({
  const handleSelect = (qIdx: number, oIdx: number, multiSelect: boolean) => {
    if (multiSelect) {
      const current = (answers[qIdx] as number[]) || [];
-      const next = current.includes(oIdx) ? current.filter((i) => i !== oIdx) : [...current, oIdx];
+      const next = current.includes(oIdx) ? current.filter(i => i !== oIdx) : [...current, oIdx];
      setAnswers({ ...answers, [qIdx]: next });
    } else {
      setAnswers({ ...answers, [qIdx]: oIdx });
@@ -91,7 +91,7 @@ export function AskUserPanelView({
    const text = otherTexts[qIdx]?.trim();
    if (!text) return;
    setAnswers({ ...answers, [qIdx]: text });
-    setOtherTexts({ ...otherTexts, [qIdx]: "" });
+    setOtherTexts({ ...otherTexts, [qIdx]: '' });
  };

  const handleSubmit = () => {
@@ -99,8 +99,8 @@ export function AskUserPanelView({
    for (const [qIdx, val] of Object.entries(answers)) {
      const q = questions[parseInt(qIdx, 10)];
      if (!q) continue;
-      if (typeof val === "number") mapped[qIdx] = q.options?.[val]?.label || String(val);
-      else if (Array.isArray(val)) mapped[qIdx] = val.map((i) => q.options?.[i]?.label || String(i));
+      if (typeof val === 'number') mapped[qIdx] = q.options?.[val]?.label || String(val);
+      else if (Array.isArray(val)) mapped[qIdx] = val.map(i => q.options?.[i]?.label || String(i));
      else mapped[qIdx] = val;
    }
    onSubmit(mapped);
@@ -114,22 +114,20 @@ export function AskUserPanelView({
    return (
      <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
        <div className="mb-3 text-sm font-semibold text-text-primary">
-          {esc(description || q.question || "Question")}
+          {esc(description || q.question || 'Question')}
        </div>
        <div className="space-y-2">
          {(q.options || []).map((opt, j) => {
-            const isSelected = multiSelect
-              ? ((answers[0] as number[]) || []).includes(j)
-              : answers[0] === j;
+            const isSelected = multiSelect ? ((answers[0] as number[]) || []).includes(j) : answers[0] === j;
            return (
              <button
                key={j}
                onClick={() => handleSelect(0, j, multiSelect)}
                className={cn(
-                  "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+                  'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
                  isSelected
-                    ? "border-brand bg-brand/10 text-text-primary"
-                    : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+                    ? 'border-brand bg-brand/10 text-text-primary'
+                    : 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
                )}
              >
                <div className="font-medium">{esc(opt.label)}</div>
@@ -140,20 +138,33 @@ export function AskUserPanelView({
          <div className="flex gap-2">
            <input
              type="text"
-              value={otherTexts[0] || ""}
-              onChange={(e) => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
+              value={otherTexts[0] || ''}
+              onChange={e => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
              placeholder="Other..."
              className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
-              onKeyDown={(e) => e.key === "Enter" && handleOtherSubmit(0)}
+              onKeyDown={e => e.key === 'Enter' && handleOtherSubmit(0)}
            />
-            <button onClick={() => handleOtherSubmit(0)} className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">
+            <button
+              onClick={() => handleOtherSubmit(0)}
+              className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+            >
              Send
            </button>
          </div>
        </div>
        <div className="mt-4 flex gap-2">
-          <button onClick={handleSubmit} className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors">Submit</button>
-          <button onClick={onSkip} className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Skip</button>
+          <button
+            onClick={handleSubmit}
+            className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors"
+          >
+            Submit
+          </button>
+          <button
+            onClick={onSkip}
+            className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+          >
+            Skip
+          </button>
        </div>
      </div>
    );
@@ -164,15 +175,15 @@ export function AskUserPanelView({

  return (
    <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
-      <div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || "Questions")}</div>
+      <div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || 'Questions')}</div>
      <div className="mb-3 flex gap-1 overflow-x-auto">
        {questions.map((q, i) => (
          <button
            key={i}
            onClick={() => setActiveTab(i)}
            className={cn(
-              "rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors",
-              activeTab === i ? "bg-brand/20 text-brand" : "text-text-muted hover:bg-surface-2",
+              'rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors',
+              activeTab === i ? 'bg-brand/20 text-brand' : 'text-text-muted hover:bg-surface-2',
            )}
          >
            {q.header || `Q${i + 1}`}
@@ -193,10 +204,22 @@ export function AskUserPanelView({
      )}

      <div className="mt-4 flex items-center justify-between">
-        <span className="text-xs text-text-muted">{activeTab + 1} / {questions.length}</span>
+        <span className="text-xs text-text-muted">
+          {activeTab + 1} / {questions.length}
+        </span>
        <div className="flex gap-2">
-          <button onClick={handleSubmit} className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors">Submit All</button>
-          <button onClick={onSkip} className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Skip</button>
+          <button
+            onClick={handleSubmit}
+            className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors"
+          >
+            Submit All
+          </button>
+          <button
+            onClick={onSkip}
+            className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+          >
+            Skip
+          </button>
        </div>
      </div>
    </div>
@@ -204,7 +227,13 @@ export function AskUserPanelView({
 }

 function QuestionTab({
-  question, qIdx, answers, otherTexts, onSelect, onOtherTextChange, onOtherSubmit,
+  question,
+  qIdx,
+  answers,
+  otherTexts,
+  onSelect,
+  onOtherTextChange,
+  onOtherSubmit,
 }: {
  question: Question;
  qIdx: number;
@@ -221,18 +250,16 @@ function QuestionTab({
      <div className="mb-2 text-sm text-text-secondary">{esc(question.question)}</div>
      <div className="space-y-2">
        {(question.options || []).map((opt, j) => {
-          const isSelected = multiSelect
-            ? ((answers[qIdx] as number[]) || []).includes(j)
-            : answers[qIdx] === j;
+          const isSelected = multiSelect ? ((answers[qIdx] as number[]) || []).includes(j) : answers[qIdx] === j;
          return (
            <button
              key={j}
              onClick={() => onSelect(qIdx, j, multiSelect)}
              className={cn(
-                "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+                'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
                isSelected
-                  ? "border-brand bg-brand/10 text-text-primary"
-                  : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+                  ? 'border-brand bg-brand/10 text-text-primary'
+                  : 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
              )}
            >
              <div className="font-medium">{esc(opt.label)}</div>
@@ -243,13 +270,18 @@ function QuestionTab({
        <div className="flex gap-2">
          <input
            type="text"
-            value={otherTexts[qIdx] || ""}
-            onChange={(e) => onOtherTextChange(qIdx, e.target.value)}
+            value={otherTexts[qIdx] || ''}
+            onChange={e => onOtherTextChange(qIdx, e.target.value)}
            placeholder="Other..."
            className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
-            onKeyDown={(e) => e.key === "Enter" && onOtherSubmit(qIdx)}
+            onKeyDown={e => e.key === 'Enter' && onOtherSubmit(qIdx)}
          />
-          <button onClick={() => onOtherSubmit(qIdx)} className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Send</button>
+          <button
+            onClick={() => onOtherSubmit(qIdx)}
+            className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+          >
+            Send
+          </button>
        </div>
      </div>
    </div>
@@ -271,12 +303,12 @@ export function PlanPanelView({
  onSubmit: (value: string, feedback?: string) => void;
 }) {
  const [selected, setSelected] = useState<string | null>(null);
-  const [feedback, setFeedback] = useState("");
+  const [feedback, setFeedback] = useState('');
  const isEmpty = !planContent || !planContent.trim();

  const handleSubmit = () => {
    if (!selected) return;
-    onSubmit(selected, selected === "no" ? feedback : undefined);
+    onSubmit(selected, selected === 'no' ? feedback : undefined);
  };

  return (
@@ -286,33 +318,49 @@ export function PlanPanelView({
          <Check className="h-3 w-3" strokeWidth={2.5} />
        </span>
        <span className="text-sm font-semibold text-text-primary">
-          {isEmpty ? "Exit plan mode?" : "Ready to code?"}
+          {isEmpty ? 'Exit plan mode?' : 'Ready to code?'}
        </span>
      </div>
      {!isEmpty && (
        <div
          className="mb-4 max-h-64 overflow-auto rounded-lg bg-tool-card p-4 text-sm text-text-secondary"
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: content is sanitized by formatPlanContent
          dangerouslySetInnerHTML={{ __html: formatPlanContent(planContent) }}
        />
      )}
      <div className="space-y-2">
        {isEmpty ? (
          <>
-            <PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes" />
-            <PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No" />
+            <PlanOption selected={selected === 'yes-default'} onClick={() => setSelected('yes-default')} label="Yes" />
+            <PlanOption selected={selected === 'no'} onClick={() => setSelected('no')} label="No" />
          </>
        ) : (
          <>
-            <PlanOption selected={selected === "yes-accept-edits"} onClick={() => setSelected("yes-accept-edits")} label="Yes, auto-accept edits" desc="Approve plan and auto-accept file edits" />
-            <PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes, manually approve edits" desc="Approve plan but confirm each edit" />
-            <PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No, keep planning" desc="Provide feedback to refine the plan" />
+            <PlanOption
+              selected={selected === 'yes-accept-edits'}
+              onClick={() => setSelected('yes-accept-edits')}
+              label="Yes, auto-accept edits"
+              desc="Approve plan and auto-accept file edits"
+            />
+            <PlanOption
+              selected={selected === 'yes-default'}
+              onClick={() => setSelected('yes-default')}
+              label="Yes, manually approve edits"
+              desc="Approve plan but confirm each edit"
+            />
+            <PlanOption
+              selected={selected === 'no'}
+              onClick={() => setSelected('no')}
+              label="No, keep planning"
+              desc="Provide feedback to refine the plan"
+            />
          </>
        )}
      </div>
-      {selected === "no" && (
+      {selected === 'no' && (
        <textarea
          value={feedback}
-          onChange={(e) => setFeedback(e.target.value)}
+          onChange={e => setFeedback(e.target.value)}
          placeholder="Tell Claude what to change..."
          className="mt-3 w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
          rows={3}
@@ -331,21 +379,35 @@ export function PlanPanelView({
  );
 }

-function PlanOption({ selected, onClick, label, desc }: { selected: boolean; onClick: () => void; label: string; desc?: string }) {
+function PlanOption({
+  selected,
+  onClick,
+  label,
+  desc,
+}: {
+  selected: boolean;
+  onClick: () => void;
+  label: string;
+  desc?: string;
+}) {
  return (
    <button
      onClick={onClick}
      className={cn(
-        "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
-        selected ? "border-brand bg-brand/10 text-text-primary" : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+        'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
+        selected
+          ? 'border-brand bg-brand/10 text-text-primary'
+          : 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
      )}
    >
      <div className="flex items-center gap-2">
-        <span className={cn(
-          "flex h-4 w-4 items-center justify-center rounded-full border text-[10px] transition-colors",
-          selected ? "border-brand bg-brand text-white" : "border-border",
-        )}>
-          {selected && "\u2713"}
+        <span
+          className={cn(
+            'flex h-4 w-4 items-center justify-center rounded-full border text-[10px] transition-colors',
+            selected ? 'border-brand bg-brand text-white' : 'border-border',
+          )}
+        >
+          {selected && '\u2713'}
        </span>
        <span className="font-medium">{label}</span>
      </div>
@@ -356,10 +418,12 @@ function PlanOption({ selected, onClick, label, desc }: { selected: boolean; onC

 function formatPlanContent(content: string): string {
  let html = esc(content);
-  html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, _l, code) =>
-    `<pre class="my-2 overflow-x-auto rounded-lg bg-tool-card p-3 font-mono text-xs">${code.trim()}</pre>`
+  html = html.replace(
+    /```(\w*)\n?([\s\S]*?)```/g,
+    (_, _l, code) =>
+      `<pre class="my-2 overflow-x-auto rounded-lg bg-tool-card p-3 font-mono text-xs">${code.trim()}</pre>`,
  );
  html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-tool-card px-1.5 py-0.5 font-mono text-xs">$1</code>');
-  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
  return html;
 }
--- a/packages/remote-control-server/web/src/components/SessionList.tsx
+++ b/packages/remote-control-server/web/src/components/SessionList.tsx
@@ -1,6 +1,6 @@
-import type { Session } from "../types";
-import { StatusBadge } from "./Navbar";
-import { esc, formatTime } from "../lib/utils";
+import type { Session } from '../types';
+import { StatusBadge } from './Navbar';
+import { esc, formatTime } from '../lib/utils';

 interface SessionListProps {
  sessions: Session[];
@@ -10,9 +10,7 @@ interface SessionListProps {
 export function SessionList({ sessions, onSelect }: SessionListProps) {
  if (!sessions || sessions.length === 0) {
    return (
-      <div className="rounded-xl border border-border bg-surface-1 p-8 text-center text-text-muted">
-        No sessions
-      </div>
+      <div className="rounded-xl border border-border bg-surface-1 p-8 text-center text-text-muted">No sessions</div>
    );
  }

@@ -20,7 +18,7 @@ export function SessionList({ sessions, onSelect }: SessionListProps) {

  return (
    <div className="space-y-2">
-      {sorted.map((session) => (
+      {sorted.map(session => (
        <button
          key={session.id}
          type="button"
@@ -29,22 +27,16 @@ export function SessionList({ sessions, onSelect }: SessionListProps) {
        >
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2">
-              <span className="truncate font-medium text-text-primary">
-                {session.title || session.id}
-              </span>
-              {session.source === "acp" && (
-                <span className="rounded-full bg-brand/15 px-2 py-0.5 text-xs font-medium text-brand">
-                  ACP
-                </span>
+              <span className="truncate font-medium text-text-primary">{session.title || session.id}</span>
+              {session.source === 'acp' && (
+                <span className="rounded-full bg-brand/15 px-2 py-0.5 text-xs font-medium text-brand">ACP</span>
              )}
            </div>
            <div className="truncate text-xs text-text-muted">{session.id}</div>
          </div>
          <div className="flex items-center gap-3">
            <StatusBadge status={session.status} />
-            <span className="text-xs text-text-muted">
-              {formatTime(session.created_at || session.updated_at)}
-            </span>
+            <span className="text-xs text-text-muted">{formatTime(session.created_at || session.updated_at)}</span>
          </div>
        </button>
      ))}
--- a/packages/remote-control-server/web/src/components/TaskPanel.tsx
+++ b/packages/remote-control-server/web/src/components/TaskPanel.tsx
@@ -1,9 +1,4 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "../../components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog';

 interface TaskPanelProps {
  onClose: () => void;
@@ -11,7 +6,12 @@ interface TaskPanelProps {

 export function TaskPanel({ onClose }: TaskPanelProps) {
  return (
-    <Dialog open={true} onOpenChange={(o) => { if (!o) onClose(); }}>
+    <Dialog
+      open={true}
+      onOpenChange={o => {
+        if (!o) onClose();
+      }}
+    >
      <DialogContent
        showCloseButton={false}
        className="fixed inset-y-0 right-0 top-auto left-auto translate-x-0 translate-y-0 w-full sm:w-80 h-full max-w-none max-h-none rounded-none border-l border-border bg-surface-1 p-4 sm:max-w-sm"
--- a/packages/remote-control-server/web/src/components/TokenManagerDialog.tsx
+++ b/packages/remote-control-server/web/src/components/TokenManagerDialog.tsx
@@ -1,13 +1,7 @@
-import { useState } from "react";
-import type { TokenEntry } from "../hooks/useTokens";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "../../components/ui/dialog";
-import { Check, Copy, Eye, EyeOff, Pencil, Plus, Trash2, X } from "lucide-react";
+import { useState } from 'react';
+import type { TokenEntry } from '../hooks/useTokens';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../../components/ui/dialog';
+import { Check, Copy, Eye, EyeOff, Pencil, Plus, Trash2, X } from 'lucide-react';

 interface TokenManagerDialogProps {
  open: boolean;
@@ -30,11 +24,11 @@ export function TokenManagerDialog({
  onRemove,
  onUpdate,
 }: TokenManagerDialogProps) {
-  const [newToken, setNewToken] = useState("");
-  const [newLabel, setNewLabel] = useState("");
-  const [addError, setAddError] = useState("");
+  const [newToken, setNewToken] = useState('');
+  const [newLabel, setNewLabel] = useState('');
+  const [addError, setAddError] = useState('');
  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editLabel, setEditLabel] = useState("");
+  const [editLabel, setEditLabel] = useState('');
  const [visibleTokenId, setVisibleTokenId] = useState<string | null>(null);
  const [copiedId, setCopiedId] = useState<string | null>(null);

@@ -51,9 +45,9 @@ export function TokenManagerDialog({
      setAddError(error);
      return;
    }
-    setNewToken("");
-    setNewLabel("");
-    setAddError("");
+    setNewToken('');
+    setNewLabel('');
+    setAddError('');
  };

  const handleStartEdit = (entry: TokenEntry) => {
@@ -62,7 +56,7 @@ export function TokenManagerDialog({
  };

  const handleSaveEdit = (id: string) => {
-    onUpdate(id, editLabel.trim() || "Unnamed");
+    onUpdate(id, editLabel.trim() || 'Unnamed');
    setEditingId(null);
  };

@@ -72,12 +66,15 @@ export function TokenManagerDialog({
  };

  return (
-    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+    <Dialog
+      open={open}
+      onOpenChange={o => {
+        if (!o) onClose();
+      }}
+    >
      <DialogContent className="max-w-md rounded-2xl border-border bg-surface-1 p-6 shadow-2xl">
        <DialogHeader>
-          <DialogTitle className="font-display text-lg font-semibold text-text-primary">
-            Token Manager
-          </DialogTitle>
+          <DialogTitle className="font-display text-lg font-semibold text-text-primary">Token Manager</DialogTitle>
          <DialogDescription className="text-sm text-text-muted">
            Manage API tokens for RCS authentication.
          </DialogDescription>
@@ -85,16 +82,16 @@ export function TokenManagerDialog({

        {/* Token list */}
        <div className="space-y-1 max-h-64 overflow-y-auto">
-          {tokens.map((entry) => (
+          {tokens.map(entry => (
            <div key={entry.id} className="group flex items-center gap-1">
              {editingId === entry.id ? (
                <div className="flex flex-1 items-center gap-2 rounded-lg bg-surface-2 px-3 py-1.5">
                  <input
                    value={editLabel}
-                    onChange={(e) => setEditLabel(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") handleSaveEdit(entry.id);
-                      if (e.key === "Escape") setEditingId(null);
+                    onChange={e => setEditLabel(e.target.value)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') handleSaveEdit(entry.id);
+                      if (e.key === 'Escape') setEditingId(null);
                    }}
                    className="flex-1 rounded border border-border bg-surface-1 px-2 py-1 text-sm text-text-primary focus:border-brand focus:outline-none"
                    autoFocus
@@ -117,17 +114,13 @@ export function TokenManagerDialog({
                  <button
                    onClick={() => handleSwitch(entry.id)}
                    className={`flex flex-1 items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors ${
-                      activeTokenId === entry.id
-                        ? "bg-brand/10 text-brand"
-                        : "text-text-secondary hover:bg-surface-2"
+                      activeTokenId === entry.id ? 'bg-brand/10 text-brand' : 'text-text-secondary hover:bg-surface-2'
                    }`}
                  >
                    <div className="flex flex-col items-start min-w-0">
                      <span className="font-medium truncate w-full">{entry.label}</span>
                      <span className="text-xs text-text-muted font-mono">
-                        {visibleTokenId === entry.id
-                          ? entry.token
-                          : `${entry.token.slice(0, 6)}${"\u2022".repeat(6)}`}
+                        {visibleTokenId === entry.id ? entry.token : `${entry.token.slice(0, 6)}${'\u2022'.repeat(6)}`}
                      </span>
                    </div>
                    {activeTokenId === entry.id && <Check className="h-4 w-4 flex-shrink-0" />}
@@ -144,7 +137,11 @@ export function TokenManagerDialog({
                    className="rounded p-1 text-text-muted opacity-0 group-hover:opacity-100 hover:text-text-primary transition-all"
                    title="Copy token"
                  >
-                    {copiedId === entry.id ? <Check className="h-3.5 w-3.5 text-status-active" /> : <Copy className="h-3.5 w-3.5" />}
+                    {copiedId === entry.id ? (
+                      <Check className="h-3.5 w-3.5 text-status-active" />
+                    ) : (
+                      <Copy className="h-3.5 w-3.5" />
+                    )}
                  </button>
                  <button
                    onClick={() => handleStartEdit(entry)}
@@ -166,9 +163,7 @@ export function TokenManagerDialog({
          ))}

          {tokens.length === 0 && (
-            <div className="py-4 text-center text-sm text-text-muted">
-              No tokens saved yet. Add one below.
-            </div>
+            <div className="py-4 text-center text-sm text-text-muted">No tokens saved yet. Add one below.</div>
          )}
        </div>

@@ -179,25 +174,25 @@ export function TokenManagerDialog({
            <input
              type="text"
              value={newToken}
-              onChange={(e) => {
+              onChange={e => {
                setNewToken(e.target.value);
-                setAddError("");
+                setAddError('');
              }}
              placeholder="API Token"
              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none font-mono"
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleAdd();
+              onKeyDown={e => {
+                if (e.key === 'Enter') handleAdd();
              }}
            />
            <div className="flex gap-2">
              <input
                type="text"
                value={newLabel}
-                onChange={(e) => setNewLabel(e.target.value)}
+                onChange={e => setNewLabel(e.target.value)}
                placeholder="Label (optional)"
                className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleAdd();
+                onKeyDown={e => {
+                  if (e.key === 'Enter') handleAdd();
                }}
              />
              <button