+
+
+ {/* The badge is uppercase site-wide, but uppercasing `mem0` renders
+ MEM0 — at 11px with 0.18em tracking the zero reads as a letter O,
+ so the whole claim lands as "memo's own harness". The brand token
+ opts out of the transform; the rest of the badge keeps the
+ site pattern. */}
+ Open source · Apache-2.0 · mem0's own harness
+
+
+ {/* The non-breaking space keeps the article bound to its noun. At
+ `max-w-[16ch]` the balancer broke this as "Statewave tops a /
+ memory benchmark", stranding "a" at the end of the first line. */}
+
+ + Statewave tops a memory benchmark{' '} + we didn't write. +
+ + {/* Deliberately smaller than the site's usual hero subhead: the h1 is + already three lines, and at 18px this paragraph competed with it + instead of supporting it. */} ++ An open-source, self-hosted memory runtime for AI agents. It clears mem0 OSS on + both LoCoMo and LongMemEval, run on mem0's own harness at{' '} + gpt-4o, same eval loop, + their judge unchanged, and edges the paid mem0 cloud tier too. +
+ +
+
+
+
+
+ + Not a reproduction of mem0's published gpt-5 + Qwen figures. +
+
+
+
+ {s.name}
+
+
+ {/* Label left, figure right. Leading with the numbers put the two
+ metric labels at different x-positions in every card, because
+ the LoCoMo figure is set larger than the LongMemEval one — so
+ nothing lined up either within a card or across the three.
+ Anchoring the figures to the right edge aligns both columns
+ and lets the scores be read down the row. */}
+
+
+
+ LoCoMo
+
+ {fmt(s.locomo)}
+
+
+
+ LongMemEval
+
+ {fmt(s.lme)}
+
+
+
+ {/* Softened: this section is the one place on the site carrying three
+ saturated series hues, and at full strength the ambient wash sat on
+ top of them as haze. */}
+
+
+
+
+
+
+
+ Three systems, one eval loop
+
+
+
+ {/* Chart toolbar. Legend and axis switch were two loose rows of small
+ text floating above the panels; bound into one bar they read as
+ controls belonging to the chart. */}
+ + The scoreboard +
++ The margins are small on purpose: a fair fight, not an inflated one. +
+
+
+
+ + Click a system to isolate it · switch the axis for full scale +
+ + {/* Hero and support, not twins. The two panels used to sit in an even + 50/50 split, which told the eye they carried equal weight — the + one thing this page's own copy says they don't. LoCoMo at n=1,540 + is the robust signal, so it takes the full width and the long + bars; LongMemEval at n=30 is explicitly directional and sits in + the row below, next to the fine print it belongs with. */} +
+
+
+
+
+ -
+ {SYSTEMS.map((s) => {
+ const isolated = focus === s.key
+ const dimmed = focus !== null && !isolated
+ return (
+
- + + + ) + })} +
+ Axis
+
+ )
+}
+
+const CAVEATS = [
+ {
+ title: 'Shared stack',
+ body: 'gpt-4.1 extraction · text-embedding-3-small · gpt-4o answer + judge.',
+ },
+ {
+ title: 'Single run',
+ body: 'One run, not an average. LoCoMo (n=1,540) is the robust read.',
+ },
+ {
+ title: 'n=30 on LME',
+ body: 'A 30-question matched set with wide error bars. Directional only.',
+ },
+ {
+ title: 'Asymmetry',
+ body: "mem0 cloud's extractor/embedder isn't configurable, a product-inherent asymmetry.",
+ },
+]
+
+/**
+ * Fine print, kept in full but given less voice than the chart: each label is
+ * demoted to a muted dot-and-caps line so the set reads as an apparatus note
+ * rather than four more paragraphs competing with the panels.
+ *
+ * It stacks vertically now instead of running four-across under the charts.
+ * As a full-width strip it was the last thing on the section and read as a
+ * conclusion; beside the directional panel it reads as what it is — the
+ * conditions both runs were made under.
+ */
+function Caveats() {
+ return (
+
+ {(['zoom', 'full'] as const).map((s) => (
+
+ ))}
+
+
+
+ )
+}
+
+/**
+ * One benchmark = one panel of three bars on a shared zoomed axis.
+ *
+ * Bars and counters are driven by a single `onViewportEnter` on the panel so
+ * they resolve together; independent per-element observers made the numbers
+ * and their bars finish at visibly different times.
+ */
+function ScorePanel({
+ metric,
+ scale,
+ focus,
+}: {
+ metric: Metric
+ scale: Scale
+ focus: SeriesKey | null
+}) {
+ const reduced = useReducedMotion() ?? false
+ const [shown, setShown] = useState(false)
+ const meta = METRICS[metric]
+ const headline = delta(STATEWAVE[metric], MEM0_OSS[metric])
+ const ticks = AXIS[scale].ticks
+ // Every non-leader row draws its gap back to this position, so the panel
+ // owns it rather than each row recomputing it.
+ const leaderPct = axisPct(STATEWAVE[metric], scale)
+
+ return (
+ + Conditions of the run +
+
+ {CAVEATS.map((c, i) => (
+
+ 0 ? 'border-t border-theme-border' : ''}`}
+ >
+
+ ))}
+ + + {c.title} +
++ {c.body} +
+
+
+
+ {/* Plot area. Gridlines sit behind the bars at the labeled axis ticks so
+ the current zoom is legible rather than implied. */}
+
+
+ {/* The panel's focal point. The old second line here also carried the
+ cloud delta, which wrapped into the title; that number is now drawn
+ on the cloud row itself as the gap back to Statewave. */}
+ + {meta.label} +
+
+
+ {meta.n}
+
+
+ {meta.grade}
+
+
+
+
+ + {headline} +
++ vs mem0 OSS +
+
+ {/* Same pr-14 gutter the bars reserve, so gridlines land on the track
+ rather than on the delta-label column. Keyed by scale: the two axes
+ have different tick counts, so there is nothing to tween between —
+ the set is crossfaded while the bars glide to their new lengths. */}
+
+
+
+
+
+ {SYSTEMS.map((s, i) => (
+
+
+ {/* The leader's score as a datum line across all three rows, drawn
+ top-down once the bars have landed. It replaces the three separate
+ end-ticks the delta connectors each used to draw: they sat at one x
+ and were therefore one line, and as one line every gap below it is
+ measured against a single edge. Painted after the rows so it caps
+ the leader's bar instead of hiding behind it. */}
+
+
+
+ {ticks.map((t, i) => (
+
+ {t.toFixed(2)}
+
+ ))}
+
+
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ onFocus={() => setHovered(true)}
+ onBlur={() => setHovered(false)}
+ tabIndex={0}
+ role="img"
+ aria-label={`${system.name}, ${METRICS[metric].label} score ${fmt(value)}${
+ swDelta ? `, Statewave leads by ${swDelta}` : ''
+ }`}
+ >
+
+ )
+}
+
+/* ─── Methodology ───────────────────────────────────────────────────────── */
+
+function Methodology() {
+ return (
+
+
+
+
+ {system.name}
+
+
+
+ {fmt(value)}
+
+
+
+ {/* Bar track + fill.
+ `pr-14` reserves a gutter for the delta label at the end of the gap
+ connector, so the track can never grow long enough to push it out of
+ the panel. Without it every bar overflows on the full 0–1.00 scale,
+ where all three sit past 83%. */}
+
+
+
+ {hovered && (
+
+
+ {/* Flat series hue, squared off to 3px. A 6px pill on a 24px bar read
+ as a UI control; at 3px it reads as a measurement. */}
+
+
+
+ )}
+ {system.name}
++ {METRICS[metric].label} {fmt(value)} · {METRICS[metric].n} +
++ {swDelta ? `Statewave leads by ${swDelta}` : 'Leads this benchmark'} +
+
+
+ One loop, one swap
+
+
+
+ + Methodology +
++ A fork of mem0's harness, not a rewrite. Every run travels the same path; only the + memory backend changes. +
+
+
+ Three fixes, all in mem0's favor
+
+
+
+ + Bugs in mem0's own client code. Every one of them{' '} + raises the mem0 backends' scores, and + every one is applied in the fork rather than withheld — so the scoreboard above runs + against their best config, not a strawman. +
+{f.title}
+{f.body}
+ {/* Which backend the fix helps, carried by the chart's hue for that + system instead of a badge — two of the three fixes target the + same backend, so a repeated pill led every card with its least + distinguishing line. */} ++ + applied to {systemName(f.helps)} +
+
+
+
+
+
+ {PIPELINE_STEPS.map((s, i) => (
+
+ {i > 0 && (
+
+ )}
+
+ {s.label === 'swap' ? (
+
+ {/* No pulse ring here. The border weight, the fill and the badge
+ already say this is the node that matters; a loop animating
+ on top of the section's own claim is decoration asking to be
+ mistaken for meaning. */}
+
+ Only this swaps
+
+
+ ) : (
+ /* min-h keeps the four shared stages the same height as each
+ other while leaving them visibly shorter than the swap node.
+ Stretching every box to the tallest one, as before, spent the
+ diagram's emphasis on padding. */
+
+
+ {s.label}
+
+ {s.value}
+ {s.hint && (
+ {s.hint}
+ )}
+
+ )}
+
+ ))}
+
+
+ {/* Legend for the border treatment above. Without it the dashes are
+ decoration; with it they are the argument. */}
+
+ {SYSTEMS.map((sys) => (
+
+
+ {sys.name}
+
+ ))}
+
+ statewave_client.py + a{' '}
+ --backend statewave dispatch
+
+
+ › gpt-4.1 extraction shared by Statewave &
+ mem0 OSS
+
+
+ › judge & scoring code untouched from
+ upstream
+
+
+
+
+
+ Reproduce every number here
+
+
+
+ + Reproduce it +
+
+ Copy-pasteable, straight from the harness README. LoCoMo shown; for LongMemEval swap in{' '}
+ benchmarks.longmemeval.run with{' '}
+ --per-type 5.
+
-
+
{title}
+{children}
+
+ {BACKEND_SNIPPETS.map((b, i) => {
+ const selected = b.series === active
+ return (
+
+ )
+ })}
+
+ )
+
+ return (
+
+
+ )
+}
+
+/**
+ * Step 3: what a correct run lands on.
+ *
+ * The section promised "reproduce every number" but stopped at launching the
+ * harness, so a reader had no way to tell a matching run from a broken one.
+ * Figures come from SYSTEMS like everywhere else on the page, and the bars sit
+ * on the same zoomed axis as the scoreboard so the two read as one measurement.
+ *
+ * Nothing here animates: these are the figures the page's credibility rests
+ * on, and a width transition on a tab switch would redraw the claim.
+ */
+function ExpectedResult({ series }: { series: SeriesKey }) {
+ const system = SYSTEMS.find((s) => s.key === series) ?? STATEWAVE
+ const color = SERIES_COLOR[series]
+
+ return (
+ + › {current.label}{' '} + {current.note} +
+
+
+ )
+}
+
+/**
+ * Terminal-style snippet panel.
+ *
+ * Surface is `--viz-code-bg` (a deep navy in the same family as the page)
+ * rather than `--theme-code-bg` (a near-black); the latter read as a flat
+ * black slab dropped onto the navy page. Window chrome, a colored prompt,
+ * and dimmed comments make it read as a shell session.
+ *
+ * The copied text is always the raw `code` string: the prompt glyph and the
+ * highlighting are presentation only and never reach the clipboard.
+ *
+ * Border weight is uniform across steps. Step 2 used to carry a full-saturation
+ * series stroke while step 1 sat on a 10%-alpha hairline, which read as step 1
+ * being the optional one — it is the prerequisite. Series identity now rides
+ * the header rule and the selected tab's swatch instead of the panel outline.
+ */
+function Terminal({
+ title,
+ code,
+ accent,
+ tabs,
+}: {
+ title: string
+ code: string
+ accent?: string
+ tabs?: ReactNode
+}) {
+ return (
+
+
+
+ + Published result · {system.name} +
++ axis {AXIS.zoom.label} +
+-
+ {(Object.keys(METRICS) as Metric[]).map((m) => (
+
- + {METRICS[m].label} + {METRICS[m].n} + +
- + {fmt(system[m])} + +
+
+ ))}
+
+
+
+
+
+ + The same figures charted on{' '} + + the scoreboard + + . Answerer and judge are both gpt-4o, so a rerun can land slightly either side of these. +
+
+
+ )
+}
+
+/**
+ * One rendered shell line: prompt, command body, trailing comment.
+ *
+ * Continuation lines (the wrapped half of a `\`-broken command) are indented
+ * in the source and get no prompt, so a multi-line invocation reads as one
+ * command rather than several.
+ */
+function ShellLine({ line }: { line: string }) {
+ const isContinuation = line.startsWith(' ')
+ const hash = line.indexOf('#')
+ const body = hash === -1 ? line : line.slice(0, hash)
+ const comment = hash === -1 ? null : line.slice(hash)
+
+ return (
+
+
+
+ {tabs ?? (
+
+ {title}
+
+ )}
+
+
+
+
+ {code.split('\n').map((line, i) => (
+
+
+ {!isContinuation ? (
+ $
+ ) : (
+
+ )}
+ {body}
+ {comment && {comment}}
+
+ )
+}
+
+/* ─── Scope ─────────────────────────────────────────────────────────────── */
+
+function Scope() {
+ return (
+
+
+
+
+
+
+ What we claim, and what we don't
+
+
+
+ + Scope +
++ An honest benchmark is worth as much for where it stops as for what it shows. +
+
+
+ {heading}
+
+
+ -
+ {items.map((item) => (
+
-
+
+
{item}
+
+ ))}
+
+
+ {/* The heading face sets `0` with no slash or dot, so at 36px "mem0"
+ reads as "memO" and the sentence lands as a memo. The brand token
+ takes the mono face, whose zero is unambiguous. */}
+ What mem0 doesn't do
+
+
+
+ + Beyond retrieval +
++ Retrieval is table stakes, and the benchmark above settles it. Statewave's real + difference is governance: the controls a memory layer needs before it touches + production data. +
+
+
+
+
+
+ | + Capability + | +
|---|
+
+
+ + mem0 cloud is the paid tier — their strongest showing on the retrieval rows. +
+ disclosure, the same pattern as the homepage FAQ, so the
+ * section is keyboard- and AT-navigable for free and the collapsed answers
+ * stay in the DOM for crawlers. First item open so the section reads as
+ * content on first paint rather than a stack of closed bars. */
+function Faq() {
+ return (
+
+
+ )
+}
+
+/* ─── Closing CTA ───────────────────────────────────────────────────────── */
+
+function ClosingCta() {
+ return (
+
+
+ )
+}
+
+function GitHubIcon({ className }: { className?: string }) {
+ return (
+
+ )
+}
diff --git a/src/pages/BlogPostPage.tsx b/src/pages/BlogPostPage.tsx
index 2b12c52..db69c54 100644
--- a/src/pages/BlogPostPage.tsx
+++ b/src/pages/BlogPostPage.tsx
@@ -190,6 +190,17 @@ export function BlogPostPage() {
+
+
+
+
+
+
+
+ )
+}
+
+function HeroChatVisual() {
+ return (
+
+
+
+
+ )
+}
+
+/* ─── Built so every claim is checkable ──────────────────────────────────── */
+
+function QADemoVisual() {
+ return (
+
+
+ )
+}
+
+/* ─── One pipeline, Episode to citation ──────────────────────────────────── */
+
+const PIPELINE_CHIPS = [
+ { label: 'Episode' },
+ { label: 'compileSubject' },
+ { label: 'getContext' },
+ { label: 'grounded completion', active: true },
+ { label: 'resolveCitations' },
+]
+
+function PipelineChips() {
+ return (
+
+
+
+
+ )
+}
+
+/* ─── The content team works the gaps ────────────────────────────────────── */
+
+const OPS_BULLETS = [
+ { color: 'bg-amber-500', text: 'Open gaps carry the unanswered question verbatim' },
+ { color: 'bg-accent', text: 'Resolved gaps supersede, never overwrite' },
+ { color: 'bg-brand-500', text: <>Read over GET /api/ops/gaps },
+]
+
+const OPS_GAPS = [
+ { status: 'OPEN', id: 'GAP-2381', meta: '2 shoppers', text: 'Which planters are safe for a rooftop with a weight limit?' },
+ { status: 'OPEN', id: 'GAP-2379', meta: '1 shopper', text: 'Do you ship bare-root roses in winter?' },
+ { status: 'RESOLVED', id: 'GAP-2361', meta: '+ Episode', text: "What's your return window on live plants?" },
+]
+
+function OpsConsoleMockup() {
+ const tabs = ['Overview', 'Subjects', 'Coverage gaps', 'Conversations', 'Catalog']
+
+ return (
+
+
+ )
+}
+
+/* ─── Subjects table ──────────────────────────────────────────────────────── */
+
+const SUBJECTS = [
+ { subject: 'shop:products', writtenBy: <>ingestion job (catalog.json), readBy: 'shopper + ops assistants', tone: 'accent' },
+ { subject: 'faq:service', writtenBy: <>ingestion job (service-content.json), readBy: 'shopper + ops assistants', tone: 'accent' },
+ { subject: 'content:guides', writtenBy: <>ingestion job (service-content.json, guide docs), readBy: 'shopper assistant', tone: 'accent' },
+ { subject: 'ops:coverage-gaps', writtenBy: 'shopper route, on an ungrounded answer', readBy: <>ops assistant, /api/ops/gaps, tone: 'amber' },
+ { subject: 'shop:conversations', writtenBy: 'shopper route, every turn', readBy: 'audit trail', tone: 'neutral' },
+ { subject: 'ops:conversations', writtenBy: 'ops route, every turn', readBy: 'audit trail', tone: 'neutral' },
+]
+
+function SubjectsSection() {
+ return (
+
+
+ Subjects
+
+
+
+ )
+}
+
+/* ─── A chat turn on the wire ─────────────────────────────────────────────── */
+
+const REQUEST_JSON = `{
+ "sessionId": "optional, generated if omitted",
+ "message": "Do you have anything for full shade?",
+ "readSubjects": ["optional override of the default subjects"],
+ "retrievalConfig": { "globalMaxTokens": 2000 }
+}`
+
+const RESPONSE_JSON = `{
+ "answer": "...",
+ "grounded": true,
+ "citations": [
+ { "evidenceId": "S1", "subject": "shop:products",
+ "sourceId": "PLT-001", "label": "Hosta 'Blue Mouse Ears'" }
+ ],
+ "warnings": [],
+ "evidenceCount": 4
+}`
+
+function ApiCodeBlock({ label, tag, code }: { label: string; tag: string; code: string }) {
+ return (
+
+
+ A Chat Turn on the Wire
+
+
+
+ )
+}
+
+/* ─── Run the whole loop in two commands ─────────────────────────────────── */
+
+type OS = 'macos' | 'linux' | 'windows'
+
+const OS_META: Record = {
+ macos: { title: 'greenhaven zsh', note: '# Requires Node.js 18+', prompt: '$', label: 'macOS' },
+ linux: { title: 'greenhaven bash', note: '# Requires Node.js 18+', prompt: '$', label: 'Linux' },
+ windows: { title: 'greenhaven powershell', note: '# Requires Node.js 18+ (PowerShell)', prompt: 'PS>', label: 'Windows' },
+}
+
+function RunItTerminal() {
+ const [os, setOs] = useState('macos')
+ const meta = OS_META[os]
+
+ return (
+
+
+ )
+}
+
+/* ─── Closing CTA ─────────────────────────────────────────────────────────── */
+
+function CTASection() {
+ return (
+
+
+ )
+}
+
+/* ─── Page ───────────────────────────────────────────────────────────────── */
+
+export function GroundedShopAssistantPage() {
+ usePageSEO({
+ breadcrumb: false,
+ jsonLd: [
+ breadcrumbJsonLd([
+ { name: 'Home', path: '/' },
+ { name: 'Use Cases', path: '/use-cases' },
+ { name: 'Grounded Shop Assistant', path: '/use-cases/grounded-shop-assistant' },
+ ]),
+ ],
+ })
+
+ return (
+
+
+
+
+ )
+}
+
+function ArrowIcon() {
+ return (
+
+ )
+}
+
+function GitHubIcon() {
+ return (
+
+ )
+}
+
+function HeroBundleVisual() {
+ return (
+
+ {/* --soft: this section's Statewave panel carries its own saturated
+ chart series color below, so the ambient wash stays behind the
+ data instead of washing over it — see .section-glow--soft. */}
+
+
+
+ )
+}
+
+/* ─── How order is decided ───────────────────────────────────────────────── */
+
+const SIGNALS = [
+ { label: 'KIND PRIORITY', range: '3–10', note: 'typed profile facts outrank raw episodes' },
+ { label: 'RECENCY', range: '0–5', note: 'linear by age, newest scores highest' },
+ { label: 'TASK RELEVANCE', range: '0–8', note: 'lexical overlap plus cosine similarity' },
+ { label: 'TEMPORAL VALIDITY', range: '−4…+3', note: 'valid facts gain +3, expired ones lose 4' },
+]
+
+function SignalsStrip() {
+ return (
+
+
+ )
+}
+
+/* ─── Full comparison table ──────────────────────────────────────────────── */
+
+interface CompareRow {
+ cap: string
+ m0: string
+ sw: string
+}
+
+const RETRIEVAL_ROWS: CompareRow[] = [
+ { cap: 'How context is selected', m0: 'Top-k embedding-nearest as the candidate pool, then re-scored', sw: 'Deterministic assembly, additively scored to a token budget' },
+ { cap: 'Ranking signals', m0: 'Vector similarity fused with keyword and entity boosts; optional reranker', sw: 'Kind priority, recency, task relevance, temporal validity' },
+ { cap: 'Stale / expired facts', m0: 'Optional expiry, off by default; no confidence score or decay', sw: 'Penalised −4 and dropped before assembly' },
+ { cap: 'Same query, same result', m0: 'Varies with the index', sw: 'Byte-identical bundle every run' },
+]
+
+const GOVERNANCE_ROWS: CompareRow[] = [
+ { cap: 'Proof of what the agent saw', m0: 'None', sw: 'Immutable, ULID-addressable receipt with an integrity hash' },
+ { cap: 'Policy on the read path', m0: 'Implement it in your app', sw: 'Declarative bundles: deny or redact by label and caller' },
+ { cap: 'Provenance to source', m0: 'Session ids automatic; links to source documents by hand', sw: 'Source episode ids, confidence, and validity per memory' },
+ { cap: 'Subject deletion (GDPR)', m0: 'One call per subject; change history is retained', sw: 'One call clears episodes, memories, and receipts' },
+]
+
+const OPS_ROWS: CompareRow[] = [
+ { cap: 'Storage', m0: 'Pluggable vector stores', sw: 'Postgres and pgvector, nothing else to run' },
+ { cap: 'Graph / relationship memory', m0: 'OSS: graph config removed, relations no longer returned. Platform: graph affects the score, no graph payload to query', sw: 'Typed memories with provenance, no graph tier' },
+ { cap: 'Interface', m0: 'Python and TypeScript SDKs, REST, CLI, hosted MCP server', sw: 'REST, Python and TypeScript SDKs, MCP server, connectors' },
+ { cap: 'License', m0: 'Apache 2.0 core, paid platform', sw: 'Apache 2.0 throughout, runs fully offline' },
+]
+
+function CompareGroup({ title, rows }: { title: string; rows: CompareRow[] }) {
+ return (
+ <>
+
+
+ )
+}
+
+/* ─── Worked example ─────────────────────────────────────────────────────── */
+
+function CodePanel({
+ badge,
+ title,
+ lines,
+ calloutTone,
+ callout,
+}: {
+ badge: React.ReactNode
+ title: string
+ lines: React.ReactNode[]
+ calloutTone: 'muted' | 'accent'
+ callout: React.ReactNode
+}) {
+ return (
+
+
+ One returning customer, two runtimes
+
+
+
+ )
+}
+
+/* ─── Every call leaves a receipt ────────────────────────────────────────── */
+
+const MECHANISM_CARDS = [
+ { icon: '{}', title: 'Policy engine', body: 'Content-hashed YAML or JSON bundles. Deny or redact by sensitivity label and caller identity; log_only records each decision so you can audit a policy before enforcing it.' },
+ { icon: '#', title: 'Sensitivity labels', body: 'Per-memory pii, financial, and secret tags in a GIN-indexed array, so policy filters run inside the query rather than after it.' },
+ { icon: '←', title: 'Full provenance', body: 'Every compiled memory keeps the source episode ids, confidence score, and validity window it was derived from.' },
+ { icon: '⌫', title: 'Subject deletion', body: 'One GDPR-style call erases every episode, memory, and receipt for a subject, leaving no orphaned rows behind.' },
+]
+
+function ReceiptCard() {
+ const rows = [
+ { label: 'profile_fact', meta: 'conf 0.92 · valid', src: '[ep_4, ep_9]', dim: false },
+ { label: 'procedure', meta: 'conf 0.88 · valid', src: '[ep_2]', dim: false },
+ { label: 'episode_summary', meta: 'superseded', src: 'dropped', dim: true },
+ ]
+
+ return (
+
+
+
+
+ )
+}
+
+/* ─── Benchmarks ──────────────────────────────────────────────────────────── */
+
+/* Flat categorical fills, not a rank gradient — each hue names one system
+ * (see --series-* in index.css), and length alone carries the score. */
+const LOCOMO_SERIES: Record<'sw' | 'm0-cloud' | 'm0-oss', string> = {
+ sw: '--series-statewave',
+ 'm0-cloud': '--series-mem0-cloud',
+ 'm0-oss': '--series-mem0-oss',
+}
+
+function LoCoMoBar({ label, value, pct, tone }: { label: React.ReactNode; value: string; pct: number; tone: 'sw' | 'm0-cloud' | 'm0-oss' }) {
+ const seriesColor = `var(${LOCOMO_SERIES[tone]})`
+ return (
+
+
+ )
+}
+
+function TerminalDots() {
+ return (
+
+
+ )
+}
+
+/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
+
+const FAQS = [
+ { q: 'How is Statewave different from Mem0?', a: 'Mem0 ranks memories by relevance for an id you pass. Statewave compiles raw episodes into typed memories, ranks them with a fixed scoring model to a token budget, applies policy on the read path, and returns an integrity-hashed receipt of exactly what was delivered.' },
+ { q: 'What makes retrieval deterministic?', a: 'A fixed scoring model: kind priority (3–10), recency (0–5), task relevance (0–8), and temporal validity (−4 to +3). The same subject, task, and budget produce the same bundle every time.' },
+ { q: 'What is a state-assembly receipt?', a: 'An immutable, ULID-addressable record of one context call. It carries a byte-level integrity hash of what was delivered and references the policy bundle hash, so ‘what did the agent see, under which policy’ is answerable forever.' },
+ { q: 'Does it work with Claude, Cursor, or Codex?', a: 'Yes. One command (npx @statewavedev/statewave) boots the runtime and auto-wires Claude Code, Claude Desktop, Cursor, VS Code Copilot, and Codex CLI. Any MCP-compatible client connects too.' },
+ { q: 'Can I run it fully offline?', a: 'Yes. Storage is Postgres-only and self-hosted. The heuristic compiler keeps everything on your network; nothing leaves unless you configure an LLM compiler or hosted embeddings.' },
+]
+
+function FaqSection() {
+ return (
+
+
+ Frequently asked
+
+
+
+ )
+}
+
+/* ─── Closing CTA ─────────────────────────────────────────────────────────── */
+
+function CTASection() {
+ return (
+
+
+ )
+}
+
+/* ─── Page ───────────────────────────────────────────────────────────────── */
+
+export function StatewaveVsMem0Page() {
+ usePageSEO()
+
+ return (
+
+
+
+ ,
+ )
+}
+
+afterEach(cleanup)
+
+describe('BenchmarksPage: figures', () => {
+ it('states the headline lead over the open-source peer consistently', () => {
+ const { container } = renderPage()
+ // 0.905 − 0.866 = +0.039 (LoCoMo), 0.967 − 0.833 = +0.134 (LongMemEval).
+ // Both are computed in the page, so a wrong score surfaces here.
+ expect(container.innerHTML).toContain('+0.039')
+ expect(container.innerHTML).toContain('+0.134')
+ })
+
+ it('never claims a reproduction of mem0’s published gpt-5 figures', () => {
+ const { container } = renderPage()
+ expect(container.innerHTML).toMatch(/not a reproduction/i)
+ })
+
+ it('discloses the zoomed axis rather than hiding it', () => {
+ renderPage()
+ expect(screen.getAllByText('0.80').length).toBeGreaterThan(0)
+ expect(screen.getAllByText('1.00').length).toBeGreaterThan(0)
+ })
+})
+
+describe('BenchmarksPage: chart accessibility', () => {
+ it('labels every bar with its system and score, not color alone', () => {
+ renderPage()
+ // Two panels (LoCoMo + LongMemEval) x three systems = six labeled bars.
+ const bars = screen.getAllByRole('img')
+ expect(bars).toHaveLength(6)
+
+ expect(
+ screen.getByLabelText(/Statewave, LoCoMo score 0\.905/i),
+ ).toBeTruthy()
+ expect(
+ screen.getByLabelText(/mem0 OSS, LongMemEval score 0\.833.*leads by \+0\.134/i),
+ ).toBeTruthy()
+ })
+
+ it('renders a legend naming all three series', () => {
+ renderPage()
+ const legend = screen.getByRole('list', { name: /chart series/i })
+ expect(within(legend).getByText('Statewave')).toBeTruthy()
+ expect(within(legend).getByText('mem0 cloud')).toBeTruthy()
+ expect(within(legend).getByText('mem0 OSS')).toBeTruthy()
+ })
+})
+
+describe('BenchmarksPage: interaction', () => {
+ it('lets the reader collapse the zoomed axis back to full scale', () => {
+ renderPage()
+ const group = screen.getByRole('radiogroup', { name: /axis scale/i })
+ const zoomed = within(group).getByRole('radio', { name: '0.80–1.00' })
+ const full = within(group).getByRole('radio', { name: '0–1.00' })
+
+ // Zoomed is the default, but the honest full-scale view is one click away.
+ expect(zoomed).toHaveAttribute('aria-checked', 'true')
+ expect(full).toHaveAttribute('aria-checked', 'false')
+
+ fireEvent.click(full)
+ expect(full).toHaveAttribute('aria-checked', 'true')
+ expect(zoomed).toHaveAttribute('aria-checked', 'false')
+ // Axis ticks re-render for the new scale.
+ expect(screen.getAllByText('0.25').length).toBeGreaterThan(0)
+ })
+
+ it('keeps every printed score equal to its own label on both axes', () => {
+ renderPage()
+ const group = screen.getByRole('radiogroup', { name: /axis scale/i })
+
+ // Regression: the scores were briefly derived from their bar's position on
+ // the axis, so flipping the scale re-rendered against the new bounds while
+ // the bars were still travelling and printed figures nobody measured —
+ // 0.905 showing as 0.981. The axis changes how a score is drawn, never
+ // what it reads.
+ for (const axis of ['0–1.00', '0.80–1.00']) {
+ fireEvent.click(within(group).getByRole('radio', { name: axis }))
+ for (const bar of screen.getAllByRole('img')) {
+ const score = bar.getAttribute('aria-label')?.match(/score (\d\.\d{3})/)?.[1]
+ expect(score, `bar has no score in its label on the ${axis} axis`).toBeTruthy()
+ expect(bar.textContent, `printed score disagrees with its label on ${axis}`).toContain(
+ score,
+ )
+ }
+ }
+ })
+
+ it('isolates a single series from the legend, and releases it', () => {
+ renderPage()
+ const legend = screen.getByRole('list', { name: /chart series/i })
+ const statewave = within(legend).getByRole('button', { name: /Statewave/ })
+
+ expect(statewave).toHaveAttribute('aria-pressed', 'false')
+ fireEvent.click(statewave)
+ expect(statewave).toHaveAttribute('aria-pressed', 'true')
+ // Clicking the isolated series again clears the filter rather than
+ // trapping the reader in a single-series view.
+ fireEvent.click(statewave)
+ expect(statewave).toHaveAttribute('aria-pressed', 'false')
+ })
+
+ it('switches the reproduce command between backends', () => {
+ renderPage()
+ const tabs = screen.getByRole('tablist', { name: /backend/i })
+ const cloud = within(tabs).getByRole('tab', { name: /mem0 cloud/i })
+
+ // Statewave is selected first; its command is the one on screen.
+ expect(screen.getByRole('tabpanel').textContent).toContain('--backend statewave')
+
+ fireEvent.click(cloud)
+ expect(cloud).toHaveAttribute('aria-selected', 'true')
+ const panel = screen.getByRole('tabpanel')
+ expect(panel.textContent).toContain('--backend cloud')
+ expect(panel.textContent).not.toContain('--backend statewave')
+ })
+
+ it('shows the backend’s own published figures as the expected result', () => {
+ const { container } = renderPage()
+ const run = container.querySelector('#run')
+ expect(run, 'reproduce section must exist').toBeTruthy()
+
+ // Step 3 answers "did my run work?", so it has to track the command in
+ // step 2 rather than sitting on whichever backend rendered first.
+ expect(run!.textContent).toContain('0.905')
+ expect(run!.textContent).toContain('0.967')
+
+ const tabs = screen.getByRole('tablist', { name: /backend/i })
+ fireEvent.click(within(tabs).getByRole('tab', { name: /mem0 OSS/i }))
+ expect(run!.textContent).toContain('0.866')
+ expect(run!.textContent).toContain('0.833')
+ expect(run!.textContent).not.toContain('0.905')
+ })
+
+ it('scopes the retrieval caveat to the backend it qualifies', () => {
+ const { container } = renderPage()
+ const run = container.querySelector('#run')!
+
+ // The ≤20 cap is a mem0 OSS library default. On the Statewave tab it is
+ // noise; on the OSS tab it is material to reading the score.
+ expect(run.textContent).not.toMatch(/≤20 memories\/query/)
+
+ const tabs = screen.getByRole('tablist', { name: /backend/i })
+ fireEvent.click(within(tabs).getByRole('tab', { name: /mem0 OSS/i }))
+ expect(run.textContent).toMatch(/≤20 memories\/query/)
+ })
+})
+
+describe('BenchmarksPage: structure', () => {
+ it('keeps FAQ answers in the DOM while collapsed', () => {
+ renderPage()
+ // The last FAQ is closed by default; its answer text must still be
+ // present so search engines and in-page find can reach it.
+ expect(screen.getByText(/the layer that ingests, stores, and retrieves/i)).toBeTruthy()
+ })
+
+ it('points the section nav at anchors that exist on the page', () => {
+ const { container } = renderPage()
+ const nav = screen.getByRole('navigation', { name: /benchmark sections/i })
+ const links = within(nav).getAllByRole('link')
+ expect(links.length).toBeGreaterThan(0)
+
+ for (const link of links) {
+ const id = link.getAttribute('href')?.replace('#', '')
+ expect(id, 'nav link must have a hash href').toBeTruthy()
+ expect(
+ container.querySelector(`#${id}`),
+ `no section with id "${id}" for nav link`,
+ ).toBeTruthy()
+ }
+ })
+})
diff --git a/tests/routes.test.tsx b/tests/routes.test.tsx
index e857e27..8bbb542 100644
--- a/tests/routes.test.tsx
+++ b/tests/routes.test.tsx
@@ -62,6 +62,26 @@ describe('Route rendering', () => {
})
})
+ it('renders benchmarks page at /benchmarks', async () => {
+ renderApp('/benchmarks')
+ await waitFor(() => {
+ expect(screen.getByRole('main')).toBeInTheDocument()
+ })
+ await waitFor(() => {
+ expect(screen.getByText(/tops a memory benchmark/i)).toBeInTheDocument()
+ })
+ })
+
+ it('renders vs-mem0 comparison page at /vs/mem0', async () => {
+ renderApp('/vs/mem0')
+ await waitFor(() => {
+ expect(screen.getByRole('main')).toBeInTheDocument()
+ })
+ await waitFor(() => {
+ expect(screen.getByText(/statewave decides what.s delivered/i)).toBeInTheDocument()
+ })
+ })
+
it('renders 404 for unknown routes', async () => {
renderApp('/unknown-page')
await waitFor(() => {
+
+
+
+ Questions you're right to ask
+
+
+
+ + FAQ +
++ No spin. The awkward questions, answered directly. +
+
+ {FAQS.map((f, i) => (
+
+
+
+
+
+ ))}
+
+
+ {f.q}
+
+
+
+
+
+
+
+
+ {f.a}
+
+
+
+
+
+
+
+
+ Don't take our word for it.{' '}
+ Fork the harness
+
+
+
+
+ BENCHMARKS
+
+
+ + Apache-2.0, one code path, mem0's own judge unchanged. Clone + it, diff it against upstream, reproduce every result. +
+ +
+
+
+
+
+ By {post.meta.author}
+ + {post.meta.headerImage && ( + + )} diff --git a/src/pages/GroundedShopAssistantPage.tsx b/src/pages/GroundedShopAssistantPage.tsx new file mode 100644 index 0000000..864e36f --- /dev/null +++ b/src/pages/GroundedShopAssistantPage.tsx @@ -0,0 +1,1227 @@ +import { motion } from 'framer-motion' +import { Fragment, useState } from 'react' +import { Section } from '../components/Section' +import { Heading } from '../components/Heading' +import { Button } from '../components/Button' +import { CodeCopyButton } from '../components/CodeCopyButton' +import { UseCaseSwitcher } from '../components/UseCaseSwitcher' +import { usePageSEO } from '../lib/seo' +import { breadcrumbJsonLd } from '../lib/seo-meta' + +const REPO_URL = 'https://github.com/smaramwbc/statewave-grounded-shop-assistant' + +/* Mockups below use the `--viz-*` tokens (src/index.css) so their neutrals + * flip with the light/dark theme while the grounded/gap accents stay + * branded in both, same convention as PersonalAssistantMemoryPage. */ + +/* ─── Hero ───────────────────────────────────────────────────────────────── */ + +function HeroSection() { + return ( +
+
+
+ Grounded Answers,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Grounded Answers,
+
+ Not Guesses
+
+
+ + Every answer traces to retrieved evidence and is cited back to its + source. When the assistant can't find grounded evidence, it says + so instead of guessing, and files the gap for the content + team to resolve. +
+ +
+
+
+
+ )
+}
+
+function ProofStrip() {
+ const stats = [
+ { value: '25', label: 'unit tests' },
+ { value: '42', label: 'eval assertions' },
+ { value: '18/20/22', label: 'Node CI matrix' },
+ { value: '0', label: 'API keys to run' },
+ ]
+
+ return (
+
+
+
+
+ G
+
+
+
+
+
+
+
+
+
+ grounded
+
+ + GreenHaven Assistant +
++ Product advisor +
+
+
+
+
+
+
+ Do you have anything for full shade?
+
+
+
+
+
+ Yes. The Hosta 'Blue Mouse Ears' is rated for full to
+ partial shade and stays compact, which suits shaded borders and
+ containers.
+
+
+
+
+ PLT-001
+ Hosta 'Blue Mouse Ears'
+
+
+ shop:products
+
+
+
+
+ 4 evidence retrieved · 1 citation validated
+
+
+
+ )
+}
+
+/* ─── Two outcomes, both leave a trace ───────────────────────────────────── */
+
+function TwoOutcomesSection() {
+ return (
+
+ {stats.map((stat, i) => (
+
+
+
+ {i > 0 && }
+
+ ))}
+
+
+
+
+
+ {stat.value}
+
+ {stat.label}
+
+
+
+
+ completion mode{' '}
+ offline-rule-based
+
+
+ + Real suite from the repo:{' '} + node --test across + chat-core, statewave-core, and server, green on every Node version in CI. +
+
+
+ Two Outcomes, Both{' '}
+ Leave a Trace
+
+
+
+ + Why Statewave +
+ ++ Grounding is enforced by the runtime, not the prompt. Either an + answer survives citation validation, or the question becomes a + coverage gap the Ops Assistant can resolve. +
+ +
+
+
+
+
+
+
+
+
+
+
+ + Grounded and cited +
+
+
+ + The model answers from retrieved evidence, and at least one + citation ID survives validation. +
+ +
+
+ grounded: true
+
+
+ evidenceCount: 4
+
+
+
+
+ Answer returns with citation chips. Turn appended to{' '}
+ shop:conversations.
+
+
+
+
+
+
+
+
+ closed loop
+
+
+
+
+
+ !
+
+
+
+ + Ungrounded → coverage gap +
+
+
+ + No evidence, or no citation survives. The assistant says it + doesn't know, and the route files a gap. +
+ +
+
+ ops:coverage-gaps
+
+
+ status: open
+
+
+
+
+ A new Episode is appended. The Ops Assistant reads it as
+ evidence and resolves it under the same{' '}
+ sourceId.
+
+
+
+ )
+}
+
+function CitationDemoVisual() {
+ const rows = [
+ { id: 'S1', target: 'PLT-001', kept: true },
+ { id: 'S2', target: 'FAQ-014', kept: true },
+ { id: 'S9', target: 'unknown', kept: false },
+ ]
+
+ return (
+
+
+ Q
+
+
+ + Are your terracotta pots frost-proof? +
+
+
+ A
+
+
+ + I don't have grounded information on frost tolerance for that item. +
+
+
+ grounded: false · no guess emitted
+
+
+ {rows.map((row) => (
+
+ )
+}
+
+function GapDemoVisual() {
+ return (
+
+
+ {row.kept ? '✓' : '×'}
+
+ {row.id}
+ → {row.target}
+
+ {row.kept ? 'kept' : 'dropped'}
+
+
+ ))}
+
+
+ )
+}
+
+function AppendOnlyVisual() {
+ const episodes = [
+ { label: 'Episode v1', tag: 'PLT-001', current: false },
+ { label: 'Episode v2', tag: 'PLT-001', current: false },
+ { label: 'Episode v3', tag: 'current', current: true },
+ ]
+
+ return (
+
+ OPEN
+ ops:coverage-gaps
+
+ + "Which planters suit a rooftop weight limit?" +
+
+
+ sourceId: GAP-2381
+
+
+
+ )
+}
+
+const WHY_CARDS = [
+ {
+ title: 'Grounded answers only',
+ body: "The model answers strictly from retrieved evidence, and is told to say it doesn't know rather than fill the gap with a guess.",
+ Visual: QADemoVisual,
+ },
+ {
+ title: 'Every claim is citable',
+ body: 'Citation IDs from the model are validated against the evidence actually retrieved. Unknown IDs are dropped and flagged as a warning.',
+ Visual: CitationDemoVisual,
+ },
+ {
+ title: 'Content gaps are an object',
+ body: 'An ungrounded question writes a Coverage gap Episode. The Ops Assistant reads gaps beside the catalog and FAQs, so the content team fixes them from the same UI.',
+ Visual: GapDemoVisual,
+ },
+ {
+ title: 'Append-only memory',
+ body: 'Nothing is mutated in place. Updating a product or resolving a gap appends a new Episode with the same sourceId, so facts supersede instead of editing history.',
+ Visual: AppendOnlyVisual,
+ },
+]
+
+function WhyGridSection() {
+ return (
+
+
+ {episodes.map((ep) => (
+
+
+
+
+ {ep.label}
+
+
+ {ep.tag}
+
+
+ ))}
+
+
+ Built So Every{' '}
+ Claim Is Checkable
+
+
+
+ Jump to the API →
+
+
+
+
+ {WHY_CARDS.map((card, index) => {
+ const Visual = card.Visual
+ return (
+
+
+
+
+ )
+ })}
+
+ + {card.title} +
+ ++ {card.body} +
+ +
+
+
+ {PIPELINE_CHIPS.map((chip, i) => (
+
+ {i > 0 && (
+
+ )}
+
+ {chip.label}
+
+
+ ))}
+
+ )
+}
+
+interface FlowItem {
+ title: string
+ body: string
+ accent?: boolean
+ strong?: boolean
+ code?: boolean
+}
+
+function ArchitectureFlow() {
+ const columns: { heading: string; items: FlowItem[] }[] = [
+ {
+ heading: 'Source content',
+ items: [
+ { title: 'catalog.json', body: 'Product data' },
+ { title: 'service-content.json', body: 'FAQs and care guides' },
+ ],
+ },
+ {
+ heading: 'Ingestion',
+ items: [{ title: 'ingest job', body: 'Dedups by content hash, appends Episodes', accent: true }],
+ },
+ {
+ heading: 'StatewaveStore',
+ items: [{ title: 'Episodes → compileSubject', body: 'Newest Episode per sourceId, persisted to db.json', strong: true }],
+ },
+ {
+ heading: 'Subjects → Assistants',
+ items: [
+ { title: 'Shopper Assistant', body: 'POST /api/chat' },
+ { title: 'Ops Assistant', body: 'POST /api/ops/chat' },
+ { title: 'completionFn', body: 'LiteLLM · OpenRouter · offline', code: true },
+ ],
+ },
+ ]
+
+ return (
+
+
+ )
+}
+
+const TURN_STEPS = [
+ { n: 1, label: 'Shopper → Widget', detail: '"Do you have anything for full shade?"', mono: false },
+ { n: 2, label: 'Widget → Route', detail: 'POST /api/chat { sessionId, message }', mono: true },
+ { n: 3, label: 'Route → Store', detail: 'getContext(readSubjects, query) → evidence + IDs', mono: true },
+ { n: 4, label: 'Route → completionFn', detail: 'system + evidence + history → { answer, grounded, citationIds }', mono: true, code: true },
+ { n: 5, label: 'Route → Store', detail: "Drops IDs not in evidence, runs resolveCitations(), appends the turn", mono: false },
+]
+
+function TurnSequence() {
+ return (
+
+ {columns.map((col, i) => (
+
+ {i > 0 && (
+
+ ))}
+
+
+
+ →
+
+ )}
+
+
+ {col.heading}
+ {col.items.map((item) => ( +
+
+ ))}
+ + {item.title} +
++ {item.body} +
+
+
+
+
+
+ + The closed loop. A question the + shopper assistant can't ground becomes an{' '} + + ops:coverage-gaps + {' '} + Episode the Ops Assistant reads as evidence. Resolving it appends + another Episode with the same{' '} + + sourceId + + , superseding the gap instead of editing history. +
+
+
+ )
+}
+
+function ArchitectureSection() {
+ return (
+
+ One chat turn, end to end{' '}
+ "Do you have anything for full shade?"
+
+
+
+ {TURN_STEPS.map((step) => (
+
+
+
+ ))}
+
+
+ {step.n}
+
+ {step.label}
+
+
+ {step.detail}
+
+
+
+ One Pipeline,{' '}
+ Episode to Citation
+
+
+
+ + How It Works +
+ ++ Source content flows through ingestion into an append-only store, + compiles into Subjects, and is read by both assistants over the + same completion path. +
+ +
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function OpsConsoleSection() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Statewave Ops · Coverage gaps
+
+
+ 3 open
+
+
+
+
+ {tabs.map((tab) => (
+
+
+
+ {tab}
+
+ ))}
+
+ {OPS_GAPS.map((gap) => (
+
+
+
+ ))}
+
+
+ {gap.status}
+
+ {gap.id}
+
+ {gap.meta}
+
+
+ + "{gap.text}" +
+
+
+
+ The Content Team{' '}
+ Works the Gaps
+
+
+
+
+
+
+
+ + Ops Console +
+ ++ Every ungrounded question shows up in the Ops console as an open + coverage gap, with the shopper's exact wording. Resolving one + appends an Episode under the same sourceId, so the next shopper + gets a grounded answer. +
+ +-
+ {OPS_BULLETS.map((bullet, i) => (
+
- + + {bullet.text} + + ))} +
+ Data Model +
+ ++ The compiled read models both assistants query. Each is written by + exactly one path and read where it makes sense. +
+ +
+
+
+
+
+ | Subject | +Written by | +Read by | +
|---|---|---|
| + + {row.subject} + + | +{row.writtenBy} | +{row.readBy} | +
+
+ )
+}
+
+const API_ENDPOINTS = [
+ { method: 'POST', path: '/api/chat', desc: 'Shopper-facing grounded chat turn' },
+ { method: 'POST', path: '/api/ops/chat', desc: 'Ops chat turn, reads coverage gaps too' },
+ { method: 'GET', path: '/api/ops/gaps', desc: 'Open and resolved coverage gaps' },
+ { method: 'POST', path: '/api/ops/gaps/:sourceId/resolve', desc: 'Marks a coverage gap resolved' },
+ { method: 'GET', path: '/healthz', desc: 'Liveness; reports the active completion mode' },
+]
+
+function ApiSection() {
+ return (
+
+
+ {tag}
+
+ {label}
+
+
+
+ {code}
+ + Developer API +
+ +
+
+
+
+
+ i
+
+
+
+ + grounded is + only true when the + model both claims groundedness and at least one citation survives + validation against the retrieved evidence. +
+
+ {API_ENDPOINTS.map((ep) => (
+
+
+
+ {ep.method}
+
+
+ ))}
+
+
+ {ep.path}
+{ep.desc}
+
+
+ )
+}
+
+function RunItSection() {
+ return (
+
+
+
+
+
+
+
+
+ {meta.title}
+
+ {(Object.keys(OS_META) as OS[]).map((key) => (
+
+ ))}
+
+
+
+ {meta.note}
+ {meta.prompt} npm install
+ {meta.prompt} npm run dev
+
+ → Storefront http://localhost:4000/
+ → Ops console http://localhost:4000/ops.html
+ → completion offline-rule-based (no API key)
+
+
+
+
+
+
+
+
+
+ + Run the Whole Loop in Two Commands +
+ ++ Boots with a deterministic offline responder, so grounding, + citations, and the coverage-gap loop all work with zero setup. + Point it at any OpenAI-compatible gateway for real generated + answers. +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ Ground your shopping{' '}
+ assistant
+
+
+
+
+ START BUILDING
+
+
+ + Every answer traced to evidence, every gap filed automatically. + Clone the repo and see the whole loop run offline in minutes. +
+ +
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/StatewaveVsMem0Page.tsx b/src/pages/StatewaveVsMem0Page.tsx
new file mode 100644
index 0000000..669dc6e
--- /dev/null
+++ b/src/pages/StatewaveVsMem0Page.tsx
@@ -0,0 +1,1043 @@
+import { motion } from 'framer-motion'
+import { Section } from '../components/Section'
+import { Heading } from '../components/Heading'
+import { Button } from '../components/Button'
+import { CodeCopyButton } from '../components/CodeCopyButton'
+import { usePageSEO } from '../lib/seo'
+
+const GITHUB_URL = 'https://github.com/smaramwbc/statewave'
+const BENCHMARKS_REPO_URL = 'https://github.com/smaramwbc/statewave-memory-benchmarks'
+
+/* Mockups below use the `--viz-*` tokens from src/index.css so their
+ * neutrals flip with the light/dark theme, same convention as
+ * PersonalAssistantMemoryPage / MultiAgentSharedContextPage. */
+
+function Mem0Badge({ size = 22 }: { size?: number }) {
+ return (
+
+ m0
+
+ )
+}
+
+function StatewaveBadge({ size = 22 }: { size?: number }) {
+ return (
+
+ S
+
+ )
+}
+
+/* ─── Hero ───────────────────────────────────────────────────────────────── */
+
+function HeroSection() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Memory runtime
+
+
+ Open-source · Apache 2.0 · self-hosted
+
+
+
+ + Mem0 recalls what's similar + Statewave decides what's delivered +
+ ++ Mem0 ranks by relevance and hands you the result. Statewave assembles + a deterministic, token-bounded context bundle and returns an + integrity-hashed receipt of exactly what the agent saw. +
+ +
+
+
+
+
+
+
+
+ )
+}
+
+function HeroStatStrip() {
+ const stats = [
+ { value: '0.905', label: 'LoCoMo, n=1,540' },
+ { value: '4', label: 'ranking signals, deterministic' },
+ { value: '708', label: 'unit tests · 56 evals' },
+ { value: '0', label: 'API keys to run' },
+ ]
+
+ return (
+
+
+
+
+
+
+
+
+ budget 1,180/1,500
+
+ ContextAssembler
+deterministic · token-bounded
+
+
+
+ ranked context bundle
+
+
+
+ profile_fact
+ prefers succulents, low-water
+ score 18.2
+
+
+
+ procedure
+ refund flow for orders < 30d
+ score 15.6
+
+
+
+ episode
+ old address on file
+ −4 expired · dropped
+
+
+
+
+ receipt
+ 01J9Z4··· · sha256:a3f9c1 · bundle:7c21 (enforce)
+
+
+
+ )
+}
+
+/* ─── The gap ─────────────────────────────────────────────────────────────── */
+
+function GapSection() {
+ return (
+
+ {stats.map((stat, i) => (
+
+
+ {i > 0 && }
+
+ ))}
+
+
+ {stat.value}
+ {stat.label}
+
+
+
+ Postgres-only, runs offline
+
+
+
+ Ranked by similarity, or assembled by policy
+
+
+
+ + Mem0 partitions memory by an id you pass, then ranks what it finds by a + blend of vector similarity, keyword overlap and entity matches. + Statewave ingests each event as an immutable episode, compiles those + into typed memories with confidence and validity, and assembles a + ranked bundle the same way on every call. +
+ +
+ {/* mem0 side */}
+
+
+
+
+ {/* statewave side */}
+
+
+
+
+
+
+
+ {['user_id', 'agent_id', 'run_id', 'app_id'].map((id) => (
+
+ {id}
+
+ ))}
+
+
+
+
+
+ vector search →
+ candidate pool, re-scored before return
+
+
+
+ Retrieval is non-deterministic
++ The caller picks an id and the store ranks by relevance. Expiry + exists but is opt-in with no default, and there is no kind + priority and no recency decay — so an address the customer + changed months ago, with no expiry set, can still rank above the + current one. +
+
+
+
+
+
+
+
+
+
+
+
+ {[
+ { n: '01', label: 'Record', note: 'immutable episodes', active: false },
+ { n: '02', label: 'Compile', note: 'typed memories', active: false },
+ { n: '03', label: 'Context', note: 'ranked bundle', active: true },
+ { n: '04', label: 'Govern', note: 'policy + receipt', active: false },
+ ].map((step) => (
+
+
+
+ {step.n}
+ {step.label}
+ {step.note}
+
+ ))}
+
+
+ typed memory kinds · ranking priority
+ {[
+ { kind: 'profile_fact', pct: 100, score: 10 },
+ { kind: 'procedure', pct: 80, score: 8 },
+ { kind: 'episode_summary', pct: 50, score: 5 },
+ { kind: 'raw_episode', pct: 30, score: 3 },
+ ].map((row) => (
+
+ {row.kind}
+
+ ))}
+
+
+
+ {row.score}
+
+
+ Assembly is deterministic and inspectable
++ Given the same subject, task, and token budget, the assembler + returns the identical bundle every run. Four additive signals + set the order: kind priority (3–10), recency (0–5), + task relevance (0–8), and temporal validity (−4 to +3). +
+
+
+
+ How order is decided
+ score = priority + recency + relevance + validity
+
+
+ {SIGNALS.map((s, i) => (
+
+
+
+ ))}
+ {s.label}
+ {s.range}
+ {s.note}
+
+ {title}
+
+
+ {/* Desktop: table. Mobile: stacked cards (see block below) — same
+ rationale as WhyPage's comparison table: a 3-column grid on a
+ phone either clips the Statewave column or shrinks everything
+ to unreadable widths. */}
+
+ {rows.map((row) => (
+
+
+
+
+ ))}
+ {row.cap}
+ {row.m0}
+ {row.sw}
+
+ {rows.map((row) => (
+
+
+ )
+}
+
+function ComparisonSection() {
+ return (
+
+
+ ))}
+ {row.cap}
+-
+
- {row.m0} +
- {row.sw} +
+
+
+
+
+
+ Where each capability lives
+
+
+
+ + Both are memory layers for agents. They diverge on what the runtime + enforces and what you have to build or pay for. +
+
+
+
+
+
+
+ CAPABILITY
+
+
+
+
+
+ Mem0 v3 deleted the open-source graph-store drivers (Neo4j, Memgraph,
+ Kuzu, Apache AGE, Neptune); the graph_store config block
+ is no longer read, and search results no longer carry a{' '}
+ relations field. On the managed Platform there is no
+ graph store to configure and no graph payload in the response —
+ entity connections reach the caller only through the combined{' '}
+ score. Rows reflect each product's public docs and
+ source as of August 2026.
+
+
+
+
+
+
+
+ + You are giving a single assistant persistent memory, want a mature + SDK with broad framework integrations, and one identity scope + — user, agent, run, or app — describes how your data + partitions. +
+
+
+
+
+
+ + Agents run in production across many sessions and you need + deterministic context, provenance back to source episodes, policy + enforced on the read path, and an auditable receipt for every + decision. +
+
+
+ )
+}
+
+function WorkedExampleSection() {
+ return (
+
+ {badge}
+ {title}
+
+
+ {lines.map((line, i) =>
+ {line}
)}
+
+ {callout}
+
+ + A support agent resumes a customer thread three weeks later. In + between, the customer moved house and pasted a card number into an + earlier message. The same episode history runs through each system. +
+ +
+
+
+
,
+ ]}
+ callout="Expiry, redaction and any policy on the read path are left to the application to build and keep correct."
+ />
+
+
+ old address · Elm St
+ stale, no expiry set
+
+
+ card 4242 4242 ····
+ pii, no policy gate
+
+
+
,
+ ]}
+ callout="The runtime decides: the superseded address scores out, the card is redacted by its policy label, and the receipt stores an integrity hash of exactly what was delivered."
+ />
+
+ new address · Oak Ave
+ valid +3 · ranked #1
+
+
+ old address · Elm St
+ −4 expired · dropped
+
+
+ card ●●●● ●●●● ····
+ label:pii · redacted
+
+
+
+
+
+ )
+}
+
+function GovernanceSection() {
+ return (
+
+
+ state-assembly receipt
+ immutable · ULID-addressable
+
+
+
+
+ receipt_id01J9Z4RT8K···
+ integrity_hashsha256:a3f9c1e0···
+ policy_bundlebundle:7c21 (enforce)
+
+
+
+ included · 3 facts, 2 episodes · 1,180/1,500 tokens
+
+ {rows.map((row) => (
+
+ {row.label}
+ {row.meta}
+ {row.src}
+
+ ))}
+
+
+
+ 1 memory redacted · label:pii
+
+
+
+ Every call leaves a receipt
+
+
+
+ + Mem0 leaves auditability to your application. In Statewave every + assembly is governed and recorded in the core, on the read path, + under Apache 2.0. +
+
+
+
+ {MECHANISM_CARDS.map((card) => (
+
+
+
+ ))}
+
+ {card.icon}
+
+ {card.title}
+ {card.body}
+
+
+ )
+}
+
+function BenchmarksSection() {
+ return (
+
+ {label}
+ {value}
+
+
+
+
+
+
+ A fair, in-harness win
+
+
+
+ + Measured on Mem0's own harness, same models, judge unchanged. A + narrow, reproducible win beats an inflated one. +
+
+
+
+
+
+
+
+ LoCoMo · LLM-judge
+ n=1,540
+
+
+
+
+
+
+ Note · mem0 OSS caps retrieval at ≤20 memories/query by
+ library default; Statewave and cloud honor the top-200 request.
+
+
+
+
+
+
+
+ LongMemEval
+ n=30 · directional
+
+
+
+
+
+ ·
+ 0.933
+ mem0 cloud
+
+
+ 0.833
+ mem0 OSS
+ + Statewave leads both. Treat n=30 as directional; LoCoMo at + n=1,540 is the robust figure. +
+
+
+
+
+ 8/8
+ support eval vs 2/8 naive
+
+ + Facts persist across sessions, token budgets hold, provenance + traces to source episodes, and compilation stays idempotent. +
+
+
+
+
+
+
+ $ git clone {BENCHMARKS_REPO_URL}.git
+ $ cd statewave-memory-benchmarks && pip install -r requirements.txt
+ $ python -m benchmarks.locomo.run --backend statewave \
+ --answerer-model gpt-4o --judge-model gpt-4o
+ # same gpt-4.1 extraction, judge & scoring code untouched from upstream
+
+
+
+
+
+ )
+}
+
+/* ─── Moving over from Mem0 ───────────────────────────────────────────────── */
+
+interface MigrationRow {
+ m0: string
+ sw: string
+ note: string
+}
+
+const MIGRATION_ROWS: MigrationRow[] = [
+ { m0: 'client.add("…", user_id="cust_5521")', sw: 'record(subject="cust_5521", event="…")', note: 'Ingested as an immutable episode; compilers extract typed memories.' },
+ { m0: 'client.search("…", user_id="cust_5521")', sw: 'assemble(subject="cust_5521", task="…", budget=1500)', note: 'Ranked, token-bounded bundle plus a receipt of what was delivered.' },
+ { m0: 'client.get_all(user_id="cust_5521")', sw: 'memories(subject="cust_5521", kind="profile_fact")', note: 'Browse by kind, subject, or validity; provenance attached.' },
+ { m0: 'client.delete_all(user_id="cust_5521")', sw: 'delete_subject("cust_5521")', note: 'Removes every episode, memory, and receipt in one call — receipts included.' },
+]
+
+const INSTALL_CMD = 'npx @statewavedev/statewave'
+
+function MigrationSection() {
+ return (
+
+
+ Moving over from Mem0
+
+
+
+ + One command boots the whole runtime. Every Mem0 call has a direct + counterpart, and each write lands as an immutable episode. +
+
+
+
+
+
+
+
+
+
+
+
+ $ npx @statewavedev/statewave
+ → API + admin console + Postgres up via Docker · healthy in under 2 min · no account
+
+
+
+
+
+ {MIGRATION_ROWS.map((row) => (
+ MEM0 SDK
+
+ STATEWAVE
+
+
+ ))}
+ {row.m0}
+ →
+
+
+ {row.sw}
+ {row.note}
+
+ {FAQS.map((f, i) => (
+
+ 0 ? 'border-t border-theme-border' : ''}`}>
+
+ ))}
+ {f.q}
+{f.a}
+
+
+
+
+
+
+
+ Give your agent context it can prove
+
+
+
+ + Self-host the Apache 2.0 runtime, wire it to your MCP client, and + every context call comes back with a receipt. +
+ +
+
+
+
+
+ + "mem0" is a trademark of its respective owner. References + to mem0 on this page are nominative, for benchmark-comparison + purposes only, and do not imply any affiliation with or + endorsement by mem0ai. +
+
+
+ )
+}
diff --git a/src/pages/UseCasesPage.tsx b/src/pages/UseCasesPage.tsx
index 4f89e21..794d501 100644
--- a/src/pages/UseCasesPage.tsx
+++ b/src/pages/UseCasesPage.tsx
@@ -422,6 +422,16 @@ const USE_CASES: UseCase[] = [
description: 'A careful, audit-grade application — patient as subject, encounters as episodes, compiled with provenance.',
category: 'domain', status: 'future', tags: ['domain'],
},
+ {
+ title: 'Grounded shop assistant',
+ description: 'A shopper and ops assistant pair that only answers from retrieved evidence, validates every citation, and turns ungrounded questions into coverage-gap episodes the content team resolves.',
+ category: 'domain', status: 'available',
+ tags: ['domain', 'ecommerce'],
+ stack: ['TypeScript', 'Node.js', 'LiteLLM'],
+ repo: 'statewave-grounded-shop-assistant',
+ audience: 'Teams building customer-facing shopping or product-advisor assistants where wrong answers about stock, safety, or policy are costly.',
+ pageHref: '/use-cases/grounded-shop-assistant',
+ },
]
/* ─── Connector inventory (bootstrap patterns) ───────────────────────────── */
diff --git a/tests/benchmarks-page.test.tsx b/tests/benchmarks-page.test.tsx
new file mode 100644
index 0000000..e71b2ce
--- /dev/null
+++ b/tests/benchmarks-page.test.tsx
@@ -0,0 +1,200 @@
+/**
+ * /benchmarks: the LoCoMo + LongMemEval scoreboard page.
+ *
+ * These tests lock down the properties the page's credibility rests on, and
+ * the accessibility contract of its chart:
+ *
+ * - every rendered figure derives from the SYSTEMS table (no drift between
+ * the headline deltas and the underlying scores)
+ * - each chart bar is individually labeled, so identity and value are never
+ * carried by color alone
+ * - a legend names all three series
+ * - FAQ answers stay in the DOM while collapsed (crawlers + Ctrl-F)
+ * - the in-page section nav points at anchors that actually exist
+ */
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, screen, cleanup, within, fireEvent } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { ThemeProvider } from '../src/lib/theme'
+import { BenchmarksPage } from '../src/pages/BenchmarksPage'
+
+function renderPage() {
+ return render(
+