@parallelworks/ui 0.28.0 → 0.30.0

package/dist/ai/core/ChatProvider.js

@@ -2,25 +2,13 @@ import { applyPartDelta, finalizeParts } from "./parts.js";
 import { chatReducer, initialState } from "./chatReducer.js";
 import { ChatConfigProvider, resolveChatConfig } from "./config.js";
 import { providerIssueFor } from "./providerIssues.js";
+import { ReportSidebarPresentationContext, readStoredSidebar, storeSidebar, useControllable } from "./sidebarState.js";
 import { useSSEStream } from "./useSSEStream.js";
-import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/core/ChatProvider.tsx
 var SELECTED_MODEL_STORAGE_KEY = "aiChatSelectedModel";
-var SIDEBAR_COLLAPSED_STORAGE_KEY = "aiChatSidebarCollapsed";
-function readStoredSidebarCollapsed() {
-	try {
-		return globalThis.localStorage?.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === "1";
-	} catch {
-		return false;
-	}
-}
-function storeSidebarCollapsed(collapsed) {
-	try {
-		globalThis.localStorage?.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, collapsed ? "1" : "0");
-	} catch {}
-}
 function readStoredModel() {
 	try {
 		return globalThis.localStorage?.getItem(SELECTED_MODEL_STORAGE_KEY) ?? null;
@@ -73,11 +61,8 @@ function useChat() {
 	if (!context) throw new Error("useChat must be used within a ChatProvider");
 	return context;
 }
-function ChatProvider({ adapter, currentUser, navigation, notify, activeConversationId = null, config, children }) {
-	const [state, dispatch] = useReducer(chatReducer, initialState, (seed) => ({
-		...seed,
-		sidebarCollapsed: readStoredSidebarCollapsed()
-	}));
+function ChatProvider({ adapter, currentUser, navigation, notify, activeConversationId = null, config, sidebar: sidebarProp, onSidebarChange, drawerOpen: drawerOpenProp, onDrawerOpenChange, children }) {
+	const [state, dispatch] = useReducer(chatReducer, initialState);
 	const hasLoadedConversationsRef = useRef(false);
 	const { onStreamingChunk, startStreaming, stopAnimationLoop, resetAnimationRefs, targetStreamContentRef, streamActiveRef, streamingConversationIdRef, backgroundStreamsRef, abortControllerRef } = useSSEStream(dispatch);
 	const currentConversationIdRef = useRef(null);
@@ -700,12 +685,24 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		state.currentConversation?.messages,
 		state.thinkingStartTime
 	]);
-	const sidebarCollapsedRef = useRef(state.sidebarCollapsed);
-	sidebarCollapsedRef.current = state.sidebarCollapsed;
+	const [sidebar, setSidebar, sidebarRef] = useControllable(sidebarProp, readStoredSidebar, onSidebarChange, storeSidebar);
+	const [drawerOpen, setDrawerOpen, drawerOpenRef] = useControllable(drawerOpenProp, () => false, onDrawerOpenChange);
+	const [sidebarPresentation, setSidebarPresentation] = useState("inline");
+	const presentationRef = useRef(sidebarPresentation);
+	presentationRef.current = sidebarPresentation;
+	const reportSidebarPresentation = useCallback((presentation) => {
+		setSidebarPresentation(presentation);
+		if (presentation === "inline") setDrawerOpen(false);
+	}, [setDrawerOpen]);
 	const toggleSidebar = useCallback(() => {
-		storeSidebarCollapsed(!sidebarCollapsedRef.current);
-		dispatch({ type: "TOGGLE_SIDEBAR" });
-	}, []);
+		if (presentationRef.current === "drawer") setDrawerOpen(!drawerOpenRef.current.value);
+		else setSidebar(sidebarRef.current.value === "expanded" ? "collapsed" : "expanded");
+	}, [
+		setDrawerOpen,
+		drawerOpenRef,
+		setSidebar,
+		sidebarRef
+	]);
 	const navigateToBranch = useCallback((messageId) => {
 		if (!state.currentConversation) return;
 		dispatch({
@@ -770,7 +767,10 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		streamingReasoning: state.streamingReasoning,
 		streamingParts: state.streamingParts,
 		thinkingStartTime: state.thinkingStartTime,
-		sidebarCollapsed: state.sidebarCollapsed,
+		sidebar,
+		sidebarCollapsed: sidebar !== "expanded",
+		sidebarPresentation,
+		drawerOpen,
 		queuedMessages: state.queuedMessages,
 		loadConversations,
 		loadConversation,
@@ -786,6 +786,8 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		stopStreaming,
 		removeQueuedMessage,
 		flushQueuedMessages,
+		setSidebar,
+		setDrawerOpen,
 		toggleSidebar,
 		updateConversationTitle,
 		navigateToBranch,
@@ -797,6 +799,9 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		notify,
 		activeConversationId,
 		state,
+		sidebar,
+		sidebarPresentation,
+		drawerOpen,
 		isSelectedModelAvailable,
 		loadConversations,
 		loadConversation,
@@ -812,6 +817,8 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		stopStreaming,
 		removeQueuedMessage,
 		flushQueuedMessages,
+		setSidebar,
+		setDrawerOpen,
 		toggleSidebar,
 		updateConversationTitle,
 		navigateToBranch,
@@ -819,9 +826,12 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 	]);
 	return /* @__PURE__ */ jsx(ChatConfigProvider, {
 		value: resolvedConfig,
-		children: /* @__PURE__ */ jsx(ChatContext.Provider, {
-			value,
-			children
+		children: /* @__PURE__ */ jsx(ReportSidebarPresentationContext.Provider, {
+			value: reportSidebarPresentation,
+			children: /* @__PURE__ */ jsx(ChatContext.Provider, {
+				value,
+				children
+			})
 		})
 	});
 }

package/dist/ai/core/chatReducer.d.ts

@@ -20,7 +20,6 @@ export interface ChatState {
     streamingReasoning: string;
     streamingParts: MessagePart[];
     thinkingStartTime: number | null;
-    sidebarCollapsed: boolean;
     queuedMessages: ChatMessage[];
 }
 export type ChatAction = {
@@ -80,8 +79,6 @@ export type ChatAction = {
     messageId: string;
     updates: Partial<ChatMessage>;
     conversationId: string;
-} | {
-    type: 'TOGGLE_SIDEBAR';
 } | {
     type: 'ADD_CONVERSATION';
     conversation: ConversationSummary;

package/dist/ai/core/chatReducer.js

@@ -20,7 +20,6 @@ var initialState = {
 	streamingReasoning: "",
 	streamingParts: [],
 	thinkingStartTime: null,
-	sidebarCollapsed: false,
 	queuedMessages: []
 };
 function chatReducer(state, action) {
@@ -165,10 +164,6 @@ function chatReducer(state, action) {
 					} : msg)
 				}
 			};
-		case "TOGGLE_SIDEBAR": return {
-			...state,
-			sidebarCollapsed: !state.sidebarCollapsed
-		};
 		case "ADD_CONVERSATION":
 			if (state.conversations.some((c) => c.id === action.conversation.id)) return state;
 			return {

package/dist/ai/core/sidebarState.d.ts

@@ -0,0 +1,19 @@
+/** The conversation list beside the thread: full width, a rail of icons, or
+ *  not shown at all (the host offers its own way back). */
+export type SidebarState = 'expanded' | 'collapsed' | 'hidden';
+/** How the layout shows the list right now: as a column beside the thread,
+ *  or as a drawer over it. */
+export type SidebarPresentation = 'inline' | 'drawer';
+export declare function readStoredSidebar(): SidebarState;
+export declare function storeSidebar(state: SidebarState): void;
+/** A value the host may own through a prop. Without the prop the provider
+ *  keeps it; either way the change callback hears every change. The ref
+ *  reads the latest value from callbacks that should not re-create. */
+export declare function useControllable<T>(controlled: T | undefined, initial: () => T, onChange: ((value: T) => void) | undefined, remember?: (value: T) => void): readonly [T, (next: T) => void, import("react").RefObject<{
+    value: T;
+    controlled: boolean;
+    onChange: ((value: T) => void) | undefined;
+    remember: ((value: T) => void) | undefined;
+}>];
+export declare const ReportSidebarPresentationContext: import("react").Context<(presentation: SidebarPresentation) => void>;
+export declare function useReportSidebarPresentation(): (presentation: SidebarPresentation) => void;

package/dist/ai/core/sidebarState.js

@@ -0,0 +1,57 @@
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+//#region src/ai/core/sidebarState.ts
+var SIDEBAR_STORAGE_KEY = "aiChatSidebar";
+var LEGACY_COLLAPSED_STORAGE_KEY = "aiChatSidebarCollapsed";
+function readStoredSidebar() {
+	try {
+		const stored = globalThis.localStorage?.getItem(SIDEBAR_STORAGE_KEY);
+		if (stored === "expanded" || stored === "collapsed") return stored;
+		return globalThis.localStorage?.getItem(LEGACY_COLLAPSED_STORAGE_KEY) === "1" ? "collapsed" : "expanded";
+	} catch {
+		return "expanded";
+	}
+}
+function storeSidebar(state) {
+	if (state === "hidden") return;
+	try {
+		globalThis.localStorage?.setItem(SIDEBAR_STORAGE_KEY, state);
+	} catch {}
+}
+/** A value the host may own through a prop. Without the prop the provider
+*  keeps it; either way the change callback hears every change. The ref
+*  reads the latest value from callbacks that should not re-create. */
+function useControllable(controlled, initial, onChange, remember) {
+	const [own, setOwn] = useState(initial);
+	const value = controlled === void 0 ? own : controlled;
+	const latest = useRef({
+		value,
+		controlled: controlled !== void 0,
+		onChange,
+		remember
+	});
+	latest.current = {
+		value,
+		controlled: controlled !== void 0,
+		onChange,
+		remember
+	};
+	return [
+		value,
+		useCallback((next) => {
+			const l = latest.current;
+			if (Object.is(next, l.value)) return;
+			if (!l.controlled) {
+				setOwn(next);
+				l.remember?.(next);
+			}
+			l.onChange?.(next);
+		}, []),
+		latest
+	];
+}
+var ReportSidebarPresentationContext = createContext(() => {});
+function useReportSidebarPresentation() {
+	return useContext(ReportSidebarPresentationContext);
+}
+//#endregion
+export { ReportSidebarPresentationContext, readStoredSidebar, storeSidebar, useControllable, useReportSidebarPresentation };

package/dist/ai/index.d.ts

@@ -11,7 +11,7 @@ export { default as BlockedGroupBanner } from './components/BlockedGroupBanner.j
 export { default as BranchNavigator } from './components/BranchNavigator.js';
 export { default as ChatEmptyState } from './components/ChatEmptyState.js';
 export { type ChatInputHandle, default as ChatInput, } from './components/ChatInput.js';
-export { default as ChatLayout } from './components/ChatLayout.js';
+export { DRAWER_BELOW_PX, default as ChatLayout, type SidebarMode, } from './components/ChatLayout.js';
 export { default as ChatMessageView } from './components/ChatMessage.js';
 export { default as ChatMessageList } from './components/ChatMessageList.js';
 export { default as ChatSidebar } from './components/ChatSidebar.js';
@@ -34,11 +34,13 @@ export { KeyboardShortcutsProvider } from './core/KeyboardShortcutsProvider.js';
 export { applyPartDelta, finalizeParts } from './core/parts.js';
 export { pasteInlineMaxBytes } from './core/pastes.js';
 export { providerIssueFor } from './core/providerIssues.js';
+export type { SidebarPresentation, SidebarState } from './core/sidebarState.js';
 export { default as useDragDrop } from './core/useDragDrop.js';
 export { useKeyboardShortcuts } from './core/useKeyboardShortcuts.js';
 export { type ChatStrings, defaultChatStrings } from './strings.js';
 export * from './types.js';
+export { ConversationSidebar, type ConversationSidebarGroup, useResizableSidebarWidth, } from './ui/ConversationSidebar.js';
 export { type DropdownOption, default as Dropdown } from './ui/Dropdown.js';
 export { NoticeBar, NoticeCard, type NoticeTone, OutputCard } from './ui/Notice.js';
-export { RenameDialog, type RowDialogStrings, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
+export { RenameDialog, type RowDialogStrings, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
 export { formatFileSize, isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -35,13 +35,14 @@ import ChatEmptyState from "./components/ChatEmptyState.js";
 import { FOCUS_SIDEBAR_SEARCH_EVENT } from "./core/events.js";
 import { useKeyboardShortcuts } from "./core/useKeyboardShortcuts.js";
 import { KeyboardShortcutsProvider } from "./core/KeyboardShortcutsProvider.js";
-import { RenameDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
+import { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
+import { ConversationSidebar, useResizableSidebarWidth } from "./ui/ConversationSidebar.js";
 import ShareDialog, { ShareButton } from "./components/ShareDialog.js";
 import ChatSidebar from "./components/ChatSidebar.js";
-import ChatLayout from "./components/ChatLayout.js";
+import ChatLayout, { DRAWER_BELOW_PX } from "./components/ChatLayout.js";
 import ChatMessage_default from "./components/ChatMessage.js";
 import ChatMessageList from "./components/ChatMessageList.js";
 import ChatThread from "./components/ChatThread.js";
 import ComposerFrame from "./components/ComposerFrame.js";
 import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, DEFAULT_PERMISSION_MODE, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useRowDialogs, wordEmphasisRanges };
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };

package/dist/ai/strings.d.ts

@@ -33,6 +33,10 @@ export interface ChatStrings {
         bannerKeyRejected: (provider: string) => string;
         bannerUnreachable: (provider: string) => string;
     };
+    modelPicker: {
+        /** Beside a provider another user registered and shared with the reader. */
+        sharedBy: (owner: string) => string;
+    };
     queue: {
         remove: string;
         /** Under a message that goes out once the running reply finishes. */
@@ -96,6 +100,10 @@ export interface ChatStrings {
         sharedWithYou: string;
         openSidebar: string;
         closeSidebar: string;
+        /** Names the drawer the list opens in on a narrow layout. */
+        drawerLabel: string;
+        resizeLabel: string;
+        resizeHint: string;
         newChat: string;
         attachments: string;
         connectTools: string;

package/dist/ai/strings.js

@@ -47,6 +47,7 @@ var defaultChatStrings = {
 		bannerKeyRejected: (provider) => `API key rejected for \u201c${provider}\u201d`,
 		bannerUnreachable: (provider) => `\u201c${provider}\u201d is unreachable`
 	},
+	modelPicker: { sharedBy: (owner) => `Shared by ${owner}` },
 	activity: {
 		tokens: (input, output) => `↑${input} ↓${output} tokens`,
 		stop: "Stop"
@@ -100,6 +101,9 @@ var defaultChatStrings = {
 		sharedWithYou: "Shared with you",
 		openSidebar: "Open sidebar",
 		closeSidebar: "Close sidebar",
+		drawerLabel: "Conversations",
+		resizeLabel: "Resize conversation list",
+		resizeHint: "Drag to resize; double-click to reset",
 		newChat: "New chat",
 		attachments: "Attachments",
 		connectTools: "Connect Tools",

package/dist/ai/ui/ConversationSidebar.d.ts

@@ -0,0 +1,61 @@
+import { type ReactNode } from 'react';
+export declare const SIDEBAR_MIN_WIDTH_PX = 200;
+export declare const SIDEBAR_MAX_WIDTH_PX = 480;
+/** A sidebar width the reader drags, nudges or resets, kept per list under
+ *  its own storage key. */
+export declare function useResizableSidebarWidth(storageKey: string): {
+    width: number;
+    resizing: boolean;
+    startResize: (e: React.PointerEvent<HTMLElement>) => void;
+    reset: () => void;
+    nudge: (delta: number) => void;
+};
+export interface ConversationSidebarGroup<T> {
+    key: string;
+    label: ReactNode;
+    tone?: 'default' | 'attention';
+    items: T[];
+}
+/** A list of conversations beside the thread: headed groups of rows that
+ *  collapse to a rail, with an optional drag handle for the width. The host
+ *  decides what is listed, how it is grouped and how each row reads. */
+export declare function ConversationSidebar<T>({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill, groups, getKey, renderRow, loading, placeholder, top, rail, footer, cycle, groupTestId, children, }: {
+    label?: string;
+    collapsed: boolean;
+    onToggle: () => void;
+    toggleLabels: {
+        open: string;
+        close: string;
+    };
+    /** Omit for a fixed width. */
+    resize?: {
+        storageKey: string;
+        label: string;
+        hint: string;
+    };
+    /** Takes the width of its container, as inside a drawer, with no rail and
+     *  no drag handle. */
+    fill?: boolean;
+    groups: ConversationSidebarGroup<T>[];
+    getKey: (item: T) => string;
+    /** One `SidebarRow`. */
+    renderRow: (item: T) => ReactNode;
+    loading?: boolean;
+    /** Shown instead of the groups when there are none, such as an empty
+     *  state, a search with no matches, or an error. */
+    placeholder?: ReactNode;
+    /** Above the list, collapsed or not: new-item buttons and search. */
+    top?: ReactNode;
+    /** What the collapsed rail holds, as `SidebarRailItem`s. */
+    rail?: ReactNode;
+    /** Beside the toggle at the bottom, while expanded. */
+    footer?: ReactNode;
+    /** ⌘⌥↑ and ⌘⌥↓ (Ctrl+Alt elsewhere) select the previous or next item. */
+    cycle?: {
+        current: T | undefined;
+        onSelect: (item: T) => void;
+    };
+    groupTestId?: string;
+    /** Dialogs and menus that belong to the list. */
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/ai/ui/ConversationSidebar.js

@@ -0,0 +1,165 @@
+import { positionKeys } from "../../components/keys.js";
+import { SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
+import cx from "classnames";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function clampSidebarWidth(width) {
+	return Math.min(480, Math.max(200, width));
+}
+function readStoredSidebarWidth(storageKey) {
+	try {
+		const stored = Number(window.localStorage.getItem(storageKey));
+		return Number.isFinite(stored) && stored > 0 ? clampSidebarWidth(stored) : 256;
+	} catch {
+		return 256;
+	}
+}
+function storeSidebarWidth(storageKey, width) {
+	try {
+		window.localStorage.setItem(storageKey, String(width));
+	} catch {}
+}
+/** A sidebar width the reader drags, nudges or resets, kept per list under
+*  its own storage key. */
+function useResizableSidebarWidth(storageKey) {
+	const [width, setWidth] = useState(() => readStoredSidebarWidth(storageKey));
+	const [resizing, setResizing] = useState(false);
+	const widthRef = useRef(width);
+	widthRef.current = width;
+	const startResize = (e) => {
+		e.preventDefault();
+		const startX = e.clientX;
+		const startWidth = widthRef.current;
+		setResizing(true);
+		const onMove = (ev) => {
+			setWidth(clampSidebarWidth(startWidth + ev.clientX - startX));
+		};
+		const onUp = () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			setResizing(false);
+			storeSidebarWidth(storageKey, widthRef.current);
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	};
+	const reset = () => {
+		setWidth(256);
+		storeSidebarWidth(storageKey, 256);
+	};
+	const nudge = (delta) => {
+		const next = clampSidebarWidth(widthRef.current + delta);
+		setWidth(next);
+		storeSidebarWidth(storageKey, next);
+	};
+	return {
+		width,
+		resizing,
+		startResize,
+		reset,
+		nudge
+	};
+}
+/** Steps through the listed items in order and wraps, so moving between
+*  conversations never needs the pointer. */
+function useItemCycling(ordered, cycle) {
+	const latest = useRef({
+		ordered,
+		cycle
+	});
+	latest.current = {
+		ordered,
+		cycle
+	};
+	const enabled = !!cycle;
+	useEffect(() => {
+		if (!enabled) return;
+		const onKeyDown = (e) => {
+			const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
+			const { ordered: items, cycle: c } = latest.current;
+			if (!step || !e.altKey || !(e.metaKey || e.ctrlKey) || !c || items.length === 0) return;
+			e.preventDefault();
+			const at = c.current === void 0 ? -1 : items.indexOf(c.current);
+			const next = at < 0 ? items[step > 0 ? 0 : items.length - 1] : items[(at + step + items.length) % items.length];
+			if (next !== void 0) c.onSelect(next);
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [enabled]);
+}
+/** A list of conversations beside the thread: headed groups of rows that
+*  collapse to a rail, with an optional drag handle for the width. The host
+*  decides what is listed, how it is grouped and how each row reads. */
+function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill = false, groups, getKey, renderRow, loading = false, placeholder, top, rail, footer, cycle, groupTestId, children }) {
+	const sized = useResizableSidebarWidth(resize?.storageKey ?? "");
+	useItemCycling(groups.flatMap((g) => g.items), cycle);
+	const collapsed = collapsedProp && !fill;
+	const resizable = resize && !fill;
+	return /* @__PURE__ */ jsxs(SidebarPanel, {
+		collapsed,
+		label,
+		...resizable ? {
+			width: sized.width,
+			resizing: sized.resizing
+		} : {},
+		...fill ? { style: { width: "100%" } } : {},
+		children: [
+			resizable && !collapsed && /* @__PURE__ */ jsx("div", {
+				role: "separator",
+				tabIndex: 0,
+				"aria-orientation": "vertical",
+				"aria-label": resize.label,
+				"aria-valuemin": 200,
+				"aria-valuemax": 480,
+				"aria-valuenow": sized.width,
+				title: resize.hint,
+				onPointerDown: sized.startResize,
+				onDoubleClick: sized.reset,
+				onKeyDown: (e) => {
+					if (e.key === "ArrowLeft") sized.nudge(-16);
+					else if (e.key === "ArrowRight") sized.nudge(16);
+				},
+				className: cx("absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none", sized.resizing ? "bg-(--theme-element)" : "hover:bg-(--theme-border)")
+			}),
+			top,
+			collapsed && rail ? /* @__PURE__ */ jsx("ul", {
+				className: "flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto py-1",
+				children: rail
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cx("min-h-0 flex-1 overflow-y-auto px-2 pb-2 transition-opacity duration-200", collapsed ? "pointer-events-none opacity-0" : "opacity-100"),
+				children: loading ? /* @__PURE__ */ jsx("div", {
+					className: "space-y-3 px-2 pt-2",
+					children: positionKeys(5, "skeleton").map((key, i) => /* @__PURE__ */ jsx("div", {
+						className: "animate-pulse",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "h-4 rounded theme-muted-panel",
+							style: { width: `${70 - i * 10}%` }
+						})
+					}, key))
+				}) : groups.length === 0 ? placeholder : groups.map((group) => /* @__PURE__ */ jsxs("div", {
+					className: "mb-2",
+					children: [/* @__PURE__ */ jsx(SidebarGroupHeading, {
+						tone: group.tone ?? "default",
+						testId: groupTestId,
+						children: group.label
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-0.5",
+						children: group.items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderRow(item) }, getKey(item)))
+					})]
+				}, group.key))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("flex shrink-0 items-center gap-1 p-1.5", collapsed ? "justify-center" : footer ? "justify-between" : "justify-end"),
+				children: [!collapsed && footer, /* @__PURE__ */ jsx(SidebarToggle, {
+					collapsed,
+					onToggle,
+					openLabel: toggleLabels.open,
+					closeLabel: toggleLabels.close
+				})]
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { ConversationSidebar, useResizableSidebarWidth };

package/dist/ai/ui/sidebar.d.ts

@@ -8,11 +8,22 @@ export declare function SidebarPanel({ collapsed, width, railWidth, resizing, la
     width?: number;
     railWidth?: number;
     resizing?: boolean;
-    label?: string;
+    label?: string | undefined;
     className?: string;
     style?: CSSProperties;
     children: ReactNode;
 }): import("react").JSX.Element;
+/** The list over the content of a layout too narrow to keep it beside the
+ *  content. Place it in a positioned container: the drawer covers that
+ *  container, not the window, so an embedded chat keeps to its own panel.
+ *  Tapping outside or Escape closes it, and focus returns where it was. */
+export declare function SidebarDrawer({ open, onClose, label, closeLabel, children, }: {
+    open: boolean;
+    onClose: () => void;
+    label: string;
+    closeLabel: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export declare function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className, }: {
     collapsed: boolean;
     onToggle: () => void;
@@ -24,7 +35,7 @@ export declare function SidebarGroupHeading({ children, tone, testId, }: {
     children: ReactNode;
     /** 'attention' is for the group the reader is being asked to act on. */
     tone?: 'default' | 'attention';
-    testId?: string;
+    testId?: string | undefined;
 }): import("react").JSX.Element;
 /** One entry in the list: the row highlights while it is the open one or
  *  while its menu is up, and the menu opens from its button or a right-click. */

package/dist/ai/ui/sidebar.js

@@ -3,7 +3,7 @@ import { ConfirmModal } from "../../components/ConfirmModal.js";
 import { focusOnMount } from "../../components/focus.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/RowContextMenu.js";
 import cx from "classnames";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/ui/sidebar.tsx
 var SIDEBAR_RAIL_WIDTH_PX = 48;
@@ -22,6 +22,41 @@ function SidebarPanel({ collapsed, width = 256, railWidth = SIDEBAR_RAIL_WIDTH_P
 		children
 	});
 }
+/** The list over the content of a layout too narrow to keep it beside the
+*  content. Place it in a positioned container: the drawer covers that
+*  container, not the window, so an embedded chat keeps to its own panel.
+*  Tapping outside or Escape closes it, and focus returns where it was. */
+function SidebarDrawer({ open, onClose, label, closeLabel, children }) {
+	const panelRef = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		panelRef.current?.focus();
+		return () => returnTo?.focus();
+	}, [open]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": closeLabel,
+		onClick: onClose,
+		className: cx("absolute inset-0 z-20 bg-black/40 transition-opacity duration-300", open ? "opacity-100" : "pointer-events-none opacity-0")
+	}), /* @__PURE__ */ jsx("div", {
+		ref: panelRef,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": label,
+		tabIndex: -1,
+		inert: !open,
+		onKeyDown: (e) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				onClose();
+			}
+		},
+		className: cx("absolute inset-y-0 left-0 z-30 flex w-[min(20rem,85%)] shadow-xl transition-transform duration-300 ease-in-out focus:outline-none", open ? "translate-x-0" : "-translate-x-full"),
+		children
+	})] });
+}
 function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className }) {
 	const label = collapsed ? openLabel : closeLabel;
 	return /* @__PURE__ */ jsx("button", {
@@ -147,4 +182,4 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 	};
 }
 //#endregion
-export { RenameDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };
+export { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };