@wizardingcode/shibaox-tui 0.1.3 → 0.1.4

package/src/routes/session/timeline.tsx

@@ -1,313 +0,0 @@
-import type { Renderable, ScrollBoxRenderable } from '@opentui/core';
-import { useTerminalDimensions } from '@opentui/solid';
-import {
-  type Accessor,
-  createEffect,
-  createMemo,
-  createSignal,
-  For,
-  getOwner,
-  type JSX,
-  Match,
-  on,
-  onCleanup,
-  runWithOwner,
-  Switch,
-} from 'solid-js';
-import { useData } from '../../context/data.js';
-import { useKeys } from '../../context/keys.js';
-import { type Card, isChatRun } from '../../model/stream.js';
-import { useTheme } from '../../theme/context.js';
-import {
-  DecideCard,
-  EarlierCard,
-  ErrorCard,
-  GateCard,
-  HumanCard,
-  NodeCard,
-  SummaryCard,
-} from './cards.js';
-import { RequestBlock } from './request.js';
-
-/** How many cards the screen mounts per run (the model keeps up to 5000). */
-export const RENDER_LIMIT = 300;
-
-/** Ids of the rows the cursor can land on: card headers and tool lines, in reading order. */
-export function selectableRows(cards: Card[]): string[] {
-  const rows: string[] = [];
-  for (const c of cards) {
-    if (c.kind === 'error' || c.kind === 'earlier') continue;
-    if (c.kind === 'summary') {
-      rows.push('card:summary');
-      continue;
-    }
-    rows.push(`card:${c.nodeId}`);
-    if (c.kind === 'node')
-      for (const b of c.blocks) if (b.kind === 'tool') rows.push(`tool:${c.nodeId}:${b.id}`);
-  }
-  return rows;
-}
-
-export interface TimelineApi {
-  scrollBy(lines: number): void;
-}
-
-/**
- * The conversation of a tab: every run of its thread (request block, then cards), in a
- * scrollbox that follows the newest content until the user scrolls up, with a cursor over card
- * headers and tool lines (enter expands or collapses).
- */
-export function Timeline(props: {
-  runId: string;
-  focused: boolean;
-  onToggle?: (id: string) => void;
-  api?: (api: TimelineApi) => void;
-}): JSX.Element {
-  const data = useData();
-  const theme = useTheme();
-  const dimensions = useTerminalDimensions();
-  const runs = createMemo(() => data.threadOf(props.runId));
-  const owner = getOwner();
-  const memos = new Map<string, Accessor<Card[]>>();
-  // per-run memos live under the timeline itself, never under whichever computation asks first
-  const cardsOf = (run: string): Accessor<Card[]> => {
-    let m = memos.get(run);
-    if (!m) {
-      const all = data.timeline(run);
-      // only the newest cards are mounted: every card costs native renderables (spinner,
-      // fade-in, markdown); older ones fold into the "earlier" line
-      const limited = () => {
-        const list = all();
-        if (list.length <= RENDER_LIMIT) return list;
-        const dropped = list.slice(0, list.length - RENDER_LIMIT);
-        const earlier = dropped.reduce((n, c) => n + (c.kind === 'earlier' ? c.count : 1), 0);
-        return [
-          { kind: 'earlier', key: 'earlier', count: earlier } as Card,
-          ...list.slice(-RENDER_LIMIT),
-        ];
-      };
-      m = runWithOwner(owner, () => createMemo(limited)) ?? limited;
-      memos.set(run, m);
-    }
-    return m;
-  };
-  const rows = createMemo(() =>
-    runs().flatMap((run) => selectableRows(cardsOf(run)()).map((id) => `${run}|${id}`)),
-  );
-  const version = createMemo(() => runs().reduce((n, run) => n + cardsOf(run)().length, 0));
-  const [cursor, setCursor] = createSignal(0);
-  const [expanded, setExpanded] = createSignal(new Set<string>(), { equals: false });
-  const [now, setNow] = createSignal(Date.now());
-  // true until the user scrolls up: the view then follows the newest content
-  const [following, setFollowing] = createSignal(true);
-  const refs = new Map<string, Renderable>();
-  let scroll: ScrollBoxRenderable | undefined;
-  const tick = setInterval(() => setNow(Date.now()), 1000);
-  onCleanup(() => clearInterval(tick));
-
-  // OpenTUI's stickyScroll re-sticks after a programmatic scrollTo(0), so following is ours alone
-  const follow = () => {
-    if (!following() || !scroll) return;
-    scroll.scrollTo(scroll.scrollHeight);
-  };
-  createEffect(
-    on([version, dimensions], () => {
-      setTimeout(follow, 0);
-      setTimeout(follow, 120);
-    }),
-  );
-  props.api?.({ scrollBy: (n) => scroll?.scrollBy(n) });
-
-  const selectedRow = () => rows()[Math.min(cursor(), rows().length - 1)];
-  /** The selected row id inside `run`, or undefined when the cursor is in another run. */
-  const selectedIn = (run: string) => {
-    const s = selectedRow();
-    return props.focused && s?.startsWith(`${run}|`) ? s.slice(run.length + 1) : undefined;
-  };
-
-  const ensureVisible = () => {
-    const id = selectedRow();
-    const el = id ? refs.get(id) : undefined;
-    if (!el || !scroll) return;
-    const top = el.y - scroll.viewport.y + scroll.scrollTop;
-    if (top < scroll.scrollTop) scroll.scrollTo(top);
-    else if (top + el.height > scroll.scrollTop + scroll.viewport.height)
-      scroll.scrollTo(top + el.height - scroll.viewport.height);
-  };
-  // only after a one-row move: right after scrollTo(0)/scrollTo(end) the row positions are stale
-  const move = (delta: number) => {
-    setCursor((c) => c + delta);
-    setTimeout(ensureVisible, 0);
-  };
-
-  const toggle = () => {
-    const id = selectedRow();
-    if (!id) return;
-    setExpanded((s) => {
-      if (s.has(id)) s.delete(id);
-      else s.add(id);
-      return s;
-    });
-    props.onToggle?.(id);
-  };
-  /** The expanded set as the cards see it: ids of this run only. */
-  const expandedIn = (run: string) =>
-    new Set(
-      [...expanded()]
-        .filter((id) => id.startsWith(`${run}|`))
-        .map((id) => id.slice(run.length + 1)),
-    );
-
-  useKeys('pane', (key) => {
-    if (!props.focused || key.ctrl || key.meta) return false;
-    const n = rows().length;
-    switch (key.name) {
-      // j/k walk the cursor; the arrows (and a wheel the terminal turns into arrows) scroll the view
-      case 'j':
-        if (cursor() < n - 1) move(1);
-        else scroll?.scrollBy(1);
-        return true;
-      case 'k':
-        setFollowing(false);
-        if (cursor() > 0) move(-1);
-        else scroll?.scrollBy(-1);
-        return true;
-      case 'down':
-        scroll?.scrollBy(2);
-        return true;
-      case 'up':
-        setFollowing(false);
-        scroll?.scrollBy(-2);
-        return true;
-      case 'pagedown':
-        scroll?.scrollBy(scroll.viewport.height);
-        return true;
-      case 'pageup':
-        setFollowing(false);
-        scroll?.scrollBy(-scroll.viewport.height);
-        return true;
-      case 'g':
-        if (key.shift) {
-          setFollowing(true);
-          setCursor(Math.max(0, n - 1));
-          follow();
-        } else {
-          setFollowing(false);
-          setCursor(0);
-          scroll?.scrollTo(0);
-        }
-        return true;
-      case 'return':
-        toggle();
-        return true;
-      default:
-        return false;
-    }
-  });
-
-  const rowRefFor = (run: string) => (id: string, el: unknown) => {
-    const key = `${run}|${id}`;
-    if (el) refs.set(key, el as Renderable);
-    else refs.delete(key);
-  };
-
-  return (
-    <scrollbox
-      ref={(r: ScrollBoxRenderable) => {
-        scroll = r;
-      }}
-      flexGrow={1}
-      width="100%"
-      verticalScrollbarOptions={{
-        visible: true,
-        trackOptions: {
-          backgroundColor: theme.background.base,
-          foregroundColor: theme.scrollbar.base,
-        },
-      }}
-      horizontalScrollbarOptions={{ visible: false }}
-      contentOptions={{ flexDirection: 'column', paddingTop: 1, paddingLeft: 2, paddingRight: 2 }}
-    >
-      <For each={runs()}>
-        {(run) => {
-          const cards = cardsOf(run);
-          const rowRef = rowRefFor(run);
-          const selected = createMemo(() => selectedIn(run));
-          const expandedHere = createMemo(() => expandedIn(run));
-          const nodes = createMemo(
-            () =>
-              cards().filter(
-                (c) => c.kind !== 'error' && c.kind !== 'earlier' && c.kind !== 'summary',
-              ).length,
-          );
-          return (
-            <>
-              <RequestBlock runId={run} />
-              <For each={cards()}>
-                {(card) => (
-                  <Switch>
-                    <Match when={card.kind === 'node' && card}>
-                      {(c) => (
-                        <NodeCard
-                          card={c()}
-                          now={now()}
-                          selectedRow={selected()}
-                          expanded={expandedHere()}
-                          rowRef={rowRef}
-                          chat={isChatRun(data.state.states[run])}
-                        />
-                      )}
-                    </Match>
-                    <Match when={card.kind === 'gate' && card}>
-                      {(c) => (
-                        <GateCard
-                          card={c()}
-                          selected={selected() === `card:${c().nodeId}`}
-                          rowRef={rowRef}
-                        />
-                      )}
-                    </Match>
-                    <Match when={card.kind === 'decide' && card}>
-                      {(c) => (
-                        <DecideCard
-                          card={c()}
-                          selected={selected() === `card:${c().nodeId}`}
-                          rowRef={rowRef}
-                        />
-                      )}
-                    </Match>
-                    <Match when={card.kind === 'human' && card}>
-                      {(c) => (
-                        <HumanCard
-                          card={c()}
-                          selected={selected() === `card:${c().nodeId}`}
-                          rowRef={rowRef}
-                        />
-                      )}
-                    </Match>
-                    <Match when={card.kind === 'error' && card}>
-                      {(c) => <ErrorCard card={c()} />}
-                    </Match>
-                    <Match when={card.kind === 'earlier' && card}>
-                      {(c) => <EarlierCard card={c()} />}
-                    </Match>
-                    <Match when={card.kind === 'summary' && card}>
-                      {(c) => (
-                        <SummaryCard
-                          card={c()}
-                          nodes={nodes()}
-                          selected={selected() === 'card:summary'}
-                          rowRef={rowRef}
-                        />
-                      )}
-                    </Match>
-                  </Switch>
-                )}
-              </For>
-            </>
-          );
-        }}
-      </For>
-    </scrollbox>
-  );
-}

package/src/testing/fake-client.ts

@@ -1,249 +0,0 @@
-import type { ProjectProfile, RunState } from '@wizardingcode/shibaox-core';
-import type {
-  DiffResult,
-  Envelope,
-  Health,
-  InboxItem,
-  KeyRow,
-  ModelChoice,
-  OrgConfig,
-  OrgConfigPatch,
-  RunSummaryPlus,
-  SubmitRequest,
-} from '@wizardingcode/shibaox-daemon';
-import { DaemonHttpError } from '@wizardingcode/shibaox-daemon/client';
-import type { DaemonClientLike } from '../context/client.js';
-
-interface Stream {
-  queue: Envelope[];
-  wake?: () => void;
-  closed: boolean;
-}
-
-/** An in-memory daemon: lists, states and SSE frames the tests push in; every call is recorded. */
-export class FakeDaemonClient implements DaemonClientLike {
-  runs: RunSummaryPlus[] = [];
-  states = new Map<string, RunState>();
-  inboxItems: InboxItem[] = [];
-  healthValue: Health = {
-    version: '0.0.1',
-    uptimeSeconds: 1,
-    runs: { running: 0, queued: 0, waiting: 0 },
-    channels: [],
-  };
-  calls: { method: string; args: unknown[] }[] = [];
-  /** When true every call rejects with `Error('down')` (the daemon is unreachable). */
-  failing = false;
-  /** When set, `answer()` throws this as a DaemonHttpError. */
-  answerError?: { status: number; code: string; message: string };
-  submitResult: { runId: string; warnings: string[] } = { runId: 'new-run', warnings: [] };
-  /** Frames every new `events()` of that run starts with (the daemon's history replay). */
-  history = new Map<string, Envelope[]>();
-  /** Diff results by run id; a missing entry is a 404 `no_workspace`. */
-  diffs = new Map<string, DiffResult>();
-  /** Project profiles by path; a missing entry is a 404 `not_found`. */
-  profiles = new Map<string, ProjectProfile>();
-  /** What `/model` offers. */
-  modelChoices: ModelChoice[] = [];
-  /** What `/tiers` shows, by org root. */
-  orgConfigs = new Map<string, OrgConfig>();
-  /** What `/keys` shows. */
-  keyRows: KeyRow[] = [];
-  /** What `GET /orgs/default` answers. */
-  defaultOrgRoot = '/o';
-  /** How many times `defaultOrg()` still fails before answering (a daemon that is settling). */
-  defaultOrgFailures = 0;
-  private readonly streams = new Map<string, Stream>();
-
-  private record(method: string, args: unknown[]): void {
-    this.calls.push({ method, args });
-    if (this.failing) throw new Error('down');
-  }
-
-  async health(): Promise<Health> {
-    this.record('health', []);
-    return this.healthValue;
-  }
-
-  async listRuns(q?: { status?: string; org?: string }): Promise<RunSummaryPlus[]> {
-    this.record('listRuns', [q]);
-    return this.runs;
-  }
-
-  async getRun(id: string): Promise<RunState> {
-    this.record('getRun', [id]);
-    const s = this.states.get(id);
-    if (!s) throw new DaemonHttpError(404, 'not_found', `run ${id} not found`);
-    return s;
-  }
-
-  async inbox(): Promise<InboxItem[]> {
-    this.record('inbox', []);
-    return this.inboxItems;
-  }
-
-  async answer(
-    id: string,
-    a: { approved: boolean; note?: string; via?: 'cli' | 'api' },
-  ): Promise<{ runId: string; kind: 'human' | 'approval' }> {
-    this.record('answer', [id, a]);
-    if (this.answerError)
-      throw new DaemonHttpError(
-        this.answerError.status,
-        this.answerError.code,
-        this.answerError.message,
-      );
-    const item = this.inboxItems.find((i) => i.id === id);
-    return { runId: item?.runId ?? 'r', kind: item?.kind ?? 'human' };
-  }
-
-  async cancel(id: string): Promise<RunState> {
-    this.record('cancel', [id]);
-    const s = this.states.get(id);
-    if (!s) throw new DaemonHttpError(404, 'not_found', `run ${id} not found`);
-    return { ...s, status: 'cancelled' };
-  }
-
-  async resume(id: string, o?: { budgetUsd?: number }): Promise<RunState> {
-    this.record('resume', [id, o]);
-    const s = this.states.get(id);
-    if (!s) throw new DaemonHttpError(404, 'not_found', `run ${id} not found`);
-    return s;
-  }
-
-  async submitRun(req: SubmitRequest): Promise<{ runId: string; warnings: string[] }> {
-    this.record('submitRun', [req]);
-    return this.submitResult;
-  }
-
-  async diff(id: string): Promise<DiffResult> {
-    this.record('diff', [id]);
-    const d = this.diffs.get(id);
-    if (!d) throw new DaemonHttpError(404, 'no_workspace', 'The run workspace is gone');
-    return d;
-  }
-
-  async defaultOrg(): Promise<{ root: string; created: boolean }> {
-    this.record('defaultOrg', []);
-    if (this.defaultOrgFailures > 0) {
-      this.defaultOrgFailures--;
-      throw new Error('daemon still starting');
-    }
-    return { root: this.defaultOrgRoot, created: false };
-  }
-
-  async keys(): Promise<KeyRow[]> {
-    this.record('keys', []);
-    return this.keyRows;
-  }
-
-  async setKey(name: string, value: string): Promise<{ name: string; set: true }> {
-    this.record('setKey', [name, value]);
-    return { name, set: true };
-  }
-
-  async unsetKey(name: string): Promise<{ name: string; removed: boolean }> {
-    this.record('unsetKey', [name]);
-    return { name, removed: true };
-  }
-
-  async orgConfig(root: string): Promise<OrgConfig> {
-    this.record('orgConfig', [root]);
-    const c = this.orgConfigs.get(root);
-    if (!c) throw new DaemonHttpError(404, 'bad_request', `org.yaml: file not found (${root})`);
-    return c;
-  }
-
-  async setOrgConfig(root: string, patch: OrgConfigPatch): Promise<OrgConfig> {
-    this.record('setOrgConfig', [root, patch]);
-    const c = await this.orgConfig(root);
-    const tiers = { ...c.tiers };
-    for (const [k, v] of Object.entries(patch.tiers ?? {}))
-      if (v === null) delete tiers[k as keyof typeof tiers];
-      else if (v !== undefined) tiers[k as keyof typeof tiers] = v;
-    const next: OrgConfig = {
-      ...c,
-      tiers,
-      judge: patch.judge === null ? undefined : (patch.judge ?? c.judge),
-      adapter: patch.adapter === null ? undefined : (patch.adapter ?? c.adapter),
-      per_run_usd: patch.per_run_usd === null ? undefined : (patch.per_run_usd ?? c.per_run_usd),
-    };
-    this.orgConfigs.set(root, next);
-    return next;
-  }
-
-  async models(): Promise<ModelChoice[]> {
-    this.record('models', []);
-    return this.modelChoices;
-  }
-
-  async projectProfile(path: string, orgRoot?: string): Promise<ProjectProfile> {
-    this.record('projectProfile', [path, orgRoot]);
-    const p = this.profiles.get(path);
-    if (!p) throw new DaemonHttpError(404, 'not_found', `project path not found: ${path}`);
-    return p;
-  }
-
-  events(
-    id: string,
-    o: { since?: string; signal?: AbortSignal; historyOnly?: boolean } = {},
-  ): AsyncIterable<Envelope> {
-    this.calls.push({ method: 'events', args: [id, o] });
-    const failing = this.failing;
-    const stream: Stream = { queue: [...(this.history.get(id) ?? [])], closed: false };
-    this.streams.set(id, stream);
-    const close = () => {
-      stream.closed = true;
-      if (this.streams.get(id) === stream) this.streams.delete(id);
-      stream.wake?.();
-    };
-    o.signal?.addEventListener('abort', close, { once: true });
-    async function* gen(): AsyncGenerator<Envelope> {
-      if (failing) {
-        close();
-        throw new Error('down');
-      }
-      try {
-        while (true) {
-          while (stream.queue.length > 0) {
-            const env = stream.queue.shift() as Envelope;
-            yield env;
-            if (env.kind === 'end') return;
-            // one frame per macrotask, like frames arriving on a socket
-            await new Promise((r) => setImmediate(r));
-          }
-          if (stream.closed) return;
-          await new Promise<void>((r) => {
-            stream.wake = r;
-          });
-          stream.wake = undefined;
-        }
-      } finally {
-        close();
-      }
-    }
-    return gen();
-  }
-
-  /** Delivers a frame to the live `events()` iterator of `runId` (dropped when there is none). */
-  pushFrame(runId: string, env: Envelope): void {
-    const s = this.streams.get(runId);
-    if (!s || s.closed) return;
-    s.queue.push(env);
-    s.wake?.();
-  }
-
-  /** Ends the live `events()` iterator of `runId` without an `end` frame (a dropped connection). */
-  closeStream(runId: string): void {
-    const s = this.streams.get(runId);
-    if (!s) return;
-    s.closed = true;
-    this.streams.delete(runId);
-    s.wake?.();
-  }
-
-  /** Run ids with a live `events()` iterator. */
-  openStreams(): string[] {
-    return [...this.streams.entries()].filter(([, s]) => !s.closed).map(([id]) => id);
-  }
-}

package/src/theme/context.tsx

@@ -1,44 +0,0 @@
-import { SyntaxStyle } from '@opentui/core';
-import {
-  createContext,
-  createMemo,
-  type JSX,
-  onCleanup,
-  type ParentProps,
-  useContext,
-} from 'solid-js';
-import { type ResolvedTheme, resolveTheme, syntaxStyles } from './resolve.js';
-import shibaox from './shibaox.json' with { type: 'json' };
-
-let cached: ResolvedTheme | undefined;
-/** The built-in shibaox theme, resolved once. */
-export function defaultTheme(): ResolvedTheme {
-  cached ??= resolveTheme(shibaox);
-  return cached;
-}
-
-const Context = createContext<{ theme: ResolvedTheme; syntax: () => SyntaxStyle }>();
-
-export function ThemeProvider(props: ParentProps<{ theme?: ResolvedTheme }>): JSX.Element {
-  const theme = props.theme ?? defaultTheme();
-  const syntax = createMemo(() => SyntaxStyle.fromStyles(syntaxStyles(theme)));
-  // a native handle: released a little after the provider goes, once no renderable draws with it
-  onCleanup(() => {
-    const style = syntax();
-    setTimeout(() => style.destroy(), 500);
-  });
-  return <Context.Provider value={{ theme, syntax }}>{props.children}</Context.Provider>;
-}
-
-export function useTheme(): ResolvedTheme {
-  const c = useContext(Context);
-  if (!c) throw new Error('useTheme outside ThemeProvider');
-  return c.theme;
-}
-
-/** The syntax style for `<markdown>`, `<code>` and `<diff>`, memoized per theme. */
-export function useSyntax(): SyntaxStyle {
-  const c = useContext(Context);
-  if (!c) throw new Error('useSyntax outside ThemeProvider');
-  return c.syntax();
-}