feat: implement backlog plan management and UI enhancements

- Added functionality to save, clear, and load backlog plans within the application.
- Introduced a new API endpoint for clearing saved backlog plans.
- Enhanced the backlog plan dialog to allow users to review and apply changes to their features.
- Integrated dependency management features in the UI, allowing users to select parent and child dependencies for features.
- Improved the graph view with options to manage plans and visualize dependencies effectively.
- Updated the sidebar and settings to include provider visibility toggles for better user control over model selection.

These changes aim to enhance the user experience by providing robust backlog management capabilities and improving the overall UI for feature planning.

apps/server/src/routes/backlog-plan/common.ts

@@ -3,12 +3,31 @@
  */
 
 import { createLogger } from '@automaker/utils';
+import { ensureAutomakerDir, getAutomakerDir } from '@automaker/platform';
+import * as secureFs from '../../lib/secure-fs.js';
+import path from 'path';
+import type { BacklogPlanResult } from '@automaker/types';
 
 const logger = createLogger('BacklogPlan');
 
 // State for tracking running generation
 let isRunning = false;
 let currentAbortController: AbortController | null = null;
+let runningDetails: {
+  projectPath: string;
+  prompt: string;
+  model?: string;
+  startedAt: string;
+} | null = null;
+
+const BACKLOG_PLAN_FILENAME = 'backlog-plan.json';
+
+export interface StoredBacklogPlan {
+  savedAt: string;
+  prompt: string;
+  model?: string;
+  result: BacklogPlanResult;
+}
 
 export function getBacklogPlanStatus(): { isRunning: boolean } {
   return { isRunning };
@@ -16,11 +35,67 @@ export function getBacklogPlanStatus(): { isRunning: boolean } {
 
 export function setRunningState(running: boolean, abortController?: AbortController | null): void {
   isRunning = running;
+  if (!running) {
+    runningDetails = null;
+  }
   if (abortController !== undefined) {
     currentAbortController = abortController;
   }
 }
 
+export function setRunningDetails(
+  details: {
+    projectPath: string;
+    prompt: string;
+    model?: string;
+    startedAt: string;
+  } | null
+): void {
+  runningDetails = details;
+}
+
+export function getRunningDetails(): {
+  projectPath: string;
+  prompt: string;
+  model?: string;
+  startedAt: string;
+} | null {
+  return runningDetails;
+}
+
+function getBacklogPlanPath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), BACKLOG_PLAN_FILENAME);
+}
+
+export async function saveBacklogPlan(projectPath: string, plan: StoredBacklogPlan): Promise<void> {
+  await ensureAutomakerDir(projectPath);
+  const filePath = getBacklogPlanPath(projectPath);
+  await secureFs.writeFile(filePath, JSON.stringify(plan, null, 2), 'utf-8');
+}
+
+export async function loadBacklogPlan(projectPath: string): Promise<StoredBacklogPlan | null> {
+  try {
+    const filePath = getBacklogPlanPath(projectPath);
+    const raw = await secureFs.readFile(filePath, 'utf-8');
+    const parsed = JSON.parse(raw) as StoredBacklogPlan;
+    if (!parsed?.result?.changes) {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export async function clearBacklogPlan(projectPath: string): Promise<void> {
+  try {
+    const filePath = getBacklogPlanPath(projectPath);
+    await secureFs.unlink(filePath);
+  } catch {
+    // ignore missing file
+  }
+}
+
 export function getAbortController(): AbortController | null {
   return currentAbortController;
 }

apps/server/src/routes/backlog-plan/generate-plan.ts

@@ -17,7 +17,7 @@ import { resolvePhaseModel } from '@automaker/model-resolver';
 import { FeatureLoader } from '../../services/feature-loader.js';
 import { ProviderFactory } from '../../providers/provider-factory.js';
 import { extractJsonWithArray } from '../../lib/json-extractor.js';
-import { logger, setRunningState, getErrorMessage } from './common.js';
+import { logger, setRunningState, getErrorMessage, saveBacklogPlan } from './common.js';
 import type { SettingsService } from '../../services/settings-service.js';
 import { getAutoLoadClaudeMdSetting, getPromptCustomization } from '../../lib/settings-helpers.js';
 
@@ -200,6 +200,13 @@ ${userPrompt}`;
     // Parse the response
     const result = parsePlanResponse(responseText);
 
+    await saveBacklogPlan(projectPath, {
+      savedAt: new Date().toISOString(),
+      prompt,
+      model: effectiveModel,
+      result,
+    });
+
     events.emit('backlog-plan:event', {
       type: 'backlog_plan_complete',
       result,

apps/server/src/routes/backlog-plan/index.ts

@@ -9,6 +9,7 @@ import { createGenerateHandler } from './routes/generate.js';
 import { createStopHandler } from './routes/stop.js';
 import { createStatusHandler } from './routes/status.js';
 import { createApplyHandler } from './routes/apply.js';
+import { createClearHandler } from './routes/clear.js';
 import type { SettingsService } from '../../services/settings-service.js';
 
 export function createBacklogPlanRoutes(
@@ -23,8 +24,9 @@ export function createBacklogPlanRoutes(
     createGenerateHandler(events, settingsService)
   );
   router.post('/stop', createStopHandler());
-  router.get('/status', createStatusHandler());
+  router.get('/status', validatePathParams('projectPath'), createStatusHandler());
   router.post('/apply', validatePathParams('projectPath'), createApplyHandler());
+  router.post('/clear', validatePathParams('projectPath'), createClearHandler());
 
   return router;
 }

apps/server/src/routes/backlog-plan/routes/apply.ts

@@ -5,7 +5,7 @@
 import type { Request, Response } from 'express';
 import type { BacklogPlanResult, BacklogChange, Feature } from '@automaker/types';
 import { FeatureLoader } from '../../../services/feature-loader.js';
-import { getErrorMessage, logError, logger } from '../common.js';
+import { clearBacklogPlan, getErrorMessage, logError, logger } from '../common.js';
 
 const featureLoader = new FeatureLoader();
 
@@ -151,6 +151,8 @@ export function createApplyHandler() {
         success: true,
         appliedChanges,
       });
+
+      await clearBacklogPlan(projectPath);
     } catch (error) {
       logError(error, 'Apply backlog plan failed');
       res.status(500).json({ success: false, error: getErrorMessage(error) });

apps/server/src/routes/backlog-plan/routes/clear.ts

@@ -0,0 +1,25 @@
+/**
+ * POST /clear endpoint - Clear saved backlog plan
+ */
+
+import type { Request, Response } from 'express';
+import { clearBacklogPlan, getErrorMessage, logError } from '../common.js';
+
+export function createClearHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      await clearBacklogPlan(projectPath);
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Clear backlog plan failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}

apps/server/src/routes/backlog-plan/routes/generate.ts

@@ -4,7 +4,13 @@
 
 import type { Request, Response } from 'express';
 import type { EventEmitter } from '../../../lib/events.js';
-import { getBacklogPlanStatus, setRunningState, getErrorMessage, logError } from '../common.js';
+import {
+  getBacklogPlanStatus,
+  setRunningState,
+  setRunningDetails,
+  getErrorMessage,
+  logError,
+} from '../common.js';
 import { generateBacklogPlan } from '../generate-plan.js';
 import type { SettingsService } from '../../../services/settings-service.js';
 
@@ -37,6 +43,12 @@ export function createGenerateHandler(events: EventEmitter, settingsService?: Se
       }
 
       setRunningState(true);
+      setRunningDetails({
+        projectPath,
+        prompt,
+        model,
+        startedAt: new Date().toISOString(),
+      });
       const abortController = new AbortController();
       setRunningState(true, abortController);
 

apps/server/src/routes/backlog-plan/routes/status.ts

@@ -3,13 +3,15 @@
  */
 
 import type { Request, Response } from 'express';
-import { getBacklogPlanStatus, getErrorMessage, logError } from '../common.js';
+import { getBacklogPlanStatus, loadBacklogPlan, getErrorMessage, logError } from '../common.js';
 
 export function createStatusHandler() {
-  return async (_req: Request, res: Response): Promise<void> => {
+  return async (req: Request, res: Response): Promise<void> => {
     try {
       const status = getBacklogPlanStatus();
-      res.json({ success: true, ...status });
+      const projectPath = typeof req.query.projectPath === 'string' ? req.query.projectPath : '';
+      const savedPlan = projectPath ? await loadBacklogPlan(projectPath) : null;
+      res.json({ success: true, ...status, savedPlan });
     } catch (error) {
       logError(error, 'Get backlog plan status failed');
       res.status(500).json({ success: false, error: getErrorMessage(error) });

apps/server/src/routes/running-agents/routes/index.ts

@@ -4,12 +4,27 @@
 
 import type { Request, Response } from 'express';
 import type { AutoModeService } from '../../../services/auto-mode-service.js';
+import { getBacklogPlanStatus, getRunningDetails } from '../../backlog-plan/common.js';
+import path from 'path';
 import { getErrorMessage, logError } from '../common.js';
 
 export function createIndexHandler(autoModeService: AutoModeService) {
   return async (_req: Request, res: Response): Promise<void> => {
     try {
-      const runningAgents = await autoModeService.getRunningAgents();
+      const runningAgents = [...(await autoModeService.getRunningAgents())];
+      const backlogPlanStatus = getBacklogPlanStatus();
+      const backlogPlanDetails = getRunningDetails();
+
+      if (backlogPlanStatus.isRunning && backlogPlanDetails) {
+        runningAgents.push({
+          featureId: `backlog-plan:${backlogPlanDetails.projectPath}`,
+          projectPath: backlogPlanDetails.projectPath,
+          projectName: path.basename(backlogPlanDetails.projectPath),
+          isAutoMode: false,
+          title: 'Backlog plan',
+          description: backlogPlanDetails.prompt,
+        });
+      }
 
       res.json({
         success: true,