fix(ui): add a shared bg-surface-code token for the always-dark code surface

[galuis116]

Summary

• The always-dark code-surface color oklch(0.13 0.005 260) was copy-pasted verbatim across 4 call sites in 3 unrelated files (control-primitives.tsx's DiffBlock, maintainer-panel.tsx's comment preview, and try-it.tsx's request/response blocks), with no shared token naming it.
• Adds --surface-code to packages/loopover-ui-kit/src/theme.css, mapped through @theme inline as --color-surface-code so Tailwind generates a bg-surface-code utility. Defined only in :root, deliberately not redefined inside .dark, so it renders identically regardless of the active theme (matching its "always-dark" intent).
• Migrated all 4 call sites from the raw bg-[oklch(0.13_0.005_260)] arbitrary value to bg-surface-code.

Test plan

• apps/loopover-ui/src/components/site/surface-code-token.test.ts (new): asserts the token is defined once in theme.css and mapped through @theme inline, asserts it is not redefined inside the .dark block, and asserts each of the 3 call sites uses bg-surface-code with no raw oklch(0.13...) literal remaining.
• npm run ui:typecheck — clean
• npm run ui:lint — clean (0 errors)
• npm --workspace @loopover/ui run test — all existing suites pass, including the touched components' existing tests (maintainer-panel.test.tsx, try-it.test.ts)

This is a pure visual no-op (same computed color, same theme behavior) — no UI screenshot included since nothing renders differently before/after.

Closes #6820

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[loopover-orb]

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-17 15:38:37 UTC}

5 files · 1 AI reviewer · no blockers · readiness 98/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This PR extracts a hardcoded oklch(0.13 0.005 260) color, duplicated across 4 call sites in 3 files, into a shared --surface-code token defined once in theme.css and mapped through @​theme inline to generate the bg-surface-code utility. The change is a correct, well-scoped pure-CSS-variable refactor: it's deliberately only defined in :root (not .dark) to preserve the always-dark intent, all 4 call sites are updated consistently, and a new test locks in both the token definition and its exclusive use. This closes #6820 and CI passed on all validation gates.

Nits — 4 non-blocking

• surface-code-token.test.ts uses a relative path ("../../packages/loopover-ui-kit/src/theme.css") which is fragile if the test runner's cwd changes; consider resolving via import.meta.url or a workspace alias.
• The .dark-block extraction in the test (css.indexOf("\n}", darkBlockStart)) assumes theme.css formatting won't change (e.g., nested braces before the closing brace) — a minor brittleness worth a comment.
• Consider adding a short comment in theme.css itself noting where the token is consumed (control-primitives, maintainer-panel, try-it) for future maintainers, mirroring the test's citation of Same raw oklch(0.13 0.005 260) background color duplicated across 4 unrelated files with no shared token #6820.
• apps/loopover-ui/src/components/site/app-panels/maintainer-panel.tsx is already large (~861 lines); unrelated to this PR, but worth flagging for a future split.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#6820
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 1952 registered-repo PR(s), 1282 merged, 52 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	galuis116; Gittensor profile; 1952 PR(s), 52 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: minor

Linked issue satisfaction

Addressed
The PR adds a --surface-code token in theme.css mapped through @​theme inline to bg-surface-code, and migrates all 4 call sites (control-primitives.tsx, maintainer-panel.tsx, try-it.tsx x2) from the raw oklch literal to the new utility class, matching both deliverables.

Review context

• Author: galuis116
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: JavaScript, Python, Dart, TypeScript, HTML, MDX, Rust, C++
• Official Gittensor activity: 1952 PR(s), 52 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Keep the PR focused and include validation evidence before maintainer review.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
• @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop	before /	after /	—
/	mobile	before / (mobile)	after / (mobile)	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review

[loopover-orb]

LoopOver approves — the gate is satisfied and CI is green.