@cortexkit/aft-opencode 0.56.1 → 0.57.0

package/src/tui-compiled/sidebar-view.tsx

@@ -0,0 +1,815 @@
+import { createComponent as _$createComponent } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { createTextNode as _$createTextNode } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { memo as _$memo } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { effect as _$effect } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { insertNode as _$insertNode } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { insert as _$insert } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { setProp as _$setProp } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { createElement as _$createElement } from "opentui:runtime-module:%40opentui%2Fsolid";
+/** @jsxImportSource @opentui/solid */
+// @ts-nocheck
+
+// The AFT sidebar panel, shared by both OpenCode hosts.
+//
+// Everything that decides what the panel *draws* lives here and takes the
+// status snapshot, the user's preferences and a colour palette as plain
+// inputs. The two hosts differ only in how a component is mounted and how the
+// theme arrives, so those two things stay at the edge (sidebar.tsx for the
+// slot-plugin host, v2.tsx for the GA host) and the body below is rendered
+// identically by both. Without this split the second host drifts into a
+// smaller, differently-worded panel, which is exactly what happened before.
+
+import { createMemo, createSignal, onCleanup } from "opentui:runtime-module:solid-js";
+import { formatSemanticIndexStatus, formatSemanticRefreshing, semanticIndexStatusKind, worktreeCacheRoleNote } from "../shared/status";
+import { badgeTextColor } from "./badge-contrast";
+import { DEFAULT_PREFS, persistCollapsedIfEnabled, readTuiPreferencesFile, resolveAftPrefs, seedCollapsedFromPrefs, watchTuiPreferences } from "./preferences";
+const SINGLE_BORDER = {
+  type: "single"
+};
+
+/**
+ * A colour is whatever the host's theme hands us: OpenTUI accepts both its own
+ * RGBA instances and hex strings, and the two hosts spell their themes
+ * differently, so the panel never looks inside a colour — it only passes it on.
+ */
+
+/**
+ * The colours the panel draws with, named after their role rather than after
+ * either host's theme keys. Each host resolves its own theme into this shape
+ * before rendering; see resolveV1Palette / resolveV2Palette at the edges.
+ */
+
+function hexChannels(value) {
+  const hex = value.trim().replace(/^#/, "");
+  if (hex.length !== 3 && hex.length !== 6 && hex.length !== 8) return null;
+  const wide = hex.length === 3 ? [...hex].map(c => c + c).join("") : hex;
+  const int = Number.parseInt(wide.slice(0, 6), 16);
+  if (Number.isNaN(int)) return null;
+  const alpha = wide.length === 8 ? Number.parseInt(wide.slice(6, 8), 16) / 255 : 1;
+  return {
+    r: (int >> 16 & 0xff) / 255,
+    g: (int >> 8 & 0xff) / 255,
+    b: (int & 0xff) / 255,
+    a: alpha
+  };
+}
+
+/**
+ * Read a colour's 0..1 channels for the badge contrast decision only. OpenTUI's
+ * RGBA already exposes r/g/b/a getters in that range; a hex string has to be
+ * parsed. Anything else returns null and the caller keeps its existing choice
+ * rather than guessing.
+ */
+function colorChannels(value) {
+  if (typeof value === "string") return hexChannels(value);
+  if (value && typeof value === "object") {
+    const candidate = value;
+    if (typeof candidate.r === "number" && typeof candidate.g === "number") {
+      if (typeof candidate.b !== "number") return null;
+      return {
+        r: candidate.r,
+        g: candidate.g,
+        b: candidate.b,
+        a: candidate.a
+      };
+    }
+  }
+  return null;
+}
+
+/**
+ * Text colour for a label drawn on the accent badge. badgeTextColor works on
+ * plain channels, but the value handed back to OpenTUI has to be the host's
+ * original colour object, so the decision is made on the channels and then
+ * mapped back.
+ */
+export function badgeForeground(accent, background) {
+  const accentChannels = colorChannels(accent);
+  const backgroundChannels = colorChannels(background);
+  if (!accentChannels || !backgroundChannels) return background;
+  const picked = badgeTextColor(accentChannels, backgroundChannels);
+  return picked === backgroundChannels ? background : picked;
+}
+function formatBytes(n) {
+  if (!Number.isFinite(n) || n <= 0) return "—";
+  if (n >= 1_073_741_824) return `${(n / 1_073_741_824).toFixed(1)} GB`;
+  if (n >= 1_048_576) return `${(n / 1_048_576).toFixed(1)} MB`;
+  if (n >= 1_024) return `${Math.round(n / 1_024)} KB`;
+  return `${n} B`;
+}
+function formatCount(n) {
+  if (n == null || !Number.isFinite(n)) return "—";
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
+  return String(n);
+}
+
+/** Tagged rows for the Compression section. Each scope (Session / Project)
+ * emits a "scope" header followed by two "stat" rows — Tokens Saved and
+ * Compression Ratio — so the renderer can use the same StatRow layout as
+ * Search Index / Semantic Index above. Pi's monospace overlay and the
+ * OpenCode TUI dialog/sidebar all consume this same shape. */
+
+function appendScope(rows, label, scope) {
+  const savings = scope.savings_tokens;
+  const pct = scope.original_tokens > 0 ? Math.round(savings / scope.original_tokens * 100) : 0;
+  rows.push({
+    kind: "scope",
+    label
+  });
+  rows.push({
+    kind: "stat",
+    label: "Tokens Saved",
+    value: savings.toLocaleString("en-US")
+  });
+  rows.push({
+    kind: "stat",
+    label: "Compression Ratio",
+    value: `${pct}%`
+  });
+}
+export function formatCompressionSidebarRows(compression) {
+  if (!compression || compression.project.events <= 0) return [];
+  const rows = [];
+  if (compression.session.events > 0) {
+    appendScope(rows, "Session", compression.session);
+  }
+  appendScope(rows, "Project", compression.project);
+  return rows;
+}
+
+// Map an index status word to (label, theme color name). The label is what we
+// want the user to see; the color encodes severity so the eye lands on trouble.
+//
+// The tone comes from the same classification the label uses
+// (`semanticIndexStatusKind` in @cortexkit/aft-bridge), so a word cannot be
+// readable in one column and unrecognised grey in the other.
+// `backend_unavailable` used to fall through to the default arm: a real
+// embedding-backend outage was drawn in the same muted grey as a word the
+// renderer has no idea about, which reads as noise rather than as a condition
+// the user has to act on.
+export function statusDisplay(status) {
+  const label = status || "unknown";
+  switch (semanticIndexStatusKind(status)) {
+    case "ready":
+      return {
+        label,
+        tone: "ok"
+      };
+    case "progress":
+      return {
+        label,
+        tone: "warn"
+      };
+    case "failure":
+      return {
+        label,
+        tone: "err"
+      };
+    case "inactive":
+      return {
+        label,
+        tone: "muted"
+      };
+    default:
+      // Nothing is known about this word, so grey is honest here: it says the
+      // renderer has no reading to offer, not that everything is fine.
+      return {
+        label,
+        tone: "muted"
+      };
+  }
+}
+const StatRow = props => {
+  const fg = createMemo(() => {
+    switch (props.tone) {
+      case "ok":
+        return props.palette.success;
+      case "warn":
+        return props.palette.warning;
+      case "err":
+        return props.palette.error;
+      case "muted":
+        return props.palette.textMuted;
+      case "accent":
+        return props.palette.accent;
+      default:
+        return props.palette.text;
+    }
+  });
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("text"),
+      _el$3 = _$createElement("text"),
+      _el$4 = _$createElement("b");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$3);
+    _$setProp(_el$, "width", "100%");
+    _$setProp(_el$, "flexDirection", "row");
+    _$setProp(_el$, "justifyContent", "space-between");
+    _$insert(_el$2, () => props.label);
+    _$insertNode(_el$3, _el$4);
+    _$insert(_el$4, () => props.value);
+    _$effect(_p$ => {
+      var _v$ = props.palette.textMuted,
+        _v$2 = fg();
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$3, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+};
+const SectionHeader = props => (() => {
+  var _el$5 = _$createElement("box"),
+    _el$6 = _$createElement("text"),
+    _el$7 = _$createElement("b");
+  _$insertNode(_el$5, _el$6);
+  _$setProp(_el$5, "width", "100%");
+  _$insertNode(_el$6, _el$7);
+  _$insert(_el$7, () => props.title);
+  _$effect(_p$ => {
+    var _v$3 = props.marginTop ?? 1,
+      _v$4 = props.palette.text;
+    _v$3 !== _p$.e && (_p$.e = _$setProp(_el$5, "marginTop", _v$3, _p$.e));
+    _v$4 !== _p$.t && (_p$.t = _$setProp(_el$6, "fg", _v$4, _p$.t));
+    return _p$;
+  }, {
+    e: undefined,
+    t: undefined
+  });
+  return _el$5;
+})();
+
+// Map a status tone to a palette color — used for the collapsed-view status dots.
+function toneColor(palette, tone) {
+  switch (tone) {
+    case "ok":
+      return palette.success;
+    case "warn":
+      return palette.warning;
+    case "err":
+      return palette.error;
+    default:
+      return palette.textMuted;
+  }
+}
+
+// Collapsed-view row: label on the left, a status dot (or compact value) on the
+// right. Mirrors the expanded StatRow layout so the columns line up.
+const CollapsedRow = props => (() => {
+  var _el$8 = _$createElement("box"),
+    _el$9 = _$createElement("text");
+  _$insertNode(_el$8, _el$9);
+  _$setProp(_el$8, "width", "100%");
+  _$setProp(_el$8, "flexDirection", "row");
+  _$setProp(_el$8, "justifyContent", "space-between");
+  _$insert(_el$9, () => props.label);
+  _$insert(_el$8, () => props.children, null);
+  _$effect(_$p => _$setProp(_el$9, "fg", props.palette.textMuted, _$p));
+  return _el$8;
+})();
+
+// Compact "saved / ratio" string for the collapsed Compression row — e.g.
+// "7.6M / 64%". Uses the local `formatCount` (not the aft-bridge token
+// formatter) so the TUI bundle doesn't pull the bridge barrel, which exports
+// URL-fetch helpers unsuitable for Bun's TUI runtime. Returns null when no
+// compression has been recorded yet.
+export function collapsedCompressionValue(compression) {
+  if (!compression || compression.project.events <= 0) return null;
+  const {
+    savings_tokens,
+    original_tokens
+  } = compression.project;
+  const pct = original_tokens > 0 ? Math.round(savings_tokens / original_tokens * 100) : 0;
+  return `${formatCount(savings_tokens)} / ${pct}%`;
+}
+// Degraded-mode reason → human-readable hint. Distinct strings per reason
+// because the UX direction is different: "home_root" tells the user to open a
+// real project subdirectory, "search_too_many_files" tells them the tree is too
+// big for full indexing, and "watcher_unavailable" is an honest soft
+// degradation (AFT continues without live external-change invalidation).
+export function degradedReasonLabel(reason) {
+  if (reason === "home_root") {
+    return "project root is your home directory";
+  }
+  if (reason.startsWith("search_too_many_files:")) {
+    const threshold = reason.split(":")[1] ?? "20000";
+    return `project exceeds ${threshold} files`;
+  }
+  if (reason === "watcher_unavailable") {
+    return "file watcher unavailable; continuing without live external-change invalidation";
+  }
+  return reason; // unknown reason — surface verbatim so users can grep logs
+}
+// Missing categories are intentionally muted: a green light requires an
+// explicit zero for every category that feeds that light.
+export function collapsedHealthLights(statusBar) {
+  if (!statusBar) return null;
+  const diagnostics = statusBar.errors !== undefined && statusBar.errors > 0 ? "err" : statusBar.warnings !== undefined && statusBar.warnings > 0 ? "warn" : statusBar.errors === 0 && statusBar.warnings === 0 ? "ok" : "muted";
+  const codeValues = [statusBar.dead_code, statusBar.unused_exports, statusBar.duplicates];
+  const code = codeValues.some(value => value !== undefined && value > 0) ? "warn" : codeValues.every(value => value === 0) ? "ok" : "muted";
+  const todos = statusBar.todos === undefined ? "muted" : statusBar.todos > 0 ? "warn" : "ok";
+  return {
+    diagnostics,
+    code,
+    todos
+  };
+}
+/**
+ * The preference-backed state the panel needs: which sections are enabled, the
+ * header label, and whether the panel is collapsed. Both hosts read the same
+ * shared `tui-preferences.jsonc`, so this lives here rather than being wired
+ * up twice.
+ *
+ * `onChange` lets a host that does not repaint on its own ask for a frame
+ * after preferences or the collapsed flag change.
+ */
+export function createSidebarPreferences(onChange) {
+  const [prefs, setPrefs] = createSignal(structuredClone(DEFAULT_PREFS));
+  const [collapsed, setCollapsed] = createSignal(seedCollapsedFromPrefs(DEFAULT_PREFS));
+  const reload = async () => {
+    const root = await readTuiPreferencesFile();
+    const next = resolveAftPrefs(root);
+    setPrefs(next);
+    setCollapsed(seedCollapsedFromPrefs(next));
+    onChange?.();
+  };
+  void reload();
+  const unwatch = watchTuiPreferences(() => {
+    void reload();
+  });
+  onCleanup(unwatch);
+  const toggleCollapsed = () => {
+    setCollapsed(current => {
+      const next = !current;
+      persistCollapsedIfEnabled(prefs(), next);
+      return next;
+    });
+    onChange?.();
+  };
+  return {
+    prefs,
+    collapsed,
+    toggleCollapsed
+  };
+}
+
+/**
+ * The whole sidebar body. Both hosts render this component; neither adds rows
+ * of its own, so a section added or removed here shows up in both at once.
+ */
+export const AftSidebarPanel = props => {
+  const s = () => props.snapshot;
+
+  // Lazy-bridge: while AFT has no live bridge yet, the RPC server returns a
+  // synthetic snapshot with `cache_role === "not_initialized"`. In that state
+  // every metric is unknown by design — not "disabled" — so we hide the
+  // version line and the entire Search Index / Semantic Index / Compression
+  // grid until a first tool call warms the bridge. Users were reading the
+  // pre-init `vunknown` + `Status: unknown` rows as broken state instead of
+  // "AFT has not been used yet for this project".
+  const notInitialized = () => s()?.cache_role === "not_initialized";
+
+  // Pre-compute display values so the JSX stays readable. createMemo for
+  // each derived field would be overkill — these are cheap derivations.
+  const searchStatus = () => statusDisplay(s()?.search_index?.status ?? "disabled");
+  const semanticStatus = () => {
+    const rawStatus = s()?.semantic_index?.status ?? "disabled";
+    const display = statusDisplay(rawStatus);
+    return {
+      ...display,
+      // The error is passed through so a capability failure (a missing ONNX
+      // Runtime) is named here instead of arriving as a bare status word.
+      label: formatSemanticIndexStatus(rawStatus, s()?.semantic_index?.stage, s()?.semantic_index?.error)
+    };
+  };
+  const semanticRefreshing = () => formatSemanticRefreshing(s()?.semantic_index?.refreshing_count ?? 0);
+  const trigramBytes = () => s()?.disk?.trigram_disk_bytes ?? 0;
+  const semanticBytes = () => s()?.disk?.semantic_disk_bytes ?? 0;
+  const compressionRows = () => formatCompressionSidebarRows(s()?.compression);
+  const statusBar = () => s()?.status_bar;
+  const degradedSummary = () => {
+    const snap = s();
+    if (!snap?.degraded) return null;
+    const reasons = snap.degraded_reasons ?? [];
+    if (reasons.length === 0) return null;
+    return reasons.map(degradedReasonLabel).join("; ");
+  };
+
+  // Worktree borrow is a shared-index arrangement, not a degraded_reasons
+  // entry. Keep this muted and separate from the DEGRADED badge above.
+  const worktreeNote = () => worktreeCacheRoleNote(s()?.cache_role);
+  return (() => {
+    var _el$0 = _$createElement("box"),
+      _el$1 = _$createElement("box"),
+      _el$10 = _$createElement("box"),
+      _el$11 = _$createElement("box"),
+      _el$12 = _$createElement("text"),
+      _el$13 = _$createElement("b");
+    _$insertNode(_el$0, _el$1);
+    _$setProp(_el$0, "width", "100%");
+    _$setProp(_el$0, "flexDirection", "column");
+    _$setProp(_el$0, "border", SINGLE_BORDER);
+    _$setProp(_el$0, "paddingTop", 1);
+    _$setProp(_el$0, "paddingBottom", 1);
+    _$setProp(_el$0, "paddingLeft", 1);
+    _$setProp(_el$0, "paddingRight", 1);
+    _$insertNode(_el$1, _el$10);
+    _$setProp(_el$1, "flexDirection", "row");
+    _$setProp(_el$1, "justifyContent", "space-between");
+    _$setProp(_el$1, "alignItems", "center");
+    _$setProp(_el$1, "onMouseDown", () => {
+      if (notInitialized()) return;
+      props.onToggleCollapsed();
+    });
+    _$insertNode(_el$10, _el$11);
+    _$setProp(_el$10, "flexDirection", "row");
+    _$setProp(_el$10, "alignItems", "center");
+    _$insertNode(_el$11, _el$12);
+    _$setProp(_el$11, "paddingLeft", 1);
+    _$setProp(_el$11, "paddingRight", 1);
+    _$insertNode(_el$12, _el$13);
+    _$insert(_el$13, (() => {
+      var _c$ = _$memo(() => !!notInitialized());
+      return () => _c$() ? "" : props.collapsed ? "▶ " : "▼ ";
+    })(), null);
+    _$insert(_el$13, () => props.prefs.header.label, null);
+    _$insert(_el$10, (() => {
+      var _c$2 = _$memo(() => !!s()?.degraded);
+      return () => _c$2() && (() => {
+        var _el$14 = _$createElement("box"),
+          _el$15 = _$createElement("text"),
+          _el$16 = _$createElement("b");
+        _$insertNode(_el$14, _el$15);
+        _$setProp(_el$14, "paddingLeft", 1);
+        _$setProp(_el$14, "paddingRight", 1);
+        _$setProp(_el$14, "marginLeft", 1);
+        _$insertNode(_el$15, _el$16);
+        _$insertNode(_el$16, _$createTextNode(`DEGRADED`));
+        _$effect(_p$ => {
+          var _v$8 = props.palette.warning,
+            _v$9 = badgeForeground(props.palette.warning, props.palette.background);
+          _v$8 !== _p$.e && (_p$.e = _$setProp(_el$14, "backgroundColor", _v$8, _p$.e));
+          _v$9 !== _p$.t && (_p$.t = _$setProp(_el$15, "fg", _v$9, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$14;
+      })();
+    })(), null);
+    _$insert(_el$1, (() => {
+      var _c$3 = _$memo(() => !!(!notInitialized() && props.prefs.header.showVersion));
+      return () => _c$3() && (() => {
+        var _el$18 = _$createElement("text"),
+          _el$19 = _$createTextNode(`v`);
+        _$insertNode(_el$18, _el$19);
+        _$insert(_el$18, () => s()?.version ?? props.pluginVersion, null);
+        _$effect(_$p => _$setProp(_el$18, "fg", props.palette.textMuted, _$p));
+        return _el$18;
+      })();
+    })(), null);
+    _$insert(_el$0, (() => {
+      var _c$4 = _$memo(() => !!(s()?.degraded && degradedSummary()));
+      return () => _c$4() && (() => {
+        var _el$20 = _$createElement("box"),
+          _el$21 = _$createElement("text"),
+          _el$22 = _$createTextNode(`⚠ `);
+        _$insertNode(_el$20, _el$21);
+        _$setProp(_el$20, "marginTop", 1);
+        _$setProp(_el$20, "width", "100%");
+        _$insertNode(_el$21, _el$22);
+        _$insert(_el$21, degradedSummary, null);
+        _$effect(_$p => _$setProp(_el$21, "fg", props.palette.warning, _$p));
+        return _el$20;
+      })();
+    })(), null);
+    _$insert(_el$0, (() => {
+      var _c$5 = _$memo(() => !!(!notInitialized() && worktreeNote()));
+      return () => _c$5() && (() => {
+        var _el$23 = _$createElement("box"),
+          _el$24 = _$createElement("text");
+        _$insertNode(_el$23, _el$24);
+        _$setProp(_el$23, "marginTop", 1);
+        _$setProp(_el$23, "width", "100%");
+        _$insert(_el$24, worktreeNote);
+        _$effect(_$p => _$setProp(_el$24, "fg", props.palette.textMuted, _$p));
+        return _el$23;
+      })();
+    })(), null);
+    _$insert(_el$0, (() => {
+      var _c$6 = _$memo(() => !!notInitialized());
+      return () => _c$6() && (() => {
+        var _el$25 = _$createElement("box"),
+          _el$26 = _$createElement("text");
+        _$insertNode(_el$25, _el$26);
+        _$setProp(_el$25, "marginTop", 1);
+        _$setProp(_el$25, "width", "100%");
+        _$insert(_el$26, () => s().message || "AFT bridge is now spawned lazily, information here will be populated after first tool call.");
+        _$effect(_$p => _$setProp(_el$26, "fg", props.palette.textMuted, _$p));
+        return _el$25;
+      })();
+    })(), null);
+    _$insert(_el$0, (() => {
+      var _c$7 = _$memo(() => !!(!notInitialized() && props.collapsed));
+      return () => _c$7() && (() => {
+        var _el$27 = _$createElement("box");
+        _$setProp(_el$27, "width", "100%");
+        _$setProp(_el$27, "flexDirection", "column");
+        _$insert(_el$27, (() => {
+          var _c$9 = _$memo(() => !!props.prefs.sections.searchIndex);
+          return () => _c$9() && _$createComponent(CollapsedRow, {
+            get palette() {
+              return props.palette;
+            },
+            label: "Search Index",
+            get children() {
+              var _el$28 = _$createElement("text");
+              _$insertNode(_el$28, _$createTextNode(`●`));
+              _$effect(_$p => _$setProp(_el$28, "fg", toneColor(props.palette, searchStatus().tone), _$p));
+              return _el$28;
+            }
+          });
+        })(), null);
+        _$insert(_el$27, (() => {
+          var _c$0 = _$memo(() => !!props.prefs.sections.semanticIndex);
+          return () => _c$0() && _$createComponent(CollapsedRow, {
+            get palette() {
+              return props.palette;
+            },
+            label: "Semantic Index",
+            get children() {
+              var _el$30 = _$createElement("text");
+              _$insertNode(_el$30, _$createTextNode(`●`));
+              _$effect(_$p => _$setProp(_el$30, "fg", toneColor(props.palette, semanticStatus().tone), _$p));
+              return _el$30;
+            }
+          });
+        })(), null);
+        _$insert(_el$27, (() => {
+          var _c$1 = _$memo(() => !!(props.prefs.sections.codeHealth && collapsedHealthLights(statusBar())));
+          return () => _c$1() && _$createComponent(CollapsedRow, {
+            get palette() {
+              return props.palette;
+            },
+            label: "Code Health",
+            get children() {
+              var _el$32 = _$createElement("box"),
+                _el$33 = _$createElement("text"),
+                _el$35 = _$createElement("text"),
+                _el$37 = _$createElement("text");
+              _$insertNode(_el$32, _el$33);
+              _$insertNode(_el$32, _el$35);
+              _$insertNode(_el$32, _el$37);
+              _$setProp(_el$32, "flexDirection", "row");
+              _$setProp(_el$32, "gap", 1);
+              _$insertNode(_el$33, _$createTextNode(`●`));
+              _$insertNode(_el$35, _$createTextNode(`●`));
+              _$insertNode(_el$37, _$createTextNode(`●`));
+              _$effect(_p$ => {
+                var _v$0 = toneColor(props.palette, collapsedHealthLights(statusBar()).diagnostics),
+                  _v$1 = toneColor(props.palette, collapsedHealthLights(statusBar()).code),
+                  _v$10 = toneColor(props.palette, collapsedHealthLights(statusBar()).todos);
+                _v$0 !== _p$.e && (_p$.e = _$setProp(_el$33, "fg", _v$0, _p$.e));
+                _v$1 !== _p$.t && (_p$.t = _$setProp(_el$35, "fg", _v$1, _p$.t));
+                _v$10 !== _p$.a && (_p$.a = _$setProp(_el$37, "fg", _v$10, _p$.a));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              return _el$32;
+            }
+          });
+        })(), null);
+        _$insert(_el$27, (() => {
+          var _c$10 = _$memo(() => !!(props.prefs.sections.compression && collapsedCompressionValue(s()?.compression)));
+          return () => _c$10() && _$createComponent(CollapsedRow, {
+            get palette() {
+              return props.palette;
+            },
+            label: "Compression",
+            get children() {
+              var _el$39 = _$createElement("text"),
+                _el$40 = _$createElement("b");
+              _$insertNode(_el$39, _el$40);
+              _$insert(_el$40, () => collapsedCompressionValue(s()?.compression));
+              _$effect(_$p => _$setProp(_el$39, "fg", props.palette.textMuted, _$p));
+              return _el$39;
+            }
+          });
+        })(), null);
+        return _el$27;
+      })();
+    })(), null);
+    _$insert(_el$0, (() => {
+      var _c$8 = _$memo(() => !!(!notInitialized() && !props.collapsed));
+      return () => _c$8() && [_$memo(() => _$memo(() => !!props.prefs.sections.searchIndex)() && [_$createComponent(SectionHeader, {
+        get palette() {
+          return props.palette;
+        },
+        title: "Search Index"
+      }), _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Status",
+        get value() {
+          return searchStatus().label;
+        },
+        get tone() {
+          return searchStatus().tone;
+        }
+      }), _$memo(() => _$memo(() => (s()?.search_index?.files ?? null) != null)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Files",
+        get value() {
+          return formatCount(s().search_index.files);
+        },
+        tone: "muted"
+      })), _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Disk",
+        get value() {
+          return formatBytes(trigramBytes());
+        },
+        tone: "muted"
+      })]), _$memo(() => _$memo(() => !!props.prefs.sections.semanticIndex)() && [_$createComponent(SectionHeader, {
+        get palette() {
+          return props.palette;
+        },
+        title: "Semantic Index"
+      }), _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Status",
+        get value() {
+          return semanticStatus().label;
+        },
+        get tone() {
+          return semanticStatus().tone;
+        }
+      }), _$memo(() => _$memo(() => !!semanticRefreshing())() && (() => {
+        var _el$41 = _$createElement("box"),
+          _el$42 = _$createElement("text");
+        _$insertNode(_el$41, _el$42);
+        _$setProp(_el$41, "width", "100%");
+        _$insert(_el$42, semanticRefreshing);
+        _$effect(_$p => _$setProp(_el$42, "fg", props.palette.textMuted, _$p));
+        return _el$41;
+      })()), _$memo(() => _$memo(() => !!(s()?.semantic_index?.status === "loading" && s()?.semantic_index?.entries_total != null && s().semantic_index.entries_total > 0))() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Progress",
+        get value() {
+          return `${formatCount(s().semantic_index.entries_done)} / ${formatCount(s().semantic_index.entries_total)}`;
+        },
+        tone: "warn"
+      })), _$memo(() => _$memo(() => (s()?.semantic_index?.entries ?? null) != null)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Entries",
+        get value() {
+          return formatCount(s().semantic_index.entries);
+        },
+        tone: "muted"
+      })), _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Disk",
+        get value() {
+          return formatBytes(semanticBytes());
+        },
+        tone: "muted"
+      })]), _$memo(() => _$memo(() => !!(props.prefs.sections.codeHealth && statusBar()))() && [_$createComponent(SectionHeader, {
+        get palette() {
+          return props.palette;
+        },
+        get title() {
+          return statusBar().tier2_stale ? "Code Health ~" : "Code Health";
+        }
+      }), _$memo(() => _$memo(() => statusBar().errors !== undefined)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Errors",
+        get value() {
+          return formatCount(statusBar().errors);
+        },
+        get tone() {
+          return statusBar().errors > 0 ? "err" : "muted";
+        }
+      })), _$memo(() => _$memo(() => statusBar().warnings !== undefined)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Warnings",
+        get value() {
+          return formatCount(statusBar().warnings);
+        },
+        get tone() {
+          return statusBar().warnings > 0 ? "warn" : "muted";
+        }
+      })), _$memo(() => _$memo(() => statusBar().dead_code !== undefined)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Dead Code",
+        get value() {
+          return formatCount(statusBar().dead_code);
+        },
+        tone: "muted"
+      })), _$memo(() => _$memo(() => statusBar().unused_exports !== undefined)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Unused Exports",
+        get value() {
+          return formatCount(statusBar().unused_exports);
+        },
+        tone: "muted"
+      })), _$memo(() => _$memo(() => statusBar().duplicates !== undefined)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "Duplicates",
+        get value() {
+          return formatCount(statusBar().duplicates);
+        },
+        tone: "muted"
+      })), _$memo(() => _$memo(() => statusBar().todos !== undefined)() && _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        label: "TODOs",
+        get value() {
+          return formatCount(statusBar().todos);
+        },
+        tone: "muted"
+      }))]), _$memo(() => _$memo(() => !!(props.prefs.sections.compression && compressionRows().length > 0))() && [_$createComponent(SectionHeader, {
+        get palette() {
+          return props.palette;
+        },
+        title: "Compression"
+      }), _$memo(() => compressionRows().map(row => row.kind === "scope" ? (() => {
+        var _el$43 = _$createElement("box"),
+          _el$44 = _$createElement("text");
+        _$insertNode(_el$43, _el$44);
+        _$setProp(_el$43, "width", "100%");
+        _$insert(_el$44, () => row.label);
+        _$effect(_$p => _$setProp(_el$44, "fg", props.palette.text, _$p));
+        return _el$43;
+      })() : _$createComponent(StatRow, {
+        get palette() {
+          return props.palette;
+        },
+        get label() {
+          return row.label;
+        },
+        get value() {
+          return row.value;
+        },
+        tone: "muted"
+      })))]), _$memo(() => _$memo(() => !!(s()?.semantic_index?.status === "failed" && s()?.semantic_index?.error))() && (() => {
+        var _el$45 = _$createElement("box"),
+          _el$46 = _$createElement("text"),
+          _el$47 = _$createTextNode(`⚠ `);
+        _$insertNode(_el$45, _el$46);
+        _$setProp(_el$45, "marginTop", 1);
+        _$setProp(_el$45, "width", "100%");
+        _$insertNode(_el$46, _el$47);
+        _$insert(_el$46, () => s().semantic_index.error, null);
+        _$effect(_$p => _$setProp(_el$46, "fg", props.palette.error, _$p));
+        return _el$45;
+      })())];
+    })(), null);
+    _$effect(_p$ => {
+      var _v$5 = props.palette.border,
+        _v$6 = props.palette.accent,
+        _v$7 = badgeForeground(props.palette.accent, props.palette.background);
+      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$0, "borderColor", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp(_el$11, "backgroundColor", _v$6, _p$.t));
+      _v$7 !== _p$.a && (_p$.a = _$setProp(_el$12, "fg", _v$7, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$0;
+  })();
+};