@wizardingcode/shibaox-tui 0.1.3 → 0.1.4

package/src/component/dialogs/keys.tsx

@@ -1,201 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,240 +0,0 @@
-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>
-  );
-}