visual-comments 0.1.0 → 0.2.0

package/dist/sveltekit/CommentTools.svelte

@@ -0,0 +1,98 @@
+<!--
+  The comments' part of the toolbar, while they are on: the comment button and the account (who
+  is here, and the viewer's avatar or Sign in), after a divider when the app's tools come first.
+  Left out of builds without the comments (visual-comments/vite).
+-->
+<script lang="ts">
+	import { page } from '$app/state';
+	import { useComments } from './context.js';
+	import ToolbarButton from './ToolbarButton.svelte';
+
+	let { divider = false }: { divider?: boolean } = $props();
+
+	const comments = useComments();
+	const shortcut = $derived(comments?.current?.options.shortcut ?? 'c');
+	const viewer = $derived(comments?.viewer);
+	const initial = $derived(Array.from(viewer?.name.trim() || '?')[0].toLocaleUpperCase());
+	const signIn = $derived(`${comments?.auth.replace(/\/$/, '')}/login?${new URLSearchParams({ returnTo: `${page.url.pathname}${page.url.search}` })}`);
+</script>
+
+{#if comments?.enabled}
+	{#if divider}<span class="vc-toolbar-divider" aria-hidden="true"></span>{/if}
+	<!-- The comments find this button by `data-vc-toggle`: clicks turn comment mode on and off, and they set `aria-pressed` and `data-vc-unread`. -->
+	<ToolbarButton
+		data-vc-toggle
+		label={shortcut === false ? 'Comments' : `Comments (${shortcut.toUpperCase()})`}
+		disabled={!comments.current}
+	>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<path d="M12 3.5a8.5 8.5 0 1 1 0 17H3.5V12A8.5 8.5 0 0 1 12 3.5z" />
+		</svg>
+	</ToolbarButton>
+	<!-- The comments put the account button here once they have started; until then, it shows who the server said is signed in. -->
+	<span class="vc-toolbar-account" data-vc-account>
+		{#if !comments.current && viewer}
+			<span class="vc-toolbar-tool vc-toolbar-me" title={viewer.name}>
+				<span class="vc-toolbar-avatar" aria-hidden="true">
+					{#if viewer.picture}<img src={viewer.picture} alt="" referrerpolicy="no-referrer" />{:else}{initial}{/if}
+				</span>
+				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<path d="m6 9 6 6 6-6" />
+				</svg>
+			</span>
+		{:else if !comments.current && viewer === null}
+			<a class="vc-toolbar-tool vc-toolbar-sign-in" href={signIn}>Sign in</a>
+		{/if}
+	</span>
+{/if}
+
+<style>
+	.vc-toolbar-divider {
+		width: 1px;
+		height: 1.25rem;
+		margin: 0 0.25rem;
+		background: currentColor;
+		opacity: 0.25;
+	}
+	/* The account draws in its own shadow root and takes the toolbar's text colour. */
+	.vc-toolbar-account {
+		display: inline-flex;
+	}
+	/* Until then, the same sizes as the account button. */
+	.vc-toolbar-tool {
+		display: inline-flex;
+		height: 2rem;
+		align-items: center;
+		gap: 0.375rem;
+		border-radius: 9999px;
+		color: inherit;
+		text-decoration: none;
+	}
+	.vc-toolbar-me {
+		padding: 0 0.5rem 0 0.125rem;
+	}
+	.vc-toolbar-sign-in {
+		padding: 0 0.875rem;
+		font-weight: 500;
+	}
+	.vc-toolbar-sign-in:hover {
+		background: color-mix(in srgb, currentColor 14%, transparent);
+	}
+	.vc-toolbar-avatar {
+		display: grid;
+		width: 28px;
+		height: 28px;
+		place-items: center;
+		overflow: hidden;
+		border-radius: 9999px;
+		background: var(--vc-avatar, #009aaa);
+		color: #fff;
+		font-size: 14px;
+		line-height: 1;
+	}
+	.vc-toolbar-avatar img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+</style>

package/dist/sveltekit/CommentTools.svelte.d.ts

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

package/dist/sveltekit/Comments.svelte

@@ -0,0 +1,104 @@
+<!--
+  Adds comments to a SvelteKit app. Put it in the root layout, around the
+  pages, with the config the server's `commentsFromEnv` gives the layout's
+  `load`. With no config, comments are off: it renders only the pages, and the
+  browser never loads the comments' code.
+-->
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { CommentsClientConfig } from '../server/env.js';
+	import type { VisualComments, VisualCommentsOptions } from '../visual-comments.svelte.js';
+
+	export interface CommentsProps extends Omit<VisualCommentsOptions, 'endpoint' | 'auth' | 'page'> {
+		/** Where the comments and sign-in are, from `commentsFromEnv(...).client`. Null or undefined: comments are off. */
+		config: CommentsClientConfig | null | undefined;
+		/**
+		 * Which threads a page shows. `path` (default): each address's own, by
+		 * origin and path. `route`: every address of a route shares them, so
+		 * `/projects/1` and `/projects/2` show the threads of `/projects/[id]`.
+		 * A string: one set for every page. A function: a key for each address.
+		 */
+		page?: 'path' | 'route' | (string & {}) | ((url: URL) => string);
+		/** Signs in and out another way than the sign-in routes of `config.auth`. */
+		auth?: { signIn(): void; signOut(): void };
+		/** The comments while they run, to bind to. */
+		comments?: VisualComments;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page as current } from '$app/state';
+	import { setAppComments } from './context.js';
+
+	let { config, page = 'path', auth, comments = $bindable(), children, ...rest }: CommentsProps = $props();
+
+	// Started again only when where the comments are changes, not whenever `load` runs again.
+	const endpoint = $derived(config?.endpoint);
+	const authPath = $derived(config?.auth);
+
+	setAppComments({
+		get enabled() { return Boolean(endpoint); },
+		get current() { return comments; },
+		get viewer() { return config?.viewer; },
+		get auth() { return authPath ?? '/auth'; }
+	});
+
+	/** The page key of an address: its origin and path, without a trailing slash. */
+	function pathKey(url: URL) {
+		const path = url.pathname.length > 1 ? url.pathname.replace(/\/+$/, '') : url.pathname;
+		return `${url.origin}${path}`;
+	}
+
+	function pageOption(option: NonNullable<CommentsProps['page']>): VisualCommentsOptions['page'] {
+		if (option === 'path') return undefined;
+		// Read when the comments measure the page, by when the router has updated `page`.
+		if (option === 'route') return (url) => (current.route.id ? `${url.origin}${current.route.id}` : pathKey(url));
+		return option;
+	}
+
+	/** Goes to a thread on another page of the app with the router, so the comments stay open. */
+	function navigate(link: string) {
+		const url = new URL(link, location.href);
+		if (url.origin !== location.origin) return location.assign(link);
+		// The thread is already open; its link's `#vc=<id>` is only for addresses opened anew.
+		const hash = url.hash.slice(1).split('&').filter((part) => part && !part.startsWith('vc=')).join('&');
+		void goto(`${url.pathname}${url.search}${hash ? `#${hash}` : ''}`).then(() => comments?.relayout());
+	}
+
+	const options = $derived<VisualCommentsOptions>({
+		navigate,
+		...rest,
+		page: pageOption(page),
+		...(auth ? { auth } : {})
+	});
+
+	$effect(() => {
+		if (!endpoint) return;
+		const start = { endpoint, auth: authPath ?? '/auth' };
+		let stopped = false;
+		let instance: VisualComments | undefined;
+		// Loaded only when comments are on, so an app without them never downloads their code.
+		void import('../index.js').then(({ createVisualComments }) => {
+			if (stopped) return;
+			// Who the page was loaded for, so the account shows without waiting for the server.
+			instance = createVisualComments({ ...untrack(() => options), ...start, viewer: untrack(() => config?.viewer) });
+			comments = instance;
+		});
+		return () => {
+			stopped = true;
+			instance?.destroy();
+			if (untrack(() => comments) === instance) comments = undefined;
+		};
+	});
+
+	// Options the app changes later, e.g. a `show` that depends on its state.
+	$effect(() => {
+		const next = options;
+		untrack(() => comments)?.configure(next);
+	});
+</script>
+
+{@render children?.()}

package/dist/sveltekit/Comments.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { CommentsClientConfig } from '../server/env.js';
+import type { VisualComments, VisualCommentsOptions } from '../visual-comments.svelte.js';
+export interface CommentsProps extends Omit<VisualCommentsOptions, 'endpoint' | 'auth' | 'page'> {
+    /** Where the comments and sign-in are, from `commentsFromEnv(...).client`. Null or undefined: comments are off. */
+    config: CommentsClientConfig | null | undefined;
+    /**
+     * Which threads a page shows. `path` (default): each address's own, by
+     * origin and path. `route`: every address of a route shares them, so
+     * `/projects/1` and `/projects/2` show the threads of `/projects/[id]`.
+     * A string: one set for every page. A function: a key for each address.
+     */
+    page?: 'path' | 'route' | (string & {}) | ((url: URL) => string);
+    /** Signs in and out another way than the sign-in routes of `config.auth`. */
+    auth?: {
+        signIn(): void;
+        signOut(): void;
+    };
+    /** The comments while they run, to bind to. */
+    comments?: VisualComments;
+    children?: Snippet;
+}
+declare const Comments: import("svelte").Component<CommentsProps, {}, "comments">;
+type Comments = ReturnType<typeof Comments>;
+export default Comments;

package/dist/sveltekit/Toolbar.svelte

@@ -0,0 +1,64 @@
+<!--
+  A toolbar in the style of Figma's and Vercel's: a pill of dark glass,
+  centred at the bottom of the window (or the top, or wherever the app puts it
+  with `position="inline"`). The app's own tools go first, as its content,
+  e.g. `ToolbarButton`s; then, while comments are on, the comment button and
+  the account (who is here, and the viewer's avatar or Sign in). It replaces
+  the comments' own floating toolbar. With comments off and no tools of its
+  own, it is not shown.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import CommentTools from './CommentTools.svelte';
+	import { useComments } from './context.js';
+
+	let { position = 'bottom', label = 'Toolbar', class: className, children }: {
+		/** `bottom` or `top` of the window, centred; `inline` where the app places it. Default `bottom`. */
+		position?: 'bottom' | 'top' | 'inline';
+		/** The toolbar's name for screen readers. */
+		label?: string;
+		class?: string;
+		/** The app's own tools. */
+		children?: Snippet;
+	} = $props();
+
+	const comments = useComments();
+</script>
+
+{#if comments?.enabled || children}
+	<!-- Never takes comments itself, even over a surface. -->
+	<div role="toolbar" aria-label={label} data-vc-ignore class={['vc-toolbar', position, className]}>
+		{@render children?.()}
+		<CommentTools divider={Boolean(children)} />
+	</div>
+{/if}
+
+<style>
+	.vc-toolbar {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		border-radius: 9999px;
+		padding: 0.25rem;
+		background: var(--vc-island, rgb(50 50 50 / 0.72));
+		color: var(--vc-island-ink, #fff);
+		font: 13px var(--vc-font, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
+		box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
+		backdrop-filter: blur(5px);
+		-webkit-backdrop-filter: blur(5px);
+	}
+	.vc-toolbar.bottom,
+	.vc-toolbar.top {
+		position: fixed;
+		left: 50%;
+		translate: -50% 0;
+		/* Under the comments' own layer, so their cards and menus open over it. */
+		z-index: 2147483000;
+	}
+	.vc-toolbar.bottom {
+		bottom: 1rem;
+	}
+	.vc-toolbar.top {
+		top: 1rem;
+	}
+</style>

package/dist/sveltekit/Toolbar.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** `bottom` or `top` of the window, centred; `inline` where the app places it. Default `bottom`. */
+    position?: 'bottom' | 'top' | 'inline';
+    /** The toolbar's name for screen readers. */
+    label?: string;
+    class?: string;
+    /** The app's own tools. */
+    children?: Snippet;
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/sveltekit/ToolbarButton.svelte

@@ -0,0 +1,66 @@
+<!--
+  A tool of the comments' toolbar, for the app's own tools beside the
+  comment button: round, light on the toolbar's dark glass, and filled while
+  `pressed`. Give it an icon as its content and a `label`.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let { label, pressed, children, ...rest }: HTMLButtonAttributes & {
+		/** What the tool does, for screen readers and as its tooltip. */
+		label: string;
+		/** For a tool that is on or off. */
+		pressed?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<button type="button" class="vc-toolbar-button" aria-label={label} title={label} aria-pressed={pressed} {...rest}>
+	{@render children()}
+</button>
+
+<style>
+	.vc-toolbar-button {
+		position: relative;
+		display: inline-flex;
+		height: 2rem;
+		min-width: 2rem;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		border: 0;
+		border-radius: 9999px;
+		padding: 0 0.5rem;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		outline: none;
+	}
+	.vc-toolbar-button:hover {
+		background: var(--vc-island-hover, rgb(255 255 255 / 0.14));
+	}
+	.vc-toolbar-button[aria-pressed='true'] {
+		background: var(--vc-island-ink, #fff);
+		color: var(--vc-ink, #292524);
+	}
+	.vc-toolbar-button:focus-visible {
+		box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
+	}
+	.vc-toolbar-button:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+	/* Something is unread: a dot, as on the comments' own toolbar. */
+	.vc-toolbar-button[data-vc-unread]::after {
+		content: '';
+		position: absolute;
+		top: 0.25rem;
+		right: 0.25rem;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: var(--vc-comment, #0d99ff);
+	}
+</style>

package/dist/sveltekit/ToolbarButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLButtonAttributes & {
+    /** What the tool does, for screen readers and as its tooltip. */
+    label: string;
+    /** For a tool that is on or off. */
+    pressed?: boolean;
+    children: Snippet;
+};
+declare const ToolbarButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/sveltekit/context.d.ts

@@ -0,0 +1,16 @@
+import type { Viewer } from '../shared/types.js';
+import type { VisualComments } from '../visual-comments.svelte.js';
+/** The comments of the app, as `<Comments>` provides them. Both fields are reactive. */
+export interface AppComments {
+    /** Whether comments are on for this deployment: `<Comments config>` is set. */
+    readonly enabled: boolean;
+    /** The comments, once they have started in the browser; undefined before, during server rendering, and while off. */
+    readonly current: VisualComments | undefined;
+    /** Who is signed in as the page loaded (`comments.load` on the server); undefined when it did not say. */
+    readonly viewer: Viewer | null | undefined;
+    /** Where the sign-in routes are, e.g. `/auth`. */
+    readonly auth: string;
+}
+export declare function setAppComments(comments: AppComments): void;
+/** The comments of the app, inside `<Comments>`; undefined outside it. */
+export declare function useComments(): AppComments | undefined;

package/dist/sveltekit/context.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('visual-comments/sveltekit');
+export function setAppComments(comments) {
+    setContext(KEY, comments);
+}
+/** The comments of the app, inside `<Comments>`; undefined outside it. */
+export function useComments() {
+    return getContext(KEY);
+}

package/dist/sveltekit/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Comments, type CommentsProps } from './Comments.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { useComments, type AppComments } from './context.js';
+export type { CommentsClientConfig } from '../server/env.js';
+export type { VisualComments, VisualCommentsOptions } from '../visual-comments.svelte.js';

package/dist/sveltekit/index.js

@@ -0,0 +1,6 @@
+// `visual-comments/sveltekit`: comments in a SvelteKit app. The server side,
+// set up from environment variables, is `commentsFromEnv` of `visual-comments/server`.
+export { default as Comments } from './Comments.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { useComments } from './context.js';

package/dist/ui/Account.svelte

@@ -1,28 +1,42 @@
 <svelte:options css="injected" />
 
 <!--
-  The account button: the viewer's avatar with a menu to sign out, or Sign in.
-  It sits in the floating toolbar, or in a host's own toolbar where the host
-  puts a `data-vc-account` element; there it takes the host's text colour.
+  The account button: the viewer's avatar with a menu to sign out and to see
+  the space's agents, or Sign in; beside it, who else is here. It sits in the
+  floating toolbar, or in a host's own toolbar where the host puts a
+  `data-vc-account` element; there it takes the host's text colour.
 -->
 <script lang="ts">
 	import type { VisualComments } from '../visual-comments.svelte.js';
+	import type { Agent } from '../shared/types.js';
 	import Avatar from './Avatar.svelte';
 	import { setComments } from './context.js';
 	import Icon from './Icon.svelte';
 	import Menu from './Menu.svelte';
 	import MenuItem from './MenuItem.svelte';
+	import Presence from './Presence.svelte';
 
 	let { vc, slot = false }: { vc: VisualComments; slot?: boolean } = $props();
 	// svelte-ignore state_referenced_locally
 	if (slot) setComments(vc);
 
 	const tool = $derived(slot ? 'vc-slot-tool' : 'vc-island-tool');
+	const signedIn = $derived(Boolean(vc.viewer));
+
+	// Listed ahead, so the menu opens at its full size.
+	$effect(() => {
+		if (signedIn) void vc.store.loadAgents();
+	});
+
+	function remove(agent: Agent) {
+		if (confirm(`Remove ${agent.name}? It will no longer see or write comments here.`)) void vc.store.removeAgent(agent.id);
+	}
 </script>
 
-<span class={['vc-ui inline-flex', slot && 'vc-slot']}>
+<span class={['vc-ui inline-flex items-center', slot && 'vc-slot']}>
 	{#if vc.viewer}
-		<Menu label={`Account: ${vc.viewer.name}`} align="end" class="{tool} pr-2 pl-0.5">
+		<Presence {vc} />
+		<Menu label={`Account: ${vc.viewer.name}`} align="end" class="{tool} pr-2 pl-0.5" onopen={() => vc.store.loadAgents()}>
 			{#snippet trigger()}
 				{#if vc.viewer}<Avatar user={vc.viewer} size={28} />{/if}
 				<Icon name="chevron-down" size={14} />
@@ -33,12 +47,36 @@
 					{#if vc.viewer?.email}<p class="mt-0.5 truncate text-xs text-vc-muted">{vc.viewer.email}</p>{/if}
 					{#if vc.store.spaceName}<p class="mt-0.5 truncate text-xs text-vc-muted">Comments in {vc.store.spaceName}</p>{/if}
 				</div>
+				{#if vc.store.agents}
+					<div class="max-w-72 border-b border-vc-line py-1.5">
+						<p class="px-3 pb-1 text-xs text-vc-muted">Agents</p>
+						{#each vc.store.agents as agent (agent.id)}
+							<div class="flex items-center gap-2 px-3 py-1">
+								<Avatar user={{ sub: `agent:${agent.id}`, name: agent.name, agent: { addedBy: agent.addedBy } }} size={22} />
+								<div class="min-w-0 flex-1">
+									<p class="truncate">{agent.name}</p>
+									<p class="truncate text-xs text-vc-muted">Added by {agent.addedBy.name}</p>
+								</div>
+								<button
+									type="button"
+									class="shrink-0 rounded-[2px] px-1.5 py-0.5 text-xs text-vc-muted outline-none hover:bg-vc-wash hover:text-vc-ink focus-visible:bg-vc-wash"
+									aria-label="Remove {agent.name}"
+									onclick={() => remove(agent)}
+								>Remove</button>
+							</div>
+						{:else}
+							<p class="px-3 pb-1 text-xs text-vc-muted">
+								None yet. An agent asks to join with <code class="font-mono">npx visual-comments connect</code>.
+							</p>
+						{/each}
+					</div>
+				{/if}
 				<MenuItem onselect={() => { close(); vc.signOut(); }}>Sign out</MenuItem>
 			{/snippet}
 		</Menu>
 	{:else}
-		<button type="button" part="button" class="{tool} px-3.5 font-medium" disabled={vc.loading} onclick={() => vc.signIn()}>
-			{vc.loading ? 'Connecting…' : 'Sign in'}
+		<button type="button" part="button" class="{tool} px-3.5 font-medium" disabled={!vc.store.viewerKnown} onclick={() => vc.signIn()}>
+			{vc.store.viewerKnown ? 'Sign in' : 'Connecting…'}
 		</button>
 	{/if}
 </span>

package/dist/ui/App.svelte

@@ -1,12 +1,13 @@
 <!--
   Everything the comments draw over the page, in one shadow root: layers that
   catch clicks over frames in comment mode, pins and cards, the list of
-  threads and the floating toolbar.
+  threads, the floating toolbar and the dialog that lets an agent join.
 -->
 <script lang="ts">
 	import type { VisualComments } from '../visual-comments.svelte.js';
 	import type { Surface } from '../core/surfaces.js';
 	import { setComments } from './context.js';
+	import Connect from './Connect.svelte';
 	import Overlay from './Overlay.svelte';
 	import Panel from './Panel.svelte';
 	import Toolbar from './Toolbar.svelte';
@@ -55,8 +56,10 @@
 
 	{#if vc.active}
 		<Panel
-			class={panel ? 'absolute z-20' : 'absolute top-3 right-3 bottom-3 z-20 w-80'}
-			style={panel ? `left:${panel.left}px;top:${panel.top}px;width:${panel.right - panel.left}px;height:${panel.bottom - panel.top}px` : ''}
+			class={panel ? 'absolute z-20' : vc.panelCollapsed ? 'absolute top-3 right-3 z-20 w-40' : 'absolute top-3 right-3 bottom-3 z-20 w-80'}
+			style={panel ? vc.panelCollapsed
+				? `left:${Math.max(panel.left, panel.right - 160)}px;top:${panel.top}px;width:${Math.min(160, panel.right - panel.left)}px;height:46px`
+				: `left:${panel.left}px;top:${panel.top}px;width:${panel.right - panel.left}px;height:${panel.bottom - panel.top}px` : ''}
 			onselect={(thread) => vc.focus(thread)}
 			onclose={() => vc.toggle(false)}
 		/>
@@ -65,4 +68,10 @@
 	{#if vc.showToolbar}
 		<Toolbar />
 	{/if}
+
+	{#if vc.connecting}
+		{#key vc.connecting}
+			<Connect id={vc.connecting} />
+		{/key}
+	{/if}
 </div>

package/dist/ui/Avatar.svelte

@@ -1,4 +1,7 @@
-<!-- A person's profile picture, or their initial on a colour of their own. -->
+<!--
+  A person's profile picture, or their initial on a colour of their own.
+  An agent's has a badge, and says who added it when hovered.
+-->
 <script lang="ts" module>
 	// Others get a stable colour from their id; the viewer keeps the account colour.
 	const COLORS = ['#7b61ff', '#f24822', '#14ae5c', '#ffa629', '#0d99ff', '#e5487d', '#667799'];
@@ -11,11 +14,15 @@
 </script>
 
 <script lang="ts">
+	import type { Author } from '../shared/types.js';
 	import { useComments } from './context.js';
+	import { authorLabel } from './text.js';
 
-	let { user, size = 24, class: className = '' }: {
-		user: { sub: string; name: string; picture?: string };
+	let { user, size = 24, title, class: className = '' }: {
+		user: Author;
 		size?: number;
+		/** Default: an agent's name and who added it. */
+		title?: string;
 		class?: string;
 	} = $props();
 
@@ -23,20 +30,35 @@
 	let failed = $state<string>();
 	const initial = $derived(Array.from(user.name.trim() || '?')[0].toLocaleUpperCase());
 	const self = $derived(vc?.viewer?.sub === user.sub);
+	const badge = $derived(Math.max(10, Math.round(size * 0.45)));
 </script>
 
 <span
-	class={['flex shrink-0 items-center justify-center overflow-hidden rounded-full leading-none text-white select-none', className]}
+	class={['grid shrink-0 place-items-center rounded-full leading-none text-white select-none', className]}
 	style:width="{size}px"
 	style:height="{size}px"
 	style:font-size="{Math.round(size * 0.5)}px"
 	style:background={self ? 'var(--color-vc-avatar)' : colorFor(user.sub)}
+	title={title ?? (user.agent ? authorLabel(user) : undefined)}
 	aria-hidden="true"
 >
 	{#if user.picture && user.picture !== failed}
-		<img src={user.picture} alt="" referrerpolicy="no-referrer" class="size-full object-cover" draggable="false"
+		<img src={user.picture} alt="" referrerpolicy="no-referrer" class="size-full rounded-full object-cover [grid-area:1/1]" draggable="false"
 			onerror={() => { failed = user.picture; }} />
 	{:else}
-		{initial}
+		<span class="[grid-area:1/1]">{initial}</span>
+	{/if}
+	{#if user.agent}
+		<!-- Past the corner, like a status dot; nothing clips it. -->
+		<span
+			class="grid place-items-center self-end justify-self-end rounded-full bg-vc-agent text-white ring-[1.5px] ring-white [grid-area:1/1]"
+			style:width="{badge}px"
+			style:height="{badge}px"
+			style:margin="0 {-badge / 4}px {-badge / 4}px 0"
+		>
+			<svg width={badge - 3} height={badge - 3} viewBox="0 0 24 24" fill="currentColor">
+				<path d="M12 2c.8 5.6 4.4 9.2 10 10-5.6.8-9.2 4.4-10 10-.8-5.6-4.4-9.2-10-10 5.6-.8 9.2-4.4 10-10z" />
+			</svg>
+		</span>
 	{/if}
 </span>

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

@@ -1,10 +1,9 @@
+import type { Author } from '../shared/types.js';
 type $$ComponentProps = {
-    user: {
-        sub: string;
-        name: string;
-        picture?: string;
-    };
+    user: Author;
     size?: number;
+    /** Default: an agent's name and who added it. */
+    title?: string;
     class?: string;
 };
 declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;