@wizardingcode/shibaox-tui 0.1.0

package/src/routes/session/continue.tsx

@@ -0,0 +1,104 @@
+import { createEffect, createMemo, createResource, type JSX, on } from 'solid-js';
+import { Prompt, type PromptRef } from '../../component/prompt/index.js';
+import { useClient } from '../../context/client.js';
+import { useCommands } from '../../context/commands.js';
+import { useData } from '../../context/data.js';
+import { useKeys } from '../../context/keys.js';
+import {
+  DEFAULT_MODEL,
+  isModelRef,
+  modelCommand,
+  type PromptCommandSpec,
+} from '../../model/prompt-commands.js';
+import { useDialog } from '../../ui/dialog.js';
+import { useToast } from '../../ui/toast.js';
+
+const PLACEHOLDERS = ['Continue… "Now add tests for it"', 'Continue… "/diff shows the changes"'];
+
+/**
+ * The prompt at the bottom of a finished run: the next request runs in the same tab. `/`
+ * offers the commands of this screen (the same ones as the palette): `/diff`, `/cancel`,
+ * `/help`, `/home`…
+ */
+export function ContinuePrompt(props: {
+  /** The tab's root run: `/model` applies to its next turns. */
+  runId: string;
+  onSubmit(text: string): void;
+  onScroll?(lines: number): void;
+  footer?: JSX.Element;
+}): JSX.Element {
+  const registry = useCommands();
+  const dialog = useDialog();
+  const client = useClient();
+  const data = useData();
+  const toast = useToast();
+  const [models] = createResource(() => client.models().catch(() => []));
+  let prompt: PromptRef | undefined;
+  // a dialog opened from here (diff, help, runs) takes the keys; the prompt gets them back after
+  createEffect(
+    on(
+      dialog.depth,
+      (d) => {
+        if (d === 0) setTimeout(() => prompt?.focus(), 0);
+      },
+      { defer: true },
+    ),
+  );
+  // the screen's own commands first, then the shell's
+  const ORDER = ['diff', 'cancel', 'resume', 'sidebar', 'home', 'runs', 'help', 'close', 'quit'];
+  const rank = (id: string) => {
+    const i = ORDER.indexOf(id);
+    return i < 0 ? ORDER.length : i;
+  };
+  const commands = createMemo<PromptCommandSpec[]>(() => [
+    modelCommand(() => models() ?? []),
+    ...registry
+      .commands()
+      .filter((c) => c.when?.() ?? true)
+      .sort((a, b) => rank(a.id) - rank(b.id))
+      .map((c) => ({ name: c.id, kind: 'action' as const, hint: c.label })),
+  ]);
+  // registered before the prompt mounts: its handler runs after the prompt's, so the arrows
+  // scroll the conversation only while no suggestion list is showing
+  useKeys('prompt', (key) => {
+    const scroll: Record<string, number> = { up: -2, down: 2, pageup: -20, pagedown: 20 };
+    const lines = scroll[key.name];
+    if (lines === undefined) return false;
+    props.onScroll?.(lines);
+    return true;
+  });
+  return (
+    <Prompt
+      ref={(r) => {
+        prompt = r;
+      }}
+      bare
+      disabled={dialog.depth() > 0}
+      placeholders={PLACEHOLDERS}
+      commands={commands()}
+      onSubmit={props.onSubmit}
+      onCommand={(cmd) => {
+        if (cmd.command === 'model') {
+          if (cmd.arg === DEFAULT_MODEL) {
+            data.setModel(props.runId, undefined);
+            toast.show({ message: 'Next turns follow the org routing', variant: 'info' });
+          } else if (!isModelRef(cmd.arg)) {
+            toast.show({
+              message: 'Model must look like provider/model (see /model for the list)',
+              variant: 'error',
+            });
+          } else {
+            data.setModel(props.runId, cmd.arg);
+            toast.show({ message: `Next turns run on ${cmd.arg}`, variant: 'info' });
+          }
+          return;
+        }
+        registry
+          .commands()
+          .find((c) => c.id === cmd.command)
+          ?.run();
+      }}
+      footer={props.footer}
+    />
+  );
+}

package/src/routes/session/index.tsx

@@ -0,0 +1,340 @@
+import { type MouseEvent, TextAttributes } from '@opentui/core';
+import { useTerminalDimensions } from '@opentui/solid';
+import { createEffect, createMemo, createSignal, type JSX, onCleanup, Show } from 'solid-js';
+import { Confirm } from '../../component/dialogs/confirm.js';
+import { DiffDialog } from '../../component/dialogs/diff.js';
+import { type KeyHint, KeyHints } from '../../component/footer.js';
+import { Sidebar } from '../../component/sidebar.js';
+import { useCommands } from '../../context/commands.js';
+import { useData } from '../../context/data.js';
+import { useKeys } from '../../context/keys.js';
+import { usePrefs } from '../../context/prefs.js';
+import { duration, shortId } from '../../model/format.js';
+import { statusOf } from '../../model/status.js';
+import { createAnimatable, spring } from '../../motion/animation.js';
+import { useMotion } from '../../motion/config.js';
+import { ShimmerText } from '../../motion/shimmer-text.js';
+import { useTheme } from '../../theme/context.js';
+import { useDialog } from '../../ui/dialog.js';
+import { clampSidebarWidth, SIDEBAR_WIDTH, sidebarAuto } from '../../ui/layout.js';
+import { createPaneResize } from '../../ui/pane-resize.js';
+import { useToast } from '../../ui/toast.js';
+import { ApprovalBar, pendingFor } from './approval-bar.js';
+import { ContextLine } from './context-line.js';
+import { ContinuePrompt } from './continue.js';
+import { Timeline, type TimelineApi } from './timeline.js';
+
+export const SESSION_HINTS: KeyHint[] = [
+  { key: 'enter', label: 'expand' },
+  { key: 'd', label: 'diff' },
+  { key: 'tab', label: 'sidebar' },
+  { key: 'ctrl+n', label: 'home' },
+  { key: '?', label: 'help' },
+];
+export const STREAM_HINTS: KeyHint[] = [
+  { key: 'enter', label: 'expand' },
+  { key: 'd', label: 'diff' },
+  { key: 'q', label: 'quit' },
+];
+
+const DOTS = ['·', '·', '·', '·', '·', '·'];
+const DOT_MS = 120;
+
+/** The dotted progress of a working run (the reference's `······` under the prompt). */
+function Dots(props: { active: boolean }): JSX.Element {
+  const theme = useTheme();
+  const motion = useMotion();
+  const [head, setHead] = createSignal(0);
+  createEffect(() => {
+    if (!props.active || !motion()) return;
+    const t = setInterval(() => setHead((h) => (h + 1) % (DOTS.length + 2)), DOT_MS);
+    onCleanup(() => clearInterval(t));
+  });
+  const glyphs = () =>
+    DOTS.map((_, i) => (props.active && motion() && Math.abs(i - head()) <= 1 ? '▪' : '·')).join(
+      '',
+    );
+  return (
+    <text fg={props.active ? theme.text.action.primary.selected : theme.text.muted} wrapMode="none">
+      {glyphs()}
+    </text>
+  );
+}
+
+/** One run as a conversation: request, cards, the status box (or the approval bar), and the sidebar. */
+export function SessionFrame(props: { runId: string; single?: boolean }): JSX.Element {
+  const data = useData();
+  const theme = useTheme();
+  const dialog = useDialog();
+  const toast = useToast();
+  const prefs = usePrefs();
+  const motion = useMotion();
+  const dimensions = useTerminalDimensions();
+  const [now, setNow] = createSignal(Date.now());
+  const tick = setInterval(() => setNow(Date.now()), 1000);
+  onCleanup(() => clearInterval(tick));
+
+  // the tab is a thread: the status, the pending items and the prompt belong to its latest run
+  const latest = () => {
+    const runs = data.threadOf(props.runId);
+    return runs[runs.length - 1] ?? props.runId;
+  };
+  const summary = () => data.state.runs.find((r) => r.runId === latest());
+  const state = () => data.state.states[latest()];
+  const status = () =>
+    data.state.ended[latest()] ?? state()?.status ?? summary()?.status ?? 'queued';
+  const look = () => statusOf({ status: status() });
+  const working = () => status() === 'running';
+  const elapsed = () => {
+    const created = summary()?.createdAt;
+    const updated = summary()?.updatedAt;
+    if (!created) return undefined;
+    const from = Date.parse(created);
+    const terminal = status() === 'completed' || status() === 'failed' || status() === 'cancelled';
+    const to = terminal && updated ? Date.parse(updated) : now();
+    return Number.isFinite(from) && Number.isFinite(to)
+      ? duration(Math.max(0, to - from))
+      : undefined;
+  };
+  const activeNode = () => {
+    const nodes = state()?.nodes ?? {};
+    return Object.entries(nodes).find(
+      ([, n]) => n.status === 'running' || n.status === 'waiting',
+    )?.[0];
+  };
+  const color = () => {
+    const f = look().feedback;
+    return f === 'muted' ? theme.text.muted : theme.text.feedback[f];
+  };
+  const pending = createMemo(() => pendingFor(data.state.inbox, latest()));
+  const finished = () => ['completed', 'failed', 'cancelled'].includes(status());
+  let timeline: TimelineApi | undefined;
+
+  // sidebar: automatic on wide terminals, toggled with ctrl+b, resizable with the mouse
+  const area = () => dimensions().width;
+  const [openedByKey, setOpenedByKey] = createSignal<boolean | undefined>(undefined);
+  const sidebarVisible = createMemo(() => {
+    if (props.single) return false;
+    if (openedByKey() !== undefined) return openedByKey() as boolean;
+    return prefs.data.sidebar !== 'hide' && sidebarAuto(dimensions().width, 0);
+  });
+  const resize = createPaneResize({
+    value: () => prefs.data.sidebarWidth ?? SIDEBAR_WIDTH,
+    defaultValue: () => SIDEBAR_WIDTH,
+    clamp: (w) => clampSidebarWidth(w, area()),
+    fromMouse: (e: MouseEvent) => dimensions().width - e.x - 1,
+    contains: (e: MouseEvent, w) =>
+      e.x >= dimensions().width - w - 1 && e.x <= dimensions().width - w,
+    onCommit: (w) => prefs.update({ sidebarWidth: w }),
+  });
+  const anim = createAnimatable(
+    { w: sidebarVisible() ? resize.size() : 0 },
+    { transition: spring({ visualDuration: 0.25 }), enabled: motion },
+  );
+  createEffect(() => anim.animate({ w: sidebarVisible() ? resize.size() : 0 }));
+  const sidebarWidth = () => Math.round(anim.value().w);
+  const [focus, setFocus] = createSignal<'conversation' | 'sidebar'>('conversation');
+  createEffect(() => {
+    if (!sidebarVisible()) setFocus('conversation');
+  });
+
+  const toggleSidebar = () => {
+    const next = !sidebarVisible();
+    setOpenedByKey(next);
+    prefs.update({ sidebar: next ? 'auto' : 'hide' });
+  };
+  const cancel = () =>
+    dialog.open(() => (
+      <Confirm
+        message={`Cancel run ${shortId(latest())}?`}
+        onYes={() => {
+          dialog.close();
+          void data.actions.cancel(latest());
+        }}
+        onNo={() => dialog.close()}
+      />
+    ));
+  const resume = () => {
+    if (status() === 'paused_budget') void data.actions.resume(latest());
+    else toast.show({ message: 'Nothing to resume', variant: 'info' });
+  };
+  const diff = () => dialog.open(() => <DiffDialog runId={latest()} />);
+  const unregister = useCommands().register([
+    { id: 'diff', label: 'Diff of the run', keys: 'd', run: diff },
+    {
+      id: 'sidebar',
+      label: 'Toggle sidebar',
+      keys: 'ctrl+b',
+      run: toggleSidebar,
+      when: () => !props.single,
+    },
+    { id: 'cancel', label: 'Cancel run', keys: 'c', run: cancel, when: () => !finished() },
+    {
+      id: 'resume',
+      label: 'Resume run',
+      keys: 'r',
+      run: resume,
+      when: () => status() === 'paused_budget',
+    },
+  ]);
+  onCleanup(unregister);
+  useKeys('global', (key) => {
+    if (props.single || !(key.ctrl && key.name === 'b')) return false;
+    toggleSidebar();
+    return true;
+  });
+  useKeys('pane', (key) => {
+    if (key.ctrl || key.meta) return false;
+    if (key.name === 'tab' && sidebarVisible()) {
+      setFocus((f) => (f === 'sidebar' ? 'conversation' : 'sidebar'));
+      return true;
+    }
+    if (focus() !== 'conversation') return false;
+    if (key.name === 'c') {
+      cancel();
+      return true;
+    }
+    if (key.name === 'r') {
+      resume();
+      return true;
+    }
+    if (key.name === 'd' && pending().length === 0) {
+      diff();
+      return true;
+    }
+    return false;
+  });
+  const hints = () => {
+    const base = props.single ? STREAM_HINTS : SESSION_HINTS;
+    if (status() === 'paused_budget') return [{ key: 'r', label: 'resume' }, ...base];
+    return base;
+  };
+
+  return (
+    <box
+      flexDirection="row"
+      width="100%"
+      height="100%"
+      onMouseDrag={resize.onMouseDrag}
+      onMouseDragEnd={resize.onMouseDragEnd}
+      onMouseUp={resize.onMouseUp}
+    >
+      <box flexDirection="column" flexGrow={1} height="100%">
+        <Timeline
+          runId={props.runId}
+          focused={focus() === 'conversation'}
+          api={(a) => {
+            timeline = a;
+          }}
+        />
+        <box flexDirection="row" width="100%" flexShrink={0} paddingLeft={2} paddingRight={2}>
+          <box
+            width={1}
+            flexShrink={0}
+            backgroundColor={
+              pending().length > 0
+                ? theme.text.feedback.warning
+                : theme.text.action.primary.selected
+            }
+          />
+          <box
+            flexGrow={1}
+            flexDirection="column"
+            paddingLeft={2}
+            paddingRight={2}
+            paddingTop={1}
+            paddingBottom={1}
+            backgroundColor={theme.background.raised.base}
+          >
+            <Show
+              when={pending().length > 0}
+              fallback={
+                <Show
+                  when={!finished() || props.single}
+                  fallback={
+                    <ContinuePrompt
+                      runId={props.runId}
+                      onSubmit={(t) => void data.continueRun(props.runId, t)}
+                      onScroll={(n) => timeline?.scrollBy(n)}
+                      footer={<ContextLine runId={props.runId} elapsed={elapsed()} />}
+                    />
+                  }
+                >
+                  <box height={1} flexShrink={0} flexDirection="row">
+                    <Show
+                      when={working()}
+                      fallback={
+                        <text
+                          fg={color()}
+                          attributes={TextAttributes.BOLD}
+                          wrapMode="none"
+                        >{`${look().symbol} ${look().word}`}</text>
+                      }
+                    >
+                      <ShimmerText
+                        fg={color()}
+                        shimmer={theme.text.base}
+                        attributes={TextAttributes.BOLD}
+                        wrapMode="none"
+                      >
+                        {`${look().symbol} ${look().word}`}
+                      </ShimmerText>
+                    </Show>
+                    <text fg={theme.text.muted} wrapMode="none">
+                      {activeNode() ? ` · ${activeNode()}` : ''}
+                    </text>
+                  </box>
+                  <box height={1} flexShrink={0} flexDirection="row">
+                    <ContextLine runId={props.runId} elapsed={elapsed()} />
+                  </box>
+                </Show>
+              }
+            >
+              <ApprovalBar runId={latest()} />
+            </Show>
+          </box>
+        </box>
+        <box
+          height={1}
+          flexShrink={0}
+          flexDirection="row"
+          paddingLeft={2}
+          paddingRight={2}
+          width="100%"
+        >
+          <Dots active={working()} />
+          <text fg={theme.text.muted} wrapMode="none">
+            {'  '}
+          </text>
+          <Show when={working() || status() === 'waiting_human' || status() === 'waiting_approval'}>
+            <KeyHints hints={[{ key: 'c', label: 'cancel' }]} />
+          </Show>
+          <box flexGrow={1} flexShrink={0} width={2} />
+          <KeyHints hints={hints()} />
+        </box>
+      </box>
+      <Show when={sidebarWidth() > 0}>
+        <box
+          width={1}
+          flexShrink={0}
+          height="100%"
+          backgroundColor={
+            resize.hovered() || resize.resizing()
+              ? theme.background.raised.high
+              : theme.background.base
+          }
+          onMouseOver={resize.onMouseOver}
+          onMouseOut={resize.onMouseOut}
+          onMouseDown={resize.onMouseDown}
+        />
+        <Sidebar
+          runId={latest()}
+          rootId={props.runId}
+          width={sidebarWidth()}
+          focused={focus() === 'sidebar'}
+          onFocusBack={() => setFocus('conversation')}
+        />
+      </Show>
+    </box>
+  );
+}

package/src/routes/session/request.tsx

@@ -0,0 +1,87 @@
+import { TextAttributes } from '@opentui/core';
+import { type JSX, Show } from 'solid-js';
+import { useData } from '../../context/data.js';
+import { shortId } from '../../model/format.js';
+import { isEventRun } from '../../model/stream.js';
+import { useTheme } from '../../theme/context.js';
+
+/** The text a run was asked for, from its state (`input.spec` for daemon and inline runs). */
+export function requestText(input: Record<string, unknown> | undefined): string {
+  if (!input) return '';
+  for (const key of ['spec', 'input', 'text', 'prompt']) {
+    const v = input[key];
+    if (typeof v === 'string' && v.trim()) return v.trim();
+  }
+  try {
+    return JSON.stringify(input);
+  } catch {
+    return '';
+  }
+}
+
+/** The run's request at the top of the conversation: a block with the accent bar on the left. */
+export function RequestBlock(props: { runId: string }): JSX.Element {
+  const data = useData();
+  const theme = useTheme();
+  const state = () => data.state.states[props.runId];
+  const summary = () => data.state.runs.find((r) => r.runId === props.runId);
+  const meta = () => {
+    const parts = [
+      summary()?.workflow ?? state()?.workflow ?? '',
+      state()?.adapter ?? '',
+      shortId(props.runId),
+    ];
+    return parts.filter(Boolean).join(' · ');
+  };
+  const text = () => requestText(state()?.input);
+  const event = () => isEventRun(state());
+  const child = () => state()?.parentRunId !== undefined;
+  const workflow = () => summary()?.workflow ?? state()?.workflow ?? '';
+  return (
+    <Show
+      when={!event()}
+      fallback={
+        // a message from shibaox itself (a dispatched run ended): one quiet line, no block
+        <box width="100%" flexShrink={0} marginBottom={1} paddingLeft={1}>
+          <text fg={theme.text.muted} wrapMode="word">
+            <span style={{ fg: theme.text.action.primary.selected }}>{'↳ '}</span>
+            {text()}
+          </text>
+        </box>
+      }
+    >
+      <box flexDirection="row" width="100%" flexShrink={0} marginBottom={1}>
+        <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}
+        >
+          <Show when={child()}>
+            <box height={1} flexShrink={0}>
+              <text
+                fg={theme.text.action.primary.selected}
+                attributes={TextAttributes.BOLD}
+                wrapMode="none"
+              >
+                {`→ ${workflow()}`}
+              </text>
+            </box>
+          </Show>
+          <text fg={theme.text.base} attributes={TextAttributes.BOLD} wrapMode="word">
+            {text() || '…'}
+          </text>
+          <box height={1} flexShrink={0}>
+            <text fg={theme.text.muted} wrapMode="none">
+              {meta()}
+            </text>
+          </box>
+        </box>
+      </box>
+    </Show>
+  );
+}