fix: prevent prepared lifecycle narrow overlap

web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx

@@ -60,6 +60,7 @@ describe("PreparedAuthoringLifecycleScene", () => {
     const frame = screen.getByRole("region", { name: /active authoring operation/i });
     expect(frame).toHaveTextContent("workflow.draft_workspaces.set_step_output_map");
     expect(frame).toHaveTextContent(/wf draft set-output lda_report_workflow/i);
+    expect(frame).toHaveTextContent(/prepared workflow lifecycle/i);
     expect(frame).toHaveAttribute("data-authoring-step", "repair");
     expect(frame.querySelector('[data-authoring-focus="repair"]')).toBeInTheDocument();
     expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute(

web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.tsx

@@ -38,7 +38,7 @@ const steps = [
  * Each beat shows a persistent prepared assistant beside one dominant phase
  * projection sourced from the prepared authoring recording.
  */
-export const PreparedAuthoringLifecycleScene = ({ beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => {
+export const PreparedAuthoringLifecycleScene = ({ scene, beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => {
   const [messageState, dispatch] = useReducer(
     preparedLifecycleMessageReducer,
     initialPreparedLifecycleMessageState,
@@ -109,6 +109,7 @@ export const PreparedAuthoringLifecycleScene = ({ beat, onAdvance }: PreparedAut
         >
           <header className="prepared-lifecycle-scene__frame-header">
             <div>
+              <span className="prepared-lifecycle-scene__context">{scene.title}</span>
               <span className="prepared-lifecycle-scene__frame-step">{activeStep.label}</span>
               <h2>{beat.title}</h2>
               <p>{beat.caption}</p>

web/apps/console/src/presentation/presentation-css.test.ts

@@ -177,6 +177,18 @@ describe("presentation.css", () => {
     const narrowContainer = cssBlock(css, "@container presentation-canvas (max-width: 600px)") ?? "";
     const narrowScene = cssBlocks(narrowContainer, ".prepared-lifecycle-scene")
       .find((body) => body.includes("grid-template-columns: minmax(0, 1fr);") && body.includes("grid-template-areas:"));
+    const narrowPresentation = cssBlocks(
+      narrowContainer,
+      '.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .prepared-lifecycle-scene__presentation',
+    ).find((body) => body.includes("height: max-content;"));
+    const narrowFrame = cssBlocks(
+      narrowContainer,
+      '.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame',
+    ).find((body) => body.includes("min-height: max-content;"));
+    const narrowAssistant = cssBlocks(
+      narrowContainer,
+      '.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .presentation-assistant-pane',
+    ).find((body) => body.includes("height: min(24rem, 60vh);"));
 
     expect(compactScene).toContain("overflow: visible;");
     expect(compactFrame).toContain("grid-template-rows: auto auto;");
@@ -186,6 +198,20 @@ describe("presentation.css", () => {
     expect(compactRepair).toContain("min-width: 0;");
     expect(narrowScene).toContain("grid-template-columns: minmax(0, 1fr);");
     expect(narrowScene).toContain('grid-template-areas: "presentation" "assistant";');
+    expect(narrowScene).toContain("grid-template-rows: max-content max-content;");
+    expect(narrowScene).toContain("align-content: start;");
+    expect(narrowScene).toContain("min-height: max-content;");
+    expect(narrowScene).toContain("height: max-content;");
+    expect(narrowScene).toContain("flex: 0 0 auto;");
+    expect(narrowPresentation).toContain("grid-template-rows: auto max-content;");
+    expect(narrowPresentation).toContain("overflow: visible;");
+    expect(narrowPresentation).not.toContain("overflow: auto;");
+    expect(narrowFrame).toContain("height: max-content;");
+    expect(narrowFrame).toContain("overflow: visible;");
+    expect(narrowFrame).not.toContain("overflow: auto;");
+    expect(narrowAssistant).toContain("min-height: 14rem;");
+    expect(narrowAssistant).toContain("height: min(24rem, 60vh);");
+    expect(narrowAssistant).toContain("max-height: min(24rem, 60vh);");
   });
 
   it("bounds prepared conversation scrolling and recenters the agent handoff at compact stage widths", () => {

web/apps/console/src/presentation/presentation.css

@@ -3802,6 +3802,15 @@
   text-transform: uppercase;
 }
 
+.prepared-lifecycle-scene__context {
+  display: block;
+  margin-bottom: 0.3rem;
+  color: var(--text-secondary);
+  font: 600 0.62rem/1 var(--font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
 .prepared-lifecycle-scene__evidence {
   display: grid;
   gap: 0.5rem;
@@ -4002,6 +4011,10 @@
   color: var(--authoring-muted);
 }
 
+.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__context {
+  color: var(--authoring-muted);
+}
+
 /* Diagnose and Repair are distinct editorial cuts of the recorded validate phase. */
 .prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] {
   grid-template-columns: minmax(0, 1fr);
@@ -4219,17 +4232,38 @@
 @container presentation-canvas (max-width: 600px) {
   .prepared-lifecycle-scene[data-presentation-surface="editorial"] {
     grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: max-content max-content;
     grid-template-areas: "presentation" "assistant";
+    align-content: start;
+    min-height: max-content;
+    height: max-content;
+    flex: 0 0 auto;
     overflow: visible;
   }
 
   .prepared-lifecycle-scene[data-presentation-surface="editorial"] > .prepared-lifecycle-scene__presentation {
     grid-area: presentation;
+    grid-template-rows: auto max-content;
+    align-self: start;
+    min-height: max-content;
+    height: max-content;
+    overflow: visible;
+  }
+
+  .prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame {
+    grid-template-rows: auto max-content;
+    align-self: start;
+    min-height: max-content;
+    height: max-content;
+    overflow: visible;
   }
 
   .prepared-lifecycle-scene[data-presentation-surface="editorial"] > .presentation-assistant-pane {
     grid-area: assistant;
+    align-self: start;
     min-height: 14rem;
+    height: min(24rem, 60vh);
+    max-height: min(24rem, 60vh);
   }
 }