@wizardingcode/shibaox-tui 0.1.3 → 0.1.4

package/src/component/footer.tsx

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

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

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

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

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

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