FN-5897: surface linked goals in mission read paths

Expose mission-linked goals across mission detail surfaces. - load linked goal records into mission hierarchy reads in core and return them from the mission detail API - show linked goals in mission detail views, add goal-chip navigation, and anchor highlighted goal cards in GoalsView - extend CLI mission output, docs, tests, and add a published changeset for the new read-path support Files changed: .changeset/fn-5897-linked-goals-read-paths.md | 5 +++ docs/missions.md | 6 ++- packages/cli/src/__tests__/extension.test.ts | 48 +++++++++++++++++++++- packages/cli/src/extension.ts | 10 +++++ packages/core/src/__tests__/mission-store.test.ts | 14 +++++++ packages/core/src/mission-store.ts | 29 +++++++++++++ packages/core/src/mission-types.ts | 4 ++ packages/dashboard/app/App.tsx | 16 +++++++- packages/dashboard/app/components/GoalsView.css | 6 +++ packages/dashboard/app/components/GoalsView.tsx | 42 +++++++++++++++++-- packages/dashboard/app/components/MissionManager.css | 44 ++++++++++++++++++++ packages/dashboard/app/components/MissionManager.tsx | 31 +++++++++++++- packages/dashboard/app/components/__tests__/GoalsView.test.tsx | 31 ++++++++++++++ packages/dashboard/app/components/__tests__/MissionManager.test.tsx | 45 ++++++++++++++++++++ packages/dashboard/app/components/mission-types.ts | 2 + packages/dashboard/src/__tests__/mission-e2e.test.ts | 4 ++ packages/dashboard/src/mission-routes.ts | 5 ++- 17 files changed, 332 insertions(+), 10 deletions(-) Fusion-Task-Id: FN-5897 Fusion-Task-Lineage: 5176270d-9885-447a-845b-4e0d69d531a0
2026-06-02 17:58:41 -07:00
parent 6c7ed1e1fc
commit abbeaec0a8
17 changed files with 332 additions and 10 deletions
--- a/packages/cli/src/tests/extension.test.ts
+++ b/packages/cli/src/tests/extension.test.ts
@@ -1132,9 +1132,10 @@ describe.skipIf(!SHOULD_RUN_LEGACY_EXTENSION_INTEGRATION)("fn pi extension (lega
  });

  describe("fn_mission_show", () => {
-    it("returns mission with hierarchy", async () => {
-      // Create mission
+    it("returns mission with hierarchy and linked goals", async () => {
      const createTool = api.tools.get("fn_mission_create")!;
+      const goalTool = api.tools.get("fn_goal_create")!;
+      const linkTool = api.tools.get("fn_mission_link_goal")!;
      const created = await createTool.execute(
        "c1",
        { title: "Test Mission" },
@@ -1142,6 +1143,20 @@ describe.skipIf(!SHOULD_RUN_LEGACY_EXTENSION_INTEGRATION)("fn pi extension (lega
        undefined,
        makeCtx(tmpDir),
      );
+      const goal = await goalTool.execute(
+        "g1",
+        { title: "Connect mission work to goals" },
+        undefined,
+        undefined,
+        makeCtx(tmpDir),
+      );
+      await linkTool.execute(
+        "link-1",
+        { missionId: created.details.missionId, goalId: goal.details.goalId },
+        undefined,
+        undefined,
+        makeCtx(tmpDir),
+      );

      const showTool = api.tools.get("fn_mission_show")!;
      const result = await showTool.execute(
@@ -1154,6 +1169,11 @@ describe.skipIf(!SHOULD_RUN_LEGACY_EXTENSION_INTEGRATION)("fn pi extension (lega

      expect(result.details.mission).toBeDefined();
      expect(result.content[0].text).toContain("Test Mission");
+      expect(result.content[0].text).toContain("Linked Goals:");
+      expect(result.content[0].text).toContain(`- ${goal.details.goalId}: Connect mission work to goals`);
+      expect(result.details.mission.linkedGoals).toEqual([
+        expect.objectContaining({ id: goal.details.goalId, title: "Connect mission work to goals" }),
+      ]);
    });

    it("renders acceptanceCriteria / verification for milestones, slices, and features", async () => {
@@ -1212,6 +1232,30 @@ describe.skipIf(!SHOULD_RUN_LEGACY_EXTENSION_INTEGRATION)("fn pi extension (lega
      expect(result.details.mission.milestones[0].acceptanceCriteria).toBe(longValue);
    });

+    it("renders an empty linked goals state when no goals are linked", async () => {
+      const createTool = api.tools.get("fn_mission_create")!;
+      const created = await createTool.execute(
+        "c1",
+        { title: "Mission Without Goals" },
+        undefined,
+        undefined,
+        makeCtx(tmpDir),
+      );
+
+      const showTool = api.tools.get("fn_mission_show")!;
+      const result = await showTool.execute(
+        "call-1",
+        { id: created.details.missionId },
+        undefined,
+        undefined,
+        makeCtx(tmpDir),
+      );
+
+      expect(result.content[0].text).toContain("Linked Goals:");
+      expect(result.content[0].text).toContain("No linked goals.");
+      expect(result.details.mission.linkedGoals).toEqual([]);
+    });
+
    it("returns error when mission not found", async () => {
      const showTool = api.tools.get("fn_mission_show")!;
      const result = await showTool.execute(
--- a/packages/cli/src/extension.ts
+++ b/packages/cli/src/extension.ts
@@ -2644,6 +2644,16 @@ export default function kbExtension(pi: ExtensionAPI) {
      }
      lines.push("");

+      lines.push("Linked Goals:");
+      if ((mission.linkedGoals?.length ?? 0) === 0) {
+        lines.push("No linked goals.");
+      } else {
+        for (const goal of mission.linkedGoals ?? []) {
+          lines.push(`- ${goal.id}: ${goal.title}`);
+        }
+      }
+      lines.push("");
+
      if (mission.milestones.length === 0) {
        lines.push("No milestones yet.");
      } else {
--- a/packages/core/src/tests/mission-store.test.ts
+++ b/packages/core/src/tests/mission-store.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { MissionStore, deriveMilestoneAcceptanceCriteriaFromFeatures } from "../mission-store.js";
+import { GoalStore } from "../goal-store.js";
 import { Database } from "../db.js";
 import type { MissionFeature } from "../mission-types.js";
 import { mkdtempSync } from "node:fs";
@@ -30,6 +31,7 @@ describe("MissionStore", () => {
  let fusionDir: string;
  let db: Database;
  let store: MissionStore;
+  let goalStore: GoalStore;

  beforeEach(() => {
    tmpDir = makeTmpDir();
@@ -40,6 +42,7 @@ describe("MissionStore", () => {
    db = new Database(fusionDir, { inMemory: true });
    db.init();
    store = new MissionStore(fusionDir, db);
+    goalStore = new GoalStore(fusionDir, db);
  });

  afterEach(async () => {
@@ -1838,6 +1841,8 @@ describe("MissionStore", () => {
        title: "Hierarchy Test",
        description: "Testing full tree loading",
      });
+      const linkedGoal = goalStore.createGoal({ title: "Ship linked goal visibility" });
+      store.linkGoal(mission.id, linkedGoal.id);
      const m1 = store.addMilestone(mission.id, { title: "Milestone 1" });
      const m2 = store.addMilestone(mission.id, { title: "Milestone 2" });
      const s1 = store.addSlice(m1.id, { title: "Slice 1" });
@@ -1849,6 +1854,7 @@ describe("MissionStore", () => {

      expect(withHierarchy.id).toBe(mission.id);
      expect(withHierarchy.title).toBe("Hierarchy Test");
+      expect(withHierarchy.linkedGoals).toEqual([linkedGoal]);
      expect(withHierarchy.milestones).toHaveLength(2);

      const m1Data = withHierarchy.milestones.find((m) => m.id === m1.id)!;
@@ -1859,6 +1865,14 @@ describe("MissionStore", () => {
      expect(s1Data.features.find((f: import("../mission-types.js").MissionFeature) => f.id === f1.id)).toBeDefined();
      expect(s1Data.features.find((f: import("../mission-types.js").MissionFeature) => f.id === f2.id)).toBeDefined();
    });
+
+    it("returns an empty linkedGoals array when no goals are linked", () => {
+      const mission = store.createMission({ title: "Hierarchy without goals" });
+
+      const withHierarchy = store.getMissionWithHierarchy(mission.id)!;
+
+      expect(withHierarchy.linkedGoals).toEqual([]);
+    });
  });

  // ── Transaction Tests ────────────────────────────────────────────────
--- a/packages/core/src/mission-store.ts
+++ b/packages/core/src/mission-store.ts
@@ -14,6 +14,7 @@
 import { EventEmitter } from "node:events";
 import type { Database } from "./db.js";
 import { fromJson, toJson, toJsonNullable } from "./db.js";
+import type { Goal, GoalStatus } from "./goal-types.js";
 import type {
  Mission,
  MissionBranchStrategy,
@@ -261,6 +262,15 @@ interface MissionGoalRow {
  createdAt: string;
 }

+interface GoalRow {
+  id: string;
+  title: string;
+  description: string | null;
+  status: GoalStatus;
+  createdAt: string;
+  updatedAt: string;
+}
+
 /** Database row shape for the mission_contract_assertions table. */
 interface AssertionRow {
  id: string;
@@ -462,6 +472,17 @@ export class MissionStore extends EventEmitter<MissionStoreEvents> {
    };
  }

+  private rowToGoal(row: GoalRow): Goal {
+    return {
+      id: row.id,
+      title: row.title,
+      description: row.description ?? undefined,
+      status: row.status,
+      createdAt: row.createdAt,
+      updatedAt: row.updatedAt,
+    };
+  }
+
  /**
   * Convert a database row to a MissionContractAssertion object.
   */
@@ -678,6 +699,13 @@ export class MissionStore extends EventEmitter<MissionStoreEvents> {
    const mission = this.getMission(id);
    if (!mission) return undefined;

+    const linkedGoals = this.listGoalIdsForMission(id)
+      .map((goalId) => this.db
+        .prepare("SELECT id, title, description, status, createdAt, updatedAt FROM goals WHERE id = ?")
+        .get(goalId) as GoalRow | undefined)
+      .filter((row): row is GoalRow => Boolean(row))
+      .map((row) => this.rowToGoal(row));
+
    const milestones = this.listMilestones(id);
    const milestonesWithSlices = milestones.map((milestone) => {
      const slices = this.listSlices(milestone.id);
@@ -693,6 +721,7 @@ export class MissionStore extends EventEmitter<MissionStoreEvents> {

    return {
      ...mission,
+      linkedGoals,
      milestones: milestonesWithSlices,
    };
  }
--- a/packages/core/src/mission-types.ts
+++ b/packages/core/src/mission-types.ts
@@ -9,6 +9,8 @@
 * The hierarchy: Mission → Milestone → Slice → Feature → (optional) Task
 */

+import type { Goal } from "./goal-types.js";
+
 // ── Status Enums ─────────────────────────────────────────────────────

 /** Status values for a Mission's lifecycle */
@@ -457,6 +459,8 @@ export interface SliceWithFeatures extends Slice {
 * Mission → Milestones → Slices → Features
 */
 export interface MissionWithHierarchy extends Mission {
+  /** Goals linked to this mission */
+  linkedGoals?: Goal[];
  /** Milestones belonging to this mission, each with their slices */
  milestones: Array<MilestoneWithSlices & {
    /** Slices with their features loaded */
--- a/packages/dashboard/app/App.tsx
+++ b/packages/dashboard/app/App.tsx
@@ -379,6 +379,9 @@ function AppInner() {
      setMissionTargetId(undefined);
      setMilestoneSliceResumeSessionId(undefined);
    }
+    if (newView !== "goalsView") {
+      setGoalAnchorId(undefined);
+    }
    const previousView = taskView;
    handleChangeTaskView(newView);
    if (previousView !== newView) {
@@ -711,7 +714,14 @@ function AppInner() {
  const [retryingProjects, setRetryingProjects] = useState(false);
  const [missionResumeSessionId, setMissionResumeSessionId] = useState<string | undefined>(undefined);
  const [missionTargetId, setMissionTargetId] = useState<string | undefined>(undefined);
+  const [goalAnchorId, setGoalAnchorId] = useState<string | undefined>(undefined);
  const [milestoneSliceResumeSessionId, setMilestoneSliceResumeSessionId] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (taskView !== "goalsView" && goalAnchorId !== undefined) {
+      setGoalAnchorId(undefined);
+    }
+  }, [goalAnchorId, taskView]);
  const [quickChatOpen, setQuickChatOpen] = useState(false);
  const [authTokenRecoveryOpen, setAuthTokenRecoveryOpen] = useState(false);
  const [dashboardHealth, setDashboardHealth] = useState<DashboardHealthResponse | null>(null);
@@ -1462,6 +1472,10 @@ function AppInner() {
            targetMissionId={missionTargetId}
            milestoneSliceResumeSessionId={milestoneSliceResumeSessionId}
            onMilestoneSliceResumeFetchError={() => setMilestoneSliceResumeSessionId(undefined)}
+            onNavigateToGoal={(goalId) => {
+              setGoalAnchorId(goalId);
+              handleChangeTaskView("goalsView");
+            }}
          />
        </PageErrorBoundary>
      );
@@ -1593,7 +1607,7 @@ function AppInner() {
      return (
        <PageErrorBoundary>
          <Suspense fallback={null}>
-            <GoalsView />
+            <GoalsView anchorGoalId={goalAnchorId} />
          </Suspense>
        </PageErrorBoundary>
      );
--- a/packages/dashboard/app/components/GoalsView.css
+++ b/packages/dashboard/app/components/GoalsView.css
@@ -98,6 +98,12 @@
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
+  scroll-margin-top: var(--space-xl);
+}
+
+.goals-card--anchored {
+  border-color: var(--color-warning);
+  box-shadow: var(--focus-ring-strong);
 }

 .goals-card-archived {
--- a/packages/dashboard/app/components/GoalsView.tsx
+++ b/packages/dashboard/app/components/GoalsView.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { Goal } from "@fusion/core";
 import { Plus, Sparkles } from "lucide-react";
 import ReactMarkdown from "react-markdown";
@@ -8,6 +8,7 @@ import "./GoalsView.css";

 export interface GoalsViewProps {
  initialGoals?: Goal[];
+  anchorGoalId?: string;
 }

 const MAX_ACTIVE_GOALS = 5;
@@ -20,8 +21,10 @@ function isCapError(payload: unknown): boolean {
  return Boolean(payload && typeof payload === "object" && "code" in payload && (payload as { code?: unknown }).code === "ACTIVE_GOAL_LIMIT_EXCEEDED");
 }

-export function GoalsView({ initialGoals }: GoalsViewProps) {
+export function GoalsView({ initialGoals, anchorGoalId }: GoalsViewProps) {
  const [goals, setGoals] = useState<Goal[]>(() => initialGoals ?? []);
+  const [highlightedGoalId, setHighlightedGoalId] = useState<string | null>(null);
+  const anchorTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [loading, setLoading] = useState<boolean>(initialGoals === undefined);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

@@ -81,6 +84,38 @@ export function GoalsView({ initialGoals }: GoalsViewProps) {
  const activeCount = useMemo(() => goals.filter((goal) => goal.status === "active").length, [goals]);
  const showWarning = activeCount >= WARNING_THRESHOLD && activeCount <= MAX_ACTIVE_GOALS;

+  useEffect(() => {
+    if (!anchorGoalId) {
+      setHighlightedGoalId(null);
+      return;
+    }
+
+    const target = document.getElementById(`goal-card-${anchorGoalId}`);
+    if (!target) {
+      return;
+    }
+
+    setHighlightedGoalId(anchorGoalId);
+    if (typeof target.scrollIntoView === "function") {
+      target.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+
+    if (anchorTimeoutRef.current) {
+      clearTimeout(anchorTimeoutRef.current);
+    }
+    anchorTimeoutRef.current = setTimeout(() => {
+      setHighlightedGoalId((current) => (current === anchorGoalId ? null : current));
+      anchorTimeoutRef.current = null;
+    }, 1600);
+
+    return () => {
+      if (anchorTimeoutRef.current) {
+        clearTimeout(anchorTimeoutRef.current);
+        anchorTimeoutRef.current = null;
+      }
+    };
+  }, [anchorGoalId, goals]);
+
  function openAddForm() {
    setErrorMessage(null);
    setAddError(null);
@@ -359,7 +394,8 @@ export function GoalsView({ initialGoals }: GoalsViewProps) {
          {goals.map((goal) => (
            <article
              key={goal.id}
-              className={`card goals-card ${goal.status === "archived" ? "goals-card-archived" : ""}`.trim()}
+              id={`goal-card-${goal.id}`}
+              className={`card goals-card ${goal.status === "archived" ? "goals-card-archived" : ""} ${highlightedGoalId === goal.id ? "goals-card--anchored" : ""}`.trim()}
              data-testid={`goal-card-${goal.id}`}
            >
              {editGoalId === goal.id ? (
--- a/packages/dashboard/app/components/MissionManager.css
+++ b/packages/dashboard/app/components/MissionManager.css
@@ -1068,6 +1068,45 @@
  gap: var(--space-sm);
 }

+.mission-detail__linked-goals {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  padding-top: var(--space-xs);
+}
+
+.mission-detail__linked-goals-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.mission-detail__linked-goals-title {
+  margin: 0;
+  font-size: calc(var(--space-sm) + var(--space-xs));
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.mission-detail__linked-goals-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.mission-detail__linked-goal-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.mission-detail__linked-goals-empty {
+  margin: 0;
+  color: var(--text-muted);
+}
+
 .mission-detail__run-settings {
  display: flex;
  flex-direction: column;
@@ -2545,6 +2584,11 @@
    flex-wrap: wrap;
  }

+  .mission-detail__linked-goals-header,
+  .mission-detail__linked-goals-list {
+    align-items: stretch;
+  }
+
  .mission-detail__run-help,
  .mission-list__item-run-help {
    max-width: 100%;
--- a/packages/dashboard/app/components/MissionManager.tsx
+++ b/packages/dashboard/app/components/MissionManager.tsx
@@ -123,6 +123,8 @@ interface MissionManagerProps {
  milestoneSliceResumeSessionId?: string;
  /** Called when milestone/slice resume session fetch fails */
  onMilestoneSliceResumeFetchError?: () => void;
+  /** Navigate to the goals view anchored to a specific goal */
+  onNavigateToGoal?: (goalId: string) => void;
 }

 // Status badge colors — use CSS custom-property-compatible tokens
@@ -581,6 +583,7 @@ function normalizeMissionHierarchy(mission: MissionWithHierarchy): MissionWithHi

  return {
    ...mission,
+    linkedGoals: Array.isArray(mission.linkedGoals) ? mission.linkedGoals : [],
    milestones: mission.milestones.map((milestone) => {
      if (!Array.isArray(milestone.slices)) {
        throw new Error(`Malformed mission detail response: milestone ${milestone.id} is missing slices`);
@@ -603,7 +606,7 @@ function normalizeMissionHierarchy(mission: MissionWithHierarchy): MissionWithHi
  };
 }

-export function MissionManager({ isOpen, isInline = false, onClose, addToast, projectId, onSelectTask, availableTasks = [], resumeSessionId, targetMissionId, milestoneSliceResumeSessionId, onMilestoneSliceResumeFetchError }: MissionManagerProps) {
+export function MissionManager({ isOpen, isInline = false, onClose, addToast, projectId, onSelectTask, availableTasks = [], resumeSessionId, targetMissionId, milestoneSliceResumeSessionId, onMilestoneSliceResumeFetchError, onNavigateToGoal }: MissionManagerProps) {
  const isActive = isInline || isOpen;
  const cacheSuffix = projectId ?? "";
  const missionsCacheKey = `${SWR_CACHE_KEYS.MISSIONS_PREFIX}${cacheSuffix}`;
@@ -2528,6 +2531,32 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
                  </span>
                </div>

+                <section className="mission-detail__linked-goals" aria-label="Linked goals">
+                  <div className="mission-detail__linked-goals-header">
+                    <h4 className="mission-detail__linked-goals-title">Linked Goals</h4>
+                    <span className="mission-detail__meta-info">
+                      {selectedMission.linkedGoals?.length ?? 0} linked
+                    </span>
+                  </div>
+                  {(selectedMission.linkedGoals?.length ?? 0) > 0 ? (
+                    <div className="mission-detail__linked-goals-list">
+                      {(selectedMission.linkedGoals ?? []).map((goal) => (
+                        <button
+                          key={goal.id}
+                          type="button"
+                          className="btn mission-detail__linked-goal-chip"
+                          data-testid={`mission-linked-goal-chip-${goal.id}`}
+                          onClick={() => onNavigateToGoal?.(goal.id)}
+                        >
+                          {goal.title}
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="mission-detail__linked-goals-empty">No linked goals.</p>
+                  )}
+                </section>
+
                <section className="mission-detail__run-settings" aria-label="Mission run settings">
                  <h4 className="mission-detail__run-settings-title">Mission run settings</h4>
                  {/* ── Autopilot section ── */}
--- a/packages/dashboard/app/components/tests/GoalsView.test.tsx
+++ b/packages/dashboard/app/components/tests/GoalsView.test.tsx
@@ -42,6 +42,37 @@ describe("GoalsView", () => {
    expect(screen.getByTestId("goals-empty-state")).toBeInTheDocument();
  });

+  it("anchors the matching goal card without requiring scrollIntoView", async () => {
+    const originalScrollIntoView = HTMLElement.prototype.scrollIntoView;
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: undefined,
+    });
+
+    try {
+      render(
+        <GoalsView
+          initialGoals={[
+            makeGoal({ id: "g1", title: "One" }),
+            makeGoal({ id: "g2", title: "Anchored Goal" }),
+          ]}
+          anchorGoalId="g2"
+        />,
+      );
+
+      const anchoredCard = screen.getByTestId("goal-card-g2");
+      expect(anchoredCard).toHaveAttribute("id", "goal-card-g2");
+      await waitFor(() => {
+        expect(anchoredCard.className).toContain("goals-card--anchored");
+      });
+    } finally {
+      Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+        configurable: true,
+        value: originalScrollIntoView,
+      });
+    }
+  });
+
  it("loads goals from API when initialGoals is not provided", async () => {
    const fetchMock = vi.fn().mockResolvedValue({
      ok: true,
--- a/packages/dashboard/app/components/tests/MissionManager.test.tsx
+++ b/packages/dashboard/app/components/tests/MissionManager.test.tsx
@@ -121,6 +121,7 @@ const mockMissionDetail = {
  title: "Build Auth System",
  description: "Complete authentication flow",
  status: "planning",
+  linkedGoals: [] as Array<{ id: string; title: string; status: "active" | "archived"; createdAt: string; updatedAt: string; description?: string }>,
  milestones: [
    {
      id: "MS-001",
@@ -1683,6 +1684,50 @@ describe("MissionManager", () => {
    });
  });

+  it("renders linked goal chips and invokes navigation handler", async () => {
+    const onNavigateToGoal = vi.fn();
+    const missionDetailWithGoals = {
+      ...mockMissionDetail,
+      linkedGoals: [
+        {
+          id: "G-001",
+          title: "Grow extension ecosystem",
+          status: "active" as const,
+          createdAt: "2026-01-01T00:00:00.000Z",
+          updatedAt: "2026-01-01T00:00:00.000Z",
+        },
+      ],
+    };
+    globalThis.fetch = createDetailFetchMockForMissionDetail(missionDetailWithGoals);
+
+    render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} onNavigateToGoal={onNavigateToGoal} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Build Auth System")).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText("Build Auth System"));
+
+    const chip = await screen.findByTestId("mission-linked-goal-chip-G-001");
+    expect(chip).toHaveTextContent("Grow extension ecosystem");
+
+    fireEvent.click(chip);
+    expect(onNavigateToGoal).toHaveBeenCalledWith("G-001");
+  });
+
+  it("renders linked goals empty state without chips", async () => {
+    globalThis.fetch = createDetailFetchMockForMissionDetail(mockMissionDetail);
+
+    render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Build Auth System")).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText("Build Auth System"));
+
+    expect(await screen.findByText("No linked goals.")).toBeInTheDocument();
+    expect(screen.queryByTestId(/mission-linked-goal-chip-/)).toBeNull();
+  });
+
  it("calls onClose on Escape key press", async () => {
    globalThis.fetch = createFetchMock();
    const onClose = vi.fn();
--- a/packages/dashboard/app/components/mission-types.ts
+++ b/packages/dashboard/app/components/mission-types.ts
@@ -1,6 +1,7 @@
 // Mission types for MissionManager - local copy to avoid module resolution issues

 import type {
+  Goal,
  MissionEvent as CoreMissionEvent,
  MissionEventType as CoreMissionEventType,
  MissionHealth as CoreMissionHealth,
@@ -265,6 +266,7 @@ export interface MissionSummary {
 export type MissionWithSummary = Mission & { summary?: MissionSummary };

 export interface MissionWithHierarchy extends Mission {
+  linkedGoals?: Goal[];
  milestones: Milestone[];
 }

--- a/packages/dashboard/src/tests/mission-e2e.test.ts
+++ b/packages/dashboard/src/tests/mission-e2e.test.ts
@@ -101,6 +101,7 @@ function createMockMissionStore(options?: {

      return {
        ...mission,
+        linkedGoals: [],
        milestones: missionMilestones.map((m) => ({
          ...m,
          slices: Array.from(slices.values())
@@ -1420,6 +1421,9 @@ describe("Mission API", () => {
      expect(res.body.title).toBe("Test Mission");
      expect(res.body).toHaveProperty("milestones");
      expect(Array.isArray(res.body.milestones)).toBe(true);
+      expect(res.body).toHaveProperty("linkedGoals");
+      expect(Array.isArray(res.body.linkedGoals)).toBe(true);
+      expect(res.body.linkedGoals).toEqual([]);
      expect(res.body.milestones).toHaveLength(1);
      expect(res.body.milestones[0]).toHaveProperty("slices");
      expect(Array.isArray(res.body.milestones[0].slices)).toBe(true);
--- a/packages/dashboard/src/mission-routes.ts
+++ b/packages/dashboard/src/mission-routes.ts
@@ -979,7 +979,10 @@ export function createMissionRouter(
        throw notFound("Mission not found");
      }

-      res.json(mission);
+      res.json({
+        ...mission,
+        linkedGoals: mission.linkedGoals ?? [],
+      });
    })
  );