ai-design-system 0.1.54 → 0.1.57

package/components/ai-elements/reasoning.tsx

@@ -22,7 +22,7 @@ type ReasoningContextValue = {
 
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
 
-const useReasoning = () => {
+export const useReasoning = () => {
   const context = useContext(ReasoningContext);
   if (!context) {
     throw new Error("Reasoning components must be used within Reasoning");
@@ -124,14 +124,14 @@ export const Reasoning = memo(
 
 export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
 
-const getThinkingMessage = (isStreaming: boolean, duration?: number) => {
-  if (isStreaming || duration === 0) {
+export const getThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming) {
     return <Shimmer duration={1}>Thinking...</Shimmer>;
   }
-  if (duration === undefined) {
-    return <p>Thought for a few seconds</p>;
+  if (duration === undefined || duration === 0) {
+    return <span>Thought for a few seconds</span>;
   }
-  return <p>Thought for {duration} seconds</p>;
+  return <span>Thought for {duration} seconds</span>;
 };
 
 export const ReasoningTrigger = memo(

package/components/blocks/AIConversation/AIConversation.tsx

@@ -11,6 +11,7 @@ import { UserMessage } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
+import { ReasoningDisplay } from "@/components/composites/ReasoningDisplay"
 import { ApprovalCard } from "@/components/composites/ApprovalCard"
 
 /**
@@ -127,28 +128,49 @@ export const AIConversation = React.memo<AIConversationProps>(
 
             // Filter tool calls that aren't "task" type (those become sub-agents)
             // Also completely hide "ask_user" and "ask_question" tools so they are ONLY rendered in the prompt input area
-            const directToolCalls =
+            const allToolCalls =
               message.toolCalls?.filter(
                 (tc) => tc.name !== "task" && tc.name !== "ask_user"
               ) || []
 
+            // Split into reasoning tools (shown collapsed) and direct tools (shown normally)
+            const reasoningCalls = allToolCalls.filter((tc) => tc.visibility === "reasoning")
+            const directToolCalls = allToolCalls.filter((tc) => tc.visibility !== "reasoning")
+
             const hasContent = contentStr.trim() !== ""
-            if (!hasContent && directToolCalls.length === 0 && subAgents.length === 0 && !message.isLoading) {
+            const hasReasoning = reasoningCalls.length > 0
+            const reasoningText = hasReasoning ? contentStr : undefined
+            const displayContentStr = hasReasoning ? "" : contentStr
+            const hasDisplayContent = displayContentStr.trim() !== ""
+
+            if (!hasDisplayContent && directToolCalls.length === 0 && reasoningCalls.length === 0 && subAgents.length === 0 && !message.isLoading) {
               return null;
             }
 
+            const isStreaming = reasoningCalls.some((tc) => tc.status === "pending")
+
             return (
               <OrchestratorMessage
                 key={message.id}
                 message={{
                   id: message.id,
-                  content: contentStr,
+                  content: displayContentStr,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
-                  isLoading: message.isLoading,
+                  isLoading: message.isLoading && !hasReasoning,
                 }}
-                showAvatar={showAvatars}
+                showAvatar={showAvatars && hasDisplayContent}
               >
+                {/* Render reasoning-section for hidden tool results */}
+                {hasReasoning && (
+                  <ReasoningDisplay 
+                    content={reasoningText} 
+                    items={reasoningCalls} 
+                    isStreaming={isStreaming} 
+                    onToolAction={onToolAction}
+                  />
+                )}
+
                 {/* Render direct tool calls */}
                 {directToolCalls.map((tc) => (
                   <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />

package/components/composites/AppHeader/AppHeader.tsx

@@ -2,6 +2,8 @@ import * as React from "react"
 import { SidebarTrigger } from "@/components/primitives/Sidebar"
 import { Separator } from "@/components/primitives/Separator"
 import { Tabs, TabsList, TabsTrigger } from "@/components/primitives/Tabs"
+import { ChatToggleButton } from "@/components/composites/ChatToggleButton"
+import { WorkflowSwitcher } from "@/components/composites/WorkflowSwitcher"
 import type { AppHeaderProps } from "./interfaces"
 
 export const AppHeader = React.memo<AppHeaderProps>(({ 
@@ -13,14 +15,16 @@ export const AppHeader = React.memo<AppHeaderProps>(({
   className,
   tabsPosition = 'center',
   showSidebarToggle = true,
-  showTitle = true 
+  showTitle = true,
+  workflowSwitcherProps,
+  chatToggleProps
 }) => {
   return (
     <header className={`flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`}>
       <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
         <div className="min-w-0 flex items-center gap-1 lg:gap-2">
           {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
-          {showSidebarToggle && showTitle && title && (
+          {showSidebarToggle && (showTitle && title || workflowSwitcherProps || chatToggleProps) && (
             <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
           )}
           {showTitle && title && (
@@ -28,6 +32,8 @@ export const AppHeader = React.memo<AppHeaderProps>(({
               ? <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>
               : title
           )}
+          {chatToggleProps && <ChatToggleButton {...chatToggleProps} />}
+          {workflowSwitcherProps && <WorkflowSwitcher {...workflowSwitcherProps} />}
         </div>
 
         <div className="justify-self-center">

package/components/composites/AppHeader/interfaces.ts

@@ -1,4 +1,6 @@
 import type React from "react";
+import type { WorkflowSwitcherProps } from "@/components/composites/WorkflowSwitcher/WorkflowSwitcher";
+import type { ChatToggleButtonProps } from "@/components/composites/ChatToggleButton/ChatToggleButton";
 
 export interface TabItem {
   value: string;
@@ -15,4 +17,6 @@ export interface AppHeaderProps {
   className?: string;
   showSidebarToggle?: boolean;
   showTitle?: boolean;
+  workflowSwitcherProps?: WorkflowSwitcherProps;
+  chatToggleProps?: ChatToggleButtonProps;
 }

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -88,17 +88,36 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
     className,
   }) => {
     const [searchQuery, setSearchQuery] = React.useState("")
+    const [userExpanded, setUserExpanded] = React.useState<Set<string>>(defaultExpanded || new Set())
+
+    // Auto-expand parents when selectedPath changes
+    React.useEffect(() => {
+      if (selectedPath) {
+        const parts = selectedPath.split('/')
+        if (parts.length > 1) {
+          setUserExpanded(prev => {
+            const next = new Set(prev)
+            let currentPath = ''
+            for (let i = 0; i < parts.length - 1; i++) {
+              currentPath += (i === 0 ? '' : '/') + parts[i]
+              next.add(currentPath)
+            }
+            return next
+          })
+        }
+      }
+    }, [selectedPath])
 
     const filteredTree = React.useMemo(() => {
       return filterTree(tree, searchQuery)
     }, [tree, searchQuery])
 
-    const expandedPaths = React.useMemo(() => {
+    const activeExpanded = React.useMemo(() => {
       if (searchQuery) {
         return getAllFolderPaths(filteredTree)
       }
-      return defaultExpanded
-    }, [searchQuery, filteredTree, defaultExpanded])
+      return userExpanded
+    }, [searchQuery, filteredTree, userExpanded])
 
     return (
       <div className={cn("flex flex-col rounded-lg border bg-background", className)}>
@@ -130,7 +149,8 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
         <div className="p-2">
           <FileTree
             className="border-none bg-transparent"
-            defaultExpanded={expandedPaths}
+            expanded={activeExpanded}
+            onExpandedChange={setUserExpanded}
             selectedPath={selectedPath}
             onSelect={onSelect}
           >

package/components/composites/ReasoningDisplay/ReasoningDisplay.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ReasoningDisplay } from './ReasoningDisplay'
+
+const meta: Meta<typeof ReasoningDisplay> = {
+  title: 'Composites/ReasoningDisplay',
+  component: ReasoningDisplay,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof ReasoningDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    content: "Let me evaluate the user's request and read the necessary files to propose a solution.",
+    isStreaming: false,
+    items: [
+      {
+        id: 'tool_1',
+        name: 'read_file',
+        args: { file_path: '/workspace/src/main.tsx' },
+        result: 'import { App } from "./App"; ...',
+        status: 'completed',
+        visibility: 'reasoning',
+        uiVariant: 'link',
+        linkText: 'src/main.tsx',
+        linkAction: 'open-file',
+      },
+      {
+        id: 'tool_2',
+        name: 'read_file',
+        args: { file_path: '/workspace/src/App.tsx' },
+        result: 'export const App = () => <div>Hello</div>;',
+        status: 'completed',
+        visibility: 'reasoning',
+        uiVariant: 'link',
+        linkText: 'src/App.tsx',
+        linkAction: 'open-file',
+      }
+    ],
+  },
+}
+
+export const Streaming: Story = {
+  args: {
+    content: "I'll start by listing the directory contents...",
+    isStreaming: true,
+    items: [
+      {
+        id: 'tool_1',
+        name: 'list_dir',
+        args: { path: '/src' },
+        status: 'pending',
+        visibility: 'reasoning',
+      },
+    ],
+  },
+}
+
+export const OnlyTools: Story = {
+  args: {
+    isStreaming: false,
+    items: [
+      {
+        id: 'tool_1',
+        name: 'write_todos',
+        args: { todos: ['Fix layout', 'Update colors'] },
+        result: 'Todos written successfully.',
+        status: 'completed',
+        visibility: 'reasoning',
+      },
+    ],
+  },
+}

package/components/composites/ReasoningDisplay/ReasoningDisplay.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  Reasoning,
+  ReasoningTrigger,
+} from "@/components/ai-elements/reasoning";
+import { CollapsibleContent } from "@/components/primitives/Collapsible";
+import { Response } from "@/components/ai-elements/response";
+import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay";
+import type { ToolCall } from "@/components/composites/ToolCallDisplay";
+
+export interface ReasoningDisplayProps {
+  items: ToolCall[];
+  isStreaming?: boolean;
+  content?: string;
+  onToolAction?: (toolCall: ToolCall, action: string) => void;
+}
+
+export const ReasoningDisplay = ({
+  items,
+  isStreaming = false,
+  content,
+  onToolAction,
+}: ReasoningDisplayProps) => {
+  if (items.length === 0 && !content) return null;
+
+  return (
+    <Reasoning isStreaming={isStreaming} defaultOpen={false}>
+      <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"
+      >
+        {content && content.trim() && (
+          <div className="mb-4">
+            <Response className="grid gap-2">{content}</Response>
+          </div>
+        )}
+        <div className="flex flex-col gap-2">
+          {items.map((item) => (
+            <ToolCallDisplay key={item.id} toolCall={item} onToolAction={onToolAction} />
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Reasoning>
+  );
+};

package/components/composites/ReasoningDisplay/index.ts

@@ -0,0 +1,2 @@
+export { ReasoningDisplay } from './ReasoningDisplay'
+export type { ReasoningDisplayProps } from './ReasoningDisplay'

package/components/composites/ToolCallDisplay/ToolCallDisplay.tsx

@@ -21,6 +21,7 @@ export interface ToolCall {
   args: Record<string, unknown>
   result?: string
   status: "pending" | "completed" | "error"
+  visibility?: "visible" | "reasoning"
   uiVariant?: "default" | "link"
   linkText?: string
   linkAction?: string

package/components/composites/WorkflowSwitcher/WorkflowSwitcher.stories.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { WorkflowSwitcher } from "./WorkflowSwitcher"
+
+const meta: Meta<typeof WorkflowSwitcher> = {
+  title: "Composites/WorkflowSwitcher",
+  component: WorkflowSwitcher,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    workflows: [
+      { id: "1", name: "Alpha Workflow" },
+      { id: "2", name: "Beta Workflow" },
+      { id: "3", name: "Gamma Workflow" },
+    ],
+    currentWorkflowId: "1",
+    onSelectWorkflow: () => {},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WorkflowSwitcher>
+
+export const Default: Story = {}
+
+export const Empty: Story = {
+  args: {
+    workflows: [],
+    currentWorkflowId: undefined,
+  },
+}

package/components/composites/WorkflowSwitcher/WorkflowSwitcher.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Button } from "@/components/primitives/Button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/primitives/DropdownMenu"
+import { Icon } from "@/components/primitives/Icon"
+
+export interface WorkflowItem {
+  id: string
+  name: string
+}
+
+export interface WorkflowSwitcherProps {
+  workflows: WorkflowItem[]
+  currentWorkflowId?: string | null
+  onSelectWorkflow: (id: string) => void
+  className?: string
+}
+
+export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
+  ({ workflows, currentWorkflowId, onSelectWorkflow, className }) => {
+    const currentWorkflow = workflows.find((w) => w.id === currentWorkflowId)
+
+    return (
+      <div className={className}>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              className="h-9 border hover:bg-black/5 dark:hover:bg-white/5"
+              size="sm"
+              title="Select workflow"
+              variant="secondary"
+            >
+              <span className="truncate max-w-[150px]">
+                {currentWorkflow?.name ?? "Select Workflow"}
+              </span>
+              <Icon name="chevron-down" size="xs" className="ml-1 opacity-50 shrink-0" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {workflows.map((w) => (
+              <DropdownMenuItem
+                className="flex items-center justify-between"
+                key={w.id}
+                onClick={() => onSelectWorkflow(w.id)}
+              >
+                <span className="truncate pr-4">{w.name}</span>
+                {w.id === currentWorkflowId && <Icon name="check" size="sm" className="ml-auto shrink-0" />}
+              </DropdownMenuItem>
+            ))}
+            {workflows.length === 0 && (
+              <div className="px-2 py-1.5 text-sm text-muted-foreground text-center">
+                No workflows found
+              </div>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    )
+  }
+)
+
+WorkflowSwitcher.displayName = "WorkflowSwitcher"

package/components/composites/WorkflowSwitcher/index.ts

@@ -0,0 +1 @@
+export * from "./WorkflowSwitcher"

package/components/composites/WorkflowToolbar/WorkflowToolbar.tsx

@@ -115,11 +115,16 @@ export function WorkflowToolbar({
       {/* Left: workflow name text + version dropdown */}
       <div className="flex items-center gap-2">
         {/* Plain text title */}
-        <div className="flex h-9 items-center rounded-md border bg-secondary px-3 text-secondary-foreground">
-          <span className="truncate font-medium text-sm">
-            {workflowName || "Untitled Workflow"}
-          </span>
-        </div>
+        {
+          workflowName && (
+            <div className="flex h-9 items-center rounded-md border bg-secondary px-3 text-secondary-foreground">
+              <span className="truncate font-medium text-sm">
+                {workflowName || ""}
+              </span>
+            </div>
+          )
+        }
+
 
         {/* Version selector — only shown when versions are provided */}
         {versions && versions.length > 0 && (

package/components/composites/index.ts

@@ -9,6 +9,10 @@
 export { ToolCallDisplay } from './ToolCallDisplay'
 export type { ToolCallDisplayProps, ToolCall } from './ToolCallDisplay'
 
+// ReasoningDisplay Block
+export { ReasoningDisplay } from './ReasoningDisplay'
+export type { ReasoningDisplayProps } from './ReasoningDisplay'
+
 // AgentIndicator Block
 export { AgentIndicator } from './AgentIndicator'
 export type { AgentIndicatorProps, SubAgent } from './AgentIndicator'
@@ -186,3 +190,7 @@ export type { PromptInputBlockProps } from './PromptInput'
 // ChatToggleButton Composite
 export { ChatToggleButton } from './ChatToggleButton'
 export type { ChatToggleButtonProps } from './ChatToggleButton'
+
+// WorkflowSwitcher Composite
+export { WorkflowSwitcher } from './WorkflowSwitcher'
+export type { WorkflowSwitcherProps, WorkflowItem } from './WorkflowSwitcher'

package/components/index.ts

@@ -22,3 +22,5 @@ export type { ExternalToast, ToastT, ToasterProps } from 'sonner';
 
 // Utilities
 export { cn } from '@/lib/utils';
+export { WorkflowSwitcher } from './composites';
+export type { WorkflowSwitcherProps, WorkflowItem } from './composites';