ltcai 4.4.0 → 4.5.1

package/frontend/src/api/client.ts

@@ -77,6 +77,21 @@ function workspaceHeaders(): Record<string, string> {
   return workspaceId ? { "X-Workspace-Id": workspaceId } : {};
 }
 
+function friendlyError(error: unknown, fallback: string) {
+  if (!error) return fallback;
+  const record = typeof error === "object" && error !== null ? error as Record<string, unknown> : null;
+  const detail = record?.detail;
+  if (typeof detail === "string") return detail;
+  const detailRecord = typeof detail === "object" && detail !== null ? detail as Record<string, unknown> : null;
+  if (detailRecord) {
+    const message = detailRecord.user_message || detailRecord.reason || detailRecord.action || detailRecord.status;
+    if (message) return String(message);
+  }
+  const message = record?.message || record?.error;
+  if (message) return String(message);
+  return fallback;
+}
+
 async function apiJson<T>(
   method: HttpMethod,
   path: string,
@@ -108,7 +123,7 @@ async function apiJson<T>(
       status: response.status,
       data: emptyFor(opts.shape),
       source: "unavailable",
-      error: error ? JSON.stringify(error) : response.statusText,
+      error: friendlyError(error, response.statusText),
     };
   } catch (err) {
     return {
@@ -163,6 +178,69 @@ export type ChatEventHandlers = {
   signal?: AbortSignal;
 };
 
+export type ModelPrepareHandlers = {
+  onProgress?: (data: Record<string, unknown>) => void;
+  onDone?: (data: Record<string, unknown>) => void;
+  onError?: (data: Record<string, unknown>) => void;
+  signal?: AbortSignal;
+};
+
+async function streamModelPrepare(
+  body: { model: string; engine?: string; allow_download?: boolean },
+  handlers: ModelPrepareHandlers = {},
+) {
+  const base = await apiBase();
+  const res = await fetch(`${base}/engines/prepare-model/stream`, {
+    method: "POST",
+    credentials: "same-origin",
+    signal: handlers.signal,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "text/event-stream",
+      ...workspaceHeaders(),
+    } satisfies HeadersInit,
+    body: JSON.stringify({ engine: null, allow_download: false, ...body }),
+  });
+  if (!res.ok || !res.body || !(res.headers.get("content-type") || "").includes("text/event-stream")) {
+    const payload = await res.json().catch(() => null);
+    const detail = payload?.detail && typeof payload.detail === "object" ? payload.detail : payload;
+    const message = friendlyError(payload, res.statusText);
+    handlers.onError?.({ status: "error", user_message: message, ...(detail || {}) });
+    return { source: "live" as const, ok: false, status: res.status, data: detail || {}, error: message };
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let eventName = "message";
+  let finalData: Record<string, unknown> = {};
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const parts = buffer.split("\n\n");
+    buffer = parts.pop() || "";
+    for (const part of parts) {
+      const lines = part.split("\n");
+      eventName = lines.find((item) => item.startsWith("event:"))?.slice(6).trim() || "message";
+      const dataLine = lines.find((item) => item.startsWith("data:"));
+      if (!dataLine) continue;
+      const raw = dataLine.slice(5).trim();
+      const data = raw ? JSON.parse(raw) as Record<string, unknown> : {};
+      if (eventName === "progress") handlers.onProgress?.(data);
+      if (eventName === "error") {
+        const detail = typeof data.detail === "object" && data.detail !== null ? data.detail as Record<string, unknown> : data;
+        handlers.onError?.(detail);
+        return { source: "live" as const, ok: false, status: Number(data.status_code || 500), data: detail, error: friendlyError({ detail }, "Model setup failed") };
+      }
+      if (eventName === "done") {
+        finalData = data;
+        handlers.onDone?.(data);
+      }
+    }
+  }
+  return { source: "live" as const, ok: true, status: 200, data: finalData };
+}
+
 async function streamChat(body: Record<string, unknown>, handlers: ChatEventHandlers = {}) {
   const base = await apiBase();
   const res = await fetch(`${base}/chat`, {
@@ -263,6 +341,10 @@ export const latticeApi = {
   connectFolder: (path: string) => post("/knowledge-graph/local/index", { path, approved: true, watch_enabled: true, consent: { approved: true, source: "desktop-spa" } }, {}),
   localWatchStop: (source_id: string) => post("/knowledge-graph/local/watch/stop", { source_id }, {}),
   models: () => get("/models", { catalog: [], loaded: [], recommended: [] }),
+  modelRecommendations: (engine = "local_mlx") => get("/models/recommendations", { profile: {}, recommendations: { models: [], families: [], counts: {} } }, { engine }),
+  installEngine: (engine: string) => post("/engines/install", { engine }, {}),
+  prepareModel: (model: string, engine?: string, allow_download = false) => post("/engines/prepare-model", { model, engine: engine || null, allow_download }, {}),
+  streamModelPrepare,
   loadModel: (model_id: string, engine?: string, allow_download = false) => post("/models/load", { model_id, engine: engine || null, allow_download }, {}),
   unloadModel: (model_id: string) => del(`/models/unload/${encodeURIComponent(model_id)}`, {}),
   embeddingsStatus: () => get("/api/embeddings/status", {}),

package/frontend/src/components/FirstRunGuide.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, CheckCircle2, Cpu, Download, Layers3, Library, PlayCircle, SlidersHorizontal, UserCircle, Users } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { useAppStore } from "@/store/appStore";
+import { go } from "@/routes";
+import { asArray } from "@/lib/utils";
+
+function readDismissed() {
+  try {
+    return localStorage.getItem("lattice.onboarding.dismissed") === "true";
+  } catch {}
+  return false;
+}
+
+export function FirstRunGuide() {
+  const [dismissed, setDismissed] = React.useState(readDismissed);
+  const mode = useAppStore((state) => state.mode);
+  const profile = useQuery({ queryKey: ["profile"], queryFn: latticeApi.profile });
+  const workspace = useQuery({ queryKey: ["workspaceOs"], queryFn: latticeApi.workspaceOs });
+  const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+  const recs = useQuery({ queryKey: ["modelRecommendations", "local_mlx"], queryFn: () => latticeApi.modelRecommendations("local_mlx") });
+  if (dismissed) return null;
+
+  const profileData = (profile.data?.data || {}) as Record<string, unknown>;
+  const workspaceData = (workspace.data?.data || {}) as Record<string, unknown>;
+  const registry = (workspaceData.workspace_registry || {}) as Record<string, unknown>;
+  const modelData = (models.data?.data || {}) as Record<string, unknown>;
+  const recommendationData = ((recs.data?.data as Record<string, unknown> | undefined)?.recommendations || {}) as Record<string, unknown>;
+  const currentModel = String(modelData.current || "");
+  const loadedModels = asArray(modelData.loaded);
+  const topPick = recommendationData.top_pick as Record<string, unknown> | undefined;
+  const compatProfiles = asArray<Record<string, unknown>>(modelData.compat_profiles);
+  const readyProfile = compatProfiles.some((item) => item.chat_compatible || item.quality_status === "ok" || item.quality_status === "degraded");
+
+  const steps = [
+    { label: "Make it yours", done: Boolean(profileData.email), icon: UserCircle, action: "account", detail: "Sign in or keep a local profile." },
+    { label: "Choose a space", done: Boolean(registry.active_workspace || workspaceData.active_workspace), icon: Users, action: "workspace-admin", detail: "Decide where memories belong." },
+    { label: "Meet your Mac", done: recs.isSuccess, icon: Cpu, action: "models", detail: "Let Lattice inspect what can run locally." },
+    { label: "Pick a brain", done: Boolean(topPick || currentModel), icon: Library, action: "models", detail: "Use the recommended local model." },
+    { label: "Install locally", done: Boolean(currentModel || loadedModels.length), icon: Download, action: "models", detail: "Download only with explicit consent." },
+    { label: "Try a question", done: Boolean(readyProfile || currentModel || loadedModels.length), icon: PlayCircle, action: "chat", detail: "Confirm the model can answer." },
+    { label: "Set the pace", done: Boolean(mode), icon: SlidersHorizontal, action: "settings", detail: "Stay Calm or switch deeper." },
+    { label: "Explore memory", done: true, icon: Layers3, action: "knowledge-graph", detail: "Open the living map." },
+  ];
+  const completed = steps.filter((step) => step.done).length;
+  const nextStep = steps.find((step) => !step.done) || steps[steps.length - 1];
+  const progress = Math.round((completed / steps.length) * 100);
+
+  return (
+    <section className="arrival-panel" aria-label="First 10 minutes">
+      <div className="arrival-copy">
+        <div className="page-kicker"><CheckCircle2 className="h-4 w-4" /> First 10 minutes</div>
+        <h2>Build your Digital Brain without guessing.</h2>
+        <p>
+          Start with a space, let Lattice recommend a private local model, then add the first pieces of knowledge.
+          Every step keeps the next action visible.
+        </p>
+        <div className="arrival-actions">
+          <Button onClick={() => go(nextStep.action)}>{nextStep.done ? "Open memory map" : `Continue: ${nextStep.label}`}</Button>
+          <Button variant="outline" onClick={() => go("models")}>Set up model</Button>
+          <Button variant="ghost" onClick={() => {
+            try { localStorage.setItem("lattice.onboarding.dismissed", "true"); } catch {}
+            setDismissed(true);
+          }}>
+            Hide
+          </Button>
+        </div>
+      </div>
+      <div className="journey-panel">
+        <div className="journey-head">
+          <div>
+            <div className="text-sm font-semibold">{completed} of {steps.length} ready</div>
+            <div className="text-xs text-muted-foreground">{mode === "basic" ? "Calm mode" : `${mode} mode`}</div>
+          </div>
+          <Badge variant={progress === 100 ? "success" : "warning"}>{progress}%</Badge>
+        </div>
+        <div className="journey-progress"><span style={{ width: `${progress}%` }} /></div>
+        <div className="journey-steps">
+          {steps.map((step) => {
+            const Icon = step.icon;
+            return (
+              <button key={step.label} onClick={() => go(step.action)} className="journey-step">
+                <span className="journey-icon"><Icon className="h-4 w-4" /></span>
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-semibold">{step.label}</span>
+                  <span className="block truncate text-xs text-muted-foreground">{step.detail}</span>
+                </span>
+                <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/src/components/primitives.tsx

@@ -1,24 +1,28 @@
 import * as React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { AlertCircle, CheckCircle2, Loader2 } from "lucide-react";
-import { ApiResult } from "@/api/client";
+import { AlertCircle, CheckCircle2, Loader2, LockKeyhole, Sparkles } from "lucide-react";
+import type { ApiResult } from "@/api/client";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAppStore } from "@/store/appStore";
 import { cn, asArray, fmtNumber, shortId, titleize } from "@/lib/utils";
 
 export function SourceBadge({ result }: { result?: Pick<ApiResult, "source" | "ok" | "status"> }) {
+  const mode = useAppStore((state) => state.mode);
   if (!result) return <Badge variant="muted">not loaded</Badge>;
-  if (result.source === "live" && result.ok) return <Badge variant="success">live API</Badge>;
-  return <Badge variant="warning">unavailable</Badge>;
+  if (result.source === "live" && result.ok) return <Badge variant="success">{mode === "basic" ? "ready" : "connected"}</Badge>;
+  return <Badge variant="warning">{mode === "basic" ? "needs setup" : "unavailable"}</Badge>;
 }
 
 export function EmptyState({ title = "Unavailable", detail }: { title?: string; detail?: React.ReactNode }) {
   return (
-    <div className="flex min-h-28 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 p-5 text-center text-sm text-muted-foreground">
-      <AlertCircle className="h-5 w-5" />
-      <div className="font-medium text-foreground">{title}</div>
-      {detail ? <div>{detail}</div> : null}
+    <div className="flex min-h-36 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/24 p-6 text-center text-sm text-muted-foreground">
+      <div className="grid h-10 w-10 place-items-center rounded-md border border-border bg-card">
+        <Sparkles className="h-5 w-5 text-primary" />
+      </div>
+      <div className="text-base font-semibold text-foreground">{title}</div>
+      {detail ? <div className="max-w-md leading-6">{detail}</div> : null}
     </div>
   );
 }
@@ -36,8 +40,9 @@ export function DataPanel<T>({
   children: (data: T) => React.ReactNode;
   className?: string;
 }) {
+  const mode = useAppStore((state) => state.mode);
   return (
-    <Card className={className}>
+    <Card className={cn("overflow-hidden", className)}>
       <CardHeader className="flex-row items-start justify-between gap-3">
         <div>
           <CardTitle>{title}</CardTitle>
@@ -46,7 +51,9 @@ export function DataPanel<T>({
         <SourceBadge result={result} />
       </CardHeader>
       <CardContent>
-        {result?.ok ? children(result.data) : <EmptyState detail={result?.error || "The backend did not return this capability."} />}
+        {result?.ok ? children(result.data) : (
+          <EmptyState detail={mode === "basic" ? "This area needs setup or is not available yet." : result?.error || "This capability is not reporting right now."} />
+        )}
       </CardContent>
     </Card>
   );
@@ -71,10 +78,10 @@ export function StatGrid({ stats }: { stats: Array<{ label: string; value: unkno
   return (
     <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
       {stats.map((stat) => (
-        <div key={stat.label} className="rounded-md border border-border bg-background p-3">
-          <div className="text-xs uppercase tracking-wide text-muted-foreground">{stat.label}</div>
-          <div className="mt-1 text-2xl font-semibold">{typeof stat.value === "number" ? fmtNumber(stat.value) : String(stat.value ?? "-")}</div>
-          {stat.hint ? <div className="mt-1 text-xs text-muted-foreground">{stat.hint}</div> : null}
+        <div key={stat.label} className="rounded-lg border border-border bg-background/55 p-4">
+          <div className="text-xs uppercase text-muted-foreground">{stat.label}</div>
+          <div className="mt-2 text-2xl font-semibold leading-tight">{typeof stat.value === "number" ? fmtNumber(stat.value) : String(stat.value ?? "-")}</div>
+          {stat.hint ? <div className="mt-2 text-xs leading-5 text-muted-foreground">{stat.hint}</div> : null}
         </div>
       ))}
     </div>
@@ -92,6 +99,32 @@ function scalarText(value: unknown) {
   return String(value);
 }
 
+const BASIC_HIDDEN_KEY = /(^id$|_id$|token|secret|passphrase|fingerprint|public_key|private_key|dsn|schema|endpoint|base_url|localhost|127\.0\.0\.1|stack|trace|raw|runtime|engine|module|port|host|api|internal)/i;
+
+function hideInBasic(key: string) {
+  return BASIC_HIDDEN_KEY.test(key);
+}
+
+function humanText(value: unknown) {
+  const text = scalarText(value);
+  if (text === "-") return text;
+  if (text.includes("/") || text.includes("@") || /\.[a-z0-9]{2,5}$/i.test(text)) return text;
+  return titleize(text.replace(/^agent:/i, "").replace(/^tool:/i, ""));
+}
+
+function firstRecordList(value: Record<string, unknown>) {
+  const preferred = [
+    "documents", "sources", "items", "agents", "workflows", "runs", "events",
+    "permissions", "models", "peers", "invitations", "roles", "policies",
+    "hooks", "tools", "templates", "plugins", "recent_events",
+  ];
+  for (const key of preferred) {
+    const rows = asArray<Record<string, unknown>>(value[key]);
+    if (rows.length) return rows;
+  }
+  return [];
+}
+
 export function ValuePreview({ value }: { value: unknown }) {
   if (typeof value === "boolean") {
     return <Badge variant={value ? "success" : "muted"}>{value ? "enabled" : "disabled"}</Badge>;
@@ -119,7 +152,10 @@ export function ValuePreview({ value }: { value: unknown }) {
 }
 
 export function KeyValueList({ data, limit = 8 }: { data: Record<string, unknown>; limit?: number }) {
-  const rows = Object.entries(data || {}).slice(0, limit);
+  const mode = useAppStore((state) => state.mode);
+  const rows = Object.entries(data || {})
+    .filter(([key]) => mode !== "basic" || !hideInBasic(key))
+    .slice(0, limit);
   if (!rows.length) return <EmptyState title="No values" />;
   return (
     <div className="divide-y divide-border rounded-md border border-border">
@@ -144,8 +180,10 @@ export function StructuredView({
   metaKey?: string;
   limit?: number;
 }) {
+  const mode = useAppStore((state) => state.mode);
+  if (mode === "basic") return <FriendlySummary value={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
   if (Array.isArray(value)) {
-    if (!value.length) return <EmptyState title="No records" detail="The API returned an empty collection." />;
+    if (!value.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
     if (value.every((item) => isRecord(item))) {
       return <EntityList items={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
     }
@@ -164,6 +202,46 @@ export function StructuredView({
   );
 }
 
+export function FriendlySummary({
+  value,
+  titleKey = "title",
+  metaKey = "status",
+  limit = 6,
+}: {
+  value: unknown;
+  titleKey?: string;
+  metaKey?: string;
+  limit?: number;
+}) {
+  if (Array.isArray(value)) {
+    if (!value.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
+    if (value.every((item) => isRecord(item))) {
+      return <EntityList items={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
+    }
+    return (
+      <div className="flex flex-wrap gap-1 rounded-md border border-border bg-background/55 p-3">
+        {value.slice(0, limit).map((item, index) => <Badge key={`${String(item)}-${index}`} variant="muted">{humanText(item)}</Badge>)}
+        {value.length > limit ? <Badge variant="muted">+{value.length - limit}</Badge> : null}
+      </div>
+    );
+  }
+  if (isRecord(value)) {
+    const list = firstRecordList(value);
+    if (list.length) return <EntityList items={list} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
+    const friendly = Object.fromEntries(
+      Object.entries(value)
+        .filter(([key]) => !hideInBasic(key))
+        .map(([key, item]) => [key, Array.isArray(item) ? `${fmtNumber(item.length)} items` : isRecord(item) ? "available" : item]),
+    );
+    return <KeyValueList data={friendly} limit={limit} />;
+  }
+  return (
+    <div className="rounded-md border border-border bg-background/55 p-3 text-sm">
+      {humanText(value)}
+    </div>
+  );
+}
+
 export function OperationResult({
   result,
   successLabel = "Request completed",
@@ -171,6 +249,7 @@ export function OperationResult({
   result?: ApiResult<unknown> | null;
   successLabel?: string;
 }) {
+  const mode = useAppStore((state) => state.mode);
   if (!result) return null;
   if (!result.ok) {
     return <EmptyState title="Request unavailable" detail={result.error || <ValuePreview value={result.data} />} />;
@@ -178,7 +257,7 @@ export function OperationResult({
   return (
     <div className="space-y-2 rounded-md border border-border bg-background p-3">
       <Badge variant="success">{successLabel}</Badge>
-      <StructuredView value={result.data} />
+      {mode === "basic" ? <FriendlySummary value={result.data} /> : <StructuredView value={result.data} />}
     </div>
   );
 }
@@ -194,20 +273,21 @@ export function EntityList({
   metaKey?: string;
   limit?: number;
 }) {
+  const mode = useAppStore((state) => state.mode);
   const rows = asArray<Record<string, unknown>>(items).slice(0, limit);
-  if (!rows.length) return <EmptyState title="No records" detail="The API returned an empty collection." />;
+  if (!rows.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
   return (
     <div className="grid gap-2">
       {rows.map((item, index) => (
-        <div key={String(item.id || item.name || index)} className="rounded-md border border-border bg-background p-3">
+        <div key={String(item.id || item.name || index)} className="rounded-lg border border-border bg-background/55 p-3">
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="font-medium">{String(item[titleKey] || item.name || item.id || `Record ${index + 1}`)}</div>
-            <Badge variant="muted">{String(item[metaKey] || item.status || item.state || "record")}</Badge>
+            <div className="font-medium">{mode === "basic" ? humanText(item[titleKey] || item.name || item.label || `Item ${index + 1}`) : String(item[titleKey] || item.name || item.id || `Record ${index + 1}`)}</div>
+            <Badge variant="muted">{mode === "basic" ? humanText(item[metaKey] || item.status || item.state || "ready") : String(item[metaKey] || item.status || item.state || "record")}</Badge>
           </div>
           {item.summary || item.description || item.path || (item.id && item[titleKey] !== item.id) ? (
             <p className="mt-1 text-sm text-muted-foreground">{String(item.summary || item.description || item.path || item.id)}</p>
           ) : null}
-          {item.id && item[titleKey] !== item.id ? (
+          {mode !== "basic" && item.id && item[titleKey] !== item.id ? (
             <div className="mt-1 text-xs text-muted-foreground">{shortId(item.id, 48)}</div>
           ) : null}
         </div>
@@ -216,6 +296,32 @@ export function EntityList({
   );
 }
 
+export function ModeGate({
+  title = "Advanced controls",
+  detail = "Switch modes when you want diagnostics or administrative controls. Basic mode keeps the product focused on everyday use.",
+  target = "advanced",
+}: {
+  title?: string;
+  detail?: string;
+  target?: "advanced" | "admin";
+}) {
+  const setMode = useAppStore((state) => state.setMode);
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-start gap-3 p-6">
+        <div className="grid h-10 w-10 place-items-center rounded-md border border-border bg-background/70">
+          <LockKeyhole className="h-5 w-5 text-primary" />
+        </div>
+        <div>
+          <div className="text-lg font-semibold">{title}</div>
+          <p className="mt-1 max-w-2xl text-sm leading-6 text-muted-foreground">{detail}</p>
+        </div>
+        <Button onClick={() => setMode(target)}>{target === "admin" ? "Switch to Admin" : "Switch to Advanced"}</Button>
+      </CardContent>
+    </Card>
+  );
+}
+
 export function ActionButton({
   label,
   successLabel = "Done",
@@ -268,14 +374,14 @@ export function Tabs({
   onChange: (id: string) => void;
 }) {
   return (
-    <div className="flex flex-wrap gap-1 rounded-md border border-border bg-muted/30 p-1">
+    <div className="inline-flex max-w-full flex-wrap gap-1 rounded-lg border border-border bg-muted/28 p-1">
       {tabs.map((tab) => (
         <button
           key={tab.id}
           onClick={() => onChange(tab.id)}
           className={cn(
-            "h-8 rounded px-3 text-sm font-medium transition",
-            value === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+            "h-9 rounded-md px-3.5 text-sm font-semibold transition",
+            value === tab.id ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:bg-card/60 hover:text-foreground",
           )}
         >
           {tab.label}

package/frontend/src/components/ui/badge.tsx

@@ -9,7 +9,7 @@ const variants = {
   default: "border-primary/25 bg-primary/12 text-primary",
   success: "border-emerald-500/25 bg-emerald-500/12 text-emerald-300",
   warning: "border-amber-500/25 bg-amber-500/12 text-amber-300",
-  muted: "border-border bg-muted text-muted-foreground",
+  muted: "border-border bg-muted/70 text-muted-foreground",
   danger: "border-destructive/30 bg-destructive/12 text-destructive",
 };
 
@@ -17,7 +17,7 @@ export function Badge({ className, variant = "default", ...props }: BadgeProps)
   return (
     <span
       className={cn(
-        "inline-flex min-h-6 items-center rounded-md border px-2 py-0.5 text-xs font-medium",
+        "inline-flex min-h-6 max-w-full items-center rounded-md border px-2 py-0.5 text-xs font-semibold leading-none",
         variants[variant],
         className,
       )}

package/frontend/src/components/ui/button.tsx

@@ -3,20 +3,20 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex h-9 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45",
+  "inline-flex h-10 max-w-full items-center justify-center gap-2 rounded-md px-3.5 text-sm font-semibold leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-muted text-foreground",
-        outline: "border border-border bg-background hover:bg-muted",
+        default: "bg-primary text-primary-foreground shadow-[0_10px_30px_hsl(var(--primary)/0.16)] hover:bg-primary/92",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/82",
+        ghost: "text-foreground hover:bg-muted",
+        outline: "border border-border bg-card/70 hover:bg-muted/88",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
       },
       size: {
         sm: "h-8 px-2.5 text-xs",
-        md: "h-9 px-3",
-        icon: "h-9 w-9 px-0",
+        md: "h-10 px-3.5",
+        icon: "h-10 w-10 px-0",
       },
     },
     defaultVariants: {

package/frontend/src/components/ui/card.tsx

@@ -2,21 +2,21 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <section className={cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className)} {...props} />;
+  return <section className={cn("premium-surface rounded-lg text-card-foreground", className)} {...props} />;
 }
 
 export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
+  return <div className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />;
 }
 
 export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
-  return <h2 className={cn("text-sm font-semibold tracking-normal", className)} {...props} />;
+  return <h2 className={cn("text-base font-semibold tracking-normal", className)} {...props} />;
 }
 
 export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+  return <p className={cn("text-sm leading-6 text-muted-foreground", className)} {...props} />;
 }
 
 export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("p-4 pt-0", className)} {...props} />;
+  return <div className={cn("p-5 pt-0", className)} {...props} />;
 }

package/frontend/src/components/ui/input.tsx

@@ -6,7 +6,7 @@ export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttribute
     <input
       ref={ref}
       className={cn(
-        "h-9 w-full rounded-md border border-input bg-background px-3 text-sm outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "h-10 w-full rounded-md border border-input bg-background/70 px-3 text-sm outline-none transition placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/frontend/src/components/ui/textarea.tsx

@@ -6,7 +6,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTML
     <textarea
       ref={ref}
       className={cn(
-        "min-h-24 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "min-h-28 w-full resize-y rounded-md border border-input bg-background/70 px-3 py-3 text-sm leading-6 outline-none transition placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}