ai-design-system 0.1.57 → 0.1.59

package/components/ai-elements/reasoning.tsx

@@ -10,7 +10,6 @@ import { cn } from "@/lib/utils";
 import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import type { ComponentProps } from "react";
 import { createContext, memo, useContext, useEffect, useState } from "react";
-import { Response } from "./response";
 import { Shimmer } from "./shimmer";
 
 type ReasoningContextValue = {
@@ -179,7 +178,7 @@ export const ReasoningContent = memo(
       )}
       {...props}
     >
-      <Response className="grid gap-2">{children}</Response>
+      {children}
     </CollapsibleContent>
   )
 );

package/components/blocks/AIConversation/AIConversation.tsx

@@ -101,9 +101,94 @@ export const AIConversation = React.memo<AIConversationProps>(
     const toMessageString = (content: unknown): string =>
       typeof content === 'string' ? content : ''
 
+    const groupedMessages = React.useMemo(() => {
+      const result: AIMessage[] = [];
+      let currentGroup: AIMessage | null = null;
+
+      for (const msg of messages) {
+        if (msg.role === "orchestrator") {
+          const isFinalResponse =
+            !msg.isLoading &&
+            (!msg.toolCalls || msg.toolCalls.length === 0) &&
+            (!msg.subAgents || msg.subAgents.length === 0);
+
+          if (!isFinalResponse) {
+            if (currentGroup) {
+              if (msg.content) {
+                currentGroup.content = currentGroup.content
+                  ? `${currentGroup.content}\n\n${msg.content}`
+                  : msg.content;
+              }
+              if (msg.toolCalls) {
+                const existingToolCalls = currentGroup.toolCalls || [];
+                const updatedToolCalls = [...existingToolCalls];
+                for (const newCall of msg.toolCalls) {
+                  const existingIndex = updatedToolCalls.findIndex(tc => tc.id === newCall.id);
+                  if (existingIndex >= 0) {
+                    updatedToolCalls[existingIndex] = newCall;
+                  } else {
+                    updatedToolCalls.push(newCall);
+                  }
+                }
+                currentGroup.toolCalls = updatedToolCalls;
+              }
+              if (msg.subAgents) {
+                const existingSubAgents = currentGroup.subAgents || [];
+                const updatedSubAgents = [...existingSubAgents];
+                for (const newAgent of msg.subAgents) {
+                  const existingIndex = updatedSubAgents.findIndex(a => a.id === newAgent.id);
+                  if (existingIndex >= 0) {
+                    updatedSubAgents[existingIndex] = newAgent;
+                  } else {
+                    // Merge consecutive subAgents with the same name
+                    if (
+                      updatedSubAgents.length > 0 &&
+                      updatedSubAgents[updatedSubAgents.length - 1].subAgentName === newAgent.subAgentName
+                    ) {
+                      const prev = updatedSubAgents[updatedSubAgents.length - 1];
+                      let mergedOutput = prev.output;
+                      if (newAgent.output) {
+                        const prevStr = typeof prev.output === 'string' ? prev.output : (prev.output ? JSON.stringify(prev.output) : '');
+                        const newStr = typeof newAgent.output === 'string' ? newAgent.output : JSON.stringify(newAgent.output);
+                        mergedOutput = prevStr ? `${prevStr}\n\n${newStr}` : newStr;
+                      }
+                      updatedSubAgents[updatedSubAgents.length - 1] = {
+                        ...newAgent,
+                        id: prev.id, // keep the original id so React keys don't jump
+                        input: prev.input, // keep original input or combine? Just keep original
+                        output: mergedOutput
+                      };
+                    } else {
+                      updatedSubAgents.push(newAgent);
+                    }
+                  }
+                }
+                currentGroup.subAgents = updatedSubAgents;
+              }
+              currentGroup.isLoading = msg.isLoading;
+            } else {
+              currentGroup = {
+                ...msg,
+                toolCalls: msg.toolCalls ? [...msg.toolCalls] : undefined,
+                subAgents: msg.subAgents ? [...msg.subAgents] : undefined,
+              };
+              result.push(currentGroup);
+            }
+          } else {
+            currentGroup = null;
+            result.push(msg);
+          }
+        } else {
+          currentGroup = null;
+          result.push(msg);
+        }
+      }
+      return result;
+    }, [messages]);
+
     const renderedMessages = React.useMemo(
       () =>
-        messages.map((message) => {
+        groupedMessages.map((message, index) => {
           const contentStr = toMessageString(message.content)
 
           // Render based on role field
@@ -137,8 +222,7 @@ export const AIConversation = React.memo<AIConversationProps>(
             const reasoningCalls = allToolCalls.filter((tc) => tc.visibility === "reasoning")
             const directToolCalls = allToolCalls.filter((tc) => tc.visibility !== "reasoning")
 
-            const hasContent = contentStr.trim() !== ""
-            const hasReasoning = reasoningCalls.length > 0
+            const hasReasoning = reasoningCalls.length > 0 || subAgents.length > 0 || directToolCalls.length > 0 || (message.isLoading && contentStr.trim() !== "");
             const reasoningText = hasReasoning ? contentStr : undefined
             const displayContentStr = hasReasoning ? "" : contentStr
             const hasDisplayContent = displayContentStr.trim() !== ""
@@ -147,7 +231,7 @@ export const AIConversation = React.memo<AIConversationProps>(
               return null;
             }
 
-            const isStreaming = reasoningCalls.some((tc) => tc.status === "pending")
+            const isStreaming = message.isLoading || reasoningCalls.some((tc) => tc.status === "pending") || subAgents.some(sa => sa.status === "active") || directToolCalls.some(tc => tc.status === "pending")
 
             return (
               <OrchestratorMessage
@@ -161,36 +245,37 @@ export const AIConversation = React.memo<AIConversationProps>(
                 }}
                 showAvatar={showAvatars && hasDisplayContent}
               >
-                {/* Render reasoning-section for hidden tool results */}
+                {/* Render reasoning-section for hidden tool results and subagents */}
                 {hasReasoning && (
                   <ReasoningDisplay 
                     content={reasoningText} 
                     items={reasoningCalls} 
                     isStreaming={isStreaming} 
                     onToolAction={onToolAction}
-                  />
-                )}
+                    defaultOpen={isStreaming || index === groupedMessages.length - 1}
+                  >
+                    {/* Render direct tool calls */}
+                    {directToolCalls.map((tc) => (
+                      <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
+                    ))}
 
-                {/* Render direct tool calls */}
-                {directToolCalls.map((tc) => (
-                  <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
-                ))}
-
-                {/* Render specialist sub-agents */}
-                {subAgents.map((subAgent) => (
-                  <SpecialistMessage
-                    key={subAgent.id}
-                    message={{
-                      id: subAgent.id,
-                      name: subAgent.subAgentName,
-                      description: undefined,
-                      content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
-                      status: subAgent.status,
-                      toolCalls: [],
-                    }}
-                    isNested={true}
-                  />
-                ))}
+                    {/* Render specialist sub-agents */}
+                    {subAgents.map((subAgent) => (
+                      <SpecialistMessage
+                        key={subAgent.id}
+                        message={{
+                          id: subAgent.id,
+                          name: subAgent.subAgentName,
+                          description: undefined,
+                          content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
+                          status: subAgent.status,
+                          toolCalls: [],
+                        }}
+                        isNested={true}
+                      />
+                    ))}
+                  </ReasoningDisplay>
+                )}
               </OrchestratorMessage>
             )
           }
@@ -210,7 +295,7 @@ export const AIConversation = React.memo<AIConversationProps>(
             />
           )
         }),
-      [messages, showAvatars]
+      [groupedMessages, showAvatars, onToolAction]
     )
 
     return (

package/components/blocks/FormReportsSection/FormReportsSection.tsx

@@ -17,6 +17,7 @@ export interface FormReportsSectionProps {
   pagination?: DashboardPaginationState
   tableHandlers?: FormReportsTableHandlers
   tableLeftActions?: React.ReactNode
+  enableRowSelection?: boolean
 }
 
 export const FormReportsSection = React.memo<FormReportsSectionProps>(
@@ -29,6 +30,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
     pagination,
     tableHandlers,
     tableLeftActions,
+    enableRowSelection,
   }) => {
     return (
       <section>
@@ -41,6 +43,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
           leftActions={tableLeftActions}
           onCreateClick={onCreateClick}
           createButtonLabel={createButtonLabel}
+          enableRowSelection={enableRowSelection}
         />
       </section>
     )

package/components/composites/AppBreadcrumb/AppBreadcrumb.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppBreadcrumb } from "./AppBreadcrumb";
+
+/**
+ * AppBreadcrumb Composite Stories
+ *
+ * The AppBreadcrumb provides an easy way to render breadcrumbs by passing
+ * an array of data, automatically handling separators and active states.
+ */
+const meta = {
+  title: "Composites/AppBreadcrumb",
+  component: AppBreadcrumb,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof AppBreadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default AppBreadcrumb usage
+ */
+export const Default: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Workflows", href: "/workflows" },
+      { label: "My Workflow" },
+    ],
+  },
+};
+
+/**
+ * With an ellipsis
+ */
+export const WithEllipsis: Story = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Folders", href: "/folders" },
+      { label: "Subfolder", href: "/folders/1" },
+      { label: "Document" },
+    ],
+    showEllipsis: true,
+  },
+};

package/components/composites/AppBreadcrumb/AppBreadcrumb.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { 
+  Breadcrumb, 
+  BreadcrumbList, 
+  BreadcrumbItem, 
+  BreadcrumbLink, 
+  BreadcrumbPage, 
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis
+} from "@/components/primitives/Breadcrumb";
+
+export interface BreadcrumbItemData {
+  label: React.ReactNode;
+  href?: string;
+  isCurrentPage?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+export interface AppBreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+  items: BreadcrumbItemData[];
+  showEllipsis?: boolean;
+  ellipsisIndex?: number;
+}
+
+/**
+ * AppBreadcrumb Composite
+ *
+ * A composite wrapper around the Breadcrumb primitive that accepts a data array
+ * and handles the complex rendering of links, separators, and ellipses.
+ */
+export const AppBreadcrumb = React.forwardRef<HTMLElement, AppBreadcrumbProps>(
+  ({ items, showEllipsis = false, ellipsisIndex = 1, className, ...props }, ref) => {
+    if (!items || items.length === 0) return null;
+
+    return (
+      <Breadcrumb ref={ref} className={className} {...props}>
+        <BreadcrumbList>
+          {items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            const isEllipsis = showEllipsis && index === ellipsisIndex && items.length > 3;
+
+            if (isEllipsis) {
+              return (
+                <React.Fragment key={`ellipsis-${index}`}>
+                  <BreadcrumbItem>
+                    <BreadcrumbEllipsis />
+                  </BreadcrumbItem>
+                  {!isLast && <BreadcrumbSeparator />}
+                </React.Fragment>
+              );
+            }
+
+            return (
+              <React.Fragment key={`item-${index}`}>
+                <BreadcrumbItem>
+                  {item.isCurrentPage || isLast ? (
+                    <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink 
+                      href={item.href || "#"} 
+                      onClick={item.onClick}
+                    >
+                      {item.label}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+                {!isLast && <BreadcrumbSeparator />}
+              </React.Fragment>
+            );
+          })}
+        </BreadcrumbList>
+      </Breadcrumb>
+    );
+  }
+);
+
+AppBreadcrumb.displayName = "AppBreadcrumb";

package/components/composites/AppBreadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { AppBreadcrumb } from "./AppBreadcrumb";
+export type { AppBreadcrumbProps, BreadcrumbItemData } from "./AppBreadcrumb";

package/components/composites/DataTable/DraggableRow.tsx

@@ -8,9 +8,11 @@ import type { DashboardRow } from "./table-types"
 export interface DraggableRowProps {
   row: Row<DashboardRow>
   rowId: number | string
+  onClick?: (row: DashboardRow) => void
+  className?: string
 }
 
-export function DraggableRow({ row, rowId }: DraggableRowProps) {
+export function DraggableRow({ row, rowId, onClick, className }: DraggableRowProps) {
   const { transform, transition, setNodeRef, isDragging } = useSortable({
     id: rowId,
   })
@@ -21,7 +23,8 @@ export function DraggableRow({ row, rowId }: DraggableRowProps) {
       data-row-id={String(rowId)}
       data-state={row.getIsSelected() && "selected"}
       data-dragging={isDragging}
-      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+      onClick={() => onClick?.(row.original)}
+      className={`relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80 ${className ?? ""}`}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -539,7 +539,13 @@ export function EnhancedDataTable({
                 {table.getRowModel().rows?.length ? (
                   <SortableContext items={dataIds} strategy={verticalListSortingStrategy}>
                     {table.getRowModel().rows.map((row) => (
-                      <DraggableRow key={row.id} row={row} rowId={toRowId(row.original, tableSchema)} />
+                      <DraggableRow 
+                        key={row.id} 
+                        row={row} 
+                        rowId={toRowId(row.original, tableSchema)} 
+                        onClick={handlers?.onRowClick}
+                        className={handlers?.onRowClick ? "cursor-pointer hover:bg-muted/50" : ""}
+                      />
                     ))}
                   </SortableContext>
                 ) : (

package/components/composites/DataTable/table-types.ts

@@ -34,4 +34,5 @@ export interface DashboardTableActionHandlers {
   onPaginationChange?: (pageIndex: number, pageSize: number) => void
   onPageSizeChange?: (pageSize: number) => void
   onPageChange?: (pageIndex: number) => void
+  onRowClick?: (row: DashboardRow) => void
 }

package/components/composites/FormReports/FormReportsTable.tsx

@@ -38,6 +38,7 @@ export interface FormReportsTableHandlers {
   onPaginationChange?: (pageIndex: number, pageSize: number) => void
   onPageSizeChange?: (pageSize: number) => void
   onPageChange?: (pageIndex: number) => void
+  onRowClick?: (row: FormReportsEntity) => void
 }
 
 export interface FormReportsTableProps {
@@ -50,6 +51,7 @@ export interface FormReportsTableProps {
   rightActions?: React.ReactNode
   onCreateClick?: () => void
   createButtonLabel?: string
+  enableRowSelection?: boolean
 }
 
 const dashboardToFormReportsActionMap: Record<DashboardRowAction, string> = {
@@ -62,7 +64,7 @@ const dashboardToFormReportsActionMap: Record<DashboardRowAction, string> = {
 export type { DashboardPaginationState }
 
 export const FormReportsTable = React.memo<FormReportsTableProps>(
-  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel }) => {
+  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel, enableRowSelection }) => {
     const { rows, originalById, tableSchema } = React.useMemo(() => {
       const byId = new Map<string, FormReportsEntity>()
       const tableColumns: DynamicTableSchema["columns"] = columns
@@ -87,10 +89,10 @@ export const FormReportsTable = React.memo<FormReportsTableProps>(
           columns: tableColumns,
           enableFiltering: true,
           enablePagination: true,
-          enableRowSelection: true,
+          enableRowSelection: enableRowSelection ?? true,
         }),
       }
-    }, [columns, items])
+    }, [columns, items, enableRowSelection])
 
     const adaptedHandlers = React.useMemo<DashboardTableActionHandlers>(
       () => ({
@@ -164,6 +166,11 @@ export const FormReportsTable = React.memo<FormReportsTableProps>(
         onPaginationChange: (pageIndex, pageSize) => handlers?.onPaginationChange?.(pageIndex, pageSize),
         onPageSizeChange: (pageSize) => handlers?.onPageSizeChange?.(pageSize),
         onPageChange: (pageIndex) => handlers?.onPageChange?.(pageIndex),
+        onRowClick: (row) => {
+          const originalRow = originalById.get(String(row.id))
+          if (!originalRow) return
+          handlers?.onRowClick?.(originalRow)
+        }
       }),
       [handlers, originalById]
     )

package/components/composites/OrchestratorMessage/OrchestratorMessage.tsx

@@ -10,7 +10,7 @@ import {
   MessageAvatar,
   MessageTypingIndicator,
 } from "@/components/ai-elements/message"
-import { Response } from "@/components/ai-elements/response"
+import { Response } from "@/components/composites/response"
 
 /**
  * OrchestratorMessage Block

package/components/composites/ProjectSwitcher/ProjectSwitcher.tsx

@@ -1,12 +1,12 @@
 import * as React from "react"
 import { Icon } from "@/components/primitives/Icon"
+import { Command as CommandPrimitive } from "cmdk"
 
 import { Button } from "@/components/primitives/Button"
 import {
   Command,
   CommandEmpty,
   CommandGroup,
-  CommandInput,
   CommandItem,
   CommandList,
   CommandSeparator,
@@ -37,6 +37,8 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
     const selectedProject = projects.find((p) => p.id === selectedProjectId)
     const displayLabel = selectedProject ? selectedProject.name : "Select Project..."
 
+    const defaultValue = selectedProject ? `${selectedProject.name}-${selectedProject.id}` : undefined
+
     return (
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
@@ -46,13 +48,21 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
             aria-expanded={open}
             className={`w-[240px] justify-between font-medium ${className || ""}`}
           >
-            {displayLabel}
+            <div className="flex items-center">
+              {displayLabel}
+            </div>
             <Icon name="chevrons-up-down" size="sm" className="ml-2 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[240px] p-0" align="start">
-          <Command>
-            <CommandInput placeholder="Find Project..." />
+          <Command defaultValue={defaultValue}>
+            <div className="flex items-center justify-between border-b border-neutral-600 px-3" cmdk-input-wrapper="">
+              <CommandPrimitive.Input
+                placeholder="Find Project..."
+                className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-neutral-700 bg-neutral-800 px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">Esc</kbd>
+            </div>
             <CommandList className="max-h-[300px]">
               <CommandEmpty>
                 <div className="flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground">
@@ -60,22 +70,25 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
                 </div>
               </CommandEmpty>
               {projects.length > 0 && (
-                <CommandGroup heading="All Projects">
+                <CommandGroup>
                   {projects.map((project) => (
                     <CommandItem
                       key={project.id}
-                      value={project.name}
+                      value={`${project.name}-${project.id}`}
                       onSelect={() => {
                         onSelectProject(project.id)
                         setOpen(false)
                       }}
+                      className="mb-1 last:mb-0 cursor-pointer flex items-center justify-between"
                     >
+                      <div className="flex items-center">
+                        {project.name}
+                      </div>
                       <Icon name="check"
-                        className={`mr-2 h-4 w-4 ${
+                        className={`h-4 w-4 ${
                           selectedProjectId === project.id ? "opacity-100" : "opacity-0"
                         }`}
                       />
-                      {project.name}
                     </CommandItem>
                   ))}
                 </CommandGroup>
@@ -91,8 +104,8 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
                   onCreateProject()
                 }}
               >
-                <Icon name="plus" size="sm" className="mr-2" />
-                Create App
+                <Icon name="plus" size="sm" className="mr-2 h-4 w-4" />
+                Create Project
               </Button>
             </div>
           </Command>

package/components/composites/ReasoningDisplay/ReasoningDisplay.tsx

@@ -5,7 +5,7 @@ import {
   ReasoningTrigger,
 } from "@/components/ai-elements/reasoning";
 import { CollapsibleContent } from "@/components/primitives/Collapsible";
-import { Response } from "@/components/ai-elements/response";
+import { Response } from "@/components/composites/response";
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay";
 import type { ToolCall } from "@/components/composites/ToolCallDisplay";
 
@@ -14,6 +14,8 @@ export interface ReasoningDisplayProps {
   isStreaming?: boolean;
   content?: string;
   onToolAction?: (toolCall: ToolCall, action: string) => void;
+  defaultOpen?: boolean;
+  children?: React.ReactNode;
 }
 
 export const ReasoningDisplay = ({
@@ -21,11 +23,13 @@ export const ReasoningDisplay = ({
   isStreaming = false,
   content,
   onToolAction,
+  defaultOpen = false,
+  children,
 }: ReasoningDisplayProps) => {
-  if (items.length === 0 && !content) return null;
+  if (items.length === 0 && !content && !children) return null;
 
   return (
-    <Reasoning isStreaming={isStreaming} defaultOpen={false}>
+    <Reasoning isStreaming={isStreaming} defaultOpen={defaultOpen}>
       <ReasoningTrigger />
       <CollapsibleContent
         className="mt-4 flex flex-col gap-2 data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
@@ -39,6 +43,7 @@ export const ReasoningDisplay = ({
           {items.map((item) => (
             <ToolCallDisplay key={item.id} toolCall={item} onToolAction={onToolAction} />
           ))}
+          {children}
         </div>
       </CollapsibleContent>
     </Reasoning>

package/components/composites/SessionHeader/SessionHeader.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SessionHeader } from "./SessionHeader";
+import { fn } from "@storybook/test";
+
+/**
+ * SessionHeader Composite Stories
+ *
+ * The SessionHeader displays the current active session title and provides
+ * actions to start a new session or view previous sessions.
+ */
+const meta = {
+  title: "Composites/SessionHeader",
+  component: SessionHeader,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+  args: {
+    onNewSession: fn(),
+    onCloseSession: fn(),
+    onSelectSession: fn(),
+  }
+} satisfies Meta<typeof SessionHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockSessions = [
+  { id: "1", title: "Debug Authentication Flow", created_at: "2026-07-01T10:00:00Z" },
+  { id: "2", title: "Refactor Database Queries", created_at: "2026-07-02T14:30:00Z" },
+  { id: "3", title: "Update Dependencies", created_at: "2026-07-03T09:15:00Z" },
+];
+
+/**
+ * Default usage with an active session
+ */
+export const Default: Story = {
+  args: {
+    activeSessionId: "1",
+    sessions: mockSessions,
+  },
+};
+
+/**
+ * Usage when there are no active or past sessions
+ */
+export const EmptyState: Story = {
+  args: {
+    activeSessionId: null,
+    sessions: [],
+  },
+};