@case-framework/survey-assistant 0.3.0 → 0.4.0

package/dist/ui.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { jt as parseSurveyAssistantError, l as surveyAssistantTurnFinalSchema, n as SURVEY_ASSISTANT_TURN_FINAL_PART_TYPE } from "./protocol-DATvkr1S.mjs";
-import { f as unwrapSurveyAssistantToolOutput, i as createSurveyAssistantThreadClient, l as parseSurveyChangeSet, p as isSurveyAssistantTurnActive, r as useSurveyAssistantModelCatalog, t as useSurveyAssistantSession } from "./react-Br5YE8H-.mjs";
-import { o as connectSurveyAssistantThreadLauncher } from "./controller-proxy-CpkQRezb.mjs";
+import { jt as parseSurveyAssistantError, l as surveyAssistantTurnFinalSchema, n as SURVEY_ASSISTANT_TURN_FINAL_PART_TYPE } from "./protocol-DJUP4gc0.mjs";
+import { f as unwrapSurveyAssistantToolOutput, i as createSurveyAssistantThreadClient, l as parseSurveyChangeSet, p as isSurveyAssistantTurnActive, r as useSurveyAssistantModelCatalog, t as useSurveyAssistantSession } from "./react-CY6N7lVi.mjs";
+import { o as connectSurveyAssistantThreadLauncher } from "./controller-proxy-jWIPOZAv.mjs";
 import { getToolName, isFileUIPart, isReasoningUIPart, isToolUIPart } from "ai";
 import { createContext, createElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Collapsible, Select, Slot } from "radix-ui";
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { ArrowDownIcon, ArrowUpIcon, BotIcon, BrainIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, DotIcon, FileIcon, HistoryIcon, ListChecksIcon, LoaderCircleIcon, MessageSquarePlusIcon, PaperclipIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, Trash2Icon, WandSparklesIcon, WrenchIcon, XCircleIcon, XIcon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, BotIcon, BrainIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, DotIcon, FileIcon, HistoryIcon, ListChecksIcon, LoaderCircleIcon, MessageSquarePlusIcon, PaperclipIcon, PencilIcon, PlusIcon, SearchIcon, SparklesIcon, SquareIcon, Trash2Icon, WandSparklesIcon, WrenchIcon, XCircleIcon, XIcon } from "lucide-react";
 import { motion } from "motion/react";
 import { createLocalizationTranslator, mergeLocalizationCatalogs } from "@case-framework/ui-localization";
 import { cva } from "class-variance-authority";
@@ -80,13 +80,30 @@ const surveyAssistantEnMessages = {
 	},
 	empty: {
 		title: "What are you working on?",
-		description: "Draft, inspect, or refine your survey - just describe what you need, or start with one of these."
+		description: "Draft, inspect, or refine your survey - just describe what you need, or start with one of these.",
+		newSurveyTitle: "Create with the assistant",
+		newSurveyDescription: "Describe the survey you need, share a brief, or plan the right questions together."
 	},
 	quickActions: {
+		draftSurvey: {
+			label: "Draft a survey",
+			description: "Create a first draft from your goals",
+			prompt: "Help me create a first draft of a new survey. Ask me about its topic, audience, and goals before drafting it."
+		},
+		useBrief: {
+			label: "Use a brief or notes",
+			description: "Turn requirements into a survey",
+			prompt: "Help me turn a brief or set of notes into a survey. Ask me to paste the text or attach the document."
+		},
+		planSurvey: {
+			label: "Plan the questions",
+			description: "Outline the structure before drafting",
+			prompt: "Help me plan the questions and structure for a new survey before we draft it."
+		},
 		review: {
 			label: "Review survey",
 			description: "Spot issues and suggest improvements",
-			prompt: "Review the current survey and suggest improvements."
+			prompt: "Run a deterministic audit of the current survey, including expression-reference integrity, then review its quality and suggest improvements."
 		},
 		create: {
 			label: "New question",
@@ -97,6 +114,11 @@ const surveyAssistantEnMessages = {
 			label: "Refine wording",
 			description: "Polish respondent-facing text",
 			prompt: "Suggest improvements to the respondent-facing wording."
+		},
+		refineSelection: {
+			label: "Refine selected item",
+			description: "Polish the wording in context",
+			prompt: "Suggest improvements to the respondent-facing wording of the selected item."
 		}
 	},
 	input: {
@@ -111,6 +133,8 @@ const surveyAssistantEnMessages = {
 		defaultModel: "Default model"
 	},
 	conversation: {
+		loadEarlier: "Load earlier messages",
+		loadingEarlier: "Loading earlier messages…",
 		noMessages: "No messages yet",
 		startConversation: "Start a conversation to see messages here",
 		scrollToLatest: "Scroll to latest message",
@@ -246,6 +270,11 @@ const surveyAssistantEnMessages = {
 		newChat: "New chat",
 		history: "Chat history",
 		recent: "Recent chats",
+		search: "Search chats",
+		searching: "Searching older chats…",
+		noMatches: "No matching chats",
+		loadOlder: "Load older chats",
+		loadingOlder: "Loading older chats…",
 		automaticTitle: "Use automatic title",
 		automaticShort: "Auto",
 		rename: "Rename {title}",
@@ -266,13 +295,30 @@ const surveyAssistantNlMessages = {
 	},
 	empty: {
 		title: "Waar werk je aan?",
-		description: "Maak, controleer of verbeter je survey. Beschrijf wat je nodig hebt of kies een van deze opties."
+		description: "Maak, controleer of verbeter je survey. Beschrijf wat je nodig hebt of kies een van deze opties.",
+		newSurveyTitle: "Maak iets met de assistent",
+		newSurveyDescription: "Beschrijf de survey die je nodig hebt, deel een briefing of plan samen de juiste vragen."
 	},
 	quickActions: {
+		draftSurvey: {
+			label: "Een survey opstellen",
+			description: "Maak een eerste versie vanuit je doelen",
+			prompt: "Help me een eerste versie van een nieuwe survey te maken. Vraag me vóór het opstellen naar het onderwerp, de doelgroep en de doelen."
+		},
+		useBrief: {
+			label: "Gebruik een briefing of notities",
+			description: "Zet vereisten om in een survey",
+			prompt: "Help me een briefing of verzameling notities om te zetten in een survey. Vraag me de tekst te plakken of het document toe te voegen."
+		},
+		planSurvey: {
+			label: "Plan de vragen",
+			description: "Schets eerst de structuur",
+			prompt: "Help me de vragen en structuur voor een nieuwe survey te plannen voordat we die opstellen."
+		},
 		review: {
 			label: "Survey controleren",
 			description: "Problemen vinden en verbeteringen voorstellen",
-			prompt: "Controleer de huidige survey en stel verbeteringen voor."
+			prompt: "Voer een deterministische controle van de huidige survey uit, inclusief de geldigheid van expressieverwijzingen, beoordeel daarna de kwaliteit en stel verbeteringen voor."
 		},
 		create: {
 			label: "Nieuwe vraag",
@@ -283,6 +329,11 @@ const surveyAssistantNlMessages = {
 			label: "Formulering verbeteren",
 			description: "Tekst voor respondenten aanscherpen",
 			prompt: "Stel verbeteringen voor voor de tekst die respondenten zien."
+		},
+		refineSelection: {
+			label: "Geselecteerd item verbeteren",
+			description: "Scherp de formulering in context aan",
+			prompt: "Stel verbeteringen voor voor de respondentgerichte formulering van het geselecteerde item."
 		}
 	},
 	input: {
@@ -297,6 +348,8 @@ const surveyAssistantNlMessages = {
 		defaultModel: "Standaardmodel"
 	},
 	conversation: {
+		loadEarlier: "Eerdere berichten laden",
+		loadingEarlier: "Eerdere berichten laden…",
 		noMessages: "Nog geen berichten",
 		startConversation: "Start een gesprek om hier berichten te zien",
 		scrollToLatest: "Naar het nieuwste bericht scrollen",
@@ -432,6 +485,11 @@ const surveyAssistantNlMessages = {
 		newChat: "Nieuwe chat",
 		history: "Chatgeschiedenis",
 		recent: "Recente chats",
+		search: "Chats zoeken",
+		searching: "Oudere chats zoeken…",
+		noMatches: "Geen overeenkomende chats",
+		loadOlder: "Oudere chats laden",
+		loadingOlder: "Oudere chats laden…",
 		automaticTitle: "Automatische titel gebruiken",
 		automaticShort: "Automatisch",
 		rename: "{title} hernoemen",
@@ -1351,26 +1409,61 @@ const getPersistedMessageTurnStatus = (message) => {
 };
 //#endregion
 //#region src/ui/survey-assistant-panel.tsx
-const getAssistantQuickPrompts = (t) => [
-	{
-		label: t("quickActions.review.label"),
-		description: t("quickActions.review.description"),
-		icon: ListChecksIcon,
-		prompt: t("quickActions.review.prompt")
-	},
-	{
-		label: t("quickActions.create.label"),
-		description: t("quickActions.create.description"),
-		icon: MessageSquarePlusIcon,
-		prompt: t("quickActions.create.prompt")
-	},
-	{
-		label: t("quickActions.refine.label"),
-		description: t("quickActions.refine.description"),
-		icon: WandSparklesIcon,
-		prompt: t("quickActions.refine.prompt")
+const isRootSurveyItem = (item) => typeof item.config === "object" && item.config !== null && item.config.isRoot === true;
+const getAssistantEmptyStateContext = (controller) => {
+	try {
+		const snapshot = controller?.getSnapshot();
+		if (!snapshot) return "survey";
+		const surveyItems = snapshot.survey.surveyItems.filter((item) => !isRootSurveyItem(item));
+		if (surveyItems.length === 0) return "new-survey";
+		if (surveyItems.some((item) => item.id === snapshot.ui.selectedItemId)) return "selected-item";
+		return "survey";
+	} catch {
+		return "survey";
 	}
-];
+};
+const getAssistantQuickPrompts = (t, context) => {
+	if (context === "new-survey") return [
+		{
+			label: t("quickActions.draftSurvey.label"),
+			description: t("quickActions.draftSurvey.description"),
+			icon: WandSparklesIcon,
+			prompt: t("quickActions.draftSurvey.prompt")
+		},
+		{
+			label: t("quickActions.useBrief.label"),
+			description: t("quickActions.useBrief.description"),
+			icon: FileIcon,
+			prompt: t("quickActions.useBrief.prompt")
+		},
+		{
+			label: t("quickActions.planSurvey.label"),
+			description: t("quickActions.planSurvey.description"),
+			icon: ListChecksIcon,
+			prompt: t("quickActions.planSurvey.prompt")
+		}
+	];
+	return [
+		{
+			label: t("quickActions.review.label"),
+			description: t("quickActions.review.description"),
+			icon: ListChecksIcon,
+			prompt: t("quickActions.review.prompt")
+		},
+		{
+			label: t("quickActions.create.label"),
+			description: t("quickActions.create.description"),
+			icon: MessageSquarePlusIcon,
+			prompt: t("quickActions.create.prompt")
+		},
+		{
+			label: t(context === "selected-item" ? "quickActions.refineSelection.label" : "quickActions.refine.label"),
+			description: t(context === "selected-item" ? "quickActions.refineSelection.description" : "quickActions.refine.description"),
+			icon: WandSparklesIcon,
+			prompt: t(context === "selected-item" ? "quickActions.refineSelection.prompt" : "quickActions.refine.prompt")
+		}
+	];
+};
 const isSurveyAssistantAttachmentReferencePart = (part) => {
 	if (part.type !== "data-survey-assistant-attachment" || typeof part.data !== "object" || part.data === null) return false;
 	const data = part.data;
@@ -1399,6 +1492,7 @@ const getAssistantErrorPresentation = (error, t) => {
 		title: t(`errors.${parsed.code}.title`),
 		description: parsed.detail ?? t("errors.fallbackDetail"),
 		hint: t(`errors.${parsed.code}.hint`),
+		retryable: parsed.retryable ?? (parsed.code === "rate_limited" || parsed.code === "request_failed"),
 		tone: parsed.code === "model_unavailable" || parsed.code === "rate_limited" ? "warning" : "error"
 	};
 };
@@ -1808,10 +1902,11 @@ const SurveyAssistantHeaderIdentity = ({ indicatorClassName, status, title }) =>
 		})]
 	})]
 });
-const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = false, initialLaunch, initialMessages, modelId, models, onInitialLaunchHandled, onModelChange, onFirstSubmit, onTurnSettled, onApplyReceipts, onSettleApply, onReviewChangeSets, onTurnActiveChange, resourceId, surveyId, threadControls, threadId, threadTitle }) => {
+const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = false, hasEarlierMessages, initialLaunch, initialMessages, modelId, models, onInitialLaunchHandled, onModelChange, onFirstSubmit, onLoadEarlierMessages, onTurnSettled, onApplyReceipts, onSettleApply, onReviewChangeSets, onTurnActiveChange, resourceId, surveyId, threadControls, threadId, threadTitle }) => {
 	const t = useSurveyAssistantTranslation();
-	const assistantQuickPrompts = getAssistantQuickPrompts(t);
-	const { applyResultsByChangeId, authorizationError, dismissError, error, isStreaming, latestTurnOutcome, messages, state, status, stop, submit, retry } = useSurveyAssistantSession({
+	const emptyStateContext = getAssistantEmptyStateContext(controller);
+	const assistantQuickPrompts = getAssistantQuickPrompts(t, emptyStateContext);
+	const { applyResultsByChangeId, authorizationError, dismissError, error, isStreaming, latestTurnOutcome, messages, prependMessages, state, status, stop, submit, retry } = useSurveyAssistantSession({
 		api,
 		applyPolicy,
 		controller,
@@ -1836,6 +1931,20 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 	const promptTextareaRef = useRef(null);
 	const shouldRestorePromptFocusRef = useRef(false);
 	const turnWasActiveRef = useRef(false);
+	const [loadingEarlierMessages, setLoadingEarlierMessages] = useState(false);
+	const loadEarlierMessages = useCallback(async () => {
+		if (loadingEarlierMessages) return;
+		setLoadingEarlierMessages(true);
+		try {
+			prependMessages(await onLoadEarlierMessages());
+		} finally {
+			setLoadingEarlierMessages(false);
+		}
+	}, [
+		loadingEarlierMessages,
+		onLoadEarlierMessages,
+		prependMessages
+	]);
 	const isAssistantTurnSettled = !isStreaming && (state === "completed" || state === "failed" || state === "aborted" || state === "applied");
 	useEffect(() => {
 		if (!isAssistantTurnActive) {
@@ -1943,16 +2052,16 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 							className: "mx-auto w-full max-w-sm",
 							children: [
 								/* @__PURE__ */ jsx("div", {
-									className: "mb-3 flex size-10 items-center justify-center rounded-xl bg-foreground text-background shadow-sm",
-									children: /* @__PURE__ */ jsx(SparklesIcon, { className: "size-5" })
+									className: "mb-3 flex size-9 items-center justify-center rounded-xl border border-border bg-muted text-foreground shadow-xs",
+									children: /* @__PURE__ */ jsx(SparklesIcon, { className: "size-4" })
 								}),
 								/* @__PURE__ */ jsx("h3", {
 									className: "font-semibold text-foreground text-base tracking-tight",
-									children: t("empty.title")
+									children: t(emptyStateContext === "new-survey" ? "empty.newSurveyTitle" : "empty.title")
 								}),
 								/* @__PURE__ */ jsx("p", {
 									className: "mt-1 text-muted-foreground text-xs leading-relaxed",
-									children: t("empty.description")
+									children: t(emptyStateContext === "new-survey" ? "empty.newSurveyDescription" : "empty.description")
 								}),
 								/* @__PURE__ */ jsx("div", {
 									className: "mt-4 flex flex-col gap-1.5",
@@ -1981,40 +2090,50 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 								})
 							]
 						})
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [messages.map((message, index) => {
-						const isLastMessage = index === messages.length - 1;
-						const persistedTurnStatus = getPersistedMessageTurnStatus(message);
-						const terminalTurnStatus = persistedTurnStatus === "aborted" || persistedTurnStatus === "failed" ? persistedTurnStatus : isLastMessage && (state === "aborted" || state === "failed") ? state : void 0;
-						const shouldShowProgress = isAssistantTurnActive && isLastMessage && message.role === "assistant";
-						return /* @__PURE__ */ jsx(Message, {
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						hasEarlierMessages && /* @__PURE__ */ jsxs("button", {
+							className: "mx-auto flex h-8 items-center justify-center rounded-md px-3 text-muted-foreground text-xs hover:bg-muted hover:text-foreground disabled:pointer-events-none",
+							disabled: loadingEarlierMessages || isAssistantTurnActive,
+							onClick: () => void loadEarlierMessages(),
+							type: "button",
+							children: [loadingEarlierMessages && /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mr-1.5 size-3.5 animate-spin" }), loadingEarlierMessages ? t("conversation.loadingEarlier") : t("conversation.loadEarlier")]
+						}),
+						messages.map((message, index) => {
+							const isLastMessage = index === messages.length - 1;
+							const persistedTurnStatus = getPersistedMessageTurnStatus(message);
+							const terminalTurnStatus = persistedTurnStatus === "aborted" || persistedTurnStatus === "failed" ? persistedTurnStatus : isLastMessage && (state === "aborted" || state === "failed") ? state : void 0;
+							const shouldShowProgress = isAssistantTurnActive && isLastMessage && message.role === "assistant";
+							return /* @__PURE__ */ jsx(Message, {
+								className: "max-w-[96%] gap-1",
+								from: message.role,
+								children: /* @__PURE__ */ jsx(MessageContent, {
+									className: cn(message.role === "assistant" && "w-full space-y-2"),
+									children: hasRenderableParts(message) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SurveyAssistantMessageParts, {
+										applyResultsByChangeId,
+										isLastMessage,
+										isStreaming: isAssistantTurnActive,
+										message,
+										showProgress: shouldShowProgress,
+										terminalTurnStatus
+									}), isLastMessage && latestTurnOutcome && /* @__PURE__ */ jsx(SurveyAssistantTurnOutcomeNotice, { ...latestTurnOutcome })] }) : shouldShowProgress ? /* @__PURE__ */ jsx(SurveyAssistantProgressIndicator, { message }) : isLastMessage && latestTurnOutcome ? /* @__PURE__ */ jsx(SurveyAssistantTurnOutcomeNotice, { ...latestTurnOutcome }) : state === "aborted" ? /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-sm",
+										children: t("conversation.stopped")
+									}) : /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-sm",
+										children: t("conversation.incomplete")
+									})
+								})
+							}, message.id);
+						}),
+						showPendingAssistantRow && /* @__PURE__ */ jsx(Message, {
 							className: "max-w-[96%] gap-1",
-							from: message.role,
+							from: "assistant",
 							children: /* @__PURE__ */ jsx(MessageContent, {
-								className: cn(message.role === "assistant" && "w-full space-y-2"),
-								children: hasRenderableParts(message) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SurveyAssistantMessageParts, {
-									applyResultsByChangeId,
-									isLastMessage,
-									isStreaming: isAssistantTurnActive,
-									message,
-									showProgress: shouldShowProgress,
-									terminalTurnStatus
-								}), isLastMessage && latestTurnOutcome && /* @__PURE__ */ jsx(SurveyAssistantTurnOutcomeNotice, { ...latestTurnOutcome })] }) : shouldShowProgress ? /* @__PURE__ */ jsx(SurveyAssistantProgressIndicator, { message }) : isLastMessage && latestTurnOutcome ? /* @__PURE__ */ jsx(SurveyAssistantTurnOutcomeNotice, { ...latestTurnOutcome }) : state === "aborted" ? /* @__PURE__ */ jsx("span", {
-									className: "text-muted-foreground text-sm",
-									children: t("conversation.stopped")
-								}) : /* @__PURE__ */ jsx("span", {
-									className: "text-muted-foreground text-sm",
-									children: t("conversation.incomplete")
-								})
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(SurveyAssistantProgressIndicator, {})
 							})
-						}, message.id);
-					}), showPendingAssistantRow && /* @__PURE__ */ jsx(Message, {
-						className: "max-w-[96%] gap-1",
-						from: "assistant",
-						children: /* @__PURE__ */ jsx(MessageContent, {
-							className: "w-full",
-							children: /* @__PURE__ */ jsx(SurveyAssistantProgressIndicator, {})
 						})
-					})] })
+					] })
 				}), /* @__PURE__ */ jsx(ConversationScrollButton, { className: "bottom-2.5" })]
 			}),
 			showAssistantError && /* @__PURE__ */ jsxs("div", {
@@ -2037,7 +2156,7 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 								className: "mt-1 text-muted-foreground/80",
 								children: assistantErrorPresentation.hint
 							}),
-							/* @__PURE__ */ jsx("button", {
+							assistantErrorPresentation.retryable && /* @__PURE__ */ jsx("button", {
 								className: "mt-1.5 font-medium text-foreground text-xs hover:underline",
 								onClick: retry,
 								type: "button",
@@ -2081,14 +2200,32 @@ const createThreadTitle = (text, fallback) => {
 	const words = normalized.split(" ").slice(0, 8).join(" ");
 	return words.length > 64 ? `${words.slice(0, 61).trimEnd()}...` : words;
 };
+const mergeThreads = (current, incoming) => {
+	const byId = new Map(current.map((thread) => [thread.id, thread]));
+	for (const thread of incoming) byId.set(thread.id, thread);
+	return [...byId.values()].sort((left, right) => Date.parse(right.updatedAt) - Date.parse(left.updatedAt));
+};
+const mergeRecentThreadPage = (current, recent) => {
+	if (recent.length === 0) return [];
+	const oldestRecentUpdate = Math.min(...recent.map((thread) => Date.parse(thread.updatedAt)));
+	return mergeThreads(Number.isFinite(oldestRecentUpdate) ? current.filter((thread) => Date.parse(thread.updatedAt) <= oldestRecentUpdate) : current, recent);
+};
+const listThreadPage = async (client, cursor) => {
+	if (client.listPage) return client.listPage(cursor ? { cursor } : void 0);
+	return cursor ? { threads: [] } : { threads: await client.list() };
+};
 const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], onConfirmDeleteThread, onModelChange = () => {}, onTurnActiveChange: onAssistantTurnActiveChange, resourceId, selectedThreadStorageKey, surveyId, threadApi, threadClient: providedThreadClient, threadLauncher, ...sessionProps }) => {
 	const t = useSurveyAssistantTranslation();
 	const threadClient = useMemo(() => providedThreadClient ?? createSurveyAssistantThreadClient(threadApi), [providedThreadClient, threadApi]);
 	const storageKey = selectedThreadStorageKey === false ? null : selectedThreadStorageKey ?? `${SELECTED_THREAD_STORAGE_KEY}:${encodeURIComponent(resourceId)}${surveyId ? `:${encodeURIComponent(surveyId)}` : ""}`;
 	const [threads, setThreads] = useState([]);
+	const [nextThreadCursor, setNextThreadCursor] = useState();
 	const [selectedThread, setSelectedThread] = useState(null);
 	const [initialMessages, setInitialMessages] = useState([]);
+	const [nextMessageCursor, setNextMessageCursor] = useState();
 	const [historyOpen, setHistoryOpen] = useState(false);
+	const [threadSearch, setThreadSearch] = useState("");
+	const [loadingOlderThreads, setLoadingOlderThreads] = useState(false);
 	const [editingThreadId, setEditingThreadId] = useState(null);
 	const [editingTitle, setEditingTitle] = useState("");
 	const [threadError, setThreadError] = useState(null);
@@ -2096,21 +2233,25 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 	const [assistantTurnActive, setAssistantTurnActive] = useState(false);
 	const [initialLaunch, setInitialLaunch] = useState();
 	const historyControlsRef = useRef(null);
+	const loadingAllThreadsRef = useRef(false);
 	const selectModel = useCallback((modelId) => {
 		if (!models.some((model) => model.id === modelId)) return;
 		onModelChange(modelId);
 	}, [models, onModelChange]);
-	const selectThread = useCallback(async (thread) => {
+	const selectThread = useCallback(async (thread, reportError = true) => {
 		setLoadingThread(true);
 		setThreadError(null);
 		try {
 			const transcript = await threadClient.read(thread.id);
 			setSelectedThread(transcript.thread);
 			setInitialMessages(transcript.messages);
+			setNextMessageCursor(transcript.nextCursor);
 			setHistoryOpen(false);
 			if (storageKey) window.localStorage.setItem(storageKey, thread.id);
+			return transcript.thread;
 		} catch (error) {
-			setThreadError(parseSurveyAssistantError(error).detail ?? t("errors.fallbackDetail"));
+			if (reportError) setThreadError(parseSurveyAssistantError(error).detail ?? t("errors.fallbackDetail"));
+			return null;
 		} finally {
 			setLoadingThread(false);
 		}
@@ -2124,9 +2265,10 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		setThreadError(null);
 		try {
 			const thread = await threadClient.create(launch?.title);
-			setThreads((current) => [thread, ...current]);
+			setThreads((current) => mergeThreads(current, [thread]));
 			setSelectedThread(thread);
 			setInitialMessages([]);
+			setNextMessageCursor(void 0);
 			setHistoryOpen(false);
 			if (storageKey) window.localStorage.setItem(storageKey, thread.id);
 			return thread;
@@ -2144,11 +2286,21 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 	]);
 	useEffect(() => {
 		let cancelled = false;
-		threadClient.list().then(async (availableThreads) => {
+		listThreadPage(threadClient).then(async (page) => {
 			if (cancelled) return;
+			const availableThreads = page.threads;
 			setThreads(availableThreads);
+			setNextThreadCursor(page.nextCursor);
 			const rememberedId = storageKey ? window.localStorage.getItem(storageKey) : null;
-			const initialThread = availableThreads.find((thread) => thread.id === rememberedId) ?? availableThreads[0];
+			const rememberedThread = availableThreads.find((thread) => thread.id === rememberedId);
+			if (rememberedId && !rememberedThread) {
+				const restored = await selectThread({ id: rememberedId }, false);
+				if (restored) {
+					setThreads((current) => mergeThreads(current, [restored]));
+					return;
+				}
+			}
+			const initialThread = rememberedThread ?? availableThreads[0];
 			if (initialThread) await selectThread(initialThread);
 			else await createThread();
 		}).catch((error) => {
@@ -2167,6 +2319,66 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		t,
 		threadClient
 	]);
+	const loadOlderThreads = useCallback(async () => {
+		if (!nextThreadCursor || loadingOlderThreads) return;
+		setLoadingOlderThreads(true);
+		try {
+			const page = await listThreadPage(threadClient, nextThreadCursor);
+			setThreads((current) => mergeThreads(current, page.threads));
+			setNextThreadCursor(page.nextCursor);
+		} catch (error) {
+			setThreadError(parseSurveyAssistantError(error).detail ?? t("errors.fallbackDetail"));
+		} finally {
+			setLoadingOlderThreads(false);
+		}
+	}, [
+		loadingOlderThreads,
+		nextThreadCursor,
+		t,
+		threadClient
+	]);
+	const loadEarlierMessages = useCallback(async () => {
+		if (!selectedThread || !nextMessageCursor) return [];
+		try {
+			const transcript = await threadClient.read(selectedThread.id, nextMessageCursor);
+			setNextMessageCursor(transcript.nextCursor);
+			return transcript.messages;
+		} catch (error) {
+			setThreadError(parseSurveyAssistantError(error).detail ?? t("errors.fallbackDetail"));
+			return [];
+		}
+	}, [
+		nextMessageCursor,
+		selectedThread,
+		t,
+		threadClient
+	]);
+	const loadAllThreadsForSearch = useCallback(async () => {
+		if (!nextThreadCursor || loadingAllThreadsRef.current) return;
+		loadingAllThreadsRef.current = true;
+		setLoadingOlderThreads(true);
+		try {
+			let cursor = nextThreadCursor;
+			while (cursor) {
+				const page = await listThreadPage(threadClient, cursor);
+				setThreads((current) => mergeThreads(current, page.threads));
+				cursor = page.nextCursor;
+				setNextThreadCursor(cursor);
+			}
+		} catch (error) {
+			setThreadError(parseSurveyAssistantError(error).detail ?? t("errors.fallbackDetail"));
+		} finally {
+			loadingAllThreadsRef.current = false;
+			setLoadingOlderThreads(false);
+		}
+	}, [
+		nextThreadCursor,
+		t,
+		threadClient
+	]);
+	useEffect(() => {
+		if (threadSearch.trim()) loadAllThreadsForSearch();
+	}, [loadAllThreadsForSearch, threadSearch]);
 	useEffect(() => {
 		if (!threadLauncher || loadingThread) return;
 		return connectSurveyAssistantThreadLauncher(threadLauncher, async (launch) => {
@@ -2274,9 +2486,9 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 	}, [initialLaunch]);
 	const refreshThreadList = useCallback(async (reportError) => {
 		try {
-			const availableThreads = await threadClient.list();
-			setThreads(availableThreads);
-			const current = availableThreads.find((thread) => thread.id === selectedThread?.id);
+			const page = await listThreadPage(threadClient);
+			setThreads((current) => mergeRecentThreadPage(current, page.threads));
+			const current = page.threads.find((thread) => thread.id === selectedThread?.id);
 			if (current && !editingThreadId) setSelectedThread((selected) => {
 				if (!selected || selected.id !== current.id) return selected;
 				return selected.title === current.title && selected.titleMode === current.titleMode && selected.updatedAt === current.updatedAt ? selected : current;
@@ -2352,6 +2564,8 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 			children: [/* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mr-2 size-4 animate-spin" }), t("panel.loadingChats")]
 		})]
 	});
+	const normalizedThreadSearch = threadSearch.trim().toLocaleLowerCase();
+	const visibleThreads = normalizedThreadSearch ? threads.filter((thread) => thread.title.toLocaleLowerCase().includes(normalizedThreadSearch)) : threads;
 	const threadControls = /* @__PURE__ */ jsxs("div", {
 		className: "relative flex shrink-0 items-center gap-1",
 		ref: historyControlsRef,
@@ -2377,65 +2591,92 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 			}),
 			historyOpen && /* @__PURE__ */ jsxs("div", {
 				className: "absolute top-10 right-0 z-30 w-72 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "border-b border-border px-3 py-2 font-medium text-xs",
-					children: t("threads.recent")
-				}), /* @__PURE__ */ jsx("div", {
-					className: "max-h-72 overflow-y-auto p-1",
-					children: threads.map((thread) => /* @__PURE__ */ jsxs("div", {
-						className: cn("group flex min-h-10 items-center gap-1 rounded-md px-2", thread.id === selectedThread.id ? "bg-muted" : "hover:bg-muted/60"),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "border-b border-border px-3 py-2 font-medium text-xs",
+						children: t("threads.recent")
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative border-b border-border p-2",
+						children: [/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+							"aria-label": t("threads.search"),
+							className: "h-8 w-full rounded-md border border-input bg-background pr-2 pl-8 text-xs outline-none placeholder:text-muted-foreground focus:ring-1 focus:ring-ring",
+							onChange: (event) => setThreadSearch(event.currentTarget.value),
+							placeholder: t("threads.search"),
+							type: "search",
+							value: threadSearch
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "max-h-72 overflow-y-auto p-1",
 						children: [
-							editingThreadId === thread.id ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-								autoFocus: true,
-								className: "min-w-0 flex-1 rounded border border-input bg-background px-1.5 py-1 text-xs outline-none focus:ring-1 focus:ring-ring",
-								onBlur: () => void commitEditingThread(),
-								onChange: (event) => setEditingTitle(event.currentTarget.value),
-								onKeyDown: (event) => {
-									if (event.key === "Enter") {
-										event.preventDefault();
-										commitEditingThread();
-									}
-									if (event.key === "Escape") {
-										event.preventDefault();
-										event.stopPropagation();
-										cancelEditingThread();
-										setHistoryOpen(false);
-									}
-								},
-								value: editingTitle
-							}), thread.titleMode === "manual" && /* @__PURE__ */ jsxs("button", {
-								"aria-label": t("threads.automaticTitle"),
-								className: "flex h-7 shrink-0 items-center gap-1 rounded px-1.5 text-muted-foreground text-xs hover:bg-background hover:text-foreground",
-								onClick: () => void setAutomaticTitle(thread),
-								onMouseDown: (event) => event.preventDefault(),
-								title: t("threads.automaticTitle"),
-								type: "button",
-								children: [/* @__PURE__ */ jsx(SparklesIcon, { className: "size-3" }), /* @__PURE__ */ jsx("span", { children: t("threads.automaticShort") })]
-							})] }) : /* @__PURE__ */ jsx("button", {
-								className: "min-w-0 flex-1 truncate py-2 text-left text-xs",
-								onClick: () => void selectThread(thread),
-								type: "button",
-								children: thread.title
-							}),
-							/* @__PURE__ */ jsx("button", {
-								"aria-label": t("threads.rename", { title: thread.title }),
-								className: "flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 hover:bg-background hover:text-foreground group-hover:opacity-100",
-								onClick: () => beginEditingThread(thread),
-								title: t("threads.renameTitle"),
-								type: "button",
-								children: /* @__PURE__ */ jsx(PencilIcon, { className: "size-3.5" })
+							visibleThreads.map((thread) => /* @__PURE__ */ jsxs("div", {
+								className: cn("group flex min-h-10 items-center gap-1 rounded-md px-2", thread.id === selectedThread.id ? "bg-muted" : "hover:bg-muted/60"),
+								children: [
+									editingThreadId === thread.id ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+										autoFocus: true,
+										className: "min-w-0 flex-1 rounded border border-input bg-background px-1.5 py-1 text-xs outline-none focus:ring-1 focus:ring-ring",
+										onBlur: () => void commitEditingThread(),
+										onChange: (event) => setEditingTitle(event.currentTarget.value),
+										onKeyDown: (event) => {
+											if (event.key === "Enter") {
+												event.preventDefault();
+												commitEditingThread();
+											}
+											if (event.key === "Escape") {
+												event.preventDefault();
+												event.stopPropagation();
+												cancelEditingThread();
+												setHistoryOpen(false);
+											}
+										},
+										value: editingTitle
+									}), thread.titleMode === "manual" && /* @__PURE__ */ jsxs("button", {
+										"aria-label": t("threads.automaticTitle"),
+										className: "flex h-7 shrink-0 items-center gap-1 rounded px-1.5 text-muted-foreground text-xs hover:bg-background hover:text-foreground",
+										onClick: () => void setAutomaticTitle(thread),
+										onMouseDown: (event) => event.preventDefault(),
+										title: t("threads.automaticTitle"),
+										type: "button",
+										children: [/* @__PURE__ */ jsx(SparklesIcon, { className: "size-3" }), /* @__PURE__ */ jsx("span", { children: t("threads.automaticShort") })]
+									})] }) : /* @__PURE__ */ jsx("button", {
+										className: "min-w-0 flex-1 truncate py-2 text-left text-xs",
+										onClick: () => void selectThread(thread),
+										type: "button",
+										children: thread.title
+									}),
+									/* @__PURE__ */ jsx("button", {
+										"aria-label": t("threads.rename", { title: thread.title }),
+										className: "flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 hover:bg-background hover:text-foreground group-hover:opacity-100",
+										onClick: () => beginEditingThread(thread),
+										title: t("threads.renameTitle"),
+										type: "button",
+										children: /* @__PURE__ */ jsx(PencilIcon, { className: "size-3.5" })
+									}),
+									/* @__PURE__ */ jsx("button", {
+										"aria-label": t("threads.delete", { title: thread.title }),
+										className: "flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 hover:bg-background hover:text-foreground group-hover:opacity-100",
+										onClick: () => void deleteThread(thread),
+										title: t("threads.deleteTitle"),
+										type: "button",
+										children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3.5" })
+									})
+								]
+							}, thread.id)),
+							visibleThreads.length === 0 && !loadingOlderThreads && /* @__PURE__ */ jsx("div", {
+								className: "px-3 py-5 text-center text-muted-foreground text-xs",
+								children: t("threads.noMatches")
 							}),
-							/* @__PURE__ */ jsx("button", {
-								"aria-label": t("threads.delete", { title: thread.title }),
-								className: "flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 hover:bg-background hover:text-foreground group-hover:opacity-100",
-								onClick: () => void deleteThread(thread),
-								title: t("threads.deleteTitle"),
+							(nextThreadCursor || loadingOlderThreads) && /* @__PURE__ */ jsx("button", {
+								className: "flex h-9 w-full items-center justify-center rounded-md text-muted-foreground text-xs hover:bg-muted hover:text-foreground disabled:pointer-events-none",
+								disabled: loadingOlderThreads || Boolean(normalizedThreadSearch),
+								onClick: () => void loadOlderThreads(),
 								type: "button",
-								children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3.5" })
+								children: loadingOlderThreads ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mr-1.5 size-3.5 animate-spin" }), normalizedThreadSearch ? t("threads.searching") : t("threads.loadingOlder")] }) : t("threads.loadOlder")
 							})
 						]
-					}, thread.id))
-				})]
+					})
+				]
 			})
 		]
 	});
@@ -2444,6 +2685,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		children: [/* @__PURE__ */ createElement(SurveyAssistantChatPanel, {
 			...sessionProps,
 			embedded,
+			hasEarlierMessages: Boolean(nextMessageCursor),
 			initialLaunch: initialLaunch?.input,
 			initialMessages,
 			key: selectedThread.id,
@@ -2452,6 +2694,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 			onInitialLaunchHandled: handleInitialLaunchHandled,
 			onModelChange: selectModel,
 			onFirstSubmit: handleFirstSubmit,
+			onLoadEarlierMessages: loadEarlierMessages,
 			onTurnSettled: handleTurnSettled,
 			onTurnActiveChange: handleTurnActiveChange,
 			resourceId,