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>

frontend/src/app/globals.css

@@ -0,0 +1,234 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-display: var(--font-display);
+  --font-heading: var(--font-display);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+
+  /* Editorial (ElevenLabs-derived) tokens — navy palette */
+  --color-canvas-soft: var(--canvas-soft);
+  --color-surface-strong: var(--surface-strong);
+  --color-ink: var(--ink);
+  --color-body: var(--body-text);
+  --color-muted-soft: var(--muted-soft);
+  --color-hairline: var(--hairline);
+  --color-hairline-soft: var(--hairline-soft);
+  --color-hairline-strong: var(--hairline-strong);
+  --color-on-primary: var(--on-primary);
+  --color-success: var(--success);
+  --color-gradient-mint: var(--gradient-mint);
+  --color-gradient-peach: var(--gradient-peach);
+  --color-gradient-lavender: var(--gradient-lavender);
+  --color-gradient-sky: var(--gradient-sky);
+  --color-gradient-rose: var(--gradient-rose);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/* ---------- Light navy (editorial off-white, navy ink) ---------- */
+:root {
+  --background: #f3f5fb;
+  --foreground: #0f1b33;
+  --card: #ffffff;
+  --card-foreground: #0f1b33;
+  --popover: #ffffff;
+  --popover-foreground: #0f1b33;
+  --primary: #1b2741;
+  --primary-foreground: #ffffff;
+  --secondary: #e9edf7;
+  --secondary-foreground: #1b2741;
+  --muted: #eef1f8;
+  --muted-foreground: #5d6b86;
+  --accent: #e9edf7;
+  --accent-foreground: #1b2741;
+  --destructive: #dc2626;
+  --border: #dfe4f0;
+  --input: #cbd3e4;
+  --ring: #94a0bd;
+  --chart-1: #1b2741;
+  --chart-2: #3a4a6b;
+  --chart-3: #5d6b86;
+  --chart-4: #94a0bd;
+  --chart-5: #c8d0e2;
+  --radius: 0.75rem;
+
+  /* Editorial tokens */
+  --canvas-soft: #f9fafd;
+  --surface-strong: #e9edf7;
+  --ink: #0c1426;
+  --body-text: #44516c;
+  --muted-soft: #94a0bd;
+  --hairline: #e3e7f1;
+  --hairline-soft: #eef1f8;
+  --hairline-strong: #cbd3e4;
+  --on-primary: #ffffff;
+  --success: #16a34a;
+
+  /* Atmospheric pastel orbs (cool-leaning for navy) */
+  --gradient-mint: #a7e5d3;
+  --gradient-peach: #f4c5a8;
+  --gradient-lavender: #c8b8e0;
+  --gradient-sky: #a8c8e8;
+  --gradient-rose: #e8b8c4;
+
+  --sidebar: #ffffff;
+  --sidebar-foreground: #0f1b33;
+  --sidebar-primary: #1b2741;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #eef1f8;
+  --sidebar-accent-foreground: #1b2741;
+  --sidebar-border: #e3e7f1;
+  --sidebar-ring: #94a0bd;
+}
+
+/* ---------- Dark navy (deep navy canvas, off-white ink) ---------- */
+.dark {
+  --background: #070b16;
+  --foreground: #e8edf9;
+  --card: #0e1626;
+  --card-foreground: #e8edf9;
+  --popover: #0e1626;
+  --popover-foreground: #e8edf9;
+  --primary: #e8edf9;
+  --primary-foreground: #0c1426;
+  --secondary: #18233a;
+  --secondary-foreground: #e8edf9;
+  --muted: #141d30;
+  --muted-foreground: #93a0bb;
+  --accent: #18233a;
+  --accent-foreground: #e8edf9;
+  --destructive: #f87171;
+  --border: #1b2740;
+  --input: #283450;
+  --ring: #4a5876;
+  --chart-1: #e8edf9;
+  --chart-2: #c8d0e2;
+  --chart-3: #93a0bb;
+  --chart-4: #5d6b86;
+  --chart-5: #2a3654;
+
+  /* Editorial tokens */
+  --canvas-soft: #0b1322;
+  --surface-strong: #18233a;
+  --ink: #f1f5ff;
+  --body-text: #a6b2cb;
+  --muted-soft: #6c7a96;
+  --hairline: #1b2740;
+  --hairline-soft: #141d30;
+  --hairline-strong: #283450;
+  --on-primary: #0c1426;
+  --success: #4ade80;
+
+  --gradient-mint: #5fae9b;
+  --gradient-peach: #c08a6b;
+  --gradient-lavender: #8a78ad;
+  --gradient-sky: #5f86b8;
+  --gradient-rose: #b07d8c;
+
+  --sidebar: #0a111e;
+  --sidebar-foreground: #e8edf9;
+  --sidebar-primary: #e8edf9;
+  --sidebar-primary-foreground: #0c1426;
+  --sidebar-accent: #18233a;
+  --sidebar-accent-foreground: #e8edf9;
+  --sidebar-border: #1b2740;
+  --sidebar-ring: #4a5876;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    letter-spacing: 0.01em;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer components {
+  /* Waldenburg Light substitute — EB Garamond at weight 300. The editorial
+     display signature: serif, light, tightly tracked. Never bold. */
+  .font-display {
+    font-family: var(--font-display), "Times New Roman", serif;
+    font-weight: 300;
+    letter-spacing: -0.01em;
+  }
+  .display-mega {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    line-height: 1.05;
+    letter-spacing: -0.03em;
+  }
+  .display-xl {
+    font-size: clamp(2rem, 4vw, 3rem);
+    line-height: 1.08;
+    letter-spacing: -0.02em;
+  }
+  .display-lg {
+    font-size: 2.25rem;
+    line-height: 1.17;
+    letter-spacing: -0.01em;
+  }
+  .display-md {
+    font-size: 2rem;
+    line-height: 1.13;
+    letter-spacing: -0.01em;
+  }
+  .display-sm {
+    font-size: 1.5rem;
+    line-height: 1.2;
+  }
+
+  /* Caption label — uppercase, tracked, the editorial section marker */
+  .caption-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import { Geist_Mono, Inter, Cormorant_Garamond } from "next/font/google";
+import "./globals.css";
+import { cn } from "@/lib/utils";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
+
+// Waldenburg Light is licensed; Cormorant Garamond at weight 300 is a close
+// open-source substitute for the light editorial display voice.
+const display = Cormorant_Garamond({
+  subsets: ["latin"],
+  weight: ["300", "400", "500"],
+  variable: "--font-display",
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "AI 视频助手 · 管理台",
+  description: "创建、配置、测试并发布 AI 视频助手",
+};
+
+// Apply the persisted theme before paint to avoid a flash. Defaults to dark navy.
+const themeScript = `(function(){try{var t=localStorage.getItem('theme');if(t==='light'){document.documentElement.classList.remove('dark')}else{document.documentElement.classList.add('dark')}}catch(e){document.documentElement.classList.add('dark')}})();`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="zh-CN"
+      className={cn(
+        "h-full",
+        "antialiased",
+        "dark",
+        geistMono.variable,
+        "font-sans",
+        inter.variable,
+        display.variable,
+      )}
+      suppressHydrationWarning
+    >
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { AppShell } from "@/components/layout/AppShell";
+
+export default function Home() {
+  return <AppShell />;
+}