@shepai/cli 1.47.0 → 1.49.0

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

@@ -1,25 +1,25 @@
 'use client';
 
-import { Send, Check, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
+import { DrawerActionBar } from '@/components/common/drawer-action-bar';
 import type { PrdQuestionnaireProps } from './prd-questionnaire-config';
 
 export function PrdQuestionnaire({
   data,
   selections,
   onSelect,
-  onRefine,
   onApprove,
+  onReject,
   isProcessing = false,
+  isRejecting = false,
   showHeader = false,
 }: PrdQuestionnaireProps) {
   const { question, context, questions, finalAction } = data;
   const [currentStep, setCurrentStep] = useState(0);
-  const [chatInput, setChatInput] = useState('');
 
   const total = questions.length;
   const isFirstStep = currentStep === 0;
@@ -39,14 +39,6 @@ export function PrdQuestionnaire({
     [onSelect, isLastStep]
   );
 
-  function handleSubmit(e: { preventDefault: () => void }) {
-    e.preventDefault();
-    const text = chatInput.trim();
-    if (!text) return;
-    onRefine(text);
-    setChatInput('');
-  }
-
   if (total === 0) return null;
 
   return (
@@ -143,17 +135,7 @@ export function PrdQuestionnaire({
             Previous
           </Button>
 
-          {isLastStep ? (
-            <Button
-              type="button"
-              size="sm"
-              disabled={isProcessing || answeredCount < total}
-              onClick={() => onApprove(finalAction.id)}
-            >
-              <Check className="mr-1 h-4 w-4" />
-              {finalAction.label}
-            </Button>
-          ) : (
+          {!isLastStep ? (
             <Button
               type="button"
               variant="ghost"
@@ -164,12 +146,19 @@ export function PrdQuestionnaire({
               {selections[currentQuestion.id] ? 'Next' : 'Skip'}
               <ChevronRight className="ml-1 h-4 w-4" />
             </Button>
-          )}
+          ) : null}
         </div>
       </div>
 
-      {/* Action Bar */}
-      <div className="border-border bg-background shrink-0 border-t">
+      <DrawerActionBar
+        onReject={onReject}
+        onApprove={() => onApprove(finalAction.id)}
+        approveLabel={finalAction.label}
+        approveIcon={<Check className="mr-1.5 h-4 w-4" />}
+        revisionPlaceholder="Ask AI to refine requirements..."
+        isProcessing={isProcessing}
+        isRejecting={isRejecting}
+      >
         <div
           className={cn(
             'bg-muted h-1.5 overflow-hidden',
@@ -190,27 +179,7 @@ export function PrdQuestionnaire({
             />
           )}
         </div>
-        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-4">
-          <Input
-            type="text"
-            placeholder="Ask AI to refine requirements..."
-            aria-label="Ask AI to refine requirements"
-            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>
+      </DrawerActionBar>
     </div>
   );
 }

package/web/.next/standalone/src/presentation/web/components/common/reject-feedback-dialog/index.ts

@@ -0,0 +1,2 @@
+export { RejectFeedbackDialog } from './reject-feedback-dialog';
+export type { RejectFeedbackDialogProps } from './reject-feedback-dialog-config';

package/web/.next/standalone/src/presentation/web/components/common/reject-feedback-dialog/reject-feedback-dialog-config.ts

@@ -0,0 +1,8 @@
+export interface RejectFeedbackDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (feedback: string) => void;
+  isSubmitting: boolean;
+  title?: string;
+  description?: string;
+}

package/web/.next/standalone/src/presentation/web/components/common/reject-feedback-dialog/reject-feedback-dialog.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { RejectFeedbackDialog } from './reject-feedback-dialog';
+
+const meta: Meta<typeof RejectFeedbackDialog> = {
+  title: 'Composed/RejectFeedbackDialog',
+  component: RejectFeedbackDialog,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    open: true,
+    onOpenChange: fn().mockName('onOpenChange'),
+    onConfirm: fn().mockName('onConfirm'),
+    isSubmitting: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RejectFeedbackDialog>;
+
+/** Default — dialog open with empty feedback; confirm button disabled. */
+export const Default: Story = {};
+
+/** With feedback entered — confirm button enabled. */
+export const WithFeedback: Story = {
+  play: async ({ canvasElement }) => {
+    // Type feedback into the textarea to show enabled state
+    const textarea = canvasElement.ownerDocument.querySelector(
+      'textarea[aria-label="Rejection feedback"]'
+    ) as HTMLTextAreaElement | null;
+    if (textarea) {
+      // Simulate React-compatible input
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )?.set;
+      nativeInputValueSetter?.call(
+        textarea,
+        'The requirements are missing error handling for edge cases. Please add validation for empty inputs.'
+      );
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+  },
+};
+
+/** Submitting state — spinner shown, buttons disabled. */
+export const Submitting: Story = {
+  args: {
+    isSubmitting: true,
+  },
+};
+
+/** Custom title and description for tech decisions context. */
+export const CustomTitle: Story = {
+  args: {
+    title: 'Reject Plan',
+    description:
+      'Provide feedback on the technical plan for the agent to revise. Be specific about which decisions need changes.',
+  },
+};

package/web/.next/standalone/src/presentation/web/components/common/reject-feedback-dialog/reject-feedback-dialog.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Textarea } from '@/components/ui/textarea';
+import type { RejectFeedbackDialogProps } from './reject-feedback-dialog-config';
+
+const DEFAULT_TITLE = 'Reject Requirements';
+const DEFAULT_DESCRIPTION =
+  'Provide feedback for the agent to address in the next iteration. Feedback is required.';
+
+export function RejectFeedbackDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  isSubmitting,
+  title = DEFAULT_TITLE,
+  description = DEFAULT_DESCRIPTION,
+}: RejectFeedbackDialogProps) {
+  const [feedback, setFeedback] = useState('');
+
+  // Reset feedback when dialog opens
+  useEffect(() => {
+    if (open) {
+      setFeedback('');
+    }
+  }, [open]);
+
+  const isFeedbackEmpty = feedback.trim().length === 0;
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <Textarea
+          aria-label="Rejection feedback"
+          placeholder="Describe what needs to change..."
+          value={feedback}
+          onChange={(e) => setFeedback(e.target.value)}
+          disabled={isSubmitting}
+          rows={4}
+        />
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isSubmitting} onClick={() => onOpenChange(false)}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            disabled={isFeedbackEmpty || isSubmitting}
+            onClick={() => onConfirm(feedback.trim())}
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Rejecting…
+              </>
+            ) : (
+              'Confirm Reject'
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -12,12 +12,14 @@ export interface TechDecisionsReviewData {
 export interface TechDecisionsReviewProps {
   /** Tech decisions data from the research artifact */
   data: TechDecisionsReviewData;
-  /** Chat refinement callback — sends user feedback to the agent */
-  onRefine: (text: string) => void;
   /** Approve plan callback */
   onApprove: () => void;
+  /** Reject plan callback — opens feedback dialog when provided; also used for inline text rejection */
+  onReject?: (feedback: string) => void;
   /** Controls disabled state during loading */
   isProcessing?: boolean;
+  /** Whether a reject operation is in flight */
+  isRejecting?: boolean;
 }
 
 export interface TechDecisionsDrawerProps extends TechDecisionsReviewProps {

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

@@ -67,7 +67,7 @@ type Story = StoryObj<typeof TechDecisionsReview>;
 export const Default: Story = {
   args: {
     data: mockData,
-    onRefine: fn().mockName('onRefine'),
+    onReject: fn().mockName('onReject'),
     onApprove: fn().mockName('onApprove'),
   },
 };
@@ -85,7 +85,7 @@ export const Processing: Story = {
 export const SingleDecision: Story = {
   args: {
     data: { ...mockData, decisions: [mockData.decisions[0]] },
-    onRefine: fn().mockName('onRefine'),
+    onReject: fn().mockName('onReject'),
     onApprove: fn().mockName('onApprove'),
   },
 };
@@ -94,7 +94,7 @@ export const SingleDecision: Story = {
 export const NoTechnologies: Story = {
   args: {
     data: { ...mockData, technologies: [] },
-    onRefine: fn().mockName('onRefine'),
+    onReject: fn().mockName('onReject'),
     onApprove: fn().mockName('onApprove'),
   },
 };
@@ -139,8 +139,8 @@ export const InDrawer: DrawerStory = {
       featureName="Agent Executor Abstraction"
       featureId="FEAT-099"
       data={mockData}
-      onRefine={fn().mockName('onRefine')}
       onApprove={fn().mockName('onApprove')}
+      onReject={fn().mockName('onReject')}
     />
   ),
 };
@@ -153,8 +153,8 @@ export const WithDeleteButton: DrawerStory = {
       featureName="Agent Executor Abstraction"
       featureId="FEAT-099"
       data={mockData}
-      onRefine={fn().mockName('onRefine')}
       onApprove={fn().mockName('onApprove')}
+      onReject={fn().mockName('onReject')}
       onDelete={fn().mockName('onDelete')}
     />
   ),
@@ -168,10 +168,31 @@ export const DeletingState: DrawerStory = {
       featureName="Agent Executor Abstraction"
       featureId="FEAT-099"
       data={mockData}
-      onRefine={fn().mockName('onRefine')}
       onApprove={fn().mockName('onApprove')}
+      onReject={fn().mockName('onReject')}
       onDelete={fn().mockName('onDelete')}
       isDeleting
     />
   ),
 };
+
+/* ─── Reject Variants ─── */
+
+/** With reject button visible next to approve. */
+export const WithRejectButton: Story = {
+  args: {
+    data: mockData,
+    onApprove: fn().mockName('onApprove'),
+    onReject: fn().mockName('onReject'),
+  },
+};
+
+/** Rejecting state — reject button disabled while reject action is in flight. */
+export const RejectingState: Story = {
+  args: {
+    data: mockData,
+    onApprove: fn().mockName('onApprove'),
+    onReject: fn().mockName('onReject'),
+    isRejecting: true,
+  },
+};

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

@@ -3,10 +3,9 @@
 import { useState } from 'react';
 import type { Components } from 'react-markdown';
 import Markdown from 'react-markdown';
-import { Check, ChevronRight, GitCompareArrows, Layers, Send } from 'lucide-react';
+import { Check, ChevronRight, GitCompareArrows, Layers } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { DrawerActionBar } from '@/components/common/drawer-action-bar';
 import type { TechDecisionsReviewProps, TechDecision } from './tech-decisions-review-config';
 
 const markdownComponents: Components = {
@@ -109,20 +108,12 @@ function DecisionCard({ decision, index }: { decision: TechDecision; index: numb
 
 export function TechDecisionsReview({
   data,
-  onRefine,
   onApprove,
+  onReject,
   isProcessing = false,
+  isRejecting = false,
 }: TechDecisionsReviewProps) {
   const { summary, decisions } = data;
-  const [chatInput, setChatInput] = useState('');
-
-  function handleSubmit(e: { preventDefault: () => void }) {
-    e.preventDefault();
-    const text = chatInput.trim();
-    if (!text) return;
-    onRefine(text);
-    setChatInput('');
-  }
 
   if (decisions.length === 0) return null;
 
@@ -154,35 +145,16 @@ export function TechDecisionsReview({
         ))}
       </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 the plan..."
-            aria-label="Ask AI to revise the plan"
-            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}>
-            <Check className="mr-1.5 h-4 w-4" />
-            Approve Plan
-          </Button>
-        </div>
-      </div>
+      <DrawerActionBar
+        onReject={onReject}
+        onApprove={onApprove}
+        approveLabel="Approve Plan"
+        approveIcon={<Check className="mr-1.5 h-4 w-4" />}
+        revisionPlaceholder="Ask AI to revise the plan..."
+        rejectDialogTitle="Reject Plan"
+        isProcessing={isProcessing}
+        isRejecting={isRejecting}
+      />
     </div>
   );
 }