@shepai/cli 1.72.7 → 1.72.8-pr216.234c716

package/web/.next/standalone/src/presentation/web/app/actions/get-graph-data.ts

@@ -0,0 +1,12 @@
+'use server';
+
+import { getGraphData } from '@/app/(dashboard)/get-graph-data';
+
+/**
+ * Server action that fetches fresh graph nodes and edges.
+ * Used as a lightweight polling fallback for active features,
+ * avoiding full router.refresh() page re-renders.
+ */
+export async function fetchGraphData() {
+  return getGraphData();
+}

package/web/.next/standalone/src/presentation/web/app/api/agent-events/route.ts

@@ -44,13 +44,16 @@ interface CachedFeatureState {
  * Maps SdlcLifecycle values to agent graph node names so the client
  * can derive the correct FeatureLifecyclePhase via mapPhaseNameToLifecycle().
  */
-const LIFECYCLE_TO_NODE: Partial<Record<SdlcLifecycle, string>> = {
+const LIFECYCLE_TO_NODE: Record<SdlcLifecycle, string> = {
+  [SdlcLifecycle.Started]: 'requirements',
   [SdlcLifecycle.Analyze]: 'analyze',
   [SdlcLifecycle.Requirements]: 'requirements',
   [SdlcLifecycle.Research]: 'research',
   [SdlcLifecycle.Planning]: 'plan',
   [SdlcLifecycle.Implementation]: 'implement',
   [SdlcLifecycle.Review]: 'merge',
+  [SdlcLifecycle.Maintain]: 'maintain',
+  [SdlcLifecycle.Blocked]: 'blocked',
 };
 
 const STATUS_TO_EVENT: Partial<

package/web/.next/standalone/src/presentation/web/app/api/tools/[id]/install/route.ts

@@ -1,7 +1,14 @@
 import { NextResponse } from 'next/server';
 import { resolve } from '@/lib/server-container';
 import type { InstallToolUseCase } from '@shepai/core/application/use-cases/tools/install-tool.use-case';
-import { TOOL_METADATA } from '@shepai/core/infrastructure/services/tool-installer/tool-metadata';
+import type { ToolInstallationStatus } from '@shepai/core/domain/generated/output';
+
+// NOTE: Do NOT import TOOL_METADATA directly in API routes.
+// The module uses import.meta.url + fs.readdirSync to load JSON files,
+// which breaks when Turbopack bundles it (import.meta.url resolves to
+// the bundled chunk location where the tools/ directory doesn't exist).
+// Tool validation is delegated to the use case via the DI container,
+// where the module loads correctly in the Node.js CLI bootstrap context.
 
 export async function POST(
   _request: Request,
@@ -9,13 +16,14 @@ export async function POST(
 ): Promise<NextResponse> {
   const { id } = await params;
 
-  if (!TOOL_METADATA[id]) {
-    return NextResponse.json({ error: 'Tool not found' }, { status: 404 });
-  }
-
   try {
     const useCase = resolve<InstallToolUseCase>('InstallToolUseCase');
-    const status = await useCase.execute(id);
+    const status: ToolInstallationStatus = await useCase.execute(id);
+
+    if (status.status === 'error') {
+      return NextResponse.json({ error: status.errorMessage }, { status: 500 });
+    }
+
     return NextResponse.json({ status });
   } catch (error: unknown) {
     const message = error instanceof Error ? error.message : 'Failed to install tool';

package/web/.next/standalone/src/presentation/web/app/api/tools/[id]/install/stream/route.ts

@@ -0,0 +1,42 @@
+import { resolve } from '@/lib/server-container';
+import type { InstallToolUseCase } from '@shepai/core/application/use-cases/tools/install-tool.use-case';
+
+// Force dynamic — SSE streams must never be statically optimized or cached
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+): Promise<Response> {
+  const { id } = await params;
+  const useCase = resolve<InstallToolUseCase>('InstallToolUseCase');
+
+  const encoder = new TextEncoder();
+  const stream = new ReadableStream({
+    async start(controller) {
+      try {
+        const status = await useCase.execute(id, (chunk: string) => {
+          controller.enqueue(encoder.encode(`data: ${chunk.replace(/\n/g, '\ndata: ')}\n\n`));
+        });
+        controller.enqueue(encoder.encode(`event: done\ndata: ${JSON.stringify(status)}\n\n`));
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Installation failed';
+        controller.enqueue(
+          encoder.encode(
+            `event: done\ndata: ${JSON.stringify({ status: 'error', toolName: id, errorMessage: message })}\n\n`
+          )
+        );
+      } finally {
+        controller.close();
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  });
+}

package/web/.next/standalone/src/presentation/web/components/common/base-drawer/base-drawer.tsx

@@ -12,6 +12,8 @@ import {
   DrawerHeader,
   DrawerFooter,
   DrawerOverlay,
+  DrawerTitle,
+  DrawerDescription,
 } from '@/components/ui/drawer';
 import { Separator } from '@/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -36,6 +38,7 @@ export interface BaseDrawerProps extends VariantProps<typeof drawerVariants> {
   modal?: boolean;
   /** When true, clicking anywhere outside the drawer closes it, ignoring `data-no-drawer-close` guards. */
   dismissOnOutsideClick?: boolean;
+  title?: string;
   header?: React.ReactNode;
   children: React.ReactNode;
   footer?: React.ReactNode;
@@ -49,6 +52,7 @@ export function BaseDrawer({
   onClose,
   modal = false,
   dismissOnOutsideClick = false,
+  title = 'Drawer',
   size,
   header,
   children,
@@ -101,8 +105,16 @@ export function BaseDrawer({
         showCloseButton={false}
         className={cn(drawerVariants({ size }), className)}
         data-testid={testId}
-        onInteractOutside={(e) => e.preventDefault()}
+        onInteractOutside={modal ? undefined : (e) => e.preventDefault()}
       >
+        {/* Visually hidden title & description required by Radix Dialog for accessibility */}
+        <DrawerTitle asChild>
+          <span className="sr-only">{title}</span>
+        </DrawerTitle>
+        <DrawerDescription asChild>
+          <span className="sr-only">{title}</span>
+        </DrawerDescription>
+
         {/* Close button */}
         <button
           type="button"

package/web/.next/standalone/src/presentation/web/components/common/feature-node/derive-feature-state.ts

@@ -120,6 +120,8 @@ const phaseNameToLifecycle: Record<string, FeatureLifecyclePhase> = {
   plan: 'implementation',
   implement: 'implementation',
   merge: 'review',
+  maintain: 'maintain',
+  blocked: 'requirements',
 };
 
 export function mapPhaseNameToLifecycle(

package/web/.next/standalone/src/presentation/web/components/features/control-center/use-control-center-state.ts

@@ -15,6 +15,7 @@ import {
 import { deleteFeature } from '@/app/actions/delete-feature';
 import { addRepository } from '@/app/actions/add-repository';
 import { deleteRepository } from '@/app/actions/delete-repository';
+import { fetchGraphData } from '@/app/actions/get-graph-data';
 import { useAgentEventsContext } from '@/hooks/agent-events-provider';
 import { useSoundAction } from '@/hooks/use-sound-action';
 import {
@@ -219,6 +220,75 @@ export function useControlCenterState(
     }
   }, [events]);
 
+  // Lightweight server-action polling fallback: fetches fresh graph data every 5s
+  // when any feature is in an active state. This avoids full router.refresh() while
+  // ensuring the UI stays in sync even if SSE events are missed.
+  useEffect(() => {
+    const hasActiveFeature = nodes.some((n) => {
+      if (n.type !== 'featureNode') return false;
+      const data = n.data as FeatureNodeData;
+      return (
+        data.state === 'running' || data.state === 'action-required' || data.state === 'creating'
+      );
+    });
+
+    if (!hasActiveFeature) return;
+
+    const interval = setInterval(async () => {
+      try {
+        const { nodes: serverNodes } = await fetchGraphData();
+        setNodes((currentNodes) => {
+          const serverById = new Map(serverNodes.map((n) => [n.id, n]));
+          let changed = false;
+
+          const merged = currentNodes.map((node) => {
+            const serverNode = serverById.get(node.id);
+            if (!serverNode || node.type !== 'featureNode') return node;
+            const currentData = node.data as FeatureNodeData;
+            const serverData = serverNode.data as FeatureNodeData;
+
+            // Only update if server data has different state or lifecycle
+            if (
+              currentData.state === serverData.state &&
+              currentData.lifecycle === serverData.lifecycle
+            ) {
+              return node;
+            }
+
+            changed = true;
+            return {
+              ...node,
+              data: {
+                ...currentData,
+                state: serverData.state,
+                lifecycle: serverData.lifecycle,
+                progress: serverData.progress,
+                ...(serverData.errorMessage && { errorMessage: serverData.errorMessage }),
+                ...(serverData.runtime && { runtime: serverData.runtime }),
+                ...(serverData.agentType && { agentType: serverData.agentType }),
+                ...(serverData.pr && { pr: serverData.pr }),
+                ...(serverData.blockedBy && { blockedBy: serverData.blockedBy }),
+              },
+            };
+          });
+
+          // Add any new server nodes that don't exist on client
+          const clientIds = new Set(currentNodes.map((n) => n.id));
+          const newNodes = serverNodes.filter((n) => !clientIds.has(n.id));
+          if (newNodes.length > 0) {
+            changed = true;
+          }
+
+          return changed || newNodes.length > 0 ? [...merged, ...newNodes] : currentNodes;
+        });
+      } catch {
+        // Silently ignore polling errors — SSE is the primary mechanism
+      }
+    }, 5_000);
+
+    return () => clearInterval(interval);
+  }, [nodes]);
+
   const onNodesChange = useCallback((changes: NodeChange<CanvasNodeType>[]) => {
     setNodes((ns) => applyNodeChanges(changes, ns));
   }, []);

package/web/.next/standalone/src/presentation/web/components/features/features-canvas/features-canvas.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo } from 'react';
-import { ReactFlow, Background, Controls, ReactFlowProvider } from '@xyflow/react';
+import { ReactFlow, Background, Controls } from '@xyflow/react';
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
 import { Plus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -163,28 +163,26 @@ export function FeaturesCanvas({
       data-no-drawer-close
       className="pointer-events-auto h-full w-full"
     >
-      <ReactFlowProvider>
-        <ReactFlow
-          nodes={enrichedNodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          isValidConnection={isValidConnection}
-          onConnect={onConnect}
-          onNodesChange={onNodesChange}
-          onNodeClick={onNodeClick}
-          onPaneClick={onPaneClick}
-          onMoveStart={onCanvasDrag}
-          defaultViewport={{ x: 30, y: 30, zoom: 0.85 }}
-          nodesDraggable={false}
-          nodesConnectable={false}
-          elementsSelectable={false}
-        >
-          <Background />
-          <Controls />
-          {toolbar}
-        </ReactFlow>
-      </ReactFlowProvider>
+      <ReactFlow
+        nodes={enrichedNodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        isValidConnection={isValidConnection}
+        onConnect={onConnect}
+        onNodesChange={onNodesChange}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        onMoveStart={onCanvasDrag}
+        defaultViewport={{ x: 30, y: 30, zoom: 0.85 }}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+      >
+        <Background />
+        <Controls />
+        {toolbar}
+      </ReactFlow>
     </div>
   );
 }

package/web/.next/standalone/src/presentation/web/components/features/index.ts

@@ -1,4 +1,4 @@
 export { FeaturesCanvas, type FeaturesCanvasProps } from './features-canvas';
 export { ToolsPageClient, type ToolsPageClientProps } from './tools';
 export { ToolCard, type ToolCardProps } from './tools';
-export { InstallInstructions, type InstallInstructionsProps } from './tools';
+export { ToolDetailDrawer, type ToolDetailDrawerProps } from './tools';

package/web/.next/standalone/src/presentation/web/components/features/tools/index.ts

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

package/web/.next/standalone/src/presentation/web/components/features/tools/tool-card.stories.tsx

@@ -16,6 +16,9 @@ const installedIdeTool: ToolItem = {
   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: ToolItem = {
@@ -32,6 +35,9 @@ const installedNoLaunchTool: ToolItem = {
   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: ToolItem = {
@@ -48,6 +54,9 @@ const missingAutoInstallTool: ToolItem = {
   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: ToolItem = {
@@ -64,6 +73,9 @@ const missingManualTool: ToolItem = {
   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: ToolItem = {
@@ -80,6 +92,9 @@ const cliAgentTool: ToolItem = {
   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: ToolItem = {
@@ -96,6 +111,9 @@ const vcsTool: ToolItem = {
   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: Meta<typeof ToolCard> = {

package/web/.next/standalone/src/presentation/web/components/features/tools/tool-card.tsx

@@ -2,7 +2,6 @@
 
 import { useState, useTransition } from 'react';
 import {
-  ExternalLink,
   Loader2,
   Rocket,
   Download,
@@ -10,12 +9,14 @@ import {
   Terminal,
   GitBranch,
   CircleX,
-  Check,
+  Circle,
+  CheckCircle2,
   Package,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
-import { InstallInstructions } from './install-instructions';
+import { ToolDetailDrawer } from './tool-detail-drawer';
 import type { ToolItem } from '@shepai/core/application/use-cases/tools/list-tools.use-case';
 
 export interface ToolCardProps {
@@ -32,34 +33,39 @@ const TAG_CONFIG: Record<string, { label: string; icon: typeof Monitor }> = {
 };
 
 export function ToolCard({ tool, onRefresh, className }: ToolCardProps) {
-  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: React.MouseEvent) {
+    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: React.MouseEvent) {
+    e.stopPropagation();
+    setAutoStartInstall(tool.autoInstall);
+    setDrawerOpen(true);
   }
 
   return (
     <>
       <div
         data-testid="tool-card"
+        onClick={handleCardClick}
         className={cn(
-          'bg-card group flex h-30 w-full flex-col rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md',
+          'bg-card group flex h-30 w-full cursor-pointer flex-col rounded-lg border p-3 transition-shadow hover:shadow-md',
           className
         )}
       >
@@ -89,7 +95,7 @@ export function ToolCard({ tool, onRefresh, className }: ToolCardProps) {
               return (
                 <span
                   key={tag}
-                  className="bg-muted text-muted-foreground inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium"
+                  className="text-muted-foreground/70 inline-flex items-center gap-0.5 text-[9px]"
                 >
                   <TagIcon className="h-2.5 w-2.5" />
                   {config.label}
@@ -117,72 +123,74 @@ export function ToolCard({ tool, onRefresh, className }: ToolCardProps) {
                 {tool.status.errorMessage ?? 'Error'}
               </span>
             ) : isInstalled ? (
-              <span className="flex items-center gap-1 text-[11px] text-emerald-600 dark:text-emerald-400">
-                <Check className="h-3 w-3" />
+              <span className="flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400">
+                <CheckCircle2 className="h-3 w-3" />
                 Installed
               </span>
             ) : (
-              <span className="text-muted-foreground text-[10px]">Not installed</span>
+              <span className="text-muted-foreground flex items-center gap-1 text-[10px]">
+                <Circle className="h-3 w-3" />
+                Not installed
+              </span>
             )}
             {tool.required ? (
-              <span className="text-muted-foreground text-[10px] italic">Required</span>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <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">
+                      Required
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    This tool is required for Shep to function properly
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             ) : null}
           </div>
 
-          {/* Action button */}
-          {isInstalled && canLaunch ? (
-            <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"
-            >
-              {isPending ? (
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-              ) : (
-                <Rocket className="mr-1 h-3 w-3" />
-              )}
-              Launch
-            </Button>
-          ) : !isInstalled && !isError && tool.autoInstall ? (
-            <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"
-            >
-              {isPending ? (
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-              ) : (
+          {/* Action buttons */}
+          <div className="flex items-center gap-1">
+            {isInstalled && canLaunch ? (
+              <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"
+              >
+                {isPending ? (
+                  <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+                ) : (
+                  <Rocket className="mr-1 h-3 w-3" />
+                )}
+                Launch
+              </Button>
+            ) : !isInstalled && !isError ? (
+              <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"
+              >
                 <Download className="mr-1 h-3 w-3" />
-              )}
-              {isPending ? 'Installing…' : 'Install'}
-            </Button>
-          ) : !isInstalled && !isError ? (
-            <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"
-            >
-              <ExternalLink className="mr-1 h-3 w-3" />
-              Install
-            </Button>
-          ) : null}
+                Install
+              </Button>
+            ) : null}
+          </div>
         </div>
       </div>
 
-      <InstallInstructions
+      <ToolDetailDrawer
         tool={tool}
-        open={installDrawerOpen}
-        onOpenChange={setInstallDrawerOpen}
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        onRefresh={onRefresh}
+        autoStart={autoStartInstall}
       />
     </>
   );