Add MMO-style Trade Window permission/consent dialog with session mode

[Copilot]

Adds a satirical cookie-consent parody dialog styled as an MMO item trade window that intercepts localStorage writes for first-time users, plus a session mode fallback for users who decline.

Behavior

• New users clicking "Begin Setup" see the trade dialog before any localStorage write or seal generation
• Accept → proceeds with normal completeStage0() flow
• Decline → sets sessionMode = true; shows a persistent non-dismissible amber banner; saveProfile() becomes a no-op; page remains fully functional in memory
• Session banner has an "Accept Storage" button that re-opens the dialog and calls saveProfile() on acceptance
• Stage 1 ("Complete Setup →") shows a simpler amber "Seal & Store Character" confirmation modal before completeStage1() runs (skipped in session mode)
• Returning users (valid ferros_profile in localStorage) skip the dialog entirely — gated by localStorage.getItem('ferros_profile') === null

JS changes

• New state: let sessionMode = false
• New functions: showTradeDialog, closeTradeDialog, acceptTrade, enterSessionMode, acceptStorageFromSession, showCharSealConfirm, closeCharSealConfirm
• saveProfile() early-returns when sessionMode is true
• completeStage0 / completeStage1 split into wrapper + _do* inner functions to support async callback injection

function saveProfile() {
  if (sessionMode) return; // session mode — no persistence
  // ... existing logic
}

async function completeStage0() {
  if (!sessionMode && localStorage.getItem('ferros_profile') === null) {
    showTradeDialog(() => _doCompleteStage0());
    return;
  }
  await _doCompleteStage0();
}

CSS / HTML additions

• #session-banner — sticky amber top bar (non-dismissible)
• #trade-overlay / .trade-window — two-column MMO trade layout with @keyframes tradeGlow cyan border pulse; left col ("YOUR COMPUTER") lists storage facts, right col ("YOU") lists data provided
• #char-seal-overlay — minimal amber confirmation modal for Stage 1 seal
• Responsive: single-column below 600px

Original prompt

Context

Repository: Maangled/ferros
File: docs/personal-profile.html (on main branch)

The file is a self-contained HTML document (embedded CSS + JS, zero external dependencies) designed as a gamified personal progression dashboard in the FERROS dark sci-fi/cyberpunk aesthetic. It uses localStorage for persistence and runs entirely offline via file:// protocol.

Technical constraints:

• All changes are to the single file docs/personal-profile.html
• Zero external dependencies — no CDNs, no frameworks, no build tools
• Must work on file:// protocol — use the djb2-based computeHash() fallback already in the file (no crypto.subtle dependency for new code), no fetch, no service workers
• Dark theme sci-fi/cyberpunk aesthetic consistent with existing FERROS design (CSS variables already defined)
• localStorage is the only persistence mechanism

Task

Add an MMO-style "Trade Window" permission/consent dialog that appears before any localStorage writes. This is a satirical take on cookie consent screens — FERROS stores nothing server-side and collects nothing.

Behavior

First appearance: When the user clicks "Begin Setup" on Stage 0 (completeStage0()), intercept the click and show the trade dialog BEFORE any localStorage writes or seal generation. If the user accepts, proceed with the normal completeStage0() logic. If they decline, enter session mode.

Session mode: If user clicks ❌ Decline:

• Set an in-memory flag sessionMode = true (never written to localStorage)
• Show a persistent top banner: ⚠️ Session mode — progress will not be saved with an [Accept Storage] button that re-opens the trade dialog
• The page is still fully functional — user can complete setup and use the dashboard, but saveProfile() becomes a no-op in session mode
• The banner is NOT dismissible (it stays visible as a reminder)

Character creation seal confirmation: After the user fills out Stage 1 and clicks "Complete Setup →", show a second simpler confirmation modal: "Your character data will be sealed with a cryptographic hash and stored locally" with [Seal & Continue] and [Cancel] buttons. Only proceed with completeStage1() logic after confirming. (This only appears if NOT in session mode.)

Returning users: If localStorage already has a valid ferros_profile on page load, skip the trade dialog entirely (they already accepted previously).

Trade Dialog Design

The dialog must be styled as an MMO item trade window with FERROS dark theme (glowing borders, item slot aesthetic). It should look like a trade interface from a fantasy/sci-fi game.

Layout: Two-column layout inside a wide modal/overlay:

Left column — "YOUR COMPUTER" header:

• Shows what the page wants to store:
  • 💾 localStorage (~50KB max)
  • 🖥️ This browser only
  • 🚫 No network requests
  • 🚫 No cookies
  • 🚫 No tracking

Right column — "YOU" header:

• Shows what you're providing:
  • 📝 Your name / handle
  • 🎭 Your avatar & class choice
  • 📊 Your progress & XP
  • 🏆 Your achievements
  • ↩️ Revocable anytime via "Clear Data"

Tongue-in-cheek note below both columns (styled differently, italic or dimmed):

"Unlike most websites, we're not collecting anything. Your data stays in THIS browser on THIS computer. We're making fun of cookie consent screens because we literally have nothing to consent to."

Two buttons at the bottom:

• ✅ Accept Trade — glowing green/cyan styled button
• ❌ Decline — red/dim styled button

Visual styling details:

• The trade window should have a glowing border (use --accent-cyan or --accent-amber glow)
• Use "TRADE WINDOW" or "⚔️ PERMISSION EXCHANGE" as the header title in monospace font
• Each item row in both columns should look like an MMO item slot: small icon, item name, item description — use --bg-card background with --border-dim border
• Add a "STATUS: AWAITING CONFIRMATION" or similar RPG-style status line
• The overall aesthetic should feel like you're about to trade items in an MMO

CSS additions needed

Add new CSS classes for:

• .trade-overlay — full-screen overlay (similar to #modal-overlay but higher z-index)
• .trade-window — the main trade box, wider than normal modal (max-width: 700px), with glowing border animation
• .trade-cols — grid with two equal columns and a dividing line/separator
• .trade-col — individual column with header
• .trade-col-header — styled header ("YOUR COMPUTER" / "YOU") in monospace, colored
• .trade-item — item slot row (icon + name + desc)
• .trade-note — the satirical note section
• .trade-btn-accept — glowing accept button (green/cyan)
• .trade-btn-decline — decline button (red/muted)
• A @keyframes tradeGlow animation for the border pulse

JS additions needed

New state variable: let sessionMode = false;

New functions:

• showTradeDialog(onAccept, onDecline) — renders and shows the trade overlay
• closeTradeDialog() — hides the trade over...

This pull request was created from Copilot chat.

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.