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

package/dist/svelte/components/LaneBoard.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+	import { settle } from '@vibesdotdev/kernel';
+	/** Workboard composition root. Domain behavior stays here; visual units are atomic components. */
+	import { tick, untrack } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import { Button, ConfirmDialog, Icon } from '@vibesdotdev/kit/components';
+	import EmptyState from '@vibesdotdev/kit/components/layout/EmptyState';
+	import type { TaskPriority, TaskStatus, WorkboardLane, WorkboardTask } from '../../types.js';
+	import {
+		distinctOwners,
+		filterTasks,
+		groupTasksByLane,
+		laneOptions,
+		normalizeLaneId,
+		ownerLabel,
+		summarize,
+		type AgentLabelMap,
+		type StatusFilter
+	} from '../lane-board.js';
+	import { createRestWorkboardClient } from '../rest-workboard-client.js';
+	import LaneBoardComposer from './LaneBoardComposer.svelte';
+	import LaneBoardFilters from './LaneBoardFilters.svelte';
+	import LaneBoardLane from './LaneBoardLane.svelte';
+	import LaneBoardSummary from './LaneBoardSummary.svelte';
+	import LaneBoardTaskRow, { type RelatedWorkLink } from './LaneBoardTaskRow.svelte';
+
+	type TaskLink = NonNullable<WorkboardTask['links']>[number];
+	let {
+		tasks,
+		lanes = [],
+		pendingRequestCount = 0,
+		activeAgentId = null,
+		agents = {},
+		initialTaskId = null,
+		initialCreate = false,
+		projectName = null,
+		requestsHref = '/requests',
+		resolveRelatedLink = () => null
+	}: {
+		tasks: WorkboardTask[];
+		lanes?: WorkboardLane[];
+		pendingRequestCount?: number;
+		activeAgentId?: string | null;
+		agents?: AgentLabelMap;
+		initialTaskId?: string | null;
+		initialCreate?: boolean;
+		projectName?: string | null;
+		requestsHref?: string;
+		resolveRelatedLink?: (link: TaskLink) => RelatedWorkLink | null;
+	} = $props();
+
+	const client = createRestWorkboardClient();
+	let boardTasks = $derived<WorkboardTask[]>(structuredClone($state.snapshot(tasks)));
+	let boardLanes = $derived<WorkboardLane[]>(structuredClone($state.snapshot(lanes)));
+	let now = $state(Date.now());
+	let filterStatus = $state<StatusFilter>('open');
+	let filterOwner = $state('');
+	let selectedTaskId = $state<string | null>(
+		untrack(() => initialTaskId && tasks.some((task) => task.id === initialTaskId) ? initialTaskId : null)
+	);
+	let lastAutoOpenedTaskId = $state<string | null>(null);
+	let lastAutoOpenedCreate = $state(false);
+	let showAddForm = $state(false);
+	let showNewLane = $state(false);
+	let quickAddLaneId = $state<string | null>(null);
+	let deleteTargetId = $state<string | null>(null);
+	let deleteDialogOpen = $state(false);
+	let busy = $state(false);
+	let mutationSeq = $state(0);
+
+	const agentScoped = $derived(filterTasks(boardTasks, { agentId: activeAgentId }));
+	const summary = $derived(summarize(agentScoped, now));
+	const visibleTasks = $derived(filterTasks(agentScoped, { status: filterStatus, owner: filterOwner }));
+	const groups = $derived(groupTasksByLane(visibleTasks, boardLanes));
+	const laneIds = $derived(laneOptions(groupTasksByLane(agentScoped, boardLanes)));
+	const owners = $derived(distinctOwners(agentScoped, agents));
+	const ownerSuggestions = $derived([...new Set([...owners.map((owner) => owner.id), ...Object.keys(agents)])].sort());
+	const filtersActive = $derived(filterStatus !== 'open' || filterOwner !== '');
+	const hasAnything = $derived(agentScoped.length > 0 || boardLanes.length > 0);
+
+	$effect(() => {
+		if (!initialTaskId || lastAutoOpenedTaskId === initialTaskId) return;
+		const task = boardTasks.find((candidate) => candidate.id === initialTaskId);
+		if (!task) return;
+		filterStatus = 'all';
+		filterOwner = '';
+		selectedTaskId = task.id;
+		lastAutoOpenedTaskId = initialTaskId;
+		void tick().then(() => document.getElementById(`workboard-task-${initialTaskId}`)?.scrollIntoView({ block: 'center', behavior: 'smooth' }));
+	});
+
+	$effect(() => {
+		if (!initialCreate || lastAutoOpenedCreate || groups.length === 0 || quickAddLaneId !== null) return;
+		lastAutoOpenedCreate = true;
+		openQuickAdd(groups[0].id);
+	});
+
+	$effect(() => {
+		let timer: ReturnType<typeof setInterval> | null = null;
+		async function poll() {
+			if (document.visibilityState !== 'visible') return;
+			const seq = mutationSeq;
+			const outcome = await settle(() => Promise.all([client.tasks.list(), client.lanes.list()]));
+			if (!outcome.ok) {
+			toast.error(outcome.cause instanceof Error ? outcome.cause.message : outcome.cause.description);
+			return;
+		}
+			if (mutationSeq !== seq) return;
+			[boardTasks, boardLanes] = outcome.value;
+			now = Date.now();
+		}
+		function start() { if (!timer) timer = setInterval(poll, 30_000); }
+		function stop() { if (timer) clearInterval(timer); timer = null; }
+		function visibility() { if (document.visibilityState === 'visible') { start(); void poll(); } else stop(); }
+		if (document.visibilityState === 'visible') start();
+		document.addEventListener('visibilitychange', visibility);
+		return () => { stop(); document.removeEventListener('visibilitychange', visibility); };
+	});
+
+	async function refresh() {
+		boardTasks = await client.tasks.list();
+		now = Date.now();
+	}
+
+	async function run<T>(label: string, operation: () => Promise<T>): Promise<boolean> {
+		mutationSeq++;
+		busy = true;
+		const outcome = await settle(async () => {
+			await operation();
+			await refresh();
+		});
+		busy = false;
+		if (outcome.ok) return true;
+		toast.error(label + ': ' + (outcome.cause instanceof Error ? outcome.cause.message : outcome.cause.description));
+		return false;
+	}
+
+	async function createTask(input: { title: string; lane?: string; assigned_to?: string; priority?: TaskPriority; description?: string }): Promise<boolean> {
+		const title = input.title.trim();
+		if (!title) return false;
+		return run('Create task', () => client.tasks.add({
+			title,
+			lane: normalizeLaneId(input.lane) || undefined,
+			assigned_to: input.assigned_to?.trim() || undefined,
+			priority: input.priority,
+			description: input.description?.trim() || undefined
+		}));
+	}
+
+	function openQuickAdd(laneId: string) {
+		quickAddLaneId = laneId;
+		void tick().then(() => document.getElementById(`workboard-quick-add-${laneId || 'none'}`)?.focus());
+	}
+
+	function toggleTask(task: WorkboardTask) {
+		selectedTaskId = selectedTaskId === task.id ? null : task.id;
+	}
+
+	async function setStatus(id: string, status: TaskStatus) {
+		await run('Update status', () => client.tasks.update(id, { status }));
+	}
+
+	function blockTask(id: string, reason: string) {
+		return run('Block task', async () => {
+			await client.tasks.update(id, { status: 'blocked' });
+			if (reason) await client.tasks.addNote(id, reason);
+		});
+	}
+
+	async function saveAssignment(id: string, patch: { assigned_to?: string; lane?: string }) {
+		await run('Update assignment', () => client.tasks.update(id, patch));
+	}
+
+	function addNote(id: string, text: string) {
+		return run('Add note', () => client.tasks.addNote(id, text));
+	}
+
+	function openDeleteDialog(id: string) {
+		deleteTargetId = id;
+		deleteDialogOpen = true;
+	}
+
+	async function confirmDeleteTask() {
+		const id = deleteTargetId;
+		deleteDialogOpen = false;
+		deleteTargetId = null;
+		if (!id) return;
+		const archived = await run('Archive task', () => client.tasks.remove(id));
+		if (archived && selectedTaskId === id) selectedTaskId = null;
+	}
+
+	async function createLane(input: { id: string; description?: string }): Promise<boolean> {
+		mutationSeq++;
+		busy = true;
+		const outcome = await settle(() => client.lanes.add(input));
+		busy = false;
+		if (!outcome.ok) {
+			toast.error(outcome.cause instanceof Error ? outcome.cause.message : outcome.cause.description);
+			return false;
+		}
+		const lane = outcome.value;
+		boardLanes = [...boardLanes.filter(existing => existing.id !== lane.id), lane];
+		toast.success('Lane "' + lane.id + '" added');
+		return true;
+	}
+</script>
+
+{#snippet taskRow(task: WorkboardTask)}
+	<LaneBoardTaskRow
+		{task}
+		expanded={selectedTaskId === task.id}
+		{agents}
+		{now}
+		{busy}
+		{laneIds}
+		{resolveRelatedLink}
+		ontoggle={() => toggleTask(task)}
+		onstatus={(status) => setStatus(task.id, status)}
+		onblock={(reason) => blockTask(task.id, reason)}
+		onassignment={(patch) => saveAssignment(task.id, patch)}
+		onnote={(text) => addNote(task.id, text)}
+		onarchive={() => openDeleteDialog(task.id)}
+	/>
+{/snippet}
+
+<div class="space-y-6 p-6 lg:p-8">
+	<section class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+		<div><h1 class="text-2xl font-semibold tracking-tight">Tasks</h1><p class="text-sm text-muted-foreground">By lane — who owns it, where it stands, what is in the way, what happens next{#if projectName} · {projectName}{/if}</p></div>
+		<div class="flex flex-wrap items-center gap-2"><Button variant="outline" size="sm" onclick={() => (showNewLane = !showNewLane)}><Icon icon="lucide:columns-3" class="size-4" />New lane</Button><Button size="sm" onclick={() => (showAddForm = !showAddForm)}><Icon icon="lucide:plus" class="size-4" />Add task</Button></div>
+	</section>
+
+	<LaneBoardSummary {summary} {filterStatus} {pendingRequestCount} {requestsHref} onfilter={(status) => (filterStatus = status)} />
+	<LaneBoardComposer showLane={showNewLane} showTask={showAddForm} {laneIds} {activeAgentId} {busy} onclose={(kind) => { if (kind === 'lane') showNewLane = false; else showAddForm = false; }} oncreatelane={createLane} oncreatetask={createTask} />
+	<datalist id="workboard-owner-options">{#each ownerSuggestions as id (id)}<option value={id}></option>{/each}</datalist>
+	<LaneBoardFilters status={filterStatus} owner={filterOwner} {owners} onstatus={(status) => (filterStatus = status)} onowner={(owner) => (filterOwner = owner)} />
+
+	{#if !hasAnything}
+		<EmptyState icon="lucide:columns-3" title="No lanes or tasks yet" description="Add a lane for each stream of work, then file tasks into it — agents can do the same through the workboard API." actionLabel="New lane" onAction={() => (showNewLane = true)} />
+	{:else if groups.length === 0}
+		<EmptyState icon="lucide:filter" title="No tasks match this filter" description="Show every task again." actionLabel="Clear filters" onAction={() => { filterStatus = 'open'; filterOwner = ''; }} />
+	{:else}
+		<div class="space-y-4">
+			{#each groups as group (group.id)}
+				<LaneBoardLane {group} quickAdd={quickAddLaneId === group.id} {busy} assigneeLabel={activeAgentId ? ownerLabel({ assigned_to: activeAgentId, agentId: null }, agents) : undefined} {filtersActive} row={taskRow} onopen={() => openQuickAdd(group.id)} onclose={() => (quickAddLaneId = null)} onadd={(title) => createTask({ title, lane: group.id, assigned_to: activeAgentId ?? undefined })} />
+			{/each}
+		</div>
+	{/if}
+
+	<ConfirmDialog bind:open={deleteDialogOpen} title="Archive task" description="Archive this task? It leaves the board but stays in your project history." onconfirm={confirmDeleteTask} />
+</div>

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

@@ -0,0 +1,20 @@
+import type { WorkboardLane, WorkboardTask } from '../../types.ts';
+import { type AgentLabelMap } from '../lane-board.ts';
+import { type RelatedWorkLink } from './LaneBoardTaskRow.svelte';
+type TaskLink = NonNullable<WorkboardTask['links']>[number];
+type $$ComponentProps = {
+    tasks: WorkboardTask[];
+    lanes?: WorkboardLane[];
+    pendingRequestCount?: number;
+    activeAgentId?: string | null;
+    agents?: AgentLabelMap;
+    initialTaskId?: string | null;
+    initialCreate?: boolean;
+    projectName?: string | null;
+    requestsHref?: string;
+    resolveRelatedLink?: (link: TaskLink) => RelatedWorkLink | null;
+};
+declare const LaneBoard: import("svelte").Component<$$ComponentProps, {}, "">;
+type LaneBoard = ReturnType<typeof LaneBoard>;
+export default LaneBoard;
+//# sourceMappingURL=LaneBoard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LaneBoard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LaneBoard.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAA4B,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAQL,KAAK,aAAa,EAElB,MAAM,kBAAkB,CAAC;AAM3B,OAAyB,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGlF,KAAK,QAAQ,GAAG,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5D,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,eAAe,GAAG,IAAI,CAAC;CAChE,CAAC;AA0NH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/LaneBoardComposer.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { Button, Input, Label, NativeSelect, NativeSelectOption, Textarea } from '@vibesdotdev/kit/components';
+	import type { TaskPriority } from '../../types.js';
+	import { normalizeLaneId } from '../lane-board.js';
+
+	let {
+		showLane,
+		showTask,
+		laneIds,
+		activeAgentId = null,
+		busy = false,
+		onclose,
+		oncreatelane,
+		oncreatetask
+	}: {
+		showLane: boolean;
+		showTask: boolean;
+		laneIds: string[];
+		activeAgentId?: string | null;
+		busy?: boolean;
+		onclose: (kind: 'lane' | 'task') => void;
+		oncreatelane: (input: { id: string; description?: string }) => Promise<boolean>;
+		oncreatetask: (input: { title: string; lane?: string; assigned_to?: string; priority?: TaskPriority; description?: string }) => Promise<boolean>;
+	} = $props();
+
+	let laneId = $state('');
+	let laneDescription = $state('');
+	let title = $state('');
+	let lane = $state('');
+	let owner = $state('');
+	let priority = $state<TaskPriority>('medium');
+	let description = $state('');
+
+	function onEnter(event: KeyboardEvent, action: () => void) {
+		if (event.key !== 'Enter' || event.isComposing) return;
+		event.preventDefault();
+		action();
+	}
+
+	async function createLane() {
+		const id = normalizeLaneId(laneId);
+		if (!id || !(await oncreatelane({ id, description: laneDescription.trim() || undefined }))) return;
+		laneId = '';
+		laneDescription = '';
+		onclose('lane');
+	}
+
+	async function createTask() {
+		if (!title.trim()) return;
+		const created = await oncreatetask({ title, lane, assigned_to: owner || activeAgentId || undefined, priority, description });
+		if (!created) return;
+		title = '';
+		description = '';
+		onclose('task');
+	}
+</script>
+
+{#if showLane}
+	<div class="flex flex-wrap items-end gap-2 rounded-xl border bg-background/60 p-4">
+		<Label class="flex min-w-48 flex-1 flex-col items-stretch gap-1 text-xs text-muted-foreground">Lane id<Input bind:value={laneId} placeholder="e.g. appearance-ssr" onkeydown={(event: KeyboardEvent) => onEnter(event, () => void createLane())} /></Label>
+		<Label class="flex min-w-64 flex-[2] flex-col items-stretch gap-1 text-xs text-muted-foreground">What this lane is for (optional)<Input bind:value={laneDescription} placeholder="One line" onkeydown={(event: KeyboardEvent) => onEnter(event, () => void createLane())} /></Label>
+		<Button size="sm" disabled={busy || !normalizeLaneId(laneId)} onclick={createLane}>Add lane</Button><Button size="sm" variant="ghost" onclick={() => onclose('lane')}>Cancel</Button>
+		{#if normalizeLaneId(laneId) && normalizeLaneId(laneId) !== laneId}<p class="w-full text-xs text-muted-foreground">Saved as <code>{normalizeLaneId(laneId)}</code></p>{/if}
+	</div>
+{/if}
+
+{#if showTask}
+	<div class="space-y-3 rounded-xl border bg-background/60 p-4">
+		<Input bind:value={title} placeholder="What needs doing?" onkeydown={(event: KeyboardEvent) => onEnter(event, () => void createTask())} />
+		<div class="grid gap-2 sm:grid-cols-3">
+			<Label class="flex flex-col items-stretch gap-1 text-xs text-muted-foreground">Lane<NativeSelect bind:value={lane}><NativeSelectOption value="">No lane</NativeSelectOption>{#each laneIds as id (id)}<NativeSelectOption value={id}>{id}</NativeSelectOption>{/each}</NativeSelect></Label>
+			<Label class="flex flex-col items-stretch gap-1 text-xs text-muted-foreground">Owner<Input bind:value={owner} placeholder={activeAgentId ?? 'Agent id or person'} list="workboard-owner-options" /></Label>
+			<Label class="flex flex-col items-stretch gap-1 text-xs text-muted-foreground">Priority<NativeSelect bind:value={priority}><NativeSelectOption value="low">Low</NativeSelectOption><NativeSelectOption value="medium">Medium</NativeSelectOption><NativeSelectOption value="high">High</NativeSelectOption><NativeSelectOption value="critical">Critical</NativeSelectOption></NativeSelect></Label>
+		</div>
+		<Textarea bind:value={description} rows={3} placeholder="Description (optional, markdown)" />
+		<div class="flex items-center gap-2"><Button size="sm" disabled={busy || !title.trim()} onclick={createTask}>Create</Button><Button variant="outline" size="sm" onclick={() => onclose('task')}>Cancel</Button></div>
+	</div>
+{/if}

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

@@ -0,0 +1,24 @@
+import type { TaskPriority } from '../../types.ts';
+type $$ComponentProps = {
+    showLane: boolean;
+    showTask: boolean;
+    laneIds: string[];
+    activeAgentId?: string | null;
+    busy?: boolean;
+    onclose: (kind: 'lane' | 'task') => void;
+    oncreatelane: (input: {
+        id: string;
+        description?: string;
+    }) => Promise<boolean>;
+    oncreatetask: (input: {
+        title: string;
+        lane?: string;
+        assigned_to?: string;
+        priority?: TaskPriority;
+        description?: string;
+    }) => Promise<boolean>;
+};
+declare const LaneBoardComposer: import("svelte").Component<$$ComponentProps, {}, "">;
+type LaneBoardComposer = ReturnType<typeof LaneBoardComposer>;
+export default LaneBoardComposer;
+//# sourceMappingURL=LaneBoardComposer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LaneBoardComposer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LaneBoardComposer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGlD,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChF,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACjJ,CAAC;AAyEH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/LaneBoardFilters.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Button, NativeSelect, NativeSelectOption } from '@vibesdotdev/kit/components';
+	import {
+		STATUS_FILTERS,
+		UNASSIGNED_OWNER_FILTER,
+		type OwnerOption,
+		type StatusFilter
+	} from '../lane-board.js';
+
+	let {
+		status,
+		owner,
+		owners,
+		onstatus,
+		onowner
+	}: {
+		status: StatusFilter;
+		owner: string;
+		owners: OwnerOption[];
+		onstatus: (status: StatusFilter) => void;
+		onowner: (owner: string) => void;
+	} = $props();
+</script>
+
+<div class="flex flex-wrap items-center gap-2 text-sm">
+	{#each STATUS_FILTERS as option (option.value)}
+		<Button variant={status === option.value ? 'default' : 'ghost'} size="sm" aria-pressed={status === option.value} onclick={() => onstatus(option.value)}>{option.label}</Button>
+	{/each}
+	<NativeSelect value={owner} onchange={(event) => onowner(event.currentTarget.value)} aria-label="Filter by owner" class="ml-auto rounded-lg border bg-transparent px-3 py-1.5 text-sm">
+		<NativeSelectOption value="">All owners</NativeSelectOption>
+		{#each owners as option (option.id)}<NativeSelectOption value={option.id}>{option.label} ({option.count})</NativeSelectOption>{/each}
+		<NativeSelectOption value={UNASSIGNED_OWNER_FILTER}>Unassigned</NativeSelectOption>
+	</NativeSelect>
+</div>

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

@@ -0,0 +1,12 @@
+import { type OwnerOption, type StatusFilter } from '../lane-board.ts';
+type $$ComponentProps = {
+    status: StatusFilter;
+    owner: string;
+    owners: OwnerOption[];
+    onstatus: (status: StatusFilter) => void;
+    onowner: (owner: string) => void;
+};
+declare const LaneBoardFilters: import("svelte").Component<$$ComponentProps, {}, "">;
+type LaneBoardFilters = ReturnType<typeof LaneBoardFilters>;
+export default LaneBoardFilters;
+//# sourceMappingURL=LaneBoardFilters.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LaneBoardFilters.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LaneBoardFilters.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,MAAM,kBAAkB,CAAC;AAE1B,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AA2BH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/LaneBoardLane.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Button, Icon, Input } from '@vibesdotdev/kit/components';
+	import type { WorkboardTask } from '../../types.js';
+	import { NO_LANE_ID, type LaneGroup } from '../lane-board.js';
+
+	let {
+		group,
+		quickAdd,
+		busy = false,
+		assigneeLabel,
+		filtersActive = false,
+		row,
+		onopen,
+		onclose,
+		onadd
+	}: {
+		group: LaneGroup;
+		quickAdd: boolean;
+		busy?: boolean;
+		assigneeLabel?: string;
+		filtersActive?: boolean;
+		row: Snippet<[WorkboardTask]>;
+		onopen: () => void;
+		onclose: () => void;
+		onadd: (title: string) => Promise<boolean>;
+	} = $props();
+
+	let title = $state('');
+	const cssColor = $derived(/^(#|rgb|hsl|oklch|var\()/i.test(group.color));
+
+	async function submit() {
+		if (title.trim() && (await onadd(title))) title = '';
+	}
+</script>
+
+<section id={`workboard-lane-${group.id || 'none'}`} class="rounded-xl border bg-background/40" aria-label={`Lane ${group.label}`}>
+	<header class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
+		{#if group.color && cssColor}<span class="size-3 shrink-0 rounded-full" style:background={group.color} aria-hidden="true"></span>{:else}<span class="text-base leading-none" aria-hidden="true">{group.color || (group.id === NO_LANE_ID ? '·' : '📌')}</span>{/if}
+		<div class="min-w-0 flex-1"><h2 class="truncate font-medium">{group.label}{#if !group.registered && group.id !== NO_LANE_ID}<span class="ml-1 rounded-full border border-warning/30 bg-warning/10 px-2 py-0.5 text-[11px] font-normal text-warning" title="Seen on tasks but not registered as a lane row">unregistered</span>{/if}</h2>{#if group.description}<p class="truncate text-xs text-muted-foreground">{group.description}</p>{/if}</div>
+		<span class="text-xs text-muted-foreground"><span class="tabular-nums">{group.counts.open}</span> open{#if group.counts.blocked > 0} · <span class="font-medium text-destructive"><span class="tabular-nums">{group.counts.blocked}</span> blocked</span>{/if}{#if group.counts.completed > 0} · <span class="tabular-nums">{group.counts.completed}</span> done{/if}</span>
+		<Button variant="ghost" size="sm" onclick={onopen} aria-label={`Add a task to ${group.label}`}><Icon icon="lucide:plus" class="size-3.5" />Add</Button>
+	</header>
+	{#if quickAdd}<div class="flex gap-2 border-b bg-background/60 px-4 py-2"><Input id={`workboard-quick-add-${group.id || 'none'}`} bind:value={title} class="flex-1" placeholder={`Add a task to ${group.label} — Enter to save${assigneeLabel ? `, assigned to ${assigneeLabel}` : ''}`} onkeydown={(event: KeyboardEvent) => { if (event.key === 'Enter' && !event.isComposing) { event.preventDefault(); void submit(); } }} /><Button size="sm" disabled={busy || !title.trim()} onclick={submit}>Add</Button><Button size="sm" variant="ghost" onclick={onclose} aria-label="Close quick add"><Icon icon="lucide:x" class="size-3.5" /></Button></div>{/if}
+	<div class="divide-y">{#each group.tasks as task (task.id)}{@render row(task)}{/each}{#if group.tasks.length === 0}<p class="px-4 py-3 text-xs text-muted-foreground">{filtersActive ? 'No tasks match the current filter.' : 'Nothing assigned here yet.'}</p>{/if}</div>
+</section>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { WorkboardTask } from '../../types.ts';
+import { type LaneGroup } from '../lane-board.ts';
+type $$ComponentProps = {
+    group: LaneGroup;
+    quickAdd: boolean;
+    busy?: boolean;
+    assigneeLabel?: string;
+    filtersActive?: boolean;
+    row: Snippet<[WorkboardTask]>;
+    onopen: () => void;
+    onclose: () => void;
+    onadd: (title: string) => Promise<boolean>;
+};
+declare const LaneBoardLane: import("svelte").Component<$$ComponentProps, {}, "">;
+type LaneBoardLane = ReturnType<typeof LaneBoardLane>;
+export default LaneBoardLane;
+//# sourceMappingURL=LaneBoardLane.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LaneBoardLane.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LaneBoardLane.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC;AAwCH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/LaneBoardSummary.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Button, Icon } from '@vibesdotdev/kit/components';
+	import type { BoardSummary, StatusFilter } from '../lane-board.js';
+
+	let {
+		summary,
+		filterStatus,
+		pendingRequestCount = 0,
+		requestsHref = '/requests',
+		onfilter
+	}: {
+		summary: BoardSummary;
+		filterStatus: StatusFilter;
+		pendingRequestCount?: number;
+		requestsHref?: string;
+		onfilter: (filter: StatusFilter) => void;
+	} = $props();
+
+	const muted = 'border-muted bg-muted/40 text-muted-foreground';
+	const stats = $derived([
+		{ label: 'in progress', value: summary.in_progress, icon: 'lucide:play', class: 'border-info/30 bg-info/10 text-info', filter: 'in_progress' as const },
+		{ label: 'blocked', value: summary.blocked, icon: 'lucide:octagon-alert', class: summary.blocked > 0 ? 'border-destructive/30 bg-destructive/10 text-destructive' : muted, filter: 'blocked' as const },
+		{ label: 'pending', value: summary.pending, icon: 'lucide:circle-dashed', class: 'border-warning/30 bg-warning/10 text-warning', filter: 'pending' as const },
+		{ label: 'done', value: summary.completed, icon: 'lucide:circle-check-big', class: 'border-success/30 bg-success/10 text-success', filter: 'completed' as const }
+	]);
+</script>
+
+<section aria-label="Board summary" class="flex flex-wrap items-center gap-2">
+	{#each stats as stat (stat.label)}
+		<Button type="button" variant="outline" size="sm" class="h-auto rounded-full px-3 py-1 text-xs {stat.class} {filterStatus === stat.filter ? 'ring-2 ring-ring' : ''}" aria-pressed={filterStatus === stat.filter} onclick={() => onfilter(filterStatus === stat.filter ? 'open' : stat.filter)}>
+			<Icon icon={stat.icon} class="size-3.5" aria-hidden="true" /><span class="tabular-nums">{stat.value}</span>{stat.label}
+		</Button>
+	{/each}
+	<span class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium {summary.stale > 0 ? 'border-warning/30 bg-warning/10 text-warning' : muted}"><Icon icon="lucide:hourglass" class="size-3.5" aria-hidden="true" /><span class="tabular-nums">{summary.stale}</span>stale &gt; 24h</span>
+	<Button href={requestsHref} variant="outline" size="sm" class="h-auto rounded-full px-3 py-1 text-xs {pendingRequestCount > 0 ? 'border-warning/30 bg-warning/10 text-warning' : muted}">
+		<Icon icon="lucide:check-check" class="size-3.5" aria-hidden="true" /><span class="tabular-nums">{pendingRequestCount}</span>{pendingRequestCount === 1 ? 'approval' : 'approvals'} waiting<Icon icon="lucide:arrow-right" class="size-3" aria-hidden="true" />
+	</Button>
+</section>

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

@@ -0,0 +1,12 @@
+import type { BoardSummary, StatusFilter } from '../lane-board.ts';
+type $$ComponentProps = {
+    summary: BoardSummary;
+    filterStatus: StatusFilter;
+    pendingRequestCount?: number;
+    requestsHref?: string;
+    onfilter: (filter: StatusFilter) => void;
+};
+declare const LaneBoardSummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type LaneBoardSummary = ReturnType<typeof LaneBoardSummary>;
+export default LaneBoardSummary;
+//# sourceMappingURL=LaneBoardSummary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LaneBoardSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LaneBoardSummary.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElE,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,YAAY,EAAE,YAAY,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CACzC,CAAC;AAoCH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}