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,91 +1556,97 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
                   </div>
                 </div>
 
-                <div className="planning-model-select-group">
-                  <label htmlFor="planning-modal-model" className="form-label">
-                    Planning Model
-                    {modelsLoading && (
-                      <span className="text-muted text-muted-sm">
-                        Loading models…
-                      </span>
+                <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
+                      {modelsLoading && (
+                        <span className="text-muted text-muted-sm">
+                          Loading models…
+                        </span>
+                      )}
+                    </label>
+                    <CustomModelDropdown
+                      id="planning-modal-model"
+                      label="Planning Model"
+                      value={planningSelectionValue}
+                      onChange={(value) => {
+                        const { provider, modelId } = parseModelSelection(value);
+                        setPlanningModelProvider(provider);
+                        setPlanningModelId(modelId);
+                      }}
+                      models={loadedModels}
+                      disabled={modelsLoading}
+                      favoriteProviders={favoriteProviders}
+                      onToggleFavorite={handleToggleFavoriteProvider}
+                      favoriteModels={favoriteModels}
+                      onToggleModelFavorite={handleToggleFavoriteModel}
+                    />
+                    {modelsError && (
+                      <div className="form-hint form-hint-error">
+                        {modelsError}{" "}
+                        <button
+                          type="button"
+                          className="text-link-btn"
+                          onClick={() => {
+                            void loadModels();
+                          }}
+                        >
+                          Retry
+                        </button>
+                      </div>
                     )}
-                  </label>
-                  <CustomModelDropdown
-                    id="planning-modal-model"
-                    label="Planning Model"
-                    value={planningSelectionValue}
-                    onChange={(value) => {
-                      const { provider, modelId } = parseModelSelection(value);
-                      setPlanningModelProvider(provider);
-                      setPlanningModelId(modelId);
-                    }}
-                    models={loadedModels}
-                    disabled={modelsLoading}
-                    favoriteProviders={favoriteProviders}
-                    onToggleFavorite={handleToggleFavoriteProvider}
-                    favoriteModels={favoriteModels}
-                    onToggleModelFavorite={handleToggleFavoriteModel}
-                  />
-                  {modelsError && (
-                    <div className="form-hint form-hint-error">
-                      {modelsError}{" "}
-                      <button
-                        type="button"
-                        className="text-link-btn"
-                        onClick={() => {
-                          void loadModels();
-                        }}
+                    <div className="model-selector-current model-selector-current--spaced">
+                      <span
+                        className={`model-badge ${
+                          planningModelProvider && planningModelId
+                            ? "model-badge-custom"
+                            : "model-badge-default"
+                        }`}
                       >
-                        Retry
-                      </button>
+                        {getModelBadgeLabel(planningModelProvider, planningModelId)}
+                      </span>
                     </div>
-                  )}
-                  <div className="model-selector-current model-selector-current--spaced">
-                    <span
-                      className={`model-badge ${
-                        planningModelProvider && planningModelId
-                          ? "model-badge-custom"
-                          : "model-badge-default"
-                      }`}
-                    >
-                      {getModelBadgeLabel(planningModelProvider, planningModelId)}
-                    </span>
                   </div>
-                </div>
-              </div>
 
-              <div className="planning-depth-selector">
-                <div className="planning-depth-chip-group" role="group" aria-label="Planning depth">
-                  {([
-                    { value: "small", label: "Small" },
-                    { value: "medium", label: "Medium" },
-                    { value: "large", label: "Large" },
-                  ] as const).map((depthOption) => (
-                    <button
-                      key={depthOption.value}
-                      type="button"
-                      className={`planning-depth-chip btn ${planningDepth === depthOption.value ? "btn-primary planning-depth-chip-active" : ""}`}
-                      onClick={() => setPlanningDepth(depthOption.value)}
-                      aria-pressed={planningDepth === depthOption.value}
-                    >
-                      {depthOption.label}
-                    </button>
-                  ))}
-                </div>
+                  <div className="planning-depth-selector">
+                    <div className="planning-depth-chip-group" role="group" aria-label="Planning depth">
+                      {([
+                        { value: "small", label: "Small" },
+                        { value: "medium", label: "Medium" },
+                        { value: "large", label: "Large" },
+                      ] as const).map((depthOption) => (
+                        <button
+                          key={depthOption.value}
+                          type="button"
+                          className={`planning-depth-chip btn ${planningDepth === depthOption.value ? "btn-primary planning-depth-chip-active" : ""}`}
+                          onClick={() => setPlanningDepth(depthOption.value)}
+                          aria-pressed={planningDepth === depthOption.value}
+                        >
+                          {depthOption.label}
+                        </button>
+                      ))}
+                    </div>
 
-                <label className="planning-depth-question-count" htmlFor="planning-depth-questions">
-                  <span>Questions</span>
-                  <input
-                    id="planning-depth-questions"
-                    className="input planning-depth-question-input"
-                    type="number"
-                    min={1}
-                    max={20}
-                    value={customQuestionCount}
-                    onChange={(e) => setCustomQuestionCount(e.target.value)}
-                    placeholder="Auto"
-                  />
-                </label>
+                    <label className="planning-depth-question-count" htmlFor="planning-depth-questions">
+                      <span>Questions</span>
+                      <input
+                        id="planning-depth-questions"
+                        className="input planning-depth-question-input"
+                        type="number"
+                        min={1}
+                        max={20}
+                        value={customQuestionCount}
+                        onChange={(e) => setCustomQuestionCount(e.target.value)}
+                        placeholder="Auto"
+                      />
+                    </label>
+                  </div>
+                </OnboardingDisclosure>
               </div>
 
               <div className="planning-view-footer">

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();