@shepai/cli 1.179.1 → 1.180.0-pr548.764147

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

@@ -0,0 +1,19 @@
+/**
+ * FileTreePanel
+ *
+ * Left-side VSCode-style file tree for the IDE tab. Uses react-arborist
+ * for virtualization, keyboard navigation, and folder expansion. Clicking
+ * a file node calls `onOpenFile` so the parent can load it into the
+ * editor.
+ */
+import type { FileTreeEntry } from './types.js';
+export interface FileTreePanelProps {
+    tree: FileTreeEntry | null;
+    loading: boolean;
+    error: string | null;
+    activePath: string | null;
+    /** Open a file. Mode is `'preview'` on single click, `'persistent'` on double-click. */
+    onOpenFile: (path: string, mode: 'preview' | 'persistent') => void;
+}
+export declare function FileTreePanel({ tree, loading, error, activePath, onOpenFile, }: FileTreePanelProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=file-tree-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree-panel.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/file-tree-panel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,wFAAwF;IACxF,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,YAAY,KAAK,IAAI,CAAC;CACpE;AAyFD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,UAAU,GACX,EAAE,kBAAkB,kDA2DpB"}

package/dist/src/presentation/web/components/features/application-page/ide-tab/file-tree-panel.js

@@ -0,0 +1,85 @@
+/**
+ * FileTreePanel
+ *
+ * Left-side VSCode-style file tree for the IDE tab. Uses react-arborist
+ * for virtualization, keyboard navigation, and folder expansion. Clicking
+ * a file node calls `onOpenFile` so the parent can load it into the
+ * editor.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, useState } from 'react';
+import { Tree } from 'react-arborist';
+import { ChevronDown, ChevronRight, File, FolderClosed, FolderOpen } from 'lucide-react';
+import { cn } from '../../../../lib/utils.js';
+function toArboristNodes(entries) {
+    if (!entries)
+        return [];
+    return entries.map((e) => ({
+        id: e.path || e.name,
+        name: e.name,
+        isDirectory: e.isDirectory,
+        path: e.path,
+        children: e.isDirectory ? toArboristNodes(e.children) : undefined,
+    }));
+}
+const callbacksRef = { current: null };
+function NodeRenderer({ node, style }) {
+    const isDir = node.data.isDirectory;
+    const isOpen = node.isOpen;
+    return (_jsxs("div", { style: style, className: cn('flex h-6 cursor-pointer items-center gap-1 rounded-sm px-1 text-[12px] select-none', node.isSelected
+            ? 'bg-primary/10 text-foreground'
+            : 'text-muted-foreground hover:bg-muted/60'), onMouseDown: (e) => {
+            if (e.button !== 0)
+                return;
+            if (isDir) {
+                node.toggle();
+                return;
+            }
+            node.select();
+            // Single click → preview (italic, reused slot).
+            callbacksRef.current?.onOpenFile(node.data.path, 'preview');
+        }, onDoubleClick: (e) => {
+            if (isDir)
+                return;
+            e.preventDefault();
+            // Double click → promote to a persistent tab.
+            callbacksRef.current?.onOpenFile(node.data.path, 'persistent');
+        }, children: [isDir ? (isOpen ? (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0" })) : (_jsx(ChevronRight, { className: "h-3 w-3 shrink-0" }))) : (_jsx("span", { className: "inline-block w-3 shrink-0" })), isDir ? (isOpen ? (_jsx(FolderOpen, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" })) : (_jsx(FolderClosed, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }))) : (_jsx(File, { className: "h-3.5 w-3.5 shrink-0 text-sky-500" })), _jsx("span", { className: "truncate", children: node.data.name })] }));
+}
+export function FileTreePanel({ tree, loading, error, activePath, onOpenFile, }) {
+    const data = useMemo(() => toArboristNodes(tree?.children), [tree]);
+    const treeRef = useRef(null);
+    const containerRef = useRef(null);
+    const [size, setSize] = useState({ w: 280, h: 400 });
+    // Keep the module-scoped ref pointed at the latest callback.
+    useEffect(() => {
+        callbacksRef.current = { onOpenFile };
+        return () => {
+            if (callbacksRef.current?.onOpenFile === onOpenFile)
+                callbacksRef.current = null;
+        };
+    }, [onOpenFile]);
+    // Measure the container so react-arborist can virtualize correctly.
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver((entries) => {
+            const rect = entries[0]?.contentRect;
+            if (rect)
+                setSize({ w: Math.floor(rect.width), h: Math.floor(rect.height) });
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    if (loading && !tree) {
+        return (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-xs", children: "Loading files\u2026" }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "text-destructive flex h-full items-center justify-center p-2 text-center text-xs", children: error }));
+    }
+    if (!tree)
+        return null;
+    return (_jsx("div", { ref: containerRef, className: "h-full w-full overflow-hidden", children: _jsx(Tree, { ref: treeRef, data: data, openByDefault: false, width: size.w, height: size.h, rowHeight: 24, indent: 12, padding: 4, selection: activePath ?? undefined, children: NodeRenderer }) }));
+}

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

@@ -0,0 +1,16 @@
+/**
+ * IdeTab
+ *
+ * The IDE view for the Application page's right pane. Renders a split of
+ * (editor) | (file explorer on the RIGHT). State is owned by `useIdeState`
+ * so this component stays a thin layout shell.
+ *
+ * The underlying SSE watcher keeps the tree and any open files in sync
+ * whenever the agent (or any other process) writes to the application's
+ * working directory.
+ */
+export interface IdeTabProps {
+    applicationId: string;
+}
+export declare function IdeTab({ applicationId }: IdeTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ide-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ide-tab.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/ide-tab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAWH,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,MAAM,CAAC;CACvB;AAMD,wBAAgB,MAAM,CAAC,EAAE,aAAa,EAAE,EAAE,WAAW,2CA0GpD"}

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

@@ -0,0 +1,53 @@
+/**
+ * IdeTab
+ *
+ * The IDE view for the Application page's right pane. Renders a split of
+ * (editor) | (file explorer on the RIGHT). State is owned by `useIdeState`
+ * so this component stays a thin layout shell.
+ *
+ * The underlying SSE watcher keeps the tree and any open files in sync
+ * whenever the agent (or any other process) writes to the application's
+ * working directory.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { PanelRightClose } from 'lucide-react';
+import { FileTreePanel } from './file-tree-panel.js';
+import { EditorPane } from './editor-pane.js';
+import { useIdeState } from './use-ide-state.js';
+const MIN_TREE_PX = 160;
+const MIN_EDITOR_PX = 300;
+const INITIAL_TREE_PX = 260;
+export function IdeTab({ applicationId }) {
+    const state = useIdeState(applicationId);
+    const [treeWidth, setTreeWidth] = useState(INITIAL_TREE_PX);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const containerRef = useRef(null);
+    const dragging = useRef(false);
+    const onPointerDown = useCallback((e) => {
+        e.preventDefault();
+        dragging.current = true;
+        e.currentTarget.setPointerCapture(e.pointerId);
+    }, []);
+    const onPointerMove = useCallback((e) => {
+        if (!dragging.current || !containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        // Explorer is on the RIGHT: its width is the distance from the right edge
+        // of the container to the pointer, not the distance from the left edge.
+        const fromRight = rect.right - e.clientX;
+        const clamped = Math.max(MIN_TREE_PX, Math.min(fromRight, rect.width - MIN_EDITOR_PX));
+        setTreeWidth(clamped);
+    }, []);
+    const onPointerUp = useCallback(() => {
+        dragging.current = false;
+    }, []);
+    const showSidebar = useCallback(() => setSidebarCollapsed(false), []);
+    const hideSidebar = useCallback(() => setSidebarCollapsed(true), []);
+    // Adapt the tree's (path, mode) signature to the hook's (path, options).
+    const handleTreeOpen = useCallback((path, mode) => {
+        state.openFile(path, { mode });
+    }, [state]);
+    return (_jsxs("div", { ref: containerRef, className: "bg-background flex h-full min-h-0 flex-1", "data-testid": "ide-tab", children: [_jsx("section", { className: "min-w-0 flex-1", children: _jsx(EditorPane, { applicationId: applicationId, openFiles: state.openFiles, activePath: state.activePath, onSelect: state.selectFile, onClose: state.closeFile, onChange: state.updateBuffer, onSave: state.saveActive, onPromote: state.promoteFile, onToggleViewMode: state.toggleViewMode, sidebarCollapsed: sidebarCollapsed, onShowSidebar: showSidebar }) }), !sidebarCollapsed && (_jsx("div", { role: "separator", "aria-orientation": "vertical", className: "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" }) })), !sidebarCollapsed && (_jsxs("aside", { className: "border-border flex min-h-0 shrink-0 flex-col border-l", style: { width: treeWidth }, children: [_jsxs("div", { className: "text-muted-foreground border-border bg-muted/30 flex h-8 shrink-0 items-center justify-between border-b px-2 text-[10px] font-medium tracking-wide uppercase", children: [_jsx("span", { children: "Explorer" }), _jsx("button", { type: "button", onClick: hideSidebar, className: "text-muted-foreground hover:text-foreground -mr-1 flex h-6 w-6 items-center justify-center rounded-sm", "aria-label": "Hide file explorer", title: "Hide file explorer", children: _jsx(PanelRightClose, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(FileTreePanel, { tree: state.tree, loading: state.treeLoading, error: state.treeError, activePath: state.activePath, onOpenFile: handleTreeOpen }) })] }))] }));
+}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare function IdeTabStoryShell({ applicationId }: {
+    applicationId: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof IdeTabStoryShell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=ide-tab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ide-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/ide-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAwGvD,iBAAS,gBAAgB,CAAC,EAAE,aAAa,EAAE,EAAE;IAAE,aAAa,EAAE,MAAM,CAAA;CAAE,2CAUrE;AAID,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAMvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { IdeTab } from './ide-tab.js';
+/* -------------------------------------------------------------------------- */
+/*  Fetch / EventSource mocks                                                 */
+/* -------------------------------------------------------------------------- */
+/*  These stories run in Storybook (no real backend), so we swap `fetch` and  */
+/*  `EventSource` for minimal in-memory fakes that return a small sample      */
+/*  repository tree and a few file contents.                                   */
+const SAMPLE_TREE = {
+    name: 'demo-repo',
+    path: '',
+    isDirectory: true,
+    children: [
+        {
+            name: 'src',
+            path: 'src',
+            isDirectory: true,
+            children: [
+                { name: 'index.ts', path: 'src/index.ts', isDirectory: false },
+                { name: 'utils.ts', path: 'src/utils.ts', isDirectory: false },
+                {
+                    name: 'components',
+                    path: 'src/components',
+                    isDirectory: true,
+                    children: [{ name: 'button.tsx', path: 'src/components/button.tsx', isDirectory: false }],
+                },
+            ],
+        },
+        { name: 'package.json', path: 'package.json', isDirectory: false },
+        { name: 'README.md', path: 'README.md', isDirectory: false },
+    ],
+};
+const SAMPLE_FILES = {
+    'src/index.ts': "import { greet } from './utils';\n\ngreet('world');\n",
+    'src/utils.ts': "export function greet(name: string): void {\n  console.log('Hello,', name);\n}\n",
+    'src/components/button.tsx': "import * as React from 'react';\n\nexport function Button() {\n  return <button>Click me</button>;\n}\n",
+    'package.json': '{\n  "name": "demo-repo",\n  "version": "0.0.1"\n}\n',
+    'README.md': '# Demo Repo\n\nThis is a fake repository used only by Storybook.\n',
+};
+class NoopEventSource {
+    onerror = null;
+    onmessage = null;
+    addEventListener() {
+        /* no-op for Storybook */
+    }
+    removeEventListener() {
+        /* no-op for Storybook */
+    }
+    close() {
+        /* no-op for Storybook */
+    }
+}
+function installMocks() {
+    const originalFetch = globalThis.fetch;
+    const originalEventSource = globalThis.EventSource;
+    globalThis.fetch = (async (input, init) => {
+        const url = typeof input === 'string' ? input : input.toString();
+        if (url.endsWith('/files')) {
+            return new Response(JSON.stringify({ tree: SAMPLE_TREE }), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        if (url.includes('/files/content')) {
+            if (init?.method === 'PUT') {
+                return new Response(JSON.stringify({ ok: true }), { status: 200 });
+            }
+            const u = new URL(url, 'http://localhost');
+            const pathParam = u.searchParams.get('path') ?? '';
+            const content = SAMPLE_FILES[pathParam];
+            if (content === undefined) {
+                return new Response(JSON.stringify({ error: 'not found' }), { status: 404 });
+            }
+            const body = {
+                path: pathParam,
+                content,
+                size: content.length,
+            };
+            return new Response(JSON.stringify(body), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        return new Response('', { status: 404 });
+    });
+    globalThis.EventSource = NoopEventSource;
+    return () => {
+        globalThis.fetch = originalFetch;
+        globalThis.EventSource = originalEventSource;
+    };
+}
+function IdeTabStoryShell({ applicationId }) {
+    useEffect(() => {
+        const uninstall = installMocks();
+        return uninstall;
+    }, []);
+    return (_jsx("div", { className: "bg-background h-dvh w-full", children: _jsx(IdeTab, { applicationId: applicationId }) }));
+}
+/* -------------------------------------------------------------------------- */
+const meta = {
+    title: 'Features/ApplicationPage/IdeTab',
+    component: IdeTabStoryShell,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    args: { applicationId: 'app-demo' },
+};

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

@@ -0,0 +1,27 @@
+/**
+ * ImageViewer
+ *
+ * Full-featured image preview for the IDE tab. Built on
+ * `react-zoom-pan-pinch` so it ships with:
+ *
+ *   - Wheel / pinch zoom
+ *   - Click-and-drag pan
+ *   - Zoom-to-cursor
+ *
+ * On top of that, this component layers a toolbar with:
+ *
+ *   - Zoom in / out buttons
+ *   - Fit to screen, 1:1 actual size, reset
+ *   - Rotate 90° CW / CCW
+ *   - Horizontal / vertical flip
+ *   - Background toggle (checkerboard → black → white → transparent)
+ *   - Copy image URL + open in new tab + download
+ *   - Live "Nx · 123 × 456 · 4.2 KB" info readout
+ */
+export interface ImageViewerProps {
+    applicationId: string;
+    /** POSIX-style path of the image relative to the application root. */
+    path: string;
+}
+export declare function ImageViewer({ applicationId, path }: ImageViewerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image-viewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/image-viewer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AA4BH,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;CACd;AAuCD,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CA6JpE"}

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

@@ -0,0 +1,162 @@
+/**
+ * ImageViewer
+ *
+ * Full-featured image preview for the IDE tab. Built on
+ * `react-zoom-pan-pinch` so it ships with:
+ *
+ *   - Wheel / pinch zoom
+ *   - Click-and-drag pan
+ *   - Zoom-to-cursor
+ *
+ * On top of that, this component layers a toolbar with:
+ *
+ *   - Zoom in / out buttons
+ *   - Fit to screen, 1:1 actual size, reset
+ *   - Rotate 90° CW / CCW
+ *   - Horizontal / vertical flip
+ *   - Background toggle (checkerboard → black → white → transparent)
+ *   - Copy image URL + open in new tab + download
+ *   - Live "Nx · 123 × 456 · 4.2 KB" info readout
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { TransformWrapper, TransformComponent, } from 'react-zoom-pan-pinch';
+import { Download, ExternalLink, FlipHorizontal2, FlipVertical2, Link as LinkIcon, Maximize2, Minus, Monitor, Plus, RotateCcw, RotateCw, Square, } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '../../../../lib/utils.js';
+import { useResolvedTheme } from './use-resolved-theme.js';
+/**
+ * Build a theme-aware background-style map. In light mode the checkerboard
+ * fades to soft grey on white; in dark mode it sits on the Monaco vs-dark
+ * backdrop so images feel continuous with the editor.
+ */
+function makeBackgroundStyles(isDark) {
+    const canvasBg = isDark ? '#1e1e1e' : '#ffffff';
+    const checkerSquare = isDark ? '#2a2a2a' : '#e5e7eb';
+    return {
+        checkered: {
+            backgroundImage: `linear-gradient(45deg, ${checkerSquare} 25%, transparent 25%), linear-gradient(-45deg, ${checkerSquare} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${checkerSquare} 75%), linear-gradient(-45deg, transparent 75%, ${checkerSquare} 75%)`,
+            backgroundSize: '16px 16px',
+            backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+            backgroundColor: canvasBg,
+        },
+        black: { backgroundColor: '#000000' },
+        white: { backgroundColor: '#ffffff' },
+        transparent: { backgroundColor: canvasBg },
+    };
+}
+const BACKGROUND_CYCLE = ['checkered', 'black', 'white', 'transparent'];
+function formatBytes(bytes) {
+    if (bytes == null || Number.isNaN(bytes))
+        return '—';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+function basename(p) {
+    const i = p.lastIndexOf('/');
+    return i === -1 ? p : p.slice(i + 1);
+}
+export function ImageViewer({ applicationId, path }) {
+    const src = `/api/applications/${applicationId}/files/raw?path=${encodeURIComponent(path)}`;
+    const resolvedTheme = useResolvedTheme();
+    const isDark = resolvedTheme === 'dark';
+    const backgroundStyles = useMemo(() => makeBackgroundStyles(isDark), [isDark]);
+    const rootBgClass = isDark ? 'bg-[#1e1e1e]' : 'bg-[#ffffff]';
+    const transformRef = useRef(null);
+    const [bgMode, setBgMode] = useState('checkered');
+    const [rotation, setRotation] = useState(0);
+    const [flipH, setFlipH] = useState(false);
+    const [flipV, setFlipV] = useState(false);
+    const [scale, setScale] = useState(1);
+    const [dimensions, setDimensions] = useState(null);
+    const [bytes, setBytes] = useState(null);
+    const [error, setError] = useState(null);
+    // Reset all transforms whenever the path changes so switching images in
+    // the same tab slot starts fresh instead of inheriting a prior zoom.
+    useEffect(() => {
+        setRotation(0);
+        setFlipH(false);
+        setFlipV(false);
+        setScale(1);
+        setDimensions(null);
+        setBytes(null);
+        setError(null);
+        transformRef.current?.resetTransform?.();
+    }, [path]);
+    // Fetch the bytes once so we can display a size readout without
+    // re-downloading (the browser also caches the <img> request).
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const res = await fetch(src, { cache: 'no-store' });
+                if (!res.ok) {
+                    setError(`Failed to load image (${res.status})`);
+                    return;
+                }
+                const buf = await res.arrayBuffer();
+                if (!cancelled)
+                    setBytes(buf.byteLength);
+            }
+            catch (err) {
+                if (!cancelled)
+                    setError(err instanceof Error ? err.message : String(err));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    const cycleBackground = () => {
+        setBgMode((prev) => {
+            const idx = BACKGROUND_CYCLE.indexOf(prev);
+            return BACKGROUND_CYCLE[(idx + 1) % BACKGROUND_CYCLE.length];
+        });
+    };
+    const rotateCw = () => setRotation((r) => (r + 90) % 360);
+    const rotateCcw = () => setRotation((r) => (r + 270) % 360);
+    const copyUrl = async () => {
+        try {
+            const absolute = new URL(src, window.location.origin).toString();
+            await navigator.clipboard.writeText(absolute);
+            toast.success('Image URL copied');
+        }
+        catch {
+            toast.error('Failed to copy URL');
+        }
+    };
+    if (error) {
+        return (_jsx("div", { className: cn('flex h-full items-center justify-center text-xs text-red-500 dark:text-red-400', rootBgClass), children: error }));
+    }
+    return (_jsxs("div", { className: cn('flex h-full min-h-0 flex-col', rootBgClass), children: [_jsx(Toolbar, { scale: scale, dimensions: dimensions, bytes: bytes, bgMode: bgMode, flipH: flipH, flipV: flipV, onZoomIn: () => transformRef.current?.zoomIn?.(0.25), onZoomOut: () => transformRef.current?.zoomOut?.(0.25), onReset: () => transformRef.current?.resetTransform?.(), onFit: () => transformRef.current?.centerView?.(1), onActualSize: () => transformRef.current?.setTransform?.(0, 0, 1), onRotateCcw: rotateCcw, onRotateCw: rotateCw, onFlipH: () => setFlipH((v) => !v), onFlipV: () => setFlipV((v) => !v), onCycleBackground: cycleBackground, onCopyUrl: copyUrl, onOpenInNewTab: () => window.open(src, '_blank', 'noopener,noreferrer'), downloadHref: src, downloadName: basename(path) }), _jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", style: backgroundStyles[bgMode], children: _jsx(TransformWrapper, { ref: transformRef, initialScale: 1, minScale: 0.1, maxScale: 40, centerOnInit: true, 
+                    // Wheel zoom: tiny per-tick delta so trackpads don't launch into orbit.
+                    // `step` is fraction-of-current-scale per wheel event; 0.05 ≈ 5%.
+                    wheel: { step: 0.05 }, doubleClick: { mode: 'reset' }, pinch: { step: 2 }, onTransform: (_ref, state) => setScale(state.scale), children: _jsx(TransformComponent, { wrapperStyle: { width: '100%', height: '100%' }, contentStyle: { width: '100%', height: '100%' }, children: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("img", { src: src, alt: path, draggable: false, onLoad: (e) => {
+                                    const img = e.currentTarget;
+                                    setDimensions({ w: img.naturalWidth, h: img.naturalHeight });
+                                }, style: {
+                                    transform: `rotate(${rotation}deg) scaleX(${flipH ? -1 : 1}) scaleY(${flipV ? -1 : 1})`,
+                                    transformOrigin: 'center',
+                                    maxWidth: '90%',
+                                    maxHeight: '90%',
+                                    objectFit: 'contain',
+                                    imageRendering: scale >= 4 ? 'pixelated' : 'auto',
+                                    transition: 'transform 120ms ease',
+                                } }) }) }) }) })] }));
+}
+function Toolbar({ scale, dimensions, bytes, bgMode, flipH, flipV, onZoomIn, onZoomOut, onReset, onFit, onActualSize, onRotateCcw, onRotateCw, onFlipH, onFlipV, onCycleBackground, onCopyUrl, onOpenInNewTab, downloadHref, downloadName, }) {
+    return (_jsxs("div", { className: "border-border bg-background/95 text-muted-foreground flex h-9 shrink-0 items-center gap-0.5 border-b px-2 text-[11px]", children: [_jsx(ToolButton, { label: "Zoom out", onClick: onZoomOut, icon: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsx(ToolButton, { label: "Zoom in", onClick: onZoomIn, icon: _jsx(Plus, { className: "h-3.5 w-3.5" }) }), _jsxs("button", { type: "button", onClick: onReset, className: "text-foreground hover:bg-muted/60 h-6 min-w-[3.25rem] rounded-sm px-1.5 text-center font-mono tabular-nums", title: "Reset zoom", children: [Math.round(scale * 100), "%"] }), _jsx(Separator, {}), _jsx(ToolButton, { label: "Fit to screen", onClick: onFit, icon: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolButton, { label: "Actual size (1:1)", onClick: onActualSize, icon: _jsx(Square, { className: "h-3.5 w-3.5" }) }), _jsx(Separator, {}), _jsx(ToolButton, { label: "Rotate 90\u00B0 counter-clockwise", onClick: onRotateCcw, icon: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }) }), _jsx(ToolButton, { label: "Rotate 90\u00B0 clockwise", onClick: onRotateCw, icon: _jsx(RotateCw, { className: "h-3.5 w-3.5" }) }), _jsx(ToolButton, { label: "Flip horizontal", onClick: onFlipH, icon: _jsx(FlipHorizontal2, { className: "h-3.5 w-3.5" }), active: flipH }), _jsx(ToolButton, { label: "Flip vertical", onClick: onFlipV, icon: _jsx(FlipVertical2, { className: "h-3.5 w-3.5" }), active: flipV }), _jsx(Separator, {}), _jsx(ToolButton, { label: `Background: ${bgMode}`, onClick: onCycleBackground, icon: _jsx(Monitor, { className: "h-3.5 w-3.5" }) }), _jsx(ToolButton, { label: "Copy URL", onClick: onCopyUrl, icon: _jsx(LinkIcon, { className: "h-3.5 w-3.5" }) }), _jsx(ToolButton, { label: "Open in new tab", onClick: onOpenInNewTab, icon: _jsx(ExternalLink, { className: "h-3.5 w-3.5" }) }), _jsx("a", { href: downloadHref, download: downloadName, className: "text-muted-foreground hover:text-foreground hover:bg-muted/60 flex h-6 w-6 items-center justify-center rounded-sm", title: "Download", children: _jsx(Download, { className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex items-center gap-2 font-mono text-[10px]", children: [dimensions ? (_jsxs("span", { children: [dimensions.w, " \u00D7 ", dimensions.h] })) : null, _jsx("span", { children: formatBytes(bytes) })] })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Toolbar building blocks                                            */
+/* ------------------------------------------------------------------ */
+function Separator() {
+    return _jsx("span", { className: "bg-border/60 mx-1 h-4 w-px shrink-0" });
+}
+function ToolButton({ label, onClick, icon, active, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-label": label, title: label, className: cn('hover:bg-muted/60 flex h-6 w-6 items-center justify-center rounded-sm transition-colors', active ? 'text-foreground bg-muted/60' : 'text-muted-foreground hover:text-foreground'), children: icon }));
+}

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

@@ -0,0 +1,3 @@
+export { IdeTab } from './ide-tab.js';
+export type { IdeTabProps } from './ide-tab.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

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

@@ -0,0 +1 @@
+export { IdeTab } from './ide-tab.js';

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

@@ -0,0 +1,56 @@
+/**
+ * Shared types for the IDE tab.
+ *
+ * These mirror the core `FileTreeEntry` / `ReadFileResult` / `FileChangeEvent`
+ * shapes returned by `/api/applications/[id]/files*`. Kept local to the
+ * component so the web layer never imports from `@shepai/core` directly.
+ */
+export interface FileTreeEntry {
+    name: string;
+    path: string;
+    isDirectory: boolean;
+    children?: FileTreeEntry[];
+}
+export interface ReadFileResult {
+    path: string;
+    content: string;
+    size: number;
+    tooLarge?: boolean;
+    binary?: boolean;
+}
+export type FileChangeKind = 'created' | 'modified' | 'deleted';
+export interface FileChangeEvent {
+    kind: FileChangeKind;
+    path: string;
+    isDirectory: boolean;
+}
+/** One open file tab. */
+export interface OpenFile {
+    path: string;
+    /** Last-loaded-from-disk content — used to compute `dirty`. Empty for images. */
+    originalContent: string;
+    /** Current buffer (may differ from originalContent while the user edits). */
+    content: string;
+    tooLarge?: boolean;
+    binary?: boolean;
+    /** `true` for known image extensions — the editor renders an <img> instead of Monaco. */
+    isImage?: boolean;
+    /** `true` for markdown / mdx files. */
+    isMarkdown?: boolean;
+    /**
+     * Current rendering mode. `'rendered'` is the default for markdown files
+     * (renders via react-markdown). `'source'` falls back to the Monaco editor.
+     */
+    viewMode: 'source' | 'rendered';
+    /**
+     * VSCode-style "preview" tab. When true, this tab will be reused (its
+     * path swapped in place) if the user single-clicks a different file in
+     * the explorer. Any edit or an explicit double-click promotes the tab
+     * to persistent (`isPreview = false`), after which it survives further
+     * preview opens.
+     */
+    isPreview: boolean;
+}
+export declare function isImagePath(filePath: string): boolean;
+export declare function isMarkdownPath(filePath: string): boolean;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/application-page/ide-tab/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,yBAAyB;AACzB,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC;;;;;;OAMG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAExD"}

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

@@ -0,0 +1,35 @@
+/**
+ * Shared types for the IDE tab.
+ *
+ * These mirror the core `FileTreeEntry` / `ReadFileResult` / `FileChangeEvent`
+ * shapes returned by `/api/applications/[id]/files*`. Kept local to the
+ * component so the web layer never imports from `@shepai/core` directly.
+ */
+/* ------------------------------------------------------------------ */
+/*  Extension helpers                                                  */
+/* ------------------------------------------------------------------ */
+const IMAGE_EXTENSIONS = new Set([
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'webp',
+    'avif',
+    'bmp',
+    'ico',
+    'svg',
+]);
+const MARKDOWN_EXTENSIONS = new Set(['md', 'mdx', 'markdown']);
+function extensionOf(filePath) {
+    const base = filePath.split('/').pop() ?? filePath;
+    const dot = base.lastIndexOf('.');
+    if (dot === -1)
+        return '';
+    return base.slice(dot + 1).toLowerCase();
+}
+export function isImagePath(filePath) {
+    return IMAGE_EXTENSIONS.has(extensionOf(filePath));
+}
+export function isMarkdownPath(filePath) {
+    return MARKDOWN_EXTENSIONS.has(extensionOf(filePath));
+}