@shepai/cli 1.72.6 → 1.72.7-pr187.0bb1028

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.js

@@ -3,7 +3,7 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { applyNodeChanges } from '@xyflow/react';
-import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+import { layoutWithDagre, CANVAS_LAYOUT_DEFAULTS, } from '../../../lib/layout-with-dagre.js';
 import { deleteFeature } from '../../../app/actions/delete-feature.js';
 import { addRepository } from '../../../app/actions/add-repository.js';
 import { deleteRepository } from '../../../app/actions/delete-repository.js';
@@ -11,9 +11,7 @@ import { useAgentEventsContext } from '../../../hooks/agent-events-provider.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { mapEventTypeToState, mapPhaseNameToLifecycle, } from '../../common/feature-node/derive-feature-state.js';
 let nextFeatureId = 0;
-export function useControlCenterState(initialNodes, initialEdges, 
-/** When true, background router.refresh() calls (polling / SSE debounce) are suppressed. */
-isRefreshBlocked) {
+export function useControlCenterState(initialNodes, initialEdges) {
     const router = useRouter();
     const [nodes, setNodes] = useState(initialNodes);
     // eslint-disable-next-line react/hook-use-state -- raw setter renamed; public setEdges wrapper keeps edgesRef in sync
@@ -30,7 +28,7 @@ isRefreshBlocked) {
     }, []);
     const deleteSound = useSoundAction('delete');
     const createSound = useSoundAction('create');
-    // Sync server props into local state when router.refresh() delivers new data
+    // Sync server props into local state when parent re-renders with new data
     const initialNodeKey = initialNodes
         .map((n) => n.id)
         .sort()
@@ -61,8 +59,9 @@ isRefreshBlocked) {
             const creatingNodes = currentNodes.filter((n) => n.type === 'featureNode' &&
                 n.data.state === 'creating' &&
                 !serverIds.has(n.id));
-            // Merge server nodes with client positions
-            return initialNodes.map((serverNode) => {
+            // Merge server nodes with client positions, tracking if relayout is needed
+            let needsRelayout = false;
+            const merged = initialNodes.map((serverNode) => {
                 // Node already exists on canvas — keep its position, update data
                 const existing = currentById.get(serverNode.id);
                 if (existing) {
@@ -73,17 +72,28 @@ isRefreshBlocked) {
                     const donor = creatingNodes.shift();
                     return { ...serverNode, position: donor.position };
                 }
-                // Truly new node with no optimistic counterpart — use server position
+                // Truly new node with no optimistic counterpart — needs relayout
+                needsRelayout = true;
                 return serverNode;
             });
+            // Also check if non-creating nodes were removed (graph got smaller)
+            if (!needsRelayout) {
+                needsRelayout = currentNodes.some((cn) => !serverIds.has(cn.id) &&
+                    !(cn.type === 'featureNode' && cn.data.state === 'creating'));
+            }
+            if (needsRelayout) {
+                const layoutResult = layoutWithDagre(merged, initialEdges, CANVAS_LAYOUT_DEFAULTS);
+                setEdges(layoutResult.edges);
+                return layoutResult.nodes;
+            }
+            return merged;
         });
-    }, [initialNodeKey, initialNodes]);
+    }, [initialNodeKey, initialNodes, initialEdges, setEdges]);
     useEffect(() => {
         setEdges(initialEdges);
     }, [initialEdgeKey, initialEdges, setEdges]);
-    // Fallback notifications from server-refresh state transitions.
-    // Fires only when SSE didn't already deliver the matching event for a feature,
-    // e.g. when the SSE connection was down or the event was seeded into the cache.
+    // Fallback notifications from server-prop state transitions.
+    // Fires only when SSE didn't already deliver the matching event for a feature.
     const { events } = useAgentEventsContext();
     useEffect(() => {
         const prevStates = prevFeatureStatesRef.current;
@@ -118,14 +128,10 @@ isRefreshBlocked) {
             prevStates.set(node.id, data.state);
         }
     }, [initialDataKey, initialNodes, events, router]);
-    // Targeted optimistic updates from SSE agent events + debounced reconciliation.
+    // Targeted optimistic updates from SSE agent events.
     // Uses `events` array (not `lastEvent`) so that React batching cannot silently
     // drop events when multiple SSE messages arrive in the same tick.
     const processedEventCountRef = useRef(0);
-    const reconcileTimerRef = useRef(undefined);
-    useEffect(() => {
-        return () => clearTimeout(reconcileTimerRef.current);
-    }, []);
     useEffect(() => {
         if (events.length <= processedEventCountRef.current)
             return;
@@ -151,31 +157,7 @@ isRefreshBlocked) {
                 };
             }));
         }
-        // Debounced background reconciliation (3s after last SSE event)
-        clearTimeout(reconcileTimerRef.current);
-        reconcileTimerRef.current = setTimeout(() => {
-            if (!isRefreshBlocked?.())
-                router.refresh();
-        }, 3000);
-    }, [events, router, isRefreshBlocked]);
-    // Periodic polling fallback: refresh server data every 5s when any feature
-    // is in an active state (running/action-required). This ensures the UI stays
-    // current even if the SSE connection drops — belt-and-suspenders alongside SSE.
-    useEffect(() => {
-        const hasActiveFeature = nodes.some((n) => {
-            if (n.type !== 'featureNode')
-                return false;
-            const data = n.data;
-            return (data.state === 'running' || data.state === 'action-required' || data.state === 'creating');
-        });
-        if (!hasActiveFeature)
-            return;
-        const interval = setInterval(() => {
-            if (!isRefreshBlocked?.())
-                router.refresh();
-        }, 5_000);
-        return () => clearInterval(interval);
-    }, [nodes, router, isRefreshBlocked]);
+    }, [events]);
     const onNodesChange = useCallback((changes) => {
         setNodes((ns) => applyNodeChanges(changes, ns));
     }, []);
@@ -220,202 +202,155 @@ isRefreshBlocked) {
             branch: dataOverride?.branch ?? '',
         };
         setNodes((currentNodes) => {
-            // Read edges from ref to avoid closure dependency on `edges` state.
-            // edgesRef is kept in sync by the setEdges wrapper.
-            const siblingIds = sourceNodeId
-                ? new Set(edgesRef.current.filter((e) => e.source === sourceNodeId).map((e) => e.target))
-                : new Set();
-            const siblings = currentNodes.filter((n) => siblingIds.has(n.id));
-            let position;
-            if (siblings.length > 0) {
-                // Place below the bottom-most sibling, matching X
-                const sortedYs = siblings.map((n) => n.position.y).sort((a, b) => a - b);
-                const maxY = sortedYs[sortedYs.length - 1];
-                // Derive gap from existing spacing between siblings, or use default
-                const gap = sortedYs.length > 1 ? sortedYs[1] - sortedYs[0] : 160;
-                position = { x: siblings[0].position.x, y: maxY + gap };
-            }
-            else if (sourceNodeId) {
-                // First child — position to the right of parent
-                const parent = currentNodes.find((n) => n.id === sourceNodeId);
-                // Parent width (288) + 200px gap matching dagre ranksep
-                const xOffset = 488;
-                position = parent
-                    ? { x: parent.position.x + xOffset, y: parent.position.y }
-                    : { x: 400, y: 200 };
-            }
-            else {
-                // Standalone feature — place below all existing nodes
-                const maxY = currentNodes.length > 0 ? Math.max(...currentNodes.map((n) => n.position.y)) : 0;
-                position = { x: 400, y: currentNodes.length > 0 ? maxY + 160 : 200 };
-            }
-            // The new node's bottom edge (featureNode height = 140)
-            const newBottom = position.y + 140;
-            // Find the old group bottom before adding the new node
-            const groupNodeIds = new Set([sourceNodeId, ...siblingIds]);
-            const oldGroupBottom = currentNodes
-                .filter((n) => groupNodeIds.has(n.id))
-                .reduce((max, n) => {
-                const h = n.type === 'featureNode' ? 140 : 50;
-                return Math.max(max, n.position.y + h);
-            }, 0);
-            // Shift amount: how much the group grew past its old bottom
-            const shift = Math.max(0, newBottom - oldGroupBottom);
-            // Push down all nodes that are below the old group bottom
-            const shifted = shift > 0
-                ? currentNodes.map((n) => {
-                    if (groupNodeIds.has(n.id) || siblingIds.has(n.id))
-                        return n;
-                    if (n.position.y >= oldGroupBottom) {
-                        return { ...n, position: { ...n.position, y: n.position.y + shift } };
-                    }
-                    return n;
-                })
-                : currentNodes;
-            // Re-center the parent node vertically to its children
-            const recentered = sourceNodeId
-                ? shifted.map((n) => {
-                    if (n.id !== sourceNodeId)
-                        return n;
-                    const allChildYs = [...siblings.map((s) => s.position.y), position.y];
-                    const groupCenter = (Math.min(...allChildYs) + Math.max(...allChildYs) + 140) / 2;
-                    const parentHeight = n.type === 'featureNode' ? 140 : 50;
-                    return {
-                        ...n,
-                        position: { ...n.position, y: groupCenter - parentHeight / 2 },
-                    };
-                })
-                : shifted;
-            return [
-                ...recentered,
-                {
-                    id,
-                    type: 'featureNode',
-                    position,
-                    data: newFeatureData,
-                },
-            ];
-        });
-        if (sourceNodeId) {
-            setEdges((currentEdges) => [
-                ...currentEdges,
-                {
+            const newNode = {
+                id,
+                type: 'featureNode',
+                position: { x: 0, y: 0 },
+                data: newFeatureData,
+            };
+            const newEdge = sourceNodeId
+                ? {
                     id: edgeType === 'dependencyEdge'
                         ? `dep-${sourceNodeId}-${id}`
                         : `edge-${sourceNodeId}-${id}`,
                     source: sourceNodeId,
                     target: id,
                     ...(edgeType ? { type: edgeType } : { style: { strokeDasharray: '5 5' } }),
-                },
-            ]);
-        }
+                }
+                : null;
+            const allEdges = newEdge
+                ? [...edgesRef.current.filter((e) => e.id !== newEdge.id), newEdge]
+                : edgesRef.current;
+            // Insert the new node after the last sibling connected to the same source,
+            // so dagre's input-order preservation keeps repo groups together.
+            let insertIndex = currentNodes.length;
+            if (sourceNodeId) {
+                const siblingIds = new Set(allEdges.filter((e) => e.source === sourceNodeId).map((e) => e.target));
+                for (let i = currentNodes.length - 1; i >= 0; i--) {
+                    if (siblingIds.has(currentNodes[i].id)) {
+                        insertIndex = i + 1;
+                        break;
+                    }
+                }
+            }
+            const allNodes = [
+                ...currentNodes.slice(0, insertIndex),
+                newNode,
+                ...currentNodes.slice(insertIndex),
+            ];
+            // Run dagre layout on the full graph so the new node is positioned consistently
+            const layoutResult = layoutWithDagre(allNodes, allEdges, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
+        });
         return id;
     }, [setEdges]);
-    const handleDeleteFeature = useCallback(async (featureId) => {
-        try {
-            const result = await deleteFeature(featureId);
+    const handleDeleteFeature = useCallback((featureId) => {
+        const nodeId = `feat-${featureId}`;
+        // Snapshot current state for rollback
+        const prevNodes = nodes;
+        const prevEdges = edgesRef.current;
+        // Optimistic removal — update UI immediately
+        setNodes((currentNodes) => {
+            const remainingNodes = currentNodes.filter((n) => n.id !== nodeId);
+            const remainingEdges = edgesRef.current.filter((e) => e.source !== nodeId && e.target !== nodeId);
+            const layoutResult = layoutWithDagre(remainingNodes, remainingEdges, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
+        });
+        deleteSound.play();
+        toast.success('Feature deleted successfully');
+        router.push('/');
+        // Persist in background — rollback on failure
+        deleteFeature(featureId)
+            .then((result) => {
             if (result.error) {
+                setNodes(prevNodes);
+                setEdges(prevEdges);
                 toast.error(result.error);
-                return;
             }
-            setNodes((currentNodes) => {
-                const remainingNodes = currentNodes.filter((n) => n.id !== featureId);
-                const remainingEdges = edges.filter((e) => e.source !== featureId && e.target !== featureId);
-                const layoutResult = layoutWithDagre(remainingNodes, remainingEdges, {
-                    direction: 'LR',
-                    ranksep: 200,
-                    nodesep: 60,
-                });
-                setEdges(layoutResult.edges);
-                return layoutResult.nodes;
-            });
-            deleteSound.play();
-            toast.success('Feature deleted successfully');
-            router.refresh();
-        }
-        catch {
+        })
+            .catch(() => {
+            setNodes(prevNodes);
+            setEdges(prevEdges);
             toast.error('Failed to delete feature');
-        }
-    }, [router, edges, deleteSound, setEdges]);
+        });
+    }, [nodes, router, deleteSound, setEdges]);
     const handleDeleteRepository = useCallback(async (repositoryId) => {
         const repoNodeId = `repo-${repositoryId}`;
-        // Optimistic: remove node and its edges immediately
-        setNodes((prev) => prev.filter((n) => n.id !== repoNodeId));
-        setEdges((prev) => prev.filter((e) => e.source !== repoNodeId && e.target !== repoNodeId));
+        // Snapshot for rollback
+        const prevNodes = nodes;
+        const prevEdges = edgesRef.current;
+        // Optimistic: remove repo node, its child feature nodes, and all related edges
+        setNodes((currentNodes) => {
+            // Find feature node IDs connected to this repo via edges
+            const childFeatureIds = new Set(edgesRef.current.filter((e) => e.source === repoNodeId).map((e) => e.target));
+            const remainingNodes = currentNodes.filter((n) => n.id !== repoNodeId && !childFeatureIds.has(n.id));
+            const remainingEdges = edgesRef.current.filter((e) => e.source !== repoNodeId &&
+                e.target !== repoNodeId &&
+                !childFeatureIds.has(e.source) &&
+                !childFeatureIds.has(e.target));
+            const layoutResult = layoutWithDagre(remainingNodes, remainingEdges, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
+        });
         try {
             const result = await deleteRepository(repositoryId);
             if (!result.success) {
                 toast.error(result.error ?? 'Failed to remove repository');
-                router.refresh();
+                setNodes(prevNodes);
+                setEdges(prevEdges);
                 return;
             }
             deleteSound.play();
             toast.success('Repository removed');
-            router.refresh();
         }
         catch {
             toast.error('Failed to remove repository');
-            router.refresh();
+            setNodes(prevNodes);
+            setEdges(prevEdges);
         }
-    }, [router, deleteSound, setEdges]);
+    }, [nodes, deleteSound, setEdges]);
     const handleLayout = useCallback((direction) => {
         setNodes((currentNodes) => {
-            const currentEdges = edges;
-            const result = layoutWithDagre(currentNodes, currentEdges, {
+            const result = layoutWithDagre(currentNodes, edgesRef.current, {
+                ...CANVAS_LAYOUT_DEFAULTS,
                 direction,
-                ranksep: 60,
-                nodesep: 20,
             });
             setEdges(result.edges);
             return result.nodes;
         });
-    }, [edges, setEdges]);
+    }, [setEdges]);
     const handleAddRepository = useCallback((path) => {
         const tempId = `repo-temp-${Date.now()}`;
         const repoName = path
             .replace(/[\\/]+$/, '')
             .split(/[\\/]/)
             .pop() ?? path;
-        // Optimistic UI: add node immediately
-        let savedAddRepoY = 0;
+        // Optimistic UI: add node and re-layout immediately
         setNodes((currentNodes) => {
-            const repoNodes = currentNodes.filter((n) => n.type === 'repositoryNode');
-            const addRepoNode = currentNodes.find((n) => n.type === 'addRepositoryNode');
-            // Save addRepoNode's original Y for rollback on error
-            if (addRepoNode)
-                savedAddRepoY = addRepoNode.position.y;
-            // Place in the repo column, at the addRepoNode's current position
-            const repoX = repoNodes[0]?.position.x ?? addRepoNode?.position.x ?? 50;
-            const repoHeight = 50; // repositoryNode height
-            const gap = 15; // match dagre nodesep
-            const position = {
-                x: repoX,
-                y: addRepoNode ? addRepoNode.position.y : 0,
-            };
             const newNode = {
                 id: tempId,
                 type: 'repositoryNode',
-                position,
+                position: { x: 0, y: 0 },
                 data: { name: repoName, repositoryPath: path, id: tempId },
             };
-            // Shift addRepo button down by exactly one slot
-            const addRepoY = addRepoNode
-                ? addRepoNode.position.y + repoHeight + gap
-                : position.y + repoHeight + gap;
-            return currentNodes
-                .map((n) => n.type === 'addRepositoryNode' ? { ...n, position: { ...n.position, y: addRepoY } } : n)
-                .concat(newNode);
+            const allNodes = [...currentNodes, newNode];
+            const layoutResult = layoutWithDagre(allNodes, edgesRef.current, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
         });
         // Persist via server action
         addRepository({ path, name: repoName })
             .then((result) => {
             if (result.error) {
-                // Rollback optimistic node and restore addRepoNode position
-                setNodes((prev) => prev
-                    .filter((n) => n.id !== tempId)
-                    .map((n) => n.type === 'addRepositoryNode'
-                    ? { ...n, position: { ...n.position, y: savedAddRepoY } }
-                    : n));
+                // Rollback optimistic node and re-layout
+                setNodes((prev) => {
+                    const remaining = prev.filter((n) => n.id !== tempId);
+                    const layoutResult = layoutWithDagre(remaining, edgesRef.current, CANVAS_LAYOUT_DEFAULTS);
+                    setEdges(layoutResult.edges);
+                    return layoutResult.nodes;
+                });
                 toast.error(result.error);
                 return;
             }
@@ -436,18 +371,18 @@ isRefreshBlocked) {
                 id: e.id.replace(tempId, realId),
             })));
             createSound.play();
-            router.refresh();
         })
             .catch(() => {
-            // Rollback optimistic node and restore addRepoNode position
-            setNodes((prev) => prev
-                .filter((n) => n.id !== tempId)
-                .map((n) => n.type === 'addRepositoryNode'
-                ? { ...n, position: { ...n.position, y: savedAddRepoY } }
-                : n));
+            // Rollback optimistic node and re-layout
+            setNodes((prev) => {
+                const remaining = prev.filter((n) => n.id !== tempId);
+                const layoutResult = layoutWithDagre(remaining, edgesRef.current, CANVAS_LAYOUT_DEFAULTS);
+                setEdges(layoutResult.edges);
+                return layoutResult.nodes;
+            });
             toast.error('Failed to add repository');
         });
-    }, [router, createSound, setEdges]);
+    }, [createSound, setEdges]);
     return {
         nodes,
         edges,

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

@@ -1,5 +1,5 @@
 export { FeaturesCanvas, type FeaturesCanvasProps } from './features-canvas/index.js';
 export { ToolsPageClient, type ToolsPageClientProps } from './tools/index.js';
 export { ToolCard, type ToolCardProps } from './tools/index.js';
-export { InstallInstructions, type InstallInstructionsProps } from './tools/index.js';
+export { ToolDetailDrawer, type ToolDetailDrawerProps } from './tools/index.js';
 //# sourceMappingURL=index.d.ts.map

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":"AAmBA,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,2CAkKrE"}

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

@@ -1,10 +1,11 @@
 '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 { Loader2, Rocket, Download, Monitor, Terminal, GitBranch, CircleX, Circle, CheckCircle2, Package, } from 'lucide-react';
 import { Button } from '../../ui/button.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.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,29 +13,32 @@ 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';
     const canLaunch = isInstalled && Boolean(tool.openDirectory);
-    function handleLaunch() {
+    function handleLaunch(e) {
+        e.stopPropagation();
         startTransition(async () => {
             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();
-            }
-        });
+    function handleCardClick() {
+        setAutoStartInstall(false);
+        setDrawerOpen(true);
+    }
+    function handleInstallClick(e) {
+        e.stopPropagation();
+        setAutoStartInstall(tool.autoInstall);
+        setDrawerOpen(true);
     }
-    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 ? (
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "tool-card", onClick: handleCardClick, className: cn('bg-card group flex h-30 w-full cursor-pointer flex-col rounded-lg border p-3 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 })] }));
+                                    return (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5 text-[9px]", 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-[10px] text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "Installed"] })) : (_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-[10px]", children: [_jsx(Circle, { className: "h-3 w-3" }), "Not installed"] })), tool.required ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-400", children: "Required" }) }), _jsx(TooltipContent, { side: "top", children: "This tool is required for Shep to function properly" })] }) })) : null] }), _jsx("div", { className: "flex items-center gap-1", children: isInstalled && canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-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(Rocket, { className: "mr-1 h-3 w-3" })), "Launch"] })) : !isInstalled && !isError ? (_jsxs(Button, { size: "sm", variant: "default", onClick: handleInstallClick, "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-card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAmGvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAEjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC"}
+{"version":3,"file":"tool-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAqHvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAEjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC"}

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

@@ -13,6 +13,9 @@ const installedIdeTool = {
     documentationUrl: 'https://cursor.sh',
     installCommand: 'brew install --cask cursor',
     status: { status: 'available', toolName: 'cursor' },
+    author: 'Anysphere',
+    website: 'https://cursor.com',
+    platforms: ['linux', 'darwin', 'win32'],
 };
 const installedNoLaunchTool = {
     id: 'claude-code',
@@ -27,6 +30,9 @@ const installedNoLaunchTool = {
     documentationUrl: 'https://claude.ai',
     installCommand: 'npm install -g @anthropic-ai/claude-code',
     status: { status: 'available', toolName: 'claude-code' },
+    author: 'Anthropic',
+    website: 'https://claude.ai/code',
+    platforms: ['linux', 'darwin'],
 };
 const missingAutoInstallTool = {
     id: 'aider',
@@ -41,6 +47,9 @@ const missingAutoInstallTool = {
     documentationUrl: 'https://aider.chat',
     installCommand: 'pip install aider-chat',
     status: { status: 'missing', toolName: 'aider' },
+    author: 'Paul Gauthier',
+    website: 'https://aider.chat',
+    platforms: ['linux', 'darwin', 'win32'],
 };
 const missingManualTool = {
     id: 'vscode',
@@ -55,6 +64,9 @@ const missingManualTool = {
     documentationUrl: 'https://code.visualstudio.com',
     installCommand: 'brew install --cask visual-studio-code',
     status: { status: 'missing', toolName: 'vscode' },
+    author: 'Microsoft',
+    website: 'https://code.visualstudio.com',
+    platforms: ['linux', 'darwin', 'win32'],
 };
 const cliAgentTool = {
     id: 'cursor-cli',
@@ -69,6 +81,9 @@ const cliAgentTool = {
     documentationUrl: 'https://cursor.sh',
     installCommand: 'curl https://cursor.com/install -fsS | bash',
     status: { status: 'available', toolName: 'cursor-cli' },
+    author: 'Anysphere',
+    website: 'https://cursor.com',
+    platforms: ['linux', 'darwin', 'win32'],
 };
 const vcsTool = {
     id: 'gh',
@@ -83,6 +98,9 @@ const vcsTool = {
     documentationUrl: 'https://cli.github.com/manual/',
     installCommand: 'brew install gh',
     status: { status: 'available', toolName: 'gh' },
+    author: 'GitHub',
+    website: 'https://cli.github.com',
+    platforms: ['linux', 'darwin', 'win32'],
 };
 const meta = {
     title: 'Features/ToolCard',