BRIEF #17 — UCCO Support Page: Interactive Timeline Thermometer¶

SURFACE: ucco.foundation (ucco-foundation repo) DO NOT TOUCH: ucca.online, ops.ucca.online, ops.ucco.foundation, rtopacks.com.au, ir.ucca.online, keys.ucca.online, mcp.ucca.online, mcp.ucco.foundation, pioneer.ucco.foundation CF ACCOUNT: UCCO Foundation — confirm correct account before any operation.

Date: 16 March 2026 Status: READY TO BUILD Depends on: Mercury ops integration (Brief #14 ✅), Standard Graphics Unit (Brief #15 ✅)

→ TIM (Plain English)¶

This brief builds the "Support" page on ucco.foundation. It's the fundraising and transparency page for the foundation.

The centrepiece is an interactive timeline thermometer that tells the foundation's story from 2017 to the future. It's not a traditional fundraising bar — it's the foundation's autobiography in data form. Cash milestones appear above the timeline (every dollar that came in), achievement milestones appear below (spec releases, deployments, submissions — the work). You can scrub back to 2017 and see years of milestones with no money, then watch the money track begin in 2026. Future aspirational milestones (scholarship fund, AAIF membership) sit greyed out to the right.

Around the thermometer: live treasury balance from Mercury, a Stripe fee "shame meter," donor stats, a spending allocation doughnut chart, and a Stripe Checkout donation flow.

What's live now vs later: - Stripe is wired to the existing UCCA Inc USD Stripe account. After UCCO Foundation incorporates in Kentucky, we create a foundation Stripe account and rekey. - Mercury balance is pulled from the UCCO Foundation Account (in trust) ••0538 via the existing UCCA Mercury API token. After incorporation, Mercury gets a new foundation org, new token, rekey. - Both integrations have rekey comment blocks so the swap is a 10-minute job.

What you curate separately: The milestone content (dates, descriptions, categories) is stored in a JSON file or D1 table — not hardcoded. You, Jimmy, and the board decide what goes on the timeline. The brief builds the instrument; you write the monologue.

Safety: The site is behind CF Access. This page won't be publicly discoverable until you remove CF Access. But even so — use placeholder milestone content that you'd be comfortable with if someone saw it. No test data, no joke entries.

→ ALEX (Build Instructions)¶

Add "Support" link to ucco.foundation top navigation (rightmost item before any CTA)
Route: /support
Page title: "Support the Standard"
OG meta: title "Support the Standard — UCCO Foundation", description "Help fund the open standard for capability certification."

2. Page Layout (top to bottom)¶

2A. Hero Section¶

SUPPORT THE STANDARD

The UCCO Foundation maintains an open standard for capability certification.
We operate on transparency, community support, and zero institutional funding.

Dark background consistent with site theme
"Support the Standard" as h1
Two-line subtitle in lighter weight
No CTA button in hero — the page IS the CTA

2B. Interactive Timeline Thermometer (CENTREPIECE)¶

This is a custom component extending the Standard Graphics Unit (<UCCAChart />). It is the hero visual of the page.

Architecture:

Horizontal timeline (x-axis = time, locked)
Time range: 2017 → present → future (aspirational)
Scrollable/scrubbable via drag or time slider control
Default view: current date, zoomed to show recent activity

Dual-track milestone system:

Top track (cash): Cumulative gross inbound funds. The thermometer fill grows left to right as money arrives. Green fill. Only tracks money IN — never decreases with expenses.
Tooltip (above): Date, amount received, cumulative total, one-line description of what it enabled
Example: "Apr 2026 — $1,200 received — 501(c)(3) application filed"
Bottom track (achievements): Non-cash milestones. Spec releases, GitHub activity, MCP deployments, standard submissions, incorporation events.
Tooltip (below): Date, milestone name, one-line description
Example: "Mar 2026 — MCP discovery layer deployed on all surfaces"

Pre-money era (2017–2025): - Thermometer fill is empty (no cash track) - Bottom track has achievement milestones — years of work before the first dollar - This is the story: "Nine years of milestones before anyone gave us a cent"

Current era (2026+): - Cash track begins, thermometer starts filling - Both tracks populate simultaneously - Achievement milestones accelerate

Future (right of "now"): - Greyed out / dashed style - Aspirational milestones with no dates or approximate dates - Examples: "AAIF associate membership", "College scholarship fund — $250K target", "First scholarship awarded"

Interaction model: - Crosshair tooltip locked to x-axis (same pattern as existing UCCAChart crosshair) - Hover/tap a milestone marker → tooltip appears above (cash) or below (achievement) - Time slider or drag to scrub through history - "Now" indicator (vertical line or marker at current date) - Smooth animation on load — thermometer fills from left to right

Milestone data source: - JSON file at /data/milestones.json OR D1 table support_milestones - Recommend: JSON file committed to repo for now. D1 when Tim wants to manage from ops. - Schema per milestone:

{
  "id": "uuid",
  "date": "2026-03-15",
  "track": "cash" | "achievement",
  "amount": 1200,           // cash track only, cumulative not per-event
  "gross_received": 1200,   // cash track only, this event's gross amount
  "title": "501(c)(3) application filed",
  "description": "Formal application submitted to IRS for tax-exempt status.",
  "future": false           // true = greyed out aspirational milestone
}

Provide a starter JSON with 3-5 placeholder milestones (mix of cash and achievement, including at least one pre-2026 achievement and one future aspirational). Use realistic but clearly placeholder content. Tim will curate the real content separately.

Visual style: - Background: dark, consistent with site theme - Thermometer fill: site accent colour (teal/green) - Cash milestone markers: filled circles above the line - Achievement milestone markers: outlined circles below the line - Future milestones: dashed outline, lower opacity - "Now" marker: vertical dashed line - Typography: IBM Plex (self-hosted, already on site)

2C. Live Treasury Balance Card¶

┌─────────────────────────────────────┐
│  Foundation Treasury                │
│  $194.30                            │
│  ● Live    Updated 2 minutes ago    │
│                                     │
│  Our banking partner                │
│  API-first infrastructure enables   │
│  the live treasury transparency     │
│  you see on this page.              │
└─────────────────────────────────────┘

Pull balance from Mercury API via existing /api/mercury/summary route on ucco-ops
Green "Live" badge with pulse dot
"Updated X minutes ago" from mercury_cache TTL
"Our banking partner" placeholder text — DO NOT use Mercury name or logo
When Mercury gives permission, this becomes: "Banking infrastructure by Mercury — mercury.com" with referral link
Add a  comment

2D. Stat Cards Row¶

Three cards, horizontal on desktop, stacked on mobile:

Card	Value	Source
Supporters	"0"	Stripe customer count (hardcoded "0" until live)
Total Raised	"$0"	Stripe total (hardcoded until live)
Avg. Donation	"$0"	Calculated (hardcoded until live)

Monospace numbers, large
Hardcoded zeros for now — wired to Stripe API after incorporation and rekey
Add  comment

2E. Stripe Fee Shame Meter¶

⚠ Payment Processing Overhead
$0.00 of $0.00 raised consumed by processing fees (0.0%)
[thin red progress bar]

Cumulative Stripe fees as a percentage of total raised
Thin red progress bar showing the ratio visually
Hardcoded zeros for now
Factual tone — "consumed by processing fees" not "stolen by Stripe"
Add  comment

2F. Spending Allocation¶

Section heading: "Where Your Support Goes"
Doughnut chart using <UCCAChart /> Standard Graphics Unit (type: doughnut)
Board-approved TARGET percentages (not actuals):

Category	%
Infrastructure	35%
Legal & Compliance	25%
Specification Development	20%
Pioneer Outreach	12%
Reserves	8%

These are aspirational allocations — hardcoded in the component
Below the chart: one-line description per category explaining what it covers
Add comment:

2G. Donation Section¶

Section heading: "Contribute"
Amount selector: $25 / $50 / $100 / $250 / Custom
Selected amount highlights (same interactive pattern as mockup)
CTA button: "Contribute $[amount] via Stripe"
Button click → Stripe Checkout session (server-side)
Stripe integration:
Use UCCA Inc Stripe account (pk_live_51GBHZm...) — this is the live account already connected via MCP
Create a Stripe Checkout session server-side via ucco-ops Worker (new route: /api/stripe/checkout)
Product: "UCCO Foundation Donation" (one-time payment, variable amount)
Success URL: /support?donated=true
Cancel URL: /support
Add  comment in the Worker route
Stripe secret key: set as STRIPE_SECRET_KEY Worker secret on ucco-ops (Tim will provide from existing UCCA Stripe dashboard)
Below the button: "Payments processed by Stripe. UCCO Foundation is a nonprofit standards body."
On success (?donated=true): show a thank-you banner at top of page

"What Your Support Funds" — brief prose (3-4 sentences) about hosting, legal, spec work, outreach
This is static content, not dynamic

3. Stripe Integration Detail¶

Route: POST /api/stripe/checkout on ucco-ops Worker

Request: { amount: number } // cents
Response: { url: string }   // Stripe Checkout URL, redirect client to this

Validate amount >= 500 (minimum $5 donation)
Create Stripe Checkout Session with:
mode: "payment"
line_items: [{ price_data: { currency: "usd", unit_amount: amount, product_data: { name: "UCCO Foundation Donation" } }, quantity: 1 }]
success_url and cancel_url
Return Checkout URL, client redirects

Worker secret: STRIPE_SECRET_KEY — Tim sets this via wrangler secret put STRIPE_SECRET_KEY on ucco-ops.

Rekey path: After UCCO Foundation Stripe account is created: 1. wrangler secret put STRIPE_SECRET_KEY with new key on ucco-ops 2. Update pk_live_* publishable key in frontend config 3. Done

4. Mercury Integration Detail¶

Already built (Brief #14). The Support page reads from the same /api/mercury/summary endpoint on ucco-ops that the Finance page uses. No new Mercury integration needed.

Rekey path: After UCCO Foundation Mercury org is created: 1. wrangler secret put MERCURY_API_TOKEN with new token on ucco-ops 2. mercury_cache table auto-refreshes on next request 3. Done

5. Milestone Data — Starter Content¶

Create /data/milestones.json with these placeholder entries. Tim curates the real content separately.

[
  {
    "id": "ms-001",
    "date": "2017-09-25",
    "track": "achievement",
    "title": "UCCA first use in commerce",
    "description": "Capability certification services commence — USPTO first-use date.",
    "future": false
  },
  {
    "id": "ms-002",
    "date": "2024-01-15",
    "track": "achievement",
    "title": "UCCO Standard v1.0 drafted",
    "description": "First formal draft of the open standard for capability certification.",
    "future": false
  },
  {
    "id": "ms-003",
    "date": "2026-03-14",
    "track": "achievement",
    "title": "UCCO Standard v1.1 Rev2 published",
    "description": "Draft for public comment — submitted to ISO TC 307, NIST, W3C.",
    "future": false
  },
  {
    "id": "ms-004",
    "date": "2026-03-15",
    "track": "cash",
    "gross_received": 194.30,
    "title": "Foundation treasury established",
    "description": "First funds held in foundation account.",
    "future": false
  },
  {
    "id": "ms-005",
    "date": "2026-06-01",
    "track": "achievement",
    "title": "AAIF associate membership",
    "description": "Foundation joins the AI & Autonomy Interoperability Forum.",
    "future": true
  },
  {
    "id": "ms-006",
    "date": "2027-06-01",
    "track": "cash",
    "gross_received": 250000,
    "title": "College scholarship fund established",
    "description": "Applications open for students in regulated workforce training.",
    "future": true
  }
]

Note to Tim: These are placeholders. Replace with real milestones before removing CF Access. The dates, amounts, and descriptions are illustrative only. The achievement track can go back as far as you want — 2011 if you want to include the origin of the research.

6. Responsive Behaviour¶

Desktop: timeline thermometer full width, stat cards in row of 3, donation amounts in row
Tablet: timeline thermometer full width with touch scrub, stat cards in row of 3
Mobile: timeline thermometer full width with touch scrub (horizontal scroll if needed), stat cards stacked, donation amounts 2x2 grid
All sections stack vertically on mobile

7. OPS SURFACE RULE¶

Add a "Support Page" card to the ops.ucco.foundation sidebar under the existing site sections. Minimal for now:

Link to /support on live site
Status indicator: "Behind CF Access" / "Live"
Link to milestones JSON (for Tim to remember where to edit content)
Future: milestone editor UI in ops (not this brief)

REKEY SUMMARY¶

Both integrations run on UCCA Inc infrastructure until UCCO Foundation incorporates.

Integration	Current	After Incorporation	Swap Method
Stripe	UCCA Inc USD account (`pk_live_51GBHZm...`)	New UCCO Foundation Stripe account	`wrangler secret put STRIPE_SECRET_KEY` on ucco-ops + update frontend publishable key
Mercury	UCCA Mercury token → UCCO Foundation Account (in trust) ••0538	New UCCO Foundation Mercury org + token	`wrangler secret put MERCURY_API_TOKEN` on ucco-ops

Both are 10-minute rekey jobs. Look for  comments in the codebase.

CHECKLIST¶

Brief #17 — UCCO Support Page: Interactive Timeline Thermometer "The human is the bridge. The timeline is the story."