@wizardingcode/shibaox-tui 0.1.2 → 0.1.4

package/package.json

@@ -1,28 +1,24 @@
 {
   "name": "@wizardingcode/shibaox-tui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "UNLICENSED",
   "type": "module",
   "files": [
-    "src",
-    "bunfig.toml",
-    "tsconfig.json"
+    "dist",
+    "bunfig.toml"
   ],
   "exports": {
-    ".": {
-      "types": "./src/app.tsx",
-      "import": "./src/app.tsx"
-    },
+    ".": "./dist/main.js",
     "./package.json": "./package.json"
   },
   "dependencies": {
     "@opentui/core": "0.5.12",
     "@opentui/solid": "0.5.12",
     "fuzzysort": "^4.0.2",
-    "solid-js": "1.9.15",
-    "@wizardingcode/shibaox-core": "0.1.2",
-    "@wizardingcode/shibaox-daemon": "0.1.2",
-    "@wizardingcode/shibaox-schemas": "0.1.2"
+    "solid-js": "1.9.12",
+    "@wizardingcode/shibaox-core": "0.1.4",
+    "@wizardingcode/shibaox-schemas": "0.1.4",
+    "@wizardingcode/shibaox-daemon": "0.1.4"
   },
   "devDependencies": {
     "@types/bun": "^1.3.0",
@@ -36,7 +32,7 @@
     "url": "git+https://github.com/WizardingCode-io/shibaox.git"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json --noEmit",
+    "build": "tsc -p tsconfig.json --noEmit && bun run build.ts",
     "test": "vitest run && bun test",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   }

package/src/app.tsx

@@ -1,300 +0,0 @@
-import { type CliRenderer, createCliRenderer } from '@opentui/core';
-import { render, useTerminalDimensions } from '@opentui/solid';
-import { createEffect, type JSX, Match, Show, Switch } from 'solid-js';
-import { HelpDialog } from './component/dialogs/help.js';
-import { PaletteDialog } from './component/dialogs/palette.js';
-import { RunsDialog } from './component/dialogs/runs.js';
-import { Reconnecting } from './component/reconnecting.js';
-import { Tabs } from './component/tabs.js';
-import { TooSmall } from './component/too-small.js';
-import { ClientProvider, type DaemonClientLike } from './context/client.js';
-import { CommandsProvider, useCommands } from './context/commands.js';
-import { ConfigProvider } from './context/config.js';
-import { type Data, DataProvider, useData } from './context/data.js';
-import { ExitProvider, useExit } from './context/exit.js';
-import { KeysProvider, useKeys } from './context/keys.js';
-import { loadPrefs, PrefsProvider } from './context/prefs.js';
-import { RouteProvider } from './context/route.js';
-import { MotionProvider, motionEnabled } from './motion/config.js';
-import { Home } from './routes/home.js';
-import { SessionFrame } from './routes/session/index.js';
-import { ThemeProvider, useTheme } from './theme/context.js';
-import { DialogProvider, useDialog } from './ui/dialog.js';
-import { tooSmall } from './ui/layout.js';
-import { Toast, ToastProvider, useToast } from './ui/toast.js';
-
-export interface AppOptions {
-  version: string;
-  home: string;
-  cwd?: string;
-  env?: NodeJS.ProcessEnv;
-  renderer?: CliRenderer;
-  log?: (line: string) => void;
-}
-
-/** What tests and the stream entry get from a mounted app. */
-export interface AppHooks {
-  data: Data;
-}
-
-export interface AppProps extends AppOptions {
-  client: DaemonClientLike;
-  onExit: (code: number) => void;
-  /** Stream mode: a single run, no home, no tabs (`shibaox follow`). */
-  runId?: string;
-  /** Stream mode: the run reached a terminal status. */
-  onEnded?: (status: string) => void;
-  onMount?: (hooks: AppHooks) => void;
-  /** Where stream failures and malformed frames are noted (`~/.shibaox/tui.log`). */
-  log?: (line: string) => void;
-}
-
-/** Tabs rail, the active tab's screen (home or a run), overlays and toasts. */
-function Shell(props: { single?: string }): JSX.Element {
-  const data = useData();
-  const dialog = useDialog();
-  const commands = useCommands();
-  const exit = useExit();
-  const theme = useTheme();
-  const dimensions = useTerminalDimensions();
-  const active = () => props.single ?? data.state.active;
-  const help = () => dialog.open(() => <HelpDialog />);
-  const shell = [
-    {
-      id: 'home',
-      label: 'New run',
-      keys: 'ctrl+n',
-      run: () => data.activate(undefined),
-      when: () => !props.single,
-    },
-    {
-      id: 'runs',
-      label: 'Open a run',
-      keys: 'ctrl+o',
-      run: () => dialog.open(() => <RunsDialog />),
-      when: () => !props.single,
-    },
-    {
-      id: 'next',
-      label: 'Next tab',
-      keys: 'ctrl+]',
-      run: () => data.nextTab(1),
-      when: () => !props.single,
-    },
-    {
-      id: 'prev',
-      label: 'Previous tab',
-      keys: 'ctrl+p',
-      run: () => data.nextTab(-1),
-      when: () => !props.single,
-    },
-    {
-      id: 'close',
-      label: 'Close tab',
-      keys: 'ctrl+w',
-      run: () => data.state.active && data.closeRun(data.state.active),
-      when: () => !!data.state.active && !props.single,
-    },
-    { id: 'help', label: 'Help', keys: '?', run: help },
-    { id: 'quit', label: 'Quit', keys: 'ctrl+q', run: () => exit(0) },
-  ];
-  commands.register(shell);
-  useKeys('global', (key) => {
-    if (key.name === '?' && !key.ctrl) {
-      help();
-      return true;
-    }
-    if (!key.ctrl) return false;
-    if (key.name === 'k') {
-      dialog.open(() => <PaletteDialog />);
-      return true;
-    }
-    if (props.single) return false;
-    const cmd = shell.find((c) => c.keys === `ctrl+${key.name}`);
-    if (!cmd) return false;
-    cmd.run();
-    return true;
-  });
-  return (
-    <box width="100%" height="100%" flexDirection="column" backgroundColor={theme.background.base}>
-      <Show when={!tooSmall(dimensions().width, dimensions().height)} fallback={<TooSmall />}>
-        <box width="100%" height="100%" flexDirection="column">
-          <Show when={!props.single && data.state.open.length > 0}>
-            <Tabs />
-          </Show>
-          <box flexGrow={1} flexDirection="column" width="100%">
-            <Switch>
-              <Match when={!active()}>
-                <Home />
-              </Match>
-              <Match when={active()}>
-                {(id) => <SessionFrame runId={id()} single={!!props.single} />}
-              </Match>
-            </Switch>
-          </box>
-        </box>
-      </Show>
-      <Reconnecting since={() => data.state.unreachableSince} />
-      <Toast />
-    </box>
-  );
-}
-
-function Hooks(props: {
-  onMount?: (h: AppHooks) => void;
-  runId?: string;
-  onEnded?: (status: string) => void;
-}): JSX.Element {
-  const data = useData();
-  props.onMount?.({ data });
-  createEffect(() => {
-    const status = props.runId ? data.state.ended[props.runId] : undefined;
-    if (status) props.onEnded?.(status);
-  });
-  return null;
-}
-
-function WithData(props: AppProps): JSX.Element {
-  const toast = useToast();
-  return (
-    <DataProvider
-      client={props.client}
-      single={props.runId}
-      toast={(t) => toast.show(t)}
-      log={props.log}
-    >
-      <RouteProvider
-        initial={props.runId ? { type: 'session', runId: props.runId } : { type: 'home' }}
-      >
-        <Hooks onMount={props.onMount} runId={props.runId} onEnded={props.onEnded} />
-        <CommandsProvider>
-          <DialogProvider>
-            <Shell single={props.runId} />
-          </DialogProvider>
-        </CommandsProvider>
-      </RouteProvider>
-    </DataProvider>
-  );
-}
-
-/** The whole dashboard: providers around the shell. */
-export function App(props: AppProps): JSX.Element {
-  const env = props.env ?? process.env;
-  const cwd = props.cwd ?? process.cwd();
-  return (
-    <ClientProvider client={props.client}>
-      <ConfigProvider config={{ version: props.version, home: props.home, cwd, env }}>
-        <PrefsProvider home={props.home}>
-          <MotionProvider enabled={motionEnabled(env, loadPrefs(props.home))}>
-            <ThemeProvider>
-              <KeysProvider onExit={props.onExit}>
-                <ExitProvider onExit={props.onExit}>
-                  <ToastProvider>
-                    <WithData {...props} />
-                  </ToastProvider>
-                </ExitProvider>
-              </KeysProvider>
-            </ThemeProvider>
-          </MotionProvider>
-        </PrefsProvider>
-      </ConfigProvider>
-    </ClientProvider>
-  );
-}
-
-async function rendererFor(o: AppOptions): Promise<{ renderer: CliRenderer; owned: boolean }> {
-  if (o.renderer) return { renderer: o.renderer, owned: false };
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: false,
-    screenMode: 'alternate-screen',
-    useMouse: true,
-  });
-  return { renderer, owned: true };
-}
-
-/** Ctrl-C outside Solid so a crash before the first frame can never trap the terminal. */
-function onCtrlC(renderer: CliRenderer, fn: () => void): () => void {
-  const handler = (key: { name: string; ctrl: boolean }) => {
-    if (key.ctrl && key.name === 'c') fn();
-  };
-  renderer.keyInput.on('keypress', handler);
-  return () => renderer.keyInput.off('keypress', handler);
-}
-
-type Outcome = { code: number; ended?: string };
-
-function mount(
-  client: DaemonClientLike,
-  o: AppOptions & { runId?: string },
-  finish: (outcome: Outcome) => void,
-): Promise<() => void> {
-  return rendererFor(o).then(async ({ renderer, owned }) => {
-    let done = false;
-    let rendered = false;
-    const end = (outcome: Outcome) => {
-      if (done) return;
-      done = true;
-      off();
-      if (owned) renderer.destroy();
-      finish(outcome);
-    };
-    // the in-app handler decides ctrl+c (a prompt may consume it); this listener only saves
-    // the terminal when the app never rendered
-    const off = onCtrlC(renderer, () => {
-      if (!rendered) end({ code: 0 });
-    });
-    await render(
-      () => (
-        <App
-          client={client}
-          version={o.version}
-          home={o.home}
-          cwd={o.cwd}
-          env={o.env}
-          runId={o.runId}
-          log={o.log}
-          onExit={(code) => end({ code })}
-          onEnded={(status) => end({ code: status === 'completed' ? 0 : 2, ended: status })}
-          onMount={() => {
-            rendered = true;
-          }}
-        />
-      ),
-      renderer,
-    );
-    return () => end({ code: 0 });
-  });
-}
-
-/** `shibaox` / `shibaox ui`: resolves with the exit code when the user quits. */
-export function runDashboard(client: DaemonClientLike, o: AppOptions): Promise<number> {
-  return new Promise((resolve) => {
-    void mount(client, o, (r) => resolve(r.code));
-  });
-}
-
-/**
- * `shibaox run|follow` with a TTY: one run; ends with the run (0 done, 2 otherwise) or when the
- * user leaves (then the message says the run keeps running).
- */
-export function runStream(
-  client: DaemonClientLike,
-  runId: string,
-  o: AppOptions & { signal?: AbortSignal },
-): Promise<{ code: number; message?: string }> {
-  return new Promise((resolve) => {
-    void mount(client, { ...o, runId }, (r) =>
-      resolve(
-        r.ended
-          ? { code: r.code }
-          : {
-              code: r.code,
-              message:
-                r.code === 0
-                  ? `Run ${runId} keeps running. Follow it with: shibaox follow ${runId}`
-                  : undefined,
-            },
-      ),
-    ).then((stop) => o.signal?.addEventListener('abort', stop, { once: true }));
-  });
-}

package/src/component/dialogs/confirm.tsx

@@ -1,29 +0,0 @@
-import type { JSX } from 'solid-js';
-import { useKeys } from '../../context/keys.js';
-import { useTheme } from '../../theme/context.js';
-import { Dialog } from '../../ui/dialog.js';
-
-/** `<message> (y/n)`: y runs onYes, n and esc run onNo. */
-export function Confirm(props: {
-  message: string;
-  onYes: () => void;
-  onNo: () => void;
-}): JSX.Element {
-  const theme = useTheme().surface('dialog');
-  useKeys('dialog', (key) => {
-    if (key.name === 'y') {
-      props.onYes();
-      return true;
-    }
-    if (key.name === 'n') {
-      props.onNo();
-      return true;
-    }
-    return false;
-  });
-  return (
-    <Dialog centered onClose={props.onNo}>
-      <text fg={theme.text.base}>{`${props.message} (y/n)`}</text>
-    </Dialog>
-  );
-}

package/src/component/dialogs/diff.tsx

@@ -1,143 +0,0 @@
-import { extname } from 'node:path';
-import { TextAttributes } from '@opentui/core';
-import type { DiffResult } from '@wizardingcode/shibaox-daemon';
-import { DaemonHttpError } from '@wizardingcode/shibaox-daemon/client';
-import { createMemo, createResource, createSignal, For, type JSX, Show } from 'solid-js';
-import { useClient } from '../../context/client.js';
-import { useKeys } from '../../context/keys.js';
-import { Spinner } from '../../motion/spinner.js';
-import { useSyntax, useTheme } from '../../theme/context.js';
-import { Dialog, useDialog } from '../../ui/dialog.js';
-
-const LIST_WIDTH = 24;
-const FILETYPES: Record<string, string> = {
-  '.ts': 'typescript',
-  '.tsx': 'tsx',
-  '.js': 'javascript',
-  '.jsx': 'jsx',
-  '.json': 'json',
-  '.md': 'markdown',
-  '.py': 'python',
-  '.go': 'go',
-  '.rs': 'rust',
-  '.sh': 'bash',
-  '.yaml': 'yaml',
-  '.yml': 'yaml',
-  '.css': 'css',
-  '.html': 'html',
-};
-
-/** The part of a multi-file patch that belongs to `path`. */
-export function patchOf(patch: string, path: string): string {
-  const header = `diff --git a/${path} b/${path}`;
-  const start = patch.indexOf(header);
-  if (start < 0) return '';
-  const next = patch.indexOf('\ndiff --git ', start + header.length);
-  return next < 0 ? patch.slice(start) : patch.slice(start, next + 1);
-}
-
-/** The run's changes: a file list on the left, the selected file's diff on the right. */
-export function DiffDialog(props: { runId: string }): JSX.Element {
-  const client = useClient();
-  const dialog = useDialog();
-  const theme = useTheme().surface('dialog');
-  const syntax = useSyntax();
-  const [result] = createResource<{ diff?: DiffResult; error?: string }>(async () => {
-    try {
-      return { diff: await client.diff(props.runId) };
-    } catch (e) {
-      if (e instanceof DaemonHttpError && e.code === 'no_workspace')
-        return { error: 'Workspace is gone' };
-      return { error: e instanceof Error ? e.message : String(e) };
-    }
-  });
-  const [cursor, setCursor] = createSignal(0);
-  const files = () => result()?.diff?.files ?? [];
-  const selected = () => files()[Math.min(cursor(), Math.max(0, files().length - 1))];
-  const patch = createMemo(() => {
-    const d = result()?.diff;
-    const f = selected();
-    return d && f ? patchOf(d.patch, f.path) : '';
-  });
-  const totals = () => {
-    const fs = files();
-    return `${fs.length} file${fs.length === 1 ? '' : 's'} · +${fs.reduce((a, f) => a + f.additions, 0)} −${fs.reduce((a, f) => a + f.deletions, 0)}`;
-  };
-  useKeys('dialog', (key) => {
-    if (key.name === ']' || key.name === 'down' || key.name === 'j') {
-      setCursor((c) => Math.min(files().length - 1, c + 1));
-      return true;
-    }
-    if (key.name === '[' || key.name === 'up' || key.name === 'k') {
-      setCursor((c) => Math.max(0, c - 1));
-      return true;
-    }
-    return false;
-  });
-  return (
-    <Dialog
-      size="xlarge"
-      title={result()?.diff ? `Diff · ${totals()}` : 'Diff'}
-      onClose={() => dialog.close()}
-    >
-      <Show
-        when={!result.loading}
-        fallback={<Spinner color={theme.text.muted}>Reading the workspace…</Spinner>}
-      >
-        <Show
-          when={!result()?.error}
-          fallback={<text fg={theme.text.feedback.error}>{result()?.error ?? ''}</text>}
-        >
-          <Show when={files().length > 0} fallback={<text fg={theme.text.muted}>No changes</text>}>
-            <box flexDirection="row" width="100%" height={22}>
-              <box width={LIST_WIDTH} flexShrink={0} flexDirection="column" paddingRight={1}>
-                <For each={files()}>
-                  {(f, i) => (
-                    <box
-                      height={1}
-                      flexShrink={0}
-                      backgroundColor={
-                        i() === cursor() ? theme.background.action.primary.selected : undefined
-                      }
-                      onMouseUp={() => setCursor(i())}
-                    >
-                      <text
-                        fg={
-                          f.status === 'added'
-                            ? theme.diff.added
-                            : f.status === 'deleted'
-                              ? theme.diff.removed
-                              : theme.text.base
-                        }
-                        attributes={i() === cursor() ? TextAttributes.BOLD : undefined}
-                        wrapMode="none"
-                      >
-                        {`${f.status === 'added' ? '+' : f.status === 'deleted' ? '−' : '±'} ${f.path}`}
-                      </text>
-                    </box>
-                  )}
-                </For>
-              </box>
-              <scrollbox flexGrow={1} height="100%">
-                <diff
-                  diff={patch()}
-                  view="unified"
-                  filetype={FILETYPES[extname(selected()?.path ?? '')] ?? 'text'}
-                  syntaxStyle={syntax}
-                  showLineNumbers
-                  addedBg={theme.diff.addedBg}
-                  removedBg={theme.diff.removedBg}
-                />
-              </scrollbox>
-            </box>
-            <box height={1} flexShrink={0} marginTop={1}>
-              <text fg={theme.text.muted} wrapMode="none">
-                {`${result()?.diff?.truncated ? '… truncated · ' : ''}] / [ next / previous file · esc close`}
-              </text>
-            </box>
-          </Show>
-        </Show>
-      </Show>
-    </Dialog>
-  );
-}

package/src/component/dialogs/help.tsx

@@ -1,99 +0,0 @@
-import { TextAttributes } from '@opentui/core';
-import { For, type JSX } from 'solid-js';
-import { useTheme } from '../../theme/context.js';
-import { Dialog, useDialog } from '../../ui/dialog.js';
-
-type Section = { title: string; keys: [string, string][] };
-
-const LEFT: Section[] = [
-  {
-    title: 'Global',
-    keys: [
-      ['ctrl+n', 'home / new run'],
-      ['ctrl+o', 'open a run'],
-      ['ctrl+k', 'command palette'],
-      ['ctrl+b', 'toggle the sidebar'],
-      ['ctrl+] · ctrl+p', 'next / previous tab'],
-      ['ctrl+w', 'close the tab'],
-      ['?', 'this help (outside inputs)'],
-      ['ctrl+q', 'quit; runs keep going'],
-    ],
-  },
-  {
-    title: 'Dialogs',
-    keys: [
-      ['esc', 'close'],
-      ['↑/↓ · enter', 'choose'],
-      ['typing', 'filters'],
-    ],
-  },
-];
-const RIGHT: Section[] = [
-  {
-    title: 'Session',
-    keys: [
-      ['j / k', 'move the cursor'],
-      ['↑ / ↓ · wheel', 'scroll the view'],
-      ['enter', 'expand / collapse'],
-      ['g · G', 'top · follow the end'],
-      ['d', 'diff (deny while waiting)'],
-      ['c', 'cancel the run'],
-      ['r', 'resume a paused run'],
-      ['a · d · n', 'approve · deny · note'],
-      ['tab', 'focus the sidebar'],
-    ],
-  },
-  {
-    title: 'Sidebar',
-    keys: [
-      ['j/k', 'select a run'],
-      ['enter', 'open it'],
-      ['a · d', 'answer its item'],
-      ['tab', 'back'],
-    ],
-  },
-];
-
-function Column(props: { sections: Section[] }): JSX.Element {
-  const theme = useTheme().surface('dialog');
-  return (
-    <box flexDirection="column" flexGrow={1} flexBasis={0}>
-      <For each={props.sections}>
-        {(s) => (
-          <box flexDirection="column" flexShrink={0} marginBottom={1}>
-            <text fg={theme.text.action.primary.selected} attributes={TextAttributes.BOLD}>
-              {s.title}
-            </text>
-            <For each={s.keys}>
-              {([k, what]) => (
-                <box height={1} flexShrink={0} flexDirection="row">
-                  <box width={16} flexShrink={0}>
-                    <text fg={theme.text.base} wrapMode="none">
-                      {k}
-                    </text>
-                  </box>
-                  <text fg={theme.text.muted} wrapMode="none">
-                    {what}
-                  </text>
-                </box>
-              )}
-            </For>
-          </box>
-        )}
-      </For>
-    </box>
-  );
-}
-
-/** Every key, by context, in two columns. */
-export function HelpDialog(): JSX.Element {
-  const dialog = useDialog();
-  return (
-    <Dialog size="large" title="Keys" onClose={() => dialog.close()}>
-      <box flexDirection="row" width="100%" gap={2}>
-        <Column sections={LEFT} />
-        <Column sections={RIGHT} />
-      </box>
-    </Dialog>
-  );
-}