Memory Ledger

Installation

pnpm dlx shadcn@latest add @cleverui/memory-ledger

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { MemoryLedger } from '@/components/ui/memory-ledger'

Exampletsx

'use client'

import { useCallback, useState } from 'react'
import { MemoryLedger, type MemoryFact } from '@/components/ui/memory-ledger'

const SEED: MemoryFact[] = [
  {
    id: 'digest',
    text: 'Send weekly ops digests to #ops every Monday at 09:00 PT.',
    source: 'slack #ops',
    addedAt: '2026-07-12 14:02',
    pinned: true,
  },
  {
    id: 'threshold',
    text: 'Flag any Stripe refund over $500 for human approval before execution.',
    source: 'stripe',
    addedAt: '2026-07-11 09:18',
  },
  {
    id: 'xero-match',
    text: 'Match Xero bills to Stripe payouts within a $50 tolerance for Apex Holdings.',
    source: 'xero',
    addedAt: '2026-07-10 16:44',
  },
  {
    id: 'escalation',
    text: 'Escalate stalled Linear tickets to Maya Chen after 5 business days unassigned.',
    source: 'linear',
    addedAt: '2026-07-09 11:30',
  },
  {
    id: 'vendor',
    text: 'Preferred freight vendor is Harborline Logistics for West Coast lanes.',
    source: 'notion',
    addedAt: '2026-07-08 08:12',
  },
  {
    id: 'close',
    text: 'March close pack freezes GL edits after the 3rd business day of the following month.',
    source: 'xero',
    addedAt: '2026-07-07 17:55',
  },
]

export default function MemoryLedgerDemo() {
  const [facts, setFacts] = useState<MemoryFact[]>(SEED)

  const onForget = useCallback((id: string) => {
    setFacts((prev) => prev.filter((f) => f.id !== id))
  }, [])

  const onPinToggle = useCallback((id: string, pinned: boolean) => {
    setFacts((prev) =>
      prev.map((f) => (f.id === id ? { ...f, pinned } : f))
    )
  }, [])

  return (
    <div className="mx-auto flex min-h-[520px] w-full max-w-2xl flex-col justify-center px-4 py-12 sm:px-6 sm:py-16">
      <MemoryLedger
        facts={facts}
        onForget={onForget}
        onPinToggle={onPinToggle}
        label="Agent memory"
      />
      {facts.length < SEED.length && (
        <button
          type="button"
          onClick={() => setFacts(SEED)}
          className="mt-8 self-center font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
        >
          Restore facts
        </button>
      )}
    </div>
  )
}

API reference

MemoryLedger accepts the following props.

Prop	Type	Default	Description
`facts`*	`MemoryFact[]`	–	the memory store; pinned rows sort first
`onForget`	`(id: string) => void`	–	fires from a row's forget button; parent owns removal
`onPinToggle`	`(id: string, pinned: boolean) => void`	–	optional pin affordance; omitted hides it
`label`	`string`	`'Agent memory'`	mono micro-label heading the ledger
`emptyLabel`	`string`	`'Nothing stored yet'`	muted mono line when facts is empty

…plus everything from Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface MemoryFact {
  id: string
  text: string
  source?: string
  /** renders verbatim in mono, e.g. '2026-07-12 14:02' */
  addedAt?: string
  pinned?: boolean
}

Related components

AI Empty State

Agent session zero state for React AI apps, starter prompt cards, connected-tool chips, and an honest scope note, styled with Tailwind hairline restraint; composes above any composer.

Citation Rail

Inline numbered source chips paired with a rail of sources, favicon placeholder, domain, and title, plus a keyboard-accessible snippet peek on hover or focus.

Guardrail Notice

An inline policy interjection, a quiet card explaining why the agent modified or declined an action, with an expandable mono policy reference; honest tone, destructive keyline only when blocked.

HITL Approval Card

Human-in-the-loop approval for a pending agent action, plain-language summary, honest risk chip, expandable raw-payload mono block, and allow-once / always-allow / deny callbacks.

Agent Status Strip

A slim strip for app headers, agent name, state lamp, a one-line current step that shimmers while running, and an SSR-safe elapsed mono timer that starts post-mount.

Context Meter

Context-window usage meter, a hairline bar with a tabular tokens-used/limit readout and per-source breakdown rows, shifting to an honest warning treatment at 85 percent.

Frequently asked questions

How do I install the Memory Ledger component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/memory-ledger`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Memory Ledger require?

Memory Ledger uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Memory Ledger to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code