@shepai/cli 1.129.4 → 1.130.0-pr413.0773bb9

package/dist/src/presentation/web/app/api/directory/list/route.js

@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+import { readdir, stat } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import path from 'node:path';
+export async function GET(request) {
+    const url = new URL(request.url);
+    const rawPath = url.searchParams.get('path') ?? homedir();
+    const showHidden = url.searchParams.get('showHidden') === 'true';
+    if (!path.isAbsolute(rawPath)) {
+        return NextResponse.json({ error: 'Path must be absolute' }, { status: 400 });
+    }
+    const resolvedPath = path.resolve(rawPath);
+    try {
+        const dirStat = await stat(resolvedPath);
+        if (!dirStat.isDirectory()) {
+            return NextResponse.json({ error: 'Path is not a directory' }, { status: 400 });
+        }
+    }
+    catch (error) {
+        if (isErrnoException(error) && error.code === 'ENOENT') {
+            return NextResponse.json({ error: 'Directory not found' }, { status: 404 });
+        }
+        const message = error instanceof Error ? error.message : 'Failed to access path';
+        return NextResponse.json({ error: message }, { status: 500 });
+    }
+    try {
+        const dirents = await readdir(resolvedPath, { withFileTypes: true });
+        const entries = [];
+        const entryPromises = dirents.map(async (dirent) => {
+            if (!showHidden && dirent.name.startsWith('.')) {
+                return null;
+            }
+            const entryPath = path.join(resolvedPath, dirent.name);
+            try {
+                if (dirent.isDirectory()) {
+                    const entryStat = await stat(entryPath);
+                    return {
+                        name: dirent.name,
+                        path: entryPath,
+                        isDirectory: true,
+                        updatedAt: entryStat.mtime.toISOString(),
+                    };
+                }
+                if (dirent.isSymbolicLink()) {
+                    const entryStat = await stat(entryPath);
+                    if (entryStat.isDirectory()) {
+                        return {
+                            name: dirent.name,
+                            path: entryPath,
+                            isDirectory: true,
+                            updatedAt: entryStat.mtime.toISOString(),
+                        };
+                    }
+                }
+            }
+            catch {
+                // Skip inaccessible entries (permission denied, broken symlinks)
+            }
+            return null;
+        });
+        const results = await Promise.all(entryPromises);
+        for (const result of results) {
+            if (result !== null) {
+                entries.push(result);
+            }
+        }
+        return NextResponse.json({ entries, currentPath: resolvedPath });
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to read directory';
+        return NextResponse.json({ error: message }, { status: 500 });
+    }
+}
+function isErrnoException(error) {
+    return error instanceof Error && 'code' in error;
+}

package/dist/src/presentation/web/app/layout.d.ts

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import '@xyflow/react/dist/base.css';
+import '@cubone/react-file-manager/dist/style.css';
 import './globals.css';
 /** Force dynamic rendering for all pages since they depend on client-side context. */
 export declare const dynamic = "force-dynamic";

package/dist/src/presentation/web/app/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/app/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,6BAA6B,CAAC;AACrC,OAAO,eAAe,CAAC;AAMvB,sFAAsF;AACtF,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,QAkBtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,GACT,EAAE,QAAQ,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,2CA4BD"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/app/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,6BAA6B,CAAC;AACrC,OAAO,2CAA2C,CAAC;AACnD,OAAO,eAAe,CAAC;AAMvB,sFAAsF;AACtF,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,QAkBtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,GACT,EAAE,QAAQ,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,2CA4BD"}

package/dist/src/presentation/web/app/layout.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@xyflow/react/dist/base.css';
+import '@cubone/react-file-manager/dist/style.css';
 import './globals.css';
 import { AppShell } from '../components/layouts/app-shell/index.js';
 import { Toaster } from '../components/ui/sonner.js';

package/dist/src/presentation/web/components/common/add-repository-button/add-repository-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-repository-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/add-repository-button/add-repository-button.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAEvE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,wBAAwB,2CA2FzF"}
+{"version":3,"file":"add-repository-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/add-repository-button/add-repository-button.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAEvE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,wBAAwB,2CAsHzF"}

package/dist/src/presentation/web/components/common/add-repository-button/add-repository-button.js

@@ -6,17 +6,24 @@ import { Button } from '../../ui/button.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover.js';
 import { GitHubImportDialog } from '../../common/github-import-dialog/index.js';
-import { pickFolder } from './pick-folder.js';
 import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
+import { ReactFileManagerDialog } from '../../common/react-file-manager-dialog/index.js';
+import { pickFolder } from './pick-folder.js';
 export function AddRepositoryButton({ onSelect, onGitHubImport }) {
     const featureFlags = useFeatureFlags();
     const [loading, setLoading] = useState(false);
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [githubDialogOpen, setGithubDialogOpen] = useState(false);
+    const [showReactPicker, setShowReactPicker] = useState(false);
+    const { reactFileManager: useReactFileManager } = featureFlags;
     async function handleLocalFolder() {
         setPopoverOpen(false);
         if (loading)
             return;
+        if (useReactFileManager) {
+            setShowReactPicker(true);
+            return;
+        }
         setLoading(true);
         try {
             const path = await pickFolder();
@@ -24,6 +31,10 @@ export function AddRepositoryButton({ onSelect, onGitHubImport }) {
                 onSelect?.(path);
             }
         }
+        catch {
+            // Native picker failed — fall back to React file manager
+            setShowReactPicker(true);
+        }
         finally {
             setLoading(false);
         }
@@ -38,5 +49,15 @@ export function AddRepositoryButton({ onSelect, onGitHubImport }) {
             onSelect?.(repository.path);
         }
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Add Repository", "data-testid": "add-repository-button", disabled: loading, children: loading ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsx(Plus, { className: "h-5 w-5" })) }) }) }), _jsx(TooltipContent, { children: "Add Repository" })] }) }), _jsxs(PopoverContent, { className: "w-48 p-1", align: "start", children: [_jsxs("button", { type: "button", className: "hover:bg-accent flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm", onClick: handleLocalFolder, "data-testid": "add-repo-local-folder", children: [_jsx(FolderPlus, { className: "h-4 w-4" }), "Local folder"] }), featureFlags.githubImport ? (_jsxs("button", { type: "button", className: "hover:bg-accent flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm", onClick: handleFromGitHub, "data-testid": "add-repo-from-github", children: [_jsx(Github, { className: "h-4 w-4" }), "From GitHub"] })) : null] })] }), featureFlags.githubImport ? (_jsx(GitHubImportDialog, { open: githubDialogOpen, onOpenChange: setGithubDialogOpen, onImportComplete: handleImportComplete })) : null] }));
+    function handleReactPickerSelect(path) {
+        if (path) {
+            onSelect?.(path);
+        }
+        setShowReactPicker(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Add Repository", "data-testid": "add-repository-button", disabled: loading, children: loading ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsx(Plus, { className: "h-5 w-5" })) }) }) }), _jsx(TooltipContent, { children: "Add Repository" })] }) }), _jsxs(PopoverContent, { className: "w-48 p-1", align: "start", children: [_jsxs("button", { type: "button", className: "hover:bg-accent flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm", onClick: handleLocalFolder, "data-testid": "add-repo-local-folder", children: [_jsx(FolderPlus, { className: "h-4 w-4" }), "Local folder"] }), featureFlags.githubImport ? (_jsxs("button", { type: "button", className: "hover:bg-accent flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm", onClick: handleFromGitHub, "data-testid": "add-repo-from-github", children: [_jsx(Github, { className: "h-4 w-4" }), "From GitHub"] })) : null] })] }), featureFlags.githubImport ? (_jsx(GitHubImportDialog, { open: githubDialogOpen, onOpenChange: setGithubDialogOpen, onImportComplete: handleImportComplete })) : null, _jsx(ReactFileManagerDialog, { open: showReactPicker, onOpenChange: (open) => {
+                    if (!open) {
+                        setShowReactPicker(false);
+                    }
+                }, onSelect: handleReactPickerSelect })] }));
 }

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"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"}

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.js

@@ -19,6 +19,8 @@ import { AttachmentChip } from '../../common/attachment-chip/index.js';
 import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
 import { Separator } from '../../ui/separator.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
+import { ReactFileManagerDialog } from '../../common/react-file-manager-dialog/index.js';
+import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
 import { addRepository } from '../../../app/actions/add-repository.js';
 import { pickFiles } from './pick-files.js';
 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10 MB
@@ -492,7 +494,9 @@ export function RepositoryCombobox({ repositories, value, onChange, onAddReposit
     const [query, setQuery] = useState('');
     const [isAdding, setIsAdding] = useState(false);
     const [addError, setAddError] = useState(null);
+    const [showReactPicker, setShowReactPicker] = useState(false);
     const inputRef = useRef(null);
+    const { reactFileManager: useReactFileManager } = useFeatureFlags();
     const selectedRepo = repositories.find((r) => r.path === value);
     const filtered = query.trim()
         ? repositories.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()) ||
@@ -503,9 +507,32 @@ export function RepositoryCombobox({ repositories, value, onChange, onAddReposit
         setOpen(false);
         setQuery('');
     }, [onChange]);
+    const addRepoFromPath = useCallback(async (folderPath) => {
+        const result = await addRepository({ path: folderPath });
+        if (result.error) {
+            setAddError(result.error);
+            setIsAdding(false);
+            return;
+        }
+        if (result.repository) {
+            const newRepo = {
+                id: result.repository.id,
+                name: result.repository.name,
+                path: result.repository.path,
+            };
+            onAddRepository?.(newRepo);
+            onChange(newRepo.path);
+            setOpen(false);
+            setQuery('');
+        }
+    }, [onAddRepository, onChange]);
     const handleAddRepository = useCallback(async () => {
         if (isAdding)
             return;
+        if (useReactFileManager) {
+            setShowReactPicker(true);
+            return;
+        }
         setIsAdding(true);
         setAddError(null);
         try {
@@ -514,23 +541,24 @@ export function RepositoryCombobox({ repositories, value, onChange, onAddReposit
                 setIsAdding(false);
                 return;
             }
-            const result = await addRepository({ path: folderPath });
-            if (result.error) {
-                setAddError(result.error);
-                setIsAdding(false);
-                return;
-            }
-            if (result.repository) {
-                const newRepo = {
-                    id: result.repository.id,
-                    name: result.repository.name,
-                    path: result.repository.path,
-                };
-                onAddRepository?.(newRepo);
-                onChange(newRepo.path);
-                setOpen(false);
-                setQuery('');
-            }
+            await addRepoFromPath(folderPath);
+        }
+        catch {
+            // Native picker failed — fall back to React file manager
+            setShowReactPicker(true);
+        }
+        finally {
+            setIsAdding(false);
+        }
+    }, [isAdding, useReactFileManager, addRepoFromPath]);
+    const handleReactPickerSelect = useCallback(async (path) => {
+        setShowReactPicker(false);
+        if (!path)
+            return;
+        setIsAdding(true);
+        setAddError(null);
+        try {
+            await addRepoFromPath(path);
         }
         catch (err) {
             setAddError(err instanceof Error ? err.message : 'Failed to add repository');
@@ -538,7 +566,7 @@ export function RepositoryCombobox({ repositories, value, onChange, onAddReposit
         finally {
             setIsAdding(false);
         }
-    }, [isAdding, onAddRepository, onChange]);
+    }, [addRepoFromPath]);
     useEffect(() => {
         if (open) {
             setTimeout(() => inputRef.current?.focus(), 0);
@@ -547,5 +575,8 @@ export function RepositoryCombobox({ repositories, value, onChange, onAddReposit
             setQuery('');
         }
     }, [open]);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-label": "Repository", disabled: disabled, "data-testid": "repository-combobox", className: cn('border-input bg-background ring-offset-background focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50', !selectedRepo && 'text-muted-foreground'), children: [_jsx("span", { className: "truncate", children: selectedRepo ? selectedRepo.name : 'Select repository...' }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-80 p-0", align: "start", "data-testid": "repository-combobox-content", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, placeholder: "Search repositories...", value: query, onChange: (e) => setQuery(e.target.value), className: "h-8 border-0 p-0 text-sm shadow-none focus-visible:ring-0", "data-testid": "repository-search" }) }), _jsx("div", { className: "max-h-48 overflow-y-auto py-1", role: "listbox", "aria-label": "Repositories", children: filtered.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-2 text-sm", "data-testid": "repository-empty", children: "No repositories found." })) : (filtered.map((r) => (_jsxs("button", { type: "button", role: "option", "aria-selected": value === r.path, onClick: () => handleSelect(r.path), className: cn('hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm', value === r.path && 'bg-accent/50'), "data-testid": `repository-option-${r.id}`, children: [_jsx(CheckIcon, { className: cn('h-4 w-4 shrink-0', value !== r.path && 'invisible') }), _jsxs("span", { className: "flex flex-col items-start truncate", children: [_jsx("span", { className: "truncate", children: r.name }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: r.path })] })] }, r.id)))) }), _jsx(Separator, {}), _jsxs("button", { type: "button", onClick: handleAddRepository, disabled: isAdding, className: "hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm", "data-testid": "add-repository-item", children: [isAdding ? (_jsx(Loader2, { className: "h-4 w-4 shrink-0 animate-spin" })) : (_jsx(FolderPlus, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: "Add new repository..." })] }), addError ? (_jsx("p", { className: "px-3 pb-2 text-xs text-red-500", "data-testid": "add-repository-error", children: addError })) : null] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-label": "Repository", disabled: disabled, "data-testid": "repository-combobox", className: cn('border-input bg-background ring-offset-background focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50', !selectedRepo && 'text-muted-foreground'), children: [_jsx("span", { className: "truncate", children: selectedRepo ? selectedRepo.name : 'Select repository...' }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-80 p-0", align: "start", "data-testid": "repository-combobox-content", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, placeholder: "Search repositories...", value: query, onChange: (e) => setQuery(e.target.value), className: "h-8 border-0 p-0 text-sm shadow-none focus-visible:ring-0", "data-testid": "repository-search" }) }), _jsx("div", { className: "max-h-48 overflow-y-auto py-1", role: "listbox", "aria-label": "Repositories", children: filtered.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-2 text-sm", "data-testid": "repository-empty", children: "No repositories found." })) : (filtered.map((r) => (_jsxs("button", { type: "button", role: "option", "aria-selected": value === r.path, onClick: () => handleSelect(r.path), className: cn('hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm', value === r.path && 'bg-accent/50'), "data-testid": `repository-option-${r.id}`, children: [_jsx(CheckIcon, { className: cn('h-4 w-4 shrink-0', value !== r.path && 'invisible') }), _jsxs("span", { className: "flex flex-col items-start truncate", children: [_jsx("span", { className: "truncate", children: r.name }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: r.path })] })] }, r.id)))) }), _jsx(Separator, {}), _jsxs("button", { type: "button", onClick: handleAddRepository, disabled: isAdding, className: "hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm", "data-testid": "add-repository-item", children: [isAdding ? (_jsx(Loader2, { className: "h-4 w-4 shrink-0 animate-spin" })) : (_jsx(FolderPlus, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: "Add new repository..." })] }), addError ? (_jsx("p", { className: "px-3 pb-2 text-xs text-red-500", "data-testid": "add-repository-error", children: addError })) : null] }) })] }), _jsx(ReactFileManagerDialog, { open: showReactPicker, onOpenChange: (isOpen) => {
+                    if (!isOpen)
+                        setShowReactPicker(false);
+                }, onSelect: handleReactPickerSelect })] }));
 }

package/dist/src/presentation/web/components/common/index.d.ts

@@ -1,5 +1,6 @@
 export { computeDrawerView, type DrawerView } from './control-center-drawer/index.js';
 export { AddRepositoryButton } from './add-repository-button/index.js';
+export { ReactFileManagerDialog, type ReactFileManagerDialogProps, } from './react-file-manager-dialog/index.js';
 export { FloatingActionButton, type FloatingActionButtonProps, type FloatingActionButtonAction, } from './floating-action-button/index.js';
 export { ElapsedTime, formatElapsed } from './elapsed-time/index.js';
 export { EmptyState, type EmptyStateProps } from './empty-state/index.js';

package/dist/src/presentation/web/components/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,GAChC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EACL,WAAW,EACX,sBAAsB,EACtB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EACL,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,GAChC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EACL,WAAW,EACX,sBAAsB,EACtB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EACL,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/presentation/web/components/common/index.js

@@ -1,5 +1,6 @@
 export { computeDrawerView } from './control-center-drawer/index.js';
 export { AddRepositoryButton } from './add-repository-button/index.js';
+export { ReactFileManagerDialog, } from './react-file-manager-dialog/index.js';
 export { FloatingActionButton, } from './floating-action-button/index.js';
 export { ElapsedTime, formatElapsed } from './elapsed-time/index.js';
 export { EmptyState } from './empty-state/index.js';

package/dist/src/presentation/web/components/common/react-file-manager-dialog/index.d.ts

@@ -0,0 +1,3 @@
+export { ReactFileManagerDialog } from './react-file-manager-dialog.js';
+export type { ReactFileManagerDialogProps } from './react-file-manager-dialog-config.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/react-file-manager-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/react-file-manager-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,YAAY,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/src/presentation/web/components/common/react-file-manager-dialog/index.js

@@ -0,0 +1 @@
+export { ReactFileManagerDialog } from './react-file-manager-dialog.js';

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog-config.d.ts

@@ -0,0 +1,17 @@
+export interface ReactFileManagerDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSelect: (path: string | null) => void;
+    initialPath?: string;
+}
+export interface DirectoryEntry {
+    name: string;
+    path: string;
+    isDirectory: true;
+    updatedAt: string;
+}
+export interface DirectoryListResponse {
+    entries: DirectoryEntry[];
+    currentPath: string;
+}
+//# sourceMappingURL=react-file-manager-dialog-config.d.ts.map

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-file-manager-dialog-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog-config.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB"}

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog-config.js

@@ -0,0 +1 @@
+export {};

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.d.ts

@@ -0,0 +1,3 @@
+import type { ReactFileManagerDialogProps } from './react-file-manager-dialog-config.js';
+export declare function ReactFileManagerDialog({ open, onOpenChange, onSelect, initialPath, }: ReactFileManagerDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=react-file-manager-dialog.d.ts.map

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-file-manager-dialog.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAGV,2BAA2B,EAC5B,MAAM,oCAAoC,CAAC;AA2C5C,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,WAAW,GACZ,EAAE,2BAA2B,2CAgI7B"}

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
+import { Button } from '../../ui/button.js';
+const FileManager = dynamic(() => import('@cubone/react-file-manager').then((mod) => mod.FileManager), { ssr: false, loading: () => _jsx(FileManagerSkeleton, {}) });
+function FileManagerSkeleton() {
+    return (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" }) }));
+}
+function toFileManagerFiles(entries) {
+    // The @cubone/react-file-manager component filters visible files by matching
+    // file.path === currentPath + "/" + file.name. Since we dynamically fetch
+    // directory contents on each navigation, we present all entries at the
+    // FileManager's root level by using path = "/" + name. The real absolute
+    // path is preserved in a custom `absolutePath` field for selection/navigation.
+    return entries.map((entry) => ({
+        name: entry.name,
+        isDirectory: true,
+        path: `/${entry.name}`,
+        absolutePath: entry.path,
+        updatedAt: entry.updatedAt,
+    }));
+}
+async function fetchDirectory(dirPath) {
+    const params = new URLSearchParams();
+    if (dirPath) {
+        params.set('path', dirPath);
+    }
+    const res = await fetch(`/api/directory/list?${params.toString()}`);
+    if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: 'Failed to load directory' }));
+        throw new Error(body.error ?? 'Failed to load directory');
+    }
+    return res.json();
+}
+export function ReactFileManagerDialog({ open, onOpenChange, onSelect, initialPath, }) {
+    const [entries, setEntries] = useState([]);
+    const [currentPath, setCurrentPath] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedPath, setSelectedPath] = useState(null);
+    const hasLoadedRef = useRef(false);
+    const loadDirectory = useCallback(async (dirPath) => {
+        setIsLoading(true);
+        setSelectedPath(null);
+        try {
+            const data = await fetchDirectory(dirPath);
+            setEntries(data.entries);
+            setCurrentPath(data.currentPath);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Failed to load directory';
+            toast.error(message);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (open && !hasLoadedRef.current) {
+            hasLoadedRef.current = true;
+            loadDirectory(initialPath);
+        }
+        if (!open) {
+            hasLoadedRef.current = false;
+        }
+    }, [open, initialPath, loadDirectory]);
+    const handleFileOpen = useCallback((file) => {
+        // Use absolutePath (real filesystem path) for navigation, not the
+        // virtual path used by the FileManager tree.
+        const realPath = file.absolutePath;
+        if (file.isDirectory && realPath) {
+            loadDirectory(realPath);
+        }
+    }, [loadDirectory]);
+    const handleSelectionChange = useCallback((files) => {
+        if (files.length === 1 && files[0].isDirectory) {
+            const realPath = files[0].absolutePath;
+            setSelectedPath(realPath ?? null);
+        }
+        else {
+            setSelectedPath(null);
+        }
+    }, []);
+    function handleSelect() {
+        if (selectedPath) {
+            onSelect(selectedPath);
+            onOpenChange(false);
+        }
+    }
+    function handleSelectCurrentPath() {
+        if (currentPath) {
+            onSelect(currentPath);
+            onOpenChange(false);
+        }
+    }
+    function handleCancel() {
+        onSelect(null);
+        onOpenChange(false);
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                handleCancel();
+            }
+        }, children: _jsxs(DialogContent, { className: "flex h-[95dvh] max-w-[95vw] flex-col", onCloseAutoFocus: (e) => e.preventDefault(), children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Select Folder" }), _jsx(DialogDescription, { className: "truncate font-mono text-xs", children: currentPath || 'Loading...' })] }), _jsx("div", { className: "shep-file-manager min-h-0 flex-1 overflow-hidden rounded-md border", children: _jsx(FileManager, { files: toFileManagerFiles(entries), isLoading: isLoading, height: "100%", width: "100%", layout: "list", enableFilePreview: false, permissions: {
+                            upload: false,
+                            delete: false,
+                            create: false,
+                            download: false,
+                            copy: false,
+                            move: false,
+                            rename: false,
+                        }, onFileOpen: handleFileOpen, onSelectionChange: handleSelectionChange, onRefresh: () => loadDirectory(currentPath) }, currentPath) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "secondary", onClick: handleSelectCurrentPath, disabled: !currentPath, children: "Select Current Folder" }), _jsx(Button, { onClick: handleSelect, disabled: !selectedPath, children: "Select Folder" })] })] }) }));
+}

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactFileManagerDialog } from './react-file-manager-dialog.js';
+declare const meta: Meta<typeof ReactFileManagerDialog>;
+export default meta;
+type Story = StoryObj<typeof ReactFileManagerDialog>;
+export declare const Default: Story;
+export declare const WithInitialPath: Story;
+export declare const Closed: Story;
+//# sourceMappingURL=react-file-manager-dialog.stories.d.ts.map

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-file-manager-dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,sBAAsB,CAY7C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAErD,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,eAAe,EAAE,KAI7B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC"}

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.stories.js

@@ -0,0 +1,27 @@
+import { fn } from '@storybook/test';
+import { ReactFileManagerDialog } from './react-file-manager-dialog.js';
+const meta = {
+    title: 'Composed/ReactFileManagerDialog',
+    component: ReactFileManagerDialog,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        open: true,
+        onOpenChange: fn().mockName('onOpenChange'),
+        onSelect: fn().mockName('onSelect'),
+    },
+};
+export default meta;
+export const Default = {};
+export const WithInitialPath = {
+    args: {
+        initialPath: '/tmp',
+    },
+};
+export const Closed = {
+    args: {
+        open: false,
+    },
+};

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,kDA8J9B"}
+{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,kDAuL9B"}

package/dist/src/presentation/web/components/features/control-center/control-center-empty-state.js

@@ -4,6 +4,8 @@ import { useState, useCallback, useEffect } from 'react';
 import { FolderOpen, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, ChevronDown, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
+import { ReactFileManagerDialog } from '../../common/react-file-manager-dialog/index.js';
+import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
 import { isAgentSetupComplete } from '../../../app/actions/agent-setup-flag.js';
 import { checkAgentAuth } from '../../../app/actions/check-agent-auth.js';
 import { WelcomeAgentSetup } from './welcome-agent-setup.js';
@@ -11,9 +13,11 @@ const commands = ['cd ~/my-repo', 'shep feat new "sleek dashboard"'];
 export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     const [copied, setCopied] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [showReactPicker, setShowReactPicker] = useState(false);
     const [agentReady, setAgentReady] = useState(null);
     const [authStatus, setAuthStatus] = useState(null);
     const [cliExpanded, setCliExpanded] = useState(false);
+    const { reactFileManager: useReactFileManager } = useFeatureFlags();
     useEffect(() => {
         isAgentSetupComplete().then((done) => {
             setAgentReady(done);
@@ -27,6 +31,10 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     async function handlePickerClick() {
         if (loading)
             return;
+        if (useReactFileManager) {
+            setShowReactPicker(true);
+            return;
+        }
         setLoading(true);
         try {
             const path = await pickFolder();
@@ -34,10 +42,20 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
                 onRepositorySelect?.(path);
             }
         }
+        catch {
+            // Native picker failed — fall back to React file manager
+            setShowReactPicker(true);
+        }
         finally {
             setLoading(false);
         }
     }
+    function handleReactPickerSelect(path) {
+        if (path) {
+            onRepositorySelect?.(path);
+        }
+        setShowReactPicker(false);
+    }
     const handleCopy = useCallback(async () => {
         await navigator.clipboard.writeText(commands.join('\n'));
         setCopied(true);
@@ -60,7 +78,10 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
                     animationDelay: '400ms',
                     animationDuration: '600ms',
                     animationFillMode: 'both',
-                }, children: [_jsxs("button", { type: "button", onClick: () => setCliExpanded(!cliExpanded), className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 transition-colors duration-200", children: [_jsx(Terminal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-sm", children: "or use the CLI" }), _jsx(ChevronDown, { className: cn('h-3.5 w-3.5 transition-transform duration-200', cliExpanded ? '' : 'rotate-180') })] }), cliExpanded ? (_jsx("div", { className: "animate-in fade-in slide-in-from-top-1 mt-3 w-80 duration-200", children: _jsxs("div", { "data-testid": "cli-code-block", className: "relative rounded-xl bg-zinc-900 px-5 py-4 font-mono text-[13px] leading-relaxed text-zinc-400", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-3 right-3 cursor-pointer rounded-md p-1.5 text-zinc-600 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": "Copy commands", children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }), _jsx("div", { className: "space-y-1", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-600 select-none", children: "$ " }), _jsx("span", { className: "text-zinc-300", children: cmd })] }, cmd))) })] }) })) : null] })) : null] }));
+                }, children: [_jsxs("button", { type: "button", onClick: () => setCliExpanded(!cliExpanded), className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 transition-colors duration-200", children: [_jsx(Terminal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-sm", children: "or use the CLI" }), _jsx(ChevronDown, { className: cn('h-3.5 w-3.5 transition-transform duration-200', cliExpanded ? '' : 'rotate-180') })] }), cliExpanded ? (_jsx("div", { className: "animate-in fade-in slide-in-from-top-1 mt-3 w-80 duration-200", children: _jsxs("div", { "data-testid": "cli-code-block", className: "relative rounded-xl bg-zinc-900 px-5 py-4 font-mono text-[13px] leading-relaxed text-zinc-400", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-3 right-3 cursor-pointer rounded-md p-1.5 text-zinc-600 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": "Copy commands", children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }), _jsx("div", { className: "space-y-1", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-600 select-none", children: "$ " }), _jsx("span", { className: "text-zinc-300", children: cmd })] }, cmd))) })] }) })) : null] })) : null, _jsx(ReactFileManagerDialog, { open: showReactPicker, onOpenChange: (open) => {
+                    if (!open)
+                        setShowReactPicker(false);
+                }, onSelect: handleReactPickerSelect })] }));
 }
 /** Inline status pill — minimal, no background box */
 function AgentAuthBanner({ status, onRetry, }) {

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AA0BzE,MAAM,WAAW,gCAAgC;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,2BAA2B,CAAC,EAAE,YAAY,EAAE,EAAE,gCAAgC,2CAgE7F"}
+{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AA8BzE,MAAM,WAAW,gCAAgC;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,2BAA2B,CAAC,EAAE,YAAY,EAAE,EAAE,gCAAgC,2CAgE7F"}