// settings-extra-3.jsx — Settings sub-pages part 3/3
// Hooks, Network, Plugins, Prompts, Skills, Usage, Voice, Web Search, Workspace

// ═════════════════════════════════════════════════════════════
// A · HOOKS
// ═════════════════════════════════════════════════════════════
function HooksSettings({ dark, state = 'list' }) {
  const t = dark ? G.d : G.l;
  const hooks = [
    { id: 'pre-tool',  name: 'pre-tool-call',     event: 'pre_tool_call',     desc: 'Validates tool args before execution.', enabled: true,  lang: 'sh',     last: '12s ago',   ok: true },
    { id: 'post-tool', name: 'post-tool-call',    event: 'post_tool_call',    desc: 'Logs every tool result to ./audit.',    enabled: true,  lang: 'js',     last: '12s ago',   ok: true },
    { id: 'on-msg',    name: 'on-message-send',   event: 'on_message_send',   desc: 'Strips secrets matching company regex.', enabled: true, lang: 'py',     last: '4m ago',    ok: true },
    { id: 'on-mem',    name: 'memory-write',      event: 'on_memory_write',   desc: 'Refuses memory writes containing PII.',  enabled: false, lang: 'js',    last: 'never',     ok: null },
    { id: 'on-err',    name: 'error-reporter',    event: 'on_error',          desc: 'Posts errors to ops Slack.',             enabled: true, lang: 'sh',    last: '2h ago',    ok: false, errMsg: 'curl: (28) timed out' },
  ];

  if (state === 'editing') {
    return (
      <>
        <S2_PageHeader dark={dark} title="Edit hook · post-tool-call" sub="Hooks run on lifecycle events. Sandboxed, 3-second timeout." right={
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="ghost" size="sm">Cancel</Button>
            <Button variant="secondary" size="sm">Test run</Button>
            <Button variant="primary" size="sm">Save</Button>
          </div>
        } />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 18 }}>
          <div>
            <S2_Section dark={dark} title="Trigger">
              <S2_Card dark={dark}>
                <S2_Row dark={dark} label="Event" right={
                  <div style={{ height: 26, padding: '0 8px', background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 12, fontFamily: G.mono }}>post_tool_call</span>
                    <Icon name="chevronDown" size={10} color={t.fg3} />
                  </div>
                } />
                <S2_Row dark={dark} label="Filter" value="Only run when these match. Empty = always." right={
                  <input defaultValue="tool=shell|web_fetch" style={{ width: 200, height: 26, padding: '0 8px', fontSize: 11.5, fontFamily: G.mono, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg }} />
                } last />
              </S2_Card>
            </S2_Section>
            <S2_Section dark={dark} title="Script">
              <S2_Card dark={dark} style={{ overflow: 'hidden' }}>
                <div style={{ padding: '6px 12px', background: t.surface2, borderBottom: `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 10.5, fontFamily: G.mono, color: t.fg3 }}>RUNTIME</span>
                  <div style={{ display: 'flex', gap: 3 }}>
                    {['sh', 'js', 'py'].map((l) => (
                      <div key={l} style={{ padding: '2px 8px', borderRadius: 4, fontSize: 10.5, fontFamily: G.mono, background: l === 'js' ? t.bg : 'transparent', border: l === 'js' ? `1px solid ${t.border}` : 'none' }}>{l}</div>
                    ))}
                  </div>
                  <span style={{ flex: 1 }} />
                  <span style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono }}>34 lines</span>
                </div>
                <div style={{ padding: 12, background: t.bg, fontFamily: G.mono, fontSize: 11.5, lineHeight: 1.7, color: t.fg2, minHeight: 200 }}>
                  <div><span style={{ color: t.fg3 }}>1</span>  <span style={{ color: '#a78bfa' }}>const</span> {`{ tool, args, result } = context;`}</div>
                  <div><span style={{ color: t.fg3 }}>2</span>  </div>
                  <div><span style={{ color: t.fg3 }}>3</span>  <span style={{ color: '#a78bfa' }}>if</span> (tool === <span style={{ color: '#34d399' }}>'shell'</span>) {`{`}</div>
                  <div><span style={{ color: t.fg3 }}>4</span>    <span style={{ color: '#a78bfa' }}>await</span> fs.appendFile(</div>
                  <div><span style={{ color: t.fg3 }}>5</span>      <span style={{ color: '#34d399' }}>'./audit/shell.log'</span>,</div>
                  <div><span style={{ color: t.fg3 }}>6</span>      <span style={{ color: '#34d399' }}>{`\`\${ts}\\t\${args.cmd}\\n\``}</span></div>
                  <div><span style={{ color: t.fg3 }}>7</span>    );</div>
                  <div><span style={{ color: t.fg3 }}>8</span>  {`}`}</div>
                  <div><span style={{ color: t.fg3 }}>9</span>  </div>
                  <div><span style={{ color: t.fg3 }}>10</span> <span style={{ color: '#a78bfa' }}>return</span> {`{ continue: true }`};</div>
                </div>
              </S2_Card>
            </S2_Section>
          </div>
          <div>
            <S2_Section dark={dark} title="Sandbox">
              <S2_Card dark={dark}>
                <S2_Row dark={dark} label="Network" value="Allow outbound HTTP." right={<S2_Toggle on={false} dark={dark} />} />
                <S2_Row dark={dark} label="Filesystem" value="Read/write to ./audit only." right={<S2_Toggle on={true} dark={dark} />} />
                <S2_Row dark={dark} label="Shell exec" value="Run subprocesses." right={<S2_Toggle on={false} dark={dark} />} />
                <S2_Row dark={dark} label="Timeout" right={<span style={{ fontSize: 12, fontFamily: G.mono }}>3 sec</span>} last />
              </S2_Card>
            </S2_Section>
            <S2_Section dark={dark} title="Last test run">
              <S2_Card dark={dark} style={{ padding: 10, fontFamily: G.mono, fontSize: 10.5, lineHeight: 1.7 }}>
                <div style={{ color: '#28c840' }}>✓ exited 0 in 87 ms</div>
                <div style={{ color: t.fg3, marginTop: 4 }}>stdout</div>
                <div>{`logged: shell{cmd:"ls -la"}`}</div>
                <div style={{ color: t.fg3, marginTop: 4 }}>stderr</div>
                <div style={{ color: t.fg3 }}>(empty)</div>
              </S2_Card>
            </S2_Section>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <S2_PageHeader dark={dark} title="Hooks" sub="Run scripts on lifecycle events: tool calls, message sends, errors." right={
        <Button variant="primary" size="sm"><Icon name="plus" size={12} /> New hook</Button>
      } />
      <S2_Card dark={dark} style={{ padding: 12, marginBottom: 14, background: t.surface2, borderColor: t.border }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <Icon name="zap" size={14} color={t.fg2} style={{ marginTop: 2 }} />
          <div style={{ flex: 1, fontSize: 11.5, color: t.fg2, lineHeight: 1.55 }}>
            Hooks run inside a sandbox with a 3-second timeout. Returning <span style={{ fontFamily: G.mono, color: t.fg }}>{`{ continue: false }`}</span> halts the action; returning anything else lets it proceed.
          </div>
        </div>
      </S2_Card>

      <S2_Card dark={dark}>
        {hooks.map((h, i) => (
          <div key={h.id} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <S2_StatusDot status={h.enabled ? (h.ok === false ? 'off' : 'on') : 'off'} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 500, fontFamily: G.mono }}>{h.name}</span>
                  <Tag>{h.event}</Tag>
                  <span style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, padding: '1px 6px', background: t.surface2, borderRadius: 3 }}>{h.lang}</span>
                </div>
                <div style={{ fontSize: 11, color: t.fg3, marginTop: 2 }}>{h.desc}</div>
              </div>
              <span style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono }}>{h.last}</span>
              <S2_Toggle on={h.enabled} dark={dark} />
            </div>
            {h.ok === false && (
              <div style={{ marginTop: 8, padding: '6px 10px', background: 'rgba(255,95,87,.08)', borderRadius: 6, fontFamily: G.mono, fontSize: 10.5, color: '#ff5f57' }}>
                ✗ failed last run · {h.errMsg}
              </div>
            )}
          </div>
        ))}
      </S2_Card>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// B · NETWORK
// ═════════════════════════════════════════════════════════════
function NetworkSettings({ dark, proxyState = 'off' }) {
  const t = dark ? G.d : G.l;
  return (
    <>
      <S2_PageHeader dark={dark} title="Network" sub="Proxy, certificates, allowlist, and outbound traffic policy." />
      <S2_Section dark={dark} title="Proxy">
        <S2_Card dark={dark}>
          <S2_Row dark={dark} label="Mode" right={
            <div style={{ display: 'flex', gap: 4, padding: 3, background: t.surface2, borderRadius: 7 }}>
              {['Off', 'System', 'Manual'].map((r) => (
                <div key={r} style={{ padding: '4px 10px', borderRadius: 5, fontSize: 11.5, fontFamily: G.mono, background: r.toLowerCase() === proxyState ? t.bg : 'transparent', border: r.toLowerCase() === proxyState ? `1px solid ${t.border}` : 'none', cursor: 'pointer' }}>{r}</div>
              ))}
            </div>
          } />
          {proxyState === 'manual' && (
            <>
              <S2_Row dark={dark} label="HTTP proxy" right={<input defaultValue="http://10.0.0.4:8118" style={{ width: 200, height: 26, padding: '0 8px', fontSize: 11.5, fontFamily: G.mono, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg }} />} />
              <S2_Row dark={dark} label="HTTPS proxy" right={<input defaultValue="http://10.0.0.4:8118" style={{ width: 200, height: 26, padding: '0 8px', fontSize: 11.5, fontFamily: G.mono, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg }} />} />
              <S2_Row dark={dark} label="No proxy for" right={<input defaultValue="localhost,127.0.0.1,*.local" style={{ width: 280, height: 26, padding: '0 8px', fontSize: 11.5, fontFamily: G.mono, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg }} />} last />
            </>
          )}
          {proxyState === 'system' && <S2_Row dark={dark} label="Detected" value="Using macOS system proxy: pac.corp.example.com (auto-detect)." right={<Tag>active</Tag>} last />}
        </S2_Card>
      </S2_Section>

      <S2_Section dark={dark} title="Certificates">
        <S2_Card dark={dark}>
          <S2_Row dark={dark} label="Trust system root CAs" value="Use macOS Keychain trust store." right={<S2_Toggle on={true} dark={dark} />} />
          <S2_Row dark={dark} label="Custom CA bundle" value="3 certificates trusted from this file." right={<Button variant="secondary" size="sm">Manage…</Button>} />
          <S2_Row dark={dark} label="Allow self-signed in dev" value="Per-host. Asks once." right={<S2_Toggle on={false} dark={dark} />} last />
        </S2_Card>
      </S2_Section>

      <S2_Section dark={dark} title="Outbound allowlist" sub="When enabled, Ghast can only reach these hosts. Useful for air-gapped or regulated setups.">
        <S2_Card dark={dark}>
          <div style={{ padding: '10px 14px', display: 'flex', alignItems: 'center', borderBottom: `0.5px solid ${t.border2}` }}>
            <span style={{ flex: 1, fontSize: 12.5 }}>Strict allowlist</span>
            <S2_Toggle on={false} dark={dark} />
          </div>
          {[
            ['*.anthropic.com',  'Default · model API'],
            ['*.openai.com',     'Default · model API'],
            ['api.github.com',   'For PR & repo tools'],
            ['*.ghast.app',      'Telemetry & updates'],
            ['localhost',        'Local development'],
          ].map(([host, why], i) => (
            <div key={host} style={{ padding: '10px 14px', borderTop: `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="globe" size={12} color={t.fg3} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontFamily: G.mono }}>{host}</div>
                <div style={{ fontSize: 10.5, color: t.fg3, marginTop: 1 }}>{why}</div>
              </div>
              <Icon name="close" size={12} color={t.fg3} style={{ cursor: 'pointer' }} />
            </div>
          ))}
        </S2_Card>
      </S2_Section>

      <S2_Section dark={dark} title="Live traffic" sub="Last 60 seconds.">
        <S2_Card dark={dark} style={{ padding: 14 }}>
          <div style={{ display: 'flex', gap: 14, marginBottom: 12 }}>
            <div><div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6 }}>RPS</div><div style={{ fontSize: 18, fontWeight: 600, fontFamily: G.mono }}>3.4</div></div>
            <div><div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6 }}>P50</div><div style={{ fontSize: 18, fontWeight: 600, fontFamily: G.mono }}>184ms</div></div>
            <div><div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6 }}>P95</div><div style={{ fontSize: 18, fontWeight: 600, fontFamily: G.mono }}>1.4s</div></div>
            <div><div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6 }}>OUT</div><div style={{ fontSize: 18, fontWeight: 600, fontFamily: G.mono }}>248kb/s</div></div>
            <div><div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6 }}>IN</div><div style={{ fontSize: 18, fontWeight: 600, fontFamily: G.mono }}>1.2mb/s</div></div>
          </div>
          <div style={{ height: 60, position: 'relative' }}>
            <svg width="100%" height="60" viewBox="0 0 600 60" preserveAspectRatio="none">
              {Array.from({ length: 60 }).map((_, i) => {
                const h = 8 + Math.abs(Math.sin(i * 0.7) + Math.cos(i * 0.4)) * 22;
                return <rect key={i} x={i * 10 + 1} y={60 - h} width={8} height={h} fill={t.fg2} opacity={0.6} />;
              })}
            </svg>
          </div>
        </S2_Card>
      </S2_Section>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// C · PLUGINS
// ═════════════════════════════════════════════════════════════
function PluginsSettings({ dark, state = 'list' }) {
  const t = dark ? G.d : G.l;
  const installed = [
    { id: 'linear',     name: 'Linear',          ver: '0.4.1',  desc: 'Triage issues from chat.', enabled: true,  perms: 3, hot: true },
    { id: 'figma',      name: 'Figma frames',    ver: '0.2.0',  desc: 'Read frame structure from a file URL.', enabled: true,  perms: 1, hot: true },
    { id: 'spotify',    name: 'Spotify',         ver: '0.1.7',  desc: 'Now playing & playback control.',     enabled: false, perms: 2, hot: false, broken: true },
    { id: 'kagi',       name: 'Kagi search',     ver: '1.0.2',  desc: 'Use Kagi as the web-search backend.', enabled: true,  perms: 1, hot: true },
    { id: 'finder',     name: 'Finder favorites', ver: '0.3.0',  desc: 'Pin folders for quick file picking.', enabled: true,  perms: 1, hot: true },
  ];

  if (state === 'detail') {
    return (
      <>
        <S2_PageHeader dark={dark} title="Linear plugin" sub="Triage issues from chat." right={
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="ghost" size="sm">Settings</Button>
            <Button variant="danger" size="sm">Uninstall</Button>
          </div>
        } />
        <S2_Card dark={dark} style={{ padding: 18, marginBottom: 18 }}>
          <div style={{ display: 'flex', gap: 14 }}>
            <div style={{ width: 56, height: 56, borderRadius: 12, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="cube" size={26} color={t.fg2} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600 }}>Linear</div>
              <div style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono, marginTop: 2 }}>com.linear.ghast · 0.4.1 · by Linear, Inc.</div>
              <div style={{ fontSize: 11.5, color: t.fg2, marginTop: 6, lineHeight: 1.5, maxWidth: 540 }}>
                Adds /linear slash commands and a "Send to Linear" message action. Authenticates via OAuth with your Linear workspace.
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono }}>★ 4.6 · 8,214 users</div>
              <div style={{ marginTop: 8 }}><S2_Toggle on={true} dark={dark} /></div>
            </div>
          </div>
        </S2_Card>

        <S2_Section dark={dark} title="Permissions">
          <S2_Card dark={dark}>
            {[
              ['Read your Linear workspaces',           true,  'Required'],
              ['Create and update issues',              true,  'Required'],
              ['Send notifications to your teammates', false, 'Optional'],
            ].map(([k, on, kind], i) => (
              <div key={k} style={{ padding: '10px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon name="check" size={12} color={on ? t.fg : t.fg3} />
                <div style={{ flex: 1, fontSize: 12.5 }}>{k}</div>
                <span style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono }}>{kind}</span>
              </div>
            ))}
          </S2_Card>
        </S2_Section>

        <S2_Section dark={dark} title="Provided commands">
          <S2_Card dark={dark}>
            {[
              ['/linear new',     'Create a new issue from current selection.'],
              ['/linear search',  'Search across all visible workspaces.'],
              ['/linear assign',  'Assign an existing issue to a teammate.'],
            ].map(([cmd, desc], i) => (
              <div key={cmd} style={{ padding: '10px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}` }}>
                <span style={{ fontSize: 12, fontFamily: G.mono, fontWeight: 500 }}>{cmd}</span>
                <span style={{ fontSize: 11.5, color: t.fg3, marginLeft: 12 }}>{desc}</span>
              </div>
            ))}
          </S2_Card>
        </S2_Section>
      </>
    );
  }

  if (state === 'browse') {
    const browse = [
      { id: 'jira', name: 'Jira',           desc: 'Atlassian Jira integration.',        rating: 4.2, users: '12k', new: false, installed: false },
      { id: 'gh',   name: 'GitHub Plus',    desc: 'Extended GitHub commands.',           rating: 4.7, users: '24k', new: false, installed: true },
      { id: 'r',    name: 'Raindrop.io',    desc: 'Bookmark sync.',                      rating: 4.5, users: '4.1k', new: true,  installed: false },
      { id: 'tw',   name: 'Tailwind preview', desc: 'Live class preview in chat.',       rating: 4.4, users: '6.8k', new: true,  installed: false },
      { id: 'no',   name: 'Notion blocks',  desc: 'Read & write Notion pages.',          rating: 4.3, users: '18k', new: false, installed: false },
      { id: 'sp',   name: 'Spotify',        desc: 'Now playing & playback control.',     rating: 3.9, users: '9.2k', new: false, installed: true },
    ];
    return (
      <>
        <S2_PageHeader dark={dark} title="Browse plugins" sub="Curated extensions from the Ghast community." right={
          <Button variant="ghost" size="sm">View installed</Button>
        } />
        <Input placeholder="Search 218 plugins" icon="search" dark={dark} style={{ marginBottom: 14 }} />
        <div style={{ display: 'flex', gap: 6, marginBottom: 14, flexWrap: 'wrap' }}>
          {['All', 'Productivity', 'Dev', 'Communication', 'Search', 'Media', 'Privacy'].map((c, i) => (
            <button key={c} style={{ padding: '5px 11px', fontSize: 11.5, borderRadius: 14, background: i === 0 ? t.fg : 'transparent', color: i === 0 ? t.bg : t.fg2, border: `1px solid ${i === 0 ? t.fg : t.border}` }}>{c}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {browse.map((p) => (
            <div key={p.id} style={{ padding: 14, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 10 }}>
              <div style={{ display: 'flex', gap: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: t.surface2, border: `1px solid ${t.border}`, flexShrink: 0 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</span>
                    {p.new && <Tag tone="accent">NEW</Tag>}
                  </div>
                  <div style={{ fontSize: 11, color: t.fg3, marginTop: 2 }}>{p.desc}</div>
                  <div style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono, marginTop: 6 }}>★ {p.rating} · {p.users}</div>
                </div>
                <Button variant={p.installed ? 'ghost' : 'secondary'} size="sm">{p.installed ? 'Installed' : 'Install'}</Button>
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  return (
    <>
      <S2_PageHeader dark={dark} title="Plugins" sub="Extend Ghast with installable plugins." right={
        <Button variant="primary" size="sm"><Icon name="plus" size={12} /> Browse plugins</Button>
      } />
      <Input placeholder="Search installed (5)" icon="search" dark={dark} style={{ marginBottom: 14 }} />
      <S2_Card dark={dark}>
        {installed.map((p, i) => (
          <div key={p.id} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: t.surface2, border: `1px solid ${t.border}`, flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 12.5, fontWeight: 500 }}>{p.name}</span>
                <Tag>{p.ver}</Tag>
                {p.broken && <Tag tone="danger">needs auth</Tag>}
              </div>
              <div style={{ fontSize: 11, color: t.fg3, marginTop: 1 }}>{p.desc}</div>
              <div style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono, marginTop: 4 }}>{p.perms} permissions</div>
            </div>
            <Icon name="moreH" size={14} color={t.fg3} style={{ cursor: 'pointer' }} />
            <S2_Toggle on={p.enabled} dark={dark} />
          </div>
        ))}
      </S2_Card>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// D · PROMPTS
// ═════════════════════════════════════════════════════════════
function PromptsSettings({ dark, state = 'list' }) {
  const t = dark ? G.d : G.l;
  const prompts = [
    { id: 'sys',     name: 'Default system prompt',  desc: 'Used for every new thread without an agent.', vars: 4, last: 'Today',  builtin: true },
    { id: 'review',  name: 'PR review',              desc: 'Used by /review and pr-reviewer agent.',      vars: 2, last: 'Mar 12', builtin: false },
    { id: 'summ',    name: 'Daily summary',          desc: 'Personal email summary at 18:00.',           vars: 3, last: 'Yesterday', builtin: false },
    { id: 'tone',    name: 'Reply tone · concise',   desc: 'Adjusts assistant style.',                    vars: 0, last: 'Mar 4',  builtin: false },
    { id: 'mem',     name: 'Memory writeback',       desc: 'Triggered after long sessions.',             vars: 2, last: 'Feb 28', builtin: true },
  ];

  if (state === 'editing') {
    return (
      <>
        <S2_PageHeader dark={dark} title="Edit prompt · Default system prompt" right={
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="ghost" size="sm">Reset to default</Button>
            <Button variant="secondary" size="sm">Discard</Button>
            <Button variant="primary" size="sm">Save</Button>
          </div>
        } />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 18 }}>
          <S2_Card dark={dark} style={{ padding: 14 }}>
            <textarea defaultValue={`You are Ghast — a careful, concise desktop assistant.\n\n## Voice\n- Plain language. No filler.\n- Names matter. Refer to {{user_name}} by their first name.\n- Defer to the user when uncertain.\n\n## Capabilities\nYou have access to the following tools: {{tool_list}}\nYou can read & write files in {{workspace_path}}.\nThe current time is {{date}}.\n\n## Privacy\nNever read clipboards or screenshots without an explicit prompt referencing them.\nNever surface contents from blacklisted apps (see settings → activity recorder).`} style={{ width: '100%', minHeight: 400, background: 'transparent', border: 'none', outline: 'none', resize: 'vertical', fontFamily: G.mono, fontSize: 12, lineHeight: 1.6, color: t.fg }} />
            <div style={{ borderTop: `0.5px solid ${t.border2}`, marginTop: 8, paddingTop: 8, display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: t.fg3, fontFamily: G.mono }}>
              <span>312 tokens · 18 lines · ✎ unsaved</span>
              <span>Markdown · syntax-highlight</span>
            </div>
          </S2_Card>
          <div>
            <S2_Section dark={dark} title="Variables" sub="Click to copy the syntax.">
              <S2_Card dark={dark}>
                {[
                  ['user_name',     'Your name'],
                  ['workspace_path', 'Active workspace'],
                  ['tool_list',     'Active tool names'],
                  ['date',          'Local datetime'],
                  ['model',         'Active model id'],
                ].map(([k, v], i) => (
                  <div key={k} style={{ padding: '10px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
                    <span style={{ fontSize: 12, fontFamily: G.mono, color: t.fg }}>{`{{${k}}}`}</span>
                    <span style={{ flex: 1, fontSize: 11, color: t.fg3 }}>{v}</span>
                  </div>
                ))}
              </S2_Card>
            </S2_Section>
            <S2_Section dark={dark} title="Live preview" sub="With variables substituted for your account.">
              <S2_Card dark={dark} style={{ padding: 12, fontFamily: G.mono, fontSize: 10.5, lineHeight: 1.6, color: t.fg2, maxHeight: 200, overflow: 'auto' }}>
                <div>You are Ghast — a careful, concise desktop assistant.</div>
                <div style={{ marginTop: 8, color: t.fg3 }}>## Voice</div>
                <div>- Plain language. No filler.</div>
                <div>- Names matter. Refer to <span style={{ background: dark ? '#2c2c2e' : '#f0f0f0', color: t.fg, padding: '0 2px' }}>Sam</span> by their first name.</div>
                <div style={{ marginTop: 8, color: t.fg3 }}>## Capabilities</div>
                <div>You have access to the following tools: <span style={{ background: dark ? '#2c2c2e' : '#f0f0f0', color: t.fg, padding: '0 2px' }}>read_file, grep, …</span></div>
              </S2_Card>
            </S2_Section>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <S2_PageHeader dark={dark} title="Prompts" sub="Reusable prompts powering agents, slash commands, and the system surface." right={
        <Button variant="primary" size="sm"><Icon name="plus" size={12} /> New prompt</Button>
      } />
      <S2_Card dark={dark}>
        {prompts.map((p, i) => (
          <div key={p.id} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="docs" size={14} color={t.fg2} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</span>
                {p.builtin && <Tag>built-in</Tag>}
              </div>
              <div style={{ fontSize: 11, color: t.fg3, marginTop: 2 }}>{p.desc}</div>
            </div>
            <span style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono }}>{p.vars > 0 ? `${p.vars} vars` : ''}</span>
            <span style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono }}>{p.last}</span>
            <Icon name="chevronRight" size={12} color={t.fg3} />
          </div>
        ))}
      </S2_Card>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// E · SKILLS
// ═════════════════════════════════════════════════════════════
function SkillsSettings({ dark, state = 'list' }) {
  const t = dark ? G.d : G.l;
  const skills = [
    { id: 'pdf',    name: 'read-pdf',         desc: 'Extracts text & images from PDFs.',   src: 'built-in',           on: true,  used: 'used 2 minutes ago' },
    { id: 'pptx',   name: 'export-pptx',      desc: 'Render slides as editable .pptx.',     src: 'built-in',           on: true,  used: 'used 4 hours ago' },
    { id: 'csv',    name: 'analyze-csv',      desc: 'Summarize and chart tabular data.',    src: 'built-in',           on: true,  used: 'used yesterday' },
    { id: 'pr',     name: 'pr-review-style',  desc: 'Apply our team style guide to diffs.', src: 'github.com/me/pr',    on: true,  used: 'used 3 days ago' },
    { id: 'arxiv',  name: 'arxiv-summary',    desc: 'Walk arXiv papers and explain.',        src: 'github.com/me/skl',   on: false, used: 'never used' },
  ];

  if (state === 'browse') {
    const browse = [
      { name: 'video-edit',      desc: 'Trim and overlay text on videos.',     src: 'github.com/ghast-skills/video', stars: '2.1k' },
      { name: 'send-fax',        desc: 'Yes, really. Faxes a PDF.',             src: 'github.com/skill-makers/fax',   stars: '184' },
      { name: 'spotify-mood',    desc: 'Build a playlist from a vibe.',         src: 'github.com/musictoolkit/mood',  stars: '912' },
      { name: 'invoice-extract', desc: 'Pull totals from invoice images.',     src: 'github.com/finbox/invoice',     stars: '2.8k' },
      { name: 'duck-debug',      desc: 'Rubber-duck through code with you.',    src: 'github.com/lab/ducks',          stars: '1.4k' },
    ];
    return (
      <>
        <S2_PageHeader dark={dark} title="Browse skills" sub="Skills are git-installable workflow recipes." right={
          <Button variant="ghost" size="sm">Back to installed</Button>
        } />
        <Input placeholder="Search 412 skills" icon="search" dark={dark} style={{ marginBottom: 14 }} />
        <S2_Card dark={dark}>
          {browse.map((s, i) => (
            <div key={s.name} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: t.surface2, border: `1px solid ${t.border}`, flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <span style={{ fontSize: 12.5, fontWeight: 500, fontFamily: G.mono }}>{s.name}</span>
                <div style={{ fontSize: 11, color: t.fg3, marginTop: 1 }}>{s.desc}</div>
                <div style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono, marginTop: 4 }}>{s.src} · ★ {s.stars}</div>
              </div>
              <Button variant="secondary" size="sm">Install</Button>
            </div>
          ))}
        </S2_Card>
      </>
    );
  }

  return (
    <>
      <S2_PageHeader dark={dark} title="Skills" sub="Reusable workflow recipes Ghast can call by name." right={
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="ghost" size="sm">Browse</Button>
          <Button variant="primary" size="sm"><Icon name="plus" size={12} /> Create skill</Button>
        </div>
      } />
      <S2_Card dark={dark}>
        {skills.map((s, i) => (
          <div key={s.id} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="sparkle" size={13} color={t.fg2} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 12.5, fontWeight: 500, fontFamily: G.mono }}>{s.name}</span>
                <Tag>{s.src}</Tag>
              </div>
              <div style={{ fontSize: 11, color: t.fg3, marginTop: 2 }}>{s.desc}</div>
              <div style={{ fontSize: 10.5, color: t.fg3, fontFamily: G.mono, marginTop: 4 }}>{s.used}</div>
            </div>
            <S2_Toggle on={s.on} dark={dark} />
          </div>
        ))}
      </S2_Card>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// F · USAGE
// ═════════════════════════════════════════════════════════════
function UsageSettings({ dark, range = 'month' }) {
  const t = dark ? G.d : G.l;
  return (
    <>
      <S2_PageHeader dark={dark} title="Usage" sub="Token and tool consumption, this billing period." right={
        <div style={{ display: 'flex', gap: 4, padding: 3, background: t.surface2, borderRadius: 7 }}>
          {['Day', 'Week', 'Month', 'All'].map((r, i) => (
            <div key={r} style={{ padding: '4px 10px', borderRadius: 5, fontSize: 11.5, background: i === 2 ? t.bg : 'transparent', border: i === 2 ? `1px solid ${t.border}` : 'none', cursor: 'pointer' }}>{r}</div>
          ))}
        </div>
      } />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 18 }}>
        {[
          ['Tokens used', '8.42M',  '+12% vs prior',  t.fg],
          ['Tool calls',  '1,284',  '−4%',             t.fg],
          ['Spend',       '$48.31', 'wallet',         t.fg],
          ['Avg latency', '1.4s',   'p50',            t.fg],
        ].map(([k, v, sub, c]) => (
          <S2_Card key={k} dark={dark} style={{ padding: 14 }}>
            <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, textTransform: 'uppercase' }}>{k}</div>
            <div style={{ fontSize: 22, fontWeight: 600, fontFamily: G.mono, marginTop: 6 }}>{v}</div>
            <div style={{ fontSize: 10.5, color: t.fg3, marginTop: 2 }}>{sub}</div>
          </S2_Card>
        ))}
      </div>

      <S2_Section dark={dark} title="Tokens by day">
        <S2_Card dark={dark} style={{ padding: 14 }}>
          <div style={{ height: 140, position: 'relative' }}>
            <svg width="100%" height="140" viewBox="0 0 800 140" preserveAspectRatio="none">
              {Array.from({ length: 30 }).map((_, i) => {
                const h = 14 + Math.abs(Math.sin(i * 0.6) + Math.cos(i * 0.3) + Math.sin(i * 1.2)) * 36;
                const today = i === 28;
                return (
                  <g key={i}>
                    <rect x={i * 26 + 8} y={140 - h - 16} width={20} height={h} rx={2} fill={today ? t.fg : t.fg2} opacity={today ? 1 : 0.5} />
                  </g>
                );
              })}
              <line x1={0} y1={124} x2={800} y2={124} stroke={t.border2} strokeDasharray="2 3" />
            </svg>
            <div style={{ position: 'absolute', top: 0, right: 0, fontSize: 10.5, color: t.fg3, fontFamily: G.mono }}>peak: 482k · Mar 14</div>
          </div>
        </S2_Card>
      </S2_Section>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 18 }}>
        <S2_Section dark={dark} title="Top models">
          <S2_Card dark={dark}>
            {[
              ['Ghast 2 Pro',      6.1, '$32.10', 72],
              ['Ghast 2 Fast',     1.8, '$8.40',  21],
              ['Llama 3.3 (local)', 0.4, '$0.00',  4],
              ['Stable Diffusion', 0.12, '$7.81',  3],
            ].map(([name, mtok, cost, pct], i) => (
              <div key={name} style={{ padding: '10px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ flex: 1, fontSize: 12, fontFamily: G.mono }}>{name}</span>
                  <span style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono }}>{mtok}M tok</span>
                  <span style={{ fontSize: 11, fontFamily: G.mono, fontWeight: 500, width: 56, textAlign: 'right' }}>{cost}</span>
                </div>
                <div style={{ height: 3, background: t.surface2, borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${pct}%`, background: t.fg }} />
                </div>
              </div>
            ))}
          </S2_Card>
        </S2_Section>
        <S2_Section dark={dark} title="Top tools">
          <S2_Card dark={dark}>
            {[
              ['read_file',    312, 24],
              ['shell',        228, 17],
              ['web_fetch',    184, 14],
              ['grep',         142, 11],
              ['git_status',    98,  7],
            ].map(([name, n, pct], i) => (
              <div key={name} style={{ padding: '10px 14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ flex: 1, fontSize: 12, fontFamily: G.mono }}>{name}</span>
                  <span style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono }}>{n} calls</span>
                </div>
                <div style={{ height: 3, background: t.surface2, borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${pct * 4}%`, background: t.fg2 }} />
                </div>
              </div>
            ))}
          </S2_Card>
        </S2_Section>
      </div>

      <S2_Section dark={dark} title="Quotas & alerts">
        <S2_Card dark={dark}>
          <S2_Row dark={dark} label="Soft cap" value="Show a warning when monthly spend passes this." right={
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 12, fontFamily: G.mono, color: t.fg3 }}>$</span>
              <input defaultValue="40" style={{ width: 60, height: 26, padding: '0 8px', fontSize: 12, fontFamily: G.mono, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg, textAlign: 'right' }} />
            </div>
          } />
          <S2_Row dark={dark} label="Hard cap" value="Block all paid model calls past this." right={
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 12, fontFamily: G.mono, color: t.fg3 }}>$</span>
              <input defaultValue="100" style={{ width: 60, height: 26, padding: '0 8px', fontSize: 12, fontFamily: G.mono, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg, textAlign: 'right' }} />
            </div>
          } />
          <S2_Row dark={dark} label="Notify on quota event" right={<S2_Toggle on={true} dark={dark} />} last />
        </S2_Card>
      </S2_Section>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// G · VOICE
// ═════════════════════════════════════════════════════════════
function VoiceSettings({ dark, state = 'idle' }) {
  const t = dark ? G.d : G.l;
  const recording = state === 'recording';
  const playing = state === 'playing';

  return (
    <>
      <S2_PageHeader dark={dark} title="Voice" sub="Wake word, dictation, and TTS voice for replies." />

      <S2_Section dark={dark} title="Wake word">
        <S2_Card dark={dark}>
          <S2_Row dark={dark} label="Hey Ghast" value={recording ? 'Listening for your wake phrase…' : 'Always listening when Ghast is in the foreground.'} right={<S2_Toggle on={true} dark={dark} />} />
          <S2_Row dark={dark} label="Sensitivity" right={
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 120, height: 4, background: t.surface2, borderRadius: 2, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '60%', background: t.fg, borderRadius: 2 }} />
                <div style={{ position: 'absolute', left: 'calc(60% - 6px)', top: -4, width: 12, height: 12, background: t.bg, border: `1.5px solid ${t.fg}`, borderRadius: 6 }} />
              </div>
              <span style={{ fontSize: 11, fontFamily: G.mono, color: t.fg2 }}>0.6</span>
            </div>
          } last />
        </S2_Card>
      </S2_Section>

      <S2_Section dark={dark} title="Dictation">
        <S2_Card dark={dark}>
          <S2_Row dark={dark} label="Input device" right={
            <div style={{ height: 26, padding: '0 8px', background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="mic" size={11} color={t.fg2} />
              <span style={{ fontSize: 12 }}>MacBook Pro Microphone</span>
              <Icon name="chevronDown" size={10} color={t.fg3} />
            </div>
          } />
          <S2_Row dark={dark} label="Input level" right={
            <div style={{ display: 'flex', gap: 2, alignItems: 'flex-end', height: 22 }}>
              {Array.from({ length: 12 }).map((_, i) => {
                const h = recording ? (4 + Math.abs(Math.sin(i * 0.7 + Date.now() * 0.001)) * 16) : (i < 4 ? 6 : 4);
                return <div key={i} style={{ width: 4, height: h, background: i < (recording ? 9 : 4) ? t.fg : t.surface2, borderRadius: 1 }} />;
              })}
            </div>
          } />
          <S2_Row dark={dark} label="Push-to-talk" value="Hold Right ⌘ to dictate." right={<div style={{ display: 'flex', gap: 3 }}><Kbd>⌘</Kbd></div>} />
          <S2_Row dark={dark} label="Auto-punctuate" right={<S2_Toggle on={true} dark={dark} />} />
          <S2_Row dark={dark} label="Language" right={<span style={{ fontSize: 12 }}>English (US)</span>} last />
        </S2_Card>
      </S2_Section>

      <S2_Section dark={dark} title="TTS · Reply voice">
        <S2_Card dark={dark}>
          <div style={{ padding: '12px 14px', borderBottom: `0.5px solid ${t.border2}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
              <button style={{ width: 36, height: 36, borderRadius: 18, background: playing ? t.fg : t.surface2, color: playing ? t.bg : t.fg2, border: `1px solid ${playing ? t.fg : t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={playing ? 'pause' : 'play'} size={14} />
              </button>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 500 }}>Sample · "Hi, I'm Ghast. I can help you with…"</div>
                <div style={{ fontSize: 11, color: t.fg3, marginTop: 1 }}>{playing ? 'Playing… 00:02 / 00:06' : 'Tap to preview the current voice.'}</div>
              </div>
            </div>
            {playing && (
              <div style={{ height: 3, background: t.surface2, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: '34%', background: t.fg }} />
              </div>
            )}
          </div>
          <S2_Row dark={dark} label="Voice" right={<span style={{ fontSize: 12 }}>Neutral · Aria</span>} />
          <div style={{ padding: 12, borderTop: `0.5px solid ${t.border2}` }}>
            <div style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>VOICE GALLERY</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {[
                ['Aria',     'Neutral · soft',     true],
                ['River',    'Neutral · clear',    false],
                ['Sage',     'Warm · gentle',      false],
                ['Cobalt',   'Sharp · precise',    false],
                ['Ember',    'Warm · rounded',     false],
                ['Frost',    'Cool · neutral',     false],
                ['Brook',    'Light · friendly',   false],
                ['Stone',    'Deep · steady',      false],
              ].map(([name, desc, sel]) => (
                <div key={name} style={{ padding: 10, borderRadius: 8, background: sel ? t.surface2 : 'transparent', border: `1px solid ${sel ? t.fg : t.border}`, cursor: 'pointer' }}>
                  <div style={{ fontSize: 12, fontWeight: sel ? 600 : 500 }}>{name}</div>
                  <div style={{ fontSize: 10, color: t.fg3, marginTop: 1 }}>{desc}</div>
                </div>
              ))}
            </div>
          </div>
          <S2_Row dark={dark} label="Speed" right={
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 100, height: 4, background: t.surface2, borderRadius: 2, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '50%', background: t.fg, borderRadius: 2 }} />
                <div style={{ position: 'absolute', left: 'calc(50% - 6px)', top: -4, width: 12, height: 12, background: t.bg, border: `1.5px solid ${t.fg}`, borderRadius: 6 }} />
              </div>
              <span style={{ fontSize: 11, fontFamily: G.mono }}>1.0×</span>
            </div>
          } />
          <S2_Row dark={dark} label="Auto-read replies" value="Speak every reply by default." right={<S2_Toggle on={false} dark={dark} />} last />
        </S2_Card>
      </S2_Section>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// H · WEB SEARCH
// ═════════════════════════════════════════════════════════════
function WebSearchSettings({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <>
      <S2_PageHeader dark={dark} title="Web Search" sub="Backend, regional bias, and content filters for Ghast's web search tool." />
      <S2_Section dark={dark} title="Backend">
        <S2_Card dark={dark}>
          <div style={{ padding: 4 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: 4, background: t.surface2, borderRadius: 8 }}>
              {[
                { id: 'kagi',  name: 'Kagi',  desc: 'Premium, ad-free.',  badge: 'recommended', sel: true },
                { id: 'brave', name: 'Brave', desc: 'Independent index.', badge: '', sel: false },
                { id: 'bing',  name: 'Bing',  desc: 'Microsoft index.',   badge: '', sel: false },
              ].map((b) => (
                <div key={b.id} style={{ padding: '10px 12px', borderRadius: 6, background: b.sel ? t.bg : 'transparent', border: b.sel ? `1px solid ${t.border}` : 'none', cursor: 'pointer' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                    <span style={{ fontSize: 12.5, fontWeight: 600 }}>{b.name}</span>
                    {b.badge && <Tag tone="accent">{b.badge}</Tag>}
                  </div>
                  <div style={{ fontSize: 10.5, color: t.fg3 }}>{b.desc}</div>
                </div>
              ))}
            </div>
          </div>
          <S2_Row dark={dark} label="Kagi API key" right={
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <input defaultValue="••••••••••••••GfZ4" type="password" style={{ width: 200, height: 26, padding: '0 8px', fontSize: 11.5, fontFamily: G.mono, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg }} />
              <Icon name="check" size={12} color="#28c840" />
            </div>
          } />
          <S2_Row dark={dark} label="Results per query" right={<span style={{ fontSize: 12, fontFamily: G.mono }}>10</span>} last />
        </S2_Card>
      </S2_Section>
      <S2_Section dark={dark} title="Regional bias">
        <S2_Card dark={dark}>
          <S2_Row dark={dark} label="Region" right={<span style={{ fontSize: 12 }}>United States · en-US</span>} />
          <S2_Row dark={dark} label="Recency window" value="Tilt results toward recent pages." right={
            <div style={{ display: 'flex', gap: 4, padding: 3, background: t.surface2, borderRadius: 7 }}>
              {['Day', 'Week', 'Month', 'Year', 'All'].map((r, i) => (
                <div key={r} style={{ padding: '4px 10px', borderRadius: 5, fontSize: 11.5, fontFamily: G.mono, background: i === 4 ? t.bg : 'transparent', border: i === 4 ? `1px solid ${t.border}` : 'none', cursor: 'pointer' }}>{r}</div>
              ))}
            </div>
          } last />
        </S2_Card>
      </S2_Section>
      <S2_Section dark={dark} title="Filters">
        <S2_Card dark={dark}>
          <S2_Row dark={dark} label="Allow adult content" value="When off, results are SafeSearch-filtered." right={<S2_Toggle on={false} dark={dark} />} />
          <S2_Row dark={dark} label="Auto-fetch top 3 results" value="Reads pages inline so the model can cite them." right={<S2_Toggle on={true} dark={dark} />} />
          <S2_Row dark={dark} label="Block hosts" value="Domains never returned." right={<Button variant="secondary" size="sm">14 hosts blocked</Button>} last />
        </S2_Card>
      </S2_Section>
      <S2_Section dark={dark} title="Recent queries">
        <S2_Card dark={dark} style={{ padding: 12, fontFamily: G.mono, fontSize: 11.5, lineHeight: 1.7 }}>
          {[
            ['12:14', 'kagi', 'electron auto-updater best practice'],
            ['11:48', 'kagi', '"liquid glass" sf symbols recipe'],
            ['10:12', 'kagi', 'oklch perceptual uniform palette'],
            ['09:54', 'kagi', 'pbkdf2 iterations 2024'],
            ['09:31', 'kagi', 'macos accessibility prompt re-ask'],
          ].map(([ts, b, q], i) => (
            <div key={i}><span style={{ color: t.fg3 }}>{ts}</span>  <span style={{ color: t.fg3 }}>[{b}]</span>  {q}</div>
          ))}
        </S2_Card>
      </S2_Section>
    </>
  );
}


// ═════════════════════════════════════════════════════════════
// I · WORKSPACE
// ═════════════════════════════════════════════════════════════
function WorkspaceSettings({ dark, state = 'list' }) {
  const t = dark ? G.d : G.l;
  const ws = [
    { id: 'pers',  name: 'Personal',     path: '~/Code/personal',         color: '#6366f1', count: 14, active: true,  scope: 'all tools' },
    { id: 'work',  name: 'Work',         path: '~/Code/work',             color: '#10b981', count: 38, active: false, scope: 'no shell' },
    { id: 'open',  name: 'Open Source',  path: '~/Code/oss',              color: '#f59e0b', count: 9,  active: false, scope: 'all tools' },
    { id: 'side',  name: 'Side Project', path: '~/Code/side/typist',      color: '#ec4899', count: 4,  active: false, scope: 'all tools · network off' },
  ];

  if (state === 'editing') {
    return (
      <>
        <S2_PageHeader dark={dark} title="Edit workspace · Work" right={
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="ghost" size="sm">Cancel</Button>
            <Button variant="primary" size="sm">Save</Button>
          </div>
        } />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          <S2_Card dark={dark} style={{ padding: 16 }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 14 }}>
              <div style={{ width: 44, height: 44, borderRadius: 11, background: '#10b981', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 700, color: '#fff', fontFamily: G.mono }}>W</div>
              <div style={{ flex: 1 }}>
                <input defaultValue="Work" style={{ width: '100%', height: 30, padding: '0 10px', fontSize: 14, fontWeight: 600, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, color: t.fg }} />
              </div>
            </div>
            <div style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, marginBottom: 6 }}>COLOR</div>
            <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
              {['#6366f1', '#10b981', '#f59e0b', '#ec4899', '#06b6d4', '#a855f7', '#ef4444', '#78716c'].map((c) => (
                <div key={c} style={{ width: 22, height: 22, borderRadius: 11, background: c, border: c === '#10b981' ? `2px solid ${t.fg}` : `1px solid ${t.border}`, cursor: 'pointer' }} />
              ))}
            </div>
            <div style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, marginBottom: 6 }}>FOLDER</div>
            <div style={{ height: 30, padding: '0 10px', background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="folder" size={12} color={t.fg2} />
              <span style={{ flex: 1, fontSize: 12, fontFamily: G.mono }}>~/Code/work</span>
              <Button variant="ghost" size="sm">Choose…</Button>
            </div>
          </S2_Card>
          <S2_Card dark={dark}>
            <S2_Row dark={dark} label="Tool scope" right={
              <div style={{ display: 'flex', gap: 4, padding: 3, background: t.surface2, borderRadius: 7 }}>
                {['All', 'No shell', 'Read-only'].map((r, i) => (
                  <div key={r} style={{ padding: '4px 10px', borderRadius: 5, fontSize: 11.5, background: i === 1 ? t.bg : 'transparent', border: i === 1 ? `1px solid ${t.border}` : 'none', cursor: 'pointer' }}>{r}</div>
                ))}
              </div>
            } />
            <S2_Row dark={dark} label="Memory scope" value="Memory written here is tagged 'work'." right={<S2_Toggle on={true} dark={dark} />} />
            <S2_Row dark={dark} label="Network access" right={<S2_Toggle on={true} dark={dark} />} />
            <S2_Row dark={dark} label="Inherit hooks" right={<S2_Toggle on={true} dark={dark} />} />
            <S2_Row dark={dark} label="Default model" right={<span style={{ fontSize: 12 }}>Ghast 2 Pro</span>} last />
          </S2_Card>
        </div>
      </>
    );
  }

  return (
    <>
      <S2_PageHeader dark={dark} title="Workspaces" sub="Switch between project contexts. Each has its own folder, tools, and memory." right={
        <Button variant="primary" size="sm"><Icon name="plus" size={12} /> New workspace</Button>
      } />
      <S2_Card dark={dark} style={{ padding: 12, marginBottom: 14, background: t.surface2, borderColor: t.border }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <Icon name="info" size={14} color={t.fg2} style={{ marginTop: 2 }} />
          <div style={{ flex: 1, fontSize: 11.5, color: t.fg2, lineHeight: 1.55 }}>
            Switch the active workspace from the menu bar, or with <Kbd>⌘</Kbd>·<Kbd>⇧</Kbd>·<Kbd>W</Kbd>. Threads, memory, and tool scope all swap with it.
          </div>
        </div>
      </S2_Card>
      <S2_Card dark={dark}>
        {ws.map((w, i) => (
          <div key={w.id} style={{ padding: '14px', borderTop: i === 0 ? 'none' : `0.5px solid ${t.border2}`, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: w.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700, color: '#fff', fontFamily: G.mono, flexShrink: 0 }}>{w.name[0]}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{w.name}</span>
                {w.active && <Tag tone="accent">active</Tag>}
              </div>
              <div style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono, marginTop: 2 }}>{w.path}</div>
              <div style={{ fontSize: 10.5, color: t.fg3, marginTop: 4 }}>{w.count} threads · {w.scope}</div>
            </div>
            <Button variant="ghost" size="sm">Edit</Button>
          </div>
        ))}
      </S2_Card>
    </>
  );
}


Object.assign(window, {
  HooksSettings, NetworkSettings, PluginsSettings, PromptsSettings,
  SkillsSettings, UsageSettings, VoiceSettings, WebSearchSettings, WorkspaceSettings,
});