@shepai/cli 1.182.1 → 1.183.0

package/dist/src/presentation/web/components/features/applications/application-card.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { AlertTriangle, ExternalLink, FolderGit2, Globe, LayoutGrid, Loader2, Play, Square, Trash2, TriangleAlert, } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../ui/button.js';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
+import { deleteApplication } from '../../../app/actions/delete-application.js';
+import { deriveAppLiveStatus } from '../../../lib/derive-app-status.js';
+import { useTurnStatus } from '../../../hooks/turn-statuses-provider.js';
+import { useDeployAction } from '../../../hooks/use-deploy-action.js';
+import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
+const PREVIEW_HEIGHT_PX = 140;
+export function ApplicationCard({ application, className }) {
+    const router = useRouter();
+    const queryClient = useQueryClient();
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const turnStatus = useTurnStatus(`app-${application.id}`);
+    const deploy = useDeployAction({
+        targetId: application.id,
+        targetType: 'application',
+        repositoryPath: application.repositoryPath,
+    });
+    const effectiveDeploymentUrl = deploy.url;
+    const live = deriveAppLiveStatus(application.status, turnStatus, !!effectiveDeploymentUrl, application.effectiveStatus);
+    const repoCount = 1 + (application.additionalPaths?.length ?? 0);
+    const repoName = application.repositoryPath.split('/').pop() ?? application.repositoryPath;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "application-card", onClick: () => router.push(`/application/${application.id}`), className: cn('bg-card group relative cursor-pointer overflow-hidden rounded-xl border shadow-sm transition-[border-color,box-shadow] duration-200 hover:shadow-lg dark:bg-neutral-800/80', live.borderClass, className), children: [_jsxs("div", { className: "flex items-center gap-3 px-4 pt-4 pb-3", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500", children: _jsx(LayoutGrid, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { "data-testid": "application-card-name", className: "truncate text-sm font-medium", children: application.name }), _jsx("p", { className: "text-muted-foreground mt-0.5 truncate text-[11px]", children: application.description })] }), _jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx("span", { className: cn('relative flex h-2 w-2 items-center justify-center rounded-full', live.dotClass), children: live.pulse ? (_jsx("span", { className: cn('absolute inline-flex h-full w-full animate-ping rounded-full opacity-60', live.dotClass) })) : null }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: live.label })] })] }), _jsx("div", { className: "px-4", children: _jsxs("div", { className: "bg-muted group/preview relative overflow-hidden rounded-lg", style: { height: PREVIEW_HEIGHT_PX }, children: [effectiveDeploymentUrl ? (_jsx("iframe", { src: effectiveDeploymentUrl, title: `${application.name} live preview`, className: "pointer-events-none absolute top-0 left-0 origin-top-left border-0 bg-white", style: { width: '250%', height: '250%', transform: 'scale(0.4)' }, sandbox: "allow-same-origin allow-scripts", loading: "lazy" })) : (_jsx(PreviewPlaceholder, { effectiveStatus: application.effectiveStatus })), deploy.status === DeploymentState.Ready && effectiveDeploymentUrl ? (_jsxs("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center gap-2 bg-neutral-900/75 opacity-0 transition-opacity duration-150 group-hover/preview:pointer-events-auto group-hover/preview:opacity-100 dark:bg-neutral-950/80", onClick: (e) => e.stopPropagation(), children: [_jsxs("button", { type: "button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                void deploy.stop();
+                                            }, disabled: deploy.stopLoading, className: "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border border-neutral-300 bg-white px-3 text-[11px] font-semibold text-neutral-900 shadow-md transition-colors hover:border-red-500 hover:bg-red-50 hover:text-red-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:border-red-500 dark:hover:bg-red-950 dark:hover:text-red-400", children: [deploy.stopLoading ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Square, { className: "h-3 w-3 fill-current" })), "Stop"] }), _jsxs("button", { type: "button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (effectiveDeploymentUrl) {
+                                                    window.open(effectiveDeploymentUrl, '_blank', 'noopener,noreferrer');
+                                                }
+                                            }, className: "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border border-neutral-300 bg-white px-3 text-[11px] font-semibold text-neutral-900 shadow-md transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800", children: [_jsx(ExternalLink, { className: "h-3 w-3" }), "Open"] })] })) : null, deploy.status === DeploymentState.Booting || deploy.deployLoading ? (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-neutral-100 dark:bg-neutral-900", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin text-amber-500" }), _jsx("span", { className: "text-foreground text-[11px] font-medium", children: "Starting\u2026" })] })) : null, !live.previewDisabled &&
+                                    !effectiveDeploymentUrl &&
+                                    !deploy.deployLoading &&
+                                    deploy.status !== DeploymentState.Booting &&
+                                    !deploy.deployError && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center gap-2 bg-neutral-900/75 opacity-0 transition-opacity duration-150 group-hover/preview:pointer-events-auto group-hover/preview:opacity-100 dark:bg-neutral-950/80", children: _jsxs("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            void deploy.deploy();
+                                        }, className: "inline-flex h-8 cursor-pointer items-center gap-2 rounded-md border border-violet-400 bg-gradient-to-br from-indigo-500 to-violet-600 px-4 text-[11px] font-semibold text-white shadow-md transition-[filter] hover:brightness-110", children: [_jsx(Play, { className: "h-3 w-3 fill-current" }), "Start Preview"] }) })), application.effectiveStatus === 'interrupted' && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-amber-950/60 opacity-0 transition-opacity duration-150 group-hover/preview:pointer-events-auto group-hover/preview:opacity-100", children: _jsxs("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            void fetch(`/api/applications/${application.id}/resume`, { method: 'POST' });
+                                        }, className: "inline-flex h-8 cursor-pointer items-center gap-2 rounded-md border border-amber-400 bg-gradient-to-br from-amber-500 to-orange-500 px-4 text-[11px] font-semibold text-white shadow-md transition-[filter] hover:brightness-110", children: [_jsx(Play, { className: "h-3 w-3 fill-current" }), "Continue Build"] }) })), _jsx("button", { type: "button", onClick: (e) => {
+                                        e.stopPropagation();
+                                        setConfirmOpen(true);
+                                    }, className: "absolute top-1.5 right-1.5 z-20 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md bg-white/80 text-neutral-500 opacity-0 shadow-sm backdrop-blur-sm transition-all group-hover:opacity-100 hover:!bg-red-500 hover:!text-white dark:bg-neutral-800/80 dark:text-neutral-400", "aria-label": `Delete ${application.name}`, title: "Delete application", children: _jsx(Trash2, { className: "h-3 w-3" }) })] }) }), _jsxs("div", { className: "flex items-center justify-between px-4 pt-3 pb-4", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1.5 text-[11px]", children: [_jsx(FolderGit2, { className: "h-3 w-3" }), repoName, repoCount > 1 && _jsxs("span", { className: "text-muted-foreground/60", children: ["+", repoCount - 1] })] }), _jsx("span", { className: "text-muted-foreground/60 text-[10px]", children: new Date(application.createdAt).toLocaleDateString(undefined, {
+                                    month: 'short',
+                                    day: 'numeric',
+                                }) })] })] }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-xs", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Delete application?" }), _jsxs(DialogDescription, { children: ["This will permanently remove ", _jsx("strong", { children: application.name }), "."] })] }), _jsxs(DialogFooter, { className: "grid grid-cols-2 gap-2 sm:flex-none", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { variant: "destructive", onClick: async () => {
+                                        setConfirmOpen(false);
+                                        const result = await deleteApplication(application.id);
+                                        if (result.error) {
+                                            toast.error('Failed to delete', { description: result.error });
+                                        }
+                                        else {
+                                            toast.success('Application deleted');
+                                            void queryClient.invalidateQueries({ queryKey: ['applications'] });
+                                        }
+                                    }, children: "Delete" })] })] }) })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Preview placeholders per state                                     */
+/* ------------------------------------------------------------------ */
+function PreviewPlaceholder({ effectiveStatus }) {
+    if (effectiveStatus === 'failed') {
+        return (_jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-red-50 dark:bg-red-950/30", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50", children: _jsx(TriangleAlert, { className: "h-5 w-5 text-red-500" }) }), _jsx("span", { className: "text-[11px] font-medium text-red-600 dark:text-red-400", children: "Build failed" }), _jsx("span", { className: "text-muted-foreground/60 text-[10px]", children: "Open app to retry" })] }));
+    }
+    if (effectiveStatus === 'interrupted') {
+        return (_jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-amber-50 dark:bg-amber-950/20", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/40", children: _jsx(AlertTriangle, { className: "h-5 w-5 text-amber-500" }) }), _jsx("span", { className: "text-[11px] font-medium text-amber-600 dark:text-amber-400", children: "Build interrupted" }), _jsx("span", { className: "text-muted-foreground/60 text-[10px]", children: "Open app to continue" })] }));
+    }
+    if (effectiveStatus === 'building') {
+        return (_jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin text-violet-500" }), _jsx("span", { className: "text-[11px] font-medium text-violet-600 dark:text-violet-400", children: "Building\u2026" })] }));
+    }
+    // Ready / offline — clean wireframe with globe icon
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/10 to-violet-500/10", children: _jsx(Globe, { className: "text-muted-foreground/30 h-5 w-5" }) }), _jsxs("div", { className: "absolute inset-0 opacity-30", children: [_jsxs("div", { className: "flex h-5 items-center gap-1.5 px-2", style: { background: 'var(--muted)' }, children: [_jsx("div", { className: "bg-muted-foreground/10 h-1.5 w-1.5 rounded-full" }), _jsx("div", { className: "bg-muted-foreground/10 h-1.5 w-1.5 rounded-full" }), _jsx("div", { className: "bg-muted-foreground/10 h-1.5 w-1.5 rounded-full" }), _jsx("div", { className: "bg-muted-foreground/10 ms-1.5 h-1.5 w-12 rounded" })] }), _jsxs("div", { className: "flex h-[calc(100%-1.25rem)]", children: [_jsxs("div", { className: "border-muted-foreground/5 flex w-[40px] flex-col gap-1.5 border-e p-1.5", children: [_jsx("div", { className: "bg-muted-foreground/8 h-1.5 w-full rounded" }), _jsx("div", { className: "bg-muted-foreground/8 h-1.5 w-3/4 rounded" }), _jsx("div", { className: "bg-muted-foreground/8 h-1.5 w-full rounded" })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5 p-2.5", children: [_jsx("div", { className: "bg-muted-foreground/8 h-2 w-2/3 rounded" }), _jsx("div", { className: "bg-muted-foreground/8 h-1.5 w-full rounded" }), _jsx("div", { className: "bg-muted-foreground/8 h-1.5 w-5/6 rounded" }), _jsx("div", { className: "bg-muted-foreground/8 h-1.5 w-3/4 rounded" })] })] })] })] }));
+}

package/dist/src/presentation/web/components/features/applications/application-card.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ApplicationCard } from './application-card.js';
+declare const meta: Meta<typeof ApplicationCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Idle: Story;
+export declare const Active: Story;
+export declare const ErrorState: Story;
+export declare const LongDescription: Story;
+export declare const MultipleRepos: Story;
+export declare const Interrupted: Story;
+export declare const Failed: Story;
+//# sourceMappingURL=application-card.stories.d.ts.map

package/dist/src/presentation/web/components/features/applications/application-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"application-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/applications/application-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAkBrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAetC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC"}

package/dist/src/presentation/web/components/features/applications/application-card.stories.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ApplicationCard } from './application-card.js';
+import { ApplicationStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+const baseApp = {
+    id: '550e8400-e29b-41d4-a716-446655440000',
+    name: 'My Weather App',
+    slug: 'my-weather-app',
+    description: 'A weather dashboard that shows real-time forecasts with interactive maps',
+    repositoryPath: '/home/user/projects/weather-app',
+    additionalPaths: [],
+    status: ApplicationStatus.Idle,
+    setupComplete: true,
+    effectiveStatus: 'ready',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+};
+const meta = {
+    title: 'Features/ApplicationCard',
+    component: ApplicationCard,
+    parameters: {
+        layout: 'padded',
+        backgrounds: { default: 'canvas' },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { maxWidth: 360 }, children: _jsx(Story, {}) })),
+    ],
+    tags: ['autodocs'],
+};
+export default meta;
+export const Idle = {
+    args: { application: baseApp },
+};
+export const Active = {
+    args: {
+        application: { ...baseApp, status: ApplicationStatus.Active, name: 'Running App' },
+    },
+};
+export const ErrorState = {
+    args: {
+        application: { ...baseApp, status: ApplicationStatus.Error, name: 'Broken App' },
+    },
+};
+export const LongDescription = {
+    args: {
+        application: {
+            ...baseApp,
+            name: 'Enterprise Resource Planning Dashboard',
+            description: 'A comprehensive enterprise resource planning system with inventory management, order tracking, customer relationship management, and financial reporting modules.',
+        },
+    },
+};
+export const MultipleRepos = {
+    args: {
+        application: {
+            ...baseApp,
+            additionalPaths: ['/home/user/projects/shared-lib', '/home/user/projects/api'],
+        },
+    },
+};
+export const Interrupted = {
+    args: {
+        application: { ...baseApp, effectiveStatus: 'interrupted', name: 'Interrupted App' },
+    },
+};
+export const Failed = {
+    args: {
+        application: { ...baseApp, effectiveStatus: 'failed', name: 'Failed App' },
+    },
+};

package/dist/src/presentation/web/components/features/applications/applications-page-client.d.ts

@@ -0,0 +1,5 @@
+export interface ApplicationsPageClientProps {
+    className?: string;
+}
+export declare function ApplicationsPageClient({ className }: ApplicationsPageClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=applications-page-client.d.ts.map

package/dist/src/presentation/web/components/features/applications/applications-page-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applications-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/applications/applications-page-client.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,2BAA2B,2CA6FhF"}

package/dist/src/presentation/web/components/features/applications/applications-page-client.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+import { LayoutGrid, Loader2, Plus } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { DeploymentStatusProvider } from '../../../hooks/deployment-status-provider.js';
+import { ControlCenterEmptyState } from '../../features/control-center/control-center-empty-state.js';
+import { ApplicationCard } from './application-card.js';
+export function ApplicationsPageClient({ className }) {
+    const router = useRouter();
+    const [showCreatePrompt, setShowCreatePrompt] = useState(false);
+    const { data: applications = [], isLoading } = useQuery({
+        queryKey: ['applications'],
+        queryFn: async () => {
+            const res = await fetch('/api/applications');
+            if (!res.ok)
+                throw new Error('Failed to fetch applications');
+            return res.json();
+        },
+        staleTime: 30_000,
+    });
+    const sorted = useMemo(() => [...applications].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()), [applications]);
+    return (_jsx(DeploymentStatusProvider, { initialDeployments: [], children: _jsxs("div", { "data-testid": "applications-page-client", className: cn('relative space-y-4', className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutGrid, { className: "text-muted-foreground h-4 w-4" }), _jsx("h1", { className: "text-sm font-bold tracking-tight", children: "Applications" }), !isLoading ? (_jsxs("span", { className: "text-muted-foreground text-[10px]", children: [applications.length, " ", applications.length === 1 ? 'app' : 'apps'] })) : null] }), isLoading ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }) })) : applications.length === 0 ? (_jsxs("div", { "data-testid": "applications-page-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-12 text-center", children: [_jsx(LayoutGrid, { className: "mb-2 h-6 w-6 opacity-20" }), _jsx("p", { className: "text-xs", children: "No applications yet." }), _jsxs("button", { type: "button", onClick: () => setShowCreatePrompt(true), className: "mt-3 inline-flex items-center gap-1.5 rounded-md bg-indigo-500 px-3 py-1.5 text-[11px] font-semibold text-white shadow-sm transition-colors hover:bg-indigo-400", children: [_jsx(Plus, { className: "h-3 w-3" }), "New application"] })] })) : (_jsx("div", { "data-testid": "applications-page-grid", className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: sorted.map((app) => (_jsx(ApplicationCard, { application: app }, app.id))) })), _jsx("button", { type: "button", "data-testid": "applications-fab-new", "aria-label": "New application", onClick: () => setShowCreatePrompt(true), className: "fixed right-6 bottom-6 z-40 flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-indigo-500 text-white shadow-lg transition-all duration-200 hover:scale-105 hover:bg-indigo-400 hover:shadow-xl active:scale-95", children: _jsx(Plus, { className: "h-7 w-7 stroke-[2.5]" }) }), showCreatePrompt ? (_jsx("div", { className: "fixed inset-0 z-50", children: _jsx(ControlCenterEmptyState, { onApplicationCreated: (appId) => {
+                            router.push(`/application/${appId}`);
+                        }, onClose: () => setShowCreatePrompt(false), className: "bg-background" }) })) : null] }) }));
+}

package/dist/src/presentation/web/components/features/applications/applications-page-client.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ApplicationsPageClient } from './applications-page-client.js';
+declare const meta: Meta<typeof ApplicationsPageClient>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const SingleApp: Story;
+export declare const AllActive: Story;
+//# sourceMappingURL=applications-page-client.stories.d.ts.map

package/dist/src/presentation/web/components/features/applications/applications-page-client.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applications-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/applications/applications-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AA0EpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,sBAAsB,CAO7C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/dist/src/presentation/web/components/features/applications/applications-page-client.stories.js

@@ -0,0 +1,93 @@
+import { ApplicationsPageClient } from './applications-page-client.js';
+import { ApplicationStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+const now = new Date().toISOString();
+const mockApps = [
+    {
+        id: '1',
+        name: 'Weather Dashboard',
+        slug: 'weather-dashboard',
+        description: 'Real-time weather forecasts with interactive maps and alerts',
+        repositoryPath: '/home/user/projects/weather-dashboard',
+        additionalPaths: [],
+        status: ApplicationStatus.Idle,
+        setupComplete: true,
+        effectiveStatus: 'ready',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '2',
+        name: 'Task Manager',
+        slug: 'task-manager',
+        description: 'Kanban-style task management with team collaboration features',
+        repositoryPath: '/home/user/projects/task-manager',
+        additionalPaths: ['/home/user/projects/shared-ui'],
+        status: ApplicationStatus.Active,
+        setupComplete: false,
+        effectiveStatus: 'building',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '3',
+        name: 'E-Commerce Store',
+        slug: 'ecommerce-store',
+        description: 'Full-featured online store with payments, inventory, and admin panel',
+        repositoryPath: '/home/user/projects/ecommerce',
+        additionalPaths: [],
+        status: ApplicationStatus.Error,
+        setupComplete: false,
+        effectiveStatus: 'failed',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '4',
+        name: 'Portfolio Site',
+        slug: 'portfolio-site',
+        description: 'Personal portfolio with blog and project showcase',
+        repositoryPath: '/home/user/projects/portfolio',
+        additionalPaths: [],
+        status: ApplicationStatus.Idle,
+        setupComplete: false,
+        effectiveStatus: 'interrupted',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '5',
+        name: 'Chat Application',
+        slug: 'chat-app',
+        description: 'Real-time messaging app with channels and direct messages',
+        repositoryPath: '/home/user/projects/chat-app',
+        additionalPaths: ['/home/user/projects/chat-api', '/home/user/projects/shared-types'],
+        status: ApplicationStatus.Idle,
+        setupComplete: true,
+        effectiveStatus: 'ready',
+        createdAt: now,
+        updatedAt: now,
+    },
+];
+const meta = {
+    title: 'Features/ApplicationsPageClient',
+    component: ApplicationsPageClient,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: { applications: mockApps },
+};
+export const Empty = {
+    args: { applications: [] },
+};
+export const SingleApp = {
+    args: { applications: [mockApps[0]] },
+};
+export const AllActive = {
+    args: {
+        applications: mockApps.map((app) => ({ ...app, status: ApplicationStatus.Active })),
+    },
+};

package/dist/src/presentation/web/components/features/chat/ChatComposer.d.ts

@@ -13,6 +13,8 @@ export interface ChatComposerProps {
     onPickFiles: () => void;
     /** Agent/model picker rendered in the controls row. */
     agentPicker?: React.ReactNode;
+    /** When true, the composer is visually disabled and input is blocked. */
+    disabled?: boolean;
 }
-export declare function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, disabled, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatComposer.d.ts.map

package/dist/src/presentation/web/components/features/chat/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatComposer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,WAAW,GACZ,EAAE,iBAAiB,2CAqFnB"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatComposer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,GACT,EAAE,iBAAiB,2CAuFnB"}

package/dist/src/presentation/web/components/features/chat/ChatComposer.js

@@ -7,11 +7,11 @@ import { SendHorizontal, CircleStop, Paperclip } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
 import { AttachmentChip } from '../../common/attachment-chip/index.js';
-export function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, }) {
+export function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, disabled, }) {
     const { t } = useTranslation('web');
     const [isFocused, setIsFocused] = useState(false);
     const containerRef = useRef(null);
-    return (_jsx(ComposerPrimitive.Root, { className: "shrink-0 border-t p-3", children: _jsx("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, className: cn('flex flex-col gap-1.5 rounded-md border-2 border-transparent p-1 transition-colors', isDragOver && 'border-primary/50 bg-primary/5'), children: _jsxs("div", { ref: containerRef, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn('border-input flex flex-col overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow]', isFocused && 'ring-ring/50 border-ring ring-[3px]'), children: [_jsx(ComposerPrimitive.Input, { rows: 1, autoFocus: true, placeholder: t('chat.writeMessage'), onPaste: onPaste, className: "max-h-[4.5rem] min-h-0 resize-none rounded-none border-0 px-3 py-2.5 text-sm shadow-none focus:outline-none focus-visible:ring-0" }), attachments.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-3 py-2", children: attachments.map((file) => (_jsx(AttachmentChip, { name: file.name, size: file.size, mimeType: file.mimeType, path: file.path, onRemove: () => onRemoveAttachment(file.id), loading: file.loading, notes: file.notes, onNotesChange: (notes) => onNotesChange(file.id, notes) }, file.id))) })) : null, uploadError ? _jsx("p", { className: "text-destructive px-3 pb-2 text-xs", children: uploadError }) : null, _jsxs("div", { className: "border-input flex items-center gap-3 border-t px-3 py-1.5", children: [agentPicker, _jsx("div", { className: "flex-1" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onPickFiles, "aria-label": t('chat.attachFiles'), className: "text-muted-foreground hover:text-foreground cursor-pointer rounded p-1 transition-colors", children: _jsx(Paperclip, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: t('chat.attachFiles') })] }), _jsx(ChatComposerAction, {})] })] }) }) }));
+    return (_jsx(ComposerPrimitive.Root, { className: cn('shrink-0 border-t p-3', disabled && 'pointer-events-none opacity-50'), children: _jsx("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, className: cn('flex flex-col gap-1.5 rounded-md border-2 border-transparent p-1 transition-colors', isDragOver && 'border-primary/50 bg-primary/5'), children: _jsxs("div", { ref: containerRef, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn('border-input flex flex-col overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow]', isFocused && 'ring-ring/50 border-ring ring-[3px]'), children: [_jsx(ComposerPrimitive.Input, { rows: 1, autoFocus: true, placeholder: t('chat.writeMessage'), onPaste: onPaste, className: "max-h-[4.5rem] min-h-0 resize-none rounded-none border-0 px-3 py-2.5 text-sm shadow-none focus:outline-none focus-visible:ring-0" }), attachments.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-3 py-2", children: attachments.map((file) => (_jsx(AttachmentChip, { name: file.name, size: file.size, mimeType: file.mimeType, path: file.path, onRemove: () => onRemoveAttachment(file.id), loading: file.loading, notes: file.notes, onNotesChange: (notes) => onNotesChange(file.id, notes) }, file.id))) })) : null, uploadError ? _jsx("p", { className: "text-destructive px-3 pb-2 text-xs", children: uploadError }) : null, _jsxs("div", { className: "border-input flex items-center gap-3 border-t px-3 py-1.5", children: [agentPicker, _jsx("div", { className: "flex-1" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onPickFiles, "aria-label": t('chat.attachFiles'), className: "text-muted-foreground hover:text-foreground cursor-pointer rounded p-1 transition-colors", children: _jsx(Paperclip, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: t('chat.attachFiles') })] }), _jsx(ChatComposerAction, {})] })] }) }) }));
 }
 function ChatComposerAction() {
     return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { className: cn('bg-primary text-primary-foreground inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md', 'hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-30', 'transition-colors'), children: _jsx(SendHorizontal, { className: "size-3.5" }) }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { className: cn('bg-destructive/10 text-destructive inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md', 'hover:bg-destructive/20', 'transition-colors'), children: _jsx(CircleStop, { className: "size-3.5" }) }) })] }));

package/dist/src/presentation/web/components/features/chat/ChatTab.d.ts

@@ -38,6 +38,8 @@ export interface ChatTabProps {
      * later.
      */
     workflowPlaceholder?: PlaceholderStep[];
+    /** Called when the user clicks Continue on an interrupted workflow step. */
+    onResumeWorkflow?: () => void;
 }
-export declare function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, onResumeWorkflow, }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatTab.d.ts.map

package/dist/src/presentation/web/components/features/chat/ChatTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sFAAsF,CAAC;AAUtH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC;CACzC;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,YAAY,2CAiLd"}
+{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sFAAsF,CAAC;AAUtH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC;IACxC,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,EAAE,YAAY,2CAoLd"}

package/dist/src/presentation/web/components/features/chat/ChatTab.js

@@ -14,7 +14,7 @@ import { ChatComposer } from './ChatComposer.js';
 import { InteractionBubble } from './InteractionBubble.js';
 import { StepTracker } from './StepTracker.js';
 const IS_DEV = process.env.NODE_ENV === 'development';
-export function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, }) {
+export function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, onResumeWorkflow, }) {
     const [overrideAgent, setOverrideAgent] = useState(initialAgent);
     const [overrideModel, setOverrideModel] = useState(initialModel);
     const [debugMode, setDebugMode] = useState(false);
@@ -85,11 +85,12 @@ export function ChatTab({ featureId, worktreePath, initialAgent, initialModel, i
             toolMessages: [],
         }));
     const showTracker = trackerSteps.length > 0;
-    const composer = (_jsx(ChatComposer, { attachments: att.attachments, isDragOver: att.isDragOver, uploadError: att.uploadError, onDragEnter: att.handleDragEnter, onDragLeave: att.handleDragLeave, onDragOver: att.handleDragOver, onDrop: att.handleDrop, onPaste: att.handlePaste, onRemoveAttachment: att.removeAttachment, onNotesChange: att.updateNotes, onPickFiles: handlePickFiles, agentPicker: _jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? 'claude-code', initialModel: overrideModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
+    const workflowInFlight = stepProgress.hasPlan === true && stepProgress.allDone !== true;
+    const composer = (_jsx(ChatComposer, { disabled: workflowInFlight, attachments: att.attachments, isDragOver: att.isDragOver, uploadError: att.uploadError, onDragEnter: att.handleDragEnter, onDragLeave: att.handleDragLeave, onDragOver: att.handleDragOver, onDrop: att.handleDrop, onPaste: att.handlePaste, onRemoveAttachment: att.removeAttachment, onNotesChange: att.updateNotes, onPickFiles: handlePickFiles, agentPicker: _jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? 'claude-code', initialModel: overrideModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
                 setOverrideAgent(agent);
                 setOverrideModel(model);
             }, className: "w-55" }) }));
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [hideHeader ? null : (_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, debugMode: debugMode, onDebugToggle: IS_DEV ? setDebugMode : undefined })), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer, hideEmpty: showTracker, beforeMessages: showTracker ? (_jsxs(_Fragment, { children: [initialRequestMessage ? (_jsx(InitialRequestBubble, { text: initialRequestMessage.content })) : null, _jsx(StepTracker, { steps: trackerSteps, collapsedSummary: stepProgress.hasPlan === true && stepProgress.allDone === true, activeStepId: stepProgress.activeStepId, liveStatus: stepProgress.liveStatus })] })) : undefined, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [hideHeader ? null : (_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, debugMode: debugMode, onDebugToggle: IS_DEV ? setDebugMode : undefined })), _jsx("div", { className: "flex min-h-0 flex-1 flex-col dark:bg-neutral-900/40", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer, hideEmpty: showTracker, beforeMessages: showTracker ? (_jsxs(_Fragment, { children: [initialRequestMessage ? (_jsx(InitialRequestBubble, { text: initialRequestMessage.content })) : null, _jsx(StepTracker, { steps: trackerSteps, collapsedSummary: stepProgress.hasPlan === true && stepProgress.allDone === true, activeStepId: stepProgress.activeStepId, liveStatus: stepProgress.liveStatus, onRetry: onResumeWorkflow })] })) : undefined, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
 }
 // ── Initial request bubble ──────────────────────────────────────────────────
 //

package/dist/src/presentation/web/components/features/chat/StepTracker.d.ts

@@ -23,6 +23,11 @@ export interface StepTrackerProps {
      * the running step card.
      */
     liveStatus?: string | null;
+    /**
+     * Called when the user clicks "Continue" on an interrupted step.
+     * Sends a message to the agent to resume from where it left off.
+     */
+    onRetry?: () => void;
 }
 /**
  * Vertical list of workflow step cards with a status indicator,
@@ -32,5 +37,5 @@ export interface StepTrackerProps {
  * while this step was active — the same bubble component the
  * regular thread would have used, just grouped by step.
  */
-export declare function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, }: StepTrackerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, onRetry, }: StepTrackerProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=StepTracker.d.ts.map

package/dist/src/presentation/web/components/features/chat/StepTracker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepTracker.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/StepTracker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAiC1D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,EAAE,gBAAgB,kDAwDlB"}
+{"version":3,"file":"StepTracker.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/StepTracker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAiC1D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,OAAO,GACR,EAAE,gBAAgB,kDAyDlB"}

package/dist/src/presentation/web/components/features/chat/StepTracker.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Collapsible } from 'radix-ui';
 import { Check, ChevronDown, ChevronRight, Circle, AlertTriangle } from 'lucide-react';
 import Markdown from 'react-markdown';
@@ -29,20 +29,20 @@ const markdownComponents = {
  * while this step was active — the same bubble component the
  * regular thread would have used, just grouped by step.
  */
-export function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, }) {
+export function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, onRetry, }) {
     const [expandedOverride, setExpandedOverride] = useState(false);
     if (steps.length === 0)
         return null;
     if (collapsedSummary && !expandedOverride) {
         const doneCount = steps.filter((s) => s.status === 'done').length;
-        return (_jsx("div", { className: cn('p-4', className), children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(true), className: "hover:bg-muted/40 border-border bg-background flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: "Initial setup complete" }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [doneCount, " of ", steps.length, " steps finished \u2014 click to review"] })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4 shrink-0" })] }) }));
+        return (_jsx("div", { className: cn('p-4', className), children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(true), className: "hover:bg-muted/40 border-border bg-background flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors dark:bg-neutral-800/50", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: "Initial setup complete" }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [doneCount, " of ", steps.length, " steps finished \u2014 click to review"] })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4 shrink-0" })] }) }));
     }
     return (_jsxs("ol", { className: cn('flex flex-col gap-2 p-4', className), children: [collapsedSummary ? (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(false), className: "text-muted-foreground hover:text-foreground mb-1 inline-flex items-center gap-1 text-[10px] tracking-wide uppercase", children: [_jsx(ChevronDown, { className: "h-3 w-3" }), "Collapse setup"] }) })) : null, steps.map((step, idx) => (
             // Each card fades + slides in on mount, briefly staggered so
             // the tracker assembles itself instead of popping in all at
             // once. Capped at 6 indexes so very long step lists don't
             // turn into a long cascade.
-            _jsx(StepCard, { step: step, liveStatus: step.definition.id === activeStepId ? (liveStatus ?? null) : null, mountIndex: idx }, step.definition.id)))] }));
+            _jsx(StepCard, { step: step, liveStatus: step.definition.id === activeStepId ? (liveStatus ?? null) : null, mountIndex: idx, onRetry: step.status === 'interrupted' ? onRetry : undefined }, step.definition.id)))] }));
 }
 function classifyMessages(messages) {
     const items = [];
@@ -59,9 +59,16 @@ function classifyMessages(messages) {
     }
     return items;
 }
-function StepCard({ step, liveStatus, mountIndex }) {
-    const [expanded, setExpanded] = useState(false);
-    const { status, definition, metadata, toolMessages } = step;
+function StepCard({ step, liveStatus, mountIndex, onRetry }) {
+    const [optimisticRunning, setOptimisticRunning] = useState(false);
+    // Clear optimistic override once the real status catches up
+    useEffect(() => {
+        if (step.status !== 'interrupted')
+            setOptimisticRunning(false);
+    }, [step.status]);
+    const status = optimisticRunning ? 'running' : step.status;
+    const [expanded, setExpanded] = useState(step.status === 'interrupted' || step.status === 'failed');
+    const { definition, metadata, toolMessages } = step;
     const details = readStringArray(metadata, 'details');
     const error = readString(metadata, 'error');
     const items = classifyMessages(toolMessages);
@@ -70,7 +77,7 @@ function StepCard({ step, liveStatus, mountIndex }) {
     // it is always a duplicate of the card header and is intentionally
     // NOT rendered — otherwise the expanded body would open with a copy
     // of the title right above the real content.
-    const hasBody = items.length > 0 || details.length > 0 || !!error;
+    const hasBody = items.length > 0 || details.length > 0 || !!error || status === 'interrupted';
     return (_jsx(Collapsible.Root, { asChild: true, open: expanded, onOpenChange: setExpanded, children: _jsxs("li", { className: cn(
             // `transition-colors` glides the border + background tint
             // when the status changes (pending → running → done) so the
@@ -84,23 +91,19 @@ function StepCard({ step, liveStatus, mountIndex }) {
             // finished cleanly" signal). The running card uses Shep's
             // indigo/violet brand accent so the in-progress step is
             // visually distinct from anything that has already completed.
-            status === 'running' && 'border-violet-500/40 bg-violet-500/5', status === 'done' && 'border-border bg-background', status === 'pending' && 'border-border/40 bg-muted/20', status === 'failed' && 'border-red-500/40 bg-red-500/5', status === 'interrupted' && 'border-amber-500/40 bg-amber-500/5'), style: { animationDelay: `${Math.min(mountIndex, 6) * 40}ms`, animationDuration: '300ms' }, children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: !hasBody, className: cn('flex w-full items-center gap-3 px-3 py-1.5 text-left transition-colors duration-200', hasBody && 'hover:bg-muted/40 cursor-pointer', !hasBody && 'cursor-default'), children: [_jsx(StatusIcon, { status: status }), _jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("span", { className: cn('shrink-0 truncate text-sm font-medium transition-colors duration-300', status === 'pending' && 'text-muted-foreground/60'), children: definition.title }), liveStatus && status === 'running' ? (
-                                    // While the step is running, the live status preempts
-                                    // the static description — same slot, more useful
-                                    // information. The only place agent in-flight activity
-                                    // surfaces while the workflow is active. Color matches
-                                    // the card accent (violet) so green stays exclusive to
-                                    // "done". `key={liveStatus}` retriggers the fade-in
-                                    // every time the status text rotates, so consecutive
-                                    // tool calls feel like they tick instead of swap.
-                                    _jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5 text-xs text-violet-700 dark:text-violet-300", children: [_jsx("span", { className: "inline-flex h-1 w-1 shrink-0 translate-y-[-1px] animate-pulse rounded-full bg-violet-500" }), _jsx("span", { className: "animate-in fade-in-0 slide-in-from-left-1 truncate duration-300", children: liveStatus }, liveStatus)] })) : definition.description ? (_jsx("span", { className: cn('min-w-0 truncate text-xs font-normal', status === 'pending' ? 'text-muted-foreground/40' : 'text-muted-foreground/70'), children: definition.description })) : null] }), items.length > 0 ? (_jsx("span", { className: "text-muted-foreground/60 animate-in fade-in-0 zoom-in-95 mr-1 shrink-0 text-[10px] tabular-nums duration-200", children: items.length }, items.length)) : null, hasBody ? (_jsx(ChevronRight, { className: cn('text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 ease-out', expanded && 'rotate-90') })) : null] }) }), _jsx(Collapsible.Content, { className: cn('overflow-hidden', 
+            status === 'running' && 'border-violet-500/40 bg-violet-500/5 dark:bg-violet-500/10', status === 'done' && 'border-border bg-background dark:bg-neutral-800/50', status === 'pending' && 'border-border/40 bg-muted/20 dark:bg-neutral-800/30', status === 'failed' && 'border-red-500/40 bg-red-500/5 dark:bg-red-500/10', status === 'interrupted' && 'border-amber-500/40 bg-amber-500/5 dark:bg-amber-500/10'), style: { animationDelay: `${Math.min(mountIndex, 6) * 40}ms`, animationDuration: '300ms' }, children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: !hasBody, className: cn('flex w-full items-center gap-3 px-3 py-1.5 text-left transition-colors duration-200', hasBody && 'hover:bg-muted/40 cursor-pointer', !hasBody && 'cursor-default'), children: [_jsx(StatusIcon, { status: status }), _jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("span", { className: cn('shrink-0 truncate text-sm font-medium transition-colors duration-300', status === 'pending' && 'text-muted-foreground/60'), children: definition.title }), status === 'interrupted' ? (_jsx("span", { className: "min-w-0 truncate text-xs font-medium text-amber-600 dark:text-amber-400", children: "Interrupted" })) : liveStatus && status === 'running' ? (_jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5 text-xs text-violet-700 dark:text-violet-300", children: [_jsx("span", { className: "inline-flex h-1 w-1 shrink-0 translate-y-[-1px] animate-pulse rounded-full bg-violet-500" }), _jsx("span", { className: "animate-in fade-in-0 slide-in-from-left-1 truncate duration-300", children: liveStatus }, liveStatus)] })) : definition.description ? (_jsx("span", { className: cn('min-w-0 truncate text-xs font-normal', status === 'pending' ? 'text-muted-foreground/40' : 'text-muted-foreground/70'), children: definition.description })) : null] }), items.length > 0 ? (_jsx("span", { className: "text-muted-foreground/60 animate-in fade-in-0 zoom-in-95 mr-1 shrink-0 text-[10px] tabular-nums duration-200", children: items.length }, items.length)) : null, hasBody ? (_jsx(ChevronRight, { className: cn('text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 ease-out', expanded && 'rotate-90') })) : null] }) }), _jsx(Collapsible.Content, { className: cn('overflow-hidden', 
                     // The keyframes (defined in globals.css) animate from
                     // height: 0 ↔ var(--radix-collapsible-content-height) so
                     // the body smoothly slides open and back. Both directions
                     // get matching cubic-bezier curves — one ease-out for
                     // open, one ease-in for close — so the motion never feels
                     // lopsided.
-                    'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'), children: _jsxs("div", { className: "border-border/40 space-y-2 border-t px-3 py-2.5 text-xs", children: [error ? (_jsx("p", { className: "rounded bg-red-500/10 p-2 text-red-600 dark:text-red-400", children: error })) : null, details.length > 0 ? (_jsx("ul", { className: "text-muted-foreground list-disc space-y-0.5 ps-4", children: details.map((d) => (_jsx("li", { children: d }, d))) })) : null, items.length > 0 ? (_jsx("div", { className: "-mx-1 flex flex-col gap-1", children: items.map((item, idx) => item.kind === 'tool' ? (_jsx("div", { className: "animate-in fade-in-0 slide-in-from-top-1 duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(ToolBubble, { text: item.message.content }) }, item.message.id)) : (_jsx("div", { className: "text-foreground animate-in fade-in-0 slide-in-from-top-1 px-1 text-xs leading-relaxed duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(Markdown, { components: markdownComponents, children: item.message.content }) }, item.message.id))) })) : null] }) })] }) }));
+                    'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'), children: _jsxs("div", { className: "border-border/40 space-y-2 border-t px-3 py-2.5 text-xs", children: [status === 'interrupted' && !error ? (_jsxs("div", { className: "flex items-center justify-between rounded bg-amber-500/10 p-2", children: [_jsx("span", { className: "text-amber-700 dark:text-amber-400", children: "This step was interrupted before it could finish." }), onRetry ? (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            setOptimisticRunning(true);
+                                            setExpanded(false);
+                                            onRetry();
+                                        }, className: "ms-3 shrink-0 cursor-pointer rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-1 text-[11px] font-medium text-amber-700 transition-colors hover:bg-amber-500/20 dark:text-amber-400", children: "Continue" })) : null] })) : null, error ? (_jsx("p", { className: "rounded bg-red-500/10 p-2 text-red-600 dark:text-red-400", children: error })) : null, details.length > 0 ? (_jsx("ul", { className: "text-muted-foreground list-disc space-y-0.5 ps-4", children: details.map((d) => (_jsx("li", { children: d }, d))) })) : null, items.length > 0 ? (_jsx("div", { className: "-mx-1 flex flex-col gap-1", children: items.map((item, idx) => item.kind === 'tool' ? (_jsx("div", { className: "animate-in fade-in-0 slide-in-from-top-1 duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(ToolBubble, { text: item.message.content }) }, item.message.id)) : (_jsx("div", { className: "text-foreground animate-in fade-in-0 slide-in-from-top-1 px-1 text-xs leading-relaxed duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(Markdown, { components: markdownComponents, children: item.message.content }) }, item.message.id))) })) : null] }) })] }) }));
 }
 function StatusIcon({ status }) {
     if (status === 'running') {
@@ -113,7 +116,7 @@ function StatusIcon({ status }) {
         return (_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-red-500 text-white", children: _jsx(AlertTriangle, { className: "h-2.5 w-2.5", strokeWidth: 3 }) }));
     }
     if (status === 'interrupted') {
-        return _jsx(AlertTriangle, { className: "h-4 w-4 shrink-0 text-amber-500" });
+        return (_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-amber-500 text-white", children: _jsx(AlertTriangle, { className: "h-2.5 w-2.5", strokeWidth: 3 }) }));
     }
     return _jsx(Circle, { className: "text-muted-foreground/30 h-4 w-4 shrink-0" });
 }

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAoBpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAoC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAulBzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAoBpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAoC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAylBzF"}