root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FN-5897: surface linked goals in mission read paths

Browse Source 
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
This commit is contained in:
gsxdsm
2026-06-02 17:58:41 -07:00
parent 6c7ed1e1fc
commit abbeaec0a8
17 changed files with 332 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/dashboard/app/App.tsx
View File

@@ -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>
);

6
packages/dashboard/app/components/GoalsView.css
View File

@@ -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 {

42
packages/dashboard/app/components/GoalsView.tsx
View File

@@ -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 ? (

44
packages/dashboard/app/components/MissionManager.css
View File

@@ -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%;

31
packages/dashboard/app/components/MissionManager.tsx
View File

@@ -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 ── */}

31
packages/dashboard/app/components/__tests__/GoalsView.test.tsx
View File

@@ -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,

45
packages/dashboard/app/components/__tests__/MissionManager.test.tsx
View File

@@ -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();

2
packages/dashboard/app/components/mission-types.ts
View File

@@ -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[];
}

4
packages/dashboard/src/__tests__/mission-e2e.test.ts
View File

@@ -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);

5
packages/dashboard/src/mission-routes.ts
View File

@@ -979,7 +979,10 @@ export function createMissionRouter(
throw notFound("Mission not found");
}
res.json(mission);
res.json({
...mission,
linkedGoals: mission.linkedGoals ?? [],
});
})
);