@slkiser/opencode-quota 5.0.3 → 6.0.0-beta.1

package/dist/tui/sidebar.js

@@ -0,0 +1,148 @@
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { insertNode as _$insertNode } 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 { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+/**
+ * The Quota panel in the session sidebar (§4.1) and its collapsed form (§4.2). Click the
+ * title to collapse or expand it; OpenCode's plugin storage remembers the choice. The lines
+ * come from `view/text.ts`; this file only colors them, and marks the line the quota window's
+ * Settings tabs have selected.
+ */
+
+import { createSignal, onCleanup, Show } from "solid-js";
+import { DEFAULT_WORDS } from "../view/format.js";
+import { visibleGroups } from "../view/select.js";
+import { collapsedLines, collapsedTitle, sidebarLines, sidebarTitle } from "../view/text.js";
+import { roleColor, segmentColor } from "./theme.js";
+
+/** What the quota window's Settings tabs tell the surfaces while you edit them. */
+
+/** What every always-on surface reads. */
+
+/** Columns the panel uses until it knows its real width. */
+const DEFAULT_SIDEBAR_WIDTH = 36;
+
+/** The names of a marked line take the accent color; bars and numbers keep theirs. */
+const MARKED_ROLES = new Set(["provider", "label", "statusName"]);
+
+/** One line of a surface, each segment in its color. A marked line has a soft background. */
+export function LineText(props) {
+  const theme = () => props.host.theme();
+  const color = segment => props.marked && MARKED_ROLES.has(segment.role) ? theme().text.action.primary.selected : segmentColor(theme(), props.host.display(), segment);
+  return (() => {
+    var _el$ = _$createElement("text");
+    _$setProp(_el$, "wrapMode", "none");
+    _$setProp(_el$, "selectable", false);
+    _$setProp(_el$, "flexShrink", 0);
+    _$insert(_el$, () => props.line.segments.length === 0 ? " " : null, null);
+    _$insert(_el$, () => props.line.segments.map(segment => (() => {
+      var _el$2 = _$createElement("span");
+      _$insert(_el$2, () => segment.text);
+      _$effect(_$p => _$setProp(_el$2, "style", {
+        fg: color(segment),
+        bold: segment.bold === true
+      }, _$p));
+      return _el$2;
+    })()), null);
+    _$effect(_$p => _$setProp(_el$, "bg", props.marked ? theme().background.raised.high : undefined, _$p));
+    return _el$;
+  })();
+}
+export function SidebarPanel(props) {
+  const host = props.host;
+  const stop = host.quota.watch(props.sessionID);
+  onCleanup(stop);
+  onCleanup(host.editing.sidebarShown());
+  const open = () => host.editing.panelOpen() ?? props.open();
+  const [width, setWidth] = createSignal(DEFAULT_SIDEBAR_WIDTH);
+  const [nowMs, setNowMs] = createSignal(Date.now());
+  // Reset times count down between snapshots.
+  const clock = setInterval(() => setNowMs(Date.now()), 60_000);
+  onCleanup(() => clearInterval(clock));
+  const display = () => host.display();
+  const snapshot = () => host.quota.snapshot(props.sessionID);
+  const words = () => snapshot()?.words ?? DEFAULT_WORDS;
+  const groups = surface => {
+    const current = snapshot();
+    return current ? visibleGroups(current, display(), surface, words()) : [];
+  };
+  const lines = () => {
+    const current = snapshot();
+    if (!current) return [];
+    if (!open()) {
+      if (!display().surfaces.collapsed.enabled) return [];
+      return collapsedLines({
+        groups: groups("collapsed"),
+        layout: display().layout,
+        words: words(),
+        nowMs: nowMs(),
+        width: width(),
+        window: display().window,
+        runsOut: display().runsOut.collapsed
+      });
+    }
+    return sidebarLines({
+      groups: groups("sidebar"),
+      layout: display().layout,
+      words: words(),
+      nowMs: nowMs(),
+      width: width(),
+      runsOut: display().runsOut.sidebar,
+      ...(display().sidebar.sessionTokens && current.sessionTokens ? {
+        sessionTokens: current.sessionTokens
+      } : {})
+    });
+  };
+  const title = () => open() ? sidebarTitle(words()) : collapsedTitle(groups("collapsed"));
+  const marked = () => host.editing.marked(open() ? "sidebar" : "collapsed");
+  return _$createComponent(Show, {
+    get when() {
+      return display().surfaces.sidebar.enabled;
+    },
+    get children() {
+      var _el$3 = _$createElement("box"),
+        _el$4 = _$createElement("text"),
+        _el$5 = _$createElement("b");
+      _$insertNode(_el$3, _el$4);
+      _$setProp(_el$3, "flexDirection", "column");
+      _$setProp(_el$3, "onSizeChange", function () {
+        const measured = this.width;
+        if (measured > 0) queueMicrotask(() => setWidth(measured));
+      });
+      _$insertNode(_el$4, _el$5);
+      _$setProp(_el$4, "wrapMode", "none");
+      _$setProp(_el$4, "selectable", false);
+      _$setProp(_el$4, "onMouseDown", () => props.setOpen(!open()));
+      _$insert(_el$5, title);
+      _$insert(_el$3, _$createComponent(Show, {
+        get when() {
+          return snapshot();
+        },
+        get fallback() {
+          return (() => {
+            var _el$6 = _$createElement("text");
+            _$insertNode(_el$6, _$createTextNode(`Loading quota…`));
+            _$effect(_$p => _$setProp(_el$6, "fg", host.theme().text.muted, _$p));
+            return _el$6;
+          })();
+        },
+        get children() {
+          return lines().map(line => _$createComponent(LineText, {
+            line: line,
+            host: host,
+            get marked() {
+              return _$memo(() => line.id !== "")() && line.id === marked();
+            }
+          }));
+        }
+      }), null);
+      _$effect(_$p => _$setProp(_el$4, "fg", roleColor(host.theme(), display(), "title"), _$p));
+      return _el$3;
+    }
+  });
+}

package/dist/tui/status-line.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from "@opentui/solid";
+import { type SurfaceHost } from "./sidebar.js";
+export declare function StatusLine(props: {
+    host: SurfaceHost;
+    sessionID?: string;
+}): JSX.Element;
+/**
+ * The bottom of Home: the maintainer notice line, then the status line when it is on for Home.
+ * Home has its own switch (`statusLine.home`); the one for sessions does not hide it.
+ */
+export declare function HomeFooter(props: {
+    host: SurfaceHost;
+}): JSX.Element;
+//# sourceMappingURL=status-line.d.ts.map

package/dist/tui/status-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-line.d.ts","sourceRoot":"","sources":["../../src/tui/status-line.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAW1C,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAG1D,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CA+HxF;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAyBpE"}

package/dist/tui/status-line.js

@@ -0,0 +1,225 @@
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+/**
+ * The quota status line under the message box (§4.3) and at the bottom of Home. It takes only
+ * the room OpenCode's footer leaves free (flexBasis 0), so it never squeezes the folder name or
+ * other plugins, shows the most detail that fits every provider, and scrolls when even "% only"
+ * does not fit: mouse wheel, or click "‹" / "+N ›".
+ */
+
+import { createEffect, createSignal, onCleanup, Show } from "solid-js";
+import { DEFAULT_WORDS } from "../view/format.js";
+import { visibleGroups } from "../view/select.js";
+import { bigStatusLine, statusLayout } from "../view/text.js";
+import { LineText } from "./sidebar.js";
+import { roleColor } from "./theme.js";
+export function StatusLine(props) {
+  const host = props.host;
+  onCleanup(host.quota.watch(props.sessionID));
+  const [room, setRoom] = createSignal(0);
+  const [start, setStart] = createSignal(0);
+  const [nowMs, setNowMs] = createSignal(Date.now());
+  const clock = setInterval(() => setNowMs(Date.now()), 60_000);
+  onCleanup(() => clearInterval(clock));
+  const display = () => host.display();
+  const input = () => {
+    const snapshot = host.quota.snapshot(props.sessionID);
+    if (!snapshot) return undefined;
+    const words = snapshot.words ?? DEFAULT_WORDS;
+    return {
+      groups: visibleGroups(snapshot, display(), "statusLine", words),
+      layout: display().layout,
+      words,
+      nowMs: nowMs(),
+      window: display().statusLine.window,
+      runsOut: display().runsOut.statusLine
+    };
+  };
+  const big = () => display().statusLine.detail === "one";
+  const layout = () => {
+    const current = input();
+    if (!current || big()) return undefined;
+    const detail = display().statusLine.detail;
+    return statusLayout(current, room(), start(), detail === "one" ? "auto" : detail);
+  };
+  const count = () => input()?.groups.length ?? 0;
+  const step = delta => setStart(Math.max(0, Math.min(count() - 1, start() + delta)));
+  const color = role => roleColor(host.theme(), display(), role);
+  const marked = () => host.editing.marked("statusLine");
+  // The provider selected on the Settings tab scrolls into view.
+  createEffect(() => {
+    const index = input()?.groups.findIndex(group => group.providerId === marked()) ?? -1;
+    const current = layout();
+    if (index < 0 || !current || room() === 0) return;
+    if (index < current.start || index >= current.start + current.shown.length) setStart(index);
+  });
+
+  // Optional: page through by itself every few seconds.
+  createEffect(() => {
+    const seconds = display().statusLine.autoScrollSeconds;
+    if (!seconds) return;
+    const timer = setInterval(() => {
+      const current = layout();
+      if (!current) return;
+      setStart(current.hiddenAfter > 0 ? current.start + current.shown.length : 0);
+    }, seconds * 1000);
+    onCleanup(() => clearInterval(timer));
+  });
+  return (() => {
+    var _el$ = _$createElement("box");
+    _$setProp(_el$, "flexDirection", "row");
+    _$setProp(_el$, "justifyContent", "flex-end");
+    _$setProp(_el$, "flexGrow", 1000);
+    _$setProp(_el$, "flexShrink", 1);
+    _$setProp(_el$, "flexBasis", 0);
+    _$setProp(_el$, "minWidth", 0);
+    _$setProp(_el$, "overflow", "hidden");
+    _$setProp(_el$, "onSizeChange", function () {
+      // In OpenCode's footer the box can end up one column narrower than measured here
+      // (seen at 200 columns), which cut the first letter; one spare column avoids it.
+      const width = Math.max(0, this.width - 1);
+      queueMicrotask(() => setRoom(width));
+    });
+    _$setProp(_el$, "onMouseScroll", event => {
+      const direction = event.scroll?.direction;
+      if (direction === "down" || direction === "right") step(1);
+      if (direction === "up" || direction === "left") step(-1);
+    });
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!big())() ? input() : undefined;
+      },
+      children: current => // The room is 0 until OpenCode measures the box; until then the line is drawn whole.
+      _$createComponent(Show, {
+        get when() {
+          return bigStatusLine(current(), room() || undefined);
+        },
+        children: line => _$createComponent(LineText, {
+          get line() {
+            return line();
+          },
+          host: host,
+          get marked() {
+            return line().id === marked();
+          }
+        })
+      })
+    }), null);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return layout();
+      },
+      children: current => [_$createComponent(Show, {
+        get when() {
+          return _$memo(() => current().start > 0)() && current().shown.length > 0;
+        },
+        get children() {
+          var _el$2 = _$createElement("text");
+          _$insertNode(_el$2, _$createTextNode(`‹ `));
+          _$setProp(_el$2, "wrapMode", "none");
+          _$setProp(_el$2, "flexShrink", 0);
+          _$setProp(_el$2, "selectable", false);
+          _$setProp(_el$2, "onMouseUp", () => step(-1));
+          _$effect(_$p => _$setProp(_el$2, "fg", color("arrows"), _$p));
+          return _el$2;
+        }
+      }), _$memo(() => current().shown.map((line, index) => [_$createComponent(Show, {
+        when: index > 0,
+        get children() {
+          var _el$5 = _$createElement("text");
+          _$setProp(_el$5, "wrapMode", "none");
+          _$setProp(_el$5, "flexShrink", 0);
+          _$setProp(_el$5, "selectable", false);
+          _$insert(_el$5, () => display().layout.separator);
+          _$effect(_$p => _$setProp(_el$5, "fg", color("separator"), _$p));
+          return _el$5;
+        }
+      }), _$createComponent(LineText, {
+        line: line,
+        host: host,
+        get marked() {
+          return line.id === marked();
+        }
+      })])), _$createComponent(Show, {
+        get when() {
+          return _$memo(() => current().hiddenAfter > 0)() && current().shown.length > 0;
+        },
+        get children() {
+          var _el$4 = _$createElement("text");
+          _$setProp(_el$4, "wrapMode", "none");
+          _$setProp(_el$4, "flexShrink", 0);
+          _$setProp(_el$4, "selectable", false);
+          _$setProp(_el$4, "onMouseUp", () => step(1));
+          _$insert(_el$4, () => ` +${current().hiddenAfter} ›`);
+          _$effect(_$p => _$setProp(_el$4, "fg", color("arrows"), _$p));
+          return _el$4;
+        }
+      })]
+    }), null);
+    _$effect(_$p => _$setProp(_el$, "maxWidth", display().statusLine.width || undefined, _$p));
+    return _el$;
+  })();
+}
+
+/**
+ * The bottom of Home: the maintainer notice line, then the status line when it is on for Home.
+ * Home has its own switch (`statusLine.home`); the one for sessions does not hide it.
+ */
+export function HomeFooter(props) {
+  const host = props.host;
+  onCleanup(host.quota.watchHome());
+  const showStatus = () => host.display().statusLine.home;
+  return _$createComponent(Show, {
+    get when() {
+      return host.quota.homeLine() || showStatus();
+    },
+    get children() {
+      var _el$6 = _$createElement("box");
+      _$setProp(_el$6, "flexDirection", "row");
+      _$setProp(_el$6, "gap", 2);
+      _$setProp(_el$6, "flexShrink", 1);
+      _$setProp(_el$6, "minWidth", 0);
+      _$insert(_el$6, _$createComponent(Show, {
+        get when() {
+          return host.quota.homeLine();
+        },
+        get children() {
+          var _el$7 = _$createElement("text");
+          _$setProp(_el$7, "wrapMode", "none");
+          _$setProp(_el$7, "flexShrink", 0);
+          _$insert(_el$7, () => host.quota.homeLine());
+          _$effect(_$p => _$setProp(_el$7, "fg", host.theme().text.muted, _$p));
+          return _el$7;
+        }
+      }), null);
+      _$insert(_el$6, _$createComponent(Show, {
+        get when() {
+          return showStatus();
+        },
+        get children() {
+          return _$createComponent(StatusLine, {
+            host: host
+          });
+        }
+      }), null);
+      _$effect(_p$ => {
+        var _v$ = showStatus() ? 1000 : 0,
+          _v$2 = showStatus() ? 0 : "auto";
+        _v$ !== _p$.e && (_p$.e = _$setProp(_el$6, "flexGrow", _v$, _p$.e));
+        _v$2 !== _p$.t && (_p$.t = _$setProp(_el$6, "flexBasis", _v$2, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$6;
+    }
+  });
+}

package/dist/tui/theme.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Quota's colors from the user's OpenCode theme. Every color role follows a named theme color
+ * unless the display settings pick another one or a fixed "#rrggbb". The theme is read on every
+ * call, so a surface that colors inside its JSX follows a theme or light/dark switch at once.
+ */
+import { RGBA } from "@opentui/core";
+import type { ColorRole, Segment } from "../view/text.js";
+import { type ColorName, type DisplaySettings } from "./display.js";
+/** The theme tokens quota reads (OpenCode's `ResolvedTheme`). */
+export type Theme = {
+    text: {
+        base: RGBA;
+        muted: RGBA;
+        /** The label of the line the Settings tabs have selected, on a surface. */
+        action: {
+            primary: {
+                selected: RGBA;
+            };
+        };
+        feedback: Record<"success" | "warning" | "error" | "info", {
+            base: RGBA;
+        }>;
+    };
+    /** Behind the line the Settings tabs have selected, on a surface. */
+    background: {
+        raised: {
+            high: RGBA;
+        };
+    };
+    hue: {
+        accent: Record<number, RGBA>;
+    };
+};
+export declare function namedColor(theme: Theme, name: ColorName): RGBA;
+/** The bar color for a percent left: plenty left, getting low, or almost out. */
+export declare function levelColor(theme: Theme, display: DisplaySettings, percent: number): RGBA;
+/** A role's color. A role set to "bar" takes the level color of the row's percent. */
+export declare function roleColor(theme: Theme, display: DisplaySettings, role: ColorRole, percent?: number): RGBA;
+/** The color of one line segment. */
+export declare function segmentColor(theme: Theme, display: DisplaySettings, segment: Segment): RGBA;
+//# sourceMappingURL=theme.d.ts.map

package/dist/tui/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/tui/theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,eAAe,EAAgB,MAAM,cAAc,CAAC;AAEpG,iEAAiE;AACjE,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,IAAI,CAAC;QACZ,2EAA2E;QAC3E,MAAM,EAAE;YAAE,OAAO,EAAE;gBAAE,QAAQ,EAAE,IAAI,CAAA;aAAE,CAAA;SAAE,CAAC;QACxC,QAAQ,EAAE,MAAM,CAAC,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,EAAE;YAAE,IAAI,EAAE,IAAI,CAAA;SAAE,CAAC,CAAC;KAC5E,CAAC;IACF,qEAAqE;IACrE,UAAU,EAAE;QAAE,MAAM,EAAE;YAAE,IAAI,EAAE,IAAI,CAAA;SAAE,CAAA;KAAE,CAAC;IACvC,GAAG,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;KAAE,CAAC;CACvC,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,CAiB9D;AAYD,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAGxF;AAED,sFAAsF;AACtF,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,eAAe,EACxB,IAAI,EAAE,SAAS,EACf,OAAO,SAAM,GACZ,IAAI,CAGN;AAED,qCAAqC;AACrC,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAI3F"}

package/dist/tui/theme.js

@@ -0,0 +1,52 @@
+/**
+ * Quota's colors from the user's OpenCode theme. Every color role follows a named theme color
+ * unless the display settings pick another one or a fixed "#rrggbb". The theme is read on every
+ * call, so a surface that colors inside its JSX follows a theme or light/dark switch at once.
+ */
+import { RGBA } from "@opentui/core";
+import { levelOf } from "../view/format.js";
+import { THEME_COLORS } from "./display.js";
+export function namedColor(theme, name) {
+    switch (name) {
+        case "text":
+            return theme.text.base;
+        case "muted":
+            return theme.text.muted;
+        case "accent":
+            return theme.hue.accent[500] ?? theme.text.base;
+        case "green":
+            return theme.text.feedback.success.base;
+        case "yellow":
+            return theme.text.feedback.warning.base;
+        case "red":
+            return theme.text.feedback.error.base;
+        case "blue":
+            return theme.text.feedback.info.base;
+    }
+}
+/** A fixed choice ("bar" is not one: the level roles can't follow themselves). */
+function fixedColor(theme, choice, fallback) {
+    if (choice === "bar")
+        return namedColor(theme, fallback);
+    return choice.startsWith("#") ? RGBA.fromHex(choice) : namedColor(theme, choice);
+}
+function choiceFor(display, role) {
+    return display.colors[role] ?? THEME_COLORS[role];
+}
+/** The bar color for a percent left: plenty left, getting low, or almost out. */
+export function levelColor(theme, display, percent) {
+    const role = levelOf(percent, display.thresholds);
+    return fixedColor(theme, choiceFor(display, role), THEME_COLORS[role]);
+}
+/** A role's color. A role set to "bar" takes the level color of the row's percent. */
+export function roleColor(theme, display, role, percent = 100) {
+    const choice = choiceFor(display, role);
+    return choice === "bar" ? levelColor(theme, display, percent) : fixedColor(theme, choice, "text");
+}
+/** The color of one line segment. */
+export function segmentColor(theme, display, segment) {
+    return segment.role === "bar"
+        ? levelColor(theme, display, segment.percent ?? 100)
+        : roleColor(theme, display, segment.role, segment.percent);
+}
+//# sourceMappingURL=theme.js.map

package/dist/tui/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/tui/theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAA0D,YAAY,EAAE,MAAM,cAAc,CAAC;AAgBpG,MAAM,UAAU,UAAU,CAAC,KAAY,EAAE,IAAe;IACtD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QAC1B,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAClD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;QAC1C,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;QAC1C,KAAK,KAAK;YACR,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC;QACxC,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;IACzC,CAAC;AACH,CAAC;AAED,kFAAkF;AAClF,SAAS,UAAU,CAAC,KAAY,EAAE,MAAmB,EAAE,QAAmB;IACxE,IAAI,MAAM,KAAK,KAAK;QAAE,OAAO,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IACzD,OAAO,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,MAAmB,CAAC,CAAC;AAChG,CAAC;AAED,SAAS,SAAS,CAAC,OAAwB,EAAE,IAAe;IAC1D,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;AACpD,CAAC;AAED,iFAAiF;AACjF,MAAM,UAAU,UAAU,CAAC,KAAY,EAAE,OAAwB,EAAE,OAAe;IAChF,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAClD,OAAO,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,YAAY,CAAC,IAAI,CAAc,CAAC,CAAC;AACtF,CAAC;AAED,sFAAsF;AACtF,MAAM,UAAU,SAAS,CACvB,KAAY,EACZ,OAAwB,EACxB,IAAe,EACf,OAAO,GAAG,GAAG;IAEb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,OAAO,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACpG,CAAC;AAED,qCAAqC;AACrC,MAAM,UAAU,YAAY,CAAC,KAAY,EAAE,OAAwB,EAAE,OAAgB;IACnF,OAAO,OAAO,CAAC,IAAI,KAAK,KAAK;QAC3B,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,GAAG,CAAC;QACpD,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;AAC/D,CAAC"}

package/dist/tui/toast-colors.d.ts

@@ -0,0 +1,37 @@
+/** @jsxImportSource @opentui/solid */
+/**
+ * Quota toasts in the sidebar's colors, through a trick OpenCode does not promise to keep.
+ * OpenCode's plugin API types a toast's message as a string and draws a string in one color.
+ * OpenCode's toast (checked on 2.0.26 to 2.0.28) passes the message on unchanged and puts it
+ * inside its <text>, and plugins share OpenCode's @opentui/solid and solid-js, so a message of
+ * <span>s draws each span in its own color.
+ *
+ * Quota sends the spans on every OpenCode version, once the TUI has drawn (the spans are made
+ * under its renderer). Any error while making or showing the spans shows the plain message: the
+ * same characters.
+ */
+import type { JSX } from "@opentui/solid";
+import { type Owner } from "solid-js";
+import type { Line } from "../view/text.js";
+import type { DisplaySettings } from "./display.js";
+import { type Theme } from "./theme.js";
+import type { ToastOptions } from "./toasts.js";
+export type ColoredToastHost = {
+    /** OpenCode's own toast. */
+    show: (toast: ToastOptions) => void;
+    theme: () => Theme;
+    display: () => DisplaySettings;
+    /** A Solid owner inside OpenCode's renderer, where spans can be made; none before it draws. */
+    owner: () => Owner | undefined;
+};
+/**
+ * The children of OpenCode's toast <text>: each segment a <span> in its color, "\n" between
+ * lines. A span reads bold from its style's `bold` key; it ignores an `attributes` key there.
+ */
+export declare function coloredMessage(lines: Line[], theme: Theme, display: DisplaySettings): JSX.Element;
+/**
+ * Shows a toast. A quota toast's `lines` show in their colors once the TUI has drawn (see
+ * above); before that, and when that fails, the toast's plain message shows.
+ */
+export declare function createToastShow(host: ColoredToastHost): (toast: ToastOptions, lines?: Line[]) => void;
+//# sourceMappingURL=toast-colors.d.ts.map

package/dist/tui/toast-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-colors.d.ts","sourceRoot":"","sources":["../../src/tui/toast-colors.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAA0B,KAAK,KAAK,EAAgB,MAAM,UAAU,CAAC;AAC5E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAgB,KAAK,KAAK,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4BAA4B;IAC5B,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,MAAM,KAAK,CAAC;IACnB,OAAO,EAAE,MAAM,eAAe,CAAC;IAC/B,+FAA+F;IAC/F,KAAK,EAAE,MAAM,KAAK,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CASjG;AAwBD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,gBAAgB,WACrC,YAAY,UAAU,IAAI,EAAE,KAAG,IAAI,CAgBnD"}

package/dist/tui/toast-colors.js

@@ -0,0 +1,77 @@
+import { setProp as _$setProp } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+/**
+ * Quota toasts in the sidebar's colors, through a trick OpenCode does not promise to keep.
+ * OpenCode's plugin API types a toast's message as a string and draws a string in one color.
+ * OpenCode's toast (checked on 2.0.26 to 2.0.28) passes the message on unchanged and puts it
+ * inside its <text>, and plugins share OpenCode's @opentui/solid and solid-js, so a message of
+ * <span>s draws each span in its own color.
+ *
+ * Quota sends the spans on every OpenCode version, once the TUI has drawn (the spans are made
+ * under its renderer). Any error while making or showing the spans shows the plain message: the
+ * same characters.
+ */
+
+import { catchError, createRoot, runWithOwner } from "solid-js";
+import { segmentColor } from "./theme.js";
+/**
+ * The children of OpenCode's toast <text>: each segment a <span> in its color, "\n" between
+ * lines. A span reads bold from its style's `bold` key; it ignores an `attributes` key there.
+ */
+export function coloredMessage(lines, theme, display) {
+  return lines.flatMap((line, index) => [...(index > 0 ? ["\n"] : []), ...line.segments.map(segment => (() => {
+    var _el$ = _$createElement("span");
+    _$insert(_el$, () => segment.text);
+    _$effect(_$p => _$setProp(_el$, "style", {
+      fg: segmentColor(theme, display, segment),
+      bold: segment.bold === true
+    }, _$p));
+    return _el$;
+  })())]);
+}
+
+/**
+ * The spans of `lines`, made under `owner`; undefined when making them failed. Errors go to
+ * this function, never to OpenCode's error screen. The root is gone once the spans have their
+ * colors: nothing in them changes later.
+ */
+function spansOf(owner, lines, host) {
+  let failed = false;
+  const spans = runWithOwner(owner, () => createRoot(dispose => {
+    const made = catchError(() => coloredMessage(lines, host.theme(), host.display()), () => {
+      failed = true;
+    });
+    dispose();
+    return made;
+  }));
+  return failed ? undefined : spans;
+}
+
+/**
+ * Shows a toast. A quota toast's `lines` show in their colors once the TUI has drawn (see
+ * above); before that, and when that fails, the toast's plain message shows.
+ */
+export function createToastShow(host) {
+  return (toast, lines) => {
+    if (lines !== undefined) {
+      try {
+        const owner = host.owner();
+        const spans = owner === undefined ? undefined : spansOf(owner, lines, host);
+        if (spans !== undefined) {
+          // The API types the message as a string; OpenCode's toast draws the spans as they are.
+          host.show({
+            ...toast,
+            message: spans
+          });
+          return;
+        }
+      } catch {
+        // The plain message below.
+      }
+    }
+    host.show(toast);
+  };
+}