@shepai/cli 1.62.0 → 1.64.0

package/dist/src/presentation/web/components/common/base-drawer/base-drawer.stories.js

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

package/dist/src/presentation/web/components/common/base-drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { BaseDrawer, type BaseDrawerProps } from './base-drawer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/base-drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/base-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/presentation/web/components/common/base-drawer/index.js

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

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAC/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAG5E,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,0DAA0D;AAC1D,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAcD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,eAAe,GAChB,EAAE,wBAAwB,2CA4S1B"}
+{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAC/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAG5E,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,0DAA0D;AAC1D,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAcD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,eAAe,GAChB,EAAE,wBAAwB,2CAsR1B"}

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.js

@@ -1,10 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { XIcon, PlusIcon, FileIcon, FileTextIcon, ImageIcon, CodeIcon, Trash2Icon, ChevronsUpDown, CheckIcon, } from 'lucide-react';
+import { PlusIcon, FileIcon, FileTextIcon, ImageIcon, CodeIcon, Trash2Icon, ChevronsUpDown, CheckIcon, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, } from '../../ui/drawer.js';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Button } from '../../ui/button.js';
 import { Input } from '../../ui/input.js';
 import { Textarea } from '../../ui/textarea.js';
@@ -68,12 +69,10 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         setOpenPr(defaultOpenPr);
         setParentId(undefined);
     }, [defaultGates, defaultPush, defaultOpenPr]);
-    const handleOpenChange = useCallback((nextOpen) => {
-        if (!nextOpen) {
-            drawerCloseSound.play();
-            resetForm();
-            onClose();
-        }
+    const handleClose = useCallback(() => {
+        drawerCloseSound.play();
+        resetForm();
+        onClose();
     }, [onClose, resetForm, drawerCloseSound]);
     const handleSubmit = useCallback((e) => {
         e.preventDefault();
@@ -124,13 +123,7 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         setAttachments((prev) => prev.filter((f) => f.path !== path));
     }, []);
     const hasFeatures = features && features.length > 0;
-    return (_jsx(Drawer, { direction: "right", modal: false, handleOnly: true, open: open, onOpenChange: handleOpenChange, children: _jsxs(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, children: [_jsx("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", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsx(DrawerTitle, { children: "NEW FEATURE" })] }), _jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })] }), _jsx(Separator, {}), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsxs("form", { id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-name", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "FEATURE NAME" }), _jsx(Input, { id: "feature-name", placeholder: "e.g. GitHub OAuth Login", value: name, onChange: (e) => setName(e.target.value), required: true, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIPTION" }), _jsx(Textarea, { id: "feature-description", placeholder: "Describe what this feature does...", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, disabled: isSubmitting })] }), hasFeatures ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "APPROVE" }), _jsx(CheckboxGroup, { label: "Autonomous Mode", description: "YOLO!", parentAriaLabel: "Auto approve all", options: AUTO_APPROVE_OPTIONS, value: approvalGates, onValueChange: setApprovalGates, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "GIT" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(CheckboxGroupItem, { id: "push", label: "Push", description: "Push branch to remote after implementation.", checked: push || openPr, onCheckedChange: setPush, disabled: openPr || isSubmitting }), _jsx(CheckboxGroupItem, { id: "open-pr", label: "Create PR", description: "Open a pull request after pushing.", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: ["ATTACHMENTS", attachments.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-1.5", children: ["(", attachments.length, ")"] }))] }), _jsxs(Button, { type: "button", variant: "outline", size: "xs", onClick: handleAddFiles, disabled: isSubmitting, children: [_jsx(PlusIcon, { className: "size-3" }), "Add Files"] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: attachments.map((file) => (_jsx(AttachmentCard, { file: file, onRemove: () => handleRemoveFile(file.path), disabled: isSubmitting }, file.path))) }))] })] }) }), _jsx(Separator, {}), _jsxs(DrawerFooter, { className: "flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => {
-                                drawerCloseSound.play();
-                                onClose();
-                            }, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !name.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] })] }) }));
+    return (_jsxs(BaseDrawer, { open: open, onClose: handleClose, size: "md", modal: false, "data-testid": "feature-create-drawer", header: _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsx(DrawerTitle, { children: "NEW FEATURE" })] }), _jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })] }), footer: _jsxs("div", { className: "flex flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: handleClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !name.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] }), children: [_jsx(Separator, {}), _jsx("div", { className: "p-4", children: _jsxs("form", { id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-name", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "FEATURE NAME" }), _jsx(Input, { id: "feature-name", placeholder: "e.g. GitHub OAuth Login", value: name, onChange: (e) => setName(e.target.value), required: true, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIPTION" }), _jsx(Textarea, { id: "feature-description", placeholder: "Describe what this feature does...", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, disabled: isSubmitting })] }), hasFeatures ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "APPROVE" }), _jsx(CheckboxGroup, { label: "Autonomous Mode", description: "YOLO!", parentAriaLabel: "Auto approve all", options: AUTO_APPROVE_OPTIONS, value: approvalGates, onValueChange: setApprovalGates, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "GIT" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(CheckboxGroupItem, { id: "push", label: "Push", description: "Push branch to remote after implementation.", checked: push || openPr, onCheckedChange: setPush, disabled: openPr || isSubmitting }), _jsx(CheckboxGroupItem, { id: "open-pr", label: "Create PR", description: "Open a pull request after pushing.", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: ["ATTACHMENTS", attachments.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-1.5", children: ["(", attachments.length, ")"] }))] }), _jsxs(Button, { type: "button", variant: "outline", size: "xs", onClick: handleAddFiles, disabled: isSubmitting, children: [_jsx(PlusIcon, { className: "size-3" }), "Add Files"] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: attachments.map((file) => (_jsx(AttachmentCard, { file: file, onRemove: () => handleRemoveFile(file.path), disabled: isSubmitting }, file.path))) }))] })] }) })] }));
 }
 function ParentFeatureCombobox({ features, value, onChange, disabled, }) {
     const [open, setOpen] = useState(false);

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.d.ts

@@ -26,7 +26,7 @@ import { FeatureCreateDrawer } from './feature-create-drawer.js';
  * - 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/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.js

@@ -32,7 +32,7 @@ import { Button } from '../../ui/button.js';
  * - 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/dist/src/presentation/web/components/common/feature-drawer/feature-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGxE,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAkB,GACnB,EAAE,kBAAkB,2CA8IpB"}
+{"version":3,"file":"feature-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGxE,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAkB,GACnB,EAAE,kBAAkB,2CAoIpB"}

package/dist/src/presentation/web/components/common/feature-drawer/feature-drawer.js

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { XIcon, Loader2, Trash2, ExternalLink, GitCommitHorizontal } from 'lucide-react';
+import { useCallback, useEffect } from 'react';
+import { Loader2, Trash2, ExternalLink, GitCommitHorizontal } from 'lucide-react';
 import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { cn } from '../../../lib/utils.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { OpenActionMenu } from '../../common/open-action-menu/index.js';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, } from '../../ui/drawer.js';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Button } from '../../ui/button.js';
 import { Badge } from '../../ui/badge.js';
 import { Separator } from '../../ui/separator.js';
@@ -17,18 +19,16 @@ import { useFeatureActions } from './use-feature-actions.js';
 export function FeatureDrawer({ selectedNode, onClose, onDelete, isDeleting = false, }) {
     const drawerOpenSound = useSoundAction('drawer-open');
     const drawerCloseSound = useSoundAction('drawer-close');
-    return (_jsx(Drawer, { direction: "right", modal: false, handleOnly: true, open: selectedNode !== null, onOpenChange: (open) => {
-            if (open) {
-                drawerOpenSound.play();
-            }
-            else {
-                drawerCloseSound.play();
-                onClose();
-            }
-        }, children: _jsx(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, children: selectedNode ? (_jsxs(_Fragment, { children: [_jsx("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", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: selectedNode.name }), _jsx(DrawerDescription, { children: selectedNode.featureId })] }), selectedNode.repositoryPath && selectedNode.branch ? (_jsx(DrawerActions, { repositoryPath: selectedNode.repositoryPath, branch: selectedNode.branch, specPath: selectedNode.specPath })) : null, _jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[selectedNode.lifecycle] }), _jsx(StateBadge, { data: selectedNode }), selectedNode.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [selectedNode.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[selectedNode.state].progressClass), style: { width: `${selectedNode.progress}%` } }) })] })) : null] }), selectedNode.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(PrInfoSection, { pr: selectedNode.pr })] })) : null, _jsx(Separator, {}), _jsx(DetailsSection, { data: selectedNode }), onDelete ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { "data-testid": "feature-drawer-delete", className: "p-4", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "destructive", className: "w-full", disabled: isDeleting, children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Delete feature"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: selectedNode.name }), " (", selectedNode.featureId, "). This action cannot be undone.", selectedNode.state === 'running' ? (_jsx(_Fragment, { children: " This feature has a running agent that will be stopped." })) : null] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(selectedNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] }) })] })) : null] })) : null }) }));
+    const isOpen = selectedNode !== null;
+    useEffect(() => {
+        if (isOpen)
+            drawerOpenSound.play();
+    }, [isOpen, drawerOpenSound]);
+    const handleClose = useCallback(() => {
+        drawerCloseSound.play();
+        onClose();
+    }, [onClose, drawerCloseSound]);
+    return (_jsx(BaseDrawer, { open: selectedNode !== null, onClose: handleClose, size: "sm", modal: false, "data-testid": "feature-drawer", header: selectedNode ? (_jsxs("div", { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: selectedNode.name }), _jsx(DrawerDescription, { children: selectedNode.featureId })] })) : undefined, children: selectedNode ? (_jsxs(_Fragment, { children: [selectedNode.repositoryPath && selectedNode.branch ? (_jsx(DrawerActions, { repositoryPath: selectedNode.repositoryPath, branch: selectedNode.branch, specPath: selectedNode.specPath })) : null, _jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[selectedNode.lifecycle] }), _jsx(StateBadge, { data: selectedNode }), selectedNode.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [selectedNode.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[selectedNode.state].progressClass), style: { width: `${selectedNode.progress}%` } }) })] })) : null] }), selectedNode.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(PrInfoSection, { pr: selectedNode.pr })] })) : null, _jsx(Separator, {}), _jsx(DetailsSection, { data: selectedNode }), onDelete ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { "data-testid": "feature-drawer-delete", className: "p-4", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "destructive", className: "w-full", disabled: isDeleting, children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Delete feature"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: selectedNode.name }), " (", selectedNode.featureId, "). This action cannot be undone.", selectedNode.state === 'running' ? (_jsx(_Fragment, { children: " This feature has a running agent that will be stopped." })) : null] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(selectedNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] }) })] })) : null] })) : null }));
 }
 function StateBadge({ data }) {
     const config = featureNodeStateConfig[data.state];

package/dist/src/presentation/web/components/common/repository-node/index.d.ts

@@ -1,3 +1,4 @@
 export { RepositoryNode } from './repository-node.js';
+export { RepositoryDrawer, type RepositoryDrawerProps } from './repository-drawer.js';
 export type { RepositoryNodeData, RepositoryNodeType } from './repository-node-config.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/repository-node/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACnF,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/src/presentation/web/components/common/repository-node/index.js

@@ -1 +1,2 @@
 export { RepositoryNode } from './repository-node.js';
+export { RepositoryDrawer } from './repository-drawer.js';

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.d.ts

@@ -0,0 +1,7 @@
+import type { RepositoryNodeData } from './repository-node-config.js';
+export interface RepositoryDrawerProps {
+    data: RepositoryNodeData | null;
+    onClose: () => void;
+}
+export declare function RepositoryDrawer({ data, onClose }: RepositoryDrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=repository-drawer.d.ts.map

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repository-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-drawer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAkExE"}

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Code2, Terminal, FolderOpen } from 'lucide-react';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
+import { Separator } from '../../ui/separator.js';
+import { ActionButton } from '../../common/action-button/index.js';
+import { useRepositoryActions } from './use-repository-actions.js';
+export function RepositoryDrawer({ data, onClose }) {
+    const actions = useRepositoryActions(data?.repositoryPath ? { repositoryPath: data.repositoryPath } : null);
+    return (_jsx(BaseDrawer, { open: data !== null, onClose: onClose, size: "sm", modal: false, "data-testid": "repository-drawer", header: data ? (_jsxs("div", { "data-testid": "repository-drawer-header", children: [_jsx(DrawerTitle, { children: data.name }), data.repositoryPath ? (_jsx(DrawerDescription, { className: "truncate font-mono text-xs", children: data.repositoryPath })) : null] })) : undefined, children: data?.repositoryPath ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "OPEN WITH" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ActionButton, { label: "Open in IDE", onClick: actions.openInIde, loading: actions.ideLoading, error: !!actions.ideError, icon: Code2, variant: "outline", size: "sm" }), _jsx(ActionButton, { label: "Open in Shell", onClick: actions.openInShell, loading: actions.shellLoading, error: !!actions.shellError, icon: Terminal, variant: "outline", size: "sm" }), _jsx(ActionButton, { label: "Open Folder", onClick: actions.openFolder, loading: actions.folderLoading, error: !!actions.folderError, icon: FolderOpen, variant: "outline", size: "sm" })] })] })] })) : null }));
+}

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RepositoryDrawer } from './repository-drawer.js';
+declare const meta: Meta<typeof RepositoryDrawer>;
+export default meta;
+type Story = StoryObj<typeof RepositoryDrawer>;
+export declare const Default: Story;
+export declare const LongPath: Story;
+export declare const WithoutPath: Story;
+//# sourceMappingURL=repository-drawer.stories.d.ts.map

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repository-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAOvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAqB/C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC"}

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../ui/button.js';
+import { RepositoryDrawer } from './repository-drawer.js';
+const meta = {
+    title: 'Composed/RepositoryDrawer',
+    component: RepositoryDrawer,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const repoData = {
+    id: 'repo-1',
+    name: 'shep-ai/cli',
+    repositoryPath: '/home/user/shep-ai/cli',
+};
+function DrawerTrigger({ data, label }) {
+    const [selected, setSelected] = useState(null);
+    return (_jsxs("div", { className: "flex h-screen items-start p-4", children: [_jsx(Button, { variant: "outline", onClick: () => setSelected(data), children: label }), _jsx(RepositoryDrawer, { data: selected, onClose: () => setSelected(null) })] }));
+}
+export const Default = {
+    render: () => _jsx(DrawerTrigger, { data: repoData, label: "Open Repository" }),
+};
+export const LongPath = {
+    render: () => (_jsx(DrawerTrigger, { data: {
+            ...repoData,
+            repositoryPath: '/home/user/projects/company/some-very-long-path/shep-ai/cli',
+        }, label: "Open Long Path" })),
+};
+export const WithoutPath = {
+    render: () => (_jsx(DrawerTrigger, { data: { ...repoData, repositoryPath: undefined }, label: "Open Without Path" })),
+};

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"review-drawer-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAsGxB"}
+{"version":3,"file":"review-drawer-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CA0FxB"}

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Loader2, Trash2, XIcon } from 'lucide-react';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, } from '../../ui/drawer.js';
+import { Loader2, Trash2 } from 'lucide-react';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Button } from '../../ui/button.js';
 import { Separator } from '../../ui/separator.js';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '../../ui/alert-dialog.js';
@@ -10,8 +11,5 @@ import { useFeatureActions } from '../../common/feature-drawer/use-feature-actio
 export function ReviewDrawerShell({ open, onClose, featureName, featureDescription, featureId, repositoryPath, branch, specPath, onDelete, isDeleting, children, }) {
     const actionsInput = repositoryPath && branch ? { repositoryPath, branch, specPath } : null;
     const actions = useFeatureActions(actionsInput);
-    return (_jsx(Drawer, { direction: "right", modal: false, handleOnly: true, open: open, onOpenChange: (isOpen) => {
-            if (!isOpen)
-                onClose();
-        }, children: _jsxs(DrawerContent, { direction: "right", className: "w-xl", showCloseButton: false, children: [_jsx("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", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: featureName }), featureDescription ? (_jsx(DrawerDescription, { children: featureDescription })) : featureId ? (_jsx(DrawerDescription, { className: "sr-only", children: featureId })) : null] }), actionsInput ? (_jsxs("div", { className: "flex items-center gap-2 px-4 pb-3", children: [_jsx(OpenActionMenu, { actions: actions, repositoryPath: actionsInput.repositoryPath, showSpecs: !!specPath }), onDelete && featureId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-border mx-1 h-4 w-px" }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Delete feature", disabled: isDeleting, className: "text-muted-foreground hover:text-destructive", "data-testid": "review-drawer-delete", children: isDeleting ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Trash2, { className: "size-4" })) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: featureName }), " (", featureId, "). This action cannot be undone."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] })] })) : null] })) : null, _jsx(Separator, {}), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children })] }) }));
+    return (_jsxs(BaseDrawer, { open: open, onClose: onClose, size: "md", modal: false, "data-testid": "review-drawer", header: _jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: featureName }), featureDescription ? (_jsx(DrawerDescription, { children: featureDescription })) : featureId ? (_jsx(DrawerDescription, { className: "sr-only", children: featureId })) : null] }), actionsInput ? (_jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(OpenActionMenu, { actions: actions, repositoryPath: actionsInput.repositoryPath, showSpecs: !!specPath }), onDelete && featureId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-border mx-1 h-4 w-px" }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Delete feature", disabled: isDeleting, className: "text-muted-foreground hover:text-destructive", "data-testid": "review-drawer-delete", children: isDeleting ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Trash2, { className: "size-4" })) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: featureName }), " (", featureId, "). This action cannot be undone."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] })] })) : null] })) : null] }), children: [_jsx(Separator, {}), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children })] }));
 }

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAgB1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAY5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA0azF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAgB1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAc5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAoczF"}

package/dist/src/presentation/web/components/features/control-center/control-center-inner.js

@@ -10,6 +10,7 @@ import { getWorkflowDefaults } from '../../../app/actions/get-workflow-defaults.
 import { getMergeReviewData } from '../../../app/actions/get-merge-review-data.js';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
 import { FeatureDrawer, FeatureCreateDrawer } from '../../common/index.js';
+import { RepositoryDrawer } from '../../common/repository-node/index.js';
 import { PrdQuestionnaireDrawer } from '../../common/prd-questionnaire/index.js';
 import { TechDecisionsDrawer } from '../../common/tech-decisions-review/index.js';
 import { MergeReviewDrawer } from '../../common/merge-review/index.js';
@@ -50,9 +51,26 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     // Merge review drawer state
     const [mergeReviewData, setMergeReviewData] = useState(null);
     const [isLoadingMergeReview, setIsLoadingMergeReview] = useState(false);
+    // Repository drawer state
+    const [selectedRepoNode, setSelectedRepoNode] = useState(null);
+    // Clear all drawers — used for pane click and canvas drag
+    const handleClearDrawers = useCallback(() => {
+        clearSelection();
+        setSelectedRepoNode(null);
+        closeCreateDrawer();
+    }, [clearSelection, closeCreateDrawer]);
+    // Open repository drawer when a repo node is clicked
+    const handleRepositoryClick = useCallback((nodeId) => {
+        const node = nodes.find((n) => n.id === nodeId);
+        if (node?.type === 'repositoryNode') {
+            clearSelection();
+            setSelectedRepoNode(node.data);
+        }
+    }, [nodes, clearSelection]);
     const showPrdDrawer = selectedNode?.lifecycle === 'requirements' && selectedNode?.state === 'action-required';
     const showTechDecisionsDrawer = selectedNode?.lifecycle === 'implementation' && selectedNode?.state === 'action-required';
-    const showMergeReviewDrawer = selectedNode?.lifecycle === 'review' && selectedNode?.state === 'action-required';
+    const showMergeReviewDrawer = selectedNode?.lifecycle === 'review' &&
+        (selectedNode?.state === 'action-required' || selectedNode?.state === 'error');
     const handlePrdSelect = useCallback((questionId, optionId) => {
         setPrdSelections((prev) => ({ ...prev, [questionId]: optionId }));
     }, []);
@@ -257,5 +275,5 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     if (!hasRepositories) {
         return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: clearSelection, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryDelete: handleDeleteRepository, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(FeatureDrawer, { selectedNode: showPrdDrawer || showTechDecisionsDrawer || showMergeReviewDrawer ? null : selectedNode, onClose: clearSelection, onDelete: handleDeleteFeature, isDeleting: isDeleting }), showPrdDrawer ? (_jsx(PrdQuestionnaireDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureDescription: selectedNode?.description, featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: questionnaireData, selections: prdSelections, onSelect: handlePrdSelect, onApprove: handlePrdApprove, onReject: handlePrdReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingQuestionnaire })) : null, showTechDecisionsDrawer ? (_jsx(TechDecisionsDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: techDecisionsData, onApprove: handleTechDecisionsApprove, onReject: handleTechDecisionsReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingTechDecisions })) : null, showMergeReviewDrawer ? (_jsx(MergeReviewDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: mergeReviewData, onApprove: handleMergeApprove, onReject: handleMergeReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingMergeReview })) : null, _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryClick: handleRepositoryClick, onRepositoryDelete: handleDeleteRepository, onRepositorySelect: handleAddRepository, onCanvasDrag: handleClearDrawers, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(FeatureDrawer, { selectedNode: showPrdDrawer || showTechDecisionsDrawer || showMergeReviewDrawer ? null : selectedNode, onClose: clearSelection, onDelete: handleDeleteFeature, isDeleting: isDeleting }), showPrdDrawer ? (_jsx(PrdQuestionnaireDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureDescription: selectedNode?.description, featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: questionnaireData, selections: prdSelections, onSelect: handlePrdSelect, onApprove: handlePrdApprove, onReject: handlePrdReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingQuestionnaire })) : null, showTechDecisionsDrawer ? (_jsx(TechDecisionsDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: techDecisionsData, onApprove: handleTechDecisionsApprove, onReject: handleTechDecisionsReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingTechDecisions })) : null, showMergeReviewDrawer ? (_jsx(MergeReviewDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: mergeReviewData, onApprove: handleMergeApprove, onReject: handleMergeReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingMergeReview })) : null, _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId }), _jsx(RepositoryDrawer, { data: selectedRepoNode, onClose: () => setSelectedRepoNode(null) })] }));
 }

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts

@@ -13,11 +13,13 @@ export interface FeaturesCanvasProps {
     onNodeClick?: (event: React.MouseEvent, node: CanvasNodeType) => void;
     onPaneClick?: (event: React.MouseEvent) => void;
     onRepositoryAdd?: (repoNodeId: string) => void;
+    onRepositoryClick?: (nodeId: string) => void;
     onRepositoryDelete?: (repositoryId: string) => void;
     onConnect?: (connection: Connection) => void;
     onRepositorySelect?: (path: string) => void;
+    onCanvasDrag?: () => void;
     toolbar?: React.ReactNode;
     emptyState?: React.ReactNode;
 }
-export declare function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryDelete, onRepositorySelect, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryClick, onRepositoryDelete, onRepositorySelect, onCanvasDrag, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=features-canvas.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAGrF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE1F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAmHrB"}
+{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAGrF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE1F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAsHrB"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -9,7 +9,7 @@ import { FeatureNode } from '../../common/feature-node/index.js';
 import { RepositoryNode } from '../../common/repository-node/index.js';
 import { AddRepositoryNode } from '../../common/add-repository-node/index.js';
 import { DependencyEdge } from './dependency-edge.js';
-export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryDelete, onRepositorySelect, toolbar, emptyState, }) {
+export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryClick, onRepositoryDelete, onRepositorySelect, onCanvasDrag, toolbar, emptyState, }) {
     const nodeTypes = useMemo(() => ({
         featureNode: FeatureNode,
         repositoryNode: RepositoryNode,
@@ -42,6 +42,7 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
                 : {}),
             ...(node.type === 'repositoryNode' && {
                 onAdd: onRepositoryAdd ? () => onRepositoryAdd(node.id) : undefined,
+                onClick: onRepositoryClick ? () => onRepositoryClick(node.id) : undefined,
                 onDelete: onRepositoryDelete,
             }),
             ...(node.type === 'addRepositoryNode' && {
@@ -54,6 +55,7 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
         onNodeAction,
         onNodeSettings,
         onRepositoryAdd,
+        onRepositoryClick,
         onRepositoryDelete,
         onRepositorySelect,
     ]);
@@ -63,5 +65,5 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
         }
         return (_jsx("div", { "data-testid": "features-canvas-empty", children: _jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) }) }));
     }
-    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }) }));
+    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }) }));
 }

package/dist/src/presentation/web/components/features/skills/skill-detail-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skill-detail-drawer.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CA+E3E"}
+{"version":3,"file":"skill-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skill-detail-drawer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CA+E3E"}

package/dist/src/presentation/web/components/features/skills/skill-detail-drawer.js

@@ -1,13 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, } from '../../ui/sheet.js';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Badge } from '../../ui/badge.js';
-import { ScrollArea } from '../../ui/scroll-area.js';
 import { Separator } from '../../ui/separator.js';
 import { FolderOpen } from 'lucide-react';
 export function SkillDetailDrawer({ skill, onClose }) {
-    return (_jsx(Sheet, { open: skill !== null, onOpenChange: (open) => {
-            if (!open)
-                onClose();
-        }, children: _jsx(SheetContent, { side: "right", className: "w-full sm:max-w-lg", children: skill ? (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: skill.displayName }), _jsx(SheetDescription, { children: skill.name })] }), _jsxs(ScrollArea, { className: "flex-1 px-4 pb-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: skill.description }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', children: skill.source === 'project' ? 'Project' : 'Global' }), _jsx(Badge, { variant: "outline", children: skill.category }), skill.context ? _jsx(Badge, { variant: "outline", children: skill.context }) : null] }), skill.allowedTools ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Allowed Tools" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: skill.allowedTools })] })] })) : null, skill.resources.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Resources" }), _jsx("ul", { className: "mt-2 space-y-1.5", children: skill.resources.map((resource) => (_jsxs("li", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [resource.name, "/ \u2014 ", resource.fileCount, ' ', resource.fileCount === 1 ? 'file' : 'files'] })] }, resource.name))) })] })] })) : null, skill.body ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsx("pre", { className: "text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap", children: skill.body })] })) : null] })] })) : null }) }));
+    return (_jsx(BaseDrawer, { open: skill !== null, onClose: onClose, size: "sm", modal: true, "data-testid": "skill-detail-drawer", header: skill ? (_jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: skill.displayName }), _jsx(DrawerDescription, { children: skill.name })] })) : undefined, children: skill ? (_jsxs("div", { className: "px-4 pb-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: skill.description }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', children: skill.source === 'project' ? 'Project' : 'Global' }), _jsx(Badge, { variant: "outline", children: skill.category }), skill.context ? _jsx(Badge, { variant: "outline", children: skill.context }) : null] }), skill.allowedTools ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Allowed Tools" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: skill.allowedTools })] })] })) : null, skill.resources.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Resources" }), _jsx("ul", { className: "mt-2 space-y-1.5", children: skill.resources.map((resource) => (_jsxs("li", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [resource.name, "/ \u2014 ", resource.fileCount, ' ', resource.fileCount === 1 ? 'file' : 'files'] })] }, resource.name))) })] })] })) : null, skill.body ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsx("pre", { className: "text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap", children: skill.body })] })) : null] })) : null }));
 }