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

feat(FN-3129): add tokenized footer and mobile initialization to MissionMan

Browse Source 
The merge adds token-based CSS styling for the MissionManager footer and mobile initialization, with 17 lines of new CSS rules in `MissionManager.css` and 4 lines of adjustments in `MissionManager.tsx`. This improves theme consistency and mobile responsiveness for the mission management component.

Fusion-Task-Id: FN-3129
This commit is contained in:
Fusion
2026-05-02 11:22:32 -07:00
committed by gsxdsm
parent d9835970e1
commit c6fcebc14c
5 changed files with 423 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@
.mission-manager-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
background: color-mix(in srgb, var(--bg) 60%, transparent);
backdrop-filter: blur(4px);
z-index: 100;
display: flex;
@@ -58,13 +58,13 @@
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border);
background: rgba(0, 0, 0, 0.1);
background: color-mix(in srgb, var(--bg) 10%, transparent);
}
/* Inline mode header - matches agents-view-header styling */
.mission-manager__header--inline {
background: var(--surface);
padding: var(--space-lg) 20px;
padding: var(--space-lg) var(--space-xl);
}
.mission-manager__header-controls {
@@ -139,6 +139,66 @@
border-radius: var(--radius-sm);
}
/* ── Desktop Two-Panel Split Layout ── */
.mission-manager__split {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
overflow: hidden;
}
.mission-manager__sidebar {
width: calc((var(--space-xl) * 11) + var(--space-md) + var(--space-xs));
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: var(--btn-border-width) solid var(--border);
background: var(--surface);
overflow-y: auto;
overflow-x: hidden;
}
.mission-manager__detail-pane {
flex: 1;
min-width: 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
padding: var(--space-lg);
}
.mission-manager__detail-pane-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: var(--space-sm);
color: var(--text-muted);
font-size: inherit;
padding: var(--space-2xl);
}
/* Hide back button on desktop — sidebar is always visible */
@media (min-width: 769px) {
.mission-manager__split ~ .mission-manager__back-btn,
.mission-manager--desktop .mission-manager__back-btn {
display: none;
}
}
/* Hide mobile stacked body on desktop */
.mission-manager__body--stacked {
display: none;
}
.mission-manager__mobile-panels {
display: none;
}
/* ── Loading & Empty States ── */
.mission-manager__loading {
display: flex;
@@ -215,12 +275,12 @@
.mission-icon-btn--danger:hover {
color: var(--color-error);
background: rgba(248, 81, 73, 0.1);
background: color-mix(in srgb, var(--color-error) 10%, transparent);
}
.mission-icon-btn--success:hover {
color: var(--color-success);
background: rgba(63, 185, 80, 0.1);
background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.mission-btn {
@@ -268,7 +328,7 @@
.mission-btn--danger {
background: var(--color-error-dark);
border-color: var(--color-error);
color: #fff;
color: var(--cta-text);
}
.mission-btn--danger:hover:not(:disabled) {
@@ -316,6 +376,23 @@
width: auto;
}
.mission-list__footer {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.mission-list__resume-actions {
display: flex;
gap: var(--space-xs);
margin-inline-start: auto;
}
.mission-list__footer-actions {
display: flex;
gap: var(--space-sm);
}
/* ── Inline Form Card ── */
.mission-form-card {
display: flex;
@@ -390,13 +467,13 @@
/* Delete-confirmation variant — danger tint */
.mission-confirm-panel--danger {
background: rgba(248, 81, 73, 0.05);
background: color-mix(in srgb, var(--color-error) 5%, transparent);
border-top-color: var(--color-error);
}
/* Link-task variant — accent tint */
.mission-confirm-panel--link {
background: rgba(88, 166, 255, 0.04);
background: color-mix(in srgb, var(--todo) 4%, transparent);
border-top-color: var(--todo);
}
@@ -568,7 +645,7 @@
.mission-list__item-progress-bar {
height: 100%;
background: var(--accent-green, #22c55e);
background: var(--color-success);
border-radius: 2px;
transition: width 0.3s ease;
}
@@ -582,33 +659,33 @@
}
.mission-health-badge--healthy {
background: var(--color-success, #22c55e);
background: var(--color-success);
}
.mission-health-badge--warning {
background: var(--color-warning, #eab308);
background: var(--color-warning);
}
.mission-health-badge--error {
background: var(--color-error, #ef4444);
background: var(--color-error);
}
.mission-list__item-progress--healthy .mission-list__item-progress-bar {
background: var(--color-success, #22c55e);
background: var(--color-success);
}
.mission-list__item-progress--warning .mission-list__item-progress-bar {
background: var(--color-warning, #eab308);
background: var(--color-warning);
}
.mission-list__item-progress--error .mission-list__item-progress-bar {
background: var(--color-error, #ef4444);
background: var(--color-error);
}
.mission-list__item-failed {
border: 0;
background: transparent;
color: var(--color-error, #ef4444);
color: var(--color-error);
font-size: 11px;
padding: 0;
cursor: pointer;
@@ -717,7 +794,7 @@
}
.mission-detail__autopilot-icon {
color: var(--color-warning, #eab308);
color: var(--color-warning);
}
.mission-detail__autopilot-activity {
@@ -802,12 +879,12 @@
.mission-toggle input[type="checkbox"]:checked + .mission-toggle__track {
background: var(--toggle-checked-bg);
border-color: var(--color-success, #22c55e);
border-color: var(--color-success);
}
.mission-toggle input[type="checkbox"]:checked + .mission-toggle__track .mission-toggle__thumb {
transform: translateX(16px);
background: var(--color-success, #22c55e);
background: var(--color-success);
}
.mission-toggle input[type="checkbox"]:focus-visible + .mission-toggle__track {
@@ -1142,7 +1219,7 @@
}
.mission-slice__header:hover {
background: rgba(255, 255, 255, 0.02);
background: color-mix(in srgb, var(--text) 2%, transparent);
}
.mission-slice__expand {
@@ -1576,7 +1653,7 @@
font-size: 11px;
font-family: var(--font-mono);
color: var(--todo);
background: rgba(88, 166, 255, 0.1);
background: color-mix(in srgb, var(--todo) 10%, transparent);
padding: 1px 6px;
border-radius: var(--radius-sm);
cursor: pointer;
@@ -1584,15 +1661,15 @@
}
.mission-feature__task-link:hover {
background: rgba(88, 166, 255, 0.2);
background: color-mix(in srgb, var(--todo) 20%, transparent);
}
.mission-feature__lineage {
display: inline-flex;
align-items: center;
font-size: 11px;
color: #f97316;
background: rgba(249, 115, 22, 0.1);
color: var(--color-warning);
background: color-mix(in srgb, var(--color-warning) 10%, transparent);
padding: 1px 6px;
border-radius: var(--radius-sm);
}
@@ -1746,8 +1823,8 @@
}
.mission-run__failure {
background: rgba(248, 81, 73, 0.1);
border: 1px solid rgba(248, 81, 73, 0.2);
background: color-mix(in srgb, var(--color-error) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
border-radius: var(--radius-sm);
padding: var(--space-xs) var(--space-sm);
margin-bottom: var(--space-xs);
@@ -2049,6 +2126,20 @@
padding: var(--space-md);
}
/* Hide desktop split on mobile */
.mission-manager__split {
display: none;
}
/* Restore mobile stacked body */
.mission-manager__body--stacked {
display: block;
}
.mission-manager__mobile-panels {
display: block;
}
.mission-detail__title {
font-size: 16px;
}
@@ -2111,8 +2202,8 @@
.mission-milestone__actions .mission-icon-btn,
.mission-slice__actions .mission-icon-btn,
.mission-feature__actions .mission-icon-btn {
min-width: 32px;
min-height: 32px;
min-width: 36px;
min-height: 36px;
}
/* Prevent iOS zoom on focus */
@@ -2297,9 +2388,9 @@
/* Light theme overrides (moved from CustomModelDropdown.css) */
[data-theme="light"] .mission-manager-overlay {
background: rgba(31, 35, 40, 0.5);
background: color-mix(in srgb, var(--bg) 50%, transparent);
}
[data-theme="light"] .mission-manager__header {
background: rgba(246, 248, 250, 0.8);
background: color-mix(in srgb, var(--surface) 80%, transparent);
}

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

@@ -436,6 +436,10 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
const [selectedMission, setSelectedMission] = useState<MissionWithHierarchy | null>(null);
const [loading, setLoading] = useState(true);
const [detailLoading, setDetailLoading] = useState(false);
const [isMobileLayout, setIsMobileLayout] = useState(() => {
if (typeof window === "undefined") return false;
return window.innerWidth <= 768;
});
// Form states
const [isCreatingMission, setIsCreatingMission] = useState(false);
@@ -488,6 +492,17 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
} | null>(null);
const [triagePreviewLoading, setTriagePreviewLoading] = useState<string | null>(null);
useEffect(() => {
if (typeof window === "undefined") {
return;
}
const update = () => setIsMobileLayout(window.innerWidth <= 768);
update();
window.addEventListener("resize", update);
return () => window.removeEventListener("resize", update);
}, []);
// Auto-open interview modal when resuming a session
useEffect(() => {
if (isActive && effectiveResumeSessionId) {
@@ -1983,62 +1998,7 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
if (!isActive) return null;
const manager = (
<div
ref={modalRef}
className={`mission-manager${isInline ? " mission-manager--inline" : ""}`}
role={isInline ? undefined : "dialog"}
aria-modal={isInline ? undefined : true}
aria-label={isInline ? undefined : "Mission Manager"}
data-testid="mission-manager-dialog"
>
{/* ── Header ── */}
<div className={`mission-manager__header${isInline ? " mission-manager__header--inline" : ""}`}>
<div className="mission-manager__header-title">
{selectedMission ? (
<button
className="mission-manager__back-btn"
onClick={handleBackToList}
title="Back to missions"
aria-label="Back to missions list"
data-testid="mission-back-btn"
>
<ChevronLeft size={18} />
</button>
) : null}
<Target size={18} className="mission-manager__header-icon" />
<h2 className="mission-manager__title">
{selectedMission ? selectedMission.title : "Missions"}
</h2>
</div>
{!isInline && (
/* Modal mode: show close button */
<button
className="modal-close"
onClick={onClose}
title="Close"
aria-label="Close Mission Manager"
data-testid="mission-close-btn"
>
<X size={18} />
</button>
)}
</div>
{/* ── Body ── */}
<div className="mission-manager__body">
{loading ? (
<div className="mission-manager__loading">
<Loader2 size={24} className="spinner" />
<span>Loading missions...</span>
</div>
) : detailLoading ? (
<div className="mission-manager__loading">
<Loader2 size={24} className="spinner" />
<span>Loading mission details...</span>
</div>
) : selectedMission ? (
/* ── Detail View ── */
const renderMissionDetailContent = (selectedMission: MissionWithHierarchy) => (
<div className="mission-detail">
<div className="mission-detail__header">
<div className="mission-detail__title-row">
@@ -3423,8 +3383,10 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
</div>
)}
</div>
) : (
/* ── List View ── */
);
const renderMissionListContent = () => (
<div className="mission-list">
{/* Create mission form */}
{isCreatingMission && (
@@ -3653,7 +3615,7 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
)}
{!isCreatingMission && (
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
<div className="mission-list__footer">
{pendingInterviewSessions.length > 0 && (
<div className="mission-resume-prompt">
<AlertCircle size={16} />
@@ -3662,7 +3624,7 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
? `Resume "${pendingInterviewSessions[0].title}"?`
: `${pendingInterviewSessions.length} interview sessions pending`}
</span>
<div style={{ display: "flex", gap: "4px", marginLeft: "auto" }}>
<div className="mission-list__resume-actions">
{pendingInterviewSessions.map((s) => (
<button
key={s.id}
@@ -3680,7 +3642,7 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
</div>
</div>
)}
<div style={{ display: "flex", gap: "8px" }}>
<div className="mission-list__footer-actions">
<button className="mission-add-btn" onClick={() => setShowInterviewModal(true)}>
<Sparkles size={16} />
Plan with AI
@@ -3693,78 +3655,181 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
</div>
)}
</div>
)}
</div>
);
{/* ── Delete confirmation panel ── */}
{deleteConfirmId && (
<div className="mission-confirm-panel mission-confirm-panel--danger">
<div className="mission-confirm-panel__content">
<p>
Delete this {deleteConfirmId.type}? This cannot be undone.
</p>
<div className="mission-confirm-panel__actions">
const renderDeleteConfirmationPanel = () => (
<div className="mission-confirm-panel mission-confirm-panel--danger">
<div className="mission-confirm-panel__content">
<p>
Delete this {deleteConfirmId?.type}? This cannot be undone.
</p>
<div className="mission-confirm-panel__actions">
<button
className="mission-btn mission-btn--danger"
onClick={async () => {
if (!deleteConfirmId) return;
if (deleteConfirmId.type === "mission") {
await handleDeleteMission(deleteConfirmId.id);
} else if (deleteConfirmId.type === "milestone") {
await handleDeleteMilestone(deleteConfirmId.id);
} else if (deleteConfirmId.type === "slice") {
await handleDeleteSlice(deleteConfirmId.id);
} else if (deleteConfirmId.type === "feature") {
await handleDeleteFeature(deleteConfirmId.id);
}
}}
>
Delete
</button>
<button className="mission-btn mission-btn--ghost" onClick={() => setDeleteConfirmId(null)}>
Cancel
</button>
</div>
</div>
</div>
);
const renderLinkTaskPanel = () => (
<div className="mission-confirm-panel mission-confirm-panel--link">
<div className="mission-confirm-panel__content">
<p>Link feature to task:</p>
<input
type="text"
placeholder="Task ID (e.g., FN-001)"
value={selectedTaskId}
onChange={(e) => setSelectedTaskId(e.target.value)}
autoFocus
/>
{availableTasks.length > 0 && (
<div className="mission-task-suggestions">
<small>Or select:</small>
<div className="mission-task-suggestions__list">
{availableTasks.slice(0, 5).map((task) => (
<button
className="mission-btn mission-btn--danger"
onClick={async () => {
if (deleteConfirmId.type === "mission") {
await handleDeleteMission(deleteConfirmId.id);
} else if (deleteConfirmId.type === "milestone") {
await handleDeleteMilestone(deleteConfirmId.id);
} else if (deleteConfirmId.type === "slice") {
await handleDeleteSlice(deleteConfirmId.id);
} else if (deleteConfirmId.type === "feature") {
await handleDeleteFeature(deleteConfirmId.id);
}
}}
key={task.id}
className="mission-task-suggestions__item"
onClick={() => setSelectedTaskId(task.id)}
>
Delete
{task.id}: {task.title || "Untitled"}
</button>
<button className="mission-btn mission-btn--ghost" onClick={() => setDeleteConfirmId(null)}>
Cancel
</button>
</div>
))}
</div>
</div>
)}
<div className="mission-confirm-panel__actions">
<button className="mission-btn mission-btn--primary" onClick={handleLinkTask}>
Link
</button>
<button className="mission-btn mission-btn--ghost" onClick={() => { setLinkTaskFeatureId(null); setSelectedTaskId(""); }}>
Cancel
</button>
</div>
</div>
</div>
);
{/* ── Link task panel ── */}
{linkTaskFeatureId && (
<div className="mission-confirm-panel mission-confirm-panel--link">
<div className="mission-confirm-panel__content">
<p>Link feature to task:</p>
<input
type="text"
placeholder="Task ID (e.g., FN-001)"
value={selectedTaskId}
onChange={(e) => setSelectedTaskId(e.target.value)}
autoFocus
/>
{availableTasks.length > 0 && (
<div className="mission-task-suggestions">
<small>Or select:</small>
<div className="mission-task-suggestions__list">
{availableTasks.slice(0, 5).map((task) => (
<button
key={task.id}
className="mission-task-suggestions__item"
onClick={() => setSelectedTaskId(task.id)}
>
{task.id}: {task.title || "Untitled"}
</button>
))}
</div>
</div>
)}
<div className="mission-confirm-panel__actions">
<button className="mission-btn mission-btn--primary" onClick={handleLinkTask}>
Link
</button>
<button className="mission-btn mission-btn--ghost" onClick={() => { setLinkTaskFeatureId(null); setSelectedTaskId(""); }}>
Cancel
</button>
const manager = (
<div
ref={modalRef}
className={`mission-manager mission-manager--desktop${isInline ? " mission-manager--inline" : ""}`}
role={isInline ? undefined : "dialog"}
aria-modal={isInline ? undefined : true}
aria-label={isInline ? undefined : "Mission Manager"}
data-testid="mission-manager-dialog"
>
{/* ── Header ── */}
<div className={`mission-manager__header${isInline ? " mission-manager__header--inline" : ""}`}>
<div className="mission-manager__header-title">
{isMobileLayout && selectedMission && (
<button
className="mission-manager__back-btn"
onClick={handleBackToList}
title="Back to missions"
aria-label="Back to missions list"
data-testid="mission-back-btn"
>
<ChevronLeft size={18} />
</button>
)}
<Target size={18} className="mission-manager__header-icon" />
<h2 className="mission-manager__title">
{selectedMission ? selectedMission.title : "Missions"}
</h2>
</div>
{!isInline && (
/* Modal mode: show close button */
<button
className="modal-close"
onClick={onClose}
title="Close"
aria-label="Close Mission Manager"
data-testid="mission-close-btn"
>
<X size={18} />
</button>
)}
</div>
{/* ── Body ── */}
{/* ── Desktop split layout (visible on desktop, hidden on mobile via CSS) ── */}
<div className="mission-manager__split">
<div className="mission-manager__sidebar">
{loading ? (
<div className="mission-manager__loading">
<Loader2 size={24} className="spinner" />
<span>Loading missions...</span>
</div>
</div>
) : (
renderMissionListContent()
)}
</div>
<div className="mission-manager__detail-pane">
{detailLoading ? (
<div className="mission-manager__loading">
<Loader2 size={24} className="spinner" />
<span>Loading mission details...</span>
</div>
) : selectedMission ? (
renderMissionDetailContent(selectedMission)
) : (
<div className="mission-manager__detail-pane-empty">
<Target size={24} />
<span>Select a mission to view details</span>
</div>
)}
{deleteConfirmId && renderDeleteConfirmationPanel()}
{linkTaskFeatureId && renderLinkTaskPanel()}
</div>
</div>
{/* ── Mobile stacked layout (hidden on desktop via CSS, shown on mobile) ── */}
<div className="mission-manager__body mission-manager__body--stacked">
{isMobileLayout ? (
loading ? (
<div className="mission-manager__loading">
<Loader2 size={24} className="spinner" />
<span>Loading missions...</span>
</div>
) : detailLoading ? (
<div className="mission-manager__loading">
<Loader2 size={24} className="spinner" />
<span>Loading mission details...</span>
</div>
) : selectedMission ? (
renderMissionDetailContent(selectedMission)
) : (
renderMissionListContent()
)
) : null}
</div>
{/* Delete/link panels for mobile stacked layout */}
{isMobileLayout && (
<div className="mission-manager__mobile-panels">
{deleteConfirmId && renderDeleteConfirmationPanel()}
{linkTaskFeatureId && renderLinkTaskPanel()}
</div>
)}
</div>

6
packages/dashboard/app/components/__tests__/DroidCliProviderCard.test.tsx
View File

@@ -1,5 +1,5 @@
import { beforeEach, describe, expect, it, vi } from "vitest";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { DroidCliProviderCard } from "../DroidCliProviderCard";
const fetchDroidCliStatus = vi.fn();
@@ -63,10 +63,10 @@ describe("DroidCliProviderCard", () => {
const enable = await screen.findByRole("button", { name: "Enable" });
expect(enable).toBeDisabled();
cleanup();
fetchDroidCliStatus.mockResolvedValue({ ...baseStatus, binary: { ...baseStatus.binary, available: true } });
render(<DroidCliProviderCard authenticated={false} />);
const secondEnable = await screen.findAllByRole("button", { name: "Enable" });
fireEvent.click(secondEnable[1]);
fireEvent.click(await screen.findByRole("button", { name: "Enable" }));
await waitFor(() => expect(setDroidCliEnabled).toHaveBeenCalledWith(true));
});

16
packages/dashboard/app/components/__tests__/MissionManager.mobile-css.test.ts
View File

@@ -41,4 +41,20 @@ describe("MissionManager mobile styles", () => {
expect(section).toContain("overflow-wrap: anywhere;");
expect(section).toContain("word-break: break-word;");
});
it("hides desktop split layout on mobile", () => {
const css = loadAllAppCss();
const section = getMissionMobileSection(css);
expect(section).toContain(".mission-manager__split {");
expect(section).toContain("display: none;");
});
it("restores stacked body on mobile", () => {
const css = loadAllAppCss();
const section = getMissionMobileSection(css);
expect(section).toContain(".mission-manager__body--stacked {");
expect(section).toContain("display: block;");
});
});

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

@@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
import { render, screen, fireEvent, waitFor, act, within } from "@testing-library/react";
import { MissionManager } from "../MissionManager";
const mockFetchAiSession = vi.fn();
@@ -640,6 +640,15 @@ function createFetchMockWithHealth(
});
}
const setViewportWidth = (width: number) => {
Object.defineProperty(window, "innerWidth", {
configurable: true,
writable: true,
value: width,
});
window.dispatchEvent(new Event("resize"));
};
describe("MissionManager", () => {
let originalFetch: typeof globalThis.fetch;
let originalEventSource: typeof globalThis.EventSource | undefined;
@@ -1081,7 +1090,7 @@ describe("MissionManager", () => {
await waitFor(() => {
// Back button should appear in detail view
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// Record initial fetch calls for mission detail
@@ -1146,7 +1155,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
const initialTelemetryCalls = fetchMock.mock.calls.filter(
@@ -1187,7 +1196,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// Record initial fetch calls for mission detail
@@ -1270,7 +1279,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// Record initial fetch calls for mission detail
@@ -1350,33 +1359,24 @@ describe("MissionManager", () => {
// Wait for detail view to render
await waitFor(() => {
// Back button should appear in detail view
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
// Milestone should be visible (auto-expanded)
expect(screen.getByText("Database Schema")).toBeDefined();
});
});
it("navigates back to list view when back button is clicked", async () => {
it("keeps sidebar list visible on desktop after opening detail", async () => {
globalThis.fetch = createDetailFetchMock();
render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
// Navigate to detail
await waitFor(() => {
expect(screen.getByText("Build Auth System")).toBeDefined();
});
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
});
// Click back
fireEvent.click(screen.getByTestId("mission-back-btn"));
// Should return to list view
await waitFor(() => {
expect(screen.getByText("Missions")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
expect(screen.getByText("API Redesign")).toBeDefined();
});
});
@@ -1414,7 +1414,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByLabelText("Back to missions list")).toBeDefined();
expect(screen.queryByLabelText("Back to missions list")).toBeNull();
});
});
@@ -1507,7 +1507,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
// Close button should still be absent in inline mode even in detail view
expect(screen.queryByTestId("mission-close-btn")).toBeNull();
});
@@ -1871,7 +1871,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// Detail header should have edit/delete buttons
@@ -1903,7 +1903,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// Click edit mission in detail header
@@ -1912,10 +1912,10 @@ describe("MissionManager", () => {
// Should show inline form with pre-filled title
await waitFor(() => {
const input = screen.getByDisplayValue("Build Auth System");
expect(input).toBeDefined();
expect(screen.getByText("Update")).toBeDefined();
expect(screen.getByText("Cancel")).toBeDefined();
const inputs = screen.getAllByDisplayValue("Build Auth System");
expect(inputs.length).toBeGreaterThan(0);
expect(screen.getAllByText("Update").length).toBeGreaterThan(0);
expect(screen.getAllByText("Cancel").length).toBeGreaterThan(0);
});
});
@@ -1930,7 +1930,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// Click delete mission in detail header
@@ -2655,7 +2655,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// After async telemetry loads, validation telemetry section should appear
@@ -2789,7 +2789,7 @@ describe("MissionManager", () => {
fireEvent.click(screen.getByText("Build Auth System"));
await waitFor(() => {
expect(screen.getByTestId("mission-back-btn")).toBeDefined();
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
// Resume button with aria-label="Resume mission" should appear for blocked mission
@@ -2826,4 +2826,70 @@ describe("MissionManager", () => {
expect(screen.getByText(/"queueDepth": 4/)).toBeDefined();
});
});
describe("desktop split layout", () => {
it("renders split container with sidebar and detail pane", async () => {
globalThis.fetch = createFetchMock();
render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
await waitFor(() => expect(screen.getByText("Build Auth System")).toBeDefined());
expect(document.querySelector(".mission-manager__split")).toBeTruthy();
expect(document.querySelector(".mission-manager__sidebar")).toBeTruthy();
expect(document.querySelector(".mission-manager__detail-pane")).toBeTruthy();
expect(document.querySelector(".mission-manager__body--stacked")).toBeTruthy();
});
it("shows empty placeholder when no mission selected", async () => {
globalThis.fetch = createFetchMock();
render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
await waitFor(() => expect(screen.getByText("Select a mission to view details")).toBeDefined());
expect(document.querySelector(".mission-manager__detail-pane-empty")).toBeTruthy();
expect(screen.getByText("Build Auth System")).toBeDefined();
});
it("sidebar remains visible after selecting a mission", async () => {
globalThis.fetch = createFetchMock();
render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
await waitFor(() => expect(screen.getByText("Build Auth System")).toBeDefined());
const sidebar = document.querySelector(".mission-manager__sidebar") as HTMLElement;
fireEvent.click(within(sidebar).getByText("Build Auth System"));
await waitFor(() => expect(document.querySelector(".mission-manager__detail-pane .mission-detail")).toBeTruthy());
expect(document.querySelector(".mission-manager__sidebar .mission-list__item")).toBeTruthy();
expect(screen.getByTestId("mission-tab-structure")).toBeDefined();
expect(screen.getByTestId("mission-tab-activity")).toBeDefined();
expect(document.querySelector(".mission-manager__detail-pane-empty")).toBeNull();
});
it("clicking different mission updates detail pane", async () => {
globalThis.fetch = createFetchMock();
render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
await waitFor(() => expect(screen.getByText("Build Auth System")).toBeDefined());
const sidebar = document.querySelector(".mission-manager__sidebar") as HTMLElement;
fireEvent.click(within(sidebar).getByText("Build Auth System"));
await waitFor(() => expect(screen.getByTestId("mission-tab-structure")).toBeDefined());
fireEvent.click(within(sidebar).getByText("API Redesign"));
await waitFor(() => expect(screen.getByText("API Redesign")).toBeDefined());
expect(document.querySelectorAll(".mission-manager__sidebar .mission-list__item").length).toBeGreaterThan(1);
});
it("does not render desktop back button", async () => {
setViewportWidth(1200);
globalThis.fetch = createFetchMock();
render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
await waitFor(() => expect(screen.getByText("Build Auth System")).toBeDefined());
const sidebar = document.querySelector(".mission-manager__sidebar") as HTMLElement;
fireEvent.click(within(sidebar).getByText("Build Auth System"));
expect(screen.queryByTestId("mission-back-btn")).toBeNull();
});
it("delete confirmation renders inside detail pane", async () => {
globalThis.fetch = createFetchMock();
render(<MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />);
await waitFor(() => expect(screen.getByText("Build Auth System")).toBeDefined());
const sidebar = document.querySelector(".mission-manager__sidebar") as HTMLElement;
fireEvent.click(within(sidebar).getByText("Build Auth System"));
await waitFor(() => expect(screen.getByLabelText("Delete mission")).toBeDefined());
fireEvent.click(screen.getByLabelText("Delete mission"));
await waitFor(() => expect(document.querySelector(".mission-manager__detail-pane .mission-confirm-panel")).toBeTruthy());
});
});
});