dsh-hypatia-auto-memory 0.3.0 → 0.5.0

package/src/client/MemoryView.module.css

@@ -0,0 +1,312 @@
+/* The conversation Memory tab: a diagnostic panel in the shell's own vocabulary. */
+
+.panel {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+  /* ConversationRoot publishes the floating composer's live height; the view
+     owns its scroller under the overlay, so the last line has to clear it. */
+  padding: 16px;
+  padding-bottom: calc(var(--dsh-composer-height, 152px) + 16px);
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+}
+
+/*
+ * One measured column instead of the full panel width. A key/value row spread
+ * across a 27-inch window puts a label and its value a screen apart, which is
+ * what this bounds; the same limit keeps summary prose at a readable line
+ * length.
+ */
+.column {
+  display: flex;
+  width: 100%;
+  max-width: 880px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.title {
+  margin: 0;
+  color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.headMeta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.updated {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+}
+
+.refresh {
+  appearance: none;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: 8px;
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  padding: 2px 8px;
+}
+
+.refresh:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+  color: var(--dsw-alias-label-primary);
+}
+
+.refresh:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
+.status,
+.hint,
+.error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.status,
+.hint {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.error {
+  color: var(--dsw-alias-label-error);
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+  padding-top: 16px;
+}
+
+.groupTitle {
+  display: flex;
+  margin: 0;
+  align-items: baseline;
+  gap: 8px;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.count {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * A definition list laid out as ONE grid, not one flex row per pair: `max-content`
+ * keeps each value immediately after its label whatever the panel's width, and
+ * the shared grid keeps the values aligned in a column. `space-between` was the
+ * bug — on a wide screen it pushed the two ends of every row to the edges.
+ */
+.rows {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  column-gap: 20px;
+  row-gap: 7px;
+  margin: 0;
+}
+
+.row {
+  display: contents;
+}
+
+.label {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.value {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.calm,
+.busy {
+  border-radius: 6px;
+  font-size: 11px;
+  padding: 1px 6px;
+  white-space: nowrap;
+}
+
+.calm {
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.busy {
+  color: var(--dsw-alias-label-primary);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.failures {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.failure {
+  display: grid;
+  gap: 2px;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  padding: 8px 10px;
+}
+
+.failureKind {
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px;
+}
+
+.failureError {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+/* -------------------------------------------------------- distilled entries -- */
+
+.entries {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.entry {
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-2);
+  overflow: hidden;
+}
+
+.entryHead {
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  appearance: none;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.entryHead:hover {
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.entryHead:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+
+.entryName {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-secondary);
+  font-family: var(--dsw-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.entryMeta {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.badge {
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  padding: 1px 6px;
+  white-space: nowrap;
+}
+
+.entryTime {
+  color: var(--dsw-alias-label-quaternary);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.entryToggle {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.entryBody {
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.65;
+  overflow-wrap: anywhere;
+}
+
+.entryPreview {
+  margin: 0;
+  overflow: hidden;
+  padding: 0 12px 10px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hint {
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+  padding-top: 12px;
+}

package/src/client/MemoryView.tsx

@@ -0,0 +1,335 @@
+/**
+ * The conversation's Memory tab: what this session has been remembered as, what
+ * it was remembered into, and what is stuck.
+ *
+ * Three sections, in the order a reader wants them: the pipeline's status
+ * (watermarks, backlog, failures), then the span summaries consolidation
+ * produced, then the work units derived from them. Bodies render through the
+ * shell's own `MarkdownText`, so a summary reads exactly like assistant Markdown
+ * elsewhere in the GUI and costs no bundle weight.
+ *
+ * Raw `msg-*` entries are deliberately absent: they hold the conversation
+ * verbatim, the reader just wrote them, and the agent is the right reader for
+ * them (see `src/memory-api.js` for the same rule on the Host side).
+ *
+ * Status is polled; content is fetched only when it can have changed — on mount,
+ * on a session switch, on a manual refresh, and whenever consolidation advances
+ * the session's watermark. Reading the shelf costs hypatia round trips, and
+ * consolidation is the only thing that changes it.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import {
+  consolidationGap,
+  mergeMemory,
+  type FetchMemory,
+  type MemoryEntry,
+  type MemoryPayload,
+} from './memory-client'
+import { NS } from './locales'
+import css from './MemoryView.module.css'
+import './slot-contract'
+
+/** How often the tab re-reads the status half while it is on screen. */
+const POLL_MS = 5000
+
+export type MemoryViewProps = {
+  /** The session this tab is bound to; supplied by the session-scoped slot. */
+  sessionId: string
+  fetch: FetchMemory
+} & PropsLocale<typeof NS>
+
+/** Local wall-clock stamp for the freshness line. */
+function formatTime(epochMs: number): string {
+  if (!Number.isFinite(epochMs) || epochMs <= 0) return '—'
+  return new Date(epochMs).toLocaleTimeString()
+}
+
+/**
+ * hypatia stamps `created_at` as `YYYY-MM-DD HH:MM:SS.ffffff`; the microseconds
+ * are noise in a row that is 11px tall, so the tab shows down to the minute.
+ * Slice rather than `new Date`: the space-separated form is not the ISO shape
+ * every engine is required to parse.
+ */
+function formatEntryTime(stamp: string): string {
+  return stamp.length >= 16 ? stamp.slice(0, 16).replace('T', ' ') : stamp
+}
+
+/** The first non-empty line of a body, for a collapsed row's preview. */
+function firstLine(markdown: string): string {
+  for (const line of markdown.split('\n')) {
+    const trimmed = line.replace(/^[#>\-*\s]+/, '').trim()
+    if (trimmed !== '') return trimmed
+  }
+  return ''
+}
+
+/** One collapsible distilled entry. */
+function Entry({ entry, badge, open, onToggle, labels, t }: {
+  entry: MemoryEntry
+  badge: string
+  open: boolean
+  onToggle: () => void
+  labels: { code: { copyLabel: string; copiedLabel: string }; footnotes: string }
+  t: MemoryViewProps['t']
+}) {
+  return (
+    <li className={css.entry}>
+      <button type="button" className={css.entryHead} aria-expanded={open} onClick={onToggle}>
+        <span className={css.entryName}>{entry.name}</span>
+        <span className={css.entryMeta}>
+          <span className={css.badge}>{badge}</span>
+          {entry.createdAt !== '' ? <span className={css.entryTime}>{formatEntryTime(entry.createdAt)}</span> : null}
+          <span className={css.entryToggle}>{open ? t('memoryEntryCollapse') : t('memoryEntryExpand')}</span>
+        </span>
+      </button>
+      {open
+        ? (
+          <div className={css.entryBody}>
+            {entry.markdown === ''
+              ? <p className={css.status}>{t('memoryEntryEmpty')}</p>
+              : <MarkdownText text={entry.markdown} labels={labels} />}
+          </div>
+        )
+        : <p className={css.entryPreview}>{firstLine(entry.markdown)}</p>}
+    </li>
+  )
+}
+
+export function MemoryView({ sessionId, fetch, t }: MemoryViewProps) {
+  const [payload, setPayload] = useState<MemoryPayload | undefined>(undefined)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  /**
+   * The entries the reader opened, by name. Absent means closed, which is the
+   * default: a toggle survives the poll that replaces the payload, and an entry
+   * a later poll adds starts closed rather than inheriting a neighbour's state.
+   */
+  const [overrides, setOverrides] = useState<Readonly<Record<string, boolean>>>({})
+  /** The watermark whose content is already in hand, so a poll never re-reads it. */
+  const [contentAt, setContentAt] = useState<number | undefined>(undefined)
+
+  const copyLabel = t('memoryCopyCode')
+  const copiedLabel = t('memoryCopiedCode')
+  const footnotes = t('memoryFootnotes')
+  // MarkdownText caches its render against the labels identity, so this must be
+  // one object per locale, not a fresh one per render.
+  const labels = useMemo(
+    () => ({ code: { copyLabel, copiedLabel }, footnotes }),
+    [copyLabel, copiedLabel, footnotes],
+  )
+
+  /**
+   * The session the tab is showing now. A request outlives the session it was
+   * made for — a slow shelf read, or a poll already in flight at a switch — and
+   * its answer must be dropped rather than folded into the next session's view.
+   */
+  const activeSession = useRef(sessionId)
+
+  const load = useCallback(async (content: boolean) => {
+    const current = () => activeSession.current === sessionId
+    try {
+      const next = await fetch(sessionId, { content })
+      if (!current()) return
+      // Folded, not assigned: a status-only poll must not erase the shelf
+      // content it did not ask for (see `mergeMemory`).
+      setPayload((previous) => mergeMemory(previous, next))
+      setError('')
+      if (content) setContentAt(next.session.consolidatedSeq)
+    } catch (failure) {
+      if (!current()) return
+      setError(failure instanceof Error ? failure.message : String(failure))
+    } finally {
+      if (current()) setLoading(false)
+    }
+  }, [fetch, sessionId])
+
+  // A session switch starts over: the previous session's content and the
+  // previous session's collapsed rows must not leak into this one.
+  useEffect(() => {
+    activeSession.current = sessionId
+    setPayload(undefined)
+    setOverrides({})
+    setContentAt(undefined)
+    setLoading(true)
+    void load(true)
+  }, [load, sessionId])
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      // A hidden tab has nobody reading it; the panel is a snapshot, not a stream.
+      if (typeof document !== 'undefined' && document.visibilityState === 'hidden') return
+      void load(false)
+    }, POLL_MS)
+    return () => clearInterval(timer)
+  }, [load])
+
+  // Consolidation is the only thing that changes the shelf, so a watermark that
+  // moved is the signal to read it again.
+  useEffect(() => {
+    const at = payload?.session.consolidatedSeq
+    if (at === undefined || contentAt === undefined) return
+    if (at !== contentAt) void load(true)
+  }, [payload?.session.consolidatedSeq, contentAt, load])
+
+  const toggle = useCallback((name: string, open: boolean) => {
+    setOverrides((current) => ({ ...current, [name]: !open }))
+  }, [])
+
+  const session = payload?.session
+  const content = payload?.content
+  const summaries = content?.summaries ?? []
+  const workUnits = content?.workUnits ?? []
+
+  // Every entry starts closed and previews its first line: the list stays
+  // scannable at any length, and the bodies are one click away. `overrides`
+  // holds what the reader opened, so a poll that replaces the payload does not
+  // close it again.
+  const renderEntries = (entries: MemoryEntry[], kind: 'summary' | 'workUnit') => (
+    <ul className={css.entries}>
+      {entries.map((entry) => {
+        const open = overrides[entry.name] === true
+        return (
+          <Entry
+            key={entry.name}
+            entry={entry}
+            badge={kind === 'summary' ? t('memoryTier', { level: String(entry.level) }) : t('memoryWorkUnit')}
+            open={open}
+            onToggle={() => toggle(entry.name, open)}
+            labels={labels}
+            t={t}
+          />
+        )
+      })}
+    </ul>
+  )
+
+  return (
+    // Opts into the composer overlay the way the trajectory ledger does: the
+    // view owns its scroller and gets the full height, with the composer
+    // floating over it. Without the marker the Conversation shell seats the
+    // composer below a short panel instead.
+    <div className={css.panel} data-conversation-composer-overlay="">
+      <div className={css.column}>
+        <header className={css.head}>
+          <h2 className={css.title}>{t('memoryTitle')}</h2>
+          <div className={css.headMeta}>
+            <span className={css.updated}>{t('memoryUpdatedAt', { time: formatTime(payload?.updatedAt ?? 0) })}</span>
+            <button type="button" className={css.refresh} onClick={() => { void load(true) }}>
+              {t('memoryRefresh')}
+            </button>
+          </div>
+        </header>
+
+        {error !== '' ? <p className={css.error} role="status">{t('memoryLoadFailed', { message: error })}</p> : null}
+
+        {loading && payload === undefined
+          ? <p className={css.status}>{t('memoryLoading')}</p>
+          : session === undefined
+            ? <p className={css.status}>{t('memoryNoSnapshot')}</p>
+            : !session.known
+              ? <p className={css.status}>{t('memoryUnknown')}</p>
+              : (
+                <section className={css.group} aria-label={t('memoryTitle')}>
+                  <dl className={css.rows}>
+                    <div className={css.row}>
+                      <dt className={css.label}>{t('memoryLogged')}</dt>
+                      <dd className={css.value}>{t('memorySeqValue', { seq: String(session.loggedSeq) })}</dd>
+                    </div>
+                    <div className={css.row}>
+                      <dt className={css.label}>{t('memoryConsolidated')}</dt>
+                      <dd className={css.value}>
+                        {t('memorySeqValue', { seq: String(session.consolidatedSeq) })}
+                        {/* Quantified, not a bare "pending": a reader has to know HOW
+                            far behind to judge whether to wait. */}
+                        <span className={session.caughtUp ? css.calm : css.busy}>
+                          {session.caughtUp
+                            ? t('memoryCaughtUp')
+                            : t('memoryBehind', { behind: String(consolidationGap(session)) })}
+                        </span>
+                      </dd>
+                    </div>
+                    <div className={css.row}>
+                      <dt className={css.label}>{t('memoryPending')}</dt>
+                      <dd className={css.value}>{t('memoryPendingValue', { tokens: String(session.pendingTokens) })}</dd>
+                    </div>
+                    <div className={css.row}>
+                      <dt className={css.label}>{t('memorySessionNode')}</dt>
+                      <dd className={css.value}>
+                        {session.sessionNode ? t('memorySessionNodeYes') : t('memorySessionNodeNo')}
+                      </dd>
+                    </div>
+                    <div className={css.row}>
+                      <dt className={css.label}>{t('memoryBelongTo')}</dt>
+                      <dd className={css.value}>{t('memoryBelongToValue', { count: String(session.belongTo) })}</dd>
+                    </div>
+                    {session.deferred > 0 ? (
+                      <div className={css.row}>
+                        <dt className={css.label}>{t('memoryDeferred')}</dt>
+                        <dd className={css.value}>{String(session.deferred)}</dd>
+                      </div>
+                    ) : null}
+                  </dl>
+                </section>
+              )}
+
+        {session !== undefined && (session.failed > 0 || session.failedTasks.length > 0) ? (
+          <section className={css.group} aria-label={t('memoryFailedTitle')}>
+            <h3 className={css.groupTitle}>{t('memoryFailedTitle')}</h3>
+            <ul className={css.failures}>
+              {session.failedTasks.map((task, index) => (
+                <li key={`${task.kind}-${String(index)}`} className={css.failure}>
+                  <span className={css.failureKind}>
+                    {t('memoryFailedItem', { kind: task.kind, attempts: String(task.attempts) })}
+                  </span>
+                  {task.error !== '' ? <span className={css.failureError}>{task.error}</span> : null}
+                </li>
+              ))}
+              {session.failedTasks.length === 0 ? <li className={css.failure}>{session.error}</li> : null}
+            </ul>
+          </section>
+        ) : null}
+
+        {content !== undefined && content.error !== '' ? (
+          <section className={css.group} aria-label={t('memoryContentTitle')}>
+            <h3 className={css.groupTitle}>{t('memoryContentTitle')}</h3>
+            <p className={css.error} role="status">{t('memoryContentFailed', { message: content.error })}</p>
+          </section>
+        ) : null}
+
+        {content !== undefined ? (
+          <>
+            <section className={css.group} aria-label={t('memorySummariesTitle')}>
+              <h3 className={css.groupTitle}>
+                {t('memorySummariesTitle')}
+                <span className={css.count}>
+                  {t('memoryCount', { shown: String(summaries.length), total: String(content.summaryCount) })}
+                </span>
+              </h3>
+              {summaries.length === 0
+                ? <p className={css.status}>{t('memoryNoSummaries')}</p>
+                : renderEntries(summaries, 'summary')}
+            </section>
+
+            <section className={css.group} aria-label={t('memoryWorkUnitsTitle')}>
+              <h3 className={css.groupTitle}>
+                {t('memoryWorkUnitsTitle')}
+                <span className={css.count}>
+                  {t('memoryCount', { shown: String(workUnits.length), total: String(content.workUnitCount) })}
+                </span>
+              </h3>
+              {workUnits.length === 0
+                ? <p className={css.status}>{t('memoryNoWorkUnits')}</p>
+                : renderEntries(workUnits, 'workUnit')}
+            </section>
+
+            {content.truncated ? <p className={css.hint}>{t('memoryTruncated')}</p> : null}
+            <p className={css.hint}>{t('memoryHint')}</p>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/client/index.tsx

@@ -1,9 +1,11 @@
 /**
  * Browser half of dsh-hypatia-auto-memory: contributes a settings card under
- * Settings → Plugins, keyed by the `hypatia-auto-memory` namespace.
+ * Settings → Plugins, keyed by the `hypatia-auto-memory` namespace, and a
+ * per-session Memory tab beside the conversation's Chat and Trajectory tabs.
  *
  * The Host plugin already registers the schema and namespace; this half only
- * renders the form and routes edits through `ctx.settingsScope`.
+ * renders the form and routes edits through `ctx.settingsScope`. The Memory tab
+ * reads the Host's read-only status namespace (see `src/memory-status.js`).
  */
 
 import type { Context } from '@deepseek-ai/cordis'
@@ -15,10 +17,15 @@ import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { SettingsScopeBinder } from '@deepseek-ai/dsh-client-ui-settings/client'
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
 import type {} from '@deepseek-ai/dsh-client-ui-settings-plugins/client'
+// Type-only: the 'conversation.view' SlotMap row is declared by the conversation
+// shell, so the registration below only type-checks with its merge in the program.
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
 import { createElement } from 'react'
 import { SettingsCard } from './SettingsCard'
 import type { ConfigShape } from './SettingsCard'
 import type { LoadConsolidationModelCatalog } from './consolidation-models'
+import { MemoryView } from './MemoryView'
+import { fetchMemory } from './memory-client'
 import { readShelfInventory, type LoadShelfInventory } from './shelves'
 import { en, NS, zh } from './locales'
 
@@ -99,8 +106,31 @@ export function apply(ctx: Context): void {
     ),
   )
 
+  // The Memory tab's data: one same-origin request to the route this plugin's
+  // Host half registers (see `src/memory-api.js`), parameterized by the session
+  // the tab is bound to — which is why it is a route and not the settings
+  // descriptor read the shelf listing uses.
+  // The tab label reads through a bound translate so it follows the active
+  // locale without re-registration, exactly as ui-trajectory's does.
+  const t = locale.bind(NS)
+  const unregisterMemoryView = ctx.slots.inject('conversation.view', () =>
+    ctx.slots.register(
+      {
+        name: 'conversation.view',
+        id: 'memory',
+        // After Chat (0) and Trajectory (10).
+        order: 20,
+        locale: NS,
+        label: () => t('viewMemory'),
+        inject: () => ({ fetch: fetchMemory }),
+      },
+      MemoryView,
+    ),
+  )
+
   ctx.effect(() => () => {
     unregister()
+    unregisterMemoryView()
     releaseApply()
   })
 }