feat(dashboard): collapse planning model + depth into advanced disclosure

Group the planning model selector and depth controls under a collapsible
"Advanced planning settings" disclosure (defaultOpen) in the Planning Mode
modal. Adds a defaultOpen prop to OnboardingDisclosure and tightens the
node.capabilities readonly typing in NodeDetailModal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.changeset/planning-advanced-disclosure.md

@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": patch
+---
+
+Group planning model selector and depth controls under a collapsible "Advanced planning settings" disclosure in the Planning Mode modal.

packages/dashboard/app/components/NodeDetailModal.tsx

@@ -127,7 +127,10 @@ export function NodeDetailModal({
     return getProjectsForNode(projects, node);
   }, [node, projects]);
 
-  const isManagedDockerNode = useMemo(() => node?.capabilities?.includes("docker-managed") ?? false, [node]);
+  const isManagedDockerNode = useMemo(
+    () => (node?.capabilities as readonly string[] | undefined)?.includes("docker-managed") ?? false,
+    [node],
+  );
 
   const handleHealthCheck = useCallback(async () => {
     if (!node) return;

packages/dashboard/app/components/OnboardingDisclosure.tsx

@@ -7,6 +7,7 @@ interface OnboardingDisclosureProps {
   children: React.ReactNode;
   className?: string;
   onToggle?: (isOpen: boolean) => void;
+  defaultOpen?: boolean;
 }
 
 export function OnboardingDisclosure({
@@ -14,8 +15,9 @@ export function OnboardingDisclosure({
   children,
   className = "",
   onToggle,
+  defaultOpen = false,
 }: OnboardingDisclosureProps) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
 
   return (
     <div className={`onboarding-disclosure ${className}`.trim()}>

packages/dashboard/app/components/PlanningModeModal.css

@@ -405,6 +405,18 @@
   flex-shrink: 0;
 }
 
+.planning-advanced-disclosure {
+  width: 100%;
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+.planning-advanced-blurb {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
 .planning-model-select-group {
   display: flex;
   flex-direction: column;

packages/dashboard/app/components/PlanningModeModal.tsx

@@ -1556,6 +1556,11 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
                   </div>
                 </div>
 
+                <OnboardingDisclosure summary="Advanced planning settings" className="planning-advanced-disclosure" defaultOpen>
+                  <p className="planning-advanced-blurb">
+                    Choose the planning model and tune plan depth to control how detailed the AI interview should be.
+                  </p>
+
                   <div className="planning-model-select-group">
                     <label htmlFor="planning-modal-model" className="form-label">
                       Planning Model
@@ -1607,7 +1612,6 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
                       </span>
                     </div>
                   </div>
-              </div>
 
                   <div className="planning-depth-selector">
                     <div className="planning-depth-chip-group" role="group" aria-label="Planning depth">
@@ -1642,6 +1646,8 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
                       />
                     </label>
                   </div>
+                </OnboardingDisclosure>
+              </div>
 
               <div className="planning-view-footer">
                 <button

packages/dashboard/app/components/__tests__/PlanningModeModal.test.tsx

@@ -410,6 +410,8 @@ describe("PlanningModeModal", () => {
         />
       );
 
+      expect(screen.getByRole("button", { name: "Advanced planning settings" })).toBeDefined();
+      expect(screen.getByText(/Choose the planning model and tune plan depth/)).toBeDefined();
       expect(screen.getByRole("button", { name: "Small" })).toBeDefined();
       expect(screen.getByRole("button", { name: "Medium" }).getAttribute("aria-pressed")).toBe("true");
       expect(screen.getByRole("button", { name: "Large" })).toBeDefined();