opencode-subagent-magazine 1.6.0-beta.2 → 1.6.0-beta.4

package/dist/v2.js

@@ -307,7 +307,8 @@ var SETTING_KEYS = {
   order: `${KV_PREFIX}.order`,
   scrollMode: `${KV_PREFIX}.scroll_mode`,
   open: `${KV_PREFIX}.open`,
-  ttlDays: `${KV_PREFIX}.ttl_days`
+  ttlDays: `${KV_PREFIX}.ttl_days`,
+  border: `${KV_PREFIX}.border`
 };
 function loadSessionData(kv) {
   try {
@@ -329,7 +330,7 @@ function readTTLDays(kv) {
 }
 
 // src/_version.ts
-var PLUGIN_VERSION = "1.6.0-beta.2";
+var PLUGIN_VERSION = "1.6.0-beta.4";
 
 // src/i18n.ts
 var ZH_T = {
@@ -381,7 +382,9 @@ var ZH_T = {
   "cancel.already_ended": "\u4F1A\u8BDD\u5DF2\u7ED3\u675F\uFF0C\u65E0\u9700\u53D6\u6D88",
   "cancel.status_error": "\u65E0\u6CD5\u67E5\u8BE2\u4F1A\u8BDD\u72B6\u6001",
   "cancel.sent": "\u5DF2\u53D1\u9001\u53D6\u6D88\u6307\u4EE4",
-  "cancel.failed": "\u53D6\u6D88\u5931\u8D25"
+  "cancel.failed": "\u53D6\u6D88\u5931\u8D25",
+  "borderShown": "\u9762\u677F\u8FB9\u6846 \u5DF2\u663E\u793A",
+  "borderHidden": "\u9762\u677F\u8FB9\u6846 \u5DF2\u9690\u85CF"
 };
 var EN_T = {
   "panel.title": "SubAgent",
@@ -432,7 +435,9 @@ var EN_T = {
   "cancel.already_ended": "Session already ended, no need to cancel",
   "cancel.status_error": "Cannot query session status",
   "cancel.sent": "Cancel instruction sent",
-  "cancel.failed": "Cancellation failed"
+  "cancel.failed": "Cancellation failed",
+  "borderShown": "Panel border shown",
+  "borderHidden": "Panel border hidden"
 };
 var JA_T = {
   "panel.title": "\u30B5\u30D6\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8",
@@ -483,7 +488,9 @@ var JA_T = {
   "cancel.already_ended": "\u30BB\u30C3\u30B7\u30E7\u30F3\u306F\u65E2\u306B\u7D42\u4E86\u3057\u3066\u3044\u307E\u3059",
   "cancel.status_error": "\u30BB\u30C3\u30B7\u30E7\u30F3\u72B6\u614B\u3092\u7167\u4F1A\u3067\u304D\u307E\u305B\u3093",
   "cancel.sent": "\u30AD\u30E3\u30F3\u30BB\u30EB\u6307\u793A\u3092\u9001\u4FE1\u3057\u307E\u3057\u305F",
-  "cancel.failed": "\u30AD\u30E3\u30F3\u30BB\u30EB\u306B\u5931\u6557\u3057\u307E\u3057\u305F"
+  "cancel.failed": "\u30AD\u30E3\u30F3\u30BB\u30EB\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
+  "borderShown": "\u30D1\u30CD\u30EB\u67A0\u7DDA \u8868\u793A",
+  "borderHidden": "\u30D1\u30CD\u30EB\u67A0\u7DDA \u975E\u8868\u793A"
 };
 var KO_T = {
   "panel.title": "\uC11C\uBE0C \uC5D0\uC774\uC804\uD2B8",
@@ -534,7 +541,9 @@ var KO_T = {
   "cancel.already_ended": "\uC138\uC158\uC774 \uC774\uBBF8 \uC885\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4",
   "cancel.status_error": "\uC138\uC158 \uC0C1\uD0DC\uB97C \uC870\uD68C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4",
   "cancel.sent": "\uCDE8\uC18C \uC9C0\uC2DC\uB97C \uBCF4\uB0C8\uC2B5\uB2C8\uB2E4",
-  "cancel.failed": "\uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"
+  "cancel.failed": "\uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4",
+  "borderShown": "\uD328\uB110 \uD14C\uB450\uB9AC \uD45C\uC2DC",
+  "borderHidden": "\uD328\uB110 \uD14C\uB450\uB9AC \uC228\uAE40"
 };
 var LANGS = { zh: ZH_T, en: EN_T, ja: JA_T, ko: KO_T };
 var LANG_META = [
@@ -809,6 +818,19 @@ function makeCommands(context, api, signals) {
         } catch {
         }
       }
+    },
+    {
+      id: "opencode-subagent-magazine.subagent.border",
+      title: "SubAgent Magazine: Border",
+      description: "Show or hide the panel border",
+      slash: { name: "subagent-border" },
+      palette: true,
+      run: () => {
+        const cur = Boolean(kv.get(SETTING_KEYS.border, false));
+        kv.set(SETTING_KEYS.border, !cur);
+        signals.setBorderVisible(!cur);
+        api.ui.toast(!cur ? t("borderShown") : t("borderHidden"));
+      }
     }
   ];
 }
@@ -832,9 +854,11 @@ import { insertNode as _$insertNode } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
-import { memo as _$memo } from "@opentui/solid";
-import { use as _$use } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { spread as _$spread } from "@opentui/solid";
+import { mergeProps as _$mergeProps } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 import { createMemo, createSignal as createSignal2, createEffect, onMount, onCleanup, untrack, Show, For } from "solid-js";
 
@@ -1057,6 +1081,31 @@ function isDirectChildSession(currentSessionId, eventSessionId, eventSession) {
   return eventSessionId !== currentSessionId && eventSession?.parentID === currentSessionId;
 }
 
+// src/panel/entry-map.ts
+function findSubEntryKey(entries, id, sessionId) {
+  if (sessionId) {
+    for (const [key, entry] of entries) {
+      if (entry.sessionId === sessionId) return key;
+    }
+  }
+  return entries.has(id) ? id : void 0;
+}
+function upsertSubEntry(entries, partial, now = Date.now()) {
+  const key = findSubEntryKey(entries, partial.id, partial.sessionId) ?? partial.id;
+  const existing = entries.get(key);
+  const next = new Map(entries);
+  if (key !== partial.id) next.delete(partial.id);
+  const ended = partial.status === "done" || partial.status === "error" || partial.status === "cancelled";
+  next.set(key, {
+    ...existing ?? { startedAt: now },
+    ...partial,
+    id: existing?.id ?? partial.id,
+    startedAt: existing?.startedAt || partial.startedAt || now,
+    endedAt: ended ? existing?.endedAt || now : void 0
+  });
+  return next;
+}
+
 // src/panel/SubAgentPanel.tsx
 var LEFT_PAD = 4;
 var INDENT = 2;
@@ -1096,7 +1145,7 @@ function SubAgentPanel(props) {
     };
   };
   const loadEntries = (sid) => {
-    const m = /* @__PURE__ */ new Map();
+    let m = /* @__PURE__ */ new Map();
     try {
       const {
         parentSid,
@@ -1106,7 +1155,9 @@ function SubAgentPanel(props) {
       if (rec) {
         const source = isChild ? rec.children?.[sid]?.entries : rec.entries;
         if (source) {
-          for (const e of source) m.set(e.id, e);
+          for (const e of source) {
+            m = upsertSubEntry(m, e);
+          }
         }
       }
     } catch {
@@ -1344,22 +1395,7 @@ function SubAgentPanel(props) {
   let boxEl;
   let disposed = false;
   const upsertEntry = (partial) => {
-    setEntryMap((prev) => {
-      const existing = prev.get(partial.id);
-      const next = new Map(prev);
-      const nowTs = Date.now();
-      const e = partial.status;
-      const ended = e === "done" || e === "error" || e === "cancelled";
-      next.set(partial.id, {
-        ...existing ?? {
-          startedAt: nowTs
-        },
-        ...partial,
-        startedAt: existing?.startedAt || partial.startedAt || nowTs,
-        endedAt: ended ? existing?.endedAt || nowTs : void 0
-      });
-      return next;
-    });
+    setEntryMap((prev) => upsertSubEntry(prev, partial));
   };
   const isDescendantOf = (childId, rootId) => {
     const visited = /* @__PURE__ */ new Set();
@@ -1503,13 +1539,17 @@ function SubAgentPanel(props) {
       if (rawStatus === "error") {
         const id2 = `tool:${String(part.id ?? "")}`;
         if (!part.id) return;
-        const existing = entryMap().get(id2);
+        const stMeta2 = st?.metadata;
+        const errorSid = stMeta2?.session_id !== void 0 ? String(stMeta2.session_id) : stMeta2?.sessionId !== void 0 ? String(stMeta2.sessionId) : void 0;
+        const key = findSubEntryKey(entryMap(), id2, errorSid);
+        const existing = key ? entryMap().get(key) : void 0;
         if (existing) {
           upsertEntry({
-            id: id2,
+            id: existing.id,
             title: existing.title,
             agent: existing.agent,
             prompt: existing.prompt,
+            sessionId: existing.sessionId ?? errorSid,
             status: "error"
           });
         }
@@ -1896,12 +1936,15 @@ function SubAgentPanel(props) {
                     if (!part.id) continue;
                     const st = part.state;
                     const rawStatus = String(st?.status ?? "");
-                    const exists = next.get(id);
+                    const scanStMeta = st?.metadata;
+                    const scanSubSid = scanStMeta?.session_id !== void 0 ? String(scanStMeta.session_id) : scanStMeta?.sessionId !== void 0 ? String(scanStMeta.sessionId) : void 0;
+                    const existingKey = findSubEntryKey(next, id, scanSubSid);
+                    const exists = existingKey ? next.get(existingKey) : void 0;
                     if (!exists && clearedIds.has(id)) continue;
                     if ((rawStatus === "pending" || rawStatus === "") && !exists) continue;
                     if (rawStatus === "error") {
                       if (exists && exists.status === "running") {
-                        next.set(id, {
+                        next.set(existingKey ?? id, {
                           ...exists,
                           status: "error",
                           endedAt: Date.now()
@@ -1912,11 +1955,11 @@ function SubAgentPanel(props) {
                     let status = "running";
                     if (rawStatus === "completed") status = "done";
                     if ((st?.input?.run_in_background === true || st?.input?.background === true) && status === "done") {
-                      const scanStMeta = st?.metadata;
-                      const scanHasChild = scanStMeta?.session_id !== void 0 || scanStMeta?.sessionId !== void 0;
+                      const scanStMeta2 = st?.metadata;
+                      const scanHasChild = scanStMeta2?.session_id !== void 0 || scanStMeta2?.sessionId !== void 0;
                       if (scanHasChild) status = "running";
                     }
-                    if (exists && exists.status !== "running" && exists.status !== "cancel_requested") continue;
+                    if (exists && existingKey === id && exists.status !== "running" && exists.status !== "cancel_requested") continue;
                     if (exists && status === "running") {
                       if (!rawStatus) {
                         const msgTokens = msg?.tokens;
@@ -1937,12 +1980,11 @@ function SubAgentPanel(props) {
                     const desc = input?.description !== void 0 ? String(input.description) : "";
                     const title = desc || truncate(prompt.replace(/\n/g, " ").trim(), 40);
                     let tokens;
-                    const scanStMeta2 = st?.metadata;
-                    const scanSubSid = scanStMeta2?.session_id !== void 0 ? String(scanStMeta2.session_id) : scanStMeta2?.sessionId !== void 0 ? String(scanStMeta2.sessionId) : void 0;
                     if (scanSubSid) tokens = props.api.usage.readSessionTokens(scanSubSid);
                     const ended = status === "done";
-                    next.set(id, {
-                      id,
+                    const entryKey = existingKey ?? id;
+                    next.set(entryKey, {
+                      id: exists?.id ?? id,
                       title,
                       agent,
                       prompt,
@@ -1953,6 +1995,7 @@ function SubAgentPanel(props) {
                       startedAt: exists?.startedAt || Date.now(),
                       endedAt: ended ? exists?.endedAt || Date.now() : void 0
                     });
+                    if (entryKey !== id) next.delete(id);
                   }
                 }
               }
@@ -2098,13 +2141,21 @@ function SubAgentPanel(props) {
       return next;
     });
   };
-  const sep = () => "\u2500".repeat(Math.max(1, panelWidth()));
+  const gutter = createMemo(() => props.borderVisible() ? 6 : 0);
+  const sep = () => "\u2500".repeat(Math.max(1, panelWidth() - gutter()));
+  createEffect(() => {
+    props.borderVisible();
+    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+      const w = Math.max(20, boxEl.width);
+      setPanelWidth((prev) => prev === w ? prev : w);
+    }
+  });
   const expandedMaxLabelW = createMemo(() => {
     const labels = [t("agent.label"), t("status.label"), t("time.label"), t("tokens.label"), t("error.label"), t("cost.label"), t("model.label"), t("todo.label"), t("session.label")];
     return Math.max(...labels.map((l) => visualWidth(l + ": ")));
   });
   const expandedPad = (label) => Math.max(0, expandedMaxLabelW() - visualWidth(label + ": "));
-  const expandedValAvail = () => Math.max(6, panelWidth() - INDENT - expandedMaxLabelW());
+  const expandedValAvail = () => Math.max(6, panelWidth() - gutter() - INDENT - expandedMaxLabelW());
   const summaryParts = createMemo(() => {
     if (!anyEntry()) return null;
     const dot = "\u25CF";
@@ -2133,7 +2184,7 @@ function SubAgentPanel(props) {
     if (!open()) return false;
     const icon = "\u25BC";
     const need = visualWidth(icon) + 1 + visualWidth(t("panel.title")) + versionW + summaryCols();
-    return need <= panelWidth();
+    return need <= panelWidth() - gutter();
   });
   const leftCols = createMemo(() => {
     const icon = open() ? "\u25BC" : "\u25B6";
@@ -2143,25 +2194,36 @@ function SubAgentPanel(props) {
   });
   const spacerCols = createMemo(() => {
     if (!anyEntry()) return 0;
-    return Math.max(0, panelWidth() - leftCols() - summaryCols());
+    return Math.max(0, panelWidth() - gutter() - leftCols() - summaryCols());
   });
-  const valueCols = (label) => Math.max(4, panelWidth() - INDENT - visualWidth(label + ": "));
+  const valueCols = (label) => Math.max(4, panelWidth() - gutter() - INDENT - visualWidth(label + ": "));
   return (() => {
     var _el$ = _$createElement("box"), _el$2 = _$createElement("text"), _el$3 = _$createElement("span"), _el$4 = _$createElement("span");
     _$insertNode(_el$, _el$2);
     var _ref$ = boxEl;
     typeof _ref$ === "function" ? _$use(_ref$, _el$) : boxEl = _el$;
-    _$setProp(_el$, "border", false);
-    _$setProp(_el$, "paddingTop", 0);
-    _$setProp(_el$, "paddingBottom", 0);
-    _$setProp(_el$, "paddingLeft", 0);
-    _$setProp(_el$, "paddingRight", 0);
-    _$setProp(_el$, "flexDirection", "column");
-    _$setProp(_el$, "gap", 0);
-    _$setProp(_el$, "onSizeChange", () => {
-      const w = boxEl ? Math.max(20, boxEl.width ?? 0) : 28;
-      setPanelWidth((prev) => prev === w ? prev : w);
-    });
+    _$spread(_el$, _$mergeProps({
+      get border() {
+        return props.borderVisible();
+      }
+    }, () => props.borderVisible() ? {
+      borderColor: pal().border
+    } : {}, {
+      "paddingTop": 0,
+      "paddingBottom": 0,
+      get paddingLeft() {
+        return props.borderVisible() ? 2 : 0;
+      },
+      get paddingRight() {
+        return props.borderVisible() ? 2 : 0;
+      },
+      "flexDirection": "column",
+      "gap": 0,
+      "onSizeChange": () => {
+        const w = boxEl ? Math.max(20, boxEl.width ?? 0) : 28;
+        setPanelWidth((prev) => prev === w ? prev : w);
+      }
+    }), true);
     _$insertNode(_el$2, _el$3);
     _$insertNode(_el$2, _el$4);
     _$setProp(_el$2, "onMouseUp", () => {
@@ -2358,7 +2420,7 @@ function SubAgentPanel(props) {
                   if (tk) w += visualWidth(tk);
                   return w;
                 };
-                const labelAvail = () => Math.max(6, panelWidth() - LEFT_PAD - suffixW());
+                const labelAvail = () => Math.max(6, panelWidth() - gutter() - LEFT_PAD - suffixW());
                 const labelText = () => {
                   const max2 = labelAvail();
                   const text = entry.title || entry.agent;
@@ -2755,7 +2817,7 @@ ${t("session.toast.copy_failed")}`, {
                           const cancelLabel = () => ` ${t("cancel.label")}`;
                           const dismissLabel = () => ` ${t("dismiss.label")}`;
                           const rightW = (isRunning ? visualWidth(dismissLabel()) : 0) + (isRunning && entry.sessionId ? visualWidth(cancelLabel()) : 0);
-                          const spacerW = () => Math.max(1, panelWidth() - openW() - rightW - 2);
+                          const spacerW = () => Math.max(1, panelWidth() - gutter() - openW() - rightW - 2);
                           return (() => {
                             var _el$91 = _$createElement("box"), _el$95 = _$createElement("text");
                             _$insertNode(_el$91, _el$95);
@@ -2856,7 +2918,7 @@ ${t("session.toast.copy_failed")}`, {
                   const showTop = props.sortOrder() === "desc" ? scrollOffset() > 0 : entryList().length > max() && clampedOffset() < entryList().length - max();
                   const left = showMore ? `  \u2193 ${hiddenBelow()} ${t("scroll.more")}` : "  ";
                   const right = props.sortOrder() === "desc" ? `\u2191 ${t("scroll.top")}` : `\u2193 ${t("scroll.bottom")}`;
-                  const pad = showTop ? Math.max(1, panelWidth() - visualWidth(left) - visualWidth(right)) : 0;
+                  const pad = showTop ? Math.max(1, panelWidth() - gutter() - visualWidth(left) - visualWidth(right)) : 0;
                   return (() => {
                     var _el$100 = _$createElement("box"), _el$101 = _$createElement("text"), _el$102 = _$createElement("span");
                     _$insertNode(_el$100, _el$101);
@@ -2960,6 +3022,9 @@ function PluginRoot(props) {
     get scrollMode() {
       return props.signals.scrollMode;
     },
+    get borderVisible() {
+      return props.signals.borderVisible;
+    },
     get sessionId() {
       return props.sessionID;
     }
@@ -2984,6 +3049,7 @@ var mod = {
     const [maxSignal, setMaxEntries] = createSignal3(Number(api.kv.get(SETTING_KEYS.maxEntries, "10")) || 10);
     const [orderSignal, setSortOrder] = createSignal3(String(api.kv.get(SETTING_KEYS.order, "desc")) === "asc" ? "asc" : "desc");
     const [scrollSignal, setScrollMode] = createSignal3(String(api.kv.get(SETTING_KEYS.scrollMode, "wheel")) === "click" ? "click" : "wheel");
+    const [borderSignal, setBorderVisible] = createSignal3(api.kv.get(SETTING_KEYS.border, false) === true);
     lang = langSignal;
     maxEntries = maxSignal;
     sortOrder = orderSignal;
@@ -2997,6 +3063,8 @@ var mod = {
       setSortOrder,
       scrollMode,
       setScrollMode,
+      borderVisible: borderSignal,
+      setBorderVisible,
       sessionId: ""
     };
     context.ui.slot({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-subagent-magazine",
-  "version": "1.6.0-beta.2",
+  "version": "1.6.0-beta.4",
   "description": "OpenCode TUI plugin monitoring sub-agent invocation status in real time",
   "type": "module",
   "types": "dist/index.d.ts",

package/src/_version.ts

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION="1.6.0-beta.2";
+export const PLUGIN_VERSION="1.6.0-beta.4";

package/src/core/color.ts

@@ -1,70 +1,70 @@
-/** Morandi palette helpers — desaturate any theme color toward a muted fallback. */
-
-export function rgb(raw: unknown): { r: number; g: number; b: number } | null {
-  if (typeof raw === "string" && raw.startsWith("#")) {
-    const h = raw.slice(1)
-    return {
-      r: parseInt(h.slice(0, 2), 16),
-      g: parseInt(h.slice(2, 4), 16),
-      b: parseInt(h.slice(4, 6), 16),
-    }
-  }
-  if (raw && typeof raw === "object") {
-    const o = raw as Record<string, unknown>
-    if (typeof o.r === "number" && typeof o.g === "number" && typeof o.b === "number") {
-      const scale = o.r > 1 || o.g > 1 || o.b > 1 ? 1 : 255
-      return { r: Math.round(o.r * scale), g: Math.round(o.g * scale), b: Math.round(o.b * scale) }
-    }
-  }
-  return null
-}
-
-export function saturation(r: number, g: number, b: number): number {
-  const max = Math.max(r, g, b) / 255
-  const min = Math.min(r, g, b) / 255
-  const delta = max - min
-  if (delta === 0) return 0
-  const L = (max + min) / 2
-  return L <= 0.5 ? delta / (max + min) : delta / (2 - max - min)
-}
-
-function desaturateTo(raw: unknown, maxSat: number, fallback: string): string {
-  const c = rgb(raw)
-  if (!c) return fallback
-  const sat = saturation(c.r, c.g, c.b)
-  if (sat <= maxSat) {
-    return "#" + [c.r, c.g, c.b].map((v) => v.toString(16).padStart(2, "0")).join("")
-  }
-  const luma = c.r * 0.299 + c.g * 0.587 + c.b * 0.114
-  let lo = 0, hi = 1
-  for (let i = 0; i < 12; i++) {
-    const mid = (lo + hi) / 2
-    const nr = Math.round(c.r + (luma - c.r) * mid)
-    const ng = Math.round(c.g + (luma - c.g) * mid)
-    const nb = Math.round(c.b + (luma - c.b) * mid)
-    if (saturation(nr, ng, nb) > maxSat) lo = mid
-    else hi = mid
-  }
-  const nr = Math.round(c.r + (luma - c.r) * hi)
-  const ng = Math.round(c.g + (luma - c.g) * hi)
-  const nb = Math.round(c.b + (luma - c.b) * hi)
-  return "#" + [nr, ng, nb].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("")
-}
-
-function dimColor(hex: string, factor = 0.5): string {
-  const c = rgb(hex)
-  if (!c) return hex
-  const r = Math.round(c.r * factor)
-  const g = Math.round(c.g * factor)
-  const b = Math.round(c.b * factor)
-  return "#" + [r, g, b].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("")
-}
-
-export const FALLBACK = {
-  primary: "#8B9DAF", text: "#C5C5BB", muted: "#7A7A72",
-  success: "#9CAF8B", warning: "#C5B88D", error: "#B08A8A", border: "#6B6B63",
-} as const
-
-export const MAX_SAT = 0.28
-
-export { desaturateTo, dimColor }
+/** Morandi palette helpers — desaturate any theme color toward a muted fallback. */
+
+export function rgb(raw: unknown): { r: number; g: number; b: number } | null {
+  if (typeof raw === "string" && raw.startsWith("#")) {
+    const h = raw.slice(1)
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16),
+    }
+  }
+  if (raw && typeof raw === "object") {
+    const o = raw as Record<string, unknown>
+    if (typeof o.r === "number" && typeof o.g === "number" && typeof o.b === "number") {
+      const scale = o.r > 1 || o.g > 1 || o.b > 1 ? 1 : 255
+      return { r: Math.round(o.r * scale), g: Math.round(o.g * scale), b: Math.round(o.b * scale) }
+    }
+  }
+  return null
+}
+
+export function saturation(r: number, g: number, b: number): number {
+  const max = Math.max(r, g, b) / 255
+  const min = Math.min(r, g, b) / 255
+  const delta = max - min
+  if (delta === 0) return 0
+  const L = (max + min) / 2
+  return L <= 0.5 ? delta / (max + min) : delta / (2 - max - min)
+}
+
+function desaturateTo(raw: unknown, maxSat: number, fallback: string): string {
+  const c = rgb(raw)
+  if (!c) return fallback
+  const sat = saturation(c.r, c.g, c.b)
+  if (sat <= maxSat) {
+    return "#" + [c.r, c.g, c.b].map((v) => v.toString(16).padStart(2, "0")).join("")
+  }
+  const luma = c.r * 0.299 + c.g * 0.587 + c.b * 0.114
+  let lo = 0, hi = 1
+  for (let i = 0; i < 12; i++) {
+    const mid = (lo + hi) / 2
+    const nr = Math.round(c.r + (luma - c.r) * mid)
+    const ng = Math.round(c.g + (luma - c.g) * mid)
+    const nb = Math.round(c.b + (luma - c.b) * mid)
+    if (saturation(nr, ng, nb) > maxSat) lo = mid
+    else hi = mid
+  }
+  const nr = Math.round(c.r + (luma - c.r) * hi)
+  const ng = Math.round(c.g + (luma - c.g) * hi)
+  const nb = Math.round(c.b + (luma - c.b) * hi)
+  return "#" + [nr, ng, nb].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("")
+}
+
+function dimColor(hex: string, factor = 0.5): string {
+  const c = rgb(hex)
+  if (!c) return hex
+  const r = Math.round(c.r * factor)
+  const g = Math.round(c.g * factor)
+  const b = Math.round(c.b * factor)
+  return "#" + [r, g, b].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("")
+}
+
+export const FALLBACK = {
+  primary: "#8B9DAF", text: "#C5C5BB", muted: "#7A7A72",
+  success: "#9CAF8B", warning: "#C5B88D", error: "#B08A8A", border: "#6B6B63",
+} as const
+
+export const MAX_SAT = 0.28
+
+export { desaturateTo, dimColor }

package/src/core/format.ts

@@ -1,61 +1,61 @@
-/** Visual width of a single character (CJK/wide chars count as 2). */
-function charColumns(c: string): number {
-  const code = c.codePointAt(0) ?? 0
-  if (code < 0x20) return 0
-  if (code < 0x7f) return 1
-  if (code < 0xa0) return 0
-  if (
-    (code >= 0x1100 && code <= 0x115f) ||
-    (code >= 0x2e80 && code <= 0xa4cf) ||
-    (code >= 0xac00 && code <= 0xd7a3) ||
-    (code >= 0xf900 && code <= 0xfaff) ||
-    (code >= 0xfe10 && code <= 0xfe6f) ||
-    (code >= 0xff01 && code <= 0xff60) ||
-    (code >= 0xffe0 && code <= 0xffe6) ||
-    (code >= 0x1f300 && code <= 0x1f64f) ||
-    (code >= 0x20000 && code <= 0x3fffd)
-  )
-    return 2
-  return 1
-}
-
-export function visualWidth(s: string): number {
-  let w = 0
-  for (const c of s) w += charColumns(c)
-  return w
-}
-
-export function truncate(text: string, maxCols: number): string {
-  if (visualWidth(text) <= maxCols) return text
-  let cols = 0
-  let i = 0
-  for (const c of text) {
-    const w = charColumns(c)
-    if (cols + w > maxCols - 1) break
-    cols += w
-    i += c.length
-  }
-  return text.slice(0, i) + "\u2026"
-}
-
-export function fmtDurationShort(ms: number, running: boolean): string {
-  if (running && ms < 2000) return ""
-  if (ms < 1000) return (ms / 1000).toFixed(2) + "s"
-  if (ms < 60000) return (ms / 1000).toFixed(2) + "s"
-  const m = Math.floor(ms / 60000)
-  const s = Math.round((ms % 60000) / 1000)
-  return `${m}m${s}s`
-}
-
-export function fmtTokens(n: number): string {
-  if (n < 1000) return `${n}`
-  if (n < 1000000) return `${(n / 1000).toFixed(1)}k`
-  return `${(n / 1000000).toFixed(1)}M`
-}
-
-export function safeErrorMsg(err: unknown): string {
-  if (!err) return ""
-  if (typeof err === "string") return err
-  if (typeof err === "object") return String((err as any).message || (err as any).code || "")
-  return ""
-}
+/** Visual width of a single character (CJK/wide chars count as 2). */
+function charColumns(c: string): number {
+  const code = c.codePointAt(0) ?? 0
+  if (code < 0x20) return 0
+  if (code < 0x7f) return 1
+  if (code < 0xa0) return 0
+  if (
+    (code >= 0x1100 && code <= 0x115f) ||
+    (code >= 0x2e80 && code <= 0xa4cf) ||
+    (code >= 0xac00 && code <= 0xd7a3) ||
+    (code >= 0xf900 && code <= 0xfaff) ||
+    (code >= 0xfe10 && code <= 0xfe6f) ||
+    (code >= 0xff01 && code <= 0xff60) ||
+    (code >= 0xffe0 && code <= 0xffe6) ||
+    (code >= 0x1f300 && code <= 0x1f64f) ||
+    (code >= 0x20000 && code <= 0x3fffd)
+  )
+    return 2
+  return 1
+}
+
+export function visualWidth(s: string): number {
+  let w = 0
+  for (const c of s) w += charColumns(c)
+  return w
+}
+
+export function truncate(text: string, maxCols: number): string {
+  if (visualWidth(text) <= maxCols) return text
+  let cols = 0
+  let i = 0
+  for (const c of text) {
+    const w = charColumns(c)
+    if (cols + w > maxCols - 1) break
+    cols += w
+    i += c.length
+  }
+  return text.slice(0, i) + "\u2026"
+}
+
+export function fmtDurationShort(ms: number, running: boolean): string {
+  if (running && ms < 2000) return ""
+  if (ms < 1000) return (ms / 1000).toFixed(2) + "s"
+  if (ms < 60000) return (ms / 1000).toFixed(2) + "s"
+  const m = Math.floor(ms / 60000)
+  const s = Math.round((ms % 60000) / 1000)
+  return `${m}m${s}s`
+}
+
+export function fmtTokens(n: number): string {
+  if (n < 1000) return `${n}`
+  if (n < 1000000) return `${(n / 1000).toFixed(1)}k`
+  return `${(n / 1000000).toFixed(1)}M`
+}
+
+export function safeErrorMsg(err: unknown): string {
+  if (!err) return ""
+  if (typeof err === "string") return err
+  if (typeof err === "object") return String((err as any).message || (err as any).code || "")
+  return ""
+}