@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/layout/UserNav.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, SidebarMenu, SidebarMenuItem } from "../ui";
+import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { ModeSwitcher } from "../ui/mode-switcher";
+import { Icon } from "../icon";
+let { user, open = $bindable(false) } = $props();
+const avatarSrc = $derived(user?.image ? user.image : undefined);
+const displayName = $derived(user?.name || user?.email || "User");
+// Billing integration — optional, set via props or injectable store
+const planDisplayName = null;
+const creditCount = null;
+const isRefreshing = false;
+async function handleRefreshBilling(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+</script>
+
+{#if user}
+	<SidebarMenu>
+		<SidebarMenuItem>
+			<DropdownMenu bind:open onOpenChange={(value) => (open = value)}>
+				<DropdownMenuTrigger data-user-menu-trigger="true">
+					{#snippet child({ props })}
+						<button
+							{...props}
+							class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-[color:var(--brand-foreground)] [background:var(--brand-gradient,var(--brand-fill))] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground data-[state=open]:[background:none]"
+							data-testid="user-menu"
+						>
+							<div
+								class="flex aspect-square size-8 items-center justify-center rounded-lg bg-current/15 shadow-sm backdrop-blur-sm"
+							>
+								<Avatar class="h-6 w-6 rounded-md">
+									<AvatarImage src={avatarSrc} alt={displayName} />
+									<AvatarFallback
+										class="rounded-md bg-current/20 text-xs font-semibold text-inherit"
+									>
+										{(() => {
+											const raw = user?.name ?? user?.email ?? '';
+											return raw.slice(0, 1).toUpperCase() || 'U';
+										})()}
+									</AvatarFallback>
+								</Avatar>
+							</div>
+							<div class="grid flex-1 text-left text-sm leading-tight">
+								<span class="truncate font-semibold text-inherit">{displayName}</span>
+								<span class="truncate text-xs text-inherit opacity-80">{user?.email || ''}</span>
+							</div>
+
+							<div
+								class="ml-2 flex max-w-[120px] flex-col items-end justify-center gap-[2px] md:max-w-[200px]"
+							>
+								{#if planDisplayName}
+									<Badge
+										variant="outline"
+										class="w-full truncate border-transparent bg-current/20 px-2 py-0.5 text-center text-[10px] text-inherit capitalize md:w-auto"
+									>
+										{planDisplayName}
+									</Badge>
+								{/if}
+								{#if creditCount !== null}
+									<Badge
+										variant="outline"
+										class="w-full truncate px-1 py-0 text-center text-[10px] text-inherit ring-1 ring-current/40 md:w-auto"
+									>
+										{creditCount} cr
+									</Badge>
+								{/if}
+							</div>
+							<Icon icon="lucide:chevrons-up-down" class="ml-auto size-4 text-inherit" />
+						</button>
+					{/snippet}
+				</DropdownMenuTrigger>
+				<DropdownMenuContent
+					class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-48 rounded-lg"
+					side="top"
+					align="end"
+					sideOffset={4}
+				>
+					<DropdownMenuGroup>
+						<DropdownMenuLabel>Account</DropdownMenuLabel>
+						<DropdownMenuItem>
+							{#snippet child({ props })}
+								<a href="/profile" class="flex items-center gap-2" {...props}>
+									<Icon icon="lucide:user" class="h-4 w-4" />
+									<span>Profile</span>
+								</a>
+							{/snippet}
+						</DropdownMenuItem>
+					</DropdownMenuGroup>
+
+					<DropdownMenuSeparator />
+
+					<DropdownMenuGroup>
+						<DropdownMenuLabel class="flex items-center justify-between">
+							<span>Billing</span>
+							<Button
+								variant="ghost"
+								size="icon"
+								class="h-6 w-6"
+								disabled={isRefreshing}
+								onclick={handleRefreshBilling}
+								title="Refresh billing data"
+							>
+								<Icon
+									icon="lucide:refresh-cw"
+									class="h-3.5 w-3.5 {isRefreshing ? 'animate-spin' : ''}"
+								/>
+							</Button>
+						</DropdownMenuLabel>
+						<DropdownMenuItem>
+							{#snippet child({ props })}
+								<a href="/billing" class="flex items-center gap-2" {...props}>
+									<Icon icon="lucide:credit-card" class="h-4 w-4" />
+									<span>Subscription</span>
+									{#if planDisplayName}
+										<Badge variant="secondary" class="ml-auto text-[10px] capitalize">
+											{planDisplayName}
+										</Badge>
+									{/if}
+								</a>
+							{/snippet}
+						</DropdownMenuItem>
+					</DropdownMenuGroup>
+
+					<DropdownMenuSeparator />
+
+					<DropdownMenuGroup>
+						<DropdownMenuLabel>Appearance</DropdownMenuLabel>
+						<DropdownMenuItem>
+							{#snippet child({ props })}
+								<div
+									class={`flex items-center justify-between gap-2 px-1 py-1.5 ${props.class}`}
+									{...props}
+								>
+									<div class="flex items-center gap-2 text-sm">
+										<Icon icon="lucide:sun-moon" class="h-4 w-4" />
+										<span>Theme</span>
+									</div>
+									<ModeSwitcher class="h-7 w-7" />
+								</div>
+							{/snippet}
+						</DropdownMenuItem>
+					</DropdownMenuGroup>
+
+					<DropdownMenuSeparator />
+
+					<DropdownMenuItem>
+						{#snippet child({ props })}
+							<form action="/auth/signout" method="POST" class="w-full">
+								<button type="submit" class="flex w-full items-center gap-2" {...props}>
+									<Icon icon="lucide:log-out" class="h-4 w-4" />
+									<span>Sign out</span>
+								</button>
+							</form>
+						{/snippet}
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</SidebarMenuItem>
+	</SidebarMenu>
+{/if}

package/dist/lib/components/layout/UserNav.svelte.d.ts

@@ -0,0 +1,12 @@
+type AuthUserType = {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+};
+type $$ComponentProps = {
+    user: AuthUserType | null;
+    open?: boolean;
+};
+declare const UserNav: import("svelte").Component<$$ComponentProps, {}, "open">;
+type UserNav = ReturnType<typeof UserNav>;
+export default UserNav;

package/dist/lib/components/layout/index.d.ts

@@ -0,0 +1,14 @@
+export { default as PageContainer } from './PageContainer.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as ListPage } from './ListPage.svelte';
+export { default as FormPage } from './FormPage.svelte';
+export { default as DetailPage } from './DetailPage.svelte';
+export { default as SettingsPage } from './SettingsPage.svelte';
+export { default as NestedSidebarLayout } from './NestedSidebarLayout.svelte';
+export type { NestedSidebarLayoutProps } from './NestedSidebarLayout.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as ServiceDegradedState } from './ServiceDegradedState.svelte';
+export { default as InfoCard } from './InfoCard.svelte';
+export { default as UserNav } from './UserNav.svelte';
+export { default as StatsCard } from './StatsCard.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';

package/dist/lib/components/layout/index.js

@@ -0,0 +1,15 @@
+// Standardized page layout components
+export { default as PageContainer } from './PageContainer.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as ListPage } from './ListPage.svelte';
+export { default as FormPage } from './FormPage.svelte';
+export { default as DetailPage } from './DetailPage.svelte';
+export { default as SettingsPage } from './SettingsPage.svelte';
+export { default as NestedSidebarLayout } from './NestedSidebarLayout.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as ServiceDegradedState } from './ServiceDegradedState.svelte';
+export { default as InfoCard } from './InfoCard.svelte';
+export { default as UserNav } from './UserNav.svelte';
+// Reusable dashboard components
+export { default as StatsCard } from './StatsCard.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';

package/dist/lib/components/layout-store/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Canonical layout store + companions.
+ *
+ * Layout state is a distinct surface from the sidebar-layout component family
+ * and is available through this explicit export.
+ *
+ * See docs/usability-audit/DESIGN-layout-primitives.md §3, §7.
+ */
+export { LayoutStore } from './layout-store.svelte';
+export type { LayoutBreadcrumb, LayoutMeta, LayoutSetPage, SidebarState } from './layout-store.svelte';
+export { useLayout } from './use-layout';
+export { usePageMeta, defaultMeta, type PageMetaOptions } from './use-page-meta';

package/dist/lib/components/layout-store/index.js

@@ -0,0 +1,11 @@
+/**
+ * Canonical layout store + companions.
+ *
+ * Layout state is a distinct surface from the sidebar-layout component family
+ * and is available through this explicit export.
+ *
+ * See docs/usability-audit/DESIGN-layout-primitives.md §3, §7.
+ */
+export { LayoutStore } from './layout-store.svelte';
+export { useLayout } from './use-layout';
+export { usePageMeta, defaultMeta } from './use-page-meta';

package/dist/lib/components/layout-store/layout-store.svelte.d.ts

@@ -0,0 +1,57 @@
+import type { Snippet } from 'svelte';
+/**
+ * Canonical layout store (Tier 4 in the layout primitives hierarchy).
+ *
+ * Renamed from `SidebarLayoutStore` — sidebar state is one of seven things it
+ * owns (meta, isMobile, leftSidebar, rightSidebar, leftSidebarLocked,
+ * breadcrumbs, header). See docs/usability-audit/DESIGN-layout-primitives.md §3, §7.
+ */
+export interface SidebarState {
+    open: boolean;
+    snippet: Snippet | null;
+    openOnMobile?: boolean;
+}
+export interface LayoutBreadcrumb {
+    label: string;
+    href?: string;
+    /** Iconify icon name, e.g. "lucide:chevron-right" */
+    icon?: string;
+}
+export interface LayoutMeta {
+    title: string;
+    keywords?: string[];
+    description?: string;
+    ogType?: 'website' | 'article' | 'product';
+    ogImage?: string;
+    ogImageAlt?: string;
+    ogUrl?: string;
+    twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
+    twitterCreator?: string;
+    twitterSite?: string;
+    canonicalUrl?: string;
+    robots?: string;
+    author?: string;
+    publishedTime?: string;
+    modifiedTime?: string;
+}
+export interface LayoutSetPage {
+    meta?: LayoutMeta;
+    breadcrumbs?: LayoutBreadcrumb[];
+    rightSidebar?: SidebarState;
+    leftSidebar?: SidebarState;
+    header?: Snippet;
+}
+export declare class LayoutStore {
+    #private;
+    meta: LayoutMeta;
+    isMobile: boolean;
+    leftSidebarLocked: boolean;
+    leftSidebar: SidebarState;
+    rightSidebar: SidebarState;
+    breadcrumbs: LayoutBreadcrumb[];
+    header: Snippet<[]> | null;
+    constructor(meta: LayoutMeta, breadcrumbs?: LayoutBreadcrumb[]);
+    toggleSidebar(sidebar: 'left' | 'right', mobile?: boolean): void;
+    setPage(page: LayoutSetPage): void;
+    dispose(): void;
+}

package/dist/lib/components/layout-store/layout-store.svelte.js

@@ -0,0 +1,73 @@
+import { BROWSER } from 'esm-env';
+export class LayoutStore {
+    meta = $state({
+        title: '',
+        keywords: [],
+        description: ''
+    });
+    isMobile = $state(false);
+    #removeMobileListener;
+    // When true, the app's left sidebar trigger should be disabled (e.g., in /chat)
+    leftSidebarLocked = $state(false);
+    leftSidebar = $state({
+        open: false,
+        snippet: null,
+        openOnMobile: false
+    });
+    rightSidebar = $state({
+        open: false,
+        snippet: null,
+        openOnMobile: false
+    });
+    breadcrumbs = $state([]);
+    header = $state(null);
+    constructor(meta, breadcrumbs = []) {
+        Object.assign(this, { meta, breadcrumbs });
+        this.#initMobileDetection();
+    }
+    toggleSidebar(sidebar, mobile = false) {
+        if (sidebar === 'left') {
+            if (mobile) {
+                this.leftSidebar.openOnMobile = !this.leftSidebar.openOnMobile;
+            }
+            else {
+                this.leftSidebar.open = !this.leftSidebar.open;
+            }
+        }
+        else if (mobile) {
+            this.rightSidebar.openOnMobile = !this.rightSidebar.openOnMobile;
+        }
+        else {
+            this.rightSidebar.open = !this.rightSidebar.open;
+        }
+    }
+    setPage(page) {
+        Object.assign(this, page);
+    }
+    #initMobileDetection() {
+        // A host without matchMedia answers no query, and the store stays non-mobile.
+        const query = BROWSER ? window.matchMedia?.('(max-width: 767.98px)') : undefined;
+        if (!query) {
+            return;
+        }
+        const update = (matches) => {
+            if (this.isMobile === matches)
+                return;
+            this.isMobile = matches;
+        };
+        update(query.matches);
+        const listener = (event) => update(event.matches);
+        if (query.addEventListener) {
+            query.addEventListener('change', listener);
+            this.#removeMobileListener = () => query.removeEventListener('change', listener);
+        }
+        else if (query.addListener) {
+            // Fallback for Safari < 14
+            query.addListener(listener);
+            this.#removeMobileListener = () => query.removeListener(listener);
+        }
+    }
+    dispose() {
+        this.#removeMobileListener?.();
+    }
+}

package/dist/lib/components/layout-store/use-layout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutStore } from './layout-store.svelte';
+export declare function useLayout(): LayoutStore;

package/dist/lib/components/layout-store/use-layout.js

@@ -0,0 +1,11 @@
+import { getContext } from 'svelte';
+import { kitLogger } from '../../kit-logger';
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger('vibeskit-layout');
+export function useLayout() {
+    const store = getContext('layout');
+    if (!store) {
+        logger.warn('useLayout: No layout store found in context');
+    }
+    return store;
+}

package/dist/lib/components/layout-store/use-page-meta.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutStore, LayoutMeta } from './layout-store.svelte';
+export interface PageMetaOptions extends LayoutMeta {
+    titleTemplate?: string;
+    defaultOgImage?: string;
+}
+export declare function usePageMeta(options?: PageMetaOptions): LayoutStore | undefined;
+export declare const defaultMeta: PageMetaOptions;

package/dist/lib/components/layout-store/use-page-meta.js

@@ -0,0 +1,46 @@
+import { BROWSER } from 'esm-env';
+import { getContext } from 'svelte';
+import { kitLogger } from '../../kit-logger';
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger('vibeskit-layout');
+export function usePageMeta(options) {
+    const store = getContext('layout');
+    if (!store) {
+        logger.warn('usePageMeta: No layout store found in context');
+        return;
+    }
+    // An omitted argument carries no fields, so the store keeps its current title.
+    const resolved = options ?? {};
+    // Apply title template if provided
+    if (resolved.titleTemplate && resolved.title) {
+        resolved.title = resolved.titleTemplate.replace('%s', resolved.title);
+    }
+    // Set default OG image if none provided
+    if (!resolved.ogImage && resolved.defaultOgImage) {
+        resolved.ogImage = resolved.defaultOgImage;
+    }
+    // Generate canonical URL if not provided
+    if (!resolved.canonicalUrl && BROWSER) {
+        resolved.canonicalUrl = window.location.href.split('?')[0];
+    }
+    // Set OG URL if not provided
+    if (!resolved.ogUrl && resolved.canonicalUrl) {
+        resolved.ogUrl = resolved.canonicalUrl;
+    }
+    // Update the store
+    store.meta = {
+        ...store.meta,
+        ...resolved
+    };
+    return store;
+}
+// Default metadata configuration
+export const defaultMeta = {
+    title: 'Vibes',
+    titleTemplate: '%s - Vibes',
+    defaultOgImage: '/vibes-logo.png',
+    twitterCard: 'summary',
+    ogType: 'website',
+    keywords: ['Vibes', 'AI', 'platform', 'knowledge management'],
+    robots: 'index, follow'
+};

package/dist/lib/components/mail/MailLayout.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">import * as Resizable from "../ui/resizable/index.js";
+import { Input } from "../ui/input/index.js";
+import { Button } from "../ui/button/index.js";
+import { cn } from "../../utils.js";
+import { sortMessages, searchMessages } from "./group-messages.js";
+import MailList from "./MailList.svelte";
+import MailView from "./MailView.svelte";
+let { messages = [], selectedId = $bindable(), searchQuery = $bindable(""), emptyLabel = "No messages", autoSaveId = undefined, onSelect, actions, class: className } = $props();
+const sorted = $derived(sortMessages(messages));
+const visible = $derived(searchMessages(sorted, searchQuery ?? ""));
+const selected = $derived(visible.find((m) => m.id === selectedId) ?? null);
+// Single-pane fallback below `md`: list, then slide to the reading view on select.
+let mailPane = $state("list");
+function select(message) {
+	selectedId = message.id;
+	mailPane = "view";
+	onSelect?.(message);
+}
+</script>
+
+<div class={cn('h-full min-h-0 w-full overflow-hidden rounded-lg border', className)}>
+	<!-- Desktop: the two-pane reading layout. The responsive `hidden`/`md:block`
+	     lives on this wrapper, NOT on the PaneGroup — paneforge sets an inline
+	     `display:flex` on its root that beats Tailwind's non-important `.hidden`. -->
+	<div class="hidden h-full md:block">
+		<Resizable.PaneGroup direction="horizontal" {autoSaveId} class="h-full">
+			<Resizable.Pane defaultSize={34} minSize={24} maxSize={48} class="min-w-0">
+				<div class="flex h-full min-w-0 flex-col">
+					<div class="shrink-0 border-b p-2">
+						<Input
+							bind:value={searchQuery}
+							aria-label="Search messages"
+							placeholder="Search messages…"
+							class="h-8"
+						/>
+					</div>
+					<div class="min-h-0 flex-1">
+						<MailList messages={visible} {selectedId} onSelect={select} {emptyLabel} />
+					</div>
+				</div>
+			</Resizable.Pane>
+
+			<Resizable.Handle />
+
+			<Resizable.Pane minSize={40} class="min-w-0">
+				<MailView message={selected} {actions} />
+			</Resizable.Pane>
+		</Resizable.PaneGroup>
+	</div>
+
+	<!-- Mobile: a single pane — list, then the reading view with a back affordance. -->
+	<div class="flex h-full min-h-0 flex-col md:hidden">
+		{#if mailPane === 'list'}
+			<div class="shrink-0 border-b p-2">
+				<Input
+					bind:value={searchQuery}
+					aria-label="Search messages"
+					placeholder="Search messages…"
+					class="h-8"
+				/>
+			</div>
+			<div class="min-h-0 flex-1">
+				<MailList messages={visible} {selectedId} onSelect={select} {emptyLabel} />
+			</div>
+		{:else}
+			<div class="shrink-0 border-b p-2">
+				<Button variant="ghost" class="h-8" onclick={() => (mailPane = 'list')}>← Back</Button>
+			</div>
+			<div class="min-h-0 flex-1">
+				<MailView message={selected} {actions} />
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/lib/components/mail/MailLayout.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+     * MailLayout — a reusable, DATA-AGNOSTIC mail/inbox view (kit pattern, like
+     * AppShell and ScheduleCalendar). A two-pane reading layout: a searchable
+     * message list (the kit `Resizable` panes — no hand-rolled panes) beside a
+     * reading pane. The consumer maps its domain rows into `Message[]`; this
+     * component never fetches and imports no domain/feature package. Reused by HQ
+     * (agent inbox over workboard notifications), and intended for any message
+     * surface (forge issues/PRs, forum-style chat, email).
+     */
+import type { Snippet } from 'svelte';
+import type { Message } from './schemas/message.ts';
+type $$ComponentProps = {
+    messages?: Message[];
+    selectedId?: string;
+    searchQuery?: string;
+    emptyLabel?: string;
+    /**
+     * Optional storage key for persisting the resizable pane sizes. Defaults to
+     * `undefined` (panes are NOT persisted) so multiple MailLayout instances
+     * don't share one global slot; a consumer that wants persistence passes a
+     * distinct id per surface (e.g. `"hq:inbox"`).
+     */
+    autoSaveId?: string;
+    onSelect?: (m: Message) => void;
+    /** Forwarded to MailView's `actions` snippet (e.g. Dismiss, View agent →). */
+    actions?: Snippet<[Message]>;
+    class?: string;
+};
+declare const MailLayout: import("svelte").Component<$$ComponentProps, {}, "selectedId" | "searchQuery">;
+type MailLayout = ReturnType<typeof MailLayout>;
+export default MailLayout;

package/dist/lib/components/mail/MailList.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">/**
+* The message list pane of MailLayout: a scrollable column of MailListItem
+* rows, or a muted empty state. Data-agnostic — no domain types.
+*/
+import { ScrollArea } from "../ui/scroll-area/index.js";
+import MailListItem from "./MailListItem.svelte";
+let { messages = [], selectedId, onSelect, emptyLabel = "No messages" } = $props();
+</script>
+
+{#if messages.length === 0}
+	<p class="py-8 text-center text-sm text-muted-foreground">{emptyLabel}</p>
+{:else}
+	<ScrollArea class="h-full max-h-full">
+		<ul class="flex flex-col gap-1 p-1">
+			{#each messages as message (message.id)}
+				<li>
+					<MailListItem {message} selected={message.id === selectedId} {onSelect} />
+				</li>
+			{/each}
+		</ul>
+	</ScrollArea>
+{/if}

package/dist/lib/components/mail/MailList.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Message } from './schemas/message.ts';
+type $$ComponentProps = {
+    messages?: Message[];
+    selectedId?: string;
+    onSelect?: (m: Message) => void;
+    emptyLabel?: string;
+};
+declare const MailList: import("svelte").Component<$$ComponentProps, {}, "">;
+type MailList = ReturnType<typeof MailList>;
+export default MailList;

package/dist/lib/components/mail/MailListItem.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">/**
+* A single row inside MailList: sender avatar, sender name, subject (bold when
+* unread), one-line preview, a relative received time, an unread dot, and a
+* source badge. A kit `Button variant="ghost"` row (mirrors ScheduleDayDetail's
+* ROW_CLASS). Pure presentation — no domain types.
+*/
+import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar/index.js";
+import { Badge } from "../ui/badge/index.js";
+import { Button } from "../ui/button/index.js";
+import { cn } from "../../utils.js";
+import { toneBadgeVariant } from "./group-messages.js";
+let { message, selected = false, onSelect } = $props();
+/** Token-based dot color for the tone indicator (destructive/warning/info/success). */
+const TONE_DOT = {
+	destructive: "bg-destructive",
+	warning: "bg-warning",
+	info: "bg-info",
+	success: "bg-success"
+};
+const toneVariant = $derived(toneBadgeVariant(message.tone));
+/** Initials for the Avatar fallback (first letters of up to two name words). */
+const initials = $derived(message.from.name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "?");
+function fmtRelative(iso) {
+	const then = new Date(iso).getTime();
+	if (Number.isNaN(then)) return "";
+	const diff = Date.now() - then;
+	const min = Math.round(diff / 6e4);
+	if (min < 1) return "now";
+	if (min < 60) return `${min}m`;
+	const hr = Math.round(min / 60);
+	if (hr < 24) return `${hr}h`;
+	const day = Math.round(hr / 24);
+	if (day < 7) return `${day}d`;
+	return new Date(iso).toLocaleDateString();
+}
+const ROW_CLASS = "flex w-full items-start gap-3 rounded-md p-3 text-left h-auto whitespace-normal";
+</script>
+
+<Button
+	variant="ghost"
+	class={cn(
+		ROW_CLASS,
+		'cursor-pointer hover:bg-accent/40',
+		selected && 'bg-accent text-accent-foreground'
+	)}
+	onclick={() => onSelect?.(message)}
+>
+	<Avatar class="size-8 shrink-0">
+		{#if message.from.avatar}
+			<AvatarImage src={message.from.avatar} alt={message.from.name} />
+		{/if}
+		<AvatarFallback class="text-xs">{initials}</AvatarFallback>
+	</Avatar>
+
+	<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+		<div class="flex items-center justify-between gap-2">
+			<span class="truncate text-sm font-medium">{message.from.name}</span>
+			<div class="flex shrink-0 items-center gap-1.5">
+				{#if toneVariant}
+					<span
+						class={cn('h-1.5 w-1.5 rounded-full', TONE_DOT[toneVariant])}
+						aria-label="{message.tone} severity"
+						title={message.tone}
+					></span>
+				{/if}
+				{#if !message.read}
+					<span class="h-1.5 w-1.5 rounded-full bg-primary" aria-label="Unread" title="Unread"
+					></span>
+				{/if}
+				<span class="text-xs text-muted-foreground">{fmtRelative(message.receivedAt)}</span>
+			</div>
+		</div>
+		<span class={cn('truncate text-sm', !message.read ? 'font-semibold' : 'font-normal')}>
+			{message.subject}
+		</span>
+		{#if message.preview}
+			<span class="truncate text-xs text-muted-foreground">{message.preview}</span>
+		{/if}
+		{#if message.source}
+			<div>
+				<Badge variant="secondary" class="text-[0.65rem]">{message.source}</Badge>
+			</div>
+		{/if}
+	</div>
+</Button>