@shepai/cli 1.62.0 → 1.64.0

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

@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { BaseDrawer } from './base-drawer';
+import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
+import { Button } from '@/components/ui/button';
+
+const meta: Meta<typeof BaseDrawer> = {
+  title: 'Common/BaseDrawer',
+  component: BaseDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseDrawer>;
+
+/* ---------------------------------------------------------------------------
+ * Trigger wrapper — starts closed, click to open
+ * ------------------------------------------------------------------------- */
+
+function DrawerTrigger(props: Omit<React.ComponentProps<typeof BaseDrawer>, 'open' | 'onClose'>) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex h-screen items-start p-4">
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        Open Drawer
+      </Button>
+      <BaseDrawer {...props} open={open} onClose={() => setOpen(false)} />
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+/** Default drawer with sm size, non-modal, children only. */
+export const Default: Story = {
+  render: () => (
+    <DrawerTrigger>
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">Default drawer content</p>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
+/** Explicit sm size with inspector-style content. */
+export const SmallSize: Story = {
+  render: () => (
+    <DrawerTrigger size="sm">
+      <div className="flex flex-col gap-3 p-4">
+        <h3 className="text-sm font-semibold">Feature Inspector</h3>
+        <div className="flex flex-col gap-1">
+          <span className="text-muted-foreground text-xs">Status</span>
+          <span className="text-sm">Running</span>
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-muted-foreground text-xs">Progress</span>
+          <div className="bg-muted h-2 w-full overflow-hidden rounded-full">
+            <div className="bg-primary h-full w-[45%] rounded-full" />
+          </div>
+        </div>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
+/** Medium size with content-rich review-style content. */
+export const MediumSize: Story = {
+  render: () => (
+    <DrawerTrigger size="md">
+      <div className="flex flex-col gap-4 p-4">
+        <h3 className="text-sm font-semibold">Review Content</h3>
+        <p className="text-muted-foreground text-sm">
+          This drawer uses size=&quot;md&quot; (w-xl / 576px) for content-rich review panels that
+          need more horizontal space for diff summaries, tables, and code blocks.
+        </p>
+        <div className="bg-muted rounded-md p-3">
+          <pre className="text-xs">
+            {`+ Added authentication middleware\n- Removed legacy session handler\n  Updated user model schema`}
+          </pre>
+        </div>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
+/** Modal drawer with overlay. */
+export const Modal: Story = {
+  render: () => (
+    <DrawerTrigger modal>
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">
+          This drawer is modal — an overlay blocks background interaction and focus is trapped.
+        </p>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
+/** Drawer with header slot containing DrawerTitle and DrawerDescription. */
+export const WithHeader: Story = {
+  render: () => (
+    <DrawerTrigger
+      header={
+        <>
+          <DrawerTitle>Feature Details</DrawerTitle>
+          <DrawerDescription>FEAT-042 — Authentication Flow</DrawerDescription>
+        </>
+      }
+    >
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">Content below the header.</p>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
+/** Drawer with footer slot containing action buttons. */
+export const WithFooter: Story = {
+  render: () => (
+    <DrawerTrigger
+      footer={
+        <div className="flex gap-2">
+          <Button variant="outline" className="flex-1">
+            Cancel
+          </Button>
+          <Button className="flex-1">Save</Button>
+        </div>
+      }
+    >
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">Content above the footer.</p>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
+/** Drawer with both header and footer slots populated. */
+export const WithHeaderAndFooter: Story = {
+  render: () => (
+    <DrawerTrigger
+      header={
+        <>
+          <DrawerTitle>Create Feature</DrawerTitle>
+          <DrawerDescription>Fill in the details below</DrawerDescription>
+        </>
+      }
+      footer={
+        <div className="flex gap-2">
+          <Button variant="outline" className="flex-1">
+            Cancel
+          </Button>
+          <Button className="flex-1">Create</Button>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex flex-col gap-1">
+          <label className="text-sm font-medium">Name</label>
+          <input
+            type="text"
+            className="border-input bg-background rounded-md border px-3 py-2 text-sm"
+            placeholder="Feature name"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label className="text-sm font-medium">Description</label>
+          <textarea
+            className="border-input bg-background rounded-md border px-3 py-2 text-sm"
+            rows={3}
+            placeholder="Optional description"
+          />
+        </div>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
+/** Drawer with content that exceeds viewport to demonstrate scroll behavior. */
+export const ScrollableContent: Story = {
+  render: () => (
+    <DrawerTrigger
+      header={
+        <>
+          <DrawerTitle>Scrollable Content</DrawerTitle>
+          <DrawerDescription>Content below overflows and scrolls</DrawerDescription>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-4 p-4">
+        {Array.from({ length: 30 }, (_, i) => (
+          <div key={i} className="border-border rounded-md border p-3">
+            <h4 className="text-sm font-medium">Item {i + 1}</h4>
+            <p className="text-muted-foreground text-xs">
+              This is a scrollable content item to demonstrate overflow handling.
+            </p>
+          </div>
+        ))}
+      </div>
+    </DrawerTrigger>
+  ),
+};

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

@@ -0,0 +1,90 @@
+'use client';
+
+import { XIcon } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerOverlay,
+} from '@/components/ui/drawer';
+
+const drawerVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'w-96',
+      md: 'w-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+export interface BaseDrawerProps extends VariantProps<typeof drawerVariants> {
+  open: boolean;
+  onClose: () => void;
+  modal?: boolean;
+  header?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+
+export function BaseDrawer({
+  open,
+  onClose,
+  modal = false,
+  size,
+  header,
+  children,
+  footer,
+  className,
+  'data-testid': testId,
+}: BaseDrawerProps) {
+  return (
+    <Drawer
+      direction="right"
+      modal={modal}
+      handleOnly
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+    >
+      {modal ? <DrawerOverlay /> : null}
+      <DrawerContent
+        direction="right"
+        showCloseButton={false}
+        className={cn(drawerVariants({ size }), className)}
+        data-testid={testId}
+      >
+        {/* 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"
+          data-testid={testId ? `${testId}-close-button` : undefined}
+        >
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </button>
+
+        {/* Header slot */}
+        {header ? <DrawerHeader>{header}</DrawerHeader> : null}
+
+        {/* Scrollable content area */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="flex flex-col">{children}</div>
+        </div>
+
+        {/* Footer slot */}
+        {footer ? <DrawerFooter>{footer}</DrawerFooter> : null}
+      </DrawerContent>
+    </Drawer>
+  );
+}

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

@@ -0,0 +1 @@
+export { BaseDrawer, type BaseDrawerProps } from './base-drawer';

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

@@ -36,7 +36,7 @@ import { Button } from '@/components/ui/button';
  * - Submit button is disabled when name is empty
  * - `approvalGates` always included: `{ allowPrd, allowPlan, allowMerge }` (all false by default)
  * - Non-modal (`modal={false}`) — canvas stays interactive behind the drawer
- * - Fixed width: 384px (`w-96`)
+ * - Fixed width: 448px (`w-xl`) — matches review drawers (PRD, Plan, Merge)
  * - Attachments use native OS file picker via `pickFiles()` — returns `FileAttachment[]`
  *   with full absolute paths, filenames, and sizes
  */

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

@@ -3,7 +3,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import {
-  XIcon,
   PlusIcon,
   FileIcon,
   FileTextIcon,
@@ -15,14 +14,8 @@ import {
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useSoundAction } from '@/hooks/use-sound-action';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerFooter,
-} from '@/components/ui/drawer';
+import { BaseDrawer } from '@/components/common/base-drawer';
+import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -142,16 +135,11 @@ export function FeatureCreateDrawer({
     setParentId(undefined);
   }, [defaultGates, defaultPush, defaultOpenPr]);
 
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (!nextOpen) {
-        drawerCloseSound.play();
-        resetForm();
-        onClose();
-      }
-    },
-    [onClose, resetForm, drawerCloseSound]
-  );
+  const handleClose = useCallback(() => {
+    drawerCloseSound.play();
+    resetForm();
+    onClose();
+  }, [onClose, resetForm, drawerCloseSound]);
 
   const handleSubmit = useCallback(
     (e: React.FormEvent) => {
@@ -208,23 +196,14 @@ export function FeatureCreateDrawer({
   const hasFeatures = features && features.length > 0;
 
   return (
-    <Drawer direction="right" modal={false} handleOnly open={open} onOpenChange={handleOpenChange}>
-      <DrawerContent direction="right" className="w-96" showCloseButton={false}>
-        {/* Close button */}
-        <button
-          type="button"
-          aria-label="Close"
-          onClick={() => {
-            drawerCloseSound.play();
-            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>
+    <BaseDrawer
+      open={open}
+      onClose={handleClose}
+      size="md"
+      modal={false}
+      data-testid="feature-create-drawer"
+      header={
+        <>
           <div className="flex items-center gap-2">
             <div className="h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" />
             <DrawerTitle>NEW FEATURE</DrawerTitle>
@@ -234,164 +213,156 @@ export function FeatureCreateDrawer({
               <Badge variant="secondary">Creating...</Badge>
             </div>
           </DrawerDescription>
-        </DrawerHeader>
+        </>
+      }
+      footer={
+        <div className="flex flex-row justify-end gap-2">
+          <Button variant="outline" onClick={handleClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button type="submit" form="create-feature-form" disabled={!name.trim() || isSubmitting}>
+            {isSubmitting ? 'Creating...' : '+ Create Feature'}
+          </Button>
+        </div>
+      }
+    >
+      <Separator />
+
+      {/* Form body */}
+      <div className="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">
+            <Label
+              htmlFor="feature-name"
+              className="text-muted-foreground text-xs font-semibold tracking-wider"
+            >
+              FEATURE NAME
+            </Label>
+            <Input
+              id="feature-name"
+              placeholder="e.g. GitHub OAuth Login"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              disabled={isSubmitting}
+            />
+          </div>
 
-        <Separator />
+          {/* Description */}
+          <div className="flex flex-col gap-1.5">
+            <Label
+              htmlFor="feature-description"
+              className="text-muted-foreground text-xs font-semibold tracking-wider"
+            >
+              DESCRIPTION
+            </Label>
+            <Textarea
+              id="feature-description"
+              placeholder="Describe what this feature does..."
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={4}
+              disabled={isSubmitting}
+            />
+          </div>
 
-        {/* Form body */}
-        <div className="flex-1 overflow-y-auto p-4">
-          <form id="create-feature-form" onSubmit={handleSubmit} className="flex flex-col gap-4">
-            {/* Feature name */}
+          {/* Parent feature selector (only when features are available) */}
+          {hasFeatures ? (
             <div className="flex flex-col gap-1.5">
               <Label
-                htmlFor="feature-name"
+                htmlFor="parent-feature"
                 className="text-muted-foreground text-xs font-semibold tracking-wider"
               >
-                FEATURE NAME
+                PARENT FEATURE
               </Label>
-              <Input
-                id="feature-name"
-                placeholder="e.g. GitHub OAuth Login"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                required
+              <ParentFeatureCombobox
+                features={features}
+                value={parentId}
+                onChange={setParentId}
                 disabled={isSubmitting}
               />
             </div>
+          ) : null}
+
+          {/* Auto-approve checkboxes */}
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
+              APPROVE
+            </Label>
+            <CheckboxGroup
+              label="Autonomous Mode"
+              description="YOLO!"
+              parentAriaLabel="Auto approve all"
+              options={AUTO_APPROVE_OPTIONS}
+              value={approvalGates}
+              onValueChange={setApprovalGates}
+              disabled={isSubmitting}
+            />
+          </div>
 
-            {/* Description */}
-            <div className="flex flex-col gap-1.5">
-              <Label
-                htmlFor="feature-description"
-                className="text-muted-foreground text-xs font-semibold tracking-wider"
-              >
-                DESCRIPTION
-              </Label>
-              <Textarea
-                id="feature-description"
-                placeholder="Describe what this feature does..."
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                rows={4}
+          {/* Git options */}
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
+              GIT
+            </Label>
+            <div className="flex flex-col gap-2">
+              <CheckboxGroupItem
+                id="push"
+                label="Push"
+                description="Push branch to remote after implementation."
+                checked={push || openPr}
+                onCheckedChange={setPush}
+                disabled={openPr || isSubmitting}
+              />
+              <CheckboxGroupItem
+                id="open-pr"
+                label="Create PR"
+                description="Open a pull request after pushing."
+                checked={openPr}
+                onCheckedChange={setOpenPr}
                 disabled={isSubmitting}
               />
             </div>
+          </div>
 
-            {/* Parent feature selector (only when features are available) */}
-            {hasFeatures ? (
-              <div className="flex flex-col gap-1.5">
-                <Label
-                  htmlFor="parent-feature"
-                  className="text-muted-foreground text-xs font-semibold tracking-wider"
-                >
-                  PARENT FEATURE
-                </Label>
-                <ParentFeatureCombobox
-                  features={features}
-                  value={parentId}
-                  onChange={setParentId}
-                  disabled={isSubmitting}
-                />
-              </div>
-            ) : null}
-
-            {/* Auto-approve checkboxes */}
-            <div className="flex flex-col gap-1.5">
+          {/* Attachments */}
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between">
               <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
-                APPROVE
+                ATTACHMENTS
+                {attachments.length > 0 && (
+                  <span className="text-muted-foreground/60 ml-1.5">({attachments.length})</span>
+                )}
               </Label>
-              <CheckboxGroup
-                label="Autonomous Mode"
-                description="YOLO!"
-                parentAriaLabel="Auto approve all"
-                options={AUTO_APPROVE_OPTIONS}
-                value={approvalGates}
-                onValueChange={setApprovalGates}
+              <Button
+                type="button"
+                variant="outline"
+                size="xs"
+                onClick={handleAddFiles}
                 disabled={isSubmitting}
-              />
+              >
+                <PlusIcon className="size-3" />
+                Add Files
+              </Button>
             </div>
 
-            {/* Git options */}
-            <div className="flex flex-col gap-1.5">
-              <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
-                GIT
-              </Label>
+            {attachments.length > 0 && (
               <div className="flex flex-col gap-2">
-                <CheckboxGroupItem
-                  id="push"
-                  label="Push"
-                  description="Push branch to remote after implementation."
-                  checked={push || openPr}
-                  onCheckedChange={setPush}
-                  disabled={openPr || isSubmitting}
-                />
-                <CheckboxGroupItem
-                  id="open-pr"
-                  label="Create PR"
-                  description="Open a pull request after pushing."
-                  checked={openPr}
-                  onCheckedChange={setOpenPr}
-                  disabled={isSubmitting}
-                />
+                {attachments.map((file) => (
+                  <AttachmentCard
+                    key={file.path}
+                    file={file}
+                    onRemove={() => handleRemoveFile(file.path)}
+                    disabled={isSubmitting}
+                  />
+                ))}
               </div>
-            </div>
-
-            {/* Attachments */}
-            <div className="flex flex-col gap-2">
-              <div className="flex items-center justify-between">
-                <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
-                  ATTACHMENTS
-                  {attachments.length > 0 && (
-                    <span className="text-muted-foreground/60 ml-1.5">({attachments.length})</span>
-                  )}
-                </Label>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="xs"
-                  onClick={handleAddFiles}
-                  disabled={isSubmitting}
-                >
-                  <PlusIcon className="size-3" />
-                  Add Files
-                </Button>
-              </div>
-
-              {attachments.length > 0 && (
-                <div className="flex flex-col gap-2">
-                  {attachments.map((file) => (
-                    <AttachmentCard
-                      key={file.path}
-                      file={file}
-                      onRemove={() => handleRemoveFile(file.path)}
-                      disabled={isSubmitting}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          </form>
-        </div>
-
-        {/* Footer */}
-        <Separator />
-        <DrawerFooter className="flex-row justify-end gap-2">
-          <Button
-            variant="outline"
-            onClick={() => {
-              drawerCloseSound.play();
-              onClose();
-            }}
-            disabled={isSubmitting}
-          >
-            Cancel
-          </Button>
-          <Button type="submit" form="create-feature-form" disabled={!name.trim() || isSubmitting}>
-            {isSubmitting ? 'Creating...' : '+ Create Feature'}
-          </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+            )}
+          </div>
+        </form>
+      </div>
+    </BaseDrawer>
   );
 }