@vibe-forge/tsconfigs 0.7.2 → 0.8.0

package/dist/apps/client/src/components/chat/tools/adapter-claude/index.js

@@ -0,0 +1,18 @@
+import { defineToolRenders } from '../defineToolRender';
+import { BashTool } from './BashTool';
+import { GlobTool } from './GlobTool';
+import { GrepTool } from './GrepTool';
+import { LsTool } from './LSTool';
+import { ReadTool } from './ReadTool';
+import { TodoTool } from './TodoTool';
+import { WriteTool } from './WriteTool';
+export const adapterClaudeToolRenders = defineToolRenders({
+    Bash: BashTool,
+    LS: LsTool,
+    Glob: GlobTool,
+    Grep: GrepTool,
+    Read: ReadTool,
+    Write: WriteTool,
+    TodoWrite: TodoTool
+}, { namespace: 'adapter:claude-code:' });
+export { BashTool, GlobTool, GrepTool, LsTool, ReadTool, TodoTool, WriteTool };

package/dist/apps/client/src/components/chat/tools/adapter-claude/utils.d.ts

@@ -0,0 +1,7 @@
+export declare function getFileInfo(filePath?: string): {
+    filePath: string;
+    fileName: string;
+    dirPath: string;
+};
+export declare function getLanguageFromPath(path: string): string;
+export declare function normalizeResultLines(content: unknown): string[];

package/dist/apps/client/src/components/chat/tools/adapter-claude/utils.js

@@ -0,0 +1,49 @@
+export function getFileInfo(filePath) {
+    const resolvedPath = (filePath != null && filePath !== '') ? filePath : 'unknown file';
+    const lastSlashIndex = resolvedPath.lastIndexOf('/');
+    const fileName = lastSlashIndex >= 0 ? resolvedPath.slice(lastSlashIndex + 1) : resolvedPath;
+    const dirPath = lastSlashIndex >= 0 ? resolvedPath.slice(0, lastSlashIndex) : '';
+    return { filePath: resolvedPath, fileName, dirPath };
+}
+export function getLanguageFromPath(path) {
+    const extPart = path.split('.').pop();
+    const ext = (extPart != null && extPart !== '') ? extPart.toLowerCase() : '';
+    const langMap = {
+        'js': 'javascript',
+        'jsx': 'jsx',
+        'ts': 'typescript',
+        'tsx': 'tsx',
+        'py': 'python',
+        'md': 'markdown',
+        'json': 'json',
+        'scss': 'scss',
+        'css': 'css',
+        'html': 'html',
+        'sh': 'bash',
+        'yml': 'yaml',
+        'yaml': 'yaml',
+        'sql': 'sql'
+    };
+    return langMap[ext] || 'text';
+}
+export function normalizeResultLines(content) {
+    if (Array.isArray(content)) {
+        return content.map(String);
+    }
+    if (typeof content !== 'string') {
+        return [];
+    }
+    const trimmed = content.trim();
+    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+        try {
+            const parsed = JSON.parse(trimmed);
+            if (Array.isArray(parsed)) {
+                return parsed.map(String);
+            }
+        }
+        catch {
+            return content.split('\n');
+        }
+    }
+    return content.split('\n');
+}

package/dist/apps/client/src/components/chat/tools/core/ToolCallBox.d.ts

@@ -0,0 +1,11 @@
+import './ToolCallBox.scss';
+import React from 'react';
+export declare function ToolCallBox({ header, content, isError, type, defaultExpanded, collapsible, onDoubleClick }: {
+    header: React.ReactNode;
+    content: React.ReactNode;
+    isError?: boolean;
+    type?: 'call' | 'result';
+    defaultExpanded?: boolean;
+    collapsible?: boolean;
+    onDoubleClick?: (e: React.MouseEvent) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/tools/core/ToolCallBox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ToolCallBox.scss';
+import { useState } from 'react';
+export function ToolCallBox({ header, content, isError = false, type = 'call', defaultExpanded = false, collapsible = true, onDoubleClick }) {
+    const [expanded, setExpanded] = useState(defaultExpanded || !collapsible);
+    const isExpanded = !collapsible || expanded;
+    return (_jsxs("div", { className: `tool-call-box ${type === 'result' ? 'result' : ''} ${isExpanded ? 'expanded' : 'collapsed'}`, onDoubleClick: (e) => {
+            if (onDoubleClick) {
+                e.stopPropagation();
+                onDoubleClick(e);
+            }
+        }, children: [_jsxs("div", { className: `tool-call-header ${type === 'result' && isError ? 'error' : ''}`, onClick: () => collapsible && setExpanded(!expanded), children: [_jsx("div", { className: 'tool-call-header-main', children: header }), collapsible && (_jsx("span", { className: 'material-symbols-rounded expand-icon', children: isExpanded ? 'expand_less' : 'expand_more' }))] }), isExpanded && (_jsx("div", { className: 'tool-call-body', children: content }))] }));
+}

package/dist/apps/client/src/components/chat/tools/core/ToolGroup.d.ts

@@ -0,0 +1,22 @@
+import './ToolGroup.scss';
+import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core';
+import React from 'react';
+interface ToolGroupProps {
+    items: {
+        item: Extract<ChatMessageContent, {
+            type: 'tool_use';
+        }>;
+        resultItem?: Extract<ChatMessageContent, {
+            type: 'tool_result';
+        }>;
+    }[];
+    footer?: {
+        model?: string;
+        usage?: ChatMessage['usage'];
+        createdAt: number;
+        originalMessage: ChatMessage;
+    };
+}
+declare function ToolGroupComponent({ items, footer }: ToolGroupProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const ToolGroup: React.MemoExoticComponent<typeof ToolGroupComponent>;
+export {};

package/dist/apps/client/src/components/chat/tools/core/ToolGroup.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ToolGroup.scss';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MessageFooter } from '../../messages/MessageFooter';
+import { ToolRenderer } from './ToolRenderer';
+function ToolGroupComponent({ items, footer }) {
+    const { t } = useTranslation();
+    const [expanded, setExpanded] = useState(false);
+    if (items.length === 0)
+        return null;
+    // If only one item, just render it directly (wrapped in container for footer)
+    if (items.length === 1) {
+        return (_jsxs("div", { className: 'tool-group-container', children: [_jsx("div", { className: 'tool-group-wrapper single-item', children: _jsx(ToolRenderer, { item: items[0].item, resultItem: items[0].resultItem }) }), footer && (_jsx("div", { className: 'tool-group-footer-wrapper', children: _jsx(MessageFooter, { msg: footer.originalMessage, isUser: false }) }))] }));
+    }
+    const lastItem = items[items.length - 1];
+    const otherItems = items.slice(0, -1);
+    return (_jsxs("div", { className: 'tool-group-container', children: [_jsxs("div", { className: 'tool-group-wrapper card-style', children: [_jsxs("div", { className: 'tool-group-header', onClick: () => setExpanded(!expanded), children: [_jsxs("div", { className: 'header-left', children: [_jsx("span", { className: 'material-symbols-rounded', children: "dataset" }), _jsx("span", { children: t('chat.usedTools', { count: items.length }) })] }), _jsx("span", { className: 'material-symbols-rounded expand-icon', children: expanded ? 'expand_less' : 'expand_more' })] }), expanded && (_jsx("div", { className: 'tool-group-list', children: otherItems.map((it, idx) => (_jsx(ToolRenderer, { item: it.item, resultItem: it.resultItem }, it.item.id || idx))) })), _jsx("div", { className: 'tool-group-last-item', children: _jsx(ToolRenderer, { item: lastItem.item, resultItem: lastItem.resultItem }) })] }), footer && (_jsx("div", { className: 'tool-group-footer-wrapper', children: _jsx(MessageFooter, { msg: footer.originalMessage, isUser: false }) }))] }));
+}
+const areToolGroupPropsEqual = (prev, next) => {
+    if (prev.items.length !== next.items.length)
+        return false;
+    for (let i = 0; i < prev.items.length; i++) {
+        if (prev.items[i].item !== next.items[i].item)
+            return false;
+        if (prev.items[i].resultItem !== next.items[i].resultItem)
+            return false;
+    }
+    if (prev.footer == null && next.footer == null)
+        return true;
+    if (prev.footer == null || next.footer == null)
+        return false;
+    return prev.footer.originalMessage === next.footer.originalMessage &&
+        prev.footer.createdAt === next.footer.createdAt &&
+        prev.footer.model === next.footer.model &&
+        prev.footer.usage === next.footer.usage;
+};
+export const ToolGroup = React.memo(ToolGroupComponent, areToolGroupPropsEqual);

package/dist/apps/client/src/components/chat/tools/core/ToolRenderer.d.ts

@@ -0,0 +1,14 @@
+import type { ChatMessageContent } from '@vibe-forge/core';
+export declare function ToolRenderer({ item, resultItem }: {
+    item: Extract<ChatMessageContent, {
+        type: 'tool_use';
+    }>;
+    resultItem?: Extract<ChatMessageContent, {
+        type: 'tool_result';
+    }>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace ToolRenderer {
+    var findRendererByInput: (item: Extract<ChatMessageContent, {
+        type: "tool_use";
+    }>) => (({ item, resultItem }: import("../defineToolRender").ToolRenderProps) => import("react/jsx-runtime").JSX.Element) | null;
+}

package/dist/apps/client/src/components/chat/tools/core/ToolRenderer.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DefaultTool } from '../DefaultTool';
+import { BashTool, adapterClaudeToolRenders } from '../adapter-claude';
+import { chromeDevtoolsToolRenders } from '../plugin-chrome-devtools';
+import { taskToolRenders } from '../task';
+const TOOL_RENDERERS = {
+    ...taskToolRenders,
+    ...adapterClaudeToolRenders,
+    ...chromeDevtoolsToolRenders
+};
+export function ToolRenderer({ item, resultItem }) {
+    const toolName = item.name;
+    const foundRenderer = TOOL_RENDERERS[toolName] ?? ToolRenderer.findRendererByInput(item);
+    const Renderer = foundRenderer ?? DefaultTool;
+    return _jsx(Renderer, { item: item, resultItem: resultItem });
+}
+ToolRenderer.findRendererByInput = (item) => {
+    // If input has 'command' and 'description', it's likely a bash tool even if name is different
+    const input = item.input;
+    if (input != null && typeof input === 'object') {
+        if ('command' in input &&
+            (('description' in input && input.description != null) || ('reason' in input && input.reason != null))) {
+            return BashTool;
+        }
+    }
+    return null;
+};

package/dist/apps/client/src/components/chat/tools/defineToolRender.d.ts

@@ -0,0 +1,15 @@
+import type { ChatMessageContent } from '@vibe-forge/core';
+import type React from 'react';
+export interface ToolRenderProps {
+    item: Extract<ChatMessageContent, {
+        type: 'tool_use';
+    }>;
+    resultItem?: Extract<ChatMessageContent, {
+        type: 'tool_result';
+    }>;
+}
+export type ToolRenderComponent = React.ComponentType<ToolRenderProps>;
+export declare function defineToolRender<T extends ToolRenderComponent>(render: T): T;
+export declare function defineToolRenders(renders: Record<string, ToolRenderComponent>, options?: {
+    namespace?: string;
+}): Record<string, ToolRenderComponent>;

package/dist/apps/client/src/components/chat/tools/defineToolRender.js

@@ -0,0 +1,14 @@
+export function defineToolRender(render) {
+    return render;
+}
+export function defineToolRenders(renders, options) {
+    const namespace = options?.namespace;
+    const entries = Object.entries(renders).flatMap(([name, renderer]) => {
+        const current = [[name, renderer]];
+        if (namespace) {
+            current.push([`${namespace}${name}`, renderer]);
+        }
+        return current;
+    });
+    return Object.fromEntries(entries);
+}

package/dist/apps/client/src/components/chat/tools/plugin-chrome-devtools/ChromeDevtoolsTool.d.ts

@@ -0,0 +1,2 @@
+import './ChromeDevtoolsTool.scss';
+export declare const ChromeDevtoolsTool: ({ item, resultItem }: import("../defineToolRender").ToolRenderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/tools/plugin-chrome-devtools/ChromeDevtoolsTool.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ChromeDevtoolsTool.scss';
+import { useTranslation } from 'react-i18next';
+import { CodeBlock } from '#~/components/CodeBlock';
+import { safeJsonStringify } from '#~/utils/safe-serialize';
+import { ToolCallBox } from '../core/ToolCallBox';
+import { defineToolRender } from '../defineToolRender';
+const formatToolName = (name) => {
+    if (name.startsWith('mcp__ChromeDevtools__')) {
+        return name.replace('mcp__ChromeDevtools__', '');
+    }
+    return name;
+};
+export const ChromeDevtoolsTool = defineToolRender(({ item, resultItem }) => {
+    const { t } = useTranslation();
+    const displayName = formatToolName(item.name);
+    const input = item.input != null ? item.input : {};
+    return (_jsxs("div", { className: 'tool-group chrome-devtools-tool', children: [_jsx(ToolCallBox, { defaultExpanded: true, header: _jsxs("div", { className: 'tool-header-content', children: [_jsx("i", { className: 'tool-header-icon chrome-devtools-tool__icon devicon-chrome-plain colored' }), _jsx("span", { className: 'tool-header-title', children: displayName }), _jsx("span", { className: 'tool-header-hint', children: t('chat.tools.call') })] }), content: _jsx("div", { className: 'tool-content', children: _jsx(CodeBlock, { code: safeJsonStringify(input, 2), lang: 'json' }) }) }), resultItem != null && (_jsx(ToolCallBox, { type: 'result', isError: resultItem.is_error, header: _jsxs("div", { className: 'tool-header-content', children: [_jsx("span", { className: 'material-symbols-rounded tool-header-icon', children: resultItem.is_error === true ? 'error' : 'check_circle' }), _jsx("span", { className: 'tool-header-title', children: t('chat.result') })] }), content: _jsx("div", { className: 'tool-content', children: typeof resultItem.content === 'string'
+                        ? (_jsx(CodeBlock, { code: resultItem.content, lang: 'text' }))
+                        : (_jsx(CodeBlock, { code: safeJsonStringify(resultItem.content, 2), lang: 'json' })) }) }))] }));
+});

package/dist/apps/client/src/components/chat/tools/plugin-chrome-devtools/index.d.ts

@@ -0,0 +1,4 @@
+import type { ToolRenderComponent } from '../defineToolRender';
+import { ChromeDevtoolsTool } from './ChromeDevtoolsTool';
+export declare const chromeDevtoolsToolRenders: Record<string, ToolRenderComponent>;
+export { ChromeDevtoolsTool };

package/dist/apps/client/src/components/chat/tools/plugin-chrome-devtools/index.js

@@ -0,0 +1,38 @@
+import { defineToolRenders } from '../defineToolRender';
+import { ChromeDevtoolsTool } from './ChromeDevtoolsTool';
+const chromeDevtoolsToolNames = [
+    'mcp__ChromeDevtools__click',
+    'mcp__ChromeDevtools__close_page',
+    'mcp__ChromeDevtools__drag',
+    'mcp__ChromeDevtools__emulate',
+    'mcp__ChromeDevtools__evaluate_script',
+    'mcp__ChromeDevtools__fill',
+    'mcp__ChromeDevtools__fill_form',
+    'mcp__ChromeDevtools__get_console_message',
+    'mcp__ChromeDevtools__get_network_request',
+    'mcp__ChromeDevtools__handle_dialog',
+    'mcp__ChromeDevtools__hover',
+    'mcp__ChromeDevtools__list_console_messages',
+    'mcp__ChromeDevtools__list_network_requests',
+    'mcp__ChromeDevtools__list_pages',
+    'mcp__ChromeDevtools__navigate_page',
+    'mcp__ChromeDevtools__new_page',
+    'mcp__ChromeDevtools__performance_analyze_insight',
+    'mcp__ChromeDevtools__performance_start_trace',
+    'mcp__ChromeDevtools__performance_stop_trace',
+    'mcp__ChromeDevtools__press_key',
+    'mcp__ChromeDevtools__resize_page',
+    'mcp__ChromeDevtools__select_page',
+    'mcp__ChromeDevtools__take_memory_snapshot',
+    'mcp__ChromeDevtools__take_screenshot',
+    'mcp__ChromeDevtools__take_snapshot',
+    'mcp__ChromeDevtools__type_text',
+    'mcp__ChromeDevtools__upload_file',
+    'mcp__ChromeDevtools__wait_for'
+];
+const chromeDevtoolsToolEntries = chromeDevtoolsToolNames.reduce((acc, name) => {
+    acc[name] = ChromeDevtoolsTool;
+    return acc;
+}, {});
+export const chromeDevtoolsToolRenders = defineToolRenders(chromeDevtoolsToolEntries);
+export { ChromeDevtoolsTool };

package/dist/apps/client/src/components/chat/tools/task/GetTaskInfoTool.d.ts

@@ -0,0 +1,2 @@
+import './GetTaskInfoTool.scss';
+export declare const GetTaskInfoTool: ({ item, resultItem }: import("../defineToolRender").ToolRenderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/tools/task/GetTaskInfoTool.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './GetTaskInfoTool.scss';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ToolCallBox } from '../core/ToolCallBox';
+import { defineToolRender } from '../defineToolRender';
+import { TaskRow } from './components/TaskRow';
+export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
+    const { t } = useTranslation();
+    const input = (item.input != null ? item.input : {});
+    const inputTaskId = input.taskId;
+    const taskResult = useMemo(() => {
+        if (!resultItem?.content) {
+            return null;
+        }
+        const text = resultItem.content[0].text.trim();
+        const parsed = JSON.parse(text);
+        return parsed[0] ?? null;
+    }, [resultItem?.content]);
+    const metaChips = taskResult
+        ? (() => {
+            const { exitCode, ...cardMeta } = taskResult;
+            return [
+                cardMeta.adapter,
+                cardMeta.type === 'default' ? undefined : cardMeta.type,
+                cardMeta.name,
+                cardMeta.status,
+                exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
+                cardMeta.background === false
+                    ? t('chat.tools.startTasksForeground')
+                    : cardMeta.background === true
+                        ? t('chat.tools.startTasksBackground')
+                        : undefined
+            ];
+        })()
+        : [];
+    const titleFallback = t('chat.tools.task');
+    return (_jsx("div", { className: 'tool-group get-task-info-tool', children: _jsx(ToolCallBox, { defaultExpanded: true, header: _jsxs("div", { className: 'tool-header-content', children: [_jsx("span", { className: 'material-symbols-rounded tool-header-icon', children: "info" }), _jsx("span", { className: 'tool-header-title', children: t('chat.tools.getTaskInfo') }), _jsx("span", { className: 'tool-header-chip', children: taskResult ? 1 : 0 })] }), content: _jsx("div", { className: 'tool-content', children: taskResult
+                    ? ((() => {
+                        const { taskId, exitCode, ...cardProps } = taskResult;
+                        return (_jsx(TaskRow, { description: cardProps.description, status: cardProps.status, background: cardProps.background, sessionId: taskId || inputTaskId, logs: cardProps.logs, titleFallback: titleFallback, metaChips: metaChips, showExecutionIcon: false }));
+                    })())
+                    : (_jsx("div", { className: 'get-task-info-tool__empty', children: t('chat.tools.startTasksEmpty') })) }) }) }));
+});

package/dist/apps/client/src/components/chat/tools/task/ListTasksTool.d.ts

@@ -0,0 +1,2 @@
+import './ListTasksTool.scss';
+export declare const ListTasksTool: ({ resultItem }: import("../defineToolRender").ToolRenderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/tools/task/ListTasksTool.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ListTasksTool.scss';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ToolCallBox } from '../core/ToolCallBox';
+import { defineToolRender } from '../defineToolRender';
+import { TaskRow } from './components/TaskRow';
+export const ListTasksTool = defineToolRender(({ resultItem }) => {
+    const { t } = useTranslation();
+    const taskResults = useMemo(() => {
+        if (!resultItem?.content) {
+            return [];
+        }
+        const text = resultItem.content[0].text.trim();
+        return JSON.parse(text);
+    }, [resultItem?.content]);
+    return (_jsx("div", { className: 'tool-group list-tasks-tool', children: _jsx(ToolCallBox, { defaultExpanded: true, header: _jsxs("div", { className: 'tool-header-content', children: [_jsx("span", { className: 'material-symbols-rounded tool-header-icon', children: "list_alt" }), _jsx("span", { className: 'tool-header-title', children: t('chat.tools.listTasks') }), _jsx("span", { className: 'tool-header-chip', children: taskResults.length })] }), content: _jsx("div", { className: 'tool-content', children: _jsxs("div", { className: 'list-tasks-tool__list', children: [taskResults.map((task) => {
+                            const { taskId, exitCode, ...cardProps } = task;
+                            const metaChips = [
+                                cardProps.adapter,
+                                cardProps.type === 'default' ? undefined : cardProps.type,
+                                cardProps.name,
+                                cardProps.status,
+                                exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
+                                cardProps.background === false
+                                    ? t('chat.tools.startTasksForeground')
+                                    : cardProps.background === true
+                                        ? t('chat.tools.startTasksBackground')
+                                        : undefined
+                            ];
+                            return (_jsx(TaskRow, { description: cardProps.description, status: cardProps.status, background: cardProps.background, sessionId: taskId, logs: cardProps.logs, titleFallback: t('chat.tools.task'), metaChips: metaChips, showExecutionIcon: false }, taskId));
+                        }), taskResults.length === 0 && (_jsx("div", { className: 'list-tasks-tool__empty', children: t('chat.tools.listTasksEmpty') }))] }) }) }) }));
+});

package/dist/apps/client/src/components/chat/tools/task/StartTasksTool.d.ts

@@ -0,0 +1,2 @@
+import './StartTasksTool.scss';
+export declare const StartTasksTool: ({ item, resultItem }: import("../defineToolRender").ToolRenderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/tools/task/StartTasksTool.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './StartTasksTool.scss';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ToolCallBox } from '../core/ToolCallBox';
+import { defineToolRender } from '../defineToolRender';
+import { TaskRow } from './components/TaskRow';
+export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
+    const { t } = useTranslation();
+    const input = (item.input != null ? item.input : {});
+    const tasks = Array.isArray(input.tasks) ? input.tasks : [];
+    const parsedResult = useMemo(() => {
+        if (!resultItem?.content) {
+            return { taskResults: null };
+        }
+        const text = resultItem.content[0].text.trim();
+        return {
+            taskResults: JSON.parse(text)
+        };
+    }, [resultItem?.content]);
+    const { taskResults } = parsedResult;
+    return (_jsx("div", { className: 'tool-group start-tasks-tool', children: _jsx(ToolCallBox, { defaultExpanded: true, header: _jsxs("div", { className: 'tool-header-content', children: [_jsx("span", { className: 'material-symbols-rounded tool-header-icon', children: "playlist_add" }), _jsx("span", { className: 'tool-header-title', children: t('chat.tools.startTasks') }), _jsx("span", { className: 'tool-header-chip', children: tasks.length })] }), content: _jsx("div", { className: 'tool-content', children: _jsxs("div", { className: 'start-tasks-tool__list', children: [tasks.map((task, idx) => {
+                            const { description, type, name, adapter, background } = task;
+                            const { status, taskId, logs = [] } = taskResults?.[idx] ?? {};
+                            const metaChips = [
+                                adapter,
+                                type === 'default' ? undefined : type,
+                                name
+                            ];
+                            return (_jsx(TaskRow, { description: description, status: status, background: background, sessionId: taskId, logs: logs, titleFallback: t('chat.tools.startTasks'), metaChips: metaChips, showExecutionIcon: true, foregroundLabel: t('chat.tools.startTasksForeground'), backgroundLabel: t('chat.tools.startTasksBackground') }, idx));
+                        }), tasks.length === 0 && (_jsx("div", { className: 'start-tasks-tool__empty', children: t('chat.tools.startTasksEmpty') }))] }) }) }) }));
+});

package/dist/apps/client/src/components/chat/tools/task/components/TaskRow.d.ts

@@ -0,0 +1,14 @@
+import './TaskRow.scss';
+export interface TaskRowProps {
+    description?: string;
+    status?: 'running' | 'completed' | 'failed';
+    logs?: string[] | null;
+    sessionId?: string | null;
+    titleFallback?: string;
+    metaChips?: Array<string | null | undefined>;
+    showExecutionIcon?: boolean;
+    background?: boolean;
+    foregroundLabel?: string;
+    backgroundLabel?: string;
+}
+export declare function TaskRow({ description, status, logs, sessionId, titleFallback, metaChips, showExecutionIcon, background, foregroundLabel, backgroundLabel }: TaskRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/tools/task/components/TaskRow.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './TaskRow.scss';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MarkdownContent } from '#~/components/MarkdownContent';
+import { connectionManager } from '#~/connectionManager.js';
+function parseTaskDescription(description) {
+    if (!description) {
+        return { title: '' };
+    }
+    const lines = description.split('\n');
+    const title = lines[0] || '';
+    return { title };
+}
+function getStatusIcon(status) {
+    switch (status) {
+        case 'running':
+            return 'play_circle';
+        case 'completed':
+            return 'check_circle';
+        case 'failed':
+            return 'error';
+        default:
+            return 'help_outline';
+    }
+}
+export function TaskRow({ description, status, logs, sessionId, titleFallback, metaChips, showExecutionIcon, background, foregroundLabel, backgroundLabel }) {
+    const navigate = useNavigate();
+    const [liveLogs, setLiveLogs] = useState(logs ?? []);
+    const [liveStatus, setLiveStatus] = useState(status);
+    const seenMessageIdsRef = useRef(new Set());
+    const { title } = parseTaskDescription(description);
+    const resolvedTitle = title || titleFallback || '';
+    const chips = (metaChips ?? []).filter((item) => Boolean(item));
+    const isForeground = background === false;
+    const executionClass = isForeground
+        ? 'task-row__execution-icon--foreground'
+        : 'task-row__execution-icon--background';
+    const executionLabel = isForeground ? foregroundLabel : backgroundLabel;
+    const displaySessionId = sessionId != null && sessionId !== '';
+    const logText = useMemo(() => (liveLogs?.join('\n') ?? '').trim(), [liveLogs]);
+    useEffect(() => {
+        setLiveLogs(logs ?? []);
+    }, [logs]);
+    useEffect(() => {
+        setLiveStatus(status);
+    }, [status]);
+    useEffect(() => {
+        if (!sessionId)
+            return;
+        const cleanup = connectionManager.connect(sessionId, {
+            onMessage(data) {
+                if (data.type === 'message') {
+                    const message = data.message;
+                    if (message.id && seenMessageIdsRef.current.has(message.id)) {
+                        return;
+                    }
+                    if (message.id) {
+                        seenMessageIdsRef.current.add(message.id);
+                    }
+                    const text = extractMessageText(message);
+                    if (text !== '') {
+                        setLiveLogs((prev) => [...prev, text]);
+                    }
+                }
+                else if (data.type === 'session_updated' && data.session?.id === sessionId) {
+                    const updatedStatus = data.session?.status;
+                    if (updatedStatus) {
+                        setLiveStatus(updatedStatus);
+                    }
+                }
+            }
+        });
+        return () => {
+            cleanup?.();
+        };
+    }, [sessionId]);
+    return (_jsxs("div", { className: 'task-row', children: [_jsxs("div", { className: 'task-row__header', children: [_jsxs("div", { className: 'task-row__left', children: [_jsx("span", { className: `material-symbols-rounded task-row__status-icon ${liveStatus ?? 'help_outline'}`, children: getStatusIcon(liveStatus) }), showExecutionIcon && (_jsx("span", { className: `material-symbols-rounded task-row__execution-icon ${executionClass}`, title: executionLabel, children: isForeground ? 'desktop_windows' : 'schedule' }))] }), _jsx("span", { className: 'task-row__title', children: resolvedTitle }), displaySessionId && (_jsx("button", { type: 'button', className: 'task-row__session-link', onClick: () => navigate(`/session/${sessionId}`), children: sessionId })), chips.length > 0 && (_jsx("div", { className: 'task-row__meta', children: chips.map((item) => (_jsx("span", { className: 'task-row__meta-chip', children: item }, item))) }))] }), logText !== '' && (_jsx("div", { className: 'task-row__logs', children: _jsx(MarkdownContent, { content: logText }) }))] }));
+}
+function extractMessageText(message) {
+    if (typeof message.content === 'string') {
+        return message.content;
+    }
+    if (Array.isArray(message.content)) {
+        return message.content
+            .map((c) => (c.type === 'text' ? c.text : ''))
+            .join('');
+    }
+    return '';
+}

package/dist/apps/client/src/components/chat/tools/task/components/TaskToolCard.d.ts

@@ -0,0 +1,17 @@
+import './TaskToolCard.scss';
+export interface TaskToolCardProps {
+    description?: string;
+    status?: 'running' | 'completed' | 'failed';
+    logs?: string[] | null;
+    adapter?: string | null;
+    type?: 'default' | 'spec' | 'entity';
+    name?: string | null;
+    background?: boolean;
+    sessionId?: string | null;
+    titleFallback?: string;
+    metaChips?: Array<string | null | undefined>;
+    showExecutionIcon?: boolean;
+    foregroundLabel?: string;
+    backgroundLabel?: string;
+}
+export declare function TaskToolCard({ description, status, logs, background, sessionId, titleFallback, metaChips, showExecutionIcon, foregroundLabel, backgroundLabel }: TaskToolCardProps): import("react/jsx-runtime").JSX.Element;