wehub-resource-sync
665 lines
18 KiB
HTML
665 lines
18 KiB
HTML
<!-- Copyright 2026 Anthropic PBC · SPDX-License-Identifier: Apache-2.0 -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Acme — flags.production.json</title>
|
|
<style>
|
|
:root {
|
|
--ivory: #FAF9F5;
|
|
--slate: #141413;
|
|
--clay: #D97757;
|
|
--clay-d: #B85C3E;
|
|
--oat: #E3DACC;
|
|
--olive: #788C5D;
|
|
--gray-50: #F0EEE6;
|
|
--gray-200: #D1CFC5;
|
|
--gray-500: #87867F;
|
|
--gray-800: #3D3D3A;
|
|
--white: #ffffff;
|
|
--serif: ui-serif, Georgia, "Times New Roman", serif;
|
|
--sans: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
background: var(--ivory);
|
|
color: var(--slate);
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
.wrap {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
padding: 48px 32px 64px;
|
|
}
|
|
|
|
/* ---------- header ---------- */
|
|
header { margin-bottom: 28px; }
|
|
.eyebrow {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--gray-500);
|
|
}
|
|
h1 {
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: 30px;
|
|
letter-spacing: -0.01em;
|
|
margin: 6px 0 4px;
|
|
}
|
|
.sub {
|
|
color: var(--gray-500);
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* ---------- layout ---------- */
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 320px;
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 880px) {
|
|
.layout { grid-template-columns: 1fr; }
|
|
.sidebar { position: static !important; }
|
|
}
|
|
|
|
/* ---------- warning banner ---------- */
|
|
.banner {
|
|
grid-column: 1 / -1;
|
|
display: none;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
border: 1.5px solid #E8C2AE;
|
|
background: #F8E9E0;
|
|
color: var(--clay-d);
|
|
border-radius: 10px;
|
|
font-size: 13px;
|
|
}
|
|
.banner.show { display: flex; }
|
|
.banner .glyph { font-size: 13px; line-height: 1; transform: translateY(1px); }
|
|
|
|
/* ---------- groups / panels ---------- */
|
|
.form-col { display: flex; flex-direction: column; gap: 16px; }
|
|
.group {
|
|
background: var(--white);
|
|
border: 1.5px solid var(--gray-200);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.group-head {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--gray-500);
|
|
padding: 12px 18px 11px;
|
|
border-bottom: 1.5px solid var(--gray-50);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.group-head .name { color: var(--gray-800); }
|
|
.group-head .meta { letter-spacing: 0.04em; }
|
|
|
|
/* ---------- flag rows ---------- */
|
|
.flag {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--gray-50);
|
|
border-left: 3px solid transparent;
|
|
transition: border-left-color 140ms ease, background 140ms ease;
|
|
}
|
|
.flag:last-child { border-bottom: none; }
|
|
.flag.warn {
|
|
border-left-color: var(--clay);
|
|
background: #FBF3EE;
|
|
}
|
|
|
|
.flag-info { flex: 1; min-width: 0; }
|
|
.flag-key {
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
color: var(--gray-800);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.dot {
|
|
display: none;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--clay);
|
|
flex: none;
|
|
}
|
|
.flag.changed .dot { display: inline-block; }
|
|
.rollout {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.03em;
|
|
color: var(--gray-500);
|
|
background: var(--gray-50);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: 999px;
|
|
padding: 1px 7px 2px;
|
|
}
|
|
.flag-desc {
|
|
color: var(--gray-500);
|
|
font-size: 12.5px;
|
|
margin-top: 2px;
|
|
}
|
|
.req-chip {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 5px;
|
|
margin-top: 7px;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--gray-500);
|
|
background: var(--gray-50);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: 999px;
|
|
padding: 2px 9px 3px;
|
|
}
|
|
.req-chip .warn-glyph { display: none; }
|
|
.flag.warn .req-chip {
|
|
color: var(--clay-d);
|
|
background: #F8E1D5;
|
|
border-color: #E8C2AE;
|
|
}
|
|
.flag.warn .req-chip .warn-glyph { display: inline; }
|
|
|
|
/* ---------- toggle switch ---------- */
|
|
.toggle {
|
|
position: relative;
|
|
flex: none;
|
|
width: 38px;
|
|
height: 22px;
|
|
margin-top: 1px;
|
|
}
|
|
.toggle input {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
.toggle .track {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--gray-200);
|
|
border-radius: 999px;
|
|
transition: background 160ms ease;
|
|
pointer-events: none;
|
|
}
|
|
.toggle .track::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--white);
|
|
box-shadow: 0 1px 2px rgba(20,20,19,0.18);
|
|
transition: transform 160ms ease;
|
|
}
|
|
.toggle input:checked + .track { background: var(--olive); }
|
|
.toggle input:checked + .track::after { transform: translateX(16px); }
|
|
.toggle input:focus-visible + .track {
|
|
outline: 2px solid var(--slate);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ---------- sidebar ---------- */
|
|
.sidebar {
|
|
position: sticky;
|
|
top: 24px;
|
|
background: var(--white);
|
|
border: 1.5px solid var(--gray-200);
|
|
border-radius: 12px;
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.side-label {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--gray-500);
|
|
}
|
|
.side-count {
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: 19px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.side-count .warn-n { color: var(--clay-d); }
|
|
.side-count .sep { color: var(--gray-200); margin: 0 4px; }
|
|
.diff {
|
|
margin: 0;
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
background: var(--gray-50);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
overflow-x: auto;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
white-space: pre;
|
|
}
|
|
.diff .minus { color: var(--gray-500); }
|
|
.diff .plus { color: var(--olive); }
|
|
.diff .empty { color: var(--gray-500); }
|
|
|
|
.btn {
|
|
display: block;
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: 999px;
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
padding: 9px 16px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.btn.primary {
|
|
background: var(--slate);
|
|
color: var(--ivory);
|
|
}
|
|
.btn.primary:hover:not(:disabled) { background: var(--gray-800); }
|
|
.btn.primary:disabled {
|
|
background: var(--gray-200);
|
|
color: var(--gray-500);
|
|
cursor: not-allowed;
|
|
}
|
|
.btn.primary.copied { background: var(--olive); }
|
|
.btn.ghost {
|
|
background: transparent;
|
|
color: var(--gray-800);
|
|
border: 1.5px solid var(--gray-200);
|
|
}
|
|
.btn.ghost:hover { border-color: var(--gray-500); }
|
|
.btn.ghost.copied { border-color: var(--olive); color: var(--olive); }
|
|
.btn-stack { display: flex; flex-direction: column; gap: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header>
|
|
<div class="eyebrow">Acme / editor / feature-flags</div>
|
|
<h1>flags.production.json</h1>
|
|
<p class="sub">A form-based editor for the production feature-flag config.
|
|
Toggle flags, fix dependency warnings as they surface, then copy out
|
|
only the lines that changed.</p>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<div class="banner" id="banner">
|
|
<span class="glyph">⚠</span>
|
|
<span id="bannerText">1 flag is enabled without its prerequisite</span>
|
|
</div>
|
|
|
|
<div class="form-col" id="formCol"><!-- groups injected --></div>
|
|
|
|
<aside class="sidebar">
|
|
<div>
|
|
<div class="side-label">Pending changes</div>
|
|
<div class="side-count" id="sideCount">0 changed</div>
|
|
</div>
|
|
<pre class="diff" id="diff"><span class="empty">// no changes yet</span></pre>
|
|
<div class="btn-stack">
|
|
<button class="btn primary" id="copyDiff" disabled>Copy diff</button>
|
|
<button class="btn ghost" id="copyJson">Copy full JSON</button>
|
|
<button class="btn ghost" id="reset">Reset</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// data — the production flag set, as it exists right now
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const GROUPS = [
|
|
{
|
|
id: "onboarding",
|
|
label: "Onboarding",
|
|
flags: [
|
|
{ key: "onboarding.checklist_v2",
|
|
desc: "New three-step setup checklist replacing the modal tour.",
|
|
on: true },
|
|
{ key: "onboarding.invite_nudge",
|
|
desc: "Nudge owners to invite teammates after creating their first project.",
|
|
on: true },
|
|
{ key: "onboarding.workspace_templates",
|
|
desc: "Offer prebuilt workspace templates during signup.",
|
|
on: false, requires: "onboarding.checklist_v2" },
|
|
{ key: "onboarding.skip_email_verify",
|
|
desc: "Let SSO-domain users in before email verification completes.",
|
|
on: false }
|
|
]
|
|
},
|
|
{
|
|
id: "sync",
|
|
label: "Sync engine",
|
|
flags: [
|
|
{ key: "sync.delta_compression",
|
|
desc: "Send field-level deltas instead of full document snapshots.",
|
|
on: true },
|
|
{ key: "sync.offline_queue_v2",
|
|
desc: "Persist offline edits to IndexedDB and replay on reconnect.",
|
|
on: false, requires: "sync.delta_compression" },
|
|
{ key: "sync.presence_cursors",
|
|
desc: "Show live collaborator cursors in board and doc views.",
|
|
on: true },
|
|
{ key: "sync.conflict_banner",
|
|
desc: "Surface a merge banner instead of silently last-write-wins.",
|
|
on: false, requires: "sync.offline_queue_v2" },
|
|
{ key: "sync.binary_ws_frames",
|
|
desc: "Switch the realtime channel to binary WebSocket frames.",
|
|
on: false, rollout: 10 }
|
|
]
|
|
},
|
|
{
|
|
id: "billing",
|
|
label: "Billing",
|
|
flags: [
|
|
{ key: "billing.usage_meter",
|
|
desc: "Show per-seat usage meter on the workspace billing page.",
|
|
on: false },
|
|
{ key: "billing.annual_discount_banner",
|
|
desc: "Promote the annual-plan discount in the upgrade flow.",
|
|
on: true },
|
|
{ key: "billing.proration_preview",
|
|
desc: "Preview the prorated charge before confirming a plan change.",
|
|
on: false, requires: "billing.usage_meter" },
|
|
{ key: "billing.dunning_emails_v3",
|
|
desc: "Use the rewritten dunning sequence with a 14-day grace window.",
|
|
on: true, rollout: 25 }
|
|
]
|
|
},
|
|
{
|
|
id: "internal",
|
|
label: "Internal",
|
|
flags: [
|
|
{ key: "internal.shadow_traffic",
|
|
desc: "Mirror 1% of API traffic to the staging cluster for diffing.",
|
|
on: false },
|
|
{ key: "internal.query_tracing",
|
|
desc: "Attach OpenTelemetry spans to every Postgres query.",
|
|
on: true },
|
|
{ key: "internal.kill_switch_ui",
|
|
desc: "Expose the emergency kill-switch panel in the admin console.",
|
|
on: true, requires: "internal.query_tracing" }
|
|
]
|
|
}
|
|
];
|
|
|
|
// flat lookup, plus a frozen copy of initial state
|
|
const FLAGS = {};
|
|
const INITIAL = {};
|
|
GROUPS.forEach(g => g.flags.forEach(f => {
|
|
FLAGS[f.key] = f;
|
|
INITIAL[f.key] = f.on;
|
|
}));
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// render the form once; state lives in the checkboxes
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const formCol = document.getElementById("formCol");
|
|
const banner = document.getElementById("banner");
|
|
const bannerTxt = document.getElementById("bannerText");
|
|
const sideCount = document.getElementById("sideCount");
|
|
const diffEl = document.getElementById("diff");
|
|
const copyDiffBtn = document.getElementById("copyDiff");
|
|
const copyJsonBtn = document.getElementById("copyJson");
|
|
const resetBtn = document.getElementById("reset");
|
|
|
|
function esc(s) {
|
|
return String(s).replace(/[&<>"]/g, c =>
|
|
({ "&": "&", "<": "<", ">": ">", '"': """ }[c]));
|
|
}
|
|
|
|
function buildForm() {
|
|
formCol.innerHTML = "";
|
|
for (const g of GROUPS) {
|
|
const panel = document.createElement("section");
|
|
panel.className = "group";
|
|
panel.dataset.group = g.id;
|
|
|
|
const head = document.createElement("div");
|
|
head.className = "group-head";
|
|
head.innerHTML =
|
|
'<span class="name">' + esc(g.label) + '</span>' +
|
|
'<span class="meta" data-meta></span>';
|
|
panel.appendChild(head);
|
|
|
|
for (const f of g.flags) {
|
|
const row = document.createElement("div");
|
|
row.className = "flag";
|
|
row.dataset.key = f.key;
|
|
|
|
const rolloutBadge = (typeof f.rollout === "number")
|
|
? '<span class="rollout">' + f.rollout + '%</span>'
|
|
: "";
|
|
|
|
const reqChip = f.requires
|
|
? '<div class="req-chip"><span class="warn-glyph">⚠</span>' +
|
|
'<span>requires ' + esc(f.requires) + '</span></div>'
|
|
: "";
|
|
|
|
row.innerHTML =
|
|
'<label class="toggle">' +
|
|
'<input type="checkbox" data-key="' + esc(f.key) + '"' +
|
|
(f.on ? " checked" : "") +
|
|
' aria-label="' + esc(f.key) + '">' +
|
|
'<span class="track"></span>' +
|
|
'</label>' +
|
|
'<div class="flag-info">' +
|
|
'<div class="flag-key"><span class="dot"></span>' +
|
|
'<span>' + esc(f.key) + '</span>' + rolloutBadge +
|
|
'</div>' +
|
|
'<div class="flag-desc">' + esc(f.desc) + '</div>' +
|
|
reqChip +
|
|
'</div>';
|
|
|
|
panel.appendChild(row);
|
|
}
|
|
formCol.appendChild(panel);
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// state helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function currentState() {
|
|
const state = {};
|
|
formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
|
|
state[cb.dataset.key] = cb.checked;
|
|
});
|
|
return state;
|
|
}
|
|
|
|
function computeDiff(state) {
|
|
const lines = [];
|
|
for (const g of GROUPS) {
|
|
for (const f of g.flags) {
|
|
if (state[f.key] !== INITIAL[f.key]) {
|
|
lines.push({ key: f.key, from: INITIAL[f.key], to: state[f.key] });
|
|
}
|
|
}
|
|
}
|
|
return lines;
|
|
}
|
|
|
|
function diffText(lines) {
|
|
return lines.map(l =>
|
|
'- "' + l.key + '": ' + l.from + '\n' +
|
|
'+ "' + l.key + '": ' + l.to
|
|
).join("\n");
|
|
}
|
|
|
|
function fullJson(state) {
|
|
// grouped, ordered, pretty-printed — what you'd actually paste into the file
|
|
let out = "{\n";
|
|
GROUPS.forEach((g, gi) => {
|
|
g.flags.forEach((f, fi) => {
|
|
const last = gi === GROUPS.length - 1 && fi === g.flags.length - 1;
|
|
out += ' "' + f.key + '": ' + state[f.key] + (last ? "" : ",") + "\n";
|
|
});
|
|
});
|
|
out += "}";
|
|
return out;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// the live update pass
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function update() {
|
|
const state = currentState();
|
|
let warnCount = 0;
|
|
|
|
// per-row decorations
|
|
for (const g of GROUPS) {
|
|
let onCount = 0;
|
|
for (const f of g.flags) {
|
|
const row = formCol.querySelector('.flag[data-key="' + CSS.escape(f.key) + '"]');
|
|
const on = state[f.key];
|
|
if (on) onCount++;
|
|
|
|
const changed = on !== INITIAL[f.key];
|
|
row.classList.toggle("changed", changed);
|
|
|
|
let warn = false;
|
|
if (f.requires && on && !state[f.requires]) warn = true;
|
|
row.classList.toggle("warn", warn);
|
|
if (warn) warnCount++;
|
|
}
|
|
const meta = formCol.querySelector(
|
|
'.group[data-group="' + g.id + '"] [data-meta]');
|
|
meta.textContent = g.flags.length + " flags, " + onCount + " on";
|
|
}
|
|
|
|
// diff + sidebar
|
|
const lines = computeDiff(state);
|
|
if (lines.length === 0) {
|
|
diffEl.innerHTML = '<span class="empty">// no changes yet</span>';
|
|
copyDiffBtn.disabled = true;
|
|
} else {
|
|
diffEl.innerHTML = lines.map(l =>
|
|
'<span class="minus">- "' + esc(l.key) + '": ' + l.from + '</span>\n' +
|
|
'<span class="plus">+ "' + esc(l.key) + '": ' + l.to + '</span>'
|
|
).join("\n");
|
|
copyDiffBtn.disabled = false;
|
|
}
|
|
|
|
sideCount.innerHTML =
|
|
lines.length + " changed" +
|
|
'<span class="sep">·</span>' +
|
|
'<span class="' + (warnCount ? "warn-n" : "") + '">' +
|
|
warnCount + " warning" + (warnCount === 1 ? "" : "s") +
|
|
"</span>";
|
|
|
|
// banner
|
|
if (warnCount > 0) {
|
|
bannerTxt.textContent =
|
|
warnCount === 1
|
|
? "1 flag is enabled without its prerequisite"
|
|
: warnCount + " flags are enabled without their prerequisites";
|
|
banner.classList.add("show");
|
|
} else {
|
|
banner.classList.remove("show");
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// clipboard + buttons
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function flash(btn, label) {
|
|
const orig = btn.textContent;
|
|
btn.textContent = label;
|
|
btn.classList.add("copied");
|
|
btn.disabled = true;
|
|
setTimeout(() => {
|
|
btn.textContent = orig;
|
|
btn.classList.remove("copied");
|
|
btn.disabled = false;
|
|
update(); // restore disabled state on copyDiff if needed
|
|
}, 1200);
|
|
}
|
|
|
|
function writeClipboard(text) {
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
return navigator.clipboard.writeText(text);
|
|
}
|
|
// fallback for file:// contexts without clipboard permission
|
|
const ta = document.createElement("textarea");
|
|
ta.value = text;
|
|
ta.style.position = "fixed";
|
|
ta.style.left = "-9999px";
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
try { document.execCommand("copy"); } catch (e) { /* ignore */ }
|
|
document.body.removeChild(ta);
|
|
return Promise.resolve();
|
|
}
|
|
|
|
copyDiffBtn.addEventListener("click", () => {
|
|
const lines = computeDiff(currentState());
|
|
if (!lines.length) return;
|
|
writeClipboard(diffText(lines)).then(() => flash(copyDiffBtn, "Copied ✓"));
|
|
});
|
|
|
|
copyJsonBtn.addEventListener("click", () => {
|
|
writeClipboard(fullJson(currentState())).then(() => flash(copyJsonBtn, "Copied ✓"));
|
|
});
|
|
|
|
resetBtn.addEventListener("click", () => {
|
|
formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
|
|
cb.checked = INITIAL[cb.dataset.key];
|
|
});
|
|
update();
|
|
});
|
|
|
|
formCol.addEventListener("change", e => {
|
|
if (e.target.matches("input[type=checkbox]")) update();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// boot
|
|
// ---------------------------------------------------------------------------
|
|
|
|
buildForm();
|
|
update();
|
|
</script>
|
|
</body>
|
|
</html>
|