@try-works/dsh-memory 0.1.19 → 0.1.20

package/src/client/index.js

@@ -1,886 +1,886 @@
-// dsh-memory browser half: the Settings -> Memory page.
-//
-// Plain JavaScript by necessity: DSH's client module system serves this file to the
-// page as a lazy-CJS bundle, so it IS the shipped artifact. The factory receives the
-// browser module table's require and returns { inject, apply }.
-//
-// Only 'react' is requested. Harness client packages are deliberately not imported:
-// they change without notice, plain JS gets no type check against them, and a throwing
-// component blanks the slot entry. Controls and styles are written here, using only
-// theme tokens that actually exist on the shipped settings pages -- a token that does
-// not exist is an invalid declaration, the browser drops it, and the page degrades
-// into undifferentiated prose. The page mirrors a shipped settings section: the same
-// column width, card chrome, type scale and control metrics.
-window.__ModuleLoader__.load({
-  // Must be the package name: the web client loader looks up this exact id.
-  // The Cordis entry id (`dsh-memory`) is a different string used only for settings.
-  id: '@try-works/dsh-memory',
-  factory: (require) => {
-    var module = { exports: {} }
-    var exports = module.exports
-    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
-
-    const react = require('react')
-
-    /** Page styles, prefixed to avoid colliding with host styles. */
-    const CSS = [
-      '.dsm-page {',
-      '  display: flex;',
-      '  flex-direction: column;',
-      '  gap: 12px;',
-      '  max-width: 720px;',
-      '  color: var(--dsw-alias-label-primary);',
-      '}',
-      '.dsm-title {',
-      '  margin: 0;',
-      '  font-size: 16px;',
-      '  line-height: 24px;',
-      '  font-weight: 500;',
-      '  color: var(--dsw-alias-label-primary);',
-      '}',
-      '.dsm-intro {',
-      '  margin: 0;',
-      '  font-size: 14px;',
-      '  line-height: 22px;',
-      '  color: var(--dsw-alias-label-tertiary);',
-      '}',
-      '.dsm-card {',
-      '  border: 0.5px solid var(--dsw-alias-settings-card-stroke);',
-      '  background: var(--dsw-alias-settings-card-fill);',
-      '  border-radius: var(--dsw-radius-xl);',
-      '  padding: 12px 14px;',
-      '  display: flex;',
-      '  flex-direction: column;',
-      '  gap: 2px;',
-      '}',
-      '.dsm-field {',
-      '  display: flex;',
-      '  flex-direction: column;',
-      '  gap: 4px;',
-      '  padding: 6px 0;',
-      '}',
-      '.dsm-field-label {',
-      '  font-size: 12px;',
-      '  line-height: 18px;',
-      '  color: var(--dsw-alias-label-secondary);',
-      '}',
-      '.dsm-field-help {',
-      '  margin: 0;',
-      '  font-size: 12px;',
-      '  line-height: 18px;',
-      '  color: var(--dsw-alias-label-tertiary);',
-      '}',
-      '.dsm-input,',
-      '.dsm-select {',
-      '  box-sizing: border-box;',
-      '  width: 100%;',
-      '  height: 32px;',
-      '  padding: 0 10px;',
-      '  border: 1px solid var(--dsw-alias-border-l2);',
-      '  border-radius: var(--dsw-radius-sm);',
-      '  background: var(--dsw-alias-bg-layer-1);',
-      '  color: var(--dsw-alias-label-primary);',
-      '  font-family: var(--ds-font-family-code);',
-      '  font-size: 12px;',
-      '}',
-      '.dsm-select {',
-      '  font-family: inherit;',
-      '  cursor: pointer;',
-      '}',
-      '.dsm-input:focus-visible,',
-      '.dsm-select:focus-visible {',
-      '  outline: 2px solid var(--dsw-alias-brand-primary);',
-      '  outline-offset: 1px;',
-      '}',
-      '.dsm-input:disabled,',
-      '.dsm-select:disabled {',
-      '  opacity: 0.6;',
-      '  cursor: default;',
-      '}',
-      '.dsm-actions {',
-      '  display: flex;',
-      '  align-items: center;',
-      '  gap: 10px;',
-      '  padding-top: 10px;',
-      '}',
-      '.dsm-button {',
-      '  height: 30px;',
-      '  padding: 0 14px;',
-      '  border: none;',
-      '  border-radius: var(--dsw-radius-sm);',
-      '  background: var(--dsw-alias-button-primary-fill);',
-      '  color: var(--dsw-alias-label-primary-inverted);',
-      '  font-family: inherit;',
-      '  font-size: 13px;',
-      '  cursor: pointer;',
-      '}',
-      '.dsm-button:hover:not(:disabled) {',
-      '  background: var(--dsw-alias-button-primary-hover);',
-      '}',
-      '.dsm-button:disabled {',
-      '  opacity: 0.6;',
-      '  cursor: default;',
-      '}',
-      '.dsm-button:focus-visible {',
-      '  outline: 2px solid var(--dsw-alias-brand-primary);',
-      '  outline-offset: 1px;',
-      '}',
-      '.dsm-status {',
-      '  margin: 0;',
-      '  font-size: 12px;',
-      '  line-height: 18px;',
-      '  color: var(--dsw-alias-label-tertiary);',
-      '}',
-      '.dsm-status-ok {',
-      '  color: var(--dsw-alias-state-success-primary);',
-      '}',
-      '.dsm-status-error {',
-      '  color: var(--dsw-alias-state-error-primary);',
-      '}',
-      '.dsm-note {',
-      '  margin: 0;',
-      '  font-size: 12px;',
-      '  line-height: 18px;',
-      '  color: var(--dsw-alias-label-tertiary);',
-      '}',
-      '.dsm-code {',
-      '  font-family: var(--ds-font-family-code);',
-      '}',
-    ].join('\n')
-
-
-    // ---------------------------------------------------------------------------------
-    // Memory map: the inline face of the memory_map tool.
-    //
-    // It renders the tool result's structured `meta`, which is the value the tool returned.
-    // That is not a shortcut, it is the only honest source: a browser half cannot ask the
-    // host for anything (dsh.client has no data channel, remotes are an allowlisted
-    // application assembly, and the plugin route serves only client JS), so the tool result
-    // IS the channel. Recomputing the numbers here would invent a second source that could
-    // disagree with the one the agent was shown, and the disagreement would be invisible.
-    // ---------------------------------------------------------------------------------
-    const INK = '#1A1A18'
-    const MUTED = '#6E6E6B'
-    const FAINT = '#8A8A87'
-    const LINE = '#EFEFEC'
-    const RUST = '#8A3F1E'
-    const COPPER = '#C77E4A'
-    const QUIET = '#6B6B68'
-    const GEIST = 'Geist, system-ui, -apple-system, sans-serif'
-    const MONO = 'Geist Mono, ui-monospace, SFMono-Regular, monospace'
-    // Deepest tone for the largest layer, so the ramp itself encodes proportion and seven
-    // layers need seven TONES rather than seven hues.
-    const TONES = ['#2A3644', '#3A4757', '#4C5A6B', '#64717F', '#808C99', '#9DA8B3', '#BCC4CC']
-
-    /** Thousands separators, so a four-digit count is readable at a glance. */
-    function fmt(value) {
-      return typeof value === 'number' && Number.isFinite(value) ? value.toLocaleString('en-US') : String(value)
-    }
-
-    /** How a verdict is written and coloured: the WORD carries the meaning, colour agrees. */
-    function verdictStyle(verdict) {
-      if (verdict === 'stale') return { color: RUST, weight: 500 }
-      if (verdict === 'aging') return { color: COPPER, weight: 500 }
-      if (verdict === 'unverified' || verdict === 'empty') return { color: QUIET, weight: 500 }
-      return { color: QUIET, weight: 400 }
-    }
-
-    function box(style, children) { return react.createElement('div', { style: style }, children) }
-
-    /** The stacked layer bar. Each width is a count as a fraction of the total. */
-    function LayerBar(props) {
-      const total = props.layers.reduce(function (sum, l) { return sum + l.count }, 0)
-      if (!total) return null
-      const segs = props.layers.map(function (layer, i) {
-        return react.createElement('div', {
-          key: layer.name,
-          style: { width: (layer.count / total * 100).toFixed(3) + '%', flexShrink: 0, background: TONES[i % TONES.length] },
-        })
-      })
-      return box({ display: 'flex', height: props.height || '26px', borderRadius: '7px', overflow: 'hidden' }, segs)
-    }
-
-    /** The legend: fixed dot and name slots, so every count shares one vertical lane. */
-    function Legend(props) {
-      const items = props.layers.map(function (layer, i) {
-        return box({ key: layer.name, display: 'flex', alignItems: 'center', gap: '7px' }, [
-          react.createElement('div', { key: 'd', style: { width: '6px', height: '6px', flexShrink: 0, borderRadius: '2px', background: TONES[i % TONES.length] } }),
-          react.createElement('div', { key: 'n', style: { fontFamily: GEIST, fontSize: '11px', color: '#3A3A38', width: '62px', flexShrink: 0 } }, layer.name),
-          react.createElement('div', { key: 'c', style: { fontFamily: MONO, fontSize: '10px', color: QUIET } }, fmt(layer.count)),
-        ])
-      })
-      const half = Math.ceil(items.length / 2)
-      return box({ display: 'flex', flexDirection: 'column', gap: '7px' }, [
-        box({ key: 'a', display: 'flex', gap: '22px' }, items.slice(0, half)),
-        box({ key: 'b', display: 'flex', gap: '22px' }, items.slice(half)),
-      ])
-    }
-
-    function Stat(props) {
-      return box({ display: 'flex', alignItems: 'baseline', gap: '6px' }, [
-        react.createElement('div', { key: 'n', style: { fontFamily: MONO, fontSize: props.size || '15px', color: props.color || INK } }, props.value),
-        react.createElement('div', { key: 'l', style: { fontFamily: GEIST, fontSize: '11px', color: MUTED } }, props.label),
-      ])
-    }
-
-    function Chip(props) {
-      return react.createElement('div', {
-        style: { padding: '3px 8px', borderRadius: '5px', fontFamily: MONO, fontSize: '10px', background: props.hot ? '#FAEDE6' : '#F4F4F2', color: props.hot ? RUST : '#3A3A38' },
-      }, props.text)
-    }
-
-    /** Section label, with an optional right-hand note. */
-    function sectionLabel(text, note) {
-      return box({ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }, [
-        react.createElement('div', { key: 'l', style: { fontFamily: GEIST, fontSize: '11px', fontWeight: 500, letterSpacing: '0.08em', color: MUTED } }, text),
-        note ? react.createElement('div', { key: 'r', style: { fontFamily: GEIST, fontSize: '11px', color: FAINT } }, note) : null,
-      ])
-    }
-
-    /** The three-bar mark: a miniature of the layer bar, so the card is identifiable at a glance. */
-    function Glyph() {
-      const bar = function (key, width, tone) {
-        return react.createElement('div', { key: key, style: { height: '2px', width: width, borderRadius: '1px', background: tone } })
-      }
-      return box({ width: '14px', height: '14px', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: '2px', justifyContent: 'center' }, [
-        bar('a', '14px', TONES[0]), bar('b', '10px', TONES[3]), bar('c', '6px', TONES[5]),
-      ])
-    }
-
-    /** The RECEIVED panel: what memory put in front of this session, with its freshness. */
-    function ReceivedPanel(props) {
-      const sections = (props.received && props.received.sections) || []
-      if (!sections.length) return null
-      const rows = sections.map(function (section) {
-        const style = verdictStyle(section.verdict)
-        return box({ key: section.name, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }, [
-          react.createElement('div', { key: 'n', style: { fontFamily: GEIST, fontSize: '12px', color: '#3A3A38' } }, section.name),
-          react.createElement('div', { key: 'v', style: { fontFamily: MONO, fontSize: '11px', color: style.color, fontWeight: style.weight } }, section.marker ? section.marker.replace(/[\[\]]/g, '').trim() : 'fresh'),
-        ])
-      })
-      return box({ display: 'flex', flexDirection: 'column', gap: '10px' }, [
-        sectionLabel('RECEIVED', fmt(props.received.chars) + ' chars'),
-        box({ key: 'rows', display: 'flex', flexDirection: 'column', gap: '7px' }, rows),
-      ])
-    }
-
-    /** The WRITTEN panel: what THIS session recorded, by layer and by entry. */
-    function WrittenPanel(props) {
-      const written = props.written
-      if (!written || !written.total) return null
-      const chips = Object.keys(written.byLayer).map(function (layer) {
-        return react.createElement(Chip, { key: layer, text: layer + ' ' + written.byLayer[layer] })
-      })
-      const entries = written.entries.map(function (entry) {
-        return box({ key: entry.id, display: 'flex', alignItems: 'baseline' }, [
-          react.createElement('div', { key: 'i', style: { fontFamily: MONO, fontSize: '11px', color: QUIET, width: '186px', flexShrink: 0 } }, entry.id),
-          react.createElement('div', { key: 'l', style: { fontFamily: GEIST, fontSize: '11px', color: FAINT, width: '72px', flexShrink: 0 } }, entry.layer),
-          react.createElement('div', { key: 'h', style: { fontFamily: GEIST, fontSize: '12px', color: '#3A3A38' } }, entry.heading),
-        ])
-      })
-      const more = written.total > written.entries.length
-      return box({ display: 'flex', flexDirection: 'column', gap: '12px' }, [
-        sectionLabel('WRITTEN', fmt(written.total) + ' this session'),
-        box({ key: 'c', display: 'flex', gap: '5px' }, chips),
-        box({ key: 'e', display: 'flex', flexDirection: 'column', gap: '7px' }, entries),
-        more ? react.createElement('div', { key: 'm', style: { fontFamily: GEIST, fontSize: '11px', color: FAINT } }, '+ ' + fmt(written.total - written.entries.length) + ' more') : null,
-      ])
-    }
-
-    /**
-     * The memory_map tool row.
-     *
-     * Every value comes from the result's own `meta`. Nothing is fetched and nothing is
-     * inferred from the rendered text: when the snapshot is absent the card says so, rather
-     * than drawing a shape that merely looks like data.
-     */
-    function MemoryMapCard(props) {
-      const block = props ? props.block : null
-      const meta = block && typeof block.meta === 'object' && block.meta !== null ? block.meta : null
-      const store = meta && meta.store ? meta.store : null
-      const session = meta && meta.session ? meta.session : null
-      const summary = store ? fmt(store.total) + ' entries · ' + fmt(store.scopeTotal) + ' scopes' : ''
-      const headStyle = { height: '46px', flexShrink: 0, display: 'flex', alignItems: 'center', gap: '10px', padding: '0 16px', borderBottom: '1px solid ' + LINE }
-      const head = box(headStyle, [
-        react.createElement(Glyph, { key: 'g' }),
-        react.createElement('div', { key: 't', style: { fontFamily: GEIST, fontSize: '13px', fontWeight: 500, color: INK } }, 'Memory map'),
-        react.createElement('div', { key: 's', style: { flex: 1 } }),
-        react.createElement('div', { key: 'c', style: { fontFamily: GEIST, fontSize: '12px', color: MUTED } }, summary),
-      ])
-      const body = []
-      if (store) {
-        body.push(box({ key: 'l', display: 'flex', flexDirection: 'column', gap: '12px' }, [
-          react.createElement(LayerBar, { key: 'bar', layers: store.layers }),
-          react.createElement(Legend, { key: 'leg', layers: store.layers }),
-        ]))
-        const attention = (store.queue && store.queue.attention) || []
-        const chips = attention.slice(0, 3).map(function (row) {
-          return react.createElement(Chip, { key: row.state + row.reason, text: fmt(row.count) + ' ' + row.state, hot: true })
-        })
-        if (store.queue && store.queue.waiting) chips.push(react.createElement(Chip, { key: 'waiting', text: fmt(store.queue.waiting) + ' waiting' }))
-        const stats = [
-          react.createElement(Stat, { key: 'a', value: fmt(store.freshness.fresh), label: 'fresh' }),
-          store.freshness.stale ? react.createElement(Stat, { key: 'b', value: fmt(store.freshness.stale), label: 'stale', color: RUST }) : null,
-          store.freshness.skip ? react.createElement(Stat, { key: 'c', value: fmt(store.freshness.skip), label: 'superseded' }) : null,
-        ]
-        const footStyle = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid ' + LINE, paddingTop: '13px', gap: '16px' }
-        body.push(box({ key: 'f', display: 'flex', flexDirection: 'column' }, [
-          box(Object.assign({ key: 'row' }, footStyle), [
-            box({ key: 's', display: 'flex', gap: '18px' }, stats),
-            box({ key: 'q', display: 'flex', gap: '5px', flexWrap: 'wrap' }, chips),
-          ]),
-        ]))
-      }
-      if (session && session.received) body.push(react.createElement(ReceivedPanel, { key: 'r', received: session.received }))
-      if (session && session.written) body.push(react.createElement(WrittenPanel, { key: 'w', written: session.written }))
-      if (!body.length) body.push(react.createElement('div', { key: 'none', style: { fontFamily: GEIST, fontSize: '12px', color: MUTED } }, 'No snapshot was recorded for this call.'))
-      const cardStyle = { maxWidth: '760px', border: '1px solid #E7E7E4', borderRadius: '12px', background: '#FFFFFF', display: 'flex', flexDirection: 'column' }
-      const bodyStyle = { padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px' }
-      return box(cardStyle, [head, box(Object.assign({ key: 'b' }, bodyStyle), body)]);
-    }
-
-    /**
-     * The Memory tab: this session's memory activity, in one place.
-     *
-     * Its data is the newest memory snapshot in this conversation, from either of two routes.
-     *
-     * The one that matters is memory/map: a browser half cannot ask the host for anything, so the
-     * session record is the only channel - and rather than wait for someone to call a tool, the HOST
-     * publishes the map into that record itself. SessionEventMap is merge-extensible by design and a
-     * log-only event never reaches the model surface, so this is the harness's own answer for a view
-     * that must report state nobody asked about.
-     *
-     * A memory_map TOOL RESULT is still honoured, newest wins, because a session whose snapshots
-     * predate the publisher would otherwise draw nothing. That route carries its value on `meta` -
-     * the object ui-chat's conversation-nodes/tool.ts forwards as `meta: match.event.data.meta`.
-     *
-     * READING IT: the session's contiguous event window is published as the documented
-     * public member SessionBinding.eventSource (ObservableSnapshot<SessionEventWindow>, see
-     * api/session-controller/src/client/contract/events.ts), reached through
-     * ctx.sessions.binding(sessionId). That is the same source the Chat and Trajectory tabs
-     * are assembled from, so the tab adds no new channel and cannot disagree with them.
-     * Sessions is reached with ctx.get() because it is a reachable service, not a required
-     * one: making it an inject dependency would hold the whole plugin - Settings included -
-     * pending behind a service the settings page does not need.
-     */
-    const MEMORY_STATE_NONE = { kind: 'none', meta: null, seq: null, time: null }
-    const MEMORY_STATE_UNAVAILABLE = { kind: 'unavailable', meta: null, seq: null, time: null }
-    // Distinct from NONE on purpose. PTC mode dispatches a tool from inside a run_code program and
-    // records tool/ptc-dispatch, which carries the rendered text but NO structured value, so there
-    // is genuinely nothing to draw - and telling the reader 'memory_map has not run here' would be
-    // false.
-    const MEMORY_STATE_NESTED = { kind: 'nested', meta: null, seq: null, time: null }
-
-    /**
-     * Find the newest memory snapshot in the window and say what it carried.
-     *
-     * Two routes, newest wins. The host publishes a memory/map event on its own cadence, which is
-     * what lets the tab draw with no tool call. A memory_map tool/result is also honoured: a
-     * tool/result event names its call only by id, so call events are indexed first, and a result
-     * whose pair has been paged out is still recognised by the shape of its own value, since
-     * nothing else produces { scope, generatedAt }.
-     */
-    function readMemoryState(window) {
-      const entries = window && Array.isArray(window.entries) ? window.entries : null
-      if (!entries) return MEMORY_STATE_NONE
-      const calls = Object.create(null)
-      let nested = false
-      for (let i = 0; i < entries.length; i += 1) {
-        const entry = entries[i]
-        const event = entry && entry.type === 'event' ? entry.event : null
-        if (event && event.type === 'tool/call' && event.data && event.data.name === 'memory_map') calls[event.data.callId] = true
-        // A nested dispatch is a real call the agent made; it simply has no structured result.
-        if (event && event.type === 'tool/ptc-dispatch' && event.data && event.data.name === 'memory_map') nested = true
-      }
-      // Newest first: the tab describes the session as it stands now, not as it first was.
-      for (let i = entries.length - 1; i >= 0; i -= 1) {
-        const entry = entries[i]
-        const event = entry && entry.type === 'event' ? entry.event : null
-        if (!event) continue
-        // The host PUBLISHES the map into the log itself, so the tab fills in on its own and needs
-        // nobody to call a tool first. This is the route that matters; the tool/result route below
-        // is kept so a session whose snapshots predate the publisher still draws.
-        if (event.type === 'memory/map') {
-          const published = event.data
-          if (published === null || typeof published !== 'object') continue
-          if (typeof published.generatedAt !== 'string' || typeof published.scope !== 'string') continue
-          return { kind: 'ready', meta: published, seq: event.seq, time: event.time }
-        }
-        if (event.type !== 'tool/result') continue
-        const data = event.data || {}
-        const message = data.message || null
-        const callId = message && message.source ? message.source.callId : undefined
-        const meta = data.meta
-        const shaped = meta !== null && typeof meta === 'object'
-          && typeof meta.generatedAt === 'string' && typeof meta.scope === 'string'
-        if (calls[callId] !== true && !shaped) continue
-        // A failed call is not a snapshot: it is the absence of one, and it is said so.
-        if (message && message.isError === true) continue
-        if (meta === null || typeof meta !== 'object') return { kind: 'empty', meta: null, seq: event.seq, time: event.time }
-        return { kind: 'ready', meta: meta, seq: event.seq, time: event.time }
-      }
-      return nested ? MEMORY_STATE_NESTED : MEMORY_STATE_NONE
-    }
-
-    /**
-     * The tab's observable source over one session's event window.
-     *
-     * It re-resolves the binding on every read, so a session whose binding materializes
-     * after the tab has already rendered still fills in; while no window exists it listens
-     * to the session list, which publishes when a generation is retained or opened, so the
-     * tab wakes up instead of staying dark until an unrelated re-render. Values are cached by
-     * window identity, which keeps getSnapshot referentially stable between publications.
-     */
-    function createMemorySource(ctx, sessionId) {
-      const listeners = []
-      let subscribedTo = null
-      let unsubscribe = null
-      let cachedWindow = null
-      let cachedState = MEMORY_STATE_NONE
-      const wake = () => {
-        cachedWindow = null
-        for (let i = 0; i < listeners.length; i += 1) listeners[i]()
-      }
-      const eventSourceOf = () => {
-        const sessions = ctx.get('sessions')
-        if (!sessions || typeof sessions.binding !== 'function') return null
-        const binding = sessions.binding(sessionId)
-        return binding && binding.eventSource ? binding.eventSource : null
-      }
-      const attach = (source) => {
-        if (unsubscribe) { unsubscribe(); unsubscribe = null }
-        subscribedTo = source
-        if (source) { unsubscribe = source.subscribe(wake); return }
-        const sessions = ctx.get('sessions')
-        const list = sessions && sessions.list
-        if (list && typeof list.subscribe === 'function' && listeners.length) unsubscribe = list.subscribe(wake)
-      }
-      const sync = () => {
-        const source = eventSourceOf()
-        if (listeners.length) { if (source !== subscribedTo) attach(source) }
-        else if (subscribedTo) attach(null)
-        return source
-      }
-      return {
-        getSnapshot: () => {
-          const source = sync()
-          if (!source) return MEMORY_STATE_UNAVAILABLE
-          const window = source.getSnapshot()
-          if (window !== cachedWindow) { cachedWindow = window; cachedState = readMemoryState(window) }
-          return cachedState
-        },
-        subscribe: (listener) => {
-          listeners.push(listener)
-          sync()
-          return () => {
-            const index = listeners.indexOf(listener)
-            if (index >= 0) listeners.splice(index, 1)
-            if (!listeners.length) attach(null)
-          }
-        },
-      }
-    }
-
-    /** Selector for the injected memory hook: the source caches by window, so identity holds. */
-    function memoryStateOf(value) { return value === undefined ? MEMORY_STATE_NONE : value }
-
-    /** The sheet the panels sit on: their ink colours are fixed, so the surface must be too. */
-    function sheet(key, children) {
-      return box({ key: key, border: '1px solid #E7E7E4', borderRadius: '12px', background: '#FFFFFF', padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px' }, children)
-    }
-
-    /** The snapshot's OWN stamp, never the clock: a snapshot taken an hour ago must read so. */
-    function whenText(iso) {
-      const at = new Date(iso)
-      return Number.isNaN(at.getTime()) ? String(iso) : at.toLocaleString()
-    }
-
-    /**
-     * What the tab says when there is nothing to draw.
-     *
-     * The distinctions matter: 'nothing has been published for this session yet' and 'a call ran but
-     * its result carries no snapshot' are different facts, and neither of them is zero entries.
-     * None of them is ever fixed by asking the reader to do something - the host publishes on its
-     * own, so an empty tab is a statement about the session, not a task for the user.
-     */
-    function emptyMemoryCopy(state) {
-      if (state.kind === 'unavailable') {
-        return {
-          title: 'The session record is not attached yet',
-          lines: [
-            'This tab reads memory from the conversation it belongs to - the event window of the open session - and that window is not available here.',
-            'Settings, Memory still reads the live store through the host, so the store itself stays visible either way.',
-          ],
-        }
-      }
-      if (state.kind === 'empty') {
-        return {
-          title: 'The last memory_map result carried no snapshot',
-          lines: [
-            'The call is part of this session, but no structured value is attached to its result: a call that failed, or one whose result was replaced while the context was compacted.',
-            'The host publishes a fresh snapshot on its own cadence, so this clears itself.',
-          ],
-        }
-      }
-      if (state.kind === 'nested') {
-        return {
-          title: 'memory_map ran here, but not as a readable result',
-          lines: [
-            'This session called memory_map from inside a run_code program. Those calls are recorded as nested dispatches, which keep the rendered text and not the structured value this tab draws.',
-            'Calling memory_map directly - scope "session" or "all" - records a result the panels can read.',
-          ],
-        }
-      }
-      return {
-        title: 'Nothing published for this session yet',
-        lines: [
-          'This tab draws the memory snapshot the host publishes into this conversation as it runs, so nothing here has to be asked for.',
-          'Nothing has been published for this session yet. It arrives with the first turn and refreshes as the store changes.',
-        ],
-      }
-    }
-
-    /** The honest empty state: prose that says what is missing, never a shape that reads as data. */
-    function MemoryEmpty(props) {
-      const copy = emptyMemoryCopy(props.state)
-      const lines = copy.lines.map(function (line, index) {
-        return react.createElement('div', { key: String(index), style: { fontFamily: GEIST, fontSize: '12px', lineHeight: 1.6, color: MUTED } }, line)
-      })
-      return sheet('empty', [
-        react.createElement('div', { key: 't', style: { fontFamily: GEIST, fontSize: '13px', fontWeight: 500, color: INK } }, copy.title),
-        box({ key: 'b', display: 'flex', flexDirection: 'column', gap: '8px' }, lines),
-      ])
-    }
-
-    /** The panels, drawn from the snapshot memory_map actually returned and nothing else. */
-    function MemoryPanels(props) {
-      const meta = props.meta
-      const store = meta.store || null
-      const session = meta.session || null
-      const parts = []
-      const chips = [react.createElement(Chip, { key: 'scope', text: 'scope ' + String(meta.scope) })]
-      if (meta.generatedAt) chips.push(react.createElement(Chip, { key: 'at', text: whenText(meta.generatedAt) }))
-      if (session) chips.push(react.createElement(Chip, { key: 'where', text: session.workspace ? 'workspace ' + session.workspace : 'global layer' }))
-      parts.push(box({ key: 'chips', display: 'flex', gap: '5px', flexWrap: 'wrap' }, chips))
-      if (store) {
-        const attention = (store.queue && store.queue.attention) || []
-        const queue = attention.slice(0, 3).map(function (row) {
-          return react.createElement(Chip, { key: row.state + row.reason, text: fmt(row.count) + ' ' + row.state, hot: true })
-        })
-        if (store.queue && store.queue.waiting) queue.push(react.createElement(Chip, { key: 'waiting', text: fmt(store.queue.waiting) + ' waiting' }))
-        parts.push(sheet('store', [
-          sectionLabel('STORE', fmt(store.total) + ' entries · ' + fmt(store.scopeTotal) + ' scopes'),
-          react.createElement(LayerBar, { key: 'bar', layers: store.layers, height: '30px' }),
-          react.createElement(Legend, { key: 'leg', layers: store.layers }),
-          box({ key: 'f', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '16px' }, [
-            box({ key: 'st', display: 'flex', gap: '18px' }, [
-              react.createElement(Stat, { key: 'a', value: fmt(store.freshness.fresh), label: 'fresh' }),
-              store.freshness.stale ? react.createElement(Stat, { key: 'b', value: fmt(store.freshness.stale), label: 'stale', color: RUST }) : null,
-              store.freshness.skip ? react.createElement(Stat, { key: 'c', value: fmt(store.freshness.skip), label: 'superseded' }) : null,
-            ]),
-            box({ key: 'q', display: 'flex', gap: '5px', flexWrap: 'wrap' }, queue),
-          ]),
-        ]))
-      }
-      // A panel with nothing in it is omitted, or said in one line of prose: an empty card is
-      // a shape that reads as data, which is exactly what this tab must never draw.
-      const received = session ? session.received : null
-      if (received && received.sections && received.sections.length) {
-        parts.push(sheet('received', [react.createElement(ReceivedPanel, { key: 'r', received: received })]))
-      }
-      const written = session ? session.written : null
-      if (written && written.total) {
-        parts.push(sheet('written', [react.createElement(WrittenPanel, { key: 'w', written: written })]))
-      } else if (written) {
-        parts.push(react.createElement('div', {
-          key: 'none',
-          style: { fontFamily: GEIST, fontSize: '12px', color: 'var(--dsw-alias-label-tertiary)' },
-        }, 'This session has not recorded an entry yet.'))
-      }
-      parts.push(react.createElement('div', {
-        key: 'src',
-        style: { fontFamily: GEIST, fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)', lineHeight: 1.6 },
-      }, 'Published by the host into this session (event #' + fmt(props.seq) + '), not re-read from the store. It refreshes on its own as the store changes.'))
-      return box({ display: 'flex', flexDirection: 'column', gap: '18px' }, parts)
-    }
-
-    /**
-     * The Memory tab.
-     *
-     * The hook arrives as part of this entry's injected standard kit: the inject face
-     * publishes hooks.memory, which the renderer binds to a useMemory prop, exactly as
-     * ui-trajectory's view receives useDuration. It is present for the whole life of a mount
-     * or absent for the whole of it, so this branch never changes hook order. The selector is
-     * required: the bound hook is a selector hook and calls it without a guard.
-     */
-    function MemoryTabView(props) {
-      const useMemory = props && typeof props.useMemory === 'function' ? props.useMemory : null
-      const state = useMemory ? useMemory(memoryStateOf) : MEMORY_STATE_NONE
-      const page = { flex: '1 1 auto', minHeight: 0, overflowY: 'auto' }
-      const inner = { maxWidth: '760px', margin: '0 auto', padding: '26px 28px 44px', display: 'flex', flexDirection: 'column', gap: '18px' }
-      const head = box({ display: 'flex', alignItems: 'center', gap: '10px' }, [
-        react.createElement(Glyph, { key: 'g' }),
-        // Theme token, not the fixed ink palette: this line sits on the shell background,
-        // which the palette knows nothing about.
-        react.createElement('div', { key: 't', style: { fontFamily: GEIST, fontSize: '15px', fontWeight: 500, color: 'var(--dsw-alias-label-primary)' } }, 'Memory'),
-      ])
-      const intro = react.createElement('div', {
-        key: 'i',
-        style: { fontFamily: GEIST, fontSize: '12px', lineHeight: 1.6, color: 'var(--dsw-alias-label-tertiary)' },
-      }, 'What memory put in front of this conversation, what the conversation wrote back, and the state of the store.')
-      const body = state.kind === 'ready'
-        ? react.createElement(MemoryPanels, { key: 'p', meta: state.meta, seq: state.seq })
-        : react.createElement(MemoryEmpty, { key: 'e', state: state })
-      return box(page, [box(inner, [head, intro, body])])
-    }
-
-    /** Fields rendered on this page, in order. */
-    const FIELDS = [
-      { key: 'memoryRoot', label: 'Memory root', hint: 'Local folder or drive that holds the store.', placeholder: 'D:\\Memory' },
-      { key: 'gitRemote', label: 'GitHub origin', hint: 'Git remote URL. Leave empty to keep the store local-only.', placeholder: 'git@github.com:you/memory.git' },
-      { key: 'gitBranch', label: 'Branch', hint: 'Branch used for pull and push.', placeholder: 'main' },
-      { key: 'gitToken', label: 'Access token (optional)', kind: 'secret', hint: 'Personal access token for pushing. Stored by the host and never sent back to this page, so the field is always empty: type a new token to replace it, and leave it empty to keep the current one.' },
-    ]
-
-    // The settings namespace is the plugin's ENTRY ID, not its package name. The bundle patch mounts
-    // the package @try-works/dsh-memory as the row `dsh-memory`, while a hand-written row may use
-    // a short id like `memory`. Both must work, so the candidates are tried in order and
-    // the first one the host actually serves wins.
-    const NAMESPACE_CANDIDATES = ['memory', 'dsh-memory']
-
-    function apply(ctx) {
-      // configForms.get() is lazy: it resolves once the namespace appears in the mirror, so
-      // creating a form for a candidate that is never served costs nothing.
-      const forms = NAMESPACE_CANDIDATES.map((ns) => ctx.configForms.get(ns))
-      const served = () => forms.find((f) => {
-        const snap = f.getSnapshot()
-        return snap.status === 'ready' || (snap.value !== undefined)
-      })
-      // Fall back to the first candidate so the page still renders its explanatory copy.
-      const form = {
-        getSnapshot: () => (served() ?? forms[0]).getSnapshot(),
-        subscribe: (listener) => {
-          const disposers = forms.map((f) => f.subscribe(listener))
-          return () => { for (const dispose of disposers) dispose() }
-        },
-        set: (field, value) => (served() ?? forms[0]).set(field, value),
-      }
-
-      /** Read the value a field should display: the draft, else the saved value. */
-      function fieldValue(key, value, draft) {
-        if (draft[key] !== undefined) return draft[key]
-        const saved = value[key]
-        return saved === undefined || saved === null ? '' : saved
-      }
-
-      /**
-       * One secret input. The value is deliberately NEVER read back from the snapshot: the
-       * host redacts it, so echoing it would display a placeholder and - worse - a later save
-       * could write that placeholder over the real token. Empty therefore means 'leave it'.
-       */
-      function secretField(field, draft, edit, disabled) {
-        return react.createElement('div', { className: 'dsm-field', key: field.key },
-          react.createElement('label', { className: 'dsm-field-label', htmlFor: 'dsm-' + field.key }, field.label),
-          react.createElement('input', {
-            id: 'dsm-' + field.key,
-            className: 'dsm-input',
-            type: 'password',
-            autoComplete: 'off',
-            placeholder: 'unchanged',
-            value: draft[field.key] !== undefined ? draft[field.key] : '',
-            disabled,
-            onChange: (event) => edit(field.key, event.target.value),
-          }),
-          react.createElement('p', { className: 'dsm-field-help' }, field.hint))
-      }
-
-      /** One labelled text input. */
-      function textField(field, value, draft, edit, disabled) {
-        return react.createElement('div', { className: 'dsm-field', key: field.key },
-          react.createElement('label', { className: 'dsm-field-label', htmlFor: 'dsm-' + field.key }, field.label),
-          react.createElement('input', {
-            id: 'dsm-' + field.key,
-            className: 'dsm-input',
-            type: 'text',
-            placeholder: field.placeholder,
-            value: fieldValue(field.key, value, draft),
-            disabled,
-            onChange: (event) => edit(field.key, event.target.value),
-          }),
-          react.createElement('p', { className: 'dsm-field-help' }, field.hint))
-      }
-
-      /** The model picker: the configured catalog plus "session default" and any stale value. */
-      function modelField(value, draft, edit, disabled, models) {
-        const selected = fieldValue('summaryModel', value, draft)
-        const common = {
-          id: 'dsm-summaryModel',
-          label: 'Model for memory writes',
-          hint: 'Preferred model for summarizing sessions and consolidating them into entries. If it cannot answer, the next available model is tried automatically, so leaving this empty is fine.',
-        }
-        if (models === null) {
-          // Still loading: stay usable as a text field rather than blocking the page.
-          return react.createElement('div', { className: 'dsm-field', key: 'summaryModel' },
-            react.createElement('label', { className: 'dsm-field-label', htmlFor: common.id }, common.label),
-            react.createElement('input', {
-              id: common.id, className: 'dsm-input', type: 'text', placeholder: 'provider/model',
-              value: selected, disabled, onChange: (event) => edit('summaryModel', event.target.value),
-            }),
-            react.createElement('p', { className: 'dsm-field-help' }, common.hint))
-        }
-        const options = [{ value: '', label: 'Session default (same model as the chat)' }].concat(models)
-        if (selected && !models.some((option) => option.value === selected)) {
-          options.push({ value: selected, label: selected + ' (not currently configured)' })
-        }
-        return react.createElement('div', { className: 'dsm-field', key: 'summaryModel' },
-          react.createElement('label', { className: 'dsm-field-label', htmlFor: common.id }, common.label),
-          react.createElement('select', {
-            id: common.id, className: 'dsm-select', value: selected, disabled,
-            onChange: (event) => edit('summaryModel', event.target.value),
-          }, options.map((option) => react.createElement('option', { key: option.value, value: option.value }, option.label))),
-          react.createElement('p', { className: 'dsm-field-help' }, common.hint))
-      }
-
-      function MemorySettings() {
-        const [snap, setSnap] = react.useState(() => form.getSnapshot())
-        const [draft, setDraft] = react.useState({})
-        const [status, setStatus] = react.useState(null)
-        react.useEffect(() => form.subscribe(() => setSnap(form.getSnapshot())), [])
-
-        // Model list for the write-model picker, from the same catalog the chat uses.
-        const [models, setModels] = react.useState(null)
-        react.useEffect(() => {
-          let alive = true
-          Promise.resolve()
-            .then(() => ctx.remote.session.modelCatalog())
-            .then((response) => {
-              if (!alive) return
-              const groups = response && response.ok && response.value ? (response.value.groups || []) : []
-              const options = []
-              for (const group of groups) {
-                for (const model of (group.models || [])) {
-                  options.push({ value: group.id + '/' + model.id, label: group.name + ' - ' + (model.name || model.id) })
-                }
-              }
-              setModels(options)
-            })
-            .catch(() => { if (alive) setModels([]) })
-          return () => { alive = false }
-        }, [])
-
-        const value = snap.value || {}
-        const edit = (key, next) => setDraft((previous) => {
-          const updated = { ...previous }
-          updated[key] = next
-          return updated
-        })
-
-        if (snap.status === 'unavailable') {
-          return react.createElement('div', { className: 'dsm-page' },
-            react.createElement('style', null, CSS),
-            react.createElement('h2', { className: 'dsm-title' }, 'Memory'),
-            react.createElement('p', { className: 'dsm-intro' }, 'The memory configuration namespace is not exposed to this client.'))
-        }
-
-        const save = async () => {
-          setStatus({ kind: 'busy', text: 'Saving...' })
-          try {
-            let refused = false
-            for (const field of FIELDS.concat([{ key: 'summaryModel' }])) {
-              const next = draft[field.key]
-              // An empty draft means 'not edited'. For a secret that is essential: writing an
-              // empty value would erase the token, and writing the redacted snapshot value
-              // would replace it with a placeholder.
-              if (next === undefined || next === '' || next === value[field.key]) continue
-              const accepted = await form.set(field.key, next)
-              if (accepted === false) refused = true
-            }
-            setStatus(refused
-              ? { kind: 'error', text: 'Refused by the host - see the dsh logs.' }
-              : { kind: 'ok', text: 'Saved.' })
-          } catch (error) {
-            setStatus({ kind: 'error', text: String((error && error.message) || error) })
-          }
-        }
-
-        const disabled = !snap.writable
-        return react.createElement('div', { className: 'dsm-page' },
-          react.createElement('style', null, CSS),
-          react.createElement('h2', { className: 'dsm-title' }, 'Memory'),
-          react.createElement('p', { className: 'dsm-intro' },
-            'Git-backed memory store, scoped to this workspace. Changes apply live and persist to this profile.'),
-          react.createElement('div', { className: 'dsm-card' },
-            // Rendered by kind, not by index: index-based rendering silently mis-assigned fields
-            // the moment one was inserted in the middle.
-            ...FIELDS.map((field) => {
-              if (field.kind === 'secret') return secretField(field, draft, edit, disabled)
-              if (field.kind === 'model') return modelField(value, draft, edit, disabled, models)
-              return textField(field, value, draft, edit, disabled)
-            })),
-          react.createElement('div', { className: 'dsm-actions' },
-            react.createElement('button', {
-              className: 'dsm-button', type: 'button', disabled, onClick: save,
-            }, 'Save'),
-            status
-              ? react.createElement('p', {
-                className: 'dsm-status' + (status.kind === 'ok' ? ' dsm-status-ok' : status.kind === 'error' ? ' dsm-status-error' : ''),
-              }, status.text)
-              : null,
-            snap.writable ? null : react.createElement('p', { className: 'dsm-status' }, 'Read-only: connected from a remote browser.')),
-          react.createElement('p', { className: 'dsm-note' },
-            'Store layout: ',
-            react.createElement('span', { className: 'dsm-code' }, 'global/'),
-            ' (identity, preferences, standing rules) plus ',
-            react.createElement('span', { className: 'dsm-code' }, 'workspaces/<key>/'),
-            ' per associated local folder or repo. Derived state (index/, state/, digests/, logs/) is gitignored and regenerated. Cadence and summarizer budgets are advanced tuning kept in the profile config file, not here.'))
-      }
-
-      ctx.effect(() => {
-        const disposers = []
-        // The inline face of memory_map, registered by the tool's WIRE NAME, which is how the
-        // host finds it. The result carries the data, so the view needs no other channel.
-        disposers.push(ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
-          name: 'tool.call.toolview',
-          key: 'memory_map',
-        }, MemoryMapCard)))
-        // The settings page registers FIRST, and deliberately. It is the established surface;
-        // the tab below is newer and depends on two services the page does not need. Ordering
-        // the proven surface before the unproven one means a failure in the tab cannot take the
-        // settings page down with it - both halves share one file and one apply().
-        disposers.push(ctx.slots.inject('settings.section', () => ctx.slots.register({
-          name: 'settings.section',
-          id: 'memory',
-          order: 80,
-          label: 'Memory',
-        }, () => react.createElement(MemorySettings))))
-        // The Memory tab. Its data is injected by THIS entry rather than registered globally
-        // through uiSession.provide: the source is per-session and read from the session's own
-        // event window, and an entry-owned inject face is cached per (entry x session), so the
-        // hook the renderer binds (useMemory) is created once per conversation.
-        try {
-          disposers.push(ctx.slots.inject('conversation.view', () => ctx.slots.register({
-            name: 'conversation.view',
-            id: 'memory',
-            // ui-chat holds 0 and ui-trajectory 10, so Memory sits after both without
-            // reordering anyone else's tab.
-            order: 20,
-            label: 'Memory',
-            inject: (sessionId) => ({ hooks: { memory: createMemorySource(ctx, sessionId) } }),
-          }, MemoryTabView)))
-        } catch (error) {
-          // Loud, not silent. A tab that fails to register is invisible by definition, so this
-          // warning is the only trace the failure can leave.
-          ctx.logger.warn('dsh-memory: Memory tab unavailable: ' + (error && error.message ? error.message : String(error)))
-        }
-        return () => { for (const dispose of disposers) dispose() }
-      }, 'dsh-memory: settings section')
-    }
-
-    exports.name = 'dsh-memory'
-    // 'sessions' is deliberately NOT here: the tab reaches it with ctx.get() so that a
-    // missing service can only blank the tab, never hold back the settings page too.
-    exports.inject = ['slots', 'configForms', 'remote.session']
-    exports.apply = apply
-    return module.exports
-  },
-})
+// dsh-memory browser half: the Settings -> Memory page.
+//
+// Plain JavaScript by necessity: DSH's client module system serves this file to the
+// page as a lazy-CJS bundle, so it IS the shipped artifact. The factory receives the
+// browser module table's require and returns { inject, apply }.
+//
+// Only 'react' is requested. Harness client packages are deliberately not imported:
+// they change without notice, plain JS gets no type check against them, and a throwing
+// component blanks the slot entry. Controls and styles are written here, using only
+// theme tokens that actually exist on the shipped settings pages -- a token that does
+// not exist is an invalid declaration, the browser drops it, and the page degrades
+// into undifferentiated prose. The page mirrors a shipped settings section: the same
+// column width, card chrome, type scale and control metrics.
+window.__ModuleLoader__.load({
+  // Must be the package name: the web client loader looks up this exact id.
+  // The Cordis entry id (`dsh-memory`) is a different string used only for settings.
+  id: '@try-works/dsh-memory',
+  factory: (require) => {
+    var module = { exports: {} }
+    var exports = module.exports
+    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
+
+    const react = require('react')
+
+    /** Page styles, prefixed to avoid colliding with host styles. */
+    const CSS = [
+      '.dsm-page {',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  gap: 12px;',
+      '  max-width: 720px;',
+      '  color: var(--dsw-alias-label-primary);',
+      '}',
+      '.dsm-title {',
+      '  margin: 0;',
+      '  font-size: 16px;',
+      '  line-height: 24px;',
+      '  font-weight: 500;',
+      '  color: var(--dsw-alias-label-primary);',
+      '}',
+      '.dsm-intro {',
+      '  margin: 0;',
+      '  font-size: 14px;',
+      '  line-height: 22px;',
+      '  color: var(--dsw-alias-label-tertiary);',
+      '}',
+      '.dsm-card {',
+      '  border: 0.5px solid var(--dsw-alias-settings-card-stroke);',
+      '  background: var(--dsw-alias-settings-card-fill);',
+      '  border-radius: var(--dsw-radius-xl);',
+      '  padding: 12px 14px;',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  gap: 2px;',
+      '}',
+      '.dsm-field {',
+      '  display: flex;',
+      '  flex-direction: column;',
+      '  gap: 4px;',
+      '  padding: 6px 0;',
+      '}',
+      '.dsm-field-label {',
+      '  font-size: 12px;',
+      '  line-height: 18px;',
+      '  color: var(--dsw-alias-label-secondary);',
+      '}',
+      '.dsm-field-help {',
+      '  margin: 0;',
+      '  font-size: 12px;',
+      '  line-height: 18px;',
+      '  color: var(--dsw-alias-label-tertiary);',
+      '}',
+      '.dsm-input,',
+      '.dsm-select {',
+      '  box-sizing: border-box;',
+      '  width: 100%;',
+      '  height: 32px;',
+      '  padding: 0 10px;',
+      '  border: 1px solid var(--dsw-alias-border-l2);',
+      '  border-radius: var(--dsw-radius-sm);',
+      '  background: var(--dsw-alias-bg-layer-1);',
+      '  color: var(--dsw-alias-label-primary);',
+      '  font-family: var(--ds-font-family-code);',
+      '  font-size: 12px;',
+      '}',
+      '.dsm-select {',
+      '  font-family: inherit;',
+      '  cursor: pointer;',
+      '}',
+      '.dsm-input:focus-visible,',
+      '.dsm-select:focus-visible {',
+      '  outline: 2px solid var(--dsw-alias-brand-primary);',
+      '  outline-offset: 1px;',
+      '}',
+      '.dsm-input:disabled,',
+      '.dsm-select:disabled {',
+      '  opacity: 0.6;',
+      '  cursor: default;',
+      '}',
+      '.dsm-actions {',
+      '  display: flex;',
+      '  align-items: center;',
+      '  gap: 10px;',
+      '  padding-top: 10px;',
+      '}',
+      '.dsm-button {',
+      '  height: 30px;',
+      '  padding: 0 14px;',
+      '  border: none;',
+      '  border-radius: var(--dsw-radius-sm);',
+      '  background: var(--dsw-alias-button-primary-fill);',
+      '  color: var(--dsw-alias-label-primary-inverted);',
+      '  font-family: inherit;',
+      '  font-size: 13px;',
+      '  cursor: pointer;',
+      '}',
+      '.dsm-button:hover:not(:disabled) {',
+      '  background: var(--dsw-alias-button-primary-hover);',
+      '}',
+      '.dsm-button:disabled {',
+      '  opacity: 0.6;',
+      '  cursor: default;',
+      '}',
+      '.dsm-button:focus-visible {',
+      '  outline: 2px solid var(--dsw-alias-brand-primary);',
+      '  outline-offset: 1px;',
+      '}',
+      '.dsm-status {',
+      '  margin: 0;',
+      '  font-size: 12px;',
+      '  line-height: 18px;',
+      '  color: var(--dsw-alias-label-tertiary);',
+      '}',
+      '.dsm-status-ok {',
+      '  color: var(--dsw-alias-state-success-primary);',
+      '}',
+      '.dsm-status-error {',
+      '  color: var(--dsw-alias-state-error-primary);',
+      '}',
+      '.dsm-note {',
+      '  margin: 0;',
+      '  font-size: 12px;',
+      '  line-height: 18px;',
+      '  color: var(--dsw-alias-label-tertiary);',
+      '}',
+      '.dsm-code {',
+      '  font-family: var(--ds-font-family-code);',
+      '}',
+    ].join('\n')
+
+
+    // ---------------------------------------------------------------------------------
+    // Memory map: the inline face of the memory_map tool.
+    //
+    // It renders the tool result's structured `meta`, which is the value the tool returned.
+    // That is not a shortcut, it is the only honest source: a browser half cannot ask the
+    // host for anything (dsh.client has no data channel, remotes are an allowlisted
+    // application assembly, and the plugin route serves only client JS), so the tool result
+    // IS the channel. Recomputing the numbers here would invent a second source that could
+    // disagree with the one the agent was shown, and the disagreement would be invisible.
+    // ---------------------------------------------------------------------------------
+    const INK = '#1A1A18'
+    const MUTED = '#6E6E6B'
+    const FAINT = '#8A8A87'
+    const LINE = '#EFEFEC'
+    const RUST = '#8A3F1E'
+    const COPPER = '#C77E4A'
+    const QUIET = '#6B6B68'
+    const GEIST = 'Geist, system-ui, -apple-system, sans-serif'
+    const MONO = 'Geist Mono, ui-monospace, SFMono-Regular, monospace'
+    // Deepest tone for the largest layer, so the ramp itself encodes proportion and seven
+    // layers need seven TONES rather than seven hues.
+    const TONES = ['#2A3644', '#3A4757', '#4C5A6B', '#64717F', '#808C99', '#9DA8B3', '#BCC4CC']
+
+    /** Thousands separators, so a four-digit count is readable at a glance. */
+    function fmt(value) {
+      return typeof value === 'number' && Number.isFinite(value) ? value.toLocaleString('en-US') : String(value)
+    }
+
+    /** How a verdict is written and coloured: the WORD carries the meaning, colour agrees. */
+    function verdictStyle(verdict) {
+      if (verdict === 'stale') return { color: RUST, weight: 500 }
+      if (verdict === 'aging') return { color: COPPER, weight: 500 }
+      if (verdict === 'unverified' || verdict === 'empty') return { color: QUIET, weight: 500 }
+      return { color: QUIET, weight: 400 }
+    }
+
+    function box(style, children) { return react.createElement('div', { style: style }, children) }
+
+    /** The stacked layer bar. Each width is a count as a fraction of the total. */
+    function LayerBar(props) {
+      const total = props.layers.reduce(function (sum, l) { return sum + l.count }, 0)
+      if (!total) return null
+      const segs = props.layers.map(function (layer, i) {
+        return react.createElement('div', {
+          key: layer.name,
+          style: { width: (layer.count / total * 100).toFixed(3) + '%', flexShrink: 0, background: TONES[i % TONES.length] },
+        })
+      })
+      return box({ display: 'flex', height: props.height || '26px', borderRadius: '7px', overflow: 'hidden' }, segs)
+    }
+
+    /** The legend: fixed dot and name slots, so every count shares one vertical lane. */
+    function Legend(props) {
+      const items = props.layers.map(function (layer, i) {
+        return box({ key: layer.name, display: 'flex', alignItems: 'center', gap: '7px' }, [
+          react.createElement('div', { key: 'd', style: { width: '6px', height: '6px', flexShrink: 0, borderRadius: '2px', background: TONES[i % TONES.length] } }),
+          react.createElement('div', { key: 'n', style: { fontFamily: GEIST, fontSize: '11px', color: '#3A3A38', width: '62px', flexShrink: 0 } }, layer.name),
+          react.createElement('div', { key: 'c', style: { fontFamily: MONO, fontSize: '10px', color: QUIET } }, fmt(layer.count)),
+        ])
+      })
+      const half = Math.ceil(items.length / 2)
+      return box({ display: 'flex', flexDirection: 'column', gap: '7px' }, [
+        box({ key: 'a', display: 'flex', gap: '22px' }, items.slice(0, half)),
+        box({ key: 'b', display: 'flex', gap: '22px' }, items.slice(half)),
+      ])
+    }
+
+    function Stat(props) {
+      return box({ display: 'flex', alignItems: 'baseline', gap: '6px' }, [
+        react.createElement('div', { key: 'n', style: { fontFamily: MONO, fontSize: props.size || '15px', color: props.color || INK } }, props.value),
+        react.createElement('div', { key: 'l', style: { fontFamily: GEIST, fontSize: '11px', color: MUTED } }, props.label),
+      ])
+    }
+
+    function Chip(props) {
+      return react.createElement('div', {
+        style: { padding: '3px 8px', borderRadius: '5px', fontFamily: MONO, fontSize: '10px', background: props.hot ? '#FAEDE6' : '#F4F4F2', color: props.hot ? RUST : '#3A3A38' },
+      }, props.text)
+    }
+
+    /** Section label, with an optional right-hand note. */
+    function sectionLabel(text, note) {
+      return box({ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }, [
+        react.createElement('div', { key: 'l', style: { fontFamily: GEIST, fontSize: '11px', fontWeight: 500, letterSpacing: '0.08em', color: MUTED } }, text),
+        note ? react.createElement('div', { key: 'r', style: { fontFamily: GEIST, fontSize: '11px', color: FAINT } }, note) : null,
+      ])
+    }
+
+    /** The three-bar mark: a miniature of the layer bar, so the card is identifiable at a glance. */
+    function Glyph() {
+      const bar = function (key, width, tone) {
+        return react.createElement('div', { key: key, style: { height: '2px', width: width, borderRadius: '1px', background: tone } })
+      }
+      return box({ width: '14px', height: '14px', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: '2px', justifyContent: 'center' }, [
+        bar('a', '14px', TONES[0]), bar('b', '10px', TONES[3]), bar('c', '6px', TONES[5]),
+      ])
+    }
+
+    /** The RECEIVED panel: what memory put in front of this session, with its freshness. */
+    function ReceivedPanel(props) {
+      const sections = (props.received && props.received.sections) || []
+      if (!sections.length) return null
+      const rows = sections.map(function (section) {
+        const style = verdictStyle(section.verdict)
+        return box({ key: section.name, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }, [
+          react.createElement('div', { key: 'n', style: { fontFamily: GEIST, fontSize: '12px', color: '#3A3A38' } }, section.name),
+          react.createElement('div', { key: 'v', style: { fontFamily: MONO, fontSize: '11px', color: style.color, fontWeight: style.weight } }, section.marker ? section.marker.replace(/[\[\]]/g, '').trim() : 'fresh'),
+        ])
+      })
+      return box({ display: 'flex', flexDirection: 'column', gap: '10px' }, [
+        sectionLabel('RECEIVED', fmt(props.received.chars) + ' chars'),
+        box({ key: 'rows', display: 'flex', flexDirection: 'column', gap: '7px' }, rows),
+      ])
+    }
+
+    /** The WRITTEN panel: what THIS session recorded, by layer and by entry. */
+    function WrittenPanel(props) {
+      const written = props.written
+      if (!written || !written.total) return null
+      const chips = Object.keys(written.byLayer).map(function (layer) {
+        return react.createElement(Chip, { key: layer, text: layer + ' ' + written.byLayer[layer] })
+      })
+      const entries = written.entries.map(function (entry) {
+        return box({ key: entry.id, display: 'flex', alignItems: 'baseline' }, [
+          react.createElement('div', { key: 'i', style: { fontFamily: MONO, fontSize: '11px', color: QUIET, width: '186px', flexShrink: 0 } }, entry.id),
+          react.createElement('div', { key: 'l', style: { fontFamily: GEIST, fontSize: '11px', color: FAINT, width: '72px', flexShrink: 0 } }, entry.layer),
+          react.createElement('div', { key: 'h', style: { fontFamily: GEIST, fontSize: '12px', color: '#3A3A38' } }, entry.heading),
+        ])
+      })
+      const more = written.total > written.entries.length
+      return box({ display: 'flex', flexDirection: 'column', gap: '12px' }, [
+        sectionLabel('WRITTEN', fmt(written.total) + ' this session'),
+        box({ key: 'c', display: 'flex', gap: '5px' }, chips),
+        box({ key: 'e', display: 'flex', flexDirection: 'column', gap: '7px' }, entries),
+        more ? react.createElement('div', { key: 'm', style: { fontFamily: GEIST, fontSize: '11px', color: FAINT } }, '+ ' + fmt(written.total - written.entries.length) + ' more') : null,
+      ])
+    }
+
+    /**
+     * The memory_map tool row.
+     *
+     * Every value comes from the result's own `meta`. Nothing is fetched and nothing is
+     * inferred from the rendered text: when the snapshot is absent the card says so, rather
+     * than drawing a shape that merely looks like data.
+     */
+    function MemoryMapCard(props) {
+      const block = props ? props.block : null
+      const meta = block && typeof block.meta === 'object' && block.meta !== null ? block.meta : null
+      const store = meta && meta.store ? meta.store : null
+      const session = meta && meta.session ? meta.session : null
+      const summary = store ? fmt(store.total) + ' entries · ' + fmt(store.scopeTotal) + ' scopes' : ''
+      const headStyle = { height: '46px', flexShrink: 0, display: 'flex', alignItems: 'center', gap: '10px', padding: '0 16px', borderBottom: '1px solid ' + LINE }
+      const head = box(headStyle, [
+        react.createElement(Glyph, { key: 'g' }),
+        react.createElement('div', { key: 't', style: { fontFamily: GEIST, fontSize: '13px', fontWeight: 500, color: INK } }, 'Memory map'),
+        react.createElement('div', { key: 's', style: { flex: 1 } }),
+        react.createElement('div', { key: 'c', style: { fontFamily: GEIST, fontSize: '12px', color: MUTED } }, summary),
+      ])
+      const body = []
+      if (store) {
+        body.push(box({ key: 'l', display: 'flex', flexDirection: 'column', gap: '12px' }, [
+          react.createElement(LayerBar, { key: 'bar', layers: store.layers }),
+          react.createElement(Legend, { key: 'leg', layers: store.layers }),
+        ]))
+        const attention = (store.queue && store.queue.attention) || []
+        const chips = attention.slice(0, 3).map(function (row) {
+          return react.createElement(Chip, { key: row.state + row.reason, text: fmt(row.count) + ' ' + row.state, hot: true })
+        })
+        if (store.queue && store.queue.waiting) chips.push(react.createElement(Chip, { key: 'waiting', text: fmt(store.queue.waiting) + ' waiting' }))
+        const stats = [
+          react.createElement(Stat, { key: 'a', value: fmt(store.freshness.fresh), label: 'fresh' }),
+          store.freshness.stale ? react.createElement(Stat, { key: 'b', value: fmt(store.freshness.stale), label: 'stale', color: RUST }) : null,
+          store.freshness.skip ? react.createElement(Stat, { key: 'c', value: fmt(store.freshness.skip), label: 'superseded' }) : null,
+        ]
+        const footStyle = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid ' + LINE, paddingTop: '13px', gap: '16px' }
+        body.push(box({ key: 'f', display: 'flex', flexDirection: 'column' }, [
+          box(Object.assign({ key: 'row' }, footStyle), [
+            box({ key: 's', display: 'flex', gap: '18px' }, stats),
+            box({ key: 'q', display: 'flex', gap: '5px', flexWrap: 'wrap' }, chips),
+          ]),
+        ]))
+      }
+      if (session && session.received) body.push(react.createElement(ReceivedPanel, { key: 'r', received: session.received }))
+      if (session && session.written) body.push(react.createElement(WrittenPanel, { key: 'w', written: session.written }))
+      if (!body.length) body.push(react.createElement('div', { key: 'none', style: { fontFamily: GEIST, fontSize: '12px', color: MUTED } }, 'No snapshot was recorded for this call.'))
+      const cardStyle = { maxWidth: '760px', border: '1px solid #E7E7E4', borderRadius: '12px', background: '#FFFFFF', display: 'flex', flexDirection: 'column' }
+      const bodyStyle = { padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px' }
+      return box(cardStyle, [head, box(Object.assign({ key: 'b' }, bodyStyle), body)]);
+    }
+
+    /**
+     * The Memory tab: this session's memory activity, in one place.
+     *
+     * Its data is the newest memory snapshot in this conversation, from either of two routes.
+     *
+     * The one that matters is memory/map: a browser half cannot ask the host for anything, so the
+     * session record is the only channel - and rather than wait for someone to call a tool, the HOST
+     * publishes the map into that record itself. SessionEventMap is merge-extensible by design and a
+     * log-only event never reaches the model surface, so this is the harness's own answer for a view
+     * that must report state nobody asked about.
+     *
+     * A memory_map TOOL RESULT is still honoured, newest wins, because a session whose snapshots
+     * predate the publisher would otherwise draw nothing. That route carries its value on `meta` -
+     * the object ui-chat's conversation-nodes/tool.ts forwards as `meta: match.event.data.meta`.
+     *
+     * READING IT: the session's contiguous event window is published as the documented
+     * public member SessionBinding.eventSource (ObservableSnapshot<SessionEventWindow>, see
+     * api/session-controller/src/client/contract/events.ts), reached through
+     * ctx.sessions.binding(sessionId). That is the same source the Chat and Trajectory tabs
+     * are assembled from, so the tab adds no new channel and cannot disagree with them.
+     * Sessions is reached with ctx.get() because it is a reachable service, not a required
+     * one: making it an inject dependency would hold the whole plugin - Settings included -
+     * pending behind a service the settings page does not need.
+     */
+    const MEMORY_STATE_NONE = { kind: 'none', meta: null, seq: null, time: null }
+    const MEMORY_STATE_UNAVAILABLE = { kind: 'unavailable', meta: null, seq: null, time: null }
+    // Distinct from NONE on purpose. PTC mode dispatches a tool from inside a run_code program and
+    // records tool/ptc-dispatch, which carries the rendered text but NO structured value, so there
+    // is genuinely nothing to draw - and telling the reader 'memory_map has not run here' would be
+    // false.
+    const MEMORY_STATE_NESTED = { kind: 'nested', meta: null, seq: null, time: null }
+
+    /**
+     * Find the newest memory snapshot in the window and say what it carried.
+     *
+     * Two routes, newest wins. The host publishes a memory/map event on its own cadence, which is
+     * what lets the tab draw with no tool call. A memory_map tool/result is also honoured: a
+     * tool/result event names its call only by id, so call events are indexed first, and a result
+     * whose pair has been paged out is still recognised by the shape of its own value, since
+     * nothing else produces { scope, generatedAt }.
+     */
+    function readMemoryState(window) {
+      const entries = window && Array.isArray(window.entries) ? window.entries : null
+      if (!entries) return MEMORY_STATE_NONE
+      const calls = Object.create(null)
+      let nested = false
+      for (let i = 0; i < entries.length; i += 1) {
+        const entry = entries[i]
+        const event = entry && entry.type === 'event' ? entry.event : null
+        if (event && event.type === 'tool/call' && event.data && event.data.name === 'memory_map') calls[event.data.callId] = true
+        // A nested dispatch is a real call the agent made; it simply has no structured result.
+        if (event && event.type === 'tool/ptc-dispatch' && event.data && event.data.name === 'memory_map') nested = true
+      }
+      // Newest first: the tab describes the session as it stands now, not as it first was.
+      for (let i = entries.length - 1; i >= 0; i -= 1) {
+        const entry = entries[i]
+        const event = entry && entry.type === 'event' ? entry.event : null
+        if (!event) continue
+        // The host PUBLISHES the map into the log itself, so the tab fills in on its own and needs
+        // nobody to call a tool first. This is the route that matters; the tool/result route below
+        // is kept so a session whose snapshots predate the publisher still draws.
+        if (event.type === 'memory/map') {
+          const published = event.data
+          if (published === null || typeof published !== 'object') continue
+          if (typeof published.generatedAt !== 'string' || typeof published.scope !== 'string') continue
+          return { kind: 'ready', meta: published, seq: event.seq, time: event.time }
+        }
+        if (event.type !== 'tool/result') continue
+        const data = event.data || {}
+        const message = data.message || null
+        const callId = message && message.source ? message.source.callId : undefined
+        const meta = data.meta
+        const shaped = meta !== null && typeof meta === 'object'
+          && typeof meta.generatedAt === 'string' && typeof meta.scope === 'string'
+        if (calls[callId] !== true && !shaped) continue
+        // A failed call is not a snapshot: it is the absence of one, and it is said so.
+        if (message && message.isError === true) continue
+        if (meta === null || typeof meta !== 'object') return { kind: 'empty', meta: null, seq: event.seq, time: event.time }
+        return { kind: 'ready', meta: meta, seq: event.seq, time: event.time }
+      }
+      return nested ? MEMORY_STATE_NESTED : MEMORY_STATE_NONE
+    }
+
+    /**
+     * The tab's observable source over one session's event window.
+     *
+     * It re-resolves the binding on every read, so a session whose binding materializes
+     * after the tab has already rendered still fills in; while no window exists it listens
+     * to the session list, which publishes when a generation is retained or opened, so the
+     * tab wakes up instead of staying dark until an unrelated re-render. Values are cached by
+     * window identity, which keeps getSnapshot referentially stable between publications.
+     */
+    function createMemorySource(ctx, sessionId) {
+      const listeners = []
+      let subscribedTo = null
+      let unsubscribe = null
+      let cachedWindow = null
+      let cachedState = MEMORY_STATE_NONE
+      const wake = () => {
+        cachedWindow = null
+        for (let i = 0; i < listeners.length; i += 1) listeners[i]()
+      }
+      const eventSourceOf = () => {
+        const sessions = ctx.get('sessions')
+        if (!sessions || typeof sessions.binding !== 'function') return null
+        const binding = sessions.binding(sessionId)
+        return binding && binding.eventSource ? binding.eventSource : null
+      }
+      const attach = (source) => {
+        if (unsubscribe) { unsubscribe(); unsubscribe = null }
+        subscribedTo = source
+        if (source) { unsubscribe = source.subscribe(wake); return }
+        const sessions = ctx.get('sessions')
+        const list = sessions && sessions.list
+        if (list && typeof list.subscribe === 'function' && listeners.length) unsubscribe = list.subscribe(wake)
+      }
+      const sync = () => {
+        const source = eventSourceOf()
+        if (listeners.length) { if (source !== subscribedTo) attach(source) }
+        else if (subscribedTo) attach(null)
+        return source
+      }
+      return {
+        getSnapshot: () => {
+          const source = sync()
+          if (!source) return MEMORY_STATE_UNAVAILABLE
+          const window = source.getSnapshot()
+          if (window !== cachedWindow) { cachedWindow = window; cachedState = readMemoryState(window) }
+          return cachedState
+        },
+        subscribe: (listener) => {
+          listeners.push(listener)
+          sync()
+          return () => {
+            const index = listeners.indexOf(listener)
+            if (index >= 0) listeners.splice(index, 1)
+            if (!listeners.length) attach(null)
+          }
+        },
+      }
+    }
+
+    /** Selector for the injected memory hook: the source caches by window, so identity holds. */
+    function memoryStateOf(value) { return value === undefined ? MEMORY_STATE_NONE : value }
+
+    /** The sheet the panels sit on: their ink colours are fixed, so the surface must be too. */
+    function sheet(key, children) {
+      return box({ key: key, border: '1px solid #E7E7E4', borderRadius: '12px', background: '#FFFFFF', padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px' }, children)
+    }
+
+    /** The snapshot's OWN stamp, never the clock: a snapshot taken an hour ago must read so. */
+    function whenText(iso) {
+      const at = new Date(iso)
+      return Number.isNaN(at.getTime()) ? String(iso) : at.toLocaleString()
+    }
+
+    /**
+     * What the tab says when there is nothing to draw.
+     *
+     * The distinctions matter: 'nothing has been published for this session yet' and 'a call ran but
+     * its result carries no snapshot' are different facts, and neither of them is zero entries.
+     * None of them is ever fixed by asking the reader to do something - the host publishes on its
+     * own, so an empty tab is a statement about the session, not a task for the user.
+     */
+    function emptyMemoryCopy(state) {
+      if (state.kind === 'unavailable') {
+        return {
+          title: 'The session record is not attached yet',
+          lines: [
+            'This tab reads memory from the conversation it belongs to - the event window of the open session - and that window is not available here.',
+            'Settings, Memory still reads the live store through the host, so the store itself stays visible either way.',
+          ],
+        }
+      }
+      if (state.kind === 'empty') {
+        return {
+          title: 'The last memory_map result carried no snapshot',
+          lines: [
+            'The call is part of this session, but no structured value is attached to its result: a call that failed, or one whose result was replaced while the context was compacted.',
+            'The host publishes a fresh snapshot on its own cadence, so this clears itself.',
+          ],
+        }
+      }
+      if (state.kind === 'nested') {
+        return {
+          title: 'memory_map ran here, but not as a readable result',
+          lines: [
+            'This session called memory_map from inside a run_code program. Those calls are recorded as nested dispatches, which keep the rendered text and not the structured value this tab draws.',
+            'Calling memory_map directly - scope "session" or "all" - records a result the panels can read.',
+          ],
+        }
+      }
+      return {
+        title: 'Nothing published for this session yet',
+        lines: [
+          'This tab draws the memory snapshot the host publishes into this conversation as it runs, so nothing here has to be asked for.',
+          'Nothing has been published for this session yet. It arrives with the first turn and refreshes as the store changes.',
+        ],
+      }
+    }
+
+    /** The honest empty state: prose that says what is missing, never a shape that reads as data. */
+    function MemoryEmpty(props) {
+      const copy = emptyMemoryCopy(props.state)
+      const lines = copy.lines.map(function (line, index) {
+        return react.createElement('div', { key: String(index), style: { fontFamily: GEIST, fontSize: '12px', lineHeight: 1.6, color: MUTED } }, line)
+      })
+      return sheet('empty', [
+        react.createElement('div', { key: 't', style: { fontFamily: GEIST, fontSize: '13px', fontWeight: 500, color: INK } }, copy.title),
+        box({ key: 'b', display: 'flex', flexDirection: 'column', gap: '8px' }, lines),
+      ])
+    }
+
+    /** The panels, drawn from the snapshot memory_map actually returned and nothing else. */
+    function MemoryPanels(props) {
+      const meta = props.meta
+      const store = meta.store || null
+      const session = meta.session || null
+      const parts = []
+      const chips = [react.createElement(Chip, { key: 'scope', text: 'scope ' + String(meta.scope) })]
+      if (meta.generatedAt) chips.push(react.createElement(Chip, { key: 'at', text: whenText(meta.generatedAt) }))
+      if (session) chips.push(react.createElement(Chip, { key: 'where', text: session.workspace ? 'workspace ' + session.workspace : 'global layer' }))
+      parts.push(box({ key: 'chips', display: 'flex', gap: '5px', flexWrap: 'wrap' }, chips))
+      if (store) {
+        const attention = (store.queue && store.queue.attention) || []
+        const queue = attention.slice(0, 3).map(function (row) {
+          return react.createElement(Chip, { key: row.state + row.reason, text: fmt(row.count) + ' ' + row.state, hot: true })
+        })
+        if (store.queue && store.queue.waiting) queue.push(react.createElement(Chip, { key: 'waiting', text: fmt(store.queue.waiting) + ' waiting' }))
+        parts.push(sheet('store', [
+          sectionLabel('STORE', fmt(store.total) + ' entries · ' + fmt(store.scopeTotal) + ' scopes'),
+          react.createElement(LayerBar, { key: 'bar', layers: store.layers, height: '30px' }),
+          react.createElement(Legend, { key: 'leg', layers: store.layers }),
+          box({ key: 'f', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '16px' }, [
+            box({ key: 'st', display: 'flex', gap: '18px' }, [
+              react.createElement(Stat, { key: 'a', value: fmt(store.freshness.fresh), label: 'fresh' }),
+              store.freshness.stale ? react.createElement(Stat, { key: 'b', value: fmt(store.freshness.stale), label: 'stale', color: RUST }) : null,
+              store.freshness.skip ? react.createElement(Stat, { key: 'c', value: fmt(store.freshness.skip), label: 'superseded' }) : null,
+            ]),
+            box({ key: 'q', display: 'flex', gap: '5px', flexWrap: 'wrap' }, queue),
+          ]),
+        ]))
+      }
+      // A panel with nothing in it is omitted, or said in one line of prose: an empty card is
+      // a shape that reads as data, which is exactly what this tab must never draw.
+      const received = session ? session.received : null
+      if (received && received.sections && received.sections.length) {
+        parts.push(sheet('received', [react.createElement(ReceivedPanel, { key: 'r', received: received })]))
+      }
+      const written = session ? session.written : null
+      if (written && written.total) {
+        parts.push(sheet('written', [react.createElement(WrittenPanel, { key: 'w', written: written })]))
+      } else if (written) {
+        parts.push(react.createElement('div', {
+          key: 'none',
+          style: { fontFamily: GEIST, fontSize: '12px', color: 'var(--dsw-alias-label-tertiary)' },
+        }, 'This session has not recorded an entry yet.'))
+      }
+      parts.push(react.createElement('div', {
+        key: 'src',
+        style: { fontFamily: GEIST, fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)', lineHeight: 1.6 },
+      }, 'Published by the host into this session (event #' + fmt(props.seq) + '), not re-read from the store. It refreshes on its own as the store changes.'))
+      return box({ display: 'flex', flexDirection: 'column', gap: '18px' }, parts)
+    }
+
+    /**
+     * The Memory tab.
+     *
+     * The hook arrives as part of this entry's injected standard kit: the inject face
+     * publishes hooks.memory, which the renderer binds to a useMemory prop, exactly as
+     * ui-trajectory's view receives useDuration. It is present for the whole life of a mount
+     * or absent for the whole of it, so this branch never changes hook order. The selector is
+     * required: the bound hook is a selector hook and calls it without a guard.
+     */
+    function MemoryTabView(props) {
+      const useMemory = props && typeof props.useMemory === 'function' ? props.useMemory : null
+      const state = useMemory ? useMemory(memoryStateOf) : MEMORY_STATE_NONE
+      const page = { flex: '1 1 auto', minHeight: 0, overflowY: 'auto' }
+      const inner = { maxWidth: '760px', margin: '0 auto', padding: '26px 28px 44px', display: 'flex', flexDirection: 'column', gap: '18px' }
+      const head = box({ display: 'flex', alignItems: 'center', gap: '10px' }, [
+        react.createElement(Glyph, { key: 'g' }),
+        // Theme token, not the fixed ink palette: this line sits on the shell background,
+        // which the palette knows nothing about.
+        react.createElement('div', { key: 't', style: { fontFamily: GEIST, fontSize: '15px', fontWeight: 500, color: 'var(--dsw-alias-label-primary)' } }, 'Memory'),
+      ])
+      const intro = react.createElement('div', {
+        key: 'i',
+        style: { fontFamily: GEIST, fontSize: '12px', lineHeight: 1.6, color: 'var(--dsw-alias-label-tertiary)' },
+      }, 'What memory put in front of this conversation, what the conversation wrote back, and the state of the store.')
+      const body = state.kind === 'ready'
+        ? react.createElement(MemoryPanels, { key: 'p', meta: state.meta, seq: state.seq })
+        : react.createElement(MemoryEmpty, { key: 'e', state: state })
+      return box(page, [box(inner, [head, intro, body])])
+    }
+
+    /** Fields rendered on this page, in order. */
+    const FIELDS = [
+      { key: 'memoryRoot', label: 'Memory root', hint: 'Local folder or drive that holds the store.', placeholder: 'D:\\Memory' },
+      { key: 'gitRemote', label: 'GitHub origin', hint: 'Git remote URL. Leave empty to keep the store local-only.', placeholder: 'git@github.com:you/memory.git' },
+      { key: 'gitBranch', label: 'Branch', hint: 'Branch used for pull and push.', placeholder: 'main' },
+      { key: 'gitToken', label: 'Access token (optional)', kind: 'secret', hint: 'Personal access token for pushing. Stored by the host and never sent back to this page, so the field is always empty: type a new token to replace it, and leave it empty to keep the current one.' },
+    ]
+
+    // The settings namespace is the plugin's ENTRY ID, not its package name. The bundle patch mounts
+    // the package @try-works/dsh-memory as the row `dsh-memory`, while a hand-written row may use
+    // a short id like `memory`. Both must work, so the candidates are tried in order and
+    // the first one the host actually serves wins.
+    const NAMESPACE_CANDIDATES = ['memory', 'dsh-memory']
+
+    function apply(ctx) {
+      // configForms.get() is lazy: it resolves once the namespace appears in the mirror, so
+      // creating a form for a candidate that is never served costs nothing.
+      const forms = NAMESPACE_CANDIDATES.map((ns) => ctx.configForms.get(ns))
+      const served = () => forms.find((f) => {
+        const snap = f.getSnapshot()
+        return snap.status === 'ready' || (snap.value !== undefined)
+      })
+      // Fall back to the first candidate so the page still renders its explanatory copy.
+      const form = {
+        getSnapshot: () => (served() ?? forms[0]).getSnapshot(),
+        subscribe: (listener) => {
+          const disposers = forms.map((f) => f.subscribe(listener))
+          return () => { for (const dispose of disposers) dispose() }
+        },
+        set: (field, value) => (served() ?? forms[0]).set(field, value),
+      }
+
+      /** Read the value a field should display: the draft, else the saved value. */
+      function fieldValue(key, value, draft) {
+        if (draft[key] !== undefined) return draft[key]
+        const saved = value[key]
+        return saved === undefined || saved === null ? '' : saved
+      }
+
+      /**
+       * One secret input. The value is deliberately NEVER read back from the snapshot: the
+       * host redacts it, so echoing it would display a placeholder and - worse - a later save
+       * could write that placeholder over the real token. Empty therefore means 'leave it'.
+       */
+      function secretField(field, draft, edit, disabled) {
+        return react.createElement('div', { className: 'dsm-field', key: field.key },
+          react.createElement('label', { className: 'dsm-field-label', htmlFor: 'dsm-' + field.key }, field.label),
+          react.createElement('input', {
+            id: 'dsm-' + field.key,
+            className: 'dsm-input',
+            type: 'password',
+            autoComplete: 'off',
+            placeholder: 'unchanged',
+            value: draft[field.key] !== undefined ? draft[field.key] : '',
+            disabled,
+            onChange: (event) => edit(field.key, event.target.value),
+          }),
+          react.createElement('p', { className: 'dsm-field-help' }, field.hint))
+      }
+
+      /** One labelled text input. */
+      function textField(field, value, draft, edit, disabled) {
+        return react.createElement('div', { className: 'dsm-field', key: field.key },
+          react.createElement('label', { className: 'dsm-field-label', htmlFor: 'dsm-' + field.key }, field.label),
+          react.createElement('input', {
+            id: 'dsm-' + field.key,
+            className: 'dsm-input',
+            type: 'text',
+            placeholder: field.placeholder,
+            value: fieldValue(field.key, value, draft),
+            disabled,
+            onChange: (event) => edit(field.key, event.target.value),
+          }),
+          react.createElement('p', { className: 'dsm-field-help' }, field.hint))
+      }
+
+      /** The model picker: the configured catalog plus "session default" and any stale value. */
+      function modelField(value, draft, edit, disabled, models) {
+        const selected = fieldValue('summaryModel', value, draft)
+        const common = {
+          id: 'dsm-summaryModel',
+          label: 'Model for memory writes',
+          hint: 'Preferred model for summarizing sessions and consolidating them into entries. If it cannot answer, the next available model is tried automatically, so leaving this empty is fine.',
+        }
+        if (models === null) {
+          // Still loading: stay usable as a text field rather than blocking the page.
+          return react.createElement('div', { className: 'dsm-field', key: 'summaryModel' },
+            react.createElement('label', { className: 'dsm-field-label', htmlFor: common.id }, common.label),
+            react.createElement('input', {
+              id: common.id, className: 'dsm-input', type: 'text', placeholder: 'provider/model',
+              value: selected, disabled, onChange: (event) => edit('summaryModel', event.target.value),
+            }),
+            react.createElement('p', { className: 'dsm-field-help' }, common.hint))
+        }
+        const options = [{ value: '', label: 'Session default (same model as the chat)' }].concat(models)
+        if (selected && !models.some((option) => option.value === selected)) {
+          options.push({ value: selected, label: selected + ' (not currently configured)' })
+        }
+        return react.createElement('div', { className: 'dsm-field', key: 'summaryModel' },
+          react.createElement('label', { className: 'dsm-field-label', htmlFor: common.id }, common.label),
+          react.createElement('select', {
+            id: common.id, className: 'dsm-select', value: selected, disabled,
+            onChange: (event) => edit('summaryModel', event.target.value),
+          }, options.map((option) => react.createElement('option', { key: option.value, value: option.value }, option.label))),
+          react.createElement('p', { className: 'dsm-field-help' }, common.hint))
+      }
+
+      function MemorySettings() {
+        const [snap, setSnap] = react.useState(() => form.getSnapshot())
+        const [draft, setDraft] = react.useState({})
+        const [status, setStatus] = react.useState(null)
+        react.useEffect(() => form.subscribe(() => setSnap(form.getSnapshot())), [])
+
+        // Model list for the write-model picker, from the same catalog the chat uses.
+        const [models, setModels] = react.useState(null)
+        react.useEffect(() => {
+          let alive = true
+          Promise.resolve()
+            .then(() => ctx.remote.session.modelCatalog())
+            .then((response) => {
+              if (!alive) return
+              const groups = response && response.ok && response.value ? (response.value.groups || []) : []
+              const options = []
+              for (const group of groups) {
+                for (const model of (group.models || [])) {
+                  options.push({ value: group.id + '/' + model.id, label: group.name + ' - ' + (model.name || model.id) })
+                }
+              }
+              setModels(options)
+            })
+            .catch(() => { if (alive) setModels([]) })
+          return () => { alive = false }
+        }, [])
+
+        const value = snap.value || {}
+        const edit = (key, next) => setDraft((previous) => {
+          const updated = { ...previous }
+          updated[key] = next
+          return updated
+        })
+
+        if (snap.status === 'unavailable') {
+          return react.createElement('div', { className: 'dsm-page' },
+            react.createElement('style', null, CSS),
+            react.createElement('h2', { className: 'dsm-title' }, 'Memory'),
+            react.createElement('p', { className: 'dsm-intro' }, 'The memory configuration namespace is not exposed to this client.'))
+        }
+
+        const save = async () => {
+          setStatus({ kind: 'busy', text: 'Saving...' })
+          try {
+            let refused = false
+            for (const field of FIELDS.concat([{ key: 'summaryModel' }])) {
+              const next = draft[field.key]
+              // An empty draft means 'not edited'. For a secret that is essential: writing an
+              // empty value would erase the token, and writing the redacted snapshot value
+              // would replace it with a placeholder.
+              if (next === undefined || next === '' || next === value[field.key]) continue
+              const accepted = await form.set(field.key, next)
+              if (accepted === false) refused = true
+            }
+            setStatus(refused
+              ? { kind: 'error', text: 'Refused by the host - see the dsh logs.' }
+              : { kind: 'ok', text: 'Saved.' })
+          } catch (error) {
+            setStatus({ kind: 'error', text: String((error && error.message) || error) })
+          }
+        }
+
+        const disabled = !snap.writable
+        return react.createElement('div', { className: 'dsm-page' },
+          react.createElement('style', null, CSS),
+          react.createElement('h2', { className: 'dsm-title' }, 'Memory'),
+          react.createElement('p', { className: 'dsm-intro' },
+            'Git-backed memory store, scoped to this workspace. Changes apply live and persist to this profile.'),
+          react.createElement('div', { className: 'dsm-card' },
+            // Rendered by kind, not by index: index-based rendering silently mis-assigned fields
+            // the moment one was inserted in the middle.
+            ...FIELDS.map((field) => {
+              if (field.kind === 'secret') return secretField(field, draft, edit, disabled)
+              if (field.kind === 'model') return modelField(value, draft, edit, disabled, models)
+              return textField(field, value, draft, edit, disabled)
+            })),
+          react.createElement('div', { className: 'dsm-actions' },
+            react.createElement('button', {
+              className: 'dsm-button', type: 'button', disabled, onClick: save,
+            }, 'Save'),
+            status
+              ? react.createElement('p', {
+                className: 'dsm-status' + (status.kind === 'ok' ? ' dsm-status-ok' : status.kind === 'error' ? ' dsm-status-error' : ''),
+              }, status.text)
+              : null,
+            snap.writable ? null : react.createElement('p', { className: 'dsm-status' }, 'Read-only: connected from a remote browser.')),
+          react.createElement('p', { className: 'dsm-note' },
+            'Store layout: ',
+            react.createElement('span', { className: 'dsm-code' }, 'global/'),
+            ' (identity, preferences, standing rules) plus ',
+            react.createElement('span', { className: 'dsm-code' }, 'workspaces/<key>/'),
+            ' per associated local folder or repo. Derived state (index/, state/, digests/, logs/) is gitignored and regenerated. Cadence and summarizer budgets are advanced tuning kept in the profile config file, not here.'))
+      }
+
+      ctx.effect(() => {
+        const disposers = []
+        // The inline face of memory_map, registered by the tool's WIRE NAME, which is how the
+        // host finds it. The result carries the data, so the view needs no other channel.
+        disposers.push(ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
+          name: 'tool.call.toolview',
+          key: 'memory_map',
+        }, MemoryMapCard)))
+        // The settings page registers FIRST, and deliberately. It is the established surface;
+        // the tab below is newer and depends on two services the page does not need. Ordering
+        // the proven surface before the unproven one means a failure in the tab cannot take the
+        // settings page down with it - both halves share one file and one apply().
+        disposers.push(ctx.slots.inject('settings.section', () => ctx.slots.register({
+          name: 'settings.section',
+          id: 'memory',
+          order: 80,
+          label: 'Memory',
+        }, () => react.createElement(MemorySettings))))
+        // The Memory tab. Its data is injected by THIS entry rather than registered globally
+        // through uiSession.provide: the source is per-session and read from the session's own
+        // event window, and an entry-owned inject face is cached per (entry x session), so the
+        // hook the renderer binds (useMemory) is created once per conversation.
+        try {
+          disposers.push(ctx.slots.inject('conversation.view', () => ctx.slots.register({
+            name: 'conversation.view',
+            id: 'memory',
+            // ui-chat holds 0 and ui-trajectory 10, so Memory sits after both without
+            // reordering anyone else's tab.
+            order: 20,
+            label: 'Memory',
+            inject: (sessionId) => ({ hooks: { memory: createMemorySource(ctx, sessionId) } }),
+          }, MemoryTabView)))
+        } catch (error) {
+          // Loud, not silent. A tab that fails to register is invisible by definition, so this
+          // warning is the only trace the failure can leave.
+          ctx.logger.warn('dsh-memory: Memory tab unavailable: ' + (error && error.message ? error.message : String(error)))
+        }
+        return () => { for (const dispose of disposers) dispose() }
+      }, 'dsh-memory: settings section')
+    }
+
+    exports.name = 'dsh-memory'
+    // 'sessions' is deliberately NOT here: the tab reaches it with ctx.get() so that a
+    // missing service can only blank the tab, never hold back the settings page too.
+    exports.inject = ['slots', 'configForms', 'remote.session']
+    exports.apply = apply
+    return module.exports
+  },
+})