Episodic Vector Memory

1"use client";
2
3import * as React from "react";
4
5interface VectorMemoryTableProps {
6  variant?: string;
7}
8
9export default function VectorMemoryTable({ variant = "Store" }: VectorMemoryTableProps) {
10  const [activeCluster, setActiveCluster] = React.useState<string>("All");
11
12  const memories = [
13    {
14      id: "mem-01",
15      topic: "User Architecture Preference",
16      content: "Prefers Tailwind CSS tokens with OKLCH color space over raw Hex values.",
17      cluster: "Preferences",
18      relevance: 0.982,
19      recalls: 24,
20      ttl: "Permanent",
21      lastAccess: "2m ago",
22    },
23    {
24      id: "mem-02",
25      topic: "PostgreSQL Database Schema",
26      content: "Tenant isolation implemented via row-level security (RLS) on organization_id column.",
27      cluster: "Database",
28      relevance: 0.941,
29      recalls: 18,
30      ttl: "30 days",
31      lastAccess: "14m ago",
32    },
33    {
34      id: "mem-03",
35      topic: "API Authentication Token Policy",
36      content: "JWT tokens signed with EdDSA ed25519 with 15-minute refresh rotation.",
37      cluster: "Security",
38      relevance: 0.895,
39      recalls: 9,
40      ttl: "90 days",
41      lastAccess: "1h ago",
42    },
43    {
44      id: "mem-04",
45      topic: "Design Guidelines",
46      content: "Strict dark theme requirement: background #0A180D with electric mint accents #7DFFB3.",
47      cluster: "Preferences",
48      relevance: 0.996,
49      recalls: 42,
50      ttl: "Permanent",
51      lastAccess: "Just now",
52    },
53  ];
54
55  const filtered = memories.filter((m) =>
56    activeCluster === "All" ? true : m.cluster === activeCluster
57  );
58
59  return (
60    <div className="w-full max-w-120 overflow-hidden rounded-card bg-surface shadow-card border border-line">
61      {/* Header */}
62      <div className="primitive-card-bar flex flex-wrap items-center justify-between gap-2 border-b border-line bg-surface/90 px-4 py-3">
63        <div className="flex items-center gap-2">
64          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
65            <ellipse cx="12" cy="5" rx="9" ry="3" />
66            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
67            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
68          </svg>
69          <span className="font-display font-semibold text-[14px] text-ink">
70            Episodic Vector Memory Store
71          </span>
72        </div>
73
74        {/* Cluster tags */}
75        <div className="flex items-center gap-1 font-mono text-[10.5px]">
76          {["All", "Preferences", "Database", "Security"].map((c) => (
77            <button
78              key={c}
79              onClick={() => setActiveCluster(c)}
80              className={`rounded-chip px-2 py-0.5 transition-colors border ${
81                activeCluster === c
82                  ? "bg-accent text-accent-ink font-bold border-accent"
83                  : "bg-field text-ink-3 hover:text-ink border-line"
84              }`}
85            >
86              {c}
87            </button>
88          ))}
89        </div>
90      </div>
91
92      {/* Memory Cards Table Grid */}
93      <div className="divide-y divide-line/60">
94        {filtered.map((m) => (
95          <div key={m.id} className="p-3.5 transition-colors hover:bg-hover/30 space-y-2">
96            <div className="flex items-center justify-between text-[12px] font-mono">
97              <div className="flex items-center gap-2">
98                <span className="font-semibold text-ink font-display text-[13px]">{m.topic}</span>
99                <span className="rounded-[4px] bg-field px-1.5 py-0.2 text-[10px] text-ink-3 border border-line">
100                  {m.cluster}
101                </span>
102              </div>
103              <span className="font-mono text-[11px] font-bold text-accent">
104                {(m.relevance * 100).toFixed(1)}% match
105              </span>
106            </div>
107
108            <p className="rounded-control bg-inset/70 p-2.5 font-body text-[12.5px] leading-relaxed text-ink-2 border border-line/40">
109              {m.content}
110            </p>
111
112            <div className="flex items-center justify-between font-mono text-[10.5px] text-ink-3">
113              <span>Recalled: {m.recalls} times</span>
114              <span>Retention: {m.ttl}</span>
115              <span className="text-emerald-400">Accessed {m.lastAccess}</span>
116            </div>
117          </div>
118        ))}
119      </div>
120
121      {/* Footer */}
122      <div className="flex items-center justify-between border-t border-line bg-inset/40 px-4 py-2 font-mono text-[10.5px] text-ink-3">
123        <span>Active Memory Nodes: 4 / 2,400</span>
124        <button className="text-accent hover:underline">+ Consolidate Memories</button>
125      </div>
126    </div>
127  );
128}
129