@shepai/cli 1.37.2 → 1.38.0

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

@@ -0,0 +1,216 @@
+'use client';
+
+import { Send, 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 type { PrdQuestionnaireProps } from './prd-questionnaire-config';
+
+export function PrdQuestionnaire({
+  data,
+  selections,
+  onSelect,
+  onRefine,
+  onApprove,
+  isProcessing = 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;
+  const isLastStep = currentStep === total - 1;
+  const currentQuestion = questions[currentStep];
+
+  const answeredCount = useMemo(() => Object.keys(selections).length, [selections]);
+
+  const handleSelect = useCallback(
+    (questionId: string, optionId: string) => {
+      onSelect(questionId, optionId);
+      // Auto-advance to the next step after selection (unless last step)
+      if (!isLastStep) {
+        setTimeout(() => setCurrentStep((s) => s + 1), 250);
+      }
+    },
+    [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 (
+    <div className="flex h-full flex-col">
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {/* Header */}
+        {showHeader ? (
+          <div className="border-border flex items-start gap-3 border-b pb-3">
+            <div className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-amber-500" />
+            <div className="flex-1">
+              <h3 className="text-foreground mb-1.5 text-sm font-bold">{question}</h3>
+              <p className="text-muted-foreground text-xs leading-relaxed">{context}</p>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Question + step indicator */}
+        <div className="space-y-3">
+          <div className="flex items-start gap-3">
+            <label className="text-foreground min-w-0 flex-1 text-sm font-semibold">
+              {currentQuestion.question}
+            </label>
+            <div className="mt-1.5 flex shrink-0 gap-1">
+              {questions.map((q, idx) => (
+                <button
+                  key={q.id}
+                  type="button"
+                  aria-label={`Go to question ${idx + 1}`}
+                  className={cn(
+                    'h-1.5 rounded-full transition-all duration-200',
+                    idx === currentStep ? 'bg-primary w-4' : 'w-1.5',
+                    idx !== currentStep && selections[q.id] ? 'bg-primary/50' : '',
+                    idx !== currentStep && !selections[q.id] ? 'bg-muted-foreground/25' : ''
+                  )}
+                  onClick={() => setCurrentStep(idx)}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="space-y-2">
+            {currentQuestion.options.map((opt, optIdx) => {
+              const selected = selections[currentQuestion.id] === opt.id;
+              const letter = String.fromCharCode(65 + optIdx);
+              return (
+                <button
+                  key={opt.id}
+                  type="button"
+                  className={cn(
+                    'border-border w-full rounded-md border px-3 py-3 text-left text-xs transition-all',
+                    'hover:border-primary/70 hover:bg-primary/5 group',
+                    selected && 'border-primary bg-primary/5',
+                    opt.isNew && 'animate-option-highlight'
+                  )}
+                  disabled={isProcessing}
+                  onClick={() => handleSelect(currentQuestion.id, opt.id)}
+                >
+                  <div className="flex items-start gap-2">
+                    <span className="text-muted-foreground mt-0.5 font-mono text-xs">
+                      {letter}.
+                    </span>
+                    <div className="flex-1">
+                      <div className="mb-0.5 flex items-center gap-2">
+                        <span className="text-foreground text-xs font-semibold">{opt.label}</span>
+                        {opt.recommended ? (
+                          <Badge className="px-1.5 py-0 text-[10px]">AI Recommended</Badge>
+                        ) : null}
+                        {opt.isNew ? (
+                          <Badge className="border-transparent bg-emerald-600 px-1.5 py-0 text-[10px] text-white hover:bg-emerald-600/80">
+                            New
+                          </Badge>
+                        ) : null}
+                      </div>
+                      <div className="text-muted-foreground text-xs leading-snug">
+                        {opt.rationale}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Step navigation */}
+        <div className="flex items-center justify-between pt-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={isFirstStep || isProcessing}
+            onClick={() => setCurrentStep((s) => s - 1)}
+          >
+            <ChevronLeft className="mr-1 h-4 w-4" />
+            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>
+          ) : (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={isProcessing}
+              onClick={() => setCurrentStep((s) => s + 1)}
+            >
+              {selections[currentQuestion.id] ? 'Next' : 'Skip'}
+              <ChevronRight className="ml-1 h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Action Bar */}
+      <div className="border-border bg-background shrink-0 border-t">
+        <div
+          className={cn(
+            'bg-muted h-1.5 overflow-hidden',
+            (answeredCount > 0 && answeredCount < total) || isProcessing
+              ? 'opacity-100'
+              : 'opacity-0',
+            'transition-opacity duration-200'
+          )}
+          data-testid="progress-bar-container"
+        >
+          {isProcessing ? (
+            <div className="bg-primary animate-indeterminate-progress h-full w-1/3" />
+          ) : (
+            <div
+              className="bg-primary h-full transition-all duration-300"
+              style={{ width: `${total > 0 ? (answeredCount / total) * 100 : 0}%` }}
+              data-testid="progress-bar"
+            />
+          )}
+        </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>
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/repository-node/repository-node.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Handle, Position } from '@xyflow/react';
-import { Github, Plus, Code2, Terminal } from 'lucide-react';
+import { Github, Plus, Code2, Terminal, FolderOpen } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { ActionButton } from '@/components/common/action-button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -93,6 +93,25 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
                   <TooltipContent>Open in Shell</TooltipContent>
                 </Tooltip>
               </TooltipProvider>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="flex items-center">
+                      <ActionButton
+                        label="Open Folder"
+                        onClick={actions.openFolder}
+                        loading={actions.folderLoading}
+                        error={!!actions.folderError}
+                        icon={FolderOpen}
+                        iconOnly
+                        variant="ghost"
+                        size="icon-xs"
+                      />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>Open Folder</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </>
           ) : null}
 

package/web/.next/standalone/src/presentation/web/components/common/repository-node/use-repository-actions.ts

@@ -1,6 +1,9 @@
 'use client';
 
 import { useState, useCallback, useRef, useEffect } from 'react';
+import { openIde } from '@/app/actions/open-ide';
+import { openShell } from '@/app/actions/open-shell';
+import { openFolder } from '@/app/actions/open-folder';
 
 export interface RepositoryActionsInput {
   repositoryPath: string;
@@ -9,10 +12,13 @@ export interface RepositoryActionsInput {
 export interface RepositoryActionsState {
   openInIde: () => Promise<void>;
   openInShell: () => Promise<void>;
+  openFolder: () => Promise<void>;
   ideLoading: boolean;
   shellLoading: boolean;
+  folderLoading: boolean;
   ideError: string | null;
   shellError: string | null;
+  folderError: string | null;
 }
 
 const ERROR_CLEAR_DELAY = 5000;
@@ -20,25 +26,33 @@ const ERROR_CLEAR_DELAY = 5000;
 export function useRepositoryActions(input: RepositoryActionsInput | null): RepositoryActionsState {
   const [ideLoading, setIdeLoading] = useState(false);
   const [shellLoading, setShellLoading] = useState(false);
+  const [folderLoading, setFolderLoading] = useState(false);
   const [ideError, setIdeError] = useState<string | null>(null);
   const [shellError, setShellError] = useState<string | null>(null);
+  const [folderError, setFolderError] = useState<string | null>(null);
 
   const ideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const shellTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const folderTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Clear timers on unmount
   useEffect(() => {
     const ideTimer = ideTimerRef.current;
     const shellTimer = shellTimerRef.current;
+    const folderTimer = folderTimerRef.current;
     return () => {
       if (ideTimer) clearTimeout(ideTimer);
       if (shellTimer) clearTimeout(shellTimer);
+      if (folderTimer) clearTimeout(folderTimer);
     };
   }, []);
 
-  const performAction = useCallback(
+  const performToolbarAction = useCallback(
     async (
-      url: string,
+      action: (input: { repositoryPath: string }) => Promise<{
+        success: boolean;
+        error?: string;
+      }>,
       setLoading: (v: boolean) => void,
       setError: (v: string | null) => void,
       timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>,
@@ -53,17 +67,10 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
       setError(null);
 
       try {
-        const response = await fetch(url, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            repositoryPath: input.repositoryPath,
-          }),
-        });
-
-        if (!response.ok) {
-          const data = await response.json();
-          const errorMessage = data.error ?? 'An unexpected error occurred';
+        const result = await action({ repositoryPath: input.repositoryPath });
+
+        if (!result.success) {
+          const errorMessage = result.error ?? 'An unexpected error occurred';
           setError(errorMessage);
           timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
         }
@@ -78,16 +85,72 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
     [input]
   );
 
-  const openInIde = useCallback(
-    () => performAction('/api/ide/open', setIdeLoading, setIdeError, ideTimerRef, ideLoading),
-    [performAction, ideLoading]
+  const performFolderAction = useCallback(
+    async (
+      action: (repositoryPath: string) => Promise<{ success: boolean; error?: string }>,
+      setLoading: (v: boolean) => void,
+      setError: (v: string | null) => void,
+      timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>,
+      isLoading: boolean
+    ) => {
+      if (!input || isLoading) return;
+
+      if (timerRef.current) clearTimeout(timerRef.current);
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await action(input.repositoryPath);
+
+        if (!result.success) {
+          const errorMessage = result.error ?? 'An unexpected error occurred';
+          setError(errorMessage);
+          timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
+        }
+      } catch (err: unknown) {
+        const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
+        setError(errorMessage);
+        timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [input]
+  );
+
+  const handleOpenIde = useCallback(
+    () => performToolbarAction(openIde, setIdeLoading, setIdeError, ideTimerRef, ideLoading),
+    [performToolbarAction, ideLoading]
+  );
+
+  const handleOpenShell = useCallback(
+    () =>
+      performToolbarAction(openShell, setShellLoading, setShellError, shellTimerRef, shellLoading),
+    [performToolbarAction, shellLoading]
   );
 
-  const openInShell = useCallback(
+  const handleOpenFolder = useCallback(
     () =>
-      performAction('/api/shell/open', setShellLoading, setShellError, shellTimerRef, shellLoading),
-    [performAction, shellLoading]
+      performFolderAction(
+        openFolder,
+        setFolderLoading,
+        setFolderError,
+        folderTimerRef,
+        folderLoading
+      ),
+    [performFolderAction, folderLoading]
   );
 
-  return { openInIde, openInShell, ideLoading, shellLoading, ideError, shellError };
+  return {
+    openInIde: handleOpenIde,
+    openInShell: handleOpenShell,
+    openFolder: handleOpenFolder,
+    ideLoading,
+    shellLoading,
+    folderLoading,
+    ideError,
+    shellError,
+    folderError,
+  };
 }

package/web/.next/standalone/src/presentation/web/components/common/review-drawer-shell/index.ts

@@ -0,0 +1,2 @@
+export { ReviewDrawerShell } from './review-drawer-shell';
+export type { ReviewDrawerShellProps } from './review-drawer-shell-config';

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export interface ReviewDrawerShellProps {
+  /** 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 (sr-only) */
+  featureId?: string;
+  /** Absolute path to the repository on disk */
+  repositoryPath?: string;
+  /** Git branch name for this feature */
+  branch?: string;
+  /** Absolute path to the specs folder on disk */
+  specPath?: string;
+  /** Callback to delete the feature — shows inline delete button when provided */
+  onDelete?: (featureId: string) => void;
+  /** Whether a delete operation is in progress */
+  isDeleting?: boolean;
+  /** Drawer body content */
+  children: ReactNode;
+}

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

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { ReviewDrawerShell } from './review-drawer-shell';
+
+const meta: Meta<typeof ReviewDrawerShell> = {
+  title: 'Composed/ReviewDrawerShell',
+  component: ReviewDrawerShell,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ReviewDrawerShell>;
+
+function ShellTemplate(
+  props: Omit<React.ComponentProps<typeof ReviewDrawerShell>, 'open' | 'onClose' | 'children'>
+) {
+  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>
+      <ReviewDrawerShell {...props} open={open} onClose={() => setOpen(false)}>
+        <div className="flex flex-1 items-center justify-center p-8">
+          <p className="text-muted-foreground text-sm">Review content goes here</p>
+        </div>
+      </ReviewDrawerShell>
+    </div>
+  );
+}
+
+/** Default shell with action buttons. */
+export const Default: Story = {
+  render: () => (
+    <ShellTemplate
+      featureName="User Authentication Flow"
+      featureId="FEAT-042"
+      repositoryPath="/Users/dev/my-project"
+      branch="feat/auth-flow"
+      specPath="/Users/dev/my-project/specs/042-auth-flow"
+    />
+  ),
+};
+
+/** Shell with inline delete button. */
+export const WithDelete: Story = {
+  render: () => (
+    <ShellTemplate
+      featureName="User Authentication Flow"
+      featureId="FEAT-042"
+      repositoryPath="/Users/dev/my-project"
+      branch="feat/auth-flow"
+      specPath="/Users/dev/my-project/specs/042-auth-flow"
+      onDelete={fn().mockName('onDelete')}
+    />
+  ),
+};
+
+/** Shell with delete in progress. */
+export const DeletingState: Story = {
+  render: () => (
+    <ShellTemplate
+      featureName="User Authentication Flow"
+      featureId="FEAT-042"
+      repositoryPath="/Users/dev/my-project"
+      branch="feat/auth-flow"
+      onDelete={fn().mockName('onDelete')}
+      isDeleting
+    />
+  ),
+};
+
+/** Shell without action buttons (no repositoryPath). */
+export const NoActions: Story = {
+  render: () => <ShellTemplate featureName="Standalone Feature" featureId="FEAT-001" />,
+};

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

@@ -0,0 +1,139 @@
+'use client';
+
+import { Loader2, Trash2, XIcon } from 'lucide-react';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+} from '@/components/ui/drawer';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { OpenActionMenu } from '@/components/common/open-action-menu';
+import { useFeatureActions } from '@/components/common/feature-drawer/use-feature-actions';
+import type { ReviewDrawerShellProps } from './review-drawer-shell-config';
+
+export function ReviewDrawerShell({
+  open,
+  onClose,
+  featureName,
+  featureId,
+  repositoryPath,
+  branch,
+  specPath,
+  onDelete,
+  isDeleting,
+  children,
+}: ReviewDrawerShellProps) {
+  const actionsInput = repositoryPath && branch ? { repositoryPath, branch, specPath } : null;
+  const actions = useFeatureActions(actionsInput);
+
+  return (
+    <Drawer
+      direction="right"
+      modal={false}
+      handleOnly
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+    >
+      <DrawerContent direction="right" className="w-xl" showCloseButton={false}>
+        {/* Close button */}
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          className="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
+        >
+          <XIcon className="size-4" />
+        </button>
+
+        {/* Header */}
+        <DrawerHeader>
+          <DrawerTitle>{featureName}</DrawerTitle>
+          {featureId ? (
+            <DrawerDescription className="sr-only">{featureId}</DrawerDescription>
+          ) : null}
+        </DrawerHeader>
+
+        {/* Action menu + inline delete */}
+        {actionsInput ? (
+          <div className="flex items-center gap-2 px-4 pb-3">
+            <OpenActionMenu
+              actions={actions}
+              repositoryPath={actionsInput.repositoryPath}
+              showSpecs={!!specPath}
+            />
+            {onDelete && featureId ? (
+              <>
+                <div className="bg-border mx-1 h-4 w-px" />
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="Delete feature"
+                      disabled={isDeleting}
+                      className="text-muted-foreground hover:text-destructive"
+                      data-testid="review-drawer-delete"
+                    >
+                      {isDeleting ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : (
+                        <Trash2 className="size-4" />
+                      )}
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Delete feature?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will permanently delete <strong>{featureName}</strong> ({featureId}).
+                        This action cannot be undone.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        disabled={isDeleting}
+                        onClick={() => onDelete(featureId)}
+                      >
+                        {isDeleting ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Deleting…
+                          </>
+                        ) : (
+                          'Delete'
+                        )}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </>
+            ) : null}
+          </div>
+        ) : null}
+
+        <Separator />
+
+        {/* Content slot */}
+        <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

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

@@ -0,0 +1,8 @@
+export { TechDecisionsReview } from './tech-decisions-review';
+export { TechDecisionsDrawer } from './tech-decisions-drawer';
+export type {
+  TechDecisionsReviewProps,
+  TechDecisionsDrawerProps,
+  TechDecisionsReviewData,
+  TechDecision,
+} from './tech-decisions-review-config';