@shepai/cli 1.26.0 → 1.27.0

package/dist/src/presentation/web/app/page.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ControlCenter } from '../components/features/control-center/index.js';
 import { getAgentRun, getFeatures } from '../../../../packages/core/src/infrastructure/di/use-cases-bridge.js';
-import { deriveState } from './derive-state.js';
+import { deriveNodeState, deriveProgress, } from '../components/common/feature-node/derive-feature-state.js';
 import { layoutWithDagre } from '../lib/layout-with-dagre.js';
 /** Force request-time rendering so the globalThis DI bridge is available. */
 export const dynamic = 'force-dynamic';
@@ -26,12 +26,7 @@ export default async function HomePage() {
     const features = await getFeatures();
     const featuresWithRuns = await Promise.all(features.map(async (feature) => {
         const run = feature.agentRunId ? await getAgentRun(feature.agentRunId) : null;
-        return {
-            feature,
-            agentStatus: run?.status,
-            agentError: run?.error,
-            agentResult: run?.result,
-        };
+        return { feature, run };
     }));
     // Group features by repository path
     const featuresByRepo = {};
@@ -53,9 +48,9 @@ export default async function HomePage() {
             position: { x: 0, y: 0 },
             data: { name: repoName },
         });
-        repoFeatures.forEach(({ feature, agentStatus, agentError, agentResult }) => {
-            const agentNode = agentResult?.startsWith('node:') ? agentResult.slice(5) : undefined;
-            const lifecycle = agentStatus === 'completed'
+        repoFeatures.forEach(({ feature, run }) => {
+            const agentNode = run?.result?.startsWith('node:') ? run.result.slice(5) : undefined;
+            const lifecycle = run?.status === 'completed'
                 ? 'maintain'
                 : ((agentNode ? nodeToLifecyclePhase[agentNode] : undefined) ??
                     lifecycleMap[feature.lifecycle] ??
@@ -67,8 +62,10 @@ export default async function HomePage() {
                 lifecycle,
                 repositoryPath: feature.repositoryPath,
                 branch: feature.branch,
-                ...deriveState(lifecycle, agentStatus),
-                ...(agentError && { errorMessage: agentError }),
+                state: deriveNodeState(feature, run),
+                progress: deriveProgress(feature),
+                ...(run?.agentType && { agentType: run.agentType }),
+                ...(run?.error && { errorMessage: run.error }),
             };
             const featureNodeId = `feat-${feature.id}`;
             nodes.push({

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

@@ -20,10 +20,10 @@ function StateBadge({ data }) {
     return (_jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium', config.badgeBgClass, config.badgeClass), children: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_jsx(Icon, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: config.label })] }));
 }
 function DetailsSection({ data }) {
-    const hasAnyDetail = data.description ?? data.agentName ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
+    const hasAnyDetail = data.description ?? data.agentType ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
     if (!hasAnyDetail)
         return null;
-    return (_jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.description ? _jsx(DetailRow, { label: "Description", value: data.description }) : null, data.agentName ? _jsx(DetailRow, { label: "Agent", value: data.agentName }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] }));
+    return (_jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.description ? _jsx(DetailRow, { label: "Description", value: data.description }) : null, data.agentType ? _jsx(DetailRow, { label: "Agent", value: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] }));
 }
 function DetailRow({ label, value }) {
     return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));

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

@@ -30,7 +30,7 @@ const runningData = {
     lifecycle: 'implementation',
     state: 'running',
     progress: 45,
-    agentName: 'Planner',
+    agentType: 'claude-code',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/auth-module',
 };
@@ -118,7 +118,7 @@ export const AllFields = {
             lifecycle: 'implementation',
             state: 'running',
             progress: 68,
-            agentName: 'Implementer',
+            agentType: 'cursor',
             runtime: '3h 15m',
             blockedBy: 'Database Migration',
             errorMessage: 'Token refresh failed: invalid_grant',
@@ -169,7 +169,7 @@ function AllLifecyclesRender() {
                                 lifecycle: phase,
                                 state: 'running',
                                 progress: 50,
-                                agentName: 'Agent',
+                                agentType: 'claude-code',
                                 repositoryPath: '/home/user/my-repo',
                                 branch: 'feat/feature-name',
                             });

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts

@@ -1,9 +1,12 @@
 import { type LucideIcon } from 'lucide-react';
 import type { Node } from '@xyflow/react';
+import type { AgentTypeValue } from './agent-type-icons.js';
 export type FeatureNodeState = 'running' | 'action-required' | 'done' | 'blocked' | 'error';
 export type FeatureLifecyclePhase = 'requirements' | 'research' | 'implementation' | 'review' | 'deploy' | 'maintain';
 /** Human-readable display labels for lifecycle phases. */
 export declare const lifecycleDisplayLabels: Record<FeatureLifecyclePhase, string>;
+/** Present-participle verbs for the running badge, keyed by lifecycle phase. */
+export declare const lifecycleRunningVerbs: Record<FeatureLifecyclePhase, string>;
 export interface FeatureNodeData {
     [key: string]: unknown;
     name: string;
@@ -22,8 +25,8 @@ export interface FeatureNodeData {
     blockedBy?: string;
     /** Short error message for error state */
     errorMessage?: string;
-    /** Agent name shown in the running badge (e.g. "Planner") */
-    agentName?: string;
+    /** Agent executor type (e.g. "claude-code", "cursor"). */
+    agentType?: AgentTypeValue;
     onAction?: () => void;
     onSettings?: () => void;
     showHandles?: boolean;

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5F,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,UAAU,CAAC;AAEf,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOxE,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,qBAAqB,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CAmDnF,CAAC"}
+{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5F,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,UAAU,CAAC;AAEf,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOxE,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOvE,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,qBAAqB,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CAmDnF,CAAC"}

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.js

@@ -8,6 +8,15 @@ export const lifecycleDisplayLabels = {
     deploy: 'DEPLOY & QA',
     maintain: 'COMPLETED',
 };
+/** Present-participle verbs for the running badge, keyed by lifecycle phase. */
+export const lifecycleRunningVerbs = {
+    requirements: 'Analyzing',
+    research: 'Researching',
+    implementation: 'Implementing',
+    review: 'Reviewing',
+    deploy: 'Deploying',
+    maintain: 'Maintaining',
+};
 export const featureNodeStateConfig = {
     running: {
         icon: Loader2,

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

@@ -1 +1 @@
-{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAoBnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CA0IA"}
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwBnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAqJA"}

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

@@ -3,15 +3,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Handle, Position } from '@xyflow/react';
 import { Settings, Plus } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
-import { CometSpinner } from '../../ui/comet-spinner.js';
-import { featureNodeStateConfig, lifecycleDisplayLabels } from './feature-node-state-config.js';
+import { featureNodeStateConfig, lifecycleDisplayLabels, lifecycleRunningVerbs, } from './feature-node-state-config.js';
+import { getAgentTypeIcon } from './agent-type-icons.js';
+function AgentIcon({ agentType, className }) {
+    const IconComponent = getAgentTypeIcon(agentType);
+    return _jsx(IconComponent, { className: className });
+}
 function getBadgeText(data) {
     const config = featureNodeStateConfig[data.state];
     switch (data.state) {
-        case 'running': {
-            const agent = data.agentName ?? 'Agent';
-            return `${agent} ${data.featureId} running`;
-        }
+        case 'running':
+            return lifecycleRunningVerbs[data.lifecycle];
         case 'done':
             return data.runtime ? `Completed in ${data.runtime}` : 'Completed';
         case 'blocked':
@@ -28,7 +30,7 @@ export function FeatureNode({ data, selected, }) {
     return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, _jsxs("div", { "data-testid": "feature-node-card", className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: lifecycleDisplayLabels[data.lifecycle] }), data.onSettings ? (_jsx("button", { type: "button", "aria-label": "Settings", "data-testid": "feature-node-settings-button", onClick: (e) => {
                                     e.stopPropagation();
                                     data.onSettings?.();
-                                }, className: "nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-[10px]", children: [_jsx("span", { children: data.featureId }), _jsxs("span", { children: [data.progress, "%"] })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _jsxs("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), children: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" })), _jsx("span", { className: "truncate", children: getBadgeText(data) })] })] })) })] }), data.onAction ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", children: _jsx("button", { type: "button", "aria-label": "Add", "data-testid": "feature-node-action-button", onClick: (e) => {
+                                }, className: "nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: data.state === 'running' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _jsxs("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), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: getBadgeText(data) })] })] })) })] }), data.onAction ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", children: _jsx("button", { type: "button", "aria-label": "Add", "data-testid": "feature-node-action-button", onClick: (e) => {
                         e.stopPropagation();
                         data.onAction?.();
                     }, className: "nodrag absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-blue-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-blue-600", children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) })) : data.showHandles ? (_jsx(Handle, { type: "source", position: Position.Right, isConnectable: false, className: "opacity-0!" })) : null] }));

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAkBnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAqBnD"}

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.js

@@ -4,7 +4,10 @@ import { useCallback } from 'react';
 import { SidebarProvider, SidebarInset } from '../../ui/sidebar.js';
 import { AppSidebar } from '../../layouts/app-sidebar/index.js';
 import { ThemeToggle } from '../../common/theme-toggle/index.js';
+import { useNotifications } from '../../../hooks/use-notifications.js';
 export function AppShell({ children }) {
+    // Subscribe to agent lifecycle events and dispatch toast/browser notifications
+    useNotifications();
     const handleNewFeature = useCallback(() => {
         window.dispatchEvent(new CustomEvent('shep:open-create-drawer'));
     }, []);

package/dist/src/presentation/web/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/src/presentation/web/hooks/use-agent-events.d.ts

@@ -0,0 +1,12 @@
+import type { NotificationEvent } from '../../../../packages/core/src/domain/generated/output.js';
+export type ConnectionStatus = 'connected' | 'connecting' | 'disconnected';
+export interface UseAgentEventsOptions {
+    runId?: string;
+}
+export interface UseAgentEventsResult {
+    events: NotificationEvent[];
+    lastEvent: NotificationEvent | null;
+    connectionStatus: ConnectionStatus;
+}
+export declare function useAgentEvents(options?: UseAgentEventsOptions): UseAgentEventsResult;
+//# sourceMappingURL=use-agent-events.d.ts.map

package/dist/src/presentation/web/hooks/use-agent-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-agent-events.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-agent-events.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAKD,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,oBAAoB,CAkEpF"}

package/dist/src/presentation/web/hooks/use-agent-events.js

@@ -0,0 +1,58 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+const BASE_BACKOFF_MS = 1000;
+const MAX_BACKOFF_MS = 30_000;
+export function useAgentEvents(options) {
+    const [events, setEvents] = useState([]);
+    const [lastEvent, setLastEvent] = useState(null);
+    const [connectionStatus, setConnectionStatus] = useState('disconnected');
+    const backoffRef = useRef(BASE_BACKOFF_MS);
+    const reconnectTimerRef = useRef(null);
+    const esRef = useRef(null);
+    const runId = options?.runId;
+    const connect = useCallback(() => {
+        if (typeof window === 'undefined' || typeof EventSource === 'undefined') {
+            return;
+        }
+        const url = runId
+            ? `/api/agent-events?runId=${encodeURIComponent(runId)}`
+            : '/api/agent-events';
+        const es = new EventSource(url);
+        esRef.current = es;
+        setConnectionStatus('connecting');
+        es.onopen = () => {
+            setConnectionStatus('connected');
+            backoffRef.current = BASE_BACKOFF_MS;
+        };
+        es.onerror = () => {
+            es.close();
+            esRef.current = null;
+            setConnectionStatus('disconnected');
+            const delay = backoffRef.current;
+            backoffRef.current = Math.min(delay * 2, MAX_BACKOFF_MS);
+            reconnectTimerRef.current = setTimeout(() => {
+                reconnectTimerRef.current = null;
+                connect();
+            }, delay);
+        };
+        es.addEventListener('notification', ((event) => {
+            const parsed = JSON.parse(event.data);
+            setEvents((prev) => [...prev, parsed]);
+            setLastEvent(parsed);
+        }));
+    }, [runId]);
+    useEffect(() => {
+        connect();
+        return () => {
+            if (reconnectTimerRef.current !== null) {
+                clearTimeout(reconnectTimerRef.current);
+                reconnectTimerRef.current = null;
+            }
+            if (esRef.current) {
+                esRef.current.close();
+                esRef.current = null;
+            }
+        };
+    }, [connect]);
+    return { events, lastEvent, connectionStatus };
+}

package/dist/src/presentation/web/hooks/use-notifications.d.ts

@@ -0,0 +1,10 @@
+export interface UseNotificationsOptions {
+    browserEnabled?: boolean;
+    runId?: string;
+}
+export interface UseNotificationsResult {
+    requestBrowserPermission: () => Promise<void>;
+    browserPermissionState: NotificationPermission;
+}
+export declare function useNotifications(options?: UseNotificationsOptions): UseNotificationsResult;
+//# sourceMappingURL=use-notifications.d.ts.map

package/dist/src/presentation/web/hooks/use-notifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notifications.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-notifications.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,uBAAuB;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD;AAqBD,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,sBAAsB,CAyC1F"}

package/dist/src/presentation/web/hooks/use-notifications.js

@@ -0,0 +1,57 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { NotificationSeverity } from '../../../../packages/core/src/domain/generated/output.js';
+import { useAgentEvents } from './use-agent-events.js';
+const SEVERITY_TO_TOAST = {
+    [NotificationSeverity.Success]: 'success',
+    [NotificationSeverity.Error]: 'error',
+    [NotificationSeverity.Warning]: 'warning',
+    [NotificationSeverity.Info]: 'info',
+};
+function dispatchToast(event) {
+    const method = SEVERITY_TO_TOAST[event.severity] ?? 'info';
+    toast[method](event.featureName, { description: event.message });
+}
+function dispatchBrowserNotification(event) {
+    if (globalThis.Notification?.permission !== 'granted') {
+        return;
+    }
+    new Notification(event.featureName, { body: event.message });
+}
+export function useNotifications(options) {
+    const browserEnabled = options?.browserEnabled ?? false;
+    const { lastEvent } = useAgentEvents({ runId: options?.runId });
+    const [browserPermissionState, setBrowserPermissionState] = useState(() => {
+        if (typeof globalThis.Notification === 'undefined')
+            return 'default';
+        return globalThis.Notification.permission;
+    });
+    // Track which events we've already dispatched to avoid re-dispatching on re-render
+    const processedRef = useRef(new Set());
+    useEffect(() => {
+        if (!lastEvent)
+            return;
+        // Create a key for deduplication
+        const key = `${lastEvent.agentRunId}-${lastEvent.eventType}-${lastEvent.timestamp}`;
+        if (processedRef.current.has(key))
+            return;
+        processedRef.current.add(key);
+        // Always dispatch toast
+        dispatchToast(lastEvent);
+        // Dispatch browser notification if enabled and permitted
+        if (browserEnabled) {
+            dispatchBrowserNotification(lastEvent);
+        }
+    }, [lastEvent, browserEnabled]);
+    const requestBrowserPermission = useCallback(async () => {
+        if (typeof globalThis.Notification === 'undefined')
+            return;
+        const result = await globalThis.Notification.requestPermission();
+        setBrowserPermissionState(result);
+    }, []);
+    return {
+        requestBrowserPermission,
+        browserPermissionState,
+    };
+}

package/dist/src/presentation/web/hooks/use-notifications.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+//# sourceMappingURL=use-notifications.stories.d.ts.map

package/dist/src/presentation/web/hooks/use-notifications.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notifications.stories.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-notifications.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAwIvD,QAAA,MAAM,IAAI,EAAE,IAcX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/src/presentation/web/hooks/use-notifications.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Toaster } from '../components/ui/sonner.js';
+import { Button } from '../components/ui/button.js';
+function simulateNotification(event) {
+    const method = event.severity ?? 'info';
+    toast[method](event.featureName, { description: event.message });
+    if (globalThis.Notification?.permission === 'granted') {
+        new Notification(event.featureName, { body: event.message });
+    }
+}
+function NotificationDemo() {
+    const [browserPermission, setBrowserPermission] = useState(typeof globalThis.Notification !== 'undefined' ? globalThis.Notification.permission : 'default');
+    const requestPermission = async () => {
+        if (typeof globalThis.Notification === 'undefined')
+            return;
+        const result = await globalThis.Notification.requestPermission();
+        setBrowserPermission(result);
+    };
+    return (_jsxs("div", { className: "flex w-[420px] flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Browser Notification Permission" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "text-muted-foreground text-sm", children: ["Status: ", _jsx("code", { className: "bg-muted rounded px-1.5 py-0.5", children: browserPermission })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: requestPermission, children: "Request Permission" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Simulate Notification Events" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Click a button to fire a toast and browser notification." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => simulateNotification({
+                                    eventType: 'agent_started',
+                                    severity: 'info',
+                                    featureName: 'Auth Module',
+                                    message: 'Agent started running',
+                                }), children: "Agent Started" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => simulateNotification({
+                                    eventType: 'phase_completed',
+                                    severity: 'info',
+                                    featureName: 'Auth Module',
+                                    message: 'Completed analyze phase',
+                                    phaseName: 'analyze',
+                                }), children: "Phase Completed" }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => simulateNotification({
+                                    eventType: 'waiting_approval',
+                                    severity: 'warning',
+                                    featureName: 'Auth Module',
+                                    message: 'Waiting for user approval',
+                                }), children: "Waiting Approval" }), _jsx(Button, { size: "sm", onClick: () => simulateNotification({
+                                    eventType: 'agent_completed',
+                                    severity: 'success',
+                                    featureName: 'Auth Module',
+                                    message: 'Agent completed successfully',
+                                }), children: "Agent Completed" }), _jsx(Button, { size: "sm", variant: "destructive", onClick: () => simulateNotification({
+                                    eventType: 'agent_failed',
+                                    severity: 'error',
+                                    featureName: 'Auth Module',
+                                    message: 'Agent failed: token refresh error',
+                                }), children: "Agent Failed" })] })] })] }));
+}
+const meta = {
+    title: 'Hooks/useNotifications',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsxs(_Fragment, { children: [_jsx(Story, {}), _jsx(Toaster, {})] })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(NotificationDemo, {}),
+};