@wizardingcode/shibaox-tui 0.1.0

package/src/component/dialogs/keys.tsx

@@ -0,0 +1,201 @@
+import { TextAttributes } from '@opentui/core';
+import type { KeyRow } from '@wizardingcode/shibaox-daemon';
+import { createMemo, createResource, createSignal, For, type JSX, Show } from 'solid-js';
+import { useClient } from '../../context/client.js';
+import { useKeys } from '../../context/keys.js';
+import { useTheme } from '../../theme/context.js';
+import { Dialog, useDialog } from '../../ui/dialog.js';
+import { useToast } from '../../ui/toast.js';
+
+const VISIBLE = 16;
+/** The keys most people set first, ahead of the rest of the catalog. */
+const PRIORITY = [
+  'ANTHROPIC_API_KEY',
+  'OPENROUTER_API_KEY',
+  'OPENAI_API_KEY',
+  'GOOGLE_GENERATIVE_AI_API_KEY',
+  'TYPESAFE_API_KEY',
+  'SHIBAOX_TELEGRAM_TOKEN',
+];
+
+/** Set keys first, then the usual ones, then the rest by name. */
+export function orderKeys(rows: readonly KeyRow[]): KeyRow[] {
+  const rank = (r: KeyRow) => {
+    const p = PRIORITY.indexOf(r.name);
+    return (r.set ? 0 : 1000) + (p < 0 ? PRIORITY.length : p);
+  };
+  return [...rows].sort((a, b) => rank(a) - rank(b) || a.name.localeCompare(b.name));
+}
+
+/**
+ * The key vault: ↑/↓ pick a key, enter types its value (masked) and enter again saves it,
+ * `x` removes the selected one. Values never show on screen.
+ */
+export function KeysDialog(): JSX.Element {
+  const client = useClient();
+  const dialog = useDialog();
+  const toast = useToast();
+  const theme = useTheme().surface('dialog');
+  const [rows, { refetch }] = createResource<KeyRow[]>(() => client.keys().catch(() => []));
+  const sorted = createMemo(() => orderKeys(rows() ?? []));
+  const [cursor, setCursor] = createSignal(0);
+  /** After a save the list reorders (set keys first): the cursor stays on the same key. */
+  const reload = async () => {
+    const name = selected()?.name;
+    await refetch();
+    if (name) {
+      const i = sorted().findIndex((r) => r.name === name);
+      if (i >= 0) setCursor(i);
+    }
+  };
+  const [editing, setEditing] = createSignal<string | undefined>();
+  const [value, setValue] = createSignal('');
+  const selected = () => sorted()[Math.min(cursor(), Math.max(0, sorted().length - 1))];
+  const save = async () => {
+    const name = editing();
+    const v = value().trim();
+    if (!name) return;
+    if (!v) {
+      setEditing(undefined);
+      return;
+    }
+    try {
+      await client.setKey(name, v);
+      toast.show({ message: `${name} saved in the vault`, variant: 'success' });
+      await reload();
+    } catch (e) {
+      toast.show({
+        message: `Could not save ${name}: ${e instanceof Error ? e.message : String(e)}`,
+        variant: 'error',
+      });
+    }
+    setValue('');
+    setEditing(undefined);
+  };
+  const remove = async () => {
+    const r = selected();
+    if (!r?.set || r.source !== 'vault') {
+      if (r?.source === 'env')
+        toast.show({ message: `${r.name} comes from the shell, not the vault`, variant: 'info' });
+      return;
+    }
+    await client.unsetKey(r.name).catch(() => undefined);
+    toast.show({ message: `${r.name} removed from the vault`, variant: 'info' });
+    await reload();
+  };
+  useKeys('dialog', (key) => {
+    if (editing()) return false; // the input owns the keys while a value is typed
+    if (key.name === 'up') {
+      setCursor((c) => Math.max(0, c - 1));
+      return true;
+    }
+    if (key.name === 'down') {
+      setCursor((c) => Math.min(sorted().length - 1, c + 1));
+      return true;
+    }
+    if (key.name === 'return') {
+      const r = selected();
+      // the input mounts on the next tick: a focused input would receive this same enter
+      if (r)
+        setTimeout(() => {
+          setValue('');
+          setEditing(r.name);
+        }, 0);
+      return true;
+    }
+    if (key.name === 'x' && !key.ctrl) {
+      void remove();
+      return true;
+    }
+    return false;
+  });
+  const start = () =>
+    Math.max(0, Math.min(cursor() - Math.floor(VISIBLE / 2), sorted().length - VISIBLE));
+  const window = () => sorted().slice(start(), start() + VISIBLE);
+  return (
+    <Dialog size="large" title="Keys" onClose={() => dialog.close()}>
+      <box flexDirection="column" width="100%">
+        <Show when={rows.loading}>
+          <text fg={theme.text.muted}>Reading the vault…</text>
+        </Show>
+        <For each={window()}>
+          {(r, i) => {
+            const active = () => start() + i() === cursor();
+            return (
+              <box
+                height={1}
+                flexShrink={0}
+                flexDirection="row"
+                backgroundColor={active() ? theme.background.action.primary.selected : undefined}
+              >
+                <text
+                  fg={r.set ? theme.text.feedback.success : theme.text.muted}
+                  wrapMode="none"
+                  flexShrink={0}
+                >
+                  {r.set ? ' ● ' : ' ○ '}
+                </text>
+                <text
+                  fg={active() ? theme.text.action.primary.selected : theme.text.base}
+                  attributes={TextAttributes.BOLD}
+                  wrapMode="none"
+                  flexShrink={0}
+                >
+                  {r.name.padEnd(28)}
+                </text>
+                <text fg={theme.text.muted} wrapMode="none" flexShrink={0}>
+                  {(r.set ? `${r.masked ?? ''} ${r.source ?? ''}` : 'missing').padEnd(22)}
+                </text>
+                <text fg={theme.text.muted} wrapMode="none" flexShrink={1}>
+                  {r.description}
+                </text>
+              </box>
+            );
+          }}
+        </For>
+        <Show when={sorted().length > VISIBLE}>
+          <box height={1} flexShrink={0}>
+            <text fg={theme.text.muted} wrapMode="none">
+              {`${cursor() + 1} of ${sorted().length}`}
+            </text>
+          </box>
+        </Show>
+        <box height={1} flexShrink={0} marginTop={1} flexDirection="row">
+          <Show
+            when={editing()}
+            fallback={
+              <text fg={theme.text.muted} wrapMode="none">
+                {'↑/↓ choose · enter set a value · x remove · esc close'}
+              </text>
+            }
+          >
+            <text fg={theme.text.base} wrapMode="none" flexShrink={0}>
+              {`value for ${editing() ?? ''}: `}
+            </text>
+            <text fg={theme.text.action.primary.selected} wrapMode="none" flexShrink={1}>
+              {'•'.repeat(Math.min(value().length, 40))}
+            </text>
+            <text fg={theme.text.muted} wrapMode="none" flexShrink={0}>
+              {value().length > 40 ? ` (${value().length} chars)` : ''}
+            </text>
+            {/* the real input carries the keys; its text is hidden behind the dots */}
+            <input
+              focused
+              width={1}
+              onInput={setValue}
+              onSubmit={() => void save()}
+              backgroundColor={theme.background.base}
+              focusedBackgroundColor={theme.background.base}
+              textColor={theme.background.base}
+              placeholderColor={theme.background.base}
+              cursorColor={theme.text.action.primary.selected}
+            />
+            <text fg={theme.text.muted} wrapMode="none" flexShrink={0}>
+              {'  enter saves'}
+            </text>
+          </Show>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/component/dialogs/palette.tsx

@@ -0,0 +1,95 @@
+import { TextAttributes } from '@opentui/core';
+import fuzzysort from 'fuzzysort';
+import { createMemo, createSignal, For, type JSX } from 'solid-js';
+import { useCommands } from '../../context/commands.js';
+import { useKeys } from '../../context/keys.js';
+import { useTheme } from '../../theme/context.js';
+import { Dialog, useDialog } from '../../ui/dialog.js';
+
+/** Every available command with its keys; enter runs the selected one. */
+export function PaletteDialog(): JSX.Element {
+  const registry = useCommands();
+  const dialog = useDialog();
+  const theme = useTheme().surface('dialog');
+  const [query, setQuery] = createSignal('');
+  const [cursor, setCursor] = createSignal(0);
+  const rows = createMemo(() => {
+    const all = registry.commands().filter((c) => c.when?.() ?? true);
+    const q = query().trim();
+    if (!q) return all;
+    return fuzzysort.go(q, all, { key: 'label' }).map((r) => r.obj);
+  });
+  const run = () => {
+    const c = rows()[Math.min(cursor(), rows().length - 1)];
+    if (!c) return;
+    dialog.close();
+    c.run();
+  };
+  useKeys('dialog', (key) => {
+    if (key.name === 'up') {
+      setCursor((c) => Math.max(0, c - 1));
+      return true;
+    }
+    if (key.name === 'down') {
+      setCursor((c) => Math.min(rows().length - 1, c + 1));
+      return true;
+    }
+    if (key.name === 'return') {
+      run();
+      return true;
+    }
+    return false;
+  });
+  return (
+    <Dialog title="Commands" onClose={() => dialog.close()}>
+      <box height={1} flexShrink={0} flexDirection="row" marginBottom={1}>
+        <text fg={theme.text.action.primary.selected} flexShrink={0}>
+          {'› '}
+        </text>
+        <input
+          focused
+          placeholder="type a command"
+          onInput={(v: string) => {
+            setQuery(v);
+            setCursor(0);
+          }}
+          flexGrow={1}
+          backgroundColor={theme.background.base}
+          focusedBackgroundColor={theme.background.base}
+          textColor={theme.text.base}
+          placeholderColor={theme.text.muted}
+          cursorColor={theme.text.action.primary.selected}
+        />
+      </box>
+      <For each={rows().slice(0, 12)}>
+        {(c, i) => {
+          const selected = () => i() === Math.min(cursor(), rows().length - 1);
+          return (
+            <box
+              height={1}
+              flexShrink={0}
+              flexDirection="row"
+              backgroundColor={selected() ? theme.background.action.primary.selected : undefined}
+              onMouseUp={() => {
+                setCursor(i());
+                run();
+              }}
+            >
+              <text
+                fg={theme.text.base}
+                attributes={selected() ? TextAttributes.BOLD : undefined}
+                wrapMode="none"
+              >
+                {c.label}
+              </text>
+              <box flexGrow={1} />
+              <text fg={theme.text.muted} wrapMode="none">
+                {c.keys}
+              </text>
+            </box>
+          );
+        }}
+      </For>
+    </Dialog>
+  );
+}

package/src/component/dialogs/runs.tsx

@@ -0,0 +1,115 @@
+import { TextAttributes } from '@opentui/core';
+import fuzzysort from 'fuzzysort';
+import { createMemo, createSignal, For, type JSX } from 'solid-js';
+import { useData } from '../../context/data.js';
+import { useKeys } from '../../context/keys.js';
+import { age, money, shortId } from '../../model/format.js';
+import { statusOf } from '../../model/status.js';
+import { useTheme } from '../../theme/context.js';
+import { Dialog, useDialog } from '../../ui/dialog.js';
+
+const VISIBLE = 20;
+
+/** Every run the daemon knows, filtered as you type; enter opens the selected one in a tab. */
+export function RunsDialog(): JSX.Element {
+  const data = useData();
+  const dialog = useDialog();
+  const theme = useTheme().surface('dialog');
+  const [query, setQuery] = createSignal('');
+  const [cursor, setCursor] = createSignal(0);
+  const rows = createMemo(() => {
+    const runs = [...data.state.runs].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    const q = query().trim();
+    if (!q) return runs;
+    return fuzzysort
+      .go(q, runs, { key: (r) => `${r.runId} ${r.workflow} ${r.status}` })
+      .map((r) => r.obj);
+  });
+  const open = () => {
+    const r = rows()[Math.min(cursor(), rows().length - 1)];
+    if (!r) return;
+    dialog.close();
+    data.openRun(r.runId);
+  };
+  useKeys('dialog', (key) => {
+    if (key.name === 'up') {
+      setCursor((c) => Math.max(0, c - 1));
+      return true;
+    }
+    if (key.name === 'down') {
+      setCursor((c) => Math.min(rows().length - 1, c + 1));
+      return true;
+    }
+    if (key.name === 'return') {
+      open();
+      return true;
+    }
+    return false;
+  });
+  const start = () =>
+    Math.max(0, Math.min(cursor() - Math.floor(VISIBLE / 2), rows().length - VISIBLE));
+  return (
+    <Dialog size="large" title="Runs" onClose={() => dialog.close()}>
+      <box height={1} flexShrink={0} flexDirection="row" marginBottom={1}>
+        <text fg={theme.text.action.primary.selected} flexShrink={0}>
+          {'› '}
+        </text>
+        <input
+          focused
+          placeholder="type to filter"
+          onInput={(v: string) => {
+            setQuery(v);
+            setCursor(0);
+          }}
+          flexGrow={1}
+          backgroundColor={theme.background.base}
+          focusedBackgroundColor={theme.background.base}
+          textColor={theme.text.base}
+          placeholderColor={theme.text.muted}
+          cursorColor={theme.text.action.primary.selected}
+        />
+      </box>
+      <For each={rows().slice(start(), start() + VISIBLE)}>
+        {(r, i) => {
+          const selected = () => start() + i() === Math.min(cursor(), rows().length - 1);
+          const look = () => statusOf({ status: r.status });
+          const color = () => {
+            const f = look().feedback;
+            return f === 'muted' ? theme.text.muted : theme.text.feedback[f];
+          };
+          return (
+            <box
+              height={1}
+              flexShrink={0}
+              flexDirection="row"
+              backgroundColor={selected() ? theme.background.action.primary.selected : undefined}
+              onMouseUp={() => {
+                setCursor(start() + i());
+                open();
+              }}
+            >
+              <text fg={color()} wrapMode="none">{`${look().symbol} `}</text>
+              <text
+                fg={theme.text.base}
+                attributes={selected() ? TextAttributes.BOLD : undefined}
+                wrapMode="none"
+              >
+                {`${shortId(r.runId)} ${r.workflow}`}
+              </text>
+              <box flexGrow={1} />
+              <text
+                fg={theme.text.muted}
+                wrapMode="none"
+              >{`${look().word} · ${age(r.createdAt)} · ${money(r.spentUsd)}`}</text>
+            </box>
+          );
+        }}
+      </For>
+      <box height={1} flexShrink={0} marginTop={1}>
+        <text fg={theme.text.muted} wrapMode="none">
+          {rows().length === 0 ? 'No runs match' : '↑/↓ select · enter open · esc close'}
+        </text>
+      </box>
+    </Dialog>
+  );
+}

package/src/component/dialogs/tiers.tsx

@@ -0,0 +1,240 @@
+import { TextAttributes } from '@opentui/core';
+import type { ModelChoice, OrgConfig, OrgConfigPatch } from '@wizardingcode/shibaox-daemon';
+import fuzzysort from 'fuzzysort';
+import { createMemo, createResource, createSignal, For, type JSX, Show } from 'solid-js';
+import { useClient } from '../../context/client.js';
+import { useKeys } from '../../context/keys.js';
+import { useTheme } from '../../theme/context.js';
+import { Dialog, useDialog } from '../../ui/dialog.js';
+import { useToast } from '../../ui/toast.js';
+
+const VISIBLE = 12;
+type RowName = 'strong' | 'cheap' | 'decision' | 'judge' | 'adapter';
+interface Row {
+  name: RowName;
+  value?: string;
+  note: string;
+}
+const ADAPTERS = ['direct', 'claude-code', 'mock'];
+
+/** What the dialog lists for an org config, in the order people read it. */
+export function tierRows(c: OrgConfig | undefined): Row[] {
+  return [
+    { name: 'strong', value: c?.tiers.strong, note: 'tasks that need the best model' },
+    { name: 'cheap', value: c?.tiers.cheap, note: 'the orchestrator and light roles' },
+    { name: 'decision', value: c?.tiers.decision, note: 'decide nodes (model ref or jev-latest)' },
+    { name: 'judge', value: c?.judge, note: 'judge checks (default: decision, then strong)' },
+    { name: 'adapter', value: c?.adapter, note: 'default runtime; a chosen model overrides it' },
+  ];
+}
+
+/** The choices for a row: the daemon's models (usable first) for a tier, the adapters otherwise. */
+export function tierChoices(name: RowName, models: readonly ModelChoice[]): string[] {
+  if (name === 'adapter') return ADAPTERS;
+  const refs = [...models]
+    .sort((a, b) => Number(b.configured) - Number(a.configured))
+    .map((m) => m.ref);
+  return name === 'decision' ? ['jev-latest', ...refs] : refs;
+}
+
+/**
+ * The org's tiers, judge and adapter: ↑/↓ pick a row, enter opens the list of models (typed
+ * text filters it), enter again saves through the daemon; `x` clears judge/adapter.
+ */
+export function TiersDialog(props: { orgRoot: string; onSaved?: () => void }): JSX.Element {
+  const client = useClient();
+  const dialog = useDialog();
+  const toast = useToast();
+  const theme = useTheme().surface('dialog');
+  const [config, { refetch }] = createResource(() => client.orgConfig(props.orgRoot));
+  const [models] = createResource(() => client.models().catch(() => []));
+  const rows = createMemo(() => tierRows(config()));
+  const [cursor, setCursor] = createSignal(0);
+  const [editing, setEditing] = createSignal<RowName | undefined>();
+  const [query, setQuery] = createSignal('');
+  const [pick, setPick] = createSignal(0);
+  const choices = createMemo(() => {
+    const name = editing();
+    if (!name) return [];
+    const all = tierChoices(name, models() ?? []);
+    const q = query().trim();
+    if (!q) return all;
+    return fuzzysort.go(q, all).map((r) => r.target);
+  });
+  const selected = () => rows()[Math.min(cursor(), rows().length - 1)];
+  const patchFor = (name: RowName, value: string | null): OrgConfigPatch =>
+    name === 'judge'
+      ? { judge: value }
+      : name === 'adapter'
+        ? { adapter: value as OrgConfigPatch['adapter'] }
+        : { tiers: { [name]: value } };
+  const save = async (name: RowName, value: string | null) => {
+    try {
+      await client.setOrgConfig(props.orgRoot, patchFor(name, value));
+      toast.show({ message: value ? `${name} → ${value}` : `${name} cleared`, variant: 'success' });
+      await refetch();
+      props.onSaved?.();
+    } catch (e) {
+      toast.show({
+        message: `Could not set ${name}: ${e instanceof Error ? e.message : String(e)}`,
+        variant: 'error',
+      });
+    }
+  };
+  const choose = () => {
+    const name = editing();
+    const value = choices()[Math.min(pick(), choices().length - 1)];
+    setEditing(undefined);
+    setQuery('');
+    if (name && value) void save(name, value);
+  };
+  useKeys('dialog', (key) => {
+    if (editing()) {
+      // the input has the text; the list keys are ours
+      if (key.name === 'up') {
+        setPick((c) => Math.max(0, c - 1));
+        return true;
+      }
+      if (key.name === 'down') {
+        setPick((c) => Math.min(choices().length - 1, c + 1));
+        return true;
+      }
+      return false;
+    }
+    if (key.name === 'up') {
+      setCursor((c) => Math.max(0, c - 1));
+      return true;
+    }
+    if (key.name === 'down') {
+      setCursor((c) => Math.min(rows().length - 1, c + 1));
+      return true;
+    }
+    if (key.name === 'return') {
+      const r = selected();
+      // the input mounts on the next tick: a focused input would receive this same enter
+      if (r)
+        setTimeout(() => {
+          setQuery('');
+          setPick(0);
+          setEditing(r.name);
+        }, 0);
+      return true;
+    }
+    if (key.name === 'x' && !key.ctrl) {
+      const r = selected();
+      if (r && (r.name === 'judge' || r.name === 'adapter')) void save(r.name, null);
+      else toast.show({ message: 'Tiers cannot be cleared, pick another model', variant: 'info' });
+      return true;
+    }
+    return false;
+  });
+  const start = () =>
+    Math.max(0, Math.min(pick() - Math.floor(VISIBLE / 2), choices().length - VISIBLE));
+  const title = () => `Tiers · ${config()?.organization ?? ''}`;
+  // the Dialog sees escape first (its handler is the newest): back out of the list, else close
+  const back = () => {
+    if (!editing()) return dialog.close();
+    setEditing(undefined);
+    setQuery('');
+  };
+  return (
+    <Dialog size="large" title={title()} onClose={back}>
+      <box flexDirection="column" width="100%">
+        <Show when={config.error}>
+          <text fg={theme.text.feedback.error}>
+            {`Could not read the org: ${String((config.error as Error)?.message ?? config.error)}`}
+          </text>
+        </Show>
+        <For each={rows()}>
+          {(r, i) => {
+            const active = () => i() === Math.min(cursor(), rows().length - 1);
+            return (
+              <box
+                height={1}
+                flexShrink={0}
+                flexDirection="row"
+                backgroundColor={active() ? theme.background.action.primary.selected : undefined}
+              >
+                <text
+                  fg={active() ? theme.text.action.primary.selected : theme.text.base}
+                  attributes={TextAttributes.BOLD}
+                  wrapMode="none"
+                  flexShrink={0}
+                >
+                  {` ${r.name.padEnd(10)}`}
+                </text>
+                <text
+                  fg={r.value ? theme.text.base : theme.text.muted}
+                  wrapMode="none"
+                  flexShrink={0}
+                >
+                  {(r.value ?? '—').padEnd(44)}
+                </text>
+                <text fg={theme.text.muted} wrapMode="none" flexShrink={1}>
+                  {r.note}
+                </text>
+              </box>
+            );
+          }}
+        </For>
+        <Show
+          when={editing()}
+          fallback={
+            <box height={1} flexShrink={0} marginTop={1}>
+              <text fg={theme.text.muted} wrapMode="none">
+                {`${config()?.per_run_usd !== undefined ? `budget $${config()?.per_run_usd} per run (/budget for this run) · ` : ''}↑/↓ choose · enter change · x clear judge/adapter · esc close`}
+              </text>
+            </box>
+          }
+        >
+          <box height={1} flexShrink={0} marginTop={1} flexDirection="row">
+            <text fg={theme.text.base} wrapMode="none" flexShrink={0}>
+              {`${editing() ?? ''} › `}
+            </text>
+            <input
+              focused
+              placeholder="type to filter"
+              onInput={(v: string) => {
+                setQuery(v);
+                setPick(0);
+              }}
+              onSubmit={choose}
+              flexGrow={1}
+              backgroundColor={theme.background.base}
+              focusedBackgroundColor={theme.background.base}
+              textColor={theme.text.base}
+              placeholderColor={theme.text.muted}
+              cursorColor={theme.text.action.primary.selected}
+            />
+          </box>
+          <For each={choices().slice(start(), start() + VISIBLE)}>
+            {(c, i) => {
+              const active = () => start() + i() === Math.min(pick(), choices().length - 1);
+              return (
+                <box
+                  height={1}
+                  flexShrink={0}
+                  backgroundColor={active() ? theme.background.action.primary.selected : undefined}
+                >
+                  <text
+                    fg={active() ? theme.text.action.primary.selected : theme.text.base}
+                    wrapMode="none"
+                  >
+                    {`   ${c}`}
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+          <box height={1} flexShrink={0}>
+            <text fg={theme.text.muted} wrapMode="none">
+              {choices().length === 0
+                ? 'No model matches'
+                : `${choices().length} choices · ↑/↓ pick · enter save · esc back`}
+            </text>
+          </box>
+        </Show>
+      </box>
+    </Dialog>
+  );
+}