ai-design-system 0.1.54 → 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"
 
 /**
@@ -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/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/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/dist/index.cjs

@@ -20,6 +20,7 @@ var useStickToBottom = require('use-stick-to-bottom');
 var radixUi = require('radix-ui');
 var shiki = require('shiki');
 var streamdown = require('streamdown');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -3407,6 +3408,202 @@ var OrchestratorMessage = React3__namespace.memo(
   }
 );
 OrchestratorMessage.displayName = "OrchestratorMessage";
+var ReasoningContext = React3.createContext(null);
+var useReasoning = () => {
+  const context = React3.useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+var AUTO_CLOSE_DELAY = 1e3;
+var MS_IN_S = 1e3;
+var Reasoning = React3.memo(
+  (_a) => {
+    var _b = _a, {
+      className,
+      isStreaming = false,
+      open,
+      defaultOpen = true,
+      onOpenChange,
+      duration: durationProp,
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "isStreaming",
+      "open",
+      "defaultOpen",
+      "onOpenChange",
+      "duration",
+      "children"
+    ]);
+    const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const [duration, setDuration] = reactUseControllableState.useControllableState({
+      prop: durationProp,
+      defaultProp: 0
+    });
+    const [hasAutoClosed, setHasAutoClosed] = React3.useState(false);
+    const [startTime, setStartTime] = React3.useState(null);
+    React3.useEffect(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          const timer = setTimeout(() => {
+            setStartTime(Date.now());
+          }, 0);
+          return () => clearTimeout(timer);
+        }
+      } else if (startTime !== null) {
+        const calculatedDuration = Math.ceil((Date.now() - startTime) / MS_IN_S);
+        const timer = setTimeout(() => {
+          setDuration(calculatedDuration);
+          setStartTime(null);
+        }, 0);
+        return () => clearTimeout(timer);
+      }
+      return void 0;
+    }, [isStreaming, startTime, setDuration]);
+    React3.useEffect(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+      return void 0;
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = (newOpen) => {
+      setIsOpen(newOpen);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ReasoningContext.Provider,
+      {
+        value: { isStreaming, isOpen, setIsOpen, duration },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Collapsible,
+          __spreadProps(__spreadValues({
+            className: cn("not-prose mb-4", className),
+            onOpenChange: handleOpenChange,
+            open: isOpen
+          }, props), {
+            children
+          })
+        )
+      }
+    );
+  }
+);
+var getThinkingMessage = (isStreaming, duration) => {
+  if (isStreaming) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Shimmer, { duration: 1, children: "Thinking..." });
+  }
+  if (duration === void 0 || duration === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Thought for a few seconds" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+    "Thought for ",
+    duration,
+    " seconds"
+  ] });
+};
+var ReasoningTrigger = React3.memo(
+  (_a) => {
+    var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsibleTrigger,
+      __spreadProps(__spreadValues({
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        )
+      }, props), {
+        children: children != null ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, { className: "size-4" }),
+          getThinkingMessage(isStreaming, duration),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ] })
+      })
+    );
+  }
+);
+var ReasoningContent = React3.memo(
+  (_a) => {
+    var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsibleContent,
+      __spreadProps(__spreadValues({
+        className: cn(
+          "mt-4 text-sm",
+          "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",
+          className
+        )
+      }, props), {
+        children: /* @__PURE__ */ jsxRuntime.jsx(Response, { className: "grid gap-2", children })
+      })
+    );
+  }
+);
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+var Collapsible2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(Collapsible, __spreadValues({}, props));
+    }
+  )
+);
+Collapsible2.displayName = "Collapsible";
+var CollapsibleTrigger2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger, __spreadValues({ ref }, props));
+    }
+  )
+);
+CollapsibleTrigger2.displayName = "CollapsibleTrigger";
+var CollapsibleContent2 = React3__namespace.memo(
+  React3__namespace.forwardRef(
+    (props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent, __spreadValues({ ref }, props));
+    }
+  )
+);
+CollapsibleContent2.displayName = "CollapsibleContent";
+var ReasoningDisplay = ({
+  items,
+  isStreaming = false,
+  content,
+  onToolAction
+}) => {
+  if (items.length === 0 && !content) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Reasoning, { isStreaming, defaultOpen: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ReasoningTrigger, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      CollapsibleContent2,
+      {
+        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",
+        children: [
+          content && content.trim() && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Response, { className: "grid gap-2", children: content }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallDisplay, { toolCall: item, onToolAction }, item.id)) })
+        ]
+      }
+    )
+  ] });
+};
 var AIConversation = React3__namespace.memo(
   (_a) => {
     var _b = _a, {
@@ -3458,25 +3655,41 @@ var AIConversation = React3__namespace.memo(
         }
         if (message.role === "orchestrator") {
           const subAgents = message.subAgents || [];
-          const directToolCalls = ((_a2 = message.toolCalls) == null ? void 0 : _a2.filter(
+          const allToolCalls = ((_a2 = message.toolCalls) == null ? void 0 : _a2.filter(
             (tc) => tc.name !== "task" && tc.name !== "ask_user"
           )) || [];
-          const hasContent = contentStr.trim() !== "";
-          if (!hasContent && directToolCalls.length === 0 && subAgents.length === 0 && !message.isLoading) {
+          const reasoningCalls = allToolCalls.filter((tc) => tc.visibility === "reasoning");
+          const directToolCalls = allToolCalls.filter((tc) => tc.visibility !== "reasoning");
+          contentStr.trim() !== "";
+          const hasReasoning = reasoningCalls.length > 0;
+          const reasoningText = hasReasoning ? contentStr : void 0;
+          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 /* @__PURE__ */ jsxRuntime.jsxs(
             OrchestratorMessage,
             {
               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,
               children: [
+                hasReasoning && /* @__PURE__ */ jsxRuntime.jsx(
+                  ReasoningDisplay,
+                  {
+                    content: reasoningText,
+                    items: reasoningCalls,
+                    isStreaming,
+                    onToolAction
+                  }
+                ),
                 directToolCalls.map((tc) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallDisplay, { toolCall: tc, onToolAction }, tc.id)),
                 subAgents.map((subAgent) => /* @__PURE__ */ jsxRuntime.jsx(
                   SpecialistMessage,
@@ -6475,30 +6688,6 @@ var ChartLegendContent2 = React3__namespace.memo(
   })
 );
 ChartLegendContent2.displayName = "ChartLegendContent";
-var Collapsible2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(Collapsible, __spreadValues({}, props));
-    }
-  )
-);
-Collapsible2.displayName = "Collapsible";
-var CollapsibleTrigger2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger, __spreadValues({ ref }, props));
-    }
-  )
-);
-CollapsibleTrigger2.displayName = "CollapsibleTrigger";
-var CollapsibleContent2 = React3__namespace.memo(
-  React3__namespace.forwardRef(
-    (props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent, __spreadValues({ ref }, props));
-    }
-  )
-);
-CollapsibleContent2.displayName = "CollapsibleContent";
 var Drawer = (_a) => {
   var _b = _a, {
     shouldScaleBackground = true
@@ -10824,15 +11013,32 @@ var FileTreeExplorer = React3__namespace.memo(
     className
   }) => {
     const [searchQuery, setSearchQuery] = React3__namespace.useState("");
+    const [userExpanded, setUserExpanded] = React3__namespace.useState(defaultExpanded || /* @__PURE__ */ new Set());
+    React3__namespace.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 = React3__namespace.useMemo(() => {
       return filterTree(tree, searchQuery);
     }, [tree, searchQuery]);
-    const expandedPaths = React3__namespace.useMemo(() => {
+    const activeExpanded = React3__namespace.useMemo(() => {
       if (searchQuery) {
         return getAllFolderPaths(filteredTree);
       }
-      return defaultExpanded;
-    }, [searchQuery, filteredTree, defaultExpanded]);
+      return userExpanded;
+    }, [searchQuery, filteredTree, userExpanded]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col rounded-lg border bg-background", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 border-b px-3 py-2", headerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
@@ -10871,7 +11077,8 @@ var FileTreeExplorer = React3__namespace.memo(
         FileTree,
         {
           className: "border-none bg-transparent",
-          defaultExpanded: expandedPaths,
+          expanded: activeExpanded,
+          onExpandedChange: setUserExpanded,
           selectedPath,
           onSelect,
           children: renderTree(filteredTree)