// Changelog page — real ClawAgen milestones
function Changelog() {
  const shell = useShell();
  const tocItems = [
    { id: 'docs-2026-04-21', label: 'Docs overhaul — Apr 21' },
    { id: '0-2', label: 'v0.2 — April 2026' },
    { id: '0-1', label: 'v0.1 — April 2026' },
    { id: '0-0-9', label: 'v0.0.9 — April 2026' },
    { id: '0-0-8', label: 'v0.0.8 — April 2026' },
    { id: '0-0-7', label: 'v0.0.7 — March 2026' },
    { id: '0-0-1', label: 'v0.0.1 — February 2026' },
  ];

  const entries = [
    {
      id: 'docs-2026-04-21', version: 'docs', date: 'Apr 21, 2026',
      title: 'Documentation overhaul — accurate scope, role-gated tools, mobile UX',
      tags: [
        { t: 'added', l: 'Added' },
        { t: 'changed', l: 'Changed' },
        { t: 'fixed', l: 'Fixed' },
      ],
      body: (<>
        <p>A top-to-bottom pass bringing docs.clawagen.com in line with what the code actually ships.</p>
        <ul>
          <li>Added pages: <a className="inline" href="selfhost.html">Self-host</a>, <a className="inline" href="flow.html">Message flow</a>, <a className="inline" href="tools.html">Tool registry</a>, <a className="inline" href="skills-guide.html">Writing skills</a>, <a className="inline" href="agents-guide.html">Configuring agents</a>, <a className="inline" href="providers.html">Providers</a>, <a className="inline" href="security.html">Security & data</a>, <a className="inline" href="errors.html">Errors & rate limits</a>.</li>
          <li>Changed: homepage reframed around 'sovereign AI workspace' positioning; dropped unshipped claims (native apps, MCP/ACP/Haystack integrations, E2E encryption) that the code doesn't back.</li>
          <li>Changed: Architecture guide rewritten for the N-agents-per-tenant model (was previously fixed to Admin + CS).</li>
          <li>Changed: Tool-registry messaging everywhere — 'Two tools, always' is gone; the LLM now sees ~28 first-party tools gated by an <code>agents</code> allowlist.</li>
          <li>Added: homepage 'How it fits together' diagram; per-domain tool table on <a className="inline" href="tools.html">tools.html</a>.</li>
          <li>Fixed: mobile horizontal overflow (grid children defaulting to <code>min-width: auto</code>); sidebar is now a slide-in drawer behind a hamburger at ≤860px.</li>
          <li>Fixed: dead <code>href='#'</code> nav links — pruned where no page exists, rewired where it does.</li>
          <li>Fixed: API reference field name drift (<code>sessionId</code> → <code>contact_id</code>) to match the real backend.</li>
          <li>Fixed: CSS cache strategy — versioned <code>styles.css?v=...</code> URLs so CSS updates reach users within a minute instead of 24 hours.</li>
        </ul>
      </>),
    },
    {
      id: '0-2', version: 'v0.2.0', date: 'Apr 20, 2026',
      title: 'Tool registry — OpenClaw-mirror, role-gated, ~28 first-party tools',
      tags: [
        { t: 'added', l: 'Added' },
        { t: 'changed', l: 'Breaking' },
      ],
      body: (<>
        <p>Replaces the original 2-tool (<code>bash</code> + <code>load_skill</code>) surface with a curated registry of ~28 first-party tools grouped by domain, each declaring an <code>agents</code> allowlist. Mirrors OpenClaw's <code>extensions/*</code> tool pattern; the LLM now calls tools directly instead of routing through <code>tunder</code> for every operation. <code>tunder</code> still exists as a dispatcher for shell-issued commands but is no longer the primary extension mechanism.</p>
        <ul>
          <li>Added (file I/O): <code>read</code>, <code>ls</code>, <code>find</code>, <code>grep</code>, <code>write</code>, <code>edit</code>, <code>apply_patch</code>.</li>
          <li>Added (web): <code>web_search</code>, <code>web_fetch</code> — with Tavily, Brave, Gemini providers, per-tenant key config.</li>
          <li>Added (shell): <code>exec</code> alongside <code>bash</code> — host-side command execution with approval flow.</li>
          <li>Added (memory / search): <code>memory_query</code>, <code>faq_search</code>, <code>session_status</code>, <code>update_plan</code>.</li>
          <li>Added (media): <code>pdf</code>, <code>image_generate</code> (Azure DALL·E).</li>
          <li>Added (channels): <code>message</code> — LLM sends directly through the configured channel adapter; no more <code>bash "tunder send ..."</code>.</li>
          <li>Added (sessions / agents): <code>sessions_list</code>, <code>sessions_history</code>, <code>sessions_spawn</code>, <code>sessions_send</code>, <code>sessions_yield</code>, <code>subagents</code>, <code>agents_list</code>.</li>
          <li>Added (ops): <code>cron</code>, <code>process</code> — scheduling + long-running background work.</li>
          <li>Added (plugin API): <code>api.registerTool(accountId, tool)</code> — per-tenant plugins surface as tools on the next turn.</li>
          <li>Breaking: the LLM's tool surface is much wider than v0.1. Skills and scripts that assumed <code>bash "tunder ..."</code> for every capability still work but are often now a direct tool call.</li>
          <li>Changed: <code>adminOnly()</code> wrapper gates sensitive tools (bash, exec, write, cron, subagents, sessions_spawn/_send, update_plan, image_generate) so CS agents never see them.</li>
        </ul>
      </>),
    },
    {
      id: '0-1', version: 'v0.1.0', date: 'Apr 19, 2026',
      title: 'Phase 8/9 — WhatsApp Web and Telegram Admin Bot land',
      tags: [
        { t: 'added', l: 'Added' },
        { t: 'changed', l: 'Changed' },
      ],
      body: (<>
        <p>Two channels ship in the same week: the WhatsApp Web adapter and the Telegram Admin Bot, both direct ports from <code>ai-contact-bun</code> refactored for multi-tenant isolation. The agent can now receive and reply across both channels out of the box.</p>
        <ul>
          <li>New: WhatsApp Web channel adapter with per-tenant session storage.</li>
          <li>New: Telegram Admin Bot — owners can chat with their Admin agent directly from Telegram.</li>
          <li>Changed: channel credentials moved under <code>config/channels/*.yaml</code> (previously env vars).</li>
          <li>Fixed: a heartbeat race where <code>HEARTBEAT.md</code> could be overwritten during cron runs.</li>
        </ul>
      </>),
    },
    {
      id: '0-0-9', version: 'v0.0.9', date: 'Apr 12, 2026',
      title: 'Channel sidebar section in the dashboard',
      tags: [{ t: 'added', l: 'Added' }],
      body: (<>
        <p>The React dashboard gains a dedicated Channels section — connect, disconnect, and monitor webhook delivery in one place.</p>
        <ul>
          <li>New: per-channel status indicator with last inbound timestamp.</li>
          <li>New: webhook delivery log, retained for 7 days.</li>
        </ul>
      </>),
    },
    {
      id: '0-0-8', version: 'v0.0.8', date: 'Apr 05, 2026',
      title: 'Agent rename — Admin + CS',
      tags: [{ t: 'changed', l: 'Breaking' }],
      body: (<>
        <p>What was previously <code>assistant</code> and <code>supervisor</code> is now <code>admin</code> and <code>cs</code>. The change clarifies ownership: the Admin agent is the tenant owner's agent; the CS agent speaks to external contacts.</p>
        <ul>
          <li>Breaking: <code>/api/assist</code> → <code>/api/admin</code>, <code>/api/chat</code> → <code>/api/cs</code>.</li>
          <li>Breaking: <code>agentType</code> in <code>prompt-builder</code> is now <code>"admin" | "cs"</code>.</li>
          <li>Unchanged: the OpenAI/Anthropic message-format role <code>"assistant"</code> is untouched — only the <em style={{color:'var(--ink-3)', fontStyle:'italic'}}>agent concept</em> was renamed.</li>
        </ul>
      </>),
    },
    {
      id: '0-0-7', version: 'v0.0.7', date: 'Mar 22, 2026',
      title: 'Filesystem-first memory and the 2-tool runtime',
      tags: [{ t: 'added', l: 'Added' }],
      body: (<>
        <p>The first release that commits to the OpenClaw-style mental model end-to-end. All context files (<code>IDENTITY</code>, <code>SOUL</code>, <code>MEMORY</code>, etc.) are authoritative on disk. The LLM is exposed two tools: <code>bash</code> and <code>load_skill</code>.</p>
        <ul>
          <li>New: <code>tunder</code> CLI with 25+ subcommands.</li>
          <li>New: skill progressive disclosure — names + descriptions always in context, bodies loaded on demand.</li>
          <li>New: <code>sqlite-vec</code> + FTS5 hybrid search with Reciprocal Rank Fusion.</li>
        </ul>
      </>),
    },
    {
      id: '0-0-1', version: 'v0.0.1', date: 'Feb 10, 2026',
      title: 'ClawAgen — first commit',
      tags: [{ t: 'added', l: 'Added' }],
      body: (<>
        <p>Initial repo scaffold. Bun 1.3.12 + TypeScript + Hono. Azure OpenAI GPT-5.3-chat as the single LLM provider, with no fallback — errors surface loudly so monitoring catches them.</p>
        <p>Planning docs set the 14-phase roadmap to GA. See <a className="inline" href="https://github.com/carrickcheah/ai-agents" target="_blank" rel="noreferrer">the repo</a> for the full plan.</p>
      </>),
    },
  ];

  return (
    <div className="app">
      <Topbar section="changelog" theme={shell.theme} setTheme={shell.setTheme} onSearch={() => shell.setSearchOpen(true)} onMenuToggle={() => shell.setMobileMenuOpen(true)} />
      <div className="main">
        <Sidebar activeId="" mobileOpen={shell.mobileMenuOpen} onMobileClose={() => shell.setMobileMenuOpen(false)} />
        <article className="content">
          <div className="crumbs">
            <a href="index.html">Docs</a>
            <span className="sep">/</span>
            <span>Changelog</span>
          </div>
          <div className="eyebrow">Release notes</div>
          <h1 className="h1">Changelog</h1>
          <p className="lede">
            What's new in ClawAgen. We ship most weeks during preview; this page catches the changes
            your integration might notice. <a className="inline" href="#">Subscribe via RSS</a> or{' '}
            <a className="inline" href="https://github.com/carrickcheah/ai-agents/releases" target="_blank" rel="noreferrer">follow releases on GitHub</a>.
          </p>
          <div style={{marginTop:48}}>
            {entries.map(e => (
              <div key={e.id} className="cl-entry" id={e.id}>
                <div className="cl-meta">
                  <div className="cl-date">{e.date}</div>
                  <span className="cl-version">{e.version}</span>
                </div>
                <div>
                  <h2 className="cl-title">{e.title}</h2>
                  <div style={{marginBottom:4}}>
                    {e.tags.map(t => <span key={t.t} className={`cl-tag ${t.t}`}>{t.l}</span>)}
                  </div>
                  {e.body}
                </div>
              </div>
            ))}
          </div>
          <Feedback />
        </article>
        <TOC items={tocItems} />
      </div>
      <SearchOverlay open={shell.searchOpen} onClose={() => shell.setSearchOpen(false)} />
      <TweaksPanel visible={shell.tweaksVisible} theme={shell.theme} setTheme={shell.setTheme} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Changelog />);