@shepai/cli 1.53.2 → 1.54.0

package/web/.next/standalone/src/presentation/web/app/api/agent-events/route.ts

@@ -2,80 +2,284 @@
  * SSE API Route: GET /api/agent-events
  *
  * Streams agent lifecycle notification events to connected web UI clients
- * via Server-Sent Events (SSE). This is the first API route in the web UI.
+ * via Server-Sent Events (SSE).
  *
- * - Subscribes to the notification event bus (lazy-initialized singleton)
- * - Formats events as SSE data frames (event: notification\ndata: JSON\n\n)
+ * Uses DB polling with a per-connection cache so only deltas are sent.
+ * This avoids cross-module singleton issues with an in-process event bus.
+ *
+ * - Polls features + agent runs every 500ms
+ * - Compares against cached state and emits only changes
  * - Sends heartbeat comments every 30 seconds to keep connection alive
  * - Supports optional ?runId query parameter to filter events
- * - Cleans up listeners and intervals on client disconnect
+ * - Cleans up intervals on client disconnect
  */
 
-import { getNotificationBus } from '@shepai/core/infrastructure/services/notifications/notification-bus';
+import { resolve } from '@/lib/server-container';
+import type { IAgentRunRepository } from '@shepai/core/application/ports/output/agents/agent-run-repository.interface';
+import type { IPhaseTimingRepository } from '@shepai/core/application/ports/output/agents/phase-timing-repository.interface';
+import type { Feature, AgentRun } from '@shepai/core/domain/generated/output';
+import {
+  AgentRunStatus,
+  SdlcLifecycle,
+  NotificationEventType,
+  NotificationSeverity,
+} from '@shepai/core/domain/generated/output';
 import type { NotificationEvent } from '@shepai/core/domain/generated/output';
+import type { ListFeaturesUseCase } from '@shepai/core/application/use-cases/features/list-features.use-case';
+
+// Force dynamic — SSE streams must never be statically optimized or cached
+export const dynamic = 'force-dynamic';
 
+const POLL_INTERVAL_MS = 500;
 const HEARTBEAT_INTERVAL_MS = 30_000;
 
-function formatSSEEvent(event: NotificationEvent): string {
-  return `event: notification\ndata: ${JSON.stringify(event)}\n\n`;
+interface CachedFeatureState {
+  status: AgentRunStatus | null;
+  lifecycle: string;
+  completedPhases: Set<string>;
+  featureName: string;
 }
 
-function formatHeartbeat(): string {
-  return ': heartbeat\n\n';
+/**
+ * Maps SdlcLifecycle values to agent graph node names so the client
+ * can derive the correct FeatureLifecyclePhase via mapPhaseNameToLifecycle().
+ */
+const LIFECYCLE_TO_NODE: Partial<Record<SdlcLifecycle, string>> = {
+  [SdlcLifecycle.Analyze]: 'analyze',
+  [SdlcLifecycle.Requirements]: 'requirements',
+  [SdlcLifecycle.Research]: 'research',
+  [SdlcLifecycle.Planning]: 'plan',
+  [SdlcLifecycle.Implementation]: 'implement',
+  [SdlcLifecycle.Review]: 'merge',
+};
+
+const STATUS_TO_EVENT: Partial<
+  Record<AgentRunStatus, { eventType: NotificationEventType; severity: NotificationSeverity }>
+> = {
+  [AgentRunStatus.running]: {
+    eventType: NotificationEventType.AgentStarted,
+    severity: NotificationSeverity.Info,
+  },
+  [AgentRunStatus.waitingApproval]: {
+    eventType: NotificationEventType.WaitingApproval,
+    severity: NotificationSeverity.Warning,
+  },
+  [AgentRunStatus.completed]: {
+    eventType: NotificationEventType.AgentCompleted,
+    severity: NotificationSeverity.Success,
+  },
+  [AgentRunStatus.failed]: {
+    eventType: NotificationEventType.AgentFailed,
+    severity: NotificationSeverity.Error,
+  },
+  [AgentRunStatus.interrupted]: {
+    eventType: NotificationEventType.AgentFailed,
+    severity: NotificationSeverity.Warning,
+  },
+  [AgentRunStatus.cancelled]: {
+    eventType: NotificationEventType.AgentFailed,
+    severity: NotificationSeverity.Warning,
+  },
+};
+
+/** Map agent graph node name from AgentRun.result to a phase name. */
+function resultToPhase(result: string | undefined): string | undefined {
+  if (!result?.startsWith('node:')) return undefined;
+  return result.slice(5); // "node:analyze" → "analyze"
 }
 
 export function GET(request: Request): Response {
-  const url = new URL(request.url);
-  const runIdFilter = url.searchParams.get('runId');
+  try {
+    const url = new URL(request.url);
+    const runIdFilter = url.searchParams.get('runId');
 
-  const stream = new ReadableStream<Uint8Array>({
-    start(controller) {
-      const encoder = new TextEncoder();
-      const bus = getNotificationBus();
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        const encoder = new TextEncoder();
 
-      const onNotification = (event: NotificationEvent) => {
-        if (runIdFilter && event.agentRunId !== runIdFilter) {
-          return;
+        // Per-connection cache: featureId → last-seen state
+        const cache = new Map<string, CachedFeatureState>();
+        let stopped = false;
+
+        function enqueue(text: string) {
+          if (stopped) return;
+          try {
+            controller.enqueue(encoder.encode(text));
+          } catch {
+            // Stream may be closed
+          }
         }
 
-        try {
-          controller.enqueue(encoder.encode(formatSSEEvent(event)));
-        } catch {
-          // Stream may be closed — ignore enqueue errors
+        function emitEvent(event: NotificationEvent) {
+          // eslint-disable-next-line no-console
+          console.log(
+            `[SSE] emit: ${event.eventType} for "${event.featureName}"${event.phaseName ? ` (${event.phaseName})` : ''}`
+          );
+          enqueue(`event: notification\ndata: ${JSON.stringify(event)}\n\n`);
         }
-      };
 
-      bus.on('notification', onNotification);
+        let pollErrorCount = 0;
 
-      // Heartbeat to keep connection alive
-      const heartbeatInterval = setInterval(() => {
-        try {
-          controller.enqueue(encoder.encode(formatHeartbeat()));
-        } catch {
-          // Stream may be closed — ignore enqueue errors
-        }
-      }, HEARTBEAT_INTERVAL_MS);
-
-      // Cleanup on client disconnect
-      const cleanup = () => {
-        bus.removeListener('notification', onNotification);
-        clearInterval(heartbeatInterval);
-        try {
-          controller.close();
-        } catch {
-          // Stream may already be closed
+        async function poll() {
+          if (stopped) return;
+
+          try {
+            const listFeatures = resolve<ListFeaturesUseCase>('ListFeaturesUseCase');
+            const agentRunRepo = resolve<IAgentRunRepository>('IAgentRunRepository');
+            const phaseTimingRepo = resolve<IPhaseTimingRepository>('IPhaseTimingRepository');
+
+            const features = await listFeatures.execute();
+
+            // Build current state for features with agent runs
+            const entries: { feature: Feature; run: AgentRun | null }[] = await Promise.all(
+              features.map(async (feature) => {
+                const run = feature.agentRunId
+                  ? await agentRunRepo.findById(feature.agentRunId)
+                  : null;
+                return { feature, run };
+              })
+            );
+
+            for (const { feature, run } of entries) {
+              if (!run) continue;
+
+              // Apply runId filter if present
+              if (runIdFilter && run.id !== runIdFilter) continue;
+
+              const prev = cache.get(feature.id);
+
+              if (!prev) {
+                // First time seeing this feature — seed cache, don't emit
+                const completedPhases = new Set<string>();
+                try {
+                  const timings = await phaseTimingRepo.findByRunId(run.id);
+                  for (const t of timings) {
+                    if (t.completedAt) completedPhases.add(t.phase);
+                  }
+                } catch {
+                  // Ignore timing errors
+                }
+
+                cache.set(feature.id, {
+                  status: run.status,
+                  lifecycle: feature.lifecycle,
+                  completedPhases,
+                  featureName: feature.name,
+                });
+                continue;
+              }
+
+              // Check for status change
+              if (prev.status !== run.status) {
+                prev.status = run.status;
+                const mapping = STATUS_TO_EVENT[run.status];
+                if (mapping) {
+                  const phase = resultToPhase(run.result);
+                  emitEvent({
+                    eventType: mapping.eventType,
+                    agentRunId: run.id,
+                    featureId: feature.id,
+                    featureName: feature.name,
+                    ...(phase && { phaseName: phase }),
+                    message: `Agent status: ${run.status}`,
+                    severity: mapping.severity,
+                    timestamp: new Date().toISOString(),
+                  });
+                }
+              }
+
+              // Check for lifecycle change (agent stays "running" but moves through phases)
+              if (prev.lifecycle !== feature.lifecycle) {
+                prev.lifecycle = feature.lifecycle;
+                const nodeName = LIFECYCLE_TO_NODE[feature.lifecycle as SdlcLifecycle];
+                if (nodeName) {
+                  emitEvent({
+                    eventType: NotificationEventType.PhaseCompleted,
+                    agentRunId: run.id,
+                    featureId: feature.id,
+                    featureName: feature.name,
+                    phaseName: nodeName,
+                    message: `Entered ${nodeName} phase`,
+                    severity: NotificationSeverity.Info,
+                    timestamp: new Date().toISOString(),
+                  });
+                }
+              }
+
+              // Check for new phase completions
+              try {
+                const timings = await phaseTimingRepo.findByRunId(run.id);
+                for (const t of timings) {
+                  if (t.completedAt && !prev.completedPhases.has(t.phase)) {
+                    prev.completedPhases.add(t.phase);
+                    emitEvent({
+                      eventType: NotificationEventType.PhaseCompleted,
+                      agentRunId: run.id,
+                      featureId: feature.id,
+                      featureName: feature.name,
+                      phaseName: t.phase,
+                      message: `Completed ${t.phase} phase`,
+                      severity: NotificationSeverity.Info,
+                      timestamp: new Date().toISOString(),
+                    });
+                  }
+                }
+              } catch {
+                // Ignore timing errors
+              }
+            }
+            pollErrorCount = 0; // Reset on success
+          } catch (error) {
+            pollErrorCount++;
+            // Log first few errors, then throttle to avoid spamming
+            if (pollErrorCount <= 3 || pollErrorCount % 60 === 0) {
+              // eslint-disable-next-line no-console
+              console.error(
+                `[SSE /api/agent-events] poll error #${pollErrorCount}:`,
+                error instanceof Error ? error.message : error
+              );
+            }
+          }
         }
-      };
-
-      request.signal.addEventListener('abort', cleanup, { once: true });
-    },
-  });
-
-  return new Response(stream, {
-    headers: {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      Connection: 'keep-alive',
-    },
-  });
+
+        // First poll immediately, then every POLL_INTERVAL_MS
+        void poll();
+        const pollInterval = setInterval(() => void poll(), POLL_INTERVAL_MS);
+
+        // Heartbeat to keep connection alive
+        const heartbeatInterval = setInterval(() => {
+          enqueue(': heartbeat\n\n');
+        }, HEARTBEAT_INTERVAL_MS);
+
+        // Cleanup on client disconnect
+        const cleanup = () => {
+          stopped = true;
+          clearInterval(pollInterval);
+          clearInterval(heartbeatInterval);
+          try {
+            controller.close();
+          } catch {
+            // Stream may already be closed
+          }
+        };
+
+        request.signal.addEventListener('abort', cleanup, { once: true });
+      },
+    });
+
+    return new Response(stream, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
+    });
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('[SSE route] GET handler error:', error);
+    return new Response(JSON.stringify({ error: String(error) }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
 }

package/web/.next/standalone/src/presentation/web/app/layout.tsx

@@ -11,6 +11,20 @@ export const metadata: Metadata = {
   title: 'Shep AI',
   description:
     'Autonomous AI Native SDLC Platform - Automate the development cycle from idea to deploy',
+  icons: [
+    {
+      rel: 'icon',
+      url: '/favicon-light.svg',
+      type: 'image/svg+xml',
+      media: '(prefers-color-scheme: light)',
+    },
+    {
+      rel: 'icon',
+      url: '/favicon-dark.svg',
+      type: 'image/svg+xml',
+      media: '(prefers-color-scheme: dark)',
+    },
+  ],
 };
 
 export default function RootLayout({

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

@@ -5,9 +5,14 @@
  * and its associated AgentRun status (mirrors CLI feat ls logic).
  */
 
-import { SdlcLifecycle, AgentRunStatus, TaskState } from '@shepai/core/domain/generated';
+import {
+  SdlcLifecycle,
+  AgentRunStatus,
+  TaskState,
+  NotificationEventType,
+} from '@shepai/core/domain/generated';
 import type { Feature, AgentRun } from '@shepai/core/domain/generated';
-import type { FeatureNodeState } from './feature-node-state-config';
+import type { FeatureNodeState, FeatureLifecyclePhase } from './feature-node-state-config';
 
 /**
  * Derives the visual node state from a Feature and its optional AgentRun.
@@ -85,3 +90,35 @@ export function deriveProgress(feature: Feature): number {
   const doneCount = tasks.filter((t) => t.state === TaskState.Done).length;
   return Math.round((doneCount / tasks.length) * 100);
 }
+
+/** Maps a NotificationEventType to the corresponding FeatureNodeState for optimistic UI updates. */
+export function mapEventTypeToState(eventType: NotificationEventType): FeatureNodeState {
+  switch (eventType) {
+    case NotificationEventType.AgentStarted:
+    case NotificationEventType.PhaseCompleted:
+      return 'running';
+    case NotificationEventType.WaitingApproval:
+      return 'action-required';
+    case NotificationEventType.AgentCompleted:
+      return 'done';
+    case NotificationEventType.AgentFailed:
+      return 'error';
+  }
+}
+
+/** Maps an SSE event phaseName to a FeatureLifecyclePhase. Mirrors page.tsx nodeToLifecyclePhase. */
+const phaseNameToLifecycle: Record<string, FeatureLifecyclePhase> = {
+  analyze: 'requirements',
+  requirements: 'requirements',
+  research: 'research',
+  plan: 'implementation',
+  implement: 'implementation',
+  merge: 'review',
+};
+
+export function mapPhaseNameToLifecycle(
+  phaseName: string | undefined
+): FeatureLifecyclePhase | undefined {
+  if (!phaseName) return undefined;
+  return phaseNameToLifecycle[phaseName];
+}

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

@@ -84,6 +84,7 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
         role="button"
         tabIndex={0}
         data-testid="repository-node-card"
+        data-repo-name={data.name}
         onClick={(e) => {
           e.stopPropagation();
           data.onClick?.();

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

@@ -0,0 +1 @@
+export { SoundToggle } from './sound-toggle';

package/web/.next/standalone/src/presentation/web/components/common/sound-toggle/sound-toggle.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SoundToggle } from './sound-toggle';
+
+const meta: Meta<typeof SoundToggle> = {
+  title: 'Composed/SoundToggle',
+  component: SoundToggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <SoundToggle />,
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="flex items-center gap-4 rounded-lg border p-4">
+      <span className="text-muted-foreground text-sm">Toggle sound:</span>
+      <SoundToggle />
+    </div>
+  ),
+};

package/web/.next/standalone/src/presentation/web/components/common/sound-toggle/sound-toggle.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Volume2, VolumeOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useSoundEnabled } from '@/hooks/use-sound-enabled';
+
+export function SoundToggle() {
+  const { enabled, toggle } = useSoundEnabled();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggle}
+      aria-label={enabled ? 'Mute sounds' : 'Unmute sounds'}
+    >
+      {enabled ? <Volume2 className="h-5 w-5" /> : <VolumeOff className="h-5 w-5" />}
+      <span className="sr-only">Toggle sound</span>
+    </Button>
+  );
+}

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

@@ -25,6 +25,7 @@ import type { PrdQuestionnaireData } from '@/components/common/prd-questionnaire
 import { TechDecisionsDrawer } from '@/components/common/tech-decisions-review';
 import { MergeReviewDrawer } from '@/components/common/merge-review';
 import { NotificationPermissionBanner } from '@/components/common/notification-permission-banner';
+import { useSound } from '@/hooks/use-sound';
 import { ControlCenterEmptyState } from './control-center-empty-state';
 import { useControlCenterState } from './use-control-center-state';
 
@@ -53,6 +54,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     handleDeleteFeature,
     handleDeleteRepository,
     closeCreateDrawer,
+    selectFeatureById,
     pendingParentFeatureId,
   } = useControlCenterState(initialNodes, initialEdges);
 
@@ -86,6 +88,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
 
   // Reject state (shared by both drawers)
   const [isRejecting, setIsRejecting] = useState(false);
+  const rejectSound = useSound('caution', { volume: 0.5 });
 
   // Tech decisions drawer state
   const [techDecisionsData, setTechDecisionsData] = useState<TechDecisionsReviewData | null>(null);
@@ -158,6 +161,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
           return;
         }
 
+        rejectSound.play();
         toast.success(`${label} rejected — agent re-iterating (iteration ${result.iteration})`);
         if (result.iterationWarning) {
           toast.warning(
@@ -170,7 +174,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
         setIsRejecting(false);
       }
     },
-    [selectedNode?.featureId, clearSelection]
+    [selectedNode?.featureId, clearSelection, rejectSound]
   );
 
   const handlePrdReject = useCallback(
@@ -325,6 +329,16 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     return () => window.removeEventListener('shep:open-create-drawer', handler);
   }, [handleAddFeature]);
 
+  // Listen for notification "Review" clicks to open the relevant drawer
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const featureId = (e as CustomEvent<{ featureId: string }>).detail.featureId;
+      selectFeatureById(featureId);
+    };
+    window.addEventListener('shep:select-feature', handler);
+    return () => window.removeEventListener('shep:select-feature', handler);
+  }, [selectFeatureById]);
+
   if (!hasRepositories) {
     return (
       <>