diff --git a/packages/dashboard/src/app/components/EpicRef.tsx b/packages/dashboard/src/app/components/EpicRef.tsx
new file mode 100644
index 00000000..9c2145db
--- /dev/null
+++ b/packages/dashboard/src/app/components/EpicRef.tsx
@@ -0,0 +1,51 @@
+/**
+ * Renders an Epic reference per the dispatch mode the workflow row carries:
+ *
+ * - **github mode** (`epicNumber !== null`) → plain `#N` text, byte-for-byte
+ *   what the surfaces rendered before file mode existed. Deliberately not an
+ *   anchor — AC4 of #187 is "no behavior change for github-mode rows".
+ * - **file mode** (`epicNumber === null`, `epicRef` a slug) → the slug as a
+ *   `file://planning/epics/<slug>.md` link, the on-disk Epic file. No GitHub
+ *   link in file mode (the Epic isn't a GitHub issue).
+ * - **no Epic** (both null — a recommender / documentation row) → the caller's
+ *   `fallback`, defaulting to the em dash the surfaces already showed.
+ *
+ * The `fallback` prop exists because the two callers differ in their pre-#187
+ * empty rendering (the runner surfaces showed `#—`, others a bare `—`); keeping
+ * it configurable preserves each surface's exact output.
+ */
+
+/**
+ * Build the `file://` href for an Epic file from its slug. The slug is a single
+ * path segment, URL-encoded so a malformed value can't break out of the
+ * `planning/epics/` directory or inject markup into the `href`.
+ */
+export function epicFileHref(slug: string): string {
+  return `file://planning/epics/${encodeURIComponent(slug)}.md`;
+}
+
+export function EpicRef({
+  epicNumber,
+  epicRef,
+  fallback = "—",
+}: {
+  epicNumber: number | null;
+  epicRef: string | null;
+  /** What to render when there's no Epic at all (both ids null). */
+  fallback?: string;
+}) {
+  if (epicNumber !== null) return <>#{epicNumber}</>;
+  // A present *and non-blank* slug is the file-mode signal. A null column is JS
+  // null; an empty/whitespace value (no real writer produces one today, but a
+  // future one could) would otherwise render an empty-labelled link to
+  // `planning/epics/.md`, so treat it as "no Epic" and fall through.
+  const slug = epicRef?.trim();
+  if (slug) {
+    return (
+      <a className="epic-file-link" href={epicFileHref(slug)}>
+        {slug}
+      </a>
+    );
+  }
+  return <>{fallback}</>;
+}
diff --git a/packages/dashboard/src/app/components/Inspector.tsx b/packages/dashboard/src/app/components/Inspector.tsx
index 818131fc..e3650e49 100644
--- a/packages/dashboard/src/app/components/Inspector.tsx
+++ b/packages/dashboard/src/app/components/Inspector.tsx
@@ -7,6 +7,7 @@
 import type { RunnerPanel, SessionEvent } from "../../wire.ts";
 import { ago } from "../format.ts";
 import { CopyCommand } from "./CopyCommand.tsx";
+import { EpicRef } from "./EpicRef.tsx";
 
 /** Events that record a verification gate outcome — pulled out as evidence. */
 function isVerificationEvent(type: string): boolean {
@@ -37,7 +38,7 @@ export function Inspector({
     <aside className="inspector" role="dialog" aria-label={`Inspector for ${panel.session}`}>
       <div className="inspector-head">
         <h3>
-          #{panel.epic ?? "—"} · {panel.repo}
+          <EpicRef epicNumber={panel.epic} epicRef={panel.epicRef} fallback="#—" /> · {panel.repo}
         </h3>
         <button type="button" className="inspector-close" onClick={() => onClose?.()}>
           close
diff --git a/packages/dashboard/src/app/components/RunnerRow.tsx b/packages/dashboard/src/app/components/RunnerRow.tsx
index e6a48740..0ddc843e 100644
--- a/packages/dashboard/src/app/components/RunnerRow.tsx
+++ b/packages/dashboard/src/app/components/RunnerRow.tsx
@@ -7,6 +7,7 @@
 import type { RunnerSummary } from "../../wire.ts";
 import { ago } from "../format.ts";
 import { CopyCommand } from "./CopyCommand.tsx";
+import { EpicRef } from "./EpicRef.tsx";
 
 export function RunnerRow({
   runner,
@@ -28,8 +29,8 @@ export function RunnerRow({
         className="runner-open"
         onClick={() => onOpenInspector?.(runner.session)}
       >
-        #{runner.epic ?? "—"} · {runner.adapter} · {runner.progress} ·{" "}
-        {ago(runner.lastHeartbeat, now)} ago
+        <EpicRef epicNumber={runner.epic} epicRef={runner.epicRef} fallback="#—" /> ·{" "}
+        {runner.adapter} · {runner.progress} · {ago(runner.lastHeartbeat, now)} ago
       </button>
       {runner.controlledBy === "human" ? <span className="badge human">human</span> : null}
       <span className="runner-actions">
diff --git a/packages/dashboard/src/bridge.ts b/packages/dashboard/src/bridge.ts
index 12a671a8..4208dc88 100644
--- a/packages/dashboard/src/bridge.ts
+++ b/packages/dashboard/src/bridge.ts
@@ -58,7 +58,7 @@ export function bridgeWorkflowsToBus(bus: DashboardEventBus, db: Database): () =
     if (!row) return;
     bus.broadcastRepo(row.repo, {
       type: WORKFLOW_EVENT,
-      data: { id, repo: row.repo, epic: row.epicNumber, state: row.state },
+      data: { id, repo: row.repo, epic: row.epicNumber, epicRef: row.epicRef, state: row.state },
     });
   });
 }
diff --git a/packages/dashboard/src/db-deps.ts b/packages/dashboard/src/db-deps.ts
index d9a90e7d..e6ee390a 100644
--- a/packages/dashboard/src/db-deps.ts
+++ b/packages/dashboard/src/db-deps.ts
@@ -81,6 +81,7 @@ type WorkflowRow = {
   id: string;
   repo: string;
   epic_number: number | null;
+  epic_ref: string | null;
   adapter: string;
   state: string;
   controlled_by: string;
@@ -94,7 +95,7 @@ type WorkflowRow = {
 };
 
 const WORKFLOW_COLUMNS =
-  "id, repo, epic_number, adapter, state, controlled_by, session_name, transcript_path, worktree_path, current_sub_issue, pr_number, pr_branch, last_heartbeat";
+  "id, repo, epic_number, epic_ref, adapter, state, controlled_by, session_name, transcript_path, worktree_path, current_sub_issue, pr_number, pr_branch, last_heartbeat";
 
 /** Lifecycle states a workflow has finished in — excluded from "in flight". */
 const TERMINAL_STATES = ["completed", "compensated", "failed", "cancelled"] as const;
@@ -117,6 +118,7 @@ function toRunnerSummary(row: WorkflowRow): RunnerSummary {
     session: row.session_name ?? row.id,
     workflowId: row.id,
     epic: row.epic_number,
+    epicRef: row.epic_ref,
     adapter: row.adapter,
     progress: progressOf(row),
     state: row.state,
@@ -437,6 +439,7 @@ export function createDbDeps(opts: DbDepsOptions): DashboardDeps {
         workflowId: row.id,
         repo: row.repo,
         epic: row.epic_number,
+        epicRef: row.epic_ref,
         adapter: row.adapter,
         state: row.state,
         controlledBy: row.controlled_by === "human" ? "human" : "middle",
diff --git a/packages/dashboard/src/wire.ts b/packages/dashboard/src/wire.ts
index d00468fa..f5b2cb78 100644
--- a/packages/dashboard/src/wire.ts
+++ b/packages/dashboard/src/wire.ts
@@ -62,7 +62,14 @@ export type RunnerSummary = {
   /** The tmux session name — the key for `/api/sessions/:session/*`. */
   session: string;
   workflowId: string;
+  /** The github-mode Epic issue number, or null in file mode. */
   epic: number | null;
+  /**
+   * The canonical Epic reference: a slug in file mode (`epic` is then null), or
+   * `String(epic)` / null in github mode. Renders as a `file://` link when set
+   * and `epic` is null; github-mode rows render from `epic`.
+   */
+  epicRef: string | null;
   adapter: string;
   /** `sub-issue 2/4` or `running`. */
   progress: string;
@@ -104,7 +111,14 @@ export type RunnerPanel = {
   session: string;
   workflowId: string;
   repo: string;
+  /** The github-mode Epic issue number, or null in file mode. */
   epic: number | null;
+  /**
+   * The canonical Epic reference: a slug in file mode (`epic` is then null), or
+   * `String(epic)` / null in github mode. Renders as a `file://` link when set
+   * and `epic` is null; github-mode rows render from `epic`.
+   */
+  epicRef: string | null;
   adapter: string;
   state: string;
   controlledBy: "middle" | "human";
diff --git a/packages/dashboard/test/api.test.ts b/packages/dashboard/test/api.test.ts
index 7a8436b2..bab93f3e 100644
--- a/packages/dashboard/test/api.test.ts
+++ b/packages/dashboard/test/api.test.ts
@@ -90,6 +90,70 @@ describe("dashboard JSON API", () => {
     expect(detail.nextUp).toEqual([]); // no state gateway wired
   });
 
+  test("github-mode IN FLIGHT row carries epicRef alongside the numeric epic (#187)", async () => {
+    // createWorkflowRecord doesn't write epic_ref, so a github-mode row's epicRef
+    // is null over the wire; the UI keys its numeric render off `epic`, not epicRef.
+    seedWorkflow(db, {
+      id: "w1",
+      repo: "o/alpha",
+      epicNumber: 7,
+      state: "running",
+      sessionName: "sess-7",
+    });
+    await start();
+
+    const detail = (await (
+      await fetch(`${base}/api/repos/${encodeURIComponent("o/alpha")}`)
+    ).json()) as RepoDetail;
+    expect(detail.inFlight[0]).toMatchObject({ session: "sess-7", epic: 7, epicRef: null });
+  });
+
+  test("file-mode IN FLIGHT row surfaces epic_ref as epicRef with a null epic (#187)", async () => {
+    // The end-to-end read path: a migrated db row with epic_number NULL +
+    // epic_ref slug → db-deps SELECT → RunnerSummary JSON over a real Bun.serve.
+    seedWorkflow(db, {
+      id: "wf-file",
+      repo: "o/alpha",
+      epicNumber: null,
+      epicRef: "rollout-epic-store",
+      state: "running",
+      sessionName: "sess-file",
+    });
+    await start();
+
+    const detail = (await (
+      await fetch(`${base}/api/repos/${encodeURIComponent("o/alpha")}`)
+    ).json()) as RepoDetail;
+    expect(detail.inFlight).toHaveLength(1);
+    expect(detail.inFlight[0]).toMatchObject({
+      session: "sess-file",
+      epic: null,
+      epicRef: "rollout-epic-store",
+    });
+  });
+
+  test("GET /api/sessions/:session carries epicRef for a file-mode runner (#187)", async () => {
+    seedWorkflow(db, {
+      id: "wf-file",
+      repo: "o/alpha",
+      epicNumber: null,
+      epicRef: "rollout-epic-store",
+      state: "running",
+      sessionName: "sess-file",
+      worktreePath: "/wt/alpha-file",
+    });
+    await start();
+
+    const panel = (await (await fetch(`${base}/api/sessions/sess-file`)).json()) as RunnerPanel;
+    expect(panel).toMatchObject({
+      session: "sess-file",
+      repo: "o/alpha",
+      epic: null,
+      epicRef: "rollout-epic-store",
+      worktreePath: "/wt/alpha-file",
+    });
+  });
+
   test("GET /api/repos/:repo 404s an unknown repo", async () => {
     await start();
     const res = await fetch(`${base}/api/repos/${encodeURIComponent("o/missing")}`);
diff --git a/packages/dashboard/test/app.test.tsx b/packages/dashboard/test/app.test.tsx
index 0257171a..55088ff7 100644
--- a/packages/dashboard/test/app.test.tsx
+++ b/packages/dashboard/test/app.test.tsx
@@ -149,6 +149,7 @@ describe("dashboard views (static render)", () => {
           session: "mm-alpha-247",
           workflowId: "w1",
           epic: 247,
+          epicRef: null,
           adapter: "claude",
           progress: "sub-issue 2",
           state: "running",
@@ -178,6 +179,7 @@ describe("dashboard views (static render)", () => {
       workflowId: "w1",
       repo: "o/alpha",
       epic: 247,
+      epicRef: null,
       adapter: "claude",
       state: "running",
       controlledBy: "middle",
diff --git a/packages/dashboard/test/epic-ref.test.tsx b/packages/dashboard/test/epic-ref.test.tsx
new file mode 100644
index 00000000..48eb52bf
--- /dev/null
+++ b/packages/dashboard/test/epic-ref.test.tsx
@@ -0,0 +1,122 @@
+import { describe, expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { EpicRef, epicFileHref } from "../src/app/components/EpicRef.tsx";
+import { Inspector } from "../src/app/components/Inspector.tsx";
+import { RunnerRow } from "../src/app/components/RunnerRow.tsx";
+import type { RunnerPanel, RunnerSummary } from "../src/wire.ts";
+
+const render = (el: React.ReactElement) => renderToStaticMarkup(el);
+
+describe("EpicRef", () => {
+  test("github mode renders plain `#N` text, no anchor (AC4: no behavior change)", () => {
+    const out = render(<EpicRef epicNumber={42} epicRef={null} />);
+    expect(out).toBe("#42");
+    expect(out).not.toContain("<a");
+  });
+
+  test("github mode renders `#N` even if a backfilled epic_ref is also present", () => {
+    // epic_number wins: a github-mode row may carry epic_ref = String(epic_number).
+    const out = render(<EpicRef epicNumber={42} epicRef="42" />);
+    expect(out).toBe("#42");
+    expect(out).not.toContain("file://");
+  });
+
+  test("file mode renders the slug as a file:// link to the Epic file, no GitHub link", () => {
+    const out = render(<EpicRef epicNumber={null} epicRef="rollout-epic-store" />);
+    expect(out).toContain('href="file://planning/epics/rollout-epic-store.md"');
+    expect(out).toContain(">rollout-epic-store<");
+    expect(out).not.toContain("github.com");
+    expect(out).not.toContain("#");
+  });
+
+  test("no-Epic (both null) renders the caller's fallback", () => {
+    expect(render(<EpicRef epicNumber={null} epicRef={null} />)).toBe("—");
+    expect(render(<EpicRef epicNumber={null} epicRef={null} fallback="#—" />)).toBe("#—");
+  });
+
+  test("a blank epicRef (empty / whitespace) falls through to the fallback, not an empty link", () => {
+    expect(render(<EpicRef epicNumber={null} epicRef="" fallback="#—" />)).toBe("#—");
+    expect(render(<EpicRef epicNumber={null} epicRef="   " fallback="#—" />)).toBe("#—");
+  });
+
+  test("a slug with surrounding whitespace is trimmed in both label and href", () => {
+    const out = render(<EpicRef epicNumber={null} epicRef="  the-slug  " />);
+    expect(out).toContain('href="file://planning/epics/the-slug.md"');
+    expect(out).toContain(">the-slug<");
+  });
+
+  test("a slug with URL-unsafe / traversal chars is encoded into one safe path segment", () => {
+    expect(epicFileHref("a/../b")).toBe("file://planning/epics/a%2F..%2Fb.md");
+    expect(epicFileHref('x"><script>')).toBe("file://planning/epics/x%22%3E%3Cscript%3E.md");
+    // A normal kebab-case slug encodes to itself (hyphens are unreserved).
+    expect(epicFileHref("rollout-epic-store")).toBe("file://planning/epics/rollout-epic-store.md");
+  });
+});
+
+const runner = (over: Partial<RunnerSummary> = {}): RunnerSummary => ({
+  session: "s1",
+  workflowId: "w1",
+  epic: null,
+  epicRef: null,
+  adapter: "claude",
+  progress: "running",
+  state: "running",
+  controlledBy: "middle",
+  lastHeartbeat: null,
+  attachCommands: { watch: "tmux attach -r -t s1", control: "tmux attach -t s1" },
+  ...over,
+});
+
+describe("RunnerRow Epic rendering", () => {
+  test("file-mode runner shows the slug file:// link", () => {
+    const out = render(<RunnerRow runner={runner({ epic: null, epicRef: "the-slug" })} />);
+    expect(out).toContain('href="file://planning/epics/the-slug.md"');
+    expect(out).toContain(">the-slug<");
+  });
+
+  test("github-mode runner is unchanged (`#7`, no link)", () => {
+    const out = render(<RunnerRow runner={runner({ epic: 7, epicRef: null })} />);
+    expect(out).toContain("#7");
+    expect(out).not.toContain("file://");
+  });
+
+  test("no-Epic runner keeps the `#—` fallback", () => {
+    const out = render(<RunnerRow runner={runner({ epic: null, epicRef: null })} />);
+    expect(out).toContain("#—");
+  });
+});
+
+const panel = (over: Partial<RunnerPanel> = {}): RunnerPanel => ({
+  session: "s1",
+  workflowId: "w1",
+  repo: "o/r",
+  epic: null,
+  epicRef: null,
+  adapter: "claude",
+  state: "running",
+  controlledBy: "middle",
+  alive: true,
+  lastHeartbeat: null,
+  contextTokens: null,
+  transcriptPath: null,
+  worktreePath: null,
+  prNumber: null,
+  prBranch: null,
+  currentSubIssue: null,
+  attachCommands: { watch: "tmux attach -r -t s1", control: "tmux attach -t s1" },
+  ...over,
+});
+
+describe("Inspector Epic rendering", () => {
+  test("file-mode panel shows the slug file:// link in the header", () => {
+    const out = render(<Inspector panel={panel({ epicRef: "the-slug" })} events={[]} />);
+    expect(out).toContain('href="file://planning/epics/the-slug.md"');
+    expect(out).toContain(">the-slug<");
+  });
+
+  test("github-mode panel is unchanged (`#7`, no link)", () => {
+    const out = render(<Inspector panel={panel({ epic: 7 })} events={[]} />);
+    expect(out).toContain("#7");
+    expect(out).not.toContain("file://");
+  });
+});
diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts
index 1af482c5..5e66a85a 100644
--- a/packages/dashboard/test/helpers.ts
+++ b/packages/dashboard/test/helpers.ts
@@ -60,6 +60,8 @@ export type SeedWorkflow = {
   id: string;
   repo: string;
   epicNumber?: number | null;
+  /** File-mode Epic slug. Set directly (createWorkflowRecord doesn't write it). */
+  epicRef?: string | null;
   adapter?: string;
   state?: WorkflowState;
   sessionName?: string;
@@ -89,6 +91,9 @@ export function seedWorkflow(db: Database, w: SeedWorkflow): void {
     worktreePath: w.worktreePath,
   });
   // Columns updateWorkflow doesn't cover — set directly.
+  if (w.epicRef !== undefined) {
+    db.run("UPDATE workflows SET epic_ref = ? WHERE id = ?", [w.epicRef, w.id]);
+  }
   if (w.currentSubIssue !== undefined) {
     db.run("UPDATE workflows SET current_sub_issue = ? WHERE id = ?", [w.currentSubIssue, w.id]);
   }
diff --git a/packages/dashboard/test/sse.test.ts b/packages/dashboard/test/sse.test.ts
index ef86821a..988d6ded 100644
--- a/packages/dashboard/test/sse.test.ts
+++ b/packages/dashboard/test/sse.test.ts
@@ -162,8 +162,51 @@ describe("dashboard SSE channels", () => {
         () => {
           updateWorkflow(db, "wf-1", { state: "running" });
         },
-      )) as { id: string; repo: string; epic: number | null; state: string };
-      expect(data).toEqual({ id: "wf-1", repo, epic: 7, state: "running" });
+      )) as {
+        id: string;
+        repo: string;
+        epic: number | null;
+        epicRef: string | null;
+        state: string;
+      };
+      // github-mode row: epic set, epic_ref unset (createWorkflowRecord doesn't write it).
+      expect(data).toEqual({ id: "wf-1", repo, epic: 7, epicRef: null, state: "running" });
+    } finally {
+      dispose();
+    }
+  });
+
+  test("a file-mode transition pushes the epic_ref slug alongside a null epic", async () => {
+    const repo = "o/alpha";
+    seedWorkflow(db, {
+      id: "wf-file",
+      repo,
+      epicNumber: null,
+      epicRef: "rollout-epic-store",
+      state: "launching",
+    });
+    const dispose = bridgeWorkflowsToBus(bus, db);
+    try {
+      const data = (await awaitEvent(
+        `${base}/events/repos/${encodeURIComponent(repo)}`,
+        "workflow",
+        () => {
+          updateWorkflow(db, "wf-file", { state: "running" });
+        },
+      )) as {
+        id: string;
+        repo: string;
+        epic: number | null;
+        epicRef: string | null;
+        state: string;
+      };
+      expect(data).toEqual({
+        id: "wf-file",
+        repo,
+        epic: null,
+        epicRef: "rollout-epic-store",
+        state: "running",
+      });
     } finally {
       dispose();
     }
diff --git a/packages/dispatcher/src/workflow-record.ts b/packages/dispatcher/src/workflow-record.ts
index b98a2f25..5e8c4218 100644
--- a/packages/dispatcher/src/workflow-record.ts
+++ b/packages/dispatcher/src/workflow-record.ts
@@ -28,6 +28,13 @@ export type WorkflowRecord = {
   kind: "implementation" | "recommender" | "documentation";
   repo: string;
   epicNumber: number | null;
+  /**
+   * The canonical Epic reference (migration 009): `String(epicNumber)` for
+   * github-mode rows, a slug for file-mode rows, null when there's no Epic
+   * (recommender / documentation). Read straight from the column — the dispatch
+   * write path, not this read accessor, is what populates it.
+   */
+  epicRef: string | null;
   adapter: string;
   state: WorkflowState;
   createdAt: number;
@@ -540,6 +547,7 @@ type WorkflowRow = {
   kind: string;
   repo: string;
   epic_number: number | null;
+  epic_ref: string | null;
   adapter: string;
   state: string;
   created_at: number;
@@ -781,6 +789,7 @@ export function getWorkflow(db: Database, id: string): WorkflowRecord | null {
     kind: row.kind as WorkflowRecord["kind"],
     repo: row.repo,
     epicNumber: row.epic_number,
+    epicRef: row.epic_ref,
     adapter: row.adapter,
     state: row.state as WorkflowState,
     createdAt: row.created_at,
diff --git a/packages/dispatcher/test/workflow-record.test.ts b/packages/dispatcher/test/workflow-record.test.ts
index d64e49f2..f67895fb 100644
--- a/packages/dispatcher/test/workflow-record.test.ts
+++ b/packages/dispatcher/test/workflow-record.test.ts
@@ -40,6 +40,38 @@ afterEach(() => {
   rmSync(dir, { recursive: true, force: true });
 });
 
+describe("getWorkflow epic_ref (#187)", () => {
+  test("reads back epic_ref straight from the column (slug, number-string, or null)", () => {
+    // github-mode: createWorkflowRecord writes only epic_number; epic_ref stays null
+    // until the dispatch write path populates it. getWorkflow reflects the column verbatim.
+    createWorkflowRecord(db, {
+      id: "gh",
+      kind: "implementation",
+      repo: "o/r",
+      epicNumber: 7,
+      adapter: "claude",
+    });
+    expect(getWorkflow(db, "gh")!.epicRef).toBeNull();
+
+    // A row whose epic_ref is set (file-mode slug, or a github-mode backfill) round-trips.
+    db.run("UPDATE workflows SET epic_ref = ? WHERE id = ?", ["rollout-epic-store", "gh"]);
+    expect(getWorkflow(db, "gh")!.epicRef).toBe("rollout-epic-store");
+
+    // file-mode shape: null epic_number, slug epic_ref.
+    createWorkflowRecord(db, {
+      id: "file",
+      kind: "implementation",
+      repo: "o/r",
+      epicNumber: null,
+      adapter: "claude",
+    });
+    db.run("UPDATE workflows SET epic_ref = ? WHERE id = ?", ["another-slug", "file"]);
+    const file = getWorkflow(db, "file")!;
+    expect(file.epicNumber).toBeNull();
+    expect(file.epicRef).toBe("another-slug");
+  });
+});
+
 describe("dispatch source (#53)", () => {
   test("records and reads back source 'manual' / 'auto'; null when unset", () => {
     createWorkflowRecord(db, {
diff --git a/planning/issues/187/decisions.md b/planning/issues/187/decisions.md
new file mode 100644
index 00000000..480860ab
--- /dev/null
+++ b/planning/issues/187/decisions.md
@@ -0,0 +1,76 @@
+# Decisions — Issue #187
+
+## github-mode renders plain `#N`, not an anchor
+**File(s):** `packages/dashboard/src/app/components/EpicRef.tsx`
+**Date:** 2026-05-29
+
+**Decision:** `EpicRef` renders github-mode Epics (`epicNumber !== null`) as plain
+`#N` text — no `<a>` — and renders only file-mode Epics as a `file://` link.
+
+**Why:** The issue's Context says the dashboard "renders it as a numeric link to
+GitHub", but the surfaces in fact render plain `#N` text today (no anchor exists
+in `RunnerRow`/`Inspector`). AC4 is the hard constraint — "No behavior change for
+github-mode rows." Adding a GitHub anchor would itself be a behavior change, so
+the literal no-behavior-change reading wins: github mode keeps its exact current
+plain-text output; file mode is the only new rendering. Resolved without a fork
+(the constraint picks the winner).
+
+## `EpicRef` owns the `#` prefix; the empty case is a `fallback` prop
+**File(s):** `packages/dashboard/src/app/components/EpicRef.tsx`
+**Date:** 2026-05-29
+
+**Decision:** The component emits `#N` for github mode and the bare slug (no `#`)
+for file mode; the both-null case renders a caller-supplied `fallback`.
+
+**Why:** A slug is not an issue number, so prefixing it with `#` would be wrong.
+The two callers differed in their pre-#187 empty rendering — `RunnerRow`/`Inspector`
+showed `#—` (the `#` was outside the interpolation), so they pass `fallback="#—"`
+to preserve byte-identical output, while the default `—` covers any future caller.
+
+## file:// href + slug encoding
+**File(s):** `packages/dashboard/src/app/components/EpicRef.tsx`
+**Date:** 2026-05-29
+
+**Decision:** `epicFileHref(slug)` → `file://planning/epics/${encodeURIComponent(slug)}.md`.
+
+**Why:** AC2 names exactly `file://` + `planning/epics/<slug>.md`; the repo's
+absolute root isn't known client-side, so the path stays repo-relative as the AC
+specifies. `encodeURIComponent` collapses the slug to a single safe path segment
+— a malformed value (`../`, quotes, angle brackets) can't traverse out of
+`planning/epics/` or inject markup into the `href`. A normal kebab-case slug
+encodes to itself (unreserved chars), so the common case is unchanged.
+
+## Read-path only — the dispatch write path is untouched
+**File(s):** `packages/dispatcher/src/workflow-record.ts`
+**Date:** 2026-05-29
+
+**Decision:** Added `epicRef` to `WorkflowRecord` + `getWorkflow` (the bridge's
+read accessor) only. `createWorkflowRecord` still does not write `epic_ref`.
+
+**Why:** #187 is a dashboard display issue (AC1–4 are all read/render/bridge). The
+bridge (AC3) reads through `getWorkflow`, so the read path must carry `epicRef`;
+populating it on insert is the file-mode dispatch workstream's job (explicitly out
+of scope). github rendering keys on `epic_number`, so a null `epic_ref` on new
+github rows is harmless. Migration 009's comment claims `createWorkflowRecord`
+populates it — that's not yet true; filed as a follow-up rather than expanded into
+this PR.
+
+## Other epic-rendering surfaces (Queue tab, NEXT UP) left out of scope
+**File(s):** `packages/dispatcher/src/main.ts` (`broadcastWorkflow`), `packages/dashboard/src/app/control-client.ts`, `packages/dashboard/src/db-deps.ts:307`, `packages/dashboard/src/app/components/Repos.tsx`
+**Date:** 2026-05-29
+
+**Decision:** Two adjacent epic-rendering surfaces keep their pre-#187 behavior:
+the **Queue tab** (fed by `/control/events` → `ControlWorkflowFrame`) shows `—`
+for file-mode rows, and **NEXT UP** (fed by the recommender's parsed state issue)
+collapses a file-mode slug to `#0` via `Number(slug) || 0`. Neither is touched.
+
+**Why:** The issue cites `db-deps.ts:83` — the `/api/*` plane (RunnerSummary /
+RunnerPanel + the `bridge.ts` repo-channel nudge), which reads the
+`workflows.epic_ref` column this issue is about. The other two surfaces read
+*different sources*: the Queue's frame comes from the dispatcher daemon
+(`main.ts`, the control plane — named by no AC), and NEXT UP comes from the
+recommender's state-issue ranking (`readyToDispatch`), which doesn't emit
+file-mode slugs yet (file-mode dispatch / recommender support is out of scope per
+the issue). Both are genuinely separate data paths outside this change's blast
+radius. Filed as discovery follow-ups (the NEXT UP one also notes a latent React
+`key={n.epic}` collision once two file-mode rows both map to `#0`).
diff --git a/planning/issues/187/plan.md b/planning/issues/187/plan.md
new file mode 100644
index 00000000..3df612f7
--- /dev/null
+++ b/planning/issues/187/plan.md
@@ -0,0 +1,65 @@
+# Issue #187: feat(dashboard): file-mode Epic display (epic_ref + file:// links)
+
+**Link:** https://github.com/thejustinwalsh/middle/issues/187
+**Branch:** middle-issue-187
+
+## Goal
+Make the dashboard's `/api/*` plane carry and render the file-mode Epic
+identifier (`epic_ref`, a slug) so file-mode workflows — `epic_number IS NULL`,
+`epic_ref = '<slug>'` — show a `file://planning/epics/<slug>.md` link instead of
+a blank cell, with github-mode rows rendering exactly as they do today.
+
+## Approach
+- Plumb `epic_ref` through the read path the dashboard already uses: the
+  workflows-table column (added by migration 009) → `getWorkflow` (for the
+  bridge) and `db-deps` (for the `/api/*` responses) → the wire types → the UI.
+- Add one small `EpicRef` component that owns the github-vs-file rendering rule,
+  and use it in the surfaces the issue cites (the `db-deps.ts:83`-fed plane):
+  the IN-FLIGHT runner row and the Inspector panel.
+- Render rule: `epicNumber !== null` → `#N` (unchanged, no link — preserves
+  today's exact github-mode output); else `epicRef !== null` → the slug as a
+  `file://planning/epics/<slug>.md` link; else the surface's existing fallback.
+- Bridge: `bridgeWorkflowsToBus` emits `epicRef` alongside `epic`.
+- Read-only change — no dispatch write path is touched (`createWorkflowRecord`
+  still doesn't set `epic_ref`; that's file-mode dispatch, out of scope).
+
+## Phases
+This is a standalone issue (no sub-issues) — one phase, verified as a unit.
+1. file-mode Epic display — plumb `epic_ref` (dispatcher read path + db-deps +
+   wire), add `EpicRef`, render in RunnerRow + Inspector, emit in the bridge,
+   with unit + integration (real `Bun.serve` + migrated db) coverage.
+
+## Files likely to change
+- `packages/dispatcher/src/workflow-record.ts` — `WorkflowRecord.epicRef`,
+  internal `WorkflowRow.epic_ref`, map it in `getWorkflow` (bridge read path).
+- `packages/dashboard/src/db-deps.ts` — select `epic_ref`, add to
+  `WorkflowRow` + `WORKFLOW_COLUMNS`, project into RunnerSummary/RunnerPanel.
+- `packages/dashboard/src/wire.ts` — `epicRef: string | null` on `RunnerSummary`
+  and `RunnerPanel`.
+- `packages/dashboard/src/app/components/EpicRef.tsx` — new shared renderer.
+- `packages/dashboard/src/app/components/RunnerRow.tsx`,
+  `.../Inspector.tsx` — render via `EpicRef`.
+- `packages/dashboard/src/bridge.ts` — emit `epicRef`.
+- `packages/dashboard/test/helpers.ts` — `seedWorkflow` gains an `epicRef` opt.
+- Tests: `workflow-record`, `db-deps` (deps), `sse` (bridge), a new
+  `epic-ref.test.tsx` (component), and `api.test.ts` (integration: file-mode
+  row → `/api/repos/:repo` + `/api/sessions/:session` carry `epicRef`).
+
+## Out of scope
+- File-mode dispatch endpoint via the dashboard UI (per the issue).
+- Sub-issue rendering from the Epic file (per the issue).
+- The `/control/events` plane (`main.ts` `broadcastWorkflow` → `Queue` tab):
+  a separate data path the issue does not cite (it names `db-deps.ts:83`). The
+  Queue tab keeps showing `—` for file-mode rows until a follow-up plumbs
+  `epicRef` through the control feed. Noted as a discovery follow-up.
+- Populating `epic_ref` on insert (`createWorkflowRecord`): the migration's
+  design says github-mode should write `epic_ref = String(epic_number)`, but no
+  AC requires it and github rendering keys on `epic_number`. File-mode dispatch
+  owns the write path. Noted as a follow-up.
+
+## Open questions
+- "no GitHub link in file mode" + "github-mode rows keep their numeric link":
+  github epics render as plain `#N` text today (no anchor). The hard constraint
+  is AC4 "no behavior change for github-mode rows", so `EpicRef` preserves the
+  plain `#N` text for github mode and adds the `file://` anchor only for file
+  mode. Resolved by honoring the no-behavior-change constraint literally.