@townco/ui 0.1.68 → 0.1.69

package/dist/gui/lib/motion.js

@@ -0,0 +1,217 @@
+/**
+ * Motion utilities and reusable animation variants for the UI package
+ * Provides consistent animation behavior across components
+ */
+// ============================================================================
+// Standard Durations
+// ============================================================================
+export const motionDuration = {
+    fast: 0.15,
+    normal: 0.25,
+    slow: 0.4,
+};
+// ============================================================================
+// Standard Easings
+// ============================================================================
+export const motionEasing = {
+    // Smooth, natural easing
+    smooth: [0.25, 0.1, 0.25, 1],
+    // Bouncy, playful easing
+    bounce: [0.68, -0.55, 0.265, 1.55],
+    // Sharp, snappy easing
+    sharp: [0.4, 0, 0.2, 1],
+    // Gentle, subtle easing
+    gentle: [0.25, 0.46, 0.45, 0.94],
+};
+// ============================================================================
+// Fade Variants
+// ============================================================================
+export const fadeInVariants = {
+    hidden: {
+        opacity: 0,
+    },
+    visible: {
+        opacity: 1,
+    },
+};
+export const fadeInUpVariants = {
+    hidden: {
+        opacity: 0,
+        y: 8,
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+    },
+};
+// ============================================================================
+// Expand/Collapse Variants
+// ============================================================================
+export const expandCollapseVariants = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        overflow: "hidden",
+    },
+    expanded: {
+        height: "auto",
+        opacity: 1,
+        overflow: "visible",
+    },
+};
+export const slideDownVariants = {
+    hidden: {
+        opacity: 0,
+        height: 0,
+        y: -4,
+    },
+    visible: {
+        opacity: 1,
+        height: "auto",
+        y: 0,
+    },
+};
+// ============================================================================
+// Shimmer Effect
+// ============================================================================
+export const shimmerTransition = {
+    duration: 2,
+    ease: "linear",
+    repeat: Infinity,
+    repeatType: "loop",
+};
+// For shimmer, we'll use a background gradient that shifts
+export const shimmerVariants = {
+    idle: {
+        backgroundPosition: "200% 0",
+    },
+    active: {
+        backgroundPosition: "-200% 0",
+    },
+};
+// ============================================================================
+// Scale Variants
+// ============================================================================
+export const scaleInVariants = {
+    hidden: {
+        scale: 0.95,
+        opacity: 0,
+    },
+    visible: {
+        scale: 1,
+        opacity: 1,
+    },
+};
+export const pulseVariants = {
+    idle: {
+        scale: 1,
+    },
+    pulse: {
+        scale: [1, 1.05, 1],
+    },
+};
+// ============================================================================
+// Rotation Variants
+// ============================================================================
+export const rotateVariants = {
+    collapsed: {
+        rotate: 0,
+    },
+    expanded: {
+        rotate: 180,
+    },
+};
+// ============================================================================
+// Standard Transitions
+// ============================================================================
+export const standardTransition = {
+    duration: motionDuration.normal,
+    ease: motionEasing.smooth,
+};
+export const fastTransition = {
+    duration: motionDuration.fast,
+    ease: motionEasing.sharp,
+};
+export const slowTransition = {
+    duration: motionDuration.slow,
+    ease: motionEasing.gentle,
+};
+export const springTransition = {
+    type: "spring",
+    stiffness: 300,
+    damping: 30,
+};
+export const gentleSpringTransition = {
+    type: "spring",
+    stiffness: 200,
+    damping: 25,
+};
+// ============================================================================
+// Layout Transition (for shared layout animations)
+// ============================================================================
+export const layoutTransition = {
+    layout: {
+        duration: motionDuration.normal,
+        ease: motionEasing.smooth,
+    },
+};
+// ============================================================================
+// Stagger Configurations
+// ============================================================================
+export const staggerChildren = {
+    visible: {
+        transition: {
+            staggerChildren: 0.05,
+        },
+    },
+};
+export const staggerChildrenFast = {
+    visible: {
+        transition: {
+            staggerChildren: 0.03,
+        },
+    },
+};
+// ============================================================================
+// Slide Variants (for panels and drawers)
+// ============================================================================
+export const slideInFromRightVariants = {
+    hidden: {
+        x: "100%",
+        opacity: 0,
+    },
+    visible: {
+        x: 0,
+        opacity: 1,
+    },
+};
+export const slideOutToRightVariants = {
+    visible: {
+        x: 0,
+        opacity: 1,
+    },
+    hidden: {
+        x: "100%",
+        opacity: 0,
+    },
+};
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Get transition with reduced motion consideration
+ */
+export function getTransition(shouldReduceMotion, transition = standardTransition) {
+    if (shouldReduceMotion) {
+        return {
+            duration: 0.01,
+        };
+    }
+    return transition;
+}
+/**
+ * Get duration with reduced motion consideration
+ */
+export function getDuration(shouldReduceMotion, duration = motionDuration.normal) {
+    return shouldReduceMotion ? 0.01 : duration;
+}

package/dist/sdk/schemas/session.d.ts

@@ -4,10 +4,10 @@ import { z } from "zod";
  */
 export declare const SessionStatus: z.ZodEnum<{
     error: "error";
+    active: "active";
     idle: "idle";
     connecting: "connecting";
     connected: "connected";
-    active: "active";
     streaming: "streaming";
     disconnected: "disconnected";
 }>;
@@ -41,10 +41,10 @@ export declare const Session: z.ZodObject<{
     id: z.ZodString;
     status: z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>;
@@ -117,10 +117,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;
@@ -178,6 +178,11 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
         title: z.ZodString;
         prettyName: z.ZodOptional<z.ZodString>;
         icon: z.ZodOptional<z.ZodString>;
+        verbiage: z.ZodOptional<z.ZodObject<{
+            active: z.ZodString;
+            past: z.ZodString;
+            paramKey: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
         subline: z.ZodOptional<z.ZodString>;
         kind: z.ZodEnum<{
             read: "read";
@@ -349,10 +354,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;
@@ -556,10 +561,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;
@@ -621,10 +626,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;

package/dist/sdk/transports/types.d.ts

@@ -7,6 +7,11 @@ export interface AgentToolInfo {
     description?: string;
     prettyName?: string;
     icon?: string;
+    verbiage?: {
+        active: string;
+        past: string;
+        paramKey?: string;
+    };
 }
 /**
  * Agent MCP (Model Context Protocol) server information

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,11 +49,12 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@townco/core": "0.0.46",
+    "@townco/core": "0.0.47",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "bun": "^1.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.25",
     "lucide-react": "^0.552.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
@@ -66,18 +67,18 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.65",
+    "@townco/tsconfig": "0.1.66",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",
-    "react": "^19.2.0",
+    "react": "19.2.1",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "ink": "^5.1.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "ink": "^6.4.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "peerDependenciesMeta": {
     "react": {

package/src/styles/global.css

@@ -47,6 +47,14 @@
   --color-text-primary: var(--text-primary);
   --color-text-secondary: var(--text-secondary);
   --color-text-tertiary: var(--text-tertiary);
+  
+  /* Sidebar colors */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 
   /* Layout widths - max-width utilities */
   --max-width-chat: 720px;
@@ -149,8 +157,16 @@
   
   /* Text colors from design system */
   --text-primary: var(--color-neutral-900);
-  --text-secondary: var(--color-neutral-600);
+  --text-secondary: var(--color-neutral-700);
   --text-tertiary: var(--color-neutral-500);
+  
+  /* Sidebar colors */
+  --sidebar: var(--color-neutral-50);
+  --sidebar-foreground: var(--color-neutral-950);
+  --sidebar-accent: var(--color-neutral-100);
+  --sidebar-accent-foreground: var(--color-neutral-900);
+  --sidebar-border: var(--color-neutral-200);
+  --sidebar-ring: var(--color-neutral-900);
 }
 
 .dark {
@@ -194,6 +210,14 @@
   --text-primary: var(--color-neutral-50);
   --text-secondary: var(--color-neutral-400);
   --text-tertiary: var(--color-neutral-500);
+  
+  /* Sidebar colors (dark mode) */
+  --sidebar: var(--color-neutral-900);
+  --sidebar-foreground: var(--color-neutral-50);
+  --sidebar-accent: var(--color-neutral-800);
+  --sidebar-accent-foreground: var(--color-neutral-50);
+  --sidebar-border: var(--color-neutral-800);
+  --sidebar-ring: var(--color-neutral-300);
 }
 
 @layer base {
@@ -417,3 +441,106 @@
 .animate-pulse-scale {
   animation: pulse-scale 1s ease-in-out infinite;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 200ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    max-height: 500px;
+    transform: translateY(0);
+  }
+}
+
+.animate-slideDown {
+  animation: slideDown 250ms ease-out;
+}
+
+@keyframes collapseUp {
+  from {
+    opacity: 1;
+    max-height: 500px;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.animate-collapseUp {
+  animation: collapseUp 200ms ease-in;
+}
+
+@keyframes pulse-subtle {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+@keyframes typing {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.animate-typing {
+  animation: typing 1.4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.5) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+.dark .animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+}

package/dist/gui/components/InvokingGroup.d.ts

@@ -1,9 +0,0 @@
-import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
-export interface InvokingGroupProps {
-    toolCalls: ToolCallType[];
-}
-/**
- * InvokingGroup component - displays a group of preliminary (invoking) tool calls
- * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
- */
-export declare function InvokingGroup({ toolCalls }: InvokingGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/InvokingGroup.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ListVideo } from "lucide-react";
-import React from "react";
-/**
- * InvokingGroup component - displays a group of preliminary (invoking) tool calls
- * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
- */
-export function InvokingGroup({ toolCalls }) {
-    // Get unique display names for the summary
-    const displayNames = toolCalls.map((tc) => tc.prettyName || tc.title);
-    const uniqueNames = [...new Set(displayNames)];
-    const summary = uniqueNames.length <= 2
-        ? uniqueNames.join(", ")
-        : `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
-    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-paragraph-sm text-muted-foreground/50", children: [_jsx(ListVideo, { className: "h-3 w-3" }), _jsx("span", { children: "Invoking parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/50", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground/50 pl-4.5", children: summary })] }));
-}

package/dist/gui/components/SubagentStream.d.ts

@@ -1,23 +0,0 @@
-export interface SubagentStreamProps {
-    /** Sub-agent HTTP port */
-    port: number;
-    /** Sub-agent session ID */
-    sessionId: string;
-    /** Optional host (defaults to localhost) */
-    host?: string;
-    /** Parent tool call status - use this to determine if sub-agent is running */
-    parentStatus?: "pending" | "in_progress" | "completed" | "failed";
-    /** Sub-agent name (for display) */
-    agentName?: string | undefined;
-    /** Query sent to the sub-agent */
-    query?: string | undefined;
-}
-/**
- * SubagentStream component - displays streaming content from a sub-agent.
- *
- * This component:
- * - Connects directly to the sub-agent's SSE endpoint
- * - Displays streaming text and tool calls
- * - Renders in a collapsible section (collapsed by default)
- */
-export declare function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }: SubagentStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubagentStream.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, CircleDot, Loader2 } from "lucide-react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
-const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
-/**
- * SubagentStream component - displays streaming content from a sub-agent.
- *
- * This component:
- * - Connects directly to the sub-agent's SSE endpoint
- * - Displays streaming text and tool calls
- * - Renders in a collapsible section (collapsed by default)
- */
-export function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }) {
-    const [isExpanded, setIsExpanded] = useState(false); // Start collapsed for parallel ops
-    const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
-    const [isNearBottom, setIsNearBottom] = useState(true);
-    const thinkingContainerRef = useRef(null);
-    const { messages, isStreaming: hookIsStreaming, error } = useSubagentStream({
-        port,
-        sessionId,
-        ...(host !== undefined ? { host } : {}),
-    });
-    // Use parent status as primary indicator, fall back to hook's streaming state
-    // Parent is "in_progress" means sub-agent is definitely still running
-    const isRunning = parentStatus === "in_progress" || parentStatus === "pending" || hookIsStreaming;
-    // Get the current/latest message
-    const currentMessage = messages[messages.length - 1];
-    const hasContent = currentMessage &&
-        (currentMessage.content ||
-            (currentMessage.toolCalls && currentMessage.toolCalls.length > 0));
-    // Auto-collapse Thinking when completed (so Output is the primary view)
-    const prevIsRunningRef = useRef(isRunning);
-    useEffect(() => {
-        if (prevIsRunningRef.current && !isRunning) {
-            // Just completed - collapse thinking to show output
-            setIsThinkingExpanded(false);
-        }
-        prevIsRunningRef.current = isRunning;
-    }, [isRunning]);
-    // Check if user is near bottom of scroll area
-    const checkScrollPosition = useCallback(() => {
-        const container = thinkingContainerRef.current;
-        if (!container)
-            return;
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        setIsNearBottom(distanceFromBottom < SCROLL_THRESHOLD);
-    }, []);
-    // Scroll to bottom
-    const scrollToBottom = useCallback(() => {
-        const container = thinkingContainerRef.current;
-        if (!container)
-            return;
-        container.scrollTop = container.scrollHeight;
-    }, []);
-    // Auto-scroll when content changes and user is near bottom
-    useEffect(() => {
-        if (isNearBottom && (isRunning || hasContent)) {
-            scrollToBottom();
-        }
-    }, [currentMessage?.content, currentMessage?.toolCalls, isNearBottom, isRunning, hasContent, scrollToBottom]);
-    // Set up scroll listener
-    useEffect(() => {
-        const container = thinkingContainerRef.current;
-        if (!container)
-            return;
-        const handleScroll = () => checkScrollPosition();
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        checkScrollPosition(); // Check initial position
-        return () => container.removeEventListener("scroll", handleScroll);
-    }, [checkScrollPosition, isThinkingExpanded, isExpanded]);
-    // Get last line of streaming content for preview
-    const lastLine = currentMessage?.content
-        ? currentMessage.content.split("\n").filter(Boolean).pop() || ""
-        : "";
-    const previewText = lastLine.length > 100 ? `${lastLine.slice(0, 100)}...` : lastLine;
-    return (_jsxs("div", { children: [!isExpanded && (_jsx("button", { type: "button", onClick: () => setIsExpanded(true), className: "w-full max-w-md text-left cursor-pointer bg-transparent border-none p-0", children: previewText ? (_jsx("p", { className: `text-paragraph-sm text-muted-foreground truncate ${isRunning ? "animate-pulse" : ""}`, children: previewText })) : isRunning ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 italic animate-pulse", children: "Waiting for response..." })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Thinking" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.toolCalls &&
-                                                currentMessage.toolCalls.length > 0 && (_jsx("div", { className: "space-y-1", children: currentMessage.toolCalls.map((tc) => (_jsx(SubagentToolCallItem, { toolCall: tc }, tc.id))) })), currentMessage.content && (_jsxs("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono", children: [currentMessage.content, currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2", children: currentMessage.content })] }))] }))] }));
-}
-/**
- * Simple tool call display for sub-agent tool calls
- */
-function SubagentToolCallItem({ toolCall }) {
-    const statusIcon = {
-        pending: "...",
-        in_progress: "",
-        completed: "",
-        failed: "",
-    }[toolCall.status];
-    const statusColor = {
-        pending: "text-muted-foreground",
-        in_progress: "text-blue-500",
-        completed: "text-green-500",
-        failed: "text-destructive",
-    }[toolCall.status];
-    return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [_jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
-}

package/dist/gui/components/ToolCall.d.ts

@@ -1,8 +0,0 @@
-import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
-export interface ToolCallProps {
-    toolCall: ToolCallType;
-}
-/**
- * ToolCall component - displays a single tool call with collapsible details
- */
-export declare function ToolCall({ toolCall }: ToolCallProps): import("react/jsx-runtime").JSX.Element;