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

package/dist/svelte/components/RequestsQueue.svelte

@@ -0,0 +1,613 @@
+<script lang="ts">
+	import { settle } from '@vibesdotdev/kernel';
+	import * as Card from '@vibesdotdev/kit/components/ui/card';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import StatusBadge from './StatusBadge.svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Textarea } from '@vibesdotdev/kit/components/ui/textarea';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@vibesdotdev/kit/components/ui/select';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogDescription,
+		DialogFooter,
+		DialogClose
+	} from '@vibesdotdev/kit/components/ui/dialog';
+	import { timeAgo } from '../workboard-utils.js';
+	import type {
+		RequestType,
+		WorkboardRequestView as MarshalRequest,
+		WorkboardViewer
+	} from '../types.js';
+	import { createRestWorkboardClient } from '../rest-workboard-client.js';
+	import { WorkboardPlanDetailsSchema, WorkboardEmailDetailsSchema, type WorkboardPlanDetails, type WorkboardEmailDetails } from '../../schemas/surface.js';
+	import { getWorkboardRequestPlanId } from '@vibesdotdev/workboard';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { toast } from 'svelte-sonner';
+
+	interface ReviewContextLink {
+		kind: 'output' | 'task' | 'session';
+		title: string;
+		description: string;
+		href: string;
+	}
+
+	let {
+		requests,
+		pendingCount = 0,
+		activeAgentId = null,
+		viewer = null,
+		initialReviewId = null,
+		reviewContext = {}
+	}: {
+		requests: MarshalRequest[];
+		pendingCount?: number;
+		activeAgentId?: string | null;
+		viewer?: WorkboardViewer | null;
+		/** Open this request's review dialog once when the queue arrives from a deep link. */
+		initialReviewId?: string | null;
+		/** Durable task/output/session links that help a person make the review decision. */
+		reviewContext?: Record<string, ReviewContextLink[]>;
+	} = $props();
+
+	let requestOverride = $state<MarshalRequest[] | null>(null);
+	let baseRequests = $derived(requestOverride ?? requests);
+	// Optional within-data narrow: when `activeAgentId` is non-null, show only the
+	// rows whose provenance `agentId` matches; null = "All agents" (show all). The
+	// workboard request descriptor carries a nullish `agentId` (stamped server-side).
+	let scopedRequests = $derived(
+		activeAgentId == null
+			? baseRequests
+			: baseRequests.filter((request) => request.agentId === activeAgentId)
+	);
+	let livePendingCount = $derived(scopedRequests.filter((request) => request.status === 'pending').length);
+
+	// Filters
+	let filterStatus = $state('all');
+	let filterType = $state('all');
+
+	function getFilteredRequests() {
+		let items = [...scopedRequests];
+		if (filterStatus !== 'all') items = items.filter(r => r.status === filterStatus);
+		if (filterType !== 'all') items = items.filter(r => r.type === filterType);
+		return items;
+	}
+
+	// Add request form
+	let showAddRequest = $state(false);
+	let requestForm = $state<{
+		title: string;
+		type: RequestType;
+		requested_by: string;
+		description: string;
+	}>({
+		title: '',
+		type: 'action',
+		requested_by: defaultReviewerName(),
+		description: ''
+	});
+
+	// Review modal
+	let reviewingRequest = $state<MarshalRequest | null>(null);
+	let reviewStatus = $state<'approved' | 'rejected'>('approved');
+	let reviewResponse = $state('');
+	let lastAutoOpenedId = $state<string | null>(null);
+	let reviewingContext = $derived(reviewingRequest ? (reviewContext[reviewingRequest.id] ?? []) : []);
+
+	// Dropdown
+	let openMenuId = $state<string | null>(null);
+
+	async function runRequestOperation<T>(operation: () => Promise<T>): Promise<boolean> {
+		const outcome = await settle(async () => {
+			await operation();
+			await refreshState();
+		});
+		if (!outcome.ok) {
+			toast.error(outcome.cause instanceof Error ? outcome.cause.message : outcome.cause.description);
+			return false;
+		}
+		toast.success('Request updated');
+		return true;
+	}
+
+	async function refreshState() {
+		requestOverride = await createRestWorkboardClient().requests.list();
+	}
+
+	// Actions
+	async function submitRequest() {
+		if (!requestForm.title.trim()) return;
+		const created = await runRequestOperation(async () =>
+			createRestWorkboardClient().requests.add(requestForm)
+		);
+		if (!created) return;
+		showAddRequest = false;
+		requestForm = {
+			title: '',
+			type: 'action',
+			requested_by: defaultReviewerName(),
+			description: ''
+		};
+	}
+
+	function openReview(req: MarshalRequest) {
+		reviewingRequest = req;
+		reviewStatus = 'approved';
+		reviewResponse = '';
+	}
+
+	$effect(() => {
+		if (!initialReviewId || lastAutoOpenedId === initialReviewId) return;
+		const request = scopedRequests.find((candidate) => candidate.id === initialReviewId);
+		if (!request) return;
+		lastAutoOpenedId = initialReviewId;
+		openReview(request);
+	});
+
+	function onReviewOpenChange(value: boolean) {
+		if (!value) reviewingRequest = null;
+	}
+
+	async function submitReview() {
+		const request = reviewingRequest;
+		if (!request) return;
+		const reviewed = await runRequestOperation(async () =>
+			createRestWorkboardClient().requests.review(request.id, {
+				status: reviewStatus,
+				response: reviewResponse || undefined
+			})
+		);
+		if (reviewed) reviewingRequest = null;
+	}
+
+	async function deleteRequest(id: string) {
+		await runRequestOperation(async () => createRestWorkboardClient().requests.remove(id));
+		openMenuId = null;
+	}
+
+	async function clearResolved() {
+		await runRequestOperation(async () =>
+			createRestWorkboardClient().requests.clearResolved()
+		);
+	}
+
+	// Display
+	function defaultReviewerName(): string {
+		const user = viewer;
+		return user?.name ?? user?.email ?? user?.id ?? '';
+	}
+
+	function formatTypeLabel(type: string): string {
+		return type
+			.split('_')
+			.filter(Boolean)
+			.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+			.join(' ');
+	}
+
+	function typeIcon(type: RequestType) {
+		const icons = {
+			action: 'lucide:zap',
+			email: 'lucide:mail',
+			deployment: 'lucide:rocket',
+			code_review: 'lucide:code',
+			plan_confirmation: 'lucide:check-check',
+			escalation: 'lucide:arrow-up-circle'
+		} satisfies Record<RequestType, string>;
+		return icons[type] || 'lucide:zap';
+	}
+
+	function typeColor(type: RequestType): string {
+		const c = {
+			action: 'border-info/30 bg-info/10 text-info',
+			email: 'border-primary/25 bg-primary/10 text-primary',
+			deployment: 'border-success/30 bg-success/10 text-success',
+			code_review: 'border-info/30 bg-info/10 text-info',
+			plan_confirmation: 'border-warning/30 bg-warning/10 text-warning',
+			escalation: 'border-destructive/30 bg-destructive/10 text-destructive'
+		} satisfies Record<RequestType, string>;
+		return c[type] || 'border-muted bg-muted/50 text-muted-foreground';
+	}
+
+	function requestCardClass(req: MarshalRequest): string {
+		const typeClass = {
+			action: 'border-info/35 bg-info/10 shadow-info/10',
+			email: 'border-primary/30 bg-primary/10 shadow-primary/10',
+			deployment: 'border-success/35 bg-success/10 shadow-success/10',
+			code_review: 'border-info/35 bg-info/10 shadow-info/10',
+			plan_confirmation: 'border-warning/35 bg-warning/10 shadow-warning/10',
+			escalation: 'border-destructive/35 bg-destructive/10 shadow-destructive/10'
+		} satisfies Record<RequestType, string>;
+		const statusClass =
+			req.status === 'pending'
+				? 'ring-1 ring-warning/25'
+				: req.status === 'approved'
+					? 'ring-1 ring-success/20'
+					: req.status === 'rejected'
+						? 'ring-1 ring-destructive/20'
+						: 'ring-1 ring-primary/15';
+		return `border-l-4 shadow-sm ${typeClass[req.type] || 'border-primary/30 bg-primary/10 shadow-primary/10'} ${statusClass}`;
+	}
+
+	function requestPanelClass(req: MarshalRequest): string {
+		const c = {
+			action: 'border-info/25 bg-info/5',
+			email: 'border-primary/25 bg-primary/5',
+			deployment: 'border-success/25 bg-success/5',
+			code_review: 'border-info/25 bg-info/5',
+			plan_confirmation: 'border-warning/25 bg-warning/5',
+			escalation: 'border-destructive/25 bg-destructive/5'
+		} satisfies Record<RequestType, string>;
+		return c[req.type] || 'border-primary/20 bg-primary/5';
+	}
+
+	function reviewChoiceClass(status: 'approved' | 'rejected'): string {
+		if (status === 'approved') {
+			return reviewStatus === 'approved'
+				? 'flex-1 rounded-xl border-2 border-success/40 bg-success/10 py-3 text-success hover:bg-success/20'
+				: 'flex-1 rounded-xl border-2 py-3 text-muted-foreground hover:border-success/40 hover:bg-success/10 hover:text-success';
+		}
+		return reviewStatus === 'rejected'
+			? 'flex-1 rounded-xl border-2 border-destructive/40 bg-destructive/10 py-3 text-destructive hover:bg-destructive/20'
+			: 'flex-1 rounded-xl border-2 py-3 text-muted-foreground hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive';
+	}
+
+	function reviewContextIcon(kind: ReviewContextLink['kind']): string {
+		return {
+			output: 'lucide:panel-top',
+			task: 'lucide:list-checks',
+			session: 'lucide:terminal'
+		}[kind];
+	}
+
+	function hasDetails(req: MarshalRequest): boolean {
+		return Object.keys(req.details ?? {}).length > 0;
+	}
+
+	function requestDetailsLabel(req: MarshalRequest): string {
+		if (req.type === 'plan_confirmation') return 'Plan details';
+		return 'Technical details';
+	}
+
+	function requestDetailsJson(req: MarshalRequest): string {
+		return JSON.stringify(req.details ?? {}, null, 2);
+	}
+
+
+	function planDetails(req: MarshalRequest): WorkboardPlanDetails | null {
+		const parsed = WorkboardPlanDetailsSchema.safeParse(req.details?.plan);
+		const plan = parsed.success ? parsed.data : null;
+		if (!plan || (!plan.title && !plan.summary)) return null;
+		return plan;
+	}
+
+	function planId(req: MarshalRequest): string | undefined {
+		return req.type === 'plan_confirmation' ? getWorkboardRequestPlanId(req) : undefined;
+	}
+
+
+	function emailDetails(req: MarshalRequest): WorkboardEmailDetails | null {
+		if (req.type !== 'email') return null;
+		const parsed = WorkboardEmailDetailsSchema.safeParse(req.details);
+		const details = parsed.success ? parsed.data : null;
+		if (!details || (!details.recipients?.length && !details.subject)) return null;
+		return details;
+	}
+
+	/** True when a human-readable renderer (plan or email) covers this request's details. */
+	function hasReadableDetails(req: MarshalRequest): boolean {
+		return planDetails(req) !== null || emailDetails(req) !== null;
+	}
+
+	function closeMenus() { openMenuId = null; }
+</script>
+
+<svelte:window onclick={closeMenus} />
+
+<Dialog open={reviewingRequest !== null} onOpenChange={onReviewOpenChange}>
+	<DialogContent
+		class="max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg grid-cols-[minmax(0,1fr)] overflow-y-auto"
+	>
+		{#if reviewingRequest}
+			<DialogHeader>
+				<DialogTitle>Review request</DialogTitle>
+				<DialogDescription>Approve or reject this request and leave an optional note.</DialogDescription>
+			</DialogHeader>
+			<div class="space-y-4">
+				<div>
+					<p class="font-medium">{reviewingRequest.title}</p>
+					<div class="mt-1 flex flex-wrap gap-2">
+						<Badge variant="outline" class={typeColor(reviewingRequest.type)}>{formatTypeLabel(reviewingRequest.type)}</Badge>
+						{#if planId(reviewingRequest)}
+							<Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning">
+								Plan: {planId(reviewingRequest)}
+							</Badge>
+						{/if}
+						<span class="text-xs text-muted-foreground">by {reviewingRequest.requested_by}</span>
+						<span class="text-xs text-muted-foreground">{timeAgo(reviewingRequest.created_at)}</span>
+					</div>
+				</div>
+				{#if reviewingRequest.description}
+					<div class="rounded-xl border p-3 {requestPanelClass(reviewingRequest)}"><p class="text-sm text-muted-foreground">{reviewingRequest.description}</p></div>
+				{/if}
+				{#if planDetails(reviewingRequest)}
+					{@const plan = planDetails(reviewingRequest)}
+					<div class="rounded-xl border p-3 {requestPanelClass(reviewingRequest)}">
+						{#if plan?.title}<p class="text-sm font-medium">{plan.title}</p>{/if}
+						{#if plan?.summary}<p class="mt-1 text-sm text-muted-foreground leading-relaxed">{plan.summary}</p>{/if}
+					</div>
+				{:else if emailDetails(reviewingRequest)}
+					{@const email = emailDetails(reviewingRequest)}
+					<div class="rounded-xl border p-3 space-y-1 {requestPanelClass(reviewingRequest)}">
+						{#if email?.recipients?.length}<p class="text-sm"><span class="font-medium text-muted-foreground">To:</span> {email.recipients.join(', ')}</p>{/if}
+						{#if email?.subject}<p class="text-sm"><span class="font-medium text-muted-foreground">Subject:</span> {email.subject}</p>{/if}
+					</div>
+				{/if}
+				{#if reviewingContext.length > 0}
+					<section aria-label="Review context">
+						<p class="mb-2 text-xs font-medium text-muted-foreground">Review context</p>
+						<div class="space-y-1.5">
+							{#each reviewingContext as link (link.kind + link.href)}
+								<a
+									href={link.href}
+									class="group flex min-h-12 items-center gap-3 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"
+								>
+									<span class="grid size-8 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
+										<Icon icon={reviewContextIcon(link.kind)} class="size-4" />
+									</span>
+									<span class="min-w-0 flex-1">
+										<span class="block truncate text-sm font-medium">{link.title}</span>
+										<span class="block truncate text-xs text-muted-foreground">{link.description}</span>
+									</span>
+									<Icon
+										icon="lucide:arrow-right"
+										class="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5"
+									/>
+								</a>
+							{/each}
+						</div>
+					</section>
+				{/if}
+				{#if hasDetails(reviewingRequest)}
+					<details class="group rounded-xl border p-3 {requestPanelClass(reviewingRequest)}">
+						<summary class="cursor-pointer list-none text-sm font-medium text-muted-foreground hover:text-foreground">
+							<Icon
+								icon="lucide:chevron-right"
+								class="mr-1 inline size-3.5 transition-transform group-open:rotate-90"
+							/>
+							{hasReadableDetails(reviewingRequest) ? 'Raw data' : requestDetailsLabel(reviewingRequest)}
+						</summary>
+						<pre class="mt-3 overflow-x-auto rounded-md border bg-background/60 p-3 text-xs text-muted-foreground">{requestDetailsJson(reviewingRequest)}</pre>
+					</details>
+				{/if}
+				<div class="space-y-3">
+					<div class="flex gap-2">
+						<Button variant="outline" class={reviewChoiceClass('approved')} onclick={() => (reviewStatus = 'approved')}>
+							<Icon icon="lucide:shield-check" class="mx-auto mb-1 size-5" /> Approve
+						</Button>
+						<Button variant="outline" class={reviewChoiceClass('rejected')} onclick={() => (reviewStatus = 'rejected')}>
+							<Icon icon="lucide:shield-x" class="mx-auto mb-1 size-5" /> Reject
+						</Button>
+					</div>
+					<div class="space-y-1">
+						<Label class="text-xs">Response (optional)</Label>
+						<Textarea bind:value={reviewResponse} placeholder="Add a note..." rows={2} />
+					</div>
+				</div>
+			</div>
+			<DialogFooter>
+				<DialogClose>
+					<Button variant="outline">Cancel</Button>
+				</DialogClose>
+				<Button
+					onclick={submitReview}
+					variant={reviewStatus === 'approved' ? 'default' : 'destructive'}
+					class={reviewStatus === 'approved' ? 'bg-success text-success-foreground hover:bg-success/90' : ''}
+				>
+					{reviewStatus === 'approved' ? 'Approve' : 'Reject'}
+				</Button>
+			</DialogFooter>
+		{/if}
+	</DialogContent>
+</Dialog>
+
+<div class="space-y-6 p-6 lg:p-8">
+	<section class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+		<div>
+			<h1 class="text-2xl font-semibold tracking-tight">Approvals</h1>
+			<p class="mt-1 text-sm text-muted-foreground">Review plans and actions before agents do something consequential.</p>
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			{#if livePendingCount > 0}
+				<Badge class="border-warning/30 bg-warning/10 text-warning"><Icon icon="lucide:clock-3" class="mr-1 size-3" />{livePendingCount} pending</Badge>
+			{/if}
+			<Button size="sm" onclick={clearResolved} disabled={scopedRequests.filter(r => r.status !== 'pending').length === 0}><Icon icon="lucide:trash-2" class="size-4" />Clear resolved</Button>
+			<Button size="sm" onclick={() => (showAddRequest = !showAddRequest)}><Icon icon="lucide:plus" class="size-4" />New Request</Button>
+		</div>
+	</section>
+
+	{#if showAddRequest}
+		<Card.Root class="border-primary/20 bg-primary/5">
+			<Card.Content class="p-4 space-y-4">
+				<div class="flex items-center justify-between">
+					<p class="text-sm font-medium">New Request</p>
+					<Button
+						variant="ghost"
+						size="sm"
+						aria-label="Close new request form"
+						title="Close"
+						onclick={() => (showAddRequest = false)}
+					>
+						<Icon icon="lucide:x" class="size-4" aria-hidden="true" />
+					</Button>
+				</div>
+				<div class="grid gap-4 sm:grid-cols-2">
+					<div class="space-y-2 sm:col-span-2">
+						<Label for="request-title" class="text-xs">Title</Label>
+						<Input id="request-title" bind:value={requestForm.title} placeholder="What needs approval?" />
+					</div>
+					<div class="space-y-2">
+						<Label for="request-type" class="text-xs">Type</Label>
+						<Select type="single" bind:value={requestForm.type}>
+							<SelectTrigger id="request-type" />
+							<SelectContent>
+								<SelectItem value="action">Action</SelectItem>
+								<SelectItem value="email">Email</SelectItem>
+								<SelectItem value="deployment">Deployment</SelectItem>
+								<SelectItem value="code_review">Code Review</SelectItem>
+								<SelectItem value="plan_confirmation">Plan Confirmation</SelectItem>
+								<SelectItem value="escalation">Escalation</SelectItem>
+							</SelectContent>
+						</Select>
+					</div>
+					<div class="space-y-2">
+						<Label for="request-requested-by" class="text-xs">Requested by</Label>
+						<Input
+							id="request-requested-by"
+							bind:value={requestForm.requested_by}
+							placeholder="Name or agent id"
+						/>
+					</div>
+					<div class="space-y-2 sm:col-span-2">
+						<Label for="request-description" class="text-xs">Description</Label>
+						<Textarea
+							id="request-description"
+							bind:value={requestForm.description}
+							placeholder="Why is this needed?"
+							rows={2}
+						/>
+					</div>
+				</div>
+				<div class="flex justify-end gap-2">
+					<Button variant="outline" size="sm" onclick={() => (showAddRequest = false)}>Cancel</Button>
+					<Button size="sm" onclick={submitRequest} disabled={!requestForm.title.trim()}><Icon icon="lucide:check" class="size-4" />Submit</Button>
+				</div>
+			</Card.Content>
+		</Card.Root>
+	{/if}
+
+	<div class="flex flex-wrap items-center gap-2">
+		<span class="text-xs text-muted-foreground">Filter:</span>
+		{#each [{ value: 'all', label: 'All' }, { value: 'pending', label: 'Pending' }, { value: 'approved', label: 'Approved' }, { value: 'rejected', label: 'Rejected' }] as f}
+			<Button variant={filterStatus === f.value ? 'default' : 'outline'} size="sm" onclick={() => (filterStatus = f.value)}>{f.label}</Button>
+		{/each}
+		<span class="mx-2 text-border">|</span>
+		{#each [{ value: 'all', label: 'All types' }, { value: 'action', label: 'Action' }, { value: 'plan_confirmation', label: 'Plans' }, { value: 'email', label: 'Email' }, { value: 'deployment', label: 'Deploy' }, { value: 'code_review', label: 'Review' }, { value: 'escalation', label: 'Escalate' }] as f}
+			<Button variant={filterType === f.value ? 'default' : 'outline'} size="sm" onclick={() => (filterType = f.value)}>{f.label}</Button>
+		{/each}
+	</div>
+
+	{#if getFilteredRequests().length === 0}
+		<Card.Root class="border-primary/20 bg-primary/5">
+			<Card.Content class="flex flex-col items-center justify-center py-16">
+				<Icon icon="lucide:inbox" class="mb-3 size-12 text-muted-foreground/30" />
+				<p class="text-sm text-muted-foreground">
+					{scopedRequests.length === 0
+						? 'No approval requests yet. Agents asking for plan confirmation appear here.'
+						: 'No requests match filters.'}
+				</p>
+			</Card.Content>
+		</Card.Root>
+	{:else}
+		<div class="space-y-3">
+			{#each getFilteredRequests() as req (req.id)}
+				<Card.Root class={requestCardClass(req)}>
+					<Card.Content class="p-4">
+						<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+							<div class="flex items-start gap-3 min-w-0">
+								<div class="mt-0.5 rounded-lg border p-2 {typeColor(req.type)}"><Icon icon={typeIcon(req.type)} class="size-4" /></div>
+								<div class="min-w-0">
+									<p class="font-medium truncate">{req.title}</p>
+									<div class="mt-1 flex flex-wrap items-center gap-2">
+										<StatusBadge status={req.status} />
+										<Badge variant="outline" class={typeColor(req.type)}>{formatTypeLabel(req.type)}</Badge>
+										<span class="text-xs text-muted-foreground">by {req.requested_by}</span>
+										{#if planId(req)}
+											<Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning">
+												Plan: {planId(req)}
+											</Badge>
+										{/if}
+										<span class="text-xs text-muted-foreground">{timeAgo(req.created_at)}</span>
+									</div>
+								</div>
+							</div>
+							<div class="flex shrink-0 items-center gap-1 self-end sm:self-auto">
+								{#if req.status === 'pending'}
+									<Button size="sm" onclick={() => openReview(req)}><Icon icon="lucide:shield-check" class="size-4" />Review</Button>
+								{/if}
+								<div class="relative">
+									<Button
+										variant="ghost"
+										size="icon-sm"
+										aria-label={`Actions for ${req.title}`}
+										title="Request actions"
+										aria-expanded={openMenuId === req.id}
+										onclick={(e) => {
+											e.stopPropagation();
+											openMenuId = openMenuId === req.id ? null : req.id;
+										}}
+									>
+										<Icon icon="lucide:ellipsis-vertical" class="size-4" aria-hidden="true" />
+									</Button>
+									{#if openMenuId === req.id}
+										<div class="absolute right-0 top-full z-30 mt-1 w-40 rounded-xl border bg-popover p-1 shadow-lg">
+											<Button variant="ghost" class="w-full justify-start text-destructive hover:bg-destructive/10" size="sm" onclick={(e) => { e.stopPropagation(); deleteRequest(req.id); }}>
+												<Icon icon="lucide:trash-2" class="size-3.5" /> Delete
+											</Button>
+										</div>
+									{/if}
+								</div>
+							</div>
+						</div>
+						{#if req.description}
+							<p class="mt-3 text-sm text-muted-foreground leading-relaxed">{req.description}</p>
+						{/if}
+						{#if planDetails(req)}
+							{@const plan = planDetails(req)}
+							<div class="mt-3 rounded-lg border p-3 {requestPanelClass(req)}">
+								{#if plan?.title}<p class="text-sm font-medium">{plan.title}</p>{/if}
+								{#if plan?.summary}<p class="mt-1 text-sm text-muted-foreground leading-relaxed">{plan.summary}</p>{/if}
+							</div>
+						{:else if emailDetails(req)}
+							{@const email = emailDetails(req)}
+							<div class="mt-3 rounded-lg border p-3 space-y-1 {requestPanelClass(req)}">
+								{#if email?.recipients?.length}<p class="text-sm"><span class="font-medium text-muted-foreground">To:</span> {email.recipients.join(', ')}</p>{/if}
+								{#if email?.subject}<p class="text-sm"><span class="font-medium text-muted-foreground">Subject:</span> {email.subject}</p>{/if}
+							</div>
+						{/if}
+						{#if hasDetails(req)}
+							<details class="group mt-3 rounded-lg border p-3 {requestPanelClass(req)}">
+								<summary class="cursor-pointer list-none text-xs font-medium text-muted-foreground hover:text-foreground">
+									<Icon
+										icon="lucide:chevron-right"
+										class="mr-1 inline size-3 transition-transform group-open:rotate-90"
+									/>
+									{hasReadableDetails(req) ? 'Raw data' : requestDetailsLabel(req)}
+								</summary>
+								<pre class="mt-3 overflow-x-auto rounded-md border bg-background/60 p-3 text-xs leading-5 text-muted-foreground">{requestDetailsJson(req)}</pre>
+							</details>
+						{/if}
+						{#if req.response}
+							<div class="mt-3 rounded-xl border p-3 {requestPanelClass(req)}">
+								<p class="text-xs font-medium {req.status === 'approved' ? 'text-success' : 'text-destructive'}">{req.status === 'approved' ? 'Approved' : 'Rejected'} by {req.reviewed_by || 'Reviewer'}:</p>
+								<p class="mt-1 text-sm text-muted-foreground">{req.response}</p>
+								{#if req.reviewed_at}
+									<p class="mt-1 text-xs text-muted-foreground/60">{timeAgo(req.reviewed_at)}</p>
+								{/if}
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { WorkboardRequestView as MarshalRequest, WorkboardViewer } from '../types.ts';
+interface ReviewContextLink {
+    kind: 'output' | 'task' | 'session';
+    title: string;
+    description: string;
+    href: string;
+}
+type $$ComponentProps = {
+    requests: MarshalRequest[];
+    pendingCount?: number;
+    activeAgentId?: string | null;
+    viewer?: WorkboardViewer | null;
+    /** Open this request's review dialog once when the queue arrives from a deep link. */
+    initialReviewId?: string | null;
+    /** Durable task/output/session links that help a person make the review decision. */
+    reviewContext?: Record<string, ReviewContextLink[]>;
+};
+declare const RequestsQueue: import("svelte").Component<$$ComponentProps, {}, "">;
+type RequestsQueue = ReturnType<typeof RequestsQueue>;
+export default RequestsQueue;
+//# sourceMappingURL=RequestsQueue.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestsQueue.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RequestsQueue.svelte.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAEV,oBAAoB,IAAI,cAAc,EACtC,eAAe,EACf,MAAM,aAAa,CAAC;AAQrB,UAAU,iBAAiB;IAC1B,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACb;AACD,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,sFAAsF;IACtF,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC;CACpD,CAAC;AAiiBH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/StatCard.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Card from '@vibesdotdev/kit/components/ui/card';
+
+	let {
+		label,
+		value,
+		subtitle,
+		icon,
+		class: className = ''
+	}: { label: string; value: string | number; subtitle: string; icon: Snippet; class?: string } = $props();
+</script>
+
+<Card.Root class="border-white/8 bg-white/4 backdrop-blur {className}">
+	<Card.Content class="space-y-3">
+		<div class="flex items-center justify-between">
+			<span class="text-xs uppercase tracking-[0.2em] text-muted-foreground">{label}</span>
+			<span class="text-primary">
+				{@render icon()}
+			</span>
+		</div>
+		<div>
+			<p class="text-3xl font-semibold">{value}</p>
+			<p class="text-sm text-muted-foreground">{subtitle}</p>
+		</div>
+	</Card.Content>
+</Card.Root>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    value: string | number;
+    subtitle: string;
+    icon: Snippet;
+    class?: string;
+};
+declare const StatCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;
+//# sourceMappingURL=StatCard.svelte.d.ts.map