{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "agent-memory-inspector",
  "title": "Agent Memory Inspector",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/agent-memory-inspector/AgentMemoryInspector.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  AlertCircle,\n  Brain,\n  Check,\n  Clock,\n  Cpu,\n  Database,\n  Network,\n  Pencil,\n  Plus,\n  RefreshCw,\n  Search,\n  ShieldCheck,\n  Star,\n  Trash2,\n  Workflow,\n  X,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport AgentContextBuffer from './AgentContextBuffer.vue'\nimport AgentEntityGraph from './AgentEntityGraph.vue'\nimport {\n  INITIAL_MEMORY_FACTS,\n  INITIAL_MESSAGE_TURNS,\n  INITIAL_ENTITY_NODES,\n  INITIAL_GRAPH_TRIPLETS,\n} from './agent-memory-data'\nimport type { EpisodicMemory, MessageTurn, EntityNode, GraphTriplet, MemoryCategory } from './agent-memory-types'\nexport type { EpisodicMemory, MessageTurn, EntityNode, GraphTriplet, MemoryCategory } from './agent-memory-types'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\n// State initialized from extracted data\nconst memoryFacts = ref<EpisodicMemory[]>([...INITIAL_MEMORY_FACTS])\nconst messageTurns = ref<MessageTurn[]>([...INITIAL_MESSAGE_TURNS])\nconst entityNodes = ref<EntityNode[]>([...INITIAL_ENTITY_NODES])\nconst graphTriplets = ref<GraphTriplet[]>([...INITIAL_GRAPH_TRIPLETS])\n// UI Controls State\nconst activeTab = ref('context')\nconst selectedCategory = ref<string>('all')\nconst searchQuery = ref('')\nconst selectedTurnId = ref<string>('turn-4')\nconst selectedNodeId = ref<string>('node-2')\nconst isWiped = ref(false)\nconst wipeToastVisible = ref(false)\nconst isAddingFact = ref(false)\nconst editingFactId = ref<string | null>(null)\n\n// Form State for new memory fact\nconst newFactForm = ref<{\n  content: string\n  category: MemoryCategory\n  confidence: number\n}>({\n  content: '',\n  category: 'User Preference',\n  confidence: 0.95,\n})\n\nconst filteredMemories = computed(() => {\n  return memoryFacts.value.filter((fact) => {\n    const matchesCategory = selectedCategory.value === 'all' || fact.category === selectedCategory.value\n    const matchesSearch =\n      searchQuery.value.trim() === '' ||\n      fact.content.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      fact.tags.some((t) => t.toLowerCase().includes(searchQuery.value.toLowerCase()))\n    return matchesCategory && matchesSearch\n  })\n})\n\nconst selectedTurn = computed(() => {\n  return messageTurns.value.find((t) => t.id === selectedTurnId.value) || messageTurns.value[0]\n})\n\nconst selectedNode = computed(() => {\n  return entityNodes.value.find((n) => n.id === selectedNodeId.value) || entityNodes.value[1]\n})\n\nconst filteredTriplets = computed(() => {\n  if (!selectedNode.value) return graphTriplets.value\n  return graphTriplets.value.filter(\n    (t) => t.subject === selectedNode.value.label || t.object === selectedNode.value.label,\n  )\n})\n\nfunction wipeWorkingMemory() {\n  isWiped.value = true\n  wipeToastVisible.value = true\n  setTimeout(() => {\n    wipeToastVisible.value = false\n  }, 4000)\n}\n\nfunction restoreWorkingMemory() {\n  isWiped.value = false\n  wipeToastVisible.value = false\n}\n\nfunction deleteFact(id: string) {\n  memoryFacts.value = memoryFacts.value.filter((f) => f.id !== id)\n}\n\nfunction togglePinFact(id: string) {\n  const fact = memoryFacts.value.find((f) => f.id === id)\n  if (fact) {\n    fact.isPinned = !fact.isPinned\n  }\n}\n\nfunction startAddFact() {\n  isAddingFact.value = true\n  editingFactId.value = null\n  newFactForm.value = {\n    content: '',\n    category: 'User Preference',\n    confidence: 0.95,\n  }\n}\n\nfunction saveNewFact() {\n  if (!newFactForm.value.content.trim()) return\n\n  if (editingFactId.value) {\n    const existing = memoryFacts.value.find((f) => f.id === editingFactId.value)\n    if (existing) {\n      existing.content = newFactForm.value.content\n      existing.category = newFactForm.value.category\n      existing.confidence = Number(newFactForm.value.confidence)\n      existing.lastRecalled = 'Just now'\n    }\n  } else {\n    const newId = `fact-${Date.now()}`\n    memoryFacts.value.unshift({\n      id: newId,\n      content: newFactForm.value.content,\n      category: newFactForm.value.category,\n      confidence: Number(newFactForm.value.confidence),\n      lastRecalled: 'Just now',\n      recallsCount: 1,\n      sourceTurn: 'Manual Injection',\n      tags: [newFactForm.value.category.toLowerCase().replace(/\\s+/g, '-')],\n      isPinned: false,\n    })\n  }\n\n  isAddingFact.value = false\n  editingFactId.value = null\n}\n\nfunction editFact(fact: EpisodicMemory) {\n  editingFactId.value = fact.id\n  newFactForm.value = {\n    content: fact.content,\n    category: fact.category,\n    confidence: fact.confidence,\n  }\n  isAddingFact.value = true\n}\n\nfunction cancelAddFact() {\n  isAddingFact.value = false\n  editingFactId.value = null\n}\n\nfunction getCategoryVariant(category: MemoryCategory): 'default' | 'secondary' | 'outline' {\n  switch (category) {\n    case 'User Preference':\n      return 'default'\n    case 'Architecture Rule':\n      return 'secondary'\n    case 'System Constraint':\n      return 'outline'\n  }\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full space-y-6 font-sans antialiased', props.class)\">\n    <!-- Header Block -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"p-6 pb-4\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Left: Agent Identity & Engine Details -->\n          <div class=\"flex items-start gap-4\">\n            <div class=\"relative\">\n              <Avatar class=\"border-border bg-muted/60 h-12 w-12 rounded-xl border p-1\">\n                <AvatarFallback class=\"bg-primary/10 text-primary rounded-lg font-mono text-sm font-bold\">\n                  <Brain class=\"text-primary h-6 w-6\" />\n                </AvatarFallback>\n              </Avatar>\n              <span\n                class=\"bg-background absolute -right-0.5 -bottom-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full\"\n              >\n                <span class=\"bg-success ring-success/20 h-2 w-2 rounded-full ring-2\" />\n              </span>\n            </div>\n\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h2 class=\"text-foreground text-lg font-semibold tracking-tight\">Senior Engineering Co-Pilot Agent</h2>\n                <Badge variant=\"outline\" class=\"gap-1 px-2 py-0.5 text-xs font-medium\">\n                  <Cpu class=\"text-muted-foreground h-3 w-3\" />\n                  Autonomous Sync\n                </Badge>\n              </div>\n\n              <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n                <span class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                  <Database class=\"text-primary h-3.5 w-3.5\" />\n                  Mem0 Vector + Neo4j Entity Graph\n                </span>\n                <span class=\"flex items-center gap-1\">\n                  <Network class=\"h-3.5 w-3.5\" />\n                  142 Episodic Memories · 28 Entity Nodes\n                </span>\n                <span class=\"text-muted-foreground flex items-center gap-1 font-mono\">\n                  <Activity class=\"text-success h-3 w-3\" />\n                  Recall: 12ms\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right: Actions -->\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"text-muted-foreground hover:text-destructive h-9 gap-1.5 text-xs font-medium\"\n              @click=\"wipeWorkingMemory\"\n            >\n              <Trash2 class=\"h-3.5 w-3.5\" />\n              Wipe Working Memory\n            </Button>\n\n            <Button size=\"sm\" class=\"h-9 gap-1.5 text-xs font-medium shadow-xs\" @click=\"startAddFact\">\n              <Plus class=\"h-3.5 w-3.5\" />\n              Add Memory Fact\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <!-- Wipe State Feedback Banner -->\n      <div v-if=\"wipeToastVisible\" class=\"border-destructive/20 bg-destructive/5 border-t px-6 py-2.5\">\n        <div class=\"text-destructive flex items-center justify-between gap-2 text-xs\">\n          <div class=\"flex items-center gap-2\">\n            <AlertCircle class=\"h-4 w-4 shrink-0\" />\n            <span>Working context buffer cache cleared. Persistent episodic facts remain intact.</span>\n          </div>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            class=\"border-destructive/30 text-destructive hover:bg-destructive/10 h-7 text-xs\"\n            @click=\"restoreWorkingMemory\"\n          >\n            <RefreshCw class=\"mr-1 h-3 w-3\" />\n            Restore\n          </Button>\n        </div>\n      </div>\n    </Card>\n\n    <!-- Inline Add/Edit Memory Fact Modal / Drawer -->\n    <Card v-if=\"isAddingFact\" class=\"border-primary/30 bg-card ring-primary/20 shadow-sm ring-1\">\n      <CardHeader class=\"p-4 pb-2\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <Brain class=\"text-primary h-4 w-4\" />\n            <CardTitle class=\"text-sm font-semibold\">\n              {{ editingFactId ? 'Edit Memory Fact' : 'Add Episodic Memory Fact' }}\n            </CardTitle>\n          </div>\n          <Button variant=\"ghost\" size=\"sm\" class=\"h-7 w-7 p-0\" aria-label=\"Cancel adding fact\" @click=\"cancelAddFact\">\n            <X class=\"h-4 w-4\" />\n          </Button>\n        </div>\n        <CardDescription class=\"text-xs\">\n          Inject a verified truth into the persistent Mem0 vector embedding space.\n        </CardDescription>\n      </CardHeader>\n\n      <CardContent class=\"space-y-3 p-4 pt-2\">\n        <div class=\"space-y-1.5\">\n          <label class=\"text-foreground text-xs font-medium\">Fact Content</label>\n          <textarea\n            v-model=\"newFactForm.content\"\n            placeholder=\"e.g. User enforces strict 120-character printWidth in Prettier...\"\n            rows=\"2\"\n            class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-xs focus-visible:ring-1 focus-visible:outline-none\"\n          />\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground text-xs font-medium\">Memory Category</label>\n            <select\n              v-model=\"newFactForm.category\"\n              class=\"border-input bg-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-xs focus-visible:ring-1 focus-visible:outline-none\"\n            >\n              <option value=\"User Preference\">User Preference</option>\n              <option value=\"Architecture Rule\">Architecture Rule</option>\n              <option value=\"System Constraint\">System Constraint</option>\n            </select>\n          </div>\n\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground text-xs font-medium\">Confidence Score (0.0 - 1.0)</label>\n            <input\n              v-model.number=\"newFactForm.confidence\"\n              type=\"number\"\n              step=\"0.01\"\n              min=\"0\"\n              max=\"1\"\n              class=\"border-input bg-background text-foreground focus-visible:ring-ring w-full rounded-md border px-3 py-1.5 font-mono text-xs focus-visible:ring-1 focus-visible:outline-none\"\n            />\n          </div>\n        </div>\n      </CardContent>\n\n      <CardFooter class=\"border-border flex justify-end gap-2 border-t p-3\">\n        <Button aria-label=\"Cancel adding fact\" variant=\"ghost\" size=\"sm\" class=\"h-8 text-xs\" @click=\"cancelAddFact\">\n          Cancel\n        </Button>\n        <Button size=\"sm\" class=\"h-8 text-xs font-medium\" @click=\"saveNewFact\">\n          <Check class=\"mr-1 h-3.5 w-3.5\" />\n          {{ editingFactId ? 'Save Changes' : 'Store Fact' }}\n        </Button>\n      </CardFooter>\n    </Card>\n\n    <!-- Main Tabs Section -->\n    <Tabs v-model=\"activeTab\" default-value=\"context\" class=\"w-full space-y-4\">\n      <TabsList class=\"border-border bg-muted/40 grid h-10 w-full grid-cols-3 rounded-lg border p-1\">\n        <TabsTrigger value=\"context\" class=\"gap-2 text-xs font-medium\">\n          <Cpu class=\"h-3.5 w-3.5\" />\n          <span>Short-Term Context Buffer</span>\n          <Badge variant=\"secondary\" class=\"ml-1 px-1.5 py-0 font-mono text-xs font-normal\">\n            {{ isWiped ? '0 turns' : '4 turns' }}\n          </Badge>\n        </TabsTrigger>\n\n        <TabsTrigger value=\"episodic\" class=\"gap-2 text-xs font-medium\">\n          <Database class=\"h-3.5 w-3.5\" />\n          <span>Long-Term Episodic Memory</span>\n          <Badge variant=\"secondary\" class=\"ml-1 px-1.5 py-0 font-mono text-xs font-normal\">\n            {{ memoryFacts.length }} Facts\n          </Badge>\n        </TabsTrigger>\n\n        <TabsTrigger value=\"graph\" class=\"gap-2 text-xs font-medium\">\n          <Network class=\"h-3.5 w-3.5\" />\n          <span>Entity Knowledge Graph</span>\n          <Badge variant=\"secondary\" class=\"ml-1 px-1.5 py-0 font-mono text-xs font-normal\">\n            {{ entityNodes.length }} Nodes\n          </Badge>\n        </TabsTrigger>\n      </TabsList>\n\n      <!-- ========================================== -->\n      <!-- TAB 1: SHORT-TERM CONTEXT BUFFER          -->\n      <!-- ========================================== -->\n      <!-- TAB 1: SHORT-TERM CONTEXT BUFFER -->\n      <TabsContent value=\"context\" class=\"space-y-4 outline-none\">\n        <AgentContextBuffer\n          :is-wiped=\"isWiped\"\n          :turns=\"messageTurns\"\n          :selected-turn-id=\"selectedTurnId\"\n          @select-turn=\"(id) => (selectedTurnId = id)\"\n          @restore=\"restoreWorkingMemory\"\n        />\n      </TabsContent>\n\n      <!-- ========================================== -->\n      <!-- TAB 2: LONG-TERM EPISODIC MEMORY TABLE    -->\n      <!-- ========================================== -->\n      <TabsContent value=\"episodic\" class=\"space-y-4 outline-none\">\n        <Card class=\"border-border shadow-xs\">\n          <!-- Filter and Search Header -->\n          <CardHeader class=\"p-5 pb-3\">\n            <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n              <div>\n                <CardTitle class=\"text-sm font-semibold\">Persistent Episodic Facts</CardTitle>\n                <CardDescription class=\"text-xs\">\n                  Distilled knowledge facts retrieved via Mem0 vector cosine similarity search.\n                </CardDescription>\n              </div>\n\n              <!-- Search & Category Filters -->\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <div class=\"relative w-full sm:w-64\">\n                  <Search class=\"text-muted-foreground absolute top-2.5 left-2.5 h-3.5 w-3.5\" />\n                  <input\n                    v-model=\"searchQuery\"\n                    type=\"text\"\n                    placeholder=\"Search memory facts or tags...\"\n                    class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border pr-3 pl-8 text-xs focus-visible:ring-1 focus-visible:outline-none\"\n                  />\n                </div>\n\n                <div class=\"border-border bg-muted/40 flex items-center gap-1 rounded-lg border p-0.5\">\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      cn(\n                        'rounded px-2.5 py-1 text-xs font-medium transition-colors',\n                        selectedCategory === 'all'\n                          ? 'bg-background text-foreground shadow-xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                      )\n                    \"\n                    @click=\"selectedCategory = 'all'\"\n                  >\n                    All ({{ memoryFacts.length }})\n                  </button>\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      cn(\n                        'rounded px-2.5 py-1 text-xs font-medium transition-colors',\n                        selectedCategory === 'User Preference'\n                          ? 'bg-background text-foreground shadow-xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                      )\n                    \"\n                    @click=\"selectedCategory = 'User Preference'\"\n                  >\n                    Preference\n                  </button>\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      cn(\n                        'rounded px-2.5 py-1 text-xs font-medium transition-colors',\n                        selectedCategory === 'Architecture Rule'\n                          ? 'bg-background text-foreground shadow-xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                      )\n                    \"\n                    @click=\"selectedCategory = 'Architecture Rule'\"\n                  >\n                    Architecture\n                  </button>\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      cn(\n                        'rounded px-2.5 py-1 text-xs font-medium transition-colors',\n                        selectedCategory === 'System Constraint'\n                          ? 'bg-background text-foreground shadow-xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                      )\n                    \"\n                    @click=\"selectedCategory = 'System Constraint'\"\n                  >\n                    Constraint\n                  </button>\n                </div>\n              </div>\n            </div>\n          </CardHeader>\n\n          <!-- Memory Table -->\n          <CardContent class=\"p-0\">\n            <div class=\"overflow-x-auto\">\n              <Table>\n                <TableHeader>\n                  <TableRow class=\"hover:bg-transparent\">\n                    <TableHead class=\"w-8\"></TableHead>\n                    <TableHead class=\"min-w-[280px]\">Memory Fact Content</TableHead>\n                    <TableHead class=\"w-[160px]\">Category</TableHead>\n                    <TableHead class=\"w-[130px]\">Confidence</TableHead>\n                    <TableHead class=\"w-[140px]\">Last Recalled</TableHead>\n                    <TableHead class=\"w-[100px] text-right\">Actions</TableHead>\n                  </TableRow>\n                </TableHeader>\n\n                <TableBody>\n                  <TableRow v-if=\"filteredMemories.length === 0\">\n                    <TableCell colspan=\"6\" class=\"text-muted-foreground h-28 text-center text-xs\">\n                      No matching memory facts found for the current query.\n                    </TableCell>\n                  </TableRow>\n\n                  <TableRow v-for=\"fact in filteredMemories\" :key=\"fact.id\" class=\"group hover:bg-muted/40\">\n                    <!-- Pin / Star Icon -->\n                    <TableCell class=\"py-3 pr-1 pl-4\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:text-warning focus-visible:outline-none\"\n                        :title=\"fact.isPinned ? 'Unpin fact' : 'Pin fact'\"\n                        @click=\"togglePinFact(fact.id)\"\n                      >\n                        <Star\n                          :class=\"\n                            cn('h-4 w-4', fact.isPinned ? 'fill-warning text-warning' : 'text-muted-foreground/40')\n                          \"\n                        />\n                      </button>\n                    </TableCell>\n\n                    <!-- Content & Source Details -->\n                    <TableCell class=\"py-3\">\n                      <div class=\"space-y-1\">\n                        <div class=\"text-foreground text-xs leading-relaxed font-medium\">\n                          {{ fact.content }}\n                        </div>\n                        <div class=\"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs\">\n                          <span class=\"text-muted-foreground font-mono\">{{ fact.sourceTurn }}</span>\n                          <span>·</span>\n                          <div class=\"flex items-center gap-1\">\n                            <span\n                              v-for=\"tag in fact.tags\"\n                              :key=\"tag\"\n                              class=\"bg-muted py-0.2 text-muted-foreground rounded px-1.5 font-mono text-xs\"\n                            >\n                              #{{ tag }}\n                            </span>\n                          </div>\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    <!-- Category Badge -->\n                    <TableCell class=\"py-3\">\n                      <Badge :variant=\"getCategoryVariant(fact.category)\" class=\"text-xs font-normal\">\n                        {{ fact.category }}\n                      </Badge>\n                    </TableCell>\n\n                    <!-- Confidence Meter -->\n                    <TableCell class=\"py-3\">\n                      <div class=\"space-y-1\">\n                        <div class=\"flex items-center justify-between font-mono text-xs\">\n                          <span class=\"text-foreground font-semibold\">{{ (fact.confidence * 100).toFixed(0) }}%</span>\n                          <span class=\"text-muted-foreground\">({{ fact.confidence }})</span>\n                        </div>\n                        <Progress :model-value=\"fact.confidence * 100\" class=\"bg-muted h-1.5 w-20\" />\n                      </div>\n                    </TableCell>\n\n                    <!-- Last Recalled & Recalls Count -->\n                    <TableCell class=\"py-3\">\n                      <div class=\"space-y-0.5 text-xs\">\n                        <div class=\"text-foreground flex items-center gap-1 font-medium\">\n                          <Clock class=\"text-muted-foreground h-3 w-3\" />\n                          <span>{{ fact.lastRecalled }}</span>\n                        </div>\n                        <div class=\"text-muted-foreground font-mono text-xs\">Recalled {{ fact.recallsCount }}×</div>\n                      </div>\n                    </TableCell>\n\n                    <!-- Actions -->\n                    <TableCell class=\"py-3 pr-4 text-right\">\n                      <div class=\"flex items-center justify-end gap-1\">\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          class=\"text-muted-foreground hover:text-foreground h-7 w-7 p-0\"\n                          title=\"Edit fact\"\n                          @click=\"editFact(fact)\"\n                        >\n                          <Pencil class=\"h-3.5 w-3.5\" />\n                        </Button>\n\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          class=\"text-muted-foreground hover:text-destructive h-7 w-7 p-0\"\n                          title=\"Delete fact\"\n                          @click=\"deleteFact(fact.id)\"\n                        >\n                          <Trash2 class=\"h-3.5 w-3.5\" />\n                        </Button>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n          </CardContent>\n        </Card>\n      </TabsContent>\n\n      <!-- TAB 3: SEMANTIC ENTITY GRAPH -->\n      <TabsContent value=\"graph\" class=\"space-y-4 outline-none\">\n        <AgentEntityGraph\n          :triplets=\"graphTriplets\"\n          :nodes=\"entityNodes\"\n          :selected-node-id=\"selectedNodeId\"\n          @select-node=\"(id) => (selectedNodeId = id)\"\n        />\n      </TabsContent>\n    </Tabs>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AgentMemoryInspector.vue"
    },
    {
      "path": "packages/registry-vue/blocks/agent-memory-inspector/AgentContextBuffer.vue",
      "content": "<script setup lang=\"ts\">\nimport { AlertCircle, Clock, CornerDownRight, Database, User, Zap } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport type { MessageTurn } from './agent-memory-types'\n\nconst props = defineProps<{\n  isWiped: boolean\n  turns: MessageTurn[]\n  selectedTurnId: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'selectTurn', id: string): void\n  (e: 'restore'): void\n}>()\n</script>\n\n<template>\n  <div class=\"space-y-4\">\n    <!-- Token Utilization Overview Card -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"p-5 pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-0.5\">\n            <div class=\"flex items-center gap-2\">\n              <CardTitle class=\"text-sm font-semibold\">Session Context Window Utilization</CardTitle>\n              <Badge variant=\"outline\" class=\"text-muted-foreground font-mono text-xs\"> 128k Model Window </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Active in-memory token allocation for the current autonomous execution session.\n            </CardDescription>\n          </div>\n\n          <div class=\"flex items-baseline gap-1.5 font-mono\">\n            <span class=\"text-foreground text-base font-bold\">\n              {{ isWiped ? '0' : '6,420' }}\n            </span>\n            <span class=\"text-muted-foreground text-xs\">/ 128,000 tokens</span>\n            <Badge variant=\"secondary\" class=\"ml-1 font-mono text-xs font-semibold\">\n              {{ isWiped ? '0.0%' : '5.0%' }}\n            </Badge>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4 p-5 pt-0\">\n        <!-- Progress Bar -->\n        <Progress :model-value=\"isWiped ? 0 : 5.0\" class=\"bg-muted h-2 w-full\" />\n\n        <!-- Detailed Token Allocation Breakdown Grid -->\n        <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n          <div class=\"border-border/80 bg-card/60 rounded-lg border p-3\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>System Prompt</span>\n              <span class=\"text-foreground font-mono\">{{ isWiped ? '0' : '2,140' }}</span>\n            </div>\n            <div class=\"text-foreground mt-1 text-xs font-medium\">33.3% allocated</div>\n          </div>\n\n          <div class=\"border-border/80 bg-card/60 rounded-lg border p-3\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Episodic Injections</span>\n              <span class=\"text-foreground font-mono\">{{ isWiped ? '0' : '1,850' }}</span>\n            </div>\n            <div class=\"text-foreground mt-1 text-xs font-medium\">28.8% allocated</div>\n          </div>\n\n          <div class=\"border-border/80 bg-card/60 rounded-lg border p-3\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Message History</span>\n              <span class=\"text-foreground font-mono\">{{ isWiped ? '0' : '2,430' }}</span>\n            </div>\n            <div class=\"text-foreground mt-1 text-xs font-medium\">37.9% allocated</div>\n          </div>\n\n          <div class=\"border-border/80 bg-card/60 rounded-lg border p-3\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Available Headroom</span>\n              <span class=\"text-success font-mono\">\n                {{ isWiped ? '128,000' : '121,580' }}\n              </span>\n            </div>\n            <div class=\"text-success mt-1 text-xs font-medium\">\n              {{ isWiped ? '100% free' : '95.0% free' }}\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Sliding Message Window Buffer (Recent 4 Conversation Turns) -->\n    <div class=\"space-y-3\">\n      <div class=\"flex items-center justify-between px-1\">\n        <div class=\"flex items-center gap-2\">\n          <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Sliding Message Window Buffer\n          </h3>\n          <Badge variant=\"outline\" class=\"font-mono text-xs\">FIFO Window: {{ turns.length }} Turns Active</Badge>\n        </div>\n        <span class=\"text-muted-foreground text-xs\">Click turn to inspect vector payload</span>\n      </div>\n\n      <div v-if=\"isWiped\" class=\"border-border rounded-xl border border-dashed p-8 text-center\">\n        <AlertCircle class=\"text-muted-foreground/60 mx-auto h-8 w-8\" />\n        <h4 class=\"text-foreground mt-2 text-sm font-semibold\">Working Buffer Cleared</h4>\n        <p class=\"text-muted-foreground mt-1 text-xs\">\n          Working memory is empty. Start typing or restore the test buffer.\n        </p>\n        <Button size=\"sm\" variant=\"outline\" class=\"mt-3 text-xs\" @click=\"emit('restore')\">\n          Restore Message Turns\n        </Button>\n      </div>\n\n      <div v-else class=\"space-y-3\">\n        <div\n          v-for=\"turn in turns\"\n          :key=\"turn.id\"\n          role=\"button\"\n          tabindex=\"0\"\n          :aria-pressed=\"selectedTurnId === turn.id\"\n          :class=\"\n            cn(\n              'group bg-card hover:border-primary/40 focus-visible:ring-ring relative cursor-pointer rounded-xl border p-4.5 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none',\n              selectedTurnId === turn.id ? 'border-primary/60 bg-accent/20 ring-primary/30 ring-1' : 'border-border',\n            )\n          \"\n          @click=\"emit('selectTurn', turn.id)\"\n          @keydown.enter=\"emit('selectTurn', turn.id)\"\n          @keydown.space.prevent=\"emit('selectTurn', turn.id)\"\n        >\n          <!-- Turn Header -->\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"border-border bg-muted h-7 w-7 rounded-md border\">\n                <AvatarFallback\n                  :class=\"\n                    cn(\n                      'text-xs font-bold',\n                      turn.role === 'assistant' ? 'bg-primary/10 text-primary' : 'bg-success/10 text-success',\n                    )\n                  \"\n                >\n                  {{ turn.avatarText }}\n                </AvatarFallback>\n              </Avatar>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-xs font-semibold\">{{ turn.authorName }}</span>\n                  <Badge variant=\"outline\" class=\"text-muted-foreground font-mono text-xs\">\n                    Turn #{{ turn.turnNumber }}\n                  </Badge>\n                  <span class=\"text-muted-foreground text-xs\">{{ turn.timestamp }}</span>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"flex items-center gap-2\">\n              <Badge\n                variant=\"secondary\"\n                :class=\"\n                  cn(\n                    'font-mono text-xs',\n                    turn.importanceLevel === 'Critical' && 'bg-destructive/10 text-destructive',\n                    turn.importanceLevel === 'High' && 'bg-warning/10 text-warning',\n                    turn.importanceLevel === 'Action Item' && 'bg-info/10 text-info',\n                  )\n                \"\n              >\n                {{ turn.importanceLevel }} ({{ Math.round(turn.importanceScore * 100) }}%)\n              </Badge>\n              <Badge variant=\"outline\" class=\"font-mono text-xs\"> {{ turn.tokens }} tok </Badge>\n            </div>\n          </div>\n\n          <!-- Message Text -->\n          <p class=\"text-foreground/90 mt-2.5 font-mono text-xs leading-relaxed\">\n            {{ turn.content }}\n          </p>\n\n          <!-- Extracted Facts & Embedding Preview -->\n          <div v-if=\"turn.extractedFacts.length > 0\" class=\"border-border/60 bg-muted/40 mt-3 rounded-lg border p-2.5\">\n            <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n              <CornerDownRight class=\"h-3 w-3\" />\n              <span>Extracted Persistent Declarations:</span>\n            </div>\n            <ul class=\"mt-1 space-y-1\">\n              <li\n                v-for=\"(f, fIdx) in turn.extractedFacts\"\n                :key=\"fIdx\"\n                class=\"text-foreground flex items-center gap-2 text-xs\"\n              >\n                <span class=\"bg-primary inline-block h-1 w-1 rounded-full\" />\n                <span>{{ f }}</span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AgentContextBuffer.vue"
    },
    {
      "path": "packages/registry-vue/blocks/agent-memory-inspector/AgentEntityGraph.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Activity, ArrowRight, Clock, CornerDownRight, Database, Network, Search, Zap } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { EntityNode, GraphTriplet } from './agent-memory-types'\n\nconst props = defineProps<{\n  triplets: GraphTriplet[]\n  nodes: EntityNode[]\n  selectedNodeId: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'selectNode', id: string): void\n}>()\n\nconst selectedNode = computed(() => {\n  return props.nodes.find((n) => n.id === props.selectedNodeId) || props.nodes[0]\n})\n\nconst filteredTriplets = computed(() => {\n  if (!selectedNode.value) return props.triplets\n  return props.triplets.filter((t) => t.subject === selectedNode.value?.label || t.object === selectedNode.value?.label)\n})\n</script>\n\n<template>\n  <div class=\"space-y-4\">\n    <!-- Top Row: Active Graph Topology Summary -->\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-3\">\n      <!-- Node Selector Card -->\n      <Card class=\"border-border shadow-xs lg:col-span-1\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardTitle class=\"text-xs font-semibold\">Entity Nodes ({{ nodes.length }})</CardTitle>\n            <Badge variant=\"outline\" class=\"text-xs font-normal\">Active Subgraph</Badge>\n          </div>\n          <CardDescription class=\"text-xs\">Select node to inspect relational edges</CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5 p-4 pt-0\">\n          <button\n            v-for=\"node in nodes\"\n            :key=\"node.id\"\n            type=\"button\"\n            :class=\"[\n              'w-full rounded-lg border p-2.5 text-left text-xs transition-colors',\n              selectedNodeId === node.id\n                ? 'bg-primary/10 border-primary/30 text-foreground font-medium shadow-xs'\n                : 'bg-muted/30 hover:bg-muted/60 text-muted-foreground hover:text-foreground border-transparent',\n            ]\"\n            @click=\"emit('selectNode', node.id)\"\n          >\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-foreground font-semibold\">{{ node.label }}</span>\n              <Badge variant=\"secondary\" class=\"h-4.5 px-1.5 text-xs\">{{ node.entityType }}</Badge>\n            </div>\n            <p class=\"text-muted-foreground mt-1 line-clamp-1 text-xs\">{{ node.description }}</p>\n            <div class=\"text-muted-foreground mt-1.5 flex items-center gap-3 text-xs\">\n              <span>Degree: {{ node.degree }} edges</span>\n              <span>·</span>\n              <span class=\"text-success font-mono\">Status: {{ node.status }}</span>\n            </div>\n          </button>\n        </CardContent>\n      </Card>\n\n      <!-- Selected Node Semantic Deep Dive -->\n      <Card v-if=\"selectedNode\" class=\"border-border shadow-xs lg:col-span-2\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <Network class=\"text-primary h-4 w-4\" />\n              <CardTitle class=\"text-sm font-semibold\">{{ selectedNode.label }}</CardTitle>\n              <Badge variant=\"outline\" class=\"font-mono text-xs\">{{ selectedNode.entityType }}</Badge>\n            </div>\n            <Badge variant=\"secondary\" class=\"font-mono text-xs\">Degree {{ selectedNode.degree }}</Badge>\n          </div>\n          <CardDescription class=\"text-xs\">{{ selectedNode.description }}</CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-4 p-4 pt-2\">\n          <!-- Embedding Reference -->\n          <div class=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-lg border p-2.5 text-xs\">\n            <div class=\"flex items-center gap-2\">\n              <Database class=\"text-muted-foreground h-3.5 w-3.5\" />\n              <span class=\"text-muted-foreground\">Vector Index ID:</span>\n              <span class=\"text-foreground font-mono font-medium\">{{ selectedNode.embeddingId }}</span>\n            </div>\n            <span class=\"text-success font-mono text-xs\">Cosine Cos: 0.962</span>\n          </div>\n\n          <!-- Associated Triplet Edges -->\n          <div class=\"space-y-2\">\n            <span class=\"text-foreground text-xs font-semibold\">\n              Connected Graph Triplets ({{ filteredTriplets.length }})\n            </span>\n            <div class=\"space-y-2\">\n              <div\n                v-for=\"trip in filteredTriplets\"\n                :key=\"trip.id\"\n                class=\"border-border bg-card flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <div class=\"flex flex-wrap items-center gap-2 text-xs\">\n                  <span class=\"text-foreground font-semibold\">{{ trip.subject }}</span>\n                  <Badge variant=\"outline\" class=\"text-warning h-5 px-1.5 font-mono text-xs font-bold\">\n                    {{ trip.predicate }}\n                  </Badge>\n                  <ArrowRight class=\"text-muted-foreground h-3 w-3\" />\n                  <span class=\"text-foreground font-semibold\">{{ trip.object }}</span>\n                </div>\n                <div class=\"flex items-center gap-3 text-xs\">\n                  <span class=\"text-muted-foreground font-mono text-xs\">Weight: {{ trip.weight }}</span>\n                  <Badge variant=\"secondary\" class=\"font-mono text-xs\">\n                    {{ Math.round(trip.confidence * 100) }}% conf\n                  </Badge>\n                  <span class=\"text-muted-foreground text-xs\">{{ trip.lastTraversed }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Complete Graph Relations Table -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"p-5 pb-3\">\n        <div class=\"flex items-center justify-between\">\n          <div>\n            <CardTitle class=\"text-sm font-semibold\">Semantic Graph Triplets</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Subject-Predicate-Object directional triples stored in Neo4j / GraphRAG engine.\n            </CardDescription>\n          </div>\n          <Badge variant=\"outline\" class=\"font-mono text-xs\">{{ triplets.length }} Total Triplets</Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <Table>\n          <TableHeader>\n            <TableRow class=\"hover:bg-transparent\">\n              <TableHead class=\"text-xs font-semibold\">Subject</TableHead>\n              <TableHead class=\"text-xs font-semibold\">Predicate</TableHead>\n              <TableHead class=\"text-xs font-semibold\">Object</TableHead>\n              <TableHead class=\"text-xs font-semibold\">Confidence</TableHead>\n              <TableHead class=\"text-xs font-semibold\">Weight</TableHead>\n              <TableHead class=\"text-right text-xs font-semibold\">Last Traversed</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow v-for=\"trip in triplets\" :key=\"trip.id\" class=\"text-xs\">\n              <TableCell class=\"font-medium\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-foreground font-semibold\">{{ trip.subject }}</span>\n                  <span class=\"text-muted-foreground text-xs\">({{ trip.subjectType }})</span>\n                </div>\n              </TableCell>\n              <TableCell>\n                <Badge variant=\"outline\" class=\"text-warning font-mono text-xs font-bold\">\n                  {{ trip.predicate }}\n                </Badge>\n              </TableCell>\n              <TableCell class=\"font-medium\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-foreground font-semibold\">{{ trip.object }}</span>\n                  <span class=\"text-muted-foreground text-xs\">({{ trip.objectType }})</span>\n                </div>\n              </TableCell>\n              <TableCell>\n                <div class=\"flex items-center gap-2\">\n                  <Progress :model-value=\"trip.confidence * 100\" class=\"h-1.5 w-12\" />\n                  <span class=\"font-mono text-xs\">{{ Math.round(trip.confidence * 100) }}%</span>\n                </div>\n              </TableCell>\n              <TableCell class=\"font-mono text-xs\">{{ trip.weight }}</TableCell>\n              <TableCell class=\"text-muted-foreground text-right text-xs\">{{ trip.lastTraversed }}</TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AgentEntityGraph.vue"
    },
    {
      "path": "packages/registry-vue/blocks/agent-memory-inspector/agent-memory-types.ts",
      "content": "export type MemoryCategory = 'User Preference' | 'Architecture Rule' | 'System Constraint'\n\nexport interface EpisodicMemory {\n  id: string\n  content: string\n  category: MemoryCategory\n  confidence: number\n  lastRecalled: string\n  recallsCount: number\n  sourceTurn: string\n  tags: string[]\n  isPinned: boolean\n}\n\nexport interface MessageTurn {\n  id: string\n  turnNumber: number\n  role: 'user' | 'assistant'\n  authorName: string\n  avatarText: string\n  timestamp: string\n  importanceScore: number\n  importanceLevel: 'Critical' | 'High' | 'Standard' | 'Action Item'\n  tokens: number\n  content: string\n  extractedFacts: string[]\n  embeddingHash: string\n}\n\nexport interface EntityNode {\n  id: string\n  label: string\n  entityType: 'Person' | 'Repository' | 'CSS Engine' | 'Design System' | 'Framework' | 'Standard'\n  description: string\n  degree: number\n  status: 'active' | 'synced' | 'cached'\n  embeddingId: string\n}\n\nexport interface GraphTriplet {\n  id: string\n  subject: string\n  subjectType: string\n  predicate: 'MAINTAINS' | 'USES' | 'CONFIGURES' | 'IMPLEMENTS' | 'MIRRORS' | 'ENFORCES'\n  object: string\n  objectType: string\n  confidence: number\n  weight: string\n  lastTraversed: string\n}\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/agent-memory-types.ts"
    },
    {
      "path": "packages/registry-vue/blocks/agent-memory-inspector/agent-memory-data.ts",
      "content": "import type { EpisodicMemory, MessageTurn, EntityNode, GraphTriplet } from './agent-memory-types'\n\nexport const INITIAL_MEMORY_FACTS: EpisodicMemory[] = [\n  {\n    id: 'fact-1',\n    content: 'User prefers Vue 3.5 SFC with <script setup lang=\"ts\">',\n    category: 'User Preference',\n    confidence: 0.98,\n    lastRecalled: '2m ago',\n    recallsCount: 42,\n    sourceTurn: 'Turn #1 (Workspace Init)',\n    tags: ['vue3', 'sfc', 'typescript'],\n    isPinned: true,\n  },\n  {\n    id: 'fact-2',\n    content: 'User repository uses Tailwind v4 with OKLCH theme tokens',\n    category: 'Architecture Rule',\n    confidence: 0.95,\n    lastRecalled: '14m ago',\n    recallsCount: 89,\n    sourceTurn: 'Turn #3 (CSS System)',\n    tags: ['tailwind4', 'oklch', 'tokens'],\n    isPinned: true,\n  },\n  {\n    id: 'fact-3',\n    content: 'User enforces strict 120-character printWidth in Prettier',\n    category: 'System Constraint',\n    confidence: 0.99,\n    lastRecalled: '1h ago',\n    recallsCount: 126,\n    sourceTurn: 'Turn #1 (Code Standards)',\n    tags: ['prettier', 'formatting'],\n    isPinned: false,\n  },\n  {\n    id: 'fact-4',\n    content: 'Company domain is uipkge.dev',\n    category: 'System Constraint',\n    confidence: 0.97,\n    lastRecalled: '3h ago',\n    recallsCount: 31,\n    sourceTurn: 'Turn #3 (Domain Policy)',\n    tags: ['domain', 'hosting'],\n    isPinned: false,\n  },\n  {\n    id: 'fact-5',\n    content: 'Never publish to npm; components distributed as unbundled raw source registries',\n    category: 'Architecture Rule',\n    confidence: 0.96,\n    lastRecalled: '4h ago',\n    recallsCount: 67,\n    sourceTurn: 'Turn #2 (Architecture Rules)',\n    tags: ['no-npm', 'shadcn', 'registry'],\n    isPinned: true,\n  },\n]\n\n// Message Window Buffer\n\nexport const INITIAL_MESSAGE_TURNS: MessageTurn[] = [\n  {\n    id: 'turn-1',\n    turnNumber: 1,\n    role: 'user',\n    authorName: 'Elena Rostova (Lead Architect)',\n    avatarText: 'ER',\n    timestamp: '12m ago',\n    importanceScore: 0.94,\n    importanceLevel: 'Critical',\n    tokens: 142,\n    content:\n      'We are configuring the UIPKGE monorepo for Vue 3.5 and React 19. All Vue components must use <script setup lang=\"ts\"> and strict 120-character printWidth in Prettier. Do not output semicolons.',\n    extractedFacts: ['User prefers Vue 3.5 SFC', '120-char printWidth enforced'],\n    embeddingHash: '0x7f8a91c4',\n  },\n  {\n    id: 'turn-2',\n    turnNumber: 2,\n    role: 'assistant',\n    authorName: 'Senior Engineering Co-Pilot',\n    avatarText: 'AI',\n    timestamp: '11m ago',\n    importanceScore: 0.78,\n    importanceLevel: 'Standard',\n    tokens: 512,\n    content:\n      'Understood. I have recorded the formatting rules (no semicolons, single quotes, 120 width) and dual-framework targets. All component scaffolding will adhere strictly to Vue 3.5 script setup standards and OKLCH color token architecture.',\n    extractedFacts: ['Single-quote formatting indexed', 'Vue 3.5 + React dual pipeline'],\n    embeddingHash: '0x3b1d84e2',\n  },\n  {\n    id: 'turn-3',\n    turnNumber: 3,\n    role: 'user',\n    authorName: 'Elena Rostova (Lead Architect)',\n    avatarText: 'ER',\n    timestamp: '4m ago',\n    importanceScore: 0.98,\n    importanceLevel: 'High',\n    tokens: 286,\n    content:\n      'Remember that company domain is uipkge.dev and we do NOT publish npm packages. Components are distributed directly as unbundled registry JSON files via shadcn CLI. Tailwind v4 with OKLCH theme tokens must be used across all blocks.',\n    extractedFacts: ['Company domain is uipkge.dev', 'Zero npm publishing policy', 'Tailwind v4 OKLCH token model'],\n    embeddingHash: '0x92e4ca10',\n  },\n  {\n    id: 'turn-4',\n    turnNumber: 4,\n    role: 'assistant',\n    authorName: 'Senior Engineering Co-Pilot',\n    avatarText: 'AI',\n    timestamp: 'Just now',\n    importanceScore: 0.91,\n    importanceLevel: 'Action Item',\n    tokens: 1490,\n    content:\n      'Memory updated. Synced \"uipkge.dev\" and registry-first unbundled distribution architecture into Mem0 vector collection and Neo4j dependency graph. Short-term context buffer is currently utilizing 6,420 / 128,000 tokens (5.0%). Ready for task execution.',\n    extractedFacts: ['Neo4j triplets linked', 'Mem0 vector index synced'],\n    embeddingHash: '0x48c71bf9',\n  },\n]\n\n// Entity Knowledge Graph Nodes & Triplets\n\nexport const INITIAL_ENTITY_NODES: EntityNode[] = [\n  {\n    id: 'node-1',\n    label: 'Elena Rostova',\n    entityType: 'Person',\n    description: 'Lead Maintainer & Core Architect',\n    degree: 2,\n    status: 'active',\n    embeddingId: 'emb_981a',\n  },\n  {\n    id: 'node-2',\n    label: 'uipkge-ui',\n    entityType: 'Repository',\n    description: 'Dual-Framework UI Registry Monorepo',\n    degree: 5,\n    status: 'active',\n    embeddingId: 'emb_432b',\n  },\n  {\n    id: 'node-3',\n    label: 'Tailwind v4',\n    entityType: 'CSS Engine',\n    description: 'CSS-first @theme inline styling layer',\n    degree: 2,\n    status: 'synced',\n    embeddingId: 'emb_771c',\n  },\n  {\n    id: 'node-4',\n    label: 'OKLCH Tokens',\n    entityType: 'Design System',\n    description: 'Perceptually uniform color model palette',\n    degree: 1,\n    status: 'synced',\n    embeddingId: 'emb_118d',\n  },\n  {\n    id: 'node-5',\n    label: 'Vue 3.5 SFC',\n    entityType: 'Framework',\n    description: 'Primary component authoring standard',\n    degree: 1,\n    status: 'active',\n    embeddingId: 'emb_554e',\n  },\n  {\n    id: 'node-6',\n    label: 'React 19 Components',\n    entityType: 'Framework',\n    description: 'Headless mirror registry implementation',\n    degree: 1,\n    status: 'active',\n    embeddingId: 'emb_229f',\n  },\n  {\n    id: 'node-7',\n    label: '120-char printWidth',\n    entityType: 'Standard',\n    description: 'Prettier wrap limit constraint',\n    degree: 1,\n    status: 'cached',\n    embeddingId: 'emb_883g',\n  },\n]\n\nexport const INITIAL_GRAPH_TRIPLETS: GraphTriplet[] = [\n  {\n    id: 'trip-1',\n    subject: 'Elena Rostova',\n    subjectType: 'Person',\n    predicate: 'MAINTAINS',\n    object: 'uipkge-ui',\n    objectType: 'Repository',\n    confidence: 0.99,\n    weight: '1.00',\n    lastTraversed: '12s ago',\n  },\n  {\n    id: 'trip-2',\n    subject: 'uipkge-ui',\n    subjectType: 'Repository',\n    predicate: 'USES',\n    object: 'Tailwind v4',\n    objectType: 'CSS Engine',\n    confidence: 0.98,\n    weight: '0.96',\n    lastTraversed: '45s ago',\n  },\n  {\n    id: 'trip-3',\n    subject: 'Tailwind v4',\n    subjectType: 'CSS Engine',\n    predicate: 'CONFIGURES',\n    object: 'OKLCH Tokens',\n    objectType: 'Design System',\n    confidence: 0.97,\n    weight: '0.94',\n    lastTraversed: '2m ago',\n  },\n  {\n    id: 'trip-4',\n    subject: 'uipkge-ui',\n    subjectType: 'Repository',\n    predicate: 'IMPLEMENTS',\n    object: 'Vue 3.5 SFC',\n    objectType: 'Framework',\n    confidence: 0.99,\n    weight: '0.98',\n    lastTraversed: '1m ago',\n  },\n  {\n    id: 'trip-5',\n    subject: 'uipkge-ui',\n    subjectType: 'Repository',\n    predicate: 'MIRRORS',\n    object: 'React 19 Components',\n    objectType: 'Framework',\n    confidence: 0.96,\n    weight: '0.91',\n    lastTraversed: '3m ago',\n  },\n  {\n    id: 'trip-6',\n    subject: 'Elena Rostova',\n    subjectType: 'Person',\n    predicate: 'ENFORCES',\n    object: '120-char printWidth',\n    objectType: 'Standard',\n    confidence: 0.95,\n    weight: '0.89',\n    lastTraversed: '5m ago',\n  },\n]\n\n// UI Controls State\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/agent-memory-data.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/tabs.json"
  ],
  "description": "Autonomous AI agent memory inspector featuring short-term context buffer utilization, long-term episodic vector memories with confidence scoring, and Neo4j-style entity relationship knowledge graph.",
  "categories": [
    "ai",
    "app"
  ]
}