@shepai/cli 1.75.0-pr237.5e7fa4f → 1.76.0-pr237.a9ee7f9

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAsB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA0PzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAsB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAuQzF"}

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

@@ -23,9 +23,9 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const selectedFeatureId = useSelectedFeatureId();
     const clickSound = useSoundAction('click');
     const { guardedNavigate } = useDrawerCloseGuard();
-    const { defaultViewport, onMoveEnd } = useViewportPersistence();
     const { fitView } = useReactFlow();
     const drawerTimerRef = useRef(null);
+    const { defaultViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
     const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleDeleteRepository, createFeatureNode, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features to context whenever feature node data changes
     const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
@@ -184,9 +184,12 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         handleRepositoryClick,
         handleDeleteRepository,
     ]);
+    const handleMoveEnd = useCallback((_event, viewport) => {
+        handleViewportChange(viewport);
+    }, [handleViewportChange]);
     const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
     if (!hasRepositories) {
         return _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository });
     }
-    return (_jsx(FeaturesCanvas, { nodes: nodes, edges: edges, selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: onMoveEnd, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }));
+    return (_jsx(FeaturesCanvas, { nodes: nodes, edges: edges, selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAcjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAOD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAuXpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAcjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAuXpB"}

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

@@ -18,6 +18,7 @@ const POLL_INTERVAL_MS = 3_000;
 /** Must match the message string emitted by the SSE route in agent-events/route.ts */
 const METADATA_UPDATED_MESSAGE = 'Feature metadata updated';
 let nextFeatureId = 0;
+let nextRepoTempId = 0;
 export function useControlCenterState(initialNodes, initialEdges) {
     const router = useRouter();
     const deleteSound = useSoundAction('delete');
@@ -275,7 +276,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
     }, [reconcile]);
     const handleAddRepository = useCallback((path) => {
         const wasEmpty = getRepoMapSize() === 0;
-        const tempId = `repo-temp-${Date.now()}`;
+        const tempId = `repo-temp-${++nextRepoTempId}`;
         const repoName = path
             .replace(/[\\/]+$/, '')
             .split(/[\\/]/)

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts

@@ -1,7 +1,6 @@
-import type { Connection, Edge, NodeChange } from '@xyflow/react';
+import type { Connection, Edge, NodeChange, OnMoveEnd, Viewport } from '@xyflow/react';
 import type { FeatureNodeType } from '../../common/feature-node/index.js';
 import type { RepositoryNodeType } from '../../common/repository-node/index.js';
-import { type Viewport } from '../../../hooks/use-viewport-persistence.js';
 export type CanvasNodeType = FeatureNodeType | RepositoryNodeType;
 export interface FeaturesCanvasProps {
     nodes: CanvasNodeType[];
@@ -14,9 +13,10 @@ export interface FeaturesCanvasProps {
     onPaneClick?: (event: React.MouseEvent) => void;
     onConnect?: (connection: Connection) => void;
     onCanvasDrag?: () => void;
-    onMoveEnd?: (viewport: Viewport) => void;
+    onMoveEnd?: OnMoveEnd;
+    onResetViewport?: () => Viewport;
     toolbar?: React.ReactNode;
     emptyState?: React.ReactNode;
 }
-export declare function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewport: defaultViewportProp, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, onResetViewport, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=features-canvas.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEnF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,eAAe,EAAE,mBAAmB,EACpC,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAoFrB"}
+{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAKvF,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,QAAQ,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAsFrB"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -1,15 +1,23 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { ReactFlow, Background, Controls } from '@xyflow/react';
-import { Plus } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { ReactFlow, Background, Controls, ControlButton, useReactFlow } from '@xyflow/react';
+import { Plus, RotateCcw } from 'lucide-react';
 import { Button } from '../../ui/button.js';
 import { EmptyState } from '../../common/empty-state/index.js';
 import { FeatureNode } from '../../common/feature-node/index.js';
 import { RepositoryNode } from '../../common/repository-node/index.js';
 import { DependencyEdge } from './dependency-edge.js';
-import { DEFAULT_VIEWPORT } from '../../../hooks/use-viewport-persistence.js';
-export function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewport: defaultViewportProp, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, emptyState, }) {
+const FALLBACK_VIEWPORT = { x: 30, y: 30, zoom: 0.85 };
+function ResetButton({ onResetViewport }) {
+    const { setViewport } = useReactFlow();
+    const handleReset = useCallback(() => {
+        const viewport = onResetViewport();
+        setViewport(viewport, { duration: 400 });
+    }, [onResetViewport, setViewport]);
+    return (_jsx(ControlButton, { onClick: handleReset, title: "Reset view", "aria-label": "Reset view", children: _jsx(RotateCcw, { style: { fill: 'none' } }) }));
+}
+export function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, onResetViewport, toolbar, emptyState, }) {
     const nodeTypes = useMemo(() => ({
         featureNode: FeatureNode,
         repositoryNode: RepositoryNode,
@@ -31,5 +39,5 @@ export function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewpor
         }
         return (_jsx("div", { "data-testid": "features-canvas-empty", children: _jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) }) }));
     }
-    return (_jsx("div", { "data-testid": "features-canvas", "data-no-drawer-close": true, className: "pointer-events-auto h-full w-full", children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd ? (_event, viewport) => onMoveEnd(viewport) : undefined, defaultViewport: defaultViewportProp ?? DEFAULT_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }));
+    return (_jsx("div", { "data-testid": "features-canvas", "data-no-drawer-close": true, className: "pointer-events-auto h-full w-full", children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, children: [_jsx(Background, {}), _jsx(Controls, { showInteractive: false, children: onResetViewport ? _jsx(ResetButton, { onResetViewport: onResetViewport }) : null }), toolbar] }) }));
 }

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

@@ -14,7 +14,7 @@ export declare const SingleRepositoryMultipleFeatures: Story;
 export declare const MultipleRepositories: Story;
 export declare const MultipleRepositoriesMixedConnections: Story;
 export declare const InteractiveWithRepository: Story;
-export declare const SavedViewport: Story;
-export declare const DefaultViewport: Story;
+export declare const WithSavedViewport: Story;
+export declare const ZoomedOutViewport: Story;
 export declare const FastModeFeatures: Story;
 //# sourceMappingURL=features-canvas.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAoDF,eAAO,MAAM,mCAAmC,EAAE,KAKjD,CAAC;AA4BF,eAAO,MAAM,gCAAgC,EAAE,KAO9C,CAAC;AA0DF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAiDF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAqGF,eAAO,MAAM,oCAAoC,EAAE,KAKlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAsEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}
+{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAoDF,eAAO,MAAM,mCAAmC,EAAE,KAKjD,CAAC;AA4BF,eAAO,MAAM,gCAAgC,EAAE,KAO9C,CAAC;AA0DF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAiDF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAqGF,eAAO,MAAM,oCAAoC,EAAE,KAKlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC;AAIF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAsEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FeaturesCanvas } from './features-canvas.js';
 import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+import { DEFAULT_VIEWPORT } from '../../../hooks/use-viewport-persistence.js';
 const meta = {
     title: 'Features/FeaturesCanvas',
     component: FeaturesCanvas,
@@ -517,25 +518,20 @@ export const InteractiveWithRepository = {
     },
 };
 // --- Viewport Persistence Stories ---
-export const SavedViewport = {
-    name: 'Saved Viewport (Zoomed & Panned)',
+export const WithSavedViewport = {
     args: {
         nodes: repoFeatureNodes,
         edges: repoFeatureEdges,
-        defaultViewport: { x: 200, y: 150, zoom: 1.5 },
-        onMoveEnd: (_viewport) => {
-            // Viewport change handler — visible in Storybook Actions panel
-        },
+        defaultViewport: { x: 200, y: 150, zoom: 1.0 },
+        onResetViewport: () => DEFAULT_VIEWPORT,
     },
 };
-export const DefaultViewport = {
-    name: 'Default Viewport (No Saved State)',
+export const ZoomedOutViewport = {
     args: {
-        nodes: repoFeatureNodes,
-        edges: repoFeatureEdges,
-        onMoveEnd: (_viewport) => {
-            // Viewport change handler — visible in Storybook Actions panel
-        },
+        nodes: mixedLayoutedNodes,
+        edges: mixedLayoutedEdges,
+        defaultViewport: { x: 0, y: 0, zoom: 0.5 },
+        onResetViewport: () => DEFAULT_VIEWPORT,
     },
 };
 // --- Fast-mode feature scenario ---

package/dist/src/presentation/web/hooks/use-viewport-persistence.d.ts

@@ -1,15 +1,12 @@
-export interface Viewport {
-    x: number;
-    y: number;
-    zoom: number;
-}
+import type { Viewport } from '@xyflow/react';
+export type { Viewport } from '@xyflow/react';
+export declare const STORAGE_KEY = "shep-canvas-viewport";
+export declare const DEBOUNCE_MS = 500;
 export declare const DEFAULT_VIEWPORT: Viewport;
-/**
- * Persists the ReactFlow viewport position across re-renders so the canvas
- * doesn't jump back to the origin when nodes update.
- */
-export declare function useViewportPersistence(): {
+export interface UseViewportPersistenceResult {
     defaultViewport: Viewport;
     onMoveEnd: (viewport: Viewport) => void;
-};
+    resetViewport: () => Viewport;
+}
+export declare function useViewportPersistence(): UseViewportPersistenceResult;
 //# sourceMappingURL=use-viewport-persistence.d.ts.map

package/dist/src/presentation/web/hooks/use-viewport-persistence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-viewport-persistence.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-viewport-persistence.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,EAAE,QAAkC,CAAC;AAElE;;;GAGG;AACH,wBAAgB,sBAAsB;;0BAGK,QAAQ;EAQlD"}
+{"version":3,"file":"use-viewport-persistence.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-viewport-persistence.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,eAAO,MAAM,WAAW,yBAAyB,CAAC;AAClD,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,gBAAgB,EAAE,QAAuC,CAAC;AAEvE,MAAM,WAAW,4BAA4B;IAC3C,eAAe,EAAE,QAAQ,CAAC;IAC1B,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,QAAQ,CAAC;CAC/B;AA6BD,wBAAgB,sBAAsB,IAAI,4BAA4B,CAmCrE"}

package/dist/src/presentation/web/hooks/use-viewport-persistence.js

@@ -1,17 +1,64 @@
 'use client';
-import { useCallback, useRef } from 'react';
-export const DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
-/**
- * Persists the ReactFlow viewport position across re-renders so the canvas
- * doesn't jump back to the origin when nodes update.
- */
+import { useCallback, useEffect, useRef } from 'react';
+export const STORAGE_KEY = 'shep-canvas-viewport';
+export const DEBOUNCE_MS = 500;
+export const DEFAULT_VIEWPORT = { x: 30, y: 30, zoom: 0.85 };
+function isValidViewport(value) {
+    if (value == null || typeof value !== 'object' || Array.isArray(value)) {
+        return false;
+    }
+    const v = value;
+    return (typeof v.x === 'number' &&
+        typeof v.y === 'number' &&
+        typeof v.zoom === 'number' &&
+        Number.isFinite(v.x) &&
+        Number.isFinite(v.y) &&
+        Number.isFinite(v.zoom) &&
+        v.zoom > 0);
+}
+function readViewport() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw == null)
+            return DEFAULT_VIEWPORT;
+        const parsed = JSON.parse(raw);
+        return isValidViewport(parsed) ? parsed : DEFAULT_VIEWPORT;
+    }
+    catch {
+        return DEFAULT_VIEWPORT;
+    }
+}
 export function useViewportPersistence() {
-    const viewportRef = useRef(DEFAULT_VIEWPORT);
+    const defaultViewport = useRef(readViewport()).current;
+    const timerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timerRef.current != null) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
     const onMoveEnd = useCallback((viewport) => {
-        viewportRef.current = viewport;
+        if (timerRef.current != null) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+            try {
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(viewport));
+            }
+            catch {
+                // Silently ignore localStorage errors (quota exceeded, private browsing, etc.)
+            }
+        }, DEBOUNCE_MS);
+    }, []);
+    const resetViewport = useCallback(() => {
+        try {
+            localStorage.removeItem(STORAGE_KEY);
+        }
+        catch {
+            // Silently ignore localStorage errors
+        }
+        return DEFAULT_VIEWPORT;
     }, []);
-    return {
-        defaultViewport: viewportRef.current,
-        onMoveEnd,
-    };
+    return { defaultViewport, onMoveEnd, resetViewport };
 }