@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/ai-voice-chat/files/voice-controls.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { Mic, MicOff, PhoneOff, Wifi, WifiOff } from 'lucide-react'
+
+interface VoiceControlsProps {
+  isActive: boolean
+  isMuted: boolean
+  onMicToggle: () => void
+  onMuteToggle: () => void
+  onEndCall: () => void
+  audioLevel?: number
+  connected?: boolean
+}
+
+function AudioBars({ level }: { level: number }) {
+  const bars = [0.3, 0.6, 1.0, 0.7, 0.4]
+  return (
+    <div className="flex items-end gap-0.5 h-4">
+      {bars.map((threshold, i) => (
+        <div
+          key={i}
+          className={cn(
+            'w-0.5 rounded-full transition-all duration-150',
+            level >= threshold ? 'bg-green-500' : 'bg-muted-foreground/20'
+          )}
+          style={{ height: `${Math.max(4, threshold * 16)}px` }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export function VoiceControls({
+  isActive,
+  isMuted,
+  onMicToggle,
+  onMuteToggle,
+  onEndCall,
+  audioLevel = 0,
+  connected = true,
+}: VoiceControlsProps) {
+  return (
+    <TooltipProvider>
+      <div className="flex items-center justify-center gap-4 border-t bg-background px-4 py-3">
+        {isActive && <AudioBars level={audioLevel} />}
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn('h-9 w-9', isMuted && 'text-red-500')}
+              onClick={onMuteToggle}
+              disabled={!isActive}
+            >
+              {isMuted ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{isMuted ? 'Unmute' : 'Mute'}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="icon"
+              className={cn(
+                'h-12 w-12 rounded-full',
+                isActive
+                  ? 'bg-primary text-primary-foreground ring-2 ring-red-500 ring-offset-2 ring-offset-background'
+                  : 'bg-primary text-primary-foreground'
+              )}
+              onClick={onMicToggle}
+            >
+              <Mic className="h-5 w-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{isActive ? 'Stop' : 'Start'}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="destructive"
+              size="icon"
+              className="h-9 w-9 rounded-full"
+              onClick={onEndCall}
+              disabled={!isActive}
+            >
+              <PhoneOff className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>End call</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center">
+              {connected ? (
+                <Wifi className="h-3.5 w-3.5 text-green-500" />
+              ) : (
+                <WifiOff className="h-3.5 w-3.5 text-red-500" />
+              )}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>{connected ? 'Connected' : 'Disconnected'}</TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  )
+}

package/registry/layers/capability/ai-voice-chat/files/voice-transcript.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { User, Bot, Volume2, Loader2 } from 'lucide-react'
+
+interface Utterance {
+  id: string
+  speaker: 'user' | 'ai'
+  text: string
+  timestamp: Date
+  confidence?: number
+}
+
+interface VoiceTranscriptProps {
+  utterances: Utterance[]
+  activeId?: string
+  onReplay?: (id: string) => void
+}
+
+export function VoiceTranscript({ utterances, activeId, onReplay }: VoiceTranscriptProps) {
+  const bottomRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [utterances])
+
+  return (
+    <div className="space-y-3 p-4">
+      {utterances.map((u) => {
+        const isActive = u.id === activeId
+        const isAI = u.speaker === 'ai'
+        const Icon = isAI ? Bot : User
+
+        return (
+          <div key={u.id} className="flex items-start gap-2.5">
+            <div className={cn('flex h-6 w-6 shrink-0 items-center justify-center rounded-full', isAI ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground')}>
+              <Icon className="h-3.5 w-3.5" />
+            </div>
+            <div className="flex-1 space-y-0.5">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-medium">{isAI ? 'AI' : 'You'}</span>
+                <span className="text-[10px] text-muted-foreground">
+                  {u.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+                </span>
+                {u.confidence != null && u.confidence < 1 && (
+                  <Badge variant="outline" className="text-[9px]">{(u.confidence * 100).toFixed(0)}%</Badge>
+                )}
+              </div>
+              <p className={cn('text-sm', isActive && 'text-muted-foreground')}>
+                {u.text}
+                {isActive && <Loader2 className="ml-1 inline h-3 w-3 animate-spin" />}
+              </p>
+            </div>
+            {isAI && onReplay && (
+              <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => onReplay(u.id)}>
+                <Volume2 className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        )
+      })}
+      <div ref={bottomRef} />
+    </div>
+  )
+}

package/registry/layers/capability/ai-voice-chat/manifest.json

@@ -0,0 +1,26 @@
+{
+  "id": "ai-voice-chat",
+  "description": "Voice-first AI chat interface with waveform visualization, live transcript, and call controls.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["voice agent", "voice chat", "speech", "call", "voice assistant", "voice ai", "talk to ai", "conversation ai voice"],
+  "capabilityRequires": ["layout-chat"],
+  "files": [
+    { "source": "files/voice-chat-page.tsx", "target": "src/app/voice/page.tsx" },
+    { "source": "files/voice-transcript.tsx", "target": "src/components/voice/voice-transcript.tsx" },
+    { "source": "files/voice-controls.tsx", "target": "src/components/voice/voice-controls.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/voice"],
+    "apiRoutes": ["/api/voice/stream", "/api/voice/tts"],
+    "components": ["VoiceChatPage", "VoiceTranscript", "VoiceControls"],
+    "integrations": ["Web Audio API for microphone capture", "Speech-to-text (Whisper, Deepgram, AssemblyAI)", "Text-to-speech (ElevenLabs, OpenAI TTS)", "WebSocket for real-time audio streaming"],
+    "architectureNotes": [
+      "VoiceChatPage provides the full-page voice interface with orb visualization, transcript, and controls.",
+      "VoiceTranscript renders a real-time scrolling transcript with speaker labels and confidence scores.",
+      "VoiceControls provides mic, mute, and end-call controls with audio level indicators.",
+      "Wire /api/voice/stream to a WebSocket that accepts audio chunks and returns transcription + LLM response.",
+      "TTS audio should be played back through the Web Audio API — use an AudioContext for volume control."
+    ]
+  }
+}

package/registry/layers/capability/chart-widget/files/metric-card.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+
+interface MetricCardProps {
+  title: string
+  value: string | number
+  change?: number
+  changeLabel?: string
+  icon?: React.ReactNode
+}
+
+export function MetricCard({
+  title,
+  value,
+  change,
+  changeLabel = 'from last period',
+  icon,
+}: MetricCardProps) {
+  const isPositive = change !== undefined && change >= 0
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+        {icon && (
+          <div className="text-muted-foreground">{icon}</div>
+        )}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {change !== undefined && (
+          <div className="mt-1 flex items-center gap-1 text-xs">
+            {isPositive ? (
+              <TrendingUp className="h-3 w-3 text-emerald-500" />
+            ) : (
+              <TrendingDown className="h-3 w-3 text-red-500" />
+            )}
+            <span className={isPositive ? 'text-emerald-500' : 'text-red-500'}>
+              {isPositive ? '+' : ''}{change}%
+            </span>
+            <span className="text-muted-foreground">{changeLabel}</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/registry/layers/capability/chart-widget/files/simple-chart.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+} from 'recharts'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+const CHART_COLORS = [
+  'hsl(var(--chart-1))',
+  'hsl(var(--chart-2))',
+  'hsl(var(--chart-3))',
+  'hsl(var(--chart-4))',
+  'hsl(var(--chart-5))',
+]
+
+interface SimpleChartProps {
+  title?: string
+  data: Array<{ name: string; value: number; [key: string]: unknown }>
+  type?: 'line' | 'bar' | 'area'
+  height?: number
+  dataKeys?: string[]
+}
+
+export function SimpleChart({
+  title,
+  data,
+  type = 'line',
+  height = 300,
+  dataKeys,
+}: SimpleChartProps) {
+  const keys = dataKeys ?? ['value']
+
+  const renderChart = () => {
+    const sharedProps = { data, margin: { top: 8, right: 8, bottom: 0, left: -16 } }
+    const axisProps = {
+      xAxis: <XAxis dataKey="name" tickLine={false} axisLine={false} className="text-xs" />,
+      yAxis: <YAxis tickLine={false} axisLine={false} className="text-xs" />,
+      grid: <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />,
+      tooltip: <Tooltip contentStyle={{ borderRadius: '8px', border: '1px solid hsl(var(--border))' }} />,
+    }
+
+    if (type === 'bar') {
+      return (
+        <BarChart {...sharedProps}>
+          {axisProps.grid}
+          {axisProps.xAxis}
+          {axisProps.yAxis}
+          {axisProps.tooltip}
+          {keys.map((key, i) => (
+            <Bar key={key} dataKey={key} fill={CHART_COLORS[i % CHART_COLORS.length]} radius={[4, 4, 0, 0]} />
+          ))}
+        </BarChart>
+      )
+    }
+
+    if (type === 'area') {
+      return (
+        <AreaChart {...sharedProps}>
+          {axisProps.grid}
+          {axisProps.xAxis}
+          {axisProps.yAxis}
+          {axisProps.tooltip}
+          {keys.map((key, i) => (
+            <Area key={key} type="monotone" dataKey={key} stroke={CHART_COLORS[i % CHART_COLORS.length]} fill={CHART_COLORS[i % CHART_COLORS.length]} fillOpacity={0.2} />
+          ))}
+        </AreaChart>
+      )
+    }
+
+    return (
+      <LineChart {...sharedProps}>
+        {axisProps.grid}
+        {axisProps.xAxis}
+        {axisProps.yAxis}
+        {axisProps.tooltip}
+        {keys.map((key, i) => (
+          <Line key={key} type="monotone" dataKey={key} stroke={CHART_COLORS[i % CHART_COLORS.length]} strokeWidth={2} dot={false} />
+        ))}
+      </LineChart>
+    )
+  }
+
+  const chart = (
+    <ResponsiveContainer width="100%" height={height}>
+      {renderChart()}
+    </ResponsiveContainer>
+  )
+
+  if (!title) return chart
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{chart}</CardContent>
+    </Card>
+  )
+}

package/registry/layers/capability/chart-widget/files/starter-data.json

@@ -0,0 +1,19 @@
+{
+  "cards": [
+    {
+      "label": "Time To Artifact",
+      "value": "12s",
+      "note": "First visible surface should appear before the full implementation lands."
+    },
+    {
+      "label": "Conversion Lift",
+      "value": "+18%",
+      "note": "Placeholder metric for a partner-facing dashboard or landing page."
+    },
+    {
+      "label": "Live Users",
+      "value": "128",
+      "note": "Mock data intended to prove the shell and interaction model."
+    }
+  ]
+}

package/registry/layers/capability/chart-widget/manifest.json

@@ -0,0 +1,23 @@
+{
+  "id": "chart-widget",
+  "description": "Dashboard chart components (metric cards + recharts line/bar/area) with mock starter data.",
+  "appliesTo": ["frontend-static", "react-vite-ts", "nextjs-ts", "fullstack-ts"],
+  "files": [
+    {
+      "source": "files/starter-data.json",
+      "target": "starter-data.json"
+    },
+    {
+      "source": "files/metric-card.tsx",
+      "target": "components/metric-card.tsx"
+    },
+    {
+      "source": "files/simple-chart.tsx",
+      "target": "components/simple-chart.tsx"
+    }
+  ],
+  "buildHints": {
+    "dependencies": ["recharts"],
+    "notes": "MetricCard is standalone (shadcn Card + lucide icons). SimpleChart requires recharts as a peer dependency. Both components use Tailwind CSS variables (--chart-1 through --chart-5) for theming."
+  }
+}

package/registry/layers/capability/crypto-bridge-ui/files/bridge-card.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { ArrowLeftRight, ArrowRight, Loader2 } from 'lucide-react'
+
+interface Chain {
+  id: string
+  name: string
+  color: string
+}
+
+const CHAINS: Chain[] = [
+  { id: 'ethereum', name: 'Ethereum', color: '#627EEA' },
+  { id: 'arbitrum', name: 'Arbitrum', color: '#28A0F0' },
+  { id: 'optimism', name: 'Optimism', color: '#FF0420' },
+  { id: 'polygon', name: 'Polygon', color: '#8247E5' },
+  { id: 'base', name: 'Base', color: '#0052FF' },
+]
+
+export function BridgeCard() {
+  const [sourceChain, setSourceChain] = useState('ethereum')
+  const [destChain, setDestChain] = useState('arbitrum')
+  const [token, setToken] = useState('ETH')
+  const [amount, setAmount] = useState('')
+  const [bridging, setBridging] = useState(false)
+
+  const handleSwapChains = () => {
+    setSourceChain(destChain)
+    setDestChain(sourceChain)
+  }
+
+  const source = CHAINS.find((c) => c.id === sourceChain)
+  const dest = CHAINS.find((c) => c.id === destChain)
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg">Bridge</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-2">
+          <div className="flex-1">
+            <p className="text-xs text-muted-foreground mb-1.5">From</p>
+            <Select value={sourceChain} onValueChange={setSourceChain}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {CHAINS.map((chain) => (
+                  <SelectItem key={chain.id} value={chain.id}>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="h-4 w-4 rounded-full"
+                        style={{ backgroundColor: chain.color }}
+                      />
+                      {chain.name}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="mt-5 h-8 w-8 shrink-0"
+            onClick={handleSwapChains}
+          >
+            <ArrowLeftRight className="h-4 w-4" />
+          </Button>
+          <div className="flex-1">
+            <p className="text-xs text-muted-foreground mb-1.5">To</p>
+            <Select value={destChain} onValueChange={setDestChain}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {CHAINS.map((chain) => (
+                  <SelectItem key={chain.id} value={chain.id}>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="h-4 w-4 rounded-full"
+                        style={{ backgroundColor: chain.color }}
+                      />
+                      {chain.name}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs text-muted-foreground">Token & Amount</span>
+            <span className="text-xs text-muted-foreground">Balance: 1.234 {token}</span>
+          </div>
+          <div className="flex gap-2">
+            <Select value={token} onValueChange={setToken}>
+              <SelectTrigger className="w-28 shrink-0">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ETH">ETH</SelectItem>
+                <SelectItem value="USDC">USDC</SelectItem>
+                <SelectItem value="USDT">USDT</SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              type="number"
+              placeholder="0.0"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground py-1">
+          <div className="flex items-center gap-1.5">
+            <div className="h-3 w-3 rounded-full" style={{ backgroundColor: source?.color }} />
+            <span>{source?.name}</span>
+          </div>
+          <ArrowRight className="h-3.5 w-3.5" />
+          <Badge variant="secondary" className="text-xs">Bridge Protocol</Badge>
+          <ArrowRight className="h-3.5 w-3.5" />
+          <div className="flex items-center gap-1.5">
+            <div className="h-3 w-3 rounded-full" style={{ backgroundColor: dest?.color }} />
+            <span>{dest?.name}</span>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="space-y-1.5 text-xs text-muted-foreground">
+          <div className="flex justify-between">
+            <span>Bridge Fee</span>
+            <span>~0.001 ETH</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Gas Estimate</span>
+            <span>~$2.50</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Estimated Time</span>
+            <span>~10 min</span>
+          </div>
+        </div>
+
+        <Button className="w-full" size="lg" disabled={bridging || !amount}>
+          {bridging ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+          {bridging ? 'Bridging...' : 'Bridge'}
+        </Button>
+
+        <p className="text-xs text-center text-muted-foreground">
+          Funds will arrive on {dest?.name} after confirmation.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

package/registry/layers/capability/crypto-bridge-ui/files/bridge-history.tsx

@@ -0,0 +1,91 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { ExternalLink } from 'lucide-react'
+
+type BridgeStatus = 'pending' | 'confirming' | 'completed' | 'failed'
+
+export interface BridgeTransaction {
+  id: string
+  token: string
+  amount: string
+  fromChain: string
+  toChain: string
+  status: BridgeStatus
+  confirmations?: string
+  time: string
+  txHash: string
+}
+
+const STATUS_CONFIG: Record<BridgeStatus, { variant: 'default' | 'secondary' | 'destructive' | 'outline'; label: string }> = {
+  pending: { variant: 'outline', label: 'Pending' },
+  confirming: { variant: 'secondary', label: 'Confirming' },
+  completed: { variant: 'default', label: 'Completed' },
+  failed: { variant: 'destructive', label: 'Failed' },
+}
+
+const DEMO_TXS: BridgeTransaction[] = [
+  { id: '1', token: 'ETH', amount: '0.5', fromChain: 'Ethereum', toChain: 'Arbitrum', status: 'completed', time: '2h ago', txHash: '0xabc...123' },
+  { id: '2', token: 'USDC', amount: '1000', fromChain: 'Arbitrum', toChain: 'Base', status: 'confirming', confirmations: '4/12', time: '15m ago', txHash: '0xdef...456' },
+  { id: '3', token: 'ETH', amount: '1.0', fromChain: 'Ethereum', toChain: 'Optimism', status: 'pending', time: '2m ago', txHash: '0xghi...789' },
+]
+
+export function BridgeHistory({ transactions = DEMO_TXS }: { transactions?: BridgeTransaction[] }) {
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Token</TableHead>
+            <TableHead>Amount</TableHead>
+            <TableHead>From</TableHead>
+            <TableHead>To</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Time</TableHead>
+            <TableHead className="text-right">Tx</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {transactions.map((tx) => {
+            const config = STATUS_CONFIG[tx.status]
+            return (
+              <TableRow key={tx.id}>
+                <TableCell className="font-medium">{tx.token}</TableCell>
+                <TableCell>{tx.amount}</TableCell>
+                <TableCell>{tx.fromChain}</TableCell>
+                <TableCell>{tx.toChain}</TableCell>
+                <TableCell>
+                  <Badge variant={config.variant}>
+                    {config.label}
+                    {tx.confirmations && ` (${tx.confirmations})`}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{tx.time}</TableCell>
+                <TableCell className="text-right">
+                  <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
+                    {tx.txHash}
+                    <ExternalLink className="h-3 w-3" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+          {transactions.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={7} className="h-24 text-center text-muted-foreground">
+                No bridge transactions yet.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}