@shepai/cli 1.66.4 → 1.67.0

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/drawer-view.ts

@@ -0,0 +1,82 @@
+import type { FeatureNodeData } from '@/components/common/feature-node';
+import type { RepositoryNodeData } from '@/components/common/repository-node';
+import type { ParentFeatureOption } from '@/components/common/feature-create-drawer/feature-create-drawer';
+import type { WorkflowDefaults } from '@/app/actions/get-workflow-defaults';
+
+/**
+ * Discriminated union representing every possible drawer state in the control center.
+ * Only one view can be active at a time.
+ */
+export type DrawerView =
+  /** Generic feature info (running, done, blocked, error, or unhandled action-required phases) */
+  | { type: 'feature'; node: FeatureNodeData }
+  /** requirements lifecycle + action-required → PRD questionnaire */
+  | { type: 'prd-review'; node: FeatureNodeData }
+  /** implementation lifecycle + action-required → tech decisions review */
+  | { type: 'tech-review'; node: FeatureNodeData }
+  /** review lifecycle + action-required|error → merge review */
+  | { type: 'merge-review'; node: FeatureNodeData }
+  /** Feature creation form */
+  | {
+      type: 'feature-create';
+      repositoryPath: string;
+      initialParentId?: string;
+      features: ParentFeatureOption[];
+      workflowDefaults?: WorkflowDefaults;
+    }
+  /** Repository node actions */
+  | { type: 'repository'; data: RepositoryNodeData };
+
+/**
+ * Derives the active DrawerView from control-center state.
+ * Priority: feature-create > selected-node (prd/tech/merge/feature) > repository
+ */
+export function computeDrawerView({
+  selectedNode,
+  isCreateDrawerOpen,
+  pendingRepositoryPath,
+  pendingParentFeatureId,
+  selectedRepoNode,
+  features,
+  workflowDefaults,
+}: {
+  selectedNode: FeatureNodeData | null;
+  isCreateDrawerOpen: boolean;
+  pendingRepositoryPath: string;
+  pendingParentFeatureId: string | undefined;
+  selectedRepoNode: RepositoryNodeData | null;
+  features: ParentFeatureOption[];
+  workflowDefaults: WorkflowDefaults | undefined;
+}): DrawerView | null {
+  if (isCreateDrawerOpen) {
+    return {
+      type: 'feature-create',
+      repositoryPath: pendingRepositoryPath,
+      initialParentId: pendingParentFeatureId,
+      features,
+      workflowDefaults,
+    };
+  }
+
+  if (selectedNode) {
+    if (selectedNode.lifecycle === 'requirements' && selectedNode.state === 'action-required') {
+      return { type: 'prd-review', node: selectedNode };
+    }
+    if (selectedNode.lifecycle === 'implementation' && selectedNode.state === 'action-required') {
+      return { type: 'tech-review', node: selectedNode };
+    }
+    if (
+      selectedNode.lifecycle === 'review' &&
+      (selectedNode.state === 'action-required' || selectedNode.state === 'error')
+    ) {
+      return { type: 'merge-review', node: selectedNode };
+    }
+    return { type: 'feature', node: selectedNode };
+  }
+
+  if (selectedRepoNode) {
+    return { type: 'repository', data: selectedRepoNode };
+  }
+
+  return null;
+}

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/index.ts

@@ -0,0 +1,2 @@
+export { ControlCenterDrawer, type ControlCenterDrawerProps } from './control-center-drawer';
+export { computeDrawerView, type DrawerView } from './drawer-view';

package/web/.next/standalone/src/presentation/web/components/common/drawer-action-bar/drawer-action-bar-config.ts

@@ -11,14 +11,10 @@ export interface DrawerActionBarProps {
   approveIcon?: ReactNode;
   /** Placeholder for the inline revision input */
   revisionPlaceholder?: string;
-  /** Title for the reject feedback dialog */
-  rejectDialogTitle?: string;
   /** Whether an approval/processing operation is in flight */
   isProcessing?: boolean;
   /** Whether a reject operation is in flight */
   isRejecting?: boolean;
-  /** Whether to show the reject button (defaults to true when onReject is provided) */
-  showRejectButton?: boolean;
   /** Content rendered between revision input and action buttons (e.g. progress bar) */
   children?: ReactNode;
 }

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

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { DrawerActionBar } from './drawer-action-bar';
 
 const meta: Meta<typeof DrawerActionBar> = {
-  title: 'Composed/DrawerActionBar',
+  title: 'Drawers/Base/DrawerActionBar',
   component: DrawerActionBar,
   tags: ['autodocs'],
   parameters: {
@@ -37,7 +37,7 @@ export const WithIcon: Story = {
   },
 };
 
-/** With reject button. Plays "reject" sound on reject click, "approve" on approve. */
+/** With revision input — single line: chat input, send, approve. */
 export const WithReject: Story = {
   args: {
     onReject: fn().mockName('onReject'),
@@ -45,7 +45,7 @@ export const WithReject: Story = {
   },
 };
 
-/** Processing state — buttons disabled, no sounds play. */
+/** Processing state — all controls disabled. */
 export const Processing: Story = {
   args: {
     onReject: fn().mockName('onReject'),
@@ -54,7 +54,7 @@ export const Processing: Story = {
   },
 };
 
-/** Rejecting state — buttons disabled. */
+/** Rejecting state — all controls disabled. */
 export const Rejecting: Story = {
   args: {
     onReject: fn().mockName('onReject'),
@@ -63,7 +63,7 @@ export const Rejecting: Story = {
   },
 };
 
-/** With revision input and reject button. */
+/** Custom revision placeholder. */
 export const WithRevisionInput: Story = {
   args: {
     onReject: fn().mockName('onReject'),
@@ -71,12 +71,3 @@ export const WithRevisionInput: Story = {
     revisionPlaceholder: 'Ask AI to revise the plan...',
   },
 };
-
-/** Custom reject dialog title. */
-export const CustomRejectTitle: Story = {
-  args: {
-    onReject: fn().mockName('onReject'),
-    approveLabel: 'Approve Plan',
-    rejectDialogTitle: 'Reject Plan',
-  },
-};

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

@@ -1,10 +1,9 @@
 'use client';
 
 import { useState } from 'react';
-import { X } from 'lucide-react';
+import { Send } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { RejectFeedbackDialog } from '@/components/common/reject-feedback-dialog';
-import { DrawerRevisionInput } from '@/components/common/drawer-revision-input';
+import { Input } from '@/components/ui/input';
 import { useSoundAction } from '@/hooks/use-sound-action';
 import type { DrawerActionBarProps } from './drawer-action-bar-config';
 
@@ -14,65 +13,73 @@ export function DrawerActionBar({
   approveLabel,
   approveIcon,
   revisionPlaceholder,
-  rejectDialogTitle,
   isProcessing = false,
   isRejecting = false,
-  showRejectButton = true,
   children,
 }: DrawerActionBarProps) {
-  const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
+  const [chatInput, setChatInput] = useState('');
   const approveSound = useSoundAction('approve');
-  const rejectSound = useSoundAction('reject');
   const disabled = isProcessing || isRejecting;
 
+  function handleRevisionSubmit(e: { preventDefault: () => void }) {
+    e.preventDefault();
+    const text = chatInput.trim();
+    if (!text || !onReject) return;
+    onReject(text);
+    setChatInput('');
+  }
+
   return (
     <div className="border-border shrink-0 border-t">
       {children}
       {onReject ? (
-        <DrawerRevisionInput
-          onSubmit={onReject}
-          placeholder={revisionPlaceholder}
-          disabled={disabled || !onReject}
-        />
-      ) : null}
-      <div className="flex items-center gap-2 px-4 pb-4">
-        {onReject && showRejectButton ? (
-          <>
-            <Button
-              type="button"
-              variant="outline"
-              className="text-destructive hover:text-destructive"
-              disabled={disabled}
-              onClick={() => {
-                rejectSound.play();
-                setRejectDialogOpen(true);
-              }}
-            >
-              <X className="mr-1.5 h-4 w-4" />
-              Reject
-            </Button>
-            <RejectFeedbackDialog
-              open={rejectDialogOpen}
-              onOpenChange={setRejectDialogOpen}
-              onConfirm={onReject}
-              isSubmitting={isRejecting}
-              title={rejectDialogTitle}
-            />
-          </>
-        ) : null}
-        <Button
-          type="button"
-          className="flex-1"
-          disabled={disabled}
-          onClick={() => {
-            approveSound.play();
-            onApprove();
-          }}
-        >
-          {approveIcon}
-          {approveLabel}
-        </Button>
-      </div>
+        <form onSubmit={handleRevisionSubmit} className="flex items-center gap-2 p-4">
+          <Input
+            type="text"
+            placeholder={revisionPlaceholder ?? 'Ask AI to revise...'}
+            aria-label={revisionPlaceholder ?? 'Ask AI to revise...'}
+            disabled={disabled}
+            value={chatInput}
+            onChange={(e) => setChatInput(e.target.value)}
+            className="flex-1"
+          />
+          <Button
+            type="submit"
+            variant="secondary"
+            size="icon"
+            aria-label="Send"
+            disabled={disabled}
+          >
+            <Send />
+          </Button>
+          <Button
+            type="button"
+            disabled={disabled}
+            onClick={() => {
+              approveSound.play();
+              onApprove();
+            }}
+          >
+            {approveIcon}
+            {approveLabel}
+          </Button>
+        </form>
+      ) : (
+        <div className="flex items-center gap-2 px-4 pb-4">
+          <Button
+            type="button"
+            className="flex-1"
+            disabled={disabled}
+            onClick={() => {
+              approveSound.play();
+              onApprove();
+            }}
+          >
+            {approveIcon}
+            {approveLabel}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -41,7 +41,7 @@ import { Button } from '@/components/ui/button';
  *   with full absolute paths, filenames, and sizes
  */
 const meta: Meta<typeof FeatureCreateDrawer> = {
-  title: 'Composed/FeatureCreateDrawer',
+  title: 'Drawers/Feature/FeatureCreateDrawer',
   component: FeatureCreateDrawer,
   tags: ['autodocs'],
   parameters: {
@@ -309,6 +309,47 @@ export const WithWorkflowDefaults: Story = {
  * In Storybook, the native picker won't work (no backend), but submitted data
  * would show the paths if files were attached programmatically.
  */
+/* ---------------------------------------------------------------------------
+ * In-drawer story — full page context, starts open
+ * ------------------------------------------------------------------------- */
+
+function CreateDrawerShellTemplate() {
+  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>
+      <FeatureCreateDrawer
+        open={open}
+        onClose={() => {
+          setOpen(false);
+          logClose();
+        }}
+        onSubmit={(data) => {
+          logSubmit(data);
+          setOpen(false);
+        }}
+        repositoryPath="/Users/dev/my-repo"
+      />
+    </div>
+  );
+}
+
+/** Feature create drawer rendered inside a full-page context — starts open. */
+export const InDrawer: Story = {
+  render: () => <CreateDrawerShellTemplate />,
+};
+
+/* ---------------------------------------------------------------------------
+ * Interactive story — full paths shown in submitted data panel
+ * ------------------------------------------------------------------------- */
+
 export const Interactive: Story = {
   render: function InteractiveRender() {
     const [open, setOpen] = useState(false);

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

@@ -22,7 +22,6 @@ import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { CheckboxGroup } from '@/components/ui/checkbox-group';
 import { CheckboxGroupItem } from '@/components/ui/checkbox-group-item';
-import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { FileAttachment } from '@shepai/core/infrastructure/services/file-dialog.service';
@@ -87,8 +86,6 @@ export function FeatureCreateDrawer({
   features,
   initialParentId,
 }: FeatureCreateDrawerProps) {
-  const drawerOpenSound = useSoundAction('drawer-open');
-  const drawerCloseSound = useSoundAction('drawer-close');
   const createSound = useSoundAction('create');
   const defaultGates = workflowDefaults?.approvalGates ?? EMPTY_GATES;
   const defaultPush = workflowDefaults?.push ?? false;
@@ -102,14 +99,6 @@ export function FeatureCreateDrawer({
   const [openPr, setOpenPr] = useState(defaultOpenPr);
   const [parentId, setParentId] = useState<string | undefined>(undefined);
 
-  // Play drawer-open sound when the drawer opens
-  const playDrawerOpen = drawerOpenSound.play;
-  useEffect(() => {
-    if (open) {
-      playDrawerOpen();
-    }
-  }, [open, playDrawerOpen]);
-
   // Sync state when workflowDefaults load asynchronously
   useEffect(() => {
     if (workflowDefaults) {
@@ -137,10 +126,9 @@ export function FeatureCreateDrawer({
   }, [defaultGates, defaultPush, defaultOpenPr]);
 
   const handleClose = useCallback(() => {
-    drawerCloseSound.play();
     resetForm();
     onClose();
-  }, [onClose, resetForm, drawerCloseSound]);
+  }, [onClose, resetForm]);
 
   const handleSubmit = useCallback(
     (e: React.FormEvent) => {
@@ -227,10 +215,8 @@ export function FeatureCreateDrawer({
         </div>
       }
     >
-      <Separator />
-
       {/* Form body */}
-      <div className="p-4">
+      <div className="overflow-y-auto p-4">
         <form id="create-feature-form" onSubmit={handleSubmit} className="flex flex-col gap-4">
           {/* Feature name */}
           <div className="flex flex-col gap-1.5">

package/web/.next/standalone/src/presentation/web/components/common/feature-create-drawer/index.ts

@@ -3,4 +3,5 @@ export {
   type FeatureCreateDrawerProps,
   type FeatureCreatePayload,
   type FileAttachment,
+  type ParentFeatureOption,
 } from './feature-create-drawer';

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

@@ -7,7 +7,7 @@ import type { FeatureLifecyclePhase, FeatureNodeState } from '@/components/commo
 import { Button } from '@/components/ui/button';
 
 const meta: Meta<typeof FeatureDrawer> = {
-  title: 'Composed/FeatureDrawer',
+  title: 'Drawers/Feature/FeatureDrawer',
   component: FeatureDrawer,
   tags: ['autodocs'],
   parameters: {
@@ -91,6 +91,23 @@ const errorData: FeatureNodeData = {
   branch: 'feat/email-service',
 };
 
+const reviewInProgressData: FeatureNodeData = {
+  name: 'Auth Module',
+  description: 'Implement OAuth2 authentication flow',
+  featureId: '#f6',
+  lifecycle: 'review',
+  state: 'running',
+  progress: 0,
+  agentType: 'claude-code',
+  repositoryPath: '/home/user/my-repo',
+  branch: 'feat/auth-module',
+  pr: {
+    url: 'https://github.com/org/repo/pull/17',
+    number: 17,
+    status: PrStatus.Open,
+  },
+};
+
 /* ---------------------------------------------------------------------------
  * Trigger wrapper — starts closed, click to open
  * ------------------------------------------------------------------------- */
@@ -112,6 +129,11 @@ function DrawerTrigger({ data, label }: { data: FeatureNodeData; label: string }
  * Per-state stories
  * ------------------------------------------------------------------------- */
 
+/** Feature drawer rendered inside a full-page context — starts open. Primary story. */
+export const Default: Story = {
+  render: () => <FeatureDrawerShellTemplate data={runningData} />,
+};
+
 export const Running: Story = {
   render: () => <DrawerTrigger data={runningData} label="Open Running" />,
 };
@@ -128,6 +150,11 @@ export const Blocked: Story = {
   render: () => <DrawerTrigger data={blockedData} label="Open Blocked" />,
 };
 
+/** Review lifecycle + running state — matches the look/feel of review pending-action drawers. */
+export const ReviewInProgress: Story = {
+  render: () => <DrawerTrigger data={reviewInProgressData} label="Open Review In Progress" />,
+};
+
 export const Error: Story = {
   render: () => <DrawerTrigger data={errorData} label="Open Error" />,
 };
@@ -340,7 +367,7 @@ function DrawerTriggerWithDelete({
   );
 }
 
-/** FeatureDrawer with a delete button in the footer. */
+/** FeatureDrawer with a delete icon button in the header. */
 export const WithDeleteButton: Story = {
   render: () => <DrawerTriggerWithDelete data={doneData} label="Open With Delete" />,
 };
@@ -406,3 +433,29 @@ export const PrStatusOpen: Story = {
 export const PrStatusMerged: Story = {
   render: () => <DrawerTrigger data={doneWithPrData} label="Open PR Status: Merged" />,
 };
+
+/* ---------------------------------------------------------------------------
+ * In-drawer story — full page context, starts open
+ * ------------------------------------------------------------------------- */
+
+function FeatureDrawerShellTemplate({ data }: { data: FeatureNodeData }) {
+  const [selected, setSelected] = useState<FeatureNodeData | null>(data);
+
+  return (
+    <div style={{ height: '100vh', background: '#f8fafc', padding: '2rem' }}>
+      <button
+        type="button"
+        onClick={() => setSelected(data)}
+        style={{ padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }}
+      >
+        Open Drawer
+      </button>
+      <FeatureDrawer selectedNode={selected} onClose={() => setSelected(null)} />
+    </div>
+  );
+}
+
+/** Feature drawer rendered inside a full-page context — starts open. */
+export const InDrawer: Story = {
+  render: () => <FeatureDrawerShellTemplate data={runningData} />,
+};