Add brewing section, plan chat, roaster learning, API tokens, Swagger docs, and full backup

Brewing:
- roasted_beans + brews tables; /beans (bean management with LLM URL
  prefill) and /brews (silhouette brewer picker across immersion/
  percolation/espresso, recipe fields, auto ratio, 0-10 rating, tasting
  notes); bean remaining weight derived from logged brew doses
- Green inventory lot form also prefills from a product URL

Navigation/UX:
- Side nav is now generated from one definition in nav.js, grouped
  Roasting / Brewing / account, consistent on every page

LLM:
- 'Ask the LLM' chat drawer on the planner (stateless /api/plan-chat)
  grounded in the plan, computed ledger, learned pace, and a new
  roaster-behavior profile aggregated from uploaded .alogs
  (/api/roaster-profile: TP lag, phase RoR, median milestone temps)
- The profile also feeds roast reviews and the planner curve's fallback
  milestone temps

API platform:
- User-generated bearer tokens (rpt_…) with account-page management;
  token requests skip CSRF; hand-authored OpenAPI 3 spec at
  /api/openapi.json rendered by self-hosted Swagger UI at /api-docs
- Full-database backup export/import (admin) + per-user data export

Co-Authored-By: Claude Fable 5 <[email protected]>

public/account.html

@@ -15,36 +15,7 @@
           <span class="brand-mark" aria-hidden="true">◐</span>
           <span class="brand-name">Roast Planner</span>
         </div>
-        <div class="nav-group">
-          <a class="nav-item" href="/app"
-            ><span class="nav-icon" aria-hidden="true">◐</span
-            ><span class="nav-label">Planner</span></a
-          >
-          <a class="nav-item" href="#your-plans"
-            ><span class="nav-icon" aria-hidden="true">▤</span
-            ><span class="nav-label">Plans</span></a
-          >
-          <a class="nav-item" href="/roasts"
-            ><span class="nav-icon" aria-hidden="true">∿</span
-            ><span class="nav-label">Roasts</span></a
-          >
-          <a class="nav-item" href="/inventory"
-            ><span class="nav-icon" aria-hidden="true">▥</span
-            ><span class="nav-label">Inventory</span></a
-          >
-          <a class="nav-item" href="/cupping"
-            ><span class="nav-icon" aria-hidden="true">◒</span
-            ><span class="nav-label">Cupping</span></a
-          >
-          <a class="nav-item" href="/account" aria-current="page"
-            ><span class="nav-icon" aria-hidden="true">◔</span
-            ><span class="nav-label">Account</span></a
-          >
-          <a class="nav-item hidden" id="nav-admin" href="/admin"
-            ><span class="nav-icon" aria-hidden="true">⚙</span
-            ><span class="nav-label">Admin</span></a
-          >
-        </div>
+        <div id="nav-links"></div>
         <div class="nav-spacer"></div>
         <button
           class="icon-btn nav-collapse-toggle"
@@ -225,6 +196,67 @@
             </div>
           </section>
 
+          <section class="panel-card" id="api-tokens">
+            <div class="panel-head">
+              <h2>API tokens</h2>
+              <a class="ghost-btn small" href="/api-docs">API docs</a>
+            </div>
+            <div class="panel-body">
+              <p class="muted">
+                Tokens authenticate API requests with an
+                <code>Authorization: Bearer rpt_…</code> header — full access
+                to your account, so treat them like passwords.
+              </p>
+              <form
+                id="token-form"
+                style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"
+              >
+                <input
+                  class="text-input"
+                  name="name"
+                  placeholder="Token name (e.g. shortcuts, cli)"
+                  style="max-width:260px"
+                />
+                <button class="ghost-btn" type="submit" id="token-create">
+                  Generate token
+                </button>
+              </form>
+              <div class="hidden" id="token-reveal-wrap" style="margin-top:10px">
+                <p class="field-note" style="margin:0 0 4px">
+                  Copy it now — it will never be shown again.
+                </p>
+                <div class="token-reveal" id="token-reveal"></div>
+              </div>
+              <div class="table-wrap" style="margin-top:12px">
+                <table class="data-table" id="tokens-table">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Created</th>
+                      <th>Last used</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody id="tokens-body"></tbody>
+                </table>
+              </div>
+            </div>
+          </section>
+
+          <section class="panel-card" id="my-data">
+            <div class="panel-head"><h2>Your data</h2></div>
+            <div class="panel-body">
+              <p class="muted">
+                Download everything you've put into Roast Planner — plans,
+                roasts, inventory, cupping, beans, and brews — as one JSON
+                file.
+              </p>
+              <a class="ghost-btn" href="/api/account/export" download
+                >Download my data</a
+              >
+            </div>
+          </section>
+
           <section class="panel-card danger-zone" id="danger">
             <div class="panel-head">
               <h2>Danger zone</h2>