listpage-next 0.0.271 → 0.0.273

package/dist/features/ChatClient/ui/TracePanel/TodoList.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Check, ChevronDown, ChevronUp, ListTodo, Loader2 } from "lucide-react";
+import { Container, Header, HeaderLeft, IconWrapper, ItemContent, ItemIconWrapper, List, ListContainer, ListItem, PendingDot, SimpleContainer, StatusIcon, Subtitle, Title, TitleWrapper, ToggleButton } from "./styles/TodoList.styles.js";
+const TodoList = ({ items, title = '待办事项', defaultCollapsed = false, className = '', simple = false })=>{
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const stats = useMemo(()=>{
+        const pending = items.filter((i)=>'pending' === i.status).length;
+        const inProgress = items.filter((i)=>'in_progress' === i.status).length;
+        const completed = items.filter((i)=>'completed' === i.status).length;
+        return {
+            pending,
+            inProgress,
+            completed
+        };
+    }, [
+        items
+    ]);
+    const totalPending = stats.pending + stats.inProgress;
+    const renderList = ()=>/*#__PURE__*/ jsx(List, {
+            children: items.map((item, index)=>{
+                const status = item.status;
+                return /*#__PURE__*/ jsxs(ListItem, {
+                    children: [
+                        /*#__PURE__*/ jsx(ItemIconWrapper, {
+                            children: /*#__PURE__*/ jsxs(StatusIcon, {
+                                $status: status,
+                                children: [
+                                    'completed' === status && /*#__PURE__*/ jsx(Check, {
+                                        size: 12,
+                                        strokeWidth: 3
+                                    }),
+                                    'in_progress' === status && /*#__PURE__*/ jsx(Loader2, {
+                                        size: 12,
+                                        className: "animate-spin"
+                                    }),
+                                    'pending' === status && /*#__PURE__*/ jsx(PendingDot, {})
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(ItemContent, {
+                            $status: status,
+                            children: item.content
+                        })
+                    ]
+                }, `${item.content}-${index}`);
+            })
+        });
+    if (simple) return /*#__PURE__*/ jsx(SimpleContainer, {
+        className: className,
+        children: renderList()
+    });
+    return /*#__PURE__*/ jsxs(Container, {
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxs(Header, {
+                onClick: ()=>setCollapsed((v)=>!v),
+                children: [
+                    /*#__PURE__*/ jsxs(HeaderLeft, {
+                        children: [
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                children: /*#__PURE__*/ jsx(ListTodo, {
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(TitleWrapper, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Title, {
+                                        children: title
+                                    }),
+                                    totalPending > 0 ? /*#__PURE__*/ jsxs(Subtitle, {
+                                        children: [
+                                            stats.inProgress > 0 ? `${stats.inProgress} 进行中 · ` : '',
+                                            stats.pending,
+                                            " 待办"
+                                        ]
+                                    }) : /*#__PURE__*/ jsx(Subtitle, {
+                                        $isCompleted: true,
+                                        children: "全部完成"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ToggleButton, {
+                        type: "button",
+                        "aria-label": collapsed ? '展开' : '折叠',
+                        children: collapsed ? /*#__PURE__*/ jsx(ChevronDown, {
+                            size: 16
+                        }) : /*#__PURE__*/ jsx(ChevronUp, {
+                            size: 16
+                        })
+                    })
+                ]
+            }),
+            !collapsed && /*#__PURE__*/ jsx(ListContainer, {
+                children: renderList()
+            })
+        ]
+    });
+};
+export { TodoList };

package/dist/features/ChatClient/ui/TracePanel/ToolCallList.d.ts

@@ -0,0 +1,8 @@
+import type { MessageCache } from './transform';
+interface ToolCallListProps {
+    tools: MessageCache['tool_calls'];
+    className?: string;
+    simple?: boolean;
+}
+export declare const ToolCallList: ({ tools, className, simple, }: ToolCallListProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/features/ChatClient/ui/TracePanel/ToolCallList.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, ChevronDown, ChevronUp, Clock, Loader2, Terminal } from "lucide-react";
+import { JsonEditor } from "../../../JsonEditor/index.js";
+import { Markdown } from "../Markdown/index.js";
+import { DataTable } from "./DataTable.js";
+import { Container, DetailsContainer, DetailsSection, Duration, ExpandIcon, Header, HeaderLeft, IconWrapper, Label, List, ListContainer, SimpleContainer, Subtitle, Title, TitleWrapper, ToggleButton, ToolHeader, ToolInfo, ToolItem, ToolMeta, ToolName } from "./styles/ToolCallList.styles.js";
+const toolCnName = {
+    list_table: '查询数据库中所有表',
+    describe_table: '查看数据库表的详情',
+    execute_sql: '执行SQL语句',
+    generate_chart: '生成可视化图表',
+    query_professional_thesaurus: '查询词条',
+    retrieve_fragments: '检索知识库中相关文档片段',
+    retrieve_full_docs: '检索知识库文档原文'
+};
+const ToolCallList = ({ tools, className = '', simple = false })=>{
+    const [collapsed, setCollapsed] = useState(false);
+    const [expandedTools, setExpandedTools] = useState({});
+    const toggleTool = (index)=>{
+        setExpandedTools((prev)=>({
+                ...prev,
+                [index]: !prev[index]
+            }));
+    };
+    if (!tools || 0 === tools.length) return null;
+    const renderList = ()=>/*#__PURE__*/ jsx(List, {
+            children: tools.map((tool, index)=>{
+                const isDone = !!tool.end_timestamp;
+                const duration = isDone && tool.end_timestamp ? tool.end_timestamp - tool.start_timestamp : null;
+                const isExpanded = expandedTools[index];
+                return /*#__PURE__*/ jsxs(ToolItem, {
+                    children: [
+                        /*#__PURE__*/ jsxs(ToolHeader, {
+                            onClick: ()=>toggleTool(index),
+                            children: [
+                                /*#__PURE__*/ jsxs(ToolInfo, {
+                                    children: [
+                                        isDone ? /*#__PURE__*/ jsx(Check, {
+                                            size: 14,
+                                            className: "text-emerald-600 shrink-0"
+                                        }) : /*#__PURE__*/ jsx(Loader2, {
+                                            size: 14,
+                                            className: "animate-spin text-blue-600 shrink-0"
+                                        }),
+                                        /*#__PURE__*/ jsx(ToolName, {
+                                            title: tool.name,
+                                            children: toolCnName[tool.name] || tool.name
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(ToolMeta, {
+                                    children: [
+                                        null !== duration && /*#__PURE__*/ jsxs(Duration, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(Clock, {
+                                                    size: 10
+                                                }),
+                                                duration,
+                                                "ms"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(ExpandIcon, {
+                                            children: isExpanded ? /*#__PURE__*/ jsx(ChevronUp, {
+                                                size: 14
+                                            }) : /*#__PURE__*/ jsx(ChevronDown, {
+                                                size: 14
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        isExpanded && /*#__PURE__*/ jsxs(DetailsContainer, {
+                            children: [
+                                /*#__PURE__*/ jsxs(DetailsSection, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Label, {
+                                            children: "输入"
+                                        }),
+                                        /*#__PURE__*/ jsx(JsonEditor, {
+                                            value: JSON.parse(tool.input)
+                                        })
+                                    ]
+                                }),
+                                isDone && /*#__PURE__*/ jsxs(DetailsSection, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Label, {
+                                            children: "输出"
+                                        }),
+                                        'execute_sql' === tool.name ? /*#__PURE__*/ jsx(DataTable, {
+                                            data: tool.output
+                                        }) : /*#__PURE__*/ jsx(Markdown, {
+                                            content: tool.output
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }, index);
+            })
+        });
+    if (simple) return /*#__PURE__*/ jsx(SimpleContainer, {
+        className: className,
+        children: renderList()
+    });
+    return /*#__PURE__*/ jsxs(Container, {
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxs(Header, {
+                onClick: ()=>setCollapsed((v)=>!v),
+                children: [
+                    /*#__PURE__*/ jsxs(HeaderLeft, {
+                        children: [
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                children: /*#__PURE__*/ jsx(Terminal, {
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(TitleWrapper, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Title, {
+                                        children: "工具调用"
+                                    }),
+                                    /*#__PURE__*/ jsxs(Subtitle, {
+                                        children: [
+                                            tools.length,
+                                            " 个操作"
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ToggleButton, {
+                        type: "button",
+                        "aria-label": collapsed ? '展开' : '折叠',
+                        children: collapsed ? /*#__PURE__*/ jsx(ChevronDown, {
+                            size: 16
+                        }) : /*#__PURE__*/ jsx(ChevronUp, {
+                            size: 16
+                        })
+                    })
+                ]
+            }),
+            !collapsed && /*#__PURE__*/ jsx(ListContainer, {
+                children: renderList()
+            })
+        ]
+    });
+};
+export { ToolCallList };

package/dist/features/ChatClient/ui/TracePanel/TracePanel.d.ts

@@ -0,0 +1,10 @@
+import { type TodoItem } from './TodoList';
+import type { MessageCache } from './transform';
+interface TraceLogProps {
+    data?: {
+        tool_calls?: MessageCache['tool_calls'];
+        todos?: TodoItem[];
+    };
+}
+export declare const TracePanel: ({ data }: TraceLogProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/ChatClient/ui/TracePanel/TracePanel.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ListTodo, Terminal } from "lucide-react";
+import { TodoList } from "./TodoList.js";
+import { ToolCallList } from "./ToolCallList.js";
+import { Badge, Container, Content, TabButton, TabHeader } from "./styles/TraceLog.styles.js";
+const TracePanel = ({ data })=>{
+    const { todos = [], tool_calls = [] } = data ?? {};
+    const [activeTab, setActiveTab] = useState('todos');
+    const tools = tool_calls.filter((tool)=>'write_todos' !== tool.name);
+    return /*#__PURE__*/ jsxs(Container, {
+        children: [
+            /*#__PURE__*/ jsxs(TabHeader, {
+                children: [
+                    /*#__PURE__*/ jsxs(TabButton, {
+                        onClick: ()=>setActiveTab('todos'),
+                        $isActive: 'todos' === activeTab,
+                        $type: "todos",
+                        children: [
+                            /*#__PURE__*/ jsx(ListTodo, {
+                                size: 14
+                            }),
+                            "待办事项",
+                            /*#__PURE__*/ jsx(Badge, {
+                                children: todos.length
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(TabButton, {
+                        onClick: ()=>setActiveTab('tools'),
+                        $isActive: 'tools' === activeTab,
+                        $type: "tools",
+                        children: [
+                            /*#__PURE__*/ jsx(Terminal, {
+                                size: 14
+                            }),
+                            "工具调用",
+                            /*#__PURE__*/ jsx(Badge, {
+                                children: tools.length
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Content, {
+                children: [
+                    'todos' === activeTab && /*#__PURE__*/ jsx(TodoList, {
+                        items: todos,
+                        simple: true
+                    }),
+                    'tools' === activeTab && /*#__PURE__*/ jsx(ToolCallList, {
+                        tools: tools,
+                        simple: true
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { TracePanel };

package/dist/features/ChatClient/ui/TracePanel/index.d.ts

@@ -0,0 +1,2 @@
+export { TracePanel } from './TracePanel';
+export { TraceTrigger } from './Popover';

package/dist/features/ChatClient/ui/TracePanel/index.js

@@ -0,0 +1,3 @@
+import { TracePanel } from "./TracePanel.js";
+import { TraceTrigger } from "./Popover.js";
+export { TracePanel, TraceTrigger };

package/dist/features/ChatClient/ui/TracePanel/styles/DataTable.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ScrollContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const Thead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;
+export declare const Th: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
+export declare const Tr: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
+export declare const Td: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const NullSpan: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ErrorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/features/ChatClient/ui/TracePanel/styles/DataTable.styles.js

@@ -0,0 +1,81 @@
+import styled_components from "styled-components";
+const Container = styled_components.div`
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+`;
+const ScrollContainer = styled_components.div`
+  overflow: auto;
+  max-height: 400px;
+`;
+const Table = styled_components.table`
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+`;
+const Thead = styled_components.thead`
+  background-color: #f8fafc;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+`;
+const Th = styled_components.th`
+  font-weight: 600;
+  color: #475569;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e2e8f0;
+  background-color: #f8fafc;
+`;
+const Tr = styled_components.tr`
+  transition: background-color 150ms;
+  border-bottom: 1px solid #f1f5f9;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &:hover {
+    background-color: #f8fafc;
+  }
+`;
+const Td = styled_components.td`
+  font-size: 0.875rem;
+  color: #334155;
+  padding: 0.625rem 1rem;
+  white-space: nowrap;
+  max-width: 20rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const NullSpan = styled_components.span`
+  color: #94a3b8;
+  font-style: italic;
+`;
+const Footer = styled_components.div`
+  background-color: #f8fafc;
+  padding: 0.375rem 0.75rem;
+  border-top: 1px solid #e2e8f0;
+  font-size: 10px;
+  color: #94a3b8;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  text-align: right;
+`;
+const ErrorContainer = styled_components.div`
+  font-size: 0.875rem;
+  color: #64748b;
+  font-style: italic;
+  padding: 1rem;
+  text-align: center;
+  border: 1px solid #f1f5f9;
+  border-radius: 0.5rem;
+  background-color: #f8fafc;
+`;
+export { Container, ErrorContainer, Footer, NullSpan, ScrollContainer, Table, Td, Th, Thead, Tr };

package/dist/features/ChatClient/ui/TracePanel/styles/TodoList.styles.d.ts

@@ -0,0 +1,22 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SimpleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HeaderLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Subtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $isCompleted?: boolean;
+}>> & string;
+export declare const ToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const ItemIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StatusIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $status: "pending" | "in_progress" | "completed";
+}>> & string;
+export declare const PendingDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $status: "pending" | "in_progress" | "completed";
+}>> & string;

package/dist/features/ChatClient/ui/TracePanel/styles/TodoList.styles.js

@@ -0,0 +1,164 @@
+import styled_components, { css } from "styled-components";
+const Container = styled_components.div`
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(4px);
+  border-radius: 0.75rem;
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: all 300ms;
+
+  &:hover {
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+`;
+const SimpleContainer = styled_components.div``;
+const Header = styled_components.div`
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+`;
+const HeaderLeft = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+`;
+const IconWrapper = styled_components.div`
+  padding: 0.375rem;
+  background-color: #f5f3ff;
+  border-radius: 0.375rem;
+  color: #7c3aed;
+  transition: background-color 150ms;
+
+  ${Header}:hover & {
+    background-color: #ede9fe;
+  }
+`;
+const TitleWrapper = styled_components.div`
+  display: flex;
+  flex-direction: column;
+`;
+const Title = styled_components.span`
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1e293b;
+  letter-spacing: -0.025em;
+`;
+const Subtitle = styled_components.span`
+  font-size: 10px;
+  font-weight: 500;
+  color: ${(props)=>props.$isCompleted ? '#059669' : '#64748b'};
+`;
+const ToggleButton = styled_components.button`
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  color: #94a3b8;
+  transition:
+    background-color 150ms,
+    color 150ms;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #f1f5f9;
+  }
+`;
+const ListContainer = styled_components.div`
+  padding: 0 0.5rem 0.5rem;
+`;
+const List = styled_components.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+const ListItem = styled_components.li`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: all 200ms;
+
+  &:hover {
+    background-color: rgba(248, 250, 252, 0.8);
+  }
+`;
+const ItemIconWrapper = styled_components.div`
+  margin-top: 0.125rem;
+  flex-shrink: 0;
+`;
+const StatusIcon = styled_components.div`
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${(props)=>'completed' === props.$status && css`
+      background-color: #d1fae5;
+      color: #059669;
+      border: 1px solid rgba(167, 243, 208, 0.5);
+    `}
+
+  ${(props)=>'in_progress' === props.$status && css`
+      background-color: #eff6ff;
+      color: #2563eb;
+      border: 1px solid rgba(191, 219, 254, 0.5);
+    `}
+
+  ${(props)=>'pending' === props.$status && css`
+      background-color: white;
+      border: 2px solid #e2e8f0;
+      transition: border-color 150ms;
+
+      ${ListItem}:hover & {
+        border-color: #cbd5e1;
+      }
+    `}
+`;
+const PendingDot = styled_components.div`
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: transparent;
+  transition: background-color 150ms;
+
+  ${ListItem}:hover & {
+    background-color: #e2e8f0;
+  }
+`;
+const ItemContent = styled_components.span`
+  font-size: 0.875rem;
+  line-height: 1.625;
+  transition: color 200ms;
+  word-break: break-all;
+
+  ${(props)=>'completed' === props.$status && css`
+      color: #94a3b8;
+      text-decoration: line-through;
+      text-decoration-color: #cbd5e1;
+    `}
+
+  ${(props)=>'in_progress' === props.$status && css`
+      color: #1e293b;
+      font-weight: 500;
+    `}
+
+  ${(props)=>'pending' === props.$status && css`
+      color: #475569;
+    `}
+`;
+export { Container, Header, HeaderLeft, IconWrapper, ItemContent, ItemIconWrapper, List, ListContainer, ListItem, PendingDot, SimpleContainer, StatusIcon, Subtitle, Title, TitleWrapper, ToggleButton };

package/dist/features/ChatClient/ui/TracePanel/styles/ToolCallList.styles.d.ts

@@ -0,0 +1,21 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SimpleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HeaderLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Subtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ToolItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ToolHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ToolInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ToolName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ToolMeta: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Duration: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ExpandIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DetailsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DetailsSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;