bosun 0.36.1 → 0.36.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bosun",
-  "version": "0.36.1",
+  "version": "0.36.2",
   "description": "AI-powered orchestrator supervisor — manages AI agent executors with failover, auto-restarts on failure, analyzes crashes with Codex SDK, creates PRs via Vibe-Kanban API, and sends Telegram notifications. Supports N executors with weighted distribution, multi-repo projects, and auto-setup.",
   "type": "module",
   "license": "Apache 2.0",

package/setup-web-server.mjs

@@ -434,6 +434,18 @@ function buildStableSetupDefaults({
     workflowRunStuckThresholdMs: 300000,
     workflowMaxPersistedRuns: 200,
     workflowMaxConcurrentBranches: 8,
+    voiceEnabled: true,
+    voiceProvider: "auto",
+    voiceModel: "gpt-4o-realtime-preview-2024-12-17",
+    voiceVisionModel: "gpt-4.1-mini",
+    voiceId: "alloy",
+    voiceTurnDetection: "server_vad",
+    voiceFallbackMode: "browser",
+    voiceDelegateExecutor: "codex-sdk",
+    openaiRealtimeApiKey: "",
+    azureOpenaiRealtimeEndpoint: "",
+    azureOpenaiRealtimeApiKey: "",
+    azureOpenaiRealtimeDeployment: "gpt-4o-realtime-preview",
     copilotEnableAllMcpTools: false,
     // Backward-compatible fields consumed by older setup UI revisions.
     distribution: "primary-only",
@@ -818,6 +830,122 @@ function applyNonBlockingSetupEnvDefaults(envMap, env = {}, sourceEnv = process.
     ["workspace-write", "danger-full-access", "read-only"],
     "workspace-write",
   );
+  envMap.VOICE_ENABLED = toBooleanEnvString(
+    pickNonEmptyValue(
+      env.voiceEnabled,
+      env.VOICE_ENABLED,
+      envMap.VOICE_ENABLED,
+      sourceEnv.VOICE_ENABLED,
+    ),
+    true,
+  );
+  envMap.VOICE_PROVIDER = normalizeEnumValue(
+    pickNonEmptyValue(
+      env.voiceProvider,
+      env.VOICE_PROVIDER,
+      envMap.VOICE_PROVIDER,
+      sourceEnv.VOICE_PROVIDER,
+    ),
+    ["auto", "openai", "azure", "claude", "gemini", "fallback"],
+    "auto",
+  );
+  envMap.VOICE_MODEL = String(
+    pickNonEmptyValue(
+      env.voiceModel,
+      env.VOICE_MODEL,
+      envMap.VOICE_MODEL,
+      sourceEnv.VOICE_MODEL,
+    ) || "gpt-4o-realtime-preview-2024-12-17",
+  ).trim() || "gpt-4o-realtime-preview-2024-12-17";
+  envMap.VOICE_VISION_MODEL = String(
+    pickNonEmptyValue(
+      env.voiceVisionModel,
+      env.VOICE_VISION_MODEL,
+      envMap.VOICE_VISION_MODEL,
+      sourceEnv.VOICE_VISION_MODEL,
+    ) || "gpt-4.1-mini",
+  ).trim() || "gpt-4.1-mini";
+  envMap.VOICE_ID = normalizeEnumValue(
+    pickNonEmptyValue(
+      env.voiceId,
+      env.VOICE_ID,
+      envMap.VOICE_ID,
+      sourceEnv.VOICE_ID,
+    ),
+    ["alloy", "ash", "ballad", "coral", "echo", "fable", "onyx", "nova", "sage", "shimmer", "verse"],
+    "alloy",
+  );
+  envMap.VOICE_TURN_DETECTION = normalizeEnumValue(
+    pickNonEmptyValue(
+      env.voiceTurnDetection,
+      env.VOICE_TURN_DETECTION,
+      envMap.VOICE_TURN_DETECTION,
+      sourceEnv.VOICE_TURN_DETECTION,
+    ),
+    ["server_vad", "semantic_vad", "none"],
+    "server_vad",
+  );
+  envMap.VOICE_FALLBACK_MODE = normalizeEnumValue(
+    pickNonEmptyValue(
+      env.voiceFallbackMode,
+      env.VOICE_FALLBACK_MODE,
+      envMap.VOICE_FALLBACK_MODE,
+      sourceEnv.VOICE_FALLBACK_MODE,
+    ),
+    ["browser", "disabled"],
+    "browser",
+  );
+  envMap.VOICE_DELEGATE_EXECUTOR = normalizeEnumValue(
+    pickNonEmptyValue(
+      env.voiceDelegateExecutor,
+      env.VOICE_DELEGATE_EXECUTOR,
+      envMap.VOICE_DELEGATE_EXECUTOR,
+      sourceEnv.VOICE_DELEGATE_EXECUTOR,
+    ),
+    ["codex-sdk", "copilot-sdk", "claude-sdk", "gemini-sdk", "opencode-sdk"],
+    "codex-sdk",
+  );
+
+  const openaiRealtimeApiKey = pickNonEmptyValue(
+    env.openaiRealtimeApiKey,
+    env.OPENAI_REALTIME_API_KEY,
+    envMap.OPENAI_REALTIME_API_KEY,
+    sourceEnv.OPENAI_REALTIME_API_KEY,
+  );
+  if (openaiRealtimeApiKey !== undefined) {
+    envMap.OPENAI_REALTIME_API_KEY = String(openaiRealtimeApiKey).trim();
+  }
+
+  const azureRealtimeEndpoint = pickNonEmptyValue(
+    env.azureOpenaiRealtimeEndpoint,
+    env.AZURE_OPENAI_REALTIME_ENDPOINT,
+    envMap.AZURE_OPENAI_REALTIME_ENDPOINT,
+    sourceEnv.AZURE_OPENAI_REALTIME_ENDPOINT,
+    sourceEnv.AZURE_OPENAI_ENDPOINT,
+  );
+  if (azureRealtimeEndpoint !== undefined) {
+    envMap.AZURE_OPENAI_REALTIME_ENDPOINT = String(azureRealtimeEndpoint).trim();
+  }
+
+  const azureRealtimeApiKey = pickNonEmptyValue(
+    env.azureOpenaiRealtimeApiKey,
+    env.AZURE_OPENAI_REALTIME_API_KEY,
+    envMap.AZURE_OPENAI_REALTIME_API_KEY,
+    sourceEnv.AZURE_OPENAI_REALTIME_API_KEY,
+    sourceEnv.AZURE_OPENAI_API_KEY,
+  );
+  if (azureRealtimeApiKey !== undefined) {
+    envMap.AZURE_OPENAI_REALTIME_API_KEY = String(azureRealtimeApiKey).trim();
+  }
+
+  envMap.AZURE_OPENAI_REALTIME_DEPLOYMENT = String(
+    pickNonEmptyValue(
+      env.azureOpenaiRealtimeDeployment,
+      env.AZURE_OPENAI_REALTIME_DEPLOYMENT,
+      envMap.AZURE_OPENAI_REALTIME_DEPLOYMENT,
+      sourceEnv.AZURE_OPENAI_REALTIME_DEPLOYMENT,
+    ) || "gpt-4o-realtime-preview",
+  ).trim() || "gpt-4o-realtime-preview";
 
   envMap.CONTAINER_ENABLED = toBooleanEnvString(
     pickNonEmptyValue(env.containerEnabled, envMap.CONTAINER_ENABLED, sourceEnv.CONTAINER_ENABLED),

package/telegram-bot.mjs

@@ -2178,6 +2178,83 @@ const TELEGRAM_ICON_TOKEN_LABELS = Object.freeze({
   cloud: "Cloud",
 });
 
+const TELEGRAM_ICON_TOKEN_EMOJI = Object.freeze({
+  check: "✅",
+  close: "❌",
+  alert: "⚠️",
+  pause: "⏸️",
+  play: "▶️",
+  stop: "⏹️",
+  refresh: "🔄",
+  chart: "📊",
+  clipboard: "📋",
+  bot: "🤖",
+  git: "🌿",
+  settings: "⚙️",
+  server: "🖧",
+  folder: "📁",
+  file: "📄",
+  phone: "📱",
+  globe: "🌐",
+  heart: "❤️",
+  cpu: "🧠",
+  chat: "💬",
+  hash: "#️⃣",
+  repeat: "🔁",
+  beaker: "🧪",
+  compass: "🧭",
+  target: "🎯",
+  workflow: "🧩",
+  arrowright: "➡️",
+  plus: "➕",
+  menu: "☰",
+  lock: "🔒",
+  unlock: "🔓",
+  search: "🔍",
+  link: "🔗",
+  upload: "📤",
+  download: "📥",
+  box: "📦",
+  bell: "🔔",
+  lightbulb: "💡",
+  rocket: "🚀",
+  home: "🏠",
+  pin: "📌",
+  star: "⭐",
+  help: "❓",
+  cloud: "☁️",
+  monitor: "🖥️",
+  eye: "👁️",
+  edit: "✏️",
+  trash: "🗑️",
+  dot: "•",
+});
+
+function decodeUnicodeIconToken(name) {
+  const raw = String(name || "").trim();
+  const match = raw.match(/^u([0-9a-f]{4,6})$/i);
+  if (!match) return "";
+  const codePoint = Number.parseInt(match[1], 16);
+  if (!Number.isFinite(codePoint)) return "";
+  try {
+    return String.fromCodePoint(codePoint);
+  } catch {
+    return "";
+  }
+}
+
+function resolveTelegramIconTokenGlyph(name) {
+  const raw = String(name || "").trim();
+  if (!raw) return "";
+  const lowered = raw.toLowerCase();
+  const squashed = lowered.replace(/[_-]+/g, "");
+  const glyph = TELEGRAM_ICON_TOKEN_EMOJI[lowered]
+    || TELEGRAM_ICON_TOKEN_EMOJI[squashed]
+    || decodeUnicodeIconToken(lowered)
+    || decodeUnicodeIconToken(squashed);
+  return glyph || "";
+}
+
 function humanizeIconTokenName(name) {
   const spaced = String(name || "")
     .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
@@ -2195,6 +2272,8 @@ function formatTelegramIconTokens(value, { button = false } = {}) {
   const str = String(value);
   return str.replace(/:([a-zA-Z][a-zA-Z0-9_-]*):/g, (_match, rawName) => {
     const tokenName = String(rawName || "");
+    const glyph = resolveTelegramIconTokenGlyph(tokenName);
+    if (glyph) return glyph;
     const key = tokenName.toLowerCase();
     const label = TELEGRAM_ICON_TOKEN_LABELS[tokenName]
       || TELEGRAM_ICON_TOKEN_LABELS[key]
@@ -4005,8 +4084,12 @@ function appendRefreshRow(keyboard, screenId, params = {}) {
       )
     : uiGoAction(screenId, params.page);
   const rows = keyboard.inline_keyboard || [];
+  const refreshLabel = formatTelegramIconTokens(":refresh: Refresh", { button: true });
   const hasRefresh = rows.some((row) =>
-    row.some((btn) => btn?.text === ":refresh: Refresh"),
+    row.some((btn) =>
+      btn?.text === ":refresh: Refresh"
+      || btn?.text === refreshLabel
+      || btn?.callback_data === action),
   );
   if (hasRefresh) return keyboard;
   return {

package/ui/app.js

@@ -61,6 +61,7 @@ const TABLET_MIN_WIDTH = 768;
 const COMPACT_NAV_MAX_WIDTH = 520;
 const RAIL_ICON_WIDTH = 54;
 const SIDEBAR_ICON_WIDTH = 54;
+const APP_LOGO_SOURCES = ["/logo.png", "/logo.svg", "/favicon.png"];
 const VOICE_LAUNCH_QUERY_KEYS = [
   "launch",
   "call",
@@ -74,6 +75,30 @@ const VOICE_LAUNCH_QUERY_KEYS = [
   "chat_id",
 ];
 
+function getAppLogoSource(index = 0) {
+  const safeIndex = Number.isFinite(index) ? Math.trunc(index) : 0;
+  if (safeIndex <= 0) return APP_LOGO_SOURCES[0];
+  if (safeIndex >= APP_LOGO_SOURCES.length) {
+    return APP_LOGO_SOURCES[APP_LOGO_SOURCES.length - 1];
+  }
+  return APP_LOGO_SOURCES[safeIndex];
+}
+
+function handleAppLogoLoadError(event) {
+  const target = event?.currentTarget;
+  if (!target) return;
+
+  const currentIndex = Number.parseInt(
+    String(target.dataset?.logoFallbackIndex || "0"),
+    10,
+  );
+  const nextIndex = Number.isFinite(currentIndex) ? currentIndex + 1 : 1;
+  if (nextIndex >= APP_LOGO_SOURCES.length) return;
+
+  target.dataset.logoFallbackIndex = String(nextIndex);
+  target.src = getAppLogoSource(nextIndex);
+}
+
 function parseVoiceLaunchFromUrl() {
   if (typeof window === "undefined") return null;
   const params = new URLSearchParams(window.location.search || "");
@@ -586,7 +611,13 @@ function SidebarNav({ collapsed = false, onToggle }) {
       <div class="sidebar-brand-row">
         <div class="sidebar-brand">
           <div class="sidebar-logo">
-            <img src="logo.png" alt="Bosun" class="app-logo-img" />
+            <img
+              src=${getAppLogoSource(0)}
+              alt="Bosun"
+              class="app-logo-img"
+              data-logo-fallback-index="0"
+              onError=${handleAppLogoLoadError}
+            />
           </div>
           ${!collapsed && html`<div class="sidebar-title">Bosun</div>`}
         </div>

package/ui/app.monolith.js

@@ -2398,7 +2398,7 @@ function Header() {
   return html`
     <header class="app-header">
       <div class="app-header-brand">
-        <img src="logo.png" alt="Bosun" class="app-logo-img" />
+        <img src="/logo.png" alt="Bosun" class="app-logo-img" />
         <div class="app-header-title">Bosun</div>
       </div>
       <div class="connection-pill ${isConn ? "connected" : "disconnected"}">

package/ui/components/chat-view.js

@@ -438,6 +438,42 @@ const TraceEvent = memo(function TraceEvent({ msg }) {
   `;
 }, (prev, next) => prev.msg === next.msg);
 
+/* ─── ThinkingGroup — collapses consecutive trace events into one row ─── */
+const ThinkingGroup = memo(function ThinkingGroup({ msgs }) {
+  const hasErrors = msgs.some((m) => m.type === "error" || m.type === "stream_error");
+  const [expanded, setExpanded] = useState(hasErrors);
+
+  useEffect(() => {
+    if (hasErrors) setExpanded(true);
+  }, [msgs.length, hasErrors]);
+
+  const toolCount = msgs.filter((m) => m.type === "tool_call").length;
+  const stepCount = msgs.filter((m) => {
+    const t = (m.type || "").toLowerCase();
+    return !["tool_call", "tool_result", "tool_output", "error", "stream_error"].includes(t);
+  }).length;
+
+  const parts = [];
+  if (toolCount) parts.push(`${toolCount} tool call${toolCount !== 1 ? "s" : ""}`);
+  if (stepCount) parts.push(`${stepCount} step${stepCount !== 1 ? "s" : ""}`);
+  const label = parts.join(", ") || `${msgs.length} step${msgs.length !== 1 ? "s" : ""}`;
+
+  return html`
+    <div class="thinking-group ${expanded ? "expanded" : ""} ${hasErrors ? "has-errors" : ""}">
+      <button class="thinking-group-head" type="button" onClick=${() => setExpanded((p) => !p)}>
+        <span class="thinking-group-badge">${iconText(":cpu: Thinking")}</span>
+        <span class="thinking-group-label">${label}</span>
+        <span class="thinking-group-chevron">${expanded ? "▾" : "▸"}</span>
+      </button>
+      ${expanded && html`
+        <div class="thinking-group-body">
+          ${msgs.map((m, idx) => html`<${TraceEvent} key=${m.id || m.timestamp || idx} msg=${m} />`)}
+        </div>
+      `}
+    </div>
+  `;
+}, (prev, next) => prev.msgs === next.msgs);
+
 /* ─── Chat View component ─── */
 
 export function ChatView({ sessionId, readOnly = false, embedded = false }) {
@@ -541,12 +577,28 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
     return messageIdentity(latest);
   }, [filteredMessages]);
 
+  // Count only real (non-trace) messages toward the visible limit so trace
+  // events don't consume the page budget.
+  const realMessageCount = useMemo(
+    () => filteredMessages.filter((msg) => !isTraceEventMessage(msg)).length,
+    [filteredMessages],
+  );
+
   const visibleMessages = useMemo(() => {
-    if (filteredMessages.length <= visibleCount) return filteredMessages;
-    return filteredMessages.slice(-visibleCount);
-  }, [filteredMessages, visibleCount]);
+    if (realMessageCount <= visibleCount) return filteredMessages;
+    // Walk backwards counting only real messages; include all trace events
+    // that fall between them so groups stay intact.
+    let realCount = 0;
+    for (let i = filteredMessages.length - 1; i >= 0; i--) {
+      if (!isTraceEventMessage(filteredMessages[i])) {
+        realCount++;
+        if (realCount >= visibleCount) return filteredMessages.slice(i);
+      }
+    }
+    return filteredMessages;
+  }, [filteredMessages, visibleCount, realMessageCount]);
 
-  const hasMoreMessages = filteredMessages.length > visibleCount;
+  const hasMoreMessages = realMessageCount > visibleCount;
 
   const streamActivityKey = useMemo(() => {
     if (filteredMessages.length === 0) return "empty";
@@ -602,16 +654,37 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
   }
 
   const renderItems = useMemo(() => {
-    return visibleMessages.map((msg, index) => {
-      const baseKey = msg.id || msg.timestamp || `msg-${index}`;
-      const trace = isTraceEventMessage(msg);
-      return {
-        kind: trace ? "trace" : "message",
-        key: `${trace ? "trace" : "message"}-${baseKey}-${index}`,
-        messageKey: messageIdentity(msg),
-        msg,
-      };
-    });
+    const items = [];
+    let i = 0;
+    while (i < visibleMessages.length) {
+      const msg = visibleMessages[i];
+      if (isTraceEventMessage(msg)) {
+        // Collect consecutive trace events; discard completely empty ones.
+        const group = [];
+        let groupKey = null;
+        while (i < visibleMessages.length && isTraceEventMessage(visibleMessages[i])) {
+          const m = visibleMessages[i];
+          if (messageText(m).trim()) {
+            group.push(m);
+            if (!groupKey) groupKey = m.id || m.timestamp || `trace-${i}`;
+          }
+          i++;
+        }
+        if (group.length > 0) {
+          items.push({ kind: "thinking-group", key: `thinking-group-${groupKey}`, msgs: group });
+        }
+      } else {
+        const baseKey = msg.id || msg.timestamp || `msg-${i}`;
+        items.push({
+          kind: "message",
+          key: `message-${baseKey}-${i}`,
+          messageKey: messageIdentity(msg),
+          msg,
+        });
+        i++;
+      }
+    }
+    return items;
   }, [visibleMessages]);
 
   const refreshMessages = useCallback(async () => {
@@ -1173,8 +1246,8 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
             </button>
           </div>
         `}
-        ${renderItems.map((item) => item.kind === "trace"
-          ? html`<${TraceEvent} key=${item.key} msg=${item.msg} />`
+        ${renderItems.map((item) => item.kind === "thinking-group"
+          ? html`<${ThinkingGroup} key=${item.key} msgs=${item.msgs} />`
           : html`<${ChatBubble}
               key=${item.key}
               msg=${item.msg}

package/ui/components/session-list.js

@@ -413,6 +413,32 @@ const STATUS_COLOR_MAP = {
   archived: "var(--text-hint)",
 };
 
+const SESSION_VIEW_FILTER = Object.freeze({
+  all: "all",
+  active: "active",
+  historic: "historic",
+});
+
+function normalizeSessionViewFilter(value) {
+  const normalized = String(value || "").trim().toLowerCase();
+  if (normalized === SESSION_VIEW_FILTER.active) return SESSION_VIEW_FILTER.active;
+  if (normalized === SESSION_VIEW_FILTER.historic) return SESSION_VIEW_FILTER.historic;
+  return SESSION_VIEW_FILTER.all;
+}
+
+function getSessionStatusKey(session) {
+  return String(session?.status || "idle").trim().toLowerCase();
+}
+
+function isActiveSession(session) {
+  const status = getSessionStatusKey(session);
+  return status === "active" || status === "running";
+}
+
+function isHistoricSession(session) {
+  return !isActiveSession(session);
+}
+
 /* ─── Swipeable Session Item ─── */
 function SwipeableSessionItem({
   session: s,
@@ -639,6 +665,8 @@ export function SessionList({
   onSelect,
   showArchived = true,
   onToggleArchived,
+  sessionView = SESSION_VIEW_FILTER.all,
+  onSessionViewChange,
   defaultType = null,
   renamingSessionId = null,
   onStartRename,
@@ -647,9 +675,36 @@ export function SessionList({
 }) {
   const [search, setSearch] = useState("");
   const [revealedActions, setRevealedActions] = useState(null);
+  const [uncontrolledSessionView, setUncontrolledSessionView] = useState(
+    normalizeSessionViewFilter(sessionView),
+  );
   const allSessions = sessionsData.value || [];
   const error = sessionsError.value;
   const hasSearch = search.trim().length > 0;
+  const resolvedSessionView =
+    typeof onSessionViewChange === "function"
+      ? normalizeSessionViewFilter(sessionView)
+      : uncontrolledSessionView;
+
+  useEffect(() => {
+    if (typeof onSessionViewChange === "function") return;
+    const normalized = normalizeSessionViewFilter(sessionView);
+    if (normalized !== uncontrolledSessionView) {
+      setUncontrolledSessionView(normalized);
+    }
+  }, [onSessionViewChange, sessionView, uncontrolledSessionView]);
+
+  const setSessionView = useCallback(
+    (nextFilter) => {
+      const normalized = normalizeSessionViewFilter(nextFilter);
+      if (typeof onSessionViewChange === "function") {
+        onSessionViewChange(normalized);
+      } else {
+        setUncontrolledSessionView(normalized);
+      }
+    },
+    [onSessionViewChange],
+  );
 
   // Filter by defaultType to exclude ghost sessions (e.g. task sessions in Chat tab)
   const typeFiltered = defaultType
@@ -666,30 +721,39 @@ export function SessionList({
       })
     : allSessions;
 
-  const base = showArchived
+  const archivedFiltered = showArchived
     ? typeFiltered
-    : typeFiltered.filter((s) => s.status !== "archived");
+    : typeFiltered.filter((s) => getSessionStatusKey(s) !== "archived");
+
+  const viewFiltered = archivedFiltered.filter((s) => {
+    if (resolvedSessionView === SESSION_VIEW_FILTER.active) {
+      return isActiveSession(s);
+    }
+    if (resolvedSessionView === SESSION_VIEW_FILTER.historic) {
+      return isHistoricSession(s);
+    }
+    return true;
+  });
 
   const filtered = search
-    ? base.filter(
+    ? viewFiltered.filter(
         (s) =>
           (s.title || "").toLowerCase().includes(search.toLowerCase()) ||
           (s.taskId || "").toLowerCase().includes(search.toLowerCase()),
       )
-    : base;
+    : viewFiltered;
 
-  const active = filtered.filter(
-    (s) => s.status === "active" || s.status === "running",
-  );
-  const archived = filtered.filter((s) => s.status === "archived");
+  const active = filtered.filter((s) => isActiveSession(s));
+  const archived = filtered.filter((s) => getSessionStatusKey(s) === "archived");
   const recent = filtered.filter(
     (s) =>
-      s.status !== "active" &&
-      s.status !== "running" &&
-      s.status !== "archived",
+      !isActiveSession(s) && getSessionStatusKey(s) !== "archived",
   );
 
-  const archivedCount = typeFiltered.filter((s) => s.status === "archived").length;
+  const archivedCount = typeFiltered.filter((s) => getSessionStatusKey(s) === "archived").length;
+  const allCount = archivedFiltered.length;
+  const activeCount = archivedFiltered.filter((s) => isActiveSession(s)).length;
+  const historicCount = archivedFiltered.filter((s) => isHistoricSession(s)).length;
 
   const handleSelect = useCallback(
     (id) => {
@@ -705,6 +769,13 @@ export function SessionList({
     loadSessions(_lastLoadFilter);
   }, []);
 
+  const handleCreateSession = useCallback(() => {
+    if (resolvedSessionView === SESSION_VIEW_FILTER.historic) {
+      setSessionView(SESSION_VIEW_FILTER.all);
+    }
+    createSession(defaultType ? { type: defaultType } : {});
+  }, [defaultType, resolvedSessionView, setSessionView]);
+
   const handleArchive = useCallback(async (id) => {
     setRevealedActions(null);
     await archiveSession(id);
@@ -726,6 +797,21 @@ export function SessionList({
     setRevealedActions(null);
   }, []);
 
+  const emptyTitle = hasSearch
+    ? "No matching sessions"
+    : resolvedSessionView === SESSION_VIEW_FILTER.active
+      ? "No active sessions"
+      : resolvedSessionView === SESSION_VIEW_FILTER.historic
+        ? "No historic sessions"
+        : "No sessions yet";
+  const emptyHint = hasSearch
+    ? "Try a different keyword or clear the search."
+    : resolvedSessionView === SESSION_VIEW_FILTER.active
+      ? "Start a new session or switch to All."
+      : resolvedSessionView === SESSION_VIEW_FILTER.historic
+        ? "Historic sessions appear after they finish."
+        : "Create a session to get started.";
+
   /* ── Render session items ── */
   function renderSessionItem(s) {
     return html`
@@ -783,8 +869,7 @@ export function SessionList({
           `}
           <button
             class="btn btn-primary btn-sm"
-            onClick=${() =>
-              createSession(defaultType ? { type: defaultType } : {})}
+            onClick=${handleCreateSession}
           >
             + New
           </button>
@@ -800,6 +885,27 @@ export function SessionList({
         />
       </div>
 
+      <div style="display:flex;gap:6px;flex-wrap:wrap;padding:0 10px 8px;">
+        <button
+          class="btn btn-sm ${resolvedSessionView === SESSION_VIEW_FILTER.all ? "btn-primary" : "btn-ghost"}"
+          onClick=${() => setSessionView(SESSION_VIEW_FILTER.all)}
+        >
+          All (${allCount})
+        </button>
+        <button
+          class="btn btn-sm ${resolvedSessionView === SESSION_VIEW_FILTER.active ? "btn-primary" : "btn-ghost"}"
+          onClick=${() => setSessionView(SESSION_VIEW_FILTER.active)}
+        >
+          Active (${activeCount})
+        </button>
+        <button
+          class="btn btn-sm ${resolvedSessionView === SESSION_VIEW_FILTER.historic ? "btn-primary" : "btn-ghost"}"
+          onClick=${() => setSessionView(SESSION_VIEW_FILTER.historic)}
+        >
+          Historic (${historicCount})
+        </button>
+      </div>
+
       <div class="session-list-scroll">
         ${active.length > 0 &&
         html`
@@ -821,18 +927,15 @@ export function SessionList({
           <div class="session-empty">
             <div class="session-empty-icon">${resolveIcon(":chat:")}</div>
             <div class="session-empty-text">
-              ${hasSearch ? "No matching sessions" : "No sessions yet"}
+              ${emptyTitle}
               <div class="session-empty-subtext">
-                ${hasSearch
-                  ? "Try a different keyword or clear the search."
-                  : "Create a session to get started."}
+                ${emptyHint}
               </div>
             </div>
             <div class="session-empty-actions">
               <button
                 class="btn btn-primary btn-sm"
-                onClick=${() =>
-                  createSession(defaultType ? { type: defaultType } : {})}
+                onClick=${handleCreateSession}
               >
                 + New Session
               </button>

package/ui/modules/voice-client.js

@@ -140,6 +140,19 @@ export async function startVoiceSession(options = {}) {
     const tokenData = await tokenRes.json();
 
     // 2. Get microphone
+    const mediaDevices = navigator?.mediaDevices;
+    if (!mediaDevices?.getUserMedia) {
+      const host = String(globalThis.location?.hostname || "").toLowerCase();
+      const localhostLike =
+        host === "localhost" || host === "127.0.0.1" || host === "::1";
+      if (!globalThis.isSecureContext && !localhostLike) {
+        throw new Error(
+          "Microphone access requires HTTPS (or localhost). Open the UI via the Cloudflare HTTPS URL or localhost.",
+        );
+      }
+      throw new Error("Microphone API unavailable in this browser/runtime.");
+    }
+
     _mediaStream = await navigator.mediaDevices.getUserMedia({
       audio: {
         echoCancellation: true,

package/ui/setup.html

@@ -344,6 +344,28 @@
     .success-banner h2 { color: var(--success); margin-bottom: 8px; }
     .success-banner p { color: var(--text-secondary); font-size: 0.9rem; }
 
+    /* ── Inline icon helpers (shared with iconText output) ───────────── */
+    .icon-text {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35em;
+      flex-wrap: wrap;
+    }
+    .icon-inline {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1em;
+      height: 1em;
+      line-height: 1;
+      vertical-align: middle;
+    }
+    .icon-inline svg {
+      width: 1em;
+      height: 1em;
+      display: block;
+    }
+
     /* ── Profile Cards ───────────────────────────────────────────────── */
     .profile-cards {
       display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
@@ -489,6 +511,7 @@
 import { h, render } from "preact";
 import { useState, useEffect, useRef } from "preact/hooks";
 import htm from "htm";
+import { iconText } from "./modules/icon-utils.js";
 
 const html = htm.bind(h);
 
@@ -679,6 +702,19 @@ function App() {
   const [whatsappEnabled, setWhatsappEnabled] = useState(false);
   const [telegramIntervalMin, setTelegramIntervalMin] = useState(10);
   const [orchestratorScript, setOrchestratorScript] = useState("");
+  // Voice assistant
+  const [voiceEnabled, setVoiceEnabled] = useState(true);
+  const [voiceProvider, setVoiceProvider] = useState("auto");
+  const [voiceModel, setVoiceModel] = useState("gpt-4o-realtime-preview-2024-12-17");
+  const [voiceVisionModel, setVoiceVisionModel] = useState("gpt-4.1-mini");
+  const [voiceId, setVoiceId] = useState("alloy");
+  const [voiceTurnDetection, setVoiceTurnDetection] = useState("server_vad");
+  const [voiceFallbackMode, setVoiceFallbackMode] = useState("browser");
+  const [voiceDelegateExecutor, setVoiceDelegateExecutor] = useState("codex-sdk");
+  const [openaiRealtimeApiKey, setOpenaiRealtimeApiKey] = useState("");
+  const [azureOpenaiRealtimeEndpoint, setAzureOpenaiRealtimeEndpoint] = useState("");
+  const [azureOpenaiRealtimeApiKey, setAzureOpenaiRealtimeApiKey] = useState("");
+  const [azureOpenaiRealtimeDeployment, setAzureOpenaiRealtimeDeployment] = useState("gpt-4o-realtime-preview");
 
   const getWorkflowProfileById = (profileId, profileList = workflowProfiles) =>
     (profileList || []).find((profile_) => profile_.id === profileId) || null;
@@ -866,6 +902,18 @@ function App() {
       }
       if (d.bosunHome)       setBosunHome(d.bosunHome);
       if (d.workspacesDir)   setWorkspacesDir(d.workspacesDir);
+      if (d.voiceEnabled !== undefined) { setVoiceEnabled(d.voiceEnabled !== false); }
+      if (d.voiceProvider) { setVoiceProvider(d.voiceProvider); }
+      if (d.voiceModel) { setVoiceModel(d.voiceModel); }
+      if (d.voiceVisionModel) { setVoiceVisionModel(d.voiceVisionModel); }
+      if (d.voiceId) { setVoiceId(d.voiceId); }
+      if (d.voiceTurnDetection) { setVoiceTurnDetection(d.voiceTurnDetection); }
+      if (d.voiceFallbackMode) { setVoiceFallbackMode(d.voiceFallbackMode); }
+      if (d.voiceDelegateExecutor) { setVoiceDelegateExecutor(d.voiceDelegateExecutor); }
+      if (d.openaiRealtimeApiKey) { setOpenaiRealtimeApiKey(d.openaiRealtimeApiKey); }
+      if (d.azureOpenaiRealtimeEndpoint) { setAzureOpenaiRealtimeEndpoint(d.azureOpenaiRealtimeEndpoint); }
+      if (d.azureOpenaiRealtimeApiKey) { setAzureOpenaiRealtimeApiKey(d.azureOpenaiRealtimeApiKey); }
+      if (d.azureOpenaiRealtimeDeployment) { setAzureOpenaiRealtimeDeployment(d.azureOpenaiRealtimeDeployment); }
 
       // Pre-fill repos from existing config (slugs preferred)
       if (statusData.existingConfig?.repos?.length) {
@@ -877,6 +925,19 @@ function App() {
       // ── Pre-fill from existing .env ──────────────────────────────────────
       const env = statusData.existingEnv || {};
       let envLoaded = false;
+      const existingVoice = statusData.existingConfig?.voice || {};
+      if (existingVoice.enabled != null) { setVoiceEnabled(existingVoice.enabled !== false); envLoaded = true; }
+      if (existingVoice.provider) { setVoiceProvider(String(existingVoice.provider)); envLoaded = true; }
+      if (existingVoice.model) { setVoiceModel(String(existingVoice.model)); envLoaded = true; }
+      if (existingVoice.visionModel) { setVoiceVisionModel(String(existingVoice.visionModel)); envLoaded = true; }
+      if (existingVoice.voiceId) { setVoiceId(String(existingVoice.voiceId)); envLoaded = true; }
+      if (existingVoice.turnDetection) { setVoiceTurnDetection(String(existingVoice.turnDetection)); envLoaded = true; }
+      if (existingVoice.fallbackMode) { setVoiceFallbackMode(String(existingVoice.fallbackMode)); envLoaded = true; }
+      if (existingVoice.delegateExecutor) { setVoiceDelegateExecutor(String(existingVoice.delegateExecutor)); envLoaded = true; }
+      if (existingVoice.openaiApiKey) { setOpenaiRealtimeApiKey(String(existingVoice.openaiApiKey)); envLoaded = true; }
+      if (existingVoice.azureEndpoint) { setAzureOpenaiRealtimeEndpoint(String(existingVoice.azureEndpoint)); envLoaded = true; }
+      if (existingVoice.azureApiKey) { setAzureOpenaiRealtimeApiKey(String(existingVoice.azureApiKey)); envLoaded = true; }
+      if (existingVoice.azureDeployment) { setAzureOpenaiRealtimeDeployment(String(existingVoice.azureDeployment)); envLoaded = true; }
       if (env.BOSUN_HOME) { setBosunHome(env.BOSUN_HOME); envLoaded = true; }
       if (env.BOSUN_WORKSPACES_DIR) { setWorkspacesDir(env.BOSUN_WORKSPACES_DIR); setWorkspacesDirCustomized(true); envLoaded = true; }
       if (env.PROJECT_NAME) { setProjectName(env.PROJECT_NAME); envLoaded = true; }
@@ -981,6 +1042,19 @@ function App() {
       if (env.WHATSAPP_ENABLED) { setWhatsappEnabled(env.WHATSAPP_ENABLED === "true"); envLoaded = true; }
       if (env.TELEGRAM_INTERVAL_MIN) { setTelegramIntervalMin(Number(env.TELEGRAM_INTERVAL_MIN) || 10); envLoaded = true; }
       if (env.ORCHESTRATOR_SCRIPT) { setOrchestratorScript(env.ORCHESTRATOR_SCRIPT); envLoaded = true; }
+      // Voice settings
+      if (env.VOICE_ENABLED !== undefined) { setVoiceEnabled(env.VOICE_ENABLED !== "false"); envLoaded = true; }
+      if (env.VOICE_PROVIDER) { setVoiceProvider(env.VOICE_PROVIDER); envLoaded = true; }
+      if (env.VOICE_MODEL) { setVoiceModel(env.VOICE_MODEL); envLoaded = true; }
+      if (env.VOICE_VISION_MODEL) { setVoiceVisionModel(env.VOICE_VISION_MODEL); envLoaded = true; }
+      if (env.VOICE_ID) { setVoiceId(env.VOICE_ID); envLoaded = true; }
+      if (env.VOICE_TURN_DETECTION) { setVoiceTurnDetection(env.VOICE_TURN_DETECTION); envLoaded = true; }
+      if (env.VOICE_FALLBACK_MODE) { setVoiceFallbackMode(env.VOICE_FALLBACK_MODE); envLoaded = true; }
+      if (env.VOICE_DELEGATE_EXECUTOR) { setVoiceDelegateExecutor(env.VOICE_DELEGATE_EXECUTOR); envLoaded = true; }
+      if (env.OPENAI_REALTIME_API_KEY) { setOpenaiRealtimeApiKey(env.OPENAI_REALTIME_API_KEY); envLoaded = true; }
+      if (env.AZURE_OPENAI_REALTIME_ENDPOINT) { setAzureOpenaiRealtimeEndpoint(env.AZURE_OPENAI_REALTIME_ENDPOINT); envLoaded = true; }
+      if (env.AZURE_OPENAI_REALTIME_API_KEY) { setAzureOpenaiRealtimeApiKey(env.AZURE_OPENAI_REALTIME_API_KEY); envLoaded = true; }
+      if (env.AZURE_OPENAI_REALTIME_DEPLOYMENT) { setAzureOpenaiRealtimeDeployment(env.AZURE_OPENAI_REALTIME_DEPLOYMENT); envLoaded = true; }
       // Multi-workspace: load workspaces[] from existing config
       if (statusData.existingConfig?.workspaces?.length > 0) {
         setMultiWorkspaceEnabled(true);
@@ -1235,6 +1309,19 @@ function App() {
           copilotEnableAskUser,
           copilotEnableAllMcpTools,
           copilotMcpConfig,
+          // Voice assistant
+          voiceEnabled,
+          voiceProvider,
+          voiceModel,
+          voiceVisionModel,
+          voiceId,
+          voiceTurnDetection,
+          voiceFallbackMode,
+          voiceDelegateExecutor,
+          openaiRealtimeApiKey,
+          azureOpenaiRealtimeEndpoint,
+          azureOpenaiRealtimeApiKey,
+          azureOpenaiRealtimeDeployment,
           // Infrastructure
           containerEnabled,
           containerRuntime,
@@ -1531,7 +1618,7 @@ function App() {
       <div class="setup-container">
         <div class="step-panel">
           <div class="success-banner">
-            <div class="icon">:star:</div>
+            <div class="icon">${iconText(":star:")}</div>
             <h2>Setup Complete!</h2>
             <p>Bosun is configured and ready to go.</p>
             <p style="margin-top:12px;font-size:0.8rem;color:var(--text-dim)">
@@ -1596,7 +1683,7 @@ function App() {
           const icon = item.installed ? ":check:" : item.required ? ":close:" : ":alert:";
           return html`
             <li class="prereq-item ${statusClass}">
-              <span class="icon">${icon}</span>
+              <span class="icon">${iconText(icon)}</span>
               <span class="name">${item.label}${!item.required ? " (optional)" : ""}</span>
               <span class="version">${item.version || (item.installed ? "found" : "not found")}</span>
             </li>
@@ -1604,7 +1691,7 @@ function App() {
         })}
         ${prereqs.gh && !prereqs.gh.authenticated && prereqs.gh.installed ? html`
           <li class="prereq-item warn">
-            <span class="icon">:alert:</span>
+            <span class="icon">${iconText(":alert:")}</span>
             <span class="name">GitHub CLI not authenticated</span>
             <span class="version">Run: gh auth login</span>
           </li>
@@ -1655,12 +1742,12 @@ function App() {
 
     <div class="profile-cards">
       <div class="profile-card ${profile === "standard" ? "selected" : ""}" onclick=${() => setProfile("standard")}>
-        <div class="icon">:zap:</div>
+        <div class="icon">${iconText(":zap:")}</div>
         <h4>Standard</h4>
         <p>Sensible defaults with primary & backup executors. Best for most users.</p>
       </div>
       <div class="profile-card ${profile === "advanced" ? "selected" : ""}" onclick=${() => setProfile("advanced")}>
-        <div class="icon">:settings:</div>
+        <div class="icon">${iconText(":settings:")}</div>
         <h4>Advanced</h4>
         <p>Full control over executors, failover, distribution weights, and all settings.</p>
       </div>
@@ -1690,7 +1777,7 @@ function App() {
     <p class="step-desc">Configure which AI coding agents bosun will use. You can add multiple executors with weighted distribution.</p>
 
     <div style="background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.25);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:0.8rem;line-height:1.6">
-      <strong>:lock: No API key required in most cases.</strong>
+      <strong>${iconText(":lock: No API key required in most cases.")}</strong>
       GitHub Copilot, Codex CLI, and Claude Code all support OAuth — just run
       <code style="font-family:var(--font-mono);color:var(--accent-light)">gh auth login</code>,
       <code style="font-family:var(--font-mono);color:var(--accent-light)">codex auth login</code>, or
@@ -1710,10 +1797,11 @@ function App() {
           ? configuredModelOptions
           : getModelsForExecutor(ex.executor);
       const authMode = ex.authMode || "oauth";
+      const executorHeading = `${ex.enabled === false ? ":dot:" : ex.role === "primary" ? ":dot:" : ":dot:"} Executor ${i + 1}: ${ex.name}`;
       return html`
       <div class="executor-card">
         <div class="executor-card-header">
-          <h4>${ex.enabled === false ? ":dot:" : ex.role === "primary" ? ":dot:" : ":dot:"} Executor ${i + 1}: ${ex.name}</h4>
+          <h4>${iconText(executorHeading)}</h4>
           ${executors.length > 1 && html`
             <button class="btn btn-sm btn-danger" onclick=${() => removeExecutor(i)}>Remove</button>
           `}
@@ -1798,7 +1886,7 @@ function App() {
                     return html`
                       <div class="connection-card">
                         <div class="connection-card-header">
-                          <span class="connection-label">${isPrimary ? ":star: Primary" : `:globe: Profile ${ci + 1}`}: ${conn.name || (isPrimary ? "default" : "(unnamed)")}</span>
+                          <span class="connection-label">${iconText(`${isPrimary ? ":star: Primary" : `:globe: Profile ${ci + 1}`}: ${conn.name || (isPrimary ? "default" : "(unnamed)")}`)}</span>
                           <button class="btn btn-sm btn-danger"
                             onclick=${() => removeConnection(i, ci)}>✕ Remove</button>
                         </div>
@@ -1945,7 +2033,7 @@ function App() {
 
       ${!multiWorkspaceEnabled && html`
         <div style="background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:16px;font-size:0.78rem;color:var(--text-secondary)">
-          :folder: Repos will be cloned into:
+          ${iconText(":folder: Repos will be cloned into:")}
           <code style="font-family:var(--font-mono);color:var(--accent-light);margin-left:4px">${cloneRoot}/${"<repo-name>"}</code>
         </div>
       `}
@@ -2211,12 +2299,12 @@ function App() {
     ${/* ── GitHub App installation callout ── */ ""}
     <div style="background:rgba(56,139,253,.07);border:1px solid rgba(56,139,253,.25);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px">
       <div style="display:flex;align-items:flex-start;gap:10px">
-        <span style="font-size:1.3em;line-height:1.2;flex-shrink:0">:box:</span>
+        <span style="font-size:1.3em;line-height:1.2;flex-shrink:0">${iconText(":box:")}</span>
         <div style="flex:1;min-width:0">
           <div style="font-weight:600;font-size:0.9rem;color:var(--accent-light);margin-bottom:4px">GitHub App — Bosun[VE]</div>
           ${oauthStatus === "received"
             ? html`<div style="color:#4ade80;font-size:0.82rem">
-                :check: GitHub App authorized!
+                ${iconText(":check: GitHub App authorized!")}
                 ${oauthInstallationId ? html` (Installation <code style="font-family:var(--font-mono)">${oauthInstallationId}</code>)` : null}
               </div>`
             : html`<div style="font-size:0.82rem;color:var(--text-secondary);line-height:1.5">
@@ -2226,7 +2314,7 @@ function App() {
                 <div style="margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap">
                   <a href="https://github.com/apps/bosun-ve" target="_blank" rel="noopener"
                      style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--accent);color:#fff;border-radius:5px;font-size:0.8rem;font-weight:600;text-decoration:none">
-                    :link: Install from GitHub Marketplace
+                    ${iconText(":link: Install from GitHub Marketplace")}
                   </a>
                   <span style="font-size:0.75rem;color:var(--text-dim)">
                     <span class="spinner" style="width:10px;height:10px;border-width:2px;vertical-align:middle;margin-right:4px"></span>
@@ -2278,7 +2366,7 @@ function App() {
         <div style="border:1px solid var(--border-primary);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden">
           <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:var(--bg-input);user-select:none"
             onclick=${() => setOpen((v) => !v)}>
-            <span style="font-weight:600;font-size:0.88rem">${title}</span>
+            <span style="font-weight:600;font-size:0.88rem">${iconText(title)}</span>
             <span style="color:var(--text-dim);font-size:0.8rem">${open ? "▲" : "▼"}</span>
           </div>
           ${open && html`<div style="padding:16px">${children}</div>`}
@@ -2594,6 +2682,135 @@ function App() {
         </div>
       <//>
 
+      <${Section} title=":mic: Voice Assistant">
+        <div class="form-group">
+          <label style="display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none">
+            <input type="checkbox" checked=${voiceEnabled}
+              onchange=${(e) => setVoiceEnabled(e.target.checked)}
+              style="width:auto;padding:0;margin:0;accent-color:var(--accent);cursor:pointer" />
+            Enable Voice Mode in the UI
+          </label>
+          <div class="hint">Allows live voice/video calls from chat. Tier 2 browser fallback works without cloud keys.</div>
+        </div>
+        ${voiceEnabled && html`
+          <div class="executor-grid">
+            <div class="form-group">
+              <label>Voice Provider</label>
+              <select value=${voiceProvider} onchange=${(e) => setVoiceProvider(e.target.value)}>
+                <option value="auto">Auto Detect</option>
+                <option value="openai">OpenAI Realtime</option>
+                <option value="azure">Azure OpenAI Realtime</option>
+                <option value="claude">Claude (fallback + Claude vision)</option>
+                <option value="gemini">Gemini (fallback + Gemini vision)</option>
+                <option value="fallback">Browser Fallback Only</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Voice Persona</label>
+              <select value=${voiceId} onchange=${(e) => setVoiceId(e.target.value)}>
+                <option value="alloy">alloy</option>
+                <option value="ash">ash</option>
+                <option value="ballad">ballad</option>
+                <option value="coral">coral</option>
+                <option value="echo">echo</option>
+                <option value="fable">fable</option>
+                <option value="nova">nova</option>
+                <option value="onyx">onyx</option>
+                <option value="sage">sage</option>
+                <option value="shimmer">shimmer</option>
+                <option value="verse">verse</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Realtime Voice Model</label>
+              <input
+                type="text"
+                value=${voiceModel}
+                oninput=${(e) => setVoiceModel(e.target.value)}
+                placeholder="gpt-4o-realtime-preview-2024-12-17"
+              />
+            </div>
+            <div class="form-group">
+              <label>Vision Model</label>
+              <input
+                type="text"
+                value=${voiceVisionModel}
+                oninput=${(e) => setVoiceVisionModel(e.target.value)}
+                placeholder="gpt-4.1-mini"
+              />
+            </div>
+            <div class="form-group">
+              <label>Turn Detection</label>
+              <select value=${voiceTurnDetection} onchange=${(e) => setVoiceTurnDetection(e.target.value)}>
+                <option value="server_vad">server_vad</option>
+                <option value="semantic_vad">semantic_vad</option>
+                <option value="none">none</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Fallback Mode</label>
+              <select value=${voiceFallbackMode} onchange=${(e) => setVoiceFallbackMode(e.target.value)}>
+                <option value="browser">browser</option>
+                <option value="disabled">disabled</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Delegate Executor</label>
+              <select value=${voiceDelegateExecutor} onchange=${(e) => setVoiceDelegateExecutor(e.target.value)}>
+                <option value="codex-sdk">codex-sdk</option>
+                <option value="copilot-sdk">copilot-sdk</option>
+                <option value="claude-sdk">claude-sdk</option>
+                <option value="gemini-sdk">gemini-sdk</option>
+                <option value="opencode-sdk">opencode-sdk</option>
+              </select>
+            </div>
+          </div>
+          ${(voiceProvider === "auto" || voiceProvider === "openai") && html`
+            <div class="form-group">
+              <label>OpenAI Realtime API Key</label>
+              <input
+                type="password"
+                value=${openaiRealtimeApiKey}
+                oninput=${(e) => setOpenaiRealtimeApiKey(e.target.value)}
+                placeholder="Optional - defaults to OPENAI_API_KEY"
+              />
+              <div class="hint">Leave blank to use OPENAI_API_KEY.</div>
+            </div>
+          `}
+          ${(voiceProvider === "auto" || voiceProvider === "azure") && html`
+            <div class="executor-grid">
+              <div class="form-group">
+                <label>Azure Realtime Endpoint</label>
+                <input
+                  type="text"
+                  value=${azureOpenaiRealtimeEndpoint}
+                  oninput=${(e) => setAzureOpenaiRealtimeEndpoint(e.target.value)}
+                  placeholder="https://<resource>.openai.azure.com"
+                />
+              </div>
+              <div class="form-group">
+                <label>Azure Realtime Deployment</label>
+                <input
+                  type="text"
+                  value=${azureOpenaiRealtimeDeployment}
+                  oninput=${(e) => setAzureOpenaiRealtimeDeployment(e.target.value)}
+                  placeholder="gpt-4o-realtime-preview"
+                />
+              </div>
+            </div>
+            <div class="form-group">
+              <label>Azure Realtime API Key</label>
+              <input
+                type="password"
+                value=${azureOpenaiRealtimeApiKey}
+                oninput=${(e) => setAzureOpenaiRealtimeApiKey(e.target.value)}
+                placeholder="Optional - defaults to AZURE_OPENAI_API_KEY"
+              />
+            </div>
+          `}
+        `}
+      <//>
+
       <${Section} title=":hammer: Infrastructure">
         <div class="form-group">
           <label style="display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none">
@@ -2698,6 +2915,14 @@ function App() {
           </tr>
           <tr><th>Workflow Auto-Install</th><td>${workflowAutoInstall ? "Enabled" : "Disabled"}</td></tr>
           <tr><th>Telegram</th><td>${telegramEnabled && telegramToken ? "Configured" : "Skipped"}</td></tr>
+          <tr>
+            <th>Voice</th>
+            <td>
+              ${voiceEnabled
+                ? `${voiceProvider} (${voiceFallbackMode} fallback)`
+                : "Disabled"}
+            </td>
+          </tr>
           ${profile === "advanced" ? html`
             <tr><th>Max Parallel</th><td>${maxParallel}</td></tr>
             <tr><th>Max Retries</th><td>${maxRetries}</td></tr>
@@ -2765,7 +2990,7 @@ function App() {
       `}
       ${oauthStatus === "received" && html`
         <div style="background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.35);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:0.85rem;color:#4ade80;display:flex;align-items:flex-start;gap:10px">
-          <span style="font-size:1.2em;line-height:1">:check:</span>
+          <span style="font-size:1.2em;line-height:1">${iconText(":check:")}</span>
           <div>
             <strong>GitHub App authorized!</strong>
             ${oauthInstallationId && html` Installation ID: <code style="font-family:var(--font-mono);font-size:0.8em;color:#86efac">${oauthInstallationId}</code>.`}

package/ui/styles/sessions.css

@@ -1218,6 +1218,81 @@
   background: rgba(255, 255, 255, 0.2);
 }
 
+/* ─── Thinking Group — collapsed view of consecutive trace events ─── */
+.thinking-group {
+  align-self: stretch;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  margin: 2px 0 4px;
+  overflow: hidden;
+}
+
+.thinking-group.has-errors {
+  border-color: rgba(239, 68, 68, 0.35);
+}
+
+.thinking-group-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.thinking-group-head:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.thinking-group-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid rgba(245, 158, 11, 0.35);
+  background: rgba(245, 158, 11, 0.12);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: #fde68a;
+  flex-shrink: 0;
+}
+
+.thinking-group-badge svg {
+  width: 10px;
+  height: 10px;
+  opacity: 0.85;
+}
+
+.thinking-group-label {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-secondary);
+}
+
+.thinking-group-chevron {
+  flex-shrink: 0;
+  font-size: 13px;
+  color: var(--text-hint);
+}
+
+.thinking-group-body {
+  border-top: 1px solid var(--border);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 /* Subtle entrance for bubbles — only the last few get the animation
    (content-visibility: auto on older bubbles skips them for free) */
 .chat-bubble:last-child,

package/ui/tabs/agents.js

@@ -87,6 +87,28 @@ function formatTaskOptionLabel(task) {
   return `#${numberToken} ${task?.title || "(untitled task)"}`;
 }
 
+function normalizeDispatchTaskChoices(tasks) {
+  if (!Array.isArray(tasks)) return [];
+  const deduped = [];
+  const seenTaskIds = new Set();
+  for (const task of tasks) {
+    if (!task || typeof task !== "object") continue;
+    const status = String(task?.status || "").toLowerCase();
+    const dispatchable =
+      task?.draft === true || status === "draft" || status === "todo";
+    if (!dispatchable) continue;
+    const taskId = String(task?.id ?? task?.taskId ?? "").trim();
+    if (!taskId || seenTaskIds.has(taskId)) continue;
+    seenTaskIds.add(taskId);
+    deduped.push({ ...task, id: taskId });
+  }
+  return deduped.sort((a, b) => taskSortScore(b) - taskSortScore(a));
+}
+
+function fleetSlotKey(index) {
+  return `slot-${index}`;
+}
+
 /* ─── Workspace Viewer Modal ─── */
 function WorkspaceViewer({ agent, onClose }) {
   const [logText, setLogText] = useState("Loading…");
@@ -958,26 +980,34 @@ function DispatchSection({ freeSlots, inputRef, className = "" }) {
   const [dispatching, setDispatching] = useState(false);
   const [taskChoices, setTaskChoices] = useState([]);
   const [tasksLoading, setTasksLoading] = useState(false);
+  const latestTaskRequestRef = useRef(0);
+  const mountedRef = useRef(true);
 
   const canDispatch = Boolean(taskId.trim() || prompt.trim());
 
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
   const loadDispatchTasks = useCallback(() => {
+    const requestId = latestTaskRequestRef.current + 1;
+    latestTaskRequestRef.current = requestId;
     setTasksLoading(true);
     apiFetch("/api/tasks?limit=1000", { _silent: true })
       .then((res) => {
-        const tasks = Array.isArray(res?.data) ? res.data : [];
-        const choices = tasks
-          .filter((task) => {
-            const status = String(task?.status || "").toLowerCase();
-            return task?.draft === true || status === "draft" || status === "todo";
-          })
-          .sort((a, b) => taskSortScore(b) - taskSortScore(a));
+        if (!mountedRef.current || latestTaskRequestRef.current !== requestId) return;
+        const choices = normalizeDispatchTaskChoices(res?.data);
         setTaskChoices(choices);
       })
       .catch(() => {
+        if (!mountedRef.current || latestTaskRequestRef.current !== requestId) return;
         setTaskChoices([]);
       })
       .finally(() => {
+        if (!mountedRef.current || latestTaskRequestRef.current !== requestId) return;
         setTasksLoading(false);
       });
   }, []);
@@ -1045,8 +1075,8 @@ function DispatchSection({ freeSlots, inputRef, className = "" }) {
             <option value="">
               ${tasksLoading ? "Loading tasks…" : "Select backlog or draft task"}
             </option>
-            ${taskChoices.map((task) => html`
-              <option key=${task.id} value=${task.id}>
+            ${taskChoices.map((task, i) => html`
+              <option key=${`${task.id}-${i}`} value=${task.id}>
                 ${formatTaskOptionLabel(task)}
               </option>
             `)}
@@ -1355,7 +1385,7 @@ export function AgentsTab() {
                   const st = slot ? slot.status || "busy" : "idle";
                   return html`
                     <div
-                      key=${i}
+                      key=${fleetSlotKey(i)}
                       class="slot-cell slot-${st}"
                       title=${slot
                         ? `${slot.taskTitle || slot.taskId} (${st})`
@@ -1387,8 +1417,8 @@ export function AgentsTab() {
                 : "No active slots"}
             </div>
             ${slots.length
-              ? slots.map(
-                  (slot, i) => html`
+                ? slots.map(
+                    (slot, i) => html`
                     <div
                       key=${slot?.taskId || slot?.sessionId || `slot-${i}`}
                       class="task-card fleet-agent-card ${expandedSlot === i

package/ui-server.mjs

@@ -9022,6 +9022,7 @@ async function handleApi(req, res, url) {
         available: availability.available,
         tier: availability.tier,
         provider: availability.provider,
+        reason: availability.reason || "",
         voiceId: config.voiceId,
         turnDetection: config.turnDetection,
         model: config.model,