@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/views/settings/AgentSection.tsx

@@ -1,305 +0,0 @@
-// src/web/views/settings/AgentSection.tsx
-import React, { useEffect, useState } from 'react';
-import { Server as ServerIcon, Globe, Save } from 'lucide-react';
-import { Card, CardTitle, CardMeta } from '../../components/Card';
-import { Button } from '../../components/Button';
-import { AutosaveField } from '../../components/AutosaveField';
-import { useToast } from '../../components/Toast';
-import { api } from '../../lib/api';
-import type { Settings } from '../../lib/types';
-
-type Props = {
-  settings: Settings;
-  patchAgents: (patch: Partial<Settings['agents']>) => void;
-  patchDashboard: (patch: Partial<Settings['dashboard']>) => void;
-  /** Called after state is patched; parent debounces the API save */
-  autoSave?: (key: keyof Settings, value: Settings[keyof Settings]) => void;
-};
-
-export function AgentSection({ settings, patchAgents, patchDashboard, autoSave }: Props) {
-  const toast = useToast();
-  const [pluginOptions, setPluginOptions] = useState<Record<string, number>>({});
-
-  useEffect(() => {
-    api.get<Record<string, number>>('/settings/plugin-options')
-      .then(setPluginOptions)
-      .catch(() => { /* not persisted yet — use defaults */ });
-  }, []);
-
-  const onSavePluginOptions = async () => {
-    try {
-      await api.put('/settings/plugin-options', pluginOptions);
-      toast.success('Saved — restart cline for changes to take effect.');
-    } catch (err) {
-      toast.error(`Save failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onCleanupBackground = async () => {
-    try {
-      const r = await fetch('/api/background/cleanup', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ maxAgeDays: 7 }),
-      });
-      const result = await r.json();
-      toast.success(`Cleaned up ${result.deleted} old instances.`);
-    } catch (err) {
-      toast.error(`Cleanup failed: ${(err as Error).message}`);
-    }
-  };
-
-  return (
-    <>
-      {/* Agents */}
-      <Card id="settings-agents" data-section="agents">
-        <CardTitle><ServerIcon size={14} /> Agent Behavior</CardTitle>
-        <CardMeta>Limits and timeouts for background agent dispatch.</CardMeta>
-        <div className="form-row">
-          <label htmlFor="agents-maxParallel">
-            Max parallel agents
-            <span className="meta-badge">default: 6</span>
-          </label>
-          <input
-            id="agents-maxParallel"
-            type="number"
-            min={1}
-            max={20}
-            value={settings.agents?.maxParallel ?? 6}
-            onChange={(e) => patchAgents({ maxParallel: Math.max(1, Math.min(20, parseInt(e.target.value, 10) || 6)) })}
-          />
-        </div>
-        <div className="form-row">
-          <label htmlFor="agents-stuckThresholdMs">
-            Stuck threshold (ms)
-            <span className="meta-badge">default: 600000 (10 min)</span>
-          </label>
-          <input
-            id="agents-stuckThresholdMs"
-            type="number"
-            min={60000}
-            max={3600000}
-            step={60000}
-            value={settings.agents?.stuckThresholdMs ?? 600000}
-            onChange={(e) => patchAgents({ stuckThresholdMs: Math.max(60000, Math.min(3600000, parseInt(e.target.value, 10) || 600000)) })}
-          />
-        </div>
-        <label className="checkbox-row" data-setting-id="agents.autoRestart">
-          <input
-            type="checkbox"
-            checked={!!settings.agents?.autoRestart}
-            onChange={(e) => patchAgents({ autoRestart: e.target.checked })}
-          />
-          <span>Auto-restart stuck agents</span>
-        </label>
-      </Card>
-
-      {/* Dashboard */}
-      <Card id="settings-dashboard" data-section="dashboard">
-        <CardTitle><Globe size={14} /> Dashboard</CardTitle>
-        <CardMeta>Controls how <code>bizar</code> starts up.</CardMeta>
-        <label className="checkbox-row" data-setting-id="dashboard.autoLaunchWeb">
-          <input
-            type="checkbox"
-            checked={settings.dashboard.autoLaunchWeb !== false}
-            onChange={(e) => patchDashboard({ autoLaunchWeb: e.target.checked })}
-          />
-          <span>Auto-launch web UI alongside TUI</span>
-        </label>
-
-        <div className="field" data-setting-id="dashboard.projectsDirectory" style={{ marginTop: 'var(--space-4)' }}>
-          <label className="field-label" htmlFor="set-projects-directory">Projects directory</label>
-          <input
-            id="set-projects-directory"
-            className="input"
-            type="text"
-            placeholder="/home/user/projects"
-            value={settings.dashboard.projectsDirectory ?? ''}
-            onChange={(e) => patchDashboard({ projectsDirectory: e.target.value })}
-          />
-          <p className="field-help">
-            New projects created via the dashboard will land here, and existing project
-            directories inside this folder are auto-recognized on startup.
-          </p>
-          {settings.dashboard.projectsDirectory && (
-            <>
-              {!/^\/|^[A-Za-z]:/.test(settings.dashboard.projectsDirectory) && (
-                <p style={{ color: 'var(--warning)', fontSize: 11, marginTop: 4 }}>
-                  Path should be absolute (start with / on Linux/Mac, or a drive letter on Windows).
-                </p>
-              )}
-              {settings.dashboard.projectsDirectory.includes('..') && (
-                <p style={{ color: 'var(--error)', fontSize: 11, marginTop: 4 }}>
-                  Path traversal not allowed — this will be rejected server-side.
-                </p>
-              )}
-            </>
-          )}
-        </div>
-
-        {/* allowedRoots textarea */}
-        <div className="field" data-setting-id="dashboard.allowedRoots" style={{ marginTop: 'var(--space-4)' }}>
-          <label className="field-label" htmlFor="set-allowed-roots">
-            Additional allowed roots <span className="muted">(advanced)</span>
-          </label>
-          {/* key= forces re-mount when allowedRoots changes externally (e.g. reset/reload) */}
-          <AutosaveField
-            key={settings.dashboard.allowedRoots?.join('\n')}
-            initialValue={(settings.dashboard.allowedRoots ?? []).join('\n')}
-            delay={1500}
-            saveFn={async (v) => {
-              const lines = v.split('\n').map((l) => l.trim()).filter(Boolean);
-              patchDashboard({ allowedRoots: lines });
-              autoSave?.('dashboard', { allowedRoots: lines } as Settings['dashboard']);
-            }}
-            render={({ value, onChange, onBlur }) => (
-              <textarea
-                id="set-allowed-roots"
-                className="textarea"
-                rows={4}
-                placeholder="/workspace&#10;/srv/projects"
-                value={value}
-                onChange={e => onChange(e.target.value)}
-                onBlur={onBlur}
-              />
-            )}
-          />
-          <p className="field-help">
-            Optional. Add filesystem roots beyond your home directory that the file
-            browser and project scanner can access. Each path must be inside your
-            home directory. One per line.
-          </p>
-          {(() => {
-            const rawLines = (settings.dashboard.allowedRoots ?? []).join('\n').split('\n');
-            const warnings: { key: string; msg: React.ReactNode }[] = [];
-            rawLines.forEach((line, i) => {
-              if (!line.trim()) return;
-              if (!/^\/|^[A-Za-z]:/.test(line)) {
-                warnings.push({
-                  key: `noabs-${i}`,
-                  msg: (
-                    <p style={{ color: 'var(--warning)', fontSize: 11, marginTop: 2 }}>
-                      Line {i + 1}: &quot;{line}&quot; — should be absolute (start with / or a drive letter).
-                    </p>
-                  ),
-                });
-              }
-              if (line.includes('..')) {
-                warnings.push({
-                  key: `dots-${i}`,
-                  msg: (
-                    <p style={{ color: 'var(--error)', fontSize: 11, marginTop: 2 }}>
-                      Line {i + 1}: &quot;{line}&quot; — contains '..' (server will reject this).
-                    </p>
-                  ),
-                });
-              }
-            });
-            return warnings.map((w) => w.msg);
-          })()}
-        </div>
-      </Card>
-
-      {/* Background agents */}
-      <Card id="settings-background" data-section="background">
-        <CardTitle><ServerIcon size={14} /> Background Agents</CardTitle>
-        <CardMeta>Tune plugin options. Changes take effect on next plugin restart.</CardMeta>
-
-        <div className="form-row">
-          <label htmlFor="bg-maxConcurrent">
-            Max concurrent instances
-            <span className="meta-badge">default: 8</span>
-          </label>
-          <input
-            id="bg-maxConcurrent"
-            type="number"
-            min={1}
-            max={32}
-            value={pluginOptions.maxConcurrentInstances ?? 8}
-            onChange={(e) => setPluginOptions((cur) => ({ ...cur, maxConcurrentInstances: Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 8)) }))}
-          />
-          <small className="muted">Plugin option: <code>maxConcurrentInstances</code></small>
-        </div>
-
-        <div className="form-row">
-          <label htmlFor="bg-toolCallCap">
-            Tool-call cap
-            <span className="meta-badge">default: 500</span>
-          </label>
-          <input
-            id="bg-toolCallCap"
-            type="number"
-            min={1}
-            max={5000}
-            value={pluginOptions.backgroundToolCallCap ?? 500}
-            onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundToolCallCap: Math.max(1, Math.min(5000, parseInt(e.target.value, 10) || 500)) }))}
-          />
-          <small className="muted">Plugin option: <code>backgroundToolCallCap</code></small>
-        </div>
-
-        <div className="form-row">
-          <label htmlFor="bg-stallTimeout">
-            Stall timeout (ms)
-            <span className="meta-badge">default: 180000</span>
-          </label>
-          <input
-            id="bg-stallTimeout"
-            type="number"
-            min={10000}
-            max={600000}
-            step={1000}
-            value={pluginOptions.backgroundStallTimeoutMs ?? 180000}
-            onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundStallTimeoutMs: Math.max(10000, Math.min(600000, parseInt(e.target.value, 10) || 180000)) }))}
-          />
-          <small className="muted">Plugin option: <code>backgroundStallTimeoutMs</code></small>
-        </div>
-
-        <div className="form-row">
-          <label htmlFor="bg-thinkingLoopTimeout">
-            Thinking-loop timeout (ms)
-            <span className="meta-badge">default: 300000</span>
-          </label>
-          <input
-            id="bg-thinkingLoopTimeout"
-            type="number"
-            min={30000}
-            max={900000}
-            step={1000}
-            value={pluginOptions.backgroundThinkingLoopTimeoutMs ?? 300000}
-            onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundThinkingLoopTimeoutMs: Math.max(30000, Math.min(900000, parseInt(e.target.value, 10) || 300000)) }))}
-          />
-          <small className="muted">Plugin option: <code>backgroundThinkingLoopTimeoutMs</code></small>
-        </div>
-
-        <div className="form-row">
-          <label htmlFor="bg-maxInterventions">
-            Max interventions
-            <span className="meta-badge">default: 1</span>
-          </label>
-          <input
-            id="bg-maxInterventions"
-            type="number"
-            min={1}
-            max={3}
-            value={pluginOptions.backgroundMaxInterventions ?? 1}
-            onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundMaxInterventions: Math.max(1, Math.min(3, parseInt(e.target.value, 10) || 1)) }))}
-          />
-          <small className="muted">Plugin option: <code>backgroundMaxInterventions</code></small>
-        </div>
-
-        <div className="form-row">
-          <Button variant="secondary" size="sm" onClick={onSavePluginOptions}>
-            <Save size={14} /> Save plugin options
-          </Button>
-          <Button variant="secondary" size="sm" onClick={onCleanupBackground}>
-            Cleanup old instances (&gt;7 days)
-          </Button>
-        </div>
-
-        <div className="form-row">
-          <small>Plugin options are read at startup. Save changes and run <code>bizar update</code> to apply.</small>
-        </div>
-      </Card>
-    </>
-  );
-}

package/bizar-dash/src/web/views/settings/AuthSection.tsx

@@ -1,159 +0,0 @@
-// src/web/views/settings/AuthSection.tsx
-import React, { useEffect, useState } from 'react';
-import { Shield, Copy, KeyRound, RotateCcw } from 'lucide-react';
-import { Card, CardTitle, CardMeta } from '../../components/Card';
-import { Button } from '../../components/Button';
-import { useToast } from '../../components/Toast';
-import { api } from '../../lib/api';
-import type { Settings } from '../../lib/types';
-
-type AuthStatus = { required: boolean; loopback: boolean; peer: string };
-
-type Props = {
-  settings: Settings;
-  authStatus: AuthStatus | null;
-  setAuthStatus: React.Dispatch<React.SetStateAction<AuthStatus | null>>;
-};
-
-export function AuthSection({ authStatus, setAuthStatus }: Props) {
-  const toast = useToast();
-  const [authToken, setAuthToken] = useState<string>(api.getToken());
-  const [revealedToken, setRevealedToken] = useState<string>('');
-
-  // Probe the server once on mount
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const r = await api.probeAuthStatus();
-        if (!cancelled) setAuthStatus(r);
-      } catch {
-        if (!cancelled) {
-          setAuthStatus({ required: true, loopback: false, peer: '' });
-        }
-      }
-    })();
-    return () => { cancelled = true; };
-  }, []);
-
-  const onCopyToken = async () => {
-    try {
-      const r = await api.get<{ token: string }>('/auth/reveal');
-      setRevealedToken(r.token);
-      setAuthToken(r.token);
-      api.setToken(r.token);
-      try {
-        await navigator.clipboard.writeText(r.token);
-        toast.success('Token copied to clipboard.');
-      } catch {
-        toast.success('Token revealed — copy from the field below.');
-      }
-    } catch (err) {
-      toast.error(`Reveal failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onRegenerateToken = async () => {
-    if (!confirm('Regenerate the auth token? Anything still using the old token will start getting 401 errors immediately.')) {
-      return;
-    }
-    try {
-      const r = await api.post<{ token: string }>('/auth/regenerate');
-      setRevealedToken(r.token);
-      setAuthToken(r.token);
-      api.setToken(r.token);
-      try {
-        await navigator.clipboard.writeText(r.token);
-        toast.success('New token generated and copied to clipboard.');
-      } catch {
-        toast.success('New token generated — copy from the field below. Old token is now invalid.');
-      }
-    } catch (err) {
-      toast.error(`Regenerate failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onSaveToken = () => {
-    api.setToken(authToken.trim());
-    toast.success('Token saved. The dashboard will use it on the next request.');
-  };
-
-  return (
-    <Card id="settings-auth" data-section="auth">
-      <CardTitle><Shield size={14} /> Authentication</CardTitle>
-      <CardMeta>
-        Localhost and Tailscale browser access are auto-trusted via loopback.
-        A bearer token is still available for non-loopback clients and
-        forced-auth mode.
-      </CardMeta>
-
-      <div className="field" data-setting-id="auth.status">
-        <label className="field-label">Server status</label>
-        <p style={{ margin: '4px 0' }}>
-          Auth required:{' '}
-          <strong>{authStatus ? (authStatus.required ? 'yes' : 'no') : 'probing…'}</strong>
-        </p>
-        <p style={{ margin: '4px 0' }}>
-          Connection:{' '}
-          <strong>
-            {authStatus
-              ? (authStatus.loopback ? 'loopback (auto-trusted)' : 'remote')
-              : 'probing…'}
-          </strong>
-        </p>
-        <p style={{ margin: '4px 0' }}>
-          Peer address:{' '}
-          {authStatus?.peer ? <code>{authStatus.peer}</code> : <span className="muted">probing…</span>}
-        </p>
-        <p className="muted" style={{ fontSize: 12, margin: '4px 0' }}>
-          Localhost and Tailscale browser access are auto-trusted because the
-          dashboard sees a loopback peer. Paste a token only for non-loopback
-          API clients/scripts, or if you force auth for every connection with{' '}
-          <code>BIZAR_DASHBOARD_REQUIRE_AUTH=1</code>.
-        </p>
-        <p className="muted" style={{ fontSize: 12, margin: '4px 0' }}>
-          Dashboard tokens are generated on first boot and saved to{' '}
-          <code>~/.config/bizar/dashboard-secret</code> (mode 0600).
-        </p>
-        <p className="muted" style={{ fontSize: 12, margin: '4px 0' }}>
-          For Tailscale Serve or any reverse-proxy access, paste this token
-          once via the boot screen — it is saved per-origin and works for all
-          subsequent visits.
-        </p>
-      </div>
-
-      <div className="field" data-setting-id="auth.token">
-        <label className="field-label">Token (this browser)</label>
-        <input
-          type="password"
-          className="input mono"
-          value={authToken}
-          onChange={(e) => setAuthToken(e.target.value)}
-          placeholder="Paste token from server stderr or another browser"
-          spellCheck={false}
-          autoComplete="off"
-        />
-        <div className="task-form-row" style={{ marginTop: 8 }}>
-          <Button variant="secondary" size="sm" onClick={onSaveToken}>
-            <KeyRound size={14} /> Save token
-          </Button>
-          <Button variant="ghost" size="sm" onClick={onCopyToken}>
-            <Copy size={14} /> Reveal &amp; copy server token
-          </Button>
-          <Button variant="ghost" size="sm" onClick={onRegenerateToken}>
-            <RotateCcw size={14} /> Regenerate
-          </Button>
-        </div>
-        {revealedToken ? (
-          <p className="muted" style={{ fontSize: 12, marginTop: 8 }}>
-            Last revealed token (one-time): <code className="mono">{revealedToken}</code>
-          </p>
-        ) : null}
-        <p className="muted" style={{ fontSize: 12, marginTop: 8 }}>
-          Regenerating invalidates the current token immediately. Anything
-          still using the old token will see 401 until it's updated.
-        </p>
-      </div>
-    </Card>
-  );
-}

package/bizar-dash/src/web/views/settings/EnvVarsSection.tsx

@@ -1,15 +0,0 @@
-// src/web/views/settings/EnvVarsSection.tsx
-import React from 'react';
-import { KeyRound } from 'lucide-react';
-import { Card, CardTitle, CardMeta } from '../../components/Card';
-import { EnvVarManager } from '../../components/EnvVarManager';
-
-export function EnvVarsSection() {
-  return (
-    <Card id="settings-env-vars" data-section="env-vars">
-      <CardTitle><KeyRound size={14} /> Environment Variables</CardTitle>
-      <CardMeta>Manage BIZAR_* env vars (API keys, secrets). Values are stored in <code>~/.config/bizar/env.json</code> (mode 0600).</CardMeta>
-      <EnvVarManager />
-    </Card>
-  );
-}

package/bizar-dash/src/web/views/settings/GeneralSection.tsx

@@ -1,128 +0,0 @@
-// src/web/views/settings/GeneralSection.tsx
-import React from 'react';
-import { Layout as LayoutIcon } from 'lucide-react';
-import { Card, CardTitle, CardMeta } from '../../components/Card';
-import { AutosaveField } from '../../components/AutosaveField';
-import { cn } from '../../lib/utils';
-import type { Settings } from '../../lib/types';
-
-type Props = {
-  settings: Settings;
-  patchUi: (patch: Partial<Settings['ui']>) => void;
-  patchTop: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
-  /** Called by AutosaveField after state is patched; the parent debounces the API save */
-  autoSave?: (key: keyof Settings, value: Settings[keyof Settings]) => void;
-};
-
-const LAYOUTS = [
-  { id: 'topnav', label: 'Top nav' },
-  { id: 'sidebar', label: 'Sidebar' },
-  { id: 'both', label: 'Both' },
-] as const;
-
-export function GeneralSection({ settings, patchUi, patchTop, autoSave }: Props) {
-  return (
-    <>
-      {/* UI Layout */}
-      <Card id="settings-layout" data-section="layout">
-        <CardTitle><LayoutIcon size={14} /> UI layout</CardTitle>
-        <CardMeta>Choose how the dashboard's navigation is presented.</CardMeta>
-        <div className="layout-row" data-setting-id="ui.layout">
-          {LAYOUTS.map((l) => (
-            <button
-              key={l.id}
-              type="button"
-              className={cn('layout-card', settings.ui.layout === l.id && 'layout-card-active')}
-              onClick={() => patchUi({ layout: l.id })}
-            >
-              <span className="layout-card-label">{l.label}</span>
-            </button>
-          ))}
-        </div>
-        <label className="checkbox-row" data-setting-id="ui.showHeader">
-          <input
-            type="checkbox"
-            checked={settings.ui.showHeader}
-            onChange={(e) => patchUi({ showHeader: e.target.checked })}
-          />
-          <span>Show header</span>
-        </label>
-        <label className="checkbox-row" data-setting-id="ui.showStatusBar">
-          <input
-            type="checkbox"
-            checked={settings.ui.showStatusBar}
-            onChange={(e) => patchUi({ showStatusBar: e.target.checked })}
-          />
-          <span>Show status bar</span>
-        </label>
-        <div className="field" data-setting-id="ui.defaultTab">
-          <label className="field-label">Default tab</label>
-          <select
-            className="select"
-            value={settings.ui.defaultTab}
-            onChange={(e) => patchUi({ defaultTab: e.target.value })}
-          >
-            <option value="overview">Overview</option>
-            <option value="chat">Chat</option>
-            <option value="agents">Agents</option>
-            <option value="artifacts">Plans</option>
-            <option value="projects">Projects</option>
-            <option value="tasks">Tasks</option>
-            <option value="config">Config</option>
-            <option value="settings">Settings</option>
-            <option value="mods">Mods</option>
-            <option value="schedules">Schedules</option>
-          </select>
-        </div>
-      </Card>
-
-      {/* General */}
-      <Card id="settings-general" data-section="general">
-        <CardTitle>General</CardTitle>
-        <CardMeta>Default agent + model override.</CardMeta>
-        <div className="field" data-setting-id="defaultAgent">
-          <label className="field-label" htmlFor="set-default-agent">Default agent</label>
-          <AutosaveField
-            initialValue={settings.defaultAgent || ''}
-            saveFn={async (v) => {
-              patchTop('defaultAgent', v);
-              autoSave?.('defaultAgent', v);
-            }}
-            render={({ value, onChange, onBlur }) => (
-              <input
-                id="set-default-agent"
-                className="input"
-                type="text"
-                placeholder="e.g. odin"
-                value={value}
-                onChange={e => onChange(e.target.value)}
-                onBlur={onBlur}
-              />
-            )}
-          />
-        </div>
-        <div className="field" data-setting-id="defaultModel">
-          <label className="field-label" htmlFor="set-default-model">Model override</label>
-          <AutosaveField
-            initialValue={settings.defaultModel || ''}
-            saveFn={async (v) => {
-              patchTop('defaultModel', v);
-              autoSave?.('defaultModel', v);
-            }}
-            render={({ value, onChange, onBlur }) => (
-              <input
-                id="set-default-model"
-                className="input"
-                type="text"
-                placeholder="(leave empty for provider default)"
-                value={value}
-                onChange={e => onChange(e.target.value)}
-                onBlur={onBlur}
-              />
-            )}
-          />
-        </div>
-      </Card>
-    </>
-  );
-}

package/bizar-dash/src/web/views/settings/HeadroomSection.tsx

@@ -1,39 +0,0 @@
-// src/web/views/settings/HeadroomSection.tsx
-import React from 'react';
-import { HeadroomSettingsCard } from '../../components/HeadroomSettings';
-import { type HeadroomSettings, type Settings } from '../../lib/types';
-
-const DEFAULT_HEADROOM_SETTINGS: HeadroomSettings = {
-  enabled: true,
-  autoInstall: true,
-  port: 8787,
-  host: '127.0.0.1',
-  outputShaper: false,
-  telemetry: false,
-  budget: 0,
-  backend: 'anthropic',
-  autoStart: true,
-  autoWrap: true,
-  routeAllProviders: true,
-};
-
-type Props = {
-  settings: Settings;
-  setSettings: React.Dispatch<React.SetStateAction<Settings>>;
-  setDirty: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export function HeadroomSection({ settings, setSettings, setDirty }: Props) {
-  return (
-    <HeadroomSettingsCard
-      settings={settings.headroom || DEFAULT_HEADROOM_SETTINGS}
-      onPatch={(patch) => {
-        setSettings((cur) => ({
-          ...cur,
-          headroom: { ...(cur.headroom || DEFAULT_HEADROOM_SETTINGS), ...patch },
-        }));
-        setDirty(true);
-      }}
-    />
-  );
-}