@shepai/cli 1.72.6 → 1.72.7-pr187.86f6440

package/dist/src/presentation/web/components/features/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/features/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/features/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/presentation/web/components/features/index.js

@@ -1,4 +1,4 @@
 export { FeaturesCanvas } from './features-canvas/index.js';
 export { ToolsPageClient } from './tools/index.js';
 export { ToolCard } from './tools/index.js';
-export { InstallInstructions } from './tools/index.js';
+export { ToolDetailDrawer } from './tools/index.js';

package/dist/src/presentation/web/components/features/tools/index.d.ts

@@ -1,4 +1,4 @@
 export { ToolsPageClient, type ToolsPageClientProps } from './tools-page-client.js';
 export { ToolCard, type ToolCardProps } from './tool-card.js';
-export { InstallInstructions, type InstallInstructionsProps } from './install-instructions.js';
+export { ToolDetailDrawer, type ToolDetailDrawerProps } from './tool-detail-drawer.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/features/tools/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/src/presentation/web/components/features/tools/index.js

@@ -1,3 +1,3 @@
 export { ToolsPageClient } from './tools-page-client.js';
 export { ToolCard } from './tool-card.js';
-export { InstallInstructions } from './install-instructions.js';
+export { ToolDetailDrawer } from './tool-detail-drawer.js';

package/dist/src/presentation/web/components/features/tools/tool-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-card.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8DAA8D,CAAC;AAE7F,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,aAAa,2CA2JrE"}
+{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-card.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8DAA8D,CAAC;AAE7F,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,aAAa,2CAuJrE"}

package/dist/src/presentation/web/components/features/tools/tool-card.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useTransition } from 'react';
-import { ExternalLink, Loader2, Rocket, Download, Monitor, Terminal, GitBranch, CircleX, Check, Package, } from 'lucide-react';
+import { Info, Loader2, Rocket, Download, Monitor, Terminal, GitBranch, CircleX, Check, Package, } from 'lucide-react';
 import { Button } from '../../ui/button.js';
 import { cn } from '../../../lib/utils.js';
-import { InstallInstructions } from './install-instructions.js';
+import { ToolDetailDrawer } from './tool-detail-drawer.js';
 const TAG_CONFIG = {
     ide: { label: 'IDE', icon: Monitor },
     'cli-agent': { label: 'CLI Agent', icon: Terminal },
@@ -12,7 +12,8 @@ const TAG_CONFIG = {
     terminal: { label: 'Terminal', icon: Terminal },
 };
 export function ToolCard({ tool, onRefresh, className }) {
-    const [installDrawerOpen, setInstallDrawerOpen] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [autoStartInstall, setAutoStartInstall] = useState(false);
     const [isPending, startTransition] = useTransition();
     const isInstalled = tool.status.status === 'available';
     const isError = tool.status.status === 'error';
@@ -22,19 +23,17 @@ export function ToolCard({ tool, onRefresh, className }) {
             await fetch(`/api/tools/${tool.id}/launch`, { method: 'POST' });
         });
     }
-    function handleAutoInstall() {
-        startTransition(async () => {
-            const res = await fetch(`/api/tools/${tool.id}/install`, { method: 'POST' });
-            if (res.ok && onRefresh) {
-                await onRefresh();
-            }
-        });
-    }
     return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "tool-card", className: cn('bg-card group flex h-30 w-full flex-col rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md', className), children: [_jsxs("div", { className: "mb-2 flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [tool.iconUrl ? (
                                     /* eslint-disable-next-line @next/next/no-img-element */
                                     _jsx("img", { src: tool.iconUrl, alt: "", width: 20, height: 20, className: "shrink-0 dark:invert" })) : (_jsx(Package, { className: "text-muted-foreground h-5 w-5 shrink-0" })), _jsx("h3", { "data-testid": "tool-card-name", className: "truncate text-sm font-bold", children: tool.name })] }), _jsx("div", { "data-testid": "tool-card-tags", className: "flex shrink-0 items-center gap-1", children: tool.tags.map((tag) => {
                                     const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
                                     const TagIcon = config.icon;
                                     return (_jsxs("span", { className: "bg-muted text-muted-foreground inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium", children: [_jsx(TagIcon, { className: "h-2.5 w-2.5" }), config.label] }, tag));
-                                }) })] }), _jsx("p", { "data-testid": "tool-card-summary", className: "text-muted-foreground mt-1 truncate text-xs", children: tool.summary }), _jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && tool.status.status === 'error' ? (_jsxs("span", { className: "flex items-center gap-1 truncate text-[10px] text-red-600 dark:text-red-400", title: tool.status.errorMessage, children: [_jsx(CircleX, { className: "h-3 w-3 shrink-0" }), tool.status.errorMessage ?? 'Error'] })) : isInstalled ? (_jsxs("span", { className: "flex items-center gap-1 text-[11px] text-emerald-600 dark:text-emerald-400", children: [_jsx(Check, { className: "h-3 w-3" }), "Installed"] })) : (_jsx("span", { className: "text-muted-foreground text-[10px]", children: "Not installed" })), tool.required ? (_jsx("span", { className: "text-muted-foreground text-[10px] italic", children: "Required" })) : null] }), isInstalled && canLaunch ? (_jsxs(Button, { size: "sm", variant: "ghost", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-button", className: "hover:bg-primary hover:text-primary-foreground h-7 cursor-pointer rounded-md px-3 text-xs", children: [isPending ? (_jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" })) : (_jsx(Rocket, { className: "mr-1 h-3 w-3" })), "Launch"] })) : !isInstalled && !isError && tool.autoInstall ? (_jsxs(Button, { size: "sm", onClick: handleAutoInstall, disabled: isPending, "aria-label": `Install ${tool.name}`, "data-testid": "tool-card-install-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [isPending ? (_jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" })) : (_jsx(Download, { className: "mr-1 h-3 w-3" })), isPending ? 'Installing…' : 'Install'] })) : !isInstalled && !isError ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setInstallDrawerOpen(true), "aria-label": `View install instructions for ${tool.name}`, "data-testid": "tool-card-manual-install-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [_jsx(ExternalLink, { className: "mr-1 h-3 w-3" }), "Install"] })) : null] })] }), _jsx(InstallInstructions, { tool: tool, open: installDrawerOpen, onOpenChange: setInstallDrawerOpen })] }));
+                                }) })] }), _jsx("p", { "data-testid": "tool-card-summary", className: "text-muted-foreground mt-1 truncate text-xs", children: tool.summary }), _jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && tool.status.status === 'error' ? (_jsxs("span", { className: "flex items-center gap-1 truncate text-[10px] text-red-600 dark:text-red-400", title: tool.status.errorMessage, children: [_jsx(CircleX, { className: "h-3 w-3 shrink-0" }), tool.status.errorMessage ?? 'Error'] })) : isInstalled ? (_jsxs("span", { className: "flex items-center gap-1 text-[11px] text-emerald-600 dark:text-emerald-400", children: [_jsx(Check, { className: "h-3 w-3" }), "Installed"] })) : (_jsx("span", { className: "text-muted-foreground text-[10px]", children: "Not installed" })), tool.required ? (_jsx("span", { className: "text-muted-foreground text-[10px] italic", children: "Required" })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                            setAutoStartInstall(false);
+                                            setDrawerOpen(true);
+                                        }, "aria-label": `View details for ${tool.name}`, "data-testid": "tool-card-info-button", className: "h-7 w-7 cursor-pointer rounded-md p-0", children: _jsx(Info, { className: "h-3.5 w-3.5" }) }), isInstalled && canLaunch ? (_jsxs(Button, { size: "sm", variant: "ghost", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-button", className: "hover:bg-primary hover:text-primary-foreground h-7 cursor-pointer rounded-md px-3 text-xs", children: [isPending ? (_jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" })) : (_jsx(Rocket, { className: "mr-1 h-3 w-3" })), "Launch"] })) : !isInstalled && !isError ? (_jsxs(Button, { size: "sm", variant: tool.autoInstall ? 'default' : 'outline', onClick: () => {
+                                            setAutoStartInstall(tool.autoInstall);
+                                            setDrawerOpen(true);
+                                        }, "aria-label": `Install ${tool.name}`, "data-testid": "tool-card-install-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [_jsx(Download, { className: "mr-1 h-3 w-3" }), "Install"] })) : null] })] })] }), _jsx(ToolDetailDrawer, { tool: tool, open: drawerOpen, onClose: () => setDrawerOpen(false), onRefresh: onRefresh, autoStart: autoStartInstall })] }));
 }

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.d.ts

@@ -0,0 +1,10 @@
+import type { ToolItem } from '../../../../../../packages/core/src/application/use-cases/tools/list-tools.use-case.js';
+export interface ToolDetailDrawerProps {
+    tool: ToolItem;
+    open: boolean;
+    onClose: () => void;
+    onRefresh?: () => Promise<void>;
+    autoStart?: boolean;
+}
+export declare function ToolDetailDrawer({ tool, open, onClose, onRefresh, autoStart, }: ToolDetailDrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tool-detail-drawer.d.ts.map

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-detail-drawer.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8DAA8D,CAAC;AAE7F,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAkCD,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,2CAkNvB"}

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Copy, Check, ExternalLink, Download, Rocket, Loader2, Monitor, Terminal, GitBranch, Package, } from 'lucide-react';
+import { Button } from '../../ui/button.js';
+import { BaseDrawer } from '../../common/base-drawer/base-drawer.js';
+import { useToolInstallStream } from '../../../hooks/use-tool-install-stream.js';
+const TAG_CONFIG = {
+    ide: { label: 'IDE', icon: Monitor },
+    'cli-agent': { label: 'CLI Agent', icon: Terminal },
+    vcs: { label: 'VCS', icon: GitBranch },
+    terminal: { label: 'Terminal', icon: Terminal },
+};
+const AUTO_SCROLL_THRESHOLD = 50;
+function StatusBadge({ status }) {
+    if (status === 'available') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: [_jsx(Check, { className: "h-3 w-3" }), "Installed"] }));
+    }
+    if (status === 'error') {
+        return (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400", children: "Error" }));
+    }
+    return (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400", children: "Missing" }));
+}
+export function ToolDetailDrawer({ tool, open, onClose, onRefresh, autoStart, }) {
+    const [copied, setCopied] = useState(false);
+    const [isLaunching, setIsLaunching] = useState(false);
+    const { logs, status, startInstall } = useToolInstallStream(tool.id);
+    const logRef = useRef(null);
+    const isAtBottomRef = useRef(true);
+    const autoStartedRef = useRef(false);
+    const isInstalled = tool.status.status === 'available';
+    const isError = tool.status.status === 'error';
+    const canLaunch = isInstalled && Boolean(tool.openDirectory);
+    const canInstall = !isInstalled && !isError && tool.autoInstall;
+    // Auto-start install when drawer opens with autoStart flag
+    useEffect(() => {
+        if (open && autoStart && canInstall && status === 'idle' && !autoStartedRef.current) {
+            autoStartedRef.current = true;
+            startInstall();
+        }
+        if (!open) {
+            autoStartedRef.current = false;
+        }
+    }, [open, autoStart, canInstall, status, startInstall]);
+    function handleCopy() {
+        if (!tool.installCommand)
+            return;
+        void navigator.clipboard.writeText(tool.installCommand).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }
+    async function handleLaunch() {
+        setIsLaunching(true);
+        try {
+            await fetch(`/api/tools/${tool.id}/launch`, { method: 'POST' });
+        }
+        finally {
+            setIsLaunching(false);
+        }
+    }
+    const handleScroll = useCallback(() => {
+        const el = logRef.current;
+        if (!el)
+            return;
+        isAtBottomRef.current =
+            el.scrollTop + el.clientHeight >= el.scrollHeight - AUTO_SCROLL_THRESHOLD;
+    }, []);
+    useEffect(() => {
+        if (isAtBottomRef.current && logRef.current) {
+            logRef.current.scrollTop = logRef.current.scrollHeight;
+        }
+    }, [logs]);
+    // Refresh tool status after install completes
+    useEffect(() => {
+        if (status === 'done' && onRefresh) {
+            void onRefresh();
+        }
+    }, [status, onRefresh]);
+    const header = (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [tool.iconUrl ? (
+                    /* eslint-disable-next-line @next/next/no-img-element */
+                    _jsx("img", { src: tool.iconUrl, alt: "", width: 24, height: 24, className: "shrink-0 dark:invert" })) : (_jsx(Package, { className: "text-muted-foreground h-6 w-6 shrink-0" })), _jsx("h2", { className: "text-base font-bold", children: tool.name }), _jsx(StatusBadge, { status: tool.status.status })] }), _jsx("div", { className: "flex items-center gap-1", children: tool.tags.map((tag) => {
+                    const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
+                    const TagIcon = config.icon;
+                    return (_jsxs("span", { className: "bg-muted text-muted-foreground inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium", children: [_jsx(TagIcon, { className: "h-2.5 w-2.5" }), config.label] }, tag));
+                }) })] }));
+    return (_jsx(BaseDrawer, { open: open, onClose: onClose, size: "md", modal: false, header: header, "data-testid": "tool-detail-drawer", children: _jsxs("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4", children: [_jsx("div", { children: _jsx("p", { className: "text-muted-foreground text-sm", children: tool.description }) }), tool.installCommand ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Install command" }), _jsxs("div", { className: "relative rounded-md bg-zinc-900 text-zinc-100", children: [_jsx("pre", { className: "overflow-x-auto px-3 py-2.5 pr-16 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: _jsx("code", { children: tool.installCommand }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "absolute top-1.5 right-1.5 h-7 cursor-pointer px-2 text-zinc-400 hover:text-zinc-100", onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy install command', children: [copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-500" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })), _jsx("span", { className: "ml-1 text-[10px]", children: copied ? 'Copied!' : 'Copy' })] })] })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [canInstall ? (_jsxs(Button, { size: "sm", onClick: startInstall, disabled: status === 'streaming', "aria-label": `Install ${tool.name}`, className: "cursor-pointer", children: [status === 'streaming' ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Download, { className: "mr-1.5 h-3.5 w-3.5" })), status === 'streaming' ? 'Installing...' : 'Install'] })) : null, canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleLaunch(), disabled: isLaunching, "aria-label": `Launch ${tool.name}`, className: "cursor-pointer", children: [isLaunching ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Rocket, { className: "mr-1.5 h-3.5 w-3.5" })), "Launch"] })) : null] }), (status === 'streaming' || status === 'done' || status === 'error') && logs.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Install log" }), _jsxs("div", { ref: logRef, onScroll: handleScroll, className: "max-h-60 overflow-auto rounded-md bg-zinc-900 p-3 font-mono text-xs leading-relaxed text-zinc-100", "data-testid": "tool-install-log", children: [logs.map((line) => (_jsx("div", { className: "break-all whitespace-pre-wrap", children: line }, line))), status === 'done' ? (_jsx("div", { className: "mt-2 border-t border-zinc-700 pt-2 text-emerald-400", children: "Installation complete" })) : null, status === 'error' ? (_jsx("div", { className: "mt-2 border-t border-zinc-700 pt-2 text-red-400", children: "Installation failed" })) : null] })] })) : null, tool.documentationUrl ? (_jsx(Button, { variant: "outline", size: "sm", className: "w-fit cursor-pointer", asChild: true, children: _jsxs("a", { href: tool.documentationUrl, target: "_blank", rel: "noopener noreferrer", children: ["Documentation", _jsx(ExternalLink, { className: "ml-1.5 h-3.5 w-3.5" })] }) })) : null] }) }));
+}

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToolDetailDrawer } from './tool-detail-drawer.js';
+declare const meta: Meta<typeof ToolDetailDrawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Installed: Story;
+export declare const MissingAutoInstall: Story;
+export declare const MissingManual: Story;
+export declare const Error: Story;
+export declare const WithLogs: Story;
+export declare const AfterInstall: Story;
+//# sourceMappingURL=tool-detail-drawer.stories.d.ts.map

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-detail-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-detail-drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAmBxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAYvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAC"}

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.stories.js

@@ -0,0 +1,116 @@
+import { ToolDetailDrawer } from './tool-detail-drawer.js';
+const baseTool = {
+    id: 'tmux',
+    name: 'tmux',
+    summary: 'Terminal multiplexer',
+    description: 'tmux is a terminal multiplexer for Unix-like operating systems. It allows multiple terminal sessions to be accessed simultaneously in a single window.',
+    tags: ['terminal'],
+    iconUrl: 'https://cdn.simpleicons.org/tmux',
+    autoInstall: true,
+    required: false,
+    openDirectory: 'tmux new-session -c {dir}',
+    documentationUrl: 'https://github.com/tmux/tmux/wiki',
+    installCommand: 'sudo apt-get install -y tmux',
+    status: { status: 'missing', toolName: 'tmux' },
+};
+const meta = {
+    title: 'Features/ToolDetailDrawer',
+    component: ToolDetailDrawer,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    args: {
+        tool: baseTool,
+        open: true,
+        onClose: () => undefined,
+    },
+};
+export default meta;
+export const Installed = {
+    args: {
+        tool: {
+            ...baseTool,
+            status: { status: 'available', toolName: 'tmux' },
+        },
+        open: true,
+    },
+};
+export const MissingAutoInstall = {
+    args: {
+        tool: {
+            ...baseTool,
+            status: { status: 'missing', toolName: 'tmux' },
+            autoInstall: true,
+        },
+        open: true,
+    },
+};
+export const MissingManual = {
+    args: {
+        tool: {
+            ...baseTool,
+            status: { status: 'missing', toolName: 'tmux' },
+            autoInstall: false,
+        },
+        open: true,
+    },
+};
+export const Error = {
+    args: {
+        tool: {
+            ...baseTool,
+            status: {
+                status: 'error',
+                toolName: 'tmux',
+                errorMessage: 'Permission denied: /usr/bin/tmux',
+            },
+        },
+        open: true,
+    },
+};
+export const WithLogs = {
+    args: {
+        tool: baseTool,
+        open: true,
+    },
+    parameters: {
+        mockData: {
+            useToolInstallStream: {
+                logs: [
+                    'Reading package lists...',
+                    'Building dependency tree...',
+                    'Reading state information...',
+                    'The following NEW packages will be installed:',
+                    '  tmux',
+                    'Setting up tmux (3.3a-3) ...',
+                ],
+                status: 'streaming',
+                result: null,
+            },
+        },
+    },
+};
+export const AfterInstall = {
+    args: {
+        tool: {
+            ...baseTool,
+            status: { status: 'available', toolName: 'tmux' },
+        },
+        open: true,
+    },
+    parameters: {
+        mockData: {
+            useToolInstallStream: {
+                logs: [
+                    'Reading package lists...',
+                    'Building dependency tree...',
+                    'Setting up tmux (3.3a-3) ...',
+                    'Processing triggers...',
+                ],
+                status: 'done',
+                result: { status: 'available', toolName: 'tmux' },
+            },
+        },
+    },
+};

package/dist/src/presentation/web/components/ui/alert-dialog.d.ts

@@ -4,7 +4,7 @@ import { Button } from '../ui/button.js';
 declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, onClick, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
     size?: 'default' | 'sm';
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/presentation/web/components/ui/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAE3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAEhG;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,2CAeA;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAWzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAE3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAEhG;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAiB3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,2CAeA;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW9E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAWzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}

package/dist/src/presentation/web/components/ui/alert-dialog.js

@@ -12,8 +12,13 @@ function AlertDialogTrigger({ ...props }) {
 function AlertDialogPortal({ ...props }) {
     return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
-function AlertDialogOverlay({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
+function AlertDialogOverlay({ className, onClick, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), onClick: (e) => {
+            // Prevent overlay clicks from propagating to document-level handlers
+            // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
+            e.stopPropagation();
+            onClick?.(e);
+        }, ...props }));
 }
 function AlertDialogContent({ className, size = 'default', ...props }) {
     return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg', className), ...props })] }));

package/dist/src/presentation/web/components/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAElF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKlF,CAAC;AAGF,QAAA,MAAM,WAAW,oKASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAkBjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAElF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKlF,CAAC;AAGF,QAAA,MAAM,WAAW,oKASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

package/dist/src/presentation/web/components/ui/dialog.js

@@ -8,7 +8,12 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), ...props })));
+const DialogOverlay = React.forwardRef(({ className, onClick, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), onClick: (e) => {
+        // Prevent overlay clicks from propagating to document-level handlers
+        // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
+        e.stopPropagation();
+        onClick?.(e);
+    }, ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;

package/dist/src/presentation/web/hooks/use-tool-install-stream.d.ts

@@ -0,0 +1,10 @@
+import type { ToolInstallationStatus } from '../../../../packages/core/src/domain/generated/output.js';
+export type InstallStreamStatus = 'idle' | 'streaming' | 'done' | 'error';
+export interface UseToolInstallStreamResult {
+    logs: string[];
+    status: InstallStreamStatus;
+    result: ToolInstallationStatus | null;
+    startInstall: () => void;
+}
+export declare function useToolInstallStream(toolId: string): UseToolInstallStreamResult;
+//# sourceMappingURL=use-tool-install-stream.d.ts.map

package/dist/src/presentation/web/hooks/use-tool-install-stream.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tool-install-stream.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-tool-install-stream.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,mBAAmB,CAAC;IAC5B,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACtC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,0BAA0B,CA2C/E"}

package/dist/src/presentation/web/hooks/use-tool-install-stream.js

@@ -0,0 +1,38 @@
+'use client';
+import { useState, useRef, useCallback, useEffect } from 'react';
+export function useToolInstallStream(toolId) {
+    const [logs, setLogs] = useState([]);
+    const [status, setStatus] = useState('idle');
+    const [result, setResult] = useState(null);
+    const esRef = useRef(null);
+    const cleanup = useCallback(() => {
+        if (esRef.current) {
+            esRef.current.close();
+            esRef.current = null;
+        }
+    }, []);
+    // Cleanup on unmount
+    useEffect(() => cleanup, [cleanup]);
+    const startInstall = useCallback(() => {
+        cleanup();
+        setLogs([]);
+        setResult(null);
+        setStatus('streaming');
+        const es = new EventSource(`/api/tools/${toolId}/install/stream`);
+        esRef.current = es;
+        es.onmessage = (event) => {
+            setLogs((prev) => [...prev, event.data]);
+        };
+        es.addEventListener('done', (event) => {
+            const installResult = JSON.parse(event.data);
+            setResult(installResult);
+            setStatus(installResult.status === 'error' ? 'error' : 'done');
+            cleanup();
+        });
+        es.onerror = () => {
+            setStatus('error');
+            cleanup();
+        };
+    }, [toolId, cleanup]);
+    return { logs, status, result, startInstall };
+}

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts

@@ -13,6 +13,8 @@ export interface LayoutOptions {
     /** Horizontal separation between nodes in the same rank (default 30) */
     nodesep?: number;
 }
+/** Canonical layout defaults for the control-center canvas. */
+export declare const CANVAS_LAYOUT_DEFAULTS: LayoutOptions;
 /**
  * Compute an automatic hierarchical layout for React Flow nodes and edges
  * using Dagre. Returns new node/edge arrays — never mutates the originals.

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAmCD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAkF/B"}
+{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,EAAE,aAIpC,CAAC;AAmCF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAoK/B"}

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -1,4 +1,10 @@
 import dagre from '@dagrejs/dagre';
+/** Canonical layout defaults for the control-center canvas. */
+export const CANVAS_LAYOUT_DEFAULTS = {
+    direction: 'LR',
+    ranksep: 200,
+    nodesep: 15,
+};
 /** Known node-type dimensions for the canvas node types */
 const NODE_DIMENSIONS = {
     featureNode: { width: 288, height: 140 },
@@ -62,16 +68,92 @@ export function layoutWithDagre(nodes, edges, opts = {}) {
     }
     dagre.layout(g);
     const { targetPosition, sourcePosition } = getHandlePositions(direction);
-    const result = [];
-    // Map laid-out nodes, converting dagre center-coords to React Flow top-left
+    const isHorizontal = direction === 'LR' || direction === 'RL';
+    // Collect dagre center positions keyed by node id
+    const centerMap = new Map();
     for (const node of graphNodes) {
-        const pos = g.node(node.id);
+        const dagreNode = g.node(node.id);
         const size = getNodeSize(node, nodeSize);
+        centerMap.set(node.id, { cx: dagreNode.x, cy: dagreNode.y, w: size.width, h: size.height });
+    }
+    // Post-process: center each group of children around their parent's
+    // secondary-axis center so the edge fans out symmetrically.
+    // Build parent→children map from the edges.
+    const childrenOf = new Map();
+    for (const edge of edges) {
+        if (!centerMap.has(edge.source) || !centerMap.has(edge.target))
+            continue;
+        if (!childrenOf.has(edge.source))
+            childrenOf.set(edge.source, []);
+        childrenOf.get(edge.source).push(edge.target);
+    }
+    for (const [parentId, childIds] of childrenOf) {
+        if (childIds.length <= 1)
+            continue;
+        const parent = centerMap.get(parentId);
+        const parentCenter = isHorizontal ? parent.cy : parent.cx;
+        // Sort children by their current secondary-axis position
+        const sorted = childIds
+            .filter((id) => centerMap.has(id))
+            .sort((a, b) => {
+            const pa = centerMap.get(a);
+            const pb = centerMap.get(b);
+            return isHorizontal ? pa.cy - pb.cy : pa.cx - pb.cx;
+        });
+        // Compute the current center of the children group
+        const first = centerMap.get(sorted[0]);
+        const last = centerMap.get(sorted[sorted.length - 1]);
+        const groupCenter = isHorizontal ? (first.cy + last.cy) / 2 : (first.cx + last.cx) / 2;
+        // Shift all children so the group center aligns with the parent center
+        const shift = parentCenter - groupCenter;
+        if (Math.abs(shift) > 1) {
+            for (const childId of sorted) {
+                const c = centerMap.get(childId);
+                if (isHorizontal) {
+                    c.cy += shift;
+                }
+                else {
+                    c.cx += shift;
+                }
+            }
+        }
+    }
+    // Enforce input-order within each sibling group so that the caller's
+    // sort (e.g. by createdAt) is respected on the secondary axis.
+    const inputIndex = new Map();
+    for (let i = 0; i < graphNodes.length; i++) {
+        inputIndex.set(graphNodes[i].id, i);
+    }
+    for (const [, childIds] of childrenOf) {
+        const valid = childIds.filter((id) => centerMap.has(id));
+        if (valid.length <= 1)
+            continue;
+        // Collect current secondary-axis positions, sorted ascending
+        const positions = valid
+            .map((id) => (isHorizontal ? centerMap.get(id).cy : centerMap.get(id).cx))
+            .sort((a, b) => a - b);
+        // Sort children by input index (preserves caller's ordering, e.g. createdAt)
+        const byInput = [...valid].sort((a, b) => (inputIndex.get(a) ?? 0) - (inputIndex.get(b) ?? 0));
+        // Assign sorted positions in input order
+        for (let i = 0; i < byInput.length; i++) {
+            const c = centerMap.get(byInput[i]);
+            if (isHorizontal) {
+                c.cy = positions[i];
+            }
+            else {
+                c.cx = positions[i];
+            }
+        }
+    }
+    // Build result array converting center-coords to React Flow top-left
+    const result = [];
+    for (const node of graphNodes) {
+        const c = centerMap.get(node.id);
         result.push({
             ...node,
             targetPosition,
             sourcePosition,
-            position: { x: pos.x - size.width / 2, y: pos.y - size.height / 2 },
+            position: { x: c.cx - c.w / 2, y: c.cy - c.h / 2 },
         });
     }
     // Place disconnected nodes after the laid-out graph so they don't overlap