@circuitwall/jarela 2.4.0 → 2.5.0

package/app/api/v1/providers/[provider]/models/route.ts

@@ -1,7 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
 import { getProvider } from "@/lib/providers";
+import { modelCapabilities } from "@/lib/providers/capabilities";
 import { listModelConfigs, getModelParams } from "@/lib/stores/model-config";
 import type { ProviderCatalogModel, ProviderParams } from "@/lib/providers/types";
+import { validateBody } from "@/lib/api/responses";
 import {
   getKnownContextLength,
   getKnownMaxOutputTokens,
@@ -26,9 +29,12 @@ export interface CatalogModel {
 
 type Params = { params: Promise<{ provider: string }> };
 
-// Live provider catalogs (OpenAI, GitHub Copilot) hit external APIs on every
-// call; static ones still cost JSON construction. Cache per-provider for a
-// short TTL so flipping panels / model browsers doesn't re-hit upstream.
+const CatalogBody = z.object({
+  params: z.record(z.string(), z.unknown()).optional(),
+});
+
+// Live provider catalogs hit external APIs. Cache per-provider briefly so
+// opening the model browser repeatedly doesn't re-hit upstream.
 const PROVIDER_CATALOG_TTL_MS = 10 * 60 * 1000;
 type CachedCatalog = { data: CatalogModel[]; fetchedAt: number };
 const catalogCache = new Map<string, CachedCatalog>();
@@ -74,10 +80,11 @@ function catalogErrorResponse(err: unknown): NextResponse {
 // these responses since they're keyed on user-supplied secrets.
 export async function POST(req: NextRequest, { params }: Params) {
   const { provider } = await params;
-  let body: { params?: ProviderParams } = {};
-  try { body = await req.json(); } catch { /* empty body is fine */ }
+  const body = await validateBody(req, CatalogBody);
+  if (body instanceof NextResponse) return body;
   try {
     const models = await fetchCatalog(provider, body.params);
+    catalogCache.delete(provider);
     return NextResponse.json(models, { headers: { "Cache-Control": "no-store" } });
   } catch (err) {
     return catalogErrorResponse(err);
@@ -86,15 +93,70 @@ export async function POST(req: NextRequest, { params }: Params) {
 
 async function fetchCatalog(provider: string, overrides?: ProviderParams): Promise<CatalogModel[]> {
   switch (provider) {
-    case "openai":  return fetchOpenAICatalog();
+    case "openai":  return fetchOpenAICatalog(overrides);
     case "github-copilot": return fetchGitHubCopilotCatalog();
-    case "anthropic": return anthropicKnownModels();
-    case "gemini":  return geminiKnownModels();
-    case "deepseek": return deepseekKnownModels();
+    case "anthropic": return fetchAnthropicCatalog(overrides);
+    case "gemini":  return fetchGeminiCatalog(overrides);
+    case "deepseek": return fetchDeepseekCatalog(overrides);
     default: return fetchExternalCatalog(provider, overrides);
   }
 }
 
+const PROVIDER_API_KEY_ENV: Record<string, string> = {
+  anthropic: "ANTHROPIC_API_KEY",
+  openai: "OPENAI_API_KEY",
+  gemini: "GEMINI_API_KEY",
+  deepseek: "DEEPSEEK_API_KEY",
+};
+
+function catalogParamsCandidates(provider: string, overrides?: ProviderParams): ProviderParams[] {
+  const envKey = process.env[PROVIDER_API_KEY_ENV[provider] ?? ""];
+  const configs = listModelConfigs().filter((cfg) => cfg.provider === provider);
+  const candidates = configs.map((cfg) => {
+    const params = { ...getModelParams(cfg), ...(overrides ?? {}) };
+    if (!params.api_key && envKey) params.api_key = envKey;
+    return params;
+  });
+
+  if (overrides) {
+    const params = { ...overrides };
+    if (!params.api_key && envKey) params.api_key = envKey;
+    candidates.push(params);
+  }
+  if (candidates.length === 0 && envKey) candidates.push({ api_key: envKey });
+  if (candidates.length === 0) candidates.push({});
+  return candidates;
+}
+
+async function fetchConfiguredCatalog(
+  provider: string,
+  overrides: ProviderParams | undefined,
+  fetcher: (params: ProviderParams, apiKey: string) => Promise<CatalogModel[]>,
+  fallback: () => CatalogModel[],
+): Promise<CatalogModel[]> {
+  const candidates = catalogParamsCandidates(provider, overrides)
+    .filter((params): params is ProviderParams & { api_key: string } =>
+      typeof params.api_key === "string" && params.api_key.length > 0,
+    );
+  if (candidates.length === 0) return fallback();
+
+  let lastErr: unknown;
+  for (const params of candidates) {
+    try {
+      return await fetcher(params, params.api_key);
+    } catch (err) {
+      lastErr = err;
+    }
+  }
+  throw lastErr ?? new Error(`${provider} catalog request failed`);
+}
+
+async function requestCatalogJson<T>(provider: string, url: URL, init: RequestInit): Promise<T> {
+  const res = await fetch(url, { ...init, signal: AbortSignal.timeout(15_000) });
+  if (!res.ok) throw new Error(`${provider} catalog error: ${res.status}`);
+  return res.json() as Promise<T>;
+}
+
 async function fetchExternalCatalog(providerName: string, overrides?: ProviderParams): Promise<CatalogModel[]> {
   let provider;
   try {
@@ -132,40 +194,197 @@ async function fetchExternalCatalog(providerName: string, overrides?: ProviderPa
 
 // ── OpenAI ────────────────────────────────────────────────────────────────────
 
-async function fetchOpenAICatalog(): Promise<CatalogModel[]> {
-  const cfg = listModelConfigs().find((c) => c.provider === "openai");
-  if (!cfg) throw new Error("No OpenAI model config found.");
-  const params = getModelParams(cfg);
-  const apiKey = (params.api_key as string | undefined) ?? process.env.OPENAI_API_KEY;
-  if (!apiKey) throw new Error("OpenAI: no api_key configured.");
-
-  const res = await fetch("https://api.openai.com/v1/models", {
-    headers: { Authorization: `Bearer ${apiKey}` },
+async function fetchOpenAICatalog(overrides?: ProviderParams): Promise<CatalogModel[]> {
+  return fetchConfiguredCatalog("openai", overrides, async (params, apiKey) => {
+    const url = endpointUrl(params.base_url, "https://api.openai.com/v1", "/models");
+    const data = await requestCatalogJson<{ data?: Array<{ id: string }> }>("OpenAI", url, {
+      headers: {
+        ...params.extra_headers,
+        Authorization: "Bearer " + apiKey,
+      },
+    });
+    const chatPrefixes = ["gpt-", "o1", "o3", "o4", "chatgpt-"];
+    return (data.data ?? [])
+      .filter((m) => chatPrefixes.some((p) => m.id.startsWith(p)))
+      .map((m): CatalogModel => ({
+        id: m.id,
+        context_length: getKnownContextLength("openai", m.id),
+        max_output_tokens: getKnownMaxOutputTokens("openai", m.id),
+        hosted_on: "azure/openai",
+        capabilities: {
+          vision: m.id.includes("vision") || m.id.startsWith("gpt-4"),
+          tools: true,
+          streaming: true,
+          json_mode: true,
+          web_search: false,
+          audio: m.id.includes("audio") || m.id.startsWith("gpt-4o") || m.id.startsWith("gpt-5"),
+          files: m.id.startsWith("gpt-4") || m.id.startsWith("gpt-5") || m.id.startsWith("o"),
+        },
+      }))
+      .sort((a, b) => a.id.localeCompare(b.id));
+  }, () => {
+    throw new Error("OpenAI: no api_key configured.");
   });
-  if (!res.ok) throw new Error(`OpenAI catalog error: ${res.status}`);
-  const data = await res.json() as { data: Array<{ id: string }> };
-
-  const chatPrefixes = ["gpt-", "o1", "o3", "o4", "chatgpt-"];
-  const chatModels = data.data
-    .filter((m) => chatPrefixes.some((p) => m.id.startsWith(p)))
-    .map((m): CatalogModel => ({
-      id: m.id,
-      context_length: getKnownContextLength("openai", m.id),
-      max_output_tokens: getKnownMaxOutputTokens("openai", m.id),
-      hosted_on: "azure/openai",
-      capabilities: {
-        vision:    m.id.includes("vision") || m.id.startsWith("gpt-4"),
-        tools:     true,
-        streaming: true,
-        json_mode: true,
-        web_search: false,
-        audio:     m.id.includes("audio") || m.id.startsWith("gpt-4o") || m.id.startsWith("gpt-5"),
-        files:     m.id.startsWith("gpt-4") || m.id.startsWith("gpt-5") || m.id.startsWith("o"),
+}
+
+async function fetchAnthropicCatalog(overrides?: ProviderParams): Promise<CatalogModel[]> {
+  return fetchConfiguredCatalog("anthropic", overrides, async (params, apiKey) => {
+    const url = endpointUrl(params.base_url, "https://api.anthropic.com", "/v1/models");
+    url.searchParams.set("limit", "1000");
+    const models: Array<{
+      id: string;
+      max_input_tokens?: number | null;
+      max_tokens?: number | null;
+      capabilities?: {
+        image_input?: { supported?: boolean };
+        pdf_input?: { supported?: boolean };
+        structured_outputs?: { supported?: boolean };
+        server_tools?: { web_search?: { supported?: boolean } };
+      };
+    }> = [];
+    let afterId: string | undefined;
+
+    do {
+      const pageUrl = new URL(url);
+      if (afterId) pageUrl.searchParams.set("after_id", afterId);
+      const page = await requestCatalogJson<{
+        data?: typeof models;
+        has_more?: boolean;
+        last_id?: string | null;
+      }>("Anthropic", pageUrl, {
+        headers: {
+          ...params.extra_headers,
+          "x-api-key": apiKey,
+          "anthropic-version": "2023-06-01",
+        },
+      });
+      models.push(...(page.data ?? []));
+      if (page.has_more && !page.last_id) throw new Error("Anthropic catalog response is missing its next-page cursor");
+      if (page.has_more && page.last_id === afterId) throw new Error("Anthropic catalog pagination did not advance");
+      afterId = page.has_more ? page.last_id ?? undefined : undefined;
+    } while (afterId);
+
+    return models.map((model): CatalogModel => {
+      const known = modelCapabilities("anthropic", model.id);
+      const vision = model.capabilities?.image_input?.supported ?? known.vision;
+      return {
+        id: model.id,
+        context_length: model.max_input_tokens ?? getKnownContextLength("anthropic", model.id),
+        max_output_tokens: model.max_tokens ?? getKnownMaxOutputTokens("anthropic", model.id),
+        hosted_on: "anthropic",
+        capabilities: {
+          vision,
+          tools: known.tools,
+          streaming: known.streaming,
+          json_mode: model.capabilities?.structured_outputs?.supported ?? known.json_mode,
+          web_search: model.capabilities?.server_tools?.web_search?.supported ?? known.web_search,
+          audio: known.audio,
+          files: model.capabilities?.pdf_input?.supported ?? known.files,
+        },
+      };
+    });
+  }, anthropicKnownModels);
+}
+
+async function fetchGeminiCatalog(overrides?: ProviderParams): Promise<CatalogModel[]> {
+  return fetchConfiguredCatalog("gemini", overrides, async (params, apiKey) => {
+    const url = endpointUrl(
+      params.gemini_native_base_url,
+      "https://generativelanguage.googleapis.com/v1beta",
+      "/models",
+    );
+    url.searchParams.set("pageSize", "1000");
+    const models: Array<{
+      name: string;
+      inputTokenLimit?: number;
+      outputTokenLimit?: number;
+      supportedGenerationMethods?: string[];
+    }> = [];
+    let pageToken: string | undefined;
+
+    do {
+      const pageUrl = new URL(url);
+      if (pageToken) pageUrl.searchParams.set("pageToken", pageToken);
+      const page = await requestCatalogJson<{
+        models?: typeof models;
+        nextPageToken?: string;
+      }>("Gemini", pageUrl, { headers: { "x-goog-api-key": apiKey } });
+      models.push(...(page.models ?? []));
+      if (page.nextPageToken && page.nextPageToken === pageToken) {
+        throw new Error("Gemini catalog pagination did not advance");
+      }
+      pageToken = page.nextPageToken;
+    } while (pageToken);
+
+    return models
+      .map((model): CatalogModel | null => {
+        const id = model.name.replace(/^models\//, "");
+        if (!id.startsWith("gemini-") ||
+            !model.supportedGenerationMethods?.includes("generateContent")) return null;
+        return {
+          id,
+          context_length: model.inputTokenLimit ?? getKnownContextLength("gemini", id),
+          max_output_tokens: model.outputTokenLimit ?? getKnownMaxOutputTokens("gemini", id),
+          hosted_on: "google",
+          capabilities: modelCapabilities("gemini", id),
+        };
+      })
+      .filter((model): model is CatalogModel => model !== null)
+      .sort((a, b) => a.id.localeCompare(b.id));
+  }, geminiKnownModels);
+}
+
+async function fetchDeepseekCatalog(overrides?: ProviderParams): Promise<CatalogModel[]> {
+  return fetchConfiguredCatalog("deepseek", overrides, async (params, apiKey) => {
+    const url = endpointUrl(params.base_url, "https://api.deepseek.com", "/models");
+    const data = await requestCatalogJson<{
+      data?: Array<{
+        id: string;
+        context_window?: number;
+        max_output_tokens?: number;
+        input_modalities?: string[];
+      }>;
+    }>("DeepSeek", url, {
+      headers: {
+        ...params.extra_headers,
+        Authorization: "Bearer " + apiKey,
       },
-    }))
-    .sort((a, b) => a.id.localeCompare(b.id));
+    });
+    return (data.data ?? []).map((model): CatalogModel => {
+      const known = modelCapabilities("deepseek", model.id);
+      const vision = model.input_modalities?.includes("image") ?? known.vision;
+      return {
+        id: model.id,
+        context_length: model.context_window ?? getKnownContextLength("deepseek", model.id),
+        max_output_tokens: model.max_output_tokens ?? getKnownMaxOutputTokens("deepseek", model.id),
+        hosted_on: "deepseek",
+        capabilities: {
+          ...known,
+          vision,
+          audio: model.input_modalities?.includes("audio") ?? known.audio,
+        },
+      };
+    });
+  }, deepseekKnownModels);
+}
 
-  return chatModels;
+function endpointUrl(baseUrl: unknown, defaultBaseUrl: string, path: string): URL {
+  const base = typeof baseUrl === "string" && baseUrl.trim() ? baseUrl.trim() : defaultBaseUrl;
+  let url: URL;
+  try {
+    url = new URL(base);
+  } catch {
+    throw new Error("Provider base URL must be a valid absolute URL");
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:") {
+    throw new Error("Provider base URL must use HTTP or HTTPS");
+  }
+  const normalizedPath = url.pathname.replace(/\/+$/, "");
+  const suffix = path === "/v1/models" && normalizedPath.endsWith("/v1") ? "/models" : path;
+  url.pathname = `${normalizedPath}${suffix}` || "/";
+  url.search = "";
+  url.hash = "";
+  return url;
 }
 
 // ── GitHub Copilot ────────────────────────────────────────────────────────────

package/app/api/v1/threads/[thread_id]/route.ts

@@ -7,6 +7,7 @@
  */
 
 import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
 import {
   deleteThread,
   getMessagesAfter,
@@ -23,6 +24,7 @@ import { parseStoredTopics } from "@/lib/agents/conversation-summary";
 import { getThreadActivity } from "@/lib/agents/thread-activity";
 import { getCheckpointer } from "@/lib/agents/checkpointer";
 import { errorMessage } from "@/lib/utils/error";
+import { errorResponse, noStoreJson } from "@/lib/api/responses";
 
 type Params = { params: Promise<{ thread_id: string }> };
 
@@ -41,6 +43,9 @@ export async function GET(req: NextRequest, { params }: Params) {
   if (!thread) return NextResponse.json({ error: "Thread not found" }, { status: 404 });
 
   const url = new URL(req.url);
+  const view = z.enum(["messages", "metadata"]).default("messages")
+    .safeParse(url.searchParams.get("view") ?? undefined);
+  if (!view.success) return errorResponse("Invalid thread view", 400);
   const limit = Math.max(1, Math.min(200, Number(url.searchParams.get("limit")) || DEFAULT_PAGE));
   // Cursors are the message `seq` (SQLite rowid) — a monotonic order key,
   // not a timestamp — so pagination can't skip/duplicate rows on a
@@ -48,28 +53,6 @@ export async function GET(req: NextRequest, { params }: Params) {
   const before = parseSeqParam(url.searchParams.get("before"));
   const after  = parseSeqParam(url.searchParams.get("after"));
 
-  // `after` is a forward-fetch shortcut: caller (typically ChatView's
-  // run-completion handler) already has the recent messages and just wants
-  // the freshly-persisted ones. has_more is fixed to false because the
-  // forward window is not paginated — caller already has everything older.
-  let messages: MessageRow[];
-  let has_more: boolean;
-  if (after !== undefined) {
-    messages = getMessagesAfter(thread_id, after, limit);
-    has_more = false;
-  } else {
-    const page = getMessagesPage(thread_id, limit, before);
-    messages = page.messages;
-    has_more = page.has_more;
-  }
-
-  // Attach per-assistant-turn usage so the chat UI can render a context
-  // utilisation bar without an extra round-trip per message. User turns
-  // and legacy assistant rows (pre-message_usage table) simply omit the
-  // field.
-  const assistantIds = messages.filter((m) => m.role === "assistant").map((m) => m.msg_id);
-  const usageById = getMessageUsageByIds(assistantIds);
-
   // Resolve the agent's effective context-window size once for the whole
   // thread. The bar scales against this cap so the visual matches the
   // budget the agent applies at run time.
@@ -82,7 +65,7 @@ export async function GET(req: NextRequest, { params }: Params) {
     DEFAULT_CONTEXT_WINDOW_TOKENS,
   );
 
-  return NextResponse.json({
+  const metadata = {
     ...thread,
     warm_summary_topics: parseStoredTopics(thread.warm_summary_topics),
     warm_channel_summaries: currentChannelSummaries(thread_id, thread.hot_since_seq),
@@ -91,6 +74,26 @@ export async function GET(req: NextRequest, { params }: Params) {
     pending_hot_since_seq: pendingCompactionBoundarySeq(thread_id),
     manual_compaction_pending: isManualCompactionRunning(thread_id),
     activity: getThreadActivity(thread_id),
+  };
+  if (view.data === "metadata") return noStoreJson(metadata);
+
+  // `after` is a forward-fetch shortcut: caller already has the recent
+  // messages and just wants the freshly persisted ones.
+  let messages: MessageRow[];
+  let has_more: boolean;
+  if (after !== undefined) {
+    messages = getMessagesAfter(thread_id, after, limit);
+    has_more = false;
+  } else {
+    const page = getMessagesPage(thread_id, limit, before);
+    messages = page.messages;
+    has_more = page.has_more;
+  }
+  const assistantIds = messages.filter((m) => m.role === "assistant").map((m) => m.msg_id);
+  const usageById = getMessageUsageByIds(assistantIds);
+
+  return noStoreJson({
+    ...metadata,
     // No server-side filtering: clients receive every message with its
     // `category` tag and apply the chat-panel filter toolbar on the
     // render side. Keeping the raw transcript over the wire means audit

package/app/globals.css

@@ -115,6 +115,23 @@
   }
 }
 
+html[data-accent-color="blue"] {
+  --color-accent: #2563eb;
+  --color-accent-hover: #1d4ed8;
+}
+html[data-accent-color="teal"] {
+  --color-accent: #0f766e;
+  --color-accent-hover: #115e59;
+}
+html[data-accent-color="violet"] {
+  --color-accent: #6d28d9;
+  --color-accent-hover: #5b21b6;
+}
+html[data-accent-color="rose"] {
+  --color-accent: #be123c;
+  --color-accent-hover: #9f1239;
+}
+
 /* Tailwind v4 changed the default border colour from gray-200 to
  * currentColor. Restore the v3 behaviour so existing `border` shorthand
  * (without an explicit colour) keeps rendering as the themed divider. */
@@ -195,31 +212,27 @@ body {
  *                      pronounced top sheen.                             *
  * ---------------------------------------------------------------------- */
 .glass {
-  background-color: rgba(24, 24, 27, 0.32);
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.07) 0%,
-    transparent 65%
-  );
+  background-color: rgba(24, 24, 27, 0.38);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.035) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 68%);
   -webkit-backdrop-filter: blur(24px) saturate(2);
   backdrop-filter: blur(24px) saturate(2);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
-    inset 0 -1px 0 0 rgba(255, 255, 255, 0.04),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.06),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
 }
 .glass-elevated {
-  background-color: rgba(24, 24, 27, 0.42);
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.09) 0%,
-    transparent 60%
-  );
+  background-color: rgba(24, 24, 27, 0.5);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
   -webkit-backdrop-filter: blur(32px) saturate(2.1);
   backdrop-filter: blur(32px) saturate(2.1);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
     0 24px 60px -12px rgba(0, 0, 0, 0.5);
 }
 .glass-bubble {
@@ -253,15 +266,19 @@ body {
  * inner edge flips to a hairline of slate so the glass reads as raised
  * rather than dissolved into the page. */
 [data-theme="light"] .glass {
-  background-color: rgba(255, 255, 255, 0.55);
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 65%);
+  background-color: rgba(255, 255, 255, 0.48);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 65%);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
-    inset 0 0 0 1px rgba(15, 23, 42, 0.07);
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.98),
+    inset 0 0 0 1px rgba(15, 23, 42, 0.09);
 }
 [data-theme="light"] .glass-elevated {
-  background-color: rgba(255, 255, 255, 0.65);
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
+  background-color: rgba(255, 255, 255, 0.58);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.22) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, transparent 60%);
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
     inset 0 0 0 1px rgba(15, 23, 42, 0.07),
@@ -276,15 +293,19 @@ body {
 }
 @media (prefers-color-scheme: light) {
   [data-theme="system"] .glass {
-    background-color: rgba(255, 255, 255, 0.55);
-    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 65%);
+    background-color: rgba(255, 255, 255, 0.48);
+    background-image:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 34%, transparent 68%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 65%);
     box-shadow:
-      inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
-      inset 0 0 0 1px rgba(15, 23, 42, 0.07);
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.98),
+      inset 0 0 0 1px rgba(15, 23, 42, 0.09);
   }
   [data-theme="system"] .glass-elevated {
-    background-color: rgba(255, 255, 255, 0.65);
-    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
+    background-color: rgba(255, 255, 255, 0.58);
+    background-image:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.22) 34%, transparent 68%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, transparent 60%);
     box-shadow:
       inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
       inset 0 0 0 1px rgba(15, 23, 42, 0.07),
@@ -310,6 +331,75 @@ body {
   }
 }
 
+[data-surface-style="calm"] body {
+  background-image: none;
+}
+[data-surface-style="calm"] .dashboard-atmosphere {
+  display: none;
+}
+[data-surface-style="calm"] .glass,
+[data-surface-style="calm"] .glass-elevated {
+  -webkit-backdrop-filter: blur(14px) saturate(1.2);
+  backdrop-filter: blur(14px) saturate(1.2);
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 65%);
+}
+[data-surface-style="calm"] .glass-bubble,
+[data-surface-style="calm"] .glass-bubble-accent {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background-image: none;
+}
+[data-surface-style="calm"] .glass,
+[data-surface-style="calm"] .glass-elevated {
+  background-color: color-mix(in srgb, var(--color-surface-2) 78%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent);
+}
+[data-surface-style="calm"] .glass-elevated {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent),
+    0 12px 32px -16px rgba(0, 0, 0, 0.35);
+}
+[data-surface-style="calm"] .glass-bubble {
+  background-color: var(--color-surface-3);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 50%, transparent);
+}
+[data-surface-style="calm"] .glass-bubble-accent {
+  background-color: color-mix(in srgb, var(--color-accent) 82%, var(--color-surface-2));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent);
+}
+
+[data-surface-style="liquid"] .glass,
+[data-surface-style="liquid"] .glass-elevated {
+  background-color: color-mix(in srgb, var(--color-surface-2) 30%, transparent);
+  background-image:
+    radial-gradient(ellipse 120% 150% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 54%),
+    linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.035) 24%, transparent 50%, color-mix(in srgb, var(--color-accent) 8%, transparent) 100%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 68%);
+  -webkit-backdrop-filter: blur(22px) saturate(1.65) contrast(1.06);
+  backdrop-filter: blur(22px) saturate(1.65) contrast(1.06);
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.48),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.08),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
+    0 8px 24px -18px rgba(0, 0, 0, 0.45);
+}
+[data-surface-style="liquid"] .glass-elevated {
+  background-color: color-mix(in srgb, var(--color-surface-2) 38%, transparent);
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.56),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
+    0 24px 60px -12px rgba(0, 0, 0, 0.42),
+    0 0 30px -22px color-mix(in srgb, var(--color-accent) 40%, transparent);
+}
+@supports not (backdrop-filter: blur(1px)) {
+  [data-surface-style="liquid"] .glass,
+  [data-surface-style="liquid"] .glass-elevated {
+    background-color: var(--color-surface-2);
+    background-image: none;
+    box-shadow: inset 0 0 0 1px var(--color-border);
+  }
+}
+
 /* Disable the blue tap flash on iOS / Android; we use explicit :active styles. */
 * { -webkit-tap-highlight-color: transparent; }
 

package/app/layout.tsx

@@ -90,6 +90,18 @@ const themeBootstrap = `(() => {
     var t = localStorage.getItem("jarela-theme");
     if (t !== "light" && t !== "dark" && t !== "system") t = "system";
     document.documentElement.setAttribute("data-theme", t);
+    var accent = localStorage.getItem("jarela-accent-color");
+    if (["blue", "teal", "violet", "rose"].includes(accent)) {
+      document.documentElement.setAttribute("data-accent-color", accent);
+    } else {
+      document.documentElement.removeAttribute("data-accent-color");
+    }
+    var surface = localStorage.getItem("jarela-surface-style");
+    if (surface === "calm" || surface === "ambient" || surface === "liquid") {
+      document.documentElement.setAttribute("data-surface-style", surface);
+    } else {
+      document.documentElement.removeAttribute("data-surface-style");
+    }
     // Collapse any media-scoped theme-color metas Next emits to a single tag
     // so the PWA window chrome matches the user's explicit choice (not just
     // prefers-color-scheme). ThemeContext keeps this in sync on change.