@tangle-network/ui 11.30.1 → 11.31.0

package/src/run/approval-card.tsx

@@ -0,0 +1,146 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { Check, ChevronRight, Circle, FileMinus, FilePen, FilePlus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface ApprovalDiffFile {
+  path: string;
+  change?: "added" | "modified" | "deleted";
+  /** Unknown counts render as a dash rather than a guessed zero. */
+  additions?: number;
+  deletions?: number;
+}
+
+export interface ApprovalPlanStep {
+  label: ReactNode;
+  state: "done" | "current" | "upcoming";
+}
+
+export interface ApprovalCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** What the action does, in plain words. */
+  title: ReactNode;
+  /** Where it acts, such as "GitHub · owner/repo". */
+  context?: ReactNode;
+  /** This action's place in a declared plan. */
+  step?: { index: number; total: number };
+  /** The plan's steps, when the action belongs to one. */
+  plan?: readonly ApprovalPlanStep[];
+  /** Files the action writes, with line counts when known. */
+  diff?: readonly ApprovalDiffFile[];
+  /** Shown while line counts are being read. */
+  diffNote?: ReactNode;
+  /** The raw request, behind a Details toggle. */
+  details?: ReactNode;
+  status?: ReactNode;
+  actions?: ReactNode;
+}
+
+const CHANGE_ICON = { added: FilePlus, modified: FilePen, deleted: FileMinus } as const;
+
+function count(value: number | undefined, sign: "+" | "−"): string {
+  return value === undefined ? `${sign}–` : `${sign}${value}`;
+}
+
+/** Files and +/− line counts for a write, with totals when every count is known. */
+export function ApprovalDiffSummary({ files, note }: { files: readonly ApprovalDiffFile[]; note?: ReactNode }) {
+  const known = files.every((file) => file.additions !== undefined && file.deletions !== undefined);
+  const additions = files.reduce((sum, file) => sum + (file.additions ?? 0), 0);
+  const deletions = files.reduce((sum, file) => sum + (file.deletions ?? 0), 0);
+  return (
+    <div className="rounded-lg border border-border">
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2 text-sm">
+        <span className="font-medium text-foreground">{files.length === 1 ? "1 file" : `${files.length} files`}</span>
+        {known
+          ? (
+              <span className="tabular-nums">
+                <span className="text-[var(--surface-success-text)]">+{additions}</span>{" "}
+                <span className="text-[var(--surface-danger-text)]">−{deletions}</span>
+              </span>
+            )
+          : note && <span className="text-muted-foreground">{note}</span>}
+      </div>
+      <ul className="divide-y divide-border/70">
+        {files.map((file) => {
+          const Icon = CHANGE_ICON[file.change ?? "modified"];
+          return (
+            <li key={file.path} className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
+              <span className="flex min-w-0 items-center gap-2">
+                <Icon aria-hidden className="size-4 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 truncate font-mono text-foreground" title={file.path}>{file.path}</span>
+              </span>
+              <span className="shrink-0 tabular-nums">
+                <span className="text-[var(--surface-success-text)]">{count(file.additions, "+")}</span>{" "}
+                <span className="text-[var(--surface-danger-text)]">{count(file.deletions, "−")}</span>
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function PlanMarker({ state }: { state: ApprovalPlanStep["state"] }) {
+  if (state === "done") return <Check aria-hidden className="size-4 shrink-0 text-[var(--surface-success-text)]" />;
+  if (state === "current") return <ChevronRight aria-hidden className="size-4 shrink-0 text-foreground" />;
+  return <Circle aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />;
+}
+
+/**
+ * A request for a person to approve one action: what it does in plain words,
+ * where, its step in a plan, the files it writes, and the raw request behind
+ * a Details toggle. The caller owns the decision and supplies the actions.
+ */
+export function ApprovalCard({
+  title, context, step, plan, diff, diffNote, details, status, actions, className, ...props
+}: ApprovalCardProps) {
+  return (
+    <section
+      role="group"
+      aria-label="Approval request"
+      {...props}
+      className={cn("space-y-3 rounded-xl border border-border bg-card p-4 shadow-sm", className)}
+    >
+      <div className="space-y-1">
+        {(step || context) && (
+          <p className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+            {step && (
+              <span className="rounded-md bg-muted px-2 py-0.5 font-medium text-foreground">
+                Step {step.index} of {step.total}
+              </span>
+            )}
+            {context && <span className="min-w-0 truncate">{context}</span>}
+          </p>
+        )}
+        <h3 className="text-base font-semibold leading-6 text-foreground">{title}</h3>
+      </div>
+      {plan && plan.length > 0 && (
+        <ol className="space-y-1.5" aria-label="Plan">
+          {plan.map((item, index) => (
+            <li
+              key={index}
+              aria-current={item.state === "current" ? "step" : undefined}
+              className={cn(
+                "flex items-start gap-2 text-sm leading-6",
+                item.state === "current" ? "font-medium text-foreground" : "text-muted-foreground",
+              )}
+            >
+              <span className="mt-1"><PlanMarker state={item.state} /></span>
+              <span className="min-w-0">{item.label}</span>
+            </li>
+          ))}
+        </ol>
+      )}
+      {diff && diff.length > 0 && <ApprovalDiffSummary files={diff} note={diffNote} />}
+      {details !== undefined && (
+        <details className="group text-sm">
+          <summary className="cursor-pointer select-none font-medium text-muted-foreground hover:text-foreground">
+            Details
+          </summary>
+          <div className="mt-2">{details}</div>
+        </details>
+      )}
+      {status}
+      {actions && <div className="flex flex-wrap gap-2">{actions}</div>}
+    </section>
+  );
+}

package/src/run/index.ts

@@ -20,3 +20,20 @@ export { LiveDuration } from "./run-item-primitives";
 // because ToolCallData references it.
 export { type ToolCallType, type ToolCallStatus } from "./tool-call-step";
 export { ToolCallFeed, parseToolEvent, type ToolCallFeedProps, type ToolCallData, type FeedSegment } from "./tool-call-feed";
+export {
+  TaskList,
+  taskProgress,
+  taskStatus,
+  showsTaskPriority,
+  type TaskListItem,
+  type TaskListProps,
+  type TaskStatus,
+} from "./task-list";
+export {
+  ApprovalCard,
+  ApprovalDiffSummary,
+  type ApprovalCardProps,
+  type ApprovalDiffFile,
+  type ApprovalPlanStep,
+} from "./approval-card";
+export { RunPhaseList, type RunPhase } from "./run-phase-list";

package/src/run/run-phase-list.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { RunPhaseList } from "./run-phase-list";
+
+afterEach(cleanup);
+
+describe("RunPhaseList", () => {
+  it("collapses each phase to one summarizing line and expands its steps", () => {
+    render(
+      <RunPhaseList
+        phases={[
+          { id: "a", title: "Find the hero source", summary: "Read 12 files · searched 3 times", content: <p>step detail</p> },
+          { id: "b", title: "Open a draft PR", summary: "4 GitHub calls", status: "error", content: <p>pr detail</p> },
+        ]}
+      />,
+    );
+    const first = screen.getByRole("button", { name: /Find the hero source/ });
+    expect(first.textContent).toContain("Read 12 files · searched 3 times");
+    expect(first.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByText("step detail")).toBeNull();
+    fireEvent.click(first);
+    expect(screen.getByText("step detail")).toBeInTheDocument();
+    expect(screen.getByLabelText("Had an error")).toBeInTheDocument();
+  });
+});

package/src/run/run-phase-list.tsx

@@ -0,0 +1,56 @@
+import { useState, type ReactNode } from "react";
+import { ChevronRight, CircleAlert, Loader2 } from "lucide-react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+export interface RunPhase {
+  id: string;
+  /** The step or phase the work belongs to. */
+  title: ReactNode;
+  /** One line on what happened, such as "Read 12 files · ran 3 commands". */
+  summary?: ReactNode;
+  status?: "running" | "done" | "error";
+  /** The phase's individual steps, shown when expanded. */
+  content: ReactNode;
+}
+
+function PhaseRow({ phase }: { phase: RunPhase }) {
+  const [open, setOpen] = useState(false);
+  const id = `run-phase-${phase.id}`;
+  return (
+    <li>
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "flex w-full items-start gap-2 rounded-md py-1 text-left text-sm transition-colors hover:text-foreground",
+          focusRing,
+        )}
+      >
+        <ChevronRight
+          aria-hidden
+          className={cn("mt-1 size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")}
+        />
+        <span className="min-w-0 flex-1 leading-6">
+          <span className="font-medium text-foreground">{phase.title}</span>
+          {phase.summary && <span className="text-muted-foreground"> · {phase.summary}</span>}
+        </span>
+        {phase.status === "running" && <Loader2 aria-label="Running" className="mt-1 size-4 shrink-0 animate-spin text-muted-foreground" />}
+        {phase.status === "error" && <CircleAlert aria-label="Had an error" className="mt-1 size-4 shrink-0 text-[var(--surface-danger-text)]" />}
+      </button>
+      {open && <div id={id} className="mb-2 ml-6 mt-1">{phase.content}</div>}
+    </li>
+  );
+}
+
+/** A turn's tool runs grouped by step, each collapsed to one summarizing line. */
+export function RunPhaseList({ phases, className }: { phases: readonly RunPhase[]; className?: string }) {
+  if (phases.length === 0) return null;
+  return (
+    <ul className={cn("space-y-0.5", className)} aria-label="Tool runs">
+      {phases.map((phase) => <PhaseRow key={phase.id} phase={phase} />)}
+    </ul>
+  );
+}

package/src/run/task-list.test.tsx

@@ -0,0 +1,35 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { TaskList, showsTaskPriority, taskProgress } from "./task-list";
+
+afterEach(cleanup);
+
+const items = [
+  { id: "1", title: "Find the hero source", status: "completed", priority: "high" },
+  { id: "2", title: "Prepare the smallest edit", status: "in_progress", priority: "high" },
+  { id: "3", title: "Open a draft PR", status: "pending", priority: "high" },
+];
+
+describe("TaskList", () => {
+  it("names progress in the header and each state as a pill", () => {
+    render(<TaskList items={items} />);
+    expect(screen.getByRole("heading", { name: "Tasks" })).toBeInTheDocument();
+    expect(screen.getByText("1 of 3 done")).toBeInTheDocument();
+    expect(screen.getByText("Done")).toBeInTheDocument();
+    expect(screen.getByText("In progress")).toBeInTheDocument();
+    expect(screen.getByText("To do")).toBeInTheDocument();
+  });
+
+  it("hides priority when every task shares it and shows it when they differ", () => {
+    const { rerender } = render(<TaskList items={items} />);
+    expect(screen.queryByText("High")).toBeNull();
+    rerender(<TaskList items={[...items.slice(0, 2), { ...items[2], priority: "low" }]} />);
+    expect(screen.getAllByText("High")).toHaveLength(2);
+    expect(screen.getByText("Low")).toBeInTheDocument();
+  });
+
+  it("leaves cancelled tasks out of the done count", () => {
+    expect(taskProgress([...items, { id: "4", title: "Skip", status: "cancelled" }])).toEqual({ done: 1, total: 3 });
+    expect(showsTaskPriority([{ id: "a", title: "a", status: "pending" }])).toBe(false);
+  });
+});

package/src/run/task-list.tsx

@@ -0,0 +1,117 @@
+import { type ReactNode } from "react";
+import { StatusPill, type StatusTone } from "../primitives/status-pill";
+import { cn } from "../lib/utils";
+
+/** The states an agent's working checklist reports; unknown values read as to-do. */
+export type TaskStatus = "pending" | "in_progress" | "completed" | "cancelled" | "blocked" | "failed";
+
+export interface TaskListItem {
+  id: string;
+  title: string;
+  status: TaskStatus | (string & {});
+  priority?: string;
+  description?: string;
+}
+
+export interface TaskListProps {
+  items: readonly TaskListItem[];
+  /** Header title; "Tasks" by default. */
+  title?: ReactNode;
+  /** Trailing header content, such as a run state. */
+  meta?: ReactNode;
+  className?: string;
+}
+
+const STATUS: Record<TaskStatus, { tone: StatusTone; label: string }> = {
+  pending: { tone: "neutral", label: "To do" },
+  in_progress: { tone: "running", label: "In progress" },
+  completed: { tone: "success", label: "Done" },
+  cancelled: { tone: "neutral", label: "Cancelled" },
+  blocked: { tone: "warning", label: "Blocked" },
+  failed: { tone: "danger", label: "Failed" },
+};
+
+const STATUS_ALIASES: Record<string, TaskStatus> = {
+  todo: "pending", open: "pending", in_progress: "in_progress", "in-progress": "in_progress",
+  active: "in_progress", running: "in_progress", done: "completed", complete: "completed",
+  completed: "completed", success: "completed", cancelled: "cancelled", canceled: "cancelled",
+  skipped: "cancelled", blocked: "blocked", failed: "failed", error: "failed",
+};
+
+export function taskStatus(status: string): TaskStatus {
+  const key = status.trim().toLowerCase();
+  return (STATUS as Record<string, unknown>)[key] ? key as TaskStatus : STATUS_ALIASES[key] ?? "pending";
+}
+
+/** Priority is worth a label only when the tasks disagree about it. */
+export function showsTaskPriority(items: readonly TaskListItem[]): boolean {
+  const priorities = new Set(items.map((item) => item.priority?.trim().toLowerCase()).filter(Boolean));
+  return priorities.size > 1;
+}
+
+/** "2 of 3 done": cancelled tasks leave the count rather than counting as done. */
+export function taskProgress(items: readonly TaskListItem[]): { done: number; total: number } {
+  const counted = items.filter((item) => taskStatus(item.status) !== "cancelled");
+  return { done: counted.filter((item) => taskStatus(item.status) === "completed").length, total: counted.length };
+}
+
+function capitalized(value: string): string {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+/**
+ * An agent's working checklist: a header with progress, each task's state as
+ * a toned pill, and priority shown only when the tasks differ in it.
+ */
+export function TaskList({ items, title = "Tasks", meta, className }: TaskListProps) {
+  const showPriority = showsTaskPriority(items);
+  const { done, total } = taskProgress(items);
+  return (
+    <section
+      aria-label={typeof title === "string" ? title : "Tasks"}
+      className={cn("rounded-xl border border-border bg-card p-4 shadow-sm", className)}
+    >
+      <header className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <div className="flex min-w-0 items-baseline gap-2">
+          <h3 className="text-base font-semibold text-foreground">{title}</h3>
+          {total > 0 && <span className="text-sm text-muted-foreground">{done} of {total} done</span>}
+        </div>
+        {meta}
+      </header>
+      {total > 0 && (
+        <div className="mb-3 h-1.5 overflow-hidden rounded-full bg-muted" aria-hidden="true">
+          <div
+            className="h-full rounded-full bg-[var(--surface-success-text)] transition-[width]"
+            style={{ width: `${Math.round((done / total) * 100)}%` }}
+          />
+        </div>
+      )}
+      <ol className="divide-y divide-border/70">
+        {items.map((item, index) => {
+          const status = STATUS[taskStatus(item.status)];
+          return (
+            <li key={`${item.id}-${index}`} className="flex items-start justify-between gap-3 py-2.5 first:pt-0 last:pb-0">
+              <div className="min-w-0 flex-1">
+                <p
+                  className={cn(
+                    "text-sm font-medium leading-6 text-foreground",
+                    taskStatus(item.status) === "cancelled" && "text-muted-foreground line-through",
+                  )}
+                >
+                  {item.title}
+                </p>
+                {item.description && <p className="mt-0.5 text-sm leading-6 text-muted-foreground">{item.description}</p>}
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                {showPriority && item.priority && (
+                  <span className="text-sm text-muted-foreground">{capitalized(item.priority.trim())}</span>
+                )}
+                <StatusPill tone={status.tone} size="md">{status.label}</StatusPill>
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}