visual-comments 0.1.0 → 0.2.0

package/dist/ui/Connect.svelte

@@ -0,0 +1,128 @@
+<svelte:options css="injected" />
+
+<!--
+  Approving an agent. `visual-comments connect` sends the person to
+  `#vc-connect=<id>`; Allow adds the agent to the space, under its own name.
+  Signed out, it offers to sign in first; the address keeps the request.
+-->
+<script lang="ts">
+	import type { Agent, AgentRequest } from '../shared/types.js';
+	import { useComments } from './context.js';
+
+	let { id }: { id: string } = $props();
+
+	const vc = useComments();
+	const space = $derived(vc.store.spaceName || 'this space');
+	const signedIn = $derived(Boolean(vc.viewer));
+	let request = $state<AgentRequest>();
+	let joined = $state<Agent>();
+	let failed = $state<string>();
+	let busy = $state(false);
+
+	$effect(() => {
+		if (!signedIn) return;
+		let current = true;
+		request = undefined;
+		failed = undefined;
+		vc.store.agentRequest(id).then(
+			(found) => { if (current) request = found; },
+			(error: Error) => {
+				if (!current) return;
+				failed = error.message;
+				// The sign-in may have lapsed since the page loaded; then this offers it again.
+				void vc.store.refresh();
+			}
+		);
+		return () => { current = false; };
+	});
+
+	async function answer(allow: boolean) {
+		busy = true;
+		failed = undefined;
+		try {
+			if (allow) joined = await vc.store.approveAgent(id);
+			else {
+				await vc.store.denyAgent(id);
+				vc.endConnect();
+			}
+		} catch (error) {
+			failed = (error as Error).message;
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<dialog
+	{@attach (node) => node.showModal()}
+	onclose={() => vc.endConnect()}
+	aria-labelledby="vc-connect-title"
+	class="vc-ui pointer-events-auto m-auto w-[360px] max-w-[calc(100vw-24px)] rounded-[12px] bg-white p-5 text-[13px] text-vc-ink shadow-[0_8px_40px_rgb(0_0_0/0.28)] outline-none backdrop:bg-black/30"
+>
+	{#if !vc.viewer}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">An agent wants to join</h2>
+		{#if vc.loading}
+			<p class="mt-2 text-vc-muted">Connecting…</p>
+		{:else}
+			<p class="mt-2 text-vc-muted">Sign in to see which agent asks, and to let it read and write comments here.</p>
+			<div class="mt-5 flex justify-end gap-2">
+				<form method="dialog"><button class="vc-dialog-button">Cancel</button></form>
+				<button type="button" class="vc-dialog-button vc-dialog-primary" onclick={() => vc.signIn()}>Sign in</button>
+			</div>
+		{/if}
+	{:else if joined}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">{joined.name} joined {space}</h2>
+		<p class="mt-2 text-vc-muted">It sees new comments and replies under its own name. Remove it from your account menu at any time.</p>
+		<form method="dialog" class="mt-5 flex justify-end">
+			<button class="vc-dialog-button vc-dialog-primary">Done</button>
+		</form>
+	{:else if request}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">{request.name} wants to join {space} as an agent</h2>
+		<p class="mt-2 text-vc-muted">
+			It will see every comment here, and may reply and act on them under its own name. Allow it only if you started it.
+		</p>
+		<p class="mt-4 text-vc-muted">The agent shows this code:</p>
+		<p class="mt-1 rounded-[8px] bg-vc-surface py-2 text-center font-mono text-xl tracking-[0.2em]">{request.code}</p>
+		{#if failed}<p role="alert" class="mt-3 text-red-600">{failed}</p>{/if}
+		<div class="mt-5 flex justify-end gap-2">
+			<button type="button" class="vc-dialog-button" disabled={busy} onclick={() => answer(false)}>Deny</button>
+			<button type="button" class="vc-dialog-button vc-dialog-primary" disabled={busy} onclick={() => answer(true)}>Allow</button>
+		</div>
+	{:else if failed}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">This request cannot be answered</h2>
+		<p class="mt-2 text-vc-muted">{failed}</p>
+		<form method="dialog" class="mt-5 flex justify-end">
+			<button class="vc-dialog-button">Close</button>
+		</form>
+	{:else}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">An agent wants to join</h2>
+		<p class="mt-2 text-vc-muted">Loading…</p>
+	{/if}
+</dialog>
+
+<style>
+	.vc-dialog-button {
+		height: 2rem;
+		border-radius: 9999px;
+		padding: 0 0.875rem;
+		font-weight: 500;
+		background: var(--color-vc-wash);
+		outline: none;
+	}
+	.vc-dialog-button:hover:not(:disabled) {
+		filter: brightness(0.96);
+	}
+	.vc-dialog-button:focus-visible {
+		box-shadow: 0 0 0 2px var(--color-vc-comment);
+	}
+	.vc-dialog-button:disabled {
+		opacity: 0.6;
+	}
+	.vc-dialog-primary {
+		background: var(--color-vc-comment);
+		color: white;
+	}
+	.vc-dialog-primary:focus-visible {
+		box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-vc-comment);
+	}
+</style>

package/dist/ui/Connect.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    id: string;
+};
+declare const Connect: import("svelte").Component<$$ComponentProps, {}, "">;
+type Connect = ReturnType<typeof Connect>;
+export default Connect;

package/dist/ui/Menu.svelte

@@ -8,7 +8,8 @@
 		children,
 		align = 'start',
 		tone = 'light',
-		class: className = ''
+		class: className = '',
+		onopen
 	}: {
 		/** Accessible name for the trigger. */
 		label: string;
@@ -17,6 +18,8 @@
 		align?: 'start' | 'end';
 		tone?: 'light' | 'dark';
 		class?: string;
+		/** Called as it opens, e.g. to load what it lists. */
+		onopen?: () => void;
 	} = $props();
 
 	const id = $props.id();
@@ -27,6 +30,7 @@
 	function place(event: ToggleEvent) {
 		open = event.newState === 'open';
 		if (event.newState !== 'open' || !button || !popover) return;
+		onopen?.();
 		const rect = button.getBoundingClientRect();
 		const gutter = 12;
 		const left = align === 'start' ? rect.left : rect.right - popover.offsetWidth;

package/dist/ui/Menu.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = {
     align?: 'start' | 'end';
     tone?: 'light' | 'dark';
     class?: string;
+    /** Called as it opens, e.g. to load what it lists. */
+    onopen?: () => void;
 };
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
 type Menu = ReturnType<typeof Menu>;

package/dist/ui/Overlay.svelte

@@ -18,6 +18,7 @@
 	import { describeTarget, MAGNET, widen, type Box } from '../core/target.js';
 	import { docBoxToClient, docBoxToSurface, intersect, spotOf, toClient, type Rect, type Surface } from '../core/surfaces.js';
 	import { neck } from '../core/metaball.js';
+	import { activity } from '../core/presence.js';
 	import type { CommentImage, CommentThread } from '../shared/types.js';
 
 	const vc = useComments();
@@ -45,7 +46,7 @@
 
 	/** Where cards on a surface can go: its stage, clear of the list. */
 	function stageOf(surface: Surface): Rect {
-		const panel = vc.active ? vc.panelRect ?? floatingPanel() : undefined;
+		const panel = vc.active && !vc.panelCollapsed ? vc.panelRect ?? floatingPanel() : undefined;
 		const stage = intersect(surface.stage, { left: 0, top: 0, right: innerWidth, bottom: innerHeight });
 		return panel && panel.left < stage.right && panel.left > stage.left ? { ...stage, right: panel.left } : stage;
 	}
@@ -83,6 +84,18 @@
 		return where && !where.hidden ? [{ thread, left: where.x, top: where.y }] : [];
 	}));
 
+	/** Per thread, what those working on it say they are doing. */
+	const working = $derived.by(() => {
+		const lines = new Map<number, string>();
+		for (const participant of vc.participants) {
+			if (participant.state !== 'working' || participant.thread === undefined) continue;
+			const line = activity(participant)!;
+			const before = lines.get(participant.thread);
+			lines.set(participant.thread, before ? `${before} · ${line}` : line);
+		}
+		return lines;
+	});
+
 	/** Beside the pin, on the side with room, kept inside the stage. */
 	function beside(at: { left: number; top: number }, width: number, height: number, bounds: Rect) {
 		let left = at.left + PIN + GAP;
@@ -310,6 +323,7 @@
 		left={pin.left}
 		top={pin.top}
 		now={comments.now}
+		working={working.get(pin.thread.id)}
 		open={pin.thread.id === vc.openId}
 		onopen={() => {
 			vc.draft = undefined;

package/dist/ui/Panel.svelte

@@ -61,146 +61,160 @@
 >
 	<header class="flex h-11 shrink-0 items-center gap-0.5 pr-1.5 pl-3.5">
 		<h2 class="min-w-0 flex-1 truncate font-semibold" title={comments.spaceName || undefined}>Comments</h2>
-		<Menu label="Filter and sort" align="end" class="vc-tool-light size-7 rounded-full">
-			{#snippet trigger()}<Icon name="filter" />{/snippet}
-			{#snippet children(close)}
-				<MenuItem checked={filters.sort === 'date'} onselect={() => { close(); filters.sort = 'date'; }}>Sort by date</MenuItem>
-				<MenuItem checked={filters.sort === 'place'} onselect={() => { close(); filters.sort = 'place'; }}>Sort by place</MenuItem>
-				<div class="my-1 border-t border-vc-line"></div>
-				{#if elsewhere || filters.allPages}
-					<MenuItem checked={filters.allPages} onselect={() => { close(); filters.allPages = !filters.allPages; }}>
-						Show every page
-					</MenuItem>
-				{/if}
-				<MenuItem checked={filters.showResolved} onselect={() => { close(); filters.showResolved = !filters.showResolved; }}>
-					Show resolved comments
-				</MenuItem>
-				{#if viewer}
-					<MenuItem checked={filters.onlyMine} onselect={() => { close(); filters.onlyMine = !filters.onlyMine; }}>
-						Only your threads
-					</MenuItem>
+		{#if !vc.panelCollapsed}
+			<Menu label="Filter and sort" align="end" class="vc-tool-light size-7 rounded-full">
+				{#snippet trigger()}<Icon name="filter" />{/snippet}
+				{#snippet children(close)}
+					<MenuItem checked={filters.sort === 'date'} onselect={() => { close(); filters.sort = 'date'; }}>Sort by date</MenuItem>
+					<MenuItem checked={filters.sort === 'place'} onselect={() => { close(); filters.sort = 'place'; }}>Sort by place</MenuItem>
 					<div class="my-1 border-t border-vc-line"></div>
-					<MenuItem checked={false} onselect={() => { close(); void comments.markAllRead(); }}>Mark all as read</MenuItem>
-				{/if}
-			{/snippet}
-		</Menu>
+					{#if elsewhere || filters.allPages}
+						<MenuItem checked={filters.allPages} onselect={() => { close(); filters.allPages = !filters.allPages; }}>
+							Show every page
+						</MenuItem>
+					{/if}
+					<MenuItem checked={filters.showResolved} onselect={() => { close(); filters.showResolved = !filters.showResolved; }}>
+						Show resolved comments
+					</MenuItem>
+					{#if viewer}
+						<MenuItem checked={filters.onlyMine} onselect={() => { close(); filters.onlyMine = !filters.onlyMine; }}>
+							Only your threads
+						</MenuItem>
+						<div class="my-1 border-t border-vc-line"></div>
+						<MenuItem checked={false} onselect={() => { close(); void comments.markAllRead(); }}>Mark all as read</MenuItem>
+					{/if}
+				{/snippet}
+			</Menu>
+		{/if}
+		<button
+			type="button"
+			class="vc-tool-light size-7 rounded-full"
+			title={vc.panelCollapsed ? 'Expand comments' : 'Collapse comments'}
+			aria-label={vc.panelCollapsed ? 'Expand comments' : 'Collapse comments'}
+			aria-expanded={!vc.panelCollapsed}
+			onclick={() => (vc.panelCollapsed = !vc.panelCollapsed)}
+		>
+			<Icon name={vc.panelCollapsed ? 'chevron-left' : 'chevron-right'} />
+		</button>
 		<button type="button" class="vc-tool-light size-7 rounded-full" title="Close comments (C)" aria-label="Close comments" onclick={onclose}>
 			<Icon name="close" />
 		</button>
 	</header>
 
-	<div class="shrink-0 border-b border-vc-line px-2.5 pb-2.5">
-		<label class="flex h-8 items-center gap-2 rounded-[6px] bg-vc-surface px-2.5 text-vc-muted focus-within:ring-1 focus-within:ring-vc-comment">
-			<Icon name="search" size={15} />
-			<input
-				type="search"
-				placeholder="Search"
-				aria-label="Search comments"
-				bind:value={filters.query}
-				onkeydown={(event) => { if (event.key === 'Escape') { filters.query = ''; (event.target as HTMLElement).blur(); } }}
-				class="min-w-0 flex-1 bg-transparent text-vc-ink outline-none placeholder:text-vc-muted/80"
-			/>
-		</label>
-	</div>
-
-	{#if !viewer && !comments.loading}
-		<div class="shrink-0 border-b border-vc-line px-3.5 py-3">
-			<p>Sign in to see comments and add your own.</p>
-			<button type="button" class="mt-2 h-7 rounded-full bg-vc-comment px-3 font-medium text-white hover:brightness-110"
-				onclick={() => vc.signIn()}>Sign in</button>
+	{#if !vc.panelCollapsed}
+		<div class="shrink-0 border-b border-vc-line px-2.5 pb-2.5">
+			<label class="flex h-8 items-center gap-2 rounded-[6px] bg-vc-surface px-2.5 text-vc-muted focus-within:ring-1 focus-within:ring-vc-comment">
+				<Icon name="search" size={15} />
+				<input
+					type="search"
+					placeholder="Search"
+					aria-label="Search comments"
+					bind:value={filters.query}
+					onkeydown={(event) => { if (event.key === 'Escape') { filters.query = ''; (event.target as HTMLElement).blur(); } }}
+					class="min-w-0 flex-1 bg-transparent text-vc-ink outline-none placeholder:text-vc-muted/80"
+				/>
+			</label>
 		</div>
-	{/if}
 
-	<ol class="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
-		{#each visible as thread (thread.id)}
-			{@const root = thread.comments[0]}
-			{@const replies = thread.comments.length - 1}
-			{@const selected = thread.id === vc.openId}
-			<li class={['group relative rounded-[8px] px-3 py-2.5', selected ? 'bg-vc-comment-soft' : 'hover:bg-vc-surface']}>
-				<button
-					type="button"
-					class="absolute inset-0 rounded-[8px] focus-visible:outline-2 focus-visible:outline-vc-comment"
-					aria-label="Show comment #{thread.id} on {vc.titleOf(thread)}"
-					aria-current={selected || undefined}
-					onclick={() => onselect(thread)}
-				></button>
-				<div class={['pointer-events-none relative', thread.resolvedAt && 'opacity-55']}>
-					<div class="flex h-7 items-center">
-						{#if thread.unread}
-							<span class="absolute top-3 -left-2 size-1.5 rounded-full bg-vc-comment" title="Unread"></span>
+		{#if !viewer && !comments.loading}
+			<div class="shrink-0 border-b border-vc-line px-3.5 py-3">
+				<p>Sign in to see comments and add your own.</p>
+				<button type="button" class="mt-2 h-7 rounded-full bg-vc-comment px-3 font-medium text-white hover:brightness-110"
+					onclick={() => vc.signIn()}>Sign in</button>
+			</div>
+		{/if}
+
+		<ol class="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
+			{#each visible as thread (thread.id)}
+				{@const root = thread.comments[0]}
+				{@const replies = thread.comments.length - 1}
+				{@const selected = thread.id === vc.openId}
+				<li class={['group relative rounded-[8px] px-3 py-2.5', selected ? 'bg-vc-comment-soft' : 'hover:bg-vc-surface']}>
+					<button
+						type="button"
+						class="absolute inset-0 rounded-[8px] focus-visible:outline-2 focus-visible:outline-vc-comment"
+						aria-label="Show comment #{thread.id} on {vc.titleOf(thread)}"
+						aria-current={selected || undefined}
+						onclick={() => onselect(thread)}
+					></button>
+					<div class={['pointer-events-none relative', thread.resolvedAt && 'opacity-55']}>
+						<div class="flex h-7 items-center">
+							{#if thread.unread}
+								<span class="absolute top-3 -left-2 size-1.5 rounded-full bg-vc-comment" title="Unread"></span>
+							{/if}
+							<Avatar user={root.author} size={28} />
+						</div>
+						<p class="mt-1.5 truncate text-vc-muted">#{thread.id} · {vc.titleOf(thread)}</p>
+						<p class="truncate">
+							<span class="font-medium">{root.author.name}</span>
+							<time class="ml-1 text-vc-muted" title={fullDate(root.createdAt)}>{ago(root.createdAt, comments.now)}</time>
+						</p>
+						<p class={['line-clamp-3 break-words whitespace-pre-line', thread.unread && 'font-medium']}>{commentText(root)}</p>
+						{#if replies > 0}
+							<p class="mt-1 text-xs text-vc-muted">
+								{replies} {replies === 1 ? 'reply' : 'replies'}
+							</p>
 						{/if}
-						<Avatar user={root.author} size={28} />
 					</div>
-					<p class="mt-1.5 truncate text-vc-muted">#{thread.id} · {vc.titleOf(thread)}</p>
-					<p class="truncate">
-						<span class="font-medium">{root.author.name}</span>
-						<time class="ml-1 text-vc-muted" title={fullDate(root.createdAt)}>{ago(root.createdAt, comments.now)}</time>
-					</p>
-					<p class={['line-clamp-3 break-words whitespace-pre-line', thread.unread && 'font-medium']}>{commentText(root)}</p>
-					{#if replies > 0}
-						<p class="mt-1 text-xs text-vc-muted">
-							{replies} {replies === 1 ? 'reply' : 'replies'}
-						</p>
-					{/if}
-				</div>
-				{#if viewer}
-					<div class="absolute top-2.5 right-2 flex items-center">
-						<div class={['transition-opacity', !selected && 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100']}>
-							<Menu label="Thread options" align="end" class="vc-tool-light size-7 rounded-full">
-								{#snippet trigger()}<Icon name="more" />{/snippet}
-								{#snippet children(close)}
-									<MenuItem onselect={() => { close(); void comments.markRead(thread.id, !thread.unread); }}>
-										{thread.unread ? 'Mark as read' : 'Mark as unread'}
-									</MenuItem>
-									<MenuItem onselect={() => { close(); copyLink(thread); }}>Copy link</MenuItem>
-									{#if root.author.sub === viewer.sub}
-										<MenuItem onselect={() => {
-											close();
-											if (confirm('Delete this thread and all its replies?')) void comments.removeThread(thread.id);
-										}}>Delete thread…</MenuItem>
-									{/if}
-								{/snippet}
-							</Menu>
+					{#if viewer}
+						<div class="absolute top-2.5 right-2 flex items-center">
+							<div class={['transition-opacity', !selected && 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100']}>
+								<Menu label="Thread options" align="end" class="vc-tool-light size-7 rounded-full">
+									{#snippet trigger()}<Icon name="more" />{/snippet}
+									{#snippet children(close)}
+										<MenuItem onselect={() => { close(); void comments.markRead(thread.id, !thread.unread); }}>
+											{thread.unread ? 'Mark as read' : 'Mark as unread'}
+										</MenuItem>
+										<MenuItem onselect={() => { close(); copyLink(thread); }}>Copy link</MenuItem>
+										{#if root.author.sub === viewer.sub}
+											<MenuItem onselect={() => {
+												close();
+												if (confirm('Delete this thread and all its replies?')) void comments.removeThread(thread.id);
+											}}>Delete thread…</MenuItem>
+										{/if}
+									{/snippet}
+								</Menu>
+							</div>
+							<button
+								type="button"
+								class={['vc-tool-light size-7 rounded-full', thread.resolvedAt && 'text-vc-comment']}
+								aria-pressed={Boolean(thread.resolvedAt)}
+								title={thread.resolvedAt ? 'Reopen' : 'Resolve'}
+								aria-label={thread.resolvedAt ? `Reopen #${thread.id}` : `Resolve #${thread.id}`}
+								onclick={() => comments.resolve(thread.id, !thread.resolvedAt)}
+							>
+								<Icon name="resolve" size={18} />
+							</button>
 						</div>
-						<button
-							type="button"
-							class={['vc-tool-light size-7 rounded-full', thread.resolvedAt && 'text-vc-comment']}
-							aria-pressed={Boolean(thread.resolvedAt)}
-							title={thread.resolvedAt ? 'Reopen' : 'Resolve'}
-							aria-label={thread.resolvedAt ? `Reopen #${thread.id}` : `Resolve #${thread.id}`}
-							onclick={() => comments.resolve(thread.id, !thread.resolvedAt)}
-						>
-							<Icon name="resolve" size={18} />
-						</button>
-					</div>
-				{/if}
-			</li>
-		{:else}
-			{#if viewer && !comments.loading}
-				<li class="px-3 py-6 text-center text-vc-muted">
-					{#if filters.query.trim()}
-						No comments match “{filters.query.trim()}”.
-					{:else if filters.onlyMine}
-						You have not started or replied to any threads.
-					{:else if resolvedCount && !filters.showResolved}
-						Every thread is resolved.
-						<button type="button" class="text-vc-comment hover:underline" onclick={() => (filters.showResolved = true)}>
-							Show resolved
-						</button>
-					{:else}
-						No comments yet. Click {vc.surfaces.some((s) => s.element) ? 'a frame' : 'anywhere on the page'} to add one.
 					{/if}
 				</li>
-			{/if}
-		{/each}
-	</ol>
+			{:else}
+				{#if viewer && !comments.loading}
+					<li class="px-3 py-6 text-center text-vc-muted">
+						{#if filters.query.trim()}
+							No comments match “{filters.query.trim()}”.
+						{:else if filters.onlyMine}
+							You have not started or replied to any threads.
+						{:else if resolvedCount && !filters.showResolved}
+							Every thread is resolved.
+							<button type="button" class="text-vc-comment hover:underline" onclick={() => (filters.showResolved = true)}>
+								Show resolved
+							</button>
+						{:else}
+							No comments yet. Click {vc.surfaces.some((s) => s.element) ? 'a frame' : 'anywhere on the page'} to add one.
+						{/if}
+					</li>
+				{/if}
+			{/each}
+		</ol>
 
-	{#if comments.error}
-		<div role="alert" class="m-2 mt-0 flex shrink-0 items-start gap-2 rounded-[8px] bg-vc-ink px-3 py-2 text-white">
-			<p class="flex-1">{comments.error}</p>
-			<button type="button" class="text-white/70 hover:text-white" aria-label="Dismiss" onclick={() => (comments.error = null)}>
-				<Icon name="close" size={14} />
-			</button>
-		</div>
+		{#if comments.error}
+			<div role="alert" class="m-2 mt-0 flex shrink-0 items-start gap-2 rounded-[8px] bg-vc-ink px-3 py-2 text-white">
+				<p class="flex-1">{comments.error}</p>
+				<button type="button" class="text-white/70 hover:text-white" aria-label="Dismiss" onclick={() => (comments.error = null)}>
+					<Icon name="close" size={14} />
+				</button>
+			</div>
+		{/if}
 	{/if}
 </aside>

package/dist/ui/Pin.svelte

@@ -27,13 +27,15 @@
 	import { ago } from '../core/time.js';
 	import type { CommentThread } from '../shared/types.js';
 
-	let { thread, left, top, open, now, onopen }: {
+	let { thread, left, top, open, now, working, onopen }: {
 		thread: CommentThread;
 		/** The pin's point, in client pixels. */
 		left: number;
 		top: number;
 		open: boolean;
 		now: number;
+		/** Set while someone works on the thread: what they say they are doing. The pin pulses meanwhile. */
+		working?: string;
 		onopen: () => void;
 	} = $props();
 
@@ -49,6 +51,14 @@
 	const expanded = $derived((hovered || focused) && !open && textWidth > 0);
 </script>
 
+{#if working}
+	<span
+		class={['vc-pin-pulse vc-working pointer-events-none absolute', expanded ? 'z-30' : open ? 'z-20' : 'z-10']}
+		style:left="{left}px"
+		style:top="{top}px"
+		aria-hidden="true"
+	></span>
+{/if}
 <button
 	type="button"
 	data-vc-ui
@@ -68,7 +78,7 @@
 		: expanded
 			? '0 4px 18px rgb(0 0 0 / 0.22)'
 			: '0 1px 4px rgb(0 0 0 / 0.3)'}
-	aria-label="Comment #{thread.id} by {root.author.name}: {text}"
+	aria-label="Comment #{thread.id} by {root.author.name}: {text}{working ? `. ${working}` : ''}"
 	aria-expanded={open}
 	in:pop={{ duration: 240, easing: backOut }}
 	out:pop={{ duration: 140, easing: cubicIn }}
@@ -98,6 +108,9 @@
 		{#if replies > 0}
 			<span class="mt-0.5 block text-xs text-vc-muted">{replies} {replies === 1 ? 'reply' : 'replies'}</span>
 		{/if}
+		{#if working}
+			<span class="mt-0.5 block truncate text-xs text-vc-working">{working}</span>
+		{/if}
 	</span>
 	{#if thread.unread}
 		<span class="absolute top-0.5 right-0.5 size-2.5 rounded-full bg-vc-comment ring-2 ring-white"></span>
@@ -123,6 +136,13 @@
 		top: 10px;
 		left: 10px;
 	}
+	/* The collapsed pin's shape, under it: its ring pulses out from the pin's edge. */
+	.vc-pin-pulse {
+		width: 32px;
+		height: 32px;
+		border-radius: 16px 16px 16px 0;
+		transform: translateY(-100%);
+	}
 	.vc-pin-text {
 		transition: opacity 140ms ease 60ms;
 	}

package/dist/ui/Pin.svelte.d.ts

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     top: number;
     open: boolean;
     now: number;
+    /** Set while someone works on the thread: what they say they are doing. The pin pulses meanwhile. */
+    working?: string;
     onopen: () => void;
 };
 declare const Pin: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/ui/Presence.svelte

@@ -0,0 +1,43 @@
+<!--
+  Who else is here: an avatar for each other person and agent present, the
+  busiest first within each, beside the account button. Hover for what they do.
+-->
+<script lang="ts">
+	import type { VisualComments } from '../visual-comments.svelte.js';
+	import { activity, present, type Present } from '../core/presence.js';
+	import Avatar from './Avatar.svelte';
+	import { authorLabel } from './text.js';
+
+	let { vc, size = 24 }: { vc: VisualComments; size?: number } = $props();
+
+	const SHOWN = 4;
+	const others = $derived(present(vc.participants.filter((p) => p.author.sub !== vc.viewer?.sub)));
+	const shown = $derived(others.length > SHOWN ? others.slice(0, SHOWN - 1) : others);
+	const rest = $derived(others.slice(shown.length));
+
+	function describe(someone: Present) {
+		const doing = someone.participants.map(activity).filter(Boolean);
+		return [authorLabel(someone.author), ...doing].join('\n');
+	}
+</script>
+
+{#if others.length}
+	<ul class="flex items-center gap-1 px-1" aria-label="Here now">
+		{#each shown as someone (someone.author.sub)}
+			<li class="flex" aria-label={describe(someone)}>
+				<Avatar user={someone.author} {size} title={describe(someone)} class={someone.state === 'working' ? 'vc-working' : ''} />
+			</li>
+		{/each}
+		{#if rest.length}
+			<li
+				class="flex items-center justify-center rounded-full bg-current/15 text-[11px] font-medium"
+				style:width="{size}px"
+				style:height="{size}px"
+				title={rest.map(describe).join('\n\n')}
+				aria-label={rest.map(describe).join('\n\n')}
+			>
+				+{rest.length}
+			</li>
+		{/if}
+	</ul>
+{/if}

package/dist/ui/Presence.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { VisualComments } from '../visual-comments.svelte.js';
+type $$ComponentProps = {
+    vc: VisualComments;
+    size?: number;
+};
+declare const Presence: import("svelte").Component<$$ComponentProps, {}, "">;
+type Presence = ReturnType<typeof Presence>;
+export default Presence;