claude-code

web/app/api/chat/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3001";
+
+    const response = await fetch(`${apiUrl}/api/chat`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(process.env.ANTHROPIC_API_KEY
+          ? { Authorization: `Bearer ${process.env.ANTHROPIC_API_KEY}` }
+          : {}),
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Backend request failed" },
+        { status: response.status }
+      );
+    }
+
+    // Stream the response through
+    return new NextResponse(response.body, {
+      headers: {
+        "Content-Type": response.headers.get("Content-Type") ?? "application/json",
+      },
+    });
+  } catch (error) {
+    console.error("Chat API error:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

web/app/api/export/route.ts

@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from "next/server";
+import type { Conversation, ExportOptions } from "@/lib/types";
+import { toMarkdown } from "@/lib/export/markdown";
+import { toJSON } from "@/lib/export/json";
+import { toHTML } from "@/lib/export/html";
+import { toPlainText } from "@/lib/export/plaintext";
+
+interface ExportRequest {
+  conversation: Conversation;
+  options: ExportOptions;
+}
+
+const MIME: Record<string, string> = {
+  markdown: "text/markdown; charset=utf-8",
+  json: "application/json",
+  html: "text/html; charset=utf-8",
+  plaintext: "text/plain; charset=utf-8",
+};
+
+const EXT: Record<string, string> = {
+  markdown: "md",
+  json: "json",
+  html: "html",
+  plaintext: "txt",
+};
+
+export async function POST(req: NextRequest) {
+  let body: ExportRequest;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const { conversation, options } = body;
+  if (!conversation || !options) {
+    return NextResponse.json(
+      { error: "Missing conversation or options" },
+      { status: 400 }
+    );
+  }
+
+  const { format } = options;
+
+  if (format === "pdf") {
+    // PDF is handled client-side via window.print()
+    return NextResponse.json(
+      { error: "PDF export is handled client-side" },
+      { status: 400 }
+    );
+  }
+
+  let content: string;
+  switch (format) {
+    case "markdown":
+      content = toMarkdown(conversation, options);
+      break;
+    case "json":
+      content = toJSON(conversation, options);
+      break;
+    case "html":
+      content = toHTML(conversation, options);
+      break;
+    case "plaintext":
+      content = toPlainText(conversation, options);
+      break;
+    default:
+      return NextResponse.json({ error: `Unknown format: ${format}` }, { status: 400 });
+  }
+
+  const slug = conversation.title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 50);
+  const filename = `${slug || "conversation"}.${EXT[format]}`;
+
+  return new NextResponse(content, {
+    status: 200,
+    headers: {
+      "Content-Type": MIME[format],
+      "Content-Disposition": `attachment; filename="${filename}"`,
+    },
+  });
+}

web/app/api/files/read/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs/promises";
+import path from "path";
+
+const IMAGE_MIME: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
+};
+
+export async function GET(request: NextRequest) {
+  const filePath = request.nextUrl.searchParams.get("path");
+  if (!filePath) {
+    return NextResponse.json({ error: "path parameter required" }, { status: 400 });
+  }
+
+  const resolvedPath = path.resolve(filePath);
+
+  try {
+    const stats = await fs.stat(resolvedPath);
+    if (stats.isDirectory()) {
+      return NextResponse.json({ error: "path is a directory" }, { status: 400 });
+    }
+
+    const ext = resolvedPath.split(".").pop()?.toLowerCase() ?? "";
+
+    // Binary images: return base64 data URL
+    if (ext in IMAGE_MIME) {
+      const buffer = await fs.readFile(resolvedPath);
+      const base64 = buffer.toString("base64");
+      return NextResponse.json({
+        content: `data:${IMAGE_MIME[ext]};base64,${base64}`,
+        isImage: true,
+        size: stats.size,
+        modified: stats.mtime.toISOString(),
+      });
+    }
+
+    // Text (including SVG)
+    const content = await fs.readFile(resolvedPath, "utf-8");
+    return NextResponse.json({
+      content,
+      isImage: ext === "svg",
+      size: stats.size,
+      modified: stats.mtime.toISOString(),
+    });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json({ error: message }, { status: 404 });
+  }
+}

web/app/api/files/write/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs/promises";
+import path from "path";
+
+export async function POST(request: NextRequest) {
+  let body: { path?: string; content?: string };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "invalid JSON body" }, { status: 400 });
+  }
+
+  const { path: filePath, content } = body;
+  if (!filePath || content === undefined) {
+    return NextResponse.json(
+      { error: "path and content are required" },
+      { status: 400 }
+    );
+  }
+
+  const resolvedPath = path.resolve(filePath);
+
+  try {
+    await fs.writeFile(resolvedPath, content, "utf-8");
+    const stats = await fs.stat(resolvedPath);
+    return NextResponse.json({ success: true, size: stats.size });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

web/app/api/share/[shareId]/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getShare, revokeShare, verifySharePassword } from "@/lib/share-store";
+
+interface RouteContext {
+  params: { shareId: string };
+}
+
+export async function GET(req: NextRequest, { params }: RouteContext) {
+  const { shareId } = params;
+  const share = getShare(shareId);
+
+  if (!share) {
+    return NextResponse.json({ error: "Share not found or expired" }, { status: 404 });
+  }
+
+  if (share.visibility === "password") {
+    const pw = req.headers.get("x-share-password") ?? req.nextUrl.searchParams.get("password");
+    if (!pw || !verifySharePassword(shareId, pw)) {
+      return NextResponse.json({ error: "Password required", requiresPassword: true }, { status: 401 });
+    }
+  }
+
+  return NextResponse.json({
+    id: share.id,
+    title: share.conversation.title,
+    messages: share.conversation.messages,
+    model: share.conversation.model,
+    createdAt: share.conversation.createdAt,
+    shareCreatedAt: share.createdAt,
+  });
+}
+
+export async function DELETE(_req: NextRequest, { params }: RouteContext) {
+  const { shareId } = params;
+  const deleted = revokeShare(shareId);
+
+  if (!deleted) {
+    return NextResponse.json({ error: "Share not found" }, { status: 404 });
+  }
+
+  return NextResponse.json({ success: true });
+}

web/app/api/share/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+import { nanoid } from "nanoid";
+import type { Conversation } from "@/lib/types";
+import type { ShareVisibility, ShareExpiry } from "@/lib/share-store";
+import { createShare } from "@/lib/share-store";
+
+interface CreateShareRequest {
+  conversation: Conversation;
+  visibility: ShareVisibility;
+  password?: string;
+  expiry: ShareExpiry;
+}
+
+export async function POST(req: NextRequest) {
+  let body: CreateShareRequest;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const { conversation, visibility, password, expiry } = body;
+  if (!conversation || !visibility || !expiry) {
+    return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
+  }
+
+  if (visibility === "password" && !password) {
+    return NextResponse.json(
+      { error: "Password required for password-protected shares" },
+      { status: 400 }
+    );
+  }
+
+  const shareId = nanoid(12);
+  const share = createShare(shareId, { conversation, visibility, password, expiry });
+
+  const origin = req.headers.get("origin") ?? "";
+  const url = `${origin}/share/${shareId}`;
+
+  return NextResponse.json({
+    id: share.id,
+    conversationId: share.conversationId,
+    visibility: share.visibility,
+    hasPassword: !!share.passwordHash,
+    expiry: share.expiry,
+    expiresAt: share.expiresAt,
+    createdAt: share.createdAt,
+    url,
+  });
+}

web/app/globals.css

@@ -0,0 +1,227 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* =====================================================
+   DESIGN TOKENS — CSS Custom Properties
+   Dark theme is default; add .light to <html> for light
+   ===================================================== */
+@layer base {
+  :root {
+    /* Backgrounds */
+    --color-bg-primary: #09090b;
+    --color-bg-secondary: #18181b;
+    --color-bg-elevated: #27272a;
+
+    /* Text */
+    --color-text-primary: #fafafa;
+    --color-text-secondary: #a1a1aa;
+    --color-text-muted: #52525b;
+
+    /* Accent (brand purple) */
+    --color-accent: #8b5cf6;
+    --color-accent-hover: #7c3aed;
+    --color-accent-active: #6d28d9;
+    --color-accent-foreground: #ffffff;
+
+    /* Borders */
+    --color-border: #27272a;
+    --color-border-hover: #3f3f46;
+
+    /* Status */
+    --color-success: #22c55e;
+    --color-success-bg: rgba(34, 197, 94, 0.12);
+    --color-warning: #f59e0b;
+    --color-warning-bg: rgba(245, 158, 11, 0.12);
+    --color-error: #ef4444;
+    --color-error-bg: rgba(239, 68, 68, 0.12);
+    --color-info: #3b82f6;
+    --color-info-bg: rgba(59, 130, 246, 0.12);
+
+    /* Code */
+    --color-code-bg: #1f1f23;
+    --color-code-text: #a78bfa;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+
+    /* Border radius */
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius: 0.5rem;
+
+    /* Animation tokens */
+    --transition-fast: 100ms ease;
+    --transition-normal: 200ms ease;
+    --transition-slow: 300ms ease;
+
+    /* Tailwind / shadcn compat (HSL channel values) */
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 3.7% 10%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 3.7% 15.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 263.4 70% 50.4%;
+  }
+
+  /* Light theme override */
+  .light {
+    --color-bg-primary: #fafafa;
+    --color-bg-secondary: #f4f4f5;
+    --color-bg-elevated: #ffffff;
+
+    --color-text-primary: #09090b;
+    --color-text-secondary: #52525b;
+    --color-text-muted: #a1a1aa;
+
+    --color-accent: #7c3aed;
+    --color-accent-hover: #6d28d9;
+    --color-accent-active: #5b21b6;
+    --color-accent-foreground: #ffffff;
+
+    --color-border: #e4e4e7;
+    --color-border-hover: #d4d4d8;
+
+    --color-success: #16a34a;
+    --color-success-bg: rgba(22, 163, 74, 0.1);
+    --color-warning: #d97706;
+    --color-warning-bg: rgba(217, 119, 6, 0.1);
+    --color-error: #dc2626;
+    --color-error-bg: rgba(220, 38, 38, 0.1);
+    --color-info: #2563eb;
+    --color-info-bg: rgba(37, 99, 235, 0.1);
+
+    --color-code-bg: #f4f4f5;
+    --color-code-text: #7c3aed;
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+
+    --background: 0 0% 98%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 262.1 83.3% 57.8%;
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+    border-color: var(--color-border);
+  }
+
+  html {
+    color-scheme: dark;
+  }
+
+  html.light {
+    color-scheme: light;
+  }
+
+  body {
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    font-feature-settings: "rlig" 1, "calt" 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+  }
+
+  /* Focus visible ring */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
+
+/* =====================================================
+   ANIMATIONS
+   ===================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes slideUp {
+  from { transform: translateY(8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@keyframes slideDown {
+  from { transform: translateY(-8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@keyframes slideDownOut {
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(8px); opacity: 0; }
+}
+@keyframes scaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+@keyframes scaleOut {
+  from { transform: scale(1); opacity: 1; }
+  to { transform: scale(0.95); opacity: 0; }
+}
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes progress {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+
+/* =====================================================
+   SCROLLBAR
+   ===================================================== */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-hover);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}

web/app/layout.tsx

@@ -0,0 +1,56 @@
+import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import "./globals.css";
+import { ThemeProvider } from "@/components/layout/ThemeProvider";
+import { ToastProvider } from "@/components/notifications/ToastProvider";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const jetbrainsMono = localFont({
+  src: [
+    {
+      path: "../public/fonts/JetBrainsMono-Regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/JetBrainsMono-Medium.woff2",
+      weight: "500",
+      style: "normal",
+    },
+  ],
+  variable: "--font-jetbrains-mono",
+  display: "swap",
+  fallback: ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "monospace"],
+});
+
+export const metadata: Metadata = {
+  title: "Claude Code",
+  description: "Claude Code — AI-powered development assistant",
+  icons: {
+    icon: "/favicon.ico",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark" suppressHydrationWarning>
+      <body className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}>
+        <ThemeProvider>
+          <ToastProvider>
+            {children}
+          </ToastProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

web/app/page.tsx

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