MemoryPanel

Let the user read and edit the instruction files the agent loads as memory. Files are grouped by scope in a fixed order: User, Project, Local and Agent (agent files show the agent name). The list is searchable by path, agent name and content. Selecting a file opens MemoryFileDetail with the rendered Markdown. From breakpoint (720px of panel width by default) the list and the file sit side by side, with a placeholder when nothing is selected; below it the file replaces the list and a back button returns. The panel fills its container, so give it a height. Edit appears only with onSave; a rejected save keeps the editor open with the message, and leaving a file with unsaved edits asks for confirmation. onOpenLocation and onCreate add Open location and New file actions. States: loading shows skeleton rows, error shows an alert with Retry (onRetry), an empty files list shows an empty state. selectedId can be controlled, for example to open the file named in a Saved to memory notice. Helpers: sortMemoryFiles, matchesMemoryQuery, getMemoryFileName, formatMemoryUpdatedAt.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Wide
Narrow
Loading, error, empty
API reference
Prop
Type
Required
files
MemoryFile[]
Yes
Memory files of all scopes
loading
boolean
No
Shows skeleton rows in the list
error
React.ReactNode
No
Error message shown instead of the list
onRetry
() => void
No
Called by the retry button of the error alert
selectedId
string | null
No
Selected file id, uncontrolled when omitted; set it to open a file, for example from a "Saved to memory" notice
onSelectedIdChange
(id: string | null) => void
No
Called when the selected file changes
onSave
(file: MemoryFile, content: string) => void | Promise<void>
No
Saves edited content, Edit is available only when set; a rejection keeps the editor open with the message
onOpenLocation
(file: MemoryFile) => void
No
Shows Open location for each file, for example to reveal it in the file manager or editor
onCreate
() => void
No
Shows a New file button
breakpoint
number
No
Component width in px from which list and detail sit side by side, `720` by default
listWidth
number
No
List pane width in px when wide, `340` by default
now
number
No
Current time used for relative update times, `Date.now()` by default
locale
string
No
Locale of relative update times, `en` by default
labels
Partial<MemoryPanelLabels>
No
Overrides of the default English labels of the panel
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element, give the panel a height