@shepai/cli 1.70.2 → 1.72.0

package/web/.next/standalone/src/presentation/web/components/common/server-log-viewer/server-log-viewer.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useRef, useEffect, useCallback } from 'react';
+import { Terminal } from 'lucide-react';
+import type { LogEntry } from '@shepai/core/application/ports/output/services/deployment-service.interface';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useDeploymentLogs } from '@/hooks/use-deployment-logs';
+
+export interface ServerLogViewerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  targetId: string;
+}
+
+export interface ServerLogViewerContentProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  logs: LogEntry[];
+  isConnected: boolean;
+}
+
+const AUTO_SCROLL_THRESHOLD = 50;
+
+export function ServerLogViewer({ open, onOpenChange, targetId }: ServerLogViewerProps) {
+  const { logs, isConnected } = useDeploymentLogs(open ? targetId : null);
+
+  return (
+    <ServerLogViewerContent
+      open={open}
+      onOpenChange={onOpenChange}
+      logs={logs}
+      isConnected={isConnected}
+    />
+  );
+}
+
+export function ServerLogViewerContent({
+  open,
+  onOpenChange,
+  logs,
+  isConnected,
+}: ServerLogViewerContentProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const isAtBottomRef = useRef(true);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    isAtBottomRef.current =
+      el.scrollTop + el.clientHeight >= el.scrollHeight - AUTO_SCROLL_THRESHOLD;
+  }, []);
+
+  useEffect(() => {
+    if (isAtBottomRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="flex h-[calc(100vh-48px)] max-h-[calc(100vh-48px)] w-full max-w-[calc(100vw-48px)] flex-col gap-0 bg-zinc-950 p-0 text-zinc-100 sm:rounded-lg"
+        aria-describedby={undefined}
+      >
+        <DialogHeader className="flex flex-row items-center justify-between border-b border-zinc-800 px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Terminal className="h-4 w-4 text-zinc-400" />
+            <DialogTitle className="text-sm font-medium text-zinc-100">Server Logs</DialogTitle>
+          </div>
+          <div className="flex items-center gap-2 pr-8">
+            <span
+              className={`inline-block h-2 w-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-zinc-500'}`}
+            />
+            <span className="text-xs text-zinc-400">
+              {isConnected ? 'Connected' : 'Disconnected'}
+            </span>
+          </div>
+        </DialogHeader>
+
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          className="flex-1 overflow-auto p-4 font-mono text-sm leading-relaxed"
+        >
+          {logs.length === 0 ? (
+            <p className="text-zinc-500">Waiting for log output...</p>
+          ) : (
+            logs.map((entry) => (
+              <LogLine key={`${entry.timestamp}-${entry.stream}-${entry.line}`} entry={entry} />
+            ))
+          )}
+          {!isConnected && logs.length > 0 && (
+            <div className="mt-2 border-t border-zinc-800 pt-2 text-zinc-500">[Server stopped]</div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function LogLine({ entry }: { entry: LogEntry }) {
+  return (
+    <div
+      data-stream={entry.stream}
+      className={entry.stream === 'stderr' ? 'text-red-400' : 'text-zinc-200'}
+    >
+      <span className="break-all whitespace-pre-wrap">{entry.line}</span>
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/index.ts

@@ -1,4 +1,4 @@
-export { TechDecisionsReview } from './tech-decisions-review';
+export { TechDecisionsReview, TechDecisionsContent } from './tech-decisions-review';
 export { TechDecisionsDrawer } from './tech-decisions-drawer';
 export type {
   TechDecisionsReviewProps,

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.tsx

@@ -7,7 +7,11 @@ import { Check, ChevronRight, GitCompareArrows, Layers } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { DrawerActionBar } from '@/components/common/drawer-action-bar';
 import { useSoundAction } from '@/hooks/use-sound-action';
-import type { TechDecisionsReviewProps, TechDecision } from './tech-decisions-review-config';
+import type {
+  TechDecisionsReviewProps,
+  TechDecisionsReviewData,
+  TechDecision,
+} from './tech-decisions-review-config';
 
 const markdownComponents: Components = {
   p: ({ children }) => (
@@ -119,6 +123,44 @@ function DecisionCard({ decision, index }: { decision: TechDecision; index: numb
   );
 }
 
+/**
+ * Renders the tech decisions content (header + decision cards) without the action bar.
+ * Used by TechReviewTabs to compose with a shared DrawerActionBar.
+ */
+export function TechDecisionsContent({ data }: { data: TechDecisionsReviewData }) {
+  const { summary, decisions } = data;
+
+  if (decisions.length === 0) return null;
+
+  return (
+    <div className="space-y-4 p-4">
+      {/* Header */}
+      <div className="flex items-start gap-3">
+        <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" />
+        <div className="flex-1">
+          <h2 className="text-foreground text-sm font-bold">
+            Technical Implementation Plan Review
+          </h2>
+          {summary ? (
+            <p className="text-muted-foreground mt-1 text-xs leading-relaxed">{summary}</p>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Section heading */}
+      <div className="flex items-center gap-2 pt-1">
+        <GitCompareArrows className="text-primary h-4 w-4" />
+        <h3 className="text-foreground text-sm font-bold">Technical Decisions</h3>
+      </div>
+
+      {/* Decision cards */}
+      {decisions.map((decision, i) => (
+        <DecisionCard key={decision.title} decision={decision} index={i} />
+      ))}
+    </div>
+  );
+}
+
 export function TechDecisionsReview({
   data,
   onApprove,
@@ -126,36 +168,12 @@ export function TechDecisionsReview({
   isProcessing = false,
   isRejecting = false,
 }: TechDecisionsReviewProps) {
-  const { summary, decisions } = data;
-
-  if (decisions.length === 0) return null;
+  if (data.decisions.length === 0) return null;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex-1 space-y-4 overflow-y-auto p-4">
-        {/* Header */}
-        <div className="flex items-start gap-3">
-          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" />
-          <div className="flex-1">
-            <h2 className="text-foreground text-sm font-bold">
-              Technical Implementation Plan Review
-            </h2>
-            {summary ? (
-              <p className="text-muted-foreground mt-1 text-xs leading-relaxed">{summary}</p>
-            ) : null}
-          </div>
-        </div>
-
-        {/* Section heading */}
-        <div className="flex items-center gap-2 pt-1">
-          <GitCompareArrows className="text-primary h-4 w-4" />
-          <h3 className="text-foreground text-sm font-bold">Technical Decisions</h3>
-        </div>
-
-        {/* Decision cards */}
-        {decisions.map((decision, i) => (
-          <DecisionCard key={decision.title} decision={decision} index={i} />
-        ))}
+      <div className="flex-1 overflow-y-auto">
+        <TechDecisionsContent data={data} />
       </div>
 
       <DrawerActionBar

package/web/.next/standalone/src/presentation/web/components/common/tech-review-tabs/index.ts

@@ -0,0 +1,2 @@
+export { TechReviewTabs } from './tech-review-tabs';
+export type { TechReviewTabsProps } from './tech-review-tabs-config';

package/web/.next/standalone/src/presentation/web/components/common/tech-review-tabs/tech-review-tabs-config.ts

@@ -0,0 +1,17 @@
+import type { TechDecisionsReviewData } from '@/components/common/tech-decisions-review';
+import type { ProductDecisionsSummaryData } from '@/components/common/product-decisions-summary';
+
+export interface TechReviewTabsProps {
+  /** Tech decisions data from the research artifact */
+  techData: TechDecisionsReviewData;
+  /** Product decisions data — null while loading, undefined if unavailable */
+  productData?: ProductDecisionsSummaryData | null;
+  /** Approve plan callback */
+  onApprove: () => void;
+  /** Reject plan callback */
+  onReject?: (feedback: string) => void;
+  /** Controls disabled state during loading */
+  isProcessing?: boolean;
+  /** Whether a reject operation is in flight */
+  isRejecting?: boolean;
+}

package/web/.next/standalone/src/presentation/web/components/common/tech-review-tabs/tech-review-tabs.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { TechReviewTabs } from './tech-review-tabs';
+import type { TechDecisionsReviewData } from '@/components/common/tech-decisions-review';
+import type { ProductDecisionsSummaryData } from '@/components/common/product-decisions-summary';
+
+const mockTechData: TechDecisionsReviewData = {
+  name: 'Agent Executor Abstraction',
+  summary:
+    'Research into the best approach for abstracting agent executors to support multiple AI backends.',
+  technologies: ['TypeScript', 'tsyringe', 'LangGraph', 'Claude API'],
+  decisions: [
+    {
+      title: 'Agent Execution Framework',
+      chosen: 'LangGraph',
+      rejected: ['Custom state machine', 'Temporal.io', 'Step Functions'],
+      rationale:
+        'LangGraph provides built-in checkpointing, human-in-the-loop support, and integrates natively with LangChain.',
+    },
+    {
+      title: 'Dependency Injection',
+      chosen: 'tsyringe',
+      rejected: ['InversifyJS', 'TypeDI', 'Manual DI'],
+      rationale: 'tsyringe is lightweight, uses standard decorators, and has minimal overhead.',
+    },
+    {
+      title: 'Inter-Process Communication',
+      chosen: 'Server-Sent Events (SSE)',
+      rejected: ['WebSockets', 'Long Polling', 'gRPC'],
+      rationale:
+        'SSE provides a simple one-way streaming protocol for agent status updates to the UI.',
+    },
+  ],
+};
+
+const mockProductData: ProductDecisionsSummaryData = {
+  question: 'Goal',
+  context: 'Add multi-agent support to the platform',
+  questions: [
+    {
+      question: 'Which authentication strategy should we use?',
+      selectedOption: 'OAuth 2.0',
+      rationale: 'Industry standard with broad provider support.',
+      wasRecommended: true,
+    },
+    {
+      question: 'How should we handle session management?',
+      selectedOption: 'JWT tokens',
+      rationale: 'Stateless and scalable across services.',
+      wasRecommended: false,
+    },
+    {
+      question: 'What level of MFA should we support?',
+      selectedOption: 'Optional TOTP',
+      rationale: 'Balances security with user convenience.',
+      wasRecommended: true,
+    },
+  ],
+};
+
+const meta: Meta<typeof TechReviewTabs> = {
+  title: 'Drawers/Review/TechReviewTabs',
+  component: TechReviewTabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '600px', width: '400px', border: '1px solid var(--color-border)' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TechReviewTabs>;
+
+/** Default — both tabs with data, Technical tab active. */
+export const Default: Story = {
+  args: {
+    techData: mockTechData,
+    productData: mockProductData,
+    onReject: fn().mockName('onReject'),
+    onApprove: fn().mockName('onApprove'),
+  },
+};
+
+/** Product data loading — spinner in the Product tab. */
+export const ProductDataLoading: Story = {
+  args: {
+    techData: mockTechData,
+    productData: null,
+    onReject: fn().mockName('onReject'),
+    onApprove: fn().mockName('onApprove'),
+  },
+};
+
+/** Product data unavailable — fallback message in the Product tab. */
+export const ProductDataUnavailable: Story = {
+  args: {
+    techData: mockTechData,
+    productData: undefined,
+    onReject: fn().mockName('onReject'),
+    onApprove: fn().mockName('onApprove'),
+  },
+};
+
+/** Processing state — approve button disabled. */
+export const Processing: Story = {
+  args: {
+    techData: mockTechData,
+    productData: mockProductData,
+    onApprove: fn().mockName('onApprove'),
+    isProcessing: true,
+  },
+};
+
+/** Rejecting state — reject input disabled. */
+export const Rejecting: Story = {
+  args: {
+    techData: mockTechData,
+    productData: mockProductData,
+    onReject: fn().mockName('onReject'),
+    onApprove: fn().mockName('onApprove'),
+    isRejecting: true,
+  },
+};

package/web/.next/standalone/src/presentation/web/components/common/tech-review-tabs/tech-review-tabs.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Check, Loader2 } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { DrawerActionBar } from '@/components/common/drawer-action-bar';
+import { TechDecisionsContent } from '@/components/common/tech-decisions-review';
+import { ProductDecisionsSummary } from '@/components/common/product-decisions-summary';
+import type { TechReviewTabsProps } from './tech-review-tabs-config';
+
+export function TechReviewTabs({
+  techData,
+  productData,
+  onApprove,
+  onReject,
+  isProcessing = false,
+  isRejecting = false,
+}: TechReviewTabsProps) {
+  if (techData.decisions.length === 0) return null;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <Tabs defaultValue="technical" className="flex min-h-0 flex-1 flex-col">
+        <div className="shrink-0 px-4 pt-4">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="product">Product</TabsTrigger>
+            <TabsTrigger value="technical">Technical</TabsTrigger>
+          </TabsList>
+        </div>
+
+        <TabsContent value="product" className="mt-0 flex-1 overflow-y-auto">
+          {productData === null ? (
+            <div className="flex items-center justify-center p-8" data-testid="product-loading">
+              <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+            </div>
+          ) : productData ? (
+            <ProductDecisionsSummary data={productData} />
+          ) : (
+            <p className="text-muted-foreground p-4 text-center text-sm">
+              No product decisions available.
+            </p>
+          )}
+        </TabsContent>
+
+        <TabsContent value="technical" className="mt-0 flex-1 overflow-y-auto">
+          <TechDecisionsContent data={techData} />
+        </TabsContent>
+      </Tabs>
+
+      <DrawerActionBar
+        onReject={onReject}
+        onApprove={onApprove}
+        approveLabel="Approve Plan"
+        approveIcon={<Check className="mr-1.5 h-4 w-4" />}
+        revisionPlaceholder="Ask AI to revise the plan..."
+        isProcessing={isProcessing}
+        isRejecting={isRejecting}
+      />
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -1,19 +1,19 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
 import type { Edge } from '@xyflow/react';
 import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeData } from '@/components/common/feature-node';
-import { ControlCenterDrawer, computeDrawerView } from '@/components/common/control-center-drawer';
 import type { RepositoryNodeData } from '@/components/common/repository-node';
 import { NotificationPermissionBanner } from '@/components/common/notification-permission-banner';
-import { getWorkflowDefaults } from '@/app/actions/get-workflow-defaults';
-import type { WorkflowDefaults } from '@/app/actions/get-workflow-defaults';
 import {
   useSidebarFeaturesContext,
   mapNodeStateToSidebarStatus,
 } from '@/hooks/sidebar-features-context';
+import { useSelectedFeatureId } from '@/hooks/use-selected-feature-id';
+import { useSoundAction } from '@/hooks/use-sound-action';
 import { ControlCenterEmptyState } from './control-center-empty-state';
 import { useControlCenterState } from './use-control-center-state';
 
@@ -23,27 +23,20 @@ interface ControlCenterInnerProps {
 }
 
 export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenterInnerProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const selectedFeatureId = useSelectedFeatureId();
+  const clickSound = useSoundAction('click');
+
   const {
     nodes,
     edges,
-    selectedNode,
-    isCreateDrawerOpen,
-    isDeleting,
-    pendingRepositoryPath,
     onNodesChange,
     handleConnect,
-    handleAddFeature,
-    handleAddFeatureToRepo,
-    handleAddFeatureToFeature,
     handleAddRepository,
-    handleNodeClick,
-    clearSelection,
-    handleCreateFeatureSubmit,
     handleDeleteFeature,
     handleDeleteRepository,
-    closeCreateDrawer,
-    selectFeatureById,
-    pendingParentFeatureId,
+    createFeatureNode,
   } = useControlCenterState(initialNodes, initialEdges);
 
   // Publish sidebar features to context whenever feature node data changes
@@ -86,68 +79,75 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     setSidebarFeatures(sidebarItems);
   }, [sidebarKey, nodes, setSidebarFeatures]);
 
-  // Feature list for the parent selector in the create drawer
-  const featureOptions = useMemo(
-    () =>
-      nodes
-        .filter((n) => n.type === 'featureNode')
-        .map((n) => {
-          const data = n.data as FeatureNodeData;
-          return { id: data.featureId, name: data.name };
-        })
-        .filter((f) => f.id && !f.id.startsWith('#')),
-    [nodes]
-  );
+  // ── URL-based navigation handlers ────────────────────────────────────
 
-  // Workflow defaults for the create-feature drawer
-  const [workflowDefaults, setWorkflowDefaults] = useState<WorkflowDefaults | undefined>();
-  useEffect(() => {
-    getWorkflowDefaults()
-      .then(setWorkflowDefaults)
-      .catch(() => {
-        // Settings unavailable — create drawer falls back to all-false defaults
-      });
-  }, []);
+  const handleNodeClick = useCallback(
+    (_event: React.MouseEvent, node: CanvasNodeType) => {
+      if (node.type === 'featureNode') {
+        const data = node.data as FeatureNodeData;
+        if (data.state === 'creating') return;
+        clickSound.play();
+        router.push(`/feature/${data.featureId}`);
+      }
+    },
+    [router, clickSound]
+  );
 
-  // Repository drawer state (independent of feature selection)
-  const [selectedRepoNode, setSelectedRepoNode] = useState<RepositoryNodeData | null>(null);
+  const handleAddFeature = useCallback(() => {
+    clickSound.play();
+    router.push('/create');
+  }, [router, clickSound]);
+
+  const handleAddFeatureToRepo = useCallback(
+    (repoNodeId: string) => {
+      clickSound.play();
+      const node = nodes.find((n) => n.id === repoNodeId);
+      const repoPath = (node?.data as { repositoryPath?: string } | undefined)?.repositoryPath;
+      if (repoPath) {
+        router.push(`/create?repo=${encodeURIComponent(repoPath)}`);
+      } else {
+        router.push('/create');
+      }
+    },
+    [nodes, router, clickSound]
+  );
 
-  // Close all drawers — used on pane click and canvas drag
-  const handleClearDrawers = useCallback(() => {
-    clearSelection();
-    setSelectedRepoNode(null);
-    closeCreateDrawer();
-  }, [clearSelection, closeCreateDrawer]);
+  const handleAddFeatureToFeature = useCallback(
+    (featureNodeId: string) => {
+      const featureId = featureNodeId.startsWith('feat-') ? featureNodeId.slice(5) : featureNodeId;
+      // Find the repo node that owns this feature
+      const repoEdge = edges.find((e) => e.target === featureNodeId);
+      const repoNode = repoEdge ? nodes.find((n) => n.id === repoEdge.source) : null;
+      const repoPath = (repoNode?.data as { repositoryPath?: string } | undefined)?.repositoryPath;
+
+      clickSound.play();
+      const params = new URLSearchParams();
+      if (repoPath) params.set('repo', repoPath);
+      params.set('parent', featureId);
+      router.push(`/create?${params.toString()}`);
+    },
+    [nodes, edges, router, clickSound]
+  );
 
-  // Open repository drawer when a repo node is clicked
   const handleRepositoryClick = useCallback(
     (nodeId: string) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (node?.type === 'repositoryNode') {
-        clearSelection();
-        setSelectedRepoNode(node.data as RepositoryNodeData);
+        const data = node.data as RepositoryNodeData;
+        if (data.id) {
+          router.push(`/repository/${data.id}`);
+        }
       }
     },
-    [nodes, clearSelection]
+    [nodes, router]
   );
 
-  // Derive the single active drawer view from all current state
-  const drawerView = computeDrawerView({
-    selectedNode,
-    isCreateDrawerOpen,
-    pendingRepositoryPath,
-    pendingParentFeatureId,
-    selectedRepoNode,
-    features: featureOptions,
-    workflowDefaults,
-  });
-
-  // Listen for global "open create drawer" events from the sidebar
-  useEffect(() => {
-    const handler = () => handleAddFeature();
-    window.addEventListener('shep:open-create-drawer', handler);
-    return () => window.removeEventListener('shep:open-create-drawer', handler);
-  }, [handleAddFeature]);
+  // Close all drawers — navigate back to root
+  const handleClearDrawers = useCallback(() => {
+    if (pathname !== '/') {
+      router.push('/');
+    }
+  }, [router, pathname]);
 
   // Listen for global "add repository" events from the top bar button
   useEffect(() => {
@@ -159,15 +159,30 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     return () => window.removeEventListener('shep:add-repository', handler);
   }, [handleAddRepository]);
 
-  // Listen for notification "Review" clicks to open the relevant drawer
+  // Listen for optimistic create events from the create drawer
   useEffect(() => {
     const handler = (e: Event) => {
-      const featureId = (e as CustomEvent<{ featureId: string }>).detail.featureId;
-      selectFeatureById(featureId);
+      const detail = (
+        e as CustomEvent<{ name: string; description?: string; repositoryPath: string }>
+      ).detail;
+
+      // Find the repo node to connect to
+      const repoNode = nodes.find(
+        (n) =>
+          n.type === 'repositoryNode' &&
+          (n.data as { repositoryPath?: string }).repositoryPath === detail.repositoryPath
+      );
+
+      createFeatureNode(repoNode?.id ?? null, {
+        state: 'creating',
+        name: detail.name,
+        description: detail.description,
+        repositoryPath: detail.repositoryPath,
+      });
     };
-    window.addEventListener('shep:select-feature', handler);
-    return () => window.removeEventListener('shep:select-feature', handler);
-  }, [selectFeatureById]);
+    window.addEventListener('shep:feature-created', handler);
+    return () => window.removeEventListener('shep:feature-created', handler);
+  }, [nodes, createFeatureNode]);
 
   const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
 
@@ -176,13 +191,6 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
       <>
         <NotificationPermissionBanner />
         <ControlCenterEmptyState onRepositorySelect={handleAddRepository} />
-        <ControlCenterDrawer
-          view={drawerView}
-          onClose={handleClearDrawers}
-          onDelete={handleDeleteFeature}
-          isDeleting={isDeleting}
-          onCreateSubmit={handleCreateFeatureSubmit}
-        />
       </>
     );
   }
@@ -193,6 +201,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
       <FeaturesCanvas
         nodes={nodes}
         edges={edges}
+        selectedFeatureId={selectedFeatureId}
         onNodesChange={onNodesChange}
         onConnect={handleConnect}
         onAddFeature={handleAddFeature}
@@ -206,13 +215,6 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
         onRepositorySelect={handleAddRepository}
         emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
       />
-      <ControlCenterDrawer
-        view={drawerView}
-        onClose={handleClearDrawers}
-        onDelete={handleDeleteFeature}
-        isDeleting={isDeleting}
-        onCreateSubmit={handleCreateFeatureSubmit}
-      />
     </>
   );
 }