@rockysoft/opencode-hybrid-workflow 0.0.0-stage → 0.3.2-beta.2

package/tui.js

@@ -0,0 +1,303 @@
+// Generated by npm run build; edit tui.tsx.
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { Plugin } from '@opencode/plugin/tui';
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
+import { readSettings } from './lib/config.mjs';
+import { createReader, cards, number, money } from './sidebar/reader.mjs';
+import { captureTotals } from './core/dashboard-state.js';
+import { createSettingsUI } from './sidebar/settings.mjs';
+export default Plugin.define({
+  id: 'personal.hybrid-usage',
+  setup(context) {
+    const preferences = createSettingsUI(context);
+    context.keymap.layer(() => ({
+      mode: 'global',
+      commands: [{
+        id: 'hybrid.settings',
+        title: 'Hybrid Workflow: settings',
+        group: 'Hybrid Workflow',
+        palette: true,
+        slash: {
+          name: 'hybrid'
+        },
+        run: () => preferences.show()
+      }]
+    }));
+    const home = context.ui.slot({
+      append: 'home.footer',
+      render: () => (() => {
+        var _el$ = _$createElement("text");
+        _$insertNode(_el$, _$createTextNode(`[Hybrid Workflow settings]`));
+        _$setProp(_el$, "onMouseDown", () => preferences.show());
+        _$effect(_$p => _$setProp(_el$, "fg", context.theme.text.muted, _$p));
+        return _el$;
+      })()
+    });
+    const firstRun = setTimeout(() => {
+      void preferences.show(true);
+    }, 750);
+    const config = readSettings(context.options);
+    const settings = {
+      ...config,
+      efforts: {
+        astra: config.codex?.variant ?? config.codex?.effort ?? 'default',
+        opus: config.claude?.variant ?? config.claude?.effort ?? 'default'
+      },
+      models: {
+        astra: config.codex?.model,
+        opus: config.claude?.model
+      }
+    };
+    const read = createReader(settings);
+    const [saved, update] = context.storage.store('totals', {
+      initial: {
+        resets: {}
+      }
+    });
+    function Usage(props) {
+      const [snapshot, setSnapshot] = createSignal(null);
+      const [error, setError] = createSignal('');
+      const location = createMemo(() => context.data.session.get(props.sessionID)?.location);
+      createEffect(() => {
+        const directory = location()?.directory;
+        let disposed = false,
+          busy = false;
+        setSnapshot(null);
+        setError('');
+        const poll = async () => {
+          if (busy || !directory) return;
+          busy = true;
+          try {
+            const next = await read(directory);
+            if (!disposed) {
+              setSnapshot(next);
+              setError('');
+            }
+          } catch {
+            if (!disposed) {
+              setSnapshot(null);
+              setError('Telemetry unavailable');
+            }
+          } finally {
+            busy = false;
+          }
+        };
+        void poll();
+        const timer = setInterval(poll, 3000);
+        onCleanup(() => {
+          disposed = true;
+          clearInterval(timer);
+        });
+      });
+      const totals = createMemo(() => snapshot() ? cards(snapshot(), saved.resets[snapshot().key]) : []);
+      async function clear() {
+        const value = snapshot();
+        if (!value) return;
+        try {
+          await update(draft => {
+            draft.resets[value.key] = captureTotals(value.calls);
+          });
+        } catch {
+          context.ui.toast.show({
+            message: 'Could not save usage reset',
+            variant: 'error'
+          });
+        }
+      }
+      async function restore() {
+        const value = snapshot();
+        if (!value) return;
+        try {
+          await update(draft => {
+            delete draft.resets[value.key];
+          });
+        } catch {
+          context.ui.toast.show({
+            message: 'Could not restore usage totals',
+            variant: 'error'
+          });
+        }
+      }
+      context.keymap.layer(() => ({
+        mode: 'global',
+        commands: [{
+          id: 'hybrid-usage.clear',
+          title: 'Hybrid usage: clear totals for this project',
+          palette: true,
+          slash: {
+            name: 'hybrid-clear'
+          },
+          run: clear
+        }, {
+          id: 'hybrid-usage.restore',
+          title: 'Hybrid usage: restore totals for this project',
+          palette: true,
+          slash: {
+            name: 'hybrid-restore'
+          },
+          run: restore
+        }]
+      }));
+      return (() => {
+        var _el$3 = _$createElement("box"),
+          _el$4 = _$createElement("text");
+        _$insertNode(_el$3, _el$4);
+        _$setProp(_el$3, "flexDirection", "column");
+        _$setProp(_el$3, "gap", 1);
+        _$insertNode(_el$4, _$createTextNode(`[Hybrid Workflow settings]`));
+        _$setProp(_el$4, "onMouseDown", () => preferences.show());
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return error();
+          },
+          get children() {
+            var _el$6 = _$createElement("text");
+            _$insert(_el$6, error);
+            _$effect(_$p => _$setProp(_el$6, "fg", context.theme.text.muted, _$p));
+            return _el$6;
+          }
+        }), null);
+        _$insert(_el$3, _$createComponent(For, {
+          get each() {
+            return totals();
+          },
+          children: card => (() => {
+            var _el$11 = _$createElement("box"),
+              _el$12 = _$createElement("text"),
+              _el$13 = _$createElement("b"),
+              _el$14 = _$createTextNode(` · `),
+              _el$15 = _$createElement("text"),
+              _el$16 = _$createTextNode(` tokens · `),
+              _el$17 = _$createElement("text"),
+              _el$18 = _$createElement("text"),
+              _el$19 = _$createTextNode(`Input: `),
+              _el$20 = _$createElement("text"),
+              _el$21 = _$createTextNode(`Output: `),
+              _el$22 = _$createElement("text"),
+              _el$23 = _$createTextNode(`Cache: `);
+            _$insertNode(_el$11, _el$12);
+            _$insertNode(_el$11, _el$15);
+            _$insertNode(_el$11, _el$17);
+            _$insertNode(_el$11, _el$18);
+            _$insertNode(_el$11, _el$20);
+            _$insertNode(_el$11, _el$22);
+            _$setProp(_el$11, "flexDirection", "column");
+            _$insertNode(_el$12, _el$13);
+            _$insertNode(_el$13, _el$14);
+            _$insert(_el$13, () => card.model ?? settings.models[card.who], _el$14);
+            _$insert(_el$13, () => card.effort, null);
+            _$insertNode(_el$15, _el$16);
+            _$insert(_el$15, () => number(card.total), _el$16);
+            _$insert(_el$15, () => card.status, null);
+            _$insert(_el$17, () => money(card.cost));
+            _$insertNode(_el$18, _el$19);
+            _$insert(_el$18, () => number(card.input), null);
+            _$insertNode(_el$20, _el$21);
+            _$insert(_el$20, () => number(card.output), null);
+            _$insertNode(_el$22, _el$23);
+            _$insert(_el$22, () => number(card.cache), null);
+            _$insert(_el$11, _$createComponent(Show, {
+              get when() {
+                return card.partial;
+              },
+              get children() {
+                var _el$24 = _$createElement("text"),
+                  _el$25 = _$createTextNode(`Partial · `),
+                  _el$26 = _$createTextNode(`/`),
+                  _el$27 = _$createTextNode(` measured`);
+                _$insertNode(_el$24, _el$25);
+                _$insertNode(_el$24, _el$26);
+                _$insertNode(_el$24, _el$27);
+                _$insert(_el$24, () => card.measuredCalls, _el$26);
+                _$insert(_el$24, () => card.calls, _el$27);
+                _$effect(_$p => _$setProp(_el$24, "fg", context.theme.text.muted, _$p));
+                return _el$24;
+              }
+            }), null);
+            _$effect(_p$ => {
+              var _v$ = context.theme.text.base,
+                _v$2 = context.theme.text.base,
+                _v$3 = context.theme.text.base,
+                _v$4 = context.theme.text.muted,
+                _v$5 = context.theme.text.muted,
+                _v$6 = context.theme.text.muted;
+              _v$ !== _p$.e && (_p$.e = _$setProp(_el$12, "fg", _v$, _p$.e));
+              _v$2 !== _p$.t && (_p$.t = _$setProp(_el$15, "fg", _v$2, _p$.t));
+              _v$3 !== _p$.a && (_p$.a = _$setProp(_el$17, "fg", _v$3, _p$.a));
+              _v$4 !== _p$.o && (_p$.o = _$setProp(_el$18, "fg", _v$4, _p$.o));
+              _v$5 !== _p$.i && (_p$.i = _$setProp(_el$20, "fg", _v$5, _p$.i));
+              _v$6 !== _p$.n && (_p$.n = _$setProp(_el$22, "fg", _v$6, _p$.n));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined,
+              i: undefined,
+              n: undefined
+            });
+            return _el$11;
+          })()
+        }), null);
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return snapshot();
+          },
+          get children() {
+            return [(() => {
+              var _el$7 = _$createElement("text");
+              _$insert(_el$7, () => snapshot().task ? 'Project bridge usage · USD' : 'No bridge calls in this project');
+              _$effect(_$p => _$setProp(_el$7, "fg", context.theme.text.muted, _$p));
+              return _el$7;
+            })(), (() => {
+              var _el$8 = _$createElement("box"),
+                _el$9 = _$createElement("text");
+              _$insertNode(_el$8, _el$9);
+              _$setProp(_el$8, "flexDirection", "row");
+              _$setProp(_el$8, "gap", 2);
+              _$insertNode(_el$9, _$createTextNode(`[Clear totals]`));
+              _$setProp(_el$9, "onMouseDown", clear);
+              _$insert(_el$8, _$createComponent(Show, {
+                get when() {
+                  return saved.resets[snapshot()?.key];
+                },
+                get children() {
+                  var _el$1 = _$createElement("text");
+                  _$insertNode(_el$1, _$createTextNode(`[Restore]`));
+                  _$setProp(_el$1, "onMouseDown", restore);
+                  _$effect(_$p => _$setProp(_el$1, "fg", context.theme.text.muted, _$p));
+                  return _el$1;
+                }
+              }), null);
+              _$effect(_$p => _$setProp(_el$9, "fg", context.theme.text.muted, _$p));
+              return _el$8;
+            })()];
+          }
+        }), null);
+        _$effect(_$p => _$setProp(_el$4, "fg", context.theme.text.muted, _$p));
+        return _el$3;
+      })();
+    }
+    const sidebar = context.ui.slot({
+      append: 'sidebar.content',
+      render: props => _$createComponent(Usage, {
+        get sessionID() {
+          return props.sessionID;
+        }
+      })
+    });
+    return () => {
+      clearTimeout(firstRun);
+      preferences.dispose();
+      home?.();
+      sidebar?.();
+    };
+  }
+});