@vibesdotdev/workboard 0.0.0-stage → 1.0.0-rc.0

package/dist/svelte/components/LaneBoardTaskRow.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { Button, Icon, Input, Label, NativeSelect, NativeSelectOption } from '@vibesdotdev/kit/components';
+	import { TabbedMarkdownEditor } from '@vibesdotdev/kit/components/code';
+	import type { WorkboardTaskPatch } from '../../schemas/contracts.js';
+	import type { TaskStatus, WorkboardTask } from '../../types.js';
+	import {
+		glanceLine,
+		isStale,
+		normalizeLaneId,
+		ownerKey,
+		ownerLabel,
+		ownerStatus,
+		type AgentLabelMap
+	} from '../lane-board.js';
+	import { timeAgo } from '../workboard-utils.js';
+	import PriorityBadge from './PriorityBadge.svelte';
+	import StatusBadge from './StatusBadge.svelte';
+
+	type TaskLink = NonNullable<WorkboardTask['links']>[number];
+	export type RelatedWorkLink = { href: string; label: string; icon?: string; description?: string };
+
+	let {
+		task,
+		expanded,
+		agents = {},
+		now,
+		busy = false,
+		laneIds,
+		resolveRelatedLink,
+		ontoggle,
+		onstatus,
+		onblock,
+		onassignment,
+		onnote,
+		onarchive
+	}: {
+		task: WorkboardTask;
+		expanded: boolean;
+		agents?: AgentLabelMap;
+		now: number;
+		busy?: boolean;
+		laneIds: string[];
+		resolveRelatedLink: (link: TaskLink) => RelatedWorkLink | null;
+		ontoggle: () => void;
+		onstatus: (status: TaskStatus) => void | Promise<void>;
+		onblock: (reason: string) => Promise<boolean>;
+		onassignment: (patch: { assigned_to?: string; lane?: string }) => void | Promise<void>;
+		onnote: (text: string) => Promise<boolean>;
+		onarchive: () => void;
+	} = $props();
+
+	let editOwner = $state('');
+	let editLane = $state('');
+	let editingTaskId = $state<string | null>(null);
+	let blocking = $state(false);
+	let blockReason = $state('');
+	let noteText = $state('');
+
+	const glance = $derived(glanceLine(task));
+	const stale = $derived(isStale(task, now));
+	const taskOwnerKey = $derived(ownerKey(task));
+	const taskOwnerStatus = $derived(ownerStatus(task, agents));
+	const related = $derived((task.links ?? []).flatMap((link) => resolveRelatedLink(link) ?? []));
+	const assignmentChanged = $derived(
+		editOwner.trim() !== task.assigned_to || normalizeLaneId(editLane) !== task.lane
+	);
+
+	$effect(() => {
+		if (expanded && editingTaskId !== task.id) {
+			editOwner = task.assigned_to;
+			editLane = task.lane;
+			editingTaskId = task.id;
+			return;
+		}
+		if (expanded) return;
+		editOwner = task.assigned_to;
+		editLane = task.lane;
+		editingTaskId = null;
+		blocking = false;
+		blockReason = '';
+		noteText = '';
+	});
+
+	function onEnter(event: KeyboardEvent, action: () => void) {
+		if (event.key !== 'Enter' || event.isComposing) return;
+		event.preventDefault();
+		action();
+	}
+
+	function statusClass(status: string | null): string {
+		if (status === 'active') return 'bg-success';
+		if (status === 'idle') return 'bg-warning';
+		if (status === 'error') return 'bg-destructive';
+		return 'bg-muted-foreground/40';
+	}
+
+	async function saveAssignment() {
+		const patch: WorkboardTaskPatch = {};
+		if (editOwner.trim() !== task.assigned_to) patch.assigned_to = editOwner.trim();
+		if (normalizeLaneId(editLane) !== task.lane) patch.lane = normalizeLaneId(editLane);
+		if (Object.keys(patch).length > 0) await onassignment(patch);
+	}
+
+	async function confirmBlock() {
+		if (!(await onblock(blockReason.trim()))) return;
+		blocking = false;
+		blockReason = '';
+	}
+
+	async function addNote() {
+		const text = noteText.trim();
+		if (text && (await onnote(text))) noteText = '';
+	}
+</script>
+
+<div id={`workboard-task-${task.id}`} class="px-4 py-3">
+	<Button type="button" variant="ghost" class="h-auto w-full flex-col items-stretch gap-1.5 rounded-lg px-0 py-0 text-left font-normal hover:bg-transparent" aria-expanded={expanded} onclick={ontoggle}>
+		<span class="flex flex-wrap items-center gap-2">
+			<StatusBadge status={task.status} /><span class="font-medium {task.status === 'completed' ? 'line-through opacity-60' : ''}">{task.title}</span>
+			{#if task.displayId}<span class="font-mono text-xs text-muted-foreground">{task.displayId}</span>{/if}<PriorityBadge priority={task.priority} />
+			<span class="ml-auto inline-flex items-center gap-2 text-xs text-muted-foreground">
+				<span class="inline-flex max-w-48 items-center gap-1 truncate rounded-full border bg-background/60 px-2 py-0.5 {taskOwnerKey ? 'text-foreground' : 'italic text-muted-foreground'}" title={taskOwnerKey ? `Owner: ${taskOwnerKey}` : 'No owner yet'}>
+					{#if taskOwnerStatus}<span class="size-1.5 shrink-0 rounded-full {statusClass(taskOwnerStatus)}" aria-hidden="true"></span>{:else}<Icon icon={taskOwnerKey ? 'lucide:user' : 'lucide:user-x'} class="size-3 shrink-0" aria-hidden="true" />{/if}<span class="truncate">{ownerLabel(task, agents)}</span>
+				</span>
+				{#if stale}<span class="rounded-full border border-warning/30 bg-warning/10 px-2 py-0.5 text-warning" title="No update in over 24 hours">stale</span>{/if}
+				<span title={new Date(task.updated_at).toLocaleString()}>{timeAgo(task.updated_at)}</span><Icon icon="lucide:chevron-down" class="size-4 transition-transform {expanded ? 'rotate-180' : ''}" aria-hidden="true" />
+			</span>
+		</span>
+		{#if glance.kind === 'blocker'}<span class="flex items-start gap-1.5 text-sm text-destructive"><Icon icon="lucide:octagon-alert" class="mt-0.5 size-3.5 shrink-0" aria-hidden="true" /><span><span class="font-medium">Blocked:</span> {glance.text || 'no reason recorded — expand and add a note'}{#if glance.by}<span class="text-xs opacity-70"> — {glance.by}, {timeAgo(glance.at ?? '')}</span>{/if}</span></span>{:else if glance.kind === 'next'}<span class="flex items-start gap-1.5 text-sm text-muted-foreground"><Icon icon="lucide:corner-down-right" class="mt-0.5 size-3.5 shrink-0" aria-hidden="true" /><span>{glance.text}{#if glance.by}<span class="text-xs opacity-70"> — {glance.by}, {timeAgo(glance.at ?? '')}</span>{/if}</span></span>{/if}
+	</Button>
+
+	{#if expanded}
+		<div class="mt-3 rounded-xl border bg-background/30 p-4 text-sm">
+			{#if task.description}<div class="mb-3"><span class="font-medium text-muted-foreground">Description</span><div class="prose prose-sm dark:prose-invert mt-1 max-w-none"><TabbedMarkdownEditor code={task.description} value="preview" editorMinHeight="60px" editorProps={{ readOnly: true }} /></div></div>{/if}
+			<div class="flex flex-wrap gap-3 text-xs text-muted-foreground"><span>Updated {new Date(task.updated_at).toLocaleString()}</span><span>Created {new Date(task.created_at).toLocaleString()}</span>{#if task.displayId && task.authorityUrl}<a href={task.authorityUrl} class="inline-flex items-center gap-1 font-mono text-primary transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><Icon icon="lucide:external-link" class="size-3" aria-hidden="true" />{task.displayId} in project tracker</a>{/if}</div>
+
+			<div class="mt-3 grid gap-2 border-t pt-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] sm:items-end">
+				<Label class="flex flex-col items-stretch gap-1 text-xs text-muted-foreground">Owner<Input bind:value={editOwner} placeholder="Agent id or person (blank = unassigned)" list="workboard-owner-options" onkeydown={(event: KeyboardEvent) => onEnter(event, () => void saveAssignment())} /></Label>
+				<Label class="flex flex-col items-stretch gap-1 text-xs text-muted-foreground">Lane<NativeSelect bind:value={editLane}><NativeSelectOption value="">No lane</NativeSelectOption>{#each laneIds as laneId (laneId)}<NativeSelectOption value={laneId}>{laneId}</NativeSelectOption>{/each}</NativeSelect></Label>
+				<Button size="sm" variant="outline" disabled={busy || !assignmentChanged} onclick={saveAssignment}><Icon icon="lucide:save" class="size-3.5" aria-hidden="true" />Save</Button>
+			</div>
+
+			<div class="mt-3 flex flex-wrap gap-2 border-t pt-3">
+				{#if task.status === 'pending'}<Button variant="ghost" size="sm" disabled={busy} onclick={() => onstatus('in_progress')} class="rounded-lg bg-info/12 text-xs text-info-ink hover:bg-info/20"><Icon icon="lucide:play" class="size-3" />Start</Button>{/if}
+				{#if task.status === 'in_progress' || task.status === 'pending'}<Button variant="ghost" size="sm" disabled={busy} onclick={() => (blocking = true)} class="rounded-lg bg-destructive/12 text-xs text-destructive-ink hover:bg-destructive/20"><Icon icon="lucide:circle-alert" class="size-3" />Block</Button>{/if}
+				{#if task.status === 'in_progress'}<Button variant="ghost" size="sm" disabled={busy} onclick={() => onstatus('completed')} class="rounded-lg bg-success/14 text-xs text-success-ink hover:bg-success/22"><Icon icon="lucide:circle-check-big" class="size-3" />Complete</Button>{/if}
+				{#if task.status === 'blocked'}<Button variant="ghost" size="sm" disabled={busy} onclick={() => onstatus('in_progress')} class="rounded-lg bg-info/12 text-xs text-info-ink hover:bg-info/20"><Icon icon="lucide:play" class="size-3" />Unblock</Button>{/if}
+				{#if task.status === 'completed'}<Button variant="ghost" size="sm" disabled={busy} onclick={() => onstatus('pending')} class="rounded-lg bg-warning/16 text-xs text-warning-ink hover:bg-warning/24"><Icon icon="lucide:rotate-ccw" class="size-3" />Reopen</Button>{/if}
+				<Button variant="ghost" size="sm" disabled={busy} onclick={onarchive} class="rounded-lg bg-destructive/8 text-xs text-destructive-ink hover:bg-destructive/16"><Icon icon="lucide:archive" class="size-3" />Archive</Button>
+			</div>
+			{#if blocking}<div class="mt-2 flex flex-wrap gap-2"><Input bind:value={blockReason} class="min-w-64 flex-1" placeholder="What's blocking? (saved as the task's note)" onkeydown={(event: KeyboardEvent) => onEnter(event, () => void confirmBlock())} /><Button size="sm" variant="destructive" disabled={busy} onclick={confirmBlock}>Block</Button><Button size="sm" variant="ghost" onclick={() => (blocking = false)}>Cancel</Button></div>{/if}
+
+			{#if task.notes && task.notes.length > 0}<div class="mt-3 border-t pt-3"><span class="font-medium text-muted-foreground">Notes</span>{#each task.notes as note (note.at + note.by + note.text)}<div class="mt-1 rounded-lg bg-muted/40 p-2 text-xs"><span class="text-muted-foreground">{new Date(note.at).toLocaleString()} — {note.by}</span><p class="mt-1 whitespace-pre-wrap">{note.text}</p></div>{/each}</div>{/if}
+			{#if related.length > 0}<div class="mt-3 border-t pt-3"><p class="font-medium text-muted-foreground">Related work</p><div class="mt-2 flex flex-wrap gap-2">{#each related as link (link.href)}<a href={link.href} class="group inline-flex min-h-10 items-center gap-2 rounded-lg border bg-background/70 px-3 py-2 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><Icon icon={link.icon ?? 'lucide:arrow-up-right'} class="size-4 text-primary" /><span><span class="block text-xs font-medium text-foreground">{link.label}</span>{#if link.description}<span class="block text-[11px] text-muted-foreground">{link.description}</span>{/if}</span><Icon icon="lucide:arrow-right" class="size-3 text-muted-foreground transition-transform group-hover:translate-x-0.5" /></a>{/each}</div></div>{/if}
+			<div class="mt-3 flex gap-2 border-t pt-3"><Input bind:value={noteText} class="flex-1" placeholder="Add a note — what's next, or what's in the way" onkeydown={(event: KeyboardEvent) => onEnter(event, () => void addNote())} /><Button size="sm" aria-label="Save note" disabled={busy} onclick={addNote} class="rounded-lg"><Icon icon="lucide:send" class="size-3" /></Button></div>
+		</div>
+	{/if}
+</div>

package/dist/svelte/components/LaneBoardTaskRow.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { TaskStatus, WorkboardTask } from '../../types.ts';
+import { type AgentLabelMap } from '../lane-board.ts';
+type TaskLink = NonNullable<WorkboardTask['links']>[number];
+export type RelatedWorkLink = {
+    href: string;
+    label: string;
+    icon?: string;
+    description?: string;
+};
+type $$ComponentProps = {
+    task: WorkboardTask;
+    expanded: boolean;
+    agents?: AgentLabelMap;
+    now: number;
+    busy?: boolean;
+    laneIds: string[];
+    resolveRelatedLink: (link: TaskLink) => RelatedWorkLink | null;
+    ontoggle: () => void;
+    onstatus: (status: TaskStatus) => void | Promise<void>;
+    onblock: (reason: string) => Promise<boolean>;
+    onassignment: (patch: {
+        assigned_to?: string;
+        lane?: string;
+    }) => void | Promise<void>;
+    onnote: (text: string) => Promise<boolean>;
+    onarchive: () => void;
+};
+declare const LaneBoardTaskRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type LaneBoardTaskRow = ReturnType<typeof LaneBoardTaskRow>;
+export default LaneBoardTaskRow;
+//# sourceMappingURL=LaneBoardTaskRow.svelte.d.ts.map

package/dist/svelte/components/LaneBoardTaskRow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaneBoardTaskRow.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LaneBoardTaskRow.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAOL,KAAK,aAAa,EAClB,MAAM,kBAAkB,CAAC;AAM1B,KAAK,QAAQ,GAAG,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5D,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACnG,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,eAAe,GAAG,IAAI,CAAC;IAC/D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvF,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA2IH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/PriorityBadge.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface Props {
+		priority: string | number;
+	}
+
+	let { priority }: Props = $props();
+
+	const config = new Map(Object.entries({
+		critical: 'border border-destructive/30 bg-destructive/10 text-destructive',
+		high: 'border border-warning/30 bg-warning/10 text-warning',
+		medium: 'border border-info/30 bg-info/10 text-info',
+		low: 'border border-muted bg-muted/50 text-muted-foreground'
+	}));
+
+	let p = $derived(String(priority));
+	let cls = $derived(config.get(p) || 'border border-muted bg-muted/50 text-muted-foreground');
+</script>
+
+<span class="rounded-md px-2 py-0.5 text-xs font-medium {cls}">
+	{p.charAt(0).toUpperCase() + p.slice(1)}
+</span>

package/dist/svelte/components/PriorityBadge.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    priority: string | number;
+}
+declare const PriorityBadge: import("svelte").Component<Props, {}, "">;
+type PriorityBadge = ReturnType<typeof PriorityBadge>;
+export default PriorityBadge;
+//# sourceMappingURL=PriorityBadge.svelte.d.ts.map

package/dist/svelte/components/PriorityBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriorityBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PriorityBadge.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAuBF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}