feat(FN-4275): complete Step 1 — tighten global research layout

Fusion-Task-Id: FN-4275
Fusion-Task-Lineage: 73857412-928d-4c51-8113-2ac5ce811d04
This commit is contained in:
Fusion
2026-05-12 23:26:44 -07:00
committed by gsxdsm
parent 6f976d3933
commit 4b08dfc9e2
2 changed files with 79 additions and 56 deletions

View File

@@ -808,6 +808,29 @@
margin-top: var(--space-xs);
}
.settings-research-provider-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.settings-research-provider-advanced-details {
margin-left: var(--space-md);
}
.settings-research-empty-state {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
}
@media (max-width: 768px) {
.settings-research-provider-advanced-details {
margin-left: 0;
}
}
.settings-option-details > summary {
cursor: pointer;
color: var(--text-muted);

View File

@@ -4384,7 +4384,7 @@ export function SettingsModal({
<>
{renderScopeBanner()}
<h4 className="settings-section-heading">Research Defaults</h4>
<div className="form-group">
<div className="form-group settings-research-provider-group">
<label htmlFor="research-global-provider-builtin" className="checkbox-label">
<input
id="research-global-provider-builtin"
@@ -4398,62 +4398,62 @@ export function SettingsModal({
<small>
Searches and fetches use the agent's native WebSearch/WebFetch tools. No API key required.
</small>
<details className="settings-option-details settings-research-provider-advanced-details">
<summary>Advanced — external search providers</summary>
<div className="form-group">
<label htmlFor="research-global-search-provider-advanced">Search Provider</label>
<select
id="research-global-search-provider-advanced"
className="input"
value={externalProvider ? resolvedProvider : "searxng"}
onChange={(event) =>
setSearchProvider(event.target.value as Settings["researchGlobalWebSearchProvider"])
}
>
<option value="searxng">SearXNG</option>
<option value="brave">Brave</option>
<option value="google">Google Custom Search</option>
<option value="tavily">Tavily</option>
</select>
</div>
<div className="form-group">
<label htmlFor="research-global-searxng-url">SearXNG URL</label>
<input
id="research-global-searxng-url"
className="input"
value={form.researchGlobalSearxngUrl ?? ""}
onChange={(event) =>
setForm((current) => ({
...current,
researchGlobalSearxngUrl: event.target.value || undefined,
}))
}
placeholder="https://searx.example.com"
/>
</div>
<div className="form-group">
<label htmlFor="research-global-google-cx">Google Search CX</label>
<input
id="research-global-google-cx"
className="input"
value={form.researchGlobalGoogleSearchCx ?? ""}
onChange={(event) =>
setForm((current) => ({
...current,
researchGlobalGoogleSearchCx: event.target.value || undefined,
}))
}
placeholder="custom-search-engine-id"
/>
</div>
<div className="settings-empty-state settings-research-empty-state" role="note">
Configure Brave, Tavily, and Google API keys in Authentication.
<button type="button" className="btn btn-sm" onClick={() => setActiveSection("authentication")}>
Open Authentication Settings
</button>
</div>
</details>
</div>
<details className="settings-option-details">
<summary>Advanced — external search providers</summary>
<div className="form-group">
<label htmlFor="research-global-search-provider-advanced">Search Provider</label>
<select
id="research-global-search-provider-advanced"
className="input"
value={externalProvider ? resolvedProvider : "searxng"}
onChange={(event) =>
setSearchProvider(event.target.value as Settings["researchGlobalWebSearchProvider"])
}
>
<option value="searxng">SearXNG</option>
<option value="brave">Brave</option>
<option value="google">Google Custom Search</option>
<option value="tavily">Tavily</option>
</select>
</div>
<div className="form-group">
<label htmlFor="research-global-searxng-url">SearXNG URL</label>
<input
id="research-global-searxng-url"
className="input"
value={form.researchGlobalSearxngUrl ?? ""}
onChange={(event) =>
setForm((current) => ({
...current,
researchGlobalSearxngUrl: event.target.value || undefined,
}))
}
placeholder="https://searx.example.com"
/>
</div>
<div className="form-group">
<label htmlFor="research-global-google-cx">Google Search CX</label>
<input
id="research-global-google-cx"
className="input"
value={form.researchGlobalGoogleSearchCx ?? ""}
onChange={(event) =>
setForm((current) => ({
...current,
researchGlobalGoogleSearchCx: event.target.value || undefined,
}))
}
placeholder="custom-search-engine-id"
/>
</div>
<div className="settings-empty-state" role="note">
Configure Brave, Tavily, and Google API keys in Authentication.
<button type="button" className="btn btn-sm" onClick={() => setActiveSection("authentication")}>
Open Authentication Settings
</button>
</div>
</details>
<div className="form-group">
<label htmlFor="research-global-max-sources">Default Max Sources Per Run</label>
<input