feat: Add StepsSummaryPanel and related components for ali-fullstack tags parsing

Author: SFARPak

src/atoms/stepsAtoms.ts

@@ -0,0 +1,34 @@
+import { atom } from "jotai";
+
+export interface StepError {
+  summary: string;
+  details?: string;
+  timestamp: Date;
+}
+
+export interface StepItem {
+  id: string;
+  title: string;
+  description?: string;
+  status: "pending" | "in_progress" | "completed" | "failed";
+  error?: StepError;
+  chatId: number;
+  createdAt: Date;
+  updatedAt: Date;
+  completedAt?: Date;
+}
+
+export const stepsListAtom = atom<StepItem[]>([]);
+export const isStepsSummaryOpenAtom = atom<boolean>(false);
+
+// Derive step counts
+export const stepsSummaryAtom = atom((get) => {
+  const steps = get(stepsListAtom);
+  return {
+    total: steps.length,
+    completed: steps.filter((s) => s.status === "completed").length,
+    failed: steps.filter((s) => s.status === "failed").length,
+    inProgress: steps.filter((s) => s.status === "in_progress").length,
+    pending: steps.filter((s) => s.status === "pending").length,
+  };
+});

src/components/ChatPanel.tsx

@@ -2,6 +2,8 @@ import { useState, useRef, useEffect, useCallback } from "react";
 import { useAtom, useAtomValue } from "jotai";
 import { chatMessagesAtom, chatStreamCountAtom } from "../atoms/chatAtoms";
 import { isTodoPanelOpenAtom } from "../atoms/todoAtoms";
+import { isStepsSummaryOpenAtom } from "../atoms/stepsAtoms";
+import { StepsSummaryPanel } from "./StepsSummaryPanel";
 import { IpcClient } from "@/ipc/ipc_client";
 import { useSettings } from "@/hooks/useSettings";
 import { AppOutput } from "@/ipc/ipc_types";
@@ -34,6 +36,7 @@ export function ChatPanel({
 
   const [messages, setMessages] = useAtom(chatMessagesAtom);
   const [isTodoPanelOpen, setIsTodoPanelOpen] = useAtom(isTodoPanelOpenAtom);
+  const [isStepsPanelOpen, setIsStepsPanelOpen] = useAtom(isStepsSummaryOpenAtom);
   const [isVersionPaneOpen, setIsVersionPaneOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const streamCount = useAtomValue(chatStreamCountAtom);
@@ -47,6 +50,7 @@ export function ChatPanel({
     isFullstackMode,
     isFrontendMode,
     isTodoPanelOpen,
+    isStepsPanelOpen,
     showTodoToggle: isFullstackMode || isFrontendMode,
   });
   // Reference to store the processed prompt so we don't submit it twice
@@ -206,6 +210,9 @@ export function ChatPanel({
           showTodoToggle={isFullstackMode || isFrontendMode}
           isTodoPanelOpen={isTodoPanelOpen}
           onToggleTodo={() => setIsTodoPanelOpen(!isTodoPanelOpen)}
+          showStepsToggle={true}
+          isStepsPanelOpen={isStepsPanelOpen}
+          onToggleSteps={() => setIsStepsPanelOpen(!isStepsPanelOpen)}
         />
         <div className="flex flex-1 overflow-hidden">
           {!isVersionPaneOpen && (
@@ -227,6 +234,12 @@ export function ChatPanel({
           />
         </div>
       </div>
+      {isStepsPanelOpen && (
+        <StepsSummaryPanel
+          isOpen={isStepsPanelOpen}
+          onClose={() => setIsStepsPanelOpen(false)}
+        />
+      )}
       {(isFullstackMode || isFrontendMode) && isTodoPanelOpen && (
         <TodoListPanel
           isOpen={isTodoPanelOpen}