# Memory Viewer

> What an agent remembers (MemoryViewer) and how its runtime settings differ from code (OverrideDiff).

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/MemoryViewer/)

What an agent remembers (`MemoryViewer`) and how its runtime settings differ from code (`OverrideDiff`).

MemoryViewer: `items` ({id, scope, source, date, text}), `onEdit(item)`, `onDelete(item)`. Search and scope chips built in.
OverrideDiff: `title`, `versions`, `by`, `before`, `after` (text, diffed by line), `onDiscard`, `onPromote`, `discardLabel`, `promoteLabel`.

## Example

```tsx
import * as React from "react";
import { MemoryViewer, OverrideDiff } from "@twentyfirstmedia/pro";

const mem = [
  {
    id: 1,
    scope: "Agent",
    source: "Chat",
    date: "Apr 12",
    text: "Ida at Northwind prefers short replies and a quote attached.",
  },
  {
    id: 2,
    scope: "Project",
    source: "Feedback",
    date: "Apr 9",
    text: "Never promise refunds; hand them to a person.",
  },
  {
    id: 3,
    scope: "Global",
    source: "Import",
    date: "Apr 2",
    text: "Company is FollowerX GmbH, Hamburg.",
  },
];
export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
          alignItems: "start",
        } as React.CSSProperties
      }
    >
      <div className="tf-panel">
        <MemoryViewer items={mem} onEdit={() => {}} onDelete={() => {}} />
      </div>
      <OverrideDiff
        title="Instruction"
        versions="Code default v1 → Override v3"
        by="Main Brain after feedback"
        before={"You are Atlas, the support agent.\nBe friendly.\nAnswer within one day."}
        after={
          "You are Atlas, the support agent.\nBe brief and friendly.\nAnswer within one day.\nNever promise refunds."
        }
        onDiscard={() => {}}
        onPromote={() => {}}
      />
    </div>
  );
}
```

## Props

### MemoryViewer

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `{ id: string \| number; scope: string; source?: string; date?: string; text: string }[]` | Required |
| `onEdit?` | `(item: NonNullable<MemoryViewerProps["items"]>[number]) => void` |  |
| `onDelete?` | `(item: NonNullable<MemoryViewerProps["items"]>[number]) => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### OverrideDiff

| Prop | Type | Notes |
| --- | --- | --- |
| `title?` | `string` |  |
| `versions?` | `ReactNode` |  |
| `by?` | `ReactNode` |  |
| `before` | `string` | Required |
| `after` | `string` | Required |
| `onDiscard?` | `() => void` |  |
| `onPromote?` | `() => void` |  |
| `discardLabel?` | `string` |  |
| `promoteLabel?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |