diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index 543edb7..89bd8dc 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -80,6 +80,14 @@ import {
   UI_FONTS,
   type Appearance,
 } from "./appearance.js";
+import {
+  AnnotationCellProvider,
+  AnnotationGlobalProvider,
+  useAnnotations,
+} from "./annotation-context.js";
+import { annotationId } from "./annotations-store.js";
+import { AnnotationPopup } from "./components/AnnotationPopup.js";
+import { AnnotationToolbar } from "./components/AnnotationToolbar.js";
 
 // react-grid-layout, width-measured + responsive (stacks to 1 column on narrow
 // viewports). The canvas engine: drag to place, resize from edges, vertical
@@ -184,6 +192,10 @@ function RuntimeApp({ config }: { config: AppConfig }): React.ReactElement {
     clearOverrides(layoutKey);
   }, [layoutKey]);
 
+  // Annotate mode: flag graph entities, attach notes, copy a payload for an
+  // agent. Web-local, persisted per-notebook; never writes to the graph.
+  const ann = useAnnotations(config.notebook, config.label);
+
   // Tabs partition the one flat cell list into named pages (host-shell view
   // tier). Derived from the *declared* cells so the bar is stable across runtime
   // status. Empty ⇒ no tab bar (single canvas). State is shared across tabs, so
@@ -316,6 +328,7 @@ function RuntimeApp({ config }: { config: AppConfig }): React.ReactElement {
       onStateChange={handleStateChange}
       handlers={handlers}
     >
+      <AnnotationGlobalProvider value={ann.globalValue}>
       <Shell
         header={
           <div className="sticky top-0 z-30 border-b border-border bg-background">
@@ -507,6 +520,25 @@ function RuntimeApp({ config }: { config: AppConfig }): React.ReactElement {
         setOpen={setCmdOpen}
         sections={commandSections}
       />
+      {ann.pending && (
+        <AnnotationPopup
+          key={annotationId(ann.pending.cellId, ann.pending.draft.key)}
+          pending={ann.pending}
+          onSave={ann.save}
+          onRemove={ann.remove}
+          onClose={ann.closePopup}
+        />
+      )}
+      <AnnotationToolbar
+        active={ann.active}
+        onToggleActive={ann.setActive}
+        session={ann.session}
+        onInstruction={ann.setInstruction}
+        onRemove={ann.remove}
+        onClear={ann.clear}
+        onCopy={ann.copy}
+      />
+      </AnnotationGlobalProvider>
     </JSONUIProvider>
   );
 }
@@ -950,7 +982,13 @@ function CellBody({ cell }: { cell: CellExecution }): React.ReactElement {
           </Alert>
         )}
         {cell.spec !== null && (
-          <Renderer spec={cell.spec} registry={webRegistry} />
+          <AnnotationCellProvider
+            cellId={cell.cell.id}
+            lens={cell.cell.lens}
+            queryRef={cell.cell.query?.ref}
+          >
+            <Renderer spec={cell.spec} registry={webRegistry} />
+          </AnnotationCellProvider>
         )}
         {cell.error === null && cell.spec === null && cell.pending && (
           <div className="space-y-2">
diff --git a/packages/web/src/annotation-context.tsx b/packages/web/src/annotation-context.tsx
new file mode 100644
index 0000000..697861e
--- /dev/null
+++ b/packages/web/src/annotation-context.tsx
@@ -0,0 +1,236 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import type { Notebook } from "@modernrelay/notebook-core";
+import {
+  annotationId,
+  annotationsKey,
+  clearAnnotations,
+  loadAnnotations,
+  saveAnnotations,
+  serializeAnnotations,
+  type Annotation,
+  type AnnotationIntent,
+  type AnnotationSession,
+} from "./annotations-store.js";
+
+/** What a lens passes when an entity is clicked for annotation. */
+export interface AnnotationDraft {
+  key: string;
+  headline: string;
+  data: Record<string, unknown>;
+}
+
+/** The in-flight popup target — an entity click awaiting a note. */
+export interface PendingAnnotation {
+  cellId: string;
+  lens: string;
+  queryRef?: string;
+  draft: AnnotationDraft;
+  /** Anchor rect (viewport coords) of the clicked element, for popup placement. */
+  rect: { top: number; left: number; bottom: number; right: number; width: number };
+  existing?: Annotation;
+}
+
+interface GlobalValue {
+  active: boolean;
+  open(
+    target: {
+      cellId: string;
+      lens: string;
+      queryRef?: string;
+      draft: AnnotationDraft;
+    },
+    rect: DOMRect,
+  ): void;
+  /** 1-based annotation order for this entity, or null when not annotated. */
+  numberOf(cellId: string, key: string): number | null;
+}
+
+const GlobalContext = createContext<GlobalValue | null>(null);
+
+interface CellValue {
+  cellId: string;
+  lens: string;
+  queryRef?: string;
+}
+const CellContext = createContext<CellValue | null>(null);
+
+export function AnnotationGlobalProvider({
+  value,
+  children,
+}: {
+  value: GlobalValue;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <GlobalContext.Provider value={value}>{children}</GlobalContext.Provider>
+  );
+}
+
+/** Wraps each cell's `<Renderer>` so its leaf lens learns its cell id/lens/query. */
+export function AnnotationCellProvider({
+  cellId,
+  lens,
+  queryRef,
+  children,
+}: {
+  cellId: string;
+  lens: string;
+  queryRef?: string;
+  children: React.ReactNode;
+}): React.ReactElement {
+  const value = useMemo(
+    () => ({ cellId, lens, queryRef }),
+    [cellId, lens, queryRef],
+  );
+  return <CellContext.Provider value={value}>{children}</CellContext.Provider>;
+}
+
+/** Leaf-lens hook: annotate-on-click + per-entity marker number for this cell. */
+export function useAnnotation(): {
+  active: boolean;
+  annotate: (draft: AnnotationDraft, e: React.MouseEvent) => void;
+  /** 1-based marker number for this entity, or null when not annotated. */
+  numberOf: (key: string) => number | null;
+} {
+  const g = useContext(GlobalContext);
+  const c = useContext(CellContext);
+  const active = g?.active ?? false;
+  const annotate = useCallback(
+    (draft: AnnotationDraft, e: React.MouseEvent) => {
+      if (!g || !c) return;
+      e.stopPropagation();
+      g.open(
+        { cellId: c.cellId, lens: c.lens, queryRef: c.queryRef, draft },
+        (e.currentTarget as HTMLElement).getBoundingClientRect(),
+      );
+    },
+    [g, c],
+  );
+  const numberOf = useCallback(
+    (key: string) => (g && c ? g.numberOf(c.cellId, key) : null),
+    [g, c],
+  );
+  return { active, annotate, numberOf };
+}
+
+/** Host hook: owns the persisted session, annotate mode, and the popup target. */
+export function useAnnotations(notebook: Notebook, label: string) {
+  const storageKey = useMemo(() => annotationsKey(notebook), [notebook]);
+  const [session, setSession] = useState<AnnotationSession>(() =>
+    loadAnnotations(storageKey),
+  );
+  const [active, setActive] = useState(false);
+  const [pending, setPending] = useState<PendingAnnotation | null>(null);
+
+  const persist = useCallback(
+    (next: AnnotationSession) => {
+      setSession(next);
+      saveAnnotations(storageKey, next);
+    },
+    [storageKey],
+  );
+
+  const open = useCallback<GlobalValue["open"]>(
+    (target, rect) => {
+      const id = annotationId(target.cellId, target.draft.key);
+      setPending({
+        ...target,
+        rect: {
+          top: rect.top,
+          left: rect.left,
+          bottom: rect.bottom,
+          right: rect.right,
+          width: rect.width,
+        },
+        existing: session.items.find((a) => a.id === id),
+      });
+    },
+    [session.items],
+  );
+
+  const numberOf = useCallback(
+    (cellId: string, key: string) => {
+      const i = session.items.findIndex(
+        (a) => a.id === annotationId(cellId, key),
+      );
+      return i === -1 ? null : i + 1;
+    },
+    [session.items],
+  );
+
+  const save = useCallback(
+    (note: string, intent?: AnnotationIntent) => {
+      if (!pending) return;
+      const a: Annotation = {
+        id: annotationId(pending.cellId, pending.draft.key),
+        cellId: pending.cellId,
+        lens: pending.lens,
+        ...(pending.queryRef ? { queryRef: pending.queryRef } : {}),
+        key: pending.draft.key,
+        headline: pending.draft.headline,
+        data: pending.draft.data,
+        note,
+        ...(intent ? { intent } : {}),
+      };
+      persist({
+        ...session,
+        items: [...session.items.filter((x) => x.id !== a.id), a],
+      });
+      setPending(null);
+    },
+    [pending, session, persist],
+  );
+
+  const remove = useCallback(
+    (id: string) => {
+      persist({ ...session, items: session.items.filter((a) => a.id !== id) });
+      setPending(null);
+    },
+    [session, persist],
+  );
+
+  const setInstruction = useCallback(
+    (instruction: string) => persist({ ...session, instruction }),
+    [session, persist],
+  );
+
+  const clear = useCallback(() => {
+    persist({ items: [], instruction: "" });
+    clearAnnotations(storageKey);
+  }, [persist, storageKey]);
+
+  const copy = useCallback(async (): Promise<boolean> => {
+    const md = serializeAnnotations(notebook, label, session);
+    try {
+      await navigator.clipboard?.writeText(md);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [notebook, label, session]);
+
+  const globalValue = useMemo<GlobalValue>(
+    () => ({ active, open, numberOf }),
+    [active, open, numberOf],
+  );
+
+  return {
+    active,
+    setActive,
+    session,
+    pending,
+    closePopup: useCallback(() => setPending(null), []),
+    save,
+    remove,
+    setInstruction,
+    clear,
+    copy,
+    globalValue,
+  };
+}
diff --git a/packages/web/src/annotations-store.test.ts b/packages/web/src/annotations-store.test.ts
new file mode 100644
index 0000000..001ee71
--- /dev/null
+++ b/packages/web/src/annotations-store.test.ts
@@ -0,0 +1,110 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import type { Notebook } from "@modernrelay/notebook-core";
+
+// The web vitest env is node (no window); stub a minimal in-memory localStorage,
+// matching the vi.stubGlobal pattern used by App.test.ts.
+function memoryStorage(): Storage {
+  const m = new Map<string, string>();
+  return {
+    getItem: (k) => m.get(k) ?? null,
+    setItem: (k, v) => void m.set(k, v),
+    removeItem: (k) => void m.delete(k),
+    clear: () => m.clear(),
+    key: (i) => [...m.keys()][i] ?? null,
+    get length() {
+      return m.size;
+    },
+  } as Storage;
+}
+beforeEach(() => vi.stubGlobal("window", { localStorage: memoryStorage() }));
+afterEach(() => vi.unstubAllGlobals());
+import {
+  annotationId,
+  annotationsKey,
+  clearAnnotations,
+  loadAnnotations,
+  saveAnnotations,
+  serializeAnnotations,
+  type AnnotationSession,
+} from "./annotations-store.js";
+
+const NB: Notebook = {
+  version: 1,
+  title: "Company context",
+  cells: [
+    { id: "decisions", lens: "Table", query: { ref: "decisions_by_urgency" }, props: {} },
+    { id: "clauses", lens: "ActionList", query: { ref: "policy_clauses" }, props: {} },
+  ],
+};
+
+const SESSION: AnnotationSession = {
+  instruction: "Reconcile the flagged clauses.",
+  items: [
+    {
+      id: annotationId("decisions", "adopt-soc2"),
+      cellId: "decisions",
+      lens: "Table",
+      queryRef: "decisions_by_urgency",
+      key: "adopt-soc2",
+      headline: "Adopt SOC2 Type II controls",
+      data: { slug: "adopt-soc2", status: "accepted", urgency: "high" },
+      note: "revisit the timeline",
+      intent: "question",
+    },
+    {
+      id: annotationId("clauses", "pdr-c3"),
+      cellId: "clauses",
+      lens: "ActionList",
+      queryRef: "policy_clauses",
+      key: "pdr-c3",
+      headline: "EU territoriality",
+      data: { id: "pdr-c3", title: "EU territoriality" },
+      note: "conflicts with zero-retention",
+    },
+  ],
+};
+
+describe("serializeAnnotations", () => {
+  const md = serializeAnnotations(NB, "server: x · graph: company", SESSION);
+
+  it("includes a title, label, and the overall instruction", () => {
+    expect(md).toContain("# Notebook annotations — Company context");
+    expect(md).toContain("server: x · graph: company");
+    expect(md).toContain("Reconcile the flagged clauses.");
+  });
+
+  it("groups by cell with the source query and renders each item", () => {
+    expect(md).toContain("## decisions (Table · query: decisions_by_urgency)");
+    expect(md).toContain("## clauses (ActionList · query: policy_clauses)");
+    expect(md).toContain("[question] `adopt-soc2` — Adopt SOC2 Type II controls");
+    expect(md).toContain("status: accepted · urgency: high");
+    expect(md).toContain("note: revisit the timeline");
+    // no intent tag when absent
+    expect(md).toContain("`pdr-c3` — EU territoriality");
+    expect(md).not.toContain("[fix]");
+  });
+});
+
+describe("annotation persistence", () => {
+  const key = annotationsKey(NB);
+
+  it("annotationsKey is stable for the same notebook", () => {
+    expect(annotationsKey(NB)).toBe(key);
+    expect(key).toMatch(/^dashbook:annotations:v1:/);
+  });
+
+  it("save → load round-trips; clear empties", () => {
+    saveAnnotations(key, SESSION);
+    const loaded = loadAnnotations(key);
+    expect(loaded.items).toHaveLength(2);
+    expect(loaded.instruction).toBe("Reconcile the flagged clauses.");
+    clearAnnotations(key);
+    expect(loadAnnotations(key).items).toHaveLength(0);
+  });
+
+  it("returns an empty session for absent / unparseable storage", () => {
+    expect(loadAnnotations("nope").items).toEqual([]);
+    window.localStorage.setItem(key, "{not json");
+    expect(loadAnnotations(key)).toEqual({ items: [], instruction: "" });
+  });
+});
diff --git a/packages/web/src/annotations-store.ts b/packages/web/src/annotations-store.ts
new file mode 100644
index 0000000..dcd17a5
--- /dev/null
+++ b/packages/web/src/annotations-store.ts
@@ -0,0 +1,151 @@
+import type { Notebook } from "@modernrelay/notebook-core";
+
+/**
+ * Browser-local annotation session — agentation's "click → note → copy" flow,
+ * graph-native. The user flags graph entities (a Table row, a Subgraph node, …)
+ * across a notebook and attaches a free-text note + optional intent; the
+ * collection is copied to the clipboard as agent-ready markdown. Annotations are
+ * ephemeral *feedback*, never written to the graph — so this is host-shell-only,
+ * persisted per-notebook in `localStorage` (mirrors `layout-overrides.ts`). The
+ * pure functions here stay testable apart from React and `localStorage`.
+ */
+export type AnnotationIntent = "fix" | "change" | "question" | "approve";
+
+export interface Annotation {
+  /** `${cellId}::${key}` — stable, so re-annotating an entity upserts. */
+  id: string;
+  cellId: string;
+  lens: string;
+  queryRef?: string;
+  /** The entity's identity value (id/select column, or `#<rowIndex>` fallback). */
+  key: string;
+  headline: string;
+  /** The entity's displayed columns — free context for the agent. */
+  data: Record<string, unknown>;
+  note: string;
+  intent?: AnnotationIntent;
+}
+
+export interface AnnotationSession {
+  items: Annotation[];
+  /** A free-text instruction prepended to the export (what the agent should do). */
+  instruction: string;
+}
+
+export const EMPTY_SESSION: AnnotationSession = { items: [], instruction: "" };
+const KEY_PREFIX = "dashbook:annotations:v1:";
+
+export function annotationId(cellId: string, key: string): string {
+  return `${cellId}::${key}`;
+}
+
+/** djb2 → base36: a compact, stable fingerprint of the cell-id set. */
+function hashIds(ids: string[]): string {
+  const joined = [...ids].sort().join(" ");
+  let h = 5381;
+  for (let i = 0; i < joined.length; i++) {
+    h = ((h << 5) + h + joined.charCodeAt(i)) >>> 0;
+  }
+  return h.toString(36);
+}
+
+/** Stable `localStorage` key for a notebook's annotation session. */
+export function annotationsKey(notebook: Notebook): string {
+  return `${KEY_PREFIX}${notebook.title}:${hashIds(notebook.cells.map((c) => c.id))}`;
+}
+
+export function loadAnnotations(key: string): AnnotationSession {
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return EMPTY_SESSION;
+    const parsed = JSON.parse(raw) as Partial<AnnotationSession>;
+    return {
+      items: Array.isArray(parsed.items) ? parsed.items.filter(isAnnotation) : [],
+      instruction:
+        typeof parsed.instruction === "string" ? parsed.instruction : "",
+    };
+  } catch {
+    return EMPTY_SESSION; // unparseable / unavailable storage
+  }
+}
+
+export function saveAnnotations(key: string, s: AnnotationSession): void {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(s));
+  } catch {
+    /* private mode / quota — best-effort */
+  }
+}
+
+export function clearAnnotations(key: string): void {
+  try {
+    window.localStorage.removeItem(key);
+  } catch {
+    /* ignore */
+  }
+}
+
+function isAnnotation(v: unknown): v is Annotation {
+  if (typeof v !== "object" || v === null) return false;
+  const o = v as Record<string, unknown>;
+  return (
+    typeof o.id === "string" &&
+    typeof o.cellId === "string" &&
+    typeof o.key === "string" &&
+    typeof o.note === "string"
+  );
+}
+
+/**
+ * Serialize a session to agent-ready markdown, grouped by cell (first-seen
+ * order). Each item carries type+key, the source query, the displayed columns,
+ * the intent tag, and the note — enough for an agent to act by slug.
+ */
+export function serializeAnnotations(
+  notebook: Notebook,
+  label: string,
+  session: AnnotationSession,
+): string {
+  const lines: string[] = [
+    `# Notebook annotations — ${notebook.title}`,
+    `> ${label}`,
+    "",
+  ];
+  const instruction = session.instruction.trim();
+  if (instruction) {
+    lines.push(instruction, "");
+  }
+  const byCell = new Map<string, Annotation[]>();
+  for (const a of session.items) {
+    const arr = byCell.get(a.cellId) ?? [];
+    arr.push(a);
+    byCell.set(a.cellId, arr);
+  }
+  for (const [cellId, items] of byCell) {
+    const first = items[0]!;
+    const q = first.queryRef ? ` · query: ${first.queryRef}` : "";
+    lines.push(`## ${cellId} (${first.lens}${q})`);
+    for (const a of items) {
+      const tag = a.intent ? `[${a.intent}] ` : "";
+      lines.push(`- ${tag}\`${a.key}\` — ${a.headline || a.key}`);
+      const ctx = contextLine(a.data);
+      if (ctx) lines.push(`  - ${ctx}`);
+      if (a.note.trim()) lines.push(`  - note: ${a.note.trim()}`);
+    }
+    lines.push("");
+  }
+  return `${lines.join("\n").trimEnd()}\n`;
+}
+
+/** A compact "col: val · col: val" context line; skips empties and long prose. */
+function contextLine(data: Record<string, unknown>): string {
+  const parts: string[] = [];
+  for (const [k, v] of Object.entries(data)) {
+    if (v === null || v === undefined || v === "") continue;
+    const s = typeof v === "object" ? JSON.stringify(v) : String(v);
+    if (s.length > 80) continue;
+    parts.push(`${k}: ${s}`);
+    if (parts.length >= 6) break;
+  }
+  return parts.join(" · ");
+}
diff --git a/packages/web/src/components/ActionList.tsx b/packages/web/src/components/ActionList.tsx
index 210d4f1..bbbd469 100644
--- a/packages/web/src/components/ActionList.tsx
+++ b/packages/web/src/components/ActionList.tsx
@@ -4,6 +4,8 @@ import type { ActionListRuntimeProps } from "@modernrelay/notebook-core";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { useAnnotation } from "../annotation-context.js";
+import { AnnotationMarker } from "./AnnotationMarker.js";
 
 interface ComponentCtx<P> {
   props: P;
@@ -51,6 +53,7 @@ export function ActionList({
   props: p,
 }: ComponentCtx<ActionListRuntimeProps>): React.ReactElement {
   const actions = useActions();
+  const annot = useAnnotation();
   const statusMap =
     useStateValue<Record<string, string>>(p.status_state ?? "/__never__") ?? {};
 
@@ -62,6 +65,8 @@ export function ActionList({
     <ul className="space-y-3">
       {p.rows.map((row, idx) => {
         const id = String(row[p.id_column] ?? "");
+        const akey = id || `#${idx}`;
+        const n = annot.numberOf(akey);
         const title = String(row[p.title_column] ?? "");
         const body = p.body_column ? String(row[p.body_column] ?? "") : "";
         const meta =
@@ -98,8 +103,20 @@ export function ActionList({
               saving ? "border-info/40 bg-info/4" : "border-border bg-card",
             )}
           >
-            <div className="min-w-0 flex-1">
+            <div
+              className={cn("min-w-0 flex-1", annot.active && "cursor-crosshair")}
+              {...(annot.active
+                ? {
+                    onClick: (e: React.MouseEvent) =>
+                      annot.annotate(
+                        { key: akey, headline: title, data: row },
+                        e,
+                      ),
+                  }
+                : {})}
+            >
               <div className="flex items-center gap-2">
+                {n !== null && <AnnotationMarker n={n} />}
                 <p className="font-medium text-foreground">{title}</p>
                 {status && (
                   <Badge variant={STATUS_VARIANT[status] ?? "secondary"}>
@@ -138,7 +155,7 @@ export function ActionList({
                         ? "outline"
                         : (BUTTON_VARIANT[act.variant ?? "default"] ?? "outline")
                     }
-                    disabled={saving}
+                    disabled={saving || annot.active}
                     aria-pressed={isCurrent}
                     onClick={() => fireAction(actions, act, row, id, p.runtime?.cell_id)}
                   >
diff --git a/packages/web/src/components/AnnotationMarker.tsx b/packages/web/src/components/AnnotationMarker.tsx
new file mode 100644
index 0000000..75c0f1a
--- /dev/null
+++ b/packages/web/src/components/AnnotationMarker.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { A } from "./annotation-style.js";
+
+/**
+ * A numbered circular pin (agentation's annotation marker) — 22px blue circle
+ * with the annotation's 1-based order in white.
+ */
+export function AnnotationMarker({ n }: { n: number }): React.ReactElement {
+  return (
+    <span
+      aria-label={`annotation ${n}`}
+      title={`annotation ${n}`}
+      className="inline-flex size-[22px] shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-semibold text-white"
+      style={{
+        background: A.blue,
+        boxShadow: A.markerShadow,
+        fontFamily: A.font,
+      }}
+    >
+      {n}
+    </span>
+  );
+}
diff --git a/packages/web/src/components/AnnotationPopup.tsx b/packages/web/src/components/AnnotationPopup.tsx
new file mode 100644
index 0000000..a3cff58
--- /dev/null
+++ b/packages/web/src/components/AnnotationPopup.tsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Trash2Icon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { AnnotationIntent } from "../annotations-store.js";
+import type { PendingAnnotation } from "../annotation-context.js";
+import { A } from "./annotation-style.js";
+
+const INTENTS: AnnotationIntent[] = ["fix", "change", "question", "approve"];
+
+/**
+ * Anchored note popup — a faithful port of agentation's annotation popup
+ * (#1a1a1a card, 16px radius, soft drop + 1px inner ring, single-line header,
+ * rows=2 textarea, accent-focus, delete pinned left, pill actions). Centered
+ * under the clicked entity. Parent keys this by entity id so state resets.
+ */
+export function AnnotationPopup({
+  pending,
+  onSave,
+  onRemove,
+  onClose,
+}: {
+  pending: PendingAnnotation;
+  onSave: (note: string, intent?: AnnotationIntent) => void;
+  onRemove: (id: string) => void;
+  onClose: () => void;
+}): React.ReactElement {
+  const [note, setNote] = useState(pending.existing?.note ?? "");
+  const [intent, setIntent] = useState<AnnotationIntent | undefined>(
+    pending.existing?.intent,
+  );
+  const [focused, setFocused] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    ref.current?.focus();
+  }, []);
+
+  const save = (): void => onSave(note.trim(), intent);
+
+  // Centered under the entity (agentation anchors with translateX(-50%)).
+  const center = pending.rect.left + pending.rect.width / 2;
+  const left = Math.min(Math.max(center, 148), Math.max(148, window.innerWidth - 148));
+  const top = Math.min(pending.rect.bottom + 8, Math.max(8, window.innerHeight - 280));
+
+  return (
+    <>
+      <div className="fixed inset-0" style={{ zIndex: 100000 }} onClick={onClose} />
+      <div
+        role="dialog"
+        aria-label="Annotate entity"
+        className="fixed w-[280px] rounded-2xl px-4 pt-3 pb-3.5 text-white"
+        style={{
+          top,
+          left,
+          transform: "translateX(-50%)",
+          background: A.surface,
+          boxShadow: A.shadow,
+          fontFamily: A.font,
+          zIndex: 100001,
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Single-line header — the entity (agentation's `.element`). */}
+        <div className="mb-[0.5625rem] flex items-center gap-1.5 truncate text-xs">
+          <span className="font-mono text-white/70">{pending.draft.key}</span>
+          {pending.draft.headline && pending.draft.headline !== pending.draft.key && (
+            <span className="truncate text-white/40">{pending.draft.headline}</span>
+          )}
+        </div>
+
+        <textarea
+          ref={ref}
+          value={note}
+          onChange={(e) => setNote(e.target.value)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              save();
+            }
+            if (e.key === "Escape") onClose();
+          }}
+          placeholder="Note for the agent…"
+          rows={2}
+          className="box-border w-full resize-none rounded-lg border bg-white/5 px-2.5 py-2 text-[0.8125rem] text-white outline-none placeholder:text-white/35"
+          style={{ borderColor: focused ? A.accent : "rgba(255,255,255,0.15)" }}
+        />
+
+        {/* Intent (our addition, kept compact). */}
+        <div className="mt-2 flex flex-wrap gap-1">
+          {INTENTS.map((it) => {
+            const on = intent === it;
+            return (
+              <button
+                key={it}
+                type="button"
+                onClick={() => setIntent((cur) => (cur === it ? undefined : it))}
+                className={cn(
+                  "rounded-full border px-2 py-0.5 text-[0.6875rem] capitalize transition-colors",
+                  on
+                    ? "border-transparent text-white"
+                    : "border-white/15 text-white/50 hover:text-white/80",
+                )}
+                style={on ? { background: A.accent } : undefined}
+              >
+                {it}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Actions: delete pinned left (margin-right:auto), cancel + submit right. */}
+        <div className="mt-2 flex items-center justify-end gap-1.5">
+          {pending.existing && (
+            <button
+              type="button"
+              aria-label="Delete annotation"
+              title="Delete"
+              onClick={() => onRemove(pending.existing!.id)}
+              className="mr-auto flex size-7 items-center justify-center rounded-full text-white/40 transition-colors hover:bg-[color:var(--ag-red-bg)] hover:text-[color:var(--ag-red)]"
+              style={
+                {
+                  ["--ag-red" as string]: A.red,
+                  ["--ag-red-bg" as string]: "color-mix(in srgb, " + A.red + " 25%, transparent)",
+                } as React.CSSProperties
+              }
+            >
+              <Trash2Icon className="size-3.5" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-2xl px-3.5 py-1.5 text-xs font-medium text-white/50 transition-colors hover:bg-white/10 hover:text-white/80"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={save}
+            disabled={note.trim() === "" && !pending.existing}
+            className="rounded-2xl px-3.5 py-1.5 text-xs font-medium text-white transition-[filter] hover:brightness-90"
+            style={{ background: A.accent, opacity: note.trim() || pending.existing ? 1 : 0.4 }}
+          >
+            {pending.existing ? "Save" : "Add"}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/web/src/components/AnnotationToolbar.tsx b/packages/web/src/components/AnnotationToolbar.tsx
new file mode 100644
index 0000000..33cd045
--- /dev/null
+++ b/packages/web/src/components/AnnotationToolbar.tsx
@@ -0,0 +1,225 @@
+import React, { useState } from "react";
+import {
+  CheckIcon,
+  ClipboardIcon,
+  ListIcon,
+  PencilIcon,
+  Trash2Icon,
+  XIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Annotation, AnnotationSession } from "../annotations-store.js";
+import { A } from "./annotation-style.js";
+
+/**
+ * Floating bottom-right control — a faithful port of agentation's toolbar:
+ * a collapsed 44px circle (annotate toggle) that expands to a pill of 34px
+ * circular control buttons with a count badge. An optional list panel opens
+ * above it (its "settings panel" position).
+ */
+export function AnnotationToolbar({
+  active,
+  onToggleActive,
+  session,
+  onInstruction,
+  onRemove,
+  onClear,
+  onCopy,
+}: {
+  active: boolean;
+  onToggleActive: (next: boolean) => void;
+  session: AnnotationSession;
+  onInstruction: (s: string) => void;
+  onRemove: (id: string) => void;
+  onClear: () => void;
+  onCopy: () => Promise<boolean>;
+}): React.ReactElement {
+  const count = session.items.length;
+  const expanded = active || count > 0;
+  const [showList, setShowList] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copy = (): void => {
+    void onCopy().then((ok) => {
+      if (!ok) return;
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  // Collapsed FAB: a 44px circle that turns annotate mode on.
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        onClick={() => onToggleActive(true)}
+        title="Annotate"
+        aria-label="Annotate"
+        className="fixed bottom-5 right-5 flex size-11 items-center justify-center rounded-full text-white transition-colors hover:bg-[#2a2a2a] active:scale-95"
+        style={{ background: A.surface, boxShadow: A.barShadow, zIndex: 100000, fontFamily: A.font }}
+      >
+        <PencilIcon className="size-5" />
+      </button>
+    );
+  }
+
+  // Numbered list grouped by cell (1-based global order).
+  const numberById = new Map<string, number>();
+  session.items.forEach((a, i) => numberById.set(a.id, i + 1));
+  const groups: Array<[string, Annotation[]]> = [];
+  const byCell = new Map<string, Annotation[]>();
+  for (const a of session.items) {
+    let arr = byCell.get(a.cellId);
+    if (!arr) {
+      arr = [];
+      byCell.set(a.cellId, arr);
+      groups.push([a.cellId, arr]);
+    }
+    arr.push(a);
+  }
+
+  return (
+    <div className="fixed bottom-5 right-5 flex flex-col items-end" style={{ zIndex: 100000, fontFamily: A.font }}>
+      {showList && (
+        <div
+          className="mb-2 max-h-[60vh] w-80 max-w-[calc(100vw-2.5rem)] overflow-y-auto rounded-2xl p-3 text-white"
+          style={{ background: A.surface, boxShadow: A.shadow }}
+        >
+          <textarea
+            value={session.instruction}
+            onChange={(e) => onInstruction(e.target.value)}
+            placeholder="Overall instruction for the agent (optional)…"
+            rows={2}
+            className="mb-3 box-border w-full resize-none rounded-lg border border-white/15 bg-white/5 px-2.5 py-2 text-[0.8125rem] text-white outline-none placeholder:text-white/35 focus:border-[color:var(--ag-accent)]"
+            style={{ ["--ag-accent" as string]: A.accent }}
+          />
+          {count === 0 ? (
+            <p className="py-4 text-center text-xs text-white/40">
+              Click an entity to annotate it.
+            </p>
+          ) : (
+            <ul className="space-y-3">
+              {groups.map(([cellId, items]) => (
+                <li key={cellId}>
+                  <div className="mb-1 text-xs font-medium text-white/45">{cellId}</div>
+                  <ul className="space-y-1">
+                    {items.map((a) => (
+                      <li
+                        key={a.id}
+                        className="group flex items-start gap-2 rounded-lg border border-white/10 bg-white/5 px-2 py-1.5"
+                      >
+                        <span
+                          className="mt-0.5 inline-flex size-[18px] shrink-0 items-center justify-center rounded-full text-[0.625rem] font-semibold text-white"
+                          style={{ background: A.blue }}
+                        >
+                          {numberById.get(a.id)}
+                        </span>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-1.5">
+                            {a.intent && (
+                              <span className="rounded-full border border-white/15 px-1.5 text-[10px] capitalize text-white/55">
+                                {a.intent}
+                              </span>
+                            )}
+                            <span className="truncate font-mono text-xs text-white/80">{a.key}</span>
+                          </div>
+                          {a.note && <p className="mt-0.5 text-xs text-white/85">{a.note}</p>}
+                        </div>
+                        <button
+                          type="button"
+                          aria-label="Remove annotation"
+                          onClick={() => onRemove(a.id)}
+                          className="text-white/40 opacity-0 transition-opacity hover:text-white group-hover:opacity-100"
+                        >
+                          <XIcon className="size-3.5" />
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+
+      <div
+        className="relative flex h-11 items-center gap-1.5 rounded-3xl px-1.5 text-white"
+        style={{ background: A.surface, boxShadow: A.barShadow }}
+      >
+        {count > 0 && (
+          <span
+            className="absolute -right-[13px] -top-[13px] flex h-[18px] min-w-[18px] items-center justify-center rounded-[9px] px-[5px] text-[0.625rem] font-semibold text-white"
+            style={{
+              background: A.accent,
+              boxShadow: "0 1px 3px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.04)",
+            }}
+          >
+            {count}
+          </span>
+        )}
+        <ControlButton active={active} onClick={() => onToggleActive(!active)} title="Annotate">
+          <PencilIcon className="size-[18px]" />
+        </ControlButton>
+        <ControlButton onClick={copy} disabled={count === 0} title="Copy for agent">
+          {copied ? (
+            <CheckIcon className="size-[18px]" style={{ color: A.green }} />
+          ) : (
+            <ClipboardIcon className="size-[18px]" />
+          )}
+        </ControlButton>
+        <ControlButton active={showList} onClick={() => setShowList((s) => !s)} title="Annotations">
+          <ListIcon className="size-[18px]" />
+        </ControlButton>
+        <ControlButton danger onClick={onClear} disabled={count === 0} title="Clear all">
+          <Trash2Icon className="size-[18px]" />
+        </ControlButton>
+      </div>
+    </div>
+  );
+}
+
+/** A 34px circular toolbar control button (agentation's `.controlButton`). */
+function ControlButton({
+  children,
+  onClick,
+  title,
+  active = false,
+  danger = false,
+  disabled = false,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  title: string;
+  active?: boolean;
+  danger?: boolean;
+  disabled?: boolean;
+}): React.ReactElement {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      aria-label={title}
+      aria-pressed={active}
+      data-active={active || undefined}
+      data-danger={danger || undefined}
+      className={cn(
+        "flex size-[34px] items-center justify-center rounded-full text-white/85 transition-colors active:scale-95",
+        "disabled:cursor-not-allowed disabled:opacity-35",
+        !active && "hover:bg-white/[0.12] hover:text-white",
+      )}
+      style={
+        active
+          ? {
+              color: danger ? A.red : A.accent,
+              background: `color-mix(in srgb, ${danger ? A.red : A.accent} 25%, transparent)`,
+            }
+          : undefined
+      }
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/packages/web/src/components/Card.tsx b/packages/web/src/components/Card.tsx
index c0eae65..c03caf7 100644
--- a/packages/web/src/components/Card.tsx
+++ b/packages/web/src/components/Card.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import type { CardRuntimeProps } from "@modernrelay/notebook-core";
 import { Badge } from "@/components/ui/badge";
 import { CopyButton } from "@/components/ui/copy-button";
+import { cn } from "@/lib/utils";
+import { useAnnotation } from "../annotation-context.js";
+import { AnnotationMarker } from "./AnnotationMarker.js";
 
 interface ComponentCtx<P> {
   props: P;
@@ -15,6 +18,7 @@ function fmt(v: unknown): string {
 export function Card({
   props: p,
 }: ComponentCtx<CardRuntimeProps>): React.ReactElement {
+  const annot = useAnnotation();
   const row = p.rows[0];
   if (!row) {
     return (
@@ -34,11 +38,28 @@ export function Card({
         badge: false,
       }));
   const title = p.title_column ? fmt(row[p.title_column]) : "";
+  const akey =
+    title || (fields[0] ? fmt(row[fields[0].key]) : "") || "card";
+  const n = annot.numberOf(akey);
   // Frameless: the cell card is the only frame (no inner border/padding).
   return (
-    <div>
+    <div
+      className={cn(annot.active && "cursor-crosshair")}
+      {...(annot.active
+        ? {
+            onClick: (e: React.MouseEvent) =>
+              annot.annotate(
+                { key: akey, headline: title || akey, data: row },
+                e,
+              ),
+          }
+        : {})}
+    >
       {title && (
-        <h3 className="mb-3 text-base font-semibold text-foreground">{title}</h3>
+        <h3 className="mb-3 flex items-center gap-1.5 text-base font-semibold text-foreground">
+          {n !== null && <AnnotationMarker n={n} />}
+          {title}
+        </h3>
       )}
       <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
         {fields.map((f) => {
diff --git a/packages/web/src/components/Subgraph.tsx b/packages/web/src/components/Subgraph.tsx
index b7632e1..bcdb7ec 100644
--- a/packages/web/src/components/Subgraph.tsx
+++ b/packages/web/src/components/Subgraph.tsx
@@ -1,5 +1,8 @@
 import React from "react";
 import type { SubgraphRuntimeProps } from "@modernrelay/notebook-core";
+import { cn } from "@/lib/utils";
+import { useAnnotation } from "../annotation-context.js";
+import { AnnotationMarker } from "./AnnotationMarker.js";
 
 interface ComponentCtx<P> {
   props: P;
@@ -15,6 +18,7 @@ export function Subgraph({
   props: p,
 }: ComponentCtx<SubgraphRuntimeProps>): React.ReactElement {
   const { center, depth, rows } = p;
+  const annot = useAnnotation();
   if (rows.length === 0) {
     return (
       <p className="text-sm italic text-muted-foreground">(no neighborhood)</p>
@@ -42,29 +46,55 @@ export function Subgraph({
       <p className="text-xs uppercase tracking-wide text-muted-foreground">
         {center.type} · depth {depth}
       </p>
-      {[...groups.values()].map((g) => (
-        <div key={g.centerId} className="space-y-1">
-          <p className="text-sm font-semibold text-foreground">
-            ● {g.centerLabel || g.centerId}
-          </p>
-          <ul className="ml-3 space-y-0.5 text-sm">
-            {g.edges.map((e, idx) => {
-              if (e.predicate === null && e.neighbor === null) return null;
-              return (
-                <li
-                  key={idx}
-                  className="flex items-center gap-2 text-foreground"
-                >
-                  <span className="font-mono text-xs text-muted-foreground">
-                    ─{e.predicate ?? "?"}─▶
-                  </span>
-                  <span className="font-medium">{e.neighbor ?? "?"}</span>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      ))}
+      {[...groups.values()].map((g) => {
+        const n = annot.numberOf(g.centerId);
+        return (
+          <div key={g.centerId} className="space-y-1">
+            <p
+              className={cn(
+                "flex items-center gap-1.5 text-sm font-semibold text-foreground",
+                annot.active && "cursor-crosshair",
+              )}
+              {...(annot.active
+                ? {
+                    onClick: (e: React.MouseEvent) =>
+                      annot.annotate(
+                        {
+                          key: g.centerId,
+                          headline: g.centerLabel || g.centerId,
+                          data: {
+                            [center.id_column]: g.centerId,
+                            [center.label_column]: g.centerLabel,
+                            type: center.type,
+                          },
+                        },
+                        e,
+                      ),
+                  }
+                : {})}
+            >
+              {n !== null ? <AnnotationMarker n={n} /> : <span>●</span>}
+              {g.centerLabel || g.centerId}
+            </p>
+            <ul className="ml-3 space-y-0.5 text-sm">
+              {g.edges.map((e, idx) => {
+                if (e.predicate === null && e.neighbor === null) return null;
+                return (
+                  <li
+                    key={idx}
+                    className="flex items-center gap-2 text-foreground"
+                  >
+                    <span className="font-mono text-xs text-muted-foreground">
+                      ─{e.predicate ?? "?"}─▶
+                    </span>
+                    <span className="font-medium">{e.neighbor ?? "?"}</span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        );
+      })}
     </div>
   );
 }
diff --git a/packages/web/src/components/Table.tsx b/packages/web/src/components/Table.tsx
index 58d3884..f43b863 100644
--- a/packages/web/src/components/Table.tsx
+++ b/packages/web/src/components/Table.tsx
@@ -12,6 +12,8 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { CopyButton } from "@/components/ui/copy-button";
 import { cn } from "@/lib/utils";
+import { useAnnotation } from "../annotation-context.js";
+import { AnnotationMarker } from "./AnnotationMarker.js";
 
 interface ComponentCtx<P> {
   props: P;
@@ -52,6 +54,7 @@ export function Table({
 }: ComponentCtx<TableRuntimeProps>): React.ReactElement {
   const { columns, rows, dense, select_state, select_column } = p;
   const actions = useActions();
+  const annot = useAnnotation();
   // Read the current selection so we can highlight the active row.
   const selected = useStateValue<string>(select_state ?? "/__never__");
 
@@ -59,11 +62,28 @@ export function Table({
     return <p className="text-sm italic text-muted-foreground">(no rows)</p>;
   }
 
-  // Rows are clickable only when the author opts in with both props.
+  // Rows are clickable for selection only when the author opts in with both
+  // props; in annotate mode every row is clickable to attach a note.
   const selectable = Boolean(select_state && select_column);
   const rowValue = (row: Record<string, unknown>): string =>
     select_column ? String(row[select_column] ?? "") : "";
 
+  // Annotation identity/headline: prefer the select column, else the first
+  // column, for the key; a title-ish column (or first) for the headline.
+  const firstCol = columns[0]?.key;
+  const titleCol =
+    columns.find((c) => /title|name|label/i.test(c.key))?.key ?? firstCol;
+  const annotKey = (row: Record<string, unknown>, idx: number): string => {
+    const v = select_column
+      ? String(row[select_column] ?? "")
+      : firstCol
+        ? String(row[firstCol] ?? "")
+        : "";
+    return v || `#${idx}`;
+  };
+  const headlineOf = (row: Record<string, unknown>): string =>
+    titleCol ? String(row[titleCol] ?? "") : "";
+
   // Numeric columns right-align (with tabular figures); authors can override.
   const alignByKey: Record<string, "left" | "right"> = {};
   for (const col of columns) {
@@ -88,24 +108,37 @@ export function Table({
       <TableBody>
         {rows.map((row, idx) => {
           const isSelected = selectable && rowValue(row) === selected;
+          const key = annotKey(row, idx);
+          const n = annot.numberOf(key);
+          const clickable = annot.active || selectable;
           return (
             <TableRow
               key={idx}
               className={cn(
-                selectable && "cursor-pointer hover:bg-muted/50",
+                clickable && "cursor-pointer hover:bg-muted/50",
+                annot.active && "cursor-crosshair",
                 isSelected && "bg-accent",
+                n !== null && "bg-primary/5",
               )}
-              {...(selectable
+              {...(clickable
                 ? {
-                    onClick: () =>
-                      actions.execute({
-                        action: "setState",
-                        params: { statePath: select_state, value: rowValue(row) },
-                      }),
+                    onClick: (e: React.MouseEvent) =>
+                      annot.active
+                        ? annot.annotate(
+                            { key, headline: headlineOf(row), data: row },
+                            e,
+                          )
+                        : actions.execute({
+                            action: "setState",
+                            params: {
+                              statePath: select_state,
+                              value: rowValue(row),
+                            },
+                          }),
                   }
                 : {})}
             >
-              {columns.map((col) => {
+              {columns.map((col, i) => {
                 const value = formatCell(row[col.key], col.format);
                 const content = col.wrap ? (
                   <div className="max-w-prose leading-snug">{value}</div>
@@ -116,17 +149,17 @@ export function Table({
                 return (
                   <TableCell
                     key={col.key}
-                    // Wrap by default (overriding the ui-kit's nowrap) so the
-                    // w-full table always shrinks to its container. `wrap`
-                    // columns cap line length (max-w-prose); `copy` columns get a
-                    // copy-to-clipboard button revealed on cell hover; `badge`
-                    // columns render the value as a chip (enums). Tables stay mono.
                     className={cn(
                       "group align-top whitespace-normal break-words font-mono text-xs",
                       alignRight && "text-right tabular-nums",
                       dense && "py-1",
                     )}
                   >
+                    {i === 0 && n !== null && (
+                      <span className="mr-1 inline-flex align-middle">
+                        <AnnotationMarker n={n} />
+                      </span>
+                    )}
                     {col.badge ? (
                       value ? (
                         <Badge variant="secondary">{value}</Badge>
diff --git a/packages/web/src/components/annotation-style.ts b/packages/web/src/components/annotation-style.ts
new file mode 100644
index 0000000..410af31
--- /dev/null
+++ b/packages/web/src/components/annotation-style.ts
@@ -0,0 +1,21 @@
+/**
+ * agentation's visual language — a dark floating chrome that is its own surface
+ * regardless of the page theme (so it reads identically over a light or dark
+ * notebook). Hex/shadow values lifted from agentation's SCSS modules
+ * (annotation-popup-css, page-toolbar-css, annotation-marker).
+ */
+export const A = {
+  blue: "#3b82f6",
+  /** Popup/submit accent (agentation's default `accentColor`). */
+  accent: "#3c82f7",
+  green: "#22c55e",
+  red: "#ef4444",
+  surface: "#1a1a1a",
+  font: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  /** Popup/tooltip shadow — soft drop + 1px inner ring. */
+  shadow: "0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08)",
+  /** Toolbar/panel shadow. */
+  barShadow: "0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
+  /** Numbered marker shadow. */
+  markerShadow: "0 2px 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.04)",
+} as const;