@shepai/cli 1.37.2 → 1.38.0

package/web/.next/standalone/src/presentation/web/components/common/add-repository-node/pick-folder.ts

@@ -1,15 +1,15 @@
+import { pickFolder as pickFolderAction } from '@/app/actions/pick-folder';
+
 /**
- * Calls the backend API to open a native OS folder picker dialog.
+ * Opens a native OS folder picker dialog via server action.
  * Returns the selected absolute path, or null if the user cancelled.
  */
 export async function pickFolder(): Promise<string | null> {
-  const response = await fetch('/api/dialog/pick-folder', { method: 'POST' });
+  const result = await pickFolderAction();
 
-  if (!response.ok) {
-    const body = await response.json().catch(() => null);
-    throw new Error(body?.error ?? 'Failed to open folder dialog');
+  if (result.error) {
+    throw new Error(result.error);
   }
 
-  const body: { path: string | null; cancelled: boolean } = await response.json();
-  return body.path;
+  return result.path;
 }

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

@@ -129,7 +129,7 @@ export function FeatureCreateDrawer({
   }, []);
 
   return (
-    <Drawer direction="right" modal={false} open={open} onOpenChange={handleOpenChange}>
+    <Drawer direction="right" modal={false} handleOnly open={open} onOpenChange={handleOpenChange}>
       <DrawerContent direction="right" className="w-96" showCloseButton={false}>
         {/* Close button */}
         <button

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

@@ -1,17 +1,16 @@
 import type { FileAttachment } from '@shepai/core/infrastructure/services/file-dialog.service';
 
 /**
- * Calls the backend API to open a native OS file picker dialog.
+ * Opens a native OS file picker dialog via API route.
  * Returns the selected files with metadata, or null if the user cancelled.
  */
 export async function pickFiles(): Promise<FileAttachment[] | null> {
-  const response = await fetch('/api/dialog/pick-files', { method: 'POST' });
+  const res = await fetch('/api/dialog/pick-files', { method: 'POST' });
 
-  if (!response.ok) {
-    const body = await response.json().catch(() => null);
-    throw new Error(body?.error ?? 'Failed to open file dialog');
+  if (!res.ok) {
+    throw new Error('Failed to open file dialog');
   }
 
-  const body: { files: FileAttachment[] | null; cancelled: boolean } = await response.json();
-  return body.files;
+  const data: { files: FileAttachment[] | null; cancelled: boolean } = await res.json();
+  return data.cancelled ? null : data.files;
 }

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { XIcon, Code2, Terminal, Loader2, Trash2 } from 'lucide-react';
+import { XIcon, Loader2, Trash2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { ActionButton } from '@/components/common/action-button';
+import { OpenActionMenu } from '@/components/common/open-action-menu';
 import {
   Drawer,
   DrawerContent,
@@ -45,6 +45,7 @@ export function FeatureDrawer({
     <Drawer
       direction="right"
       modal={false}
+      handleOnly
       open={selectedNode !== null}
       onOpenChange={(open) => {
         if (!open) onClose();
@@ -74,6 +75,7 @@ export function FeatureDrawer({
               <DrawerActions
                 repositoryPath={selectedNode.repositoryPath}
                 branch={selectedNode.branch}
+                specPath={selectedNode.specPath}
               />
             ) : null}
 
@@ -211,26 +213,20 @@ function DetailRow({ label, value }: { label: string; value: string }) {
   );
 }
 
-function DrawerActions({ repositoryPath, branch }: { repositoryPath: string; branch: string }) {
-  const { openInIde, openInShell, ideLoading, shellLoading, ideError, shellError } =
-    useFeatureActions({ repositoryPath, branch });
+function DrawerActions({
+  repositoryPath,
+  branch,
+  specPath,
+}: {
+  repositoryPath: string;
+  branch: string;
+  specPath?: string;
+}) {
+  const actions = useFeatureActions({ repositoryPath, branch, specPath });
 
   return (
     <div className="flex gap-2 px-4 pb-3">
-      <ActionButton
-        label="Open in IDE"
-        onClick={openInIde}
-        loading={ideLoading}
-        error={!!ideError}
-        icon={Code2}
-      />
-      <ActionButton
-        label="Open in Shell"
-        onClick={openInShell}
-        loading={shellLoading}
-        error={!!shellError}
-        icon={Terminal}
-      />
+      <OpenActionMenu actions={actions} repositoryPath={repositoryPath} showSpecs={!!specPath} />
     </div>
   );
 }

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer/use-feature-actions.ts

@@ -1,19 +1,26 @@
 'use client';
 
 import { useState, useCallback, useRef, useEffect } from 'react';
+import { openIde } from '@/app/actions/open-ide';
+import { openShell } from '@/app/actions/open-shell';
+import { openFolder } from '@/app/actions/open-folder';
 
 export interface FeatureActionsInput {
   repositoryPath: string;
   branch: string;
+  specPath?: string;
 }
 
 export interface FeatureActionsState {
   openInIde: () => Promise<void>;
   openInShell: () => Promise<void>;
+  openSpecsFolder: () => Promise<void>;
   ideLoading: boolean;
   shellLoading: boolean;
+  specsLoading: boolean;
   ideError: string | null;
   shellError: string | null;
+  specsError: string | null;
 }
 
 const ERROR_CLEAR_DELAY = 5000;
@@ -21,25 +28,33 @@ const ERROR_CLEAR_DELAY = 5000;
 export function useFeatureActions(input: FeatureActionsInput | null): FeatureActionsState {
   const [ideLoading, setIdeLoading] = useState(false);
   const [shellLoading, setShellLoading] = useState(false);
+  const [specsLoading, setSpecsLoading] = useState(false);
   const [ideError, setIdeError] = useState<string | null>(null);
   const [shellError, setShellError] = useState<string | null>(null);
+  const [specsError, setSpecsError] = useState<string | null>(null);
 
   const ideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const shellTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const specsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Clear timers on unmount
   useEffect(() => {
     const ideTimer = ideTimerRef.current;
     const shellTimer = shellTimerRef.current;
+    const specsTimer = specsTimerRef.current;
     return () => {
       if (ideTimer) clearTimeout(ideTimer);
       if (shellTimer) clearTimeout(shellTimer);
+      if (specsTimer) clearTimeout(specsTimer);
     };
   }, []);
 
   const performAction = useCallback(
     async (
-      url: string,
+      action: (input: { repositoryPath: string; branch?: string }) => Promise<{
+        success: boolean;
+        error?: string;
+      }>,
       setLoading: (v: boolean) => void,
       setError: (v: string | null) => void,
       timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>,
@@ -54,18 +69,13 @@ export function useFeatureActions(input: FeatureActionsInput | null): FeatureAct
       setError(null);
 
       try {
-        const response = await fetch(url, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            repositoryPath: input.repositoryPath,
-            branch: input.branch,
-          }),
+        const result = await action({
+          repositoryPath: input.repositoryPath,
+          branch: input.branch,
         });
 
-        if (!response.ok) {
-          const data = await response.json();
-          const errorMessage = data.error ?? 'An unexpected error occurred';
+        if (!result.success) {
+          const errorMessage = result.error ?? 'An unexpected error occurred';
           setError(errorMessage);
           timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
         }
@@ -80,16 +90,50 @@ export function useFeatureActions(input: FeatureActionsInput | null): FeatureAct
     [input]
   );
 
-  const openInIde = useCallback(
-    () => performAction('/api/ide/open', setIdeLoading, setIdeError, ideTimerRef, ideLoading),
+  const handleOpenIde = useCallback(
+    () => performAction(openIde, setIdeLoading, setIdeError, ideTimerRef, ideLoading),
     [performAction, ideLoading]
   );
 
-  const openInShell = useCallback(
-    () =>
-      performAction('/api/shell/open', setShellLoading, setShellError, shellTimerRef, shellLoading),
+  const handleOpenShell = useCallback(
+    () => performAction(openShell, setShellLoading, setShellError, shellTimerRef, shellLoading),
     [performAction, shellLoading]
   );
 
-  return { openInIde, openInShell, ideLoading, shellLoading, ideError, shellError };
+  const handleOpenSpecsFolder = useCallback(async () => {
+    if (!input?.specPath || specsLoading) return;
+
+    if (specsTimerRef.current) clearTimeout(specsTimerRef.current);
+
+    setSpecsLoading(true);
+    setSpecsError(null);
+
+    try {
+      const result = await openFolder(input.specPath);
+
+      if (!result.success) {
+        const errorMessage = result.error ?? 'An unexpected error occurred';
+        setSpecsError(errorMessage);
+        specsTimerRef.current = setTimeout(() => setSpecsError(null), ERROR_CLEAR_DELAY);
+      }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
+      setSpecsError(errorMessage);
+      specsTimerRef.current = setTimeout(() => setSpecsError(null), ERROR_CLEAR_DELAY);
+    } finally {
+      setSpecsLoading(false);
+    }
+  }, [input, specsLoading]);
+
+  return {
+    openInIde: handleOpenIde,
+    openInShell: handleOpenShell,
+    openSpecsFolder: handleOpenSpecsFolder,
+    ideLoading,
+    shellLoading,
+    specsLoading,
+    ideError,
+    shellError,
+    specsError,
+  };
 }

package/web/.next/standalone/src/presentation/web/components/common/feature-node/agent-type-icons.tsx

@@ -1,4 +1,5 @@
 import type { ComponentType, SVGProps } from 'react';
+import Image from 'next/image';
 import { cn } from '@/lib/utils';
 
 /** Agent type values mirroring the TypeSpec AgentType enum. */
@@ -9,8 +10,15 @@ type IconProps = SVGProps<SVGSVGElement> & { className?: string };
 /** Create a stable image-based icon component for a brand. */
 function createBrandIcon(src: string, alt: string): ComponentType<IconProps> {
   function BrandIcon({ className }: IconProps) {
-    // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt} className={cn('rounded-sm object-contain', className)} />;
+    return (
+      <Image
+        src={src}
+        alt={alt}
+        width={24}
+        height={24}
+        className={cn('rounded-sm object-contain', className)}
+      />
+    );
   }
   BrandIcon.displayName = `BrandIcon(${alt})`;
   return BrandIcon;

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node-state-config.ts

@@ -50,6 +50,8 @@ export interface FeatureNodeData {
   repositoryPath: string;
   /** Git branch name for this feature */
   branch: string;
+  /** Absolute path to the specs folder on disk */
+  specPath?: string;
   /** Human-readable runtime for done state (e.g. "2h 15m") */
   runtime?: string;
   /** Feature name this node is blocked by */

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

@@ -96,6 +96,16 @@ const allStatesData: FeatureNodeData[] = [
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/api-rate-limiting',
   },
+  {
+    name: 'Data Pipeline',
+    description: 'ETL pipeline for analytics dashboard',
+    featureId: '#bi2',
+    lifecycle: 'implementation' as FeatureLifecyclePhase,
+    state: 'action-required',
+    progress: 40,
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/data-pipeline',
+  },
   {
     name: 'Payment Gateway',
     description: 'Stripe integration for subscriptions',

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { Handle, Position } from '@xyflow/react';
-import { Settings, Plus } from 'lucide-react';
+import { Settings, Plus, FileText, Wrench, type LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import {
   featureNodeStateConfig,
@@ -16,6 +16,27 @@ function AgentIcon({ agentType, className }: { agentType?: string; className?: s
   return <IconComponent className={className} />;
 }
 
+function getBadgeIcon(data: FeatureNodeData): LucideIcon {
+  const config = featureNodeStateConfig[data.state];
+  if (data.state === 'action-required') {
+    if (data.lifecycle === 'requirements') return FileText;
+    if (data.lifecycle === 'implementation') return Wrench;
+  }
+  return config.icon;
+}
+
+/** Returns override badge classes for action-required based on lifecycle phase. */
+function getActionRequiredBadgeClasses(data: FeatureNodeData): {
+  badgeClass: string;
+  badgeBgClass: string;
+} | null {
+  if (data.state !== 'action-required') return null;
+  if (data.lifecycle === 'implementation') {
+    return { badgeClass: 'text-indigo-700', badgeBgClass: 'bg-indigo-50' };
+  }
+  return null; // requirements stays amber (default)
+}
+
 function getBadgeText(data: FeatureNodeData): string {
   const config = featureNodeStateConfig[data.state];
   switch (data.state) {
@@ -27,6 +48,10 @@ function getBadgeText(data: FeatureNodeData): string {
       return data.runtime ? `Completed in ${data.runtime}` : 'Completed';
     case 'blocked':
       return data.blockedBy ? `Waiting on ${data.blockedBy}` : 'Blocked';
+    case 'action-required':
+      if (data.lifecycle === 'requirements') return 'Review Product Requirements';
+      if (data.lifecycle === 'implementation') return 'Review Technical Planning';
+      return config.label;
     case 'error':
       return data.errorMessage ?? 'Something went wrong';
     default:
@@ -163,13 +188,19 @@ export function FeatureNode({
               {/* State badge */}
               <div
                 data-testid="feature-node-badge"
-                className={cn(
-                  'mt-1.5 flex items-center justify-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium',
-                  config.badgeBgClass,
-                  config.badgeClass
-                )}
+                className={(() => {
+                  const override = getActionRequiredBadgeClasses(data);
+                  return cn(
+                    'mt-1.5 flex items-center justify-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium',
+                    override?.badgeBgClass ?? config.badgeBgClass,
+                    override?.badgeClass ?? config.badgeClass
+                  );
+                })()}
               >
-                <Icon className="h-3.5 w-3.5 shrink-0" />
+                {(() => {
+                  const BadgeIcon = getBadgeIcon(data);
+                  return <BadgeIcon className="h-3.5 w-3.5 shrink-0" />;
+                })()}
                 <span className="truncate">{getBadgeText(data)}</span>
               </div>
             </>

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

@@ -29,13 +29,31 @@ export {
 export { FeatureStatusBadges, type FeatureStatusBadgesProps } from './feature-status-badges';
 export { FeatureStatusGroup, type FeatureStatusGroupProps } from './feature-status-group';
 export { LoadingSkeleton } from './loading-skeleton';
+export { NotificationPermissionBanner } from './notification-permission-banner';
 export {
   RepositoryNode,
   type RepositoryNodeData,
   type RepositoryNodeType,
 } from './repository-node';
 export { PageHeader } from './page-header';
+export {
+  PrdQuestionnaire,
+  PrdQuestionnaireDrawer,
+  type PrdQuestionnaireProps,
+  type PrdQuestionnaireDrawerProps,
+  type PrdQuestion,
+  type PrdFinalAction,
+  type PrdOption,
+  type PrdQuestionnaireData,
+} from './prd-questionnaire';
 export { ShepLogo, type ShepLogoProps } from './shep-logo';
+export {
+  TechDecisionsReview,
+  TechDecisionsDrawer,
+  type TechDecisionsReviewProps,
+  type TechDecisionsDrawerProps,
+  type TechDecisionsReviewData,
+} from './tech-decisions-review';
 export { SidebarCollapseToggle, type SidebarCollapseToggleProps } from './sidebar-collapse-toggle';
 export { SidebarNavItem, type SidebarNavItemProps } from './sidebar-nav-item';
 export { SidebarSectionHeader, type SidebarSectionHeaderProps } from './sidebar-section-header';

package/web/.next/standalone/src/presentation/web/components/common/notification-permission-banner/index.ts

@@ -0,0 +1 @@
+export { NotificationPermissionBanner } from './notification-permission-banner';

package/web/.next/standalone/src/presentation/web/components/common/notification-permission-banner/notification-permission-banner.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Bell, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+function noop() {
+  // story placeholder
+}
+
+const meta: Meta = {
+  title: 'Composed/NotificationPermissionBanner',
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Static render of the banner since the real component depends on the
+ * browser Notification API which is unavailable in Storybook.
+ */
+function BannerPreview() {
+  return (
+    <div className="bg-muted/30 relative h-64 w-full rounded-lg border">
+      <div className="bg-background absolute bottom-4 left-4 z-50 flex max-w-sm items-center gap-3 rounded-lg border p-3 shadow-lg">
+        <Bell className="text-muted-foreground size-5 shrink-0" />
+        <p className="text-muted-foreground text-sm">
+          Enable desktop notifications to stay updated on feature progress.
+        </p>
+        <div className="flex shrink-0 items-center gap-1">
+          <Button size="sm" onClick={noop}>
+            Enable
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            onClick={noop}
+            aria-label="Dismiss notification banner"
+          >
+            <X />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <BannerPreview />,
+};

package/web/.next/standalone/src/presentation/web/components/common/notification-permission-banner/notification-permission-banner.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { Bell, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const DISMISSED_KEY = 'shep:notification-banner-dismissed';
+
+export function NotificationPermissionBanner() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (typeof globalThis.Notification === 'undefined') return;
+    if (globalThis.Notification.permission !== 'default') return;
+    if (localStorage.getItem(DISMISSED_KEY) === 'true') return;
+    setVisible(true);
+  }, []);
+
+  const handleEnable = useCallback(async () => {
+    if (typeof globalThis.Notification === 'undefined') return;
+    const result = await globalThis.Notification.requestPermission();
+    if (result === 'granted' || result === 'denied') {
+      setVisible(false);
+    }
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    localStorage.setItem(DISMISSED_KEY, 'true');
+    setVisible(false);
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <div className="bg-background absolute bottom-4 left-4 z-50 flex max-w-sm items-center gap-3 rounded-lg border p-3 shadow-lg">
+      <Bell className="text-muted-foreground size-5 shrink-0" />
+      <p className="text-muted-foreground text-sm">
+        Enable desktop notifications to stay updated on feature progress.
+      </p>
+      <div className="flex shrink-0 items-center gap-1">
+        <Button size="sm" onClick={handleEnable}>
+          Enable
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          onClick={handleDismiss}
+          aria-label="Dismiss notification banner"
+        >
+          <X />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/open-action-menu/config.ts

@@ -0,0 +1,10 @@
+import type { FeatureActionsState } from '@/components/common/feature-drawer/use-feature-actions';
+
+export interface OpenActionMenuProps {
+  /** Actions returned by useFeatureActions hook */
+  actions: FeatureActionsState;
+  /** Absolute path to copy (repository path or spec path) */
+  repositoryPath: string;
+  /** Whether to show the "Open Specs" item */
+  showSpecs?: boolean;
+}

package/web/.next/standalone/src/presentation/web/components/common/open-action-menu/index.ts

@@ -0,0 +1,2 @@
+export { OpenActionMenu } from './open-action-menu';
+export type { OpenActionMenuProps } from './config';

package/web/.next/standalone/src/presentation/web/components/common/open-action-menu/open-action-menu.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { OpenActionMenu } from './open-action-menu';
+import type { FeatureActionsState } from '@/components/common/feature-drawer/use-feature-actions';
+
+const defaultActions: FeatureActionsState = {
+  openInIde: fn().mockName('openInIde'),
+  openInShell: fn().mockName('openInShell'),
+  openSpecsFolder: fn().mockName('openSpecsFolder'),
+  ideLoading: false,
+  shellLoading: false,
+  specsLoading: false,
+  ideError: null,
+  shellError: null,
+  specsError: null,
+};
+
+const meta: Meta<typeof OpenActionMenu> = {
+  title: 'Composed/OpenActionMenu',
+  component: OpenActionMenu,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OpenActionMenu>;
+
+/** Default menu with all actions including specs folder. */
+export const Default: Story = {
+  args: {
+    actions: defaultActions,
+    repositoryPath: '/Users/dev/my-project',
+    showSpecs: true,
+  },
+};
+
+/** Menu without specs folder action. */
+export const WithoutSpecs: Story = {
+  args: {
+    actions: defaultActions,
+    repositoryPath: '/Users/dev/my-project',
+    showSpecs: false,
+  },
+};
+
+/** Menu while IDE action is loading. */
+export const Loading: Story = {
+  args: {
+    actions: { ...defaultActions, ideLoading: true },
+    repositoryPath: '/Users/dev/my-project',
+    showSpecs: true,
+  },
+};
+
+/** Menu with an error on the IDE action. */
+export const WithError: Story = {
+  args: {
+    actions: { ...defaultActions, ideError: 'Editor not found' },
+    repositoryPath: '/Users/dev/my-project',
+    showSpecs: true,
+  },
+};