cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/doc-panel/DocPanel.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import { getDesktop, type FolderBridgeApi } from '../panels/desktop-bridge';
+import { MarkdownRenderer } from '../notes/rendering/MarkdownRenderer';
+import { CodeBlock } from '../notes/rendering/CodeBlock';
+import { fetchNoteFile } from '../notes/notes-api';
+import './doc-panel.css';
+
+const EXT_LANG: Record<string, string> = {
+    ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
+    py: 'python', rs: 'rust', go: 'go', java: 'java', cpp: 'cpp', c: 'cpp',
+    css: 'css', html: 'html', xml: 'xml', json: 'json',
+    yaml: 'yaml', yml: 'yaml', sh: 'bash', bash: 'bash', sql: 'sql',
+};
+
+function getFileLanguage(filePath: string): string | null {
+    const ext = filePath.split('.').pop()?.toLowerCase();
+    return ext ? EXT_LANG[ext] ?? null : null;
+}
+
+function isMarkdown(filePath: string): boolean {
+    return /\.(md|mdx)$/i.test(filePath);
+}
+
+function getFileBridge(): Pick<FolderBridgeApi, 'readFile'> | null {
+    return getDesktop()?.folder ?? null;
+}
+
+function isNotesRelativePath(filePath: string): boolean {
+    return !filePath.startsWith('/') && !/^[a-zA-Z]:[\\/]/.test(filePath);
+}
+
+function DocContent(props: { filePath: string; content: string }) {
+    if (isMarkdown(props.filePath)) {
+        return (
+            <article className="notes-preview doc-markdown">
+                <MarkdownRenderer markdown={props.content} />
+            </article>
+        );
+    }
+    const lang = getFileLanguage(props.filePath);
+    if (lang) {
+        return <CodeBlock code={props.content} language={lang} />;
+    }
+    return <pre className="doc-pre"><code>{props.content}</code></pre>;
+}
+
+export function DocPanel(props: { filePath?: string | undefined }) {
+    const bridge = getFileBridge();
+    const [content, setContent] = useState<string>('');
+    const [error, setError] = useState<string | null>(null);
+    const [binary, setBinary] = useState(false);
+
+    useEffect(() => {
+        if (!props.filePath) {
+            setContent('');
+            setError(null);
+            return;
+        }
+        void (async () => {
+            if (bridge) {
+                const result = await bridge.readFile(props.filePath!);
+                if (result.ok && result.content !== undefined) {
+                    if (result.binary) {
+                        setBinary(true);
+                        setContent('');
+                    } else {
+                        setBinary(false);
+                        setContent(result.content);
+                    }
+                    setError(null);
+                } else {
+                    setError(result.error ?? 'Failed to read file');
+                }
+                return;
+            }
+            if (!isNotesRelativePath(props.filePath!)) {
+                setError('Document preview for arbitrary local files requires Electron desktop app');
+                return;
+            }
+            try {
+                const note = await fetchNoteFile(props.filePath!);
+                setBinary(false);
+                setContent(note.content);
+                setError(null);
+            } catch (err) {
+                setError((err as Error).message);
+            }
+        })();
+    }, [bridge, props.filePath]);
+
+    if (!props.filePath) {
+        return <div className="doc-panel doc-empty">Open Folders and select a file to preview it here.</div>;
+    }
+
+    if (error) {
+        return <div className="doc-panel doc-error">{error}</div>;
+    }
+
+    if (binary) {
+        return <div className="doc-panel doc-binary">Binary file — cannot preview</div>;
+    }
+
+    return (
+        <div className="doc-panel">
+            <div className="doc-toolbar">
+                <span className="doc-file-name">{props.filePath.split('/').pop()}</span>
+            </div>
+            <div className="doc-content">
+                <DocContent filePath={props.filePath} content={content} />
+            </div>
+        </div>
+    );
+}

package/public/manager/src/doc-panel/doc-panel.css

@@ -0,0 +1,57 @@
+.doc-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    font-size: 12px;
+}
+.doc-unavailable, .doc-empty, .doc-error, .doc-binary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-dim);
+    padding: 12px;
+    font-size: 11px;
+}
+.doc-error { color: var(--status-error); }
+.doc-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+}
+.doc-file-name {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-base);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.doc-content {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+.doc-pre {
+    margin: 0;
+    padding: 8px 10px;
+    font-family: 'SF Mono', 'Menlo', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+.doc-markdown {
+    padding: 12px 16px;
+}
+.doc-content .notes-code-block {
+    margin: 0;
+    border-radius: 0;
+}
+.doc-content .notes-code-block pre {
+    max-height: none;
+}

package/public/manager/src/folder-panel/FolderPanel.tsx

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getDesktop, type FolderBridgeApi } from '../panels/desktop-bridge';
+import type { NotesTreeEntry } from '../notes/notes-types';
+import { createElectronFolderSource, createNotesVaultFolderSource, type FolderPanelEntry } from './folder-sources';
+import './folder-panel.css';
+
+function getFolderBridge(): FolderBridgeApi | null {
+    return getDesktop()?.folder ?? null;
+}
+
+type FolderPanelProps = {
+    selectedFilePath?: string | null | undefined;
+    notesTree?: NotesTreeEntry[] | undefined;
+    notesRoot?: string | null | undefined;
+    onPreviewFile?: ((path: string) => void) | undefined;
+};
+
+export function FolderPanel(props: FolderPanelProps) {
+    const bridge = getFolderBridge();
+    const source = useMemo(
+        () => bridge ? createElectronFolderSource(bridge) : createNotesVaultFolderSource(props.notesTree ?? [], props.notesRoot ?? null),
+        [bridge, props.notesRoot, props.notesTree],
+    );
+    const [rootPath, setRootPath] = useState<string | null>(null);
+    const [entries, setEntries] = useState<FolderPanelEntry[]>([]);
+    const [expanded, setExpanded] = useState<Set<string>>(new Set());
+    const [childrenCache, setChildrenCache] = useState<Map<string, FolderPanelEntry[]>>(new Map());
+    const [error, setError] = useState<string | null>(null);
+
+    const loadDir = useCallback(async (dirPath: string) => {
+        try {
+            const nextEntries = await source.listDir(dirPath);
+            setEntries(nextEntries);
+            setError(null);
+        } catch (err) {
+            setError((err as Error).message);
+        }
+    }, [source]);
+
+    const loadChildren = useCallback(async (dirPath: string) => {
+        if (childrenCache.has(dirPath)) return;
+        try {
+            const nextEntries = await source.listDir(dirPath);
+            setChildrenCache(prev => new Map(prev).set(dirPath, nextEntries));
+        } catch (err) {
+            setError((err as Error).message);
+        }
+    }, [childrenCache, source]);
+
+    const toggleExpand = useCallback((entryPath: string) => {
+        setExpanded(prev => {
+            const next = new Set(prev);
+            if (next.has(entryPath)) {
+                next.delete(entryPath);
+            } else {
+                next.add(entryPath);
+                void loadChildren(entryPath);
+            }
+            return next;
+        });
+    }, [loadChildren]);
+
+    const pickFolder = useCallback(async () => {
+        if (!source.pickRoot) return;
+        const picked = await source.pickRoot();
+        if (picked) {
+            if (rootPath && source.unwatchDir) void source.unwatchDir(rootPath);
+            setRootPath(picked);
+            setExpanded(new Set());
+            setChildrenCache(new Map());
+            await loadDir(picked);
+        }
+    }, [loadDir, rootPath, source]);
+
+    useEffect(() => {
+        if (rootPath !== null) return;
+        let cancelled = false;
+        void (async () => {
+            const nextRoot = await source.getDefaultRoot();
+            if (cancelled) return;
+            setRootPath(nextRoot);
+            await loadDir(nextRoot);
+        })();
+        return () => { cancelled = true; };
+    }, [loadDir, rootPath, source]);
+
+    useEffect(() => {
+        if (!source.watchDir || !source.onDirChange || rootPath === null) return;
+        void source.watchDir(rootPath);
+        const unsub = source.onDirChange(() => {
+            void loadDir(rootPath);
+        });
+        return () => {
+            unsub();
+            void source.unwatchDir?.(rootPath);
+        };
+    }, [source, rootPath, loadDir]);
+
+    function renderEntries(items: FolderPanelEntry[], depth: number): React.ReactNode[] {
+        return items.map(entry => (
+            <div key={entry.path}>
+                <div
+                    className={`folder-entry folder-entry-${entry.kind}`}
+                    role="treeitem"
+                    aria-selected={entry.kind === 'file' && entry.path === props.selectedFilePath}
+                    style={{ paddingLeft: `${8 + depth * 16}px` }}
+                >
+                    <button type="button" className="folder-entry-btn"
+                        onClick={() => {
+                            if (entry.kind === 'directory') toggleExpand(entry.path);
+                            else props.onPreviewFile?.(entry.path);
+                        }}>
+                        <span className="folder-entry-icon">
+                            {entry.kind === 'directory' ? (expanded.has(entry.path) ? '▾' : '▸') : '·'}
+                        </span>
+                        <span className="folder-entry-name">{entry.name}</span>
+                    </button>
+                </div>
+                {entry.kind === 'directory' && expanded.has(entry.path) && childrenCache.has(entry.path) &&
+                    renderEntries(childrenCache.get(entry.path)!, depth + 1)}
+            </div>
+        ));
+    }
+
+    return (
+        <div className="folder-panel">
+            <div className="folder-toolbar">
+                <button type="button" className="folder-pick-btn" onClick={() => void pickFolder()} disabled={!source.canPickRoot}>
+                    {source.canPickRoot ? (rootPath ? rootPath.split('/').pop() : 'Pick folder...') : source.label}
+                </button>
+                {rootPath !== null && (
+                    <button type="button" className="folder-refresh" onClick={() => void loadDir(rootPath)}>↻</button>
+                )}
+            </div>
+            {error && <div className="folder-error">{error}</div>}
+            <div className="folder-tree" role="tree">
+                {renderEntries(entries, 0)}
+                {entries.length === 0 && !error && rootPath !== null && (
+                    <div className="folder-empty">{source.kind === 'notes-vault' ? 'No notes in vault' : 'Empty directory'}</div>
+                )}
+            </div>
+        </div>
+    );
+}

package/public/manager/src/folder-panel/folder-panel.css

@@ -0,0 +1,82 @@
+.folder-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    font-size: 12px;
+}
+.folder-unavailable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-dim);
+}
+.folder-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+}
+.folder-pick-btn {
+    all: unset;
+    cursor: pointer;
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    color: var(--text-base);
+    background: var(--bg-hover);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+}
+.folder-pick-btn:hover { background: var(--bg-active); }
+.folder-refresh {
+    all: unset;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 3px;
+    color: var(--text-dim);
+}
+.folder-refresh:hover { background: var(--bg-hover); color: var(--text-base); }
+.folder-error {
+    padding: 8px 10px;
+    font-size: 11px;
+    color: var(--status-error);
+}
+.folder-tree {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 4px 0;
+}
+.folder-entry-btn {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 10px;
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 12px;
+    color: var(--text-base);
+}
+.folder-entry-btn:hover { background: var(--bg-hover); }
+.folder-entry[aria-selected="true"] .folder-entry-btn {
+    color: var(--accent-primary);
+    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+}
+.folder-entry-icon { width: 12px; text-align: center; flex-shrink: 0; color: var(--text-dim); }
+.folder-entry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.folder-entry-directory .folder-entry-name { font-weight: 500; }
+.folder-empty {
+    padding: 12px;
+    color: var(--text-dim);
+    text-align: center;
+    font-size: 11px;
+}

package/public/manager/src/folder-panel/folder-sources.ts

@@ -0,0 +1,93 @@
+import type { FolderBridgeApi } from '../panels/desktop-bridge';
+import { fetchNoteFile } from '../notes/notes-api';
+import type { NotesTreeEntry } from '../notes/notes-types';
+
+export type FolderPanelSourceKind = 'electron-folder' | 'notes-vault';
+
+export type FolderPanelEntry = {
+    name: string;
+    path: string;
+    kind: 'file' | 'directory';
+    size: number;
+};
+
+export type FolderPanelSource = {
+    kind: FolderPanelSourceKind;
+    label: string;
+    canPickRoot: boolean;
+    getDefaultRoot: () => Promise<string>;
+    pickRoot?: () => Promise<string | null>;
+    listDir: (path: string) => Promise<FolderPanelEntry[]>;
+    readFile?: (path: string) => Promise<{ content: string; binary?: boolean }>;
+    watchDir?: (path: string) => Promise<void>;
+    unwatchDir?: (path: string) => Promise<void>;
+    onDirChange?: (cb: (path: string) => void) => () => void;
+};
+
+function notesEntryToFolderEntry(entry: NotesTreeEntry): FolderPanelEntry {
+    return {
+        name: entry.name,
+        path: entry.path,
+        kind: entry.kind === 'folder' ? 'directory' : 'file',
+        size: entry.size,
+    };
+}
+
+function findNotesEntry(entries: NotesTreeEntry[], path: string): NotesTreeEntry | null {
+    for (const entry of entries) {
+        if (entry.path === path) return entry;
+        const child = findNotesEntry(entry.children ?? [], path);
+        if (child) return child;
+    }
+    return null;
+}
+
+export function createElectronFolderSource(bridge: FolderBridgeApi): FolderPanelSource {
+    return {
+        kind: 'electron-folder',
+        label: 'Folder',
+        canPickRoot: true,
+        getDefaultRoot: async () => {
+            const result = await bridge.getDefaultRoot();
+            if (!result.ok || !result.path) throw new Error(result.error ?? 'Failed to open default folder');
+            return result.path;
+        },
+        pickRoot: async () => {
+            const result = await bridge.pickFolder();
+            if (!result.ok) throw new Error(result.error ?? 'Failed to pick folder');
+            return result.path ?? null;
+        },
+        listDir: async (path: string) => {
+            const result = await bridge.listDir(path);
+            if (!result.ok || !result.entries) throw new Error(result.error ?? 'Failed to list directory');
+            return result.entries;
+        },
+        readFile: async (path: string) => {
+            const result = await bridge.readFile(path);
+            if (!result.ok || result.content === undefined) throw new Error(result.error ?? 'Failed to read file');
+            return { content: result.content, ...(result.binary !== undefined ? { binary: result.binary } : {}) };
+        },
+        watchDir: path => bridge.watchDir(path),
+        unwatchDir: path => bridge.unwatchDir(path),
+        onDirChange: cb => bridge.onDirChange(cb),
+    };
+}
+
+export function createNotesVaultFolderSource(entries: NotesTreeEntry[], root: string | null): FolderPanelSource {
+    return {
+        kind: 'notes-vault',
+        label: root ? `Notes: ${root.split('/').pop() || root}` : 'Notes vault',
+        canPickRoot: false,
+        getDefaultRoot: async () => '',
+        listDir: async (path: string) => {
+            if (!path) return entries.map(notesEntryToFolderEntry);
+            const entry = findNotesEntry(entries, path);
+            if (!entry || entry.kind !== 'folder') return [];
+            return (entry.children ?? []).map(notesEntryToFolderEntry);
+        },
+        readFile: async (path: string) => {
+            const file = await fetchNoteFile(path);
+            return { content: file.content, binary: false };
+        },
+    };
+}

package/public/manager/src/help/helpContent.tsx

@@ -17,6 +17,7 @@ const InstancesHelp = (
             <li>좌측 네비게이터에서 인스턴스를 골라 우측 Workbench(Overview / Preview / Logs / Settings)에서 작업하실 수 있어요.</li>
             <li>우측 상단 상태 점이 초록이면 온라인, 회색이면 오프라인이에요.</li>
             <li>인스턴스에 직접 메시지를 보내실 땐 Preview 탭의 채팅 입력을 쓰세요.</li>
+            <li>Preview 채팅에 나온 Notes vault 경로를 클릭하면 Notes workspace로 이동해 해당 파일을 열 수 있어요.</li>
         </ul>
         <div className="help-deep">
             <h4>빠른 판단 기준</h4>
@@ -85,6 +86,8 @@ const NotesHelp = (
         <p className="help-lead"><code>~/.cli-jaw-dashboard/notes/</code>의 마크다운 파일을 직접 편집하는 노트장이에요.</p>
         <ul className="help-bullets">
             <li>좌측 트리에서 파일 선택, 우측에서 <strong>Raw / Preview / WYSIWYG</strong> 모드로 편집하실 수 있어요.</li>
+            <li>Instances Preview 채팅에서 vault 경로(예: <code>~/.cli-jaw-dashboard/notes/foo.md</code> 또는 <code>daily/foo.md</code>)를 <strong>클릭</strong>하면 Notes 탭으로 이동하고 해당 파일이 열려요. 자동 전환은 없고 클릭할 때만 이동합니다.</li>
+            <li>vault 밖 경로(예: 프로젝트 <code>.ts</code> 파일)는 기존처럼 Finder로 열려요.</li>
             <li><kbd>⌘/Ctrl + S</kbd>로 저장, <kbd>⌘/Ctrl + E</kbd>로 모드 순환 전환이에요.</li>
             <li>파일이 외부에서 바뀌면 충돌 알림이 떠요 — Reload / Overwrite / Keep local 중 선택하세요.</li>
         </ul>

package/public/manager/src/hooks/useDashboardView.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DEFAULT_MANAGER_SHORTCUT_KEYMAP, normalizeManagerShortcutKeymap } from '../manager-shortcuts';
-import type { DashboardDetailTab, DashboardLocale, DashboardNotesAuthoringMode, DashboardNotesViewMode, DashboardShortcutKeymap, DashboardSidebarMode } from '../types';
+import type { DashboardDetailTab, DashboardDiffMode, DashboardDiffRootPolicy, DashboardLocale, DashboardNotesAuthoringMode, DashboardNotesGraphSettings, DashboardNotesViewMode, DashboardShortcutKeymap, DashboardSidebarMode } from '../types';
 
 export function useDashboardView() {
     const [selectedPort, setSelectedPort] = useState<number | null>(null);
@@ -14,13 +14,20 @@ export function useDashboardView() {
     const [notesViewMode, setNotesViewMode] = useState<DashboardNotesViewMode>('raw');
     const [notesAuthoringMode, setNotesAuthoringMode] = useState<DashboardNotesAuthoringMode>('plain');
     const [notesWordWrap, setNotesWordWrap] = useState(true);
+    const [notesVimMode, setNotesVimMode] = useState(false);
     const [notesTreeWidth, setNotesTreeWidth] = useState(280);
+    const [notesGraphSettings, setNotesGraphSettings] = useState<DashboardNotesGraphSettings | undefined>(undefined);
     const [showLatestActivityTitles, setShowLatestActivityTitles] = useState(true);
     const [showInlineLabelEditor, setShowInlineLabelEditor] = useState(true);
     const [showSidebarRuntimeLine, setShowSidebarRuntimeLine] = useState(true);
     const [showSelectedRowActions, setShowSelectedRowActions] = useState(true);
     const [dashboardShortcutsEnabled, setDashboardShortcutsEnabled] = useState(true);
     const [dashboardShortcutKeymap, setDashboardShortcutKeymapState] = useState<DashboardShortcutKeymap>({ ...DEFAULT_MANAGER_SHORTCUT_KEYMAP });
+    const [diffRootPolicy, setDiffRootPolicy] = useState<DashboardDiffRootPolicy>('project-first');
+    const [diffPinnedRootByPort, setDiffPinnedRootByPort] = useState<Record<string, string>>({});
+    const [diffDefaultMode, setDiffDefaultMode] = useState<DashboardDiffMode>('unstaged');
+    const [diffBaseRef, setDiffBaseRef] = useState('HEAD');
+    const [diffIncludeUntracked, setDiffIncludeUntracked] = useState(true);
     const [locale, setLocale] = useState<DashboardLocale>('ko');
 
     function setDashboardShortcutKeymap(value: unknown): void {
@@ -50,8 +57,12 @@ export function useDashboardView() {
         setNotesAuthoringMode,
         notesWordWrap,
         setNotesWordWrap,
+        notesVimMode,
+        setNotesVimMode,
         notesTreeWidth,
         setNotesTreeWidth,
+        notesGraphSettings,
+        setNotesGraphSettings,
         showLatestActivityTitles,
         setShowLatestActivityTitles,
         showInlineLabelEditor,
@@ -64,6 +75,16 @@ export function useDashboardView() {
         setDashboardShortcutsEnabled,
         dashboardShortcutKeymap,
         setDashboardShortcutKeymap,
+        diffRootPolicy,
+        setDiffRootPolicy,
+        diffPinnedRootByPort,
+        setDiffPinnedRootByPort,
+        diffDefaultMode,
+        setDiffDefaultMode,
+        diffBaseRef,
+        setDiffBaseRef,
+        diffIncludeUntracked,
+        setDiffIncludeUntracked,
         locale,
         setLocale,
     };

package/public/manager/src/main.tsx

@@ -15,6 +15,7 @@ import './manager-notes.css';
 import './notes/notes-tags.css';
 import './notes/notes-quick-switcher.css';
 import './notes/notes-search.css';
+import './notes/notes-graph.css';
 import './manager-dashboard-board.css';
 import './manager-dashboard-board-stages.css';
 import './manager-dashboard-board-interactions.css';
@@ -31,6 +32,7 @@ import './settings-embedding.css';
 import './jaw-ceo/jaw-ceo.css';
 import './jaw-ceo/jaw-ceo-console.css';
 import './jaw-ceo/jaw-ceo-virtual.css';
+import './panels/panels.css';
 
 const root = document.getElementById('manager-root');
 if (!root) throw new Error('manager-root not found');

package/public/manager/src/manager-components.css

@@ -85,6 +85,18 @@ h2 { font-size: 13px; }
     gap: 8px;
 }
 .command-actions { justify-self: end; }
+.is-electron-titlebar {
+    -webkit-app-region: drag;
+    padding-left: 80px;
+}
+.is-electron-titlebar button,
+.is-electron-titlebar input,
+.is-electron-titlebar select,
+.is-electron-titlebar a,
+.is-electron-titlebar .command-actions,
+.is-electron-titlebar .command-search {
+    -webkit-app-region: no-drag;
+}
 .command-filter-strip {
     min-width: 0;
     display: flex;

package/public/manager/src/manager-dashboard-reminders-priority.css

@@ -152,6 +152,17 @@
     font-size: 11px;
 }
 
+/* ── Dark mode overrides (explicit dark + auto-dark) ── */
+[data-theme="dark"] .dashboard-reminders-top-priority li { background: color-mix(in srgb, #ff3b30 8%, var(--surface-base)); }
+[data-theme="dark"] .dashboard-reminders-top-priority .dashboard-reminders-row { background: rgba(255, 255, 255, 0.06); }
+[data-theme="dark"] .dashboard-reminders-sidebar-priority { background: color-mix(in srgb, var(--surface-base) 92%, transparent); }
+
+@media (prefers-color-scheme: dark) {
+    [data-theme="auto"] .dashboard-reminders-top-priority li { background: color-mix(in srgb, #ff3b30 8%, var(--surface-base)); }
+    [data-theme="auto"] .dashboard-reminders-top-priority .dashboard-reminders-row { background: rgba(255, 255, 255, 0.06); }
+    [data-theme="auto"] .dashboard-reminders-sidebar-priority { background: color-mix(in srgb, var(--surface-base) 92%, transparent); }
+}
+
 @media (max-width: 900px) {
     .dashboard-reminders-top-priority {
         grid-template-columns: 1fr;

package/public/manager/src/manager-dashboard-reminders.css

@@ -451,6 +451,35 @@
     color: var(--ink-muted);
 }
 
+/* ── Dark mode overrides (explicit dark + auto-dark) ── */
+[data-theme="dark"] .dashboard-reminders-quadrant[data-tone="red"]   { background: color-mix(in srgb, #ff3b30 8%, var(--surface-base)); }
+[data-theme="dark"] .dashboard-reminders-quadrant[data-tone="green"] { background: color-mix(in srgb, #34c759 8%, var(--surface-base)); }
+[data-theme="dark"] .dashboard-reminders-quadrant[data-tone="amber"] { background: color-mix(in srgb, #ff9f0a 8%, var(--surface-base)); }
+[data-theme="dark"] .dashboard-reminders-quadrant[data-tone="blue"]  { background: color-mix(in srgb, #007aff 8%, var(--surface-base)); }
+
+[data-theme="dark"] .dashboard-reminders-quadrant > header,
+[data-theme="dark"] .dashboard-reminders-smart-list > header { background: rgba(0, 0, 0, 0.24); }
+
+[data-theme="dark"] .dashboard-reminders-row { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.06); }
+[data-theme="dark"] .dashboard-reminders-row[data-status="focused"] { background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.08)); }
+[data-theme="dark"] .dashboard-reminders-row-check { background: rgba(255, 255, 255, 0.08); }
+[data-theme="dark"] .dashboard-reminders-create-row { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.06); }
+
+@media (prefers-color-scheme: dark) {
+    [data-theme="auto"] .dashboard-reminders-quadrant[data-tone="red"]   { background: color-mix(in srgb, #ff3b30 8%, var(--surface-base)); }
+    [data-theme="auto"] .dashboard-reminders-quadrant[data-tone="green"] { background: color-mix(in srgb, #34c759 8%, var(--surface-base)); }
+    [data-theme="auto"] .dashboard-reminders-quadrant[data-tone="amber"] { background: color-mix(in srgb, #ff9f0a 8%, var(--surface-base)); }
+    [data-theme="auto"] .dashboard-reminders-quadrant[data-tone="blue"]  { background: color-mix(in srgb, #007aff 8%, var(--surface-base)); }
+
+    [data-theme="auto"] .dashboard-reminders-quadrant > header,
+    [data-theme="auto"] .dashboard-reminders-smart-list > header { background: rgba(0, 0, 0, 0.24); }
+
+    [data-theme="auto"] .dashboard-reminders-row { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.06); }
+    [data-theme="auto"] .dashboard-reminders-row[data-status="focused"] { background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.08)); }
+    [data-theme="auto"] .dashboard-reminders-row-check { background: rgba(255, 255, 255, 0.08); }
+    [data-theme="auto"] .dashboard-reminders-create-row { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.06); }
+}
+
 .dashboard-reminders-smart-list {
     margin: 22px;
     display: grid;