pmx-canvas 0.8.2 → 0.9.1

package/src/client/canvas/HomeView.tsx

@@ -1,20 +1,34 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import type { ComponentChildren } from 'preact';
+import { timeAgo } from '../utils/time-ago';
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { isSelectionEscape } from '../utils/keyboard';
 import {
   boardList,
   activeBoardId,
   createAndOpenBoard,
   deleteBoard,
   openBoard,
+  openMemoryTarget,
+  setBoardPinned,
   updateBoard,
   type BoardSummary,
 } from '../state/boards-store';
-import { categoryAncestors, MIGRATED_SNAPSHOT_CATEGORY } from '../../shared/boards.js';
+import { folderAncestors, MIGRATED_SNAPSHOT_FOLDER, normalizeBoardFolder } from '../../shared/boards.js';
 import { askText } from './TextPrompt';
 import { BoardFolderDialog } from './BoardFolderDialog';
 import { requestJson } from '../state/intent-bridge';
-import { focusNode, nodes } from '../state/canvas-store';
+import { approxTokens } from '../state/context-chip-store';
 import { BoardCopyDialog } from './BoardCopyDialog';
+import { BoardPinButton } from './BoardPinButton';
+import { HomeMapView } from './HomeMapView';
+import { HomeGraphView } from './HomeGraphView';
+import { HomeReviewView } from './HomeReviewView';
+import { KnowledgeDialog } from './KnowledgeDialog';
+import { RelationPresetsDialog } from './RelationPresetsDialog';
+import { knowledge, lifecycleFilter } from '../state/knowledge-store';
+import { knowledgeLifecycleEnabled } from '../state/workspace-settings';
+import { lifecycleUiGeneration } from '../state/boards-store';
+import type { LifecycleQualification } from '../../shared/lifecycle-status.js';
+import { IconChevronDown, IconChevronRight, IconMore, IconPin, IconSearch } from '../icons';
 
 interface LibraryHit {
   boardId: string;
@@ -22,32 +36,32 @@ interface LibraryHit {
   cardId: string;
   title: string | null;
   snippet: string;
+  qualification?: LifecycleQualification;
 }
 
-function timeAgo(iso: string | null): string {
+function openedAgo(iso: string | null): string {
   if (!iso) return 'never opened';
-  const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
-  if (mins < 1) return 'just now';
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  if (days < 30) return `${days}d ago`;
-  return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  const days = (Date.now() - new Date(iso).getTime()) / 86_400_000;
+  if (days >= 30)
+    return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  return timeAgo(iso);
 }
 
-function nodesLabel(count: number): string {
-  return `${count} node${count !== 1 ? 's' : ''}`;
+const plural = (count: number, word: string) => `${count} ${word}${count === 1 ? '' : 's'}`;
+
+/** Board-to-board links in either direction: the "↔ N links" a card shows. */
+function linkCount(board: BoardSummary): number {
+  return (board.links?.length ?? 0) + (board.backlinks?.length ?? 0);
 }
 
-export async function promptNewBoard(): Promise<void> {
+export async function promptNewBoard(folder?: string | null): Promise<void> {
   const name = await askText('New board', 'Board name', { confirm: 'Create' });
-  if (name) await createAndOpenBoard(name);
+  if (name) await createAndOpenBoard(name, folder);
 }
 
 const COLLAPSED_KEY = 'pmx-canvas-home-collapsed';
 
-/** Which categories this viewer folded away; the migrated-snapshot shelf starts folded. */
+/** Which folders this viewer folded away in the tree; the migrated-snapshot shelf starts folded. */
 function readCollapsed(): Set<string> {
   try {
     const raw = localStorage.getItem(COLLAPSED_KEY);
@@ -55,7 +69,7 @@ function readCollapsed(): Set<string> {
   } catch {
     // Storage can be unavailable (private windows, embedded panes): fall back to the default.
   }
-  return new Set([MIGRATED_SNAPSHOT_CATEGORY]);
+  return new Set([MIGRATED_SNAPSHOT_FOLDER]);
 }
 
 function writeCollapsed(collapsed: Set<string>): void {
@@ -66,30 +80,117 @@ function writeCollapsed(collapsed: Set<string>): void {
   }
 }
 
+const inFolder = (board: BoardSummary, path: string) => board.folder === path || !!board.folder?.startsWith(`${path}/`);
+
+const leaf = (path: string) => path.split('/').at(-1) ?? path;
+
+/** A board's layout in miniature: its cards as rectangles, pinned ones in pin blue. */
+function BoardThumbnail({ board }: { board: BoardSummary }) {
+  return (
+    <div class="home-thumb" aria-hidden="true">
+      <div class="home-thumb-inner">
+        {(board.preview ?? []).map((rect, index) => (
+          <span
+            key={index}
+            class={`home-thumb-card${rect.pinned ? ' is-pinned' : ''}`}
+            style={{
+              left: `${rect.x * 100}%`,
+              top: `${rect.y * 100}%`,
+              width: `${rect.w * 100}%`,
+              height: `${rect.h * 100}%`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 /**
- * Home (plan 012): the view when no board is open — every board, filed under
- * its category (most recently opened first within each). Categories keep the
- * library findable as it grows into the working memory of many sessions.
- * Deleting asks in place, naming the board and what it holds; browser confirm
- * dialogs are no-ops in agent panes.
+ * Home (docs/design/Home.dc.html, plan 016): the library when no board is
+ * open. A folder tree with pinned boards on the left, the selected folder's
+ * subfolders and board cards in the middle, the selected board's details on
+ * the right. At ≤ 760 px (Pane600.dc.html) the tree becomes a folder picker,
+ * the boards a list and the details a bottom sheet. Folders are board
+ * folder paths; folders carry no colour (decided 2026-10-07). Browser
+ * confirm dialogs are no-ops in agent panes, so Delete asks in place.
  */
 export function HomeView() {
   const boards = boardList.value;
-  const [confirmingDelete, setConfirmingDelete] = useState<string | null>(null);
+  const enabled = knowledgeLifecycleEnabled.value;
+  const [selectedView, setView] = useState<'Folders' | 'Map' | 'Graph' | 'Review'>('Folders');
+  const view = !enabled && selectedView === 'Review' ? 'Folders' : selectedView;
+  const [folder, setFolder] = useState<string>(() => {
+    const recent = [...boardList.value].sort((a, b) => (b.lastOpenedAt ?? '').localeCompare(a.lastOpenedAt ?? ''))[0];
+    return recent?.folder ?? '';
+  });
+  const [extraFolders, setExtraFolders] = useState<string[]>([]);
+  const [knowledgeDialog, setKnowledgeDialog] = useState<string | null>(null);
+  const [relationPresetsOpen, setRelationPresetsOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
   const [moving, setMoving] = useState<string | null>(null);
   const [copying, setCopying] = useState<string | null>(null);
   const [search, setSearch] = useState('');
   const [hits, setHits] = useState<LibraryHit[]>([]);
   const [collapsed, setCollapsed] = useState<Set<string>>(readCollapsed);
-  const openHitSequence = useRef(0);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pinsOpen, setPinsOpen] = useState(false);
+  const moreButton = useRef<HTMLButtonElement>(null);
+  const moreMenu = useRef<HTMLSpanElement>(null);
+
   const folders = [
-    ...new Set(boards.flatMap((board) => (board.category ? categoryAncestors(board.category) : []))),
+    ...new Set([
+      ...boards.flatMap((board) => (board.folder ? folderAncestors(board.folder) : [])),
+      ...(knowledge.value?.folders ?? []).flatMap((item) => folderAncestors(item.path)),
+      ...extraFolders.flatMap(folderAncestors),
+    ]),
   ].sort((a, b) => a.localeCompare(b));
+  const childrenOf = (path: string) =>
+    folders.filter((candidate) =>
+      path
+        ? candidate.startsWith(`${path}/`) && !candidate.slice(path.length + 1).includes('/')
+        : !candidate.includes('/'),
+    );
   const query = search.trim().toLocaleLowerCase();
-  const visible = boards.filter((board) => `${board.name} ${board.category ?? ''}`.toLocaleLowerCase().includes(query));
-  const visibleFolders = new Set(visible.flatMap((board) => (board.category ? categoryAncestors(board.category) : [])));
+  const pinned = boards.filter((board) => board.pin);
+  const pinnedChars = pinned.reduce((sum, board) => sum + (board.mapChars ?? 0), 0);
+  const subfolders = childrenOf(folder);
+  const here = boards
+    .filter((board) => (board.folder ?? '') === folder)
+    .sort((a, b) => (b.lastOpenedAt ?? '').localeCompare(a.lastOpenedAt ?? ''));
+  const matches = query
+    ? boards.filter((board) => `${board.name} ${board.folder ?? ''}`.toLocaleLowerCase().includes(query))
+    : [];
+  const selected = boards.find((board) => board.id === selectedId) ?? null;
   const movingBoard = boards.find((board) => board.id === moving);
   const copyingBoard = boards.find((board) => board.id === copying);
+  const reviewBoardIds = new Set(boards.filter((board) => !folder || inFolder(board, folder)).map((board) => board.id));
+  const reviewCards = Object.entries(knowledge.value?.cards ?? {})
+    .filter(([key]) => reviewBoardIds.has((JSON.parse(key) as [string, string])[0]))
+    .map(([, status]) => status);
+  const reviewNeeded = reviewCards.filter((status) => !status.retired && (status.due || status.sources.length)).length;
+  const withoutPolicy = reviewCards.filter((status) => status.unknown).length;
+  const folderCategory = knowledge.value?.resolvedFolders[folder]?.category;
+  const reviewTargets = new Map<string, string[]>();
+  for (const [key, status] of Object.entries(knowledge.value?.cards ?? {})) {
+    if (status.retired || !(status.due || status.sources.length)) continue;
+    const [boardId, nodeId] = JSON.parse(key) as [string, string];
+    const targets = reviewTargets.get(boardId) ?? [];
+    targets.push(nodeId);
+    reviewTargets.set(boardId, targets);
+  }
+  const shown = query ? matches : here;
+  const reviewBoard = async (id: string) => {
+    if (!knowledgeLifecycleEnabled.value) return;
+    const generation = lifecycleUiGeneration;
+    const cardId = reviewTargets.get(id)?.[0];
+    if (!cardId) return;
+    const opened = await openMemoryTarget({ boardId: id, cardId });
+    if (opened && knowledgeLifecycleEnabled.value && generation === lifecycleUiGeneration && activeBoardId.value === id)
+      lifecycleFilter.value = 'To review';
+  };
 
   useEffect(() => {
     const q = search.trim();
@@ -113,165 +214,591 @@ export function HomeView() {
     };
   }, [search]);
 
-  const openHit = async (hit: LibraryHit) => {
-    const sequence = ++openHitSequence.current;
-    await openBoard(hit.boardId);
-    for (let attempt = 0; attempt < 40; attempt++) {
-      if (sequence !== openHitSequence.current || activeBoardId.value !== hit.boardId) return;
-      if (nodes.value.has(hit.cardId)) {
-        focusNode(hit.cardId);
-        return;
-      }
-      await new Promise((resolve) => window.setTimeout(resolve, 25));
-    }
-  };
+  // The ⋯ menu takes focus on its first item when it opens.
+  useEffect(() => {
+    if (menuOpen) moreMenu.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
+  }, [menuOpen]);
 
-  const toggle = (name: string) => {
+  // A selection that left this folder (moved, deleted) closes the details.
+  useEffect(() => {
+    if (selectedId && !boards.some((board) => board.id === selectedId)) setSelectedId(null);
+  }, [boards, selectedId]);
+
+  useLayoutEffect(() => {
+    if (view !== 'Folders' || !selectedId) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (!isSelectionEscape(event)) return;
+      event.preventDefault();
+      setSelectedId(null);
+      setConfirmingDelete(false);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [view, selectedId]);
+
+  const openHit = (hit: LibraryHit) => openMemoryTarget(hit);
+
+  const toggle = (path: string) => {
     const next = new Set(collapsed);
-    if (next.has(name)) next.delete(name);
-    else next.add(name);
+    if (next.has(path)) next.delete(path);
+    else next.add(path);
     setCollapsed(next);
     writeCollapsed(next);
   };
 
+  const goTo = (path: string) => {
+    setFolder(path);
+    setSearch('');
+    setSelectedId(null);
+    setPickerOpen(false);
+  };
+
+  const select = (id: string | null) => {
+    setSelectedId(id);
+    setMenuOpen(false);
+    setConfirmingDelete(false);
+  };
+
+  const newFolder = async () => {
+    const name = await askText('New folder', 'Folder name', { confirm: 'Create' });
+    if (!name) return;
+    let path: string | null;
+    try {
+      path = normalizeBoardFolder(folder ? `${folder}/${name}` : name);
+    } catch {
+      return;
+    }
+    if (!path) return;
+    // A folder exists once a board is filed in it; until then it lives in this view.
+    setExtraFolders((list) => [...list, path]);
+    goTo(path);
+  };
+
   const rename = async (board: BoardSummary) => {
     const name = await askText('Rename board', 'Board name', { initial: board.name, confirm: 'Rename' });
     if (name && name !== board.name) await updateBoard(board.id, { name });
   };
 
-  const row = (board: BoardSummary) =>
-    confirmingDelete === board.id ? (
-      <li key={board.id} class="home-board is-confirming" data-testid="home-board">
-        <div class="home-board-confirm-text">
-          Delete <strong>{board.name}</strong> and its {nodesLabel(board.nodeCount)} and snapshots? This can't be
-          undone.
-        </div>
-        <div class="home-board-actions">
-          <button type="button" class="home-board-action" onClick={() => setConfirmingDelete(null)}>
-            Cancel
-          </button>
-          <button
-            type="button"
-            class="home-board-action is-danger"
-            onClick={() => {
-              setConfirmingDelete(null);
-              void deleteBoard(board.id);
-            }}
-          >
-            Delete board
+  const treeRow = (path: string, depth: number) => {
+    const kids = childrenOf(path);
+    const open = !collapsed.has(path);
+    const count = boards.filter((board) => inFolder(board, path)).length;
+    const hasPin = boards.some((board) => board.pin && inFolder(board, path));
+    return (
+      <li key={path}>
+        <div class={`home-tree-row${folder === path && !query ? ' is-selected' : ''}`} data-folder={path}>
+          <span class="home-tree-indent" style={{ width: `${depth * 16}px` }} />
+          {kids.length > 0 ? (
+            <button
+              type="button"
+              class="home-tree-chevron"
+              aria-label={open ? `Fold ${leaf(path)}` : `Unfold ${leaf(path)}`}
+              aria-expanded={open}
+              onClick={() => toggle(path)}
+            >
+              {open ? <IconChevronDown /> : <IconChevronRight />}
+            </button>
+          ) : (
+            <span class="home-tree-chevron" />
+          )}
+          <button type="button" class="home-tree-name" onClick={() => goTo(path)}>
+            {leaf(path)}
           </button>
+          {hasPin && <span class="home-tree-pin" aria-label="Has a board in the agent's context" />}
+          <span class="home-tree-count">{count}</span>
         </div>
+        {open && kids.length > 0 && <ul class="home-tree">{kids.map((kid) => treeRow(kid, depth + 1))}</ul>}
       </li>
-    ) : (
-      <li key={board.id} class="home-board" data-testid="home-board">
-        <button type="button" class="home-board-open" onClick={() => void openBoard(board.id)}>
-          <span class="home-board-name">{board.name}</span>
-          <span class="home-board-meta">
-            {nodesLabel(board.nodeCount)} · {timeAgo(board.lastOpenedAt)}
-          </span>
-        </button>
-        <div class="home-board-actions">
-          <button type="button" class="home-board-action" aria-haspopup="dialog" onClick={() => setMoving(board.id)}>
-            Move
-          </button>
-          <button type="button" class="home-board-action" aria-haspopup="dialog" onClick={() => setCopying(board.id)}>
-            Create from…
-          </button>
-          <button type="button" class="home-board-action" onClick={() => void rename(board)}>
-            Rename
-          </button>
-          <button type="button" class="home-board-action" onClick={() => setConfirmingDelete(board.id)}>
-            Delete
+    );
+  };
+
+  const tree = (
+    <ul class="home-tree" aria-label="Folders">
+      {childrenOf('').map((path) => treeRow(path, 0))}
+      <li>
+        <div class={`home-tree-row is-unfiled${folder === '' && !query ? ' is-selected' : ''}`}>
+          <span class="home-tree-chevron" />
+          <button type="button" class="home-tree-name" onClick={() => goTo('')}>
+            Unfiled
           </button>
+          <span class="home-tree-count">{boards.filter((board) => !board.folder).length}</span>
         </div>
       </li>
-    );
+    </ul>
+  );
 
-  const folder = (path: string, depth: number): ComponentChildren => {
-    const children = folders.filter(
-      (candidate) => candidate.slice(0, candidate.lastIndexOf('/')) === path && candidate.includes('/'),
-    );
-    const direct = visible.filter((board) => board.category === path);
-    const count = visible.filter((board) => board.category === path || board.category?.startsWith(`${path}/`)).length;
-    const expanded = !!query || !collapsed.has(path);
-    return (
-      <section key={path} class="home-section" data-testid="home-section" data-folder={path} aria-label={path}>
-        <button type="button" class="home-section-head" aria-expanded={expanded} onClick={() => toggle(path)}>
-          <svg class="home-section-chevron" viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true">
-            <path d="m7.5 4.75 5.25 5.25-5.25 5.25" />
-          </svg>
-          <svg class="home-section-folder" viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true">
-            <path d="M2.75 5.75A1.75 1.75 0 0 1 4.5 4h3l1.75 2h6.25a1.75 1.75 0 0 1 1.75 1.75v6.5A1.75 1.75 0 0 1 15.5 16h-11a1.75 1.75 0 0 1-1.75-1.75v-8.5Z" />
-          </svg>
-          <span class="home-section-name">{path.split('/').at(-1)}</span>
-          <span class="home-section-count">{count}</span>
+  const pinnedList = (
+    <ul class="home-pinned" aria-label="Pinned boards">
+      {pinned.map((board) => (
+        <li key={board.id}>
+          <button type="button" class="home-pinned-row" onClick={() => goTo(board.folder ?? '')}>
+            <span class="home-pin-dot" aria-hidden="true">
+              <IconPin />
+            </span>
+            <span class="home-pinned-name">{board.name}</span>
+            <span class="home-tree-count">{board.folder ? leaf(board.folder) : 'Unfiled'}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+
+  const searchField = (
+    <label class="home-search">
+      <IconSearch />
+      <span class="sr-only">Find boards, cards and folders</span>
+      <input
+        type="search"
+        placeholder="Boards, cards, folders…"
+        value={search}
+        onInput={(event) => setSearch(event.currentTarget.value)}
+      />
+    </label>
+  );
+
+  const card = (board: BoardSummary) => (
+    <li key={board.id}>
+      <article
+        class={`home-card${board.pin ? ' is-pinned' : ''}${selectedId === board.id ? ' is-selected' : ''}`}
+        data-testid="home-board"
+        data-board-id={board.id}
+      >
+        <button
+          type="button"
+          class="home-card-select"
+          aria-label={board.name}
+          aria-pressed={selectedId === board.id}
+          onClick={() => select(board.id)}
+          onDblClick={() => void openBoard(board.id)}
+        >
+          <BoardThumbnail board={board} />
+          <span class="home-card-body">
+            <span class="home-card-name">{board.name}</span>
+            <span class="home-card-readme">{board.summary ?? 'No README yet.'}</span>
+            <span class="home-card-meta">
+              <span>{plural(board.nodeCount, 'card')}</span>
+              {linkCount(board) > 0 && <span>↔ {plural(linkCount(board), 'link')}</span>}
+              <span class="home-card-when">{openedAgo(board.lastOpenedAt)}</span>
+            </span>
+          </span>
         </button>
-        {expanded && (
-          <div class="home-folder-children" style={{ marginLeft: depth < 5 ? '14px' : '0' }}>
-            {children.filter((child) => visibleFolders.has(child)).map((child) => folder(child, depth + 1))}
-            {direct.length > 0 && (
-              <ul class="home-view-list" aria-label={`Boards in ${path}`}>
-                {direct.map(row)}
-              </ul>
-            )}
-          </div>
+        {enabled && reviewTargets.has(board.id) && (
+          <button
+            type="button"
+            class="home-card-review"
+            aria-label={`Review ${board.name}`}
+            onClick={() => void reviewBoard(board.id)}
+          >
+            ⧗ Review {plural(reviewTargets.get(board.id)!.length, 'card')}
+          </button>
         )}
-      </section>
-    );
-  };
+        <BoardPinButton board={board} />
+      </article>
+    </li>
+  );
 
-  return (
-    <div class="home-view" data-testid="home-view">
-      <div class="home-view-inner">
-        <div class="home-view-head">
-          <h1 class="home-view-title">Boards</h1>
-          <button type="button" class="home-view-new" onClick={() => void promptNewBoard()}>
-            New board
+  const details = selected && (
+    <aside class="home-details" aria-label="Board details" data-testid="home-details">
+      <button type="button" class="home-details-grip" aria-label="Close details" onClick={() => select(null)} />
+      <div class="home-details-head">
+        <span class="home-details-folder">{selected.folder ? leaf(selected.folder) : 'Unfiled'}</span>
+        <span class="home-details-name">{selected.name}</span>
+      </div>
+      <div class={`home-details-context${selected.pin ? ' is-on' : ''}`}>
+        <span class="home-details-context-text">
+          <span class="home-details-context-label">
+            {selected.pin ? "In the agent's context" : "Not in the agent's context"}
+          </span>
+        </span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={!!selected.pin}
+          aria-label="In the agent's context"
+          class="home-switch"
+          onClick={() => void setBoardPinned(selected.id, !selected.pin)}
+        >
+          <span class="home-switch-knob" />
+        </button>
+      </div>
+      {confirmingDelete ? (
+        <div class="home-details-confirm" role="alert">
+          <span>
+            Delete <strong>{selected.name}</strong> and its {plural(selected.nodeCount, 'card')} and snapshots? This
+            can't be undone.
+          </span>
+          <span class="home-details-actions">
+            <button type="button" class="home-button" onClick={() => setConfirmingDelete(false)}>
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="home-button is-danger"
+              onClick={() => {
+                setConfirmingDelete(false);
+                void deleteBoard(selected.id);
+              }}
+            >
+              Delete board
+            </button>
+          </span>
+        </div>
+      ) : (
+        <div class="home-details-actions">
+          <button type="button" class="home-button is-primary" onClick={() => void openBoard(selected.id)}>
+            Open board
           </button>
+          {enabled && reviewTargets.has(selected.id) && (
+            <button type="button" class="home-button" onClick={() => void reviewBoard(selected.id)}>
+              Review cards
+            </button>
+          )}
+          <span class="home-more">
+            <button
+              ref={moreButton}
+              type="button"
+              class="home-button is-icon"
+              aria-label="More: move, rename, create from, delete"
+              aria-haspopup="menu"
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen(!menuOpen)}
+            >
+              <IconMore />
+            </button>
+            {menuOpen && (
+              <span
+                ref={moreMenu}
+                class="home-more-menu"
+                role="menu"
+                onKeyDown={(event) => {
+                  const items = [...(moreMenu.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])];
+                  const at = items.indexOf(document.activeElement as HTMLElement);
+                  if (event.key === 'Escape') {
+                    event.preventDefault();
+                    setMenuOpen(false);
+                    moreButton.current?.focus();
+                  } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    const step = event.key === 'ArrowDown' ? 1 : -1;
+                    items[(at + step + items.length) % items.length]?.focus();
+                  }
+                }}
+              >
+                {(
+                  [
+                    ['Move…', () => setMoving(selected.id)],
+                    ['Rename…', () => void rename(selected)],
+                    ['Create from…', () => setCopying(selected.id)],
+                    ['Delete…', () => setConfirmingDelete(true)],
+                  ] as const
+                ).map(([label, run]) => (
+                  <button
+                    key={label}
+                    type="button"
+                    role="menuitem"
+                    class="home-more-item"
+                    onClick={() => {
+                      setMenuOpen(false);
+                      run();
+                    }}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </span>
+            )}
+          </span>
         </div>
-        <input
-          class="text-prompt-input home-search"
-          type="search"
-          aria-label="Find boards and folders"
-          placeholder="Find boards and folders…"
-          value={search}
-          onInput={(event) => setSearch(event.currentTarget.value)}
+      )}
+    </aside>
+  );
+
+  return (
+    <div class="home-shell">
+      {knowledgeDialog !== null && (
+        <KnowledgeDialog
+          key={knowledgeDialog}
+          folder={knowledgeDialog || undefined}
+          onClose={() => setKnowledgeDialog(null)}
         />
-        {boards.length === 0 ? (
-          <div class="home-view-empty">No boards yet. Create one, or let an agent start writing — it opens one.</div>
-        ) : query && hits.length > 0 ? (
-          <ul class="home-view-list" aria-label="Library search results">
-            {hits.map((hit) => (
-              <li class="home-board" key={`${hit.boardId}:${hit.cardId}`}>
-                <button type="button" class="home-board-open" onClick={() => void openHit(hit)}>
-                  <span class="home-board-name">{hit.title || hit.boardTitle}</span>
-                  <span class="home-board-meta">
-                    {hit.boardTitle} · {hit.snippet}
-                  </span>
-                </button>
-              </li>
-            ))}
-          </ul>
-        ) : visible.length === 0 ? (
-          <div class="home-view-empty" role="status">
-            No boards match “{search}”.
-          </div>
+      )}
+      {relationPresetsOpen && <RelationPresetsDialog onClose={() => setRelationPresetsOpen(false)} />}
+      <nav class="home-view-tabs" aria-label="Library view">
+        {(['Folders', 'Map', 'Graph', 'Review'] as const)
+          .filter((tab) => enabled || tab !== 'Review')
+          .map((tab) => (
+            <button
+              type="button"
+              class="home-button"
+              aria-pressed={view === tab}
+              onClick={() => setView(tab)}
+              key={tab}
+            >
+              {tab}
+            </button>
+          ))}
+        <button type="button" class="home-button" onClick={() => setRelationPresetsOpen(true)}>
+          Relation presets
+        </button>
+      </nav>
+      {view === 'Map' || view === 'Graph' ? (
+        view === 'Map' ? (
+          <HomeMapView />
         ) : (
-          <>
-            {folders.filter((path) => !path.includes('/') && visibleFolders.has(path)).map((path) => folder(path, 0))}
-            {visible.some((board) => !board.category) && (
-              <section aria-label="Unfiled boards">
-                {folders.length > 0 && <div class="home-folder-hint">Unfiled boards</div>}
-                <ul class="home-view-list">{visible.filter((board) => !board.category).map(row)}</ul>
+          <HomeGraphView />
+        )
+      ) : (
+        <div class={`home-view${selected && view === 'Folders' ? ' has-details' : ''}`} data-testid="home-view">
+          <aside class={`home-library${pickerOpen ? ' is-open' : ''}`} aria-label="Library">
+            <div class="home-library-head">
+              <span class="home-library-title">Library</span>
+              <span class="home-tree-count">{plural(boards.length, 'board')}</span>
+              {enabled && (
+                <button
+                  type="button"
+                  class="home-button"
+                  onClick={() => {
+                    if (knowledgeLifecycleEnabled.value) setKnowledgeDialog('');
+                  }}
+                >
+                  Categories
+                </button>
+              )}
+            </div>
+            {searchField}
+            {pinned.length > 0 && (
+              <section class="home-library-section">
+                <span class="home-section-label">Pinned boards</span>
+                {pinnedList}
+                <span class="home-pinned-cost">
+                  ≈ {approxTokens(pinnedChars)} tokens · {plural(pinned.length, 'board')}
+                </span>
               </section>
             )}
-          </>
-        )}
-      </div>
-      {movingBoard && (
-        <BoardFolderDialog key={movingBoard.id} board={movingBoard} folders={folders} onClose={() => setMoving(null)} />
+            <section class="home-library-section is-folders">
+              <span class="home-section-label">Folders</span>
+              {tree}
+              <button type="button" class="home-tree-new" onClick={() => void newFolder()}>
+                + New folder
+              </button>
+            </section>
+          </aside>
+
+          <main class="home-main">
+            {/* Pane600.dc.html: at the narrow end the tree and the pins fold into these two rows. */}
+            <div class="home-narrow">
+              {searchField}
+              {pinned.length > 0 && (
+                <>
+                  <button
+                    type="button"
+                    class="home-narrow-context"
+                    aria-expanded={pinsOpen}
+                    onClick={() => setPinsOpen(!pinsOpen)}
+                  >
+                    <span class="home-pin-dot" aria-hidden="true">
+                      <IconPin />
+                    </span>
+                    <span class="home-narrow-context-label">In context: {plural(pinned.length, 'board')}</span>
+                    <span class="home-narrow-context-cost">≈ {approxTokens(pinnedChars)} tokens</span>
+                    <span>{pinsOpen ? 'Hide ▴' : 'Show ▾'}</span>
+                  </button>
+                  {pinsOpen && pinnedList}
+                </>
+              )}
+              <button
+                type="button"
+                class="home-narrow-picker"
+                aria-expanded={pickerOpen}
+                onClick={() => setPickerOpen(!pickerOpen)}
+              >
+                {folder ? leaf(folder) : 'Library'}
+                <span class="home-tree-count">
+                  · {folder ? boards.filter((board) => inFolder(board, folder)).length : here.length} ▾
+                </span>
+              </button>
+            </div>
+
+            {view === 'Review' ? (
+              <HomeReviewView folder={folder} folders={folders} onScopeChange={goTo} />
+            ) : (
+              <>
+                <div class="home-main-head">
+                  <div class="home-main-title">
+                    <nav class="home-crumbs" aria-label="Folder path">
+                      <button type="button" onClick={() => goTo('')}>
+                        Library
+                      </button>
+                      {folder &&
+                        folderAncestors(folder).map((path) => (
+                          <span key={path}>
+                            <span class="home-crumb-sep">/</span>
+                            <button type="button" onClick={() => goTo(path)}>
+                              {leaf(path)}
+                            </button>
+                          </span>
+                        ))}
+                    </nav>
+                    <h1 class="home-view-title">
+                      {query ? `Results for “${search.trim()}”` : folder ? leaf(folder) : 'Library'}
+                    </h1>
+                  </div>
+                  {enabled && (
+                    <button
+                      type="button"
+                      class="home-button"
+                      onClick={() => {
+                        if (knowledgeLifecycleEnabled.value) setKnowledgeDialog(folder);
+                      }}
+                    >
+                      {' '}
+                      {folder ? 'Folder settings' : 'Categories'}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    class="home-button is-primary"
+                    onClick={() => void promptNewBoard(folder || null)}
+                  >
+                    {folder ? 'New board here' : 'New board'}
+                  </button>
+                </div>
+
+                {enabled && knowledge.value && !query && (
+                  <section class="home-main-section" aria-label="Folder review summary">
+                    <span class="home-section-label">
+                      Card review · {folder ? 'In this folder and subfolders' : 'Across the library'}
+                    </span>
+                    <div class="home-card-meta">
+                      {folderCategory && (
+                        <span>
+                          Category: {folderCategory.glyph} {folderCategory.name}
+                        </span>
+                      )}
+                      <button
+                        type="button"
+                        class={`home-review-link${reviewNeeded ? ' has-review' : ''}`}
+                        onClick={() => {
+                          setView('Review');
+                          setSelectedId(null);
+                        }}
+                      >
+                        Review needed: {plural(reviewNeeded, 'card')}
+                      </button>
+                      <span>No review policy: {plural(withoutPolicy, 'card')}</span>
+                    </div>
+                  </section>
+                )}
+
+                {boards.length === 0 ? (
+                  <div class="home-view-empty">
+                    No boards yet. Create one, or let an agent start writing — it opens one.
+                  </div>
+                ) : query ? (
+                  <>
+                    {hits.length > 0 && (
+                      <section class="home-main-section">
+                        <span class="home-section-label">Cards · {hits.length}</span>
+                        <ul class="home-hits" aria-label="Library search results">
+                          {hits.map((hit) => (
+                            <li key={`${hit.boardId}:${hit.cardId}`}>
+                              <button type="button" class="home-hit" onClick={() => void openHit(hit)}>
+                                <span class="home-card-name">{hit.title || hit.boardTitle}</span>
+                                {enabled && hit.qualification?.retired && <span class="category-tag">Retired</span>}
+                                <span class="home-card-meta">
+                                  {hit.boardTitle} · {hit.snippet}
+                                </span>
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      </section>
+                    )}
+                    {matches.length > 0 ? (
+                      <section class="home-main-section">
+                        <span class="home-section-label">Boards · {matches.length}</span>
+                        <ul class="home-cards">{matches.map(card)}</ul>
+                      </section>
+                    ) : (
+                      hits.length === 0 && (
+                        <div class="home-view-empty" role="status">
+                          No boards match “{search.trim()}”.
+                        </div>
+                      )
+                    )}
+                  </>
+                ) : (
+                  <>
+                    {subfolders.length > 0 && (
+                      <section class="home-main-section">
+                        <span class="home-section-label">Folders · {subfolders.length}</span>
+                        <ul class="home-folders">
+                          {subfolders.map((path) => {
+                            const inside = boards.filter((board) => inFolder(board, path));
+                            const latest = inside
+                              .map((board) => board.lastOpenedAt ?? '')
+                              .sort()
+                              .at(-1);
+                            const inContext = inside.filter((board) => board.pin).length;
+                            return (
+                              <li key={path}>
+                                <button
+                                  type="button"
+                                  class="home-folder"
+                                  data-testid="home-section"
+                                  data-folder={path}
+                                  onClick={() => goTo(path)}
+                                >
+                                  <span class="home-folder-stack" aria-hidden="true">
+                                    <span />
+                                    <span />
+                                    <span />
+                                  </span>
+                                  {inContext > 0 && <span class="home-folder-context">{inContext} in context</span>}
+                                  <span class="home-folder-name">{leaf(path)}</span>
+                                  <span class="home-folder-meta">
+                                    {plural(inside.length, 'board')}
+                                    {latest ? ` · opened ${openedAgo(latest)}` : ''}
+                                  </span>
+                                </button>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      </section>
+                    )}
+                    <section class="home-main-section">
+                      <span class="home-section-label">
+                        {folder ? `Boards in ${leaf(folder)}` : 'Unfiled boards'} · {shown.length}
+                      </span>
+                      {shown.length > 0 ? (
+                        <ul class="home-cards" aria-label={folder ? `Boards in ${folder}` : 'Unfiled boards'}>
+                          {shown.map(card)}
+                        </ul>
+                      ) : (
+                        <div class="home-view-empty">No boards here yet.</div>
+                      )}
+                    </section>
+                  </>
+                )}
+              </>
+            )}
+          </main>
+
+          {view === 'Folders' && details}
+          {movingBoard && (
+            <BoardFolderDialog
+              key={movingBoard.id}
+              board={movingBoard}
+              folders={folders}
+              onClose={() => setMoving(null)}
+            />
+          )}
+          {copyingBoard && (
+            <BoardCopyDialog key={copyingBoard.id} board={copyingBoard} onClose={() => setCopying(null)} />
+          )}
+        </div>
       )}
-      {copyingBoard && <BoardCopyDialog key={copyingBoard.id} board={copyingBoard} onClose={() => setCopying(null)} />}
     </div>
   );
 }