ucode-agent 1.6.0 → 1.8.0

package/src/ui/theme.js

@@ -252,7 +252,11 @@ export function asLabel(text) {
   return String(text ?? '')
     .trim()
     .replace(/\s+/g, ' ')
-    .replace(/(?<=[\w)\]"'`])[.。]+$/, '');
+    // A trailing stop, from a model's sentence or a tool's own output
+    // ("Building…", "Completing…"), is noise on a one-line label. A dot that
+    // is the argument itself — "Listing ." — is not, so a word has to come
+    // before it.
+    .replace(/(?<=[\w)\]"'`])[.。…]+$/, '');
 }
 
 /**
@@ -272,3 +276,47 @@ export function planLine(items) {
   });
   return `  ${sky(`plan ${done}/${list.length}`)}  ${parts.join(dim('  ·  '))}`;
 }
+
+/**
+ * The background ucode paints behind itself.
+ *
+ * A terminal's own background is whatever the person set it to years ago:
+ * white, solarized, a photograph. The interface was drawn for a dark one, and
+ * on a light terminal the dim greys it relies on turn to near-invisible smoke.
+ * So ucode paints its own ground for as long as it is running, and the
+ * alternate screen gives it back untouched on exit.
+ *
+ * Near-black rather than black: a true #000 against a bright room is a hole,
+ * and the box edges lose their softness. This is the shade a code editor
+ * settles on for the same reason.
+ */
+export const BACKGROUND = process.env.UCODE_BG || '#131316';
+
+const rgb = (hex) => {
+  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex.trim());
+  return m ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)] : [19, 19, 22];
+};
+
+/** Turn the background on. Everything painted after this sits on it. */
+export const BG_ON = (() => {
+  if (process.env.NO_COLOR || process.env.UCODE_BG === 'off') return '';
+  const [r, g, b] = rgb(BACKGROUND);
+  return `\x1b[48;2;${r};${g};${b}m`;
+})();
+
+/** Hand the terminal its own colours back. */
+export const BG_OFF = BG_ON ? '\x1b[0m' : '';
+
+/**
+ * Keep the background on across a line that resets it.
+ *
+ * chalk closes a foreground with 39 and a background with 49, and 49 means
+ * "the terminal's default" — which is exactly the colour being painted over.
+ * A diff line, which sets its own background, would therefore punch a hole
+ * through to the terminal's ground for the rest of the line. Re-asserting the
+ * background after every reset closes those holes.
+ */
+export function onBackground(text) {
+  if (!BG_ON) return text;
+  return BG_ON + String(text).replace(/\x1b\[(?:0|49)m/g, (m) => m + BG_ON);
+}

package/templates/blocks/app-shell.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+
+export type NavItem = { href: string; label: string; icon?: ReactNode };
+
+/**
+ * The frame every page sits in: a sidebar on a wide screen, the same nav
+ * behind a button on a phone. One list of links drives both, so they cannot
+ * drift apart.
+ */
+export function AppShell({
+  nav,
+  current,
+  title,
+  children,
+}: {
+  nav: NavItem[];
+  current?: string;
+  title: string;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const links = (onNavigate?: () => void) => (
+    <nav className="space-y-1" aria-label="Main">
+      {nav.map((item) => {
+        const active = current === item.href;
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            onClick={onNavigate}
+            aria-current={active ? "page" : undefined}
+            className={
+              active
+                ? "flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-sm font-medium"
+                : "flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+            }
+          >
+            {item.icon}
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+
+  return (
+    <div className="flex min-h-svh">
+      <aside className="hidden w-60 shrink-0 border-r p-4 md:block">
+        <div className="mb-6 px-3 text-sm font-semibold tracking-tight">{title}</div>
+        {links()}
+      </aside>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="flex h-14 items-center gap-3 border-b px-4 md:px-6">
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="sm" className="md:hidden" aria-label="Open menu">
+                Menu
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-64 p-4">
+              <SheetTitle className="mb-6 px-3 text-sm font-semibold">{title}</SheetTitle>
+              {links(() => setOpen(false))}
+            </SheetContent>
+          </Sheet>
+          <span className="text-sm font-medium md:hidden">{title}</span>
+        </header>
+
+        <main className="min-w-0 flex-1 p-4 md:p-8">
+          <div className="mx-auto w-full max-w-6xl space-y-8">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/templates/blocks/data-table.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useMemo, useState, ReactNode } from "react";
+import { Input } from "@/components/ui/input";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+
+export type Column<T> = {
+  key: keyof T & string;
+  header: string;
+  /** Right-align and tabular-nums, for money and counts. */
+  numeric?: boolean;
+  render?: (row: T) => ReactNode;
+};
+
+/**
+ * A table of things you can search and sort.
+ *
+ * Sorting and filtering happen here, over rows already in memory: it is the
+ * right shape up to a few thousand rows and the wrong one past that, where
+ * the server should be doing both.
+ */
+export function DataTable<T extends { id: string | number }>({
+  rows,
+  columns,
+  searchPlaceholder = "Search…",
+  empty,
+}: {
+  rows: T[];
+  columns: Column<T>[];
+  searchPlaceholder?: string;
+  empty?: ReactNode;
+}) {
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<{ key: string; asc: boolean } | null>(null);
+
+  const shown = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    let out = needle
+      ? rows.filter((row) =>
+          columns.some((c) => String(row[c.key] ?? "").toLowerCase().includes(needle)))
+      : rows.slice();
+    if (sort) {
+      out.sort((a, b) => {
+        const x = a[sort.key as keyof T];
+        const y = b[sort.key as keyof T];
+        if (typeof x === "number" && typeof y === "number") return sort.asc ? x - y : y - x;
+        return sort.asc
+          ? String(x ?? "").localeCompare(String(y ?? ""))
+          : String(y ?? "").localeCompare(String(x ?? ""));
+      });
+    }
+    return out;
+  }, [rows, columns, query, sort]);
+
+  const toggle = (key: string) =>
+    setSort((s) => (s?.key === key ? { key, asc: !s.asc } : { key, asc: true }));
+
+  return (
+    <div className="space-y-4">
+      <Input
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder={searchPlaceholder}
+        className="max-w-xs"
+        aria-label={searchPlaceholder}
+      />
+
+      <div className="overflow-x-auto rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((c) => (
+                <TableHead key={c.key} className={c.numeric ? "text-right" : undefined}>
+                  <button
+                    type="button"
+                    onClick={() => toggle(c.key)}
+                    className="inline-flex items-center gap-1 hover:text-foreground"
+                    aria-label={`Sort by ${c.header}`}
+                  >
+                    {c.header}
+                    <span aria-hidden className="text-xs text-muted-foreground">
+                      {sort?.key === c.key ? (sort.asc ? "↑" : "↓") : ""}
+                    </span>
+                  </button>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {shown.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-28 text-center text-sm text-muted-foreground">
+                  {query ? `Nothing matches “${query}”.` : empty ?? "Nothing here yet."}
+                </TableCell>
+              </TableRow>
+            ) : (
+              shown.map((row) => (
+                <TableRow key={row.id}>
+                  {columns.map((c) => (
+                    <TableCell
+                      key={c.key}
+                      className={c.numeric ? "text-right tabular-nums" : undefined}
+                    >
+                      {c.render ? c.render(row) : String(row[c.key] ?? "")}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

package/templates/blocks/empty-state.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+
+/**
+ * What a list looks like before anything is in it.
+ *
+ * An empty screen is where people decide whether a product is working or
+ * broken, so this says which it is and offers the one action that fills it.
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  actionLabel,
+  onAction,
+}: {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-16 text-center">
+      {icon ? (
+        <div className="mb-4 flex size-11 items-center justify-center rounded-full bg-muted text-muted-foreground">
+          {icon}
+        </div>
+      ) : null}
+      <h3 className="text-base font-medium">{title}</h3>
+      {description ? (
+        <p className="mt-1.5 max-w-sm text-sm text-muted-foreground text-pretty">{description}</p>
+      ) : null}
+      {actionLabel ? (
+        <Button className="mt-6" onClick={onAction}>
+          {actionLabel}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/templates/blocks/page-header.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+/**
+ * The top of a page: what it is, what it is for, and what you can do here.
+ * Actions sit on the right on a wide screen and wrap underneath on a phone.
+ */
+export function PageHeader({
+  title,
+  description,
+  actions,
+}: {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-4 border-b pb-6 sm:flex-row sm:items-end sm:justify-between">
+      <div className="space-y-1.5">
+        <h1 className="text-2xl font-semibold tracking-tight text-balance">{title}</h1>
+        {description ? (
+          <p className="max-w-2xl text-sm text-muted-foreground text-pretty">{description}</p>
+        ) : null}
+      </div>
+      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+    </div>
+  );
+}

package/templates/blocks/stat-cards.tsx

@@ -0,0 +1,46 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export type Stat = {
+  label: string;
+  value: string;
+  /** Change since the last period, e.g. 12 or -3.4. Omit for no delta. */
+  change?: number;
+  hint?: string;
+};
+
+/**
+ * The row of numbers at the top of a dashboard.
+ *
+ * A number on its own says nothing, so each one carries what it is measured
+ * against. Rising is not always good, so the colour follows the sign and the
+ * caller words the label.
+ */
+export function StatCards({ stats }: { stats: Stat[] }) {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {stats.map((stat) => (
+        <Card key={stat.label}>
+          <CardContent className="space-y-2 p-5">
+            <p className="text-sm font-medium text-muted-foreground">{stat.label}</p>
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-semibold tabular-nums tracking-tight">{stat.value}</span>
+              {stat.change !== undefined ? (
+                <span
+                  className={
+                    stat.change >= 0
+                      ? "text-xs font-medium text-emerald-600 dark:text-emerald-400"
+                      : "text-xs font-medium text-rose-600 dark:text-rose-400"
+                  }
+                >
+                  {stat.change >= 0 ? "+" : ""}
+                  {stat.change}%
+                </span>
+              ) : null}
+            </div>
+            {stat.hint ? <p className="text-xs text-muted-foreground">{stat.hint}</p> : null}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/ucode.js

@@ -1,124 +1,132 @@
-#!/usr/bin/env node
-/**
- * ucode.js — the command.
- *
- * Parses the arguments, builds an Agent, and gets out of the way. Everything
- * of substance is under src/.
- */
-
-import path from 'node:path';
-import process from 'node:process';
-import { readFile } from 'node:fs/promises';
-import { realpathSync } from 'node:fs';
-import { pathToFileURL, fileURLToPath } from 'node:url';
-
-import { Agent } from './src/core/loop.js';
-import { setModel, modelName, MODELS, DEFAULT_MODEL, ENV_FILE } from './src/core/provider.js';
-import { VERSION } from './src/core/version.js';
-import { Plain } from './src/ui/plain.js';
-import { blue, dim, sky } from './src/ui/theme.js';
-
-function parseArgs(argv) {
-  const args = { debug: false, model: null, cwd: process.cwd(), help: false, plan: false, version: false };
-
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a === '--debug') args.debug = true;
-    else if (a === '--plan') args.plan = true;
-    else if (a === '--model' || a === '-m') args.model = argv[++i];
-    else if (a === '--cwd' || a === '-C') args.cwd = path.resolve(argv[++i]);
-    else if (a === '--help' || a === '-h') args.help = true;
-    else if (a === '--version' || a === '-v') args.version = true;
-  }
-
-  return args;
-}
-
-function usage() {
-  const entries = Object.entries(MODELS);
-  const width = Math.max(...entries.map(([, m]) => m.name.length));
-  const models = entries
-    .map(([id, m]) => `      ${m.name.padEnd(width)}   ${dim(id)}`)
-    .join('\n');
-
-  process.stdout.write(
-    `\n  ${blue('ucode')} — a terminal coding agent\n\n` +
-    '  ucode [options]\n\n' +
-    `    -m, --model <id>   which model to use (default: ${modelName(DEFAULT_MODEL)})\n` +
-    '    -C, --cwd <dir>    work in another directory\n' +
-    '        --plan         start in plan mode: read and research, change nothing\n' +
-    '        --debug        print stack traces when something breaks\n' +
-    '    -v, --version      print the version\n' +
-    '    -h, --help         this message\n' +
-    '    doctor             check that everything ucode needs is working\n\n' +
-    `  ${sky('Models')}\n${models}\n\n` +
-    `  Needs UCODE_API_KEY in the environment or in ${ENV_FILE}\n` +
-    '  Free keys: https://openrouter.ai/keys\n\n'
-  );
-}
-
-async function main() {
-  const args = parseArgs(process.argv.slice(2));
-
-  if (args.help) return usage();
-
-  if (process.argv[2] === 'doctor') {
-    const { runDoctor } = await import('./src/core/doctor.js');
-    process.stdout.write(`${(await runDoctor()).join('\n')}\n`);
-    return;
-  }
-
-  if (args.version) {
-    process.stdout.write(`${VERSION}\n`);
-    return;
-  }
-
-  if (args.model) {
-    try {
-      setModel(args.model);
-    } catch (err) {
-      new Plain({ cwd: args.cwd }).error(err);
-      process.exitCode = 1;
-      return;
-    }
-  }
-
-  const agent = new Agent({ cwd: args.cwd, debug: args.debug });
-  if (args.plan) agent.ui.mode = 'plan';
-
-  try {
-    await agent.start();
-  } catch (err) {
-    agent.ui.error(err, { debug: args.debug });
-    await agent.persist().catch(() => {});
-    agent.ui.close();
-    process.exitCode = 1;
-  }
-}
-
-/**
- * Was this file launched, or imported?
- *
- * Importing it — which another front end would do to reuse Agent — must not
- * open a terminal session. The obvious check is comparing `import.meta.url`
- * with argv[1], and it is wrong: after `npm link`, argv[1] arrives as the path
- * through the symlink in the global node_modules while `import.meta.url` has
- * already been resolved to the real file. The two never match, so the command
- * starts, matches nothing, and exits successfully having done absolutely
- * nothing — which is a great deal harder to diagnose than a crash.
- *
- * Comparing real paths is what actually answers the question.
- */
-function launchedDirectly() {
-  const entry = process.argv[1];
-  if (!entry) return false;
-
-  const self = fileURLToPath(import.meta.url);
-  try {
-    return realpathSync(entry) === realpathSync(self);
-  } catch {
-    return pathToFileURL(entry).href === import.meta.url;
-  }
-}
-
-if (launchedDirectly()) main();
+#!/usr/bin/env node
+/**
+ * ucode.js — the command.
+ *
+ * Parses the arguments, builds an Agent, and gets out of the way. Everything
+ * of substance is under src/.
+ */
+
+import path from 'node:path';
+import process from 'node:process';
+import { readFile } from 'node:fs/promises';
+import { realpathSync } from 'node:fs';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+
+import { Agent } from './src/core/loop.js';
+import { setModel, modelName, MODELS, DEFAULT_MODEL, ENV_FILE } from './src/core/provider.js';
+import { VERSION } from './src/core/version.js';
+import { Plain } from './src/ui/plain.js';
+import { blue, dim, sky } from './src/ui/theme.js';
+
+function parseArgs(argv) {
+  const args = { debug: false, model: null, cwd: process.cwd(), help: false, plan: false, version: false };
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--debug') args.debug = true;
+    else if (a === '--plan') args.plan = true;
+    else if (a === '--model' || a === '-m') args.model = argv[++i];
+    else if (a === '--cwd' || a === '-C') args.cwd = path.resolve(argv[++i]);
+    else if (a === '--help' || a === '-h') args.help = true;
+    else if (a === '--version' || a === '-v') args.version = true;
+  }
+
+  return args;
+}
+
+function usage() {
+  const entries = Object.entries(MODELS);
+  const width = Math.max(...entries.map(([, m]) => m.name.length));
+  const models = entries
+    .map(([id, m]) => `      ${m.name.padEnd(width)}   ${dim(id)}`)
+    .join('\n');
+
+  process.stdout.write(
+    `\n  ${blue('ucode')} — a terminal coding agent\n\n` +
+    '  ucode [options]\n\n' +
+    `    -m, --model <id>   which model to use (default: ${modelName(DEFAULT_MODEL)})\n` +
+    '    -C, --cwd <dir>    work in another directory\n' +
+    '        --plan         start in plan mode: read and research, change nothing\n' +
+    '        --debug        print stack traces when something breaks\n' +
+    '    -v, --version      print the version\n' +
+    '    -h, --help         this message\n' +
+    '    doctor             check that everything ucode needs is working\n' +
+    '    login <key>        save your key for every folder on this machine\n\n' +
+    `  ${sky('Models')}\n${models}\n\n` +
+    `  Needs UCODE_API_KEY in the environment or in ${ENV_FILE}\n` +
+    '  Free keys: https://openrouter.ai/keys\n\n'
+  );
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+
+  if (args.help) return usage();
+
+  if (process.argv[2] === 'login') {
+    const { saveKey } = await import('./src/core/login.js');
+    process.stdout.write(`${await saveKey(process.argv[3])}
+`);
+    return;
+  }
+
+  if (process.argv[2] === 'doctor') {
+    const { runDoctor } = await import('./src/core/doctor.js');
+    process.stdout.write(`${(await runDoctor()).join('\n')}\n`);
+    return;
+  }
+
+  if (args.version) {
+    process.stdout.write(`${VERSION}\n`);
+    return;
+  }
+
+  if (args.model) {
+    try {
+      setModel(args.model);
+    } catch (err) {
+      new Plain({ cwd: args.cwd }).error(err);
+      process.exitCode = 1;
+      return;
+    }
+  }
+
+  const agent = new Agent({ cwd: args.cwd, debug: args.debug });
+  if (args.plan) agent.ui.mode = 'plan';
+
+  try {
+    await agent.start();
+  } catch (err) {
+    agent.ui.error(err, { debug: args.debug });
+    await agent.persist().catch(() => {});
+    agent.ui.close();
+    process.exitCode = 1;
+  }
+}
+
+/**
+ * Was this file launched, or imported?
+ *
+ * Importing it — which another front end would do to reuse Agent — must not
+ * open a terminal session. The obvious check is comparing `import.meta.url`
+ * with argv[1], and it is wrong: after `npm link`, argv[1] arrives as the path
+ * through the symlink in the global node_modules while `import.meta.url` has
+ * already been resolved to the real file. The two never match, so the command
+ * starts, matches nothing, and exits successfully having done absolutely
+ * nothing — which is a great deal harder to diagnose than a crash.
+ *
+ * Comparing real paths is what actually answers the question.
+ */
+function launchedDirectly() {
+  const entry = process.argv[1];
+  if (!entry) return false;
+
+  const self = fileURLToPath(import.meta.url);
+  try {
+    return realpathSync(entry) === realpathSync(self);
+  } catch {
+    return pathToFileURL(entry).href === import.meta.url;
+  }
+}
+
+if (launchedDirectly()) main();