@shepai/cli 1.129.3-pr396.d3c115b → 1.129.3-pr412.1505aaa

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;AA6BzE,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"}

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.js

@@ -13,7 +13,7 @@ const FLAG_DESCRIPTIONS = {
     debug: 'Enable debug UI elements and verbose client-side logging',
     githubImport: 'Enable GitHub repository import in the web UI',
     adoptBranch: 'Enable the ability to adopt existing branches as tracked features',
-    gitRebaseSync: 'Enable git rebase-on-main and sync-main operations in the web UI',
+    reactFileManager: 'Use the built-in React file manager instead of the native OS folder picker. Also serves as automatic fallback when the native picker is unavailable.',
 };
 const FLAG_LABELS = {
     skills: 'Skills',
@@ -21,7 +21,7 @@ const FLAG_LABELS = {
     debug: 'Debug',
     githubImport: 'GitHub Import',
     adoptBranch: 'Adopt Branch',
-    gitRebaseSync: 'Git Rebase & Sync',
+    reactFileManager: 'React File Manager',
 };
 const FLAG_KEYS = [
     'skills',
@@ -29,7 +29,7 @@ const FLAG_KEYS = [
     'debug',
     'githubImport',
     'adoptBranch',
-    'gitRebaseSync',
+    'reactFileManager',
 ];
 export function FeatureFlagsSettingsSection({ featureFlags }) {
     const [flags, setFlags] = useState({ ...featureFlags });

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.stories.js

@@ -16,7 +16,7 @@ export const Default = {
             debug: false,
             githubImport: false,
             adoptBranch: false,
-            gitRebaseSync: false,
+            reactFileManager: false,
         },
     },
 };
@@ -28,7 +28,7 @@ export const AllEnabled = {
             debug: true,
             githubImport: true,
             adoptBranch: true,
-            gitRebaseSync: true,
+            reactFileManager: true,
         },
     },
 };
@@ -40,7 +40,7 @@ export const AllDisabled = {
             debug: false,
             githubImport: false,
             adoptBranch: false,
-            gitRebaseSync: false,
+            reactFileManager: false,
         },
     },
 };

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

@@ -121,7 +121,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
         debug: false,
         githubImport: false,
         adoptBranch: false,
-        gitRebaseSync: false,
+        reactFileManager: false,
     };
     // Agent state
     const [agentType, setAgentType] = useState(settings.agent.type);
@@ -492,8 +492,8 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                             const newFlags = { ...flags, adoptBranch: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: "Git Rebase & Sync", description: "Enable git rebase-on-main and sync-main operations", id: "flag-gitRebaseSync", testId: "switch-flag-gitRebaseSync", checked: flags.gitRebaseSync, onChange: (v) => {
-                                            const newFlags = { ...flags, gitRebaseSync: v };
+                                        } }), _jsx(SwitchRow, { label: "React File Manager", description: "Use the built-in React file manager instead of the native OS folder picker", id: "flag-reactFileManager", testId: "switch-flag-reactFileManager", checked: flags.reactFileManager, onChange: (v) => {
+                                            const newFlags = { ...flags, reactFileManager: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
                                         } })] }), _jsx(SectionHint, { children: "Experimental features that are still under development. Enable at your own risk \u2014 they may change or be removed in future versions. Debug mode adds verbose logging useful for troubleshooting." })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: "Database", description: "Local storage information", testId: "database-settings-section", children: [_jsx(SettingsRow, { label: "Location", description: "Path to the local SQLite database", children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shep-home-path", children: shepHome }) }), _jsx(SettingsRow, { label: "Size", children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [

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

@@ -32,7 +32,7 @@ export const AllSections = {
                 debug: false,
                 githubImport: false,
                 adoptBranch: false,
-                gitRebaseSync: false,
+                reactFileManager: false,
             },
         },
         shepHome: '/opt/shep',

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA8ID,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsKD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.js

@@ -8,6 +8,7 @@ import { AppSidebar } from '../../layouts/app-sidebar/index.js';
 import { FloatingActionButton, } from '../../common/floating-action-button/index.js';
 import { ThemeToggle } from '../../common/theme-toggle/index.js';
 import { SoundToggle } from '../../common/sound-toggle/index.js';
+import { ReactFileManagerDialog } from '../../common/react-file-manager-dialog/index.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
 import { GitHubImportDialog } from '../../common/github-import-dialog/index.js';
 import { AgentEventsProvider } from '../../../hooks/agent-events-provider.js';
@@ -39,9 +40,14 @@ function AppShellInner({ children }) {
     }, [router, guardedNavigate]);
     const [addingRepo, setAddingRepo] = useState(false);
     const [githubDialogOpen, setGithubDialogOpen] = useState(false);
+    const [showReactPicker, setShowReactPicker] = useState(false);
     const handleAddRepository = useCallback(async () => {
         if (addingRepo)
             return;
+        if (featureFlags.reactFileManager) {
+            setShowReactPicker(true);
+            return;
+        }
         setAddingRepo(true);
         try {
             const path = await pickFolder();
@@ -49,10 +55,20 @@ function AppShellInner({ children }) {
                 window.dispatchEvent(new CustomEvent('shep:add-repository', { detail: { path } }));
             }
         }
+        catch {
+            // Native picker failed — fall back to React file manager
+            setShowReactPicker(true);
+        }
         finally {
             setAddingRepo(false);
         }
-    }, [addingRepo]);
+    }, [addingRepo, featureFlags.reactFileManager]);
+    const handleReactPickerSelect = useCallback((path) => {
+        if (path) {
+            window.dispatchEvent(new CustomEvent('shep:add-repository', { detail: { path } }));
+        }
+        setShowReactPicker(false);
+    }, []);
     const handleImportFromGitHub = useCallback(() => {
         setGithubDialogOpen(true);
     }, []);
@@ -105,7 +121,10 @@ function AppShellInner({ children }) {
         featureFlags.githubImport,
         featureFlags.adoptBranch,
     ]);
-    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", "data-test-id": "canvas-actions-toolbar", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && hasRepositories ? (_jsx(FloatingActionButton, { actions: fabActions })) : null, featureFlags.githubImport ? (_jsx(GitHubImportDialog, { open: githubDialogOpen, onOpenChange: setGithubDialogOpen, onImportComplete: handleGitHubImportComplete })) : null] }) })] }));
+    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", "data-test-id": "canvas-actions-toolbar", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && hasRepositories ? (_jsx(FloatingActionButton, { actions: fabActions })) : null, featureFlags.githubImport ? (_jsx(GitHubImportDialog, { open: githubDialogOpen, onOpenChange: setGithubDialogOpen, onImportComplete: handleGitHubImportComplete })) : null] }) }), _jsx(ReactFileManagerDialog, { open: showReactPicker, onOpenChange: (open) => {
+                    if (!open)
+                        setShowReactPicker(false);
+                }, onSelect: handleReactPickerSelect })] }));
 }
 export function AppShell({ children }) {
     return (_jsx(AgentEventsProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx(SidebarFeaturesProvider, { children: _jsx(AppShellInner, { children: children }) }) }) }));

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.js

@@ -7,7 +7,7 @@ const defaultFeatureFlags = {
     debug: false,
     githubImport: false,
     adoptBranch: false,
-    gitRebaseSync: false,
+    reactFileManager: false,
 };
 const meta = {
     title: 'Layout/AppSidebar',

package/dist/src/presentation/web/hooks/feature-flags-context.js

@@ -7,7 +7,7 @@ const defaultFlags = {
     debug: false,
     githubImport: false,
     adoptBranch: false,
-    gitRebaseSync: false,
+    reactFileManager: false,
 };
 const FeatureFlagsContext = createContext(defaultFlags);
 /**

package/dist/src/presentation/web/lib/feature-flags.d.ts

@@ -11,7 +11,7 @@ export interface FeatureFlagsState {
     debug: boolean;
     githubImport: boolean;
     adoptBranch: boolean;
-    gitRebaseSync: boolean;
+    reactFileManager: boolean;
 }
 export declare function getFeatureFlags(): FeatureFlagsState;
 /**
@@ -24,6 +24,6 @@ export declare const featureFlags: {
     readonly debug: boolean;
     readonly githubImport: boolean;
     readonly adoptBranch: boolean;
-    readonly gitRebaseSync: boolean;
+    readonly reactFileManager: boolean;
 };
 //# sourceMappingURL=feature-flags.d.ts.map

package/dist/src/presentation/web/lib/feature-flags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/feature-flags.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,IAAI,iBAAiB,CA8BnD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;CAmBf,CAAC"}
+{"version":3,"file":"feature-flags.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/feature-flags.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,eAAe,IAAI,iBAAiB,CA8BnD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;CAmBf,CAAC"}

package/dist/src/presentation/web/lib/feature-flags.js

@@ -20,7 +20,7 @@ export function getFeatureFlags() {
                     debug: flags.debug,
                     githubImport: flags.githubImport,
                     adoptBranch: flags.adoptBranch,
-                    gitRebaseSync: flags.gitRebaseSync,
+                    reactFileManager: flags.reactFileManager,
                 };
             }
         }
@@ -36,7 +36,7 @@ export function getFeatureFlags() {
         debug: false,
         githubImport: false,
         adoptBranch: false,
-        gitRebaseSync: false,
+        reactFileManager: isEnabled(process.env.NEXT_PUBLIC_FLAG_REACT_FILE_MANAGER),
     };
 }
 /**
@@ -59,7 +59,7 @@ export const featureFlags = {
     get adoptBranch() {
         return getFeatureFlags().adoptBranch;
     },
-    get gitRebaseSync() {
-        return getFeatureFlags().gitRebaseSync;
+    get reactFileManager() {
+        return getFeatureFlags().reactFileManager;
     },
 };