@wizardingcode/shibaox-tui 0.1.0

package/src/component/footer.tsx

@@ -0,0 +1,66 @@
+import { TextAttributes } from '@opentui/core';
+import { useTerminalDimensions } from '@opentui/solid';
+import { For, type JSX } from 'solid-js';
+import { useTheme } from '../theme/context.js';
+import { stringWidth, takeWidth } from '../ui/marquee.js';
+
+export interface KeyHint {
+  key: string;
+  label: string;
+}
+
+/** `key label · key label` with the keys in bold, as one row of texts. */
+export function KeyHints(props: { hints: KeyHint[] }): JSX.Element {
+  const theme = useTheme();
+  return (
+    <box flexDirection="row" flexShrink={0}>
+      <For each={props.hints}>
+        {(h, i) => (
+          <>
+            {i() > 0 ? <text fg={theme.text.muted}>{'  '}</text> : null}
+            <text fg={theme.text.base} attributes={TextAttributes.BOLD} wrapMode="none">
+              {h.key}
+            </text>
+            <text fg={theme.text.muted} wrapMode="none">{` ${h.label}`}</text>
+          </>
+        )}
+      </For>
+    </box>
+  );
+}
+
+/** The last line: status on the left, key hints on the right; the left side yields when space is short. */
+export function Footer(props: { left: string; hints?: KeyHint[]; right?: string }): JSX.Element {
+  const theme = useTheme();
+  const dimensions = useTerminalDimensions();
+  const rightWidth = () =>
+    props.right
+      ? stringWidth(props.right)
+      : (props.hints ?? []).reduce((w, h) => w + stringWidth(h.key) + stringWidth(h.label) + 3, 0);
+  const left = () => {
+    const room = dimensions().width - 4 - rightWidth();
+    return stringWidth(props.left) > room ? takeWidth(props.left, Math.max(0, room)) : props.left;
+  };
+  return (
+    <box
+      height={1}
+      flexShrink={0}
+      flexDirection="row"
+      paddingLeft={2}
+      paddingRight={2}
+      width="100%"
+    >
+      <text fg={theme.text.muted} flexShrink={1} wrapMode="none">
+        {left()}
+      </text>
+      <box flexGrow={1} flexShrink={0} width={2} />
+      {props.right ? (
+        <text fg={theme.text.muted} flexShrink={0} wrapMode="none">
+          {props.right}
+        </text>
+      ) : (
+        <KeyHints hints={props.hints ?? []} />
+      )}
+    </box>
+  );
+}

package/src/component/logo.tsx

@@ -0,0 +1,29 @@
+import { RGBA } from '@opentui/core';
+import { useTerminalDimensions } from '@opentui/solid';
+import type { JSX } from 'solid-js';
+import { useTheme } from '../theme/context.js';
+
+/** Blends `overlay` over `base` by `alpha`. */
+export function tint(base: RGBA, overlay: RGBA, alpha: number): RGBA {
+  const r = base.r + (overlay.r - base.r) * alpha;
+  const g = base.g + (overlay.g - base.g) * alpha;
+  const b = base.b + (overlay.b - base.b) * alpha;
+  return RGBA.fromInts(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
+}
+
+/** The wordmark in two tones: `shiba` muted, `ox` in the brand orange. Smaller under 60 columns, gone under 20 rows. */
+export function Logo(): JSX.Element {
+  const theme = useTheme();
+  const dimensions = useTerminalDimensions();
+  const font = () => (dimensions().width < 60 ? 'tiny' : 'block');
+  return (
+    <box flexShrink={0} flexDirection="row">
+      {dimensions().height < 20 ? null : (
+        <>
+          <ascii_font text="shiba" font={font()} color={theme.text.muted} selectable={false} />
+          <ascii_font text="ox" font={font()} color={theme.syntax.heading} selectable={false} />
+        </>
+      )}
+    </box>
+  );
+}

package/src/component/prompt/autocomplete.tsx

@@ -0,0 +1,44 @@
+import { TextAttributes } from '@opentui/core';
+import { For, type JSX } from 'solid-js';
+import { SUGGESTIONS, type Suggestion } from '../../model/prompt-commands.js';
+import { useTheme } from '../../theme/context.js';
+
+export type { Suggestion } from '../../model/prompt-commands.js';
+
+/** The suggestion list above the prompt: up to ten rows, the selected one highlighted. */
+export function Autocomplete(props: { items: Suggestion[]; selected: number }): JSX.Element {
+  const theme = useTheme();
+  return (
+    <box
+      flexDirection="column"
+      backgroundColor={theme.background.raised.base}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <For each={props.items.slice(0, SUGGESTIONS)}>
+        {(item, i) => (
+          <box
+            height={1}
+            flexShrink={0}
+            flexDirection="row"
+            backgroundColor={
+              i() === props.selected ? theme.background.action.primary.selected : undefined
+            }
+          >
+            <text
+              fg={i() === props.selected ? theme.text.action.primary.selected : theme.text.base}
+              attributes={i() === props.selected ? TextAttributes.BOLD : undefined}
+              wrapMode="none"
+              flexShrink={0}
+            >
+              {item.label}
+            </text>
+            <text fg={theme.text.muted} wrapMode="none" flexShrink={1}>
+              {item.hint ? `  ${item.hint}` : ''}
+            </text>
+          </box>
+        )}
+      </For>
+    </box>
+  );
+}

package/src/component/prompt/index.tsx

@@ -0,0 +1,213 @@
+import type { InputRenderable } from '@opentui/core';
+import { createEffect, createMemo, createSignal, type JSX, onCleanup, Show } from 'solid-js';
+import { useKeys } from '../../context/keys.js';
+import {
+  completeCommand,
+  type PromptCommand,
+  type PromptCommandSpec,
+  parsePromptCommand,
+} from '../../model/prompt-commands.js';
+import { useMotion } from '../../motion/config.js';
+import { useTheme } from '../../theme/context.js';
+import { Autocomplete } from './autocomplete.js';
+
+export interface PromptRef {
+  focus(): void;
+  set(text: string): void;
+  current(): string;
+  clear(): void;
+}
+
+const PLACEHOLDER_MS = 4000;
+
+/**
+ * The input of the home screen: `/` commands autocomplete (↑/↓ choose, tab/enter insert), enter
+ * with a command calls onCommand, enter with text calls onSubmit; ctrl+c clears the text.
+ */
+export function Prompt(props: {
+  ref?: (r: PromptRef) => void;
+  placeholders: string[];
+  disabled?: boolean;
+  /** The `/` commands this prompt offers. */
+  commands: PromptCommandSpec[];
+  /** Only the input row and the footer: the caller draws the box around it. */
+  bare?: boolean;
+  onSubmit(text: string): void;
+  onCommand(cmd: PromptCommand): void;
+  /** The text changed (the screen clears its notices). */
+  onInput?(text: string): void;
+  /** A free-text command was entered without its value: the screen shows what to type. */
+  onNeedValue?(cmd: string): void;
+  /** A line drawn inside the box under the input (the run context). */
+  footer?: JSX.Element;
+}): JSX.Element {
+  const theme = useTheme();
+  const motion = useMotion();
+  let input: InputRenderable | undefined;
+  const [text, setText] = createSignal('');
+  const [selected, setSelected] = createSignal(0);
+  const [placeholder, setPlaceholder] = createSignal(0);
+  const suggestions = createMemo(() => completeCommand(text(), { commands: props.commands }));
+  createEffect(() => {
+    suggestions();
+    setSelected(0);
+  });
+  createEffect(() => {
+    if (!motion() || props.placeholders.length < 2) return;
+    const t = setInterval(
+      () => setPlaceholder((i) => (i + 1) % props.placeholders.length),
+      PLACEHOLDER_MS,
+    );
+    onCleanup(() => clearInterval(t));
+  });
+
+  const set = (value: string) => {
+    if (input && !input.isDestroyed) input.value = value;
+    setText(value);
+  };
+  const api: PromptRef = {
+    // the home may already be gone when a closed dialog hands focus back
+    focus: () => {
+      if (input && !input.isDestroyed) input.focus();
+    },
+    set,
+    current: text,
+    clear: () => set(''),
+  };
+  props.ref?.(api);
+
+  const accept = () => {
+    const s = suggestions()[selected()];
+    if (!s) return;
+    set(s.insert);
+  };
+  const submit = () => {
+    if (props.disabled) return;
+    const value = text().trim();
+    if (!value) return;
+    if (!value.startsWith('/')) return props.onSubmit(value);
+    const s = suggestions()[selected()];
+    const parsed = parsePromptCommand(value, props.commands);
+    if (!parsed) {
+      // only the command name so far: enter takes the highlighted command
+      if (s) set(s.insert);
+      return;
+    }
+    const kind = props.commands.find((c) => c.name === parsed.command)?.kind ?? 'action';
+    if (kind === 'action') {
+      set('');
+      props.onCommand(parsed);
+      return;
+    }
+    if (!parsed.arg && !value.endsWith(' ') && text() === value) {
+      // `/adapter` + enter: step into its values (a list to pick from, or a hint of what to type)
+      set(`/${parsed.command} `);
+      if (kind === 'text') props.onNeedValue?.(parsed.command);
+      return;
+    }
+    if (kind === 'choice') {
+      // no value or a partial one: the highlighted choice is the value
+      const chosen = s?.insert.startsWith(`/${parsed.command} `)
+        ? parsePromptCommand(s.insert, props.commands)
+        : undefined;
+      const cmd = chosen?.arg ? chosen : parsed;
+      if (!cmd.arg) return;
+      set('');
+      props.onCommand(cmd);
+      return;
+    }
+    if (!parsed.arg) {
+      props.onNeedValue?.(parsed.command);
+      return;
+    }
+    set('');
+    props.onCommand(parsed);
+  };
+
+  useKeys('prompt', (key) => {
+    if (key.ctrl && key.name === 'c') {
+      if (!text()) return false;
+      set('');
+      return true;
+    }
+    if (key.name === '?') return true; // typed into the input, never the help shortcut
+    if (suggestions().length === 0) return false;
+    if (key.name === 'up') {
+      setSelected((i) => (i - 1 + suggestions().length) % suggestions().length);
+      return true;
+    }
+    if (key.name === 'down') {
+      setSelected((i) => (i + 1) % suggestions().length);
+      return true;
+    }
+    if (key.name === 'tab') {
+      accept();
+      return true;
+    }
+    return false;
+  });
+
+  const inner = () => (
+    <>
+      <box flexDirection="row" width="100%" height={1}>
+        <text fg={theme.text.action.primary.selected} flexShrink={0}>
+          {'› '}
+        </text>
+        <input
+          ref={(r: InputRenderable) => {
+            input = r;
+          }}
+          focused={!props.disabled}
+          placeholder={props.placeholders[placeholder()] ?? ''}
+          onInput={(v: string) => {
+            setText(v);
+            props.onInput?.(v);
+          }}
+          onSubmit={submit}
+          flexGrow={1}
+          backgroundColor={theme.background.raised.base}
+          focusedBackgroundColor={theme.background.raised.base}
+          textColor={theme.text.base}
+          placeholderColor={theme.text.muted}
+          cursorColor={theme.text.action.primary.selected}
+        />
+      </box>
+      <Show when={props.footer}>
+        <box height={1} flexShrink={0} />
+        <box height={1} flexShrink={0} flexDirection="row">
+          {props.footer}
+        </box>
+      </Show>
+    </>
+  );
+  return (
+    <box flexDirection="column" width="100%">
+      <Show when={suggestions().length > 0}>
+        <Autocomplete items={suggestions()} selected={selected()} />
+      </Show>
+      <Show
+        when={!props.bare}
+        fallback={
+          <box flexDirection="column" width="100%">
+            {inner()}
+          </box>
+        }
+      >
+        <box flexDirection="row" width="100%">
+          <box width={1} flexShrink={0} backgroundColor={theme.text.action.primary.selected} />
+          <box
+            flexGrow={1}
+            flexDirection="column"
+            paddingLeft={2}
+            paddingRight={2}
+            paddingTop={1}
+            paddingBottom={1}
+            backgroundColor={theme.background.raised.base}
+          >
+            {inner()}
+          </box>
+        </box>
+      </Show>
+    </box>
+  );
+}

package/src/component/reconnecting.tsx

@@ -0,0 +1,44 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+import { RGBA } from '@opentui/core';
+import { type Accessor, type JSX, Show } from 'solid-js';
+import { Spinner } from '../motion/spinner.js';
+import { useTheme } from '../theme/context.js';
+import { createDelayedPresence } from '../ui/delayed-presence.js';
+
+const DELAY_MS = 2000;
+
+/** Covers the page while the daemon has been unreachable for more than two seconds. */
+export function Reconnecting(props: { since: Accessor<number | undefined> }): JSX.Element {
+  const theme = useTheme();
+  const visible = createDelayedPresence(props.since, DELAY_MS);
+  return (
+    <Show when={visible()}>
+      <box
+        position="absolute"
+        zIndex={10_000}
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        backgroundColor={RGBA.fromInts(0, 0, 0, 150)}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <box
+          width={48}
+          maxWidth="90%"
+          flexDirection="column"
+          backgroundColor={theme.background.raised.base}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          gap={1}
+        >
+          <Spinner color={theme.text.base}>Connection lost…</Spinner>
+          <text fg={theme.text.muted}>Reconnecting to the daemon automatically.</text>
+        </box>
+      </box>
+    </Show>
+  );
+}

package/src/component/sidebar.tsx

@@ -0,0 +1,235 @@
+import { TextAttributes } from '@opentui/core';
+import type { InboxItem } from '@wizardingcode/shibaox-daemon';
+import { createMemo, createSignal, For, type JSX, Show } from 'solid-js';
+import { useConfig } from '../context/config.js';
+import { useData } from '../context/data.js';
+import { useKeys } from '../context/keys.js';
+import { duration, money, shortId } from '../model/format.js';
+import { tilde } from '../routes/home.js';
+import { pendingFor } from '../routes/session/approval-bar.js';
+import { requestText } from '../routes/session/request.js';
+import { useTheme } from '../theme/context.js';
+import { useDialog } from '../ui/dialog.js';
+import { marqueeText } from '../ui/marquee.js';
+import { useToast } from '../ui/toast.js';
+import { Confirm } from './dialogs/confirm.js';
+
+function Title(props: { text: string }): JSX.Element {
+  const theme = useTheme();
+  return (
+    <box height={1} flexShrink={0} marginTop={1}>
+      <text fg={theme.text.base} attributes={TextAttributes.BOLD} wrapMode="none">
+        {props.text}
+      </text>
+    </box>
+  );
+}
+
+const NODE_MARK: Record<string, string> = {
+  completed: '✓',
+  passed: '✓',
+  running: '·',
+  waiting: '▲',
+  failed: '✗',
+  gate_failed: '✗',
+};
+
+/** The current run at a glance: request, context, nodes as a checklist, files, and what needs you. */
+export function Sidebar(props: {
+  /** The latest run of the tab (its nodes and pending items). */
+  runId: string;
+  /** The first run of the tab (its request titles the sidebar). */
+  rootId?: string;
+  width: number;
+  focused: boolean;
+  onFocusBack: () => void;
+}): JSX.Element {
+  const data = useData();
+  const config = useConfig();
+  const theme = useTheme().surface('sidebar');
+  const dialog = useDialog();
+  const toast = useToast();
+  const state = () => data.state.states[props.runId];
+  const root = () => data.state.states[props.rootId ?? props.runId];
+  const summary = () => data.state.runs.find((r) => r.runId === props.runId);
+  const spent = () =>
+    data
+      .threadOf(props.rootId ?? props.runId)
+      .reduce((n, id) => n + (data.state.states[id]?.spentUsd ?? 0), 0);
+  const cards = data.timeline(props.runId);
+  const inner = () => Math.max(8, props.width - 2);
+
+  const nodes = createMemo(() => {
+    const wf = state()?.workflowSnapshot;
+    const st = state()?.nodes ?? {};
+    const ids = wf ? Object.keys(wf.nodes) : Object.keys(st);
+    return ids.map((id) => ({ id, status: st[id]?.status ?? 'pending' }));
+  });
+  const done = () =>
+    nodes().filter((n) => n.status === 'completed' || n.status === 'passed').length;
+  const files = createMemo(() => {
+    const out = new Set<string>();
+    for (const c of cards()) {
+      if (c.kind === 'node') for (const b of c.blocks) if (b.kind === 'file') out.add(b.path);
+      if (c.kind === 'summary') for (const f of c.files) out.add(f);
+    }
+    return [...out];
+  });
+  const elapsed = () => {
+    const created = summary()?.createdAt;
+    if (!created) return undefined;
+    const from = Date.parse(created);
+    const terminal = ['completed', 'failed', 'cancelled'].includes(summary()?.status ?? '');
+    const to = terminal ? Date.parse(summary()?.updatedAt ?? created) : Date.now();
+    return Number.isFinite(from) && Number.isFinite(to)
+      ? duration(Math.max(0, to - from))
+      : undefined;
+  };
+  const items = createMemo(() => pendingFor(data.state.inbox, props.runId));
+  const [cursor, setCursor] = createSignal(0);
+  const selectedItem = () => items()[Math.min(cursor(), Math.max(0, items().length - 1))];
+
+  /** Answers like the approval bar: a command approval asks y first. */
+  const answer = (item: InboxItem, approved: boolean) => {
+    if (approved && item.kind === 'approval') {
+      dialog.open(() => (
+        <Confirm
+          message={`Approve ${item.prompt}?`}
+          onYes={() => {
+            dialog.close();
+            void data.actions.answer(item.id, true);
+          }}
+          onNo={() => dialog.close()}
+        />
+      ));
+      return;
+    }
+    void data.actions.answer(item.id, approved);
+  };
+
+  useKeys('pane', (key) => {
+    if (!props.focused || key.ctrl || key.meta) return false;
+    switch (key.name) {
+      case 'j':
+      case 'down':
+        if (cursor() < items().length - 1) setCursor((c) => c + 1);
+        return true;
+      case 'k':
+      case 'up':
+        if (cursor() > 0) setCursor((c) => c - 1);
+        return true;
+      case 'a':
+      case 'd': {
+        const item = selectedItem();
+        if (item) answer(item, key.name === 'a');
+        else toast.show({ message: 'Nothing waiting', variant: 'info' });
+        return true;
+      }
+      default:
+        return false;
+    }
+  });
+
+  return (
+    <box
+      width={props.width}
+      flexShrink={0}
+      height="100%"
+      flexDirection="column"
+      backgroundColor={theme.background.base}
+      paddingLeft={2}
+      paddingRight={1}
+      paddingTop={1}
+    >
+      <text fg={theme.text.base} attributes={TextAttributes.BOLD} wrapMode="word">
+        {marqueeText(requestText(root()?.input) || (summary()?.workflow ?? ''), inner() * 3, 0)}
+      </text>
+      <Title text="Context" />
+      <text
+        fg={theme.text.muted}
+        wrapMode="none"
+      >{`${money(spent() || (summary()?.spentUsd ?? 0))} spent`}</text>
+      <text
+        fg={theme.text.muted}
+        wrapMode="none"
+      >{`${done()} of ${nodes().length} nodes done`}</text>
+      <Show when={elapsed()}>
+        <text fg={theme.text.muted} wrapMode="none">
+          {elapsed() ?? ''}
+        </text>
+      </Show>
+      <Title text="Nodes" />
+      <For each={nodes()}>
+        {(n) => (
+          <box height={1} flexShrink={0}>
+            <text
+              fg={
+                n.status === 'running'
+                  ? theme.text.action.primary.selected
+                  : n.status === 'failed' || n.status === 'gate_failed'
+                    ? theme.text.feedback.error
+                    : n.status === 'pending'
+                      ? theme.text.muted
+                      : theme.text.base
+              }
+              wrapMode="none"
+            >
+              {`[${NODE_MARK[n.status] ?? ' '}] ${n.id}`}
+            </text>
+          </box>
+        )}
+      </For>
+      <Show when={files().length > 0}>
+        <Title text="Files" />
+        <For each={files()}>
+          {(f) => (
+            <box height={1} flexShrink={0}>
+              <text fg={theme.text.base} wrapMode="none">
+                {marqueeText(`± ${f}`, inner(), 0)}
+              </text>
+            </box>
+          )}
+        </For>
+      </Show>
+      <Show when={items().length > 0}>
+        <Title text={`Needs you (${items().length})`} />
+        <For each={items()}>
+          {(i) => (
+            <box
+              height={1}
+              flexShrink={0}
+              backgroundColor={
+                props.focused && selectedItem()?.id === i.id
+                  ? theme.background.action.primary.selected
+                  : undefined
+              }
+            >
+              <text fg={theme.text.feedback.warning} wrapMode="none">
+                {marqueeText(`▲ ${i.prompt}`, inner(), 0)}
+              </text>
+            </box>
+          )}
+        </For>
+      </Show>
+      <box flexGrow={1} />
+      <Show when={props.focused}>
+        <box height={1} flexShrink={0}>
+          <text fg={theme.text.muted} wrapMode="none">
+            {items().length > 0 ? 'j/k select · a/d answer · tab back' : 'tab back'}
+          </text>
+        </box>
+      </Show>
+      <box height={1} flexShrink={0}>
+        <text fg={theme.text.muted} wrapMode="none">
+          {marqueeText(tilde(state()?.project ?? state()?.workspace ?? config.cwd), inner(), 0)}
+        </text>
+      </box>
+      <box height={1} flexShrink={0} marginBottom={1}>
+        <text fg={theme.text.muted} wrapMode="none">
+          <span style={{ fg: theme.text.feedback.success }}>● </span>
+          {`shibaox ${config.version} · ${shortId(props.runId)}`}
+        </text>
+      </box>
+    </box>
+  );
+}