Initial commit: AI Video Assistant fullstack platform.

Add pipecat-based backend with WebRTC/WS voice routes, Next.js frontend, and Docker Compose orchestration. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 13:51:28 +08:00
commit 42cab2a6ef
86 changed files with 19471 additions and 0 deletions
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import { Sidebar } from "./Sidebar";
+import { Topbar } from "./Topbar";
+
+import { HomePage } from "@/components/pages/HomePage";
+import { AssistantPage } from "@/components/pages/AssistantPage";
+import { ComponentsModelsPage } from "@/components/pages/ComponentsModelsPage";
+import { ComponentsKnowledgePage } from "@/components/pages/ComponentsKnowledgePage";
+import { ComponentsToolsPage } from "@/components/pages/ComponentsToolsPage";
+import { HistoryPage } from "@/components/pages/HistoryPage";
+import { DashboardPage } from "@/components/pages/DashboardPage";
+import { TestPage } from "@/components/pages/TestPage";
+import { WorkflowPage } from "@/components/pages/WorkflowPage";
+import { ProfilePage } from "@/components/pages/ProfilePage";
+
+export type NavKey =
+  | "home"
+  | "assistants"
+  | "components-models"
+  | "components-knowledge"
+  | "components-tools"
+  | "history"
+  | "dashboard"
+  | "test"
+  | "workflow"
+  | "profile";
+
+
+export function AppShell() {
+  const [active, setActive] = useState<NavKey>("home");
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
+      <Sidebar
+        active={active}
+        collapsed={collapsed}
+        onNavigate={setActive}
+        onToggle={() => setCollapsed((v) => !v)}
+      />
+
+      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <Topbar />
+
+        <div className="flex-1 overflow-y-auto px-8 py-10">
+          {active === "home" && <HomePage onNavigate={setActive} />}
+          {active === "assistants" && <AssistantPage />}
+          {active === "components-models" && <ComponentsModelsPage />}
+          {active === "components-knowledge" && <ComponentsKnowledgePage />}
+          {active === "components-tools" && <ComponentsToolsPage />}
+          {active === "history" && <HistoryPage />}
+          {active === "dashboard" && <DashboardPage />}
+          {active === "test" && <TestPage />}
+          {active === "workflow" && <WorkflowPage />}
+          {active === "profile" && <ProfilePage />}
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import {
+  Bot,
+  Boxes,
+  Brain,
+  ChevronLeft,
+  ChevronRight,
+  Clock3,
+  Database,
+  Wrench,
+  Home,
+  PlayCircle,
+  Video,
+  Workflow,
+} from "lucide-react";
+import type { NavKey } from "./AppShell";
+
+type SidebarProps = {
+  active: NavKey;
+  collapsed: boolean;
+  onNavigate: (key: NavKey) => void;
+  onToggle: () => void;
+};
+
+const mainItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+}> = [
+  { key: "home", label: "首页", icon: Home },
+  { key: "test", label: "测试助手", icon: PlayCircle },
+];
+
+const componentSubItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+}> = [
+  { key: "components-models", label: "模型资源", icon: Brain },
+  { key: "components-knowledge", label: "知识库", icon: Database },
+  { key: "components-tools", label: "工具资源", icon: Wrench },
+];
+
+const monitorSubItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+}> = [
+  { key: "history", label: "历史记录", icon: Clock3 },
+  { key: "dashboard", label: "数据看板", icon: Database },
+];
+
+export function Sidebar({
+  active,
+  collapsed,
+  onNavigate,
+  onToggle,
+}: SidebarProps) {
+  const assistantActive = active === "assistants";
+
+  const componentActive =
+    active === "components-models" || active === "components-knowledge" || active === "components-tools";
+
+  const monitorActive = monitorSubItems.some((item) => item.key === active);
+
+  return (
+    <aside
+      className={[
+        "flex shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width]",
+        collapsed ? "w-[76px]" : "w-[252px]",
+      ].join(" ")}
+    >
+      <div className="shrink-0 flex h-16 items-center gap-3 border-b border-sidebar-border px-5 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]">
+        <div
+          className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-on-primary shadow-sm"
+          style={{
+            backgroundColor: "var(--primary)",
+            backgroundImage:
+              "radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gradient-sky) 70%, transparent), transparent 60%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gradient-lavender) 65%, transparent), transparent 55%)",
+          }}
+        >
+          <Video size={22} style={{ color: "var(--primary-foreground)" }} />
+        </div>
+
+        <div
+          className={[
+            "min-w-0 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+            collapsed ? "w-0 opacity-0 -translate-x-2" : "w-[140px] opacity-100 translate-x-0",
+          ].join(" ")}
+        >
+          <div className="truncate font-display text-base text-foreground">
+            AI 视频助手
+          </div>
+        </div>
+      </div>
+
+      <nav className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 py-5 pr-2 [scrollbar-width:thin] [scrollbar-color:var(--hairline-strong)_transparent]">
+        <div className="space-y-1">
+          <NavButton
+            active={active === "home"}
+            collapsed={collapsed}
+            icon={Home}
+            label="首页"
+            onClick={() => onNavigate("home")}
+          />
+          <div className="pt-2">
+            <NavButton
+              active={assistantActive}
+              collapsed={collapsed}
+              icon={Bot}
+              label="创建助手"
+              onClick={() => onNavigate("assistants")}
+            />
+          </div>
+
+          <div className="pt-2">
+            {collapsed ? (
+              <div
+                className="flex h-8 items-center justify-center"
+                aria-hidden="true"
+                title="组件库"
+              >
+                <span className="h-px w-6 rounded-full bg-hairline-strong" />
+              </div>
+            ) : (
+              <div
+                className={[
+                  "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
+                  componentActive ? "text-foreground" : "text-muted-foreground",
+                ].join(" ")}
+              >
+                <Boxes size={18} />
+                <span className="font-medium">组件库</span>
+              </div>
+            )}
+
+            <div
+              className={[
+                "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                collapsed ? "pl-0" : "pl-5",
+              ].join(" ")}
+            >
+              {componentSubItems.map((item) => (
+                <NavButton
+                  key={item.key}
+                  active={active === item.key}
+                  collapsed={collapsed}
+                  icon={item.icon}
+                  label={item.label}
+                  onClick={() => onNavigate(item.key)}
+                  small
+                />
+              ))}
+            </div>
+          </div>
+
+
+          <div className="pt-2">
+          {collapsed ? (
+              <div
+                className="flex h-8 items-center justify-center"
+                aria-hidden="true"
+                title="监控观察"
+              >
+                <span className="h-px w-6 rounded-full bg-hairline-strong" />
+              </div>
+            ) : (
+              <div
+                className={[
+                  "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
+                  monitorActive ? "text-foreground" : "text-muted-foreground",
+                ].join(" ")}
+              >
+                <Boxes size={18} />
+                <span className="font-medium">监控观察</span>
+              </div>
+            )}
+
+            <div
+              className={[
+                "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                collapsed ? "pl-0" : "pl-5",
+              ].join(" ")}
+            >
+            {monitorSubItems.map((item) => (
+              <NavButton
+                key={item.key}
+                active={active === item.key}
+                collapsed={collapsed}
+                icon={item.icon}
+                label={item.label}
+                onClick={() => onNavigate(item.key)}
+              />
+            ))}
+            </div>
+          </div>
+
+          <div className="pt-2">
+            {mainItems.slice(1).map((item) => (
+              <NavButton
+                key={item.key}
+                active={active === item.key}
+                collapsed={collapsed}
+                icon={item.icon}
+                label={item.label}
+                onClick={() => onNavigate(item.key)}
+              />
+            ))}
+          </div>
+
+        </div>
+      </nav>
+
+      <div className="shrink-0 space-y-2 border-t border-sidebar-border bg-sidebar p-3 shadow-[0_-12px_24px_rgba(0,0,0,0.12)]">
+        {/* 个人中心 */}
+        <button
+          onClick={() => onNavigate("profile")}
+          title={collapsed ? "个人中心 · 管理员" : undefined}
+          className={[
+            "group relative flex w-full items-center overflow-hidden rounded-2xl border py-2 text-left transition-[background-color,color,border-color,box-shadow,transform] duration-200 active:scale-[0.98]",
+            active === "profile"
+              ? "border-sidebar-border bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
+              : "border-transparent text-muted-foreground hover:border-sidebar-border hover:bg-sidebar-accent/60 hover:text-foreground hover:shadow-sm",
+            collapsed ? "justify-center gap-0 px-0" : "gap-3 px-2.5",
+          ].join(" ")}
+        >
+          <span className="relative shrink-0">
+            <span
+              className="flex h-9 w-9 items-center justify-center rounded-full text-sm font-medium text-on-primary shadow-sm transition-transform duration-200 group-hover:scale-105"
+              style={{
+                backgroundColor: "var(--primary)",
+                backgroundImage:
+                  "radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gradient-sky) 70%, transparent), transparent 60%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gradient-lavender) 65%, transparent), transparent 55%)",
+              }}
+            >
+              <span style={{ color: "var(--primary-foreground)" }}>管</span>
+            </span>
+            <span
+              className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-sidebar"
+              style={{ backgroundColor: "var(--success)" }}
+            />
+          </span>
+
+          <span
+            className={[
+              "min-w-0 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+              collapsed ? "w-0 flex-none opacity-0 -translate-x-2" : "flex-1 opacity-100 translate-x-0",
+            ].join(" ")}
+          >
+            <span className="block truncate text-sm font-medium text-foreground">
+              管理员
+            </span>
+          </span>
+        </button>
+
+        {/* 收起 / 展开侧栏 */}
+        <button
+          onClick={onToggle}
+          title={collapsed ? "展开侧栏" : "收起侧栏"}
+          className={[
+            "group flex h-10 w-full items-center overflow-hidden rounded-full border border-hairline-strong text-sm text-muted-foreground transition-[background-color,color,border-color,transform] duration-200 hover:bg-surface-strong hover:text-foreground active:scale-[0.98]",
+            collapsed ? "justify-center gap-0 px-0" : "justify-between gap-2 px-3.5",
+          ].join(" ")}
+        >
+          <span
+            className={[
+              "min-w-0 truncate transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+              collapsed ? "w-0 opacity-0 -translate-x-2" : "opacity-100 translate-x-0",
+            ].join(" ")}
+          >
+            收起侧栏
+          </span>
+          <ChevronLeft
+            size={18}
+            className={[
+              "shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-110",
+              collapsed ? "rotate-180" : "rotate-0",
+            ].join(" ")}
+          />
+        </button>
+      </div>
+    </aside>
+  );
+}
+
+function NavButton({
+  active,
+  collapsed,
+  icon: Icon,
+  label,
+  onClick,
+  small = false,
+}: {
+  active: boolean;
+  collapsed: boolean;
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+  label: string;
+  onClick: () => void;
+  small?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={collapsed ? label : undefined}
+      className={[
+        "group mt-1 flex w-full items-center overflow-hidden rounded-full text-sm transition-[background-color,color,transform] duration-200 active:scale-[0.98]",
+        small ? "h-10" : "h-11",
+        active
+          ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+          : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground",
+        collapsed ? "justify-center gap-0 px-0" : "gap-3 px-3 hover:translate-x-0.5",
+      ].join(" ")}
+    >
+      <Icon
+        size={small ? 16 : 18}
+        className="shrink-0 transition-transform duration-200 group-hover:scale-105"
+      />
+      <span
+        className={[
+          "min-w-0 truncate transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+          collapsed ? "w-0 opacity-0 -translate-x-2" : "w-[150px] opacity-100 translate-x-0",
+        ].join(" ")}
+      >
+        {label}
+      </span>
+    </button>
+  );
+}
--- a/frontend/src/components/layout/ThemeToggle.tsx
+++ b/frontend/src/components/layout/ThemeToggle.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+export function ThemeToggle() {
+  const [dark, setDark] = useState(true);
+
+  useEffect(() => {
+    setDark(document.documentElement.classList.contains("dark"));
+  }, []);
+
+  function toggle() {
+    const next = !dark;
+    setDark(next);
+    document.documentElement.classList.toggle("dark", next);
+    try {
+      localStorage.setItem("theme", next ? "dark" : "light");
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return (
+    <button
+      onClick={toggle}
+      title={dark ? "切换到浅色" : "切换到深色"}
+      aria-label="切换主题"
+      className="flex size-10 items-center justify-center rounded-full border border-hairline-strong text-muted-foreground transition-colors hover:bg-surface-strong hover:text-foreground"
+    >
+      {dark ? <Sun size={17} /> : <Moon size={17} />}
+    </button>
+  );
+}
--- a/frontend/src/components/layout/Topbar.tsx
+++ b/frontend/src/components/layout/Topbar.tsx
@@ -0,0 +1,41 @@
+import { Bell, HelpCircle, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "./ThemeToggle";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export function Topbar() {
+  return (
+    <header className="flex h-16 shrink-0 items-center justify-end gap-2 border-b border-border bg-background px-8">
+      <TooltipProvider>
+        <Button
+          variant="outline"
+          size="lg"
+          className="border-hairline-strong text-muted-foreground hover:bg-surface-strong hover:text-foreground"
+        >
+          <HelpCircle />
+          帮助
+        </Button>
+
+        <ThemeToggle />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon-lg"
+              className="border-hairline-strong text-muted-foreground hover:bg-surface-strong hover:text-foreground"
+            >
+              <Bell />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">通知</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </header>
+  );
+}
--- a/frontend/src/components/pages/AssistantPage.tsx
+++ b/frontend/src/components/pages/AssistantPage.tsx
--- a/frontend/src/components/pages/AssistantWorkflowPage.tsx
+++ b/frontend/src/components/pages/AssistantWorkflowPage.tsx
@@ -0,0 +1,137 @@
+import { ArrowRight, Boxes, GitBranch, Plus, Workflow } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function AssistantWorkflowPage() {
+  return (
+    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
+      <div>
+        <h1 className="font-display display-lg text-ink">创建助手</h1>
+        <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
+          通过节点编排方式创建复杂 AI
+          视频助手流程，适合多轮任务、工具调用、知识库检索和人工协同场景。
+        </p>
+      </div>
+
+      <section className="relative overflow-hidden rounded-3xl border border-hairline bg-canvas-soft p-10">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -right-20 -top-24 h-72 w-72 rounded-full opacity-55 blur-3xl"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle, color-mix(in srgb, var(--gradient-mint) 55%, transparent), transparent 70%)",
+          }}
+        />
+
+        <div className="relative flex items-start gap-5">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface-strong text-foreground">
+            <Workflow size={30} />
+          </div>
+
+          <div className="flex-1">
+            <div className="caption-label inline-flex rounded-full bg-surface-strong px-3 py-1 text-muted-foreground">
+              即将开放
+            </div>
+
+            <h2 className="font-display display-sm mt-5 text-ink">
+              工作流画布正在设计中
+            </h2>
+
+            <p className="mt-3 max-w-2xl text-[15px] leading-7 text-body">
+              后续这里会提供可视化节点画布，你可以拖拽配置开始节点、意图识别节点、知识库检索节点、
+              大模型回答节点、工具调用节点、人工接管节点和结束节点。
+            </p>
+
+            <div className="mt-7 flex gap-3">
+              <Button size="lg" className="gap-2">
+                <Plus size={16} />
+                新建工作流
+              </Button>
+
+              <Button
+                variant="outline"
+                size="lg"
+                className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+              >
+                查看模板
+                <ArrowRight size={16} />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="grid grid-cols-3 gap-4">
+        <FeatureCard
+          icon={<GitBranch size={20} />}
+          title="节点编排"
+          description="通过拖拽节点组织多轮对话、判断分支和任务流转。"
+        />
+
+        <FeatureCard
+          icon={<Boxes size={20} />}
+          title="组件复用"
+          description="复用模型、知识库、语音识别、声音资源和工具插件。"
+        />
+
+        <FeatureCard
+          icon={<Workflow size={20} />}
+          title="流程调试"
+          description="支持逐节点测试、查看输入输出和定位失败原因。"
+        />
+      </section>
+
+      <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+        <div className="mb-5">
+          <h2 className="font-display display-sm text-ink">未来画布结构预览</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            当前是静态占位，后续可替换为 React Flow 或自研画布组件。
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3 overflow-x-auto rounded-2xl border border-hairline bg-canvas-soft p-5">
+          {["开始", "意图识别", "知识库检索", "模型回答", "工具调用", "结束"].map(
+            (item, index) => (
+              <div key={item} className="flex items-center gap-3">
+                <div className="min-w-[128px] rounded-xl border border-hairline bg-card p-4 text-center shadow-sm">
+                  <div className="text-sm font-medium text-foreground">
+                    {item}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-soft">
+                    Node {index + 1}
+                  </div>
+                </div>
+
+                {index < 5 && (
+                  <ArrowRight size={18} className="shrink-0 text-muted-soft" />
+                )}
+              </div>
+            ),
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function FeatureCard({
+  icon,
+  title,
+  description,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-hairline bg-card p-6 shadow-sm transition-shadow hover:shadow-md">
+      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-surface-strong text-foreground">
+        {icon}
+      </div>
+
+      <div className="font-medium text-foreground">{title}</div>
+      <p className="mt-2 text-sm leading-6 text-muted-foreground">
+        {description}
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/components/pages/ComponentsKnowledgePage.tsx
+++ b/frontend/src/components/pages/ComponentsKnowledgePage.tsx
@@ -0,0 +1,10 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function ComponentsKnowledgePage() {
+  return (
+    <PlaceholderPage
+      title="知识库"
+      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
+    />
+  );
+}
--- a/frontend/src/components/pages/ComponentsModelsPage.tsx
+++ b/frontend/src/components/pages/ComponentsModelsPage.tsx
@@ -0,0 +1,794 @@
+"use client";
+
+import {
+  Brain,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  EyeOff,
+  HelpCircle,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plug,
+  Plus,
+  Search,
+  Trash2,
+  XCircle,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useState, type ReactNode } from "react";
+
+type ModelType = "LLM" | "ASR" | "TTS" | "Realtime" | "Embedding";
+
+type InterfaceType = "openai" | "xfyun" | "dashscope" | "gemini";
+
+/** 各资源类型可选的接口类型 */
+const interfaceOptionsByType: Record<ModelType, InterfaceType[]> = {
+  LLM: ["openai"],
+  ASR: ["openai", "xfyun", "dashscope"],
+  TTS: ["openai", "xfyun", "dashscope"],
+  Realtime: ["openai", "gemini"],
+  Embedding: ["openai"],
+};
+
+const modelTypes: ModelType[] = ["LLM", "ASR", "TTS", "Realtime", "Embedding"];
+
+type ModelResource = {
+  id: string;
+  name: string;
+  modelId: string;
+  type: ModelType;
+  interfaceType: InterfaceType;
+  apiUrl: string;
+  apiKey: string;
+};
+
+const mockModels: ModelResource[] = [
+  {
+    id: "model_001",
+    name: "DeepSeek-V3",
+    modelId: "deepseek-chat",
+    type: "LLM",
+    interfaceType: "openai",
+    apiUrl: "https://api.deepseek.com/v1",
+    apiKey: "sk-deepseek-7f3a9c2e1b",
+  },
+  {
+    id: "model_002",
+    name: "Qwen-Max",
+    modelId: "qwen-max",
+    type: "LLM",
+    interfaceType: "openai",
+    apiUrl: "https://dashscope.aliyuncs.com/compatible-mode/v1",
+    apiKey: "sk-qwen-4d8e2a6f0c",
+  },
+  {
+    id: "model_003",
+    name: "讯飞语音识别",
+    modelId: "iat",
+    type: "ASR",
+    interfaceType: "xfyun",
+    apiUrl: "https://iat-api.xfyun.cn/v2/iat",
+    apiKey: "xf-asr-9b1c3d5e7a",
+  },
+  {
+    id: "model_004",
+    name: "Paraformer 识别",
+    modelId: "paraformer-realtime-v2",
+    type: "ASR",
+    interfaceType: "dashscope",
+    apiUrl: "https://dashscope.aliyuncs.com/api/v1/services/audio/asr",
+    apiKey: "sk-paraformer-2e4f6a",
+  },
+  {
+    id: "model_005",
+    name: "讯飞语音合成",
+    modelId: "tts",
+    type: "TTS",
+    interfaceType: "xfyun",
+    apiUrl: "https://tts-api.xfyun.cn/v2/tts",
+    apiKey: "xf-tts-6c8a0b2d4f",
+  },
+  {
+    id: "model_006",
+    name: "CosyVoice 合成",
+    modelId: "cosyvoice-v1",
+    type: "TTS",
+    interfaceType: "dashscope",
+    apiUrl: "https://dashscope.aliyuncs.com/api/v1/services/audio/tts",
+    apiKey: "sk-cosyvoice-1a3c5e",
+  },
+  {
+    id: "model_007",
+    name: "OpenAI TTS",
+    modelId: "tts-1",
+    type: "TTS",
+    interfaceType: "openai",
+    apiUrl: "https://api.openai.com/v1/audio/speech",
+    apiKey: "sk-openai-tts-8f0a2c",
+  },
+  {
+    id: "model_008",
+    name: "GPT Realtime",
+    modelId: "gpt-4o-realtime-preview",
+    type: "Realtime",
+    interfaceType: "openai",
+    apiUrl: "https://api.openai.com/v1/realtime",
+    apiKey: "sk-realtime-3b5d7f9a1c",
+  },
+  {
+    id: "model_009",
+    name: "Gemini Live",
+    modelId: "gemini-2.0-flash-live",
+    type: "Realtime",
+    interfaceType: "gemini",
+    apiUrl: "https://generativelanguage.googleapis.com/v1beta",
+    apiKey: "gm-live-5e7a9c1b3d",
+  },
+  {
+    id: "model_010",
+    name: "text-embedding-3",
+    modelId: "text-embedding-3-small",
+    type: "Embedding",
+    interfaceType: "openai",
+    apiUrl: "https://api.openai.com/v1/embeddings",
+    apiKey: "sk-embed-0c2e4a6f8b",
+  },
+  {
+    id: "model_011",
+    name: "Kimi-K2",
+    modelId: "moonshot-v1-8k",
+    type: "LLM",
+    interfaceType: "openai",
+    apiUrl: "https://api.moonshot.cn/v1",
+    apiKey: "sk-kimi-7a9c1e3b5d",
+  },
+  {
+    id: "model_012",
+    name: "BGE Embedding",
+    modelId: "bge-m3",
+    type: "Embedding",
+    interfaceType: "openai",
+    apiUrl: "https://api.siliconflow.cn/v1/embeddings",
+    apiKey: "sk-bge-2d4f6a8c0e",
+  },
+];
+
+type ModelForm = {
+  name: string;
+  modelId: string;
+  type: ModelType;
+  interfaceType: InterfaceType;
+  apiUrl: string;
+  apiKey: string;
+};
+
+const emptyForm: ModelForm = {
+  name: "",
+  modelId: "",
+  type: "LLM",
+  interfaceType: "openai",
+  apiUrl: "",
+  apiKey: "",
+};
+
+type TypeFilter = "全部" | ModelType;
+
+const typeFilters: TypeFilter[] = ["全部", ...modelTypes];
+
+export function ComponentsModelsPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>("全部");
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState<ModelForm>(emptyForm);
+  const [showKey, setShowKey] = useState(false);
+
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<"idle" | "ok" | "fail">("idle");
+
+  function updateForm<K extends keyof ModelForm>(key: K, value: ModelForm[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    // 任何配置变更后，旧的测试结果不再可信，重置为待测状态
+    setTestResult("idle");
+  }
+
+  async function handleTestConnection() {
+    setTesting(true);
+    setTestResult("idle");
+    try {
+      // TODO: 接入真实疎通接口（按 form.interfaceType 区分调用方式）
+      await new Promise((resolve) => setTimeout(resolve, 900));
+      const reachable = Boolean(form.apiUrl.trim() && form.apiKey.trim());
+      setTestResult(reachable ? "ok" : "fail");
+    } catch {
+      setTestResult("fail");
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  function handleTypeChange(type: ModelType) {
+    const options = interfaceOptionsByType[type];
+    setForm((prev) => ({
+      ...prev,
+      type,
+      // 资源类型变化时，若当前接口类型不在新类型的可选项内则重置为首项
+      interfaceType: options.includes(prev.interfaceType)
+        ? prev.interfaceType
+        : options[0],
+    }));
+    setTestResult("idle");
+  }
+
+  function openCreate() {
+    setEditingId(null);
+    setForm(emptyForm);
+    setShowKey(false);
+    setTestResult("idle");
+    setDialogOpen(true);
+  }
+
+  function openEdit(model: ModelResource) {
+    setEditingId(model.id);
+    setForm({
+      name: model.name,
+      modelId: model.modelId,
+      type: model.type,
+      interfaceType: model.interfaceType,
+      apiUrl: model.apiUrl,
+      apiKey: model.apiKey,
+    });
+    setShowKey(false);
+    setTestResult("idle");
+    setDialogOpen(true);
+  }
+
+  const filteredModels = mockModels.filter((model) => {
+    if (typeFilter !== "全部" && model.type !== typeFilter) {
+      return false;
+    }
+
+    const keyword = searchQuery.trim().toLowerCase();
+    if (!keyword) {
+      return true;
+    }
+
+    return [model.name, model.modelId, model.type, model.interfaceType, model.apiUrl]
+      .join(" ")
+      .toLowerCase()
+      .includes(keyword);
+  });
+
+  const pageSize = 5;
+  const totalPages = Math.max(1, Math.ceil(filteredModels.length / pageSize));
+  const safeCurrentPage = Math.min(currentPage, totalPages);
+  const pageStart = (safeCurrentPage - 1) * pageSize;
+  const pageEnd = pageStart + pageSize;
+  const paginatedModels = filteredModels.slice(pageStart, pageEnd);
+
+  function handleSearchChange(value: string) {
+    setSearchQuery(value);
+    setCurrentPage(1);
+  }
+
+  function handleFilterChange(filter: TypeFilter) {
+    setTypeFilter(filter);
+    setCurrentPage(1);
+  }
+
+  const interfaceOptions = interfaceOptionsByType[form.type];
+  const canSave =
+    form.name.trim() && form.modelId.trim() && form.apiUrl.trim();
+
+  return (
+    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
+      <div className="flex flex-col items-start justify-between gap-5 sm:flex-row sm:gap-6">
+        <div>
+          <h1 className="font-display display-lg text-ink">模型资源</h1>
+          <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
+            统一管理 LLM、ASR、TTS、Realtime 与 Embedding 模型，配置各自的接口类型与访问凭证。
+          </p>
+        </div>
+
+        <Button
+          size="lg"
+          className="w-full shrink-0 gap-2 sm:w-auto"
+          onClick={openCreate}
+        >
+          <Plus size={16} />
+          添加模型
+        </Button>
+      </div>
+
+      <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+        <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-wrap items-center gap-2">
+            {typeFilters.map((filter) => (
+              <Button
+                key={filter}
+                variant={filter === typeFilter ? "default" : "outline"}
+                size="sm"
+                className={
+                  filter === typeFilter
+                    ? "rounded-full"
+                    : "rounded-full border-hairline-strong text-muted-foreground hover:text-foreground"
+                }
+                onClick={() => handleFilterChange(filter)}
+              >
+                {filter}
+              </Button>
+            ))}
+          </div>
+
+          <div className="relative w-full lg:w-[320px]">
+            <Search
+              size={15}
+              className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-soft"
+            />
+            <Input
+              value={searchQuery}
+              onChange={(event) => handleSearchChange(event.target.value)}
+              className="h-10 border-hairline-strong bg-background pl-9 text-sm text-foreground placeholder:text-muted-soft"
+              placeholder="搜索模型名称、接口类型或 URL..."
+            />
+          </div>
+        </div>
+
+        <div className="overflow-hidden rounded-xl border border-hairline">
+          <div className="hidden items-center gap-4 bg-surface-strong/60 px-5 py-3 md:flex">
+            <div className="caption-label flex-1 text-muted-soft">模型名称</div>
+            <div className="caption-label w-[110px] text-muted-soft">
+              资源类型
+            </div>
+            <div className="caption-label w-[110px] text-muted-soft">
+              接口类型
+            </div>
+            <div className="caption-label w-[260px] text-muted-soft">
+              API URL
+            </div>
+            <div className="caption-label w-[116px] text-right text-muted-soft">
+              操作
+            </div>
+          </div>
+
+          <div className="divide-y divide-hairline">
+            {paginatedModels.map((model) => (
+              <div
+                key={model.id}
+                className="flex flex-col gap-3 px-5 py-4 text-sm transition-colors hover:bg-surface-strong/40 md:flex-row md:items-center md:gap-4"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="truncate font-medium text-foreground">
+                    {model.name}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-soft">
+                    {model.modelId}
+                  </div>
+                </div>
+
+                <div className="md:w-[110px]">
+                  <Badge
+                    variant="secondary"
+                    className="h-6 bg-surface-strong px-3 text-muted-foreground"
+                  >
+                    {model.type}
+                  </Badge>
+                </div>
+
+                <div className="md:w-[110px]">
+                  <Badge
+                    variant="secondary"
+                    className="h-6 bg-surface-strong px-3 text-muted-foreground"
+                  >
+                    {model.interfaceType}
+                  </Badge>
+                </div>
+
+                <div className="truncate text-muted-foreground md:w-[260px]">
+                  {model.apiUrl}
+                </div>
+
+                <div className="flex justify-end gap-2 md:w-[116px]">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5 border-hairline-strong text-xs text-muted-foreground hover:text-foreground"
+                    onClick={() => openEdit(model)}
+                  >
+                    <Pencil size={14} />
+                    编辑
+                  </Button>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="icon-sm"
+                        className="border-hairline-strong text-muted-foreground hover:text-foreground"
+                        aria-label={`${model.name} 更多操作`}
+                      >
+                        <MoreHorizontal size={15} />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="end"
+                      className="w-32 min-w-32 rounded-xl border border-hairline bg-popover p-1"
+                    >
+                      <DropdownMenuItem variant="destructive" className="rounded-lg">
+                        <Trash2 size={14} />
+                        删除
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+            ))}
+
+            {filteredModels.length === 0 && (
+              <div className="px-5 py-12 text-center">
+                <div className="font-medium text-foreground">
+                  未找到匹配的模型
+                </div>
+                <div className="mt-2 text-sm text-muted-foreground">
+                  请调整关键词或筛选条件后再试。
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="mt-5 flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            {filteredModels.length === 0
+              ? "没有数据"
+              : `显示 ${pageStart + 1}-${Math.min(pageEnd, filteredModels.length)} / 共 ${filteredModels.length} 个模型`}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon-sm"
+              className="border-hairline-strong text-muted-foreground hover:text-foreground"
+              disabled={safeCurrentPage <= 1}
+              onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
+              aria-label="上一页"
+            >
+              <ChevronLeft size={15} />
+            </Button>
+
+            {Array.from({ length: totalPages }, (_, index) => index + 1).map(
+              (page) => (
+                <Button
+                  key={page}
+                  variant={page === safeCurrentPage ? "default" : "outline"}
+                  size="sm"
+                  className={[
+                    "h-8 min-w-8 px-2",
+                    page === safeCurrentPage
+                      ? ""
+                      : "border-hairline-strong text-muted-foreground hover:text-foreground",
+                  ].join(" ")}
+                  onClick={() => setCurrentPage(page)}
+                >
+                  {page}
+                </Button>
+              ),
+            )}
+
+            <Button
+              variant="outline"
+              size="icon-sm"
+              className="border-hairline-strong text-muted-foreground hover:text-foreground"
+              disabled={safeCurrentPage >= totalPages}
+              onClick={() =>
+                setCurrentPage((page) => Math.min(totalPages, page + 1))
+              }
+              aria-label="下一页"
+            >
+              <ChevronRight size={15} />
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-h-[calc(100vh-3rem)] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{editingId ? "编辑模型" : "添加模型"}</DialogTitle>
+            <DialogDescription>
+              填写资源名称、模型 ID、资源类型、接口类型与访问凭证。
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-5">
+            <div className="block">
+              <FieldLabel
+                htmlFor="model-name"
+                hint={{
+                  description:
+                    "在控制台中展示的资源别名，便于识别和管理，可与模型 ID 不同。",
+                  example: "DeepSeek-V3、Qwen-Max",
+                }}
+              >
+                资源名称
+              </FieldLabel>
+              <Input
+                id="model-name"
+                value={form.name}
+                autoFocus
+                onChange={(event) => updateForm("name", event.target.value)}
+                placeholder="请输入资源名称"
+                className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+              />
+            </div>
+
+            <div className="block">
+              <FieldLabel
+                htmlFor="model-id"
+                hint={{
+                  description:
+                    "调用 API 时传入的模型标识，需与服务商文档中的名称完全一致。",
+                  example: "deepseek-chat、qwen-max、paraformer-realtime-v2",
+                }}
+              >
+                模型 ID
+              </FieldLabel>
+              <Input
+                id="model-id"
+                value={form.modelId}
+                onChange={(event) =>
+                  updateForm("modelId", event.target.value)
+                }
+                placeholder="例如 deepseek-chat"
+                className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+              />
+            </div>
+
+            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+              <div className="block">
+                <FieldLabel
+                  hint={{
+                    description:
+                      "模型在语音管线中的能力分类，决定可选的接口类型与后续编排用途。",
+                    example: "LLM、ASR、TTS、Realtime、Embedding",
+                  }}
+                >
+                  资源类型
+                </FieldLabel>
+                <Select
+                  value={form.type}
+                  onValueChange={(value) => handleTypeChange(value as ModelType)}
+                >
+                  <SelectTrigger className="w-full border-hairline-strong bg-background text-foreground">
+                    <SelectValue placeholder="请选择资源类型" />
+                  </SelectTrigger>
+                  <SelectContent className="border-hairline bg-popover text-popover-foreground">
+                    {modelTypes.map((type) => (
+                      <SelectItem key={type} value={type}>
+                        {type}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="block">
+                <FieldLabel
+                  hint={{
+                    description:
+                      "服务商 API 的协议或适配器类型，需与所选资源类型匹配。",
+                    example: "openai、xfyun、dashscope、gemini",
+                  }}
+                >
+                  接口类型
+                </FieldLabel>
+                <Select
+                  value={form.interfaceType}
+                  onValueChange={(value) =>
+                    updateForm("interfaceType", value as InterfaceType)
+                  }
+                >
+                  <SelectTrigger className="w-full border-hairline-strong bg-background text-foreground">
+                    <SelectValue placeholder="请选择接口类型" />
+                  </SelectTrigger>
+                  <SelectContent className="border-hairline bg-popover text-popover-foreground">
+                    {interfaceOptions.map((item) => (
+                      <SelectItem key={item} value={item}>
+                        {item}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="block">
+              <FieldLabel
+                htmlFor="model-api-url"
+                hint={{
+                  description:
+                    "模型服务的 Base URL 或接口根地址，通常以 /v1 结尾，不含具体路径参数。",
+                  example: "https://api.deepseek.com/v1",
+                }}
+              >
+                API URL
+              </FieldLabel>
+              <Input
+                id="model-api-url"
+                value={form.apiUrl}
+                onChange={(event) => updateForm("apiUrl", event.target.value)}
+                placeholder="https://api.example.com/v1"
+                className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+              />
+            </div>
+
+            <div className="block">
+              <FieldLabel
+                htmlFor="model-api-key"
+                hint={{
+                  description:
+                    "访问模型服务的鉴权密钥，由服务商控制台生成，请妥善保管勿泄露。",
+                  example: "sk-xxxxxxxx",
+                }}
+              >
+                API Key
+              </FieldLabel>
+              <div className="relative">
+                <Input
+                  id="model-api-key"
+                  value={form.apiKey}
+                  type={showKey ? "text" : "password"}
+                  onChange={(event) => updateForm("apiKey", event.target.value)}
+                  placeholder="请输入 API Key"
+                  className="border-hairline-strong bg-background pr-10 text-foreground placeholder:text-muted-soft"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowKey((value) => !value)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-soft transition-colors hover:text-foreground"
+                  aria-label={showKey ? "隐藏 API Key" : "显示 API Key"}
+                >
+                  {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="sm:items-center sm:justify-between">
+            <div className="flex items-center gap-3">
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-2 border-hairline-strong text-muted-foreground hover:text-foreground"
+                disabled={!canSave || testing}
+                onClick={handleTestConnection}
+              >
+                {testing ? (
+                  <Loader2 size={14} className="animate-spin" />
+                ) : (
+                  <Plug size={14} />
+                )}
+                测试连接
+              </Button>
+              {testResult === "ok" && (
+                <span className="flex items-center gap-1.5 text-xs text-emerald-500">
+                  <CheckCircle2 size={14} />
+                  连接成功
+                </span>
+              )}
+              {testResult === "fail" && (
+                <span className="flex items-center gap-1.5 text-xs text-destructive">
+                  <XCircle size={14} />
+                  连接失败
+                </span>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                className="border-hairline-strong text-muted-foreground hover:text-foreground"
+                onClick={() => setDialogOpen(false)}
+              >
+                取消
+              </Button>
+              <Button
+                className="gap-2"
+                disabled={!canSave}
+                onClick={() => setDialogOpen(false)}
+              >
+                <Brain size={16} />
+                {editingId ? "保存" : "添加"}
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function FieldLabel({
+  htmlFor,
+  children,
+  hint,
+}: {
+  htmlFor?: string;
+  children: ReactNode;
+  hint: { description: string; example?: string };
+}) {
+  return (
+    <div className="mb-2 flex items-center gap-1.5 text-sm font-medium text-foreground">
+      <label htmlFor={htmlFor}>{children}</label>
+      <HelpHint {...hint} />
+    </div>
+  );
+}
+
+function HelpHint({
+  description,
+  example,
+}: {
+  description: string;
+  example?: string;
+}) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label="查看说明"
+          className="flex h-5 w-5 items-center justify-center rounded-full text-muted-soft transition-colors hover:bg-surface-strong hover:text-foreground"
+        >
+          <HelpCircle size={14} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-72 space-y-2 text-sm leading-6 text-muted-foreground"
+      >
+        <p>{description}</p>
+        {example && (
+          <p className="text-xs leading-5 text-muted-soft">
+            <span className="font-medium text-muted-foreground">填写样例：</span>
+            {example}
+          </p>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/frontend/src/components/pages/ComponentsToolsPage.tsx
+++ b/frontend/src/components/pages/ComponentsToolsPage.tsx
@@ -0,0 +1,10 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function ComponentsToolsPage() {
+  return (
+    <PlaceholderPage
+      title="工具资源"
+      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
+    />
+  );
+}
--- a/frontend/src/components/pages/DashboardPage.tsx
+++ b/frontend/src/components/pages/DashboardPage.tsx
@@ -0,0 +1,10 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function DashboardPage() {
+  return (
+    <PlaceholderPage
+      title="数据看板"
+      description="查看助手的对话数据、运行日志与调用明细。"
+    />
+  );
+}
--- a/frontend/src/components/pages/HistoryPage.tsx
+++ b/frontend/src/components/pages/HistoryPage.tsx
@@ -0,0 +1,10 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function HistoryPage() {
+  return (
+    <PlaceholderPage
+      title="历史记录"
+      description="查看助手的对话历史、运行日志与调用明细。"
+    />
+  );
+}
--- a/frontend/src/components/pages/HomePage.tsx
+++ b/frontend/src/components/pages/HomePage.tsx
@@ -0,0 +1,65 @@
+import { Boxes, Plus } from "lucide-react";
+import type { NavKey } from "@/components/layout/AppShell";
+import { Button } from "@/components/ui/button";
+
+type HomePageProps = {
+  onNavigate: (key: NavKey) => void;
+};
+
+export function HomePage({ onNavigate }: HomePageProps) {
+  return (
+    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-12 pt-[3vh]">
+      {/* Hero band — atmospheric gradient orbs behind editorial display copy */}
+      <section className="relative overflow-hidden rounded-3xl border border-hairline bg-canvas-soft px-10 py-16">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -right-24 -top-24 h-80 w-80 rounded-full opacity-60 blur-3xl"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle, color-mix(in srgb, var(--gradient-sky) 55%, transparent), transparent 70%)",
+          }}
+        />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -bottom-28 left-10 h-72 w-72 rounded-full opacity-50 blur-3xl"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle, color-mix(in srgb, var(--gradient-lavender) 55%, transparent), transparent 70%)",
+          }}
+        />
+
+        <div className="relative">
+          <h1 className="font-display display-xl text-ink">
+            你好，开始管理你的智能视频助手
+          </h1>
+
+          <p className="mt-6 max-w-xl text-[16px] leading-7 text-body">
+            在这里创建、配置、测试并发布 AI
+            视频助手，统一管理模型、语音识别、声音资源、知识库与工具插件。
+          </p>
+
+          <div className="mt-9 flex gap-3">
+            <Button
+              size="lg"
+              className="gap-2 px-5"
+              onClick={() => onNavigate("assistants")}
+            >
+              <Plus size={17} />
+              创建助手
+            </Button>
+
+            <Button
+              variant="outline"
+              size="lg"
+              className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+              onClick={() => onNavigate("components-models")}
+            >
+              <Boxes size={17} />
+              配置模型
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/frontend/src/components/pages/PlaceholderPage.tsx
+++ b/frontend/src/components/pages/PlaceholderPage.tsx
@@ -0,0 +1,47 @@
+type PlaceholderPageProps = {
+  title: string;
+  description: string;
+};
+
+export function PlaceholderPage({ title, description }: PlaceholderPageProps) {
+  return (
+    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
+      <div>
+        <h1 className="font-display display-lg text-ink">{title}</h1>
+        <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
+          {description}
+        </p>
+      </div>
+
+      <section className="relative overflow-hidden rounded-3xl border border-hairline bg-canvas-soft px-10 py-20 text-center">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -right-24 top-0 h-72 w-72 rounded-full opacity-50 blur-3xl"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle, color-mix(in srgb, var(--gradient-sky) 50%, transparent), transparent 70%)",
+          }}
+        />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -left-20 bottom-0 h-64 w-64 rounded-full opacity-45 blur-3xl"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle, color-mix(in srgb, var(--gradient-lavender) 50%, transparent), transparent 70%)",
+          }}
+        />
+        <div className="relative">
+          <div className="caption-label inline-flex rounded-full bg-surface-strong px-3 py-1 text-muted-foreground">
+            建设中
+          </div>
+          <p className="font-display display-sm mx-auto mt-5 max-w-md text-ink">
+            这个页面正在编写中
+          </p>
+          <p className="mx-auto mt-3 max-w-md text-sm leading-7 text-body">
+            页面骨架与设计语言已就绪，后续将填充具体功能与数据。
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/frontend/src/components/pages/ProfilePage.tsx
+++ b/frontend/src/components/pages/ProfilePage.tsx
@@ -0,0 +1,10 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function ProfilePage() {
+  return (
+    <PlaceholderPage
+      title="个人中心"
+      description="管理账户信息、团队成员、密钥与偏好设置。"
+    />
+  );
+}
--- a/frontend/src/components/pages/TestPage.tsx
+++ b/frontend/src/components/pages/TestPage.tsx
@@ -0,0 +1,10 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function TestPage() {
+  return (
+    <PlaceholderPage
+      title="测试助手"
+      description="在发布前通过实时视频对话测试助手的表现与交互体验。"
+    />
+  );
+}
--- a/frontend/src/components/pages/WorkflowPage.tsx
+++ b/frontend/src/components/pages/WorkflowPage.tsx
@@ -0,0 +1,10 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function WorkflowPage() {
+  return (
+    <PlaceholderPage
+      title="工作流"
+      description="管理与编排可复用的助手工作流，支持多轮任务与工具调用。"
+    />
+  );
+}
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,100 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-6 overflow-hidden rounded-4xl bg-card py-6 text-sm text-card-foreground shadow-md ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 dark:ring-foreground/10 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-4xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-heading text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-4xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,168 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-sm text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-md dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 right-4 bg-secondary"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1.5 my-1.5 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-3xl border border-transparent bg-input/50 px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 6,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border border-hairline bg-popover p-4 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverContent }
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1.5 p-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-3xl border border-transparent bg-input/50 px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-3 py-2.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(
+        "pointer-events-none -mx-1.5 my-1.5 h-px bg-border",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/frontend/src/components/ui/separator.tsx
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 right-4 bg-secondary"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -0,0 +1,705 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-input/50 shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn(
+        "flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-xl px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-xl p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-9 text-sm",
+        sm: "h-8 text-xs",
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-xl p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-xl px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-xl px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-xl"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-xl px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
--- a/frontend/src/components/ui/skeleton.tsx
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-2xl bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border-2 transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-unchecked:border-transparent data-unchecked:bg-input/90 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform not-dark:bg-clip-padding group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-6 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-4 data-checked:translate-x-[calc(100%-8px)] dark:data-checked:bg-primary-foreground data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-full p-1 text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-full border border-transparent! px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:rounded-2xl group-data-vertical/tabs:px-3 group-data-vertical/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-2xl border border-transparent bg-input/50 px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
--- a/frontend/src/components/ui/voice-visualizer.tsx
+++ b/frontend/src/components/ui/voice-visualizer.tsx
@@ -0,0 +1,270 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type VoiceVisualizerProps = {
+  /** 是否激活：true 时采集麦克风并随音量律动，false 时显示静态呼吸态 */
+  active?: boolean;
+  /** 外部分析器；提供后组件不再自行申请麦克风（便于复用现有音频链路） */
+  analyser?: AnalyserNode | null;
+  /** 外部音频流；提供后用它构建分析器，而不调用 getUserMedia */
+  stream?: MediaStream | null;
+  /** 画布直径（px） */
+  size?: number;
+  /** 环绕的频谱柱数量 */
+  barCount?: number;
+  /** 申请麦克风失败时回调 */
+  onError?: (error: unknown) => void;
+  className?: string;
+};
+
+type RGB = { r: number; g: number; b: number };
+
+function parseHex(hex: string, fallback: RGB): RGB {
+  const m = hex.trim().replace("#", "");
+  if (m.length === 6) {
+    return {
+      r: parseInt(m.slice(0, 2), 16),
+      g: parseInt(m.slice(2, 4), 16),
+      b: parseInt(m.slice(4, 6), 16),
+    };
+  }
+  if (m.length === 3) {
+    return {
+      r: parseInt(m[0] + m[0], 16),
+      g: parseInt(m[1] + m[1], 16),
+      b: parseInt(m[2] + m[2], 16),
+    };
+  }
+  return fallback;
+}
+
+function rgba({ r, g, b }: RGB, a: number) {
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+function mix(a: RGB, b: RGB, t: number): RGB {
+  return {
+    r: Math.round(a.r + (b.r - a.r) * t),
+    g: Math.round(a.g + (b.g - a.g) * t),
+    b: Math.round(a.b + (b.b - a.b) * t),
+  };
+}
+
+/** 在一组首尾相连的颜色之间取环形插值 */
+function cyclicColor(stops: RGB[], p: number): RGB {
+  const n = stops.length;
+  const scaled = (p % 1) * n;
+  const i = Math.floor(scaled);
+  return mix(stops[i % n], stops[(i + 1) % n], scaled - i);
+}
+
+export function VoiceVisualizer({
+  active = false,
+  analyser = null,
+  stream = null,
+  size = 200,
+  barCount = 72,
+  onError,
+  className,
+}: VoiceVisualizerProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const analyserRef = React.useRef<AnalyserNode | null>(null);
+  const smoothRef = React.useRef<Float32Array>(new Float32Array(barCount));
+  const onErrorRef = React.useRef(onError);
+  React.useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+
+  // 音频接入：优先用外部 analyser / stream，否则在 active 时申请麦克风
+  React.useEffect(() => {
+    let cancelled = false;
+    let ctx: AudioContext | null = null;
+    let micStream: MediaStream | null = null;
+
+    async function setup() {
+      if (analyser) {
+        analyserRef.current = analyser;
+        return;
+      }
+      if (!active) {
+        analyserRef.current = null;
+        return;
+      }
+      try {
+        const AudioCtor =
+          window.AudioContext ||
+          (window as unknown as { webkitAudioContext: typeof AudioContext })
+            .webkitAudioContext;
+        ctx = new AudioCtor();
+
+        let source: MediaStreamAudioSourceNode;
+        if (stream) {
+          source = ctx.createMediaStreamSource(stream);
+        } else {
+          micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          if (cancelled) {
+            micStream.getTracks().forEach((track) => track.stop());
+            return;
+          }
+          source = ctx.createMediaStreamSource(micStream);
+        }
+
+        const node = ctx.createAnalyser();
+        node.fftSize = 256;
+        node.smoothingTimeConstant = 0.82;
+        source.connect(node);
+        analyserRef.current = node;
+      } catch (error) {
+        if (!cancelled) onErrorRef.current?.(error);
+      }
+    }
+
+    setup();
+
+    return () => {
+      cancelled = true;
+      analyserRef.current = analyser ?? null;
+      micStream?.getTracks().forEach((track) => track.stop());
+      ctx?.close().catch(() => {});
+    };
+  }, [active, analyser, stream]);
+
+  // 绘制循环
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = size * dpr;
+    canvas.height = size * dpr;
+    ctx.scale(dpr, dpr);
+
+    if (smoothRef.current.length !== barCount) {
+      smoothRef.current = new Float32Array(barCount);
+    }
+    const smooth = smoothRef.current;
+
+    const cx = size / 2;
+    const cy = size / 2;
+    const orbR = size * 0.2;
+    const maxBar = size * 0.18;
+    const freq = new Uint8Array(128);
+
+    let raf = 0;
+    let t = 0;
+
+    const draw = () => {
+      t += 0.016;
+
+      const fallbackSky = { r: 95, g: 134, b: 184 };
+      const fallbackLav = { r: 138, g: 120, b: 173 };
+      const fallbackRose = { r: 176, g: 125, b: 140 };
+      const style = getComputedStyle(canvas);
+      const sky = parseHex(
+        style.getPropertyValue("--gradient-sky"),
+        fallbackSky,
+      );
+      const lav = parseHex(
+        style.getPropertyValue("--gradient-lavender"),
+        fallbackLav,
+      );
+      const rose = parseHex(
+        style.getPropertyValue("--gradient-rose"),
+        fallbackRose,
+      );
+      const palette = [sky, lav, rose];
+
+      const node = analyserRef.current;
+      if (node) {
+        node.getByteFrequencyData(freq);
+      }
+
+      let energy = 0;
+      for (let i = 0; i < barCount; i++) {
+        let target: number;
+        if (node) {
+          // 取低中频段（人声主要能量）映射到环形
+          const bin = Math.floor((i / barCount) * (freq.length * 0.7));
+          target = freq[bin] / 255;
+        } else {
+          // 静态呼吸态
+          target = 0.1 + 0.06 * (0.5 + 0.5 * Math.sin(t * 1.6 + i * 0.35));
+        }
+        smooth[i] += (target - smooth[i]) * 0.28;
+        energy += smooth[i];
+      }
+      energy /= barCount;
+
+      ctx.clearRect(0, 0, size, size);
+      const breathe = 0.5 + 0.5 * Math.sin(t * 1.4);
+      const pulse = 1 + energy * 0.12 + breathe * 0.02;
+
+      // 外层光晕
+      const glow = ctx.createRadialGradient(
+        cx,
+        cy,
+        orbR * 0.3,
+        cx,
+        cy,
+        size * 0.5,
+      );
+      glow.addColorStop(0, rgba(sky, 0.18 + energy * 0.35));
+      glow.addColorStop(0.55, rgba(lav, 0.08 + energy * 0.18));
+      glow.addColorStop(1, rgba(lav, 0));
+      ctx.fillStyle = glow;
+      ctx.fillRect(0, 0, size, size);
+
+      // 环形频谱柱
+      ctx.lineCap = "round";
+      ctx.lineWidth = Math.max(2, size * 0.012);
+      const rotation = t * 0.15;
+      for (let i = 0; i < barCount; i++) {
+        const angle = (i / barCount) * Math.PI * 2 + rotation;
+        const v = smooth[i];
+        const r0 = orbR * pulse + size * 0.03;
+        const r1 = r0 + maxBar * v + 1.5;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const color = cyclicColor(palette, i / barCount);
+        ctx.strokeStyle = rgba(color, 0.55 + v * 0.4);
+        ctx.shadowColor = rgba(color, 0.8);
+        ctx.shadowBlur = 6 + v * 16;
+        ctx.beginPath();
+        ctx.moveTo(cx + cos * r0, cy + sin * r0);
+        ctx.lineTo(cx + cos * r1, cy + sin * r1);
+        ctx.stroke();
+      }
+      ctx.shadowBlur = 0;
+
+      // 中心柔光：随音量发亮，不画实体球
+      const coreR = orbR * pulse;
+      const core = ctx.createRadialGradient(cx, cy, 0, cx, cy, coreR);
+      core.addColorStop(0, rgba(sky, 0.22 + energy * 0.4));
+      core.addColorStop(0.6, rgba(lav, 0.06 + energy * 0.15));
+      core.addColorStop(1, rgba(lav, 0));
+      ctx.beginPath();
+      ctx.arc(cx, cy, coreR, 0, Math.PI * 2);
+      ctx.fillStyle = core;
+      ctx.fill();
+
+      raf = requestAnimationFrame(draw);
+    };
+
+    raf = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(raf);
+  }, [size, barCount]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      role="img"
+      aria-label="麦克风音频可视化"
+      style={{ width: size, height: size }}
+      className={cn("select-none", className)}
+    />
+  );
+}