// more-screens.jsx — Workflow canvas, stores, settings.
// (DevWorkspace was removed when §05 collapsed into the §05b "Develop"
// surface. The full IDE lives in dev-extra-1.jsx + dev-extra-2.jsx now.)

function _DevWorkspace_REMOVED({ dark }) {
  const t = dark ? G.d : G.l;
  const sidebar = (
    <AppSidebar title="Files" dark={dark} search="Find in repo"
      sections={[
        { title: 'apps/web', items: [
          { label: 'middleware/auth.ts', icon: 'file', active: true, dot: 'on' },
          { label: 'middleware/session.ts', icon: 'file', dot: 'on' },
          { label: 'middleware/errors.ts', icon: 'file' },
          { label: 'pages/api/login.ts', icon: 'file' },
          { label: 'lib/jwt.ts', icon: 'file' },
        ]},
        { title: 'Open chats', items: [
          { label: 'Refactor auth middleware', icon: 'chat' },
        ]},
      ]}
    />
  );
  return (
    <AppShell dark={dark} active="code" sidebar={sidebar}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Develop', 'auth.ts']}
        right={<><Tag><Icon name="git" size={11}/> main</Tag><Button variant="secondary" size="sm">Run</Button></>} />}
    >
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
          <div style={{ flex: 1, fontFamily: G.mono, fontSize: 12, lineHeight: 1.6, overflow: 'hidden', position: 'relative' }}>
            <div className="gh-scroll" style={{ height: '100%', overflow: 'auto', padding: '14px 0' }}>
              {[
                'import type { NextFunction, Request, Response } from \'express\';',
                'import { verifyJwt } from \'../lib/jwt\';',
                '',
                'export async function auth(req: Request, res: Response, next: NextFunction) {',
                '  // ⚠ unverified header bypass',
                '  if (req.headers[\'x-internal-trust\'] === \'true\') {',
                '    return next();',
                '  }',
                '',
                '  const token = req.cookies.session;',
                '  if (!token) return res.status(401).json({ error: \'no session\' });',
                '',
                '  try {',
                '    req.user = await verifyJwt(token);',
                '    next();',
                '  } catch (e) {',
                '    res.status(401).json({ error: \'bad token\' });',
                '  }',
                '}',
              ].map((line, i) => (
                <div key={i} style={{ display: 'flex', padding: '0 16px', background: i === 5 ? (dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)') : 'transparent' }}>
                  <span style={{ width: 40, color: t.fg4, textAlign: 'right', paddingRight: 14, userSelect: 'none' }}>{i + 1}</span>
                  <span style={{ flex: 1, whiteSpace: 'pre', color: t.fg, overflow: 'hidden', textOverflow: 'ellipsis' }}>{line}</span>
                  {i === 5 && <Tag variant="solid" style={{ height: 18, fontSize: 9 }}>HIGH</Tag>}
                </div>
              ))}
            </div>
          </div>
          <div style={{ width: 360, flexShrink: 0, borderLeft: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
            <div style={{ padding: '8px 12px', fontSize: 11, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, borderBottom: `0.5px solid ${t.border}`, flexShrink: 0 }}>GHAST · INLINE</div>
            <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 14, fontSize: 13, lineHeight: 1.55, minHeight: 0 }}>
              <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
                <GhastLogo size={22} style={{ flexShrink: 0 }} />
                <div>Line 5–7 trusts a header an attacker can set. Replace with a signed proxy assertion or remove.</div>
              </div>
              <Card style={{ padding: 10, fontFamily: G.mono, fontSize: 11, lineHeight: 1.5, background: t.surface2 }}>
                <div style={{ color: '#d44' }}>- if (req.headers['x-internal-trust'] === 'true')&#123;</div>
                <div style={{ color: '#d44' }}>-   return next();</div>
                <div style={{ color: '#d44' }}>- &#125;</div>
                <div style={{ color: '#3a8' }}>+ // remove unsafe bypass</div>
              </Card>
              <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
                <Button variant="primary" size="sm">Apply</Button>
                <Button variant="secondary" size="sm">Discuss</Button>
              </div>
            </div>
            <Composer
              dark={dark}
              placeholder="Ask about this file..."
              compact
              contextFile="auth.ts"
              permissionMode="auto"
              contextUsed={47}
            />
          </div>
        </div>
        <div style={{ height: 160, borderTop: `0.5px solid ${t.border}`, fontFamily: G.mono, fontSize: 12, padding: 14, color: t.fg2, background: dark ? '#000' : '#fafaf9' }}>
          <div style={{ marginBottom: 6, fontSize: 10, letterSpacing: 0.6, color: t.fg3 }}>TERMINAL · zsh — apps/web</div>
          <div>$ npm run lint</div>
          <div style={{ color: t.fg3 }}>  ✓ 412 files, 0 errors, 3 warnings</div>
          <div>$ ghast scan auth</div>
          <div style={{ color: t.fg }}>  → 2 high-severity issues, see thread #4112</div>
          <div>$ <span style={{ animation: 'gh-blink 1s infinite' }}>▋</span></div>
        </div>
      </div>
    </AppShell>
  );
}

// ─── Workflow canvas ───
function WorkflowCanvas({ dark }) {
  const t = dark ? G.d : G.l;
  const sidebar = (
    <AppSidebar title="Workflows" dark={dark} search onNew
      sections={[{ title: 'Active', items: [
        { label: 'Daily Slack digest', icon: 'workflow', active: true, dot: 'on' },
        { label: 'PR triage', icon: 'workflow', dot: 'on' },
        { label: 'Customer email replies', icon: 'workflow' },
      ]}, { title: 'Drafts', items: [
        { label: 'Untitled — May 2', icon: 'workflow' },
      ]}]}
    />
  );
  const nodes = [
    { x: 60, y: 120, label: 'Trigger · 9:00 daily', icon: 'history', kind: 'trigger' },
    { x: 300, y: 80, label: 'Read Slack · #eng', icon: 'plug' },
    { x: 300, y: 180, label: 'Read GitHub · PRs', icon: 'plug' },
    { x: 540, y: 130, label: 'Summarize w/ Ghast', icon: 'sparkle', kind: 'agent' },
    { x: 700, y: 130, label: 'Write to Notion', icon: 'plug' },
  ];
  return (
    <AppShell dark={dark} active="workflow" sidebar={sidebar}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Workflows', 'Daily Slack digest']}
        right={<><Tag><Icon name="dot" size={11}/> Live</Tag><Button variant="secondary" size="sm" icon={<Icon name="play" size={11}/>}>Run</Button><Button variant="primary" size="sm">Save</Button></>} />}
    >
      <div style={{ position: 'relative', height: '100%', overflow: 'hidden',
        backgroundImage: `radial-gradient(circle, ${t.fg4} 1px, transparent 1px)`,
        backgroundSize: '20px 20px',
      }}>
        <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          {[
            [nodes[0], nodes[1]], [nodes[0], nodes[2]],
            [nodes[1], nodes[3]], [nodes[2], nodes[3]],
            [nodes[3], nodes[4]],
          ].map(([a, b], i) => {
            const x1 = a.x + 200, y1 = a.y + 30;
            const x2 = b.x, y2 = b.y + 30;
            const mx = (x1 + x2) / 2;
            return <path key={i} d={`M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`} stroke={t.fg3} strokeWidth="1.5" fill="none" />;
          })}
        </svg>
        {nodes.map((n, i) => (
          <div key={i} style={{
            position: 'absolute', left: n.x, top: n.y, width: 200, padding: 12,
            background: t.surface, border: `1px solid ${i === 3 ? t.fg : t.border}`, borderWidth: i === 3 ? 1.5 : 1,
            borderRadius: 12, boxShadow: t.shadow,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <div style={{ width: 22, height: 22, borderRadius: 6, background: n.kind === 'trigger' ? t.fg : t.surface2, color: n.kind === 'trigger' ? t.bg : t.fg2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={n.icon} size={12} color={n.kind === 'trigger' ? t.bg : t.fg2} />
              </div>
              <div style={{ fontSize: 10, fontFamily: G.mono, color: t.fg3, letterSpacing: 0.5 }}>{n.kind?.toUpperCase() || 'STEP'}</div>
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 500 }}>{n.label}</div>
            <div style={{ position: 'absolute', left: -5, top: 25, width: 10, height: 10, borderRadius: 5, background: t.surface, border: `1.5px solid ${t.fg3}` }} />
            <div style={{ position: 'absolute', right: -5, top: 25, width: 10, height: 10, borderRadius: 5, background: t.fg, border: 'none' }} />
          </div>
        ))}
        <div style={{ position: 'absolute', top: 16, right: 16 }}>
          <Glass radius={14} dark={dark} strong>
            <div style={{ padding: 10, width: 220 }}>
              <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, marginBottom: 8 }}>NODE PALETTE</div>
              {[
                ['trigger', 'Schedule trigger', 'history'],
                ['source', 'HTTP source', 'plug'],
                ['agent', 'AI step', 'sparkle'],
                ['code', 'Code block', 'code'],
                ['fork', 'Branch / if', 'workflow'],
              ].map((p, i) => (
                <div key={i} style={{ padding: '6px 8px', fontSize: 12, display: 'flex', gap: 8, alignItems: 'center', borderRadius: 6, cursor: 'grab' }}>
                  <Icon name={p[2]} size={13} color={t.fg2} />
                  {p[1]}
                </div>
              ))}
            </div>
          </Glass>
        </div>
        <div style={{ position: 'absolute', bottom: 16, right: 16 }}>
          <Glass radius={14} dark={dark} strong>
            <div style={{ padding: 14, width: 280 }}>
              <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, marginBottom: 8 }}>SUMMARIZE W/ GHAST</div>
              <div style={{ fontSize: 11, color: t.fg2, marginBottom: 8 }}>Model</div>
              <div style={{ padding: '6px 10px', background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, fontSize: 12, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="sparkle" size={12} /> Ghast 2 Pro <span style={{ flex: 1 }} /><Icon name="chevronDown" size={11} />
              </div>
              <div style={{ fontSize: 11, color: t.fg2, marginBottom: 6 }}>Prompt</div>
              <div style={{ padding: 8, background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 6, fontSize: 11, lineHeight: 1.5, fontFamily: G.mono, color: t.fg2 }}>
                Summarize {`{{slack.messages}}`} and {`{{github.prs}}`} as 5 bullets, ≤ 60 words each.
              </div>
            </div>
          </Glass>
        </div>
      </div>
    </AppShell>
  );
}

// ─── Stores (Skills, MCP, Workflows) ───
function StoreScreen({ dark, kind = 'skills' }) {
  const t = dark ? G.d : G.l;
  const tabs = [
    { id: 'skills', label: 'Skills', icon: 'skills' },
    { id: 'mcp', label: 'MCPs', icon: 'plug' },
    { id: 'workflows-store', label: 'Workflows', icon: 'box' },
  ];
  const items = {
    skills: [
      { name: 'Auth Hardening', author: 'ghast', desc: 'Audit Express/Next middleware for 12 known bypasses.', stars: '4.2k', icon: 'lock' },
      { name: 'Code Reviewer', author: 'ghast', desc: 'PR-style review with severity, fix suggestions, and test ideas.', stars: '8.1k', icon: 'eye' },
      { name: 'Daily Standup', author: 'team', desc: 'Compose stand-up post from your activity across tools.', stars: '2.7k', icon: 'history' },
      { name: 'Translator Pro', author: 'ghast', desc: '32 languages, glossary-aware, with TM cache.', stars: '1.4k', icon: 'book' },
      { name: 'Doc Writer', author: 'community', desc: 'Generate API docs from a TS file with examples.', stars: '900', icon: 'file' },
      { name: 'Spreadsheet Surgeon', author: 'community', desc: 'Cleans CSVs: dedup, normalize dates, infer types.', stars: '1.1k', icon: 'grid' },
    ],
    mcp: [
      { name: 'GitHub', author: 'github', desc: 'Read, write, branch, PR.', stars: '12k', icon: 'git' },
      { name: 'Notion', author: 'notion', desc: 'Search & update pages.', stars: '7k', icon: 'book' },
      { name: 'Linear', author: 'linear', desc: 'Triage issues, leave comments.', stars: '4.4k', icon: 'workflow' },
      { name: 'Postgres', author: 'community', desc: 'Run SELECT on a connection URL.', stars: '3.8k', icon: 'box' },
      { name: 'Slack', author: 'slack', desc: 'Read channels you authorize.', stars: '6.1k', icon: 'sound' },
      { name: 'Stripe', author: 'stripe', desc: 'Read customers, refunds, payouts.', stars: '2.3k', icon: 'star' },
    ],
    'workflows-store': [
      { name: 'PR Triage', author: 'ghast', desc: 'Daily summary of open PRs, posted to Slack.', stars: '3.1k', icon: 'workflow' },
      { name: 'Inbox Zero', author: 'community', desc: 'Categorize email and draft replies.', stars: '5.2k', icon: 'mail' },
      { name: 'Standup Bot', author: 'community', desc: 'Daily standup summaries posted at 9am.', stars: '1.8k', icon: 'bell' },
      { name: 'Lead Enricher', author: 'community', desc: 'Enrich contacts with public info.', stars: '700', icon: 'user' },
      { name: 'Bug Reporter', author: 'ghast', desc: 'Turns user feedback into Linear issues.', stars: '2.0k', icon: 'warn' },
      { name: 'Release Notes', author: 'ghast', desc: 'Generate notes from merged PRs.', stars: '1.4k', icon: 'file' },
    ],
  }[kind];
  const sidebar = (
    <AppSidebar title="Discover" dark={dark} search="Search store"
      sections={[
        { title: 'Browse', items: tabs.map((tab) => ({ label: tab.label, icon: tab.icon, active: tab.id === kind })) },
        { title: 'Categories', items: [
          { label: 'Productivity' }, { label: 'Engineering' }, { label: 'Writing' },
          { label: 'Data' }, { label: 'Communication' }, { label: 'Admin' },
        ]},
        { title: 'Library', items: [
          { label: 'Installed', meta: '12' }, { label: 'Updates', meta: '3' }, { label: 'Mine', meta: '2' },
        ]},
      ]}
    />
  );
  const titleMap = { skills: 'Skill Store', mcp: 'MCP Store', 'workflows-store': 'Workflow Store' };
  const subMap = { skills: 'Skills are reusable agent recipes — system prompts + tools + guardrails.',
                   mcp: 'MCP servers expose your tools to Ghast. Self-host or use ours.',
                   'workflows-store': 'Pre-built node graphs ready to install or remix.' };
  return (
    <AppShell dark={dark} active={kind} sidebar={sidebar}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Discover', titleMap[kind]]}
        right={<><Button variant="ghost" size="sm" icon={<Icon name="download" size={13}/>}>Updates</Button><Button variant="secondary" size="sm" icon={<Icon name="plus" size={13}/>}>Publish</Button></>} />}
    >
      <div className="gh-scroll" style={{ height: '100%', overflow: 'auto' }}>
        <div style={{ padding: '32px 32px 24px' }}>
          <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.7 }}>{titleMap[kind]}</div>
          <div style={{ fontSize: 14, color: t.fg2, marginTop: 4, maxWidth: 560 }}>{subMap[kind]}</div>
          <div style={{ marginTop: 24, padding: 20, background: dark ? '#161616' : '#0A0A0A', color: '#FAFAF9', borderRadius: 16, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -20, top: -20, opacity: 0.18 }}>
              <GhastLogo size={200} color="#fff" />
            </div>
            <div style={{ position: 'relative', maxWidth: 480 }}>
              <Tag style={{ background: 'rgba(255,255,255,0.12)', color: '#fff', border: 'none', height: 22 }}>FEATURED</Tag>
              <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: -0.5, margin: '12px 0 6px' }}>{items[0].name}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, marginBottom: 16 }}>{items[0].desc}</div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={{ height: 32, padding: '0 14px', background: '#fff', color: '#0A0A0A', border: 'none', borderRadius: 16, fontSize: 12, fontWeight: 500, fontFamily: G.font, cursor: 'pointer' }}>Install</button>
                <button style={{ height: 32, padding: '0 14px', background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 16, fontSize: 12, fontWeight: 500, fontFamily: G.font, cursor: 'pointer' }}>Preview</button>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 28, fontSize: 14, fontWeight: 600 }}>Popular this week</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 14 }}>
            {items.slice(0, 3).map((it, i) => (
              <Card key={i} style={{ padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name={it.icon} size={18} color={t.fg2} />
                  </div>
                  <Button variant="secondary" size="sm" icon={<Icon name="plus" size={11} />}>Install</Button>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{it.name}</div>
                <div style={{ fontSize: 11, color: t.fg3, marginTop: 1 }}>by {it.author}</div>
                <div style={{ fontSize: 12, color: t.fg2, marginTop: 8, lineHeight: 1.5, height: 36, overflow: 'hidden' }}>{it.desc}</div>
                <div style={{ display: 'flex', gap: 6, marginTop: 10, fontSize: 11, color: t.fg3, alignItems: 'center' }}>
                  <Icon name="star" size={11} /> {it.stars}
                  <span style={{ flex: 1 }} />
                  <Tag>v1.4</Tag>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </AppShell>
  );
}

// ─── Skill detail ───
function SkillDetail({ dark }) {
  const t = dark ? G.d : G.l;
  const sidebar = (
    <AppSidebar title="Discover" dark={dark}
      sections={[{ title: 'Browse', items: [
        { label: 'Skills', icon: 'skills', active: true },
        { label: 'MCPs', icon: 'plug' },
        { label: 'Workflows', icon: 'box' },
      ]}]}
    />
  );
  return (
    <AppShell dark={dark} active="skills" sidebar={sidebar}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Discover', 'Skills', 'Auth Hardening']}
        right={<><Button variant="secondary" size="sm">Preview</Button><Button variant="primary" size="sm" icon={<Icon name="plus" size={11} color={t.bg}/>}>Install</Button></>} />}
    >
      <div className="gh-scroll" style={{ height: '100%', overflow: 'auto', padding: '32px 56px' }}>
        <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', marginBottom: 28 }}>
          <div style={{ width: 80, height: 80, borderRadius: 18, background: t.surface, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="lock" size={36} color={t.fg} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 6 }}>
              <Tag>SKILL</Tag><Tag variant="outline">Engineering</Tag><Tag variant="outline">Verified</Tag>
            </div>
            <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.5 }}>Auth Hardening</div>
            <div style={{ fontSize: 13, color: t.fg2, marginTop: 2 }}>by ghast · v1.4.2 · updated 2 days ago</div>
            <div style={{ display: 'flex', gap: 18, marginTop: 14, fontSize: 12, color: t.fg2 }}>
              <span><Icon name="star" size={12} style={{ marginRight: 4, verticalAlign: -2 }} /> 4.2k stars</span>
              <span><Icon name="download" size={12} style={{ marginRight: 4, verticalAlign: -2 }} /> 18k installs</span>
              <span><Icon name="git" size={12} style={{ marginRight: 4, verticalAlign: -2 }} /> Open source</span>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 24 }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>About</div>
            <p style={{ fontSize: 13.5, color: t.fg2, lineHeight: 1.65, marginTop: 0 }}>
              Auth Hardening runs a 12-point audit on Express, Next.js, and Hono middleware. It looks for unverified proxy headers, cookie-based admin escalation, missing CSRF on state-changing routes, and inconsistent error responses. Findings are ranked by severity and include reproduction steps.
            </p>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 22, marginBottom: 8 }}>What it can do</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {['Read your repo and locate auth files', 'grep for known unsafe patterns', 'Run a sandboxed test against fixture requests', 'Open a PR with proposed fixes'].map((c, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '6px 0', fontSize: 13 }}>
                  <Icon name="check" size={14} color={t.fg2} style={{ marginTop: 2 }} /> {c}
                </li>
              ))}
            </ul>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 22, marginBottom: 8 }}>Required tools</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {['file_read', 'shell', 'github', 'grep'].map((tool) => <Tag key={tool} variant="outline" style={{ fontFamily: G.mono }}>{tool}</Tag>)}
            </div>
          </div>
          <Card style={{ padding: 16 }}>
            <div style={{ fontSize: 12, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, marginBottom: 8 }}>PERMISSIONS</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12 }}>
              {[['Read files', true], ['Write files', false], ['Run commands', true], ['Network access', false]].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name={v ? 'check' : 'close'} size={13} color={t.fg2} />
                  <span style={{ flex: 1 }}>{k}</span>
                  {v && <Tag>asks</Tag>}
                </div>
              ))}
            </div>
            <Divider style={{ margin: '14px 0' }} />
            <div style={{ fontSize: 12, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6, marginBottom: 8 }}>VERSION</div>
            <div style={{ fontSize: 12, color: t.fg2 }}>1.4.2 → published 2 days ago</div>
            <div style={{ fontSize: 12, color: t.fg3, marginTop: 4 }}>Verified publisher · Signed</div>
          </Card>
        </div>
      </div>
    </AppShell>
  );
}

// ─── Settings ───
function SectionHeader({ title, sub, dark, small }) {
  const t = dark ? G.d : G.l;
  return (
    <div style={{ marginBottom: 18, marginTop: small ? 24 : 0 }}>
      <div style={{ fontSize: small ? 13 : 22, fontWeight: 600, letterSpacing: -0.4 }}>{title}</div>
      {sub && <div style={{ fontSize: 13, color: t.fg2, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function SettingRow({ dark, label, value, action, segments, active, keys, toggle }) {
  const t = dark ? G.d : G.l;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderTop: `1px solid ${t.border}` }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 500 }}>{label}</div>
        {value && <div style={{ fontSize: 11, color: t.fg3, marginTop: 1 }}>{value}</div>}
      </div>
      {segments && (
        <div style={{ display: 'flex', background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 8, padding: 2 }}>
          {segments.map((s) => (
            <div key={s} style={{ padding: '4px 10px', fontSize: 11, fontWeight: 500, background: active === s ? t.surface : 'transparent', color: active === s ? t.fg : t.fg3, borderRadius: 6 }}>{s}</div>
          ))}
        </div>
      )}
      {keys && (
        <div style={{ display: 'flex', gap: 4 }}>
          {keys.map((k) => <Kbd key={k}>{k}</Kbd>)}
        </div>
      )}
      {toggle !== undefined && (
        <div style={{ width: 36, height: 22, borderRadius: 11, background: toggle ? t.fg : t.surface2, border: `1px solid ${t.border}`, position: 'relative', padding: 2 }}>
          <div style={{ width: 16, height: 16, borderRadius: 8, background: toggle ? t.bg : t.fg, transition: 'all .2s', transform: toggle ? 'translateX(14px)' : 'translateX(0)' }} />
        </div>
      )}
      {action && <Button variant="secondary" size="sm">{action}</Button>}
    </div>
  );
}

// ─── Settings sidebar groups ───
const SETTINGS_GROUPS = [
  { title: 'Account', items: [
    { id: 'account',          label: 'Account',          icon: 'user' },
    { id: 'wallet',           label: 'Wallet',           icon: 'key' },
    { id: 'usage',            label: 'Usage',            icon: 'chart' },
    { id: 'data',             label: 'Data',             icon: 'box' },
  ]},
  { title: 'Models & Tools', items: [
    { id: 'providers',        label: 'Providers',        icon: 'sparkle' },
    { id: 'mcp-servers',      label: 'MCP Servers',      icon: 'plug' },
    { id: 'plugins',          label: 'Plugins',          icon: 'cube' },
    { id: 'skills',           label: 'Skills',           icon: 'zap' },
    { id: 'agents',           label: 'Agents',           icon: 'cube' },
    { id: 'prompts',          label: 'Prompts',          icon: 'docs' },
    { id: 'hooks',            label: 'Hooks',            icon: 'zap' },
  ]},
  { title: 'Communication', items: [
    { id: 'channels',         label: 'Channels',         icon: 'sound' },
    { id: 'contacts',         label: 'Contacts',         icon: 'user' },
    { id: 'voice',            label: 'Voice',            icon: 'mic' },
    { id: 'web-search',       label: 'Web Search',       icon: 'globe' },
  ]},
  { title: 'Workspace', items: [
    { id: 'workspace',        label: 'Workspaces',       icon: 'folder' },
    { id: 'memory',           label: 'Memory',           icon: 'box' },
    { id: 'chat-behavior',    label: 'Chat behavior',    icon: 'chat' },
  ]},
  { title: 'System', items: [
    { id: 'general',          label: 'General',          icon: 'settings' },
    { id: 'appearance',       label: 'Appearance',       icon: 'eye' },
    { id: 'shortcuts',        label: 'Shortcuts',        icon: 'keyboard' },
    { id: 'permissions',      label: 'Permissions',      icon: 'lock' },
    { id: 'network',          label: 'Network',          icon: 'globe' },
  ]},
  { title: 'Integrations', items: [
    { id: 'chrome-relay',     label: 'Chrome Relay',     icon: 'link' },
    { id: 'computer-use',     label: 'Computer Use',     icon: 'cube' },
    { id: 'activity-recorder', label: 'Activity Recorder', icon: 'eye' },
  ]},
  { title: '', items: [
    { id: 'about',            label: 'About',            icon: 'info' },
  ]},
];

function flattenSettingsGroups() {
  const out = [];
  SETTINGS_GROUPS.forEach((g) => g.items.forEach((it) => out.push({ ...it, group: g.title })));
  return out;
}

function findSettingsItem(id) {
  return flattenSettingsGroups().find((s) => s.id === id);
}

function SettingsSidebar({ dark, activeId = 'account', search = 'Search settings' }) {
  const t = dark ? G.d : G.l;
  return (
    <div style={{
      width: 240, height: '100%', flexShrink: 0,
      borderRight: `0.5px solid ${t.border}`,
      display: 'flex', flexDirection: 'column',
      paddingTop: 36,
    }}>
      <div style={{ padding: '10px 16px 8px' }}>
        <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: -0.1 }}>Settings</div>
      </div>
      <div style={{ padding: '4px 12px 8px' }}>
        <div style={{
          height: 28, padding: '0 10px',
          display: 'flex', alignItems: 'center', gap: 6,
          background: t.surface2, border: `1px solid ${t.border2}`,
          borderRadius: 8,
        }}>
          <Icon name="search" size={13} color={t.fg3} />
          <span style={{ fontSize: 12, color: t.fg3, flex: 1 }}>{search}</span>
          <Kbd>⌘F</Kbd>
        </div>
      </div>
      <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: '4px 8px 12px' }}>
        {SETTINGS_GROUPS.map((g, gi) => (
          <div key={gi} style={{ marginBottom: g.title ? 12 : 4 }}>
            {g.title && (
              <div style={{ padding: '10px 10px 4px', fontSize: 9.5, fontWeight: 600, color: t.fg3, letterSpacing: 1, textTransform: 'uppercase', fontFamily: G.mono }}>
                {g.title}
              </div>
            )}
            {g.items.map((it) => {
              const isActive = it.id === activeId;
              return (
                <div key={it.id} style={{
                  padding: '6px 10px', borderRadius: 7,
                  display: 'flex', alignItems: 'center', gap: 9,
                  background: isActive ? t.surface2 : 'transparent',
                  cursor: 'pointer', marginBottom: 1,
                }}>
                  {it.icon && <Icon name={it.icon} size={13} color={isActive ? t.fg : t.fg2} />}
                  <span style={{ flex: 1, fontSize: 12.5, color: isActive ? t.fg : t.fg2, fontWeight: isActive ? 500 : 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {it.label}
                  </span>
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

function SettingsScreen({ dark, section = 'account', subState = {} }) {
  const t = dark ? G.d : G.l;
  const item = findSettingsItem(section) || { label: section, group: '' };
  const sidebar = <SettingsSidebar dark={dark} activeId={section} />;

  // Pages whose components have their own page header; render bare in the right pane.
  const NEW_PAGES = {
    'about':              () => <AboutSettings dark={dark} state={subState.aboutState} />,
    'activity-recorder':  () => <ActivityRecorderSettings dark={dark} state={subState.recorderState} blacklistCount={subState.blacklistCount} />,
    'agents':             () => <AgentsSettings dark={dark} state={subState.agentsState} custom={subState.customAgents} />,
    'chat-behavior':      () => <ChatBehaviorSettings dark={dark} preset={subState.chatPreset} />,
    'chrome-relay':       () => <ChromeRelaySettings dark={dark} state={subState.relayState} />,
    'computer-use':       () => <ComputerUseSettings dark={dark} state={subState.cuState} />,
    'contacts':           () => <ContactsSettings dark={dark} state={subState.contactsState} />,
    'data':               () => <DataSettings dark={dark} state={subState.dataState} />,
    'hooks':              () => <HooksSettings dark={dark} state={subState.hooksState} />,
    'network':            () => <NetworkSettings dark={dark} proxyState={subState.proxyState} />,
    'plugins':            () => <PluginsSettings dark={dark} state={subState.pluginsState} />,
    'prompts':            () => <PromptsSettings dark={dark} state={subState.promptsState} />,
    'skills':             () => <SkillsSettings dark={dark} state={subState.skillsState} />,
    'usage':              () => <UsageSettings dark={dark} range={subState.usageRange} />,
    'voice':              () => <VoiceSettings dark={dark} state={subState.voiceState} />,
    'web-search':         () => <WebSearchSettings dark={dark} />,
    'workspace':          () => <WorkspaceSettings dark={dark} state={subState.workspaceState} />,
    'channels':           () => <ChannelsSettings dark={dark} activeTab={subState.channelTab} tabStates={subState.tabStates} />,
    'providers':          () => <ProvidersSettings dark={dark} selectedProvider={subState.selectedProvider} subState={subState} />,
    'mcp-servers':        () => <MCPServersSettings dark={dark} expandedServer={subState.expandedServer} showAddDialog={subState.showAddDialog} />,
    'wallet':             () => <WalletShell dark={dark} activeSubTab={subState.walletTab || 'overview'}>
                                  {(() => {
                                    const tab = subState.walletTab || 'overview';
                                    if (tab === 'tokens')       return <WalletTokens dark={dark} {...(subState.walletProps || {})} />;
                                    if (tab === 'transactions') return <WalletTransactions dark={dark} {...(subState.walletProps || {})} />;
                                    if (tab === 'activity')     return <WalletActivity dark={dark} {...(subState.walletProps || {})} />;
                                    return <WalletOverview dark={dark} {...(subState.walletProps || {})} />;
                                  })()}
                                </WalletShell>,
  };

  if (NEW_PAGES[section]) {
    const FULL_BLEED = new Set(['providers', 'channels', 'mcp-servers', 'wallet']);
    const isFull = FULL_BLEED.has(section);
    return (
      <AppShell dark={dark} active="settings" sidebar={sidebar}
        topBar={<AppTopBar dark={dark} breadcrumbs={['Settings', item.group, item.label].filter(Boolean)} />}
      >
        <div className="gh-scroll" style={{ height: '100%', overflow: isFull ? 'hidden' : 'auto', padding: isFull ? 0 : '32px 48px' }}>
          <div style={{ maxWidth: isFull ? 'none' : 760, height: isFull ? '100%' : 'auto' }}>{NEW_PAGES[section]()}</div>
        </div>
      </AppShell>
    );
  }


  let body = null;

  if (section === 'account') {
    body = (
      <>
        <SectionHeader title="Account" sub="Nickname, credits, and invitation activity." dark={dark} />
        <Card style={{ padding: 18, marginBottom: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <Avatar name="Liu" size={56} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 16, fontWeight: 600 }}>Liu</div>
              <div style={{ fontSize: 12, color: t.fg3, fontFamily: G.mono }}>liu@example.com</div>
            </div>
            <Button variant="secondary" size="sm">Change photo</Button>
          </div>
        </Card>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 22 }}>
          <Card style={{ padding: 16 }}>
            <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 1, marginBottom: 8 }}>CREDITS</div>
            <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6 }}>1,284</div>
            <div style={{ fontSize: 11, color: t.fg3, marginTop: 4 }}>+120 this week</div>
          </Card>
          <Card style={{ padding: 16 }}>
            <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 1, marginBottom: 8 }}>INVITED</div>
            <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6 }}>7</div>
            <div style={{ fontSize: 11, color: t.fg3, marginTop: 4 }}>3 active this month</div>
          </Card>
          <Card style={{ padding: 16 }}>
            <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 1, marginBottom: 8 }}>YOUR CODE</div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: 1, fontFamily: G.mono }}>LIU-7X9P</div>
            <div style={{ fontSize: 11, color: t.fg3, marginTop: 4, display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}>
              <Icon name="copy" size={11} color={t.fg3} /> Copy invite link
            </div>
          </Card>
        </div>
        <SettingRow dark={dark} label="Nickname" value="Liu" action="Edit" />
        <SettingRow dark={dark} label="Email" value="liu@example.com" action="Change" />
        <SettingRow dark={dark} label="Language" value="简体中文" action="Change" />
        <SectionHeader title="Invitees" sub="People who joined with your code." dark={dark} small />
        <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 12, overflow: 'hidden' }}>
          {[
            { name: 'Chen Yu', email: 'chen@…', date: 'Apr 28', credits: '+50' },
            { name: 'Marcus L.', email: 'marcus@…', date: 'Apr 21', credits: '+50' },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderTop: i === 0 ? 'none' : `1px solid ${t.border2}` }}>
              <Avatar name={p.name} size={24} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 500 }}>{p.name}</div>
                <div style={{ fontSize: 10, color: t.fg3 }}>{p.email} · {p.date}</div>
              </div>
              <span style={{ fontSize: 10, fontFamily: G.mono, color: t.fg2 }}>{p.credits}</span>
            </div>
          ))}
          <div style={{ padding: '8px 14px', borderTop: `1px solid ${t.border2}`, fontSize: 11, color: t.fg3, cursor: 'pointer' }}>
            View all 7 →
          </div>
        </div>
        <div style={{ marginTop: 20 }}>
          <SettingRow dark={dark} label="Sign out" value="End this session." action="Sign out" />
        </div>
      </>
    );
  } else if (section === 'general') {
    body = (
      <>
        <SectionHeader title="General" sub="Default behavior across the app." dark={dark} />
        <SettingRow dark={dark} label="Launch at login" value="Open Ghast when your Mac starts." toggle={true} />
        <SettingRow dark={dark} label="Run in background" value="Keep agents alive when window closes." toggle={true} />
        <SettingRow dark={dark} label="Confirm before destructive actions" value="Always ask before deleting or overwriting." toggle={true} />
        <SettingRow dark={dark} label="Auto-update" value="Install updates when you quit." toggle={true} />
        <SettingRow dark={dark} label="Send anonymous diagnostics" value="No prompts or data — only crash traces." toggle={false} />
        <SectionHeader title="Storage" sub="" dark={dark} small />
        <SettingRow dark={dark} label="Workspace location" value="~/Library/Ghast" action="Reveal" />
        <SettingRow dark={dark} label="Cache size" value="412 MB" action="Clear" />
      </>
    );
  } else if (section === 'model') {
    body = (
      <>
        <SectionHeader title="Model" sub="Choose the engine behind your agent." dark={dark} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
          {[
            { id: 'g2-pro', name: 'Ghast 2 Pro', desc: 'Best for everything · 200k context · vision', tag: 'Default', on: true },
            { id: 'g2-fast', name: 'Ghast 2 Fast', desc: 'Lower latency · 100k context', tag: 'Cheap', on: false },
            { id: 'local-llama', name: 'Llama 3.3 70B (local)', desc: 'On-device via Ollama · no network', tag: 'Local', on: false },
            { id: 'gpt-5', name: 'GPT-5', desc: 'Bring your own API key', tag: 'BYOK', on: false },
          ].map((m) => (
            <div key={m.id} style={{
              padding: 14, background: t.surface, borderRadius: 12,
              border: `1px solid ${m.on ? t.fg : t.border}`, borderWidth: m.on ? 1.5 : 1,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: t.surface2, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="sparkle" size={16} color={t.fg2} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600, display: 'flex', gap: 8, alignItems: 'center' }}>
                  {m.name} <Tag>{m.tag}</Tag>
                </div>
                <div style={{ fontSize: 11.5, color: t.fg3, marginTop: 2 }}>{m.desc}</div>
              </div>
              <div style={{
                width: 18, height: 18, borderRadius: 9,
                background: m.on ? t.fg : 'transparent',
                border: m.on ? 'none' : `1px solid ${t.border}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{m.on && <Icon name="check" size={11} color={t.bg} />}</div>
            </div>
          ))}
        </div>
        <SectionHeader title="Behavior" sub="" dark={dark} small />
        <SettingRow dark={dark} label="Temperature" value="0.4 — focused" />
        <SettingRow dark={dark} label="Max output tokens" value="8,192" />
        <SettingRow dark={dark} label="System prompt" value="Default · 184 tokens" action="Edit" />
        <SettingRow dark={dark} label="Streaming" value="Token-by-token" toggle={true} />
        <SectionHeader title="API keys" sub="Stored in your OS keychain." dark={dark} small />
        <SettingRow dark={dark} label="OpenAI" value="sk-····P9aQ" action="Replace" />
        <SettingRow dark={dark} label="Anthropic" value="Not set" action="Add" />
        <SettingRow dark={dark} label="Local endpoint" value="http://localhost:11434" action="Edit" />
      </>
    );
  } else if (section === 'wallet') {
    body = (
      <>
        <SectionHeader title="Wallet" sub="Sign on-chain actions and tip skill creators." dark={dark} />
        <Card style={{ padding: 18, marginBottom: 18, background: dark ? '#161616' : '#0A0A0A', color: '#FAFAF9', border: 'none' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="key" size={18} color="#fff" />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, opacity: 0.55, fontFamily: G.mono, letterSpacing: 1 }}>EVM ADDRESS</div>
              <div style={{ fontSize: 15, fontFamily: G.mono, marginTop: 4 }}>0x7f3a 9bc1 e4f2 …b29C</div>
              <div style={{ marginTop: 12, display: 'flex', gap: 14, fontSize: 12, opacity: 0.85 }}>
                <span>Balance · <strong style={{ fontFamily: G.mono }}>2.184 ETH</strong></span>
                <span>USDC · <strong style={{ fontFamily: G.mono }}>$1,820.50</strong></span>
              </div>
            </div>
            <button style={{ background: '#fff', color: '#000', border: 'none', borderRadius: 16, height: 32, padding: '0 14px', fontSize: 12, fontWeight: 500 }}>Copy</button>
          </div>
        </Card>
        <SettingRow dark={dark} label="Default network" value="Ethereum mainnet" action="Change" />
        <SettingRow dark={dark} label="Show test networks" value="Off" toggle={false} />
        <SettingRow dark={dark} label="Confirm every signature" value="Even for low-risk reads." toggle={true} />
        <SettingRow dark={dark} label="Spending cap (per day)" value="0.5 ETH" action="Edit" />
        <SectionHeader title="Backup" sub="" dark={dark} small />
        <SettingRow dark={dark} label="Reveal seed phrase" value="Requires device password." action="Reveal" />
        <SettingRow dark={dark} label="Export private key" value="Encrypted file." action="Export" />
        <SettingRow dark={dark} label="Disconnect wallet" value="Remove keys from this device." action="Disconnect" />
      </>
    );
  } else if (section === 'memory') {
    body = (
      <>
        <SectionHeader title="Memory" sub="Long-term facts Ghast remembers across sessions." dark={dark} />
        <Card style={{ padding: 14, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.5 }}>USED</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontSize: 22, fontWeight: 600 }}>312</span>
              <span style={{ fontSize: 12, color: t.fg3 }}>/ 2,000 facts</span>
            </div>
            <div style={{ marginTop: 8, height: 4, background: t.surface2, borderRadius: 2 }}>
              <div style={{ height: '100%', width: '15.6%', background: t.fg, borderRadius: 2 }} />
            </div>
          </div>
          <Button variant="secondary" size="sm">Add fact</Button>
        </Card>
        <SectionHeader title="Recent memories" sub="" dark={dark} small />
        <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 12, overflow: 'hidden' }}>
          {[
            { fact: 'Prefers concise replies. No filler. Bullet points.', tag: 'Preference', date: '2d' },
            { fact: 'Pacific time but reviews PRs at 22:00 Asia/Shanghai.', tag: 'Schedule', date: '4d' },
            { fact: 'Main repo: github.com/liu/web · pnpm + Turbo.', tag: 'Project', date: '1w' },
            { fact: 'Allergic to dairy — exclude from meal-plan workflows.', tag: 'Personal', date: '2w' },
            { fact: 'Cofounder at Ghast Labs. "Founding designer".', tag: 'Identity', date: '1mo' },
          ].map((m, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '14px 16px', borderTop: i === 0 ? 'none' : `1px solid ${t.border2}` }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: t.fg, marginTop: 7 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, lineHeight: 1.5 }}>{m.fact}</div>
                <div style={{ display: 'flex', gap: 6, marginTop: 6, alignItems: 'center' }}>
                  <Tag>{m.tag}</Tag>
                  <span style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono }}>{m.date}</span>
                </div>
              </div>
              <Icon name="moreH" size={14} color={t.fg3} />
            </div>
          ))}
        </div>
        <SectionHeader title="Controls" sub="" dark={dark} small />
        <SettingRow dark={dark} label="Auto-remember" value="Let Ghast save useful facts on its own." toggle={true} />
        <SettingRow dark={dark} label="Ask before remembering" value="" toggle={false} />
        <SettingRow dark={dark} label="Forget everything" value="Wipes all memory. Cannot be undone." action="Forget…" />
      </>
    );
  } else if (section === 'appearance') {
    body = (
      <>
        <SectionHeader title="Appearance" sub="Theme, typography, code style, and density." dark={dark} />
        <SettingRow dark={dark} label="Theme" value="System" segments={['Light', 'Dark', 'System']} active="System" />
        <SettingRow dark={dark} label="Accent" value="Mono" segments={['Mono', 'Ink', 'Tide']} active="Mono" />
        <SettingRow dark={dark} label="Density" value="Comfortable" segments={['Compact', 'Comfortable']} active="Comfortable" />
        <SettingRow dark={dark} label="Reduce motion" value="Off" toggle={false} />

        <SectionHeader title="Typography" sub="" dark={dark} small />
        <SettingRow dark={dark} label="UI font" value="SF Pro" action="Change" />
        <SettingRow dark={dark} label="Code font" value="JetBrains Mono" action="Change" />
        <SettingRow dark={dark} label="UI font size" value="14px" segments={['12', '14', '16', '18']} active="14" />
        <SettingRow dark={dark} label="Code font size" value="13px" segments={['11', '13', '15', '17']} active="13" />
        <SettingRow dark={dark} label="Line height" value="1.6" segments={['1.4', '1.6', '1.8']} active="1.6" />

        <SectionHeader title="Code theme" sub="" dark={dark} small />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
          {[
            { id: 'mono', label: 'Mono', bg: '#FAFAF9', fg: '#0A0A0A', kw: '#0A0A0A', str: '#555', comment: '#999', sel: true },
            { id: 'github', label: 'GitHub', bg: '#fff', fg: '#24292e', kw: '#d73a49', str: '#032f62', comment: '#6a737d' },
            { id: 'dracula', label: 'Dracula', bg: '#282a36', fg: '#f8f8f2', kw: '#ff79c6', str: '#f1fa8c', comment: '#6272a4' },
          ].map((theme) => (
            <div key={theme.id} style={{
              padding: 10, background: t.surface,
              border: `1px solid ${theme.sel ? t.fg : t.border}`,
              borderWidth: theme.sel ? 1.5 : 1,
              borderRadius: 12, cursor: 'pointer',
            }}>
              <div style={{ background: theme.bg, borderRadius: 8, padding: '10px 12px', fontFamily: G.mono, fontSize: 11, lineHeight: 1.6, marginBottom: 8, border: `0.5px solid ${t.border}` }}>
                <div style={{ color: theme.comment }}>{'// hello.ts'}</div>
                <div><span style={{ color: theme.kw }}>const</span> <span style={{ color: theme.fg }}>msg</span> = <span style={{ color: theme.str }}>"hello"</span>;</div>
                <div><span style={{ color: theme.kw }}>export</span> <span style={{ color: theme.fg }}>msg</span>;</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 12, fontWeight: 500 }}>{theme.label}</span>
                {theme.sel && <div style={{ width: 16, height: 16, borderRadius: 8, background: t.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={11} color={t.bg} /></div>}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {[
            { id: 'solarized', label: 'Solarized', bg: '#fdf6e3', fg: '#657b83', kw: '#859900', str: '#2aa198', comment: '#93a1a1' },
            { id: 'nord', label: 'Nord', bg: '#2e3440', fg: '#d8dee9', kw: '#81a1c1', str: '#a3be8c', comment: '#616e88' },
            { id: 'catppuccin', label: 'Catppuccin', bg: '#1e1e2e', fg: '#cdd6f4', kw: '#cba6f7', str: '#a6e3a1', comment: '#585b70' },
          ].map((theme) => (
            <div key={theme.id} style={{
              padding: 10, background: t.surface,
              border: `1px solid ${t.border}`,
              borderRadius: 12, cursor: 'pointer',
            }}>
              <div style={{ background: theme.bg, borderRadius: 8, padding: '10px 12px', fontFamily: G.mono, fontSize: 11, lineHeight: 1.6, marginBottom: 8, border: `0.5px solid ${t.border}` }}>
                <div style={{ color: theme.comment }}>{'// hello.ts'}</div>
                <div><span style={{ color: theme.kw }}>const</span> <span style={{ color: theme.fg }}>msg</span> = <span style={{ color: theme.str }}>"hello"</span>;</div>
                <div><span style={{ color: theme.kw }}>export</span> <span style={{ color: theme.fg }}>msg</span>;</div>
              </div>
              <div style={{ fontSize: 12, fontWeight: 500 }}>{theme.label}</div>
            </div>
          ))}
        </div>
      </>
    );
  } else if (section === 'shortcuts') {
    body = (
      <>
        <SectionHeader title="Shortcuts" sub="Make Ghast feel like home." dark={dark} />
        {[
          ['Summon Ghast', ['⌘', '⇧', 'G']],
          ['New chat', ['⌘', 'N']],
          ['Search', ['⌘', 'K']],
          ['Toggle sidebar', ['⌘', '\\']],
          ['Run last workflow', ['⌘', '↵']],
          ['Open settings', ['⌘', ',']],
        ].map(([label, keys], i) => (
          <SettingRow key={i} dark={dark} label={label} keys={keys} />
        ))}
      </>
    );
  } else {
    body = <SectionHeader title={item.label} sub="Settings panel." dark={dark} />;
  }

  return (
    <AppShell dark={dark} active="settings" sidebar={sidebar}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Settings', item.group, item.label].filter(Boolean)} />}
    >
      <div className="gh-scroll" style={{ height: '100%', overflow: 'auto', padding: '32px 48px', maxWidth: 720 }}>
        {body}
      </div>
    </AppShell>
  );
}

Object.assign(window, { WorkflowCanvas, StoreScreen, SkillDetail, SettingsScreen, SettingsSidebar, SectionHeader, SettingRow, SETTINGS_GROUPS, findSettingsItem });