@shepai/cli 1.179.1 → 1.180.0

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

@@ -0,0 +1,156 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { ExternalLink, LayoutGrid, Loader2, Play, Square, Trash2, TriangleAlert, } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { cn } from '../../../lib/utils.js';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
+import { Button } from '../../ui/button.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.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';
+/** Preview slot height. Roomier than the old 120px to give the live
+ *  iframe / start-preview CTA more presence on the canvas. */
+const PREVIEW_HEIGHT_PX = 180;
+/**
+ * Pick the effective status for the card's status pill. "Idle" is
+ * never shown. The fallback when nothing is actively happening is
+ * "Ready" (standby) — unless the dev server is running, in which
+ * case "Live" takes over as the persistent resting state.
+ *
+ * Priority (highest wins):
+ *
+ *   - `processing`      → "In Progress"  (agent actively running a turn)
+ *   - `awaiting_input`  → "Warning"      (agent blocked on user question)
+ *   - deploymentUrl set → "Live"         (dev server running at a real URL)
+ *   - persisted Error   → "Error"
+ *   - otherwise         → "Ready"        (agent finished, preview not running)
+ *
+ * Note the `unread` turn status intentionally collapses into the
+ * default branch — when the agent just finished a turn but the user
+ * hasn't scrolled back to read it, we still show Ready (or Live if
+ * the dev server is up). The user is already looking at the card,
+ * a "you have unread output" nag adds no information.
+ */
+function deriveLiveStatus(persistedStatus, turnStatus, deploymentUrl) {
+    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 (deploymentUrl) {
+        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 };
+}
+export function ApplicationNode({ data, selected, }) {
+    const { i18n } = useTranslation('web');
+    const isRtl = i18n.dir() === 'rtl';
+    const targetHandlePos = isRtl ? Position.Right : Position.Left;
+    const sourceHandlePos = isRtl ? Position.Left : Position.Right;
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const totalRepoCount = 1 + data.additionalPathCount;
+    const repoCountLabel = totalRepoCount === 1 ? '1 repository' : `${totalRepoCount} repositories`;
+    // Live session turn status from the global SSE subscription. The
+    // scope key is `app-<id>` — same key used everywhere else the
+    // application's chat is referenced.
+    const turnStatus = useTurnStatus(`app-${data.id}`);
+    // Shared dev-server deploy state — one per card. Subscribes to the
+    // `DeploymentStatusProvider` which is SSR-seeded in the dashboard
+    // layout from `ListDeploymentsUseCase`, so running apps render as
+    // "Live" on the first paint without a client round-trip.
+    //
+    // The card's Preview button drives this hook and the `live.label`
+    // below is derived from the SAME state (via `deploy.url`), so the
+    // status pill, the preview slot, and the button are always in
+    // sync — hitting the button on one card can never leave the card
+    // itself showing a stale "Ready" state.
+    const deploy = useDeployAction({
+        targetId: data.id,
+        targetType: 'application',
+        repositoryPath: data.repositoryPath,
+    });
+    // The hook is the single source of truth for the running URL.
+    //
+    // The shared `DeploymentStatusProvider` is seeded from SSR
+    // (`get-graph-data` → `ListDeploymentsUseCase`) so the entry for
+    // this application is already populated on the first client render,
+    // and `ensureHydrated` catches anything the SSR seed missed. On
+    // Stop the hook clears `deploy.url` to null which immediately
+    // collapses the pill from "Live" back to "Ready" — there is
+    // intentionally no secondary snapshot URL that could stay stale.
+    const effectiveDeploymentUrl = deploy.url;
+    const live = deriveLiveStatus(data.status, turnStatus, effectiveDeploymentUrl ?? undefined);
+    // Clicking anything in the "card controls" zone (Preview button,
+    // open-in-new-tab) must not trigger the card's navigation-to-app
+    // click handler. A single stopPropagation wrapper keeps every
+    // control inside the card safe without individually guarding each
+    // one.
+    const stopCardClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const openPreviewInNewTab = useCallback((e) => {
+        e.stopPropagation();
+        if (effectiveDeploymentUrl) {
+            window.open(effectiveDeploymentUrl, '_blank', 'noopener,noreferrer');
+        }
+    }, [effectiveDeploymentUrl]);
+    return (_jsxs("div", { className: "group relative", style: { direction: isRtl ? 'rtl' : 'ltr' }, children: [_jsx(Handle, { type: "target", position: targetHandlePos, isConnectable: false, className: "opacity-0!", style: { top: 70 } }), data.onDelete && data.id ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute -start-14 top-0 bottom-0 flex items-center justify-center ps-4 pe-3 opacity-0 transition-opacity group-hover:opacity-100", onPointerDown: (e) => e.stopPropagation(), children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Remove application", "data-testid": "application-node-delete-button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                setConfirmOpen(true);
+                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Remove application" })] }) }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-xs", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Remove application?" }), _jsxs(DialogDescription, { children: ["This will remove ", _jsx("strong", { children: data.name }), " from your workspace."] })] }), _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: () => {
+                                                setConfirmOpen(false);
+                                                data.onDelete?.(data.id);
+                                            }, children: "Remove" })] })] }) })] })) : null, _jsxs("div", { role: "button", tabIndex: 0, "data-testid": "application-node-card", "data-app-name": data.name, onClick: (e) => {
+                    e.stopPropagation();
+                    data.onClick?.();
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        data.onClick?.();
+                    }
+                }, className: cn('nodrag bg-card flex w-[26rem] cursor-pointer flex-col overflow-hidden rounded-xl border shadow-sm transition-[border-color,box-shadow] duration-200 dark:bg-neutral-800/80', selected && 'border-blue-400 dark:border-amber-500/60'), children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", 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" }) }), _jsx("span", { "data-testid": "application-node-name", className: "min-w-0 truncate text-sm font-medium", children: data.name }), _jsxs("span", { className: "ms-auto flex shrink-0 items-center gap-1.5", children: [_jsx("span", { "data-testid": "application-node-status-dot", 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", { "data-testid": "application-node-status-text", className: "text-muted-foreground text-xs", children: live.label })] })] }), _jsx("div", { className: "px-4 pb-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: `${data.name} live preview`, 
+                                    // 2.5× inner size scaled to 0.4 = exactly 1.0
+                                    // effective size. The iframe renders at a real
+                                    // browser viewport (good enough for responsive
+                                    // landing pages) and gets scaled into our slot.
+                                    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)',
+                                    }, 
+                                    // Run the app in a sandbox with only what a static
+                                    // Vite dev bundle needs: same-origin (for HMR
+                                    // websockets on localhost) + script execution. No
+                                    // form submission, no top-level navigation, no
+                                    // modal dialogs.
+                                    sandbox: "allow-same-origin allow-scripts", loading: "lazy" })) : (
+                                // Offline underlay — grayed wireframe (placeholder for
+                                // a real captured screenshot, see TODO in the
+                                // components/config comment). Grayscale + low opacity
+                                // signals "this is not a live image".
+                                _jsxs("div", { className: "pointer-events-none absolute inset-0 opacity-50 grayscale", children: [_jsxs("div", { className: "flex h-6 items-center gap-2 px-2", style: { background: 'var(--muted)' }, children: [_jsx("div", { className: "bg-muted-foreground/10 h-2 w-2 rounded-full" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-2 rounded-full" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-2 rounded-full" }), _jsx("div", { className: "bg-muted-foreground/10 ms-2 h-2 w-16 rounded" })] }), _jsxs("div", { className: "flex h-[calc(100%-1.5rem)]", children: [_jsxs("div", { className: "border-muted-foreground/5 flex w-[50px] flex-col gap-2 border-e p-2", children: [_jsx("div", { className: "bg-muted-foreground/10 h-2 w-full rounded" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-3/4 rounded" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-full rounded" })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-2 p-3", children: [_jsx("div", { className: "bg-muted-foreground/10 h-2.5 w-2/3 rounded" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-full rounded" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-5/6 rounded" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-3/4 rounded" }), _jsx("div", { className: "bg-muted-foreground/10 h-2 w-2/3 rounded" })] })] })] })), 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", onPointerDown: stopCardClick, onClick: stopCardClick, children: [_jsxs("button", { type: "button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                void deploy.stop();
+                                            }, disabled: deploy.stopLoading, "aria-label": "Stop dev server", title: "Stop dev server", className: "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-md border border-neutral-300 bg-white px-3 text-xs 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.5 w-3.5 animate-spin" })) : (_jsx(Square, { className: "h-3.5 w-3.5 fill-current" })), _jsx("span", { children: "Stop" })] }), _jsxs("button", { type: "button", onClick: openPreviewInNewTab, "aria-label": `Open ${data.name} in a new tab`, title: effectiveDeploymentUrl, className: "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-md border border-neutral-300 bg-white px-3 text-xs 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.5 w-3.5" }), _jsx("span", { children: "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-8 w-8 animate-spin text-amber-500" }), _jsx("span", { className: "text-foreground text-xs font-medium", children: "Starting\u2026" })] })) : null, deploy.stopLoading && deploy.status === DeploymentState.Ready ? (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-neutral-900/75 dark:bg-neutral-950/80", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-neutral-100" }), _jsx("span", { className: "text-xs font-medium text-neutral-100", children: "Stopping\u2026" })] })) : null, !deploy.deployLoading &&
+                                    !deploy.stopLoading &&
+                                    deploy.status !== DeploymentState.Booting &&
+                                    deploy.status !== DeploymentState.Ready &&
+                                    deploy.deployError ? (_jsxs("button", { type: "button", onClick: (e) => {
+                                        e.stopPropagation();
+                                        void deploy.deploy();
+                                    }, onPointerDown: stopCardClick, className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-neutral-100 transition-colors hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800", children: [_jsx(TriangleAlert, { className: "h-8 w-8 text-red-500" }), _jsx("span", { className: "text-xs font-medium text-red-600 dark:text-red-400", children: "Failed \u2014 click to retry" })] })) : null, !effectiveDeploymentUrl &&
+                                    !deploy.deployLoading &&
+                                    deploy.status !== DeploymentState.Booting &&
+                                    !deploy.deployError && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center 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();
+                                        }, onPointerDown: stopCardClick, className: "inline-flex h-9 items-center gap-2 rounded-md border border-violet-400 bg-gradient-to-br from-indigo-500 to-violet-600 px-4 text-xs font-semibold text-white shadow-md transition-[filter] hover:brightness-110", "aria-label": "Start dev server preview", children: [_jsx(Play, { className: "h-3.5 w-3.5 fill-current" }), _jsx("span", { children: "Start Preview" })] }) }))] }) }), _jsx("div", { className: "px-4 pb-4", children: _jsx("span", { "data-testid": "application-node-repo-count", className: "text-muted-foreground text-xs", children: repoCountLabel }) })] }), _jsx(Handle, { type: "source", position: sourceHandlePos, isConnectable: false, className: "opacity-0!", style: { top: 70 } })] }));
+}

package/dist/src/presentation/web/components/common/application-node/application-node.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ApplicationNodeData } from './application-node-config.js';
+declare const meta: Meta<ApplicationNodeData>;
+export default meta;
+type Story = StoryObj<ApplicationNodeData>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const Error: Story;
+export declare const WithDeleteButton: Story;
+export declare const LongName: Story;
+export declare const Multiple: Story;
+//# sourceMappingURL=application-node.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"application-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/application-node/application-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,mBAAmB,EAAuB,MAAM,2BAA2B,CAAC;AAgC1F,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAcnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAqCF,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAC"}

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ReactFlowProvider, ReactFlow } from '@xyflow/react';
+import { ApplicationNode } from './application-node.js';
+const nodeTypes = { applicationNode: ApplicationNode };
+function ApplicationNodeCanvas({ data, style = { width: 550, height: 350 }, }) {
+    const nodes = useMemo(() => [{ id: 'node-1', type: 'applicationNode', position: { x: 0, y: 0 }, data }], [data]);
+    return (_jsx("div", { style: style, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+}
+const meta = {
+    title: 'Composed/ApplicationNode',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        id: 'app-1',
+        name: 'Dashboard App',
+        description: 'Main web dashboard for analytics',
+        status: 'Idle',
+        repositoryPath: '/home/user/dashboard-app',
+        additionalPathCount: 0,
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
+};
+export const Active = {
+    args: {
+        status: 'Active',
+    },
+    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
+};
+export const Error = {
+    args: {
+        status: 'Error',
+    },
+    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
+};
+export const WithDeleteButton = {
+    args: {
+        id: 'app-abc-123',
+    },
+    argTypes: {
+        onDelete: { action: 'onDelete' },
+    },
+    render: (args) => _jsx(ApplicationNodeCanvas, { data: args, style: { width: 600, height: 350 } }),
+};
+export const LongName = {
+    args: {
+        name: 'A Very Long Application Name That Should Truncate Nicely In The Card Header',
+    },
+    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
+};
+const multipleApps = [
+    {
+        id: 'app-1',
+        name: 'Dashboard App',
+        description: 'Main web dashboard for analytics',
+        status: 'Active',
+        repositoryPath: '/home/user/dashboard-app',
+        additionalPathCount: 0,
+    },
+    {
+        id: 'app-2',
+        name: 'Auth Service',
+        description: 'Authentication microservice',
+        status: 'Idle',
+        repositoryPath: '/home/user/auth-service',
+        additionalPathCount: 2,
+    },
+    {
+        id: 'app-3',
+        name: 'Payment Gateway',
+        description: 'Payment processing service',
+        status: 'Error',
+        repositoryPath: '/home/user/payment-gateway',
+        additionalPathCount: 0,
+    },
+    {
+        id: 'app-4',
+        name: 'Mobile API',
+        description: 'REST API for mobile clients',
+        status: 'Active',
+        repositoryPath: '/home/user/mobile-api',
+        additionalPathCount: 1,
+    },
+];
+export const Multiple = {
+    render: () => {
+        const nodes = multipleApps.map((data, i) => ({
+            id: `app-${i}`,
+            type: 'applicationNode',
+            position: { x: 0, y: i * 220 },
+            data,
+        }));
+        return (_jsx("div", { style: { width: 600, height: 950 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+    },
+};

package/dist/src/presentation/web/components/common/attachment-chip/attachment-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-chip.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/attachment-chip/attachment-chip.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,aAAa,GACd,EAAE,mBAAmB,2CAgIrB"}
+{"version":3,"file":"attachment-chip.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/attachment-chip/attachment-chip.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,aAAa,GACd,EAAE,mBAAmB,2CAkIrB"}

package/dist/src/presentation/web/components/common/attachment-chip/attachment-chip.js

@@ -31,7 +31,7 @@ export function AttachmentChip({ name, size, mimeType, path, onRemove, loading =
     }
     if (imageFile) {
         const thumbnail = (_jsxs("button", { type: "button", className: "relative block cursor-pointer rounded-md", children: [_jsx("img", { src: previewUrl(path, mimeType), alt: name, title: name, className: "h-12 w-12 rounded-md border object-cover transition-opacity hover:opacity-80" }), notes ? (_jsx("span", { className: "ring-background absolute -right-1 -bottom-1 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm ring-2", children: _jsx(StickyNoteIcon, { className: "h-2.5 w-2.5" }) })) : null] }));
-        return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Dialog, { children: [_jsxs(Tooltip, { children: [_jsxs("div", { className: "group relative", children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DialogTrigger, { asChild: true, children: thumbnail }) }), !disabled && (_jsx("button", { type: "button", onClick: onRemove, className: "absolute -top-1.5 -right-1.5 hidden h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white group-hover:flex", "aria-label": `Remove ${name}`, children: _jsx(X, { className: "h-3 w-3" }) }))] }), notes ? (_jsx(TooltipContent, { side: "bottom", className: "max-w-[220px] border border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100", children: _jsx("p", { className: "line-clamp-3 text-xs leading-snug", children: notes }) })) : null] }), _jsxs(DialogContent, { className: "max-w-3xl gap-0 overflow-hidden border-0 p-0 [&>button:last-child]:!cursor-pointer [&>button:last-child]:!rounded-full [&>button:last-child]:!bg-black/70 [&>button:last-child]:!p-1.5 [&>button:last-child]:!text-white [&>button:last-child]:!opacity-100 [&>button:last-child]:!shadow-lg [&>button:last-child]:!backdrop-blur-md [&>button:last-child]:hover:!bg-black/90", children: [_jsx(VisuallyHidden.Root, { children: _jsxs(DialogTitle, { children: ["Preview: ", name] }) }), _jsx("div", { className: "relative bg-black/90", children: _jsx("img", { src: previewUrl(path, mimeType), alt: name, className: "h-auto max-h-[70vh] w-full object-contain" }) }), _jsxs("div", { className: "bg-background flex flex-col gap-2 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium", children: name }), _jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(size) })] }), _jsx("a", { href: previewUrl(path, mimeType), download: name, className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded p-1.5 transition-colors", "aria-label": `Download ${name}`, children: _jsx(DownloadIcon, { className: "h-4 w-4" }) })] }), onNotesChange ? (_jsx(Textarea, { placeholder: "Add notes about this image\u2026", value: notes ?? '', onChange: (e) => onNotesChange(e.target.value), rows: 2, className: "resize-none text-sm", "aria-label": "Image notes" })) : notes ? (_jsx("p", { className: "text-muted-foreground text-sm", children: notes })) : null] })] })] }) }));
+        return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Dialog, { children: [_jsxs(Tooltip, { children: [_jsxs("div", { className: "group relative", children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DialogTrigger, { asChild: true, children: thumbnail }) }), !disabled && (_jsx("button", { type: "button", onClick: onRemove, className: "absolute -top-1.5 -right-1.5 hidden h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white group-hover:flex", "aria-label": `Remove ${name}`, children: _jsx(X, { className: "h-3 w-3" }) }))] }), notes ? (_jsx(TooltipContent, { side: "top", sideOffset: 10, className: "z-[80] max-w-[220px]", children: _jsx("p", { className: "line-clamp-5 text-xs leading-snug whitespace-pre-wrap", children: notes }) })) : null] }), _jsxs(DialogContent, { className: "max-w-3xl gap-0 overflow-hidden border-0 p-0 [&>button:last-child]:!cursor-pointer [&>button:last-child]:!rounded-full [&>button:last-child]:!bg-black/70 [&>button:last-child]:!p-1.5 [&>button:last-child]:!text-white [&>button:last-child]:!opacity-100 [&>button:last-child]:!shadow-lg [&>button:last-child]:!backdrop-blur-md [&>button:last-child]:hover:!bg-black/90", children: [_jsx(VisuallyHidden.Root, { children: _jsxs(DialogTitle, { children: ["Preview: ", name] }) }), _jsx("div", { className: "relative bg-black/90", children: _jsx("img", { src: previewUrl(path, mimeType), alt: name, className: "h-auto max-h-[70vh] w-full object-contain" }) }), _jsxs("div", { className: "bg-background flex flex-col gap-2 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium", children: name }), _jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(size) })] }), _jsx("a", { href: previewUrl(path, mimeType), download: name, className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded p-1.5 transition-colors", "aria-label": `Download ${name}`, children: _jsx(DownloadIcon, { className: "h-4 w-4" }) })] }), onNotesChange ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Textarea, { placeholder: "Add notes about this image\u2026", value: notes ?? '', onChange: (e) => onNotesChange(e.target.value), rows: 2, className: "resize-none text-sm", "aria-label": "Image notes" }), notes?.trim() ? (_jsx("span", { className: "text-muted-foreground text-xs", children: "Auto-saved" })) : null] })) : notes ? (_jsx("p", { className: "text-muted-foreground text-sm whitespace-pre-wrap", children: notes })) : null] })] })] }) }));
     }
     return (_jsxs("div", { className: "group relative flex items-center gap-2 rounded-full border py-1 ps-2 pe-3", children: [_jsx("div", { className: cn('flex h-6 w-6 shrink-0 items-center justify-center rounded-full', iconColorClass), children: _jsx(Icon, { className: "h-3 w-3" }) }), _jsx("span", { className: "max-w-[120px] truncate text-sm", children: name }), _jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(size) }), !disabled && (_jsx("button", { type: "button", onClick: onRemove, className: "absolute -top-1.5 -right-1.5 hidden h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white group-hover:flex", "aria-label": `Remove ${name}`, children: _jsx(X, { className: "h-3 w-3" }) }))] }));
 }

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

@@ -0,0 +1,31 @@
+import type { Application } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
+import type { ChatState } from '../../../../../../packages/core/src/application/ports/output/services/interactive-session-service.interface.js';
+/**
+ * Snapshot of the application's live dev-server state at the moment
+ * the server component rendered. Used to seed `useDeployAction` so
+ * the top-bar Preview button and the right-pane Web iframe are both
+ * correct on the very first client paint — no "No dev server
+ * running" flash, no client-side round-trip latency.
+ */
+export interface InitialDeploymentSnapshot {
+    state: DeploymentState;
+    url: string | null;
+}
+export interface ApplicationPageProps {
+    application: Application;
+    /**
+     * SSR-loaded chat state for this application — seeds the TanStack Query
+     * cache inside ChatTab so the initial user message (posted on the server
+     * by createApplication before navigation) renders on first paint.
+     */
+    initialChatState?: ChatState;
+    /**
+     * SSR-loaded dev-server deployment snapshot. When present and
+     * non-Stopped, skips the client-side hydration fetch — the first
+     * paint already shows the running URL.
+     */
+    initialDeployment?: InitialDeploymentSnapshot;
+}
+export declare function ApplicationPage({ application, initialChatState }: ApplicationPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=application-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"application-page.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/application-page/application-page.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,WAAW,EAAqB,MAAM,sCAAsC,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sFAAsF,CAAC;AA8nBtH;;;;;;GAMG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,eAAe,CAAC;IACvB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE,oBAAoB,2CAgGtF"}