@heyramzi/ui 1.54.1 → 2.0.0

package/src/tasks/demo.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+	import KanbanBoard from "./kanban-board.svelte";
+	import TaskList from "./task-list.svelte";
+	import TaskGantt from "./task-gantt.svelte";
+	import { SegmentedFilter } from "../components/segmented/index.js";
+	import { ChartBarHorizontal, Kanban, ListBullets } from "phosphor-svelte";
+	import StatusBadge from "./status-badge.svelte";
+	import StatusDot from "./status-dot.svelte";
+	import { defineStatuses } from "./define-statuses.js";
+	import { addDays, dayNumber, todayIso } from "./dates.js";
+	import { salesStatuses } from "./presets/sales.js";
+	import type { KanbanMove } from "./kanban-types.js";
+	import type { GanttChange } from "./task-types.js";
+	import TimeTracker from "./time/time-tracker.svelte";
+	import TimeChip from "./time/time-chip.svelte";
+	import type { TimeLogInput, TimeStopInfo } from "./time/time-types.js";
+
+	type Priority = "low" | "medium" | "high";
+
+	type Task = {
+		id: string;
+		status: string;
+		title: string;
+		assignee: string;
+		priority: Priority;
+		boardOrder: string;
+		start: string;
+		end: string;
+		dependsOn?: string[];
+	};
+
+	const statuses = defineStatuses({
+		todo: { label: "To do", tone: "neutral", variant: "open" },
+		doing: { label: "In progress", tone: "info", variant: "progress", progress: 0.5 },
+		review: { label: "Review", tone: "warning", variant: "progress", progress: 0.75 },
+		done: { label: "Done", tone: "success", variant: "completed" },
+	});
+
+	const columns = [
+		{ id: "todo", label: "To do", hue: "var(--color-muted-foreground)" },
+		{ id: "doing", label: "In progress", hue: "var(--color-info)" },
+		{ id: "review", label: "Review", hue: "var(--color-warning)" },
+		{ id: "done", label: "Done", hue: "var(--color-success)" },
+	];
+
+	const progressByStatus: Record<string, number> = { todo: 0, doing: 0.45, review: 0.8, done: 1 };
+
+	// Dates hang off today, so the timeline always opens on live work.
+	const today = todayIso();
+	const on = (days: number) => addDays(today, days);
+
+	let tasks = $state<Task[]>([
+		{ id: "t1", status: "done", title: "Set up analytics", assignee: "Bo", priority: "low", boardOrder: "a0", start: on(-12), end: on(-8) },
+		{ id: "t2", status: "done", title: "Interview five customers", assignee: "Cleo", priority: "medium", boardOrder: "a1", start: on(-10), end: on(-4) },
+		{ id: "t3", status: "review", title: "Write the pricing page", assignee: "Ada", priority: "high", boardOrder: "a0", start: on(-5), end: on(1), dependsOn: ["t2"] },
+		{ id: "t4", status: "doing", title: "Build the onboarding flow", assignee: "Dana", priority: "high", boardOrder: "a0", start: on(-3), end: on(5), dependsOn: ["t1"] },
+		{ id: "t5", status: "doing", title: "Draft the launch email", assignee: "Bo", priority: "medium", boardOrder: "a1", start: on(0), end: on(3), dependsOn: ["t3"] },
+		{ id: "t6", status: "todo", title: "Record the demo video", assignee: "Cleo", priority: "medium", boardOrder: "a0", start: on(4), end: on(8), dependsOn: ["t4"] },
+		{ id: "t7", status: "todo", title: "Pick a shipping date", assignee: "Ada", priority: "low", boardOrder: "a1", start: on(6), end: on(6) },
+		{ id: "t8", status: "todo", title: "Launch on Product Hunt", assignee: "Dana", priority: "high", boardOrder: "a2", start: on(10), end: on(11), dependsOn: ["t5", "t6"] },
+	]);
+
+	const views = [
+		{ value: "board", label: "Board", icon: Kanban },
+		{ value: "list", label: "List", icon: ListBullets },
+		{ value: "gantt", label: "Gantt", icon: ChartBarHorizontal },
+	] as const;
+	const scales = [
+		{ value: "days", label: "Days" },
+		{ value: "weeks", label: "Weeks" },
+	] as const;
+
+	let view = $state<(typeof views)[number]["value"]>("board");
+	let sortKey = $state("manual");
+	let scale = $state<"days" | "weeks">("days");
+
+	const sortKeys = [
+		{ id: "title", label: "Title", compare: (a: Task, b: Task) => a.title.localeCompare(b.title) },
+		{ id: "assignee", label: "Assignee", compare: (a: Task, b: Task) => a.assignee.localeCompare(b.assignee) },
+		{ id: "due", label: "Due date", compare: (a: Task, b: Task) => a.end.localeCompare(b.end) },
+	];
+
+	const priorityClass: Record<Priority, string> = {
+		low: "bg-muted text-muted-foreground",
+		medium: "bg-warning/15 text-warning-700 dark:text-warning-400",
+		high: "bg-destructive/15 text-destructive",
+	};
+
+	const people: Record<string, string> = {
+		Ada: "oklch(0.72 0.12 280)",
+		Bo: "oklch(0.74 0.12 160)",
+		Cleo: "oklch(0.76 0.12 60)",
+		Dana: "oklch(0.72 0.13 20)",
+	};
+
+	const dueFormat = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
+
+	function due(task: Task): { label: string; late: boolean } {
+		const late = task.status !== "done" && dayNumber(task.end) < dayNumber(today);
+		return { label: dueFormat.format(new Date(`${task.end}T00:00:00Z`)), late };
+	}
+
+	function onMove(id: string, move: KanbanMove) {
+		tasks = tasks.map((task) =>
+			task.id === id
+				? { ...task, status: move.columnId, boardOrder: move.boardOrder ?? task.boardOrder }
+				: task,
+		);
+	}
+
+	function onChange(id: string, change: GanttChange) {
+		tasks = tasks.map((task) => (task.id === id ? { ...task, ...change } : task));
+	}
+
+	// ---- time tracking, an option the host turns on
+	type Entry = { id: string; taskId: string; person: string; day: string; minutes: number; note?: string };
+
+	const estimates: Record<string, number> = { t3: 360, t4: 480, t5: 180, t6: 240 };
+
+	let tracking = $state(true);
+	let timeTaskId = $state("t4");
+	let nextEntry = 100;
+	let entries = $state<Entry[]>([
+		{ id: "e1", taskId: "t4", person: "Dana", day: on(-3), minutes: 150, note: "Signup and email step" },
+		{ id: "e2", taskId: "t4", person: "Ada", day: on(-2), minutes: 95, note: "Copy for the welcome screen" },
+		{ id: "e3", taskId: "t4", person: "Dana", day: on(-2), minutes: 125, note: "Progress bar and empty states" },
+		{ id: "e4", taskId: "t4", person: "Dana", day: on(-1), minutes: 80 },
+		{ id: "e5", taskId: "t3", person: "Ada", day: on(-5), minutes: 210, note: "First draft" },
+		{ id: "e6", taskId: "t3", person: "Bo", day: on(-3), minutes: 95, note: "Pricing table" },
+		{ id: "e7", taskId: "t3", person: "Ada", day: on(-1), minutes: 85, note: "Review changes" },
+		{ id: "e8", taskId: "t5", person: "Bo", day: on(0), minutes: 40 },
+		{ id: "e9", taskId: "t1", person: "Bo", day: on(-12), minutes: 60 },
+	]);
+	// The host keeps the running timer. A reload would read it back from storage.
+	let timer = $state<{ taskId: string; startedAt: number } | null>({
+		taskId: "t4",
+		startedAt: Date.now() - (12 * 60 + 41) * 1000,
+	});
+
+	let minutesByTask = $derived.by(() => {
+		const totals: Record<string, number> = {};
+		for (const entry of entries) totals[entry.taskId] = (totals[entry.taskId] ?? 0) + entry.minutes;
+		return totals;
+	});
+	let timeEntries = $derived(entries.filter((entry) => entry.taskId === timeTaskId));
+	let timeRunning = $derived(timer?.taskId === timeTaskId ? { startedAt: timer.startedAt } : null);
+
+	function addEntry(taskId: string, day: string, minutes: number, note?: string) {
+		entries = [{ id: `e${nextEntry++}`, taskId, person: "Dana", day, minutes, note }, ...entries];
+	}
+
+	function onLog(input: TimeLogInput) {
+		addEntry(timeTaskId, input.day, input.minutes, input.note);
+	}
+
+	function onStop(info: TimeStopInfo) {
+		if (timer) addEntry(timer.taskId, info.day, info.minutes);
+		timer = null;
+	}
+
+	const listGrid = "grid grid-cols-[minmax(0,1fr)_7rem_5.5rem_4.5rem] items-center gap-3 max-sm:grid-cols-[minmax(0,1fr)_4.5rem]";
+</script>
+
+{#snippet avatar(name: string)}
+	<span
+		class="grid size-5 shrink-0 place-items-center rounded-full text-[10px] font-semibold text-white"
+		style:background={people[name] ?? "var(--color-muted-foreground)"}
+		aria-hidden="true"
+	>
+		{name[0]}
+	</span>
+{/snippet}
+
+<div class="flex flex-col gap-6 rounded-xl border border-border bg-background p-4">
+	<div class="flex h-[600px] flex-col gap-3">
+		<div class="flex flex-wrap items-center gap-2">
+			<SegmentedFilter options={views} bind:value={view} ariaLabel="Task view" block={false} />
+			<div class="ml-auto flex items-center gap-3">
+				<label class="flex cursor-pointer items-center gap-1.5 text-xs font-medium text-muted-foreground">
+					<input type="checkbox" bind:checked={tracking} class="size-3.5 accent-[var(--tone-accent,var(--color-primary))]" />
+					Time tracking
+				</label>
+				{#if view === "gantt"}
+					<SegmentedFilter options={scales} bind:value={scale} ariaLabel="Timeline scale" block={false} />
+				{:else}
+					<label for="tasks-sort" class="text-xs font-medium text-muted-foreground">Sort</label>
+					<select
+						id="tasks-sort"
+						bind:value={sortKey}
+						class="h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+					>
+						<option value="manual">Manual</option>
+						{#each sortKeys as key (key.id)}
+							<option value={key.id}>{key.label}</option>
+						{/each}
+					</select>
+				{/if}
+			</div>
+		</div>
+
+		{#key view}
+			<div class="tasks-view flex min-h-0 flex-1 flex-col">
+				{#if view === "board"}
+					<KanbanBoard
+						{columns}
+						items={tasks}
+						getId={(task) => task.id}
+						getColumn={(task) => task.status}
+						{sortKey}
+						{sortKeys}
+						boardOrder={(task) => task.boardOrder}
+						{onMove}
+					>
+						{#snippet renderCard(task)}
+							{@const d = due(task)}
+							<article class="rounded-xl border border-border bg-card p-2.5 text-card-foreground shadow-sm">
+								<p class="text-sm leading-snug">{task.title}</p>
+								<div class="mt-2.5 flex items-center gap-2 text-xs">
+									{@render avatar(task.assignee)}
+									<span class={d.late ? "font-medium text-destructive" : "text-muted-foreground"}>{d.label}</span>
+									{#if tracking}
+										<TimeChip minutes={minutesByTask[task.id] ?? 0} estimate={estimates[task.id]} running={timer?.taskId === task.id} />
+									{/if}
+									<span class="ml-auto rounded-full px-1.5 py-0.5 font-medium capitalize {priorityClass[task.priority]}">
+										{task.priority}
+									</span>
+								</div>
+							</article>
+						{/snippet}
+					</KanbanBoard>
+				{:else if view === "list"}
+					<TaskList
+						groups={columns}
+						items={tasks}
+						getId={(task) => task.id}
+						getGroup={(task) => task.status}
+						{sortKey}
+						{sortKeys}
+						boardOrder={(task) => task.boardOrder}
+						{onMove}
+					>
+						{#snippet head()}
+							<div class="{listGrid} w-full px-3.5">
+								<span class="pl-6">Task</span>
+								<span class="max-sm:hidden">Assignee</span>
+								<span class="max-sm:hidden">Priority</span>
+								<span class="text-right">Due</span>
+							</div>
+						{/snippet}
+						{#snippet renderRow(task)}
+							{@const d = due(task)}
+							<div class="{listGrid} h-10 px-2 text-sm">
+								<span class="flex min-w-0 items-center gap-2.5">
+									{#key task.status}
+										<StatusDot statuses={statuses} status={task.status} />
+									{/key}
+									<span class="truncate" class:text-muted-foreground={task.status === "done"} class:line-through={task.status === "done"}>
+										{task.title}
+									</span>
+									{#if tracking}
+										<TimeChip minutes={minutesByTask[task.id] ?? 0} estimate={estimates[task.id]} running={timer?.taskId === task.id} />
+									{/if}
+								</span>
+								<span class="flex min-w-0 items-center gap-2 text-muted-foreground max-sm:hidden">
+									{@render avatar(task.assignee)}
+									<span class="truncate">{task.assignee}</span>
+								</span>
+								<span class="max-sm:hidden">
+									<span class="rounded-full px-1.5 py-0.5 text-xs font-medium capitalize {priorityClass[task.priority]}">
+										{task.priority}
+									</span>
+								</span>
+								<span class="text-right text-xs tabular-nums {d.late ? 'font-medium text-destructive' : 'text-muted-foreground'}">
+									{d.label}
+								</span>
+							</div>
+						{/snippet}
+					</TaskList>
+				{:else}
+					<TaskGantt
+						items={tasks}
+						getId={(task) => task.id}
+						getTitle={(task) => task.title}
+						getStart={(task) => task.start}
+						getEnd={(task) => task.end}
+						getProgress={(task) => progressByStatus[task.status]}
+						getDependsOn={(task) => task.dependsOn}
+						groups={columns}
+						getGroup={(task) => task.status}
+						{today}
+						dayWidth={scale === "days" ? 32 : 14}
+						labelWidth={220}
+						{onChange}
+					>
+						{#snippet renderLabel(task)}
+							<StatusDot statuses={statuses} status={task.status} />
+							<span class="min-w-0 flex-1 truncate">{task.title}</span>
+							{@render avatar(task.assignee)}
+						{/snippet}
+					</TaskGantt>
+				{/if}
+			</div>
+		{/key}
+
+		<p class="text-xs text-muted-foreground/70">
+			{#if view === "board"}
+				Drag a card between columns, or focus one and press Alt plus Left or Right.
+			{:else if view === "list"}
+				Drag a row between groups, or focus one and press Alt plus Up or Down.
+			{:else}
+				Drag a bar to move it, or its edges to resize. Arrow keys nudge a focused bar a day.
+			{/if}
+		</p>
+	</div>
+
+	{#if tracking}
+		<section class="flex flex-col gap-3 border-t border-border pt-4">
+			<div class="flex items-center justify-between gap-3">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Task time</h3>
+				<select
+					bind:value={timeTaskId}
+					aria-label="Task"
+					class="h-8 max-w-[60%] rounded-md border border-border bg-background px-2 text-xs text-foreground"
+				>
+					{#each tasks as task (task.id)}
+						<option value={task.id}>{task.title}</option>
+					{/each}
+				</select>
+			</div>
+			<TimeTracker
+				class="mx-auto w-full max-w-xl"
+				entries={timeEntries}
+				getId={(entry) => entry.id}
+				getMinutes={(entry) => entry.minutes}
+				getDay={(entry) => entry.day}
+				getPerson={(entry) => entry.person}
+				getNote={(entry) => entry.note}
+				estimate={estimates[timeTaskId]}
+				running={timeRunning}
+				onStart={() => {
+					timer = { taskId: timeTaskId, startedAt: Date.now() };
+				}}
+				{onStop}
+				{onLog}
+				onDelete={(entry) => {
+					entries = entries.filter((row) => row.id !== entry.id);
+				}}
+			/>
+		</section>
+	{/if}
+
+	<section class="flex flex-col gap-2 border-t border-border pt-4">
+		<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Status badges</h3>
+		<div class="flex flex-wrap items-center gap-2">
+			{#each salesStatuses.ids as id (id)}
+				<StatusBadge statuses={salesStatuses} status={id} />
+			{/each}
+		</div>
+		<ul class="mt-1 flex flex-col gap-1.5">
+			{#each salesStatuses.ids.slice(0, 3) as id (id)}
+				<li class="flex items-center gap-3 text-sm">
+					<StatusDot statuses={salesStatuses} status={id} />
+					<span class="text-foreground">{salesStatuses.label(id)}</span>
+				</li>
+			{/each}
+		</ul>
+	</section>
+</div>
+
+<style>
+	/* Switching views: the new one rises in with a touch of blur, the old one is gone at once. */
+	.tasks-view {
+		animation: tasks-view-in var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+	}
+
+	@keyframes tasks-view-in {
+		from {
+			opacity: 0;
+			transform: translateY(var(--distance-base, 8px));
+			filter: blur(var(--blur-small, 2px));
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.tasks-view {
+			animation: none;
+		}
+	}
+</style>

package/src/tasks/detail/detail-demo.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { CalendarBlank, CircleDashed, Flag, Folder, User } from "phosphor-svelte";
+	import TaskDetail from "./task-detail.svelte";
+	import TaskProperty from "./task-property.svelte";
+	import TaskChip from "./task-chip.svelte";
+	import TimeTracker from "../time/time-tracker.svelte";
+	import StatusDot from "../status-dot.svelte";
+	import { defineStatuses } from "../define-statuses.js";
+	import type { TaskComment } from "./detail-types.js";
+	import type { TimeLogInput, TimeStopInfo } from "../time/time-types.js";
+
+	type Scenario = "default" | "long" | "emptyDescription" | "unassigned" | "running" | "busy" | "closed" | "loading";
+
+	const statuses = defineStatuses({
+		todo: { label: "To do", tone: "neutral", variant: "open" },
+		doing: { label: "In progress", tone: "info", variant: "progress", progress: 0.5 },
+		done: { label: "Done", tone: "success", variant: "completed" },
+	});
+
+	const scenarios: { id: Scenario; label: string }[] = [
+		{ id: "default", label: "Default" },
+		{ id: "long", label: "Long title" },
+		{ id: "emptyDescription", label: "Empty description" },
+		{ id: "unassigned", label: "No assignee" },
+		{ id: "running", label: "Running timer" },
+		{ id: "busy", label: "24 comments" },
+		{ id: "closed", label: "Closed" },
+		{ id: "loading", label: "Loading" },
+	];
+
+	const people = ["Ada Lovelace", "Bo Chen", "Cy Park"];
+	const now = Date.now();
+	const hour = 3_600_000;
+	const stamp = (agoHours: number) => new Date(now - agoHours * hour).toISOString();
+
+	const seed: TaskComment[] = [
+		{ id: "c1", author: "Ada Lovelace", body: "Calls with Yoan: the format that sold the template was simple. A board on why, then the system, then the demo.", createdAt: stamp(30) },
+		{ id: "c2", author: "Planner", agent: true, body: "Reused that shape for the outline. Three sections, the demo last, one call to action at the end.", createdAt: stamp(26) },
+		{ id: "c3", author: "Bo Chen", body: "Looks right. I'll record Thursday.", createdAt: stamp(5), edited: true },
+	];
+	const crowd: TaskComment[] = Array.from({ length: 24 }, (_, i) => ({
+		id: `b${i}`,
+		author: i % 4 === 1 ? "Planner" : people[i % people.length] ?? "Ada Lovelace",
+		agent: i % 4 === 1,
+		body: i % 5 === 0 ? "Pushed the second cut. The intro runs 40 seconds, so I trimmed the first example and kept the one with numbers." : "Noted, moving on to the next step.",
+		createdAt: stamp(60 - i * 2),
+	}));
+
+	const longTitle =
+		"Run one awareness-only live session for an entrepreneur group, record it, and hand the raw take to the editor with a thumbnail brief";
+	const brief =
+		"Record the video about how the notebook is orchestrated.\n\nSteps: pick the angle from the notebook's own list, record, drop the raw take in the drive, and open one task per handoff (editor cut, thumbnail, storage link).\n\nDone when the raw take is in the drive and the three handoff tasks exist.";
+
+	let scenario = $state<Scenario>("default");
+	let narrow = $state(false);
+	let title = $state("Record the video and hand it off");
+	let description = $state<string | null>(brief);
+	let thread = $state<TaskComment[]>([...seed]);
+	let done = $state(false);
+	let timer = $state<{ startedAt: number } | null>(null);
+	let entries = $state([
+		{ id: "e1", minutes: 90, day: new Date(now - 24 * hour).toISOString().slice(0, 10), person: "Ada Lovelace", note: "Outline" },
+	]);
+
+	$effect(() => {
+		const s = scenario;
+		title = s === "long" ? longTitle : "Record the video and hand it off";
+		description = s === "emptyDescription" ? null : brief;
+		thread = s === "busy" ? [...crowd] : s === "loading" ? [] : [...seed];
+		done = s === "closed";
+		timer = s === "running" ? { startedAt: Date.now() - 754_000 } : null;
+	});
+
+	let assignee = $derived(scenario === "unassigned" ? null : "Ada Lovelace");
+	let status = $derived(done ? "done" : scenario === "running" ? "doing" : "todo");
+	let statusLabel = $derived(statuses.label(status));
+
+	function onLog(input: TimeLogInput) {
+		entries = [{ id: `e${entries.length + 1}`, minutes: input.minutes, day: input.day, person: "Ada Lovelace", note: input.note ?? "" }, ...entries];
+		return true;
+	}
+
+	function onStop(info: TimeStopInfo) {
+		onLog({ minutes: info.minutes, day: info.day });
+		timer = null;
+	}
+
+	function onSend(body: string) {
+		thread = [...thread, { id: `n${thread.length}`, author: "Ada Lovelace", body, createdAt: new Date().toISOString() }];
+	}
+</script>
+
+<div class="flex flex-col gap-3">
+	<div class="flex flex-wrap items-center gap-1.5" role="group" aria-label="Scenario">
+		{#each scenarios as item (item.id)}
+			<button
+				type="button"
+				aria-pressed={scenario === item.id}
+				onclick={() => (scenario = item.id)}
+				class="h-7 rounded-md border border-border px-2.5 text-[13px] font-medium transition-colors hover:bg-muted aria-pressed:bg-foreground aria-pressed:text-background"
+			>
+				{item.label}
+			</button>
+		{/each}
+		<button
+			type="button"
+			aria-pressed={narrow}
+			onclick={() => (narrow = !narrow)}
+			class="ms-auto h-7 rounded-md border border-border px-2.5 text-[13px] font-medium transition-colors hover:bg-muted aria-pressed:bg-foreground aria-pressed:text-background"
+		>
+			390 wide
+		</button>
+	</div>
+
+	<div class="mx-auto w-full overflow-hidden rounded-xl border border-border bg-background" style:max-width={narrow ? "390px" : "none"}>
+		<TaskDetail
+			{title}
+			onTitleChange={(next) => {
+				title = next;
+			}}
+			{done}
+			closed={done}
+			onToggleDone={() => (done = !done)}
+			{description}
+			onDescriptionChange={(next) => {
+				description = next;
+			}}
+			comments={thread}
+			loadingComments={scenario === "loading"}
+			{onSend}
+			onDeleteComment={(comment) => {
+				thread = thread.filter((row) => row.id !== comment.id);
+			}}
+			canEditComment={(comment) => !comment.agent && comment.author === "Ada Lovelace"}
+		>
+			{#snippet meta()}
+				<span>From a call</span>
+				<span class="tabular-nums">Created Sep 9, 2026</span>
+			{/snippet}
+			{#snippet properties()}
+				<TaskProperty label="Status">
+					<TaskChip aria-label="Status: {statusLabel}"><StatusDot {statuses} {status} size={14} animate={false} />{statusLabel}</TaskChip>
+				</TaskProperty>
+				<TaskProperty label="Priority">
+					<TaskChip><Flag weight="fill" class="text-destructive" aria-hidden="true" />High</TaskChip>
+				</TaskProperty>
+				<TaskProperty label="Assignee">
+					{#if assignee}
+						<TaskChip>
+							<span class="grid size-4 place-items-center rounded-full bg-muted text-[0px]" aria-hidden="true"><User /></span>
+							{assignee}
+						</TaskChip>
+					{:else}
+						<TaskChip empty><CircleDashed aria-hidden="true" />Assign</TaskChip>
+					{/if}
+				</TaskProperty>
+				<TaskProperty label="Due date">
+					<TaskChip><CalendarBlank aria-hidden="true" />Oct 9, 2026</TaskChip>
+				</TaskProperty>
+				<TaskProperty label="Project">
+					<TaskChip><Folder aria-hidden="true" />Agency OS</TaskChip>
+				</TaskProperty>
+				<TaskProperty label="Time">
+					<TimeTracker
+						{entries}
+						running={timer}
+						estimate={240}
+						getId={(entry) => entry.id}
+						getMinutes={(entry) => entry.minutes}
+						getDay={(entry) => entry.day}
+						getPerson={(entry) => entry.person}
+						getNote={(entry) => entry.note}
+						onStart={() => {
+							timer = { startedAt: Date.now() };
+						}}
+						{onStop}
+						{onLog}
+						onDelete={(entry) => {
+							entries = entries.filter((row) => row.id !== entry.id);
+						}}
+					/>
+				</TaskProperty>
+			{/snippet}
+		</TaskDetail>
+	</div>
+</div>

package/src/tasks/detail/detail-types.ts

@@ -0,0 +1,54 @@
+/** One entry in a task's thread. The host resolves the author's name. */
+export type TaskComment = {
+	id: string;
+	author: string;
+	body: string;
+	/** ISO timestamp. */
+	createdAt: string;
+	/** An agent wrote it: the thread draws the agent avatar and an "AI" label. */
+	agent?: boolean;
+	/** Set when the body changed after posting. */
+	edited?: boolean;
+};
+
+export type TaskDetailLabels = {
+	markComplete: string;
+	markIncomplete: string;
+	editTitle: string;
+	description: string;
+	addDescription: string;
+	editDescription: string;
+	save: string;
+	saving: string;
+	cancel: string;
+	comments: string;
+	commentPlaceholder: string;
+	commentSend: string;
+	commentEdit: string;
+	commentDelete: string;
+	commentEdited: string;
+	commentsEmpty: string;
+	ai: string;
+	properties: string;
+};
+
+export const DEFAULT_TASK_DETAIL_LABELS: TaskDetailLabels = {
+	markComplete: "Mark complete",
+	markIncomplete: "Mark incomplete",
+	editTitle: "Edit title",
+	description: "Description",
+	addDescription: "Add a description",
+	editDescription: "Edit description",
+	save: "Save",
+	saving: "Saving",
+	cancel: "Cancel",
+	comments: "Activity",
+	commentPlaceholder: "Leave a comment",
+	commentSend: "Comment",
+	commentEdit: "Edit comment",
+	commentDelete: "Delete comment",
+	commentEdited: "edited",
+	commentsEmpty: "No comments yet",
+	ai: "AI",
+	properties: "Properties",
+};

package/src/tasks/detail/task-chip.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { cn } from "../../lib/utils.js";
+
+	interface Props extends Omit<HTMLButtonAttributes, "children"> {
+		/** No value yet: the label is a prompt and recedes until hovered. */
+		empty?: boolean;
+		children: Snippet;
+	}
+
+	let { empty = false, class: className, children, ...rest }: Props = $props();
+</script>
+
+<!-- The one box every property value sits in: 28px, 40 under a coarse pointer. -->
+<button
+	type="button"
+	class={cn(
+		"inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md ps-1.5 pe-2.5 text-[13px] whitespace-nowrap outline-none select-none any-pointer-coarse:h-10",
+		"transition-colors hover:bg-muted data-[state=open]:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50",
+		"disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0",
+		empty && "text-muted-foreground hover:text-foreground",
+		className,
+	)}
+	{...rest}
+>
+	{@render children()}
+</button>