@slkiser/opencode-quota 4.6.0 → 4.7.0

package/dist/tui.js

@@ -9,7 +9,9 @@ import { createElement as _$createElement } from "@opentui/solid";
 /** @jsxImportSource @opentui/solid */
 
 import { createEffect, createSignal, onCleanup, Show } from "solid-js";
+import { formatDisplayedPercentLabel, formatResetCountdown } from "./lib/format-utils.js";
 import { buildQuotaDialogCommandOutput, QUOTA_DIALOG_COMMANDS } from "./lib/quota-dialog-commands.js";
+import { extractSingleWindowWindowLabel } from "./lib/quota-entry-display.js";
 import { disposeQuotaTelemetryOwner } from "./lib/quota-telemetry.js";
 import { getSidebarBodyLineColor } from "./lib/tui-line-style.js";
 import { getCompactStatusText, getHomeBottomAnnouncementText, getSidebarPanelLines, getSidebarPanelLinesExpanded, shouldRenderCompactStatus, shouldRenderHomeBottom, shouldRenderSidebarPanel } from "./lib/tui-panel-state.js";
@@ -35,6 +37,9 @@ const FALLBACK_SURFACE_REGISTRATION = {
     hasNativeProviderQuota: false,
     suppressedByNativeProviderQuota: false
   },
+  promptBar: {
+    enabled: false
+  },
   announcements: {
     homeBottom: false
   },
@@ -95,6 +100,9 @@ function createSessionQuotaResource(api, sessionID, initialLoads) {
   const [compact, setCompact] = createSignal({
     status: "loading"
   });
+  const [promptBar, setPromptBar] = createSignal({
+    status: "loading"
+  });
   let loadOrdinal = 0;
   const lifecycle = createTuiRefreshLifecycle({
     load: () => {
@@ -111,6 +119,9 @@ function createSessionQuotaResource(api, sessionID, initialLoads) {
     apply: next => {
       setSidebar(next.sidebar);
       setCompact(next.compact);
+      setPromptBar(next.promptBar ?? {
+        status: "loading"
+      });
     },
     intervalMs: REFRESH_INTERVAL_MS,
     eventRefreshDelaysMs: EVENT_REFRESH_DELAYS_MS,
@@ -142,6 +153,7 @@ function createSessionQuotaResource(api, sessionID, initialLoads) {
     sessionID,
     sidebar,
     compact,
+    promptBar,
     retain: () => {
       lifecycle.retain();
       return resource;
@@ -380,6 +392,167 @@ function SessionPromptWithCompactStatus(props) {
     return _el$13;
   })();
 }
+const PROMPT_BAR_WIDTH = 12;
+function shouldRenderPromptBar(bar) {
+  return bar.status === "ready" && Boolean(bar.entry);
+}
+function useSessionRunning(api, sessionID) {
+  const [running, setRunning] = createSignal(false);
+  createEffect(() => {
+    const id = sessionID();
+    if (!id) {
+      setRunning(false);
+      return;
+    }
+    const update = () => {
+      try {
+        const sessionState = api.state.session;
+        const status = sessionState.status?.(id);
+        setRunning(status?.type === "busy" || status?.type === "retry");
+      } catch {
+        setRunning(false);
+      }
+    };
+    update();
+    const disposers = [api.event.on("session.status", event => {
+      if (event.properties?.sessionID === id) {
+        update();
+      }
+    }), api.event.on("session.updated", event => {
+      if (event.properties?.info?.id === id) {
+        update();
+      }
+    })];
+    onCleanup(() => {
+      for (const dispose of disposers) {
+        if (typeof dispose === "function") {
+          dispose();
+        }
+      }
+    });
+  });
+  return running;
+}
+function buildPromptBarParts(params) {
+  const bar = params.bar();
+  if (!shouldRenderPromptBar(bar)) return undefined;
+  const entry = bar.entry;
+  if (!entry) return undefined;
+  const windowLabel = extractSingleWindowWindowLabel(entry.label ?? "") ?? extractSingleWindowWindowLabel(entry.name ?? "") ?? "Quota";
+  const percent = formatDisplayedPercentLabel(entry.percentRemaining ?? 0, bar.percentDisplayMode ?? "remaining");
+  const reset = entry.resetTimeIso ? formatResetCountdown(entry.resetTimeIso, {
+    compactRounded: true,
+    decimals: bar.resetTimeDecimals
+  }) : "";
+  const p = Math.max(0, Math.min(100, Math.round(entry.percentRemaining ?? 0)));
+  const filled = Math.round(p / 100 * PROMPT_BAR_WIDTH);
+  const empty = PROMPT_BAR_WIDTH - filled;
+  let barText = "█".repeat(filled) + "░".repeat(empty);
+  if (params.running() && filled > 0) {
+    const cells = Array(filled).fill("▓");
+    const center = params.phase() % filled;
+    const gradient = ["▒", "▓", "█", "▓", "▒"];
+    for (let offset = -2; offset <= 2; offset++) {
+      const position = (center + offset + filled) % filled;
+      cells[position] = gradient[offset + 2];
+    }
+    barText = cells.join("") + "░".repeat(empty);
+  }
+  return {
+    label: windowLabel,
+    barText,
+    meta: [percent.replace(/\s+left$/u, ""), reset].filter(Boolean).join(" | ")
+  };
+}
+function PromptQuotaHint(props) {
+  const parts = () => buildPromptBarParts(props);
+  const barColor = () => props.api.theme.current.textMuted;
+  const label = () => parts()?.label ?? "";
+  const bar = () => parts()?.barText ?? "";
+  const meta = () => parts()?.meta ?? "";
+  return _$createComponent(Show, {
+    get when() {
+      return parts();
+    },
+    get children() {
+      var _el$14 = _$createElement("box"),
+        _el$15 = _$createElement("text"),
+        _el$16 = _$createElement("text"),
+        _el$17 = _$createElement("text");
+      _$insertNode(_el$14, _el$15);
+      _$insertNode(_el$14, _el$16);
+      _$insertNode(_el$14, _el$17);
+      _$setProp(_el$14, "flexDirection", "row");
+      _$setProp(_el$14, "justifyContent", "flex-end");
+      _$setProp(_el$14, "gap", 1);
+      _$setProp(_el$15, "wrapMode", "none");
+      _$insert(_el$15, label);
+      _$setProp(_el$16, "wrapMode", "none");
+      _$insert(_el$16, bar);
+      _$setProp(_el$17, "wrapMode", "none");
+      _$insert(_el$17, meta);
+      _$effect(_p$ => {
+        var _v$3 = props.api.theme.current.textMuted,
+          _v$4 = barColor(),
+          _v$5 = props.api.theme.current.textMuted;
+        _v$3 !== _p$.e && (_p$.e = _$setProp(_el$15, "fg", _v$3, _p$.e));
+        _v$4 !== _p$.t && (_p$.t = _$setProp(_el$16, "fg", _v$4, _p$.t));
+        _v$5 !== _p$.a && (_p$.a = _$setProp(_el$17, "fg", _v$5, _p$.a));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined
+      });
+      return _el$14;
+    }
+  });
+}
+function SessionQuotaPromptBar(props) {
+  const resource = useSessionQuotaResource(props.api, () => props.sessionID, props.initialLoads);
+  const promptBar = () => resource().promptBar();
+  const running = useSessionRunning(props.api, () => props.sessionID);
+  const [phase, setPhase] = createSignal(0);
+  createEffect(() => {
+    if (!running() || !shouldRenderPromptBar(promptBar())) {
+      setPhase(0);
+      return;
+    }
+    const interval = setInterval(() => setPhase(p => p + 1), 160);
+    onCleanup(() => clearInterval(interval));
+  });
+  return (() => {
+    var _el$18 = _$createElement("box");
+    _$setProp(_el$18, "gap", 0);
+    _$insert(_el$18, _$createComponent(props.api.ui.Prompt, {
+      get sessionID() {
+        return props.sessionID;
+      },
+      get visible() {
+        return props.visible;
+      },
+      get disabled() {
+        return props.disabled;
+      },
+      get onSubmit() {
+        return props.onSubmit;
+      },
+      ref(r$) {
+        var _ref$2 = props.promptRef;
+        typeof _ref$2 === "function" ? _ref$2(r$) : props.promptRef = r$;
+      }
+    }), null);
+    _$insert(_el$18, _$createComponent(PromptQuotaHint, {
+      get api() {
+        return props.api;
+      },
+      bar: promptBar,
+      running: running,
+      phase: phase
+    }), null);
+    return _el$18;
+  })();
+}
 function HomeBottomView(props) {
   const resource = acquireHomeBottomResource(props.api, props.compactHomeBottomEnabled, props.initialLoads);
   onCleanup(() => resource.release());
@@ -387,35 +560,35 @@ function HomeBottomView(props) {
   const compact = () => resource.bottom().compact;
   const visible = () => shouldRenderHomeBottom(resource.bottom());
   return (() => {
-    var _el$14 = _$createElement("box");
-    _$setProp(_el$14, "gap", 0);
-    _$insert(_el$14, _$createComponent(Show, {
+    var _el$19 = _$createElement("box");
+    _$setProp(_el$19, "gap", 0);
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return visible();
       },
       get children() {
-        var _el$15 = _$createElement("text");
-        _$insertNode(_el$15, _$createTextNode(` `));
-        return _el$15;
+        var _el$20 = _$createElement("text");
+        _$insertNode(_el$20, _$createTextNode(` `));
+        return _el$20;
       }
     }), null);
-    _$insert(_el$14, _$createComponent(Show, {
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!visible())() && announcement();
       },
       get children() {
-        var _el$17 = _$createElement("box"),
-          _el$18 = _$createElement("text");
-        _$insertNode(_el$17, _el$18);
-        _$setProp(_el$17, "flexDirection", "row");
-        _$setProp(_el$17, "justifyContent", "center");
-        _$setProp(_el$18, "wrapMode", "none");
-        _$insert(_el$18, announcement);
-        _$effect(_$p => _$setProp(_el$18, "fg", props.api.theme.current.textMuted, _$p));
-        return _el$17;
+        var _el$22 = _$createElement("box"),
+          _el$23 = _$createElement("text");
+        _$insertNode(_el$22, _el$23);
+        _$setProp(_el$22, "flexDirection", "row");
+        _$setProp(_el$22, "justifyContent", "center");
+        _$setProp(_el$23, "wrapMode", "none");
+        _$insert(_el$23, announcement);
+        _$effect(_$p => _$setProp(_el$23, "fg", props.api.theme.current.textMuted, _$p));
+        return _el$22;
       }
     }), null);
-    _$insert(_el$14, _$createComponent(Show, {
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return visible();
       },
@@ -429,7 +602,7 @@ function HomeBottomView(props) {
         });
       }
     }), null);
-    return _el$14;
+    return _el$19;
   })();
 }
 function getActiveTuiSessionID(api) {
@@ -447,117 +620,117 @@ function getTuiCommandArguments(input) {
 }
 function CommandLoadingDialog(props) {
   return (() => {
-    var _el$19 = _$createElement("box"),
-      _el$20 = _$createElement("text"),
-      _el$21 = _$createElement("b"),
-      _el$22 = _$createElement("text");
-    _$insertNode(_el$19, _el$20);
-    _$insertNode(_el$19, _el$22);
-    _$setProp(_el$19, "gap", 1);
-    _$setProp(_el$19, "paddingLeft", 2);
-    _$setProp(_el$19, "paddingRight", 2);
-    _$setProp(_el$19, "paddingBottom", 1);
-    _$insertNode(_el$20, _el$21);
-    _$insert(_el$21, () => props.title);
-    _$insertNode(_el$22, _$createTextNode(`Loading deterministic local output…`));
+    var _el$24 = _$createElement("box"),
+      _el$25 = _$createElement("text"),
+      _el$26 = _$createElement("b"),
+      _el$27 = _$createElement("text");
+    _$insertNode(_el$24, _el$25);
+    _$insertNode(_el$24, _el$27);
+    _$setProp(_el$24, "gap", 1);
+    _$setProp(_el$24, "paddingLeft", 2);
+    _$setProp(_el$24, "paddingRight", 2);
+    _$setProp(_el$24, "paddingBottom", 1);
+    _$insertNode(_el$25, _el$26);
+    _$insert(_el$26, () => props.title);
+    _$insertNode(_el$27, _$createTextNode(`Loading deterministic local output…`));
     _$effect(_p$ => {
-      var _v$3 = props.api.theme.current.text,
-        _v$4 = props.api.theme.current.textMuted;
-      _v$3 !== _p$.e && (_p$.e = _$setProp(_el$20, "fg", _v$3, _p$.e));
-      _v$4 !== _p$.t && (_p$.t = _$setProp(_el$22, "fg", _v$4, _p$.t));
+      var _v$6 = props.api.theme.current.text,
+        _v$7 = props.api.theme.current.textMuted;
+      _v$6 !== _p$.e && (_p$.e = _$setProp(_el$25, "fg", _v$6, _p$.e));
+      _v$7 !== _p$.t && (_p$.t = _$setProp(_el$27, "fg", _v$7, _p$.t));
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$19;
+    return _el$24;
   })();
 }
 function CommandOutputDialog(props) {
   const lines = () => props.output.split("\n");
   const bodyHeight = () => Math.min(28, Math.max(6, lines().length));
   return (() => {
-    var _el$24 = _$createElement("box"),
-      _el$25 = _$createElement("text"),
-      _el$26 = _$createElement("b"),
-      _el$27 = _$createElement("scrollbox"),
-      _el$28 = _$createElement("box"),
-      _el$29 = _$createElement("text");
-    _$insertNode(_el$24, _el$25);
-    _$insertNode(_el$24, _el$27);
-    _$insertNode(_el$24, _el$29);
-    _$setProp(_el$24, "gap", 1);
-    _$setProp(_el$24, "width", "100%");
-    _$setProp(_el$24, "flexGrow", 1);
-    _$setProp(_el$24, "paddingLeft", 2);
-    _$setProp(_el$24, "paddingRight", 2);
-    _$setProp(_el$24, "paddingBottom", 1);
-    _$insertNode(_el$25, _el$26);
-    _$insert(_el$26, () => props.title);
-    _$insertNode(_el$27, _el$28);
-    _$setProp(_el$27, "width", "100%");
-    _$setProp(_el$27, "flexGrow", 1);
-    _$setProp(_el$27, "maxHeight", 28);
-    _$setProp(_el$28, "gap", 0);
-    _$setProp(_el$28, "width", "100%");
-    _$setProp(_el$28, "minWidth", 0);
-    _$insert(_el$28, () => lines().map(line => (() => {
-      var _el$31 = _$createElement("text");
-      _$setProp(_el$31, "wrapMode", "word");
-      _$setProp(_el$31, "width", "100%");
-      _$insert(_el$31, line || " ");
-      _$effect(_$p => _$setProp(_el$31, "fg", props.api.theme.current.text, _$p));
-      return _el$31;
+    var _el$29 = _$createElement("box"),
+      _el$30 = _$createElement("text"),
+      _el$31 = _$createElement("b"),
+      _el$32 = _$createElement("scrollbox"),
+      _el$33 = _$createElement("box"),
+      _el$34 = _$createElement("text");
+    _$insertNode(_el$29, _el$30);
+    _$insertNode(_el$29, _el$32);
+    _$insertNode(_el$29, _el$34);
+    _$setProp(_el$29, "gap", 1);
+    _$setProp(_el$29, "width", "100%");
+    _$setProp(_el$29, "flexGrow", 1);
+    _$setProp(_el$29, "paddingLeft", 2);
+    _$setProp(_el$29, "paddingRight", 2);
+    _$setProp(_el$29, "paddingBottom", 1);
+    _$insertNode(_el$30, _el$31);
+    _$insert(_el$31, () => props.title);
+    _$insertNode(_el$32, _el$33);
+    _$setProp(_el$32, "width", "100%");
+    _$setProp(_el$32, "flexGrow", 1);
+    _$setProp(_el$32, "maxHeight", 28);
+    _$setProp(_el$33, "gap", 0);
+    _$setProp(_el$33, "width", "100%");
+    _$setProp(_el$33, "minWidth", 0);
+    _$insert(_el$33, () => lines().map(line => (() => {
+      var _el$36 = _$createElement("text");
+      _$setProp(_el$36, "wrapMode", "word");
+      _$setProp(_el$36, "width", "100%");
+      _$insert(_el$36, line || " ");
+      _$effect(_$p => _$setProp(_el$36, "fg", props.api.theme.current.text, _$p));
+      return _el$36;
     })()));
-    _$insertNode(_el$29, _$createTextNode(`esc closes`));
+    _$insertNode(_el$34, _$createTextNode(`esc closes`));
     _$effect(_p$ => {
-      var _v$5 = props.api.theme.current.text,
-        _v$6 = bodyHeight(),
-        _v$7 = props.api.theme.current.textMuted;
-      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$25, "fg", _v$5, _p$.e));
-      _v$6 !== _p$.t && (_p$.t = _$setProp(_el$27, "minHeight", _v$6, _p$.t));
-      _v$7 !== _p$.a && (_p$.a = _$setProp(_el$29, "fg", _v$7, _p$.a));
+      var _v$8 = props.api.theme.current.text,
+        _v$9 = bodyHeight(),
+        _v$0 = props.api.theme.current.textMuted;
+      _v$8 !== _p$.e && (_p$.e = _$setProp(_el$30, "fg", _v$8, _p$.e));
+      _v$9 !== _p$.t && (_p$.t = _$setProp(_el$32, "minHeight", _v$9, _p$.t));
+      _v$0 !== _p$.a && (_p$.a = _$setProp(_el$34, "fg", _v$0, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$24;
+    return _el$29;
   })();
 }
 function CommandErrorDialog(props) {
   const message = props.error instanceof Error ? props.error.message : String(props.error);
   return (() => {
-    var _el$32 = _$createElement("box"),
-      _el$33 = _$createElement("text"),
-      _el$34 = _$createElement("b"),
-      _el$35 = _$createElement("text"),
-      _el$37 = _$createElement("text"),
-      _el$38 = _$createElement("text");
-    _$insertNode(_el$32, _el$33);
-    _$insertNode(_el$32, _el$35);
-    _$insertNode(_el$32, _el$37);
-    _$insertNode(_el$32, _el$38);
-    _$setProp(_el$32, "gap", 1);
-    _$setProp(_el$32, "paddingLeft", 2);
-    _$setProp(_el$32, "paddingRight", 2);
-    _$setProp(_el$32, "paddingBottom", 1);
-    _$insertNode(_el$33, _el$34);
-    _$insert(_el$34, () => props.title);
-    _$insertNode(_el$35, _$createTextNode(`OpenCode Quota command failed.`));
-    _$setProp(_el$37, "wrapMode", "none");
-    _$insert(_el$37, message || "Unknown error");
-    _$insertNode(_el$38, _$createTextNode(`esc closes`));
+    var _el$37 = _$createElement("box"),
+      _el$38 = _$createElement("text"),
+      _el$39 = _$createElement("b"),
+      _el$40 = _$createElement("text"),
+      _el$42 = _$createElement("text"),
+      _el$43 = _$createElement("text");
+    _$insertNode(_el$37, _el$38);
+    _$insertNode(_el$37, _el$40);
+    _$insertNode(_el$37, _el$42);
+    _$insertNode(_el$37, _el$43);
+    _$setProp(_el$37, "gap", 1);
+    _$setProp(_el$37, "paddingLeft", 2);
+    _$setProp(_el$37, "paddingRight", 2);
+    _$setProp(_el$37, "paddingBottom", 1);
+    _$insertNode(_el$38, _el$39);
+    _$insert(_el$39, () => props.title);
+    _$insertNode(_el$40, _$createTextNode(`OpenCode Quota command failed.`));
+    _$setProp(_el$42, "wrapMode", "none");
+    _$insert(_el$42, message || "Unknown error");
+    _$insertNode(_el$43, _$createTextNode(`esc closes`));
     _$effect(_p$ => {
-      var _v$8 = props.api.theme.current.text,
-        _v$9 = props.api.theme.current.text,
-        _v$0 = props.api.theme.current.textMuted,
-        _v$1 = props.api.theme.current.textMuted;
-      _v$8 !== _p$.e && (_p$.e = _$setProp(_el$33, "fg", _v$8, _p$.e));
-      _v$9 !== _p$.t && (_p$.t = _$setProp(_el$35, "fg", _v$9, _p$.t));
-      _v$0 !== _p$.a && (_p$.a = _$setProp(_el$37, "fg", _v$0, _p$.a));
-      _v$1 !== _p$.o && (_p$.o = _$setProp(_el$38, "fg", _v$1, _p$.o));
+      var _v$1 = props.api.theme.current.text,
+        _v$10 = props.api.theme.current.text,
+        _v$11 = props.api.theme.current.textMuted,
+        _v$12 = props.api.theme.current.textMuted;
+      _v$1 !== _p$.e && (_p$.e = _$setProp(_el$38, "fg", _v$1, _p$.e));
+      _v$10 !== _p$.t && (_p$.t = _$setProp(_el$40, "fg", _v$10, _p$.t));
+      _v$11 !== _p$.a && (_p$.a = _$setProp(_el$42, "fg", _v$11, _p$.a));
+      _v$12 !== _p$.o && (_p$.o = _$setProp(_el$43, "fg", _v$12, _p$.o));
       return _p$;
     }, {
       e: undefined,
@@ -565,7 +738,7 @@ function CommandErrorDialog(props) {
       a: undefined,
       o: undefined
     });
-    return _el$32;
+    return _el$37;
   })();
 }
 function getCommandPromptCopy(spec) {
@@ -609,11 +782,11 @@ async function runQuotaDialogCommandAsync(api, command, commandDisplay, rawInput
         return prompt.placeholder;
       },
       description: () => (() => {
-        var _el$40 = _$createElement("text");
-        _$setProp(_el$40, "wrapMode", "word");
-        _$insert(_el$40, () => prompt.description);
-        _$effect(_$p => _$setProp(_el$40, "fg", api.theme.current.textMuted, _$p));
-        return _el$40;
+        var _el$45 = _$createElement("text");
+        _$setProp(_el$45, "wrapMode", "word");
+        _$insert(_el$45, () => prompt.description);
+        _$effect(_$p => _$setProp(_el$45, "fg", api.theme.current.textMuted, _$p));
+        return _el$45;
       })(),
       onCancel: () => api.ui.dialog.clear(),
       onConfirm: value => {
@@ -744,7 +917,31 @@ function registerStableTuiSlots(api, current) {
     slots: {
       session_prompt(_ctx, props) {
         const state = current();
-        if (state.status !== "active" || !state.registration.compact.sessionPrompt) return null;
+        if (state.status !== "active") return null;
+        if (state.registration.promptBar.enabled) {
+          return _$createComponent(SessionQuotaPromptBar, {
+            api: api,
+            get sessionID() {
+              return props.session_id;
+            },
+            get initialLoads() {
+              return state.initialLoads;
+            },
+            get visible() {
+              return props.visible;
+            },
+            get disabled() {
+              return props.disabled;
+            },
+            get onSubmit() {
+              return props.on_submit;
+            },
+            get promptRef() {
+              return props.ref;
+            }
+          });
+        }
+        if (!state.registration.compact.sessionPrompt) return null;
         return _$createComponent(SessionPromptWithCompactStatus, {
           api: api,
           get sessionID() {