@tangle-network/starter-foundry 0.1.0

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

@@ -0,0 +1,26 @@
+{
+  "id": "ai-agent-orchestrator",
+  "description": "Multi-agent orchestration interface with agent cards, tool-call timeline, and run management.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["agent orchestrator", "multi-agent", "crew", "conductor", "agent workflow", "tool calls", "agent trace", "agent run"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/agent-run-view.tsx", "target": "src/components/agents/agent-run-view.tsx" },
+    { "source": "files/agent-card.tsx", "target": "src/components/agents/agent-card.tsx" },
+    { "source": "files/orchestrator-page.tsx", "target": "src/app/agents/page.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/agents", "/agents/[runId]"],
+    "apiRoutes": ["/api/agents/run", "/api/agents/runs/[id]"],
+    "components": ["AgentRunView", "AgentCard", "OrchestratorPage"],
+    "integrations": ["Agent runtime (CrewAI, LangGraph, custom)", "Server-Sent Events for live step streaming"],
+    "architectureNotes": [
+      "OrchestratorPage provides a two-column layout: agent cards on left, run timeline in center.",
+      "AgentRunView renders a vertical timeline of steps with collapsible tool call details.",
+      "AgentCard displays individual agent identity, status, tools, and activity.",
+      "Wire /api/agents/run to your agent framework — stream steps as SSE events.",
+      "Each step should include: agentId, action, toolCall (optional), output, duration, status."
+    ]
+  }
+}

package/registry/layers/capability/ai-chat-sessions/files/chat-header.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { ChevronDown, Share2, Settings2 } from 'lucide-react'
+
+interface ChatHeaderProps {
+  title: string
+  model: string
+  models: string[]
+  onTitleChange?: (title: string) => void
+  onModelChange?: (model: string) => void
+  onShare?: () => void
+}
+
+export function ChatHeader({ title, model, models, onTitleChange, onModelChange, onShare }: ChatHeaderProps) {
+  const [editing, setEditing] = React.useState(false)
+  const [draft, setDraft] = React.useState(title)
+  const [systemPrompt, setSystemPrompt] = React.useState('')
+  const [temperature, setTemperature] = React.useState('0.7')
+
+  const commitTitle = () => {
+    setEditing(false)
+    if (draft.trim() && draft !== title) onTitleChange?.(draft.trim())
+  }
+
+  return (
+    <header className="flex h-14 items-center gap-3 border-b px-4">
+      {editing ? (
+        <Input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commitTitle}
+          onKeyDown={(e) => { if (e.key === 'Enter') commitTitle(); if (e.key === 'Escape') { setDraft(title); setEditing(false) } }}
+          className="h-8 max-w-xs text-sm font-medium"
+          autoFocus
+        />
+      ) : (
+        <button onClick={() => { setDraft(title); setEditing(true) }} className="truncate text-sm font-medium hover:underline">
+          {title}
+        </button>
+      )}
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="ml-1 gap-1 text-xs text-muted-foreground">
+            {model}
+            <ChevronDown className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {models.map((m) => (
+            <DropdownMenuItem key={m} onClick={() => onModelChange?.(m)}>{m}</DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <div className="flex-1" />
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-72 space-y-3" align="end">
+          <div className="space-y-1">
+            <label className="text-xs font-medium">System prompt</label>
+            <textarea
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder="You are a helpful assistant..."
+              rows={3}
+              className="w-full resize-none rounded-md border bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-xs font-medium">Temperature</label>
+            <Input
+              type="number"
+              min="0"
+              max="2"
+              step="0.1"
+              value={temperature}
+              onChange={(e) => setTemperature(e.target.value)}
+              className="h-8 text-sm"
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onShare}>
+        <Share2 className="h-4 w-4" />
+      </Button>
+    </header>
+  )
+}

package/registry/layers/capability/ai-chat-sessions/files/session-folders.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { Folder, FolderPlus, ChevronRight, Star, Archive, MessageSquare } from 'lucide-react'
+
+interface ChatFolder {
+  id: string
+  name: string
+  icon?: 'all' | 'starred' | 'archived' | 'custom'
+  count: number
+}
+
+interface SessionFoldersProps {
+  folders: ChatFolder[]
+  activeId?: string
+  onSelect: (id: string) => void
+  onCreate?: () => void
+  onRename?: (id: string) => void
+  onDelete?: (id: string) => void
+}
+
+const folderIcons = {
+  all: MessageSquare,
+  starred: Star,
+  archived: Archive,
+  custom: Folder,
+}
+
+function FolderItem({
+  folder,
+  isActive,
+  onSelect,
+}: {
+  folder: ChatFolder
+  isActive: boolean
+  onSelect: () => void
+}) {
+  const Icon = folderIcons[folder.icon ?? 'custom']
+
+  return (
+    <button
+      onClick={onSelect}
+      className={cn(
+        'flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm transition-colors',
+        'hover:bg-accent',
+        isActive && 'bg-accent font-medium'
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <span className="flex-1 truncate">{folder.name}</span>
+      <Badge variant="secondary" className="h-5 min-w-[20px] justify-center px-1.5 text-[10px]">
+        {folder.count}
+      </Badge>
+    </button>
+  )
+}
+
+export function SessionFolders({ folders, activeId, onSelect, onCreate }: SessionFoldersProps) {
+  const [open, setOpen] = React.useState(true)
+
+  const defaultFolders = folders.filter((f) => f.icon && f.icon !== 'custom')
+  const customFolders = folders.filter((f) => !f.icon || f.icon === 'custom')
+
+  return (
+    <div className="space-y-1 p-2">
+      {defaultFolders.map((f) => (
+        <FolderItem key={f.id} folder={f} isActive={activeId === f.id} onSelect={() => onSelect(f.id)} />
+      ))}
+
+      {customFolders.length > 0 && (
+        <Collapsible open={open} onOpenChange={setOpen} className="pt-2">
+          <CollapsibleTrigger className="flex w-full items-center gap-1.5 px-3 py-1 text-xs font-medium text-muted-foreground hover:text-foreground">
+            <ChevronRight className={cn('h-3 w-3 transition-transform', open && 'rotate-90')} />
+            Folders
+          </CollapsibleTrigger>
+          <CollapsibleContent className="space-y-0.5 pt-1">
+            {customFolders.map((f) => (
+              <FolderItem key={f.id} folder={f} isActive={activeId === f.id} onSelect={() => onSelect(f.id)} />
+            ))}
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      <Button variant="ghost" size="sm" className="mt-1 w-full justify-start gap-2 text-muted-foreground" onClick={onCreate}>
+        <FolderPlus className="h-3.5 w-3.5" />
+        New folder
+      </Button>
+    </div>
+  )
+}

package/registry/layers/capability/ai-chat-sessions/files/session-list.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Separator } from '@/components/ui/separator'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Plus, Search, MoreHorizontal, Pin, Pencil, Archive, Trash2, MessageSquare } from 'lucide-react'
+
+interface Session {
+  id: string
+  title: string
+  lastMessage: string
+  updatedAt: Date
+  pinned?: boolean
+  archived?: boolean
+}
+
+interface SessionListProps {
+  sessions: Session[]
+  activeId?: string
+  onSelect: (id: string) => void
+  onNew: () => void
+  onRename?: (id: string) => void
+  onPin?: (id: string) => void
+  onArchive?: (id: string) => void
+  onDelete?: (id: string) => void
+}
+
+function groupSessions(sessions: Session[]) {
+  const now = new Date()
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const startOfYesterday = new Date(startOfToday.getTime() - 86400000)
+  const startOf7Days = new Date(startOfToday.getTime() - 7 * 86400000)
+
+  const pinned: Session[] = []
+  const today: Session[] = []
+  const yesterday: Session[] = []
+  const previous7: Session[] = []
+  const older: Session[] = []
+
+  for (const s of sessions) {
+    if (s.archived) continue
+    if (s.pinned) { pinned.push(s); continue }
+    const t = s.updatedAt.getTime()
+    if (t >= startOfToday.getTime()) today.push(s)
+    else if (t >= startOfYesterday.getTime()) yesterday.push(s)
+    else if (t >= startOf7Days.getTime()) previous7.push(s)
+    else older.push(s)
+  }
+
+  return { pinned, today, yesterday, previous7, older }
+}
+
+function SessionItem({
+  session,
+  isActive,
+  onSelect,
+  onRename,
+  onPin,
+  onArchive,
+  onDelete,
+}: {
+  session: Session
+  isActive: boolean
+  onSelect: () => void
+  onRename?: () => void
+  onPin?: () => void
+  onArchive?: () => void
+  onDelete?: () => void
+}) {
+  return (
+    <div
+      onClick={onSelect}
+      className={cn(
+        'group flex w-full cursor-pointer items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
+        'hover:bg-accent',
+        isActive && '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">{session.title}</p>
+        <p className="truncate text-xs text-muted-foreground">{session.lastMessage}</p>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <MoreHorizontal className="h-3.5 w-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={onRename}>
+            <Pencil className="mr-2 h-3.5 w-3.5" /> Rename
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={onPin}>
+            <Pin className="mr-2 h-3.5 w-3.5" /> {session.pinned ? 'Unpin' : 'Pin'}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={onArchive}>
+            <Archive className="mr-2 h-3.5 w-3.5" /> Archive
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={onDelete} className="text-destructive">
+            <Trash2 className="mr-2 h-3.5 w-3.5" /> Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+function GroupLabel({ label }: { label: string }) {
+  return <p className="px-3 pb-1 pt-3 text-xs font-medium text-muted-foreground">{label}</p>
+}
+
+export function SessionList({ sessions, activeId, onSelect, onNew, onRename, onPin, onArchive, onDelete }: SessionListProps) {
+  const [query, setQuery] = React.useState('')
+
+  const filtered = query
+    ? sessions.filter((s) => s.title.toLowerCase().includes(query.toLowerCase()) || s.lastMessage.toLowerCase().includes(query.toLowerCase()))
+    : sessions
+
+  const groups = groupSessions(filtered)
+
+  const renderGroup = (label: string, items: Session[]) =>
+    items.length > 0 && (
+      <div key={label}>
+        <GroupLabel label={label} />
+        {items.map((s) => (
+          <SessionItem
+            key={s.id}
+            session={s}
+            isActive={activeId === s.id}
+            onSelect={() => onSelect(s.id)}
+            onRename={() => onRename?.(s.id)}
+            onPin={() => onPin?.(s.id)}
+            onArchive={() => onArchive?.(s.id)}
+            onDelete={() => onDelete?.(s.id)}
+          />
+        ))}
+      </div>
+    )
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex h-14 items-center justify-between border-b px-3">
+        <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>
+
+      <div className="px-3 pt-3">
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            placeholder="Search conversations..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="h-9 pl-8 text-sm"
+          />
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="space-y-0.5 p-2">
+          {renderGroup('Pinned', groups.pinned)}
+          {renderGroup('Today', groups.today)}
+          {renderGroup('Yesterday', groups.yesterday)}
+          {renderGroup('Previous 7 Days', groups.previous7)}
+          {renderGroup('Older', groups.older)}
+        </div>
+      </ScrollArea>
+
+      <Separator />
+      <div className="p-3">
+        <p className="text-center text-xs text-muted-foreground">
+          {filtered.length} conversation{filtered.length !== 1 && 's'}
+        </p>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,26 @@
+{
+  "id": "ai-chat-sessions",
+  "description": "ChatGPT/Claude-style session management with conversation history, folders, search, and per-chat settings.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["chat sessions", "conversation history", "chat history", "chat folders", "chat search", "session management"],
+  "capabilityRequires": ["layout-chat"],
+  "files": [
+    { "source": "files/session-list.tsx", "target": "src/components/chat/session-list.tsx" },
+    { "source": "files/session-folders.tsx", "target": "src/components/chat/session-folders.tsx" },
+    { "source": "files/chat-header.tsx", "target": "src/components/chat/chat-header.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/chat", "/chat/[id]"],
+    "apiRoutes": ["/api/chat/sessions", "/api/chat/sessions/[id]", "/api/chat/folders"],
+    "components": ["SessionList", "SessionFolders", "ChatHeader"],
+    "integrations": ["Session CRUD via /api/chat/sessions", "Folder management via /api/chat/folders"],
+    "architectureNotes": [
+      "SessionList replaces or wraps ChatSidebar with grouped conversation history (Today, Yesterday, etc.).",
+      "SessionFolders provides a collapsible folder tree for organizing conversations.",
+      "ChatHeader adds inline title editing, model selection, temperature/system-prompt config, and share/export.",
+      "Wire session CRUD to your database — each session stores title, messages, folder assignment, pinned/archived state.",
+      "Search filters across session titles and message content server-side."
+    ]
+  }
+}

package/registry/layers/capability/ai-chat-ui/files/chat-config.json

@@ -0,0 +1,12 @@
+{
+  "model": "{{chatModel}}",
+  "streaming": true,
+  "maxHistoryMessages": 50,
+  "features": ["markdown", "code-blocks", "citations", "file-upload"],
+  "apiEndpoint": "/api/chat",
+  "notes": [
+    "The chat interface streams responses via Server-Sent Events.",
+    "Message history is kept client-side up to maxHistoryMessages.",
+    "Extend with tool-use by adding function definitions to the agent config."
+  ]
+}

package/registry/layers/capability/ai-chat-ui/files/chat-data.json

@@ -0,0 +1,8 @@
+{
+  "sampleThread": [
+    { "role": "user", "content": "What does this project do?" },
+    { "role": "assistant", "content": "This is a starter project with a streaming chat interface. You can extend it with custom tools, RAG retrieval, or connect it to any LLM backend." },
+    { "role": "user", "content": "How do I add a new tool?" },
+    { "role": "assistant", "content": "Define the tool schema in your agent config, then register the handler in the API route. The chat UI will automatically render tool call results." }
+  ]
+}

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

@@ -0,0 +1,65 @@
+{
+  "id": "ai-chat-ui",
+  "description": "Adds streaming AI chat interface with message history and markdown rendering.",
+  "appliesTo": [
+    "react-vite-ts",
+    "nextjs-ts",
+    "fullstack-ts"
+  ],
+  "defaults": {
+    "chatModel": "gpt-4o"
+  },
+  "files": [
+    {
+      "source": "files/chat-config.json",
+      "target": "chat-config.json"
+    },
+    {
+      "source": "files/chat-data.json",
+      "target": "chat-data.json"
+    }
+  ],
+  "contextHints": {
+    "extensionPoints": [
+      "chat-config.json",
+      "chat-data.json"
+    ]
+  },
+  "capabilityRequires": ["layout-chat"],
+  "keywords": [
+    "chat interface",
+    "chat ui",
+    "streaming chat",
+    "chatbot ui",
+    "ai chat",
+    "conversation ui",
+    "chat app",
+    "chatgpt clone"
+  ],
+  "buildHints": {
+    "pages": [
+      "/chat",
+      "/chat/[id]"
+    ],
+    "apiRoutes": [
+      "/api/chat",
+      "/api/chat/history"
+    ],
+    "components": [
+      "ChatMessage",
+      "ChatInput",
+      "MessageList",
+      "StreamingIndicator",
+      "CodeBlock"
+    ],
+    "dataModels": [
+      "Message",
+      "Conversation",
+      "ToolCallResult"
+    ],
+    "integrations": [
+      "Server-Sent Events for streaming",
+      "Markdown rendering"
+    ]
+  }
+}

package/registry/layers/capability/ai-fine-tuning/files/finetune-config.json

@@ -0,0 +1,10 @@
+{
+  "framework": "{{finetuneFramework}}",
+  "baseModel": "{{baseModel}}",
+  "quantization": "4bit",
+  "loraConfig": { "r": 16, "alpha": 16, "dropout": 0.05, "targetModules": ["q_proj", "v_proj"] },
+  "training": { "epochs": 3, "batchSize": 4, "learningRate": 2e-4, "warmupSteps": 10 },
+  "dataset": { "format": "alpaca", "path": "dataset/train.jsonl" },
+  "references": ["Unsloth", "QLoRA", "PEFT", "TRL"],
+  "notes": ["Unsloth provides 2x faster training with 60% less memory.", "Use 4-bit quantization for consumer GPUs (24GB VRAM).", "Export to GGUF for local inference or push to HuggingFace Hub."]
+}

package/registry/layers/capability/ai-fine-tuning/manifest.json

@@ -0,0 +1,37 @@
+{
+  "id": "ai-fine-tuning",
+  "description": "Adds LLM fine-tuning pipeline with dataset preparation, training config, and evaluation.",
+  "appliesTo": [
+    "agent-service-py",
+    "python-api",
+    "python-worker"
+  ],
+  "defaults": {
+    "finetuneFramework": "unsloth",
+    "baseModel": "llama-3.1-8b"
+  },
+  "files": [
+    {
+      "source": "files/finetune-config.json",
+      "target": "finetune-config.json"
+    }
+  ],
+  "contextHints": {
+    "extensionPoints": [
+      "finetune-config.json",
+      "dataset/",
+      "training/"
+    ]
+  },
+  "keywords": [
+    "fine-tuning",
+    "fine tuning",
+    "finetune",
+    "unsloth",
+    "qlora",
+    "lora",
+    "peft",
+    "training run",
+    "train a model"
+  ]
+}