From f1c75ada4590144b978a0ab263e151a38f9811f3 Mon Sep 17 00:00:00 2001
From: mrsibe <mrsibe@qq.com>
Date: Mon, 28 Sep 2026 22:21:32 +0800
Subject: [PATCH] feat(ui): give the workspace a surface ladder and make Home a
 starting desk
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The interface read as flat: one plane of near-identical greys, panels that were
cards, and a 14px label where a document title should be. This pass gives it the
hierarchy it was missing and rebuilds Home around what a returning user actually
does.

Surfaces (DESIGN.md "Surfaces", theme.css)
- Three named tiers with one job each: floor (window + gutter), chrome (rails,
  left/right panels, title bars), content (chat, cards, dialogs). The workspace
  gutter is the floor and the rails sit a step above it, so the hierarchy is
  carried by surfaces rather than by shadows.
- The neutral ramp is warm (hue ~91) in both schemes. Dark is deeper and its T1
  is much brighter (0.7621 -> 0.93), so content stops competing with chrome.
- Measured WCAG contrast replaces the previous estimates. Two real defects are
  fixed on the way: light T2 was 4.29:1 (below AA for body text, now 5.28:1) and
  light T3 was 2.88:1 (below 3:1, now 3.57:1).

Library (DocumentList)
- Sources are grouped by kind under T3 headings, shown only when more than one
  group exists.
- Retry, re-index, open and delete move into one hover-revealed menu, so a row
  stops carrying a permanent column of buttons. The row button and the menu
  trigger are siblings: a button inside a button is the defect the tab strip
  already fixed.
- A row leads with what the source is: `PDF · 202 chunks`, from a tested
  `sourceKindOf` (mime type -> path -> URL host) shared with Home.

Chat (ProcessPanel, MessageList, NotebookHeader)
- The composer is an opaque floating layer, one line tall when empty, and no
  longer takes a backdrop blur that had nothing to blur. Its reserve fallback is
  re-derived from the new geometry.
- The notebook title leaves the panel header and becomes a 30px document header
  that scrolls with the answer. The panel header keeps its toggles and an empty
  centre that preserves the drag surface; the tab strip still carries the name.
- The 12px dead band under the panel header is gone (top-14 -> top-11).

Typography
- Long-form content is capped at --reading-measure (72ch) and centred, shared by
  the transcript and the note editor. Uncapped, a wide panel set a line at ~130
  characters. The source reader is deliberately excluded, with the reason
  recorded: its highlight rects are measured once, so a re-centring column would
  strand them.
- Prose headings are 600, not 700: an h3 inside an answer must not out-weigh the
  panel header above it. Alpha-on-text (del, editor placeholder) is replaced with
  a text level.

Home (components/home, NotebookListPage)
- A starting desk, not a dashboard: greeting, search entry, recent notebooks,
  Continue, recently added. Every section may render nothing.
- One grammar per kind of thing - notebooks are cards, everything else is a row -
  so the page does not read as a wall of identical boxes.
- "Continue" is ordered by the user's own activity (a new localStorage record),
  not by updatedAt, which answers "what changed" rather than "where was I".
- No dead affordances: there is no Library page, so the shelf expands in place
  instead of linking to a "View all" that does not exist.
- Home's data arrives in one get-workspace-overview call (source counts, newest
  sources across all notebooks, last active conversation) rather than one IPC per
  notebook on a page that is opened constantly.
- Home's search filters notebook and source names in the renderer, and says so.
  Cross-notebook full-text search needs a notebook-free retrieval path; a box
  labelled "ask your knowledge" that matched only titles would be worse.

Verification
- npm run typecheck, npm test (446 pass, +20 new), npm run check:design,
  npx electron-vite build, npm run build:unpack, npm run smoke:packaged (29
  checks) all pass.
- New tests: test/sourceKind.test.ts (null mime, Windows paths, lookalike hosts),
  test/recentlyOpened.test.ts (corrupt storage, per-entry rejection, NaN/Infinity,
  untrusted order, cap).
- Not verified: pixels. No screenshot tooling is available in this environment,
  so no visual pass was performed; DESIGN.md records the intent instead.
---
 DESIGN.md                                     | 309 ++++++++++++++++--
 package-lock.json                             |  31 ++
 package.json                                  |   1 +
 src/main/db/queries.ts                        |  77 ++++-
 src/main/ipc/notebookHandlers.ts              |  11 +
 src/preload/index.d.ts                        |   5 +-
 src/preload/index.ts                          |   2 +
 src/renderer/src/App.tsx                      |   2 +-
 src/renderer/src/assets/theme.css             |  97 ++++--
 .../components/common/AppErrorBoundary.tsx    |   2 +-
 .../src/components/common/NotebookCard.tsx    |  95 +++---
 .../src/components/common/WindowTitleBar.tsx  |   7 +-
 .../src/components/common/sourceIcon.ts       |  37 +++
 src/renderer/src/components/home/Hero.tsx     |  23 --
 src/renderer/src/components/home/Home.tsx     | 108 +++++-
 .../src/components/home/HomeSearch.tsx        | 213 ++++++++++++
 .../src/components/home/HomeSections.tsx      | 192 +++++++++++
 .../src/components/home/NotebookShelf.tsx     |  83 +++++
 .../src/components/layouts/DragHandle.tsx     |   4 +-
 .../src/components/notebook/NotePanel.tsx     |   2 +-
 .../src/components/notebook/NotebookGrid.tsx  |  33 --
 .../components/notebook/NotebookLayout.tsx    |   2 +-
 .../src/components/notebook/ProcessPanel.tsx  | 112 ++-----
 .../src/components/notebook/SourcePanel.tsx   |   2 +-
 .../components/notebook/chat/MessageList.tsx  |  26 +-
 .../notebook/chat/NotebookHeader.tsx          | 101 ++++++
 .../src/components/notebook/chat/markdown.css |  15 +-
 .../components/notebook/chat/stickToBottom.ts |  12 +-
 .../components/notebook/note/NoteEditor.tsx   |  12 +-
 .../components/notebook/note/noteEditor.css   |   8 +-
 .../notebook/source/DocumentList.tsx          | 244 +++++++++-----
 .../src/components/pages/NotebookListPage.tsx |  66 +++-
 .../src/components/pages/OnboardingPage.tsx   |   2 +-
 .../src/components/ui/dropdown-menu.tsx       |  69 ++++
 src/renderer/src/lib/recentlyOpened.ts        | 108 ++++++
 src/renderer/src/lib/relativeDate.ts          |  22 ++
 src/renderer/src/lib/sourceKind.ts            | 112 +++++++
 src/renderer/src/locales/en-US/ui.json        |  34 +-
 src/renderer/src/locales/zh-CN/ui.json        |  34 +-
 src/shared/types/index.ts                     |   3 +
 src/shared/types/workspace.ts                 |  56 ++++
 test/recentlyOpened.test.ts                   |  90 +++++
 test/sourceKind.test.ts                       | 130 ++++++++
 43 files changed, 2194 insertions(+), 400 deletions(-)
 create mode 100644 src/renderer/src/components/common/sourceIcon.ts
 delete mode 100644 src/renderer/src/components/home/Hero.tsx
 create mode 100644 src/renderer/src/components/home/HomeSearch.tsx
 create mode 100644 src/renderer/src/components/home/HomeSections.tsx
 create mode 100644 src/renderer/src/components/home/NotebookShelf.tsx
 delete mode 100644 src/renderer/src/components/notebook/NotebookGrid.tsx
 create mode 100644 src/renderer/src/components/notebook/chat/NotebookHeader.tsx
 create mode 100644 src/renderer/src/components/ui/dropdown-menu.tsx
 create mode 100644 src/renderer/src/lib/recentlyOpened.ts
 create mode 100644 src/renderer/src/lib/relativeDate.ts
 create mode 100644 src/renderer/src/lib/sourceKind.ts
 create mode 100644 src/shared/types/workspace.ts
 create mode 100644 test/recentlyOpened.test.ts
 create mode 100644 test/sourceKind.test.ts

diff --git a/DESIGN.md b/DESIGN.md
index ac19ef0..f31e64d 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -146,20 +146,88 @@ either: unknown is not a claim, and it must not be rendered as one.
 The line is `text-xs text-subtle-foreground`, the treatment the retrieval lines
 already use — a state of the answer, quieter than the answer itself.
 
+## Home
+
+Implementation: `components/home/` and `components/pages/NotebookListPage.tsx`. Home
+is a **starting desk, not a dashboard**. It has four sections, in the order they are
+used, and each one is allowed to render nothing:
+
+| Section           | Grammar         | Ordered by              | Source                                     |
+| ----------------- | --------------- | ----------------------- | ------------------------------------------ |
+| Greeting + prompt | text, `text-xl` | —                       | local time                                 |
+| Search entry      | input, `h-12`   | —                       | notebooks + recent sources, filtered in JS |
+| Recent notebooks  | cards           | `notebooks.updatedAt`   | the notebook store                         |
+| Continue          | list rows       | the user's own activity | `lib/recentlyOpened.ts` + `recentSessions` |
+| Recently added    | list rows       | `documents.createdAt`   | `recentDocuments`                          |
+
+Rules:
+
+- **No hero banner.** The greeting is one `text-xl` line and a T2 prompt. Home is
+  opened a hundred times; a banner is paid for on every one of them. The visual
+  centre is the entry below it, not the words above it.
+- **One grammar per kind of thing.** Notebooks are cards, everything that is not a
+  notebook is a row, and creating is a button. Repeating one container for every
+  object is what makes a launcher read as a wall of identical boxes, and it hides
+  the difference between a place you work and a file that arrived.
+- **"Continue" means where the user was, not what changed.** The shelf is ordered by
+  `updatedAt`, so a notebook renamed last week outranks the one read an hour ago.
+  Continue merges the notebooks the user actually opened with the conversation last
+  written to, ordered by real recency, and caps at three.
+- **No dead affordances.** There is no "View all" link, because there is no Library
+  page to point at — Home is where notebooks are browsed, so the shelf expands in
+  place with a real disclosure. A section with nothing to show is omitted, not
+  rendered as an empty box with a heading.
+- **One read, not a fan-out.** Home's data arrives in a single
+  `get-workspace-overview` call (`WorkspaceOverview`): source counts, the newest
+  sources across every notebook, and the last active conversation. One IPC per
+  notebook would grow with the library on a page that is opened constantly.
+- **Counts are rendered only when known.** A notebook card takes an optional
+  `sourceCount` and omits the count rather than printing a zero it cannot vouch for.
+
+### What Home's search does, and does not
+
+`HomeSearch` filters **notebook and source names** in the renderer, over data Home
+already has. It is not wired to retrieval, and the placeholder says so: search the
+_text_ of the library and ask a question across all notebooks is a different change,
+because `searchChunksFts` is scoped to one notebook and every notebook owns its own
+vector table. A box labelled "ask your knowledge" that quietly matched only titles
+would be worse than the honest label.
+
+The entry owns the `Cmd/Ctrl+K` binding on Home, so the hint it renders is a
+shortcut that works. Results are a `combobox` / `listbox` pair with
+`aria-activedescendant`; options prevent `mousedown` so clicking one does not blur
+the input before the click lands.
+
+### Card hover
+
+A shelf card takes `hover:-translate-y-px` and `hover:shadow-control`, over 150ms.
+This is the one place a `surface-raised` card may carry a shadow, and only while
+hovered: it is a transient affordance on a control, not a panel floating over the
+document. At rest the card is border + surface step, per [Borders and
+shadow](#borders-and-elevation). Never widen this into a resting shadow or a
+`shadow-elevation`.
+
 ## Surfaces
 
 The app is a stack of opaque surfaces plus two translucent state fills. Higher
 in the stack means further from the window background, and **lighter** in both
-colour schemes.
-
-| Token                | Tailwind              | Light               | Dark                            | Use for                                                                                                    |
-| -------------------- | --------------------- | ------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `--surface-sunken`   | `bg-surface-sunken`   | `oklch(0.9551 0 0)` | `oklch(0.24 0.0127 258.3724)`   | Window chrome that sits _behind_ content: the settings sidebar and dialog shell, a segmented-control track |
-| `--surface-base`     | `bg-surface-base`     | `oklch(0.9851 0 0)` | `oklch(0.2925 0.0157 264.2965)` | App canvas, page background, the gap between panels                                                        |
-| `--surface-raised`   | `bg-surface-raised`   | `oklch(1 0 0)`      | `oklch(0.325 0.011 260)`        | Content panels: document list, reader, chat, editor, cards                                                 |
-| `--surface-overlay`  | `bg-surface-overlay`  | `oklch(1 0 0)`      | `oklch(0.365 0.011 260)`        | Floating layers: dialog, sheet, popover, menu, select, tooltip, toast                                      |
-| `--surface-hover`    | `bg-surface-hover`    | `foreground @ 5%`   | `neutral 0.9 @ 6%`              | Translucent hover fill for rows, menu items, ghost buttons                                                 |
-| `--surface-selected` | `bg-surface-selected` | `foreground @ 9%`   | `neutral 0.9 @ 10%`             | Translucent selected/active fill for rows and toggles                                                      |
+colour schemes. Each of the three opaque steps has one job, and a surface is
+only ever used for that job:
+
+| Tier            | Token                | Tailwind              | Light                         | Dark                      | Use for                                                                                                                                            |
+| --------------- | -------------------- | --------------------- | ----------------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **floor**       | `--surface-sunken`   | `bg-surface-sunken`   | `oklch(0.946 0.0045 91)`      | `oklch(0.1776 0.0015 91)` | The workspace floor: the window background and the gutter between panels. Also the recessed utility fill — a segmented-control track, a code block |
+| **chrome**      | `--surface-base`     | `bg-surface-base`     | `oklch(0.9756 0.0026 106.45)` | `oklch(0.2046 0.0015 91)` | Rails and bars: the library panel, the notes panel, the settings nav, every window title bar, a full-bleed page background                         |
+| **content**     | `--surface-raised`   | `bg-surface-raised`   | `oklch(1 0 0)`                | `oklch(0.235 0.0015 91)`  | What the user is reading or writing: the chat document, the reader, the editor, a notebook card, a dialog body                                     |
+| **floating**    | `--surface-overlay`  | `bg-surface-overlay`  | `oklch(1 0 0)`                | `oklch(0.285 0.0015 91)`  | Layers above the page: dialog, sheet, popover, menu, select, tooltip, toast                                                                        |
+| **state fills** | `--surface-hover`    | `bg-surface-hover`    | `foreground @ 5%`             | `neutral 0.93 @ 6%`       | Translucent hover fill for rows, menu items, ghost buttons                                                                                         |
+|                 | `--surface-selected` | `bg-surface-selected` | `foreground @ 9%`             | `neutral 0.93 @ 10%`      | Translucent selected/active fill for rows and toggles                                                                                              |
+
+The three opaque steps are the **floor → chrome → content** ladder. In the
+workspace it reads as: the `p-2` gutter is floor, the library and notes panels
+are chrome, and the chat document in the centre — the thing the notebook is
+_about_ — is content. That is the whole hierarchy; no shadow or colour carries
+it.
 
 Rules:
 
@@ -180,9 +248,16 @@ Rules:
   `surface-raised` in both colour schemes. Do not nest `surface-raised` inside
   `surface-raised`.
 
-**Not** part of the ladder: the window title bar. It is the OS window frame
-rather than a panel, so every window draws it `bg-surface-base`, the same tone as
-the canvas. Do not give it a surface step.
+**The neutral ramp is warm.** Surfaces and text share hue ~91 (a warm grey)
+rather than the zero-chroma grey this palette used to be, which is what makes a
+white panel read as paper instead of as a default browser surface. Text and
+surfaces remain two separate ramps — they agree on hue, nothing else. Do not
+mix a warm surface with a cool grey label, and do not introduce a second
+neutral hue.
+
+**Not** a separate tier: the window title bar. It is the OS window frame rather
+than a panel, so it is drawn `bg-surface-base` — the chrome tier — in all four
+windows. It takes no step of its own; do not give it one.
 
 Legacy aliases kept for compatibility while pages migrate: `--background`,
 `--card`, `--popover`, `--sidebar` and `--accent` — with their `-foreground`
@@ -270,7 +345,7 @@ Rules:
   cancels). Without the lock, dragging past a panel's limit leaves the browser's
   native selection drag running and selects the text underneath.
 - **The seam is a gutter, and its width is layout.** The panels are separate
-  cards floating on `surface-base`; the canvas between them _is_ the handle.
+  cards floating on the `surface-sunken` floor; the gutter between them _is_ the handle.
   That is why `HANDLE_WIDTH` is subtracted from the width the panels may occupy,
   and why the handle paints nothing at rest. Painting it (`bg-border`) or
   shrinking it toward `w-px` closes the gutter and makes the cards read as
@@ -550,25 +625,47 @@ use opacity on top of a level (`text-muted-foreground/70`).
 
 Sizes:
 
-| Size | Class         | Use for                                                                               |
-| ---- | ------------- | ------------------------------------------------------------------------------------- |
-| 11px | `text-[11px]` | Keycaps, tiny counters (rare; prefer `text-xs`)                                       |
-| 12px | `text-xs`     | Meta line, timestamps, badges, table headers, code                                    |
-| 14px | `text-sm`     | **Default UI size**: buttons, labels, list rows, inputs, prose in chat and the editor |
-| 16px | `text-base`   | Dialog titles, empty-state body (only where 14px reads cramped)                       |
-| 18px | `text-lg`     | Page titles, empty-state titles                                                       |
-| 20px | `text-xl`     | Focus content: home page title, flashcard face                                        |
-| 36px | `text-4xl`    | A single focus readout (quiz score). One per screen                                   |
+| Size | Class         | Use for                                                                                    |
+| ---- | ------------- | ------------------------------------------------------------------------------------------ |
+| 11px | `text-[11px]` | Keycaps, tiny counters (rare; prefer `text-xs`)                                            |
+| 12px | `text-xs`     | Meta line, timestamps, badges, table headers, code                                         |
+| 14px | `text-sm`     | **Default UI size**: buttons, labels, list rows, inputs, prose in chat and the editor      |
+| 16px | `text-base`   | Dialog titles, empty-state body (only where 14px reads cramped)                            |
+| 18px | `text-lg`     | Page titles, empty-state titles                                                            |
+| 20px | `text-xl`     | Focus content: home page title, flashcard face                                             |
+| 30px | `text-3xl`    | The notebook title in the workspace header, `font-semibold tracking-tight`. One per screen |
+| 36px | `text-4xl`    | A single focus readout (quiz score). One per screen                                        |
 
 Weights: `font-normal` for body, `font-medium` for interactive labels, panel
 headers, section titles, titles and the selected state of anything.
-`font-semibold` and above are reserved for the one focus readout per screen.
-Never use weight alone to express selection — pair it with
-`bg-surface-selected`.
+`font-semibold` and above are reserved for two things: headings inside long-form
+prose (`.markdown-content h1–h4`, `.ProseMirror h1–h3`, all 600), and the one
+focus readout per screen. A prose heading is never `font-bold`: an `h3` inside an
+answer must not out-weigh the panel header above it. Never use weight alone to
+express selection — pair it with `bg-surface-selected`.
 
 Line height: UI text uses Tailwind defaults. Long-form reading surfaces
 (`markdown.css`, `noteEditor.css`) use 14px / `line-height: 1.75`.
 
+**Measure.** A long-form reading surface is capped at `--reading-measure` (72ch)
+and centred:
+
+```tsx
+<div className="mx-auto w-full max-w-[var(--reading-measure)] px-4 py-6">
+```
+
+The chat transcript (`MessageList.tsx`) and the note editor (`NoteEditor.tsx`,
+`p-4`) both read the token, so a paragraph is the same width on either surface.
+Widening a panel adds margin around the column; it must never lengthen the line —
+uncapped, a 1000px centre panel sets an answer at roughly 130 characters per
+line. The token is defined once in `theme.css`; take it as a variant rather than
+hard-coding a `ch` value or a pixel width.
+
+The source reader does **not** read it yet, and the reason is a contract rather
+than an oversight: `TextSourceReader` measures its highlight rectangles once from
+the laid-out range, so a column that re-centres on resize would strand the
+highlight. Make that measurement resize-aware before capping that surface.
+
 ## Accent and states
 
 `--primary` is the only accent. It is allowed in exactly five places:
@@ -669,7 +766,22 @@ Copy these shapes. `cn()` (`@/lib/utils`) is used for merging class overrides.
 
 ### Panel
 
+`Panel` is the frame for a workspace zone. Which tier it takes depends on what
+the zone holds — a rail is chrome, the thing being read is content:
+
+- **Rail** (library, notes, settings nav): `bg-surface-base`.
+- **Content** (chat transcript, reader, editor): `bg-surface-raised`.
+
+A rail and a content panel share the same hairline; what separates them is the
+tier under it. The hairline is one step lighter than it used to be, because the
+surface ladder now carries part of the separation the outline used to carry
+alone — do not compensate by reaching for a darker border, and do not add a
+second outline to a rail that already sits in the gutter.
+
 ```tsx
+// rail
+<Card className="flex h-full flex-col overflow-hidden bg-surface-base">
+// content
 <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-surface-raised">
   <PanelHeader … />
   <div className="min-h-0 flex-1 overflow-y-auto themed-scrollbar">…</div>
@@ -684,6 +796,48 @@ Implementation: `components/ui/panel-header.tsx`.
 <div className="flex h-11 shrink-0 items-center justify-between border-b border-border px-3" />
 ```
 
+A panel header is chrome. It carries the panel's own controls and nothing that
+belongs to the document — in the chat panel that is the two collapse toggles, and
+its centre is an empty `<span />` that exists only to keep the centre a drag
+surface. Do not put the notebook title back in it: the title is the document
+header's job (see [Notebook header](#notebook-header)), and the window's tab strip
+already carries the name at all times.
+
+The content below a panel header starts at `top-11`, the header's own height.
+Nothing sits in between; a `top-14` left a 12px dead band under every header.
+
+### Notebook header
+
+Implementation: `components/notebook/chat/NotebookHeader.tsx`, rendered as the
+first block inside the transcript's scroll area (it is passed to `MessageList` as
+`header`, not positioned above it).
+
+```tsx
+<header className="pt-6 pb-2">
+  <button className="block w-full cursor-text rounded-md text-left text-3xl font-semibold tracking-tight break-words">
+    {notebook.title}
+  </button>
+  <p className="mt-2 text-xs text-subtle-foreground">
+    {sources} · {updated}
+  </p>
+</header>
+```
+
+- **The title scrolls with the answer**, like a page title, instead of sitting
+  pinned above the scroll area. Pinning it would change the boxes the composer
+  reserve, the scroll fade and the follow-the-answer observer are measured
+  against; scrolling it costs nothing and reads as a document.
+- **The title is a `<button>`, not a span with a click handler**, and its
+  affordance is `cursor-text` — no resting border, no hover fill. At `text-3xl` a
+  hover block would read as a control sitting on a document.
+- **Metadata is one T3 line**: `documents` count and the relative updated date
+  (`lib/relativeDate.ts`, shared with `NotebookCard`). Counters and timestamps are
+  exactly what T3 is for.
+- **There is no subtitle.** `notebooks.description` exists but nothing in the app
+  can author it, so every notebook carries the same creation-time filler. Printing
+  a sentence the user never wrote is worse than an empty line; add it when the
+  field is editable.
+
 ### Window title bar
 
 Implementation: `components/common/WindowTitleBar.tsx`. Every window uses it;
@@ -716,6 +870,78 @@ Separators, not gaps:
 </div>
 ```
 
+### Rail list
+
+A list inside a chrome panel (the library, the notes list) is not a table. Rows
+are separated by a 4px gap and identified by a `hover` fill on a `rounded-md`
+block, never by a hairline; groups are separated by 12px and labelled with a T3
+section heading.
+
+```tsx
+<div className="p-2 space-y-3">
+  <section className="space-y-1">
+    <h2 className="select-none px-2 py-0.5 text-xs font-medium text-subtle-foreground">
+      {label}
+    </h2>
+    {/* one row */}
+    <div className="group flex items-start gap-0.5 rounded-md transition-colors hover:bg-surface-hover focus-within:bg-surface-hover">
+      <button className="flex min-w-0 flex-1 items-start gap-2 rounded-md px-2 py-1.5 text-left">
+        <span className="mt-0.5 shrink-0">{icon}</span>
+        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="truncate text-sm text-foreground">{title}</span>
+          <span className="truncate text-xs text-subtle-foreground">{meta}</span>
+        </span>
+      </button>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={…}
+          className="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+        />
+      </DropdownMenuTrigger>
+    </div>
+  </section>
+</div>
+```
+
+Rules:
+
+- **A heading is rendered only when there is more than one group.** A heading over
+  the only group restates the panel header.
+- **Secondary actions live in one `···` menu, revealed on hover or focus.** A row
+  in a rail never carries a permanent column of buttons — that is what made every
+  source row read as a toolbar. Retry, re-index, open and delete are items in the
+  same menu, applied in that order with the destructive item last, below a
+  separator.
+- **The hover-revealed control is always laid out**, with `opacity-0` rather than
+  `hidden`/conditional rendering, so revealing it cannot reflow the title.
+- **The row button and its menu trigger are siblings**, never nested. A button
+  inside a button is unreachable by keyboard and is the same defect the tab strip
+  already fixed.
+- **The row button keeps a real hover fill** (`hover:bg-surface-hover` on the
+  wrapper). The revealed control uses `hover:bg-surface-selected` so it stays
+  visible on top of it.
+- **A source row leads with what the source is.** The metadata line is
+  `<kind> · <n> chunks`, where the kind comes from `lib/sourceKind.ts`
+  (`sourceKindOf`), not from `document.type` — `file` covers PDF, Word and Slides,
+  and "202 chunks" on its own is machine vocabulary, not a fact about the source.
+  The leading glyph is `KIND_ICON[kind]` in the same module's vocabulary, drawn
+  from one library at one stroke weight and left neutral: the kind is carried by
+  the glyph **and** the word, never by a tint (a colour icon in neutral chrome is
+  a violation).
+- **The kind is derived, never stored twice.** `sourceKindOf` is the single
+  reader of `mimeType` / path / URL, it is total (an unknown file is `file`, not a
+  guessed `text`), and it is asserted in `test/sourceKind.test.ts`. It is
+  deliberately _not_ shared with `SourceReader`'s `isPdf`: that predicate answers
+  "which reader renders this?", which is a rendering contract, and folding the two
+  together would let a display change pick a different reader.
+- **There is no persistent selected row in the library.** Clicking a source
+  replaces the list with the reader (see [Library and Reading are one zone, two
+  states](#library-and-reading-are-one-zone-two-states)), so there is no state in
+  which a selected row is on screen; do not add one back. The notes rail does have
+  a real selection and uses the [Selected row](#selected-row) recipe.
+
 ### Selected row
 
 ```tsx
@@ -730,6 +956,33 @@ Dialog, popover, menu, toast:
 <div className="rounded-lg border border-border bg-surface-overlay shadow-elevation" />
 ```
 
+### Composer
+
+Implementation: `components/notebook/ProcessPanel.tsx`. The chat composer is the
+one floating layer that lives permanently on the page rather than over it.
+
+```tsx
+<div className="relative bg-surface-overlay rounded-lg border border-border focus-within:ring-2 focus-within:ring-ring shadow-elevation">
+  <ScopeSelector … />
+  <Textarea className="min-h-[56px] max-h-[280px] py-3 pl-4 pr-14 resize-none border-0 bg-transparent focus-visible:ring-0" />
+  <Button size="icon" className="absolute right-2 bottom-3 rounded-full" />
+</div>
+```
+
+- **Opaque, and no blur.** It is a floating surface with a hairline and
+  `shadow-elevation`. It does not take `backdrop-blur` — the functional scroll
+  fade below the transcript already covers the content that passes under it, so a
+  blur here costs GPU and returns nothing.
+- **One line when empty.** `min-h-[56px]` keeps it reading as an input; it grows
+  with the content to `max-h-[280px]`.
+- **Its height is measured, never assumed.** `ProcessPanel` writes the measured
+  height to `--composer-reserve`, and `MessageList`'s bottom padding and the fade
+  both read that variable. `COMPOSER_RESERVE_FALLBACK` in `stickToBottom.ts` is
+  only the pre-measurement value; if the composer's geometry changes, that
+  constant is the one to re-derive (it is the scope row + the one-line textarea +
+  the wrapper padding).
+- **The send control is a pill inside the composer**, not a sibling below it.
+
 ### Raised card
 
 Implementation: `components/common/NotebookCard.tsx`.
@@ -784,8 +1037,8 @@ Never signal an error with a red border alone.
 
 ## Adding a page: order of decisions
 
-1. Pick the surfaces: which panel is `surface-raised`, what is `surface-base`
-   between panels, what is `surface-sunken`.
+1. Pick the tiers: which zone is the `surface-sunken` floor, which panels are
+   `surface-base` chrome (rails), and which one is the `surface-raised` content.
 2. Pick the panel header height (`h-11`) and the row density (`h-8` / `h-9`).
 3. Build with the [recipes](#component-recipes); pick radius from the radius
    table, never a literal.
diff --git a/package-lock.json b/package-lock.json
index e911b70..a60c4e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-context-menu": "^2.2.16",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.24",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-progress": "^1.1.8",
         "@radix-ui/react-scroll-area": "^1.2.10",
@@ -4057,6 +4058,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.24.tgz",
+      "integrity": "sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.6.tgz",
diff --git a/package.json b/package.json
index 5e0eea9..4a2b215 100644
--- a/package.json
+++ b/package.json
@@ -136,6 +136,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
diff --git a/src/main/db/queries.ts b/src/main/db/queries.ts
index 3e1f947..78e3eb4 100644
--- a/src/main/db/queries.ts
+++ b/src/main/db/queries.ts
@@ -1,4 +1,4 @@
-import { eq, desc, and } from 'drizzle-orm'
+import { eq, desc, and, sql } from 'drizzle-orm'
 import { getDatabase, executeCheckpoint, dropNotebookVectorTable } from './index'
 import { chatSessions, chatMessages, notebooks, notes, documents, items } from './schema'
 import type {
@@ -8,6 +8,7 @@ import type {
   ChatTokenUsage
 } from '../../shared/types/chat'
 import type { RetrievalScope } from '../../shared/types/scope'
+import type { WorkspaceOverview } from '../../shared/types/workspace'
 
 // ==================== Chat Sessions ====================
 
@@ -497,3 +498,77 @@ export function deleteNote(id: string) {
   db.delete(notes).where(eq(notes.id, id)).run()
   console.log(`[Database] Deleted note: ${id}`)
 }
+
+// ==================== Workspace Overview ====================
+
+/**
+ * Everything the Home page reads, in one round trip (#65).
+ *
+ * Three statements rather than a request per notebook: Home is opened constantly
+ * and an N+1 over the notebook list grows with the library. The source counts are
+ * one `GROUP BY` merged in JS rather than a correlated subquery per notebook, so
+ * the number of statements does not depend on how many notebooks exist.
+ *
+ * `recentDocuments` orders by `created_at`, which no index covers — the only
+ * document index is `(notebook_id, updated_at)`. A local SQLite sorting a few
+ * thousand rows to take 20 is not worth a migration; if the library ever gets big
+ * enough for that to show, the index is the fix, not a rewrite of this query.
+ */
+export function getWorkspaceOverview(
+  options: { notebookLimit?: number; documentLimit?: number; sessionLimit?: number } = {}
+): WorkspaceOverview {
+  const db = getDatabase()
+
+  const rows = db
+    .select()
+    .from(notebooks)
+    .orderBy(desc(notebooks.updatedAt))
+    .limit(options.notebookLimit ?? 200)
+    .all()
+
+  const counts = db
+    .select({ notebookId: documents.notebookId, count: sql<number>`count(*)` })
+    .from(documents)
+    .groupBy(documents.notebookId)
+    .all()
+  const countByNotebook = new Map(counts.map((row) => [row.notebookId, row.count]))
+
+  const recentDocuments = db
+    .select({
+      id: documents.id,
+      notebookId: documents.notebookId,
+      notebookTitle: notebooks.title,
+      title: documents.title,
+      type: documents.type,
+      mimeType: documents.mimeType,
+      sourceUri: documents.sourceUri,
+      localFilePath: documents.localFilePath,
+      createdAt: documents.createdAt
+    })
+    .from(documents)
+    .innerJoin(notebooks, eq(documents.notebookId, notebooks.id))
+    .orderBy(desc(documents.createdAt))
+    .limit(options.documentLimit ?? 20)
+    .all()
+
+  const recentSessions = db
+    .select({
+      id: chatSessions.id,
+      notebookId: chatSessions.notebookId,
+      notebookTitle: notebooks.title,
+      title: chatSessions.title,
+      updatedAt: chatSessions.updatedAt
+    })
+    .from(chatSessions)
+    .innerJoin(notebooks, eq(chatSessions.notebookId, notebooks.id))
+    .where(eq(chatSessions.status, 'active'))
+    .orderBy(desc(chatSessions.updatedAt))
+    .limit(options.sessionLimit ?? 5)
+    .all()
+
+  return {
+    notebooks: rows.map((row) => ({ ...row, sourceCount: countByNotebook.get(row.id) ?? 0 })),
+    recentDocuments,
+    recentSessions
+  }
+}
diff --git a/src/main/ipc/notebookHandlers.ts b/src/main/ipc/notebookHandlers.ts
index cbd57c3..00b0938 100644
--- a/src/main/ipc/notebookHandlers.ts
+++ b/src/main/ipc/notebookHandlers.ts
@@ -3,6 +3,7 @@ import {
   createNotebook,
   getAllNotebooks,
   getNotebookById,
+  getWorkspaceOverview,
   updateNotebook,
   deleteNotebook
 } from '../db/queries'
@@ -41,6 +42,16 @@ export function registerNotebookHandlers() {
     }
   })
 
+  // 首页概览：笔记本 + 来源数、最近来源、最近会话，一次读完（#65）
+  ipcMain.handle('get-workspace-overview', async () => {
+    try {
+      return getWorkspaceOverview()
+    } catch (error) {
+      console.error('[IPC] Error getting workspace overview:', error)
+      throw error
+    }
+  })
+
   // 获取单个笔记本（带参数验证）
   ipcMain.handle(
     'get-notebook',
diff --git a/src/preload/index.d.ts b/src/preload/index.d.ts
index cef081e..9560239 100644
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -12,7 +12,8 @@ import type {
   LocalEmbeddingModelInfo,
   EmbeddingDownloadProgress,
   EmbeddingSourceInfo,
-  SourceBlock
+  SourceBlock,
+  WorkspaceOverview
 } from '../shared/types'
 import type {
   KnowledgeDocument,
@@ -95,6 +96,8 @@ declare global {
       // Notebook 相关
       createNotebook: (title: string, description?: string) => Promise<Notebook>
       getAllNotebooks: () => Promise<Notebook[]>
+      /** 首页一次读完：笔记本 + 来源数、最近来源、最近会话（#65）。 */
+      getWorkspaceOverview: () => Promise<WorkspaceOverview>
       getNotebook: (id: string) => Promise<Notebook | null>
       updateNotebook: (
         id: string,
diff --git a/src/preload/index.ts b/src/preload/index.ts
index f24b510..1d51f9b 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -64,6 +64,8 @@ const api = {
   createNotebook: (title: string, description?: string) =>
     ipcRenderer.invoke('create-notebook', { title, description }),
   getAllNotebooks: () => ipcRenderer.invoke('get-all-notebooks'),
+  /** 首页一次读完：笔记本 + 来源数、最近来源、最近会话（#65）。 */
+  getWorkspaceOverview: () => ipcRenderer.invoke('get-workspace-overview'),
   getNotebook: (id: string) => ipcRenderer.invoke('get-notebook', { id }),
   updateNotebook: (id: string, updates: any) =>
     ipcRenderer.invoke('update-notebook', { id, updates }),
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 80b700f..5b76c1f 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -78,7 +78,7 @@ function App(): React.JSX.Element {
   // 如果正在加载引导状态，显示加载中
   if (onboardingLoading) {
     return (
-      <div className="flex min-h-screen items-center justify-center gap-2 bg-surface-base text-sm text-muted-foreground">
+      <div className="flex min-h-screen items-center justify-center gap-2 bg-surface-sunken text-sm text-muted-foreground">
         <Loader2 className="w-4 h-4 animate-spin" />
         <span>{t('loading')}</span>
       </div>
diff --git a/src/renderer/src/assets/theme.css b/src/renderer/src/assets/theme.css
index bba1b70..99816ae 100644
--- a/src/renderer/src/assets/theme.css
+++ b/src/renderer/src/assets/theme.css
@@ -11,14 +11,23 @@
  * (bg-surface-*, text-muted-foreground, shadow-elevation, ...), never a
  * primitive with a literal colour.
  *
- * Light-mode text contrast against --surface-raised:
- *   T1 foreground            7.2:1
- *   T2 muted-foreground      3.3:1
- *   T3 subtle-foreground     2.2:1  (meta only, never essential information)
- * Dark-mode text contrast against --surface-base:
- *   T1 foreground            4.8:1
- *   T2 muted-foreground      3.7:1
- *   T3 subtle-foreground     2.7:1  (meta only, never essential information)
+ * The neutral ramp is warm (hue ~91, the hue the surface ladder and the text
+ * ladder share) rather than the zero-chroma grey it used to be. Text and
+ * surfaces stay two separate ramps; they only agree on hue so a warm surface
+ * never sits under a cool grey label.
+ *
+ * Measured text contrast (WCAG 2.1, computed from the oklch values below):
+ *
+ *                                   raised     base     sunken
+ *   light  T1 foreground            13.5:1   12.6:1   11.6:1
+ *          T2 muted-foreground       5.3:1    4.9:1    4.5:1
+ *          T3 subtle-foreground      3.6:1    3.3:1    3.1:1
+ *   dark   T1 foreground            13.6:1   14.6:1   15.4:1
+ *          T2 muted-foreground       7.0:1    7.5:1    7.9:1
+ *          T3 subtle-foreground      4.3:1    4.7:1    4.9:1
+ *
+ * T3 is meta only and never carries essential information, but it still clears
+ * 3:1 everywhere; the previous ramp did not (2.9:1 on light raised).
  */
 :root {
   /*
@@ -29,25 +38,30 @@
    */
   color-scheme: light;
 
-  /* Surface ladder: sunken < base < raised < overlay, monotonic in both modes. */
-  --surface-sunken: oklch(0.9551 0 0);
-  --surface-base: oklch(0.9851 0 0);
+  /*
+   * Surface ladder: sunken < base < raised < overlay, monotonic in both modes.
+   *   sunken  the workspace floor — the window background and the gutter between panels
+   *   base    the chrome tier — rails (library, notes, settings nav) and title bars
+   *   raised  the content tier — documents, the chat, cards, dialogs
+   */
+  --surface-sunken: oklch(0.946 0.0045 91); /* #eeedea */
+  --surface-base: oklch(0.9756 0.0026 106.45); /* #f7f7f5 */
   --surface-raised: oklch(1 0 0);
   --surface-overlay: oklch(1 0 0);
   /* Translucent state fills: they adapt to whatever surface they are drawn on. */
-  --surface-hover: oklch(0.3496 0.0141 274.5028 / 0.05);
-  --surface-selected: oklch(0.3496 0.0141 274.5028 / 0.09);
+  --surface-hover: oklch(0.302 0.01 91 / 0.05);
+  --surface-selected: oklch(0.302 0.01 91 / 0.09);
   /* Scrim behind a modal layer. The one place a raw black is legitimate, so it
      is a token instead of a literal. */
   --scrim: oklch(0 0 0 / 0.5);
 
   /* Opaque quiet fill for nested containers (bubbles, icon tiles, code). */
-  --muted: oklch(0.9551 0 0);
+  --muted: oklch(0.962 0.0032 91);
 
   /* Text hierarchy: T1 primary, T2 secondary, T3 tertiary. */
-  --foreground: oklch(0.3496 0.0141 274.5028);
-  --muted-foreground: oklch(0.58 0.0141 274.5028);
-  --subtle-foreground: oklch(0.68 0.0107 267.3269);
+  --foreground: oklch(0.302 0.01 91); /* #302e29 */
+  --muted-foreground: oklch(0.53 0.01 91); /* #6e6c65 */
+  --subtle-foreground: oklch(0.625 0.009 91); /* #8a8782 */
 
   /* Accent: primary action, focus ring, selection indicator. */
   --primary: oklch(0.6017 0.193 263.2461);
@@ -58,8 +72,8 @@
   --success: oklch(0.55 0.12 150);
 
   /* Hairline. --input is the neutral fill of unchecked controls, not a border. */
-  --border: oklch(0.9067 0 0);
-  --input: oklch(0.9551 0 0);
+  --border: oklch(0.9163 0.0058 84.57); /* #e5e3df */
+  --input: oklch(0.962 0.0032 91);
 
   --chart-1: oklch(0.7304 0.1213 245.2972);
   --chart-2: oklch(0.7683 0.1103 133);
@@ -71,6 +85,20 @@
   --shadow-elevation: 0 6px 16px -4px hsl(0 0% 0% / 0.12), 0 2px 4px -1px hsl(0 0% 0% / 0.06);
   --shadow-control: 0 1px 2px 0 hsl(0 0% 0% / 0.16);
 
+  /*
+   * The measure long-form content is set to, in `ch` so it follows the font.
+   * Every reading surface shares it — the chat transcript and the note editor
+   * today — so a paragraph is the same width wherever it is read, and widening
+   * a panel adds margin instead of lengthening the line. 72ch at 14px Inter is
+   * roughly 600px, inside the 65–75ch band a body copy line wants.
+   *
+   * The source reader is the one surface that does not read this yet: its
+   * highlight rectangles are measured once from the laid-out range
+   * (`TextSourceReader.tsx`), so a column that re-centres on resize would leave
+   * the highlight behind. Fix that measurement before capping that surface.
+   */
+  --reading-measure: 72ch;
+
   --font-sans: 'Inter', sans-serif;
   --font-serif: 'Lora', serif;
   --font-mono: 'Fira Code', monospace;
@@ -130,22 +158,22 @@
 .dark {
   color-scheme: dark;
 
-  --surface-sunken: oklch(0.24 0.0127 258.3724);
-  --surface-base: oklch(0.2925 0.0157 264.2965);
-  --surface-raised: oklch(0.325 0.011 260);
-  --surface-overlay: oklch(0.365 0.011 260);
-  --surface-hover: oklch(0.9 0.01 262 / 0.06);
-  --surface-selected: oklch(0.9 0.01 262 / 0.1);
+  --surface-sunken: oklch(0.1776 0.0015 91); /* #111110 */
+  --surface-base: oklch(0.2046 0.0015 91); /* #171716 */
+  --surface-raised: oklch(0.235 0.0015 91); /* #1e1e1d */
+  --surface-overlay: oklch(0.285 0.0015 91);
+  --surface-hover: oklch(0.93 0.003 91 / 0.06);
+  --surface-selected: oklch(0.93 0.003 91 / 0.1);
   --scrim: oklch(0 0 0 / 0.65);
 
   /* --muted is a *recessed* fill: below surface-raised in both modes
-     (light 0.9551 vs 1.0, dark 0.275 vs 0.325) so a bubble, icon tile or
+     (light 0.962 vs 1.0, dark 0.187 vs 0.235) so a bubble, icon tile or
      inline code block reads as inset instead of flipping direction. */
-  --muted: oklch(0.275 0.014 260);
+  --muted: oklch(0.187 0.0015 91);
 
-  --foreground: oklch(0.7621 0.0202 262.9873);
-  --muted-foreground: oklch(0.68 0.02 262.9873);
-  --subtle-foreground: oklch(0.58 0.02 262.9873);
+  --foreground: oklch(0.93 0.003 91); /* #e8e8e6 */
+  --muted-foreground: oklch(0.73 0.004 91); /* #a8a8a5 */
+  --subtle-foreground: oklch(0.606 0.004 91); /* #83827f */
 
   --success: oklch(0.75 0.13 150);
 
@@ -153,8 +181,8 @@
   --ring: oklch(0.7304 0.1213 245.2972);
   --destructive: oklch(0.6709 0.1448 16.9989);
 
-  --border: oklch(0.3863 0.0235 265.6941);
-  --input: oklch(0.3863 0.0235 265.6941);
+  --border: oklch(0.3052 0 89.88); /* #2f2f2f */
+  --input: oklch(0.3052 0 89.88);
 
   --chart-1: oklch(0.7304 0.1213 245.2972);
   --chart-2: oklch(0.7683 0.1103 133);
@@ -165,8 +193,9 @@
   --shadow-elevation: 0 8px 22px -6px hsl(0 0% 0% / 0.55), 0 2px 4px -1px hsl(0 0% 0% / 0.35);
   --shadow-control: 0 1px 2px 0 hsl(0 0% 0% / 0.5);
 
-  /* A hairline on the sunken rail must step from --surface-sunken, not --border. */
-  --sidebar-border: oklch(0.3 0.0127 258.3724);
+  /* A hairline on a chrome rail steps from --surface-base, not from --border: it
+     divides chrome into sections rather than outlining content. */
+  --sidebar-border: oklch(0.255 0.0015 91);
 
   --font-sans: 'Inter', sans-serif;
   --font-serif: 'Lora', serif;
diff --git a/src/renderer/src/components/common/AppErrorBoundary.tsx b/src/renderer/src/components/common/AppErrorBoundary.tsx
index d5620db..fbd8dac 100644
--- a/src/renderer/src/components/common/AppErrorBoundary.tsx
+++ b/src/renderer/src/components/common/AppErrorBoundary.tsx
@@ -42,7 +42,7 @@ export default class AppErrorBoundary extends Component<
     }
 
     return (
-      <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-surface-base p-8 text-center text-foreground">
+      <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-surface-sunken p-8 text-center text-foreground">
         <h1 className="text-lg font-medium">{i18n.t('common:errorTitle')}</h1>
         <p className="max-w-md text-sm text-muted-foreground">
           {i18n.t('common:errorDescription')}
diff --git a/src/renderer/src/components/common/NotebookCard.tsx b/src/renderer/src/components/common/NotebookCard.tsx
index 4a2ad49..4a11893 100644
--- a/src/renderer/src/components/common/NotebookCard.tsx
+++ b/src/renderer/src/components/common/NotebookCard.tsx
@@ -1,9 +1,9 @@
 import { ReactElement } from 'react'
-import { Pencil, Trash2, Clock } from 'lucide-react'
+import { BookOpen, Pencil, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import type { Notebook } from '../../types/notebook'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../ui/card'
-import { Button } from '../ui/button'
+import { formatRelativeDate } from '../../lib/relativeDate'
+import { Card } from '../ui/card'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -14,44 +14,59 @@ import {
 
 interface NotebookCardProps {
   notebook: Notebook
+  /**
+   * How many sources it holds. Optional: Home may render the shelf from the
+   * notebook store before the overview has answered, and a count is not something
+   * to guess — without it the meta line shows just the date.
+   */
+  sourceCount?: number
   onClick: () => void
   onDelete: () => void
   onRename: () => void
 }
 
-// 笔记本卡片。DESIGN.md 明确禁止在图表/图谱之外使用 --chart-* 颜色，
-// 所以卡片不再用彩色侧边条区分，颜色只用于正文层级和交互状态。
-
+/*
+ * A notebook on the Home shelf.
+ *
+ * The name is the subject and everything else is demoted: no description (every
+ * notebook carries the same creation-time filler, and nothing can author one — see
+ * `NotebookHeader`), the source count and the date merged into one T3 line, and no
+ * resting buttons. Rename and delete live in the context menu, which is where the
+ * note list already keeps its per-row actions; a footer of icons was what made the
+ * shelf read as a row of identical toolbars.
+ *
+ * DESIGN.md forbids colour-coded cards, so the vertical accent stripe this card
+ * used to draw from `--chart-*` is gone: color marks state and action, not
+ * identity.
+ */
 export default function NotebookCard({
   notebook,
+  sourceCount,
   onClick,
   onDelete,
   onRename
 }: NotebookCardProps): ReactElement {
   const { t, i18n } = useTranslation('ui')
 
-  const formatDate = (date: Date): string => {
-    const now = new Date()
-    const diff = now.getTime() - date.getTime()
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-
-    if (days === 0) return t('today')
-    if (days === 1) return t('yesterday')
-    if (days < 7) return t('daysAgo', { days })
-
-    const locale = i18n.language === 'zh-CN' ? 'zh-CN' : 'en-US'
-    return date.toLocaleDateString(locale)
-  }
+  const meta = [
+    sourceCount === undefined ? null : t('sourceCount', { count: sourceCount }),
+    formatRelativeDate(notebook.updatedAt, t, i18n.language)
+  ]
+    .filter((part): part is string => part !== null)
+    .join(' · ')
 
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
-        <Card onClick={onClick} className="group relative cursor-pointer overflow-hidden">
+        <Card
+          onClick={onClick}
+          className="group relative flex h-[148px] cursor-pointer flex-col justify-between overflow-hidden p-4 transition-[transform,box-shadow] duration-150 hover:-translate-y-px hover:shadow-control"
+        >
           {/*
             Hover fill as an overlay, not as `hover:bg-surface-hover` on the card
             itself: the card is opaque `surface-raised`, so replacing its
             background with the translucent token would make it almost the same
-            lightness as `surface-base` in dark mode — an invisible hover.
+            lightness as the page behind it in dark mode — an invisible hover.
             Compositing keeps it visible in both themes.
           */}
           <div
@@ -59,40 +74,14 @@ export default function NotebookCard({
             className="pointer-events-none absolute inset-0 bg-surface-hover opacity-0 transition-opacity group-hover:opacity-100"
           />
 
-          <CardHeader>
-            <CardTitle>{notebook.title}</CardTitle>
-            {notebook.description && <CardDescription>{notebook.description}</CardDescription>}
-          </CardHeader>
-
-          <CardContent>
-            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Clock className="w-3.5 h-3.5" />
-              <span>{formatDate(notebook.updatedAt)}</span>
-            </div>
-          </CardContent>
+          <div className="relative flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+            <BookOpen className="w-4 h-4 text-muted-foreground" />
+          </div>
 
-          <CardFooter className="flex justify-end gap-1">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation()
-                onRename()
-              }}
-            >
-              <Pencil className="w-4 h-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation()
-                onDelete()
-              }}
-            >
-              <Trash2 className="w-4 h-4" />
-            </Button>
-          </CardFooter>
+          <div className="relative min-w-0">
+            <h3 className="truncate text-base font-medium text-foreground">{notebook.title}</h3>
+            <p className="mt-1 truncate text-xs text-subtle-foreground">{meta}</p>
+          </div>
         </Card>
       </ContextMenuTrigger>
 
diff --git a/src/renderer/src/components/common/WindowTitleBar.tsx b/src/renderer/src/components/common/WindowTitleBar.tsx
index ac5f57b..12e5382 100644
--- a/src/renderer/src/components/common/WindowTitleBar.tsx
+++ b/src/renderer/src/components/common/WindowTitleBar.tsx
@@ -30,9 +30,10 @@ interface WindowTitleBarProps {
  * Windows the controls sat over the content and on Linux two windows reserved
  * nothing at all. The reserves now come from windowChrome.ts.
  *
- * The bar is `surface-base`, the same tone as the workspace canvas, in all four
- * windows. It is the OS window frame, not a panel, so it takes no surface step;
- * the optional `border-b` separates it from full-bleed content.
+ * The bar is `surface-base` — the chrome tier — in all four windows, one step
+ * above the `surface-sunken` workspace floor it sits on. It is the OS window
+ * frame, not a panel, so it takes no surface step beyond that; the optional
+ * `border-b` separates it from full-bleed content.
  */
 export default function WindowTitleBar({
   left,
diff --git a/src/renderer/src/components/common/sourceIcon.ts b/src/renderer/src/components/common/sourceIcon.ts
new file mode 100644
index 0000000..79f3461
--- /dev/null
+++ b/src/renderer/src/components/common/sourceIcon.ts
@@ -0,0 +1,37 @@
+import {
+  AlignLeft,
+  File,
+  FileCode,
+  FileText,
+  FileType,
+  Globe,
+  Presentation,
+  StickyNote,
+  Youtube,
+  type LucideIcon
+} from 'lucide-react'
+import type { SourceKind } from '../../lib/sourceKind'
+
+/**
+ * One drawn glyph per source kind, shared by every surface that lists a source.
+ *
+ * This lives outside `lib/sourceKind.ts` on purpose: that module is the pure
+ * derivation (mime type, path, URL host) and is asserted in Node, where a UI icon
+ * set has no business being loaded. The *vocabulary* is still single — a PDF must
+ * not have one glyph in the library and another on Home — so the map is here, once,
+ * and both call sites read it.
+ *
+ * All one stroke weight, all neutral. DESIGN.md bans colour icons in neutral
+ * chrome, so a kind is carried by the glyph **and** its label, never by a tint.
+ */
+export const SOURCE_KIND_ICON: Record<SourceKind, LucideIcon> = {
+  pdf: FileText,
+  docx: FileType,
+  pptx: Presentation,
+  markdown: FileCode,
+  text: AlignLeft,
+  file: File,
+  web: Globe,
+  youtube: Youtube,
+  note: StickyNote
+}
diff --git a/src/renderer/src/components/home/Hero.tsx b/src/renderer/src/components/home/Hero.tsx
deleted file mode 100644
index 8e5d50b..0000000
--- a/src/renderer/src/components/home/Hero.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ReactElement } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Separator } from '../ui/separator'
-
-interface HeroProps {
-  notebookCount: number
-}
-
-export default function Hero({ notebookCount }: HeroProps): ReactElement {
-  const { t } = useTranslation('ui')
-
-  return (
-    <div className="px-6 pt-6 pb-4">
-      <div className="max-w-7xl mx-auto space-y-4">
-        <h1 className="text-xl font-medium text-foreground tracking-tight">{t('myNotebooks')}</h1>
-        <p className="text-sm text-muted-foreground">
-          {t('totalNotebooks', { count: notebookCount })}
-        </p>
-        <Separator />
-      </div>
-    </div>
-  )
-}
diff --git a/src/renderer/src/components/home/Home.tsx b/src/renderer/src/components/home/Home.tsx
index 5e4fcd9..d770fd9 100644
--- a/src/renderer/src/components/home/Home.tsx
+++ b/src/renderer/src/components/home/Home.tsx
@@ -1,7 +1,8 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BookOpen, Plus } from 'lucide-react'
 import { ScrollArea } from '../ui/scroll-area'
-import Hero from './Hero'
-import NotebookGrid from '../notebook/NotebookGrid'
+import { Button } from '../ui/button'
 import {
   Empty,
   EmptyContent,
@@ -10,43 +11,102 @@ import {
   EmptyMedia,
   EmptyTitle
 } from '../ui/empty'
-import { BookOpen, Plus } from 'lucide-react'
-import { Button } from '../ui/button'
-import { useTranslation } from 'react-i18next'
 import type { Notebook } from '../../types/notebook'
+import type { WorkspaceOverview } from '../../../../shared/types/workspace'
+import type { RecentlyOpenedNotebook } from '../../lib/recentlyOpened'
+import HomeSearch from './HomeSearch'
+import NotebookShelf from './NotebookShelf'
+import ContinueSection, { RecentSources } from './HomeSections'
 
 interface HomeProps {
   notebooks: Notebook[]
+  /** Null until the overview answers. Sections that need it render when it arrives. */
+  overview: WorkspaceOverview | null
+  /** What the user opened, newest first. Read from storage by the page. */
+  recentlyOpened: RecentlyOpenedNotebook[]
   onNotebookClick: (id: string) => void
   onNotebookDelete: (id: string) => void
   onNotebookRename: (id: string) => void
   onCreateNotebook: () => void
+  onOpenSource: (notebookId: string, documentId: string) => void
 }
 
+/** Morning / afternoon / evening, decided once per render. */
+function greetingKey(hour: number): string {
+  if (hour < 12) return 'goodMorning'
+  if (hour < 18) return 'goodAfternoon'
+  return 'goodEvening'
+}
+
+/**
+ * Home — a starting desk, not a dashboard.
+ *
+ * Four sections at most, in the order they are used: a greeting, the search entry,
+ * the notebooks, then what the user was doing and what recently arrived. The
+ * greeting is small on purpose; the entry below it is the thing the eye should land
+ * on, because a long-lived tool's Home is opened a hundred times and a hero banner
+ * is paid for on every one of them.
+ *
+ * Every section is allowed to render nothing. A workspace with no conversations and
+ * no sources shows a greeting, a search box and the shelf — not four empty boxes
+ * with headings, which is what a launcher looks like when it is designed from a
+ * template rather than from what the user actually has.
+ */
 export default function Home({
   notebooks,
+  overview,
+  recentlyOpened,
   onNotebookClick,
   onNotebookDelete,
   onNotebookRename,
-  onCreateNotebook
+  onCreateNotebook,
+  onOpenSource
 }: HomeProps): ReactElement {
   const { t } = useTranslation('ui')
 
-  // 空状态
+  // Counts live in the overview; the notebook list itself comes from the store, so a
+  // rename or a delete is reflected immediately instead of after a refetch.
+  const sourceCounts = useMemo(
+    () =>
+      new Map((overview?.notebooks ?? []).map((notebook) => [notebook.id, notebook.sourceCount])),
+    [overview]
+  )
+
+  const notebooksById = useMemo(
+    () =>
+      new Map(
+        notebooks.map((notebook) => [
+          notebook.id,
+          { id: notebook.id, title: notebook.title, sourceCount: sourceCounts.get(notebook.id) }
+        ])
+      ),
+    [notebooks, sourceCounts]
+  )
+
+  const header = (
+    <header>
+      <h1 className="text-xl font-medium tracking-tight text-foreground">
+        {t(greetingKey(new Date().getHours()))}
+      </h1>
+      <p className="mt-1 text-sm text-muted-foreground">{t('homePrompt')}</p>
+    </header>
+  )
+
   if (notebooks.length === 0) {
     return (
       <ScrollArea className="flex-1">
-        <div className="flex items-center justify-center min-h-[calc(100vh-80px)] px-6">
+        <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-6 py-10">
+          {header}
           <Empty>
             <EmptyHeader>
               <EmptyMedia variant="icon">
-                <BookOpen className="w-16 h-16 text-muted-foreground" />
+                <BookOpen className="w-6 h-6" />
               </EmptyMedia>
               <EmptyTitle>{t('noNotebooks')}</EmptyTitle>
               <EmptyDescription>{t('noNotebooksDesc')}</EmptyDescription>
             </EmptyHeader>
             <EmptyContent>
-              <Button onClick={onCreateNotebook} size="lg">
+              <Button onClick={onCreateNotebook}>
                 <Plus className="w-4 h-4" />
                 {t('createFirstNotebook')}
               </Button>
@@ -57,17 +117,35 @@ export default function Home({
     )
   }
 
-  // 正常状态
   return (
     <ScrollArea className="flex-1">
-      <div className="min-h-full">
-        <Hero notebookCount={notebooks.length} />
-        <NotebookGrid
+      <div className="mx-auto flex w-full max-w-3xl flex-col gap-10 px-6 py-10">
+        {header}
+
+        <HomeSearch
+          notebooks={notebooks}
+          sources={overview?.recentDocuments ?? []}
+          onOpenNotebook={onNotebookClick}
+          onOpenSource={onOpenSource}
+        />
+
+        <NotebookShelf
           notebooks={notebooks}
+          sourceCounts={sourceCounts}
           onNotebookClick={onNotebookClick}
           onNotebookDelete={onNotebookDelete}
           onNotebookRename={onNotebookRename}
+          onCreateNotebook={onCreateNotebook}
         />
+
+        <ContinueSection
+          session={overview?.recentSessions[0] ?? null}
+          openedNotebooks={recentlyOpened}
+          notebooksById={notebooksById}
+          onOpenNotebook={onNotebookClick}
+        />
+
+        <RecentSources documents={overview?.recentDocuments ?? []} onOpenSource={onOpenSource} />
       </div>
     </ScrollArea>
   )
diff --git a/src/renderer/src/components/home/HomeSearch.tsx b/src/renderer/src/components/home/HomeSearch.tsx
new file mode 100644
index 0000000..b1a4888
--- /dev/null
+++ b/src/renderer/src/components/home/HomeSearch.tsx
@@ -0,0 +1,213 @@
+import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BookOpen, FileText, Search } from 'lucide-react'
+import type { WorkspaceOverviewDocument } from '../../../../shared/types/workspace'
+import { isMac } from '../../lib/platform'
+import { sourceKindOf, SOURCE_KIND_LABEL } from '../../lib/sourceKind'
+
+interface HomeSearchProps {
+  notebooks: Array<{ id: string; title: string }>
+  sources: WorkspaceOverviewDocument[]
+  onOpenNotebook: (notebookId: string) => void
+  onOpenSource: (notebookId: string, documentId: string) => void
+}
+
+interface Match {
+  key: string
+  /** Grouped headings are rendered from this, so the flat list keeps its order. */
+  kind: 'notebook' | 'source'
+  title: string
+  meta: string
+  open: () => void
+}
+
+/** How many of each group a query may return. More than this is not a launcher. */
+const MATCH_LIMIT = 5
+
+/**
+ * The Home entry point.
+ *
+ * What it does today is **filter notebooks and sources by name**, in the renderer,
+ * over data Home already has. It is deliberately not wired to retrieval: searching
+ * the *text* of the library and asking a question across all notebooks needs a
+ * notebook-free search path (`searchChunksFts` is scoped to one notebook, and every
+ * notebook has its own vector table), and that is a separate change. The placeholder
+ * says what the control actually does until then — a box labelled "ask your
+ * knowledge" that quietly only matches titles would be worse than no box.
+ *
+ * It also owns the `Cmd/Ctrl+K` binding on Home, so the hint it renders is a
+ * shortcut that works rather than decoration.
+ */
+export default function HomeSearch({
+  notebooks,
+  sources,
+  onOpenNotebook,
+  onOpenSource
+}: HomeSearchProps): ReactElement {
+  const { t } = useTranslation('ui')
+  const [query, setQuery] = useState('')
+  const [isOpen, setIsOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+        event.preventDefault()
+        inputRef.current?.focus()
+        inputRef.current?.select()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  const matches = useMemo((): Match[] => {
+    const needle = query.trim().toLowerCase()
+    if (needle.length === 0) return []
+
+    const notebookMatches = notebooks
+      .filter((notebook) => notebook.title.toLowerCase().includes(needle))
+      .slice(0, MATCH_LIMIT)
+      .map((notebook) => ({
+        key: `notebook:${notebook.id}`,
+        kind: 'notebook' as const,
+        title: notebook.title,
+        meta: t('notebook'),
+        open: () => onOpenNotebook(notebook.id)
+      }))
+
+    const sourceMatches = sources
+      .filter((document) => document.title.toLowerCase().includes(needle))
+      .slice(0, MATCH_LIMIT)
+      .map((document) => ({
+        key: `source:${document.id}`,
+        kind: 'source' as const,
+        title: document.title,
+        meta: `${document.notebookTitle} · ${t(SOURCE_KIND_LABEL[sourceKindOf(document)])}`,
+        open: () => onOpenSource(document.notebookId, document.id)
+      }))
+
+    return [...notebookMatches, ...sourceMatches]
+  }, [query, notebooks, sources, onOpenNotebook, onOpenSource, t])
+
+  const showPanel = isOpen && query.trim().length > 0
+
+  // A new query is a new list; keeping the old index would highlight an unrelated
+  // row. Set from the key handler rather than an effect so the first row is active
+  // on the same render the results appear.
+  const handleChange = useCallback((value: string): void => {
+    setQuery(value)
+    setActiveIndex(0)
+    setIsOpen(true)
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>): void => {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        if (query.length > 0) {
+          setQuery('')
+          setActiveIndex(0)
+          return
+        }
+        setIsOpen(false)
+        return
+      }
+      if (matches.length === 0) return
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setActiveIndex((index) => (index + 1) % matches.length)
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setActiveIndex((index) => (index - 1 + matches.length) % matches.length)
+        return
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        matches[activeIndex]?.open()
+        setIsOpen(false)
+      }
+    },
+    [matches, activeIndex, query.length]
+  )
+
+  return (
+    <div className="relative">
+      <div className="relative flex h-12 items-center rounded-lg border border-border bg-surface-raised transition-colors focus-within:border-ring">
+        <Search className="pointer-events-none absolute left-3 w-4 h-4 text-muted-foreground" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(event) => handleChange(event.target.value)}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => setIsOpen(false)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('searchPlaceholder')}
+          aria-label={t('searchPlaceholder')}
+          aria-expanded={showPanel}
+          aria-controls="home-search-results"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-activedescendant={
+            showPanel && matches.length > 0 ? `home-search-option-${activeIndex}` : undefined
+          }
+          className="h-full w-full bg-transparent pl-9 pr-16 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+        />
+        <kbd className="pointer-events-none absolute right-3 select-none text-[11px] text-subtle-foreground">
+          {isMac() ? '⌘ K' : 'Ctrl K'}
+        </kbd>
+      </div>
+
+      {showPanel && (
+        // `onMouseDown` is prevented so the click does not blur the input first and
+        // unmount the row that was clicked.
+        <div
+          id="home-search-results"
+          role="listbox"
+          aria-label={t('searchResults')}
+          className="absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-lg border border-border bg-surface-overlay p-1 shadow-elevation"
+        >
+          {matches.length === 0 ? (
+            <p className="px-2 py-1.5 text-sm text-muted-foreground">{t('searchNoResults')}</p>
+          ) : (
+            matches.map((match, index) => (
+              <button
+                key={match.key}
+                id={`home-search-option-${index}`}
+                type="button"
+                role="option"
+                aria-selected={index === activeIndex}
+                onMouseDown={(event) => event.preventDefault()}
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => {
+                  match.open()
+                  setIsOpen(false)
+                }}
+                className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors ${
+                  index === activeIndex ? 'bg-surface-selected' : 'hover:bg-surface-hover'
+                }`}
+              >
+                {match.kind === 'notebook' ? (
+                  <BookOpen className="w-4 h-4 shrink-0 text-muted-foreground" />
+                ) : (
+                  <FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
+                )}
+                <span className="min-w-0 flex-1 truncate text-sm text-foreground">
+                  {match.title}
+                </span>
+                <span className="shrink-0 truncate text-xs text-subtle-foreground">
+                  {match.meta}
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/home/HomeSections.tsx b/src/renderer/src/components/home/HomeSections.tsx
new file mode 100644
index 0000000..91e8819
--- /dev/null
+++ b/src/renderer/src/components/home/HomeSections.tsx
@@ -0,0 +1,192 @@
+import { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BookOpen, MessageSquare, type LucideIcon } from 'lucide-react'
+import type {
+  WorkspaceOverviewDocument,
+  WorkspaceOverviewSession
+} from '../../../../shared/types/workspace'
+import type { RecentlyOpenedNotebook } from '../../lib/recentlyOpened'
+import { formatRelativeDate } from '../../lib/relativeDate'
+import { sourceKindOf, SOURCE_KIND_LABEL } from '../../lib/sourceKind'
+import { SOURCE_KIND_ICON } from '../common/sourceIcon'
+
+/**
+ * A Home row: glyph, subject, demoted metadata.
+ *
+ * "Continue" and "Recently added" are both lists of *things that are not
+ * notebooks*, so they share one row rather than two almost-identical ones. The
+ * difference between them is what they are ordered by and what the metadata says,
+ * not how a row looks.
+ */
+function HomeRow({
+  icon: Icon,
+  title,
+  meta,
+  onClick
+}: {
+  icon: LucideIcon
+  title: string
+  meta: string
+  onClick: () => void
+}): ReactElement {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex items-center gap-3 rounded-md px-2 py-2 text-left transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+    >
+      <Icon className="w-4 h-4 shrink-0 text-muted-foreground" />
+      <span className="min-w-0 flex-1 truncate text-sm text-foreground">{title}</span>
+      <span className="shrink-0 truncate text-xs text-subtle-foreground">{meta}</span>
+    </button>
+  )
+}
+
+interface ContinueSectionProps {
+  /** The most recently touched active conversation, or null if there is none. */
+  session: WorkspaceOverviewSession | null
+  /** Recently opened notebooks, newest first. */
+  openedNotebooks: RecentlyOpenedNotebook[]
+  /** Resolves ids to titles. A notebook that no longer exists simply drops out. */
+  notebooksById: Map<string, { id: string; title: string; sourceCount?: number }>
+  onOpenNotebook: (notebookId: string) => void
+}
+
+interface ContinueEntry {
+  key: string
+  icon: LucideIcon
+  title: string
+  meta: string
+  /** Milliseconds, used only to order the rows. */
+  at: number
+  open: () => void
+}
+
+/** How many rows "Continue" shows. Three is a reminder, not a history. */
+const CONTINUE_LIMIT = 3
+
+/**
+ * "Continue" — where the user was, which is not the same question as "what changed".
+ *
+ * The Recent shelf is ordered by `notebooks.updatedAt`, so a notebook the user
+ * renamed last week outranks the one they were reading an hour ago. This section is
+ * ordered by *their* activity instead: the notebooks they opened (recorded in
+ * `lib/recentlyOpened.ts`) and the conversation last written to, merged into one
+ * list by real recency so the top row is the truest answer to "where was I".
+ *
+ * Continue *reading* is not here. Resuming a source needs the reading location
+ * recorded alongside the open, and a row that can silently vanish when the source
+ * falls outside the overview's window would be worse than no row. That is a
+ * separate change with its own persistence.
+ */
+export default function ContinueSection({
+  session,
+  openedNotebooks,
+  notebooksById,
+  onOpenNotebook
+}: ContinueSectionProps): ReactElement | null {
+  const { t, i18n } = useTranslation('ui')
+
+  const entries: ContinueEntry[] = []
+
+  for (const entry of openedNotebooks) {
+    const notebook = notebooksById.get(entry.notebookId)
+    if (!notebook) continue
+    entries.push({
+      key: `notebook:${notebook.id}`,
+      icon: BookOpen,
+      title: notebook.title,
+      meta: [
+        notebook.sourceCount === undefined
+          ? null
+          : t('sourceCount', { count: notebook.sourceCount }),
+        formatRelativeDate(new Date(entry.at), t, i18n.language)
+      ]
+        .filter((part): part is string => part !== null)
+        .join(' · '),
+      at: entry.at,
+      open: () => onOpenNotebook(notebook.id)
+    })
+  }
+
+  if (session) {
+    entries.push({
+      key: `session:${session.id}`,
+      icon: MessageSquare,
+      title: session.title,
+      meta: `${session.notebookTitle} · ${formatRelativeDate(session.updatedAt, t, i18n.language)}`,
+      at: session.updatedAt.getTime(),
+      open: () => onOpenNotebook(session.notebookId)
+    })
+  }
+
+  const visible = entries.sort((a, b) => b.at - a.at).slice(0, CONTINUE_LIMIT)
+  if (visible.length === 0) return null
+
+  return (
+    <section>
+      <h2 className="mb-3 text-sm font-medium text-foreground">{t('continueSection')}</h2>
+      <div className="flex flex-col gap-1">
+        {visible.map((entry) => (
+          <HomeRow
+            key={entry.key}
+            icon={entry.icon}
+            title={entry.title}
+            meta={entry.meta}
+            onClick={entry.open}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+interface RecentSourcesProps {
+  documents: WorkspaceOverviewDocument[]
+  onOpenSource: (notebookId: string, documentId: string) => void
+}
+
+/** How many sources the list shows. A reminder of what arrived, not a browser. */
+const RECENT_SOURCE_LIMIT = 6
+
+/**
+ * "Recently added" — the newest sources across every notebook.
+ *
+ * A list, not cards. Notebooks already use cards on this page, and repeating one
+ * container for a different kind of thing is what makes a launcher read as a wall of
+ * identical boxes: the same grammar for every object hides the difference between
+ * "a place you work" and "a file that arrived".
+ */
+export function RecentSources({
+  documents,
+  onOpenSource
+}: RecentSourcesProps): ReactElement | null {
+  const { t, i18n } = useTranslation('ui')
+
+  const visible = documents.slice(0, RECENT_SOURCE_LIMIT)
+  if (visible.length === 0) return null
+
+  return (
+    <section>
+      <h2 className="mb-3 text-sm font-medium text-foreground">{t('recentlyAdded')}</h2>
+      <div className="flex flex-col gap-1">
+        {visible.map((document) => {
+          const kind = sourceKindOf(document)
+          return (
+            <HomeRow
+              key={document.id}
+              icon={SOURCE_KIND_ICON[kind]}
+              title={document.title}
+              meta={`${document.notebookTitle} · ${t(SOURCE_KIND_LABEL[kind])} · ${formatRelativeDate(
+                document.createdAt,
+                t,
+                i18n.language
+              )}`}
+              onClick={() => onOpenSource(document.notebookId, document.id)}
+            />
+          )
+        })}
+      </div>
+    </section>
+  )
+}
diff --git a/src/renderer/src/components/home/NotebookShelf.tsx b/src/renderer/src/components/home/NotebookShelf.tsx
new file mode 100644
index 0000000..c581d4a
--- /dev/null
+++ b/src/renderer/src/components/home/NotebookShelf.tsx
@@ -0,0 +1,83 @@
+import { ReactElement, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Plus } from 'lucide-react'
+import type { Notebook } from '../../types/notebook'
+import { Button } from '../ui/button'
+import NotebookCard from '../common/NotebookCard'
+
+interface NotebookShelfProps {
+  notebooks: Notebook[]
+  sourceCounts: Map<string, number>
+  onNotebookClick: (id: string) => void
+  onNotebookDelete: (id: string) => void
+  onNotebookRename: (id: string) => void
+  onCreateNotebook: () => void
+}
+
+/** How many notebooks the shelf shows before it is expanded. Two rows of three. */
+export const SHELF_SIZE = 6
+
+/**
+ * "Recent notebooks".
+ *
+ * It shows the newest few and expands in place to the whole list, because Home is
+ * the only place notebooks are browsed: a shelf that showed six and offered no way
+ * to the rest would strand every older notebook, with no rename or delete reachable
+ * from anywhere. So the control beside the heading is a real disclosure, not a
+ * "View all" link pointing at a page that does not exist.
+ *
+ * Source counts arrive as a map and may be missing while Home is still loading, so
+ * a card without one omits the count instead of printing a zero it cannot vouch for.
+ */
+export default function NotebookShelf({
+  notebooks,
+  sourceCounts,
+  onNotebookClick,
+  onNotebookDelete,
+  onNotebookRename,
+  onCreateNotebook
+}: NotebookShelfProps): ReactElement {
+  const { t } = useTranslation('ui')
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const visible = isExpanded ? notebooks : notebooks.slice(0, SHELF_SIZE)
+  const hasMore = notebooks.length > SHELF_SIZE
+
+  return (
+    <section>
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <h2 className="text-sm font-medium text-foreground">
+          {isExpanded ? t('allNotebooks') : t('recentNotebooks')}
+        </h2>
+        <div className="flex items-center gap-1">
+          {hasMore && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsExpanded((expanded) => !expanded)}
+            >
+              {isExpanded ? t('showRecent') : t('showAll', { count: notebooks.length })}
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={onCreateNotebook}>
+            <Plus className="w-4 h-4" />
+            {t('newNotebookAction')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {visible.map((notebook) => (
+          <NotebookCard
+            key={notebook.id}
+            notebook={notebook}
+            sourceCount={sourceCounts.get(notebook.id)}
+            onClick={() => onNotebookClick(notebook.id)}
+            onDelete={() => onNotebookDelete(notebook.id)}
+            onRename={() => onNotebookRename(notebook.id)}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/src/renderer/src/components/layouts/DragHandle.tsx b/src/renderer/src/components/layouts/DragHandle.tsx
index 926fcef..c4622e6 100644
--- a/src/renderer/src/components/layouts/DragHandle.tsx
+++ b/src/renderer/src/components/layouts/DragHandle.tsx
@@ -26,8 +26,8 @@ export interface DragHandleProps {
  * Its width is **layout, not decoration**: the canvas gutter between two panels
  * *is* the handle, which is why `HANDLE_WIDTH` is subtracted from the space the
  * panels may occupy. Painting it, or shrinking it toward a hairline, closes the
- * gutter between the panels — the panels are separate cards floating on
- * `surface-base`, not adjacent surfaces sharing a divider.
+ * gutter between the panels — the panels are separate cards floating on the
+ * `surface-sunken` floor, not adjacent surfaces sharing a divider.
  *
  * It is a real `separator`: focusable, arrow-resizable, and it reports its
  * value, so the layout is not mouse-only.
diff --git a/src/renderer/src/components/notebook/NotePanel.tsx b/src/renderer/src/components/notebook/NotePanel.tsx
index e1bf0eb..99ea564 100644
--- a/src/renderer/src/components/notebook/NotePanel.tsx
+++ b/src/renderer/src/components/notebook/NotePanel.tsx
@@ -337,7 +337,7 @@ export default function NotePanel(): ReactElement {
   }
 
   return (
-    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-surface-raised">
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-surface-base">
       {isEditing && currentNote ? (
         // 编辑器页面 - 使用 key 强制在切换笔记时重新挂载
         <NoteEditorPanel
diff --git a/src/renderer/src/components/notebook/NotebookGrid.tsx b/src/renderer/src/components/notebook/NotebookGrid.tsx
deleted file mode 100644
index 64b0c88..0000000
--- a/src/renderer/src/components/notebook/NotebookGrid.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ReactElement } from 'react'
-import NotebookCard from '../common/NotebookCard'
-import type { Notebook } from '../../types/notebook'
-
-interface NotebookGridProps {
-  notebooks: Notebook[]
-  onNotebookClick: (id: string) => void
-  onNotebookDelete: (id: string) => void
-  onNotebookRename: (id: string) => void
-}
-
-export default function NotebookGrid({
-  notebooks,
-  onNotebookClick,
-  onNotebookDelete,
-  onNotebookRename
-}: NotebookGridProps): ReactElement {
-  return (
-    <div className="px-6 pb-12">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
-        {notebooks.map((notebook) => (
-          <NotebookCard
-            key={notebook.id}
-            notebook={notebook}
-            onClick={() => onNotebookClick(notebook.id)}
-            onDelete={() => onNotebookDelete(notebook.id)}
-            onRename={() => onNotebookRename(notebook.id)}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/src/renderer/src/components/notebook/NotebookLayout.tsx b/src/renderer/src/components/notebook/NotebookLayout.tsx
index 235382a..df53a63 100644
--- a/src/renderer/src/components/notebook/NotebookLayout.tsx
+++ b/src/renderer/src/components/notebook/NotebookLayout.tsx
@@ -100,7 +100,7 @@ export default function NotebookLayout(): ReactElement {
   }, [])
 
   return (
-    <div className="flex flex-col h-screen bg-surface-base text-foreground">
+    <div className="flex flex-col h-screen bg-surface-sunken text-foreground">
       <TopNavigationBar onCreateClick={handleCreateNotebook} onConfirmDiscard={confirmDiscard} />
 
       <ResizableLayout
diff --git a/src/renderer/src/components/notebook/ProcessPanel.tsx b/src/renderer/src/components/notebook/ProcessPanel.tsx
index 964b14b..0675ed4 100644
--- a/src/renderer/src/components/notebook/ProcessPanel.tsx
+++ b/src/renderer/src/components/notebook/ProcessPanel.tsx
@@ -15,10 +15,10 @@ import { useUIStore } from '../../store/uiStore'
 import { parseRetrievalScope } from '../../../../shared/types/scope'
 import { FOCUS_CHAT_EVENT } from '../../lib/workspaceEvents'
 import MessageList, { type MessageListHandle } from './chat/MessageList'
+import NotebookHeader from './chat/NotebookHeader'
 import ScopeSelector from './chat/ScopeSelector'
 import { COMPOSER_GAP, COMPOSER_RESERVE, COMPOSER_RESERVE_VAR } from './chat/stickToBottom'
 import { Button } from '../ui/button'
-import { Input } from '../ui/input'
 import { Textarea } from '../ui/textarea'
 import { Card } from '../ui/card'
 import { PanelHeader } from '../ui/panel-header'
@@ -55,8 +55,6 @@ function ProcessPanel({
   // 整个 notebook。
   const scope = parseRetrievalScope(currentSession?.retrievalScope)
 
-  const [editingTitle, setEditingTitle] = useState('')
-  const [isEditingTitle, setIsEditingTitle] = useState(false)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const messageListRef = useRef<MessageListHandle>(null)
   const cardRef = useRef<HTMLDivElement>(null)
@@ -209,48 +207,6 @@ function ProcessPanel({
     }
   }
 
-  // Start editing title
-  const handleStartEditTitle = (): void => {
-    if (currentNotebook) {
-      setEditingTitle(currentNotebook.title)
-      setIsEditingTitle(true)
-    }
-  }
-
-  // Save title
-  const handleSaveTitle = async (): Promise<void> => {
-    if (!currentNotebook || !editingTitle.trim()) {
-      setIsEditingTitle(false)
-      return
-    }
-
-    if (editingTitle.trim() !== currentNotebook.title) {
-      try {
-        await updateNotebook(currentNotebook.id, { title: editingTitle.trim() })
-      } catch (error) {
-        console.error('Failed to update Notebook title:', error)
-      }
-    }
-
-    setIsEditingTitle(false)
-  }
-
-  // Cancel editing
-  const handleCancelEditTitle = (): void => {
-    setIsEditingTitle(false)
-    setEditingTitle('')
-  }
-
-  // Title input box key handler
-  const handleTitleKeyDown = (e: React.KeyboardEvent): void => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      void handleSaveTitle()
-    } else if (e.key === 'Escape') {
-      handleCancelEditTitle()
-    }
-  }
-
   return (
     <Card ref={cardRef} className="relative flex h-full flex-col overflow-hidden">
       <PanelHeader
@@ -274,34 +230,14 @@ function ProcessPanel({
           )
         }
         center={
-          currentNotebook ? (
-            isEditingTitle ? (
-              <Input
-                type="text"
-                value={editingTitle}
-                onChange={(e) => setEditingTitle(e.target.value)}
-                onBlur={handleSaveTitle}
-                onKeyDown={handleTitleKeyDown}
-                autoFocus
-                className="text-sm font-medium bg-transparent border-0 text-center min-w-0 max-w-full p-0 h-auto focus-visible:ring-0 focus-visible:ring-offset-0"
-                style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
-              />
-            ) : (
-              <Button
-                onClick={handleStartEditTitle}
-                variant="ghost"
-                className="text-sm font-medium h-auto p-0 truncate w-full select-none"
-                style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
-                title={t('clickToEditTitle')}
-              >
-                {currentNotebook.title}
-              </Button>
-            )
-          ) : (
-            <span className="text-sm text-muted-foreground select-none">
-              {t('selectOrCreateNotebook')}
-            </span>
-          )
+          /*
+           * Empty on purpose, and not omitted: the centre column is what keeps a
+           * wide drag surface between the two toggles. The notebook's name used to
+           * live here as a `text-sm` label; it is now the document header's job
+           * (`NotebookHeader`), and the window's tab strip already carries the name
+           * at all times, so nothing is lost by leaving this blank.
+           */
+          <span aria-hidden="true" />
         }
         right={
           onToggleRight && (
@@ -323,14 +259,24 @@ function ProcessPanel({
         }
       />
 
-      {/* 对话消息区域 - 使用 absolute 定位占满剩余空间 */}
-      <div className="absolute top-14 bottom-0 left-0 right-0 overflow-hidden">
+      {/* 对话消息区域 - 使用 absolute 定位占满剩余空间。`top-11` 就是 PanelHeader 的高度：
+          以前是 `top-14`，中间多出的 12px 是一条什么都不放的死带。 */}
+      <div className="absolute top-11 bottom-0 left-0 right-0 overflow-hidden">
         {/* Remount per session: every conversation opens at its own end, not at
             the position the previous one happened to be left at. */}
         <MessageList
           key={currentSession?.id ?? 'no-session'}
           ref={messageListRef}
           messages={messages}
+          header={
+            currentNotebook ? (
+              <NotebookHeader
+                notebook={currentNotebook}
+                sourceCount={documents.length}
+                onRename={(title) => updateNotebook(currentNotebook.id, { title })}
+              />
+            ) : null
+          }
         />
       </div>
 
@@ -355,7 +301,19 @@ function ProcessPanel({
         ref={composerRef}
         className="absolute bottom-0 left-0 right-0 p-4 pointer-events-none shrink-0 z-20"
       >
-        <div className="relative bg-surface-overlay/95 backdrop-blur-md rounded-lg border border-border focus-within:ring-2 focus-within:ring-ring shadow-elevation pointer-events-auto select-none">
+        {/*
+         * A floating layer, not glass. It is opaque (`bg-surface-overlay`) with a
+         * hairline and the elevation token, and it deliberately carries no
+         * `backdrop-blur`: nothing reads through it (the fade covers the
+         * transcript, not this surface), so the blur was cost without an effect
+         * and one of the two glass surfaces DESIGN.md bans.
+         *
+         * The empty composer is one line tall (56px) so it reads as an input
+         * rather than as an empty text box; it grows to `max-h-[280px]` with the
+         * content while the transcript keeps its place, because the fade and the
+         * transcript reserve are both measured from this element.
+         */}
+        <div className="relative bg-surface-overlay rounded-lg border border-border focus-within:ring-2 focus-within:ring-ring shadow-elevation pointer-events-auto select-none">
           {/* 范围选择（#94）：这次问题用哪些来源回答。放在输入框上方，跟在要提问的地方。 */}
           {currentSession && (
             <ScopeSelector
@@ -375,7 +333,7 @@ function ProcessPanel({
             placeholder={!hasChatModel ? t('noProviderConfigured') : t('inputMessage')}
             disabled={!hasChatModel}
             rows={1}
-            className="w-full bg-transparent border-0 pl-4 pr-14 py-3 text-sm text-foreground placeholder-muted-foreground resize-none focus-visible:ring-0 focus-visible:ring-offset-0 overflow-y-auto min-h-[84px] max-h-[280px] themed-scrollbar select-text"
+            className="w-full bg-transparent border-0 pl-4 pr-14 py-3 text-sm text-foreground placeholder-muted-foreground resize-none focus-visible:ring-0 focus-visible:ring-offset-0 overflow-y-auto min-h-[56px] max-h-[280px] themed-scrollbar select-text"
           />
 
           {/* 发送/停止按钮 - 动态切换 */}
diff --git a/src/renderer/src/components/notebook/SourcePanel.tsx b/src/renderer/src/components/notebook/SourcePanel.tsx
index 366331b..fe38f16 100644
--- a/src/renderer/src/components/notebook/SourcePanel.tsx
+++ b/src/renderer/src/components/notebook/SourcePanel.tsx
@@ -698,7 +698,7 @@ export default function SourcePanel(): ReactElement {
 
   return (
     <Card
-      className="flex h-full flex-col overflow-hidden"
+      className="flex h-full flex-col overflow-hidden bg-surface-base"
       onDragOver={(event) => {
         event.preventDefault()
         setIsDragging(true)
diff --git a/src/renderer/src/components/notebook/chat/MessageList.tsx b/src/renderer/src/components/notebook/chat/MessageList.tsx
index dca4031..a1f7ceb 100644
--- a/src/renderer/src/components/notebook/chat/MessageList.tsx
+++ b/src/renderer/src/components/notebook/chat/MessageList.tsx
@@ -1,6 +1,7 @@
 import {
   forwardRef,
   ReactElement,
+  ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -25,6 +26,15 @@ export interface MessageListHandle {
 
 interface MessageListProps {
   messages: ChatMessage[]
+  /**
+   * Rendered as the first block inside the scroll area, above the messages.
+   *
+   * A node rather than a set of props: the transcript does not know what a
+   * notebook is, and the header has to scroll with the answer rather than sit
+   * pinned above the scroll area, which would change the geometry the composer
+   * reserve and the follow behaviour are measured against.
+   */
+  header?: ReactNode
 }
 
 /** A user who asked for reduced motion gets the jump without the animation. */
@@ -36,7 +46,7 @@ function prefersReducedMotion(): boolean {
 }
 
 const MessageList = forwardRef<MessageListHandle, MessageListProps>(function MessageList(
-  { messages },
+  { messages, header },
   ref
 ): ReactElement {
   const viewportRef = useRef<HTMLDivElement>(null)
@@ -171,8 +181,14 @@ const MessageList = forwardRef<MessageListHandle, MessageListProps>(function Mes
       </div>
 
       <ScrollArea className="h-full" viewportRef={viewportRef}>
+        {header && (
+          <div className="mx-auto w-full max-w-[var(--reading-measure)] px-4">{header}</div>
+        )}
+
         {!hasMessages ? (
-          <div className="flex min-h-full items-center justify-center p-8">
+          // No `min-h-full`: with the header above it, a full-height box would
+          // push the empty state down by a viewport and invent a scrollbar.
+          <div className="mx-auto flex w-full max-w-[var(--reading-measure)] items-center justify-center px-4 py-16">
             <Empty className="border-none">
               <EmptyHeader>
                 <EmptyMedia variant="icon">
@@ -186,7 +202,11 @@ const MessageList = forwardRef<MessageListHandle, MessageListProps>(function Mes
         ) : (
           // Observed for height so the follow survives reflow without a message
           // event. The reserved space keeps the last line above the composer.
-          <div ref={contentRef} className="px-4 py-6" style={{ paddingBottom: COMPOSER_RESERVE }}>
+          <div
+            ref={contentRef}
+            className="mx-auto w-full max-w-[var(--reading-measure)] px-4 py-6"
+            style={{ paddingBottom: COMPOSER_RESERVE }}
+          >
             <div className="space-y-4">
               {messages.map((message) => (
                 <MessageItem key={message.id} message={message} />
diff --git a/src/renderer/src/components/notebook/chat/NotebookHeader.tsx b/src/renderer/src/components/notebook/chat/NotebookHeader.tsx
new file mode 100644
index 0000000..1ccaffa
--- /dev/null
+++ b/src/renderer/src/components/notebook/chat/NotebookHeader.tsx
@@ -0,0 +1,101 @@
+import { ReactElement, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Notebook } from '../../../types/notebook'
+import { formatRelativeDate } from '../../../lib/relativeDate'
+import { Input } from '../../ui/input'
+
+interface NotebookHeaderProps {
+  notebook: Notebook
+  /** How many sources are in this notebook, for the metadata line. */
+  sourceCount: number
+  onRename: (title: string) => void | Promise<void>
+}
+
+/**
+ * The notebook's document header (#65).
+ *
+ * The name used to be a `text-sm` label in the panel header, which is window
+ * chrome: it made the workspace read as a tool window with a title bar rather
+ * than as a document. The title now lives in the page, at `text-3xl`, and the
+ * panel header above it carries nothing but the panel toggles — the notebook's
+ * name is still always on screen, in the window's tab strip.
+ *
+ * It is rendered as the first block of the transcript's scroll area rather than
+ * pinned above it, so it scrolls away with the answer the way a page title does.
+ * That also keeps the transcript's geometry untouched: the scroll area, the
+ * measured composer reserve and the follow-the-answer behaviour all read the same
+ * boxes they read before.
+ *
+ * There is no subtitle. `notebooks.description` exists in the schema, but nothing
+ * in the app can author one — every notebook carries the same creation-time
+ * filler from `t('notebookDescription')`, so rendering it here would print a
+ * sentence the user never wrote. Add the line when the field is editable.
+ */
+export default function NotebookHeader({
+  notebook,
+  sourceCount,
+  onRename
+}: NotebookHeaderProps): ReactElement {
+  const { t, i18n } = useTranslation('ui')
+  const [isEditing, setIsEditing] = useState(false)
+  const [draft, setDraft] = useState('')
+
+  const startEditing = (): void => {
+    setDraft(notebook.title)
+    setIsEditing(true)
+  }
+
+  const save = async (): Promise<void> => {
+    const next = draft.trim()
+    setIsEditing(false)
+    if (!next || next === notebook.title) return
+    await onRename(next)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      void save()
+      return
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      setIsEditing(false)
+    }
+  }
+
+  return (
+    <header className="pt-6 pb-2">
+      {isEditing ? (
+        <Input
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={() => void save()}
+          onKeyDown={handleKeyDown}
+          autoFocus
+          aria-label={t('notebook:notebookName')}
+          className="h-auto w-full rounded-md border-0 bg-transparent p-0 text-3xl font-semibold tracking-tight focus-visible:ring-0 focus-visible:ring-offset-0"
+        />
+      ) : (
+        // A button, not a span with a click handler: the title is the way into
+        // renaming, so it has to be reachable and activatable by keyboard. The
+        // text cursor is the affordance — the title must not look like a control
+        // sitting on a document, so it takes no resting border and no hover fill.
+        <button
+          type="button"
+          onClick={startEditing}
+          title={t('clickToEditTitle')}
+          className="block w-full cursor-text rounded-md text-left text-3xl font-semibold tracking-tight break-words text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        >
+          {notebook.title}
+        </button>
+      )}
+
+      <p className="mt-2 text-xs text-subtle-foreground">
+        {t('sourceCount', { count: sourceCount })}
+        <span aria-hidden="true"> · </span>
+        {formatRelativeDate(notebook.updatedAt, t, i18n.language)}
+      </p>
+    </header>
+  )
+}
diff --git a/src/renderer/src/components/notebook/chat/markdown.css b/src/renderer/src/components/notebook/chat/markdown.css
index 548cf5e..18b59a7 100644
--- a/src/renderer/src/components/notebook/chat/markdown.css
+++ b/src/renderer/src/components/notebook/chat/markdown.css
@@ -8,10 +8,10 @@
   overflow-wrap: break-word;
 }
 
-/* 标题样式 */
+/* 标题样式。字重 600，与设计系统里标题的上限一致：正文标题不该比面板标题更重。 */
 .markdown-content h1 {
   font-size: 1.25rem;
-  font-weight: 700;
+  font-weight: 600;
   margin-top: 1rem;
   margin-bottom: 0.75rem;
   line-height: 1.4;
@@ -19,7 +19,7 @@
 
 .markdown-content h2 {
   font-size: 1.125rem;
-  font-weight: 700;
+  font-weight: 600;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
   line-height: 1.4;
@@ -27,7 +27,7 @@
 
 .markdown-content h3 {
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   margin-top: 0.75rem;
   margin-bottom: 0.5rem;
   line-height: 1.4;
@@ -35,7 +35,7 @@
 
 .markdown-content h4 {
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   margin-top: 0.5rem;
   margin-bottom: 0.25rem;
   line-height: 1.4;
@@ -180,10 +180,11 @@
   font-style: italic;
 }
 
-/* 删除线 */
+/* 删除线：用文字层级降一级，不用 opacity —— 透明度会叠在色阶上，
+   既让对比度不可预测，也让 T1/T2/T3 的三级失去意义。 */
 .markdown-content del {
   text-decoration: line-through;
-  opacity: 0.7;
+  color: var(--muted-foreground);
 }
 
 /* 任务列表 */
diff --git a/src/renderer/src/components/notebook/chat/stickToBottom.ts b/src/renderer/src/components/notebook/chat/stickToBottom.ts
index 1e497d5..a8e764e 100644
--- a/src/renderer/src/components/notebook/chat/stickToBottom.ts
+++ b/src/renderer/src/components/notebook/chat/stickToBottom.ts
@@ -48,8 +48,16 @@ export const COMPOSER_RESERVE_VAR = '--composer-reserve'
 /** Gap between the last message and the top of the floating composer. */
 export const COMPOSER_GAP = 24
 
-/** Reserve used until the composer reports its height. */
-export const COMPOSER_RESERVE_FALLBACK = 152
+/**
+ * Reserve used until the composer reports its height.
+ *
+ * The composer's outer height is the wrapper's `p-4` (32) plus the scope row
+ * (28) plus the textarea's `min-h-[56px]` plus the hairline (2). The value is
+ * deliberately the one with the scope row: the reserve only has to be large
+ * enough, and over-reserving leaves a gap while under-reserving hides the last
+ * line of an answer behind the composer.
+ */
+export const COMPOSER_RESERVE_FALLBACK = 120
 
 /** Gap between the back-to-bottom button's lower edge and the composer's top. */
 export const BACK_TO_BOTTOM_GAP = 8
diff --git a/src/renderer/src/components/notebook/note/NoteEditor.tsx b/src/renderer/src/components/notebook/note/NoteEditor.tsx
index 95b5d4c..fb15b46 100644
--- a/src/renderer/src/components/notebook/note/NoteEditor.tsx
+++ b/src/renderer/src/components/notebook/note/NoteEditor.tsx
@@ -27,9 +27,9 @@ interface NoteEditorProps {
 
 /** 正文的当前 markdown。`onUpdate`、外部同步和摘录追加都走这一个序列化入口。 */
 const markdownOf = (editor: Editor): string =>
-  // SAFETY: `tiptap-markdown` 把 serializer 挂在 `editor.storage.markdown` 上，但它的
-  // 类型增强没有覆盖到 @tiptap/core v3 的 storage 映射，所以 TS 看不到 `getMarkdown`。
-  // 该扩展是下面 `useEditor` 的固定成员，挂载后这个字段必然存在（原本这里写的是 `as any`）。
+  // SAFETY: `tiptap-markdown` 把 serializer 挂在 `editor.storage.markdown` 上，但它的类型增强
+  // 没有覆盖到 @tiptap/core v3 的 storage 映射，所以 TS 看不到 `getMarkdown`。该扩展是下面
+  // `useEditor` 的固定成员，挂载后这个字段必然存在（原本这里写的是 `as any`）。
   (editor.storage as unknown as { markdown: { getMarkdown: () => string } }).markdown.getMarkdown()
 
 export default function NoteEditor({ noteId, content, onChange }: NoteEditorProps): ReactElement {
@@ -171,7 +171,11 @@ export default function NoteEditor({ noteId, content, onChange }: NoteEditorProp
       <Toaster />
       {/* 编辑器内容 */}
       <ScrollArea className="flex-1">
-        <div ref={containerRef} className="p-4" onClickCapture={handleClickCapture}>
+        <div
+          ref={containerRef}
+          className="mx-auto w-full max-w-[var(--reading-measure)] p-4"
+          onClickCapture={handleClickCapture}
+        >
           <EditorContent editor={editor} />
         </div>
       </ScrollArea>
diff --git a/src/renderer/src/components/notebook/note/noteEditor.css b/src/renderer/src/components/notebook/note/noteEditor.css
index d620858..d1f481b 100644
--- a/src/renderer/src/components/notebook/note/noteEditor.css
+++ b/src/renderer/src/components/notebook/note/noteEditor.css
@@ -9,8 +9,7 @@
 }
 
 .ProseMirror p.is-empty::before {
-  color: var(--muted-foreground);
-  opacity: 0.5;
+  color: var(--subtle-foreground);
   content: attr(data-placeholder);
   pointer-events: none;
   float: left;
@@ -18,8 +17,7 @@
 }
 
 .ProseMirror.is-editor-empty p::before {
-  color: var(--muted-foreground);
-  opacity: 0.5;
+  color: var(--subtle-foreground);
   content: attr(data-placeholder);
   pointer-events: none;
   float: left;
@@ -35,7 +33,7 @@
 .ProseMirror h2,
 .ProseMirror h3 {
   margin: 1rem 0 0.5rem;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1.4;
   color: var(--foreground);
 }
diff --git a/src/renderer/src/components/notebook/source/DocumentList.tsx b/src/renderer/src/components/notebook/source/DocumentList.tsx
index ad32ca1..da70803 100644
--- a/src/renderer/src/components/notebook/source/DocumentList.tsx
+++ b/src/renderer/src/components/notebook/source/DocumentList.tsx
@@ -1,18 +1,25 @@
 import { ReactElement, useState } from 'react'
 import {
+  Database,
   FileText,
-  Globe,
-  FileUp,
-  StickyNote,
-  Trash2,
   Loader2,
-  Database,
+  MoreHorizontal,
+  RefreshCw,
   RotateCcw,
-  RefreshCw
+  Trash2
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import type { KnowledgeDocument } from '../../../../../shared/types/knowledge'
+import { SOURCE_KIND_LABEL, sourceKindOf } from '../../../lib/sourceKind'
+import { SOURCE_KIND_ICON } from '../../common/sourceIcon'
 import { Button } from '../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '../../ui/dropdown-menu'
 import ConfirmDialog from '../../common/ConfirmDialog'
 import {
   Empty,
@@ -23,6 +30,41 @@ import {
   EmptyContent
 } from '../../ui/empty'
 
+/**
+ * The order the library is grouped in, and the label each group carries.
+ *
+ * A library is read by scanning, so the sections are stable rather than sorted
+ * by size: what a user uploaded sits above what they pasted, every time. The
+ * section headings are only rendered when more than one group exists — a
+ * heading over the only group is noise, not structure.
+ *
+ * This is the coarse `document.type`, not the display kind from
+ * `lib/sourceKind.ts`: a group of "PDF" with one item in it is a worse table of
+ * contents than a group of "Documents".
+ */
+const SOURCE_GROUPS = ['file', 'url', 'note', 'text'] as const
+type SourceGroup = (typeof SOURCE_GROUPS)[number]
+
+const GROUP_LABEL: Record<SourceGroup, string> = {
+  file: 'files',
+  url: 'webPages',
+  note: 'notes',
+  text: 'sourceKindText'
+}
+
+/**
+ * One drawn glyph per kind, shared with the Home page (`components/common/sourceIcon.ts`).
+ *
+ * The library used to show four generic icons (an upload arrow for every file),
+ * which said nothing about what the source *is*.
+ */
+/** The column is a closed enum in the schema but open at runtime, so an unknown
+ * kind falls into the Documents group instead of disappearing from the list. */
+function groupOf(document: KnowledgeDocument): SourceGroup {
+  const type = document.type
+  return SOURCE_GROUPS.includes(type as SourceGroup) ? (type as SourceGroup) : 'file'
+}
+
 interface DocumentListProps {
   documents: KnowledgeDocument[]
   hasEmbeddingModel: boolean
@@ -79,17 +121,34 @@ export default function DocumentList({
     )
   }
 
+  const groups = SOURCE_GROUPS.map((group) => ({
+    group,
+    documents: documents.filter((document) => groupOf(document) === group)
+  })).filter((section) => section.documents.length > 0)
+
+  // A single group needs no heading: the panel header already says "Library".
+  const showHeadings = groups.length > 1
+
   return (
-    <div className="p-2 space-y-1">
-      {documents.map((doc) => (
-        <DocumentItem
-          key={doc.id}
-          document={doc}
-          onDelete={onDeleteDocument}
-          onSelect={onSelectDocument}
-          onRetry={onRetryDocument}
-          onReindex={onReindexDocument}
-        />
+    <div className="p-2 space-y-3">
+      {groups.map((section) => (
+        <section key={section.group} className="space-y-1">
+          {showHeadings && (
+            <h2 className="select-none px-2 py-0.5 text-xs font-medium text-subtle-foreground">
+              {t(GROUP_LABEL[section.group])}
+            </h2>
+          )}
+          {section.documents.map((doc) => (
+            <DocumentItem
+              key={doc.id}
+              document={doc}
+              onDelete={onDeleteDocument}
+              onSelect={onSelectDocument}
+              onRetry={onRetryDocument}
+              onReindex={onReindexDocument}
+            />
+          ))}
+        </section>
       ))}
     </div>
   )
@@ -114,95 +173,102 @@ function DocumentItem({
   const { t } = useTranslation('ui')
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
 
-  const getTypeIcon = () => {
-    const iconClass = 'w-4 h-4 mt-0.5 text-muted-foreground'
-    switch (document.type) {
-      case 'file':
-        return <FileUp className={iconClass} />
-      case 'url':
-        return <Globe className={iconClass} />
-      case 'note':
-        return <StickyNote className={iconClass} />
-      default:
-        return <FileText className={iconClass} />
-    }
-  }
+  const kind = sourceKindOf(document)
+  const KindIcon = SOURCE_KIND_ICON[kind]
 
   const handleConfirmDelete = () => {
     onDelete(document.id)
   }
 
   return (
-    <div className="group grid grid-cols-[1fr_auto] items-start gap-1 rounded-md transition-colors hover:bg-surface-hover">
-      {/* The row is a real button, not a click handler on a div: it is the primary
-          way into a source, so it must be reachable and activatable by keyboard
-          (#65). The delete control is its sibling rather than a child — a button
-          nested in a button is the same defect the tab strip already fixed. */}
-      <button
-        type="button"
-        onClick={() => onSelect(document)}
-        className="grid min-w-0 cursor-pointer grid-cols-[auto_1fr] select-none items-start gap-2 rounded-md px-2 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-      >
-        {/* 图标列 - 固定宽度 */}
-        {getTypeIcon()}
-
-        {/* 内容列 - 可被压缩 */}
-        <div className="min-w-0 flex flex-col gap-1">
-          <h3 className="text-sm font-medium truncate">{document.title}</h3>
-          <p className="text-xs text-subtle-foreground">{document.chunkCount} chunks</p>
-          {document.status === 'processing' && (
-            <p className="text-xs text-muted-foreground flex items-center gap-1">
-              <Loader2 className="w-3 h-3 animate-spin" />
-              {t('indexing')}
-            </p>
-          )}
-          {/* 失败原因就地显示（#95）：以前是一个 alert，既丢掉了原因也无法重试。 */}
-          {document.status === 'failed' && document.errorMessage && (
-            <p className="text-xs text-destructive truncate" title={document.errorMessage}>
-              {document.errorMessage}
-            </p>
-          )}
-          {/* 来源文件不在了（#158）：citation / 摘录仍然有效，只是文件暂时取不到。 */}
-          {document.sourceState === 'missing' && (
-            <p className="text-xs text-subtle-foreground">{t('sourceMissing')}</p>
-          )}
-        </div>
-      </button>
+    <DropdownMenu>
+      {/* The row reads as a line of text, not as a toolbar: one control lives on
+          it, and that control only appears on hover or focus. Retry and re-index
+          moved into the menu with delete, which is what stopped every row from
+          carrying a permanent column of buttons.
 
-      {/* 操作列 - 固定宽度 */}
-      <div className="mt-2 mr-1 flex flex-col items-center gap-0.5">
-        {document.status === 'failed' && (
+          The row is a real button and the menu trigger is its **sibling**, never
+          its child — a button nested in a button is the defect the tab strip
+          already fixed (#65, and the same rule the note list follows). The 32px
+          trigger is always laid out, so revealing it does not reflow the title. */}
+      <div className="group flex items-start gap-0.5 rounded-md transition-colors hover:bg-surface-hover focus-within:bg-surface-hover">
+        <button
+          type="button"
+          onClick={() => onSelect(document)}
+          className="flex min-w-0 flex-1 cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 text-left select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        >
+          <span className="mt-0.5 shrink-0">
+            <KindIcon className="w-4 h-4 text-muted-foreground" />
+          </span>
+
+          <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <span className="truncate text-sm text-foreground">{document.title}</span>
+            {/* The kind leads the meta line: "202 chunks" alone was the only fact a
+                row carried, and it is machine vocabulary. "PDF · 202 chunks" says
+                what the source is first. */}
+            <span className="truncate text-xs text-subtle-foreground">
+              {t(SOURCE_KIND_LABEL[kind])}
+              <span aria-hidden="true"> · </span>
+              {t('chunks', { count: document.chunkCount ?? 0 })}
+            </span>
+            {document.status === 'processing' && (
+              <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                <Loader2 className="w-3 h-3 animate-spin" />
+                {t('indexing')}
+              </span>
+            )}
+            {/* 失败原因就地显示（#95）：以前是一个 alert，既丢掉了原因也无法重试。 */}
+            {document.status === 'failed' && document.errorMessage && (
+              <span className="truncate text-xs text-destructive" title={document.errorMessage}>
+                {document.errorMessage}
+              </span>
+            )}
+            {/* 来源文件不在了（#158）：citation / 摘录仍然有效，只是文件暂时取不到。 */}
+            {document.sourceState === 'missing' && (
+              <span className="text-xs text-subtle-foreground">{t('sourceMissing')}</span>
+            )}
+          </span>
+        </button>
+
+        <DropdownMenuTrigger asChild>
           <Button
-            onClick={() => onRetry(document.id)}
             variant="ghost"
             size="icon"
-            className="h-7 w-7 text-muted-foreground hover:text-foreground"
-            title={t('retryDocument')}
+            aria-label={t('moreActions')}
+            title={t('moreActions')}
+            className="mt-0.5 mr-0.5 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 text-muted-foreground hover:bg-surface-selected hover:text-foreground data-[state=open]:opacity-100 data-[state=open]:bg-surface-selected"
           >
-            <RotateCcw className="w-3.5 h-3.5" />
+            <MoreHorizontal className="w-4 h-4" />
           </Button>
+        </DropdownMenuTrigger>
+      </div>
+
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem onSelect={() => onSelect(document)}>
+          <FileText className="w-4 h-4 text-muted-foreground" />
+          {t('openSource')}
+        </DropdownMenuItem>
+        {document.status === 'failed' && (
+          <DropdownMenuItem onSelect={() => onRetry(document.id)}>
+            <RotateCcw className="w-4 h-4 text-muted-foreground" />
+            {t('retryDocument')}
+          </DropdownMenuItem>
         )}
         {document.status === 'indexed' && (
-          <Button
-            onClick={() => onReindex(document.id)}
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 text-muted-foreground hover:text-foreground"
-            title={t('reindexDocument')}
-          >
-            <RefreshCw className="w-3.5 h-3.5" />
-          </Button>
+          <DropdownMenuItem onSelect={() => onReindex(document.id)}>
+            <RefreshCw className="w-4 h-4 text-muted-foreground" />
+            {t('reindexDocument')}
+          </DropdownMenuItem>
         )}
-        <Button
-          onClick={() => setIsDeleteDialogOpen(true)}
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 text-destructive hover:bg-destructive/10 hover:text-destructive"
-          title={t('deleteDocument')}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-destructive focus:text-destructive"
+          onSelect={() => setIsDeleteDialogOpen(true)}
         >
           <Trash2 className="w-4 h-4" />
-        </Button>
-      </div>
+          {t('deleteDocument')}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
 
       {/* 删除文档确认对话框 */}
       <ConfirmDialog
@@ -212,6 +278,6 @@ function DocumentItem({
         title={t('deleteDocument')}
         message={t('confirmDeleteDocument')}
       />
-    </div>
+    </DropdownMenu>
   )
 }
diff --git a/src/renderer/src/components/pages/NotebookListPage.tsx b/src/renderer/src/components/pages/NotebookListPage.tsx
index 8487d8e..2ba3c4c 100644
--- a/src/renderer/src/components/pages/NotebookListPage.tsx
+++ b/src/renderer/src/components/pages/NotebookListPage.tsx
@@ -1,4 +1,4 @@
-import { useState, ReactElement } from 'react'
+import { useState, useEffect, useCallback, ReactElement } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import TopNavigationBar from '../common/TopNavigationBar'
@@ -6,6 +6,15 @@ import RenameDialog from '../common/RenameDialog'
 import DeleteConfirmDialog from '../common/DeleteConfirmDialog'
 import Home from '../home/Home'
 import { useNotebookStore } from '../../store/notebookStore'
+import type { WorkspaceOverview } from '../../../../shared/types/workspace'
+import type { SourceAnchor } from '../../../../shared/types/source'
+import { withSourceAnchor } from '../../../../shared/utils/sourceAnchor'
+import {
+  readRecentlyOpened,
+  recordNotebookOpened,
+  writeRecentlyOpened,
+  type RecentlyOpenedNotebook
+} from '../../lib/recentlyOpened'
 
 export default function NotebookListPage(): ReactElement {
   const { t } = useTranslation('ui')
@@ -19,11 +28,42 @@ export default function NotebookListPage(): ReactElement {
     addOpenedNotebook,
     removeOpenedNotebook
   } = useNotebookStore()
+  const [overview, setOverview] = useState<WorkspaceOverview | null>(null)
+  // Read once per mount. Home is unmounted while a notebook is open, so returning to
+  // it re-reads — no subscription to storage is needed to stay current.
+  const [recentlyOpened, setRecentlyOpened] = useState<RecentlyOpenedNotebook[]>(readRecentlyOpened)
   const [renameNotebookId, setRenameNotebookId] = useState<string | null>(null)
   const [renameNotebookTitle, setRenameNotebookTitle] = useState('')
   const [deleteNotebookId, setDeleteNotebookId] = useState<string | null>(null)
   const [deleteNotebookTitle, setDeleteNotebookTitle] = useState('')
 
+  // One read for the whole page: notebook source counts, the newest sources across
+  // every notebook, and the conversation last written to. See WorkspaceOverview.
+  useEffect(() => {
+    let cancelled = false
+    window.api
+      .getWorkspaceOverview()
+      .then((loaded) => {
+        if (!cancelled) setOverview(loaded)
+      })
+      .catch((error) => {
+        // Home degrades to what the notebook store already has; it is not worth
+        // failing the page over a count.
+        console.error('[NotebookListPage] Failed to load workspace overview:', error)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const rememberOpen = useCallback((notebookId: string): void => {
+    setRecentlyOpened((entries) => {
+      const next = recordNotebookOpened(entries, notebookId, Date.now())
+      writeRecentlyOpened(next)
+      return next
+    })
+  }, [])
+
   const handleCreateNotebook = async (): Promise<void> => {
     const newId = await addNotebook({
       title: t('newNotebook', { index: notebooks.length + 1 }),
@@ -32,15 +72,34 @@ export default function NotebookListPage(): ReactElement {
 
     addOpenedNotebook(newId)
     setCurrentNotebook(newId)
+    rememberOpen(newId)
     navigate(`/notebook/${newId}`)
   }
 
   const handleNotebookClick = (id: string): void => {
     addOpenedNotebook(id)
     setCurrentNotebook(id)
+    rememberOpen(id)
     navigate(`/notebook/${id}`)
   }
 
+  /**
+   * A source opened from Home goes to its notebook with the location in the query.
+   *
+   * The query is how it has to travel: `SourcePanel` hydrates the reading anchor from
+   * the URL on mount, and treats a URL without an anchor as "nothing is open". Setting
+   * the store and then navigating would be wiped by that same effect, so the anchor
+   * goes into the route, exactly as a citation does.
+   */
+  const handleOpenSource = (notebookId: string, documentId: string): void => {
+    const anchor: SourceAnchor = { documentId, location: { documentId } }
+    const search = withSourceAnchor(new URLSearchParams(), anchor).toString()
+    addOpenedNotebook(notebookId)
+    setCurrentNotebook(notebookId)
+    rememberOpen(notebookId)
+    navigate(`/notebook/${notebookId}?${search}`)
+  }
+
   const handleOpenDeleteDialog = (id: string): void => {
     const notebook = notebooks.find((nb) => nb.id === id)
     if (notebook) {
@@ -80,16 +139,19 @@ export default function NotebookListPage(): ReactElement {
   }
 
   return (
-    <div className="flex flex-col h-screen bg-surface-base text-foreground">
+    <div className="flex flex-col h-screen bg-surface-sunken text-foreground">
       <TopNavigationBar isHomePage={true} onCreateClick={handleCreateNotebook} />
 
       {/* 主内容区域 - 使用 Home 组件 */}
       <Home
         notebooks={notebooks}
+        overview={overview}
+        recentlyOpened={recentlyOpened}
         onNotebookClick={handleNotebookClick}
         onNotebookDelete={handleOpenDeleteDialog}
         onNotebookRename={handleOpenRenameDialog}
         onCreateNotebook={handleCreateNotebook}
+        onOpenSource={handleOpenSource}
       />
 
       {/* 重命名对话框 */}
diff --git a/src/renderer/src/components/pages/OnboardingPage.tsx b/src/renderer/src/components/pages/OnboardingPage.tsx
index aa0bcc4..73b8c9d 100644
--- a/src/renderer/src/components/pages/OnboardingPage.tsx
+++ b/src/renderer/src/components/pages/OnboardingPage.tsx
@@ -31,7 +31,7 @@ export default function OnboardingPage() {
   const selectedLangName = languages.find((l) => l.code === selectedLanguage)?.name
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-surface-base">
+    <div className="flex items-center justify-center min-h-screen bg-surface-sunken">
       <div className="w-full max-w-md px-6 text-center">
         {/* Logo */}
         <div className="mb-8">
diff --git a/src/renderer/src/components/ui/dropdown-menu.tsx b/src/renderer/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..3dce5c6
--- /dev/null
+++ b/src/renderer/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+
+import { cn } from '@/lib/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[10rem] overflow-hidden rounded-lg border border-border bg-surface-overlay p-1 text-foreground shadow-elevation data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground outline-none focus:bg-surface-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuSeparator
+}
diff --git a/src/renderer/src/lib/recentlyOpened.ts b/src/renderer/src/lib/recentlyOpened.ts
new file mode 100644
index 0000000..098c65c
--- /dev/null
+++ b/src/renderer/src/lib/recentlyOpened.ts
@@ -0,0 +1,108 @@
+/**
+ * What the user actually opened, as opposed to what recently changed.
+ *
+ * `notebooks.updatedAt` answers "what has new content in it", which is what the
+ * Recent shelf shows. It cannot answer "where was I": opening a notebook to read
+ * does not touch a row, and a notebook the user renamed last week outranks the one
+ * they were reading an hour ago. Home needs both facts, and only one of them is in
+ * the database, so this is the other one.
+ *
+ * The record stores **ids and a timestamp, nothing else**. Titles are resolved from
+ * the database at render time, so a rename shows immediately and a deleted notebook
+ * simply drops out of the list instead of leaving a row that points nowhere.
+ *
+ * The pure half is separated from the storage half for the same reason
+ * `panelGeometry.ts` splits them: the parsing and the ordering are the parts that
+ * can be wrong, and they can be asserted without a browser.
+ */
+
+export const STORAGE_KEY = 'knownote:recently-opened'
+
+/** How many notebooks are kept. Home shows a couple; the rest is headroom. */
+export const MAX_RECENT_NOTEBOOKS = 8
+
+export interface RecentlyOpenedNotebook {
+  notebookId: string
+  /** `Date.now()` at the moment it was opened. Only used for ordering. */
+  at: number
+}
+
+/**
+ * Read a stored value, dropping anything that is not a usable entry.
+ *
+ * Defensive per entry rather than all-or-nothing: the value is user-writable,
+ * survives upgrades, and one malformed row must not throw away the entries that
+ * are still good. Entries are re-sorted, because the stored order is a claim this
+ * module makes and must not have to trust.
+ */
+export function parseRecentlyOpened(raw: string | null): RecentlyOpenedNotebook[] {
+  if (!raw) return []
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(raw)
+  } catch {
+    return []
+  }
+  if (!Array.isArray(parsed)) return []
+
+  const entries: RecentlyOpenedNotebook[] = []
+  for (const item of parsed) {
+    if (typeof item !== 'object' || item === null) continue
+    const { notebookId, at } = item as Record<string, unknown>
+    if (typeof notebookId !== 'string' || notebookId.length === 0) continue
+    if (typeof at !== 'number' || !Number.isFinite(at)) continue
+    entries.push({ notebookId, at })
+  }
+
+  return sortAndCap(dedupe(entries))
+}
+
+/**
+ * The list after opening one notebook: most recent first, no duplicates, capped.
+ *
+ * Re-opening moves an entry to the front rather than adding a second one, so a
+ * notebook the user lives in cannot crowd the list.
+ */
+export function recordNotebookOpened(
+  entries: readonly RecentlyOpenedNotebook[],
+  notebookId: string,
+  at: number
+): RecentlyOpenedNotebook[] {
+  const withoutDuplicate = entries.filter((entry) => entry.notebookId !== notebookId)
+  return sortAndCap([{ notebookId, at }, ...withoutDuplicate])
+}
+
+/** Notebook ids, newest first. The order Home renders "Continue" in. */
+export function recentlyOpenedIds(entries: readonly RecentlyOpenedNotebook[]): string[] {
+  return entries.map((entry) => entry.notebookId)
+}
+
+function dedupe(entries: readonly RecentlyOpenedNotebook[]): RecentlyOpenedNotebook[] {
+  const byId = new Map<string, RecentlyOpenedNotebook>()
+  for (const entry of entries) {
+    const existing = byId.get(entry.notebookId)
+    if (!existing || entry.at > existing.at) byId.set(entry.notebookId, entry)
+  }
+  return [...byId.values()]
+}
+
+function sortAndCap(entries: RecentlyOpenedNotebook[]): RecentlyOpenedNotebook[] {
+  return entries.sort((a, b) => b.at - a.at).slice(0, MAX_RECENT_NOTEBOOKS)
+}
+
+export function readRecentlyOpened(): RecentlyOpenedNotebook[] {
+  try {
+    return parseRecentlyOpened(window.localStorage.getItem(STORAGE_KEY))
+  } catch {
+    return []
+  }
+}
+
+export function writeRecentlyOpened(entries: readonly RecentlyOpenedNotebook[]): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(entries))
+  } catch {
+    // Persistence is a convenience; losing it must never break Home.
+  }
+}
diff --git a/src/renderer/src/lib/relativeDate.ts b/src/renderer/src/lib/relativeDate.ts
new file mode 100644
index 0000000..f235a01
--- /dev/null
+++ b/src/renderer/src/lib/relativeDate.ts
@@ -0,0 +1,22 @@
+import type { TFunction } from 'i18next'
+
+/**
+ * "Today" / "Yesterday" / "N days ago" / a local date.
+ *
+ * Lifted out of `NotebookCard` when the notebook header needed the same string on
+ * the same field: two call sites that must not drift into two phrasings, and a
+ * bucket boundary (today / yesterday / this week / absolute) that is easier to
+ * assert than to eyeball.
+ *
+ * `language` arrives separately rather than being read from `i18next` so the
+ * function stays pure and testable.
+ */
+export function formatRelativeDate(date: Date, t: TFunction, language: string): string {
+  const days = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60 * 24))
+
+  if (days <= 0) return t('today')
+  if (days === 1) return t('yesterday')
+  if (days < 7) return t('daysAgo', { days })
+
+  return date.toLocaleDateString(language === 'zh-CN' ? 'zh-CN' : 'en-US')
+}
diff --git a/src/renderer/src/lib/sourceKind.ts b/src/renderer/src/lib/sourceKind.ts
new file mode 100644
index 0000000..627f7a8
--- /dev/null
+++ b/src/renderer/src/lib/sourceKind.ts
@@ -0,0 +1,112 @@
+/**
+ * What a source actually is, for display.
+ *
+ * `KnowledgeDocument.type` is deliberately coarse — `file | url | note | text` —
+ * because that is all the ingestion path needs to know. A reader needs more: "PDF"
+ * and "Word" are different facts about a source, and the library row is where that
+ * is visible. This derives the finer kind once, from the fields the ingestion path
+ * already stores, so the icon and the label cannot disagree with each other or
+ * with the reader's own format check.
+ *
+ * Kept pure and free of React so it can be asserted directly (see
+ * `test/sourceKind.test.ts`): `mimeType` is nullable, stored paths are Windows or
+ * POSIX, and a `url` is whatever the user pasted.
+ */
+export type SourceKind =
+  'pdf' | 'docx' | 'pptx' | 'markdown' | 'text' | 'file' | 'web' | 'youtube' | 'note'
+
+/** The i18n key for a kind's short label ("PDF", "Word", "Web"). */
+export const SOURCE_KIND_LABEL: Record<SourceKind, string> = {
+  pdf: 'sourceKindPdf',
+  docx: 'sourceKindDocx',
+  pptx: 'sourceKindPptx',
+  markdown: 'sourceKindMarkdown',
+  text: 'sourceKindText',
+  file: 'sourceKindFile',
+  web: 'sourceKindWeb',
+  youtube: 'sourceKindYoutube',
+  note: 'notes'
+}
+
+const MIME_KINDS: Record<string, SourceKind> = {
+  'application/pdf': 'pdf',
+  'application/msword': 'docx',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+  'application/vnd.ms-powerpoint': 'pptx',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+  'text/markdown': 'markdown',
+  'text/html': 'web'
+}
+
+/**
+ * A `txt` file is the same fact as pasted text, so it resolves to `text` rather
+ * than carrying a kind of its own. An extension that is not in here is `file`:
+ * "we do not know" is a real answer, and guessing `text` would be a wrong one.
+ */
+const EXTENSION_KINDS: Record<string, SourceKind> = {
+  pdf: 'pdf',
+  doc: 'docx',
+  docx: 'docx',
+  ppt: 'pptx',
+  pptx: 'pptx',
+  md: 'markdown',
+  markdown: 'markdown',
+  txt: 'text',
+  html: 'web',
+  htm: 'web'
+}
+
+/** Lowercased extension of a stored path, without query or fragment. */
+function extensionOf(path: string): string {
+  const withoutQuery = path.split(/[?#]/)[0]
+  const lastSegment = withoutQuery.split(/[\\/]/).pop() ?? ''
+  const dot = lastSegment.lastIndexOf('.')
+  return dot === -1 ? '' : lastSegment.slice(dot + 1).toLowerCase()
+}
+
+function isYoutubeHost(hostname: string): boolean {
+  const host = hostname.toLowerCase()
+  return (
+    host === 'youtube.com' ||
+    host.endsWith('.youtube.com') ||
+    host === 'youtu.be' ||
+    host.endsWith('.youtu.be')
+  )
+}
+
+/**
+ * The fields `sourceKindOf` reads, and only those.
+ *
+ * Structural rather than `KnowledgeDocument`: the library row has a whole row, but
+ * Home renders `WorkspaceOverviewDocument`, which deliberately carries only the
+ * wire subset. Demanding the full row here meant the two call sites could not share
+ * one derivation. `type` is `string`, not the enum, because the value comes out of
+ * SQLite and an unknown value must fall through rather than be asserted away.
+ */
+export interface SourceKindInput {
+  type: string
+  mimeType?: string | null
+  sourceUri?: string | null
+  localFilePath?: string | null
+}
+
+export function sourceKindOf(document: SourceKindInput): SourceKind {
+  if (document.type === 'note') return 'note'
+  if (document.type === 'text') return 'text'
+
+  if (document.type === 'url') {
+    const raw = document.sourceUri ?? ''
+    try {
+      return isYoutubeHost(new URL(raw).hostname) ? 'youtube' : 'web'
+    } catch {
+      // A URL the browser cannot parse is still a web source; it is not a video.
+      return 'web'
+    }
+  }
+
+  const byMime = document.mimeType ? MIME_KINDS[document.mimeType] : undefined
+  if (byMime) return byMime
+
+  const path = document.localFilePath ?? document.sourceUri ?? ''
+  return EXTENSION_KINDS[extensionOf(path)] ?? 'file'
+}
diff --git a/src/renderer/src/locales/en-US/ui.json b/src/renderer/src/locales/en-US/ui.json
index 2d98609..2574697 100644
--- a/src/renderer/src/locales/en-US/ui.json
+++ b/src/renderer/src/locales/en-US/ui.json
@@ -6,25 +6,50 @@
   "noMessages": "Type below to begin",
   "closeTab": "Close Tab",
   "settings": "Settings",
-  "myNotebooks": "My Notebooks",
-  "totalNotebooks": "{{count}} notebooks in total",
   "noNotebooks": "No notebooks yet",
   "noNotebooksDesc": "Create your first notebook to record your thoughts and ideas",
   "createFirstNotebook": "Create First Notebook",
   "newNotebook": "New Notebook {{index}}",
   "notebookDescription": "Start your note-taking journey",
+  "goodMorning": "Good morning",
+  "goodAfternoon": "Good afternoon",
+  "goodEvening": "Good evening",
+  "homePrompt": "What are you learning today?",
+  "searchPlaceholder": "Search sources",
+  "searchResults": "Search results",
+  "searchNoResults": "No matches.",
+  "notebook": "Notebook",
+  "recentNotebooks": "Recent notebooks",
+  "allNotebooks": "All notebooks",
+  "showAll": "Show all ({{count}})",
+  "showRecent": "Show recent",
+  "newNotebookAction": "New notebook",
+  "continueSection": "Continue",
+  "recentlyAdded": "Recently added",
+  "sourceCount": "{{count}} sources",
   "renameNotebook": "Rename Notebook",
   "deleteNotebook": "Delete Notebook",
   "today": "Today",
   "yesterday": "Yesterday",
   "daysAgo": "{{days}} days ago",
   "clickToEditTitle": "Click to edit title",
-  "selectOrCreateNotebook": "Select or create a notebook",
   "selectSession": "Please select a session first",
   "noProviderConfigured": "No chat model configured, please configure one in settings",
   "inputMessage": "Type a message... (Shift+Enter for new line)",
   "library": "Library",
   "notes": "Notes",
+  "files": "Documents",
+  "webPages": "Web pages",
+  "sourceKindPdf": "PDF",
+  "sourceKindDocx": "Word",
+  "sourceKindPptx": "Slides",
+  "sourceKindMarkdown": "Markdown",
+  "sourceKindText": "Text",
+  "sourceKindFile": "File",
+  "sourceKindWeb": "Web",
+  "sourceKindYoutube": "YouTube",
+  "moreActions": "More actions",
+  "openSource": "Open source",
   "collapseLibrary": "Collapse library",
   "expandLibrary": "Expand library",
   "resizeLibrary": "Resize the library panel. Use the arrow keys, Shift for a larger step, Home or End for the limits.",
@@ -40,7 +65,6 @@
   "importNote": "Import Note",
   "noDocuments": "No Documents",
   "noDocumentsDesc": "Add a document to ask questions about it",
-  "documents": "{{count}} documents",
   "chunks": "{{count}} chunks",
   "indexing": "Indexing...",
   "indexed": "Indexed",
@@ -92,9 +116,7 @@
   "importAdded": "Imported {{count}}",
   "importSkipped": "skipped {{count}} (already imported)",
   "importFailedCount": "failed {{count}}",
-  "searchPlaceholder": "Search sources",
   "searchHint": "Find exact text or a related passage. Ctrl/Cmd+K toggles this palette.",
-  "searchNoResults": "No matches.",
   "searchMatchingText": "Matching text",
   "searchRelatedPassages": "Related passages",
   "searchPage": "p. {{page}}"
diff --git a/src/renderer/src/locales/zh-CN/ui.json b/src/renderer/src/locales/zh-CN/ui.json
index 656a6ed..3f9aa07 100644
--- a/src/renderer/src/locales/zh-CN/ui.json
+++ b/src/renderer/src/locales/zh-CN/ui.json
@@ -5,25 +5,50 @@
   "jumpToLatest": "回到底部",
   "closeTab": "关闭标签",
   "settings": "设置",
-  "myNotebooks": "我的笔记本",
-  "totalNotebooks": "共 {{count}} 个笔记本",
   "noNotebooks": "还没有笔记本",
   "noNotebooksDesc": "开始创建你的第一个笔记本，记录你的想法和灵感",
   "createFirstNotebook": "创建第一个笔记本",
   "newNotebook": "新笔记本 {{index}}",
   "notebookDescription": "开始你的笔记之旅",
+  "goodMorning": "早上好",
+  "goodAfternoon": "下午好",
+  "goodEvening": "晚上好",
+  "homePrompt": "今天想学点什么？",
+  "searchPlaceholder": "搜索来源",
+  "searchResults": "搜索结果",
+  "searchNoResults": "没有匹配结果。",
+  "notebook": "笔记本",
+  "recentNotebooks": "最近的笔记本",
+  "allNotebooks": "全部笔记本",
+  "showAll": "显示全部（{{count}}）",
+  "showRecent": "只看最近",
+  "newNotebookAction": "新建笔记本",
+  "continueSection": "继续",
+  "recentlyAdded": "最近添加",
+  "sourceCount": "{{count}} 个来源",
   "renameNotebook": "重命名笔记本",
   "deleteNotebook": "删除笔记本",
   "today": "今天",
   "yesterday": "昨天",
   "daysAgo": "{{days}} 天前",
   "clickToEditTitle": "点击编辑标题",
-  "selectOrCreateNotebook": "请选择或创建笔记本",
   "selectSession": "请先选择会话",
   "noProviderConfigured": "未配置对话模型，请在设置中配置",
   "inputMessage": "输入消息... (Shift+Enter 换行)",
   "library": "资料库",
   "notes": "笔记",
+  "files": "文档",
+  "webPages": "网页",
+  "sourceKindPdf": "PDF",
+  "sourceKindDocx": "Word",
+  "sourceKindPptx": "幻灯片",
+  "sourceKindMarkdown": "Markdown",
+  "sourceKindText": "文本",
+  "sourceKindFile": "文件",
+  "sourceKindWeb": "网页",
+  "sourceKindYoutube": "YouTube",
+  "moreActions": "更多操作",
+  "openSource": "打开来源",
   "collapseLibrary": "折叠资料库",
   "expandLibrary": "展开资料库",
   "resizeLibrary": "调整资料库宽度。用方向键移动，按住 Shift 步长更大，Home / End 到两端。",
@@ -39,7 +64,6 @@
   "importNote": "导入笔记",
   "noDocuments": "暂无文档",
   "noDocumentsDesc": "添加文档，就可以针对它提问",
-  "documents": "{{count}} 个文档",
   "chunks": "{{count}} 个片段",
   "indexing": "索引中...",
   "indexed": "已索引",
@@ -92,9 +116,7 @@
   "importAdded": "已导入 {{count}} 个",
   "importSkipped": "跳过 {{count}} 个（已存在）",
   "importFailedCount": "失败 {{count}} 个",
-  "searchPlaceholder": "搜索来源",
   "searchHint": "查找精确文本或相关段落。Ctrl/Cmd+K 开关此面板。",
-  "searchNoResults": "没有匹配结果。",
   "searchMatchingText": "匹配的文本",
   "searchRelatedPassages": "相关段落",
   "searchPage": "第 {{page}} 页"
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index 81c95ec..a37f78e 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -30,6 +30,9 @@ export * from './connection'
 // 导出 Embedding 类型
 export * from './embedding'
 
+// 导出 Workspace 概览类型（首页一次读全量，见 WorkspaceOverview）
+export * from './workspace'
+
 /**
  * 笔记本接口
  * 与 Drizzle schema 推导的类型兼容
diff --git a/src/shared/types/workspace.ts b/src/shared/types/workspace.ts
new file mode 100644
index 0000000..41e3720
--- /dev/null
+++ b/src/shared/types/workspace.ts
@@ -0,0 +1,56 @@
+import type { Notebook as DBNotebook } from '../../main/db/schema'
+
+/**
+ * The Home page's single read (#65).
+ *
+ * Home needs three things at once: recent notebooks with how much is in them, the
+ * newest sources across the whole library, and the conversation the user was last
+ * in. Asking for those separately would be one IPC per notebook (`getStats`) plus
+ * one per notebook (`getDocuments`) on every mount — an N+1 fan-out that gets worse
+ * as the library grows, for a page that is opened constantly.
+ *
+ * So it is one call, three statements, bounded by `limit`s. Nothing here is derived
+ * from anything the renderer already holds, and nothing is computed in SQL that a
+ * reader would have to re-derive: the counts are counts, and the ordering is the
+ * ordering the page displays.
+ */
+export interface WorkspaceOverview {
+  /** Every notebook, most recently updated first, each with its source count. */
+  notebooks: WorkspaceOverviewNotebook[]
+  /** The newest sources in the library, across all notebooks. */
+  recentDocuments: WorkspaceOverviewDocument[]
+  /** The most recently touched active conversations, across all notebooks. */
+  recentSessions: WorkspaceOverviewSession[]
+}
+
+export interface WorkspaceOverviewNotebook extends DBNotebook {
+  /** How many sources are in it. Counted, not guessed from a list the caller has. */
+  sourceCount: number
+}
+
+/**
+ * Only the fields a Home row renders. Deliberately not the whole `documents` row:
+ * that carries `content`, `structure` and `contentHash`, none of which a list of
+ * filenames has any use for, and shipping them over IPC is how a 20-item list turns
+ * into megabytes.
+ */
+export interface WorkspaceOverviewDocument {
+  id: string
+  notebookId: string
+  /** Resolved in the same query, so the row does not need a second lookup. */
+  notebookTitle: string
+  title: string
+  type: string
+  mimeType: string | null
+  sourceUri: string | null
+  localFilePath: string | null
+  createdAt: Date
+}
+
+export interface WorkspaceOverviewSession {
+  id: string
+  notebookId: string
+  notebookTitle: string
+  title: string
+  updatedAt: Date
+}
diff --git a/test/recentlyOpened.test.ts b/test/recentlyOpened.test.ts
new file mode 100644
index 0000000..f4ebf9f
--- /dev/null
+++ b/test/recentlyOpened.test.ts
@@ -0,0 +1,90 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import {
+  MAX_RECENT_NOTEBOOKS,
+  parseRecentlyOpened,
+  recentlyOpenedIds,
+  recordNotebookOpened,
+  type RecentlyOpenedNotebook
+} from '../src/renderer/src/lib/recentlyOpened.ts'
+
+/**
+ * This record is the only place "where was I" is stored, and it is read back from
+ * `localStorage`, which any earlier version of the app — or the user — could have
+ * written. The parsing is therefore asserted per entry, not just on the happy path.
+ */
+
+const entry = (notebookId: string, at: number): RecentlyOpenedNotebook => ({ notebookId, at })
+
+test('nothing stored reads as an empty list', () => {
+  assert.deepEqual(parseRecentlyOpened(null), [])
+  assert.deepEqual(parseRecentlyOpened(''), [])
+})
+
+test('a corrupt or non-array value reads as an empty list instead of throwing', () => {
+  assert.deepEqual(parseRecentlyOpened('{'), [])
+  assert.deepEqual(parseRecentlyOpened('"a string"'), [])
+  assert.deepEqual(parseRecentlyOpened('{"notebookId":"a","at":1}'), [])
+  assert.deepEqual(parseRecentlyOpened('42'), [])
+})
+
+test('one malformed entry does not discard the good ones', () => {
+  const raw = JSON.stringify([
+    { notebookId: 'keep', at: 10 },
+    { notebookId: '', at: 20 },
+    { notebookId: 'no-timestamp' },
+    { at: 30 },
+    null,
+    'nope',
+    { notebookId: 'keep2', at: 'not a number' },
+    { notebookId: 'keep3', at: 5 }
+  ])
+  assert.deepEqual(recentlyOpenedIds(parseRecentlyOpened(raw)), ['keep', 'keep3'])
+})
+
+test('NaN and Infinity timestamps are rejected: they cannot be ordered', () => {
+  const raw = JSON.stringify([
+    { notebookId: 'nan', at: Number.NaN },
+    { notebookId: 'inf', at: Number.POSITIVE_INFINITY },
+    { notebookId: 'ok', at: 1 }
+  ])
+  assert.deepEqual(recentlyOpenedIds(parseRecentlyOpened(raw)), ['ok'])
+})
+
+test('the stored order is not trusted: entries come back newest first', () => {
+  const raw = JSON.stringify([entry('old', 1), entry('new', 3), entry('mid', 2)])
+  assert.deepEqual(recentlyOpenedIds(parseRecentlyOpened(raw)), ['new', 'mid', 'old'])
+})
+
+test('a duplicate id keeps its newest timestamp and appears once', () => {
+  const raw = JSON.stringify([entry('a', 1), entry('b', 2), entry('a', 9)])
+  assert.deepEqual(parseRecentlyOpened(raw), [entry('a', 9), entry('b', 2)])
+})
+
+test('opening a notebook puts it first without duplicating it', () => {
+  const before = [entry('a', 30), entry('b', 20), entry('c', 10)]
+  const after = recordNotebookOpened(before, 'c', 40)
+  assert.deepEqual(recentlyOpenedIds(after), ['c', 'a', 'b'])
+})
+
+test('opening a notebook that is not in the list adds it at the front', () => {
+  const after = recordNotebookOpened([entry('a', 30)], 'fresh', 40)
+  assert.deepEqual(recentlyOpenedIds(after), ['fresh', 'a'])
+})
+
+test('the list is capped, and it is the oldest that falls off', () => {
+  let entries: RecentlyOpenedNotebook[] = []
+  for (let i = 0; i < MAX_RECENT_NOTEBOOKS + 5; i += 1) {
+    entries = recordNotebookOpened(entries, `nb-${i}`, i)
+  }
+  assert.equal(entries.length, MAX_RECENT_NOTEBOOKS)
+  assert.equal(entries[0].notebookId, `nb-${MAX_RECENT_NOTEBOOKS + 4}`)
+  assert.ok(!recentlyOpenedIds(entries).includes('nb-0'))
+})
+
+test('recording is pure: it does not mutate the list it was given', () => {
+  const before = [entry('a', 1)]
+  const snapshot = structuredClone(before)
+  recordNotebookOpened(before, 'b', 2)
+  assert.deepEqual(before, snapshot)
+})
diff --git a/test/sourceKind.test.ts b/test/sourceKind.test.ts
new file mode 100644
index 0000000..61afe6a
--- /dev/null
+++ b/test/sourceKind.test.ts
@@ -0,0 +1,130 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { sourceKindOf, SOURCE_KIND_LABEL } from '../src/renderer/src/lib/sourceKind.ts'
+import type { KnowledgeDocument } from '../src/shared/types/knowledge.ts'
+
+/**
+ * `sourceKindOf` decides which icon and which word a library row shows, and it
+ * reads fields the ingestion path fills from several different loaders. That makes
+ * it worth pinning: `mimeType` is nullable, paths are Windows or POSIX, and a
+ * `url` is whatever the user pasted.
+ */
+
+const doc = (over: Partial<KnowledgeDocument> = {}): KnowledgeDocument =>
+  ({
+    id: 'd1',
+    notebookId: 'n1',
+    title: 'Untitled',
+    type: 'file',
+    sourceUri: null,
+    localFilePath: null,
+    mimeType: null,
+    ...over
+  }) as KnowledgeDocument
+
+test('the type enum wins over the mime type for notes and pasted text', () => {
+  assert.equal(sourceKindOf(doc({ type: 'note', mimeType: 'application/pdf' })), 'note')
+  assert.equal(sourceKindOf(doc({ type: 'text', mimeType: 'application/pdf' })), 'text')
+})
+
+test('a file is read from its mime type first', () => {
+  assert.equal(sourceKindOf(doc({ mimeType: 'application/pdf' })), 'pdf')
+  assert.equal(sourceKindOf(doc({ mimeType: 'text/markdown' })), 'markdown')
+  assert.equal(
+    sourceKindOf(
+      doc({
+        mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+      })
+    ),
+    'pptx'
+  )
+  assert.equal(
+    sourceKindOf(
+      doc({ mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
+    ),
+    'docx'
+  )
+  assert.equal(sourceKindOf(doc({ mimeType: 'application/msword' })), 'docx')
+  assert.equal(sourceKindOf(doc({ mimeType: 'application/vnd.ms-powerpoint' })), 'pptx')
+})
+
+test('a missing mime type falls back to the extension, in either path style', () => {
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/paper.pdf' })), 'pdf')
+  assert.equal(sourceKindOf(doc({ sourceUri: '/tmp/paper.pdf' })), 'pdf')
+  assert.equal(sourceKindOf(doc({ localFilePath: 'C:\\Users\\me\\paper.PDF' })), 'pdf')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/notes.md' })), 'markdown')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/notes.markdown' })), 'markdown')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/deck.ppt' })), 'pptx')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/letter.doc' })), 'docx')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/plain.txt' })), 'text')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/page.html' })), 'web')
+})
+
+test('a local file path is preferred over the source uri when both are set', () => {
+  assert.equal(
+    sourceKindOf(doc({ localFilePath: '/tmp/copy.pdf', sourceUri: 'https://example.com/x' })),
+    'pdf'
+  )
+})
+
+test('an extensionless or unknown file is "file", not a guessed "text"', () => {
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/README' })), 'file')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/data.parquet' })), 'file')
+  assert.equal(sourceKindOf(doc()), 'file')
+})
+
+test('a file name is not mistaken for its directory, and a query is not the extension', () => {
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/v1.2/report' })), 'file')
+  assert.equal(sourceKindOf(doc({ localFilePath: '/tmp/report?download=.pdf' })), 'file')
+})
+
+test('a url is a youtube source only on a youtube host', () => {
+  assert.equal(
+    sourceKindOf(doc({ type: 'url', sourceUri: 'https://youtube.com/watch?v=1' })),
+    'youtube'
+  )
+  assert.equal(
+    sourceKindOf(doc({ type: 'url', sourceUri: 'https://www.youtube.com/watch?v=1' })),
+    'youtube'
+  )
+  assert.equal(
+    sourceKindOf(doc({ type: 'url', sourceUri: 'https://m.youtube.com/watch?v=1' })),
+    'youtube'
+  )
+  assert.equal(sourceKindOf(doc({ type: 'url', sourceUri: 'https://youtu.be/abc123' })), 'youtube')
+})
+
+test('a lookalike host is not youtube', () => {
+  assert.equal(sourceKindOf(doc({ type: 'url', sourceUri: 'https://notyoutube.com/x' })), 'web')
+  assert.equal(
+    sourceKindOf(doc({ type: 'url', sourceUri: 'https://youtube.com.evil.test/x' })),
+    'web'
+  )
+  assert.equal(
+    sourceKindOf(doc({ type: 'url', sourceUri: 'https://example.com/paper.pdf' })),
+    'web'
+  )
+})
+
+test('an unparseable or absent url is still a web source, never a video', () => {
+  assert.equal(sourceKindOf(doc({ type: 'url', sourceUri: 'not a url' })), 'web')
+  assert.equal(sourceKindOf(doc({ type: 'url' })), 'web')
+})
+
+test('every kind maps to a label key', () => {
+  const kinds = [
+    'pdf',
+    'docx',
+    'pptx',
+    'markdown',
+    'text',
+    'file',
+    'web',
+    'youtube',
+    'note'
+  ] as const
+  for (const kind of kinds) {
+    assert.equal(typeof SOURCE_KIND_LABEL[kind], 'string')
+    assert.ok(SOURCE_KIND_LABEL[kind].length > 0)
+  }
+})