@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/agent-trading/files/strategy.ts

@@ -0,0 +1,128 @@
+// Types
+
+export interface OHLCV {
+  timestamp: number
+  open: number
+  high: number
+  low: number
+  close: number
+  volume: number
+}
+
+export interface Indicators {
+  smaFast: number[]
+  smaSlow: number[]
+  rsi?: number
+  atr?: number
+}
+
+export interface Signal {
+  action: 'buy' | 'sell' | 'hold'
+  confidence: number
+  reason: string
+}
+
+export interface Position {
+  size: number
+  stopLoss: number
+  takeProfit: number
+}
+
+export interface Portfolio {
+  equity: number
+  openPositions: number
+  maxPositions: number
+}
+
+// Implementation
+
+export function crossover(fast: number[], slow: number[]): 'bullish' | 'bearish' | 'none' {
+  if (fast.length < 2 || slow.length < 2) return 'none'
+
+  const prevFast = fast[fast.length - 2]
+  const currFast = fast[fast.length - 1]
+  const prevSlow = slow[slow.length - 2]
+  const currSlow = slow[slow.length - 1]
+
+  if (prevFast <= prevSlow && currFast > currSlow) return 'bullish'
+  if (prevFast >= prevSlow && currFast < currSlow) return 'bearish'
+  return 'none'
+}
+
+export function evaluateSignal(candle: OHLCV, indicators: Indicators): Signal {
+  const cross = crossover(indicators.smaFast, indicators.smaSlow)
+
+  // RSI extremes override crossover signals
+  if (indicators.rsi !== undefined) {
+    if (indicators.rsi > 80) {
+      return { action: 'sell', confidence: 0.7, reason: `RSI overbought at ${indicators.rsi.toFixed(1)}` }
+    }
+    if (indicators.rsi < 20) {
+      return { action: 'buy', confidence: 0.7, reason: `RSI oversold at ${indicators.rsi.toFixed(1)}` }
+    }
+  }
+
+  // Crossover signals
+  if (cross === 'bullish') {
+    const confidence = indicators.rsi !== undefined
+      ? 0.5 + (50 - Math.min(indicators.rsi, 50)) / 100
+      : 0.5
+    return { action: 'buy', confidence: Math.min(confidence, 1), reason: 'Bullish SMA crossover' }
+  }
+
+  if (cross === 'bearish') {
+    const confidence = indicators.rsi !== undefined
+      ? 0.5 + (Math.max(indicators.rsi, 50) - 50) / 100
+      : 0.5
+    return { action: 'sell', confidence: Math.min(confidence, 1), reason: 'Bearish SMA crossover' }
+  }
+
+  // Trend confirmation: price relative to slow SMA
+  const slowSma = indicators.smaSlow[indicators.smaSlow.length - 1]
+  if (slowSma !== undefined) {
+    const deviation = (candle.close - slowSma) / slowSma
+    if (Math.abs(deviation) > 0.02) {
+      return {
+        action: 'hold',
+        confidence: 0.3,
+        reason: `Price ${deviation > 0 ? 'above' : 'below'} slow SMA by ${(Math.abs(deviation) * 100).toFixed(1)}%, awaiting crossover`,
+      }
+    }
+  }
+
+  return { action: 'hold', confidence: 0.1, reason: 'No clear signal' }
+}
+
+export function calculatePosition(
+  signal: Signal,
+  portfolio: Portfolio,
+  riskPct: number,
+): Position | null {
+  if (signal.action === 'hold') return null
+  if (portfolio.openPositions >= portfolio.maxPositions) return null
+
+  const clampedRisk = Math.max(0.001, Math.min(riskPct, 0.1))
+  const riskAmount = portfolio.equity * clampedRisk
+
+  // ATR-based stop or default 2% stop
+  const stopPct = 0.02
+  const size = riskAmount / stopPct
+
+  // Scale by confidence
+  const adjustedSize = size * signal.confidence
+
+  const stopLoss = signal.action === 'buy'
+    ? 1 - stopPct
+    : 1 + stopPct
+
+  // 2:1 reward/risk ratio
+  const takeProfit = signal.action === 'buy'
+    ? 1 + stopPct * 2
+    : 1 - stopPct * 2
+
+  return {
+    size: Math.round(adjustedSize * 100) / 100,
+    stopLoss,
+    takeProfit,
+  }
+}

package/registry/layers/capability/agent-trading/files/trading-config.json

@@ -0,0 +1,16 @@
+{
+  "exchange": "{{exchangeMode}}",
+  "pairs": "{{tradingPairs}}",
+  "riskLimits": {
+    "maxPositionSizeUsd": 1000,
+    "stopLossPercent": 5,
+    "maxOpenPositions": 3,
+    "dailyLossLimitUsd": 500
+  },
+  "dataFeeds": ["orderbook", "trades", "candles"],
+  "notes": [
+    "Start in paper mode. Never deploy live trading without manual review.",
+    "strategy.mjs defines signal generation and position management.",
+    "Risk limits are enforced before any order execution."
+  ]
+}

package/registry/layers/capability/agent-trading/manifest.json

@@ -0,0 +1,61 @@
+{
+  "id": "agent-trading",
+  "description": "Adds trading strategy seams with market data, order execution, and risk management.",
+  "appliesTo": [
+    "agent-service-ts",
+    "agent-service-py",
+    "agent-service-rust"
+  ],
+  "defaults": {
+    "exchangeMode": "paper",
+    "tradingPairs": "BTC/USDT,ETH/USDT"
+  },
+  "files": [
+    {
+      "source": "files/trading-config.json",
+      "target": "trading-config.json"
+    },
+    {
+      "source": "files/strategy.ts",
+      "target": "strategy.ts"
+    }
+  ],
+  "contextHints": {
+    "extensionPoints": [
+      "trading-config.json",
+      "strategy.ts"
+    ]
+  },
+  "keywords": [
+    "trading agent",
+    "trading bot agent",
+    "market analysis agent",
+    "trading strategy agent",
+    "exchange api agent",
+    "order execution agent",
+    "backtesting agent"
+  ],
+  "buildHints": {
+    "apiRoutes": [
+      "/api/strategy",
+      "/api/positions",
+      "/api/risk"
+    ],
+    "components": [
+      "StrategyConfig",
+      "PositionTable",
+      "PnLChart",
+      "RiskDashboard"
+    ],
+    "dataModels": [
+      "Position",
+      "Order",
+      "Signal",
+      "RiskLimit"
+    ],
+    "integrations": [
+      "Exchange API (from exchange config)",
+      "Market data WebSocket"
+    ]
+  }
+}

package/registry/layers/capability/agent-voice/files/voice-config.json

@@ -0,0 +1,18 @@
+{
+  "provider": "{{voiceProvider}}",
+  "stt": { "model": "{{sttModel}}", "language": "en", "interim": true },
+  "tts": { "model": "{{ttsModel}}", "voice": "default", "speed": 1.0 },
+  "session": {
+    "maxDuration": 3600,
+    "silenceTimeout": 10,
+    "interruptible": true,
+    "vadSensitivity": 0.5
+  },
+  "notes": [
+    "Set LIVEKIT_URL and LIVEKIT_API_KEY/SECRET in your environment.",
+    "LiveKit Agents SDK handles room creation, participant management, and audio routing.",
+    "Deepgram provides real-time STT with interim results for low-latency transcription.",
+    "ElevenLabs provides natural TTS. Switch to OpenAI TTS for lower cost.",
+    "VAD (Voice Activity Detection) sensitivity controls when the agent starts listening."
+  ]
+}

package/registry/layers/capability/agent-voice/manifest.json

@@ -0,0 +1,17 @@
+{
+  "id": "agent-voice",
+  "description": "Adds voice agent patterns with real-time audio streaming, speech-to-text, and text-to-speech.",
+  "appliesTo": ["agent-service-ts", "agent-service-py", "agent-service-rust"],
+  "defaults": { "voiceProvider": "livekit", "sttModel": "deepgram", "ttsModel": "elevenlabs" },
+  "files": [
+    { "source": "files/voice-config.json", "target": "voice-config.json" }
+  ],
+  "contextHints": { "extensionPoints": ["voice-config.json"] },
+  "keywords": ["voice agent", "voice bot", "livekit", "livekit agents", "realtime voice", "speech to text", "text to speech", "phone agent", "call center", "voice ai", "audio streaming", "webrtc agent", "deepgram", "elevenlabs"],
+  "buildHints": {
+    "components": ["VoiceSession", "TranscriptTimeline", "InterruptionHandler"],
+    "dataModels": ["AudioFrame", "Transcript", "VoiceSession"],
+    "integrations": ["LiveKit Agents SDK", "Deepgram STT", "ElevenLabs TTS", "WebRTC"],
+    "architectureNotes": ["Use LiveKit Agents SDK for room management and audio routing.", "Implement interruption handling — user can cut off the agent mid-sentence.", "Stream transcript in real-time alongside audio for accessibility.", "Keep turn-taking logic server-side to minimize latency."]
+  }
+}

package/registry/layers/capability/ai-agent-dashboard/files/dashboard-config.json

@@ -0,0 +1,6 @@
+{
+  "panels": ["run-traces", "tool-calls", "token-usage", "cost-tracking", "error-rates", "latency-p50-p99"],
+  "dataSource": "agent-api",
+  "refreshInterval": 5000,
+  "notes": ["Render run traces as a timeline with expandable tool call details.", "Token usage and cost panels require the agent to report usage metadata.", "Error rates and latency panels connect to the agent health endpoint."]
+}

package/registry/layers/capability/ai-agent-dashboard/files/dashboard-data.json

@@ -0,0 +1,6 @@
+{
+  "sampleRuns": [
+    { "id": "run_001", "agent": "support-bot", "status": "completed", "durationMs": 2340, "tokensUsed": 1850, "toolCalls": 3, "costUsd": 0.012 },
+    { "id": "run_002", "agent": "research-agent", "status": "completed", "durationMs": 8900, "tokensUsed": 12400, "toolCalls": 7, "costUsd": 0.089 }
+  ]
+}

package/registry/layers/capability/ai-agent-dashboard/manifest.json

@@ -0,0 +1,37 @@
+{
+  "id": "ai-agent-dashboard",
+  "description": "Adds agent observability dashboard with run traces, tool calls, token usage, and cost tracking.",
+  "appliesTo": [
+    "react-vite-ts",
+    "nextjs-ts",
+    "fullstack-ts",
+    "sveltekit-ts",
+    "remix-ts",
+    "vue-ts"
+  ],
+  "files": [
+    {
+      "source": "files/dashboard-config.json",
+      "target": "agent-dashboard-config.json"
+    },
+    {
+      "source": "files/dashboard-data.json",
+      "target": "agent-dashboard-data.json"
+    }
+  ],
+  "contextHints": {
+    "extensionPoints": [
+      "agent-dashboard-config.json",
+      "agent-dashboard-data.json"
+    ]
+  },
+  "capabilityRequires": ["chart-widget"],
+  "keywords": [
+    "agent dashboard",
+    "agent monitoring",
+    "agent observability",
+    "run traces",
+    "agent traces",
+    "agent analytics"
+  ]
+}

package/registry/layers/capability/ai-agent-orchestrator/files/agent-card.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Bot, Loader2 } from 'lucide-react'
+
+type AgentStatus = 'idle' | 'running' | 'waiting' | 'errored'
+
+interface Agent {
+  id: string
+  name: string
+  role: string
+  model: string
+  tools: string[]
+  status: AgentStatus
+  messagesSent: number
+  messagesReceived: number
+  lastAction?: string
+}
+
+interface AgentCardProps {
+  agent: Agent
+  isActive?: boolean
+  onClick?: () => void
+}
+
+const statusColors: Record<AgentStatus, string> = {
+  idle: 'bg-zinc-400',
+  running: 'bg-green-500',
+  waiting: 'bg-yellow-500',
+  errored: 'bg-red-500',
+}
+
+export function AgentCard({ agent, isActive, onClick }: AgentCardProps) {
+  return (
+    <Card
+      onClick={onClick}
+      className={cn(
+        'cursor-pointer space-y-3 p-4 transition-colors hover:bg-accent/50',
+        isActive && 'ring-2 ring-primary'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <Avatar className="h-9 w-9">
+          <AvatarFallback className="bg-primary/10 text-primary">
+            {agent.status === 'running' ? <Loader2 className="h-4 w-4 animate-spin" /> : <Bot className="h-4 w-4" />}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex-1 overflow-hidden">
+          <div className="flex items-center gap-2">
+            <p className="truncate text-sm font-medium">{agent.name}</p>
+            <span className={cn('h-2 w-2 shrink-0 rounded-full', statusColors[agent.status])} />
+          </div>
+          <p className="truncate text-xs text-muted-foreground">{agent.role}</p>
+        </div>
+        <Badge variant="secondary" className="shrink-0 text-[10px]">{agent.model}</Badge>
+      </div>
+
+      {agent.tools.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {agent.tools.map((tool) => (
+            <Badge key={tool} variant="outline" className="text-[10px]">{tool}</Badge>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+        <span>{agent.messagesSent} sent / {agent.messagesReceived} received</span>
+      </div>
+
+      {agent.lastAction && (
+        <p className="truncate text-xs text-muted-foreground">{agent.lastAction}</p>
+      )}
+    </Card>
+  )
+}

package/registry/layers/capability/ai-agent-orchestrator/files/agent-run-view.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Separator } from '@/components/ui/separator'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { Bot, Wrench, Clock, CheckCircle2, XCircle, ChevronDown, Brain, Loader2 } from 'lucide-react'
+
+type StepStatus = 'running' | 'completed' | 'failed' | 'waiting'
+type StepType = 'action' | 'thinking' | 'tool_call'
+
+interface ToolCall {
+  name: string
+  input: Record<string, unknown>
+  output?: Record<string, unknown>
+}
+
+interface RunStep {
+  id: string
+  agentName: string
+  agentRole?: string
+  type: StepType
+  description: string
+  toolCall?: ToolCall
+  output?: string
+  status: StepStatus
+  durationMs?: number
+}
+
+interface AgentRunViewProps {
+  steps: RunStep[]
+  totalDurationMs?: number
+}
+
+const statusConfig: Record<StepStatus, { icon: React.ElementType; className: string }> = {
+  running: { icon: Loader2, className: 'text-blue-500 animate-spin' },
+  completed: { icon: CheckCircle2, className: 'text-green-500' },
+  failed: { icon: XCircle, className: 'text-red-500' },
+  waiting: { icon: Clock, className: 'text-yellow-500' },
+}
+
+function formatDuration(ms: number) {
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+function StepItem({ step }: { step: RunStep }) {
+  const [open, setOpen] = React.useState(false)
+  const StatusIcon = statusConfig[step.status].icon
+  const isThinking = step.type === 'thinking'
+
+  return (
+    <div className="relative flex gap-3 pb-6 last:pb-0">
+      <div className="flex flex-col items-center">
+        <div className={cn('flex h-7 w-7 shrink-0 items-center justify-center rounded-full border bg-background')}>
+          {isThinking ? (
+            <Brain className="h-3.5 w-3.5 text-purple-500" />
+          ) : step.type === 'tool_call' ? (
+            <Wrench className="h-3.5 w-3.5 text-muted-foreground" />
+          ) : (
+            <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+          )}
+        </div>
+        <div className="mt-1 w-px flex-1 bg-border" />
+      </div>
+
+      <div className="flex-1 space-y-1.5 pt-0.5">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline" className="text-[10px]">{step.agentName}</Badge>
+          {step.agentRole && <span className="text-xs text-muted-foreground">{step.agentRole}</span>}
+          <div className="flex-1" />
+          <StatusIcon className={cn('h-4 w-4', statusConfig[step.status].className)} />
+          {step.durationMs != null && (
+            <span className="text-[11px] text-muted-foreground">{formatDuration(step.durationMs)}</span>
+          )}
+        </div>
+
+        <p className={cn('text-sm', isThinking && 'italic text-muted-foreground')}>{step.description}</p>
+
+        {step.toolCall && (
+          <Collapsible open={open} onOpenChange={setOpen}>
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-6 gap-1 px-2 text-xs text-muted-foreground">
+                <Wrench className="h-3 w-3" />
+                {step.toolCall.name}
+                <ChevronDown className={cn('h-3 w-3 transition-transform', open && 'rotate-180')} />
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <Card className="mt-1.5 space-y-2 p-3">
+                <div>
+                  <p className="mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Input</p>
+                  <pre className="overflow-x-auto rounded bg-muted p-2 text-xs">{JSON.stringify(step.toolCall.input, null, 2)}</pre>
+                </div>
+                {step.toolCall.output && (
+                  <div>
+                    <p className="mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Output</p>
+                    <pre className="overflow-x-auto rounded bg-muted p-2 text-xs">{JSON.stringify(step.toolCall.output, null, 2)}</pre>
+                  </div>
+                )}
+              </Card>
+            </CollapsibleContent>
+          </Collapsible>
+        )}
+
+        {step.output && !step.toolCall && (
+          <Card className="mt-1 p-3">
+            <p className="text-xs text-muted-foreground">{step.output}</p>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function AgentRunView({ steps, totalDurationMs }: AgentRunViewProps) {
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-0 p-4">
+        {steps.map((step) => (
+          <StepItem key={step.id} step={step} />
+        ))}
+      </div>
+      {totalDurationMs != null && (
+        <>
+          <Separator />
+          <div className="flex items-center justify-end gap-1.5 px-4 py-2">
+            <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground">Total: {formatDuration(totalDurationMs)}</span>
+          </div>
+        </>
+      )}
+    </ScrollArea>
+  )
+}

package/registry/layers/capability/ai-agent-orchestrator/files/orchestrator-page.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { AgentRunView } from '@/components/agents/agent-run-view'
+import { AgentCard } from '@/components/agents/agent-card'
+import { Play, Settings2 } from 'lucide-react'
+
+const sampleAgents = [
+  { id: 'a1', name: 'Researcher', role: 'Finds relevant information', model: 'GPT-4o', tools: ['web_search', 'scrape'], status: 'completed' as const, messagesSent: 3, messagesReceived: 2, lastAction: 'Searched for "AI agent frameworks"' },
+  { id: 'a2', name: 'Analyst', role: 'Synthesizes findings into insights', model: 'Claude Sonnet', tools: ['code_exec', 'chart'], status: 'running' as const, messagesSent: 1, messagesReceived: 3, lastAction: 'Analyzing search results...' },
+  { id: 'a3', name: 'Writer', role: 'Produces final report', model: 'Claude Opus', tools: ['markdown'], status: 'idle' as const, messagesSent: 0, messagesReceived: 0 },
+]
+
+const sampleSteps = [
+  { id: 's1', agentName: 'Researcher', agentRole: 'Research', type: 'action' as const, description: 'Starting web search for AI agent frameworks', status: 'completed' as const, durationMs: 1200 },
+  { id: 's2', agentName: 'Researcher', type: 'tool_call' as const, description: 'Called web_search', status: 'completed' as const, durationMs: 3400, toolCall: { name: 'web_search', input: { query: 'best AI agent frameworks 2025' }, output: { results: 8 } } },
+  { id: 's3', agentName: 'Researcher', type: 'thinking' as const, description: 'Evaluating which results are most relevant for a technical comparison...', status: 'completed' as const, durationMs: 800 },
+  { id: 's4', agentName: 'Analyst', type: 'action' as const, description: 'Received research results, beginning analysis', status: 'running' as const },
+]
+
+type RunStatus = 'idle' | 'running' | 'completed' | 'failed'
+
+const statusBadgeVariant: Record<RunStatus, 'secondary' | 'default' | 'destructive' | 'outline'> = {
+  idle: 'secondary',
+  running: 'default',
+  completed: 'outline',
+  failed: 'destructive',
+}
+
+export default function OrchestratorPage() {
+  const [task, setTask] = React.useState('')
+  const [runStatus, setRunStatus] = React.useState<RunStatus>('running')
+  const [selectedAgent, setSelectedAgent] = React.useState<string | null>(null)
+  const [model, setModel] = React.useState('gpt-4o')
+  const [maxIterations, setMaxIterations] = React.useState('10')
+  const [showConfig, setShowConfig] = React.useState(false)
+
+  const handleRun = () => {
+    if (!task.trim()) return
+    setRunStatus('running')
+  }
+
+  return (
+    <div className="flex h-screen flex-col bg-background">
+      <header className="flex h-14 items-center gap-3 border-b px-4">
+        <h1 className="text-sm font-semibold">Agent Orchestrator</h1>
+        <Separator orientation="vertical" className="h-5" />
+        <span className="text-sm text-muted-foreground">Research Task</span>
+        <Badge variant={statusBadgeVariant[runStatus]} className="text-[10px]">{runStatus}</Badge>
+        <div className="flex-1" />
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setShowConfig(!showConfig)}>
+          <Settings2 className="h-4 w-4" />
+        </Button>
+      </header>
+
+      {showConfig && (
+        <div className="flex items-center gap-4 border-b bg-muted/30 px-4 py-2">
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-muted-foreground">Model</label>
+            <Select value={model} onValueChange={setModel}>
+              <SelectTrigger className="h-7 w-32 text-xs"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="gpt-4o">GPT-4o</SelectItem>
+                <SelectItem value="claude-sonnet">Claude Sonnet</SelectItem>
+                <SelectItem value="claude-opus">Claude Opus</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-muted-foreground">Max iterations</label>
+            <Input value={maxIterations} onChange={(e) => setMaxIterations(e.target.value)} className="h-7 w-16 text-xs" type="number" min="1" max="100" />
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-muted-foreground">Timeout</label>
+            <Input defaultValue="300" className="h-7 w-16 text-xs" type="number" min="10" />
+            <span className="text-xs text-muted-foreground">sec</span>
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-1 overflow-hidden">
+        <aside className="w-64 shrink-0 overflow-y-auto border-r p-3">
+          <p className="mb-2 text-xs font-medium text-muted-foreground">Agents</p>
+          <div className="space-y-2">
+            {sampleAgents.map((agent) => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                isActive={selectedAgent === agent.id}
+                onClick={() => setSelectedAgent(agent.id === selectedAgent ? null : agent.id)}
+              />
+            ))}
+          </div>
+        </aside>
+
+        <div className="flex-1 overflow-hidden">
+          <AgentRunView steps={sampleSteps} totalDurationMs={5400} />
+        </div>
+      </div>
+
+      <div className="border-t p-3">
+        <div className="mx-auto flex max-w-3xl gap-2">
+          <Input
+            value={task}
+            onChange={(e) => setTask(e.target.value)}
+            placeholder="Describe the task for your agents..."
+            className="flex-1"
+            onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) handleRun() }}
+          />
+          <Button onClick={handleRun} disabled={!task.trim() || runStatus === 'running'} className="gap-1.5">
+            <Play className="h-4 w-4" />
+            Run
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}