[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { AppLayout } from "@/components/app-layout" export default function Home() { return } [V0_FILE]typescriptreact:file="components/app-layout.tsx" isMerged="true" "use client" import { useState } from "react" import { Workspace } from "@/components/workspace" import { AppSidebar } from "@/components/app-sidebar" import { SidebarProvider } from "@/components/ui/sidebar" import type { AgentType } from "@/lib/types" export function AppLayout() { const [selectedAgent, setSelectedAgent] = useState("Researcher") const [messages, setMessages] = useState<{ role: "user" | "assistant"; content: string }[]>([ { role: "assistant", content: "Hello! I'm your AI assistant. How can I help you today?" }, ]) const addMessage = (message: string) => { setMessages([...messages, { role: "user", content: message }]) // Simulate AI response setTimeout(() => { const responses = { Researcher: "I've researched this topic extensively. Here are my findings...", Planner: "Based on your request, I've created a strategic plan with the following steps...", Coder: "Here's the code implementation I recommend:\n\n```js\nconst solution = () => {\n // Implementation\n return result;\n};\n```", } setMessages((prev) => [ ...prev, { role: "assistant", content: responses[selectedAgent], }, ]) }, 1000) } return (

m.role === "assistant").pop()?.content || ""} />

) } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export type AgentType = "Researcher" | "Planner" | "Coder" [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) export const metadata = { title: "AI Canvas App", description: "Canvas-style AI app with agent selection", } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer base { :root { --font-sans: "Inter", system-ui, sans-serif; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { ScrollArea } from "@/components/ui/scroll-area" import { AgentSelector } from "@/components/agent-selector" import type { AgentType } from "@/lib/types" import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "@/components/ui/sidebar" interface AppSidebarProps { messages: { role: "user" | "assistant"; content: string }[] addMessage: (message: string) => void selectedAgent: AgentType setSelectedAgent: (agent: AgentType) => void } export function AppSidebar({ messages, addMessage, selectedAgent, setSelectedAgent }: AppSidebarProps) { const [input, setInput] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (input.trim()) { addMessage(input) setInput("") } } return (

AI Canvas

{messages.map((message, index) => (

{message.content}

))}

setInput(e.target.value)}
              placeholder="Type your message..."
              className="min-h-[100px] resize-none rounded-xl border-muted-foreground/20 p-3"
            />
            <Button type="submit" className="self-end rounded-xl px-5">
              <Send className="mr-2 h-4 w-4" />
              Send
            </Button>
          </form>
        </div>
      </SidebarFooter>

<SidebarRail />
    </Sidebar>
  )
}
[V0_FILE]typescriptreact:file="components/agent-selector.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Check, ChevronsUpDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { useState } from "react"
import type { AgentType } from "@/lib/types"

const agents = [
  { value: "Researcher", label: "Researcher" },
  { value: "Planner", label: "Planner" },
  { value: "Coder", label: "Coder" },
] as const

interface AgentSelectorProps {
  selectedAgent: AgentType
  setSelectedAgent: (agent: AgentType) => void
}

export function AgentSelector({ selectedAgent, setSelectedAgent }: AgentSelectorProps) {
  const [open, setOpen] = useState(false)

return (
    <div className="space-y-3">
      <label className="text-sm font-medium">Select Agent</label>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={open}
            className="w-full justify-between rounded-xl border-muted-foreground/20 py-6"
          >
            {selectedAgent}
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-[200px] p-0">
          <Command>
            <CommandInput placeholder="Search agent..." />
            <CommandList>
              <CommandEmpty>No agent found.</CommandEmpty>
              <CommandGroup>
                {agents.map((agent) => (
                  <CommandItem
                    key={agent.value}
                    value={agent.value}
                    onSelect={() => {
                      setSelectedAgent(agent.value as AgentType)
                      setOpen(false)
                    }}
                  >
                    <Check
                      className={cn("mr-2 h-4 w-4", selectedAgent === agent.value ? "opacity-100" : "opacity-0")}
                    />
                    {agent.label}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/markdown-display.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"

interface MarkdownDisplayProps {
  content: string
}

export function MarkdownDisplay({ content }: MarkdownDisplayProps) {
  const [formattedContent, setFormattedContent] = useState("")

useEffect(() => {
    // Simple markdown formatting for demonstration
    // In a real app, you'd use a proper markdown parser like react-markdown
    const formatted = content
      .replace(/```(.+?)```/gs, '<pre class="bg-muted p-4 rounded-xl my-4 overflow-x-auto text-sm">$1</pre>')
      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
      .replace(/\*(.+?)\*/g, "<em>$1</em>")
      .replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold my-4">$1</h1>')
      .replace(/^## (.+)$/gm, '<h2 class="text-xl font-bold my-3">$1</h2>')
      .replace(/^### (.+)$/gm, '<h3 class="text-lg font-bold my-2">$1</h3>')
      .replace(/\n/g, "<br />")

setFormattedContent(formatted)
  }, [content])

return (
    <div
      className="prose prose-lg max-w-none dark:prose-invert"
      dangerouslySetInnerHTML={{ __html: formattedContent }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/diagram-placeholder.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type { AgentType } from "@/lib/types"

interface DiagramPlaceholderProps {
  selectedAgent: AgentType
}

export function DiagramPlaceholder({ selectedAgent }: DiagramPlaceholderProps) {
  // Sample Mermaid diagram code for each agent type
  const getDiagramCode = () => {
    switch (selectedAgent) {
      case "Researcher":
        return `graph TD
    A[User Query] --> B[Research Phase]
    B --> C{Sufficient Info?}
    C -->|Yes| D[Synthesize Findings]
    C -->|No| E[Deep Research]
    E --> B
    D --> F[Present Results]`

case "Planner":
        return `graph TD
    A[User Request] --> B[Analyze Requirements]
    B --> C[Create Plan]
    C --> D[Prioritize Tasks]
    D --> E[Set Timeline]
    E --> F[Present Plan]`

case "Coder":
        return `graph TD
    A[Code Request] --> B[Parse Requirements]
    B --> C[Design Solution]
    C --> D[Write Code]
    D --> E[Test Code]
    E --> F[Optimize]
    F --> G[Present Solution]`
    }
  }

return (
    <div className="rounded-xl border border-dashed border-muted-foreground/30 bg-muted/20 p-6">
      <div className="mb-5 text-sm text-muted-foreground">
        Mermaid.js Diagram Placeholder - In a real implementation, this would render:
      </div>
      <pre className="overflow-x-auto rounded-xl bg-muted p-5 text-sm">{getDiagramCode()}</pre>
      <div className="mt-5 text-center text-sm text-muted-foreground">
        (Visualization would appear here when connected to Mermaid.js)
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workspace.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { WorkspaceToolbar } from "@/components/workspace-toolbar"
import { ResearcherWorkspace } from "@/components/workspaces/researcher-workspace"
import { PlannerWorkspace } from "@/components/workspaces/planner-workspace"
import { CoderWorkspace } from "@/components/workspaces/coder-workspace"
import type { AgentType } from "@/lib/types"

interface WorkspaceProps {
  selectedAgent: AgentType
  lastMessage: string
}

export function Workspace({ selectedAgent, lastMessage }: WorkspaceProps) {
  const [isAgentActive, setIsAgentActive] = useState(false)
  const [workspaceContent, setWorkspaceContent] = useState("")

const renderWorkspace = () => {
    switch (selectedAgent) {
      case "Researcher":
        return (
          <ResearcherWorkspace
            content={workspaceContent}
            setContent={setWorkspaceContent}
            lastMessage={lastMessage}
            isAgentActive={isAgentActive}
          />
        )
      case "Planner":
        return (
          <PlannerWorkspace
            content={workspaceContent}
            setContent={setWorkspaceContent}
            lastMessage={lastMessage}
            isAgentActive={isAgentActive}
          />
        )
      case "Coder":
        return (
          <CoderWorkspace
            content={workspaceContent}
            setContent={setWorkspaceContent}
            lastMessage={lastMessage}
            isAgentActive={isAgentActive}
          />
        )
    }
  }

return (
    <main className="flex flex-1 flex-col overflow-hidden">
      <WorkspaceToolbar
        selectedAgent={selectedAgent}
        isAgentActive={isAgentActive}
        setIsAgentActive={setIsAgentActive}
      />
      <div className="flex-1 overflow-auto p-8">
        <div className="mx-auto max-w-6xl">{renderWorkspace()}</div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/workspace-toolbar.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Bot, Users, Save, Download, Share, MoreHorizontal, Zap, Eye, Edit3 } from "lucide-react"
import type { AgentType } from "@/lib/types"

interface WorkspaceToolbarProps {
  selectedAgent: AgentType
  isAgentActive: boolean
  setIsAgentActive: (active: boolean) => void
}

export function WorkspaceToolbar({ selectedAgent, isAgentActive, setIsAgentActive }: WorkspaceToolbarProps) {
  const [collaborators] = useState(2) // Mock collaborator count

return (
    <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="flex h-16 items-center justify-between px-8">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <h1 className="text-xl font-semibold">Shared Workspace</h1>
            <Badge variant="outline" className="gap-1">
              <Bot className="h-3 w-3" />
              {selectedAgent}
            </Badge>
          </div>

<div className="flex items-center gap-2">
            <Button
              variant={isAgentActive ? "default" : "outline"}
              size="sm"
              onClick={() => setIsAgentActive(!isAgentActive)}
              className="gap-2"
            >
              <Zap className="h-4 w-4" />
              {isAgentActive ? "Agent Active" : "Agent Standby"}
            </Button>

<Badge variant="secondary" className="gap-1">
              <Users className="h-3 w-3" />
              {collaborators} online
            </Badge>
          </div>
        </div>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Download className="mr-2 h-4 w-4" />
                Export
              </DropdownMenuItem>
              <DropdownMenuItem>Version History</DropdownMenuItem>
              <DropdownMenuItem>Workspace Settings</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workspaces/researcher-workspace.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Search, Plus, BookOpen, ExternalLink, Lightbulb } from "lucide-react"

interface ResearcherWorkspaceProps {
  content: string
  setContent: (content: string) => void
  lastMessage: string
  isAgentActive: boolean
}

export function ResearcherWorkspace({ content, setContent, lastMessage, isAgentActive }: ResearcherWorkspaceProps) {
  const [sources] = useState([
    { title: "AI Research Paper", url: "#", type: "Academic" },
    { title: "Industry Report", url: "#", type: "Report" },
    { title: "Expert Interview", url: "#", type: "Primary" },
  ])

const [findings] = useState([
    "AI adoption has increased 300% in the last year",
    "Key challenges include data privacy and model interpretability",
    "Most successful implementations focus on specific use cases",
  ])

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
      {/* Main Research Document */}
      <div className="lg:col-span-2 space-y-6">
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <CardTitle className="text-xl">Research Document</CardTitle>
              {isAgentActive && (
                <Badge variant="default" className="gap-1 animate-pulse">
                  <Lightbulb className="h-3 w-3" />
                  Agent Contributing
                </Badge>
              )}
            </div>
          </CardHeader>
          <CardContent>
            <Textarea
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="Start your research here... The agent will help you gather information, analyze findings, and structure your research."
              className="min-h-[400px] resize-none border-0 p-0 text-base leading-relaxed focus-visible:ring-0"
            />
          </CardContent>
        </Card>

{/* Agent Suggestions */}
        {isAgentActive && lastMessage && (
          <Card className="rounded-2xl border-primary/20 bg-primary/5 shadow-sm">
            <CardHeader className="pb-4">
              <CardTitle className="text-lg flex items-center gap-2">
                <Lightbulb className="h-5 w-5 text-primary" />
                Agent Insights
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm leading-relaxed">{lastMessage}</p>
              <div className="mt-4 flex gap-2">
                <Button size="sm" variant="outline">
                  Apply Suggestion
                </Button>
                <Button size="sm" variant="ghost">
                  Dismiss
                </Button>
              </div>
            </CardContent>
          </Card>
        )}
      </div>

{/* Research Tools Sidebar */}
      <div className="space-y-6">
        {/* Sources */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg">Sources</CardTitle>
              <Button size="sm" variant="outline">
                <Plus className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-[200px]">
              <div className="space-y-3">
                {sources.map((source, index) => (
                  <div key={index} className="flex items-start gap-3 p-3 rounded-lg border">
                    <BookOpen className="h-4 w-4 mt-0.5 text-muted-foreground" />
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate">{source.title}</p>
                      <Badge variant="secondary" className="text-xs mt-1">
                        {source.type}
                      </Badge>
                    </div>
                    <Button size="sm" variant="ghost" className="h-6 w-6 p-0">
                      <ExternalLink className="h-3 w-3" />
                    </Button>
                  </div>
                ))}
              </div>
            </ScrollArea>
          </CardContent>
        </Card>

{/* Key Findings */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Key Findings</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {findings.map((finding, index) => (
                <div key={index} className="p-3 rounded-lg bg-muted/50">
                  <p className="text-sm">{finding}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Quick Actions */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Quick Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            <Button variant="outline" className="w-full justify-start gap-2">
              <Search className="h-4 w-4" />
              Search for Sources
            </Button>
            <Button variant="outline" className="w-full justify-start gap-2">
              <BookOpen className="h-4 w-4" />
              Generate Summary
            </Button>
            <Button variant="outline" className="w-full justify-start gap-2">
              <Lightbulb className="h-4 w-4" />
              Get Insights
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workspaces/planner-workspace.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Calendar, Plus, Target, Users, Lightbulb } from "lucide-react"

interface PlannerWorkspaceProps {
  content: string
  setContent: (content: string) => void
  lastMessage: string
  isAgentActive: boolean
}

export function PlannerWorkspace({ content, setContent, lastMessage, isAgentActive }: PlannerWorkspaceProps) {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Define project scope", completed: true, priority: "High", assignee: "You" },
    { id: 2, title: "Research market requirements", completed: false, priority: "High", assignee: "Agent" },
    { id: 3, title: "Create wireframes", completed: false, priority: "Medium", assignee: "You" },
    { id: 4, title: "Set up development environment", completed: false, priority: "Low", assignee: "Agent" },
  ])

const [newTask, setNewTask] = useState("")

const addTask = () => {
    if (newTask.trim()) {
      setTasks([
        ...tasks,
        {
          id: tasks.length + 1,
          title: newTask,
          completed: false,
          priority: "Medium",
          assignee: "You",
        },
      ])
      setNewTask("")
    }
  }

const toggleTask = (id: number) => {
    setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task)))
  }

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
      {/* Main Planning Board */}
      <div className="lg:col-span-2 space-y-6">
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <CardTitle className="text-xl">Project Plan</CardTitle>
              {isAgentActive && (
                <Badge variant="default" className="gap-1 animate-pulse">
                  <Lightbulb className="h-3 w-3" />
                  Agent Planning
                </Badge>
              )}
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex gap-2">
                <Input
                  value={newTask}
                  onChange={(e) => setNewTask(e.target.value)}
                  placeholder="Add a new task..."
                  onKeyPress={(e) => e.key === "Enter" && addTask()}
                />
                <Button onClick={addTask}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>

<ScrollArea className="h-[400px]">
                <div className="space-y-3">
                  {tasks.map((task) => (
                    <div key={task.id} className="flex items-center gap-3 p-4 rounded-lg border">
                      <Checkbox checked={task.completed} onCheckedChange={() => toggleTask(task.id)} />
                      <div className="flex-1">
                        <p
                          className={`text-sm font-medium ${task.completed ? "line-through text-muted-foreground" : ""}`}
                        >
                          {task.title}
                        </p>
                        <div className="flex items-center gap-2 mt-1">
                          <Badge
                            variant={
                              task.priority === "High"
                                ? "destructive"
                                : task.priority === "Medium"
                                  ? "default"
                                  : "secondary"
                            }
                            className="text-xs"
                          >
                            {task.priority}
                          </Badge>
                          <Badge variant="outline" className="text-xs">
                            {task.assignee}
                          </Badge>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </ScrollArea>
            </div>
          </CardContent>
        </Card>

{/* Agent Suggestions */}
        {isAgentActive && lastMessage && (
          <Card className="rounded-2xl border-primary/20 bg-primary/5 shadow-sm">
            <CardHeader className="pb-4">
              <CardTitle className="text-lg flex items-center gap-2">
                <Lightbulb className="h-5 w-5 text-primary" />
                Agent Recommendations
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm leading-relaxed">{lastMessage}</p>
              <div className="mt-4 flex gap-2">
                <Button size="sm" variant="outline">
                  Add to Plan
                </Button>
                <Button size="sm" variant="ghost">
                  Dismiss
                </Button>
              </div>
            </CardContent>
          </Card>
        )}
      </div>

{/* Planning Tools Sidebar */}
      <div className="space-y-6">
        {/* Project Overview */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Project Overview</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-2">
              <Target className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm">Goal: Launch MVP</span>
            </div>
            <div className="flex items-center gap-2">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm">Due: Dec 31, 2024</span>
            </div>
            <div className="flex items-center gap-2">
              <Users className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm">Team: 2 members</span>
            </div>
          </CardContent>
        </Card>

{/* Progress */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Progress</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex justify-between text-sm">
                <span>Completed</span>
                <span>
                  {tasks.filter((t) => t.completed).length}/{tasks.length}
                </span>
              </div>
              <div className="w-full bg-muted rounded-full h-2">
                <div
                  className="bg-primary h-2 rounded-full transition-all"
                  style={{ width: `${(tasks.filter((t) => t.completed).length / tasks.length) * 100}%` }}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Quick Actions */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Quick Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            <Button variant="outline" className="w-full justify-start gap-2">
              <Calendar className="h-4 w-4" />
              Set Deadline
            </Button>
            <Button variant="outline" className="w-full justify-start gap-2">
              <Users className="h-4 w-4" />
              Assign Tasks
            </Button>
            <Button variant="outline" className="w-full justify-start gap-2">
              <Lightbulb className="h-4 w-4" />
              Get Suggestions
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workspaces/coder-workspace.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Code, Play, FileText, Lightbulb, Bug } from "lucide-react"

interface CoderWorkspaceProps {
  content: string
  setContent: (content: string) => void
  lastMessage: string
  isAgentActive: boolean
}

export function CoderWorkspace({ content, setContent, lastMessage, isAgentActive }: CoderWorkspaceProps) {
  const [activeFile, setActiveFile] = useState("main.js")
  const [files] = useState([
    { name: "main.js", type: "javascript", content: "// Your main application code\nconsole.log('Hello World!');" },
    { name: "styles.css", type: "css", content: "/* Your styles here */\nbody { margin: 0; }" },
    { name: "README.md", type: "markdown", content: "# Project Documentation\n\nDescribe your project here..." },
  ])

const [codeContent, setCodeContent] = useState(files[0].content)

return (
    <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
      {/* Code Editor */}
      <div className="lg:col-span-3 space-y-6">
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <CardTitle className="text-xl">Code Editor</CardTitle>
                <Badge variant="outline">{activeFile}</Badge>
              </div>
              {isAgentActive && (
                <Badge variant="default" className="gap-1 animate-pulse">
                  <Lightbulb className="h-3 w-3" />
                  Agent Coding
                </Badge>
              )}
            </div>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="editor" className="w-full">
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="editor">Editor</TabsTrigger>
                <TabsTrigger value="preview">Preview</TabsTrigger>
                <TabsTrigger value="terminal">Terminal</TabsTrigger>
              </TabsList>

<TabsContent value="editor" className="mt-4">
                <Textarea
                  value={codeContent}
                  onChange={(e) => setCodeContent(e.target.value)}
                  placeholder="Write your code here..."
                  className="min-h-[400px] resize-none font-mono text-sm border-0 p-4 bg-muted/30 focus-visible:ring-0"
                />
              </TabsContent>

<TabsContent value="preview" className="mt-4">
                <div className="min-h-[400px] border rounded-lg bg-background p-4">
                  <p className="text-muted-foreground text-center">Preview will appear here</p>
                </div>
              </TabsContent>

<TabsContent value="terminal" className="mt-4">
                <div className="min-h-[400px] border rounded-lg bg-black text-green-400 p-4 font-mono text-sm">
                  <p>$ npm start</p>
                  <p>Server running on http://localhost:3000</p>
                  <p className="animate-pulse">$ _</p>
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

{/* Agent Code Suggestions */}
        {isAgentActive && lastMessage && (
          <Card className="rounded-2xl border-primary/20 bg-primary/5 shadow-sm">
            <CardHeader className="pb-4">
              <CardTitle className="text-lg flex items-center gap-2">
                <Lightbulb className="h-5 w-5 text-primary" />
                Agent Code Review
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm leading-relaxed font-mono bg-muted/50 p-3 rounded">{lastMessage}</p>
              <div className="mt-4 flex gap-2">
                <Button size="sm" variant="outline">
                  Apply Changes
                </Button>
                <Button size="sm" variant="outline">
                  Run Code
                </Button>
                <Button size="sm" variant="ghost">
                  Dismiss
                </Button>
              </div>
            </CardContent>
          </Card>
        )}
      </div>

{/* File Explorer & Tools */}
      <div className="space-y-6">
        {/* File Explorer */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Files</CardTitle>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-[200px]">
              <div className="space-y-2">
                {files.map((file) => (
                  <Button
                    key={file.name}
                    variant={activeFile === file.name ? "default" : "ghost"}
                    className="w-full justify-start gap-2 h-8"
                    onClick={() => {
                      setActiveFile(file.name)
                      setCodeContent(file.content)
                    }}
                  >
                    <FileText className="h-3 w-3" />
                    {file.name}
                  </Button>
                ))}
              </div>
            </ScrollArea>
          </CardContent>
        </Card>

{/* Code Actions */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            <Button variant="outline" className="w-full justify-start gap-2">
              <Play className="h-4 w-4" />
              Run Code
            </Button>
            <Button variant="outline" className="w-full justify-start gap-2">
              <Bug className="h-4 w-4" />
              Debug
            </Button>
            <Button variant="outline" className="w-full justify-start gap-2">
              <Code className="h-4 w-4" />
              Format
            </Button>
            <Button variant="outline" className="w-full justify-start gap-2">
              <Lightbulb className="h-4 w-4" />
              Get Help
            </Button>
          </CardContent>
        </Card>

{/* Code Stats */}
        <Card className="rounded-2xl shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg">Stats</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex justify-between text-sm">
              <span>Lines</span>
              <span>{codeContent.split("\n").length}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span>Characters</span>
              <span>{codeContent.length}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span>Language</span>
              <span>JavaScript</span>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}</article></body></html>