@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/layout-auth/files/sign-up-page.tsx

@@ -0,0 +1,94 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export default function SignUpPage() {
+  return (
+    <div className="flex min-h-screen">
+      {/* Branded panel */}
+      <div className="hidden lg:flex lg:w-1/2 flex-col justify-between bg-primary p-12 text-primary-foreground">
+        <div>
+          <h1 className="text-2xl font-bold">{"{{headline}}"}</h1>
+        </div>
+        <div>
+          <h2 className="text-3xl font-bold leading-tight">Start building<br />in minutes.</h2>
+          <p className="mt-4 text-lg opacity-75">Free to start. No credit card required.</p>
+        </div>
+        <p className="text-sm opacity-50">© 2026 {"{{headline}}"}. All rights reserved.</p>
+      </div>
+
+      {/* Form panel */}
+      <div className="flex w-full items-center justify-center p-6 lg:w-1/2">
+        <Card className="w-full max-w-sm border-0 shadow-none">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl">Create your account</CardTitle>
+            <CardDescription>Get started with a free account</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Social signup */}
+            <div className="grid grid-cols-2 gap-3">
+              <Button variant="outline" className="w-full">
+                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
+                Google
+              </Button>
+              <Button variant="outline" className="w-full">
+                <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                GitHub
+              </Button>
+            </div>
+
+            <div className="relative">
+              <Separator />
+              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs text-muted-foreground">
+                or continue with email
+              </span>
+            </div>
+
+            <form className="space-y-4">
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <Label htmlFor="first-name">First name</Label>
+                  <Input id="first-name" placeholder="John" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="last-name">Last name</Label>
+                  <Input id="last-name" placeholder="Doe" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" type="email" placeholder="you@example.com" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input id="password" type="password" />
+              </div>
+              <div className="flex items-start gap-2">
+                <Checkbox id="terms" />
+                <Label htmlFor="terms" className="text-xs text-muted-foreground leading-tight">
+                  I agree to the{" "}
+                  <a href="/terms" className="text-primary hover:underline">Terms of Service</a>
+                  {" "}and{" "}
+                  <a href="/privacy" className="text-primary hover:underline">Privacy Policy</a>
+                </Label>
+              </div>
+              <Button type="submit" className="w-full">
+                Create Account
+              </Button>
+            </form>
+
+            <p className="text-center text-sm text-muted-foreground">
+              Already have an account?{" "}
+              <a href="/sign-in" className="font-medium text-primary hover:underline">
+                Sign in
+              </a>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-auth/manifest.json

@@ -0,0 +1,51 @@
+{
+  "id": "layout-auth",
+  "description": "Pre-built sign-in and sign-up pages with social login buttons, email/password form, and responsive two-column layout.",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts"
+  ],
+  "files": [
+    {
+      "source": "files/sign-in-page.tsx",
+      "target": "app/sign-in/page.tsx"
+    },
+    {
+      "source": "files/sign-up-page.tsx",
+      "target": "app/sign-up/page.tsx"
+    }
+  ],
+  "keywords": [
+    "sign in",
+    "sign up",
+    "login",
+    "register",
+    "auth pages",
+    "authentication pages",
+    "sign-in",
+    "sign-up",
+    "login page",
+    "register page",
+    "authentication"
+  ],
+  "buildHints": {
+    "pages": [
+      "/sign-in",
+      "/sign-up"
+    ],
+    "components": [
+      "SignInForm",
+      "SignUpForm",
+      "SocialButtons",
+      "AuthLayout"
+    ],
+    "architectureNotes": [
+      "Auth pages are pre-built with email/password + social login buttons.",
+      "Connect to your auth provider (Clerk, Better Auth, Supabase) by updating the form handlers.",
+      "The two-column layout shows a branded panel on desktop, form-only on mobile.",
+      "Add middleware.ts to protect routes and redirect unauthenticated users."
+    ]
+  }
+}

package/registry/layers/capability/layout-chat/files/chat-input.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { ArrowUp, Paperclip, Loader2 } from "lucide-react"
+
+interface ChatInputProps {
+  onSend: (message: string) => void
+  isLoading?: boolean
+}
+
+export function ChatInput({ onSend, isLoading }: ChatInputProps) {
+  const [value, setValue] = React.useState("")
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  const adjustHeight = () => {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = "auto"
+    el.style.height = `${Math.min(el.scrollHeight, 168)}px`
+  }
+
+  React.useEffect(adjustHeight, [value])
+
+  const handleSend = () => {
+    const trimmed = value.trim()
+    if (!trimmed || isLoading) return
+    onSend(trimmed)
+    setValue("")
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  return (
+    <div className="border-t bg-background px-4 py-3">
+      <div className="mx-auto flex max-w-3xl items-end gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="mb-0.5 shrink-0 text-muted-foreground hover:text-foreground"
+          disabled={isLoading}
+        >
+          <Paperclip className="h-4 w-4" />
+        </Button>
+        <Textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Send a message…"
+          disabled={isLoading}
+          rows={1}
+          className={cn(
+            "max-h-[168px] min-h-[40px] resize-none rounded-xl border-0 bg-muted px-4 py-2.5 text-sm",
+            "focus-visible:ring-1 focus-visible:ring-ring"
+          )}
+        />
+        <Button
+          size="icon"
+          className="mb-0.5 shrink-0 rounded-full"
+          disabled={!value.trim() || isLoading}
+          onClick={handleSend}
+        >
+          {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <ArrowUp className="h-4 w-4" />}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-chat/files/chat-message.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Avatar } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Copy, Check } from "lucide-react"
+
+interface ChatMessageProps {
+  role: "user" | "assistant"
+  content: string
+  timestamp?: Date
+  isStreaming?: boolean
+}
+
+function CodeBlock({ code, lang }: { code: string; lang?: string }) {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="group relative my-2 rounded-lg bg-zinc-950 dark:bg-zinc-900">
+      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-1.5">
+        <span className="text-xs text-zinc-400">{lang || "code"}</span>
+        <Button variant="ghost" size="icon" className="h-6 w-6 text-zinc-400 hover:text-zinc-200" onClick={handleCopy}>
+          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+        </Button>
+      </div>
+      <pre className="overflow-x-auto p-4 text-sm leading-relaxed">
+        <code className="text-zinc-100">{code}</code>
+      </pre>
+    </div>
+  )
+}
+
+function StreamingDots() {
+  return (
+    <div className="flex items-center gap-1 px-1 py-2">
+      <span className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:0ms]" />
+      <span className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:150ms]" />
+      <span className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:300ms]" />
+    </div>
+  )
+}
+
+function parseContent(content: string) {
+  const parts: React.ReactNode[] = []
+  const regex = /```(\w*)\n([\s\S]*?)```/g
+  let lastIndex = 0
+  let match
+
+  while ((match = regex.exec(content)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(<span key={lastIndex} className="whitespace-pre-wrap">{content.slice(lastIndex, match.index)}</span>)
+    }
+    parts.push(<CodeBlock key={match.index} lang={match[1]} code={match[2].trimEnd()} />)
+    lastIndex = regex.lastIndex
+  }
+
+  if (lastIndex < content.length) {
+    parts.push(<span key={lastIndex} className="whitespace-pre-wrap">{content.slice(lastIndex)}</span>)
+  }
+
+  return parts
+}
+
+export function ChatMessage({ role, content, timestamp, isStreaming }: ChatMessageProps) {
+  const isUser = role === "user"
+
+  return (
+    <div className={cn("flex gap-3 px-4 py-3", isUser && "flex-row-reverse")}>
+      {!isUser && (
+        <Avatar className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">
+          AI
+        </Avatar>
+      )}
+      <div className={cn("max-w-[75%] space-y-1", isUser && "items-end")}>
+        <div
+          className={cn(
+            "rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
+            isUser
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-foreground"
+          )}
+        >
+          {isStreaming && !content ? <StreamingDots /> : parseContent(content)}
+        </div>
+        {timestamp && (
+          <p className={cn("px-1 text-[11px] text-muted-foreground", isUser && "text-right")}>
+            {timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-chat/files/chat-page.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { ChatMessage } from "@/components/chat/chat-message"
+import { ChatInput } from "@/components/chat/chat-input"
+import { ChatSidebar } from "@/components/chat/chat-sidebar"
+import { Menu, ChevronDown, Settings } from "lucide-react"
+
+interface Message {
+  id: string
+  role: "user" | "assistant"
+  content: string
+  timestamp: Date
+}
+
+const sampleMessages: Message[] = [
+  { id: "1", role: "user", content: "Can you explain how streaming responses work?", timestamp: new Date(Date.now() - 300000) },
+  { id: "2", role: "assistant", content: "Streaming responses use Server-Sent Events (SSE) to send data incrementally from server to client. The server writes chunks of the response as they become available, and the client appends each chunk to the display in real-time.\n\nHere's a minimal example:\n\n```typescript\nexport async function POST(req: Request) {\n  const encoder = new TextEncoder()\n  const stream = new ReadableStream({\n    async start(controller) {\n      for (const chunk of chunks) {\n        controller.enqueue(encoder.encode(`data: ${chunk}\\n\\n`))\n      }\n      controller.close()\n    },\n  })\n  return new Response(stream, {\n    headers: { 'Content-Type': 'text/event-stream' },\n  })\n}\n```\n\nThe client reads from this stream and updates the UI as each token arrives.", timestamp: new Date(Date.now() - 240000) },
+  { id: "3", role: "user", content: "How do I handle errors during streaming?", timestamp: new Date(Date.now() - 180000) },
+  { id: "4", role: "assistant", content: "You have a few options for error handling during streaming:\n\n1. **Send an error event** — Write a special SSE event type that the client recognizes as an error and displays appropriately.\n2. **Close the stream** — If the error is unrecoverable, close the stream and let the client detect the incomplete response.\n3. **Retry logic** — Implement exponential backoff on the client side for transient failures.\n\nThe key is to always surface errors to the user rather than silently failing.", timestamp: new Date(Date.now() - 120000) },
+]
+
+const sampleConversations = [
+  { id: "conv-1", title: "Streaming responses", lastMessage: "How do I handle errors during streaming?", updatedAt: new Date(Date.now() - 120000) },
+  { id: "conv-2", title: "Database migrations", lastMessage: "What's the best migration tool for Postgres?", updatedAt: new Date(Date.now() - 3600000) },
+  { id: "conv-3", title: "Auth setup", lastMessage: "How do I add OAuth to Next.js?", updatedAt: new Date(Date.now() - 86400000) },
+]
+
+const models = ["GPT-4o", "Claude Sonnet", "Claude Opus", "Llama 3"]
+
+export default function ChatPage() {
+  const [messages, setMessages] = React.useState<Message[]>(sampleMessages)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [activeConv, setActiveConv] = React.useState("conv-1")
+  const [sidebarOpen, setSidebarOpen] = React.useState(false)
+  const [model, setModel] = React.useState(models[0])
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    const el = scrollRef.current
+    if (el) el.scrollTop = el.scrollHeight
+  }, [messages])
+
+  const handleSend = (content: string) => {
+    const userMsg: Message = { id: crypto.randomUUID(), role: "user", content, timestamp: new Date() }
+    setMessages((prev) => [...prev, userMsg])
+    setIsLoading(true)
+
+    const streamingMsg: Message = { id: crypto.randomUUID(), role: "assistant", content: "", timestamp: new Date() }
+    setMessages((prev) => [...prev, streamingMsg])
+
+    const response = "This is a simulated response. Wire up `/api/chat` to your LLM provider to get real streaming responses."
+    let i = 0
+    const interval = setInterval(() => {
+      i += 3
+      if (i >= response.length) {
+        setMessages((prev) =>
+          prev.map((m) => (m.id === streamingMsg.id ? { ...m, content: response } : m))
+        )
+        setIsLoading(false)
+        clearInterval(interval)
+      } else {
+        setMessages((prev) =>
+          prev.map((m) => (m.id === streamingMsg.id ? { ...m, content: response.slice(0, i) } : m))
+        )
+      }
+    }, 30)
+  }
+
+  return (
+    <div className="flex h-screen bg-background">
+      <aside className="hidden w-72 border-r lg:block">
+        <ChatSidebar
+          conversations={sampleConversations}
+          activeId={activeConv}
+          onSelect={setActiveConv}
+          onNew={() => setMessages([])}
+        />
+      </aside>
+
+      <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
+        <SheetContent side="left" className="w-72 p-0">
+          <ChatSidebar
+            conversations={sampleConversations}
+            activeId={activeConv}
+            onSelect={(id) => { setActiveConv(id); setSidebarOpen(false) }}
+            onNew={() => { setMessages([]); setSidebarOpen(false) }}
+          />
+        </SheetContent>
+      </Sheet>
+
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <header className="flex h-14 items-center gap-3 border-b px-4">
+          <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setSidebarOpen(true)}>
+            <Menu className="h-5 w-5" />
+          </Button>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="gap-1 text-sm font-medium">
+                {model}
+                <ChevronDown className="h-3 w-3 text-muted-foreground" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {models.map((m) => (
+                <DropdownMenuItem key={m} onClick={() => setModel(m)}>
+                  {m}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <div className="flex-1" />
+
+          <Button variant="ghost" size="icon">
+            <Settings className="h-4 w-4" />
+          </Button>
+        </header>
+
+        <ScrollArea className="flex-1" ref={scrollRef}>
+          <div className="mx-auto max-w-3xl py-4">
+            {messages.map((msg) => (
+              <ChatMessage
+                key={msg.id}
+                role={msg.role}
+                content={msg.content}
+                timestamp={msg.timestamp}
+                isStreaming={isLoading && msg === messages[messages.length - 1] && msg.role === "assistant"}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+
+        <ChatInput onSend={handleSend} isLoading={isLoading} />
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-chat/files/chat-sidebar.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Plus, MessageSquare } from "lucide-react"
+
+interface Conversation {
+  id: string
+  title: string
+  lastMessage: string
+  updatedAt: Date
+}
+
+interface ChatSidebarProps {
+  conversations: Conversation[]
+  activeId?: string
+  onSelect: (id: string) => void
+  onNew: () => void
+}
+
+function formatRelativeTime(date: Date) {
+  const diff = Date.now() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 1) return "Just now"
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+
+export function ChatSidebar({ conversations, activeId, onSelect, onNew }: ChatSidebarProps) {
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex h-14 items-center justify-between border-b px-4">
+        <span className="text-sm font-semibold">Chats</span>
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onNew}>
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="space-y-0.5 p-2">
+          {conversations.map((conv) => (
+            <button
+              key={conv.id}
+              onClick={() => onSelect(conv.id)}
+              className={cn(
+                "flex w-full items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors",
+                "hover:bg-accent",
+                activeId === conv.id && "bg-accent"
+              )}
+            >
+              <MessageSquare className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+              <div className="flex-1 overflow-hidden">
+                <p className="truncate text-sm font-medium">{conv.title}</p>
+                <p className="truncate text-xs text-muted-foreground">{conv.lastMessage}</p>
+              </div>
+              <span className="shrink-0 text-[11px] text-muted-foreground">
+                {formatRelativeTime(conv.updatedAt)}
+              </span>
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
+
+      <Separator />
+      <div className="p-3">
+        <p className="text-center text-xs text-muted-foreground">
+          {conversations.length} conversation{conversations.length !== 1 && "s"}
+        </p>
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-chat/files/media-manifest.json

@@ -0,0 +1,24 @@
+{
+  "slots": [
+    {
+      "id": "ai-avatar",
+      "path": "public/images/ai-avatar.png",
+      "width": 64,
+      "height": 64,
+      "purpose": "AI assistant avatar shown next to assistant messages",
+      "prompt": "Friendly AI assistant avatar icon, abstract geometric face with primary brand color, circular",
+      "fallback": "icon",
+      "usedIn": "src/components/chat/chat-message.tsx"
+    },
+    {
+      "id": "chat-empty-state",
+      "path": "public/images/chat-empty.svg",
+      "width": 200,
+      "height": 160,
+      "purpose": "Illustration for empty chat state when no conversation is selected",
+      "prompt": "Minimal illustration of chat bubbles floating, muted pastel colors",
+      "fallback": "icon",
+      "usedIn": "src/components/chat/chat-page.tsx"
+    }
+  ]
+}

package/registry/layers/capability/layout-chat/manifest.json

@@ -0,0 +1,30 @@
+{
+  "id": "layout-chat",
+  "description": "Pre-built AI chat interface with message list, streaming input, code blocks, and tool-call display.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts", "remix-ts"],
+  "keywords": ["chat", "ai chat", "chatbot", "chat interface", "messaging", "conversation", "chat app", "chat room", "ai assistant"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/chat-page.tsx", "target": "app/chat/page.tsx" },
+    { "source": "files/chat-page.tsx", "target": "app/page.tsx" },
+    { "source": "files/chat-page.tsx", "target": "src/App.tsx" },
+    { "source": "files/chat-message.tsx", "target": "src/components/chat/chat-message.tsx" },
+    { "source": "files/chat-input.tsx", "target": "src/components/chat/chat-input.tsx" },
+    { "source": "files/chat-sidebar.tsx", "target": "src/components/chat/chat-sidebar.tsx" },
+    { "source": "files/media-manifest.json", "target": "media-manifest.json" }
+  ],
+  "buildHints": {
+    "pages": ["/chat", "/chat/[id]"],
+    "apiRoutes": ["/api/chat"],
+    "components": ["ChatPage", "ChatMessage", "ChatInput", "ChatSidebar", "CodeBlock", "StreamingDots"],
+    "integrations": ["Server-Sent Events or WebSocket for streaming", "Markdown rendering via react-markdown or similar"],
+    "architectureNotes": [
+      "Chat layout is pre-built with sidebar for conversation history and main chat area.",
+      "ChatMessage renders user and assistant messages with avatar, timestamp, and markdown.",
+      "ChatInput supports multi-line with Shift+Enter and send on Enter.",
+      "Wire /api/chat to your LLM provider (OpenAI, Anthropic, etc.) with streaming response.",
+      "Code blocks in assistant messages use syntax highlighting placeholder — add shiki or prism."
+    ]
+  }
+}