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

package/dist/svelte/command-palette/chat-source.plugin.js

@@ -0,0 +1,252 @@
+/**
+ * Chat command-palette source.
+ *
+ * Registers a `command-palette/source` so a user's past conversations are
+ * findable from the universal command palette. Browser-only: the impl calls
+ * chat-web's authenticated FTS5 search endpoint (`GET /api/chat/search`) on the
+ * current origin, so it surfaces wherever chat-web hosts the palette. Reaching
+ * chats from *other* apps needs the cross-origin auth seam and is a follow-up.
+ *
+ * Declares the `chat:` prefix via the source resolve rule: an unprefixed query
+ * still includes conversations, and `chat: foo` scopes the palette to them.
+ *
+ * Kept on a narrow subpath (`@vibesdotdev/chat/svelte/command-palette`) with no
+ * Svelte/`$state` imports so non-Svelte consumers can register it without
+ * dragging the package's reactive barrel.
+ */
+import * as z from 'zod/v4';
+import { createRuntimePlugin, settle, valueFreeFailure } from '@vibesdotdev/kernel';
+import { COMMAND_PALETTE_HOST_CONTEXT_ID } from '@vibesdotdev/command-palette';
+import { getSearchResultCache, getLocalIndexCache } from '@vibesdotdev/command-palette/cache';
+import { getLogger } from '@vibesdotdev/logging';
+/** How long a cached chat result set stays "fresh" before a refetch. */
+const CHAT_CACHE_TTL_MS = 30_000;
+const chatSearchMessageSchema = z.looseObject({
+    id: z.string(),
+    content: z.string().nullable().optional(),
+    senderType: z.enum(['user', 'agent', 'system']).optional(),
+    createdAt: z.number(),
+    rank: z.number().optional()
+});
+const chatSearchRoomSchema = z.looseObject({
+    id: z.string(),
+    title: z.string().optional(),
+    updatedAt: z.number(),
+    matchingMessages: z.array(chatSearchMessageSchema).default([])
+});
+const chatSearchResponseSchema = z.looseObject({
+    results: z.array(chatSearchRoomSchema).optional()
+});
+const SNIPPET_MAX = 140;
+/** First non-empty matching message, collapsed and clipped to a one-line snippet. */
+function deriveSnippet(room) {
+    const first = room.matchingMessages.find((m) => m.content && m.content.trim());
+    const text = first?.content?.replace(/\s+/g, ' ').trim();
+    if (!text)
+        return undefined;
+    return text.length > SNIPPET_MAX ? `${text.slice(0, SNIPPET_MAX - 1)}…` : text;
+}
+/**
+ * Map ranked conversation rows into palette results. Rows arrive relevance
+ * ordered with no per-row score, so a descending rank-based score preserves the
+ * upstream order through the federator's score sort.
+ */
+export function mapRoomsToResults(rooms, limit) {
+    const capped = rooms.slice(0, limit);
+    const total = capped.length || 1;
+    return capped.map((room, index) => ({
+        id: room.id,
+        sourceId: 'chat',
+        resultType: 'entity',
+        title: room.title?.trim() || 'Untitled conversation',
+        description: deriveSnippet(room),
+        icon: 'MessageSquare',
+        action: { type: 'navigate', url: `/rooms/${room.id}` },
+        score: (total - index) / total,
+        badge: 'Chat',
+        metadata: { updatedAt: room.updatedAt }
+    }));
+}
+/**
+ * The source implementation. Resilient by contract — the federator isolates
+ * source failures, and a graceful empty result keeps the rest of the palette
+ * clean when search is unavailable (e.g. on an origin without the chat API).
+ */
+export function createChatCommandPaletteSource(backend, runtime) {
+    return {
+        async search(query, context) {
+            const trimmed = query.trim();
+            if (!trimmed)
+                return [];
+            const limit = context.limit ?? 5;
+            const cache = getSearchResultCache(backend, 'chat');
+            const settled = await settle(async () => {
+                return await cache.cachedFetch(`${trimmed}:${limit}`, CHAT_CACHE_TTL_MS, async () => {
+                    const params = new URLSearchParams({ query: trimmed, limit: String(limit) });
+                    const res = await fetch(`/api/chat/search?${params.toString()}`, {
+                        headers: { accept: 'application/json' },
+                        credentials: 'same-origin'
+                    });
+                    // Not signed in on this origin → no results, and overwrite any
+                    // stale cache rather than serving another user's conversations.
+                    if (res.status === 401 || res.status === 403)
+                        return [];
+                    // Other failures throw so the cache can serve last-known results
+                    // (transient 5xx); a hard network error throws here too → offline
+                    // fallback to the cached set.
+                    if (!res.ok)
+                        throw new Error(`chat search failed: ${res.status}`);
+                    const rawBody = await res.json();
+                    const parsed = chatSearchResponseSchema.safeParse(rawBody);
+                    if (parsed.success) {
+                        return mapRoomsToResults(parsed.data.results ?? [], limit);
+                    }
+                    return [];
+                });
+            });
+            if (!settled.ok) {
+                if (runtime) {
+                    const failure = valueFreeFailure(settled.cause);
+                    getLogger('chat.svelte.command-palette', runtime).warn('Chat room search failed', {
+                        error: failure.reason ?? 'unknown error'
+                    });
+                }
+                return [];
+            }
+            return settled.value;
+        }
+    };
+}
+const chatSourceDescriptor = {
+    id: 'chat',
+    kind: 'command-palette/source',
+    sourceId: 'chat',
+    resultType: 'entity',
+    label: 'Chats',
+    priority: 65,
+    surfaces: ['web'],
+    name: 'Chat Source',
+    description: "Search the current user's conversations",
+    resolve: { prefixes: ['chat:'] }
+};
+const feedPostSchema = z.looseObject({
+    id: z.string(),
+    content: z.string().optional(),
+    authorName: z.string().optional()
+});
+const feedResponseSchema = z.looseObject({
+    posts: z.array(feedPostSchema).optional()
+});
+const FEED_TTL_MS = 30_000;
+const FEED_SNIPPET = 100;
+/**
+ * Community-feed source — local-index over `/api/chat/feed` (recent posts; the
+ * endpoint has no query param, so filter client-side on content). Navigates to
+ * the post permalink `/feed/<id>`; prefixes `post:` / `feed:`.
+ */
+export function createFeedCommandPaletteSource(backend, runtime) {
+    return {
+        async search(query, context) {
+            const limit = context.limit ?? 5;
+            const settled = await settle(async () => {
+                return await getLocalIndexCache(backend, 'feed').search(query.trim(), FEED_TTL_MS, async () => {
+                    const res = await fetch('/api/chat/feed?limit=100', {
+                        headers: { accept: 'application/json' },
+                        credentials: 'same-origin'
+                    });
+                    if (res.status === 401 || res.status === 403)
+                        return [];
+                    if (!res.ok)
+                        throw new Error(`feed list failed: ${res.status}`);
+                    const rawBody = await res.json();
+                    const parsed = feedResponseSchema.safeParse(rawBody);
+                    const posts = parsed.success ? parsed.data.posts ?? [] : [];
+                    return posts.map((post) => {
+                        const content = (post.content ?? '').replace(/\s+/g, ' ').trim();
+                        return {
+                            id: post.id,
+                            title: content.length > FEED_SNIPPET
+                                ? `${content.slice(0, FEED_SNIPPET - 1)}…`
+                                : content || 'Post',
+                            subtitle: post.authorName,
+                            keywords: post.authorName ? [post.authorName] : []
+                        };
+                    });
+                }, limit);
+            });
+            if (!settled.ok) {
+                if (runtime) {
+                    const failure = valueFreeFailure(settled.cause);
+                    getLogger('chat.svelte.command-palette', runtime).warn('Feed post search failed', {
+                        error: failure.reason ?? 'unknown error'
+                    });
+                }
+                return [];
+            }
+            return settled.value.map((row) => ({
+                id: row.id,
+                sourceId: 'feed',
+                resultType: 'entity',
+                title: row.title,
+                description: row.subtitle,
+                icon: 'Megaphone',
+                action: { type: 'navigate', url: `/feed/${row.id}` },
+                badge: 'Post'
+            }));
+        }
+    };
+}
+const HostContextSchema = z.looseObject({ searchCache: z.looseObject({}) });
+function isCommandPaletteHost(value) {
+    return HostContextSchema.safeParse(value).success;
+}
+export class ChatCommandPaletteSource {
+    implementation;
+    constructor(descriptor, context) {
+        const host = context[COMMAND_PALETTE_HOST_CONTEXT_ID];
+        if (!isCommandPaletteHost(host))
+            throw new Error('Command Palette host context is required');
+        this.implementation =
+            descriptor.sourceId === 'feed'
+                ? createFeedCommandPaletteSource(host.searchCache, context.runtime)
+                : createChatCommandPaletteSource(host.searchCache, context.runtime);
+    }
+    search(query, context) {
+        return this.implementation.search(query, context);
+    }
+}
+const feedSourceDescriptor = {
+    id: 'feed',
+    kind: 'command-palette/source',
+    sourceId: 'feed',
+    resultType: 'entity',
+    label: 'Feed',
+    priority: 55,
+    surfaces: ['web'],
+    name: 'Community Feed Source',
+    description: 'Search recent community feed posts',
+    resolve: { prefixes: ['post:', 'feed:'] }
+};
+export const chatCommandPaletteSourcePlugin = createRuntimePlugin({
+    id: '@vibesdotdev/chat/svelte/command-palette',
+    name: 'Chat Command Palette Source',
+    description: "Makes a user's past conversations findable from the universal command palette",
+    dependencies: ['command-palette'],
+    descriptors: [
+        chatSourceDescriptor,
+        feedSourceDescriptor
+    ],
+    loaders: [
+        {
+            id: 'chat',
+            kind: 'command-palette/source',
+            load: async () => ChatCommandPaletteSource
+        },
+        {
+            id: 'feed',
+            kind: 'command-palette/source',
+            load: async () => ChatCommandPaletteSource
+        }
+    ]
+});
+export default chatCommandPaletteSourcePlugin;

package/dist/svelte/components/ChatBackgroundPanel.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import { useChatSurface } from '../surface-context.js';
+	const { chatState } = useChatSurface();
+
+	/**
+	 * ChatBackgroundPanel — background processes behind the active room.
+	 *
+	 * Reads from the singleton `chatState`. Consumer runtimes report the
+	 * processes their tools spawned (command, pid, transcript linkage);
+	 * anything running can be stopped here. Renders nothing on runtimes
+	 * without process support. Refreshes on mount and re-polls while
+	 * anything is running or its liveness is unknown.
+	 */
+	import { onMount } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+
+	import ChatMessageTimestamp from './ChatMessageTimestamp.svelte';
+
+	type Props = {
+		/** Re-poll cadence while any process runs or has unknown liveness. 0 disables. */
+		refreshIntervalMs?: number;
+	};
+
+	let { refreshIntervalMs = 5_000 }: Props = $props();
+
+	let stopping = $state<Record<string, boolean>>({});
+	let timer: ReturnType<typeof setInterval> | null = null;
+
+	const supported = $derived(chatState.backgroundProcessesSupported);
+	const processes = $derived(chatState.backgroundProcesses);
+	const errors = $derived(chatState.backgroundProcessesErrors);
+	const loading = $derived(chatState.backgroundProcessesLoading);
+	const error = $derived(chatState.backgroundProcessesError);
+
+	function commandLine(command: string[]): string {
+		return command.map((part) => (/\s/.test(part) ? JSON.stringify(part) : part)).join(' ');
+	}
+
+	async function stop(procId: string): Promise<void> {
+		stopping = { ...stopping, [procId]: true };
+		try {
+			await chatState.stopBackgroundProcess(procId);
+		} finally {
+			stopping = { ...stopping, [procId]: false };
+		}
+	}
+
+	onMount(() => {
+		void chatState.loadBackgroundProcesses();
+		if (refreshIntervalMs > 0) {
+			timer = setInterval(() => {
+				if (chatState.backgroundProcesses.some((proc) => proc.running !== false)) {
+					void chatState.loadBackgroundProcesses();
+				}
+			}, refreshIntervalMs);
+		}
+		return () => {
+			if (timer) clearInterval(timer);
+			timer = null;
+		};
+	});
+</script>
+
+{#if supported !== false}
+	<section class="chat-background-panel" aria-label="Background processes">
+		{#if error}
+			<p class="chat-background-panel__error" role="alert">{error}</p>
+		{/if}
+		{#if processes.length === 0}
+			<p class="chat-background-panel__empty">
+				{loading ? 'Loading background processes…' : 'No background processes.'}
+			</p>
+		{:else}
+			<ul class="chat-background-panel__list">
+				{#each processes as proc (proc.procId)}
+					<li class="chat-background-panel__row">
+						<span
+							class="chat-background-panel__dot"
+							class:chat-background-panel__dot--running={proc.running === true}
+							aria-label={proc.running === null ? 'liveness unknown' : proc.running ? 'running' : 'exited'}
+						></span>
+						<div class="chat-background-panel__main">
+							<code class="chat-background-panel__command" title={commandLine(proc.command)}>
+								{commandLine(proc.command)}
+							</code>
+							<span class="chat-background-panel__meta">
+								{#if proc.pid !== undefined}pid {proc.pid} · {/if}
+								{#if proc.cwd}{proc.cwd} · {/if}
+								<ChatMessageTimestamp createdAt={proc.startedAt} />
+								{#if proc.toolName} · {proc.toolName}{/if}
+								{#if proc.running === false && proc.exitCode !== undefined && proc.exitCode !== null}
+									· exit {proc.exitCode}
+								{/if}
+								{#if proc.running === null} · Liveness unknown{/if}
+								{#if proc.stale} · stale{/if}
+							</span>
+						</div>
+						{#if proc.running === true}
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={stopping[proc.procId] ?? false}
+								onclick={() => void stop(proc.procId)}
+							>
+								{stopping[proc.procId] ? 'Stopping…' : 'Stop'}
+							</Button>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+		{#if errors.length > 0}
+			<ul class="chat-background-panel__errors">
+				{#each errors as entry (`${entry.sessionId}:${entry.error}`)}
+					<li role="alert">{entry.sessionId}: {entry.error}</li>
+				{/each}
+			</ul>
+		{/if}
+	</section>
+{/if}
+
+<style lang="postcss">
+	.chat-background-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+	}
+
+	.chat-background-panel__error {
+		margin: 0;
+		font-size: 0.875rem;
+		color: var(--destructive);
+	}
+
+	.chat-background-panel__empty {
+		margin: 0;
+		font-size: 0.875rem;
+		opacity: 0.6;
+		font-style: italic;
+	}
+
+	.chat-background-panel__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.chat-background-panel__row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+	}
+
+	.chat-background-panel__dot {
+		flex: 0 0 auto;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background-color: var(--muted-foreground, #888);
+		opacity: 0.5;
+	}
+
+	.chat-background-panel__dot--running {
+		background-color: var(--success, #22a06b);
+		opacity: 1;
+	}
+
+	.chat-background-panel__main {
+		flex: 1 1 auto;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.chat-background-panel__command {
+		font-size: 0.8125rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.chat-background-panel__meta {
+		font-size: 0.75rem;
+		opacity: 0.7;
+	}
+
+	.chat-background-panel__errors {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-size: 0.75rem;
+		color: var(--destructive);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+type Props = {
+    /** Re-poll cadence while any process runs or has unknown liveness. 0 disables. */
+    refreshIntervalMs?: number;
+};
+declare const ChatBackgroundPanel: import("svelte").Component<Props, {}, "">;
+type ChatBackgroundPanel = ReturnType<typeof ChatBackgroundPanel>;
+export default ChatBackgroundPanel;
+//# sourceMappingURL=ChatBackgroundPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBackgroundPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatBackgroundPanel.svelte.ts"],"names":[],"mappings":"AAmBC,KAAK,KAAK,GAAG;IACZ,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAwGH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ChatExperienceHost.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { selectChatExperienceSlot, type ResolvedChatExperience } from '../experience-host.js';
+
+	type Props = {
+		/** Host-resolved JSON contract; absent or malformed input uses classic. */
+		resolvedExperience?: ResolvedChatExperience | null;
+		/** Existing/classic Chat surface supplied by the caller. */
+		classic: Snippet;
+		/** Room + Stage surface supplied by the caller. */
+		roomStage: Snippet;
+	};
+
+	let { resolvedExperience, classic, roomStage }: Props = $props();
+	const selectedSlot = $derived(selectChatExperienceSlot(resolvedExperience));
+</script>
+
+{#if selectedSlot === 'room-stage'}
+	{@render roomStage()}
+{:else}
+	{@render classic()}
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { type ResolvedChatExperience } from '../experience-host.ts';
+type Props = {
+    /** Host-resolved JSON contract; absent or malformed input uses classic. */
+    resolvedExperience?: ResolvedChatExperience | null;
+    /** Existing/classic Chat surface supplied by the caller. */
+    classic: Snippet;
+    /** Room + Stage surface supplied by the caller. */
+    roomStage: Snippet;
+};
+declare const ChatExperienceHost: import("svelte").Component<Props, {}, "">;
+type ChatExperienceHost = ReturnType<typeof ChatExperienceHost>;
+export default ChatExperienceHost;
+//# sourceMappingURL=ChatExperienceHost.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatExperienceHost.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatExperienceHost.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAA4B,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAG7F,KAAK,KAAK,GAAG;IACZ,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACnD,4DAA4D;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAC;CACnB,CAAC;AAkBH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/ChatFolderTreeView.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	/**
+	 * ChatFolderTreeView — folder + room tree view for the chat sidebar.
+	 *
+	 * Stateless tree renderer. Accepts the folder hierarchy and the rooms
+	 * grouped by folder via props. Emits selection events upward so the
+	 * consuming app owns navigation. The chat-web sidebar now renders its own
+	 * ConversationsTree off the app-local conversations store; this exported
+	 * component stays prop-driven so other surfaces never depend on that store.
+	 */
+	import type { ChatFolderTreeNode } from '../types.js';
+
+	type Props = {
+		nodes: ChatFolderTreeNode[];
+		activeRoomId?: string | null;
+		onFolderSelect?: (folderId: string) => void;
+		onConversationSelect?: (roomId: string) => void;
+		oncontext?: (event: { type: 'folder' | 'room'; id: string; mouseEvent: MouseEvent }) => void;
+		/** Optional className override. */
+		class?: string;
+	};
+
+	let {
+		nodes,
+		activeRoomId = null,
+		onFolderSelect,
+		onConversationSelect,
+		oncontext,
+		class: className
+	}: Props = $props();
+
+	function handleRoomContext(roomId: string, ev: MouseEvent) {
+		ev.preventDefault();
+		oncontext?.({ type: 'room', id: roomId, mouseEvent: ev });
+	}
+
+	function handleFolderContext(folderId: string, ev: MouseEvent) {
+		ev.preventDefault();
+		oncontext?.({ type: 'folder', id: folderId, mouseEvent: ev });
+	}
+</script>
+
+{#snippet folderNode(node: ChatFolderTreeNode, depth: number)}
+	<li class="chat-folder-tree__node" style:--depth={depth}>
+		<button
+			type="button"
+			class="chat-folder-tree__folder"
+			onclick={() => onFolderSelect?.(node.folder.id)}
+			oncontextmenu={(ev: MouseEvent) => handleFolderContext(node.folder.id, ev)}
+		>
+			<span class="chat-folder-tree__folder-icon" aria-hidden="true">▸</span>
+			<span class="chat-folder-tree__folder-name">{node.folder.title}</span>
+			{#if node.rooms.length > 0}
+				<span class="chat-folder-tree__folder-count">{node.rooms.length}</span>
+			{/if}
+		</button>
+		{#if node.rooms.length > 0 || node.children.length > 0}
+			<ul class="chat-folder-tree__children">
+				{#each node.rooms as room (room.id)}
+					<li class="chat-folder-tree__room-item">
+						<button
+							type="button"
+							class="chat-folder-tree__room"
+							class:chat-folder-tree__room--active={room.id === activeRoomId}
+							onclick={() => onConversationSelect?.(room.id)}
+							oncontextmenu={(ev: MouseEvent) => handleRoomContext(room.id, ev)}
+						>
+							<span class="chat-folder-tree__room-icon" aria-hidden="true">•</span>
+							<span class="chat-folder-tree__room-name">{room.title ?? room.id}</span>
+						</button>
+					</li>
+				{/each}
+				{#each node.children as child (child.folder.id)}
+					{@render folderNode(child, depth + 1)}
+				{/each}
+			</ul>
+		{/if}
+	</li>
+{/snippet}
+
+<nav
+	class="chat-folder-tree {className ?? ''}"
+	aria-label="Chat folders"
+>
+	{#if nodes.length === 0}
+		<p class="chat-folder-tree__empty">No folders yet.</p>
+	{:else}
+		<ul class="chat-folder-tree__root">
+			{#each nodes as node (node.folder.id)}
+				{@render folderNode(node, 0)}
+			{/each}
+		</ul>
+	{/if}
+</nav>
+
+<style>
+	.chat-folder-tree {
+		width: 100%;
+		font-size: 0.875rem;
+	}
+
+	.chat-folder-tree__empty {
+		opacity: 0.6;
+		font-style: italic;
+		padding: 1rem;
+		margin: 0;
+		text-align: center;
+	}
+
+	.chat-folder-tree__root,
+	.chat-folder-tree__children {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.chat-folder-tree__children {
+		padding-left: 1rem;
+	}
+
+	.chat-folder-tree__folder,
+	.chat-folder-tree__room {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		width: 100%;
+		text-align: left;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		background: transparent;
+		border: 0;
+		color: inherit;
+		cursor: pointer;
+		font: inherit;
+	}
+
+	.chat-folder-tree__folder:hover,
+	.chat-folder-tree__room:hover {
+		background-color: var(--accent, rgba(0, 0, 0, 0.04));
+	}
+
+	.chat-folder-tree__room--active {
+		background-color: var(--accent, rgba(0, 0, 0, 0.08));
+		font-weight: 600;
+	}
+
+	.chat-folder-tree__folder-name {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.chat-folder-tree__folder-count {
+		opacity: 0.55;
+		font-size: 0.75rem;
+	}
+
+	.chat-folder-tree__folder-icon,
+	.chat-folder-tree__room-icon {
+		opacity: 0.6;
+	}
+
+	.chat-folder-tree__room-name {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>