@shepai/cli 1.47.0 → 1.49.0

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'),
+  onReject: fn().mockName('onReject'),
+};
+
+/* ─── 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,223 @@
+'use client';
+
+import {
+  CheckCircle2,
+  ExternalLink,
+  GitMerge,
+  Loader2,
+  XCircle,
+  AlertTriangle,
+  FileDiff,
+  GitCommitHorizontal,
+  GitBranch,
+  ArrowRight,
+  Layers,
+} from 'lucide-react';
+import { CiStatus } from '@shepai/core/domain/generated/output';
+import { Badge } from '@/components/ui/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">
+      <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,
+  onReject,
+  isProcessing = false,
+  isRejecting = false,
+}: MergeReviewProps) {
+  const { pr, diffSummary, phases, branch, warning } = data;
+
+  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>
+
+      <DrawerActionBar
+        onReject={onReject}
+        onApprove={onApprove}
+        approveLabel="Approve Merge"
+        approveIcon={
+          isProcessing ? (
+            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+          ) : (
+            <GitMerge className="mr-1.5 h-4 w-4" />
+          )
+        }
+        revisionPlaceholder="Ask AI to revise before merging..."
+        rejectDialogTitle="Reject Merge"
+        isProcessing={isProcessing}
+        isRejecting={isRejecting}
+      />
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire-config.ts

@@ -14,12 +14,14 @@ export interface PrdQuestionnaireProps {
   selections: Record<string, string>;
   /** Selection change callback */
   onSelect: (questionId: string, optionId: string) => void;
-  /** Chat refinement submit callback */
-  onRefine: (text: string) => void;
   /** Finalize requirements callback */
   onApprove: (actionId: string) => void;
+  /** Reject requirements callback — opens feedback dialog when provided; also used for inline text rejection */
+  onReject?: (feedback: string) => void;
   /** Controls disabled/animated state during refinement */
   isProcessing?: boolean;
+  /** Whether a reject operation is in flight */
+  isRejecting?: boolean;
   /** Show the goal/context header (default: false) */
   showHeader?: boolean;
 }

package/web/.next/standalone/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.stories.tsx

@@ -146,10 +146,9 @@ const mockFinalAction = {
 function InteractiveQuestionnaire({
   selections: initialSelections = {},
   ...props
-}: Omit<
-  React.ComponentProps<typeof PrdQuestionnaire>,
-  'onSelect' | 'onRefine' | 'onApprove' | 'selections'
-> & { selections?: Record<string, string> }) {
+}: Omit<React.ComponentProps<typeof PrdQuestionnaire>, 'onSelect' | 'onApprove' | 'selections'> & {
+  selections?: Record<string, string>;
+}) {
   const [selections, setSelections] = useState<Record<string, string>>(initialSelections);
 
   return (
@@ -157,7 +156,6 @@ function InteractiveQuestionnaire({
       {...props}
       selections={selections}
       onSelect={(qId, optId) => setSelections((prev) => ({ ...prev, [qId]: optId }))}
-      onRefine={fn().mockName('onRefine')}
       onApprove={fn().mockName('onApprove')}
     />
   );
@@ -174,7 +172,6 @@ const meta: Meta<typeof PrdQuestionnaire> = {
   },
   argTypes: {
     onSelect: { action: 'onSelect' },
-    onRefine: { action: 'onRefine' },
     onApprove: { action: 'onApprove' },
   },
   decorators: [
@@ -296,7 +293,7 @@ function DrawerTemplate({
   ...props
 }: Omit<
   React.ComponentProps<typeof PrdQuestionnaireDrawer>,
-  'open' | 'onClose' | 'onSelect' | 'onRefine' | 'onApprove' | 'selections'
+  'open' | 'onClose' | 'onSelect' | 'onApprove' | 'selections'
 > & { selections?: Record<string, string> }) {
   const [open, setOpen] = useState(true);
   const [selections, setSelections] = useState<Record<string, string>>(initialSelections);
@@ -316,7 +313,6 @@ function DrawerTemplate({
         onClose={() => setOpen(false)}
         selections={selections}
         onSelect={(qId, optId) => setSelections((prev) => ({ ...prev, [qId]: optId }))}
-        onRefine={fn().mockName('onRefine')}
         onApprove={fn().mockName('onApprove')}
       />
     </div>
@@ -383,3 +379,35 @@ export const DeletingState: DrawerStory = {
     />
   ),
 };
+
+/* ─── Reject Variants ─── */
+
+const allAnsweredSelections = {
+  problem: 'user_pain',
+  priority: 'p1',
+  success: 'adoption',
+  timeline: 'sprint',
+  scope: 'mvp',
+  stakeholders: 'end_users',
+};
+
+/** All answered with reject button visible on last step. */
+export const WithRejectButton: Story = {
+  render: () => (
+    <InteractiveQuestionnaire
+      data={mockData}
+      selections={allAnsweredSelections}
+      onReject={fn().mockName('onReject')}
+    />
+  ),
+};
+
+/** Rejecting state — reject button disabled with spinner while reject action is in flight. */
+export const RejectingState: Story = {
+  args: {
+    data: mockData,
+    selections: allAnsweredSelections,
+    onReject: fn().mockName('onReject'),
+    isRejecting: true,
+  },
+};