UCCO Foundation Ops Panel Brief v1

SURFACE: ops.ucco.foundation (new Worker or Pages project in foundation CF account)
CF ACCOUNT: aed3398a4e698767328cc3a9e698721d (foundation)
DO NOT TOUCH: UCCA account (e5a9830215a8d88961dc6c80a8c7442a), all UCCA repos,
              all UCCA Workers, ucco-site (the public site), ucco-standard repo

Date: 2026-03-14 Author: Claude (architect) → Alex (build) Prerequisite: UCCO-Site-Brief-v2 must be confirmed deployed before starting this brief.

---

→ TIM

This brief builds an ops panel for the UCCO Foundation at ops.ucco.foundation. Same concept as the UCCA ops console — a single-page dashboard showing the health and activity of all foundation surfaces — but scoped to foundation infrastructure only.

What it shows (Layer 1 — all we need right now):

• Zone health for all three CF zones (ucco.foundation, ucca.foundation, ucco.online) — SSL status, DNS status, last deploy timestamp
• Analytics across all three domains — page views, unique visitors, bandwidth, top pages, top referrers, geographic breakdown. Pulled from the Cloudflare Analytics API.
• GitHub pulse for ucco-standard and ucco-site — stars, forks, open issues, open discussions, last commit
• Pioneer key telemetry — placeholder panel for when the API is built. Shows: keys issued, keys used, keys opted-out, keys destroyed. Empty for now.

Auth: Cloudflare Access with One-Time PIN sent to admin@ucco.foundation. No username/password, no SSO. You visit ops.ucco.foundation, enter your email, get a PIN, you're in.

Design: Same blueprint aesthetic as the rest of the foundation — dark background, paper-coloured text, IBM Plex Mono, minimal. Matches the UCCA ops console in layout and function, not a copy-paste but the same DNA.

---

→ ALEX

Phase 1: Cloudflare Access Setup

Before building anything, set up CF Access on the foundation account.

1.1 — Enable Cloudflare Zero Trust

In the foundation CF dashboard (account aed3398a4e698767328cc3a9e698721d): - Go to Zero Trust → Settings - If not already enabled, set up the Zero Trust org (use ucco-foundation as the team name) - The auth domain will be something like ucco-foundation.cloudflareaccess.com

1.2 — Create an Access Application

Zero Trust → Access → Applications → Add an application: - Type: Self-hosted - Application name: UCCO Foundation Ops - Application domain: ops.ucco.foundation - Session duration: 24 hours

1.3 — Create an Access Policy

Add a policy to the application: - Policy name: Foundation admin - Action: Allow - Include rule: Emails — admin@ucco.foundation - Authentication method: One-time PIN

This means: only admin@ucco.foundation can access the panel, and they authenticate via a PIN emailed to that address.

1.4 — DNS Record

Add a DNS record in the ucco.foundation zone for the ops subdomain. This will be created automatically when the Worker or Pages project is deployed with the custom domain, but verify it exists: - Type: CNAME (or proxied A record, depending on deployment method) - Name: ops - Proxied: Yes (orange cloud — required for CF Access to intercept)

Phase 2: Project Setup

Create a new Next.js project for the ops panel:

mkdir -p ~/projects/ucco-project/ucco-ops
cd ~/projects/ucco-project/ucco-ops
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --no-import-alias

This is a separate project from ucco-site. It does not go in the ucco-site repo.

Git: This can live in the existing ucco-site repo as a separate branch or directory, OR as a new private repo ucco-ops in the ucco-foundation org. Preference: new private repo ucco-ops.

# Create repo on GitHub (ucco-foundation org, private)
gh repo create ucco-foundation/ucco-ops --private --clone=false
cd ~/projects/ucco-project/ucco-ops
git init
git remote add origin https://github.com/ucco-foundation/ucco-ops.git

Phase 3: Design System

Use the same design system as the main site (Brief v2). Copy the CSS variables, font setup, and Tailwind config from ucco-site. The ops panel should feel like a sibling of the main site, not a different product.

Key differences from the main site: - No hero video, no marketing content - Dense information layout — more like a dashboard than a landing page - Monospace-heavy (IBM Plex Mono for everything, DM Serif Display only for page title) - Status indicators: green dot = healthy, amber dot = warning, red dot = error, grey dot = unknown

Colour additions for the ops panel (add to CSS variables):

:root {
  /* ... all existing variables from site brief v2 ... */

  /* Status colours */
  --status-green: #34D399;
  --status-amber: #FBBF24;
  --status-red: #F87171;
  --status-grey: rgba(232, 220, 200, 0.3);
}

Phase 4: Data Sources

The ops panel fetches data from two sources: the Cloudflare API and the GitHub API.

4.1 — Cloudflare Analytics API

Use the CF GraphQL Analytics API to pull zone-level analytics.

Endpoint: https://api.cloudflare.com/client/v4/graphql

The API token needs these permissions on the foundation account: - Zone: Analytics: Read - Zone: Zone: Read - Zone: SSL and Certificates: Read (for SSL status)

Store the API token as an environment variable. For a Pages project, set it in the CF dashboard under Pages → ucco-ops → Settings → Environment variables: - CF_API_TOKEN — the analytics-scoped token - CF_ACCOUNT_ID — aed3398a4e698767328cc3a9e698721d

Zone IDs (Alex to look these up via API or dashboard — they were created during the site brief): - CF_ZONE_UCCO_FOUNDATION — zone ID for ucco.foundation - CF_ZONE_UCCA_FOUNDATION — zone ID for ucca.foundation - CF_ZONE_UCCO_ONLINE — zone ID for ucco.online

GraphQL query for zone analytics (last 7 days):

query {
  viewer {
    zones(filter: { zoneTag: $zoneId }) {
      httpRequests1dGroups(
        limit: 7
        filter: { date_geq: $startDate, date_leq: $endDate }
        orderBy: [date_ASC]
      ) {
        dimensions {
          date
        }
        sum {
          requests
          pageViews
          bytes
        }
        uniq {
          uniques
        }
      }
    }
  }
}

Additional queries needed: - Top pages: httpRequests1dGroups with filter by clientRequestPath - Top referrers: httpRequests1dGroups grouped by refererHost - Geographic breakdown: httpRequests1dGroups grouped by clientCountryName - SSL status: REST API GET /zones/{zone_id}/settings/ssl - Zone details: REST API GET /zones/{zone_id}

4.2 — GitHub API

Use the GitHub REST API (unauthenticated for public repo data, or with a token for higher rate limits).

For ucco-foundation/ucco-standard (public):

GET https://api.github.com/repos/ucco-foundation/ucco-standard

Returns: stargazers_count, forks_count, open_issues_count, pushed_at

For discussions count (requires GraphQL):

query {
  repository(owner: "ucco-foundation", name: "ucco-standard") {
    discussions { totalCount }
    stargazerCount
    forkCount
    issues(states: OPEN) { totalCount }
    pushedAt
  }
}

Store GitHub token as env var: GITHUB_TOKEN (the ucco-foundation-push PAT, or create a read-only one).

4.3 — Data fetching architecture

Since this is a static export deployed to Pages, data fetching happens client-side. The ops panel is behind CF Access, so there's no public exposure concern.

However, we don't want to expose API tokens in client-side JavaScript. Two options:

Option A (recommended): API route via Cloudflare Functions

Cloudflare Pages supports Functions (server-side). Create API routes that proxy the CF and GitHub API calls, keeping tokens server-side:

/functions/api/analytics.ts  → proxies CF Analytics API
/functions/api/github.ts     → proxies GitHub API
/functions/api/zones.ts      → proxies CF Zone API

For this, do NOT use output: 'export'. Instead, use the @cloudflare/next-on-pages adapter for full server-side support:

npm install -D @cloudflare/next-on-pages vercel

wrangler.toml:

name = "ucco-ops"
compatibility_date = "2024-09-23"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[vars]
CF_ACCOUNT_ID = "aed3398a4e698767328cc3a9e698721d"
# CF_API_TOKEN, GITHUB_TOKEN, and zone IDs set in CF Pages dashboard as secrets

Build command: npx @cloudflare/next-on-pages

Option B (simpler, if Functions cause issues): Static page with Workers API proxy

Deploy the frontend as static Pages. Deploy a separate Worker ucco-ops-api that handles all API calls. The frontend calls the Worker endpoints. The Worker holds the tokens as secrets.

Go with Option A first. Fall back to Option B if the Next.js-on-Pages setup fights you.

Phase 5: Page Layout

Single page: src/app/page.tsx

The layout is a vertical stack of panels. Each panel is a full-width card with a header and content area.

5.1 — Page header

UCCO Foundation Ops
[last refreshed: 2 min ago]  [Refresh]

Small UCCO mark top-left. "Ops" label. Last refresh timestamp. Manual refresh button.

Auto-refresh: poll every 5 minutes. Show a subtle countdown or pulse indicator.

5.2 — Zone Health Panel

Title: Surfaces

Three cards in a row (responsive — stack on mobile):

ucco.foundation	ucca.foundation	ucco.online
● Healthy	● Healthy	● Healthy
SSL: Full (Strict)	SSL: Full (Strict)	SSL: Full (Strict)
Pages deploy	Worker	Worker
Last deploy: [timestamp]	Last deploy: [timestamp]	Last deploy: [timestamp]

Status dot colour: - Green: zone active, SSL valid, proxied - Amber: zone active but SSL not Full (Strict), or certificate expiring < 30 days - Red: zone not resolving, SSL error, or Worker/Pages returning errors - Grey: unable to check (API error)

5.3 — Analytics Panel

Title: Traffic — Last 7 Days

Show data for all three zones combined, with an option to filter by zone.

Top row: four metric cards - Requests — total HTTP requests - Page Views — total page views - Unique Visitors — unique visitors - Bandwidth — total bytes transferred (format as KB/MB/GB)

Below: a simple bar chart or sparkline showing daily requests over the 7-day period. Use a lightweight chart library — Chart.js via CDN, or just CSS bars.

Below that: two columns - Top Pages — list of top 10 paths by request count - Top Referrers — list of top 10 referrer hosts

Below that: - Countries — top 10 countries by unique visitors

5.4 — GitHub Panel

Title: GitHub — ucco-standard

Single row of metric cards: - Stars — stargazer count - Forks — fork count - Open Issues — open issue count - Discussions — discussion count - Last Push — relative timestamp of last commit

Link: "View on GitHub →" opens the repo.

5.5 — Pioneer Keys Panel (placeholder)

Title: Pioneer Keys

Greyed out / coming soon state. Four metric cards, all showing "—": - Issued — 0/10 - Activated — 0 - Opted Out — 0 - Destroyed — 0

A note: "Pioneer key telemetry will be available when the API endpoint is deployed."

This panel will be wired up when we build the pioneer API Worker.

Phase 6: Build & Deploy

cd ~/projects/ucco-project/ucco-ops
npx @cloudflare/next-on-pages
npx wrangler pages deploy .vercel/output/static \
  --project-name=ucco-ops \
  --branch=main \
  --commit-dirty=true

After first deploy, add custom domain in CF Pages dashboard: - Pages → ucco-ops → Custom domains → Add ops.ucco.foundation

Verify CF Access is intercepting: visit ops.ucco.foundation in a browser. You should see the Cloudflare Access login page asking for an email. Enter admin@ucco.foundation, receive PIN, enter PIN, see the ops panel.

Phase 7: Environment Variables

Set these in CF Pages dashboard (Pages → ucco-ops → Settings → Environment variables):

Production secrets (encrypted): - CF_API_TOKEN — Cloudflare API token with Analytics:Read, Zone:Read, SSL:Read on the foundation account - GITHUB_TOKEN — GitHub PAT with public_repo read access (or use ucco-foundation-push if it has the right scopes)

Production variables (plain text): - CF_ACCOUNT_ID — aed3398a4e698767328cc3a9e698721d - CF_ZONE_UCCO_FOUNDATION — [zone ID — look up in dashboard] - CF_ZONE_UCCA_FOUNDATION — [zone ID — look up in dashboard] - CF_ZONE_UCCO_ONLINE — [zone ID — look up in dashboard]

Phase 8: Git

cd ~/projects/ucco-project/ucco-ops
git add -A
git commit -m "feat: foundation ops panel — zone health, analytics, github pulse"
git push origin main

Deployment Checklist

• CF Access application created for ops.ucco.foundation
• CF Access policy: allow admin@ucco.foundation via One-Time PIN
• Next.js project builds with @cloudflare/next-on-pages
• API routes proxy CF Analytics and GitHub data without exposing tokens
• Zone health panel shows status for all three zones
• Analytics panel shows 7-day traffic data
• GitHub panel shows repo stats for ucco-standard
• Pioneer keys panel renders in placeholder state
• Auto-refresh polling works (5-minute interval)
• Responsive layout (works on mobile)
• Deployed to CF Pages with custom domain ops.ucco.foundation
• CF Access login intercepts unauthenticated visitors
• PIN delivery to admin@ucco.foundation works

Tim Actions After Deploy

1. Create CF API token in the foundation account dashboard (My Profile → API Tokens → Create Token). Permissions: Zone Analytics:Read, Zone:Read, SSL and Certificates:Read. Zone scope: All zones in the foundation account.
2. Set environment variables in CF Pages dashboard for ucco-ops (see Phase 7).
3. Test CF Access flow: visit ops.ucco.foundation → enter admin@ucco.foundation → receive PIN → enter PIN → confirm you see the dashboard.
4. Verify analytics data is flowing after 24-48 hours of traffic to the foundation sites.

---

END OF BRIEF