fix: give notes and todos dedicated workspace layouts

Replace the crowded note sidebar with a card overview and full note detail. Keep tasks in a stable split view with source content and AI comments, compact header navigation, and search-adjacent status filters. Preserve drafts and return context.

Validation: 93 focused tests, typecheck, lint, and isolated Electron renderer checks passed. Full suite was interrupted; renderer probes used in-memory APIs.

Release note: Notes now open from a card overview, while todos keep a stable task list beside their details. Compact view and filter controls leave more room for reading and editing.

docs/features/magic-notes/README.md

@@ -5,6 +5,15 @@ actions and authorized Agent/MCP tools write to the same desktop SQLite store.
 The open workbench subscribes to successful writes so users can see external
 changes without leaving the page or clicking a refresh button.
 
+The workbench opens on a responsive note-card overview. Opening a note replaces
+the overview with its detail and optional AI comments. The separate To-dos tab
+keeps search, status filters and grouped tasks on one page, with direct completion
+and a stable left list/right detail layout for instructions, source content and AI
+comments. Narrow containers use on-demand detail with an explicit return to the
+mounted list. Content-sized tabs sit in the page header immediately before New
+note; status filters sit beside search and wrap when needed. Returning from a source note restores the task
+context and protects unsaved editor changes.
+
 ## Documents
 
 - [Technical design](./technical-design.md): database notifications, process

docs/features/magic-notes/progress.md

@@ -1,5 +1,70 @@
 # Magic Notes Progress
 
+## 2026-09-18: Stable Todo Split View and Header Navigation
+
+- Supersedes the inline task expansion described in the earlier entry below.
+  Wide containers now keep the grouped task list on the left and instructions,
+  source and AI in one right detail pane. Narrow containers retain the mounted
+  list and offer on-demand detail with an explicit return. Source-note return
+  preserves task context. Header tabs precede New note; filters follow search.
+- Focused workspace, editor and shared-primitives suites passed all 93 tests.
+  `npm run typecheck` and targeted ESLint passed. No full `npm test` was run.
+- Reused the temporary Electron renderer probe at 1280x820, 600x760,
+  600x520 dark and 420x640. The 134x36 header switch precedes New note at all
+  four sizes. Search/filter share a row at 1280 and 600; filters wrap at 420.
+  The wide list's width, top, scroll and adjacent row coordinates remain equal
+  before and after task selection/switching. Narrow returns preserve nonzero
+  list scroll and restore focus. No horizontal overflow or console errors.
+- Also verified source-note round trips at all sizes, actual Quill draft
+  confirmation, note-card return, AI visibility, task completion/status filters,
+  AI fixture results, creation and Chromium keyboard activation.
+- Visible-window capture initially failed with Electron `UnknownVizError`.
+  Final probe uses Electron offscreen rendering at scale 1, pointer input and
+  Chromium DevTools keyboard input. It runs production React/Quill/CSS with
+  in-memory API fixtures, not the full App/Main/SQLite/model path. Model calls: 0.
+  Evidence remains under the temporary `opencode` directory in
+  `magic-notes-render-results.json` and `magic-todos-*-expanded.png`.
+
+## 2026-09-18: Independent Todo Task View
+
+- Replaced todo full-page navigation with a grouped task list and one inline
+  expansion for instructions, source content and AI comments. Completion works
+  directly in each row. Search/status controls stay above the scrolling list;
+  source-note navigation retains expansion, filters and initiating focus.
+- Kept the note-card overview and note editor/AI layout. Notes/To-dos PageTabs
+  now size to their contents at desktop and narrow widths. Source failures offer
+  an inline retry alongside the existing notification.
+- Focused command: `npx vitest run src/renderer/src/MagicNotesWorkspace.test.tsx src/renderer/src/MagicNoteEditor.test.tsx src/renderer/src/WorkspacePrimitives.test.tsx`:
+  93 tests passed. `npm run typecheck` and ESLint on the workspace, its tests and
+  both changed locale modules passed. Full `npm test` was not rerun, as requested.
+- Reused the isolated Electron renderer probe at requested content sizes
+  1280x820, 600x760, 600x520 (dark) and 420x640. All four todo views retained
+  18 tasks, inline expansion, independently scrolling lists and no horizontal
+  overflow or detail/AI sidebar. Tabs measured approximately 133x35 CSS pixels.
+  Note-card navigation, actual Quill draft confirmation, AI visibility, source
+  navigation, direct completion, status filters and inline AI fixture output passed;
+  the renderer reported no console errors.
+- The probe uses production React, Quill and CSS with in-memory API fixtures and
+  isolated Electron sessions; it does not validate Main/SQLite or a live model.
+  Model calls: 0. Scripts, screenshots and JSON results remain in the existing
+  temporary `opencode/magic-notes-render-*` probe location.
+
+## 2026-09-18: Card Overview and Detail Navigation
+
+- Replaced the persistent inner list with a responsive card overview and explicit
+  detail navigation. Search, todo filters, overview scroll and initiating focus
+  survive a round trip. Creation opens the new note; todo source navigation returns
+  to the todo overview. Back navigation protects entry and title drafts.
+- Kept AI visibility and resizing preferences, removed obsolete list resizing,
+  and capped stacked AI height so short windows retain usable editor space.
+- Focused workspace, editor and shared UI suites passed 90 tests. Typecheck and
+  full lint passed. The first full test invocation exceeded its 200-second limit.
+- Isolated Electron rendering exercised the actual workspace, Quill and CSS at
+  1280x820, 600x760, 600x520 (dark), and 420x640. Navigation, creation, todo-source
+  jumps, draft confirmation, AI visibility, scroll and focus restoration passed.
+  These checks used in-memory API fixtures, not Main/SQLite integration; no real
+  model calls were made. Canvas functionality is outside this layout change.
+
 ## 2026-09-17: Note List Action Menu
 
 - Moved pin/unpin and whole-note deletion from the editor header to each note's

docs/features/magic-notes/technical-design.md

@@ -22,6 +22,15 @@ objects and returns a function removing that listener. The existing
 
 ## Refresh Lifecycle
 
+The overview's `libraryView` and the optional note-only `detailView` are independent:
+opening a todo's source note does not lose the originating task view.
+The overview remains mounted but hidden while detail is open, retaining scroll
+position and filters. Returning restores the initiating control's focus and
+invalidates outstanding detail requests. Initial loading fetches summaries and
+todos without selecting the first note or task. Navigation away from unsaved content or
+an unsaved title uses the existing draft confirmation; active writes finish
+before navigation. No new persistence or IPC contract is required.
+
 `MagicNotesWorkspace` subscribes on mount and coalesces notifications with a
 100 ms debounce. Pending notifications wait for an active local save or analysis
 to finish. Cleanup removes the listener, clears its timer and invalidates pending
@@ -45,20 +54,47 @@ Read failures use the existing retryable refresh error and retain successful
 data and drafts. Retry uses the same draft-preserving loader. Interaction rules
 are owned by [the UI design system](../../../UI-DESIGN.md#137-魔法笔记).
 
+## Todo Task View
+
+The To-dos panel has its own search/status toolbar and independently scrolling
+task list, grouped by source note. `selectedTodoId` controls one sibling detail pane;
+the selected item is derived from the filtered list. Completion updates the
+existing item and source cache without selecting or opening another task. Items
+that no longer match the status filter leave the list. A removed focused control
+returns focus to an available list/filter control.
+
+Detail content includes instructions, the source entry, its existing note
+navigation action, and AI controls/comments. AI requests still use the existing
+analysis options and streaming subscription; failed analysis retains saved
+comments. Source reads are guarded against superseded selections, report failures
+through notifications and offer inline retry. The grid reserves both columns even
+without a selection, so selecting or switching tasks cannot move list rows. The
+detail is keyed by task ID to start each newly selected task at its top.
+At a page container width of 700px or less, CSS hides the mounted list while a
+task is selected and shows an explicit return button in the detail area. Returning
+clears selection and restores row focus without scrolling; source-note return
+retains selection and focuses this visible return button on narrow layouts.
+There is no todo detail route, separate AI sidebar or resize handle. Note detail
+retains its existing AI pane preferences.
+
+The shared segmented `PageTabs` lives in `PageHeader.actions` before New note,
+retaining tab/panel IDs, roving focus and arrow-key navigation. Its width follows
+content at all sizes. The shared status `SegmentedControl` follows search in one
+wrapping toolbar. These layout changes do not change Main, preload or storage.
+
 ## Note List Actions
 
-Each note row has a selection button and a sibling action-menu button. The menu
+Each overview card has an open-detail button and a sibling action-menu button. The menu
 uses the conversation action styles and shared `DestructiveConfirmActions`, and
 is portalled to `document.body`. Its position follows the trigger on scrolling,
-window resizing and confirmation-size changes. Hiding the list, filtering out the
+window resizing and confirmation-size changes. Entering detail, filtering out the
 target or leaving the notes panel closes the menu.
 
 Pinning uses the target summary's ID and revision through the existing update
 IPC. It updates the sorted summary and matching selected detail without resetting
 title, composer or entry-edit drafts. Deleting uses the explicitly confirmed
-target ID; deleting another note uses the draft-preserving refresh path. Deleting
-the selected note clears its entry drafts only after the write succeeds, then
-selects a remaining note. These are renderer changes; database and Agent contracts
+target ID and refreshes the overview after success, without opening another note.
+These actions are available only in the overview. Database and Agent contracts
 are unchanged.
 
 ## Agent Search Contract