@shepai/cli 1.58.0 → 1.60.0

package/web/.next/standalone/src/presentation/web/components/common/ci-status-badge/ci-status-badge.tsx

@@ -0,0 +1,29 @@
+import { CheckCircle2, Loader2, XCircle } from 'lucide-react';
+import { CiStatus } from '@shepai/core/domain/generated/output';
+import { Badge } from '@/components/ui/badge';
+
+export function CiStatusBadge({ status }: { status: CiStatus }) {
+  switch (status) {
+    case CiStatus.Success:
+      return (
+        <Badge className="border-transparent bg-green-50 text-green-700 hover:bg-green-50">
+          <CheckCircle2 className="mr-1 h-3.5 w-3.5" />
+          Passing
+        </Badge>
+      );
+    case CiStatus.Pending:
+      return (
+        <Badge className="border-transparent bg-yellow-50 text-yellow-700 hover:bg-yellow-50">
+          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+          Pending
+        </Badge>
+      );
+    case CiStatus.Failure:
+      return (
+        <Badge className="border-transparent bg-red-50 text-red-700 hover:bg-red-50">
+          <XCircle className="mr-1 h-3.5 w-3.5" />
+          Failing
+        </Badge>
+      );
+  }
+}

package/web/.next/standalone/src/presentation/web/components/common/ci-status-badge/index.ts

@@ -0,0 +1 @@
+export { CiStatusBadge } from './ci-status-badge';

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { PrStatus, CiStatus } from '@shepai/core/domain/generated/output';
 import { FeatureDrawer } from './feature-drawer';
 import type { FeatureNodeData } from '@/components/common/feature-node';
 import type { FeatureLifecyclePhase, FeatureNodeState } from '@/components/common/feature-node';
@@ -353,3 +354,55 @@ export const DeletingState: Story = {
 export const DeleteRunningAgent: Story = {
   render: () => <DrawerTriggerWithDelete data={runningData} label="Open Running Agent Delete" />,
 };
+
+/* ---------------------------------------------------------------------------
+ * PR info stories
+ * ------------------------------------------------------------------------- */
+
+const doneWithPrData: FeatureNodeData = {
+  ...doneData,
+  pr: {
+    url: 'https://github.com/org/repo/pull/42',
+    number: 42,
+    status: PrStatus.Merged,
+    ciStatus: CiStatus.Success,
+    commitHash: 'abc1234567890def',
+  },
+};
+
+const doneWithPartialPrData: FeatureNodeData = {
+  ...doneData,
+  pr: {
+    url: 'https://github.com/org/repo/pull/99',
+    number: 99,
+    status: PrStatus.Merged,
+  },
+};
+
+/** Done feature with full PR card — number, status, CI, commit hash. */
+export const DoneWithPr: Story = {
+  render: () => <DrawerTrigger data={doneWithPrData} label="Open Done + PR" />,
+};
+
+/** Done feature with partial PR data — no CI status, no commit hash. */
+export const DoneWithPartialPr: Story = {
+  render: () => <DrawerTrigger data={doneWithPartialPrData} label="Open Done + Partial PR" />,
+};
+
+/** PR with Open status — blue badge. */
+export const PrStatusOpen: Story = {
+  render: () => (
+    <DrawerTrigger
+      data={{
+        ...doneWithPrData,
+        pr: { ...doneWithPrData.pr!, status: PrStatus.Open, ciStatus: CiStatus.Pending },
+      }}
+      label="Open PR Status: Open"
+    />
+  ),
+};
+
+/** PR with Merged status — purple badge. */
+export const PrStatusMerged: Story = {
+  render: () => <DrawerTrigger data={doneWithPrData} label="Open PR Status: Merged" />,
+};

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { XIcon, Loader2, Trash2 } from 'lucide-react';
+import { XIcon, Loader2, Trash2, ExternalLink, GitCommitHorizontal } from 'lucide-react';
+import { PrStatus } from '@shepai/core/domain/generated/output';
 import { cn } from '@/lib/utils';
 import { OpenActionMenu } from '@/components/common/open-action-menu';
 import {
@@ -11,6 +12,7 @@ import {
   DrawerDescription,
 } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { CometSpinner } from '@/components/ui/comet-spinner';
 import {
@@ -24,6 +26,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
+import { CiStatusBadge } from '@/components/common/ci-status-badge';
 import { featureNodeStateConfig, lifecycleDisplayLabels } from '@/components/common/feature-node';
 import type { FeatureNodeData } from '@/components/common/feature-node';
 import { useFeatureActions } from './use-feature-actions';
@@ -108,6 +111,14 @@ export function FeatureDrawer({
               ) : null}
             </div>
 
+            {/* PR info */}
+            {selectedNode.pr ? (
+              <>
+                <Separator />
+                <PrInfoSection pr={selectedNode.pr} />
+              </>
+            ) : null}
+
             <Separator />
 
             {/* Details */}
@@ -213,6 +224,55 @@ function DetailRow({ label, value }: { label: string; value: string }) {
   );
 }
 
+const prStatusStyles: Record<PrStatus, string> = {
+  [PrStatus.Open]: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
+  [PrStatus.Merged]: 'border-transparent bg-purple-50 text-purple-700 hover:bg-purple-50',
+  [PrStatus.Closed]: 'border-transparent bg-red-50 text-red-700 hover:bg-red-50',
+};
+
+function PrInfoSection({ pr }: { pr: NonNullable<FeatureNodeData['pr']> }) {
+  return (
+    <div data-testid="feature-drawer-pr" className="border-border mx-4 rounded-lg border">
+      <div className="space-y-3 px-4 py-3">
+        {/* PR number + link */}
+        <div className="flex items-center justify-between">
+          <a
+            href={pr.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2"
+          >
+            PR #{pr.number}
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+          <Badge className={prStatusStyles[pr.status]}>{pr.status}</Badge>
+        </div>
+
+        {/* CI status */}
+        {pr.ciStatus ? (
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground text-xs font-medium">CI Status</span>
+            <CiStatusBadge status={pr.ciStatus} />
+          </div>
+        ) : null}
+
+        {/* Commit hash */}
+        {pr.commitHash ? (
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground text-xs font-medium">Commit</span>
+            <div className="flex items-center gap-1.5">
+              <GitCommitHorizontal className="text-muted-foreground h-3.5 w-3.5" />
+              <code className="bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]">
+                {pr.commitHash.slice(0, 7)}
+              </code>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
 function DrawerActions({
   repositoryPath,
   branch,

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

@@ -1,5 +1,6 @@
 import { Loader2, CircleAlert, CircleCheck, Ban, CircleX, type LucideIcon } from 'lucide-react';
 import type { Node } from '@xyflow/react';
+import type { PrStatus, CiStatus } from '@shepai/core/domain/generated/output';
 import type { AgentTypeValue } from './agent-type-icons';
 
 export type FeatureNodeState =
@@ -60,6 +61,14 @@ export interface FeatureNodeData {
   errorMessage?: string;
   /** Agent executor type (e.g. "claude-code", "cursor"). */
   agentType?: AgentTypeValue;
+  /** PR metadata for features with an associated pull request */
+  pr?: {
+    url: string;
+    number: number;
+    status: PrStatus;
+    ciStatus?: CiStatus;
+    commitHash?: string;
+  };
   onAction?: () => void;
   onSettings?: () => void;
   showHandles?: boolean;

package/web/.next/standalone/src/presentation/web/components/common/merge-review/merge-review.tsx

@@ -1,11 +1,9 @@
 'use client';
 
 import {
-  CheckCircle2,
   ExternalLink,
   GitMerge,
   Loader2,
-  XCircle,
   AlertTriangle,
   FileDiff,
   GitCommitHorizontal,
@@ -13,37 +11,11 @@ import {
   ArrowRight,
   Layers,
 } from 'lucide-react';
-import { CiStatus } from '@shepai/core/domain/generated/output';
 import { Badge } from '@/components/ui/badge';
+import { CiStatusBadge } from '@/components/common/ci-status-badge';
 import { DrawerActionBar } from '@/components/common/drawer-action-bar';
 import type { MergeReviewProps, MergeReviewPhase } from './merge-review-config';
 
-function CiStatusBadge({ status }: { status: CiStatus }) {
-  switch (status) {
-    case CiStatus.Success:
-      return (
-        <Badge className="border-transparent bg-green-50 text-green-700 hover:bg-green-50">
-          <CheckCircle2 className="mr-1 h-3.5 w-3.5" />
-          Passing
-        </Badge>
-      );
-    case CiStatus.Pending:
-      return (
-        <Badge className="border-transparent bg-yellow-50 text-yellow-700 hover:bg-yellow-50">
-          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-          Pending
-        </Badge>
-      );
-    case CiStatus.Failure:
-      return (
-        <Badge className="border-transparent bg-red-50 text-red-700 hover:bg-red-50">
-          <XCircle className="mr-1 h-3.5 w-3.5" />
-          Failing
-        </Badge>
-      );
-  }
-}
-
 function PhaseList({ phases }: { phases: MergeReviewPhase[] }) {
   return (
     <div className="border-border rounded-lg border">

package/web/.next/standalone/src/presentation/web/components/features/skills/category-filter.stories.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CategoryFilter } from './category-filter';
+import type { SkillCategory } from '@/lib/skills';
+
+const meta: Meta<typeof CategoryFilter> = {
+  title: 'Features/CategoryFilter',
+  component: CategoryFilter,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CategoryFilter>;
+
+/* ---------------------------------------------------------------------------
+ * Interactive wrapper — manages activeCategory state
+ * ------------------------------------------------------------------------- */
+
+function InteractiveCategoryFilter({
+  initial,
+  counts,
+}: {
+  initial: SkillCategory | null;
+  counts?: Record<SkillCategory, number>;
+}) {
+  const [active, setActive] = useState<SkillCategory | null>(initial);
+  return <CategoryFilter activeCategory={active} onCategoryChange={setActive} counts={counts} />;
+}
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const AllSelected: Story = {
+  render: () => <InteractiveCategoryFilter initial={null} />,
+};
+
+export const WorkflowSelected: Story = {
+  render: () => <InteractiveCategoryFilter initial="Workflow" />,
+};
+
+export const WithCounts: Story = {
+  render: () => (
+    <InteractiveCategoryFilter
+      initial={null}
+      counts={{
+        Workflow: 8,
+        'Code Generation': 1,
+        Analysis: 2,
+        Reference: 7,
+      }}
+    />
+  ),
+};

package/web/.next/standalone/src/presentation/web/components/features/skills/category-filter.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@/components/ui/button';
+import type { SkillCategory } from '@/lib/skills';
+
+const CATEGORIES: { label: string; value: SkillCategory | null }[] = [
+  { label: 'All', value: null },
+  { label: 'Workflow', value: 'Workflow' },
+  { label: 'Code Generation', value: 'Code Generation' },
+  { label: 'Analysis', value: 'Analysis' },
+  { label: 'Reference', value: 'Reference' },
+];
+
+export interface CategoryFilterProps {
+  activeCategory: SkillCategory | null;
+  onCategoryChange: (category: SkillCategory | null) => void;
+  counts?: Record<SkillCategory, number>;
+}
+
+export function CategoryFilter({ activeCategory, onCategoryChange, counts }: CategoryFilterProps) {
+  return (
+    <div className="flex flex-wrap gap-2" role="group" aria-label="Filter by category">
+      {CATEGORIES.map(({ label, value }) => (
+        <Button
+          key={label}
+          variant={activeCategory === value ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => onCategoryChange(value)}
+        >
+          {label}
+          {counts && value ? (
+            <span className="ml-1 text-xs opacity-70">({counts[value]})</span>
+          ) : null}
+        </Button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+export { SkillsPageClient, type SkillsPageClientProps } from './skills-page-client';
+export { SkillCard, type SkillCardProps } from './skill-card';
+export { CategoryFilter, type CategoryFilterProps } from './category-filter';
+export { SkillList, type SkillListProps } from './skill-list';
+export { SkillDetailDrawer, type SkillDetailDrawerProps } from './skill-detail-drawer';

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-card.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { SkillCard } from './skill-card';
+import type { SkillData } from '@/lib/skills';
+
+const meta: Meta<typeof SkillCard> = {
+  title: 'Features/SkillCard',
+  component: SkillCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    onSelect: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const baseSkill: SkillData = {
+  name: 'shep-kit:implement',
+  displayName: 'implement',
+  description: 'Validate specs and autonomously execute implementation tasks with status tracking.',
+  category: 'Workflow',
+  source: 'project',
+  body: '## Usage\n\nRun /shep-kit:implement after planning is complete.',
+  resources: [],
+};
+
+const skillWithAllBadges: SkillData = {
+  name: 'shep:ui-component',
+  displayName: 'ui-component',
+  description:
+    'Use when creating, modifying, or reviewing web UI components. Triggers include "new component", "add component", "create UI".',
+  context: 'fork',
+  allowedTools: 'Read, Write, Bash, Edit, Glob',
+  category: 'Code Generation',
+  source: 'project',
+  body: '## Overview\n\nScaffolds UI components following the four-tier hierarchy.',
+  resources: [
+    { name: 'references', fileCount: 7 },
+    { name: 'templates', fileCount: 3 },
+    { name: 'rules', fileCount: 2 },
+  ],
+};
+
+const globalSkill: SkillData = {
+  name: 'vercel-react-best-practices',
+  displayName: 'vercel-react-best-practices',
+  description: 'React and Next.js performance optimization guidelines from Vercel Engineering.',
+  category: 'Reference',
+  source: 'global',
+  body: 'Performance patterns for React and Next.js applications.',
+  resources: [{ name: 'references', fileCount: 4 }],
+};
+
+const skillWithContext: SkillData = {
+  name: 'architecture-reviewer',
+  displayName: 'architecture-reviewer',
+  description: 'Use when making architectural decisions, planning features, or reviewing PRs.',
+  context: 'fork',
+  category: 'Analysis',
+  source: 'project',
+  body: '',
+  resources: [],
+};
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const Default: Story = {
+  args: {
+    skill: baseSkill,
+  },
+};
+
+export const WithContext: Story = {
+  args: {
+    skill: skillWithContext,
+  },
+};
+
+export const WithAllBadges: Story = {
+  args: {
+    skill: skillWithAllBadges,
+  },
+};
+
+export const ProjectSource: Story = {
+  args: {
+    skill: baseSkill,
+  },
+};
+
+export const GlobalSource: Story = {
+  args: {
+    skill: globalSkill,
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-card.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import type { SkillData } from '@/lib/skills';
+import { FolderOpen } from 'lucide-react';
+
+export interface SkillCardProps {
+  skill: SkillData;
+  onSelect: (skill: SkillData) => void;
+}
+
+export function SkillCard({ skill, onSelect }: SkillCardProps) {
+  return (
+    <Card
+      className="hover:border-primary/50 cursor-pointer transition-colors"
+      role="button"
+      tabIndex={0}
+      onClick={() => onSelect(skill)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelect(skill);
+        }
+      }}
+      data-testid={`skill-card-${skill.name}`}
+    >
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">{skill.displayName}</CardTitle>
+        <p className="text-muted-foreground font-mono text-xs">{skill.name}</p>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <p className="text-muted-foreground line-clamp-2 text-sm">{skill.description}</p>
+        <div className="flex flex-wrap items-center gap-1.5">
+          <Badge variant={skill.source === 'project' ? 'secondary' : 'outline'}>
+            {skill.source === 'project' ? 'Project' : 'Global'}
+          </Badge>
+          {skill.context ? <Badge variant="outline">{skill.context}</Badge> : null}
+          {skill.allowedTools ? <Badge variant="outline">Tools</Badge> : null}
+          {skill.resources.length > 0 ? (
+            <span className="text-muted-foreground inline-flex items-center gap-1 text-xs">
+              <FolderOpen className="size-3" />
+              {skill.resources.length} {skill.resources.length === 1 ? 'resource' : 'resources'}
+            </span>
+          ) : null}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-detail-drawer.stories.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkillDetailDrawer } from './skill-detail-drawer';
+import { Button } from '@/components/ui/button';
+import type { SkillData } from '@/lib/skills';
+
+const meta: Meta<typeof SkillDetailDrawer> = {
+  title: 'Features/SkillDetailDrawer',
+  component: SkillDetailDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SkillDetailDrawer>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const skillWithResources: SkillData = {
+  name: 'shep:ui-component',
+  displayName: 'ui-component',
+  description:
+    'Use when creating, modifying, or reviewing web UI components. Triggers include "new component", "add component", "create UI", "build a widget".',
+  context: 'fork',
+  allowedTools: 'Read, Write, Bash, Edit, Glob, Grep',
+  category: 'Code Generation',
+  source: 'project',
+  body: '## Overview\n\nScaffolds UI components following the four-tier hierarchy.\n\n## Usage\n\nRun /shep:ui-component when you need to create or modify components.',
+  resources: [
+    { name: 'references', fileCount: 7 },
+    { name: 'templates', fileCount: 3 },
+    { name: 'rules', fileCount: 2 },
+  ],
+};
+
+const skillWithoutResources: SkillData = {
+  name: 'shep-kit:implement',
+  displayName: 'implement',
+  description:
+    'Validate specs and autonomously execute implementation tasks with status tracking. Use after /shep-kit:plan when ready to start implementation.',
+  category: 'Workflow',
+  source: 'project',
+  body: '## Usage\n\nRun /shep-kit:implement after planning is complete to start autonomous implementation.\n\n## What it does\n\n1. Pre-Implementation Validation Gate\n2. Autonomous Execution\n3. Status Tracking',
+  resources: [],
+};
+
+const minimalSkill: SkillData = {
+  name: 'find-skills',
+  displayName: 'find-skills',
+  description: 'Helps users discover and install agent skills.',
+  category: 'Reference',
+  source: 'global',
+  body: '',
+  resources: [],
+};
+
+/* ---------------------------------------------------------------------------
+ * Trigger wrapper — starts closed, click to open
+ * ------------------------------------------------------------------------- */
+
+function DrawerTrigger({ skill, label }: { skill: SkillData; label: string }) {
+  const [selected, setSelected] = useState<SkillData | null>(null);
+
+  return (
+    <div className="flex h-screen items-start p-4">
+      <Button variant="outline" onClick={() => setSelected(skill)}>
+        {label}
+      </Button>
+      <SkillDetailDrawer skill={selected} onClose={() => setSelected(null)} />
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const Open: Story = {
+  render: () => <DrawerTrigger skill={skillWithResources} label="Open Skill Detail" />,
+};
+
+export const WithResources: Story = {
+  render: () => <DrawerTrigger skill={skillWithResources} label="Open With Resources" />,
+};
+
+export const WithoutResources: Story = {
+  render: () => <DrawerTrigger skill={skillWithoutResources} label="Open Without Resources" />,
+};
+
+export const MinimalSkill: Story = {
+  render: () => <DrawerTrigger skill={minimalSkill} label="Open Minimal Skill" />,
+};