improve Fix tab UX: persistent graph, smarter navigation, incremental fixes

- Dependency graph now stays visible while re-analyzing
- Graph shows container boxes for composed layers with nested children
- Tab key cycles focus between graph, services list, and candidates
- Arrow keys (h/l) for quick panel switching, j/k for list navigation
- Apply fix [p] works from any panel, not just when graph is hidden
- New layers merge into existing AppLayer instead of replacing it
- Auto-analyze when switching to Fix tab for first time
- Removed 'applied' status - analysis stays complete after applying

Author: DanielFGray

src/AnalysisStatusView.tsx

@@ -1,7 +1,7 @@
 /**
  * Analysis Status View Component
  *
- * Shows different analysis states: idle, analyzing, complete (no results), error, applied.
+ * Shows different analysis states: idle, analyzing, complete (no results), error.
  */
 
 import { Show } from "solid-js";
@@ -79,21 +79,6 @@ export function AnalysisStatusView() {
         </text>
         <text style={{ fg: COLORS.muted }}>Press [?] for help</text>
       </Show>
-
-      <Show when={store.ui.layerAnalysisStatus === "applied"}>
-        <text style={{ fg: COLORS.success }} marginBottom={2}>
-          Fix applied successfully!
-        </text>
-        <Show when={store.ui.layerAnalysisResults}>
-          <text style={{ fg: COLORS.text }} marginBottom={1}>
-            {`Modified: ${store.ui.layerAnalysisResults?.targetFile}:${store.ui.layerAnalysisResults?.targetLine}`}
-          </text>
-          <text style={{ fg: COLORS.text }} marginBottom={2}>
-            Added: Layer composition
-          </text>
-        </Show>
-        <text style={{ fg: COLORS.muted }}>Press [a] to re-analyze</text>
-      </Show>
     </box>
   );
 }

src/DependencyGraphView.tsx

@@ -29,6 +29,7 @@ interface DependencyGraphViewProps {
   layers: LayerDefinition[];
   selectedNode?: string;
   onSelectNode?: (name: string) => void;
+  focused?: boolean;
 }
 
 /**
@@ -38,12 +39,14 @@ function GraphHeader(props: {
   layerCount: number;
   cycleCount: number;
   orphanCount: number;
+  focused?: boolean;
 }) {
   return (
     <box flexDirection="column" marginBottom={1}>
       <box flexDirection="row" gap={2}>
-        <text style={{ fg: COLORS.primary }}>
-          Dependency Graph ({props.layerCount} layers)
+        <text style={{ fg: props.focused ? COLORS.primary : COLORS.muted }}>
+          {props.focused ? "> " : "  "}Dependency Graph ({props.layerCount}{" "}
+          layers)
         </text>
       </box>
 
@@ -141,11 +144,12 @@ export function DependencyGraphView(props: DependencyGraphViewProps) {
         layerCount={props.layers.length}
         cycleCount={cycles().length}
         orphanCount={orphans().length}
+        focused={props.focused}
       />
 
       <GraphLegend />
 
-      <scrollbox flexGrow={1} focused>
+      <scrollbox flexGrow={1} focused={props.focused ?? false}>
         <For each={graphLines()}>
           {(line) => (
             <GraphLine
@@ -166,6 +170,8 @@ export function DependencyGraphView(props: DependencyGraphViewProps) {
 export function DependencyGraphPanel() {
   const { store } = useStore();
 
+  const isFocused = createMemo(() => store.ui.fixTabFocusedPanel === "graph");
+
   const layers = createMemo((): LayerDefinition[] => {
     // Get layers from analysis results if available
     const results = store.ui.layerAnalysisResults;
@@ -186,6 +192,8 @@ export function DependencyGraphPanel() {
             allLayers.push({
               ...layer,
               provides: candidate.service, // The service this candidate provides
+              composedOf: layer.composedOf ?? [],
+              compositionType: layer.compositionType ?? "none",
             });
           }
         }
@@ -216,7 +224,7 @@ export function DependencyGraphPanel() {
         </box>
       }
     >
-      <DependencyGraphView layers={layers()} />
+      <DependencyGraphView layers={layers()} focused={isFocused()} />
     </Show>
   );
 }

src/codemod.ts

@@ -178,25 +178,60 @@ export function applyLayerFix(fix: LayerFix): CodemodResult {
 
     // Determine what we need to do
     if (existingAppLayerDecl) {
-      // Case 2: Update existing AppLayer
-      log("[Codemod] Case 2: Updating existing AppLayer");
-
-      // Use the generated code directly - it already includes proper layer composition
-      // with Layer.provideMerge for dependent layers
-      log("[Codemod] Using generated layer code:", fix.generatedCode);
+      // Case 2: Merge new layers into existing AppLayer
+      log("[Codemod] Case 2: Merging into existing AppLayer");
+      log("[Codemod] Existing layers:", existingLayerNames);
+      log("[Codemod] New layers:", fix.layerNames);
 
       // Parse the generated layer code to get its AST
       const layerExprAST = recast.parse(`(${fix.generatedCode})`, {
         parser: typescriptParser,
       });
-      const layerExpr = layerExprAST.program.body[0].expression;
+      const newLayerExpr = layerExprAST.program.body[0].expression;
 
-      // Update the existing declaration with the new expression
       const decl = existingAppLayerDecl.node.declarations[0];
-      decl.init = layerExpr;
+
+      // If existing is already Layer.mergeAll, add new layers to its arguments
+      // Otherwise, wrap both in a new Layer.mergeAll
+      if (
+        n.CallExpression.check(decl.init) &&
+        n.MemberExpression.check(decl.init.callee) &&
+        n.Identifier.check(decl.init.callee.object) &&
+        decl.init.callee.object.name === "Layer" &&
+        n.Identifier.check(decl.init.callee.property) &&
+        decl.init.callee.property.name === "mergeAll"
+      ) {
+        // Extract arguments from new expression if it's also Layer.mergeAll, otherwise add directly
+        if (
+          n.CallExpression.check(newLayerExpr) &&
+          n.MemberExpression.check(newLayerExpr.callee) &&
+          n.Identifier.check(newLayerExpr.callee.object) &&
+          newLayerExpr.callee.object.name === "Layer" &&
+          n.Identifier.check(newLayerExpr.callee.property) &&
+          newLayerExpr.callee.property.name === "mergeAll"
+        ) {
+          // Flatten: add each argument from the new Layer.mergeAll
+          for (const arg of newLayerExpr.arguments) {
+            decl.init.arguments.push(arg);
+          }
+          log("[Codemod] Flattened and appended Layer.mergeAll arguments");
+        } else {
+          // Add the expression directly
+          decl.init.arguments.push(newLayerExpr);
+          log("[Codemod] Appended to existing Layer.mergeAll");
+        }
+      } else {
+        // Wrap existing and new in Layer.mergeAll
+        const mergedExpr = b.callExpression(
+          b.memberExpression(b.identifier("Layer"), b.identifier("mergeAll")),
+          [decl.init, newLayerExpr],
+        );
+        decl.init = mergedExpr;
+        log("[Codemod] Wrapped in new Layer.mergeAll");
+      }
 
       result.changes.push(
-        `Updated AppLayer with layers: ${fix.layerNames.join(", ")}`,
+        `Added layers to AppLayer: ${fix.layerNames.join(", ")}`,
       );
     } else {
       // Case 1: Create new AppLayer and wrap Effect.run
@@ -214,14 +249,6 @@ export function applyLayerFix(fix: LayerFix): CodemodResult {
       });
       const layerDeclaration = layerAST.program.body[0];
 
-      // Add a comment above the layer declaration
-      const comment = b.commentBlock(
-        " Auto-generated layer composition ",
-        true,
-        false,
-      );
-      layerDeclaration.comments = [comment];
-
       // Insert the layer declaration before the statement
       insertionStatement.insertBefore(layerDeclaration);
       result.changes.push("Inserted AppLayer variable with layer composition");