ucode-agent 1.5.0 → 1.7.0

package/src/ui/screen.js

@@ -41,6 +41,7 @@ import {
   boxTop, boxBottom, boxRow, visLen, padVis, clip, wrapAnsi,
   shortenPath, asLabel, ensureColour, planLine, bare,
 } from './theme.js';
+import { FRAME_MS, fitActivity, shimmer, spinnerGlyph, formatDuration, doneLine, stepPaint } from './activity.js';
 import { renderer, render, polish } from './markdown.js';
 import { VERSION } from '../core/version.js';
 
@@ -58,6 +59,7 @@ export function isLabel(text) {
 export const COMMANDS = [
   '/help', '/model', '/models', '/session', '/sessions', '/resume',
   '/new', '/remember', '/skills', '/clear', '/search', '/copy', '/exit',
+  '/stats', '/doctor', '/deploy',
 ];
 
 // ANSI ----------------------------------------------------------------------
@@ -135,6 +137,8 @@ export class Screen {
     this.onInterrupt = null;
     this.onModeChange = null;
     this.spinTimer = null;
+    this.activity = null; // the turn in flight: when it began, how many steps
+    this.tick = 0;        // animation frames painted, for the spinner
     this.pendingPrompt = null;
 
     this.cols = output.columns || 80;
@@ -164,7 +168,9 @@ export class Screen {
   }
 
   stop() {
+    this.activity = null;
     this.stopSpinner();
+    this.stopTimer();
     this.output.off?.('resize', this.onResize);
     this.input.setRawMode?.(false);
     this.input.pause();
@@ -633,14 +639,23 @@ export class Screen {
     let middle = '';
     if (this.flashText) {
       middle = dim(clip(this.flashText, between - 2));
-    } else if (this.status.busy) {
-      const frame = blue(SPINNER[this.status.frame]);
-      const secs = Math.round((Date.now() - (this.status.since || Date.now())) / 1000);
-      const elapsed = secs >= 2 ? dim(` ${secs}s`) : '';
-      const room = between - 20;
-      middle = room > 8
-        ? `${frame} ${dim(clip(this.status.text, room))}${elapsed}  ${dim('esc to stop')}`
-        : `${frame}${elapsed}`;
+    } else if (this.status.busy || this.activity) {
+      // The whole turn, not just the current tool: the timer and step count
+      // keep going through the gaps between calls, so a long build never
+      // looks like it has stopped.
+      const now = Date.now();
+      const a = this.activity;
+      const since = a?.start ?? this.status.since ?? now;
+      const meta = [];
+      if (a?.steps) meta.push({ text: `step ${a.steps}`, paint: stepPaint(now - a.movedAt < 900) });
+      if (now - since >= 1000) meta.push({ text: formatDuration(now - since), keep: true });
+      middle = fitActivity({
+        glyph: spinnerGlyph(this.tick, now),
+        label: this.status.busy ? this.status.text : 'working',
+        meta,
+        hint: 'esc to stop',
+        paint: (s) => shimmer(s, now),
+      }, between - 3);
     }
 
     // The percentage is pinned to the right border whatever is in the middle,
@@ -700,13 +715,7 @@ export class Screen {
     // `since` is what makes a long think legible: the label may not change for
     // a minute, so the seconds beside it are the proof it is still alive.
     this.status = { busy: true, text: asLabel(text), frame: 0, since: Date.now() };
-    if (!this.spinTimer) {
-      this.spinTimer = setInterval(() => {
-        this.status.frame = (this.status.frame + 1) % SPINNER.length;
-        this.paintStatus();
-      }, 80);
-      this.spinTimer.unref?.();
-    }
+    this.startTimer();
     this.paintStatus();
   }
 
@@ -717,16 +726,53 @@ export class Screen {
   }
 
   stopSpinner() {
-    if (this.spinTimer) {
-      clearInterval(this.spinTimer);
-      this.spinTimer = null;
-    }
+    if (!this.activity) this.stopTimer();
     if (this.status.busy) {
       this.status = { busy: false, text: '', frame: 0, since: 0 };
       this.paintStatus();
     }
   }
 
+  // -- the turn in flight ----------------------------------------------------
+
+  /** A turn begins: the timer and step count run until turnEnd(). */
+  turnStart() {
+    this.activity = { start: Date.now(), steps: 0, movedAt: 0 };
+    this.startTimer();
+  }
+
+  /** One more model step in this turn. */
+  step() {
+    if (!this.activity) return;
+    this.activity.steps++;
+    this.activity.movedAt = Date.now();
+  }
+
+  /** The turn is over: leave "✓ Done in 6m 12s · 25 steps" under the answer. */
+  turnEnd({ ok = true } = {}) {
+    const a = this.activity;
+    this.activity = null;
+    if (!this.status.busy) this.stopTimer();
+    if (a && ok && Date.now() - a.start >= 2000) this.push(`  ${doneLine(Date.now() - a.start, a.steps)}`);
+    this.paintStatus();
+  }
+
+  /** The animation clock: only the status row repaints, about twelve times a second. */
+  startTimer() {
+    if (this.spinTimer) return;
+    this.spinTimer = setInterval(() => {
+      this.tick++;
+      this.paintStatus();
+    }, FRAME_MS);
+    this.spinTimer.unref?.();
+  }
+
+  stopTimer() {
+    if (!this.spinTimer) return;
+    clearInterval(this.spinTimer);
+    this.spinTimer = null;
+  }
+
   // -- input ---------------------------------------------------------------
 
   nextLine() {

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)\]"'`])[.。…]+$/, '');
 }
 
 /**

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/templates/next-shadcn/TEMPLATE.md

@@ -6,16 +6,16 @@ Do not re-run create-next-app or `shadcn init` — everything below is in place.
 ## Stack
 
 - Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4
-- shadcn/ui ("base-nova" style, built on `@base-ui/react`), lucide-react icons
-- next-themes (light / dark / system), sonner toasts, date-fns
+- shadcn/ui on Radix (the standard shadcn you know — `asChild` works), lucide-react icons
+- next-themes (light / dark / system), sonner toasts, date-fns, react-day-picker
 
-Next 16 changed APIs. `AGENTS.md` explains, and `node_modules/next/dist/docs/`
+Next 16 changed some APIs. `AGENTS.md` explains, and `node_modules/next/dist/docs/`
 has the guides — check them before using an API you are unsure of.
 
 ## Already wired
 
 - `src/app/layout.tsx` — font (Geist, registered as `--font-sans`), `ThemeProvider`,
-  `TooltipProvider`, and `<Toaster />`. Call `toast()` from `sonner` anywhere.
+  `TooltipProvider`, and `<Toaster />`.
 - `src/components/theme-toggle.tsx` — a light/dark button, ready to place.
 - `src/app/globals.css` — the design tokens. The palette is a starting point:
   re-tint `--primary`, `--accent` and the neutrals for this app's direction.
@@ -23,17 +23,61 @@ has the guides — check them before using an API you are unsure of.
   (`bg-success`, `text-warning`, ...).
 - `src/app/page.tsx` — a placeholder. Replace it.
 
+`layout.tsx`, `theme-provider.tsx`, `theme-toggle.tsx`, `src/lib/utils.ts` and
+everything in `src/components/ui/` are finished and build. Use them; do not
+rewrite them — a rewrite from memory brings back APIs that no longer exist.
+
 ## Components in `src/components/ui/`
 
-alert-dialog, avatar, badge, button, calendar, card, checkbox, command, dialog,
-dropdown-menu, input, input-group, label, popover, progress, scroll-area, select,
-separator, sheet, skeleton, sonner, switch, tabs, textarea, tooltip
+accordion, alert-dialog, avatar, badge, button, calendar, card, checkbox, collapsible, command, dialog, dropdown-menu, hover-card, input-group, input, label, popover, progress, radio-group, scroll-area, select, separator, sheet, skeleton, slider, sonner, switch, table, tabs, textarea, toggle-group, toggle, tooltip
+
+Anything else: `npx shadcn@latest add <name> -y` with cwd set to this folder.
+
+## APIs that are easy to get wrong
+
+```tsx
+// Toasts — sonner. A message first, options second. There is no toast({ title }).
+import { toast } from "sonner";
+toast.success("Saved");
+toast("Task deleted", { description: "Buy milk", action: { label: "Undo", onClick: () => restore() } });
+
+// Slider — value is an ARRAY, even for one thumb.
+<Slider value={[tip]} onValueChange={([v]) => setTip(v)} min={0} max={30} step={1} />
+
+// Select — value is a string.
+<Select value={list} onValueChange={(v: string) => setList(v)}>
+  <SelectTrigger><SelectValue placeholder="Pick a list" /></SelectTrigger>
+  <SelectContent><SelectItem value="inbox">Inbox</SelectItem></SelectContent>
+</Select>
+
+// Date picker — Calendar inside a Popover.
+<Popover>
+  <PopoverTrigger asChild><Button variant="outline">{date ? format(date, "PPP") : "Pick a date"}</Button></PopoverTrigger>
+  <PopoverContent className="w-auto p-0"><Calendar mode="single" selected={date} onSelect={setDate} /></PopoverContent>
+</Popover>
+
+// Toggle group — value is a string for type="single".
+<ToggleGroup type="single" value={preset} onValueChange={(v) => v && setPreset(v)}>
+  <ToggleGroupItem value="15">15%</ToggleGroupItem>
+</ToggleGroup>
+
+// Anything using useState, events, localStorage or browser APIs needs "use client"
+// as the first line of its file.
+
+// localStorage — read it in useEffect, never in render or a useState initializer:
+// the page is also rendered on the server, where localStorage does not exist.
+const [bill, setBill] = useState("");
+useEffect(() => { setBill(localStorage.getItem("bill") ?? ""); }, []);
+useEffect(() => { localStorage.setItem("bill", bill); }, [bill]);
 
-Anything else: `npx shadcn@latest add <name> -y`.
+// next-themes — there is no "next-themes/dist/types". Import from "next-themes".
+```
 
 ## Conventions
 
+- Components are named exports — `export function BillInput()` — imported with
+  braces: `import { BillInput } from "@/components/calculator/bill-input"`.
+  Only `page.tsx` and `layout.tsx` use `export default`.
 - One component per file, grouped by feature: `src/components/<feature>/`.
 - Shared types in `src/lib/types.ts`, helpers in `src/lib/`.
-- `"use client"` only on components that need state or events.
 - `cn()` from `@/lib/utils` to merge class names.