From 34b4a5bb0e50f7bcbf82117abb886783d6c2d8ca Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Tue, 3 Nov 2026 10:15:03 +0000
Subject: [PATCH] feat(ui): add a Memory tab to the account settings

The tab lists the context files that the host puts in the prompt (the
user's index and topics, each agent's and conversation's notes, and the
agent profiles) with their sizes against the caps. The owner can read,
edit, delete and clear them; an index over its cap cannot be saved.

Assisted-by: Claude Code:claude-sonnet-5-5
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 .../http/react-ui/public/locales/de/auth.json |   3 +-
 .../http/react-ui/public/locales/en/auth.json |   3 +-
 .../http/react-ui/public/locales/es/auth.json |   3 +-
 .../http/react-ui/public/locales/fr/auth.json |   3 +-
 .../http/react-ui/public/locales/id/auth.json |   3 +-
 .../http/react-ui/public/locales/it/auth.json |   3 +-
 .../http/react-ui/public/locales/ko/auth.json |   3 +-
 .../react-ui/public/locales/pt-BR/auth.json   |   3 +-
 .../react-ui/public/locales/zh-CN/auth.json   |   3 +-
 .../react-ui/src/components/MemoryTab.jsx     | 212 ++++++++++++++++++
 .../react-ui/src/components/memorytab.css     |  27 +++
 core/http/react-ui/src/pages/Account.jsx      |   3 +
 12 files changed, 260 insertions(+), 9 deletions(-)
 create mode 100644 core/http/react-ui/src/components/MemoryTab.jsx
 create mode 100644 core/http/react-ui/src/components/memorytab.css

diff --git a/core/http/react-ui/public/locales/de/auth.json b/core/http/react-ui/public/locales/de/auth.json
index f0232dda09..d1b1121932 100644
--- a/core/http/react-ui/public/locales/de/auth.json
+++ b/core/http/react-ui/public/locales/de/auth.json
@@ -55,7 +55,8 @@
       "security": "Sicherheit",
       "apiKeys": "API-Schlüssel",
       "about": "Über dich und den Assistenten",
-      "appearance": "Darstellung"
+      "appearance": "Darstellung",
+      "memory": "Gedächtnis"
     },
     "profile": {
       "displayName": "Anzeigename",
diff --git a/core/http/react-ui/public/locales/en/auth.json b/core/http/react-ui/public/locales/en/auth.json
index 68594b46f2..705cbe7235 100644
--- a/core/http/react-ui/public/locales/en/auth.json
+++ b/core/http/react-ui/public/locales/en/auth.json
@@ -80,7 +80,8 @@
       "apiKeys": "API keys",
       "usage": "Usage",
       "about": "About you and the assistant",
-      "appearance": "Appearance"
+      "appearance": "Appearance",
+      "memory": "Memory"
     },
     "profile": {
       "displayName": "Display name",
diff --git a/core/http/react-ui/public/locales/es/auth.json b/core/http/react-ui/public/locales/es/auth.json
index 0c799e9388..6449180f06 100644
--- a/core/http/react-ui/public/locales/es/auth.json
+++ b/core/http/react-ui/public/locales/es/auth.json
@@ -55,7 +55,8 @@
       "security": "Seguridad",
       "apiKeys": "Claves API",
       "about": "Sobre ti y el asistente",
-      "appearance": "Apariencia"
+      "appearance": "Apariencia",
+      "memory": "Memoria"
     },
     "profile": {
       "displayName": "Nombre para mostrar",
diff --git a/core/http/react-ui/public/locales/fr/auth.json b/core/http/react-ui/public/locales/fr/auth.json
index 596540ebf1..0ffffdf8df 100644
--- a/core/http/react-ui/public/locales/fr/auth.json
+++ b/core/http/react-ui/public/locales/fr/auth.json
@@ -55,7 +55,8 @@
       "security": "Sécurité",
       "apiKeys": "Clés d'API",
       "about": "À propos de vous et de l'assistant",
-      "appearance": "Apparence"
+      "appearance": "Apparence",
+      "memory": "Mémoire"
     },
     "profile": {
       "displayName": "Nom affiché",
diff --git a/core/http/react-ui/public/locales/id/auth.json b/core/http/react-ui/public/locales/id/auth.json
index 9d1c5752e1..e936a88c91 100644
--- a/core/http/react-ui/public/locales/id/auth.json
+++ b/core/http/react-ui/public/locales/id/auth.json
@@ -55,7 +55,8 @@
       "security": "Keamanan",
       "apiKeys": "API Key",
       "about": "Tentang Anda dan asisten",
-      "appearance": "Tampilan"
+      "appearance": "Tampilan",
+      "memory": "Memori"
     },
     "profile": {
       "displayName": "Nama tampilan",
diff --git a/core/http/react-ui/public/locales/it/auth.json b/core/http/react-ui/public/locales/it/auth.json
index fa24696154..2ad1a4f074 100644
--- a/core/http/react-ui/public/locales/it/auth.json
+++ b/core/http/react-ui/public/locales/it/auth.json
@@ -55,7 +55,8 @@
       "security": "Sicurezza",
       "apiKeys": "Chiavi API",
       "about": "Su di te e sull'assistente",
-      "appearance": "Aspetto"
+      "appearance": "Aspetto",
+      "memory": "Memoria"
     },
     "profile": {
       "displayName": "Nome visualizzato",
diff --git a/core/http/react-ui/public/locales/ko/auth.json b/core/http/react-ui/public/locales/ko/auth.json
index 37bac414f4..8d7d7f97fd 100644
--- a/core/http/react-ui/public/locales/ko/auth.json
+++ b/core/http/react-ui/public/locales/ko/auth.json
@@ -55,7 +55,8 @@
       "security": "보안",
       "apiKeys": "API 키",
       "about": "나와 어시스턴트에 대하여",
-      "appearance": "모양"
+      "appearance": "모양",
+      "memory": "메모리"
     },
     "profile": {
       "displayName": "표시 이름",
diff --git a/core/http/react-ui/public/locales/pt-BR/auth.json b/core/http/react-ui/public/locales/pt-BR/auth.json
index 6988bf7536..be78eb1af3 100644
--- a/core/http/react-ui/public/locales/pt-BR/auth.json
+++ b/core/http/react-ui/public/locales/pt-BR/auth.json
@@ -55,7 +55,8 @@
       "security": "Segurança",
       "apiKeys": "Chaves de API",
       "about": "Sobre você e o assistente",
-      "appearance": "Aparência"
+      "appearance": "Aparência",
+      "memory": "Memória"
     },
     "profile": {
       "displayName": "Nome de exibição",
diff --git a/core/http/react-ui/public/locales/zh-CN/auth.json b/core/http/react-ui/public/locales/zh-CN/auth.json
index 21a60bf8dc..6c6a4e10a7 100644
--- a/core/http/react-ui/public/locales/zh-CN/auth.json
+++ b/core/http/react-ui/public/locales/zh-CN/auth.json
@@ -55,7 +55,8 @@
       "security": "安全",
       "apiKeys": "API 密钥",
       "about": "关于您和助手",
-      "appearance": "外观"
+      "appearance": "外观",
+      "memory": "记忆"
     },
     "profile": {
       "displayName": "显示名称",
diff --git a/core/http/react-ui/src/components/MemoryTab.jsx b/core/http/react-ui/src/components/MemoryTab.jsx
new file mode 100644
index 0000000000..c4f1b9e54e
--- /dev/null
+++ b/core/http/react-ui/src/components/MemoryTab.jsx
@@ -0,0 +1,212 @@
+/* eslint-disable no-unused-vars -- components used only inside JSX look unused to this config, which has no eslint-plugin-react */
+import { useCallback, useEffect, useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { chatChangesApi, filesApi } from '../utils/api'
+import { byteText } from '../utils/changeProposal'
+import { allFiles, groupId, groupKind, indexFits, indexUse } from '../utils/memoryFiles'
+import Icon from './Icon'
+import { Button, Callout, EmptyState, LoadError, SkeletonRows } from './ui'
+import './memorytab.css'
+
+const READ_LIMIT = 64 * 1024
+const path = (p) => (p.startsWith('/') ? p : `/${p}`)
+
+// The size of an index against its caps, as a bar and words. The bar is a
+// progress element, so it is read as "x of y" without a style.
+function Use({ group, t }) {
+  const u = indexUse(group)
+  if (!u.index || !u.maxBytes) return null
+  const words = t(u.maxLines ? 'memoryPage.use' : 'memoryPage.useBytes', { size: byteText(u.bytes), max: byteText(u.maxBytes), lines: u.lines, maxLines: u.maxLines })
+  return (
+    <p className={`mt-use${u.over ? ' mt-use--over' : ''}`} data-testid="memory-use">
+      <progress className="mt-use__bar" value={Math.min(u.bytes, u.maxBytes)} max={u.maxBytes} aria-label={t('memoryPage.useLabel')} />
+      <span>{words}</span>
+      {u.over && <b>{' '}{t('memoryPage.over')}</b>}
+    </p>
+  )
+}
+
+// One file of a group: its name and size, and a panel that shows the text and
+// switches to an editor. The owner writes straight into their own files here;
+// the host keeps every write as a change set, and a delete goes to the Trash.
+function FileRow({ file, group, t, busy, onDelete, onSaved, setError }) {
+  const uid = useId()
+  const [open, setOpen] = useState(false)
+  const [text, setText] = useState(null)
+  const [edit, setEdit] = useState(null)
+  const [saving, setSaving] = useState(false)
+  const [ask, setAsk] = useState(false)
+
+  const toggle = async () => {
+    if (open) { setOpen(false); setEdit(null); return }
+    setOpen(true)
+    if (text === null) {
+      try { setText(await filesApi.readText(path(file.path), READ_LIMIT)) } catch (e) { setText(''); setError(e.message) }
+    }
+  }
+  const fit = file.index && edit !== null ? indexFits(group, edit) : null
+  const save = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await filesApi.uploadWithProgress(path(file.path), new Blob([edit], { type: 'text/markdown' }), { replace: true })
+      setText(edit)
+      setEdit(null)
+      onSaved(file)
+    } catch (e) {
+      setError(t('memoryPage.saveFailed', { message: e.message }))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <li className="mt-file" data-testid="memory-file" data-path={file.path}>
+      <div className="mt-file__row">
+        <button type="button" className="mt-file__name" aria-expanded={open} aria-controls={`${uid}-panel`} onClick={toggle}>
+          <Icon name={open ? 'chevron-down' : 'chevron-right'} />
+          <span>{file.name}</span>
+          {file.index && <span className="mt-tag">{t('memoryPage.index')}</span>}
+        </button>
+        <span className="mt-file__size">{byteText(file.size)}</span>
+        {ask ? (
+          <span className="mt-file__acts" role="group" aria-label={t('memoryPage.confirmDelete', { name: file.name })}>
+            <Button size="sm" variant="danger" disabled={busy} data-testid="memory-delete-yes" onClick={() => { setAsk(false); onDelete(file) }}>{t('memoryPage.deleteYes')}</Button>
+            <Button size="sm" variant="ghost" onClick={() => setAsk(false)}>{t('proposal.cancelEdit')}</Button>
+          </span>
+        ) : (
+          <span className="mt-file__acts">
+            <Button size="sm" variant="ghost" icon="trash" disabled={busy} aria-label={t('memoryPage.delete', { name: file.name })} title={t('memoryPage.delete', { name: file.name })} data-testid="memory-delete" onClick={() => setAsk(true)} />
+          </span>
+        )}
+      </div>
+      {open && (
+        <div className="mt-panel" id={`${uid}-panel`}>
+          {text === null ? <SkeletonRows count={2} /> : edit === null ? (
+            <>
+              <pre className="mt-text" tabIndex={0} aria-label={file.name} data-testid="memory-text">{text || t('memoryPage.emptyFile')}</pre>
+              <Button size="sm" icon="edit" data-testid="memory-edit" onClick={() => setEdit(text)}>{t('memoryPage.edit')}</Button>
+            </>
+          ) : (
+            <form onSubmit={(e) => { e.preventDefault(); if (!fit || fit.fits) save() }} onKeyDown={(e) => { if (e.key === 'Escape') { e.stopPropagation(); setEdit(null) } }}>
+              <label className="dk-label" htmlFor={`${uid}-ta`}>{t('memoryPage.editLabel', { name: file.name })}</label>
+              <textarea id={`${uid}-ta`} className="dk-textarea mt-edit" rows={Math.min(16, Math.max(6, edit.split('\n').length + 1))} value={edit} spellCheck={false} autoFocus data-testid="memory-edit-text" aria-describedby={`${uid}-n`} onChange={(e) => setEdit(e.target.value)} />
+              <p className={`mt-help${fit && !fit.fits ? ' mt-help--err' : ''}`} id={`${uid}-n`} data-testid="memory-edit-size">
+                {fit
+                  ? t(group.max_lines ? 'memoryPage.editSizeIndex' : 'memoryPage.editSize', { size: byteText(fit.bytes), max: byteText(group.max_bytes), lines: fit.lines, maxLines: group.max_lines })
+                  : byteText(new TextEncoder().encode(edit).length)}
+                {fit && !fit.fits && <b>{' '}{t('memoryPage.tooBig')}</b>}
+              </p>
+              <span className="mt-acts">
+                <Button type="submit" variant="primary" size="sm" busy={saving} disabled={fit && !fit.fits}>{t('memoryPage.save')}</Button>
+                <Button size="sm" onClick={() => setEdit(null)}>{t('proposal.cancelEdit')}</Button>
+              </span>
+            </form>
+          )}
+        </div>
+      )}
+    </li>
+  )
+}
+
+function groupTitle(g, t) {
+  const kind = groupKind(g)
+  return t(`memoryPage.group.${kind}`, { key: g.key })
+}
+
+// Settings > Memory: the notes the host puts in the prompt of a chat, with
+// their sizes against the caps that keep a turn small. It lists the files of
+// every source the host knows (the user's, each agent's, each connector
+// conversation's) and the agent profiles. The owner can read, edit and delete
+// them here; a model changes them only through a confirmed proposal.
+export default function MemoryTab({ addToast }) {
+  const { t } = useTranslation('chats')
+  const [data, setData] = useState(null)
+  const [error, setError] = useState(null)
+  const [note, setNote] = useState('')
+  const [fail, setFail] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [clear, setClear] = useState(false)
+
+  const load = useCallback(async () => {
+    try {
+      setData(await chatChangesApi.contextFiles())
+      setError(null)
+    } catch (e) {
+      setError(e)
+    }
+  }, [])
+  useEffect(() => { load() }, [load])
+
+  const run = async (call, say) => {
+    setBusy(true)
+    setFail('')
+    try {
+      await call()
+      setNote(say)
+      addToast?.(say, 'success')
+    } catch (e) {
+      setFail(e.message)
+    } finally {
+      setBusy(false)
+      await load()
+    }
+  }
+  const remove = (file) => run(() => filesApi.remove(path(file.path)), t('memoryPage.deleted', { name: file.name }))
+  const removeAll = async () => {
+    const files = allFiles(data?.groups)
+    setClear(false)
+    await run(async () => { for (const f of files) await filesApi.remove(path(f.path)) }, t('memoryPage.cleared', { count: files.length }))
+  }
+
+  if (error) return <LoadError title={t('memoryPage.loadError')} error={error} onRetry={load} testId="memory-load-error" />
+  if (!data) return <div data-testid="memory-tab"><SkeletonRows count={3} /></div>
+
+  const groups = data.groups || []
+  const total = allFiles(groups).length
+  const lim = data.limits || {}
+  return (
+    <div className="mt-tab" data-testid="memory-tab">
+      <p className="mt-lede">{t('memoryPage.lede')}</p>
+      <p className="mt-limits" data-testid="memory-limits">
+        {t('memoryPage.limits', { lines: lim.index_lines, index: byteText(lim.index_bytes), profile: byteText(lim.profile_bytes), turn: byteText(lim.turn_bytes) })}
+      </p>
+      <p className="mt-lede"><Link className="cs-link" to="/app/chats/proposals">{t('memoryPage.proposalsLink')}</Link></p>
+      <div className="sr-only" role="status" aria-live="polite">{note}</div>
+      {fail && <p className="mt-help mt-help--err" role="alert" data-testid="memory-error">{fail}</p>}
+      {groups.length === 0 ? (
+        <EmptyState variant="first-run" icon="memory" title={t('memoryPage.emptyTitle')} body={t('memoryPage.emptyBody')} testId="memory-empty" />
+      ) : (
+        <>
+          {groups.map((g) => (
+            <section key={groupId(g)} className="mt-group" aria-labelledby={`mt-${groupId(g)}`} data-testid="memory-group" data-group={groupId(g)}>
+              <h3 className="mt-group__title" id={`mt-${groupId(g)}`}>{groupTitle(g, t)}</h3>
+              <Use group={g} t={t} />
+              <ul className="mt-files">
+                {g.files.map((f) => (
+                  <FileRow key={f.path} file={f} group={g} t={t} busy={busy} onDelete={remove} setError={setFail}
+                    onSaved={(file) => { setNote(t('memoryPage.saved', { name: file.name })); load() }} />
+                ))}
+              </ul>
+            </section>
+          ))}
+          <div className="mt-foot">
+            {clear ? (
+              <Callout tone="warn" role="alertdialog" testId="memory-clear-confirm"
+                actions={(
+                  <>
+                    <Button variant="danger" size="sm" autoFocus busy={busy} data-testid="memory-clear-yes" onClick={removeAll}>{t('memoryPage.clearYes', { count: total })}</Button>
+                    <Button variant="ghost" size="sm" onClick={() => setClear(false)}>{t('proposal.cancelEdit')}</Button>
+                  </>
+                )}
+              >{t('memoryPage.clearAsk', { count: total })}</Callout>
+            ) : (
+              <Button variant="danger" size="sm" icon="trash" disabled={busy} data-testid="memory-clear" onClick={() => setClear(true)}>{t('memoryPage.clear')}</Button>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/memorytab.css b/core/http/react-ui/src/components/memorytab.css
new file mode 100644
index 0000000000..fc26c0ba78
--- /dev/null
+++ b/core/http/react-ui/src/components/memorytab.css
@@ -0,0 +1,27 @@
+/* Settings > Memory: the context files of the prompt, with their sizes. */
+.mt-tab { display: grid; gap: var(--sp-4); max-width: 720px; }
+.mt-lede, .mt-limits { margin: 0; color: var(--dk-muted); font-size: var(--text-sm); }
+.mt-limits { font-size: var(--text-xs); }
+.mt-group { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--dk-radius-2); background: var(--dk-card); box-shadow: inset 0 0 0 1px var(--dk-edge); }
+.mt-group__title { margin: 0; font-size: var(--text-md, 15px); color: var(--dk-text); overflow-wrap: anywhere; }
+.mt-use { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); margin: 0; font-size: var(--text-xs); color: var(--dk-muted); }
+.mt-use__bar { width: 120px; height: 6px; accent-color: var(--dk-accent); }
+.mt-use--over { color: var(--dk-error-text, var(--dk-error)); }
+.mt-use--over .mt-use__bar { accent-color: var(--dk-error); }
+.mt-files { margin: 0; padding: 0; list-style: none; display: grid; }
+.mt-file { border-top: 1px solid var(--dk-edge); }
+.mt-file__row { display: flex; align-items: center; gap: var(--sp-3); padding: 4px 0; }
+.mt-file__name { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 6px 0; border: 0; background: none; color: var(--dk-text); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+.mt-file__name:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: var(--dk-radius-1); }
+.mt-file__size { flex: none; color: var(--dk-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.mt-file__acts { flex: none; display: flex; gap: 4px; }
+.mt-tag { padding: 0 6px; border-radius: var(--dk-radius-3); background: var(--dk-accent-wash); color: var(--dk-accent-text); font-size: var(--text-xs); }
+.mt-panel { display: grid; gap: var(--sp-2); padding: 0 0 var(--sp-3); }
+.mt-text { margin: 0; padding: var(--sp-3); max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--dk-radius-2); background: var(--dk-inset); font-family: var(--font-mono); font-size: var(--text-xs); }
+.mt-edit { width: 100%; font-family: var(--font-mono); font-size: var(--text-xs); resize: vertical; }
+.mt-foot { display: flex; }
+.mt-edit { height: auto; padding: var(--sp-2) var(--sp-3); }
+.mt-help { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--text-xs); color: var(--dk-muted); }
+.mt-help--err { color: var(--dk-error-text, var(--dk-error)); }
+.mt-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
+.mt-panel .dk-label { display: block; margin-bottom: var(--sp-1); }
diff --git a/core/http/react-ui/src/pages/Account.jsx b/core/http/react-ui/src/pages/Account.jsx
index 344695f919..8727eeb965 100644
--- a/core/http/react-ui/src/pages/Account.jsx
+++ b/core/http/react-ui/src/pages/Account.jsx
@@ -9,6 +9,7 @@ import { timeUntil, initialOf } from '../utils/access'
 import { Button, Callout, EmptyState, LoadError, PageHeader, SkeletonRows, useLoad } from '../components/ui'
 import ApiKeysPanel from '../components/users/ApiKeysPanel'
 import { AboutYouTab, AppearanceTab } from '../components/wellknown/SettingsTabs'
+import MemoryTab from '../components/MemoryTab'
 import './access.css'
 
 const TABS = [
@@ -17,6 +18,7 @@ const TABS = [
   { id: 'keys', labelKey: 'account.tabs.apiKeys' },
   { id: 'usage', labelKey: 'account.tabs.usage' },
   { id: 'about', labelKey: 'account.tabs.about', files: true },
+  { id: 'memory', labelKey: 'account.tabs.memory', files: true },
   { id: 'appearance', labelKey: 'account.tabs.appearance', files: true },
 ]
 
@@ -298,6 +300,7 @@ export default function Account() {
         {tab === 'keys' && <ApiKeysPanel addToast={addToast} intro={t('keys.accountIntro')} />}
         {tab === 'usage' && <UsageTab />}
         {tab === 'about' && <AboutYouTab />}
+        {tab === 'memory' && <MemoryTab addToast={addToast} />}
         {tab === 'appearance' && <AppearanceTab />}
       </div>
     </div>