@shepai/cli 1.122.0-pr392.ff1c944 → 1.122.1-pr361.35a9abd

package/dist/packages/core/src/infrastructure/services/agents/feature-agent/feature-agent-graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-agent-graph.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/core/src/infrastructure/services/agents/feature-agent/feature-agent-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+DAA+D,CAAC;AAOpG,OAAO,EAAmB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AASlF,OAAO,EAAE,sBAAsB,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE5E;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;CACjD;AA0HD;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,EAAE,qBAAqB,GAAG,cAAc,EACtD,YAAY,CAAC,EAAE,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAwEnC"}
+{"version":3,"file":"feature-agent-graph.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/core/src/infrastructure/services/agents/feature-agent/feature-agent-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+DAA+D,CAAC;AAOpG,OAAO,EAAmB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAclF,OAAO,EAAE,sBAAsB,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE5E;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;CACjD;AAwID;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,EAAE,qBAAqB,GAAG,cAAc,EACtD,YAAY,CAAC,EAAE,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgFnC"}

package/dist/packages/core/src/infrastructure/services/agents/feature-agent/feature-agent-graph.js

@@ -11,7 +11,7 @@ import { createRepairNode } from './nodes/repair.node.js';
 import { validateSpecAnalyze, validateSpecRequirements } from './nodes/schemas/spec.schema.js';
 import { validateResearch } from './nodes/schemas/research.schema.js';
 import { validatePlan, validateTasks } from './nodes/schemas/plan.schema.js';
-import { readSpecFile, safeYamlLoad, createNodeLogger } from './nodes/node-helpers.js';
+import { readSpecFile, safeYamlLoad, createNodeLogger, getCompletedPhases, } from './nodes/node-helpers.js';
 // Re-export state types for consumers
 export { FeatureAgentAnnotation } from './state.js';
 /**
@@ -54,6 +54,18 @@ function createPlanTasksValidator() {
     const log = createNodeLogger('validate:plan+tasks');
     return async (state) => {
         log.activate();
+        // Skip validation when the successor phase (implement) is already completed.
+        // This proves validation already passed and the pipeline progressed beyond it.
+        // Same logic as createValidateNode's successorPhase guard.
+        if (getCompletedPhases(state.specDir).includes('implement')) {
+            log.info("Successor phase 'implement' already completed, skipping validation");
+            return {
+                lastValidationTarget: 'plan.yaml+tasks.yaml',
+                lastValidationErrors: [],
+                validationRetries: 0,
+                messages: ["[validate:plan+tasks] SKIP (successor 'implement' already completed)"],
+            };
+        }
         log.info('Validating plan.yaml and tasks.yaml');
         const allErrors = [];
         // Validate plan.yaml
@@ -145,9 +157,14 @@ export function createFeatureAgentGraph(depsOrExecutor, checkpointer) {
         .addNode('plan', createPlanNode(executor))
         .addNode('implement', createImplementNode(executor))
         // --- Validate nodes ---
-        .addNode('validate_spec_analyze', createValidateNode('spec.yaml', validateSpecAnalyze))
-        .addNode('validate_spec_requirements', createValidateNode('spec.yaml', validateSpecRequirements))
-        .addNode('validate_research', createValidateNode('research.yaml', validateResearch))
+        // Each validate node receives its SUCCESSOR phase name (the phase that runs
+        // after validation passes). On resume, validation is skipped only when the
+        // successor is already completed — proving this validation already passed.
+        // Using the successor (not the producer) avoids skipping validation when the
+        // producer ran successfully but validation itself failed.
+        .addNode('validate_spec_analyze', createValidateNode('spec.yaml', validateSpecAnalyze, 'requirements'))
+        .addNode('validate_spec_requirements', createValidateNode('spec.yaml', validateSpecRequirements, 'research'))
+        .addNode('validate_research', createValidateNode('research.yaml', validateResearch, 'plan'))
         .addNode('validate_plan_tasks', createPlanTasksValidator())
         // --- Repair nodes ---
         .addNode('repair_spec_analyze', createRepairNode('spec.yaml', executor))

package/dist/packages/core/src/infrastructure/services/agents/feature-agent/nodes/validate.node.d.ts

@@ -6,7 +6,13 @@ type SchemaValidator = (data: unknown) => ValidationResult;
  *
  * On success: resets validationRetries to 0, clears errors.
  * On failure: increments validationRetries, sets errors for repair node.
+ *
+ * @param successorPhase - The phase that runs AFTER this validation passes.
+ *   If provided, skip validation when the successor is already completed — this
+ *   proves the validation already passed in a prior run and the pipeline progressed
+ *   beyond it. Checking the successor (not the producer) avoids skipping validation
+ *   when the producer ran but validation itself failed.
  */
-export declare function createValidateNode(filename: string, schema: SchemaValidator): (state: FeatureAgentState) => Promise<Partial<FeatureAgentState>>;
+export declare function createValidateNode(filename: string, schema: SchemaValidator, successorPhase?: string): (state: FeatureAgentState) => Promise<Partial<FeatureAgentState>>;
 export {};
 //# sourceMappingURL=validate.node.d.ts.map

package/dist/packages/core/src/infrastructure/services/agents/feature-agent/nodes/validate.node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validate.node.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/core/src/infrastructure/services/agents/feature-agent/nodes/validate.node.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,gBAAgB,CAAC;AAE3D;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,eAAe,GACtB,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAuDnE"}
+{"version":3,"file":"validate.node.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/core/src/infrastructure/services/agents/feature-agent/nodes/validate.node.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAQhE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,gBAAgB,CAAC;AAE3D;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,eAAe,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAyEnE"}

package/dist/packages/core/src/infrastructure/services/agents/feature-agent/nodes/validate.node.js

@@ -1,14 +1,36 @@
-import { readSpecFile, safeYamlLoad, createNodeLogger } from './node-helpers.js';
+import { readSpecFile, safeYamlLoad, createNodeLogger, getCompletedPhases, } from './node-helpers.js';
 /**
  * Factory that creates a validate node for a specific YAML file.
  *
  * On success: resets validationRetries to 0, clears errors.
  * On failure: increments validationRetries, sets errors for repair node.
+ *
+ * @param successorPhase - The phase that runs AFTER this validation passes.
+ *   If provided, skip validation when the successor is already completed — this
+ *   proves the validation already passed in a prior run and the pipeline progressed
+ *   beyond it. Checking the successor (not the producer) avoids skipping validation
+ *   when the producer ran but validation itself failed.
  */
-export function createValidateNode(filename, schema) {
+export function createValidateNode(filename, schema, successorPhase) {
     const log = createNodeLogger(`validate:${filename}`);
     return async (state) => {
         log.activate();
+        // Skip validation when the successor phase is already completed.
+        // This means: the validation already passed in a prior run AND the next phase
+        // ran successfully. On resume, LangGraph replays nodes from the last checkpoint.
+        // The producer node skips (via getCompletedPhases), but if we only checked the
+        // producer we'd also skip validation when it previously FAILED (since
+        // markPhaseComplete runs before validation). Checking the successor is safe:
+        // if the successor completed, this validation must have passed to get there.
+        if (successorPhase && getCompletedPhases(state.specDir).includes(successorPhase)) {
+            log.info(`Successor phase '${successorPhase}' already completed, skipping validation`);
+            return {
+                lastValidationTarget: filename,
+                lastValidationErrors: [],
+                validationRetries: 0,
+                messages: [`[validate:${filename}] SKIP (successor '${successorPhase}' already completed)`],
+            };
+        }
         log.info(`Validating ${filename}`);
         const content = readSpecFile(state.specDir, filename);
         if (!content) {

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CA+jB1F"}
+{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CAqkB1F"}

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.js

@@ -194,6 +194,10 @@ export function FeatureDrawerClient({ view: initialView, urlTab }) {
             if (result.iterationWarning) {
                 toast.warning(`Iteration ${result.iteration} — consider approving or adjusting feedback to avoid excessive iterations`);
             }
+            // Optimistically update canvas node before SSE arrives (~500ms delay)
+            window.dispatchEvent(new CustomEvent('shep:feature-approved', {
+                detail: { featureId: featureNode.featureId },
+            }));
             onClose();
             onDone?.();
         }

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

@@ -1 +1 @@
-{"version":3,"file":"activity-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,yCAAyC,CAAC;AAmEjD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAC7C;AAmED;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EAAE,EAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,GACjC,iBAAiB,EAAE,CAgErB;AA6BD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,2CAqE3F"}
+{"version":3,"file":"activity-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,yCAAyC,CAAC;AA4DjD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAC7C;AA6BD;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EAAE,EAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,GACjC,iBAAiB,EAAE,CAgErB;AAMD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,2CAqE3F"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { Loader2, AlertCircle, Clock, Zap, DollarSign, Play, RotateCcw, CheckCircle2, XCircle, Square, Ban, MessageSquare, Timer, } from 'lucide-react';
+import { Loader2, AlertCircle, Clock, Zap, DollarSign } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { formatDuration } from '../../../lib/format-duration.js';
 /**
@@ -51,13 +51,6 @@ function formatTokens(count) {
         return `${(count / 1_000).toFixed(1)}K`;
     return String(count);
 }
-/** Format a timestamp to a short local time string (e.g. "10:05:30 AM"). */
-function formatTimestamp(value) {
-    const d = value instanceof Date ? value : new Date(String(value));
-    if (Number.isNaN(d.getTime()))
-        return '';
-    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-}
 /** Format a USD cost with appropriate precision. */
 function formatCost(usd) {
     if (usd >= 1)
@@ -75,48 +68,13 @@ const NODE_TO_PHASE = {
     merge: 'Merging',
 };
 const LIFECYCLE_EVENTS = {
-    'run:started': {
-        label: 'started',
-        colorClass: 'text-blue-600',
-        bgClass: 'bg-blue-50 dark:bg-blue-950/30',
-        icon: Play,
-    },
-    'run:resumed': {
-        label: 'resumed',
-        colorClass: 'text-blue-600',
-        bgClass: 'bg-blue-50 dark:bg-blue-950/30',
-        icon: RotateCcw,
-    },
-    'run:completed': {
-        label: 'completed',
-        colorClass: 'text-emerald-600',
-        bgClass: 'bg-emerald-50 dark:bg-emerald-950/30',
-        icon: CheckCircle2,
-    },
-    'run:failed': {
-        label: 'failed',
-        colorClass: 'text-red-600',
-        bgClass: 'bg-red-50 dark:bg-red-950/30',
-        icon: XCircle,
-    },
-    'run:stopped': {
-        label: 'stopped',
-        colorClass: 'text-amber-600',
-        bgClass: 'bg-amber-50 dark:bg-amber-950/30',
-        icon: Square,
-    },
-    'run:crashed': {
-        label: 'crashed',
-        colorClass: 'text-red-600',
-        bgClass: 'bg-red-50 dark:bg-red-950/30',
-        icon: XCircle,
-    },
-    'run:rejected': {
-        label: 'rejected',
-        colorClass: 'text-orange-600',
-        bgClass: 'bg-orange-50 dark:bg-orange-950/30',
-        icon: Ban,
-    },
+    'run:started': { label: 'started', colorClass: 'text-blue-600' },
+    'run:resumed': { label: 'resumed', colorClass: 'text-blue-600' },
+    'run:completed': { label: 'completed', colorClass: 'text-emerald-600' },
+    'run:failed': { label: 'failed', colorClass: 'text-red-600' },
+    'run:stopped': { label: 'stopped', colorClass: 'text-amber-600' },
+    'run:crashed': { label: 'crashed', colorClass: 'text-red-600' },
+    'run:rejected': { label: 'rejected', colorClass: 'text-orange-600' },
 };
 function isLifecycleEvent(phase) {
     return phase.startsWith('run:');
@@ -188,26 +146,6 @@ export function buildLifecycleTimeline(timings, feedback) {
     }
     return iterations;
 }
-/** Determine the outcome status of an iteration */
-function getIterationOutcome(iteration) {
-    const lastLifecycle = [...iteration.timings].reverse().find((t) => isLifecycleEvent(t.phase));
-    if (!lastLifecycle)
-        return null;
-    switch (lastLifecycle.phase) {
-        case 'run:rejected':
-            return { label: 'Rejected', colorClass: 'text-orange-600', dotClass: 'bg-orange-500' };
-        case 'run:completed':
-            return { label: 'Completed', colorClass: 'text-emerald-600', dotClass: 'bg-emerald-500' };
-        case 'run:failed':
-            return { label: 'Failed', colorClass: 'text-red-600', dotClass: 'bg-red-500' };
-        case 'run:crashed':
-            return { label: 'Crashed', colorClass: 'text-red-600', dotClass: 'bg-red-500' };
-        case 'run:stopped':
-            return { label: 'Stopped', colorClass: 'text-amber-600', dotClass: 'bg-amber-500' };
-        default:
-            return null;
-    }
-}
 /* ---------------------------------------------------------------------------
  * Component
  * ------------------------------------------------------------------------- */
@@ -217,10 +155,10 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
         return (_jsx("div", { "data-testid": "activity-tab-loading", className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
     }
     if (error) {
-        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-base text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
+        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-sm text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
     }
     if (!timings || timings.length === 0) {
-        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Clock, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-base", children: "No activity recorded yet" })] }));
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Clock, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No activity recorded yet" })] }));
     }
     const nodeTimings = timings.filter((t) => !isLifecycleEvent(t.phase));
     const maxDurationMs = Math.max(...nodeTimings.map((t) => getEffectiveDuration(t, now)), ...nodeTimings.map((t) => t.approvalWaitMs ?? 0), 0);
@@ -231,36 +169,35 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
     const totalInputTokens = nodeTimings.reduce((sum, t) => sum + (t.inputTokens ?? 0), 0);
     const totalOutputTokens = nodeTimings.reduce((sum, t) => sum + (t.outputTokens ?? 0), 0);
     const totalCostUsd = nodeTimings.reduce((sum, t) => sum + (t.costUsd ?? 0), 0);
-    return (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs, now: now }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs, totalInputTokens: totalInputTokens, totalOutputTokens: totalOutputTokens, totalCostUsd: totalCostUsd })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs, now: now }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs, totalInputTokens: totalInputTokens, totalOutputTokens: totalOutputTokens, totalCostUsd: totalCostUsd })) : null] }));
 }
 /* ---------------------------------------------------------------------------
  * Iteration group — one cycle of work
  * ------------------------------------------------------------------------- */
 function IterationGroup({ iteration, showHeader, maxDurationMs, now, }) {
-    const outcome = getIterationOutcome(iteration);
-    return (_jsxs("div", { "data-testid": `iteration-${iteration.number}`, className: "border-border/50 bg-card/50 flex flex-col overflow-hidden rounded-lg border", children: [showHeader ? (_jsxs("div", { className: "bg-muted/30 border-border/50 flex items-center justify-between border-b px-3 py-1.5", children: [_jsxs("span", { className: "text-muted-foreground text-sm font-semibold tracking-wide", children: ["Iteration ", iteration.number] }), outcome ? (_jsxs("span", { className: `flex items-center gap-1 text-xs font-medium ${outcome.colorClass}`, children: [_jsx("span", { className: `inline-block h-1.5 w-1.5 rounded-full ${outcome.dotClass}` }), outcome.label] })) : null] })) : null, _jsxs("div", { className: "relative flex flex-col", children: [_jsx("div", { className: "bg-border/60 absolute top-4 bottom-4 left-[21.5px] w-px" }), iteration.timings.map((t, idx) => {
-                        if (isLifecycleEvent(t.phase)) {
-                            const isRejection = t.phase === 'run:rejected';
-                            return (_jsx(LifecycleEventRow, { timing: t, message: isRejection ? iteration.rejectionMessage : undefined, attachments: isRejection ? iteration.rejectionAttachments : undefined, isFirst: idx === 0, isLast: idx === iteration.timings.length - 1 }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
-                        }
-                        return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
-                    })] })] }));
+    return (_jsxs("div", { "data-testid": `iteration-${iteration.number}`, className: "flex flex-col gap-1.5", children: [showHeader ? (_jsxs("div", { className: "text-muted-foreground text-xs font-medium", children: ["Iteration ", iteration.number] })) : null, iteration.timings.map((t) => {
+                if (isLifecycleEvent(t.phase)) {
+                    // For run:rejected, the message comes from the iteration, not a separate map
+                    const isRejection = t.phase === 'run:rejected';
+                    return (_jsx(LifecycleEventRow, { timing: t, message: isRejection ? iteration.rejectionMessage : undefined, attachments: isRejection ? iteration.rejectionAttachments : undefined }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+                }
+                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+            })] }));
 }
 /* ---------------------------------------------------------------------------
  * Row components
  * ------------------------------------------------------------------------- */
-function LifecycleEventRow({ timing, message, attachments, isFirst, isLast, }) {
+function LifecycleEventRow({ timing, message, attachments, }) {
     const event = LIFECYCLE_EVENTS[timing.phase];
     if (!event)
         return null;
     const hasAttachments = attachments && attachments.length > 0;
-    const Icon = event.icon;
-    return (_jsxs("div", { className: `relative flex flex-col gap-1 px-3 ${isFirst ? 'pt-2' : 'pt-1'} ${isLast ? 'pb-2' : 'pb-1'}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `relative z-10 flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${event.bgClass}`, children: _jsx(Icon, { className: `h-3 w-3 ${event.colorClass}` }) }), _jsx("span", { className: `text-sm font-medium ${event.colorClass}`, children: event.label }), timing.startedAt &&
-                        !(typeof timing.startedAt === 'string' && timing.startedAt.startsWith('synthetic')) ? (_jsx("span", { className: "text-muted-foreground/60 ml-auto text-xs tabular-nums", children: formatTimestamp(String(timing.startedAt)) })) : null] }), message ? (_jsxs("div", { className: "ml-[26px] flex items-start gap-1.5 rounded-md bg-orange-50/50 px-2 py-1.5 dark:bg-orange-950/20", children: [_jsx(MessageSquare, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-orange-400" }), _jsxs("span", { "data-testid": "rejection-feedback-text", className: "text-muted-foreground text-xs leading-relaxed italic", children: ["\u2014 ", message] })] })) : null, hasAttachments ? (_jsx("div", { "data-testid": "rejection-feedback-attachments", className: "ml-[26px]", children: _jsx(InlineAttachments, { text: "", attachmentPaths: attachments }) })) : null] }));
+    return (_jsxs("div", { className: `text-xs ${event.colorClass}`, children: [_jsx("span", { children: event.label }), message ? (_jsxs("span", { "data-testid": "rejection-feedback-text", className: "text-muted-foreground ml-2 font-normal italic", children: ["\u2014 ", message] })) : null, hasAttachments ? (_jsx("div", { "data-testid": "rejection-feedback-attachments", className: "mt-1.5 ml-2", children: _jsx(InlineAttachments, { text: "", attachmentPaths: attachments }) })) : null] }));
 }
 function NodeTimingRow({ timing, maxDurationMs, now, }) {
     const suffix = timing.phase.includes(':') ? timing.phase.split(':')[1] : null;
     const isSubPhase = suffix !== null;
+    // Distinguish implementation sub-phases (phase-1, phase-2) from rejection retries (2, 3)
     const isImplPhase = suffix?.startsWith('phase-') ?? false;
     const label = isImplPhase
         ? `Phase ${suffix.replace('phase-', '')}`
@@ -280,21 +217,17 @@ function NodeTimingRow({ timing, maxDurationMs, now, }) {
     const totalTokens = timing.inputTokens != null || timing.outputTokens != null
         ? (timing.inputTokens ?? 0) + (timing.outputTokens ?? 0)
         : null;
-    return (_jsxs("div", { className: `relative flex flex-col gap-0.5 px-3 py-1.5 ${isSubPhase ? 'ml-4' : ''}`, children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-2", children: [_jsx("div", { className: "relative z-10 flex h-5 w-5 shrink-0 items-center justify-center", children: _jsx("div", { className: `rounded-full ${isRunning ? 'h-3 w-3 animate-pulse' : 'h-2.5 w-2.5'} ${isRunning
-                                ? 'bg-blue-500'
-                                : timing.completedAt
-                                    ? 'bg-emerald-500'
-                                    : 'bg-muted-foreground/30'}` }) }), _jsx("span", { className: `w-28 shrink-0 truncate text-sm font-medium ${isSubPhase ? 'text-muted-foreground' : 'text-foreground/80'}`, children: label }), _jsx("div", { className: `bg-muted min-w-0 flex-1 overflow-hidden rounded-full ${isSubPhase ? 'h-1.5' : 'h-2'}`, children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${barColorClass}${isRunning ? 'animate-pulse' : ''}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-sm font-medium tabular-nums", children: formatDuration(durationMs) })] }), _jsxs("div", { className: "ml-[28px] flex items-center gap-3 text-xs", children: [timing.startedAt ? (_jsx("span", { className: "text-muted-foreground/60 tabular-nums", children: formatTimestamp(timing.startedAt) })) : null, totalTokens != null && totalTokens > 0 ? (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5", children: [_jsx(Zap, { className: "h-3 w-3 opacity-50" }), formatTokens(totalTokens)] })) : null, timing.costUsd != null && timing.costUsd > 0 ? (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5", children: [_jsx(DollarSign, { className: "h-3 w-3 opacity-50" }), formatCost(timing.costUsd)] })) : null] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
+    return (_jsxs("div", { className: isSubPhase ? 'flex flex-col gap-1 pl-6' : 'flex flex-col gap-1', children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-2", children: [_jsx("span", { className: `text-muted-foreground shrink-0 text-xs ${isSubPhase ? 'w-18' : 'w-24'}`, children: label }), _jsx("div", { className: `bg-muted min-w-0 flex-1 overflow-hidden rounded-full ${isSubPhase ? 'h-2.5' : 'h-3'}`, children: _jsx("div", { className: `h-full rounded-full ${barColorClass}${isRunning ? 'animate-pulse' : ''}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-10 shrink-0 text-right text-xs tabular-nums", children: formatDuration(durationMs) }), _jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-right text-[10px] tabular-nums", children: totalTokens != null && totalTokens > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx(Zap, { className: "h-2 w-2 opacity-50" }), formatTokens(totalTokens)] })) : null }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-[10px] tabular-nums", children: timing.costUsd != null && timing.costUsd > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx(DollarSign, { className: "h-2 w-2 opacity-50" }), formatCost(timing.costUsd)] })) : null })] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
 }
 function ApprovalWaitRow({ timing, maxDurationMs, }) {
     const waitMs = timing.approvalWaitMs ?? 0;
     const barPercent = maxDurationMs > 0 ? Math.max(2, (waitMs / maxDurationMs) * 100) : 2;
-    return (_jsxs("div", { "data-testid": `approval-wait-${timing.phase}`, className: "ml-[26px] flex items-center gap-2 rounded-md bg-amber-50/50 px-1.5 py-1 dark:bg-amber-950/20", children: [_jsx(Timer, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }), _jsx("span", { className: "text-muted-foreground w-16 shrink-0 text-xs", children: "approval" }), _jsx("div", { className: "bg-muted h-1.5 min-w-0 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-amber-500", style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-xs tabular-nums", children: formatDuration(waitMs) })] }));
+    return (_jsxs("div", { "data-testid": `approval-wait-${timing.phase}`, className: "flex items-center gap-2 pl-4", children: [_jsx("span", { className: "text-muted-foreground w-20 shrink-0 text-xs", children: "approval" }), _jsx("div", { className: "bg-muted h-2.5 min-w-0 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-amber-500", style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-10 shrink-0 text-right text-xs tabular-nums", children: formatDuration(waitMs) }), _jsx("span", { className: "w-12 shrink-0" }), _jsx("span", { className: "w-14 shrink-0" })] }));
 }
 function SummaryTotals({ totalExecMs, totalWaitMs, totalInputTokens, totalOutputTokens, totalCostUsd, }) {
     const totalTokens = totalInputTokens + totalOutputTokens;
-    return (_jsxs("div", { "data-testid": "activity-summary", className: "border-border bg-card/30 flex flex-col gap-2 rounded-lg border p-3", children: [_jsx("div", { className: "text-muted-foreground mb-0.5 text-xs font-semibold tracking-wider uppercase", children: "Summary" }), _jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: [_jsx(SummaryItem, { icon: Clock, label: "Total execution", value: formatDuration(totalExecMs) }), totalWaitMs > 0 ? (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { icon: Timer, label: "Total wait", value: formatDuration(totalWaitMs) }), _jsx(SummaryItem, { icon: Clock, label: "Total wall-clock", value: formatDuration(totalExecMs + totalWaitMs), className: "col-span-2" })] })) : null, totalTokens > 0 ? (_jsx(SummaryItem, { icon: Zap, label: "Total tokens", value: `${formatTokens(totalTokens)} (${formatTokens(totalInputTokens)} in · ${formatTokens(totalOutputTokens)} out)`, className: "col-span-2" })) : null, totalCostUsd > 0 ? (_jsx(SummaryItem, { icon: DollarSign, label: "Total cost", value: formatCost(totalCostUsd) })) : null] })] }));
+    return (_jsxs("div", { "data-testid": "activity-summary", className: "border-border flex flex-col gap-1.5 border-t pt-3", children: [_jsx(SummaryRow, { label: "Total execution", value: formatDuration(totalExecMs) }), totalWaitMs > 0 ? (_jsxs(_Fragment, { children: [_jsx(SummaryRow, { label: "Total wait", value: formatDuration(totalWaitMs) }), _jsx(SummaryRow, { label: "Total wall-clock", value: formatDuration(totalExecMs + totalWaitMs) })] })) : null, totalTokens > 0 ? (_jsx(SummaryRow, { label: "Total tokens", value: `${formatTokens(totalTokens)} (${formatTokens(totalInputTokens)} in · ${formatTokens(totalOutputTokens)} out)` })) : null, totalCostUsd > 0 ? _jsx(SummaryRow, { label: "Total cost", value: formatCost(totalCostUsd) }) : null] }));
 }
-function SummaryItem({ icon: Icon, label, value, className = '', }) {
-    return (_jsxs("div", { className: `flex items-center justify-between ${className}`, children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1.5 text-sm", children: [_jsx(Icon, { className: "h-3.5 w-3.5 opacity-50" }), _jsx("span", { className: "font-medium", children: label })] }), _jsx("span", { className: "text-sm font-semibold tabular-nums", children: value })] }));
+function SummaryRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-xs font-medium", children: value })] }));
 }

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,2CA2UzF"}
+{"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,2CAyXzF"}

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

@@ -8,7 +8,7 @@ import { useSidebarFeaturesContext, mapNodeStateToSidebarStatus, } from '../../.
 import { useSelectedFeatureId } from '../../../hooks/use-selected-feature-id.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { useDrawerCloseGuard } from '../../../hooks/drawer-close-guard.js';
-import { useViewportPersistence } from '../../../hooks/use-viewport-persistence.js';
+import { useViewportPersistence, DEFAULT_VIEWPORT } from '../../../hooks/use-viewport-persistence.js';
 import { ControlCenterEmptyState } from './control-center-empty-state.js';
 import { useControlCenterState } from './use-control-center-state.js';
 const AUTO_FOCUS_OPTIONS = {
@@ -23,7 +23,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const selectedFeatureId = useSelectedFeatureId();
     const clickSound = useSoundAction('click');
     const { guardedNavigate } = useDrawerCloseGuard();
-    const { fitView } = useReactFlow();
+    const { fitView, setViewport } = useReactFlow();
     const drawerTimerRef = useRef(null);
     const { defaultViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
     const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleRetryFeature, handleStartFeature, handleStopFeature, handleDeleteRepository, createFeatureNode, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
@@ -119,20 +119,27 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             guardedNavigate(() => router.push('/'));
         }
     }, [router, pathname, guardedNavigate]);
+    // ── Deferred fitView mechanism ──────────────────────────────────────
+    // Instead of calling fitView from event handlers (which races with the
+    // showCanvas latch and React render cycles), we set a ref flag and let
+    // a useEffect consume it once showCanvas is true and nodes are rendered.
+    const pendingFitViewRef = useRef(false);
+    const pendingDrawerRepoRef = useRef(null);
     // Listen for global "add repository" events from the top bar button
     useEffect(() => {
         const handler = (e) => {
             const path = e.detail.path;
             const { wasEmpty, repoPath } = handleAddRepository(path);
+            // Always center the viewport on the new repo, ignoring any stored
+            // pan/zoom position.  This guarantees the repo is visible after adding
+            // — even if the user previously panned far away or deleted everything.
+            resetViewport();
+            // Immediately snap the in-memory viewport so the user never sees
+            // the old far-away position (defaultViewport only applies on mount).
+            setViewport(DEFAULT_VIEWPORT);
+            pendingFitViewRef.current = true;
             if (wasEmpty) {
-                // Wait for next render so the repo node exists in the DOM, then auto-focus
-                setTimeout(() => {
-                    fitView(AUTO_FOCUS_OPTIONS);
-                    // Open the create-feature drawer after the fitView animation completes
-                    drawerTimerRef.current = setTimeout(() => {
-                        guardedNavigate(() => router.push(`/create?repo=${encodeURIComponent(repoPath)}`));
-                    }, AUTO_FOCUS_DRAWER_DELAY_MS);
-                }, 0);
+                pendingDrawerRepoRef.current = repoPath;
             }
         };
         window.addEventListener('shep:add-repository', handler);
@@ -142,7 +149,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 clearTimeout(drawerTimerRef.current);
             }
         };
-    }, [handleAddRepository, fitView, guardedNavigate, router]);
+    }, [handleAddRepository, resetViewport, setViewport]);
     // Listen for create events from the create drawer (with real feature ID from server)
     useEffect(() => {
         const handler = (e) => {
@@ -208,6 +215,21 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         handleRepositoryClick,
         handleDeleteRepository,
     ]);
+    // Auto-center whenever the canvas transitions from empty to having nodes.
+    // This covers both initial page load AND re-adding repos after deleting
+    // everything — the view always centers so the repo is visible, ignoring
+    // any previously stored pan/zoom position.
+    const hadNodesRef = useRef(nodes.length > 0);
+    useEffect(() => {
+        const hasNodes = nodes.length > 0;
+        if (hasNodes && !hadNodesRef.current) {
+            // Went from empty → has nodes — request a deferred fitView
+            resetViewport();
+            setViewport(DEFAULT_VIEWPORT);
+            pendingFitViewRef.current = true;
+        }
+        hadNodesRef.current = hasNodes;
+    }, [nodes.length, resetViewport, setViewport]);
     const handleMoveEnd = useCallback((_event, viewport) => {
         handleViewportChange(viewport);
     }, [handleViewportChange]);
@@ -238,6 +260,26 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 clearTimeout(latchTimerRef.current);
         };
     }, [hasRepositories, showCanvas]);
+    // ── Consume the pending fitView flag ──────────────────────────────────
+    // This effect runs after React renders with showCanvas=true and nodes
+    // available, guaranteeing ReactFlow has the nodes in the DOM before
+    // fitView calculates bounds.  Using requestAnimationFrame ensures the
+    // browser has flushed layout so ReactFlow can measure node dimensions.
+    useEffect(() => {
+        if (!pendingFitViewRef.current || !showCanvas || nodes.length === 0)
+            return;
+        pendingFitViewRef.current = false;
+        const drawerRepo = pendingDrawerRepoRef.current;
+        pendingDrawerRepoRef.current = null;
+        requestAnimationFrame(() => {
+            fitView(AUTO_FOCUS_OPTIONS);
+            if (drawerRepo) {
+                drawerTimerRef.current = setTimeout(() => {
+                    guardedNavigate(() => router.push(`/create?repo=${encodeURIComponent(drawerRepo)}`));
+                }, AUTO_FOCUS_DRAWER_DELAY_MS);
+            }
+        });
+    }, [showCanvas, nodes.length, fitView, guardedNavigate, router]);
     // Pulse the "+" button when there's a single repo with no features and the
     // create-feature drawer is not open — draws attention to the next action.
     const isCreateDrawerOpen = pathname.startsWith('/create');

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;AAgBjC,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,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7F,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,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,CAygBpB"}
+{"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;AAgBjC,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,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7F,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,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,CA6gBpB"}

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

@@ -115,15 +115,19 @@ export function useControlCenterState(initialNodes, initialEdges) {
             }
         }
     }, [events, updateFeature]);
-    // Listen for optimistic approval events from the drawer (fires before SSE arrives)
+    // Listen for optimistic approval/rejection events from the drawer (fires before SSE arrives).
+    // Uses beginMutation + endMutation to prevent stale poll/reconcile data from overwriting
+    // the optimistic 'running' state during the transition window (avoids brief "Something went wrong" flash).
     useEffect(() => {
         const handler = (e) => {
             const { featureId } = e.detail;
+            beginMutation();
             updateFeature(`feat-${featureId}`, { state: 'running' });
+            endMutation();
         };
         window.addEventListener('shep:feature-approved', handler);
         return () => window.removeEventListener('shep:feature-approved', handler);
-    }, [updateFeature]);
+    }, [updateFeature, beginMutation, endMutation]);
     // Separate effect: fetch metadata (name + description) when SSE reports it changed
     const metadataFetchedRef = useRef(new Set());
     const processedMetadataCountRef = useRef(0);

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,CA8CrE"}

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

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } 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 };
@@ -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, setDefaultViewport] = useState(stored.viewport);
+    const hasSavedViewport = stored.fromStorage;
     const timerRef = useRef(null);
     useEffect(() => {
         return () => {
@@ -52,13 +56,22 @@ export function useViewportPersistence() {
         }, DEBOUNCE_MS);
     }, []);
     const resetViewport = useCallback(() => {
+        // Cancel any pending debounced save so it cannot overwrite the reset
+        if (timerRef.current != null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
         try {
             localStorage.removeItem(STORAGE_KEY);
         }
         catch {
             // Silently ignore localStorage errors
         }
+        // Update the defaultViewport so that if ReactFlow re-mounts (e.g. after
+        // showCanvas toggles), it initializes at the default position instead of
+        // the stale saved viewport.
+        setDefaultViewport(DEFAULT_VIEWPORT);
         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"}