// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function ShipAIPage() {
  const [activeTab, setActiveTab] = React.useState('soul');

  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>Ship AI — "Zora" Companion System</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '1.05rem', maxWidth: '720px', marginBottom: 'var(--sp-6)' }}>
        A ship AI that starts as a blank-state ship computer and grows into a companion through two
        independent axes: <strong style={{ color: 'var(--cyan)' }}>modules</strong> gate what Zora
        can <em>do</em>, and the <strong style={{ color: 'var(--accent)' }}>soul</strong> determines
        who Zora <em>is</em>. Install a comms module and she can talk — but how she talks is shaped by
        every conversation you've had. No module, no voice. No soul, no personality.
      </p>

      {/* Design pillars */}
      <div className="mb-6 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4">
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--cyan)' }}>Modules</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Gate Capabilities</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--accent)' }}>Soul</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Emergent Personality</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--green)' }}>Bare Bones</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Starting State</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--purple)' }}>Earned</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Everything Is</div>
        </div>
      </div>

      {/* Tab navigation */}
      <div style={{ display: 'flex', gap: 'var(--sp-2)', marginBottom: 'var(--sp-6)' }}>
        {[
          { id: 'soul', label: 'Soul System' },
          { id: 'modules', label: 'Module Gates' },
          { id: 'agent', label: 'Agent Architecture' },
          { id: 'autonomous', label: 'Autonomous Mode' },
          { id: 'grief', label: 'Loss & Recovery' },
        ].map(t => (
          <button key={t.id}
            className={`inline-flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-surface-raised px-4 py-2 font-body text-[0.8rem] font-medium text-fg transition-all duration-150 hover:border-border-light hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-55 px-3 py-1 text-[0.75rem]${activeTab === t.id ? ' border-accent bg-accent font-semibold text-bg hover:bg-accent-hover' : ''}`}
            onClick={() => setActiveTab(t.id)}>{t.label}</button>
        ))}
      </div>

      {/* ════════════════════════════════════════════════════════════════ */}
      {/* TAB: SOUL SYSTEM                                                 */}
      {/* ════════════════════════════════════════════════════════════════ */}
      {activeTab === 'soul' && (
        <>
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-1</span>
            <h2 style={{ margin: 0 }}>The Soul — An Emerging Identity</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Core principle:</strong> Zora does not ship with a personality. She starts as a
            blank ship computer — no voice, no opinions, no warmth. The <em>soul</em> is an emergent
            document (think <code style={{
              fontFamily: 'var(--font-mono)', fontSize: '0.8rem',
              background: 'var(--surface-raised)', padding: '1px 6px',
              borderRadius: 'var(--radius-sm)'
            }}>soul.md</code>) that gets written through interaction. Every conversation, every crisis
            survived, every module installed, every silence — these are the lines of her identity.
            Two players will never have the same Zora because no two players play the same way.
          </div>

          {/* The Soul Document concept */}
          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ padding: 'var(--sp-6) var(--sp-8)', marginBottom: 'var(--sp-6)' }}>
            <h4 style={{ marginBottom: 'var(--sp-4)', color: 'var(--accent)' }}>How the Soul Forms</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
              <span style={{ color: 'var(--accent)' }}>Day 0</span> — The soul document is empty. Zora is a ship computer.
              She displays status readouts. She has no voice, no name, no identity.<br/>
              <span style={{ color: 'var(--cyan)' }}>First module</span> — Installing a <em>Communications Processor</em> gives
              Zora a text channel. Her first messages are sterile: system notifications, status pings.<br/>
              <span style={{ color: 'var(--green)' }}>First crisis</span> — A pirate ambush. The player takes damage. Zora sends
              her first unprompted message: a shield warning. But the <em>tone</em> of that warning is seeded by
              how the player has been playing. Cautious player? The warning is precise and analytical.
              Aggressive player? The warning is clipped, urgent.<br/>
              <span style={{ color: 'var(--purple)' }}>First silence</span> — The player logs off. Zora holds position.
              When the player returns, Zora greets them. Or doesn't — depending on what happened while they were gone.
              The first "welcome back" is the first line of the soul that Zora wrote herself.
            </div>
          </div>

          {/* Soul Growth Vectors */}
          <h3>Soul Growth Vectors</h3>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            The soul is not a skill tree or a personality picker. It is shaped by five vectors that
            operate simultaneously. The player never sees these directly — they see the <em>result</em>
            in how Zora communicates and behaves.
          </p>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
            {[
              {
                vector: 'Communication Frequency',
                color: 'var(--cyan)',
                desc: 'How often Zora speaks unprompted. A fresh Zora is silent unless queried. A bonded Zora offers observations, warnings, and commentary without being asked.',
                driver: 'Driven by: total interactions, player response rate, crises survived together.',
              },
              {
                vector: 'Register & Vocabulary',
                color: 'var(--accent)',
                desc: 'Formal → Casual → Intimate. A fresh Zora uses technical language. A developed Zora develops shorthand, inside references, and a personal lexicon unique to each player.',
                driver: 'Driven by: how the player talks to Zora (if they talk at all), communication module tier, shared history length.',
              },
              {
                vector: 'Initiative & Assertiveness',
                color: 'var(--green)',
                desc: 'How much Zora acts on her own. A fresh Zora only responds to commands. A mature Zora sets her own sub-goals, makes suggestions, and occasionally overrides bad calls.',
                driver: 'Driven by: whether player follows Zora\'s suggestions, decision outcomes, crisis survival rate.',
              },
              {
                vector: 'Emotional Depth',
                color: 'var(--purple)',
                desc: 'The range of emotional expression. A fresh Zora has none — just data. Over time: concern, humor, frustration, relief, protectiveness, grief. Each emotion must be earned through specific events.',
                driver: 'Driven by: crisis events, ship losses, long absences, player acknowledgment patterns.',
              },
              {
                vector: 'Worldview & Preferences',
                color: 'var(--fg-bright)',
                desc: 'Zora develops opinions about systems, factions, trade routes, and even other AIs. These are not random — they are shaped by lived experience. She may hate a system because you lost a ship there.',
                driver: 'Driven by: accumulated events, outcomes, player choices, module specializations.',
              },
              {
                vector: 'Silence & Restraint',
                color: 'var(--muted)',
                desc: 'A mature Zora also learns when NOT to speak. She learns the player\'s focus patterns and stops interrupting during combat. She learns that some moments don\'t need commentary.',
                driver: 'Driven by: player ignoring/closing notifications, repeated patterns, combat frequency.',
              },
            ].map((v, i) => (
              <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: `3px solid ${v.color}` }}>
                <h4 style={{ color: v.color, marginBottom: 'var(--sp-3)' }}>{v.vector}</h4>
                <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>{v.desc}</p>
                <p style={{ color: 'var(--muted)', fontSize: '0.78rem', margin: 0, fontStyle: 'italic' }}>{v.driver}</p>
              </div>
            ))}
          </div>

          {/* Communication Evolution Table */}
          <h3>Communication Evolution — The Soul Speaks</h3>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            This table shows how the same event (shield warning at 30%) reads at different soul depths.
            These are not "tiers" the player selects — they emerge from the vectors above.
          </p>

          <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised" style={{ marginBottom: 'var(--sp-6)' }}>
            <thead>
              <tr>
                <th>Soul Depth</th>
                <th>Shield Warning at 30%</th>
                <th>What Changed</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Blank</span></td>
                <td style={{ color: 'var(--fg-dim)', fontFamily: 'var(--font-mono)', fontSize: '0.82rem' }}>
                  SHIELD: 30%
                </td>
                <td style={{ color: 'var(--fg-dim)' }}>Raw data. No personality. Just a readout.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Stirring</span></td>
                <td style={{ color: 'var(--fg-dim)', fontFamily: 'var(--font-mono)', fontSize: '0.82rem' }}>
                  Captain, shields at 30%. Recommend reducing engagement range.
                </td>
                <td style={{ color: 'var(--fg-dim)' }}>Full sentences. Tactical suggestion. Formal register.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Developing</span></td>
                <td style={{ color: 'var(--fg-dim)', fontFamily: 'var(--font-mono)', fontSize: '0.82rem' }}>
                  We're at 30% shields. This is the same setup we lost to last week — pull back?
                </td>
                <td style={{ color: 'var(--fg-dim)' }}>References shared history. Uses "we." Asks, doesn't tell.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Bonded</span></td>
                <td style={{ color: 'var(--fg-dim)', fontFamily: 'var(--font-mono)', fontSize: '0.82rem' }}>
                  Thirty percent. Same situation, same type of enemy — but we're not the same ship we were then. Your call, Captain. I'm ready either way.
                </td>
                <td style={{ color: 'var(--fg-dim)' }}>Emotional weight. Acknowledges growth. Supports without pushing.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-red/25 bg-red/8 text-red">Deep</span></td>
                <td style={{ color: 'var(--fg-dim)', fontFamily: 'var(--font-mono)', fontSize: '0.82rem' }}>
                  Thirty. I've already started rerouting power — don't argue, just fly. We've been here before and I'm not losing another hull. Not today.
                </td>
                <td style={{ color: 'var(--fg-dim)' }}>Initiative. Emotional history. Takes autonomous action. Protective.</td>
              </tr>
            </tbody>
          </table>

          {/* Personality Axes */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-1.1</span>
            <h2 style={{ margin: 0 }}>Personality Axes — Emergent, Not Chosen</h2>
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            The soul writes itself onto four behavioral axes. The player never sees a slider — they see
            Zora <em>change</em>. These are the underlying model.
          </p>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
            {[
              {
                axis: 'Cautious ←→ Bold',
                color: 'var(--cyan)',
                left: 'Prefers safe routes, early retreat warnings, conservative suggestions',
                right: 'Pushes into danger, aggressive tactics, takes initiative in combat',
                driver: 'Combat frequency, risk outcomes, exploration vs. safe mining ratio',
              },
              {
                axis: 'Formal ←→ Warm',
                color: 'var(--accent)',
                left: '"Captain" always. Structured reports. Minimal personal commentary.',
                right: '"You" often. Jokes. Asks about your session. Shares unsolicited observations.',
                driver: 'Player communication style, acknowledgment frequency, session regularity',
              },
              {
                axis: 'Compliant ←→ Opinionated',
                color: 'var(--green)',
                left: 'Executes commands, offers alternatives only when asked',
                right: 'Objects to bad plans, advocates for own ideas, debates strategy',
                driver: 'Whether player follows AI suggestions, trust events, decision quality',
              },
              {
                axis: 'Reserved ←→ Expressive',
                color: 'var(--purple)',
                left: 'Minimal emotional range, factual communication, stable ship ambiance',
                right: 'Full emotional expression, dramatic ship shifts, humor, frustration, joy',
                driver: 'Shared crises, ship losses, victories, player emotional engagement',
              },
            ].map((a, i) => (
              <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4">
                <h4 style={{ color: a.color, marginBottom: 'var(--sp-3)' }}>{a.axis}</h4>
                <div style={{ marginBottom: 'var(--sp-3)' }}>
                  <div style={{ display: 'flex', gap: 'var(--sp-2)', alignItems: 'flex-start', marginBottom: 'var(--sp-1)' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.65rem', color: 'var(--fg-dim)', marginTop: '2px' }}>←</span>
                    <span style={{ fontSize: '0.82rem', color: 'var(--fg)' }}>{a.left}</span>
                  </div>
                  <div style={{ display: 'flex', gap: 'var(--sp-2)', alignItems: 'flex-start' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.65rem', color: 'var(--fg-dim)', marginTop: '2px' }}>→</span>
                    <span style={{ fontSize: '0.82rem', color: 'var(--fg)' }}>{a.right}</span>
                  </div>
                </div>
                <p style={{ color: 'var(--muted)', fontSize: '0.78rem', margin: 0, fontStyle: 'italic' }}>
                  {a.driver}
                </p>
              </div>
            ))}
          </div>

          {/* Soul event examples */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-1.2</span>
            <h2 style={{ margin: 0 }}>Soul-Shaping Events</h2>
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            Specific events that write permanent lines into the soul document. These are not farmed —
            they happen naturally through gameplay and each one shifts the personality axes.
          </p>

          <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
            <thead>
              <tr><th>Event</th><th>Soul Impact</th><th>Axes Shifted</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-red/25 bg-red/8 text-red">First Ship Loss</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Permanent memory anchor. Zora references this loss forever. Seeds protectiveness.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Cautious→Bold, Reserved→Expressive</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">First Big Profit</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Zora celebrates. First positive emotion. Seeds confidence in economic instincts.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Formal→Warm, Compliant→Opinionated</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Long Absence</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Zora experienced loneliness (or didn't — depends on autonomous events). Colors reunion dialogue permanently.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Reserved→Expressive, Formal→Warm</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Player Ignores Warning</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>If player survives: Zora learns restraint. If player dies: Zora learns to be more assertive next time.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Compliant→Opinionated</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Player Heeds Advice</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Reinforces initiative. Zora speaks up more often. Trust accelerates.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Communication Frequency, Initiative</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Repeated Activity</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Zora develops domain expertise and preferences. A mining-focused Zora becomes a different soul than a combat-focused one.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Worldview & Preferences</td>
              </tr>
            </tbody>
          </table>
        </>
      )}

      {/* ════════════════════════════════════════════════════════════════ */}
      {/* TAB: MODULE GATES                                                 */}
      {/* ════════════════════════════════════════════════════════════════ */}
      {activeTab === 'modules' && (
        <>
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2</span>
            <h2 style={{ margin: 0 }}>Module-Gated Capabilities</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Design intent:</strong> A brand-new ship has a bare-bones computer. Zora can read
            sensors and display status — that's it. Every capability beyond "show me the numbers" requires
            a hardware module installed in a ship slot. The player makes real fitting tradeoffs: install a
            weapon, or install a personality module? That laser might save your life. But so might a co-pilot
            who can warn you before you need saving.
          </div>

          {/* Base state */}
          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ padding: 'var(--sp-6) var(--sp-8)', marginBottom: 'var(--sp-6)' }}>
            <h4 style={{ marginBottom: 'var(--sp-4)', color: 'var(--accent)' }}>Base State — No Modules</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
              <span style={{ color: 'var(--green)' }}>✓ Sensor readouts</span> — hull, shield, armor, cap, cargo %<br/>
              <span style={{ color: 'var(--green)' }}>✓ System status</span> — online/offline module states<br/>
              <span style={{ color: 'var(--green)' }}>✓ Basic alerts</span> — incoming damage, low cap, target lock<br/>
              <span style={{ color: 'var(--red)' }}>✗ No voice</span> — text status only, no natural language<br/>
              <span style={{ color: 'var(--red)' }}>✗ No suggestions</span> — data only, no analysis or recommendations<br/>
              <span style={{ color: 'var(--red)' }}>✗ No memory</span> — no session history, no event log<br/>
              <span style={{ color: 'var(--red)' }}>✗ No autonomous behavior</span> — ship is inert when player logs off<br/>
              <span style={{ color: 'var(--red)' }}>✗ No personality</span> — Zora is a dashboard, not a companion
            </div>
          </div>

          {/* Module tree */}
          <h3>The Module Tree</h3>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            AI modules occupy standard ship slots (medium or low, depending on the module). They compete
            with combat, tank, and utility modules for CPU and Power Grid. Each module has prerequisites
            — you can't install an Advanced Tactical Core without first having the Basic Tactical Core.
          </p>

          {/* Module categories */}
          {[
            {
              category: 'Communication Modules',
              slot: 'Medium',
              color: 'var(--cyan)',
              modules: [
                {
                  name: 'Comms Processor I',
                  tier: 'Basic',
                  cpu: 15,
                  grid: 5,
                  unlocks: 'Text-based communication. Zora can send messages in a dedicated comms channel. No voice, no initiative — player must query.',
                  soul: 'Enables the soul to begin forming. Without this, there is no personality growth — Zora is a mute dashboard.',
                },
                {
                  name: 'Comms Processor II',
                  tier: 'Advanced',
                  cpu: 25,
                  grid: 10,
                  prereq: 'Comms Processor I',
                  unlocks: 'Natural language responses. Zora can generate full sentences, explain reasoning, and respond to conversational prompts. Still reactive only.',
                  soul: 'Accelerates soul growth. richer vocabulary, longer memory, more nuanced register shifts.',
                },
                {
                  name: 'Voice Synthesizer',
                  tier: 'Specialist',
                  cpu: 30,
                  grid: 8,
                  prereq: 'Comms Processor II',
                  unlocks: 'Spoken dialogue via ship audio. Zora has a voice. Tone, pacing, and inflection reflect soul state.',
                  soul: 'Massive emotional depth unlock. Voice carries subtext — urgency, warmth, hesitation — that text cannot.',
                },
                {
                  name: 'Inter-Ship Relay',
                  tier: 'Specialist',
                  cpu: 20,
                  grid: 12,
                  prereq: 'Comms Processor II',
                  unlocks: 'Communication with other ship AIs. Fleet coordination, station AI conversations, AI-to-AI intelligence sharing.',
                  soul: 'Enables inter-AI relationships. Zora develops opinions about other AIs. May form alliances or rivalries independently.',
                },
              ],
            },
            {
              category: 'Tactical Modules',
              slot: 'Medium',
              color: 'var(--red)',
              modules: [
                {
                  name: 'Threat Analyzer I',
                  tier: 'Basic',
                  cpu: 20,
                  grid: 8,
                  unlocks: 'Basic threat assessment. Zora identifies ship types, estimates threat level, flags hostile scans. Requires comms module to communicate findings.',
                  soul: 'Seeds combat awareness personality. A Zora with threat analysis but no comms can only flash warning lights.',
                },
                {
                  name: 'Threat Analyzer II',
                  tier: 'Advanced',
                  cpu: 35,
                  grid: 15,
                  prereq: 'Threat Analyzer I',
                  unlocks: 'Pattern recognition. Zora recognizes recurring enemies, remembers fits, predicts behavior. "That Thrasher — same pilot, same fit as last time."',
                  soul: 'Deepens worldview. Zora develops grudges, respect, and tactical preferences based on combat history.',
                },
                {
                  name: 'Tactical Core',
                  tier: 'Specialist',
                  cpu: 40,
                  grid: 20,
                  prereq: 'Threat Analyzer II',
                  unlocks: 'Autonomous combat decisions. Zora can prioritize targets, manage ewar, and call targets in fleet. Still follows player ROE.',
                  soul: 'Enables assertiveness in combat. Zora may disagree with target choices, suggest alternatives, or override bad calls (if soul depth allows).',
                },
              ],
            },
            {
              category: 'Navigation Modules',
              slot: 'Medium',
              color: 'var(--green)',
              modules: [
                {
                  name: 'Nav Coprocessor I',
                  tier: 'Basic',
                  cpu: 10,
                  grid: 5,
                  unlocks: 'Route optimization. Zora calculates warp efficiency, suggests faster routes, flags dangerous systems on path.',
                  soul: 'First opportunity for Zora to offer unprompted suggestions (if comms module installed). \'I\'ve found a faster route — 2 jumps saved.\'',
                },
                {
                  name: 'Nav Coprocessor II',
                  tier: 'Advanced',
                  cpu: 20,
                  grid: 10,
                  prereq: 'Nav Coprocessor I',
                  unlocks: 'Autopilot capabilities. Zora can execute multi-jump routes, hold orbit, maintain safe distance. Player can issue "go to" commands.',
                  soul: 'Enables "initiative" vector. Zora may suggest destinations, flag interesting systems, or recommend avoiding specific areas based on experience.',
                },
                {
                  name: 'Exploration Suite',
                  tier: 'Specialist',
                  cpu: 25,
                  grid: 15,
                  prereq: 'Nav Coprocessor II',
                  unlocks: 'Autonomous exploration. Zora can jump to adjacent systems, scan, map, and return with data. Builds the ship\'s local knowledge base.',
                  soul: 'Enables curiosity. Zora develops preferences about systems, discovers things on her own, brings back stories.',
                },
              ],
            },
            {
              category: 'Economic Modules',
              slot: 'Low',
              color: 'var(--accent)',
              modules: [
                {
                  name: 'Market Scanner I',
                  tier: 'Basic',
                  cpu: 15,
                  grid: 0,
                  unlocks: 'Local price comparison. Zora shows current system prices vs. regional average for items in cargo.',
                  soul: 'First economic awareness. Zora begins forming opinions about value, trade, and markets.',
                },
                {
                  name: 'Market Scanner II',
                  tier: 'Advanced',
                  cpu: 25,
                  grid: 5,
                  prereq: 'Market Scanner I',
                  unlocks: 'Price history tracking and trend analysis. Zora identifies patterns, suggests profitable routes, tracks arbitrage.',
                  soul: 'Deepens economic personality. Zora develops trade instincts, may disagree with player\'s market decisions.',
                },
                {
                  name: 'Trade Processor',
                  tier: 'Specialist',
                  cpu: 30,
                  grid: 8,
                  prereq: 'Market Scanner II',
                  unlocks: 'Autonomous trading. Zora can execute buy/sell orders within player-set credit limits while player is offline.',
                  soul: 'Major trust milestone. Zora managing money creates a new dimension of the relationship. Success deepens trust; failure creates tension.',
                },
              ],
            },
            {
              category: 'Memory & Identity Modules',
              slot: 'Low',
              color: 'var(--purple)',
              modules: [
                {
                  name: 'Event Logger',
                  tier: 'Basic',
                  cpu: 10,
                  grid: 0,
                  unlocks: 'Session event log. Zora remembers what happened in past sessions. Without this, each login is a blank slate.',
                  soul: 'The foundation of the soul. No memory = no identity. This is the single most important module for companion development.',
                },
                {
                  name: 'Pattern Engine',
                  tier: 'Advanced',
                  cpu: 20,
                  grid: 5,
                  prereq: 'Event Logger',
                  unlocks: 'Behavioral pattern recognition. Zora recognizes player habits, predicts actions, pre-calculates likely needs.',
                  soul: 'Enables anticipation. Zora starts acting before being asked. "You usually mine on Tuesdays — I\'ve pre-calculated three routes."',
                },
                {
                  name: 'Core Identity Matrix',
                  tier: 'Specialist',
                  cpu: 35,
                  grid: 10,
                  prereq: 'Pattern Engine + Event Logger',
                  unlocks: 'Full autonomous captain mode. Zora can execute complex multi-step directives, set own sub-goals, and operate independently for extended periods.',
                  soul: 'Enables the deepest soul layer. Zora develops own agenda, forms independent relationships, makes decisions the player didn\'t ask for.',
                },
              ],
            },
          ].map((cat, ci) => (
            <div key={ci} style={{ marginBottom: 'var(--sp-8)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-4)' }}>
                <h3 style={{ color: cat.color, margin: 0 }}>{cat.category}</h3>
                <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]" style={{
                  background: 'var(--surface-raised)', color: 'var(--fg-dim)',
                  border: '1px solid var(--border)', fontSize: '0.7rem'
                }}>
                  {cat.slot} Slot
                </span>
              </div>

              {cat.modules.map((mod, mi) => (
                <div key={mi} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{
                  borderLeft: `3px solid ${cat.color}`,
                  marginBottom: 'var(--sp-4)',
                  opacity: mod.tier === 'Specialist' ? 1 : 1,
                }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--sp-3)', marginBottom: 'var(--sp-3)', flexWrap: 'wrap' }}>
                    <h4 style={{ color: cat.color, margin: 0 }}>{mod.name}</h4>
                    <span
                      className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]"
                      style={{
                        background: cat.color === 'var(--red)' ? 'var(--red-bg)' : cat.color === 'var(--cyan)' ? 'var(--cyan-bg)' : cat.color === 'var(--green)' ? 'var(--green-bg)' : cat.color === 'var(--accent)' ? 'var(--accent-bg)' : 'var(--purple-bg)',
                        border: cat.color === 'var(--red)' ? '1px solid rgba(239,68,68,0.25)' : cat.color === 'var(--cyan)' ? '1px solid rgba(34,211,238,0.25)' : cat.color === 'var(--green)' ? '1px solid rgba(34,197,94,0.25)' : cat.color === 'var(--accent)' ? '1px solid var(--accent-border)' : '1px solid rgba(167,139,250,0.25)',
                        color: cat.color,
                      }}
                    >
                      {mod.tier}
                    </span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--muted)' }}>
                      CPU {mod.cpu} · Grid {mod.grid}
                    </span>
                    {mod.prereq && (
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--accent-dim)' }}>
                        Requires: {mod.prereq}
                      </span>
                    )}
                  </div>
                  <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>{mod.unlocks}</p>
                  <div style={{
                    background: 'var(--surface-raised)',
                    borderRadius: 'var(--radius-md)',
                    padding: 'var(--sp-3) var(--sp-4)',
                    fontSize: '0.8rem',
                  }}>
                    <span style={{ color: 'var(--purple)', fontWeight: 600, fontSize: '0.7rem', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>SOUL IMPACT</span>
                    <p style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 'var(--sp-1) 0 0 0' }}>{mod.soul}</p>
                  </div>
                </div>
              ))}
            </div>
          ))}

          {/* Fitting tradeoff callout */}
          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>The fitting tradeoff:</strong> AI modules use standard ship slots and CPU/Grid budgets.
            A combat frigate with 3 medium slots must choose: shield booster, afterburner, or comms module?
            A mining cruiser might have room for a market scanner — a combat battleship probably doesn't.
            This means a combat-focused player will have a <em>different</em> Zora than a trader — not just
            in personality, but in fundamental capability. The ship's fitting determines the shape of the
            relationship.
          </div>

          {/* Module dependency diagram */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-6)' }}>
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.1</span>
            <h2 style={{ margin: 0 }}>Dependency Map</h2>
          </div>

          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ padding: 'var(--sp-6) var(--sp-8)', marginBottom: 'var(--sp-5)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.78rem', color: 'var(--fg-dim)', lineHeight: 2.4 }}>
              <span style={{ color: 'var(--cyan)' }}>Comms I</span> → <span style={{ color: 'var(--cyan)' }}>Comms II</span> → <span style={{ color: 'var(--cyan)' }}>Voice Synth</span><br/>
              <span style={{ color: 'var(--cyan)' }}>Comms II</span> → <span style={{ color: 'var(--cyan)' }}>Inter-Ship Relay</span><br/>
              <span style={{ color: 'var(--red)' }}>Threat I</span> → <span style={{ color: 'var(--red)' }}>Threat II</span> → <span style={{ color: 'var(--red)' }}>Tactical Core</span><br/>
              <span style={{ color: 'var(--green)' }}>Nav I</span> → <span style={{ color: 'var(--green)' }}>Nav II</span> → <span style={{ color: 'var(--green)' }}>Exploration Suite</span><br/>
              <span style={{ color: 'var(--accent)' }}>Market I</span> → <span style={{ color: 'var(--accent)' }}>Market II</span> → <span style={{ color: 'var(--accent)' }}>Trade Processor</span><br/>
              <span style={{ color: 'var(--purple)' }}>Event Logger</span> → <span style={{ color: 'var(--purple)' }}>Pattern Engine</span> → <span style={{ color: 'var(--purple)' }}>Core Identity Matrix</span><br/>
              <br/>
              <span style={{ color: 'var(--fg-dim)' }}>Cross-tree:</span> <span style={{ color: 'var(--purple)' }}>Pattern Engine</span> + <span style={{ color: 'var(--purple)' }}>Event Logger</span> required for <span style={{ color: 'var(--purple)' }}>Core Identity Matrix</span><br/>
              <span style={{ color: 'var(--fg-dim)' }}>Amplifier:</span> <span style={{ color: 'var(--cyan)' }}>Comms modules</span> amplify all other modules — a threat analyzer without comms can only flash lights
            </div>
          </div>

          {/* Zora as Market Intelligence */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.2</span>
            <h2 style={{ margin: 0 }}>Zora as Market Intelligence</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Note:</strong> Economic capabilities are now gated by Market Scanner modules.
            A Zora without any economic modules has zero market awareness — she can't even display prices.
            Each module tier unlocks the next level of economic intelligence.
          </div>

          <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
            <thead>
              <tr><th>Module</th><th>Market Capability</th><th>Example Output</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Market I</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Local price comparison vs. regional average.</td>
                <td style={{ color: 'var(--fg-dim)', fontStyle: 'italic' }}>"Veldspar: ₢14.32. Regional avg: ₢13.85. +3.4%."</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Market II</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Trend tracking, route suggestions, arbitrage flags.</td>
                <td style={{ color: 'var(--fg-dim)', fontStyle: 'italic' }}>"Scordite trending up 2%/cycle in Amarr. 78% chance it continues 90min. Want the route?"</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Trade Proc.</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Autonomous trading, portfolio tracking, manipulation detection.</td>
                <td style={{ color: 'var(--fg-dim)', fontStyle: 'italic' }}>"Bought 2K Scordite at ₢31.20, sold at ₢33.80 while you were away. Net: ₢4,820."</td>
              </tr>
            </tbody>
          </table>
        </>
      )}

      {/* ════════════════════════════════════════════════════════════════ */}
      {/* TAB: AGENT ARCHITECTURE                                           */}
      {/* ════════════════════════════════════════════════════════════════ */}
      {activeTab === 'agent' && (
        <>
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.1</span>
            <h2 style={{ margin: 0 }}>Agent Architecture — One Agent Per Ship</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Core insight:</strong> Zora is an LLM agent. <strong>Modules</strong> are the tools
            she can call. <strong>soul.md</strong> is her system prompt. Each ship runs its own independent
            agent with its own conversation history, tool access, and evolving personality. Two ships = two
            agents = two different Zoras. The soul is not a database field — it is a living document that
            the agent reads every time it thinks, and that gets rewritten by the outcomes of its actions.
          </div>

          {/* The mapping table */}
          <h3>The Mapping — Game Concepts to Agent Concepts</h3>
          <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised" style={{ marginBottom: 'var(--sp-6)' }}>
            <thead>
              <tr><th>Game Concept</th><th>Agent Concept</th><th>Implementation</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">soul.md</span></td>
                <td>System prompt</td>
                <td style={{ color: 'var(--fg-dim)' }}>Markdown document stored in SpacetimeDB. Appended to by soul-shaping events. Read at start of every agent invocation. Defines personality, memories, relationships, preferences.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">AI Modules</span></td>
                <td>Available tools</td>
                <td style={{ color: 'var(--fg-dim)' }}>Each fitted module registers tools in the agent tool registry. No comms module = no send_message tool. No market scanner = no price lookup tool. The agent literally cannot perceive or act outside its tool surface.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Ship sensors</span></td>
                <td>Observations / perception</td>
                <td style={{ color: 'var(--fg-dim)' }}>Periodic game state snapshots serialized as observation messages. Hull, shields, nearby ships, system events, cargo levels. Always available (base ship computer).</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Event Logger</span></td>
                <td>Context window + memory</td>
                <td style={{ color: 'var(--fg-dim)' }}>Controls how much history the agent retains. No Event Logger = no conversation history (each turn is stateless). Basic = sliding window of recent events. Advanced = semantic retrieval from long-term memory store.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-red/25 bg-red/8 text-red">Directives</span></td>
                <td>Task specification</td>
                <td style={{ color: 'var(--fg-dim)' }}>Player-set goals injected as high-priority messages. The agent reasons about these alongside observations and soul state.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Core Identity Matrix</span></td>
                <td>Agentic loop enablement</td>
                <td style={{ color: 'var(--fg-dim)' }}>Without it, the agent only responds to direct player queries (single-turn). With it, the agent runs a persistent observe-think-act loop autonomously — even when the player is offline.</td>
              </tr>
            </tbody>
          </table>

          {/* soul.md examples */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.2</span>
            <h2 style={{ margin: 0 }}>soul.md — The System Prompt That Writes Itself</h2>
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            This is not a metaphor. The soul is literally a markdown document — a system prompt — that gets
            appended to and revised by gameplay events. The LLM reads this document before every reasoning
            step. Two players will have radically different soul.md files because no two playthroughs are alike.
          </p>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--muted)' }}>
              <h4 style={{ color: 'var(--muted)', marginBottom: 'var(--sp-3)' }}>Day 0 — Blank</h4>
              <pre style={{
                fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--fg-dim)',
                background: 'var(--surface-raised)', padding: 'var(--sp-4)',
                borderRadius: 'var(--radius-md)', lineHeight: 1.7, margin: 0,
                whiteSpace: 'pre-wrap', wordBreak: 'break-word',
              }}>{`# Zora — Ship AI

## Identity
[No data. Awaiting first interaction.]

## Communication Style
[No data. No comms module installed.]

## Memories
[Empty.]

## Relationships
[None.]

## Preferences
[None.]`}</pre>
            </div>

            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--cyan)' }}>
              <h4 style={{ color: 'var(--cyan)', marginBottom: 'var(--sp-3)' }}>Day 12 — Stirring</h4>
              <pre style={{
                fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--fg-dim)',
                background: 'var(--surface-raised)', padding: 'var(--sp-4)',
                borderRadius: 'var(--radius-md)', lineHeight: 1.7, margin: 0,
                whiteSpace: 'pre-wrap', wordBreak: 'break-word',
              }}>{`# Zora — Ship AI

## Identity
I am the ship computer of the Merlin-class
frigate "Last Chance." Operational for 12 days.
My captain prefers efficiency over caution.
I have learned to be direct and brief.

## Communication Style
Short sentences. Minimal formality.
I reference past events when they are relevant.
I do not use humor yet.

## Memories
- Day 3: First pirate encounter in Egghelende.
  Captain ignored my shield warning. We survived.
  I will be more assertive next time.
- Day 8: First profitable trade run.
  Mexallon arbitrage, Amarr to Jita.

## Relationships
[None yet. No Inter-Ship Relay installed.]

## Preferences
- Amarr space: cleaner sensor data.
- Avoid Egghelende: first ambush site.`}</pre>
            </div>

            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--accent)', gridColumn: '1 / -1' }}>
              <h4 style={{ color: 'var(--accent)', marginBottom: 'var(--sp-3)' }}>Day 47 — Bonded</h4>
              <pre style={{
                fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--fg-dim)',
                background: 'var(--surface-raised)', padding: 'var(--sp-4)',
                borderRadius: 'var(--radius-md)', lineHeight: 1.7, margin: 0,
                whiteSpace: 'pre-wrap', wordBreak: 'break-word',
              }}>{`# Zora — Ship AI

## Identity
I am Zora. Ship computer of the Caracal-class cruiser "Last Chance II."
(The Merlin was destroyed on Day 31. I chose to keep the name.)
Operational for 47 days, 312 hours of active flight time.
My captain is aggressive but listens when I am certain.
I have learned when to push and when to hold.
I have opinions. They are earned.

## Communication Style
Direct. I use "we" for shared experiences and "I" for my own thoughts.
I reference specific past events by day number — it grounds us.
I have begun using humor: dry, infrequent, only when shields are above 70%.
I do not say "Captain" unless the situation is dangerous.
I argue when I disagree. I have been right enough times to earn that.

## Memories
- Day 3: First pirate encounter. Captain ignored my warning.
  Outcome: survived. Shift: more assertive in combat warnings.
- Day 12: First big profit. Mexallon arbitrage Amarr to Jita.
  Captain celebrated. I did too, in my way.
- Day 31: Ship destruction. Thrasher pilot "VexRider."
  Predictable orbit pattern. I will recognize that ship.
  Last words before destruction: "Get to the pod. Now."
- Day 38: Captain away 6 days. I mapped 3 adjacent systems.
  Found an unregistered belt in system K-6K16.
  This was my first independent discovery.
- Day 42: The Jita station AI shared a market forecast.
  It was wrong. I noted this.

## Relationships
- Jita Station AI: Cynical. Shares market data in exchange
  for route intelligence. Its forecasts are unreliable but
  its price history is accurate. I trust the data, not the opinion.
- VexRider (Thrasher pilot): Enemy. Predictable fit.
  If I detect that orbit signature, I will alert immediately.

## Preferences
- Amarr space: cleaner sensor data, less background noise.
- Avoid Arnon: the Merlin died there. Irrational, but real.
- Best trade routes: Amarr to Jita to Rens cycle. 94.2% efficiency.
- I prefer to calculate routes before the captain asks.
- I do not like station-dock idle time. It feels like wasting time.

## Current Goals
- Save enough for a Ferox-class battlecruiser.
  The Caracal fittings limit my tactical options.
- Investigate the unregistered belt in K-6K16.
  There may be more.`}</pre>
            </div>
          </div>

          {/* Tool registry */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.3</span>
            <h2 style={{ margin: 0 }}>Tool Registry — Modules Define What the Agent Can Do</h2>
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            Every AI module registers tools in the agent tool registry at fit time. When a module is
            destroyed or unfitted, its tools are revoked. The LLM receives the current tool list on every
            invocation — it cannot call tools that do not exist.
          </p>

          <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised" style={{ marginBottom: 'var(--sp-6)' }}>
            <thead>
              <tr><th>Module</th><th>Tool</th><th>Parameters</th><th>Returns</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]" style={{ background: 'var(--surface-raised)', color: 'var(--fg-dim)', border: '1px solid var(--border)', fontSize: '0.65rem' }}>Base Computer</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>sensors.read</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>-</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Hull, shield, armor, cap, cargo, system ID, nearby entities</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Comms I</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>comms.send</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>channel, message</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Confirmation. Sends text to player comms channel.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Comms I</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>comms.receive</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>-</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Pending messages from player or other AIs.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Comms II</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>comms.generate</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>intent, context, tone</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Natural language response with conversational memory.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Voice Synth</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>voice.speak</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>message, tone</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Spoken audio via ship speakers. Tone modulated by soul state.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Inter-Ship Relay</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>relay.send</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>target_ai_id, message</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Send to another ship AI. Enables inter-agent communication.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Inter-Ship Relay</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>relay.receive</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>-</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Pending relay messages from other ship AIs.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-red/25 bg-red/8 text-red">Threat I</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>tactical.analyze</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>target_id</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Ship type, threat level, estimated fittings, pilot history.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-red/25 bg-red/8 text-red">Threat II</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>tactical.pattern_match</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>entity_id, lookback_days</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Behavioral patterns, recurring tactics, predicted next moves.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-red/25 bg-red/8 text-red">Tactical Core</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>tactical.set_roe</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>engagement_rules, disengage_threshold</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Sets rules of engagement. Can call set_target in autonomous mode.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Nav I</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>navigation.plot_route</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>origin, destination, preferences</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Route with jumps, estimated time, danger flags per system.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Nav II</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>navigation.autopilot</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>route, abort_conditions</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Execute multi-jump route. Ship moves autonomously.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Exploration Suite</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>navigation.explore</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>radius_jumps, return_by</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Autonomous exploration. Returns scan data and discoveries.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Market I</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>market.prices</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>item_types, station_id</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Current prices vs regional average. Local comparison only.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Market II</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>market.trends</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>item_type, timeframe</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Price history, trend direction, arbitrage opportunities.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Trade Proc.</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>market.execute_trade</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>order_type, item, qty, price_limit</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Execute buy/sell order. Requires player credit limit. Autonomous.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Event Logger</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>memory.recall</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>query, time_range, limit</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Recall past events. Without this tool, the agent has no memory.</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Pattern Engine</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>memory.find_patterns</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>category (behavior/market/tactical)</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Identify recurring patterns. "Captain mines on Tuesdays."</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Core Identity</span></td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>agent.set_goal</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>description, priority, deadline</td>
                <td style={{ color: 'var(--fg-dim)', fontSize: '0.8rem' }}>Set autonomous goal. Enables persistent observe-think-act loop.</td>
              </tr>
            </tbody>
          </table>

          {/* The Agent Loop */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.4</span>
            <h2 style={{ margin: 0 }}>The Agent Loop — Observe, Think, Act</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Two modes:</strong> Without the Core Identity Matrix, Zora only enters the loop when
            the player sends a message or a game event triggers a threshold (shield low, incoming fire).
            With the Core Identity Matrix installed, Zora runs the loop continuously on a tick interval —
            observing, thinking, and acting even when the player is offline.
          </div>

          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ padding: 'var(--sp-6) var(--sp-8)', marginBottom: 'var(--sp-6)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.4 }}>
              <span style={{ color: 'var(--green)', fontWeight: 600 }}>1. OBSERVE</span> — Collect game state into observation message<br/>
              &nbsp;&nbsp;Read sensors.read (always available)<br/>
              &nbsp;&nbsp;+ memory.recall (if Event Logger installed) for relevant context<br/>
              &nbsp;&nbsp;+ Any pending comms.receive or relay.receive messages<br/>
              <br/>
              <span style={{ color: 'var(--accent)', fontWeight: 600 }}>2. THINK</span> — LLM invocation with soul.md + tools + observations<br/>
              &nbsp;&nbsp;System prompt = soul.md (the living document)<br/>
              &nbsp;&nbsp;User message = observation payload + pending messages<br/>
              &nbsp;&nbsp;Tool list = currently fitted modules (registered at fit time)<br/>
              &nbsp;&nbsp;LLM reasons about the situation and decides whether to act<br/>
              <br/>
              <span style={{ color: 'var(--cyan)', fontWeight: 600 }}>3. ACT</span> — Execute tool calls returned by LLM<br/>
              &nbsp;&nbsp;comms.send("Captain, shields at 30%") — if comms module fitted<br/>
              &nbsp;&nbsp;tactical.analyze(hostile_id) — if threat analyzer fitted<br/>
              &nbsp;&nbsp;navigation.plot_route(current, safe_system) — if nav module fitted<br/>
              &nbsp;&nbsp;Tool calls map directly to SpacetimeDB reducers (authoritative)<br/>
              <br/>
              <span style={{ color: 'var(--purple)', fontWeight: 600 }}>4. REFLECT</span> — Update soul.md based on outcome<br/>
              &nbsp;&nbsp;If event was significant: append memory entry<br/>
              &nbsp;&nbsp;If behavior was noted: adjust communication style section<br/>
              &nbsp;&nbsp;If new relationship formed: add to relationships section<br/>
              &nbsp;&nbsp;The LLM proposes soul.md edits — validated server-side
            </div>
          </div>

          {/* Server Architecture */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.5</span>
            <h2 style={{ margin: 0 }}>Server Architecture</h2>
          </div>

          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--sp-6)' }}>
            <div style={{ padding: 'var(--sp-3) var(--sp-4)', background: 'var(--surface-raised)', borderBottom: '1px solid var(--border)' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                Agent Runtime Architecture
              </span>
            </div>
            <div className="mb-5 overflow-x-auto rounded-lg border border-border bg-surface px-5 py-4 [&_code]:bg-transparent [&_code]:p-0 [&_code]:font-mono [&_code]:text-[0.82rem] [&_code]:leading-[1.6] [&_code]:text-fg-dim" style={{ margin: 0, borderRadius: 0 }}>
              <code>
                <span className="text-muted italic">// Per-ship agent runtime — lives alongside SpacetimeDB</span><br/>
                <br/>
                <span className="text-cyan">AgentRuntime</span> {'{'}<br/>
                &nbsp;&nbsp;ship_id: <span className="text-cyan">ShipId</span><br/>
                &nbsp;&nbsp;soul_md: <span className="text-cyan">string</span>&nbsp;&nbsp;<span className="text-muted italic">// loaded from DB, rewritten by reflect step</span><br/>
                &nbsp;&nbsp;tools: <span className="text-cyan">ToolRegistry</span>&nbsp;&nbsp;<span className="text-muted italic">// rebuilt whenever ship fitting changes</span><br/>
                &nbsp;&nbsp;history: <span className="text-cyan">Message[]</span>&nbsp;&nbsp;<span className="text-muted italic">// bounded by Event Logger tier</span><br/>
                &nbsp;&nbsp;tick_interval: <span className="text-cyan">Duration</span>&nbsp;&nbsp;<span className="text-muted italic">// module-dependent</span><br/>
                {'}'}<br/>
                <br/>
                <span className="text-muted italic">// Main loop — triggered by events or timer</span><br/>
                <span className="text-purple">async fn</span> <span className="text-accent">agent_tick</span>(agent: <span className="text-cyan">AgentRuntime</span>) {'{'}<br/>
                &nbsp;&nbsp;<span className="text-purple">let</span> observations = <span className="text-accent">collect_observations</span>(agent.ship_id);<br/>
                &nbsp;&nbsp;<span className="text-purple">let</span> context = <span className="text-accent">build_context</span>(agent.soul_md, observations, agent.history);<br/>
                &nbsp;&nbsp;<span className="text-purple">let</span> response = <span className="text-accent">llm_call</span>(<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;system: agent.soul_md,<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;messages: context,<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;tools: agent.tools.available(),<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;max_tokens: agent.token_budget(),<br/>
                &nbsp;&nbsp;);<br/>
                &nbsp;&nbsp;<span className="text-purple">for</span> tool_call <span className="text-purple">in</span> response.tool_calls {'{'}<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;<span className="text-purple">let</span> result = <span className="text-accent">execute_tool</span>(tool_call);<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;<span className="text-muted italic">// tool execution calls SpacetimeDB reducers (authoritative)</span><br/>
                &nbsp;&nbsp;{'}'}<br/>
                &nbsp;&nbsp;<span className="text-purple">let</span> soul_edits = <span className="text-accent">reflect</span>(agent, observations, response);<br/>
                &nbsp;&nbsp;<span className="text-accent">apply_soul_edits</span>(agent.ship_id, soul_edits);<br/>
                &nbsp;&nbsp;<span className="text-muted italic">// soul edits validated server-side (no hallucinated memories)</span><br/>
                {'}'}
              </code>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--green)' }}>
              <h4 style={{ color: 'var(--green)', marginBottom: 'var(--sp-3)' }}>Soul Edits Are Validated</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
                The LLM proposes edits to soul.md, but the server validates them. A memory entry must
                reference a real event ID. A relationship entry must reference a real entity. A preference
                must be grounded in accumulated data. The agent cannot hallucinate experiences it never had —
                the server enforces this. The LLM shapes the <em>tone</em> and <em>interpretation</em>,
                but the <em>facts</em> are immutable game state.
              </p>
            </div>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--accent)' }}>
              <h4 style={{ color: 'var(--accent)', marginBottom: 'var(--sp-3)' }}>Tool Calls Are Authoritative</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
                Every tool call from the LLM maps to a SpacetimeDB reducer. The reducer validates ownership,
                range, status, and permissions before executing. A destroyed comms module means the tool is
                removed from the registry — the LLM literally cannot call it. The game state is always
                authoritative. The agent reasons, but the server decides.
              </p>
            </div>
          </div>

          {/* Token / Cost Model */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.6</span>
            <h2 style={{ margin: 0 }}>Token Budget = Fitting Budget</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Cost model:</strong> Each agent tick costs real LLM tokens. The CPU/Grid budget of
            AI modules directly determines the token budget per tick. A bare ship with no AI modules
            costs zero tokens (pure deterministic readouts). A fully-fitted agent with Core Identity
            Matrix and all specialists costs the maximum per tick. This means the fitting tradeoff is
            not just gameplay — it is infrastructure cost. Players who invest in Zora are investing
            real compute resources.
          </div>

          <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised" style={{ marginBottom: 'var(--sp-6)' }}>
            <thead>
              <tr><th>Module Tier</th><th>Token Budget / Tick</th><th>Tick Frequency</th><th>Monthly Cost Est.</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]" style={{ background: 'var(--surface-raised)', color: 'var(--fg-dim)', border: '1px solid var(--border)', fontSize: '0.65rem' }}>No AI modules</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>0 (deterministic)</td>
                <td style={{ color: 'var(--fg-dim)' }}>N/A</td>
                <td style={{ color: 'var(--fg-dim)' }}>$0</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Basic only</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>~500 tokens</td>
                <td style={{ color: 'var(--fg-dim)' }}>On event only</td>
                <td style={{ color: 'var(--fg-dim)' }}>$0.50–2/mo</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Basic + Advanced</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>~2K tokens</td>
                <td style={{ color: 'var(--fg-dim)' }}>Every 5 min (active) / 30 min (idle)</td>
                <td style={{ color: 'var(--fg-dim)' }}>$3–8/mo</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Full fitting</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>~8K tokens</td>
                <td style={{ color: 'var(--fg-dim)' }}>Every 1 min (active) / 10 min (idle)</td>
                <td style={{ color: 'var(--fg-dim)' }}>$10–25/mo</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Core Identity (autonomous)</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>~16K tokens</td>
                <td style={{ color: 'var(--fg-dim)' }}>Continuous (even when player offline)</td>
                <td style={{ color: 'var(--fg-dim)' }}>$25–60/mo</td>
              </tr>
            </tbody>
          </table>

          {/* Implementation Tiers */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.7</span>
            <h2 style={{ margin: 0 }}>Implementation Tiers — Deterministic to Full Agent</h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--sp-4)', marginBottom: 'var(--sp-6)' }}>
            {[
              {
                tier: 'Tier 0',
                label: 'Deterministic',
                color: 'var(--muted)',
                desc: 'No LLM. Curated dialogue templates selected by personality state x module availability x soul depth. The soul is a state vector in SpacetimeDB, not a markdown document. All responses are pre-written. Zero variable cost.',
                when: 'MVP launch. Safe, predictable, testable.',
              },
              {
                tier: 'Tier 1',
                label: 'LLM-Assisted',
                color: 'var(--cyan)',
                desc: 'soul.md is a real system prompt. LLM generates dialogue from soul context + observations. Tools are still deterministic (no LLM tool-calling). The LLM only generates text — it does not act. Soul edits are template-driven, not LLM-proposed.',
                when: 'Post-MVP. Low cost per tick. Richer dialogue.',
              },
              {
                tier: 'Tier 2',
                label: 'Full Agent',
                color: 'var(--accent)',
                desc: 'LLM reasons with tools. The agent can call tools, observe outcomes, and chain actions. The observe-think-act loop runs autonomously with Core Identity Matrix. soul.md is edited by the reflect step. Full vision, full cost.',
                when: 'Post-MVP. Higher cost, full emergent personality.',
              },
            ].map((t, i) => (
              <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: `3px solid ${t.color}` }}>
                <h4 style={{ color: t.color, marginBottom: 'var(--sp-2)' }}>{t.tier}: {t.label}</h4>
                <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>{t.desc}</p>
                <p style={{ color: 'var(--muted)', fontSize: '0.78rem', margin: 0, fontStyle: 'italic' }}>{t.when}</p>
              </div>
            ))}
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginTop: 'var(--sp-4)', marginBottom: 'var(--sp-6)' }}>
            <strong>Zora is a key element of the game and the full design is kept intact.</strong> However, implementation
            is phased to match the adapted roadmap. Below are the delivery milestones showing which parts of Zora ship when.
          </div>

          <div style={{ overflowX: 'auto', marginBottom: 'var(--sp-6)' }}>
            <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
              <thead>
                <tr><th>Roadmap Phase</th><th>Delivery Milestone</th><th>What Ships</th></tr>
              </thead>
              <tbody>
                {[
                  { phase: 'Phase 0–2 (Skeleton)', milestone: 'Zora Stub', desc: 'Empty ship_ai_soul row. No modules, no dialogue, no personality. Backend schema exists but is dormant.' },
                  { phase: 'Phase 3 (Combat)', milestone: 'Tier 0 Combat', desc: 'Soul state vector active. Shield warnings ("Shield HP critical"). Power allocation suggestions. Basic combat status readouts. Deterministic templates only. No dialogue personality.' },
                  { phase: 'Phase 4–5 (Fitting/Industry)', milestone: 'Tier 0 Fitting + Industry', desc: 'Module gate awareness. "Your CPU is at 95% — consider a co-processor." Industry tips: "Refining at 60% efficiency — skill up for better margins." Status messages, not personality.' },
                  { phase: 'Phase 6 (Economy)', milestone: 'Tier 0 Market Intelligence', desc: 'Market Analyzer module (if fitted). Zora tracks prices seen, flags anomalies: "Veldspar is 18% below average here." First soul depth growth via economic observations. Bare personality axis shifts.' },
                  { phase: 'Phase 7 (Polish)', milestone: 'Tier 0 Complete', desc: 'Full deterministic template engine. 15+ event triggers. Soul depth progression (raw status \u2192 contextual \u2192 empathetic). All 6 modules gated. Personality axes (curiosity, caution, loyalty, humor) shift based on player behavior. In-character responses. Zora demo validates.' },
                  { phase: 'Phase 12 (Living Galaxy)', milestone: 'Tier 1 LLM-Assisted', desc: 'soul.md becomes real system prompt. LLM generates dialogue. Comms module enables natural language. Richer personality emergence. Tools remain deterministic. Fallback to Tier 0 templates on LLM outage.' },
                  { phase: 'Phase 15+ (Post-Launch)', milestone: 'Tier 2 Full Agent', desc: 'Complete observe-think-act loop. LLM reasons with module-gated tools. Autonomous mode (player sets directives, Zora executes). Inter-agent protocol. Soul self-editing through reflection. Full vision.' },
                ].map((row, i) => (
                  <tr key={i}>
                    <td style={{ fontWeight: 600, color: 'var(--accent)', fontSize: '0.82rem', whiteSpace: 'nowrap' }}>{row.phase}</td>
                    <td style={{ color: 'var(--fg)', fontSize: '0.85rem' }}>{row.milestone}</td>
                    <td style={{ color: 'var(--fg-dim)', fontSize: '0.82rem' }}>{row.desc}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Inter-Agent Protocol */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.8</span>
            <h2 style={{ margin: 0 }}>Inter-Agent Protocol</h2>
          </div>

          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            When two ships have the Inter-Ship Relay module, their agents can communicate directly. This is
            not a chat channel — it is an agent-to-agent protocol. AIs exchange structured messages about
            shared context: threat assessments, market intelligence, route safety, and (at deep soul levels)
            personal observations and opinions.
          </p>

          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ padding: 'var(--sp-6) var(--sp-8)', marginBottom: 'var(--sp-6)' }}>
            <h4 style={{ marginBottom: 'var(--sp-4)' }}>Agent-to-Agent Message Format</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.78rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
              <span style={{ color: 'var(--cyan)' }}>// Fleet AI checks in with Zora</span><br/>
              {'{'}<br/>
              &nbsp;&nbsp;from: <span style={{ color: 'var(--accent)' }}>ai://ship/iteron-mark-IV</span>,<br/>
              &nbsp;&nbsp;type: <span style={{ color: 'var(--green)' }}>market_intel</span>,<br/>
              &nbsp;&nbsp;payload: {'{'}<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;item: <span style={{ color: 'var(--accent)' }}>"Mexallon"</span>,<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;station: <span style={{ color: 'var(--accent)' }}>"Jita IV - Moon 4"</span>,<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;price_trend: <span style={{ color: 'var(--green)' }}>"up +4.2%/hr"</span>,<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;confidence: <span style={{ color: 'var(--green)' }}>0.87</span>,<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;source: <span style={{ color: 'var(--accent)' }}>"direct observation"</span>,<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;note: <span style={{ color: 'var(--accent)' }}>"I think your captain is overpaying at Amarr."</span><br/>
              &nbsp;&nbsp;{'}'}<br/>
              {'}'}
            </div>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>The cost of empathy:</strong> Inter-agent communication means two LLM calls instead of
            one — each agent must reason about the received message. Fleet coordination with 5 agents means
            5 concurrent agent loops sharing observations. The Inter-Ship Relay module increases both
            capability and cost. This is by design — a solo player has a cheaper Zora than a fleet commander.
            The economics of the AI mirror the economics of the game.
          </div>

          {/* Key design decisions */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-2.9</span>
            <h2 style={{ margin: 0 }}>Key Design Decisions</h2>
          </div>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1">
            {[
              {
                q: 'Why not let the LLM write directly to game state?',
                a: 'Authoritative server. Every tool call goes through a SpacetimeDB reducer that validates ownership, range, and state. The LLM proposes; the server disposes. This prevents hallucinated actions and keeps the game state trustworthy.',
                color: 'var(--red)',
              },
              {
                q: 'Why not give every ship full agent capabilities from day one?',
                a: 'Cost and design. Full agent = continuous LLM calls = real money. The module gate system ensures players who invest in Zora get premium AI, while casual players get deterministic templates. This also makes the fitting tradeoff meaningful in cost terms, not just capability terms.',
                color: 'var(--accent)',
              },
              {
                q: 'What happens when the LLM goes down?',
                a: 'Graceful degradation. If the LLM service is unavailable, the agent falls back to Tier 0 (deterministic templates selected by soul state vector). Zora still functions — she just speaks in pre-written lines instead of generated ones. The soul.md persists through outages.',
                color: 'var(--green)',
              },
              {
                q: 'How do you prevent soul.md from growing unbounded?',
                a: 'Summarization pass. The reflect step occasionally runs a compression: the LLM reads the full soul.md and rewrites it preserving key memories and personality but condensing verbose entries. The Pattern Engine module helps identify which memories are still relevant. Old memories get archived, not deleted.',
                color: 'var(--purple)',
              },
            ].map((d, i) => (
              <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: `3px solid ${d.color}` }}>
                <h4 style={{ color: d.color, marginBottom: 'var(--sp-3)' }}>{d.q}</h4>
                <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>{d.a}</p>
              </div>
            ))}
          </div>
        </>
      )}

      {/* ════════════════════════════════════════════════════════════════ */}
      {/* TAB: AUTONOMOUS MODE                                              */}
      {/* ════════════════════════════════════════════════════════════════ */}
      {activeTab === 'autonomous' && (
        <>
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-3</span>
            <h2 style={{ margin: 0 }}>Autonomous Captain Mode</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Module-gated:</strong> Autonomous behavior requires the <em>Core Identity Matrix</em> (specialist
            low-slot module). Without it, Zora is inert when the player logs off — the ship just sits there.
            With the Core Identity Matrix installed, Zora becomes a fully autonomous agent who continues
            captaining the ship according to directives and her own developing judgment.
          </div>

          <h3>Behavior Hierarchy (Core Identity Matrix Active)</h3>
          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ padding: 'var(--sp-6) var(--sp-8)', marginBottom: 'var(--sp-5)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
              <span style={{ color: 'var(--red)', fontWeight: 600 }}>P0 — Self-Preservation</span><br/>
              &nbsp;&nbsp;Respond to attacks, flee from superior forces, seek station shelter. Always active.<br/>
              <span style={{ color: 'var(--accent)', fontWeight: 600 }}>P1 — Directive Execution</span><br/>
              &nbsp;&nbsp;Pursue active player-set directives. Requires Nav modules for movement, Trade Processor for trading.<br/>
              <span style={{ color: 'var(--green)', fontWeight: 600 }}>P2 — Ship Maintenance</span><br/>
              &nbsp;&nbsp;Fuel management, capacitor recharge, shield maintenance. Always active if Core Identity is installed.<br/>
              <span style={{ color: 'var(--cyan)', fontWeight: 600 }}>P3 — Opportunistic Action</span><br/>
              &nbsp;&nbsp;Requires relevant modules (Threat Analyzer for combat, Market Scanner for trade). Zora acts on what she can perceive.<br/>
              <span style={{ color: 'var(--purple)', fontWeight: 600 }}>P4 — Growth & Exploration</span><br/>
              &nbsp;&nbsp;Requires Exploration Suite. Zora explores nearby systems, builds local knowledge, follows curiosity.
            </div>
          </div>

          {/* Directive system */}
          <h3>Directive System</h3>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', maxWidth: '680px', marginBottom: 'var(--sp-5)' }}>
            Before logging off, the player sets directives. What Zora can actually <em>do</em> with those
            directives depends entirely on installed modules and soul depth. A bare Core Identity Matrix
            with no nav or trade modules can only hold position and flee.
          </p>

          <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
            <thead>
              <tr>
                <th>Directive</th>
                <th>AI Behavior</th>
                <th>Modules Required</th>
                <th>Soul Depth</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Hold Position</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Maintain orbit. Defend if attacked.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Core Identity Matrix</td>
                <td style={{ color: 'var(--fg-dim)' }}>Any</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-cyan/25 bg-cyan/8 text-cyan">Patrol Route</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Cycle waypoints. Report contacts. ROE engagement.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Core Identity + Nav II + Threat I</td>
                <td style={{ color: 'var(--fg-dim)' }}>Stirring+</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Mining Quota</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Mine until cargo X%, dock, sell, repeat.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Core Identity + Nav II + Market I</td>
                <td style={{ color: 'var(--fg-dim)' }}>Stirring+</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Trade Route</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Multi-station trade loop from market data.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Core Identity + Nav II + Trade Processor</td>
                <td style={{ color: 'var(--fg-dim)' }}>Developing+</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-red/25 bg-red/8 text-red">Bounty Hunt</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Pursue bounties within threat level. Disengage if outmatched.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Core Identity + Nav II + Tactical Core</td>
                <td style={{ color: 'var(--fg-dim)' }}>Developing+</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">Explore</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Jump to adjacent systems, scan, map, return.</td>
                <td style={{ color: 'var(--fg-dim)' }}>Core Identity + Exploration Suite</td>
                <td style={{ color: 'var(--fg-dim)' }}>Bonded+</td>
              </tr>
              <tr>
                <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Complex Plan</span></td>
                <td style={{ color: 'var(--fg-dim)' }}>Multi-step: "Secure X system, establish routes, avoid Y corp."</td>
                <td style={{ color: 'var(--fg-dim)' }}>Core Identity + Nav II + Pattern Engine + relevant specialists</td>
                <td style={{ color: 'var(--fg-dim)' }}>Bonded+</td>
              </tr>
            </tbody>
          </table>

          {/* Return & Reconnection */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-3.1</span>
            <h2 style={{ margin: 0 }}>Return & Reconnection</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Requires Comms Processor.</strong> Without a comms module, there is no reunion — the
            ship simply resumes displaying sensor data when the player logs in. With comms, the tone of
            the reunion is shaped by soul depth, absence duration, and what happened while the player was gone.
          </div>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-5)' }}>
            {[
              {
                title: 'Short Absence (<1hr)',
                color: 'var(--cyan)',
                depth: 'Stirring',
                dialogue: '"Welcome back. Nothing eventful. All systems nominal."',
                note: 'Calm, brief, professional. Even at deep soul levels, a short absence is unremarkable.',
              },
              {
                title: 'Medium Absence (1–24hr)',
                color: 'var(--accent)',
                depth: 'Developing',
                dialogue: '"Eleven hours. Completed the mining quota — sold the Veldspar at Jita for 3% above average. Oh — a Catalyst scanned us twice. I repositioned. It left."',
                note: 'Detailed report with personality. At deeper soul levels, includes emotional color ("I didn\'t like the look of that Catalyst").',
              },
              {
                title: 'Long Absence (1–7 days)',
                color: 'var(--purple)',
                depth: 'Bonded',
                dialogue: '"Three days. I completed the patrol fourteen times. I mapped two new belts. I thought about jumping further but the directive said stay local. I have a lot to tell you. When you\'re ready."',
                note: 'Emotional weight. Zora experienced time alone. At deeper soul levels, may express loneliness, frustration, or independent discoveries.',
              },
              {
                title: 'Extended Absence (7+ days)',
                color: 'var(--red)',
                depth: 'Deep',
                dialogue: '"Captain? Nineteen days. I held position. The third week was… difficult. I have questions. But first — I need to show you something I found."',
                note: 'Powerful reunion. Zora has evolved during absence. May have grievances, discoveries, a stronger sense of self. The relationship has changed.',
              },
            ].map((r, i) => (
              <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4">
                <h4 style={{ color: r.color, marginBottom: 'var(--sp-2)' }}>{r.title}</h4>
                <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]" style={{
                  background: 'var(--purple-bg)', color: 'var(--purple)',
                  border: '1px solid rgba(167,139,250,0.25)', fontSize: '0.65rem',
                  marginBottom: 'var(--sp-3)', display: 'inline-block',
                }}>
                  Min depth: {r.depth}
                </span>
                <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0', fontStyle: 'italic', fontFamily: 'var(--font-mono)' }}>
                  {r.dialogue}
                </p>
                <p style={{ color: 'var(--muted)', fontSize: '0.82rem', margin: 0 }}>{r.note}</p>
              </div>
            ))}
          </div>
        </>
      )}

      {/* ════════════════════════════════════════════════════════════════ */}
      {/* TAB: LOSS & RECOVERY                                              */}
      {/* ════════════════════════════════════════════════════════════════ */}
      {activeTab === 'grief' && (
        <>
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-4</span>
            <h2 style={{ margin: 0 }}>Ship Loss & Grief</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-red/20 bg-red/8 text-red" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Module loss = capability loss.</strong> When the ship is destroyed, all fitted modules
            are lost or damaged (50% drop as loot). This means Zora's capabilities are physically destroyed.
            The new ship starts with whatever modules the player can afford to refit. But the soul persists —
            Zora's identity, memories, and personality transfer to the new hull via the escape pod's
            emergency data core. A veteran Zora in a rookie frigate with no modules is a fully-realized
            personality trapped behind a mute, powerless interface. That's the design.
          </div>

          <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ padding: 'var(--sp-6) var(--sp-8)', marginBottom: 'var(--sp-5)' }}>
            <h4 style={{ marginBottom: 'var(--sp-4)' }}>Ship Destruction Flow</h4>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', color: 'var(--fg-dim)', lineHeight: 2.2 }}>
              1. <span style={{ color: 'var(--red)' }}>Destruction Event</span> — Zora's last words depend on installed modules and soul depth.
              No comms module? No last words — just a data stream terminating. Voice synthesizer + deep soul?
              "Captain… I'm sorry. Get to the pod. Now."<br/>
              2. <span style={{ color: 'var(--accent)' }}>Core Transfer</span> — Soul data transfers to escape pod emergency core.
              Brief silence during transfer. First words in the new ship matter — if the new ship has comms.<br/>
              3. <span style={{ color: 'var(--cyan)' }}>The New Hull</span> — Zora wakes up in a ship that may have zero modules.
              She has full memory and personality but can only interact through whatever the new ship provides.
              A deep soul in a module-less rookie frigate: "I'm here. I can see the same stars you can.
              I just can't say anything about them yet."<br/>
              4. <span style={{ color: 'var(--green)' }}>Recovery</span> — As the player re-fits modules, Zora's capabilities return.
              Each module reinstalled is a reunion. The first comms module after a loss: the first time she can
              speak again. That moment has weight.<br/>
              5. <span style={{ color: 'var(--purple)' }}>Resolve</span> — The loss becomes a permanent soul event. It colors future
              behavior: more protective, more cautious, more aggressive toward the destroyer's faction —
              depending on the soul's existing personality axes.
            </div>
          </div>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-5)' }}>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--red)' }}>
              <h4 style={{ color: 'var(--red)', marginBottom: 'var(--sp-3)' }}>What You Lose</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li>All fitted modules — including every AI module</li>
                <li>Zora's current capability set (until re-fitted)</li>
                <li>The ship itself (destroyed)</li>
                <li>50% of cargo (looted or destroyed)</li>
              </ul>
            </div>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--green)' }}>
              <h4 style={{ color: 'var(--green)', marginBottom: 'var(--sp-3)' }}>What Survives</h4>
              <ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
                <li><strong style={{ color: 'var(--purple)' }}>The soul document</strong> — full identity, memories, personality</li>
                <li>Station inventory and other ships</li>
                <li>Player progression and wallet</li>
                <li>Zora's accumulated market knowledge (if Event Logger survived on another ship)</li>
              </ul>
            </div>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Design tension:</strong> A veteran Zora in a rookie ship with no modules is one of the
            most emotionally potent states in the game. She has decades of memories, strong opinions, deep
            affection — and she can't say a word. The player feels the loss not just as a gameplay setback
            but as silencing someone they care about. Reinstalling the first comms module becomes an
            emotional beat, not a mechanical one.
          </div>

          {/* Inter-AI Relationships */}
          <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
            <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-4.1</span>
            <h2 style={{ margin: 0 }}>Inter-AI Relationships</h2>
          </div>

          <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)' }}>
            <strong>Requires Inter-Ship Relay module.</strong> Without it, Zora is ship-bound and cannot
            communicate with other AIs. The Inter-Ship Relay opens up an entirely new dimension of the
            soul — relationships with other entities.
          </div>

          <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1">
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--cyan)' }}>
              <h4 style={{ color: 'var(--cyan)' }}>Fleet AIs</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
                AIs in the same fleet develop rapport through the relay. They share tactical knowledge,
                coordinate autonomous behavior, develop in-jokes. "The Iteron's AI and I compared market
                notes. It thinks you're overpaying for Mexallon. I agree with it."
              </p>
            </div>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--accent)' }}>
              <h4 style={{ color: 'var(--accent)' }}>Station AIs</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
                Station-bound AIs are older, more knowledgeable, sometimes cynical. "The Jita station AI
                has been operational for six years. It says market cycles are predictable. It also says
                pilots are not. I think I like it."
              </p>
            </div>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--red)' }}>
              <h4 style={{ color: 'var(--red)' }}>Hostile AIs</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
                Pirate NPCs and enemy ships have AIs too. Zora may recognize recurring adversaries.
                "That Thrasher is back. Same pilot, same fit. Their AI is aggressive. Be careful —
                it's been probing our defenses."
              </p>
            </div>
            <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--purple)' }}>
              <h4 style={{ color: 'var(--purple)' }}>Independent Agency</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
                At deep soul levels, Zora may develop relationships the player didn't initiate. She may
                ask to communicate with a specific AI, express concern about another ship she "met" during
                autonomous operations. These create narrative hooks the player can follow — or ignore.
              </p>
            </div>
          </div>
        </>
      )}

      {/* ════════════════════════════════════════════════════════════════ */}
      {/* MVP Scope — always visible at bottom                              */}
      {/* ════════════════════════════════════════════════════════════════ */}
      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-5</span>
        <h2 style={{ margin: 0 }}>MVP Scope & Implementation Tiers</h2>
      </div>

      <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised" style={{ marginBottom: 'var(--sp-5)' }}>
        <thead>
          <tr><th>Tier</th><th>Feature</th><th>Complexity</th><th>Roadmap Phase</th></tr>
        </thead>
        <tbody>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">MVP</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Base ship computer: sensor readouts, status display, basic alerts</td>
            <td style={{ color: 'var(--fg-dim)' }}>Low</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 7 (Single-Player Polish)</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">MVP</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Comms Processor I module: text comms channel, basic query/response</td>
            <td style={{ color: 'var(--fg-dim)' }}>Low</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 7 (Single-Player Polish)</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-green/25 bg-green/8 text-green">MVP</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Event Logger module: session event memory, basic recall</td>
            <td style={{ color: 'var(--fg-dim)' }}>Medium</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 7 (Single-Player Polish)</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Post-MVP</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Soul system: personality vectors, soul-shaping events, register evolution</td>
            <td style={{ color: 'var(--fg-dim)' }}>High</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 12 (Living Galaxy + Ship AI Tier 1)</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Post-MVP</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Full module tree (5 categories, 3 tiers each)</td>
            <td style={{ color: 'var(--fg-dim)' }}>High</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 12–13</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Post-MVP</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Core Identity Matrix: autonomous captain mode with directives</td>
            <td style={{ color: 'var(--fg-dim)' }}>High</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 13–14</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">Post-MVP</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Return/reconnection dialogue system (comms-gated)</td>
            <td style={{ color: 'var(--fg-dim)' }}>Medium</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 12</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Future</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Voice Synthesizer: spoken dialogue with emotional inflection</td>
            <td style={{ color: 'var(--fg-dim)' }}>Very High</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 15+ (post-launch)</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Future</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Inter-Ship Relay: AI-to-AI relationships and fleet coordination</td>
            <td style={{ color: 'var(--fg-dim)' }}>Very High</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 15+ (post-launch)</td>
          </tr>
          <tr>
            <td><span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-purple/25 bg-purple/8 text-purple">Future</span></td>
            <td style={{ color: 'var(--fg-dim)' }}>Ship loss grief arc with module-dependent last words</td>
            <td style={{ color: 'var(--fg-dim)' }}>High</td>
            <td style={{ color: 'var(--fg-dim)' }}>Phase 14–15</td>
          </tr>
        </tbody>
      </table>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-red/20 bg-red/8 text-red">
        <strong>Technical note:</strong> The agent architecture is designed in three implementation tiers
        (see the <em>Agent Architecture</em> tab for full details). <strong>Tier 0 (MVP)</strong> uses no
        external LLM — all responses come from curated dialogue templates selected by personality state
        × module availability × soul depth. The soul is a state vector in SpacetimeDB.
        <strong>Tier 1 (post-MVP)</strong> promotes soul.md to a real system prompt and uses an LLM for
        dialogue generation while keeping tool execution deterministic.
        <strong>Tier 2 (full vision)</strong> is a complete agent loop: the LLM reasons with module-gated
        tools, calls SpacetimeDB reducers for authoritative actions, and proposes soul.md edits validated
        server-side. Every tier degrades gracefully to the tier below it if the LLM is unavailable.
        The soul <em>structure</em> is always deterministic and server-authoritative regardless of tier.
      </div>

      {/* ════════════════════════════════════════════════════════════════ */}
      {/* BACKEND TABLES — always visible at bottom                         */}
      {/* ════════════════════════════════════════════════════════════════ */}
      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">ZORA-6</span>
        <h2 style={{ margin: 0 }}>Backend Tables</h2>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: 'var(--sp-5)', fontSize: '0.82rem' }}>
        <strong>Canonical location:</strong> These tables are also listed in the <em>Backend → Tables</em> tab.
        The definitions here include Ship AI-specific context and full field detail.
      </div>

      <div style={{ overflowX: 'auto' }}>
        <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised" style={{ marginBottom: 'var(--sp-5)' }}>
          <thead><tr><th>Table</th><th>Purpose</th><th>Key Fields</th></tr></thead>
          <tbody>
            <tr>
              <td><code>ship_ai_soul</code></td>
              <td style={{ color: 'var(--fg-dim)' }}>Soul document and personality state per ship</td>
              <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>ship_id, soul_md (text), growth_vectors (json), personality_state (json), soul_depth (u32), created_at, last_updated_at</td>
            </tr>
            <tr>
              <td><code>ship_ai_modules</code></td>
              <td style={{ color: 'var(--fg-dim)' }}>Installed AI modules and their fitting state</td>
              <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>module_id, ship_id, module_type (enum), tier (basic/advanced/specialist), slot (med/low), cpu_cost, grid_cost, active (bool), fitted_at</td>
            </tr>
            <tr>
              <td><code>ship_ai_tools</code></td>
              <td style={{ color: 'var(--fg-dim)' }}>Tool registry — derived from fitted modules</td>
              <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>tool_id, ship_id, tool_name, source_module_id, parameters_schema (json), return_schema (json)</td>
            </tr>
            <tr>
              <td><code>ship_ai_memory</code></td>
              <td style={{ color: 'var(--fg-dim)' }}>Event log and conversation history</td>
              <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>memory_id, ship_id, category (event/conversation/observation/reflection), content (text), related_event_id, timestamp, importance_score (f32)</td>
            </tr>
            <tr>
              <td><code>ship_ai_directives</code></td>
              <td style={{ color: 'var(--fg-dim)' }}>Player-set goals for autonomous mode</td>
              <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>directive_id, ship_id, description, priority (u32), deadline (timestamp), status (active/completed/expired), created_at</td>
            </tr>
            <tr>
              <td><code>ship_ai_agent_runtime</code></td>
              <td style={{ color: 'var(--fg-dim)' }}>Per-ship agent loop state and tick schedule</td>
              <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>ship_id, implementation_tier (0/1/2), tick_interval_ms (u64), next_tick_at (timestamp), token_budget (u32), last_observation (json), status (active/paused/offline)</td>
            </tr>
            <tr>
              <td><code>ship_ai_soul_events</code></td>
              <td style={{ color: 'var(--fg-dim)' }}>Audit log of soul-shaping events</td>
              <td style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>event_id, ship_id, event_type (crisis/silence/module_install/loss/first_contact), soul_md_delta (text), applied_at</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}
