root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
gsxdsm
2026-05-03 01:29:30 -07:00
parent 9619cd102d
commit adbc6130e9
6 changed files with 111 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/planning-advanced-disclosure.md Normal file
View File

@@ -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.

5
packages/dashboard/app/components/NodeDetailModal.tsx
View File

@@ -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;

4
packages/dashboard/app/components/OnboardingDisclosure.tsx
View File

@@ -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()}>

12
packages/dashboard/app/components/PlanningModeModal.css
View File

@@ -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;

164
packages/dashboard/app/components/PlanningModeModal.tsx
View File

@@ -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">

2
packages/dashboard/app/components/__tests__/PlanningModeModal.test.tsx
View File

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