Feat/LLM chat

.changeset/chat-phase-one.md

@@ -0,0 +1,5 @@
+---
+'contextvm-site': minor
+---
+
+Add the phase-one chat workspace with OpenRouter auto mode, provider and model configuration, streaming chat, and persistent conversations.

package.json

@@ -62,6 +62,7 @@
 		"marked": "^17.0.5",
 		"mode-watcher": "^1.1.0",
 		"nostr-tools": "^2.23.3",
+		"openai": "^6.38.0",
 		"rxjs": "^7.8.2",
 		"zod": "^4.3.6"
 	}

src/app.css

@@ -132,6 +132,7 @@
 
 	pre {
 		@apply overflow-x-auto rounded-lg bg-muted p-4;
+		max-width: 100%;
 	}
 
 	blockquote {
@@ -435,6 +436,28 @@
 	animation: fade-in-up 0.8s ease-out;
 }
 
+/* ============================================
+   Chat Bubble Overflow Containment
+   ============================================ */
+
+/* Force code blocks inside prose containers to respect parent width.
+   <pre> has an intrinsic min-width equal to content; this resets it. */
+.prose pre,
+.prose .code-block {
+	min-width: 0;
+	max-width: 100%;
+}
+
+.prose .code-block > div {
+	min-width: 0;
+	max-width: 100%;
+}
+
+/* Code blocks inside chat bubbles: force the scrollable container
+   to compute its width from the bubble, not from its content.
+   The key trick is width:0 + min-width:100% on the scroll wrapper,
+   applied via inline styles in ChatBubble.svelte's renderer. */
+
 /* ============================================
    Mobile Optimizations
    ============================================ */

src/lib/components/chat/AutoModeBanner.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import KeyRoundIcon from '@lucide/svelte/icons/key-round';
+	import SparklesIcon from '@lucide/svelte/icons/sparkles';
+
+	let { usingDefaultKey = false }: { usingDefaultKey?: boolean } = $props();
+</script>
+
+<div
+	class="flex flex-col gap-3 rounded-lg border border-sidebar-border bg-sidebar-accent/45 px-3 py-2.5 text-sm sm:flex-row sm:items-center sm:justify-between"
+>
+	<div class="flex min-w-0 items-start gap-2.5">
+		<div
+			class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/70 text-primary"
+		>
+			<SparklesIcon class="h-4 w-4" />
+		</div>
+		<div class="min-w-0">
+			<p class="font-medium text-foreground">OpenRouter auto mode</p>
+			<p class="text-xs leading-5 text-muted-foreground">
+				Free models rotate automatically. Add your own key for steadier limits.
+			</p>
+		</div>
+	</div>
+	{#if usingDefaultKey}
+		<div
+			class="inline-flex w-fit items-center gap-1.5 rounded-md border border-border bg-background/70 px-2 py-1 text-xs text-muted-foreground"
+		>
+			<KeyRoundIcon class="h-3.5 w-3.5" />
+			Bundled public key
+		</div>
+	{/if}
+</div>