@tangle-network/ui 11.30.2 → 11.31.0

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>
+  );
+}