Journal destination: the notebook holds routed questions and observations (#161)

.agents/skills/ask-matt/PHASE-BOUNDARIES.md

@@ -0,0 +1,55 @@
+# Phase boundaries
+
+A **phase** is a chunk of work inside a session — the grilling, the implementation, the QA. The definition is fuzzy on purpose: a phase ends when you think *"ok, we're done with that"*.
+
+The **phase boundary** is the gap between two phases, and it is the only place this decision belongs. Mid-phase there is no decision to make — continue, or split the work that's left into subagents. Compacting mid-phase makes the agent lose the thread.
+
+## The five options
+
+| Option       | What it does                                                    |
+| ------------ | --------------------------------------------------------------- |
+| **Continue** | Stay in the session. No context switch at all.                    |
+| **`/clear`** | Empty the context window and start from nothing.                  |
+| **`/handoff`** | Write a portable markdown file and seed a session anywhere with it. |
+| **Subagent** | Send the task to its own context window and get a report back.     |
+| **`/compact`** | Compress this context and seed a fresh session with the summary.  |
+
+## The tree
+
+Work top to bottom at the boundary. The first **yes** wins.
+
+**1. Can you continue in this session?** Two things make the answer yes: the next phase needs this phase as a **primary source**, or you have enough [smart zone](https://www.aihero.dev/ai-coding-dictionary/smart-zone) left (~150k tokens) for the next phase to fit. Grilling → implementation is the standard yes: the implementation wants the reasoning verbatim, not a summary of it. Continue costs nothing and loses nothing, so rule it out before anything else.
+
+**2. Is the context irrelevant to what comes next?** Is everything in this session — the exploration, the decisions, the dead ends — disposable? If so, **`/clear`**. It is the cheapest move on the board: it takes no time and hands back the whole window. `/clear` also isn't terminal — the old session stays resumable.
+
+The cost of getting this wrong is one-way. Clear a *relevant* context and you lose the **why** behind what you built, and no amount of reading the diff back gets it returned.
+
+**3. Do you need to hand off?** `/handoff` is narrow. You need it only when you are:
+
+- swapping to a **new harness** (Claude → Codex),
+- moving to a **new directory** or repo,
+- sending the work to a **colleague**,
+- or forking a side task you found **mid-phase** without derailing what you're doing.
+
+That list is the whole clause. What `/handoff` buys is **portability** — a file that travels. If nothing is travelling, you don't need it.
+
+**4. Can the task be done AFK?** Is it scoped tightly enough to run with you away from the keyboard, no steering? Then send it to a **subagent** and leave this session untouched. Automated review is the standard case: the agent reads the diff and reports, and you aren't needed while it does.
+
+**5. Otherwise, `/compact`.** Relevant context, same harness, same directory, and you need to stay in the loop — this is where the tree lands, and it lands here often. Pass it an instruction (`/compact we're going to QA this area`) so the summary keeps what the next phase needs.
+
+`/compact` is the **default, not the first reach**. It sits at the bottom because the four questions above it are all cheaper or more precise. The failure mode when people start here is a fresh session that is confidently wrong about a decision the summary flattened.
+
+## Primary and secondary sources
+
+Every move except **Continue** turns a **primary source** into a **secondary source** — the session as it happened, replaced by a summary of it. The trade is always the same shape:
+
+| Source                            | Information | Noise | Room to move |
+| --------------------------------- | ----------- | ----- | ------------ |
+| Primary (Continue)                | Full        | Lots  | Little       |
+| Secondary (`/compact`, `/handoff`) | Lossy       | Less  | Lots         |
+
+This is why question 1 comes first. You only pay the lossiness when staying costs more than it saves.
+
+## These are judgement calls
+
+The questions are not objective — each has taste in it, and the same boundary can go two ways on two days. The value is in asking them **in order**, at the boundary rather than in the middle of the work.

app/globals.css

@@ -2722,6 +2722,121 @@ footer {
   font-size: 0.85rem;
 }
 
+/* The notebook: journal-routed Threads read back as entries. */
+.notebook-filters {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.notebook-filter {
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.8rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+
+.notebook-filter-on {
+  border-color: var(--line-strong);
+  color: var(--ink);
+  background: var(--surface);
+}
+
+.notebook-entries {
+  display: grid;
+  gap: 0.75rem;
+  /* Keep the tab bar clear of the last entry. */
+  padding-bottom: 4.5rem;
+}
+
+.notebook-entry {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.notebook-entry-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.notebook-entry-head h2 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  line-height: 1.1;
+  font-size: 1.1rem;
+}
+
+.notebook-entry-head h2 a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.notebook-entry-head h2 a:hover {
+  text-decoration: underline;
+}
+
+.notebook-draft-flag {
+  padding: 0.1rem 0.55rem;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.notebook-routed {
+  margin-left: auto;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 0.7rem;
+}
+
+.notebook-words {
+  margin: 0;
+  padding: 0.15rem 0 0.15rem 0.85rem;
+  border-left: 2px solid var(--line-strong);
+}
+
+.notebook-words p {
+  margin: 0 0 0.35rem;
+}
+
+.notebook-words p:last-child {
+  margin-bottom: 0;
+}
+
+.notebook-no-report {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.notebook-entry-links {
+  margin: 0;
+  font-size: 0.85rem;
+}
+
 .journal-followup {
   display: grid;
   gap: 0.5rem;

app/journal/notebook/page.tsx

@@ -0,0 +1,14 @@
+import { Suspense } from "react";
+import { JournalNotebook } from "@/components/journal-notebook";
+
+export const metadata = {
+  title: "Notebook — Walking Thoughts",
+};
+
+export default function NotebookPage() {
+  return (
+    <Suspense>
+      <JournalNotebook />
+    </Suspense>
+  );
+}

components/journal-notebook.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { AppNav } from "@/components/app-nav";
+import { DataHandlingDisclosure } from "@/components/data-handling-disclosure";
+import { EnrichmentReport } from "@/components/enrichment-report";
+import { SyncRuntime } from "@/components/sync-runtime";
+import {
+  artifactHref,
+  artifactsByThread,
+  loadArtifacts,
+} from "@/lib/artifacts/client";
+import { loadThreadEnrichments } from "@/lib/enrichment/thread-view";
+import {
+  draftCandidates,
+  journalThreads,
+  notebookEntry,
+  type NotebookEntry,
+} from "@/lib/journal/notebook";
+import { getCaptureStore } from "@/lib/local-capture/store";
+
+/**
+ * The notebook: where `route = journal` Threads land (docs/desk.md, D2).
+ * Each entry is the walker's words with the full Enrichment report readable
+ * in place, linked to its Thread and its Artifact page. Draft-worthy entries
+ * carry the post-candidate flag and can be listed together — the queue the
+ * tweet/article pipeline pulls from. The entry lives exactly as long as the
+ * Route does: un-routing at the desk removes it, the Thread keeps its
+ * history.
+ */
+async function loadNotebookEntries(): Promise<NotebookEntry[]> {
+  const store = getCaptureStore();
+  const [threads, artifacts] = await Promise.all([
+    store.listRecentThreads(),
+    loadArtifacts(),
+  ]);
+  const pages = artifactsByThread(artifacts);
+  return Promise.all(
+    journalThreads(threads).map(async (thread) => {
+      const [{ captures }, enrichments] = await Promise.all([
+        store.listThread(thread.id),
+        loadThreadEnrichments(thread.id),
+      ]);
+      return notebookEntry(thread, {
+        captures,
+        enrichments,
+        artifactId: pages.get(thread.id)?.id ?? null,
+      });
+    }),
+  );
+}
+
+export function JournalNotebook() {
+  const searchParams = useSearchParams();
+  const draftsOnly = searchParams.get("drafts") === "1";
+  const [entries, setEntries] = useState<NotebookEntry[] | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    void loadNotebookEntries().then((next) => {
+      if (active) setEntries(next);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const drafts = entries ? draftCandidates(entries) : [];
+  const visible = draftsOnly ? drafts : (entries ?? []);
+
+  return (
+    <div className="journal notebook">
+      <SyncRuntime />
+      <header className="journal-topbar">
+        <Link className="brand" href="/" aria-label="Walking Thoughts home">
+          <span className="brand-mark" aria-hidden="true">
+            W
+          </span>
+          <span>Notebook</span>
+        </Link>
+        <div className="journal-status" role="status">
+          <Link className="topbar-link" href="/journal">
+            Map
+          </Link>
+          <span data-testid="notebook-count">
+            {entries === null
+              ? "Opening the notebook…"
+              : `${entries.length} ${entries.length === 1 ? "entry" : "entries"} · ${drafts.length} draft ${drafts.length === 1 ? "candidate" : "candidates"}`}
+          </span>
+        </div>
+      </header>
+
+      <nav className="notebook-filters" aria-label="Notebook sections">
+        <Link
+          className={
+            draftsOnly ? "notebook-filter" : "notebook-filter notebook-filter-on"
+          }
+          href="/journal/notebook"
+        >
+          All entries
+        </Link>
+        {/* URL-carried like the desk's facets, so the queue is linkable. */}
+        <Link
+          className={
+            draftsOnly ? "notebook-filter notebook-filter-on" : "notebook-filter"
+          }
+          href="/journal/notebook?drafts=1"
+          data-testid="notebook-drafts-toggle"
+        >
+          Draft candidates
+        </Link>
+      </nav>
+
+      {entries !== null && visible.length === 0 ? (
+        <section className="journal-empty" role="status">
+          <h1>
+            {draftsOnly
+              ? "No draft candidates yet"
+              : "Nothing in the notebook yet"}
+          </h1>
+          <p>
+            {draftsOnly
+              ? "Entries the Enrichment reads as the seed of a post are flagged and gather here."
+              : "Route a Thread to Journal at the desk and it files in here with its report."}
+          </p>
+        </section>
+      ) : null}
+
+      <section className="notebook-entries" data-testid="notebook-entries">
+        {visible.map((entry) => (
+          <article
+            key={entry.threadId}
+            className="notebook-entry"
+            data-testid={`notebook-entry-${entry.threadId}`}
+          >
+            <header className="notebook-entry-head">
+              <h2>
+                <Link
+                  href={`/threads/${entry.threadId}`}
+                  data-testid="notebook-thread-link"
+                >
+                  {entry.title}
+                </Link>
+              </h2>
+              {entry.draftWorthy ? (
+                <span
+                  className="notebook-draft-flag"
+                  data-testid="notebook-draft-flag"
+                >
+                  Draft candidate
+                </span>
+              ) : null}
+              {entry.routedAt ? (
+                <time className="notebook-routed" dateTime={entry.routedAt}>
+                  {new Date(entry.routedAt).toLocaleDateString(undefined, {
+                    month: "short",
+                    day: "numeric",
+                  })}
+                </time>
+              ) : null}
+            </header>
+
+            {entry.words.length > 0 ? (
+              <blockquote
+                className="notebook-words"
+                aria-label="The walker's words"
+              >
+                {entry.words.map((line, index) => (
+                  <p key={index}>{line}</p>
+                ))}
+              </blockquote>
+            ) : null}
+
+            {entry.report ? (
+              <EnrichmentReport enrichment={entry.report} />
+            ) : (
+              <p className="notebook-no-report" role="note">
+                No report yet — the Enrichment lands here when it finishes.
+              </p>
+            )}
+
+            {entry.artifactId ? (
+              <p className="notebook-entry-links">
+                <Link
+                  href={artifactHref(entry.artifactId)}
+                  data-testid="notebook-artifact-link"
+                >
+                  Artifact page
+                </Link>
+              </p>
+            ) : null}
+          </article>
+        ))}
+      </section>
+
+      <DataHandlingDisclosure />
+      <AppNav />
+    </div>
+  );
+}