From 605c1f7641d8a4328f7e4252f10c98d96d877fce Mon Sep 17 00:00:00 2001
From: Mark Schaake <mark.schaake@gmail.com>
Date: Thu, 28 May 2026 10:59:16 -0700
Subject: [PATCH 1/2] fix(console-ui): repair plans workspace layout

Fix resizable handle sizing, constrain long plan content inside panels,
and make the plan metadata disclosure preserve body scroll space.
---
 .../preview/plan-body-highlight.tsx           |   2 +-
 .../src/components/ui/resizable.tsx           |   2 +-
 packages/console-ui/src/globals.css           |   1 +
 .../views/plans/__tests__/plans-view.test.tsx |  26 +-
 .../console-ui/src/views/plans/plans-view.tsx |  16 +-
 .../src/views/plans/session-plan-detail.tsx   | 426 ++++++++++--------
 .../src/views/plans/session-plan-list.tsx     |   8 +-
 .../plans/session-plan-markdown-preview.tsx   |  16 +-
 8 files changed, 296 insertions(+), 201 deletions(-)

diff --git a/packages/console-ui/src/components/preview/plan-body-highlight.tsx b/packages/console-ui/src/components/preview/plan-body-highlight.tsx
index 25b7375b7..76cbd6319 100644
--- a/packages/console-ui/src/components/preview/plan-body-highlight.tsx
+++ b/packages/console-ui/src/components/preview/plan-body-highlight.tsx
@@ -97,7 +97,7 @@ export function PlanBodyHighlight({ content }: PlanBodyHighlightProps) {
 
   return (
     <div
-      className="text-xs overflow-x-auto [&_pre]:!bg-transparent [&_pre]:p-3 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_code]:text-xs"
+      className="max-w-full min-w-0 overflow-x-auto text-xs [&_pre]:!bg-transparent [&_pre]:p-3 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_code]:text-xs"
       dangerouslySetInnerHTML={{ __html: highlightedHtml }}
     />
   );
diff --git a/packages/console-ui/src/components/ui/resizable.tsx b/packages/console-ui/src/components/ui/resizable.tsx
index a900a74e3..d4dfef2ed 100644
--- a/packages/console-ui/src/components/ui/resizable.tsx
+++ b/packages/console-ui/src/components/ui/resizable.tsx
@@ -32,7 +32,7 @@ const ResizableHandle = ({
 }) => (
   <Separator
     className={cn(
-      'relative flex w-full items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=horizontal]]:h-px [&[data-orientation=horizontal]]:w-full [&[data-orientation=horizontal]]:after:left-0 [&[data-orientation=horizontal]]:after:h-1 [&[data-orientation=horizontal]]:after:w-full [&[data-orientation=horizontal]]:after:-translate-y-1/2 [&[data-orientation=horizontal]]:after:translate-x-0 [&[data-orientation=horizontal]>div]:rotate-90',
+      'relative flex h-full w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[aria-orientation=horizontal]]:h-px [&[aria-orientation=horizontal]]:w-full [&[aria-orientation=horizontal]]:after:left-0 [&[aria-orientation=horizontal]]:after:h-1 [&[aria-orientation=horizontal]]:after:w-full [&[aria-orientation=horizontal]]:after:-translate-y-1/2 [&[aria-orientation=horizontal]]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90',
       className,
     )}
     {...props}
diff --git a/packages/console-ui/src/globals.css b/packages/console-ui/src/globals.css
index b2c1a5985..7259f5b70 100644
--- a/packages/console-ui/src/globals.css
+++ b/packages/console-ui/src/globals.css
@@ -108,6 +108,7 @@
   .plan-prose {
     color: var(--color-foreground);
     line-height: 1.6;
+    overflow-wrap: anywhere;
   }
 
   .plan-prose > * + * {
diff --git a/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx b/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx
index eb336c965..caa869921 100644
--- a/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx
+++ b/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx
@@ -416,13 +416,27 @@ describe('PlansView', () => {
     };
     globalThis.fetch = makeFetchMock({ plans: [plan] }, richShowResponse);
     render(<PlansView />);
+
+    // Profile lives in the always-visible summary; should render without
+    // expanding the disclosure. Tightened to getByText (no duplication).
     await waitFor(() => {
-      // Profile
       expect(screen.getByText('analytics-heavy')).toBeDefined();
-      // Required dimensions
+    });
+
+    // Disclosure content is hidden until the trigger is clicked.
+    expect(screen.queryByText('performance')).toBeNull();
+    expect(screen.queryByText('What is the rollout plan?')).toBeNull();
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /show details/i }));
+    });
+
+    await waitFor(() => {
+      // Required dimensions. `scope` is required but not in covered.
       expect(screen.getByText('scope')).toBeDefined();
-      // acceptance_criteria appears in required_dimensions and missing_dimensions badges
-      expect(screen.getAllByText('acceptance_criteria').length).toBeGreaterThan(0);
+      // `acceptance_criteria` is both a required and a missing dimension —
+      // appears twice (once per section).
+      expect(screen.getAllByText('acceptance_criteria').length).toBe(2);
       // Optional dimensions
       expect(screen.getByText('performance')).toBeDefined();
       // Skipped dimensions (plan-level)
@@ -434,11 +448,11 @@ describe('PlansView', () => {
       expect(screen.getByText('problem_statement_covered')).toBeDefined();
       // Readiness - missing dimensions section
       expect(screen.getByText('Missing dimensions')).toBeDefined();
-      const allMissing = screen.getAllByText('acceptance_criteria');
-      expect(allMissing.length).toBeGreaterThan(0);
       // Readiness - skipped dimensions section
       expect(screen.getByText('Skipped dimensions (readiness)')).toBeDefined();
       expect(screen.getByText('low_priority_skipped')).toBeDefined();
+      // Profile no longer duplicated in the disclosure body.
+      expect(screen.getAllByText('analytics-heavy').length).toBe(1);
     });
   });
 
diff --git a/packages/console-ui/src/views/plans/plans-view.tsx b/packages/console-ui/src/views/plans/plans-view.tsx
index 554fe8d2c..5084ad18c 100644
--- a/packages/console-ui/src/views/plans/plans-view.tsx
+++ b/packages/console-ui/src/views/plans/plans-view.tsx
@@ -70,10 +70,18 @@ export function PlansView({ onNavigate }: PlansViewProps) {
         </div>
       )}
 
-      {/* Main list + detail layout */}
+      {/*
+        Main list + detail layout.
+        Note: `min-w-0` is set on every panel and propagates down through
+        SessionPlanList / SessionPlanDetail / SessionPlanMarkdownPreview.
+        Long unbroken tokens (URLs, file paths) in the markdown preview
+        would otherwise expand the flex children past the panel width.
+        Do not remove `min-w-0` from these ancestors without testing with
+        a plan body containing a long unbroken string.
+      */}
       {hasPlans && (
-        <ResizablePanelGroup orientation="horizontal" className="flex-1 min-h-0">
-          <ResizablePanel defaultSize={30} minSize={20}>
+        <ResizablePanelGroup orientation="horizontal" className="flex-1 min-h-0 min-w-0">
+          <ResizablePanel defaultSize={30} minSize={20} className="min-w-0 overflow-hidden">
             <SessionPlanList
               plans={plans}
               selectedSession={selectedSession}
@@ -81,7 +89,7 @@ export function PlansView({ onNavigate }: PlansViewProps) {
             />
           </ResizablePanel>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={70} minSize={30}>
+          <ResizablePanel defaultSize={70} minSize={30} className="min-w-0 overflow-hidden">
             <SessionPlanDetail
               detail={detail}
               status={detailStatus}
diff --git a/packages/console-ui/src/views/plans/session-plan-detail.tsx b/packages/console-ui/src/views/plans/session-plan-detail.tsx
index 8a3999751..1550c1730 100644
--- a/packages/console-ui/src/views/plans/session-plan-detail.tsx
+++ b/packages/console-ui/src/views/plans/session-plan-detail.tsx
@@ -3,8 +3,15 @@
  * Shows metadata, dimensions, readiness detail, and a scrollable markdown preview.
  */
 import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
+import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
 import { SessionPlanMarkdownPreview } from './session-plan-markdown-preview';
 import type { SessionPlanShowResponse } from '@eforge-build/client/browser';
 
@@ -15,6 +22,182 @@ interface SessionPlanDetailProps {
   onNavigate?: (href: string) => void;
 }
 
+type BadgeVariant = React.ComponentProps<typeof Badge>['variant'];
+
+function DimensionBadges({
+  dimensions,
+  variant = 'outline',
+  coveredDimensions,
+  coveredVariant = 'secondary',
+}: {
+  dimensions: string[];
+  variant?: BadgeVariant;
+  /** When provided, dimensions in this set render with `coveredVariant`. */
+  coveredDimensions?: string[];
+  coveredVariant?: BadgeVariant;
+}) {
+  const coveredSet = React.useMemo(
+    () => new Set(coveredDimensions ?? []),
+    [coveredDimensions],
+  );
+  return (
+    <div className="flex flex-wrap gap-1">
+      {dimensions.map((dimension) => (
+        <Badge
+          key={dimension}
+          variant={coveredSet.has(dimension) ? coveredVariant : variant}
+          className="text-xs"
+        >
+          {dimension}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+function BuildLink({
+  session,
+  onNavigate,
+  className,
+}: {
+  session: string;
+  onNavigate?: (href: string) => void;
+  className?: string;
+}) {
+  const href = `/console/runs/${session}`;
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onNavigate) {
+      event.preventDefault();
+      onNavigate(href);
+    }
+  };
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      className={cn('font-mono text-primary hover:underline', className)}
+    >
+      {session}
+    </a>
+  );
+}
+
+function MetadataSummary({
+  plan,
+  onNavigate,
+}: {
+  plan: SessionPlanShowResponse['plan'];
+  onNavigate?: (href: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs">
+      <span>
+        <span className="text-muted-foreground">Type </span>
+        <span className="font-medium">{plan.planning_type}</span>
+      </span>
+      <span>
+        <span className="text-muted-foreground">Depth </span>
+        <span className="font-medium">{plan.planning_depth}</span>
+      </span>
+      {plan.profile && (
+        <span>
+          <span className="text-muted-foreground">Profile </span>
+          <span className="font-medium">{plan.profile}</span>
+        </span>
+      )}
+      {plan.agent_profile && (
+        <span>
+          <span className="text-muted-foreground">Agent profile </span>
+          <span className="font-medium">{plan.agent_profile}</span>
+        </span>
+      )}
+      {plan.eforge_session && (
+        <span>
+          <span className="text-muted-foreground">Build </span>
+          <BuildLink session={plan.eforge_session} onNavigate={onNavigate} />
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Disclosure body. Renders only the deeper breakdown (dimensions, open
+ * questions, readiness, path). Type/Depth/Profile/Agent profile/Build live in
+ * `MetadataSummary` above and are intentionally omitted here.
+ */
+function DetailsContent({ detail }: { detail: SessionPlanShowResponse }) {
+  const { plan, readiness, path } = detail;
+
+  return (
+    <div className="space-y-3 rounded-md border border-border bg-background/40 p-3 text-xs">
+      {plan.required_dimensions.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground font-medium">Required dimensions</p>
+          <DimensionBadges
+            dimensions={plan.required_dimensions}
+            variant="outline"
+            coveredDimensions={readiness.coveredDimensions}
+          />
+        </div>
+      )}
+
+      {plan.optional_dimensions.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground font-medium">Optional dimensions</p>
+          <DimensionBadges dimensions={plan.optional_dimensions} />
+        </div>
+      )}
+
+      {plan.skipped_dimensions.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground font-medium">Skipped dimensions</p>
+          <DimensionBadges
+            dimensions={plan.skipped_dimensions.map((dimension) => dimension.name)}
+          />
+        </div>
+      )}
+
+      {plan.open_questions.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground font-medium">Open questions</p>
+          <ul className="space-y-1 list-disc list-inside">
+            {plan.open_questions.map((question, index) => (
+              <li key={index}>{question}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {readiness.coveredDimensions.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground font-medium">Covered dimensions</p>
+          <DimensionBadges dimensions={readiness.coveredDimensions} variant="secondary" />
+        </div>
+      )}
+
+      {!readiness.ready && readiness.missingDimensions.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground font-medium">Missing dimensions</p>
+          <DimensionBadges dimensions={readiness.missingDimensions} variant="destructive" />
+        </div>
+      )}
+
+      {readiness.skippedDimensions.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground font-medium">Skipped dimensions (readiness)</p>
+          <DimensionBadges dimensions={readiness.skippedDimensions} />
+        </div>
+      )}
+
+      <div>
+        <p className="text-muted-foreground font-medium">Path</p>
+        <p className="font-mono break-all mt-0.5">{path}</p>
+      </div>
+    </div>
+  );
+}
+
 export function SessionPlanDetail({
   detail,
   status,
@@ -50,194 +233,77 @@ export function SessionPlanDetail({
 
   if (!detail) return null;
 
-  const { plan, readiness, path } = detail;
-
-  const handleBuildLink = (
-    e: React.MouseEvent<HTMLAnchorElement>,
-    href: string,
-  ) => {
-    if (onNavigate) {
-      e.preventDefault();
-      onNavigate(href);
-    }
-  };
+  const { plan, readiness } = detail;
 
   return (
-    <ScrollArea className="h-full">
-      <div className="p-4 space-y-4 text-xs">
-        {/* Session ID, lifecycle status, readiness */}
-        <div className="space-y-1">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="font-mono text-sm font-semibold">{plan.session}</span>
-            <Badge variant="outline" className="text-xs">
-              {plan.status}
-            </Badge>
-            <Badge
-              variant={readiness.ready ? 'secondary' : 'outline'}
-              className="text-xs"
-            >
-              {readiness.ready ? 'ready' : 'not ready'}
-            </Badge>
-          </div>
-          {plan.topic && (
-            <p className="text-muted-foreground">{plan.topic}</p>
-          )}
-        </div>
-
-        {/* Planning type / depth / profile */}
-        <div className="grid grid-cols-2 gap-2">
-          <div>
-            <p className="text-muted-foreground font-medium">Type</p>
-            <p className="font-medium mt-0.5">{plan.planning_type}</p>
-          </div>
-          <div>
-            <p className="text-muted-foreground font-medium">Depth</p>
-            <p className="font-medium mt-0.5">{plan.planning_depth}</p>
-          </div>
-          {plan.profile && (
-            <div>
-              <p className="text-muted-foreground font-medium">Profile</p>
-              <p className="font-medium mt-0.5">{plan.profile}</p>
-            </div>
-          )}
-          {plan.agent_profile && (
-            <div>
-              <p className="text-muted-foreground font-medium">Agent profile</p>
-              <p className="font-medium mt-0.5">{plan.agent_profile}</p>
-            </div>
-          )}
-        </div>
-
-        {/* Required dimensions */}
-        {plan.required_dimensions.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Required dimensions</p>
-            <div className="flex flex-wrap gap-1">
-              {plan.required_dimensions.map((d) => (
-                <Badge
-                  key={d}
-                  variant={readiness.coveredDimensions.includes(d) ? 'secondary' : 'outline'}
-                  className="text-xs"
-                >
-                  {d}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Optional dimensions */}
-        {plan.optional_dimensions.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Optional dimensions</p>
-            <div className="flex flex-wrap gap-1">
-              {plan.optional_dimensions.map((d) => (
-                <Badge key={d} variant="outline" className="text-xs">
-                  {d}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Skipped dimensions */}
-        {plan.skipped_dimensions.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Skipped dimensions</p>
-            <div className="flex flex-wrap gap-1">
-              {plan.skipped_dimensions.map((d) => (
-                <Badge key={d.name} variant="outline" className="text-xs">
-                  {d.name}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Open questions */}
-        {plan.open_questions.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Open questions</p>
-            <ul className="space-y-1 list-disc list-inside">
-              {plan.open_questions.map((q, i) => (
-                <li key={i}>{q}</li>
-              ))}
-            </ul>
-          </div>
-        )}
-
-        {/* Readiness detail: covered dimensions */}
-        {readiness.coveredDimensions.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Covered dimensions</p>
-            <div className="flex flex-wrap gap-1">
-              {readiness.coveredDimensions.map((d) => (
-                <Badge key={d} variant="secondary" className="text-xs">
-                  {d}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Readiness detail: missing dimensions */}
-        {!readiness.ready && readiness.missingDimensions.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Missing dimensions</p>
-            <div className="flex flex-wrap gap-1">
-              {readiness.missingDimensions.map((d) => (
-                <Badge key={d} variant="destructive" className="text-xs">
-                  {d}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Readiness detail: skipped dimensions */}
-        {readiness.skippedDimensions.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Skipped dimensions (readiness)</p>
-            <div className="flex flex-wrap gap-1">
-              {readiness.skippedDimensions.map((d) => (
-                <Badge key={d} variant="outline" className="text-xs">
-                  {d}
-                </Badge>
-              ))}
+    <div className="flex h-full min-h-0 min-w-0 flex-col">
+      {/*
+        `key` resets the Collapsible's internal open state when the selected
+        plan changes — preferred over a useEffect for clarity.
+      */}
+      <Collapsible
+        key={plan.session}
+        className="shrink-0 border-b border-border p-4 pb-3 text-xs"
+      >
+        <div className="flex items-start gap-3">
+          <div className="min-w-0 flex-1 space-y-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="font-mono text-sm font-semibold truncate">{plan.session}</span>
+              <Badge variant="outline" className="text-xs">
+                {plan.status}
+              </Badge>
+              <Badge
+                variant={readiness.ready ? 'secondary' : 'outline'}
+                className="text-xs"
+              >
+                {readiness.ready ? 'ready' : 'not ready'}
+              </Badge>
             </div>
+            {plan.topic && (
+              <p className="text-muted-foreground line-clamp-2">{plan.topic}</p>
+            )}
+            <MetadataSummary plan={plan} onNavigate={onNavigate} />
           </div>
-        )}
-
-        {/* Path */}
-        <div>
-          <p className="text-muted-foreground font-medium">Path</p>
-          <p className="font-mono break-all mt-0.5">{path}</p>
-        </div>
 
-        {/* Build session link */}
-        {plan.eforge_session && (
-          <div>
-            <p className="text-muted-foreground font-medium">Build session</p>
-            <a
-              href={`/console/runs/${plan.eforge_session}`}
-              onClick={(e) =>
-                handleBuildLink(e, `/console/runs/${plan.eforge_session!}`)
-              }
-              className="font-mono text-primary hover:underline break-all mt-0.5 inline-block"
+          <CollapsibleTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs group"
             >
-              {plan.eforge_session}
-            </a>
-          </div>
-        )}
+              <ChevronDown
+                className={cn(
+                  'h-3.5 w-3.5 transition-transform',
+                  'group-data-[state=open]:rotate-180',
+                )}
+              />
+              <span className="group-data-[state=open]:hidden">Show details</span>
+              <span className="hidden group-data-[state=open]:inline">Hide details</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        {/*
+          Disclosure body is capped relative to viewport so a dense plan
+          can't push the markdown preview off-screen. Native scroll matches
+          the markdown preview below; both swap Radix ScrollArea for native
+          overflow because Radix's viewport breaks `flex-1` height behavior.
+        */}
+        <CollapsibleContent className="max-h-[40vh] overflow-y-auto pt-2">
+          <DetailsContent detail={detail} />
+        </CollapsibleContent>
+      </Collapsible>
 
-        {/* Markdown preview */}
-        {plan.body && (
-          <div className="space-y-1">
-            <p className="text-muted-foreground font-medium">Plan body</p>
-            <SessionPlanMarkdownPreview body={plan.body} />
+      <div className="flex min-h-0 flex-1 flex-col p-4 pt-3 text-xs">
+        <p className="mb-1.5 shrink-0 text-muted-foreground font-medium">Plan body</p>
+        {plan.body ? (
+          <SessionPlanMarkdownPreview body={plan.body} className="max-h-none flex-1" />
+        ) : (
+          <div className="flex flex-1 items-center justify-center rounded-md border border-border text-muted-foreground">
+            No plan body.
           </div>
         )}
       </div>
-    </ScrollArea>
+    </div>
   );
 }
diff --git a/packages/console-ui/src/views/plans/session-plan-list.tsx b/packages/console-ui/src/views/plans/session-plan-list.tsx
index 7d4337e1d..3e222ba84 100644
--- a/packages/console-ui/src/views/plans/session-plan-list.tsx
+++ b/packages/console-ui/src/views/plans/session-plan-list.tsx
@@ -15,8 +15,8 @@ interface SessionPlanListProps {
 
 export function SessionPlanList({ plans, selectedSession, onSelect }: SessionPlanListProps) {
   return (
-    <ScrollArea className="h-full">
-      <ul className="space-y-1 p-2">
+    <ScrollArea className="h-full min-w-0">
+      <ul className="space-y-1 p-2 min-w-0">
         {plans.map((plan) => (
           <li key={plan.session}>
             <button
@@ -24,11 +24,11 @@ export function SessionPlanList({ plans, selectedSession, onSelect }: SessionPla
               onClick={() => onSelect(plan.session)}
               aria-label={`${plan.session} ${plan.topic}`}
               className={cn(
-                'w-full text-left px-3 py-2 rounded-md text-xs hover:bg-accent/50 transition-colors',
+                'w-full min-w-0 overflow-hidden text-left px-3 py-2 rounded-md text-xs hover:bg-accent/50 transition-colors',
                 selectedSession === plan.session && 'bg-accent text-accent-foreground',
               )}
             >
-              <div className="flex items-center gap-2 flex-wrap">
+              <div className="flex min-w-0 items-center gap-2 flex-wrap">
                 <span className="font-mono font-medium truncate max-w-[160px]">
                   {plan.session}
                 </span>
diff --git a/packages/console-ui/src/views/plans/session-plan-markdown-preview.tsx b/packages/console-ui/src/views/plans/session-plan-markdown-preview.tsx
index 10ee689d8..1398adc6a 100644
--- a/packages/console-ui/src/views/plans/session-plan-markdown-preview.tsx
+++ b/packages/console-ui/src/views/plans/session-plan-markdown-preview.tsx
@@ -2,20 +2,26 @@
  * Scrollable wrapper around the plan body markdown renderer.
  */
 import * as React from 'react';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { PlanBodyHighlight } from '@/components/preview/plan-body-highlight';
+import { cn } from '@/lib/utils';
 
 interface SessionPlanMarkdownPreviewProps {
   /** The plan body markdown string from SessionPlanShowResponse.plan.body. */
   body: string;
+  className?: string;
 }
 
-export function SessionPlanMarkdownPreview({ body }: SessionPlanMarkdownPreviewProps) {
+export function SessionPlanMarkdownPreview({ body, className }: SessionPlanMarkdownPreviewProps) {
   return (
-    <ScrollArea className="max-h-96 rounded-md border border-border">
-      <div className="p-3">
+    <div
+      className={cn(
+        'max-h-96 min-w-0 overflow-y-auto overflow-x-hidden rounded-md border border-border',
+        className,
+      )}
+    >
+      <div className="p-3 min-w-0">
         <PlanBodyHighlight content={body} />
       </div>
-    </ScrollArea>
+    </div>
   );
 }

From 418bb2c2cfda12949b3b41d601c600a3993a0895 Mon Sep 17 00:00:00 2001
From: Mark Schaake <mark.schaake@gmail.com>
Date: Thu, 28 May 2026 11:09:48 -0700
Subject: [PATCH 2/2] test(console-ui): thin high-level UI test coverage

Collapse repetitive console UI assertions into focused integration-style checks while preserving coverage of routing, plan, dashboard, header, and system surfaces.
---
 .../src/__tests__/console-shell.test.tsx      |  62 +-
 .../console-ui/src/__tests__/header.test.tsx  | 155 +---
 .../src/__tests__/now-dashboard.test.tsx      | 437 ++---------
 .../views/plans/__tests__/plans-view.test.tsx | 413 ++--------
 .../__tests__/system-view-content.test.tsx    | 727 +++---------------
 5 files changed, 245 insertions(+), 1549 deletions(-)

diff --git a/packages/console-ui/src/__tests__/console-shell.test.tsx b/packages/console-ui/src/__tests__/console-shell.test.tsx
index e8bef7803..6c46875cc 100644
--- a/packages/console-ui/src/__tests__/console-shell.test.tsx
+++ b/packages/console-ui/src/__tests__/console-shell.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ConsoleShell } from '@/components/shell/console-shell';
 import { initialConsoleProjectState } from '@/lib/project-state';
 
@@ -8,64 +8,16 @@ const stubState = {
   connectionStatus: 'connected' as const,
 };
 
-describe('ConsoleShell', () => {
-  it('renders a <header> element as the first child of the shell root', () => {
-    const { container } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const shellRoot = container.firstElementChild;
-    const firstChild = shellRoot?.firstElementChild;
-    expect(firstChild?.tagName.toLowerCase()).toBe('header');
-  });
-
-  it('renders children inside a <main> element', () => {
-    const { getByRole } = render(
+describe('ConsoleShell layout', () => {
+  it('renders the header shell and places children in the main landmark', () => {
+    render(
       <ConsoleShell projectState={stubState}>
         <div data-testid="child">content</div>
       </ConsoleShell>,
     );
-    const main = getByRole('main');
-    expect(main).toBeDefined();
-    expect(main.querySelector('[data-testid="child"]')).not.toBeNull();
-  });
-
-  it('does not render the legacy sidebar navigation element', () => {
-    const { queryByRole } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    // The old sidebar rendered as <aside aria-label="Console navigation">
-    expect(queryByRole('complementary', { name: /console navigation/i })).toBeNull();
-  });
-
-  it('does not render the legacy bottom status strip', () => {
-    const { queryByLabelText } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    // The old status strip had aria-label="connection and daemon status"
-    expect(queryByLabelText('connection and daemon status')).toBeNull();
-  });
 
-  it('does not render any <aside> element', () => {
-    const { container } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    expect(container.querySelector('aside')).toBeNull();
-  });
-
-  it('does not render any <footer> element', () => {
-    const { container } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    expect(container.querySelector('footer')).toBeNull();
+    expect(screen.getByRole('banner')).toBeDefined();
+    const main = screen.getByRole('main');
+    expect(main.querySelector('[data-testid="child"]')).not.toBeNull();
   });
 });
diff --git a/packages/console-ui/src/__tests__/header.test.tsx b/packages/console-ui/src/__tests__/header.test.tsx
index 6ec1e4c5f..37413bc9a 100644
--- a/packages/console-ui/src/__tests__/header.test.tsx
+++ b/packages/console-ui/src/__tests__/header.test.tsx
@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import { ConsoleShell } from '@/components/shell/console-shell';
 import { initialConsoleProjectState } from '@/lib/project-state';
-import { EFORGE_LOGO_URL } from '@/lib/brand';
+import { EFORGE_LOGO_ALT, EFORGE_LOGO_URL } from '@/lib/brand';
 
 const FIXED_NOW = new Date('2025-01-15T12:00:30.000Z').getTime();
 
@@ -33,7 +33,16 @@ const stubState = {
   },
 };
 
-describe('header content in ConsoleShell', () => {
+function renderShell(onNavigate = vi.fn()) {
+  render(
+    <ConsoleShell projectState={stubState} onNavigate={onNavigate}>
+      <div>content</div>
+    </ConsoleShell>,
+  );
+  return { onNavigate };
+}
+
+describe('ConsoleShell header', () => {
   beforeEach(() => {
     vi.useFakeTimers();
     vi.setSystemTime(FIXED_NOW);
@@ -43,139 +52,23 @@ describe('header content in ConsoleShell', () => {
     vi.useRealTimers();
   });
 
-  it('renders a <header> element as first child of the shell root', () => {
-    const { container } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const shellRoot = container.firstElementChild;
-    const firstChild = shellRoot?.firstElementChild;
-    expect(firstChild?.tagName.toLowerCase()).toBe('header');
-  });
-
-  it('header contains the eforge logo image with correct src', () => {
-    const { container } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const header = container.querySelector('header');
-    const img = header?.querySelector('img');
-    expect(img).not.toBeNull();
-    expect(img!.src).toBe(EFORGE_LOGO_URL);
-    expect(img!.alt).toBeTruthy();
-  });
-
-  it('header contains project repo basename', () => {
-    const { container } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const header = container.querySelector('header');
-    expect(header?.textContent).toContain('my-project');
-  });
-
-  it('header contains connection-status indicator', () => {
-    const { getByLabelText } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const indicator = getByLabelText(/connection status/i);
-    expect(indicator).toBeDefined();
-  });
-
-  it('header contains auto-build toggle switch', () => {
-    const { getByRole } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const toggle = getByRole('switch', { name: /auto-build toggle/i });
-    expect(toggle).toBeDefined();
-  });
-
-  it('header contains queue-count chip', () => {
-    const { getByLabelText } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const queueChip = getByLabelText(/queue count/i);
-    expect(queueChip).toBeDefined();
-  });
-
-  it('header contains active-count chip', () => {
-    const { getByLabelText } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const activeChip = getByLabelText(/active builds count/i);
-    expect(activeChip).toBeDefined();
-  });
-
-  it('header contains last-update timestamp', () => {
-    const { getByLabelText } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const timestamp = getByLabelText(/last update/i);
-    expect(timestamp).toBeDefined();
-  });
+  it('shows brand, project, connection, and build status controls', () => {
+    renderShell();
 
-  it('does not render the legacy sidebar aside element', () => {
-    const { queryByRole } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    expect(queryByRole('complementary', { name: /console navigation/i })).toBeNull();
+    const logo = screen.getByAltText(EFORGE_LOGO_ALT) as HTMLImageElement;
+    expect(logo.src).toBe(EFORGE_LOGO_URL);
+    expect(screen.getByText('my-project')).toBeDefined();
+    expect(screen.getByLabelText(/connection status/i)).toBeDefined();
+    expect(screen.getByRole('switch', { name: /auto-build toggle/i })).toBeDefined();
+    expect(screen.getByLabelText(/queue count/i)).toBeDefined();
+    expect(screen.getByLabelText(/active builds count/i)).toBeDefined();
   });
 
-  it('does not render the legacy bottom status strip', () => {
-    const { queryByLabelText } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    expect(queryByLabelText('connection and daemon status')).toBeNull();
-  });
+  it('routes header navigation through onNavigate', () => {
+    const { onNavigate } = renderShell();
 
-  it('renders a Plans navigation button in the header', () => {
-    const { getByRole } = render(
-      <ConsoleShell projectState={stubState}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const plansButton = getByRole('button', { name: /^plans$/i });
-    expect(plansButton).toBeDefined();
-  });
+    fireEvent.click(screen.getByRole('button', { name: /^plans$/i }));
 
-  it('clicking the Plans button calls onNavigate with /console/plans', () => {
-    const onNavigate = vi.fn();
-    const { getByRole } = render(
-      <ConsoleShell projectState={stubState} onNavigate={onNavigate}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    fireEvent.click(getByRole('button', { name: /^plans$/i }));
     expect(onNavigate).toHaveBeenCalledWith('/console/plans');
   });
-
-  it('clicking the Plans button does not cause a page reload (uses onNavigate, not href)', () => {
-    const onNavigate = vi.fn();
-    const { getByRole } = render(
-      <ConsoleShell projectState={stubState} onNavigate={onNavigate}>
-        <div>content</div>
-      </ConsoleShell>,
-    );
-    const plansButton = getByRole('button', { name: /^plans$/i });
-    // Plans link is a button, not an anchor — no href-based navigation
-    expect(plansButton.tagName.toLowerCase()).toBe('button');
-    expect(plansButton.getAttribute('href')).toBeNull();
-  });
 });
diff --git a/packages/console-ui/src/__tests__/now-dashboard.test.tsx b/packages/console-ui/src/__tests__/now-dashboard.test.tsx
index c14c4cd25..dbb88cad3 100644
--- a/packages/console-ui/src/__tests__/now-dashboard.test.tsx
+++ b/packages/console-ui/src/__tests__/now-dashboard.test.tsx
@@ -1,18 +1,12 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { NowDashboard } from '@/views/now-dashboard';
-import { ActiveBuildsGrid } from '@/components/now/active-builds-grid';
 import { initialConsoleProjectState } from '@/lib/project-state';
 import type { ConsoleProjectState } from '@/lib/project-state';
 import type { UseActiveSessionStreamsResult } from '@/hooks/use-active-session-streams';
-import type { RunInfo, QueueItem } from '@eforge-build/client/browser';
+import type { QueueItem, RunInfo } from '@eforge-build/client/browser';
 import { createInitialRunState } from '@/lib/run-state';
 
-// ---------------------------------------------------------------------------
-// Fixtures
-// ---------------------------------------------------------------------------
-
 function makeRun(overrides: Partial<RunInfo> = {}): RunInfo {
   return {
     id: 'run-1',
@@ -50,43 +44,25 @@ function connectedState(overrides: Partial<ConsoleProjectState> = {}): ConsolePr
   };
 }
 
-// Suppress replaceState calls from ActivityDrawer
 let replaceStateSpy: ReturnType<typeof vi.spyOn>;
+
 beforeEach(() => {
   replaceStateSpy = vi.spyOn(window.history, 'replaceState').mockImplementation(() => {});
 });
+
 afterEach(() => {
   replaceStateSpy.mockRestore();
 });
 
-// ---------------------------------------------------------------------------
-// Populated render
-// ---------------------------------------------------------------------------
-
-describe('NowDashboard - populated state', () => {
-  it('renders Attention, Queue, Stack layers, and Activity sections when data exists', () => {
+describe('NowDashboard', () => {
+  it('renders the core dashboard surfaces for connected project state', () => {
     const state = connectedState({
-      runs: [makeRun()],
-      queue: [makeQueue({ status: 'failed' })],
-      stackLayers: [
-        {
-          prdId: 'prd-1',
-          stackId: 'stack-a',
-          provider: 'git-spice',
-          branch: 'feat/x',
-          baseBranch: 'main',
-          status: 'building',
-          recordedAt: new Date().toISOString(),
-          updatedAt: new Date().toISOString(),
-        },
-      ],
+      queue: [makeQueue()],
+      runs: [makeRun({ status: 'completed', completedAt: new Date().toISOString() })],
       recentActivity: [
         {
-          id: '1',
-          event: {
-            type: 'session:start',
-            sessionId: 'sess-1',
-          } as unknown as import('@eforge-build/client/browser').EforgeEvent,
+          id: 'activity-1',
+          event: { type: 'session:start', sessionId: 'sess-1' } as never,
           receivedAt: Date.now(),
         },
       ],
@@ -94,58 +70,18 @@ describe('NowDashboard - populated state', () => {
 
     render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
 
-    // Stack layers section should be present
-    expect(screen.getByText('Stack layers')).toBeDefined();
-    // Queue card heading
     expect(screen.getByText('Queue')).toBeDefined();
-    // Run history card heading
-    expect(screen.getByText('Run history')).toBeDefined();
-    // Activity launcher
     expect(screen.getByText('Activity')).toBeDefined();
+    expect(screen.getByText('Run history')).toBeDefined();
   });
 
-  it('renders two active build cards for two active sessions', () => {
-    const now = Date.now();
-    const runA = makeRun({ id: 'rA', sessionId: 'sess-A', planSet: 'plans-alpha', startedAt: new Date(now - 5000).toISOString() });
-    const runB = makeRun({ id: 'rB', sessionId: 'sess-B', planSet: 'plans-beta', startedAt: new Date(now - 3000).toISOString() });
-    const state = connectedState({ runs: [runA, runB] });
-
-    const activeSessions: UseActiveSessionStreamsResult = {
-      sessions: {
-        'sess-A': {
-          sessionId: 'sess-A',
-          connectionStatus: 'connected',
-          status: 'running',
-          runState: createInitialRunState(),
-          lastEventAt: Date.now(),
-          error: null,
-        },
-        'sess-B': {
-          sessionId: 'sess-B',
-          connectionStatus: 'connected',
-          status: 'running',
-          runState: createInitialRunState(),
-          lastEventAt: Date.now(),
-          error: null,
-        },
-      },
-      activeSessionIds: ['sess-A', 'sess-B'],
-      subscriptionCount: 2,
-    };
-
-    render(<NowDashboard projectState={state} activeSessions={activeSessions} />);
-
-    // Both plan sets appear as card titles.
-    expect(screen.getAllByText(/plans[\s-]alpha|plans[\s-]beta/i).length).toBeGreaterThanOrEqual(2);
-  });
-
-  it('renders Inspect → affordance on active build cards', () => {
-    const run = makeRun({ sessionId: 'sess-X' });
-    const state = connectedState({ runs: [run] });
+  it('renders active build navigation for active session streams', () => {
+    const onNavigate = vi.fn();
+    const state = connectedState({ runs: [makeRun({ sessionId: 'sess-active' })] });
     const activeSessions: UseActiveSessionStreamsResult = {
       sessions: {
-        'sess-X': {
-          sessionId: 'sess-X',
+        'sess-active': {
+          sessionId: 'sess-active',
           connectionStatus: 'connected',
           status: 'running',
           runState: createInitialRunState(),
@@ -153,138 +89,29 @@ describe('NowDashboard - populated state', () => {
           error: null,
         },
       },
-      activeSessionIds: ['sess-X'],
+      activeSessionIds: ['sess-active'],
       subscriptionCount: 1,
     };
-    render(<NowDashboard projectState={state} activeSessions={activeSessions} onNavigate={vi.fn()} />);
-    expect(screen.getByText('Inspect →')).toBeDefined();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Empty connected state
-// ---------------------------------------------------------------------------
 
-describe('NowDashboard - empty connected state', () => {
-  it('shows Queue is empty when queue is empty', () => {
-    const state = connectedState({
-      queue: [],
-      runs: [],
-      stackLayers: [],
-      recentActivity: [],
-    });
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-    expect(screen.getByText('Queue is empty')).toBeDefined();
-  });
-
-  it('shows No recent activity in activity launcher when no activity', () => {
-    const state = connectedState({
-      queue: [],
-      runs: [],
-      stackLayers: [],
-      recentActivity: [],
-    });
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-    expect(screen.getByText('No recent activity')).toBeDefined();
-  });
-
-  it('renders no active builds section when there are no active builds', () => {
-    const state = connectedState({
-      runs: [],
-      queue: [],
-    });
-
-    const { container } = render(
-      <NowDashboard projectState={state} activeSessions={emptyActiveSessions} />,
+    render(
+      <NowDashboard
+        projectState={state}
+        activeSessions={activeSessions}
+        onNavigate={onNavigate}
+      />,
     );
 
-    // ActiveBuildsGrid returns null for empty cards
-    expect(screen.queryByText('Active builds')).toBeNull();
-    expect(screen.queryByText('No active builds')).toBeNull();
-    const activeBuildsText = container.textContent ?? '';
-    expect(activeBuildsText).not.toContain('Active builds');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Section order: Attention → Active builds → Queue → Stack+Activity → RunHistory
-// ---------------------------------------------------------------------------
-
-describe('NowDashboard - section order', () => {
-  it('renders Queue before Run history in the DOM', () => {
-    const state = connectedState({
-      queue: [makeQueue()],
-      runs: [makeRun({ completedAt: new Date().toISOString(), status: 'completed' })],
-    });
-
-    const { container } = render(
-      <NowDashboard projectState={state} activeSessions={emptyActiveSessions} />,
-    );
+    fireEvent.click(screen.getByText('Inspect →'));
 
-    const text = container.textContent ?? '';
-    const queueIdx = text.indexOf('Queue');
-    const runHistoryIdx = text.indexOf('Run history');
-    expect(queueIdx).toBeGreaterThan(-1);
-    expect(runHistoryIdx).toBeGreaterThan(-1);
-    expect(queueIdx).toBeLessThan(runHistoryIdx);
+    expect(onNavigate).toHaveBeenCalledWith('/console/runs/sess-active');
   });
 
-  it('Activity launcher appears alongside Stack summary section', () => {
+  it('shows a connection banner when the daemon stream is disconnected', () => {
     const state = connectedState({
-      queue: [],
-      runs: [],
-      recentActivity: [],
-    });
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-    // Both Activity and Run history should be present
-    expect(screen.getByText('Activity')).toBeDefined();
-    expect(screen.getByText('Run history')).toBeDefined();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// ActiveBuildsGrid - isolated empty render
-// ---------------------------------------------------------------------------
-
-describe('ActiveBuildsGrid', () => {
-  it('renders nothing when cards is an empty array', () => {
-    const { container } = render(<ActiveBuildsGrid cards={[]} />);
-    expect(container.firstChild).toBeNull();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Connecting state
-// ---------------------------------------------------------------------------
-
-describe('NowDashboard - connecting state', () => {
-  it('displays "Connecting to daemon stream" before the first snapshot', () => {
-    const state: ConsoleProjectState = {
-      ...initialConsoleProjectState,
-      connectionStatus: 'connecting',
-      lastSnapshotAt: null,
-    };
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-    expect(screen.getByText('Connecting to daemon stream')).toBeDefined();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Disconnected state
-// ---------------------------------------------------------------------------
-
-describe('NowDashboard - disconnected state', () => {
-  it('displays "Daemon stream disconnected" and the stream error text', () => {
-    const state: ConsoleProjectState = {
-      ...initialConsoleProjectState,
       connectionStatus: 'disconnected',
       error: 'ECONNREFUSED',
-      lastSnapshotAt: Date.now() - 5000,
-    };
+      lastSnapshotAt: Date.now() - 5_000,
+    });
 
     render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
 
@@ -292,198 +119,38 @@ describe('NowDashboard - disconnected state', () => {
     expect(banner.textContent).toContain('Daemon stream disconnected');
     expect(banner.textContent).toContain('ECONNREFUSED');
   });
-});
-
-// ---------------------------------------------------------------------------
-// Stale state
-// ---------------------------------------------------------------------------
-
-describe('NowDashboard - stale state', () => {
-  it('displays "Daemon heartbeat stale" when last heartbeat is too old', () => {
-    const now = Date.now();
-    const state: ConsoleProjectState = {
-      ...initialConsoleProjectState,
-      connectionStatus: 'connected',
-      lastSnapshotAt: now - 60_000,
-      lastEventAt: now - 60_000,
-      latestHeartbeat: {
-        at: now - 60_000,
-        payload: {
-          uptime: 100,
-          queueDepth: 0,
-          runningBuilds: 0,
-          autoBuild: { enabled: false, paused: false },
-          subscribers: 1,
-        },
-      },
-    };
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-
-    const banner = screen.getByRole('status');
-    expect(banner.textContent).toContain('Daemon heartbeat stale');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Stack summary absence
-// ---------------------------------------------------------------------------
-
-describe('NowDashboard - stack summary', () => {
-  it('is absent when stackLayers is an empty array', () => {
-    const state = connectedState({ stackLayers: [] });
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-    expect(screen.queryByText('Stack layers')).toBeNull();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Deferred control absence
-// ---------------------------------------------------------------------------
 
-describe('NowDashboard - deferred controls', () => {
-  it('contains no forbidden control text', () => {
+  it('surfaces stack sync controls when stacking data exists', () => {
     const state = connectedState({
-      runs: [makeRun()],
-      queue: [makeQueue()],
+      stackLayers: [
+        {
+          prdId: 'prd-1',
+          stackId: 'stack-a',
+          provider: 'git-spice',
+          branch: 'feat/x',
+          baseBranch: 'main',
+          status: 'building',
+          recordedAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        },
+      ],
+      stackSync: {
+        last: {
+          id: 'sync-1',
+          trigger: 'manual',
+          startedAt: new Date(Date.now() - 5000).toISOString(),
+          completedAt: new Date(Date.now() - 4000).toISOString(),
+          outcome: 'complete',
+          dryRun: false,
+          restackCandidates: ['feat/x'],
+        },
+      } as never,
     });
 
-    const { container } = render(
-      <NowDashboard projectState={state} activeSessions={emptyActiveSessions} />,
-    );
-
-    const text = container.textContent?.toLowerCase() ?? '';
-    const forbidden = ['reorder', 'edit priority', 'overseer', 'sync stack', 'rebase stack', 'land stack'];
-    for (const term of forbidden) {
-      expect(text).not.toContain(term);
-    }
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Stack sync status card
-// ---------------------------------------------------------------------------
-
-function makeStackSyncStatus(
-  overrides: Partial<import('@eforge-build/client/browser').StackSyncStatusResponse> = {},
-): import('@eforge-build/client/browser').StackSyncStatusResponse {
-  return {
-    last: {
-      id: 'sync-1',
-      trigger: 'manual',
-      startedAt: new Date(Date.now() - 5000).toISOString(),
-      completedAt: new Date(Date.now() - 4000).toISOString(),
-      outcome: 'complete',
-      dryRun: false,
-      restackCandidates: ['feat/a'],
-    },
-    ...overrides,
-  } as unknown as import('@eforge-build/client/browser').StackSyncStatusResponse;
-}
-
-function stateWithStack(
-  syncOverrides?: Partial<import('@eforge-build/client/browser').StackSyncStatusResponse>,
-): import('@/lib/project-state').ConsoleProjectState {
-  return connectedState({
-    stackLayers: [
-      {
-        prdId: 'prd-1',
-        stackId: 'stack-a',
-        provider: 'git-spice',
-        branch: 'feat/x',
-        baseBranch: 'main',
-        status: 'building',
-        recordedAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ],
-    stackSync: syncOverrides !== undefined ? makeStackSyncStatus(syncOverrides) : null,
-  });
-}
-
-describe('NowDashboard - stack sync card', () => {
-  it('renders "Stack sync" heading when stack layers exist', () => {
-    const state = stateWithStack();
-
     render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
 
     expect(screen.getByText('Stack sync')).toBeDefined();
-  });
-
-  it('renders "Sync now" and "Dry run" buttons when stack layers exist', () => {
-    const state = stateWithStack();
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-
     expect(screen.getByRole('button', { name: /sync.*now/i })).toBeDefined();
     expect(screen.getByRole('button', { name: /dry run/i })).toBeDefined();
   });
-
-  it('renders "Retry" button when last outcome is deferred', () => {
-    const state = stateWithStack({
-      last: {
-        id: 'sync-deferred',
-        trigger: 'after-build',
-        startedAt: new Date(Date.now() - 3000).toISOString(),
-        completedAt: new Date(Date.now() - 2000).toISOString(),
-        outcome: 'deferred',
-        dryRun: false,
-        restackCandidates: [],
-        reason: 'active build in progress',
-      },
-    } as unknown as Partial<import('@eforge-build/client/browser').StackSyncStatusResponse>);
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-
-    expect(screen.getByRole('button', { name: /retry/i })).toBeDefined();
-  });
-
-  it('does not render "Retry" button when last outcome is complete', () => {
-    const state = stateWithStack();
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-
-    expect(screen.queryByRole('button', { name: /retry/i })).toBeNull();
-  });
-
-  it('renders last outcome badge when sync status is present', () => {
-    // Pass {} so stateWithStack produces a state with stackSync populated (outcome: 'complete').
-    const state = stateWithStack({});
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-
-    // Badge renders the outcome text
-    const badges = screen.getAllByText(/complete/i);
-    expect(badges.length).toBeGreaterThan(0);
-  });
-
-  it('renders failure reason when last outcome is failed', () => {
-    const state = stateWithStack({
-      last: {
-        id: 'sync-failed',
-        trigger: 'manual',
-        startedAt: new Date(Date.now() - 3000).toISOString(),
-        completedAt: new Date(Date.now() - 2000).toISOString(),
-        outcome: 'failed',
-        dryRun: false,
-        restackCandidates: [],
-        reason: 'provider command failed',
-        error: 'git exited with code 1',
-      },
-    } as unknown as Partial<import('@eforge-build/client/browser').StackSyncStatusResponse>);
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-
-    const text = screen.getByText(/provider command failed/i);
-    expect(text).toBeDefined();
-  });
-
-  it('does not render stack sync card when there are no stack layers', () => {
-    const state = connectedState({ stackLayers: [], stackSync: null });
-
-    render(<NowDashboard projectState={state} activeSessions={emptyActiveSessions} />);
-
-    expect(screen.queryByText('Stack sync')).toBeNull();
-  });
 });
diff --git a/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx b/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx
index caa869921..05e27ee84 100644
--- a/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx
+++ b/packages/console-ui/src/views/plans/__tests__/plans-view.test.tsx
@@ -1,14 +1,9 @@
 // @vitest-environment jsdom
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import * as React from 'react';
 import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
 import { API_ROUTES } from '@eforge-build/client/browser';
 import { PlansView } from '../plans-view';
 
-// ---------------------------------------------------------------------------
-// jsdom compatibility
-// ---------------------------------------------------------------------------
-
 global.ResizeObserver = vi.fn().mockImplementation(function (this: {
   observe: () => void;
   unobserve: () => void;
@@ -19,21 +14,12 @@ global.ResizeObserver = vi.fn().mockImplementation(function (this: {
   this.disconnect = vi.fn();
 });
 
-// ---------------------------------------------------------------------------
-// Module mocks
-// ---------------------------------------------------------------------------
-
-// Stub shiki-dependent renderer to avoid heavy async deps in tests
 vi.mock('@/components/preview/plan-body-highlight', () => ({
   PlanBodyHighlight: ({ content }: { content: string }) => (
     <div data-testid="plan-body-highlight">{content}</div>
   ),
 }));
 
-// ---------------------------------------------------------------------------
-// Fixtures
-// ---------------------------------------------------------------------------
-
 function makeActivePlan(overrides: Record<string, unknown> = {}) {
   return {
     session: 'sess-active-1',
@@ -68,7 +54,7 @@ function makeShowResponse(planOverrides: Record<string, unknown> = {}) {
       planning_type: 'feature',
       planning_depth: 'focused',
       required_dimensions: ['problem_statement', 'acceptance_criteria'],
-      optional_dimensions: ['performance'],
+      optional_dimensions: [],
       skipped_dimensions: [],
       open_questions: [],
       profile: null,
@@ -85,19 +71,14 @@ function makeShowResponse(planOverrides: Record<string, unknown> = {}) {
   };
 }
 
-function makeFetchMock(
-  listResponse: unknown,
-  showResponse: unknown = null,
-) {
+function makeFetchMock(listResponse: unknown, showResponse: unknown = null) {
   return vi.fn((url: string) => {
-    let body: unknown;
-    if (url.includes(API_ROUTES.sessionPlanShow)) {
-      body = showResponse;
-    } else if (url.includes(API_ROUTES.sessionPlanList)) {
-      body = listResponse;
-    } else {
-      body = null;
-    }
+    const body = url.includes(API_ROUTES.sessionPlanShow)
+      ? showResponse
+      : url.includes(API_ROUTES.sessionPlanList)
+        ? listResponse
+        : null;
+
     return Promise.resolve({
       ok: body !== null,
       status: body !== null ? 200 : 404,
@@ -107,10 +88,6 @@ function makeFetchMock(
   });
 }
 
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
 describe('PlansView', () => {
   let originalFetch: typeof globalThis.fetch;
 
@@ -123,388 +100,120 @@ describe('PlansView', () => {
     vi.restoreAllMocks();
   });
 
-  // ---------------------------------------------------------------------------
-  // Header and controls
-  // ---------------------------------------------------------------------------
-
-  it('renders the Planning Workspace heading', () => {
-    globalThis.fetch = makeFetchMock({ plans: [] });
-    render(<PlansView />);
-    expect(screen.getByText('Planning Workspace')).toBeDefined();
-  });
-
-  it('renders the Include handed off toggle switch', () => {
-    globalThis.fetch = makeFetchMock({ plans: [] });
-    render(<PlansView />);
-    expect(screen.getByRole('switch', { name: /include handed off/i })).toBeDefined();
-  });
-
-  // ---------------------------------------------------------------------------
-  // Default filtering (no includeSubmitted)
-  // ---------------------------------------------------------------------------
-
-  it('shows empty-active text when list returns no plans', async () => {
-    globalThis.fetch = makeFetchMock({ plans: [] });
-    render(<PlansView />);
-    await waitFor(() => {
-      expect(screen.getByText('No actionable session plans found')).toBeDefined();
-    });
-  });
-
-  it('fetches list without includeSubmitted by default', async () => {
+  it('fetches actionable plans by default and renders the empty state', async () => {
     const fetchMock = makeFetchMock({ plans: [] });
     globalThis.fetch = fetchMock;
-    render(<PlansView />);
-    await waitFor(() => {
-      const calls = fetchMock.mock.calls.map((c) => c[0] as string);
-      const listCalls = calls.filter((u) => u.includes(API_ROUTES.sessionPlanList));
-      expect(listCalls.length).toBeGreaterThan(0);
-      expect(listCalls[0]).not.toContain('includeSubmitted');
-    });
-  });
 
-  it('renders an active plan row when list returns plans', async () => {
-    const plan = makeActivePlan();
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, makeShowResponse());
     render(<PlansView />);
-    await waitFor(() => {
-      // Session ID appears in both the list row and the auto-selected detail panel.
-      const matches = screen.getAllByText(plan.session);
-      expect(matches.length).toBeGreaterThan(0);
-    });
-  });
 
-  it('list row button has accessible name with session ID and topic', async () => {
-    const plan = makeActivePlan();
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, makeShowResponse());
-    render(<PlansView />);
     await waitFor(() => {
-      const btn = screen.getByRole('button', { name: /sess-active-1.*Add feature X/i });
-      expect(btn).toBeDefined();
-    });
-  });
-
-  it('list row renders the file path for an active plan', async () => {
-    const plan = makeActivePlan();
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, makeShowResponse());
-    render(<PlansView />);
-    await waitFor(() => {
-      const btn = screen.getByRole('button', { name: /sess-active-1/i });
-      expect(btn.textContent).toContain('/plans/sess-active-1.md');
+      expect(screen.getByText('No actionable session plans found')).toBeDefined();
     });
-  });
 
-  it('list row renders the eforge_session value for a submitted plan', async () => {
-    const submitted = makeSubmittedPlan({ eforge_session: 'run-999' });
-    const showResponse = makeShowResponse({
-      session: 'sess-submitted-1',
-      status: 'submitted',
-      eforge_session: 'run-999',
-    });
-    globalThis.fetch = makeFetchMock({ plans: [submitted] }, showResponse);
-    render(<PlansView />);
-    await waitFor(() => {
-      const btn = screen.getByRole('button', { name: /sess-submitted-1/i });
-      expect(btn.textContent).toContain('run-999');
-    });
+    const listCalls = fetchMock.mock.calls
+      .map((call) => call[0] as string)
+      .filter((url) => url.includes(API_ROUTES.sessionPlanList));
+    expect(listCalls[0]).not.toContain('includeSubmitted');
   });
 
-  // ---------------------------------------------------------------------------
-  // Include-submitted filter
-  // ---------------------------------------------------------------------------
-
-  it('fetches list with includeSubmitted=true after toggling the switch', async () => {
+  it('refetches with includeSubmitted=true when the handed-off toggle changes', async () => {
     const fetchMock = makeFetchMock({ plans: [] });
     globalThis.fetch = fetchMock;
-    render(<PlansView />);
-    await waitFor(() => screen.getByText('No actionable session plans found'));
-
-    const toggle = screen.getByRole('switch', { name: /include handed off/i });
-    await act(async () => {
-      fireEvent.click(toggle);
-    });
 
-    await waitFor(() => {
-      const calls = fetchMock.mock.calls.map((c) => c[0] as string);
-      const submittedCalls = calls.filter(
-        (u) => u.includes(API_ROUTES.sessionPlanList) && u.includes('includeSubmitted=true'),
-      );
-      expect(submittedCalls.length).toBeGreaterThan(0);
-    });
-  });
-
-  it('shows "No session plans found" after toggling include-submitted when list is empty', async () => {
-    const fetchMock = makeFetchMock({ plans: [] });
-    globalThis.fetch = fetchMock;
     render(<PlansView />);
     await waitFor(() => screen.getByText('No actionable session plans found'));
 
-    const toggle = screen.getByRole('switch', { name: /include handed off/i });
     await act(async () => {
-      fireEvent.click(toggle);
+      fireEvent.click(screen.getByRole('switch', { name: /include handed off/i }));
     });
 
     await waitFor(() => {
+      const submittedCalls = fetchMock.mock.calls
+        .map((call) => call[0] as string)
+        .filter((url) => url.includes(API_ROUTES.sessionPlanList) && url.includes('includeSubmitted=true'));
+      expect(submittedCalls.length).toBeGreaterThan(0);
       expect(screen.getByText('No session plans found')).toBeDefined();
     });
   });
 
-  it('renders a submitted plan in the list when include-submitted is on', async () => {
-    const submitted = makeSubmittedPlan();
-    const showResponse = makeShowResponse({
-      session: 'sess-submitted-1',
-      status: 'submitted',
-      eforge_session: 'run-123',
-    });
-    // First call: empty list; second call: submitted plan
-    const fetchMock = vi.fn((url: string) => {
-      const callCount = fetchMock.mock.calls.length;
-      const isSubmittedCall =
-        url.includes(API_ROUTES.sessionPlanList) && url.includes('includeSubmitted=true');
-      let body: unknown;
-      if (url.includes(API_ROUTES.sessionPlanShow)) {
-        body = showResponse;
-      } else if (isSubmittedCall) {
-        body = { plans: [submitted] };
-      } else {
-        body = { plans: [] };
-      }
-      void callCount; // suppress unused var
-      return Promise.resolve({
-        ok: true,
-        status: 200,
-        statusText: 'OK',
-        json: () => Promise.resolve(body),
-      });
-    });
-    globalThis.fetch = fetchMock;
-    render(<PlansView />);
-    await waitFor(() => screen.getByText('No actionable session plans found'));
-
-    const toggle = screen.getByRole('switch', { name: /include handed off/i });
-    await act(async () => {
-      fireEvent.click(toggle);
-    });
-
-    await waitFor(() => {
-      // Session ID appears in both the list row and the auto-selected detail panel.
-      const matches = screen.getAllByText(submitted.session);
-      expect(matches.length).toBeGreaterThan(0);
-    });
-  });
-
-  // ---------------------------------------------------------------------------
-  // Detail panel
-  // ---------------------------------------------------------------------------
-
-  it('auto-fetches plan detail for the first plan after list loads', async () => {
+  it('auto-selects the first returned plan and fetches its detail', async () => {
     const plan = makeActivePlan();
     const fetchMock = makeFetchMock({ plans: [plan] }, makeShowResponse());
     globalThis.fetch = fetchMock;
+
     render(<PlansView />);
+
     await waitFor(() => {
-      const calls = fetchMock.mock.calls.map((c) => c[0] as string);
-      const showCalls = calls.filter((u) => u.includes(API_ROUTES.sessionPlanShow));
-      expect(showCalls.length).toBeGreaterThan(0);
+      expect(screen.getByRole('button', { name: /sess-active-1.*Add feature X/i })).toBeDefined();
+      const showCalls = fetchMock.mock.calls
+        .map((call) => call[0] as string)
+        .filter((url) => url.includes(API_ROUTES.sessionPlanShow));
       expect(showCalls[0]).toContain('session=sess-active-1');
     });
   });
 
-  it('clicking a second plan row fetches detail for that plan and renders its data', async () => {
+  it('selecting another plan fetches and displays that plan detail', async () => {
     const plan1 = makeActivePlan({ session: 'sess-plan-1', topic: 'Plan One' });
     const plan2 = makeActivePlan({ session: 'sess-plan-2', topic: 'Plan Two' });
-    const showPlan1 = makeShowResponse({ session: 'sess-plan-1', topic: 'Plan One' });
-    const showPlan2 = makeShowResponse({ session: 'sess-plan-2', topic: 'Plan Two' });
     const fetchMock = vi.fn((url: string) => {
-      let body: unknown;
-      if (url.includes(API_ROUTES.sessionPlanShow) && url.includes('sess-plan-2')) {
-        body = showPlan2;
-      } else if (url.includes(API_ROUTES.sessionPlanShow)) {
-        body = showPlan1;
-      } else {
-        body = { plans: [plan1, plan2] };
-      }
+      const body = url.includes(API_ROUTES.sessionPlanShow) && url.includes('sess-plan-2')
+        ? makeShowResponse({ session: 'sess-plan-2', topic: 'Plan Two' })
+        : url.includes(API_ROUTES.sessionPlanShow)
+          ? makeShowResponse({ session: 'sess-plan-1', topic: 'Plan One' })
+          : { plans: [plan1, plan2] };
+
       return Promise.resolve({ ok: true, status: 200, statusText: 'OK', json: () => Promise.resolve(body) });
     });
     globalThis.fetch = fetchMock;
-    render(<PlansView />);
 
-    // Wait for the first plan to be auto-selected
+    render(<PlansView />);
     await waitFor(() => screen.getByRole('button', { name: /sess-plan-2/i }));
 
-    // Click the second plan row
     await act(async () => {
       fireEvent.click(screen.getByRole('button', { name: /sess-plan-2/i }));
     });
 
     await waitFor(() => {
-      const calls = fetchMock.mock.calls.map((c) => c[0] as string);
-      const showCalls = calls.filter((u) => u.includes(API_ROUTES.sessionPlanShow) && u.includes('sess-plan-2'));
+      const showCalls = fetchMock.mock.calls
+        .map((call) => call[0] as string)
+        .filter((url) => url.includes(API_ROUTES.sessionPlanShow) && url.includes('sess-plan-2'));
       expect(showCalls.length).toBeGreaterThan(0);
-    });
-
-    // The detail panel should show plan2's topic (may appear in both list and detail panel)
-    await waitFor(() => {
-      const matches = screen.getAllByText('Plan Two');
-      expect(matches.length).toBeGreaterThan(0);
-    });
-  });
-
-  it('renders lifecycle status in detail panel', async () => {
-    const plan = makeActivePlan();
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, makeShowResponse());
-    render(<PlansView />);
-    await waitFor(() => {
-      // "planning" appears as a status badge in the detail panel
-      const badges = screen.getAllByText('planning');
-      expect(badges.length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Plan Two').length).toBeGreaterThan(0);
     });
   });
 
-  it('renders planning type in detail panel', async () => {
-    const plan = makeActivePlan();
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, makeShowResponse());
-    render(<PlansView />);
-    await waitFor(() => {
-      expect(screen.getByText('feature')).toBeDefined();
-    });
-  });
-
-  it('renders planning depth in detail panel', async () => {
-    const plan = makeActivePlan();
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, makeShowResponse());
-    render(<PlansView />);
-    await waitFor(() => {
-      expect(screen.getByText('focused')).toBeDefined();
-    });
-  });
-
-  it('renders path in detail panel', async () => {
-    const plan = makeActivePlan();
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, makeShowResponse());
-    render(<PlansView />);
-    await waitFor(() => {
-      // Path appears in both the list row and the detail panel
-      const matches = screen.getAllByText('/plans/sess-active-1.md');
-      expect(matches.length).toBeGreaterThan(0);
-    });
-  });
-
-  it('renders profile, required/optional/skipped dimensions, open questions, and readiness detail in detail panel', async () => {
-    const plan = makeActivePlan();
-    const richShowResponse = {
-      plan: {
-        session: 'sess-active-1',
-        topic: 'Rich Plan',
-        status: 'planning',
-        planning_type: 'feature',
-        planning_depth: 'focused',
-        profile: 'analytics-heavy',
-        required_dimensions: ['scope', 'acceptance_criteria'],
-        optional_dimensions: ['performance'],
-        skipped_dimensions: [{ name: 'migration', reason: 'not needed' }],
-        open_questions: ['What is the rollout plan?'],
-        body: '# Rich Plan',
-      },
-      readiness: {
-        ready: false,
-        missingDimensions: ['acceptance_criteria'],
-        coveredDimensions: ['problem_statement_covered'],
-        skippedDimensions: ['low_priority_skipped'],
-      },
-      path: '/plans/sess-active-1.md',
-    };
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, richShowResponse);
-    render(<PlansView />);
-
-    // Profile lives in the always-visible summary; should render without
-    // expanding the disclosure. Tightened to getByText (no duplication).
-    await waitFor(() => {
-      expect(screen.getByText('analytics-heavy')).toBeDefined();
-    });
-
-    // Disclosure content is hidden until the trigger is clicked.
-    expect(screen.queryByText('performance')).toBeNull();
-    expect(screen.queryByText('What is the rollout plan?')).toBeNull();
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /show details/i }));
-    });
-
-    await waitFor(() => {
-      // Required dimensions. `scope` is required but not in covered.
-      expect(screen.getByText('scope')).toBeDefined();
-      // `acceptance_criteria` is both a required and a missing dimension —
-      // appears twice (once per section).
-      expect(screen.getAllByText('acceptance_criteria').length).toBe(2);
-      // Optional dimensions
-      expect(screen.getByText('performance')).toBeDefined();
-      // Skipped dimensions (plan-level)
-      expect(screen.getByText('migration')).toBeDefined();
-      // Open questions
-      expect(screen.getByText('What is the rollout plan?')).toBeDefined();
-      // Readiness - covered dimensions section
-      expect(screen.getByText('Covered dimensions')).toBeDefined();
-      expect(screen.getByText('problem_statement_covered')).toBeDefined();
-      // Readiness - missing dimensions section
-      expect(screen.getByText('Missing dimensions')).toBeDefined();
-      // Readiness - skipped dimensions section
-      expect(screen.getByText('Skipped dimensions (readiness)')).toBeDefined();
-      expect(screen.getByText('low_priority_skipped')).toBeDefined();
-      // Profile no longer duplicated in the disclosure body.
-      expect(screen.getAllByText('analytics-heavy').length).toBe(1);
-    });
-  });
-
-  // ---------------------------------------------------------------------------
-  // Build session link
-  // ---------------------------------------------------------------------------
-
-  it('renders build session link with correct href for a submitted plan', async () => {
-    const submitted = makeSubmittedPlan();
-    const showResponse = makeShowResponse({
-      session: 'sess-submitted-1',
-      status: 'submitted',
-      eforge_session: 'run-123',
-    });
-    globalThis.fetch = makeFetchMock({ plans: [submitted] }, showResponse);
-    render(<PlansView />);
-    await waitFor(() => {
-      const link = screen.getByRole('link', { name: 'run-123' });
-      expect(link).toBeDefined();
-      expect(link.getAttribute('href')).toBe('/console/runs/run-123');
-    });
-  });
-
-  it('calls onNavigate with /console/runs/{id} when build session link is clicked', async () => {
+  it('routes submitted-plan build-session links through onNavigate', async () => {
     const submitted = makeSubmittedPlan();
-    const showResponse = makeShowResponse({
-      session: 'sess-submitted-1',
-      status: 'submitted',
-      eforge_session: 'run-123',
-    });
-    globalThis.fetch = makeFetchMock({ plans: [submitted] }, showResponse);
+    globalThis.fetch = makeFetchMock(
+      { plans: [submitted] },
+      makeShowResponse({
+        session: 'sess-submitted-1',
+        status: 'submitted',
+        eforge_session: 'run-123',
+      }),
+    );
     const onNavigate = vi.fn();
+
     render(<PlansView onNavigate={onNavigate} />);
-    await waitFor(() => {
-      expect(screen.getByRole('link', { name: 'run-123' })).toBeDefined();
-    });
+
+    await waitFor(() => expect(screen.getByRole('link', { name: 'run-123' })).toBeDefined());
     fireEvent.click(screen.getByRole('link', { name: 'run-123' }));
+
     expect(onNavigate).toHaveBeenCalledWith('/console/runs/run-123');
   });
 
-  // ---------------------------------------------------------------------------
-  // Markdown preview
-  // ---------------------------------------------------------------------------
+  it('renders list errors as an alert', async () => {
+    globalThis.fetch = vi.fn(() => Promise.resolve({
+      ok: false,
+      status: 503,
+      statusText: 'Service Unavailable',
+      json: () => Promise.resolve({}),
+    })) as never;
 
-  it('renders the plan body text inside the markdown preview container', async () => {
-    const plan = makeActivePlan();
-    const showResponse = makeShowResponse({ body: '# My Plan\n\nSome content here.' });
-    globalThis.fetch = makeFetchMock({ plans: [plan] }, showResponse);
     render(<PlansView />);
+
     await waitFor(() => {
-      const preview = screen.getByTestId('plan-body-highlight');
-      expect(preview.textContent).toContain('# My Plan');
+      expect(screen.getByRole('alert').textContent).toContain('503');
     });
   });
 });
diff --git a/packages/console-ui/src/views/system/__tests__/system-view-content.test.tsx b/packages/console-ui/src/views/system/__tests__/system-view-content.test.tsx
index feca05515..c5d7e954b 100644
--- a/packages/console-ui/src/views/system/__tests__/system-view-content.test.tsx
+++ b/packages/console-ui/src/views/system/__tests__/system-view-content.test.tsx
@@ -1,687 +1,162 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { SystemViewContent } from '../system-view-content';
-import { SystemConfigurationView } from '../system-configuration-view';
 import type { SystemSurfacesState } from '../system-types';
 import { initialConsoleProjectState } from '@/lib/project-state';
 import type { ConsoleProjectState } from '@/lib/project-state';
 
-// ---------------------------------------------------------------------------
-// Fixture builders
-// ---------------------------------------------------------------------------
+function success<T>(data: T) {
+  return { status: 'success' as const, data, updatedAt: 1 };
+}
 
-function makeLoadedState(): SystemSurfacesState {
-  return {
-    daemon: {
-      health: { status: 'success', data: { status: 'ok', pid: 42 }, updatedAt: 1 },
-      version: { status: 'success', data: { version: 17, eforgeVersion: '1.0.0 (abc)' }, updatedAt: 1 },
-      projectContext: { status: 'success', data: { cwd: '/home/user/my-project', gitRemote: 'git@github.com:foo/bar.git' }, updatedAt: 1 },
-    },
-    config: {
-      show: {
-        status: 'success',
-        data: {
-          resolved: { concurrency: 2 },
-          sources: {
-            local: { path: '/my-project/.eforge/config.yaml', found: true },
-            user: { path: '/home/user/.config/eforge/config.yaml', found: false },
-          },
-        },
-        updatedAt: 1,
-      },
-      validate: { status: 'success', data: { configFound: true, valid: true }, updatedAt: 1 },
-    },
-    profiles: {
-      list: {
-        status: 'success',
-        data: {
-          profiles: [
-            { name: 'my-profile', harness: 'claude-sdk', path: '/profiles/my-profile.yaml', scope: 'local' },
-          ],
-          active: 'my-profile',
-          source: 'local',
-        },
-        updatedAt: 1,
-      },
-      active: {
-        status: 'success',
-        data: {
-          active: 'my-profile',
-          source: 'local',
-          resolved: { harness: 'claude-sdk', profile: { effort: 'high' }, scope: 'local' },
-        },
-        updatedAt: 1,
-      },
-    },
-    extensions: {
-      list: {
-        status: 'success',
-        data: {
-          extensions: [
-            {
-              name: 'my-extension',
-              path: '/extensions/my-extension.ts',
-              scope: 'project-local',
-              source: 'auto',
-              status: 'loaded',
-              shadows: [],
-              registrations: { eventHooks: 1, agentRunHooks: 0, policyGates: 0, profileRouters: 0, inputSources: 0, reviewerPerspectives: 0, validationProviders: 0, tools: 0, prdEnrichers: 0 },
-              diagnostics: [],
-            },
-          ],
-          diagnostics: [],
-          totals: { eventHooks: 1, agentRunHooks: 0, policyGates: 0, profileRouters: 0, inputSources: 0, reviewerPerspectives: 0, validationProviders: 0, tools: 0, prdEnrichers: 0 },
-        },
-        updatedAt: 1,
-      },
-      validate: { status: 'success', data: { valid: true, extensions: [], diagnostics: [] }, updatedAt: 1 },
-    },
-    playbooks: {
-      list: {
-        status: 'success',
-        data: {
-          playbooks: [
-            {
-              name: 'my-playbook',
-              description: 'A test playbook',
-              scope: 'project-local',
-              mode: 'autonomous',
-              source: 'project-local',
-              shadows: [],
-              path: '/playbooks/my-playbook.md',
-            },
-          ],
-          warnings: [],
-        },
-        updatedAt: 1,
-      },
-    },
-    sessionPlans: {
-      list: {
-        status: 'success',
-        data: {
-          plans: [
-            {
-              session: 'sess-abc',
-              topic: 'Add new feature',
-              status: 'planning',
-              path: '/session-plans/sess-abc.md',
-              ready: false,
-              missingDimensions: ['acceptance_criteria'],
-            },
-          ],
-        },
-        updatedAt: 1,
-      },
-    },
-    models: {
-      catalogs: {
-        pi: {
-          providers: { status: 'success', data: { providers: ['anthropic'] }, updatedAt: 1 },
-          models: {
-            status: 'success',
-            data: {
-              models: [
-                { id: 'claude-3-5-sonnet-pi', provider: 'anthropic', contextWindow: 200000 },
-              ],
-            },
-            updatedAt: 1,
-          },
-        },
-        'claude-sdk': {
-          providers: { status: 'success', data: { providers: ['anthropic'] }, updatedAt: 1 },
-          models: {
-            status: 'success',
-            data: {
-              models: [
-                { id: 'claude-3-5-sonnet-20241022', provider: 'anthropic', contextWindow: 200000 },
-              ],
-            },
-            updatedAt: 1,
-          },
-        },
-      },
-    },
-  };
+function empty<T>(data?: T) {
+  return { status: 'empty' as const, data, updatedAt: 1 };
 }
 
-function makeEmptyState(): SystemSurfacesState {
-  return {
+function makeState(overrides: Partial<SystemSurfacesState> = {}): SystemSurfacesState {
+  const state: SystemSurfacesState = {
     daemon: {
-      health: { status: 'success', data: { status: 'ok', pid: 1 }, updatedAt: 1 },
-      version: { status: 'success', data: { version: 1 }, updatedAt: 1 },
-      projectContext: { status: 'success', data: { cwd: '/project', gitRemote: null }, updatedAt: 1 },
+      health: success({ status: 'ok', pid: 42 }),
+      version: success({ version: 17, eforgeVersion: '1.0.0' }),
+      projectContext: success({ cwd: '/home/user/my-project', gitRemote: 'git@example.com:repo.git' }),
     },
     config: {
-      show: { status: 'success', data: {}, updatedAt: 1 },
-      validate: { status: 'success', data: { configFound: false, valid: false }, updatedAt: 1 },
+      show: success({
+        resolved: { concurrency: 2 },
+        sources: {
+          local: { path: '/project/.eforge/config.yaml', found: true },
+          user: { path: '/home/user/.config/eforge/config.yaml', found: false },
+        },
+      }),
+      validate: success({ configFound: true, valid: true }),
     },
     profiles: {
-      list: { status: 'empty', data: { profiles: [], active: null, source: 'none' }, updatedAt: 1 },
-      active: { status: 'success', data: { active: null, source: 'none', resolved: { harness: undefined, profile: null } }, updatedAt: 1 },
+      list: success({
+        profiles: [
+          { name: 'local-profile', harness: 'claude-sdk', path: '/profiles/local-profile.yaml', scope: 'local' },
+        ],
+        active: 'local-profile',
+        source: 'local',
+      }),
+      active: success({
+        active: 'local-profile',
+        source: 'local',
+        resolved: { harness: 'claude-sdk', profile: { effort: 'high' }, scope: 'local' },
+      }),
     },
     extensions: {
-      list: { status: 'empty', data: { extensions: [], diagnostics: [], totals: { eventHooks: 0, agentRunHooks: 0, policyGates: 0, profileRouters: 0, inputSources: 0, reviewerPerspectives: 0, validationProviders: 0, tools: 0, prdEnrichers: 0 } }, updatedAt: 1 },
-      validate: { status: 'success', data: { valid: true, extensions: [], diagnostics: [] }, updatedAt: 1 },
+      list: empty({
+        extensions: [],
+        diagnostics: [],
+        totals: { eventHooks: 0, agentRunHooks: 0, policyGates: 0, profileRouters: 0, inputSources: 0, reviewerPerspectives: 0, validationProviders: 0, tools: 0, prdEnrichers: 0 },
+      }),
+      validate: success({ valid: true, extensions: [], diagnostics: [] }),
     },
     playbooks: {
-      list: { status: 'empty', data: { playbooks: [], warnings: [] }, updatedAt: 1 },
+      list: empty({ playbooks: [], warnings: [] }),
     },
     sessionPlans: {
-      list: { status: 'empty', data: { plans: [] }, updatedAt: 1 },
+      list: empty({ plans: [] }),
     },
     models: {
       catalogs: {
         pi: {
-          providers: { status: 'empty', data: { providers: [] }, updatedAt: 1 },
-          models: { status: 'empty', data: { models: [] }, updatedAt: 1 },
+          providers: empty({ providers: [] }),
+          models: empty({ models: [] }),
         },
         'claude-sdk': {
-          providers: { status: 'empty', data: { providers: [] }, updatedAt: 1 },
-          models: { status: 'empty', data: { models: [] }, updatedAt: 1 },
+          providers: success({ providers: ['anthropic'] }),
+          models: success({
+            models: [
+              { id: 'claude-3-5-sonnet-20241022', provider: 'anthropic', contextWindow: 200000 },
+            ],
+          }),
         },
       },
     },
   };
-}
 
-function makeLoadingState(): SystemSurfacesState {
   return {
-    daemon: {
-      health: { status: 'loading' },
-      version: { status: 'loading' },
-      projectContext: { status: 'loading' },
-    },
-    config: {
-      show: { status: 'loading' },
-      validate: { status: 'loading' },
-    },
-    profiles: {
-      list: { status: 'loading' },
-      active: { status: 'loading' },
-    },
-    extensions: {
-      list: { status: 'loading' },
-      validate: { status: 'loading' },
-    },
-    playbooks: {
-      list: { status: 'loading' },
-    },
-    sessionPlans: {
-      list: { status: 'loading' },
-    },
-    models: {
-      catalogs: {
-        pi: { providers: { status: 'loading' }, models: { status: 'loading' } },
-        'claude-sdk': { providers: { status: 'loading' }, models: { status: 'loading' } },
-      },
-    },
+    ...state,
+    ...overrides,
+    daemon: { ...state.daemon, ...overrides.daemon },
+    config: { ...state.config, ...overrides.config },
+    profiles: { ...state.profiles, ...overrides.profiles },
+    extensions: { ...state.extensions, ...overrides.extensions },
+    playbooks: { ...state.playbooks, ...overrides.playbooks },
+    sessionPlans: { ...state.sessionPlans, ...overrides.sessionPlans },
+    models: { ...state.models, ...overrides.models },
   };
 }
 
-function makeErrorState(): SystemSurfacesState {
+function makeProjectStateWithTelemetry(): ConsoleProjectState {
   return {
-    ...makeLoadedState(),
-    profiles: {
-      list: { status: 'error', error: 'HTTP 500 Internal Server Error fetching /api/profile/list' },
-      active: { status: 'success', data: { active: 'ok-profile', source: 'local', resolved: { harness: 'claude-sdk', profile: null } }, updatedAt: 1 },
-    },
-    playbooks: {
-      list: { status: 'error', error: 'HTTP 503 Service Unavailable fetching /api/playbook/list' },
+    ...initialConsoleProjectState,
+    connectionStatus: 'connected',
+    latestHeartbeat: {
+      at: Date.now(),
+      payload: {
+        uptime: 65_000,
+        queueDepth: 3,
+        runningBuilds: 1,
+        autoBuild: {
+          enabled: true,
+          paused: false,
+          scheduler: { alive: true, paused: false, runningCount: 1, limit: 5 },
+        },
+        subscribers: 4,
+      },
     },
   };
 }
 
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
 describe('SystemViewContent', () => {
-  it('renders all section headings in loaded state', () => {
-    const { getByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(getByText('Daemon')).toBeDefined();
-    expect(getByText('Config')).toBeDefined();
-    expect(getByText('Profiles')).toBeDefined();
-    expect(getByText('Extensions')).toBeDefined();
-    expect(getByText('Playbooks')).toBeDefined();
-    expect(getByText('Session Plans')).toBeDefined();
-    expect(getByText('Models')).toBeDefined();
-  });
-
-  it('renders project cwd from daemon section', () => {
-    const { getByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(getByText('/home/user/my-project')).toBeDefined();
-  });
-
-  it('renders daemon API version', () => {
-    const { getByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(getByText('17')).toBeDefined();
-  });
-
-  it('renders active profile name', () => {
-    const { getAllByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    const matches = getAllByText('my-profile');
-    expect(matches.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('renders extension name', () => {
-    const { getByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(getByText('my-extension')).toBeDefined();
-  });
+  it('renders the system page with representative daemon, config, profile, and model data', () => {
+    render(<SystemViewContent state={makeState()} onRefresh={() => {}} />);
 
-  it('renders playbook name', () => {
-    const { getByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(getByText('my-playbook')).toBeDefined();
+    expect(screen.getByRole('heading', { name: /system configuration/i })).toBeDefined();
+    expect(screen.getByText('/home/user/my-project')).toBeDefined();
+    expect(screen.getAllByText('local-profile').length).toBeGreaterThan(0);
+    expect(screen.getByText('17')).toBeDefined();
   });
 
-  it('renders session-plan topic', () => {
-    const { getByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(getByText('Add new feature')).toBeDefined();
-  });
+  it('calls onRefresh from the single refresh control', () => {
+    const onRefresh = vi.fn();
+    render(<SystemViewContent state={makeState()} onRefresh={onRefresh} />);
 
-  it('renders model id after expanding provider', () => {
-    const { container, getByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    // Providers are collapsed by default; click the first summary to expand it.
-    const summaries = container.querySelectorAll('details > summary');
-    expect(summaries.length).toBeGreaterThanOrEqual(1);
-    fireEvent.click(summaries[summaries.length - 1]!);
-    expect(getByText('claude-3-5-sonnet-20241022')).toBeDefined();
-  });
+    fireEvent.click(screen.getByRole('button', { name: /refresh system data/i }));
 
-  it('renders empty state messages for all empty sections', () => {
-    const { getByText } = render(
-      <SystemViewContent state={makeEmptyState()} onRefresh={() => {}} />,
-    );
-    expect(getByText('No profiles discovered')).toBeDefined();
-    expect(getByText('No extensions discovered')).toBeDefined();
-    expect(getByText('No playbooks discovered')).toBeDefined();
-    expect(getByText('No session plans discovered')).toBeDefined();
-    expect(getByText('No config file found')).toBeDefined();
+    expect(onRefresh).toHaveBeenCalledTimes(1);
   });
 
-  it('renders per-harness model empty text', () => {
-    const { getAllByText } = render(
-      <SystemViewContent state={makeEmptyState()} onRefresh={() => {}} />,
-    );
-    // Both harnesses should show "No models reported" when empty
-    const noModels = getAllByText('No models reported');
-    expect(noModels.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('renders loading text when sections are in loading state', () => {
-    const { getAllByText } = render(
-      <SystemViewContent state={makeLoadingState()} onRefresh={() => {}} />,
-    );
-    // Should show loading text in sections
-    const loadingTexts = getAllByText(/loading/i);
-    expect(loadingTexts.length).toBeGreaterThan(0);
-  });
-
-  it('renders error section error messages while success sections remain visible', () => {
-    const { getByText, queryByText } = render(
-      <SystemViewContent state={makeErrorState()} onRefresh={() => {}} />,
-    );
-    // The profiles error should appear
-    expect(getByText(/HTTP 500/)).toBeDefined();
-    // The playbooks error should appear
-    expect(getByText(/HTTP 503/)).toBeDefined();
-    // But daemon section data should still be visible
-    expect(getByText('/home/user/my-project')).toBeDefined();
-    // Extensions should still be visible
-    expect(getByText('my-extension')).toBeDefined();
-    // Session plans should still be visible
-    expect(queryByText('sess-abc')).toBeDefined();
-  });
-
-  it('renders exactly one Refresh system data button', () => {
-    const { getAllByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    const refreshButtons = getAllByRole('button', { name: /refresh system data/i });
-    expect(refreshButtons).toHaveLength(1);
-  });
-
-  it('renders no Use profile mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /use profile/i })).toBeNull();
-    expect(queryByRole('link', { name: /use profile/i })).toBeNull();
-  });
-
-  it('renders no Create profile mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /create profile/i })).toBeNull();
-    expect(queryByRole('link', { name: /create profile/i })).toBeNull();
-  });
-
-  it('renders no Delete profile mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /delete profile/i })).toBeNull();
-    expect(queryByRole('link', { name: /delete profile/i })).toBeNull();
-  });
-
-  it('renders no Run playbook mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /run playbook/i })).toBeNull();
-    expect(queryByRole('link', { name: /run playbook/i })).toBeNull();
-  });
-
-  it('renders no Promote mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^promote$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^promote$/i })).toBeNull();
-  });
-
-  it('renders no Demote mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^demote$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^demote$/i })).toBeNull();
-  });
-
-  it('renders no Trust mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^trust$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^trust$/i })).toBeNull();
-  });
-
-  it('renders no Untrust mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^untrust$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^untrust$/i })).toBeNull();
-  });
-
-  it('renders no Install mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^install$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^install$/i })).toBeNull();
-  });
-
-  it('renders no Remove mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^remove$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^remove$/i })).toBeNull();
-  });
-
-  it('renders no Reload mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^reload$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^reload$/i })).toBeNull();
-  });
-
-  it('renders no Save mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /^save$/i })).toBeNull();
-    expect(queryByRole('link', { name: /^save$/i })).toBeNull();
-  });
-
-  it('renders no Validate raw mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /validate raw/i })).toBeNull();
-    expect(queryByRole('link', { name: /validate raw/i })).toBeNull();
-  });
-
-  it('renders no Sync stack mutation control', () => {
-    const { queryByRole } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByRole('button', { name: /sync stack/i })).toBeNull();
-    expect(queryByRole('link', { name: /sync stack/i })).toBeNull();
-  });
-
-  // --- eforge:region plan-05-system-activity-progressive-disclosure-and-guards ---
-  it('Models section renders at least one <details> per provider in the loaded state', () => {
-    const { container } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    // makeLoadedState has models for pi (anthropic) and claude-sdk (anthropic)
-    // Each harness should have one provider <details>
-    const details = container.querySelectorAll('details');
-    expect(details.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('Models section provider <details> elements are closed on initial render', () => {
-    const { container } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    const details = container.querySelectorAll('details');
-    for (const el of Array.from(details)) {
-      expect(el.hasAttribute('open')).toBe(false);
-    }
-  });
-
-  it('Models section renders zero <li> elements while all providers are collapsed', () => {
-    const { container } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    // Scope to the Models section only — other sections (profiles, extensions, etc.) use <li> elements
-    const modelsSection = container.querySelector('section[aria-label="Models"]');
-    expect(modelsSection).not.toBeNull();
-    const listItems = modelsSection!.querySelectorAll('li');
-    expect(listItems.length).toBe(0);
-  });
-
-  it('Models section renders a text input with an accessible name for model search', () => {
-    const { container } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    const searchInput = container.querySelector('input[type="text"][aria-label]');
-    expect(searchInput).not.toBeNull();
-    const label = searchInput!.getAttribute('aria-label') ?? '';
-    expect(label.toLowerCase()).toMatch(/model/i);
-  });
-  // --- eforge:endregion plan-05-system-activity-progressive-disclosure-and-guards ---
-});
-
-// ---------------------------------------------------------------------------
-// Daemon telemetry rows from project state
-// ---------------------------------------------------------------------------
-
-describe('SystemViewContent – daemon telemetry from project state', () => {
-  function makeProjectStateWithTelemetry(): ConsoleProjectState {
-    return {
-      ...initialConsoleProjectState,
-      connectionStatus: 'connected',
-      latestHeartbeat: {
-        at: Date.now(),
-        payload: {
-          uptime: 65_000,
-          queueDepth: 3,
-          runningBuilds: 1,
-          autoBuild: {
-            enabled: true,
-            paused: false,
-            scheduler: { alive: true, paused: false, runningCount: 1, limit: 5 },
-          },
-          subscribers: 4,
-        },
+  it('shows section errors without blanking successful sections', () => {
+    const state = makeState({
+      profiles: {
+        list: { status: 'error', error: 'HTTP 500 fetching profiles' },
+        active: success({ active: null, source: 'none', resolved: { harness: undefined, profile: null } }),
       },
-    };
-  }
+    });
 
-  it('renders Subscribers row when project state has subscriber count', () => {
-    const { getByText } = render(
-      <SystemViewContent
-        state={makeLoadedState()}
-        projectState={makeProjectStateWithTelemetry()}
-        onRefresh={() => {}}
-      />,
-    );
-    expect(getByText('Subscribers')).toBeDefined();
-    expect(getByText('4')).toBeDefined();
-  });
+    render(<SystemViewContent state={state} onRefresh={() => {}} />);
 
-  it('renders Uptime row when project state has uptime', () => {
-    const { getByText } = render(
-      <SystemViewContent
-        state={makeLoadedState()}
-        projectState={makeProjectStateWithTelemetry()}
-        onRefresh={() => {}}
-      />,
-    );
-    expect(getByText('Uptime')).toBeDefined();
-    // 65000ms = 1m 5s
-    expect(getByText('1m 5s')).toBeDefined();
+    expect(screen.getByText(/HTTP 500 fetching profiles/)).toBeDefined();
+    expect(screen.getByText('/home/user/my-project')).toBeDefined();
   });
 
-  it('renders Scheduler limit row when project state has scheduler limit', () => {
-    const { getByText } = render(
+  it('renders live daemon telemetry when project state is provided', () => {
+    render(
       <SystemViewContent
-        state={makeLoadedState()}
+        state={makeState()}
         projectState={makeProjectStateWithTelemetry()}
         onRefresh={() => {}}
       />,
     );
-    expect(getByText('Scheduler limit')).toBeDefined();
-    expect(getByText('5')).toBeDefined();
-  });
 
-  it('does not render telemetry rows when project state is absent', () => {
-    const { queryByText } = render(
-      <SystemViewContent state={makeLoadedState()} onRefresh={() => {}} />,
-    );
-    expect(queryByText('Subscribers')).toBeNull();
-    expect(queryByText('Uptime')).toBeNull();
-    expect(queryByText('Scheduler limit')).toBeNull();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// SystemConfigurationView — route wrapper passes projectState into content
-// ---------------------------------------------------------------------------
-
-vi.mock('../use-system-surfaces', () => ({
-  useSystemSurfaces: vi.fn(() => ({
-    state: {
-      daemon: {
-        health: { status: 'success', data: { status: 'ok', pid: 1 }, updatedAt: 1 },
-        version: { status: 'success', data: { version: 1, eforgeVersion: '1.0.0' }, updatedAt: 1 },
-        projectContext: { status: 'success', data: { cwd: '/project', gitRemote: null }, updatedAt: 1 },
-      },
-      config: {
-        show: {
-          status: 'success',
-          data: {
-            resolved: { concurrency: 2 },
-            sources: {
-              local: { path: '/project/.eforge/config.yaml', found: true },
-              user: { path: '/home/user/.config/eforge/config.yaml', found: false },
-            },
-          },
-          updatedAt: 1,
-        },
-        validate: { status: 'success', data: { configFound: true, valid: true }, updatedAt: 1 },
-      },
-      profiles: {
-        list: {
-          status: 'empty',
-          data: { profiles: [], active: null, source: 'none' },
-          updatedAt: 1,
-        },
-        active: {
-          status: 'success',
-          data: { active: null, source: 'none', resolved: { harness: undefined, profile: null } },
-          updatedAt: 1,
-        },
-      },
-      extensions: {
-        list: { status: 'empty', data: { extensions: [], diagnostics: [], totals: { eventHooks: 0, agentRunHooks: 0, policyGates: 0, profileRouters: 0, inputSources: 0, reviewerPerspectives: 0, validationProviders: 0, tools: 0, prdEnrichers: 0 } }, updatedAt: 1 },
-        validate: { status: 'success', data: { valid: true, extensions: [], diagnostics: [] }, updatedAt: 1 },
-      },
-      playbooks: {
-        list: { status: 'empty', data: { playbooks: [], warnings: [] }, updatedAt: 1 },
-      },
-      sessionPlans: {
-        list: { status: 'empty', data: { plans: [] }, updatedAt: 1 },
-      },
-      models: {
-        catalogs: {
-          pi: {
-            providers: { status: 'success', data: { providers: ['anthropic'] }, updatedAt: 1 },
-            models: { status: 'success', data: { models: [] }, updatedAt: 1 },
-          },
-          'claude-sdk': {
-            providers: { status: 'success', data: { providers: ['anthropic'] }, updatedAt: 1 },
-            models: { status: 'success', data: { models: [] }, updatedAt: 1 },
-          },
-        },
-      },
-    } as SystemSurfacesState,
-    refresh: vi.fn(),
-  })),
-}));
-
-describe('SystemConfigurationView – route wrapper passes projectState into content', () => {
-  function makeProjectStateWithTelemetry(): ConsoleProjectState {
-    return {
-      ...initialConsoleProjectState,
-      connectionStatus: 'connected',
-      latestHeartbeat: {
-        at: Date.now(),
-        payload: {
-          uptime: 65_000,
-          queueDepth: 3,
-          runningBuilds: 1,
-          autoBuild: {
-            enabled: true,
-            paused: false,
-            scheduler: { alive: true, paused: false, runningCount: 1, limit: 5 },
-          },
-          subscribers: 4,
-        },
-      },
-    };
-  }
-
-  it('renders Subscribers, Uptime, and Scheduler limit from projectState in the Daemon section', () => {
-    const { getByText } = render(
-      <SystemConfigurationView projectState={makeProjectStateWithTelemetry()} />,
-    );
-    expect(getByText('Subscribers')).toBeDefined();
-    expect(getByText('4')).toBeDefined();
-    expect(getByText('Uptime')).toBeDefined();
-    expect(getByText('1m 5s')).toBeDefined();
-    expect(getByText('Scheduler limit')).toBeDefined();
-    expect(getByText('5')).toBeDefined();
+    expect(screen.getByText('Subscribers')).toBeDefined();
+    expect(screen.getByText('4')).toBeDefined();
+    expect(screen.getByText('Uptime')).toBeDefined();
+    expect(screen.getByText('1m 5s')).toBeDefined();
+    expect(screen.getByText('Scheduler limit')).toBeDefined();
+    expect(screen.getByText('5')).toBeDefined();
   });
 });