ai-design-system 0.1.116 → 0.1.118

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/SessionHeader/SessionHeader.tsx

@@ -17,10 +17,24 @@ export interface ChatSessionInfo {
 }
 
 import type { FileDownloadResult } from '@/components/composites/FileTreeExplorer';
+import { formatDayLabel } from '@/lib/date';
 
 
 export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string;
+  /**
+   * What a session is called.
+   * - "title": the session's own title (default).
+   * - "date": the day it was created, as "21 Aug 2025", in the reader's time
+   *   zone. For a surface that keeps one session per day, where the day is
+   *   what tells sessions apart and a first message is not.
+   * @default "title"
+   */
+  titleFormat?: 'title' | 'date';
+  /**
+   * IANA time zone for "date" titles. Defaults to the reader's own.
+   */
+  timeZone?: string;
   sessions?: ChatSessionInfo[];
   activeSessionId?: string | null;
   onNewSession?: () => void;
@@ -48,7 +62,7 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * and a dropdown history of past sessions.
  */
 export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
-  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className, ...props }, ref) => {
+  ({ title, titleFormat = 'title', timeZone, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className, ...props }, ref) => {
     const activeSession = sessions?.find(s => s.id === activeSessionId);
     const downloadRef = React.useRef<HTMLAnchorElement>(null);
 
@@ -66,9 +80,16 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
       URL.revokeObjectURL(url);
     }, [onDownloadSession]);
 
-    const displayTitle = title || (activeSessionId 
-      ? (activeSession?.title || 'Untitled Session')
-      : 'New Session');
+    const byDate = titleFormat === 'date';
+    const sessionLabel = (session: ChatSessionInfo | undefined): string => {
+      if (!byDate) return session?.title || 'Untitled Session';
+      // A session not yet in the list is the one being started now: today's.
+      return formatDayLabel(session?.created_at ?? new Date(), { timeZone }) || 'Untitled Session';
+    };
+
+    const displayTitle = title || (activeSessionId
+      ? sessionLabel(activeSession)
+      : byDate ? formatDayLabel(new Date(), { timeZone }) : 'New Session');
 
     return (
       <div 
@@ -121,8 +142,11 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
                       onClick={() => onSelectSession?.(session.id)}
                       className="flex flex-col items-start py-2 cursor-pointer"
                     >
-                      <span className="text-sm font-medium truncate w-full">{session.title || 'Untitled Session'}</span>
-                      <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
+                      <span className="text-sm font-medium truncate w-full">{sessionLabel(session)}</span>
+                      {/* The date is the title in "date" mode; repeating it underneath says nothing. */}
+                      {!byDate && (
+                        <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
+                      )}
                     </DropdownMenuItem>
                   ))
                 ) : (

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/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
    */
@@ -220,6 +222,17 @@ export interface ChatPanelProps {
    * Title override for the session header
    */
   sessionTitle?: string;
+  /**
+   * What sessions are called in the header and the history list: their own
+   * title ("title", default) or the day they were created ("date", shown as
+   * "21 Aug 2025" in the reader's time zone).
+   * @default "title"
+   */
+  sessionTitleFormat?: 'title' | 'date';
+  /**
+   * IANA time zone for "date" session titles. Defaults to the reader's own.
+   */
+  sessionTimeZone?: string;
   /**
    * Whether to show action buttons in the session header
    * @default true
@@ -273,6 +286,7 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     onApprovalApprove,
     onApprovalReject,
     onApprovalEdit,
+    onOpenFile,
     isApprovalProcessing = false,
     loading = false,
     onStop,
@@ -304,6 +318,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
+    sessionTitleFormat = 'title',
+    sessionTimeZone,
     showSessionActions = true,
     showNewSession = true,
     showDownloadSession = true,
@@ -433,6 +449,7 @@ export const ChatPanel = React.memo<ChatPanelProps>(
             isProcessing={isApprovalProcessing}
             state={approvalCardState}
             approval={approvalCardApproval}
+            onOpenFile={onOpenFile}
           />
         </div>
       );
@@ -468,6 +485,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
         {showHeader && (
           <SessionHeader
             title={sessionTitle}
+            titleFormat={sessionTitleFormat}
+            timeZone={sessionTimeZone}
             showActions={showSessionActions}
             showNewSession={showNewSession}
             showDownloadSession={showDownloadSession}

package/components/index.ts

@@ -94,6 +94,9 @@ export type { ExternalToast, ToastT, ToasterProps } from 'sonner';
 
 // Utilities
 export { cn } from '@/lib/utils';
+// Calendar days in the reader's time zone
+export { formatDayLabel, dayKey, isSameDay, userTimeZone } from '@/lib/date';
+export type { DayOptions } from '@/lib/date';
 export { ButtonSwitcher } from './composites';
 export type { ButtonSwitcherProps, ButtonSwitcherItem } from './composites';