@dsh-cove/dsh-web-all 0.0.0-stage → 0.4.3

package/lib/types/client/sidebar/panels/memoir/panel.js

@@ -0,0 +1,423 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The memoir panel: project / global memory tabs, client-side search,
+ * manual record form, per-entry delete. Rendered into the center-column
+ * container by mount.tsx; visibility is CSS-driven (html data attribute).
+ */
+import { Fragment, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { SECTION_KEYS } from "./i18n.js";
+import { PageNotice, PageShell } from "../../page-shell.js";
+const parseList = (value) => [...new Set(value.split(/[,，\n]/).map((item) => item.trim()).filter((item) => item !== ''))];
+async function copyText(value) {
+    try {
+        if (navigator.clipboard !== undefined) {
+            await navigator.clipboard.writeText(value);
+            return true;
+        }
+        const textarea = document.createElement('textarea');
+        textarea.value = value;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        const copied = document.execCommand('copy');
+        textarea.remove();
+        return copied;
+    }
+    catch {
+        return false;
+    }
+}
+/** One entry's meta line: lifecycle, importance, tags and provenance. */
+function EntryMeta({ entry, t, openSource }) {
+    const [copied, setCopied] = useState(false);
+    const when = new Date(entry.time);
+    const pad = (n) => String(n).padStart(2, '0');
+    const timeText = `${when.getFullYear()}-${pad(when.getMonth() + 1)}-${pad(when.getDate())} ${pad(when.getHours())}:${pad(when.getMinutes())}`;
+    const source = entry.source ?? (entry.sessionId === undefined ? undefined : { sessionId: entry.sessionId });
+    const sourceText = source === undefined
+        ? ''
+        : [
+            source.sessionId === undefined ? undefined : `sessionId=${source.sessionId}`,
+            source.turnId === undefined ? undefined : `turnId=${source.turnId}`,
+        ].filter(Boolean).join('\n');
+    const copySource = () => {
+        void copyText(sourceText).then((ok) => {
+            if (!ok)
+                return;
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1_500);
+        });
+    };
+    return (_jsxs("div", { className: "memoir-entry-meta", children: [_jsx("span", { children: timeText }), _jsx("span", { className: "memoir-chip", children: t('sections.' + entry.section) }), entry.status !== undefined && entry.status !== 'active'
+                ? _jsx("span", { className: "memoir-chip", children: t('status.' + entry.status) })
+                : null, entry.pinned === true ? _jsx("span", { className: "memoir-chip", children: t('lifecycle.pin') }) : null, _jsxs("span", { className: "memoir-chip", title: t('form.importanceHint'), children: [t('form.importance'), ": ", entry.importance ?? 3] }), (entry.tags ?? []).map((tag) => _jsxs("span", { className: "memoir-chip memoir-tag", children: ["#", tag] }, tag)), (entry.supersedes?.length ?? 0) > 0
+                ? _jsxs("span", { className: "memoir-chip", title: entry.supersedes?.join('\n'), children: [t('form.supersedes'), ": ", entry.supersedes?.length] })
+                : null, source !== undefined
+                ? _jsxs("span", { className: "memoir-source", children: [source.sessionId !== undefined
+                            ? _jsxs("button", { type: "button", className: "memoir-source-link", title: t('source.open'), onClick: () => openSource?.(source.sessionId, source.turnId), children: [t('source.label'), ": ", source.sessionId.slice(0, 10), source.turnId === undefined ? '' : ` · ${t('source.turn')} ${source.turnId}`] })
+                            : _jsxs("span", { children: [t('source.turn'), " ", source.turnId] }), _jsx("button", { type: "button", className: "memoir-source-copy", title: t('source.copy'), onClick: copySource, children: copied ? t('source.copied') : '⧉' })] })
+                : null] }));
+}
+function EntryCard({ entry, t, onDelete, onUpdate, openSource, score }) {
+    const [editing, setEditing] = useState(false);
+    const [section, setSection] = useState(entry.section);
+    const [title, setTitle] = useState(entry.title ?? '');
+    const [content, setContent] = useState(entry.content);
+    const [importance, setImportance] = useState(String(entry.importance ?? 3));
+    const [tags, setTags] = useState((entry.tags ?? []).join(', '));
+    const [supersedes, setSupersedes] = useState((entry.supersedes ?? []).join(', '));
+    const save = () => {
+        if (content.trim() === '' || onUpdate === undefined)
+            return;
+        onUpdate(entry, {
+            section,
+            title: title.trim() === '' ? null : title.trim(),
+            content: content.trim(),
+            importance: Number(importance),
+            tags: parseList(tags),
+            supersedes: parseList(supersedes),
+        });
+        setEditing(false);
+    };
+    return (_jsxs("div", { className: "memoir-entry", "data-dsh-part": "entry", children: [_jsx("button", { type: "button", className: "memoir-delete", title: t('delete.confirm'), onClick: () => onDelete(entry), children: "\u00D7" }), onUpdate !== undefined
+                ? _jsxs("div", { className: "memoir-entry-actions", children: [_jsx("button", { type: "button", className: "memoir-iconbtn", onClick: () => setEditing((value) => !value), children: editing ? t('toolbar.cancel') : t('lifecycle.edit') }), _jsx("button", { type: "button", className: "memoir-iconbtn", onClick: () => onUpdate(entry, { pinned: entry.pinned !== true }), children: entry.pinned === true ? t('lifecycle.unpin') : t('lifecycle.pin') }), (entry.status ?? 'active') === 'active'
+                            ? _jsx("button", { type: "button", className: "memoir-iconbtn", onClick: () => onUpdate(entry, { status: 'superseded' }), children: t('lifecycle.supersede') })
+                            : _jsx("button", { type: "button", className: "memoir-iconbtn", onClick: () => onUpdate(entry, { status: 'active' }), children: t('lifecycle.unsupersede') }), _jsx("button", { type: "button", className: "memoir-iconbtn", onClick: () => onUpdate(entry, { status: entry.status === 'archived' ? 'active' : 'archived' }), children: entry.status === 'archived' ? t('lifecycle.restore') : t('lifecycle.archive') })] })
+                : null, _jsx(EntryMeta, { entry: entry, t: t, openSource: openSource }), score !== undefined
+                ? _jsx("span", { className: "memoir-score", title: t('search.ranked'), children: score.toFixed(3) })
+                : null, editing
+                ? _jsxs("div", { className: "memoir-form memoir-entry-editor", children: [_jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.section') }), _jsx("select", { value: section, onChange: (e) => setSection(e.target.value), children: SECTION_KEYS.map((key) => _jsx("option", { value: key, children: t('sections.' + key) }, key)) })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.title') }), _jsx("input", { value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.content') }), _jsx("textarea", { value: content, onChange: (e) => setContent(e.target.value) })] }), _jsxs("div", { className: "memoir-form-row", children: [_jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.importance') }), _jsx("select", { value: importance, onChange: (e) => setImportance(e.target.value), children: [1, 2, 3, 4, 5].map((value) => _jsx("option", { value: value, children: value }, value)) })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.tags') }), _jsx("input", { value: tags, placeholder: t('form.placeholder.tags'), onChange: (e) => setTags(e.target.value) })] })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.supersedes') }), _jsx("input", { value: supersedes, placeholder: t('form.placeholder.supersedes'), onChange: (e) => setSupersedes(e.target.value) })] }), _jsxs("div", { className: "memoir-form-actions", children: [_jsx("button", { type: "button", className: "memoir-iconbtn", onClick: () => setEditing(false), children: t('toolbar.cancel') }), _jsx("button", { type: "button", className: "memoir-primary", onClick: save, children: t('lifecycle.save') })] })] })
+                : _jsxs(_Fragment, { children: [entry.title !== undefined ? _jsx("div", { className: "memoir-entry-title", children: entry.title }) : null, _jsx("div", { className: "memoir-entry-content", children: entry.content })] })] }));
+}
+/** Sectioned entry list in canonical order. */
+function SectionedEntries({ entries, t, onDelete, onUpdate, openSource }) {
+    const groups = useMemo(() => SECTION_KEYS.map((key) => ({ key, entries: entries.filter((e) => e.section === key) })).filter((g) => g.entries.length > 0), [entries]);
+    if (groups.length === 0) {
+        return (_jsx("div", { className: "memoir-empty", children: _jsx("div", { className: "memoir-empty-title", children: t('empty.search') }) }));
+    }
+    return (_jsx(Fragment, { children: groups.map((group) => (_jsxs(Fragment, { children: [_jsxs("div", { className: "memoir-section-title", children: [t('sections.' + group.key), _jsxs("span", { className: "memoir-count", children: ["(", group.entries.length, ")"] })] }), group.entries.map((entry) => (_jsx(EntryCard, { entry: entry, t: t, onDelete: onDelete, onUpdate: onUpdate, openSource: openSource }, entry.id)))] }, group.key))) }));
+}
+/**
+ * Ranked search results (v0.4.2): the host RetrievalEngine order, flat for
+ * the project tab or grouped by project for the global tab. Scores are
+ * shown as chips so the ranking is inspectable.
+ */
+function RankedResults({ results, pending, grouped, t, onDelete, onUpdate, openSource }) {
+    if (pending)
+        return _jsx("div", { className: "memoir-empty", children: "\u2026" });
+    if (results.length === 0) {
+        return (_jsxs("div", { className: "memoir-empty", children: [_jsx("div", { className: "memoir-empty-title", children: t('empty.search') }), _jsx("div", { className: "memoir-empty-hint", children: t('search.ranked') })] }));
+    }
+    if (!grouped) {
+        return (_jsxs(Fragment, { children: [_jsx("div", { className: "memoir-ranked-note", children: t('search.ranked') }), results.map((r) => (_jsx(EntryCard, { entry: r.entry, score: r.score, t: t, onDelete: (entry) => onDelete(entry, r.projectPath), onUpdate: (entry, patch) => onUpdate?.(entry, r.projectPath, patch), openSource: openSource }, r.entry.id)))] }));
+    }
+    const groups = new Map();
+    for (const result of results) {
+        const bucket = groups.get(result.projectPath) ?? [];
+        bucket.push(result);
+        groups.set(result.projectPath, bucket);
+    }
+    return (_jsx(Fragment, { children: [...groups.entries()].map(([path, bucket]) => (_jsxs("div", { className: "memoir-project-card", children: [_jsxs("div", { className: "memoir-project-head", children: [_jsx("span", { className: "memoir-project-title", children: path.split('/').filter(Boolean).pop() || path }), _jsx("span", { className: "memoir-project-path", children: path })] }), bucket.map((r) => (_jsx(EntryCard, { entry: r.entry, score: r.score, t: t, onDelete: (entry) => onDelete(entry, path), onUpdate: (entry, patch) => onUpdate?.(entry, path, patch), openSource: openSource }, r.entry.id)))] }, path))) }));
+}
+function AddForm({ t, onSubmit, onCancel }) {
+    const [section, setSection] = useState('lessons');
+    const [title, setTitle] = useState('');
+    const [content, setContent] = useState('');
+    const [importance, setImportance] = useState('3');
+    const [pinned, setPinned] = useState(false);
+    const [tags, setTags] = useState('');
+    const [supersedes, setSupersedes] = useState('');
+    const submit = () => {
+        if (content.trim() === '')
+            return;
+        onSubmit({
+            section,
+            title: title.trim() === '' ? undefined : title.trim(),
+            content: content.trim(),
+            importance: Number(importance),
+            pinned,
+            tags: parseList(tags),
+            supersedes: parseList(supersedes),
+        });
+    };
+    return (_jsxs("div", { className: "memoir-form", "data-dsh-part": "entry-form", children: [_jsxs("div", { className: "memoir-form-row", children: [_jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.section') }), _jsx("select", { value: section, onChange: (e) => setSection(e.target.value), children: SECTION_KEYS.map((key) => (_jsx("option", { value: key, children: t('sections.' + key) }, key))) })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.title') }), _jsx("input", { value: title, placeholder: t('form.placeholder.title'), onChange: (e) => setTitle(e.target.value) })] })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.content') }), _jsx("textarea", { value: content, placeholder: t('form.placeholder.content'), onChange: (e) => setContent(e.target.value) })] }), _jsxs("div", { className: "memoir-form-row", children: [_jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.importance') }), _jsx("select", { value: importance, onChange: (e) => setImportance(e.target.value), children: [1, 2, 3, 4, 5].map((value) => _jsx("option", { value: value, children: value }, value)) }), _jsx("small", { children: t('form.importanceHint') })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.tags') }), _jsx("input", { value: tags, placeholder: t('form.placeholder.tags'), onChange: (e) => setTags(e.target.value) })] })] }), _jsxs("div", { className: "memoir-field", children: [_jsx("label", { children: t('form.supersedes') }), _jsx("input", { value: supersedes, placeholder: t('form.placeholder.supersedes'), onChange: (e) => setSupersedes(e.target.value) })] }), _jsxs("label", { className: "memoir-settings-switch", children: [_jsx("input", { type: "checkbox", checked: pinned, onChange: (e) => setPinned(e.target.checked) }), _jsxs("span", { children: [_jsx("strong", { children: t('form.pinned') }), _jsx("small", { children: t('form.pinnedHint') })] })] }), _jsxs("div", { className: "memoir-form-actions", children: [_jsx("button", { type: "button", className: "memoir-iconbtn", onClick: onCancel, children: t('toolbar.cancel') }), _jsx("button", { type: "button", className: "memoir-primary", onClick: submit, children: t('form.submit') })] })] }));
+}
+function SimilarityCandidateCard({ candidate, t, busy, onResolve }) {
+    return (_jsxs("div", { className: "memoir-similarity-candidate", children: [_jsxs("div", { className: "memoir-similarity-head", children: [_jsx("span", { className: `memoir-chip memoir-similarity-${candidate.kind}`, children: t(`similarity.kind.${candidate.kind}`) }), _jsx("strong", { children: candidate.entry.title ?? candidate.entry.content.slice(0, 100) }), _jsxs("span", { className: "memoir-score-static", children: [Math.round(candidate.score * 100), "%"] })] }), candidate.entry.title !== undefined ? _jsx("div", { className: "memoir-similarity-content", children: candidate.entry.content }) : null, _jsxs("div", { className: "memoir-similarity-components", children: ["BM25 ", Math.round(candidate.components.bm25 * 100), "% \u00B7 ", t('similarity.titleScore'), " ", Math.round(candidate.components.title * 100), "% \u00B7 Jaccard ", Math.round(candidate.components.tokenJaccard * 100), "%"] }), _jsx("div", { className: "memoir-similarity-reasons", children: candidate.reasons.map((reason) => _jsx("span", { className: "memoir-chip", children: t(`similarity.reason.${reason}`) }, reason)) }), _jsxs("div", { className: "memoir-form-actions", children: [_jsx("button", { type: "button", className: "memoir-iconbtn", disabled: busy, onClick: () => onResolve('update', candidate.entry.id), children: t('similarity.update') }), _jsx("button", { type: "button", className: "memoir-primary", disabled: busy, onClick: () => onResolve('supersede', candidate.entry.id), children: t('similarity.supersede') })] })] }));
+}
+function SimilarityResolution({ result, t, busy, onResolve, onBack }) {
+    return (_jsxs("div", { className: "memoir-similarity", "data-dsh-part": "similarity-resolution", children: [_jsx("div", { className: "memoir-similarity-title", children: t('similarity.title') }), _jsx("div", { className: "memoir-settings-description", children: t('similarity.description') }), result.candidates.map((candidate) => (_jsx(SimilarityCandidateCard, { candidate: candidate, t: t, busy: busy, onResolve: onResolve }, candidate.entry.id))), _jsxs("div", { className: "memoir-similarity-footer", children: [_jsx("button", { type: "button", className: "memoir-iconbtn", disabled: busy, onClick: onBack, children: t('similarity.back') }), _jsx("button", { type: "button", className: "memoir-iconbtn", disabled: busy, onClick: () => onResolve('force-record'), children: t('similarity.force') })] })] }));
+}
+const NUMERIC_SETTINGS = [
+    'autoDistillEvery',
+    'autoDistillCooldownMin',
+    'autoDistillMinTools',
+    'hotMemoryTokens',
+    'hotMemoryMaxTokens',
+    'readDefaultLimit',
+    'readMaxLimit',
+    'sessionSnapshotMax',
+    'queryCacheSize',
+];
+/** Persistent, live complete settings shared by the panel and Settings page. */
+export function MemoirSettingsPanel({ api, t, refreshKey, onChanged, defaultOpen = false, alwaysOpen = false, showDescription = true }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const [settings, setSettings] = useState(null);
+    const [source, setSource] = useState('profile');
+    const [draft, setDraft] = useState({
+        autoDistillEvery: '1',
+        autoDistillCooldownMin: '0',
+        autoDistillMinTools: '1',
+        hotMemoryTokens: '900',
+        hotMemoryMaxTokens: '1200',
+        readDefaultLimit: '8',
+        readMaxLimit: '30',
+        sessionSnapshotMax: '128',
+        queryCacheSize: '128',
+    });
+    const [busy, setBusy] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [error, setError] = useState(null);
+    const applySnapshot = (snapshot) => {
+        setError(null);
+        setSettings(snapshot.settings);
+        setSource(snapshot.source);
+        setDraft(Object.fromEntries(NUMERIC_SETTINGS.map((key) => [key, String(snapshot.settings[key])])));
+    };
+    useEffect(() => {
+        let cancelled = false;
+        api.settings()
+            .then((value) => { if (!cancelled)
+            applySnapshot(value); })
+            .catch((e) => { if (!cancelled)
+            setError(`${t('settings.loadFailed')}: ${e.message}`); });
+        return () => { cancelled = true; };
+    }, [api, refreshKey]);
+    const save = () => {
+        if (settings === null)
+            return;
+        const parsed = Object.fromEntries(NUMERIC_SETTINGS.map((key) => [key, Number(draft[key])]));
+        const integerKeys = NUMERIC_SETTINGS.filter((key) => key !== 'autoDistillCooldownMin');
+        const invalidInteger = integerKeys.some((key) => !Number.isSafeInteger(parsed[key]) || parsed[key] < 1);
+        if (invalidInteger
+            || !Number.isFinite(parsed.autoDistillCooldownMin)
+            || parsed.autoDistillCooldownMin < 0
+            || parsed.hotMemoryMaxTokens < parsed.hotMemoryTokens
+            || parsed.readMaxLimit < parsed.readDefaultLimit) {
+            setMessage(null);
+            setError(t('settings.invalid'));
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        setMessage(null);
+        api.updateSettings({
+            announceToAgent: settings.announceToAgent,
+            autoDistill: settings.autoDistill,
+            ...parsed,
+        })
+            .then((value) => {
+            applySnapshot(value);
+            setMessage(t('settings.saved'));
+            onChanged();
+        })
+            .catch((e) => setError(`${t('settings.saveFailed')}: ${e.message}`))
+            .finally(() => setBusy(false));
+    };
+    const reset = () => {
+        setBusy(true);
+        setError(null);
+        setMessage(null);
+        api.resetSettings()
+            .then((value) => {
+            applySnapshot(value);
+            setMessage(t('settings.resetDone'));
+            onChanged();
+        })
+            .catch((e) => setError(`${t('settings.saveFailed')}: ${e.message}`))
+            .finally(() => setBusy(false));
+    };
+    return (_jsxs("div", { className: "memoir-settings", "data-dsh-part": "settings", children: [!alwaysOpen
+                ? _jsxs("button", { type: "button", className: "memoir-diagnostics-toggle", "aria-expanded": open, onClick: () => setOpen((value) => !value), children: [t('settings.title'), " ", open ? '▾' : '▸'] })
+                : null, alwaysOpen || open
+                ? settings === null
+                    ? _jsx("div", { className: "memoir-settings-body", children: error ?? '…' })
+                    : (_jsxs("div", { className: "memoir-settings-body", children: [showDescription ? _jsx("div", { className: "memoir-settings-description", children: t('settings.description') }) : null, _jsxs("label", { className: "memoir-settings-switch", children: [_jsx("input", { type: "checkbox", checked: settings.announceToAgent, onChange: (event) => setSettings({ ...settings, announceToAgent: event.target.checked }) }), _jsxs("span", { children: [_jsx("strong", { children: t('settings.announce') }), _jsx("small", { children: t('settings.announceHint') })] })] }), _jsx("div", { className: "memoir-settings-group-title", children: t('settings.group.distill') }), _jsxs("label", { className: "memoir-settings-switch", children: [_jsx("input", { type: "checkbox", checked: settings.autoDistill, onChange: (event) => setSettings({ ...settings, autoDistill: event.target.checked }) }), _jsxs("span", { children: [_jsx("strong", { children: t('settings.enabled') }), _jsx("small", { children: t('settings.enabledHint') })] })] }), _jsx("div", { className: "memoir-settings-grid", children: ['autoDistillEvery', 'autoDistillCooldownMin', 'autoDistillMinTools'].map((key) => (_jsxs("label", { className: "memoir-field", children: [_jsx("span", { children: t(`settings.${key}`) }), _jsx("input", { type: "number", min: key === 'autoDistillCooldownMin' ? '0' : '1', step: key === 'autoDistillCooldownMin' ? '0.1' : '1', value: draft[key], onChange: (event) => setDraft({ ...draft, [key]: event.target.value }) }), _jsx("small", { children: t(`settings.${key}Hint`) })] }, key))) }), _jsx("div", { className: "memoir-settings-note", children: t('settings.andHint') }), _jsx("div", { className: "memoir-settings-group-title", children: t('settings.group.memory') }), _jsx("div", { className: "memoir-settings-grid", children: ['hotMemoryTokens', 'hotMemoryMaxTokens', 'readDefaultLimit', 'readMaxLimit', 'sessionSnapshotMax', 'queryCacheSize'].map((key) => (_jsxs("label", { className: "memoir-field", children: [_jsx("span", { children: t(`settings.${key}`) }), _jsx("input", { type: "number", min: "1", step: "1", value: draft[key], onChange: (event) => setDraft({ ...draft, [key]: event.target.value }) }), _jsx("small", { children: t(`settings.${key}Hint`) })] }, key))) }), _jsx("div", { className: "memoir-settings-note", children: t('settings.liveHint') }), _jsxs("div", { className: "memoir-settings-source", children: [t('settings.source'), ": ", t(`settings.source.${source}`)] }), error !== null ? _jsx("div", { className: "memoir-error memoir-settings-feedback", children: error }) : null, message !== null ? _jsx("div", { className: "memoir-settings-success", children: message }) : null, _jsxs("div", { className: "memoir-form-actions", children: [_jsx("button", { type: "button", className: "memoir-iconbtn", disabled: busy || source === 'profile', onClick: reset, children: t('settings.reset') }), _jsx("button", { type: "button", className: "memoir-primary", disabled: busy, onClick: save, children: t('settings.save') })] })] }))
+                : null] }));
+}
+export function MemoirPanel({ api, cwdTracker, t, openSource }) {
+    const [, setLanguage] = useState(document.documentElement.lang);
+    useEffect(() => {
+        const observer = new MutationObserver(() => setLanguage(document.documentElement.lang));
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
+        return () => observer.disconnect();
+    }, []);
+    const cwd = useSyncExternalStore(cwdTracker.subscribe, cwdTracker.getSnapshot);
+    const [tab, setTab] = useState('project');
+    const [query, setQuery] = useState('');
+    const [statusFilter, setStatusFilter] = useState('active');
+    const [sectionFilter, setSectionFilter] = useState('all');
+    const [formOpen, setFormOpen] = useState(false);
+    const [pendingRecord, setPendingRecord] = useState(null);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const [project, setProject] = useState(null);
+    const [projects, setProjects] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [diag, setDiag] = useState(null);
+    const [diagOpen, setDiagOpen] = useState(false);
+    const [searchResults, setSearchResults] = useState(null);
+    const [hotMemory, setHotMemory] = useState(null);
+    const [inspectorOpen, setInspectorOpen] = useState(false);
+    const q = query.trim().toLowerCase();
+    useEffect(() => {
+        let cancelled = false;
+        setError(null);
+        if (tab === 'project') {
+            if (cwd === '') {
+                setProject(null);
+                return undefined;
+            }
+            setLoading(true);
+            api.project(cwd, { status: statusFilter, section: sectionFilter === 'all' ? undefined : sectionFilter })
+                .then((value) => { if (!cancelled)
+                setProject(value.project); })
+                .catch((e) => { if (!cancelled)
+                setError(e.message); })
+                .finally(() => { if (!cancelled)
+                setLoading(false); });
+        }
+        else {
+            setLoading(true);
+            api.global({ status: statusFilter, section: sectionFilter === 'all' ? undefined : sectionFilter })
+                .then((value) => { if (!cancelled)
+                setProjects(value.projects); })
+                .catch((e) => { if (!cancelled)
+                setError(e.message); })
+                .finally(() => { if (!cancelled)
+                setLoading(false); });
+        }
+        // Diagnostics follow the active workspace (observability, roadmap §4).
+        api.diagnostics(cwd === '' ? undefined : cwd)
+            .then((value) => { if (!cancelled)
+            setDiag(value); })
+            .catch(() => { if (!cancelled)
+            setDiag(null); });
+        // Hot-memory inspector preview (what the next session inherits).
+        if (cwd === '') {
+            setHotMemory(null);
+        }
+        else {
+            api.hotMemory(cwd)
+                .then((value) => { if (!cancelled)
+                setHotMemory(value.hotMemory); })
+                .catch(() => { if (!cancelled)
+                setHotMemory(null); });
+        }
+        return () => { cancelled = true; };
+    }, [tab, cwd, statusFilter, sectionFilter, refreshKey]);
+    // v0.4.2: a non-empty query searches through the host RetrievalEngine —
+    // the same BM25 ranking memoir_read uses. Debounced; empty query resets.
+    useEffect(() => {
+        if (q === '') {
+            setSearchResults(null);
+            return undefined;
+        }
+        let cancelled = false;
+        const timer = setTimeout(() => {
+            const scope = tab === 'project' ? 'project' : 'global';
+            api.search({
+                scope,
+                path: tab === 'project' && cwd !== '' ? cwd : undefined,
+                query: q,
+                status: statusFilter,
+                section: sectionFilter === 'all' ? undefined : sectionFilter,
+            })
+                .then((value) => { if (!cancelled)
+                setSearchResults(value.results); })
+                .catch((e) => {
+                if (!cancelled) {
+                    setSearchResults([]);
+                    setError(e.message);
+                }
+            });
+        }, 200);
+        return () => { cancelled = true; clearTimeout(timer); };
+    }, [q, tab, cwd, statusFilter, sectionFilter, refreshKey]);
+    const filterEntries = (entries) => q === '' ? entries : entries.filter((e) => `${e.title ?? ''} ${e.content}`.toLowerCase().includes(q));
+    const reload = () => setRefreshKey((k) => k + 1);
+    const onDelete = (entry, entryPath) => {
+        if (!window.confirm(t('delete.confirm')))
+            return;
+        setBusy(true);
+        api.remove({ path: entryPath, id: entry.id })
+            .then(() => reload())
+            .catch((e) => setError(`${t('delete.failed')}: ${e.message}`))
+            .finally(() => setBusy(false));
+    };
+    const onRecord = (payload, resolution, targetId) => {
+        setBusy(true);
+        api.record({ path: cwd, ...payload, ...(resolution !== undefined ? { resolution } : {}), ...(targetId !== undefined ? { targetId } : {}) })
+            .then((result) => {
+            if (result.action === 'needs-resolution') {
+                setPendingRecord({ payload, result });
+                return;
+            }
+            setPendingRecord(null);
+            setFormOpen(false);
+            reload();
+        })
+            .catch((e) => setError(`${t('record.failed')}: ${e.message}`))
+            .finally(() => setBusy(false));
+    };
+    const onUpdate = (entry, entryPath, patch) => {
+        setBusy(true);
+        api.update({ path: entryPath, id: entry.id, ...patch })
+            .then(() => reload())
+            .catch((e) => setError(`${t('update.failed')}: ${e.message}`))
+            .finally(() => setBusy(false));
+    };
+    const projectEntries = project === null ? [] : filterEntries(project.entries);
+    return (_jsxs(PageShell, { plugin: "memoir", title: t('panel.title'), intro: tab === 'project' ? (cwd === '' ? t('empty.workspace') : cwd) : t('tab.global'), busy: loading, toolbar: _jsx("button", { type: "button", className: "memoir-iconbtn", title: t('panel.refresh'), onClick: reload, children: "\u27F3" }), children: [_jsxs("div", { className: "memoir-tabs", "data-dsh-part": "tabs", children: [_jsx("button", { type: "button", className: "memoir-tab", "data-active": tab === 'project' ? 'true' : undefined, onClick: () => setTab('project'), children: t('tab.project') }), _jsx("button", { type: "button", className: "memoir-tab", "data-active": tab === 'global' ? 'true' : undefined, onClick: () => setTab('global'), children: t('tab.global') })] }), _jsxs("div", { className: "memoir-toolbar", "data-dsh-part": "toolbar", children: [_jsx("input", { className: "memoir-search", placeholder: t('toolbar.search'), value: query, onChange: (e) => setQuery(e.target.value) }), _jsxs("label", { className: "memoir-status-filter", children: [_jsx("span", { children: t('filter.status') }), _jsxs("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), children: [_jsx("option", { value: "active", children: t('status.active') }), _jsx("option", { value: "all", children: t('filter.all') }), _jsx("option", { value: "superseded", children: t('status.superseded') }), _jsx("option", { value: "archived", children: t('status.archived') })] })] }), _jsxs("label", { className: "memoir-status-filter", children: [_jsx("span", { children: t('filter.section') }), _jsxs("select", { value: sectionFilter, onChange: (e) => setSectionFilter(e.target.value), children: [_jsx("option", { value: "all", children: t('filter.all') }), SECTION_KEYS.map((key) => _jsx("option", { value: key, children: t('sections.' + key) }, key))] })] }), tab === 'project' && cwd !== ''
+                        ? _jsx("button", { type: "button", className: "memoir-primary", onClick: () => {
+                                setFormOpen((value) => !value);
+                                setPendingRecord(null);
+                            }, children: formOpen ? t('toolbar.cancel') : t('toolbar.add') })
+                        : null] }), formOpen && tab === 'project' && cwd !== ''
+                ? pendingRecord === null
+                    ? _jsx(AddForm, { t: t, onSubmit: onRecord, onCancel: () => setFormOpen(false) })
+                    : _jsx(SimilarityResolution, { result: pendingRecord.result, t: t, busy: busy, onResolve: (resolution, targetId) => onRecord(pendingRecord.payload, resolution, targetId), onBack: () => setPendingRecord(null) })
+                : null, error !== null ? _jsx(PageNotice, { kind: "error", children: error }) : null, _jsxs("div", { className: "memoir-scroll-region", "data-dsh-part": "scroll-region", children: [_jsx("div", { className: "memoir-body", children: loading
+                            ? _jsx(PageNotice, { kind: "loading", children: t('panel.loading') })
+                            : q !== ''
+                                ? (_jsx(RankedResults, { results: searchResults ?? [], pending: searchResults === null, grouped: tab === 'global', t: t, openSource: openSource, onDelete: (entry, path) => onDelete(entry, path), onUpdate: onUpdate }))
+                                : tab === 'project'
+                                    ? cwd === ''
+                                        ? (_jsxs("div", { className: "memoir-empty", children: [_jsx("div", { className: "memoir-empty-title", children: t('empty.workspace') }), _jsx("div", { className: "memoir-empty-hint", children: t('empty.workspaceHint') })] }))
+                                        : projectEntries.length === 0
+                                            ? (_jsxs("div", { className: "memoir-empty", children: [_jsx("div", { className: "memoir-empty-title", children: t('empty.project') }), _jsx("div", { className: "memoir-empty-hint", children: t('empty.projectHint') })] }))
+                                            : _jsx(SectionedEntries, { entries: projectEntries, t: t, openSource: openSource, onDelete: (entry) => onDelete(entry, project?.path ?? cwd), onUpdate: (entry, patch) => onUpdate(entry, project?.path ?? cwd, patch) })
+                                    : projects.length === 0
+                                        ? (_jsxs("div", { className: "memoir-empty", children: [_jsx("div", { className: "memoir-empty-title", children: t('empty.global') }), _jsx("div", { className: "memoir-empty-hint", children: t('empty.globalHint') })] }))
+                                        : projects.map((p) => {
+                                            const entries = filterEntries(p.entries);
+                                            if (entries.length === 0)
+                                                return null;
+                                            const when = new Date(p.updatedAt);
+                                            return (_jsxs("div", { className: "memoir-project-card", children: [_jsxs("div", { className: "memoir-project-head", children: [_jsx("span", { className: "memoir-project-title", children: p.title }), _jsx("span", { className: "memoir-project-path", children: p.path })] }), _jsx("div", { className: "memoir-project-meta", children: `${t('updated')} ${when.toISOString().slice(0, 16).replace('T', ' ')} · ${entries.length} ${t('entries')}` }), _jsx(SectionedEntries, { entries: entries, t: t, openSource: openSource, onDelete: (entry) => onDelete(entry, p.path), onUpdate: (entry, patch) => onUpdate(entry, p.path, patch) })] }, p.key));
+                                        }) }), busy ? _jsx("div", { className: "memoir-empty memoir-busy", children: "\u2026" }) : null, _jsx(MemoirSettingsPanel, { api: api, t: t, refreshKey: refreshKey, onChanged: reload }), _jsxs("div", { className: "memoir-inspector", "data-dsh-part": "hot-memory", children: [_jsxs("button", { type: "button", className: "memoir-diagnostics-toggle", onClick: () => setInspectorOpen((v) => !v), children: [t('inspector.title'), " ", inspectorOpen ? '▾' : '▸'] }), inspectorOpen
+                                ? hotMemory === null || hotMemory.text === ''
+                                    ? _jsx("div", { className: "memoir-inspector-body", children: t('inspector.empty') })
+                                    : _jsx("pre", { className: "memoir-inspector-body", children: hotMemory.text })
+                                : null] }), _jsxs("div", { className: "memoir-diagnostics", "data-dsh-part": "diagnostics", children: [_jsxs("button", { type: "button", className: "memoir-diagnostics-toggle", onClick: () => setDiagOpen((v) => !v), children: [t('diag.title'), " ", diagOpen ? '▾' : '▸'] }), diagOpen && diag !== null
+                                ? (_jsxs("div", { className: "memoir-diagnostics-body", children: [_jsxs("div", { children: [t('diag.revision'), ": ", diag.storeRevision, " \u00B7 ", t('diag.snapshot'), ": ", diag.snapshotCount, "/", diag.snapshotMax] }), _jsxs("div", { children: [t('diag.cache'), ": ", diag.cache.hits, "/", diag.cache.loads, " \u547D\u4E2D (", Math.round(diag.cache.hitRate * 100), "%) \u00B7 ", t('diag.render'), ": ", Math.round(diag.cache.renderHitRate * 100), "%"] }), diag.hotMemory !== null
+                                            ? _jsxs("div", { children: [t('diag.hot'), ": ", diag.hotMemory.selected, "/", diag.hotMemory.total, " \u6761 \u00B7 ~", diag.hotMemory.estimatedTokens, " tokens\uFF08\u9884\u7B97 ", diag.config.hotMemoryTokens, "/", diag.config.hotMemoryMaxTokens, "\uFF09"] })
+                                            : null, _jsxs("div", { children: [t('diag.retrieval'), ": ", diag.retrieval.index === null ? '—' : `${diag.retrieval.index.docs} docs · ${diag.retrieval.index.terms} terms · epoch ${diag.retrieval.index.epoch}`] }), _jsxs("div", { children: [t('diag.qcache'), ": ", diag.retrieval.cache.hits, " hits / ", diag.retrieval.cache.misses, " misses (", Math.round(diag.retrieval.cache.hitRate * 100), "%) \u00B7 ", diag.retrieval.cache.size, "/", diag.retrieval.cache.capacity, " \u00B7 ", diag.retrieval.cache.evictions, " evicted"] }), diag.retrieval.lastQuery !== null
+                                            ? _jsxs("div", { children: [t('diag.lastQuery'), ": ", diag.retrieval.lastQuery.latencyMs.toFixed(1), " ms \u00B7 ", diag.retrieval.lastQuery.returned, "/", diag.retrieval.lastQuery.candidates, " returned"] })
+                                            : null, diag.snapshot !== null
+                                            ? _jsxs("div", { children: [t('diag.snapshotInfo'), ": ", diag.snapshot.hash, " \u00B7 rev ", diag.snapshot.storeRevision] })
+                                            : null] }))
+                                : null] })] })] }));
+}

package/lib/types/client/sidebar/panels/memoir/styles.d.ts

@@ -0,0 +1,22 @@
+/** Stable marker for the stylesheet owned by this client plugin. */
+export declare const PANEL_STYLE_SELECTOR = "style[data-dsh-memoir-style]";
+/**
+ * Mount the panel stylesheet without confusing another plugin-owned style tag
+ * carrying the same generic data-plugin value for this stylesheet.
+ * @param target - document that owns the DSH web shell.
+ * @returns disposer that removes only the stylesheet created by this call.
+ */
+export declare function mountPanelStyles(target?: Document): () => void;
+/**
+ * Panel stylesheet (plain string, injected as <style data-plugin="dsh-memoir">).
+ * Class names are literal memoir-* prefixes (no CSS-module hashing) so the
+ * plain-DOM sidebar entry and the React panel share them.
+ *
+ * The visual language rides the dsh-web-ui family tokens (--dsw-alias-* /
+ * --dsw-specific-* / --dsw-font-family). Every token carries a stack fallback
+ * (--bg-panel / --text-primary / ...) so the panel still works in a shell
+ * without the web-ui-all plugin, while matching dsh-ssh / dsh-task-board /
+ * dsh-skill-explorer wherever those tokens exist (light, dark and skins).
+ */
+export declare const PANEL_CSS = "\n/* --- tab bar: dsh-ssh tabBar / tab ------------------------------------------- */\n\n.memoir-tabs {\n  display: flex;\n  gap: 2px;\n  flex: none;\n  padding: 0;\n  border-bottom: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .1));\n}\n.memoir-tab {\n  padding: 7px 14px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  border-radius: 6px 6px 0 0;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.memoir-tab:hover {\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));\n}\n.memoir-tab[data-active='true'] {\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  font-weight: 600;\n  border-bottom-color: var(--dsw-alias-state-business-primary, #2563eb);\n}\n\n/* --- toolbar / controls ------------------------------------------------------- */\n\n.memoir-toolbar {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: none;\n  padding: 0;\n}\n.memoir-search {\n  flex: 0 1 260px;\n  min-width: 120px;\n  padding: 6px 10px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  background: var(--dsw-specific-input-major, var(--bg-card, rgba(0, 0, 0, .02)));\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .15));\n  border-radius: 8px;\n  outline: none;\n}\n.memoir-search::placeholder {\n  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .45));\n}\n.memoir-status-filter {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #6b7280));\n  white-space: nowrap;\n}\n.memoir-status-filter select {\n  max-width: 110px;\n  padding: 6px 8px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  background: var(--dsw-specific-input-major, var(--bg-card, rgba(0, 0, 0, .02)));\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .15));\n  border-radius: 8px;\n  outline: none;\n}\n.memoir-search:focus,\n.memoir-status-filter select:focus {\n  border-color: var(--dsw-alias-state-business-primary, #2563eb);\n}\n\n/* --- buttons: web-ui family button language ---------------------------------- */\n\n.memoir-primary {\n  border: none;\n  border-radius: 8px;\n  padding: 6px 14px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary-foreground, #ffffff);\n  background: var(--dsw-alias-button-info-fill, #2563eb);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.memoir-primary:hover:not(:disabled) {\n  background: var(--dsw-alias-button-info-hover, #1d4ed8);\n}\n.memoir-primary:disabled {\n  opacity: .5;\n  cursor: default;\n}\n.memoir-iconbtn {\n  padding: 5px 12px;\n  font-size: 12px;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  background: transparent;\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .15));\n  border-radius: 8px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.memoir-iconbtn:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));\n}\n.memoir-iconbtn:disabled {\n  opacity: .45;\n  cursor: default;\n}\n\n/* --- body / lists ------------------------------------------------------------- */\n\n.memoir-scroll-region {\n  /* \u9875\u9762\u672C\u8EAB\uFF08page-shell\uFF09\u5C31\u662F\u6EDA\u52A8\u5BB9\u5668\uFF1A\u4E0E\u5B98\u65B9\u63D2\u4EF6\u9875\u4E00\u6837\u53EA\u6709\u4E00\u5C42\u6EDA\u52A8\u3002 */\n  flex: none;\n  min-width: 0;\n}\n.memoir-body {\n  min-height: 0;\n  padding: 4px 0 16px;\n}\n.memoir-section-title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin: 14px 0 6px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n}\n.memoir-count {\n  font-weight: 400;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n}\n\n/* Entry cards: dsh-skill-explorer .skill / dsh-task-board .card surfaces. */\n.memoir-entry {\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .08));\n  border-radius: 10px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n  background: var(--dsw-alias-bg-base, var(--bg-card, rgba(0, 0, 0, .02)));\n}\n.memoir-entry-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n  margin-bottom: 5px;\n}\n.memoir-chip {\n  display: inline-block;\n  padding: 1px 8px;\n  font-size: 11px;\n  line-height: 1.6;\n  border-radius: 999px;\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .1));\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #6b7280));\n  background: transparent;\n  white-space: nowrap;\n}\n.memoir-tag {\n  color: var(--dsw-alias-state-success-primary, #15803d);\n  border-color: var(--dsw-alias-state-success-tertiary, rgba(34, 197, 94, .45));\n}\n.memoir-source {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  min-width: 0;\n}\n.memoir-source-link,\n.memoir-source-copy {\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: var(--dsw-alias-state-business-primary, #2563eb);\n  font: inherit;\n  cursor: pointer;\n  padding: 0;\n}\n.memoir-source-link {\n  max-width: 230px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.memoir-source-link:hover,\n.memoir-source-copy:hover {\n  text-decoration: underline;\n}\n.memoir-source-copy {\n  min-width: 18px;\n}\n.memoir-score {\n  float: right;\n  display: inline-block;\n  padding: 1px 8px;\n  font-size: 10px;\n  line-height: 1.6;\n  border-radius: 999px;\n  border: 1px solid var(--dsw-alias-state-business-primary, #2563eb);\n  color: var(--dsw-alias-state-business-primary, #2563eb);\n  background: transparent;\n  opacity: .8;\n}\n.memoir-entry-title {\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.35;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  margin-bottom: 2px;\n}\n.memoir-entry-content {\n  font-size: 12.5px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.memoir-entry-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin: 4px 0;\n}\n.memoir-delete {\n  float: right;\n  border: none;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n  cursor: pointer;\n  border-radius: 6px;\n  padding: 2px 6px;\n  font-size: 12px;\n}\n.memoir-delete:hover {\n  color: var(--dsw-alias-state-error-primary, #dc2626);\n  background: var(--dsw-alias-state-error-secondary, rgba(220, 38, 38, .12));\n}\n\n/* Project cards (global tab + ranked grouped results). */\n.memoir-project-card {\n  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .1));\n  border-radius: 10px;\n  padding: 10px 12px;\n  margin-bottom: 12px;\n  background: var(--dsw-alias-bg-layer-2, var(--bg-card, rgba(0, 0, 0, .02)));\n}\n.memoir-project-head {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin-bottom: 2px;\n}\n.memoir-project-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n}\n.memoir-project-path {\n  font-size: 10px;\n  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .5));\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.memoir-project-meta {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n  margin-bottom: 6px;\n}\n\n/* Empty / status / error. */\n.memoir-empty {\n  padding: 28px 12px;\n  text-align: center;\n  font-size: 12.5px;\n  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .5));\n}\n.memoir-empty-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  margin-bottom: 6px;\n}\n.memoir-empty-hint {\n  font-size: 12px;\n}\n.memoir-error {\n  padding: 0;\n  font-size: 12px;\n  color: var(--dsw-alias-state-error-primary, #dc2626);\n}\n\n/* --- forms ------------------------------------------------------------------- */\n\n.memoir-form {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px;\n  margin: 0;\n  background: var(--dsw-alias-bg-layer-2, var(--bg-card, rgba(0, 0, 0, .02)));\n  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .1));\n  border-radius: 10px;\n}\n.memoir-form-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.memoir-field {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.memoir-field label {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #5f6672));\n}\n.memoir-field small {\n  font-size: 10px;\n  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .55));\n  line-height: 1.35;\n}\n.memoir-field input,\n.memoir-field select,\n.memoir-field textarea {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 7px 10px;\n  font-size: 13px;\n  font-family: inherit;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  background: var(--dsw-specific-input-major, var(--bg-card, rgba(0, 0, 0, .02)));\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .15));\n  border-radius: 8px;\n  outline: none;\n}\n.memoir-field select {\n  height: 30px;\n  padding: 0 8px;\n}\n.memoir-field textarea {\n  min-height: 72px;\n  resize: vertical;\n}\n.memoir-field input:focus,\n.memoir-field select:focus,\n.memoir-field textarea:focus {\n  border-color: var(--dsw-alias-state-business-primary, #2563eb);\n}\n.memoir-form-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n\n/* --- similar-memory resolution --------------------------------------------- */\n\n.memoir-similarity {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid var(--dsw-alias-state-warn-tertiary, rgba(217, 119, 6, .4));\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-2, var(--bg-card, rgba(0, 0, 0, .02)));\n}\n.memoir-similarity-title {\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  font-size: 13px;\n  font-weight: 600;\n}\n.memoir-similarity-candidate {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .12));\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-3, var(--bg-panel, #ffffff));\n}\n.memoir-similarity-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  font-size: 12.5px;\n}\n.memoir-similarity-head strong {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.memoir-similarity-duplicate {\n  color: var(--dsw-alias-state-warn-primary, #b45309);\n}\n.memoir-similarity-conflict {\n  color: var(--dsw-alias-state-error-primary, #dc2626);\n}\n.memoir-score-static,\n.memoir-similarity-components,\n.memoir-similarity-content {\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #6b7280));\n  font-size: 11px;\n}\n.memoir-similarity-content {\n  line-height: 1.45;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.memoir-similarity-reasons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n.memoir-similarity-footer {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n/* --- settings (panel + Settings page card) ----------------------------------- */\n\n.memoir-settings {\n  margin: 0;\n  border-top: 1px solid var(--dsw-alias-separator-primary, rgba(0, 0, 0, .1));\n  padding-top: 8px;\n  flex: none;\n}\n.memoir-settings-slot {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .12));\n  border-radius: 12px;\n  background: var(--dsw-alias-bg-layer-3, var(--bg-card, rgba(0, 0, 0, .02)));\n  transition: border-color .16s, background .16s;\n}\n.memoir-settings-slot:hover {\n  border-color: var(--dsw-alias-label-dimmed, rgba(0, 0, 0, .28));\n}\n.memoir-settings-slot-open {\n  background: var(--dsw-alias-bg-layer-2, var(--bg-card, rgba(0, 0, 0, .03)));\n  border-color: var(--dsw-alias-label-dimmed, rgba(0, 0, 0, .28));\n}\n.memoir-settings-slot-header {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: 14px 16px;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  border-radius: 12px;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n.memoir-settings-slot-header:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary, var(--dsw-alias-state-business-primary, #2563eb));\n  outline-offset: -2px;\n}\n.memoir-settings-slot-headtext {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n.memoir-settings-slot-name {\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 1.4;\n}\n.memoir-settings-slot-description {\n  color: var(--dsw-alias-label-tertiary, var(--text-secondary, #8a8f9c));\n  font-size: 13px;\n  line-height: 1.5;\n}\n.memoir-settings-slot-chevron {\n  flex: none;\n  color: var(--dsw-alias-label-tertiary, var(--text-secondary, #8a8f9c));\n  transition: transform .16s;\n}\n.memoir-settings-slot-chevron-open {\n  transform: rotate(180deg);\n}\n.memoir-settings-slot-body {\n  margin: 0 16px;\n  padding-bottom: 8px;\n  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .12));\n}\n.memoir-settings-slot .memoir-settings {\n  margin: 0;\n  padding: 0;\n  border-top: none;\n}\n.memoir-settings-slot .memoir-settings-body {\n  margin: 0;\n  padding: 12px 0 4px;\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  max-height: none;\n}\n.memoir-settings-body {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 7px;\n  padding: 10px;\n  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .1));\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-2, var(--bg-card, rgba(0, 0, 0, .02)));\n}\n.memoir-settings-description,\n.memoir-settings-note,\n.memoir-settings-source {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n  line-height: 1.45;\n}\n.memoir-settings-group-title {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  margin-top: 2px;\n}\n.memoir-settings-switch {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  cursor: pointer;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n}\n.memoir-settings-switch input {\n  margin-top: 3px;\n  accent-color: var(--dsw-alias-state-business-primary, #2563eb);\n}\n.memoir-settings-switch span {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.memoir-settings-switch small,\n.memoir-settings-grid small {\n  font-size: 10px;\n  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .55));\n  line-height: 1.35;\n}\n.memoir-settings-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 8px;\n}\n.memoir-settings-grid .memoir-field {\n  min-width: 0;\n}\n.memoir-settings-grid .memoir-field > span {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #6b7280));\n}\n.memoir-settings-feedback {\n  padding: 0;\n}\n.memoir-settings-success {\n  font-size: 12px;\n  color: var(--dsw-alias-state-success-primary, #15803d);\n}\n@media (max-width: 760px) {\n  .memoir-settings-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* --- hot memory inspector / diagnostics -------------------------------------- */\n\n.memoir-inspector,\n.memoir-diagnostics {\n  margin: 0;\n  border-top: 1px solid var(--dsw-alias-separator-primary, rgba(0, 0, 0, .1));\n  padding-top: 8px;\n  flex: none;\n}\n.memoir-diagnostics-toggle {\n  border: none;\n  background: transparent;\n  color: var(--dsw-alias-state-business-primary, #2563eb);\n  cursor: pointer;\n  font-size: 12px;\n  padding: 2px 0;\n  text-align: left;\n}\n.memoir-diagnostics-toggle:hover {\n  text-decoration: underline;\n}\n.memoir-inspector-body {\n  font-size: 11.5px;\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  margin: 6px 0 0;\n  padding: 8px 10px;\n  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .1));\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-2, var(--bg-card, rgba(0, 0, 0, .02)));\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  max-height: none;\n  overflow: visible;\n}\n.memoir-diagnostics-body {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  margin-top: 6px;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n}\n\n/* --- sidebar entry row (plain DOM, matches the web-ui family rows) ------------- */\n\n.memoir-entry-row {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n  padding: 0 10px;\n  background: transparent;\n  border: none;\n  border-radius: 8px;\n  color: var(--dsw-alias-label-secondary, var(--text-secondary, #8a8f9c));\n  cursor: pointer;\n  font-size: 13px;\n  white-space: nowrap;\n  text-align: left;\n}\n.memoir-entry-row:hover {\n  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-specific-sidebar-nav-item-hover, rgba(0, 0, 0, .06)));\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n}\n.memoir-entry-row[data-active='true'] {\n  background: var(--dsw-alias-interactive-bg-active, var(--dsw-specific-sidebar-nav-item-active, rgba(0, 0, 0, .08)));\n  color: var(--dsw-alias-label-primary, var(--text-primary, #1f2328));\n  font-weight: 600;\n}\n.memoir-entry-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n}\n.memoir-entry-icon svg {\n  display: block;\n  width: 18px;\n  height: 18px;\n}\n.memoir-entry-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Collapsed rail: exact dsh-web-ui-all 0.3.x family geometry. */\n[data-dsh-frame][data-sidebar-collapsed] [data-dsh-memoir-entry].memoir-entry-row,\n[data-sidebar-collapsed] [data-dsh-memoir-entry].memoir-entry-row {\n  border-radius: 50%;\n  justify-content: center;\n  padding: 0;\n  width: 36px;\n  height: 36px;\n  margin: 0 auto 12px;\n}\n[data-dsh-frame][data-sidebar-collapsed] [data-dsh-memoir-entry] .memoir-entry-label,\n[data-sidebar-collapsed] [data-dsh-memoir-entry] .memoir-entry-label {\n  display: none;\n}\n\n/* --- focus / motion (web-ui family polish) ------------------------------------ */\n\n.memoir-tab:focus-visible,\n.memoir-search:focus-visible,\n.memoir-primary:focus-visible,\n.memoir-iconbtn:focus-visible,\n.memoir-delete:focus-visible,\n.memoir-status-filter select:focus-visible,\n.memoir-diagnostics-toggle:focus-visible,\n.memoir-field input:focus-visible,\n.memoir-field select:focus-visible,\n.memoir-field textarea:focus-visible,\n.memoir-entry-row:focus-visible {\n  outline: 2px solid var(--dsw-alias-state-business-primary, #2563eb);\n  outline-offset: 2px;\n}\n.memoir-tab,\n.memoir-search,\n.memoir-primary,\n.memoir-iconbtn,\n.memoir-delete,\n.memoir-status-filter select,\n.memoir-diagnostics-toggle,\n.memoir-field input,\n.memoir-field select,\n.memoir-field textarea,\n.memoir-entry-row {\n  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, outline-color 120ms ease;\n}\n@media (prefers-reduced-motion: reduce) {\n  .memoir-tab,\n  .memoir-search,\n  .memoir-primary,\n  .memoir-iconbtn,\n  .memoir-delete,\n  .memoir-status-filter select,\n  .memoir-diagnostics-toggle,\n  .memoir-field input,\n  .memoir-field select,\n  .memoir-field textarea,\n  .memoir-entry-row {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/lib/types/client/sidebar/panels/memoir/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/memoir/styles.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,eAAO,MAAM,oBAAoB,iCAAiC,CAAA;AAElE;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,GAAE,QAAmB,GAAG,MAAM,IAAI,CAQxE;AAED;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,SAAS,qxnBAwuBrB,CAAA"}