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/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx

@@ -40,6 +40,7 @@ export function AgentOutputModal({
   onNumberKeyPress,
   projectPath: projectPathProp,
 }: AgentOutputModalProps) {
+  const isBacklogPlan = featureId.startsWith('backlog-plan:');
   const [output, setOutput] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
   const [viewMode, setViewMode] = useState<ViewMode | null>(null);
@@ -83,6 +84,11 @@ export function AgentOutputModal({
         projectPathRef.current = resolvedProjectPath;
         setProjectPath(resolvedProjectPath);
 
+        if (isBacklogPlan) {
+          setOutput('');
+          return;
+        }
+
         // Use features API to get agent output
         if (api.features) {
           const result = await api.features.getAgentOutput(resolvedProjectPath, featureId);
@@ -104,14 +110,14 @@ export function AgentOutputModal({
     };
 
     loadOutput();
-  }, [open, featureId, projectPathProp]);
+  }, [open, featureId, projectPathProp, isBacklogPlan]);
 
   // Listen to auto mode events and update output
   useEffect(() => {
     if (!open) return;
 
     const api = getElectronAPI();
-    if (!api?.autoMode) return;
+    if (!api?.autoMode || isBacklogPlan) return;
 
     console.log('[AgentOutputModal] Subscribing to events for featureId:', featureId);
 
@@ -272,7 +278,43 @@ export function AgentOutputModal({
     return () => {
       unsubscribe();
     };
-  }, [open, featureId]);
+  }, [open, featureId, isBacklogPlan]);
+
+  // Listen to backlog plan events and update output
+  useEffect(() => {
+    if (!open || !isBacklogPlan) return;
+
+    const api = getElectronAPI();
+    if (!api?.backlogPlan) return;
+
+    const unsubscribe = api.backlogPlan.onEvent((event: any) => {
+      if (!event?.type) return;
+
+      let newContent = '';
+      switch (event.type) {
+        case 'backlog_plan_progress':
+          newContent = `\n🧭 ${event.content || 'Backlog plan progress update'}\n`;
+          break;
+        case 'backlog_plan_error':
+          newContent = `\n❌ Backlog plan error: ${event.error || 'Unknown error'}\n`;
+          break;
+        case 'backlog_plan_complete':
+          newContent = `\n✅ Backlog plan completed\n`;
+          break;
+        default:
+          newContent = `\nℹ️ ${event.type}\n`;
+          break;
+      }
+
+      if (newContent) {
+        setOutput((prev) => `${prev}${newContent}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [open, isBacklogPlan]);
 
   // Handle scroll to detect if user scrolled up
   const handleScroll = () => {
@@ -369,7 +411,7 @@ export function AgentOutputModal({
             </div>
           </div>
           <DialogDescription
-            className="mt-1 max-h-24 overflow-y-auto break-words"
+            className="mt-1 max-h-24 overflow-y-auto wrap-break-word"
             data-testid="agent-output-description"
           >
             {featureDescription}
@@ -377,11 +419,13 @@ export function AgentOutputModal({
         </DialogHeader>
 
         {/* Task Progress Panel - shows when tasks are being executed */}
-        <TaskProgressPanel
-          featureId={featureId}
-          projectPath={projectPath}
-          className="flex-shrink-0 mx-3 my-2"
-        />
+        {!isBacklogPlan && (
+          <TaskProgressPanel
+            featureId={featureId}
+            projectPath={projectPath}
+            className="shrink-0 mx-3 my-2"
+          />
+        )}
 
         {effectiveViewMode === 'changes' ? (
           <div className="flex-1 min-h-0 sm:min-h-[200px] sm:max-h-[60vh] overflow-y-auto scrollbar-visible">
@@ -423,11 +467,11 @@ export function AgentOutputModal({
               ) : effectiveViewMode === 'parsed' ? (
                 <LogViewer output={output} />
               ) : (
-                <div className="whitespace-pre-wrap break-words text-zinc-300">{output}</div>
+                <div className="whitespace-pre-wrap wrap-break-word text-zinc-300">{output}</div>
               )}
             </div>
 
-            <div className="text-xs text-muted-foreground text-center flex-shrink-0">
+            <div className="text-xs text-muted-foreground text-center shrink-0">
               {autoScrollRef.current
                 ? 'Auto-scrolling enabled'
                 : 'Scroll to bottom to enable auto-scroll'}