sidekick-agent-hub 0.12.7 → 0.12.8

package/dist/sidekick-cli.mjs

@@ -17997,7 +17997,7 @@ var init_UpdateCheckService = __esm({
       /** Run the update check (one-shot). */
       async check() {
         try {
-          const current = "0.12.7";
+          const current = "0.12.8";
           const cached = this.readCache();
           let latest;
           if (cached && Date.now() - cached.checkedAt < CACHE_TTL_MS) {
@@ -18102,6 +18102,28 @@ function formatElapsed(startTime) {
   const s = secs % 60;
   return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
 }
+function sectionHeader(title, width = 40) {
+  const prefix = "\u2500\u2500 ";
+  const suffix = " ";
+  const fillLen = Math.max(0, width - prefix.length - title.length - suffix.length);
+  const fill = "\u2500".repeat(fillLen);
+  return `{grey-fg}${prefix}{/grey-fg}{bold}${title}{/bold}{grey-fg}${suffix}${fill}{/grey-fg}`;
+}
+function makeColorBar(percent, width, color = "green") {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filled = Math.round(clamped / 100 * width);
+  const empty = width - filled;
+  return `{${color}-fg}${"\u2588".repeat(filled)}{/${color}-fg}{grey-fg}${"\u2591".repeat(empty)}{/grey-fg}`;
+}
+function makeSparkline(data, maxWidth = 25) {
+  const trimmed = data.slice(-maxWidth);
+  if (trimmed.length === 0) return { spark: "", max: 0, latest: 0 };
+  const max = Math.max(...trimmed, 1);
+  const latest = trimmed[trimmed.length - 1];
+  const chars = [" ", "\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+  const spark = trimmed.map((v) => chars[Math.min(8, Math.round(v / max * 8))]).join("");
+  return { spark, max, latest };
+}
 function makeBar(percent, width) {
   const clamped = Math.max(0, Math.min(100, percent));
   const filled = Math.round(clamped / 100 * width);
@@ -19219,7 +19241,7 @@ function renderContextAttribution(attr) {
   const total = categories.reduce((sum, c) => sum + c.tokens, 0);
   if (total === 0) return [];
   const barWidth = 30;
-  const lines = ["{bold}Context Attribution{/bold}", ""];
+  const lines = [sectionHeader("Context Attribution", 40), ""];
   let bar = "  ";
   for (const cat of categories) {
     if (cat.tokens === 0) continue;
@@ -19251,6 +19273,7 @@ var init_SessionsPanel = __esm({
       id = "sessions";
       title = "Sessions";
       shortcutKey = 1;
+      emptyStateHint = "Start an agent session in another terminal.";
       mindMapView = "tree";
       mindMapFilter = "all";
       diffCache;
@@ -19436,75 +19459,67 @@ ${hint}{/grey-fg}`;
           const t = m.tokens;
           const c = m.context;
           const contextColor = getUtilizationColor(c.percent);
-          const barWidth = 30;
-          const filled = Math.round(c.percent / 100 * barWidth);
-          const empty = barWidth - filled;
-          const bar = "\u2588".repeat(filled) + "\u2591".repeat(empty);
+          const w2 = detailWidth();
           const elapsed = m.sessionStartTime ? formatElapsed(m.sessionStartTime) : "--:--:--";
-          const burnData = m.burnRate.length > 0 ? m.burnRate : [0];
-          const latest = burnData[burnData.length - 1];
-          const max = Math.max(...burnData, 1);
-          const chars = [" ", "\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
-          const spark = burnData.slice(-25).map((v) => chars[Math.min(8, Math.round(v / max * 8))]).join("");
-          const runningAgents = m.subagents.filter((a) => a.status === "running").length;
-          const completedAgents = m.subagents.filter((a) => a.status === "completed").length;
-          const agentSummary = m.subagents.length > 0 ? `${m.subagents.length} (${runningAgents} running, ${completedAgents} done)` : "0";
           const recentEvent = [...m.timeline].reverse().find(
             (e) => e.type !== "user" && e.type !== "tool_result"
           );
           const recentLine = recentEvent ? (() => {
             const prefix = `[${formatTime(recentEvent.timestamp)}] ${recentEvent.type.padEnd(12)} `;
-            const maxSummary = Math.max(20, detailWidth() - prefix.length);
+            const maxSummary = Math.max(20, w2 - prefix.length);
             return `{yellow-fg}${prefix}${truncate(recentEvent.summary || "", maxSummary)}{/yellow-fg}`;
           })() : "{grey-fg}(no events yet){/grey-fg}";
+          const compactionSuffix = m.compactionCount > 0 ? `  {bold}${m.compactionCount}{/bold}{grey-fg} compaction${m.compactionCount !== 1 ? "s" : ""}{/grey-fg}` : "";
           const lines = [
-            "{bold}Active Session{/bold}",
-            recentLine,
-            "",
-            `{bold}Elapsed:{/bold}      ${elapsed}`,
-            `{bold}Provider:{/bold}     ${m.providerName || "unknown"}`,
-            `{bold}Model:{/bold}        ${m.currentModel || "unknown"}`,
-            `{bold}Events:{/bold}       ${m.eventCount}`,
-            `{bold}Compactions:{/bold}  ${m.compactionCount}`,
-            `{bold}Subagents:{/bold}   ${agentSummary}`,
-            "",
-            "{bold}Tokens{/bold}",
-            `  Input:       ${fmtNum(t.input)}`,
-            `  Output:      ${fmtNum(t.output)}`,
-            `  Cache Read:  ${fmtNum(t.cacheRead)}`,
-            `  Cache Write: ${fmtNum(t.cacheWrite)}`,
-            ...t.cacheRead + t.input > 0 ? [`  Hit Rate:    ${(t.cacheRead / (t.cacheRead + t.input) * 100).toFixed(1)}%`] : [],
-            `  Cost:        {green-fg}$${t.cost.toFixed(4)}{/green-fg}`,
-            "",
-            "{bold}Context{/bold}",
-            `  {${contextColor}-fg}${bar}{/${contextColor}-fg}`,
-            `  {bold}${c.percent}%{/bold}  ${fmtNum(c.used)} / ${fmtNum(c.limit)}`
+            `{bold}${elapsed}{/bold}{grey-fg} elapsed{/grey-fg}  {bold}${m.eventCount}{/bold}{grey-fg} events{/grey-fg}${compactionSuffix}`,
+            `{grey-fg}Provider{/grey-fg} {bold}${m.providerName || "unknown"}{/bold}  {grey-fg}Model{/grey-fg} {bold}${m.currentModel || "unknown"}{/bold}`,
+            recentLine
           ];
-          if (m.contextTimeline && m.contextTimeline.length > 1) {
-            const ctxPoints = m.contextTimeline.slice(-25);
-            const ctxMax = Math.max(...ctxPoints.map((p) => p.inputTokens), 1);
-            const sparkChars = [" ", "\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
-            const ctxSpark = ctxPoints.map((p) => sparkChars[Math.min(8, Math.round(p.inputTokens / ctxMax * 8))]).join("");
-            lines.push(`  {grey-fg}${ctxSpark}{/grey-fg}  history`);
-          }
           if (m.permissionMode && m.permissionMode !== "default") {
             const modeColors = { bypassPermissions: "red", acceptEdits: "magenta", plan: "green" };
             const modeLabels = { bypassPermissions: "Bypass Permissions", acceptEdits: "Accept Edits", plan: "Plan Mode" };
             const modeColor = modeColors[m.permissionMode] || "grey";
             const modeLabel = modeLabels[m.permissionMode] || m.permissionMode;
-            lines.push("", `{bold}Permission:{/bold}  {${modeColor}-fg}${modeLabel}{/${modeColor}-fg}`);
+            lines.push(`{grey-fg}Permission{/grey-fg} {${modeColor}-fg}{bold}${modeLabel}{/bold}{/${modeColor}-fg}`);
+          }
+          if (m.subagents.length > 0) {
+            const runningAgents = m.subagents.filter((a) => a.status === "running").length;
+            const completedAgents = m.subagents.filter((a) => a.status === "completed").length;
+            lines.push(`{grey-fg}Subagents{/grey-fg} {bold}${m.subagents.length}{/bold} ({green-fg}${runningAgents} running{/green-fg}, ${completedAgents} done)`);
           }
+          const cacheRate = t.cacheRead + t.input > 0 ? `{grey-fg}Cache{/grey-fg} {bold}${(t.cacheRead / (t.cacheRead + t.input) * 100).toFixed(1)}%{/bold}` : "";
+          lines.push(
+            "",
+            sectionHeader("Tokens", w2),
+            `{grey-fg}In{/grey-fg} {bold}${fmtNum(t.input)}{/bold}  {grey-fg}Out{/grey-fg} {bold}${fmtNum(t.output)}{/bold}  ${cacheRate}  {green-fg}$${t.cost.toFixed(4)}{/green-fg}`
+          );
+          const contextBar = makeColorBar(c.percent, 30, contextColor);
           lines.push(
             "",
-            "{bold}Burn Rate{/bold}",
-            `  {cyan-fg}${spark}{/cyan-fg}  {bold}${fmtNum(latest)}{/bold} tok/min`
+            sectionHeader("Context", w2),
+            `  ${contextBar} {bold}${c.percent}%{/bold}  ${fmtNum(c.used)} / ${fmtNum(c.limit)}`
+          );
+          if (m.contextTimeline && m.contextTimeline.length > 1) {
+            const ctxData = m.contextTimeline.slice(-25).map((p) => p.inputTokens);
+            const ctxSpark = makeSparkline(ctxData);
+            lines.push(`  {grey-fg}${ctxSpark.spark}{/grey-fg}  {grey-fg}peak ${fmtNum(ctxSpark.max)}{/grey-fg}`);
+          }
+          const burnData = m.burnRate.length > 0 ? m.burnRate : [0];
+          const burnSpark = makeSparkline(burnData);
+          lines.push(
+            "",
+            sectionHeader("Burn Rate", w2),
+            `  {cyan-fg}${burnSpark.spark}{/cyan-fg}  {bold}${fmtNum(burnSpark.latest)}{/bold}{grey-fg} tok/min{/grey-fg}  {grey-fg}peak ${fmtNum(burnSpark.max)}{/grey-fg}`
           );
           if (m.tasks.length > 0) {
             const completed = m.tasks.filter((t2) => t2.status === "completed").length;
             const active = m.tasks.filter((t2) => t2.status === "in_progress").length;
             const pending = m.tasks.filter((t2) => t2.status === "pending").length;
-            lines.push("", "{bold}Tasks{/bold}");
-            lines.push(`  ${completed}/${m.tasks.length} completed  ${active} active  ${pending} pending`);
+            lines.push(
+              "",
+              sectionHeader("Tasks", w2),
+              `  {bold}${completed}{/bold}/{m.tasks.length}{grey-fg} completed{/grey-fg}  {bold}${active}{/bold}{grey-fg} active{/grey-fg}  {bold}${pending}{/bold}{grey-fg} pending{/grey-fg}`
+            );
           }
           const diffStats = this.diffCache?.getStats() ?? /* @__PURE__ */ new Map();
           if (diffStats.size > 0) {
@@ -19513,25 +19528,28 @@ ${hint}{/grey-fg}`;
               totalAdd += s2.additions;
               totalDel += s2.deletions;
             }
-            lines.push("", "{bold}File Changes{/bold}");
-            lines.push(`  ${diffStats.size} files touched  {green-fg}+${totalAdd}{/green-fg} {red-fg}-${totalDel}{/red-fg} lines`);
+            lines.push(
+              "",
+              sectionHeader("File Changes", w2),
+              `  {bold}${diffStats.size}{/bold}{grey-fg} files{/grey-fg}  {green-fg}+${totalAdd}{/green-fg} {red-fg}-${totalDel}{/red-fg}`
+            );
           }
           if (m.modelStats.length > 0) {
-            lines.push("", "{bold}Model Usage{/bold}");
+            lines.push("", sectionHeader("Model Usage", w2));
             for (const ms of m.modelStats) {
               const modelName = ms.model.length > 20 ? ms.model.substring(0, 17) + "..." : ms.model;
-              lines.push(`  ${modelName.padEnd(20)} ${String(ms.calls).padStart(4)} calls  {green-fg}$${ms.cost.toFixed(4)}{/green-fg}`);
+              lines.push(`  ${modelName.padEnd(20)} {bold}${String(ms.calls).padStart(4)}{/bold}{grey-fg} calls{/grey-fg}  {green-fg}$${ms.cost.toFixed(4)}{/green-fg}`);
             }
           }
           if (m.quota?.available) {
             const q = m.quota;
-            lines.push("", "{bold}Quota{/bold}");
+            lines.push("", sectionHeader("Quota", w2));
             const fiveColor = getUtilizationColor(q.fiveHour.utilization);
-            const fiveBar = makeBar(q.fiveHour.utilization, 18);
-            lines.push(`  5h:  {${fiveColor}-fg}${fiveBar}{/${fiveColor}-fg} ${q.fiveHour.utilization.toFixed(0)}%`);
+            const fiveBar = makeColorBar(q.fiveHour.utilization, 18, fiveColor);
+            lines.push(`  {grey-fg}5h{/grey-fg}  ${fiveBar} {bold}${q.fiveHour.utilization.toFixed(0)}%{/bold}`);
             const sevenColor = getUtilizationColor(q.sevenDay.utilization);
-            const sevenBar = makeBar(q.sevenDay.utilization, 18);
-            lines.push(`  7d:  {${sevenColor}-fg}${sevenBar}{/${sevenColor}-fg} ${q.sevenDay.utilization.toFixed(0)}%`);
+            const sevenBar = makeColorBar(q.sevenDay.utilization, 18, sevenColor);
+            lines.push(`  {grey-fg}7d{/grey-fg}  ${sevenBar} {bold}${q.sevenDay.utilization.toFixed(0)}%{/bold}`);
           }
           const attrLines = renderContextAttribution(m.contextAttribution);
           if (attrLines.length > 0) {
@@ -19540,21 +19558,18 @@ ${hint}{/grey-fg}`;
           return lines.join("\n");
         }
         const s = d.session;
+        const w = detailWidth();
         const totalTokens = s.inputTokens + s.outputTokens;
         return [
-          `{bold}${s.date}{/bold}`,
+          `{bold}${s.date}{/bold}  {bold}${s.sessionCount}{/bold}{grey-fg} sessions{/grey-fg}  {bold}${s.messageCount}{/bold}{grey-fg} messages{/grey-fg}`,
+          `{grey-fg}Tokens{/grey-fg} {bold}${fmtNum(totalTokens)}{/bold} ({grey-fg}In{/grey-fg} ${fmtNum(s.inputTokens)}  {grey-fg}Out{/grey-fg} ${fmtNum(s.outputTokens)})  {green-fg}$${s.totalCost.toFixed(4)}{/green-fg}`,
           "",
-          `{bold}Sessions:{/bold}   ${s.sessionCount}`,
-          `{bold}Tokens:{/bold}     ${fmtNum(totalTokens)} (${fmtNum(s.inputTokens)} in / ${fmtNum(s.outputTokens)} out)`,
-          `{bold}Cost:{/bold}       {green-fg}$${s.totalCost.toFixed(4)}{/green-fg}`,
-          `{bold}Messages:{/bold}   ${s.messageCount}`,
+          sectionHeader("Models", w),
+          ...s.modelUsage.map((u) => `  ${u.model}: {bold}${u.calls}{/bold} calls`),
           "",
-          "{bold}Models{/bold}",
-          ...s.modelUsage.map((u) => `  ${u.model}: ${u.calls} calls`),
-          "",
-          "{bold}Tools{/bold}",
+          sectionHeader("Tools", w),
           ...s.toolUsage.sort((a, b) => b.calls - a.calls).slice(0, 10).map(
-            (u) => `  ${u.tool.padEnd(16)} ${u.calls} calls`
+            (u) => `  ${u.tool.padEnd(16)} {bold}${u.calls}{/bold} calls`
           )
         ].join("\n");
       }
@@ -19688,10 +19703,10 @@ ${hint}{/grey-fg}`;
         const running = agents.filter((a) => a.status === "running").length;
         const completed = agents.filter((a) => a.status === "completed").length;
         const parallel = agents.filter((a) => a.isParallel).length;
+        const w = detailWidth();
         const lines = [
-          "{bold}Subagents{/bold}",
-          "",
-          `  Total: ${agents.length}  Running: {green-fg}${running}{/green-fg}  Completed: {cyan-fg}${completed}{/cyan-fg}` + (parallel > 0 ? `  Parallel: {magenta-fg}${parallel}{/magenta-fg}` : ""),
+          sectionHeader("Subagents", w),
+          `  {bold}${agents.length}{/bold}{grey-fg} total{/grey-fg}  {green-fg}{bold}${running}{/bold} running{/green-fg}  {cyan-fg}{bold}${completed}{/bold} done{/cyan-fg}` + (parallel > 0 ? `  {magenta-fg}{bold}${parallel}{/bold} parallel{/magenta-fg}` : ""),
           ""
         ];
         for (const a of agents) {
@@ -19713,7 +19728,7 @@ ${hint}{/grey-fg}`;
         }
         const subagentTasks = metrics.tasks.filter((t) => t.subagentType);
         if (subagentTasks.length > 0) {
-          lines.push("", "{bold}Tasks from Subagents{/bold}", "");
+          lines.push("", sectionHeader("Tasks from Subagents", w), "");
           for (const t of subagentTasks) {
             const statusIcon = t.status === "completed" ? "\u2713" : t.status === "in_progress" ? "\u2192" : "\u25CB";
             const taskPrefix = `  ${statusIcon} ${t.subagentType} #${t.taskId}: `;
@@ -19756,6 +19771,7 @@ var init_TasksPanel = __esm({
       id = "tasks";
       title = "Tasks";
       shortcutKey = 2;
+      emptyStateHint = "Tasks appear as your agent works.";
       detailTabs = [
         { label: "Detail", render: (item, m) => this.renderDetail(item, m) }
       ];
@@ -19851,6 +19867,7 @@ var init_KanbanPanel = __esm({
       id = "kanban";
       title = "Kanban";
       shortcutKey = 3;
+      emptyStateHint = "Task board populates from active sessions.";
       detailTabs = [
         { label: "Board", render: (item, m) => this.renderBoard(item, m) }
       ];
@@ -19966,6 +19983,7 @@ var init_NotesPanel = __esm({
       id = "notes";
       title = "Notes";
       shortcutKey = 4;
+      emptyStateHint = "Knowledge notes saved by your agent appear here.";
       detailTabs = [
         { label: "Content", render: (item) => this.renderContent(item) },
         { label: "Related", render: (item, _m, sd) => this.renderRelated(item, sd) }
@@ -20038,6 +20056,7 @@ var init_DecisionsPanel = __esm({
       id = "decisions";
       title = "Decisions";
       shortcutKey = 5;
+      emptyStateHint = "Decisions logged by your agent show up here.";
       detailTabs = [
         { label: "Detail", render: (item) => this.renderDetail(item) }
       ];
@@ -20123,6 +20142,7 @@ var init_PlansPanel = __esm({
       id = "plans";
       title = "Plans";
       shortcutKey = 6;
+      emptyStateHint = "Plans created by your agent appear here.";
       sourceFilter = "all";
       detailTabs = [
         { label: "Steps", render: (item) => this.renderSteps(item) },
@@ -31205,14 +31225,14 @@ var require_react_reconciler_production = __commonJS({
       }
       var exports2 = {};
       "use strict";
-      var React15 = require_react(), Scheduler2 = require_scheduler(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
+      var React16 = require_react(), Scheduler2 = require_scheduler(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
       Symbol.for("react.scope");
       var REACT_ACTIVITY_TYPE = Symbol.for("react.activity");
       Symbol.for("react.legacy_hidden");
       Symbol.for("react.tracing_marker");
       var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel");
       Symbol.for("react.view_transition");
-      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React15.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, rendererVersion = $$$config.rendererVersion, rendererPackageName = $$$config.rendererPackageName, extraDevToolsConfig = $$$config.extraDevToolsConfig, getPublicInstance = $$$config.getPublicInstance, getRootHostContext = $$$config.getRootHostContext, getChildHostContext = $$$config.getChildHostContext, prepareForCommit = $$$config.prepareForCommit, resetAfterCommit = $$$config.resetAfterCommit, createInstance = $$$config.createInstance;
+      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React16.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, rendererVersion = $$$config.rendererVersion, rendererPackageName = $$$config.rendererPackageName, extraDevToolsConfig = $$$config.extraDevToolsConfig, getPublicInstance = $$$config.getPublicInstance, getRootHostContext = $$$config.getRootHostContext, getChildHostContext = $$$config.getChildHostContext, prepareForCommit = $$$config.prepareForCommit, resetAfterCommit = $$$config.resetAfterCommit, createInstance = $$$config.createInstance;
       $$$config.cloneMutableInstance;
       var appendInitialChild = $$$config.appendInitialChild, finalizeInitialChildren = $$$config.finalizeInitialChildren, shouldSetTextContent = $$$config.shouldSetTextContent, createTextInstance = $$$config.createTextInstance;
       $$$config.cloneMutableTextInstance;
@@ -43805,14 +43825,14 @@ var require_react_reconciler_development = __commonJS({
       }
       var exports2 = {};
       "use strict";
-      var React15 = require_react(), Scheduler2 = require_scheduler(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
+      var React16 = require_react(), Scheduler2 = require_scheduler(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
       Symbol.for("react.scope");
       var REACT_ACTIVITY_TYPE = Symbol.for("react.activity");
       Symbol.for("react.legacy_hidden");
       Symbol.for("react.tracing_marker");
       var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel");
       Symbol.for("react.view_transition");
-      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React15.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, rendererVersion = $$$config.rendererVersion, rendererPackageName = $$$config.rendererPackageName, extraDevToolsConfig = $$$config.extraDevToolsConfig, getPublicInstance = $$$config.getPublicInstance, getRootHostContext = $$$config.getRootHostContext, getChildHostContext = $$$config.getChildHostContext, prepareForCommit = $$$config.prepareForCommit, resetAfterCommit = $$$config.resetAfterCommit, createInstance = $$$config.createInstance;
+      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React16.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, rendererVersion = $$$config.rendererVersion, rendererPackageName = $$$config.rendererPackageName, extraDevToolsConfig = $$$config.extraDevToolsConfig, getPublicInstance = $$$config.getPublicInstance, getRootHostContext = $$$config.getRootHostContext, getChildHostContext = $$$config.getChildHostContext, prepareForCommit = $$$config.prepareForCommit, resetAfterCommit = $$$config.resetAfterCommit, createInstance = $$$config.createInstance;
       $$$config.cloneMutableInstance;
       var appendInitialChild = $$$config.appendInitialChild, finalizeInitialChildren = $$$config.finalizeInitialChildren, shouldSetTextContent = $$$config.shouldSetTextContent, createTextInstance = $$$config.createTextInstance;
       $$$config.cloneMutableTextInstance;
@@ -57472,18 +57492,18 @@ var require_react_jsx_runtime_development = __commonJS({
       function isValidElement(object) {
         return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
       }
-      var React15 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React15.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+      var React16 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React16.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
         return null;
       };
-      React15 = {
+      React16 = {
         react_stack_bottom_frame: function(callStackForError) {
           return callStackForError();
         }
       };
       var specialPropKeyWarningShown;
       var didWarnAboutElementRef = {};
-      var unknownOwnerDebugStack = React15.react_stack_bottom_frame.bind(
-        React15,
+      var unknownOwnerDebugStack = React16.react_stack_bottom_frame.bind(
+        React16,
         UnknownOwner
       )();
       var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -57528,9 +57548,29 @@ var require_jsx_runtime = __commonJS({
 });
 
 // src/dashboard/ink/SessionPickerInk.tsx
+function buildGroupedRows(items) {
+  const providerIds = new Set(items.map((it) => it.providerId).filter(Boolean));
+  if (providerIds.size <= 1) return null;
+  const rows = [];
+  const grouped = /* @__PURE__ */ new Map();
+  for (let i = 0; i < items.length; i++) {
+    const pid = items[i].providerId || "unknown";
+    if (!grouped.has(pid)) grouped.set(pid, []);
+    grouped.get(pid).push(i);
+  }
+  for (const [pid, indices] of grouped) {
+    rows.push({ type: "header", providerId: pid });
+    for (const idx of indices) {
+      rows.push({ type: "item", index: idx });
+    }
+  }
+  rows.push({ type: "item", index: items.length });
+  return { rows, selectableCount: items.length + 1 };
+}
 function SessionPickerInk({ items, onSelect }) {
   const [selectedIndex, setSelectedIndex] = (0, import_react29.useState)(0);
   const { exit } = use_app_default();
+  const grouped = buildGroupedRows(items);
   const totalItems = items.length + 1;
   use_input_default((input, key) => {
     if (input === "q" || key.escape || key.ctrl && input === "c") {
@@ -57556,9 +57596,88 @@ function SessionPickerInk({ items, onSelect }) {
   });
   const rows = process.stdout.rows || 24;
   const viewportHeight = Math.max(5, rows - 15);
-  const scrollOffset = Math.max(0, Math.min(selectedIndex - Math.floor(viewportHeight / 2), totalItems - viewportHeight));
-  const visibleStart = Math.max(0, scrollOffset);
-  const visibleEnd = Math.min(totalItems, visibleStart + viewportHeight);
+  function renderSessionRow(i, isSelected) {
+    if (i === items.length) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { inverse: isSelected, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "yellow", children: "+" }),
+        " Wait for a new session to start..."
+      ] }) }, "wait");
+    }
+    const item = items[i];
+    const dot = item.isActive ? "\u25CF" : "\u25CB";
+    const dotColor = item.isActive ? "green" : "gray";
+    const badge = item.providerId ? PROVIDER_BADGES[item.providerId] : null;
+    const truncLabel = item.label.length > 40 ? item.label.substring(0, 37) + "..." : item.label;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { inverse: isSelected, children: [
+      badge && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: badge.color, children: [
+        "[",
+        badge.badge,
+        "]"
+      ] }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: dotColor, children: dot }),
+      " ",
+      truncLabel.padEnd(40),
+      "  ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: item.age.padEnd(9) }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: item.sessionId }),
+      item.isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "green", children: " LIVE" }) : ""
+    ] }) }, item.sessionPath);
+  }
+  function renderList() {
+    if (grouped) {
+      const allRows = grouped.rows;
+      let selectableIdx = 0;
+      const selectablePositions = [];
+      for (let r = 0; r < allRows.length; r++) {
+        if (allRows[r].type === "item") selectablePositions.push(r);
+      }
+      const selectedVisualPos = selectablePositions[selectedIndex] ?? 0;
+      const scrollOffset2 = Math.max(0, Math.min(selectedVisualPos - Math.floor(viewportHeight / 2), allRows.length - viewportHeight));
+      const visibleStart2 = Math.max(0, scrollOffset2);
+      const visibleEnd2 = Math.min(allRows.length, visibleStart2 + viewportHeight);
+      const elements = [];
+      selectableIdx = 0;
+      for (let r = 0; r < allRows.length; r++) {
+        if (r < visibleStart2 || r >= visibleEnd2) {
+          if (allRows[r].type === "item") selectableIdx++;
+          continue;
+        }
+        const row = allRows[r];
+        if (row.type === "header") {
+          const name = PROVIDER_NAMES[row.providerId] || row.providerId;
+          const badge = PROVIDER_BADGES[row.providerId];
+          elements.push(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { dimColor: true, children: [
+                "\u2500\u2500",
+                " "
+              ] }),
+              badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: badge.color, children: name }),
+              !badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { dimColor: true, children: [
+                " ",
+                "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"
+              ] })
+            ] }, `hdr-${row.providerId}`)
+          );
+        } else {
+          const isSelected = selectableIdx === selectedIndex;
+          elements.push(renderSessionRow(row.index, isSelected));
+          selectableIdx++;
+        }
+      }
+      return elements;
+    }
+    const scrollOffset = Math.max(0, Math.min(selectedIndex - Math.floor(viewportHeight / 2), totalItems - viewportHeight));
+    const visibleStart = Math.max(0, scrollOffset);
+    const visibleEnd = Math.min(totalItems, visibleStart + viewportHeight);
+    return Array.from({ length: visibleEnd - visibleStart }, (_, vi) => {
+      const i = visibleStart + vi;
+      return renderSessionRow(i, i === selectedIndex);
+    });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { flexDirection: "column", width: "100%", height: rows, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { flexDirection: "column", width: 50, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { bold: true, color: "magenta", children: "  S I D E K I C K" }),
@@ -57578,37 +57697,7 @@ function SessionPickerInk({ items, onSelect }) {
             items.length,
             ") "
           ] }),
-          Array.from({ length: visibleEnd - visibleStart }, (_, vi) => {
-            const i = visibleStart + vi;
-            const isSelected = i === selectedIndex;
-            if (i === items.length) {
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { inverse: isSelected, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "yellow", children: "+" }),
-                " Wait for a new session to start..."
-              ] }) }, "wait");
-            }
-            const item = items[i];
-            const dot = item.isActive ? "\u25CF" : "\u25CB";
-            const dotColor = item.isActive ? "green" : "gray";
-            const badge = item.providerId ? PROVIDER_BADGES[item.providerId] : null;
-            const truncLabel = item.label.length > 40 ? item.label.substring(0, 37) + "..." : item.label;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { inverse: isSelected, children: [
-              badge && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: badge.color, children: [
-                "[",
-                badge.badge,
-                "]"
-              ] }),
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: dotColor, children: dot }),
-              " ",
-              truncLabel.padEnd(40),
-              "  ",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: item.age.padEnd(9) }),
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: item.sessionId }),
-              item.isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "green", children: " LIVE" }) : ""
-            ] }) }, item.sessionPath);
-          })
+          renderList()
         ]
       }
     ),
@@ -57618,7 +57707,11 @@ function SessionPickerInk({ items, onSelect }) {
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", children: "Session Picker" }),
       "  ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { bold: true, children: "\u2191/\u2193" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { bold: true, children: [
+        "\u2191",
+        "/",
+        "\u2193"
+      ] }),
       " navigate  ",
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { bold: true, children: "Enter" }),
       " select  ",
@@ -57658,7 +57751,7 @@ async function showSessionPicker(provider, workspacePath, additionalProviders) {
     }).catch(reject);
   });
 }
-var import_react29, import_jsx_runtime;
+var import_react29, import_jsx_runtime, PROVIDER_NAMES;
 var init_SessionPickerInk = __esm({
   async "src/dashboard/ink/SessionPickerInk.tsx"() {
     "use strict";
@@ -57666,6 +57759,11 @@ var init_SessionPickerInk = __esm({
     await init_build2();
     init_SessionPickerHelpers();
     import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
+    PROVIDER_NAMES = {
+      "claude-code": "Claude Code",
+      "opencode": "OpenCode",
+      "codex": "Codex"
+    };
   }
 });
 
@@ -57809,27 +57907,27 @@ var init_useWindowedScroll = __esm({
 // src/dashboard/ink/TabBar.tsx
 function TabBar({ panels, activeIndex, layoutMode }) {
   const modeLabel = MODE_LABELS[layoutMode] || layoutMode;
-  const modeColor = MODE_COLORS[layoutMode] || "gray";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { height: 1, width: "100%", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { flexGrow: 1, children: panels.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { marginRight: 1, children: i === activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { bold: true, color: "magenta", children: [
-      "[",
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { flexGrow: 1, children: panels.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { marginRight: 1, children: i === activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { bold: true, underline: true, color: "magenta", children: [
       p.shortcutKey,
-      "] ",
-      p.title
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { color: "gray", children: [
-      "[",
-      p.shortcutKey,
-      "] ",
+      " ",
       p.title
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { dimColor: true, children: p.shortcutKey }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { color: "gray", children: [
+        " ",
+        p.title
+      ] })
     ] }) }, p.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { color: modeColor, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Text, { dimColor: true, children: [
       "z: ",
       modeLabel,
-      " \u25B8"
+      " ",
+      "\u25B8"
     ] }) })
   ] });
 }
-var import_jsx_runtime2, MODE_LABELS, MODE_COLORS;
+var import_jsx_runtime2, MODE_LABELS;
 var init_TabBar = __esm({
   async "src/dashboard/ink/TabBar.tsx"() {
     "use strict";
@@ -57840,11 +57938,6 @@ var init_TabBar = __esm({
       expanded: "Expanded",
       "wide-side": "Wide Side"
     };
-    MODE_COLORS = {
-      normal: "gray",
-      expanded: "cyan",
-      "wide-side": "yellow"
-    };
   }
 });
 
@@ -57955,9 +58048,11 @@ function SideList({
   width,
   viewportHeight,
   panelTitle,
-  sessionFilterActive
+  sessionFilterActive,
+  emptyStateHint
 }) {
   const borderColor = focused ? "magenta" : "gray";
+  const borderStyle = focused ? "double" : "single";
   const innerWidth = Math.max(1, width - 3);
   const visibleItems = items.slice(scrollOffset, scrollOffset + viewportHeight);
   const hasMoreAbove = scrollOffset > 0;
@@ -57967,7 +58062,7 @@ function SideList({
     {
       width,
       flexDirection: "column",
-      borderStyle: "single",
+      borderStyle,
       borderColor,
       overflow: "hidden",
       children: [
@@ -58001,9 +58096,10 @@ function SideList({
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: "Press " }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "magenta", bold: true, children: "f" }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: " to see all" })
-          ] }, "empty-hint-2")
+          ] }, "empty-hint-2"),
+          !sessionFilterActive && emptyStateHint && viewportHeight >= 5 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box_default, { justifyContent: "center", width: innerWidth, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { dimColor: true, children: emptyStateHint }) }, "empty-hint-desc")
         ] }),
-        visibleItems.length < viewportHeight && Array.from({ length: Math.max(0, viewportHeight - visibleItems.length - (items.length === 0 && viewportHeight >= 3 ? sessionFilterActive ? 3 : 2 : 0)) }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box_default, { width: innerWidth, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { children: " " }) }, `empty-${i}`)),
+        visibleItems.length < viewportHeight && Array.from({ length: Math.max(0, viewportHeight - visibleItems.length - (items.length === 0 && viewportHeight >= 3 ? sessionFilterActive ? 3 : !sessionFilterActive && emptyStateHint && viewportHeight >= 5 ? 3 : 2 : 0)) }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box_default, { width: innerWidth, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { children: " " }) }, `empty-${i}`)),
         hasMoreBelow && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box_default, { justifyContent: "center", width: innerWidth, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: "gray", children: "\u25BC" }) })
       ]
     }
@@ -58054,6 +58150,7 @@ function DetailPane({
   focused
 }) {
   const borderColor = focused ? "magenta" : "gray";
+  const borderStyle = focused ? "double" : "single";
   const lines = content ? content.split("\n") : [];
   const totalLines = lines.length;
   const hasMoreAbove = scrollOffset > 0;
@@ -58067,7 +58164,7 @@ function DetailPane({
     {
       flexDirection: "column",
       flexGrow: 1,
-      borderStyle: "single",
+      borderStyle,
       borderColor,
       paddingLeft: 1,
       children: [
@@ -58114,64 +58211,88 @@ function StatusBar({
   const permissionColor = permissionMode === "bypassPermissions" ? "red" : permissionMode === "acceptEdits" ? "magenta" : permissionMode === "plan" ? "green" : void 0;
   const permissionLabel = permissionMode === "bypassPermissions" ? "BYPASS" : permissionMode === "acceptEdits" ? "EDITS" : permissionMode === "plan" ? "PLAN" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { height: 1, width: "100%", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, color: "magenta", children: "\u26A1 SIDEKICK" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { color: "gray", children: [
-      " v",
-      "0.12.7"
-    ] }),
-    updateInfo && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { color: "yellow", children: [
-      " (v",
-      updateInfo.latest,
-      " available \u2014 npm i -g sidekick-agent-hub)"
-    ] }),
-    providerName && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", children: " | " }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "cyan", children: providerName })
-    ] }),
-    permissionMode && permissionMode !== "default" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", children: " | " }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: permissionColor, children: permissionLabel })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", children: " | " }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { children: evtLabel }),
-    filterString && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { color: "yellow", children: [
-      '  filter: "',
-      filterString,
-      '" (',
-      matchCount ?? 0,
-      " of ",
-      totalCount ?? 0,
-      ")"
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { bold: true, color: "magenta", children: [
+        "\u26A1",
+        " SIDEKICK"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { dimColor: true, children: [
+        " v",
+        "0.12.8"
+      ] }),
+      updateInfo && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { color: "yellow", children: [
+        " (v",
+        updateInfo.latest,
+        ")"
+      ] })
     ] }),
-    sessionFilter && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { color: "magenta", children: [
-      "  ",
-      sessionFilter
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { flexGrow: 1, justifyContent: "center", children: [
+      providerName && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { dimColor: true, children: [
+          " ",
+          "\u2502",
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "cyan", children: providerName })
+      ] }),
+      permissionMode && permissionMode !== "default" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { dimColor: true, children: [
+          " ",
+          "\u2502",
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: permissionColor, children: permissionLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { dimColor: true, children: [
+        " ",
+        "\u2502",
+        " "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { children: evtLabel }),
+      filterString && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { color: "yellow", children: [
+        '  filter: "',
+        filterString,
+        '" (',
+        matchCount ?? 0,
+        "/",
+        totalCount ?? 0,
+        ")"
+      ] }),
+      sessionFilter && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { color: "magenta", children: [
+        "  ",
+        sessionFilter
+      ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", children: " | " }),
-    focusTarget === "side" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "\u2191\u2193" }),
-      " navigate  ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "Tab" }),
-      " detail  ",
-      panelHints,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "/" }),
-      " filter  ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "?" }),
-      " help  ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "q" }),
-      " quit"
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "j/k" }),
-      " scroll  ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "[]" }),
-      " tab  ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "Tab" }),
-      " side  ",
-      panelHints,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "?" }),
-      " help  ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "q" }),
-      " quit"
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { dimColor: true, children: [
+        "\u2502",
+        " "
+      ] }),
+      focusTarget === "side" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "\u2191\u2193" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " nav " }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "Tab" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " detail " }),
+        panelHints,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "/" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " filter " }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " help " }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "q" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " quit" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "j/k" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " scroll " }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "[]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " tab " }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "Tab" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " side " }),
+        panelHints,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " help " }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, children: "q" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { dimColor: true, children: " quit" })
+      ] })
     ] })
   ] });
 }
@@ -58205,6 +58326,27 @@ var init_useSpinner = __esm({
   }
 });
 
+// src/dashboard/branding.ts
+var LOGO_ART, HELP_HEADER;
+var init_branding = __esm({
+  "src/dashboard/branding.ts"() {
+    "use strict";
+    init_phraseFormatters();
+    LOGO_ART = [
+      "          {yellow-fg}\u26A1{/yellow-fg}",
+      "          {magenta-fg}\u2502{/magenta-fg}",
+      "  {white-fg}</>{/white-fg}  {white-fg}\u256D\u2500\u2500\u2534\u2500\u2500\u256E{/white-fg}   {bold}{magenta-fg}S I D E K I C K{/magenta-fg}{/bold}",
+      "       {white-fg}\u2502{/white-fg} {cyan-fg}\u25CF{/cyan-fg} {cyan-fg}\u25CF{/cyan-fg} {white-fg}\u2502{/white-fg}   {bold}Agent Hub{/bold}",
+      "       {white-fg}\u2502{/white-fg}  {green-fg}\u25E1{/green-fg}  {white-fg}\u2502{/white-fg}   {grey-fg}Terminal Dashboard{/grey-fg}",
+      "       {white-fg}\u2570\u2500\u2500\u2500\u2500\u2500\u256F{/white-fg}"
+    ];
+    HELP_HEADER = [
+      ...LOGO_ART,
+      ""
+    ];
+  }
+});
+
 // src/dashboard/ink/SplashOverlay.tsx
 function SplashOverlay() {
   const spinner = useSpinner();
@@ -58218,12 +58360,7 @@ function SplashOverlay() {
       paddingY: 1,
       width: 60,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { bold: true, color: "magenta", children: "  S I D E K I C K" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { bold: true, children: "  Agent Hub" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { color: "gray", children: [
-          "  Terminal Dashboard",
-          "0.12.7" ? ` v${"0.12.7"}` : ""
-        ] }),
+        LOGO_ART.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: parseBlessedTags(line) }, i)),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: " " }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { color: "gray", children: [
           "  ",
@@ -58269,11 +58406,27 @@ var init_SplashOverlay = __esm({
     await init_build2();
     init_useSpinner();
     import_sidekick_shared8 = __toESM(require_dist(), 1);
+    init_branding();
+    await init_parseBlessedTags();
     import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
   }
 });
 
 // src/dashboard/ink/HelpOverlay.tsx
+function helpRow(key, desc, keyWidth = 14, totalWidth = 54) {
+  const padding = keyWidth - key.length;
+  const dotCount = Math.max(1, totalWidth - keyWidth - desc.length);
+  const dots = "\xB7".repeat(dotCount);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
+    "  ",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: key }),
+    " ".repeat(Math.max(0, padding)),
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { dimColor: true, children: dots }),
+    " ",
+    desc
+  ] });
+}
 function HelpOverlay({ panels, activePanelIndex }) {
   const panel = panels[activePanelIndex];
   const actions = panel.getActions();
@@ -58288,75 +58441,25 @@ function HelpOverlay({ panels, activePanelIndex }) {
       paddingY: 1,
       width: 60,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, color: "magenta", children: "  S I D E K I C K" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "  Agent Hub" }),
+        LOGO_ART.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: parseBlessedTags(line) }, `logo-${i}`)),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: " " }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "  Panels" }),
-        panels.map((p) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: p.shortcutKey }),
-          "           ",
-          p.title
-        ] }, p.id)),
+        panels.map((p) => helpRow(String(p.shortcutKey), p.title)),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: " " }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "  Navigation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "Tab" }),
-          "            Toggle side \u2194 detail focus"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "j / \u2193" }),
-          "          Next item (side) / scroll (detail)"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "k / \u2191" }),
-          "          Prev item (side) / scroll (detail)"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "g / G" }),
-          "           First / last item"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "Enter" }),
-          "          Focus detail pane"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "h / \u2190" }),
-          "          Return to side"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "[ / ]" }),
-          "          Cycle detail tabs"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "z" }),
-          "              Cycle layout mode"
-        ] }),
+        helpRow("Tab", "Toggle side / detail focus"),
+        helpRow("j / \u2193", "Next item / scroll down"),
+        helpRow("k / \u2191", "Prev item / scroll up"),
+        helpRow("g / G", "First / last item"),
+        helpRow("Enter", "Focus detail pane"),
+        helpRow("h / \u2190", "Return to side"),
+        helpRow("[ / ]", "Cycle detail tabs"),
+        helpRow("z", "Cycle layout mode"),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: " " }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "  Actions" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "x" }),
-          "              Context menu"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "/" }),
-          "              Filter side list"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "f" }),
-          "              Toggle session filter"
-        ] }),
+        helpRow("x", "Context menu"),
+        helpRow("/", "Filter side list"),
+        helpRow("f", "Toggle session filter"),
         (actions.length > 0 || bindings.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: " " }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { bold: true, children: [
@@ -58364,55 +58467,28 @@ function HelpOverlay({ panels, activePanelIndex }) {
             panel.title,
             " Actions"
           ] }),
-          actions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-            "  ",
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: a.key }),
-            "              ",
-            a.label
-          ] }, a.key)),
-          bindings.map((b) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-            "  ",
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: b.keys.join("/") }),
-            "              ",
-            b.label
-          ] }, b.keys[0]))
+          actions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react33.default.Fragment, { children: helpRow(a.key, a.label) }, a.key)),
+          bindings.map((b) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react33.default.Fragment, { children: helpRow(b.keys.join("/"), b.label) }, b.keys[0]))
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: " " }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "  General" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "r" }),
-          "              Generate HTML report"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "V" }),
-          "              Version & changelog"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "?" }),
-          "              Toggle this help"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "Esc" }),
-          "            Close overlay / clear filter / back"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text, { children: [
-          "  ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: "q / Ctrl+C" }),
-          "     Quit"
-        ] })
+        helpRow("r", "Generate HTML report"),
+        helpRow("V", "Version & changelog"),
+        helpRow("?", "Toggle this help"),
+        helpRow("Esc", "Close overlay / clear filter"),
+        helpRow("q / Ctrl+C", "Quit")
       ]
     }
   ) });
 }
-var import_jsx_runtime9;
+var import_react33, import_jsx_runtime9;
 var init_HelpOverlay = __esm({
   async "src/dashboard/ink/HelpOverlay.tsx"() {
     "use strict";
+    import_react33 = __toESM(require_react(), 1);
     await init_build2();
+    init_branding();
+    await init_parseBlessedTags();
     import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
   }
 });
@@ -58497,7 +58573,7 @@ function ChangelogOverlay({ entries, scrollOffset }) {
       "  ",
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { bold: true, color: "cyan", children: [
         "Terminal Dashboard v",
-        "0.12.7"
+        "0.12.8"
       ] }),
       latestDate ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { color: "gray", children: [
         " \u2014 ",
@@ -58678,20 +58754,26 @@ var init_TooSmallOverlay = __esm({
 // src/dashboard/ink/ToastNotification.tsx
 function ToastNotification({ toast }) {
   const color = SEVERITY_COLOR[toast.severity] || "cyan";
+  const icon = SEVERITY_ICON[toast.severity] || "\u25CF";
   const truncMsg = toast.message.length > 56 ? toast.message.substring(0, 53) + "..." : toast.message;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Box_default,
     {
       position: "absolute",
-      marginLeft: Math.max(0, process.stdout.columns - truncMsg.length - 6),
+      marginLeft: Math.max(0, process.stdout.columns - truncMsg.length - 8),
       marginTop: 0,
       borderStyle: "single",
       borderColor: color,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { color, children: truncMsg })
+      paddingX: 1,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { color, children: [
+        icon,
+        " ",
+        truncMsg
+      ] })
     }
   );
 }
-var import_jsx_runtime14, SEVERITY_COLOR;
+var import_jsx_runtime14, SEVERITY_COLOR, SEVERITY_ICON;
 var init_ToastNotification = __esm({
   async "src/dashboard/ink/ToastNotification.tsx"() {
     "use strict";
@@ -58702,6 +58784,14 @@ var init_ToastNotification = __esm({
       warning: "yellow",
       info: "cyan"
     };
+    SEVERITY_ICON = {
+      error: "\u2718",
+      // ✘
+      warning: "\u26A0",
+      // ⚠
+      info: "\u25CF"
+      // ●
+    };
   }
 });
 
@@ -58790,7 +58880,7 @@ function InputSink() {
   return null;
 }
 function MouseProvider({ onMouse, children }) {
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     enableMouse();
     const handler = (data) => {
       const event = parseMouseEvent(data);
@@ -58812,11 +58902,11 @@ function MouseProvider({ onMouse, children }) {
     children
   ] });
 }
-var import_react33, import_jsx_runtime15;
+var import_react34, import_jsx_runtime15;
 var init_MouseProvider = __esm({
   async "src/dashboard/ink/mouse/MouseProvider.tsx"() {
     "use strict";
-    import_react33 = __toESM(require_react(), 1);
+    import_react34 = __toESM(require_react(), 1);
     await init_build2();
     init_mouseProtocol();
     init_parseMouseEvent();
@@ -58838,7 +58928,7 @@ var init_mouse = __esm({
 var CHANGELOG_default;
 var init_CHANGELOG = __esm({
   "CHANGELOG.md"() {
-    CHANGELOG_default = '# Changelog\n\nAll notable changes to the Sidekick Agent Hub CLI will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n## [0.12.7] - 2026-02-27\n\n### Added\n\n- **HTML Session Report**: `sidekick report` command generates a self-contained HTML report and opens it in the default browser\n  - Options: `--session`, `--output`, `--theme` (dark/light), `--no-open`, `--no-thinking`\n  - TUI Dashboard: press `r` to generate and open an HTML report for the current session\n\n## [0.12.6] - 2026-02-26\n\n### Added\n\n- **Session Dump Command**: `sidekick dump` exports session data in text, markdown, or JSON format with `--format`, `--width`, and `--expand` options\n- **Plans Panel Re-enabled**: Plans panel restored in CLI dashboard with plan file discovery from `~/.claude/plans/`\n- **Enhanced Status Bar**: Session info display improved with richer metadata\n\n### Fixed\n\n- **Old snapshot format migration**: Restoring pre-0.12.3 session snapshots no longer shows empty timeline entries\n\n### Changed\n\n- **Phrase library moved to shared**: CLI-specific phrase formatting kept local, all phrase content now from `sidekick-shared`\n\n## [0.12.5] - 2026-02-24\n\n### Fixed\n\n- **Update check too slow to notice new versions**: Reduced npm registry cache TTL from 24 hours to 4 hours so upgrade notices appear sooner after a new release\n\n## [0.12.4] - 2026-02-24\n\n### Fixed\n\n- **Session crash on upgrade**: Fixed `d.timestamp.getTime is not a function` error when restoring tool call data from session snapshots \u2014 `Date` objects were serialized to strings by JSON but not rehydrated on restore, causing the session monitor to crash on first run after upgrading from 0.12.2 to 0.12.3\n\n## [0.12.3] - 2026-02-24\n\n### Added\n\n- **Latest-node indicator**: The most recently added node in tree and boxed mind map views is now marked with a yellow indicator\n- **Plan analytics in mind map**: Tree and boxed views now display plan progress and per-step metrics\n  - Tree view: plan header shows completion stats; steps show complexity, duration, tokens, tool calls, and errors in metadata brackets\n  - Box view: progress bar with completion percentage; steps show right-aligned metrics; subtitle shows step count and total duration\n- **Cross-provider plan extraction**: Shared `PlanExtractor` now handles Claude Code (EnterPlanMode/ExitPlanMode) and OpenCode (`<proposed_plan>` XML) plans \u2014 previously only Codex plans were shown\n- **Enriched plan data model**: Plan steps include duration, token count, tool call count, and error messages\n- **Phase-grouped plan display**: When a plan has phase structure, tree and boxed views group steps under phase headers with context lines from the original plan markdown\n- **Node type filter**: Press `f` on the Mind Map tab to cycle through node type filters (file, tool, task, subagent, command, plan, knowledge-note) \u2014 non-matching sections render dimmed in grey\n\n### Fixed\n\n- **Kanban board regression**: Subagent and plan-step tasks now correctly appear in the kanban board\n\n### Changed\n\n- **Plans panel temporarily disabled**: The Plans panel in the CLI dashboard is disabled until plan-mode event capture is reliably working end-to-end. Plan nodes in the mind map remain active.\n- `DashboardState` now delegates to shared `EventAggregator` instead of maintaining its own aggregation logic\n\n## [0.12.2] - 2026-02-23\n\n### Added\n\n- **Update notifications**: The dashboard now checks the npm registry for newer versions on startup and shows a yellow banner in the status bar when an update is available (e.g., `v0.13.0 available \u2014 npm i -g sidekick-agent-hub`). Results are cached for 24 hours to avoid repeated network requests.\n\n## [0.12.1] - 2026-02-23\n\n### Fixed\n\n- **VS Code integration**: Fixed exit code 127 when the extension launches the CLI dashboard on systems using nvm or volta (node binary not found when shell init is bypassed)\n\n## [0.12.0] - 2026-02-22\n\n### Added\n\n- **"Open CLI Dashboard" VS Code Integration**: New VS Code command `Sidekick: Open CLI Dashboard` launches the TUI dashboard in an integrated terminal\n  - Install the CLI with `npm install -g sidekick-agent-hub`\n\n## [0.11.0] - 2026-02-19\n\n### Added\n\n- **Initial Release**: Full-screen TUI dashboard for monitoring agent sessions from the terminal\n  - Ink-based terminal UI with panels for sessions, tasks, kanban, mind map, notes, decisions, search, files, and git diff\n  - Multi-provider support: auto-detects Claude Code, OpenCode, and Codex sessions\n  - Reads from `~/.config/sidekick/` \u2014 the same data files the VS Code extension writes\n  - Usage: `sidekick dashboard [--project <path>] [--provider <id>]`\n';
+    CHANGELOG_default = '# Changelog\n\nAll notable changes to the Sidekick Agent Hub CLI will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n## [0.12.8] - 2026-02-28\n\n### Changed\n\n- **Dashboard UI/UX Polish**: Visual overhaul for better hierarchy, consistency, and readability\n  - Splash screen and help overlay now display the robot ASCII logo\n  - Toast notifications show severity icons (\u2718 error, \u26A0 warning, \u25CF info) with inner padding\n  - Focused pane uses double-border for clear focus indication\n  - Section dividers (`\u2500\u2500 Title \u2500\u2500\u2500\u2500`) replace bare bold headers in summary, agents, and context attribution\n  - Tab bar: active tab underlined in magenta, inactive tabs dimmed, bracket syntax removed\n  - Status bar: segmented layout with `\u2502` separators; keys bold, labels dim\n  - Summary metrics condensed: elapsed/events/compactions on one line, tokens on one line with cache rate and cost\n  - Sparklines display peak metadata annotations\n  - Progress bars use blessed color tags for consistent coloring\n  - Help overlay uses dot-leader alignment for all keybinding rows\n  - Empty state hints per panel (e.g. "Tasks appear as your agent works.")\n  - Session picker groups sessions by provider with section headers when multiple providers are present\n\n## [0.12.7] - 2026-02-27\n\n### Added\n\n- **HTML Session Report**: `sidekick report` command generates a self-contained HTML report and opens it in the default browser\n  - Options: `--session`, `--output`, `--theme` (dark/light), `--no-open`, `--no-thinking`\n  - TUI Dashboard: press `r` to generate and open an HTML report for the current session\n\n## [0.12.6] - 2026-02-26\n\n### Added\n\n- **Session Dump Command**: `sidekick dump` exports session data in text, markdown, or JSON format with `--format`, `--width`, and `--expand` options\n- **Plans Panel Re-enabled**: Plans panel restored in CLI dashboard with plan file discovery from `~/.claude/plans/`\n- **Enhanced Status Bar**: Session info display improved with richer metadata\n\n### Fixed\n\n- **Old snapshot format migration**: Restoring pre-0.12.3 session snapshots no longer shows empty timeline entries\n\n### Changed\n\n- **Phrase library moved to shared**: CLI-specific phrase formatting kept local, all phrase content now from `sidekick-shared`\n\n## [0.12.5] - 2026-02-24\n\n### Fixed\n\n- **Update check too slow to notice new versions**: Reduced npm registry cache TTL from 24 hours to 4 hours so upgrade notices appear sooner after a new release\n\n## [0.12.4] - 2026-02-24\n\n### Fixed\n\n- **Session crash on upgrade**: Fixed `d.timestamp.getTime is not a function` error when restoring tool call data from session snapshots \u2014 `Date` objects were serialized to strings by JSON but not rehydrated on restore, causing the session monitor to crash on first run after upgrading from 0.12.2 to 0.12.3\n\n## [0.12.3] - 2026-02-24\n\n### Added\n\n- **Latest-node indicator**: The most recently added node in tree and boxed mind map views is now marked with a yellow indicator\n- **Plan analytics in mind map**: Tree and boxed views now display plan progress and per-step metrics\n  - Tree view: plan header shows completion stats; steps show complexity, duration, tokens, tool calls, and errors in metadata brackets\n  - Box view: progress bar with completion percentage; steps show right-aligned metrics; subtitle shows step count and total duration\n- **Cross-provider plan extraction**: Shared `PlanExtractor` now handles Claude Code (EnterPlanMode/ExitPlanMode) and OpenCode (`<proposed_plan>` XML) plans \u2014 previously only Codex plans were shown\n- **Enriched plan data model**: Plan steps include duration, token count, tool call count, and error messages\n- **Phase-grouped plan display**: When a plan has phase structure, tree and boxed views group steps under phase headers with context lines from the original plan markdown\n- **Node type filter**: Press `f` on the Mind Map tab to cycle through node type filters (file, tool, task, subagent, command, plan, knowledge-note) \u2014 non-matching sections render dimmed in grey\n\n### Fixed\n\n- **Kanban board regression**: Subagent and plan-step tasks now correctly appear in the kanban board\n\n### Changed\n\n- **Plans panel temporarily disabled**: The Plans panel in the CLI dashboard is disabled until plan-mode event capture is reliably working end-to-end. Plan nodes in the mind map remain active.\n- `DashboardState` now delegates to shared `EventAggregator` instead of maintaining its own aggregation logic\n\n## [0.12.2] - 2026-02-23\n\n### Added\n\n- **Update notifications**: The dashboard now checks the npm registry for newer versions on startup and shows a yellow banner in the status bar when an update is available (e.g., `v0.13.0 available \u2014 npm i -g sidekick-agent-hub`). Results are cached for 24 hours to avoid repeated network requests.\n\n## [0.12.1] - 2026-02-23\n\n### Fixed\n\n- **VS Code integration**: Fixed exit code 127 when the extension launches the CLI dashboard on systems using nvm or volta (node binary not found when shell init is bypassed)\n\n## [0.12.0] - 2026-02-22\n\n### Added\n\n- **"Open CLI Dashboard" VS Code Integration**: New VS Code command `Sidekick: Open CLI Dashboard` launches the TUI dashboard in an integrated terminal\n  - Install the CLI with `npm install -g sidekick-agent-hub`\n\n## [0.11.0] - 2026-02-19\n\n### Added\n\n- **Initial Release**: Full-screen TUI dashboard for monitoring agent sessions from the terminal\n  - Ink-based terminal UI with panels for sessions, tasks, kanban, mind map, notes, decisions, search, files, and git diff\n  - Multi-provider support: auto-detects Claude Code, OpenCode, and Codex sessions\n  - Reads from `~/.config/sidekick/` \u2014 the same data files the VS Code extension writes\n  - Usage: `sidekick dashboard [--project <path>] [--provider <id>]`\n';
   }
 });
 
@@ -58931,20 +59021,20 @@ function reducer(state, action) {
   }
 }
 function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath, onSessionSwitch, onTogglePin, onGenerateReport }) {
-  const [state, dispatch] = (0, import_react34.useReducer)(reducer, initialState);
+  const [state, dispatch] = (0, import_react35.useReducer)(reducer, initialState);
   const { exit } = use_app_default();
   const { columns, rows } = useTerminalSize();
-  const toastIdRef = (0, import_react34.useRef)(0);
-  const lastAlertCountRef = (0, import_react34.useRef)(0);
-  const alertsInitRef = (0, import_react34.useRef)(false);
-  const prevDetailLineCountRef = (0, import_react34.useRef)(0);
-  (0, import_react34.useEffect)(() => {
+  const toastIdRef = (0, import_react35.useRef)(0);
+  const lastAlertCountRef = (0, import_react35.useRef)(0);
+  const alertsInitRef = (0, import_react35.useRef)(false);
+  const prevDetailLineCountRef = (0, import_react35.useRef)(0);
+  (0, import_react35.useEffect)(() => {
     if (!state.hasReceivedEvents && metrics.eventCount > 0) {
       const prefix = (metrics.sessionStartTime || "").substring(0, 8);
       dispatch({ type: "FIRST_EVENT", sessionPrefix: prefix });
     }
   }, [metrics.eventCount, state.hasReceivedEvents, metrics.sessionStartTime]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!alertsInitRef.current) {
       lastAlertCountRef.current = metrics.eventCount;
       alertsInitRef.current = true;
@@ -58963,7 +59053,7 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
     }
     lastAlertCountRef.current = metrics.eventCount;
   }, [metrics.eventCount, metrics.timeline]);
-  const addToast = (0, import_react34.useCallback)((message, severity) => {
+  const addToast = (0, import_react35.useCallback)((message, severity) => {
     const durations = { error: 4e3, warning: 3e3, info: 2e3 };
     const id = ++toastIdRef.current;
     dispatch({
@@ -58987,7 +59077,7 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
     }
   };
   const sideWidth = getSideWidth();
-  const getFilteredItems = (0, import_react34.useCallback)(() => {
+  const getFilteredItems = (0, import_react35.useCallback)(() => {
     let items = panel.getItems(metrics, staticData);
     if (state.sessionFilter && ["tasks", "kanban", "notes", "decisions", "plans"].includes(panel.id)) {
       if (panel.id === "kanban") {
@@ -59016,7 +59106,7 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
     totalItems: currentItems.length,
     viewportHeight: sideViewportHeight
   });
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (sideScroll.selectedIndex !== state.selectedItemIndex) {
       sideScroll.setSelected(state.selectedItemIndex);
     }
@@ -59038,7 +59128,7 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
   const detailLines = detailContent.split("\n");
   const detailViewportHeight = Math.max(1, rows - 5);
   const activeTab = detailTabs[tabIdx];
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!activeTab?.autoScrollBottom) return;
     if (detailLines.length <= detailViewportHeight) return;
     if (detailLines.length > prevDetailLineCountRef.current) {
@@ -59050,12 +59140,12 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
   if ("activeDetailTabIndex" in panel) {
     panel.activeDetailTabIndex = state.detailTabIndex;
   }
-  const getContextActions = (0, import_react34.useCallback)(() => {
+  const getContextActions = (0, import_react35.useCallback)(() => {
     if (!selectedItem) return [];
     return panel.getActions().filter((a) => !a.condition || a.condition(selectedItem));
   }, [panel, selectedItem]);
   const contextActions = state.overlay === "context-menu" ? getContextActions() : [];
-  const buildPanelHints = (0, import_react34.useCallback)(() => {
+  const buildPanelHints = (0, import_react35.useCallback)(() => {
     const parts = [];
     const bindings = panel.getKeybindings?.() || [];
     for (const b of bindings) {
@@ -59071,7 +59161,7 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
     }
     return parts.length > 0 ? parts.join("  ") + "  " : "";
   }, [panel, selectedItem, state.focusTarget]);
-  const toggleSessionFilter = (0, import_react34.useCallback)(() => {
+  const toggleSessionFilter = (0, import_react35.useCallback)(() => {
     if (state.sessionFilter) {
       dispatch({ type: "SET_SESSION_FILTER", filter: null });
       addToast("Session filter cleared", "info");
@@ -59109,7 +59199,7 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
       addToast("Cannot filter by this item", "info");
     }
   }, [state.sessionFilter, state.activePanelIndex, selectedItem, panels, metrics, staticData, addToast]);
-  const handleMouse = (0, import_react34.useCallback)((event) => {
+  const handleMouse = (0, import_react35.useCallback)((event) => {
     if (state.overlay) {
       if (event.type === "click") {
         dispatch({ type: "SET_OVERLAY", overlay: null });
@@ -59422,7 +59512,8 @@ function Dashboard({ panels, metrics, staticData, isPinned, pendingSessionPath,
           width: sideWidth,
           viewportHeight: sideViewportHeight,
           panelTitle: panel.title,
-          sessionFilterActive: !!state.sessionFilter && ["tasks", "kanban", "notes", "decisions", "plans"].includes(panel.id)
+          sessionFilterActive: !!state.sessionFilter && ["tasks", "kanban", "notes", "decisions", "plans"].includes(panel.id),
+          emptyStateHint: panel.emptyStateHint
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, children: [
@@ -59513,11 +59604,11 @@ function filterKanbanColumn(item, filter) {
     data: { status: colData.status, tasks: filtered }
   };
 }
-var import_react34, import_sidekick_shared9, import_jsx_runtime16, changelogEntries, SIDE_PANEL_WIDTH, NARROW_SIDE_WIDTH, MIN_SCREEN_WIDTH, MIN_SCREEN_HEIGHT, WIDE_SIDE_WIDTH, initialState;
+var import_react35, import_sidekick_shared9, import_jsx_runtime16, changelogEntries, SIDE_PANEL_WIDTH, NARROW_SIDE_WIDTH, MIN_SCREEN_WIDTH, MIN_SCREEN_HEIGHT, WIDE_SIDE_WIDTH, initialState;
 var init_Dashboard = __esm({
   async "src/dashboard/ink/Dashboard.tsx"() {
     "use strict";
-    import_react34 = __toESM(require_react(), 1);
+    import_react35 = __toESM(require_react(), 1);
     await init_build2();
     init_phraseFormatters();
     init_useTerminalSize();
@@ -59770,7 +59861,7 @@ async function dashboardAction(_opts, cmd) {
     (0, import_sidekick_shared10.openInBrowser)(outFile);
   };
   const instance = render2(
-    import_react35.default.createElement(Dashboard, {
+    import_react36.default.createElement(Dashboard, {
       panels,
       metrics: state.getMetrics(),
       staticData,
@@ -59790,7 +59881,7 @@ async function dashboardAction(_opts, cmd) {
     renderTimer = setTimeout(() => {
       renderTimer = null;
       instance.rerender(
-        import_react35.default.createElement(Dashboard, {
+        import_react36.default.createElement(Dashboard, {
           panels,
           metrics: state.getMetrics(),
           staticData,
@@ -59918,11 +60009,11 @@ async function dashboardAction(_opts, cmd) {
   cleanup();
   process.exit(0);
 }
-var import_react35, import_sidekick_shared10, import_sidekick_shared11;
+var import_react36, import_sidekick_shared10, import_sidekick_shared11;
 var init_dashboard = __esm({
   async "src/commands/dashboard.ts"() {
     "use strict";
-    import_react35 = __toESM(require_react(), 1);
+    import_react36 = __toESM(require_react(), 1);
     import_sidekick_shared10 = __toESM(require_dist(), 1);
     import_sidekick_shared11 = __toESM(require_dist(), 1);
     init_cli();
@@ -60103,7 +60194,7 @@ var init_cli = __esm({
     import_sidekick_shared14 = __toESM(require_dist(), 1);
     import_sidekick_shared15 = __toESM(require_dist(), 1);
     program2 = new Command();
-    program2.name("sidekick").description("Query Sidekick project intelligence from the command line").version("0.12.7").option("--json", "Output as JSON").option("--project <path>", "Override project path (default: cwd)").option("--provider <id>", "Provider: claude-code, opencode, codex, auto (default: auto)");
+    program2.name("sidekick").description("Query Sidekick project intelligence from the command line").version("0.12.8").option("--json", "Output as JSON").option("--project <path>", "Override project path (default: cwd)").option("--provider <id>", "Provider: claude-code, opencode, codex, auto (default: auto)");
     dashCmd = new Command("dashboard").description("Full-screen TUI dashboard with live session metrics").option("--session <id>", "Follow a specific session (default: most recent)").option("--replay", "Replay existing events before streaming new ones").action(async (_opts, cmd) => {
       const { dashboardAction: dashboardAction2 } = await init_dashboard().then(() => dashboard_exports);
       return dashboardAction2(_opts, cmd);