+
+ + {section.title} +
+
+
No artifacts yet. Work products, documents, and agent-produced files will appear here.
; + } + return ( +
+
+
+ ))}
+
+ );
+}
diff --git a/ui/src/artifact-directions/directions/d1-solid/PanelCard.tsx b/ui/src/artifact-directions/directions/d1-solid/PanelCard.tsx
new file mode 100644
index 00000000000..0f29bb5855b
--- /dev/null
+++ b/ui/src/artifact-directions/directions/d1-solid/PanelCard.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { MessageSquare } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { LabArtifact } from "../../kit";
+import { actionName, externalProps } from "./actions";
+import { ExcerptSheet, hasExcerpt } from "./ExcerptSheet";
+import { hasThumbnail, isWaiting, plural } from "./kinds";
+import { KindBlock } from "./KindBlock";
+import { META_TEXT, MetaDot, MetaLine } from "./MetaLine";
+import { panelActions } from "./panel-actions";
+import { stampUnder, type PanelSection } from "./panel-model";
+import { PanelLead } from "./PanelLead";
+import { PanelMenu } from "./PanelMenu";
+import { StateMarker } from "./StateMarker";
+import { BUTTON, BUTTON_HOVER, COUNT_BUTTON, FOCUS, primaryRest, SLAB } from "./slab";
+
+/**
+ * PANEL — one artifact on the task's shelf: a thread row with its drawer open.
+ *
+ * [kind block 72×44] Title, wraps a picture leads its card instead:
+ * Summary, wraps ┌ picture 16:9, kind tab ┐
+ * kind · size · rev · extent └────────────────────────┘
+ * filename.ext / content type Title …
+ * ┌ sheet: the excerpt as text ───────────────────┐ (only for text kinds)
+ * └────────────────────────────────────────────────┘
+ * ● Review 11:07 AM [💬 0] [⋯] [Read document ⌄]
+ *
+ * The head is the thread row at the same size. The foot is ONE row with the
+ * same three places on every card: the state (or nothing); who and when in
+ * mono (the author only where the section does not name them; the time alone
+ * where the section carries the day; it breaks between the two when short of
+ * room, never inside either); and at the far end the comments count (Markdown
+ * files), "More actions" (where there are any) and the primary — the thread's
+ * 136px block, in ink when the artifact waits for review.
+ *
+ * This is the reading surface, so the card is NOT a click target: text can be
+ * selected, tooltips show, and nothing downloads from a stray click. Only the
+ * controls act.
+ *
+ * Nothing in the head is clamped: titles, summaries, filenames and content
+ * types wrap. Under 20rem of card (a pane dragged narrow) the foot's two ends
+ * stack.
+ */
+
+/** Kinds whose card is the product's file card, which carries the content type. */
+const FILE_KINDS = new Set
+
-
+ {section.items.map((artifact) => (
+
-
+
+
+ ))}
+
+ {leads ? null :
+
+ {/* What waits for review is given room to be read here; the rest shows enough to be told apart. */}
+ {hasExcerpt(artifact) ?
+
+ {artifact.title}
+ {artifact.summary ?{artifact.summary}
: null} +
+
+
+ {started ? null : (
+
+ )}
+
+ );
+}
+
+export function PanelLead({ artifact, onPictureError }: { artifact: LabArtifact; onPictureError: () => void }) {
+ if (artifact.kind === "video" && artifact.videoUrl) return
+
+ );
+}
diff --git a/ui/src/artifact-directions/directions/d1-solid/PanelMenu.tsx b/ui/src/artifact-directions/directions/d1-solid/PanelMenu.tsx
new file mode 100644
index 00000000000..6fe8df278b2
--- /dev/null
+++ b/ui/src/artifact-directions/directions/d1-solid/PanelMenu.tsx
@@ -0,0 +1,47 @@
+import { Ellipsis } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import type { LabArtifact } from "../../kit";
+import { externalProps, type SolidAction } from "./actions";
+import { ICON_BUTTON } from "./slab";
+
+/**
+ * PANEL — a card's "More actions": every way out that is not the primary, in
+ * one named control, so the foot is the same single row on every card. The
+ * list is the product's own menu (it opens in a portal, outside the kit's
+ * wrapper, in the app's popover chrome); each item is the action by name, not
+ * an unlabelled icon.
+ */
+export function PanelMenu({ actions, artifact }: { actions: SolidAction[]; artifact: LabArtifact }) {
+ if (actions.length === 0) return null;
+ return (
+
+
+ );
+}
+
+export function StackTile({ group }: { group: LabGroup }) {
+ const depth = pileDepth(group.count);
+ const count = plural(group.count, "artifact");
+ return (
+ // 28px above every face, so faces line up along a row whether or not a pile sits behind them.
+
+
+ {rest.map((artifact) => (
+
+
+ ))}
+ {more > 0 ?
+
+
+ {/* h2: on the stacks page a stack sits directly under the page title. */}
+
+ + {group.taskIdentifier} + {group.title} +
+ +
+
-
+ {ordered.map((artifact) => (
+
-
+
+
+ ))}
+
+
+ {artifact.title}
+
+
{artifact.summary}
: null} +
+ {action.href ? (
+
+ {face}
+
+ ) : (
+
+ )}
+
+
+ {lines.map((line, index) => (
+
: null}
+ {line.heading ? {line.text} : line.item ? <>– {line.text} : line.text}
+
+
+
+
+ {more.length > 0 ?
+ );
+}
+
+export function CodeLines({
+ artifact,
+ lines,
+ step,
+ className,
+}: {
+ artifact: LabArtifact;
+ lines: number;
+ /** Per-line classes, by index — a fixed-height sheet hides its last lines in a narrow unit instead of slicing one. */
+ step?: readonly string[];
+ className?: string;
+}) {
+ if (!artifact.excerpt) return null;
+ return (
+ | + {cell} + | + ))} +
|---|
| + {cell} + | + ))} +
{more.join(" · ")}
: null} +
+ {artifact.excerpt
+ .split("\n")
+ .slice(0, lines)
+ .map((line, index) => (
+
+ {line || " "}
+
+ ))}
+
+ );
+}
diff --git a/ui/src/artifact-directions/directions/d2-tint/FileName.tsx b/ui/src/artifact-directions/directions/d2-tint/FileName.tsx
new file mode 100644
index 00000000000..51f55071ae8
--- /dev/null
+++ b/ui/src/artifact-directions/directions/d2-tint/FileName.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * A filename is a machine value: monospace. When it does not fit, the stem
+ * truncates and the extension never does — two files that share a long stem
+ * (`acmehats-interface-craft.pptx` / `.pdf`) stay tellable apart.
+ *
+ * `mono={false}` is for a human title standing in where a file has no name.
+ */
+export function FileName({ name, mono = true, className }: { name: string; mono?: boolean; className?: string }) {
+ const dot = mono ? name.lastIndexOf(".") : -1;
+ const [stem, ext] = dot > 0 ? [name.slice(0, dot), name.slice(dot)] : [name, ""];
+ return (
+
+ {stem}
+ {ext ? {ext} : null}
+
+ );
+}
diff --git a/ui/src/artifact-directions/directions/d2-tint/GalleryPreview.tsx b/ui/src/artifact-directions/directions/d2-tint/GalleryPreview.tsx
new file mode 100644
index 00000000000..f85455df36e
--- /dev/null
+++ b/ui/src/artifact-directions/directions/d2-tint/GalleryPreview.tsx
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import type { LabArtifact } from "../../kit";
+import { CodeLines, ProseExcerpt, SheetTable } from "./Content";
+import { FileName } from "./FileName";
+import { FoldedPreview, FoldedSheet, KindWell } from "./Lead";
+import { hasTextPreview, headlineFact, linkLabel } from "./kinds";
+
+/**
+ * GALLERY — the preview of one artifact, the largest object a tile has, by
+ * the one rule (Lead.tsx). Never an empty box:
+ *
+ * picture image, video poster, link screenshot — fold lg, extension tab,
+ * play mark and duration on a video
+ * sheet document, Markdown, sheet, code — its own text at full width on
+ * a neutral sheet in the same frame (fold lg, tab). Clamped to
+ * whole lines for the tile's width, so nothing is sliced.
+ * named PDF, slides, archive, generic file, or a picture that failed —
+ * the lg glyph on its kind well with what is known beside it: the
+ * countable fact as a headline ("12 slides", else the size), what
+ * the agent said is inside, and the filename. This replaces
+ * today's empty box that says FILE.
+ *
+ * The box is 16:9 and the tile is its `@container`. `depth="short"` is the
+ * shallower box of a single-artifact stack, whose height the caller sets.
+ */
+
+type PreviewKind = "picture" | "sheet" | "named";
+type PreviewDepth = "tile" | "short";
+
+/** Which preview an artifact gets, and the handler that turns a failed picture into a named one. */
+export function usePreviewKind(artifact: LabArtifact): [PreviewKind, () => void] {
+ const [failed, setFailed] = useState(false);
+ const kind: PreviewKind = artifact.thumbnailUrl && !failed ? "picture" : hasTextPreview(artifact) ? "sheet" : "named";
+ return [kind, () => setFailed(true)];
+}
+
+const BOX = "aspect-video w-full";
+const TEXT = "text-(length:--text-compact) leading-5";
+const MONO = "text-(length:--text-micro) leading-5";
+// Whole lines that fit a 16:9 sheet, by the tile's width: 20px lines under a 24px head, above the tab.
+const CLAMP: Record
+ {/* A count is a machine value: the mono voice, at headline size. */}
+ {headline ?
+ ) : null}
+ {headline}
: null} + {artifact.summary ? ( ++ {artifact.summary} +
+ ) : null} + {artifact.filename ? ( +
+
+ );
+}
+
+function Section({ section }: { section: StackSection }) {
+ const headingId = useId();
+ return (
+ + {section.label} +
+ {artifactCount(section.artifacts.length)} +-
+ {section.artifacts.map((artifact) => (
+
No artifacts in this stack match the current filters.
; + } + return ( +
+
+ );
+}
diff --git a/ui/src/artifact-directions/directions/d2-tint/GalleryStacks.tsx b/ui/src/artifact-directions/directions/d2-tint/GalleryStacks.tsx
new file mode 100644
index 00000000000..c7dac4b47ca
--- /dev/null
+++ b/ui/src/artifact-directions/directions/d2-tint/GalleryStacks.tsx
@@ -0,0 +1,22 @@
+import type { LabGroup } from "../../kit";
+import { StackFolder } from "./StackFolder";
+import { StackSingle } from "./StackSingle";
+
+/**
+ * GALLERY — the grid of task stacks under the page toolbar.
+ *
+ * The page's own grid (1 / 2 / 3 columns, 24px gap). A stack of two or more
+ * is a folder; a stack of one is the artifact itself. Every unit in a row
+ * takes the row's height, so the pockets and the single tiles end level.
+ */
+export function GalleryStacks({ groups }: { groups: LabGroup[] }) {
+ if (groups.length === 0) {
+ // The shipped empty state's copy.
+ return No artifact stacks yet.
; + } + return ( +-
+ {groups.map((group) => (group.count > 1 ?
+
+
+ {/* Every tile keeps the height of a state mark here, so a row of tiles stays level whether or not one is waiting. */}
+
+
+
+ {artifact.title}
+
+
+ {/* Every tile keeps the height of a state mark here, so a row of tiles stays level whether or not one is waiting. */}
+
+
+
+ -
+ {kinds.map(({ kind, count }) => (
+
-
+
+ + {count} + {named ? {kindNounInline(kind, count)} : {kindNoun(kind, count)}} + +
+ ))}
+
+ {children}
+
+ );
+}
+
+/** NAMED. The glyph centred on its kind well; children sit beside it (a headline, a summary). */
+export function KindWell({
+ artifact,
+ size = "md",
+ className,
+ glyphClassName,
+ children,
+}: {
+ artifact: LabArtifact;
+ size?: GlyphSize;
+ className?: string;
+ /** Overrides the glyph's box (the SVG scales), e.g. a container-query step down in a narrow unit. */
+ glyphClassName?: string;
+ children?: ReactNode;
+}) {
+ return (
+
+
+ );
+}
+
+// 72×46: the one lead box of a thread row, so every title starts on the same edge.
+const ROW_BOX = "h-11.5 w-18 shrink-0";
+
+/** The lead of a thread row: a picture when there is one; otherwise the xs glyph on its well (no room to show text here). */
+export function Lead({ artifact }: { artifact: LabArtifact }) {
+ const [failed, setFailed] = useState(false);
+ if (!artifact.thumbnailUrl || failed) return No artifacts yet. Work products, documents, and agent-produced files will appear here.
; + } + + return ( +
+
+ );
+}
diff --git a/ui/src/artifact-directions/directions/d2-tint/PanelCard.tsx b/ui/src/artifact-directions/directions/d2-tint/PanelCard.tsx
new file mode 100644
index 00000000000..52c02a12ab2
--- /dev/null
+++ b/ui/src/artifact-directions/directions/d2-tint/PanelCard.tsx
@@ -0,0 +1,120 @@
+import { Fragment, useState } from "react";
+import { cn } from "@/lib/utils";
+import type { LabArtifact } from "../../kit";
+import { FileName } from "./FileName";
+import { MetaLine } from "./MetaLine";
+import { PanelNamed, PanelPicture, PanelSheet, panelLeadKind } from "./PanelLead";
+import { StateMark } from "./StateMark";
+import { ButtonAction, SLAB, SecondaryAction } from "./UnitAction";
+import { panelAction, panelSecondary } from "./actions";
+import { kindLabel, linkLabel, metaParts, shortDateTime } from "./kinds";
+
+/**
+ * PANEL — one artifact on the task's shelf. One skeleton for every kind; the
+ * lead follows the one rule (PanelLead.tsx):
+ *
+ * SHOWN (picture, or text on a sheet) NAMED (nothing to show)
+ * ┌──────── lead, full width ────────┐ ┌ well ┐ title
+ * └──────────────────────────────────┘ │ glyph│ kind · size · fact ○ Review
+ * title │ │ summary
+ * kind · size · rev · fact ○ Review └──────┘ filename · MIME type
+ * summary · filename
+ * author · updated icon actions [Primary] (the same footer on both)
+ *
+ * Everything the shipped card prints is printed here — nothing lives only in
+ * a tooltip. Filename, address and MIME type sit above the card's stretched
+ * action so they can be selected and copied. Hover is neutral (the hue is
+ * spent on the lead): the slab steps up and the primary button inverts.
+ */
+
+// Machine values a reviewer may want to copy: above the stretched link, selectable.
+const COPYABLE = "relative z-10 cursor-text select-text";
+const SMALL = "mt-1 text-(length:--text-micro) leading-4 text-(--tint-ink-2)";
+
+/** The product prints the MIME type on file cards — not on documents, pictures or links. */
+const showsMime = (a: LabArtifact) => Boolean(a.contentType) && a.kind !== "document" && a.kind !== "image" && a.kind !== "video" && a.kind !== "link";
+
+/** A long MIME type wraps after its own separators, not in the middle of a word — and still copies as the plain string. */
+function breakable(value: string) {
+ return value.split(/(?<=[/.+-])/).map((part, index) => (
+ + {/* Inside a run section the agent is the section's heading; only the edit time is the card's own. */} + {grouped ? null : {artifact.author}} + +
+ ); +} + +export function PanelCard({ artifact, grouped }: { artifact: LabArtifact; grouped: boolean }) { + const [failed, setFailed] = useState(false); + const lead = panelLeadKind(artifact, failed); + const shown = lead !== "named"; + const primary = panelAction(artifact); + const secondary = panelSecondary(artifact); + // A link's address is too long for the meta line at this width; it takes the filename's place. + const address = artifact.kind === "link" ? linkLabel(artifact.url) : undefined; + const meta = address ? [kindLabel(artifact)] : metaParts(artifact, { facts: true }); + const { filename } = artifact; + return ( +
+ {lead === "named" ?
+ {/* `mt-auto`: in a wide pane the cards sit two or three to a row and share its height. */}
+
+
+ {/* Long titles wrap rather than truncate, as the shipped card's do; a third line in a narrow pane. */}
+
+ {artifact.title}
+ {/* The state mark shares the meta line when both fit and drops under it when they do not; neither truncates the other. */} +
+
+ {artifact.summary ? (
+ + {artifact.summary} +
+ ) : null} + {filename ? ( +
+ onFilter("all")} name={`All ${artifacts.length} artifacts`}>
+ All
+ {review > 0 ? (
+ toggle("review")} name={`Review ${review} waiting`}>
+
+ ) : null}
+ {shown.map(({ kind, count }) => {
+ const pressed = filter === kind;
+ return (
+ // In a narrow pane only the pressed kind and an opened row keep their chips.
+ toggle(kind)} name={`${kindNoun(kind, count)} ${count}`} className={cn("gap-1 px-1.5", pressed || open ? null : "@max-xs/panel:hidden")}>
+
+ );
+ })}
+ {open ? null : (
+ <>
+ {behind > 0 ? (
+ setOpen(true)} name={`+${behind} more kinds`} className="@max-xs/panel:hidden">
+ +{behind}
+
+ ) : null}
+ setOpen(true)} name={`+${kinds.length} kinds`} className="hidden @max-xs/panel:inline-flex">
+ +{kinds.length} kinds
+
+
+ )}
+
+ );
+}
diff --git a/ui/src/artifact-directions/directions/d2-tint/PanelLead.tsx b/ui/src/artifact-directions/directions/d2-tint/PanelLead.tsx
new file mode 100644
index 00000000000..6fa386d0780
--- /dev/null
+++ b/ui/src/artifact-directions/directions/d2-tint/PanelLead.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import type { LabArtifact } from "../../kit";
+import { CodeLines, ProseExcerpt, SheetTable } from "./Content";
+import { FoldedPreview, FoldedSheet, KindWell, PlayMark } from "./Lead";
+import { MOTION } from "./UnitAction";
+import { hasTextPreview } from "./kinds";
+
+/**
+ * PANEL — the lead of a card, by the one rule (Lead.tsx):
+ *
+ * picture image, video poster, link screenshot — the full width of the
+ * card, the whole picture (never cropped: this is where it is
+ * judged), fold lg and tab. A video plays in place: the poster is
+ * a real button, and pressing it swaps in the player with controls.
+ * sheet document, Markdown, sheet, code — the artifact's own text at full
+ * width on a neutral sheet, fold md and tab: five lines of a
+ * document, header + three rows of a sheet, five lines of code.
+ * named PDF, slides, archive, generic file, a picture that failed — the md
+ * glyph on its kind well, 112px wide, as tall as the words beside it.
+ */
+
+type PanelLeadKind = "picture" | "sheet" | "named";
+
+export function panelLeadKind(a: LabArtifact, failed: boolean): PanelLeadKind {
+ if (a.thumbnailUrl && !failed) return "picture";
+ return hasTextPreview(a) ? "sheet" : "named";
+}
+
+/** The picture's own shape, held between 4:3 and 16:9; anything outside that is shown whole on the neutral well. */
+function pictureBox(aspect: number | undefined): string {
+ if (aspect == null || aspect >= 1.7) return "aspect-video";
+ return aspect >= 1.45 ? "aspect-3/2" : "aspect-4/3";
+}
+
+const PLAY_RING = "focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-(--tint-on-kind)";
+const DURATION = "absolute bottom-2 right-2 rounded-(--rad-4) bg-(--tint-scrim) px-1.5 py-1 font-mono text-(length:--text-micro) leading-none text-(--tint-on-kind)";
+
+export function PanelPicture({ artifact, onError }: { artifact: LabArtifact; onError: () => void }) {
+ const [playing, setPlaying] = useState(false);
+ const box = cn("w-full", pictureBox(artifact.aspect));
+ const video = artifact.kind === "video";
+ if (video && playing && artifact.videoUrl) {
+ // Above the card's stretched action, so the player's own controls work.
+ return ;
+ }
+ return (
+
+
+ + {section.title} +
+-
+ {section.artifacts.map((artifact) => (
+