Upload 28 files

.dockerignore

@@ -0,0 +1,19 @@
+node_modules
+client/node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+dist
+client/dist
+server/public
+
+.git
+.gitignore
+.dockerignore
+.DS_Store
+Thumbs.db
+.idea
+.vscode
+

.gitignore

@@ -0,0 +1,30 @@
+node_modules/
+client/node_modules/
+
+# Build outputs
+dist/
+client/dist/
+server/public/
+
+# Vite and other caches
+.vite/
+client/.vite/
+.cache/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Env files
+.env
+.env.*
+!.env.example
+
+# OS / editor junk
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+

Dockerfile

@@ -0,0 +1,28 @@
+# Use Node.js 18 (LTS)
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy root package files
+COPY package.json package-lock.json ./
+
+# Copy client package files
+COPY client/package.json ./client/
+
+# Install dependencies for both backend and frontend
+RUN npm install
+RUN cd client && npm install
+
+# Copy source code
+COPY . .
+
+# Build the React frontend
+RUN npm run build
+
+# Expose Hugging Face Space port
+ENV PORT=7860
+EXPOSE 7860
+
+# Start the server
+CMD ["npm", "start"]

README.md

@@ -1,10 +1,109 @@
+# Vector AI 🚀
+
+Vector AI is a premium, self-hosted AI workspace that combines the conversational power of ChatGPT with the research capabilities of Perplexity. Built on top of **Flowise**, it provides a stunning, high-performance interface for both casual chat and professional document development.
+
+![Vector AI Preview](https://img.shields.io/badge/Status-Active-brightgreen)
+![Framework](https://img.shields.io/badge/Framework-React-blue)
+![Backend](https://img.shields.io/badge/Backend-Node.js-66cc33)
+![AI-Powered](https://img.shields.io/badge/Powered%20By-Flowise-orange)
+
+---
+
+## ✨ Key Features
+
+### 💬 Advanced Chat Interface
+- **SSE Streaming**: Ultra-fast, real-time response streaming for a seamless experience.
+- **Live Activity Indicators**: See exactly what the AI is doing—whether it's "Thinking", "Searching", or using specific tools.
+- **LaTeX & KaTeX**: Full support for mathematical equations, fractions, and scientific notation with beautiful rendering.
+- **File Uploads**: Support for processing PDF and text files directly within the chat.
+- **Speech-to-Text**: Built-in voice input for hands-free interaction.
+
+### 🧪 Vector Labs (Workspaces)
+- **Project-Based Editing**: Create and manage long-form documents in dedicated workspaces.
+- **Surgical AI Edits**: Highlight specific sections of your text and have the AI refine just that selection.
+- **Persistent State**: Projects are saved locally and persist through page refreshes and sessions.
+- **Global Context**: The AI understands the full document while you edit, ensuring consistency.
+
+### 📄 Export & Integration
+- **Modern Word Export**: Export your documents to `.docx` with clean, modern typography (Arial/Inter style).
+- **PDF Generation**: Quick PDF exports for sharing your work.
+- **Model Selector**: Easily switch between different Flowise Chatflows for specialized tasks.
+
 ---
-title: Vector
-emoji: 🐨
-colorFrom: yellow
-colorTo: blue
-sdk: docker
-pinned: false
+
+## 🚀 Quick Start
+
+### 1. Prerequisites
+- **Node.js** (v18 or higher)
+- A running **Flowise** instance (local, HF Spaces, or Railway)
+
+### 2. Installation
+```bash
+# Clone the repository
+git clone https://github.com/your-repo/vector-ai.git
+cd vector-ai
+
+# Install dependencies
+npm install
+```
+
+### 3. Configuration
+Create a `.env` file in the root directory:
+
+```env
+PORT=3000
+
+# Primary Chat Models
+MODEL_1_NAME="Vector GPT"
+MODEL_1_ID="YOUR_CHATFLOW_ID_1"
+MODEL_1_HOST="https://your-flowise.hf.space"
+
+MODEL_2_NAME="Vector Research"
+MODEL_2_ID="YOUR_CHATFLOW_ID_2"
+MODEL_2_HOST="https://your-flowise.hf.space"
+
+# Dedicated Labs Model (Optional - falls back to Model 1)
+LABS_MODEL_NAME="Vector Editor"
+LABS_MODEL_ID="YOUR_LABS_CHATFLOW_ID"
+LABS_MODEL_HOST="https://your-flowise.hf.space"
+
+# Optional: Flowise Authentication
+# FLOWISE_API_KEY=your_api_key
+```
+
+### 4. Development & Build
+```bash
+# Run in development mode
+npm run dev
+
+# Build the frontend and run the production server
+npm run build
+npm start
+```
+
+---
+
+## 🛠 Tech Stack
+
+- **Frontend**: [React](https://reactjs.org/) + [Vite](https://vitejs.dev/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/) + [Framer Motion](https://www.framer.com/motion/)
+- **Backend**: [Node.js](https://nodejs.org/) + [Express](https://expressjs.com/)
+- **Streaming**: Server-Sent Events (SSE)
+- **AI Orchestration**: [Flowise](https://flowiseai.com/)
+- **Rich Text**: [React Markdown](https://github.com/remarkjs/react-markdown) + [KaTeX](https://katex.org/)
+
+---
+
+## ☁️ Deployment
+
+### Render / Railway / HF Spaces
+This project is designed to be easily deployable as a single service:
+
+1. **Build Command**: `npm install && npm run build`
+2. **Start Command**: `npm start`
+3. **Environment Variables**: Add your `MODEL_*` variables in the platform's dashboard.
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 📝 License
+This project is licensed under the MIT License.

client/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="theme-color" content="#0F1117" />
+    <title>Vector</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="bg-slate-950 text-slate-100">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "flowise-chat-client",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "docx": "^9.5.1",
+    "eventsource-parser": "^1.1.2",
+    "framer-motion": "^12.27.1",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.0.0",
+    "katex": "^0.16.27",
+    "lucide-react": "^0.562.0",
+    "mammoth": "^1.11.0",
+    "pdf-parse": "^2.4.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "rehype-katex": "^7.0.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.4.2"
+  }
+}

client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

client/src/App.jsx

@@ -0,0 +1,171 @@
+import { useEffect, useRef, useState } from "react";
+import ChatSidebar from "./components/ChatSidebar.jsx";
+import ChatArea from "./components/ChatArea.jsx";
+import LabsArea from "./components/LabsArea.jsx";
+import { useChatSession } from "./hooks/useChatSession.js";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export default function App() {
+  const [theme, setTheme] = useState(
+    () => {
+      const stored = localStorage.getItem("flowise_theme");
+      if (stored === "light" || stored === "dark") return stored;
+      const prefersLight =
+        typeof window !== "undefined" &&
+        window.matchMedia?.("(prefers-color-scheme: light)")?.matches;
+      return prefersLight ? "light" : "dark";
+    }
+  );
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [activeView, setActiveView] = useState("chat"); // "chat" | "labs"
+  const [labsProjectLocked, setLabsProjectLocked] = useState(false); // Track labs project lock
+
+  const {
+    models,
+    selectedModelId,
+    setSelectedModelId,
+    selectedModel,
+    modelsIssues,
+    isModelsLoading,
+    modelsError,
+    reloadModels,
+    mode,
+    activeSession,
+    activeSessionId,
+    handleSelectSession,
+    isSessionLocked,
+    message,
+    setMessage,
+    isStreaming,
+    handleNewChat,
+    handleClearHistory,
+    handleModeChange,
+    handleSend,
+    historyList,
+    MODES,
+    ACTIVITY_LABELS
+  } = useChatSession();
+
+  const handleNewChatRef = useRef(handleNewChat);
+  useEffect(() => {
+    handleNewChatRef.current = handleNewChat;
+  }, [handleNewChat]);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("light", theme === "light");
+    localStorage.setItem("flowise_theme", theme);
+  }, [theme]);
+
+  // Fix mobile viewport height - reliable cross-browser approach
+  useEffect(() => {
+    const setAppHeight = () => {
+      const vh = window.innerHeight;
+      document.documentElement.style.setProperty('--app-height', `${vh}px`);
+      document.documentElement.classList.add('has-app-height');
+    };
+    setAppHeight();
+    window.addEventListener('resize', setAppHeight);
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', setAppHeight);
+    }
+    return () => {
+      window.removeEventListener('resize', setAppHeight);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', setAppHeight);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "n") {
+        e.preventDefault();
+        if (activeView === "chat") {
+          handleNewChatRef.current?.();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [activeView]);
+
+  // Handle responsive sidebar
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setSidebarOpen(false);
+      } else {
+        setSidebarOpen(true);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div className="relative flex h-screen w-full overflow-hidden bg-background">
+      {/* Background Layer - Pure Neutral */}
+      <div className="pointer-events-none absolute inset-0 bg-background" />
+
+      <ChatSidebar
+        open={sidebarOpen}
+        setOpen={setSidebarOpen}
+        models={models}
+        selectedModelId={selectedModelId}
+        onSelectModel={setSelectedModelId}
+        isModelsLoading={isModelsLoading}
+        modelsError={modelsError}
+        modelsIssues={modelsIssues}
+        onReloadModels={reloadModels}
+        mode={mode}
+        modes={MODES}
+        onModeChange={handleModeChange}
+        onNewChat={handleNewChat}
+        onClearHistory={handleClearHistory}
+        historyList={historyList}
+        activeSessionId={activeSessionId}
+        onSelectSession={handleSelectSession}
+        isSessionLocked={activeView === "labs" ? false : isSessionLocked}
+        theme={theme}
+        onToggleTheme={() =>
+          setTheme((prev) => (prev === "dark" ? "light" : "dark"))
+        }
+        activeView={activeView}
+        onNavigateToLabs={() => setActiveView("labs")}
+        onNavigateToChat={() => setActiveView("chat")}
+      />
+
+      <main className={cn(
+        "relative flex-1 flex flex-col transition-all duration-300 ease-in-out h-full",
+        sidebarOpen ? "md:ml-[280px]" : "ml-0"
+      )}>
+        {activeView === "chat" ? (
+          <ChatArea
+            activeSession={activeSession}
+            isStreaming={isStreaming}
+            message={message}
+            onMessageChange={setMessage}
+            onSend={handleSend}
+            onSelectFollowUp={setMessage}
+            activityLabels={ACTIVITY_LABELS}
+            toggleSidebar={() => setSidebarOpen(!sidebarOpen)}
+            sidebarOpen={sidebarOpen}
+            features={selectedModel?.features || { uploads: false, stt: false }}
+          />
+        ) : (
+          <LabsArea
+            toggleSidebar={() => setSidebarOpen(!sidebarOpen)}
+            sidebarOpen={sidebarOpen}
+            onProjectLockChange={setLabsProjectLocked}
+          />
+        )}
+      </main>
+    </div>
+  );
+}

client/src/components/AudioVisualizer.jsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useRef } from "react";
+
+/**
+ * AudioVisualizer - Gemini-style organic fluid waveform
+ * Uses Web Audio API to visualize microphone input in real-time
+ */
+export default function AudioVisualizer({ stream, isActive = true }) {
+    const canvasRef = useRef(null);
+    const animationRef = useRef(null);
+    const analyserRef = useRef(null);
+    const audioContextRef = useRef(null);
+
+    useEffect(() => {
+        if (!stream || !isActive) {
+            // Cleanup when not active
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+            return;
+        }
+
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const ctx = canvas.getContext("2d");
+
+        // Set up high-DPI canvas
+        const dpr = window.devicePixelRatio || 1;
+        const rect = canvas.getBoundingClientRect();
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        ctx.scale(dpr, dpr);
+
+        // Create audio context and analyser
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        audioContextRef.current = audioContext;
+
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = 256;
+        analyser.smoothingTimeConstant = 0.8;
+        analyserRef.current = analyser;
+
+        // Connect microphone stream to analyser
+        const source = audioContext.createMediaStreamSource(stream);
+        source.connect(analyser);
+
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+
+        // Animation variables for organic movement
+        let phase = 0;
+        const baseAmplitude = rect.height * 0.3;
+
+        const draw = () => {
+            if (!isActive) return;
+
+            animationRef.current = requestAnimationFrame(draw);
+            analyser.getByteFrequencyData(dataArray);
+
+            // Clear canvas with fade effect for trails
+            ctx.fillStyle = "rgba(15, 15, 15, 0.15)";
+            ctx.fillRect(0, 0, rect.width, rect.height);
+
+            // Calculate average volume for responsiveness
+            const average = dataArray.reduce((a, b) => a + b, 0) / bufferLength;
+            const normalizedVolume = average / 255;
+
+            // Draw multiple organic waves
+            const waves = 3;
+            for (let w = 0; w < waves; w++) {
+                ctx.beginPath();
+
+                const waveOffset = (w / waves) * Math.PI * 0.5;
+                const opacity = 0.4 + (w / waves) * 0.4;
+
+                // Gradient color based on wave index
+                const hue = 187 + w * 15; // Cyan to teal range
+                ctx.strokeStyle = `hsla(${hue}, 85%, 55%, ${opacity})`;
+                ctx.lineWidth = 2 + (waves - w);
+                ctx.lineCap = "round";
+                ctx.lineJoin = "round";
+
+                const centerY = rect.height / 2;
+                const points = 50;
+
+                for (let i = 0; i <= points; i++) {
+                    const x = (i / points) * rect.width;
+
+                    // Sample frequency data
+                    const dataIndex = Math.floor((i / points) * bufferLength);
+                    const frequency = dataArray[dataIndex] / 255;
+
+                    // Combine multiple sine waves for organic effect
+                    const wave1 = Math.sin((i / points) * Math.PI * 4 + phase + waveOffset) * 0.6;
+                    const wave2 = Math.sin((i / points) * Math.PI * 2 + phase * 0.7) * 0.3;
+                    const wave3 = Math.sin((i / points) * Math.PI * 6 + phase * 1.3) * 0.1;
+
+                    const combinedWave = wave1 + wave2 + wave3;
+                    const amplitude = baseAmplitude * (0.2 + normalizedVolume * 0.8 + frequency * 0.5);
+
+                    const y = centerY + combinedWave * amplitude;
+
+                    if (i === 0) {
+                        ctx.moveTo(x, y);
+                    } else {
+                        // Use quadratic curves for smoother lines
+                        const prevX = ((i - 1) / points) * rect.width;
+                        const cpX = (prevX + x) / 2;
+                        ctx.quadraticCurveTo(prevX, ctx.currentY || y, cpX, y);
+                    }
+                    ctx.currentY = y;
+                }
+
+                ctx.stroke();
+            }
+
+            // Draw center glow based on volume
+            const glowRadius = 30 + normalizedVolume * 40;
+            const gradient = ctx.createRadialGradient(
+                rect.width / 2, rect.height / 2, 0,
+                rect.width / 2, rect.height / 2, glowRadius
+            );
+            gradient.addColorStop(0, `rgba(34, 211, 238, ${0.3 * normalizedVolume})`);
+            gradient.addColorStop(1, "rgba(34, 211, 238, 0)");
+
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.arc(rect.width / 2, rect.height / 2, glowRadius, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Update phase for animation
+            phase += 0.05 + normalizedVolume * 0.1;
+        };
+
+        draw();
+
+        return () => {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+            if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+                audioContextRef.current.close();
+            }
+        };
+    }, [stream, isActive]);
+
+    return (
+        <canvas
+            ref={canvasRef}
+            className="w-full h-12 rounded-lg"
+            style={{
+                background: "linear-gradient(180deg, rgba(15,15,15,0.9) 0%, rgba(20,20,20,0.95) 100%)"
+            }}
+        />
+    );
+}

client/src/components/ChatArea.jsx

@@ -0,0 +1,1172 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import { motion, AnimatePresence } from "framer-motion";
+import "katex/dist/katex.min.css";
+import {
+  SendHorizontal,
+  Sparkles,
+  Globe,
+  ArrowRight,
+  ArrowUp,
+  Plus,
+  Menu,
+  Copy,
+  RefreshCw,
+  Paperclip,
+  Mic,
+  X,
+  Check,
+  ChevronDown
+} from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import ErrorBoundary from "./ErrorBoundary.jsx";
+import AudioVisualizer from "./AudioVisualizer.jsx";
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+const allowedLinkProtocols = new Set(["http:", "https:", "mailto:", "tel:"]);
+
+function sanitizeLinkUrl(url) {
+  if (typeof url !== "string" || !url) return "";
+  const trimmed = url.trim();
+  if (trimmed.startsWith("#")) return trimmed;
+  try {
+    const parsed = new URL(trimmed, "https://local.invalid");
+    if (allowedLinkProtocols.has(parsed.protocol)) return trimmed;
+    return "";
+  } catch (error) {
+    return "";
+  }
+}
+
+const markdownSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    a: [
+      ...(defaultSchema.attributes?.a || []),
+      ["target", "_blank"],
+      ["rel", "noopener noreferrer"]
+    ],
+    code: [...(defaultSchema.attributes?.code || []), "className"],
+    // Allow KaTeX elements and attributes
+    span: [
+      ...(defaultSchema.attributes?.span || []),
+      "className",
+      "style",
+      "aria-hidden"
+    ],
+    annotation: ["encoding"],
+    semantics: []
+  },
+  tagNames: [
+    ...(defaultSchema.tagNames || []),
+    "math",
+    "annotation",
+    "semantics",
+    "mtext",
+    "mn",
+    "mo",
+    "mi",
+    "mspace",
+    "mover",
+    "munder",
+    "munderover",
+    "msup",
+    "msub",
+    "msubsup",
+    "mfrac",
+    "mroot",
+    "msqrt",
+    "mtable",
+    "mtr",
+    "mtd",
+    "mlabeledtr",
+    "mrow",
+    "menclose",
+    "mstyle",
+    "mpadded",
+    "mphantom"
+  ]
+};
+
+function MarkdownContent({ content }) {
+  const [copiedCode, setCopiedCode] = React.useState(null);
+
+  const handleCopyCode = (code, index) => {
+    navigator.clipboard?.writeText(code);
+    setCopiedCode(index);
+    setTimeout(() => setCopiedCode(null), 2000);
+  };
+
+  return (
+    <div className="markdown-content prose prose-invert max-w-none">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeKatex, [rehypeSanitize, markdownSchema]]}
+        transformLinkUri={sanitizeLinkUrl}
+        transformImageUri={sanitizeLinkUrl}
+        components={{
+          a: (props) => (
+            <a
+              {...props}
+              target="_blank"
+              rel="noopener noreferrer"
+              href={sanitizeLinkUrl(props.href)}
+              className="text-white underline decoration-border hover:text-white/90 hover:decoration-muted-foreground/40 transition-colors"
+            />
+          ),
+          pre: ({ children, ...props }) => {
+            const codeContent = React.Children.toArray(children)
+              .map(child => {
+                if (React.isValidElement(child) && child.props?.children) {
+                  return typeof child.props.children === 'string'
+                    ? child.props.children
+                    : '';
+                }
+                return '';
+              })
+              .join('');
+            const index = Math.random().toString(36).substr(2, 9);
+
+            return (
+              <div className="relative group my-4 overflow-hidden">
+                <pre
+                  {...props}
+                  className="bg-popover border border-border rounded-lg p-4 overflow-x-auto text-sm max-w-full"
+                >
+                  {children}
+                </pre>
+                <button
+                  onClick={() => handleCopyCode(codeContent, index)}
+                  className="absolute top-2 right-2 p-1.5 rounded-md bg-foreground/10 hover:bg-foreground/20 text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-all"
+                  aria-label="Copy code"
+                >
+                  {copiedCode === index ? (
+                    <Check size={14} className="text-green-400" />
+                  ) : (
+                    <Copy size={14} />
+                  )}
+                </button>
+              </div>
+            );
+          },
+          code: ({ inline, className, children, ...props }) => {
+            if (inline) {
+              return (
+                <code
+                  className="px-1.5 py-0.5 rounded-md bg-foreground/10 text-white text-sm font-mono"
+                  {...props}
+                >
+                  {children}
+                </code>
+              );
+            }
+            return (
+              <code className={cn("text-white/90 font-mono text-sm", className)} {...props}>
+                {children}
+              </code>
+            );
+          },
+          table: ({ children, ...props }) => (
+            <div className="my-4 overflow-x-auto rounded-lg border border-border max-w-full">
+              <table className="min-w-full divide-y divide-border" {...props}>
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children, ...props }) => (
+            <thead className="bg-foreground/5" {...props}>
+              {children}
+            </thead>
+          ),
+          th: ({ children, ...props }) => (
+            <th
+              className="px-3 py-2 md:px-4 md:py-3 text-left text-xs font-semibold text-white uppercase tracking-wider border-r border-border last:border-r-0"
+              {...props}
+            >
+              {children}
+            </th>
+          ),
+          td: ({ children, ...props }) => (
+            <td
+              className="px-3 py-2 md:px-4 md:py-3 text-sm text-white/80 border-r border-border last:border-r-0"
+              {...props}
+            >
+              {children}
+            </td>
+          ),
+          tr: ({ children, ...props }) => (
+            <tr
+              className="border-b border-border last:border-b-0 hover:bg-foreground/5 transition-colors"
+              {...props}
+            >
+              {children}
+            </tr>
+          ),
+          ul: ({ children, ...props }) => (
+            <ul className="my-3 ml-1 space-y-2 list-none" {...props}>
+              {children}
+            </ul>
+          ),
+          ol: ({ children, ...props }) => (
+            <ol className="my-3 ml-1 space-y-2 list-none counter-reset-item" {...props}>
+              {children}
+            </ol>
+          ),
+          li: ({ children, ordered, ...props }) => (
+            <li className="relative pl-6 text-white/90" {...props}>
+              <span className="absolute left-0 text-muted-foreground">•</span>
+              {children}
+            </li>
+          ),
+          h1: ({ children, ...props }) => (
+            <h1 className="text-xl md:text-2xl font-bold text-white mt-6 mb-4 pb-2 border-b border-border" {...props}>
+              {children}
+            </h1>
+          ),
+          h2: ({ children, ...props }) => (
+            <h2 className="text-lg md:text-xl font-semibold text-white mt-5 mb-3" {...props}>
+              {children}
+            </h2>
+          ),
+          h3: ({ children, ...props }) => (
+            <h3 className="text-base md:text-lg font-semibold text-white mt-4 mb-2" {...props}>
+              {children}
+            </h3>
+          ),
+          p: ({ children, ...props }) => (
+            <p className="my-[0.7em] text-white/90 leading-[1.65]" {...props}>
+              {children}
+            </p>
+          ),
+          strong: ({ children, ...props }) => (
+            <strong className="font-bold text-white" {...props}>
+              {children}
+            </strong>
+          ),
+          em: ({ children, ...props }) => (
+            <em className="italic text-white/90" {...props}>
+              {children}
+            </em>
+          ),
+          blockquote: ({ children, ...props }) => (
+            <blockquote
+              className="my-4 pl-4 border-l-4 border-border bg-foreground/5 py-2 pr-4 rounded-r-lg italic text-white/80"
+              {...props}
+            >
+              {children}
+            </blockquote>
+          ),
+          hr: (props) => (
+            <hr className="my-6 border-t border-border" {...props} />
+          )
+        }}
+      >
+        {content || ""}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+function extractSources(text) {
+  const urls = Array.from(
+    new Set(
+      (text.match(/https?:\/\/[^\s)]+/g) || []).map((item) =>
+        item.replace(/[.,)\]]$/, "")
+      )
+    )
+  );
+  return urls;
+}
+
+// Memoized Message Row Component
+const MessageRow = React.memo(({
+  msg,
+  index,
+  isLastAssistant,
+  isStreaming,
+  showSearching,
+  activityLabels,
+  onMessageChange,
+  onSend,
+  activeSession,
+  onCopy
+}) => {
+  const sources = msg.content ? extractSources(msg.content) : [];
+  const hasActivities = Array.isArray(msg.activities) && msg.activities.length > 0;
+  const [copied, setCopied] = React.useState(false);
+
+  // Only show phase animation for the LAST assistant message AND when streaming
+  let phase = null;
+  let activeToolName = null;
+  const toolActivities = hasActivities
+    ? msg.activities.filter(a => a.startsWith("tool:")).map(a => a.slice(5))
+    : [];
+
+  if (isStreaming && isLastAssistant && msg.role === "assistant") {
+    if (toolActivities.length > 0) {
+      phase = "tool";
+      activeToolName = toolActivities[toolActivities.length - 1];
+    } else if (!hasActivities) {
+      phase = showSearching ? "searching" : "thinking";
+    } else if (msg.activities.includes("reasoning")) {
+      phase = "reasoning";
+    } else if (msg.activities.includes("searching")) {
+      phase = "searching";
+    } else if (msg.activities.includes("reading")) {
+      phase = "reading";
+    } else if (msg.activities.includes("planning")) {
+      phase = "planning";
+    } else if (msg.activities.includes("executing")) {
+      phase = "executing";
+    } else if (msg.activities.includes("writing")) {
+      phase = "writing";
+    } else {
+      phase = "thinking";
+    }
+  }
+
+  const handleCopy = () => {
+    navigator.clipboard?.writeText(msg.content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
+      className={cn(
+        "flex w-full group",
+        msg.role === "user" ? "justify-end" : "justify-start"
+      )}
+    >
+      <div className={cn(
+        "flex flex-col gap-2.5 min-w-0",
+        msg.role === "user"
+          ? "items-end max-w-[85%] md:max-w-[75%]"
+          : "items-start max-w-full"
+      )}>
+        <div className="font-semibold text-[13px] text-white/90 mb-0.5 px-0.5">
+          {msg.role === "user" ? "You" : "Vector"}
+        </div>
+
+        {/* Activity panel — shows while streaming OR persists after streaming for completed steps */}
+        {msg.role === "assistant" && (msg.agentSteps?.length > 0 || phase) && (
+          <ActivityPanel
+            steps={msg.agentSteps || []}
+            phase={phase}
+            toolName={activeToolName}
+            isStreaming={isStreaming && isLastAssistant}
+          />
+        )}
+
+        <div className={cn("text-[15px] leading-[1.6] w-full", msg.role === "user" && "text-right")}>
+          {msg.role === "assistant" ? (
+            <div className="text-white/95">
+              <MarkdownContent content={msg.content} />
+            </div>
+          ) : (
+            <div className="bg-[#2F2F2F] rounded-2xl px-4 py-3 text-white inline-block max-w-full break-words">
+              {msg.content}
+            </div>
+          )}
+          {isStreaming && isLastAssistant && msg.role === "assistant" && (
+            <span className="inline-block w-1.5 h-5 bg-white/70 animate-pulse ml-0.5 align-middle rounded-sm" />
+          )}
+        </div>
+
+        {msg.role === "assistant" && msg.content && !isStreaming && (
+          <div className="mt-2 w-full">
+            {sources.length > 0 && (
+              <div className="flex gap-2 overflow-x-auto pb-2 mb-3 custom-scrollbar">
+                {sources.map((item, idx) => (
+                  <a
+                    key={idx}
+                    href={item}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex-shrink-0 flex items-center gap-2 px-3 py-2 rounded-lg bg-[#2A2A2A] border border-border/40 text-xs text-muted-foreground hover:text-white hover:border-border/60 transition-all"
+                  >
+                    <Globe size={13} />
+                    <span className="truncate max-w-[120px]">{new URL(item).hostname.replace('www.', '')}</span>
+                  </a>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-1.5">
+              <button
+                onClick={handleCopy}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-white hover:bg-white/5 transition-all"
+                aria-label={copied ? "Copied" : "Copy"}
+              >
+                {copied ? <Check size={14} className="text-green-400" /> : <Copy size={14} />}
+                <span className="hidden sm:inline">{copied ? "Copied" : "Copy"}</span>
+              </button>
+              <button
+                onClick={() => {
+                  const lastUserMsg = [...(activeSession?.messages || [])]
+                    .slice(0, index)
+                    .reverse()
+                    .find(m => m.role === "user");
+                  if (lastUserMsg) {
+                    onMessageChange(lastUserMsg.content);
+                    setTimeout(() => onSend(), 50);
+                  }
+                }}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-white hover:bg-white/5 transition-all"
+                aria-label="Retry"
+              >
+                <RefreshCw size={14} />
+                <span className="hidden sm:inline">Retry</span>
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+});
+
+export default function ChatArea({
+  activeSession,
+  isStreaming,
+  message,
+  onMessageChange,
+  onSend,
+  onSelectFollowUp,
+  activityLabels,
+  toggleSidebar,
+  sidebarOpen,
+  features = { uploads: false, stt: false }
+}) {
+  const scrollRef = useRef(null);
+  const messagesEndRef = useRef(null);
+  const userScrolledRef = useRef(false);
+  const lastScrollTopRef = useRef(0);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    let timeoutId = null;
+    const onScroll = () => {
+      el.classList.add("scrolling");
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => el.classList.remove("scrolling"), 150);
+
+      // Detect if user manually scrolled up
+      const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+      const scrolledUp = el.scrollTop < lastScrollTopRef.current;
+
+      if (scrolledUp && !isAtBottom) {
+        userScrolledRef.current = true;
+      } else if (isAtBottom) {
+        userScrolledRef.current = false;
+      }
+
+      lastScrollTopRef.current = el.scrollTop;
+    };
+
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, []);
+
+  // Track streaming time for "Searching..." status
+  const [showSearching, setShowSearching] = React.useState(false);
+  const statusTimerRef = React.useRef(null);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setShowSearching(false);
+      if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
+      statusTimerRef.current = setTimeout(() => setShowSearching(true), 2000);
+      return () => {
+        if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
+      };
+    } else {
+      setShowSearching(false);
+    }
+  }, [isStreaming]);
+
+  // Smart auto-scroll: only scroll if user hasn't manually scrolled up
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    // Don't auto-scroll if user has scrolled up
+    if (userScrolledRef.current) return;
+
+    // Instant scroll to bottom during streaming to prevent jarring motion
+    // Use smooth scroll only when not streaming
+    const scrollToBottom = () => {
+      el.scrollTo({
+        top: el.scrollHeight,
+        behavior: isStreaming ? 'instant' : 'smooth'
+      });
+    };
+
+    // Use requestAnimationFrame for smoother scrolling during streaming
+    const rafId = requestAnimationFrame(scrollToBottom);
+
+    return () => cancelAnimationFrame(rafId);
+  }, [activeSession?.messages, isStreaming]);
+
+  // Reset user scroll flag when new message starts
+  useEffect(() => {
+    if (isStreaming) {
+      userScrolledRef.current = false;
+    }
+  }, [isStreaming]);
+
+  const isEmpty = !activeSession?.messages || activeSession.messages.length === 0;
+
+  return (
+    <div className="flex-1 flex flex-col h-full relative bg-card">
+      {/* Mobile Header */}
+      <div className="md:hidden flex items-center p-3 border-b border-border/30 bg-card sticky top-0 z-10">
+        <button
+          onClick={toggleSidebar}
+          className="p-2 -ml-2 text-muted-foreground hover:text-white focus-visible:outline-none rounded-lg"
+          aria-label="Open sidebar"
+        >
+          <Menu size={20} />
+        </button>
+        <span className="font-semibold text-sm ml-2 text-white">
+          Vector
+        </span>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar bg-card" ref={scrollRef}>
+        {isEmpty ? (
+          /* Empty State / Hero Section */
+          <div className="flex flex-col items-center justify-center min-h-[80vh] px-4">
+            <div className="w-14 h-14 md:w-16 md:h-16 rounded-2xl bg-foreground/5 border border-border flex items-center justify-center mb-6">
+              <Sparkles className="text-muted-foreground w-7 h-7 md:w-8 md:h-8" />
+            </div>
+            <h1 className="text-2xl md:text-4xl font-display font-medium text-center mb-8 md:mb-12 text-white">
+              Where knowledge begins
+            </h1>
+
+            <div className="w-full max-w-xl px-4">
+              <SearchInput
+                value={message}
+                onChange={onMessageChange}
+                onSend={onSend}
+                disabled={isStreaming}
+                isHero={true}
+                features={features}
+              />
+
+              <div className="mt-6 md:mt-8 flex flex-wrap justify-center gap-2">
+                {[
+                  "How does AI work?",
+                  "Write a Python script",
+                  "Latest tech news"
+                ].map((suggestion) => (
+                  <button
+                    key={suggestion}
+                    onClick={() => {
+                      onMessageChange(suggestion);
+                      setTimeout(() => onSend(), 100);
+                    }}
+                    className="px-3 py-2 md:px-4 rounded-full border border-border bg-foreground/5 text-xs md:text-sm text-muted-foreground hover:bg-foreground/8 hover:text-white transition-colors font-medium focus-visible:outline-none"
+                  >
+                    {suggestion}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          /* Chat Messages */
+          <div className="mx-auto max-w-3xl w-full px-3 md:px-6 py-8 md:py-12 space-y-8 md:space-y-10">
+            {activeSession?.messages.map((msg, index) => {
+              const isLastAssistant =
+                msg.role === "assistant" &&
+                index === (activeSession?.messages?.length || 0) - 1;
+
+              return (
+                <ErrorBoundary key={msg.id || index} minimal>
+                  <MessageRow
+                    msg={msg}
+                    index={index}
+                    isLastAssistant={isLastAssistant}
+                    isStreaming={isStreaming}
+                    showSearching={showSearching}
+                    activityLabels={activityLabels}
+                    activeSession={activeSession}
+                    onMessageChange={onMessageChange}
+                    onSend={onSend}
+                  />
+                </ErrorBoundary>
+              );
+            })}
+
+            <div ref={messagesEndRef} className="h-4" />
+          </div>
+        )}
+      </div>
+
+      {/* Footer Input Area */}
+      {!isEmpty && (
+        <div
+          className="p-3 md:p-4 bg-card/80 backdrop-blur-sm z-20"
+          style={{
+            paddingBottom: 'max(12px, env(safe-area-inset-bottom, 12px))'
+          }}
+        >
+          <div className="mx-auto max-w-xl">
+            <SearchInput
+              value={message}
+              onChange={onMessageChange}
+              onSend={onSend}
+              disabled={isStreaming}
+              features={features}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SearchInput({ value, onChange, onSend, disabled, isHero = false, features = {} }) {
+  const fileInputRef = React.useRef(null);
+  const textareaRef = React.useRef(null);
+  const textareaScrollTimeoutRef = React.useRef(null);
+  const [isRecording, setIsRecording] = React.useState(false);
+  const [selectedFiles, setSelectedFiles] = React.useState([]);
+  const [audioStream, setAudioStream] = React.useState(null);
+  const [interimTranscript, setInterimTranscript] = React.useState("");
+  const recognitionRef = React.useRef(null);
+  const maxTextareaHeight = isHero ? 100 : 120;
+  const minTextareaHeight = 44;
+
+  // Check for Speech Recognition support
+  const SpeechRecognition = typeof window !== 'undefined'
+    ? (window.SpeechRecognition || window.webkitSpeechRecognition)
+    : null;
+
+  useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+
+    el.style.height = "0px";
+    const unclamped = el.scrollHeight;
+    const next = Math.max(minTextareaHeight, Math.min(unclamped, maxTextareaHeight));
+    el.style.height = `${next}px`;
+    el.style.overflowY = unclamped > maxTextareaHeight ? "auto" : "hidden";
+  }, [value, isHero, maxTextareaHeight, minTextareaHeight]);
+
+  const handleSend = () => {
+    if ((value.trim() || selectedFiles.length > 0) && !disabled) {
+      onSend(selectedFiles);
+      setSelectedFiles([]);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleTextareaScroll = (e) => {
+    const el = e.currentTarget;
+    el.classList.add("scrolling");
+    if (textareaScrollTimeoutRef.current) clearTimeout(textareaScrollTimeoutRef.current);
+    textareaScrollTimeoutRef.current = setTimeout(() => {
+      el.classList.remove("scrolling");
+    }, 150);
+  };
+
+  const handleFileSelect = (e) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      setSelectedFiles(prev => [...prev, ...files]);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const removeFile = (index) => {
+    setSelectedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleMicClick = async () => {
+    if (isRecording) {
+      // Stop recording
+      if (recognitionRef.current) {
+        recognitionRef.current.stop();
+      }
+      if (audioStream) {
+        audioStream.getTracks().forEach(track => track.stop());
+        setAudioStream(null);
+      }
+      setIsRecording(false);
+      setInterimTranscript("");
+    } else {
+      // Check browser support
+      if (!SpeechRecognition) {
+        console.error('Speech Recognition not supported in this browser');
+        alert('Speech-to-text is not supported in this browser. Please use Chrome, Edge, or Safari.');
+        return;
+      }
+
+      try {
+        // Get audio stream for visualizer
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        setAudioStream(stream);
+
+        // Set up Speech Recognition
+        const recognition = new SpeechRecognition();
+        recognitionRef.current = recognition;
+
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.lang = 'en-US';
+
+        let finalTranscript = value;
+
+        recognition.onresult = (event) => {
+          let interim = '';
+          for (let i = event.resultIndex; i < event.results.length; i++) {
+            const transcript = event.results[i][0].transcript;
+            if (event.results[i].isFinal) {
+              finalTranscript = (finalTranscript ? finalTranscript + ' ' : '') + transcript;
+              onChange(finalTranscript);
+            } else {
+              interim += transcript;
+            }
+          }
+          setInterimTranscript(interim);
+        };
+
+        recognition.onerror = (event) => {
+          console.error('Speech recognition error:', event.error);
+          if (audioStream) {
+            audioStream.getTracks().forEach(track => track.stop());
+            setAudioStream(null);
+          }
+          setIsRecording(false);
+          setInterimTranscript("");
+        };
+
+        recognition.onend = () => {
+          // Restart if still in recording mode
+          if (recognitionRef.current && isRecording) {
+            try {
+              recognitionRef.current.start();
+            } catch (e) {
+              // Ignore
+            }
+          }
+        };
+
+        recognition.start();
+        setIsRecording(true);
+      } catch (err) {
+        console.error('Microphone access denied:', err);
+      }
+    }
+  };
+
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      if (recognitionRef.current) {
+        try { recognitionRef.current.stop(); } catch (e) { }
+      }
+      if (audioStream) {
+        audioStream.getTracks().forEach(track => track.stop());
+      }
+    };
+  }, [audioStream]);
+
+
+  return (
+    <div className="flex flex-col w-full">
+      {/* File attachments preview */}
+      {selectedFiles.length > 0 && (
+        <div className="flex flex-wrap gap-2 mb-2">
+          {selectedFiles.map((file, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-2 bg-[#3A3A3A] rounded-full px-3 py-1 text-xs text-white/80"
+            >
+              <span className="truncate max-w-[100px] md:max-w-[150px]">{file.name}</span>
+              <button
+                onClick={() => removeFile(index)}
+                className="p-0.5 hover:bg-white/10 rounded-full"
+                aria-label={`Remove ${file.name}`}
+              >
+                <X size={12} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Main floating input bar */}
+      <div className="floating-input-bar">
+        {/* Plus/Attach button */}
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileSelect}
+          className="hidden"
+          multiple
+          accept="image/*,.pdf,.doc,.docx,.txt,.csv,.json"
+        />
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={disabled}
+          className={cn(
+            "w-9 h-9 rounded-full flex items-center justify-center transition-colors shrink-0",
+            disabled
+              ? "text-muted-foreground/40 cursor-not-allowed"
+              : "text-muted-foreground hover:text-white hover:bg-white/5"
+          )}
+          aria-label="Attach"
+          title="Attach file"
+        >
+          <Plus size={20} strokeWidth={1.5} />
+        </button>
+
+        {/* Audio Visualizer or Text input */}
+        {isRecording && audioStream ? (
+          <div className="flex-1 flex flex-col items-center justify-center px-2 min-h-[44px]">
+            <AudioVisualizer stream={audioStream} isActive={isRecording} />
+            {/* Show interim transcript as user speaks */}
+            {interimTranscript && (
+              <div className="text-xs text-muted-foreground/70 italic mt-1 truncate max-w-full">
+                {interimTranscript}...
+              </div>
+            )}
+            {!interimTranscript && value && (
+              <div className="text-xs text-green-400/70 mt-1 truncate max-w-full">
+                ✓ "{value.slice(-50)}{value.length > 50 ? '...' : ''}"
+              </div>
+            )}
+            {!interimTranscript && !value && (
+              <div className="text-xs text-muted-foreground/50 mt-1">
+                Listening... speak now
+              </div>
+            )}
+            {/* Cancel and Done buttons */}
+            <div className="flex items-center gap-3 mt-2">
+              <button
+                onClick={() => {
+                  // Cancel: stop recording and clear text
+                  if (recognitionRef.current) {
+                    recognitionRef.current.stop();
+                    recognitionRef.current = null;
+                  }
+                  if (audioStream) {
+                    audioStream.getTracks().forEach(track => track.stop());
+                    setAudioStream(null);
+                  }
+                  setIsRecording(false);
+                  setInterimTranscript("");
+                  onChange(""); // Clear transcribed text
+                }}
+                className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium text-red-400 bg-red-500/10 hover:bg-red-500/20 transition-colors"
+                aria-label="Cancel recording"
+              >
+                <X size={14} />
+                <span>Cancel</span>
+              </button>
+              <button
+                onClick={() => {
+                  // Done: stop recording but keep the text
+                  if (recognitionRef.current) {
+                    recognitionRef.current.stop();
+                    recognitionRef.current = null;
+                  }
+                  if (audioStream) {
+                    audioStream.getTracks().forEach(track => track.stop());
+                    setAudioStream(null);
+                  }
+                  setIsRecording(false);
+                  setInterimTranscript("");
+                  // Focus textarea after a brief delay
+                  setTimeout(() => textareaRef.current?.focus(), 100);
+                }}
+                className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium text-green-400 bg-green-500/10 hover:bg-green-500/20 transition-colors"
+                aria-label="Done recording"
+              >
+                <Check size={14} />
+                <span>Done</span>
+              </button>
+            </div>
+          </div>
+        ) : (
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onScroll={handleTextareaScroll}
+            placeholder="Ask anything"
+            aria-label="Ask anything"
+            inputMode="text"
+            autoComplete="off"
+            autoCorrect="off"
+            className="flex-1 bg-transparent border-none focus:ring-0 focus:outline-none text-white resize-none custom-scrollbar py-2.5 px-1 text-[15px] leading-6"
+            rows={1}
+            style={{ minHeight: `${minTextareaHeight}px`, maxHeight: `${maxTextareaHeight}px` }}
+          />
+        )}
+
+        {/* Right side buttons */}
+        <div className="flex items-center gap-0.5 shrink-0">
+          {/* Mic button */}
+          <button
+            onClick={handleMicClick}
+            disabled={disabled}
+            className={cn(
+              "w-9 h-9 rounded-full flex items-center justify-center transition-colors",
+              isRecording
+                ? "text-red-500 bg-red-500/10 animate-pulse"
+                : disabled
+                  ? "text-muted-foreground/40 cursor-not-allowed"
+                  : "text-muted-foreground hover:text-white hover:bg-white/5"
+            )}
+            aria-label={isRecording ? "Stop recording" : "Voice input"}
+            title={isRecording ? "Stop recording" : "Voice input"}
+          >
+            <Mic size={18} />
+          </button>
+
+          {/* Send button */}
+          <button
+            onClick={handleSend}
+            disabled={(!value.trim() && selectedFiles.length === 0) || disabled}
+            className={cn(
+              "w-9 h-9 rounded-full flex items-center justify-center transition-colors",
+              (value.trim() || selectedFiles.length > 0) && !disabled
+                ? "bg-[#4A4A4A] text-white hover:bg-[#5A5A5A]"
+                : "bg-[#3A3A3A] text-muted-foreground/40 cursor-not-allowed"
+            )}
+            aria-label="Send"
+            title="Send message"
+          >
+            {disabled ? (
+              <div className="w-4 h-4 border-2 border-muted-foreground/20 border-t-muted-foreground/60 rounded-full animate-spin" />
+            ) : (
+              <ArrowUp size={18} strokeWidth={2} />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+function ActionBtn({ icon, label, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-white hover:bg-foreground/5 transition-colors focus-visible:outline-none"
+      aria-label={label}
+    >
+      {icon}
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  )
+}
+
+/* ── Collapsible Activity Panel (Gemini/Perplexity-style) ── */
+function ActivityPanel({ steps, phase, toolName, isStreaming }) {
+  const [expanded, setExpanded] = React.useState(false);
+
+  const searchCount = steps.filter(s => s.type === "search").length;
+  const sourceCount = steps.filter(s => s.type === "sources").reduce((n, s) => n + (s.items?.length || 0), 0);
+  const browseCount = steps.filter(s => s.type === "browse").length;
+
+  // Auto-expand when first step arrives during streaming
+  React.useEffect(() => {
+    if (steps.length === 1 && isStreaming) setExpanded(true);
+  }, [steps.length, isStreaming]);
+
+  // Build summary text
+  const summaryParts = [];
+  if (searchCount > 0) summaryParts.push(`Searched ${searchCount} ${searchCount === 1 ? "query" : "queries"}`);
+  if (sourceCount > 0) summaryParts.push(`Found ${sourceCount} ${sourceCount === 1 ? "source" : "sources"}`);
+  if (browseCount > 0) summaryParts.push(`Read ${browseCount} ${browseCount === 1 ? "page" : "pages"}`);
+  const summaryText = summaryParts.join(" · ") || "Working…";
+
+  return (
+    <div className="activity-panel mb-2 w-full max-w-[540px]">
+      {/* Header / toggle */}
+      <button
+        onClick={() => setExpanded(e => !e)}
+        className="activity-panel-header"
+        aria-expanded={expanded}
+      >
+        <span className="flex items-center gap-2 min-w-0">
+          {isStreaming && phase ? (
+            <span className="flex items-center gap-1">
+              <span className="thinking-dot w-1 h-1 rounded-full bg-muted-foreground/80" style={{ animationDelay: "0ms" }} />
+              <span className="thinking-dot w-1 h-1 rounded-full bg-muted-foreground/80" style={{ animationDelay: "140ms" }} />
+              <span className="thinking-dot w-1 h-1 rounded-full bg-muted-foreground/80" style={{ animationDelay: "280ms" }} />
+            </span>
+          ) : (
+            <span className="text-[12px]">✅</span>
+          )}
+          <span className="truncate">{isStreaming && phase ? summaryText : summaryText}</span>
+        </span>
+        <ChevronDown
+          size={14}
+          className={cn(
+            "shrink-0 transition-transform duration-200",
+            expanded ? "rotate-180" : ""
+          )}
+        />
+      </button>
+
+      {/* Expanded step list */}
+      <AnimatePresence initial={false}>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
+            className="overflow-hidden"
+          >
+            <div className="activity-panel-body">
+              {steps.map((step, i) => (
+                <ActivityStepRow key={i} step={step} />
+              ))}
+              {isStreaming && phase && (
+                <div className="activity-step-row">
+                  <span className="activity-step-icon">
+                    {phase === "searching" ? "🔍" : phase === "reading" ? "📖" : phase === "tool" ? "🔧" : "💭"}
+                  </span>
+                  <span className="text-muted-foreground/70 italic">
+                    {phase === "searching" ? "Searching…" : phase === "reading" ? `Reading…` : phase === "tool" ? `Using ${toolName || "tool"}…` : "Thinking…"}
+                  </span>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function ActivityStepRow({ step }) {
+  if (step.type === "search") {
+    return (
+      <div className="activity-step-row">
+        <span className="activity-step-icon">🔍</span>
+        <span>Searched: <span className="text-foreground/80 font-medium">"{step.query}"</span></span>
+      </div>
+    );
+  }
+  if (step.type === "browse") {
+    let displayUrl = step.url;
+    try { displayUrl = new URL(step.url).hostname; } catch { }
+    return (
+      <div className="activity-step-row">
+        <span className="activity-step-icon">🌐</span>
+        <span>Reading: <a href={step.url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">{displayUrl}</a></span>
+      </div>
+    );
+  }
+  if (step.type === "sources") {
+    return (
+      <div className="activity-step-sources">
+        {step.items?.map((src, j) => {
+          let domain = src.url;
+          try { domain = new URL(src.url).hostname.replace("www.", ""); } catch { }
+          return (
+            <a
+              key={j}
+              href={src.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="activity-source-chip"
+              title={src.title}
+            >
+              <img
+                src={`https://www.google.com/s2/favicons?domain=${domain}&sz=16`}
+                alt=""
+                className="w-3.5 h-3.5 rounded-sm"
+                onError={(e) => { e.target.style.display = 'none'; }}
+              />
+              <span className="truncate">{src.title || domain}</span>
+            </a>
+          );
+        })}
+      </div>
+    );
+  }
+  if (step.type === "tool") {
+    return (
+      <div className="activity-step-row">
+        <span className="activity-step-icon">🔧</span>
+        <span>Used tool: <span className="font-medium">{step.tool}</span></span>
+      </div>
+    );
+  }
+  return null;
+}
+
+function StreamingStatus({ phase, toolName }) {
+  const config = {
+    thinking: { icon: "💭", label: "Thinking" },
+    searching: { icon: "🔍", label: "Searching" },
+    reasoning: { icon: "🧠", label: "Analyzing" },
+    tool: { icon: "🔧", label: toolName ? `Using ${toolName}` : "Using tool" },
+    reading: { icon: "📖", label: "Reading sources" },
+    writing: { icon: "✍️", label: "Writing" },
+    planning: { icon: "���", label: "Planning" },
+    executing: { icon: "⚡", label: "Executing" },
+  };
+  const { icon, label } = config[phase] || config.thinking;
+
+  return (
+    <div className="inline-flex items-center gap-2 rounded-full border border-border bg-foreground/5 px-3 py-1.5 text-[12px] font-medium text-muted-foreground">
+      <span className="flex items-center gap-1">
+        <span className="thinking-dot w-1 h-1 rounded-full bg-muted-foreground/80" style={{ animationDelay: "0ms" }} />
+        <span className="thinking-dot w-1 h-1 rounded-full bg-muted-foreground/80" style={{ animationDelay: "140ms" }} />
+        <span className="thinking-dot w-1 h-1 rounded-full bg-muted-foreground/80" style={{ animationDelay: "280ms" }} />
+      </span>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.span
+          key={label}
+          initial={{ opacity: 0, y: 4 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -4 }}
+          transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
+          className="inline-flex items-center gap-1.5"
+        >
+          <span className="text-[11px]">{icon}</span>
+          {label}…
+        </motion.span>
+      </AnimatePresence>
+    </div>
+  );
+}

client/src/components/ChatSidebar.jsx

@@ -0,0 +1,312 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  MessageSquare,
+  Plus,
+  Trash2,
+  Moon,
+  Sun,
+  Bot,
+  History,
+  FlaskConical
+} from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export default function ChatSidebar({
+  open,
+  setOpen,
+  models,
+  selectedModelId,
+  onSelectModel,
+  isModelsLoading,
+  modelsError,
+  modelsIssues,
+  onReloadModels,
+  mode,
+  modes,
+  onModeChange,
+  onNewChat,
+  onClearHistory,
+  historyList,
+  activeSessionId,
+  onSelectSession,
+  isSessionLocked = false,
+  theme,
+  onToggleTheme,
+  activeView = "chat",
+  onNavigateToLabs,
+  onNavigateToChat,
+}) {
+  const selectedModel = models?.find((item) => item.id === selectedModelId);
+  const uploadsStatus = selectedModel?.features?.status || "unknown";
+  const uploadsEnabled = Boolean(selectedModel?.features?.uploads);
+  const historyScrollRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const el = historyScrollRef.current;
+    if (!el) return;
+
+    let timeoutId = null;
+    const onScroll = () => {
+      el.classList.add("scrolling");
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => el.classList.remove("scrolling"), 150);
+    };
+
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return (
+    <AnimatePresence mode="wait">
+      {open && (
+        <>
+          <motion.button
+            type="button"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 z-40 bg-[rgba(15,17,23,0.75)] md:hidden"
+            onClick={() => setOpen?.(false)}
+            aria-label="Close sidebar overlay"
+          />
+          <motion.aside
+            initial={{ x: -300, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: -300, opacity: 0 }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            className="fixed left-0 top-0 bottom-0 z-50 w-[280px] border-r border-[rgba(255,255,255,0.04)] bg-popover flex flex-col p-4"
+          >
+            {/* Header & Logo */}
+            <div className="flex items-center justify-between mb-6 px-2">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-xl bg-foreground/5 border border-border flex items-center justify-center text-foreground">
+                  <Bot size={18} />
+                </div>
+                <h1 className="text-xl font-display font-bold text-foreground">
+                  Vector
+                </h1>
+              </div>
+              <button
+                onClick={() => setOpen?.(false)}
+                className="md:hidden p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                aria-label="Close sidebar"
+              >
+                <span className="text-lg leading-none">×</span>
+              </button>
+            </div>
+
+            {/* View Navigation */}
+            <div className="space-y-2 mb-6">
+              <div className="px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                Navigate
+              </div>
+              <div className="space-y-1">
+                <button
+                  onClick={onNavigateToChat}
+                  className={cn(
+                    "flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none",
+                    activeView === "chat"
+                      ? "bg-foreground/10 text-foreground"
+                      : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+                  )}
+                >
+                  <MessageSquare size={16} />
+                  <span>Chat</span>
+                </button>
+                <button
+                  onClick={onNavigateToLabs}
+                  className={cn(
+                    "flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none",
+                    activeView === "labs"
+                      ? "bg-foreground/10 text-foreground"
+                      : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+                  )}
+                >
+                  <FlaskConical size={16} />
+                  <span>Labs</span>
+                  <span className="ml-auto text-[10px] px-1.5 py-0.5 rounded bg-primary/20 text-primary font-medium">New</span>
+                </button>
+              </div>
+            </div>
+
+            {/* New Chat Button - only in chat view */}
+            {activeView === "chat" && (
+              <button
+                onClick={onNewChat}
+                className="group flex items-center gap-3 w-full px-4 py-3 rounded-xl bg-transparent border border-border transition-[background-color,border-color] duration-[120ms] ease-out mb-6 text-sm font-medium text-foreground hover:bg-foreground/5 hover:border-[var(--input-border-focus)] active:bg-foreground/8 focus-visible:outline-none"
+              >
+                <div className="bg-foreground/5 p-1.5 rounded-lg text-[#22D3EE] transition-colors group-hover:bg-foreground/8">
+                  <Plus size={18} />
+                </div>
+                <span>New Thread</span>
+                <div className="ml-auto text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  Ctrl+N
+                </div>
+              </button>
+            )}
+
+            {/* Models Selection - only in chat view */}
+            {activeView === "chat" && (
+              <div className="mb-6 space-y-2">
+                <div className="px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center justify-between">
+                  <span>{isSessionLocked ? "Model (Locked)" : "Model"}</span>
+                  <button
+                    type="button"
+                    onClick={onReloadModels}
+                    className="text-[11px] font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 rounded px-1"
+                  >
+                    Refresh
+                  </button>
+                </div>
+                <div className="relative">
+                  <select
+                    className={cn(
+                      "w-full appearance-none bg-foreground/5 text-foreground text-sm rounded-lg pl-3 pr-8 py-2.5 border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 transition-all hover:bg-foreground/8 disabled:opacity-60",
+                      isSessionLocked && "cursor-not-allowed opacity-70"
+                    )}
+                    value={selectedModelId}
+                    onChange={(e) => onSelectModel(e.target.value)}
+                    disabled={isModelsLoading || !models?.length || isSessionLocked}
+                    title={isSessionLocked ? "Model is locked to this chat session. Start a new chat to change models." : ""}
+                  >
+                    {isModelsLoading && (
+                      <option value="" className="bg-background">
+                        Loading models…
+                      </option>
+                    )}
+                    {!isModelsLoading && models?.length > 0 && (
+                      <>
+                        <option value="" disabled className="bg-background">
+                          Select a model
+                        </option>
+                        {models.map((m) => (
+                          <option key={m.id} value={m.id} className="bg-background">
+                            {m.name}
+                          </option>
+                        ))}
+                      </>
+                    )}
+                    {!isModelsLoading && !models?.length && (
+                      <option value="" className="bg-background">
+                        No models configured
+                      </option>
+                    )}
+                  </select>
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">
+                    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </div>
+                </div>
+                {selectedModel && (
+                  <div className="px-2 flex items-center gap-2 text-[11px]">
+                    <span className={cn(
+                      "inline-flex items-center rounded-full border px-2 py-0.5 font-medium",
+                      uploadsStatus === "ok"
+                        ? uploadsEnabled
+                          ? "border-emerald-500/40 text-emerald-400 bg-emerald-500/10"
+                          : "border-border text-muted-foreground bg-foreground/5"
+                        : "border-amber-500/40 text-amber-400 bg-amber-500/10"
+                    )}>
+                      {uploadsStatus === "ok"
+                        ? uploadsEnabled
+                          ? "Uploads enabled"
+                          : "Uploads off"
+                        : "Uploads unknown"}
+                    </span>
+                  </div>
+                )}
+                {(modelsError || (modelsIssues && modelsIssues.length > 0) || (!isModelsLoading && !models?.length)) && (
+                  <div className="px-2 text-xs text-muted-foreground space-y-1">
+                    {modelsError && <div className="text-destructive">{modelsError}</div>}
+                    {!modelsError && !isModelsLoading && !models?.length && (
+                      <div>
+                        Add MODEL_1_NAME / MODEL_1_ID / MODEL_1_HOST to your environment.
+                      </div>
+                    )}
+                    {modelsIssues?.slice(0, 3).map((issue) => (
+                      <div key={issue}>{issue}</div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* History List - only in chat view */}
+            {activeView === "chat" && (
+              <div ref={historyScrollRef} className="flex-1 overflow-y-auto -mx-2 px-2 custom-scrollbar">
+                <div className="mb-2 px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+                  <History size={12} />
+                  Recent
+                </div>
+                <div className="space-y-1">
+                  {historyList.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-8 text-muted-foreground/70 gap-2">
+                      <MessageSquare size={24} className="opacity-20" />
+                      <span className="text-xs">No history yet</span>
+                    </div>
+                  ) : (
+                    historyList.map((session) => (
+                      <button
+                        key={session.id}
+                        onClick={() => onSelectSession(session.id)}
+                        className={cn(
+                          "w-full text-left px-3 py-2.5 rounded-lg text-sm transition-colors group flex items-center gap-3 relative overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+                          activeSessionId === session.id
+                            ? "bg-[#202338] text-foreground"
+                            : "text-muted-foreground hover:bg-[#1A1D29] hover:text-foreground"
+                        )}
+                      >
+                        {activeSessionId === session.id && (
+                          <span className="absolute left-0 top-2 bottom-2 w-[2px] bg-[#22D3EE] rounded-full" />
+                        )}
+                        <MessageSquare size={16} className={cn(
+                          "shrink-0 transition-colors",
+                          activeSessionId === session.id ? "text-foreground" : "text-muted-foreground/70 group-hover:text-muted-foreground"
+                        )} />
+                        <span className="truncate flex-1 z-10 relative">{session.title || "New Thread"}</span>
+                      </button>
+                    ))
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Spacer for Labs view */}
+            {activeView === "labs" && <div className="flex-1" />}
+
+            {/* Footer Actions */}
+            <div className="pt-4 mt-4 border-t border-[rgba(255,255,255,0.04)] space-y-2">
+              {activeView === "chat" && (
+                <button
+                  onClick={onClearHistory}
+                  className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                >
+                  <Trash2 size={16} />
+                  <span>Clear History</span>
+                </button>
+              )}
+              <button
+                onClick={onToggleTheme}
+                className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-foreground/5 hover:text-foreground transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+              >
+                {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
+                <span>{theme === "dark" ? "Light Mode" : "Dark Mode"}</span>
+              </button>
+            </div>
+          </motion.aside>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}

client/src/components/ErrorBoundary.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+/**
+ * ErrorBoundary - Prevents crashes from malformed AI responses or render errors
+ * Used to wrap individual message components so one bad message doesn't crash the whole chat
+ */
+export default class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        // Log error for debugging
+        console.error("[ErrorBoundary] Caught error:", error, errorInfo);
+    }
+
+    handleRetry = () => {
+        this.setState({ hasError: false, error: null });
+    };
+
+    render() {
+        if (this.state.hasError) {
+            // Minimal fallback UI
+            if (this.props.minimal) {
+                return (
+                    <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-destructive/10 text-destructive text-sm">
+                        <AlertTriangle size={14} />
+                        <span>Failed to display content</span>
+                        <button
+                            onClick={this.handleRetry}
+                            className="ml-auto p-1 hover:bg-destructive/20 rounded"
+                            title="Retry"
+                        >
+                            <RefreshCw size={12} />
+                        </button>
+                    </div>
+                );
+            }
+
+            // Full fallback UI
+            return (
+                <div className="flex flex-col items-center justify-center gap-3 p-6 rounded-xl bg-destructive/5 border border-destructive/20">
+                    <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
+                        <AlertTriangle className="text-destructive" size={24} />
+                    </div>
+                    <div className="text-center">
+                        <h3 className="text-sm font-medium text-destructive mb-1">
+                            Something went wrong
+                        </h3>
+                        <p className="text-xs text-muted-foreground max-w-xs">
+                            {this.props.fallbackMessage || "This content couldn't be displayed. Try refreshing or continue your conversation."}
+                        </p>
+                    </div>
+                    <button
+                        onClick={this.handleRetry}
+                        className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-destructive/10 text-destructive text-xs font-medium hover:bg-destructive/20 transition-colors"
+                    >
+                        <RefreshCw size={12} />
+                        Try Again
+                    </button>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+/**
+ * Hook-friendly wrapper for functional components
+ */
+export function withErrorBoundary(Component, options = {}) {
+    return function WrappedComponent(props) {
+        return (
+            <ErrorBoundary minimal={options.minimal} fallbackMessage={options.fallbackMessage}>
+                <Component {...props} />
+            </ErrorBoundary>
+        );
+    };
+}

client/src/components/LabsArea.jsx

@@ -0,0 +1,613 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+    Plus,
+    Trash2,
+    FileText,
+    Pencil,
+    Download,
+    Sparkles,
+    Send,
+    Loader2,
+    Check,
+    X,
+    Menu,
+    ChevronLeft,
+    Save,
+    Upload
+} from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { useLabsProjects } from "../hooks/useLabsProjects.js";
+import LabsEditor from "./LabsEditor.jsx";
+import { exportToWord } from "../utils/exportToWord.js";
+import { exportToPdf } from "../utils/exportToPdf.js";
+import { stripMetadata } from "../utils/contentUtils.js";
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Project item in the sidebar
+ */
+function ProjectItem({ project, isActive, onSelect, onRename, onDelete, modelName }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [editName, setEditName] = useState(project.name);
+    const inputRef = useRef(null);
+
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditing]);
+
+    const handleSave = () => {
+        if (editName.trim()) {
+            onRename(project.id, editName.trim());
+        } else {
+            setEditName(project.name);
+        }
+        setIsEditing(false);
+    };
+
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            handleSave();
+        } else if (e.key === "Escape") {
+            setEditName(project.name);
+            setIsEditing(false);
+        }
+    };
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -10 }}
+            className={cn(
+                "group flex items-start gap-2 px-3 py-2.5 rounded-lg cursor-pointer transition-colors",
+                isActive
+                    ? "bg-foreground/10 text-white"
+                    : "hover:bg-foreground/5 text-muted-foreground hover:text-white"
+            )}
+            onClick={() => !isEditing && onSelect(project.id)}
+        >
+            <FileText size={16} className="shrink-0 mt-0.5" />
+
+            <div className="flex-1 min-w-0">
+                {isEditing ? (
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={editName}
+                        onChange={(e) => setEditName(e.target.value)}
+                        onBlur={handleSave}
+                        onKeyDown={handleKeyDown}
+                        onClick={(e) => e.stopPropagation()}
+                        className="w-full bg-transparent border-b border-foreground/30 outline-none text-sm py-0.5 text-white"
+                    />
+                ) : (
+                    <>
+                        <span className="block truncate text-sm">{project.name}</span>
+                        {modelName && (
+                            <span className="block text-[10px] text-muted-foreground/60 truncate mt-0.5">
+                                {modelName}
+                            </span>
+                        )}
+                    </>
+                )}
+            </div>
+
+            <div className={cn(
+                "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0",
+                isEditing && "opacity-100"
+            )}>
+                {!isEditing && (
+                    <>
+                        <button
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setIsEditing(true);
+                            }}
+                            className="p-1 hover:bg-foreground/10 rounded"
+                            title="Rename"
+                        >
+                            <Pencil size={12} />
+                        </button>
+                        <button
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onDelete(project.id);
+                            }}
+                            className="p-1 hover:bg-destructive/20 hover:text-destructive rounded"
+                            title="Delete"
+                        >
+                            <Trash2 size={12} />
+                        </button>
+                    </>
+                )}
+            </div>
+        </motion.div>
+    );
+}
+
+/**
+ * Main Labs workspace component
+ */
+export default function LabsArea({
+    toggleSidebar,
+    sidebarOpen,
+    onProjectLockChange
+}) {
+    const {
+        projects,
+        activeProject,
+        activeProjectId,
+        setActiveProjectId,
+        isProjectLocked,
+        isProcessing,
+        handleNewProject,
+        handleImportDocument,
+        handleDeleteProject,
+        handleRenameProject,
+        handleUpdateDocument,
+        handleAIEdit,
+        forceSync,
+        getModelName
+    } = useLabsProjects();
+
+    const [instruction, setInstruction] = useState("");
+    const [error, setError] = useState("");
+    const [showProjectList, setShowProjectList] = useState(true);
+    const [saveStatus, setSaveStatus] = useState("saved");
+    const [isImporting, setIsImporting] = useState(false);
+    const [showExportMenu, setShowExportMenu] = useState(false);
+    const instructionRef = useRef(null);
+    const importInputRef = useRef(null);
+    const exportMenuRef = useRef(null);
+
+    // Notify parent when project lock state changes
+    useEffect(() => {
+        if (onProjectLockChange) {
+            onProjectLockChange(isProjectLocked);
+        }
+    }, [isProjectLocked, onProjectLockChange]);
+
+    // Handle document changes with save status
+    const handleDocumentChange = useCallback((newContent) => {
+        setSaveStatus("unsaved");
+        handleUpdateDocument(newContent);
+
+        setTimeout(() => {
+            setSaveStatus("saved");
+        }, 500);
+    }, [handleUpdateDocument]);
+
+    // Manual save function
+    const handleManualSave = () => {
+        setSaveStatus("saving");
+        forceSync?.();
+        setTimeout(() => {
+            setSaveStatus("saved");
+        }, 300);
+    };
+
+    // Handle file import
+    const handleFileImport = async (e) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setIsImporting(true);
+        setError("");
+
+        try {
+            await handleImportDocument(file);
+        } catch (err) {
+            setError("Failed to import document: " + (err.message || "Unknown error"));
+        } finally {
+            setIsImporting(false);
+            if (importInputRef.current) {
+                importInputRef.current.value = "";
+            }
+        }
+    };
+
+    // Handle AI instruction submission
+    const handleSubmitInstruction = async () => {
+        if (!instruction.trim() || isProcessing) return;
+
+        setError("");
+
+        try {
+            await handleAIEdit(instruction.trim());
+            setInstruction("");
+        } catch (err) {
+            setError(err.message || "Failed to process instruction");
+        }
+    };
+
+    // Handle selection-based AI editing
+    const handleSelectionEdit = async ({ selectedText, instruction, contextBefore, contextAfter }) => {
+        try {
+            const response = await fetch("/labs-edit-selection", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    selectedText,
+                    instruction,
+                    contextBefore,
+                    contextAfter,
+                    sessionId: activeProject?.sessionId
+                })
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => "");
+                throw new Error(errorText || `Request failed (${response.status})`);
+            }
+
+            // Parse SSE response
+            if (!response.body) {
+                throw new Error("No response body");
+            }
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let fullContent = "";
+            let buffer = "";
+
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) break;
+
+                buffer += decoder.decode(value, { stream: true });
+
+                const lines = buffer.split("\n");
+                buffer = lines.pop() || "";
+
+                for (const line of lines) {
+                    if (line.startsWith("data: ")) {
+                        try {
+                            const data = JSON.parse(line.slice(6));
+                            if (data.text) {
+                                fullContent += data.text;
+                            }
+                        } catch {
+                            fullContent += line.slice(6);
+                        }
+                    }
+                }
+            }
+
+            return stripMetadata(fullContent);
+        } catch (error) {
+            console.error("[Labs] Selection edit failed:", error);
+            setError(error.message || "Failed to edit selection");
+            throw error;
+        }
+    };
+
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmitInstruction();
+        }
+    };
+
+    // Handle Word export
+    const handleExportWord = async () => {
+        if (!activeProject?.document) return;
+        setShowExportMenu(false);
+
+        try {
+            await exportToWord(activeProject.document, activeProject.name);
+        } catch (err) {
+            setError("Failed to export document");
+            console.error("[Labs] Export error:", err);
+        }
+    };
+
+    // Handle PDF export
+    const handleExportPdf = async () => {
+        if (!activeProject?.document) return;
+        setShowExportMenu(false);
+
+        try {
+            await exportToPdf(activeProject.document, activeProject.name);
+        } catch (err) {
+            setError("Failed to export PDF");
+            console.error("[Labs] PDF Export error:", err);
+        }
+    };
+
+    // Close export menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (exportMenuRef.current && !exportMenuRef.current.contains(e.target)) {
+                setShowExportMenu(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    // Hide project list on mobile by default
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth < 768) {
+                setShowProjectList(false);
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (
+        <div className="flex-1 flex flex-col h-full bg-card">
+            {/* Mobile Header */}
+            <div className="md:hidden flex items-center p-3 border-b border-border/30 bg-card sticky top-0 z-10">
+                <button
+                    onClick={toggleSidebar}
+                    className="p-2 -ml-2 text-muted-foreground hover:text-white rounded-lg"
+                    aria-label="Open sidebar"
+                >
+                    <Menu size={20} />
+                </button>
+                <span className="font-semibold text-sm ml-2 text-white">Labs</span>
+
+                <button
+                    onClick={() => setShowProjectList(!showProjectList)}
+                    className="ml-auto p-2 text-muted-foreground hover:text-white rounded-lg md:hidden"
+                >
+                    <FileText size={18} />
+                </button>
+            </div>
+
+            <div className="flex-1 flex overflow-hidden">
+                {/* Project Sidebar */}
+                <AnimatePresence>
+                    {showProjectList && (
+                        <motion.div
+                            initial={{ width: 0, opacity: 0 }}
+                            animate={{ width: 240, opacity: 1 }}
+                            exit={{ width: 0, opacity: 0 }}
+                            transition={{ duration: 0.2 }}
+                            className="h-full border-r border-border bg-background flex flex-col overflow-hidden"
+                        >
+                            {/* Sidebar Header */}
+                            <div className="p-3 border-b border-border flex items-center justify-between gap-2">
+                                <h2 className="font-semibold text-white text-sm">Projects</h2>
+                                <div className="flex items-center gap-1">
+                                    {/* Import Button */}
+                                    <input
+                                        type="file"
+                                        ref={importInputRef}
+                                        onChange={handleFileImport}
+                                        accept=".txt,.md,.docx"
+                                        className="hidden"
+                                    />
+                                    <button
+                                        onClick={() => importInputRef.current?.click()}
+                                        disabled={isImporting}
+                                        className="p-1.5 hover:bg-foreground/10 rounded-lg text-muted-foreground hover:text-white transition-colors"
+                                        title="Import Document"
+                                    >
+                                        {isImporting ? (
+                                            <Loader2 size={16} className="animate-spin" />
+                                        ) : (
+                                            <Upload size={16} />
+                                        )}
+                                    </button>
+                                    <button
+                                        onClick={() => handleNewProject()}
+                                        className="p-1.5 hover:bg-foreground/10 rounded-lg text-muted-foreground hover:text-white transition-colors"
+                                        title="New Project"
+                                    >
+                                        <Plus size={16} />
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/* Project List */}
+                            <div className="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
+                                <AnimatePresence>
+                                    {projects.map((project) => (
+                                        <ProjectItem
+                                            key={project.id}
+                                            project={project}
+                                            isActive={project.id === activeProjectId}
+                                            onSelect={(id) => {
+                                                setActiveProjectId(id);
+                                                if (window.innerWidth < 768) {
+                                                    setShowProjectList(false);
+                                                }
+                                            }}
+                                            onRename={handleRenameProject}
+                                            onDelete={handleDeleteProject}
+                                            modelName={getModelName()}
+                                        />
+                                    ))}
+                                </AnimatePresence>
+                            </div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+
+                {/* Main Editor Area */}
+                <div className="flex-1 flex flex-col min-w-0">
+                    {activeProject ? (
+                        <>
+                            {/* Editor Header */}
+                            <div className="flex items-center justify-between px-3 py-2 border-b border-border bg-card gap-2">
+                                <div className="flex items-center gap-2 min-w-0 flex-1">
+                                    <button
+                                        onClick={() => setShowProjectList(!showProjectList)}
+                                        className="p-1.5 hover:bg-foreground/10 rounded-lg text-muted-foreground hover:text-white hidden md:flex shrink-0"
+                                        title={showProjectList ? "Hide projects" : "Show projects"}
+                                    >
+                                        <ChevronLeft size={16} className={cn(
+                                            "transition-transform",
+                                            !showProjectList && "rotate-180"
+                                        )} />
+                                    </button>
+                                    <h1 className="font-medium text-white truncate text-sm">
+                                        {activeProject.name}
+                                    </h1>
+
+                                    <span className={cn(
+                                        "text-xs px-2 py-0.5 rounded-full shrink-0",
+                                        saveStatus === "saved" && "text-green-400/70 bg-green-400/10",
+                                        saveStatus === "saving" && "text-yellow-400/70 bg-yellow-400/10",
+                                        saveStatus === "unsaved" && "text-muted-foreground bg-foreground/5"
+                                    )}>
+                                        {saveStatus === "saved" && "Saved"}
+                                        {saveStatus === "saving" && "Saving..."}
+                                        {saveStatus === "unsaved" && "Unsaved"}
+                                    </span>
+                                </div>
+
+                                <div className="flex items-center gap-2 shrink-0">
+                                    <button
+                                        onClick={handleManualSave}
+                                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium bg-foreground/5 text-muted-foreground hover:text-white hover:bg-foreground/10 transition-colors"
+                                        title="Save (auto-saves)"
+                                    >
+                                        <Save size={14} />
+                                        <span className="hidden sm:inline">Save</span>
+                                    </button>
+
+                                    {/* Export Dropdown */}
+                                    <div className="relative" ref={exportMenuRef}>
+                                        <button
+                                            onClick={() => setShowExportMenu(!showExportMenu)}
+                                            disabled={!activeProject.document}
+                                            className={cn(
+                                                "flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-colors",
+                                                activeProject.document
+                                                    ? "bg-primary/10 text-primary hover:bg-primary/20"
+                                                    : "bg-foreground/5 text-muted-foreground/50 cursor-not-allowed"
+                                            )}
+                                        >
+                                            <Download size={14} />
+                                            <span className="hidden sm:inline">Export</span>
+                                        </button>
+
+                                        <AnimatePresence>
+                                            {showExportMenu && (
+                                                <motion.div
+                                                    initial={{ opacity: 0, y: -5 }}
+                                                    animate={{ opacity: 1, y: 0 }}
+                                                    exit={{ opacity: 0, y: -5 }}
+                                                    className="absolute right-0 top-full mt-1 bg-[#1E1E1E] border border-border rounded-lg shadow-xl z-50 min-w-[120px] overflow-hidden"
+                                                >
+                                                    <button
+                                                        onClick={handleExportWord}
+                                                        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-white hover:bg-foreground/10 transition-colors"
+                                                    >
+                                                        📄 Word (.docx)
+                                                    </button>
+                                                    <button
+                                                        onClick={handleExportPdf}
+                                                        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-white hover:bg-foreground/10 transition-colors"
+                                                    >
+                                                        📕 PDF (.pdf)
+                                                    </button>
+                                                </motion.div>
+                                            )}
+                                        </AnimatePresence>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Document Editor */}
+                            <div className="flex-1 overflow-hidden">
+                                <LabsEditor
+                                    content={activeProject.document}
+                                    onChange={handleDocumentChange}
+                                    isProcessing={isProcessing}
+                                    onSelectionEdit={handleSelectionEdit}
+                                />
+                            </div>
+
+                            {/* AI Instruction Bar */}
+                            <div className="p-3 border-t border-border bg-card">
+                                <div className="max-w-3xl mx-auto">
+                                    {error && (
+                                        <div className="mb-2 px-3 py-2 rounded-lg bg-destructive/10 text-destructive text-xs flex items-center gap-2">
+                                            <X size={12} />
+                                            {error}
+                                        </div>
+                                    )}
+
+                                    <div className="relative bg-[var(--input-surface)] border border-[var(--input-border)] rounded-xl transition-all focus-within:border-[var(--input-border-focus)]">
+                                        <div className="flex items-center gap-2 px-3 py-2.5">
+                                            <Sparkles size={16} className="text-primary shrink-0" />
+                                            <input
+                                                ref={instructionRef}
+                                                type="text"
+                                                value={instruction}
+                                                onChange={(e) => setInstruction(e.target.value)}
+                                                onKeyDown={handleKeyDown}
+                                                placeholder={activeProject.document
+                                                    ? "Give an instruction to edit..."
+                                                    : "Describe what to create..."
+                                                }
+                                                disabled={isProcessing}
+                                                className="flex-1 bg-transparent outline-none text-white placeholder:text-muted-foreground text-sm"
+                                            />
+                                            <button
+                                                onClick={handleSubmitInstruction}
+                                                disabled={!instruction.trim() || isProcessing}
+                                                className={cn(
+                                                    "p-1.5 rounded-lg transition-colors",
+                                                    instruction.trim() && !isProcessing
+                                                        ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                                                        : "bg-foreground/10 text-muted-foreground/50 cursor-not-allowed"
+                                                )}
+                                            >
+                                                {isProcessing ? (
+                                                    <Loader2 size={14} className="animate-spin" />
+                                                ) : (
+                                                    <Send size={14} />
+                                                )}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </>
+                    ) : (
+                        /* Empty State */
+                        <div className="flex-1 flex items-center justify-center p-4">
+                            <div className="text-center">
+                                <div className="w-14 h-14 rounded-2xl bg-foreground/5 border border-border flex items-center justify-center mx-auto mb-4">
+                                    <FileText className="text-muted-foreground w-7 h-7" />
+                                </div>
+                                <h2 className="text-lg font-semibold text-white mb-2">No Project Selected</h2>
+                                <p className="text-muted-foreground text-sm mb-4">Create a new project or import a document</p>
+                                <div className="flex items-center justify-center gap-2">
+                                    <button
+                                        onClick={() => handleNewProject()}
+                                        className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
+                                    >
+                                        Create Project
+                                    </button>
+                                    <button
+                                        onClick={() => importInputRef.current?.click()}
+                                        className="px-4 py-2 bg-foreground/10 text-white rounded-lg text-sm font-medium hover:bg-foreground/15 transition-colors"
+                                    >
+                                        <Upload size={14} className="inline mr-1.5" />
+                                        Import
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

client/src/components/LabsEditor.jsx

@@ -0,0 +1,931 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import { motion, AnimatePresence } from "framer-motion";
+import "katex/dist/katex.min.css";
+import {
+    Eye,
+    Edit3,
+    Copy,
+    Check,
+    Sparkles,
+    X,
+    Loader2,
+    Send,
+    Bold,
+    Italic,
+    Heading1,
+    Heading2,
+    List,
+    ListOrdered,
+    Code,
+    Link,
+    Quote,
+    Undo2,
+    Redo2
+} from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+const markdownSchema = {
+    ...defaultSchema,
+    attributes: {
+        ...defaultSchema.attributes,
+        a: [
+            ...(defaultSchema.attributes?.a || []),
+            ["target", "_blank"],
+            ["rel", "noopener noreferrer"]
+        ],
+        code: [...(defaultSchema.attributes?.code || []), "className"],
+        // Allow KaTeX elements and attributes
+        span: [
+            ...(defaultSchema.attributes?.span || []),
+            "className",
+            "style",
+            "aria-hidden"
+        ],
+        annotation: ["encoding"],
+        semantics: []
+    },
+    tagNames: [
+        ...(defaultSchema.tagNames || []),
+        "math",
+        "annotation",
+        "semantics",
+        "mtext",
+        "mn",
+        "mo",
+        "mi",
+        "mspace",
+        "mover",
+        "munder",
+        "munderover",
+        "msup",
+        "msub",
+        "msubsup",
+        "mfrac",
+        "mroot",
+        "msqrt",
+        "mtable",
+        "mtr",
+        "mtd",
+        "mlabeledtr",
+        "mrow",
+        "menclose",
+        "mstyle",
+        "mpadded",
+        "mphantom"
+    ]
+};
+
+/**
+ * Rich Text Formatting Toolbar
+ */
+function FormattingToolbar({ onFormat, disabled }) {
+    const tools = [
+        { icon: Bold, action: "bold", title: "Bold (Ctrl+B)", syntax: ["**", "**"] },
+        { icon: Italic, action: "italic", title: "Italic (Ctrl+I)", syntax: ["*", "*"] },
+        { icon: Heading1, action: "h1", title: "Heading 1", syntax: ["# ", ""] },
+        { icon: Heading2, action: "h2", title: "Heading 2", syntax: ["## ", ""] },
+        { icon: List, action: "ul", title: "Bullet List", syntax: ["- ", ""] },
+        { icon: ListOrdered, action: "ol", title: "Numbered List", syntax: ["1. ", ""] },
+        { icon: Code, action: "code", title: "Inline Code", syntax: ["`", "`"] },
+        { icon: Link, action: "link", title: "Link", syntax: ["[", "](url)"] },
+        { icon: Quote, action: "quote", title: "Blockquote", syntax: ["> ", ""] },
+    ];
+
+    return (
+        <div className="flex items-center gap-0.5 px-2 py-1.5 border-b border-border bg-background/30">
+            {tools.map(({ icon: Icon, action, title, syntax }) => (
+                <button
+                    key={action}
+                    onClick={() => onFormat(syntax[0], syntax[1])}
+                    disabled={disabled}
+                    className={cn(
+                        "p-1.5 rounded-md text-muted-foreground transition-colors",
+                        disabled
+                            ? "opacity-40 cursor-not-allowed"
+                            : "hover:text-white hover:bg-foreground/10"
+                    )}
+                    title={title}
+                >
+                    <Icon size={16} />
+                </button>
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Undo/Redo Controls
+ */
+function HistoryControls({ canUndo, canRedo, onUndo, onRedo, historyCount }) {
+    return (
+        <div className="flex items-center gap-1">
+            <button
+                onClick={onUndo}
+                disabled={!canUndo}
+                className={cn(
+                    "p-1.5 rounded-md transition-colors flex items-center gap-1",
+                    canUndo
+                        ? "text-muted-foreground hover:text-white hover:bg-foreground/10"
+                        : "text-muted-foreground/30 cursor-not-allowed"
+                )}
+                title="Undo"
+            >
+                <Undo2 size={14} />
+            </button>
+            <button
+                onClick={onRedo}
+                disabled={!canRedo}
+                className={cn(
+                    "p-1.5 rounded-md transition-colors",
+                    canRedo
+                        ? "text-muted-foreground hover:text-white hover:bg-foreground/10"
+                        : "text-muted-foreground/30 cursor-not-allowed"
+                )}
+                title="Redo"
+            >
+                <Redo2 size={14} />
+            </button>
+            {historyCount > 0 && (
+                <span className="text-xs text-muted-foreground/50 ml-1">
+                    {historyCount} snapshot{historyCount !== 1 ? 's' : ''}
+                </span>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Markdown preview component using same styling as chat
+ */
+function MarkdownPreview({ content }) {
+    const [copiedCode, setCopiedCode] = useState(null);
+
+    const handleCopyCode = (code, index) => {
+        navigator.clipboard?.writeText(code);
+        setCopiedCode(index);
+        setTimeout(() => setCopiedCode(null), 2000);
+    };
+
+    if (!content) {
+        return (
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+                <p>No content yet. Start typing or use AI to generate.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="markdown-content prose prose-invert max-w-none px-6 py-4">
+            <ReactMarkdown
+                remarkPlugins={[remarkGfm, remarkMath]}
+                rehypePlugins={[rehypeKatex, [rehypeSanitize, markdownSchema]]}
+                components={{
+                    a: (props) => (
+                        <a
+                            {...props}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-white underline decoration-border hover:text-white/90 hover:decoration-muted-foreground/40 transition-colors"
+                        />
+                    ),
+                    pre: ({ children, ...props }) => {
+                        const codeContent = React.Children.toArray(children)
+                            .map(child => {
+                                if (React.isValidElement(child) && child.props?.children) {
+                                    return typeof child.props.children === 'string'
+                                        ? child.props.children
+                                        : '';
+                                }
+                                return '';
+                            })
+                            .join('');
+                        const index = Math.random().toString(36).substr(2, 9);
+
+                        return (
+                            <div className="relative group my-4">
+                                <pre
+                                    {...props}
+                                    className="bg-popover border border-border rounded-lg p-4 overflow-x-auto text-sm"
+                                >
+                                    {children}
+                                </pre>
+                                <button
+                                    onClick={() => handleCopyCode(codeContent, index)}
+                                    className="absolute top-2 right-2 p-1.5 rounded-md bg-foreground/10 hover:bg-foreground/20 text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-all"
+                                    aria-label="Copy code"
+                                >
+                                    {copiedCode === index ? (
+                                        <Check size={14} className="text-green-400" />
+                                    ) : (
+                                        <Copy size={14} />
+                                    )}
+                                </button>
+                            </div>
+                        );
+                    },
+                    code: ({ inline, className, children, ...props }) => {
+                        if (inline) {
+                            return (
+                                <code
+                                    className="px-1.5 py-0.5 rounded-md bg-foreground/10 text-white text-sm font-mono"
+                                    {...props}
+                                >
+                                    {children}
+                                </code>
+                            );
+                        }
+                        return (
+                            <code className={cn("text-white/90 font-mono text-sm", className)} {...props}>
+                                {children}
+                            </code>
+                        );
+                    },
+                    table: ({ children, ...props }) => (
+                        <div className="my-4 overflow-x-auto rounded-lg border border-border">
+                            <table className="min-w-full divide-y divide-border" {...props}>
+                                {children}
+                            </table>
+                        </div>
+                    ),
+                    thead: ({ children, ...props }) => (
+                        <thead className="bg-foreground/5" {...props}>
+                            {children}
+                        </thead>
+                    ),
+                    th: ({ children, ...props }) => (
+                        <th
+                            className="px-4 py-3 text-left text-xs font-semibold text-white uppercase tracking-wider border-r border-border last:border-r-0"
+                            {...props}
+                        >
+                            {children}
+                        </th>
+                    ),
+                    td: ({ children, ...props }) => (
+                        <td
+                            className="px-4 py-3 text-sm text-white/80 border-r border-border last:border-r-0"
+                            {...props}
+                        >
+                            {children}
+                        </td>
+                    ),
+                    tr: ({ children, ...props }) => (
+                        <tr
+                            className="border-b border-border last:border-b-0 hover:bg-foreground/5 transition-colors"
+                            {...props}
+                        >
+                            {children}
+                        </tr>
+                    ),
+                    ul: ({ children, ...props }) => (
+                        <ul className="my-3 ml-1 space-y-2 list-none" {...props}>
+                            {children}
+                        </ul>
+                    ),
+                    ol: ({ children, ...props }) => (
+                        <ol className="my-3 ml-1 space-y-2 list-none counter-reset-item" {...props}>
+                            {children}
+                        </ol>
+                    ),
+                    li: ({ children, ordered, ...props }) => (
+                        <li className="relative pl-6 text-white/90" {...props}>
+                            <span className="absolute left-0 text-muted-foreground">•</span>
+                            {children}
+                        </li>
+                    ),
+                    h1: ({ children, ...props }) => (
+                        <h1 className="text-2xl font-bold text-white mt-6 mb-4 pb-2 border-b border-border" {...props}>
+                            {children}
+                        </h1>
+                    ),
+                    h2: ({ children, ...props }) => (
+                        <h2 className="text-xl font-semibold text-white mt-5 mb-3" {...props}>
+                            {children}
+                        </h2>
+                    ),
+                    h3: ({ children, ...props }) => (
+                        <h3 className="text-lg font-semibold text-white mt-4 mb-2" {...props}>
+                            {children}
+                        </h3>
+                    ),
+                    p: ({ children, ...props }) => (
+                        <p className="my-[0.7em] text-white/90 leading-[1.65]" {...props}>
+                            {children}
+                        </p>
+                    ),
+                    strong: ({ children, ...props }) => (
+                        <strong className="font-bold text-white" {...props}>
+                            {children}
+                        </strong>
+                    ),
+                    em: ({ children, ...props }) => (
+                        <em className="italic text-white/90" {...props}>
+                            {children}
+                        </em>
+                    ),
+                    blockquote: ({ children, ...props }) => (
+                        <blockquote
+                            className="my-4 pl-4 border-l-4 border-border bg-foreground/5 py-2 pr-4 rounded-r-lg italic text-white/80"
+                            {...props}
+                        >
+                            {children}
+                        </blockquote>
+                    ),
+                    hr: (props) => (
+                        <hr className="my-6 border-t border-border" {...props} />
+                    )
+                }}
+            >
+                {content}
+            </ReactMarkdown>
+        </div>
+    );
+}
+
+/**
+ * AI Edit Toolbar — bottom sheet on mobile, floating popover on desktop.
+ * Inspired by Google Docs / Notion mobile editing UX.
+ */
+function SelectionToolbar({
+    position,
+    selectedText,
+    onClose,
+    onSubmit,
+    isProcessing
+}) {
+    const [instruction, setInstruction] = useState("");
+    const inputRef = useRef(null);
+    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+
+    useEffect(() => {
+        const check = () => setIsMobile(window.innerWidth < 768);
+        window.addEventListener("resize", check);
+        return () => window.removeEventListener("resize", check);
+    }, []);
+
+    // Auto-focus the input
+    useEffect(() => {
+        // Small delay to let animation complete
+        const t = setTimeout(() => inputRef.current?.focus(), 200);
+        return () => clearTimeout(t);
+    }, []);
+
+    const handleSubmit = () => {
+        if (instruction.trim() && !isProcessing) {
+            onSubmit(instruction.trim());
+            setInstruction("");
+        }
+    };
+
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        } else if (e.key === "Escape") {
+            onClose();
+        }
+    };
+
+    const preview = selectedText.length > 60
+        ? selectedText.slice(0, 60) + "…"
+        : selectedText;
+
+    /* ── Inner content (shared by both layouts) ── */
+    const innerContent = (
+        <div className="selection-toolbar-inner">
+            {/* Header with selected text preview */}
+            <div className="flex items-center gap-2 mb-3">
+                <div className="flex items-center gap-2 flex-1 min-w-0">
+                    <div className="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center shrink-0">
+                        <Sparkles size={14} className="text-primary" />
+                    </div>
+                    <div className="min-w-0">
+                        <div className="text-xs font-semibold text-white">AI Edit Selection</div>
+                        <div className="text-[11px] text-muted-foreground truncate">
+                            "{preview}"
+                        </div>
+                    </div>
+                </div>
+                <button
+                    onClick={onClose}
+                    className="p-1.5 hover:bg-foreground/10 rounded-lg text-muted-foreground hover:text-white transition-colors shrink-0"
+                    aria-label="Close"
+                >
+                    <X size={16} />
+                </button>
+            </div>
+
+            {/* Instruction input */}
+            <div className="flex items-center gap-2">
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={instruction}
+                    onChange={(e) => setInstruction(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Describe the change…"
+                    disabled={isProcessing}
+                    className="flex-1 bg-foreground/5 border border-border rounded-xl px-3.5 py-2.5 text-sm text-white placeholder:text-muted-foreground/60 outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/20 transition-all"
+                    autoComplete="off"
+                />
+                <button
+                    onClick={handleSubmit}
+                    disabled={!instruction.trim() || isProcessing}
+                    className={cn(
+                        "p-2.5 rounded-xl transition-all",
+                        instruction.trim() && !isProcessing
+                            ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md shadow-primary/20"
+                            : "bg-foreground/10 text-muted-foreground/50 cursor-not-allowed"
+                    )}
+                >
+                    {isProcessing ? (
+                        <Loader2 size={16} className="animate-spin" />
+                    ) : (
+                        <Send size={16} />
+                    )}
+                </button>
+            </div>
+
+            {/* Quick action chips */}
+            <div className="flex flex-wrap gap-1.5 mt-2.5">
+                {["Fix grammar", "Make shorter", "Make formal", "Simplify"].map(label => (
+                    <button
+                        key={label}
+                        onClick={() => {
+                            if (!isProcessing) onSubmit(label);
+                        }}
+                        disabled={isProcessing}
+                        className="px-2.5 py-1 rounded-full text-[11px] font-medium border border-border bg-foreground/5 text-muted-foreground hover:bg-foreground/10 hover:text-white transition-colors disabled:opacity-50"
+                    >
+                        {label}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+
+    /* ── Mobile: bottom sheet with backdrop ── */
+    if (isMobile) {
+        return (
+            <>
+                {/* Backdrop */}
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="fixed inset-0 z-[9998] bg-black/40"
+                    onClick={onClose}
+                />
+                {/* Bottom sheet */}
+                <motion.div
+                    initial={{ opacity: 0, y: 80 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 80 }}
+                    transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
+                    className="fixed bottom-0 left-0 right-0 z-[9999] selection-toolbar-sheet"
+                >
+                    {/* Drag handle */}
+                    <div className="flex justify-center pt-2 pb-1">
+                        <div className="w-8 h-1 rounded-full bg-foreground/20" />
+                    </div>
+                    {innerContent}
+                </motion.div>
+            </>
+        );
+    }
+
+    /* ── Desktop: floating popover ── */
+    const clampedX = Math.min(Math.max(position.x, 180), window.innerWidth - 180);
+    const clampedY = Math.min(Math.max(position.y, 60), window.innerHeight - 200);
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 8, scale: 0.96 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 8, scale: 0.96 }}
+            transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
+            className="fixed z-[9999] selection-toolbar-popover"
+            style={{
+                left: `${clampedX}px`,
+                top: `${clampedY}px`,
+                transform: "translateX(-50%)",
+            }}
+        >
+            {innerContent}
+        </motion.div>
+    );
+}
+
+// Maximum history snapshots to keep
+const MAX_HISTORY = 50;
+
+/**
+ * Document editor with edit/preview modes, formatting toolbar, undo/redo, and AI editing
+ */
+export default function LabsEditor({
+    content,
+    onChange,
+    isProcessing,
+    onSelectionEdit
+}) {
+    const [mode, setMode] = useState("edit");
+    const textareaRef = useRef(null);
+    const containerRef = useRef(null);
+    const [localContent, setLocalContent] = useState(content || "");
+    const debounceRef = useRef(null);
+
+    // Undo/Redo history
+    const [history, setHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const isUndoRedoRef = useRef(false);
+
+    // Selection state
+    const [selection, setSelection] = useState(null);
+    const [toolbarPosition, setToolbarPosition] = useState(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const [showToolbar, setShowToolbar] = useState(false);
+
+    // Sync external content changes
+    useEffect(() => {
+        if (content !== localContent && !isUndoRedoRef.current) {
+            setLocalContent(content || "");
+        }
+        isUndoRedoRef.current = false;
+    }, [content]);
+
+    // Save snapshot to history (called before AI edits and periodically)
+    const saveSnapshot = useCallback(() => {
+        setHistory(prev => {
+            // Remove any "future" states if we're not at the end
+            const newHistory = prev.slice(0, historyIndex + 1);
+            // Add current state
+            newHistory.push({
+                content: localContent,
+                timestamp: Date.now()
+            });
+            // Limit history size
+            if (newHistory.length > MAX_HISTORY) {
+                newHistory.shift();
+            }
+            return newHistory;
+        });
+        setHistoryIndex(prev => Math.min(prev + 1, MAX_HISTORY - 1));
+    }, [localContent, historyIndex]);
+
+    // Undo function
+    const handleUndo = useCallback(() => {
+        if (historyIndex > 0) {
+            isUndoRedoRef.current = true;
+            const prevState = history[historyIndex - 1];
+            setLocalContent(prevState.content);
+            onChange(prevState.content);
+            setHistoryIndex(prev => prev - 1);
+        }
+    }, [history, historyIndex, onChange]);
+
+    // Redo function
+    const handleRedo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            isUndoRedoRef.current = true;
+            const nextState = history[historyIndex + 1];
+            setLocalContent(nextState.content);
+            onChange(nextState.content);
+            setHistoryIndex(prev => prev + 1);
+        }
+    }, [history, historyIndex, onChange]);
+
+    // Debounced save with snapshot
+    const handleChange = useCallback((e) => {
+        const value = e.target.value;
+        setLocalContent(value);
+
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+
+        debounceRef.current = setTimeout(() => {
+            onChange(value);
+            // Save snapshot every few seconds of inactivity
+            saveSnapshot();
+        }, 1000);
+    }, [onChange, saveSnapshot]);
+
+    // Cleanup debounce on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, []);
+
+    // Auto-resize textarea
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (textarea && mode === "edit") {
+            textarea.style.height = "auto";
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+    }, [localContent, mode]);
+
+    // Handle formatting toolbar actions
+    const handleFormat = useCallback((prefix, suffix) => {
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const selectedText = textarea.value.substring(start, end);
+
+        let newText;
+        let newCursorPos;
+
+        if (selectedText) {
+            // Wrap selected text
+            newText = textarea.value.substring(0, start) +
+                prefix + selectedText + suffix +
+                textarea.value.substring(end);
+            newCursorPos = end + prefix.length + suffix.length;
+        } else {
+            // Insert at cursor
+            newText = textarea.value.substring(0, start) +
+                prefix + suffix +
+                textarea.value.substring(end);
+            newCursorPos = start + prefix.length;
+        }
+
+        setLocalContent(newText);
+        onChange(newText);
+
+        // Restore cursor position
+        requestAnimationFrame(() => {
+            textarea.focus();
+            textarea.setSelectionRange(newCursorPos, newCursorPos);
+        });
+    }, [onChange]);
+
+    // Handle text selection
+    const handleSelect = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const selectedText = textarea.value.substring(start, end);
+
+        if (selectedText.length > 3) {
+            const rect = textarea.getBoundingClientRect();
+            const textBeforeSelection = textarea.value.substring(0, start);
+            const lines = textBeforeSelection.split('\n');
+            const currentLine = lines.length;
+            const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
+            const scrollTop = textarea.scrollTop;
+
+            const rawX = rect.left + rect.width / 2;
+            // Account for scroll position when calculating y
+            const rawY = rect.top + (currentLine * lineHeight) - scrollTop - 40;
+            // Clamp x so toolbar stays within viewport
+            const x = Math.min(Math.max(rawX, 160), window.innerWidth - 160);
+            // Clamp y to stay within the textarea's visible bounds
+            const y = Math.min(
+                Math.max(rawY, rect.top + 10),
+                rect.bottom - 50
+            );
+
+            setSelection({
+                start,
+                end,
+                text: selectedText
+            });
+            setToolbarPosition({ x, y });
+        } else {
+            closeToolbar();
+        }
+    }, []);
+
+    const closeToolbar = () => {
+        setSelection(null);
+        setToolbarPosition(null);
+        setShowToolbar(false);
+        setIsEditing(false);
+    };
+
+    // Handle selection edit submission
+    const handleSelectionEdit = async (instruction) => {
+        if (!selection || !onSelectionEdit) return;
+
+        // Save snapshot before AI edit
+        saveSnapshot();
+        setIsEditing(true);
+
+        try {
+            const contextBefore = localContent.substring(
+                Math.max(0, selection.start - 100),
+                selection.start
+            );
+            const contextAfter = localContent.substring(
+                selection.end,
+                Math.min(localContent.length, selection.end + 100)
+            );
+
+            const replacement = await onSelectionEdit({
+                selectedText: selection.text,
+                instruction,
+                contextBefore,
+                contextAfter
+            });
+
+            if (replacement) {
+                const newContent =
+                    localContent.substring(0, selection.start) +
+                    replacement +
+                    localContent.substring(selection.end);
+
+                setLocalContent(newContent);
+                onChange(newContent);
+            }
+        } catch (error) {
+            console.error("[Labs] Selection edit failed:", error);
+        } finally {
+            setIsEditing(false);
+            closeToolbar();
+        }
+    };
+
+    // Keyboard shortcuts
+    useEffect(() => {
+        const handleKeyboard = (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    handleRedo();
+                } else {
+                    handleUndo();
+                }
+            }
+            if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
+                e.preventDefault();
+                handleRedo();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyboard);
+        return () => document.removeEventListener('keydown', handleKeyboard);
+    }, [handleUndo, handleRedo]);
+
+    // Close toolbar when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                closeToolbar();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    const canUndo = historyIndex > 0;
+    const canRedo = historyIndex < history.length - 1;
+
+    return (
+        <div ref={containerRef} className="h-full flex flex-col relative">
+            {/* Mode Toggle & History Controls */}
+            <div className="flex items-center gap-1 px-4 py-2 border-b border-border bg-background/50">
+                <button
+                    onClick={() => setMode("edit")}
+                    className={cn(
+                        "flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors",
+                        mode === "edit"
+                            ? "bg-foreground/10 text-white"
+                            : "text-muted-foreground hover:text-white hover:bg-foreground/5"
+                    )}
+                >
+                    <Edit3 size={14} />
+                    Edit
+                </button>
+                <button
+                    onClick={() => { setMode("preview"); closeToolbar(); }}
+                    className={cn(
+                        "flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors",
+                        mode === "preview"
+                            ? "bg-foreground/10 text-white"
+                            : "text-muted-foreground hover:text-white hover:bg-foreground/5"
+                    )}
+                >
+                    <Eye size={14} />
+                    Preview
+                </button>
+
+                {/* Spacer */}
+                <div className="flex-1" />
+
+                {/* AI Edit button — always visible, enabled when text selected */}
+                {mode === "edit" && (
+                    <button
+                        onClick={() => {
+                            if (selection) setShowToolbar(true);
+                        }}
+                        disabled={!selection || isProcessing || isEditing}
+                        className={cn(
+                            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all mr-1",
+                            selection && !isProcessing && !isEditing
+                                ? "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 shadow-sm shadow-primary/10"
+                                : "bg-foreground/5 text-muted-foreground/40 border border-transparent cursor-not-allowed"
+                        )}
+                        title={selection ? "Edit selected text with AI" : "Select text to enable AI editing"}
+                    >
+                        <Sparkles size={13} />
+                        <span className="hidden sm:inline">AI Edit</span>
+                    </button>
+                )}
+
+                {/* Undo/Redo */}
+                <HistoryControls
+                    canUndo={canUndo}
+                    canRedo={canRedo}
+                    onUndo={handleUndo}
+                    onRedo={handleRedo}
+                    historyCount={history.length}
+                />
+
+                {/* Status */}
+                {(isProcessing || isEditing) && (
+                    <div className="flex items-center gap-2 text-primary text-sm ml-2">
+                        <motion.div
+                            animate={{ rotate: 360 }}
+                            transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                            className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full"
+                        />
+                        <span>{isEditing ? "Editing..." : "AI working..."}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Formatting Toolbar (only in edit mode) */}
+            {mode === "edit" && (
+                <FormattingToolbar
+                    onFormat={handleFormat}
+                    disabled={isProcessing || isEditing}
+                />
+            )}
+
+            {/* Editor/Preview Area */}
+            <div className="flex-1 overflow-auto custom-scrollbar">
+                {mode === "edit" ? (
+                    <textarea
+                        ref={textareaRef}
+                        value={localContent}
+                        onChange={handleChange}
+                        onSelect={handleSelect}
+                        onMouseUp={handleSelect}
+                        placeholder="Start writing your document here...
+
+You can use Markdown formatting:
+# Heading 1
+## Heading 2
+**bold** and *italic*
+- Bullet lists
+1. Numbered lists
+> Blockquotes
+`inline code`
+
+💡 Tip: Use the toolbar above or select text for AI editing!"
+                        disabled={isProcessing || isEditing}
+                        className={cn(
+                            "w-full min-h-full p-6 bg-transparent outline-none resize-none text-white font-mono text-sm leading-relaxed",
+                            "placeholder:text-muted-foreground/50",
+                            (isProcessing || isEditing) && "opacity-50"
+                        )}
+                        spellCheck="true"
+                    />
+                ) : (
+                    <MarkdownPreview content={localContent} />
+                )}
+            </div>
+
+            {/* Selection Toolbar — opens via AI Edit button */}
+            <AnimatePresence>
+                {showToolbar && selection && mode === "edit" && (
+                    <SelectionToolbar
+                        position={toolbarPosition}
+                        selectedText={selection.text}
+                        onClose={closeToolbar}
+                        onSubmit={handleSelectionEdit}
+                        isProcessing={isEditing}
+                    />
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}

client/src/hooks/useChatSession.js

@@ -0,0 +1,592 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createParser } from "eventsource-parser";
+
+const MAX_MESSAGES = 20;
+const REQUEST_TIMEOUT_MS = 60000; // 60 second timeout
+const GLOBAL_HISTORY_KEY = "flowise_history_global";
+
+const MODES = [
+  { id: "chat", label: "Chat Mode" }
+];
+
+const ACTIVITY_LABELS = {
+  searching: "Searching",
+  reading: "Reading sources",
+  reasoning: "Reasoning",
+  writing: "Writing answer",
+  tool: "Using tool",
+  thinking: "Thinking",
+  planning: "Planning",
+  executing: "Executing"
+};
+
+// Global history - all sessions stored together with their modelId
+function loadAllSessions() {
+  const raw = localStorage.getItem(GLOBAL_HISTORY_KEY);
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch (error) {
+    return [];
+  }
+}
+
+function trimMessages(messages) {
+  if (messages.length <= MAX_MESSAGES) return messages;
+  return messages.slice(-MAX_MESSAGES);
+}
+
+function normalizeSessionsForStorage(sessions) {
+  return sessions.map((session) => ({
+    ...session,
+    messages: trimMessages(session.messages || [])
+  }));
+}
+
+function saveAllSessions(sessions) {
+  const normalized = normalizeSessionsForStorage(sessions);
+  try {
+    localStorage.setItem(GLOBAL_HISTORY_KEY, JSON.stringify(normalized));
+  } catch (error) {
+    const reduced = normalized.map((session) => ({
+      ...session,
+      messages: session.messages.slice(-10)
+    }));
+    try {
+      localStorage.setItem(GLOBAL_HISTORY_KEY, JSON.stringify(reduced));
+    } catch (innerError) {
+      localStorage.removeItem(GLOBAL_HISTORY_KEY);
+    }
+  }
+}
+
+// Session now includes modelId to lock it to that model
+function createSession(mode, modelId) {
+  return {
+    id: crypto.randomUUID(),
+    title: "New chat",
+    mode,
+    modelId, // Lock session to this model
+    createdAt: Date.now(),
+    messages: []
+  };
+}
+
+// Convert File object to Flowise upload format (base64 data URI)
+async function fileToFlowise(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve({
+      type: "file",
+      name: file.name,
+      data: reader.result, // data:mime;base64,...
+      mime: file.type || "application/octet-stream"
+    });
+    reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
+    reader.readAsDataURL(file);
+  });
+}
+
+// Convert array of File objects to Flowise uploads array
+async function filesToFlowise(files) {
+  if (!files || files.length === 0) return [];
+  const results = await Promise.all(
+    files.map(file => fileToFlowise(file).catch(err => {
+      console.warn(`Skipping file ${file.name}:`, err.message);
+      return null;
+    }))
+  );
+  return results.filter(Boolean);
+}
+
+export function useChatSession() {
+  const [models, setModels] = useState([]);
+  const [selectedModelId, setSelectedModelId] = useState("");
+  const [modelsIssues, setModelsIssues] = useState([]);
+  const [isModelsLoading, setIsModelsLoading] = useState(true);
+  const [modelsError, setModelsError] = useState("");
+  const [modelsReloadToken, setModelsReloadToken] = useState(0);
+  const [mode, setMode] = useState("chat");
+  const [sessions, setSessions] = useState([]);
+  const [activeSessionId, setActiveSessionId] = useState("");
+  const [message, setMessage] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const initialLoadDone = useRef(false);
+
+  const activeSession = sessions.find((item) => item.id === activeSessionId);
+
+  // Session is locked when it has messages - disables model switching
+  // IMPORTANT: This is computed, not stored, so it updates instantly
+  const isSessionLocked = useMemo(() => {
+    if (!activeSession) return false;
+    return (activeSession.messages?.length ?? 0) > 0;
+  }, [activeSession]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const controller = new AbortController();
+
+    async function loadModels() {
+      setIsModelsLoading(true);
+      setModelsError("");
+      try {
+        const res = await fetch("/models", { signal: controller.signal });
+        const raw = await res.json().catch(() => null);
+        if (!res.ok) {
+          const message =
+            (raw && (raw.error || raw.message)) ||
+            `Failed to load models (${res.status})`;
+          throw new Error(message);
+        }
+
+        const nextModels = Array.isArray(raw) ? raw : raw?.models;
+        const issues = Array.isArray(raw?.issues) ? raw.issues : [];
+
+        if (!Array.isArray(nextModels)) {
+          throw new Error("Invalid models response");
+        }
+
+        const normalized = nextModels
+          .filter((item) => item && typeof item === "object")
+          .map((item) => ({
+            id: String(item.id || ""),
+            name: String(item.name || ""),
+            features: {
+              uploads: Boolean(item?.features?.uploads),
+              tts: Boolean(item?.features?.tts),
+              stt: Boolean(item?.features?.stt),
+              status: String(item?.features?.status || "unknown")
+            }
+          }))
+          .filter((item) => item.id && item.name);
+
+        if (!isMounted) return;
+        setModels(normalized);
+        setModelsIssues(issues);
+
+        setSelectedModelId((prev) => {
+          if (prev && normalized.some((m) => m.id === prev)) return prev;
+          return normalized[0]?.id || "";
+        });
+      } catch (error) {
+        if (!isMounted) return;
+        if (error?.name === "AbortError") return;
+        setModels([]);
+        setModelsIssues([]);
+        setModelsError(error?.message || "Failed to load models");
+        setSelectedModelId("");
+      } finally {
+        if (!isMounted) return;
+        setIsModelsLoading(false);
+      }
+    }
+
+    loadModels();
+    return () => {
+      isMounted = false;
+      controller.abort();
+    };
+  }, [modelsReloadToken]);
+
+  // Load ALL sessions once on mount (global history)
+  useEffect(() => {
+    if (initialLoadDone.current) return;
+    initialLoadDone.current = true;
+
+    const stored = loadAllSessions();
+    setSessions(stored);
+    if (stored.length > 0) {
+      setActiveSessionId(stored[0].id);
+      // If the stored session has a modelId, switch to it
+      if (stored[0].modelId) {
+        setSelectedModelId(stored[0].modelId);
+      }
+    }
+  }, []);
+
+  // When no sessions exist and we have a model, create a fresh session
+  useEffect(() => {
+    if (sessions.length === 0 && selectedModelId && initialLoadDone.current) {
+      const fresh = createSession(mode, selectedModelId);
+      setSessions([fresh]);
+      setActiveSessionId(fresh.id);
+    }
+  }, [sessions.length, selectedModelId, mode]);
+
+  useEffect(() => {
+    if (activeSession?.mode) {
+      setMode(activeSession.mode);
+    }
+  }, [activeSession?.mode]);
+
+  // Save sessions globally whenever they change
+  useEffect(() => {
+    if (sessions.length > 0) {
+      saveAllSessions(sessions);
+    }
+  }, [sessions]);
+
+  const historyList = useMemo(() => {
+    return [...sessions].sort((a, b) => b.createdAt - a.createdAt);
+  }, [sessions]);
+
+  const selectedModel = useMemo(() => {
+    return models.find((m) => m.id === selectedModelId) || null;
+  }, [models, selectedModelId]);
+
+  // Handle session selection - auto-switch model to match session
+  function handleSelectSession(sessionId) {
+    const session = sessions.find(s => s.id === sessionId);
+    if (session) {
+      setActiveSessionId(sessionId);
+      // If the session has a modelId, switch to it
+      if (session.modelId) {
+        setSelectedModelId(session.modelId);
+      }
+    }
+  }
+
+  function updateSession(sessionId, updater) {
+    setSessions((prev) =>
+      prev.map((item) =>
+        item.id === sessionId ? updater(item) : item
+      )
+    );
+  }
+
+  function handleNewChat() {
+    const fresh = createSession(mode, selectedModelId);
+    setSessions((prev) => [fresh, ...prev]);
+    setActiveSessionId(fresh.id);
+    setMessage("");
+  }
+
+  function handleClearHistory() {
+    const fresh = createSession(mode, selectedModelId);
+    setSessions([fresh]);
+    setActiveSessionId(fresh.id);
+    setMessage("");
+  }
+
+  function handleModeChange(nextMode) {
+    setMode(nextMode);
+    if (activeSession) {
+      updateSession(activeSession.id, (session) => ({
+        ...session,
+        mode: nextMode
+      }));
+    }
+  }
+
+  async function handleSend(files = []) {
+    if (!message.trim() || !activeSession || isStreaming) return;
+    if (message.trim().length > 10000) return;
+
+    // Convert files to Flowise format
+    const uploads = await filesToFlowise(files);
+
+    const userMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: message.trim(),
+      attachments: uploads.length > 0 ? uploads.map(u => u.name) : undefined
+    };
+    const assistantMessage = {
+      id: crypto.randomUUID(),
+      role: "assistant",
+      content: "",
+      activities: [],
+      createdAt: Date.now()
+    };
+
+    if (!selectedModelId) {
+      updateSession(activeSession.id, (session) => ({
+        ...session,
+        mode,
+        messages: trimMessages([
+          ...session.messages,
+          userMessage,
+          {
+            ...assistantMessage,
+            content: "No AI model selected or configured. Please check your .env configuration in the server folder."
+          }
+        ])
+      }));
+      setMessage("");
+      return;
+    }
+
+    updateSession(activeSession.id, (session) => {
+      const updated = {
+        ...session,
+        mode,
+        messages: trimMessages([
+          ...session.messages,
+          userMessage,
+          assistantMessage
+        ])
+      };
+      if (session.title === "New chat") {
+        updated.title = userMessage.content.slice(0, 36);
+      }
+      return updated;
+    });
+    setMessage("");
+    setIsStreaming(true);
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Set up timeout for the request
+    timeoutRef.current = setTimeout(() => {
+      if (isStreaming) {
+        controller.abort();
+        updateSession(activeSession.id, (session) => ({
+          ...session,
+          messages: session.messages.map((msg) =>
+            msg.id === assistantMessage.id && !msg.content
+              ? {
+                ...msg,
+                content: "Request timed out. The AI server may be slow or unavailable. Please check your connection and try again."
+              }
+              : msg
+          )
+        }));
+        setIsStreaming(false);
+      }
+    }, REQUEST_TIMEOUT_MS);
+
+    let hasReceivedData = false;
+
+    try {
+      const response = await fetch("/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: userMessage.content,
+          modelId: selectedModelId,
+          mode,
+          sessionId: activeSession.id,
+          uploads: uploads.length > 0 ? uploads : undefined
+        }),
+        signal: controller.signal
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => "");
+        throw new Error(errorText || `Request failed (${response.status})`);
+      }
+
+      if (!response.body) {
+        throw new Error("No response received from server");
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+
+      const parser = createParser((event) => {
+        if (event.type !== "event") return;
+        const eventName = event.event || "";
+        const payload = event.data || "";
+        let parsed = null;
+        try {
+          parsed = JSON.parse(payload);
+        } catch (error) {
+          parsed = { text: payload };
+        }
+
+        if (eventName === "token") {
+          hasReceivedData = true;
+          // Reset timeout on receiving data
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => {
+              controller.abort();
+            }, REQUEST_TIMEOUT_MS);
+          }
+          updateSession(activeSession.id, (session) => ({
+            ...session,
+            messages: session.messages.map((msg) =>
+              msg.id === assistantMessage.id
+                ? { ...msg, content: msg.content + (parsed.text || "") }
+                : msg
+            )
+          }));
+        }
+
+        if (eventName === "activity") {
+          const activityKey = parsed.tool
+            ? `tool:${parsed.tool}`
+            : parsed.state;
+          updateSession(activeSession.id, (session) => ({
+            ...session,
+            messages: session.messages.map((msg) =>
+              msg.id === assistantMessage.id
+                ? {
+                  ...msg,
+                  activities: Array.from(
+                    new Set([...(msg.activities || []), activityKey])
+                  )
+                }
+                : msg
+            )
+          }));
+        }
+
+        if (eventName === "agentStep") {
+          updateSession(activeSession.id, (session) => ({
+            ...session,
+            messages: session.messages.map((msg) =>
+              msg.id === assistantMessage.id
+                ? {
+                  ...msg,
+                  agentSteps: [...(msg.agentSteps || []), parsed]
+                }
+                : msg
+            )
+          }));
+        }
+
+        if (eventName === "error") {
+          updateSession(activeSession.id, (session) => ({
+            ...session,
+            messages: session.messages.map((msg) =>
+              msg.id === assistantMessage.id
+                ? {
+                  ...msg,
+                  content:
+                    parsed.message || "Something went wrong. Please try again."
+                }
+                : msg
+            )
+          }));
+        }
+      });
+
+      // Force React to update on each chunk by using a render trigger
+      let renderCounter = 0;
+
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        parser.feed(chunk);
+
+        // Batch updates more efficiently - reduce render frequency for better performance
+        renderCounter++;
+        if (renderCounter % 6 === 0) {
+          // Use requestAnimationFrame for smoother streaming updates
+          requestAnimationFrame(() => {
+            setSessions(prev => [...prev]);
+          });
+        }
+      }
+
+      // Final update to ensure everything is saved
+      setSessions(prev => [...prev]);
+    } catch (error) {
+      // Clear timeout on error
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      if (error?.name === "AbortError") {
+        updateSession(activeSession.id, (session) => ({
+          ...session,
+          messages: session.messages.map((msg) =>
+            msg.id === assistantMessage.id && !msg.content
+              ? {
+                ...msg,
+                content: hasReceivedData
+                  ? "Response was interrupted. The partial response has been saved."
+                  : "Connection was interrupted. Please check your internet connection and try again."
+              }
+              : msg
+          )
+        }));
+        setIsStreaming(false);
+        return;
+      }
+
+      // Network error handling
+      const isNetworkError = error?.message?.includes("fetch") ||
+        error?.message?.includes("network") ||
+        error?.message?.includes("Failed to fetch") ||
+        !navigator.onLine;
+
+      updateSession(activeSession.id, (session) => ({
+        ...session,
+        messages: session.messages.map((msg) =>
+          msg.id === assistantMessage.id
+            ? {
+              ...msg,
+              content: isNetworkError
+                ? "Unable to connect to the server. Please check your internet connection and try again."
+                : error?.message || "Something went wrong. Please try again."
+            }
+            : msg
+        )
+      }));
+    } finally {
+      // Clear timeout on completion
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setIsStreaming(false);
+    }
+  }
+
+  return {
+    models,
+    selectedModelId,
+    setSelectedModelId,
+    modelsIssues,
+    isModelsLoading,
+    modelsError,
+    reloadModels: () => setModelsReloadToken((prev) => prev + 1),
+    selectedModel,
+    mode,
+    setMode,
+    sessions,
+    activeSession,
+    activeSessionId,
+    setActiveSessionId,
+    handleSelectSession, // Use this instead of setActiveSessionId for history clicks
+    isSessionLocked, // True when viewing a session that's locked to a specific model
+    message,
+    setMessage,
+    isStreaming,
+    handleNewChat,
+    handleClearHistory,
+    handleModeChange,
+    handleSend,
+    historyList,
+    MODES,
+    ACTIVITY_LABELS
+  };
+}
+
+export async function query(data) {
+  const response = await fetch("/predict", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data || {})
+  });
+  const isJson = (response.headers.get("content-type") || "").includes("application/json");
+  if (!response.ok) {
+    const text = isJson ? await response.json().catch(() => null) : await response.text().catch(() => "");
+    const message = (text && (text.error || text.message)) || (typeof text === "string" ? text : "");
+    throw new Error(message || `Request failed (${response.status})`);
+  }
+  return isJson ? await response.json() : {};
+}

client/src/hooks/useLabsProjects.js

@@ -0,0 +1,292 @@
+import { useEffect, useMemo, useState, useCallback, useRef } from "react";
+import { stripMetadata } from "../utils/contentUtils.js";
+
+// Storage key
+const STORAGE_KEY = "labs_projects_global";
+
+/**
+ * Load projects from localStorage
+ */
+function loadProjects() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      console.log("[Labs] No saved projects");
+      return [];
+    }
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      console.warn("[Labs] Invalid data format");
+      return [];
+    }
+    console.log(`[Labs] Loaded ${parsed.length} projects`);
+    return parsed;
+  } catch (e) {
+    console.error("[Labs] Load error:", e);
+    return [];
+  }
+}
+
+/**
+ * Save projects to localStorage
+ */
+function saveProjects(projects) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
+    console.log(`[Labs] Saved ${projects.length} projects`);
+  } catch (e) {
+    console.error("[Labs] Save error:", e);
+  }
+}
+
+/**
+ * Hook for managing Labs projects with localStorage persistence.
+ */
+export function useLabsProjects() {
+  // Initialize state from localStorage immediately
+  const [projects, setProjects] = useState(() => {
+    const loaded = loadProjects();
+    return loaded;
+  });
+
+  const [activeProjectId, setActiveProjectIdState] = useState(() => {
+    const loaded = loadProjects();
+    return loaded.length > 0 ? loaded[0].id : "";
+  });
+
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  // Get active project
+  const activeProject = useMemo(() => {
+    return projects.find(p => p.id === activeProjectId) || null;
+  }, [projects, activeProjectId]);
+
+  // Project is locked when it has content
+  const isProjectLocked = useMemo(() => {
+    if (!activeProject) return false;
+    return (activeProject.document?.trim().length ?? 0) > 0;
+  }, [activeProject]);
+
+  // Fetch Labs model name from server
+  const [labsModelName, setLabsModelName] = useState("");
+  useEffect(() => {
+    fetch("/labs-model")
+      .then(r => r.json())
+      .then(data => {
+        if (data.model?.name) setLabsModelName(data.model.name);
+      })
+      .catch(() => { });
+  }, []);
+
+  // Save to localStorage whenever projects change
+  useEffect(() => {
+    if (projects.length > 0) {
+      saveProjects(projects);
+    }
+  }, [projects]);
+
+  // Create a fresh project if none exist
+  useEffect(() => {
+    if (projects.length === 0) {
+      console.log("[Labs] Creating initial project");
+      const newProject = {
+        id: crypto.randomUUID(),
+        sessionId: crypto.randomUUID(),
+        name: "Untitled Project",
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        document: ""
+      };
+      setProjects([newProject]);
+      setActiveProjectIdState(newProject.id);
+    }
+  }, [projects.length]);
+
+  // Sorted list (newest first)
+  const projectList = useMemo(() => {
+    return [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
+  }, [projects]);
+
+  // Get model name (always returns the Labs model name)
+  const getModelName = useCallback(() => {
+    return labsModelName || "Labs Model";
+  }, [labsModelName]);
+
+  /**
+   * Set active project
+   */
+  const setActiveProjectId = useCallback((projectId) => {
+    const project = projects.find(p => p.id === projectId);
+    if (project) {
+      setActiveProjectIdState(projectId);
+      console.log(`[Labs] Activated: ${project.name}`);
+    }
+  }, [projects]);
+
+  /**
+   * Create new project
+   */
+  const handleNewProject = useCallback((name = "Untitled Project", document = "") => {
+    const newProject = {
+      id: crypto.randomUUID(),
+      sessionId: crypto.randomUUID(),
+      name,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      document
+    };
+    setProjects(prev => [newProject, ...prev]);
+    setActiveProjectIdState(newProject.id);
+    console.log(`[Labs] Created: ${name}`);
+    return newProject;
+  }, []);
+
+  /**
+   * Import document
+   */
+  const handleImportDocument = useCallback(async (file) => {
+    if (!file) return null;
+    const name = file.name.replace(/\.(txt|md|docx)$/i, "") || "Imported";
+    let content = "";
+    try {
+      if (file.name.endsWith(".docx")) {
+        const mammoth = await import("mammoth");
+        const buffer = await file.arrayBuffer();
+        const result = await mammoth.extractRawText({ arrayBuffer: buffer });
+        content = result.value || "";
+      } else {
+        content = await file.text();
+      }
+      return handleNewProject(name, content);
+    } catch (e) {
+      console.error("[Labs] Import error:", e);
+      throw e;
+    }
+  }, [handleNewProject]);
+
+  /**
+   * Delete project
+   */
+  const handleDeleteProject = useCallback((projectId) => {
+    setProjects(prev => {
+      const filtered = prev.filter(p => p.id !== projectId);
+      // Switch to another project if we deleted the active one
+      if (projectId === activeProjectId && filtered.length > 0) {
+        setActiveProjectIdState(filtered[0].id);
+      }
+      // If no projects left, clear storage
+      if (filtered.length === 0) {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+      return filtered;
+    });
+  }, [activeProjectId]);
+
+  /**
+   * Rename project
+   */
+  const handleRenameProject = useCallback((projectId, newName) => {
+    setProjects(prev => prev.map(p =>
+      p.id === projectId ? { ...p, name: newName, updatedAt: Date.now() } : p
+    ));
+  }, []);
+
+  /**
+   * Update document
+   */
+  const handleUpdateDocument = useCallback((newDocument) => {
+    if (!activeProjectId) return;
+    setProjects(prev => prev.map(p =>
+      p.id === activeProjectId
+        ? { ...p, document: newDocument, updatedAt: Date.now() }
+        : p
+    ));
+  }, [activeProjectId]);
+
+  /**
+   * AI Edit
+   */
+  const handleAIEdit = useCallback(async (instruction) => {
+    if (!activeProject) return null;
+    setIsProcessing(true);
+    console.log(`[Labs] AI Edit with session: ${activeProject.sessionId}`);
+
+    try {
+      const response = await fetch("/labs-edit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          document: activeProject.document,
+          instruction,
+          sessionId: activeProject.sessionId
+        })
+      });
+
+      if (!response.ok) {
+        const err = await response.text().catch(() => "");
+        throw new Error(err || `Request failed (${response.status})`);
+      }
+
+      if (!response.body) throw new Error("No response body");
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let fullContent = "";
+      let buffer = "";
+
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            try {
+              const data = JSON.parse(line.slice(6));
+              if (data.text) fullContent += data.text;
+            } catch {
+              fullContent += line.slice(6);
+            }
+          }
+        }
+      }
+
+      if (fullContent) {
+        const cleaned = stripMetadata(fullContent);
+        handleUpdateDocument(cleaned);
+      }
+      return fullContent;
+    } catch (e) {
+      console.error("[Labs] AI edit error:", e);
+      throw e;
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [activeProject, handleUpdateDocument]);
+
+  /**
+   * Force sync to storage
+   */
+  const forceSync = useCallback(() => {
+    saveProjects(projects);
+  }, [projects]);
+
+  return {
+    projects: projectList,
+    activeProject,
+    activeProjectId,
+    setActiveProjectId,
+    isProjectLocked,
+    isProcessing,
+    handleNewProject,
+    handleImportDocument,
+    handleDeleteProject,
+    handleRenameProject,
+    handleUpdateDocument,
+    handleAIEdit,
+    forceSync,
+    getModelName,
+    labsModelName
+  };
+}

client/src/index.css

@@ -0,0 +1,913 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 6%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 10%;
+    --card-foreground: 0 0% 100%;
+    --popover: 0 0% 8%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 187.9412 85.7143% 53.3333%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 14%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 0 0% 12%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 18%;
+    --input: 0 0% 16%;
+    --ring: 187.9412 85.7143% 53.3333%;
+    --input-surface: #1A1A1A;
+    --input-surface-focus: #1E1E1E;
+    --input-border: #2A2A2A;
+    --input-border-focus: #3A3A3A;
+    --placeholder-color: #6B6B6B;
+    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
+    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.18);
+    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  .light {
+    /* ChatGPT-Style Light Mode with Cyan Primary */
+    --background: 0 0% 100%;
+    --foreground: 220 14% 10%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 14% 10%;
+    --popover: 210 20% 97%;
+    --popover-foreground: 220 14% 10%;
+    /* Cyan primary - same hue as dark mode */
+    --primary: 187.9412 85.7143% 43%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 20% 96%;
+    --secondary-foreground: 220 14% 10%;
+    --muted: 210 20% 96%;
+    --muted-foreground: 220 9% 40%;
+    --accent: 210 20% 93%;
+    --accent-foreground: 220 14% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 13% 88%;
+    --input: 210 20% 97%;
+    --ring: 187.9412 85.7143% 43%;
+    --input-surface: #FFFFFF;
+    --input-surface-focus: #F8FAFC;
+    --input-border: #E5E7EB;
+    --input-border-focus: #22D3EE;
+    --placeholder-color: #9CA3AF;
+    --scrollbar-thumb: rgba(0, 0, 0, 0.12);
+    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
+
+    /* Light mode specific colors for components */
+    --sidebar-bg: 210 20% 97%;
+    --sidebar-border: 220 13% 90%;
+    --chat-user-bubble: 187.9412 85.7143% 43%;
+    --chat-user-text: 0 0% 100%;
+    --message-text: 220 14% 15%;
+    --heading-text: 220 14% 10%;
+    --link-color: 187.9412 85.7143% 35%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html,
+  body {
+    overflow-x: hidden;
+    width: 100%;
+    position: relative;
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    @apply bg-background text-foreground antialiased;
+  }
+}
+
+@layer utilities {
+  .glass {
+    @apply bg-background/75 backdrop-blur-xl border border-border;
+  }
+
+  .glass-light {
+    @apply bg-background/75 backdrop-blur-xl border border-border;
+  }
+}
+
+/* Refined Input Container - Floating, Calm, Precise */
+.refined-input-container {
+  position: relative;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 8px;
+}
+
+.refined-input-container>div {
+  background: rgba(26, 26, 26, 0.6);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 14px;
+  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.refined-input-container>div:focus-within {
+  background: rgba(30, 30, 30, 0.7);
+  border-color: rgba(255, 255, 255, 0.10);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Light mode refinements */
+.light .refined-input-container>div {
+  background: rgba(245, 245, 245, 0.8);
+  border-color: rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.light .refined-input-container>div:focus-within {
+  background: rgba(240, 240, 240, 0.9);
+  border-color: rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
+}
+
+/* Floating Input Bar - Gemini Style */
+.floating-input-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #2F2F2F;
+  border-radius: 28px;
+  padding: 4px 8px 4px 4px;
+  min-height: 48px;
+  max-width: 100%;
+  transition: all 150ms ease;
+}
+
+.floating-input-bar:focus-within {
+  background: #363636;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.light .floating-input-bar {
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.light .floating-input-bar:focus-within {
+  background: #FFFFFF;
+  border-color: #22D3EE;
+  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15), 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+
+/* Custom Scrollbar */
+::selection {
+  background: rgba(34, 211, 238, 0.18);
+  color: hsl(var(--foreground));
+}
+
+::-moz-selection {
+  background: rgba(34, 211, 238, 0.18);
+  color: hsl(var(--foreground));
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 9999px;
+  transition: background-color 150ms ease;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb,
+.custom-scrollbar.scrolling::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover,
+.custom-scrollbar.scrolling::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
+/* Markdown Content Styling */
+.markdown-content {
+  line-height: 1.7;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.markdown-content>*:first-child {
+  margin-top: 0;
+}
+
+.markdown-content>*:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-content p {
+  margin: 0.6em 0;
+}
+
+/* Ordered list counter styling */
+.markdown-content ol {
+  counter-reset: list-item;
+}
+
+.markdown-content ol>li {
+  counter-increment: list-item;
+}
+
+.markdown-content ol>li>span:first-child {
+  content: counter(list-item) ".";
+}
+
+/* Code block syntax highlighting enhancement */
+.markdown-content pre {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.markdown-content pre code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  color: #E2E8F0;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* Table row striping */
+.markdown-content table {
+  font-size: 14px;
+}
+
+.markdown-content table tbody tr:nth-child(even) {
+  background-color: hsla(var(--foreground) / 0.02);
+}
+
+/* Smooth transitions for interactive elements */
+.markdown-content a,
+.markdown-content button,
+.markdown-content tr {
+  transition: all 0.15s ease;
+}
+
+/* Image styling in markdown */
+.markdown-content img {
+  @apply rounded-lg my-4 max-w-full h-auto border border-border;
+}
+
+/* Definition list styling */
+.markdown-content dl {
+  @apply my-4;
+}
+
+.markdown-content dt {
+  @apply font-semibold text-foreground mt-2;
+}
+
+.markdown-content dd {
+  @apply ml-4 text-foreground/80;
+}
+
+/* Text Fade-in Animation */
+@keyframes fadeInText {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-text>* {
+  animation: fadeInText 0.3s ease-out forwards;
+}
+
+.fade-in-text p,
+.fade-in-text li,
+.fade-in-text table {
+  animation: fadeInText 0.3s ease-out forwards;
+}
+
+@keyframes thinkingDotPulse {
+
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+  }
+
+  40% {
+    opacity: 1;
+  }
+}
+
+.thinking-dot {
+  animation: thinkingDotPulse 1.4s infinite;
+}
+
+/* ── Activity Panel (Gemini/Perplexity-style) ── */
+.activity-panel {
+  border: 1px solid hsl(var(--border));
+  border-radius: 12px;
+  background: hsl(var(--foreground) / 0.03);
+  overflow: hidden;
+}
+
+.activity-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: background 150ms ease;
+  border: none;
+  background: none;
+  text-align: left;
+}
+
+.activity-panel-header:hover {
+  background: hsl(var(--foreground) / 0.04);
+}
+
+.activity-panel-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 12px 10px;
+}
+
+.activity-step-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.4;
+}
+
+.activity-step-icon {
+  flex-shrink: 0;
+  font-size: 12px;
+  width: 18px;
+  text-align: center;
+}
+
+.activity-step-sources {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px 0 4px 26px;
+}
+
+.activity-source-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px 3px 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  max-width: 220px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--foreground) / 0.05);
+  color: hsl(var(--muted-foreground));
+  text-decoration: none;
+  transition: background 150ms ease, border-color 150ms ease;
+}
+
+.activity-source-chip:hover {
+  background: hsl(var(--foreground) / 0.08);
+  border-color: hsl(var(--foreground) / 0.15);
+  color: hsl(var(--foreground) / 0.9);
+}
+
+/* ── Selection Toolbar (Labs AI Edit) ── */
+.selection-toolbar-sheet {
+  background: hsl(var(--card));
+  border-top: 1px solid hsl(var(--border));
+  border-radius: 20px 20px 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 8px);
+  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
+}
+
+.selection-toolbar-popover {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 16px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 0 0 1px hsl(var(--border));
+  min-width: 320px;
+  max-width: 420px;
+}
+
+.selection-toolbar-inner {
+  padding: 12px 16px 14px;
+}
+
+.chat-input {
+  font-family: inherit;
+}
+
+.chat-input::placeholder {
+  color: var(--placeholder-color);
+  opacity: 1;
+  transition: opacity 180ms ease-out;
+}
+
+.chat-input:focus::placeholder {
+  opacity: 0.4;
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+
+  /* Fix mobile viewport height issues - account for browser UI */
+  html,
+  body {
+    height: 100vh;
+    height: 100dvh;
+    overflow: hidden;
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  #root {
+    height: 100vh;
+    height: 100dvh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Use JS-set custom property as ultimate fallback */
+  html.has-app-height,
+  html.has-app-height body {
+    height: var(--app-height, 100dvh);
+  }
+
+  html.has-app-height #root {
+    height: var(--app-height, 100dvh);
+  }
+
+  /* Safe area padding for devices with notches/navigation bars */
+  .floating-input-bar {
+    position: relative;
+    z-index: 10;
+  }
+
+  /* Ensure main content doesn't overflow */
+  main {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .markdown-content pre {
+    font-size: 12px;
+    padding: 12px;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .markdown-content h1 {
+    font-size: 1.25rem;
+  }
+
+  .markdown-content h2 {
+    font-size: 1.125rem;
+  }
+
+  .markdown-content h3 {
+    font-size: 1rem;
+  }
+
+  .markdown-content table {
+    font-size: 12px;
+    max-width: 100%;
+    table-layout: auto;
+    width: 100%;
+  }
+
+  .markdown-content table th,
+  .markdown-content table td {
+    padding: 8px 10px;
+    white-space: nowrap;
+  }
+
+  .refined-input-container {
+    padding: 0 4px;
+    padding-bottom: env(safe-area-inset-bottom, 8px);
+  }
+
+  /* Fix text overflow/cutting issues */
+  .chat-input,
+  textarea,
+  input[type="text"] {
+    max-width: 100%;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* Prevent horizontal scroll */
+  .markdown-content {
+    max-width: 100%;
+    overflow-x: hidden;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .markdown-content p,
+  .markdown-content li {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+}
+
+/* ========================================
+   LIGHT MODE COMPREHENSIVE OVERRIDES
+   ChatGPT-Style Light Theme with Cyan Accents
+   ======================================== */
+
+/* Sidebar styling for light mode */
+.light aside,
+.light [class*="bg-popover"] {
+  background-color: hsl(210, 20%, 97%) !important;
+  border-color: hsl(220, 13%, 90%) !important;
+}
+
+/* Light mode sidebar border */
+.light .border-\[rgba\(255\,255\,255\,0\.04\)\] {
+  border-color: hsl(220, 13%, 90%) !important;
+}
+
+/* Chat area and cards in light mode */
+.light .bg-card,
+.light [class*="bg-card"] {
+  background-color: #FFFFFF !important;
+}
+
+/* User message bubble - cyan themed */
+.light .bg-\[\#2F2F2F\] {
+  background-color: #0891B2 !important;
+  color: #FFFFFF !important;
+}
+
+/* History item selected state */
+.light .bg-\[\#202338\] {
+  background-color: rgba(8, 145, 178, 0.12) !important;
+}
+
+/* History item hover state */
+.light .hover\:bg-\[\#1A1D29\]:hover {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+/* Cyan accent indicator line */
+.light .bg-\[\#22D3EE\] {
+  background-color: #0891B2 !important;
+}
+
+/* Text colors - ensure proper contrast */
+.light .text-white {
+  color: hsl(220, 14%, 10%) !important;
+}
+
+.light .text-white\/90,
+.light .text-white\/95,
+.light .text-white\/80 {
+  color: hsl(220, 14%, 15%) !important;
+}
+
+/* Specific overrides for inputs where white text is needed on colored backgrounds */
+.light .bg-\[\#2F2F2F\] .text-white,
+.light .bg-\[\#0891B2\] .text-white,
+.light .bg-primary .text-white,
+.light [class*="bg-primary"] .text-white,
+.light .floating-input-bar .text-white {
+  color: #FFFFFF !important;
+}
+
+/* Keep text input dark on light background - with high specificity */
+.light .floating-input-bar textarea,
+.light .floating-input-bar input,
+.light .floating-input-bar textarea.text-white,
+.light .floating-input-bar input.text-white {
+  color: hsl(220, 14%, 10%) !important;
+  caret-color: hsl(220, 14%, 10%) !important;
+}
+
+/* Ensure placeholder is visible but lighter */
+.light .floating-input-bar textarea::placeholder,
+.light .floating-input-bar input::placeholder {
+  color: hsl(220, 9%, 50%) !important;
+  opacity: 1 !important;
+}
+
+/* All input fields and textareas in light mode */
+.light input[type="text"],
+.light input[type="text"].text-white,
+.light textarea,
+.light textarea.text-white {
+  color: hsl(220, 14%, 10%) !important;
+  caret-color: hsl(220, 14%, 10%) !important;
+}
+
+/* Labs editor textarea specifically */
+.light textarea.font-mono,
+.light textarea.font-mono.text-white {
+  color: hsl(220, 14%, 10%) !important;
+  caret-color: hsl(220, 14%, 10%) !important;
+}
+
+/* All input placeholders in light mode */
+.light input::placeholder,
+.light textarea::placeholder {
+  color: hsl(220, 9%, 50%) !important;
+  opacity: 1 !important;
+}
+
+/* Muted foreground for labels and hints */
+.light .text-muted-foreground {
+  color: hsl(220, 9%, 40%) !important;
+}
+
+/* Links in markdown content */
+.light .markdown-content a {
+  color: #0891B2 !important;
+  text-decoration-color: rgba(8, 145, 178, 0.4) !important;
+}
+
+.light .markdown-content a:hover {
+  color: #0E7490 !important;
+  text-decoration-color: rgba(8, 145, 178, 0.6) !important;
+}
+
+/* Code blocks in light mode */
+.light .markdown-content pre {
+  background-color: hsl(210, 20%, 96%) !important;
+  border-color: hsl(220, 13%, 88%) !important;
+}
+
+.light .markdown-content pre code,
+.light .markdown-content code {
+  color: hsl(220, 14%, 15%) !important;
+}
+
+/* Inline code styling */
+.light .bg-foreground\/10 {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+/* Table styling */
+.light .markdown-content table {
+  border-color: hsl(220, 13%, 88%) !important;
+}
+
+.light .markdown-content thead {
+  background-color: hsl(210, 20%, 96%) !important;
+}
+
+.light .markdown-content th,
+.light .markdown-content td {
+  color: hsl(220, 14%, 15%) !important;
+  border-color: hsl(220, 13%, 88%) !important;
+}
+
+/* Blockquotes */
+.light .markdown-content blockquote {
+  background-color: hsl(210, 20%, 97%) !important;
+  border-left-color: #0891B2 !important;
+  color: hsl(220, 14%, 20%) !important;
+}
+
+/* Headings */
+.light .markdown-content h1,
+.light .markdown-content h2,
+.light .markdown-content h3 {
+  color: hsl(220, 14%, 10%) !important;
+  border-color: hsl(220, 13%, 88%) !important;
+}
+
+/* Buttons in light mode */
+.light .bg-\[\#4A4A4A\] {
+  background-color: #0891B2 !important;
+  color: #FFFFFF !important;
+}
+
+.light .hover\:bg-\[\#5A5A5A\]:hover {
+  background-color: #0E7490 !important;
+}
+
+.light .bg-\[\#3A3A3A\] {
+  background-color: hsl(210, 20%, 92%) !important;
+  color: hsl(220, 9%, 50%) !important;
+}
+
+/* File attachment chips */
+.light .bg-\[\#3A3A3A\].rounded-full {
+  background-color: hsl(210, 20%, 90%) !important;
+  color: hsl(220, 14%, 20%) !important;
+}
+
+/* Source link chips */
+.light .bg-\[\#2A2A2A\] {
+  background-color: hsl(210, 20%, 96%) !important;
+  border-color: hsl(220, 13%, 85%) !important;
+}
+
+/* Dropdown menus */
+.light .bg-\[\#1E1E1E\] {
+  background-color: #FFFFFF !important;
+  border-color: hsl(220, 13%, 88%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
+}
+
+/* Processing/loading states */
+.light .border-muted-foreground\/20 {
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.light .border-t-muted-foreground\/60 {
+  border-top-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Pro tips / suggestion buttons */
+.light .border-border {
+  border-color: hsl(220, 13%, 88%) !important;
+}
+
+/* Hero section styling */
+.light .font-display {
+  color: hsl(220, 14%, 10%) !important;
+}
+
+/* Action buttons hover */
+.light .hover\:bg-white\/5:hover {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+.light .hover\:text-white:hover {
+  color: hsl(220, 14%, 10%) !important;
+}
+
+/* Selection styling for light mode */
+.light ::selection {
+  background: rgba(8, 145, 178, 0.2);
+  color: hsl(220, 14%, 10%);
+}
+
+.light ::-moz-selection {
+  background: rgba(8, 145, 178, 0.2);
+  color: hsl(220, 14%, 10%);
+}
+
+/* Mobile header in light mode */
+.light .border-border\/30 {
+  border-color: hsl(220, 13%, 90%) !important;
+}
+
+/* Export menu items */
+.light .hover\:bg-foreground\/10:hover {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+/* Labs editor area */
+.light .bg-background {
+  background-color: #FFFFFF !important;
+}
+
+/* Status badges */
+.light .bg-green-400\/10 {
+  background-color: rgba(74, 222, 128, 0.15) !important;
+}
+
+.light .text-green-400\/70,
+.light .text-green-400 {
+  color: #16A34A !important;
+}
+
+.light .bg-yellow-400\/10 {
+  background-color: rgba(250, 204, 21, 0.15) !important;
+}
+
+.light .text-yellow-400\/70 {
+  color: #CA8A04 !important;
+}
+
+/* Cursor states and animations */
+.light .bg-white\/70 {
+  background-color: hsl(220, 14%, 20%) !important;
+}
+
+/* Labs project sidebar */
+.light .bg-foreground\/5 {
+  background-color: rgba(0, 0, 0, 0.03) !important;
+}
+
+.light .hover\:bg-foreground\/8:hover,
+.light .hover\:bg-foreground\/5:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+/* Thinking dots remain visible in light mode */
+.light .thinking-dot {
+  background-color: hsl(220, 9%, 40%) !important;
+}
+
+/* Activity panel in light mode */
+.light .activity-panel {
+  border-color: hsl(220, 13%, 88%) !important;
+  background: rgba(0, 0, 0, 0.02) !important;
+}
+
+.light .activity-panel-header {
+  color: hsl(220, 9%, 40%) !important;
+}
+
+.light .activity-panel-header:hover {
+  background: rgba(0, 0, 0, 0.04) !important;
+}
+
+.light .activity-step-row {
+  color: hsl(220, 9%, 40%) !important;
+}
+
+.light .activity-source-chip {
+  background: rgba(0, 0, 0, 0.04) !important;
+  border-color: hsl(220, 13%, 88%) !important;
+  color: hsl(220, 9%, 40%) !important;
+}
+
+.light .activity-source-chip:hover {
+  background: rgba(0, 0, 0, 0.07) !important;
+}
+
+/* Selection toolbar light mode — shadows only (colors via CSS vars) */
+.light .selection-toolbar-sheet {
+  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.1) !important;
+}
+
+.light .selection-toolbar-popover {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px hsl(var(--border)) !important;
+}
+
+/* Streaming status badges */
+.light .bg-foreground\/5.border-border {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+/* Ensure primary color elements use cyan */
+.light .text-primary {
+  color: #0891B2 !important;
+}
+
+.light .bg-primary {
+  background-color: #0891B2 !important;
+}
+
+.light .bg-primary\/10 {
+  background-color: rgba(8, 145, 178, 0.1) !important;
+}
+
+.light .bg-primary\/20 {
+  background-color: rgba(8, 145, 178, 0.2) !important;
+}
+
+.light .hover\:bg-primary\/90:hover {
+  background-color: #0E7490 !important;
+}
+
+/* Icon colors in sidebar */
+.light .text-\[\#22D3EE\] {
+  color: #0891B2 !important;
+}

client/src/main.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

client/src/test_labs_persistence.js

@@ -0,0 +1,240 @@
+/**
+ * Labs Persistence Test Suite
+ * Run this in browser console at http://localhost:5173/
+ * 
+ * Tests the localStorage persistence logic for Labs projects
+ */
+
+const STORAGE_KEY = "labs_projects_global";
+
+console.log("=== LABS PERSISTENCE TEST SUITE ===\n");
+
+// Test 1: Storage Key Existence
+function test1_storageExists() {
+    console.log("TEST 1: Check if storage key exists");
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+        console.log("✅ Storage key exists");
+        console.log(`   Size: ${raw.length} bytes`);
+        return true;
+    } else {
+        console.log("⚠️  Storage key does not exist (fresh start)");
+        return false;
+    }
+}
+
+// Test 2: Parse Storage Data
+function test2_parseData() {
+    console.log("\nTEST 2: Parse stored data");
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+        console.log("⚠️  No data to parse");
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed)) {
+            console.log(`✅ Data parsed successfully - ${parsed.length} projects`);
+            return parsed;
+        } else {
+            console.log("❌ Data is not an array");
+            return null;
+        }
+    } catch (e) {
+        console.log("❌ JSON parse failed:", e.message);
+        return null;
+    }
+}
+
+// Test 3: Validate Project Structure
+function test3_validateProjects(projects) {
+    console.log("\nTEST 3: Validate project structure");
+    if (!projects || projects.length === 0) {
+        console.log("⚠️  No projects to validate");
+        return false;
+    }
+
+    let allValid = true;
+    const requiredFields = ["id", "sessionId", "name", "createdAt", "updatedAt", "document"];
+
+    projects.forEach((project, index) => {
+        const missing = requiredFields.filter(field => !(field in project));
+        if (missing.length > 0) {
+            console.log(`❌ Project ${index} missing fields: ${missing.join(", ")}`);
+            allValid = false;
+        } else {
+            console.log(`✅ Project ${index}: "${project.name}" - valid structure`);
+            console.log(`   ID: ${project.id}`);
+            console.log(`   SessionID: ${project.sessionId}`);
+            console.log(`   Document length: ${(project.document || "").length} chars`);
+        }
+    });
+
+    return allValid;
+}
+
+// Test 4: Unique Session IDs
+function test4_uniqueSessionIds(projects) {
+    console.log("\nTEST 4: Check unique sessionIds");
+    if (!projects || projects.length === 0) {
+        console.log("⚠️  No projects to check");
+        return true;
+    }
+
+    const sessionIds = projects.map(p => p.sessionId);
+    const uniqueIds = new Set(sessionIds);
+
+    if (sessionIds.length === uniqueIds.size) {
+        console.log(`✅ All ${sessionIds.length} sessionIds are unique`);
+        return true;
+    } else {
+        console.log(`❌ Duplicate sessionIds found!`);
+        return false;
+    }
+}
+
+// Test 5: Save and Load Cycle
+function test5_saveLoadCycle() {
+    console.log("\nTEST 5: Save and Load Cycle");
+
+    // Create test project
+    const testProject = {
+        id: "test-" + Date.now(),
+        sessionId: "session-" + Date.now(),
+        modelId: "test-model",
+        name: "Test Project " + new Date().toLocaleTimeString(),
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        document: "Test document content for persistence testing."
+    };
+
+    // Get current projects
+    const raw = localStorage.getItem(STORAGE_KEY);
+    let projects = [];
+    try {
+        projects = raw ? JSON.parse(raw) : [];
+    } catch (e) {
+        projects = [];
+    }
+
+    // Add test project
+    projects.push(testProject);
+
+    // Save
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
+        console.log("✅ Save successful");
+    } catch (e) {
+        console.log("❌ Save failed:", e.message);
+        return false;
+    }
+
+    // Load and verify
+    try {
+        const loaded = JSON.parse(localStorage.getItem(STORAGE_KEY));
+        const found = loaded.find(p => p.id === testProject.id);
+        if (found && found.document === testProject.document) {
+            console.log("✅ Load and verify successful");
+            console.log(`   Project "${testProject.name}" persisted correctly`);
+
+            // Clean up - remove test project
+            const cleaned = loaded.filter(p => p.id !== testProject.id);
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(cleaned));
+            console.log("✅ Test project cleaned up");
+            return true;
+        } else {
+            console.log("❌ Loaded data doesn't match saved data");
+            return false;
+        }
+    } catch (e) {
+        console.log("❌ Load failed:", e.message);
+        return false;
+    }
+}
+
+// Test 6: Large Document Handling
+function test6_largeDocument() {
+    console.log("\nTEST 6: Large document handling");
+
+    // Create a large document (100KB)
+    const largeDoc = "x".repeat(100000);
+    const testProject = {
+        id: "large-test-" + Date.now(),
+        sessionId: "session-" + Date.now(),
+        modelId: "",
+        name: "Large Doc Test",
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        document: largeDoc
+    };
+
+    try {
+        localStorage.setItem("test_large", JSON.stringify([testProject]));
+        const loaded = JSON.parse(localStorage.getItem("test_large"));
+        localStorage.removeItem("test_large");
+
+        if (loaded[0].document.length === 100000) {
+            console.log("✅ Large document (100KB) saved and loaded correctly");
+            return true;
+        } else {
+            console.log("❌ Large document corrupted");
+            return false;
+        }
+    } catch (e) {
+        console.log("❌ Large document test failed:", e.message);
+        localStorage.removeItem("test_large");
+        return false;
+    }
+}
+
+// Run all tests
+function runAllTests() {
+    console.log("\n" + "=".repeat(50));
+    console.log("RUNNING ALL TESTS");
+    console.log("=".repeat(50) + "\n");
+
+    const results = [];
+
+    results.push({ name: "Storage Exists", passed: test1_storageExists() });
+
+    const projects = test2_parseData();
+    results.push({ name: "Parse Data", passed: projects !== null || localStorage.getItem(STORAGE_KEY) === null });
+
+    if (projects) {
+        results.push({ name: "Validate Projects", passed: test3_validateProjects(projects) });
+        results.push({ name: "Unique SessionIds", passed: test4_uniqueSessionIds(projects) });
+    }
+
+    results.push({ name: "Save/Load Cycle", passed: test5_saveLoadCycle() });
+    results.push({ name: "Large Document", passed: test6_largeDocument() });
+
+    console.log("\n" + "=".repeat(50));
+    console.log("TEST RESULTS SUMMARY");
+    console.log("=".repeat(50));
+
+    const passed = results.filter(r => r.passed).length;
+    const total = results.length;
+
+    results.forEach(r => {
+        console.log(`${r.passed ? "✅" : "❌"} ${r.name}`);
+    });
+
+    console.log("\n" + `${passed}/${total} tests passed`);
+
+    if (passed === total) {
+        console.log("\n🎉 ALL TESTS PASSED! Persistence is working correctly.");
+    } else {
+        console.log("\n⚠️  Some tests failed. Check the output above.");
+    }
+
+    return { passed, total, results };
+}
+
+// Export for browser console
+window.labsTest = { runAllTests, test1_storageExists, test2_parseData, test3_validateProjects, test4_uniqueSessionIds, test5_saveLoadCycle, test6_largeDocument };
+
+console.log("\nTest suite loaded. Run: labsTest.runAllTests()");
+console.log("Or run individual tests: labsTest.test1_storageExists()");
+
+// Auto-run
+runAllTests();

client/src/utils/contentUtils.js

@@ -0,0 +1,53 @@
+/**
+ * Utility functions for cleaning and processing AI response content
+ */
+
+/**
+ * Strips JSON metadata blocks that AI agents sometimes output.
+ * These are internal traces that shouldn't be displayed to users.
+ * 
+ * Patterns removed:
+ * - {"event":"agent_trace",...} blocks with nested content
+ * - Long JSON objects containing runId, parentRunId, toolInput, etc.
+ * 
+ * @param {string} text - The raw text content
+ * @returns {string} - Cleaned text without metadata
+ */
+export function stripMetadata(text) {
+    if (!text || typeof text !== "string") return text;
+
+    // Pattern to match agent_trace JSON blocks
+    // These can be quite long and contain nested objects
+    let cleaned = text;
+
+    // Remove {"event":"agent_trace",...} patterns
+    // This regex matches from {"event":"agent_trace" to the closing }
+    // accounting for nested braces
+    cleaned = cleaned.replace(
+        /\{"event"\s*:\s*"agent_trace"[^]*?"runId"\s*:\s*"[a-f0-9-]+"\s*,\s*"parentRunId"\s*:\s*"[a-f0-9-]+"\s*\}\s*\}/g,
+        ""
+    );
+
+    // Fallback simpler pattern for variations
+    cleaned = cleaned.replace(
+        /\{"event"\s*:\s*"agent_trace"[^}]*\}(?:\s*\})?/g,
+        ""
+    );
+
+    // Remove JSON blocks that look like tool metadata
+    cleaned = cleaned.replace(
+        /\{"tool"\s*:\s*"[^"]+"\s*,\s*"toolInput"\s*:[^}]+\}[^{]*/g,
+        ""
+    );
+
+    // Remove any remaining runId/parentRunId JSON fragments
+    cleaned = cleaned.replace(
+        /\{"runId"\s*:\s*"[a-f0-9-]+"\s*,\s*"parentRunId"\s*:\s*"[a-f0-9-]+"\s*\}/g,
+        ""
+    );
+
+    // Clean up multiple consecutive newlines that may result from removals
+    cleaned = cleaned.replace(/\n{3,}/g, "\n\n");
+
+    return cleaned.trim();
+}

client/src/utils/exportToPdf.js

@@ -0,0 +1,175 @@
+import jsPDF from "jspdf";
+import html2canvas from "html2canvas";
+
+/**
+ * Converts markdown content to a styled PDF document
+ * @param {string} content - Markdown content
+ * @param {string} filename - Name for the exported file (without extension)
+ */
+export async function exportToPdf(content, filename = "document") {
+    // Create a temporary container to render the content
+    const container = document.createElement("div");
+    container.style.cssText = `
+        position: absolute;
+        left: -9999px;
+        top: 0;
+        width: 210mm;
+        padding: 20mm;
+        background: white;
+        color: black;
+        font-family: 'Inter', 'Segoe UI', 'Arial', sans-serif;
+        font-size: 12pt;
+        line-height: 1.6;
+    `;
+
+    // Process the markdown content to HTML with basic styling
+    const htmlContent = markdownToHtml(content);
+    container.innerHTML = htmlContent;
+    document.body.appendChild(container);
+
+    try {
+        // Wait for any images/fonts to load
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Capture the content as canvas
+        const canvas = await html2canvas(container, {
+            scale: 2,
+            useCORS: true,
+            logging: false,
+            backgroundColor: "#ffffff"
+        });
+
+        // Create PDF
+        const imgWidth = 210; // A4 width in mm
+        const pageHeight = 297; // A4 height in mm
+        const imgHeight = (canvas.height * imgWidth) / canvas.width;
+        let heightLeft = imgHeight;
+        let position = 0;
+
+        const pdf = new jsPDF("p", "mm", "a4");
+        const imgData = canvas.toDataURL("image/png");
+
+        // Add first page
+        pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
+        heightLeft -= pageHeight;
+
+        // Add additional pages if content is longer than one page
+        while (heightLeft > 0) {
+            position = heightLeft - imgHeight;
+            pdf.addPage();
+            pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
+            heightLeft -= pageHeight;
+        }
+
+        // Save the PDF
+        pdf.save(`${filename}.pdf`);
+    } finally {
+        // Clean up
+        document.body.removeChild(container);
+    }
+}
+
+/**
+ * Converts markdown to styled HTML for PDF rendering
+ * Handles common markdown syntax including LaTeX (as plain text for PDF)
+ */
+function markdownToHtml(markdown) {
+    if (!markdown) return "";
+
+    let html = markdown;
+
+    // Escape HTML entities
+    html = html
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+
+    // Convert LaTeX blocks to styled spans (rendered as formatted text)
+    html = html.replace(/\$\$([^$]+)\$\$/g, '<div style="text-align: center; font-style: italic; padding: 10px; background: #f5f5f5; border-radius: 4px; margin: 10px 0;">$1</div>');
+    html = html.replace(/\$([^$]+)\$/g, '<span style="font-style: italic; background: #f0f0f0; padding: 2px 4px; border-radius: 2px;">$1</span>');
+
+    // Headers
+    html = html.replace(/^### (.+)$/gm, '<h3 style="font-size: 14pt; font-weight: 600; margin: 16px 0 8px 0; color: #333;">$1</h3>');
+    html = html.replace(/^## (.+)$/gm, '<h2 style="font-size: 16pt; font-weight: 600; margin: 20px 0 10px 0; color: #222;">$1</h2>');
+    html = html.replace(/^# (.+)$/gm, '<h1 style="font-size: 20pt; font-weight: 700; margin: 24px 0 12px 0; color: #111; border-bottom: 1px solid #ddd; padding-bottom: 8px;">$1</h1>');
+
+    // Bold and Italic
+    html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+    html = html.replace(/_(.+?)_/g, '<em>$1</em>');
+
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, '<code style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-family: Consolas, monospace; font-size: 11pt;">$1</code>');
+
+    // Code blocks
+    html = html.replace(/```[\w]*\n([\s\S]*?)```/g, '<pre style="background: #f5f5f5; padding: 12px; border-radius: 6px; font-family: Consolas, monospace; font-size: 10pt; overflow-x: auto; margin: 12px 0; border: 1px solid #e0e0e0;">$1</pre>');
+
+    // Blockquotes
+    html = html.replace(/^> (.+)$/gm, '<blockquote style="border-left: 3px solid #4a90d9; padding-left: 12px; margin: 12px 0; color: #555; font-style: italic;">$1</blockquote>');
+
+    // Horizontal rules
+    html = html.replace(/^---$/gm, '<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;">');
+
+    // Unordered lists
+    html = html.replace(/^- (.+)$/gm, '<li style="margin: 4px 0;">$1</li>');
+    html = html.replace(/(<li[^>]*>.*<\/li>\n?)+/g, '<ul style="margin: 10px 0; padding-left: 24px;">$&</ul>');
+
+    // Ordered lists
+    html = html.replace(/^\d+\. (.+)$/gm, '<li style="margin: 4px 0;">$1</li>');
+
+    // Links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color: #4a90d9; text-decoration: underline;">$1</a>');
+
+    // Tables - parse markdown tables to HTML tables
+    html = html.replace(/^(\|.+\|)\r?\n(\|[-:| ]+\|)\r?\n((?:\|.+\|\r?\n?)+)/gm, (match, headerRow, separatorRow, bodyRows) => {
+        // Parse header cells
+        const headers = headerRow.split('|').slice(1, -1).map(h => h.trim());
+
+        // Parse alignment from separator row
+        const alignments = separatorRow.split('|').slice(1, -1).map(sep => {
+            const s = sep.trim();
+            if (s.startsWith(':') && s.endsWith(':')) return 'center';
+            if (s.endsWith(':')) return 'right';
+            return 'left';
+        });
+
+        // Create header HTML
+        const headerHtml = headers.map((h, i) =>
+            `<th style="border: 1px solid #ddd; padding: 10px 12px; text-align: ${alignments[i] || 'left'}; background: #f5f5f5; font-weight: 600;">${h}</th>`
+        ).join('');
+
+        // Parse and create body rows
+        const rows = bodyRows.trim().split('\n').map((row, rowIdx) => {
+            const cells = row.split('|').slice(1, -1).map(c => c.trim());
+            const cellsHtml = cells.map((c, i) =>
+                `<td style="border: 1px solid #ddd; padding: 8px 12px; text-align: ${alignments[i] || 'left'};">${c}</td>`
+            ).join('');
+            return `<tr style="background: ${rowIdx % 2 === 0 ? '#fff' : '#fafafa'};">${cellsHtml}</tr>`;
+        }).join('');
+
+        return `<table style="border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 11pt;">
+            <thead><tr>${headerHtml}</tr></thead>
+            <tbody>${rows}</tbody>
+        </table>`;
+    });
+
+    // Paragraphs (handle line breaks)
+    html = html.replace(/\n\n/g, '</p><p style="margin: 10px 0;">');
+    html = html.replace(/\n/g, '<br>');
+
+    // Wrap in paragraph tags
+    html = `<p style="margin: 10px 0;">${html}</p>`;
+
+    // Clean up empty paragraphs
+    html = html.replace(/<p[^>]*>\s*<\/p>/g, '');
+
+    return `
+        <style>
+            * { box-sizing: border-box; }
+            body { margin: 0; padding: 0; }
+        </style>
+        ${html}
+    `;
+}

client/src/utils/exportToWord.js

@@ -0,0 +1,400 @@
+/**
+ * Export markdown content to a Word document (.docx)
+ * Uses the docx library to create properly formatted documents
+ */
+
+import {
+    Document,
+    Paragraph,
+    TextRun,
+    HeadingLevel,
+    Table,
+    TableRow,
+    TableCell,
+    WidthType,
+    BorderStyle,
+    Packer,
+    AlignmentType
+} from "docx";
+
+/**
+ * Simple markdown parser for converting to docx elements
+ */
+function parseMarkdown(markdown) {
+    const lines = markdown.split("\n");
+    const elements = [];
+    let inCodeBlock = false;
+    let codeContent = [];
+    let inTable = false;
+    let tableRows = [];
+    let listItems = [];
+    let listType = null; // "ul" or "ol"
+
+    const flushList = () => {
+        if (listItems.length > 0) {
+            elements.push({
+                type: listType === "ol" ? "orderedList" : "bulletList",
+                items: [...listItems]
+            });
+            listItems = [];
+            listType = null;
+        }
+    };
+
+    const flushTable = () => {
+        if (tableRows.length > 0) {
+            elements.push({
+                type: "table",
+                rows: [...tableRows]
+            });
+            tableRows = [];
+            inTable = false;
+        }
+    };
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+
+        // Code block handling
+        if (line.startsWith("```")) {
+            if (inCodeBlock) {
+                elements.push({
+                    type: "codeBlock",
+                    content: codeContent.join("\n")
+                });
+                codeContent = [];
+                inCodeBlock = false;
+            } else {
+                flushList();
+                flushTable();
+                inCodeBlock = true;
+            }
+            continue;
+        }
+
+        if (inCodeBlock) {
+            codeContent.push(line);
+            continue;
+        }
+
+        // Table handling
+        if (line.includes("|") && line.trim().startsWith("|")) {
+            flushList();
+            const cells = line.split("|").slice(1, -1).map(c => c.trim());
+
+            // Skip separator row
+            if (cells.every(c => /^[-:]+$/.test(c))) {
+                continue;
+            }
+
+            tableRows.push(cells);
+            inTable = true;
+            continue;
+        } else if (inTable) {
+            flushTable();
+        }
+
+        // Empty line
+        if (!line.trim()) {
+            flushList();
+            continue;
+        }
+
+        // Headings
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+            flushList();
+            elements.push({
+                type: "heading",
+                level: headingMatch[1].length,
+                content: headingMatch[2]
+            });
+            continue;
+        }
+
+        // Horizontal rule
+        if (/^[-*_]{3,}$/.test(line.trim())) {
+            flushList();
+            elements.push({ type: "hr" });
+            continue;
+        }
+
+        // Blockquote
+        if (line.startsWith(">")) {
+            flushList();
+            elements.push({
+                type: "blockquote",
+                content: line.replace(/^>\s*/, "")
+            });
+            continue;
+        }
+
+        // Ordered list
+        const olMatch = line.match(/^(\d+)\.\s+(.+)$/);
+        if (olMatch) {
+            if (listType === "ul") flushList();
+            listType = "ol";
+            listItems.push(olMatch[2]);
+            continue;
+        }
+
+        // Unordered list
+        const ulMatch = line.match(/^[-*+]\s+(.+)$/);
+        if (ulMatch) {
+            if (listType === "ol") flushList();
+            listType = "ul";
+            listItems.push(ulMatch[1]);
+            continue;
+        }
+
+        // Regular paragraph
+        flushList();
+        elements.push({
+            type: "paragraph",
+            content: line
+        });
+    }
+
+    // Flush any remaining items
+    flushList();
+    flushTable();
+
+    return elements;
+}
+
+/**
+ * Parse inline formatting (bold, italic, code, links)
+ */
+function parseInlineFormatting(text) {
+    const runs = [];
+    let remaining = text;
+
+    while (remaining.length > 0) {
+        // Bold and italic: ***text***
+        let match = remaining.match(/^\*\*\*(.+?)\*\*\*/);
+        if (match) {
+            runs.push(new TextRun({ text: match[1], bold: true, italics: true, font: "Calibri" }));
+            remaining = remaining.slice(match[0].length);
+            continue;
+        }
+
+        // Bold: **text** or __text__
+        match = remaining.match(/^(\*\*|__)(.+?)(\*\*|__)/);
+        if (match) {
+            runs.push(new TextRun({ text: match[2], bold: true, font: "Calibri" }));
+            remaining = remaining.slice(match[0].length);
+            continue;
+        }
+
+        // Italic: *text* or _text_
+        match = remaining.match(/^(\*|_)(.+?)(\*|_)/);
+        if (match) {
+            runs.push(new TextRun({ text: match[2], italics: true, font: "Calibri" }));
+            remaining = remaining.slice(match[0].length);
+            continue;
+        }
+
+        // Inline code: `code`
+        match = remaining.match(/^`([^`]+)`/);
+        if (match) {
+            runs.push(new TextRun({
+                text: match[1],
+                font: "Consolas",
+                shading: { fill: "E8E8E8" }
+            }));
+            remaining = remaining.slice(match[0].length);
+            continue;
+        }
+
+        // Link: [text](url)
+        match = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
+        if (match) {
+            runs.push(new TextRun({
+                text: match[1],
+                color: "0563C1",
+                underline: {},
+                font: "Calibri"
+            }));
+            remaining = remaining.slice(match[0].length);
+            continue;
+        }
+
+        // Regular text (take until next special character or end)
+        match = remaining.match(/^[^*_`\[]+/);
+        if (match) {
+            runs.push(new TextRun({ text: match[0], font: "Calibri" }));
+            remaining = remaining.slice(match[0].length);
+            continue;
+        }
+
+        // Single special character that didn't match formatting
+        runs.push(new TextRun({ text: remaining[0], font: "Calibri" }));
+        remaining = remaining.slice(1);
+    }
+
+    return runs;
+}
+
+/**
+ * Convert parsed elements to docx sections
+ */
+function elementsToDocx(elements) {
+    const children = [];
+
+    for (const el of elements) {
+        switch (el.type) {
+            case "heading":
+                const headingLevels = {
+                    1: HeadingLevel.HEADING_1,
+                    2: HeadingLevel.HEADING_2,
+                    3: HeadingLevel.HEADING_3,
+                    4: HeadingLevel.HEADING_4,
+                    5: HeadingLevel.HEADING_5,
+                    6: HeadingLevel.HEADING_6
+                };
+                children.push(
+                    new Paragraph({
+                        heading: headingLevels[el.level] || HeadingLevel.HEADING_1,
+                        children: parseInlineFormatting(el.content),
+                        spacing: { before: 280, after: 120 }
+                    })
+                );
+                break;
+
+            case "paragraph":
+                children.push(
+                    new Paragraph({
+                        children: parseInlineFormatting(el.content),
+                        spacing: { after: 280, line: 276 }
+                    })
+                );
+                break;
+
+            case "bulletList":
+                for (let i = 0; i < el.items.length; i++) {
+                    children.push(
+                        new Paragraph({
+                            bullet: { level: 0 },
+                            children: parseInlineFormatting(el.items[i]),
+                            spacing: { after: i === el.items.length - 1 ? 200 : 60 }
+                        })
+                    );
+                }
+                break;
+
+            case "orderedList":
+                for (let idx = 0; idx < el.items.length; idx++) {
+                    children.push(
+                        new Paragraph({
+                            numbering: { reference: "default-numbering", level: 0 },
+                            children: parseInlineFormatting(el.items[idx]),
+                            spacing: { after: idx === el.items.length - 1 ? 200 : 60 }
+                        })
+                    );
+                }
+                break;
+
+            case "codeBlock":
+                children.push(
+                    new Paragraph({
+                        children: [
+                            new TextRun({
+                                text: el.content,
+                                font: "Consolas",
+                                size: 20
+                            })
+                        ],
+                        shading: { fill: "F5F5F5" },
+                        spacing: { before: 200, after: 200 }
+                    })
+                );
+                break;
+
+            case "blockquote":
+                children.push(
+                    new Paragraph({
+                        children: parseInlineFormatting(el.content),
+                        indent: { left: 720 },
+                        border: {
+                            left: { style: BorderStyle.SINGLE, size: 24, color: "CCCCCC" }
+                        },
+                        spacing: { before: 200, after: 200 }
+                    })
+                );
+                break;
+
+            case "table":
+                const tableRows = el.rows.map((row, rowIdx) =>
+                    new TableRow({
+                        children: row.map(cell =>
+                            new TableCell({
+                                children: [new Paragraph({ children: parseInlineFormatting(cell) })],
+                                shading: rowIdx === 0 ? { fill: "E8E8E8" } : undefined
+                            })
+                        )
+                    })
+                );
+                children.push(
+                    new Table({
+                        rows: tableRows,
+                        width: { size: 100, type: WidthType.PERCENTAGE }
+                    })
+                );
+                break;
+
+            case "hr":
+                children.push(
+                    new Paragraph({
+                        border: { bottom: { style: BorderStyle.SINGLE, size: 6, color: "CCCCCC" } },
+                        spacing: { before: 400, after: 400 }
+                    })
+                );
+                break;
+        }
+    }
+
+    return children;
+}
+
+/**
+ * Export markdown content to Word document and trigger download
+ */
+export async function exportToWord(markdown, filename = "document") {
+    const elements = parseMarkdown(markdown);
+    const children = elementsToDocx(elements);
+
+    const doc = new Document({
+        numbering: {
+            config: [
+                {
+                    reference: "default-numbering",
+                    levels: [
+                        {
+                            level: 0,
+                            format: "decimal",
+                            text: "%1.",
+                            alignment: AlignmentType.START
+                        }
+                    ]
+                }
+            ]
+        },
+        sections: [
+            {
+                children
+            }
+        ]
+    });
+
+    const blob = await Packer.toBlob(doc);
+
+    // Trigger download
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${filename.replace(/[^a-zA-Z0-9-_]/g, "_")}.docx`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}

client/tailwind.config.js

@@ -0,0 +1,79 @@
+export default {
+  content: ["./index.html", "./src/**/*.{js,jsx}"],
+  darkMode: "class",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "sans-serif"],
+        display: ["Plus Jakarta Sans", "Inter", "system-ui", "sans-serif"],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+        shimmer: {
+          "0%": { backgroundPosition: "200% 0" },
+          "100%": { backgroundPosition: "-200% 0" }
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-10px)" }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        shimmer: "shimmer 8s infinite linear",
+        float: "float 6s ease-in-out infinite",
+      },
+    },
+  },
+  plugins: [],
+};

client/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/chat": "http://localhost:3001",
+      "/models": "http://localhost:3001"
+    }
+  },
+  build: {
+    outDir: path.resolve(__dirname, "../server/public"),
+    emptyOutDir: true,
+    chunkSizeWarningLimit: 1000 // Suppress warning for chunks up to 1MB
+  }
+});

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "flowise-chat-app",
+  "private": true,
+  "workspaces": [
+    "client"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "node server/index.js",
+    "build": "npm --prefix client run build",
+    "start": "node server/index.js"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "eventsource-parser": "^1.1.2",
+    "express": "^4.19.2",
+    "morgan": "^1.10.0"
+  }
+}

server/index.js

@@ -0,0 +1,881 @@
+const express = require("express");
+const path = require("path");
+const fs = require("fs");
+const morgan = require("morgan");
+const { createParser } = require("eventsource-parser");
+const { loadModelsFromEnv, loadModelsFromEnvDetailed, loadPublicModels } = require("./models");
+
+/**
+ * Load the dedicated Labs model from LABS_MODEL_* env vars.
+ * Falls back to the first regular model if not set.
+ */
+function loadLabsModel() {
+  const name = process.env.LABS_MODEL_NAME || "Labs Model";
+  const id = (process.env.LABS_MODEL_ID || "").trim();
+  const host = (process.env.LABS_MODEL_HOST || "").trim().replace(/\/$/, "");
+  const apiKey = (process.env.LABS_MODEL_API_KEY || "").trim();
+  const authHeader = (process.env.LABS_MODEL_AUTH_HEADER || "").trim();
+  const authValue = (process.env.LABS_MODEL_AUTH_VALUE || "").trim();
+
+  if (id && host) {
+    return { name, id, host, index: "labs", apiKey, authHeader, authValue };
+  }
+  // Fallback to first regular model
+  const detailed = loadModelsFromEnvDetailed(process.env);
+  if (detailed.models.length > 0) {
+    return { ...detailed.models[0], name: name || detailed.models[0].name };
+  }
+  return null;
+}
+
+require("dotenv").config();
+
+const app = express();
+app.use(express.json({ limit: "2mb" }));
+app.use(morgan("tiny"));
+
+const publicDir = path.join(__dirname, "public");
+if (fs.existsSync(publicDir)) {
+  app.use(express.static(publicDir));
+}
+
+const capabilityCache = new Map();
+const CAPABILITY_TTL_MS = 60000;
+
+function sendEvent(res, event, data) {
+  if (res.writableEnded) return;
+  res.write(`event: ${event}\n`);
+  res.write(`data: ${JSON.stringify(data)}\n\n`);
+}
+
+function getFlowiseHeaders(model) {
+  const extraHeaders = {};
+  if (model?.authHeader && model?.authValue) {
+    extraHeaders[model.authHeader] = model.authValue;
+  } else if (model?.apiKey) {
+    extraHeaders["Authorization"] = `Bearer ${model.apiKey}`;
+  } else if (process.env.FLOWISE_AUTH_HEADER && process.env.FLOWISE_AUTH_VALUE) {
+    extraHeaders[process.env.FLOWISE_AUTH_HEADER] = process.env.FLOWISE_AUTH_VALUE;
+  } else if (process.env.FLOWISE_API_KEY) {
+    extraHeaders["Authorization"] = `Bearer ${process.env.FLOWISE_API_KEY}`;
+  }
+  return extraHeaders;
+}
+
+function parseMaybeJson(value) {
+  if (!value) return null;
+  if (typeof value === "object") return value;
+  if (typeof value !== "string") return null;
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    return null;
+  }
+}
+
+function findTruthyFlag(target, keys) {
+  if (!target || typeof target !== "object") return false;
+  const stack = [target];
+  while (stack.length) {
+    const current = stack.pop();
+    if (!current || typeof current !== "object") continue;
+    for (const [key, value] of Object.entries(current)) {
+      if (keys.includes(key) && Boolean(value)) {
+        return true;
+      }
+      if (value && typeof value === "object") {
+        stack.push(value);
+      }
+    }
+  }
+  return false;
+}
+
+function deriveCapabilities(chatflow) {
+  const chatbotConfig = parseMaybeJson(chatflow?.chatbotConfig);
+  const apiConfig = parseMaybeJson(chatflow?.apiConfig);
+  const speechToText = parseMaybeJson(chatflow?.speechToText);
+  const flowData = typeof chatflow?.flowData === "string" ? chatflow.flowData : "";
+  const uploadKeys = [
+    "uploads",
+    "upload",
+    "fileUpload",
+    "fileUploads",
+    "enableUploads",
+    "enableFileUploads",
+    "allowUploads",
+    "allowFileUploads",
+    "isFileUploadEnabled",
+    "uploadEnabled"
+  ];
+  const ttsKeys = [
+    "tts",
+    "textToSpeech",
+    "speechSynthesis",
+    "voice",
+    "enableTTS",
+    "enableTextToSpeech"
+  ];
+  const hasFlowUpload =
+    flowData.includes("File Loader") ||
+    flowData.includes("Document Loader") ||
+    flowData.includes("FileLoader") ||
+    flowData.includes("DocumentLoader") ||
+    flowData.includes("Uploads") ||
+    flowData.includes("upload") ||
+    flowData.includes("Document") ||
+    flowData.includes("PDF") ||
+    flowData.includes("Image");
+  const uploads =
+    hasFlowUpload ||
+    findTruthyFlag(chatflow, uploadKeys) ||
+    findTruthyFlag(chatbotConfig, uploadKeys) ||
+    findTruthyFlag(apiConfig, uploadKeys);
+  const tts = findTruthyFlag(chatbotConfig, ttsKeys) || findTruthyFlag(apiConfig, ttsKeys);
+  const stt = speechToText && Object.keys(speechToText).length > 0;
+  return { uploads, tts, stt };
+}
+
+async function fetchCapabilities(model) {
+  const cacheKey = String(model.index);
+  const cached = capabilityCache.get(cacheKey);
+  if (cached && cached.expiresAt > Date.now()) return cached.value;
+  const baseHost = String(model.host || "").trim().replace(/\/$/, "");
+  const urls = [
+    {
+      url: `${baseHost}/api/v1/chatflows/${model.id}`,
+      headers: { "Content-Type": "application/json", ...getFlowiseHeaders(model) }
+    },
+    {
+      url: `${baseHost}/api/v1/public-chatflows/${model.id}`,
+      headers: { "Content-Type": "application/json" }
+    },
+    {
+      url: `${baseHost}/api/v1/public-chatbotConfig/${model.id}`,
+      headers: { "Content-Type": "application/json" }
+    }
+  ];
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 4000);
+  let value = { uploads: false, tts: false, stt: false, status: "unknown" };
+  try {
+    let sawUnauthorized = false;
+    let httpStatus = null;
+    for (const candidate of urls) {
+      const response = await fetch(candidate.url, {
+        headers: candidate.headers,
+        signal: controller.signal
+      });
+
+      if (response.ok) {
+        const data = await response.json().catch(() => null);
+        if (data) {
+          value = { ...deriveCapabilities(data), status: "ok" };
+          break;
+        }
+      } else {
+        if (response.status === 401 || response.status === 403) {
+          sawUnauthorized = true;
+        } else if (!httpStatus) {
+          httpStatus = response.status;
+        }
+      }
+    }
+    if (value.status !== "ok") {
+      value = {
+        uploads: false,
+        tts: false,
+        stt: false,
+        status: sawUnauthorized ? "unauthorized" : httpStatus ? `http_${httpStatus}` : "unknown"
+      };
+    }
+  } catch (error) {
+    value = { uploads: false, tts: false, stt: false, status: "unknown" };
+  } finally {
+    clearTimeout(timeout);
+  }
+  capabilityCache.set(cacheKey, { value, expiresAt: Date.now() + CAPABILITY_TTL_MS });
+  return value;
+}
+
+function buildPrompt(message, mode) {
+  // Return raw user message only - all prompts/formatting are configured in Flowise
+  // The mode parameter is kept for future use but not used to modify the message
+  return message;
+}
+
+/* ── Helpers for structured agent-trace parsing ── */
+
+function parseMaybeJson(val) {
+  if (val && typeof val === "object") return val;
+  if (typeof val !== "string") return null;
+  try { return JSON.parse(val); } catch { return null; }
+}
+
+function processAgentTrace(res, traceData) {
+  if (!traceData || typeof traceData !== "object") return;
+  const step = traceData.step;
+
+  if (step === "agent_action") {
+    const actionObj = parseMaybeJson(traceData.action);
+    if (!actionObj) return;
+    const toolRaw = actionObj.tool || "";
+    const toolInput = parseMaybeJson(actionObj.toolInput) || {};
+
+    // Normalize common tool names
+    const isSearch = /tavily|search|serp|google/i.test(toolRaw);
+    const isBrowser = /browser|scrape|crawl|fetch/i.test(toolRaw);
+
+    if (isSearch) {
+      const query = toolInput.input || toolInput.query || toolInput.q || "";
+      sendEvent(res, "agentStep", { type: "search", query });
+      sendEvent(res, "activity", { state: "searching" });
+    } else if (isBrowser) {
+      const url = toolInput.input || toolInput.url || "";
+      sendEvent(res, "agentStep", { type: "browse", url });
+      sendEvent(res, "activity", { state: "reading" });
+    } else {
+      sendEvent(res, "agentStep", { type: "tool", tool: toolRaw });
+      sendEvent(res, "activity", { state: "tool", tool: toolRaw });
+    }
+    return;
+  }
+
+  if (step === "tool_end") {
+    const output = parseMaybeJson(traceData.output);
+    if (Array.isArray(output)) {
+      const sources = output
+        .filter(item => item && item.url)
+        .map(item => ({ url: item.url, title: item.title || "" }))
+        .slice(0, 8);
+      if (sources.length > 0) {
+        sendEvent(res, "agentStep", { type: "sources", items: sources });
+      }
+    } else if (typeof output === "string" && output.startsWith("**Summary")) {
+      // Web browser tool returned a readable summary — skip, not actionable
+    }
+    return;
+  }
+
+  // tool_start is redundant with agent_action — silently consume
+}
+
+async function streamFlowise({
+  res,
+  model,
+  message,
+  mode,
+  sessionId,
+  uploads = [],
+  signal
+}) {
+  const url = `${model.host}/api/v1/prediction/${model.id}`;
+  const payload = {
+    question: buildPrompt(message, mode),
+    streaming: true,
+    chatId: sessionId,
+    overrideConfig: sessionId ? { sessionId } : undefined,
+    uploads: uploads.length > 0 ? uploads : undefined
+  };
+
+  console.log(`[Flowise] Fetching URL: ${url}`);
+  console.log(`[Flowise] Payload:`, JSON.stringify(payload));
+
+  const extraHeaders = getFlowiseHeaders(model);
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...extraHeaders
+    },
+    body: JSON.stringify(payload),
+    signal,
+    // Add a longer timeout for Hugging Face cold starts
+    duplex: 'half'
+  }).catch((err) => {
+    console.error("[Flowise] Fetch error:", err);
+    const wrapped = new Error(`Failed to connect to Flowise: ${err.message}`);
+    wrapped.name = err?.name || wrapped.name;
+    wrapped.cause = err;
+    throw wrapped;
+  });
+
+  const contentType = response.headers.get("content-type") || "";
+  console.log(`[Flowise] Status: ${response.status}, Content-Type: ${contentType}`);
+  console.log(`[Flowise] Headers:`, JSON.stringify(Object.fromEntries(response.headers.entries())));
+
+  if (!response.ok) {
+    const text = await response.text().catch(() => "");
+    console.error(`[Flowise] API error (${response.status}):`, text);
+    throw new Error(`Flowise error ${response.status}: ${text}`);
+  }
+
+  if (!response.body) {
+    throw new Error("Flowise returned an empty response body.");
+  }
+
+  // If the content type is not a stream, it might be a JSON error hidden in a 200 OK 
+  // or just a non-streaming response that we should handle.
+  if (!contentType.includes("text/event-stream")) {
+    console.warn(`[Flowise] Warning: Expected event-stream but got ${contentType}`);
+    // If it's JSON, we can try to parse it
+    if (contentType.includes("application/json")) {
+      const json = await response.json().catch(() => null);
+      if (json) {
+        console.log(`[Flowise] Parsed JSON instead of stream:`, JSON.stringify(json).slice(0, 50));
+        const text = json.text || json.answer || json.output || json.message || JSON.stringify(json);
+        sendEvent(res, "token", { text });
+        return; // We're done
+      }
+    }
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let ended = false;
+  const parser = createParser((event) => {
+    if (event.type !== "event") return;
+    const upstreamEventName = event.event || "";
+    const raw = event.data || "";
+    if (!raw) return;
+
+    if (upstreamEventName) {
+      if (upstreamEventName === "token") {
+        sendEvent(res, "token", { text: raw });
+        return;
+      }
+
+      if (upstreamEventName === "metadata") {
+        let meta = null;
+        try {
+          meta = JSON.parse(raw);
+        } catch (error) {
+          meta = { value: raw };
+        }
+        sendEvent(res, "metadata", meta);
+        return;
+      }
+
+      if (upstreamEventName === "start") {
+        sendEvent(res, "activity", { state: "writing" });
+        return;
+      }
+
+      if (upstreamEventName === "end") {
+        ended = true;
+        return;
+      }
+
+      if (upstreamEventName === "error") {
+        sendEvent(res, "error", { message: raw });
+        ended = true;
+        return;
+      }
+
+      if (upstreamEventName === "usedTools") {
+        let toolData = parseMaybeJson(raw);
+        if (toolData) {
+          const tools = Array.isArray(toolData) ? toolData : [toolData];
+          for (const t of tools) {
+            const toolName = t.tool || t.name || t.toolName || "Tool";
+            sendEvent(res, "activity", { state: "tool", tool: toolName });
+          }
+        }
+        return;
+      }
+
+      if (upstreamEventName === "agentFlowEvent") {
+        let flowData = parseMaybeJson(raw);
+        if (flowData) {
+          const step = flowData.step || flowData.state || flowData.type || "";
+          if (step) {
+            sendEvent(res, "activity", { state: step });
+          }
+        }
+        return;
+      }
+
+      if (upstreamEventName === "agent_trace") {
+        processAgentTrace(res, parseMaybeJson(raw));
+        return;
+      }
+    }
+
+    let parsed = null;
+    try {
+      parsed = JSON.parse(raw);
+    } catch (error) {
+      parsed = null;
+    }
+
+    if (parsed && typeof parsed === "object") {
+      if (typeof parsed.event === "string" && Object.prototype.hasOwnProperty.call(parsed, "data")) {
+        const innerEvent = parsed.event;
+        const innerData = parsed.data;
+
+        if (innerEvent === "token") {
+          sendEvent(res, "token", { text: typeof innerData === "string" ? innerData : String(innerData || "") });
+          return;
+        }
+
+        if (innerEvent === "metadata") {
+          sendEvent(res, "metadata", innerData && typeof innerData === "object" ? innerData : { value: innerData });
+          return;
+        }
+
+        if (innerEvent === "start") {
+          sendEvent(res, "activity", { state: "writing" });
+          return;
+        }
+
+        if (innerEvent === "end") {
+          ended = true;
+          return;
+        }
+
+        if (innerEvent === "error") {
+          const message =
+            typeof innerData === "string"
+              ? innerData
+              : (innerData && typeof innerData === "object" && (innerData.message || innerData.error)) || "Unknown error";
+          sendEvent(res, "error", { message });
+          ended = true;
+          return;
+        }
+
+        if (innerEvent === "usedTools") {
+          let toolData = innerData && typeof innerData === "object" ? innerData : parseMaybeJson(innerData);
+          if (toolData) {
+            const tools = Array.isArray(toolData) ? toolData : [toolData];
+            for (const t of tools) {
+              const toolName = t.tool || t.name || t.toolName || "Tool";
+              sendEvent(res, "activity", { state: "tool", tool: toolName });
+            }
+          }
+          return;
+        }
+
+        if (innerEvent === "agentFlowEvent") {
+          let flowData = innerData && typeof innerData === "object" ? innerData : parseMaybeJson(innerData);
+          if (flowData) {
+            const step = flowData.step || flowData.state || flowData.type || "";
+            if (step) {
+              sendEvent(res, "activity", { state: step });
+            }
+          }
+          return;
+        }
+
+        if (innerEvent === "agent_trace") {
+          const traceData = innerData && typeof innerData === "object" ? innerData : parseMaybeJson(innerData);
+          processAgentTrace(res, traceData);
+          return;
+        }
+      }
+
+      const errorText = parsed.error || parsed.message?.error;
+      if (errorText) {
+        sendEvent(res, "error", { message: errorText });
+        ended = true;
+        return;
+      }
+    }
+
+    const payloadText =
+      (parsed &&
+        (parsed.token || parsed.text || parsed.answer || parsed.message)) ||
+      raw;
+    if (payloadText) {
+      sendEvent(res, "token", { text: payloadText });
+    }
+  });
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) {
+      break;
+    }
+    parser.feed(decoder.decode(value, { stream: true }));
+    if (ended) {
+      await reader.cancel().catch(() => undefined);
+      break;
+    }
+  }
+  return ended;
+}
+
+function scheduleActivities(res, mode) {
+  // Lightweight fallback: just send "thinking" after a short delay.
+  // Real activities from Flowise metadata will override this.
+  const timer = setTimeout(() => {
+    sendEvent(res, "activity", { state: "thinking" });
+  }, 1200);
+  return () => clearTimeout(timer);
+}
+
+app.get("/models", async (req, res) => {
+  const detailed = loadModelsFromEnvDetailed(process.env).models;
+  const { models, issues } = loadPublicModels(process.env);
+  const capabilityPairs = await Promise.all(
+    detailed.map(async (model) => ({
+      id: String(model.index),
+      features: await fetchCapabilities(model)
+    }))
+  );
+  const capabilityMap = new Map(capabilityPairs.map((item) => [item.id, item.features]));
+  const enriched = models.map((model) => ({
+    ...model,
+    features: capabilityMap.get(model.id) || { uploads: false, tts: false, stt: false, status: "unknown" }
+  }));
+  res.json({ models: enriched, issues });
+});
+
+// Expose the dedicated Labs model info to the client
+app.get("/labs-model", (req, res) => {
+  const labsModel = loadLabsModel();
+  if (!labsModel) {
+    return res.json({ model: null, error: "No Labs model configured" });
+  }
+  res.json({ model: { name: labsModel.name } });
+});
+
+app.post("/chat", async (req, res) => {
+  const { message, modelId, mode, sessionId, uploads } = req.body || {};
+  if (
+    !message ||
+    typeof message !== "string" ||
+    message.length > 10000 ||
+    !modelId ||
+    typeof modelId !== "string" ||
+    !mode ||
+    typeof mode !== "string" ||
+    !["chat", "research"].includes(mode)
+  ) {
+    return res.status(400).json({ error: "Invalid message" });
+  }
+  const safeSessionId = typeof sessionId === "string" && sessionId.trim() ? sessionId.trim().slice(0, 128) : "";
+
+  // Validate uploads if provided
+  const safeUploads = Array.isArray(uploads) ? uploads.filter(u =>
+    u && typeof u === "object" &&
+    typeof u.name === "string" &&
+    typeof u.data === "string" &&
+    typeof u.mime === "string"
+  ) : [];
+
+  // Resolve safe modelId (index-based) to actual model config
+  const detailed = loadModelsFromEnvDetailed(process.env);
+  const idx = Number(modelId);
+  const model = detailed.models.find((item) => item.index === idx);
+  if (!model) {
+    return res.status(404).json({ error: "Model not found" });
+  }
+
+  res.writeHead(200, {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    Connection: "keep-alive",
+    "X-Accel-Buffering": "no"
+  });
+
+  sendEvent(res, "activity", { state: "writing" });
+
+  const clearActivities = scheduleActivities(res, mode);
+
+  const controller = new AbortController();
+  req.on("aborted", () => {
+    controller.abort();
+    clearActivities();
+  });
+  res.on("close", () => {
+    if (!res.writableEnded) {
+      controller.abort();
+    }
+    clearActivities();
+  });
+
+  if (controller.signal.aborted) {
+    console.warn("[Chat] Request already aborted by client before starting.");
+    return res.end();
+  }
+
+  try {
+    // Attempt streaming first
+    await streamFlowise({
+      res,
+      model,
+      message,
+      mode,
+      sessionId: safeSessionId,
+      uploads: safeUploads,
+      signal: controller.signal
+    });
+    sendEvent(res, "done", { ok: true });
+  } catch (error) {
+    const clientAborted = req.aborted || controller.signal.aborted;
+    const isAbortError = error?.name === "AbortError";
+    console.error(
+      `[Chat] Streaming failed (ClientAborted: ${clientAborted}, AbortError: ${isAbortError}):`,
+      error?.message
+    );
+
+    if (clientAborted) {
+      sendEvent(res, "error", { message: "Request was cancelled before completion." });
+      sendEvent(res, "done", { ok: false, cancelled: true });
+      return;
+    }
+
+    try {
+      // Fallback to non-streaming (user's working snippet format)
+      const url = `${model.host}/api/v1/prediction/${model.id}`;
+      const payload = {
+        question: buildPrompt(message, mode),
+        chatId: safeSessionId,
+        overrideConfig: safeSessionId ? { sessionId: safeSessionId } : undefined
+      };
+
+      console.log(`[Flowise Fallback] Fetching URL: ${url}`);
+
+      const extraHeaders = getFlowiseHeaders(model);
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...extraHeaders
+        },
+        body: JSON.stringify(payload),
+        // For fallback, we'll use a fresh fetch without the same abort signal 
+        // to ensure it reaches Flowise even if the streaming connection had a glitch.
+      });
+
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        throw new Error(`Flowise fallback error ${response.status}: ${text}`);
+      }
+
+      const result = await response.json();
+      console.log("[Flowise Fallback] Success");
+
+      const finalContent = result.text || result.answer || result.output || result.message || JSON.stringify(result);
+
+      sendEvent(res, "token", { text: finalContent });
+      sendEvent(res, "done", { ok: true });
+    } catch (fallbackError) {
+      const isFbAbort = fallbackError.name === "AbortError" || fallbackError.message?.includes("aborted");
+      console.error(`[Chat] Fallback failed (Abort: ${isFbAbort}):`, fallbackError.message);
+      if (!isFbAbort) {
+        sendEvent(res, "error", { message: fallbackError.message });
+      }
+    }
+  } finally {
+    clearActivities();
+    if (!res.writableEnded) res.end();
+  }
+});
+
+// Labs AI editing endpoint - generates or edits documents based on instruction
+app.post("/labs-edit", async (req, res) => {
+  const { document, instruction, modelId, sessionId } = req.body || {};
+  const safeSessionId = typeof sessionId === "string" && sessionId.trim() ? sessionId.trim().slice(0, 128) : "";
+
+  if (!instruction || typeof instruction !== "string" || instruction.length > 10000) {
+    return res.status(400).json({ error: "Invalid instruction" });
+  }
+
+  // Use the dedicated Labs model (ignoring client-side modelId)
+  const model = loadLabsModel();
+  if (!model) {
+    return res.status(404).json({ error: "No Labs model configured" });
+  }
+
+  // Build the prompt based on whether document exists
+  const isGeneration = !document || document.trim() === "";
+
+  const editPrompt = isGeneration
+    ? instruction // For generation, just pass the instruction directly
+    : `CURRENT DOCUMENT:
+${document}
+
+USER INSTRUCTION:
+${instruction}
+
+Apply the instruction to edit the document. Return ONLY the updated document content, no explanations.`;
+
+  res.writeHead(200, {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    Connection: "keep-alive",
+    "X-Accel-Buffering": "no"
+  });
+
+  const controller = new AbortController();
+  req.on("aborted", () => controller.abort());
+  res.on("close", () => {
+    if (!res.writableEnded) controller.abort();
+  });
+
+  try {
+    await streamFlowise({
+      res,
+      model,
+      message: editPrompt,
+      mode: "chat",
+      sessionId: safeSessionId,
+      uploads: [],
+      signal: controller.signal
+    });
+    sendEvent(res, "done", { ok: true });
+  } catch (error) {
+    console.error("[Labs] AI edit failed:", error.message);
+    if (!controller.signal.aborted) {
+      sendEvent(res, "error", { message: error.message });
+    }
+  } finally {
+    if (!res.writableEnded) res.end();
+  }
+});
+
+// Labs selection-based AI editing - edits only the selected portion
+app.post("/labs-edit-selection", async (req, res) => {
+  const { selectedText, instruction, contextBefore, contextAfter, modelId, sessionId } = req.body || {};
+  const safeSessionId = typeof sessionId === "string" && sessionId.trim() ? sessionId.trim().slice(0, 128) : "";
+
+  if (!selectedText || typeof selectedText !== "string") {
+    return res.status(400).json({ error: "No text selected" });
+  }
+  if (!instruction || typeof instruction !== "string" || instruction.length > 2000) {
+    return res.status(400).json({ error: "Invalid instruction" });
+  }
+
+  // Use the dedicated Labs model (ignoring client-side modelId)
+  const model = loadLabsModel();
+  if (!model) {
+    return res.status(404).json({ error: "No Labs model configured" });
+  }
+
+  // Build prompt for surgical editing
+  const editPrompt = `You are editing a specific text selection within a larger document.
+
+CONTEXT BEFORE THE SELECTION:
+${contextBefore || "(start of document)"}
+
+SELECTED TEXT TO EDIT:
+${selectedText}
+
+CONTEXT AFTER THE SELECTION:
+${contextAfter || "(end of document)"}
+
+USER INSTRUCTION: ${instruction}
+
+CRITICAL: Return ONLY the replacement text for the selection. Do not include context, explanations, or markdown code blocks. Just the edited text that will replace the selection.`;
+
+  res.writeHead(200, {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    Connection: "keep-alive",
+    "X-Accel-Buffering": "no"
+  });
+
+  const controller = new AbortController();
+  req.on("aborted", () => controller.abort());
+  res.on("close", () => {
+    if (!res.writableEnded) controller.abort();
+  });
+
+  try {
+    await streamFlowise({
+      res,
+      model,
+      message: editPrompt,
+      mode: "chat",
+      sessionId: safeSessionId,
+      uploads: [],
+      signal: controller.signal
+    });
+    sendEvent(res, "done", { ok: true });
+  } catch (error) {
+    console.error("[Labs] Selection edit failed:", error.message);
+    if (!controller.signal.aborted) {
+      sendEvent(res, "error", { message: error.message });
+    }
+  } finally {
+    if (!res.writableEnded) res.end();
+  }
+});
+
+// Non-streaming JSON endpoint compatible with Flowise template usage
+app.post("/predict", async (req, res) => {
+
+  const { question, modelId, mode = "chat", sessionId } = req.body || {};
+  if (
+    !question ||
+    typeof question !== "string" ||
+    question.length > 10000 ||
+    !["chat", "research"].includes(mode)
+  ) {
+    return res.status(400).json({ error: "Invalid request" });
+  }
+  const safeSessionId = typeof sessionId === "string" && sessionId.trim() ? sessionId.trim().slice(0, 128) : "";
+
+  // Resolve safe modelId (index-based) to actual model config
+  const detailed = loadModelsFromEnvDetailed(process.env);
+  let model = null;
+  if (typeof modelId === "string" && modelId.trim() !== "") {
+    const idx = Number(modelId);
+    model = detailed.models.find((item) => item.index === idx) || null;
+  }
+  // Fallback to first configured model if none provided
+  if (!model) {
+    model = detailed.models[0] || null;
+  }
+  if (!model) {
+    return res.status(404).json({ error: "Model not found" });
+  }
+
+  const url = `${model.host}/api/v1/prediction/${model.id}`;
+  const payload = {
+    question: buildPrompt(question, mode),
+    chatId: safeSessionId,
+    overrideConfig: safeSessionId ? { sessionId: safeSessionId } : undefined
+  };
+
+  const extraHeaders = getFlowiseHeaders(model);
+
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...extraHeaders },
+      body: JSON.stringify(payload)
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      return res
+        .status(response.status)
+        .json({ error: `Upstream error: ${text || response.statusText}` });
+    }
+
+    const result = await response.json();
+    return res.json(result);
+  } catch (err) {
+    return res.status(500).json({ error: err.message || "Server error" });
+  }
+});
+
+app.get("*", (req, res, next) => {
+  if (fs.existsSync(publicDir)) {
+    const indexPath = path.join(publicDir, "index.html");
+    if (fs.existsSync(indexPath)) {
+      return res.sendFile(indexPath);
+    }
+  }
+  next();
+});
+
+const port = process.env.PORT || 3000;
+app.listen(port, () => {
+  console.log(`Server running on http://localhost:${port}`);
+  const { models } = loadModelsFromEnvDetailed(process.env);
+  console.log(`Loaded models:`, JSON.stringify(models, null, 2));
+});

server/models.js

@@ -0,0 +1,106 @@
+function normalizeHost(host) {
+  if (typeof host !== "string") return "";
+  return host
+    .trim()
+    .replace(/^[\s'"`\u2018\u2019\u201C\u201D]+|[\s'"`\u2018\u2019\u201C\u201D]+$/g, "")
+    .replace(/`/g, "")
+    .replace(/\/$/, "");
+}
+
+function normalizeId(id) {
+  if (typeof id !== "string") return "";
+  return id
+    .trim()
+    .replace(/^[\s'"`\u2018\u2019\u201C\u201D]+|[\s'"`\u2018\u2019\u201C\u201D]+$/g, "")
+    .replace(/`/g, "");
+}
+
+function normalizeHeaderName(value) {
+  if (typeof value !== "string") return "";
+  return value
+    .trim()
+    .replace(/^[\s'"`\u2018\u2019\u201C\u201D]+|[\s'"`\u2018\u2019\u201C\u201D]+$/g, "")
+    .replace(/`/g, "");
+}
+
+function normalizeHeaderValue(value) {
+  if (typeof value !== "string") return "";
+  return value
+    .trim()
+    .replace(/^[\s'"`\u2018\u2019\u201C\u201D]+|[\s'"`\u2018\u2019\u201C\u201D]+$/g, "")
+    .replace(/`/g, "");
+}
+
+function collectModelIndices(env) {
+  const indices = new Set();
+  for (const key of Object.keys(env || {})) {
+    const match = /^MODEL_(\d+)_(NAME|ID|HOST|API_KEY|AUTH_HEADER|AUTH_VALUE)$/.exec(key);
+    if (match) {
+      indices.add(Number(match[1]));
+    }
+  }
+  return Array.from(indices).filter(Number.isFinite).sort((a, b) => a - b);
+}
+
+function loadModelsFromEnvDetailed(env) {
+  const indices = collectModelIndices(env);
+  const models = [];
+  const issues = [];
+
+  if (indices.length === 0) {
+    issues.push("No model environment variables found (MODEL_1_NAME/ID/HOST).");
+    return { models, issues };
+  }
+
+  for (const index of indices) {
+    const name = env[`MODEL_${index}_NAME`] || `Model ${index}`;
+    let id = env[`MODEL_${index}_ID`];
+    if (id && typeof id === "string") {
+      id = normalizeId(id);
+      // If the ID contains a slash, it might be a partial path, extract the last segment
+      if (id.includes("/")) {
+        id = id.split("/").pop();
+      }
+    }
+    const host = normalizeHost(env[`MODEL_${index}_HOST`]);
+    const apiKey = normalizeHeaderValue(env[`MODEL_${index}_API_KEY`]);
+    const authHeader = normalizeHeaderName(env[`MODEL_${index}_AUTH_HEADER`]);
+    const authValue = normalizeHeaderValue(env[`MODEL_${index}_AUTH_VALUE`]);
+
+    const missing = [];
+    if (!id) missing.push(`MODEL_${index}_ID`);
+    if (!host) missing.push(`MODEL_${index}_HOST`);
+
+    if (missing.length > 0) {
+      issues.push(`Model ${index} is incomplete (missing: ${missing.join(", ")}).`);
+      continue;
+    }
+
+    models.push({ name, id, host, index, apiKey, authHeader, authValue });
+  }
+
+  if (models.length === 0) {
+    issues.push("No complete models found. Check MODEL_n_NAME/ID/HOST.");
+  }
+
+  return { models, issues };
+}
+
+function loadModelsFromEnv(env) {
+  return loadModelsFromEnvDetailed(env).models;
+}
+
+function loadPublicModels(env) {
+  const detailed = loadModelsFromEnvDetailed(env);
+  const publicModels = detailed.models.map((m) => ({
+    id: String(m.index),
+    name: m.name
+  }));
+  return { models: publicModels, issues: detailed.issues };
+}
+
+module.exports = {
+  loadModelsFromEnv,
+  loadModelsFromEnvDetailed,
+  loadPublicModels
+};