@shepai/cli 1.46.0 → 1.48.0

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

@@ -0,0 +1,81 @@
+import type { PrStatus, CiStatus } from '@shepai/core/domain/generated/output';
+
+/** Diff summary statistics for the PR */
+export interface MergeReviewDiffSummary {
+  filesChanged: number;
+  additions: number;
+  deletions: number;
+  commitCount: number;
+}
+
+/** PR metadata extracted from Feature.pr */
+export interface MergeReviewPr {
+  url: string;
+  number: number;
+  status: PrStatus;
+  commitHash?: string;
+  ciStatus?: CiStatus;
+}
+
+/** A phase from the implementation plan */
+export interface MergeReviewPhase {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+/** Branch merge direction info */
+export interface MergeReviewBranch {
+  /** Feature branch name */
+  source: string;
+  /** Target branch name (e.g. 'main') */
+  target: string;
+}
+
+/** Data returned by the getMergeReviewData server action */
+export interface MergeReviewData {
+  /** PR metadata (omitted when the feature has no PR) */
+  pr?: MergeReviewPr;
+  /** Aggregate diff statistics (omitted when worktree is unavailable) */
+  diffSummary?: MergeReviewDiffSummary;
+  /** Implementation phases from plan.yaml */
+  phases?: MergeReviewPhase[];
+  /** Branch merge direction */
+  branch?: MergeReviewBranch;
+  /** Warning message when diff summary could not be retrieved */
+  warning?: string;
+}
+
+/** Props for the merge review content component */
+export interface MergeReviewProps {
+  /** Merge review data from the server action */
+  data: MergeReviewData;
+  /** Approve merge callback */
+  onApprove: () => void;
+  /** Send refinement text to AI */
+  onRefine: (text: string) => void;
+  /** Controls disabled state during approval */
+  isProcessing?: boolean;
+}
+
+/** Props for the merge review drawer (shell wrapper) */
+export interface MergeReviewDrawerProps extends MergeReviewProps {
+  /** Whether the drawer is open */
+  open: boolean;
+  /** Callback when drawer should close */
+  onClose: () => void;
+  /** Feature name shown in drawer header */
+  featureName: string;
+  /** Feature ID shown below the name */
+  featureId?: string;
+  /** Absolute path to the repository on disk */
+  repositoryPath?: string;
+  /** Git branch name — passed to ReviewDrawerShell for actions */
+  branch?: string;
+  /** Absolute path to the specs folder on disk */
+  specPath?: string;
+  /** Callback to delete the feature — shows delete button when provided */
+  onDelete?: (featureId: string) => void;
+  /** Whether a delete operation is in progress */
+  isDeleting?: boolean;
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { ReviewDrawerShell } from '@/components/common/review-drawer-shell';
+import { MergeReview } from './merge-review';
+import type { MergeReviewDrawerProps } from './merge-review-config';
+
+export function MergeReviewDrawer({
+  open,
+  onClose,
+  featureName,
+  featureId,
+  repositoryPath,
+  branch,
+  specPath,
+  onDelete,
+  isDeleting,
+  ...reviewProps
+}: MergeReviewDrawerProps) {
+  return (
+    <ReviewDrawerShell
+      open={open}
+      onClose={onClose}
+      featureName={featureName}
+      featureId={featureId}
+      repositoryPath={repositoryPath}
+      branch={branch}
+      specPath={specPath}
+      onDelete={onDelete}
+      isDeleting={isDeleting}
+    >
+      <MergeReview {...reviewProps} />
+    </ReviewDrawerShell>
+  );
+}

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

@@ -0,0 +1,240 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { PrStatus, CiStatus } from '@shepai/core/domain/generated/output';
+import { MergeReview } from './merge-review';
+import { MergeReviewDrawer } from './merge-review-drawer';
+import type { MergeReviewData } from './merge-review-config';
+
+const fullPr = {
+  url: 'https://github.com/shep-ai/cli/pull/42',
+  number: 42,
+  status: PrStatus.Open,
+  commitHash: 'a1b2c3d4e5f6789',
+  ciStatus: CiStatus.Success,
+} as const;
+
+const samplePhases = [
+  { id: 'phase-1', name: 'Foundation & Config', description: 'Set up types and server action' },
+  { id: 'phase-2', name: 'Component Implementation', description: 'Build the merge review UI' },
+  { id: 'phase-3', name: 'Integration & Wiring', description: 'Connect to control center' },
+];
+
+const sampleBranch = { source: 'feat/add-auth', target: 'main' };
+
+const fullData: MergeReviewData = {
+  pr: fullPr,
+  branch: sampleBranch,
+  phases: samplePhases,
+  diffSummary: {
+    filesChanged: 12,
+    additions: 340,
+    deletions: 85,
+    commitCount: 5,
+  },
+};
+
+const defaultActions = {
+  onApprove: fn().mockName('onApprove'),
+  onRefine: fn().mockName('onRefine'),
+};
+
+/* ─── Standalone MergeReview ─── */
+
+const meta: Meta<typeof MergeReview> = {
+  title: 'Common/MergeReview',
+  component: MergeReview,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '600px', width: '400px', border: '1px solid var(--color-border)' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MergeReview>;
+
+/** Default — all data present with CI success. */
+export const Default: Story = {
+  args: {
+    data: fullData,
+    ...defaultActions,
+  },
+};
+
+/** CI status is Pending — shows yellow badge with spinner. */
+export const CIPending: Story = {
+  args: {
+    data: {
+      ...fullData,
+      pr: { ...fullPr, ciStatus: CiStatus.Pending },
+    },
+    ...defaultActions,
+  },
+};
+
+/** CI status is Failure — shows red badge. */
+export const CIFailure: Story = {
+  args: {
+    data: {
+      ...fullData,
+      pr: { ...fullPr, ciStatus: CiStatus.Failure },
+    },
+    ...defaultActions,
+  },
+};
+
+/** Diff summary unavailable — shows warning message. */
+export const NoDiffSummary: Story = {
+  args: {
+    data: {
+      pr: fullPr,
+      branch: sampleBranch,
+      warning: 'Diff statistics unavailable — worktree may have been removed',
+    },
+    ...defaultActions,
+  },
+};
+
+/** CI status undefined — CI section omitted entirely. */
+export const NoCIStatus: Story = {
+  args: {
+    data: {
+      ...fullData,
+      pr: { ...fullPr, ciStatus: undefined },
+    },
+    ...defaultActions,
+  },
+};
+
+/** Processing state — approve button disabled with spinner. */
+export const Processing: Story = {
+  args: {
+    data: fullData,
+    ...defaultActions,
+    isProcessing: true,
+  },
+};
+
+/** No PR — merge without a pull request, shows branch direction and diff summary. */
+export const NoPrWithDiff: Story = {
+  args: {
+    data: {
+      branch: { source: 'feat/fix-login', target: 'main' },
+      phases: samplePhases,
+      diffSummary: fullData.diffSummary,
+    },
+    ...defaultActions,
+  },
+};
+
+/** No PR and no diff — bare merge approval with branch info. */
+export const NoPrNoDiff: Story = {
+  args: {
+    data: {
+      branch: { source: 'feat/fix-login', target: 'main' },
+      warning: 'No PR or diff data available',
+    },
+    ...defaultActions,
+  },
+};
+
+/** With implementation phases shown. */
+export const WithPhases: Story = {
+  args: {
+    data: {
+      ...fullData,
+      phases: samplePhases,
+    },
+    ...defaultActions,
+  },
+};
+
+/* ─── Drawer Variant ─── */
+
+type DrawerStory = StoryObj<typeof MergeReviewDrawer>;
+
+const drawerMeta = {
+  title: 'Common/MergeReviewDrawer',
+  component: MergeReviewDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+function DrawerTemplate(
+  props: Omit<React.ComponentProps<typeof MergeReviewDrawer>, 'open' | 'onClose'>
+) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div style={{ height: '100vh', background: '#f8fafc', padding: '2rem' }}>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        style={{ padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }}
+      >
+        Open Drawer
+      </button>
+      <MergeReviewDrawer {...props} open={open} onClose={() => setOpen(false)} />
+    </div>
+  );
+}
+
+/** Merge review drawer with full data. */
+export const InDrawer: DrawerStory = {
+  ...drawerMeta,
+  render: () => (
+    <DrawerTemplate
+      featureName="Add User Authentication"
+      featureId="FEAT-042"
+      repositoryPath="/home/user/projects/my-app"
+      branch="feat/add-auth"
+      data={fullData}
+      {...defaultActions}
+    />
+  ),
+};
+
+/** Drawer with delete button visible. */
+export const WithDeleteButton: DrawerStory = {
+  ...drawerMeta,
+  render: () => (
+    <DrawerTemplate
+      featureName="Add User Authentication"
+      featureId="FEAT-042"
+      repositoryPath="/home/user/projects/my-app"
+      branch="feat/add-auth"
+      data={fullData}
+      {...defaultActions}
+      onDelete={fn().mockName('onDelete')}
+    />
+  ),
+};
+
+/** Drawer without PR — direct merge with diff summary and branch info. */
+export const InDrawerNoPr: DrawerStory = {
+  ...drawerMeta,
+  render: () => (
+    <DrawerTemplate
+      featureName="Fix Login Bug"
+      featureId="FEAT-099"
+      repositoryPath="/home/user/projects/my-app"
+      branch="feat/fix-login"
+      data={{
+        branch: { source: 'feat/fix-login', target: 'main' },
+        phases: samplePhases,
+        diffSummary: fullData.diffSummary,
+      }}
+      {...defaultActions}
+      onDelete={fn().mockName('onDelete')}
+    />
+  ),
+};

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

@@ -0,0 +1,252 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  CheckCircle2,
+  ExternalLink,
+  GitMerge,
+  Loader2,
+  XCircle,
+  AlertTriangle,
+  FileDiff,
+  GitCommitHorizontal,
+  GitBranch,
+  ArrowRight,
+  Layers,
+  Send,
+} from 'lucide-react';
+import { CiStatus } from '@shepai/core/domain/generated/output';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+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">
+      <div className="px-4 py-3">
+        <div className="mb-3 flex items-center gap-2">
+          <Layers className="text-muted-foreground h-4 w-4" />
+          <span className="text-foreground text-xs font-semibold">Implementation Phases</span>
+        </div>
+        <ol className="space-y-2">
+          {phases.map((phase, i) => (
+            <li key={phase.id} className="flex items-start gap-2.5">
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-[10px] font-bold text-emerald-700">
+                {i + 1}
+              </span>
+              <div className="min-w-0">
+                <span className="text-foreground text-xs font-medium">{phase.name}</span>
+                {phase.description ? (
+                  <p className="text-muted-foreground mt-0.5 text-[11px] leading-relaxed">
+                    {phase.description}
+                  </p>
+                ) : null}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </div>
+  );
+}
+
+export function MergeReview({ data, onApprove, onRefine, isProcessing = false }: MergeReviewProps) {
+  const { pr, diffSummary, phases, branch, warning } = data;
+  const [chatInput, setChatInput] = useState('');
+
+  function handleSubmit(e: { preventDefault: () => void }) {
+    e.preventDefault();
+    const text = chatInput.trim();
+    if (!text) return;
+    onRefine(text);
+    setChatInput('');
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {/* Header */}
+        <div className="flex items-start gap-3">
+          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-emerald-500" />
+          <div className="flex-1">
+            <h2 className="text-foreground text-sm font-bold">Merge Review</h2>
+            <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
+              {pr
+                ? 'Review the pull request details and approve to merge.'
+                : 'Review the changes and approve to merge.'}
+            </p>
+          </div>
+        </div>
+
+        {/* Branch merge direction (GitHub-like) */}
+        {branch ? (
+          <div className="border-border rounded-lg border">
+            <div className="flex items-center gap-2 px-4 py-3">
+              <GitBranch className="text-muted-foreground h-4 w-4 shrink-0" />
+              <Badge variant="secondary" className="font-mono text-[11px]">
+                {branch.source}
+              </Badge>
+              <ArrowRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+              <Badge variant="outline" className="font-mono text-[11px]">
+                {branch.target}
+              </Badge>
+            </div>
+          </div>
+        ) : null}
+
+        {/* PR metadata card */}
+        {pr ? (
+          <div className="border-border 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 variant="outline" className="text-xs">
+                  {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>
+        ) : null}
+
+        {/* Diff summary */}
+        {diffSummary ? (
+          <div className="border-border rounded-lg border">
+            <div className="px-4 py-3">
+              <div className="mb-3 flex items-center gap-2">
+                <FileDiff className="text-muted-foreground h-4 w-4" />
+                <span className="text-foreground text-xs font-semibold">Changes</span>
+              </div>
+              <div className="grid grid-cols-4 gap-3">
+                <div className="text-center">
+                  <div className="text-foreground text-sm font-bold">
+                    {diffSummary.filesChanged}
+                  </div>
+                  <div className="text-muted-foreground text-[10px]">files</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-sm font-bold text-green-600">+{diffSummary.additions}</div>
+                  <div className="text-muted-foreground text-[10px]">additions</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-sm font-bold text-red-600">-{diffSummary.deletions}</div>
+                  <div className="text-muted-foreground text-[10px]">deletions</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-foreground text-sm font-bold">{diffSummary.commitCount}</div>
+                  <div className="text-muted-foreground text-[10px]">commits</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : warning ? (
+          <div className="border-border rounded-lg border">
+            <div className="flex items-center gap-2 px-4 py-3">
+              <AlertTriangle className="text-muted-foreground h-4 w-4 shrink-0" />
+              <span className="text-muted-foreground text-xs">{warning}</span>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Implementation phases */}
+        {phases && phases.length > 0 ? <PhaseList phases={phases} /> : null}
+      </div>
+
+      {/* Action bar: chat + approve */}
+      <div className="border-border shrink-0 border-t">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-4 pb-2">
+          <Input
+            type="text"
+            placeholder="Ask AI to revise before merging..."
+            aria-label="Ask AI to revise before merging"
+            disabled={isProcessing}
+            value={chatInput}
+            onChange={(e) => setChatInput(e.target.value)}
+            className="flex-1"
+          />
+          <Button
+            type="submit"
+            variant="secondary"
+            size="icon"
+            aria-label="Send"
+            disabled={isProcessing}
+          >
+            <Send />
+          </Button>
+        </form>
+        <div className="px-4 pt-2 pb-4">
+          <Button
+            type="button"
+            className="w-full"
+            disabled={isProcessing}
+            onClick={onApprove}
+            aria-label="Approve Merge"
+          >
+            {isProcessing ? (
+              <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+            ) : (
+              <GitMerge className="mr-1.5 h-4 w-4" />
+            )}
+            Approve Merge
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}