@cortexkit/aft-opencode 0.64.0 → 0.65.0

package/src/tui-compiled/shared-sidebar-host.tsx

@@ -0,0 +1,816 @@
+// @ts-nocheck
+import { createComponent as _$createComponent } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { createTextNode as _$createTextNode } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { use as _$use } 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";
+import { createContext, createMemo, createSignal, For, Index, mergeProps, Show, useContext } from "opentui:runtime-module:solid-js";
+
+/** `background` is the badge's text colour when drawn on `accent`; nothing else uses it. */
+
+const FrameContext = createContext();
+function frameContext() {
+  const context = useContext(FrameContext);
+  if (!context) throw new Error('Sidebar primitives must be inside SidebarFrame');
+  return context;
+}
+function displayWidth(text) {
+  const bun = globalThis.Bun;
+  return bun?.stringWidth ? bun.stringWidth(text) : Array.from(text).length;
+}
+function fitText(text, columns) {
+  if (displayWidth(text) <= columns) return text;
+  if (columns < 1) return '';
+  let kept = '';
+  let used = 0;
+  for (const char of text) {
+    const width = displayWidth(char);
+    if (used + width > columns - 1) break;
+    kept += char;
+    used += width;
+  }
+  return `${kept}\u2026`;
+}
+
+/** A heading and its plugin-owned rows, with the frame's section spacing. */
+export function SidebarSection(props) {
+  const context = frameContext();
+  return [(() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("text"),
+      _el$3 = _$createElement("b");
+    _$insertNode(_el$, _el$2);
+    _$setProp(_el$, "width", '100%');
+    _$setProp(_el$, "marginTop", 1);
+    _$insertNode(_el$2, _el$3);
+    _$insert(_el$3, () => props.title);
+    _$effect(_$p => _$setProp(_el$2, "fg", context.theme.text, _$p));
+    return _el$;
+  })(), _$memo(() => props.children)];
+}
+
+/** Keep labels whole and reserve one blank cell before an ellipsized value. */
+export function SidebarStatRow(props) {
+  const context = frameContext();
+  const [width, setWidth] = createSignal(0);
+  let row;
+  const value = () => width() <= 0 ? props.value : fitText(props.value, width() - displayWidth(props.label) - 1);
+  return (() => {
+    var _el$4 = _$createElement("box"),
+      _el$5 = _$createElement("text"),
+      _el$6 = _$createElement("text"),
+      _el$7 = _$createElement("b");
+    _$insertNode(_el$4, _el$5);
+    _$insertNode(_el$4, _el$6);
+    _$use(element => {
+      row = element;
+    }, _el$4);
+    _$setProp(_el$4, "onSizeChange", () => setWidth(row?.width ?? 0));
+    _$setProp(_el$4, "width", '100%');
+    _$setProp(_el$4, "flexDirection", 'row');
+    _$setProp(_el$4, "justifyContent", 'space-between');
+    _$setProp(_el$4, "columnGap", 1);
+    _$setProp(_el$5, "wrapMode", 'none');
+    _$setProp(_el$5, "flexShrink", 0);
+    _$insert(_el$5, () => props.label);
+    _$insertNode(_el$6, _el$7);
+    _$setProp(_el$6, "wrapMode", 'none');
+    _$setProp(_el$6, "flexShrink", 1);
+    _$insert(_el$7, value);
+    _$effect(_p$ => {
+      var _v$ = context.theme.textMuted,
+        _v$2 = context.theme[props.tone ?? 'text'];
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$5, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$6, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$4;
+  })();
+}
+export function SidebarTextRow(props) {
+  const context = frameContext();
+  return (() => {
+    var _el$8 = _$createElement("text");
+    _$insert(_el$8, () => props.text);
+    _$effect(_p$ => {
+      var _v$3 = context.theme[props.tone ?? 'textMuted'],
+        _v$4 = props.wrapMode;
+      _v$3 !== _p$.e && (_p$.e = _$setProp(_el$8, "fg", _v$3, _p$.e));
+      _v$4 !== _p$.t && (_p$.t = _$setProp(_el$8, "wrapMode", _v$4, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$8;
+  })();
+}
+function usageTone(used, appearance) {
+  if (used >= appearance.errorThreshold) return 'error';
+  if (used >= appearance.warnThreshold) return 'warning';
+  return 'success';
+}
+function barSegments(used, appearance, pace) {
+  const width = appearance.barWidth;
+  const cells = pct => Math.max(0, Math.min(Math.round(pct / 100 * width), width));
+  const usedCells = cells(used);
+  const tone = usageTone(used, appearance);
+  // Keep the overlay's slot even when empty so live pacing changes reuse nodes.
+  const plain = [{
+    text: appearance.barFilledChar.repeat(usedCells),
+    tone
+  }, {
+    text: '',
+    tone
+  }, {
+    text: appearance.barEmptyChar.repeat(width - usedCells),
+    tone
+  }];
+  const overlay = pace?.overlay;
+  if (!overlay) return plain;
+  const paceCells = cells(overlay.percent);
+  const lo = Math.min(usedCells, paceCells);
+  const hi = Math.max(usedCells, paceCells);
+  if (lo === hi) return plain;
+  return [{
+    text: appearance.barFilledChar.repeat(lo),
+    tone
+  }, {
+    text: (overlay.kind === 'deficit' ? '\u2593' : '\u2592').repeat(hi - lo),
+    tone: overlay.kind === 'deficit' ? 'error' : 'success'
+  }, {
+    text: appearance.barEmptyChar.repeat(width - hi),
+    tone
+  }];
+}
+export function SidebarGaugeRow(props) {
+  const context = frameContext();
+  const [columns, setColumns] = createSignal(0);
+  let row;
+  const known = () => props.used !== undefined && Number.isFinite(props.used);
+  const used = () => Math.max(0, Math.min(100, props.used ?? 0));
+  const figure = () => known() ? `${Math.round(100 - used())}% left` : 'no reading';
+  const appearance = () => ({
+    ...context.appearance,
+    warnThreshold: props.warnAt ?? context.appearance.warnThreshold,
+    errorThreshold: props.errorAt ?? context.appearance.errorThreshold
+  });
+  const label = () => columns() <= 0 ? props.label : fitText(props.label, columns() - displayWidth(figure()) - 1);
+  const barCells = () => {
+    if (!known()) return 0;
+    const desired = context.appearance.barWidth;
+    if (columns() <= 0) return desired;
+    const room = columns() - displayWidth(label()) - 1 - displayWidth(figure()) - 1;
+    return room >= Math.min(4, desired) ? Math.min(desired, room) : 0;
+  };
+  const segments = createMemo(() => barSegments(used(), {
+    ...appearance(),
+    barWidth: barCells()
+  }), undefined, {
+    equals: (previous, next) => previous.every((segment, index) => segment.text === next[index]?.text && segment.tone === next[index]?.tone)
+  });
+  const value = () => {
+    if (!props.value) return '';
+    if (columns() <= 0) return props.value;
+    const room = columns() - displayWidth(label()) - 1 - displayWidth(figure()) - (barCells() > 0 ? barCells() + 1 : 0) - 1;
+    return room >= 2 ? fitText(props.value, room) : '';
+  };
+  const tone = () => known() ? usageTone(used(), appearance()) : 'textMuted';
+  return (() => {
+    var _el$9 = _$createElement("box"),
+      _el$0 = _$createElement("box"),
+      _el$1 = _$createElement("text"),
+      _el$10 = _$createTextNode(` `),
+      _el$13 = _$createElement("text");
+    _$insertNode(_el$9, _el$0);
+    _$use(element => {
+      row = element;
+    }, _el$9);
+    _$setProp(_el$9, "onSizeChange", () => setColumns(row?.width ?? 0));
+    _$setProp(_el$9, "width", '100%');
+    _$setProp(_el$9, "flexDirection", 'row');
+    _$setProp(_el$9, "justifyContent", 'space-between');
+    _$insertNode(_el$0, _el$1);
+    _$insertNode(_el$0, _el$13);
+    _$setProp(_el$0, "flexDirection", 'row');
+    _$setProp(_el$0, "flexShrink", 0);
+    _$insertNode(_el$1, _el$10);
+    _$setProp(_el$1, "wrapMode", 'none');
+    _$insert(_el$1, label, _el$10);
+    _$insert(_el$0, _$createComponent(Show, {
+      get when() {
+        return barCells() > 0;
+      },
+      get children() {
+        return [_$createComponent(Index, {
+          get each() {
+            return segments();
+          },
+          children: segment => (() => {
+            var _el$16 = _$createElement("text");
+            _$setProp(_el$16, "wrapMode", 'none');
+            _$insert(_el$16, () => segment().text);
+            _$effect(_p$ => {
+              var _v$7 = context.theme[segment().tone],
+                _v$8 = displayWidth(segment().text);
+              _v$7 !== _p$.e && (_p$.e = _$setProp(_el$16, "fg", _v$7, _p$.e));
+              _v$8 !== _p$.t && (_p$.t = _$setProp(_el$16, "width", _v$8, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$16;
+          })()
+        }), (() => {
+          var _el$11 = _$createElement("text");
+          _$insertNode(_el$11, _$createTextNode(` `));
+          _$setProp(_el$11, "wrapMode", 'none');
+          return _el$11;
+        })()];
+      }
+    }), _el$13);
+    _$setProp(_el$13, "wrapMode", 'none');
+    _$insert(_el$13, figure);
+    _$insert(_el$9, _$createComponent(Show, {
+      get when() {
+        return value();
+      },
+      get children() {
+        var _el$14 = _$createElement("text"),
+          _el$15 = _$createElement("b");
+        _$insertNode(_el$14, _el$15);
+        _$setProp(_el$14, "wrapMode", 'none');
+        _$insert(_el$15, value);
+        _$effect(_$p => _$setProp(_el$14, "fg", context.theme.text, _$p));
+        return _el$14;
+      }
+    }), null);
+    _$effect(_p$ => {
+      var _v$5 = context.theme.textMuted,
+        _v$6 = context.theme[tone()];
+      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$1, "fg", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp(_el$13, "fg", _v$6, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$9;
+  })();
+}
+function QuotaRow(props) {
+  const context = frameContext();
+  const [columns, setColumns] = createSignal(0);
+  let row;
+  const label = () => props.part.name + ' '.repeat(Math.max(0, props.labelWidth - displayWidth(props.part.name)));
+  const figure = () => ` ${props.part.kind === 'budget' && props.part.figure.startsWith(`${props.part.name} `) ? props.part.figure.slice(props.part.name.length + 1) : props.part.figure}`;
+  const hasReading = () => props.part.reading === 'known';
+  const used = () => 100 - (props.part.remainingPercent ?? 100);
+  // Size notifications can recompute an unchanged fit after text has been flushed
+  // for the frame. Keep equal segments, and update fixed slots in place when the
+  // bar changes, rather than replacing text nodes during layout.
+  const segments = createMemo(() => hasReading() ? barSegments(used(), {
+    ...context.appearance,
+    barWidth: props.barCells
+  }, props.pace) : [], undefined, {
+    equals: (previous, next) => previous.length === next.length && previous.every((segment, index) => segment.text === next[index]?.text && segment.tone === next[index]?.tone)
+  });
+  const paceLine = () => {
+    const text = props.pace?.text;
+    if (!text || columns() <= 0) return text;
+    return fitText(text, columns() - props.labelWidth);
+  };
+  return [(() => {
+    var _el$17 = _$createElement("box"),
+      _el$18 = _$createElement("box");
+    _$insertNode(_el$17, _el$18);
+    _$use(element => {
+      row = element;
+    }, _el$17);
+    _$setProp(_el$17, "onSizeChange", () => setColumns(row?.width ?? 0));
+    _$setProp(_el$17, "width", '100%');
+    _$setProp(_el$17, "flexDirection", 'row');
+    _$setProp(_el$17, "justifyContent", 'space-between');
+    _$setProp(_el$18, "flexDirection", 'row');
+    _$insert(_el$18, _$createComponent(Show, {
+      get when() {
+        return props.labelWidth > 0;
+      },
+      get children() {
+        var _el$19 = _$createElement("text");
+        _$setProp(_el$19, "wrapMode", 'none');
+        _$setProp(_el$19, "flexShrink", 0);
+        _$insert(_el$19, label);
+        _$effect(_$p => _$setProp(_el$19, "fg", context.theme.textMuted, _$p));
+        return _el$19;
+      }
+    }), null);
+    _$insert(_el$18, _$createComponent(Show, {
+      get when() {
+        return hasReading();
+      },
+      get fallback() {
+        return (() => {
+          var _el$23 = _$createElement("text");
+          _$insertNode(_el$23, _$createTextNode(`no reading`));
+          _$setProp(_el$23, "wrapMode", 'none');
+          _$effect(_$p => _$setProp(_el$23, "fg", context.theme.textMuted, _$p));
+          return _el$23;
+        })();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return !props.part.resetSinceReading;
+          },
+          get fallback() {
+            return (() => {
+              var _el$25 = _$createElement("text");
+              _$insertNode(_el$25, _$createTextNode(`reset since last check`));
+              _$setProp(_el$25, "wrapMode", 'none');
+              _$effect(_$p => _$setProp(_el$25, "fg", context.theme.textMuted, _$p));
+              return _el$25;
+            })();
+          },
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return props.barCells > 0;
+              },
+              get children() {
+                return _$createComponent(Index, {
+                  get each() {
+                    return segments();
+                  },
+                  children: segment => (() => {
+                    var _el$27 = _$createElement("text");
+                    _$setProp(_el$27, "wrapMode", 'none');
+                    _$insert(_el$27, () => segment().text);
+                    _$effect(_p$ => {
+                      var _v$9 = context.theme[segment().tone],
+                        _v$0 = segment().text ? undefined : 0;
+                      _v$9 !== _p$.e && (_p$.e = _$setProp(_el$27, "fg", _v$9, _p$.e));
+                      _v$0 !== _p$.t && (_p$.t = _$setProp(_el$27, "width", _v$0, _p$.t));
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    return _el$27;
+                  })()
+                });
+              }
+            }), (() => {
+              var _el$20 = _$createElement("text");
+              _$setProp(_el$20, "wrapMode", 'none');
+              _$insert(_el$20, figure);
+              _$effect(_$p => _$setProp(_el$20, "fg", context.theme[usageTone(used(), context.appearance)], _$p));
+              return _el$20;
+            })()];
+          }
+        });
+      }
+    }), null);
+    _$insert(_el$17, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(hasReading() && props.showReset))() && !props.part.resetSinceReading;
+      },
+      get children() {
+        var _el$21 = _$createElement("box");
+        _$setProp(_el$21, "flexShrink", 0);
+        _$setProp(_el$21, "flexDirection", 'row');
+        _$setProp(_el$21, "justifyContent", 'flex-end');
+        _$insert(_el$21, _$createComponent(Show, {
+          get when() {
+            return props.part.resetIn;
+          },
+          get children() {
+            var _el$22 = _$createElement("text");
+            _$setProp(_el$22, "wrapMode", 'none');
+            _$insert(_el$22, () => props.part.resetIn);
+            _$effect(_$p => _$setProp(_el$22, "fg", context.theme.textMuted, _$p));
+            return _el$22;
+          }
+        }));
+        _$effect(_$p => _$setProp(_el$21, "width", props.resetWidth, _$p));
+        return _el$21;
+      }
+    }), null);
+    _$effect(_$p => _$setProp(_el$18, "flexShrink", props.part.resetSinceReading ? 1 : 0, _$p));
+    return _el$17;
+  })(), _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(hasReading() && !props.part.resetSinceReading))() && paceLine();
+    },
+    keyed: true,
+    children: line => (() => {
+      var _el$28 = _$createElement("box"),
+        _el$30 = _$createElement("text");
+      _$insertNode(_el$28, _el$30);
+      _$setProp(_el$28, "width", '100%');
+      _$setProp(_el$28, "flexDirection", 'row');
+      _$insert(_el$28, _$createComponent(Show, {
+        get when() {
+          return props.labelWidth > 0;
+        },
+        get children() {
+          var _el$29 = _$createElement("text");
+          _$insert(_el$29, () => ''.padEnd(props.labelWidth));
+          _$effect(_$p => _$setProp(_el$29, "fg", context.theme.textMuted, _$p));
+          return _el$29;
+        }
+      }), _el$30);
+      _$setProp(_el$30, "wrapMode", 'none');
+      _$insert(_el$30, line);
+      _$effect(_$p => _$setProp(_el$30, "fg", context.theme[props.pace?.tone ?? 'textMuted'], _$p));
+      return _el$28;
+    })()
+  })];
+}
+function CollapsedAccountRow(props) {
+  const context = frameContext();
+  const [width, setWidth] = createSignal(0);
+  let row;
+  const hasQuota = () => props.account.hasQuota;
+  const text = () => hasQuota() ? props.account.collapsedQuotaText ?? '' : props.account.emptyQuotaText?.collapsed ?? '\u2014';
+  // Reserve an ellipsis, a separator and the trailing indicator before keeping quota.
+  const showQuota = () => width() <= 0 || displayWidth(text()) + 4 <= width();
+  const label = () => {
+    if (width() <= 0) return props.account.label;
+    return fitText(props.account.label, width() - (showQuota() ? displayWidth(text()) + 3 : 2));
+  };
+  const muted = () => props.account.collapsed?.muted ?? false;
+  const quotaTone = () => muted() ? 'textMuted' : props.account.collapsed?.quotaTone ?? 'success';
+  return (() => {
+    var _el$31 = _$createElement("box"),
+      _el$33 = _$createElement("box"),
+      _el$36 = _$createElement("text");
+    _$insertNode(_el$31, _el$33);
+    _$use(element => {
+      row = element;
+    }, _el$31);
+    _$setProp(_el$31, "onSizeChange", () => setWidth(row?.width ?? 0));
+    _$setProp(_el$31, "width", '100%');
+    _$setProp(_el$31, "flexDirection", 'row');
+    _$setProp(_el$31, "justifyContent", 'space-between');
+    _$insert(_el$31, _$createComponent(Show, {
+      get when() {
+        return label();
+      },
+      get children() {
+        var _el$32 = _$createElement("text");
+        _$setProp(_el$32, "wrapMode", 'none');
+        _$setProp(_el$32, "flexShrink", 1);
+        _$insert(_el$32, label);
+        _$effect(_$p => _$setProp(_el$32, "fg", context.theme[muted() ? 'textMuted' : 'text'], _$p));
+        return _el$32;
+      }
+    }), _el$33);
+    _$insertNode(_el$33, _el$36);
+    _$setProp(_el$33, "flexDirection", 'row');
+    _$setProp(_el$33, "flexShrink", 0);
+    _$insert(_el$33, _$createComponent(Show, {
+      get when() {
+        return showQuota();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!hasQuota())() && !muted();
+          },
+          get fallback() {
+            return (() => {
+              var _el$37 = _$createElement("text");
+              _$insert(_el$37, text);
+              _$effect(_$p => _$setProp(_el$37, "fg", context.theme.textMuted, _$p));
+              return _el$37;
+            })();
+          },
+          get children() {
+            var _el$34 = _$createElement("text"),
+              _el$35 = _$createElement("b");
+            _$insertNode(_el$34, _el$35);
+            _$insert(_el$35, text);
+            _$effect(_$p => _$setProp(_el$34, "fg", context.theme[quotaTone()], _$p));
+            return _el$34;
+          }
+        });
+      }
+    }), _el$36);
+    _$insert(_el$36, () => showQuota() ? ' ' : '', null);
+    _$insert(_el$36, () => props.account.blocked ? '\u2298' : '\u25cf', null);
+    _$effect(_p$ => {
+      var _v$1 = label() ? 1 : 0,
+        _v$10 = context.theme[props.account.indicatorTone];
+      _v$1 !== _p$.e && (_p$.e = _$setProp(_el$31, "columnGap", _v$1, _p$.e));
+      _v$10 !== _p$.t && (_p$.t = _$setProp(_el$36, "fg", _v$10, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$31;
+  })();
+}
+function AccountBlock(props) {
+  const context = frameContext();
+  const [columns, setColumns] = createSignal(0);
+  let block;
+  const rows = () => props.account.groups.flatMap(group => group.rows);
+  const labelWidth = () => Math.max(0, ...rows().map(({
+    part
+  }) => part.name ? Math.max(3, displayWidth(part.name) + 1) : 0));
+  const resetWidth = () => Math.max(0, ...rows().map(({
+    part
+  }) => part.reading === 'unknown' || part.resetSinceReading ? 0 : displayWidth(part.resetIn ?? '')));
+  const figureWidth = createMemo(() => Math.max(10, ...rows().filter(({
+    part
+  }) => part.reading === 'known' && !part.resetSinceReading).map(({
+    part
+  }) => displayWidth(` ${part.kind === 'budget' && part.figure.startsWith(`${part.name} `) ? part.figure.slice(part.name.length + 1) : part.figure}`))));
+  const fit = rowLabelWidth => {
+    const desired = context.appearance.barWidth;
+    // Four cells still distinguish quarters of a window without sacrificing its reset.
+    const minimum = Math.min(4, desired);
+    if (columns() <= 0) return {
+      barCells: desired,
+      showReset: resetWidth() > 0
+    };
+    const room = columns() - rowLabelWidth - figureWidth();
+    const withReset = room - resetWidth() - 1;
+    const showReset = resetWidth() > 0 && withReset >= minimum;
+    const available = showReset ? withReset : room;
+    return {
+      barCells: available >= minimum ? Math.min(desired, available) : 0,
+      showReset
+    };
+  };
+  const label = () => {
+    const full = `${props.account.label}${props.account.titleSuffix ? ` · ${props.account.titleSuffix}` : ''}`;
+    return columns() <= 0 ? full : fitText(full, columns() - displayWidth(props.account.status.text) - 1);
+  };
+  const age = () => props.account.quotaAge;
+  const hasRows = () => props.account.groups.some(group => group.rows.length > 0);
+  return (() => {
+    var _el$38 = _$createElement("box"),
+      _el$39 = _$createElement("box"),
+      _el$40 = _$createElement("text"),
+      _el$41 = _$createElement("b"),
+      _el$42 = _$createElement("text"),
+      _el$43 = _$createElement("b");
+    _$insertNode(_el$38, _el$39);
+    _$use(element => {
+      block = element;
+    }, _el$38);
+    _$setProp(_el$38, "onSizeChange", () => setColumns(block?.width ?? 0));
+    _$setProp(_el$38, "width", '100%');
+    _$setProp(_el$38, "flexDirection", 'column');
+    _$insertNode(_el$39, _el$40);
+    _$insertNode(_el$39, _el$42);
+    _$setProp(_el$39, "width", '100%');
+    _$setProp(_el$39, "flexDirection", 'row');
+    _$setProp(_el$39, "justifyContent", 'space-between');
+    _$setProp(_el$39, "columnGap", 1);
+    _$insertNode(_el$40, _el$41);
+    _$setProp(_el$40, "wrapMode", 'none');
+    _$setProp(_el$40, "flexShrink", 1);
+    _$insert(_el$41, label);
+    _$insertNode(_el$42, _el$43);
+    _$setProp(_el$42, "wrapMode", 'none');
+    _$setProp(_el$42, "flexShrink", 0);
+    _$insert(_el$43, () => props.account.status.text);
+    _$insert(_el$38, () => context.beforeQuota?.(props.account), null);
+    _$insert(_el$38, _$createComponent(Show, {
+      get when() {
+        return hasRows();
+      },
+      get fallback() {
+        return _$createComponent(SidebarTextRow, {
+          get text() {
+            return props.account.emptyQuotaText?.expanded ?? '\u2014';
+          },
+          wrapMode: "none"
+        });
+      },
+      get children() {
+        return _$createComponent(For, {
+          get each() {
+            return props.account.groups;
+          },
+          children: group => [_$createComponent(Show, {
+            get when() {
+              return group.title;
+            },
+            get children() {
+              return _$createComponent(SidebarTextRow, {
+                get text() {
+                  return group.title ?? '';
+                },
+                tone: "text",
+                wrapMode: "none"
+              });
+            }
+          }), _$createComponent(For, {
+            get each() {
+              return group.rows;
+            },
+            children: row => {
+              const rowLabelWidth = () => row.part.name ? labelWidth() : 0;
+              const rowFit = createMemo(() => fit(rowLabelWidth()));
+              return _$createComponent(QuotaRow, {
+                get part() {
+                  return row.part;
+                },
+                get pace() {
+                  return row.pace;
+                },
+                get labelWidth() {
+                  return rowLabelWidth();
+                },
+                get barCells() {
+                  return rowFit().barCells;
+                },
+                get resetWidth() {
+                  return resetWidth();
+                },
+                get showReset() {
+                  return rowFit().showReset;
+                }
+              });
+            }
+          })]
+        });
+      }
+    }), null);
+    _$insert(_el$38, _$createComponent(Show, {
+      get when() {
+        return age();
+      },
+      children: text => _$createComponent(SidebarTextRow, {
+        get text() {
+          return text();
+        },
+        wrapMode: "none"
+      })
+    }), null);
+    _$insert(_el$38, () => context.afterQuota?.(props.account), null);
+    _$effect(_p$ => {
+      var _v$11 = props.marginTop,
+        _v$12 = context.theme.text,
+        _v$13 = context.theme[props.account.status.tone];
+      _v$11 !== _p$.e && (_p$.e = _$setProp(_el$38, "marginTop", _v$11, _p$.e));
+      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$40, "fg", _v$12, _p$.t));
+      _v$13 !== _p$.a && (_p$.a = _$setProp(_el$42, "fg", _v$13, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$38;
+  })();
+}
+
+/** Borderless, controlled presentation; host registration and provider policy stay in the plugin. */
+export function SidebarFrame(props) {
+  const hasData = () => props.accounts.length > 0;
+  const canCollapse = () => props.collapsible ?? hasData();
+  const headerLabel = () => !canCollapse() ? props.header.badge : `${props.collapsed ? '\u25b6' : '\u25bc'} ${props.header.badge}`;
+  // Missing semantic colors inherit normal text; an unset palette uses terminal defaults.
+  const context = mergeProps(props, {
+    get theme() {
+      const theme = props.theme;
+      return {
+        ...theme,
+        textMuted: theme?.textMuted ?? theme?.text,
+        accent: theme?.accent ?? theme?.text,
+        success: theme?.success ?? theme?.text,
+        warning: theme?.warning ?? theme?.text,
+        error: theme?.error ?? theme?.text
+      };
+    }
+  });
+  // Inverting an incomplete badge palette can put light text on a light background.
+  const invertBadge = () => props.theme?.accent !== undefined && props.theme?.background !== undefined;
+  function HeaderBadge() {
+    return (() => {
+      var _el$44 = _$createElement("box"),
+        _el$45 = _$createElement("text"),
+        _el$46 = _$createElement("b");
+      _$insertNode(_el$44, _el$45);
+      _$setProp(_el$44, "paddingLeft", 1);
+      _$setProp(_el$44, "paddingRight", 1);
+      _$insertNode(_el$45, _el$46);
+      _$insert(_el$46, headerLabel);
+      _$effect(_p$ => {
+        var _v$14 = invertBadge() ? props.theme?.accent : undefined,
+          _v$15 = invertBadge() ? props.theme?.background : context.theme.accent;
+        _v$14 !== _p$.e && (_p$.e = _$setProp(_el$44, "backgroundColor", _v$14, _p$.e));
+        _v$15 !== _p$.t && (_p$.t = _$setProp(_el$45, "fg", _v$15, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$44;
+    })();
+  }
+  return _$createComponent(FrameContext.Provider, {
+    value: context,
+    get children() {
+      var _el$47 = _$createElement("box"),
+        _el$48 = _$createElement("box");
+      _$insertNode(_el$47, _el$48);
+      _$setProp(_el$47, "width", '100%');
+      _$setProp(_el$47, "flexDirection", 'column');
+      _$setProp(_el$48, "width", '100%');
+      _$setProp(_el$48, "flexDirection", 'row');
+      _$setProp(_el$48, "justifyContent", 'space-between');
+      _$setProp(_el$48, "alignItems", 'center');
+      _$setProp(_el$48, "onMouseDown", () => {
+        if (canCollapse()) props.onToggle();
+      });
+      _$insert(_el$48, _$createComponent(Show, {
+        get when() {
+          return props.header.afterBadge;
+        },
+        get fallback() {
+          return _$createComponent(HeaderBadge, {});
+        },
+        get children() {
+          var _el$49 = _$createElement("box");
+          _$setProp(_el$49, "flexDirection", 'row');
+          _$setProp(_el$49, "alignItems", 'center');
+          _$insert(_el$49, _$createComponent(HeaderBadge, {}), null);
+          _$insert(_el$49, () => props.header.afterBadge?.(), null);
+          return _el$49;
+        }
+      }), null);
+      _$insert(_el$48, _$createComponent(Show, {
+        get when() {
+          return props.header.version;
+        },
+        get children() {
+          var _el$50 = _$createElement("text");
+          _$insert(_el$50, () => props.header.version);
+          _$effect(_$p => _$setProp(_el$50, "fg", context.theme.textMuted, _$p));
+          return _el$50;
+        }
+      }), null);
+      _$insert(_el$47, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!props.collapsed)() && canCollapse();
+        },
+        get children() {
+          return [_$createComponent(For, {
+            get each() {
+              return props.accounts;
+            },
+            children: account => _$createComponent(CollapsedAccountRow, {
+              account: account
+            })
+          }), _$memo(() => props.collapsedSections?.())];
+        }
+      }), null);
+      _$insert(_el$47, _$createComponent(Show, {
+        get when() {
+          return !props.collapsed || !canCollapse();
+        },
+        get children() {
+          return [_$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!props.showQuota)() && hasData();
+            },
+            get children() {
+              return _$createComponent(SidebarSection, {
+                title: "Quota",
+                get children() {
+                  return _$createComponent(For, {
+                    get each() {
+                      return props.accounts;
+                    },
+                    children: (account, index) => _$createComponent(AccountBlock, {
+                      account: account,
+                      get marginTop() {
+                        return index() === 0 ? 0 : 1;
+                      }
+                    })
+                  });
+                }
+              });
+            }
+          }), _$memo(() => props.sections?.())];
+        }
+      }), null);
+      return _el$47;
+    }
+  });
+}