bosun 0.36.0 → 0.36.2

package/ui/styles/components.css

@@ -710,6 +710,53 @@ select.input {
   line-height: 1.5;
 }
 
+.repo-select-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.repo-auto-label {
+  font-size: 13px;
+  color: var(--text-secondary, #aaa);
+  padding: 4px 2px;
+}
+
+.repo-auto-label strong {
+  color: var(--text-primary, #fff);
+}
+
+.repo-checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.repo-checkboxes-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-hint, #888);
+  margin-bottom: 2px;
+}
+
+.repo-checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-primary, #fff);
+  cursor: pointer;
+  padding: 3px 2px;
+}
+
+.repo-checkbox-item input[type="checkbox"] {
+  accent-color: var(--accent, #7c6af7);
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+
 .create-task-advanced-toggle {
   font-size: 12px;
   letter-spacing: 0.02em;

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…");
@@ -445,7 +467,7 @@ function WorkspaceViewer({ agent, onClose }) {
               ${sessionInfo.preview &&
                 html`<div class="meta-text mt-xs">${truncate(sessionInfo.preview, 120)}</div>`}
               <button class="btn btn-ghost btn-sm mt-sm" onClick=${() => setActiveTab("stream")}>
-                ${iconText("💬 View Stream")}
+                ${iconText(":chat: View Stream")}
               </button>
             </div>
           `}
@@ -565,7 +587,7 @@ function WorkspaceViewer({ agent, onClose }) {
                   setStreamSnapshot({ events: [], fileAccess: null, capturedAt: null });
                 }
               }}>
-                ${streamPaused ? "▶ Resume" : "⏸ Pause"}
+                ${streamPaused ? ":play: Resume" : ":pause: Pause"}
               </button>
               <button
                 class="btn btn-ghost btn-sm"
@@ -618,7 +640,7 @@ function WorkspaceViewer({ agent, onClose }) {
             `}
           ${filteredEvents.length === 0 &&
             html`<div class="stream-empty">
-              <div class="stream-empty-icon">${resolveIcon("🛰")}</div>
+              <div class="stream-empty-icon">${resolveIcon(":server:")}</div>
               <div class="stream-empty-text">
                 ${toolEvents.length === 0 ? "No tool events yet" : "No events match filters"}
               </div>
@@ -751,7 +773,7 @@ function WorkspaceViewer({ agent, onClose }) {
             html`<div class="meta-text mt-xs">Paused at ${snapshotMeta}</div>`}
           ${filteredFiles.length === 0 &&
             html`<div class="stream-empty">
-              <div class="stream-empty-icon">${resolveIcon("📂")}</div>
+              <div class="stream-empty-icon">${resolveIcon(":folder:")}</div>
               <div class="stream-empty-text">
                 ${summaryFiles.length === 0 ? "No file access recorded" : "No files match filters"}
               </div>
@@ -819,7 +841,7 @@ function WorkspaceViewer({ agent, onClose }) {
             ${sessionInfo.preview &&
               html`<div class="meta-text mt-xs">${truncate(sessionInfo.preview, 140)}</div>`}
             <button class="btn btn-ghost btn-sm mt-sm" onClick=${() => setActiveTab("stream")}>
-              ${iconText("💬 View Stream")}
+              ${iconText(":chat: View Stream")}
             </button>
           </div>
         `}
@@ -902,15 +924,15 @@ function WorkspaceViewer({ agent, onClose }) {
             <button
               class="session-detail-tab ${activeTab === "stream" ? "active" : ""}"
               onClick=${() => setActiveTab("stream")}
-            >${iconText("💬 Stream")}</button>
+            >${iconText(":chat: Stream")}</button>
             <button
               class="session-detail-tab ${activeTab === "changes" ? "active" : ""}"
               onClick=${() => setActiveTab("changes")}
-            >${iconText("📝 Changes")}</button>
+            >${iconText(":edit: Changes")}</button>
             <button
               class="session-detail-tab ${activeTab === "logs" ? "active" : ""}"
               onClick=${() => setActiveTab("logs")}
-            >${iconText("📄 Logs")}</button>
+            >${iconText(":file: Logs")}</button>
           </div>
 
           <div class="workspace-body">
@@ -920,7 +942,7 @@ function WorkspaceViewer({ agent, onClose }) {
                 ? html`<${ChatView} sessionId=${sessionId} readOnly=${true} />`
                 : html`
                     <div class="chat-view chat-empty-state">
-                      <div class="session-empty-icon">${resolveIcon("💬")}</div>
+                      <div class="session-empty-icon">${resolveIcon(":chat:")}</div>
                       <div class="session-empty-text">No session stream available</div>
                     </div>
                   `}
@@ -938,12 +960,12 @@ function WorkspaceViewer({ agent, onClose }) {
               onInput=${(e) => setSteerInput(e.target.value)}
               onKeyDown=${(e) => { if (e.key === "Enter") { e.preventDefault(); handleSteer(); } }}
             />
-            <button class="btn btn-primary btn-sm" onClick=${handleSteer}>${resolveIcon("🎯")}</button>
+            <button class="btn btn-primary btn-sm" onClick=${handleSteer}>${resolveIcon(":target:")}</button>
             <button
               class="btn btn-danger btn-sm"
               disabled=${agent.index == null}
               onClick=${handleStop}
-            >${iconText("⛔ Stop")}</button>
+            >${iconText(":ban: Stop")}</button>
           </div>
         </div>
       </div>
@@ -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>
             `)}
@@ -1065,7 +1095,7 @@ function DispatchSection({ freeSlots, inputRef, className = "" }) {
           disabled=${!canDispatch || dispatching}
           onClick=${handleDispatch}
         >
-          ${dispatching ? "Dispatching…" : iconText("🚀 Dispatch")}
+          ${dispatching ? "Dispatching…" : iconText(":rocket: Dispatch")}
         </button>
       </div>
     <//>
@@ -1322,7 +1352,7 @@ export function AgentsTab() {
 
           <div class="fleet-quick-actions">
             <button class="btn btn-primary btn-sm" onClick=${handleFocusDispatch}>
-              ${iconText("🚀 Dispatch")}
+              ${iconText(":rocket: Dispatch")}
             </button>
             <button class="btn btn-secondary btn-sm" onClick=${handleFleetRefresh}>
               ↻ Refresh
@@ -1331,7 +1361,7 @@ export function AgentsTab() {
               class="btn btn-ghost btn-sm"
               onClick=${() => navigateTo("logs")}
             >
-              ${iconText("📄 Logs")}
+              ${iconText(":file: Logs")}
             </button>
           </div>
         <//>
@@ -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
@@ -1468,7 +1498,7 @@ export function AgentsTab() {
                             (slot.taskId || slot.branch || "").slice(0, 12),
                           )}
                       >
-                        ${iconText("📄 Logs")}
+                        ${iconText(":file: Logs")}
                       </button>
                       <button
                         class="btn btn-ghost btn-sm"
@@ -1477,19 +1507,19 @@ export function AgentsTab() {
                             `/steer focus on ${slot.taskTitle || slot.taskId}`,
                           )}
                       >
-                        ${iconText("🎯 Steer")}
+                        ${iconText(":target: Steer")}
                       </button>
                       <button
                         class="btn btn-ghost btn-sm"
                         onClick=${() => openWorkspace(slot, i)}
                       >
-                        ${iconText("🔍 View")}
+                        ${iconText(":search: View")}
                       </button>
                       <button
                         class="btn btn-danger btn-sm"
                         onClick=${() => handleForceStop({ ...slot, index: i })}
                       >
-                        ${iconText("⛔ Stop")}
+                        ${iconText(":ban: Stop")}
                       </button>
                     </div>
                   </div>
@@ -1639,15 +1669,15 @@ function ContextViewer({ sessionId }) {
 
   if (error) {
     return html`<div class="chat-view chat-empty-state">
-      <div class="session-empty-icon" style="color:var(--color-error)">${resolveIcon("⚠️")}</div>
+      <div class="session-empty-icon" style="color:var(--color-error)">${resolveIcon(":alert:")}</div>
       <div class="session-empty-text">${error}</div>
-      <button class="btn btn-primary btn-sm mt-sm" onClick=${() => { setLoading(true); setError(null); fetchContext(); }}>${iconText("🔄 Retry")}</button>
+      <button class="btn btn-primary btn-sm mt-sm" onClick=${() => { setLoading(true); setError(null); fetchContext(); }}>${iconText(":refresh: Retry")}</button>
     </div>`;
   }
 
   if (!ctx?.context) {
     return html`<div class="chat-view chat-empty-state">
-      <div class="session-empty-icon">${resolveIcon("📋")}</div>
+      <div class="session-empty-icon">${resolveIcon(":clipboard:")}</div>
       <div class="session-empty-text">No context available for this session</div>
     </div>`;
   }
@@ -1895,10 +1925,10 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                   </div>
                   <div class="btn-row">
                     <button class="btn btn-ghost btn-sm" onClick=${() => onOpenWorkspace(selectedEntry.slot, selectedEntry.index)}>
-                      ${iconText("🔍 Workspace")}
+                      ${iconText(":search: Workspace")}
                     </button>
                     <button class="btn btn-danger btn-sm" onClick=${() => onForceStop({ ...selectedEntry.slot, index: selectedEntry.index })}>
-                      ${iconText("⛔ Stop")}
+                      ${iconText(":ban: Stop")}
                     </button>
                   </div>
                 </div>
@@ -1906,19 +1936,19 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                   <button
                     class="session-detail-tab ${detailTab === "stream" ? "active" : ""}"
                     onClick=${() => setDetailTab("stream")}
-                  >${iconText("💬 Stream")}</button>
+                  >${iconText(":chat: Stream")}</button>
                   <button
                     class="session-detail-tab ${detailTab === "context" ? "active" : ""}"
                     onClick=${() => setDetailTab("context")}
-                  >${iconText("📋 Context")}</button>
+                  >${iconText(":clipboard: Context")}</button>
                   <button
                     class="session-detail-tab ${detailTab === "diff" ? "active" : ""}"
                     onClick=${() => setDetailTab("diff")}
-                  >${iconText("📝 Diff")}</button>
+                  >${iconText(":edit: Diff")}</button>
                   <button
                     class="session-detail-tab ${detailTab === "logs" ? "active" : ""}"
                     onClick=${() => setDetailTab("logs")}
-                  >${iconText("📄 Logs")}</button>
+                  >${iconText(":file: Logs")}</button>
                 </div>
                 <div class="fleet-session-body">
                   ${detailTab === "stream"
@@ -1926,7 +1956,7 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                       ? html`<${ChatView} sessionId=${sessionId} readOnly=${true} />`
                       : html`
                           <div class="chat-view chat-empty-state">
-                            <div class="session-empty-icon">${resolveIcon("💬")}</div>
+                            <div class="session-empty-icon">${resolveIcon(":chat:")}</div>
                             <div class="session-empty-text">No linked chat session found for this slot</div>
                           </div>
                         `
@@ -1935,7 +1965,7 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                         ? html`<${ContextViewer} sessionId=${contextId} />`
                         : html`
                             <div class="chat-view chat-empty-state">
-                              <div class="session-empty-icon">${resolveIcon("📋")}</div>
+                              <div class="session-empty-icon">${resolveIcon(":clipboard:")}</div>
                               <div class="session-empty-text">No context source available</div>
                             </div>
                           `
@@ -1944,7 +1974,7 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
                           ? html`<${DiffViewer} sessionId=${sessionId} />`
                           : html`
                               <div class="chat-view chat-empty-state">
-                                <div class="session-empty-icon">${resolveIcon("📝")}</div>
+                                <div class="session-empty-icon">${resolveIcon(":edit:")}</div>
                                 <div class="session-empty-text">Diff requires a linked session</div>
                               </div>
                             `
@@ -1955,7 +1985,7 @@ function FleetSessionsPanel({ slots, onOpenWorkspace, onForceStop }) {
               `
             : html`
                 <div class="chat-view chat-empty-state">
-                  <div class="session-empty-icon">${resolveIcon("💬")}</div>
+                  <div class="session-empty-icon">${resolveIcon(":chat:")}</div>
                   <div class="session-empty-text">Select a slot to open full session view</div>
                 </div>
               `}

package/ui/tabs/chat.js

@@ -54,8 +54,7 @@ import { routeParams, setRouteParams } from "../modules/router.js";
 import { ChatView } from "../components/chat-view.js";
 import { apiFetch } from "../modules/api.js";
 import { showToast } from "../modules/state.js";
-import { VoiceMicButton } from "../modules/voice.js";
-import { VoiceOverlay } from "../modules/voice-overlay.js";
+import { VoiceMicButton, requestVoiceModeOpen } from "../modules/voice.js";
 import { iconText, resolveIcon } from "../modules/icon-utils.js";
 import {
   ChatInputToolbar,
@@ -246,8 +245,6 @@ export function ChatTab() {
   const [slashActiveIdx, setSlashActiveIdx] = useState(0);
   const [renamingSessionId, setRenamingSessionId] = useState(null);
   const [sending, setSending] = useState(false);
-  const [voiceModeOpen, setVoiceModeOpen] = useState(false);
-  const [voiceConfig, setVoiceConfig] = useState(null);
   const [isMobile, setIsMobile] = useState(() => {
     try {
       return globalThis.matchMedia?.("(max-width: 768px)")?.matches ?? false;
@@ -307,14 +304,6 @@ export function ChatTab() {
     };
   }, []);
 
-  /* ── Fetch voice config on mount ── */
-  useEffect(() => {
-    fetch("/api/voice/config")
-      .then(r => r.ok ? r.json() : null)
-      .then(cfg => setVoiceConfig(cfg))
-      .catch(() => setVoiceConfig(null));
-  }, []);
-
   /* ── Track mobile viewport to avoid auto-select loops ── */
   useEffect(() => {
     const mq = globalThis.matchMedia?.("(max-width: 768px)");
@@ -536,7 +525,7 @@ export function ChatTab() {
             method: "POST",
             body: JSON.stringify({ command: cmdBase, args: cmdArgs }),
           });
-          const resultText = resp?.result || resp?.data || `✅ SDK command executed: ${cmdBase}`;
+          const resultText = resp?.result || resp?.data || `:check: SDK command executed: ${cmdBase}`;
           if (sessionId) {
             const { sessionMessages } = await import("../components/session-list.js");
             const now = new Date().toISOString();
@@ -560,7 +549,7 @@ export function ChatTab() {
             const msgs = sessionMessages.value || [];
             const userMsg = { id: `cmd-${Date.now()}`, role: "user", content, timestamp: now };
             const resultText = data?.content || data?.error
-              || (data?.readOnly ? `✅ ${cmdBase} — see the relevant tab for details.` : `✅ Command executed: ${cmdBase}`);
+              || (data?.readOnly ? `:check: ${cmdBase} — see the relevant tab for details.` : `:check: Command executed: ${cmdBase}`);
             const sysMsg = { id: `cmd-r-${Date.now()}`, role: "system", content: resultText, timestamp: now };
             sessionMessages.value = [...msgs, userMsg, sysMsg];
           } else {
@@ -702,6 +691,20 @@ export function ChatTab() {
     await createSession({ type: "primary" });
   }
 
+  const openMeetingRoom = useCallback(
+    (call = "voice") => {
+      requestVoiceModeOpen({
+        call: call === "video" ? "video" : "voice",
+        sessionId: sessionId || undefined,
+        initialVisionSource: call === "video" ? "camera" : null,
+        executor: activeAgent.value || undefined,
+        mode: agentMode.value || undefined,
+        model: selectedModel.value || undefined,
+      });
+    },
+    [sessionId],
+  );
+
   /* ── Show/expand sessions: on mobile toggles drawer, on desktop fires rail-expand event ── */
   const handleShowSessions = useCallback(() => {
     if (isMobile) {
@@ -784,13 +787,29 @@ export function ChatTab() {
               <div class="chat-shell-inner">
                 <!-- Sessions toggle: shown on mobile always; on desktop only when rail is collapsed (CSS-controlled) -->
                 <button class="session-drawer-btn session-drawer-btn-rail" onClick=${handleShowSessions}>
-                  ${iconText("☰ Sessions")}
+                  ${iconText(":menu: Sessions")}
                 </button>
                 <div class="chat-shell-title">
                   <div class="chat-shell-name">${sessionTitle}</div>
                   <div class="chat-shell-meta">${sessionMeta || "Session"}</div>
                 </div>
                 <div class="chat-shell-actions">
+                  <button
+                    class="btn btn-ghost btn-sm"
+                    onClick=${() => openMeetingRoom("voice")}
+                    title="Start voice meeting for this session"
+                  >
+                    <span class="btn-icon">${resolveIcon("phone")}</span>
+                    Call
+                  </button>
+                  <button
+                    class="btn btn-ghost btn-sm"
+                    onClick=${() => openMeetingRoom("video")}
+                    title="Start video meeting for this session"
+                  >
+                    <span class="btn-icon">${resolveIcon("camera")}</span>
+                    Video
+                  </button>
                   ${isDesktop &&
                   html`
                     <button
@@ -858,37 +877,23 @@ export function ChatTab() {
                 onKeyDown=${handleKeyDown}
               />
               <${VoiceMicButton}
-                onTranscript=${(t) => {
-                  setInputValue((prev) => (prev ? prev + " " + t : t));
-                  if (textareaRef.current) textareaRef.current.focus();
-                }}
                 disabled=${sending}
-                title="Voice input"
+                title="Live voice mode"
               />
-              ${voiceConfig?.available && html`
-                <button
-                  class="chat-send-btn"
-                  onClick=${() => { setVoiceModeOpen(true); }}
-                  title="Voice mode (${voiceConfig.tier === 1 ? 'Realtime' : 'Fallback'})"
-                  style="background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(16,185,129,0.2)); border-color: rgba(99,102,241,0.3);"
-                >
-                  ${resolveIcon("headphones") || "\uD83C\uDFA7"}
-                </button>
-              `}
               <button
                 class="chat-send-btn"
                 disabled=${!inputValue.trim() || sending}
                 onClick=${handleSend}
                 title="Send (Enter)"
               >
-                ${resolveIcon(sending ? "⏳" : "➤")}
+                ${resolveIcon(sending ? ":clock:" : "➤")}
               </button>
             </div>
             <div class="chat-input-hint">
               <span>Shift+Enter for new line</span>
               <span>Type / for commands</span>
               ${offlineQueueSize.peek() > 0 && html`
-                <span class="chat-offline-badge">${iconText(`📤 ${offlineQueueSize.peek()} queued`)}</span>
+                <span class="chat-offline-badge">${iconText(`:upload: ${offlineQueueSize.peek()} queued`)}</span>
               `}
             </div>
           </div>
@@ -908,14 +913,6 @@ export function ChatTab() {
           onClick=${() => setDrawerOpen(false)}
         ></div>
       `}
-      ${voiceModeOpen && html`
-        <${VoiceOverlay}
-          visible=${voiceModeOpen}
-          onClose=${() => setVoiceModeOpen(false)}
-          tier=${voiceConfig?.tier || 2}
-          sessionId=${sessionId}
-        />
-      `}
     </div>
   `;
 }

package/ui/tabs/control.js

@@ -856,7 +856,7 @@ export function ControlTab() {
                     sendCmd(planFocus ? `/plan ${n} ${planFocus}` : `/plan ${n}`);
                   }}
                 >
-                  ${iconText("📋 Plan")}
+                  ${iconText(":clipboard: Plan")}
                 </button>
               </div>
             </div>
@@ -927,7 +927,7 @@ export function ControlTab() {
                 style="flex:1"
               />
               <button class="btn btn-secondary btn-sm" onClick=${handleQuickCmd}>
-                ${iconText("▶ Run")}
+                ${iconText(":play: Run")}
               </button>
             </div>
             ${quickCmdFeedback && html`

package/ui/tabs/dashboard.js

@@ -587,7 +587,7 @@ export function DashboardTab() {
               Your AI development fleet is ready. Create your first task to get started.
             </div>
             <button class="btn btn-primary" onClick=${() => setShowCreate(true)}>
-              ${iconText("➕ Create your first task")}
+              ${iconText(":plus: Create your first task")}
             </button>
           </div>
         <//>