@shepai/cli 1.55.3 → 1.57.0

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

@@ -102,7 +102,13 @@ export function mapEventTypeToState(eventType: NotificationEventType): FeatureNo
     case NotificationEventType.AgentCompleted:
       return 'done';
     case NotificationEventType.AgentFailed:
+    case NotificationEventType.PrChecksFailed:
       return 'error';
+    case NotificationEventType.PrMerged:
+    case NotificationEventType.PrChecksPassed:
+      return 'done';
+    case NotificationEventType.PrClosed:
+      return 'action-required';
   }
 }
 

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

@@ -1 +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';

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

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

package/web/.next/standalone/src/presentation/web/components/features/tools/install-instructions.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InstallInstructions } from './install-instructions';
+import type { ToolItem } from '@shepai/core/application/use-cases/tools/list-tools.use-case';
+
+const baseTool: ToolItem = {
+  id: 'cursor',
+  name: 'Cursor',
+  summary: 'AI-powered code editor',
+  description: 'Cursor is an AI-first code editor built on VS Code.',
+  tags: ['ide'],
+  iconUrl: 'https://cdn.simpleicons.org/cursor',
+  autoInstall: false,
+  required: false,
+  openDirectory: '/usr/bin/cursor',
+  documentationUrl: 'https://cursor.sh',
+  installCommand: 'brew install --cask cursor',
+  status: { status: 'missing', toolName: 'cursor' },
+};
+
+const meta: Meta<typeof InstallInstructions> = {
+  title: 'Features/InstallInstructions',
+  component: InstallInstructions,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    tool: baseTool,
+    open: true,
+    onOpenChange: () => undefined,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    tool: baseTool,
+    open: true,
+  },
+};
+
+export const WithInstallCommand: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      installCommand: 'brew install --cask cursor',
+    },
+    open: true,
+  },
+};
+
+export const WithoutInstallCommand: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      installCommand: undefined,
+    },
+    open: true,
+  },
+};
+
+export const WithDocumentationUrl: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      documentationUrl: 'https://cursor.sh/docs',
+    },
+    open: true,
+  },
+};
+
+export const WithoutDocumentationUrl: Story = {
+  args: {
+    tool: {
+      ...baseTool,
+      documentationUrl: '',
+    },
+    open: true,
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    tool: baseTool,
+    open: false,
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/tools/install-instructions.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import type { ToolItem } from '@shepai/core/application/use-cases/tools/list-tools.use-case';
+
+export interface InstallInstructionsProps {
+  tool: ToolItem;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+}
+
+export function InstallInstructions({
+  tool,
+  open,
+  onOpenChange,
+  className,
+}: InstallInstructionsProps) {
+  const [copied, setCopied] = useState(false);
+
+  function handleCopy() {
+    if (!tool.installCommand) return;
+    void navigator.clipboard.writeText(tool.installCommand).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="install-instructions" className={cn('sm:max-w-2xl', className)}>
+        <DialogHeader>
+          <DialogTitle data-testid="install-instructions-title">Install {tool.name}</DialogTitle>
+          <DialogDescription data-testid="install-instructions-description">
+            {tool.summary}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          {tool.installCommand && tool.autoInstall ? (
+            <div className="flex flex-col gap-1.5">
+              <span className="text-muted-foreground text-xs font-medium">
+                Installation command
+              </span>
+              <div className="bg-muted relative rounded-md">
+                <pre
+                  data-testid="install-instructions-command"
+                  className="overflow-x-auto px-3 py-2.5 pr-20 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"
+                  onClick={handleCopy}
+                  aria-label={copied ? 'Copied!' : 'Copy install command'}
+                  data-testid="install-instructions-copy-button"
+                >
+                  {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>
+          ) : tool.installCommand ? (
+            <p data-testid="install-instructions-command" className="text-muted-foreground text-sm">
+              {tool.installCommand}
+            </p>
+          ) : (
+            <p
+              data-testid="install-instructions-no-command"
+              className="text-muted-foreground text-sm"
+            >
+              Please refer to the documentation for installation instructions.
+            </p>
+          )}
+
+          {tool.documentationUrl ? (
+            <Button variant="outline" size="sm" className="w-fit cursor-pointer" asChild>
+              <a
+                data-testid="install-instructions-doc-link"
+                href={tool.documentationUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View documentation
+                <ExternalLink className="ml-1.5 h-3.5 w-3.5" />
+              </a>
+            </Button>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToolCard } from './tool-card';
+import type { ToolItem } from '@shepai/core/application/use-cases/tools/list-tools.use-case';
+
+const installedIdeTool: ToolItem = {
+  id: 'cursor',
+  name: 'Cursor',
+  summary: 'AI-powered code editor built on VS Code',
+  description:
+    'Cursor is an AI-first code editor that lets you write, edit, and chat about your code. It is built on top of VS Code and integrates deeply with AI models to accelerate development workflows.',
+  tags: ['ide'],
+  iconUrl: 'https://cdn.simpleicons.org/cursor',
+  autoInstall: false,
+  required: false,
+  openDirectory: '/usr/bin/cursor',
+  documentationUrl: 'https://cursor.sh',
+  installCommand: 'brew install --cask cursor',
+  status: { status: 'available', toolName: 'cursor' },
+};
+
+const installedNoLaunchTool: ToolItem = {
+  id: 'claude-code',
+  name: 'Claude Code',
+  summary: 'Anthropic AI coding agent for the terminal',
+  description:
+    'Claude Code is an agentic coding tool by Anthropic that lives in your terminal. It understands your codebase and helps you ship features, fix bugs, and review changes.',
+  tags: ['cli-agent'],
+  iconUrl: 'https://cdn.simpleicons.org/claude',
+  autoInstall: true,
+  required: false,
+  openDirectory: undefined,
+  documentationUrl: 'https://claude.ai',
+  installCommand: 'npm install -g @anthropic-ai/claude-code',
+  status: { status: 'available', toolName: 'claude-code' },
+};
+
+const missingAutoInstallTool: ToolItem = {
+  id: 'aider',
+  name: 'Aider',
+  summary: 'AI pair programming in your terminal',
+  description:
+    'Aider lets you pair program with AI in your terminal. Aider works best with Claude 3.5 Sonnet and can make coordinated changes across multiple files.',
+  tags: ['cli-agent'],
+  iconUrl: undefined,
+  autoInstall: true,
+  required: false,
+  openDirectory: undefined,
+  documentationUrl: 'https://aider.chat',
+  installCommand: 'pip install aider-chat',
+  status: { status: 'missing', toolName: 'aider' },
+};
+
+const missingManualTool: ToolItem = {
+  id: 'vscode',
+  name: 'VS Code',
+  summary: 'Lightweight but powerful source code editor',
+  description:
+    'Visual Studio Code is a lightweight but powerful source code editor from Microsoft.',
+  tags: ['ide'],
+  iconUrl: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg',
+  autoInstall: false,
+  required: false,
+  openDirectory: '/usr/bin/code',
+  documentationUrl: 'https://code.visualstudio.com',
+  installCommand: 'brew install --cask visual-studio-code',
+  status: { status: 'missing', toolName: 'vscode' },
+};
+
+const cliAgentTool: ToolItem = {
+  id: 'cursor-cli',
+  name: 'Cursor CLI',
+  summary: 'AI-powered terminal coding agent',
+  description:
+    'Cursor CLI is a terminal-based AI coding agent that brings conversational AI assistance directly to your command line.',
+  tags: ['cli-agent'],
+  iconUrl: 'https://cdn.simpleicons.org/cursor',
+  autoInstall: true,
+  required: false,
+  openDirectory: undefined,
+  documentationUrl: 'https://cursor.sh',
+  installCommand: 'curl https://cursor.com/install -fsS | bash',
+  status: { status: 'available', toolName: 'cursor-cli' },
+};
+
+const vcsTool: ToolItem = {
+  id: 'gh',
+  name: 'GitHub CLI',
+  summary: "GitHub's official command-line tool",
+  description:
+    'GitHub CLI brings GitHub to your terminal. Manage pull requests, issues, repositories, workflows, and more.',
+  tags: ['vcs'],
+  iconUrl: 'https://cdn.simpleicons.org/github',
+  autoInstall: true,
+  required: true,
+  openDirectory: undefined,
+  documentationUrl: 'https://cli.github.com/manual/',
+  installCommand: 'brew install gh',
+  status: { status: 'available', toolName: 'gh' },
+};
+
+const meta: Meta<typeof ToolCard> = {
+  title: 'Features/ToolCard',
+  component: ToolCard,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { tool: installedIdeTool },
+};
+
+export const InstalledWithLaunch: Story = {
+  args: { tool: installedIdeTool, onRefresh: async () => undefined },
+};
+
+export const InstalledNoLaunch: Story = {
+  args: { tool: installedNoLaunchTool },
+};
+
+export const MissingAutoInstall: Story = {
+  args: { tool: missingAutoInstallTool, onRefresh: async () => undefined },
+};
+
+export const MissingManualInstall: Story = {
+  args: { tool: missingManualTool },
+};
+
+export const ErrorStatus: Story = {
+  args: {
+    tool: {
+      ...missingAutoInstallTool,
+      status: { status: 'error', toolName: 'aider', errorMessage: 'Binary check failed' },
+    },
+  },
+};
+
+export const CliAgent: Story = {
+  args: { tool: cliAgentTool },
+};
+
+export const VcsTool: Story = {
+  args: { tool: vcsTool },
+};
+
+export const AllStates: Story = {
+  decorators: [
+    (Story) => (
+      <div className="grid grid-cols-3 gap-3">
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => (
+    <>
+      <ToolCard tool={installedIdeTool} />
+      <ToolCard tool={installedNoLaunchTool} />
+      <ToolCard tool={missingAutoInstallTool} />
+      <ToolCard tool={missingManualTool} />
+      <ToolCard
+        tool={{
+          ...missingAutoInstallTool,
+          status: { status: 'error', toolName: 'aider', errorMessage: 'Binary check failed' },
+        }}
+      />
+      <ToolCard tool={cliAgentTool} />
+      <ToolCard tool={vcsTool} />
+    </>
+  ),
+};

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

@@ -0,0 +1,188 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import {
+  ExternalLink,
+  Loader2,
+  Rocket,
+  Download,
+  Monitor,
+  Terminal,
+  GitBranch,
+  CircleX,
+  Check,
+  Package,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { InstallInstructions } from './install-instructions';
+import type { ToolItem } from '@shepai/core/application/use-cases/tools/list-tools.use-case';
+
+export interface ToolCardProps {
+  tool: ToolItem;
+  onRefresh?: () => Promise<void>;
+  className?: string;
+}
+
+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 },
+};
+
+export function ToolCard({ tool, onRefresh, className }: ToolCardProps) {
+  const [installDrawerOpen, setInstallDrawerOpen] = 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() {
+    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();
+      }
+    });
+  }
+
+  return (
+    <>
+      <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
+        )}
+      >
+        {/* Top row: icon + name left, tag badges right */}
+        <div className="mb-2 flex items-start justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-2">
+            {tool.iconUrl ? (
+              /* eslint-disable-next-line @next/next/no-img-element */
+              <img
+                src={tool.iconUrl}
+                alt=""
+                width={20}
+                height={20}
+                className="shrink-0 dark:invert"
+              />
+            ) : (
+              <Package className="text-muted-foreground h-5 w-5 shrink-0" />
+            )}
+            <h3 data-testid="tool-card-name" className="truncate text-sm font-bold">
+              {tool.name}
+            </h3>
+          </div>
+          <div data-testid="tool-card-tags" className="flex shrink-0 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>
+
+        {/* Summary */}
+        <p data-testid="tool-card-summary" className="text-muted-foreground mt-1 truncate text-xs">
+          {tool.summary}
+        </p>
+
+        {/* Bottom section — pushed to bottom */}
+        <div className="mt-auto flex items-center justify-between pt-3">
+          {/* Status text */}
+          <div className="flex items-center gap-2">
+            {isError && tool.status.status === 'error' ? (
+              <span
+                className="flex items-center gap-1 truncate text-[10px] text-red-600 dark:text-red-400"
+                title={tool.status.errorMessage}
+              >
+                <CircleX className="h-3 w-3 shrink-0" />
+                {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" />
+                Installed
+              </span>
+            ) : (
+              <span className="text-muted-foreground text-[10px]">Not installed</span>
+            )}
+            {tool.required ? (
+              <span className="text-muted-foreground text-[10px] italic">Required</span>
+            ) : 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" />
+              ) : (
+                <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}
+        </div>
+      </div>
+
+      <InstallInstructions
+        tool={tool}
+        open={installDrawerOpen}
+        onOpenChange={setInstallDrawerOpen}
+      />
+    </>
+  );
+}