zevairouter 1.0.154 → 1.0.155

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

@@ -1,1592 +0,0 @@
-"use client";
-/* eslint-disable @next/next/no-img-element -- dynamic/blob/external image src with onError fallback; next/image requires static dims + domain allowlist */
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import { marked } from "marked";
-import DOMPurify from "dompurify";
-import { Badge } from "@/shared/components";
-import { getModelsByProviderId } from "@/shared/constants/models";
-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",
-};
-
-// Stable empty array — avoids creating a new [] every render when there's no
-// active session, which would otherwise churn effects/memos keyed on messages.
-const EMPTY_MESSAGES = [];
-
-const SUGGESTIONS = [
-  "Explain this project like I'm new",
-  "Write a concise PR description",
-  "Debug this error message",
-  "Summarize the key trade-offs",
-];
-
-// Mirrors the providers backed by /api/providers/[id]/models. Other providers
-// already use the static catalog and should not trigger known-failing requests.
-const LIVE_MODEL_PROVIDER_IDS = new Set([
-  "alicode",
-  "alicode-intl",
-  "anthropic",
-  "antigravity",
-  "assemblyai",
-  "byteplus",
-  "cerebras",
-  "chutes",
-  "claude",
-  "cline",
-  "clinepass",
-  "codex",
-  "cohere",
-  "deepseek",
-  "fireworks",
-  "gemini",
-  "gemini-cli",
-  "github",
-  "grok-cli",
-  "groq",
-  "hyperbolic",
-  "kimchi",
-  "kiro",
-  "mistral",
-  "nanobanana",
-  "nebius",
-  "nvidia",
-  "ollama",
-  "ollama-local",
-  "openai",
-  "openrouter",
-  "perplexity",
-  "perplexity-agent",
-  "qoder",
-  "qwen",
-  "siliconflow",
-  "together",
-  "vercel-ai-gateway",
-  "volcengine-ark",
-  "xai",
-]);
-
-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)}`;
-}
-
-function safeParse(value, fallback) {
-  try {
-    return JSON.parse(value);
-  } catch {
-    return fallback;
-  }
-}
-
-function textValue(value) {
-  if (typeof value === "string") return value;
-  if (value == null) return "";
-  if (Array.isArray(value)) return value.map(textValue).filter(Boolean).join(" ");
-  if (typeof value === "object") {
-    if (typeof value.message === "string") return value.message;
-    if (typeof value.error === "string") return value.error;
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(value);
-    }
-  }
-  return String(value);
-}
-
-function renderMarkdown(text) {
-  const raw = textValue(text);
-  if (!raw) return "";
-  try {
-    return DOMPurify.sanitize(marked.parse(raw));
-  } catch {
-    return raw.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  }
-}
-
-function humanize(value = "") {
-  return String(value)
-    .replace(/[-_]/g, " ")
-    .replace(/\b\w/g, (char) => char.toUpperCase())
-    .trim() || "Unknown";
-}
-
-function formatRelativeTime(value) {
-  if (!value) return "Now";
-  const time = new Date(value).getTime();
-  if (Number.isNaN(time)) return "Now";
-  const diffMinutes = Math.max(1, Math.round((Date.now() - time) / 60000));
-  if (diffMinutes < 60) return `${diffMinutes}m`;
-  const diffHours = Math.round(diffMinutes / 60);
-  if (diffHours < 24) return `${diffHours}h`;
-  return `${Math.round(diffHours / 24)}d`;
-}
-
-function makeSessionTitle(text = "") {
-  const normalized = textValue(text).replace(/\s+/g, " ").trim();
-  if (!normalized) return "New chat";
-  return normalized.length > 52 ? `${normalized.slice(0, 52).trimEnd()}…` : normalized;
-}
-
-function buildUserContent(message) {
-  const text = textValue(message.content).trim();
-  const attachments = Array.isArray(message.attachments) ? message.attachments : [];
-
-  if (attachments.length === 0) return text;
-
-  const content = [];
-  if (text) content.push({ type: "text", text });
-
-  for (const attachment of attachments) {
-    if (attachment?.dataUrl) {
-      content.push({ type: "image_url", image_url: { url: attachment.dataUrl } });
-    }
-  }
-
-  return content.length > 0 ? content : text;
-}
-
-function readAssistantText(chunk) {
-  if (!chunk || typeof chunk !== "object") return "";
-  const choice = chunk.choices?.[0];
-  const delta = choice?.delta || {};
-  const pieces = [delta.content, choice?.message?.content, chunk.output_text, chunk.text]
-    .map(textValue)
-    .filter(Boolean);
-  return pieces[0] || "";
-}
-
-async function fileToDataUrl(file) {
-  return await new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(String(reader.result || ""));
-    reader.onerror = () => reject(reader.error || new Error("Failed to read file"));
-    reader.readAsDataURL(file);
-  });
-}
-
-function cloneSession(session) {
-  return {
-    ...session,
-    messages: Array.isArray(session.messages) ? session.messages.map((message) => ({ ...message })) : [],
-  };
-}
-
-function getProviderLabel(connection) {
-  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) {
-  if (!model?.id) return null;
-  return {
-    id: `${connection.provider}/${model.id}`,
-    requestModel: `${connection.provider}/${model.id}`,
-    name: model.name || model.id,
-    providerId: connection.provider,
-    providerName: getProviderLabel(connection),
-    source: "static",
-  };
-}
-
-function normalizeLiveModel(model, connection) {
-  const rawId = typeof model === "string" ? model : model?.id || model?.name || model?.model || "";
-  if (!rawId) return null;
-
-  const displayName = typeof model === "string"
-    ? model
-    : model?.name || model?.displayName || rawId;
-
-  let requestModel = rawId;
-  const isCompatible = isOpenAICompatibleProvider(connection.provider) || isAnthropicCompatibleProvider(connection.provider);
-  if (isCompatible && !rawId.includes("/")) {
-    requestModel = `${connection.provider}/${rawId}`;
-  }
-
-  return {
-    id: requestModel,
-    requestModel,
-    name: displayName,
-    providerId: connection.provider,
-    providerName: getProviderLabel(connection),
-    source: "live",
-  };
-}
-
-function parseProviderModelsPayload(data) {
-  if (Array.isArray(data?.models)) return data.models;
-  if (Array.isArray(data?.data)) return data.data;
-  if (Array.isArray(data?.results)) return data.results;
-  if (Array.isArray(data)) return data;
-  return [];
-}
-
-function dedupeModels(models) {
-  const map = new Map();
-  for (const model of models) {
-    if (!model?.id) continue;
-    if (!map.has(model.id)) map.set(model.id, model);
-  }
-  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));
-}
-
-function supportsLiveModelDiscovery(connection) {
-  const providerId = connection?.provider;
-  if (!providerId) return false;
-  if (LIVE_MODEL_PROVIDER_IDS.has(providerId)) return true;
-
-  const hasBaseUrl = Boolean(connection?.providerSpecificData?.baseUrl);
-  return hasBaseUrl && (
-    isOpenAICompatibleProvider(providerId) || isAnthropicCompatibleProvider(providerId)
-  );
-}
-
-/** 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);
-  const [loadError, setLoadError] = useState("");
-  const [sessions, setSessions] = useState([]);
-  const [activeSessionId, setActiveSessionId] = useState("");
-  const [activeProviderId, setActiveProviderId] = useState("");
-  const [activeModelId, setActiveModelId] = useState("");
-  const [draft, setDraft] = useState("");
-  const [attachments, setAttachments] = useState([]);
-  const [isSending, setIsSending] = useState(false);
-  const [streamingMessageId, setStreamingMessageId] = useState("");
-  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(0.7);
-  const [systemPrompt, setSystemPrompt] = useState("");
-  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(() => {
-    try {
-      const saved = safeParse(globalThis.localStorage.getItem(STORAGE_KEYS.sessions), []);
-      const savedSessions = Array.isArray(saved) ? saved.map((session) => ({
-        ...session,
-        messages: Array.isArray(session.messages) ? session.messages : [],
-      })) : [];
-      const storedTemperature = globalThis.localStorage.getItem(STORAGE_KEYS.temperature);
-      const rawTemperature = storedTemperature === null ? Number.NaN : Number(storedTemperature);
-
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- restore client-only persisted state after deterministic SSR hydration
-      setSessions(savedSessions);
-      setActiveSessionId(globalThis.localStorage.getItem(STORAGE_KEYS.activeSessionId) || "");
-      setActiveProviderId(globalThis.localStorage.getItem(STORAGE_KEYS.activeProviderId) || "");
-      setDraft(globalThis.localStorage.getItem(STORAGE_KEYS.draft) || "");
-      setTemperature(Number.isFinite(rawTemperature) ? Math.min(2, Math.max(0, rawTemperature)) : 0.7);
-      setSystemPrompt(globalThis.localStorage.getItem(STORAGE_KEYS.systemPrompt) || "");
-    } catch {
-      // Storage may be unavailable in privacy-restricted browser contexts.
-    } finally {
-      setIsHydrated(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function loadData() {
-      setLoadingData(true);
-      setLoadError("");
-
-      try {
-        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)
-          : [];
-
-        if (connections.length === 0) {
-          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;
-          const providerName = getProviderLabel(connection);
-          const providerType = isOpenAICompatibleProvider(providerId)
-            ? "openai-compatible"
-            : isAnthropicCompatibleProvider(providerId)
-              ? "anthropic-compatible"
-              : providerId;
-
-          if (!providerMap.has(providerId)) {
-            providerMap.set(providerId, {
-              providerId,
-              providerName,
-              providerType,
-              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.
-            if (staticModels.length === 0 && supportsLiveModelDiscovery(connection)) {
-              liveFetchTargets.push(connection);
-            }
-          }
-
-          const group = providerMap.get(providerId);
-          group.providerName = group.providerName || providerName;
-          group.providerType = group.providerType || providerType;
-          group.connections.push(connection);
-        }
-
-        // 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);
-        }
-
-        // 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 || !result.models?.length) continue;
-          group.models.push(...result.models);
-        }
-
-        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);
-        }
-      }
-    }
-
-    loadData();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (modelMenuRef.current && !modelMenuRef.current.contains(event.target)) {
-        setModelMenuOpen(false);
-      }
-      if (historyMenuRef.current && !historyMenuRef.current.contains(event.target)) {
-        setHistoryOpen(false);
-      }
-      if (settingsMenuRef.current && !settingsMenuRef.current.contains(event.target)) {
-        setSettingsOpen(false);
-      }
-    };
-    const handleEscape = (event) => {
-      if (event.key !== "Escape") return;
-      setModelMenuOpen(false);
-      setModelQuery("");
-      setSettingsOpen(false);
-      setHistoryOpen(false);
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!isHydrated) return;
-    try {
-      globalThis.localStorage.setItem(STORAGE_KEYS.temperature, String(temperature));
-    } catch { /* ignore */ }
-  }, [isHydrated, temperature]);
-
-  useEffect(() => {
-    if (!isHydrated) return;
-    try {
-      globalThis.localStorage.setItem(STORAGE_KEYS.systemPrompt, systemPrompt);
-    } catch { /* ignore */ }
-  }, [isHydrated, systemPrompt]);
-
-  const modelIndex = useMemo(() => {
-    const map = new Map();
-    for (const group of providerGroups) {
-      for (const model of group.models) {
-        map.set(model.id, {
-          ...model,
-          providerId: group.providerId,
-          providerName: group.providerName,
-        });
-      }
-    }
-    return map;
-  }, [providerGroups]);
-
-  const activeProviderGroup = useMemo(() => {
-    return providerGroups.find((group) => group.providerId === activeProviderId) || providerGroups[0] || null;
-  }, [providerGroups, activeProviderId]);
-
-  const activeModel = useMemo(() => {
-    if (activeModelId && modelIndex.has(activeModelId)) return modelIndex.get(activeModelId);
-    if (activeSessionId) {
-      const session = sessions.find((item) => item.id === activeSessionId);
-      if (session?.modelId && modelIndex.has(session.modelId)) return modelIndex.get(session.modelId);
-    }
-    return activeProviderGroup?.models?.[0] || null;
-  }, [activeModelId, modelIndex, activeProviderGroup, sessions, activeSessionId]);
-
-  const currentSession = useMemo(() => sessions.find((session) => session.id === activeSessionId) || null, [sessions, activeSessionId]);
-  const currentMessages = currentSession?.messages || EMPTY_MESSAGES;
-  const sessionItems = useMemo(() => [...sessions].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()), [sessions]);
-  const canSend = !isSending && !!activeModel && (draft.trim().length > 0 || attachments.length > 0);
-
-  useEffect(() => {
-    if (!isHydrated) return;
-    try {
-      globalThis.localStorage.setItem(STORAGE_KEYS.sessions, JSON.stringify(sessions));
-      globalThis.localStorage.setItem(STORAGE_KEYS.activeSessionId, activeSessionId);
-      globalThis.localStorage.setItem(STORAGE_KEYS.activeProviderId, activeProviderId);
-      globalThis.localStorage.setItem(STORAGE_KEYS.draft, draft);
-    } catch {
-      // Ignore storage errors.
-    }
-  }, [isHydrated, sessions, activeSessionId, activeProviderId, draft]);
-
-  useEffect(() => {
-    if (!isHydrated || loadingData || initializedRef.current) return;
-    if (providerGroups.length === 0) return;
-
-    const savedProvider = providerGroups.find((group) => group.providerId === activeProviderId) || providerGroups[0];
-    const savedModel = activeModelId && modelIndex.has(activeModelId)
-      ? modelIndex.get(activeModelId)
-      : savedProvider.models[0];
-
-    if (sessions.length > 0) {
-      const session = sessions.find((item) => item.id === activeSessionId) || sessions[0];
-      const sessionModel = session?.modelId && modelIndex.has(session.modelId)
-        ? modelIndex.get(session.modelId)
-        : savedModel;
-      initializedRef.current = true;
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time session/model reconciliation after async data load, guarded by initializedRef
-      setActiveSessionId(session.id);
-      setActiveProviderId(sessionModel?.providerId || savedProvider.providerId);
-      setActiveModelId(sessionModel?.id || savedModel.id);
-      return;
-    }
-
-    const session = {
-      id: createId(),
-      title: "New chat",
-      providerId: savedProvider.providerId,
-      providerName: savedProvider.providerName,
-      modelId: savedModel.id,
-      modelName: savedModel.name,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      messages: [],
-    };
-
-    initializedRef.current = true;
-    setSessions([session]);
-    setActiveSessionId(session.id);
-    setActiveProviderId(savedProvider.providerId);
-    setActiveModelId(savedModel.id);
-  }, [isHydrated, loadingData, providerGroups, modelIndex, sessions, activeSessionId, activeProviderId, activeModelId]);
-
-  const updateSession = (sessionId, updater) => {
-    setSessions((prev) => prev.map((session) => (session.id === sessionId ? updater(cloneSession(session)) : session)));
-  };
-
-  const ensureSessionForModel = (model) => {
-    if (!model) return null;
-    return {
-      id: createId(),
-      title: "New chat",
-      providerId: model.providerId,
-      providerName: model.providerName,
-      modelId: model.id,
-      modelName: model.name,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      messages: [],
-    };
-  };
-
-  const handleNewChat = () => {
-    if (!activeModel) return;
-    const session = ensureSessionForModel(activeModel);
-    if (!session) return;
-    setSessions((prev) => [session, ...prev]);
-    setActiveSessionId(session.id);
-    setActiveProviderId(session.providerId);
-    setActiveModelId(session.modelId);
-    setDraft("");
-    setAttachments([]);
-    setStreamingMessageId("");
-    setStreamingText("");
-  };
-
-  const handleSelectSession = (sessionId) => {
-    const session = sessions.find((item) => item.id === sessionId);
-    if (!session) return;
-    setActiveSessionId(sessionId);
-    setActiveProviderId(session.providerId || activeProviderId);
-    setActiveModelId(session.modelId || activeModelId);
-    setHistoryOpen(false);
-  };
-
-  const handleDeleteCurrentChat = () => {
-    if (!activeSessionId) return;
-    const nextSessions = sessions.filter((session) => session.id !== activeSessionId);
-    const fallback = nextSessions[0] || null;
-    setSessions(nextSessions);
-    if (fallback) {
-      setActiveSessionId(fallback.id);
-      setActiveProviderId(fallback.providerId);
-      setActiveModelId(fallback.modelId);
-    } else {
-      setActiveSessionId("");
-      setActiveProviderId("");
-      setActiveModelId("");
-    }
-  };
-
-  const handleSelectProvider = (providerId) => {
-    const group = providerGroups.find((item) => item.providerId === providerId);
-    if (!group || group.models.length === 0) return;
-    const nextModel = group.models[0];
-
-    const current = sessions.find((session) => session.id === activeSessionId);
-    if (current && current.messages.length > 0) {
-      const session = ensureSessionForModel(nextModel);
-      if (!session) return;
-      setSessions((prev) => [session, ...prev]);
-      setActiveSessionId(session.id);
-    } else if (current) {
-      setSessions((prev) => prev.map((item) => (item.id === current.id ? {
-        ...item,
-        providerId: group.providerId,
-        providerName: group.providerName,
-        modelId: nextModel.id,
-        modelName: nextModel.name,
-      } : item)));
-      setActiveSessionId(current.id);
-    }
-
-    setActiveProviderId(group.providerId);
-    setActiveModelId(nextModel.id);
-    setModelMenuOpen(false);
-  };
-
-  const handleSelectModel = (modelId) => {
-    const model = modelIndex.get(modelId);
-    if (!model) return;
-
-    const current = sessions.find((session) => session.id === activeSessionId);
-    if (current && current.messages.length > 0) {
-      const session = ensureSessionForModel(model);
-      if (!session) return;
-      setSessions((prev) => [session, ...prev]);
-      setActiveSessionId(session.id);
-    } else if (current) {
-      setSessions((prev) => prev.map((item) => (item.id === current.id ? {
-        ...item,
-        providerId: model.providerId,
-        providerName: model.providerName,
-        modelId: model.id,
-        modelName: model.name,
-      } : item)));
-      setActiveSessionId(current.id);
-    } else {
-      const session = ensureSessionForModel(model);
-      if (!session) return;
-      setSessions((prev) => [session, ...prev]);
-      setActiveSessionId(session.id);
-    }
-
-    setActiveProviderId(model.providerId);
-    setActiveModelId(model.id);
-    setModelMenuOpen(false);
-  };
-
-  const handleAttachFiles = async (event) => {
-    const files = Array.from(event.target.files || []);
-    if (files.length === 0) return;
-
-    const images = files.filter((file) => file.type.startsWith("image/"));
-    if (images.length === 0) {
-      event.target.value = "";
-      return;
-    }
-
-    const converted = await Promise.all(images.map(async (file) => ({
-      id: createId(),
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      dataUrl: await fileToDataUrl(file),
-    })));
-
-    setAttachments((prev) => [...prev, ...converted]);
-    event.target.value = "";
-  };
-
-  const removeAttachment = (attachmentId) => {
-    setAttachments((prev) => prev.filter((attachment) => attachment.id !== attachmentId));
-  };
-
-  const handleStop = () => {
-    abortRef.current?.abort();
-  };
-
-  const finalizeSessionTitle = (sessionId, titleSeed) => {
-    const title = makeSessionTitle(titleSeed);
-    updateSession(sessionId, (session) => ({
-      ...session,
-      title: session.title === "New chat" ? title : session.title,
-      updatedAt: new Date().toISOString(),
-    }));
-  };
-
-  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 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;
-      sessionId = session.id;
-      setSessions((prev) => [session, ...prev]);
-      setActiveSessionId(sessionId);
-    }
-
-    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 = {
-      id: assistantMessageId,
-      role: "assistant",
-      content: "",
-      createdAt: new Date().toISOString(),
-      status: "streaming",
-    };
-
-    const baseMessages = regenerate
-      ? [...(session.messages || [])]
-      : [...(session.messages || []), userMessage];
-    const nextMessages = [...baseMessages, assistantMessage];
-    setSessions((prev) => prev.map((item) => (item.id === sessionId ? {
-      ...item,
-      providerId: model.providerId,
-      providerName: model.providerName,
-      modelId: model.id,
-      modelName: model.name,
-      messages: nextMessages,
-      updatedAt: new Date().toISOString(),
-      title: item.title === "New chat" ? makeSessionTitle(userText) : item.title,
-    } : item)));
-    if (!regenerate) {
-      setDraft("");
-      setAttachments([]);
-      if (textareaRef.current) textareaRef.current.style.height = "auto";
-    }
-    setIsSending(true);
-    setStreamingMessageId(assistantMessageId);
-    setStreamingText("");
-    abortRef.current?.abort();
-    abortRef.current = new AbortController();
-
-    const requestMessages = nextMessages
-      .filter((message) => !(message.role === "assistant" && message.id === assistantMessageId))
-      .map((message) => ({
-        role: message.role,
-        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",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "text/event-stream",
-        },
-        body: JSON.stringify({
-          model: model.requestModel || model.id,
-          messages: messagesForApi,
-          stream: true,
-          temperature,
-        }),
-        signal: abortRef.current.signal,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(textValue(errorData.error || errorData.message || `Request failed (${response.status})`));
-      }
-
-      const reader = response.body?.getReader();
-      if (!reader) {
-        const data = await response.json().catch(() => ({}));
-        const fallbackText = textValue(data?.choices?.[0]?.message?.content || data?.output_text || data?.error || data?.message || "");
-        updateSession(sessionId, (currentSession) => ({
-          ...currentSession,
-          messages: currentSession.messages.map((message) => (message.id === assistantMessageId ? { ...message, content: fallbackText, status: "done" } : message)),
-          updatedAt: new Date().toISOString(),
-        }));
-        return;
-      }
-
-      const decoder = new TextDecoder();
-      let buffer = "";
-      let assistantText = "";
-
-      while (true) {
-        const { value, done } = await reader.read();
-        if (done) break;
-
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split(/\r?\n/);
-        buffer = lines.pop() || "";
-
-        for (const line of lines) {
-          const trimmed = line.trim();
-          if (!trimmed.startsWith("data:")) continue;
-
-          const payload = trimmed.slice(5).trim();
-          if (!payload || payload === "[DONE]") continue;
-
-          try {
-            const chunk = JSON.parse(payload);
-            const text = readAssistantText(chunk);
-            if (!text) continue;
-
-            assistantText += text;
-            setStreamingText(assistantText);
-            updateSession(sessionId, (currentSession) => ({
-              ...currentSession,
-              messages: currentSession.messages.map((message) => (message.id === assistantMessageId ? { ...message, content: assistantText, status: "streaming" } : message)),
-              updatedAt: new Date().toISOString(),
-            }));
-          } catch {
-            // Ignore malformed chunks.
-          }
-        }
-      }
-
-      updateSession(sessionId, (currentSession) => ({
-        ...currentSession,
-        messages: currentSession.messages.map((message) => (message.id === assistantMessageId ? { ...message, content: assistantText || message.content, status: "done" } : message)),
-        updatedAt: new Date().toISOString(),
-      }));
-      finalizeSessionTitle(sessionId, userText);
-    } catch (error) {
-      if (error.name === "AbortError") {
-        updateSession(sessionId, (currentSession) => ({
-          ...currentSession,
-          messages: currentSession.messages.map((message) => (message.id === assistantMessageId ? {
-            ...message,
-            content: message.content || "Stopped",
-            status: "stopped",
-          } : message)),
-          updatedAt: new Date().toISOString(),
-        }));
-        finalizeSessionTitle(sessionId, userText);
-      } else {
-        const errorText = textValue(error?.message || error);
-        updateSession(sessionId, (currentSession) => ({
-          ...currentSession,
-          messages: currentSession.messages.map((message) => (message.id === assistantMessageId ? { ...message, content: message.content || `Error: ${errorText}`, status: "error" } : message)),
-          updatedAt: new Date().toISOString(),
-        }));
-      }
-    } finally {
-      setIsSending(false);
-      setStreamingMessageId("");
-      setStreamingText("");
-      abortRef.current = null;
-    }
-  };
-
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      if (canSend) sendMessage();
-    }
-  };
-
-  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 h-full min-h-0 min-w-0 flex-1 overflow-hidden bg-bg text-text-main">
-      {/* ── Session sidebar (Open WebUI / ChatGPT style) ── */}
-      <aside
-        id="playground-history"
-        className={`${historyOpen ? "flex" : "hidden"} fixed inset-y-0 left-0 z-30 w-[min(85vw,260px)] shrink-0 flex-col border-r border-border-subtle bg-surface/95 backdrop-blur-xl lg:static lg:z-auto lg:flex lg:w-[260px] lg:bg-surface/60`}
-      >
-        <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-11 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>
-
-        <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="space-y-0.5">
-              {sessionItems.map((session) => {
-                const isActive = session.id === activeSessionId;
-                const latestMessage =
-                  [...(session.messages || [])].reverse().find((m) => m.role === "user") ||
-                  session.messages?.[0];
-                return (
-                  <button
-                    key={session.id}
-                    type="button"
-                    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"
-                    }`}
-                  >
-                    <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-11 items-center justify-center rounded-[10px] border border-border text-text-muted hover:bg-surface-2"
-            aria-label="Open chats"
-            aria-expanded={historyOpen}
-            aria-controls="playground-history"
-          >
-            <span className="material-symbols-outlined text-[20px]">history</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>
-          <button
-            type="button"
-            onClick={handleNewChat}
-            disabled={!activeModel}
-            className="flex size-11 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 role="alert" 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}
-
-        {/* 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>
-              <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 isError = message.status === "error";
-                const isStopped = message.status === "stopped";
-                const isLastAssistant =
-                  isAssistant &&
-                  index === currentMessages.length - 1 &&
-                  message.status !== "streaming";
-
-                return (
-                  <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>
-                      <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}
-
-                        {isStopped ? (
-                          <p className="mt-2 text-xs text-text-muted">Generation stopped</p>
-                        ) : null}
-                        {isAssistant && content && !isStreaming ? (
-                          <div className="mt-2 flex items-center gap-1 opacity-100 transition sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within: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>
-
-        {/* ── 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="mb-2 flex flex-wrap gap-2">
-                {attachments.map((attachment) => (
-                  <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="rounded-2xl border border-border-subtle bg-surface-2/80 shadow-soft ring-1 ring-border-subtle focus-within:border-primary/50 focus-within:ring-primary/20 transition">
-              <textarea
-                ref={textareaRef}
-                aria-label="Message"
-                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-11 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-11 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"
-                      aria-label="Chat settings"
-                      aria-expanded={settingsOpen}
-                      aria-controls="playground-chat-settings"
-                    >
-                      <span className="material-symbols-outlined text-[18px]">tune</span>
-                      <span className="hidden sm:inline tabular-nums">{temperature.toFixed(1)}</span>
-                    </button>
-                    {settingsOpen ? (
-                      <div id="playground-chat-settings" 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>
-
-                  {/* 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}
-                      aria-label={`Choose model, currently ${modelLabel}`}
-                      aria-haspopup="listbox"
-                      aria-expanded={modelMenuOpen}
-                      aria-controls="playground-model-menu"
-                      className="inline-flex h-11 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 id="playground-model-menu" role="listbox" aria-label="Models" 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-[16px] 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"
-                                        role="option"
-                                        aria-selected={isActive}
-                                        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-11 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-11 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>
-
-            <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>
-  );
-}