@case-framework/survey-assistant 0.2.3 → 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-3kSE6WtS.mjs";
-import { o as connectSurveyAssistantThreadLauncher } from "./controller-proxy-DY36XFV3.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",
@@ -708,7 +766,7 @@ const Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 const MessageContent = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("w-fit min-w-0 max-w-full break-words text-sm", "group-data-[role=user]:whitespace-pre-wrap group-data-[role=user]:rounded-xl group-data-[role=user]:border group-data-[role=user]:border-blue-200/70 group-data-[role=user]:bg-blue-50 group-data-[role=user]:px-3 group-data-[role=user]:py-2 group-data-[role=user]:text-foreground group-data-[role=user]:shadow-xs dark:group-data-[role=user]:border-blue-800/60 dark:group-data-[role=user]:bg-blue-950/50", "group-data-[role=assistant]:text-foreground", className),
+	className: cn("w-fit min-w-0 max-w-full break-words text-sm", "group-data-[role=user]:whitespace-pre-wrap group-data-[role=user]:rounded-xl group-data-[role=user]:border group-data-[role=user]:border-blue-200/70 group-data-[role=user]:bg-blue-50/80 group-data-[role=user]:px-3 group-data-[role=user]:py-2 group-data-[role=user]:text-foreground group-data-[role=user]:shadow-xs dark:group-data-[role=user]:border-blue-800/60 dark:group-data-[role=user]:bg-blue-950/50", "group-data-[role=assistant]:text-foreground", className),
 	...props,
 	children
 });
@@ -739,13 +797,18 @@ const usePromptInput = () => {
 	if (!context) throw new Error("PromptInput components must be used within PromptInput.");
 	return context;
 };
-const PromptInput = ({ attachmentsDisabled = false, children, className, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onSubmit, ...props }) => {
-	const [value, setValue] = useState("");
+const PromptInput = ({ attachmentsDisabled = false, children, className, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onSubmit, onValueChange, value: controlledValue, ...props }) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState("");
 	const [files, setFiles] = useState([]);
 	const [isDraggingFiles, setIsDraggingFiles] = useState(false);
 	const [unsupportedFileNames, setUnsupportedFileNames] = useState([]);
 	const fileDragDepthRef = useRef(0);
 	const t = useSurveyAssistantTranslation();
+	const value = controlledValue ?? uncontrolledValue;
+	const setValue = useCallback((nextValue) => {
+		if (controlledValue === void 0) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}, [controlledValue, onValueChange]);
 	const addFiles = useCallback((fileList) => {
 		const nextFiles = Array.from(fileList ?? []);
 		const supportedFiles = nextFiles.filter(isSupportedFile);
@@ -947,15 +1010,6 @@ const PromptInputSubmit = ({ className, status, onStop, onClick, ...props }) =>
 	});
 };
 //#endregion
-//#region src/ui/internal/tool-technical-details.ts
-const formatOmittedLength = (length) => length.toLocaleString("en-US");
-const stringifyToolTechnicalDetails = (value) => JSON.stringify(value, function redactEmbeddedBinary(key, currentValue) {
-	const parent = this && typeof this === "object" ? this : void 0;
-	if (key === "data" && typeof currentValue === "string" && parent?.type === "embedded" && parent.encoding === "base64") return `[embedded base64 omitted: ${formatOmittedLength(currentValue.length)} characters]`;
-	if (typeof currentValue === "string" && currentValue.length > 512 && /^data:[^;,]+;base64,/.test(currentValue)) return `[base64 data URL omitted: ${formatOmittedLength(currentValue.length)} characters]`;
-	return currentValue;
-}, 2);
-//#endregion
 //#region src/ui/internal/select.tsx
 function Select$1({ ...props }) {
 	return /* @__PURE__ */ jsx(Select.Root, {
@@ -1030,6 +1084,88 @@ function SelectScrollDownButton({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/ui/survey-assistant-prompt-input.tsx
+const SurveyAssistantModelSelect = ({ disabled = false, modelId, models, onModelChange }) => {
+	const t = useSurveyAssistantTranslation();
+	const selectedModelLabel = models.find((model) => model.id === modelId)?.label ?? modelId ?? t("input.defaultModel");
+	if (models.length > 1) return /* @__PURE__ */ jsxs(Select$1, {
+		disabled,
+		onValueChange: onModelChange,
+		value: modelId ?? "",
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			"aria-label": t("input.model"),
+			className: "h-8 min-w-0 max-w-48 gap-1.5 border-0 bg-transparent px-2 text-xs shadow-none hover:bg-muted hover:text-foreground focus-visible:ring-1",
+			size: "sm",
+			title: modelId,
+			children: [/* @__PURE__ */ jsx(BotIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx(SelectValue, {})]
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			align: "end",
+			className: "min-w-52 rounded-lg border-border p-0 shadow-lg",
+			position: "popper",
+			children: models.map((model) => /* @__PURE__ */ jsx(SelectItem, {
+				className: "min-h-9 rounded-md px-2 py-2 text-xs focus:bg-muted",
+				title: model.id,
+				value: model.id,
+				children: model.label
+			}, model.id))
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-8 min-w-0 max-w-48 items-center gap-1.5 px-2 text-muted-foreground text-xs",
+		title: modelId,
+		children: [/* @__PURE__ */ jsx(BotIcon, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: selectedModelLabel
+		})]
+	});
+};
+const SurveyAssistantPromptInput = ({ attachmentsDisabled = false, attachmentButtonClassName, className, disabled = false, footerClassName, formProps, modelDisabled = false, modelId, models, onModelChange, onStop, onSubmit, onValueChange, placeholder, status, textareaClassName, textareaProps, textareaRef, value }) => {
+	const t = useSurveyAssistantTranslation();
+	const canStop = Boolean(onStop) && (status === "submitted" || status === "streaming");
+	return /* @__PURE__ */ jsxs(PromptInput, {
+		...formProps,
+		attachmentsDisabled: attachmentsDisabled || disabled,
+		className: cn("rounded-xl border-border bg-background shadow-sm", className),
+		onSubmit,
+		onValueChange,
+		value,
+		children: [/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
+			...textareaProps,
+			className: cn("min-h-20 px-3 py-2 disabled:cursor-not-allowed disabled:text-muted-foreground", textareaClassName),
+			disabled,
+			placeholder: placeholder ?? t("input.placeholder"),
+			ref: textareaRef
+		}) }), /* @__PURE__ */ jsxs(PromptInputFooter, {
+			className: cn("justify-between border-0 px-1.5 pt-0 pb-1.5", footerClassName),
+			children: [/* @__PURE__ */ jsx(PromptInputAttachmentButton, {
+				className: attachmentButtonClassName,
+				disabled: attachmentsDisabled || disabled
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center justify-end gap-1",
+				children: [/* @__PURE__ */ jsx(SurveyAssistantModelSelect, {
+					disabled: disabled || modelDisabled,
+					modelId,
+					models,
+					onModelChange
+				}), /* @__PURE__ */ jsx(PromptInputSubmit, {
+					disabled: disabled && !canStop,
+					onStop,
+					status
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/ui/internal/tool-technical-details.ts
+const formatOmittedLength = (length) => length.toLocaleString("en-US");
+const stringifyToolTechnicalDetails = (value) => JSON.stringify(value, function redactEmbeddedBinary(key, currentValue) {
+	const parent = this && typeof this === "object" ? this : void 0;
+	if (key === "data" && typeof currentValue === "string" && parent?.type === "embedded" && parent.encoding === "base64") return `[embedded base64 omitted: ${formatOmittedLength(currentValue.length)} characters]`;
+	if (typeof currentValue === "string" && currentValue.length > 512 && /^data:[^;,]+;base64,/.test(currentValue)) return `[base64 data URL omitted: ${formatOmittedLength(currentValue.length)} characters]`;
+	return currentValue;
+}, 2);
+//#endregion
 //#region src/ui/internal/code-block.tsx
 const isItalic = (fontStyle) => fontStyle && fontStyle & 1;
 const isBold = (fontStyle) => fontStyle && fontStyle & 2;
@@ -1273,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;
@@ -1321,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"
 	};
 };
@@ -1349,7 +1521,7 @@ const SurveyAssistantToolOutputSummary = ({ applyResult, output }) => {
 		const statusLabel = status === "applied" ? t("changes.applied") : status === "stale" ? t("changes.stale") : status === "failed" ? t("changes.failed") : isValid ? t("changes.prepared") : t("changes.rejected");
 		const statusMessage = applyResult?.message ?? unwrappedOutput.summary;
 		return /* @__PURE__ */ jsxs("div", {
-			className: cn("relative rounded-md border px-2.5 py-2 text-xs", isPositiveStatus ? "border-emerald-200/80 bg-emerald-50/60 text-emerald-950" : status === "stale" ? "border-amber-200 bg-amber-50 text-amber-900" : "border-red-200 bg-red-50 text-red-900"),
+			className: cn("relative rounded-md border px-2.5 py-2 text-xs", isPositiveStatus ? "border-emerald-200/70 bg-emerald-50/40 text-emerald-950" : status === "stale" ? "border-amber-200/70 bg-amber-50/40 text-amber-900" : "border-red-200/70 bg-red-50/40 text-red-900"),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 font-medium",
@@ -1447,11 +1619,20 @@ const SurveyAssistantToolStep = ({ applyResultsByChangeId, terminalTurnStatus, p
 	const errorText = getToolErrorText(part);
 	const changeSet = output === void 0 ? null : getChangeSet(output);
 	const applyResult = changeSet ? applyResultsByChangeId[changeSet.id] : void 0;
+	const changeHasError = changeSet?.status === "rejected" || applyResult?.status === "rejected" || applyResult?.status === "failed";
 	const title = changeSet ? toolName === "survey_expression" ? t("activity.expressionChange") : t("activity.surveyChange") : getToolTitle(t, toolName, part.state);
 	const meta = terminalTurnStatus && toolStatusMeta[part.state].stepStatus === "active" ? terminalTurnStatus === "aborted" ? getStoppedToolStatusMeta(t) : {
 		icon: /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3 text-red-600" }),
 		label: t("activity.failed"),
 		stepStatus: "complete"
+	} : changeHasError ? {
+		icon: /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3 text-red-900" }),
+		label: null,
+		stepStatus: "complete"
+	} : applyResult?.status === "stale" ? {
+		icon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-3 text-amber-600" }),
+		label: null,
+		stepStatus: "complete"
 	} : toolStatusMeta[part.state];
 	const metaTitle = meta.label ?? (part.state === "output-denied" ? t("activity.skipped") : part.state === "output-error" ? t("activity.failed") : meta.stepStatus === "active" ? t("activity.workingShort") : t("activity.done"));
 	const [detailsOpen, setDetailsOpen] = useState(part.state === "output-error");
@@ -1483,16 +1664,16 @@ const SurveyAssistantToolStep = ({ applyResultsByChangeId, terminalTurnStatus, p
 			onOpenChange: setDetailsOpen,
 			open: detailsOpen,
 			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-				className: "flex items-center gap-1 text-muted-foreground text-xs hover:text-foreground",
+				className: "-ml-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-[11px] text-muted-foreground/80 transition-colors hover:bg-background/60 hover:text-foreground",
 				children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-3 transition-transform", detailsOpen && "rotate-90") }), t(detailsOpen ? "activity.hideTechnicalDetails" : "activity.technicalDetails")]
 			}), /* @__PURE__ */ jsxs(CollapsibleContent, {
-				className: "mt-2 space-y-2",
+				className: "mt-1.5 space-y-1.5",
 				children: [part.input !== void 0 && /* @__PURE__ */ jsx(CodeBlock, {
-					className: "border-border/50 bg-muted/30",
+					className: "border-border/60 bg-background/70 [&_code]:text-xs [&_pre]:p-2.5 [&_pre]:text-xs",
 					code: stringifyToolTechnicalDetails(part.input),
 					language: "json"
 				}), (output !== void 0 || errorText) && /* @__PURE__ */ jsx(CodeBlock, {
-					className: cn("bg-muted/30", errorText ? "border-destructive/30" : "border-border/50"),
+					className: cn("bg-background/70 [&_code]:text-xs [&_pre]:p-2.5 [&_pre]:text-xs", errorText ? "border-destructive/25" : "border-border/60"),
 					code: errorText ?? stringifyToolTechnicalDetails(output),
 					language: "json"
 				})]
@@ -1625,7 +1806,7 @@ const SurveyAssistantMessageParts = ({ applyResultsByChangeId, isLastMessage, is
 		const isChainActive = isLastMessage && isStreaming && isLastBlock;
 		return /* @__PURE__ */ jsxs(ChainOfThought, {
 			autoClose: true,
-			className: "w-full rounded-md bg-muted/35 px-2 py-1.5",
+			className: "w-full rounded-md bg-muted/60 px-2 py-1.5",
 			defaultDuration: persistedDuration,
 			defaultOpen: isChainActive,
 			duration: isChainActive ? void 0 : persistedDuration,
@@ -1721,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,
@@ -1741,7 +1923,6 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 	const hasSubmittedMessageRef = useRef((initialMessages?.length ?? 0) > 0);
 	const showAssistantError = Boolean(authorizationError) || Boolean(error);
 	const assistantErrorPresentation = getAssistantErrorPresentation(authorizationError ?? error, t);
-	const selectedModelLabel = models.find((model) => model.id === modelId)?.label ?? modelId ?? t("input.defaultModel");
 	const lastMessage = messages.at(-1);
 	const isAssistantTurnActive = isSurveyAssistantTurnActive({
 		isStreaming,
@@ -1750,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) {
@@ -1815,8 +2010,10 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 	}), [handleSubmit]);
 	useEffect(() => {
 		if (!initialLaunch) return;
+		if (initialLaunch.modelId) onModelChange(initialLaunch.modelId);
 		if (submit({
 			files: initialLaunch.files ?? [],
+			modelId: initialLaunch.modelId,
 			text: initialLaunch.prompt,
 			uiContext: initialLaunch.uiContext
 		})) {
@@ -1830,6 +2027,7 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 		initialLaunch,
 		onFirstSubmit,
 		onInitialLaunchHandled,
+		onModelChange,
 		submit
 	]);
 	return /* @__PURE__ */ jsxs("aside", {
@@ -1837,7 +2035,7 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 		className: cn("flex h-full min-h-0 flex-col overflow-visible bg-background", !embedded && "rounded-xl border border-border shadow-sm"),
 		children: [
 			/* @__PURE__ */ jsxs("header", {
-				className: "box-content flex h-9 shrink-0 items-center justify-between gap-2 border-b border-border bg-muted/20 px-2.5",
+				className: "box-content flex h-9 shrink-0 items-center justify-between gap-2 border-b border-border bg-background px-2.5",
 				children: [/* @__PURE__ */ jsx(SurveyAssistantHeaderIdentity, {
 					indicatorClassName: showAssistantError || state === "failed" ? "bg-destructive" : isAssistantTurnActive ? "animate-pulse bg-blue-500" : state === "aborted" ? "bg-muted-foreground" : "bg-emerald-500",
 					status: sessionStatusLabel,
@@ -1845,7 +2043,7 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 				}), threadControls]
 			}),
 			/* @__PURE__ */ jsxs(Conversation, {
-				className: "min-h-0",
+				className: "min-h-0 bg-(--surface-bg-color)",
 				children: [/* @__PURE__ */ jsx(ConversationContent, {
 					className: "gap-3 px-3 py-2.5",
 					children: messages.length === 0 ? /* @__PURE__ */ jsx(ConversationEmptyState, {
@@ -1854,21 +2052,21 @@ 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",
 									children: assistantQuickPrompts.map(({ label, description, icon: Icon, prompt }) => /* @__PURE__ */ jsxs("button", {
-										className: "group flex w-full items-center gap-2.5 rounded-lg border border-border bg-background px-2.5 py-2 text-left transition-colors hover:border-foreground/20 hover:bg-muted/50",
+										className: "group flex w-full items-center gap-2.5 rounded-lg border border-border bg-popover px-2.5 py-2 text-left shadow-xs transition-colors hover:border-foreground/20 hover:bg-muted/60",
 										onClick: () => handleQuickPrompt(prompt),
 										type: "button",
 										children: [
@@ -1892,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", {
@@ -1948,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",
@@ -1965,58 +2173,21 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "shrink-0 border-t border-border bg-muted/20 p-2",
-				children: /* @__PURE__ */ jsxs(PromptInput, {
-					"aria-busy": isAssistantTurnActive,
-					attachmentsDisabled: isAssistantTurnActive,
-					className: cn("rounded-xl border-border bg-background shadow-sm transition-colors", isAssistantTurnActive && "border-border/60 bg-muted/50 shadow-none"),
+				className: "shrink-0 border-t border-border bg-background p-2",
+				children: /* @__PURE__ */ jsx(SurveyAssistantPromptInput, {
+					attachmentButtonClassName: "size-8",
+					className: cn("rounded-xl border-border bg-popover shadow-sm transition-colors", isAssistantTurnActive && "border-border/60 bg-muted/50 shadow-none"),
+					disabled: isAssistantTurnActive,
+					footerClassName: cn("transition-colors", isAssistantTurnActive && "bg-muted/30"),
+					formProps: { "aria-busy": isAssistantTurnActive },
+					modelId,
+					models,
+					onModelChange,
+					onStop: stop,
 					onSubmit: handleSubmit,
-					children: [/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
-						className: "min-h-11 max-h-28 px-3 pt-2.5 pb-1.5 transition-colors disabled:cursor-not-allowed disabled:text-muted-foreground disabled:placeholder:text-muted-foreground/60",
-						disabled: isAssistantTurnActive,
-						placeholder: t("input.placeholder"),
-						ref: promptTextareaRef
-					}) }), /* @__PURE__ */ jsxs(PromptInputFooter, {
-						className: cn("justify-between border-0 px-1.5 pt-0 pb-1.5 transition-colors", isAssistantTurnActive && "bg-muted/30"),
-						children: [/* @__PURE__ */ jsx(PromptInputAttachmentButton, {
-							className: "size-8",
-							disabled: isAssistantTurnActive
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex min-w-0 items-center justify-end gap-1",
-							children: [models.length > 1 && modelId ? /* @__PURE__ */ jsxs(Select$1, {
-								disabled: isAssistantTurnActive,
-								onValueChange: onModelChange,
-								value: modelId,
-								children: [/* @__PURE__ */ jsxs(SelectTrigger, {
-									"aria-label": t("input.model"),
-									className: "h-8 min-w-0 max-w-48 gap-1.5 border-0 bg-transparent px-2 text-xs shadow-none hover:bg-muted hover:text-foreground focus-visible:ring-1",
-									size: "sm",
-									title: modelId,
-									children: [/* @__PURE__ */ jsx(BotIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx(SelectValue, {})]
-								}), /* @__PURE__ */ jsx(SelectContent, {
-									align: "end",
-									className: "min-w-52 rounded-lg border-border p-0 shadow-lg",
-									position: "popper",
-									children: models.map((model) => /* @__PURE__ */ jsx(SelectItem, {
-										className: "min-h-9 rounded-md px-2 py-2 text-xs focus:bg-muted",
-										title: model.id,
-										value: model.id,
-										children: model.label
-									}, model.id))
-								})]
-							}) : /* @__PURE__ */ jsxs("div", {
-								className: "flex h-8 min-w-0 max-w-48 items-center gap-1.5 px-2 text-muted-foreground text-xs",
-								title: modelId,
-								children: [/* @__PURE__ */ jsx(BotIcon, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
-									className: "truncate",
-									children: selectedModelLabel
-								})]
-							}), /* @__PURE__ */ jsx(PromptInputSubmit, {
-								onStop: stop,
-								status
-							})]
-						})]
-					})]
+					status,
+					textareaClassName: "min-h-11 max-h-28 px-3 pt-2.5 pb-1.5 transition-colors disabled:placeholder:text-muted-foreground/60",
+					textareaRef: promptTextareaRef
 				})
 			})
 		]
@@ -2029,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);
@@ -2044,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);
 		}
@@ -2072,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;
@@ -2092,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) => {
@@ -2115,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) => {
@@ -2222,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;
@@ -2289,7 +2553,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 	if (loadingThread || !selectedThread) return /* @__PURE__ */ jsxs("aside", {
 		className: cn("flex h-full min-h-0 flex-col overflow-visible bg-background", !embedded && "rounded-xl border border-border shadow-sm"),
 		children: [/* @__PURE__ */ jsx("header", {
-			className: "box-content flex h-9 shrink-0 items-center border-b border-border bg-muted/20 px-2.5",
+			className: "box-content flex h-9 shrink-0 items-center border-b border-border bg-background px-2.5",
 			children: /* @__PURE__ */ jsx(SurveyAssistantHeaderIdentity, {
 				indicatorClassName: "animate-pulse bg-blue-500",
 				status: t("panel.loadingChats"),
@@ -2300,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,
@@ -2325,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))
-				})]
+					})
+				]
 			})
 		]
 	});
@@ -2392,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,
@@ -2400,6 +2694,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 			onInitialLaunchHandled: handleInitialLaunchHandled,
 			onModelChange: selectModel,
 			onFirstSubmit: handleFirstSubmit,
+			onLoadEarlierMessages: loadEarlierMessages,
 			onTurnSettled: handleTurnSettled,
 			onTurnActiveChange: handleTurnActiveChange,
 			resourceId,
@@ -2408,7 +2703,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 			threadId: selectedThread.id,
 			threadTitle: selectedThread.title
 		}), threadError && /* @__PURE__ */ jsxs("div", {
-			className: "absolute right-3 bottom-3 left-3 z-40 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-xs shadow-lg",
+			className: "absolute right-3 bottom-3 left-3 z-40 rounded-lg border border-destructive/20 bg-popover px-3 py-2 text-xs shadow-lg",
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "font-medium",
@@ -2440,6 +2735,69 @@ const SurveyAssistantPanel = ({ language, localizations, ...props }) => /* @__PU
 	})
 });
 //#endregion
+//#region src/ui/survey-assistant-thread-launcher-prompt.tsx
+const SurveyAssistantThreadLauncherPromptContent = ({ className, disabled = false, modelCatalogApi, modelStorageKey, onError, onModelCatalogError, onSubmitted, onValueChange, placeholder, textareaClassName, textareaProps, textareaRef, threadLauncher, uiContext, value }) => {
+	const catalog = useSurveyAssistantModelCatalog({
+		api: modelCatalogApi,
+		storageKey: modelStorageKey
+	});
+	const [submitting, setSubmitting] = useState(false);
+	useEffect(() => {
+		if (catalog.error) onModelCatalogError?.(catalog.error);
+	}, [catalog.error, onModelCatalogError]);
+	const submit = useCallback(async ({ files, text }) => {
+		if (disabled || submitting) return false;
+		setSubmitting(true);
+		try {
+			await threadLauncher.startThread({
+				files,
+				modelId: catalog.modelId,
+				prompt: text,
+				uiContext
+			});
+			onSubmitted();
+			return true;
+		} catch (error) {
+			onError?.(error);
+			return false;
+		} finally {
+			setSubmitting(false);
+		}
+	}, [
+		catalog.modelId,
+		disabled,
+		onError,
+		onSubmitted,
+		submitting,
+		threadLauncher,
+		uiContext
+	]);
+	return /* @__PURE__ */ jsx(SurveyAssistantPromptInput, {
+		attachmentsDisabled: submitting,
+		className,
+		disabled: disabled || submitting,
+		modelDisabled: catalog.loading || submitting,
+		modelId: catalog.modelId,
+		models: catalog.models,
+		onModelChange: catalog.selectModel,
+		onSubmit: submit,
+		onValueChange,
+		placeholder,
+		textareaClassName,
+		textareaProps,
+		textareaRef,
+		value
+	});
+};
+const SurveyAssistantThreadLauncherPrompt = ({ language, localizations, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: "case-survey-assistant",
+	children: /* @__PURE__ */ jsx(SurveyAssistantLocalizationProvider, {
+		language,
+		localizations,
+		children: /* @__PURE__ */ jsx(SurveyAssistantThreadLauncherPromptContent, { ...props })
+	})
+});
+//#endregion
 //#region src/ui/connected-survey-assistant-panel.tsx
 const ConnectedSurveyAssistantPanel = ({ modelCatalogApi, modelStorageKey, onModelCatalogError, onModelChange, ...props }) => {
 	const catalog = useSurveyAssistantModelCatalog({
@@ -2458,6 +2816,6 @@ const ConnectedSurveyAssistantPanel = ({ modelCatalogApi, modelStorageKey, onMod
 	});
 };
 //#endregion
-export { ConnectedSurveyAssistantPanel, SurveyAssistantLocalizationProvider, SurveyAssistantPanel, defaultSurveyAssistantLocalizations, surveyAssistantEnMessages, surveyAssistantNlMessages, useSurveyAssistantTranslation };
+export { ConnectedSurveyAssistantPanel, SurveyAssistantLocalizationProvider, SurveyAssistantPanel, SurveyAssistantPromptInput, SurveyAssistantThreadLauncherPrompt, defaultSurveyAssistantLocalizations, surveyAssistantEnMessages, surveyAssistantNlMessages, useSurveyAssistantTranslation };
 
 //# sourceMappingURL=ui.mjs.map