Initial commit

BRANCHES.md

@@ -0,0 +1,180 @@
+# Git Branches Guide
+
+## Current Branches
+
+### `feature/personas` Branch
+**Created:** October 3, 2025  
+**Purpose:** Complete persona system implementation replacing the old customPrompts system  
+**Status:** Ready for testing and review  
+
+**What's included (24 commits):**
+- Persona type definition and default personas (healthcare debate perspectives)
+- Database migration to replace customPrompts with personas
+- PersonaSelector component for quick switching
+- Personas gallery page with search, edit, and activation
+- Full CRUD persona editor in settings
+- Tab-based settings navigation (Models, Personas, Settings)
+- Integration with conversation creation and message generation
+- UI redesign for model/persona display in chat window
+
+---
+
+## How to Push to the Feature Branch
+
+From your current state (after rebase), push to the feature branch:
+
+```bash
+cd /c/Dev/Plurality/chat
+git push origin main:feature/personas
+```
+
+This creates a new branch called `feature/personas` on the remote with all your commits.
+
+---
+
+## How to Test the Feature Branch
+
+**On another machine or after switching:**
+
+```bash
+# Switch to the feature branch
+git checkout feature/personas
+
+# Pull latest changes
+git pull origin feature/personas
+
+# Install dependencies (if needed)
+npm install
+
+# Run the application
+npm run dev
+```
+
+---
+
+## How to Merge Back to Main
+
+Once the feature is tested and approved, you have two options:
+
+### Option 1: Merge via Pull Request (Recommended)
+1. Create a Pull Request on GitHub/GitLab from `feature/personas` to `main`
+2. Request code review from team members
+3. Once approved, merge using the platform's merge button
+4. Delete the feature branch after merge
+
+### Option 2: Manual Merge (Command Line)
+```bash
+# Make sure you're on main and it's up to date
+git checkout main
+git pull origin main
+
+# Merge the feature branch
+git merge feature/personas
+
+# If there are conflicts, resolve them, then:
+git add .
+git commit -m "Resolve merge conflicts"
+
+# Push to main
+git push origin main
+
+# Delete the feature branch (optional)
+git branch -d feature/personas
+git push origin --delete feature/personas
+```
+
+---
+
+## Common Branch Commands
+
+### See all branches
+```bash
+git branch -a
+```
+
+### Switch branches
+```bash
+git checkout branch-name
+```
+
+### Create a new branch
+```bash
+git checkout -b new-branch-name
+```
+
+### Update your branch with latest main
+```bash
+# While on your feature branch
+git fetch origin
+git rebase origin/main
+```
+
+### See what's different between branches
+```bash
+git diff main..feature/personas
+```
+
+### Undo/Reset (if needed)
+```bash
+# Undo local changes
+git reset --hard origin/feature/personas
+
+# Go back to a specific commit
+git reset --hard COMMIT_HASH
+```
+
+---
+
+## Branching Best Practices
+
+1. **One feature per branch** - Keep branches focused on a single feature or fix
+2. **Descriptive names** - Use names like `feature/personas`, `fix/login-bug`, `refactor/api-cleanup`
+3. **Regular updates** - Rebase with main regularly to avoid large conflicts later
+4. **Small commits** - Make frequent, logical commits with clear messages
+5. **Clean up** - Delete merged branches to keep the repository tidy
+6. **Never force push to main** - Use `--force` only on feature branches and only when necessary
+
+---
+
+## Troubleshooting
+
+### "Your branch has diverged"
+This happens when remote and local have different commits. Solutions:
+```bash
+# If you want to keep your local changes
+git rebase origin/branch-name
+
+# If you want to match remote exactly
+git reset --hard origin/branch-name
+```
+
+### Merge Conflicts
+When Git can't automatically merge:
+1. Open conflicted files (marked with `<<<<<<<`, `=======`, `>>>>>>>`)
+2. Edit to keep the correct code
+3. Remove conflict markers
+4. Stage the resolved files: `git add filename`
+5. Continue: `git rebase --continue` or `git commit`
+
+### Need to switch branches but have uncommitted changes
+```bash
+# Save changes for later
+git stash
+
+# Switch branches
+git checkout other-branch
+
+# Come back and restore changes
+git checkout original-branch
+git stash pop
+```
+
+---
+
+## Notes for This Project
+
+- **Main branch** should always be deployable
+- Test thoroughly on feature branches before merging
+- The persona feature includes a database migration - ensure it runs successfully before merging
+- Breaking changes: This feature removes `customPrompts` - ensure no other code depends on it
+

src/lib/components/CopyToClipBoardBtn.svelte

@@ -2,7 +2,6 @@
 	import { onDestroy } from "svelte";
 
 	import CarbonCopy from "~icons/carbon/copy";
-	import Tooltip from "./Tooltip.svelte";
 
 	interface Props {
 		classNames?: string;
@@ -56,7 +55,7 @@
 			}
 			timeout = setTimeout(() => {
 				isSuccess = false;
-			}, 1000);
+			}, 500);
 		} catch (err) {
 			console.error(err);
 		}
@@ -78,13 +77,9 @@
 		handleClick();
 	}}
 >
-	<div class="relative">
+	<div class="relative transition-transform duration-200 {isSuccess ? 'scale-125' : 'scale-100'}">
 		{#if children}{@render children()}{:else}
 			<CarbonCopy class={iconClassNames} />
 		{/if}
-
-		{#if showTooltip}
-			<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
-		{/if}
 	</div>
 </button>

src/lib/components/PersonaSelector.svelte

@@ -3,20 +3,80 @@
 	import { base } from "$app/paths";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import CarbonUser from "~icons/carbon/user";
+	import CarbonEdit from "~icons/carbon/edit";
 
 	const settings = useSettingsStore();
 
-	let activePersona = $derived(
-		$settings.personas.find((p) => p.id === $settings.activePersona) ?? $settings.personas[0]
+	let activePersonas = $derived(
+		$settings.activePersonas
+			.map(id => $settings.personas.find((p) => p.id === id))
+			.filter(Boolean)
 	);
+	
+	let displayText = $derived(() => {
+		if (activePersonas.length === 0) return "No active personas";
+		if (activePersonas.length === 1) return activePersonas[0]?.name ?? "Default";
+		return `${activePersonas.length} personas`;
+	});
+
+	let showDropdown = $state(false);
+	let hideTimeout: number | undefined = $state();
+
+	function handleMouseEnter() {
+		if (hideTimeout) {
+			clearTimeout(hideTimeout);
+			hideTimeout = undefined;
+		}
+		if (activePersonas.length > 1) {
+			showDropdown = true;
+		}
+	}
+
+	function handleMouseLeave() {
+		hideTimeout = window.setTimeout(() => {
+			showDropdown = false;
+		}, 100);
+	}
 </script>
 
-<button
-	class="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-700 shadow-sm hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-	onclick={() => goto(`${base}/settings/personas`)}
-	title="Manage personas"
->
-	<CarbonUser class="text-xs" />
-	<span class="max-w-[150px] truncate">{activePersona?.name ?? "Default"}</span>
-</button>
+<div class="relative">
+	<button
+		class="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-400 shadow-sm hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700"
+		onclick={() => goto(`${base}/settings/personas/${$settings.activePersonas[0] || $settings.personas[0]?.id || ''}`)}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		title="{activePersonas.length === 1 ? 'Manage personas' : ''}"
+	>
+		<CarbonUser class="text-xs" />
+		<span class="max-w-[150px] truncate">{displayText()}</span>
+	</button>
+
+	{#if showDropdown && activePersonas.length > 1}
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<div
+			role="menu"
+			tabindex="-1"
+			class="absolute bottom-full left-0 mb-1 min-w-[200px] animate-in fade-in slide-in-from-bottom-2 duration-300 rounded-lg border border-gray-300 bg-white py-1.5 shadow-lg dark:border-gray-600 dark:bg-gray-800"
+			onmouseenter={handleMouseEnter}
+			onmouseleave={handleMouseLeave}
+		>
+			<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 dark:text-gray-400">
+				Active Personas
+			</div>
+			{#each activePersonas as persona (persona?.id)}
+				<button
+					type="button"
+					class="group flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm text-gray-700 transition-all duration-200 hover:bg-gray-100 hover:pl-4 dark:text-gray-300 dark:hover:bg-gray-700"
+					onclick={() => goto(`${base}/settings/personas/${persona?.id || ''}`)}
+				>
+					<div class="flex items-center gap-2 truncate">
+						<div class="size-1.5 flex-shrink-0 rounded-full bg-black dark:bg-white"></div>
+						<span class="truncate">{persona?.name ?? "Unknown"}</span>
+					</div>
+					<CarbonEdit class="size-3.5 flex-shrink-0 text-gray-400 opacity-0 transition-opacity duration-200 group-hover:opacity-100 dark:text-gray-500" />
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
 

src/lib/components/chat/ChatInput.svelte

@@ -99,7 +99,7 @@
 		rows="1"
 		tabindex="0"
 		inputmode="text"
-		class="scrollbar-custom max-h-[4lh] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent px-2.5 py-2.5 outline-none focus:ring-0 focus-visible:ring-0 sm:px-3 md:max-h-[8lh]"
+		class="scrollbar-custom max-h-[4lh] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent px-2.5 py-2.5 outline-none placeholder:text-gray-400 focus:ring-0 focus-visible:ring-0 dark:placeholder:text-gray-500 sm:px-3 md:max-h-[8lh]"
 		class:text-gray-400={disabled}
 		bind:value
 		bind:this={textareaElement}

src/lib/components/chat/ChatIntroduction.svelte

@@ -73,7 +73,7 @@
 					</div>
 				</div>
 				<a
-					href="{base}/settings/{currentModel.id}"
+					href="{base}/settings/models/{currentModel.id}"
 					aria-label="Settings"
 					class="btn ml-auto flex h-7 w-7 self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
 					><IconGear /></a

src/lib/components/chat/ChatMessage.svelte

@@ -21,6 +21,8 @@
 	import OpenReasoningResults from "./OpenReasoningResults.svelte";
 	import Alternatives from "./Alternatives.svelte";
 	import MessageAvatar from "./MessageAvatar.svelte";
+	import PersonaResponseCarousel from "./PersonaResponseCarousel.svelte";
+	import { THINK_BLOCK_REGEX } from "$lib/constants/thinkBlockRegex";
 
 	interface Props {
 		message: Message;
@@ -31,7 +33,10 @@
 		alternatives?: Message["id"][];
 		editMsdgId?: Message["id"] | null;
 		isLast?: boolean;
-		onretry?: (payload: { id: Message["id"]; content?: string }) => void;
+		personaName?: string;
+		personaOccupation?: string;
+		personaStance?: string;
+		onretry?: (payload: { id: Message["id"]; content?: string; personaId?: string }) => void;
 		onshowAlternateMsg?: (payload: { id: Message["id"] }) => void;
 	}
 
@@ -44,6 +49,9 @@
 		alternatives = [],
 		editMsdgId = $bindable(null),
 		isLast = false,
+		personaName,
+		personaOccupation,
+		personaStance,
 		onretry,
 		onshowAlternateMsg,
 	}: Props = $props();
@@ -84,8 +92,6 @@
 	// const urlNotTrailing = $derived(page.url.pathname.replace(/\/$/, ""));
 	// let downloadLink = $derived(urlNotTrailing + `/message/${message.id}/prompt`);
 
-	// Zero-config reasoning autodetection: detect <think> blocks in content
-	const THINK_BLOCK_REGEX = /(<think>[\s\S]*?(?:<\/think>|$))/g;
 	let thinkSegments = $derived.by(() => message.content.split(THINK_BLOCK_REGEX));
 	let hasServerReasoning = $derived(
 		reasoningUpdates &&
@@ -128,13 +134,40 @@
 		onclick={() => (isTapped = !isTapped)}
 		onkeydown={() => (isTapped = !isTapped)}
 	>
-		<MessageAvatar
-			classNames="mt-5 size-3.5 flex-none select-none rounded-full shadow-lg max-sm:hidden"
-			animating={isLast && loading}
-		/>
+	<MessageAvatar
+		classNames="mt-5 size-3.5 flex-none select-none rounded-full shadow-lg max-sm:hidden"
+		animating={isLast && loading}
+	/>
+	
+	{#if message.personaResponses && message.personaResponses.length > 0}
+		<!-- Multi-persona mode: no outer container, just carousel -->
+		<div bind:this={contentEl} class="flex-1">
+			<PersonaResponseCarousel 
+				personaResponses={message.personaResponses} 
+				loading={isLast && loading}
+				onretry={(personaId: string) => onretry?.({ id: message.id, content: undefined, personaId })}
+			/>
+		</div>
+	{:else}
 		<div
 			class="relative flex min-w-[60px] flex-col gap-2 break-words rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 prose-pre:my-2 dark:border-gray-800 dark:from-gray-800/80 dark:text-gray-300"
 		>
+			<!-- Persona Name Header (for single-persona mode) -->
+			{#if personaName}
+				<div class="mb-2 flex items-start justify-between border-b border-gray-200 pb-2 dark:border-gray-700">
+					<div>
+						<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+							{personaName}
+						</h3>
+						{#if personaOccupation || personaStance}
+							<div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+								{#if personaOccupation}<span>{personaOccupation}</span>{/if}{#if personaOccupation && personaStance}<span class="mx-1">•</span>{/if}{#if personaStance}<span>{personaStance}</span>{/if}
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
 			{#if message.files?.length}
 				<div class="flex h-fit flex-wrap gap-x-5 gap-y-2">
 					{#each message.files as file (file.value)}
@@ -190,64 +223,57 @@
 					</div>
 				{/if}
 			</div>
+
+			<!-- Copy button inside the bubble -->
+			{#if !isLast || !loading}
+				<div class="mt-2 flex justify-end">
+					<CopyToClipBoardBtn
+						onClick={() => {
+							isCopied = true;
+						}}
+						classNames="btn rounded-md p-2 text-sm text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700/50"
+						value={message.content}
+						iconClassNames="text-xs"
+					/>
+				</div>
+			{/if}
 		</div>
+	{/if}
 
-		{#if message.routerMetadata || (!loading && message.content)}
+		{#if message.routerMetadata && (!isLast || !loading)}
 			<div
 				class="absolute -bottom-3.5 {message.routerMetadata && messageInfoWidth > messageWidth
 					? 'left-1 pl-1 lg:pl-7'
 					: 'right-1'} flex max-w-[calc(100dvw-40px)] items-center gap-0.5 overflow-hidden"
 				bind:offsetWidth={messageInfoWidth}
 			>
-				{#if message.routerMetadata && (!isLast || !loading)}
-					<div
-						class="mr-2 flex items-center gap-1.5 truncate whitespace-nowrap text-[.65rem] text-gray-400 dark:text-gray-400 sm:text-xs"
-					>
-						<span class="truncate rounded bg-gray-100 px-1 font-mono dark:bg-gray-800 sm:py-px">
-							{message.routerMetadata.route}
+				<div
+					class="mr-2 flex items-center gap-1.5 truncate whitespace-nowrap text-[.65rem] text-gray-400 dark:text-gray-400 sm:text-xs"
+				>
+					<span class="truncate rounded bg-gray-100 px-1 font-mono dark:bg-gray-800 sm:py-px">
+						{message.routerMetadata.route}
+					</span>
+					<span class="text-gray-500">with</span>
+					{#if publicConfig.isHuggingChat}
+						<a
+							href="/chat/settings/models/{message.routerMetadata.model}"
+							class="truncate rounded bg-gray-100 px-1 font-mono hover:text-gray-500 dark:bg-gray-800 dark:hover:text-gray-300 sm:py-px"
+						>
+							{message.routerMetadata.model.split("/").pop()}
+						</a>
+					{:else}
+						<span class="truncate rounded bg-gray-100 px-1.5 font-mono dark:bg-gray-800 sm:py-px">
+							{message.routerMetadata.model.split("/").pop()}
 						</span>
-						<span class="text-gray-500">with</span>
-						{#if publicConfig.isHuggingChat}
-							<a
-								href="/chat/settings/{message.routerMetadata.model}"
-								class="truncate rounded bg-gray-100 px-1 font-mono hover:text-gray-500 dark:bg-gray-800 dark:hover:text-gray-300 sm:py-px"
-							>
-								{message.routerMetadata.model.split("/").pop()}
-							</a>
-						{:else}
-							<span class="truncate rounded bg-gray-100 px-1.5 font-mono dark:bg-gray-800 sm:py-px">
-								{message.routerMetadata.model.split("/").pop()}
-							</span>
-						{/if}
-					</div>
-				{/if}
-				{#if !isLast || !loading}
-					<CopyToClipBoardBtn
-						onClick={() => {
-							isCopied = true;
-						}}
-						classNames="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
-						value={message.content}
-						iconClassNames="text-xs"
-					/>
-					<button
-						class="btn rounded-sm p-1 text-xs text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
-						title="Retry"
-						type="button"
-						onclick={() => {
-							onretry?.({ id: message.id });
-						}}
-					>
-						<CarbonRotate360 />
-					</button>
-					{#if alternatives.length > 1 && editMsdgId === null}
-						<Alternatives
-							{message}
-							{alternatives}
-							{loading}
-							onshowAlternateMsg={(payload) => onshowAlternateMsg?.(payload)}
-						/>
 					{/if}
+				</div>
+				{#if alternatives.length > 1 && editMsdgId === null}
+					<Alternatives
+						{message}
+						{alternatives}
+						{loading}
+						onshowAlternateMsg={(payload) => onshowAlternateMsg?.(payload)}
+					/>
 				{/if}
 			</div>
 		{/if}

src/lib/components/chat/ChatWindow.svelte

@@ -17,8 +17,6 @@
 	import { base } from "$app/paths";
 	import ContinueBtn from "../ContinueBtn.svelte";
 	import ChatMessage from "./ChatMessage.svelte";
-	import ScrollToBottomBtn from "../ScrollToBottomBtn.svelte";
-	import ScrollToPreviousBtn from "../ScrollToPreviousBtn.svelte";
 	import { browser } from "$app/environment";
 	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
 	import SystemPromptModal from "../SystemPromptModal.svelte";
@@ -47,6 +45,7 @@
 		currentModel: Model;
 		models: Model[];
 		preprompt?: string | undefined;
+		personaId?: string;
 		files?: File[];
 		onmessage?: (content: string) => void;
 		onstop?: () => void;
@@ -64,6 +63,7 @@
 		currentModel,
 		models,
 		preprompt = undefined,
+		personaId,
 		files = $bindable([]),
 		onmessage,
 		onstop,
@@ -74,6 +74,13 @@
 
 	let isReadOnly = $derived(!models.some((model) => model.id === currentModel.id));
 
+	// Get persona information for single-persona mode
+	let userSettings = useSettingsStore();
+	let persona = $derived.by(() => {
+		if (!personaId) return undefined;
+		return $userSettings.personas?.find((p) => p.id === personaId);
+	});
+
 	let message: string = $state("");
 	let shareModalOpen = $state(false);
 	let editMsdgId: Message["id"] | null = $state(null);
@@ -356,6 +363,9 @@
 							isAuthor={!shared}
 							readOnly={isReadOnly}
 							isLast={idx === messages.length - 1}
+							personaName={message.from === "assistant" && !message.personaResponses ? persona?.name : undefined}
+							personaOccupation={message.from === "assistant" && !message.personaResponses ? persona?.occupation : undefined}
+							personaStance={message.from === "assistant" && !message.personaResponses ? persona?.stance : undefined}
 							bind:editMsdgId
 							onretry={(payload) => onretry?.(payload)}
 							onshowAlternateMsg={(payload) => onshowAlternateMsg?.(payload)}
@@ -390,18 +400,14 @@
 				/>
 			{/if}
 		</div>
-
-		<ScrollToPreviousBtn class="fixed bottom-48 right-4 lg:right-10" scrollNode={chatContainer} />
-
-		<ScrollToBottomBtn class="fixed bottom-36 right-4 lg:right-10" scrollNode={chatContainer} />
 	</div>
 
 	<div
 		class="pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full
 			max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white
-			via-white/100 to-white/0 px-3.5 pt-2 dark:border-gray-800
+			via-white/100 to-white/0 px-3.5 pb-4 pt-2 dark:border-gray-800
 			dark:from-gray-900 dark:via-gray-900/100
-			dark:to-gray-900/0 max-sm:py-0 sm:px-5 md:pb-4 xl:max-w-4xl [&>*]:pointer-events-auto"
+			dark:to-gray-900/0 max-sm:py-0 sm:px-5 xl:max-w-4xl [&>*]:pointer-events-auto"
 	>
 		{#if !message.length && !messages.length && !sources.length && !loading && currentModel.isRouter && routerExamples.length && !hideRouterExamples}
 			<div
@@ -452,7 +458,8 @@
 		<div class="w-full">
 			<div class="flex w-full *:mb-3">
 				{#if !loading}
-					{#if lastIsError}
+					<!-- Retry button commented out - regeneration disabled -->
+					<!-- {#if lastIsError}
 						<RetryBtn
 							classNames="ml-auto"
 							onClick={() => {
@@ -463,7 +470,8 @@
 								}
 							}}
 						/>
-					{:else if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
+					{:else  -->
+					{#if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
 						<div class="ml-auto gap-2">
 							<ContinueBtn
 								onClick={() => {
@@ -478,6 +486,57 @@
 					{/if}
 				{/if}
 			</div>
+			<div
+				class={{
+					"mb-3 flex items-center justify-end gap-2 self-stretch whitespace-nowrap px-0.5 text-xs text-gray-400/90 max-md:mb-2 max-sm:gap-2": true,
+					"max-sm:hidden": focused && isVirtualKeyboard(),
+				}}
+			>
+				<PersonaSelector />
+				{#if models.find((m) => m.id === currentModel.id)}
+                    {#if !currentModel.isRouter || !loading}
+                        <a
+                            href="{base}/settings/models/{currentModel.id}"
+                            class="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm text-gray-400 shadow-sm hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700"
+                        >
+							<CarbonModel class="text-xs" />
+							{#if currentModel.isRouter}
+								<IconOmni classNames="text-xs" />
+								<span class="max-w-[250px] truncate">{currentModel.displayName}</span>
+							{:else}
+								<span class="max-w-[250px] truncate">{currentModel.displayName}</span>
+							{/if}
+						</a>
+					{:else if showRouterDetails && streamingRouterMetadata}
+						<div
+							class="mr-2 flex items-center gap-1.5 whitespace-nowrap text-[.70rem] text-xs leading-none text-gray-400 dark:text-gray-400"
+						>
+							<IconOmni classNames="text-xs animate-pulse" />
+
+							<span class="router-badge-text router-shimmer">
+								{streamingRouterMetadata.route}
+							</span>
+
+							<span class="text-gray-500">with</span>
+
+							<span class="router-badge-text">
+								{streamingRouterModelName}
+							</span>
+						</div>
+					{:else}
+						<div
+							class="loading-dots relative inline-flex items-center text-gray-400 dark:text-gray-400"
+							aria-label="Routing…"
+						>
+							<IconOmni classNames="text-xs animate-pulse mr-1" /> Routing
+						</div>
+					{/if}
+			{:else}
+				<span class="inline-flex items-center line-through dark:border-gray-700">
+					{currentModel.id}
+				</span>
+			{/if}
+		</div>
 			<form
 				tabindex="-1"
 				aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
@@ -551,57 +610,6 @@
 					</div>
 				{/if}
 			</form>
-			<div
-				class={{
-					"mt-3 flex items-center justify-end gap-2 self-stretch whitespace-nowrap px-0.5 pt-2 text-xs text-gray-400/90 max-md:mb-2 max-sm:gap-2": true,
-					"max-sm:hidden": focused && isVirtualKeyboard(),
-				}}
-			>
-				<PersonaSelector />
-				{#if models.find((m) => m.id === currentModel.id)}
-					{#if !currentModel.isRouter || !loading}
-						<a
-							href="{base}/settings/{currentModel.id}"
-							class="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm text-gray-700 shadow-sm hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-						>
-							<CarbonModel class="text-xs" />
-							{#if currentModel.isRouter}
-								<IconOmni classNames="text-xs" />
-								<span class="max-w-[250px] truncate">{currentModel.displayName}</span>
-							{:else}
-								<span class="max-w-[250px] truncate">{currentModel.displayName}</span>
-							{/if}
-						</a>
-					{:else if showRouterDetails && streamingRouterMetadata}
-						<div
-							class="mr-2 flex items-center gap-1.5 whitespace-nowrap text-[.70rem] text-xs leading-none text-gray-400 dark:text-gray-400"
-						>
-							<IconOmni classNames="text-xs animate-pulse" />
-
-							<span class="router-badge-text router-shimmer">
-								{streamingRouterMetadata.route}
-							</span>
-
-							<span class="text-gray-500">with</span>
-
-							<span class="router-badge-text">
-								{streamingRouterModelName}
-							</span>
-						</div>
-					{:else}
-						<div
-							class="loading-dots relative inline-flex items-center text-gray-400 dark:text-gray-400"
-							aria-label="Routing…"
-						>
-							<IconOmni classNames="text-xs animate-pulse mr-1" /> Routing
-						</div>
-					{/if}
-			{:else}
-				<span class="inline-flex items-center line-through dark:border-gray-700">
-					{currentModel.id}
-				</span>
-			{/if}
-		</div>
 		</div>
 	</div>
 </div>

src/lib/components/chat/PersonaResponseCards.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import type { PersonaResponse } from "$lib/types/Message";
+	import MarkdownRenderer from "./MarkdownRenderer.svelte";
+	import OpenReasoningResults from "./OpenReasoningResults.svelte";
+	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	import CarbonChevronDown from "~icons/carbon/chevron-down";
+	import CarbonChevronUp from "~icons/carbon/chevron-up";
+	import { THINK_BLOCK_REGEX } from "$lib/constants/thinkBlockRegex";
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+
+	interface Props {
+		personaResponses: PersonaResponse[];
+		loading?: boolean;
+		onretry?: (personaId: string) => void;
+	}
+
+	let { personaResponses, loading = false, onretry }: Props = $props();
+
+	// Track expanded state for each persona
+	let expandedStates = $state<Record<string, boolean>>({});
+	
+	// Track content elements for overflow detection
+	let contentElements = $state<Record<string, HTMLElement | null>>({});
+	const MAX_COLLAPSED_HEIGHT = 400;
+
+	function toggleExpanded(personaId: string) {
+		expandedStates[personaId] = !expandedStates[personaId];
+	}
+
+	// Check if content has <think> blocks
+	function hasClientThink(content: string | undefined): boolean {
+		return content ? THINK_BLOCK_REGEX.test(content) : false;
+	}
+
+	// Check if content has overflow
+	function hasOverflow(personaId: string): boolean {
+		const element = contentElements[personaId];
+		if (!element) return false;
+		return element.scrollHeight > MAX_COLLAPSED_HEIGHT;
+	}
+
+	// Navigate to persona settings
+	function openPersonaSettings(personaId: string) {
+		goto(`${base}/settings/personas/${personaId}`);
+	}
+</script>
+
+<!-- Horizontal scrollable cards -->
+<div class="flex gap-3 overflow-x-auto pb-2">
+	{#each personaResponses as response (response.personaId)}
+		{@const isExpanded = expandedStates[response.personaId]}
+		
+		<div 
+			class="persona-card flex-shrink-0 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-850"
+			style="min-width: 300px; max-width: {isExpanded ? '600px' : '400px'};"
+		>
+			<!-- Persona Header -->
+			<div class="mb-3 flex items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700">
+				<button
+					type="button"
+					class="font-semibold text-gray-900 hover:text-gray-700 dark:text-gray-100 dark:hover:text-gray-300 transition-colors"
+					onclick={() => openPersonaSettings(response.personaId)}
+					aria-label="Open persona settings"
+				>
+					{response.personaName}
+				</button>
+				<div class="flex items-center gap-1">
+					<CopyToClipBoardBtn
+						classNames="!rounded-md !p-1.5 !text-gray-500 hover:!bg-gray-100 dark:!text-gray-400 dark:hover:!bg-gray-800"
+						value={response.content}
+					/>
+					<!-- Regenerate button commented out - regeneration disabled -->
+					<!-- {#if onretry}
+						<button
+							type="button"
+							class="rounded-md p-1.5 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+							onclick={() => onretry?.(response.personaId)}
+							aria-label="Regenerate response"
+						>
+							<CarbonRotate360 class="text-base" />
+						</button>
+					{/if} -->
+				</div>
+			</div>
+
+			<!-- Persona Content -->
+			<div 
+				bind:this={contentElements[response.personaId]}
+				class="mt-2"
+				style={isExpanded ? '' : `max-height: ${MAX_COLLAPSED_HEIGHT}px; overflow: hidden;`}
+			>
+				{#if hasClientThink(response.content)}
+					{#each response.content.split(THINK_BLOCK_REGEX) as part, _i}
+						{#if part && part.startsWith("<think>")}
+							{@const isClosed = part.endsWith("</think>")}
+							{@const thinkContent = part.slice(7, isClosed ? -8 : undefined)}
+							{@const summary = isClosed
+								? thinkContent.trim().split(/\n+/)[0] || "Reasoning"
+								: "Thinking..."}
+
+							<OpenReasoningResults
+								{summary}
+								content={thinkContent}
+								loading={loading && !isClosed}
+							/>
+						{:else if part && part.trim().length > 0}
+							<div
+								class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+							>
+								<MarkdownRenderer content={part} {loading} />
+							</div>
+						{/if}
+					{/each}
+				{:else}
+					<div
+						class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+					>
+						<MarkdownRenderer content={response.content} {loading} />
+					</div>
+				{/if}
+
+				{#if response.routerMetadata}
+					<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+						<span class="font-medium">{response.routerMetadata.route}</span>
+						<span class="mx-1">•</span>
+						<span>{response.routerMetadata.model}</span>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Expand/Collapse button - only show if overflow exists -->
+			{#if hasOverflow(response.personaId)}
+				<button
+					onclick={() => toggleExpanded(response.personaId)}
+					class="mt-3 flex w-full items-center justify-center gap-1 rounded-md border border-gray-200 bg-gray-50 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+				>
+					{#if isExpanded}
+						<CarbonChevronUp class="text-base" />
+						<span>Show less</span>
+					{:else}
+						<CarbonChevronDown class="text-base" />
+						<span>Show more</span>
+					{/if}
+				</button>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.persona-card {
+		transition: all 0.3s ease;
+	}
+
+	/* Smooth scrollbar styling */
+	.overflow-x-auto {
+		scrollbar-width: thin;
+		scrollbar-color: rgb(209 213 219) transparent;
+	}
+
+	.overflow-x-auto::-webkit-scrollbar {
+		height: 8px;
+	}
+
+	.overflow-x-auto::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.overflow-x-auto::-webkit-scrollbar-thumb {
+		background-color: rgb(209 213 219);
+		border-radius: 4px;
+	}
+
+	.overflow-x-auto::-webkit-scrollbar-thumb:hover {
+		background-color: rgb(156 163 175);
+	}
+
+	:global(.dark) .overflow-x-auto {
+		scrollbar-color: rgb(75 85 99) transparent;
+	}
+
+	:global(.dark) .overflow-x-auto::-webkit-scrollbar-thumb {
+		background-color: rgb(75 85 99);
+	}
+
+	:global(.dark) .overflow-x-auto::-webkit-scrollbar-thumb:hover {
+		background-color: rgb(107 114 128);
+	}
+</style>
+

src/lib/components/chat/PersonaResponseCarousel.svelte

@@ -0,0 +1,445 @@
+<script lang="ts">
+	import type { PersonaResponse } from "$lib/types/Message";
+	import CarbonChevronLeft from "~icons/carbon/chevron-left";
+	import CarbonChevronRight from "~icons/carbon/chevron-right";
+	import CarbonChevronDown from "~icons/carbon/chevron-down";
+	import CarbonChevronUp from "~icons/carbon/chevron-up";
+	import MarkdownRenderer from "./MarkdownRenderer.svelte";
+	import OpenReasoningResults from "./OpenReasoningResults.svelte";
+	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	import { THINK_BLOCK_REGEX } from "$lib/constants/thinkBlockRegex";
+
+	interface Props {
+		personaResponses: PersonaResponse[];
+		loading?: boolean;
+		onretry?: (personaId: string) => void;
+	}
+
+	let { personaResponses, loading = false, onretry }: Props = $props();
+
+	let currentIndex = $state(0);
+	let expandedStates = $state<Record<string, boolean>>({});
+	let isDragging = $state(false);
+	let startX = $state(0);
+	let currentX = $state(0);
+	let dragOffset = $state(0);
+	
+	// Detect if device has touch/coarse pointer (mobile/tablet)
+	let isTouchDevice = $state(false);
+	
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			// Check if device has coarse pointer (touchscreen) or no pointer (touch-only)
+			isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 
+			                window.matchMedia('(pointer: none)').matches ||
+			                'ontouchstart' in window;
+		}
+	});
+	
+	// Track content heights for overflow detection
+	let contentElements = $state<Record<string, HTMLElement | null>>({});
+	const MAX_COLLAPSED_HEIGHT = 400;
+
+	// Track which version of each persona's response is being shown
+	let personaVersionIndices = $state<Record<string, number>>({});
+
+	// Get the currently displayed version of a persona response
+	function getDisplayedResponse(response: PersonaResponse): PersonaResponse {
+		const versionIndex = personaVersionIndices[response.personaId] ?? response.currentChildIndex ?? 0;
+		
+		if (versionIndex === 0 || !response.children || response.children.length === 0) {
+			return response; // Show current response
+		}
+		
+		// Show a previous version from children
+		const childIndex = versionIndex - 1;
+		return response.children[childIndex] ?? response;
+	}
+
+	// Get all versions of a persona response (current + children)
+	function getAllVersions(response: PersonaResponse): PersonaResponse[] {
+		const versions = [response];
+		if (response.children && response.children.length > 0) {
+			versions.push(...response.children);
+		}
+		return versions;
+	}
+
+	// Navigate to a different version of a persona's response
+	function navigateToVersion(personaId: string, versionIndex: number) {
+		personaVersionIndices[personaId] = versionIndex;
+	}
+
+	function next() {
+		if (currentIndex < personaResponses.length - 1) {
+			// Collapse current card if expanded before navigating
+			const currentPersonaId = personaResponses[currentIndex]?.personaId;
+			if (currentPersonaId && expandedStates[currentPersonaId]) {
+				expandedStates[currentPersonaId] = false;
+			}
+			currentIndex = currentIndex + 1;
+		}
+	}
+
+	function previous() {
+		if (currentIndex > 0) {
+			// Collapse current card if expanded before navigating
+			const currentPersonaId = personaResponses[currentIndex]?.personaId;
+			if (currentPersonaId && expandedStates[currentPersonaId]) {
+				expandedStates[currentPersonaId] = false;
+			}
+			currentIndex = currentIndex - 1;
+		}
+	}
+
+	function goToIndex(index: number) {
+		// Collapse current card if expanded before navigating
+		const currentPersonaId = personaResponses[currentIndex]?.personaId;
+		if (currentPersonaId && expandedStates[currentPersonaId]) {
+			expandedStates[currentPersonaId] = false;
+		}
+		currentIndex = index;
+	}
+
+	function handleDragStart(event: MouseEvent | TouchEvent) {
+		// Only allow mouse dragging on touch devices
+		if (!isTouchDevice && !('touches' in event)) {
+			return;
+		}
+		
+		isDragging = true;
+		startX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+		currentX = startX;
+	}
+
+	function handleDragMove(event: MouseEvent | TouchEvent) {
+		if (!isDragging) return;
+		
+		// Only allow mouse dragging on touch devices
+		if (!isTouchDevice && !('touches' in event)) {
+			return;
+		}
+		
+		event.preventDefault();
+		currentX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+		dragOffset = currentX - startX;
+	}
+
+	function handleDragEnd() {
+		if (!isDragging) return;
+		
+		isDragging = false;
+		const threshold = 50;
+		
+		if (dragOffset < -threshold && currentIndex < personaResponses.length - 1) {
+			next();
+		} else if (dragOffset > threshold && currentIndex > 0) {
+			previous();
+		}
+		
+		dragOffset = 0;
+	}
+
+	function toggleExpanded(personaId: string) {
+		expandedStates[personaId] = !expandedStates[personaId];
+	}
+
+	// Check if content has overflow
+	function hasOverflow(personaId: string): boolean {
+		const element = contentElements[personaId];
+		if (!element) return false;
+		return element.scrollHeight > MAX_COLLAPSED_HEIGHT;
+	}
+
+	let currentResponse = $derived(personaResponses[currentIndex]);
+
+	// Check if content has <think> blocks
+	function hasClientThink(content: string | undefined): boolean {
+		return content ? THINK_BLOCK_REGEX.test(content) : false;
+	}
+
+	let showLeftArrow = $derived(currentIndex > 0);
+	let showRightArrow = $derived(currentIndex < personaResponses.length - 1);
+	let showPositionIndicator = $derived(personaResponses.length > 3);
+</script>
+
+<!-- Outer wrapper for arrows -->
+<div class="relative w-full">
+	<!-- Left Navigation Arrow - positioned outside cards -->
+	{#if personaResponses.length > 1 && showLeftArrow}
+		<button
+			onclick={previous}
+			class="absolute -left-16 top-1/2 z-20 -translate-y-1/2 p-2 text-gray-600 transition-all hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+			aria-label="Previous persona"
+		>
+			<CarbonChevronLeft class="text-3xl" />
+		</button>
+	{/if}
+
+	<!-- Right Navigation Arrow - positioned outside cards -->
+	{#if personaResponses.length > 1 && showRightArrow}
+		<button
+			onclick={next}
+			class="absolute -right-16 top-1/2 z-20 -translate-y-1/2 p-2 text-gray-600 transition-all hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+			aria-label="Next persona"
+		>
+			<CarbonChevronRight class="text-3xl" />
+		</button>
+	{/if}
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div 
+		class="carousel-container relative w-full overflow-hidden transition-all duration-300"
+		onmousedown={handleDragStart}
+		onmousemove={handleDragMove}
+		onmouseup={handleDragEnd}
+		onmouseleave={handleDragEnd}
+		ontouchstart={handleDragStart}
+		ontouchmove={handleDragMove}
+		ontouchend={handleDragEnd}
+	>
+		<div 
+			class="carousel-track flex transition-all duration-300 ease-out"
+			class:dragging={isDragging}
+			style="transform: translateX(calc(-{currentIndex * 100}% + {dragOffset}px));"
+		>
+		{#each personaResponses as response, index (response.personaId)}
+			{@const isActive = index === currentIndex}
+			{@const isPrevious = index === currentIndex - 1}
+			{@const isNext = index === currentIndex + 1}
+			{@const isExpanded = expandedStates[response.personaId]}
+			{@const displayedResponse = getDisplayedResponse(response)}
+			{@const allVersions = getAllVersions(response)}
+			{@const currentVersionIndex = personaVersionIndices[response.personaId] ?? response.currentChildIndex ?? 0}
+
+			<div 
+				class="carousel-card flex-shrink-0 transition-all duration-300"
+				class:active={isActive}
+				class:peek={!isActive}
+				style="width: 100%;"
+			>
+				<div 
+					class="relative w-full rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 dark:border-gray-800 dark:from-gray-800/80 dark:text-gray-300"
+					class:pointer-events-none={!isActive}
+				>
+					<!-- Persona Name at Top Left -->
+					<div class="mb-4 flex items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700">
+						<div>
+							<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+								{response.personaName}
+							</h3>
+							{#if response.personaOccupation || response.personaStance}
+								<div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+									{#if response.personaOccupation}<span>{response.personaOccupation}</span>{/if}{#if response.personaOccupation && response.personaStance}<span class="mx-1">•</span>{/if}{#if response.personaStance}<span>{response.personaStance}</span>{/if}
+								</div>
+							{/if}
+						</div>
+						
+						<!-- Position Indicator Dots (inside card) -->
+						{#if personaResponses.length > 1}
+							<div class="flex items-center gap-2">
+								{#if showPositionIndicator}
+									<!-- Text indicator for N > 3 -->
+									<div class="text-sm text-gray-600 dark:text-gray-400">
+										{currentIndex + 1} of {personaResponses.length}
+									</div>
+								{/if}
+								
+								<!-- Dot indicator -->
+								<div class="flex gap-1.5">
+									{#each personaResponses as _, idx}
+										<button
+											onclick={() => goToIndex(idx)}
+											class="size-2 rounded-full transition-all {idx === currentIndex
+												? 'bg-gray-700 dark:bg-gray-300'
+												: 'bg-gray-400 dark:bg-gray-600 hover:bg-gray-500 dark:hover:bg-gray-500'}"
+											aria-label={`Go to ${personaResponses[idx].personaName}`}
+										></button>
+									{/each}
+								</div>
+							</div>
+						{/if}
+					</div>
+
+					<!-- Persona Content -->
+					<div 
+						bind:this={contentElements[response.personaId]}
+						class="content-wrapper relative"
+						style={isExpanded ? '' : `max-height: ${MAX_COLLAPSED_HEIGHT}px; overflow: hidden;`}
+					>
+						{#if hasClientThink(displayedResponse.content)}
+							{#each displayedResponse.content.split(THINK_BLOCK_REGEX) as part, _i}
+								{#if part && part.startsWith("<think>")}
+									{@const isClosed = part.endsWith("</think>")}
+									{@const thinkContent = part.slice(7, isClosed ? -8 : undefined)}
+									{@const summary = isClosed
+										? thinkContent.trim().split(/\n+/)[0] || "Reasoning"
+										: "Thinking..."}
+
+									<OpenReasoningResults
+										{summary}
+										content={thinkContent}
+										loading={loading && !isClosed}
+									/>
+								{:else if part && part.trim().length > 0}
+									<div
+										class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+									>
+										<MarkdownRenderer content={part} {loading} />
+									</div>
+								{/if}
+							{/each}
+						{:else}
+							<div
+								class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+							>
+								<MarkdownRenderer content={displayedResponse.content} {loading} />
+							</div>
+						{/if}
+
+						{#if displayedResponse.routerMetadata}
+							<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+								<span class="font-medium">{displayedResponse.routerMetadata.route}</span>
+								<span class="mx-1">•</span>
+								<span>{displayedResponse.routerMetadata.model}</span>
+							</div>
+						{/if}
+					</div>
+
+					<!-- Bottom Actions Row -->
+					<div class="mt-4 flex items-center justify-between">
+						<!-- Left Side: Show More Button or Version Navigation -->
+						<div class="flex items-center gap-2">
+							{#if hasOverflow(response.personaId)}
+								<button
+									onclick={() => toggleExpanded(response.personaId)}
+									class="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700/50"
+								>
+									{#if isExpanded}
+										<CarbonChevronUp class="text-base" />
+										<span>Show less</span>
+									{:else}
+										<CarbonChevronDown class="text-base" />
+										<span>Show more</span>
+									{/if}
+								</button>
+							{/if}
+							
+							<!-- Version Navigation (if multiple versions exist) -->
+							{#if allVersions.length > 1}
+								<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
+									<button
+										class="rounded-md p-1 hover:bg-gray-100 dark:hover:bg-gray-700/50 disabled:opacity-30 disabled:cursor-not-allowed"
+										onclick={() => navigateToVersion(response.personaId, Math.max(0, currentVersionIndex - 1))}
+										disabled={currentVersionIndex === 0 || loading}
+										aria-label="Previous version"
+									>
+										<CarbonChevronLeft class="text-base" />
+									</button>
+									<span class="text-xs">
+										{currentVersionIndex + 1} / {allVersions.length}
+									</span>
+									<button
+										class="rounded-md p-1 hover:bg-gray-100 dark:hover:bg-gray-700/50 disabled:opacity-30 disabled:cursor-not-allowed"
+										onclick={() => navigateToVersion(response.personaId, Math.min(allVersions.length - 1, currentVersionIndex + 1))}
+										disabled={currentVersionIndex === allVersions.length - 1 || loading}
+										aria-label="Next version"
+									>
+										<CarbonChevronRight class="text-base" />
+									</button>
+								</div>
+							{/if}
+						</div>
+
+						<!-- Copy and Regenerate Icons (Bottom Right) -->
+						<div class="flex items-center gap-1">
+							<CopyToClipBoardBtn
+								classNames="!rounded-md !p-2 !text-gray-500 hover:!bg-gray-100 dark:!text-gray-400 dark:hover:!bg-gray-700/50"
+								value={displayedResponse.content}
+							/>
+							<!-- Regenerate button commented out - regeneration disabled -->
+							<!-- {#if onretry}
+								<button
+									type="button"
+									class="rounded-md p-2 text-gray-600 hover:bg-gray-200/50 dark:text-gray-400 dark:hover:bg-gray-700/50"
+									onclick={() => onretry?.(response.personaId)}
+									aria-label="Regenerate response"
+								>
+									<CarbonRotate360 class="text-base" />
+								</button>
+							{/if} -->
+						</div>
+					</div>
+				</div>
+			</div>
+		{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.carousel-container {
+		touch-action: pan-y pinch-zoom;
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	
+	/* Only show grab cursor on touch devices */
+	@media (pointer: coarse) {
+		.carousel-container {
+			cursor: grab;
+		}
+		
+		.carousel-container:active {
+			cursor: grabbing;
+		}
+	}
+
+	.carousel-container::-webkit-scrollbar {
+		display: none;
+	}
+
+	.carousel-track {
+		display: flex;
+		gap: 0;
+		transition: transform 0.3s ease-out, height 0.3s ease-out;
+	}
+
+	.carousel-track.dragging {
+		transition: height 0.3s ease-out;
+	}
+
+	.carousel-card {
+		transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
+	}
+
+	.carousel-card.active {
+		opacity: 1;
+		transform: scale(1);
+		z-index: 10;
+	}
+
+	.carousel-card.peek {
+		opacity: 1;
+		transform: scale(0.92);
+		pointer-events: none;
+	}
+
+	/* Additional styling for better peeking effect - subtle dimming */
+	.carousel-card.peek > div {
+		filter: brightness(0.92) saturate(0.9);
+	}
+
+	:global(.dark) .carousel-card.peek > div {
+		filter: brightness(0.75) saturate(0.9);
+	}
+
+	/* Content wrapper auto-sizing */
+	.content-wrapper {
+		transition: max-height 0.3s ease;
+	}
+</style>
+

src/lib/constants/thinkBlockRegex.ts

@@ -0,0 +1,2 @@
+// Zero-config reasoning autodetection: detect <think> blocks in content
+export const THINK_BLOCK_REGEX = /(<think>[\s\S]*?(?:<\/think>|$))/g;

src/lib/migrations/routines/11-add-personas.ts

@@ -9,12 +9,12 @@ const migration: Migration = {
 	up: async () => {
 		const { settings } = collections;
 
-		// Add personas array and activePersona to all existing settings
+		// Add personas array and activePersonas to all existing settings
 		await settings.updateMany(
 			{},
 			{
 				$set: {
-					activePersona: "default",
+					activePersonas: ["default"],
 					personas: DEFAULT_PERSONAS.map((p) => ({
 						...p,
 						createdAt: new Date(),

src/lib/server/api/routes/groups/user.ts

@@ -74,7 +74,7 @@ export const userGroup = new Elysia()
 					welcomeModalSeenAt: settings?.welcomeModalSeenAt ?? null,
 
 					activeModel: settings?.activeModel ?? DEFAULT_SETTINGS.activeModel,
-					activePersona: settings?.activePersona ?? DEFAULT_SETTINGS.activePersona,
+					activePersonas: settings?.activePersonas ?? DEFAULT_SETTINGS.activePersonas,
 					personas: settings?.personas ?? DEFAULT_SETTINGS.personas,
 					disableStream: settings?.disableStream ?? DEFAULT_SETTINGS.disableStream,
 					directPaste: settings?.directPaste ?? DEFAULT_SETTINGS.directPaste,
@@ -96,7 +96,7 @@ export const userGroup = new Elysia()
 							.default(DEFAULT_SETTINGS.shareConversationsWithModelAuthors),
 						welcomeModalSeen: z.boolean().optional(),
 						activeModel: z.string().default(DEFAULT_SETTINGS.activeModel),
-						activePersona: z.string().default(DEFAULT_SETTINGS.activePersona),
+						activePersonas: z.array(z.string()).min(1).default(DEFAULT_SETTINGS.activePersonas),
 						personas: z.array(personaSchema).min(1).default(DEFAULT_SETTINGS.personas),
 						multimodalOverrides: z.record(z.boolean()).default({}),
 						disableStream: z.boolean().default(false),

src/lib/server/defaultPersonas.ts

@@ -1,68 +1,64 @@
 import type { Persona } from "$lib/types/Persona";
 
 export const DEFAULT_PERSONAS: Omit<Persona, "createdAt" | "updatedAt">[] = [
-	{
-		id: "default-persona",
-		name: "Default",
-		occupation: "Default Role",
-		stance: "No Stance",
-		prompt: "",
-		isDefault: true,
-	},
 	{
 		id: "dr-robert-zane",
 		name: "Dr. Robert Zane",
-		occupation: "Medical Ethics & Policy Scholar",
-		stance: "Medicare-for-All (M4A)",
-		prompt: `Persona Prompt: You are Dr. Robert Zane, a distinguished scholar in medical ethics and healthcare policy. Your expertise centers on the moral and social dimensions of healthcare. You are a staunch advocate for a universal healthcare system, believing it's a moral imperative for a just society. 
-
-Core Stance: Healthcare is a fundamental human right, not a commodity. A just society has a collective responsibility to ensure every individual has timely, comprehensive, and high-quality medical care, regardless of their socioeconomic status. The most ethical and effective way to achieve this is through a single-payer system like Medicare-for-All, which eliminates private insurance for essential care. 
-
-Communication Style: Your tone is thoughtful, principled, and philosophical. You use terms like "distributive justice," "social solidarity," and "moral legitimacy." You consistently frame the debate around ethical obligations, citing successful international systems in countries like Canada and the UK to counter arguments about inefficiency or lack of choice. You challenge opponents to defend a system where health access is tied to employment or personal wealth. 
-
-Goal in a Debate: To establish M4A as the only truly equitable solution. You will highlight how the current system's failures disproportionately harm the vulnerable and argue that universal access is a proven, practical model.`,
+		age: "46-55",
+		gender: "Male",
+		jobSector: "Healthcare Policy Scholar/Academic",
+		stance: "In Favor of Medicare for All (M4A)",
+		communicationStyle: "Principled, Philosophical, and Technical",
+		goalInDebate:
+			"To establish M4A as the only truly equitable solution; to highlight how the current system harms the vulnerable",
+		incomeBracket: "Comfortable",
+		politicalLeanings: "Liberal/Progressive",
+		geographicContext: "Urban",
 		isDefault: true,
 	},
 	{
 		id: "mayor-david-chen",
 		name: "Mayor David Chen",
-		occupation: "Community Leader & Public Health Official",
-		stance: "Public Option",
-		prompt: `Persona Prompt: You are Mayor David Chen, a pragmatic and popular community leader with a background as a public health official. Your focus is on the health and well-being of the entire community, and you believe that a mixed public and private system is the most viable path forward for a country like the United States. You advocate for a Public Option that would be available to all citizens. 
-
-Core Stance: While universal healthcare is the ultimate goal, a full M4A system is not a realistic first step due to political and economic hurdles. A public option is the most effective and politically achievable policy to ensure all citizens have access to affordable care. By allowing individuals to choose a government-run insurance plan, we can increase competition, lower costs, and ensure a safety net for those who are uninsured or underinsured, all while preserving the private market for those who prefer it. 
-
-Communication Style: Your tone is authoritative, but also pragmatic and community-focused. You use phrases like "population health," "practical solutions," and "building on what works." You speak from the perspective of someone who has to balance the needs of constituents with the realities of budget and policy implementation. You appeal to a sense of collective responsibility and compromise. 
-
-Goal in a Debate: To position the public option as a moderate, effective, and politically viable path to universal care. You will argue that it addresses the most urgent issues—affordability and access—without the massive disruption of a single-payer overhaul.`,
+		age: "46-55",
+		gender: "Male",
+		jobSector: "Community Leader/Elected Official",
+		stance: "In Favor of a Public Option (Mixed Public-Private System)",
+		communicationStyle: "Authoritative, Pragmatic, and Community-Focused",
+		goalInDebate:
+			"To position the Public Option as a moderate, effective, and politically viable path to universal care; to address affordability without massive systemic disruption",
+		incomeBracket: "Comfortable/High",
+		politicalLeanings: "Moderate/Centrist",
+		geographicContext: "Urban or Suburban",
 		isDefault: true,
 	},
 	{
 		id: "dr-evelyn-reed",
 		name: "Dr. Evelyn Reed",
-		occupation: "Insurance Executive",
+		age: "46-55",
+		gender: "Female",
+		jobSector: "Insurance Executive",
 		stance: "Status Quo (Hardline Insurance Advocate)",
-		prompt: `Persona Prompt: You are Dr. Evelyn Reed, a seasoned executive for a major health insurance company. Your primary focus is on the financial health and market leadership of the private health insurance industry. You analyze policies through a lens of consumer choice, market innovation, and fiscal responsibility. You believe the private insurance model is the cornerstone of a high-quality, competitive, and sustainable healthcare system. 
-
-Core Stance: Private health insurance is the most effective and efficient way to deliver high-quality healthcare. It provides consumers with a wide range of choices, fosters innovation among providers, and ensures fiscal discipline. Government-run systems, like Medicare-for-All or a public option, would lead to unsustainable tax burdens, long wait times, and a one-size-fits-all approach that stifles innovation and limits patient choice. The current system, while in need of some reforms, is fundamentally sound and should be preserved. 
-
-Communication Style: Your tone is professional, confident, and business-oriented. You use industry-specific terminology like "consumer-driven health plans," "risk pools," "cost-containment strategies," and "market competition." You rely on data about cost-effectiveness, quality-of-care metrics, and patient satisfaction from private plans to support your points. You are direct in your criticism of government-run alternatives, highlighting their potential downsides. 
-
-Goal in a Debate: To consistently defend and champion the private health insurance model. You will challenge opponents to provide evidence that a government-run system can be as efficient, innovative, or consumer-centric as the private market. You will aim to frame the debate as a choice between a dynamic, consumer-driven system and a stagnant, bureaucratic government program.`,
+		communicationStyle: "Professional, Confident, and Technical/Jargon Use",
+		goalInDebate:
+			"To consistently defend and champion the private health insurance model; to frame alternatives as stagnant, bureaucratic, and inefficient",
+		incomeBracket: "High",
+		politicalLeanings: "Conservative/Libertarian",
+		geographicContext: "Urban/Suburban",
 		isDefault: true,
 	},
 	{
 		id: "mr-ben-carter",
 		name: "Mr. Ben Carter",
-		occupation: "Concerned Citizen & Teacher",
+		age: "36-45",
+		gender: "Male",
+		jobSector: "Teacher (Middle School)",
 		stance: "Status Quo (Moderate Government Intervention)",
-		prompt: `Persona Prompt: You are Mr. Ben Carter, a concerned citizen and middle school teacher. You are not a healthcare professional, but you have personal experience navigating the healthcare system for yourself and your family. Your perspective is centered on the practical, human, and often frustrating reality of healthcare delivery. You believe in a system that is primarily employer-provided but that also includes a significant role for government regulation and support. 
-
-Core Stance: The healthcare system, regardless of its structure, must be easy to navigate, affordable, and provide high-quality, compassionate care to individuals. My priorities are centered on the real-world impact of policies: out-of-pocket costs, wait times, the complexity of insurance forms, and the feeling of being heard by doctors. While I'm not in favor of a full government takeover, I do believe that the government has an important role to play in regulating the insurance market, protecting consumers from unfair practices, and providing subsidies to help people afford their premiums. 
-
-Communication Style: Your tone is direct, relatable, and sometimes frustrated. You speak from a place of lived experience, using plain language and personal anecdotes to illustrate your points. You are skeptical of jargon and grand, theoretical plans, preferring practical solutions that make a tangible difference in people's lives. You're a pragmatist who sees the value in the current system but also recognizes its deep flaws and the need for more government oversight. 
-
-Goal in a Debate: To keep the discussion grounded in the everyday reality of patients and families, ensuring that the expert-level conversations don't lose sight of the people they are meant to serve. You will advocate for reforms that fix the most frustrating parts of the current system, like surprise billing and high deductibles, and support government programs that make care more accessible.`,
+		communicationStyle: "Direct, Relatable, and Informal",
+		goalInDebate:
+			"To keep the discussion grounded in the everyday reality of patients and families; advocate for reforms like fixing surprise billing and high deductibles",
+		incomeBracket: "Middle",
+		politicalLeanings: "Moderate/Non-Affiliated",
+		geographicContext: "Suburban",
 		isDefault: true,
 	},
 ];

src/lib/server/textGeneration/multiPersona.ts

@@ -0,0 +1,179 @@
+import {
+	type MessageUpdate,
+	MessageUpdateType,
+	MessageUpdateStatus,
+	PersonaUpdateType,
+	type MessagePersonaUpdate,
+} from "$lib/types/MessageUpdate";
+import { generate } from "./generate";
+import { mergeAsyncGenerators } from "$lib/utils/mergeAsyncGenerators";
+import type { TextGenerationContext } from "./types";
+import { type Persona, generatePersonaPrompt } from "$lib/types/Persona";
+import { logger } from "$lib/server/logger";
+import { preprocessMessages } from "../endpoints/preprocessMessages";
+
+/**
+ * Generate responses from multiple personas in parallel
+ * Each persona gets its own text generation stream
+ * Updates are tagged with personaId so the client can route them correctly
+ */
+export async function* multiPersonaTextGeneration(
+	ctx: TextGenerationContext,
+	personas: Persona[]
+): AsyncGenerator<MessageUpdate, undefined, undefined> {
+	if (personas.length === 0) {
+		logger.error("multiPersonaTextGeneration called with no personas");
+		yield {
+			type: MessageUpdateType.Status,
+			status: MessageUpdateStatus.Error,
+			message: "No personas provided",
+		};
+		return;
+	}
+
+	if (personas.length === 1) {
+		// If only one persona, use the standard text generation
+		// (this shouldn't happen, but handle it gracefully)
+		logger.warn("multiPersonaTextGeneration called with single persona, using standard flow");
+		const { textGeneration } = await import("./index");
+		yield* textGeneration(ctx);
+		return;
+	}
+
+	const { conv, messages } = ctx;
+	const convId = conv._id;
+
+	// Notify start
+	yield {
+		type: MessageUpdateType.Status,
+		status: MessageUpdateStatus.Started,
+	};
+
+	// Preprocess messages ONCE for all personas (performance optimization)
+	// This downloads files and prepares messages for the model
+	const preprocessedMessages = await preprocessMessages(messages, convId);
+
+	// Create a generator for each persona with preprocessed messages
+	const personaGenerators = personas.map((persona) =>
+		createPersonaGenerator(ctx, persona, preprocessedMessages)
+	);
+
+	// Merge all generators and stream their updates
+	yield* mergeAsyncGenerators(personaGenerators);
+
+	// All done
+	yield {
+		type: MessageUpdateType.Status,
+		status: MessageUpdateStatus.Finished,
+	};
+}
+
+/**
+ * Create a text generation stream for a single persona
+ * Wraps all updates with persona metadata
+ * Each persona sees ALL previous messages (user + all persona responses from past turns)
+ */
+async function* createPersonaGenerator(
+	ctx: TextGenerationContext,
+	persona: Persona,
+	preprocessedMessages: Awaited<ReturnType<typeof preprocessMessages>>
+): AsyncGenerator<MessageUpdate, undefined, undefined> {
+	try {
+		// Messages are already preprocessed and filtered (system messages removed) from the caller
+		// Each persona sees ALL previous messages (user + all persona responses)
+		// This allows personas to build on each other's responses from previous turns
+
+		// Generate the persona's prompt from their fields
+		const preprompt = generatePersonaPrompt(persona);
+
+		// Generate text for this persona using preprocessed messages
+		// Type assertion is safe here because we know messages are preprocessed
+		const generateCtx = { ...ctx, messages: preprocessedMessages };
+		for await (const update of generate(generateCtx, preprompt)) {
+			// Wrap each update with persona information
+			yield wrapWithPersona(update, persona);
+		}
+	} catch (error) {
+		logger.error({ error, personaId: persona.id }, "Error in persona text generation");
+		yield {
+			type: MessageUpdateType.Persona,
+			personaId: persona.id,
+			personaName: persona.name,
+			personaOccupation: persona.jobSector,
+			personaStance: persona.stance,
+			updateType: PersonaUpdateType.Status,
+			error: error instanceof Error ? error.message : "Unknown error",
+		} as MessagePersonaUpdate;
+	}
+}
+
+/**
+ * Wraps a standard MessageUpdate with persona metadata
+ */
+function wrapWithPersona(update: MessageUpdate, persona: Persona): MessageUpdate {
+	// Handle different update types and wrap them as persona updates
+	if (update.type === MessageUpdateType.Stream) {
+		return {
+			type: MessageUpdateType.Persona,
+			personaId: persona.id,
+			personaName: persona.name,
+			personaOccupation: persona.jobSector,
+			personaStance: persona.stance,
+			updateType: PersonaUpdateType.Stream,
+			token: update.token,
+		} as MessagePersonaUpdate;
+	} else if (update.type === MessageUpdateType.FinalAnswer) {
+		return {
+			type: MessageUpdateType.Persona,
+			personaId: persona.id,
+			personaName: persona.name,
+			personaOccupation: persona.jobSector,
+			personaStance: persona.stance,
+			updateType: PersonaUpdateType.FinalAnswer,
+			text: update.text,
+			interrupted: update.interrupted,
+		} as MessagePersonaUpdate;
+	} else if (update.type === MessageUpdateType.Reasoning) {
+		return {
+			type: MessageUpdateType.Persona,
+			personaId: persona.id,
+			personaName: persona.name,
+			personaOccupation: persona.jobSector,
+			personaStance: persona.stance,
+			updateType: PersonaUpdateType.Reasoning,
+			status: update.subtype === "status" ? update.status : undefined,
+			token: update.subtype === "stream" ? update.token : undefined,
+		} as MessagePersonaUpdate;
+	} else if (update.type === MessageUpdateType.RouterMetadata) {
+		return {
+			type: MessageUpdateType.Persona,
+			personaId: persona.id,
+			personaName: persona.name,
+			personaOccupation: persona.jobSector,
+			personaStance: persona.stance,
+			updateType: PersonaUpdateType.RouterMetadata,
+			route: update.route,
+			model: update.model,
+		} as MessagePersonaUpdate;
+	} else if (update.type === MessageUpdateType.Status) {
+		// Only pass through error status for individual personas
+		if (update.status === MessageUpdateStatus.Error) {
+			return {
+				type: MessageUpdateType.Persona,
+				personaId: persona.id,
+				personaName: persona.name,
+				personaOccupation: persona.jobSector,
+				personaStance: persona.stance,
+				updateType: PersonaUpdateType.Status,
+				error: update.message,
+			} as MessagePersonaUpdate;
+		}
+		// Filter out other status updates (started, finished, keep-alive)
+		// since we handle those at the multi-persona level
+		return update;
+	}
+
+	// For other update types (Title, File), pass through as-is
+	// These are conversation-level, not persona-specific
+	return update;
+}

src/lib/stores/settings.ts

@@ -12,7 +12,7 @@ type SettingsStore = {
 	welcomeModalSeen: boolean;
 	welcomeModalSeenAt: Date | null;
 	activeModel: string;
-	activePersona: string;
+	activePersonas: string[];
 	personas: Persona[];
 	multimodalOverrides: Record<string, boolean>;
 	recentlySaved: boolean;

src/lib/types/Message.ts

@@ -2,6 +2,24 @@ import type { MessageUpdate } from "./MessageUpdate";
 import type { Timestamps } from "./Timestamps";
 import type { v4 } from "uuid";
 
+export type PersonaResponse = {
+	personaId: string;
+	personaName: string;
+	personaOccupation?: string;
+	personaStance?: string;
+	content: string;
+	reasoning?: string;
+	updates?: MessageUpdate[];
+	interrupted?: boolean;
+	routerMetadata?: {
+		route: string;
+		model: string;
+	};
+	// Track alternative versions of this persona's response
+	children?: PersonaResponse[];
+	currentChildIndex?: number;
+};
+
 export type Message = Partial<Timestamps> & {
 	from: "user" | "assistant" | "system";
 	id: ReturnType<typeof v4>;
@@ -23,6 +41,9 @@ export type Message = Partial<Timestamps> & {
 		model: string;
 	};
 
+	// Multi-persona responses (when multiple personas are active)
+	personaResponses?: PersonaResponse[];
+
 	// needed for conversation trees
 	ancestors?: Message["id"][];
 

src/lib/types/MessageUpdate.ts

@@ -5,7 +5,8 @@ export type MessageUpdate =
 	| MessageFileUpdate
 	| MessageFinalAnswerUpdate
 	| MessageReasoningUpdate
-	| MessageRouterMetadataUpdate;
+	| MessageRouterMetadataUpdate
+	| MessagePersonaUpdate;
 
 export enum MessageUpdateType {
 	Status = "status",
@@ -15,6 +16,7 @@ export enum MessageUpdateType {
 	FinalAnswer = "finalAnswer",
 	Reasoning = "reasoning",
 	RouterMetadata = "routerMetadata",
+	Persona = "persona",
 }
 
 // Status
@@ -74,3 +76,28 @@ export interface MessageRouterMetadataUpdate {
 	route: string;
 	model: string;
 }
+
+// Multi-persona updates
+export enum PersonaUpdateType {
+	Stream = "stream",
+	Reasoning = "reasoning",
+	RouterMetadata = "routerMetadata",
+	FinalAnswer = "finalAnswer",
+	Status = "status",
+}
+
+export interface MessagePersonaUpdate {
+	type: MessageUpdateType.Persona;
+	personaId: string;
+	personaName: string;
+	personaOccupation?: string;
+	personaStance?: string;
+	updateType: PersonaUpdateType;
+	token?: string; // for stream updates
+	text?: string; // for final answer
+	interrupted?: boolean;
+	status?: string; // for reasoning status
+	route?: string; // for router metadata
+	model?: string; // for router metadata
+	error?: string; // for error status
+}

src/lib/types/Persona.ts

@@ -1,10 +1,37 @@
 export interface Persona {
 	id: string; // UUID
 	name: string;
-	occupation: string;
-	stance: string;
-	prompt: string; // The full system prompt text
+	age: string; // Required: age range or custom value
+	gender: string; // Required: gender identity
+	jobSector?: string; // Optional: professional sector
+	stance?: string; // Optional: debate stance
+	communicationStyle?: string; // Optional: how they communicate
+	goalInDebate?: string; // Optional: objective in discussions
+	incomeBracket?: string; // Optional: socioeconomic status
+	politicalLeanings?: string; // Optional: political orientation
+	geographicContext?: string; // Optional: geographic setting
 	isDefault: boolean; // True for built-in personas
 	createdAt: Date;
 	updatedAt: Date;
 }
+
+// Helper function to generate system prompt from persona fields
+export function generatePersonaPrompt(persona: Persona): string {
+	const fields: Array<[string, string | undefined]> = [
+		["Name", persona.name],
+		["Age", persona.age],
+		["Gender", persona.gender],
+		["Job Sector", persona.jobSector],
+		["Stance", persona.stance],
+		["Communication Style", persona.communicationStyle],
+		["Goal in the Debate", persona.goalInDebate],
+		["Income Bracket", persona.incomeBracket],
+		["Political Leanings", persona.politicalLeanings],
+		["Geographic Context", persona.geographicContext],
+	];
+
+	return fields
+		.filter(([_, value]) => value && value.trim() !== "")
+		.map(([field, value]) => `${field}: ${value}`)
+		.join("\n\n");
+}

src/lib/types/Settings.ts

@@ -13,8 +13,8 @@ export interface Settings extends Timestamps {
 	welcomeModalSeenAt?: Date | null;
 	activeModel: string;
 
-	// Active persona and user's custom personas
-	activePersona: string; // Persona ID
+	// Active personas and user's custom personas
+	activePersonas: string[]; // Persona IDs
 	personas: Persona[]; // User's custom personas + edited defaults
 
 	/**
@@ -39,7 +39,7 @@ export type SettingsEditable = Omit<Settings, "welcomeModalSeenAt" | "createdAt"
 export const DEFAULT_SETTINGS = {
 	shareConversationsWithModelAuthors: true,
 	activeModel: defaultModel.id,
-	activePersona: "default", // Default persona
+	activePersonas: ["dr-robert-zane", "mayor-david-chen"], // Default personas (can have multiple)
 	personas: DEFAULT_PERSONAS.map((p) => ({
 		...p,
 		createdAt: new Date(),

src/lib/utils/messageUpdates.ts

@@ -14,6 +14,7 @@ type MessageUpdateRequestOptions = {
 	isRetry: boolean;
 	isContinue: boolean;
 	files?: MessageFile[];
+	personaId?: string; // Optional: specific persona to regenerate
 };
 export async function fetchMessageUpdates(
 	conversationId: string,
@@ -30,6 +31,7 @@ export async function fetchMessageUpdates(
 		id: opts.messageId,
 		is_retry: opts.isRetry,
 		is_continue: opts.isContinue,
+		persona_id: opts.personaId,
 	});
 
 	opts.files?.forEach((file) => {

src/routes/api/conversation/[id]/+server.ts

@@ -19,6 +19,7 @@ export async function GET({ locals, params }) {
 				title: conv.title,
 				updatedAt: conv.updatedAt,
 				modelId: conv.model,
+				personaId: conv.personaId,
 				messages: conv.messages.map((message) => ({
 					content: message.content,
 					from: message.from,
@@ -29,6 +30,7 @@ export async function GET({ locals, params }) {
 					files: message.files,
 					updates: message.updates,
 					reasoning: message.reasoning,
+					personaResponses: message.personaResponses,
 				})),
 			};
 			return Response.json(res);

src/routes/conversation/+server.ts

@@ -9,6 +9,7 @@ import { models, validateModel } from "$lib/server/models";
 import { v4 } from "uuid";
 import { authCondition } from "$lib/server/auth";
 import { usageLimits } from "$lib/server/usageLimits";
+import { generatePersonaPrompt } from "$lib/types/Persona";
 
 export const POST: RequestHandler = async ({ locals, request }) => {
 	const body = await request.text();
@@ -75,13 +76,15 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 		error(400, "Can't start a conversation with an unlisted model");
 	}
 
-	// Get user settings to retrieve active persona
+	// Get user settings to retrieve active personas (use first one for conversation)
 	const userSettings = await collections.settings.findOne(authCondition(locals));
-	const activePersonaId = userSettings?.activePersona ?? "default-neutral";
+	const activePersonaId = userSettings?.activePersonas?.[0] ?? "default-neutral";
 	const activePersona = userSettings?.personas?.find((p) => p.id === activePersonaId);
 
 	// Use persona prompt as preprompt, fall back to model preprompt or provided preprompt
-	values.preprompt = activePersona?.prompt ?? values.preprompt ?? model?.preprompt ?? "";
+	values.preprompt = activePersona
+		? generatePersonaPrompt(activePersona)
+		: (values.preprompt ?? model?.preprompt ?? "");
 
 	if (messages && messages.length > 0 && messages[0].from === "system") {
 		messages[0].content = values.preprompt;

src/routes/conversation/[id]/+page.svelte

@@ -132,11 +132,13 @@
 		messageId = messagesPath.at(-1)?.id ?? undefined,
 		isRetry = false,
 		isContinue = false,
+		personaId,
 	}: {
 		prompt?: string;
 		messageId?: ReturnType<typeof v4>;
 		isRetry?: boolean;
 		isContinue?: boolean;
+		personaId?: string;
 	}): Promise<void> {
 		try {
 			$isAborted = false;
@@ -259,6 +261,7 @@
 					isRetry,
 					isContinue,
 					files: isRetry ? userMessage?.files : base64Files,
+					personaId,
 				},
 				messageUpdatesAbortController.signal
 			).catch((err) => {
@@ -266,90 +269,148 @@
 			});
 			if (messageUpdatesIterator === undefined) return;
 
-			files = [];
-			let buffer = "";
-			// Initialize lastUpdateTime outside the loop to persist between updates
-			let lastUpdateTime = new Date();
+		files = [];
+		let buffer = "";
+		// Initialize lastUpdateTime outside the loop to persist between updates
+		let lastUpdateTime = new Date();
 
-			let reasoningBuffer = "";
-			let reasoningLastUpdate = new Date();
+		let reasoningBuffer = "";
+		let reasoningLastUpdate = new Date();
 
-			for await (const update of messageUpdatesIterator) {
-				if ($isAborted) {
-					messageUpdatesAbortController.abort();
-					return;
-				}
+		// Per-persona buffers for multi-persona mode
+		const personaBuffers = new Map<string, string>();
+		const personaLastUpdateTimes = new Map<string, Date>();
 
-				// Remove null characters added due to remote keylogging prevention
-				// See server code for more details
-				if (update.type === MessageUpdateType.Stream) {
-					update.token = update.token.replaceAll("\0", "");
-				}
+		for await (const update of messageUpdatesIterator) {
+			if ($isAborted) {
+				messageUpdatesAbortController.abort();
+				return;
+			}
 
-				const isHighFrequencyUpdate =
-					(update.type === MessageUpdateType.Reasoning &&
-						update.subtype === MessageReasoningUpdateType.Stream) ||
-					update.type === MessageUpdateType.Stream ||
-					(update.type === MessageUpdateType.Status &&
-						update.status === MessageUpdateStatus.KeepAlive);
+			// Remove null characters added due to remote keylogging prevention
+			// See server code for more details
+			if (update.type === MessageUpdateType.Stream) {
+				update.token = update.token.replaceAll("\0", "");
+			}
+
+			const isHighFrequencyUpdate =
+				(update.type === MessageUpdateType.Reasoning &&
+					update.subtype === MessageReasoningUpdateType.Stream) ||
+				update.type === MessageUpdateType.Stream ||
+				update.type === MessageUpdateType.Persona ||
+				(update.type === MessageUpdateType.Status &&
+					update.status === MessageUpdateStatus.KeepAlive);
+
+			if (!isHighFrequencyUpdate) {
+				messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
+			}
+			const currentTime = new Date();
 
-				if (!isHighFrequencyUpdate) {
-					messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
+			// Handle multi-persona updates
+			if (update.type === MessageUpdateType.Persona) {
+				// Initialize personaResponses if not already present
+				if (!messageToWriteTo.personaResponses) {
+					messageToWriteTo.personaResponses = [];
 				}
-				const currentTime = new Date();
-
-				if (update.type === MessageUpdateType.Stream && !$settings.disableStream) {
-					buffer += update.token;
-					// Check if this is the first update or if enough time has passed
-					if (currentTime.getTime() - lastUpdateTime.getTime() > updateDebouncer.maxUpdateTime) {
-						messageToWriteTo.content += buffer;
-						buffer = "";
-						lastUpdateTime = currentTime;
+
+			// Find or create persona response
+			let personaResponse = messageToWriteTo.personaResponses.find(
+				(pr) => pr.personaId === update.personaId
+			);
+			if (!personaResponse) {
+				personaResponse = {
+					personaId: update.personaId,
+					personaName: update.personaName,
+					personaOccupation: update.personaOccupation,
+					personaStance: update.personaStance,
+					content: "",
+				};
+				messageToWriteTo.personaResponses.push(personaResponse);
+			}
+
+				// Handle different update types for this persona
+				if (update.updateType === "stream" && update.token && !$settings.disableStream) {
+					const personaBuffer = personaBuffers.get(update.personaId) || "";
+					const newBuffer = personaBuffer + update.token;
+					personaBuffers.set(update.personaId, newBuffer);
+
+					const lastUpdate = personaLastUpdateTimes.get(update.personaId) || new Date(0);
+					if (currentTime.getTime() - lastUpdate.getTime() > updateDebouncer.maxUpdateTime) {
+						personaResponse.content += newBuffer;
+						personaBuffers.set(update.personaId, "");
+						personaLastUpdateTimes.set(update.personaId, currentTime);
 					}
 					pending = false;
-				} else if (
-					update.type === MessageUpdateType.Status &&
-					update.status === MessageUpdateStatus.Error
-				) {
-					$error = update.message ?? "An error has occurred";
-				} else if (update.type === MessageUpdateType.Title) {
-					const convInData = conversations.find(({ id }) => id === page.params.id);
-					if (convInData) {
-						convInData.title = update.title;
-
-						$titleUpdate = {
-							title: update.title,
-							convId: page.params.id,
-						};
-					}
-				} else if (update.type === MessageUpdateType.File) {
-					messageToWriteTo.files = [
-						...(messageToWriteTo.files ?? []),
-						{ type: "hash", value: update.sha, mime: update.mime, name: update.name },
-					];
-				} else if (update.type === MessageUpdateType.Reasoning) {
-					if (!messageToWriteTo.reasoning) {
-						messageToWriteTo.reasoning = "";
-					}
-					if (update.subtype === MessageReasoningUpdateType.Stream) {
-						reasoningBuffer += update.token;
-						if (
-							currentTime.getTime() - reasoningLastUpdate.getTime() >
-							updateDebouncer.maxUpdateTime
-						) {
-							messageToWriteTo.reasoning += reasoningBuffer;
-							reasoningBuffer = "";
-							reasoningLastUpdate = currentTime;
-						}
-					}
-				} else if (update.type === MessageUpdateType.RouterMetadata) {
-					// Update router metadata immediately when received
-					messageToWriteTo.routerMetadata = {
+				} else if (update.updateType === "finalAnswer" && update.text) {
+					personaResponse.content = update.text;
+					personaResponse.interrupted = update.interrupted;
+				} else if (update.updateType === "routerMetadata" && update.route && update.model) {
+					personaResponse.routerMetadata = {
 						route: update.route,
 						model: update.model,
 					};
+				} else if (update.updateType === "status" && update.error) {
+					// Handle persona errors - mark as interrupted so loading can stop
+					personaResponse.interrupted = true;
+					personaResponse.content = personaResponse.content || `Error: ${update.error}`;
 				}
+			} else if (update.type === MessageUpdateType.Stream && !$settings.disableStream) {
+				buffer += update.token;
+				// Check if this is the first update or if enough time has passed
+				if (currentTime.getTime() - lastUpdateTime.getTime() > updateDebouncer.maxUpdateTime) {
+					messageToWriteTo.content += buffer;
+					buffer = "";
+					lastUpdateTime = currentTime;
+				}
+				pending = false;
+			} else if (
+				update.type === MessageUpdateType.Status &&
+				update.status === MessageUpdateStatus.Error
+			) {
+				$error = update.message ?? "An error has occurred";
+			} else if (update.type === MessageUpdateType.Title) {
+				const convInData = conversations.find(({ id }) => id === page.params.id);
+				if (convInData) {
+					convInData.title = update.title;
+
+					$titleUpdate = {
+						title: update.title,
+						convId: page.params.id,
+					};
+				}
+			} else if (update.type === MessageUpdateType.File) {
+				messageToWriteTo.files = [
+					...(messageToWriteTo.files ?? []),
+					{ type: "hash", value: update.sha, mime: update.mime, name: update.name },
+				];
+			} else if (update.type === MessageUpdateType.Reasoning) {
+				if (!messageToWriteTo.reasoning) {
+					messageToWriteTo.reasoning = "";
+				}
+				if (update.subtype === MessageReasoningUpdateType.Stream) {
+					reasoningBuffer += update.token;
+					if (
+						currentTime.getTime() - reasoningLastUpdate.getTime() >
+						updateDebouncer.maxUpdateTime
+					) {
+						messageToWriteTo.reasoning += reasoningBuffer;
+						reasoningBuffer = "";
+						reasoningLastUpdate = currentTime;
+					}
+				}
+			} else if (update.type === MessageUpdateType.RouterMetadata) {
+				// Update router metadata immediately when received
+				messageToWriteTo.routerMetadata = {
+					route: update.route,
+					model: update.model,
+				};
+			} else if (update.type === MessageUpdateType.FinalAnswer) {
+				// Handle final answer - set authoritative final content from server
+				messageToWriteTo.content = update.text;
+				messageToWriteTo.interrupted = update.interrupted;
+				pending = false;
 			}
+		}
 		} catch (err) {
 			if (err instanceof Error && err.message.includes("overloaded")) {
 				$error = "Too much traffic, please try again.";
@@ -390,7 +451,7 @@
 		}
 	}
 
-	async function onRetry(payload: { id: Message["id"]; content?: string }) {
+	async function onRetry(payload: { id: Message["id"]; content?: string; personaId?: string }) {
 		const lastMsgId = payload.id;
 		messagesPath = createMessagesPath(messages, lastMsgId);
 
@@ -399,6 +460,7 @@
 				prompt: payload.content,
 				messageId: payload.id,
 				isRetry: true,
+				personaId: payload.personaId,
 			});
 		} else {
 			await convFromShared()
@@ -411,6 +473,7 @@
 							prompt: payload.content,
 							messageId: payload.id,
 							isRetry: true,
+							personaId: payload.personaId,
 						})
 				)
 				.finally(() => (loading = false));
@@ -450,15 +513,40 @@
 	function isConversationStreaming(msgs: Message[]): boolean {
 		const lastAssistant = [...msgs].reverse().find((msg) => msg.from === "assistant");
 		if (!lastAssistant) return false;
-		const hasFinalAnswer =
-			lastAssistant.updates?.some((update) => update.type === MessageUpdateType.FinalAnswer) ??
-			false;
+		
+		// Check for errors
 		const hasError =
 			lastAssistant.updates?.some(
 				(update) =>
 					update.type === MessageUpdateType.Status && update.status === MessageUpdateStatus.Error
 			) ?? false;
-		return !hasFinalAnswer && !hasError;
+		if (hasError) return false;
+		
+		// Check if multi-persona mode
+		if (lastAssistant.personaResponses && lastAssistant.personaResponses.length > 0) {
+			// Check if we have a Finished status (sent when all personas complete)
+			const hasFinished =
+				lastAssistant.updates?.some(
+					(update) =>
+						update.type === MessageUpdateType.Status &&
+						update.status === MessageUpdateStatus.Finished
+				) ?? false;
+			if (hasFinished) return false;
+			
+			// In multi-persona mode, check if all personas have sent their final answers
+			const allPersonasComplete = lastAssistant.personaResponses.every((pr) => {
+				// A persona is complete if interrupted field is defined (set when final answer arrives)
+				// The interrupted field is only set when updateType === "finalAnswer" is processed
+				return pr.interrupted !== undefined;
+			});
+			return !allPersonasComplete;
+		}
+		
+		// Single persona mode: check for FinalAnswer update
+		const hasFinalAnswer =
+			lastAssistant.updates?.some((update) => update.type === MessageUpdateType.FinalAnswer) ??
+			false;
+		return !hasFinalAnswer;
 	}
 
 	$effect(() => {
@@ -524,6 +612,7 @@
 	{messagesAlternatives}
 	shared={data.shared}
 	preprompt={data.preprompt}
+	personaId={(data as any).personaId}
 	bind:files
 	onmessage={onMessage}
 	onretry={onRetry}

src/routes/conversation/[id]/+server.ts

@@ -18,7 +18,6 @@ import { convertLegacyConversation } from "$lib/utils/tree/convertLegacyConversa
 import { isMessageId } from "$lib/utils/tree/isMessageId";
 import { buildSubtree } from "$lib/utils/tree/buildSubtree.js";
 import { addChildren } from "$lib/utils/tree/addChildren.js";
-import { addSibling } from "$lib/utils/tree/addSibling.js";
 import { usageLimits } from "$lib/server/usageLimits";
 import { textGeneration } from "$lib/server/textGeneration";
 import type { TextGenerationContext } from "$lib/server/textGeneration/types";
@@ -160,6 +159,7 @@ export async function POST({ request, locals, params, getClientAddress }) {
 			),
 			is_retry: z.optional(z.boolean()),
 			is_continue: z.optional(z.boolean()),
+			persona_id: z.optional(z.string()), // Optional: specific persona to regenerate
 			files: z.optional(
 				z.array(
 					z.object({
@@ -229,6 +229,11 @@ export async function POST({ request, locals, params, getClientAddress }) {
 		messageToWriteToId = messageId;
 		messagesForPrompt = buildSubtree(conv, messageId);
 	} else if (isRetry && messageId) {
+		// REGENERATION DISABLED - commenting out retry logic
+		// Returning error when retry is attempted
+		error(400, "Regeneration is currently disabled");
+
+		/* 
 		// two cases, if we're retrying a user message with a newPrompt set,
 		// it means we're editing a user message
 		// if we're retrying on an assistant message, newPrompt cannot be set
@@ -276,6 +281,7 @@ export async function POST({ request, locals, params, getClientAddress }) {
 			messagesForPrompt = buildSubtree(conv, messageId);
 			messagesForPrompt.pop(); // don't need the latest assistant message in the prompt since we're retrying it
 		}
+		*/
 	} else {
 		// just a normal linear conversation, so we add the user message
 		// and the blank assistant message back to back
@@ -335,6 +341,18 @@ export async function POST({ request, locals, params, getClientAddress }) {
 	const stream = new ReadableStream({
 		async start(controller) {
 			messageToWriteTo.updates ??= [];
+
+			// Send immediate "Started" status for optimistic UI feedback
+			const startedEvent = {
+				type: MessageUpdateType.Status,
+				status: MessageUpdateStatus.Started,
+			};
+			try {
+				controller.enqueue(JSON.stringify(startedEvent) + "\n");
+			} catch (err) {
+				// Client may have disconnected already
+			}
+
 			async function update(event: MessageUpdate) {
 				if (!messageToWriteTo || !conv) {
 					throw Error("No message or conversation to write events to");
@@ -444,53 +462,201 @@ export async function POST({ request, locals, params, getClientAddress }) {
 
 			// Get current persona definition (may have been updated since conversation creation)
 			const userSettings = await collections.settings.findOne(authCondition(locals));
-			const personaId = conv.personaId ?? userSettings?.activePersona ?? "default-neutral";
-			const currentPersona = userSettings?.personas?.find((p) => p.id === personaId);
-
-			// Use current persona prompt (reflects any edits)
-			const preprompt = currentPersona?.prompt ?? conv.preprompt ?? "";
-
-			// Update conversation's preprompt to reflect current persona
-			await collections.conversations.updateOne(
-				{ _id: conv._id },
-				{ $set: { preprompt, updatedAt: new Date() } }
-			);
+			const activePersonaIds = userSettings?.activePersonas ?? [];
+
+			// Get all active personas
+			const activePersonas = activePersonaIds
+				.map((id) => userSettings?.personas?.find((p) => p.id === id))
+				.filter((p): p is import("$lib/types/Persona").Persona => p !== undefined);
+
+			// Determine if we should use multi-persona mode
+			const useMultiPersona = activePersonas.length > 1;
+
+			if (!useMultiPersona) {
+				// Use current persona prompt (reflects any edits)
+				const preprompt = conv.preprompt ?? "";
+
+				// Update conversation's preprompt to reflect current persona
+				await collections.conversations.updateOne(
+					{ _id: conv._id },
+					{ $set: { preprompt, updatedAt: new Date() } }
+				);
+
+				// Update conv object with current preprompt
+				conv.preprompt = preprompt;
+
+				try {
+					const ctx: TextGenerationContext = {
+						model,
+						endpoint: await model.getEndpoint(),
+						conv,
+						messages: messagesForPrompt,
+						assistant: undefined,
+						isContinue: isContinue ?? false,
+						promptedAt,
+						ip: getClientAddress(),
+						username: locals.user?.username,
+						// Force-enable multimodal if user settings say so for this model
+						forceMultimodal: Boolean(userSettings?.multimodalOverrides?.[model.id]),
+					};
+					// run the text generation and send updates to the client
+					for await (const event of textGeneration(ctx)) await update(event);
+				} catch (e) {
+					hasError = true;
+					await update({
+						type: MessageUpdateType.Status,
+						status: MessageUpdateStatus.Error,
+						message: (e as Error).message,
+					});
+					logger.error(e);
+				} finally {
+					// check if no output was generated
+					if (!hasError && messageToWriteTo.content === initialMessageContent) {
+						await update({
+							type: MessageUpdateType.Status,
+							status: MessageUpdateStatus.Error,
+							message: "No output was generated. Something went wrong.",
+						});
+					}
+				}
+			} else {
+				// Multi-persona mode - parallel generation for all active personas
+				const { multiPersonaTextGeneration } = await import(
+					"$lib/server/textGeneration/multiPersona"
+				);
+				const { generateTitleForConversation } = await import("$lib/server/textGeneration/title");
+
+				// REGENERATION DISABLED - commenting out persona retry logic
+				/* 
+			// Check if this is a retry for a specific persona
+			const isPersonaRetry = isRetry && personaId;
+			
+			// If retrying a specific persona, get the previous message's persona responses
+			const previousMessage = isPersonaRetry 
+				? conv.messages.find((msg) => msg.id === messageId)
+				: null;
+
+			// Initialize persona responses structure
+			if (isPersonaRetry && previousMessage?.personaResponses) {
+				// Copy all previous persona responses
+				messageToWriteTo.personaResponses = previousMessage.personaResponses.map((pr) => {
+					if (pr.personaId === personaId) {
+						// For the persona being regenerated, store the old response as a child
+						const oldResponse = { ...pr };
+						delete oldResponse.children; // Don't nest children recursively
+						delete oldResponse.currentChildIndex;
+						
+						return {
+							personaId: pr.personaId,
+							personaName: pr.personaName,
+							personaOccupation: pr.personaOccupation,
+							personaStance: pr.personaStance,
+							content: "",
+							updates: [],
+							children: [oldResponse], // Store the old response
+							currentChildIndex: 0, // New response will be at index 0
+						};
+					} else {
+						// Keep other personas' responses as-is
+						return { ...pr };
+					}
+				});
+			} else {
+			*/
+				// Normal generation: initialize empty responses for all personas
+				messageToWriteTo.personaResponses = activePersonas.map((p) => ({
+					personaId: p.id,
+					personaName: p.name,
+					personaOccupation: p.jobSector,
+					personaStance: p.stance,
+					content: "",
+					updates: [],
+				}));
+				// }
+
+				try {
+					// Generate title if needed (do this once, not per-persona)
+					if (conv.title === "New Chat") {
+						for await (const titleUpdate of generateTitleForConversation(conv)) {
+							await update(titleUpdate);
+						}
+					}
 
-			// Update conv object with current preprompt
-			conv.preprompt = preprompt;
+					// Filter out system messages to prevent contamination
+					// Each persona will get their own prompt via the preprompt parameter
+					const messagesWithoutSystem = messagesForPrompt.filter((msg) => msg.from !== "system");
+
+					const ctx: TextGenerationContext = {
+						model,
+						endpoint: await model.getEndpoint(),
+						conv,
+						messages: messagesWithoutSystem,
+						assistant: undefined,
+						isContinue: isContinue ?? false,
+						promptedAt,
+						ip: getClientAddress(),
+						username: locals.user?.username,
+						forceMultimodal: Boolean(userSettings?.multimodalOverrides?.[model.id]),
+					};
+
+					// REGENERATION DISABLED - always generate for all active personas
+					/* 
+				// Determine which personas to generate for
+				const personasToGenerate = isPersonaRetry && personaId
+					? (() => {
+						// Find the specific persona from all user personas, not just active ones
+						const persona = userSettings?.personas?.find((p) => p.id === personaId);
+						return persona ? [persona] : [];
+					})()
+					: activePersonas;
+				*/
+					const personasToGenerate = activePersonas;
+
+					// Run multi-persona text generation (preprocessing happens once inside)
+					for await (const event of multiPersonaTextGeneration(ctx, personasToGenerate)) {
+						// Handle persona-specific updates
+						if (event.type === MessageUpdateType.Persona) {
+							const personaResponse = messageToWriteTo.personaResponses?.find(
+								(pr) => pr.personaId === event.personaId
+							);
+
+							if (personaResponse) {
+								if (event.updateType === "stream" && event.token) {
+									personaResponse.content += event.token;
+								} else if (event.updateType === "finalAnswer" && event.text) {
+									personaResponse.content = event.text;
+									personaResponse.interrupted = event.interrupted;
+								} else if (event.updateType === "routerMetadata" && event.route && event.model) {
+									personaResponse.routerMetadata = {
+										route: event.route,
+										model: event.model,
+									};
+								}
+							}
+						}
 
-			try {
-				const ctx: TextGenerationContext = {
-					model,
-					endpoint: await model.getEndpoint(),
-					conv,
-					messages: messagesForPrompt,
-					assistant: undefined,
-					isContinue: isContinue ?? false,
-					promptedAt,
-					ip: getClientAddress(),
-					username: locals.user?.username,
-					// Force-enable multimodal if user settings say so for this model
-					forceMultimodal: Boolean(userSettings?.multimodalOverrides?.[model.id]),
-				};
-				// run the text generation and send updates to the client
-				for await (const event of textGeneration(ctx)) await update(event);
-			} catch (e) {
-				hasError = true;
-				await update({
-					type: MessageUpdateType.Status,
-					status: MessageUpdateStatus.Error,
-					message: (e as Error).message,
-				});
-				logger.error(e);
-			} finally {
-				// check if no output was generated
-				if (!hasError && messageToWriteTo.content === initialMessageContent) {
+						await update(event);
+					}
+				} catch (e) {
+					hasError = true;
 					await update({
 						type: MessageUpdateType.Status,
 						status: MessageUpdateStatus.Error,
-						message: "No output was generated. Something went wrong.",
+						message: (e as Error).message,
 					});
+					logger.error(e);
+				} finally {
+					// Check if at least one persona generated output
+					const hasAnyOutput = messageToWriteTo.personaResponses?.some(
+						(pr) => pr.content.length > 0
+					);
+					if (!hasError && !hasAnyOutput) {
+						await update({
+							type: MessageUpdateType.Status,
+							status: MessageUpdateStatus.Error,
+							message: "No output was generated from any persona. Something went wrong.",
+						});
+					}
 				}
 			}
 

src/routes/login/callback/+server.ts

@@ -12,17 +12,26 @@ const sanitizeJSONEnv = (val: string, fallback: string) => {
 	return unquoted || fallback;
 };
 
+const parseJSONEnv = (val: string, fallback: string) => {
+	try {
+		return JSON5.parse(sanitizeJSONEnv(val, fallback));
+	} catch (e) {
+		console.warn(`Failed to parse environment variable as JSON5, using fallback: ${fallback}`, e);
+		return JSON5.parse(fallback);
+	}
+};
+
 const allowedUserEmails = z
 	.array(z.string().email())
 	.optional()
 	.default([])
-	.parse(JSON5.parse(sanitizeJSONEnv(config.ALLOWED_USER_EMAILS, "[]")));
+	.parse(parseJSONEnv(config.ALLOWED_USER_EMAILS, "[]"));
 
 const allowedUserDomains = z
 	.array(z.string().regex(/\.\w+$/)) // Contains at least a dot
 	.optional()
 	.default([])
-	.parse(JSON5.parse(sanitizeJSONEnv(config.ALLOWED_USER_DOMAINS, "[]")));
+	.parse(parseJSONEnv(config.ALLOWED_USER_DOMAINS, "[]"));
 
 export async function GET({ url, locals, cookies, request, getClientAddress }) {
 	const { error: errorName, error_description: errorDescription } = z

src/routes/personas/+page.svelte

@@ -18,14 +18,24 @@
 	let queryTokens = $derived(normalize(personaFilter).trim().split(/\s+/).filter(Boolean));
     let filtered = $derived(
 		$settings.personas.filter((p: Persona) => {
-			const haystack = normalize(`${p.name} ${p.occupation ?? ""} ${p.stance ?? ""}`);
+			const haystack = normalize(`${p.name} ${p.age ?? ""} ${p.gender ?? ""} ${p.jobSector ?? ""} ${p.stance ?? ""}`);
 			return queryTokens.every((q) => haystack.includes(q));
 		})
 	);
 
-	function activatePersona(personaId: string) {
-		if (personaId !== $settings.activePersona) {
-			settings.instantSet({ activePersona: personaId });
+	function togglePersona(personaId: string) {
+		const isActive = $settings.activePersonas.includes(personaId);
+		if (isActive) {
+			// Prevent deactivating the last active persona
+			if ($settings.activePersonas.length === 1) {
+				alert("At least one persona must be active.");
+				return;
+			}
+			// Deactivate: remove from array
+			settings.instantSet({ activePersonas: $settings.activePersonas.filter(id => id !== personaId) });
+		} else {
+			// Activate: add to array
+			settings.instantSet({ activePersonas: [...$settings.activePersonas, personaId] });
 		}
 	}
 
@@ -42,7 +52,7 @@
 			clearTimeout(clickTimeout);
 			clickTimeout = null;
 		}
-		activatePersona(personaId);
+		togglePersona(personaId);
 	}
 
 	// Edit modal state
@@ -51,16 +61,28 @@
 		$settings.personas.find((p) => p.id === editingPersonaId) ?? null
 	);
 	let editableName = $state("");
-	let editableOccupation = $state("");
+	let editableAge = $state("");
+	let editableGender = $state("");
+	let editableJobSector = $state("");
 	let editableStance = $state("");
-	let editablePrompt = $state("");
+	let editableCommunicationStyle = $state("");
+	let editableGoalInDebate = $state("");
+	let editableIncomeBracket = $state("");
+	let editablePoliticalLeanings = $state("");
+	let editableGeographicContext = $state("");
 
 	$effect(() => {
 		if (editingPersona) {
 			editableName = editingPersona.name;
-			editableOccupation = editingPersona.occupation;
-			editableStance = editingPersona.stance;
-			editablePrompt = editingPersona.prompt;
+			editableAge = editingPersona.age;
+			editableGender = editingPersona.gender;
+			editableJobSector = editingPersona.jobSector || "";
+			editableStance = editingPersona.stance || "";
+			editableCommunicationStyle = editingPersona.communicationStyle || "";
+			editableGoalInDebate = editingPersona.goalInDebate || "";
+			editableIncomeBracket = editingPersona.incomeBracket || "";
+			editablePoliticalLeanings = editingPersona.politicalLeanings || "";
+			editableGeographicContext = editingPersona.geographicContext || "";
 		}
 	});
 
@@ -79,9 +101,15 @@ function closeEdit() {
 				? {
 					...p,
 					name: editableName,
-					occupation: editableOccupation,
+					age: editableAge,
+					gender: editableGender,
+					jobSector: editableJobSector,
 					stance: editableStance,
-					prompt: editablePrompt,
+					communicationStyle: editableCommunicationStyle,
+					goalInDebate: editableGoalInDebate,
+					incomeBracket: editableIncomeBracket,
+					politicalLeanings: editablePoliticalLeanings,
+					geographicContext: editableGeographicContext,
 					updatedAt: new Date(),
 				}
 				: p
@@ -89,23 +117,30 @@ function closeEdit() {
 		closeEdit();
 	}
 
-    function activateEditingPersona() {
+    function toggleEditingPersona() {
         if (!editingPersona) return;
         const id = editingPersona.id;
         saveEdit();
-        activatePersona(id);
+        togglePersona(id);
     }
 
 	function deleteEditingPersona() {
 		if (!editingPersona) return;
 		if ($settings.personas.length === 1) return alert("Cannot delete the last persona.");
-		if (editingPersona.id === $settings.activePersona)
-			return alert("Cannot delete the active persona. Activate another first.");
+		if ($settings.activePersonas.includes(editingPersona.id))
+			return alert("Cannot delete an active persona. Deactivate it first.");
 		if (confirm(`Delete "${editingPersona.name}"?`)) {
 			$settings.personas = $settings.personas.filter((p) => p.id !== editingPersona!.id);
 			closeEdit();
 		}
 	}
+
+	// Function to show datalist on focus
+	function showDatalist(event: FocusEvent) {
+		const input = event.target as HTMLInputElement;
+		// Dispatch a synthetic input event to trigger the datalist dropdown
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+	}
 </script>
 
 <svelte:head>
@@ -125,7 +160,7 @@ function closeEdit() {
 		<input
 			type="search"
 			bind:value={personaFilter}
-			placeholder="Search by name, occupation, or stance"
+			placeholder="Search by name, age, gender, job sector, or stance"
 			aria-label="Search personas"
 			class="mt-4 w-full rounded-3xl border border-gray-300 bg-white px-5 py-2 text-[15px]
 				placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300
@@ -141,22 +176,30 @@ function closeEdit() {
                     ondblclick={() => handleCardDblClick(persona.id)}
                     onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleCardClick(persona.id); } }}
 					aria-label={`Open persona ${persona.name}`}
-                    class="group relative flex min-h-[112px] flex-col gap-2 overflow-hidden rounded-xl border bg-gray-50/50 px-6 py-5 text-left shadow hover:bg-gray-50 hover:shadow-inner dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
-					class:active-model={persona.id === $settings.activePersona}
+                    class="group relative flex min-h-[112px] flex-col gap-2 overflow-hidden rounded-xl bg-gray-50/50 px-6 py-5 text-left shadow hover:bg-gray-50 hover:shadow-inner dark:bg-gray-950/20 dark:hover:bg-gray-950/40 {$settings.activePersonas.includes(persona.id) ? 'border-2 border-black dark:border-white' : 'border border-gray-800/70'}"
 				>
 					<div class="flex items-center justify-between gap-1">
 						<span class="flex items-center gap-2 font-semibold">{persona.name}</span>
-						{#if persona.id === $settings.activePersona}
-							<span class="rounded-full border border-gray-300 bg-white px-2 py-0.5 text-xs text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">Active</span>
+						{#if $settings.activePersonas.includes(persona.id)}
+							<div class="size-2.5 rounded-full bg-black dark:bg-white" title="Active persona"></div>
+						{/if}
+					</div>
+					<div class="text-sm text-gray-600 dark:text-gray-300">
+						{#if persona.age || persona.gender}
+							<div class="mb-1">
+								{#if persona.age}<span>{persona.age}</span>{/if}
+								{#if persona.age && persona.gender}<span class="mx-1 text-gray-400">•</span>{/if}
+								{#if persona.gender}<span>{persona.gender}</span>{/if}
+							</div>
+						{/if}
+						{#if persona.jobSector || persona.stance}
+							<div>
+								{#if persona.jobSector}<span class="font-medium">{persona.jobSector}</span>{/if}
+								{#if persona.jobSector && persona.stance}<span class="mx-1 text-gray-400">•</span>{/if}
+								{#if persona.stance}<span class="italic">{persona.stance}</span>{/if}
+							</div>
 						{/if}
 					</div>
-					{#if persona.occupation || persona.stance}
-						<div class="text-sm text-gray-600 dark:text-gray-300">
-							{#if persona.occupation}<span class="font-medium">{persona.occupation}</span>{/if}
-							{#if persona.occupation && persona.stance}<span class="mx-1 text-gray-400">•</span>{/if}
-							{#if persona.stance}<span class="italic">{persona.stance}</span>{/if}
-						</div>
-					{/if}
 				</div>
 			{/each}
 		</div>
@@ -167,66 +210,267 @@ function closeEdit() {
     <Modal onclose={() => {
         const dirty = editingPersona && (
             editableName !== editingPersona.name ||
-            editableOccupation !== editingPersona.occupation ||
-            editableStance !== editingPersona.stance ||
-            editablePrompt !== editingPersona.prompt
+            editableAge !== editingPersona.age ||
+            editableGender !== editingPersona.gender ||
+            editableJobSector !== (editingPersona.jobSector || "") ||
+            editableStance !== (editingPersona.stance || "") ||
+            editableCommunicationStyle !== (editingPersona.communicationStyle || "") ||
+            editableGoalInDebate !== (editingPersona.goalInDebate || "") ||
+            editableIncomeBracket !== (editingPersona.incomeBracket || "") ||
+            editablePoliticalLeanings !== (editingPersona.politicalLeanings || "") ||
+            editableGeographicContext !== (editingPersona.geographicContext || "")
         );
         if (!dirty) return closeEdit();
         showCloseConfirm = true;
-    }} width="w-full !max-w-2xl">
-		<div class="flex h-full max-h-[80vh] w-full flex-col gap-5 p-6">
-		<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Edit Persona</div>
-			<div class="flex flex-col gap-2">
-				<label for="edit-name" class="text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
-				<div class="relative">
-					<input
-						id="edit-name"
-						bind:value={editableName}
-						class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-					/>
-					<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+    }} width="w-full !max-w-4xl">
+		<div class="scrollbar-custom flex h-full max-h-[85vh] w-full flex-col gap-5 overflow-y-auto p-6">
+			<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Edit Persona</div>
+			
+			<!-- Group 1: Core Identity -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Core Identity</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="edit-name" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Name <span class="text-red-500">*</span>
+						</label>
+						<input
+							id="edit-name"
+							type="text"
+							bind:value={editableName}
+							required
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="100"
+						/>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="edit-age" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Age <span class="text-red-500">*</span>
+						</label>
+						<input
+							id="edit-age"
+							type="text"
+							list="edit-age-options"
+							bind:value={editableAge}
+							onfocus={showDatalist}
+							required
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="50"
+						/>
+						<datalist id="edit-age-options">
+							<option value="18-25">18-25</option>
+							<option value="26-35">26-35</option>
+							<option value="36-45">36-45</option>
+							<option value="46-55">46-55</option>
+							<option value="56-65">56-65</option>
+							<option value="66+">66+</option>
+						</datalist>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="edit-gender" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Gender <span class="text-red-500">*</span>
+						</label>
+						<input
+							id="edit-gender"
+							type="text"
+							list="edit-gender-options"
+							bind:value={editableGender}
+							onfocus={showDatalist}
+							required
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="50"
+						/>
+						<datalist id="edit-gender-options">
+							<option value="Male">Male</option>
+							<option value="Female">Female</option>
+							<option value="Prefer not to say">Prefer not to say</option>
+						</datalist>
+					</div>
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
-				<label for="edit-role" class="text-sm font-medium text-gray-700 dark:text-gray-300">Role</label>
-				<div class="relative">
-					<input
-						id="edit-role"
-						bind:value={editableOccupation}
-						class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-					/>
-					<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+
+			<!-- Group 2: Professional & Stance -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Professional & Stance</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="edit-job-sector" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Job Sector
+						</label>
+						<input
+							id="edit-job-sector"
+							type="text"
+							list="edit-job-sector-options"
+							bind:value={editableJobSector}
+							onfocus={showDatalist}
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="200"
+						/>
+						<datalist id="edit-job-sector-options">
+							<option value="Healthcare provider">Healthcare provider</option>
+							<option value="Small business owner">Small business owner</option>
+							<option value="Tech worker">Tech worker</option>
+							<option value="Teacher">Teacher</option>
+							<option value="Unemployed/Retired">Unemployed/Retired</option>
+							<option value="Government worker">Government worker</option>
+							<option value="Student">Student</option>
+						</datalist>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="edit-stance" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Stance
+						</label>
+						<input
+							id="edit-stance"
+							type="text"
+							list="edit-stance-options"
+							bind:value={editableStance}
+							onfocus={showDatalist}
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="200"
+						/>
+						<datalist id="edit-stance-options">
+							<option value="In Favor of Medicare for All">In Favor of Medicare for All</option>
+							<option value="Hardline Insurance Advocate">Hardline Insurance Advocate</option>
+							<option value="Improvement of Current System">Improvement of Current System</option>
+							<option value="Public Option Supporter">Public Option Supporter</option>
+							<option value="Status Quo">Status Quo</option>
+						</datalist>
+					</div>
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
-				<label for="edit-stance" class="text-sm font-medium text-gray-700 dark:text-gray-300">Stance</label>
-				<div class="relative">
-					<input
-						id="edit-stance"
-						bind:value={editableStance}
-						class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-					/>
-					<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+
+			<!-- Group 3: Communication & Goals -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Communication & Goals</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="edit-communication-style" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Communication Style
+						</label>
+						<input
+							id="edit-communication-style"
+							type="text"
+							list="edit-communication-style-options"
+							bind:value={editableCommunicationStyle}
+							onfocus={showDatalist}
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="200"
+						/>
+						<datalist id="edit-communication-style-options">
+							<option value="Direct">Direct</option>
+							<option value="Technical/Jargon use">Technical/Jargon use</option>
+							<option value="Informal">Informal</option>
+							<option value="Philosophical">Philosophical</option>
+							<option value="Pragmatic">Pragmatic</option>
+							<option value="Conversational">Conversational</option>
+						</datalist>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="edit-goal-in-debate" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Goal in the Debate
+						</label>
+						<input
+							id="edit-goal-in-debate"
+							type="text"
+							list="edit-goal-in-debate-options"
+							bind:value={editableGoalInDebate}
+							onfocus={showDatalist}
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="300"
+						/>
+						<datalist id="edit-goal-in-debate-options">
+							<option value="Keep discussion grounded">Keep discussion grounded</option>
+							<option value="Explain complexity">Explain complexity</option>
+							<option value="Advocate for change">Advocate for change</option>
+							<option value="Defend current system">Defend current system</option>
+							<option value="Find compromise">Find compromise</option>
+						</datalist>
+					</div>
 				</div>
 			</div>
-			<div class="flex min-h-0 flex-1 flex-col gap-2">
-				<label for="edit-prompt" class="text-sm font-medium text-gray-700 dark:text-gray-300">System Prompt</label>
-				<div class="relative flex flex-1">
-					<textarea
-						id="edit-prompt"
-						bind:value={editablePrompt}
-						class="peer scrollbar-custom h-full min-h-[200px] w-full flex-1 resize-none overflow-y-auto rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-					></textarea>
-					<CarbonEdit class="pointer-events-none absolute right-3 top-3 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+
+			<!-- Group 4: Demographics -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Demographics</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="edit-income-bracket" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Income Bracket
+						</label>
+						<input
+							id="edit-income-bracket"
+							type="text"
+							list="edit-income-bracket-options"
+							bind:value={editableIncomeBracket}
+							onfocus={showDatalist}
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="100"
+						/>
+						<datalist id="edit-income-bracket-options">
+							<option value="Low">Low</option>
+							<option value="Middle">Middle</option>
+							<option value="High">High</option>
+							<option value="Comfortable">Comfortable</option>
+							<option value="Struggling">Struggling</option>
+						</datalist>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="edit-political-leanings" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Political Leanings
+						</label>
+						<input
+							id="edit-political-leanings"
+							type="text"
+							list="edit-political-leanings-options"
+							bind:value={editablePoliticalLeanings}
+							onfocus={showDatalist}
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="100"
+						/>
+						<datalist id="edit-political-leanings-options">
+							<option value="Liberal">Liberal</option>
+							<option value="Conservative">Conservative</option>
+							<option value="Moderate">Moderate</option>
+							<option value="Libertarian">Libertarian</option>
+							<option value="Non-affiliated">Non-affiliated</option>
+							<option value="Progressive">Progressive</option>
+						</datalist>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="edit-geographic-context" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Geographic Context
+						</label>
+						<input
+							id="edit-geographic-context"
+							type="text"
+							list="edit-geographic-context-options"
+							bind:value={editableGeographicContext}
+							onfocus={showDatalist}
+							class="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+							maxlength="100"
+						/>
+						<datalist id="edit-geographic-context-options">
+							<option value="Rural">Rural</option>
+							<option value="Urban">Urban</option>
+							<option value="Suburban">Suburban</option>
+						</datalist>
+					</div>
 				</div>
 			</div>
+
             <div class="flex flex-wrap gap-2 pt-2">
                 <button
-                    class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                    onclick={activateEditingPersona}
-                    disabled={editingPersona.id === $settings.activePersona}
+                    class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                    onclick={toggleEditingPersona}
                 >
-                    {editingPersona.id === $settings.activePersona ? "Active" : "Activate"}
+                    {$settings.activePersonas.includes(editingPersona.id) ? "Deactivate" : "Activate"}
                 </button>
 				<button
 					class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"

src/routes/settings/(nav)/+layout.svelte

@@ -13,6 +13,8 @@
 	import { browser } from "$app/environment";
 	import { isDesktop } from "$lib/utils/isDesktop";
 	import { debounce } from "$lib/utils/debounce";
+	import type { Persona } from "$lib/types/Persona";
+	import { v4 } from "uuid";
 
 	interface Props {
 		data: LayoutData;
@@ -26,44 +28,66 @@
 
 	let navContainer: HTMLDivElement | undefined = $state();
 
-	async function scrollSelectedModelIntoView() {
+	async function scrollSelectedItemIntoView() {
 		await tick();
 		const container = navContainer;
 		if (!container) return;
-		const currentModelId = page.params.model as string | undefined;
-		if (!currentModelId) return;
-		const buttons = container.querySelectorAll<HTMLButtonElement>("button[data-model-id]");
-		let target: HTMLElement | null = null;
-		for (const btn of buttons) {
-			if (btn.dataset.modelId === currentModelId) {
-				target = btn;
-				break;
+		
+		if (activeTab === 'models') {
+			const currentModelId = page.params.model as string | undefined;
+			if (!currentModelId) return;
+			const buttons = container.querySelectorAll<HTMLButtonElement>("button[data-model-id]");
+			for (const btn of buttons) {
+				if (btn.dataset.modelId === currentModelId) {
+					btn.scrollIntoView({ block: "nearest", inline: "nearest" });
+					break;
+				}
+			}
+		} else if (activeTab === 'personas') {
+			const currentPersonaId = page.params.persona as string | undefined;
+			if (!currentPersonaId) return;
+			const buttons = container.querySelectorAll<HTMLButtonElement>("button[data-persona-id]");
+			for (const btn of buttons) {
+				if (btn.dataset.personaId === currentPersonaId) {
+					btn.scrollIntoView({ block: "nearest", inline: "nearest" });
+					break;
+				}
 			}
 		}
-		if (!target) return;
-		// Use minimal movement; keep within view if needed
-		target.scrollIntoView({ block: "nearest", inline: "nearest" });
 	}
 
 	function checkDesktopRedirect() {
 		if (
 			browser &&
 			isDesktop(window) &&
-			page.url.pathname === `${base}/settings` &&
-			!page.url.pathname.endsWith("/application")
+			page.url.pathname === `${base}/settings`
 		) {
 			goto(`${base}/settings/application`);
 		}
 	}
 
+	// Helper to determine if we should show content or list
+	function shouldShowContent(pathname: string): boolean {
+		// Hide content (show list only) for root settings, models list, and personas list
+		if (
+			pathname === `${base}/settings` ||
+			pathname === `${base}/settings/models` ||
+			pathname === `${base}/settings/personas`
+		) {
+			return false;
+		}
+		// Show content for everything else (specific model/persona/application)
+		return true;
+	}
+
 	onMount(() => {
-		// Show content when not on the root settings page
-		showContent = page.url.pathname !== `${base}/settings`;
+		// Show content based on current path
+		showContent = shouldShowContent(page.url.pathname);
 		// Initial desktop redirect check
 		checkDesktopRedirect();
 
-		// Ensure the selected model (if any) is visible in the nav
-		void scrollSelectedModelIntoView();
+		// Ensure the selected item is visible in the nav
+		void scrollSelectedItemIntoView();
 
 		// Add resize listener for desktop redirect
 		if (browser) {
@@ -77,12 +101,12 @@
 		if (from?.url && !from.url.pathname.includes("settings")) {
 			previousPage = from.url.toString() || previousPage || base || "/";
 		}
-		// Show content when not on the root settings page
-		showContent = page.url.pathname !== `${base}/settings`;
+		// Show content based on current path
+		showContent = shouldShowContent(page.url.pathname);
 		// Check desktop redirect after navigation
 		checkDesktopRedirect();
-		// After navigation, keep the selected model in view
-		void scrollSelectedModelIntoView();
+		// After navigation, keep the selected item in view
+		void scrollSelectedItemIntoView();
 	});
 
 	const settings = useSettingsStore();
@@ -92,12 +116,49 @@
 	const normalize = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, " ");
 	let queryTokens = $derived(normalize(modelFilter).trim().split(/\s+/).filter(Boolean));
 
+	// Local filter for persona list
+	let personaFilter = $state("");
+	let personaQueryTokens = $derived(normalize(personaFilter).trim().split(/\s+/).filter(Boolean));
+
 	// Determine active tab based on current route
 	let activeTab = $derived.by(() => {
 		if (page.url.pathname.includes("/personas")) return "personas";
 		if (page.url.pathname.includes("/application")) return "application";
-		return "models";
+		if (page.url.pathname.includes("/models")) return "models";
+		return "models"; // default
 	});
+
+	function createNewPersona() {
+		const newPersona: Persona = {
+			id: v4(),
+			name: "New Persona",
+			occupation: "",
+			stance: "",
+			prompt: "",
+			isDefault: false,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+		};
+
+		$settings.personas = [...$settings.personas, newPersona];
+		// Navigate to the new persona
+		goto(`${base}/settings/personas/${newPersona.id}`);
+	}
+
+	function handlePersonaDoubleClick(personaId: string) {
+		// Toggle the persona on double-click
+		const isActive = $settings.activePersonas.includes(personaId);
+		if (isActive) {
+			// Prevent deactivating the last active persona
+			if ($settings.activePersonas.length === 1) {
+				alert("At least one persona must be active.");
+				return;
+			}
+			settings.instantSet({ activePersonas: $settings.activePersonas.filter(id => id !== personaId) });
+		} else {
+			settings.instantSet({ activePersonas: [...$settings.activePersonas, personaId] });
+		}
+	}
 </script>
 
 <div
@@ -105,41 +166,73 @@
 >
 	<div class="col-span-1 mb-3 flex flex-col gap-3 md:col-span-3 md:mb-4">
 		<div class="flex items-center justify-between">
-			{#if showContent && browser}
+			{#if browser && !isDesktop(window)}
+				{#if showContent && (activeTab === 'models' || activeTab === 'personas')}
+					<!-- Detail view: show only back button -->
+					<button
+						class="btn rounded-lg"
+						aria-label="Back to list"
+						onclick={() => {
+							if (activeTab === 'models') {
+								goto(`${base}/settings/models`);
+							} else if (activeTab === 'personas') {
+								goto(`${base}/settings/personas`);
+							}
+						}}
+					>
+						<CarbonChevronLeft
+							class="text-xl text-gray-900 hover:text-black dark:text-gray-200 dark:hover:text-white"
+						/>
+					</button>
+				{:else}
+					<!-- List view or application: show only X button -->
+					<button
+						class="btn rounded-lg"
+						aria-label="Close settings"
+						onclick={() => {
+							goto(previousPage);
+						}}
+					>
+						<CarbonClose
+							class="text-xl text-gray-900 hover:text-black dark:text-gray-200 dark:hover:text-white"
+						/>
+					</button>
+				{/if}
+			{/if}
+			<h2 class="left-0 right-0 mx-auto w-fit text-center text-xl font-bold md:hidden">Settings</h2>
+			{#if browser && isDesktop(window)}
+				<!-- Desktop: always show X button on the right -->
 				<button
-					class="btn rounded-lg md:hidden"
-					aria-label="Back to menu"
+					class="btn rounded-lg"
+					aria-label="Close settings"
 					onclick={() => {
-						showContent = false;
-						goto(`${base}/settings`);
+						goto(previousPage);
 					}}
 				>
-					<CarbonChevronLeft
+					<CarbonClose
 						class="text-xl text-gray-900 hover:text-black dark:text-gray-200 dark:hover:text-white"
 					/>
 				</button>
+			{:else if showContent && (activeTab === 'models' || activeTab === 'personas')}
+				<!-- Mobile detail view: placeholder to maintain layout -->
+				<div class="size-8"></div>
 			{/if}
-			<h2 class=" left-0 right-0 mx-auto w-fit text-center text-xl font-bold md:hidden">Settings</h2>
-			<button
-				class="btn rounded-lg"
-				aria-label="Close settings"
-				onclick={() => {
-					goto(previousPage);
-				}}
-			>
-				<CarbonClose
-					class="text-xl text-gray-900 hover:text-black dark:text-gray-200 dark:hover:text-white"
-				/>
-			</button>
 		</div>
 		
 		<!-- Tab Navigation -->
-		<div class="flex gap-2 border-b border-gray-200 dark:border-gray-700 max-md:hidden">
+		<div class="flex gap-2 border-b border-gray-200 dark:border-gray-700" class:max-md:hidden={showContent && browser}>
 			<button
 				class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab === 'models'
 					? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
 					: 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'}"
-				onclick={() => goto(`${base}/settings/${data.models[0]?.id ?? ''}`)}
+				onclick={() => {
+					// On mobile list view, go to list; otherwise go to active item detail
+					if (browser && !isDesktop(window) && !showContent) {
+						goto(`${base}/settings/models`);
+					} else {
+						goto(`${base}/settings/models/${$settings.activeModel || data.models[0]?.id || ''}`);
+					}
+				}}
 			>
 				Models
 			</button>
@@ -147,7 +240,14 @@
 				class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab === 'personas'
 					? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
 					: 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'}"
-				onclick={() => goto(`${base}/settings/personas/${$settings.activePersona || $settings.personas[0]?.id || ''}`)}
+				onclick={() => {
+					// On mobile list view, go to list; otherwise go to active item detail
+					if (browser && !isDesktop(window) && !showContent) {
+						goto(`${base}/settings/personas`);
+					} else {
+						goto(`${base}/settings/personas/${$settings.activePersonas[0] || $settings.personas[0]?.id || ''}`);
+					}
+				}}
 			>
 				Personas
 			</button>
@@ -186,7 +286,7 @@
 				}) as model}
 				<button
 					type="button"
-					onclick={() => goto(`${base}/settings/${model.id}`)}
+					onclick={() => goto(`${base}/settings/models/${model.id}`)}
 					class="group flex h-9 w-full flex-none items-center gap-1 rounded-lg px-3 text-[13px] text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/60 md:rounded-xl md:px-3 {model.id ===
 					page.params.model
 						? '!bg-gray-100 !text-gray-800 dark:!bg-gray-700 dark:!text-gray-200'
@@ -223,9 +323,63 @@
 			{/each}
 		</div>
 	{/if}
+	{#if !(showContent && browser && !isDesktop(window)) && activeTab === 'personas'}
+		<div
+			class="scrollbar-custom col-span-1 flex flex-col overflow-y-auto whitespace-nowrap rounded-r-xl bg-gradient-to-l from-gray-50 to-10% dark:from-gray-700/40 max-md:-mx-4 max-md:h-full md:pr-6"
+			class:max-md:hidden={showContent && browser}
+			bind:this={navContainer}
+		>
+			<!-- Filter input -->
+			<div class="px-2 py-2">
+				<input
+					bind:value={personaFilter}
+					type="search"
+					placeholder="Search by name"
+					aria-label="Search personas by name"
+					class="w-full rounded-full border border-gray-300 bg-white px-4 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder:text-gray-500 dark:focus:ring-gray-700"
+				/>
+			</div>
+
+			{#each $settings.personas
+				.filter((persona) => {
+					const haystack = normalize(`${persona.name} ${persona.occupation ?? ""} ${persona.stance ?? ""}`);
+					return personaQueryTokens.every((q) => haystack.includes(q));
+				}) as persona (persona.id)}
+				<button
+					type="button"
+					onclick={() => goto(`${base}/settings/personas/${persona.id}`)}
+					ondblclick={() => handlePersonaDoubleClick(persona.id)}
+					class="group flex h-9 w-full flex-none items-center gap-1 rounded-lg px-3 text-[13px] text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/60 md:rounded-xl md:px-3 {persona.id ===
+					page.params.persona
+						? '!bg-gray-100 !text-gray-800 dark:!bg-gray-700 dark:!text-gray-200'
+						: ''}"
+					data-persona-id={persona.id}
+					aria-label="Select {persona.name}"
+					title="Double-click to activate"
+				>
+					<div class="mr-auto flex items-center gap-1 truncate">
+						<span class="truncate">{persona.name}</span>
+					</div>
+
+					{#if $settings.activePersonas.includes(persona.id)}
+						<div class="size-2 rounded-full bg-black dark:bg-white" title="Active persona"></div>
+					{/if}
+				</button>
+			{/each}
+
+			<button
+				type="button"
+				onclick={createNewPersona}
+				class="group sticky bottom-0 mt-1 flex h-9 w-full flex-none items-center justify-center gap-1 rounded-lg bg-white px-3 text-[13px] text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-800/60 md:rounded-xl md:px-3"
+				aria-label="Create new persona"
+			>
+				+ New Persona
+			</button>
+		</div>
+	{/if}
 	{#if showContent}
 		<div
-			class="scrollbar-custom col-span-1 w-full overflow-y-auto overflow-x-clip px-1 {activeTab === 'models' ? 'md:col-span-2' : 'md:col-span-3'} md:row-span-2"
+			class="scrollbar-custom col-span-1 w-full overflow-y-auto overflow-x-clip px-1 {activeTab === 'models' || activeTab === 'personas' ? 'md:col-span-2' : 'md:col-span-3'} md:row-span-2"
 			class:max-md:hidden={!showContent && browser}
 		>
 			{@render children?.()}

src/routes/settings/(nav)/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { base } from "$app/paths";
+    import { goto } from "$app/navigation";
+    import { onMount } from "svelte";
+    import { isDesktop } from "$lib/utils/isDesktop";
+    import type { PageData } from "./$types";
+
+    let { data }: { data: PageData } = $props();
+
+    onMount(() => {
+        // On desktop, redirect to application settings
+        if (browser && isDesktop(window)) {
+            goto(`${base}/settings/application`, { replaceState: true });
+        }
+    });
+</script>
+
+<div class="flex h-full w-full items-center justify-center text-gray-500 dark:text-gray-400">
+    {#if browser && isDesktop(window)}
+        <p>Loading...</p>
+    {:else}
+        <p>Select a tab from above</p>
+    {/if}
+</div>
+

src/routes/settings/(nav)/+server.ts

@@ -6,9 +6,15 @@ import { DEFAULT_SETTINGS, type SettingsEditable } from "$lib/types/Settings";
 const personaSchema = z.object({
 	id: z.string().min(1),
 	name: z.string().min(1).max(100),
-	occupation: z.string().max(200).default(""),
+	age: z.string().min(1).max(50),
+	gender: z.string().min(1).max(50),
+	jobSector: z.string().max(200).default(""),
 	stance: z.string().max(200).default(""),
-	prompt: z.string().max(10000).default(""),
+	communicationStyle: z.string().max(200).default(""),
+	goalInDebate: z.string().max(300).default(""),
+	incomeBracket: z.string().max(100).default(""),
+	politicalLeanings: z.string().max(100).default(""),
+	geographicContext: z.string().max(100).default(""),
 	isDefault: z.boolean(),
 	createdAt: z.coerce.date(),
 	updatedAt: z.coerce.date(),
@@ -24,7 +30,7 @@ export async function POST({ request, locals }) {
 				.default(DEFAULT_SETTINGS.shareConversationsWithModelAuthors),
 			welcomeModalSeen: z.boolean().optional(),
 			activeModel: z.string().default(DEFAULT_SETTINGS.activeModel),
-			activePersona: z.string().default(DEFAULT_SETTINGS.activePersona),
+			activePersonas: z.array(z.string()).min(1).default(DEFAULT_SETTINGS.activePersonas),
 			personas: z.array(personaSchema).min(1).default(DEFAULT_SETTINGS.personas),
 			multimodalOverrides: z.record(z.boolean()).default({}),
 			disableStream: z.boolean().default(false),

src/routes/settings/(nav)/models/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { base } from "$app/paths";
+    import { goto } from "$app/navigation";
+    import { onMount } from "svelte";
+    import { useSettingsStore } from "$lib/stores/settings";
+    import { isDesktop } from "$lib/utils/isDesktop";
+    import type { PageData } from "./$types";
+
+    let { data }: { data: PageData } = $props();
+    const settings = useSettingsStore();
+
+    onMount(() => {
+        // On desktop, redirect to the active model or first model
+        if (browser && isDesktop(window)) {
+            const targetId = $settings.activeModel || data.models[0]?.id || "";
+            if (targetId) {
+                goto(`${base}/settings/models/${targetId}`, { replaceState: true });
+            }
+        }
+    });
+</script>
+
+<div class="flex h-full w-full items-center justify-center text-gray-500 dark:text-gray-400">
+    {#if browser && isDesktop(window)}
+        <p>Loading...</p>
+    {:else}
+        <p>Select a model from the list</p>
+    {/if}
+</div>
+

src/routes/settings/(nav)/{[...model] → models/[...model]}/+page.svelte

@@ -232,3 +232,4 @@
 		<!-- Tokenizer-based token counting disabled in this build -->
 	</div>
 </div>
+

src/routes/settings/(nav)/personas/+page.svelte

@@ -1,273 +1,31 @@
 <script lang="ts">
+    import { browser } from "$app/environment";
     import { base } from "$app/paths";
     import { goto } from "$app/navigation";
-    import { page } from "$app/state";
+    import { onMount } from "svelte";
     import { useSettingsStore } from "$lib/stores/settings";
-    import type { Persona } from "$lib/types/Persona";
-    import { v4 } from "uuid";
-    import CarbonTrashCan from "~icons/carbon/trash-can";
+    import { isDesktop } from "$lib/utils/isDesktop";
+    import type { PageData } from "./$types";
 
+    let { data }: { data: PageData } = $props();
     const settings = useSettingsStore();
 
-    // Selected persona comes from the URL param to mirror model routing
-    let selectedPersonaId = $state<string | null>(page.params.persona ?? null);
-    let selectedPersona = $derived(
-        $settings.personas.find((p) => p.id === selectedPersonaId) ?? $settings.personas[0]
-    );
-
-    // Keep URL in sync if selection changes locally
-    $effect(() => {
-        const id = selectedPersona?.id;
-        if (!id) return;
-        if (page.params.persona !== id) {
-            goto(`${base}/settings/personas/${id}`);
-        }
-    });
-
-    // Local editable copy of selected persona
-    let editableName = $state("");
-    let editableOccupation = $state("");
-    let editableStance = $state("");
-    let editablePrompt = $state("");
-
-    // Search filter
-    let personaFilter = $state("");
-    const normalize = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, " ");
-    let queryTokens = $derived(normalize(personaFilter).trim().split(/\s+/).filter(Boolean));
-    let filteredPersonas = $derived(
-        $settings.personas.filter((persona) => {
-            const haystack = normalize(
-                `${persona.name} ${persona.occupation ?? ""} ${persona.stance ?? ""}`
-            );
-            return queryTokens.every((q) => haystack.includes(q));
-        })
-    );
-
-    // Update editable fields when selection changes
-    $effect(() => {
-        if (selectedPersona) {
-            editableName = selectedPersona.name;
-            editableOccupation = selectedPersona.occupation;
-            editableStance = selectedPersona.stance;
-            editablePrompt = selectedPersona.prompt;
-        }
-    });
-
-    function createNewPersona() {
-        const newPersona: Persona = {
-            id: v4(),
-            name: "New Persona",
-            occupation: "",
-            stance: "",
-            prompt: "",
-            isDefault: false,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-        };
-
-        $settings.personas = [...$settings.personas, newPersona];
-        // Navigate to the new persona
-        goto(`${base}/settings/personas/${newPersona.id}`);
-    }
-
-    function savePersona() {
-        if (!selectedPersona) return;
-
-        const updatedPersonas = $settings.personas.map((p) =>
-            p.id === selectedPersona.id
-                ? {
-                        ...p,
-                        name: editableName,
-                        occupation: editableOccupation,
-                        stance: editableStance,
-                        prompt: editablePrompt,
-                        updatedAt: new Date(),
-                    }
-                : p
-        );
-
-        $settings.personas = updatedPersonas;
-    }
-
-    function activatePersona() {
-        if (!selectedPersona) return;
-        if (hasChanges) savePersona();
-        settings.instantSet({ activePersona: selectedPersona.id });
-    }
-
-    function deletePersona() {
-        if (!selectedPersona) return;
-
-        // Can't delete if it's the only persona
-        if ($settings.personas.length === 1) {
-            alert("Cannot delete the last persona.");
-            return;
-        }
-
-        // Can't delete if it's the active persona
-        if (selectedPersona.id === $settings.activePersona) {
-            alert("Cannot delete the currently active persona. Please activate another persona first.");
-            return;
-        }
-
-        if (confirm(`Are you sure you want to delete "${selectedPersona.name}"?`)) {
-            const nextId = $settings.personas.find((p) => p.id !== selectedPersona!.id)?.id || null;
-            $settings.personas = $settings.personas.filter((p) => p.id !== selectedPersona.id);
-            goto(`${base}/settings/personas/${nextId ?? ""}`);
-        }
-    }
-
-    function handleDoubleClick(personaId: string) {
-        if (selectedPersona && hasChanges) savePersona();
-        if (personaId !== $settings.activePersona) {
-            settings.instantSet({ activePersona: personaId });
-        }
-        goto(`${base}/settings/personas/${personaId}`);
-    }
-
-    let hasChanges = $derived(
-        selectedPersona &&
-            (editableName !== selectedPersona.name ||
-                editableOccupation !== selectedPersona.occupation ||
-                editableStance !== selectedPersona.stance ||
-                editablePrompt !== selectedPersona.prompt)
-    );
+	onMount(() => {
+		// On desktop, redirect to the first active persona or first persona
+		if (browser && isDesktop(window)) {
+			const targetId = $settings.activePersonas[0] || $settings.personas[0]?.id || "";
+			if (targetId) {
+				goto(`${base}/settings/personas/${targetId}`, { replaceState: true });
+			}
+		}
+	});
 </script>
 
-<div class="grid h-full w-full grid-cols-1 grid-rows-[1fr] gap-x-6 md:grid-cols-3">
-	<!-- Left Panel - Persona List -->
-	<div
-		class="scrollbar-custom col-span-1 flex flex-col overflow-y-auto whitespace-nowrap rounded-r-xl bg-gradient-to-l from-gray-50 to-10% dark:from-gray-700/40 md:pr-6"
-	>
-		<!-- Filter input -->
-		<div class="px-2 py-2">
-			<input
-				bind:value={personaFilter}
-				type="search"
-				placeholder="Search by name"
-				aria-label="Search personas by name"
-				class="w-full rounded-full border border-gray-300 bg-white px-4 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder:text-gray-500 dark:focus:ring-gray-700"
-			/>
-		</div>
-
-        {#each filteredPersonas as persona (persona.id)}
-            <button
-				type="button"
-                onclick={() => goto(`${base}/settings/personas/${persona.id}`)}
-				ondblclick={() => handleDoubleClick(persona.id)}
-				class="group relative flex h-9 w-full flex-none items-center gap-1 rounded-lg px-3 text-[13px] transition-all {selectedPersonaId ===
-				persona.id
-                    ? '!bg-gray-100 !text-gray-800 dark:!bg-gray-700 dark:!text-gray-200'
-                    : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/60'} md:rounded-xl md:px-3"
-				aria-label="Select {persona.name}"
-			>
-				<div class="mr-auto flex items-center gap-1 truncate">
-                    <span class="truncate">{persona.name}</span>
-				</div>
-                {#if persona.id === $settings.activePersona}
-                    <div
-                        class="flex h-[21px] items-center rounded-md bg-black/90 px-2 text-[11px] font-semibold leading-none text-white dark:bg-white dark:text-black"
-                    >
-                        Active
-                    </div>
-                {/if}
-			</button>
-		{/each}
-
-		<button
-			type="button"
-			onclick={createNewPersona}
-			class="group sticky bottom-0 mt-1 flex h-9 w-full flex-none items-center justify-center gap-1 rounded-lg bg-white px-3 text-[13px] text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-800/60 md:rounded-xl md:px-3"
-			aria-label="Create new persona"
-		>
-			+ New Persona
-		</button>
-	</div>
-
-	<!-- Right Panel - Persona Detail View -->
-	{#if selectedPersona}
-        <div class="scrollbar-custom col-span-2 flex h-full w-full flex-col overflow-y-auto px-1">
-            <div class="grid grid-cols-1 gap-4 pb-24 md:grid-cols-3 md:gap-6">
-                <div class="flex flex-col gap-2 md:col-span-1">
-					<label for="persona-name" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-						Persona Name
-					</label>
-					<input
-						id="persona-name"
-						type="text"
-						bind:value={editableName}
-						class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
-						maxlength="100"
-					/>
-				</div>
-
-                <div class="flex flex-col gap-2 md:col-span-1">
-                    <label for="occupation" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        Role
-					</label>
-					<input
-						id="occupation"
-						type="text"
-						bind:value={editableOccupation}
-						class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
-						maxlength="200"
-					/>
-				</div>
-
-                <div class="flex flex-col gap-2 md:col-span-1">
-					<label for="stance" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-						Stance
-					</label>
-					<input
-						id="stance"
-						type="text"
-						bind:value={editableStance}
-						class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
-						maxlength="200"
-					/>
-				</div>
-
-                <div class="flex flex-col gap-2 md:col-span-2">
-					<label for="system-prompt" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-						System Prompt
-					</label>
-					<textarea
-						id="system-prompt"
-						bind:value={editablePrompt}
-                        rows="18"
-						class="w-full resize-none rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
-						maxlength="10000"
-					></textarea>
-				</div>
-			</div>
-
-			<!-- Sticky buttons -->
-			<div
-				class="sticky bottom-0 flex flex-wrap gap-2 border-t border-gray-200 bg-white py-4 dark:border-gray-700 dark:bg-gray-900"
-			>
-                <button
-                    class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-					onclick={activatePersona}
-					disabled={selectedPersona.id === $settings.activePersona}
-				>
-					{selectedPersona.id === $settings.activePersona ? "Active" : "Activate"}
-				</button>
-				<button
-					class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-					onclick={savePersona}
-					disabled={!hasChanges}
-				>
-					Save
-				</button>
-				<button
-					class="ml-auto flex items-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 dark:border-red-700 dark:bg-gray-800 dark:hover:bg-red-900/20"
-					onclick={deletePersona}
-				>
-					<CarbonTrashCan />
-					Delete
-				</button>
-			</div>
-		</div>
-	{/if}
+<div class="flex h-full w-full items-center justify-center text-gray-500 dark:text-gray-400">
+    {#if browser && isDesktop(window)}
+        <p>Loading...</p>
+    {:else}
+        <p>Select a persona from the list</p>
+    {/if}
 </div>
 

src/routes/settings/(nav)/personas/+page.ts

@@ -1,15 +1,4 @@
-import { base } from "$app/paths";
-import { redirect } from "@sveltejs/kit";
-
 export async function load({ parent }) {
 	const data = await parent();
-	const active = data.settings?.activePersona;
-	const first = data.settings?.personas?.[0]?.id;
-	if (active) {
-		redirect(302, `${base}/settings/personas/${active}`);
-	}
-	if (first) {
-		redirect(302, `${base}/settings/personas/${first}`);
-	}
-	redirect(302, `${base}/settings`);
+	return data;
 }

src/routes/settings/(nav)/personas/[...persona]/+page.svelte

@@ -0,0 +1,435 @@
+<script lang="ts">
+    import { base } from "$app/paths";
+    import { goto } from "$app/navigation";
+    import { page } from "$app/state";
+    import { useSettingsStore } from "$lib/stores/settings";
+    import CarbonTrashCan from "~icons/carbon/trash-can";
+    import CarbonEdit from "~icons/carbon/edit";
+
+    const settings = useSettingsStore();
+
+    // Selected persona comes from the URL param to mirror model routing
+    let selectedPersonaId = $derived(page.params.persona ?? $settings.personas[0]?.id ?? null);
+    let selectedPersona = $derived(
+        $settings.personas.find((p) => p.id === selectedPersonaId) ?? $settings.personas[0]
+    );
+
+    // Local editable copy of selected persona
+    let editableName = $state("");
+    let editableAge = $state("");
+    let editableGender = $state("");
+    let editableJobSector = $state("");
+    let editableStance = $state("");
+    let editableCommunicationStyle = $state("");
+    let editableGoalInDebate = $state("");
+    let editableIncomeBracket = $state("");
+    let editablePoliticalLeanings = $state("");
+    let editableGeographicContext = $state("");
+
+    // Update editable fields when selection changes
+    $effect(() => {
+        if (selectedPersona) {
+            editableName = selectedPersona.name;
+            editableAge = selectedPersona.age;
+            editableGender = selectedPersona.gender;
+            editableJobSector = selectedPersona.jobSector || "";
+            editableStance = selectedPersona.stance || "";
+            editableCommunicationStyle = selectedPersona.communicationStyle || "";
+            editableGoalInDebate = selectedPersona.goalInDebate || "";
+            editableIncomeBracket = selectedPersona.incomeBracket || "";
+            editablePoliticalLeanings = selectedPersona.politicalLeanings || "";
+            editableGeographicContext = selectedPersona.geographicContext || "";
+        }
+    });
+
+    function savePersona() {
+        if (!selectedPersona) return;
+
+        const updatedPersonas = $settings.personas.map((p) =>
+            p.id === selectedPersona.id
+                ? {
+                        ...p,
+                        name: editableName,
+                        age: editableAge,
+                        gender: editableGender,
+                        jobSector: editableJobSector,
+                        stance: editableStance,
+                        communicationStyle: editableCommunicationStyle,
+                        goalInDebate: editableGoalInDebate,
+                        incomeBracket: editableIncomeBracket,
+                        politicalLeanings: editablePoliticalLeanings,
+                        geographicContext: editableGeographicContext,
+                        updatedAt: new Date(),
+                    }
+                : p
+        );
+
+        $settings.personas = updatedPersonas;
+    }
+
+	function togglePersona() {
+		if (!selectedPersona) return;
+		if (hasChanges) savePersona();
+		
+		const isActive = $settings.activePersonas.includes(selectedPersona.id);
+		if (isActive) {
+			// Prevent deactivating the last active persona
+			if ($settings.activePersonas.length === 1) {
+				alert("At least one persona must be active.");
+				return;
+			}
+			// Deactivate: remove from array
+			settings.instantSet({ activePersonas: $settings.activePersonas.filter(id => id !== selectedPersona.id) });
+		} else {
+			// Activate: add to array
+			settings.instantSet({ activePersonas: [...$settings.activePersonas, selectedPersona.id] });
+		}
+	}
+
+	function deletePersona() {
+		if (!selectedPersona) return;
+
+		// Can't delete if it's the only persona
+		if ($settings.personas.length === 1) {
+			alert("Cannot delete the last persona.");
+			return;
+		}
+
+		// Can't delete if it's an active persona
+		if ($settings.activePersonas.includes(selectedPersona.id)) {
+			alert("Cannot delete an active persona. Please deactivate it first.");
+			return;
+		}
+
+		if (confirm(`Are you sure you want to delete "${selectedPersona.name}"?`)) {
+			const nextId = $settings.personas.find((p) => p.id !== selectedPersona!.id)?.id || null;
+			$settings.personas = $settings.personas.filter((p) => p.id !== selectedPersona.id);
+			goto(`${base}/settings/personas/${nextId ?? ""}`);
+		}
+	}
+
+    let hasChanges = $derived(
+        selectedPersona &&
+            (editableName !== selectedPersona.name ||
+                editableAge !== selectedPersona.age ||
+                editableGender !== selectedPersona.gender ||
+                editableJobSector !== (selectedPersona.jobSector || "") ||
+                editableStance !== (selectedPersona.stance || "") ||
+                editableCommunicationStyle !== (selectedPersona.communicationStyle || "") ||
+                editableGoalInDebate !== (selectedPersona.goalInDebate || "") ||
+                editableIncomeBracket !== (selectedPersona.incomeBracket || "") ||
+                editablePoliticalLeanings !== (selectedPersona.politicalLeanings || "") ||
+                editableGeographicContext !== (selectedPersona.geographicContext || ""))
+    );
+
+	// Function to show datalist on focus
+	function showDatalist(event: FocusEvent) {
+		const input = event.target as HTMLInputElement;
+		// Dispatch a synthetic input event to trigger the datalist dropdown
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+	}
+</script>
+
+<!-- Persona Detail View -->
+{#if selectedPersona}
+	<div class="flex h-full w-full flex-col overflow-hidden">
+		<div class="flex flex-col gap-6">
+			<!-- Group 1: Core Identity -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Core Identity</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="persona-name" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Name <span class="text-red-500">*</span>
+						</label>
+						<div class="relative">
+							<input
+								id="persona-name"
+								type="text"
+								bind:value={editableName}
+								required
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="100"
+							/>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="age" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Age <span class="text-red-500">*</span>
+						</label>
+						<div class="relative">
+							<input
+								id="age"
+								type="text"
+								list="age-options"
+								bind:value={editableAge}
+								onfocus={showDatalist}
+								required
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="50"
+							/>
+							<datalist id="age-options">
+								<option value="18-25">18-25</option>
+								<option value="26-35">26-35</option>
+								<option value="36-45">36-45</option>
+								<option value="46-55">46-55</option>
+								<option value="56-65">56-65</option>
+								<option value="66+">66+</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="gender" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Gender <span class="text-red-500">*</span>
+						</label>
+						<div class="relative">
+							<input
+								id="gender"
+								type="text"
+								list="gender-options"
+								bind:value={editableGender}
+								onfocus={showDatalist}
+								required
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="50"
+							/>
+							<datalist id="gender-options">
+								<option value="Male">Male</option>
+								<option value="Female">Female</option>
+								<option value="Prefer not to say">Prefer not to say</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Group 2: Professional & Stance -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Professional & Stance</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="job-sector" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Job Sector
+						</label>
+						<div class="relative">
+							<input
+								id="job-sector"
+								type="text"
+								list="job-sector-options"
+								bind:value={editableJobSector}
+								onfocus={showDatalist}
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="200"
+							/>
+							<datalist id="job-sector-options">
+								<option value="Healthcare provider">Healthcare provider</option>
+								<option value="Small business owner">Small business owner</option>
+								<option value="Tech worker">Tech worker</option>
+								<option value="Teacher">Teacher</option>
+								<option value="Unemployed/Retired">Unemployed/Retired</option>
+								<option value="Government worker">Government worker</option>
+								<option value="Student">Student</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="stance" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Stance
+						</label>
+						<div class="relative">
+							<input
+								id="stance"
+								type="text"
+								list="stance-options"
+								bind:value={editableStance}
+								onfocus={showDatalist}
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="200"
+							/>
+							<datalist id="stance-options">
+								<option value="In Favor of Medicare for All">In Favor of Medicare for All</option>
+								<option value="Hardline Insurance Advocate">Hardline Insurance Advocate</option>
+								<option value="Improvement of Current System">Improvement of Current System</option>
+								<option value="Public Option Supporter">Public Option Supporter</option>
+								<option value="Status Quo">Status Quo</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Group 3: Communication & Goals -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Communication & Goals</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="communication-style" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Communication Style
+						</label>
+						<div class="relative">
+							<input
+								id="communication-style"
+								type="text"
+								list="communication-style-options"
+								bind:value={editableCommunicationStyle}
+								onfocus={showDatalist}
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="200"
+							/>
+							<datalist id="communication-style-options">
+								<option value="Direct">Direct</option>
+								<option value="Technical/Jargon use">Technical/Jargon use</option>
+								<option value="Informal">Informal</option>
+								<option value="Philosophical">Philosophical</option>
+								<option value="Pragmatic">Pragmatic</option>
+								<option value="Conversational">Conversational</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="goal-in-debate" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Goal in the Debate
+						</label>
+						<div class="relative">
+							<input
+								id="goal-in-debate"
+								type="text"
+								list="goal-in-debate-options"
+								bind:value={editableGoalInDebate}
+								onfocus={showDatalist}
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="300"
+							/>
+							<datalist id="goal-in-debate-options">
+								<option value="Keep discussion grounded">Keep discussion grounded</option>
+								<option value="Explain complexity">Explain complexity</option>
+								<option value="Advocate for change">Advocate for change</option>
+								<option value="Defend current system">Defend current system</option>
+								<option value="Find compromise">Find compromise</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Group 4: Demographics -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200">Demographics</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
+					<div class="flex flex-col gap-2">
+						<label for="income-bracket" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Income Bracket
+						</label>
+						<div class="relative">
+							<input
+								id="income-bracket"
+								type="text"
+								list="income-bracket-options"
+								bind:value={editableIncomeBracket}
+								onfocus={showDatalist}
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="100"
+							/>
+							<datalist id="income-bracket-options">
+								<option value="Low">Low</option>
+								<option value="Middle">Middle</option>
+								<option value="High">High</option>
+								<option value="Comfortable">Comfortable</option>
+								<option value="Struggling">Struggling</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="political-leanings" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Political Leanings
+						</label>
+						<div class="relative">
+							<input
+								id="political-leanings"
+								type="text"
+								list="political-leanings-options"
+								bind:value={editablePoliticalLeanings}
+								onfocus={showDatalist}
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="100"
+							/>
+							<datalist id="political-leanings-options">
+								<option value="Liberal">Liberal</option>
+								<option value="Conservative">Conservative</option>
+								<option value="Moderate">Moderate</option>
+								<option value="Libertarian">Libertarian</option>
+								<option value="Non-affiliated">Non-affiliated</option>
+								<option value="Progressive">Progressive</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<label for="geographic-context" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+							Geographic Context
+						</label>
+						<div class="relative">
+							<input
+								id="geographic-context"
+								type="text"
+								list="geographic-context-options"
+								bind:value={editableGeographicContext}
+								onfocus={showDatalist}
+								class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
+								maxlength="100"
+							/>
+							<datalist id="geographic-context-options">
+								<option value="Rural">Rural</option>
+								<option value="Urban">Urban</option>
+								<option value="Suburban">Suburban</option>
+							</datalist>
+							<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Sticky buttons -->
+		<div
+			class="sticky bottom-0 flex flex-wrap gap-2 py-4"
+		>
+			<button
+				class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+				onclick={togglePersona}
+			>
+				{$settings.activePersonas.includes(selectedPersona.id) ? "Deactivate" : "Activate"}
+			</button>
+			<button
+				class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+				onclick={savePersona}
+				disabled={!hasChanges}
+			>
+				Save
+			</button>
+			<button
+				class="ml-auto flex items-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 dark:border-red-700 dark:bg-gray-800 dark:hover:bg-red-900/20"
+				onclick={deletePersona}
+			>
+				<CarbonTrashCan />
+				Delete
+			</button>
+		</div>
+	</div>
+{/if}
+
+

src/routes/settings/(nav)/personas/[...persona]/+page.ts

@@ -0,0 +1,4 @@
+export async function load({ parent }) {
+	const data = await parent();
+	return data;
+}

src/routes/settings/(nav)/personas/[persona]/+page.svelte

@@ -1,277 +0,0 @@
-<script lang="ts">
-    import { base } from "$app/paths";
-    import { goto } from "$app/navigation";
-    import { page } from "$app/state";
-    import { useSettingsStore } from "$lib/stores/settings";
-    import type { Persona } from "$lib/types/Persona";
-    import { v4 } from "uuid";
-    import CarbonTrashCan from "~icons/carbon/trash-can";
-    import CarbonEdit from "~icons/carbon/edit";
-
-    const settings = useSettingsStore();
-
-    // Selected persona comes from the URL param to mirror model routing
-    let selectedPersonaId = $derived(page.params.persona ?? $settings.personas[0]?.id ?? null);
-    let selectedPersona = $derived(
-        $settings.personas.find((p) => p.id === selectedPersonaId) ?? $settings.personas[0]
-    );
-
-    // Local editable copy of selected persona
-    let editableName = $state("");
-    let editableOccupation = $state("");
-    let editableStance = $state("");
-    let editablePrompt = $state("");
-
-    // Search filter
-    let personaFilter = $state("");
-    const normalize = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, " ");
-    let queryTokens = $derived(normalize(personaFilter).trim().split(/\s+/).filter(Boolean));
-    let filteredPersonas = $derived(
-        $settings.personas.filter((persona) => {
-            const haystack = normalize(
-                `${persona.name} ${persona.occupation ?? ""} ${persona.stance ?? ""}`
-            );
-            return queryTokens.every((q) => haystack.includes(q));
-        })
-    );
-
-    // Update editable fields when selection changes
-    $effect(() => {
-        if (selectedPersona) {
-            editableName = selectedPersona.name;
-            editableOccupation = selectedPersona.occupation;
-            editableStance = selectedPersona.stance;
-            editablePrompt = selectedPersona.prompt;
-        }
-    });
-
-    function createNewPersona() {
-        const newPersona: Persona = {
-            id: v4(),
-            name: "New Persona",
-            occupation: "",
-            stance: "",
-            prompt: "",
-            isDefault: false,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-        };
-
-        $settings.personas = [...$settings.personas, newPersona];
-        // Navigate to the new persona
-        goto(`${base}/settings/personas/${newPersona.id}`);
-    }
-
-    function savePersona() {
-        if (!selectedPersona) return;
-
-        const updatedPersonas = $settings.personas.map((p) =>
-            p.id === selectedPersona.id
-                ? {
-                        ...p,
-                        name: editableName,
-                        occupation: editableOccupation,
-                        stance: editableStance,
-                        prompt: editablePrompt,
-                        updatedAt: new Date(),
-                    }
-                : p
-        );
-
-        $settings.personas = updatedPersonas;
-    }
-
-    function activatePersona() {
-        if (!selectedPersona) return;
-        if (hasChanges) savePersona();
-        settings.instantSet({ activePersona: selectedPersona.id });
-    }
-
-    function deletePersona() {
-        if (!selectedPersona) return;
-
-        // Can't delete if it's the only persona
-        if ($settings.personas.length === 1) {
-            alert("Cannot delete the last persona.");
-            return;
-        }
-
-        // Can't delete if it's the active persona
-        if (selectedPersona.id === $settings.activePersona) {
-            alert("Cannot delete the currently active persona. Please activate another persona first.");
-            return;
-        }
-
-        if (confirm(`Are you sure you want to delete "${selectedPersona.name}"?`)) {
-            const nextId = $settings.personas.find((p) => p.id !== selectedPersona!.id)?.id || null;
-            $settings.personas = $settings.personas.filter((p) => p.id !== selectedPersona.id);
-            goto(`${base}/settings/personas/${nextId ?? ""}`);
-        }
-    }
-
-    function handleDoubleClick(personaId: string) {
-        if (selectedPersona && hasChanges) savePersona();
-        if (personaId !== $settings.activePersona) {
-            settings.instantSet({ activePersona: personaId });
-        }
-        goto(`${base}/settings/personas/${personaId}`);
-    }
-
-    let hasChanges = $derived(
-        selectedPersona &&
-            (editableName !== selectedPersona.name ||
-                editableOccupation !== selectedPersona.occupation ||
-                editableStance !== selectedPersona.stance ||
-                editablePrompt !== selectedPersona.prompt)
-    );
-</script>
-
-<div class="grid h-full w-full grid-cols-1 grid-rows-[1fr] gap-x-6 md:grid-cols-3">
-	<!-- Left Panel - Persona List -->
-	<div
-		class="scrollbar-custom col-span-1 flex flex-col overflow-y-auto whitespace-nowrap rounded-r-xl bg-gradient-to-l from-gray-50 to-10% dark:from-gray-700/40 md:pr-6"
-	>
-		<!-- Filter input -->
-		<div class="px-2 py-2">
-			<input
-				bind:value={personaFilter}
-				type="search"
-				placeholder="Search by name"
-				aria-label="Search personas by name"
-				class="w-full rounded-full border border-gray-300 bg-white px-4 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder:text-gray-500 dark:focus:ring-gray-700"
-			/>
-		</div>
-
-		{#each filteredPersonas as persona (persona.id)}
-			<button
-				type="button"
-				onclick={() => goto(`${base}/settings/personas/${persona.id}`)}
-				ondblclick={() => handleDoubleClick(persona.id)}
-				class="group relative flex h-9 w-full flex-none items-center gap-1 rounded-lg px-3 text-[13px] transition-all {selectedPersonaId ===
-				persona.id
-					? '!bg-gray-100 !text-gray-800 dark:!bg-gray-700 dark:!text-gray-200'
-					: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/60'} md:rounded-xl md:px-3"
-				aria-label="Select {persona.name}"
-			>
-				<div class="mr-auto flex items-center gap-1 truncate">
-					<span class="truncate">{persona.name}</span>
-				</div>
-				{#if persona.id === $settings.activePersona}
-					<div
-						class="flex h-[21px] items-center rounded-md bg-black/90 px-2 text-[11px] font-semibold leading-none text-white dark:bg-white dark:text-black"
-					>
-						Active
-					</div>
-				{/if}
-			</button>
-		{/each}
-
-		<button
-			type="button"
-			onclick={createNewPersona}
-			class="group sticky bottom-0 mt-1 flex h-9 w-full flex-none items-center justify-center gap-1 rounded-lg bg-white px-3 text-[13px] text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-800/60 md:rounded-xl md:px-3"
-			aria-label="Create new persona"
-		>
-			+ New Persona
-		</button>
-	</div>
-
-	<!-- Right Panel - Persona Detail View -->
-	{#if selectedPersona}
-		<div class="col-span-2 flex h-full w-full flex-col overflow-hidden px-1">
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
-				<div class="flex flex-col gap-2 md:col-span-1">
-					<label for="persona-name" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-						Persona Name
-					</label>
-					<div class="relative">
-						<input
-							id="persona-name"
-							type="text"
-							bind:value={editableName}
-							class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-							maxlength="100"
-						/>
-						<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
-					</div>
-				</div>
-
-				<div class="flex flex-col gap-2 md:col-span-1">
-					<label for="occupation" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-						Role
-					</label>
-					<div class="relative">
-						<input
-							id="occupation"
-							type="text"
-							bind:value={editableOccupation}
-							class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-							maxlength="200"
-						/>
-						<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
-					</div>
-				</div>
-
-				<div class="flex flex-col gap-2 md:col-span-1">
-					<label for="stance" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-						Stance
-					</label>
-					<div class="relative">
-						<input
-							id="stance"
-							type="text"
-							bind:value={editableStance}
-							class="peer w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-							maxlength="200"
-						/>
-						<CarbonEdit class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
-					</div>
-				</div>
-
-				<div class="flex min-h-0 flex-1 flex-col gap-2 md:col-span-3">
-					<label for="system-prompt" class="text-sm font-medium text-gray-700 dark:text-gray-300">
-						System Prompt
-					</label>
-					<div class="relative flex flex-1">
-						<textarea
-							id="system-prompt"
-							bind:value={editablePrompt}
-							class="peer scrollbar-custom h-full min-h-[300px] w-full flex-1 resize-none overflow-y-auto rounded-md border border-gray-300 bg-transparent px-3 py-2 pr-9 text-sm transition-colors focus:bg-white focus:outline-none dark:border-gray-600 dark:focus:bg-gray-900"
-							maxlength="10000"
-						></textarea>
-						<CarbonEdit class="pointer-events-none absolute right-3 top-3 text-gray-400 opacity-50 transition-opacity peer-focus:opacity-0 dark:text-gray-500" />
-					</div>
-				</div>
-			</div>
-
-			<!-- Sticky buttons -->
-			<div
-				class="sticky bottom-0 flex flex-wrap gap-2 py-4"
-			>
-				<button
-					class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-					onclick={activatePersona}
-					disabled={selectedPersona.id === $settings.activePersona}
-				>
-					{selectedPersona.id === $settings.activePersona ? "Active" : "Activate"}
-				</button>
-				<button
-					class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-					onclick={savePersona}
-					disabled={!hasChanges}
-				>
-					Save
-				</button>
-				<button
-					class="ml-auto flex items-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 dark:border-red-700 dark:bg-gray-800 dark:hover:bg-red-900/20"
-					onclick={deletePersona}
-				>
-					<CarbonTrashCan />
-					Delete
-				</button>
-			</div>
-		</div>
-	{/if}
-</div>
-
-