Blame · Line-by-line history

`production-layers.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

production-layers.tsxBlame779 lines · 1 contributor

Normal view Raw

11c3ab6ccanty labs	1	import type { FC } from "hono/jsx";
	2
	3	export interface LayerData {
	4	name: string;
	5	tech: string;
	6	state: "healthy" \| "watched";
	7	detail: string;
	8	facts: string[];
	9	fix?: string;
	10	}
	11
	12	export interface ProductionLayersProps {
	13	layers?: LayerData[];
	14	user?: any;
	15	}
	16
	17	const DEFAULT_LAYERS: LayerData[] = [
	18	{
	19	name: "Frontend foundation",
	20	tech: "Hono JSX, server-rendered · zero client framework",
	21	state: "healthy",
	22	detail:
	23	"Every page is server-rendered from the same box that serves git. No SPA bundle to break, no hydration drift — first paint is the page.",
	24	facts: ["p75 paint 240ms", "0 client deps", "themes: light/dark"],
	25	},
	26	{
	27	name: "Request routing",
	28	tech: "Caddy · TLS termination · path-based routing",
	29	state: "healthy",
	30	detail:
	31	"Caddy terminates TLS and routes by path prefix — no gateway DSL to learn. Certificates auto-renew; routing changes take effect on config reload with zero dropped connections.",
	32	facts: ["2 edge nodes", "certs auto-renew 71d", "failover < 3s"],
	33	},
	34	{
	35	name: "Auth & identity",
	36	tech: "Sessions, PATs, OAuth2, passkeys, OIDC SSO",
	37	state: "healthy",
	38	detail:
	39	"Every credential type funnels through one permission resolver. Org/team roles, branch protection, and CODEOWNERS all evaluate in the same place — one model to audit.",
	40	facts: ["2FA + WebAuthn", "SSO: Okta/Azure/Google", "token scopes: 6"],
	41	},
	42	{
	43	name: "Repo storage",
	44	tech: "Postgres (Neon) + Drizzle · git objects on disk",
	45	state: "healthy",
	46	detail:
	47	"108 migrations, all additive-first. Git object storage stays plain files on disk — recoverable with nothing but git itself.",
	48	facts: ["4ms median query", "0 lock waits 24h", "108 migrations"],
	49	},
	50	{
	51	name: "Git protocol",
	52	tech: "Smart HTTP · pack negotiation · push-time hooks",
	53	state: "healthy",
	54	detail:
	55	"Git Smart HTTP served directly from Bun. Pack negotiation handles shallow clones and partial fetches; post-receive hooks trigger gates and webhooks inline on every push.",
	56	facts: ["clone p50 1.2s", "push gate: sync", "protocol v2"],
	57	},
	58	{
	59	name: "AI orchestration",
	60	tech: "Local LLM router · private cloud burst · MCP server",
	61	state: "healthy",
	62	detail:
	63	"PR sandboxes and repair loops run on our own compute pool. The model router prefers local inference and bursts to private cloud only under load — spend is metered per repo.",
	64	facts: ["62% local inference", "24s sandbox boot", "pool: 8 workers"],
	65	},
	66	{
	67	name: "Gate engine",
	68	tech: "Push-time gates · 15-pattern secret scan · AI review",
	69	state: "watched",
	70	detail:
	71	"Gates run at the moment of push, not minutes later. 15-pattern secret scan plus AI security review on every push. One policy gap on the new flywheel_telemetry table has a drafted fix awaiting apply.",
	72	facts: ["gate p99 38s", "0 secrets leaked", "advisory scan: nightly"],
	73	fix: "Apply RLS policy to flywheel_telemetry",
	74	},
	75	{
	76	name: "Workflow runner",
	77	tech: ".gluecron/workflows · per-step timeouts · size-capped logs",
	78	state: "healthy",
	79	detail:
	80	"The workflow runner executes .gluecron/workflows with per-step timeouts and size-capped logs. No YAML knowledge required — steps are plain shell commands annotated with timeouts.",
	81	facts: ["1,412 merges/mo", "0 YAML required", "log cap: 1 MB/step"],
	82	},
	83	{
	84	name: "Package registry",
	85	tech: "npm-compatible · LRU cache · packuments · tarballs",
	86	state: "healthy",
	87	detail:
	88	"npm-compatible registry served from the same Bun process. Packuments and tarballs are LRU-cached in-process; publish gated by the same permission model as git push.",
	89	facts: ["hit rate 94%", "publish: gated", "compat: npm/pnpm/yarn"],
	90	},
	91	{
	92	name: "Notification bus",
	93	tech: "Webhooks · HMAC-SHA256 · event fan-out · retry queue",
	94	state: "healthy",
	95	detail:
	96	"Outbound webhooks sign every payload with HMAC-SHA256. A retry queue handles transient failures; the delivery log is queryable from the repo settings page.",
	97	facts: ["retry: 3× exp backoff", "HMAC-SHA256", "events: 8 types"],
	98	},
	99	{
	100	name: "Search & index",
	101	tech: "Full-text · semantic index · code search · regex",
	102	state: "healthy",
	103	detail:
	104	"Full-text search over commit messages, issue bodies, and file contents. Semantic index rebuilt on push; code search supports regex and filename filters with sub-second latency.",
	105	facts: ["index lag < 5s", "regex: yes", "semantic: per-repo"],
	106	},
	107	{
	108	name: "Telemetry",
	109	tech: "Request-ID tracing · /metrics · audit log",
	110	state: "healthy",
	111	detail:
	112	"Every request carries an ID from edge to database. Errors correlate to audit entries and gate runs automatically — the support console reads the same trail.",
	113	facts: ["trace coverage 100%", "retention 90d", "/healthz /readyz"],
	114	},
	115	{
	116	name: "Availability & recovery",
	117	tech: "Air-gapped region sync · hourly bare-metal replicas",
	118	state: "watched",
	119	detail:
	120	"Repo state, semantic indices, and the package registry replicate hourly to an offline array (0083 data-region rails). EU shard backfill completed; replica lag briefly above target during it — recovering.",
	121	facts: ["RPO 1h · RTO 15m", "replica lag 4m (target 2m)", "last drill: Jun 20 ✓"],
	122	fix: "Flush EU shard backlog · estimated 18 min",
	123	},
	124	];
	125
	126	export const ProductionLayers: FC<ProductionLayersProps> = (props) => {
	127	const layers = props.layers ?? DEFAULT_LAYERS;
	128	const watchedCount = layers.filter((l) => l.state === "watched").length;
	129	const healthyCount = layers.filter((l) => l.state === "healthy").length;
	130
	131	return (
	132	<>
	133	<style dangerouslySetInnerHTML={{ __html: css }} />
	134	<div class="pl-root">
	135	<header class="pl-header">
	136	<a href="/" class="pl-logo">
	137	<span class="pl-logo-mark"></span>
	138	gluecron
	139	<span class="pl-logo-eyebrow">admin</span>
	140	</a>
	141	<span class="pl-sep">/</span>
	142	<span class="pl-breadcrumb">Production layers</span>
	143	<div class="pl-header-right">
	144	<span class="pl-summary">
	145	<span class="pl-summary-dot"></span>
	146	{layers.length} layers · {healthyCount} healthy · {watchedCount} watched
	147	</span>
	148	<span class="pl-avatar">C</span>
	149	</div>
	150	</header>
	151
	152	<main class="pl-main">
	153	<div class="pl-intro">
	154	<div class="pl-eyebrow">Infrastructure sovereignty · every layer self-owned</div>
	155	<h1 class="pl-heading">The whole stack, one board.</h1>
	156	<p class="pl-desc">
	157	Thirteen production layers, no magic edge proxies, no external runtime dependencies.
	158	Each layer is watched by the same repair engine that heals customer pushes — click
	159	a layer for its live detail.
	160	</p>
	161	</div>
	162
	163	<div class="pl-rows" id="pl-rows">
	164	{layers.map((layer, i) => {
	165	const num = String(i + 1).padStart(2, "0");
	166	const watched = layer.state === "watched";
	167	return (
	168	<div
	169	class={`pl-item${watched ? " pl-item--watched" : ""}`}
	170	data-index={String(i)}
	171	>
	172	<button
	173	type="button"
	174	class={`pl-row${watched ? " pl-row--watched" : ""}`}
	175	data-index={String(i)}
	176	aria-expanded="false"
	177	aria-controls={`pl-detail-${i}`}
	178	>
	179	<span class="pl-row-num">{num}</span>
	180	<span class="pl-row-name">{layer.name}</span>
	181	<span class="pl-row-tech">{layer.tech}</span>
	182	<span class={`pl-row-status${watched ? " pl-row-status--watched" : ""}`}>
	183	<span class={`pl-dot${watched ? " pl-dot--watched" : ""}`}></span>
	184	{watched ? "watched" : "healthy"}
	185	</span>
	186	<span class="pl-caret" aria-hidden="true">▼</span>
	187	</button>
	188
	189	{watched && (
	190	<div class="pl-fix-callout">
	191	<span class="pl-fix-label">drafted fix</span>
	192	<span class="pl-fix-sep">—</span>
	193	<span class="pl-fix-text">{layer.fix}</span>
	194	</div>
	195	)}
	196
	197	<div
	198	class="pl-detail"
	199	id={`pl-detail-${i}`}
	200	role="region"
	201	hidden={true}
	202	>
	203	<p class="pl-detail-desc">{layer.detail}</p>
	204	<div class="pl-facts">
	205	{layer.facts.map((f, fi) => (
	206	<span class="pl-fact">{f}</span>
	207	))}
	208	</div>
	209	{watched && (
	210	<div class="pl-apply-wrap">
	211	<button
	212	type="button"
	213	class="pl-apply-btn"
	214	data-fix={layer.fix ?? ""}
	215	data-layer={layer.name}
	216	>
	217	Apply fix
	218	</button>
	219	</div>
	220	)}
	221	</div>
	222	</div>
	223	);
	224	})}
	225	</div>
	226
	227	<div class="pl-footer">
	228	<p class="pl-footer-text">
	229	Watched layers have a drafted fix or an active mitigation — nothing here requires
	230	a terminal. Air-gapped replicas sync all thirteen layers to bare-metal arrays on the hour.
	231	</p>
	232	<a href="/admin" class="pl-footer-link">Open diagnostics →</a>
	233	</div>
	234	</main>
	235	</div>
	236	<script dangerouslySetInnerHTML={{ __html: js }} />
	237	</>
	238	);
	239	};
	240
	241	export default ProductionLayers;
	242
	243	const css = `
	244	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
	245
	246	@keyframes gcPulse {
	247	0%, 100% { opacity: 1; }
	248	50% { opacity: 0.35; }
	249	}
	250
	251	/* ── Root ── */
	252	.pl-root {
	253	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	254	font-size: 14px;
	255	line-height: 1.55;
	256	letter-spacing: -0.008em;
	257	color: #16181d;
	258	background: #fcfcfd;
	259	min-height: 100vh;
	260	display: flex;
	261	flex-direction: column;
	262	-webkit-font-smoothing: antialiased;
	263	text-rendering: optimizeLegibility;
	264	}
	265
	266	/* ── Header ── */
	267	.pl-header {
	268	height: 56px;
	269	border-bottom: 1px solid rgba(22,24,29,0.07);
	270	background: #fcfcfd;
	271	display: flex;
	272	align-items: center;
	273	padding: 0 28px;
	274	gap: 20px;
	275	position: sticky;
	276	top: 0;
	277	z-index: 50;
	278	box-sizing: border-box;
	279	}
	280
	281	.pl-logo {
	282	display: inline-flex;
	283	align-items: center;
	284	gap: 9px;
	285	font-family: 'Inter Tight', sans-serif;
	286	font-weight: 600;
	287	font-size: 15px;
	288	letter-spacing: -0.02em;
	289	color: #16181d;
	290	text-decoration: none;
	291	flex-shrink: 0;
	292	}
	293
	294	.pl-logo-mark {
	295	width: 16px;
	296	height: 16px;
	297	border-radius: 5px;
	298	background: #4353c9;
	299	display: inline-block;
	300	flex-shrink: 0;
	301	}
	302
	303	.pl-logo-eyebrow {
	304	font-family: 'JetBrains Mono', monospace;
	305	font-size: 10px;
	306	letter-spacing: 0.1em;
	307	text-transform: uppercase;
	308	color: #8a8d99;
	309	font-weight: 500;
	310	margin-left: 2px;
	311	}
	312
	313	.pl-sep {
	314	color: #c4c6cf;
	315	flex-shrink: 0;
	316	}
	317
	318	.pl-breadcrumb {
	319	font-size: 13px;
	320	color: #16181d;
	321	font-weight: 500;
	322	}
	323
	324	.pl-header-right {
	325	margin-left: auto;
	326	display: flex;
	327	align-items: center;
	328	gap: 14px;
	329	flex-shrink: 0;
	330	}
	331
	332	.pl-summary {
	333	display: inline-flex;
	334	align-items: center;
	335	gap: 7px;
	336	font-size: 12.5px;
	337	color: #6b7080;
	338	white-space: nowrap;
	339	}
	340
	341	.pl-summary-dot {
	342	width: 6px;
	343	height: 6px;
	344	border-radius: 50%;
	345	background: #1e7f5c;
	346	flex-shrink: 0;
	347	}
	348
	349	.pl-avatar {
	350	width: 28px;
	351	height: 28px;
	352	border-radius: 50%;
	353	background: #16181d;
	354	color: #fff;
	355	font-size: 11px;
	356	font-weight: 600;
	357	display: inline-flex;
	358	align-items: center;
	359	justify-content: center;
	360	flex-shrink: 0;
	361	}
	362
	363	/* ── Main ── */
	364	.pl-main {
	365	flex: 1;
	366	max-width: 1100px;
	367	width: 100%;
	368	margin: 0 auto;
	369	padding: 44px 32px 88px;
	370	box-sizing: border-box;
	371	}
	372
	373	/* ── Intro ── */
	374	.pl-intro {
	375	max-width: 680px;
	376	margin-bottom: 36px;
	377	}
	378
	379	.pl-eyebrow {
	380	font-family: 'JetBrains Mono', monospace;
	381	font-size: 11px;
	382	letter-spacing: 0.12em;
	383	text-transform: uppercase;
	384	color: #8a8d99;
	385	margin-bottom: 10px;
	386	}
	387
	388	.pl-heading {
	389	font-family: 'Inter Tight', sans-serif;
	390	font-size: 28px;
	391	font-weight: 600;
	392	letter-spacing: -0.025em;
	393	line-height: 1.15;
	394	margin: 0 0 8px;
	395	color: #111318;
	396	}
	397
	398	.pl-desc {
	399	font-size: 14px;
	400	color: #6b7080;
	401	margin: 0;
	402	line-height: 1.6;
	403	}
	404
	405	/* ── Layer rows stack ── */
	406	.pl-rows {
	407	display: flex;
	408	flex-direction: column;
	409	gap: 8px;
	410	}
	411
	412	.pl-item {
	413	display: flex;
	414	flex-direction: column;
	415	}
	416
	417	/* ── Row button ── */
	418	.pl-row {
	419	display: grid;
	420	grid-template-columns: 32px minmax(140px, 1.3fr) minmax(0, 2fr) minmax(110px, 0.9fr) 20px;
	421	gap: 16px;
	422	align-items: center;
	423	width: 100%;
	424	text-align: left;
	425	padding: 14px 20px;
	426	border: 1px solid rgba(22,24,29,0.07);
	427	border-radius: 12px;
	428	background: #ffffff;
	429	cursor: pointer;
	430	font-family: inherit;
	431	box-sizing: border-box;
	432	transition: border-color 0.15s ease;
	433	outline: none;
	434	}
	435
	436	.pl-row:hover {
	437	border-color: rgba(22,24,29,0.22);
	438	}
	439
	440	.pl-row:focus-visible {
	441	box-shadow: 0 0 0 3px rgba(67,83,201,0.18);
	442	}
	443
	444	.pl-row--watched {
	445	border-color: rgba(180,83,9,0.28);
	446	border-left: 3px solid rgba(180,83,9,0.65);
	447	padding-left: 18px;
	448	border-radius: 12px 12px 4px 4px;
	449	}
	450
	451	.pl-row--watched:hover {
	452	border-color: rgba(180,83,9,0.45);
	453	border-left-color: rgba(180,83,9,0.85);
	454	}
	455
	456	.pl-row-num {
	457	font-family: 'JetBrains Mono', monospace;
	458	font-size: 11px;
	459	color: #c4c6cf;
	460	font-weight: 400;
	461	line-height: 1;
	462	}
	463
	464	.pl-row-name {
	465	font-family: 'Inter Tight', sans-serif;
	466	font-size: 14px;
	467	font-weight: 600;
	468	color: #16181d;
	469	white-space: nowrap;
	470	overflow: hidden;
	471	text-overflow: ellipsis;
	472	letter-spacing: -0.012em;
	473	}
	474
	475	.pl-row-tech {
	476	font-family: 'JetBrains Mono', monospace;
	477	font-size: 11.5px;
	478	color: #6b7080;
	479	white-space: nowrap;
	480	overflow: hidden;
	481	text-overflow: ellipsis;
	482	font-weight: 400;
	483	}
	484
	485	.pl-row-status {
	486	display: inline-flex;
	487	align-items: center;
	488	gap: 7px;
	489	font-size: 12.5px;
	490	color: #1e7f5c;
	491	font-weight: 500;
	492	white-space: nowrap;
	493	}
	494
	495	.pl-row-status--watched {
	496	color: #b45309;
	497	}
	498
	499	.pl-dot {
	500	width: 7px;
	501	height: 7px;
	502	border-radius: 50%;
	503	background: #1e7f5c;
	504	flex-shrink: 0;
	505	display: inline-block;
	506	}
	507
	508	.pl-dot--watched {
	509	background: #b45309;
	510	animation: gcPulse 1.4s ease-in-out infinite;
	511	}
	512
	513	.pl-caret {
	514	color: #c4c6cf;
	515	font-size: 10px;
	516	text-align: center;
	517	display: block;
	518	transition: transform 0.2s ease;
	519	line-height: 1;
	520	}
	521
	522	.pl-row[aria-expanded="true"] .pl-caret {
	523	transform: rotate(180deg);
	524	}
	525
	526	/* ── Fix callout (always visible for watched rows) ── */
	527	.pl-fix-callout {
	528	display: flex;
	529	align-items: center;
	530	gap: 8px;
	531	padding: 8px 20px 8px 22px;
	532	background: rgba(180,83,9,0.04);
	533	border: 1px solid rgba(180,83,9,0.18);
	534	border-top: none;
	535	border-radius: 0 0 8px 8px;
	536	margin-bottom: 2px;
	537	}
	538
	539	.pl-fix-label {
	540	font-family: 'JetBrains Mono', monospace;
	541	font-size: 10px;
	542	letter-spacing: 0.1em;
	543	text-transform: uppercase;
	544	color: #b45309;
	545	font-weight: 500;
	546	white-space: nowrap;
	547	flex-shrink: 0;
	548	}
	549
	550	.pl-fix-sep {
	551	color: rgba(180,83,9,0.35);
	552	font-size: 11px;
	553	flex-shrink: 0;
	554	}
	555
	556	.pl-fix-text {
	557	font-size: 12.5px;
	558	color: #6b7080;
	559	line-height: 1.4;
	560	overflow: hidden;
	561	text-overflow: ellipsis;
	562	white-space: nowrap;
	563	}
	564
	565	/* ── Detail panel ── */
	566	.pl-detail {
	567	margin-top: 6px;
	568	padding: 18px 22px 18px 68px;
	569	border: 1px solid rgba(22,24,29,0.05);
	570	border-radius: 12px;
	571	background: rgba(22,24,29,0.015);
	572	box-sizing: border-box;
	573	}
	574
	575	.pl-detail[hidden] {
	576	display: none !important;
	577	}
	578
	579	.pl-detail-desc {
	580	font-size: 13px;
	581	color: #6b7080;
	582	margin: 0 0 12px;
	583	line-height: 1.65;
	584	max-width: 72ch;
	585	}
	586
	587	.pl-facts {
	588	display: flex;
	589	gap: 22px;
	590	flex-wrap: wrap;
	591	font-family: 'JetBrains Mono', monospace;
	592	font-size: 11.5px;
	593	color: #8a8d99;
	594	font-weight: 400;
	595	}
	596
	597	.pl-fact {
	598	white-space: nowrap;
	599	}
	600
	601	.pl-apply-wrap {
	602	margin-top: 16px;
	603	}
	604
	605	.pl-apply-btn {
	606	background: #16181d;
	607	color: #ffffff;
	608	border: none;
	609	border-radius: 8px;
	610	padding: 8px 16px;
	611	font-size: 13px;
	612	font-weight: 600;
	613	font-family: inherit;
	614	letter-spacing: -0.008em;
	615	cursor: pointer;
	616	transition: background 0.15s ease, opacity 0.15s ease;
	617	outline: none;
	618	}
	619
	620	.pl-apply-btn:hover:not(:disabled) {
	621	background: #2a2d36;
	622	}
	623
	624	.pl-apply-btn:focus-visible {
	625	box-shadow: 0 0 0 3px rgba(67,83,201,0.18);
	626	}
	627
	628	.pl-apply-btn:disabled {
	629	cursor: default;
	630	opacity: 0.75;
	631	}
	632
	633	/* ── Footer ── */
	634	.pl-footer {
	635	border-top: 1px solid rgba(22,24,29,0.07);
	636	margin-top: 36px;
	637	padding-top: 20px;
	638	display: flex;
	639	justify-content: space-between;
	640	gap: 20px;
	641	flex-wrap: wrap;
	642	align-items: flex-start;
	643	}
	644
	645	.pl-footer-text {
	646	font-size: 12.5px;
	647	color: #8a8d99;
	648	margin: 0;
	649	max-width: 62ch;
	650	line-height: 1.6;
	651	}
	652
	653	.pl-footer-link {
	654	font-size: 13px;
	655	color: #4353c9;
	656	text-decoration: none;
	657	white-space: nowrap;
	658	flex-shrink: 0;
	659	}
	660
	661	.pl-footer-link:hover {
	662	text-decoration: underline;
	663	}
	664
	665	/* ── Responsive ── */
	666	@media (max-width: 720px) {
	667	.pl-header {
	668	padding: 0 16px;
	669	gap: 12px;
	670	}
	671	.pl-summary {
	672	display: none;
	673	}
	674	.pl-main {
	675	padding: 28px 16px 60px;
	676	}
	677	.pl-row {
	678	grid-template-columns: 28px minmax(0, 1fr) auto 16px;
	679	gap: 10px;
	680	padding: 12px 16px;
	681	}
	682	.pl-row--watched {
	683	padding-left: 14px;
	684	}
	685	.pl-row-tech {
	686	display: none;
	687	}
	688	.pl-detail {
	689	padding: 14px 16px 14px 20px;
	690	}
	691	.pl-fix-callout {
	692	padding: 7px 16px;
	693	}
	694	.pl-facts {
	695	gap: 14px;
	696	}
	697	}
	698	`;
	699
	700	const js = `
	701	(function () {
	702	// Toggle expand / collapse for each layer row
	703	document.querySelectorAll('.pl-row').forEach(function (btn) {
	704	btn.addEventListener('click', function () {
	705	var idx = btn.getAttribute('data-index');
	706	var detail = document.getElementById('pl-detail-' + idx);
	707	if (!detail) return;
	708
	709	var isOpen = btn.getAttribute('aria-expanded') === 'true';
	710	if (isOpen) {
	711	btn.setAttribute('aria-expanded', 'false');
	712	detail.hidden = true;
	713	} else {
	714	btn.setAttribute('aria-expanded', 'true');
	715	detail.hidden = false;
	716	}
	717	});
	718	});
	719
	720	// Apply fix buttons
	721	document.querySelectorAll('.pl-apply-btn').forEach(function (applyBtn) {
	722	applyBtn.addEventListener('click', function (e) {
	723	e.stopPropagation();
	724	if (applyBtn.disabled) return;
	725
	726	applyBtn.disabled = true;
	727	applyBtn.textContent = 'Applying…';
	728
	729	setTimeout(function () {
	730	applyBtn.textContent = 'Fix applied ✓';
	731	applyBtn.style.background = '#1e7f5c';
	732	applyBtn.style.cursor = 'default';
	733
	734	var item = applyBtn.closest('.pl-item');
	735	if (!item) return;
	736
	737	// Swap dot from watched (amber pulse) to healthy (green)
	738	var dot = item.querySelector('.pl-dot--watched');
	739	if (dot) {
	740	dot.classList.remove('pl-dot--watched');
	741	dot.style.background = '#1e7f5c';
	742	dot.style.animation = 'none';
	743	}
	744
	745	// Swap status label colour + text
	746	var status = item.querySelector('.pl-row-status--watched');
	747	if (status) {
	748	status.classList.remove('pl-row-status--watched');
	749	status.style.color = '#1e7f5c';
	750	// Last child is the text node "watched"
	751	var nodes = status.childNodes;
	752	for (var n = 0; n < nodes.length; n++) {
	753	if (nodes[n].nodeType === 3 /* TEXT_NODE */) {
	754	nodes[n].textContent = 'healthy';
	755	break;
	756	}
	757	}
	758	}
	759
	760	// Remove amber border from the row button
	761	var rowBtn = item.querySelector('.pl-row--watched');
	762	if (rowBtn) {
	763	rowBtn.classList.remove('pl-row--watched');
	764	}
	765
	766	// Fade and remove the fix callout strip
	767	var callout = item.querySelector('.pl-fix-callout');
	768	if (callout) {
	769	callout.style.transition = 'opacity 0.35s ease';
	770	callout.style.opacity = '0';
	771	setTimeout(function () {
	772	callout.style.display = 'none';
	773	}, 350);
	774	}
	775	}, 1400);
	776	});
	777	});
	778	})();
	779	`;