ai-design-system 0.1.117 → 0.1.119

package/components/composites/AccountDialog/AccountDialog.tsx

@@ -55,7 +55,7 @@ export const AccountButton = React.forwardRef<HTMLButtonElement, AccountButtonPr
         <div
           className={cn(
             "w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold select-none text-white",
-            avatarColor ? "" : "bg-emerald-700"
+            avatarColor ? "" : "bg-gradient-to-br from-teal-800 to-emerald-600"
           )}
           style={avatarColor ? { backgroundColor: avatarColor } : undefined}
         >

package/components/composites/ApprovalCard/ApprovalCard.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { Icon } from "@/components/primitives/Icon";
+import { Button } from "@/components/primitives/Button";
 import { Input } from "@/components/primitives/Input";
 import { Textarea } from "@/components/primitives/Textarea";
 import { Label } from "@/components/primitives/Label";
@@ -48,6 +49,12 @@ export interface ApprovalCardProps {
   state?: ToolUIState;
   approval?: ToolApproval;
   className?: string;
+  /**
+   * Opens the file a question is about (`args.file_path`). With it, the
+   * question shows the file's name as a link; without it, or when the question
+   * names no file, nothing is shown.
+   */
+  onOpenFile?: (path: string) => void;
 }
 
 function formatValue(value: unknown): string {
@@ -92,6 +99,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     state = "approval-requested",
     approval = {},
     className,
+    onOpenFile,
   }) => {
     const [isEditing, setIsEditing] = useState(false);
     const [prevArgs, setPrevArgs] = useState(actionRequest.args);
@@ -99,6 +107,12 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     const [rejectReason, setRejectReason] = useState("");
     const [showRejectInput, setShowRejectInput] = useState(false);
 
+    // The file the question is about, when the asker named one.
+    const questionFile =
+      typeof actionRequest.args?.file_path === "string" && actionRequest.args.file_path.trim()
+        ? actionRequest.args.file_path
+        : null;
+
     const hideSkipButton = (actionRequest.args?.hide_skip_button as boolean) ?? false;
     const submitButtonText = (actionRequest.args?.button_submit_text as string) || 'Continue';
     const skipButtonText = (actionRequest.args?.button_skip_text as string) || 'Skip';
@@ -267,29 +281,45 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                   <StreamingMarkdown controls={false}>
                     {currentQuestion.question}
                   </StreamingMarkdown>
+                  {questionFile && onOpenFile && (
+                    <Button
+                      type="button"
+                      variant="link"
+                      onClick={() => onOpenFile(questionFile)}
+                      className="mt-2 h-auto p-0 inline-flex max-w-full items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+                      data-testid="approval-card-file-link"
+                    >
+                      <Icon name="file-text" className="h-4 w-4 flex-shrink-0" />
+                      <span className="truncate">{questionFile.split("/").pop()}</span>
+                    </Button>
+                  )}
                 </div>
               </div>
               {questions.length > 1 && (
                 <div className="flex items-center gap-1.5 text-xs text-muted-foreground flex-shrink-0 font-normal">
-                  <button
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="icon-sm"
                     onClick={() => setCurrentQuestionIndex((prev) => Math.max(0, prev - 1))}
                     disabled={currentQuestionIndex === 0}
-                    className="hover:text-foreground disabled:opacity-30 p-0.5 transition-colors"
+                    className="h-6 w-6 p-0 hover:text-foreground disabled:opacity-30 transition-colors"
                   >
                     <Icon name="chevron-left" size="sm" />
-                  </button>
+                  </Button>
                   <span className="font-medium">{currentQuestionIndex + 1} of {questions.length}</span>
-                  <button
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="icon-sm"
                     onClick={() =>
                       setCurrentQuestionIndex((prev) => Math.min(questions.length - 1, prev + 1))
                     }
                     disabled={currentQuestionIndex === questions.length - 1}
-                    className="hover:text-foreground disabled:opacity-30 p-0.5 transition-colors"
+                    className="h-6 w-6 p-0 hover:text-foreground disabled:opacity-30 transition-colors"
                   >
                     <Icon name="chevron-right" size="sm" />
-                  </button>
+                  </Button>
                 </div>
               )}
             </div>
@@ -301,8 +331,8 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
               const isOther = index === allOptions.length - 1;
               const isSelected = isMultiSelect
                 ? (selectedAnswers[currentQuestionIndex] as string[])?.includes(
-                    isOther ? otherTexts[currentQuestionIndex] || "" : option
-                  )
+                  isOther ? otherTexts[currentQuestionIndex] || "" : option
+                )
                 : selectedOptionIndices[currentQuestionIndex] === index;
 
               return (
@@ -500,7 +530,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                 }}
                 disabled={isProcessing}
               >
-                    <Icon name="check" size="sm" className="mr-2" />
+                <Icon name="check" size="sm" className="mr-2" />
                 Save & Approve
               </ConfirmationAction>
             </ConfirmationActions>
@@ -576,7 +606,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     }}
                     disabled={isProcessing}
                   >
-                      <Icon name="x" size="sm" className="mr-2" />
+                    <Icon name="x" size="sm" className="mr-2" />
                     Confirm Rejection
                   </ConfirmationAction>
                 </>
@@ -589,7 +619,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                       onClick={() => setShowRejectInput(true)}
                       disabled={isProcessing}
                     >
-                    <Icon name="x" size="sm" className="mr-2" />
+                      <Icon name="x" size="sm" className="mr-2" />
                       {skipButtonText}
                     </ConfirmationAction>
                   )}
@@ -610,7 +640,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     onClick={onApprove}
                     disabled={isProcessing}
                   >
-                  <Icon name="check" size="sm" className="mr-2" />
+                    <Icon name="check" size="sm" className="mr-2" />
                     {submitButtonText}
                   </ConfirmationAction>
                 </>

package/components/composites/PromptInput/PromptInput.tsx

@@ -145,7 +145,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         className={cn(
           "[&>[data-slot=input-group]]:rounded-2xl",
           className?.includes("border") &&
-            "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
+          "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
           className
         )}
         {...props}
@@ -155,15 +155,15 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
           placeholder={placeholder}
           disabled={disabled}
           onChange={isControlled ? handleControlledChange : undefined}
-          className="min-h-9 py-2 px-3 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
+          className="min-h-12 py-3 pl-3 pr-2 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
         />
-        <InputGroupAddon align="inline-end" className="self-end pb-1 pr-1.5 shrink-0">
+        <InputGroupAddon align="inline-end" className="self-end pb-3 pr-3 pt-3 shrink-0 has-[>button]:mr-0 !mr-0">
           <PromptInputSubmit
             disabled={disabled || (loading && !onStop)}
             status={loading ? (onStop ? "streaming" : "submitted") : undefined}
             onClick={isStopping ? (e: React.MouseEvent) => { e.preventDefault(); onStop?.(); } : undefined}
             className={cn(
-              "rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors",
+              "rounded-lg text-white transition-colors",
               isStopping && "bg-transparent hover:bg-accent"
             )}
           >
@@ -181,7 +181,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         onError={onError}
         className={cn(
           className?.includes("border") &&
-            "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
+          "[&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:bg-transparent [&>[data-slot=input-group]]:shadow-none",
           className
         )}
         {...props}
@@ -218,7 +218,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
             status={loading ? (onStop ? "streaming" : "submitted") : undefined}
             onClick={isStopping ? (e: React.MouseEvent) => { e.preventDefault(); onStop?.(); } : undefined}
             className={cn(
-              "rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors",
+              "rounded-lg text-white transition-colors",
               isStopping && "bg-transparent hover:bg-accent"
             )}
           >

package/components/composites/StoriesBar/StoriesBar.stories.tsx

@@ -21,31 +21,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const mockStories: StoryItem[] = [
-  {
-    id: "story-1",
-    title: "Devin iOS",
-    status: "ready",
-  },
-  {
-    id: "story-2",
-    title: "Waypoint",
-    status: "ready",
-  },
-  {
-    id: "story-3",
-    title: "Design Sys",
-    status: "generating",
-  },
-  {
-    id: "story-4",
-    title: "Workspace",
-    status: "ready",
-  },
-  {
-    id: "story-5",
-    title: "ZeroOps",
-    status: "draft",
-  },
+  { id: "story-1", title: "Devin iOS", status: "ready", unread: true },
+  { id: "story-2", title: "Waypoint", status: "ready" },
+  { id: "story-3", title: "Design Sys", status: "working" },
+  { id: "story-4", title: "Workspace", status: "working", unread: true },
+  { id: "story-5", title: "Render", status: "failed", unread: true },
+  { id: "story-6", title: "ZeroOps", status: "stopped" },
 ];
 
 /**

package/components/composites/StoriesBar/StoriesBar.tsx

@@ -13,7 +13,20 @@ export interface StoryItem {
   subtitle?: string;
   icon?: string;
   time?: string;
-  status?: "ready" | "generating" | "draft";
+  /**
+   * The video's state, drawn as the story's colour:
+   * - "failed": red — the video has stopped on an error
+   * - "ready": green — the finished video is available
+   * - "stopped": grey — not ready, and nothing is running to finish it
+   * - "working": orange — in progress
+   * "generating" and "draft" are the earlier names of "working" and "stopped".
+   */
+  status?: "failed" | "ready" | "stopped" | "working" | "generating" | "draft";
+  /**
+   * Whether the story holds a notification the user has not seen. Shown as the
+   * badge, on any status, and only then.
+   */
+  unread?: boolean;
   thumbnailUrl?: string;
   avatarColor?: string;
   avatarInitials?: string;
@@ -28,22 +41,17 @@ export interface StoriesBarProps extends React.HTMLAttributes<HTMLDivElement> {
 
 function getStoryStatusStyle(status?: StoryItem["status"]) {
   switch (status) {
-    case "generating":
-      return {
-        iconColor: "text-amber-500",
-        badgeBg: "bg-amber-500",
-      };
+    case "failed":
+      return { iconColor: "text-red-500", badgeBg: "bg-red-500" };
     case "ready":
-      return {
-        iconColor: "text-emerald-500",
-        badgeBg: "bg-emerald-500",
-      };
+      return { iconColor: "text-emerald-500", badgeBg: "bg-emerald-500" };
+    case "working":
+    case "generating":
+      return { iconColor: "text-amber-500", badgeBg: "bg-amber-500" };
+    case "stopped":
     case "draft":
     default:
-      return {
-        iconColor: "text-muted-foreground",
-        badgeBg: "bg-muted-foreground",
-      };
+      return { iconColor: "text-muted-foreground", badgeBg: "bg-muted-foreground" };
   }
 }
 
@@ -61,7 +69,6 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
         <div className="flex items-center gap-2.5 px-3 py-1.5 overflow-x-auto no-scrollbar scroll-smooth">
           {stories.map((story) => {
             const isActive = story.id === activeStoryId;
-            const isGenerating = story.status === "generating";
             const statusStyle = getStoryStatusStyle(story.status);
             const iconName = story.icon || defaultIcon;
 
@@ -100,17 +107,15 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
                     )}
                   </div>
 
-                  {isGenerating ? (
-                    <span className="absolute bottom-0 right-0 flex h-2 w-2">
-                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" />
-                      <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-500" />
-                    </span>
-                  ) : (
+                  {/* The badge: an unseen notification, on any status. */}
+                  {story.unread && (
                     <span
                       className={cn(
                         "absolute bottom-0 right-0 inline-flex rounded-full h-2 w-2 ring-1.5 ring-background",
                         statusStyle.badgeBg
                       )}
+                      data-testid={`story-badge-${story.id}`}
+                      aria-label="New notification"
                     />
                   )}
                 </div>

package/components/composites/StoryPlayer/StoryPlayer.tsx

@@ -592,14 +592,14 @@ export const StoryPlayer = React.forwardRef<HTMLDivElement, StoryPlayerProps>(
               data-testid="btn-prev-story"
               aria-label="Previous story"
               onClick={handlePrev}
-              className="flex-1 h-full cursor-pointer bg-transparent hover:bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
+              className="flex-1 h-full cursor-pointer bg-transparent hover:!bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
             />
             <Button
               variant="ghost"
               data-testid="btn-next-story"
               aria-label="Next story"
               onClick={handleNext}
-              className="flex-1 h-full cursor-pointer bg-transparent hover:bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
+              className="flex-1 h-full cursor-pointer bg-transparent hover:!bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
             />
           </div>
         </div>

package/components/features/ChatPanel/ChatPanel.tsx

@@ -95,6 +95,8 @@ export interface ChatPanelProps {
    * Handler to edit HITL approval request arguments
    */
   onApprovalEdit?: (editedArgs: Record<string, unknown>) => void;
+  /** Opens the file a pending question is about (its `file_path`). The card shows the link only when this is given. */
+  onOpenFile?: (path: string) => void;
   /**
    * Processing state for HITL approval request
    */
@@ -284,6 +286,7 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     onApprovalApprove,
     onApprovalReject,
     onApprovalEdit,
+    onOpenFile,
     isApprovalProcessing = false,
     loading = false,
     onStop,
@@ -446,6 +449,7 @@ export const ChatPanel = React.memo<ChatPanelProps>(
             isProcessing={isApprovalProcessing}
             state={approvalCardState}
             approval={approvalCardApproval}
+            onOpenFile={onOpenFile}
           />
         </div>
       );

package/dist/index.cjs

@@ -7194,10 +7194,10 @@ var PromptInput2 = React3__namespace.memo(
               placeholder,
               disabled,
               onChange: isControlled ? handleControlledChange : void 0,
-              className: "min-h-9 py-2 px-3 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
+              className: "min-h-12 py-3 pl-3 pr-2 text-sm resize-none border-0 shadow-none focus-visible:ring-0 bg-transparent flex-1 field-sizing-content"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon2, { align: "inline-end", className: "self-end pb-1 pr-1.5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon2, { align: "inline-end", className: "self-end pb-3 pr-3 pt-3 shrink-0 has-[>button]:mr-0 !mr-0", children: /* @__PURE__ */ jsxRuntime.jsx(
             PromptInputSubmit,
             {
               disabled: disabled || loading && !onStop,
@@ -7207,7 +7207,7 @@ var PromptInput2 = React3__namespace.memo(
                 onStop == null ? void 0 : onStop();
               } : void 0,
               className: cn(
-                "rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors",
+                "rounded-lg text-white transition-colors",
                 isStopping && "bg-transparent hover:bg-accent"
               ),
               children: loading ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "corner-down-left", size: "sm" })
@@ -7269,7 +7269,7 @@ var PromptInput2 = React3__namespace.memo(
                   onStop == null ? void 0 : onStop();
                 } : void 0,
                 className: cn(
-                  "rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors",
+                  "rounded-lg text-white transition-colors",
                   isStopping && "bg-transparent hover:bg-accent"
                 ),
                 children: loading ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "corner-down-left", size: "sm" })
@@ -7665,17 +7665,19 @@ var ApprovalCard = React3__namespace.memo(
     isProcessing = false,
     state = "approval-requested",
     approval = {},
-    className
+    className,
+    onOpenFile
   }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const [isEditing, setIsEditing] = React3.useState(false);
     const [prevArgs, setPrevArgs] = React3.useState(actionRequest.args);
     const [editedArgs, setEditedArgs] = React3.useState(() => actionRequest.args);
     const [rejectReason, setRejectReason] = React3.useState("");
     const [showRejectInput, setShowRejectInput] = React3.useState(false);
-    const hideSkipButton = (_b = (_a = actionRequest.args) == null ? void 0 : _a.hide_skip_button) != null ? _b : false;
-    const submitButtonText = ((_c = actionRequest.args) == null ? void 0 : _c.button_submit_text) || "Continue";
-    const skipButtonText = ((_d = actionRequest.args) == null ? void 0 : _d.button_skip_text) || "Skip";
+    const questionFile = typeof ((_a = actionRequest.args) == null ? void 0 : _a.file_path) === "string" && actionRequest.args.file_path.trim() ? actionRequest.args.file_path : null;
+    const hideSkipButton = (_c = (_b = actionRequest.args) == null ? void 0 : _b.hide_skip_button) != null ? _c : false;
+    const submitButtonText = ((_d = actionRequest.args) == null ? void 0 : _d.button_submit_text) || "Continue";
+    const skipButtonText = ((_e = actionRequest.args) == null ? void 0 : _e.button_skip_text) || "Skip";
     const [currentQuestionIndex, setCurrentQuestionIndex] = React3.useState(0);
     const [selectedAnswers, setSelectedAnswers] = React3.useState({});
     const [otherTexts, setOtherTexts] = React3.useState({});
@@ -7685,7 +7687,7 @@ var ApprovalCard = React3__namespace.memo(
       setPrevArgs(actionRequest.args);
       setEditedArgs(actionRequest.args);
     }
-    const allowed = (_e = reviewConfig == null ? void 0 : reviewConfig.allowedDecisions) != null ? _e : ["approve", "reject"];
+    const allowed = (_f = reviewConfig == null ? void 0 : reviewConfig.allowedDecisions) != null ? _f : ["approve", "reject"];
     const canEdit = allowed.includes("edit");
     const canReject = allowed.includes("reject");
     const isQuestionAction = actionRequest.name === "ask_question" || actionRequest.args && (typeof actionRequest.args.question === "string" || Array.isArray(actionRequest.args.questions) && actionRequest.args.questions.length > 0);
@@ -7744,7 +7746,7 @@ var ApprovalCard = React3__namespace.memo(
         return false;
       };
       const allQuestionsAnswered = questions.length > 0 && questions.every((_, idx) => isQuestionAnswered(idx));
-      const isApprovalType = ((_f = actionRequest.args) == null ? void 0 : _f.type) === "approval";
+      const isApprovalType = ((_g = actionRequest.args) == null ? void 0 : _g.type) === "approval";
       const isLastQuestion = currentQuestionIndex === questions.length - 1;
       const handleContinue = () => {
         if (!isApprovalType && !allQuestionsAnswered) {
@@ -7799,16 +7801,34 @@ var ApprovalCard = React3__namespace.memo(
             /* @__PURE__ */ jsxRuntime.jsx(ConfirmationTitle, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(QuestionIcon, { className: "h-5 w-5 text-muted-foreground mt-0.5 flex-shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 max-h-60 overflow-y-auto pr-1 text-sm leading-relaxed text-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: /* @__PURE__ */ jsxRuntime.jsx(StreamingMarkdown, { controls: false, children: currentQuestion.question }) })
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 max-h-60 overflow-y-auto pr-1 text-sm leading-relaxed text-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(StreamingMarkdown, { controls: false, children: currentQuestion.question }),
+                  questionFile && onOpenFile && /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button2,
+                    {
+                      type: "button",
+                      variant: "link",
+                      onClick: () => onOpenFile(questionFile),
+                      className: "mt-2 h-auto p-0 inline-flex max-w-full items-center gap-1.5 text-sm font-medium text-primary hover:underline",
+                      "data-testid": "approval-card-file-link",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "file-text", className: "h-4 w-4 flex-shrink-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: questionFile.split("/").pop() })
+                      ]
+                    }
+                  )
+                ] })
               ] }),
               questions.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground flex-shrink-0 font-normal", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  Button2,
                   {
                     type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
                     onClick: () => setCurrentQuestionIndex((prev) => Math.max(0, prev - 1)),
                     disabled: currentQuestionIndex === 0,
-                    className: "hover:text-foreground disabled:opacity-30 p-0.5 transition-colors",
+                    className: "h-6 w-6 p-0 hover:text-foreground disabled:opacity-30 transition-colors",
                     children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", size: "sm" })
                   }
                 ),
@@ -7818,12 +7838,14 @@ var ApprovalCard = React3__namespace.memo(
                   questions.length
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  Button2,
                   {
                     type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
                     onClick: () => setCurrentQuestionIndex((prev) => Math.min(questions.length - 1, prev + 1)),
                     disabled: currentQuestionIndex === questions.length - 1,
-                    className: "hover:text-foreground disabled:opacity-30 p-0.5 transition-colors",
+                    className: "h-6 w-6 p-0 hover:text-foreground disabled:opacity-30 transition-colors",
                     children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "sm" })
                   }
                 )
@@ -8416,6 +8438,7 @@ var ChatPanel = React3__namespace.memo(
     onApprovalApprove,
     onApprovalReject,
     onApprovalEdit,
+    onOpenFile,
     isApprovalProcessing = false,
     loading = false,
     onStop,
@@ -8548,7 +8571,8 @@ var ChatPanel = React3__namespace.memo(
           onEdit: handleApprovalEdit,
           isProcessing: isApprovalProcessing,
           state: approvalCardState,
-          approval: approvalCardApproval
+          approval: approvalCardApproval,
+          onOpenFile
         }
       ) });
     } else if (fileChanges.length > 0) {
@@ -14959,22 +14983,17 @@ var WorkspaceEmptyState = React3__namespace.memo(
 WorkspaceEmptyState.displayName = "WorkspaceEmptyState";
 function getStoryStatusStyle(status) {
   switch (status) {
-    case "generating":
-      return {
-        iconColor: "text-amber-500",
-        badgeBg: "bg-amber-500"
-      };
+    case "failed":
+      return { iconColor: "text-red-500", badgeBg: "bg-red-500" };
     case "ready":
-      return {
-        iconColor: "text-emerald-500",
-        badgeBg: "bg-emerald-500"
-      };
+      return { iconColor: "text-emerald-500", badgeBg: "bg-emerald-500" };
+    case "working":
+    case "generating":
+      return { iconColor: "text-amber-500", badgeBg: "bg-amber-500" };
+    case "stopped":
     case "draft":
     default:
-      return {
-        iconColor: "text-muted-foreground",
-        badgeBg: "bg-muted-foreground"
-      };
+      return { iconColor: "text-muted-foreground", badgeBg: "bg-muted-foreground" };
   }
 }
 var StoriesBar = React3__namespace.forwardRef(
@@ -14990,7 +15009,6 @@ var StoriesBar = React3__namespace.forwardRef(
       }, props), {
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2.5 px-3 py-1.5 overflow-x-auto no-scrollbar scroll-smooth", children: stories.map((story) => {
           const isActive = story.id === activeStoryId;
-          const isGenerating = story.status === "generating";
           const statusStyle = getStoryStatusStyle(story.status);
           const iconName = story.icon || defaultIcon;
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -15029,16 +15047,15 @@ var StoriesBar = React3__namespace.forwardRef(
                       )
                     }
                   ),
-                  isGenerating ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-0 right-0 flex h-2 w-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-amber-500" })
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  story.unread && /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
                       className: cn(
                         "absolute bottom-0 right-0 inline-flex rounded-full h-2 w-2 ring-1.5 ring-background",
                         statusStyle.badgeBg
-                      )
+                      ),
+                      "data-testid": `story-badge-${story.id}`,
+                      "aria-label": "New notification"
                     }
                   )
                 ] }),
@@ -15557,7 +15574,7 @@ var StoryPlayer = React3__namespace.forwardRef(
                   "data-testid": "btn-prev-story",
                   "aria-label": "Previous story",
                   onClick: handlePrev,
-                  className: "flex-1 h-full cursor-pointer bg-transparent hover:bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
+                  className: "flex-1 h-full cursor-pointer bg-transparent hover:!bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -15567,7 +15584,7 @@ var StoryPlayer = React3__namespace.forwardRef(
                   "data-testid": "btn-next-story",
                   "aria-label": "Next story",
                   onClick: handleNext,
-                  className: "flex-1 h-full cursor-pointer bg-transparent hover:bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
+                  className: "flex-1 h-full cursor-pointer bg-transparent hover:!bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
                 }
               )
             ] })
@@ -15629,7 +15646,7 @@ var AccountButton = React3__namespace.forwardRef(
             {
               className: cn(
                 "w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold select-none text-white",
-                avatarColor ? "" : "bg-emerald-700"
+                avatarColor ? "" : "bg-gradient-to-br from-teal-800 to-emerald-600"
               ),
               style: avatarColor ? { backgroundColor: avatarColor } : void 0,
               children: initial