ai-design-system 0.1.53 → 0.1.56

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"
 
 /**
@@ -61,6 +62,10 @@ export interface AIConversationProps
     description?: string
     icon?: React.ReactNode
   }
+  /**
+   * Callback fired when a tool action (like a link click) is triggered
+   */
+  onToolAction?: (toolCall: ToolCall, action: string) => void
 }
 
 /**
@@ -73,6 +78,7 @@ export const AIConversation = React.memo<AIConversationProps>(
     onSelectSubAgent,
     selectedSubAgent,
     emptyState,
+    onToolAction,
     ...conversationProps
   }) => {
     const isEmpty = React.useMemo(
@@ -122,31 +128,52 @@ 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} />
+                  <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
                 ))}
 
                 {/* Render specialist sub-agents */}

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -41,6 +41,40 @@ function renderTree(nodes: FileTreeNode[]): React.ReactNode {
   })
 }
 
+function filterTree(nodes: FileTreeNode[], query: string): FileTreeNode[] {
+  if (!query) return nodes;
+  const lowerQuery = query.toLowerCase();
+
+  return nodes.reduce<FileTreeNode[]>((acc, node) => {
+    if (node.type === 'file') {
+      if (node.name.toLowerCase().includes(lowerQuery)) {
+        acc.push(node);
+      }
+    } else if (node.type === 'folder' && node.children) {
+      const filteredChildren = filterTree(node.children, query);
+      // Keep the folder if it matches the query itself, or if any of its children match
+      if (node.name.toLowerCase().includes(lowerQuery) || filteredChildren.length > 0) {
+        acc.push({ ...node, children: filteredChildren });
+      }
+    }
+    return acc;
+  }, []);
+}
+
+function getAllFolderPaths(nodes: FileTreeNode[]): Set<string> {
+  const paths = new Set<string>();
+  function traverse(n: FileTreeNode[]) {
+    for (const node of n) {
+      if (node.type === 'folder') {
+        paths.add(node.path);
+        if (node.children) traverse(node.children);
+      }
+    }
+  }
+  traverse(nodes);
+  return paths;
+}
+
 export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
   ({
     tree,
@@ -53,6 +87,38 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
     headerClassName,
     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 activeExpanded = React.useMemo(() => {
+      if (searchQuery) {
+        return getAllFolderPaths(filteredTree)
+      }
+      return userExpanded
+    }, [searchQuery, filteredTree, userExpanded])
+
     return (
       <div className={cn("flex flex-col rounded-lg border bg-background", className)}>
         <div className={cn("flex items-center gap-2 border-b px-3 py-2", headerClassName)}>
@@ -64,6 +130,8 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
             />
             <Input
               placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
               className="pl-8"
             />
           </div>
@@ -80,11 +148,13 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
         </div>
         <div className="p-2">
           <FileTree
-            defaultExpanded={defaultExpanded}
+            className="border-none bg-transparent"
+            expanded={activeExpanded}
+            onExpandedChange={setUserExpanded}
             selectedPath={selectedPath}
             onSelect={onSelect}
           >
-            {renderTree(tree)}
+            {renderTree(filteredTree)}
           </FileTree>
         </div>
       </div>

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

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Icon } from "@/components/primitives/Icon"
 import {
   Tool,
   ToolHeader,
@@ -20,6 +21,10 @@ export interface ToolCall {
   args: Record<string, unknown>
   result?: string
   status: "pending" | "completed" | "error"
+  visibility?: "visible" | "reasoning"
+  uiVariant?: "default" | "link"
+  linkText?: string
+  linkAction?: string
 }
 
 export interface ToolCallDisplayProps {
@@ -31,13 +36,17 @@ export interface ToolCallDisplayProps {
    * Whether the tool call is initially expanded
    */
   defaultExpanded?: boolean
+  /**
+   * Callback fired when a tool action (like a link click) is triggered
+   */
+  onToolAction?: (toolCall: ToolCall, action: string) => void
 }
 
 /**
  * ToolCallDisplay component - displays tool execution with expandable details
  */
 export const ToolCallDisplay = React.memo<ToolCallDisplayProps>(
-  ({ toolCall, defaultExpanded = false }) => {
+  ({ toolCall, defaultExpanded = false, onToolAction }) => {
     const [isExpanded, setIsExpanded] = React.useState(defaultExpanded)
 
     const { name, args, result, status } = React.useMemo(() => {
@@ -78,6 +87,26 @@ export const ToolCallDisplay = React.memo<ToolCallDisplayProps>(
       }
     }, [status])
 
+    if (toolCall.uiVariant === "link") {
+      return (
+        <div 
+          className="flex items-center gap-2 p-3 my-2 rounded-md border bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (toolCall.linkAction && onToolAction) {
+              onToolAction(toolCall, toolCall.linkAction);
+            }
+          }}
+        >
+          <Icon name="external-link" className="size-4 text-blue-500" />
+          <span className="font-medium text-sm text-blue-500 hover:underline">
+            {toolCall.linkText || `${name} Action`}
+          </span>
+        </div>
+      )
+    }
+
     return (
       <Tool open={isExpanded} onOpenChange={setIsExpanded}>
         <ToolHeader

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'

package/components/features/AIDocEditor/AIDocEditor.tsx

@@ -103,6 +103,8 @@ export interface AIDocEditorMultiTabProps {
   onTabClose?: (documentId: string) => void
   /** Optional completely separate file tree to show all available files in the explorer (even closed ones). If not provided, it falls back to showing only the currently open documents. */
   fileTree?: FileTreeNode[]
+  /** When true, hides the document tab bar — useful for single-file mode where the file tree provides navigation. */
+  hideTabBar?: boolean
 }
 
 /**
@@ -273,60 +275,70 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
     /**
      * Multi-tab mode
      */
+    const { hideTabBar } = props as AIDocEditorMultiTabProps
+
+    let editorPane: React.ReactNode
+
     if (!currentDocument) {
-      return (
-        <div className={cn('ai-doc-editor flex flex-col flex-1 h-screen w-full', className)}>
-          <DocumentTabBar
-            tabs={props.documents?.map((doc) => doc.file) || []}
-            activeTabId={props.activeDocumentId}
-            onTabSelect={props.onTabSelect}
-            onTabClose={props.onTabClose}
-          />
+      editorPane = (
+        <div className="ai-doc-editor flex flex-col h-full w-full">
+          {!hideTabBar && (
+            <DocumentTabBar
+              className="w-full"
+              tabs={props.documents?.map((doc) => doc.file) || []}
+              activeTabId={props.activeDocumentId}
+              onTabSelect={props.onTabSelect}
+              onTabClose={props.onTabClose}
+            />
+          )}
           <div className="flex-1 flex items-center justify-center p-6 text-muted-foreground">
             No documents open
           </div>
         </div>
       )
-    }
+    } else {
+      const isMarkdownMulti = currentDocument.file.format === 'markdown'
 
-    const isMarkdownMulti = currentDocument.file.format === 'markdown'
-
-    const editorPane = (
-      <div className="ai-doc-editor flex flex-col h-full w-full">
-        <DocumentTabBar
-          className="w-full"
-          tabs={props.documents?.map((doc) => doc.file) || []}
-          activeTabId={props.activeDocumentId}
-          onTabSelect={props.onTabSelect}
-          onTabClose={props.onTabClose}
-        />
-        <div className="flex-1 overflow-auto">
-          {isMarkdownMulti ? (
-            <div className="p-6">
-              <Streamdown
-                mode="streaming"
-                isAnimating
-                className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
-              >
-                {currentDocument.content as string}
-              </Streamdown>
-            </div>
-          ) : (
-            <DocumentEditorWithComments
-              content={currentDocument.content}
-              format={currentDocument.file.format as 'json' | 'markdown' | undefined}
-              annotations={currentDocument.annotations}
-              currentUserId={currentUser.id}
-              currentUserName={currentUser.name}
-              readOnly={mode === 'readonly'}
-              onAnnotationAdd={handleAnnotationAdd}
-              onAnnotationUpdate={handleAnnotationUpdate}
-              className="p-6 h-full flex flex-col"
+      editorPane = (
+        <div className="ai-doc-editor flex flex-col h-full w-full">
+          {!hideTabBar && (
+            <DocumentTabBar
+              className="w-full"
+              tabs={props.documents?.map((doc) => doc.file) || []}
+              activeTabId={props.activeDocumentId}
+              onTabSelect={props.onTabSelect}
+              onTabClose={props.onTabClose}
             />
           )}
+          <div className="flex-1 overflow-auto">
+            {isMarkdownMulti ? (
+              <div className="p-6">
+                <Streamdown
+                  mode="streaming"
+                  isAnimating
+                  className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+                >
+                  {currentDocument.content as string}
+                </Streamdown>
+              </div>
+            ) : (
+              <DocumentEditorWithComments
+                content={currentDocument.content}
+                format={currentDocument.file.format as 'json' | 'markdown' | undefined}
+                annotations={currentDocument.annotations}
+                selectedAnnotationId={props.selectedAnnotationId}
+                currentUserId={currentUser.id}
+                currentUserName={currentUser.name}
+                readOnly={mode === 'readonly'}
+                onAnnotationAdd={handleAnnotationAdd}
+                onAnnotationUpdate={handleAnnotationUpdate}
+                className="ai-doc-editor p-6 min-h-full"
+              />
+            )}
+          </div>
         </div>
-      </div>
-    )
+      )
+    }
 
     return (
       <AdjustableLayout

package/components/features/AIDocEditor/useAIDocEditor.mock.ts

@@ -127,17 +127,12 @@ function useMultiTabDocEditorMockState(
 
   const closeDocument = useCallback((documentId: string) => {
     console.log('[Multi-Tab Mock] Closing document:', documentId)
-    setDocuments(prev => {
-      const filtered = prev.filter(doc => doc.file.id !== documentId)
-      if (activeDocumentId === documentId && filtered.length > 0) {
-        setActiveDocumentId(filtered[0].file.id)
-      }
-      if (filtered.length === 0) {
-        setActiveDocumentId(undefined)
-      }
-      return filtered
-    })
-  }, [activeDocumentId])
+    setDocuments(prev => prev.filter(doc => doc.file.id !== documentId))
+    if (activeDocumentId === documentId) {
+      const filtered = documents.filter(doc => doc.file.id !== documentId)
+      setActiveDocumentId(filtered.length > 0 ? filtered[0].file.id : undefined)
+    }
+  }, [activeDocumentId, documents])
 
   const switchDocument = useCallback((documentId: string) => {
     console.log('[Multi-Tab Mock] Switching to document:', documentId)

package/components/features/RefinementPanel/RefinementPanel.tsx

@@ -101,6 +101,10 @@ export interface RefinementPanelProps {
    * Additional CSS classes
    */
   className?: string;
+  /**
+   * Action handler for tool interactions
+   */
+  onToolAction?: (toolCall: ToolCall, action: string) => void;
 }
 
 /**
@@ -122,6 +126,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
     loading = false,
     placeholder = "Ask a question or describe a task...",
     className,
+    onToolAction,
   }) => {
     // File change queue state
     const [fileChangeState, setFileChangeState] = React.useState<
@@ -262,6 +267,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
         <AIConversation
           messages={messages}
           showAvatars={true}
+          onToolAction={onToolAction}
           className="flex-1 min-h-0"
         />
         <div className="sticky bottom-0 z-10 p-4 bg-gradient-to-t from-card via-card to-transparent pt-6">

package/components/features/RefinementPanel/useRefinementPanel.d.ts

@@ -11,6 +11,7 @@
 import type { RefinementMessage } from "./RefinementPanel";
 import type { FileChangeData } from "@/components/composites/FileQueue";
 import type { ActionRequest, ReviewConfig } from "@/components/composites/ApprovalCard";
+import type { ToolCall } from "@/components/composites/ToolCallDisplay";
 
 /**
  * Return type for the refinement panel hook
@@ -51,6 +52,9 @@ export interface UseRefinementPanelReturn {
 
   /** Processing state for HITL approval */
   isApprovalProcessing?: boolean;
+
+  /** Action handler for tool interactions */
+  handleToolAction?: (toolCall: ToolCall, action: string) => void;
 }
 
 /**

package/components/features/RefinementPanel/useRefinementPanel.mock.ts

@@ -3,6 +3,7 @@ import type { RefinementMessage } from "./RefinementPanel";
 import type { FileChangeData } from "@/components/composites/FileQueue";
 import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
 import type { ActionRequest, ReviewConfig } from "@/components/composites/ApprovalCard";
+import type { ToolCall } from "@/components/composites/ToolCallDisplay";
 import type { FormEvent } from "react";
 
 export interface UseRefinementPanelReturn {
@@ -19,6 +20,7 @@ export interface UseRefinementPanelReturn {
   handleApprovalReject?: (reason: string) => Promise<void>;
   handleApprovalEdit?: (editedArgs: Record<string, unknown>) => Promise<void>;
   isApprovalProcessing?: boolean;
+  handleToolAction?: (toolCall: ToolCall, action: string) => void;
 }
 
 export interface UseRefinementPanelOptions {
@@ -173,5 +175,6 @@ export function useRefinementPanelMock(
     handleApprovalReject: initialApprovalRequest ? handleApprovalReject : undefined,
     handleApprovalEdit: initialApprovalRequest ? handleApprovalEdit : undefined,
     isApprovalProcessing,
+    handleToolAction: (toolCall, action) => console.log(`[Mock Tool Action] ${action} on tool:`, toolCall),
   };
 }