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

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

@@ -2,7 +2,7 @@
 
 import { useState, useTransition } from 'react';
 import {
-  ExternalLink,
+  Info,
   Loader2,
   Rocket,
   Download,
@@ -15,7 +15,7 @@ import {
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 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,7 +32,8 @@ 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';
@@ -45,15 +46,6 @@ export function ToolCard({ tool, onRefresh, className }: ToolCardProps) {
     });
   }
 
-  function handleAutoInstall() {
-    startTransition(async () => {
-      const res = await fetch(`/api/tools/${tool.id}/install`, { method: 'POST' });
-      if (res.ok && onRefresh) {
-        await onRefresh();
-      }
-    });
-  }
-
   return (
     <>
       <div
@@ -129,60 +121,64 @@ export function ToolCard({ tool, onRefresh, className }: ToolCardProps) {
             ) : null}
           </div>
 
-          {/* Action button */}
-          {isInstalled && canLaunch ? (
+          {/* Action buttons */}
+          <div className="flex items-center gap-1">
             <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"
+              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"
             >
-              {isPending ? (
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-              ) : (
-                <Rocket className="mr-1 h-3 w-3" />
-              )}
-              Launch
+              <Info className="h-3.5 w-3.5" />
             </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" />
-              ) : (
+            {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 ? (
+              <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"
+              >
                 <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}
       />
     </>
   );

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

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToolDetailDrawer } from './tool-detail-drawer';
+import type { ToolItem } from '@shepai/core/application/use-cases/tools/list-tools.use-case';
+
+const baseTool: ToolItem = {
+  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: Meta<typeof ToolDetailDrawer> = {
+  title: 'Features/ToolDetailDrawer',
+  component: ToolDetailDrawer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    tool: baseTool,
+    open: true,
+    onClose: () => undefined,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Installed: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      status: { status: 'available', toolName: 'tmux' },
+    },
+    open: true,
+  },
+};
+
+export const MissingAutoInstall: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      status: { status: 'missing', toolName: 'tmux' },
+      autoInstall: true,
+    },
+    open: true,
+  },
+};
+
+export const MissingManual: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      status: { status: 'missing', toolName: 'tmux' },
+      autoInstall: false,
+    },
+    open: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      status: {
+        status: 'error',
+        toolName: 'tmux',
+        errorMessage: 'Permission denied: /usr/bin/tmux',
+      },
+    },
+    open: true,
+  },
+};
+
+export const WithLogs: Story = {
+  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: Story = {
+  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/web/.next/standalone/src/presentation/web/components/features/tools/tool-detail-drawer.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import {
+  Copy,
+  Check,
+  ExternalLink,
+  Download,
+  Rocket,
+  Loader2,
+  Monitor,
+  Terminal,
+  GitBranch,
+  Package,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { BaseDrawer } from '@/components/common/base-drawer/base-drawer';
+import { useToolInstallStream } from '@/hooks/use-tool-install-stream';
+import type { ToolItem } from '@shepai/core/application/use-cases/tools/list-tools.use-case';
+
+export interface ToolDetailDrawerProps {
+  tool: ToolItem;
+  open: boolean;
+  onClose: () => void;
+  onRefresh?: () => Promise<void>;
+  autoStart?: boolean;
+}
+
+const TAG_CONFIG: Record<string, { label: string; icon: typeof Monitor }> = {
+  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 }: { status: string }) {
+  if (status === 'available') {
+    return (
+      <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">
+        <Check className="h-3 w-3" />
+        Installed
+      </span>
+    );
+  }
+  if (status === 'error') {
+    return (
+      <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">
+        Error
+      </span>
+    );
+  }
+  return (
+    <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">
+      Missing
+    </span>
+  );
+}
+
+export function ToolDetailDrawer({
+  tool,
+  open,
+  onClose,
+  onRefresh,
+  autoStart,
+}: ToolDetailDrawerProps) {
+  const [copied, setCopied] = useState(false);
+  const [isLaunching, setIsLaunching] = useState(false);
+  const { logs, status, startInstall } = useToolInstallStream(tool.id);
+  const logRef = useRef<HTMLDivElement>(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 = (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        {tool.iconUrl ? (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img src={tool.iconUrl} alt="" width={24} height={24} className="shrink-0 dark:invert" />
+        ) : (
+          <Package className="text-muted-foreground h-6 w-6 shrink-0" />
+        )}
+        <h2 className="text-base font-bold">{tool.name}</h2>
+        <StatusBadge status={tool.status.status} />
+      </div>
+      <div className="flex items-center gap-1">
+        {tool.tags.map((tag) => {
+          const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
+          const TagIcon = config.icon;
+          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"
+            >
+              <TagIcon className="h-2.5 w-2.5" />
+              {config.label}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  return (
+    <BaseDrawer
+      open={open}
+      onClose={onClose}
+      size="md"
+      modal={false}
+      header={header}
+      data-testid="tool-detail-drawer"
+    >
+      <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
+        {/* Description */}
+        <div>
+          <p className="text-muted-foreground text-sm">{tool.description}</p>
+        </div>
+
+        {/* Install Command */}
+        {tool.installCommand ? (
+          <div className="flex flex-col gap-1.5">
+            <span className="text-muted-foreground text-xs font-medium">Install command</span>
+            <div className="relative rounded-md bg-zinc-900 text-zinc-100">
+              <pre className="overflow-x-auto px-3 py-2.5 pr-16 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap">
+                <code>{tool.installCommand}</code>
+              </pre>
+              <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'}
+              >
+                {copied ? (
+                  <Check className="h-3.5 w-3.5 text-emerald-500" />
+                ) : (
+                  <Copy className="h-3.5 w-3.5" />
+                )}
+                <span className="ml-1 text-[10px]">{copied ? 'Copied!' : 'Copy'}</span>
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Action Bar */}
+        <div className="flex items-center gap-2">
+          {canInstall ? (
+            <Button
+              size="sm"
+              onClick={startInstall}
+              disabled={status === 'streaming'}
+              aria-label={`Install ${tool.name}`}
+              className="cursor-pointer"
+            >
+              {status === 'streaming' ? (
+                <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Download className="mr-1.5 h-3.5 w-3.5" />
+              )}
+              {status === 'streaming' ? 'Installing...' : 'Install'}
+            </Button>
+          ) : null}
+          {canLaunch ? (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => void handleLaunch()}
+              disabled={isLaunching}
+              aria-label={`Launch ${tool.name}`}
+              className="cursor-pointer"
+            >
+              {isLaunching ? (
+                <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Rocket className="mr-1.5 h-3.5 w-3.5" />
+              )}
+              Launch
+            </Button>
+          ) : null}
+        </div>
+
+        {/* Install Log */}
+        {(status === 'streaming' || status === 'done' || status === 'error') && logs.length > 0 ? (
+          <div className="flex flex-col gap-1.5">
+            <span className="text-muted-foreground text-xs font-medium">Install log</span>
+            <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"
+            >
+              {logs.map((line) => (
+                <div key={line} className="break-all whitespace-pre-wrap">
+                  {line}
+                </div>
+              ))}
+              {status === 'done' ? (
+                <div className="mt-2 border-t border-zinc-700 pt-2 text-emerald-400">
+                  Installation complete
+                </div>
+              ) : null}
+              {status === 'error' ? (
+                <div className="mt-2 border-t border-zinc-700 pt-2 text-red-400">
+                  Installation failed
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+
+        {/* Documentation */}
+        {tool.documentationUrl ? (
+          <Button variant="outline" size="sm" className="w-fit cursor-pointer" asChild>
+            <a href={tool.documentationUrl} target="_blank" rel="noopener noreferrer">
+              Documentation
+              <ExternalLink className="ml-1.5 h-3.5 w-3.5" />
+            </a>
+          </Button>
+        ) : null}
+      </div>
+    </BaseDrawer>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/ui/alert-dialog.tsx

@@ -22,6 +22,7 @@ function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialog
 
 function AlertDialogOverlay({
   className,
+  onClick,
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
   return (
@@ -31,6 +32,12 @@ function AlertDialogOverlay({
         '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}
     />
   );

package/web/.next/standalone/src/presentation/web/components/ui/dialog.tsx

@@ -17,13 +17,19 @@ const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+>(({ className, onClick, ...props }, ref) => (
   <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}
   />
 ));

package/web/.next/standalone/src/presentation/web/hooks/use-tool-install-stream.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import type { ToolInstallationStatus } from '@shepai/core/domain/generated/output';
+
+export type InstallStreamStatus = 'idle' | 'streaming' | 'done' | 'error';
+
+export interface UseToolInstallStreamResult {
+  logs: string[];
+  status: InstallStreamStatus;
+  result: ToolInstallationStatus | null;
+  startInstall: () => void;
+}
+
+export function useToolInstallStream(toolId: string): UseToolInstallStreamResult {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [status, setStatus] = useState<InstallStreamStatus>('idle');
+  const [result, setResult] = useState<ToolInstallationStatus | null>(null);
+  const esRef = useRef<EventSource | null>(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: MessageEvent) => {
+      setLogs((prev) => [...prev, event.data]);
+    };
+
+    es.addEventListener('done', (event: MessageEvent) => {
+      const installResult: ToolInstallationStatus = 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 };
+}