@shepai/cli 1.62.0 → 1.63.0

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

@@ -1,17 +1,13 @@
 'use client';
 
-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 '@shepai/core/domain/generated/output';
 import { cn } from '@/lib/utils';
 import { useSoundAction } from '@/hooks/use-sound-action';
 import { OpenActionMenu } from '@/components/common/open-action-menu';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerDescription,
-} from '@/components/ui/drawer';
+import { BaseDrawer } from '@/components/common/base-drawer';
+import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
@@ -48,143 +44,133 @@ export function FeatureDrawer({
   const drawerOpenSound = useSoundAction('drawer-open');
   const drawerCloseSound = useSoundAction('drawer-close');
 
+  const isOpen = selectedNode !== null;
+  useEffect(() => {
+    if (isOpen) drawerOpenSound.play();
+  }, [isOpen, drawerOpenSound]);
+
+  const handleClose = useCallback(() => {
+    drawerCloseSound.play();
+    onClose();
+  }, [onClose, drawerCloseSound]);
+
   return (
-    <Drawer
-      direction="right"
-      modal={false}
-      handleOnly
+    <BaseDrawer
       open={selectedNode !== null}
-      onOpenChange={(open) => {
-        if (open) {
-          drawerOpenSound.play();
-        } else {
-          drawerCloseSound.play();
-          onClose();
-        }
-      }}
+      onClose={handleClose}
+      size="sm"
+      modal={false}
+      data-testid="feature-drawer"
+      header={
+        selectedNode ? (
+          <div data-testid="feature-drawer-header">
+            <DrawerTitle>{selectedNode.name}</DrawerTitle>
+            <DrawerDescription>{selectedNode.featureId}</DrawerDescription>
+          </div>
+        ) : undefined
+      }
     >
-      <DrawerContent direction="right" className="w-96" showCloseButton={false}>
-        {selectedNode ? (
-          <>
-            {/* Close button */}
-            <button
-              type="button"
-              aria-label="Close"
-              onClick={() => {
-                drawerCloseSound.play();
-                onClose();
-              }}
-              className="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
-            >
-              <XIcon className="size-4" />
-            </button>
+      {selectedNode ? (
+        <>
+          {/* Action buttons */}
+          {selectedNode.repositoryPath && selectedNode.branch ? (
+            <DrawerActions
+              repositoryPath={selectedNode.repositoryPath}
+              branch={selectedNode.branch}
+              specPath={selectedNode.specPath}
+            />
+          ) : null}
 
-            {/* Header */}
-            <DrawerHeader data-testid="feature-drawer-header">
-              <DrawerTitle>{selectedNode.name}</DrawerTitle>
-              <DrawerDescription>{selectedNode.featureId}</DrawerDescription>
-            </DrawerHeader>
+          <Separator />
 
-            {/* Action buttons */}
-            {selectedNode.repositoryPath && selectedNode.branch ? (
-              <DrawerActions
-                repositoryPath={selectedNode.repositoryPath}
-                branch={selectedNode.branch}
-                specPath={selectedNode.specPath}
-              />
-            ) : null}
-
-            <Separator />
-
-            {/* Status */}
-            <div data-testid="feature-drawer-status" className="flex flex-col gap-3 p-4">
-              <div className="text-muted-foreground text-xs font-semibold tracking-wider">
-                {lifecycleDisplayLabels[selectedNode.lifecycle]}
-              </div>
+          {/* Status */}
+          <div data-testid="feature-drawer-status" className="flex flex-col gap-3 p-4">
+            <div className="text-muted-foreground text-xs font-semibold tracking-wider">
+              {lifecycleDisplayLabels[selectedNode.lifecycle]}
+            </div>
 
-              <StateBadge data={selectedNode} />
+            <StateBadge data={selectedNode} />
 
-              {selectedNode.progress > 0 ? (
-                <div data-testid="feature-drawer-progress" className="flex flex-col gap-1">
-                  <div className="text-muted-foreground flex items-center justify-between text-xs">
-                    <span>Progress</span>
-                    <span>{selectedNode.progress}%</span>
-                  </div>
-                  <div className="bg-muted h-2 w-full overflow-hidden rounded-full">
-                    <div
-                      className={cn(
-                        'h-full rounded-full transition-all',
-                        featureNodeStateConfig[selectedNode.state].progressClass
-                      )}
-                      style={{ width: `${selectedNode.progress}%` }}
-                    />
-                  </div>
+            {selectedNode.progress > 0 ? (
+              <div data-testid="feature-drawer-progress" className="flex flex-col gap-1">
+                <div className="text-muted-foreground flex items-center justify-between text-xs">
+                  <span>Progress</span>
+                  <span>{selectedNode.progress}%</span>
                 </div>
-              ) : null}
-            </div>
-
-            {/* PR info */}
-            {selectedNode.pr ? (
-              <>
-                <Separator />
-                <PrInfoSection pr={selectedNode.pr} />
-              </>
+                <div className="bg-muted h-2 w-full overflow-hidden rounded-full">
+                  <div
+                    className={cn(
+                      'h-full rounded-full transition-all',
+                      featureNodeStateConfig[selectedNode.state].progressClass
+                    )}
+                    style={{ width: `${selectedNode.progress}%` }}
+                  />
+                </div>
+              </div>
             ) : null}
+          </div>
 
-            <Separator />
+          {/* PR info */}
+          {selectedNode.pr ? (
+            <>
+              <Separator />
+              <PrInfoSection pr={selectedNode.pr} />
+            </>
+          ) : null}
 
-            {/* Details */}
-            <DetailsSection data={selectedNode} />
+          <Separator />
 
-            {/* Delete action */}
-            {onDelete ? (
-              <>
-                <Separator />
-                <div data-testid="feature-drawer-delete" className="p-4">
-                  <AlertDialog>
-                    <AlertDialogTrigger asChild>
-                      <Button variant="destructive" className="w-full" disabled={isDeleting}>
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        Delete feature
-                      </Button>
-                    </AlertDialogTrigger>
-                    <AlertDialogContent>
-                      <AlertDialogHeader>
-                        <AlertDialogTitle>Delete feature?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                          This will permanently delete <strong>{selectedNode.name}</strong> (
-                          {selectedNode.featureId}). This action cannot be undone.
-                          {selectedNode.state === 'running' ? (
-                            <> This feature has a running agent that will be stopped.</>
-                          ) : null}
-                        </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                        <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-                        <AlertDialogAction
-                          variant="destructive"
-                          disabled={isDeleting}
-                          onClick={() => onDelete(selectedNode.featureId)}
-                        >
-                          {isDeleting ? (
-                            <>
-                              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                              Deleting…
-                            </>
-                          ) : (
-                            'Delete'
-                          )}
-                        </AlertDialogAction>
-                      </AlertDialogFooter>
-                    </AlertDialogContent>
-                  </AlertDialog>
-                </div>
-              </>
-            ) : null}
-          </>
-        ) : null}
-      </DrawerContent>
-    </Drawer>
+          {/* Details */}
+          <DetailsSection data={selectedNode} />
+
+          {/* Delete action */}
+          {onDelete ? (
+            <>
+              <Separator />
+              <div data-testid="feature-drawer-delete" className="p-4">
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="destructive" className="w-full" disabled={isDeleting}>
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Delete feature
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Delete feature?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will permanently delete <strong>{selectedNode.name}</strong> (
+                        {selectedNode.featureId}). This action cannot be undone.
+                        {selectedNode.state === 'running' ? (
+                          <> This feature has a running agent that will be stopped.</>
+                        ) : null}
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        disabled={isDeleting}
+                        onClick={() => onDelete(selectedNode.featureId)}
+                      >
+                        {isDeleting ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Deleting…
+                          </>
+                        ) : (
+                          'Delete'
+                        )}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </>
+          ) : null}
+        </>
+      ) : null}
+    </BaseDrawer>
   );
 }
 

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>
   );
 }