launching

.env.example

@@ -52,6 +52,8 @@ R2_PUBLIC_BASE_URL=
 # Cheaper: LLM_MODEL=openai/glm-5.3-flash. Free for local dev: openai/glm-4.7-flash
 LLM_MODEL=openai/glm-5.3
 LLM_FAST_MODEL=openai/glm-5.3-flash
+# Chat triage classifier (greetings, off topic, follow ups). Empty = LLM_FAST_MODEL.
+LLM_TRIAGE_MODEL=
 LLM_API_BASE=https://api.z.ai/api/paas/v4
 LLM_API_KEY=
 LLM_TEMPERATURE=1.0

backend/app/config.py

@@ -63,6 +63,8 @@ class Settings(BaseSettings):
     # LLM (LiteLLM model strings; Z.ai GLM by default)
     llm_model: str = "openai/glm-5.3"
     llm_fast_model: str = "openai/glm-5.3-flash"
+    # Chat triage (small talk, off topic, follow up rewriting). Empty = LLM_FAST_MODEL.
+    llm_triage_model: str = ""
     llm_api_base: str = "https://api.z.ai/api/paas/v4"
     llm_api_key: str = ""
     llm_temperature: float = 1.0  # Z.ai recommends 1.0 for GLM-5.x

backend/app/llm/provider.py

@@ -52,6 +52,14 @@ def fast_lm() -> dspy.LM:
     return _build(settings.llm_fast_model, effort="low", temperature=None, max_tokens=8000)
 
 
+@lru_cache
+def triage_lm() -> dspy.LM:
+    """Cheap model that decides whether a chat message needs research at all."""
+    if not settings.llm_triage_model:
+        return fast_lm()
+    return _build(settings.llm_triage_model, effort="low", temperature=0.2, max_tokens=2000)
+
+
 def configure_default() -> None:
     dspy.configure(lm=main_lm(), adapter=dspy.JSONAdapter())
 

backend/app/llm/signatures.py

@@ -120,7 +120,9 @@ class ResearchArchive(dspy.Signature):
     ### heading only when the answer has distinct parts. Put [n] markers right after the sentence
     or list item they support. Never use em dashes."""
 
-    question: str = dspy.InputField()
+    question: str = dspy.InputField(desc="A standalone question (follow ups already resolved)")
+    conversation: str = dspy.InputField(desc="Recent turns of this chat, oldest first. Use it for context "
+                                              "and to avoid repeating yourself; cite only what you read now")
     archive_guide: str = dspy.InputField(desc="How this notebook's files are laid out")
     answer: str = dspy.OutputField(desc="Answer with [n] citation markers")
     citations: list[FileCitation] = dspy.OutputField()
@@ -253,3 +255,25 @@ class EvergreenScore(dspy.Signature):
     score: float = dspy.OutputField(desc="0 (dated) to 1 (timeless)")
     reason: str = dspy.OutputField()
     angle: str = dspy.OutputField(desc="One line hook for resharing now")
+
+
+class TriageMessage(dspy.Signature):
+    """Triage a chat message sent to a research assistant that answers ONLY from one writer's archive of
+    posts. Decide what it needs before any expensive research runs.
+    - archive: needs facts, ideas, quotes or opinions from the writer's posts (including follow ups
+      like "say more", "what about 2023?", "compare that with pricing").
+    - chitchat: greetings, thanks, reactions, small talk.
+    - about_app: how to use Notestack itself (sources, notebooks, audio, launch kits).
+    - off_topic: general knowledge, coding, math, news, or anything the posts cannot answer.
+    For archive, rewrite the message into a standalone question using the conversation, and pick depth:
+    quick for a single fact or lookup, deep for synthesis across many posts. For the other kinds, write
+    a short, warm reply (1 to 3 sentences) that answers or gently steers back to what the archive can
+    do, suggesting one concrete question. Never use em dashes."""
+
+    conversation: str = dspy.InputField(desc="Recent turns, oldest first")
+    message: str = dspy.InputField()
+    notebook: str = dspy.InputField(desc="Notebook title and some of its post titles")
+    kind: Literal["archive", "chitchat", "about_app", "off_topic"] = dspy.OutputField()
+    standalone_question: str = dspy.OutputField(desc="For archive: the question with follow ups resolved")
+    depth: Literal["quick", "deep"] = dspy.OutputField()
+    reply: str = dspy.OutputField(desc="For non archive kinds: the reply to show. Empty for archive")

backend/app/pipeline/research.py

@@ -1,5 +1,11 @@
 """Agentic research over the file system corpus: the model explores files with list/search/read,
-then every citation is checked against the real file before it reaches the writer."""
+then every citation is checked against the real file before it reaches the writer.
+
+Cost control: every message is triaged first. Greetings and thanks are answered from a phrase list
+(no model call). Everything else gets one cheap call on the fast model that reads the recent
+conversation, answers off topic and app questions directly, and turns follow ups into standalone
+questions. Only real archive questions run the research agent, with a small step budget for simple
+lookups and the full budget for synthesis."""
 
 import re
 from collections.abc import Callable
@@ -10,8 +16,8 @@ import dspy
 from app.config import settings
 from app.corpus import Corpus, ScopedTools
 from app.llm.postprocess import strip_em_dashes
-from app.llm.provider import main_lm, track_usage
-from app.llm.signatures import ResearchArchive
+from app.llm.provider import main_lm, track_usage, triage_lm
+from app.llm.signatures import ResearchArchive, TriageMessage
 
 _MARKER = re.compile(r"\[(\d+)\]")
 
@@ -33,6 +39,87 @@ class ResearchResult:
     prompt_tokens: int = 0
     completion_tokens: int = 0
     steps: list[tuple[str, str]] = field(default_factory=list)
+    kind: str = "archive"  # archive | chitchat | about_app | off_topic
+    question: str = ""  # the standalone question that was researched
+
+
+@dataclass
+class Turn:
+    role: str  # user | assistant
+    text: str
+
+
+HISTORY_TURNS = 8
+QUICK_STEPS = 4
+
+_CHITCHAT = re.compile(
+    r"^\s*(hi|hey|hello|yo|hiya|good (morning|afternoon|evening)|thanks|thank you|thx|ty|cheers|ok(ay)?|"
+    r"cool|great|nice|awesome|perfect|got it|sounds good|bye|goodbye|see you|lol|haha)[\s!.,:)]*$",
+    re.IGNORECASE,
+)
+_GREETING = re.compile(r"^\s*(hi|hey|hello|yo|hiya|good (morning|afternoon|evening))", re.IGNORECASE)
+_BYE = re.compile(r"^\s*(bye|goodbye|see you)", re.IGNORECASE)
+
+
+def conversation_text(history: list[Turn], limit: int = HISTORY_TURNS) -> str:
+    """Last few turns, citation markers stripped, each trimmed, so the prompt stays small."""
+    if not history:
+        return "(new conversation)"
+    lines = []
+    for t in history[-limit:]:
+        text = _MARKER.sub("", t.text).strip()
+        if len(text) > 700:
+            text = text[:700].rsplit(" ", 1)[0] + " ..."
+        lines.append(f"{'Writer' if t.role == 'user' else 'Assistant'}: {text}")
+    return "\n".join(lines)
+
+
+def instant_reply(message: str, history: list[Turn]) -> str | None:
+    """Canned replies for pure small talk: no model call at all."""
+    if not _CHITCHAT.match(message):
+        return None
+    if _BYE.match(message):
+        return "Clear skies. Your archive will be here when you come back."
+    if _GREETING.match(message):
+        return ("Hi! Ask me anything about the posts in this notebook, for example what you have written "
+                "about pricing, or how your view on something changed over time.")
+    if history:
+        return "Glad that helped. Want to dig further into any of those posts?"
+    return "Ask me anything about the posts in this notebook and I will answer with citations."
+
+
+@dataclass
+class Triage:
+    kind: str
+    question: str
+    depth: str
+    reply: str
+    prompt_tokens: int = 0
+    completion_tokens: int = 0
+
+
+def triage(message: str, history: list[Turn], notebook: str) -> Triage:
+    """One cheap call: is this worth researching, and what exactly should be researched?"""
+    lm = triage_lm()
+    try:
+        with track_usage(lm) as usage, dspy.context(lm=lm):
+            pred = dspy.Predict(TriageMessage)(conversation=conversation_text(history), message=message,
+                                               notebook=notebook)
+    except Exception:
+        # If triage fails, fall back to researching the raw message rather than failing the chat.
+        return Triage("archive", message, "deep", "")
+    kind = pred.kind if pred.kind in {"archive", "chitchat", "about_app", "off_topic"} else "archive"
+    question = (pred.standalone_question or "").strip() or message
+    reply = strip_em_dashes((pred.reply or "").strip())
+    if kind != "archive" and not reply:
+        kind = "archive"  # nothing to say without research: research it
+    return Triage(kind, question, pred.depth if pred.depth in {"quick", "deep"} else "deep", reply,
+                  usage.prompt_tokens, usage.completion_tokens)
+
+
+def notebook_brief(title: str, allowed: dict[str, str]) -> str:
+    titles = list(allowed.values())[:25]
+    return f"Notebook: {title}. {len(allowed)} posts, including: " + "; ".join(titles)
 
 
 def archive_guide(tools: ScopedTools) -> str:
@@ -73,9 +160,24 @@ def research(
     allowed: dict[str, str],
     question: str,
     on_step: Callable[[str, str], None] | None = None,
+    history: list[Turn] | None = None,
+    notebook_title: str = "",
 ) -> ResearchResult:
+    history = history or []
     if not allowed:
-        return ResearchResult("This notebook has no posts yet. Add some sources first.", True, [])
+        return ResearchResult("This notebook has no posts yet. Add some sources first.", True, [], kind="chitchat")
+
+    canned = instant_reply(question, history)
+    if canned:
+        return ResearchResult(canned, False, [], kind="chitchat", question=question)
+
+    if on_step:
+        on_step("think", "Reading the conversation")
+    route = triage(question, history, notebook_brief(notebook_title, allowed))
+    if route.kind != "archive":
+        return ResearchResult(route.reply, False, [], route.prompt_tokens, route.completion_tokens,
+                              kind=route.kind, question=question)
+
     corpus.sync()
     steps: list[tuple[str, str]] = []
 
@@ -85,14 +187,16 @@ def research(
             on_step(kind, detail)
 
     tools = ScopedTools(corpus, allowed, on_step=log)
+    budget = min(QUICK_STEPS, settings.research_max_steps) if route.depth == "quick" else settings.research_max_steps
     agent = dspy.ReAct(
         ResearchArchive,
         tools=[tools.list_files, tools.search, tools.read],
-        max_iters=settings.research_max_steps,
+        max_iters=budget,
     )
     lm = main_lm()
     with track_usage(lm) as usage, dspy.context(lm=lm):
-        pred = agent(question=question, archive_guide=archive_guide(tools))
+        pred = agent(question=route.question, conversation=conversation_text(history),
+                     archive_guide=archive_guide(tools))
 
     text, cites = verify_citations(tools, pred.answer, pred.citations or [])
     unsupported = bool(pred.unsupported) or not cites
@@ -103,7 +207,9 @@ def research(
         text=strip_em_dashes(text),
         unsupported=unsupported,
         citations=cites,
-        prompt_tokens=usage.prompt_tokens,
-        completion_tokens=usage.completion_tokens,
+        prompt_tokens=usage.prompt_tokens + route.prompt_tokens,
+        completion_tokens=usage.completion_tokens + route.completion_tokens,
         steps=steps,
+        kind="archive",
+        question=route.question,
     )

backend/app/routers/notebooks.py

@@ -13,7 +13,7 @@ from app.config import settings
 from app.corpus import Corpus
 from app.llm.provider import provider_name
 from app.models import Artifact, Chat, Citation, Document, DocumentTopic, Message, Notebook, NotebookDocument, Topic
-from app.pipeline.research import research
+from app.pipeline.research import Turn, research
 from app.routers.sources import serialize_document
 from app.services.artifacts import latest_jobs, serialize_artifact
 from app.services.jobs import record_usage
@@ -219,7 +219,7 @@ def _sse(event: str, data: dict) -> str:
     return f"event: {event}\ndata: {json.dumps(data)}\n\n"
 
 
-_STEP_LABEL = {"list": "Scanning the archive", "search": "Searching for", "read": "Reading"}
+_STEP_LABEL = {"list": "Scanning the archive", "search": "Searching for", "read": "Reading", "think": ""}
 
 
 @router.post("/{notebook_id}/chat")
@@ -232,6 +232,11 @@ async def chat(notebook_id: uuid.UUID, body: ChatIn, ctx: Ctx = Depends(get_ctx)
         db.add(chat_row)
         db.flush()
     chat_row.updated_at = datetime.now(UTC)  # keeps the history list newest first
+    # Memory: the chat so far (before this message), oldest first, capped to the last few turns.
+    prior = db.scalars(
+        select(Message).where(Message.chat_id == chat_row.id).order_by(Message.created_at.desc()).limit(8)
+    ).all()
+    history = [Turn(m.role, m.content) for m in reversed(prior)]
     db.add(Message(chat_id=chat_row.id, role="user", content=body.question))
     db.commit()
 
@@ -252,7 +257,8 @@ async def chat(notebook_id: uuid.UUID, body: ChatIn, ctx: Ctx = Depends(get_ctx)
         def on_step(kind: str, detail: str) -> None:
             loop.call_soon_threadsafe(steps.put_nowait, (kind, detail))
 
-        task = asyncio.create_task(asyncio.to_thread(research, corpus, allowed, body.question, on_step))
+        task = asyncio.create_task(asyncio.to_thread(
+            research, corpus, allowed, body.question, on_step, history, nb.title))
         while not task.done() or not steps.empty():
             try:
                 kind, detail = await asyncio.wait_for(steps.get(), timeout=0.25)

frontend/src/pages/TopicMap.tsx

@@ -1,22 +1,138 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type RefObject } from "react";
-import { useNavigate } from "react-router-dom";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+} from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { notebooksApi, topicsApi } from "../api/endpoints";
-import type { Job, TopicDetail, TopicMap as TopicMapData } from "../api/types";
+import type { Job, TopicDetail, TopicMap as TopicMapData, TopicNode } from "../api/types";
 import { Reader } from "../components/Reader";
-import { EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader } from "../components/ui";
+import { EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader, Tabs } from "../components/ui";
 import { useJob } from "../hooks/useJob";
 import { playClick } from "../lib/sound";
 
-const W = 900;
-const H = 620;
+// Virtual canvas. The layout runs in open space and is then fitted into this box with a margin.
+const W = 1200;
+const H = 780;
+const PAD = 90;
 
-type P = { id: string; x: number; y: number; vx: number; vy: number; r: number };
+type P = { id: string; x: number; y: number; vx: number; vy: number; r: number; galaxy: number };
 type View = { x: number; y: number; w: number; h: number };
+type ColorMode = "recency" | "momentum";
 
 const HOME: View = { x: 0, y: 0, w: W, h: H };
 const MIN_W = W / 8;
 const MAX_W = W * 1.6;
 
+// Deterministic pseudo random, so the map looks the same on every visit.
+function seeded(n: number) {
+  const x = Math.sin(n * 12.9898) * 43758.5453;
+  return x - Math.floor(x);
+}
+
+/** Force layout with generous spacing: strong repulsion (room for labels), long constellation lines,
+ * a pull toward each galaxy's centre so related topics cluster, then fitted to the canvas. */
+function layout(data: TopicMapData): Map<string, P> {
+  const maxCount = Math.max(1, ...data.nodes.map((n) => n.post_count));
+  const nodes: P[] = data.nodes.map((n, i) => {
+    const a = i * 2.39996;
+    const rad = 80 + Math.sqrt(i) * 70;
+    return {
+      id: n.id,
+      x: Math.cos(a) * rad,
+      y: Math.sin(a) * rad,
+      vx: 0,
+      vy: 0,
+      r: 5 + 20 * Math.sqrt(n.post_count / maxCount),
+      galaxy: n.galaxy,
+    };
+  });
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const maxW = Math.max(1, ...data.edges.map((e) => e.weight));
+  const STEPS = 420;
+  for (let step = 0; step < STEPS; step++) {
+    const cool = 1 - step / STEPS;
+    for (let i = 0; i < nodes.length; i++) {
+      for (let j = i + 1; j < nodes.length; j++) {
+        const a = nodes[i];
+        const b = nodes[j];
+        let dx = a.x - b.x;
+        let dy = a.y - b.y;
+        let d2 = dx * dx + dy * dy;
+        if (d2 < 0.01) {
+          dx = 0.1;
+          dy = 0.1;
+          d2 = 0.02;
+        }
+        const minD = a.r + b.r + 90; // room for two labels side by side
+        const k = a.galaxy === b.galaxy ? 7000 : 11000; // other galaxies push harder, leaving voids between them
+        const f = (k / d2) * (d2 < minD * minD ? 3 : 1);
+        const d = Math.sqrt(d2);
+        a.vx += (dx / d) * f;
+        a.vy += (dy / d) * f;
+        b.vx -= (dx / d) * f;
+        b.vy -= (dy / d) * f;
+      }
+    }
+    for (const e of data.edges) {
+      const a = byId.get(e.source);
+      const b = byId.get(e.target);
+      if (!a || !b) continue;
+      const dx = b.x - a.x;
+      const dy = b.y - a.y;
+      const d = Math.sqrt(dx * dx + dy * dy) || 1;
+      const target = 190 - 70 * (e.weight / maxW);
+      const f = (d - target) * 0.012 * (0.4 + e.weight / maxW);
+      a.vx += (dx / d) * f;
+      a.vy += (dy / d) * f;
+      b.vx -= (dx / d) * f;
+      b.vy -= (dy / d) * f;
+    }
+    // Galaxy cohesion.
+    const centers = new Map<number, { x: number; y: number; n: number }>();
+    for (const n of nodes) {
+      const c = centers.get(n.galaxy) ?? { x: 0, y: 0, n: 0 };
+      c.x += n.x;
+      c.y += n.y;
+      c.n += 1;
+      centers.set(n.galaxy, c);
+    }
+    for (const n of nodes) {
+      const c = centers.get(n.galaxy)!;
+      if (c.n > 1) {
+        n.vx += (c.x / c.n - n.x) * 0.006;
+        n.vy += (c.y / c.n - n.y) * 0.006;
+      }
+      n.vx += -n.x * 0.0012; // gentle gravity toward the origin
+      n.vy += -n.y * 0.0012;
+      n.x += Math.max(-16, Math.min(16, n.vx)) * cool;
+      n.y += Math.max(-16, Math.min(16, n.vy)) * cool;
+      n.vx *= 0.6;
+      n.vy *= 0.6;
+    }
+  }
+  // Fit into the canvas with a margin, keeping proportions; never enlarge a small map past 1.4x.
+  const xs = nodes.map((n) => n.x);
+  const ys = nodes.map((n) => n.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  const s = Math.min((W - PAD * 2) / Math.max(1, maxX - minX), (H - PAD * 2) / Math.max(1, maxY - minY), 1.4);
+  const ox = (W - (maxX - minX) * s) / 2 - minX * s;
+  const oy = (H - (maxY - minY) * s) / 2 - minY * s;
+  for (const n of nodes) {
+    n.x = n.x * s + ox;
+    n.y = n.y * s + oy;
+  }
+  return byId;
+}
+
 /** Wheel to zoom around the cursor, drag to pan, buttons and keys for the rest. */
 function useZoomPan(svgRef: RefObject<SVGSVGElement>) {
   const [view, setView] = useState<View>(HOME);
@@ -33,7 +149,6 @@ function useZoomPan(svgRef: RefObject<SVGSVGElement>) {
   const scaleView = (v: View, factor: number, fx: number, fy: number): View => {
     const w = Math.max(MIN_W, Math.min(MAX_W, v.w * factor));
     const h = (w / W) * H;
-    // Keep the focus point fixed on screen while scaling.
     return { x: fx - ((fx - v.x) * w) / v.w, y: fy - ((fy - v.y) * h) / v.h, w, h };
   };
 
@@ -56,7 +171,7 @@ function useZoomPan(svgRef: RefObject<SVGSVGElement>) {
   });
 
   const onPointerDown = (e: ReactPointerEvent<SVGSVGElement>) => {
-    if ((e.target as Element).closest(".map-node")) return;
+    if ((e.target as Element).closest(".map-node, .nebula")) return;
     drag.current = { px: e.clientX, py: e.clientY, view, moved: false };
     svgRef.current?.setPointerCapture(e.pointerId);
   };
@@ -79,12 +194,10 @@ function useZoomPan(svgRef: RefObject<SVGSVGElement>) {
     zoomAt(0.6, p.x, p.y);
   };
   const pan = (dx: number, dy: number) => setView((v) => ({ ...v, x: v.x + dx * v.w, y: v.y + dy * v.h }));
-  const reset = () => {
-    setView(HOME);
-  };
-  const focusOn = (x: number, y: number) =>
-    setView((v) => {
-      const w = Math.min(v.w, W / 2);
+  const reset = () => setView(HOME);
+  const focusOn = (x: number, y: number, width = W / 2) =>
+    setView(() => {
+      const w = Math.max(MIN_W, Math.min(W, width));
       const h = (w / W) * H;
       return { x: x - w / 2, y: y - h / 2, w, h };
     });
@@ -99,65 +212,66 @@ function useZoomPan(svgRef: RefObject<SVGSVGElement>) {
   };
 }
 
-/** Small deterministic force layout: repulsion between all nodes, springs along edges, pull to center. */
-function layout(data: TopicMapData): Map<string, P> {
-  const maxCount = Math.max(1, ...data.nodes.map((n) => n.post_count));
-  const nodes: P[] = data.nodes.map((n, i) => {
-    const a = (i / Math.max(1, data.nodes.length)) * Math.PI * 2 * 2.39996;
-    const rad = 60 + (i % 7) * 30;
-    return { id: n.id, x: W / 2 + Math.cos(a) * rad, y: H / 2 + Math.sin(a) * rad, vx: 0, vy: 0, r: 6 + 22 * Math.sqrt(n.post_count / maxCount) };
-  });
-  const byId = new Map(nodes.map((n) => [n.id, n]));
-  const maxW = Math.max(1, ...data.edges.map((e) => e.weight));
-  for (let step = 0; step < 320; step++) {
-    const cool = 1 - step / 320;
-    for (let i = 0; i < nodes.length; i++) {
-      for (let j = i + 1; j < nodes.length; j++) {
-        const a = nodes[i];
-        const b = nodes[j];
-        let dx = a.x - b.x;
-        let dy = a.y - b.y;
-        let d2 = dx * dx + dy * dy;
-        if (d2 < 0.01) {
-          dx = 0.1;
-          dy = 0.1;
-          d2 = 0.02;
-        }
-        const minD = a.r + b.r + 26;
-        const f = (2400 / d2) * (d2 < minD * minD ? 3 : 1);
-        const d = Math.sqrt(d2);
-        a.vx += (dx / d) * f;
-        a.vy += (dy / d) * f;
-        b.vx -= (dx / d) * f;
-        b.vy -= (dy / d) * f;
-      }
-    }
-    for (const e of data.edges) {
-      const a = byId.get(e.source);
-      const b = byId.get(e.target);
-      if (!a || !b) continue;
-      const dx = b.x - a.x;
-      const dy = b.y - a.y;
-      const d = Math.sqrt(dx * dx + dy * dy) || 1;
-      const target = 110 - 40 * (e.weight / maxW);
-      const f = (d - target) * 0.02 * (0.5 + e.weight / maxW);
-      a.vx += (dx / d) * f;
-      a.vy += (dy / d) * f;
-      b.vx -= (dx / d) * f;
-      b.vy -= (dy / d) * f;
-    }
-    for (const n of nodes) {
-      n.vx += (W / 2 - n.x) * 0.004;
-      n.vy += (H / 2 - n.y) * 0.004;
-      n.x += Math.max(-12, Math.min(12, n.vx)) * cool;
-      n.y += Math.max(-12, Math.min(12, n.vy)) * cool;
-      n.x = Math.max(n.r + 10, Math.min(W - n.r - 10, n.x));
-      n.y = Math.max(n.r + 10, Math.min(H - n.r - 10, n.y));
-      n.vx *= 0.6;
-      n.vy *= 0.6;
-    }
-  }
-  return byId;
+// Small pieces
+
+function Sparkline({ values, height = 36, highlightFrom }: { values: number[]; height?: number; highlightFrom?: number }) {
+  const max = Math.max(1, ...values);
+  const bw = 100 / values.length;
+  return (
+    <svg className="sparkline" viewBox={`0 0 100 ${height}`} preserveAspectRatio="none" aria-hidden="true">
+      {values.map((v, i) => {
+        const h = v ? Math.max(2, (v / max) * (height - 2)) : 1;
+        return (
+          <rect
+            key={i}
+            x={i * bw + bw * 0.15}
+            y={height - h}
+            width={bw * 0.7}
+            height={h}
+            rx={0.8}
+            className={highlightFrom !== undefined && i >= highlightFrom ? "recent" : ""}
+          />
+        );
+      })}
+    </svg>
+  );
+}
+
+const STATUS_LABEL: Record<TopicNode["status"], string> = {
+  rising: "Rising",
+  steady: "Steady orbit",
+  dormant: "Dormant",
+};
+
+function momentumText(m: number) {
+  if (!Number.isFinite(m) || m === 0) return "no recent posts";
+  return m >= 1 ? `${m.toFixed(1)}x its usual share lately` : `${Math.round(m * 100)}% of its usual share lately`;
+}
+
+/** Deep field: faint background stars plus survey rings, drawn once. */
+function DeepField() {
+  const stars = useMemo(
+    () =>
+      Array.from({ length: 260 }, (_, i) => ({
+        x: seeded(i + 1) * W,
+        y: seeded(i + 1000) * H,
+        r: 0.3 + seeded(i + 2000) * 1.1,
+        o: 0.15 + seeded(i + 3000) * 0.5,
+      })),
+    [],
+  );
+  return (
+    <g className="deep-field" aria-hidden="true">
+      {[140, 260, 390, 520].map((r) => (
+        <circle key={r} cx={W / 2} cy={H / 2} r={r} className="survey-ring" />
+      ))}
+      <line x1={W / 2} y1={0} x2={W / 2} y2={H} className="survey-axis" />
+      <line x1={0} y1={H / 2} x2={W} y2={H / 2} className="survey-axis" />
+      {stars.map((s, i) => (
+        <circle key={i} cx={s.x} cy={s.y} r={s.r} fill="#ffffff" opacity={s.o} />
+      ))}
+    </g>
+  );
 }
 
 export default function TopicMap() {
@@ -165,6 +279,7 @@ export default function TopicMap() {
   const [job, setJob] = useState<Job | null>(null);
   const [selected, setSelected] = useState<TopicDetail | null>(null);
   const [hover, setHover] = useState<string | null>(null);
+  const [mode, setMode] = useState<ColorMode>("recency");
   const [reading, setReading] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
@@ -179,7 +294,8 @@ export default function TopicMap() {
     if (j.status === "done") load();
   });
 
-  const positions = useMemo(() => (data ? layout(data) : new Map<string, P>()), [data]);
+  const positions = useMemo(() => (data?.nodes.length ? layout(data) : new Map<string, P>()), [data]);
+  const byId = useMemo(() => new Map((data?.nodes ?? []).map((n) => [n.id, n])), [data]);
   const neighbors = useMemo(() => {
     const m = new Map<string, Set<string>>();
     data?.edges.forEach((e) => {
@@ -190,9 +306,38 @@ export default function TopicMap() {
     });
     return m;
   }, [data]);
+  // Nebula for each galaxy with more than one star: centred on its members, sized to cover them.
+  const nebulae = useMemo(() => {
+    if (!data) return [];
+    return data.galaxies
+      .filter((g) => g.size > 1)
+      .map((g) => {
+        const pts = g.topic_ids.map((id) => positions.get(id)).filter(Boolean) as P[];
+        const cx = pts.reduce((s, p) => s + p.x, 0) / Math.max(pts.length, 1);
+        const cy = pts.reduce((s, p) => s + p.y, 0) / Math.max(pts.length, 1);
+        const rx = Math.max(90, ...pts.map((p) => Math.abs(p.x - cx) + p.r)) + 50;
+        const ry = Math.max(80, ...pts.map((p) => Math.abs(p.y - cy) + p.r)) + 45;
+        return { ...g, cx, cy, rx, ry };
+      });
+  }, [data, positions]);
+
+  const brightest = useMemo(
+    () => new Set((data?.nodes ?? []).slice().sort((a, b) => b.post_count - a.post_count).slice(0, 3).map((n) => n.id)),
+    [data],
+  );
+  const maxEdge = Math.max(1, ...(data?.edges ?? []).map((e) => e.weight));
+  const recentBucket = useMemo(() => {
+    const a = data?.archive;
+    if (!a?.start || !a.end || !a.recent_from) return undefined;
+    const span = +new Date(a.end) - +new Date(a.start) || 1;
+    return Math.floor(((+new Date(a.recent_from) - +new Date(a.start)) / span) * 12);
+  }, [data]);
 
   const focus = hover ?? selected?.id ?? null;
   const running = live && (live.status === "queued" || live.status === "running");
+  const scale = view.w / W; // keeps labels and strokes a constant size on screen
+  const zoomedIn = scale < 0.75;
+  const hovered = hover ? byId.get(hover) : null;
 
   const rebuild = async (full: boolean) => {
     setError(null);
@@ -211,16 +356,38 @@ export default function TopicMap() {
     }
     setSelected(await topicsApi.get(id));
   };
-  const scale = view.w / W; // keeps labels and strokes a constant size on screen
+
+  const flyToGalaxy = (gid: number) => {
+    const n = nebulae.find((g) => g.id === gid);
+    if (n) focusOn(n.cx, n.cy, Math.max(n.rx * 2.6, (n.ry * 2.6 * W) / H));
+  };
+
+  const starColor = (n: TopicNode) => {
+    if (mode === "momentum") return n.status === "rising" ? "#ffffff" : n.status === "dormant" ? "rgba(255,255,255,0.45)" : "#217cff";
+    // recency: fresh topics burn white, old ones cool toward dim blue
+    return n.recency > 0.75 ? "#ffffff" : n.recency > 0.4 ? "#9cc4ff" : "#217cff";
+  };
+  const starGlow = (n: TopicNode) =>
+    mode === "momentum" ? (n.status === "rising" ? 1 : n.status === "dormant" ? 0.25 : 0.55) : 0.25 + 0.75 * n.recency;
+
+  const galaxyCount = data ? data.galaxies.filter((g) => g.size > 1).length : 0;
 
   return (
     <div className="page-wrap">
       <PageHeader eyebrow="Topic map" title="The constellations in your archive">
-        <button className="btn" disabled={Boolean(running)} onClick={() => rebuild(false)}>
+        <Tabs<ColorMode>
+          tabs={[
+            { id: "recency", label: "Recency" },
+            { id: "momentum", label: "Momentum" },
+          ]}
+          value={mode}
+          onChange={setMode}
+        />
+        <button className="btn btn-small" disabled={Boolean(running)} onClick={() => rebuild(false)}>
           {data?.has_untagged_posts ? "Map new posts" : "Refresh"}
         </button>
-        <button className="btn" disabled={Boolean(running)} onClick={() => rebuild(true)}>
-          Rebuild from scratch
+        <button className="btn btn-small" disabled={Boolean(running)} onClick={() => rebuild(true)}>
+          Rebuild
         </button>
       </PageHeader>
       {live && (running || live.status === "failed") && <JobProgress job={live} />}
@@ -251,7 +418,46 @@ export default function TopicMap() {
                 1:1
               </button>
             </div>
-            <p className="map-hint mono muted">Scroll to zoom · drag to pan · double click to dive in</p>
+
+            <div className="map-hud mono" aria-live="polite">
+              {hovered ? (
+                <>
+                  <span className="hud-title">{hovered.name}</span>
+                  <span>
+                    {hovered.post_count} posts · last {formatDate(hovered.last_at)} · {STATUS_LABEL[hovered.status]}
+                  </span>
+                  <Sparkline values={hovered.timeline} height={18} highlightFrom={recentBucket} />
+                </>
+              ) : (
+                <span className="muted">
+                  {data.nodes.length} stars · {galaxyCount} galaxies · scroll to zoom, drag to pan
+                </span>
+              )}
+            </div>
+
+            <div className="map-legend mono" aria-label="Legend">
+              <span>
+                <i className="lg-size" /> size = posts
+              </span>
+              {mode === "recency" ? (
+                <span>
+                  <i className="lg-bright" /> brighter = written about recently
+                </span>
+              ) : (
+                <>
+                  <span>
+                    <i className="lg-tail" /> rising
+                  </span>
+                  <span>
+                    <i className="lg-dormant" /> dormant
+                  </span>
+                </>
+              )}
+              <span>
+                <i className="lg-line" /> lines = shared posts
+              </span>
+            </div>
+
             <svg
               ref={svgRef}
               viewBox={`${view.x} ${view.y} ${view.w} ${view.h}`}
@@ -259,6 +465,7 @@ export default function TopicMap() {
               aria-label="Topic constellation. Plus and minus zoom, arrow keys pan, 0 resets."
               tabIndex={0}
               className="map-svg"
+              style={{ aspectRatio: `${W} / ${H}` }}
               {...handlers}
               onKeyDown={(e) => {
                 const step = 0.12;
@@ -274,17 +481,45 @@ export default function TopicMap() {
               }}
             >
               <defs>
-                <radialGradient id="star" cx="50%" cy="50%" r="50%">
-                  <stop offset="0%" stopColor="#ffffff" />
-                  <stop offset="55%" stopColor="#217cff" stopOpacity="0.9" />
+                <radialGradient id="star-glow" cx="50%" cy="50%" r="50%">
+                  <stop offset="0%" stopColor="#ffffff" stopOpacity="0.9" />
+                  <stop offset="30%" stopColor="#217cff" stopOpacity="0.55" />
                   <stop offset="100%" stopColor="#217cff" stopOpacity="0" />
                 </radialGradient>
+                <radialGradient id="nebula" cx="50%" cy="50%" r="50%">
+                  <stop offset="0%" stopColor="#217cff" stopOpacity="0.16" />
+                  <stop offset="60%" stopColor="#217cff" stopOpacity="0.06" />
+                  <stop offset="100%" stopColor="#217cff" stopOpacity="0" />
+                </radialGradient>
+                <linearGradient id="comet" x1="0" y1="0" x2="1" y2="0">
+                  <stop offset="0%" stopColor="#ffffff" stopOpacity="0.85" />
+                  <stop offset="100%" stopColor="#217cff" stopOpacity="0" />
+                </linearGradient>
               </defs>
+
+              <DeepField />
+
+              {nebulae.map((g) => (
+                <g key={g.id} className="nebula" onClick={() => flyToGalaxy(g.id)}>
+                  <ellipse cx={g.cx} cy={g.cy} rx={g.rx} ry={g.ry} fill="url(#nebula)" />
+                  <text
+                    x={g.cx}
+                    y={g.cy - g.ry + 18 * scale}
+                    textAnchor="middle"
+                    className="galaxy-label"
+                    style={{ fontSize: 11 * scale, letterSpacing: 3 * scale }}
+                  >
+                    {g.name.toUpperCase()} GALAXY
+                  </text>
+                </g>
+              ))}
+
               {data.edges.map((e) => {
                 const a = positions.get(e.source);
                 const b = positions.get(e.target);
                 if (!a || !b) return null;
                 const lit = focus && (e.source === focus || e.target === focus);
+                const strength = e.weight / maxEdge;
                 return (
                   <line
                     key={`${e.source}-${e.target}`}
@@ -292,64 +527,226 @@ export default function TopicMap() {
                     y1={a.y}
                     x2={b.x}
                     y2={b.y}
+                    className="constellation"
                     stroke={lit ? "#217cff" : "#ffffff"}
-                    strokeOpacity={lit ? 0.9 : focus ? 0.05 : 0.14}
-                    strokeWidth={(lit ? 1.6 : 1) * scale}
+                    strokeOpacity={lit ? 0.95 : focus ? 0.04 : 0.08 + strength * 0.3}
+                    strokeWidth={(lit ? 1.4 + strength * 2 : 0.6 + strength * 1.8) * scale}
+                    strokeDasharray={strength < 0.25 && !lit ? `${3 * scale} ${4 * scale}` : undefined}
                   />
                 );
               })}
+
               {data.nodes.map((n) => {
                 const p = positions.get(n.id)!;
                 const dim = focus && focus !== n.id && !neighbors.get(focus)?.has(n.id);
                 const active = selected?.id === n.id;
+                const color = starColor(n);
+                const glow = starGlow(n);
+                const showLabel =
+                  zoomedIn || brightest.has(n.id) || n.post_count >= 3 || focus === n.id || active || Boolean(focus && neighbors.get(focus)?.has(n.id));
+                const tail = mode === "momentum" && n.status === "rising" ? Math.min(90, 30 + n.momentum * 18) : 0;
                 return (
                   <g
                     key={n.id}
                     className="map-node"
-                    opacity={dim ? 0.25 : 1}
+                    opacity={dim ? 0.2 : 1}
                     onMouseEnter={() => setHover(n.id)}
                     onMouseLeave={() => setHover(null)}
                     onClick={() => open(n.id)}
                     onDoubleClick={() => open(n.id, true)}
                     tabIndex={0}
                     role="button"
-                    aria-label={`${n.name}, ${n.post_count} posts`}
+                    aria-label={`${n.name}, ${n.post_count} posts, ${STATUS_LABEL[n.status]}`}
                     onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && open(n.id)}
                   >
-                    <circle cx={p.x} cy={p.y} r={p.r * 1.9} fill="url(#star)" opacity={active ? 0.9 : 0.45} />
-                    <circle cx={p.x} cy={p.y} r={Math.max(3, p.r * 0.45)} fill="#ffffff" />
-                    <text x={p.x} y={p.y + p.r + 16 * scale} textAnchor="middle" className="map-label" style={{ fontSize: 12 * scale, strokeWidth: 4 * scale }}>
-                      {n.name}
-                    </text>
+                    {tail > 0 && (
+                      <path
+                        d={`M ${p.x} ${p.y - p.r * 0.35} L ${p.x + tail} ${p.y - tail * 0.45} L ${p.x + p.r * 0.35} ${p.y + p.r * 0.1} Z`}
+                        fill="url(#comet)"
+                        opacity={0.8}
+                      />
+                    )}
+                    <circle cx={p.x} cy={p.y} r={p.r * 2.1} fill="url(#star-glow)" opacity={active ? 1 : glow} />
+                    {brightest.has(n.id) && (
+                      <g className="spikes" stroke={color} strokeOpacity={0.55} strokeWidth={1 * scale}>
+                        <line x1={p.x - p.r * 2.4} y1={p.y} x2={p.x + p.r * 2.4} y2={p.y} />
+                        <line x1={p.x} y1={p.y - p.r * 2.4} x2={p.x} y2={p.y + p.r * 2.4} />
+                      </g>
+                    )}
+                    {mode === "momentum" && n.status === "dormant" && (
+                      <circle
+                        cx={p.x}
+                        cy={p.y}
+                        r={p.r * 0.9 + 4}
+                        fill="none"
+                        stroke="#ffffff"
+                        strokeOpacity={0.5}
+                        strokeWidth={1 * scale}
+                        strokeDasharray={`${2 * scale} ${3 * scale}`}
+                      />
+                    )}
+                    <circle cx={p.x} cy={p.y} r={Math.max(2.5, p.r * 0.42)} fill={color} />
+                    {active && <circle cx={p.x} cy={p.y} r={p.r + 12} className="orbit-ring" strokeWidth={1.2 * scale} />}
+                    {showLabel && (
+                      <text
+                        x={p.x}
+                        y={p.y + p.r + 18 * scale}
+                        textAnchor="middle"
+                        className="map-label"
+                        style={{ fontSize: 12.5 * scale, strokeWidth: 4 * scale }}
+                      >
+                        {n.name}
+                        {(zoomedIn || active) && (
+                          <tspan className="map-count" dx={6 * scale}>
+                            {n.post_count}
+                          </tspan>
+                        )}
+                      </text>
+                    )}
                   </g>
                 );
               })}
             </svg>
           </div>
+
           <aside className="card map-side">
             {!selected && (
               <>
-                <p className="eyebrow">{data.nodes.length} topics</p>
-                <p className="muted">Click a star to see its posts. Brighter lines mean topics that appear together more often.</p>
-                <ol className="topic-rank">
-                  {data.nodes.slice(0, 12).map((n) => (
-                    <li key={n.id}>
-                      <button className="link-btn" onClick={() => open(n.id, true)}>
-                        {n.name}
-                      </button>
-                      <span className="mono muted"> {n.post_count}</span>
-                    </li>
-                  ))}
-                </ol>
+                <p className="eyebrow">Mission briefing</p>
+                <p className="muted small">
+                  {data.archive.posts} posts from {formatDate(data.archive.start)} to {formatDate(data.archive.end)}. Recent means since{" "}
+                  {formatDate(data.archive.recent_from)}.
+                </p>
+
+                <section className="brief">
+                  <h3>Galaxies</h3>
+                  <ul className="brief-list">
+                    {data.galaxies
+                      .filter((g) => g.size > 1)
+                      .slice(0, 6)
+                      .map((g) => (
+                        <li key={g.id}>
+                          <button className="link-btn" onClick={() => flyToGalaxy(g.id)}>
+                            {g.name}
+                          </button>
+                          <span className="mono muted">
+                            {g.size} topics · {g.post_count} posts
+                          </span>
+                        </li>
+                      ))}
+                    {galaxyCount === 0 && <li className="muted small">No clusters yet. Map more posts.</li>}
+                  </ul>
+                </section>
+
+                <section className="brief">
+                  <h3>Rising</h3>
+                  <ul className="brief-list">
+                    {data.insights.rising.map((r) => (
+                      <li key={r.id}>
+                        <button className="link-btn" onClick={() => open(r.id, true)}>
+                          {r.name}
+                        </button>
+                        <span className="mono brief-up">{r.momentum.toFixed(1)}x</span>
+                      </li>
+                    ))}
+                    {data.insights.rising.length === 0 && <li className="muted small">Nothing is picking up speed right now.</li>}
+                  </ul>
+                </section>
+
+                <section className="brief">
+                  <h3>Dormant</h3>
+                  <ul className="brief-list">
+                    {data.insights.dormant.map((d) => (
+                      <li key={d.id}>
+                        <button className="link-btn" onClick={() => open(d.id, true)}>
+                          {d.name}
+                        </button>
+                        <span className="mono muted">since {formatDate(d.last_at)}</span>
+                      </li>
+                    ))}
+                    {data.insights.dormant.length === 0 && <li className="muted small">Every topic has been visited lately.</li>}
+                  </ul>
+                  {data.insights.dormant.length > 0 && (
+                    <Link to="/app/resurface" className="small-link mono">
+                      Resurface old posts
+                    </Link>
+                  )}
+                </section>
+
+                <section className="brief">
+                  <h3>Strongest pairings</h3>
+                  <ul className="brief-list">
+                    {data.insights.pairs.map((p) => (
+                      <li key={`${p.a_id}-${p.b_id}`}>
+                        <span>
+                          <button className="link-btn" onClick={() => open(p.a_id, true)}>
+                            {p.a}
+                          </button>
+                          <span className="muted"> + </span>
+                          <button className="link-btn" onClick={() => open(p.b_id, true)}>
+                            {p.b}
+                          </button>
+                        </span>
+                        <span className="mono muted">{p.posts} posts</span>
+                      </li>
+                    ))}
+                  </ul>
+                </section>
               </>
             )}
+
             {selected && (
               <>
-                <button className="link-btn mono muted" onClick={() => setSelected(null)}>
-                  All topics
+                <button className="link-btn mono muted small" onClick={() => setSelected(null)}>
+                  Back to briefing
                 </button>
-                <h2>{selected.name}</h2>
+                <div className="row between">
+                  <h2>{selected.name}</h2>
+                  <span className={`pill mono status-${selected.status}`}>{STATUS_LABEL[selected.status]}</span>
+                </div>
                 {selected.summary && <p className="muted">{selected.summary}</p>}
+
+                <dl className="star-stats">
+                  <div>
+                    <dt>Posts</dt>
+                    <dd>{selected.post_count}</dd>
+                  </div>
+                  <div>
+                    <dt>Recent</dt>
+                    <dd>{selected.recent_posts}</dd>
+                  </div>
+                  <div>
+                    <dt>First</dt>
+                    <dd>{formatDate(selected.first_at)}</dd>
+                  </div>
+                  <div>
+                    <dt>Last</dt>
+                    <dd>{formatDate(selected.last_at)}</dd>
+                  </div>
+                </dl>
+                <p className="mono muted small">Momentum: {momentumText(selected.momentum)}</p>
+
+                <div className="timeline">
+                  <Sparkline values={selected.timeline} height={44} highlightFrom={recentBucket} />
+                  <div className="row between mono muted small">
+                    <span>{formatDate(selected.timeline_start)}</span>
+                    <span>{formatDate(selected.timeline_end)}</span>
+                  </div>
+                </div>
+
+                {selected.related.length > 0 && (
+                  <div className="stack">
+                    <span className="mono muted small">Travels with</span>
+                    <div className="chips">
+                      {selected.related.map((r) => (
+                        <button key={r.id} className="chip chip-btn" onClick={() => open(r.id, true)} title={`${r.shared_posts} shared posts`}>
+                          {r.name} <span className="mono">{r.shared_posts}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
                 <button
                   className="btn btn-small btn-primary"
                   onClick={async () => {