fix UI updating while analyzing

Author: DanielFGray

src/AnalysisProgressList.tsx

@@ -0,0 +1,104 @@
+/**
+ * Analysis Progress List Component
+ *
+ * A reusable component that shows the progress of layer analysis
+ * with visual indicators for completed, current, and pending steps.
+ */
+
+import { For, createMemo } from "solid-js";
+import { theme } from "./theme";
+import { useStore } from "./store";
+import {
+  ANALYSIS_STEPS,
+  ANALYSIS_STEP_LABELS,
+  type AnalysisProgressStep,
+} from "./storeTypes";
+
+/**
+ * Get the status of a step relative to the current progress
+ */
+function getStepStatus(
+  step: AnalysisProgressStep,
+  currentStep: AnalysisProgressStep | null,
+): "pending" | "current" | "completed" {
+  if (!currentStep) return "pending";
+
+  const stepIndex = ANALYSIS_STEPS.indexOf(step);
+  const currentIndex = ANALYSIS_STEPS.indexOf(currentStep);
+
+  if (stepIndex < currentIndex) return "completed";
+  if (stepIndex === currentIndex) return "current";
+  return "pending";
+}
+
+/**
+ * Get the icon for a step based on its status
+ */
+function getStepIcon(status: "pending" | "current" | "completed"): string {
+  switch (status) {
+    case "completed":
+      return "✓";
+    case "current":
+      return "→";
+    case "pending":
+      return "○";
+  }
+}
+
+interface AnalysisProgressListProps {
+  /** Whether to show in a compact single-line format */
+  compact?: boolean;
+}
+
+/**
+ * Displays the list of analysis progress steps with visual status indicators.
+ *
+ * - Completed steps: ✓ in green
+ * - Current step: → in orange/warning
+ * - Pending steps: ○ in muted gray
+ */
+export function AnalysisProgressList(props: AnalysisProgressListProps) {
+  const { store } = useStore();
+
+  const currentStep = createMemo(() => store.ui.layerAnalysisProgress);
+
+  // Compact mode: show only current step on one line
+  if (props.compact) {
+    return (
+      <text style={{ fg: theme.warning }}>
+        {currentStep()
+          ? `→ ${ANALYSIS_STEP_LABELS[currentStep()!]}...`
+          : "Analyzing..."}
+      </text>
+    );
+  }
+
+  // Full mode: show all steps
+  return (
+    <box flexDirection="column">
+      <For each={ANALYSIS_STEPS}>
+        {(step) => {
+          const status = createMemo(() => getStepStatus(step, currentStep()));
+          const icon = createMemo(() => getStepIcon(status()));
+          const label = ANALYSIS_STEP_LABELS[step];
+
+          return (
+            <text
+              style={{
+                fg:
+                  status() === "completed"
+                    ? theme.success
+                    : status() === "current"
+                      ? theme.warning
+                      : theme.muted,
+              }}
+              marginBottom={1}
+            >
+              {icon()} {label}
+            </text>
+          );
+        }}
+      </For>
+    </box>
+  );
+}

src/AnalysisStatusView.tsx

@@ -2,12 +2,14 @@
  * Analysis Status View Component
  *
  * Shows different analysis states: idle, analyzing, complete (no results), error.
+ * During analysis, shows progress steps with muted colors for pending steps
+ * and unmuted colors for completed steps.
  */
 
 import { Show } from "solid-js";
 import { theme } from "./theme";
 import { useStore } from "./store";
-
+import { AnalysisProgressList } from "./AnalysisProgressList";
 
 export function AnalysisStatusView() {
   const { store } = useStore();
@@ -33,16 +35,12 @@ export function AnalysisStatusView() {
         <text style={{ fg: theme.warning }} marginBottom={2}>
           Analyzing project...
         </text>
-        <text style={{ fg: theme.muted }} marginBottom={1}>
-          - Searching for tsconfig.json
-        </text>
-        <text style={{ fg: theme.muted }} marginBottom={1}>
-          - Scanning TypeScript diagnostics
+        <text style={{ fg: theme.muted }} marginBottom={2}>
+          Press [Esc] to cancel
         </text>
-        <text style={{ fg: theme.muted }} marginBottom={1}>
-          - Finding layer definitions
-        </text>
-        <text style={{ fg: theme.muted }}>- Resolving dependencies</text>
+
+        {/* Progress steps with reactive coloring */}
+        <AnalysisProgressList />
       </Show>
 
       <Show

src/fixTab.tsx

@@ -10,6 +10,7 @@ import { Show, createMemo } from "solid-js";
 import { theme } from "./theme";
 import { useStore } from "./store";
 import { AnalysisStatusView } from "./AnalysisStatusView";
+import { AnalysisProgressList } from "./AnalysisProgressList";
 import { ServicesListPanel } from "./ServicesListPanel";
 import { LayerCandidatesPanel } from "./LayerCandidatesPanel";
 import { DependencyGraphPanel } from "./DependencyGraphView";
@@ -42,6 +43,11 @@ export function FixTab() {
   // Show results view when we have results (even if re-analyzing)
   const showResultsView = createMemo(() => hasPreviousResults());
 
+  // Show re-analyzing indicator when we have results AND are analyzing
+  const isReAnalyzing = createMemo(
+    () => hasPreviousResults() && store.ui.layerAnalysisStatus === "analyzing",
+  );
+
   return (
     <box
       flexDirection="column"
@@ -57,6 +63,25 @@ export function FixTab() {
       {/* Results view: graph + service panels */}
       <Show when={showResultsView()}>
         <box flexGrow={1} flexDirection="column" width="100%">
+          {/* Re-analyzing indicator - shown above graph when re-analyzing */}
+          <Show when={isReAnalyzing()}>
+            <box
+              flexDirection="row"
+              width="100%"
+              paddingLeft={2}
+              paddingTop={1}
+              paddingBottom={1}
+              backgroundColor={theme.bgAlt}
+              border={["bottom"]}
+              borderColor={theme.bgSelected}
+            >
+              <AnalysisProgressList compact />
+              <text style={{ fg: theme.muted }} marginLeft={2}>
+                [Esc] Cancel
+              </text>
+            </box>
+          </Show>
+
           {/* Graph view (toggleable) */}
           <Show when={showGraph()}>
             <box

src/index.tsx

@@ -240,6 +240,15 @@ function AppContent() {
         return;
       }
 
+      // Cancel analysis with ESC
+      if (
+        key.name === "escape" &&
+        store.ui.layerAnalysisStatus === "analyzing"
+      ) {
+        actions.cancelLayerAnalysis();
+        return;
+      }
+
       // Navigation within analysis results
       if (
         store.ui.layerAnalysisStatus === "complete" &&