@elabs-ai/components-ai 4.0.0

package/src/test-results.tsx

@@ -0,0 +1,408 @@
+"use client";
+
+import { StatusBadge, StatusIcon, type Status } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronRightIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+import { createContext, useContext, useMemo } from "react";
+
+type TestStatus = "passed" | "failed" | "skipped" | "running";
+
+/** Test status → the canonical 7-state vocabulary (#189, research 10 §B.1). */
+const testStatusToCanonical: Record<TestStatus, Status> = {
+  passed: "complete",
+  failed: "failed",
+  running: "running",
+  skipped: "skipped",
+};
+
+interface TestResultsSummary {
+  passed: number;
+  failed: number;
+  skipped: number;
+  total: number;
+  duration?: number;
+}
+
+interface TestResultsContextType {
+  summary?: TestResultsSummary;
+}
+
+const TestResultsContext = createContext<TestResultsContextType>({});
+
+const formatDuration = (ms: number) => {
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  return `${(ms / 1000).toFixed(2)}s`;
+};
+
+export type TestResultsHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const TestResultsHeader = ({ className, children, ...props }: TestResultsHeaderProps) => (
+  <div
+    className={cn("flex min-w-0 items-center justify-between border-b px-4 py-3", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type TestResultsDurationProps = HTMLAttributes<HTMLSpanElement>;
+
+export const TestResultsDuration = ({
+  className,
+  children,
+  ...props
+}: TestResultsDurationProps) => {
+  const { summary } = useContext(TestResultsContext);
+
+  if (!summary?.duration) {
+    return null;
+  }
+
+  return (
+    <span
+      className={cn("shrink-0 text-muted-foreground text-sm tabular-nums", className)}
+      {...props}
+    >
+      {children ?? formatDuration(summary.duration)}
+    </span>
+  );
+};
+
+export type TestResultsSummaryProps = HTMLAttributes<HTMLDivElement>;
+
+export const TestResultsSummary = ({ className, children, ...props }: TestResultsSummaryProps) => {
+  const { summary } = useContext(TestResultsContext);
+
+  if (!summary) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex items-center gap-2", className)} {...props}>
+      {children ?? (
+        <>
+          <StatusBadge size="sm" status="complete">
+            {summary.passed} passed
+          </StatusBadge>
+          {summary.failed > 0 && (
+            <StatusBadge size="sm" status="failed">
+              {summary.failed} failed
+            </StatusBadge>
+          )}
+          {summary.skipped > 0 && (
+            <StatusBadge size="sm" status="skipped">
+              {summary.skipped} skipped
+            </StatusBadge>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export type TestResultsProps = HTMLAttributes<HTMLDivElement> & {
+  summary?: TestResultsSummary;
+};
+
+export const TestResults = ({ summary, className, children, ...props }: TestResultsProps) => {
+  const contextValue = useMemo(() => ({ summary }), [summary]);
+
+  return (
+    <TestResultsContext.Provider value={contextValue}>
+      <div className={cn("overflow-hidden rounded-lg border bg-background", className)} {...props}>
+        {children ??
+          (summary && (
+            <TestResultsHeader>
+              <TestResultsSummary />
+              <TestResultsDuration />
+            </TestResultsHeader>
+          ))}
+      </div>
+    </TestResultsContext.Provider>
+  );
+};
+
+export type TestResultsProgressProps = HTMLAttributes<HTMLDivElement>;
+
+export const TestResultsProgress = ({
+  className,
+  children,
+  ...props
+}: TestResultsProgressProps) => {
+  const { summary } = useContext(TestResultsContext);
+
+  if (!summary) {
+    return null;
+  }
+
+  const passedPercent = (summary.passed / summary.total) * 100;
+  const failedPercent = (summary.failed / summary.total) * 100;
+
+  return (
+    <div className={cn("space-y-1.5", className)} {...props}>
+      {children ?? (
+        <>
+          <div className="flex h-1.5 overflow-hidden rounded-full bg-muted">
+            <div
+              className="bg-success transition-[width] duration-base ease-standard motion-reduce:transition-none"
+              style={{ width: `${passedPercent}%` }}
+            />
+            <div
+              className="bg-destructive transition-[width] duration-base ease-standard motion-reduce:transition-none"
+              style={{ width: `${failedPercent}%` }}
+            />
+          </div>
+          <div className="flex justify-between text-muted-foreground text-xs tabular-nums">
+            <span>
+              {summary.passed}/{summary.total} tests passed
+            </span>
+            <span>{passedPercent.toFixed(0)}%</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+/**
+ * TestResultsMeta — the summary badges + progress bar block that sits between
+ * the header and the suite list. Provides consistent `px-4 pt-3 pb-4` padding
+ * so callers do not need ad-hoc wrapper divs.
+ */
+export type TestResultsMetaProps = HTMLAttributes<HTMLDivElement>;
+
+export const TestResultsMeta = ({ className, children, ...props }: TestResultsMetaProps) => (
+  <div className={cn("space-y-3 px-4 pb-4 pt-3", className)} {...props}>
+    {children}
+  </div>
+);
+
+/**
+ * TestResultsContent — the suite list. Uses `divide-y` instead of `space-y`
+ * so suites are separated by a single structural divider, not nested boxes.
+ */
+export type TestResultsContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const TestResultsContent = ({ className, children, ...props }: TestResultsContentProps) => (
+  <div className={cn("divide-y", className)} {...props}>
+    {children}
+  </div>
+);
+
+interface TestSuiteContextType {
+  name: string;
+  status: TestStatus;
+}
+
+const TestSuiteContext = createContext<TestSuiteContextType>({
+  name: "",
+  status: "passed",
+});
+
+// The local status icon/color records were the 5th status idiom (#189);
+// re-pointed to the canonical `StatusIcon` vocabulary from @elabs-ai/components-ui.
+const TestStatusIcon = ({ status }: { status: TestStatus }) => (
+  <StatusIcon className="shrink-0" status={testStatusToCanonical[status]} />
+);
+
+export type TestSuiteProps = ComponentProps<typeof Collapsible> & {
+  name: string;
+  status: TestStatus;
+};
+
+/**
+ * TestSuite — one expandable file/suite row. Uses a quiet left rail
+ * (`border-s-2`) as the sole focal separation gesture inside the divider-
+ * separated list. No nested rounded box: that was redundant border-on-region
+ * with no fill change (separation grammar).
+ */
+export const TestSuite = ({ name, status, className, children, ...props }: TestSuiteProps) => {
+  const contextValue = useMemo(() => ({ name, status }), [name, status]);
+
+  return (
+    <TestSuiteContext.Provider value={contextValue}>
+      <Collapsible className={cn("group/suite", className)} {...props}>
+        {children}
+      </Collapsible>
+    </TestSuiteContext.Provider>
+  );
+};
+
+export type TestSuiteNameProps = ComponentProps<typeof CollapsibleTrigger>;
+
+export const TestSuiteName = ({ className, children, ...props }: TestSuiteNameProps) => {
+  const { name, status } = useContext(TestSuiteContext);
+
+  return (
+    <CollapsibleTrigger
+      className={cn(
+        "group flex w-full items-center gap-2 px-4 py-2.5 text-start transition-colors duration-fast ease-standard motion-reduce:transition-none hover:bg-muted/50",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-standard motion-reduce:transition-none group-data-[state=open]:rotate-90" />
+      <TestStatusIcon status={status} />
+      <span className="min-w-0 flex-1 truncate font-medium text-sm">{children ?? name}</span>
+    </CollapsibleTrigger>
+  );
+};
+
+export type TestSuiteStatsProps = HTMLAttributes<HTMLDivElement> & {
+  passed?: number;
+  failed?: number;
+  skipped?: number;
+};
+
+export const TestSuiteStats = ({
+  passed = 0,
+  failed = 0,
+  skipped = 0,
+  className,
+  children,
+  ...props
+}: TestSuiteStatsProps) => (
+  <div
+    className={cn("ms-auto flex shrink-0 items-center gap-3 text-xs tabular-nums", className)}
+    {...props}
+  >
+    {children ?? (
+      <>
+        {passed > 0 && <span className="text-success-text">{passed} passed</span>}
+        {failed > 0 && <span className="text-destructive-text">{failed} failed</span>}
+        {skipped > 0 && <span className="text-muted-foreground">{skipped} skipped</span>}
+      </>
+    )}
+  </div>
+);
+
+export type TestSuiteContentProps = ComponentProps<typeof CollapsibleContent>;
+
+/**
+ * TestSuiteContent — the rows inside an expanded suite. A left rail
+ * (`border-s-2 border-s-border ms-6`) indents the block under the suite
+ * trigger and separates it structurally without a box. Rows are divided by
+ * `divide-y`.
+ */
+export const TestSuiteContent = ({ className, children, ...props }: TestSuiteContentProps) => (
+  <CollapsibleContent className={cn("border-t", className)} {...props}>
+    <div className="divide-y">{children}</div>
+  </CollapsibleContent>
+);
+
+interface TestContextType {
+  name: string;
+  status: TestStatus;
+  duration?: number;
+}
+
+const TestContext = createContext<TestContextType>({
+  name: "",
+  status: "passed",
+});
+
+export type TestNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const TestName = ({ className, children, ...props }: TestNameProps) => {
+  const { name } = useContext(TestContext);
+
+  return (
+    <span className={cn("min-w-0 flex-1 truncate", className)} {...props}>
+      {children ?? name}
+    </span>
+  );
+};
+
+export type TestDurationProps = HTMLAttributes<HTMLSpanElement>;
+
+export const TestDuration = ({ className, children, ...props }: TestDurationProps) => {
+  const { duration } = useContext(TestContext);
+
+  if (duration === undefined) {
+    return null;
+  }
+
+  return (
+    <span
+      className={cn("shrink-0 text-muted-foreground text-xs tabular-nums", className)}
+      {...props}
+    >
+      {children ?? `${duration}ms`}
+    </span>
+  );
+};
+
+export type TestStatusProps = HTMLAttributes<HTMLSpanElement>;
+
+export const TestStatus = ({ className, children, ...props }: TestStatusProps) => {
+  const { status } = useContext(TestContext);
+
+  return (
+    <span className={cn("shrink-0", className)} {...props}>
+      {children ?? <StatusIcon status={testStatusToCanonical[status]} />}
+    </span>
+  );
+};
+
+export type TestProps = HTMLAttributes<HTMLDivElement> & {
+  name: string;
+  status: TestStatus;
+  duration?: number;
+};
+
+/**
+ * Test — a single test-case row. `ps-10` aligns the status icon with the
+ * suite's status icon (after the trigger's chevron + gap), giving a clean
+ * left-column across the expansion.
+ */
+export const Test = ({ name, status, duration, className, children, ...props }: TestProps) => {
+  const contextValue = useMemo(() => ({ duration, name, status }), [duration, name, status]);
+
+  return (
+    <TestContext.Provider value={contextValue}>
+      <div
+        className={cn("flex min-w-0 items-center gap-2 ps-10 pe-4 py-2 text-sm", className)}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <TestStatus />
+            <TestName />
+            {duration !== undefined && <TestDuration />}
+          </>
+        )}
+      </div>
+    </TestContext.Provider>
+  );
+};
+
+export type TestErrorProps = HTMLAttributes<HTMLDivElement>;
+
+export const TestError = ({ className, children, ...props }: TestErrorProps) => (
+  <div className={cn("rounded-md bg-destructive/10 p-3", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type TestErrorMessageProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const TestErrorMessage = ({ className, children, ...props }: TestErrorMessageProps) => (
+  <p className={cn("font-medium text-destructive-text text-sm", className)} {...props}>
+    {children}
+  </p>
+);
+
+export type TestErrorStackProps = HTMLAttributes<HTMLPreElement>;
+
+export const TestErrorStack = ({ className, children, ...props }: TestErrorStackProps) => (
+  <pre
+    className={cn("mt-2 overflow-auto font-mono text-destructive-text text-xs", className)}
+    {...props}
+  >
+    {children}
+  </pre>
+);

package/src/tool-result-card.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Maximize2 } from "lucide-react";
+import { Button, Dialog, DialogTrigger, ExpandDialog } from "@elabs-ai/components-ui";
+import { MessageTable } from "./message-table";
+import type { TableSpec } from "./message-table-spec";
+import { ToolDetails, ToolInput } from "./tool";
+import { ToolResultCard } from "./tool-result-card";
+
+const meta = {
+  title: "AI/ToolResultCard",
+  component: ToolResultCard,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ToolResultCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// The elevation channel (#192, research 10 §B.4): the produced artifact IS
+// the headline. The host is presentational — pass any node (an AutoChart,
+// DataTable, file preview, …) as children; here a plain token-styled table.
+export const Default: Story = {
+  render: () => (
+    <ToolResultCard
+      className="max-w-prose"
+      title="Revenue by region — Q3 vs Q2"
+      summary="Total $48.2M · +12.4% QoQ"
+      status="complete"
+      details={
+        <ToolDetails>
+          <ToolInput input={{ chart: "bar", x: "region", series: ["q2", "q3"] }} />
+        </ToolDetails>
+      }
+    >
+      <table className="w-full text-body tabular-nums">
+        <thead>
+          <tr className="border-b border-border-strong text-start text-meta text-muted-foreground">
+            <th className="py-1.5 text-start">Region</th>
+            <th className="py-1.5 text-end">Q2</th>
+            <th className="py-1.5 text-end">Q3</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="py-1.5">EMEA</td>
+            <td className="py-1.5 text-end">$16.1M</td>
+            <td className="py-1.5 text-end">$18.4M</td>
+          </tr>
+          <tr>
+            <td className="py-1.5">Americas</td>
+            <td className="py-1.5 text-end">$19.6M</td>
+            <td className="py-1.5 text-end">$21.2M</td>
+          </tr>
+          <tr>
+            <td className="py-1.5">APAC</td>
+            <td className="py-1.5 text-end">$7.2M</td>
+            <td className="py-1.5 text-end">$8.6M</td>
+          </tr>
+        </tbody>
+      </table>
+    </ToolResultCard>
+  ),
+};
+
+const invoicesSpec: TableSpec = {
+  columns: [
+    { key: "id", label: "Invoice" },
+    { key: "customer", label: "Customer" },
+    { key: "amount", label: "Amount", format: "currency" },
+    { key: "margin", label: "Margin", format: "percent" },
+    { key: "status", label: "Status", format: "badge" },
+  ],
+  rows: [
+    { id: "INV-1042", customer: "Acme", amount: 12400, margin: 0.32, status: "Paid" },
+    { id: "INV-1043", customer: "Globex", amount: 8800, margin: 0.21, status: "Pending" },
+    { id: "INV-1044", customer: "Initech", amount: 21500, margin: 0.44, status: "Overdue" },
+    { id: "INV-1045", customer: "Umbrella", amount: 3600, margin: 0.12, status: "Draft" },
+  ],
+};
+
+/**
+ * The whole point of the `actions` slot, and of `ExpandDialog` living in
+ * `@elabs-ai/components-ui`: a produced table expands through the
+ * SAME surface a produced chart does, so "make this bigger" means one thing
+ * across the whole chat. Never hand-roll a lightbox or an in-place breakout
+ * here — that is how a chat ends up teaching four different meanings for one
+ * button.
+ *
+ * Note what the context pane holds: the table's SHAPE (row count, columns and
+ * their declared formats), not min/max/avg. A model-emitted table's numerics
+ * may already be formatted strings, so statistics over them are wrong more
+ * often than right — a chart's `DefaultDetail` can compute them, this cannot.
+ */
+export const ExpandableTable: Story = {
+  render: () => (
+    <Dialog>
+      <ToolResultCard
+        className="max-w-prose"
+        title="Recent invoices"
+        summary="4 rows · billed in USD"
+        status="complete"
+        actions={
+          <DialogTrigger asChild>
+            <Button aria-label="Expand table" size="icon-sm" variant="ghost">
+              <Maximize2 aria-hidden="true" className="size-4" />
+            </Button>
+          </DialogTrigger>
+        }
+      >
+        <MessageTable spec={invoicesSpec} />
+      </ToolResultCard>
+      <ExpandDialog
+        title="Recent invoices"
+        detail={<TableShape spec={invoicesSpec} />}
+        detailLabel="Table shape"
+      >
+        <MessageTable spec={invoicesSpec} sortable />
+      </ExpandDialog>
+    </Dialog>
+  ),
+};
+
+/** The context pane for a table: what it IS, not what it averages. */
+function TableShape({ spec }: { spec: TableSpec }) {
+  return (
+    <div className="flex h-full flex-col gap-4 p-4">
+      <h3 className="text-subtitle text-card-foreground">Shape</h3>
+      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-meta">
+        <dt className="text-muted-foreground">Rows</dt>
+        <dd className="tabular-nums">{spec.rows.length}</dd>
+        <dt className="text-muted-foreground">Columns</dt>
+        <dd className="tabular-nums">{spec.columns.length}</dd>
+      </dl>
+      <div className="flex flex-col gap-1">
+        {spec.columns.map((column) => (
+          <div key={column.key} className="flex items-baseline justify-between gap-3 text-meta">
+            <span className="truncate">{column.label ?? column.key}</span>
+            <span className="shrink-0 text-muted-foreground">{column.format ?? "text"}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/tool-result-card.test.tsx

@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ToolResultCard } from "./tool-result-card";
+
+describe("ToolResultCard (#192, research 10 §B.4)", () => {
+  it("hosts the artifact as children on the elevation channel (fill + shadow, no border)", () => {
+    render(
+      <ToolResultCard
+        data-testid="card"
+        title="Revenue by region — Q3 vs Q2"
+        summary="Total $48.2M · +12.4% QoQ"
+        status="complete"
+      >
+        <div data-testid="artifact">chart</div>
+      </ToolResultCard>,
+    );
+    const card = screen.getByTestId("card");
+    expect(card.className).toContain("bg-surface-elevated");
+    expect(card.className).toContain("shadow-sm");
+    expect(card.className.split(" ")).not.toContain("border");
+    expect(screen.getByTestId("artifact")).toBeInTheDocument();
+    expect(screen.getByText("Revenue by region — Q3 vs Q2")).toBeInTheDocument();
+    expect(screen.getByText("Total $48.2M · +12.4% QoQ")).toBeInTheDocument();
+    expect(screen.getByText("Complete")).toBeInTheDocument(); // StatusBadge
+  });
+
+  it("renders the details slot, merges className and spreads props", () => {
+    render(
+      <ToolResultCard
+        data-testid="card"
+        className="custom-card"
+        aria-label="result"
+        details={<div data-testid="details">technical details</div>}
+      >
+        body
+      </ToolResultCard>,
+    );
+    const card = screen.getByTestId("card");
+    expect(card).toHaveClass("custom-card");
+    expect(card).toHaveAttribute("aria-label", "result");
+    expect(screen.getByTestId("details")).toBeInTheDocument();
+  });
+
+  /*
+   * The artifact's own chrome shares the title row — it never gets a second
+   * strip above the heading. A hover-revealed toolbar row costs a whole line of
+   * vertical space in a chat transcript and hides the controls until you find
+   * them.
+   */
+  it("puts artifact actions on the title row, between the title and the status", () => {
+    render(
+      <ToolResultCard
+        title="Recent invoices"
+        status="complete"
+        actions={<button type="button">Expand</button>}
+      >
+        body
+      </ToolResultCard>,
+    );
+    const row = screen.getByRole("heading", { name: "Recent invoices" }).parentElement!
+      .parentElement!;
+    const text = row.textContent ?? "";
+    expect(text.indexOf("Recent invoices")).toBeLessThan(text.indexOf("Expand"));
+    expect(text.indexOf("Expand")).toBeLessThan(text.indexOf("Complete"));
+  });
+
+  /* An actions-only card still gets its header — `hasHeader` must see the slot. */
+  it("renders the header for an actions-only card", () => {
+    render(<ToolResultCard actions={<button type="button">Download</button>}>body</ToolResultCard>);
+    expect(screen.getByRole("button", { name: "Download" })).toBeInTheDocument();
+  });
+});