@shepai/cli 1.68.0 → 1.69.0

package/web/.next/standalone/src/presentation/web/.next/server/server-reference-manifest.json

@@ -1,6 +1,6 @@
 {
   "node": {
-    "005c21cc7a74734851077ea4c06ba4ace20b1dc8e1": {
+    "0047c870d719162f2116e56b9cb492d37d546502e6": {
       "workers": {
         "app/_not-found/page": {
           "moduleId": 66973,
@@ -43,7 +43,7 @@
       "filename": "src/presentation/web/app/actions/pick-folder.ts",
       "exportedName": "pickFolder"
     },
-    "401212dc604a59aad891c75abc967036bacf6a5a02": {
+    "40bbd46af81361e4188c140ffcb4ec4230c1f5ede1": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -65,7 +65,7 @@
       "filename": "src/presentation/web/app/actions/deploy-feature.ts",
       "exportedName": "deployFeature"
     },
-    "40de76e904aa3ed5b680e5db8bd6dddcff54138418": {
+    "402d63b563a07e93686b59fb9cf228c2bff903df52": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -87,7 +87,7 @@
       "filename": "src/presentation/web/app/actions/deploy-repository.ts",
       "exportedName": "deployRepository"
     },
-    "408ba1e9ad295a8649817efa1177797eb10e7c466a": {
+    "40d0994666333c500668bb580f7fe12f156f447549": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -109,7 +109,7 @@
       "filename": "src/presentation/web/app/actions/stop-deployment.ts",
       "exportedName": "stopDeployment"
     },
-    "409ee2d84b3be35455d811d819639e79d895666045": {
+    "400abe699c44fba3a3c251e3a249db94a84ea9375f": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -131,7 +131,7 @@
       "filename": "src/presentation/web/app/actions/get-deployment-status.ts",
       "exportedName": "getDeploymentStatus"
     },
-    "40b3300da9ad22bffc1b28ca08f8fd9bc46c6f8ca8": {
+    "40c8357881b7209754173b264c064e68dc1fccc6c5": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -146,7 +146,7 @@
       "filename": "src/presentation/web/app/actions/open-ide.ts",
       "exportedName": "openIde"
     },
-    "40378fa4f29642cee02dc6954028513ec4081bb91f": {
+    "40df943127843d139f09ef0c15e7af7962c1163a3c": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -161,7 +161,7 @@
       "filename": "src/presentation/web/app/actions/open-shell.ts",
       "exportedName": "openShell"
     },
-    "400ae8cb98352c9997c2e8c0d3cb300870af5e2de1": {
+    "403aacc3b063b935fc97c13a4ddc2e39d5248cfce7": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -176,7 +176,7 @@
       "filename": "src/presentation/web/app/actions/open-folder.ts",
       "exportedName": "openFolder"
     },
-    "609f57122f6c4b6dd0eaf403efb620bcd584c2d064": {
+    "609912b2e71530227bd971713e722e2ddae870c834": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -191,7 +191,7 @@
       "filename": "src/presentation/web/app/actions/approve-feature.ts",
       "exportedName": "approveFeature"
     },
-    "6006cf21f5779a08146ff52bc5027e79e44b7db388": {
+    "6056c8091c66cb6e17e1dc88724cdb36ef658aaa8b": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -206,7 +206,7 @@
       "filename": "src/presentation/web/app/actions/reject-feature.ts",
       "exportedName": "rejectFeature"
     },
-    "4031c4354a5a5b67387659ed5741130b2c592d5540": {
+    "403b2febb379fc46c91085af13c602491d955b01e2": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -221,7 +221,7 @@
       "filename": "src/presentation/web/app/actions/get-feature-artifact.ts",
       "exportedName": "getFeatureArtifact"
     },
-    "40708b597b28c2fddbe808f4b6b4d0df4c9a2a8329": {
+    "40ab7b59ff7a66389f880a241d232f328f3926f2fe": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -236,7 +236,7 @@
       "filename": "src/presentation/web/app/actions/get-research-artifact.ts",
       "exportedName": "getResearchArtifact"
     },
-    "402ebc155e440e9de63de2ec16961cd989415b7a74": {
+    "40ba6de692514b18656ea1b43673e1bffa26a02bf4": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -251,7 +251,7 @@
       "filename": "src/presentation/web/app/actions/get-merge-review-data.ts",
       "exportedName": "getMergeReviewData"
     },
-    "00bd6bcbeb18b90c6acf7e01e7baf6c67b8a13daac": {
+    "007efbf78a113f3482394b5e8f8001bde6bdc43bc9": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -266,7 +266,7 @@
       "filename": "src/presentation/web/app/actions/get-workflow-defaults.ts",
       "exportedName": "getWorkflowDefaults"
     },
-    "40bc1fe17be13055de30e039f468fc08296a4a91cc": {
+    "406caff046f96b31ff916a2d7a56b00e4e0ba42969": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -281,7 +281,7 @@
       "filename": "src/presentation/web/app/actions/create-feature.ts",
       "exportedName": "createFeature"
     },
-    "40f6704a13155dc8f2854c88d37c75ccd3452c9d61": {
+    "403d314dfbfa9e924edf1541ef2abe8b817e113d71": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -296,7 +296,7 @@
       "filename": "src/presentation/web/app/actions/delete-feature.ts",
       "exportedName": "deleteFeature"
     },
-    "4047771466633d9f80ee40689683f1213b5183b7af": {
+    "40cbce1b9c3b4e574ec0572abcf20fed0c5625fa87": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -311,7 +311,7 @@
       "filename": "src/presentation/web/app/actions/add-repository.ts",
       "exportedName": "addRepository"
     },
-    "407e7bd053692aae2c08bd4d2707d830ff2246f1b1": {
+    "40f04206c40969efebf2da1c4c41ba53b053aace88": {
       "workers": {
         "app/page": {
           "moduleId": 80894,
@@ -328,5 +328,5 @@
     }
   },
   "edge": {},
-  "encryptionKey": "zcwS9bl8PiCUDFCAC1FddX7MPq3g6FDLfuNWRuHOIzk="
+  "encryptionKey": "KmY8H5oInrxtJtzBQaPPrAIroKymKKDWe5g41Yx3TA8="
 }

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/control-center-drawer.tsx

@@ -10,6 +10,8 @@ import {
   Code2,
   Terminal,
   FolderOpen,
+  Play,
+  Square,
 } from 'lucide-react';
 import type {
   PrdApprovalPayload,
@@ -22,12 +24,16 @@ import { getFeatureArtifact } from '@/app/actions/get-feature-artifact';
 import { getResearchArtifact } from '@/app/actions/get-research-artifact';
 import { getMergeReviewData } from '@/app/actions/get-merge-review-data';
 import { cn } from '@/lib/utils';
+import { featureFlags } from '@/lib/feature-flags';
 import { useSoundAction } from '@/hooks/use-sound-action';
+import { useDeployAction } from '@/hooks/use-deploy-action';
 import { BaseDrawer } from '@/components/common/base-drawer';
+import { DeploymentStatusBadge } from '@/components/common/deployment-status-badge';
 import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { CometSpinner } from '@/components/ui/comet-spinner';
 import {
   AlertDialog,
@@ -303,6 +309,31 @@ export function ControlCenterDrawer({
     repoData?.repositoryPath ? { repositoryPath: repoData.repositoryPath } : null
   );
 
+  // ── Deploy targets ──────────────────────────────────────────────────────
+  // Feature deploy is rendered inline in the header; repo deploy uses BaseDrawer's bar.
+
+  const featureDeployTarget =
+    featureNode?.repositoryPath && featureNode.branch
+      ? {
+          targetId: featureNode.featureId,
+          targetType: 'feature' as const,
+          repositoryPath: featureNode.repositoryPath,
+          branch: featureNode.branch,
+        }
+      : null;
+
+  const repoDeployTarget = repoData?.repositoryPath
+    ? {
+        targetId: repoData.repositoryPath,
+        targetType: 'repository' as const,
+        repositoryPath: repoData.repositoryPath,
+      }
+    : undefined;
+
+  const deployAction = useDeployAction(featureDeployTarget);
+  const isFeatureDeployActive =
+    deployAction.status === 'Booting' || deployAction.status === 'Ready';
+
   // ── Header ──────────────────────────────────────────────────────────────
 
   let header: React.ReactNode = undefined;
@@ -326,57 +357,82 @@ export function ControlCenterDrawer({
               repositoryPath={featureActionsInput.repositoryPath}
               showSpecs={!!featureActionsInput.specPath}
             />
-            {onDelete && featureNode.featureId ? (
+            {featureFlags.envDeploy && featureDeployTarget ? (
               <>
-                <div className="bg-border mx-1 h-4 w-px" />
-                <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      aria-label="Delete feature"
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span>
+                        <ActionButton
+                          label={isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server'}
+                          onClick={isFeatureDeployActive ? deployAction.stop : deployAction.deploy}
+                          loading={deployAction.deployLoading || deployAction.stopLoading}
+                          error={!!deployAction.deployError}
+                          icon={isFeatureDeployActive ? Square : Play}
+                          iconOnly
+                          variant="outline"
+                          size="icon-sm"
+                        />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server'}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                {isFeatureDeployActive ? (
+                  <DeploymentStatusBadge status={deployAction.status} url={deployAction.url} />
+                ) : null}
+              </>
+            ) : null}
+            {onDelete && featureNode.featureId ? (
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label="Delete feature"
+                    disabled={isDeleting}
+                    className="text-muted-foreground hover:text-destructive ml-auto"
+                    data-testid="feature-drawer-delete"
+                  >
+                    {isDeleting ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : (
+                      <Trash2 className="size-4" />
+                    )}
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Delete feature?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This will permanently delete <strong>{featureNode.name}</strong> (
+                      {featureNode.featureId}). This action cannot be undone.
+                      {featureNode.state === 'running' ? (
+                        <> This feature has a running agent that will be stopped.</>
+                      ) : null}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      variant="destructive"
                       disabled={isDeleting}
-                      className="text-muted-foreground hover:text-destructive"
-                      data-testid="feature-drawer-delete"
+                      onClick={() => onDelete(featureNode.featureId)}
                     >
                       {isDeleting ? (
-                        <Loader2 className="size-4 animate-spin" />
+                        <>
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          Deleting…
+                        </>
                       ) : (
-                        <Trash2 className="size-4" />
+                        'Delete'
                       )}
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>Delete feature?</AlertDialogTitle>
-                      <AlertDialogDescription>
-                        This will permanently delete <strong>{featureNode.name}</strong> (
-                        {featureNode.featureId}). This action cannot be undone.
-                        {featureNode.state === 'running' ? (
-                          <> This feature has a running agent that will be stopped.</>
-                        ) : null}
-                      </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-                      <AlertDialogAction
-                        variant="destructive"
-                        disabled={isDeleting}
-                        onClick={() => onDelete(featureNode.featureId)}
-                      >
-                        {isDeleting ? (
-                          <>
-                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                            Deleting…
-                          </>
-                        ) : (
-                          'Delete'
-                        )}
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              </>
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
             ) : null}
           </div>
         ) : null}
@@ -531,6 +587,7 @@ export function ControlCenterDrawer({
         size="md"
         modal={false}
         header={header}
+        deployTarget={repoDeployTarget}
         data-testid={
           view?.type === 'feature'
             ? 'feature-drawer'

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node-state-config.ts

@@ -53,6 +53,8 @@ export interface FeatureNodeData {
   branch: string;
   /** Absolute path to the specs folder on disk */
   specPath?: string;
+  /** Epoch ms when the current agent run started (for elapsed-time in sidebar) */
+  startedAt?: number;
   /** Human-readable runtime for done state (e.g. "2h 15m") */
   runtime?: string;
   /** Feature name this node is blocked by */

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

@@ -10,6 +10,10 @@ 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 { ControlCenterEmptyState } from './control-center-empty-state';
 import { useControlCenterState } from './use-control-center-state';
 
@@ -42,6 +46,46 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     pendingParentFeatureId,
   } = useControlCenterState(initialNodes, initialEdges);
 
+  // Publish sidebar features to context whenever feature node data changes
+  const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
+
+  const sidebarKey = useMemo(() => {
+    return nodes
+      .filter((n) => n.type === 'featureNode')
+      .map((n) => {
+        const d = n.data as FeatureNodeData;
+        return `${d.featureId}:${d.state}:${d.runtime ?? ''}:${d.startedAt ?? ''}`;
+      })
+      .sort()
+      .join(',');
+  }, [nodes]);
+
+  useEffect(() => {
+    const sidebarItems = nodes
+      .filter((n) => n.type === 'featureNode')
+      .map((n) => {
+        const d = n.data as FeatureNodeData;
+        const status = mapNodeStateToSidebarStatus(d.state);
+        if (!status) return null;
+        return {
+          featureId: d.featureId,
+          name: d.name,
+          status,
+          ...(d.startedAt != null && { startedAt: d.startedAt }),
+          ...(d.runtime != null && { duration: d.runtime }),
+        };
+      })
+      .filter(Boolean) as {
+      featureId: string;
+      name: string;
+      status: 'action-needed' | 'in-progress' | 'done';
+      startedAt?: number;
+      duration?: string;
+    }[];
+
+    setSidebarFeatures(sidebarItems);
+  }, [sidebarKey, nodes, setSidebarFeatures]);
+
   // Feature list for the parent selector in the create drawer
   const featureOptions = useMemo(
     () =>

package/web/.next/standalone/src/presentation/web/components/layouts/app-shell/app-shell.tsx

@@ -7,6 +7,10 @@ import { AddRepositoryButton } from '@/components/common/add-repository-node';
 import { ThemeToggle } from '@/components/common/theme-toggle';
 import { SoundToggle } from '@/components/common/sound-toggle';
 import { AgentEventsProvider } from '@/hooks/agent-events-provider';
+import {
+  SidebarFeaturesProvider,
+  useSidebarFeaturesContext,
+} from '@/hooks/sidebar-features-context';
 import { useNotifications } from '@/hooks/use-notifications';
 
 interface AppShellProps {
@@ -18,17 +22,27 @@ function AppShellInner({ children }: AppShellProps) {
   // Subscribe to agent lifecycle events and dispatch toast/browser notifications
   useNotifications();
 
+  const { features } = useSidebarFeaturesContext();
+
   const handleNewFeature = useCallback(() => {
     window.dispatchEvent(new CustomEvent('shep:open-create-drawer'));
   }, []);
 
+  const handleFeatureClick = useCallback((featureId: string) => {
+    window.dispatchEvent(new CustomEvent('shep:select-feature', { detail: { featureId } }));
+  }, []);
+
   const handleRepositorySelect = useCallback((path: string) => {
     window.dispatchEvent(new CustomEvent('shep:add-repository', { detail: { path } }));
   }, []);
 
   return (
     <SidebarProvider>
-      <AppSidebar features={[]} onNewFeature={handleNewFeature} />
+      <AppSidebar
+        features={features}
+        onNewFeature={handleNewFeature}
+        onFeatureClick={handleFeatureClick}
+      />
       <SidebarInset>
         <div className="relative h-full">
           <div className="absolute top-3 right-3 z-50 flex gap-1">
@@ -46,7 +60,9 @@ function AppShellInner({ children }: AppShellProps) {
 export function AppShell({ children }: AppShellProps) {
   return (
     <AgentEventsProvider>
-      <AppShellInner>{children}</AppShellInner>
+      <SidebarFeaturesProvider>
+        <AppShellInner>{children}</AppShellInner>
+      </SidebarFeaturesProvider>
     </AgentEventsProvider>
   );
 }

package/web/.next/standalone/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.tsx

@@ -34,12 +34,27 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const mockFeatures = [
-  { name: 'Auth Module', status: 'action-needed' as const },
-  { name: 'Payment Flow', status: 'action-needed' as const },
-  { name: 'Dashboard', status: 'in-progress' as const, startedAt: Date.now() - 330_000 },
-  { name: 'API Gateway', status: 'in-progress' as const, startedAt: Date.now() - 60_000 },
-  { name: 'Settings Page', status: 'done' as const, duration: '2h' },
-  { name: 'User Profile', status: 'done' as const, duration: '1h' },
+  { featureId: 'feat-auth-001', name: 'Auth Module', status: 'action-needed' as const },
+  { featureId: 'feat-payment-002', name: 'Payment Flow', status: 'action-needed' as const },
+  {
+    featureId: 'feat-dashboard-003',
+    name: 'Dashboard',
+    status: 'in-progress' as const,
+    startedAt: Date.now() - 330_000,
+  },
+  {
+    featureId: 'feat-api-004',
+    name: 'API Gateway',
+    status: 'in-progress' as const,
+    startedAt: Date.now() - 60_000,
+  },
+  {
+    featureId: 'feat-settings-005',
+    name: 'Settings Page',
+    status: 'done' as const,
+    duration: '2h',
+  },
+  { featureId: 'feat-profile-006', name: 'User Profile', status: 'done' as const, duration: '1h' },
 ];
 
 export const Default: Story = {
@@ -66,8 +81,18 @@ export const Empty: Story = {
 export const AllInProgress: Story = {
   args: {
     features: [
-      { name: 'Feature A', status: 'in-progress' as const, startedAt: Date.now() - 120_000 },
-      { name: 'Feature B', status: 'in-progress' as const, startedAt: Date.now() - 600_000 },
+      {
+        featureId: 'feat-a-001',
+        name: 'Feature A',
+        status: 'in-progress' as const,
+        startedAt: Date.now() - 120_000,
+      },
+      {
+        featureId: 'feat-b-002',
+        name: 'Feature B',
+        status: 'in-progress' as const,
+        startedAt: Date.now() - 600_000,
+      },
     ],
   },
 };
@@ -75,9 +100,9 @@ export const AllInProgress: Story = {
 export const AllDone: Story = {
   args: {
     features: [
-      { name: 'Feature A', status: 'done' as const, duration: '30m' },
-      { name: 'Feature B', status: 'done' as const, duration: '1h' },
-      { name: 'Feature C', status: 'done' as const, duration: '3h' },
+      { featureId: 'feat-a-001', name: 'Feature A', status: 'done' as const, duration: '30m' },
+      { featureId: 'feat-b-002', name: 'Feature B', status: 'done' as const, duration: '1h' },
+      { featureId: 'feat-c-003', name: 'Feature C', status: 'done' as const, duration: '3h' },
     ],
   },
 };

package/web/.next/standalone/src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx

@@ -25,7 +25,8 @@ import type { FeatureStatus } from '@/components/common/feature-status-config';
 import { useDeferredMount } from '@/hooks/use-deferred-mount';
 import { featureFlags } from '@/lib/feature-flags';
 
-interface FeatureItem {
+export interface FeatureItem {
+  featureId: string;
   name: string;
   status: FeatureStatus;
   startedAt?: number;
@@ -35,7 +36,7 @@ interface FeatureItem {
 export interface AppSidebarProps {
   features: FeatureItem[];
   onNewFeature?: () => void;
-  onFeatureClick?: (name: string) => void;
+  onFeatureClick?: (featureId: string) => void;
   onFeaturesFolderClick?: () => void;
   onFeaturesMenuClick?: () => void;
 }
@@ -119,12 +120,14 @@ export function AppSidebar({
                   <FeatureStatusGroup key={key} label={label} count={items.length}>
                     {items.map((feature) => (
                       <FeatureListItem
-                        key={feature.name}
+                        key={feature.featureId}
                         name={feature.name}
                         status={feature.status}
                         startedAt={feature.startedAt}
                         duration={feature.duration}
-                        onClick={onFeatureClick ? () => onFeatureClick(feature.name) : undefined}
+                        onClick={
+                          onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined
+                        }
                       />
                     ))}
                   </FeatureStatusGroup>

package/web/.next/standalone/src/presentation/web/hooks/sidebar-features-context.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { createContext, useContext, useState, useMemo, type ReactNode } from 'react';
+import type { FeatureNodeState } from '@/components/common/feature-node/feature-node-state-config';
+import type { FeatureStatus } from '@/components/common/feature-status-config';
+
+// Re-export the FeatureItem type so consumers can import from one place.
+// This will gain `featureId` in a later phase.
+export interface SidebarFeatureItem {
+  name: string;
+  status: FeatureStatus;
+  featureId: string;
+  startedAt?: number;
+  duration?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Pure mapping: FeatureNodeState (6-state) → FeatureStatus (3-state) | null
+// ---------------------------------------------------------------------------
+
+const stateMapping: Record<FeatureNodeState, FeatureStatus | null> = {
+  'action-required': 'action-needed',
+  running: 'in-progress',
+  done: 'done',
+  blocked: 'in-progress',
+  error: 'in-progress',
+  creating: null,
+};
+
+/**
+ * Maps a canvas FeatureNodeState to the sidebar's 3-state FeatureStatus.
+ * Returns `null` for `creating` (optimistic UI) — these should be excluded from the sidebar.
+ */
+export function mapNodeStateToSidebarStatus(state: FeatureNodeState): FeatureStatus | null {
+  return stateMapping[state];
+}
+
+// ---------------------------------------------------------------------------
+// SidebarFeaturesContext
+// ---------------------------------------------------------------------------
+
+interface SidebarFeaturesContextValue {
+  features: SidebarFeatureItem[];
+  setFeatures: (features: SidebarFeatureItem[]) => void;
+}
+
+const SidebarFeaturesContext = createContext<SidebarFeaturesContextValue | null>(null);
+
+interface SidebarFeaturesProviderProps {
+  children: ReactNode;
+}
+
+export function SidebarFeaturesProvider({ children }: SidebarFeaturesProviderProps) {
+  const [features, setFeatures] = useState<SidebarFeatureItem[]>([]);
+
+  const value = useMemo<SidebarFeaturesContextValue>(() => ({ features, setFeatures }), [features]);
+
+  return (
+    <SidebarFeaturesContext.Provider value={value}>{children}</SidebarFeaturesContext.Provider>
+  );
+}
+
+export function useSidebarFeaturesContext(): SidebarFeaturesContextValue {
+  const ctx = useContext(SidebarFeaturesContext);
+  if (!ctx) {
+    throw new Error('useSidebarFeaturesContext must be used within a <SidebarFeaturesProvider>');
+  }
+  return ctx;
+}