astryx-dracula 0.6.2 → 0.7.0

package/templates/work-item-detail.tsx

@@ -0,0 +1,1049 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure of the tree below; the CLI had no XLE validator
+// after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
+// human drift check — update it with the file, never alone):
+//   L[h=fill] > (LH[divider p=6] > V[g=3] > (H[j=between a=start g=4] > (V[g=2] > (H[g=2 a=center wrap] > (Lk"All tasks" + Bu + Tx"PLT-247"[t=supporting] + Bu + Tx"Platform / Onboarding"[t=supporting]) + Hd"Refresh onboarding flow for workspaces"[level=1] + (H[g=2 a=center wrap] > SD"In progress" + Tx"In progress"[t=supporting] + Bu + Bd"High" + Bu + Tx"2 of 5 subtasks"[t=supporting] + Bu + Tx"2 comments"[t=supporting])) + (H[g=1] > (B.secondary"Watch task" + IB"Show task properties")))) + (LC[p=0] > V[g=0] > (S.transparent[p=6] > V[g=4] > (Hd"Description"[level=2] + (V[g=2 mw=720] > Tx*2) + (Hd"Success criteria"[level=3] + UL[disc compact] > LI*3))) + D + (S.transparent[p=6] > V[g=4] > ((H[j=between a=center] > Hd"Subtasks"[level=2] + B.secondary"Add subtask") + (H[g=3 a=center] > Tx"2 of 5 complete"[t=supporting] + (SI[fill] > ProgressBar)) + (UL > CheckboxListItem*5) + (V[g=2] > (TI"Subtask title" + (H[j=end g=2] > (B.ghost"Cancel" + B.primary"Add subtask")))))) + D + (S.transparent[p=6] > V[g=4] > (H[j=between a=center] > (Hd"Attachments"[level=2] + Tx"4 files and links"[t=supporting])) + (V[g=1] > CC*4)) + D + (S.transparent[p=6] > V[g=4] > (H[j=between a=center] > (Hd"Comments and activity"[level=2] + Tx"2 comments · 3 updates"[t=supporting]) + B.secondary"Add comment") + (V[g=5] > (H[g=3 a=start] > (Av + (SI[fill] > V[g=1] > ((H[g=2 a=center] > (Tx"Priya Shah" + SI[fill] + TS)) + (C.muted[p=3] > Tx)))))*5) + (V[g=2] > (TA"Write a comment…" + (H[j=end g=2] > (B.ghost"Cancel" + B.primary"Comment"))))))) + (LP[w=340 p=4 divider label="Task properties"] > V[g=6] > (V[g=4] > (Hd"Properties"[level=3] + (SE"Status" + SE"Priority" + SE"Assignee" + (Tokenizer"Labels" > Tk*3))) + (V[g=4] > (Hd"Details"[level=3] + ML > MLI*6)) + (V[g=4] > (Hd"Watchers"[level=3] + AvatarGroup > Av*6 + Tx"6 watching"[t=supporting])) + (V[g=4] > (Hd"Linked items"[level=3] + CC*2)))) ;; Drawer"Task properties"[side=end w=340] > (DrawerHeader"Task properties" + LC[p=4] > V[g=6] > (V[g=4] > Hd"Properties"[level=3] + (SE*3 + Tokenizer"Labels")) + (V[g=4] > Hd"Details"[level=3] + ML > MLI*6) + (V[g=4] > Hd"Watchers"[level=3] + AvatarGroup > Av*6) + (V[g=4] > Hd"Linked items"[level=3] + CC*2))
+
+import { Avatar } from "@astryxdesign/core/Avatar";
+import { AvatarGroup } from "@astryxdesign/core/AvatarGroup";
+import { Badge, type BadgeVariant } from "@astryxdesign/core/Badge";
+import { Button } from "@astryxdesign/core/Button";
+import { Card } from "@astryxdesign/core/Card";
+import { Center } from "@astryxdesign/core/Center";
+import { CheckboxListItem } from "@astryxdesign/core/CheckboxList";
+import { ClickableCard } from "@astryxdesign/core/ClickableCard";
+import { Divider } from "@astryxdesign/core/Divider";
+import { Drawer, DrawerHeader } from "@astryxdesign/core/Drawer";
+import { useMediaQuery } from "@astryxdesign/core/hooks";
+import { Icon } from "@astryxdesign/core/Icon";
+import { IconButton } from "@astryxdesign/core/IconButton";
+import {
+	HStack,
+	Layout,
+	LayoutContent,
+	LayoutHeader,
+	LayoutPanel,
+	StackItem,
+	VStack,
+} from "@astryxdesign/core/Layout";
+import { Link } from "@astryxdesign/core/Link";
+import { List, ListItem } from "@astryxdesign/core/List";
+import { MetadataList, MetadataListItem } from "@astryxdesign/core/MetadataList";
+import { ProgressBar } from "@astryxdesign/core/ProgressBar";
+import { Section } from "@astryxdesign/core/Section";
+import { Selector } from "@astryxdesign/core/Selector";
+import { StatusDot } from "@astryxdesign/core/StatusDot";
+import { Heading, Text } from "@astryxdesign/core/Text";
+import { TextArea } from "@astryxdesign/core/TextArea";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { Timestamp } from "@astryxdesign/core/Timestamp";
+import { Token } from "@astryxdesign/core/Token";
+import { Tokenizer } from "@astryxdesign/core/Tokenizer";
+import type { SearchableItem, SearchSource } from "@astryxdesign/core/Typeahead";
+import {
+	ArrowLeft,
+	ExternalLink,
+	Eye,
+	EyeOff,
+	FileImage,
+	FileText,
+	Info,
+	Link as LinkIcon,
+} from "lucide-react";
+import {
+	type ComponentType,
+	type CSSProperties,
+	type ReactNode,
+	type SVGProps,
+	useRef,
+	useState,
+} from "react";
+
+// Definite ancestor for `height="fill"`: 100dvh, not minHeight: "100%" (a
+// percentage min-height against an indefinite block computes to 0 — CSS 2.1
+// §10.5). Templates ship standalone, so the page owns this, not the host.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
+// The showcase's own route stands in for the task list and the related-record
+// routes a real app would own. It is a destination, never an action.
+const SELF_HASH = "#/templates/work-item-detail";
+
+// The attachment tile is a recessed well, not a raised chip: muted is #21222C
+// on the kit and cards already sit a tier up. Only dimension props and tokens
+// here — no raw px or hex in a style object.
+const attachmentTileStyle: CSSProperties = {
+	flexShrink: 0,
+	backgroundColor: "var(--color-background-muted)",
+	borderRadius: "var(--radius-element)",
+};
+
+// ─── Work item identity ─────────────────────────────────────────────────────
+const RECORD_REF = "PLT-247";
+const RECORD_TITLE = "Refresh onboarding flow for workspaces";
+const RECORD_PROJECT = "Platform / Onboarding";
+const CURRENT_USER = "Vlad Dracul";
+const REPORTER = "Sofia Alvarez";
+const START_DATE = "2026-03-02";
+const DUE_DATE = "2026-03-18";
+const SPRINT = "Sprint 24 · Mar 2 – Mar 15";
+const TEAM = "Platform · Growth pod";
+
+const DESCRIPTION_PARAGRAPHS = [
+	"Reduce the drop-off between account creation and first meaningful action in a new workspace. Recent cohorts activate at 42 percent by day seven, and interview evidence points to an empty starting state and a long welcome sequence as the two largest contributors.",
+	"Ship a revised flow that shortens the sequence, seeds every new workspace with a sample project, and measures activation as the percentage of workspaces that reach three completed actions in the first three days.",
+];
+
+const SUCCESS_CRITERIA = [
+	"Day-seven activation rises from 42 to 55 percent for new workspaces in the variant.",
+	"Median time to first completed action drops below eight minutes.",
+	"No regression in day-thirty retention.",
+];
+
+// ─── Editable fields ────────────────────────────────────────────────────────
+/** Shape shared by every Selector option list on this page. */
+type Option = { value: string; label: string; icon?: ReactNode };
+
+// In progress is the kit's `info` dot (cyan) and pulses; the brand forbids the
+// purple `accent` dot as a status, which stock Astryx uses for this state.
+const STATUS_OPTIONS: Option[] = [
+	{ value: "todo", label: "To do", icon: <StatusDot variant="neutral" label="To do" /> },
+	{
+		value: "in_progress",
+		label: "In progress",
+		icon: <StatusDot variant="info" isPulsing label="In progress" />,
+	},
+	{
+		value: "in_review",
+		label: "In review",
+		icon: <StatusDot variant="warning" label="In review" />,
+	},
+	{ value: "done", label: "Done", icon: <StatusDot variant="success" label="Done" /> },
+];
+
+const ASSIGNEE_OPTIONS: Option[] = [
+	{ value: "priya-shah", label: "Priya Shah", icon: <Avatar name="Priya Shah" size="xsm" /> },
+	{ value: "marcus-chen", label: "Marcus Chen", icon: <Avatar name="Marcus Chen" size="xsm" /> },
+	{
+		value: "sofia-alvarez",
+		label: "Sofia Alvarez",
+		icon: <Avatar name="Sofia Alvarez" size="xsm" />,
+	},
+];
+
+// The badge colour rides along with the option so the list stays the single
+// source of truth; a separate switch would have to be kept in step by hand.
+// Red/orange read as urgency, yellow as a tag; a priority is a ranking, so
+// this follows kanban-board.tsx's mapping rather than the status vocabulary.
+const PRIORITY_OPTIONS: (Option & { badge: BadgeVariant })[] = [
+	{ value: "high", label: "High", badge: "red" },
+	{ value: "mid", label: "Medium", badge: "yellow" },
+	{ value: "low", label: "Low", badge: "neutral" },
+];
+
+type LabelOption = SearchableItem;
+
+const LABEL_OPTIONS: LabelOption[] = [
+	{ id: "onboarding", label: "Onboarding" },
+	{ id: "q1-goal", label: "Q1 goal" },
+	{ id: "growth", label: "Growth" },
+];
+
+const LABEL_SEARCH_SOURCE: SearchSource<LabelOption> = {
+	search: (query) =>
+		LABEL_OPTIONS.filter((option) => option.label.toLowerCase().includes(query.toLowerCase())),
+	bootstrap: () => LABEL_OPTIONS,
+};
+
+/** Every editable field on the work item, held as one unit of page state. */
+type WorkItemFields = {
+	status: string;
+	assignee: string;
+	priority: string;
+	labels: LabelOption[];
+};
+
+/**
+ * The options list defines the valid values, so an unrecognised one falls back
+ * to the first entry rather than leaving the slot empty.
+ */
+function optionFor<T extends Option>(options: T[], value: string): T {
+	return options.find((option) => option.value === value) ?? options[0];
+}
+
+function PriorityBadge({ value }: { value: string }) {
+	const { label, badge } = optionFor(PRIORITY_OPTIONS, value);
+	return <Badge variant={badge} label={label} />;
+}
+
+// ─── Record data ────────────────────────────────────────────────────────────
+type Subtask = {
+	id: number;
+	title: string;
+	isDone: boolean;
+	assignee: string;
+	due?: string;
+};
+
+const SUBTASKS: Subtask[] = [
+	{
+		id: 1,
+		title: "Audit current onboarding flow and note friction points",
+		isDone: true,
+		assignee: "Priya Shah",
+		due: "2026-03-04",
+	},
+	{
+		id: 2,
+		title: "Interview five recent sign-ups about their first-run experience",
+		isDone: true,
+		assignee: "Marcus Chen",
+		due: "2026-03-06",
+	},
+	{
+		id: 3,
+		title: "Draft revised welcome sequence with three variants",
+		isDone: false,
+		assignee: "Priya Shah",
+		due: "2026-03-11",
+	},
+	{
+		id: 4,
+		title: "Review copy with content design and legal",
+		isDone: false,
+		assignee: "Sofia Alvarez",
+		due: "2026-03-13",
+	},
+	{
+		id: 5,
+		title: "Ship variant A to 10% of new accounts and measure activation",
+		isDone: false,
+		assignee: "Marcus Chen",
+		due: "2026-03-18",
+	},
+];
+
+type Attachment = {
+	id: string;
+	kind: "link" | "image" | "file";
+	title: string;
+	subtitle: string;
+	href: string;
+};
+
+// Reserved example.com hosts: well-formed destinations, so the card is an
+// honest link even though the record is fixture data.
+const ATTACHMENTS: Attachment[] = [
+	{
+		id: "audit-notes",
+		kind: "link",
+		title: "Onboarding audit notes",
+		subtitle: "docs.example.com",
+		href: "https://docs.example.com/onboarding-audit",
+	},
+	{
+		id: "funnel-dashboard",
+		kind: "link",
+		title: "Sign-up funnel dashboard",
+		subtitle: "analytics.example.com",
+		href: "https://analytics.example.com/signup-funnel",
+	},
+	{
+		id: "welcome-screen",
+		kind: "image",
+		title: "welcome-screen-v3.png",
+		subtitle: "1.4 MB · PNG image",
+		href: "https://assets.example.com/welcome-screen-v3.png",
+	},
+	{
+		id: "transcripts",
+		kind: "file",
+		title: "Interview transcripts.pdf",
+		subtitle: "820 KB · PDF document",
+		href: "https://assets.example.com/interview-transcripts.pdf",
+	},
+];
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+
+const ATTACHMENT_ICONS: Record<Attachment["kind"], IconComponent> = {
+	link: LinkIcon,
+	image: FileImage,
+	file: FileText,
+};
+
+const WATCHERS = [
+	"Priya Shah",
+	"Marcus Chen",
+	"Sofia Alvarez",
+	"Jordan Blake",
+	"Lin Wei",
+	"Aisha Okafor",
+];
+
+const LINKED_ITEMS = [
+	{ id: "PLT-238", title: "Track activation rate by acquisition channel" },
+	{ id: "PLT-241", title: "Welcome email A/B test — copy variants" },
+];
+
+type ActivityEntry = {
+	id: number;
+	kind: "comment" | "event";
+	author: string;
+	time: string;
+	body: string;
+};
+
+const ACTIVITY: ActivityEntry[] = [
+	{
+		id: 1,
+		kind: "event",
+		author: "Sofia Alvarez",
+		time: "2026-03-02T14:12:00Z",
+		body: "created this task",
+	},
+	{
+		id: 2,
+		kind: "comment",
+		author: "Priya Shah",
+		time: "2026-03-03T09:41:00Z",
+		body: "Finished the audit — three biggest friction points are the account form length, the empty first-run dashboard, and the tour tooltip cluster on step two. Full notes in the linked doc.",
+	},
+	{
+		id: 3,
+		kind: "event",
+		author: "Marcus Chen",
+		time: "2026-03-03T15:20:00Z",
+		body: "changed status from To do to In progress",
+	},
+	{
+		id: 4,
+		kind: "comment",
+		author: "Marcus Chen",
+		time: "2026-03-04T10:05:00Z",
+		body: "Interviews wrapped. A consistent theme: people expect a personalized starting workspace and get an empty one. Suggest we scope a template step into variant A.",
+	},
+	{
+		id: 5,
+		kind: "event",
+		author: "Sofia Alvarez",
+		time: "2026-03-04T16:48:00Z",
+		body: "assigned this task to Priya Shah",
+	},
+];
+
+// ─── Shared pieces ──────────────────────────────────────────────────────────
+// A Section escapes its container's padding by design — it cancels
+// --container-padding-* with negative margins so fills can run edge to edge.
+// This value is therefore the real inset of the main column.
+const SECTION_PADDING = 6;
+
+function SectionHeader({
+	title,
+	level = 2,
+	meta,
+	action,
+}: {
+	title: string;
+	level?: 2 | 3;
+	meta?: ReactNode;
+	action?: ReactNode;
+}) {
+	return (
+		<HStack gap={3} vAlign="center" hAlign="between" wrap="wrap">
+			<VStack gap={1}>
+				<Heading level={level}>{title}</Heading>
+				{meta}
+			</VStack>
+			{action}
+		</HStack>
+	);
+}
+
+// A separator inside one metadata line. It is aria-hidden: the pauses it
+// draws are visual grouping, and a screen reader already hears the fields as
+// separate text nodes.
+function Bullet() {
+	return (
+		<Text type="supporting" color="secondary" aria-hidden="true">
+			{"・"}
+		</Text>
+	);
+}
+
+function PersonRow({ name }: { name: string }) {
+	return (
+		<HStack gap={2} vAlign="center">
+			<Avatar name={name} size="xsm" />
+			<Text type="body">{name}</Text>
+		</HStack>
+	);
+}
+
+// ─── Page header ────────────────────────────────────────────────────────────
+function PageHeader({
+	fields,
+	doneCount,
+	subtaskCount,
+	commentCount,
+	isWatching,
+	onToggleWatch,
+	isNarrow,
+	onOpenProperties,
+}: {
+	fields: WorkItemFields;
+	doneCount: number;
+	subtaskCount: number;
+	commentCount: number;
+	isWatching: boolean;
+	onToggleWatch: () => void;
+	isNarrow: boolean;
+	onOpenProperties: () => void;
+}) {
+	const status = optionFor(STATUS_OPTIONS, fields.status);
+
+	return (
+		<LayoutHeader hasDivider padding={6}>
+			<HStack gap={4} vAlign="start" hAlign="between" wrap="wrap">
+				<VStack gap={2}>
+					<HStack gap={1} vAlign="center" wrap="wrap">
+						<Link href={SELF_HASH} type="supporting" color="secondary">
+							<HStack gap={1} vAlign="center">
+								<Icon icon={ArrowLeft} size="sm" color="inherit" />
+								All tasks
+							</HStack>
+						</Link>
+						<Bullet />
+						<Text type="supporting" color="secondary">
+							{RECORD_REF}
+						</Text>
+						<Bullet />
+						<Text type="supporting" color="secondary">
+							{RECORD_PROJECT}
+						</Text>
+					</HStack>
+					<Heading level={1} maxLines={2}>
+						{RECORD_TITLE}
+					</Heading>
+					{/* Every number on this line is counted from state: the status
+					    and priority are the live field values, and the two tallies
+					    read the arrays the sections below render. */}
+					<HStack gap={2} vAlign="center" wrap="wrap">
+						{status.icon}
+						<Text type="supporting" color="secondary">
+							{status.label}
+						</Text>
+						<Bullet />
+						<PriorityBadge value={fields.priority} />
+						<Bullet />
+						<Text type="supporting" color="secondary" hasTabularNumbers>
+							{doneCount} of {subtaskCount} subtasks
+						</Text>
+						<Bullet />
+						<Text type="supporting" color="secondary" hasTabularNumbers>
+							{commentCount} comments
+						</Text>
+					</HStack>
+				</VStack>
+				<HStack gap={2} vAlign="center">
+					{/* The label names the action rather than the state, so the
+					    control stays an action; the watcher group in the rail is
+					    the state it changes. */}
+					<Button
+						label={isWatching ? "Stop watching" : "Watch task"}
+						variant="secondary"
+						icon={<Icon icon={isWatching ? EyeOff : Eye} size="sm" />}
+						onClick={onToggleWatch}
+					/>
+					{/* The rail is always visible on wide screens, so the discoverable
+					    way to reach it only exists where it would otherwise vanish. */}
+					{isNarrow && (
+						<IconButton
+							label="Show task properties"
+							variant="secondary"
+							icon={<Icon icon={Info} size="sm" />}
+							onClick={onOpenProperties}
+						/>
+					)}
+				</HStack>
+			</HStack>
+		</LayoutHeader>
+	);
+}
+
+// ─── Description ────────────────────────────────────────────────────────────
+function DescriptionSection() {
+	return (
+		<Section variant="transparent" padding={SECTION_PADDING}>
+			<VStack gap={4}>
+				<SectionHeader title="Description" />
+				{/* Reading copy gets a measure; row-dense sections do not. 720 at the
+				    14px body role keeps a line near 90 characters in the mono face. */}
+				<VStack gap={2} maxWidth={720}>
+					{DESCRIPTION_PARAGRAPHS.map((paragraph) => (
+						<Text key={paragraph} type="body">
+							{paragraph}
+						</Text>
+					))}
+				</VStack>
+				<VStack gap={2}>
+					<Heading level={3}>Success criteria</Heading>
+					<List listStyle="disc" density="compact">
+						{SUCCESS_CRITERIA.map((criterion) => (
+							// A string label is single-line truncated by ListItem's own
+							// rule (ListItem.tsx label docs); a node is not, and a
+							// truncated success criterion is a criterion you cannot read.
+							<ListItem
+								key={criterion}
+								label={
+									<Text type="body" textWrap="wrap">
+										{criterion}
+									</Text>
+								}
+							/>
+						))}
+					</List>
+				</VStack>
+			</VStack>
+		</Section>
+	);
+}
+
+// ─── Subtasks ───────────────────────────────────────────────────────────────
+function SubtasksSection({
+	subtasks,
+	doneCount,
+	onSetDone,
+	onAdd,
+}: {
+	subtasks: Subtask[];
+	doneCount: number;
+	onSetDone: (id: number, isDone: boolean) => void;
+	onAdd: (title: string) => void;
+}) {
+	const [isAdding, setAdding] = useState(false);
+	const [draft, setDraft] = useState("");
+
+	const progress = subtasks.length === 0 ? 0 : (doneCount / subtasks.length) * 100;
+
+	const openComposer = () => {
+		setDraft("");
+		setAdding(true);
+	};
+
+	const submit = () => {
+		const title = draft.trim();
+		if (title.length === 0) {
+			return;
+		}
+		onAdd(title);
+		// Clearing rather than closing: adding a checklist usually means adding
+		// several rows, and the field keeps focus for the next one.
+		setDraft("");
+	};
+
+	const cancel = () => {
+		setDraft("");
+		setAdding(false);
+	};
+
+	return (
+		<Section variant="transparent" padding={SECTION_PADDING}>
+			<VStack gap={4}>
+				<SectionHeader
+					title="Subtasks"
+					// While the composer is open the field's own Add button is the
+					// action; leaving a second, inert trigger beside it would be a
+					// dead control.
+					action={
+						isAdding ? undefined : (
+							<Button label="Add subtask" variant="secondary" onClick={openComposer} />
+						)
+					}
+				/>
+				<HStack gap={3} vAlign="center">
+					<Text type="supporting" color="secondary" hasTabularNumbers>
+						{doneCount} of {subtasks.length} complete
+					</Text>
+					<StackItem size="fill">
+						<ProgressBar
+							label="Subtask progress"
+							isLabelHidden
+							value={progress}
+							variant="success"
+						/>
+					</StackItem>
+				</HStack>
+				<List>
+					{subtasks.map((task) => (
+						<CheckboxListItem
+							key={task.id}
+							// The label wraps; first-line keeps the checkbox and the
+							// due date level with it rather than with the middle of
+							// a three-line row. A node is required for that: a plain
+							// string label is single-line truncated by CheckboxListItem.
+							align="first-line"
+							label={
+								<Text type="body" textWrap="wrap">
+									{task.title}
+								</Text>
+							}
+							isChecked={task.isDone}
+							onCheck={(isDone) => onSetDone(task.id, isDone)}
+							endContent={
+								<HStack gap={2} vAlign="center">
+									{task.due && (
+										<Timestamp value={task.due} format="date" type="supporting" color="secondary" />
+									)}
+									<Avatar name={task.assignee} size="sm" />
+								</HStack>
+							}
+						/>
+					))}
+				</List>
+				{isAdding && (
+					<VStack gap={2}>
+						<TextInput
+							label="Subtask title"
+							isLabelHidden
+							placeholder="Describe the next step"
+							value={draft}
+							onChange={setDraft}
+							onEnter={submit}
+							hasAutoFocus
+						/>
+						<HStack gap={2} hAlign="end">
+							<Button label="Cancel" variant="ghost" onClick={cancel} />
+							<Button
+								label="Add subtask"
+								variant="primary"
+								isDisabled={draft.trim().length === 0}
+								onClick={submit}
+							/>
+						</HStack>
+					</VStack>
+				)}
+			</VStack>
+		</Section>
+	);
+}
+
+// ─── Attachments ────────────────────────────────────────────────────────────
+function AttachmentsSection() {
+	return (
+		<Section variant="transparent" padding={SECTION_PADDING}>
+			<VStack gap={4}>
+				<SectionHeader
+					title="Attachments"
+					meta={
+						<Text type="supporting" color="secondary" hasTabularNumbers>
+							{ATTACHMENTS.length} files and links
+						</Text>
+					}
+				/>
+				<VStack gap={1}>
+					{ATTACHMENTS.map((attachment) => {
+						const AttachmentIcon = ATTACHMENT_ICONS[attachment.kind];
+						return (
+							<ClickableCard
+								key={attachment.id}
+								label={`Open ${attachment.title}`}
+								href={attachment.href}
+								target="_blank"
+								padding={3}
+							>
+								<HStack gap={3} vAlign="center">
+									<Center width={40} height={40} style={attachmentTileStyle}>
+										<Icon icon={AttachmentIcon} size="lg" color="secondary" />
+									</Center>
+									<StackItem size="fill">
+										<VStack gap={0}>
+											<Text type="body" weight="semibold">
+												{attachment.title}
+											</Text>
+											<Text type="supporting" color="secondary">
+												{attachment.subtitle}
+											</Text>
+										</VStack>
+									</StackItem>
+									{/* A destination hint, not a control: the card itself is
+									    the link, so a second focus stop here would repeat it. */}
+									<Icon icon={ExternalLink} size="sm" color="secondary" />
+								</HStack>
+							</ClickableCard>
+						);
+					})}
+				</VStack>
+			</VStack>
+		</Section>
+	);
+}
+
+// ─── Activity ───────────────────────────────────────────────────────────────
+function ActivitySection({
+	activity,
+	commentCount,
+	onPost,
+}: {
+	activity: ActivityEntry[];
+	commentCount: number;
+	onPost: (body: string) => void;
+}) {
+	const commentFieldRef = useRef<HTMLTextAreaElement>(null);
+	const [draft, setDraft] = useState("");
+
+	const eventCount = activity.length - commentCount;
+
+	const focusCommentField = () => {
+		const field = commentFieldRef.current;
+		if (!field) {
+			return;
+		}
+		// Scroll first, then take focus without a second jump competing with it.
+		field.scrollIntoView({ behavior: "smooth", block: "center" });
+		field.focus({ preventScroll: true });
+	};
+
+	const submit = () => {
+		const body = draft.trim();
+		if (body.length === 0) {
+			return;
+		}
+		onPost(body);
+		setDraft("");
+	};
+
+	return (
+		<Section variant="transparent" padding={SECTION_PADDING}>
+			<VStack gap={6}>
+				<SectionHeader
+					title="Comments and activity"
+					meta={
+						<Text type="supporting" color="secondary" hasTabularNumbers>
+							{commentCount} comments · {eventCount} updates
+						</Text>
+					}
+					action={<Button label="Add comment" variant="secondary" onClick={focusCommentField} />}
+				/>
+				<VStack gap={5}>
+					{activity.map((entry) => {
+						const isComment = entry.kind === "comment";
+						return (
+							<HStack key={entry.id} gap={3} vAlign="start">
+								<Avatar name={entry.author} size="sm" />
+								<StackItem size="fill">
+									<VStack gap={1}>
+										<HStack gap={2} vAlign="center">
+											<Text type="body" weight="semibold">
+												{entry.author}
+											</Text>
+											<StackItem size="fill" />
+											<Timestamp
+												value={entry.time}
+												format="relative"
+												type="supporting"
+												color="secondary"
+											/>
+										</HStack>
+										{/* A comment gets a bubble; an event is one line of
+										    history and would make the feed read as a list of
+										    messages if it got one too. */}
+										{isComment ? (
+											<Card variant="muted" padding={3}>
+												<Text type="body">{entry.body}</Text>
+											</Card>
+										) : (
+											<Text type="supporting" color="secondary">
+												{entry.body}
+											</Text>
+										)}
+									</VStack>
+								</StackItem>
+							</HStack>
+						);
+					})}
+				</VStack>
+				<VStack gap={2}>
+					<TextArea
+						ref={commentFieldRef}
+						width="100%"
+						label="Add a comment"
+						isLabelHidden
+						placeholder="Write a comment…"
+						value={draft}
+						onChange={setDraft}
+						rows={4}
+					/>
+					<HStack gap={2} hAlign="end">
+						<Button
+							label="Cancel"
+							variant="ghost"
+							isDisabled={draft.length === 0}
+							onClick={() => setDraft("")}
+						/>
+						<Button
+							label="Comment"
+							variant="primary"
+							isDisabled={draft.trim().length === 0}
+							onClick={submit}
+						/>
+					</HStack>
+				</VStack>
+			</VStack>
+		</Section>
+	);
+}
+
+// ─── Properties rail ────────────────────────────────────────────────────────
+// Rendered in the LayoutPanel on wide screens and in the Drawer below 1024px.
+// It owns the record's editable fields, so it is one component with two hosts
+// rather than two copies that drift.
+function PropertiesPanel({
+	fields,
+	onFieldsChange,
+	watchers,
+}: {
+	fields: WorkItemFields;
+	onFieldsChange: (patch: Partial<WorkItemFields>) => void;
+	watchers: string[];
+}) {
+	return (
+		<VStack gap={6}>
+			<VStack gap={4}>
+				<SectionHeader title="Properties" level={3} />
+				<Selector
+					label="Status"
+					width="100%"
+					value={fields.status}
+					onChange={(status) => onFieldsChange({ status })}
+					options={STATUS_OPTIONS}
+				/>
+				<Selector
+					label="Priority"
+					width="100%"
+					value={fields.priority}
+					onChange={(priority) => onFieldsChange({ priority })}
+					options={PRIORITY_OPTIONS}
+					renderValue={(option) => <PriorityBadge value={option.value} />}
+					renderOption={(option) => <PriorityBadge value={option.value} />}
+				/>
+				<Selector
+					label="Assignee"
+					width="100%"
+					hasSearch
+					searchPlaceholder="Search people…"
+					value={fields.assignee}
+					onChange={(assignee) => onFieldsChange({ assignee })}
+					options={ASSIGNEE_OPTIONS}
+				/>
+				<Tokenizer
+					label="Labels"
+					width="100%"
+					hasEntriesOnFocus
+					placeholder="Add a label"
+					searchSource={LABEL_SEARCH_SOURCE}
+					value={fields.labels}
+					onChange={(labels) => onFieldsChange({ labels })}
+					renderToken={(label, onRemove) => (
+						<Token size="sm" color="yellow" label={label.label} onRemove={onRemove} />
+					)}
+				/>
+			</VStack>
+
+			<VStack gap={4}>
+				<SectionHeader title="Details" level={3} />
+				<MetadataList>
+					<MetadataListItem label="Reporter">
+						<PersonRow name={REPORTER} />
+					</MetadataListItem>
+					<MetadataListItem label="Start date">
+						<Timestamp value={START_DATE} format="date" type="body" color="primary" />
+					</MetadataListItem>
+					<MetadataListItem label="Due date">
+						<Timestamp value={DUE_DATE} format="date" type="body" color="primary" />
+					</MetadataListItem>
+					<MetadataListItem label="Sprint">
+						<Text type="body">{SPRINT}</Text>
+					</MetadataListItem>
+					<MetadataListItem label="Parent">
+						{/* Navigation inside a metadata row: the link is a
+						    destination, so it carries no underline of its own. */}
+						<Link href={SELF_HASH}>PLT-192 · Activation initiative</Link>
+					</MetadataListItem>
+					<MetadataListItem label="Team">
+						<Text type="body">{TEAM}</Text>
+					</MetadataListItem>
+				</MetadataList>
+			</VStack>
+
+			<VStack gap={4}>
+				<SectionHeader
+					title="Watchers"
+					level={3}
+					meta={
+						<Text type="supporting" color="secondary" hasTabularNumbers>
+							{watchers.length} watching
+						</Text>
+					}
+				/>
+				<AvatarGroup size="sm">
+					{watchers.map((name) => (
+						<Avatar key={name} name={name} />
+					))}
+				</AvatarGroup>
+			</VStack>
+
+			<VStack gap={4}>
+				<SectionHeader title="Linked items" level={3} />
+				<VStack gap={1}>
+					{LINKED_ITEMS.map((item) => (
+						<ClickableCard
+							key={item.id}
+							label={`Open ${item.id}: ${item.title}`}
+							href={SELF_HASH}
+							padding={3}
+						>
+							<VStack gap={0}>
+								<Text type="supporting" color="secondary">
+									{item.id}
+								</Text>
+								<Text type="body" weight="semibold">
+									{item.title}
+								</Text>
+							</VStack>
+						</ClickableCard>
+					))}
+				</VStack>
+			</VStack>
+		</VStack>
+	);
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+export default function WorkItemDetail() {
+	const [fields, setFields] = useState<WorkItemFields>({
+		status: "in_progress",
+		assignee: "priya-shah",
+		priority: "high",
+		labels: LABEL_OPTIONS,
+	});
+	const [subtasks, setSubtasks] = useState(SUBTASKS);
+	const [activity, setActivity] = useState(ACTIVITY);
+	const [isWatching, setWatching] = useState(false);
+	// The rail is docked at desktop width and becomes a Drawer below 1024px, so
+	// the drawer keeps its own flag and only exists on narrow viewports.
+	const [isPropertiesOpen, setPropertiesOpen] = useState(false);
+	const isNarrow = useMediaQuery("(max-width: 1024px)");
+
+	// One derivation each, read by every place that prints the number: the
+	// header summary, the subtask progress row and the section metas.
+	const doneCount = subtasks.filter((task) => task.isDone).length;
+	const commentCount = activity.filter((entry) => entry.kind === "comment").length;
+	const watchers = isWatching ? [CURRENT_USER, ...WATCHERS] : WATCHERS;
+
+	const updateFields = (patch: Partial<WorkItemFields>) =>
+		setFields((previous) => ({ ...previous, ...patch }));
+
+	const setSubtaskDone = (id: number, isDone: boolean) =>
+		setSubtasks((previous) =>
+			previous.map((task) => (task.id === id ? { ...task, isDone } : task)),
+		);
+
+	const addSubtask = (title: string) =>
+		setSubtasks((previous) => {
+			const nextId = previous.reduce((max, task) => Math.max(max, task.id), 0) + 1;
+			// No due date: the new row is unscheduled until someone sets one, and
+			// the row renders without the date rather than inventing a deadline.
+			return [...previous, { id: nextId, title, isDone: false, assignee: CURRENT_USER }];
+		});
+
+	const postComment = (body: string) =>
+		setActivity((previous) => {
+			const nextId = previous.reduce((max, entry) => Math.max(max, entry.id), 0) + 1;
+			return [
+				...previous,
+				{
+					id: nextId,
+					kind: "comment",
+					author: CURRENT_USER,
+					time: new Date().toISOString(),
+					body,
+				},
+			];
+		});
+
+	return (
+		<>
+			<Layout
+				style={pageStyle}
+				height="fill"
+				header={
+					<PageHeader
+						fields={fields}
+						doneCount={doneCount}
+						subtaskCount={subtasks.length}
+						commentCount={commentCount}
+						isWatching={isWatching}
+						onToggleWatch={() => setWatching((previous) => !previous)}
+						isNarrow={isNarrow}
+						onOpenProperties={() => setPropertiesOpen(true)}
+					/>
+				}
+				content={
+					<LayoutContent role="main" padding={0}>
+						<VStack gap={0}>
+							<DescriptionSection />
+							<Divider />
+							<SubtasksSection
+								subtasks={subtasks}
+								doneCount={doneCount}
+								onSetDone={setSubtaskDone}
+								onAdd={addSubtask}
+							/>
+							<Divider />
+							<AttachmentsSection />
+							<Divider />
+							<ActivitySection
+								activity={activity}
+								commentCount={commentCount}
+								onPost={postComment}
+							/>
+						</VStack>
+					</LayoutContent>
+				}
+				end={
+					isNarrow ? undefined : (
+						<LayoutPanel
+							width={340}
+							padding={4}
+							hasDivider
+							role="complementary"
+							label="Task properties"
+						>
+							<PropertiesPanel fields={fields} onFieldsChange={updateFields} watchers={watchers} />
+						</LayoutPanel>
+					)
+				}
+			/>
+			{/* Narrow viewport: the rail's content is a Drawer rather than a column
+			    that would squeeze the record. Every editable field therefore stays
+			    reachable from the header's properties button. */}
+			<Drawer
+				side="end"
+				label="Task properties"
+				isOpen={isNarrow && isPropertiesOpen}
+				onOpenChange={setPropertiesOpen}
+				width={340}
+			>
+				<Layout
+					height="fill"
+					header={<DrawerHeader title="Task properties" onOpenChange={setPropertiesOpen} />}
+					content={
+						<LayoutContent padding={4}>
+							<PropertiesPanel fields={fields} onFieldsChange={updateFields} watchers={watchers} />
+						</LayoutContent>
+					}
+				/>
+			</Drawer>
+		</>
+	);
+}