# Profile Page Redesign Brief

You are designing **one** mockup of the swamp.club Operative profile page (the page you land on at `/u/<username>`). Your output is a single self-contained `.html` file viewable in a browser by `file://` (no build step). Other agents are exploring different directions in parallel — **make your design distinct**.

The home page, extensions browse page, and extension detail page have already been refactored to a calmer, mostly-mono cyberpunk language with thin rules, numbered headers, sparing color, and Orbitron / Chakra Petch / JetBrains Mono type. The profile page is the next surface — it should feel like it lives in the same product and, more importantly, should feel like **home** for the operative looking at it.

## The problem with today's page

Today's `/u/{username}` route renders a single narrow column of stacked label/value pairs:

- A glitch-text `OPERATIVE_DOSSIER` headline at the top
- One vertically stacked card with: Operative (with badges as chips), Active Since, Extensions count, Sign-in Streak, Lore, Comms, Uplinks, then an Activity heatmap, then Writings
- Below: a separate Extension Pulls block, then a separate `OPERATIVE_PERFORMANCE` block (Reputation / Total Events / Active Days as 3 big stat tiles), then a long indented EXECUTION_RECORDS event tree (cli, model, workflow, vault, data, repo, extension lines)
- Own profile only: profile editor form, API key manager, collectives section

Problems:

- It's a tall single column — no spatial hierarchy. Score, identity, badges, activity, writings, performance are all the same width and weight. Nothing tells you "this is who they are" vs. "this is what they did."
- The same data appears in two places (events show up in heatmap day-detail and in EXECUTION_RECORDS).
- Score is just a number — there's no sense of trajectory, momentum, distance to next tier, or how this operative compares.
- Badges are pill chips lost between Operative and Active Since.
- Extensions get one line ("3 extensions") even when this is the operative's most concrete output.
- Writings, badges, extensions, collectives are all separate islands instead of one coherent picture of *what this person makes and does*.
- Nothing on the page makes the operative *feel proud* to land there.

## Goals

1. **Make the page feel like home.** When the operative lands on their own profile, it should feel like a HUD they want to look at — current state, recent trajectory, what's next. When a stranger lands on it, it should answer "who is this person, what do they make, are they good?" in seconds.
2. **Use real graphs.** Don't just dump numbers. Show trajectory (score over time), rhythm (activity by day/week), composition (what kinds of work they do — CLI vs. models vs. workflows), and impact (extension pull counts, badge progression). The dataset gives you 1100 daily snapshots with full event breakdowns — use them.
3. **One coherent picture, not seven sections.** Identity, score, activity, badges, writings, extensions, collectives are facets of one operative. The page should compose them, not list them.
4. **Restraint, but with one or two memorable moments.** The home / extensions language is calm: thin rules, mostly white-on-near-black, sparing color. Honor that — but the profile is allowed one *signature* visual that earns its weight (a unique chart, a tier-progression element, a constellation of badges, etc.). Pick yours and commit.

## Design constraints

- **Standalone HTML.** Inline `<style>` and `<script>`. No external build, no framework. You can use a small charting helper inline if you want, but no CDN charting library — draw with SVG by hand. Tailwind CDN is OK if you want utilities.
- **Fonts:** Orbitron (headlines), Chakra Petch (HUD/labels and body), JetBrains Mono (data, code, numbers). Load from Google Fonts.
- **Color tokens** (use sparingly — favor mostly white/gray on near-black panels):
  - Background: `#0a0a0a` body, `#080808` / `rgba(0,0,0,0.4)` panels
  - Green primary: `#39ff14` / `#4ade80` / `#86efac`
  - Cyan accent: `#22d3ee` / `#67e8f9`
  - Magenta accent: `#ff00ff` / `#e879f9`
  - Amber: `#fbbf24` / `#f59e0b`
  - HUD-muted: `#9ca3af`, HUD-label: `#d1d5db`
- **Event color convention** (used in the existing heatmap — keep it for any event-type viz you make):
  - cli → green `#39ff14`
  - model → purple `#a78bfa`
  - workflow → blue `#38bdf8`
  - vault → yellow `#facc15`
  - data → cyan `#2dd4bf`
  - repo → orange `#fb923c`
  - extension → pink `#f472b6`
  - page_view → dim `rgba(255,255,255,0.25)`
- **No glitch noise on bulk content.** A glitch effect on the page title or username is fine; do not glitch graphs, list rows, badge tiles, or chips.
- **Mock data:** Use the exact dataset in `_DATA.md`. Embed it inline in your HTML. Do not invent other operatives. The dataset gives you one canonical operative (`swamplord_42`) with rich data plus a small comparison cohort if you want to show percentiles.

## Information you have to work with

You don't have to show every field — *prioritize, collapse, hide on hover, or omit*. But here's the full surface:

**Identity**
- `username`, `name`, `bio`, `website`, `email` (only sometimes visible)
- `memberSince` (date)
- Linked accounts: GitHub, Discord, Microsoft (provider username + profile URL)
- Collectives the operative belongs to (only own profile)

**Score & tier**
- `canonicalScore` (current total, integer)
- `tier` (1–15) with `tierName` (e.g. "BAYOU PROWLER", "SWAMP LORD")
- `signInStreak` (consecutive days)
- `firstSeen` / `lastSeen` (timestamps)
- `totalEvents` (lifetime)
- `activeDays` (lifetime)
- 1100 days of daily snapshots: `{ date, totalScore, tierOrdinal, tierName, totalEvents, activeDays, streak, eventCounts }`
- `eventCounts` per day: nested by event type → command group → subcommand, with totals at each level

**Output**
- `extensionCount` (integer) — link to `/extensions/@<username>`
- `pullStats`: total pulls, top extensions by pull count
- `writings`: array of feed posts with `title`, `urlHost`, `createdAtIso`, `verdict` (approved/pending/rejected), `commentCount`

**Achievements**
- `badges`: array of `{ badgeId, name, description, visual, tierName, tierLevel, awardedAt }`. There are tiered badges (e.g. five tiers of "Streak Keeper") and one-off badges (e.g. "Founder", "Signup", "First Pull").

**Cohort context** (for percentiles, if useful)
- The dataset provides aggregate stats for the population: median score, p90 score, median streak, median active days. Use these for "you're in the top X%" framing — sparingly, and only if it serves the design.

## Deliverable

A single HTML file at `static/profile-page/<N>.html` (your prompt specifies N). At the very top of `<body>`, include this fixed banner:

```html
<div style="position:fixed;top:0;left:0;right:0;background:#000;color:#39ff14;font-family:monospace;font-size:11px;padding:6px 12px;border-bottom:1px solid #39ff14;z-index:9999;display:flex;justify-content:space-between;">
  <span>PROFILE-MOCK / DESIGN N — &lt;short name&gt;</span>
  <a href="index.html" style="color:#22d3ee;">← back to index</a>
</div>
```

Replace `N` + short name with your assigned number + a 2–4 word label (e.g. "PROFILE-MOCK / DESIGN 7 — Trajectory HUD"). Add `padding-top: 36px` to the body so content isn't hidden behind it.

The file must work standalone via `file://`. No external imports beyond Google Fonts. Embed all data inline.

## What success looks like

- A stranger can scan the page and answer "who is this, what do they make, are they good?" in under 5 seconds.
- The owner of the profile feels like landing here is satisfying — a HUD that tells them where they are and where they're going, not a stale form.
- At least one chart or visualization on the page makes you go "huh, that's a clever way to see it."
- The page would not feel out of place next to the home page or extensions page if linked from the nav.
- Your design has a clear point of view. Don't hedge by including everything from the brief plus extra. Cut what you don't need. The operative's profile is not a database dump — it's a portrait.