@shepai/cli 1.72.3 → 1.72.4

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ControlCenter } from './control-center.js';
 import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
 import { AgentEventsProvider } from '../../../hooks/agent-events-provider.js';
+import { DrawerCloseGuardProvider } from '../../../hooks/drawer-close-guard.js';
 const meta = {
     title: 'Features/ControlCenter',
     component: ControlCenter,
@@ -10,7 +11,7 @@ const meta = {
         layout: 'fullscreen',
     },
     decorators: [
-        (Story) => (_jsx(AgentEventsProvider, { children: _jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) }) })),
+        (Story) => (_jsx(AgentEventsProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) }) }) })),
     ],
 };
 export default meta;

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,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAQnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAepD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgDD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}

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

@@ -8,25 +8,27 @@ import { AddRepositoryButton } from '../../common/add-repository-node/index.js';
 import { ThemeToggle } from '../../common/theme-toggle/index.js';
 import { SoundToggle } from '../../common/sound-toggle/index.js';
 import { AgentEventsProvider } from '../../../hooks/agent-events-provider.js';
+import { DrawerCloseGuardProvider, useDrawerCloseGuard } from '../../../hooks/drawer-close-guard.js';
 import { SidebarFeaturesProvider, useSidebarFeaturesContext, } from '../../../hooks/sidebar-features-context.js';
 import { useNotifications } from '../../../hooks/use-notifications.js';
 /** Inner shell that consumes the agent-events context for notifications. */
 function AppShellInner({ children }) {
     const router = useRouter();
+    const { guardedNavigate } = useDrawerCloseGuard();
     // Subscribe to agent lifecycle events and dispatch toast/browser notifications
     useNotifications();
     const { features } = useSidebarFeaturesContext();
     const handleNewFeature = useCallback(() => {
-        router.push('/create');
-    }, [router]);
+        guardedNavigate(() => router.push('/create'));
+    }, [router, guardedNavigate]);
     const handleFeatureClick = useCallback((featureId) => {
-        router.push(`/feature/${featureId}`);
-    }, [router]);
+        guardedNavigate(() => router.push(`/feature/${featureId}`));
+    }, [router, guardedNavigate]);
     const handleRepositorySelect = useCallback((path) => {
         window.dispatchEvent(new CustomEvent('shep:add-repository', { detail: { path } }));
     }, []);
     return (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, { features: features, onNewFeature: handleNewFeature, 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", children: [_jsx(AddRepositoryButton, { onSelect: handleRepositorySelect }), _jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children })] }) })] }));
 }
 export function AppShell({ children }) {
-    return (_jsx(AgentEventsProvider, { children: _jsx(SidebarFeaturesProvider, { children: _jsx(AppShellInner, { children: 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.js

@@ -23,7 +23,7 @@ export function AppSidebar({ features, onNewFeature, onFeatureClick, onFeaturesF
         const items = features.filter((f) => f.status === key);
         return { key, label, items };
     });
-    return (_jsxs(Sidebar, { "data-testid": "app-sidebar", collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs("div", { className: "flex h-8 items-center group-data-[collapsible=icon]:justify-center", children: [showExpanded ? (_jsxs("div", { className: [
+    return (_jsxs(Sidebar, { "data-testid": "app-sidebar", "data-no-drawer-close": true, collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs("div", { className: "flex h-8 items-center group-data-[collapsible=icon]:justify-center", children: [showExpanded ? (_jsxs("div", { className: [
                                             'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                             'transition-opacity duration-200 ease-out',
                                             expandedVisible ? 'opacity-100' : 'opacity-0',

package/dist/src/presentation/web/components/ui/alert-dialog.stories.js

@@ -17,5 +17,5 @@ export const DestructiveAction = {
     render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "destructive", children: "Delete Account" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete account?" }), _jsx(AlertDialogDescription, { children: "This will permanently delete your account and remove all associated data. This action cannot be undone." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Delete" })] })] })] })),
 };
 export const WithDescription = {
-    render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Discard Changes" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard unsaved changes?" }), _jsxs(AlertDialogDescription, { children: ["You have unsaved changes in ", _jsx("strong", { children: "3 files" }), ". If you discard now, all changes will be lost and cannot be recovered."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep Editing" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Discard" })] })] })] })),
+    render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Discard Changes" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard unsaved changes?" }), _jsxs(AlertDialogDescription, { children: ["You have unsaved changes in ", _jsx("strong", { children: "3 files" }), ". If you discard now, all changes will be lost and cannot be recovered."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogAction, { variant: "destructive", children: "Discard" }), _jsx(AlertDialogCancel, { children: "Keep Editing" })] })] })] })),
 };

package/dist/src/presentation/web/hooks/drawer-close-guard.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+interface DrawerCloseGuardContextValue {
+    /** Register a drawer's dirty state and reset callback. Pass `null` to unregister. */
+    setGuard: (guard: {
+        isDirty: boolean;
+        onReset: () => void;
+    } | null) => void;
+    /** Navigate only if no dirty drawer is registered; otherwise show confirmation. */
+    guardedNavigate: (navigate: () => void) => void;
+}
+export declare function DrawerCloseGuardProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useDrawerCloseGuard(): DrawerCloseGuardContextValue;
+export declare function useGuardedDrawerClose({ open, isDirty, onClose, onReset, }: {
+    open: boolean;
+    isDirty: boolean;
+    onClose: () => void;
+    onReset: () => void;
+}): {
+    attemptClose: () => void;
+};
+export {};
+//# sourceMappingURL=drawer-close-guard.d.ts.map

package/dist/src/presentation/web/hooks/drawer-close-guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-close-guard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/drawer-close-guard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,UAAU,4BAA4B;IACpC,qFAAqF;IACrF,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5E,mFAAmF;IACnF,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACjD;AAQD,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsD7E;AAMD,wBAAgB,mBAAmB,iCAIlC;AASD,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;;EAsBA"}

package/dist/src/presentation/web/hooks/drawer-close-guard.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useEffect, useRef, } from 'react';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../components/ui/alert-dialog.js';
+const DrawerCloseGuardContext = createContext(null);
+/* ---------------------------------------------------------------------------
+ * Provider — renders the shared confirmation dialog
+ * ------------------------------------------------------------------------- */
+export function DrawerCloseGuardProvider({ children }) {
+    // Use a ref so guard updates (on every keystroke) don't re-render the provider tree.
+    const guardRef = useRef(null);
+    const pendingNavigateRef = useRef(null);
+    const [showConfirmation, setShowConfirmation] = useState(false);
+    const setGuard = useCallback((guard) => {
+        guardRef.current = guard;
+    }, []);
+    const guardedNavigate = useCallback((navigate) => {
+        if (guardRef.current?.isDirty) {
+            pendingNavigateRef.current = navigate;
+            setShowConfirmation(true);
+            return;
+        }
+        navigate();
+    }, []);
+    const confirmDiscard = useCallback(() => {
+        setShowConfirmation(false);
+        guardRef.current?.onReset();
+        guardRef.current = null;
+        pendingNavigateRef.current?.();
+        pendingNavigateRef.current = null;
+    }, []);
+    const cancelDiscard = useCallback(() => {
+        setShowConfirmation(false);
+        pendingNavigateRef.current = null;
+    }, []);
+    return (_jsxs(DrawerCloseGuardContext, { value: { setGuard, guardedNavigate }, children: [children, _jsx(AlertDialog, { open: showConfirmation, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard unsaved changes?" }), _jsx(AlertDialogDescription, { children: "You have unsaved changes. Are you sure you want to discard them?" })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogAction, { variant: "destructive", onClick: confirmDiscard, children: "Discard" }), _jsx(AlertDialogCancel, { onClick: cancelDiscard, children: "Keep editing" })] })] }) })] }));
+}
+/* ---------------------------------------------------------------------------
+ * Hook — access the guard from any child component
+ * ------------------------------------------------------------------------- */
+export function useDrawerCloseGuard() {
+    const ctx = useContext(DrawerCloseGuardContext);
+    if (!ctx)
+        throw new Error('useDrawerCloseGuard must be used within DrawerCloseGuardProvider');
+    return ctx;
+}
+/* ---------------------------------------------------------------------------
+ * Convenience hook for drawer components
+ *
+ * Registers dirty state + reset callback with the guard, and returns an
+ * `attemptClose` function that goes through the guard before closing.
+ * ------------------------------------------------------------------------- */
+export function useGuardedDrawerClose({ open, isDirty, onClose, onReset, }) {
+    const { setGuard, guardedNavigate } = useDrawerCloseGuard();
+    // Keep the guard in sync with dirty state. Because setGuard writes to a ref,
+    // this doesn't trigger re-renders in the provider.
+    useEffect(() => {
+        if (open) {
+            setGuard({ isDirty, onReset });
+        }
+        else {
+            setGuard(null);
+        }
+        return () => setGuard(null);
+    }, [open, isDirty, onReset, setGuard]);
+    const attemptClose = useCallback(() => {
+        guardedNavigate(() => {
+            onReset();
+            onClose();
+        });
+    }, [guardedNavigate, onClose, onReset]);
+    return { attemptClose };
+}