@shepai/cli 1.61.0 → 1.63.0

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

@@ -1,2 +1,3 @@
 export { RepositoryNode } from './repository-node';
+export { RepositoryDrawer, type RepositoryDrawerProps } from './repository-drawer';
 export type { RepositoryNodeData, RepositoryNodeType } from './repository-node-config';

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

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@/components/ui/button';
+import { RepositoryDrawer } from './repository-drawer';
+import type { RepositoryNodeData } from './repository-node-config';
+
+const meta: Meta<typeof RepositoryDrawer> = {
+  title: 'Composed/RepositoryDrawer',
+  component: RepositoryDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RepositoryDrawer>;
+
+const repoData: RepositoryNodeData = {
+  id: 'repo-1',
+  name: 'shep-ai/cli',
+  repositoryPath: '/home/user/shep-ai/cli',
+};
+
+function DrawerTrigger({ data, label }: { data: RepositoryNodeData; label: string }) {
+  const [selected, setSelected] = useState<RepositoryNodeData | null>(null);
+
+  return (
+    <div className="flex h-screen items-start p-4">
+      <Button variant="outline" onClick={() => setSelected(data)}>
+        {label}
+      </Button>
+      <RepositoryDrawer data={selected} onClose={() => setSelected(null)} />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <DrawerTrigger data={repoData} label="Open Repository" />,
+};
+
+export const LongPath: Story = {
+  render: () => (
+    <DrawerTrigger
+      data={{
+        ...repoData,
+        repositoryPath: '/home/user/projects/company/some-very-long-path/shep-ai/cli',
+      }}
+      label="Open Long Path"
+    />
+  ),
+};
+
+export const WithoutPath: Story = {
+  render: () => (
+    <DrawerTrigger data={{ ...repoData, repositoryPath: undefined }} label="Open Without Path" />
+  ),
+};

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

@@ -0,0 +1,82 @@
+'use client';
+
+import { Code2, Terminal, FolderOpen } from 'lucide-react';
+import { BaseDrawer } from '@/components/common/base-drawer';
+import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
+import { Separator } from '@/components/ui/separator';
+import { ActionButton } from '@/components/common/action-button';
+import type { RepositoryNodeData } from './repository-node-config';
+import { useRepositoryActions } from './use-repository-actions';
+
+export interface RepositoryDrawerProps {
+  data: RepositoryNodeData | null;
+  onClose: () => void;
+}
+
+export function RepositoryDrawer({ data, onClose }: RepositoryDrawerProps) {
+  const actions = useRepositoryActions(
+    data?.repositoryPath ? { repositoryPath: data.repositoryPath } : null
+  );
+
+  return (
+    <BaseDrawer
+      open={data !== null}
+      onClose={onClose}
+      size="sm"
+      modal={false}
+      data-testid="repository-drawer"
+      header={
+        data ? (
+          <div data-testid="repository-drawer-header">
+            <DrawerTitle>{data.name}</DrawerTitle>
+            {data.repositoryPath ? (
+              <DrawerDescription className="truncate font-mono text-xs">
+                {data.repositoryPath}
+              </DrawerDescription>
+            ) : null}
+          </div>
+        ) : undefined
+      }
+    >
+      {data?.repositoryPath ? (
+        <>
+          <Separator />
+          <div className="flex flex-col gap-3 p-4">
+            <div className="text-muted-foreground text-xs font-semibold tracking-wider">
+              OPEN WITH
+            </div>
+            <div className="flex flex-col gap-2">
+              <ActionButton
+                label="Open in IDE"
+                onClick={actions.openInIde}
+                loading={actions.ideLoading}
+                error={!!actions.ideError}
+                icon={Code2}
+                variant="outline"
+                size="sm"
+              />
+              <ActionButton
+                label="Open in Shell"
+                onClick={actions.openInShell}
+                loading={actions.shellLoading}
+                error={!!actions.shellError}
+                icon={Terminal}
+                variant="outline"
+                size="sm"
+              />
+              <ActionButton
+                label="Open Folder"
+                onClick={actions.openFolder}
+                loading={actions.folderLoading}
+                error={!!actions.folderError}
+                icon={FolderOpen}
+                variant="outline"
+                size="sm"
+              />
+            </div>
+          </div>
+        </>
+      ) : null}
+    </BaseDrawer>
+  );
+}

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

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

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -20,6 +20,8 @@ import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeData } from '@/components/common/feature-node';
 import { FeatureDrawer, FeatureCreateDrawer } from '@/components/common';
+import { RepositoryDrawer } from '@/components/common/repository-node';
+import type { RepositoryNodeData } from '@/components/common/repository-node';
 import { PrdQuestionnaireDrawer } from '@/components/common/prd-questionnaire';
 import type { PrdQuestionnaireData } from '@/components/common/prd-questionnaire';
 import { TechDecisionsDrawer } from '@/components/common/tech-decisions-review';
@@ -98,6 +100,28 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
   const [mergeReviewData, setMergeReviewData] = useState<MergeReviewData | null>(null);
   const [isLoadingMergeReview, setIsLoadingMergeReview] = useState(false);
 
+  // Repository drawer state
+  const [selectedRepoNode, setSelectedRepoNode] = useState<RepositoryNodeData | null>(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: string) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (node?.type === 'repositoryNode') {
+        clearSelection();
+        setSelectedRepoNode(node.data as RepositoryNodeData);
+      }
+    },
+    [nodes, clearSelection]
+  );
+
   const showPrdDrawer =
     selectedNode?.lifecycle === 'requirements' && selectedNode?.state === 'action-required';
 
@@ -105,7 +129,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     selectedNode?.lifecycle === 'implementation' && selectedNode?.state === 'action-required';
 
   const showMergeReviewDrawer =
-    selectedNode?.lifecycle === 'review' && selectedNode?.state === 'action-required';
+    selectedNode?.lifecycle === 'review' &&
+    (selectedNode?.state === 'action-required' || selectedNode?.state === 'error');
 
   const handlePrdSelect = useCallback((questionId: string, optionId: string) => {
     setPrdSelections((prev) => ({ ...prev, [questionId]: optionId }));
@@ -378,10 +403,12 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
         onAddFeature={handleAddFeature}
         onNodeAction={handleAddFeatureToFeature}
         onNodeClick={handleNodeClick}
-        onPaneClick={clearSelection}
+        onPaneClick={handleClearDrawers}
         onRepositoryAdd={handleAddFeatureToRepo}
+        onRepositoryClick={handleRepositoryClick}
         onRepositoryDelete={handleDeleteRepository}
         onRepositorySelect={handleAddRepository}
+        onCanvasDrag={handleClearDrawers}
         emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
       />
       <FeatureDrawer
@@ -458,6 +485,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
         features={featureOptions}
         initialParentId={pendingParentFeatureId}
       />
+      <RepositoryDrawer data={selectedRepoNode} onClose={() => setSelectedRepoNode(null)} />
     </>
   );
 }

package/web/.next/standalone/src/presentation/web/components/features/features-canvas/features-canvas.tsx

@@ -26,9 +26,11 @@ 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;
 }
@@ -44,8 +46,10 @@ export function FeaturesCanvas({
   onNodeClick,
   onPaneClick,
   onRepositoryAdd,
+  onRepositoryClick,
   onRepositoryDelete,
   onRepositorySelect,
+  onCanvasDrag,
   toolbar,
   emptyState,
 }: FeaturesCanvasProps) {
@@ -96,6 +100,7 @@ export function FeaturesCanvas({
             : {}),
           ...(node.type === 'repositoryNode' && {
             onAdd: onRepositoryAdd ? () => onRepositoryAdd(node.id) : undefined,
+            onClick: onRepositoryClick ? () => onRepositoryClick(node.id) : undefined,
             onDelete: onRepositoryDelete,
           }),
           ...(node.type === 'addRepositoryNode' && {
@@ -109,6 +114,7 @@ export function FeaturesCanvas({
       onNodeAction,
       onNodeSettings,
       onRepositoryAdd,
+      onRepositoryClick,
       onRepositoryDelete,
       onRepositorySelect,
     ]
@@ -151,6 +157,7 @@ export function FeaturesCanvas({
           onNodesChange={onNodesChange}
           onNodeClick={onNodeClick}
           onPaneClick={onPaneClick}
+          onMoveStart={onCanvasDrag}
           defaultViewport={{ x: 30, y: 30, zoom: 0.85 }}
           nodesDraggable={false}
           nodesConnectable={false}

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-detail-drawer.tsx

@@ -1,14 +1,8 @@
 'use client';
 
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from '@/components/ui/sheet';
+import { BaseDrawer } from '@/components/common/base-drawer';
+import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
 import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { FolderOpen } from 'lucide-react';
 import type { SkillData } from '@/lib/skills';
@@ -20,81 +14,81 @@ export interface SkillDetailDrawerProps {
 
 export function SkillDetailDrawer({ skill, onClose }: SkillDetailDrawerProps) {
   return (
-    <Sheet
+    <BaseDrawer
       open={skill !== null}
-      onOpenChange={(open) => {
-        if (!open) onClose();
-      }}
-    >
-      <SheetContent side="right" className="w-full sm:max-w-lg">
-        {skill ? (
+      onClose={onClose}
+      size="sm"
+      modal
+      data-testid="skill-detail-drawer"
+      header={
+        skill ? (
           <>
-            <SheetHeader>
-              <SheetTitle>{skill.displayName}</SheetTitle>
-              <SheetDescription>{skill.name}</SheetDescription>
-            </SheetHeader>
+            <DrawerTitle>{skill.displayName}</DrawerTitle>
+            <DrawerDescription>{skill.name}</DrawerDescription>
+          </>
+        ) : undefined
+      }
+    >
+      {skill ? (
+        <div className="px-4 pb-4">
+          {/* Description */}
+          <p className="text-muted-foreground text-sm">{skill.description}</p>
 
-            <ScrollArea className="flex-1 px-4 pb-4">
-              {/* Description */}
-              <p className="text-muted-foreground text-sm">{skill.description}</p>
+          {/* Badges */}
+          <div className="mt-4 flex flex-wrap items-center gap-1.5">
+            <Badge variant={skill.source === 'project' ? 'secondary' : 'outline'}>
+              {skill.source === 'project' ? 'Project' : 'Global'}
+            </Badge>
+            <Badge variant="outline">{skill.category}</Badge>
+            {skill.context ? <Badge variant="outline">{skill.context}</Badge> : null}
+          </div>
 
-              {/* Badges */}
-              <div className="mt-4 flex flex-wrap items-center gap-1.5">
-                <Badge variant={skill.source === 'project' ? 'secondary' : 'outline'}>
-                  {skill.source === 'project' ? 'Project' : 'Global'}
-                </Badge>
-                <Badge variant="outline">{skill.category}</Badge>
-                {skill.context ? <Badge variant="outline">{skill.context}</Badge> : null}
+          {/* Allowed Tools */}
+          {skill.allowedTools ? (
+            <>
+              <Separator className="my-4" />
+              <div>
+                <h3 className="text-sm font-semibold">Allowed Tools</h3>
+                <p className="text-muted-foreground mt-1 text-sm">{skill.allowedTools}</p>
               </div>
+            </>
+          ) : null}
 
-              {/* Allowed Tools */}
-              {skill.allowedTools ? (
-                <>
-                  <Separator className="my-4" />
-                  <div>
-                    <h3 className="text-sm font-semibold">Allowed Tools</h3>
-                    <p className="text-muted-foreground mt-1 text-sm">{skill.allowedTools}</p>
-                  </div>
-                </>
-              ) : null}
-
-              {/* Resources */}
-              {skill.resources.length > 0 ? (
-                <>
-                  <Separator className="my-4" />
-                  <div>
-                    <h3 className="text-sm font-semibold">Resources</h3>
-                    <ul className="mt-2 space-y-1.5">
-                      {skill.resources.map((resource) => (
-                        <li
-                          key={resource.name}
-                          className="text-muted-foreground flex items-center gap-2 text-sm"
-                        >
-                          <FolderOpen className="size-3.5 shrink-0" />
-                          <span>
-                            {resource.name}/ — {resource.fileCount}{' '}
-                            {resource.fileCount === 1 ? 'file' : 'files'}
-                          </span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </>
-              ) : null}
+          {/* Resources */}
+          {skill.resources.length > 0 ? (
+            <>
+              <Separator className="my-4" />
+              <div>
+                <h3 className="text-sm font-semibold">Resources</h3>
+                <ul className="mt-2 space-y-1.5">
+                  {skill.resources.map((resource) => (
+                    <li
+                      key={resource.name}
+                      className="text-muted-foreground flex items-center gap-2 text-sm"
+                    >
+                      <FolderOpen className="size-3.5 shrink-0" />
+                      <span>
+                        {resource.name}/ — {resource.fileCount}{' '}
+                        {resource.fileCount === 1 ? 'file' : 'files'}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </>
+          ) : null}
 
-              {/* Body */}
-              {skill.body ? (
-                <>
-                  <Separator className="my-4" />
-                  <pre className="text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap">
-                    {skill.body}
-                  </pre>
-                </>
-              ) : null}
-            </ScrollArea>
-          </>
-        ) : null}
-      </SheetContent>
-    </Sheet>
+          {/* Body */}
+          {skill.body ? (
+            <>
+              <Separator className="my-4" />
+              <pre className="text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap">
+                {skill.body}
+              </pre>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+    </BaseDrawer>
   );
 }