chore(code): unify step progress views into shared StepList component (#1852)

Author: VojtechBartos

apps/code/src/renderer/components/ui/StepList.tsx

@@ -0,0 +1,77 @@
+import {
+  CheckCircle,
+  Circle,
+  CircleNotch,
+  XCircle,
+} from "@phosphor-icons/react";
+import { Box, Flex, Text } from "@radix-ui/themes";
+
+export type StepStatus = "pending" | "in_progress" | "completed" | "failed";
+
+export interface Step {
+  key: string;
+  label: string;
+  status: StepStatus;
+  detail?: string;
+}
+
+interface StepIconProps {
+  status: StepStatus;
+  size?: number;
+}
+
+export function StepIcon({ status, size = 14 }: StepIconProps) {
+  switch (status) {
+    case "in_progress":
+      return <CircleNotch size={size} className="animate-spin text-blue-9" />;
+    case "completed":
+      return <CheckCircle size={size} weight="fill" className="text-green-9" />;
+    case "failed":
+      return <XCircle size={size} weight="fill" className="text-red-9" />;
+    default:
+      return <Circle size={size} className="text-gray-8" />;
+  }
+}
+
+interface StepRowProps {
+  step: Step;
+  size?: "1" | "2";
+}
+
+function StepRow({ step, size = "2" }: StepRowProps) {
+  return (
+    <Flex direction="column" gap="0">
+      <Flex align="center" gap="2">
+        <StepIcon status={step.status} />
+        <Text size={size} className="text-gray-12">
+          {step.label}
+        </Text>
+      </Flex>
+      {step.detail && (
+        <Box pl="5">
+          <Text size="1" className="text-gray-10">
+            {step.detail}
+          </Text>
+        </Box>
+      )}
+    </Flex>
+  );
+}
+
+interface StepListProps {
+  steps: Step[];
+  /** Text size for step labels. Default "2". */
+  size?: "1" | "2";
+  /** Gap between step rows. Default "1". */
+  gap?: "1" | "2" | "3";
+}
+
+export function StepList({ steps, size = "2", gap = "1" }: StepListProps) {
+  return (
+    <Flex direction="column" gap={gap}>
+      {steps.map((step) => (
+        <StepRow key={step.key} step={step} size={size} />
+      ))}
+    </Flex>
+  );
+}

apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx

@@ -1,3 +1,4 @@
+import { StepList, type StepStatus } from "@components/ui/StepList";
 import {
   CommitAllToggle,
   ErrorContainer,
@@ -11,111 +12,46 @@ import {
   formatFileCountLabel,
 } from "@features/git-interaction/utils/diffStats";
 import { buildCreatePrFlowErrorPrompt } from "@features/git-interaction/utils/errorPrompts";
-import {
-  CheckCircle,
-  Circle,
-  GitPullRequest,
-  XCircle,
-} from "@phosphor-icons/react";
+import { GitPullRequest } from "@phosphor-icons/react";
 import {
   Button,
   Checkbox,
   Dialog,
   Flex,
-  Spinner,
   Text,
   TextArea,
   TextField,
 } from "@radix-ui/themes";
 
 const ICON_SIZE = 14;
 
+const STEP_ORDER: CreatePrStep[] = [
+  "creating-branch",
+  "committing",
+  "pushing",
+  "creating-pr",
+  "complete",
+];
+
+function resolveStepStatus(
+  stepId: CreatePrStep,
+  currentStep: CreatePrStep,
+  failedStep: CreatePrStep | null | undefined,
+): StepStatus {
+  const currentIndex = STEP_ORDER.indexOf(currentStep);
+  const stepIndex = STEP_ORDER.indexOf(stepId);
+  if (currentStep === "error" && stepId === failedStep) return "failed";
+  if (currentStep === "complete" || stepIndex < currentIndex)
+    return "completed";
+  if (stepId === currentStep) return "in_progress";
+  return "pending";
+}
+
 interface StepDef {
   id: CreatePrStep;
   label: string;
 }
 
-function StepIndicator({
-  steps,
-  currentStep,
-  failedStep,
-}: {
-  steps: StepDef[];
-  currentStep: CreatePrStep;
-  failedStep?: CreatePrStep | null;
-}) {
-  const stepOrder: CreatePrStep[] = [
-    "creating-branch",
-    "committing",
-    "pushing",
-    "creating-pr",
-    "complete",
-  ];
-
-  const currentIndex = stepOrder.indexOf(currentStep);
-  const isError = currentStep === "error";
-
-  return (
-    <Flex direction="column" gap="3">
-      {steps.map((step) => {
-        const stepIndex = stepOrder.indexOf(step.id);
-        const isComplete =
-          currentStep === "complete" || stepIndex < currentIndex;
-        const isActive = step.id === currentStep;
-        const isFailed = isError && step.id === failedStep;
-
-        let icon: React.ReactNode;
-        if (isFailed) {
-          icon = <XCircle size={16} weight="fill" color="var(--red-9)" />;
-        } else if (isComplete) {
-          icon = <CheckCircle size={16} weight="fill" color="var(--green-9)" />;
-        } else if (isActive) {
-          icon = <Spinner size="1" />;
-        } else {
-          icon = <Circle size={16} color="var(--gray-6)" />;
-        }
-
-        return (
-          <Flex
-            key={step.id}
-            align="center"
-            gap="2"
-            style={{
-              transition: "opacity 150ms ease",
-              opacity: isComplete ? 0.6 : 1,
-            }}
-          >
-            <Flex
-              style={{
-                transition: "transform 200ms ease",
-                transform: isActive ? "scale(1.15)" : "scale(1)",
-              }}
-            >
-              {icon}
-            </Flex>
-            <Text
-              size="2"
-              weight={isActive ? "medium" : "regular"}
-              style={{
-                transition: "color 150ms ease",
-                color: isFailed
-                  ? "var(--red-11)"
-                  : isComplete
-                    ? "var(--green-11)"
-                    : isActive
-                      ? "var(--gray-12)"
-                      : "var(--gray-9)",
-              }}
-            >
-              {step.label}
-            </Text>
-          </Flex>
-        );
-      })}
-    </Flex>
-  );
-}
-
 export interface CreatePrDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -318,10 +254,17 @@ export function CreatePrDialog({
 
           {isExecuting && (
             <>
-              <StepIndicator
-                steps={steps}
-                currentStep={step}
-                failedStep={store.createPrFailedStep}
+              <StepList
+                steps={steps.map((s) => ({
+                  key: s.id,
+                  label: s.label,
+                  status: resolveStepStatus(
+                    s.id,
+                    step,
+                    store.createPrFailedStep,
+                  ),
+                }))}
+                gap="3"
               />
 
               {step === "error" && store.createPrError && (

apps/code/src/renderer/features/sessions/components/PlanStatusBar.tsx

@@ -1,16 +1,18 @@
+import { StepIcon, StepList, type StepStatus } from "@components/ui/StepList";
 import { CHAT_CONTENT_MAX_WIDTH } from "@features/sessions/constants";
 import type { Plan } from "@features/sessions/types";
-import {
-  CaretDown,
-  CaretRight,
-  CheckCircle,
-  Circle,
-  Spinner,
-  XCircle,
-} from "@phosphor-icons/react";
+import { CaretDown, CaretRight } from "@phosphor-icons/react";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import { useMemo, useState } from "react";
 
+function planEntriesToSteps(plan: Plan) {
+  return plan.entries.map((entry) => ({
+    key: entry.content,
+    label: entry.content,
+    status: entry.status as StepStatus,
+  }));
+}
+
 interface PlanStatusBarProps {
   plan: Plan | null;
 }
@@ -54,7 +56,7 @@ export function PlanStatusBar({ plan }: PlanStatusBarProps) {
               <Text size="1" color="gray">
                 •
               </Text>
-              <Spinner size={12} className="animate-spin text-blue-9" />
+              <StepIcon status="in_progress" />
               <Text size="1" className="truncate text-gray-11">
                 {stats.inProgress.content}
               </Text>
@@ -63,39 +65,11 @@ export function PlanStatusBar({ plan }: PlanStatusBarProps) {
         </Flex>
 
         {isExpanded && plan && (
-          <Box className="border-gray-4 border-t px-3 pb-2">
-            <Flex direction="column" gap="1" className="pt-2">
-              {plan.entries.map((entry) => (
-                <Flex key={entry.content} align="center" gap="2">
-                  <StatusIcon status={entry.status} />
-                  <Text
-                    size="1"
-                    color={entry.status === "completed" ? "gray" : undefined}
-                    className={
-                      entry.status === "completed" ? "text-gray-9" : ""
-                    }
-                  >
-                    {entry.content}
-                  </Text>
-                </Flex>
-              ))}
-            </Flex>
+          <Box className="border-gray-4 border-t px-3 pt-2 pb-2">
+            <StepList steps={planEntriesToSteps(plan)} size="1" />
           </Box>
         )}
       </Box>
     </Box>
   );
 }
-
-function StatusIcon({ status }: { status: string }) {
-  switch (status) {
-    case "completed":
-      return <CheckCircle size={14} className="text-green-9" />;
-    case "in_progress":
-      return <Spinner size={14} className="animate-spin text-blue-9" />;
-    case "failed":
-      return <XCircle size={14} className="text-red-9" />;
-    default:
-      return <Circle size={14} className="text-gray-8" />;
-  }
-}

apps/code/src/renderer/features/sessions/components/buildConversationItems.ts

@@ -2,6 +2,7 @@ import type {
   ContentBlock,
   SessionNotification,
 } from "@agentclientprotocol/sdk";
+import type { Step, StepStatus } from "@components/ui/StepList";
 import type { QueuedMessage } from "@features/sessions/stores/sessionStore";
 import type { SessionUpdate, ToolCall } from "@features/sessions/types";
 import {
@@ -56,15 +57,6 @@ export type ConversationItem =
   | UserShellExecute
   | { type: "queued"; id: string; message: QueuedMessage };
 
-export type ProgressStatus = "in_progress" | "completed" | "failed";
-
-export interface ProgressStep {
-  key: string;
-  status: ProgressStatus;
-  label: string;
-  detail?: string;
-}
-
 export interface LastTurnInfo {
   isComplete: boolean;
   durationMs: number;
@@ -79,11 +71,11 @@ export interface BuildResult {
 
 interface ProgressCardState {
   /** Step key → full step entry. Key order reflects arrival order. */
-  steps: Map<string, ProgressStep>;
+  steps: Map<string, Step>;
   /** Reference to the pushed render item; mutated in place as events arrive. */
   renderItem: {
     sessionUpdate: "progress_group";
-    steps: ProgressStep[];
+    steps: Step[];
     isActive: boolean;
   };
 }
@@ -436,7 +428,7 @@ function ensureProgressCardForGroup(
 
   const renderItem = {
     sessionUpdate: "progress_group" as const,
-    steps: [] as ProgressStep[],
+    steps: [] as Step[],
     isActive: true,
   };
   const card: ProgressCardState = {
@@ -449,7 +441,7 @@ function ensureProgressCardForGroup(
 }
 
 function syncProgressCard(card: ProgressCardState) {
-  const ordered: ProgressStep[] = Array.from(card.steps.values());
+  const ordered: Step[] = Array.from(card.steps.values());
   card.renderItem.steps = ordered;
   card.renderItem.isActive = ordered.some((s) => s.status === "in_progress");
 }
@@ -466,7 +458,7 @@ function handleProgress(b: ItemBuilder, rawParams: unknown, ts: number) {
     | undefined;
   if (!params?.step || !params.label || !params.group) return;
 
-  const status = normalizeProgressStatus(params.status);
+  const status = normalizeStepStatus(params.status);
   const card = ensureProgressCardForGroup(b, params.group, ts);
   if (!card) return;
   card.steps.set(params.step, {
@@ -478,7 +470,7 @@ function handleProgress(b: ItemBuilder, rawParams: unknown, ts: number) {
   syncProgressCard(card);
 }
 
-function normalizeProgressStatus(raw: string | undefined): ProgressStatus {
+function normalizeStepStatus(raw: string | undefined): StepStatus {
   switch (raw) {
     case "in_progress":
     case "completed":