({
+ id: String(i), label: "n", kind: "entity",
+ })),
+ edges: [{ source: "0", target: "1" }],
+ }}
+ />,
+ );
+ expect(container.querySelectorAll("circle").length).toBe(5);
+ expect(container.querySelectorAll("line").length).toBe(1);
+ });
+ });
+ ```
+
+- [ ] **Step 3: Run + commit**
+ ```bash
+ cd ui && npm test -- graph/
+ cd ..
+ git add ui/src/components/graph/
+ git commit -m "feat(ui): GlanceView SVG graph preview"
+ ```
+
+### Task 4.5: Wire Home route with all pieces
+
+**Files:**
+- Modify: `ui/src/routes/Home.tsx`
+- Test: `ui/src/routes/__tests__/Home.test.tsx`
+
+- [ ] **Step 1: Rewrite `ui/src/routes/Home.tsx`**
+ ```tsx
+ import { useEffect, useMemo } from "react";
+ import { StatsStrip } from "@/components/layout/StatsStrip";
+ import { ActivityFeed } from "@/components/activity/ActivityFeed";
+ import { GlanceView } from "@/components/graph/GlanceView";
+ import { useProjectStore } from "@/stores/project";
+ import { useStats } from "@/hooks/api/useStats";
+ import { useActivity } from "@/hooks/api/useActivity";
+ import { useNotes } from "@/hooks/api/useNotes";
+ import { useNotesGraph } from "@/hooks/api/useGraph";
+ import { useLastVisit } from "@/hooks/useLastVisit";
+ import { t } from "@/i18n";
+
+ export default function Home() {
+ const project = useProjectStore((s) => s.slug);
+ const stats = useStats(project);
+ const activity = useActivity(project);
+ const notes = useNotes(project);
+ const graph = useNotesGraph(project);
+ const { lastVisit, touch } = useLastVisit();
+
+ const newCount = useMemo(() => {
+ if (!activity.data) return 0;
+ return activity.data.filter((e) => e.kind === "note_added" && e.timestamp > lastVisit).length;
+ }, [activity.data, lastVisit]);
+
+ // Touch on unmount so we track "last time the user looked at Home"
+ useEffect(() => () => { touch(); }, [touch]);
+
+ const recentNotes = (notes.data ?? []).slice(0, 5);
+
+ return (
+
+
+
+
+
+
+
+ {parts.map((p, i) =>
+ p.kind === "html" ? (
+
+ ) : (
+
+ ),
+ )}
+
world/);
+ });
+ it("strips YAML frontmatter", () => {
+ const parts = renderMarkdown("---\ntitle: hi\n---\n\nbody");
+ expect(parts[0].content).toMatch(/
body/);
+ expect(parts[0].content).not.toMatch(/title:/);
+ });
+ it("extracts plain wikilink", () => {
+ const parts = renderMarkdown("see [[target]]!");
+ const link = parts.find((p) => p.kind === "wikilink");
+ expect(link?.content).toBe("target");
+ expect(link?.label).toBeUndefined();
+ });
+ it("extracts aliased wikilink and renders alias", () => {
+ const parts = renderMarkdown("see [[target|Alias]]!");
+ const link = parts.find((p) => p.kind === "wikilink");
+ expect(link?.content).toBe("target");
+ expect(link?.label).toBe("Alias");
+ });
+ it("opens external links in new tab", () => {
+ const parts = renderMarkdown("[g](https://example.com)");
+ expect(parts[0].content).toMatch(/target="_blank"/);
+ expect(parts[0].content).toMatch(/rel="noopener noreferrer"/);
+ });
+ it("adds loading=lazy to images", () => {
+ const parts = renderMarkdown("");
+ expect(parts[0].content).toMatch(/loading="lazy"/);
+ });
+ });
+ ```
+
+- [ ] **Step 5: Write `ui/src/components/notes/__tests__/MarkdownView.test.tsx`**
+ ```tsx
+ import { describe, it, expect } from "vitest";
+ import { render, screen } from "@testing-library/react";
+ import { MemoryRouter } from "react-router-dom";
+ import { MarkdownView } from "../MarkdownView";
+
+ describe("MarkdownView", () => {
+ it("renders wikilinks as clickable router links with alias", () => {
+ render();
+ const link = screen.getByRole("link", { name: "Alias" }) as HTMLAnchorElement;
+ expect(link.getAttribute("href")).toBe("/notes/target");
+ });
+ });
+ ```
+
+- [ ] **Step 6: Run + commit**
+ ```bash
+ cd ui && npm test -- markdown MarkdownView
+ cd ..
+ git add ui/src/lib/markdown.ts ui/src/lib/__tests__/markdown.test.ts ui/src/components/notes/MarkdownView.tsx ui/src/components/notes/WikiLink.tsx ui/src/components/notes/__tests__/MarkdownView.test.tsx
+ git commit -m "feat(ui): markdown renderer with wikilinks + aliased labels"
+ ```
+
+### Task 5.2: Tree drawer + Link drawer
+
+**Files:**
+- Create: `ui/src/components/notes/TreeDrawer.tsx`, `ui/src/components/notes/LinkPanel.tsx`
+- Test: `ui/src/components/notes/__tests__/TreeDrawer.test.tsx`
+
+- [ ] **Step 1: Create `ui/src/components/notes/TreeDrawer.tsx`**
+ ```tsx
+ import { Link } from "react-router-dom";
+ import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/dialog";
+ import { useNotes } from "@/hooks/api/useNotes";
+ import type { Note } from "@/types/api";
+
+ // Sheet in shadcn ships as Dialog-side; for our tree drawer a simple Dialog works.
+ // If shadcn-sheet primitive isn't available, this falls back to Dialog with side:"left" CSS.
+
+ interface Props { project: string; open: boolean; onOpenChange: (v: boolean) => void; currentKey?: string; }
+
+ function groupByFolder(notes: Note[]) {
+ const tree: Record = {};
+ for (const n of notes) {
+ const parts = n.key.split("/");
+ const folder = parts.length === 1 ? "" : parts.slice(0, -1).join("/");
+ (tree[folder] ??= []).push(n);
+ }
+ return tree;
+ }
+
+ export function TreeDrawer({ project, open, onOpenChange, currentKey }: Props) {
+ const { data = [] } = useNotes(project);
+ const grouped = groupByFolder(data);
+ const folders = Object.keys(grouped).sort();
+ return (
+
+
+
+
+ Notes
+
+
+
+ {folders.map((folder) => (
+
+ {folder && (
+
+ {folder}/
+
+ )}
+ {grouped[folder]
+ .sort((a, b) => a.key.localeCompare(b.key))
+ .map((n) => (
+
onOpenChange(false)}
+ >
+ {n.key.split("/").pop()}
+
+ ))}
+
+ ))}
+ {folders.length === 0 && (
+
No notes yet.
+ )}
+
+
+ Inbound
+ {inbound.length === 0 && —
}
+ {inbound.map((k) => (
+ onOpenChange(false)}
+ className="block px-2 py-1 rounded hover:bg-[var(--color-surface-2)]"
+ >
+ {k}
+
+ ))}
+
+
+ Outbound
+ {outbound.length === 0 && —
}
+ {outbound.map((k) => (
+ onOpenChange(false)}
+ className="block px-2 py-1 rounded hover:bg-[var(--color-surface-2)]"
+ >
+ {k}
+
+ ))}
+
+
+
+
+
+ {!key && (
+
+ Open the tree (⌘/) or search (⌘K) to select a note.
+
+ )}
+
Loading…
;
+ }
+ if (error || !note) {
+ return (
+
+
Note not found
+
{key}
+