zevairouter 1.0.49 → 1.0.51

package/src/app/(dashboard)/dashboard/basic-chat/BasicChatPageClient.js

@@ -1,17 +1,36 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Badge, Button } from "@/shared/components";
+import { marked } from "marked";
+import { Badge } from "@/shared/components";
 import { getModelsByProviderId } from "@/shared/constants/models";
-import { isAnthropicCompatibleProvider, isOpenAICompatibleProvider } from "@/shared/constants/providers";
+import {
+  AI_PROVIDERS,
+  isAnthropicCompatibleProvider,
+  isOpenAICompatibleProvider,
+} from "@/shared/constants/providers";
 
 const STORAGE_KEYS = {
   sessions: "basic-chat.sessions",
   activeSessionId: "basic-chat.activeSessionId",
   activeProviderId: "basic-chat.activeProviderId",
   draft: "basic-chat.draft",
+  temperature: "basic-chat.temperature",
+  systemPrompt: "basic-chat.systemPrompt",
 };
 
+const SUGGESTIONS = [
+  "Explain this project like I'm new",
+  "Write a concise PR description",
+  "Debug this error message",
+  "Summarize the key trade-offs",
+];
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
 function createId() {
   if (globalThis.crypto?.randomUUID) return globalThis.crypto.randomUUID();
   return `chat_${Date.now()}_${Math.random().toString(16).slice(2)}`;
@@ -41,6 +60,16 @@ function textValue(value) {
   return String(value);
 }
 
+function renderMarkdown(text) {
+  const raw = textValue(text);
+  if (!raw) return "";
+  try {
+    return marked.parse(raw);
+  } catch {
+    return raw.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+}
+
 function humanize(value = "") {
   return String(value)
     .replace(/[-_]/g, " ")
@@ -110,7 +139,10 @@ function cloneSession(session) {
 }
 
 function getProviderLabel(connection) {
-  return connection?.name || humanize(connection?.provider || connection?.id || "provider");
+  const providerId = connection?.provider || connection?.id;
+  const catalog = providerId ? AI_PROVIDERS[providerId] : null;
+  // Prefer product name (CodeBuddy CN), not per-account email/phone
+  return catalog?.name || humanize(providerId || "provider");
 }
 
 function normalizeStaticModel(model, connection) {
@@ -166,6 +198,43 @@ function dedupeModels(models) {
   return Array.from(map.values());
 }
 
+function finalizeProviderGroups(providerMap) {
+  return Array.from(providerMap.values())
+    .map((group) => ({
+      ...group,
+      models: dedupeModels(group.models).sort((a, b) => a.name.localeCompare(b.name)),
+    }))
+    .filter((group) => group.models.length > 0)
+    .sort((a, b) => a.providerName.localeCompare(b.providerName));
+}
+
+/** Fetch with hard timeout so one slow provider never blocks the UI forever. */
+async function fetchWithTimeout(url, options = {}, timeoutMs = 8000) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    return await fetch(url, { ...options, signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/** Run async work with a concurrency ceiling (avoids 800+ parallel /models calls). */
+async function mapPool(items, concurrency, worker) {
+  if (!items.length) return [];
+  const results = new Array(items.length);
+  let next = 0;
+  const runners = Array.from({ length: Math.min(concurrency, items.length) }, async () => {
+    while (next < items.length) {
+      const index = next;
+      next += 1;
+      results[index] = await worker(items[index], index);
+    }
+  });
+  await Promise.all(runners);
+  return results;
+}
+
 export default function BasicChatPageClient() {
   const [providerGroups, setProviderGroups] = useState([]);
   const [loadingData, setLoadingData] = useState(true);
@@ -199,12 +268,28 @@ export default function BasicChatPageClient() {
   const [streamingText, setStreamingText] = useState("");
   const [isHydrated, setIsHydrated] = useState(false);
   const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const [modelQuery, setModelQuery] = useState("");
   const [historyOpen, setHistoryOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [copiedId, setCopiedId] = useState("");
+  const [temperature, setTemperature] = useState(() => {
+    if (typeof window === "undefined") return 0.7;
+    const raw = globalThis.localStorage.getItem(STORAGE_KEYS.temperature);
+    const n = Number(raw);
+    return Number.isFinite(n) ? Math.min(2, Math.max(0, n)) : 0.7;
+  });
+  const [systemPrompt, setSystemPrompt] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return globalThis.localStorage.getItem(STORAGE_KEYS.systemPrompt) || "";
+  });
   const fileInputRef = useRef(null);
   const abortRef = useRef(null);
   const initializedRef = useRef(false);
   const modelMenuRef = useRef(null);
   const historyMenuRef = useRef(null);
+  const settingsMenuRef = useRef(null);
+  const textareaRef = useRef(null);
+  const messagesEndRef = useRef(null);
 
   useEffect(() => {
     setIsHydrated(true);
@@ -218,7 +303,7 @@ export default function BasicChatPageClient() {
       setLoadError("");
 
       try {
-        const providersRes = await fetch("/api/providers", { cache: "no-store" });
+        const providersRes = await fetchWithTimeout("/api/providers", { cache: "no-store" }, 15000);
         const providersData = await providersRes.json().catch(() => ({}));
         const connections = Array.isArray(providersData.connections)
           ? providersData.connections.filter((connection) => connection?.isActive !== false)
@@ -228,11 +313,14 @@ export default function BasicChatPageClient() {
           if (!cancelled) {
             setProviderGroups([]);
             setLoadError("No providers connected yet.");
+            setLoadingData(false);
           }
           return;
         }
 
         const providerMap = new Map();
+        // One representative connection per provider type — no need to hit /models 800×
+        const liveFetchTargets = [];
 
         for (const connection of connections) {
           const providerId = connection.provider || connection.id;
@@ -251,63 +339,79 @@ export default function BasicChatPageClient() {
               connections: [],
               models: [],
             });
+
+            // Static catalog once per provider (not once per connection)
+            const staticModels = getModelsByProviderId(providerId)
+              .map((model) => normalizeStaticModel(model, connection))
+              .filter(Boolean);
+            providerMap.get(providerId).models.push(...staticModels);
+
+            // Live list once per provider — first active connection is enough
+            liveFetchTargets.push(connection);
           }
 
           const group = providerMap.get(providerId);
           group.providerName = group.providerName || providerName;
           group.providerType = group.providerType || providerType;
           group.connections.push(connection);
+        }
 
-          const staticModels = getModelsByProviderId(providerId)
-            .map((model) => normalizeStaticModel(model, connection))
-            .filter(Boolean);
-          group.models.push(...staticModels);
+        // Show static catalog immediately so the picker is usable
+        const staticGroups = finalizeProviderGroups(providerMap);
+        if (!cancelled) {
+          setProviderGroups(staticGroups);
+          if (staticGroups.length === 0) {
+            setLoadError("Loading live models…");
+          } else {
+            setLoadError("");
+          }
+          setLoadingData(false);
         }
 
-        const liveResults = await Promise.all(
-          connections.map(async (connection) => {
-            try {
-              const response = await fetch(`/api/providers/${connection.id}/models`, { cache: "no-store" });
-              const data = await response.json().catch(() => ({}));
-              if (!response.ok) return { connection, models: [] };
-              const models = parseProviderModelsPayload(data)
-                .map((model) => normalizeLiveModel(model, connection))
-                .filter(Boolean);
-              return { connection, models };
-            } catch {
-              return { connection, models: [] };
-            }
-          })
-        );
+        // Enrich in the background: limited concurrency + per-request timeout
+        const liveResults = await mapPool(liveFetchTargets, 6, async (connection) => {
+          if (cancelled) return { connection, models: [] };
+          try {
+            const response = await fetchWithTimeout(
+              `/api/providers/${connection.id}/models`,
+              { cache: "no-store" },
+              8000
+            );
+            const data = await response.json().catch(() => ({}));
+            if (!response.ok) return { connection, models: [] };
+            const models = parseProviderModelsPayload(data)
+              .map((model) => normalizeLiveModel(model, connection))
+              .filter(Boolean);
+            return { connection, models };
+          } catch {
+            return { connection, models: [] };
+          }
+        });
+
+        if (cancelled) return;
 
         for (const result of liveResults) {
           const providerId = result.connection.provider || result.connection.id;
           const group = providerMap.get(providerId);
-          if (!group) continue;
+          if (!group || !result.models?.length) continue;
           group.models.push(...result.models);
         }
 
-        const normalized = Array.from(providerMap.values())
-          .map((group) => ({
-            ...group,
-            models: dedupeModels(group.models).sort((a, b) => a.name.localeCompare(b.name)),
-          }))
-          .filter((group) => group.models.length > 0)
-          .sort((a, b) => a.providerName.localeCompare(b.providerName));
-
+        const normalized = finalizeProviderGroups(providerMap);
         if (!cancelled) {
           setProviderGroups(normalized);
           if (normalized.length === 0) {
             setLoadError("Providers connected but no models available.");
+          } else {
+            setLoadError("");
           }
         }
       } catch (error) {
         if (!cancelled) {
           setLoadError(textValue(error?.message) || "Failed to load providers/models.");
           setProviderGroups([]);
+          setLoadingData(false);
         }
-      } finally {
-        if (!cancelled) setLoadingData(false);
       }
     }
 
@@ -325,12 +429,27 @@ export default function BasicChatPageClient() {
       if (historyMenuRef.current && !historyMenuRef.current.contains(event.target)) {
         setHistoryOpen(false);
       }
+      if (settingsMenuRef.current && !settingsMenuRef.current.contains(event.target)) {
+        setSettingsOpen(false);
+      }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+  useEffect(() => {
+    try {
+      globalThis.localStorage.setItem(STORAGE_KEYS.temperature, String(temperature));
+    } catch { /* ignore */ }
+  }, [temperature]);
+
+  useEffect(() => {
+    try {
+      globalThis.localStorage.setItem(STORAGE_KEYS.systemPrompt, systemPrompt);
+    } catch { /* ignore */ }
+  }, [systemPrompt]);
+
   const modelIndex = useMemo(() => {
     const map = new Map();
     for (const group of providerGroups) {
@@ -570,15 +689,57 @@ export default function BasicChatPageClient() {
     }));
   };
 
-  const sendMessage = async () => {
+  const resizeTextarea = () => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, Math.round(window.innerHeight * 0.28))}px`;
+  };
+
+  useEffect(() => {
+    resizeTextarea();
+  }, [draft]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [currentMessages, streamingText, isSending]);
+
+  const copyMessage = async (messageId, content) => {
+    try {
+      await navigator.clipboard.writeText(textValue(content));
+      setCopiedId(messageId);
+      setTimeout(() => setCopiedId((id) => (id === messageId ? "" : id)), 1500);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const sendMessage = async (opts = {}) => {
     const model = activeModel || activeProviderGroup?.models?.[0] || null;
     if (!model) return;
 
-    const userText = draft.trim();
-    if (!userText && attachments.length === 0) return;
-
+    const regenerate = opts.regenerate === true;
     let sessionId = activeSessionId;
     let session = sessions.find((item) => item.id === sessionId);
+
+    let userText = typeof opts.userText === "string" ? opts.userText : draft.trim();
+    let userAttachments = Array.isArray(opts.attachments) ? opts.attachments : attachments;
+
+    if (regenerate) {
+      if (!session) return;
+      const msgs = [...(session.messages || [])];
+      // drop trailing assistant (and optional error) to resend last user turn
+      while (msgs.length && msgs[msgs.length - 1]?.role === "assistant") msgs.pop();
+      const lastUser = [...msgs].reverse().find((m) => m.role === "user");
+      if (!lastUser) return;
+      userText = textValue(lastUser.content).trim();
+      userAttachments = Array.isArray(lastUser.attachments) ? lastUser.attachments : [];
+      session = { ...session, messages: msgs };
+      setSessions((prev) => prev.map((item) => (item.id === sessionId ? session : item)));
+    }
+
+    if (!userText && (!userAttachments || userAttachments.length === 0)) return;
+
     if (!session) {
       session = ensureSessionForModel(model);
       if (!session) return;
@@ -587,18 +748,20 @@ export default function BasicChatPageClient() {
       setActiveSessionId(sessionId);
     }
 
-    const userMessage = {
-      id: createId(),
-      role: "user",
-      content: userText,
-      attachments: attachments.map((attachment) => ({
-        id: attachment.id,
-        name: attachment.name,
-        type: attachment.type,
-        dataUrl: attachment.dataUrl,
-      })),
-      createdAt: new Date().toISOString(),
-    };
+    const userMessage = regenerate
+      ? null
+      : {
+          id: createId(),
+          role: "user",
+          content: userText,
+          attachments: (userAttachments || []).map((attachment) => ({
+            id: attachment.id,
+            name: attachment.name,
+            type: attachment.type,
+            dataUrl: attachment.dataUrl,
+          })),
+          createdAt: new Date().toISOString(),
+        };
 
     const assistantMessageId = createId();
     const assistantMessage = {
@@ -609,7 +772,10 @@ export default function BasicChatPageClient() {
       status: "streaming",
     };
 
-    const nextMessages = [...(session.messages || []), userMessage, assistantMessage];
+    const baseMessages = regenerate
+      ? [...(session.messages || [])]
+      : [...(session.messages || []), userMessage];
+    const nextMessages = [...baseMessages, assistantMessage];
     setSessions((prev) => prev.map((item) => (item.id === sessionId ? {
       ...item,
       providerId: model.providerId,
@@ -620,8 +786,11 @@ export default function BasicChatPageClient() {
       updatedAt: new Date().toISOString(),
       title: item.title === "New chat" ? makeSessionTitle(userText) : item.title,
     } : item)));
-    setDraft("");
-    setAttachments([]);
+    if (!regenerate) {
+      setDraft("");
+      setAttachments([]);
+      if (textareaRef.current) textareaRef.current.style.height = "auto";
+    }
     setIsSending(true);
     setStreamingMessageId(assistantMessageId);
     setStreamingText("");
@@ -635,6 +804,11 @@ export default function BasicChatPageClient() {
         content: message.role === "user" ? buildUserContent(message) : message.content,
       }));
 
+    const system = systemPrompt.trim();
+    const messagesForApi = system
+      ? [{ role: "system", content: system }, ...requestMessages]
+      : requestMessages;
+
     try {
       const response = await fetch("/api/dashboard/chat/completions", {
         method: "POST",
@@ -644,8 +818,9 @@ export default function BasicChatPageClient() {
         },
         body: JSON.stringify({
           model: model.requestModel || model.id,
-          messages: requestMessages,
+          messages: messagesForApi,
           stream: true,
+          temperature,
         }),
         signal: abortRef.current.signal,
       });
@@ -735,233 +910,584 @@ export default function BasicChatPageClient() {
     }
   };
 
-  const modelLabel = activeModel ? `${activeModel.name}` : "Select model";
-  const modelSubLabel = activeModel ? activeModel.requestModel : "Choose from connected providers";
+  const modelLabel = activeModel ? activeModel.name : "Select model";
+  const modelSubLabel = activeModel
+    ? `${activeModel.providerName || ""} · ${activeModel.requestModel || activeModel.id}`.replace(/^ · /, "")
+    : "Connected providers only";
+
+  const filteredProviderGroups = useMemo(() => {
+    const q = modelQuery.trim().toLowerCase();
+    if (!q) return providerGroups;
+    return providerGroups
+      .map((group) => {
+        const providerHit = (group.providerName || "").toLowerCase().includes(q)
+          || (group.providerId || "").toLowerCase().includes(q);
+        const models = providerHit
+          ? group.models
+          : group.models.filter((model) => {
+            const hay = `${model.name || ""} ${model.requestModel || ""} ${model.id || ""}`.toLowerCase();
+            return hay.includes(q);
+          });
+        return { ...group, models };
+      })
+      .filter((group) => group.models.length > 0);
+  }, [providerGroups, modelQuery]);
 
   return (
-    <div className="relative flex-1 flex flex-col h-full min-h-0 min-w-0 bg-[#212121] text-white overflow-hidden">
-      <div className="relative mx-auto flex flex-1 h-full min-h-0 w-full max-w-4xl flex-col">
-        <div className="flex shrink-0 items-center justify-between gap-3 px-4 py-3 lg:px-6">
-          <div ref={modelMenuRef} className="relative">
-            <button
-              type="button"
-              onClick={() => setModelMenuOpen((value) => !value)}
-              className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-left transition hover:bg-white/8"
-            >
-              <div className="min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-semibold text-white">{modelLabel}</span>
-                  <span className="material-symbols-outlined text-[18px] text-white/70">expand_more</span>
-                </div>
-                <p className="truncate text-xs text-white/55">{modelSubLabel}</p>
-              </div>
-            </button>
-
-            {modelMenuOpen ? (
-              <div className="absolute left-0 top-[calc(100%+10px)] z-30 w-[min(520px,calc(100vw-2rem))] overflow-hidden rounded-[20px] border border-white/10 bg-[#262626] shadow-2xl shadow-black/50">
-                <div className="border-b border-white/10 px-4 py-3">
-                  <p className="text-xs uppercase tracking-[0.22em] text-white/45">Models</p>
-                  <p className="text-sm text-white/75">Only from connected providers</p>
-                </div>
-                <div className="max-h-[60vh] overflow-y-auto p-2 custom-scrollbar">
-                  {providerGroups.map((group) => (
-                    <div key={group.providerId} className="mb-2 rounded-[16px] border border-white/10 bg-black/20 p-2">
-                      <div className="flex items-center justify-between px-2 py-2">
-                        <p className="text-sm font-semibold text-white">{group.providerName}</p>
-                        <Badge size="sm" variant="default">{group.models.length}</Badge>
-                      </div>
-                      <div className="grid gap-2 sm:grid-cols-2">
-                        {group.models.map((model) => {
-                          const isActive = model.id === activeModelId;
-                          return (
-                            <button
-                              key={model.id}
-                              type="button"
-                              onClick={() => handleSelectModel(model.id)}
-                              className={`rounded-[14px] border px-3 py-3 text-left transition ${isActive ? "border-blue-400/40 bg-blue-500/15" : "border-white/10 bg-white/5 hover:bg-white/8"}`}
-                            >
-                              <div className="flex items-start justify-between gap-3">
-                                <div className="min-w-0">
-                                  <p className="truncate text-sm font-medium text-white">{model.name}</p>
-                                  <p className="truncate text-[11px] text-white/45">{model.requestModel}</p>
-                                </div>
-                                {isActive ? <span className="material-symbols-outlined text-[18px] text-blue-300">check_circle</span> : null}
-                              </div>
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : null}
-          </div>
-
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => setHistoryOpen((value) => !value)}
-              className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/80 transition hover:bg-white/8"
-            >
-              History
-            </button>
-            <Button variant="ghost" size="sm" icon="delete" onClick={handleDeleteCurrentChat} disabled={!activeSessionId || sessions.length === 0}>
-              Clear
-            </Button>
-          </div>
+    <div className="relative flex h-full min-h-0 min-w-0 flex-1 overflow-hidden bg-bg text-text-main">
+      {/* ── Session sidebar (Open WebUI / ChatGPT style) ── */}
+      <aside
+        className={`${historyOpen ? "flex" : "hidden"} lg:flex w-[260px] shrink-0 flex-col border-r border-border-subtle bg-surface/60 backdrop-blur-xl`}
+      >
+        <div className="flex items-center gap-2 border-b border-border-subtle p-3">
+          <button
+            type="button"
+            onClick={handleNewChat}
+            disabled={!activeModel}
+            className="flex h-9 flex-1 items-center justify-center gap-2 rounded-[10px] bg-primary text-sm font-semibold text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <span className="material-symbols-outlined text-[18px]">add</span>
+            New chat
+          </button>
+          <button
+            type="button"
+            className="flex size-9 items-center justify-center rounded-[10px] border border-border text-text-muted lg:hidden hover:bg-surface-2"
+            onClick={() => setHistoryOpen(false)}
+            aria-label="Close history"
+          >
+            <span className="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
 
-        {historyOpen ? (
-          <div ref={historyMenuRef} className="absolute right-4 top-[72px] z-20 w-[min(360px,calc(100vw-2rem))] rounded-[20px] border border-white/10 bg-[#262626] p-2 shadow-2xl shadow-black/50 lg:right-6">
-            <div className="px-3 py-2">
-              <p className="text-xs uppercase tracking-[0.22em] text-white/45">Recent chats</p>
+        <div ref={historyMenuRef} className="flex-1 overflow-y-auto p-2 custom-scrollbar">
+          <p className="px-2 py-2 text-[11px] font-semibold uppercase tracking-wider text-text-subtle">
+            Chats
+          </p>
+          {sessionItems.length === 0 ? (
+            <div className="rounded-[10px] border border-dashed border-border px-3 py-6 text-center text-xs text-text-muted">
+              No conversations yet
             </div>
-            <div className="max-h-[48vh] space-y-2 overflow-y-auto p-1 custom-scrollbar">
-              {sessionItems.length === 0 ? (
-                <div className="rounded-[16px] border border-dashed border-white/10 bg-white/5 p-4 text-sm text-white/55">
-                  No conversations yet.
-                </div>
-              ) : sessionItems.map((session) => {
+          ) : (
+            <div className="space-y-0.5">
+              {sessionItems.map((session) => {
                 const isActive = session.id === activeSessionId;
-                const latestMessage = [...(session.messages || [])].reverse().find((message) => message.role === "user") || session.messages?.[0];
+                const latestMessage =
+                  [...(session.messages || [])].reverse().find((m) => m.role === "user") ||
+                  session.messages?.[0];
                 return (
                   <button
                     key={session.id}
                     type="button"
-                    onClick={() => handleSelectSession(session.id)}
-                    className={`w-full rounded-[16px] border px-3 py-3 text-left transition ${isActive ? "border-blue-400/40 bg-blue-500/15" : "border-white/10 bg-white/5 hover:bg-white/8"}`}
+                    onClick={() => {
+                      handleSelectSession(session.id);
+                      if (typeof window !== "undefined" && window.innerWidth < 1024) {
+                        setHistoryOpen(false);
+                      }
+                    }}
+                    className={`group flex w-full items-start gap-2 rounded-[10px] px-2.5 py-2.5 text-left transition ${
+                      isActive
+                        ? "bg-primary/10 text-primary"
+                        : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                    }`}
                   >
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate text-sm font-medium text-white">{session.title}</p>
-                        <p className="mt-1 truncate text-xs text-white/50">{textValue(latestMessage?.content) || "Empty chat"}</p>
-                      </div>
-                      <span className="text-[10px] text-white/40 shrink-0">{formatRelativeTime(session.updatedAt)}</span>
+                    <span className="material-symbols-outlined mt-0.5 text-[16px] opacity-70">
+                      chat_bubble
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-[13px] font-medium leading-snug">
+                        {session.title || "New chat"}
+                      </p>
+                      <p className="mt-0.5 truncate text-[11px] opacity-60">
+                        {textValue(latestMessage?.content) || "Empty"} ·{" "}
+                        {formatRelativeTime(session.updatedAt)}
+                      </p>
                     </div>
                   </button>
                 );
               })}
             </div>
+          )}
+        </div>
+
+        <div className="border-t border-border-subtle p-3">
+          <button
+            type="button"
+            onClick={handleDeleteCurrentChat}
+            disabled={!activeSessionId || sessions.length === 0}
+            className="flex h-8 w-full items-center justify-center gap-1.5 rounded-[8px] text-xs font-medium text-text-muted transition hover:bg-surface-2 hover:text-danger disabled:opacity-40"
+          >
+            <span className="material-symbols-outlined text-[16px]">delete</span>
+            Delete current chat
+          </button>
+        </div>
+      </aside>
+
+      {/* ── Main chat column ── */}
+      <div className="relative flex min-w-0 flex-1 flex-col">
+        {/* Mobile top bar */}
+        <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border-subtle px-3 py-2 lg:hidden">
+          <button
+            type="button"
+            onClick={() => setHistoryOpen(true)}
+            className="flex size-9 items-center justify-center rounded-[10px] border border-border text-text-muted hover:bg-surface-2"
+            aria-label="Open chats"
+          >
+            <span className="material-symbols-outlined text-[20px]">menu</span>
+          </button>
+          <div className="min-w-0 text-center">
+            <p className="truncate text-sm font-semibold">{modelLabel}</p>
+            <p className="truncate text-[11px] text-text-subtle">{modelSubLabel}</p>
           </div>
-        ) : null}
+          <button
+            type="button"
+            onClick={handleNewChat}
+            disabled={!activeModel}
+            className="flex size-9 items-center justify-center rounded-[10px] border border-border text-text-muted hover:bg-surface-2 disabled:opacity-40"
+            aria-label="New chat"
+          >
+            <span className="material-symbols-outlined text-[20px]">edit_square</span>
+          </button>
+        </div>
 
         {loadError ? (
-          <div className="mt-4 rounded-[18px] border border-rose-500/20 bg-rose-500/10 px-4 py-3 text-rose-100">
-            <div className="flex items-start gap-3">
-              <span className="material-symbols-outlined text-[20px]">error</span>
-              <p className="text-sm leading-6">{loadError}</p>
+          <div className="mx-4 mt-3 rounded-[10px] border border-danger/25 bg-danger/10 px-3 py-2.5 text-sm text-danger">
+            <div className="flex items-start gap-2">
+              <span className="material-symbols-outlined text-[18px]">error</span>
+              <p>{loadError}</p>
             </div>
           </div>
         ) : null}
 
-        <div className="flex flex-1 flex-col min-h-0">
-          <div className="flex-1 overflow-y-auto py-4 custom-scrollbar">
-            {currentMessages.length === 0 ? (
-              <div className="flex min-h-[50vh] items-center justify-center px-4 text-center">
-                <div className="max-w-xl space-y-4">
-                  <div className="mx-auto flex size-16 items-center justify-center rounded-[20px] border border-white/10 bg-white/5 text-white/80">
-                    <span className="material-symbols-outlined text-[30px]">chat</span>
-                  </div>
-                  <div className="space-y-2">
-                    <h2 className="text-2xl font-semibold text-white">Start a conversation</h2>
-                    <p className="text-sm leading-6 text-white/60">
-                      Simple chat interface to interact with any AI model from connected providers. Select a model and start chatting!
-                    </p>
-                  </div>
-                </div>
+        {/* Messages — single column, Grok/ChatGPT-style thread */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar">
+          {currentMessages.length === 0 ? (
+            <div className="flex min-h-full flex-col items-center justify-center px-6 pb-36 pt-10 text-center">
+              <div className="mb-4 flex size-12 items-center justify-center rounded-2xl border border-border bg-surface text-primary shadow-soft">
+                <span className="material-symbols-outlined text-[26px]">forum</span>
               </div>
-            ) : null}
-
-            <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4">
-              {currentMessages.map((message) => {
+              <h2 className="text-[22px] font-semibold tracking-tight text-text-main">
+                How can I help?
+              </h2>
+              <p className="mt-1.5 max-w-md text-[13px] leading-relaxed text-text-muted">
+                Pick a model below, then ask anything through your connected providers.
+              </p>
+              <div className="mt-6 flex max-w-xl flex-wrap items-center justify-center gap-2">
+                {SUGGESTIONS.map((tip) => (
+                  <button
+                    key={tip}
+                    type="button"
+                    disabled={!activeModel || loadingData}
+                    onClick={() => {
+                      setDraft(tip);
+                      requestAnimationFrame(() => textareaRef.current?.focus());
+                    }}
+                    className="rounded-full border border-border bg-surface px-3.5 py-2 text-left text-[12.5px] text-text-muted transition hover:border-primary/35 hover:bg-primary/5 hover:text-text-main disabled:opacity-40"
+                  >
+                    {tip}
+                  </button>
+                ))}
+              </div>
+              {loadingData ? (
+                <p className="mt-4 text-xs text-text-subtle">Loading models…</p>
+              ) : null}
+            </div>
+          ) : (
+            <div className="mx-auto w-full max-w-3xl px-4 py-6 lg:px-8">
+              {currentMessages.map((message, index) => {
                 const isUser = message.role === "user";
                 const isAssistant = message.role === "assistant";
-                const isStreaming = isAssistant && message.id === streamingMessageId && message.status === "streaming";
-                const content = textValue(message.content) || (isAssistant ? streamingText : "");
+                const isStreaming =
+                  isAssistant &&
+                  message.id === streamingMessageId &&
+                  message.status === "streaming";
+                const content =
+                  textValue(message.content) || (isAssistant ? streamingText : "");
+                const isError = message.status === "error";
+                const isLastAssistant =
+                  isAssistant &&
+                  index === currentMessages.length - 1 &&
+                  message.status !== "streaming";
 
                 return (
-                  <div key={message.id} className={`flex w-full ${isUser ? "justify-end" : "justify-start"} mb-6`}>
-                    <div className={`max-w-[min(88%,42rem)] ${isUser ? "rounded-3xl bg-[#2f2f2f] px-5 py-3.5 text-white" : "text-white/90"}`}>
-                      <div className="mb-1 flex items-center justify-between gap-3">
-                        <span className="text-xs font-semibold">{isUser ? "You" : activeModel?.name || "Assistant"}</span>
+                  <div
+                    key={message.id}
+                    className="group relative mb-1 border-b border-border-subtle/50 py-5 last:border-0"
+                  >
+                    <div className="flex gap-3.5">
+                      <div
+                        className={`flex size-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold ${
+                          isUser
+                            ? "bg-primary text-white"
+                            : "border border-border bg-surface-2 text-text-muted"
+                        }`}
+                      >
+                        {isUser ? "Y" : "AI"}
                       </div>
-
-                      {message.attachments?.length ? (
-                        <div className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-3 mt-2">
-                          {message.attachments.map((attachment) => (
-                            <a key={attachment.id} href={attachment.dataUrl} target="_blank" rel="noreferrer" className="overflow-hidden rounded-[18px] border border-white/10 bg-black/20">
-                              <img src={attachment.dataUrl} alt={attachment.name} className="h-28 w-full object-cover" />
-                            </a>
-                          ))}
-                        </div>
-                      ) : null}
-
-                      <div className="whitespace-pre-wrap break-words text-[15px] leading-7">
-                        {content}
-                        {isAssistant && isStreaming && !streamingText ? <span className="inline-block animate-pulse">▋</span> : null}
+                      <div className="min-w-0 flex-1">
+                        <p className="mb-1.5 text-[12px] font-semibold text-text-main">
+                          {isUser ? "You" : activeModel?.name || "Assistant"}
+                        </p>
+                        {message.attachments?.length ? (
+                          <div className="mb-3 grid max-w-md grid-cols-2 gap-2 sm:grid-cols-3">
+                            {message.attachments.map((attachment) => (
+                              <a
+                                key={attachment.id}
+                                href={attachment.dataUrl}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="overflow-hidden rounded-lg border border-border"
+                              >
+                                <img
+                                  src={attachment.dataUrl}
+                                  alt={attachment.name}
+                                  className="h-24 w-full object-cover"
+                                />
+                              </a>
+                            ))}
+                          </div>
+                        ) : null}
+                        {isAssistant && !isError ? (
+                          <div
+                            className="playground-md text-[14.5px] leading-[1.7] text-text-main"
+                            dangerouslySetInnerHTML={{
+                              __html: renderMarkdown(content) || (isStreaming ? "" : ""),
+                            }}
+                          />
+                        ) : (
+                          <div
+                            className={`whitespace-pre-wrap break-words text-[14.5px] leading-[1.7] ${
+                              isError ? "text-danger" : "text-text-main"
+                            }`}
+                          >
+                            {content}
+                          </div>
+                        )}
+                        {isAssistant && isStreaming ? (
+                          <span className="ml-0.5 inline-block animate-pulse text-primary">▋</span>
+                        ) : null}
+
+                        {isAssistant && content && !isStreaming ? (
+                          <div className="mt-2 flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
+                            <button
+                              type="button"
+                              onClick={() => copyMessage(message.id, content)}
+                              className="inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] font-medium text-text-muted hover:bg-surface-2 hover:text-text-main"
+                              title="Copy"
+                            >
+                              <span className="material-symbols-outlined text-[14px]">
+                                {copiedId === message.id ? "check" : "content_copy"}
+                              </span>
+                              {copiedId === message.id ? "Copied" : "Copy"}
+                            </button>
+                            {isLastAssistant && !isSending ? (
+                              <button
+                                type="button"
+                                onClick={() => sendMessage({ regenerate: true })}
+                                className="inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] font-medium text-text-muted hover:bg-surface-2 hover:text-text-main"
+                                title="Regenerate"
+                              >
+                                <span className="material-symbols-outlined text-[14px]">refresh</span>
+                                Retry
+                              </button>
+                            ) : null}
+                          </div>
+                        ) : null}
                       </div>
                     </div>
                   </div>
                 );
               })}
+              <div ref={messagesEndRef} />
             </div>
-          </div>
+          )}
+        </div>
 
-          <div className="shrink-0 pt-2">
+        {/* ── Composer (model picker at bottom — ChatGPT / Open WebUI pattern) ── */}
+        <div className="shrink-0 border-t border-border-subtle bg-bg/90 backdrop-blur-xl">
+          <div className="mx-auto w-full max-w-3xl px-4 pb-4 pt-3 lg:px-6">
             {attachments.length > 0 ? (
-              <div className="mx-auto mb-3 flex w-full max-w-3xl flex-wrap gap-2 px-4">
+              <div className="mb-2 flex flex-wrap gap-2">
                 {attachments.map((attachment) => (
-                  <div key={attachment.id} className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2">
-                    <span className="text-xs text-white/80 max-w-[12rem] truncate">{attachment.name}</span>
-                    <button type="button" onClick={() => removeAttachment(attachment.id)} className="text-white/55 hover:text-white" aria-label="Remove attachment">
-                      <span className="material-symbols-outlined text-[18px]">close</span>
+                  <div
+                    key={attachment.id}
+                    className="flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1.5"
+                  >
+                    <span className="max-w-[10rem] truncate text-xs text-text-muted">
+                      {attachment.name}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => removeAttachment(attachment.id)}
+                      className="text-text-subtle hover:text-text-main"
+                      aria-label="Remove attachment"
+                    >
+                      <span className="material-symbols-outlined text-[16px]">close</span>
                     </button>
                   </div>
                 ))}
               </div>
             ) : null}
 
-            <div className="mx-auto w-full max-w-3xl px-4 pb-2">
-              <div className="rounded-[26px] bg-[#2f2f2f] px-3 pt-3 pb-2 shadow-[0_0_15px_rgba(0,0,0,0.10)] ring-1 ring-white/5">
-                <textarea
-                  value={draft}
-                  onChange={(event) => setDraft(event.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Message AI"
-                  rows={1}
-                  className="w-full resize-none bg-transparent px-2 text-[15px] leading-6 text-white outline-none placeholder:text-white/40 custom-scrollbar max-h-[25vh] overflow-y-auto"
-                />
-
-                <div className="mt-2 flex items-center justify-between gap-3">
-                  <div className="flex items-center gap-2">
-                    <button type="button" onClick={() => fileInputRef.current?.click()} disabled={!activeModel || loadingData} className="p-2 text-white/50 hover:text-white transition rounded-full hover:bg-white/5">
-                      <span className="material-symbols-outlined text-[20px]">attach_file</span>
+            <div className="rounded-2xl border border-border-subtle bg-surface-2/80 shadow-[0_8px_30px_rgba(0,0,0,0.25)] ring-1 ring-white/5 focus-within:border-primary/50 focus-within:ring-primary/20 transition">
+              <textarea
+                ref={textareaRef}
+                value={draft}
+                onChange={(event) => setDraft(event.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={
+                  activeModel
+                    ? `Message ${activeModel.name}…`
+                    : "Select a model below to start chatting"
+                }
+                rows={1}
+                disabled={!activeModel || loadingData}
+                className="max-h-[28vh] min-h-[52px] w-full resize-none overflow-y-auto bg-transparent px-4 pt-3.5 text-[15px] leading-6 text-text-main outline-none placeholder:text-text-subtle custom-scrollbar disabled:opacity-50"
+              />
+
+              <div className="flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1">
+                <div className="flex min-w-0 items-center gap-1.5">
+                  {/* Image upload — visible chip button */}
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={!activeModel || loadingData}
+                    className="inline-flex h-9 items-center gap-1.5 rounded-full border border-border bg-surface px-3 text-[12px] font-medium text-text-main transition hover:border-primary/40 hover:bg-primary/10 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
+                    title="Upload image"
+                  >
+                    <span className="material-symbols-outlined text-[18px]">add_photo_alternate</span>
+                    <span className="hidden sm:inline">Image</span>
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    className="hidden"
+                    onChange={handleAttachFiles}
+                  />
+
+                  {/* Temperature + system prompt */}
+                  <div ref={settingsMenuRef} className="relative">
+                    <button
+                      type="button"
+                      onClick={() => setSettingsOpen((v) => !v)}
+                      className={`inline-flex h-9 items-center gap-1.5 rounded-full border px-3 text-[12px] font-medium transition ${
+                        settingsOpen || systemPrompt.trim() || temperature !== 0.7
+                          ? "border-primary/40 bg-primary/10 text-primary"
+                          : "border-border bg-surface text-text-main hover:border-primary/40 hover:bg-primary/10 hover:text-primary"
+                      }`}
+                      title="Chat settings"
+                    >
+                      <span className="material-symbols-outlined text-[18px]">tune</span>
+                      <span className="hidden sm:inline tabular-nums">{temperature.toFixed(1)}</span>
                     </button>
-                    <input ref={fileInputRef} type="file" accept="image/*" multiple className="hidden" onChange={handleAttachFiles} />
-                    <span className="text-xs font-medium text-white/30 truncate max-w-[120px]">{activeModel ? activeModel.name : "No model"}</span>
+                    {settingsOpen ? (
+                      <div className="absolute bottom-[calc(100%+8px)] left-0 z-40 w-[min(320px,calc(100vw-2rem))] space-y-3 rounded-xl border border-border bg-surface p-3 shadow-elevated">
+                        <div>
+                          <div className="mb-1.5 flex items-center justify-between gap-2">
+                            <p className="text-[11px] font-semibold uppercase tracking-wider text-text-subtle">
+                              Temperature
+                            </p>
+                            <span className="text-xs font-semibold tabular-nums text-text-main">
+                              {temperature.toFixed(2)}
+                            </span>
+                          </div>
+                          <input
+                            type="range"
+                            min={0}
+                            max={2}
+                            step={0.05}
+                            value={temperature}
+                            onChange={(e) => setTemperature(Number(e.target.value))}
+                            className="w-full accent-[var(--color-primary,#E56A4A)]"
+                          />
+                          <div className="mt-1 flex justify-between text-[10px] text-text-subtle">
+                            <span>Precise</span>
+                            <span>Creative</span>
+                          </div>
+                        </div>
+                        <div>
+                          <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-text-subtle">
+                            System prompt
+                          </p>
+                          <textarea
+                            value={systemPrompt}
+                            onChange={(e) => setSystemPrompt(e.target.value)}
+                            rows={4}
+                            placeholder="Optional instructions for the model…"
+                            className="w-full resize-y rounded-lg border border-border bg-bg px-2.5 py-2 text-[12.5px] leading-5 text-text-main outline-none placeholder:text-text-subtle focus:border-primary/40 custom-scrollbar"
+                          />
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setTemperature(0.7);
+                            setSystemPrompt("");
+                          }}
+                          className="text-[11px] font-medium text-text-muted hover:text-text-main"
+                        >
+                          Reset defaults
+                        </button>
+                      </div>
+                    ) : null}
                   </div>
 
-                  <div className="flex items-center gap-2">
-                    {isSending ? (
-                      <button type="button" onClick={handleStop} className="p-2 text-white bg-white/10 hover:bg-white/20 transition rounded-full h-8 w-8 flex items-center justify-center">
-                        <span className="material-symbols-outlined text-[16px]">stop</span>
-                      </button>
-                    ) : null}
-                    <button onClick={sendMessage} disabled={!canSend} className={`h-8 w-8 rounded-full flex items-center justify-center transition ${canSend ? 'bg-white text-black hover:opacity-90' : 'bg-white/10 text-white/30 cursor-not-allowed'}`}>
-                      <span className="material-symbols-outlined text-[16px]">arrow_upward</span>
+                  {/* Model selector — bottom, opens upward */}
+                  <div ref={modelMenuRef} className="relative min-w-0">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setModelMenuOpen((v) => {
+                          const next = !v;
+                          if (!next) setModelQuery("");
+                          return next;
+                        });
+                      }}
+                      disabled={loadingData || providerGroups.length === 0}
+                      className="inline-flex h-9 max-w-[min(100vw-12rem,260px)] items-center gap-1.5 rounded-full border border-border bg-surface px-3 text-left transition hover:border-primary/40 hover:bg-surface-2 disabled:opacity-50"
+                    >
+                      <span className="material-symbols-outlined text-[18px] text-primary shrink-0">
+                        smart_toy
+                      </span>
+                      <span className="min-w-0 truncate text-[12.5px] font-semibold text-text-main">
+                        {loadingData ? "Loading…" : modelLabel}
+                      </span>
+                      <span className="material-symbols-outlined shrink-0 text-[16px] text-text-muted">
+                        {modelMenuOpen ? "expand_less" : "expand_more"}
+                      </span>
                     </button>
+
+                    {modelMenuOpen ? (
+                      <div className="absolute bottom-[calc(100%+8px)] left-0 z-40 w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-xl border border-border bg-surface shadow-elevated">
+                        <div className="border-b border-border-subtle px-3 py-2.5 space-y-2">
+                          <div>
+                            <p className="text-[11px] font-semibold uppercase tracking-wider text-text-subtle">
+                              Models
+                            </p>
+                            <p className="text-xs text-text-muted">
+                              {providerGroups.length} providers · search by name
+                            </p>
+                          </div>
+                          <div className="relative">
+                            <span className="material-symbols-outlined pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-[16px] text-text-subtle">
+                              search
+                            </span>
+                            <input
+                              type="search"
+                              value={modelQuery}
+                              onChange={(e) => setModelQuery(e.target.value)}
+                              placeholder="Search models…"
+                              autoFocus
+                              className="w-full rounded-lg border border-border bg-bg py-1.5 pl-8 pr-3 text-[12.5px] text-text-main outline-none placeholder:text-text-subtle focus:border-primary/40"
+                            />
+                          </div>
+                        </div>
+                        <div className="max-h-[min(50vh,360px)] overflow-y-auto p-1.5 custom-scrollbar">
+                          {filteredProviderGroups.length === 0 ? (
+                            <p className="px-3 py-6 text-center text-xs text-text-muted">
+                              No models match “{modelQuery.trim()}”
+                            </p>
+                          ) : (
+                            filteredProviderGroups.map((group) => (
+                              <div key={group.providerId} className="mb-1">
+                                <div className="flex items-center justify-between px-2 py-1.5">
+                                  <p className="text-[11px] font-semibold uppercase tracking-wide text-text-subtle">
+                                    {group.providerName}
+                                  </p>
+                                  <Badge size="sm" variant="default">
+                                    {group.models.length}
+                                  </Badge>
+                                </div>
+                                <div className="space-y-0.5">
+                                  {group.models.map((model) => {
+                                    const isActive = model.id === activeModelId;
+                                    return (
+                                      <button
+                                        key={model.id}
+                                        type="button"
+                                        onClick={() => {
+                                          handleSelectModel(model.id);
+                                          setModelQuery("");
+                                        }}
+                                        className={`flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left transition ${
+                                          isActive
+                                            ? "bg-primary/10 text-primary"
+                                            : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                                        }`}
+                                      >
+                                        <span className="min-w-0 flex-1">
+                                          <span className="block truncate text-[13px] font-medium">
+                                            {model.name}
+                                          </span>
+                                          <span className="block truncate text-[11px] opacity-60">
+                                            {model.requestModel}
+                                          </span>
+                                        </span>
+                                        {isActive ? (
+                                          <span className="material-symbols-outlined text-[16px]">
+                                            check
+                                          </span>
+                                        ) : null}
+                                      </button>
+                                    );
+                                  })}
+                                </div>
+                              </div>
+                            ))
+                          )}
+                        </div>
+                      </div>
+                    ) : null}
                   </div>
                 </div>
+
+                <div className="flex shrink-0 items-center gap-2">
+                  {isSending ? (
+                    <button
+                      type="button"
+                      onClick={handleStop}
+                      className="inline-flex h-9 items-center gap-1.5 rounded-full border border-border bg-surface px-3 text-[12px] font-semibold text-text-main transition hover:bg-surface-2"
+                      title="Stop generating"
+                    >
+                      <span className="material-symbols-outlined text-[18px]">stop_circle</span>
+                      <span className="hidden sm:inline">Stop</span>
+                    </button>
+                  ) : null}
+                  {/* Send — solid primary pill (ChatGPT-style, high contrast) */}
+                  <button
+                    type="button"
+                    onClick={sendMessage}
+                    disabled={!canSend}
+                    className={`inline-flex h-9 min-w-9 items-center justify-center gap-1.5 rounded-full px-3.5 text-[13px] font-semibold transition ${
+                      canSend
+                        ? "bg-primary text-white shadow-[0_2px_12px_rgba(229,106,74,0.45)] hover:bg-primary-hover active:scale-[0.97]"
+                        : "bg-surface-3 text-text-subtle cursor-not-allowed opacity-70"
+                    }`}
+                    title="Send message"
+                  >
+                    <span className="material-symbols-outlined text-[18px] font-bold">send</span>
+                    <span className="hidden sm:inline">Send</span>
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
 
-          <p className="mx-auto mt-2 max-w-3xl px-4 pb-4 text-center text-[11px] text-white/30">
-            Model list is filtered from connected providers.
-          </p>
+            <p className="mt-2 text-center text-[11px] text-text-subtle">
+              Routed through ZevaiRouter · Enter to send · Shift+Enter for new line
+            </p>
+          </div>
         </div>
       </div>
+
+      {/* Mobile history backdrop */}
+      {historyOpen ? (
+        <button
+          type="button"
+          className="fixed inset-0 z-20 bg-black/40 lg:hidden"
+          aria-label="Close history"
+          onClick={() => setHistoryOpen(false)}
+        />
+      ) : null}
     </div>
   );
 }