@shepai/cli 1.113.0-pr309.76f9cf0 → 1.113.0-pr361.ed7b589

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAID,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,WAAW,2CAgHlE"}
+{"version":3,"file":"log-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,WAAW,2CA6ElE"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.js

@@ -1,12 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useState, useCallback } from 'react';
-import { AlertCircle, Terminal, ArrowDown, Code, FileText } from 'lucide-react';
-import { EventLogViewer } from './event-log-viewer.js';
+import { AlertCircle, Terminal, ArrowDown } from 'lucide-react';
 export function LogTab({ content, isConnected, error }) {
     const containerRef = useRef(null);
     const [autoScroll, setAutoScroll] = useState(true);
-    const [viewMode, setViewMode] = useState('structured');
     const handleScroll = useCallback(() => {
         const el = containerRef.current;
         if (!el)
@@ -33,11 +31,5 @@ export function LogTab({ content, isConnected, error }) {
     if (!content) {
         return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Terminal, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No log output yet" }), isConnected ? (_jsx("p", { className: "text-muted-foreground text-xs", children: "Waiting for log data..." })) : null] }));
     }
-    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setViewMode('structured'), className: `rounded p-1 transition-colors ${viewMode === 'structured'
-                                    ? 'bg-muted text-foreground'
-                                    : 'text-muted-foreground hover:text-foreground'}`, title: "Structured view", children: _jsx(FileText, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => setViewMode('raw'), className: `rounded p-1 transition-colors ${viewMode === 'raw'
-                                    ? 'bg-muted text-foreground'
-                                    : 'text-muted-foreground hover:text-foreground'}`, title: "Raw view", children: _jsx(Code, { className: "h-3.5 w-3.5" }) }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ml-1 flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] })] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: `flex-1 overflow-y-auto ${viewMode === 'raw'
-                    ? 'bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300'
-                    : 'bg-background'}`, children: viewMode === 'structured' ? _jsx(EventLogViewer, { content: content }) : content })] }));
+    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ml-auto flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: "flex-1 overflow-y-auto bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300", children: content })] }));
 }

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts

@@ -3,12 +3,10 @@ import { LogTab } from './log-tab.js';
 declare const meta: Meta<typeof LogTab>;
 export default meta;
 type Story = StoryObj<typeof LogTab>;
-/** Default — structured agent log output with live connection (claude-code). */
+/** Default — typical agent log output with live connection. */
 export declare const Default: Story;
-/** LongStructured — 100 structured events to test scrolling behavior. */
-export declare const LongStructured: Story;
-/** RawFallback — unstructured log content falls back gracefully. */
-export declare const RawFallback: Story;
+/** LongLog — 200 lines of log output to test scrolling behavior. */
+export declare const LongLog: Story;
 /** Disconnected — log content present but connection is lost. */
 export declare const Disconnected: Story;
 /** Empty — no log content yet, connected and waiting. */

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AA6GrC,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
+{"version":3,"file":"log-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAqCrC,+DAA+D;AAC/D,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.js

@@ -8,61 +8,14 @@ const meta = {
         layout: 'fullscreen',
     },
     decorators: [
-        (Story) => (_jsx("div", { style: { height: '600px', width: '480px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { style: { height: '600px', width: '400px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
 /* ---------------------------------------------------------------------------
  * Data fixtures
  * ------------------------------------------------------------------------- */
-const structuredLogContent = `[2026-03-08T10:00:01.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting worker — full command:
-[2026-03-08T10:00:01.001Z] [claude-code|claude-sonnet-4-6] [WORKER]   feature-agent-worker --feature-id auth-module --run-id run-123 --repo /home/user/myproject --agent-type claude-code --model claude-sonnet-4-6
-[2026-03-08T10:00:01.010Z] [claude-code|claude-sonnet-4-6] [WORKER] Initializing container...
-[2026-03-08T10:00:01.050Z] [claude-code|claude-sonnet-4-6] [WORKER] Creating executor from pinned agent type: claude-code
-[2026-03-08T10:00:01.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Updating status to running (PID 54321)...
-[2026-03-08T10:00:01.110Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting graph invocation...
-[2026-03-08T10:00:05.000Z] [requirements] [claude-code|claude-sonnet-4-6] Starting...
-[2026-03-08T10:00:05.010Z] [requirements] [claude-code|claude-sonnet-4-6] Executing agent at cwd=/home/user/myproject
-[2026-03-08T10:00:05.020Z] [requirements] [claude-code|claude-sonnet-4-6] Prompt length: 2847 chars
-[2026-03-08T10:00:05.100Z] [requirements] [claude-code|claude-sonnet-4-6] Spawning: claude -p "Analyze this project..." --output-format stream-json --verbose
-[2026-03-08T10:00:05.102Z] [requirements] [claude-code|claude-sonnet-4-6] Subprocess PID: 54322
-[2026-03-08T10:00:08.234Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/main.ts"}
-[2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [text] Analyzing the codebase structure and identifying key entry points for the authentication module
-[2026-03-08T10:00:12.567Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Glob {"pattern": "src/**/*.ts"}
-[2026-03-08T10:00:14.789Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/auth/providers.ts"}
-[2026-03-08T10:00:16.012Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Grep {"pattern": "interface.*Auth", "path": "src/"}
-[2026-03-08T10:00:18.234Z] [requirements] [claude-code|claude-sonnet-4-6] [text] The project uses a clean architecture pattern with dependency injection. I can see the auth interfaces are defined in the domain layer
-[2026-03-08T10:00:20.456Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "find src -name '*.test.ts' | wc -l"}
-[2026-03-08T10:00:45.789Z] [requirements] [claude-code|claude-sonnet-4-6] [result] 8920 chars, session=sess-abc123def456
-[2026-03-08T10:00:45.790Z] [requirements] [claude-code|claude-sonnet-4-6] [tokens] 2450 in / 4560 out
-[2026-03-08T10:00:45.791Z] [requirements] [claude-code|claude-sonnet-4-6] Process closed with code 0, result=8920 chars
-[2026-03-08T10:00:45.800Z] [requirements] [claude-code|claude-sonnet-4-6] Complete (8920 chars, 40.8s)
-[2026-03-08T10:00:45.900Z] [requirements] [claude-code|claude-sonnet-4-6] Interrupting for human approval
-[2026-03-08T10:02:30.000Z] [requirements] [claude-code|claude-sonnet-4-6] Phase approved, skipping re-execution
-[2026-03-08T10:02:30.100Z] [plan] [claude-code|claude-sonnet-4-6] Starting...
-[2026-03-08T10:02:30.110Z] [plan] [claude-code|claude-sonnet-4-6] Executing agent at cwd=/home/user/myproject
-[2026-03-08T10:02:30.120Z] [plan] [claude-code|claude-sonnet-4-6] Prompt length: 15234 chars
-[2026-03-08T10:02:35.100Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "CLAUDE.md"}
-[2026-03-08T10:02:38.200Z] [plan] [claude-code|claude-sonnet-4-6] [text] Creating implementation plan with TDD approach as required by project conventions
-[2026-03-08T10:02:42.300Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "specs/001-auth/plan.yaml"}
-[2026-03-08T10:02:45.400Z] [plan] [claude-code|claude-sonnet-4-6] [text] Plan includes 3 phases: scaffold auth module, implement OAuth2 providers, add tests and documentation
-[2026-03-08T10:03:15.234Z] [plan] [claude-code|claude-sonnet-4-6] [result] 12345 chars, session=sess-abc123def456
-[2026-03-08T10:03:15.235Z] [plan] [claude-code|claude-sonnet-4-6] [tokens] 8900 in / 3456 out
-[2026-03-08T10:03:15.300Z] [plan] [claude-code|claude-sonnet-4-6] Complete (12345 chars, 45.1s)
-[2026-03-08T10:05:00.000Z] [implement] [claude-code|claude-sonnet-4-6] Starting...
-[2026-03-08T10:05:01.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/oauth-provider.ts"}
-[2026-03-08T10:05:03.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/token-manager.ts"}
-[2026-03-08T10:05:05.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Edit {"file_path": "src/auth/index.ts"}
-[2026-03-08T10:05:07.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:unit"}
-[2026-03-08T10:05:30.000Z] [implement] [claude-code|claude-sonnet-4-6] [text] All 14 unit tests passing. Moving to integration tests
-[2026-03-08T10:05:35.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:int"}
-[2026-03-08T10:05:55.000Z] [implement] [claude-code|claude-sonnet-4-6] [result] 24560 chars, session=sess-abc123def456
-[2026-03-08T10:05:55.001Z] [implement] [claude-code|claude-sonnet-4-6] [tokens] 15200 in / 9360 out
-[2026-03-08T10:05:55.100Z] [implement] [claude-code|claude-sonnet-4-6] Complete (24560 chars, 54.1s)
-[2026-03-08T10:06:00.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Graph invocation completed. Error: none
-[2026-03-08T10:06:00.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Run marked as completed
-[2026-03-08T10:06:00.200Z] [claude-code|claude-sonnet-4-6] [WORKER] Worker completed successfully, exiting.`;
-const rawLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature "auth-module"
+const typicalLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature "auth-module"
 [2026-03-08T10:00:02.789Z] Agent started — analyzing codebase
 [2026-03-08T10:00:03.456Z] Scanning repository structure...
 [2026-03-08T10:00:04.012Z] Found 127 source files across 14 packages
@@ -82,58 +35,22 @@ const rawLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature
 [2026-03-08T10:00:24.789Z] Phase 3: add tests and documentation
 [2026-03-08T10:00:26.456Z] Generating test suite...
 [2026-03-08T10:00:28.012Z] All phases complete — feature "auth-module" ready for review`;
-const longStructuredContent = Array.from({ length: 100 }, (_, i) => {
-    const min = String(Math.floor(i / 60)).padStart(2, '0');
-    const sec = String(i % 60).padStart(2, '0');
-    const ms = String((i * 7) % 1000).padStart(3, '0');
-    const ts = `2026-03-08T10:${min}:${sec}.${ms}Z`;
-    const phase = ['requirements', 'research', 'plan', 'implement'][i % 4];
-    const tags = ['[tool]', '[text]', '[tool]', '[text]', '[result]', '[tokens]'];
-    const tag = tags[i % tags.length];
-    const messages = {
-        '[tool]': [
-            'Read {"file_path": "src/components/button.tsx"}',
-            'Bash {"command": "pnpm test:unit"}',
-            'Grep {"pattern": "export function", "path": "src/"}',
-            'Write {"file_path": "src/new-file.ts"}',
-            'Glob {"pattern": "**/*.test.ts"}',
-        ],
-        '[text]': [
-            'Analyzing the component structure for potential improvements',
-            'The test suite is comprehensive with good coverage',
-            'Implementing the authentication flow with OAuth2 providers',
-            'Refactoring to use dependency injection pattern',
-        ],
-        '[result]': ['4520 chars, session=sess-xyz789'],
-        '[tokens]': ['3200 in / 1800 out'],
-    };
-    const msgList = messages[tag] ?? messages['[text]'];
-    const msg = msgList[i % msgList.length];
-    return `[${ts}] [${phase}] [claude-code|claude-sonnet-4-6] ${tag} ${msg}`;
-}).join('\n');
+const longLogContent = Array.from({ length: 200 }, (_, i) => `[2026-03-08T10:${String(Math.floor(i / 60)).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}.${String((i * 7) % 1000).padStart(3, '0')}Z] Step ${i + 1}: processing task batch ${Math.floor(i / 10) + 1} — file ${i + 1} of 200`).join('\n');
 /* ---------------------------------------------------------------------------
  * Stories
  * ------------------------------------------------------------------------- */
-/** Default — structured agent log output with live connection (claude-code). */
+/** Default — typical agent log output with live connection. */
 export const Default = {
     args: {
-        content: structuredLogContent,
+        content: typicalLogContent,
         isConnected: true,
         error: null,
     },
 };
-/** LongStructured — 100 structured events to test scrolling behavior. */
-export const LongStructured = {
+/** LongLog — 200 lines of log output to test scrolling behavior. */
+export const LongLog = {
     args: {
-        content: longStructuredContent,
-        isConnected: true,
-        error: null,
-    },
-};
-/** RawFallback — unstructured log content falls back gracefully. */
-export const RawFallback = {
-    args: {
-        content: rawLogContent,
+        content: longLogContent,
         isConnected: true,
         error: null,
     },
@@ -141,7 +58,7 @@ export const RawFallback = {
 /** Disconnected — log content present but connection is lost. */
 export const Disconnected = {
     args: {
-        content: structuredLogContent,
+        content: typicalLogContent,
         isConnected: false,
         error: null,
     },

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,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAuB5E,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,2CAqUzF"}
+{"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;AAuB5E,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,2CAgVzF"}

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

@@ -25,7 +25,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const { guardedNavigate } = useDrawerCloseGuard();
     const { fitView } = useReactFlow();
     const drawerTimerRef = useRef(null);
-    const { defaultViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
+    const { defaultViewport, hasSavedViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
     const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleRetryFeature, handleDeleteRepository, createFeatureNode, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features to context whenever feature node data changes
     const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
@@ -204,6 +204,16 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         handleRepositoryClick,
         handleDeleteRepository,
     ]);
+    // Auto-center on initial load when there's no saved viewport and nodes exist.
+    // This ensures the first repo is visible instead of being stuck in the top-left corner.
+    const didInitialFitRef = useRef(false);
+    useEffect(() => {
+        if (didInitialFitRef.current || hasSavedViewport || nodes.length === 0)
+            return;
+        didInitialFitRef.current = true;
+        // Yield to React so nodes are rendered in the DOM before fitView calculates bounds.
+        setTimeout(() => fitView(AUTO_FOCUS_OPTIONS), 0);
+    }, [hasSavedViewport, nodes.length, fitView]);
     const handleMoveEnd = useCallback((_event, viewport) => {
         handleViewportChange(viewport);
     }, [handleViewportChange]);

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

@@ -5,6 +5,8 @@ export declare const DEBOUNCE_MS = 500;
 export declare const DEFAULT_VIEWPORT: Viewport;
 export interface UseViewportPersistenceResult {
     defaultViewport: Viewport;
+    /** True when a valid viewport was restored from localStorage. */
+    hasSavedViewport: boolean;
     onMoveEnd: (viewport: Viewport) => void;
     resetViewport: () => Viewport;
 }

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":"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"}
+{"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,iEAAiE;IACjE,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,QAAQ,CAAC;CAC/B;AA8BD,wBAAgB,sBAAsB,IAAI,4BAA4B,CAqCrE"}

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

@@ -20,16 +20,20 @@ function readViewport() {
     try {
         const raw = localStorage.getItem(STORAGE_KEY);
         if (raw == null)
-            return DEFAULT_VIEWPORT;
+            return { viewport: DEFAULT_VIEWPORT, fromStorage: false };
         const parsed = JSON.parse(raw);
-        return isValidViewport(parsed) ? parsed : DEFAULT_VIEWPORT;
+        if (isValidViewport(parsed))
+            return { viewport: parsed, fromStorage: true };
+        return { viewport: DEFAULT_VIEWPORT, fromStorage: false };
     }
     catch {
-        return DEFAULT_VIEWPORT;
+        return { viewport: DEFAULT_VIEWPORT, fromStorage: false };
     }
 }
 export function useViewportPersistence() {
-    const defaultViewport = useRef(readViewport()).current;
+    const stored = useRef(readViewport()).current;
+    const defaultViewport = stored.viewport;
+    const hasSavedViewport = stored.fromStorage;
     const timerRef = useRef(null);
     useEffect(() => {
         return () => {
@@ -60,5 +64,5 @@ export function useViewportPersistence() {
         }
         return DEFAULT_VIEWPORT;
     }, []);
-    return { defaultViewport, onMoveEnd, resetViewport };
+    return { defaultViewport, hasSavedViewport, onMoveEnd, resetViewport };
 }

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,EAAE,aAIpC,CAAC;AAkCF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAqL/B"}
+{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,EAAE,aAIpC,CAAC;AAkCF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CA8L/B"}

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -78,6 +78,10 @@ export function layoutWithDagre(nodes, edges, opts = {}) {
     // Add disconnected nodes to centerMap so they participate in root positioning.
     // Use the same primary-axis position as connected roots (rank 0) so they align
     // visually with repos that have features attached.
+    // When there are NO connected nodes (e.g. repos with no features), use half the
+    // node's own dimension so the leading edge sits at the canvas origin — preventing
+    // nodes from rendering off-screen with the default viewport.
+    const hasCenterMap = centerMap.size > 0;
     let rootPrimaryAxis = 0;
     for (const c of centerMap.values()) {
         rootPrimaryAxis = isHorizontal ? c.cx : c.cy;
@@ -85,9 +89,14 @@ export function layoutWithDagre(nodes, edges, opts = {}) {
     }
     for (const node of disconnectedNodes) {
         const size = getNodeSize(node, nodeSize);
+        const primaryAxisCenter = hasCenterMap
+            ? rootPrimaryAxis
+            : isHorizontal
+                ? size.width / 2
+                : size.height / 2;
         centerMap.set(node.id, {
-            cx: isHorizontal ? rootPrimaryAxis : 0,
-            cy: isHorizontal ? 0 : rootPrimaryAxis,
+            cx: isHorizontal ? primaryAxisCenter : 0,
+            cy: isHorizontal ? 0 : primaryAxisCenter,
             w: size.width,
             h: size.height,
         });