@shepai/cli 1.179.1 → 1.180.0-pr548.764147

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

@@ -0,0 +1,330 @@
+'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 { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../ui/button.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';
+import { IdeTab } from '../../features/application-page/ide-tab/index.js';
+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 { 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';
+import { getGitRepoInfo } from '../../../app/actions/get-git-log.js';
+/* ------------------------------------------------------------------ */
+/*  Constants                                                           */
+/* ------------------------------------------------------------------ */
+/** Single source of truth for top-bar height. Both panes hang off this
+ *  so nothing misaligns horizontally between left and right. */
+const TOP_BAR_HEIGHT_CLASS = 'h-11';
+const MIN_LEFT_PX = 400;
+const MIN_RIGHT_PX = 400;
+const INITIAL_LEFT_FRACTION = 0.4;
+const VIEW_TABS = ['ide', 'terminal', 'web'];
+const VIEW_LABELS = {
+    ide: 'IDE',
+    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 };
+}
+/* ------------------------------------------------------------------ */
+/*  Short path helper                                                  */
+/* ------------------------------------------------------------------ */
+/** Collapse a long absolute path to just its last segment. */
+function shortPath(path) {
+    const normalized = path.replace(/\\/g, '/').replace(/\/+$/, '');
+    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 })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Path cluster — short path + copy + open-in-file-manager            */
+/* ------------------------------------------------------------------ */
+function PathCluster({ repositoryPath }) {
+    const handleCopy = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(repositoryPath);
+            toast.success('Path copied', { description: repositoryPath });
+        }
+        catch {
+            toast.error('Failed to copy path');
+        }
+    }, [repositoryPath]);
+    const handleOpen = useCallback(async () => {
+        const result = await openFolder(repositoryPath);
+        if (!result.success) {
+            toast.error('Could not open folder', { description: result.error });
+        }
+    }, [repositoryPath]);
+    return (_jsxs("div", { className: "text-muted-foreground flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx("span", { className: "truncate font-mono text-[11px]", title: repositoryPath, children: shortPath(repositoryPath) }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-muted-foreground hover:text-foreground h-5 w-5", onClick: handleCopy, "aria-label": "Copy path", title: "Copy path", children: _jsx(Copy, { className: "h-3 w-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-muted-foreground hover:text-foreground h-5 w-5", onClick: handleOpen, "aria-label": "Open in file manager", title: "Open in file manager", children: _jsx(FolderOpen, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-muted-foreground/40", children: "\u00B7" }), _jsx(GitStatusCluster, { repositoryPath: repositoryPath })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Git status cluster — branch name + added/edited file counts        */
+/* ------------------------------------------------------------------ */
+/** Polls git repo info for current branch + working-tree diff numbers.
+ *  Rendered inline next to the repo path so users can see at a glance
+ *  which branch the application repo is on and how many files have
+ *  been added or edited since the last commit. */
+function GitStatusCluster({ repositoryPath }) {
+    const { data } = useQuery({
+        queryKey: ['git-repo-info', repositoryPath],
+        queryFn: () => getGitRepoInfo(repositoryPath, 1),
+        enabled: Boolean(repositoryPath),
+        refetchInterval: 5000,
+        refetchOnWindowFocus: true,
+        staleTime: 2000,
+    });
+    const trimmedBranch = data?.currentBranch?.trim();
+    const branch = trimmedBranch && trimmedBranch.length > 0 ? trimmedBranch : 'main';
+    const added = data?.workingTree.untracked ?? 0;
+    const edited = data?.workingTree.modified ?? 0;
+    const insertions = data?.diffStats?.insertions ?? 0;
+    const deletions = data?.diffStats?.deletions ?? 0;
+    const hasChanges = added > 0 || edited > 0;
+    const handleCommit = useCallback(() => {
+        toast.info('Commit (not wired up yet)', {
+            description: `Would commit ${edited} edited / ${added} added file(s) on ${branch}`,
+        });
+    }, [added, edited, branch]);
+    const handleCommitPush = useCallback(() => {
+        toast.info('Commit & Push (not wired up yet)', {
+            description: `Would commit and push ${edited} edited / ${added} added file(s) on ${branch}`,
+        });
+    }, [added, edited, branch]);
+    return (_jsxs("div", { className: "flex items-center gap-2 font-mono text-[11px]", children: [_jsxs("span", { className: "flex items-center gap-1", title: `Branch: ${branch}`, children: [_jsx(GitBranch, { className: "h-3 w-3" }), branch] }), added > 0 ? (_jsxs("span", { className: "flex items-center gap-0.5 text-emerald-500", title: `${added} added ${added === 1 ? 'file' : 'files'}`, children: [_jsx(FilePlus, { className: "h-3 w-3" }), added] })) : null, edited > 0 ? (_jsxs("span", { className: "flex items-center gap-0.5 text-amber-500", title: `${edited} edited ${edited === 1 ? 'file' : 'files'}`, children: [_jsx(FilePen, { className: "h-3 w-3" }), edited] })) : null, insertions > 0 || deletions > 0 ? (_jsxs("span", { className: "flex items-center gap-1", title: `${insertions} insertions, ${deletions} deletions vs HEAD`, children: [insertions > 0 ? _jsxs("span", { className: "text-emerald-500", children: ["+", insertions] }) : null, deletions > 0 ? _jsxs("span", { className: "text-rose-500", children: ["-", deletions] }) : null] })) : null, hasChanges ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleCommit, className: "border-border bg-background text-foreground hover:bg-muted inline-flex h-6 shrink-0 items-center gap-1 rounded-md border px-2 text-[11px] font-medium transition-colors", title: "Commit working tree changes", children: "Commit" }), _jsx("button", { type: "button", onClick: handleCommitPush, className: "inline-flex h-6 shrink-0 items-center gap-1 rounded-md border border-indigo-500/40 bg-indigo-500/10 px-2 text-[11px] font-medium text-indigo-600 transition-colors hover:bg-indigo-500/20 dark:text-indigo-400", title: "Commit and push to remote", children: "Commit & Push" })] })) : null] }));
+}
+/* ------------------------------------------------------------------ */
+/*  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.
+    const { data: chatState } = useQuery({
+        queryKey: chatQueryKey(featureId),
+        queryFn: () => fetchChatState(featureId),
+        initialData: initialChatState,
+        staleTime: Infinity,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+    });
+    const sessionInfo = chatState?.sessionInfo;
+    const sessionId = sessionInfo?.sessionId ?? null;
+    const model = sessionInfo?.model ?? null;
+    const shortId = sessionId ? sessionId.slice(0, 8) : null;
+    const handleCopy = useCallback(async () => {
+        if (!sessionId)
+            return;
+        try {
+            await navigator.clipboard.writeText(sessionId);
+            toast.success('Session ID copied', { description: sessionId });
+        }
+        catch {
+            toast.error('Failed to copy session id');
+        }
+    }, [sessionId]);
+    return (_jsxs("button", { type: "button", onClick: handleCopy, disabled: !sessionId, className: cn('border-border/60 bg-muted/40 text-muted-foreground inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md border px-2 font-mono text-[10px] transition-colors', sessionId
+            ? 'hover:bg-muted hover:text-foreground cursor-pointer'
+            : 'cursor-default opacity-60'), title: sessionId ? `Click to copy full session id: ${sessionId}` : 'No session yet', "aria-label": sessionId ? 'Copy session id' : 'No active session', children: [_jsx(Cpu, { className: "h-3 w-3 opacity-60" }), _jsx("span", { className: "font-medium", children: model ?? 'agent' }), _jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsx("span", { children: shortId ?? '—' })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Copy prompt — debug dump of the full generated system+user prompt  */
+/* ------------------------------------------------------------------ */
+function CopyPromptButton({ applicationId }) {
+    const [busy, setBusy] = useState(false);
+    const handleClick = useCallback(async () => {
+        if (busy)
+            return;
+        setBusy(true);
+        try {
+            const result = await getApplicationDebugPrompt(applicationId);
+            if (result.error || !result.combined) {
+                toast.error('Failed to build prompt', { description: result.error });
+                return;
+            }
+            await navigator.clipboard.writeText(result.combined);
+            const systemLen = result.systemPrompt?.length ?? 0;
+            const userLen = result.userMessage?.length ?? 0;
+            toast.success('Prompt copied to clipboard', {
+                description: `${systemLen} chars system + ${userLen} chars user`,
+            });
+        }
+        catch (err) {
+            toast.error('Failed to copy prompt', {
+                description: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [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 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
+    // the pill reflects real-time reality ("Working" / "Waiting" /
+    // "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);
+    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, }) {
+    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
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'), children: VIEW_LABELS[v] }, v));
+        }) }));
+}
+/* ------------------------------------------------------------------ */
+/*  Resizable split panel                                              */
+/* ------------------------------------------------------------------ */
+function ResizableSplit({ left, right }) {
+    const containerRef = useRef(null);
+    const [leftFraction, setLeftFraction] = useState(INITIAL_LEFT_FRACTION);
+    const dragging = useRef(false);
+    const onPointerDown = useCallback((e) => {
+        e.preventDefault();
+        dragging.current = true;
+        const target = e.currentTarget;
+        target.setPointerCapture(e.pointerId);
+    }, []);
+    const onPointerMove = useCallback((e) => {
+        if (!dragging.current || !containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const totalWidth = rect.width;
+        const x = e.clientX - rect.left;
+        const clampedX = Math.max(MIN_LEFT_PX, Math.min(x, totalWidth - MIN_RIGHT_PX));
+        setLeftFraction(clampedX / totalWidth);
+    }, []);
+    const onPointerUp = useCallback(() => {
+        dragging.current = false;
+    }, []);
+    return (_jsxs("div", { ref: containerRef, className: "flex min-h-0 flex-1", children: [_jsx("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { flexBasis: `${leftFraction * 100}%`, flexShrink: 0 }, children: left }), _jsx("div", { role: "separator", "aria-orientation": "vertical", className: "group border-border hover:bg-primary/20 relative w-px shrink-0 cursor-col-resize border-l transition-colors", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: _jsx("span", { className: "absolute inset-y-0 -right-1 -left-1" }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: right })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Right-pane views                                                    */
+/* ------------------------------------------------------------------ */
+/**
+ * Right-pane view body.
+ *
+ * The Terminal tab is kept mounted (just hidden) when not active so its
+ * PTY session, scrollback, and running processes survive tab switches.
+ * Other views are placeholders until implemented.
+ */
+function ViewBody({ activeView, applicationId, terminalCwd, deploy, }) {
+    // Mount the Web iframe as soon as there's a URL — even if the user
+    // is currently on IDE / Terminal — so the preview session doesn't
+    // tear down when switching tabs. Once the app has been Previewed
+    // at least once, the iframe stays alive in the background.
+    const hasWebContent = deploy.status === DeploymentState.Ready ||
+        deploy.status === DeploymentState.Booting ||
+        deploy.deployLoading ||
+        !!deploy.deployError;
+    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
+    // component seeds the provider with `initialDeployment` (if any) so
+    // the first paint already has the running URL; the provider's
+    // `ensureHydrated` effect fills in fresh state on mount when the seed
+    // is absent (e.g. test environments where the server couldn't reach
+    // the deployment service).
+    const deploy = useDeployAction({
+        targetId: application.id,
+        targetType: 'application',
+        repositoryPath: application.repositoryPath,
+    });
+    // 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
+    // on an Idle→Ready transition, not on every poll while Ready.
+    const hasAutoSwitchedRef = useRef(false);
+    useEffect(() => {
+        if (deploy.status === DeploymentState.Ready && deploy.url && !hasAutoSwitchedRef.current) {
+            hasAutoSwitchedRef.current = true;
+            setActiveView('web');
+        }
+        if (deploy.status !== DeploymentState.Ready) {
+            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: () => {
+                        // 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
+                        // the right pane to the Web preview, so the user
+                        // lands on their running app with zero clicks.
+                        //
+                        // Important: the provider's default entry is
+                        // `{ status: null }` when no dev server has ever run
+                        // for this application, NOT `'Stopped'`. The previous
+                        // `=== 'Stopped'` check silently did nothing on the
+                        // very first completion of a freshly created app,
+                        // which is exactly when auto-preview matters most.
+                        // Trigger as long as we're not already Booting/Ready.
+                        if (deploy.status !== DeploymentState.Ready &&
+                            deploy.status !== DeploymentState.Booting &&
+                            !deploy.deployLoading) {
+                            void deploy.deploy();
+                        }
+                    } }), right: _jsx(ViewBody, { activeView: activeView, applicationId: application.id, terminalCwd: application.repositoryPath, deploy: deploy }) })] }));
+}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ApplicationPage } from './application-page.js';
+declare const meta: Meta<typeof ApplicationPage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const ErrorState: Story;
+//# sourceMappingURL=application-page.stories.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,51 @@
+import { ApplicationPage } from './application-page.js';
+import { ApplicationStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+const baseApp = {
+    id: 'app-001',
+    name: 'My Todo App',
+    slug: 'my-todo-app',
+    description: 'A full-stack todo application with authentication and real-time sync',
+    repositoryPath: '/home/user/projects/my-todo-app',
+    additionalPaths: [],
+    status: ApplicationStatus.Idle,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+};
+const meta = {
+    title: 'Features/ApplicationPage',
+    component: ApplicationPage,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: {
+        application: baseApp,
+    },
+};
+export const Active = {
+    args: {
+        application: {
+            ...baseApp,
+            id: 'app-002',
+            name: 'E-Commerce Dashboard',
+            slug: 'e-commerce-dashboard',
+            description: 'Admin dashboard for managing products and orders',
+            status: ApplicationStatus.Active,
+        },
+    },
+};
+export const ErrorState = {
+    args: {
+        application: {
+            ...baseApp,
+            id: 'app-003',
+            name: 'Weather API Service',
+            slug: 'weather-api-service',
+            description: 'Microservice for fetching and caching weather data',
+            status: ApplicationStatus.Error,
+        },
+    },
+};

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

@@ -0,0 +1,11 @@
+/**
+ * Thin fetch helpers for the IDE tab's API routes.
+ *
+ * Kept separate from components so the network boundary is obvious and
+ * easy to mock in tests and Storybook.
+ */
+import type { FileTreeEntry, ReadFileResult } from './types.js';
+export declare function fetchFileTree(applicationId: string): Promise<FileTreeEntry>;
+export declare function fetchFileContent(applicationId: string, path: string): Promise<ReadFileResult>;
+export declare function saveFileContent(applicationId: string, path: string, content: string): Promise<void>;
+//# sourceMappingURL=api.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/api.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,wBAAsB,aAAa,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAQjF;AAED,wBAAsB,gBAAgB,CACpC,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,cAAc,CAAC,CAQzB;AAED,wBAAsB,eAAe,CACnC,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,IAAI,CAAC,CAUf"}

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

@@ -0,0 +1,35 @@
+/**
+ * Thin fetch helpers for the IDE tab's API routes.
+ *
+ * Kept separate from components so the network boundary is obvious and
+ * easy to mock in tests and Storybook.
+ */
+export async function fetchFileTree(applicationId) {
+    const res = await fetch(`/api/applications/${applicationId}/files`, { cache: 'no-store' });
+    if (!res.ok) {
+        const body = (await res.json().catch(() => ({})));
+        throw new Error(body.error ?? `Failed to load file tree (${res.status})`);
+    }
+    const data = (await res.json());
+    return data.tree;
+}
+export async function fetchFileContent(applicationId, path) {
+    const url = `/api/applications/${applicationId}/files/content?path=${encodeURIComponent(path)}`;
+    const res = await fetch(url, { cache: 'no-store' });
+    if (!res.ok) {
+        const body = (await res.json().catch(() => ({})));
+        throw new Error(body.error ?? `Failed to read file (${res.status})`);
+    }
+    return (await res.json());
+}
+export async function saveFileContent(applicationId, path, content) {
+    const res = await fetch(`/api/applications/${applicationId}/files/content`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path, content }),
+    });
+    if (!res.ok) {
+        const body = (await res.json().catch(() => ({})));
+        throw new Error(body.error ?? `Failed to save file (${res.status})`);
+    }
+}

package/dist/src/presentation/web/components/features/application-page/ide-tab/editor-pane.d.ts

@@ -0,0 +1,27 @@
+/**
+ * EditorPane
+ *
+ * VSCode-style editor surface for the IDE tab: a tab strip at the top
+ * showing open files (with dirty indicators + close buttons) and a
+ * Monaco editor below it. Monaco is dynamically imported so it stays
+ * out of the initial bundle and never runs during SSR.
+ */
+import type { OpenFile } from './types.js';
+export interface EditorPaneProps {
+    applicationId: string;
+    openFiles: OpenFile[];
+    activePath: string | null;
+    onSelect: (path: string) => void;
+    onClose: (path: string) => void;
+    onChange: (path: string, content: string) => void;
+    onSave: () => void;
+    /** Promote a preview tab to a persistent tab (on tab double-click). */
+    onPromote: (path: string) => void;
+    /** Toggle the active file between rendered preview and Monaco source (markdown). */
+    onToggleViewMode: (path: string) => void;
+    /** When true, renders a "show sidebar" button at the right of the tab strip. */
+    sidebarCollapsed: boolean;
+    onShowSidebar: () => void;
+}
+export declare function EditorPane({ applicationId, openFiles, activePath, onSelect, onClose, onChange, onSave, onPromote, onToggleViewMode, sidebarCollapsed, onShowSidebar, }: EditorPaneProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor-pane.d.ts.map

package/dist/src/presentation/web/components/features/application-page/ide-tab/editor-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-pane.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/editor-pane.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAYH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAoDxC,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,uEAAuE;IACvE,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oFAAoF;IACpF,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gFAAgF;IAChF,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,GACd,EAAE,eAAe,2CAoKjB"}

package/dist/src/presentation/web/components/features/application-page/ide-tab/editor-pane.js

@@ -0,0 +1,147 @@
+/**
+ * EditorPane
+ *
+ * VSCode-style editor surface for the IDE tab: a tab strip at the top
+ * showing open files (with dirty indicators + close buttons) and a
+ * Monaco editor below it. Monaco is dynamically imported so it stays
+ * out of the initial bundle and never runs during SSR.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from 'react';
+import dynamic from 'next/dynamic';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Eye, FileCode, File as FileIcon, PanelRight, X } from 'lucide-react';
+import { cn } from '../../../../lib/utils.js';
+import { ImageViewer } from './image-viewer.js';
+import { useResolvedTheme } from './use-resolved-theme.js';
+/** Monaco is a large client-only dependency — dynamic import with ssr:false. */
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
+    ssr: false,
+    loading: () => (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-xs", children: "Loading editor\u2026" })),
+});
+const EXTENSION_TO_LANGUAGE = {
+    ts: 'typescript',
+    tsx: 'typescript',
+    js: 'javascript',
+    jsx: 'javascript',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    json: 'json',
+    md: 'markdown',
+    mdx: 'markdown',
+    css: 'css',
+    scss: 'scss',
+    html: 'html',
+    yml: 'yaml',
+    yaml: 'yaml',
+    toml: 'ini',
+    ini: 'ini',
+    sh: 'shell',
+    bash: 'shell',
+    py: 'python',
+    go: 'go',
+    rs: 'rust',
+    java: 'java',
+    sql: 'sql',
+    xml: 'xml',
+    dockerfile: 'dockerfile',
+};
+function languageForPath(path) {
+    const base = path.split('/').pop() ?? path;
+    if (base.toLowerCase() === 'dockerfile')
+        return 'dockerfile';
+    const ext = base.includes('.') ? base.split('.').pop()?.toLowerCase() : '';
+    return (ext ? EXTENSION_TO_LANGUAGE[ext] : undefined) ?? 'plaintext';
+}
+function basename(p) {
+    const i = p.lastIndexOf('/');
+    return i === -1 ? p : p.slice(i + 1);
+}
+export function EditorPane({ applicationId, openFiles, activePath, onSelect, onClose, onChange, onSave, onPromote, onToggleViewMode, sidebarCollapsed, onShowSidebar, }) {
+    const active = useMemo(() => openFiles.find((f) => f.path === activePath) ?? null, [openFiles, activePath]);
+    const resolvedTheme = useResolvedTheme();
+    const isDark = resolvedTheme === 'dark';
+    const monacoTheme = isDark ? 'vs-dark' : 'vs';
+    // Background colour that matches each Monaco theme exactly, so the brief
+    // remount gap when switching files never flashes an off-tone fill.
+    const editorBgClass = isDark ? 'bg-[#1e1e1e]' : 'bg-[#ffffff]';
+    // Ctrl/Cmd+S saves the active file.
+    useEffect(() => {
+        const handler = (e) => {
+            if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')) {
+                e.preventDefault();
+                onSave();
+            }
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [onSave]);
+    const handleChange = useCallback((value) => {
+        if (!active)
+            return;
+        onChange(active.path, value ?? '');
+    }, [active, onChange]);
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { role: "tablist", "aria-label": "Open files", className: "border-border bg-muted/30 flex h-8 shrink-0 items-center border-b", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center overflow-x-auto", children: openFiles.length === 0 ? (_jsx("div", { className: "text-muted-foreground px-3 text-[11px]", children: "No file open" })) : (openFiles.map((f) => {
+                            const dirty = f.content !== f.originalContent;
+                            const selected = f.path === activePath;
+                            return (_jsxs("div", { role: "tab", "aria-selected": selected, onClick: () => onSelect(f.path), onDoubleClick: () => onPromote(f.path), className: cn('group border-border flex h-8 shrink-0 cursor-pointer items-center gap-1.5 border-r px-3 text-[11px]', selected
+                                    ? 'bg-background text-foreground'
+                                    : 'text-muted-foreground hover:bg-muted/60'), title: f.isPreview
+                                    ? `${f.path} — preview (double-click tab or edit to keep open)`
+                                    : f.path, children: [_jsx(FileIcon, { className: "h-3 w-3 shrink-0 text-sky-500" }), _jsx("span", { className: cn('truncate', f.isPreview && 'italic'), children: basename(f.path) }), dirty ? (_jsx("span", { className: "bg-primary/70 inline-block h-1.5 w-1.5 rounded-full", "aria-label": "Unsaved changes" })) : null, _jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onClose(f.path);
+                                        }, className: "text-muted-foreground/70 hover:text-foreground ml-1 rounded-sm p-0.5", "aria-label": `Close ${f.path}`, children: _jsx(X, { className: "h-3 w-3" }) })] }, f.path));
+                        })) }), active?.isMarkdown ? (_jsx("button", { type: "button", onClick: () => onToggleViewMode(active.path), className: "text-muted-foreground hover:text-foreground border-border flex h-8 w-8 shrink-0 items-center justify-center border-l", "aria-label": active.viewMode === 'rendered' ? 'Show markdown source' : 'Show markdown preview', title: active.viewMode === 'rendered' ? 'Show markdown source' : 'Show markdown preview', children: active.viewMode === 'rendered' ? (_jsx(FileCode, { className: "h-3.5 w-3.5" })) : (_jsx(Eye, { className: "h-3.5 w-3.5" })) })) : null, sidebarCollapsed ? (_jsx("button", { type: "button", onClick: onShowSidebar, className: "text-muted-foreground hover:text-foreground border-border flex h-8 w-8 shrink-0 items-center justify-center border-l", "aria-label": "Show file explorer", title: "Show file explorer", children: _jsx(PanelRight, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("div", { className: cn('min-h-0 flex-1', editorBgClass), children: active ? (active.isImage ? (_jsx(ImageViewer, { applicationId: applicationId, path: active.path })) : active.binary ? (_jsx(EmptyMessage, { children: "Binary file \u2014 preview not available" })) : active.tooLarge ? (_jsx(EmptyMessage, { children: "File is too large to preview" })) : active.isMarkdown && active.viewMode === 'rendered' ? (_jsx(MarkdownPreview, { source: active.content, isDark: isDark })) : (_jsx(MonacoEditor, { height: "100%", theme: monacoTheme, language: languageForPath(active.path), value: active.content, onChange: handleChange, options: {
+                        fontSize: 13,
+                        minimap: { enabled: true },
+                        scrollBeyondLastLine: false,
+                        automaticLayout: true,
+                        tabSize: 2,
+                        wordWrap: 'off',
+                        renderWhitespace: 'selection',
+                        smoothScrolling: true,
+                    } }, active.path))) : (_jsx(EmptyMessage, { children: "Select a file from the tree to start editing" })) })] }));
+}
+function EmptyMessage({ children }) {
+    return (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-xs", children: children }));
+}
+/**
+ * MarkdownPreview
+ *
+ * Lightweight rendered view for `.md` / `.mdx` files using `react-markdown`
+ * + `remark-gfm` (tables, strikethrough, task lists). Styled against the
+ * vs-dark editor backdrop so it doesn't clash when toggling source/preview.
+ */
+/**
+ * Stable (module-scoped) `Components` map for the markdown preview.
+ *
+ * Styling is expressed with Tailwind's `dark:` variants and semantic
+ * tokens (`border-border`, `text-foreground`) so the preview follows the
+ * app theme without us reading `isDark` in the render tree.
+ */
+const MARKDOWN_COMPONENTS = {
+    h1: ({ children }) => (_jsx("h1", { className: "border-border text-foreground mt-6 mb-4 border-b pb-2 text-2xl font-semibold", children: children })),
+    h2: ({ children }) => (_jsx("h2", { className: "border-border text-foreground mt-5 mb-3 border-b pb-1 text-xl font-semibold", children: children })),
+    h3: ({ children }) => (_jsx("h3", { className: "text-foreground mt-4 mb-2 text-lg font-semibold", children: children })),
+    p: ({ children }) => _jsx("p", { className: "my-3", children: children }),
+    a: ({ children, href }) => (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: "text-sky-600 underline hover:text-sky-500 dark:text-sky-400 dark:hover:text-sky-300", children: children })),
+    ul: ({ children }) => _jsx("ul", { className: "my-3 ml-6 list-disc", children: children }),
+    ol: ({ children }) => _jsx("ol", { className: "my-3 ml-6 list-decimal", children: children }),
+    li: ({ children }) => _jsx("li", { className: "my-1", children: children }),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-border text-muted-foreground my-3 border-l-4 pl-4 italic", children: children })),
+    code: ({ className, children }) => {
+        const inline = !className;
+        return inline ? (_jsx("code", { className: "bg-muted rounded px-1.5 py-0.5 font-mono text-[12px] text-pink-600 dark:text-pink-300", children: children })) : (_jsx("code", { className: cn('font-mono text-[12px]', className), children: children }));
+    },
+    pre: ({ children }) => (_jsx("pre", { className: "border-border bg-muted/60 my-4 overflow-auto rounded-md border p-3", children: children })),
+    hr: () => _jsx("hr", { className: "border-border my-6" }),
+    table: ({ children }) => (_jsx("table", { className: "border-border my-4 border-collapse border", children: children })),
+    th: ({ children }) => (_jsx("th", { className: "border-border bg-muted/60 border px-3 py-1 text-left font-semibold", children: children })),
+    td: ({ children }) => _jsx("td", { className: "border-border border px-3 py-1", children: children }),
+};
+function MarkdownPreview({ source, isDark }) {
+    return (_jsx("div", { className: cn('text-foreground h-full overflow-auto px-8 py-6 text-[13px]', isDark ? 'bg-[#1e1e1e]' : 'bg-[#ffffff]'), children: _jsx("div", { className: "markdown-preview mx-auto max-w-3xl leading-6", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: MARKDOWN_COMPONENTS, children: source }) }) }));
+}