@shepai/cli 1.182.0 → 1.182.1-pr550.9abbae3

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

@@ -1,13 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import { ArrowLeft, LayoutGrid, GitBranch, Copy, FolderOpen, ClipboardList, Cpu, FilePlus, FilePen, } from 'lucide-react';
+import { LayoutGrid, GitBranch, Copy, FolderOpen, ClipboardList, Cpu, FilePlus, FilePen, Trash2, } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
 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 { ChatTab } from '../../features/chat/ChatTab.js';
 import { APPLICATION_CREATION_PLACEHOLDER_STEPS } from '../../features/chat/workflow-placeholder.js';
 import { TerminalTab } from '../../features/application-page/terminal-tab.js';
@@ -16,6 +18,7 @@ import { RunDevButton } from '../../features/application-page/run-dev-button.js'
 import { WebPreviewTab } from '../../features/application-page/web-preview-tab.js';
 import { useDeployAction } from '../../../hooks/use-deploy-action.js';
 import { useTurnStatus } from '../../../hooks/turn-statuses-provider.js';
+import { deriveAppLiveStatus } from '../../../lib/derive-app-status.js';
 import { chatQueryKey, fetchChatState } from '../../features/chat/chat-state-query.js';
 import { openFolder } from '../../../app/actions/open-folder.js';
 import { getApplicationDebugPrompt } from '../../../app/actions/get-application-debug-prompt.js';
@@ -35,35 +38,8 @@ const VIEW_LABELS = {
     terminal: 'Terminal',
     web: 'Web',
 };
-/**
- * Derive a single effective status label + dot color. "Idle" is
- * never shown. MUST match the priority order in
- * `components/common/application-node/application-node.tsx` so the
- * canvas card and the application page agree on every parameter.
- *
- * Priority (highest wins):
- *
- *   - `processing`      → "In Progress"  (agent actively running a turn)
- *   - `awaiting_input`  → "Warning"      (agent blocked on user question)
- *   - deployReady       → "Live"         (dev server running at a real URL)
- *   - persisted Error   → "Error"
- *   - otherwise         → "Ready"        (agent finished, preview not running)
- */
-function deriveLiveStatusPill(persistedStatus, turnStatus, deployReady) {
-    if (turnStatus === 'processing') {
-        return { label: 'In Progress', dotClass: 'bg-violet-500', pulse: true };
-    }
-    if (turnStatus === 'awaiting_input') {
-        return { label: 'Warning', dotClass: 'bg-amber-500', pulse: true };
-    }
-    if (deployReady) {
-        return { label: 'Live', dotClass: 'bg-emerald-500', pulse: true };
-    }
-    if (persistedStatus === 'Error') {
-        return { label: 'Error', dotClass: 'bg-red-500', pulse: false };
-    }
-    return { label: 'Ready', dotClass: 'bg-sky-500', pulse: false };
-}
+/* Status derivation is shared with canvas nodes and application cards
+ * via `lib/derive-app-status.ts` — single source of truth. */
 /* ------------------------------------------------------------------ */
 /*  Short path helper                                                  */
 /* ------------------------------------------------------------------ */
@@ -73,8 +49,8 @@ function shortPath(path) {
     const idx = normalized.lastIndexOf('/');
     return idx === -1 ? normalized : normalized.slice(idx + 1);
 }
-function AppTopBar({ application, activeView, onViewChange, onBack, initialChatState, deploy, }) {
-    return (_jsxs("header", { className: cn('bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-20 flex shrink-0 items-center gap-2 border-b px-3 backdrop-blur', TOP_BAR_HEIGHT_CLASS), children: [_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Back to canvas", onClick: onBack, className: "h-7 w-7", children: _jsx(ArrowLeft, { className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-500", children: _jsx(LayoutGrid, { className: "h-3 w-3 text-white" }) }), _jsx("h1", { className: "min-w-0 truncate text-sm font-semibold", children: application.name }), _jsx(StatusPill, { applicationId: application.id, persistedStatus: application.status, deployReady: deploy.status === DeploymentState.Ready }), _jsx(Divider, {}), _jsx(PathCluster, { repositoryPath: application.repositoryPath }), _jsx("div", { className: "flex-1" }), _jsx(SessionChip, { featureId: `app-${application.id}`, initialChatState: initialChatState }), _jsx(CopyPromptButton, { applicationId: application.id }), _jsx(RunDevButton, { deploy: deploy }), _jsx(ViewSwitcher, { active: activeView, onChange: onViewChange })] }));
+function AppTopBar({ application, activeView, onViewChange, agentRunning, initialChatState, deploy, }) {
+    return (_jsxs("header", { className: cn('bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-20 flex shrink-0 items-center gap-2 border-b px-3 backdrop-blur', TOP_BAR_HEIGHT_CLASS), children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-500", children: _jsx(LayoutGrid, { className: "h-3 w-3 text-white" }) }), _jsx("h1", { className: "min-w-0 truncate text-sm font-semibold", children: application.name }), _jsx(StatusPill, { applicationId: application.id, persistedStatus: application.status, deployReady: deploy.status === DeploymentState.Ready }), _jsx(Divider, {}), _jsx(PathCluster, { repositoryPath: application.repositoryPath }), _jsx("div", { className: "flex-1" }), _jsx(SessionChip, { featureId: `app-${application.id}`, initialChatState: initialChatState, persistedSessionId: application.agentSessionId }), _jsx(CopyPromptButton, { applicationId: application.id }), _jsx(DeleteButton, { applicationId: application.id, applicationName: application.name }), _jsx(RunDevButton, { deploy: deploy, disabled: agentRunning }), _jsx(ViewSwitcher, { active: activeView, onChange: onViewChange, disabledTabs: agentRunning ? ['web'] : [] })] }));
 }
 /* ------------------------------------------------------------------ */
 /*  Path cluster — short path + copy + open-in-file-manager            */
@@ -135,12 +111,7 @@ function GitStatusCluster({ repositoryPath }) {
 /* ------------------------------------------------------------------ */
 /*  Session chip — model + short session id, live via shared query     */
 /* ------------------------------------------------------------------ */
-function SessionChip({ featureId, initialChatState, }) {
-    // Reads from the SAME TanStack Query cache entry the chat tab uses.
-    // The `message`/`session_status`/`turn_status` SSE events inside
-    // ChatTab's useChatRuntime mutate this cache directly, so the chip
-    // updates live as the session transitions booting → ready and the
-    // SDK reports back its assigned session id.
+function SessionChip({ featureId, initialChatState, persistedSessionId, }) {
     const { data: chatState } = useQuery({
         queryKey: chatQueryKey(featureId),
         queryFn: () => fetchChatState(featureId),
@@ -150,7 +121,9 @@ function SessionChip({ featureId, initialChatState, }) {
         refetchOnReconnect: false,
     });
     const sessionInfo = chatState?.sessionInfo;
-    const sessionId = sessionInfo?.sessionId ?? null;
+    // Prefer the persisted ID from the Application entity (always available),
+    // fall back to the live session info (only available while session is active).
+    const sessionId = persistedSessionId ?? sessionInfo?.sessionId ?? null;
     const model = sessionInfo?.model ?? null;
     const shortId = sessionId ? sessionId.slice(0, 8) : null;
     const handleCopy = useCallback(async () => {
@@ -201,6 +174,21 @@ function CopyPromptButton({ applicationId }) {
     }, [applicationId, busy]);
     return (_jsx(Button, { variant: "ghost", size: "icon", onClick: handleClick, disabled: busy, className: "text-muted-foreground hover:text-foreground h-7 w-7", "aria-label": "Copy full generated prompt (debug)", title: "Copy full generated prompt (debug) \u2014 system + user message", children: _jsx(ClipboardList, { className: "h-3.5 w-3.5" }) }));
 }
+function DeleteButton({ applicationId, applicationName, }) {
+    const router = useRouter();
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => setConfirmOpen(true), className: "text-muted-foreground hover:text-destructive h-7 w-7", "aria-label": "Delete application", title: "Delete application", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }), _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: applicationName }), "."] })] }), _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(applicationId);
+                                        if (result.error) {
+                                            toast.error('Failed to delete', { description: result.error });
+                                        }
+                                        else {
+                                            toast.success('Application deleted');
+                                            router.push('/applications');
+                                        }
+                                    }, children: "Delete" })] })] }) })] }));
+}
 function StatusPill({ applicationId, persistedStatus, deployReady, }) {
     // Read live turn status from the global SSE subscription and fold
     // it PLUS the dev-server deploy state onto the persisted status so
@@ -208,18 +196,19 @@ function StatusPill({ applicationId, persistedStatus, deployReady, }) {
     // "Unread" / "Live") instead of being stuck at the coarse DB
     // snapshot which almost always reads "Idle".
     const turnStatus = useTurnStatus(`app-${applicationId}`);
-    const live = deriveLiveStatusPill(persistedStatus, turnStatus, deployReady);
+    const live = deriveAppLiveStatus(persistedStatus, turnStatus, deployReady);
     return (_jsxs("span", { className: "border-border/60 inline-flex h-5 shrink-0 items-center gap-1 rounded-full border px-2 text-[10px] font-medium tracking-wide uppercase", children: [_jsx("span", { className: cn('relative flex h-1.5 w-1.5 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 }), live.label] }));
 }
 function Divider() {
     return _jsx("span", { className: "bg-border/60 mx-1 h-4 w-px shrink-0" });
 }
-function ViewSwitcher({ active, onChange, }) {
+function ViewSwitcher({ active, onChange, disabledTabs = [], }) {
     return (_jsx("div", { role: "tablist", "aria-label": "Right pane view", className: "bg-muted/60 flex items-center rounded-md p-0.5", children: VIEW_TABS.map((v) => {
             const selected = v === active;
-            return (_jsx("button", { type: "button", role: "tab", "aria-selected": selected, onClick: () => onChange(v), className: cn('h-6 cursor-pointer rounded-sm px-2.5 text-[11px] font-medium transition-colors', selected
+            const disabled = disabledTabs.includes(v);
+            return (_jsx("button", { type: "button", role: "tab", "aria-selected": selected, "aria-disabled": disabled, disabled: disabled, onClick: () => onChange(v), className: cn('h-6 rounded-sm px-2.5 text-[11px] font-medium transition-colors', disabled ? 'text-muted-foreground/40 cursor-not-allowed' : 'cursor-pointer', !disabled && selected
                     ? 'bg-background text-foreground shadow-sm'
-                    : 'text-muted-foreground hover:text-foreground'), children: VIEW_LABELS[v] }, v));
+                    : !disabled && 'text-muted-foreground hover:text-foreground'), children: VIEW_LABELS[v] }, v));
         }) }));
 }
 /* ------------------------------------------------------------------ */
@@ -271,7 +260,6 @@ function ViewBody({ activeView, applicationId, terminalCwd, deploy, }) {
     return (_jsxs("div", { className: "relative flex min-h-0 flex-1", children: [_jsx("div", { className: cn('absolute inset-0 flex min-h-0 flex-col', activeView === 'terminal' ? 'visible' : 'pointer-events-none invisible'), "aria-hidden": activeView !== 'terminal', children: _jsx(TerminalTab, { cwd: terminalCwd }) }), _jsx("div", { className: cn('absolute inset-0 flex min-h-0 flex-col', activeView === 'ide' ? 'visible' : 'pointer-events-none invisible'), "aria-hidden": activeView !== 'ide', children: _jsx(IdeTab, { applicationId: applicationId }) }), hasWebContent ? (_jsx("div", { className: cn('absolute inset-0 flex min-h-0 flex-col', activeView === 'web' ? 'visible' : 'pointer-events-none invisible'), "aria-hidden": activeView !== 'web', children: _jsx(WebPreviewTab, { deploy: deploy }) })) : (activeView === 'web' && _jsx(WebPreviewTab, { deploy: deploy }))] }));
 }
 export function ApplicationPage({ application, initialChatState }) {
-    const router = useRouter();
     const [activeView, setActiveView] = useState('ide');
     // Hoisted dev-server state — subscribes to the shared
     // DeploymentStatusProvider scoped to this application's id. The server
@@ -285,6 +273,39 @@ export function ApplicationPage({ application, initialChatState }) {
         targetType: 'application',
         repositoryPath: application.repositoryPath,
     });
+    // ── Agent-running detection ────────────────────────────────
+    // While the agent is processing, the dev server is likely being
+    // modified — disable preview and auto-restart when done.
+    const turnStatus = useTurnStatus(`app-${application.id}`);
+    const agentRunning = turnStatus === 'processing';
+    const prevAgentRunningRef = useRef(false);
+    // Track whether the dev server was running before the agent started,
+    // so we only restart it (not cold-start) after the agent finishes.
+    const wasRunningBeforeAgentRef = useRef(false);
+    useEffect(() => {
+        const wasRunning = prevAgentRunningRef.current;
+        prevAgentRunningRef.current = agentRunning;
+        if (agentRunning && !wasRunning) {
+            // Agent just started — stop the dev server if running, remember
+            // that it was running so we can restart after.
+            if (deploy.status === DeploymentState.Ready || deploy.status === DeploymentState.Booting) {
+                wasRunningBeforeAgentRef.current = true;
+                void deploy.stop();
+            }
+            // Switch away from web tab while agent works
+            if (activeView === 'web') {
+                setActiveView('ide');
+            }
+        }
+        if (!agentRunning && wasRunning) {
+            // Agent just finished — restart the dev server if it was
+            // previously running.
+            if (wasRunningBeforeAgentRef.current) {
+                wasRunningBeforeAgentRef.current = false;
+                void deploy.deploy();
+            }
+        }
+    }, [agentRunning, deploy, activeView]);
     // When the dev server transitions to Ready, auto-switch the right
     // pane to the Web tab the first time it happens so the user
     // immediately sees their app without an extra click. Only triggers
@@ -299,15 +320,15 @@ export function ApplicationPage({ application, initialChatState }) {
             hasAutoSwitchedRef.current = false;
         }
     }, [deploy.status, deploy.url]);
-    // Back → control center. We navigate AND refresh so the dashboard layout
-    // re-runs `getGraphData()` server-side. Without `router.refresh()` the
-    // App Router serves the cached RSC from when the user was last on `/`,
-    // which does NOT include the application they just created.
-    const handleBack = useCallback(() => {
-        router.push('/');
-        router.refresh();
-    }, [router]);
-    return (_jsxs("div", { className: "bg-background flex h-dvh flex-col", children: [_jsx(AppTopBar, { application: application, activeView: activeView, onViewChange: setActiveView, onBack: handleBack, initialChatState: initialChatState, deploy: deploy }), _jsx(ResizableSplit, { left: _jsx(ChatTab, { featureId: `app-${application.id}`, worktreePath: application.repositoryPath, initialAgent: application.agentType, initialModel: application.modelOverride, initialChatState: initialChatState, hideHeader: true, workflowPlaceholder: APPLICATION_CREATION_PLACEHOLDER_STEPS, onAllStepsComplete: () => {
+    // Prevent switching to web tab while agent is running
+    const handleViewChange = useCallback((view) => {
+        if (view === 'web' && agentRunning)
+            return;
+        setActiveView(view);
+    }, [agentRunning]);
+    return (_jsxs("div", { className: "bg-background flex h-dvh flex-col", children: [_jsx(AppTopBar, { application: application, activeView: activeView, onViewChange: handleViewChange, agentRunning: agentRunning, initialChatState: initialChatState, deploy: deploy }), _jsx(ResizableSplit, { left: _jsx(ChatTab, { featureId: `app-${application.id}`, worktreePath: application.repositoryPath, initialAgent: application.agentType, initialModel: application.modelOverride, initialChatState: initialChatState, hideHeader: true, workflowPlaceholder: APPLICATION_CREATION_PLACEHOLDER_STEPS, onResumeWorkflow: () => {
+                        void fetch(`/api/applications/${application.id}/resume`, { method: 'POST' });
+                    }, onAllStepsComplete: () => {
                         // Kick off the dev server as soon as the agent has
                         // finished the scaffold workflow. The Idle→Ready
                         // transition in the deploy hook then auto-switches

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

@@ -1 +1 @@
-{"version":3,"file":"application-page.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/application-page/application-page.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAgBrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAOtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC"}
+{"version":3,"file":"application-page.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/application-page/application-page.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAiBrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAOtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC"}

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

@@ -8,6 +8,7 @@ const baseApp = {
     repositoryPath: '/home/user/projects/my-todo-app',
     additionalPaths: [],
     status: ApplicationStatus.Idle,
+    setupComplete: false,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
 };

package/dist/src/presentation/web/components/features/application-page/run-dev-button.d.ts

@@ -2,6 +2,8 @@ import type { DeployActionState } from '../../../hooks/use-deploy-action.js';
 export interface RunDevButtonProps {
     deploy: DeployActionState;
     className?: string;
+    /** When true the button is grayed out and non-interactive (e.g. agent is running). */
+    disabled?: boolean;
     /**
      * Visual density of the Ready state.
      *
@@ -15,5 +17,5 @@ export interface RunDevButtonProps {
      */
     variant?: 'full' | 'compact';
 }
-export declare function RunDevButton({ deploy, className, variant }: RunDevButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function RunDevButton({ deploy, className, disabled, variant }: RunDevButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=run-dev-button.d.ts.map

package/dist/src/presentation/web/components/features/application-page/run-dev-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"run-dev-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/application-page/run-dev-button.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,OAAgB,EAAE,EAAE,iBAAiB,2CAuJtF"}
+{"version":3,"file":"run-dev-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/application-page/run-dev-button.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAgB,EAAE,EAAE,iBAAiB,2CA+JhG"}

package/dist/src/presentation/web/components/features/application-page/run-dev-button.js

@@ -33,7 +33,7 @@ import { useCallback } from 'react';
 import { Play, Square, Loader2, TriangleAlert, ExternalLink } from 'lucide-react';
 import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { cn } from '../../../lib/utils.js';
-export function RunDevButton({ deploy, className, variant = 'full' }) {
+export function RunDevButton({ deploy, className, disabled, variant = 'full' }) {
     const openUrl = useCallback(() => {
         if (deploy.url)
             window.open(deploy.url, '_blank', 'noopener,noreferrer');
@@ -76,5 +76,9 @@ export function RunDevButton({ deploy, className, variant = 'full' }) {
     // ────────────────────────────────────────────────────────────
     // Idle — default "Preview" button (Shep AI purple)
     // ────────────────────────────────────────────────────────────
-    return (_jsxs("button", { type: "button", onClick: deploy.deploy, className: cn('inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border border-violet-500/50 bg-gradient-to-br from-indigo-500/15 to-violet-500/20 px-2.5 text-[11px] font-medium text-violet-700 transition-colors hover:from-indigo-500/25 hover:to-violet-500/30 dark:text-violet-300', className), title: "Install dependencies and preview the app", "aria-label": "Preview app", children: [_jsx(Play, { className: "h-3 w-3 fill-current" }), _jsx("span", { children: "Preview" })] }));
+    return (_jsxs("button", { type: "button", onClick: deploy.deploy, disabled: disabled, className: cn('inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border px-2.5 text-[11px] font-medium transition-colors', disabled
+            ? 'border-border bg-muted text-muted-foreground/40 cursor-not-allowed'
+            : 'border-violet-500/50 bg-gradient-to-br from-indigo-500/15 to-violet-500/20 text-violet-700 hover:from-indigo-500/25 hover:to-violet-500/30 dark:text-violet-300', className), title: disabled
+            ? 'Preview disabled while agent is running'
+            : 'Install dependencies and preview the app', "aria-label": "Preview app", children: [_jsx(Play, { className: "h-3 w-3 fill-current" }), _jsx("span", { children: "Preview" })] }));
 }

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

@@ -0,0 +1,7 @@
+import type { ApplicationWithStatus } from '../../../../../../packages/core/src/application/use-cases/applications/list-applications.use-case.js';
+export interface ApplicationCardProps {
+    application: ApplicationWithStatus;
+    className?: string;
+}
+export declare function ApplicationCard({ application, className }: ApplicationCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=application-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"application-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/applications/application-card.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4EAA4E,CAAC;AAExH,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,qBAAqB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CA0O/E"}

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"}