// chat-screens.jsx — Main App: Chat mode in all states.

// Left sidebar — always sessions
function chatSidebar(dark) {
  return (
    <AppSidebar title="Chats" search="Search threads" onNew dark={dark} width={250}
      sections={[
        { title: 'Pinned', items: [
          { label: 'Q4 launch plan', icon: 'pin', meta: '2d' },
          { label: 'API redesign notes', icon: 'pin', meta: '5d' },
        ]},
        { title: 'Today', items: [
          { label: 'Refactor auth middleware', active: true },
          { label: 'Brainstorm cold open', meta: '2h' },
          { label: 'Translate marketing copy', meta: '4h' },
        ]},
        { title: 'Yesterday', items: [
          { label: 'CSV cleanup script' },
          { label: 'Review PR #4112' },
        ]},
        { title: 'Earlier', items: [
          { label: 'Quarterly retrospective' },
          { label: 'Vendor due diligence' },
        ]},
      ]}
    />
  );
}

// Right sidebar — tool calls panel
function RightPanelTools({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <div style={{ width: 260, flexShrink: 0, borderLeft: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ padding: '10px 14px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 12, fontWeight: 600 }}>Tool calls</div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button style={{ width: 22, height: 22, borderRadius: 6, background: 'transparent', border: 'none', color: t.fg3, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="search" size={12} /></button>
          <button style={{ width: 22, height: 22, borderRadius: 6, background: 'transparent', border: 'none', color: t.fg3, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="close" size={12} /></button>
        </div>
      </div>
      <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: '4px 8px 8px' }}>
        <div style={{ padding: '6px 6px 2px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1 }}>RUNNING</div>
        {[
          { tool: 'shell', arg: 'npm run lint', icon: 'terminal', time: '2.4s', running: true },
        ].map((tc, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 8px', borderRadius: 8, background: t.surface2, marginBottom: 4 }}>
            <div style={{ width: 11, height: 11, border: `1.5px solid ${t.fg2}`, borderTopColor: 'transparent', borderRadius: 6, animation: 'gh-spin 0.8s linear infinite', flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 500, fontFamily: G.mono }}>{tc.tool}</div>
              <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tc.arg}</div>
            </div>
            <span style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, flexShrink: 0 }}>{tc.time}</span>
          </div>
        ))}
        <div style={{ padding: '10px 6px 2px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1 }}>COMPLETED</div>
        {[
          { tool: 'file_read', arg: 'auth.ts', icon: 'file', time: '12ms' },
          { tool: 'grep', arg: '/apps/web', icon: 'search', time: '88ms' },
          { tool: 'shell', arg: 'pnpm build', icon: 'terminal', time: '34s' },
          { tool: 'github', arg: 'open PR', icon: 'git', time: '1.1s' },
          { tool: 'http', arg: 'POST /api/v2', icon: 'plug', time: '210ms' },
          { tool: 'memory', arg: 'save fact', icon: 'box', time: '4ms' },
        ].map((tc, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 8, marginBottom: 2, cursor: 'pointer' }}>
            <Icon name="check" size={11} color={t.fg3} style={{ flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 500, fontFamily: G.mono }}>{tc.tool}</div>
              <div style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tc.arg}</div>
            </div>
            <span style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono, flexShrink: 0 }}>{tc.time}</span>
          </div>
        ))}
        <div style={{ padding: '10px 6px 2px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1 }}>SKILLS</div>
        {[
          { name: 'Auth Hardening', calls: 3 },
          { name: 'Code Reviewer', calls: 1 },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 8, fontSize: 11 }}>
            <Icon name="skills" size={11} color={t.fg3} />
            <span style={{ flex: 1, fontWeight: 500 }}>{s.name}</span>
            <span style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono }}>{s.calls}</span>
          </div>
        ))}
      </div>
      <style dangerouslySetInnerHTML={{__html: `@keyframes gh-spin{to{transform:rotate(360deg)}}`}} />
    </div>
  );
}

// Right sidebar — files panel
function RightPanelFiles({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <div style={{ width: 260, flexShrink: 0, borderLeft: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ padding: '10px 14px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 12, fontWeight: 600 }}>Files</div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button style={{ width: 22, height: 22, borderRadius: 6, background: 'transparent', border: 'none', color: t.fg3, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="search" size={12} /></button>
          <button style={{ width: 22, height: 22, borderRadius: 6, background: 'transparent', border: 'none', color: t.fg3, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="close" size={12} /></button>
        </div>
      </div>
      <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: '4px 8px 8px' }}>
        <div style={{ padding: '6px 6px 2px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1 }}>OPEN</div>
        {[
          { name: 'auth.ts', type: 'TS', active: true },
          { name: 'session.ts', type: 'TS' },
          { name: 'README.md', type: 'MD' },
        ].map((f, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 8, background: f.active ? t.surface2 : 'transparent', cursor: 'pointer', marginBottom: 2 }}>
            <Icon name="code" size={12} color={f.active ? t.fg : t.fg3} />
            <span style={{ flex: 1, fontSize: 12, fontWeight: f.active ? 500 : 400, color: f.active ? t.fg : t.fg2 }}>{f.name}</span>
            <span style={{ fontSize: 9, color: t.fg3, fontFamily: G.mono }}>{f.type}</span>
          </div>
        ))}
        <div style={{ padding: '10px 6px 2px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1 }}>GENERATED</div>
        {[
          { name: 'audit-report.md', type: 'MD' },
          { name: 'fix-suggestions.diff', type: 'DIFF' },
          { name: 'middleware.test.ts', type: 'TS' },
          { name: 'flow-diagram.svg', type: 'SVG' },
          { name: 'logo-draft.png', type: 'PNG' },
          { name: 'q4-plan.pdf', type: 'PDF' },
        ].map((f, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 8, cursor: 'pointer', marginBottom: 2 }}>
            <Icon name={f.type === 'PNG' || f.type === 'SVG' ? 'image' : 'file'} size={12} color={t.fg3} />
            <span style={{ flex: 1, fontSize: 12, color: t.fg2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
            <span style={{ fontSize: 9, color: t.fg3, fontFamily: G.mono }}>{f.type}</span>
          </div>
        ))}
        <div style={{ padding: '10px 6px 2px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1 }}>ATTACHED</div>
        {[
          { name: 'sales.csv', type: 'CSV' },
          { name: 'styles.css', type: 'CSS' },
        ].map((f, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 8, cursor: 'pointer', marginBottom: 2 }}>
            <Icon name="file" size={12} color={t.fg3} />
            <span style={{ flex: 1, fontSize: 12, color: t.fg2 }}>{f.name}</span>
            <span style={{ fontSize: 9, color: t.fg3, fontFamily: G.mono }}>{f.type}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 1. Chat — empty state
// ─────────────────────────────────────────────────────────────
function ChatEmpty({ dark }) {
  const t = dark ? G.d : G.l;
  const suggestions = [
    { icon: 'code', title: 'Audit my React app', desc: 'Find unused props and stale effects' },
    { icon: 'workflow', title: 'Daily digest workflow', desc: 'Summarize Slack into a Notion page' },
    { icon: 'sparkle', title: 'Plan a 6-week roadmap', desc: 'From a goal and three constraints' },
    { icon: 'file', title: 'Extract a CSV from this PDF', desc: 'Reads tables & names columns' },
  ];
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'New thread']}
        right={<><Tag variant="outline"><Icon name="cube" size={11}/> Sandbox</Tag><Button variant="ghost" size="sm" icon={<Icon name="moreH" size={14}/>} /></>} />}
    >
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 32 }}>
          <GhastLogo size={56} color={t.fg} style={{ opacity: 0.92, marginBottom: 22 }} />
          <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.7, marginBottom: 6 }}>Good evening, Liu.</div>
          <div style={{ fontSize: 14, color: t.fg2, marginBottom: 36 }}>What are we building today?</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, width: 560 }}>
            {suggestions.map((s, i) => (
              <Card key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: 14 }}>
                <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={s.icon} size={15} color={t.fg2} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 2 }}>{s.title}</div>
                  <div style={{ fontSize: 11.5, color: t.fg3, lineHeight: 1.4 }}>{s.desc}</div>
                </div>
              </Card>
            ))}
          </div>
        </div>
        <Composer dark={dark} large />
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 2. Chat — composing (typed text in composer)
// ─────────────────────────────────────────────────────────────
function ChatComposing({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'New thread']}
        right={<><Tag variant="outline"><Icon name="cube" size={11}/> Sandbox</Tag></>} />}
    >
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 32 }}>
          <GhastLogo size={48} color={t.fg} style={{ opacity: 0.5, marginBottom: 18 }} />
          <div style={{ fontSize: 22, fontWeight: 500, color: t.fg2, letterSpacing: -0.4 }}>What can I do for you?</div>
        </div>
        <Composer dark={dark} large
          value={"Audit the auth middleware in /apps/web — flag any session bypasses and write a one-page summary I can post in #security."}
          attached={[{ icon: 'folder', label: 'apps/web' }, { icon: 'file', label: 'middleware.ts' }]}
        />
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 3. Chat — thinking
// ─────────────────────────────────────────────────────────────
function ChatThinking({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Refactor auth middleware']}
        right={<><Tag variant="outline"><Icon name="dot" size={11}/> Live</Tag><Button variant="ghost" size="sm" icon={<Icon name="moreH" size={14}/>} /></>} />}
    >
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: '28px 0 16px' }}>
          <div style={{ padding: '0 32px', display: 'flex', flexDirection: 'column', gap: 24 }}>
            {/* user message */}
            <div style={{ alignSelf: 'flex-end', maxWidth: '80%' }}>
              <div style={{ background: t.surface2, padding: '12px 16px', borderRadius: 18, fontSize: 14, lineHeight: 1.5 }}>
                Audit the auth middleware in /apps/web — flag any session bypasses and write a one-page summary I can post in #security.
              </div>
            </div>
            {/* tool call running */}
            <div style={{ display: 'flex', gap: 12, maxWidth: 780 }}>
              <GhastLogo size={26} color={t.fg} style={{ flexShrink: 0, marginTop: 2 }} />
              <div style={{ flex: 1, fontSize: 14, lineHeight: 1.55 }}>
                <div style={{ color: t.fg2, marginBottom: 12, fontStyle: 'italic' }}>Thinking through your repo structure…</div>
                {/* tool steps */}
                <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 12, padding: 12, marginBottom: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, fontSize: 12 }}>
                    <Icon name="folder" size={13} color={t.fg2} />
                    <span style={{ fontWeight: 500 }}>read_directory</span>
                    <span style={{ color: t.fg3, fontFamily: G.mono, fontSize: 11 }}>apps/web/middleware</span>
                    <span style={{ flex: 1 }} />
                    <Icon name="check" size={13} color={t.fg2} />
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, fontSize: 12 }}>
                    <Icon name="file" size={13} color={t.fg2} />
                    <span style={{ fontWeight: 500 }}>read_file</span>
                    <span style={{ color: t.fg3, fontFamily: G.mono, fontSize: 11 }}>auth.ts (412 lines)</span>
                    <span style={{ flex: 1 }} />
                    <Icon name="check" size={13} color={t.fg2} />
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                    <div style={{ width: 13, height: 13, border: `1.5px solid ${t.fg2}`, borderTopColor: 'transparent', borderRadius: 7, animation: 'gh-spin 0.8s linear infinite' }} />
                    <span style={{ fontWeight: 500 }}>grep</span>
                    <span style={{ color: t.fg3, fontFamily: G.mono, fontSize: 11 }}>"bypass|skipAuth|admin=true"</span>
                    <span style={{ flex: 1 }} />
                    <span style={{ color: t.fg3, fontSize: 10, fontFamily: G.mono }}>0:04</span>
                  </div>
                </div>
                <div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', color: t.fg3, fontSize: 12, fontFamily: G.mono }}>
                  <span style={{ display: 'inline-block', width: 6, height: 6, background: t.fg2, borderRadius: 3, animation: 'gh-pulse 1s infinite' }} />
                  reasoning · 12.3k tokens
                </div>
              </div>
            </div>
          </div>
        </div>
        <Composer dark={dark} thinking />
      </div>
      <style dangerouslySetInnerHTML={{__html: `@keyframes gh-spin{to{transform:rotate(360deg)}}`}} />
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 4. Chat — full conversation with code block + artifact preview
// ─────────────────────────────────────────────────────────────
function ChatActive({ dark, rightPanel }) {
  const t = dark ? G.d : G.l;
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Refactor auth middleware']}
        right={<><Tag variant="outline"><Icon name="git" size={11}/> apps/web</Tag><Button variant="ghost" size="sm" icon={<Icon name="share" size={14}/>}>Share</Button></>} />}
    >
      <div style={{ height: '100%', display: 'flex' }}>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: '24px 0 16px' }}>
          <div style={{ padding: '0 32px', display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div style={{ alignSelf: 'flex-end', maxWidth: '80%' }}>
              <div style={{ background: t.surface2, padding: '12px 16px', borderRadius: 18, fontSize: 14, lineHeight: 1.5 }}>
                Audit the auth middleware in /apps/web — flag any session bypasses.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, maxWidth: 780 }}>
              <GhastLogo size={26} color={t.fg} style={{ flexShrink: 0, marginTop: 2 }} />
              <div style={{ flex: 1, fontSize: 14, lineHeight: 1.6, minWidth: 0 }}>
                <p style={{ margin: '4px 0 12px' }}>I read 12 files under <code style={{ fontFamily: G.mono, fontSize: 12, padding: '1px 5px', background: t.surface2, borderRadius: 4 }}>apps/web/middleware</code> and found <strong>two real risks</strong> plus one stylistic concern. Summary first, details below.</p>
                <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 12, padding: 14, margin: '8px 0' }}>
                  <div style={{ fontSize: 11, fontFamily: G.mono, color: t.fg3, marginBottom: 8, letterSpacing: 0.6 }}>FINDINGS · 3</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {[
                      { sev: 'high', title: 'Bypass via X-Internal-Trust header', file: 'auth.ts:142' },
                      { sev: 'high', title: '`requireSession` swallowed when admin=true cookie present', file: 'session.ts:88' },
                      { sev: 'low', title: 'Inconsistent error responses leak path info', file: 'errors.ts:31' },
                    ].map((f, i) => (
                      <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '6px 0', borderTop: i === 0 ? 'none' : `1px solid ${t.border2}` }}>
                        <Tag variant={f.sev === 'high' ? 'solid' : 'outline'} style={{ height: 20, fontSize: 10, textTransform: 'uppercase', letterSpacing: 0.6 }}>{f.sev}</Tag>
                        <span style={{ fontSize: 13, flex: 1 }}>{f.title}</span>
                        <span style={{ fontFamily: G.mono, fontSize: 11, color: t.fg3 }}>{f.file}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <p style={{ margin: '12px 0 8px' }}>I drafted a one-page summary you can post — open it on the right.</p>

                {/* Artifact card */}
                <div style={{
                  background: t.surface, border: `1px solid ${t.border}`,
                  borderRadius: 12, overflow: 'hidden', marginTop: 8, cursor: 'pointer',
                }}>
                  <div style={{ padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: `1px solid ${t.border}` }}>
                    <Icon name="file" size={14} color={t.fg2} />
                    <span style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>auth-audit-summary.md</span>
                    <span style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono }}>1.4 KB · MD</span>
                    <Icon name="ext" size={13} color={t.fg2} />
                  </div>
                  <div style={{ padding: '12px 14px', fontSize: 12, color: t.fg2, lineHeight: 1.5, fontFamily: G.mono, maxHeight: 80, overflow: 'hidden', position: 'relative' }}>
                    # Auth middleware audit · 2026-05-02<br/>
                    <br/>
                    Two high-severity bypass paths, one low-severity leak.<br/>
                    All findings reproduce on main@a3f2c01...
                    <div style={{ position: 'absolute', inset: 'auto 0 0 0', height: 30, background: `linear-gradient(transparent, ${t.surface})` }} />
                  </div>
                </div>

                <div style={{ display: 'flex', gap: 6, marginTop: 14, color: t.fg3 }}>
                  <button style={{ width: 28, height: 28, borderRadius: 6, background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="copy" size={13} /></button>
                  <button style={{ width: 28, height: 28, borderRadius: 6, background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="refresh" size={13} /></button>
                  <button style={{ width: 28, height: 28, borderRadius: 6, background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="share" size={13} /></button>
                  <button style={{ width: 28, height: 28, borderRadius: 6, background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="edit" size={13} /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Composer dark={dark} value="Now open a PR with the fix for the X-Internal-Trust bypass" />
      </div>
      {rightPanel}
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 5. Chat — with side artifact panel open
// ─────────────────────────────────────────────────────────────
function ChatArtifact({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Refactor auth middleware', 'auth-audit-summary.md']}
        right={<><Button variant="ghost" size="sm" icon={<Icon name="download" size={13}/>}>Save</Button><Button variant="secondary" size="sm" icon={<Icon name="ext" size={13}/>}>Open</Button></>} />}
    >
      <div style={{ height: '100%', display: 'flex' }}>
        {/* Chat (compressed) */}
        <div style={{ width: 380, flexShrink: 0, borderRight: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column' }}>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 18, display: 'flex', flexDirection: 'column', gap: 14, fontSize: 13 }}>
            <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
              <div style={{ background: t.surface2, padding: '10px 12px', borderRadius: 14 }}>Audit auth middleware</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <GhastLogo size={20} color={t.fg} style={{ flexShrink: 0, marginTop: 1 }} />
              <div>I found 3 issues. Open the summary on the right →</div>
            </div>
            <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
              <div style={{ background: t.surface2, padding: '10px 12px', borderRadius: 14 }}>Add severity table at top</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <GhastLogo size={20} color={t.fg} style={{ flexShrink: 0, marginTop: 1 }} />
              <div>Done — table added. Anything else?</div>
            </div>
          </div>
          <Composer
            dark={dark}
            placeholder="Reply..."
            compact
            contextFile="auth-audit.md"
            permissionMode="confirm"
            contextUsed={94}
          />
        </div>
        {/* Artifact pane */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div style={{ padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: `0.5px solid ${t.border}`, fontSize: 12, color: t.fg2 }}>
            <Icon name="file" size={13} /> auth-audit-summary.md
            <span style={{ flex: 1 }} />
            <Tag>v3</Tag>
            <Icon name="moreH" size={14} />
          </div>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: '40px 56px', maxWidth: 760, alignSelf: 'center', width: '100%' }}>
            <div style={{ fontSize: 11, fontFamily: G.mono, color: t.fg3, letterSpacing: 0.6, marginBottom: 6 }}>2026-05-02 · LIU WEI</div>
            <h1 style={{ fontSize: 30, fontWeight: 600, letterSpacing: -0.6, margin: '0 0 8px' }}>Auth middleware audit</h1>
            <p style={{ fontSize: 14, color: t.fg2, lineHeight: 1.6, margin: '0 0 20px' }}>
              Two high-severity bypasses, one low-severity error-message leak. All findings reproduce on <code style={{ fontFamily: G.mono, fontSize: 12, padding: '1px 5px', background: t.surface2, borderRadius: 4 }}>main@a3f2c01</code>.
            </p>
            <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 10, overflow: 'hidden', margin: '0 0 24px' }}>
              {[
                ['HIGH', 'X-Internal-Trust header bypass', 'auth.ts:142'],
                ['HIGH', 'admin=true cookie skips requireSession', 'session.ts:88'],
                ['LOW', 'Verbose 500 leaks file path', 'errors.ts:31'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderTop: i === 0 ? 'none' : `1px solid ${t.border}`, fontSize: 13 }}>
                  <Tag variant={r[0] === 'HIGH' ? 'solid' : 'outline'} style={{ height: 20, fontSize: 10 }}>{r[0]}</Tag>
                  <span style={{ flex: 1 }}>{r[1]}</span>
                  <span style={{ fontFamily: G.mono, fontSize: 11, color: t.fg3 }}>{r[2]}</span>
                </div>
              ))}
            </div>
            <h2 style={{ fontSize: 18, fontWeight: 600, margin: '0 0 8px', letterSpacing: -0.3 }}>1. X-Internal-Trust bypass</h2>
            <p style={{ fontSize: 13.5, color: t.fg2, lineHeight: 1.65, margin: '0 0 12px' }}>
              In <code style={{ fontFamily: G.mono, fontSize: 12 }}>auth.ts</code>, the middleware short-circuits to <code style={{ fontFamily: G.mono, fontSize: 12 }}>next()</code> when an upstream proxy header is present. The check uses request.headers directly without verifying the proxy chain, so any external client may set this header.
            </p>
            <pre style={{ background: t.surface2, border: `1px solid ${t.border}`, borderRadius: 8, padding: 12, fontFamily: G.mono, fontSize: 12, overflow: 'auto', lineHeight: 1.5, margin: '0 0 16px' }}>
{`if (req.headers['x-internal-trust'] === 'true') {
  return next(); // ← unverified, accepts user-supplied header
}`}
            </pre>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 6. Chat — search palette open (cmd-k)
// ─────────────────────────────────────────────────────────────
function ChatSearch({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'New thread']} />}
    >
      {/* underlying empty state */}
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', filter: 'blur(2px)', opacity: 0.5 }}>
        <div style={{ flex: 1 }} />
        <Composer dark={dark} large />
      </div>
      {/* overlay */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.18)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: 80 }}>
        <Glass radius={18} dark={dark} strong style={{ width: 580 }}>
          <div style={{ padding: '14px 16px', borderBottom: `0.5px solid ${t.border}`, display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="search" size={16} color={t.fg2} />
            <input style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: G.font, fontSize: 15, color: t.fg }} defaultValue="auth" autoFocus />
            <Kbd>esc</Kbd>
          </div>
          <div className="gh-noscroll" style={{ maxHeight: 360, overflow: 'auto' }}>
            <div style={{ padding: '8px 12px 4px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1, textTransform: 'uppercase' }}>Threads · 4</div>
            {[
              ['Refactor auth middleware', '… session bypass via header …', '2h'],
              ['Auth: refresh token rotation', '… considering JWT vs opaque …', '3d'],
              ['SSO with Okta', '… SAML vs OIDC tradeoffs …', '1w'],
              ['Audit log retention', '… GDPR overlap with auth …', '2w'],
            ].map((r, i) => (
              <div key={i} style={{
                padding: '8px 14px', display: 'flex', gap: 10, alignItems: 'center',
                background: i === 0 ? t.surface2 : 'transparent', borderRadius: 8, margin: '0 6px',
              }}>
                <Icon name="chat" size={14} color={t.fg2} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{r[0]}</div>
                  <div style={{ fontSize: 11, color: t.fg3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r[1]}</div>
                </div>
                <span style={{ fontSize: 10, color: t.fg3, fontFamily: G.mono }}>{r[2]}</span>
              </div>
            ))}
            <div style={{ padding: '12px 12px 4px', fontSize: 10, fontWeight: 600, color: t.fg3, letterSpacing: 1, textTransform: 'uppercase' }}>Skills · 2</div>
            {[
              ['Auth Hardening', 'Run a 12-point audit on Express/Next middleware'],
              ['Token Rotator', 'Rotate JWT secrets across environments'],
            ].map((r, i) => (
              <div key={i} style={{ padding: '8px 14px', display: 'flex', gap: 10, alignItems: 'center', borderRadius: 8, margin: '0 6px' }}>
                <Icon name="skills" size={14} color={t.fg2} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{r[0]}</div>
                  <div style={{ fontSize: 11, color: t.fg3 }}>{r[1]}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ padding: '8px 14px', borderTop: `0.5px solid ${t.border}`, display: 'flex', gap: 10, fontSize: 10, fontFamily: G.mono, color: t.fg3, letterSpacing: 0.5 }}>
            <span><Kbd>↑↓</Kbd> NAVIGATE</span>
            <span><Kbd>↵</Kbd> OPEN</span>
            <span style={{ flex: 1 }} />
            <span>4 RESULTS · 12 ms</span>
          </div>
        </Glass>
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 7. Chat — slash command menu open inline
// ─────────────────────────────────────────────────────────────
function ChatSlashMenu({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'New thread']} />}
    >
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-end', padding: '0 24px', position: 'relative' }}>
          {/* slash menu — absolutely positioned above composer */}
          <div style={{ width: 'calc(100% - 48px)', maxWidth: 720, marginBottom: 12 }}>
            <Glass radius={14} dark={dark} strong>
              <div style={{ padding: 6 }}>
                {[
                  { cmd: '/audit', desc: 'Run a security audit on the current repo', icon: 'lock' },
                  { cmd: '/branch', desc: 'Create a new git branch and check out', icon: 'git' },
                  { cmd: '/build', desc: 'Run npm build and report errors', icon: 'box' },
                  { cmd: '/clear', desc: 'Clear the current chat thread', icon: 'trash' },
                ].map((c, i) => (
                  <div key={c.cmd} style={{
                    padding: '8px 10px', borderRadius: 8,
                    display: 'flex', gap: 10, alignItems: 'center',
                    background: i === 0 ? t.surface2 : 'transparent',
                  }}>
                    <Icon name={c.icon} size={14} color={t.fg2} />
                    <span style={{ fontFamily: G.mono, fontSize: 12, fontWeight: 500, color: t.fg }}>{c.cmd}</span>
                    <span style={{ fontSize: 12, color: t.fg3 }}>{c.desc}</span>
                  </div>
                ))}
              </div>
            </Glass>
          </div>
        </div>
        <Composer dark={dark} value="/" />
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 8. Chat + Code Editor panel (Codex-style right panel)
// ─────────────────────────────────────────────────────────────
function ChatCodePanel({ dark }) {
  const t = dark ? G.d : G.l;
  const lines = [
    { n: 138, c: '  const token = req.cookies.session;' },
    { n: 139, c: '  if (!token) {' },
    { n: 140, c: '    // ⚠ X-Internal-Trust bypass' },
    { n: 141, c: '    if (req.headers[\'x-internal-trust\'] === \'true\') {', hl: 'del' },
    { n: 142, c: '      return next();', hl: 'del' },
    { n: 143, c: '    }', hl: 'del' },
    { n: 141, c: '    // Fixed: verify proxy chain before trust', hl: 'add' },
    { n: 142, c: '    if (isVerifiedProxy(req) && req.headers[\'x-internal-trust\']) {', hl: 'add' },
    { n: 143, c: '      return next();', hl: 'add' },
    { n: 144, c: '    }', hl: 'add' },
    { n: 145, c: '    return res.status(401).json({' },
    { n: 146, c: '      error: \'Unauthorized\',' },
    { n: 147, c: '      code: \'MISSING_SESSION\',' },
    { n: 148, c: '    });' },
    { n: 149, c: '  }' },
    { n: 150, c: '' },
    { n: 151, c: '  try {' },
    { n: 152, c: '    const payload = await verifyToken(token);' },
    { n: 153, c: '    req.user = payload;' },
    { n: 154, c: '    req.session = { id: payload.sid };' },
    { n: 155, c: '    return next();' },
    { n: 156, c: '  } catch (err) {' },
    { n: 157, c: '    logger.warn(\'Invalid session token\', { err });' },
    { n: 158, c: '    return res.status(401).json({ error: \'Invalid session\' });' },
    { n: 159, c: '  }' },
    { n: 160, c: '};' },
  ];
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Refactor auth middleware']}
        right={<><Tag variant="outline"><Icon name="git" size={11}/> main@a3f2c01</Tag></>} />}
    >
      <div style={{ height: '100%', display: 'flex' }}>
        {/* Chat (center) */}
        <div style={{ flex: 1, minWidth: 0, flexShrink: 0, borderRight: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column' }}>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 18, display: 'flex', flexDirection: 'column', gap: 14, fontSize: 13 }}>
            <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
              <div style={{ background: t.surface2, padding: '10px 14px', borderRadius: 14, lineHeight: 1.5 }}>
                Fix the X-Internal-Trust bypass in auth.ts — verify the proxy chain before trusting the header.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <GhastLogo size={20} color={t.fg} style={{ flexShrink: 0, marginTop: 2 }} />
              <div style={{ lineHeight: 1.55 }}>
                <p style={{ margin: '0 0 10px' }}>I'll patch <code style={{ fontFamily: G.mono, fontSize: 11, padding: '1px 4px', background: t.surface2, borderRadius: 4 }}>auth.ts:141-143</code>. The fix adds a <code style={{ fontFamily: G.mono, fontSize: 11, padding: '1px 4px', background: t.surface2, borderRadius: 4 }}>isVerifiedProxy()</code> check before trusting the header.</p>
                {/* Tool call cards */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 10 }}>
                  {[
                    { tool: 'read_file', arg: 'auth.ts', status: 'done', time: '12ms' },
                    { tool: 'grep', arg: 'isVerifiedProxy', status: 'done', time: '34ms' },
                    { tool: 'write_file', arg: 'auth.ts', status: 'done', time: '8ms' },
                    { tool: 'shell', arg: 'pnpm test:auth', status: 'done', time: '4.2s' },
                  ].map((tc, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', background: t.surface, border: `1px solid ${t.border}`, borderRadius: 8, fontSize: 11 }}>
                      <Icon name={tc.status === 'done' ? 'check' : 'bolt'} size={11} color={t.fg2} />
                      <span style={{ fontFamily: G.mono, fontWeight: 500 }}>{tc.tool}</span>
                      <span style={{ color: t.fg3, fontFamily: G.mono, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tc.arg}</span>
                      <span style={{ color: t.fg3, fontFamily: G.mono }}>{tc.time}</span>
                    </div>
                  ))}
                </div>
                <p style={{ margin: '0 0 6px' }}>All 14 tests pass. The diff is on the right →</p>
                <div style={{ display: 'flex', gap: 6, fontSize: 11 }}>
                  <Tag variant="outline" style={{ gap: 4 }}><Icon name="check" size={10} /> Tests pass</Tag>
                  <Tag variant="outline" style={{ gap: 4 }}><Icon name="git" size={10} /> +4 −3</Tag>
                </div>
              </div>
            </div>
          </div>
          <Composer dark={dark} value="Now open a PR with this fix" />
        </div>
        {/* Code panel (right) */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, background: dark ? '#111' : '#FAFAF9' }}>
          {/* File tabs */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 0, borderBottom: `0.5px solid ${t.border}`, padding: '0 8px', height: 36 }}>
            {[
              { name: 'auth.ts', active: true, modified: true },
              { name: 'session.ts', active: false },
              { name: 'proxy-utils.ts', active: false },
            ].map((tab) => (
              <div key={tab.name} style={{
                padding: '6px 14px', fontSize: 12, fontFamily: G.mono,
                color: tab.active ? t.fg : t.fg3, fontWeight: tab.active ? 500 : 400,
                borderBottom: tab.active ? `2px solid ${t.fg}` : '2px solid transparent',
                display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer',
              }}>
                {tab.name}
                {tab.modified && <div style={{ width: 5, height: 5, borderRadius: 3, background: t.fg }} />}
              </div>
            ))}
            <div style={{ flex: 1 }} />
            <div style={{ display: 'flex', gap: 4 }}>
              <button style={{ width: 24, height: 24, borderRadius: 6, background: 'transparent', border: 'none', color: t.fg3, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="copy" size={12} /></button>
              <button style={{ width: 24, height: 24, borderRadius: 6, background: 'transparent', border: 'none', color: t.fg3, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="download" size={12} /></button>
            </div>
          </div>
          {/* Code lines */}
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', fontFamily: G.mono, fontSize: 12, lineHeight: 1.65 }}>
            {lines.map((l, i) => {
              const bgMap = { del: dark ? 'rgba(220,50,50,0.12)' : 'rgba(220,50,50,0.07)', add: dark ? 'rgba(50,180,80,0.12)' : 'rgba(50,180,80,0.07)' };
              const prefixMap = { del: '−', add: '+' };
              return (
                <div key={i} style={{
                  display: 'flex', padding: '0 16px', height: 22, alignItems: 'center',
                  background: bgMap[l.hl] || 'transparent', overflow: 'hidden',
                }}>
                  <span style={{ width: 40, textAlign: 'right', color: t.fg4, fontSize: 11, flexShrink: 0, userSelect: 'none', paddingRight: 12 }}>{l.n}</span>
                  <span style={{ width: 16, textAlign: 'center', color: l.hl === 'del' ? '#d44' : l.hl === 'add' ? '#3a3' : 'transparent', flexShrink: 0, fontWeight: 600 }}>{prefixMap[l.hl] || ' '}</span>
                  <span style={{ color: t.fg, whiteSpace: 'pre' }}>{l.c}</span>
                </div>
              );
            })}
          </div>
          {/* Status bar */}
          <div style={{ height: 26, borderTop: `0.5px solid ${t.border}`, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 14, fontSize: 10, fontFamily: G.mono, color: t.fg3 }}>
            <span>TypeScript</span>
            <span>UTF-8</span>
            <span>LF</span>
            <span style={{ flex: 1 }} />
            <span>Ln 142, Col 58</span>
            <span>+4 −3</span>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 9. Chat + Markdown preview panel
// ─────────────────────────────────────────────────────────────
function ChatMarkdownPanel({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Refactor auth middleware', 'audit-report.md']}
        right={<div style={{ display: 'flex', gap: 4 }}>
          {['Preview', 'Source'].map((m, i) => (
            <div key={m} style={{ padding: '4px 10px', fontSize: 11, fontWeight: 500, borderRadius: 6, background: i === 0 ? t.surface2 : 'transparent', border: `1px solid ${i === 0 ? t.border : 'transparent'}`, color: i === 0 ? t.fg : t.fg3, cursor: 'pointer' }}>{m}</div>
          ))}
          <div style={{ width: 1, height: 18, background: t.border, margin: '0 4px' }} />
          <Button variant="ghost" size="sm" icon={<Icon name="download" size={13}/>}>Export</Button>
        </div>} />}
    >
      <div style={{ height: '100%', display: 'flex' }}>
        {/* Chat (compressed left) */}
        <div style={{ width: 380, flexShrink: 0, borderRight: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column' }}>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 18, display: 'flex', flexDirection: 'column', gap: 14, fontSize: 13 }}>
            <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
              <div style={{ background: t.surface2, padding: '10px 12px', borderRadius: 14 }}>Write a full audit report from this thread.</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <GhastLogo size={20} color={t.fg} style={{ flexShrink: 0, marginTop: 2 }} />
              <div style={{ lineHeight: 1.55 }}>
                <p style={{ margin: '0 0 8px' }}>Generated the report with severity table, timeline, and recommendations.</p>
                <div style={{ display: 'flex', gap: 6, fontSize: 11 }}>
                  <Tag variant="outline" style={{ gap: 4 }}><Icon name="file" size={10} /> audit-report.md</Tag>
                  <Tag variant="outline" style={{ gap: 4 }}>2.8 KB</Tag>
                </div>
              </div>
            </div>
            <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
              <div style={{ background: t.surface2, padding: '10px 12px', borderRadius: 14 }}>Add a remediation timeline table</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <GhastLogo size={20} color={t.fg} style={{ flexShrink: 0, marginTop: 2 }} />
              <div style={{ lineHeight: 1.55 }}>Done — added at the bottom. See updated preview →</div>
            </div>
          </div>
          <Composer
            dark={dark}
            placeholder="Ask about this document…"
            compact
            contextFile="audit-report.md"
            permissionMode="confirm"
            contextUsed={62}
          />
        </div>
        {/* Markdown preview (right) */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: '48px 64px', maxWidth: 760, margin: '0 auto', width: '100%' }}>
            <div style={{ fontSize: 11, fontFamily: G.mono, color: t.fg3, letterSpacing: 0.6, marginBottom: 6 }}>GENERATED · 2026-05-02 · V2</div>
            <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.6, margin: '0 0 6px' }}>Auth Middleware Audit Report</h1>
            <p style={{ fontSize: 14, color: t.fg2, margin: '0 0 24px', lineHeight: 1.6 }}>
              Security audit of <code style={{ fontFamily: G.mono, fontSize: 12, padding: '1px 5px', background: t.surface2, borderRadius: 4 }}>apps/web/middleware</code> — conducted by Ghast AI on behalf of Liu Wei.
            </p>

            <h2 style={{ fontSize: 18, fontWeight: 600, margin: '0 0 12px', letterSpacing: -0.3 }}>Severity Summary</h2>
            <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 10, overflow: 'hidden', marginBottom: 24 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr 120px', fontSize: 11, fontFamily: G.mono, color: t.fg3, padding: '8px 14px', borderBottom: `1px solid ${t.border}`, letterSpacing: 0.5 }}>
                <span>SEV</span><span>FINDING</span><span>FILE</span>
              </div>
              {[
                ['HIGH', 'X-Internal-Trust header bypass', 'auth.ts:142'],
                ['HIGH', 'admin=true cookie skips session check', 'session.ts:88'],
                ['LOW', 'Verbose 500 error leaks path info', 'errors.ts:31'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr 120px', padding: '10px 14px', borderTop: i === 0 ? 'none' : `1px solid ${t.border}`, fontSize: 13, alignItems: 'center' }}>
                  <Tag variant={r[0] === 'HIGH' ? 'solid' : 'outline'} style={{ height: 20, fontSize: 10, justifySelf: 'start' }}>{r[0]}</Tag>
                  <span>{r[1]}</span>
                  <span style={{ fontFamily: G.mono, fontSize: 11, color: t.fg3 }}>{r[2]}</span>
                </div>
              ))}
            </div>

            <h2 style={{ fontSize: 18, fontWeight: 600, margin: '0 0 12px', letterSpacing: -0.3 }}>Remediation Timeline</h2>
            <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 10, overflow: 'hidden', marginBottom: 24 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 100px 100px', fontSize: 11, fontFamily: G.mono, color: t.fg3, padding: '8px 14px', borderBottom: `1px solid ${t.border}`, letterSpacing: 0.5 }}>
                <span>ACTION</span><span>TEAM</span><span>ETA</span>
              </div>
              {[
                ['Remove X-Internal-Trust bypass', 'Backend', 'May 3'],
                ['Add proxy chain verification', 'Backend', 'May 4'],
                ['Patch admin cookie logic', 'Backend', 'May 5'],
                ['Pen-test re-run', 'Security', 'May 8'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 100px 100px', padding: '10px 14px', borderTop: i === 0 ? 'none' : `1px solid ${t.border}`, fontSize: 13 }}>
                  <span>{r[0]}</span>
                  <span style={{ color: t.fg2 }}>{r[1]}</span>
                  <span style={{ fontFamily: G.mono, fontSize: 11, color: t.fg3 }}>{r[2]}</span>
                </div>
              ))}
            </div>

            <h2 style={{ fontSize: 18, fontWeight: 600, margin: '0 0 8px', letterSpacing: -0.3 }}>Detailed Findings</h2>
            <p style={{ fontSize: 13.5, color: t.fg2, lineHeight: 1.65, margin: '0 0 12px' }}>
              <strong>1. X-Internal-Trust bypass</strong> — The middleware trusts a user-supplied header without validating the request origin.
            </p>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 10. Chat + Terminal output panel
// ─────────────────────────────────────────────────────────────
function ChatTerminalPanel({ dark }) {
  const t = dark ? G.d : G.l;
  const termBg = dark ? '#111' : '#FAFAF9';
  const termFg = dark ? '#E8E8E8' : '#1A1A1A';
  const termGreen = dark ? '#3ECF8E' : '#16A34A';
  const termRed = dark ? '#EF4444' : '#DC2626';
  const termYellow = dark ? '#F5A623' : '#CA8A04';
  const termGray = dark ? '#666' : '#999';
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Refactor auth middleware']}
        right={<Tag variant="outline"><Icon name="terminal" size={11}/> Running…</Tag>} />}
    >
      <div style={{ height: '100%', display: 'flex' }}>
        {/* Chat (left) */}
        <div style={{ width: 420, flexShrink: 0, borderRight: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column' }}>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 18, display: 'flex', flexDirection: 'column', gap: 14, fontSize: 13 }}>
            <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
              <div style={{ background: t.surface2, padding: '10px 14px', borderRadius: 14 }}>Run the auth test suite and show me the output</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <GhastLogo size={20} color={t.fg} style={{ flexShrink: 0, marginTop: 2 }} />
              <div style={{ lineHeight: 1.55 }}>
                <p style={{ margin: '0 0 8px' }}>Running <code style={{ fontFamily: G.mono, fontSize: 11, padding: '1px 4px', background: t.surface2, borderRadius: 4 }}>pnpm test:auth</code> — output is streaming on the right.</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  {[
                    { tool: 'shell', arg: 'pnpm test:auth', status: 'running' },
                  ].map((tc, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', background: t.surface, border: `1px solid ${t.border}`, borderRadius: 8, fontSize: 11 }}>
                      <div style={{ width: 11, height: 11, border: `1.5px solid ${t.fg2}`, borderTopColor: 'transparent', borderRadius: 6, animation: 'gh-spin 0.8s linear infinite' }} />
                      <span style={{ fontFamily: G.mono, fontWeight: 500 }}>{tc.tool}</span>
                      <span style={{ color: t.fg3, fontFamily: G.mono }}>{tc.arg}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <Composer dark={dark} thinking />
        </div>
        {/* Terminal (right) */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, background: termBg, color: termFg }}>
          <div style={{ height: 36, borderBottom: `1px solid ${t.border}`, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 10, fontSize: 12 }}>
            <Icon name="terminal" size={13} color={termGray} />
            <span style={{ fontFamily: G.mono, color: termGray }}>pnpm test:auth</span>
            <span style={{ flex: 1 }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: G.mono, fontSize: 10, color: termYellow }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: termYellow, animation: 'gh-pulse 1s infinite' }} />
              Running · 4.2s
            </div>
          </div>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 16, fontFamily: G.mono, fontSize: 12, lineHeight: 1.7 }}>
            <div style={{ color: termGray }}>$ pnpm test:auth</div>
            <div style={{ color: termGray }}></div>
            <div><span style={{ color: termGreen }}>PASS</span>  auth/session.test.ts</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ creates session from valid credentials (12 ms)</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ rejects expired token (3 ms)</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ rejects tampered token (2 ms)</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ refreshes token before expiry (8 ms)</div>
            <div style={{ marginTop: 8 }}><span style={{ color: termGreen }}>PASS</span>  auth/middleware.test.ts</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ blocks request without session (4 ms)</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ allows request with valid session (3 ms)</div>
            <div style={{ color: termGreen, paddingLeft: 16 }}>✓ rejects untrusted X-Internal-Trust header (5 ms) ← NEW</div>
            <div style={{ color: termGreen, paddingLeft: 16 }}>✓ allows trusted proxy with X-Internal-Trust (4 ms) ← NEW</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ blocks admin=true cookie without valid session (3 ms)</div>
            <div style={{ marginTop: 8 }}><span style={{ color: termGreen }}>PASS</span>  auth/proxy-utils.test.ts</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ identifies verified proxy IP (2 ms)</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ rejects spoofed proxy (1 ms)</div>
            <div style={{ color: termGray, paddingLeft: 16 }}>✓ handles missing x-forwarded-for (2 ms)</div>
            <div style={{ marginTop: 8 }}><span style={{ color: termRed }}>FAIL</span>  auth/errors.test.ts</div>
            <div style={{ color: termRed, paddingLeft: 16 }}>✗ masks file paths in 500 response (14 ms)</div>
            <div style={{ color: termRed, paddingLeft: 24, fontSize: 11 }}>Expected: /[masked]/</div>
            <div style={{ color: termRed, paddingLeft: 24, fontSize: 11 }}>Received: "/apps/web/middleware/errors.ts"</div>
            <div style={{ marginTop: 12, color: termGray }}>─────────────────────────────────────</div>
            <div style={{ marginTop: 4 }}>
              Test Suites: <span style={{ color: termGreen }}>3 passed</span>, <span style={{ color: termRed }}>1 failed</span>, 4 total
            </div>
            <div>
              Tests: <span style={{ color: termGreen }}>13 passed</span>, <span style={{ color: termRed }}>1 failed</span>, 14 total
            </div>
            <div style={{ color: termGray }}>Time: 4.2s</div>
            <div style={{ marginTop: 8 }}>
              <span style={{ display: 'inline-block', width: 8, height: 8, background: termFg, borderRadius: 4, animation: 'gh-blink 1s infinite' }} />
            </div>
          </div>
        </div>
      </div>
      <style dangerouslySetInnerHTML={{__html: `@keyframes gh-spin{to{transform:rotate(360deg)}}`}} />
    </AppShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 11. Chat + JSON / data preview panel
// ─────────────────────────────────────────────────────────────
function ChatDataPanel({ dark }) {
  const t = dark ? G.d : G.l;
  const jsonLines = [
    { d: 0, k: '{' },
    { d: 1, k: '"audit"', v: ': {' },
    { d: 2, k: '"date"', v: ': "2026-05-02",' },
    { d: 2, k: '"repo"', v: ': "apps/web",' },
    { d: 2, k: '"findings"', v: ': [' },
    { d: 3, k: '{' },
    { d: 4, k: '"severity"', v: ': "high",' },
    { d: 4, k: '"title"', v: ': "X-Internal-Trust bypass",' },
    { d: 4, k: '"file"', v: ': "auth.ts",' },
    { d: 4, k: '"line"', v: ': 142' },
    { d: 3, k: '},' },
    { d: 3, k: '{' },
    { d: 4, k: '"severity"', v: ': "high",' },
    { d: 4, k: '"title"', v: ': "admin cookie bypass",' },
    { d: 4, k: '"file"', v: ': "session.ts",' },
    { d: 4, k: '"line"', v: ': 88' },
    { d: 3, k: '},' },
    { d: 3, k: '{' },
    { d: 4, k: '"severity"', v: ': "low",' },
    { d: 4, k: '"title"', v: ': "path info leak",' },
    { d: 4, k: '"file"', v: ': "errors.ts",' },
    { d: 4, k: '"line"', v: ': 31' },
    { d: 3, k: '}' },
    { d: 2, k: '],' },
    { d: 2, k: '"testsRun"', v: ': 14,' },
    { d: 2, k: '"testsPassed"', v: ': 13,' },
    { d: 2, k: '"testsFailed"', v: ': 1' },
    { d: 1, k: '}' },
    { d: 0, k: '}' },
  ];
  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Refactor auth middleware', 'audit-result.json']}
        right={<div style={{ display: 'flex', gap: 4 }}>
          {['Tree', 'Raw'].map((m, i) => (
            <div key={m} style={{ padding: '4px 10px', fontSize: 11, fontWeight: 500, borderRadius: 6, background: i === 0 ? t.surface2 : 'transparent', border: `1px solid ${i === 0 ? t.border : 'transparent'}`, color: i === 0 ? t.fg : t.fg3 }}>{m}</div>
          ))}
        </div>} />}
    >
      <div style={{ height: '100%', display: 'flex' }}>
        <div style={{ width: 380, flexShrink: 0, borderRight: `0.5px solid ${t.border}`, display: 'flex', flexDirection: 'column' }}>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 18, display: 'flex', flexDirection: 'column', gap: 14, fontSize: 13 }}>
            <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
              <div style={{ background: t.surface2, padding: '10px 12px', borderRadius: 14 }}>Export the audit as structured JSON</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <GhastLogo size={20} color={t.fg} style={{ flexShrink: 0, marginTop: 2 }} />
              <div style={{ lineHeight: 1.55 }}>
                <p style={{ margin: '0 0 6px' }}>Here's the structured output — includes findings, test results, and metadata.</p>
                <Tag variant="outline" style={{ gap: 4 }}><Icon name="file" size={10} /> audit-result.json · 1.2 KB</Tag>
              </div>
            </div>
          </div>
          <Composer
            dark={dark}
            placeholder="Ask about this data…"
            compact
            contextFile="audit-result.json"
            permissionMode="plan"
            contextUsed={28}
          />
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, background: dark ? '#111' : '#FAFAF9' }}>
          <div className="gh-scroll" style={{ flex: 1, overflow: 'auto', padding: 16, fontFamily: G.mono, fontSize: 12, lineHeight: 1.65 }}>
            {jsonLines.map((l, i) => (
              <div key={i} style={{ display: 'flex', paddingLeft: l.d * 20, height: 22, alignItems: 'center' }}>
                <span style={{ color: l.v !== undefined ? '#6A9955' : t.fg }}>{l.k}</span>
                {l.v && <span style={{ color: l.v.includes('"') ? '#CE9178' : '#B5CEA8' }}>{l.v}</span>}
              </div>
            ))}
          </div>
          <div style={{ height: 26, borderTop: `0.5px solid ${t.border}`, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 14, fontSize: 10, fontFamily: G.mono, color: t.fg3 }}>
            <span>JSON</span><span>UTF-8</span><span style={{ flex: 1 }} /><span>29 lines · 1.2 KB</span>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

Object.assign(window, { ChatEmpty, ChatComposing, ChatThinking, ChatActive, ChatArtifact, ChatSearch, ChatSlashMenu, ChatCodePanel, ChatMarkdownPanel, ChatTerminalPanel, ChatDataPanel, RightPanelTools, RightPanelFiles });