@rahularya01/pi-essentials 0.1.0

package/src/todos/state.ts

@@ -0,0 +1,310 @@
+import { MAX_TODOS } from "../security/limits.ts";
+
+export type TodoStatus = "pending" | "in_progress" | "completed" | "blocked" | "abandoned";
+
+export interface TodoItem {
+  id: number;
+  content: string;
+  status: TodoStatus;
+  blockedBy?: number[];
+  phase?: string;
+  blocker?: string;
+}
+
+export interface TodoState {
+  todos: TodoItem[];
+  nextId: number;
+}
+
+export type TodoAction =
+  | "list"
+  | "create"
+  | "update"
+  | "complete"
+  | "reopen"
+  | "delete"
+  | "clear"
+  | "block"
+  | "unblock"
+  | "abandon"
+  | "sync";
+
+export interface TodoMutation {
+  action: TodoAction;
+  content?: string;
+  id?: number;
+  status?: TodoStatus;
+  blockedBy?: number[];
+  phase?: string;
+  blocker?: string;
+  todos?: TodoItem[];
+}
+
+const STATUSES = new Set<TodoStatus>(["pending", "in_progress", "completed", "blocked", "abandoned"]);
+
+export function emptyTodoState(): TodoState {
+  return { todos: [], nextId: 1 };
+}
+
+export function cloneState(state: TodoState): TodoState {
+  return {
+    nextId: state.nextId,
+    todos: state.todos.map((todo) => ({ ...todo, blockedBy: todo.blockedBy ? [...todo.blockedBy] : undefined })),
+  };
+}
+
+export function applyTodoMutation(state: TodoState, mutation: TodoMutation): { state: TodoState; message: string } {
+  const next = cloneState(state);
+  switch (mutation.action) {
+    case "list":
+      return { state: next, message: formatTodos(next.todos) };
+    case "sync": {
+      const synced = validateSnapshot(mutation.todos);
+      return {
+        state: { todos: synced, nextId: synced.reduce((max, todo) => Math.max(max, todo.id), 0) + 1 },
+        message: `Synced ${synced.length} todo(s).`,
+      };
+    }
+    case "create": {
+      const content = mutation.content?.trim();
+      if (!content) throw new Error("content is required to create a todo");
+      if (next.todos.length >= MAX_TODOS) {
+        throw new Error(`Todo limit reached (${MAX_TODOS} total); delete or clear todos before creating another.`);
+      }
+      const status = mutation.status ?? "pending";
+      assertStatus(status);
+      const blockedBy = normalizeBlockedBy(mutation.blockedBy, next.todos);
+      const todo: TodoItem = {
+        id: next.nextId++,
+        content,
+        status,
+        blockedBy,
+        phase: cleanOptional(mutation.phase),
+        blocker: cleanOptional(mutation.blocker),
+      };
+      next.todos.push(todo);
+      assertNoCycles(next.todos);
+      const moved = ensureSingleInProgress(next, todo);
+      return { state: next, message: `Created #${todo.id}: ${todo.content}${transitionNote(moved)}${warnings(next, todo)}` };
+    }
+    case "update": {
+      const todo = requireTodo(next, mutation.id);
+      const previous = todo.status;
+      if (mutation.content?.trim()) todo.content = mutation.content.trim();
+      if (mutation.status !== undefined) {
+        assertStatus(mutation.status);
+        todo.status = mutation.status;
+      }
+      if (mutation.blockedBy !== undefined) todo.blockedBy = normalizeBlockedBy(mutation.blockedBy, next.todos, todo.id);
+      if (mutation.phase !== undefined) todo.phase = cleanOptional(mutation.phase);
+      if (mutation.blocker !== undefined) todo.blocker = cleanOptional(mutation.blocker);
+      assertNoCycles(next.todos);
+      const moved = ensureSingleInProgress(next, todo);
+      const changed = previous !== todo.status ? ` (${previous} → ${todo.status})` : "";
+      return {
+        state: next,
+        message: `Updated #${todo.id}: ${todo.content} [${todo.status}]${changed}${transitionNote(moved)}${warnings(next, todo)}`,
+      };
+    }
+    case "complete": {
+      const todo = requireTodo(next, mutation.id);
+      if (todo.status === "completed") return { state: next, message: `#${todo.id} was already completed.` };
+      const previous = todo.status;
+      todo.status = "completed";
+      const unblocked = newlyDependencyReady(next, todo.id);
+      return {
+        state: next,
+        message: `Completed #${todo.id}: ${todo.content} (${previous} → completed).${unblockedNote(unblocked)}`,
+      };
+    }
+    case "reopen": {
+      const todo = requireTodo(next, mutation.id);
+      const previous = todo.status;
+      todo.status = "pending";
+      return { state: next, message: `Reopened #${todo.id}: ${todo.content} (${previous} → pending)` };
+    }
+    case "block": {
+      const todo = requireTodo(next, mutation.id);
+      const previous = todo.status;
+      todo.status = "blocked";
+      if (mutation.blocker !== undefined) todo.blocker = cleanOptional(mutation.blocker);
+      const reason = todo.blocker ? ` — ${todo.blocker}` : "";
+      return { state: next, message: `Blocked #${todo.id}: ${todo.content} (${previous} → blocked)${reason}` };
+    }
+    case "unblock": {
+      const todo = requireTodo(next, mutation.id);
+      const previous = todo.status;
+      todo.status = "pending";
+      todo.blocker = undefined;
+      const dependencies = isReady(next, todo) ? "" : ` Still waiting on ${unmetDependencies(next, todo).map((id) => `#${id}`).join(", ")}.`;
+      return { state: next, message: `Unblocked #${todo.id}: ${todo.content} (${previous} → pending).${dependencies}` };
+    }
+    case "abandon": {
+      const todo = requireTodo(next, mutation.id);
+      if (todo.status === "abandoned") return { state: next, message: `#${todo.id} was already abandoned.` };
+      const previous = todo.status;
+      todo.status = "abandoned";
+      return { state: next, message: `Abandoned #${todo.id}: ${todo.content} (${previous} → abandoned).` };
+    }
+    case "delete": {
+      const todo = requireTodo(next, mutation.id);
+      next.todos = next.todos.filter((item) => item.id !== todo.id);
+      for (const item of next.todos) {
+        if (item.blockedBy) item.blockedBy = item.blockedBy.filter((id) => id !== todo.id);
+      }
+      return { state: next, message: `Deleted #${todo.id}` };
+    }
+    case "clear": {
+      const count = next.todos.length;
+      next.todos = [];
+      next.nextId = 1;
+      return { state: next, message: `Cleared ${count} todo(s)` };
+    }
+    default:
+      throw new Error(`Unknown todo action: ${String(mutation.action)}`);
+  }
+}
+
+/** A todo is dependency-ready when every dependency it lists is completed. */
+export function isReady(state: TodoState, todo: TodoItem): boolean {
+  return unmetDependencies(state, todo).length === 0;
+}
+
+function unmetDependencies(state: TodoState, todo: TodoItem): number[] {
+  return (todo.blockedBy ?? []).filter(
+    (id) => state.todos.find((item) => item.id === id)?.status !== "completed",
+  );
+}
+
+/** Moving work in progress is atomic: the previous active item returns to pending. */
+function ensureSingleInProgress(state: TodoState, selected: TodoItem): TodoItem[] {
+  if (selected.status !== "in_progress") return [];
+  const moved = state.todos.filter((todo) => todo.id !== selected.id && todo.status === "in_progress");
+  for (const todo of moved) todo.status = "pending";
+  return moved;
+}
+
+function transitionNote(moved: TodoItem[]): string {
+  return moved.length > 0 ? ` Moved ${moved.map((todo) => `#${todo.id}`).join(", ")} back to pending.` : "";
+}
+
+function newlyDependencyReady(state: TodoState, completedId: number): TodoItem[] {
+  return state.todos.filter(
+    (item) => item.status !== "completed" && item.status !== "abandoned" && item.blockedBy?.includes(completedId) && isReady(state, item),
+  );
+}
+
+function unblockedNote(todos: TodoItem[]): string {
+  const ready = todos.filter((todo) => todo.status !== "blocked");
+  const explicitlyBlocked = todos.filter((todo) => todo.status === "blocked");
+  const parts: string[] = [];
+  if (ready.length > 0) parts.push(`Unblocked: ${ready.map((item) => `#${item.id}`).join(", ")} (dependencies complete).`);
+  if (explicitlyBlocked.length > 0) {
+    parts.push(`Dependencies complete for ${explicitlyBlocked.map((item) => `#${item.id}`).join(", ")}; explicit blocker remains.`);
+  }
+  return parts.length > 0 ? ` ${parts.join(" ")}` : "";
+}
+
+/** Non-fatal advice appended to a mutation message so the model self-corrects. */
+function warnings(state: TodoState, todo: TodoItem): string {
+  if (todo.status !== "in_progress" || isReady(state, todo)) return "";
+  return ` (Warning: still blocked by ${unmetDependencies(state, todo).map((id) => `#${id}`).join(", ")}.)`;
+}
+
+export function formatTodos(todos: TodoItem[]): string {
+  if (todos.length === 0) return "No todos.";
+  const done = todos.filter((t) => t.status === "completed").length;
+  const state: TodoState = { todos, nextId: 0 };
+  const lines = [`Todos (${done}/${todos.length} completed)`];
+  for (const todo of todos) {
+    const mark = todo.status === "completed" ? "x" : todo.status === "in_progress" ? "~" : todo.status === "abandoned" ? "-" : todo.status === "blocked" ? "!" : " ";
+    const dependencies = todo.blockedBy?.length
+      ? ` ${isReady(state, todo) ? "was-blocked-by" : "blocked-by"}=${todo.blockedBy.join(",")}`
+      : "";
+    const phase = todo.phase ? ` phase=${todo.phase}` : "";
+    const blocker = todo.blocker ? ` blocker=${todo.blocker}` : "";
+    lines.push(`[${mark}] #${todo.id} ${todo.content} (${todo.status}${dependencies}${phase}${blocker})`);
+  }
+  return lines.join("\n");
+}
+
+function requireTodo(state: TodoState, id?: number): TodoItem {
+  if (id === undefined) throw new Error("id is required");
+  const todo = state.todos.find((item) => item.id === id);
+  if (!todo) throw new Error(`Todo #${id} not found`);
+  return todo;
+}
+
+function cleanOptional(value: string | undefined): string | undefined {
+  const cleaned = value?.trim();
+  return cleaned || undefined;
+}
+
+function assertStatus(status: string): asserts status is TodoStatus {
+  if (!STATUSES.has(status as TodoStatus)) throw new Error(`Invalid todo status: ${status}`);
+}
+
+function normalizeBlockedBy(blockedBy: number[] | undefined, todos: TodoItem[], selfId?: number): number[] | undefined {
+  if (!blockedBy || blockedBy.length === 0) return undefined;
+  const ids = [...new Set(blockedBy)];
+  for (const id of ids) {
+    if (!Number.isInteger(id) || id <= 0) throw new Error("blockedBy ids must be positive integers");
+    if (selfId !== undefined && id === selfId) throw new Error("A todo cannot block itself");
+    if (!todos.some((todo) => todo.id === id)) throw new Error(`blockedBy references missing todo #${id}`);
+  }
+  if (selfId !== undefined) {
+    assertNoCycles(todos.map((todo) => (todo.id === selfId ? { ...todo, blockedBy: ids } : todo)));
+  }
+  return ids;
+}
+
+/** Validate and clone a complete snapshot before any state is replaced. */
+export function validateSnapshot(todos: TodoItem[] | undefined): TodoItem[] {
+  if (!Array.isArray(todos)) throw new Error("todos is required for sync");
+  if (todos.length > MAX_TODOS) throw new Error(`Todo snapshot exceeds the ${MAX_TODOS} total todo limit.`);
+
+  const ids = new Set<number>();
+  let active = 0;
+  const cloned = todos.map((todo, index): TodoItem => {
+    if (!todo || !Number.isInteger(todo.id) || todo.id <= 0) throw new Error(`Todo ${index + 1} id must be a positive integer`);
+    if (ids.has(todo.id)) throw new Error(`Duplicate todo id #${todo.id}`);
+    ids.add(todo.id);
+    const content = typeof todo.content === "string" ? todo.content.trim() : "";
+    if (!content) throw new Error(`Todo #${todo.id} content cannot be empty`);
+    assertStatus(todo.status);
+    if (todo.status === "in_progress" && ++active > 1) throw new Error("Only one todo may be in_progress");
+    if (todo.phase !== undefined && typeof todo.phase !== "string") throw new Error(`Todo #${todo.id} phase must be a string`);
+    if (todo.blocker !== undefined && typeof todo.blocker !== "string") throw new Error(`Todo #${todo.id} blocker must be a string`);
+    if (todo.blockedBy !== undefined && !Array.isArray(todo.blockedBy)) throw new Error(`Todo #${todo.id} blockedBy must be an array`);
+    return {
+      id: todo.id,
+      content,
+      status: todo.status,
+      blockedBy: todo.blockedBy?.length ? [...new Set(todo.blockedBy)] : undefined,
+      phase: cleanOptional(todo.phase),
+      blocker: cleanOptional(todo.blocker),
+    };
+  });
+
+  for (const todo of cloned) todo.blockedBy = normalizeBlockedBy(todo.blockedBy, cloned, todo.id);
+  assertNoCycles(cloned);
+  return cloned;
+}
+
+export function assertNoCycles(todos: TodoItem[]): void {
+  const byId = new Map(todos.map((todo) => [todo.id, todo]));
+  const visiting = new Set<number>();
+  const visited = new Set<number>();
+
+  const visit = (id: number): void => {
+    if (visited.has(id)) return;
+    if (visiting.has(id)) throw new Error("blockedBy contains a cycle");
+    visiting.add(id);
+    const todo = byId.get(id);
+    for (const dep of todo?.blockedBy ?? []) visit(dep);
+    visiting.delete(id);
+    visited.add(id);
+  };
+
+  for (const todo of todos) visit(todo.id);
+}

package/src/ui/render.ts

@@ -0,0 +1,215 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Text } from "@earendil-works/pi-tui";
+
+/**
+ * Shared vocabulary for every pi-essentials surface.
+ *
+ * The house style is one compact line per tool row: a bold tool name, the
+ * subject it acted on, then dimmed metadata. Detail is available on demand
+ * through the expand key rather than printed by default.
+ */
+
+export const GLYPH = {
+  ok: "✓",
+  fail: "✗",
+  pending: "○",
+  running: "▶",
+  done: "✓",
+  bullet: "•",
+  arrow: "→",
+  sep: "·",
+} as const;
+
+/** Braille spinner frames, matched to the rhythm of pi's own working indicator. */
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function spinnerFrame(startedAt: number, now = Date.now()): string {
+  return SPINNER[Math.floor((now - startedAt) / 80) % SPINNER.length];
+}
+
+export function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return "0s";
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60_000);
+  const seconds = Math.round((ms % 60_000) / 1000);
+  return `${minutes}m${String(seconds).padStart(2, "0")}s`;
+}
+
+export function formatCount(value: number): string {
+  if (!Number.isFinite(value)) return "0";
+  if (Math.abs(value) < 1000) return String(Math.round(value));
+  if (Math.abs(value) < 1_000_000) return `${(value / 1000).toFixed(1)}k`;
+  return `${(value / 1_000_000).toFixed(1)}M`;
+}
+
+export function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** Collapse whitespace and hard-truncate for single-line previews. */
+export function oneLine(text: string, max = 72): string {
+  const flat = String(text ?? "").replace(/\s+/g, " ").trim();
+  if (flat.length <= max) return flat;
+  return `${flat.slice(0, Math.max(1, max - 1))}…`;
+}
+
+/** Shorten a URL to the part a reader actually scans. */
+export function shortUrl(raw: string, max = 56): string {
+  try {
+    const url = new URL(raw);
+    const tail = `${url.pathname}${url.search}`.replace(/\/$/, "");
+    return oneLine(`${url.host}${tail}`, max);
+  } catch {
+    return oneLine(raw, max);
+  }
+}
+
+export function titleLine(theme: Theme, tool: string, subject?: string): string {
+  let line = theme.fg("toolTitle", theme.bold(tool));
+  if (subject) line += ` ${theme.fg("text", oneLine(subject, 64))}`;
+  return line;
+}
+
+/** Dimmed `a · b · c` metadata tail. */
+export function meta(theme: Theme, parts: Array<string | undefined | false>): string {
+  const kept = parts.filter((part): part is string => Boolean(part && part.length > 0));
+  if (kept.length === 0) return "";
+  return theme.fg("dim", ` ${GLYPH.sep} ${kept.join(` ${GLYPH.sep} `)}`);
+}
+
+export function okLine(theme: Theme, text: string): string {
+  return `${theme.fg("success", GLYPH.ok)} ${text}`;
+}
+
+export function failLine(theme: Theme, text: string): string {
+  return `${theme.fg("error", GLYPH.fail)} ${theme.fg("error", text)}`;
+}
+
+/** "Ctrl+O to expand" using whatever the user actually bound. */
+export function expandHint(theme: Theme, hidden: number, noun = "line"): string {
+  if (hidden <= 0) return "";
+  const label = hidden === 1 ? noun : `${noun}s`;
+  return theme.fg("dim", `\n  +${hidden} more ${label} ${GLYPH.sep} ${safeKeyHint("app.tools.expand", "to expand")}`);
+}
+
+/**
+ * Default keys for the hints we print. Pi exposes `keyHint()` to resolve a
+ * user's actual binding, but only from the package root, whose module graph
+ * pulls an undeclared optional dependency and throws on import. Static defaults
+ * keep the renderers dependency-free; `keyHints` below lets a caller override.
+ */
+const DEFAULT_KEYS: Record<string, string> = {
+  "app.tools.expand": "ctrl+o",
+};
+
+const keyOverrides = new Map<string, string>();
+
+/** Point a hint id at the user's real binding, when something knows it. */
+export function setKeyHint(id: string, key: string): void {
+  keyOverrides.set(id, key);
+}
+
+export function safeKeyHint(id: string, description: string): string {
+  const key = keyOverrides.get(id) ?? DEFAULT_KEYS[id];
+  return key ? `${key} ${description}` : description;
+}
+
+export interface IndentedOptions {
+  /** Maximum entries to show before summarizing the remainder. */
+  limit: number;
+  indent?: string;
+  /** What the hidden entries are called, e.g. "result", "tool". */
+  noun?: string;
+}
+
+/** Render body lines under a header, capped unless expanded. */
+export function body(theme: Theme, lines: string[], expanded: boolean, options: IndentedOptions): string {
+  const indent = options.indent ?? "  ";
+  const kept = expanded ? lines : lines.slice(0, options.limit);
+  let out = kept.map((line) => `\n${indent}${line}`).join("");
+  const hidden = lines.length - kept.length;
+  if (hidden > 0) out += expandHint(theme, hidden, options.noun);
+  return out;
+}
+
+/** "1 turn" / "2 turns" without a separate plural table. */
+export function plural(count: number, noun: string, suffix = "s"): string {
+  return `${count} ${noun}${count === 1 ? "" : suffix}`;
+}
+
+/**
+ * Money at a readable precision. Subagent runs routinely cost fractions of a
+ * cent, so two decimals would round most of them to `$0.00`.
+ */
+export function formatCost(cost: number): string | undefined {
+  if (!Number.isFinite(cost) || cost <= 0) return undefined;
+  if (cost < 0.01) return `$${Number(cost.toPrecision(2))}`;
+  if (cost < 1) return `$${cost.toFixed(3)}`;
+  return `$${cost.toFixed(2)}`;
+}
+
+/**
+ * Structural view of a tool result for renderers. Kept loose so it accepts
+ * `AgentToolResult<D>` without importing the agent-core types directly.
+ */
+export interface RenderableResult<D> {
+  content: readonly unknown[];
+  details?: D;
+}
+
+/** Context slice the renderers actually use. */
+export interface RenderSlot {
+  lastComponent?: unknown;
+  isError?: boolean;
+}
+
+/** First text block of a tool result, ignoring images and other content types. */
+export function firstText(result: { content?: readonly unknown[] } | undefined): string {
+  for (const part of result?.content ?? []) {
+    if (part && typeof part === "object") {
+      const record = part as { type?: unknown; text?: unknown };
+      if (record.type === "text" && typeof record.text === "string") return record.text;
+    }
+  }
+  return "";
+}
+
+/** Reuse the previous Text instance so the TUI can diff in place. */
+export function textRow(context: { lastComponent?: unknown }, content: string): Text {
+  const existing = context.lastComponent;
+  if (existing instanceof Text) {
+    existing.setText(content);
+    return existing;
+  }
+  return new Text(content, 0, 0);
+}
+
+/**
+ * Wrap a renderer so a formatting mistake degrades to plain text instead of
+ * breaking the transcript.
+ */
+export function safeRender(build: () => string, fallback: string, context: { lastComponent?: unknown }): Text {
+  try {
+    return textRow(context, build());
+  } catch {
+    return textRow(context, fallback);
+  }
+}
+
+/** Horizontal rule used as a widget heading, e.g. `── Todos ── 2/7 ──────`. */
+export function headingRule(theme: Theme, label: string, width = 46): string {
+  const text = ` ${label} `;
+  const fill = Math.max(0, width - text.length - 2);
+  return theme.fg("borderMuted", "──") + theme.fg("muted", text) + theme.fg("borderMuted", "─".repeat(fill));
+}
+
+/** Compact progress meter: `▪▪▪▪▫▫▫`. */
+export function progressBar(theme: Theme, done: number, total: number, width = 10): string {
+  if (total <= 0) return "";
+  const filled = Math.max(0, Math.min(width, Math.round((done / total) * width)));
+  return theme.fg("success", "▪".repeat(filled)) + theme.fg("dim", "▫".repeat(width - filled));
+}

package/src/web/activity.ts

@@ -0,0 +1,91 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { formatCount, formatDuration, GLYPH, headingRule, oneLine, safeKeyHint, shortUrl } from "../ui/render.ts";
+
+export interface ActivityEntry {
+  kind: "search" | "fetch";
+  subject: string;
+  detail?: string;
+  ms: number;
+  ok: boolean;
+}
+
+/** Entries kept for the activity panel. Old rows scroll off the bottom. */
+const MAX_ENTRIES = 20;
+
+/**
+ * A short history of what the web tools actually did. Without it a fetch that
+ * silently fell back to a different provider, or took eight seconds, leaves no
+ * trace in the transcript.
+ */
+export class ActivityLog {
+  private readonly entries: ActivityEntry[] = [];
+
+  add(entry: ActivityEntry): void {
+    this.entries.unshift(entry);
+    if (this.entries.length > MAX_ENTRIES) this.entries.length = MAX_ENTRIES;
+  }
+
+  clear(): void {
+    this.entries.length = 0;
+  }
+
+  get size(): number {
+    return this.entries.length;
+  }
+
+  recent(limit: number): ActivityEntry[] {
+    return this.entries.slice(0, Math.max(0, limit));
+  }
+
+  /** Start a timer that records the outcome either way. */
+  track<T>(kind: ActivityEntry["kind"], subject: string, run: () => Promise<T>, describe: (value: T) => string): Promise<T> {
+    const startedAt = Date.now();
+    return run().then(
+      (value) => {
+        this.add({ kind, subject, detail: describe(value), ms: Date.now() - startedAt, ok: true });
+        return value;
+      },
+      (error: unknown) => {
+        const message = error instanceof Error ? error.message : String(error);
+        this.add({ kind, subject, detail: oneLine(message, 40), ms: Date.now() - startedAt, ok: false });
+        throw error;
+      },
+    );
+  }
+}
+
+export function searchDetail(result: { hits: unknown[] }): string {
+  return `${result.hits.length} hits`;
+}
+
+export function fetchDetail(page: { totalChars: number }): string {
+  return `${formatCount(page.totalChars)} chars`;
+}
+
+export interface ActivityWidgetOptions {
+  collapsed: boolean;
+  maxRows: number;
+}
+
+export function activityWidget(theme: Theme, log: ActivityLog, options: ActivityWidgetOptions): string[] {
+  if (log.size === 0) return [];
+  const heading = headingRule(theme, "Web activity") + theme.fg("dim", ` ${log.size} recent`);
+  if (options.collapsed) {
+    return [`${heading}  ${theme.fg("dim", `${GLYPH.sep} ${safeKeyHint("app.tools.expand", "expand")}`)}`];
+  }
+
+  const rows = log.recent(Math.max(1, options.maxRows)).map((entry) => {
+    const verb = entry.kind === "search" ? "SEARCH" : "FETCH ";
+    const subject = entry.kind === "fetch" ? shortUrl(entry.subject, 34) : `"${oneLine(entry.subject, 32)}"`;
+    return (
+      `  ${theme.fg("muted", verb)} ${theme.fg("text", subject.padEnd(36))}` +
+      theme.fg("dim", `${(entry.detail ?? "").padEnd(20)}${formatDuration(entry.ms).padStart(7)} `) +
+      theme.fg(entry.ok ? "success" : "error", entry.ok ? GLYPH.ok : GLYPH.fail)
+    );
+  });
+
+  const hidden = log.size - rows.length;
+  const lines = [heading, ...rows];
+  if (hidden > 0) lines.push(theme.fg("dim", `  +${hidden} older`));
+  return lines;
+}