From 13d0f83487ea8fb8f81246bfa910dd11ffc5b04b Mon Sep 17 00:00:00 2001
From: Sergio Marcelino <sergio@filho.org>
Date: Thu, 6 Aug 2026 18:37:31 -0300
Subject: [PATCH] feat(console): new ui improvements

---
 memory/ui/page.tsx                   |  14 +-
 memory/ui/src/page/BankRail.tsx      |  88 ++-
 memory/ui/src/page/MemoriesPanel.tsx |  86 +--
 memory/ui/src/page/MemoryGraph.tsx   |  50 +-
 memory/ui/src/page/ModeToggle.tsx    |   4 +-
 memory/ui/src/page/RecallPanel.tsx   |  50 +-
 memory/ui/src/page/RulesPanel.tsx    |  81 ++-
 memory/ui/src/page/icons.tsx         |  13 +-
 memory/ui/src/page/index.tsx         | 476 +++++++++-----
 memory/ui/src/page/widgets.tsx       |  48 ++
 memory/ui/styles.css                 | 924 +++++++++++++++++++--------
 packages/console-ui/index.d.ts       |   7 +
 pnpm-lock.yaml                       |  10 +-
 shell/ui/page.tsx                    |   4 +-
 shell/ui/src/page/index.tsx          |  50 +-
 state/ui/page.tsx                    |   6 +-
 state/ui/src/lib/widgets.tsx         |  82 ++-
 state/ui/src/page/ItemView.tsx       | 205 ------
 state/ui/src/page/ItemsView.tsx      |  90 ---
 state/ui/src/page/ScopesView.tsx     | 101 ---
 state/ui/src/page/ValueEditor.tsx    | 290 +++++++++
 state/ui/src/page/browser.tsx        | 358 +++++++++++
 state/ui/src/page/index.tsx          |  62 +-
 state/ui/styles.css                  | 557 +++++++++++++---
 24 files changed, 2520 insertions(+), 1136 deletions(-)
 create mode 100644 memory/ui/src/page/widgets.tsx
 delete mode 100644 state/ui/src/page/ItemView.tsx
 delete mode 100644 state/ui/src/page/ItemsView.tsx
 delete mode 100644 state/ui/src/page/ScopesView.tsx
 create mode 100644 state/ui/src/page/ValueEditor.tsx
 create mode 100644 state/ui/src/page/browser.tsx

diff --git a/memory/ui/page.tsx b/memory/ui/page.tsx
index b516126fe..12fb2b5e0 100644
--- a/memory/ui/page.tsx
+++ b/memory/ui/page.tsx
@@ -6,11 +6,13 @@
  * the console mounts and link-swaps it, styles-before-scripts on boot.
  *
  * `setup(host)` registers one contribution:
- * - src/page/ — the `#/ext/memory` page: banks in a left rail, the selected
- *   bank's memories (pin/edit/tombstone in place), a schematic graph, the
- *   always-injected markdown rules, and a turn-preview dry run. Everything
- *   re-reads live off `memory::item-changed` / `memory::bank-changed`
- *   (poll fallback while the bindings are unavailable).
+ * - src/page/ — the `#/ext/memory` page: banks in a navigation rail, the
+ *   selected bank's workspace (always-injected markdown rules, memories with
+ *   pin/edit/tombstone in place, a schematic graph, and a turn-preview dry
+ *   run) behind one segmented control; a drill-in flow when the pane is
+ *   narrow. Everything re-reads live off `memory::item-changed` /
+ *   `memory::bank-changed` (poll fallback while the bindings are
+ *   unavailable).
  *
  * No config-form override: memory's configuration is a flat list of typed
  * scalars, which the console's schema-generated form already renders from
@@ -28,6 +30,6 @@ export default function setup(host: Host) {
   host.pages.register({
     id: 'memory',
     title: 'memory',
-    render: () => <MemoryPage host={host} />,
+    render: (props) => <MemoryPage host={host} {...props} />,
   })
 }
diff --git a/memory/ui/src/page/BankRail.tsx b/memory/ui/src/page/BankRail.tsx
index 96f936e60..917156383 100644
--- a/memory/ui/src/page/BankRail.tsx
+++ b/memory/ui/src/page/BankRail.tsx
@@ -1,17 +1,20 @@
+/**
+ * Navigation column: the bank list (first-class named memory scopes) plus
+ * an inline create form. Selecting a bank scopes the rules/memories/graph/
+ * preview workspace; sessions pick their bank via session metadata
+ * `memory_bank`. In the narrow drill-in flow this list is the first pane.
+ */
+
 import { useState } from 'react'
 import { Button, Input } from '@iii-dev/console-ui'
 import { Plus } from './icons'
 import type { MemoryBank } from './memory-data'
 
-/**
- * Left rail: the bank list (first-class named memory scopes) plus an
- * inline create form. Selecting a bank scopes the memories/rules/recall
- * panels; sessions pick their bank via session metadata `memory_bank`.
- */
-
 interface BankRailProps {
   banks: MemoryBank[]
   selected: string | null
+  /** True while the page-level refresh is in flight (skeleton on first load). */
+  loading: boolean
   onSelect: (bank: string) => void
   onCreate: (name: string) => Promise<boolean>
   creating: boolean
@@ -20,36 +23,67 @@ interface BankRailProps {
 export function BankRail({
   banks,
   selected,
+  loading,
   onSelect,
   onCreate,
   creating,
 }: BankRailProps) {
   const [draft, setDraft] = useState('')
   const valid = /^[a-z0-9][a-z0-9_-]{0,63}$/.test(draft)
+  const initialLoad = loading && banks.length === 0
 
   return (
-    <aside className="mem-rail">
-      <div className="mem-rail-head">
-        <span className="mem-rail-caption">banks</span>
-      </div>
-      <div className="mem-rail-list">
-        {banks.map((bank) => (
-          <button
-            key={bank.name}
-            type="button"
-            onClick={() => onSelect(bank.name)}
-            className={`mem-rail-item${selected === bank.name ? ' active' : ''}`}
-          >
-            <span className="mem-rail-name">{bank.name}</span>
-            <span className="mem-rail-meta">
-              {bank.memories} memories · {bank.pinned} pinned · {bank.rules}{' '}
-              rules
-            </span>
-          </button>
-        ))}
+    <aside className="mem-ui-rail" aria-label="bank list">
+      <header className="mem-ui-col-head">
+        <span className="label">banks</span>
+        <span className="spacer" />
+        {initialLoad ? null : <span className="count">{banks.length}</span>}
+      </header>
+      <div className="mem-ui-rail-scroll">
+        {initialLoad ? (
+          <div className="mem-ui-rail-skel" aria-hidden>
+            {[
+              [60, 90],
+              [40, 80],
+              [70, 90],
+            ].map(([a, b]) => (
+              <div key={`${a}-${b}`} className="mem-ui-skel-row">
+                <span className={`bar w${a}`} />
+                <span className={`bar w${b}`} />
+              </div>
+            ))}
+          </div>
+        ) : banks.length === 0 ? (
+          <div className="mem-ui-rail-empty">
+            <p>No banks yet.</p>
+            <p className="dim">
+              Create one below, or just chat: the default bank materializes
+              when the first memory is saved.
+            </p>
+          </div>
+        ) : (
+          <ul className="mem-ui-nav-list">
+            {banks.map((bank) => (
+              <li key={bank.name}>
+                <button
+                  type="button"
+                  className={`mem-ui-nav-row${selected === bank.name ? ' active' : ''}`}
+                  aria-current={selected === bank.name ? 'true' : undefined}
+                  onClick={() => onSelect(bank.name)}
+                >
+                  <span className="name">{bank.name}</span>
+                  <span className="fine">
+                    {bank.memories} memories · {bank.pinned} pinned ·{' '}
+                    {bank.rules} rules
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
       <form
-        className="mem-rail-form"
+        className="mem-ui-rail-form"
         onSubmit={(e) => {
           e.preventDefault()
           if (!valid || creating) return
@@ -63,7 +97,7 @@ export function BankRail({
           onChange={setDraft}
           placeholder="new bank"
           aria-label="new bank name"
-          className="mem-rail-input"
+          className="mem-ui-rail-input"
         />
         <Button
           type="submit"
diff --git a/memory/ui/src/page/MemoriesPanel.tsx b/memory/ui/src/page/MemoriesPanel.tsx
index e4a7a9d05..f922e927d 100644
--- a/memory/ui/src/page/MemoriesPanel.tsx
+++ b/memory/ui/src/page/MemoriesPanel.tsx
@@ -12,13 +12,16 @@ import {
   X,
 } from './icons'
 import { type MemoryItem, recall } from './memory-data'
+import { useDirtyDelta } from './widgets'
 
 /**
  * The selected bank's memories, built for large banks: server-side pages of
  * `pageSize` (newest first) with explicit paging controls, and a search
  * box that runs `memory::recall` (the ranked scorer, not a client filter)
  * so finding one memory among 10k costs one call. Every row is editable in
- * place: pin, edit text (revision bump), tombstone delete.
+ * place: pin, edit text (revision bump), tombstone delete. In-place edits
+ * and the new-memory draft report into the page-level dirty guard; rows
+ * are keyed by memory id, so an open edit survives live refreshes.
  */
 
 /** "2h ago" style relative time; day precision past a week. */
@@ -65,6 +68,7 @@ interface MemoriesPanelProps {
   onEdit: (memory: MemoryItem, text: string) => Promise<boolean>
   onDelete: (memory: MemoryItem) => void
   busy: boolean
+  reportDirty: (delta: number) => void
 }
 
 function FactRow({
@@ -75,6 +79,7 @@ function FactRow({
   onOpenChat,
   busy,
   score,
+  reportDirty,
 }: {
   memory: MemoryItem
   onPin: (memory: MemoryItem) => void
@@ -83,18 +88,22 @@ function FactRow({
   onOpenChat: (sessionId: string) => void
   busy: boolean
   score?: number
+  reportDirty: (delta: number) => void
 }) {
   const [editing, setEditing] = useState(false)
   const [editText, setEditText] = useState(memory.text)
   const superseded = memory.invalid_at != null
+  // An open edit with changed text guards navigation; the row is keyed by
+  // memory id, so the draft itself survives live refreshes.
+  useDirtyDelta(editing && editText !== memory.text, reportDirty)
 
   return (
     <li
-      className={`mem-fact${memory.pinned ? ' pinned' : ''}${superseded ? ' superseded' : ''}`}
+      className={`mem-ui-fact${memory.pinned ? ' pinned' : ''}${superseded ? ' superseded' : ''}`}
     >
       {editing ? (
         <form
-          className="mem-row"
+          className="mem-ui-row"
           onSubmit={(e) => {
             e.preventDefault()
             const text = editText.trim()
@@ -109,7 +118,7 @@ function FactRow({
             onChange={setEditText}
             preserveCase
             aria-label="edit memory"
-            className="mem-flex1"
+            className="mem-ui-flex1"
           />
           <Button type="submit" variant="primary" size="sm">
             save
@@ -124,21 +133,21 @@ function FactRow({
           </Button>
         </form>
       ) : (
-        <p className="mem-fact-text">{memory.text}</p>
+        <p className="mem-ui-fact-text">{memory.text}</p>
       )}
-      <div className="mem-fact-meta">
+      <div className="mem-ui-fact-meta">
         {score !== undefined ? (
-          <span className="mem-score">{score.toFixed(2)}</span>
+          <span className="mem-ui-score">{score.toFixed(2)}</span>
         ) : null}
         {memory.entities.map((entity) => (
           <Badge key={entity}>{entity}</Badge>
         ))}
         {memory.tags.map((tag) => (
-          <span key={tag} className="mem-tag">
+          <span key={tag} className="mem-ui-tag">
             #{tag}
           </span>
         ))}
-        <span className="mem-meta-note">
+        <span className="mem-ui-meta-note">
           {timeAgo(memory.created_at)}
           {memory.corroboration > 0 && ` · seen ×${memory.corroboration + 1}`}
           {memory.confidence === 'stated' && ' · saved explicitly'}
@@ -149,13 +158,13 @@ function FactRow({
             type="button"
             onClick={() => onOpenChat(memory.source?.session_id ?? '')}
             title="open the conversation this memory came from"
-            className="mem-fromchat"
+            className="mem-ui-fromchat"
           >
             <MessageSquare size={12} aria-hidden />
             from chat
           </button>
         ) : null}
-        <span className="mem-spacer" />
+        <span className="mem-ui-spacer" />
         <Button
           variant="icon"
           size="icon"
@@ -220,6 +229,7 @@ export function MemoriesPanel({
   onEdit,
   onDelete,
   busy,
+  reportDirty,
 }: MemoriesPanelProps) {
   const [draft, setDraft] = useState('')
   const [query, setQuery] = useState('')
@@ -227,6 +237,8 @@ export function MemoriesPanel({
     { memory: MemoryItem; score: number }[] | null
   >(null)
   const [searching, setSearching] = useState(false)
+  // A typed-but-unsaved new memory is worth a confirm before navigating.
+  useDirtyDelta(draft.trim().length > 0, reportDirty)
 
   const searchMode = results !== null
 
@@ -259,8 +271,8 @@ export function MemoriesPanel({
   const maxBucket = Math.max(1, ...buckets)
 
   return (
-    <div className="mem-stack">
-      <p className="mem-hint">
+    <div className="mem-ui-stack">
+      <p className="mem-ui-hint">
         one line per durable thing said in chat — captured automatically after
         each turn, each with the conversation it came from. a memory reaches
         the agent only when it matches the question being asked; rules are the
@@ -268,26 +280,26 @@ export function MemoriesPanel({
       </p>
 
       {total > 0 ? (
-        <div className="mem-activity">
-          <div className="mem-bars" aria-hidden>
+        <div className="mem-ui-activity">
+          <div className="mem-ui-bars" aria-hidden>
             {buckets.map((count, i) => (
               <span
                 // biome-ignore lint/suspicious/noArrayIndexKey: fixed-size day series
                 key={i}
-                className={`mem-bar${count > 0 ? ' on' : ''}`}
+                className={`mem-ui-bar${count > 0 ? ' on' : ''}`}
                 style={{
                   height: `${count > 0 ? Math.max(15, Math.round((count / maxBucket) * 100)) : 6}%`,
                 }}
               />
             ))}
           </div>
-          <div className="mem-activity-text">
-            <span className="mem-activity-count">
+          <div className="mem-ui-activity-text">
+            <span className="mem-ui-activity-count">
               {capturedThisWeek > 0
                 ? `${capturedThisWeek} captured this week`
                 : 'nothing captured this week'}
             </span>
-            <span className="mem-subhint">
+            <span className="mem-ui-subhint">
               last 30 days · {total} total · chat and this page stay in sync
               live
             </span>
@@ -296,7 +308,7 @@ export function MemoriesPanel({
       ) : null}
 
       <form
-        className="mem-row"
+        className="mem-ui-row"
         onSubmit={(e) => {
           e.preventDefault()
           const text = draft.trim()
@@ -312,7 +324,7 @@ export function MemoriesPanel({
           preserveCase
           placeholder="remember something..."
           aria-label="new memory"
-          className="mem-flex1"
+          className="mem-ui-flex1"
         />
         <Button
           type="submit"
@@ -325,7 +337,7 @@ export function MemoriesPanel({
       </form>
 
       <form
-        className="mem-row"
+        className="mem-ui-row"
         onSubmit={(e) => {
           e.preventDefault()
           void runSearch()
@@ -340,14 +352,14 @@ export function MemoriesPanel({
           preserveCase
           placeholder={`search ${total} memories (ranked recall)...`}
           aria-label="search memories"
-          className="mem-flex1"
+          className="mem-ui-flex1"
         />
         <Button
           type="submit"
           variant="ghost"
           size="sm"
           disabled={!query.trim() || searching}
-          className="mem-gap1"
+          className="mem-ui-gap1"
         >
           <Search size={14} aria-hidden />
           search
@@ -361,7 +373,7 @@ export function MemoriesPanel({
               setQuery('')
               setResults(null)
             }}
-            className="mem-gap1"
+            className="mem-ui-gap1"
           >
             <X size={14} aria-hidden />
             clear
@@ -370,14 +382,14 @@ export function MemoriesPanel({
       </form>
 
       {tags.length > 0 ? (
-        <div className="mem-row wrap">
-          <span className="mem-caption">tags</span>
+        <div className="mem-ui-row wrap">
+          <span className="mem-ui-caption">tags</span>
           {tags.map(({ tag: t, count }) => (
             <button
               key={t}
               type="button"
               onClick={() => onTagChange(tag === t ? null : t)}
-              className={`mem-tagbtn${tag === t ? ' active' : ''}`}
+              className={`mem-ui-tagbtn${tag === t ? ' active' : ''}`}
             >
               #{t} · {count}
             </button>
@@ -386,7 +398,7 @@ export function MemoriesPanel({
             <button
               type="button"
               onClick={() => onTagChange(null)}
-              className="mem-linklike"
+              className="mem-ui-linkish quiet"
             >
               clear
             </button>
@@ -394,15 +406,15 @@ export function MemoriesPanel({
         </div>
       ) : null}
 
-      <div className="mem-spread wrap">
-        <span className="mem-hint">
+      <div className="mem-ui-spread wrap">
+        <span className="mem-ui-hint">
           {searchMode
             ? `${results.length} matches (top 50 by score)`
             : `${total} memories · page ${page}/${pages}`}
         </span>
-        <div className="mem-row">
+        <div className="mem-ui-row">
           {!searchMode && pages > 1 ? (
-            <span className="mem-row tight">
+            <span className="mem-ui-row tight">
               <Button
                 variant="icon"
                 size="icon"
@@ -423,7 +435,7 @@ export function MemoriesPanel({
               </Button>
             </span>
           ) : null}
-          <label className="mem-check">
+          <label className="mem-ui-check">
             <input
               type="checkbox"
               checked={includeSuperseded}
@@ -441,7 +453,7 @@ export function MemoriesPanel({
             description="recall matches on words and entity handles. try different terms or clear the search."
           />
         ) : (
-          <ul className="mem-fact-list">
+          <ul className="mem-ui-fact-list">
             {results.map(({ memory, score }) => (
               <FactRow
                 key={memory.id}
@@ -452,6 +464,7 @@ export function MemoriesPanel({
                 onDelete={onDelete}
                 onOpenChat={onOpenChat}
                 busy={busy}
+                reportDirty={reportDirty}
               />
             ))}
           </ul>
@@ -462,7 +475,7 @@ export function MemoriesPanel({
           description="pick this bank in the chat composer, then just talk — say something durable ('our api port is 3111') and it appears here after the turn, linked to that conversation. or type one above."
         />
       ) : (
-        <ul className="mem-fact-list">
+        <ul className="mem-ui-fact-list">
           {memories.map((memory) => (
             <FactRow
               key={memory.id}
@@ -472,6 +485,7 @@ export function MemoriesPanel({
               onDelete={onDelete}
               onOpenChat={onOpenChat}
               busy={busy}
+              reportDirty={reportDirty}
             />
           ))}
         </ul>
diff --git a/memory/ui/src/page/MemoryGraph.tsx b/memory/ui/src/page/MemoryGraph.tsx
index 23d649c49..cdefda903 100644
--- a/memory/ui/src/page/MemoryGraph.tsx
+++ b/memory/ui/src/page/MemoryGraph.tsx
@@ -335,23 +335,23 @@ export function MemoryGraph({
   }
 
   return (
-    <div className="mem-graph">
-      <div className="mem-row wrap">
+    <div className="mem-ui-graph">
+      <div className="mem-ui-row wrap">
         <Input
           value={filter}
           onChange={setFilter}
           placeholder="focus entities..."
           aria-label="filter entities"
-          className="mem-graph-filter"
+          className="mem-ui-graph-filter"
         />
-        <span className="mem-hint">
+        <span className="mem-ui-hint">
           {layout.hubs.length} entities
           {layout.hiddenHubs > 0 &&
             ` (top ${MAX_HUBS} shown, ${layout.hiddenHubs} more — search to focus)`}
           {totalFacts > live.length &&
             ` · mapping newest ${live.length} of ${totalFacts} memories`}
         </span>
-        <span className="mem-spacer" />
+        <span className="mem-ui-spacer" />
         <Button variant="ghost" size="sm" onClick={() => setView(null)}>
           fit
         </Button>
@@ -376,11 +376,11 @@ export function MemoryGraph({
         ) : null}
       </div>
 
-      <div className="mem-graph-canvas">
+      <div className="mem-ui-graph-canvas">
         <svg
           ref={svgRef}
           viewBox={`${vb.x} ${vb.y} ${vb.w} ${vb.h}`}
-          className="mem-graph-svg"
+          className="mem-ui-graph-svg"
           role="img"
           aria-label="memory graph: entity hubs and memory nodes"
           onWheel={(e) => {
@@ -479,7 +479,7 @@ export function MemoryGraph({
               role="button"
               tabIndex={0}
               aria-label={`entity ${hub.entity}: ${hub.count} memories`}
-              className="mem-node"
+              className="mem-ui-node"
               onPointerDown={(e) => startNodeDrag(e, `h:${hub.entity}`)}
               onClick={() => {
                 if (wasDrag() || autoExpand) return
@@ -573,7 +573,7 @@ export function MemoryGraph({
               role="button"
               tabIndex={0}
               aria-label={`memory: ${memory.text.slice(0, 60)}`}
-              className="mem-node"
+              className="mem-ui-node"
               onPointerDown={(e) => startNodeDrag(e, `f:${memory.id}:${hub}`)}
               onClick={(e) => {
                 e.stopPropagation()
@@ -630,7 +630,7 @@ export function MemoryGraph({
               role="button"
               tabIndex={0}
               aria-label={`${m.hidden} more memories for ${m.hub} — open the memories tab`}
-              className="mem-more"
+              className="mem-ui-more"
               onClick={onShowFacts}
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
@@ -659,23 +659,23 @@ export function MemoryGraph({
           ))}
         </svg>
 
-        <div className="mem-legend">
-          <span className="mem-legend-item">
-            <span className="mem-swatch entity" /> entity (click to expand)
+        <div className="mem-ui-legend">
+          <span className="mem-ui-legend-item">
+            <span className="mem-ui-swatch entity" /> entity (click to expand)
           </span>
-          <span className="mem-legend-item">
-            <span className="mem-swatch memory" /> memory
+          <span className="mem-ui-legend-item">
+            <span className="mem-ui-swatch memory" /> memory
           </span>
-          <span className="mem-legend-item">
-            <span className="mem-swatch pinned" /> pinned
+          <span className="mem-ui-legend-item">
+            <span className="mem-ui-swatch pinned" /> pinned
           </span>
           <span>wheel: zoom · drag: pan</span>
         </div>
 
         {selected ? (
-          <div className="mem-card">
-            <div className="mem-card-head">
-              <p className="mem-card-text">{selected.text}</p>
+          <div className="mem-ui-card">
+            <div className="mem-ui-card-head">
+              <p className="mem-ui-card-text">{selected.text}</p>
               <Button
                 variant="icon"
                 size="icon"
@@ -685,23 +685,23 @@ export function MemoryGraph({
                 <X size={14} aria-hidden />
               </Button>
             </div>
-            <div className="mem-row wrap">
+            <div className="mem-ui-row wrap">
               {selected.entities.map((entity) => (
                 <Badge key={entity}>{entity}</Badge>
               ))}
-              <span className="mem-subhint">
+              <span className="mem-ui-subhint">
                 {selected.confidence}
                 {selected.corroboration > 0 &&
                   ` · seen ×${selected.corroboration + 1}`}
               </span>
             </div>
-            <div className="mem-row">
+            <div className="mem-ui-row">
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={() => onPin(selected)}
                 disabled={busy}
-                className="mem-gap1"
+                className="mem-ui-gap1"
               >
                 {selected.pinned ? (
                   <>
@@ -721,7 +721,7 @@ export function MemoryGraph({
                   setSelectedId(null)
                 }}
                 disabled={busy}
-                className="mem-gap1"
+                className="mem-ui-gap1"
               >
                 <Trash2 size={12} aria-hidden /> delete
               </Button>
diff --git a/memory/ui/src/page/ModeToggle.tsx b/memory/ui/src/page/ModeToggle.tsx
index 2d9aa3598..b50296bbf 100644
--- a/memory/ui/src/page/ModeToggle.tsx
+++ b/memory/ui/src/page/ModeToggle.tsx
@@ -28,7 +28,7 @@ export function ModeToggle<T extends string>({
   'aria-label': ariaLabel,
 }: ModeToggleProps<T>) {
   return (
-    <div className="mem-modes" role="tablist" aria-label={ariaLabel}>
+    <div className="mem-ui-seg" role="tablist" aria-label={ariaLabel}>
       {options.map((opt) => {
         const active = opt.value === value
         return (
@@ -38,7 +38,7 @@ export function ModeToggle<T extends string>({
             role="tab"
             aria-selected={active}
             title={opt.title}
-            className={`mem-mode${active ? ' active' : ''}`}
+            className={`mem-ui-seg-btn${active ? ' active' : ''}`}
             onClick={() => onChange(opt.value)}
           >
             {opt.label}
diff --git a/memory/ui/src/page/RecallPanel.tsx b/memory/ui/src/page/RecallPanel.tsx
index 93d8aa96a..985ccba89 100644
--- a/memory/ui/src/page/RecallPanel.tsx
+++ b/memory/ui/src/page/RecallPanel.tsx
@@ -71,15 +71,15 @@ export function RecallPanel({ host, bank, memories, tags }: RecallPanelProps) {
   const maxScore = result?.memories[0]?.score || 1
 
   return (
-    <div className="mem-stack">
-      <p className="mem-hint">
+    <div className="mem-ui-stack">
+      <p className="mem-ui-hint">
         the whole turn, before it happens: type what someone would ask in chat
         and see everything memory hands that turn — the rules going into the
         system prompt (budgets and truncation applied) and the exact memories
         appended, in order. same code the live hook runs.
       </p>
       <form
-        className="mem-row"
+        className="mem-ui-row"
         onSubmit={(e) => {
           e.preventDefault()
           void run(query)
@@ -91,14 +91,14 @@ export function RecallPanel({ host, bank, memories, tags }: RecallPanelProps) {
           preserveCase
           placeholder="ask like a chat user would — e.g. when do I publish?"
           aria-label="turn preview query"
-          className="mem-flex1"
+          className="mem-ui-flex1"
         />
         <Button
           type="submit"
           variant="primary"
           size="sm"
           disabled={!query.trim() || running}
-          className="mem-gap1"
+          className="mem-ui-gap1"
         >
           <Search size={14} aria-hidden />
           preview turn
@@ -106,8 +106,8 @@ export function RecallPanel({ host, bank, memories, tags }: RecallPanelProps) {
       </form>
 
       {result === null && !error ? (
-        <div className="mem-row wrap">
-          <span className="mem-caption">try</span>
+        <div className="mem-ui-row wrap">
+          <span className="mem-ui-caption">try</span>
           {examples.map((example) => (
             <button
               key={example}
@@ -116,7 +116,7 @@ export function RecallPanel({ host, bank, memories, tags }: RecallPanelProps) {
                 setQuery(example)
                 void run(example)
               }}
-              className="mem-tagbtn"
+              className="mem-ui-tagbtn"
             >
               {example}
             </button>
@@ -124,31 +124,31 @@ export function RecallPanel({ host, bank, memories, tags }: RecallPanelProps) {
         </div>
       ) : null}
 
-      {error ? <p className="mem-error-text">{error}</p> : null}
+      {error ? <p className="mem-ui-error-text">{error}</p> : null}
 
       {result !== null && !error ? (
-        <div className="mem-stack">
-          <div className="mem-prompt">
+        <div className="mem-ui-stack">
+          <div className="mem-ui-prompt">
             <button
               type="button"
               onClick={() => setShowPrompt((v) => !v)}
-              className="mem-prompt-head"
+              className="mem-ui-prompt-head"
             >
               {showPrompt ? (
                 <ChevronDown size={14} style={ghost} aria-hidden />
               ) : (
                 <ChevronRight size={14} style={ghost} aria-hidden />
               )}
-              <span className="mem-prompt-label">
+              <span className="mem-ui-prompt-label">
                 system prompt gets: {result.rules} rule
                 {result.rules === 1 ? '' : 's'}
                 {result.rulesTruncated ? ' · over budget, truncated' : ''}
               </span>
-              <span className="mem-spacer" />
-              <span className="mem-subhint">every turn, guaranteed</span>
+              <span className="mem-ui-spacer" />
+              <span className="mem-ui-subhint">every turn, guaranteed</span>
             </button>
             {showPrompt ? (
-              <pre className="mem-prompt-body">
+              <pre className="mem-ui-prompt-body">
                 {result.systemPromptSection.trim()}
               </pre>
             ) : null}
@@ -160,34 +160,34 @@ export function RecallPanel({ host, bank, memories, tags }: RecallPanelProps) {
               description="nothing in this bank matches this question and nothing is strong enough for the ambient floor. the rules above still land."
             />
           ) : (
-            <div className="mem-stack tight">
-              <span className="mem-subhint">
+            <div className="mem-ui-stack tight">
+              <span className="mem-ui-subhint">
                 appended to the turn ({result.memories.length}, in order) ·
                 retrieval: {result.retrieval || 'bm25-entity'}
               </span>
-              <ul className="mem-fact-list">
+              <ul className="mem-ui-fact-list">
                 {result.memories.map(({ memory, score }) => (
-                  <li key={memory.id} className="mem-recall-item">
-                    <div className="mem-row">
+                  <li key={memory.id} className="mem-ui-recall-item">
+                    <div className="mem-ui-row">
                       <span
-                        className={`mem-scorebar${score > 0 ? ' on' : ''}`}
+                        className={`mem-ui-scorebar${score > 0 ? ' on' : ''}`}
                         style={{
                           width: `${Math.max(4, Math.round((score / maxScore) * 64))}px`,
                         }}
                         aria-hidden
                       />
-                      <span className="mem-score">
+                      <span className="mem-ui-score">
                         {score > 0 ? score.toFixed(2) : 'ambient'}
                       </span>
                       {memory.pinned ? (
                         <Badge variant="accent">pinned</Badge>
                       ) : null}
                     </div>
-                    <p className="mem-fact-text">{memory.text}</p>
+                    <p className="mem-ui-fact-text">{memory.text}</p>
                   </li>
                 ))}
               </ul>
-              <p className="mem-subhint">
+              <p className="mem-ui-subhint">
                 "ambient" = didn't match the question, but strong enough that
                 every turn gets it (pinned and most-seen memories)
               </p>
diff --git a/memory/ui/src/page/RulesPanel.tsx b/memory/ui/src/page/RulesPanel.tsx
index f2361677f..c1f4d139b 100644
--- a/memory/ui/src/page/RulesPanel.tsx
+++ b/memory/ui/src/page/RulesPanel.tsx
@@ -2,19 +2,22 @@ import { useEffect, useState } from 'react'
 import { Button, CodeEditor, EmptyState, Input } from '@iii-dev/console-ui'
 import { Plus, X } from './icons'
 import type { MemoryRule } from './memory-data'
+import { useDirtyDelta } from './widgets'
 
 /**
  * The bank's markdown rules — injected whole into the system prompt of
  * every session using this bank. Each rule is a plain `.md` file on disk;
  * editing here and editing the file are equivalent. Saving empty content
  * removes a rule. Editing uses the console's shared Monaco `CodeEditor`
- * (never a bundled editor).
+ * (never a bundled editor); ⌘S in an editor saves that rule. Dirty
+ * editors report into the page-level guard so navigating away asks first.
  */
 
 interface RulesPanelProps {
   rules: MemoryRule[]
   onSet: (name: string, content: string) => Promise<boolean>
   busy: boolean
+  reportDirty: (delta: number) => void
 }
 
 function RuleEditor({
@@ -22,11 +25,13 @@ function RuleEditor({
   initial,
   onSet,
   busy,
+  reportDirty,
 }: {
   name: string
   initial: string
   onSet: (name: string, content: string) => Promise<boolean>
   busy: boolean
+  reportDirty: (delta: number) => void
 }) {
   const [content, setContent] = useState(initial)
   // Re-seed the editor when a live refresh changes the rule on disk and
@@ -41,28 +46,28 @@ function RuleEditor({
   }, [initial, touched, content])
 
   const dirty = content !== initial
+  useDirtyDelta(dirty, reportDirty)
+
+  const save = () => {
+    if (!dirty || busy) return
+    // Emptied content means delete — that path gets the explicit
+    // confirm, never a silent removal via save.
+    if (content.trim() === '') {
+      setConfirmDelete(true)
+      return
+    }
+    void onSet(name, content)
+  }
+
   return (
-    <div className="mem-rule">
-      <div className="mem-rule-head">
-        <span className="mem-rule-name">{name}.md</span>
-        <div className="mem-rule-actions">
+    <div className="mem-ui-rule">
+      <div className="mem-ui-rule-head">
+        <span className="mem-ui-rule-name">{name}.md</span>
+        <div className="mem-ui-rule-actions">
           {dirty ? (
             <>
-              <span className="mem-unsaved">unsaved</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                disabled={busy}
-                onClick={() => {
-                  // Emptied content means delete — that path gets the
-                  // explicit confirm, never a silent removal via save.
-                  if (content.trim() === '') {
-                    setConfirmDelete(true)
-                    return
-                  }
-                  void onSet(name, content)
-                }}
-              >
+              <span className="mem-ui-unsaved">unsaved</span>
+              <Button variant="ghost" size="sm" disabled={busy} onClick={save}>
                 save
               </Button>
             </>
@@ -73,7 +78,7 @@ function RuleEditor({
                 variant="ghost"
                 size="sm"
                 disabled={busy}
-                className="mem-danger"
+                className="mem-ui-danger"
                 onClick={() => {
                   void onSet(name, '')
                   setConfirmDelete(false)
@@ -102,7 +107,7 @@ function RuleEditor({
           )}
         </div>
       </div>
-      <div className="mem-rule-editor">
+      <div className="mem-ui-rule-editor">
         <CodeEditor
           value={content}
           onChange={(next) => {
@@ -111,8 +116,16 @@ function RuleEditor({
           }}
           language="markdown"
           aria-label={`rule ${name}`}
-          className="mem-editor"
+          className="mem-ui-editor"
           placeholder="empty the content and save to remove this rule (asks to confirm)"
+          onKeyDown={(e) => {
+            // Observes keys bubbling out of Monaco — editing keys never
+            // reach here; ⌘S saves this rule in place.
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+              e.preventDefault()
+              save()
+            }
+          }}
         />
       </div>
     </div>
@@ -132,14 +145,19 @@ function slugifyRuleName(raw: string): string {
     .replace(/[-_]+$/, '')
 }
 
-export function RulesPanel({ rules, onSet, busy }: RulesPanelProps) {
+export function RulesPanel({
+  rules,
+  onSet,
+  busy,
+  reportDirty,
+}: RulesPanelProps) {
   const [newName, setNewName] = useState('')
   const validName = /^[a-z0-9][a-z0-9_-]{0,63}$/.test(newName)
   const suggestion = validName ? '' : slugifyRuleName(newName)
 
   return (
-    <div className="mem-stack">
-      <p className="mem-hint">
+    <div className="mem-ui-stack">
+      <p className="mem-ui-hint">
         every chat on this bank starts with these — word for word, every turn.
         put what must always hold here: voice, conventions, constants. correct
         the agent in chat ("stop using em-dashes") and the correction lands in
@@ -159,11 +177,12 @@ export function RulesPanel({ rules, onSet, busy }: RulesPanelProps) {
             initial={rule.content}
             onSet={onSet}
             busy={busy}
+            reportDirty={reportDirty}
           />
         ))
       )}
       <form
-        className="mem-stack tight"
+        className="mem-ui-stack tight"
         onSubmit={(e) => {
           e.preventDefault()
           if (busy) return
@@ -174,27 +193,27 @@ export function RulesPanel({ rules, onSet, busy }: RulesPanelProps) {
           })
         }}
       >
-        <div className="mem-row">
+        <div className="mem-ui-row">
           <Input
             value={newName}
             onChange={setNewName}
             placeholder="name the rule first (e.g. style) — content goes in the editor after"
             aria-label="new rule name"
-            className="mem-flex1"
+            className="mem-ui-flex1"
           />
           <Button
             type="submit"
             variant="ghost"
             size="sm"
             disabled={busy || (!validName && !suggestion)}
-            className="mem-gap1"
+            className="mem-ui-gap1"
           >
             <Plus size={14} aria-hidden />
             add rule
           </Button>
         </div>
         {newName && !validName ? (
-          <p className="mem-subhint">
+          <p className="mem-ui-subhint">
             {suggestion
               ? `names are lowercase-with-dashes (it becomes ${suggestion}.md) — adding will create "${suggestion}"; paste the content into its editor after`
               : 'names are lowercase letters, numbers, and dashes — like style or coding-rules'}
diff --git a/memory/ui/src/page/icons.tsx b/memory/ui/src/page/icons.tsx
index 693e1f2e8..4d80240e9 100644
--- a/memory/ui/src/page/icons.tsx
+++ b/memory/ui/src/page/icons.tsx
@@ -3,8 +3,8 @@
  * (nothing is bundled but zod), so the handful of glyphs the ported components
  * used are hand-drawn here. Every icon inherits `currentColor` and takes a
  * numeric `size` (Tailwind `w-*`/`h-*` classes don't apply in injected UI).
- * `className` is accepted so components like the console's `StatusPanel` /
- * `EmptyState`, which pass one, type-check.
+ * `className` is accepted for page styling (spin animation, hero icon) and so
+ * console components that pass one (e.g. `EmptyState`'s `icon`) type-check.
  */
 
 import type { CSSProperties, ReactNode } from 'react'
@@ -63,15 +63,6 @@ export function RefreshCw(props: IconProps) {
   )
 }
 
-export function AlertCircle(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 8v4M12 16h.01" />
-    </Svg>
-  )
-}
-
 export function Brain(props: IconProps) {
   return (
     <Svg {...props}>
diff --git a/memory/ui/src/page/index.tsx b/memory/ui/src/page/index.tsx
index 2c2bb1102..472667082 100644
--- a/memory/ui/src/page/index.tsx
+++ b/memory/ui/src/page/index.tsx
@@ -1,7 +1,38 @@
-import { useCallback, useState } from 'react'
-import { Button, type Host, StatusDot, StatusPanel } from '@iii-dev/console-ui'
+/**
+ * The memory page (#/ext/memory): the standard page chrome (PageShell/
+ * PageHeader from @iii-dev/console-ui) over the bank rail (navigation
+ * column) and the selected bank's workspace — rules, memories, graph, and
+ * turn preview behind one segmented control in the workspace header.
+ * Everything re-reads live off `memory::item-changed` /
+ * `memory::bank-changed` (poll fallback while bindings are unavailable,
+ * see useMemoryLive). Memory that acts visibly, not magically — watch a
+ * memory appear the moment it's learned.
+ *
+ * Layout adapts to the width the page HAS (a ResizeObserver on its own
+ * body, not a viewport media query — the console can host it in panes of
+ * any size). Under NARROW_BELOW px it becomes a drill-in flow: the bank
+ * list fills the width, opening a bank swaps in its workspace with a ←
+ * back button.
+ *
+ * Unsaved edits anywhere (rule editors, in-place memory edits, the
+ * new-memory draft) count into one page-level guard; bank/panel/back
+ * navigation asks before discarding them.
+ *
+ * No presence gate: the host only mounts this page while the memory worker's
+ * script is loaded, which already tracks worker connectedness via trigger GC.
+ */
+
+import { useCallback, useRef, useState } from 'react'
+import {
+  Button,
+  type Host,
+  PageHeader,
+  type PageRenderProps,
+  PageShell,
+  StatusDot,
+} from '@iii-dev/console-ui'
 import { BankRail } from './BankRail'
-import { AlertCircle, Brain, RefreshCw } from './icons'
+import { Brain, RefreshCw } from './icons'
 import {
   createBank,
   deleteMemory,
@@ -19,19 +50,11 @@ import { ModeToggle } from './ModeToggle'
 import { RecallPanel } from './RecallPanel'
 import { RulesPanel } from './RulesPanel'
 import { useMemoryLive } from './useMemoryLive'
+import { BackButton } from './widgets'
 
-/**
- * The memory worker's visible-and-editable surface (`#/ext/memory`): banks in
- * a left rail, the selected bank's memories (pin/edit/tombstone in place), a
- * schematic graph, its always-injected markdown rules, and a turn-preview dry
- * run. Everything re-reads live off `memory::item-changed` /
- * `memory::bank-changed` (poll fallback while bindings are unavailable).
- * Memory that acts visibly, not magically — watch a memory appear the moment
- * it's learned.
- *
- * No presence gate: the host only mounts this page while the memory worker's
- * script is loaded, which already tracks worker connectedness via trigger GC.
- */
+/** Container width (px) below which the page collapses to the drill-in
+ * banks ⇄ workspace flow. */
+const NARROW_BELOW = 800
 
 type Panel = 'memories' | 'graph' | 'rules' | 'recall'
 
@@ -44,7 +67,59 @@ const PANEL_OPTIONS: { value: Panel; label: string }[] = [
   { value: 'recall', label: 'preview' },
 ]
 
-export function MemoryPage({ host }: { host: Host }) {
+const isPanel = (v: string | null): v is Panel =>
+  v === 'rules' || v === 'memories' || v === 'graph' || v === 'recall'
+
+function readStored(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+function writeStored(key: string, value: string) {
+  try {
+    window.localStorage.setItem(key, value)
+  } catch {
+    /* private mode / quota — persistence is best-effort */
+  }
+}
+
+/** Observe the page body's own width. Returns a callback ref to put on
+ * the body plus whether it is currently narrower than `threshold` —
+ * container-driven, so the same page adapts inside any pane the console
+ * gives it. Measures synchronously on mount to avoid a wide-mode flash;
+ * zero widths (display:none) are ignored so a hidden page keeps its last
+ * real layout. */
+function useContainerNarrow(threshold: number): [(node: HTMLDivElement | null) => void, boolean] {
+  const [narrow, setNarrow] = useState(false)
+  const observerRef = useRef<ResizeObserver | null>(null)
+  const refCb = useCallback(
+    (node: HTMLDivElement | null) => {
+      observerRef.current?.disconnect()
+      observerRef.current = null
+      if (!node) return
+      const width = node.getBoundingClientRect().width
+      if (width > 0) setNarrow(width < threshold)
+      const observer = new ResizeObserver((entries) => {
+        const next = entries[0]?.contentRect.width
+        if (typeof next === 'number' && next > 0) setNarrow(next < threshold)
+      })
+      observer.observe(node)
+      observerRef.current = observer
+    },
+    [threshold],
+  )
+  return [refCb, narrow]
+}
+
+export function MemoryPage({
+  host,
+  panelSide = 'left',
+  tabId = '',
+  onRequestClose,
+}: { host: Host } & Partial<PageRenderProps>) {
   const {
     banks,
     selected,
@@ -66,10 +141,27 @@ export function MemoryPage({ host }: { host: Host }) {
     refresh,
   } = useMemoryLive(host)
 
-  const [panel, setPanel] = useState<Panel>('rules')
+  const storageKey = `memory-ui:${tabId || 'page'}`
+  const [panel, setPanelState] = useState<Panel>(() => {
+    const v = readStored(`${storageKey}:panel`)
+    return isPanel(v) ? v : 'rules'
+  })
   const [busy, setBusy] = useState(false)
   const [actionError, setActionError] = useState<string | null>(null)
 
+  const [rootRef, narrow] = useContainerNarrow(NARROW_BELOW)
+  // Narrow drill-in position: the bank list until the user opens one.
+  const [drilled, setDrilled] = useState(false)
+
+  // Open editors report unsaved edits up as +1/−1 deltas (several can be
+  // dirty at once); navigating away asks before discarding them.
+  const dirtyCount = useRef(0)
+  const reportDirty = useCallback((delta: number) => {
+    dirtyCount.current += delta
+  }, [])
+  const confirmDiscard = () =>
+    dirtyCount.current <= 0 || window.confirm('Discard unsaved changes?')
+
   // Resolves to whether the mutation landed, so children keep their
   // drafts when it did not (a failed save must not eat the input).
   const act = useCallback(
@@ -90,148 +182,222 @@ export function MemoryPage({ host }: { host: Host }) {
     [refresh],
   )
 
-  const bankLabel = loading ? '...' : `${banks.length} banks`
+  const setPanel = (next: Panel) => {
+    if (next === panel) return
+    if (!confirmDiscard()) return
+    setPanelState(next)
+    writeStored(`${storageKey}:panel`, next)
+  }
+
+  const openBank = (bank: string) => {
+    if (bank !== selected) {
+      if (!confirmDiscard()) return
+      setSelected(bank)
+    }
+    setDrilled(true)
+  }
+  const backToBanks = () => {
+    if (!confirmDiscard()) return
+    setDrilled(false)
+  }
+
+  const bankInfo = selected
+    ? (banks.find((b) => b.name === selected) ?? null)
+    : null
+
+  // Narrow: one pane at a time — the bank list, or the opened workspace.
+  const showRail = !narrow || !drilled || selected === null
+  const showDoc = !narrow || (drilled && selected !== null)
 
   return (
-    <div className="mem-page" aria-label="memory">
-      <header className="mem-header">
-        <div>
-          <h1 className="mem-h1">memory</h1>
-          <p className="mem-header-sub">{bankLabel}</p>
-        </div>
-        <div className="mem-row">
-          <span
-            className="mem-live"
-            title={
-              live
-                ? 'updates arrive on the memory trigger types'
-                : 'live bindings unavailable; refreshing on a timer'
-            }
-          >
-            <StatusDot tone={live ? 'accent' : 'ink'} pulse={live} />
-            {live ? 'live' : 'polling'}
-          </span>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => void act(() => reloadStore(host))}
-            disabled={loading || busy}
-            className="mem-gap1"
-            title="re-read every bank from disk — picks up hand-edited rules/memories files (live events already keep this page current otherwise)"
-          >
-            <RefreshCw
-              size={14}
-              className={loading || busy ? 'mem-spin' : undefined}
-              aria-hidden
-            />
-            reload from disk
-          </Button>
-        </div>
-      </header>
-
-      <div className="mem-body">
-        <BankRail
-          banks={banks}
-          selected={selected}
-          onSelect={setSelected}
-          onCreate={(name) => act(() => createBank(host, name))}
-          creating={busy}
-        />
-        <div className="mem-content">
-          {error ? (
-            <StatusPanel
-              variant="alert"
-              icon={<AlertCircle size={18} />}
-              headline="failed to load memory"
-              detail={error}
-            />
-          ) : !selected ? (
-            <div className="mem-empty-banks">
-              <Brain size={24} style={{ color: 'var(--color-ink-ghost)' }} aria-hidden />
-              <p className="mem-hint mem-center">
-                no banks yet — create one on the left, or just chat: the default
-                bank materializes when the first memory is saved
-              </p>
-            </div>
-          ) : (
-            <>
-              <div className="mem-spread">
-                <ModeToggle<Panel>
-                  value={panel}
-                  onChange={setPanel}
-                  options={PANEL_OPTIONS}
-                  aria-label="memory panel"
-                />
+    <PageShell className="mem-ui-shell">
+      <PageHeader
+        icon={<Brain size={16} />}
+        title="memory"
+        description="banks of rules + memories, injected per turn"
+        actions={
+          <>
+            <span
+              className="mem-ui-live"
+              title={
+                live
+                  ? 'updates arrive on the memory trigger types'
+                  : 'live bindings unavailable; refreshing on a timer'
+              }
+            >
+              <StatusDot tone={live ? 'accent' : 'ink'} pulse={live} />
+              {live ? 'live' : 'polling'}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => void act(() => reloadStore(host))}
+              disabled={loading || busy}
+              className="mem-ui-gap1"
+              title="re-read every bank from disk — picks up hand-edited rules/memories files (live events already keep this page current otherwise)"
+            >
+              <RefreshCw
+                size={14}
+                className={loading || busy ? 'mem-ui-spin' : undefined}
+                aria-hidden
+              />
+              reload from disk
+            </Button>
+          </>
+        }
+        onClose={onRequestClose}
+      />
+
+      <div
+        className={`mem-ui-body${narrow ? ' narrow' : ''}${panelSide === 'right' ? ' right' : ''}`}
+        ref={rootRef}
+      >
+        {showRail ? (
+          <BankRail
+            banks={banks}
+            selected={selected}
+            loading={loading}
+            onSelect={openBank}
+            onCreate={(name) => act(() => createBank(host, name))}
+            creating={busy}
+          />
+        ) : null}
+
+        {showDoc ? (
+          <section className="mem-ui-doc" aria-label="bank workspace">
+            {error ? (
+              <div className="mem-ui-error-panel grow">
+                <p>
+                  memory could not be loaded.
+                  <span className="detail">{error}</span>
+                </p>
+                <Button variant="ghost" size="sm" onClick={refresh}>
+                  retry
+                </Button>
+              </div>
+            ) : selected === null ? (
+              <div className="mem-ui-hero">
+                <Brain size={28} className="mem-ui-hero-icon" aria-hidden />
+                <h2 className="mem-ui-hero-title">no banks yet</h2>
+                <p className="mem-ui-hero-body">
+                  create one on the left, or just chat: the default bank
+                  materializes when the first memory is saved.
+                </p>
+              </div>
+            ) : (
+              <>
+                <header className="mem-ui-doc-head">
+                  {narrow ? (
+                    <BackButton onClick={backToBanks} label="back to banks" />
+                  ) : null}
+                  <div className="mem-ui-doc-identity">
+                    <span className="mem-ui-doc-name" title={selected}>
+                      <span className="txt">{selected}</span>
+                    </span>
+                    {bankInfo ? (
+                      <span className="mem-ui-doc-crumb">
+                        {bankInfo.memories} memories · {bankInfo.pinned} pinned
+                        · {bankInfo.rules} rules
+                      </span>
+                    ) : null}
+                  </div>
+                  <ModeToggle<Panel>
+                    value={panel}
+                    onChange={setPanel}
+                    options={PANEL_OPTIONS}
+                    aria-label="memory panel"
+                  />
+                </header>
+
                 {actionError ? (
-                  <span className="mem-danger mem-truncate">{actionError}</span>
+                  <div className="mem-ui-banner alert" role="alert">
+                    <span>
+                      the last action failed.
+                      <span className="detail">{actionError}</span>
+                    </span>
+                    <button
+                      type="button"
+                      className="mem-ui-linkish quiet"
+                      onClick={() => setActionError(null)}
+                    >
+                      dismiss
+                    </button>
+                  </div>
                 ) : null}
-              </div>
-              {panel === 'memories' ? (
-                <MemoriesPanel
-                  key={selected}
-                  host={host}
-                  bank={selected}
-                  memories={memories}
-                  total={total}
-                  offset={offset}
-                  pageSize={pageSize}
-                  onOffsetChange={setOffset}
-                  includeSuperseded={includeSuperseded}
-                  onToggleSuperseded={setIncludeSuperseded}
-                  tag={tag}
-                  onTagChange={setTag}
-                  tags={tags}
-                  onOpenChat={openConversation}
-                  onSave={(text) => act(() => saveMemory(host, selected, text, false))}
-                  onPin={(memory: MemoryItem) =>
-                    void act(() =>
-                      pinMemory(host, selected, memory.id, !memory.pinned),
-                    )
-                  }
-                  onEdit={(memory, text) =>
-                    act(() => updateMemory(host, selected, memory.id, text))
-                  }
-                  onDelete={(memory) =>
-                    void act(() => deleteMemory(host, selected, memory.id))
-                  }
-                  busy={busy}
-                />
-              ) : panel === 'graph' ? (
-                <MemoryGraph
-                  memories={memories}
-                  totalFacts={total}
-                  onShowFacts={() => setPanel('memories')}
-                  onPin={(memory: MemoryItem) =>
-                    void act(() =>
-                      pinMemory(host, selected, memory.id, !memory.pinned),
-                    )
-                  }
-                  onDelete={(memory) =>
-                    void act(() => deleteMemory(host, selected, memory.id))
-                  }
-                  busy={busy}
-                />
-              ) : panel === 'rules' ? (
-                <RulesPanel
-                  rules={rules}
-                  onSet={(name, content) =>
-                    act(() => setRule(host, selected, name, content))
-                  }
-                  busy={busy}
-                />
-              ) : (
-                <RecallPanel
-                  key={selected}
-                  host={host}
-                  bank={selected}
-                  memories={memories}
-                  tags={tags}
-                />
-              )}
-            </>
-          )}
-        </div>
+
+                <div className="mem-ui-doc-scroll">
+                  {panel === 'memories' ? (
+                    <MemoriesPanel
+                      key={selected}
+                      host={host}
+                      bank={selected}
+                      memories={memories}
+                      total={total}
+                      offset={offset}
+                      pageSize={pageSize}
+                      onOffsetChange={setOffset}
+                      includeSuperseded={includeSuperseded}
+                      onToggleSuperseded={setIncludeSuperseded}
+                      tag={tag}
+                      onTagChange={setTag}
+                      tags={tags}
+                      onOpenChat={openConversation}
+                      onSave={(text) =>
+                        act(() => saveMemory(host, selected, text, false))
+                      }
+                      onPin={(memory: MemoryItem) =>
+                        void act(() =>
+                          pinMemory(host, selected, memory.id, !memory.pinned),
+                        )
+                      }
+                      onEdit={(memory, text) =>
+                        act(() => updateMemory(host, selected, memory.id, text))
+                      }
+                      onDelete={(memory) =>
+                        void act(() => deleteMemory(host, selected, memory.id))
+                      }
+                      busy={busy}
+                      reportDirty={reportDirty}
+                    />
+                  ) : panel === 'graph' ? (
+                    <MemoryGraph
+                      memories={memories}
+                      totalFacts={total}
+                      onShowFacts={() => setPanel('memories')}
+                      onPin={(memory: MemoryItem) =>
+                        void act(() =>
+                          pinMemory(host, selected, memory.id, !memory.pinned),
+                        )
+                      }
+                      onDelete={(memory) =>
+                        void act(() => deleteMemory(host, selected, memory.id))
+                      }
+                      busy={busy}
+                    />
+                  ) : panel === 'rules' ? (
+                    <RulesPanel
+                      rules={rules}
+                      onSet={(name, content) =>
+                        act(() => setRule(host, selected, name, content))
+                      }
+                      busy={busy}
+                      reportDirty={reportDirty}
+                    />
+                  ) : (
+                    <RecallPanel
+                      key={selected}
+                      host={host}
+                      bank={selected}
+                      memories={memories}
+                      tags={tags}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </section>
+        ) : null}
       </div>
-    </div>
+    </PageShell>
   )
 }
diff --git a/memory/ui/src/page/widgets.tsx b/memory/ui/src/page/widgets.tsx
new file mode 100644
index 000000000..59c3d858b
--- /dev/null
+++ b/memory/ui/src/page/widgets.tsx
@@ -0,0 +1,48 @@
+/**
+ * Small shared page widgets: the narrow-mode drill-out affordance and the
+ * dirty-delta reporter every in-place editor uses to join the page-level
+ * unsaved-changes guard.
+ */
+
+import { useEffect } from 'react'
+import { ChevronLeft } from './icons'
+
+/** Narrow-mode drill-out affordance (banks ← workspace). */
+export function BackButton({
+  onClick,
+  label,
+}: {
+  onClick: () => void
+  label: string
+}) {
+  return (
+    <button
+      type="button"
+      className="mem-ui-back"
+      onClick={onClick}
+      aria-label={label}
+      title={label}
+    >
+      <ChevronLeft size={16} aria-hidden />
+    </button>
+  )
+}
+
+/**
+ * Report a boolean dirty flag up as +1/−1 deltas. Several editors can be
+ * dirty at once (every rule has its own editor, every memory row can be
+ * mid-edit), so the page guards navigation with a counter, not a boolean —
+ * one editor saving must not release the guard for the others. The effect
+ * cleanup also runs on unmount, so a discarded editor always releases its
+ * slot. `report` must be referentially stable (the page's useCallback).
+ */
+export function useDirtyDelta(
+  dirty: boolean,
+  report: (delta: number) => void,
+) {
+  useEffect(() => {
+    if (!dirty) return
+    report(1)
+    return () => report(-1)
+  }, [dirty, report])
+}
diff --git a/memory/ui/styles.css b/memory/ui/styles.css
index 7f833baa7..dbc53d63e 100644
--- a/memory/ui/styles.css
+++ b/memory/ui/styles.css
@@ -5,451 +5,787 @@
  * boot. Every rule is scoped under `[data-iii-ui="memory"]`, the wrapper the
  * console mounts around every injected render. Styling uses the console's
  * design tokens, so light/dark theming is free; component chrome (Button,
- * Input, Badge, StatusPanel, CodeEditor, …) comes pre-styled from
+ * Input, Badge, StatusDot, CodeEditor, EmptyState, …) comes pre-styled from
  * @iii-dev/console-ui and is only given layout classes here.
+ *
+ * The page follows the console redesign's surface + typography roles:
+ *
+ *   navigation  --color-sidebar         the bank rail
+ *   workspace   --color-panel           the selected bank's panels
+ *   raised      --color-panel-raised    the workspace header
+ *   states      --color-surface-*       hover / selected washes
+ *   edges       --color-edge            hairline separation
+ *
+ *   sans (--font-sans)  interface prose: hints, memory text, banners,
+ *                       empty states
+ *   mono (--font-mono)  technical values: bank names, counts, tags,
+ *                       scores, rule filenames, the prompt dry run
  */
 
-/* ── page shell ─────────────────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-page {
+/* ── the page (#/ext/memory): application shell ─────────────────────── */
+
+[data-iii-ui="memory"] .mem-ui-shell {
+  min-height: 360px;
+  color: var(--color-ink);
+  font-family: var(--font-sans, system-ui, sans-serif);
+}
+
+/* live/polling chip in the page header's actions */
+[data-iii-ui="memory"] .mem-ui-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-faint);
+  white-space: nowrap;
+}
+
+[data-iii-ui="memory"] .mem-ui-spin {
+  animation: mem-ui-spin 1s linear infinite;
+}
+@keyframes mem-ui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── body: bank rail + workspace ────────────────────────────────────── */
+
+[data-iii-ui="memory"] .mem-ui-body {
+  flex: 1;
   display: flex;
-  flex-direction: column;
-  height: 100%;
   min-height: 0;
-  overflow: hidden;
-  font-family: var(--font-mono, ui-monospace, monospace);
-  color: var(--color-ink);
+  min-width: 0;
+  width: 100%;
+}
+/* Right-column pane: mirror so navigation hugs the pane's outer edge. */
+[data-iii-ui="memory"] .mem-ui-body.right {
+  flex-direction: row-reverse;
 }
-[data-iii-ui="memory"] .mem-header {
+
+/* ── navigation rail (banks) ────────────────────────────────────────── */
+
+[data-iii-ui="memory"] .mem-ui-rail {
+  width: 232px;
   flex-shrink: 0;
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--color-rule);
+  flex-direction: column;
+  min-height: 0;
+  background: var(--color-sidebar);
+  border-right: 1px solid var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-h1 {
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  text-transform: lowercase;
-  color: var(--color-ink);
+[data-iii-ui="memory"] .mem-ui-body.right .mem-ui-rail {
+  border-right: 0;
+  border-left: 1px solid var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-header-sub {
-  font-size: 12px;
-  text-transform: lowercase;
-  color: var(--color-ink-faint);
-  margin-top: 2px;
+/* Narrow is CONTAINER width (< 800px, the page's own ResizeObserver),
+   not the viewport: one pane at a time — the JSX renders either the bank
+   list or the opened workspace. */
+[data-iii-ui="memory"] .mem-ui-body.narrow .mem-ui-rail {
+  width: 100%;
+  border-right: 0;
+  border-left: 0;
 }
-[data-iii-ui="memory"] .mem-live {
-  display: inline-flex;
+
+[data-iii-ui="memory"] .mem-ui-col-head {
+  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  min-height: 40px;
+  padding: 6px 10px 6px 14px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="memory"] .mem-ui-col-head .label {
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
-  text-transform: lowercase;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
   color: var(--color-ink-faint);
 }
-[data-iii-ui="memory"] .mem-body {
+[data-iii-ui="memory"] .mem-ui-col-head .spacer {
   flex: 1;
-  display: flex;
-  min-height: 0;
 }
-[data-iii-ui="memory"] .mem-content {
+[data-iii-ui="memory"] .mem-ui-col-head .count {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-ghost);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-iii-ui="memory"] .mem-ui-rail-scroll {
   flex: 1;
-  min-width: 0;
   min-height: 0;
-  overflow: auto;
-  padding: 16px 24px;
+  overflow-y: auto;
+  padding: 4px 6px 12px;
+}
+
+/* bank rows — the whole row is the button */
+[data-iii-ui="memory"] .mem-ui-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1px;
 }
-[data-iii-ui="memory"] .mem-empty-banks {
+[data-iii-ui="memory"] .mem-ui-nav-row {
+  position: relative;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 64px 0;
+  gap: 2px;
+  width: 100%;
+  padding: 7px 10px 7px 14px;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+[data-iii-ui="memory"] .mem-ui-nav-row:hover {
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="memory"] .mem-ui-nav-row:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
+}
+/* Selection = wash + accent indicator + stronger name, not color alone. */
+[data-iii-ui="memory"] .mem-ui-nav-row.active {
+  background: var(--color-surface-selected);
+}
+[data-iii-ui="memory"] .mem-ui-nav-row.active::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 7px;
+  bottom: 7px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--color-accent);
+}
+[data-iii-ui="memory"] .mem-ui-nav-row .name {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--color-ink);
+  word-break: break-all;
+}
+[data-iii-ui="memory"] .mem-ui-nav-row.active .name {
+  font-weight: 600;
+}
+[data-iii-ui="memory"] .mem-ui-nav-row .fine {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  color: var(--color-ink-ghost);
+  font-variant-numeric: tabular-nums;
+}
+/* Touch-sized targets in the drill-in flow. */
+[data-iii-ui="memory"] .mem-ui-body.narrow .mem-ui-nav-row {
+  min-height: 44px;
+  justify-content: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
-/* ── shared primitives ──────────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-stack {
+/* rail loading / empty */
+[data-iii-ui="memory"] .mem-ui-rail-skel {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
+  padding: 14px 10px;
 }
-[data-iii-ui="memory"] .mem-stack.tight {
-  gap: 8px;
+[data-iii-ui="memory"] .mem-ui-skel-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+[data-iii-ui="memory"] .mem-ui-skel-row .bar {
+  display: block;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--color-surface);
+  animation: mem-ui-pulse 1.6s ease-in-out infinite;
+}
+@keyframes mem-ui-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+[data-iii-ui="memory"] .bar.w40 {
+  width: 40%;
+}
+[data-iii-ui="memory"] .bar.w60 {
+  width: 60%;
+}
+[data-iii-ui="memory"] .bar.w70 {
+  width: 70%;
 }
-[data-iii-ui="memory"] .mem-row {
+[data-iii-ui="memory"] .bar.w80 {
+  width: 80%;
+}
+[data-iii-ui="memory"] .bar.w90 {
+  width: 90%;
+}
+[data-iii-ui="memory"] .mem-ui-rail-empty {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 20px 14px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--color-ink);
 }
-[data-iii-ui="memory"] .mem-row.tight {
-  gap: 4px;
+[data-iii-ui="memory"] .mem-ui-rail-empty p {
+  margin: 0;
 }
-[data-iii-ui="memory"] .mem-row.wrap {
-  flex-wrap: wrap;
+[data-iii-ui="memory"] .mem-ui-rail-empty .dim {
+  color: var(--color-ink-faint);
 }
-[data-iii-ui="memory"] .mem-spread {
+
+[data-iii-ui="memory"] .mem-ui-rail-form {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-[data-iii-ui="memory"] .mem-spread.wrap {
-  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-flex1 {
+[data-iii-ui="memory"] .mem-ui-rail-input {
   flex: 1 1 auto;
   min-width: 0;
 }
-[data-iii-ui="memory"] .mem-spacer {
+
+/* ── bank workspace ─────────────────────────────────────────────────── */
+
+[data-iii-ui="memory"] .mem-ui-doc {
   flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-panel);
 }
-[data-iii-ui="memory"] .mem-gap1 {
-  display: inline-flex;
+
+/* workspace header — bank identity + the panel segmented control */
+[data-iii-ui="memory"] .mem-ui-doc-head {
+  display: flex;
   align-items: center;
-  gap: 6px;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  min-height: 52px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  background: var(--color-panel-raised);
+  border-bottom: 1px solid var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-hint {
-  font-size: 11px;
-  text-transform: lowercase;
-  color: var(--color-ink-faint);
-  line-height: 1.5;
+[data-iii-ui="memory"] .mem-ui-doc-identity {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 140px;
 }
-[data-iii-ui="memory"] .mem-hint.mem-center {
-  text-align: center;
-  max-width: 28rem;
+[data-iii-ui="memory"] .mem-ui-doc-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-ink);
 }
-[data-iii-ui="memory"] .mem-subhint {
-  font-size: 10px;
-  text-transform: lowercase;
-  color: var(--color-ink-ghost);
-  line-height: 1.5;
+/* The text needs its own box — ellipsis doesn't reach into a flex row. */
+[data-iii-ui="memory"] .mem-ui-doc-name .txt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-[data-iii-ui="memory"] .mem-caption {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
+[data-iii-ui="memory"] .mem-ui-doc-crumb {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
   color: var(--color-ink-ghost);
-}
-[data-iii-ui="memory"] .mem-danger {
-  color: var(--color-alert);
-}
-[data-iii-ui="memory"] .mem-truncate {
-  font-size: 11px;
-  text-transform: lowercase;
+  font-variant-numeric: tabular-nums;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-iii-ui="memory"] .mem-error-text {
-  font-size: 12px;
-  text-transform: lowercase;
-  color: var(--color-alert);
+
+/* segmented control — one control, mutually exclusive panels */
+[data-iii-ui="memory"] .mem-ui-seg {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--color-surface);
+  border-radius: 6px;
+  flex-shrink: 0;
 }
-[data-iii-ui="memory"] .mem-linklike {
-  background: transparent;
+[data-iii-ui="memory"] .mem-ui-seg-btn {
+  appearance: none;
   border: 0;
-  padding: 0;
-  font-family: inherit;
+  background: transparent;
+  height: 26px;
+  padding: 0 12px;
+  border-radius: 4px;
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
-  text-transform: lowercase;
-  color: var(--color-ink-ghost);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-ink-faint);
   cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
 }
-[data-iii-ui="memory"] .mem-linklike:hover {
+[data-iii-ui="memory"] .mem-ui-seg-btn:hover {
   color: var(--color-ink);
+  background: var(--color-surface-hover);
 }
-[data-iii-ui="memory"] .mem-spin {
-  animation: mem-ui-spin 1s linear infinite;
+[data-iii-ui="memory"] .mem-ui-seg-btn.active {
+  color: var(--color-ink);
+  background: var(--color-panel-raised);
+  box-shadow: 0 0 0 1px var(--color-edge);
 }
-@keyframes mem-ui-spin {
-  to {
-    transform: rotate(360deg);
-  }
+[data-iii-ui="memory"] .mem-ui-seg-btn:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
 }
 
-/* console-ui component layout overrides (chrome stays theirs) */
-[data-iii-ui="memory"] .mem-editor {
-  width: 100%;
-  min-height: 96px;
+/* back affordance (drill-in flow) */
+[data-iii-ui="memory"] .mem-ui-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-ink-faint);
+  cursor: pointer;
 }
-[data-iii-ui="memory"] .mem-graph-filter {
-  width: 224px;
-  max-width: 100%;
+[data-iii-ui="memory"] .mem-ui-back:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
 }
-[data-iii-ui="memory"] .mem-rail-input {
-  flex: 1 1 auto;
-  min-width: 0;
+[data-iii-ui="memory"] .mem-ui-back:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
 }
 
-/* ── bank rail ──────────────────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-rail {
-  width: 208px;
-  flex-shrink: 0;
+/* status banners sit directly under the header, near what they describe */
+[data-iii-ui="memory"] .mem-ui-banner {
   display: flex;
-  flex-direction: column;
-  min-height: 0;
-  border-right: 1px solid var(--color-rule);
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  font-size: 12.5px;
+  color: var(--color-ink);
+  border-bottom: 1px solid var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-rail-head {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--color-rule-2);
+[data-iii-ui="memory"] .mem-ui-banner.alert {
+  background: var(--color-alert-muted);
 }
-[data-iii-ui="memory"] .mem-rail-caption {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
+[data-iii-ui="memory"] .mem-ui-banner .detail {
+  display: block;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11.5px;
   color: var(--color-ink-faint);
+  word-break: break-word;
 }
-[data-iii-ui="memory"] .mem-rail-list {
-  flex: 1;
-  overflow: auto;
-}
-[data-iii-ui="memory"] .mem-rail-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 8px 12px;
+[data-iii-ui="memory"] .mem-ui-linkish {
   border: 0;
-  border-bottom: 1px solid var(--color-rule-2);
-  border-left: 2px solid transparent;
   background: transparent;
-  font-family: inherit;
-  text-transform: lowercase;
+  padding: 0;
+  font: inherit;
+  font-size: 12.5px;
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
   cursor: pointer;
-  transition: background-color 0.12s ease;
 }
-[data-iii-ui="memory"] .mem-rail-item:hover {
-  background: var(--color-panel);
+[data-iii-ui="memory"] .mem-ui-linkish:hover {
+  color: var(--color-accent-hover);
 }
-[data-iii-ui="memory"] .mem-rail-item.active {
-  border-left-color: var(--color-accent);
-  background: var(--color-panel);
+[data-iii-ui="memory"] .mem-ui-linkish.quiet {
+  color: var(--color-ink-faint);
 }
-[data-iii-ui="memory"] .mem-rail-name {
-  display: block;
-  font-size: 13px;
+[data-iii-ui="memory"] .mem-ui-linkish:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* load-failure panel */
+[data-iii-ui="memory"] .mem-ui-error-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 8px;
+  padding: 12px;
+  border: 1px solid color-mix(in oklab, var(--color-alert) 35%, transparent);
+  border-radius: 6px;
+  background: var(--color-alert-muted);
+  font-size: 12.5px;
   color: var(--color-ink);
 }
-[data-iii-ui="memory"] .mem-rail-meta {
-  display: block;
-  margin-top: 2px;
-  font-size: 11px;
+[data-iii-ui="memory"] .mem-ui-error-panel p {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  word-break: break-word;
+}
+[data-iii-ui="memory"] .mem-ui-error-panel .detail {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11.5px;
   color: var(--color-ink-faint);
 }
-[data-iii-ui="memory"] .mem-rail-form {
+[data-iii-ui="memory"] .mem-ui-error-panel.grow {
+  align-self: flex-start;
+  margin: 16px;
+  max-width: 560px;
+}
+
+/* workspace empty state — teaches the next action, not the absence */
+[data-iii-ui="memory"] .mem-ui-hero {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 6px;
-  padding: 8px;
-  border-top: 1px solid var(--color-rule);
+  justify-content: center;
+  gap: 8px;
+  padding: 48px 24px;
+  text-align: center;
+}
+[data-iii-ui="memory"] .mem-ui-hero-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--color-ink-ghost);
+  margin-bottom: 8px;
+}
+[data-iii-ui="memory"] .mem-ui-hero-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-ink);
 }
+[data-iii-ui="memory"] .mem-ui-hero-body {
+  margin: 0;
+  max-width: 460px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-ink-faint);
+}
+
+/* the scrolling panel area under the workspace header */
+[data-iii-ui="memory"] .mem-ui-doc-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+[data-iii-ui="memory"] .mem-ui-body.narrow .mem-ui-doc-scroll {
+  padding: 12px 16px;
+}
+
+/* ── shared layout primitives ───────────────────────────────────────── */
 
-/* ── mode toggle (segmented) ────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-modes {
+[data-iii-ui="memory"] .mem-ui-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+[data-iii-ui="memory"] .mem-ui-stack.tight {
+  gap: 8px;
+}
+[data-iii-ui="memory"] .mem-ui-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+[data-iii-ui="memory"] .mem-ui-row.tight {
+  gap: 4px;
+}
+[data-iii-ui="memory"] .mem-ui-row.wrap {
+  flex-wrap: wrap;
+}
+[data-iii-ui="memory"] .mem-ui-spread {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+[data-iii-ui="memory"] .mem-ui-spread.wrap {
+  flex-wrap: wrap;
+}
+[data-iii-ui="memory"] .mem-ui-flex1 {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+[data-iii-ui="memory"] .mem-ui-spacer {
+  flex: 1;
+}
+[data-iii-ui="memory"] .mem-ui-gap1 {
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--color-rule);
-  overflow: hidden;
+  gap: 6px;
 }
-[data-iii-ui="memory"] .mem-mode {
-  border: 0;
-  border-right: 1px solid var(--color-rule);
-  background: transparent;
-  padding: 5px 12px;
-  font-family: inherit;
+[data-iii-ui="memory"] .mem-ui-hint {
   font-size: 12px;
-  text-transform: lowercase;
+  line-height: 1.55;
   color: var(--color-ink-faint);
-  cursor: pointer;
-  transition: color 0.12s ease, background-color 0.12s ease;
 }
-[data-iii-ui="memory"] .mem-mode:last-child {
-  border-right: 0;
+[data-iii-ui="memory"] .mem-ui-subhint {
+  font-size: 11px;
+  line-height: 1.55;
+  color: var(--color-ink-ghost);
 }
-[data-iii-ui="memory"] .mem-mode:hover {
-  color: var(--color-ink);
+[data-iii-ui="memory"] .mem-ui-caption {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-ink-ghost);
 }
-[data-iii-ui="memory"] .mem-mode.active {
-  background: var(--color-panel);
-  color: var(--color-ink);
+[data-iii-ui="memory"] .mem-ui-danger {
+  color: var(--color-alert);
+}
+[data-iii-ui="memory"] .mem-ui-error-text {
+  font-size: 12.5px;
+  color: var(--color-alert);
+}
+
+/* console-ui component layout overrides (chrome stays theirs) */
+[data-iii-ui="memory"] .mem-ui-editor {
+  width: 100%;
+  min-height: 96px;
+}
+[data-iii-ui="memory"] .mem-ui-graph-filter {
+  width: 224px;
+  max-width: 100%;
 }
 
 /* ── tag pills / buttons ────────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-tag {
+
+[data-iii-ui="memory"] .mem-ui-tag {
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 10px;
-  text-transform: lowercase;
   padding: 0 4px;
-  border: 1px solid var(--color-rule-2);
+  border: 1px solid var(--color-edge);
+  border-radius: 3px;
   color: var(--color-ink-faint);
 }
-[data-iii-ui="memory"] .mem-tagbtn {
-  font-family: inherit;
+[data-iii-ui="memory"] .mem-ui-tagbtn {
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
-  text-transform: lowercase;
-  padding: 2px 6px;
-  border: 1px solid var(--color-rule);
+  padding: 2px 8px;
+  border: 1px solid var(--color-edge);
+  border-radius: 4px;
   background: transparent;
   color: var(--color-ink-faint);
   cursor: pointer;
-  transition: color 0.12s ease, border-color 0.12s ease;
+  transition:
+    color 120ms ease,
+    background-color 120ms ease,
+    border-color 120ms ease;
 }
-[data-iii-ui="memory"] .mem-tagbtn:hover {
-  border-color: var(--color-ink);
+[data-iii-ui="memory"] .mem-ui-tagbtn:hover {
+  background: var(--color-surface-hover);
   color: var(--color-ink);
 }
-[data-iii-ui="memory"] .mem-tagbtn.active {
+[data-iii-ui="memory"] .mem-ui-tagbtn.active {
   border-color: var(--color-accent);
+  background: var(--color-surface-selected);
   color: var(--color-ink);
 }
+[data-iii-ui="memory"] .mem-ui-tagbtn:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
+}
+
+/* ── memories panel ─────────────────────────────────────────────────── */
 
-/* ── memories list ──────────────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-activity {
+[data-iii-ui="memory"] .mem-ui-activity {
   display: flex;
   align-items: center;
   gap: 12px;
-  border: 1px solid var(--color-rule-2);
-  background: var(--color-panel);
+  border: 1px solid var(--color-edge);
+  border-radius: 6px;
+  background: var(--color-surface);
   padding: 8px 12px;
 }
-[data-iii-ui="memory"] .mem-bars {
+[data-iii-ui="memory"] .mem-ui-bars {
   display: flex;
   align-items: flex-end;
   gap: 2px;
   height: 32px;
 }
-[data-iii-ui="memory"] .mem-bar {
+[data-iii-ui="memory"] .mem-ui-bar {
   width: 5px;
-  background: var(--color-rule);
+  border-radius: 1px;
+  background: var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-bar.on {
+[data-iii-ui="memory"] .mem-ui-bar.on {
   background: var(--color-accent);
 }
-[data-iii-ui="memory"] .mem-activity-text {
+[data-iii-ui="memory"] .mem-ui-activity-text {
   display: flex;
   flex-direction: column;
+  gap: 1px;
 }
-[data-iii-ui="memory"] .mem-activity-count {
-  font-size: 12px;
+[data-iii-ui="memory"] .mem-ui-activity-count {
+  font-size: 12.5px;
   color: var(--color-ink);
   font-variant-numeric: tabular-nums;
 }
-[data-iii-ui="memory"] .mem-check {
+[data-iii-ui="memory"] .mem-ui-check {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
-  text-transform: lowercase;
   color: var(--color-ink-faint);
   cursor: pointer;
 }
-[data-iii-ui="memory"] .mem-check input {
+[data-iii-ui="memory"] .mem-ui-check input {
   accent-color: var(--color-accent);
 }
-[data-iii-ui="memory"] .mem-fact-list {
+
+[data-iii-ui="memory"] .mem-ui-fact-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  border: 1px solid var(--color-rule);
+  border: 1px solid var(--color-edge);
+  border-radius: 6px;
+  overflow: hidden;
 }
-[data-iii-ui="memory"] .mem-fact-list > li + li {
-  border-top: 1px solid var(--color-rule-2);
+[data-iii-ui="memory"] .mem-ui-fact-list > li + li {
+  border-top: 1px solid var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-fact {
+[data-iii-ui="memory"] .mem-ui-fact {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 8px 12px;
   border-left: 2px solid transparent;
 }
-[data-iii-ui="memory"] .mem-fact.pinned {
+[data-iii-ui="memory"] .mem-ui-fact.pinned {
   border-left-color: var(--color-accent);
 }
-[data-iii-ui="memory"] .mem-fact.superseded {
+[data-iii-ui="memory"] .mem-ui-fact.superseded {
   opacity: 0.5;
 }
-[data-iii-ui="memory"] .mem-fact-text {
+[data-iii-ui="memory"] .mem-ui-fact-text {
+  margin: 0;
   font-size: 13px;
   color: var(--color-ink);
-  line-height: 1.375;
+  line-height: 1.5;
 }
-[data-iii-ui="memory"] .mem-fact-meta {
+[data-iii-ui="memory"] .mem-ui-fact-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
-[data-iii-ui="memory"] .mem-score {
-  font-size: 10px;
+[data-iii-ui="memory"] .mem-ui-score {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
   color: var(--color-ink-ghost);
   font-variant-numeric: tabular-nums;
 }
-[data-iii-ui="memory"] .mem-meta-note {
-  font-size: 10px;
-  text-transform: lowercase;
+[data-iii-ui="memory"] .mem-ui-meta-note {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
   color: var(--color-ink-ghost);
 }
-[data-iii-ui="memory"] .mem-fromchat {
+[data-iii-ui="memory"] .mem-ui-fromchat {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: transparent;
   border: 0;
   padding: 0;
-  font-family: inherit;
-  font-size: 10px;
-  text-transform: lowercase;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
   color: var(--color-ink-ghost);
   cursor: pointer;
-  transition: color 0.12s ease;
+  transition: color 120ms ease;
 }
-[data-iii-ui="memory"] .mem-fromchat:hover {
+[data-iii-ui="memory"] .mem-ui-fromchat:hover {
   color: var(--color-ink);
 }
+[data-iii-ui="memory"] .mem-ui-fromchat:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ── rules panel ────────────────────────────────────────────────────── */
 
-/* ── rules ──────────────────────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-rule {
-  border: 1px solid var(--color-rule);
+[data-iii-ui="memory"] .mem-ui-rule {
+  border: 1px solid var(--color-edge);
+  border-radius: 6px;
+  overflow: hidden;
 }
-[data-iii-ui="memory"] .mem-rule-head {
+[data-iii-ui="memory"] .mem-ui-rule-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--color-rule-2);
+  gap: 8px;
+  min-height: 36px;
+  padding: 4px 8px 4px 12px;
+  background: var(--color-panel-raised);
+  border-bottom: 1px solid var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-rule-name {
+[data-iii-ui="memory"] .mem-ui-rule-name {
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 12px;
   font-weight: 600;
-  text-transform: lowercase;
   color: var(--color-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-[data-iii-ui="memory"] .mem-rule-actions {
+[data-iii-ui="memory"] .mem-ui-rule-actions {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
-[data-iii-ui="memory"] .mem-unsaved {
-  font-size: 10px;
-  text-transform: lowercase;
+[data-iii-ui="memory"] .mem-ui-unsaved {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
   color: var(--color-warn);
+  white-space: nowrap;
 }
-[data-iii-ui="memory"] .mem-rule-editor {
+/* Monaco grows with content — the pane scrolls past this cap. */
+[data-iii-ui="memory"] .mem-ui-rule-editor {
   max-height: 480px;
   overflow: auto;
 }
 
-/* ── recall / turn preview ──────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-prompt {
-  border: 1px solid var(--color-rule);
+/* ── recall / turn preview panel ────────────────────────────────────── */
+
+[data-iii-ui="memory"] .mem-ui-prompt {
+  border: 1px solid var(--color-edge);
+  border-radius: 6px;
+  overflow: hidden;
 }
-[data-iii-ui="memory"] .mem-prompt-head {
+[data-iii-ui="memory"] .mem-ui-prompt-head {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -461,129 +797,157 @@
   font-family: inherit;
   cursor: pointer;
 }
-[data-iii-ui="memory"] .mem-prompt-label {
+[data-iii-ui="memory"] .mem-ui-prompt-head:hover {
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="memory"] .mem-ui-prompt-head:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
+}
+[data-iii-ui="memory"] .mem-ui-prompt-label {
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
-  text-transform: lowercase;
   color: var(--color-ink);
 }
-[data-iii-ui="memory"] .mem-prompt-body {
+[data-iii-ui="memory"] .mem-ui-prompt-body {
   margin: 0;
   padding: 8px 12px 12px;
-  border-top: 1px solid var(--color-rule-2);
-  font-family: inherit;
+  border-top: 1px solid var(--color-edge);
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
   color: var(--color-ink-faint);
   white-space: pre-wrap;
+  word-break: break-word;
   line-height: 1.6;
   max-height: 288px;
   overflow: auto;
 }
-[data-iii-ui="memory"] .mem-recall-item {
+[data-iii-ui="memory"] .mem-ui-recall-item {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 8px 12px;
 }
-[data-iii-ui="memory"] .mem-scorebar {
+[data-iii-ui="memory"] .mem-ui-scorebar {
   height: 6px;
   flex-shrink: 0;
-  background: var(--color-rule);
+  border-radius: 3px;
+  background: var(--color-edge);
 }
-[data-iii-ui="memory"] .mem-scorebar.on {
+[data-iii-ui="memory"] .mem-ui-scorebar.on {
   background: var(--color-accent);
 }
 
-/* ── graph ──────────────────────────────────────────────────────────── */
-[data-iii-ui="memory"] .mem-graph {
+/* ── graph panel ────────────────────────────────────────────────────── */
+
+[data-iii-ui="memory"] .mem-ui-graph {
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
   min-height: 0;
 }
-[data-iii-ui="memory"] .mem-graph-canvas {
+[data-iii-ui="memory"] .mem-ui-graph-canvas {
   position: relative;
   flex: 1;
   min-height: 0;
-  border: 1px solid var(--color-rule);
+  border: 1px solid var(--color-edge);
+  border-radius: 6px;
+  overflow: hidden;
 }
-[data-iii-ui="memory"] .mem-graph-svg {
+[data-iii-ui="memory"] .mem-ui-graph-svg {
+  display: block;
   width: 100%;
   height: 100%;
   min-height: 440px;
   cursor: grab;
   user-select: none;
 }
-[data-iii-ui="memory"] .mem-graph-svg:active {
+[data-iii-ui="memory"] .mem-ui-graph-svg:active {
   cursor: grabbing;
 }
-[data-iii-ui="memory"] .mem-node {
+[data-iii-ui="memory"] .mem-ui-node {
   cursor: grab;
   outline: none;
 }
-[data-iii-ui="memory"] .mem-node:active {
+[data-iii-ui="memory"] .mem-ui-node:active {
   cursor: grabbing;
 }
-[data-iii-ui="memory"] .mem-more {
+[data-iii-ui="memory"] .mem-ui-more {
   cursor: pointer;
   outline: none;
 }
-[data-iii-ui="memory"] .mem-legend {
+[data-iii-ui="memory"] .mem-ui-legend {
   position: absolute;
   bottom: 8px;
   left: 8px;
   display: flex;
   align-items: center;
-  gap: 12px;
+  flex-wrap: wrap;
+  gap: 4px 12px;
   padding: 4px 8px;
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 10px;
-  text-transform: lowercase;
   color: var(--color-ink-ghost);
-  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
-  border: 1px solid var(--color-rule-2);
+  background: color-mix(in srgb, var(--color-panel) 90%, transparent);
+  border: 1px solid var(--color-edge);
+  border-radius: 4px;
 }
-[data-iii-ui="memory"] .mem-legend-item {
+[data-iii-ui="memory"] .mem-ui-legend-item {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-[data-iii-ui="memory"] .mem-swatch {
+[data-iii-ui="memory"] .mem-ui-swatch {
   display: inline-block;
   width: 8px;
   height: 8px;
 }
-[data-iii-ui="memory"] .mem-swatch.entity {
+[data-iii-ui="memory"] .mem-ui-swatch.entity {
   border: 1px solid var(--color-ink-faint);
   background: var(--color-panel);
 }
-[data-iii-ui="memory"] .mem-swatch.memory {
+[data-iii-ui="memory"] .mem-ui-swatch.memory {
   border-radius: 9999px;
   background: var(--color-ink);
 }
-[data-iii-ui="memory"] .mem-swatch.pinned {
+[data-iii-ui="memory"] .mem-ui-swatch.pinned {
   border-radius: 9999px;
   background: var(--color-accent);
 }
-[data-iii-ui="memory"] .mem-card {
+[data-iii-ui="memory"] .mem-ui-card {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 288px;
+  max-width: calc(100% - 16px);
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 12px;
-  border: 1px solid var(--color-rule);
-  background: var(--color-bg);
+  border: 1px solid var(--color-edge);
+  border-radius: 6px;
+  background: var(--color-panel-raised);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-ink) 8%, transparent);
 }
-[data-iii-ui="memory"] .mem-card-head {
+[data-iii-ui="memory"] .mem-ui-card-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
 }
-[data-iii-ui="memory"] .mem-card-text {
-  font-size: 12px;
+[data-iii-ui="memory"] .mem-ui-card-text {
+  margin: 0;
+  font-size: 12.5px;
   color: var(--color-ink);
-  line-height: 1.375;
+  line-height: 1.5;
+}
+
+/* ── motion opt-outs ────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  [data-iii-ui="memory"] .mem-ui-spin,
+  [data-iii-ui="memory"] .mem-ui-skel-row .bar {
+    animation: none;
+  }
 }
diff --git a/packages/console-ui/index.d.ts b/packages/console-ui/index.d.ts
index 5adfb92fd..ed2fe8baf 100644
--- a/packages/console-ui/index.d.ts
+++ b/packages/console-ui/index.d.ts
@@ -73,6 +73,13 @@ export interface PageRenderProps {
    * Absent when the page renders outside a closable pane.
    */
   onRequestClose?: () => void
+  /**
+   * The active chat conversation's working directory, live: the page
+   * re-renders with the new value when the user picks another folder in
+   * chat, so filesystem-shaped pages can follow along. `null`/absent when
+   * no conversation is active or none is set.
+   */
+  workingDir?: string | null
 }
 
 export interface PageRegistration {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef806e312..ad0bb8697 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,10 +67,10 @@ importers:
       '@fontsource/chivo-mono':
         specifier: ^5.2.8
         version: 5.3.0
-      '@fontsource/geist':
+      '@fontsource/geist-mono':
         specifier: ^5.2.8
         version: 5.3.0
-      '@fontsource/geist-mono':
+      '@fontsource/inter':
         specifier: ^5.2.8
         version: 5.3.0
       '@lexical/react':
@@ -810,8 +810,8 @@ packages:
   '@fontsource/geist-mono@5.3.0':
     resolution: {integrity: sha512-UtJ1BBBCVpMYdIcW7nEB45UAoAw5M53ZXs2t0ciPW+IokuAAIc56M8+kW5tXbRJCTpDw4XTtU7proT6NdQAHTg==}
 
-  '@fontsource/geist@5.3.0':
-    resolution: {integrity: sha512-u03ftlfVwb05uijq2jGDJ03/HKGqMKaNFk7KOhkpBUex8+BhrAOfMs/XciJ2UUNUX9fEsZbZQld/RWMA2oFU7g==}
+  '@fontsource/inter@5.3.0':
+    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
 
   '@iii-dev/helpers@0.22.0':
     resolution: {integrity: sha512-GYmAFmGoRcHIggvtPOIjQ3/ZzpMe0uGkj1FpXnOEpr1WFalzbs5T50WmhUOaZZ73UjfSiya0hv+oFm1+Rg4Pkw==}
@@ -3753,7 +3753,7 @@ snapshots:
 
   '@fontsource/geist-mono@5.3.0': {}
 
-  '@fontsource/geist@5.3.0': {}
+  '@fontsource/inter@5.3.0': {}
 
   '@iii-dev/helpers@0.22.0':
     dependencies:
diff --git a/shell/ui/page.tsx b/shell/ui/page.tsx
index 503260ee1..cac362d74 100644
--- a/shell/ui/page.tsx
+++ b/shell/ui/page.tsx
@@ -25,9 +25,7 @@ export default function setup(host: Host) {
   host.pages.register({
     id: 'shell',
     title: 'shell',
-    render: ({ panelSide, tabId }: PageRenderProps) => (
-      <ShellExplorerPage host={host} panelSide={panelSide} tabId={tabId} />
-    ),
+    render: (props: PageRenderProps) => <ShellExplorerPage host={host} {...props} />,
   })
 
   host.functionTriggers.register(createShellTriggerRenderer())
diff --git a/shell/ui/src/page/index.tsx b/shell/ui/src/page/index.tsx
index d06837463..d586c7b73 100644
--- a/shell/ui/src/page/index.tsx
+++ b/shell/ui/src/page/index.tsx
@@ -52,7 +52,13 @@ const SIDE_TABS: { id: SideTab; label: string; Icon: typeof FolderTree }[] = [
   { id: 'search', label: 'search', Icon: Search },
 ]
 
-export function ShellExplorerPage({ host, panelSide, tabId, onRequestClose }: { host: Host } & PageRenderProps) {
+export function ShellExplorerPage({
+  host,
+  panelSide,
+  tabId,
+  onRequestClose,
+  workingDir,
+}: { host: Host } & PageRenderProps) {
   const theme = host.useTheme()
   const [info, setInfo] = useState<CoderInfo | null>(null)
   const [infoError, setInfoError] = useState<string | null>(null)
@@ -90,21 +96,27 @@ export function ShellExplorerPage({ host, panelSide, tabId, onRequestClose }: {
     }
   }, [host, tabId])
 
-  // Root resolution waits for BOTH: a persisted root only counts while
-  // it is still an allowed base path.
+  // Root resolution waits for BOTH: a persisted root only counts while it
+  // still lives inside an allowed base path (chat-synced roots may be
+  // subfolders, not just the base paths themselves). Without one, the
+  // chat's working dir wins over the primary root, so a fresh split opens
+  // where the conversation is.
   useEffect(() => {
     if (!info || restored === 'loading' || root !== null) return
-    const persisted = restored?.root && info.base_paths.includes(restored.root) ? restored.root : null
-    setRoot(persisted ?? info.primary_root)
+    const withinBase = (p: string) =>
+      info.base_paths.includes(p) || info.base_paths.some((base) => p.startsWith(`${base}/`))
+    const persisted = restored?.root && withinBase(restored.root) ? restored.root : null
+    const next = persisted ?? workingDir ?? info.primary_root
+    setRoot(next)
     if (persisted) {
       setTabs(restoreTabs(restored?.open, restored?.active))
       setExpanded(restored?.expanded ?? [])
-    } else if (restored && !restored.root) {
+    } else if (restored && !restored.root && next === info.primary_root) {
       // Legacy/first save without a root: restore against the primary.
       setTabs(restoreTabs(restored.open, restored.active))
       setExpanded(restored.expanded)
     }
-  }, [info, restored, root])
+  }, [info, restored, root, workingDir])
 
   // ── data loads (gated on the resolved root) ──
   const gitSeqRef = useRef(0)
@@ -215,6 +227,18 @@ export function ShellExplorerPage({ host, panelSide, tabId, onRequestClose }: {
     setRoot(nextRoot)
   }, [])
 
+  // ── follow the chat's working directory ──
+  // Picking another folder in chat re-roots the explorer (the split-screen
+  // sync). Only CHANGES sync: the boot-resolved root wins on mount, and a
+  // manual root pick sticks until the chat's folder moves again.
+  const lastWorkingDirRef = useRef(workingDir ?? null)
+  useEffect(() => {
+    const next = workingDir ?? null
+    if (next === lastWorkingDirRef.current) return
+    lastWorkingDirRef.current = next
+    if (next !== null && root !== null && next !== root) changeRoot(next)
+  }, [workingDir, root, changeRoot])
+
   const onSaved = useCallback(() => {
     refreshGit()
   }, [refreshGit])
@@ -224,6 +248,14 @@ export function ShellExplorerPage({ host, panelSide, tabId, onRequestClose }: {
     return git.changes.map((c) => ({ path: c.path, status: c.status }))
   }, [git])
 
+  // Chat-synced roots can be subfolders of a base path — surface the
+  // current root as an option so the select never holds a value its
+  // options don't contain (and the user can always pop back to a base).
+  const rootOptions = useMemo(() => {
+    if (!info || !root) return []
+    return info.base_paths.includes(root) ? info.base_paths : [root, ...info.base_paths]
+  }, [info, root])
+
   const header = (
     <PageHeader
       icon={<SquareTerminal />}
@@ -294,7 +326,7 @@ export function ShellExplorerPage({ host, panelSide, tabId, onRequestClose }: {
                 </button>
               </div>
 
-              {info.base_paths.length > 1 ? (
+              {rootOptions.length > 1 ? (
                 <select
                   className="shui-root-select"
                   value={root}
@@ -302,7 +334,7 @@ export function ShellExplorerPage({ host, panelSide, tabId, onRequestClose }: {
                   aria-label="browsed root"
                   title={root}
                 >
-                  {info.base_paths.map((p) => (
+                  {rootOptions.map((p) => (
                     <option key={p} value={p}>
                       {lastSegments(p)}
                     </option>
diff --git a/state/ui/page.tsx b/state/ui/page.tsx
index 7fe549f1c..76baef179 100644
--- a/state/ui/page.tsx
+++ b/state/ui/page.tsx
@@ -8,7 +8,9 @@
  * `setup(host)` composes the worker's three console contributions, one
  * module each:
  *
- * - src/page/                    — the state-manager page (#/ext/state-manager)
+ * - src/page/                    — the state-manager page (#/ext/state-manager):
+ *                                  scopes × keys columns over a Monaco JSON
+ *                                  value editor, drill-in flow when narrow
  * - src/configuration/           — custom form for the `state` configuration entry
  * - src/function-trigger-message/ — how state::set / state::get triggers render
  *
@@ -25,7 +27,7 @@ export default function setup(host: Host) {
   host.pages.register({
     id: 'state-manager',
     title: 'state',
-    render: () => <StateManagerPage host={host} />,
+    render: (props) => <StateManagerPage host={host} {...props} />,
   })
 
   host.functionTriggers.register(createStateTriggerRenderer(host))
diff --git a/state/ui/src/lib/widgets.tsx b/state/ui/src/lib/widgets.tsx
index 257dae78d..ba9a04328 100644
--- a/state/ui/src/lib/widgets.tsx
+++ b/state/ui/src/lib/widgets.tsx
@@ -13,6 +13,7 @@ export function LiveDot() {
   )
 }
 
+/** Narrow-mode drill-out affordance (scopes ← keys ← value). */
 export function BackButton({
   onClick,
   label,
@@ -23,22 +24,33 @@ export function BackButton({
   return (
     <button
       type="button"
+      className="state-ui-back"
       onClick={onClick}
       aria-label={label}
       title={label}
-      style={{
-        border: '1px solid var(--color-rule)',
-        background: 'transparent',
-        color: 'var(--color-ink-faint)',
-        width: 28,
-        height: 28,
-        cursor: 'pointer',
-        fontFamily: 'inherit',
-        fontSize: 14,
-        lineHeight: 1,
-      }}
     >
-      ←
+      <ChevronLeftIcon className="state-ui-back-icon" />
+    </button>
+  )
+}
+
+/** Column-head refresh affordance. */
+export function RefreshButton({
+  onClick,
+  label,
+}: {
+  onClick: () => void
+  label: string
+}) {
+  return (
+    <button
+      type="button"
+      className="state-ui-iconbtn"
+      onClick={onClick}
+      aria-label={label}
+      title={label}
+    >
+      <RotateIcon className="state-ui-iconbtn-icon" />
     </button>
   )
 }
@@ -58,3 +70,49 @@ export function useFlash(): [ReadonlySet<string>, (k: string) => void] {
   }, [])
   return [flashed, mark]
 }
+
+/* ── inline icons ─────────────────────────────────────────────────────
+ * Injected UI has no icon library to import — these are hand-inlined
+ * 24×24 stroke glyphs (lucide geometry: 1.5px stroke, round caps) sized
+ * by the caller's className. All are decorative (aria-hidden); the
+ * enclosing control carries the accessible name. */
+
+function iconProps(className?: string) {
+  return {
+    className,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.5,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+  } as const
+}
+
+/** Stacked-cylinders glyph: the key–value store identity. */
+export function DatabaseIcon({ className }: { className?: string }) {
+  return (
+    <svg {...iconProps(className)} aria-hidden="true">
+      <ellipse cx="12" cy="5" rx="9" ry="3" />
+      <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+      <path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3" />
+    </svg>
+  )
+}
+
+export function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg {...iconProps(className)} aria-hidden="true">
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  )
+}
+
+export function RotateIcon({ className }: { className?: string }) {
+  return (
+    <svg {...iconProps(className)} aria-hidden="true">
+      <path d="M21 12a9 9 0 1 1-2.64-6.36L21 8" />
+      <path d="M21 3v5h-5" />
+    </svg>
+  )
+}
diff --git a/state/ui/src/page/ItemView.tsx b/state/ui/src/page/ItemView.tsx
deleted file mode 100644
index 75bfdc148..000000000
--- a/state/ui/src/page/ItemView.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Button, type Host } from '@iii-dev/console-ui'
-import { type Subscribe, useStateEvents } from '../lib/events'
-import { BackButton, LiveDot } from '../lib/widgets'
-
-export function ItemView({
-  host,
-  scope,
-  itemKey,
-  subscribe,
-  onBack,
-}: {
-  host: Host
-  scope: string
-  itemKey: string
-  subscribe: Subscribe
-  onBack: () => void
-}) {
-  const [stored, setStored] = useState<{ loaded: boolean; value: unknown }>({
-    loaded: false,
-    value: null,
-  })
-  const [loadError, setLoadError] = useState<string | null>(null)
-  const [draft, setDraft] = useState<string | null>(null)
-  const [saving, setSaving] = useState(false)
-  const [savedAt, setSavedAt] = useState<number | null>(null)
-  const [liveAt, setLiveAt] = useState<number | null>(null)
-  const [saveError, setSaveError] = useState<string | null>(null)
-  const [serverNotice, setServerNotice] = useState<
-    { kind: 'changed'; value: unknown } | { kind: 'deleted' } | null
-  >(null)
-  const draftRef = useRef(draft)
-  draftRef.current = draft
-
-  useEffect(() => {
-    host.iii
-      .trigger<unknown>('state::get', { scope, key: itemKey })
-      .then((value) => {
-        setLoadError(null)
-        setStored({ loaded: true, value })
-      })
-      .catch((err: unknown) =>
-        setLoadError(err instanceof Error ? err.message : String(err)),
-      )
-  }, [host, scope, itemKey])
-
-  const storedText = stored.loaded
-    ? JSON.stringify(stored.value ?? null, null, 2)
-    : ''
-
-  useStateEvents(subscribe, (e) => {
-    if (e.scope !== scope || e.key !== itemKey) return
-    if (e.event_type === 'state:deleted') {
-      setServerNotice({ kind: 'deleted' })
-      return
-    }
-    const nextText = JSON.stringify(e.new_value ?? null, null, 2)
-    if (draftRef.current !== null && draftRef.current !== nextText) {
-      // Never clobber an editor with unsaved changes — offer the new
-      // value instead.
-      setServerNotice({ kind: 'changed', value: e.new_value })
-      return
-    }
-    // Clean editor (or a draft that already equals the incoming value —
-    // typically the echo of our own save): apply in place.
-    setServerNotice(null)
-    setStored((prev) => {
-      const prevText = prev.loaded
-        ? JSON.stringify(prev.value ?? null, null, 2)
-        : null
-      if (prevText !== nextText) setLiveAt(Date.now())
-      return { loaded: true, value: e.new_value ?? null }
-    })
-    if (draftRef.current === nextText) setDraft(null)
-  })
-
-  // The transient "updated live" note fades back to the default hint.
-  useEffect(() => {
-    if (liveAt === null) return
-    const timer = window.setTimeout(() => setLiveAt(null), 4000)
-    return () => window.clearTimeout(timer)
-  }, [liveAt])
-
-  const text = draft ?? storedText
-  const dirty = draft !== null && draft !== storedText
-
-  let parseError: string | null = null
-  if (dirty) {
-    try {
-      JSON.parse(text)
-    } catch (err) {
-      parseError = err instanceof Error ? err.message : String(err)
-    }
-  }
-
-  const save = useCallback(async () => {
-    setSaveError(null)
-    let parsed: unknown
-    try {
-      parsed = JSON.parse(text)
-    } catch {
-      return
-    }
-    setSaving(true)
-    try {
-      await host.iii.trigger('state::set', {
-        scope,
-        key: itemKey,
-        value: parsed,
-      })
-      setStored({ loaded: true, value: parsed })
-      setDraft(null)
-      setServerNotice(null)
-      setSavedAt(Date.now())
-    } catch (err) {
-      setSaveError(err instanceof Error ? err.message : String(err))
-    } finally {
-      setSaving(false)
-    }
-  }, [host, scope, itemKey, text])
-
-  const loadLatest = useCallback(() => {
-    if (serverNotice?.kind !== 'changed') return
-    setStored({ loaded: true, value: serverNotice.value ?? null })
-    setDraft(null)
-    setServerNotice(null)
-    setLiveAt(Date.now())
-  }, [serverNotice])
-
-  return (
-    <>
-      <div className="state-ui-head">
-        <BackButton onClick={onBack} label={`back to ${scope}`} />
-        <span className="state-ui-crumb">
-          {scope} <span className="sep">/</span> {itemKey}
-        </span>
-        <LiveDot />
-        <span style={{ flex: 1 }} />
-        <Button
-          variant="primary"
-          size="sm"
-          onClick={() => void save()}
-          disabled={!dirty || !!parseError || saving}
-        >
-          {saving ? 'saving…' : 'save'}
-        </Button>
-      </div>
-      {loadError ? (
-        <div className="state-ui-error">state::get failed — {loadError}</div>
-      ) : !stored.loaded ? (
-        <div className="state-ui-list">
-          <div className="state-ui-note">loading value…</div>
-        </div>
-      ) : (
-        <>
-          <textarea
-            className="state-ui-editor"
-            value={text}
-            spellCheck={false}
-            onChange={(e) => {
-              setDraft(e.target.value)
-              setSavedAt(null)
-            }}
-            aria-label={`JSON value for ${scope}/${itemKey}`}
-          />
-          <div className="state-ui-editor-foot">
-            {parseError ? (
-              <span className="state-ui-invalid">invalid JSON — {parseError}</span>
-            ) : saveError ? (
-              <span className="state-ui-invalid">state::set failed — {saveError}</span>
-            ) : serverNotice?.kind === 'deleted' ? (
-              <span className="state-ui-server">
-                this key was deleted on the server — saving will recreate it
-              </span>
-            ) : serverNotice?.kind === 'changed' ? (
-              <>
-                <span className="state-ui-server">
-                  value changed on the server while you were editing
-                </span>
-                <button
-                  type="button"
-                  className="state-ui-linklike"
-                  onClick={loadLatest}
-                >
-                  load latest (discards your edits)
-                </button>
-              </>
-            ) : dirty ? (
-              <span className="state-ui-dirty">unsaved changes</span>
-            ) : savedAt ? (
-              <span className="state-ui-saved">saved ✓</span>
-            ) : liveAt ? (
-              <span className="state-ui-saved">updated live ↻</span>
-            ) : (
-              <span className="state-ui-dirty">
-                edit the JSON value and save to write it back with state::set —
-                remote changes stream in live
-              </span>
-            )}
-          </div>
-        </>
-      )}
-    </>
-  )
-}
diff --git a/state/ui/src/page/ItemsView.tsx b/state/ui/src/page/ItemsView.tsx
deleted file mode 100644
index c79686cdc..000000000
--- a/state/ui/src/page/ItemsView.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, EmptyState, type Host } from '@iii-dev/console-ui'
-import { type Subscribe, useStateEvents } from '../lib/events'
-import { BackButton, LiveDot, useFlash } from '../lib/widgets'
-
-export function ItemsView({
-  host,
-  scope,
-  subscribe,
-  onBack,
-  onOpen,
-}: {
-  host: Host
-  scope: string
-  subscribe: Subscribe
-  onBack: () => void
-  onOpen: (key: string) => void
-}) {
-  const [keys, setKeys] = useState<string[] | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [flashed, flash] = useFlash()
-
-  const load = useCallback(() => {
-    host.iii
-      .trigger<{ keys: string[] }>('state::list_keys', { scope })
-      .then((r) => {
-        setError(null)
-        setKeys(r.keys)
-      })
-      .catch((err: unknown) =>
-        setError(err instanceof Error ? err.message : String(err)),
-      )
-  }, [host, scope])
-  useEffect(load, [load])
-
-  useStateEvents(subscribe, (e) => {
-    if (e.scope !== scope) return
-    if (e.event_type === 'state:deleted') {
-      setKeys((prev) => prev?.filter((k) => k !== e.key) ?? prev)
-      return
-    }
-    flash(e.key)
-    // created: append (kv scopes are insertion-ordered); updated: no
-    // membership change, just the flash above.
-    setKeys((prev) => {
-      if (!prev || prev.includes(e.key)) return prev
-      return [...prev, e.key]
-    })
-  })
-
-  return (
-    <>
-      <div className="state-ui-head">
-        <BackButton onClick={onBack} label="back to scopes" />
-        <span className="state-ui-crumb">{scope}</span>
-        <LiveDot />
-        <span style={{ flex: 1 }} />
-        <Button variant="pill" size="sm" onClick={load}>
-          refresh
-        </Button>
-      </div>
-      {error ? (
-        <div className="state-ui-error">state::list_keys failed — {error}</div>
-      ) : keys === null ? (
-        <div className="state-ui-list">
-          <div className="state-ui-note">loading items…</div>
-        </div>
-      ) : keys.length === 0 ? (
-        <EmptyState
-          title="scope is empty"
-          description={`no keys under '${scope}' — new writes appear here live; the scope disappears once its last key is deleted.`}
-        />
-      ) : (
-        <div className="state-ui-list">
-          {keys.map((key) => (
-            <button
-              key={key}
-              type="button"
-              className={`state-ui-row${flashed.has(key) ? ' flash' : ''}`}
-              onClick={() => onOpen(key)}
-            >
-              <span>{key}</span>
-              <span className="arrow">▸</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/state/ui/src/page/ScopesView.tsx b/state/ui/src/page/ScopesView.tsx
deleted file mode 100644
index e40cd4c3e..000000000
--- a/state/ui/src/page/ScopesView.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Button, EmptyState, type Host } from '@iii-dev/console-ui'
-import { type Subscribe, useStateEvents } from '../lib/events'
-import { LiveDot, useFlash } from '../lib/widgets'
-
-export function ScopesView({
-  host,
-  subscribe,
-  onOpen,
-}: {
-  host: Host
-  subscribe: Subscribe
-  onOpen: (scope: string) => void
-}) {
-  const [scopes, setScopes] = useState<string[] | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [flashed, flash] = useFlash()
-
-  const load = useCallback(() => {
-    host.iii
-      .trigger<{ groups: string[] }>('state::list_groups', {})
-      .then((r) => {
-        setError(null)
-        setScopes(r.groups)
-      })
-      .catch((err: unknown) =>
-        setError(err instanceof Error ? err.message : String(err)),
-      )
-  }, [host])
-  useEffect(load, [load])
-
-  // Deletes can empty a scope — only the worker knows, so refetch
-  // (debounced across bursts).
-  const refetchTimer = useRef<number | null>(null)
-  const scheduleRefetch = useCallback(() => {
-    if (refetchTimer.current !== null) window.clearTimeout(refetchTimer.current)
-    refetchTimer.current = window.setTimeout(() => {
-      refetchTimer.current = null
-      load()
-    }, 300)
-  }, [load])
-  useEffect(
-    () => () => {
-      if (refetchTimer.current !== null)
-        window.clearTimeout(refetchTimer.current)
-    },
-    [],
-  )
-
-  useStateEvents(subscribe, (e) => {
-    if (e.event_type === 'state:deleted') {
-      scheduleRefetch()
-      return
-    }
-    // created/updated: a write into an unseen scope = a new scope, live.
-    setScopes((prev) => {
-      if (!prev || prev.includes(e.scope)) return prev
-      flash(e.scope)
-      return [...prev, e.scope].sort()
-    })
-  })
-
-  return (
-    <>
-      <div className="state-ui-head">
-        <span className="state-ui-title">state scopes</span>
-        <LiveDot />
-        <span style={{ flex: 1 }} />
-        <Button variant="pill" size="sm" onClick={load}>
-          refresh
-        </Button>
-      </div>
-      {error ? (
-        <div className="state-ui-error">state::list_groups failed — {error}</div>
-      ) : scopes === null ? (
-        <div className="state-ui-list">
-          <div className="state-ui-note">loading scopes…</div>
-        </div>
-      ) : scopes.length === 0 ? (
-        <EmptyState
-          title="no state scopes yet"
-          description="nothing has written to state — a scope appears here live with its first state::set."
-        />
-      ) : (
-        <div className="state-ui-list">
-          {scopes.map((scope) => (
-            <button
-              key={scope}
-              type="button"
-              className={`state-ui-row${flashed.has(scope) ? ' flash' : ''}`}
-              onClick={() => onOpen(scope)}
-            >
-              <span>{scope}</span>
-              <span className="arrow">▸</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/state/ui/src/page/ValueEditor.tsx b/state/ui/src/page/ValueEditor.tsx
new file mode 100644
index 000000000..e26bb94c2
--- /dev/null
+++ b/state/ui/src/page/ValueEditor.tsx
@@ -0,0 +1,290 @@
+/**
+ * The value workspace: one scope/key's JSON value in the console's shared
+ * Monaco editor (CodeEditor from @iii-dev/console-ui — never bundle an
+ * editor into a worker asset), under a stable document header (identity
+ * crumb, dirty dot, revert/save) and over a status bar.
+ *
+ * Live semantics (the page-wide `state` binding, filtered to this entry):
+ * a clean editor applies server changes in place; an editor with unsaved
+ * edits is never clobbered — a banner offers the new value instead. A
+ * delete keeps the draft and warns that saving recreates the key.
+ *
+ * The browser remounts this component per scope/key (React key), so all
+ * state here is entry-local. Unsaved edits are reported up through
+ * `onDirtyChange` so column navigation can ask before discarding them.
+ */
+
+import { Button, CodeEditor, type Host } from '@iii-dev/console-ui'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { type Subscribe, useStateEvents } from '../lib/events'
+import { BackButton } from '../lib/widgets'
+
+export function ValueEditor({
+  host,
+  scope,
+  itemKey,
+  subscribe,
+  narrow,
+  onBack,
+  onDirtyChange,
+}: {
+  host: Host
+  scope: string
+  itemKey: string
+  subscribe: Subscribe
+  narrow: boolean
+  onBack: () => void
+  onDirtyChange: (dirty: boolean) => void
+}) {
+  const [stored, setStored] = useState<{ loaded: boolean; value: unknown }>({
+    loaded: false,
+    value: null,
+  })
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [draft, setDraft] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [savedFlash, setSavedFlash] = useState(false)
+  const [liveAt, setLiveAt] = useState<number | null>(null)
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [serverNotice, setServerNotice] = useState<
+    { kind: 'changed'; value: unknown } | { kind: 'deleted' } | null
+  >(null)
+  const draftRef = useRef(draft)
+  draftRef.current = draft
+  const flashTimer = useRef<number | undefined>(undefined)
+  useEffect(() => () => window.clearTimeout(flashTimer.current), [])
+
+  const load = useCallback(() => {
+    setLoadError(null)
+    host.iii
+      .trigger<unknown>('state::get', { scope, key: itemKey })
+      .then((value) => {
+        setLoadError(null)
+        setStored({ loaded: true, value })
+      })
+      .catch((err: unknown) => setLoadError(err instanceof Error ? err.message : String(err)))
+  }, [host, scope, itemKey])
+  useEffect(load, [load])
+
+  const storedText = stored.loaded ? JSON.stringify(stored.value ?? null, null, 2) : ''
+  const text = draft ?? storedText
+  const dirty = draft !== null && draft !== storedText
+
+  const onDirtyChangeRef = useRef(onDirtyChange)
+  onDirtyChangeRef.current = onDirtyChange
+  useEffect(() => {
+    onDirtyChangeRef.current(dirty)
+  }, [dirty])
+  // Unmount (back, scope switch, page close) always releases the guard.
+  useEffect(() => () => onDirtyChangeRef.current(false), [])
+
+  useStateEvents(subscribe, (e) => {
+    if (e.scope !== scope || e.key !== itemKey) return
+    if (e.event_type === 'state:deleted') {
+      setServerNotice({ kind: 'deleted' })
+      return
+    }
+    const nextText = JSON.stringify(e.new_value ?? null, null, 2)
+    if (draftRef.current !== null && draftRef.current !== nextText) {
+      // Never clobber an editor with unsaved changes — offer the new
+      // value instead.
+      setServerNotice({ kind: 'changed', value: e.new_value })
+      return
+    }
+    // Clean editor (or a draft that already equals the incoming value —
+    // typically the echo of our own save): apply in place.
+    setServerNotice(null)
+    setStored((prev) => {
+      const prevText = prev.loaded ? JSON.stringify(prev.value ?? null, null, 2) : null
+      if (prevText !== nextText) setLiveAt(Date.now())
+      return { loaded: true, value: e.new_value ?? null }
+    })
+    if (draftRef.current === nextText) setDraft(null)
+  })
+
+  // The transient "updated live" note fades back to the default hint.
+  useEffect(() => {
+    if (liveAt === null) return
+    const timer = window.setTimeout(() => setLiveAt(null), 4000)
+    return () => window.clearTimeout(timer)
+  }, [liveAt])
+
+  let parseError: string | null = null
+  if (dirty) {
+    try {
+      JSON.parse(text)
+    } catch (err) {
+      parseError = err instanceof Error ? err.message : String(err)
+    }
+  }
+
+  const save = useCallback(async () => {
+    if (saving) return
+    setSaveError(null)
+    let parsed: unknown
+    try {
+      parsed = JSON.parse(text)
+    } catch {
+      return
+    }
+    setSaving(true)
+    try {
+      await host.iii.trigger('state::set', { scope, key: itemKey, value: parsed })
+      setStored({ loaded: true, value: parsed })
+      setDraft(null)
+      setServerNotice(null)
+      setSavedFlash(true)
+      window.clearTimeout(flashTimer.current)
+      flashTimer.current = window.setTimeout(() => setSavedFlash(false), 2400)
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setSaving(false)
+    }
+  }, [host, scope, itemKey, text, saving])
+
+  const loadLatest = useCallback(() => {
+    if (serverNotice?.kind !== 'changed') return
+    setStored({ loaded: true, value: serverNotice.value ?? null })
+    setDraft(null)
+    setServerNotice(null)
+    setLiveAt(Date.now())
+  }, [serverNotice])
+
+  const onWorkspaceKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+      e.preventDefault()
+      if (dirty && !parseError) void save()
+    }
+  }
+
+  const lines = stored.loaded ? text.split('\n').length : 0
+  const bytes = stored.loaded ? new Blob([text]).size : 0
+  const saveStatus = saving ? 'saving…' : savedFlash ? '✓ saved' : dirty ? 'unsaved' : ''
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: shortcut relay (⌘S saves) around real controls
+    <div className="state-ui-doc-inner" onKeyDown={onWorkspaceKeyDown}>
+      <header className="state-ui-doc-head">
+        {narrow ? <BackButton onClick={onBack} label={`back to ${scope}`} /> : null}
+        <div className="state-ui-doc-identity">
+          <span className="state-ui-doc-name" title={`${scope} / ${itemKey}`}>
+            <span className="txt">{itemKey}</span>
+            {dirty ? <span className="state-ui-dirty-dot" title="unsaved changes" aria-hidden /> : null}
+          </span>
+          {!narrow ? (
+            <span className="state-ui-doc-crumb">
+              {scope} / {itemKey}
+            </span>
+          ) : null}
+        </div>
+        <div className="state-ui-save-area">
+          <span className="state-ui-save-note" aria-live="polite">
+            {saveStatus}
+          </span>
+          {dirty && !saving ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setDraft(null)
+                setSaveError(null)
+              }}
+            >
+              revert
+            </Button>
+          ) : null}
+          <Button variant="primary" size="sm" disabled={!dirty || !!parseError || saving} onClick={() => void save()}>
+            {saving ? 'saving…' : 'save'}
+          </Button>
+        </div>
+      </header>
+
+      {serverNotice?.kind === 'deleted' ? (
+        <div className="state-ui-banner warn" role="status">
+          <span>This key was deleted on the server — saving recreates it.</span>
+        </div>
+      ) : null}
+
+      {serverNotice?.kind === 'changed' ? (
+        <div className="state-ui-banner warn" role="status">
+          <span>This value changed on the server while you were editing.</span>
+          <button type="button" className="state-ui-linkish" onClick={loadLatest}>
+            load latest (discards your draft)
+          </button>
+        </div>
+      ) : null}
+
+      {saveError ? (
+        <div className="state-ui-banner alert" role="alert">
+          <span>
+            state::set failed.
+            <span className="detail">{saveError}</span>
+          </span>
+          <button type="button" className="state-ui-linkish" onClick={() => void save()}>
+            retry
+          </button>
+          <button type="button" className="state-ui-linkish quiet" onClick={() => setSaveError(null)}>
+            dismiss
+          </button>
+        </div>
+      ) : null}
+
+      {loadError ? (
+        <div className="state-ui-error-panel grow">
+          <p>
+            {scope} / {itemKey} could not be loaded.
+            <span className="detail">{loadError}</span>
+          </p>
+          <Button variant="ghost" size="sm" onClick={load}>
+            retry
+          </Button>
+        </div>
+      ) : !stored.loaded ? (
+        <div className="state-ui-doc-loading" aria-hidden>
+          <span className="bar w40" />
+          <span className="bar w90" />
+          <span className="bar w75" />
+          <span className="bar w30" />
+        </div>
+      ) : (
+        <>
+          <div className="state-ui-doc-body">
+            <CodeEditor
+              value={text}
+              onChange={(next) => setDraft(next)}
+              language="json"
+              className="state-ui-code"
+              aria-label={`JSON value for ${scope}/${itemKey}`}
+              placeholder="null"
+            />
+          </div>
+          <footer className="state-ui-statusbar">
+            <span className="fact">json</span>
+            <span className="fact">
+              {lines} line{lines === 1 ? '' : 's'}
+            </span>
+            <span className="fact">{formatKb(bytes)}</span>
+            <span className="spacer" />
+            {parseError ? (
+              <span className="status alert" title={parseError}>
+                invalid JSON — {parseError}
+              </span>
+            ) : dirty ? (
+              <span className="status">⌘S saves</span>
+            ) : liveAt ? (
+              <span className="status ok">updated live ↻</span>
+            ) : (
+              <span className="status">all changes saved</span>
+            )}
+          </footer>
+        </>
+      )}
+    </div>
+  )
+}
+
+function formatKb(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  return `${(bytes / 1024).toFixed(1)} KB`
+}
diff --git a/state/ui/src/page/browser.tsx b/state/ui/src/page/browser.tsx
new file mode 100644
index 000000000..dcc4852d3
--- /dev/null
+++ b/state/ui/src/page/browser.tsx
@@ -0,0 +1,358 @@
+/**
+ * The scopes × keys browser the state page is built on.
+ *
+ * Layout adapts to the width the browser HAS (a ResizeObserver on its own
+ * root, not a viewport media query — the console can host it in panes of
+ * any size). Wide: three columns — scopes, the selected scope's keys, and
+ * the value workspace side by side. Under NARROW_BELOW px it becomes a
+ * drill-in flow: scopes → keys → value, one pane at a time with ← back
+ * buttons.
+ *
+ * Live updates ride the page-wide `state` trigger binding
+ * (src/lib/events.ts): a write into an unseen scope/key appends to its
+ * column with a flash; deletes prune the keys column and refetch the
+ * scope list (only the worker knows when a scope emptied — debounced
+ * across bursts). The value workspace guards its own draft (ValueEditor
+ * reports dirty up); column navigation asks before discarding one.
+ */
+
+import { Button, type Host } from '@iii-dev/console-ui'
+import type { ReactNode } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { type Subscribe, useStateEvents } from '../lib/events'
+import { BackButton, DatabaseIcon, RefreshButton, useFlash } from '../lib/widgets'
+import { ValueEditor } from './ValueEditor'
+
+/** Container width (px) below which the browser collapses to the
+ * drill-in scopes ⇄ keys ⇄ value flow. */
+const NARROW_BELOW = 800
+
+/** Observe the browser root's own width. Returns a callback ref to put
+ * on the root plus whether it is currently narrower than `threshold` —
+ * container-driven, so the same page adapts inside any pane the console
+ * gives it. Measures synchronously on mount to avoid a wide-mode flash;
+ * zero widths (display:none) are ignored so a hidden browser keeps its
+ * last real layout. */
+function useContainerNarrow(threshold: number): [(node: HTMLDivElement | null) => void, boolean] {
+  const [narrow, setNarrow] = useState(false)
+  const observerRef = useRef<ResizeObserver | null>(null)
+  const refCb = useCallback(
+    (node: HTMLDivElement | null) => {
+      observerRef.current?.disconnect()
+      observerRef.current = null
+      if (!node) return
+      const width = node.getBoundingClientRect().width
+      if (width > 0) setNarrow(width < threshold)
+      const observer = new ResizeObserver((entries) => {
+        const next = entries[0]?.contentRect.width
+        if (typeof next === 'number' && next > 0) setNarrow(next < threshold)
+      })
+      observer.observe(node)
+      observerRef.current = observer
+    },
+    [threshold],
+  )
+  return [refCb, narrow]
+}
+
+/** Shared column body: error / loading / empty / row list. */
+function ColumnBody({
+  error,
+  noun,
+  onRetry,
+  rows,
+  selected,
+  flashed,
+  onOpen,
+  empty,
+}: {
+  error: string | null
+  noun: string
+  onRetry: () => void
+  rows: string[] | null
+  selected: string | null
+  flashed: ReadonlySet<string>
+  onOpen: (row: string) => void
+  empty: ReactNode
+}) {
+  return (
+    <div className="state-ui-col-scroll">
+      {error ? (
+        <div className="state-ui-error-panel">
+          <p>
+            The {noun} list could not be loaded.
+            <span className="detail">{error}</span>
+          </p>
+          <Button variant="ghost" size="sm" onClick={onRetry}>
+            retry
+          </Button>
+        </div>
+      ) : rows === null ? (
+        <div className="state-ui-col-skel" aria-hidden>
+          {[0, 1, 2, 3].map((i) => (
+            <span key={i} className={`bar w${[60, 80, 40, 70][i]}`} />
+          ))}
+        </div>
+      ) : rows.length === 0 ? (
+        empty
+      ) : (
+        <ul className="state-ui-nav-list">
+          {rows.map((row) => (
+            <li key={row}>
+              <button
+                type="button"
+                className={`state-ui-nav-row${row === selected ? ' active' : ''}${flashed.has(row) ? ' flash' : ''}`}
+                aria-current={row === selected ? 'true' : undefined}
+                onClick={() => onOpen(row)}
+              >
+                <span className="name">{row}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export function StateBrowser({
+  host,
+  subscribe,
+  panelSide = 'left',
+}: {
+  host: Host
+  subscribe: Subscribe
+  panelSide?: 'left' | 'right'
+}) {
+  const [scopes, setScopes] = useState<string[] | null>(null)
+  const [scopesError, setScopesError] = useState<string | null>(null)
+  const [scopeFlash, flashScope] = useFlash()
+
+  const [scope, setScope] = useState<string | null>(null)
+  const [key, setKey] = useState<string | null>(null)
+
+  const [keys, setKeys] = useState<string[] | null>(null)
+  const [keysError, setKeysError] = useState<string | null>(null)
+  const [keyFlash, flashKey] = useFlash()
+
+  const [rootRef, narrow] = useContainerNarrow(NARROW_BELOW)
+
+  // Live mirrors for the event handler (its closure is kept fresh by
+  // useStateEvents, but list membership checks want the latest arrays
+  // without re-subscribing per render).
+  const scopesRef = useRef(scopes)
+  scopesRef.current = scopes
+  const keysRef = useRef(keys)
+  keysRef.current = keys
+  const scopeRef = useRef(scope)
+  scopeRef.current = scope
+
+  // The open editor reports unsaved edits up; navigating away asks first.
+  const dirtyRef = useRef(false)
+  const onDirtyChange = useCallback((dirty: boolean) => {
+    dirtyRef.current = dirty
+  }, [])
+  const confirmDiscard = () => !dirtyRef.current || window.confirm('Discard unsaved changes?')
+
+  const loadScopes = useCallback(() => {
+    host.iii
+      .trigger<{ groups: string[] }>('state::list_groups', {})
+      .then((r) => {
+        setScopesError(null)
+        setScopes(r.groups)
+      })
+      .catch((err: unknown) => setScopesError(err instanceof Error ? err.message : String(err)))
+  }, [host])
+  useEffect(loadScopes, [loadScopes])
+
+  // Deletes can empty a scope — only the worker knows, so refetch
+  // (debounced across bursts).
+  const refetchTimer = useRef<number | null>(null)
+  const scheduleScopesRefetch = useCallback(() => {
+    if (refetchTimer.current !== null) window.clearTimeout(refetchTimer.current)
+    refetchTimer.current = window.setTimeout(() => {
+      refetchTimer.current = null
+      loadScopes()
+    }, 300)
+  }, [loadScopes])
+  useEffect(
+    () => () => {
+      if (refetchTimer.current !== null) window.clearTimeout(refetchTimer.current)
+    },
+    [],
+  )
+
+  const loadKeys = useCallback(() => {
+    const current = scopeRef.current
+    if (current === null) return
+    host.iii
+      .trigger<{ keys: string[] }>('state::list_keys', { scope: current })
+      .then((r) => {
+        // Stale async result: the user switched scopes while this list
+        // was in flight — applying it would show A's keys under B.
+        if (scopeRef.current !== current) return
+        setKeysError(null)
+        setKeys(r.keys)
+      })
+      .catch((err: unknown) => {
+        if (scopeRef.current !== current) return
+        setKeysError(err instanceof Error ? err.message : String(err))
+      })
+  }, [host])
+  useEffect(() => {
+    setKeys(null)
+    setKeysError(null)
+    if (scope !== null) loadKeys()
+  }, [scope, loadKeys])
+
+  useStateEvents(subscribe, (e) => {
+    if (e.event_type === 'state:deleted') {
+      scheduleScopesRefetch()
+      if (e.scope === scopeRef.current) {
+        setKeys((prev) => prev?.filter((k) => k !== e.key) ?? prev)
+      }
+      return
+    }
+    // created/updated: a write into an unseen scope = a new scope, live.
+    if (scopesRef.current && !scopesRef.current.includes(e.scope)) {
+      flashScope(e.scope)
+      setScopes([...scopesRef.current, e.scope].sort())
+    }
+    if (e.scope === scopeRef.current) {
+      flashKey(e.key)
+      // created: append (kv scopes are insertion-ordered); updated: no
+      // membership change, just the flash above.
+      if (keysRef.current && !keysRef.current.includes(e.key)) {
+        setKeys([...keysRef.current, e.key])
+      }
+    }
+  })
+
+  const openScope = (next: string) => {
+    if (next === scope && !narrow) return
+    if (!confirmDiscard()) return
+    setScope(next)
+    setKey(null)
+  }
+  const openKey = (next: string) => {
+    if (next === key) return
+    if (!confirmDiscard()) return
+    setKey(next)
+  }
+  const backToScopes = () => {
+    if (!confirmDiscard()) return
+    setScope(null)
+    setKey(null)
+  }
+  const backToKeys = () => {
+    if (!confirmDiscard()) return
+    setKey(null)
+  }
+
+  // Narrow: one pane at a time — scopes, keys, or the opened value.
+  const showScopes = !narrow || scope === null
+  const showKeys = !narrow || (scope !== null && key === null)
+  const showDoc = !narrow || key !== null
+
+  return (
+    <div className={`state-ui-browser${narrow ? ' narrow' : ''}${panelSide === 'right' ? ' right' : ''}`} ref={rootRef}>
+      {showScopes ? (
+        <aside className="state-ui-col scopes" aria-label="scope list">
+          <header className="state-ui-col-head">
+            <span className="label">scopes</span>
+            <span className="spacer" />
+            {scopes !== null && !scopesError ? <span className="count">{scopes.length}</span> : null}
+            <RefreshButton onClick={loadScopes} label="refresh scopes" />
+          </header>
+          <ColumnBody
+            error={scopesError}
+            noun="scope"
+            onRetry={loadScopes}
+            rows={scopes}
+            selected={scope}
+            flashed={scopeFlash}
+            onOpen={openScope}
+            empty={
+              <div className="state-ui-col-empty">
+                <p>No scopes yet.</p>
+                <p className="dim">A scope appears here live with its first state::set.</p>
+              </div>
+            }
+          />
+        </aside>
+      ) : null}
+
+      {showKeys ? (
+        <aside className="state-ui-col keys" aria-label="key list">
+          {scope === null ? (
+            <>
+              <header className="state-ui-col-head">
+                <span className="label">keys</span>
+              </header>
+              <div className="state-ui-col-hint">Select a scope to list its keys.</div>
+            </>
+          ) : (
+            <>
+              <header className="state-ui-col-head">
+                {narrow ? <BackButton onClick={backToScopes} label="back to scopes" /> : null}
+                <span className="scope-name" title={scope}>
+                  {scope}
+                </span>
+                <span className="spacer" />
+                {keys !== null && !keysError ? <span className="count">{keys.length}</span> : null}
+                <RefreshButton onClick={loadKeys} label={`refresh keys of ${scope}`} />
+              </header>
+              <ColumnBody
+                error={keysError}
+                noun="key"
+                onRetry={loadKeys}
+                rows={keys}
+                selected={key}
+                flashed={keyFlash}
+                onOpen={openKey}
+                empty={
+                  <div className="state-ui-col-empty">
+                    <p>Scope is empty.</p>
+                    <p className="dim">
+                      New writes appear here live; the scope disappears once its last key is deleted.
+                    </p>
+                  </div>
+                }
+              />
+            </>
+          )}
+        </aside>
+      ) : null}
+
+      {showDoc ? (
+        <section className="state-ui-doc" aria-label="value workspace">
+          {scope === null || key === null ? (
+            <div className="state-ui-hero">
+              <DatabaseIcon className="state-ui-hero-icon" />
+              <h2 className="state-ui-hero-title">Select a key</h2>
+              <p className="state-ui-hero-body">
+                Pick a scope, then a key, to view and edit its JSON value. Edits save back with state::set; remote
+                changes stream in live.
+              </p>
+              <p className="state-ui-hero-hint">
+                <kbd>⌘S</kbd> saves
+              </p>
+            </div>
+          ) : (
+            <ValueEditor
+              // Remount per entry so draft/save state never leaks across keys.
+              key={`${scope}\u0000${key}`}
+              host={host}
+              scope={scope}
+              itemKey={key}
+              subscribe={subscribe}
+              narrow={narrow}
+              onBack={backToKeys}
+              onDirtyChange={onDirtyChange}
+            />
+          )}
+        </section>
+      ) : null}
+    </div>
+  )
+}
diff --git a/state/ui/src/page/index.tsx b/state/ui/src/page/index.tsx
index 47723542d..8c5a51380 100644
--- a/state/ui/src/page/index.tsx
+++ b/state/ui/src/page/index.tsx
@@ -1,50 +1,34 @@
 /**
- * The state-manager page: scopes → keys → JSON value editor, all live.
+ * The state-manager page (#/ext/state-manager): the standard page chrome
+ * (PageShell/PageHeader from @iii-dev/console-ui) over the scopes × keys
+ * browser (./browser) and its Monaco JSON value editor (./ValueEditor).
+ *
  * One `state` trigger binding for the whole page (src/lib/events.ts),
- * fanned out to whichever view is mounted.
+ * fanned out to whichever views are mounted.
  */
 
-import { useState } from 'react'
-import type { Host } from '@iii-dev/console-ui'
+import { type Host, PageHeader, type PageRenderProps, PageShell } from '@iii-dev/console-ui'
 import { useStateEventHub } from '../lib/events'
-import { ItemsView } from './ItemsView'
-import { ItemView } from './ItemView'
-import { ScopesView } from './ScopesView'
+import { DatabaseIcon, LiveDot } from '../lib/widgets'
+import { StateBrowser } from './browser'
 
-type Route =
-  | { view: 'scopes' }
-  | { view: 'items'; scope: string }
-  | { view: 'item'; scope: string; key: string }
-
-export function StateManagerPage({ host }: { host: Host }) {
-  const [route, setRoute] = useState<Route>({ view: 'scopes' })
+export function StateManagerPage({
+  host,
+  panelSide = 'left',
+  onRequestClose,
+}: { host: Host } & Partial<PageRenderProps>) {
   const subscribe = useStateEventHub(host)
 
   return (
-    <div className="state-ui">
-      {route.view === 'scopes' ? (
-        <ScopesView
-          host={host}
-          subscribe={subscribe}
-          onOpen={(scope) => setRoute({ view: 'items', scope })}
-        />
-      ) : route.view === 'items' ? (
-        <ItemsView
-          host={host}
-          scope={route.scope}
-          subscribe={subscribe}
-          onBack={() => setRoute({ view: 'scopes' })}
-          onOpen={(key) => setRoute({ view: 'item', scope: route.scope, key })}
-        />
-      ) : (
-        <ItemView
-          host={host}
-          scope={route.scope}
-          itemKey={route.key}
-          subscribe={subscribe}
-          onBack={() => setRoute({ view: 'items', scope: route.scope })}
-        />
-      )}
-    </div>
+    <PageShell className="state-ui-shell">
+      <PageHeader
+        icon={<DatabaseIcon />}
+        title="state"
+        description="scoped key–value store, live"
+        actions={<LiveDot />}
+        onClose={onRequestClose}
+      />
+      <StateBrowser host={host} subscribe={subscribe} panelSide={panelSide} />
+    </PageShell>
   )
 }
diff --git a/state/ui/styles.css b/state/ui/styles.css
index 6cfc89379..e355b5869 100644
--- a/state/ui/styles.css
+++ b/state/ui/styles.css
@@ -6,32 +6,33 @@
  * console mounts around every injected render — page, function-trigger
  * message, and config form alike. Styling uses the console's design tokens,
  * so light/dark theming is free.
+ *
+ * The page follows the console redesign's surface + typography roles:
+ *
+ *   navigation  --color-sidebar         the scope / key columns
+ *   workspace   --color-panel           the value being edited
+ *   raised      --color-panel-raised    headers, status bar, controls
+ *   states      --color-surface-*       hover / selected washes
+ *   edges       --color-edge            hairline separation
+ *
+ *   sans (--font-sans)  interface text: banners, empty states, hints
+ *   mono (--font-mono)  technical values: scopes, keys, counts, the
+ *                       editor, and the status bar
  */
 
-[data-iii-ui="state"] .state-ui {
-  max-width: 860px;
-  margin: 0 auto;
-  padding: 24px;
-  font-family: var(--font-mono, ui-monospace, monospace);
+/* ── the page (#/ext/state-manager): application shell ──────────────── */
+
+[data-iii-ui="state"] .state-ui-shell {
+  min-height: 360px;
   color: var(--color-ink);
+  font-family: var(--font-sans, system-ui, sans-serif);
 }
-[data-iii-ui="state"] .state-ui-head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-  min-height: 32px;
-}
-[data-iii-ui="state"] .state-ui-title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  color: var(--color-ink-faint);
-  font-weight: 600;
-}
+
 [data-iii-ui="state"] .state-ui-live {
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
   color: var(--color-ink-ghost);
+  white-space: nowrap;
 }
 [data-iii-ui="state"] .state-ui-live .dot {
   color: var(--color-ok);
@@ -41,93 +42,499 @@
   0%, 100% { opacity: 1 }
   50% { opacity: 0.35 }
 }
-[data-iii-ui="state"] .state-ui-crumb {
-  font-size: 13px;
-  color: var(--color-ink);
+@media (prefers-reduced-motion: reduce) {
+  [data-iii-ui="state"] .state-ui-live .dot { animation: none; }
+}
+
+/* ── browser: columns + workspace ───────────────────────────────────── */
+
+[data-iii-ui="state"] .state-ui-browser {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+}
+/* Right-column pane: mirror so navigation hugs the pane's outer edge. */
+[data-iii-ui="state"] .state-ui-browser.right {
+  flex-direction: row-reverse;
+}
+
+/* ── navigation columns (scopes | keys) ─────────────────────────────── */
+
+[data-iii-ui="state"] .state-ui-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex-shrink: 0;
+  background: var(--color-sidebar);
+  border-right: 1px solid var(--color-edge);
+}
+[data-iii-ui="state"] .state-ui-col.scopes { width: 208px; }
+[data-iii-ui="state"] .state-ui-col.keys { width: 248px; }
+[data-iii-ui="state"] .state-ui-browser.right .state-ui-col {
+  border-right: 0;
+  border-left: 1px solid var(--color-edge);
+}
+/* Narrow is CONTAINER width (< 800px, the browser's own ResizeObserver),
+   not the viewport: one pane at a time — the JSX renders exactly one of
+   scopes, keys, or the opened value. */
+[data-iii-ui="state"] .state-ui-browser.narrow .state-ui-col {
+  width: 100%;
+  border-right: 0;
+  border-left: 0;
+}
+
+[data-iii-ui="state"] .state-ui-col-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 6px 10px 6px 14px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="state"] .state-ui-col-head .label {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="state"] .state-ui-col-head .scope-name {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--color-ink);
 }
-[data-iii-ui="state"] .state-ui-crumb .sep { color: var(--color-ink-ghost); }
-[data-iii-ui="state"] .state-ui-list {
-  border: 1px solid var(--color-rule);
-  background: var(--color-bg);
+[data-iii-ui="state"] .state-ui-col-head .spacer { flex: 1; }
+[data-iii-ui="state"] .state-ui-col-head .count {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-ghost);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-iii-ui="state"] .state-ui-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-ink-ghost);
+  cursor: pointer;
+}
+[data-iii-ui="state"] .state-ui-iconbtn:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="state"] .state-ui-iconbtn:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
 }
-[data-iii-ui="state"] .state-ui-row {
+[data-iii-ui="state"] .state-ui-iconbtn-icon {
+  width: 13px;
+  height: 13px;
+}
+
+[data-iii-ui="state"] .state-ui-col-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 6px 12px;
+}
+
+/* entry rows — the whole row is the button */
+[data-iii-ui="state"] .state-ui-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+[data-iii-ui="state"] .state-ui-nav-row {
+  position: relative;
   display: flex;
   width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 12px;
-  font-size: 13px;
+  padding: 7px 10px 7px 14px;
   text-align: left;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid var(--color-rule-2);
-  color: var(--color-ink);
+  border-radius: 6px;
   cursor: pointer;
-  font-family: inherit;
 }
-[data-iii-ui="state"] .state-ui-row:last-child { border-bottom: 0; }
-[data-iii-ui="state"] .state-ui-row:hover { background: var(--color-paper-2); }
-[data-iii-ui="state"] .state-ui-row .arrow { color: var(--color-ink-ghost); }
-[data-iii-ui="state"] .state-ui-row.flash {
+[data-iii-ui="state"] .state-ui-nav-row:hover {
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="state"] .state-ui-nav-row:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
+}
+/* Selection = wash + accent indicator + stronger name, not color alone. */
+[data-iii-ui="state"] .state-ui-nav-row.active {
+  background: var(--color-surface-selected);
+}
+[data-iii-ui="state"] .state-ui-nav-row.active::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 7px;
+  bottom: 7px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--color-accent);
+}
+[data-iii-ui="state"] .state-ui-nav-row .name {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--color-ink);
+  word-break: break-all;
+}
+[data-iii-ui="state"] .state-ui-nav-row.active .name {
+  font-weight: 600;
+}
+/* Live-arrived rows flash with an accent wash that fades out. */
+[data-iii-ui="state"] .state-ui-nav-row.flash {
   animation: state-ui-flash 1.4s ease-out;
 }
 @keyframes state-ui-flash {
   from { background: color-mix(in srgb, var(--color-accent) 16%, transparent) }
   to { background: transparent }
 }
-[data-iii-ui="state"] .state-ui-note {
-  padding: 16px 12px;
+/* Touch-sized targets in the drill-in flow. */
+[data-iii-ui="state"] .state-ui-browser.narrow .state-ui-nav-row {
+  min-height: 44px;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/* column hint / empty / loading / error */
+[data-iii-ui="state"] .state-ui-col-hint {
+  padding: 16px 14px;
   font-size: 12.5px;
+  line-height: 1.5;
   color: var(--color-ink-faint);
 }
-[data-iii-ui="state"] .state-ui-error {
-  border: 1px solid var(--color-alert);
-  color: var(--color-alert);
-  padding: 10px 12px;
+[data-iii-ui="state"] .state-ui-col-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 20px 14px;
   font-size: 12.5px;
-}
-[data-iii-ui="state"] .state-ui-editor {
-  width: 100%;
-  min-height: 320px;
-  border: 1px solid var(--color-rule);
-  background: var(--color-bg);
+  line-height: 1.5;
   color: var(--color-ink);
-  font-family: inherit;
-  font-size: 12.5px;
-  line-height: 1.55;
+}
+[data-iii-ui="state"] .state-ui-col-empty p { margin: 0; }
+[data-iii-ui="state"] .state-ui-col-empty .dim { color: var(--color-ink-faint); }
+[data-iii-ui="state"] .state-ui-col-skel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 14px 10px;
+}
+[data-iii-ui="state"] .state-ui-col-skel .bar,
+[data-iii-ui="state"] .state-ui-doc-loading .bar {
+  display: block;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--color-surface);
+  animation: state-ui-pulse 1.6s ease-in-out infinite;
+}
+@keyframes state-ui-pulse {
+  0%, 100% { opacity: 1 }
+  50% { opacity: 0.4 }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-iii-ui="state"] .state-ui-col-skel .bar,
+  [data-iii-ui="state"] .state-ui-doc-loading .bar,
+  [data-iii-ui="state"] .state-ui-nav-row.flash {
+    animation: none;
+  }
+}
+[data-iii-ui="state"] .bar.w30 { width: 30%; }
+[data-iii-ui="state"] .bar.w40 { width: 40%; }
+[data-iii-ui="state"] .bar.w60 { width: 60%; }
+[data-iii-ui="state"] .bar.w70 { width: 70%; }
+[data-iii-ui="state"] .bar.w75 { width: 75%; }
+[data-iii-ui="state"] .bar.w80 { width: 80%; }
+[data-iii-ui="state"] .bar.w90 { width: 90%; }
+
+[data-iii-ui="state"] .state-ui-error-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 8px;
   padding: 12px;
-  resize: vertical;
-  box-sizing: border-box;
+  border: 1px solid color-mix(in oklab, var(--color-alert) 35%, transparent);
+  border-radius: 6px;
+  background: var(--color-alert-muted);
+  font-size: 12.5px;
+  color: var(--color-ink);
 }
-[data-iii-ui="state"] .state-ui-editor:focus {
-  outline: 1px solid var(--color-accent);
-  outline-offset: -1px;
+[data-iii-ui="state"] .state-ui-error-panel p {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  word-break: break-word;
+}
+[data-iii-ui="state"] .state-ui-error-panel .detail {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11.5px;
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="state"] .state-ui-error-panel.grow {
+  align-self: flex-start;
+  margin: 16px;
+  max-width: 560px;
 }
-[data-iii-ui="state"] .state-ui-editor-foot {
+
+/* ── value workspace ────────────────────────────────────────────────── */
+
+[data-iii-ui="state"] .state-ui-doc {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-panel);
+}
+[data-iii-ui="state"] .state-ui-doc-inner {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* workspace header — stable across loading/error/loaded states */
+[data-iii-ui="state"] .state-ui-doc-head {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-top: 12px;
-  font-size: 12px;
   flex-wrap: wrap;
+  gap: 8px 12px;
+  min-height: 52px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  background: var(--color-panel-raised);
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="state"] .state-ui-doc-identity {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 140px;
 }
-[data-iii-ui="state"] .state-ui-saved { color: var(--color-ok); }
-[data-iii-ui="state"] .state-ui-invalid { color: var(--color-alert); }
-[data-iii-ui="state"] .state-ui-dirty { color: var(--color-ink-faint); }
-[data-iii-ui="state"] .state-ui-server { color: var(--color-warn); }
-[data-iii-ui="state"] .state-ui-linklike {
-  background: transparent;
+[data-iii-ui="state"] .state-ui-doc-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+/* The text needs its own box — ellipsis doesn't reach into a flex row. */
+[data-iii-ui="state"] .state-ui-doc-name .txt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-iii-ui="state"] .state-ui-doc-crumb {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  color: var(--color-ink-ghost);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-iii-ui="state"] .state-ui-dirty-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  flex-shrink: 0;
+}
+[data-iii-ui="state"] .state-ui-save-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+[data-iii-ui="state"] .state-ui-save-note {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-ghost);
+  white-space: nowrap;
+}
+
+/* status banners sit directly under the header, near what they describe */
+[data-iii-ui="state"] .state-ui-banner {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  font-size: 12.5px;
+  color: var(--color-ink);
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="state"] .state-ui-banner.warn { background: var(--color-warn-muted); }
+[data-iii-ui="state"] .state-ui-banner.alert { background: var(--color-alert-muted); }
+[data-iii-ui="state"] .state-ui-banner .detail {
+  display: block;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11.5px;
+  color: var(--color-ink-faint);
+  word-break: break-word;
+}
+[data-iii-ui="state"] .state-ui-linkish {
   border: 0;
+  background: transparent;
   padding: 0;
-  font-family: inherit;
-  font-size: inherit;
+  font: inherit;
+  font-size: 12.5px;
   color: var(--color-accent);
-  cursor: pointer;
   text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+[data-iii-ui="state"] .state-ui-linkish:hover { color: var(--color-accent-hover); }
+[data-iii-ui="state"] .state-ui-linkish.quiet { color: var(--color-ink-faint); }
+[data-iii-ui="state"] .state-ui-linkish:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* back affordance (drill-in flow) */
+[data-iii-ui="state"] .state-ui-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-ink-faint);
+  cursor: pointer;
+}
+[data-iii-ui="state"] .state-ui-back:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="state"] .state-ui-back:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
+}
+[data-iii-ui="state"] .state-ui-back-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* the editor pane — Monaco grows with content, the pane scrolls */
+[data-iii-ui="state"] .state-ui-doc-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+[data-iii-ui="state"] .state-ui-code {
+  min-height: 100%;
+}
+
+/* value loading lines */
+[data-iii-ui="state"] .state-ui-doc-loading {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 28px 32px;
+}
+
+/* status bar */
+[data-iii-ui="state"] .state-ui-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 26px;
+  padding: 4px 16px;
+  flex-shrink: 0;
+  background: var(--color-panel-raised);
+  border-top: 1px solid var(--color-edge);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  color: var(--color-ink-ghost);
+  font-variant-numeric: tabular-nums;
+}
+[data-iii-ui="state"] .state-ui-statusbar .spacer { flex: 1; }
+[data-iii-ui="state"] .state-ui-statusbar .status {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-iii-ui="state"] .state-ui-statusbar .status.alert { color: var(--color-alert); }
+[data-iii-ui="state"] .state-ui-statusbar .status.ok { color: var(--color-ok); }
+
+/* workspace empty state — teaches the next action, not the absence */
+[data-iii-ui="state"] .state-ui-hero {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 48px 24px;
+  text-align: center;
+}
+[data-iii-ui="state"] .state-ui-hero-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--color-ink-ghost);
+  margin-bottom: 8px;
+}
+[data-iii-ui="state"] .state-ui-hero-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+[data-iii-ui="state"] .state-ui-hero-body {
+  margin: 0;
+  max-width: 460px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="state"] .state-ui-hero-hint {
+  margin: 8px 0 0;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-ghost);
+}
+[data-iii-ui="state"] .state-ui-hero-hint kbd {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-edge);
+  border-radius: 4px;
+  padding: 1px 5px;
 }
 
 /* --- function-trigger message (chat / traces card) ------------------- */
@@ -226,3 +633,9 @@
   color: var(--color-ink);
 }
 [data-iii-ui="state"] .state-ui-checkrow input { accent-color: var(--color-accent); }
+[data-iii-ui="state"] .state-ui-error {
+  border: 1px solid var(--color-alert);
+  color: var(--color-alert);
+  padding: 10px 12px;
+  font-size: 12.5px;
+}