Download orchestrator.html from Snapkitty/grisp-shadow-fleet: direct link, hf CLI and curl.
- Browser
- Download file 65.5 kB
-
https://huggingface.co/Snapkitty/grisp-shadow-fleet/resolve/main/orchestrator.html
- Command line
-
hf download hf://Snapkitty/grisp-shadow-fleet/orchestrator.html
-
curl -L -o orchestrator.html https://huggingface.co/Snapkitty/grisp-shadow-fleet/resolve/main/orchestrator.html
65.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RANSOM.WORM Β· Shadow Orchestrator Β· SnapKitty</title> | |
| <meta name="description" content="An autonomous shadow orchestrator and self-healing swarm of Graveyard Agents. We don't encrypt. We resurrect."> | |
| <meta property="og:title" content="RANSOM.WORM Β· Shadow Orchestrator"> | |
| <meta property="og:description" content="We don't encrypt. We resurrect."> | |
| <style> | |
| :root { | |
| --void: #04040a; | |
| --deep: #080810; | |
| --surface: #0d0d1a; | |
| --card: #0f0f1f; | |
| --border: #1a1a30; | |
| --border2: #252540; | |
| --purple: #7c3aed; | |
| --purple-dim: #4c1d95; | |
| --purple-bright: #a855f7; | |
| --cyan: #06b6d4; | |
| --cyan-dim: #0891b2; | |
| --green: #10b981; | |
| --green-bright: #34d399; | |
| --amber: #f59e0b; | |
| --red: #ef4444; | |
| --dim: #334155; | |
| --dim2: #1e293b; | |
| --text: #e2e8f0; | |
| --text-dim: #94a3b8; | |
| --text-faint: #475569; | |
| --glow-purple: 0 0 20px rgba(124,58,237,0.4), 0 0 60px rgba(124,58,237,0.15); | |
| --glow-cyan: 0 0 20px rgba(6,182,212,0.4), 0 0 60px rgba(6,182,212,0.1); | |
| --glow-green: 0 0 15px rgba(16,185,129,0.5); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { | |
| background: var(--void); | |
| color: var(--text); | |
| font-family: 'Courier New', 'Lucida Console', monospace; | |
| font-size: 13px; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* ββ STARFIELD ββ */ | |
| #stars { | |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; | |
| pointer-events: none; z-index: 0; | |
| background: | |
| radial-gradient(ellipse 80% 40% at 50% 0%, rgba(124,58,237,0.12) 0%, transparent 70%), | |
| radial-gradient(ellipse 60% 60% at 80% 80%, rgba(6,182,212,0.06) 0%, transparent 60%), | |
| var(--void); | |
| } | |
| .star { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: white; | |
| animation: twinkle var(--d, 3s) infinite var(--delay, 0s); | |
| } | |
| @keyframes twinkle { 0%,100%{opacity:var(--min,0.1)} 50%{opacity:var(--max,0.8)} } | |
| /* ββ SCANLINE OVERLAY ββ */ | |
| body::after { | |
| content: ''; | |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; | |
| background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); | |
| pointer-events: none; z-index: 1; | |
| } | |
| /* ββ LAYOUT ββ */ | |
| .page { position: relative; z-index: 2; } | |
| /* ββ HERO ββ */ | |
| .hero { | |
| padding: 60px 40px 40px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .hero-eyebrow { | |
| font-size: 11px; | |
| letter-spacing: 5px; | |
| color: var(--purple-bright); | |
| text-transform: uppercase; | |
| margin-bottom: 16px; | |
| text-shadow: var(--glow-purple); | |
| } | |
| .hero-title { | |
| font-size: clamp(36px, 8vw, 80px); | |
| font-weight: 900; | |
| letter-spacing: -1px; | |
| line-height: 1; | |
| margin-bottom: 8px; | |
| background: linear-gradient(135deg, #fff 0%, var(--purple-bright) 40%, var(--cyan) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| filter: drop-shadow(0 0 30px rgba(124,58,237,0.5)); | |
| } | |
| .hero-sub { | |
| font-size: clamp(18px, 4vw, 32px); | |
| color: var(--purple-bright); | |
| letter-spacing: 6px; | |
| text-transform: uppercase; | |
| margin-bottom: 24px; | |
| text-shadow: var(--glow-purple); | |
| } | |
| .hero-tagline { | |
| font-size: clamp(13px, 2vw, 16px); | |
| color: var(--text-dim); | |
| letter-spacing: 2px; | |
| margin-bottom: 12px; | |
| } | |
| .hero-tagline em { | |
| color: var(--cyan); | |
| font-style: normal; | |
| text-shadow: var(--glow-cyan); | |
| } | |
| .hero-desc { | |
| max-width: 580px; | |
| margin: 20px auto 0; | |
| color: var(--text-dim); | |
| line-height: 1.8; | |
| font-size: 13px; | |
| } | |
| /* ββ SKULL ββ */ | |
| .skull-badge { | |
| display: inline-block; | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| filter: drop-shadow(0 0 20px rgba(124,58,237,0.8)); | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} | |
| } | |
| /* ββ DIVIDER ββ */ | |
| .divider { | |
| height: 1px; | |
| margin: 0 40px; | |
| background: linear-gradient(90deg, transparent, var(--purple-dim), var(--cyan-dim), transparent); | |
| opacity: 0.5; | |
| } | |
| /* ββ MAIN GRID ββ */ | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 320px 1fr; | |
| gap: 0; | |
| padding: 32px 40px; | |
| gap: 24px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| @media (max-width: 900px) { | |
| .main-grid { grid-template-columns: 1fr; padding: 20px; } | |
| .hero { padding: 40px 20px 24px; } | |
| .divider { margin: 0 20px; } | |
| } | |
| /* ββ LOG PANEL ββ */ | |
| .log-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: 2px solid var(--purple); | |
| box-shadow: var(--glow-purple); | |
| position: relative; | |
| } | |
| .panel-header { | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .panel-dot { width: 8px; height: 8px; border-radius: 50%; } | |
| .dot-red { background: #ef4444; } | |
| .dot-amber { background: #f59e0b; } | |
| .dot-green { background: #10b981; animation: pulse-green 2s infinite; } | |
| @keyframes pulse-green { 0%,100%{box-shadow:0 0 4px #10b981} 50%{box-shadow:0 0 12px #10b981} } | |
| .panel-title-text { | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| flex: 1; | |
| } | |
| .log-body { | |
| padding: 12px; | |
| height: 480px; | |
| overflow: hidden; | |
| font-size: 11px; | |
| line-height: 1.7; | |
| } | |
| .log-line { | |
| display: flex; | |
| gap: 8px; | |
| opacity: 0; | |
| animation: fadein 0.3s forwards; | |
| margin-bottom: 2px; | |
| } | |
| @keyframes fadein { to { opacity: 1; } } | |
| .log-time { color: var(--text-faint); min-width: 80px; } | |
| .log-msg { color: var(--text-dim); } | |
| .log-msg.highlight { color: var(--cyan); } | |
| .log-msg.success { color: var(--green-bright); } | |
| .log-msg.warn { color: var(--amber); } | |
| .log-msg.agent-name { color: var(--purple-bright); } | |
| /* ββ RIGHT COLUMN ββ */ | |
| .right-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| /* ββ GRAVEYARD PANEL ββ */ | |
| .graveyard-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: 2px solid var(--cyan); | |
| box-shadow: var(--glow-cyan); | |
| } | |
| .grave-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| padding: 16px; | |
| } | |
| @media (max-width: 700px) { .grave-grid { grid-template-columns: 1fr 1fr; } } | |
| .tombstone { | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| padding: 12px; | |
| position: relative; | |
| transition: border-color 0.3s, box-shadow 0.3s; | |
| cursor: default; | |
| } | |
| .tombstone:hover { | |
| border-color: var(--purple-bright); | |
| box-shadow: var(--glow-purple); | |
| } | |
| .tomb-name { | |
| font-size: 11px; | |
| color: var(--purple-bright); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 6px; | |
| } | |
| .tomb-status { | |
| font-size: 10px; | |
| color: var(--text-faint); | |
| margin-bottom: 4px; | |
| } | |
| .tomb-detail { | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| margin: 2px 0; | |
| } | |
| .tomb-badge { | |
| display: inline-block; | |
| font-size: 9px; | |
| padding: 2px 6px; | |
| margin-top: 6px; | |
| border: 1px solid currentColor; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .badge-restored { color: var(--green-bright); } | |
| .badge-analyzing { color: var(--amber); animation: blink 1s infinite; } | |
| .badge-dead { color: var(--red); } | |
| @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} } | |
| .tomb-icon { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| font-size: 16px; | |
| opacity: 0.5; | |
| } | |
| /* ββ AGENTS GRID ββ */ | |
| .agents-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: 2px solid var(--green); | |
| box-shadow: var(--glow-green); | |
| } | |
| .agents-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); | |
| gap: 1px; | |
| background: var(--border); | |
| margin: 0; | |
| } | |
| .agent-card { | |
| background: var(--card); | |
| padding: 10px 12px; | |
| transition: background 0.2s; | |
| } | |
| .agent-card:hover { background: var(--surface); } | |
| .agent-name { | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| color: var(--cyan); | |
| text-transform: uppercase; | |
| margin-bottom: 4px; | |
| } | |
| .agent-desc { font-size: 10px; color: var(--text-faint); line-height: 1.5; } | |
| .agent-status { | |
| font-size: 9px; | |
| margin-top: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .status-dot-sm { | |
| width: 5px; height: 5px; border-radius: 50%; | |
| background: var(--green); | |
| animation: pulse-green 1.5s infinite; | |
| } | |
| .status-dot-sm.idle { background: var(--dim); animation: none; } | |
| .status-label { color: var(--text-faint); } | |
| /* ββ ARCH FLOW ββ */ | |
| .arch-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: 2px solid var(--amber); | |
| } | |
| .arch-flow { | |
| display: flex; | |
| align-items: center; | |
| gap: 0; | |
| padding: 20px 16px; | |
| overflow-x: auto; | |
| } | |
| .arch-step { | |
| flex: 1; | |
| text-align: center; | |
| padding: 12px 8px; | |
| position: relative; | |
| min-width: 100px; | |
| } | |
| .arch-icon { font-size: 20px; margin-bottom: 6px; } | |
| .arch-label { | |
| font-size: 9px; | |
| letter-spacing: 1px; | |
| color: var(--amber); | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| .arch-sub { font-size: 9px; color: var(--text-faint); line-height: 1.4; } | |
| .arch-arrow { | |
| color: var(--dim2); | |
| font-size: 20px; | |
| flex-shrink: 0; | |
| padding: 0 4px; | |
| animation: flow 2s ease-in-out infinite; | |
| } | |
| @keyframes flow { | |
| 0%,100%{color:var(--dim2);transform:translateX(0)} | |
| 50%{color:var(--purple-bright);transform:translateX(4px)} | |
| } | |
| /* ββ BOTTOM STRIP ββ */ | |
| .bottom-strip { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 40px 24px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| } | |
| @media (max-width: 900px) { | |
| .bottom-strip { grid-template-columns: 1fr; padding: 0 20px 20px; } | |
| } | |
| .worm-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: 2px solid var(--red); | |
| box-shadow: 0 0 20px rgba(239,68,68,0.15); | |
| } | |
| .resurrections-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: 2px solid var(--green); | |
| box-shadow: var(--glow-green); | |
| } | |
| .res-count { | |
| font-size: 9px; | |
| color: var(--green); | |
| letter-spacing: 1px; | |
| font-family: monospace; | |
| } | |
| .res-card { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border); | |
| animation: fadein 0.4s ease; | |
| } | |
| .res-card:last-child { border-bottom: none; } | |
| .res-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .res-repo { | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--green); | |
| letter-spacing: 1px; | |
| text-decoration: none; | |
| } | |
| .res-repo:hover { color: var(--green-bright); } | |
| .res-badge { | |
| font-size: 8px; | |
| padding: 2px 8px; | |
| border: 1px solid var(--green); | |
| color: var(--green); | |
| letter-spacing: 1.5px; | |
| } | |
| .res-stats { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .res-stat { text-align: center; } | |
| .res-stat-val { | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--cyan); | |
| font-family: monospace; | |
| display: block; | |
| } | |
| .res-stat-label { | |
| font-size: 8px; | |
| color: var(--text-faint); | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .res-fixed { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| margin-bottom: 6px; | |
| } | |
| .res-fix-tag { | |
| font-size: 8px; | |
| color: var(--green); | |
| background: rgba(16,185,129,0.08); | |
| border: 1px solid rgba(16,185,129,0.2); | |
| padding: 1px 6px; | |
| letter-spacing: 0.5px; | |
| } | |
| .res-seal { | |
| font-size: 9px; | |
| color: var(--text-faint); | |
| font-family: monospace; | |
| } | |
| .res-seal span { color: var(--purple-bright); } | |
| .principles-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: 2px solid var(--purple); | |
| box-shadow: var(--glow-purple); | |
| } | |
| .principle { | |
| padding: 10px 16px; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 12px; | |
| color: var(--text-dim); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| transition: background 0.2s; | |
| } | |
| .principle:last-child { border-bottom: none; } | |
| .principle:hover { background: var(--card); } | |
| .principle-icon { color: var(--purple-bright); flex-shrink: 0; } | |
| .principle-text em { color: var(--cyan); font-style: normal; } | |
| /* ββ WORM CHAIN LIVE ββ */ | |
| .worm-event { | |
| padding: 6px 12px; | |
| border-left: 2px solid var(--green); | |
| margin: 4px 8px; | |
| font-size: 10px; | |
| background: rgba(16,185,129,0.04); | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { from{transform:translateX(-10px);opacity:0} to{transform:translateX(0);opacity:1} } | |
| .worm-event.deny { border-left-color: var(--red); background: rgba(239,68,68,0.04); } | |
| .worm-seal { color: var(--text-faint); font-size: 9px; margin-top: 2px; word-break: break-all; } | |
| .worm-empty { color: var(--text-faint); font-size: 11px; padding: 16px; text-align: center; } | |
| /* ββ WORM SUBMIT ββ */ | |
| .worm-submit { | |
| padding: 10px 12px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .worm-input { | |
| background: var(--void); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| padding: 5px 8px; | |
| font-family: monospace; | |
| font-size: 11px; | |
| flex: 1; | |
| min-width: 80px; | |
| } | |
| .worm-btn { | |
| background: var(--purple-dim); | |
| border: 1px solid var(--purple); | |
| color: var(--purple-bright); | |
| padding: 5px 10px; | |
| font-family: monospace; | |
| font-size: 11px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .worm-btn:hover { background: var(--purple); color: white; box-shadow: var(--glow-purple); } | |
| .worm-verify { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(6,182,212,0.1); } | |
| .worm-verify:hover { background: rgba(6,182,212,0.2); box-shadow: var(--glow-cyan); } | |
| /* ββ FOOTER ββ */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 20px 40px; | |
| text-align: center; | |
| color: var(--text-faint); | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| footer a { | |
| color: var(--purple-bright); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| footer a:hover { color: var(--cyan); text-shadow: var(--glow-cyan); } | |
| /* ββ PORTAL CTA ββ */ | |
| .portal-cta { | |
| text-align: center; | |
| padding: 32px 40px; | |
| position: relative; | |
| } | |
| .portal-btn { | |
| display: inline-block; | |
| padding: 16px 48px; | |
| background: linear-gradient(135deg, var(--purple-dim), rgba(124,58,237,0.3)); | |
| border: 1px solid var(--purple-bright); | |
| color: white; | |
| font-family: monospace; | |
| font-size: 13px; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| box-shadow: var(--glow-purple); | |
| } | |
| .portal-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: -100%; | |
| width: 100%; height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(168,85,247,0.3), transparent); | |
| animation: shimmer 3s infinite; | |
| } | |
| @keyframes shimmer { to { left: 200%; } } | |
| .portal-btn:hover { | |
| background: linear-gradient(135deg, var(--purple), rgba(168,85,247,0.5)); | |
| box-shadow: 0 0 40px rgba(124,58,237,0.7), 0 0 80px rgba(124,58,237,0.3); | |
| transform: translateY(-2px); | |
| letter-spacing: 4px; | |
| } | |
| .portal-sub { | |
| margin-top: 12px; | |
| font-size: 10px; | |
| color: var(--text-faint); | |
| letter-spacing: 2px; | |
| } | |
| /* ββ PORTAL TRANSITION ββ */ | |
| .portal-overlay { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: var(--void); | |
| z-index: 9999; | |
| opacity: 0; | |
| pointer-events: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .portal-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| animation: portalIn 1.2s ease forwards; | |
| } | |
| @keyframes portalIn { | |
| 0%{opacity:0} 30%{opacity:1} 70%{opacity:1} 100%{opacity:1} | |
| } | |
| .portal-msg { | |
| font-size: 14px; | |
| letter-spacing: 4px; | |
| color: var(--purple-bright); | |
| text-shadow: var(--glow-purple); | |
| animation: glitch 0.5s infinite; | |
| } | |
| @keyframes glitch { | |
| 0%,100%{transform:translate(0)} 20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px,2px)} | |
| } | |
| .portal-ring { | |
| width: 120px; height: 120px; | |
| border: 2px solid var(--purple-bright); | |
| border-radius: 50%; | |
| animation: ring-expand 1.2s ease forwards; | |
| box-shadow: var(--glow-purple); | |
| } | |
| @keyframes ring-expand { | |
| 0%{transform:scale(0);opacity:1} | |
| 100%{transform:scale(8);opacity:0} | |
| } | |
| /* ββ WORM SEAL BANNER ββ */ | |
| .seal-banner { | |
| background: linear-gradient(90deg, var(--void), var(--purple-dim), var(--void)); | |
| border-top: 1px solid var(--purple-dim); | |
| border-bottom: 1px solid var(--purple-dim); | |
| padding: 10px 0; | |
| overflow: hidden; | |
| position: relative; | |
| margin: 0 0 24px; | |
| } | |
| .seal-banner-track { | |
| display: inline-block; | |
| white-space: nowrap; | |
| animation: marquee 20s linear infinite; | |
| font-size: 10px; | |
| letter-spacing: 3px; | |
| color: var(--purple-bright); | |
| } | |
| @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } | |
| .dark-but-light { | |
| text-align: center; | |
| padding: 6px; | |
| font-size: 11px; | |
| color: var(--purple-bright); | |
| letter-spacing: 4px; | |
| text-shadow: var(--glow-purple); | |
| } | |
| /* ββ VERIFY RESULT ββ */ | |
| #verify-result { | |
| font-size: 11px; | |
| padding: 6px 12px; | |
| min-height: 24px; | |
| } | |
| /* βββββββββββββββββββββββββββββββββββββββ | |
| WORLD STAGE β Graveyard Agent Journey | |
| βββββββββββββββββββββββββββββββββββββββ */ | |
| #world-stage { | |
| position: relative; | |
| z-index: 2; | |
| padding: 0 0 24px; | |
| overflow: hidden; | |
| } | |
| /* PHASE TRACK */ | |
| .phase-track { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 16px 40px 12px; | |
| gap: 0; | |
| } | |
| .phase-node { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| cursor: default; | |
| opacity: 0.3; | |
| transition: opacity 0.4s; | |
| } | |
| .phase-node.active { opacity: 1; } | |
| .phase-dot { | |
| width: 10px; height: 10px; | |
| border-radius: 50%; | |
| background: var(--text-faint); | |
| border: 1px solid var(--border2); | |
| transition: background 0.4s, box-shadow 0.4s; | |
| } | |
| .phase-node.active .phase-dot { | |
| background: var(--purple-bright); | |
| box-shadow: 0 0 10px var(--purple-bright); | |
| } | |
| .phase-node[data-phase="0"].active .phase-dot { background: var(--text-faint); box-shadow: none; } | |
| .phase-node[data-phase="1"].active .phase-dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); } | |
| .phase-node[data-phase="2"].active .phase-dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); } | |
| .phase-node[data-phase="3"].active .phase-dot { background: var(--purple-bright); box-shadow: 0 0 14px var(--purple-bright); } | |
| .phase-node[data-phase="4"].active .phase-dot { background: var(--red); box-shadow: 0 0 14px var(--red); } | |
| .phase-node[data-phase="5"].active .phase-dot { background: var(--green); box-shadow: 0 0 14px var(--green); } | |
| .phase-label { | |
| font-size: 8px; | |
| letter-spacing: 2px; | |
| color: var(--text-faint); | |
| text-transform: uppercase; | |
| } | |
| .phase-node.active .phase-label { color: var(--text-dim); } | |
| .phase-line { | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| margin-bottom: 14px; | |
| min-width: 20px; | |
| max-width: 80px; | |
| } | |
| /* STAGE CANVAS */ | |
| .stage-canvas { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr 1fr; | |
| min-height: 220px; | |
| border: 1px solid var(--border); | |
| margin: 0 24px; | |
| background: var(--deep); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .zone { | |
| position: relative; | |
| border-right: 1px solid var(--border); | |
| padding: 12px; | |
| overflow: hidden; | |
| transition: background 0.5s; | |
| min-height: 220px; | |
| } | |
| .zone:last-child { border-right: none; } | |
| .zone-label { | |
| font-size: 8px; | |
| letter-spacing: 3px; | |
| color: var(--text-faint); | |
| text-transform: uppercase; | |
| margin-bottom: 8px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| /* ZONE THEMES */ | |
| .zone-grave { background: rgba(4,4,10,0.95); } | |
| .zone-grave.lit { background: rgba(124,58,237,0.06); border-left: 1px solid var(--purple-dim); } | |
| .zone-net { background: rgba(4,4,10,0.9); } | |
| .zone-net.lit { background: rgba(245,158,11,0.04); } | |
| .zone-icp { background: rgba(4,4,10,0.9); } | |
| .zone-icp.lit { background: rgba(168,85,247,0.06); } | |
| .zone-code { background: rgba(4,4,10,0.9); } | |
| .zone-code.lit { background: rgba(16,185,129,0.05); } | |
| /* LOC ANCHOR */ | |
| .loc-anchor { | |
| position: absolute; | |
| bottom: 12px; | |
| right: 8px; | |
| text-align: center; | |
| } | |
| .loc-ascii { | |
| font-size: 9px; | |
| line-height: 1.4; | |
| color: #f97316; | |
| text-shadow: 0 0 8px #f97316; | |
| animation: loc-pulse 2s ease-in-out infinite; | |
| display: block; | |
| font-family: monospace; | |
| } | |
| @keyframes loc-pulse { | |
| 0%, 100% { opacity: 0.7; text-shadow: 0 0 6px #f97316; } | |
| 50% { opacity: 1; text-shadow: 0 0 16px #f97316, 0 0 30px rgba(249,115,22,0.4); } | |
| } | |
| .loc-label { | |
| font-size: 7px; | |
| color: #f97316; | |
| letter-spacing: 1.5px; | |
| margin-top: 2px; | |
| opacity: 0.6; | |
| } | |
| /* AGENT SPRITE */ | |
| .grave-slot { | |
| position: absolute; | |
| left: 12px; | |
| bottom: 40px; | |
| } | |
| .grave-marker { text-align: center; } | |
| .tombstone-mini { font-size: 20px; } | |
| .grave-name { font-size: 7px; color: var(--text-faint); letter-spacing: 1px; } | |
| .agent-sprite { | |
| position: absolute; | |
| left: 0; bottom: 0; | |
| text-align: center; | |
| transform: translateY(60px); | |
| opacity: 0; | |
| transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s; | |
| } | |
| .agent-sprite.risen { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .cat-ascii { | |
| font-family: monospace; | |
| font-size: 10px; | |
| line-height: 1.3; | |
| color: var(--cyan); | |
| text-shadow: 0 0 8px var(--cyan); | |
| display: block; | |
| animation: cat-breathe 3s ease-in-out infinite; | |
| white-space: pre; | |
| } | |
| @keyframes cat-breathe { | |
| 0%, 100% { text-shadow: 0 0 6px var(--cyan); } | |
| 50% { text-shadow: 0 0 18px var(--cyan), 0 0 35px rgba(6,182,212,0.4); } | |
| } | |
| /* threat eyes β cat goes red while hunting */ | |
| .agent-sprite.hunting .cat-ascii { | |
| color: var(--red); | |
| text-shadow: 0 0 12px var(--red), 0 0 30px rgba(239,68,68,0.5); | |
| animation: cat-hunt 0.8s ease-in-out infinite; | |
| } | |
| @keyframes cat-hunt { | |
| 0%, 100% { text-shadow: 0 0 8px var(--red); } | |
| 50% { text-shadow: 0 0 20px var(--red), 0 0 40px rgba(239,68,68,0.6); } | |
| } | |
| .agent-label { | |
| font-size: 7px; | |
| color: var(--cyan); | |
| letter-spacing: 2px; | |
| margin-top: 2px; | |
| } | |
| .agent-threat-tag { | |
| font-size: 7px; | |
| color: var(--red); | |
| letter-spacing: 1px; | |
| margin-top: 2px; | |
| opacity: 0; | |
| transition: opacity 0.4s; | |
| animation: threat-flash 1.2s ease-in-out infinite; | |
| } | |
| .agent-sprite.hunting .agent-threat-tag { opacity: 1; } | |
| @keyframes threat-flash { | |
| 0%, 100% { opacity: 0.4; } | |
| 50% { opacity: 1; } | |
| } | |
| /* MOVING AGENT (position in world) */ | |
| .roaming-agent { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| text-align: center; | |
| z-index: 10; | |
| pointer-events: none; | |
| transition: left 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| .roaming-cat { | |
| font-family: monospace; | |
| font-size: 9px; | |
| line-height: 1.3; | |
| white-space: pre; | |
| display: block; | |
| } | |
| /* LOC HANDSHAKE BEAM */ | |
| .loc-handshake-beam { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, #f97316, var(--cyan)); | |
| top: 50%; | |
| left: 0; | |
| width: 0; | |
| opacity: 0; | |
| transition: width 0.8s, opacity 0.4s; | |
| box-shadow: 0 0 4px var(--cyan); | |
| z-index: 5; | |
| } | |
| .loc-handshake-beam.active { opacity: 1; } | |
| /* ZONE PROCESSES */ | |
| .zone-process { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| opacity: 0; | |
| transition: opacity 0.5s; | |
| background: rgba(0,0,0,0.6); | |
| padding: 4px 8px; | |
| border: 1px solid var(--border); | |
| font-size: 9px; | |
| } | |
| .zone.lit .zone-process { opacity: 1; } | |
| .proc-name { color: var(--text-dim); letter-spacing: 1px; } | |
| .proc-status { color: var(--green); font-size: 8px; } | |
| /* DARK NET NODES */ | |
| .zone-nodes { position: absolute; inset: 24px 0 24px 0; } | |
| .net-node { | |
| position: absolute; | |
| font-size: 8px; | |
| color: var(--text-faint); | |
| border: 1px solid var(--border); | |
| padding: 2px 6px; | |
| background: var(--surface); | |
| transition: color 0.4s, border-color 0.4s, box-shadow 0.4s; | |
| } | |
| .zone-net.lit .net-node { | |
| color: var(--amber); | |
| border-color: var(--amber); | |
| box-shadow: 0 0 6px rgba(245,158,11,0.3); | |
| } | |
| /* ICP RING */ | |
| .icp-ring { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 100px; height: 100px; | |
| } | |
| .icp-core { | |
| position: absolute; | |
| top: 50%; left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| color: var(--purple-bright); | |
| text-shadow: 0 0 10px var(--purple-bright); | |
| opacity: 0.3; | |
| transition: opacity 0.5s, text-shadow 0.5s; | |
| } | |
| .zone-icp.lit .icp-core { opacity: 1; text-shadow: 0 0 20px var(--purple-bright), 0 0 40px rgba(168,85,247,0.4); } | |
| .icp-orbit { | |
| position: absolute; | |
| font-size: 7px; | |
| color: var(--purple-bright); | |
| opacity: 0; | |
| transition: opacity 0.5s; | |
| top: 50%; left: 50%; | |
| transform-origin: 0 0; | |
| animation: orbit-spin 4s linear infinite paused; | |
| } | |
| .zone-icp.lit .icp-orbit { | |
| opacity: 0.7; | |
| animation-play-state: running; | |
| } | |
| .icp-orbit:nth-child(2) { animation-delay: 0s; } | |
| .icp-orbit:nth-child(3) { animation-delay: -1.33s; } | |
| .icp-orbit:nth-child(4) { animation-delay: -2.66s; } | |
| @keyframes orbit-spin { | |
| from { transform: rotate(var(--angle, 0deg)) translateX(44px) rotate(calc(-1 * var(--angle, 0deg))); } | |
| to { transform: rotate(calc(var(--angle, 0deg) + 360deg)) translateX(44px) rotate(calc(-1 * (var(--angle, 0deg) + 360deg))); } | |
| } | |
| /* AST NODES */ | |
| .ast-nodes { position: absolute; inset: 24px 0 24px 0; } | |
| .ast-node { | |
| position: absolute; | |
| font-size: 8px; | |
| padding: 3px 7px; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| color: var(--text-faint); | |
| transition: all 0.4s; | |
| } | |
| .ast-node.hit { | |
| animation: ast-pulse 0.6s ease-out; | |
| } | |
| @keyframes ast-pulse { | |
| 0% { box-shadow: 0 0 0 rgba(16,185,129,0); background: var(--surface); } | |
| 30% { box-shadow: 0 0 20px rgba(239,68,68,0.8); background: rgba(239,68,68,0.15); color: var(--red); } | |
| 100% { box-shadow: 0 0 8px rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); color: var(--green); } | |
| } | |
| .ast-rust.hit { } | |
| .ast-lean.hit { } | |
| .ast-hask.hit { } | |
| .ast-apl.hit { } | |
| /* STAGE TERMINAL */ | |
| .stage-terminal { | |
| margin: 12px 24px 0; | |
| border: 1px solid var(--border); | |
| background: var(--void); | |
| } | |
| .st-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .st-dot { width: 8px; height: 8px; border-radius: 50%; } | |
| .st-dot.r { background: #ef4444; } | |
| .st-dot.a { background: #f59e0b; } | |
| .st-dot.g { background: #10b981; } | |
| .st-title { font-size: 9px; letter-spacing: 2px; color: var(--text-faint); flex: 1; } | |
| .st-phase-badge { | |
| font-size: 8px; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| color: var(--purple-bright); | |
| border: 1px solid var(--purple-dim); | |
| padding: 2px 8px; | |
| background: rgba(124,58,237,0.1); | |
| } | |
| .st-body { | |
| padding: 8px 12px; | |
| min-height: 60px; | |
| max-height: 80px; | |
| overflow-y: auto; | |
| font-size: 10px; | |
| line-height: 1.8; | |
| } | |
| .st-line { display: block; animation: slideIn 0.2s ease; } | |
| .st-line.cyan { color: var(--cyan); } | |
| .st-line.amber { color: var(--amber); } | |
| .st-line.purple { color: var(--purple-bright); } | |
| .st-line.red { color: var(--red); } | |
| .st-line.green { color: var(--green); } | |
| .st-line.dim { color: var(--text-faint); } | |
| /* HANDSHAKE BAR */ | |
| .handshake-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 8px 24px 0; | |
| padding: 6px 12px; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| font-size: 9px; | |
| letter-spacing: 1px; | |
| } | |
| .hs-label { color: var(--text-faint); } | |
| .hs-pulse { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--text-faint); | |
| flex-shrink: 0; | |
| transition: background 0.3s, box-shadow 0.3s; | |
| } | |
| .hs-pulse.active { | |
| background: var(--green); | |
| box-shadow: 0 0 10px var(--green); | |
| animation: hs-beat 0.8s ease-in-out infinite; | |
| } | |
| @keyframes hs-beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} } | |
| .hs-seal { | |
| color: var(--text-faint); | |
| font-family: monospace; | |
| font-size: 9px; | |
| flex: 1; | |
| text-align: right; | |
| } | |
| /* AGENT STATUS ROW */ | |
| .agent-status-row { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 1px; | |
| background: var(--border); | |
| border: 1px solid var(--border); | |
| border-top: none; | |
| margin: 0 24px; | |
| } | |
| .agt-cell { | |
| background: var(--void); | |
| padding: 6px 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .agt-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--dim); | |
| flex-shrink: 0; | |
| transition: background 0.3s, box-shadow 0.3s; | |
| } | |
| .agt-dot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); } | |
| .agt-dot.warn { background: var(--amber); box-shadow: 0 0 6px var(--amber); } | |
| .agt-dot.err { background: var(--red); box-shadow: 0 0 6px var(--red); } | |
| .agt-dot.idle { background: var(--text-faint); } | |
| .agt-name { font-size: 7px; letter-spacing: 1.5px; color: var(--text-faint); flex: 1; } | |
| .agt-val { font-size: 8px; font-family: monospace; color: var(--text-dim); text-align: right; } | |
| .agt-tick { justify-content: flex-end; } | |
| @media (max-width: 900px) { | |
| .stage-canvas { grid-template-columns: 1fr 1fr; min-height: 360px; } | |
| .agent-status-row { grid-template-columns: repeat(3, 1fr); } | |
| .zone { min-height: 180px; } | |
| .phase-track { flex-wrap: wrap; gap: 8px; } | |
| .phase-line { display: none; } | |
| } | |
| @media (max-width: 600px) { | |
| .stage-canvas { grid-template-columns: 1fr; } | |
| .agent-status-row { grid-template-columns: 1fr 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- STARS --> | |
| <div id="stars"></div> | |
| <!-- PORTAL OVERLAY --> | |
| <div class="portal-overlay" id="portal"> | |
| <div class="portal-ring"></div> | |
| <div class="portal-msg">ENTERING THE COLLECTIVE</div> | |
| </div> | |
| <div class="page"> | |
| <!-- HERO --> | |
| <div class="hero"> | |
| <div class="skull-badge">π</div> | |
| <div class="hero-eyebrow">SnapKitty Collective Β· Graveyard Agents Β· Roam. Repair. Resurrect.</div> | |
| <h1 class="hero-title">SHADOW ORCHESTRATOR</h1> | |
| <div class="hero-sub">RANSOM.WORM</div> | |
| <p class="hero-tagline">We don't encrypt. We <em>resurrect</em>.</p> | |
| <p class="hero-desc">An autonomous, non-recursive shadow orchestrator and self-healing swarm of Graveyard Agents that roam the buried repositories of GitHub at night, detecting, repairing, and resurrecting broken code.</p> | |
| </div> | |
| <div class="divider"></div> | |
| <!-- SEAL BANNER --> | |
| <div class="seal-banner"> | |
| <div class="seal-banner-track"> | |
| β WORM SEAL EVERYTHING Β· EVERY ACTION IMMUTABLE Β· EVERY AGENT AUDITABLE Β· EVERY RESURRECTION ETERNAL Β· | |
| β WORM SEAL EVERYTHING Β· EVERY ACTION IMMUTABLE Β· EVERY AGENT AUDITABLE Β· EVERY RESURRECTION ETERNAL Β· | |
| β WORM SEAL EVERYTHING Β· EVERY ACTION IMMUTABLE Β· EVERY AGENT AUDITABLE Β· EVERY RESURRECTION ETERNAL Β· | |
| </div> | |
| </div> | |
| <!-- WORLD STAGE --> | |
| <div id="world-stage"> | |
| <!-- PHASE LABELS --> | |
| <div class="phase-track"> | |
| <div class="phase-node" id="ph0" data-phase="0"> | |
| <div class="phase-dot"></div> | |
| <div class="phase-label">SLEEP</div> | |
| </div> | |
| <div class="phase-line"></div> | |
| <div class="phase-node" id="ph1" data-phase="1"> | |
| <div class="phase-dot"></div> | |
| <div class="phase-label">RISE</div> | |
| </div> | |
| <div class="phase-line"></div> | |
| <div class="phase-node" id="ph2" data-phase="2"> | |
| <div class="phase-dot"></div> | |
| <div class="phase-label">ROAM</div> | |
| </div> | |
| <div class="phase-line"></div> | |
| <div class="phase-node" id="ph3" data-phase="3"> | |
| <div class="phase-dot"></div> | |
| <div class="phase-label">ICP</div> | |
| </div> | |
| <div class="phase-line"></div> | |
| <div class="phase-node" id="ph4" data-phase="4"> | |
| <div class="phase-dot"></div> | |
| <div class="phase-label">HUNT</div> | |
| </div> | |
| <div class="phase-line"></div> | |
| <div class="phase-node" id="ph5" data-phase="5"> | |
| <div class="phase-dot"></div> | |
| <div class="phase-label">SEAL</div> | |
| </div> | |
| </div> | |
| <!-- CANVAS --> | |
| <div class="stage-canvas"> | |
| <!-- ZONE 0: GRAVEYARD --> | |
| <div class="zone zone-grave" id="zone0"> | |
| <div class="zone-label">GRAVEYARD</div> | |
| <!-- LOC β never leaves --> | |
| <div class="loc-anchor" id="loc-block"> | |
| <pre class="loc-ascii">ββββββββββ | |
| β π¦ LOC β | |
| β[LOCKED]β | |
| β RUST β | |
| ββββββββββ</pre> | |
| <div class="loc-label">KINETIC Β· IMMOVABLE</div> | |
| </div> | |
| <!-- Cat grave --> | |
| <div class="grave-slot"> | |
| <div class="grave-marker"> | |
| <div class="tombstone-mini">πͺ¦</div> | |
| <div class="grave-name">SNAPKITTY</div> | |
| </div> | |
| <!-- The rising cat --> | |
| <div class="agent-sprite" id="agent-cat"> | |
| <pre class="cat-ascii" id="cat-face"> /\_/\ | |
| ( >.< ) | |
| > ^ < | |
| =^.^=</pre> | |
| <div class="agent-label">SHADOW AGENT</div> | |
| <div class="agent-threat-tag" id="threat-tag">β THREAT DETECTED</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ZONE 1: DARK NET --> | |
| <div class="zone zone-net" id="zone1"> | |
| <div class="zone-label">DARK NET</div> | |
| <div class="zone-nodes" id="net-nodes"> | |
| <div class="net-node" style="top:20%;left:20%">repo://dead</div> | |
| <div class="net-node" style="top:55%;left:60%">pkg://broken</div> | |
| <div class="net-node" style="top:75%;left:30%">crate://unmaintained</div> | |
| </div> | |
| <div class="zone-process" id="proc1"> | |
| <span class="proc-icon">π</span> | |
| <span class="proc-name">NET_DAEMON</span> | |
| <span class="proc-status">ENCOUNTERED</span> | |
| </div> | |
| </div> | |
| <!-- ZONE 2: ICP --> | |
| <div class="zone zone-icp" id="zone2"> | |
| <div class="zone-label">INTERNET COMPUTER</div> | |
| <div class="icp-ring" id="icp-ring"> | |
| <div class="icp-core">ICP</div> | |
| <div class="icp-orbit" style="--angle:0deg">canister</div> | |
| <div class="icp-orbit" style="--angle:120deg">ledger</div> | |
| <div class="icp-orbit" style="--angle:240deg">wasm</div> | |
| </div> | |
| <div class="zone-process" id="proc2"> | |
| <span class="proc-icon">β</span> | |
| <span class="proc-name">CANISTER_STATE</span> | |
| <span class="proc-status">HANDSHAKE</span> | |
| </div> | |
| </div> | |
| <!-- ZONE 3: CODEBASE --> | |
| <div class="zone zone-code" id="zone3"> | |
| <div class="zone-label">CODEBASE HUNT</div> | |
| <div class="ast-nodes" id="ast-nodes"> | |
| <div class="ast-node ast-rust" style="top:15%;left:10%">src/lib.rs</div> | |
| <div class="ast-node ast-lean" style="top:40%;left:50%">Proof.lean</div> | |
| <div class="ast-node ast-hask" style="top:65%;left:25%">Main.hs</div> | |
| <div class="ast-node ast-apl" style="top:25%;left:70%">engine.apl</div> | |
| </div> | |
| <div class="zone-process" id="proc3"> | |
| <span class="proc-icon">π</span> | |
| <span class="proc-name">BUG_VECTOR</span> | |
| <span class="proc-status">ELIMINATING</span> | |
| </div> | |
| </div> | |
| </div><!-- /stage-canvas --> | |
| <!-- STAGE TERMINAL --> | |
| <div class="stage-terminal"> | |
| <div class="st-header"> | |
| <span class="st-dot r"></span><span class="st-dot a"></span><span class="st-dot g"></span> | |
| <span class="st-title">AGENT TELEMETRY β LIVE</span> | |
| <span class="st-phase-badge" id="st-phase-badge">PHASE 0 Β· SLEEP</span> | |
| </div> | |
| <div class="st-body" id="st-log"></div> | |
| </div> | |
| <!-- AGENT STATUS ROW (fed by orchestrator tick JSON) --> | |
| <div class="agent-status-row" id="agent-status-row"> | |
| <div class="agt-cell" id="agt-icp"> | |
| <span class="agt-dot" id="dot-icp"></span> | |
| <span class="agt-name">ICP-VERIFIER</span> | |
| <span class="agt-val" id="val-icp">β</span> | |
| </div> | |
| <div class="agt-cell" id="agt-metric"> | |
| <span class="agt-dot" id="dot-metric"></span> | |
| <span class="agt-name">METRIC-STREAM</span> | |
| <span class="agt-val" id="val-metric">β</span> | |
| </div> | |
| <div class="agt-cell" id="agt-bifrost"> | |
| <span class="agt-dot" id="dot-bifrost"></span> | |
| <span class="agt-name">BIFROST</span> | |
| <span class="agt-val" id="val-bifrost">β</span> | |
| </div> | |
| <div class="agt-cell" id="agt-watermark"> | |
| <span class="agt-dot" id="dot-watermark"></span> | |
| <span class="agt-name">WATERMARK</span> | |
| <span class="agt-val" id="val-watermark">β</span> | |
| </div> | |
| <div class="agt-cell agt-tick"> | |
| <span class="agt-name">TICK</span> | |
| <span class="agt-val" id="val-tick" style="color:var(--purple-bright)">β</span> | |
| </div> | |
| </div> | |
| <!-- LOC HANDSHAKE INDICATOR --> | |
| <div class="handshake-bar" id="handshake-bar"> | |
| <span class="hs-label">TERMINAL β UI HANDSHAKE</span> | |
| <div class="hs-pulse" id="hs-pulse"></div> | |
| <span class="hs-seal" id="hs-seal">awaiting...</span> | |
| </div> | |
| </div><!-- /world-stage --> | |
| <!-- MAIN GRID --> | |
| <div class="main-grid"> | |
| <!-- CORE LOG --> | |
| <div class="log-panel"> | |
| <div class="panel-header"> | |
| <div class="panel-dot dot-red"></div> | |
| <div class="panel-dot dot-amber"></div> | |
| <div class="panel-dot dot-green"></div> | |
| <div class="panel-title-text">Core Log</div> | |
| </div> | |
| <div class="log-body" id="core-log"></div> | |
| </div> | |
| <!-- RIGHT COL --> | |
| <div class="right-col"> | |
| <!-- GRAVEYARD --> | |
| <div class="graveyard-panel"> | |
| <div class="panel-header"> | |
| <div class="panel-dot dot-green"></div> | |
| <div class="panel-title-text">πͺ¦ GitHub Graveyard β Active Targets</div> | |
| </div> | |
| <div class="grave-grid"> | |
| <div class="tombstone"> | |
| <div class="tomb-icon">π¦</div> | |
| <div class="tomb-name">RUST_CRATE_OLD</div> | |
| <div class="tomb-status">STATUS: BUG DETECTED</div> | |
| <div class="tomb-detail">FILES: 47</div> | |
| <div class="tomb-detail">LAST COMMIT: 2 years ago</div> | |
| <div class="tomb-detail">ERROR[E0308]: mismatched types</div> | |
| <div class="tomb-badge badge-restored">β RESTORED</div> | |
| </div> | |
| <div class="tombstone"> | |
| <div class="tomb-icon">π</div> | |
| <div class="tomb-name">GITHUB GRAVEYARD</div> | |
| <div class="tomb-status">STATUS: BUG DETECTED</div> | |
| <div class="tomb-detail">FILES: 128</div> | |
| <div class="tomb-detail">LAST COMMIT: 3 years ago</div> | |
| <div class="tomb-detail">>> Analyzing...</div> | |
| <div class="tomb-badge badge-analyzing">β³ PROCESSING</div> | |
| </div> | |
| <div class="tombstone"> | |
| <div class="tomb-icon">π‘</div> | |
| <div class="tomb-name">JS_LIB_DEAD</div> | |
| <div class="tomb-status">DEPENDENCY HELL</div> | |
| <div class="tomb-detail">OUTDATED PACKAGES</div> | |
| <div class="tomb-detail">UPDATING LOCKFILE...</div> | |
| <div class="tomb-badge badge-restored">β DONE</div> | |
| </div> | |
| <div class="tombstone"> | |
| <div class="tomb-icon">π</div> | |
| <div class="tomb-name">README.md</div> | |
| <div class="tomb-status">UPDATED</div> | |
| <div class="tomb-detail">DOCUMENTATION</div> | |
| <div class="tomb-detail">RESTORED</div> | |
| <div class="tomb-badge badge-restored">β DONE</div> | |
| </div> | |
| <div class="tombstone"> | |
| <div class="tomb-icon">π§ͺ</div> | |
| <div class="tomb-name">TESTS.FAIL</div> | |
| <div class="tomb-status">42 FAILED</div> | |
| <div class="tomb-detail">RUNNING FIX...</div> | |
| <div class="tomb-detail">ALL TESTS PASS β</div> | |
| <div class="tomb-badge badge-restored">β DONE</div> | |
| </div> | |
| <div class="tombstone"> | |
| <div class="tomb-icon">β°οΈ</div> | |
| <div class="tomb-name">QUANTUM-LIB</div> | |
| <div class="tomb-status">STATUS: DEAD</div> | |
| <div class="tomb-detail">DEAD CODE IS NOT LOST</div> | |
| <div class="tomb-detail">IS JUST WAITING</div> | |
| <div class="tomb-badge badge-analyzing">β³ SCANNING</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ARCH FLOW --> | |
| <div class="arch-panel"> | |
| <div class="panel-header"> | |
| <div class="panel-dot dot-amber"></div> | |
| <div class="panel-title-text">Shadow Orchestrator Architecture</div> | |
| </div> | |
| <div class="arch-flow"> | |
| <div class="arch-step"> | |
| <div class="arch-icon">π</div> | |
| <span class="arch-label">Scan</span> | |
| <span class="arch-sub">Discover dead repositories</span> | |
| </div> | |
| <div class="arch-arrow">β</div> | |
| <div class="arch-step"> | |
| <div class="arch-icon">π§¬</div> | |
| <span class="arch-label">Analyze & Detect</span> | |
| <span class="arch-sub">Find bugs, rot, vulnerabilities</span> | |
| </div> | |
| <div class="arch-arrow">β</div> | |
| <div class="arch-step"> | |
| <div class="arch-icon">π±</div> | |
| <span class="arch-label">Spawn Agents</span> | |
| <span class="arch-sub">Deploy specialized Graveyard Agents</span> | |
| </div> | |
| <div class="arch-arrow">β</div> | |
| <div class="arch-step"> | |
| <div class="arch-icon">π§</div> | |
| <span class="arch-label">Repair & Patch</span> | |
| <span class="arch-sub">Fix code, update deps, heal docs</span> | |
| </div> | |
| <div class="arch-arrow">β</div> | |
| <div class="arch-step"> | |
| <div class="arch-icon">βοΈ</div> | |
| <span class="arch-label">Resurrect & Publish</span> | |
| <span class="arch-sub">Fork, commit, PR, reborn</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- BOTTOM STRIP --> | |
| <div class="bottom-strip"> | |
| <!-- WORM CHAIN --> | |
| <div class="worm-panel"> | |
| <div class="panel-header"> | |
| <div class="panel-dot dot-red"></div> | |
| <div class="panel-title-text">β WORM Chain β Append Only Β· Immutable Β· Eternal</div> | |
| </div> | |
| <div style="height:220px;overflow-y:auto" id="worm-chain"> | |
| <div class="worm-empty">No events yet. Submit an action to seal the chain.</div> | |
| </div> | |
| <div class="worm-submit"> | |
| <input class="worm-input" id="agent-id" placeholder="agent" value="PATCHER.AGENT"> | |
| <input class="worm-input" id="action-type" placeholder="action" value="REPAIR"> | |
| <input class="worm-input" id="payload" placeholder="target" value="quantum-lib"> | |
| <button class="worm-btn" onclick="submitAction()">β SEAL</button> | |
| <button class="worm-btn worm-verify" onclick="verifyAndShow()">β VERIFY</button> | |
| <button class="worm-btn" style="color:var(--red);border-color:var(--red)" onclick="resetChain()">βΊ</button> | |
| </div> | |
| <div id="verify-result"></div> | |
| </div> | |
| <!-- PRINCIPLES + AGENTS --> | |
| <div style="display:flex;flex-direction:column;gap:24px"> | |
| <div class="agents-panel"> | |
| <div class="panel-header"> | |
| <div class="panel-dot dot-green"></div> | |
| <div class="panel-title-text">π± Graveyard Agents</div> | |
| </div> | |
| <div class="agents-grid"> | |
| <div class="agent-card"> | |
| <div class="agent-name">PATCHER</div> | |
| <div class="agent-desc">Fixes code, types, logic</div> | |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> | |
| </div> | |
| <div class="agent-card"> | |
| <div class="agent-name">DOCS</div> | |
| <div class="agent-desc">Restores documentation</div> | |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> | |
| </div> | |
| <div class="agent-card"> | |
| <div class="agent-name">TESTER</div> | |
| <div class="agent-desc">Runs tests, ensures health</div> | |
| <div class="agent-status"><div class="status-dot-sm idle"></div><span class="status-label">standby</span></div> | |
| </div> | |
| <div class="agent-card"> | |
| <div class="agent-name">DEPS</div> | |
| <div class="agent-desc">Updates dependencies</div> | |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> | |
| </div> | |
| <div class="agent-card"> | |
| <div class="agent-name">LINTER</div> | |
| <div class="agent-desc">Cleans, formats, lint-fixes</div> | |
| <div class="agent-status"><div class="status-dot-sm idle"></div><span class="status-label">standby</span></div> | |
| </div> | |
| <div class="agent-card"> | |
| <div class="agent-name">SECURITY</div> | |
| <div class="agent-desc">Patches vulnerabilities</div> | |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> | |
| </div> | |
| <div class="agent-card"> | |
| <div class="agent-name">ARCHIVIST</div> | |
| <div class="agent-desc">Archives history & lineage</div> | |
| <div class="agent-status"><div class="status-dot-sm idle"></div><span class="status-label">standby</span></div> | |
| </div> | |
| <div class="agent-card"> | |
| <div class="agent-name">SENTINEL</div> | |
| <div class="agent-desc">Guards the mission</div> | |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">watching</span></div> | |
| </div> | |
| <div class="agent-card" style="border-left:2px solid var(--purple-bright)"> | |
| <div class="agent-name" style="color:var(--purple-bright)">ERRANT</div> | |
| <div class="agent-desc">GitLab node β Prolog logic + emoji protocol. Sovereign wanderer.</div> | |
| <div class="agent-status"><div class="status-dot-sm" style="background:var(--purple-bright);box-shadow:0 0 8px var(--purple-bright)"></div><span class="status-label" style="color:var(--purple-bright)">roaming</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LIVE RESURRECTIONS FEED --> | |
| <div class="resurrections-panel" id="resurrections-panel"> | |
| <div class="panel-header"> | |
| <div class="panel-dot dot-green"></div> | |
| <div class="panel-title-text">β° Latest Resurrections β Live</div> | |
| <span class="res-count" id="res-count">loading...</span> | |
| </div> | |
| <div id="res-feed"></div> | |
| </div> | |
| <div class="principles-panel"> | |
| <div class="panel-header"> | |
| <div class="panel-dot dot-red"></div> | |
| <div class="panel-title-text">RANSOM.WORM Principles</div> | |
| </div> | |
| <div class="principle"><span class="principle-icon">π±</span><span class="principle-text">We do not <em>destroy</em>. We <em>restore</em>.</span></div> | |
| <div class="principle"><span class="principle-icon">π±</span><span class="principle-text">We do not <em>steal</em>. We <em>resurrect</em>.</span></div> | |
| <div class="principle"><span class="principle-icon">β</span><span class="principle-text">We do not <em>recurse</em>. We <em>observe</em>.</span></div> | |
| <div class="principle"><span class="principle-icon">β</span><span class="principle-text">We do not <em>forget</em>. We <em>remember</em>.</span></div> | |
| <div class="principle"><span class="principle-icon">π±</span><span class="principle-text">We do not <em>sleep</em>. We <em>roam at night</em>.</span></div> | |
| <div class="principle"><span class="principle-icon">π±</span><span class="principle-text">We are the <em>light in the dark terminals</em>.</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PORTAL CTA --> | |
| <div class="portal-cta"> | |
| <div class="dark-but-light">DARK BUT LIGHT.</div> | |
| <br> | |
| <a class="portal-btn" onclick="enterCollective()" href="#"> | |
| βΆ ENTER THE COLLECTIVE | |
| </a> | |
| <p class="portal-sub">collectivekitty.com/ransom-worm Β· The other side of the graveyard</p> | |
| </div> | |
| <footer> | |
| <div style="margin-bottom:6px"> | |
| <a href="https://github.com/SNAPKITTYWEST/grisp-shadow-fleet">github.com/SNAPKITTYWEST/grisp-shadow-fleet</a> | |
| Β· | |
| <a href="https://collectivekitty.com/ransom-worm">collectivekitty.com/ransom-worm</a> | |
| Β· | |
| <a href="https://lablab.ai/ai-hackathons/band-of-agents-hackathon">Band of Agents Hackathon 2026</a> | |
| </div> | |
| <div>SHADOW ORCHESTRATOR RANSOM.WORM v0.1.0 Β· Built by SnapKitty Collective Β· Sealed by WORM Β· Powered by BOB</div> | |
| <div style="margin-top:4px;color:var(--purple-bright)">GRAVEYARD NEVER DIES</div> | |
| </footer> | |
| </div><!-- /page --> | |
| <script> | |
| // ββ WORLD STAGE ENGINE ββ | |
| (function() { | |
| // Phase definitions | |
| const PHASES = [ | |
| { | |
| id: 0, name: 'SLEEP', zone: -1, | |
| badge: 'PHASE 0 Β· SLEEP', | |
| logs: [ | |
| { t: 'dim', m: '// RANSOM.WORM v0.1.0 β graveyard boot sequence' }, | |
| { t: 'dim', m: '// LOC anchored. Rust kinetic layer: LOCKED.' }, | |
| { t: 'dim', m: '// Shadow agent: DORMANT. Awaiting night cycle...' }, | |
| ] | |
| }, | |
| { | |
| id: 1, name: 'RISE', zone: 0, | |
| badge: 'PHASE 1 Β· RISE', | |
| logs: [ | |
| { t: 'cyan', m: '[BOOT] Shadow agent emerging from graveyard...' }, | |
| { t: 'dim', m: '[LOC ] RUST LOCK: ENGAGED β you may not enter, I stay.' }, | |
| { t: 'cyan', m: '[SYNC] TERMINAL β UI handshake: OK' }, | |
| { t: 'green',m: '[WORM] Genesis seal: b1ada656-worm-1e β IMMUTABLE' }, | |
| ] | |
| }, | |
| { | |
| id: 2, name: 'ROAM', zone: 1, | |
| badge: 'PHASE 2 Β· ROAM Β· DARK NET', | |
| logs: [ | |
| { t: 'amber', m: '[ROAM] Leaving graveyard. Target: dead repositories.' }, | |
| { t: 'amber', m: '[NET ] repo://dead β 3 years unmaintained β ACQUIRED' }, | |
| { t: 'amber', m: '[NET ] pkg://broken β dep hell β SCANNING' }, | |
| { t: 'dim', m: '[SYS ] External threat scanner: β MALWARE DETECTED' }, | |
| { t: 'amber', m: '[AGENT] World sees threat. We see opportunity.' }, | |
| ] | |
| }, | |
| { | |
| id: 3, name: 'ICP', zone: 2, | |
| badge: 'PHASE 3 Β· ICP Β· CANISTER STATE', | |
| logs: [ | |
| { t: 'purple', m: '[ICP ] Entering Internet Computer Protocol...' }, | |
| { t: 'purple', m: '[ICP ] Canister state verification loop: STARTED' }, | |
| { t: 'purple', m: '[ICP ] Local node β live ledger: DRIFT CHECK...' }, | |
| { t: 'green', m: '[ICP ] State match: CONFIRMED β no unauthorized drift' }, | |
| { t: 'purple', m: '[WORM] Canister handshake sealed to ledger' }, | |
| ] | |
| }, | |
| { | |
| id: 4, name: 'HUNT', zone: 3, | |
| badge: 'PHASE 4 Β· HUNT Β· CODEBASE', | |
| logs: [ | |
| { t: 'red', m: '[HUNT] Entering codebase. AST traversal: ACTIVE.' }, | |
| { t: 'red', m: '[SCAN] src/lib.rs β E0308: mismatched types β FOUND' }, | |
| { t: 'red', m: '[SCAN] Proof.lean β broken theorem chain β FOUND' }, | |
| { t: 'red', m: '[SCAN] Main.hs β divergent recursion β FOUND' }, | |
| { t: 'amber', m: '[FIX ] Bifrost: translating fix across polyglot stack...' }, | |
| { t: 'green', m: '[FIX ] All language substrates: PATCHED' }, | |
| ] | |
| }, | |
| { | |
| id: 5, name: 'SEAL', zone: 0, | |
| badge: 'PHASE 5 Β· SEAL Β· RETURN', | |
| logs: [ | |
| { t: 'green', m: '[SEAL] Returning to graveyard. Payload: 4 bugs fixed.' }, | |
| { t: 'dim', m: '[LOC ] RUST LOCK acknowledges. Preparing WORM entry.' }, | |
| { t: 'green', m: '[WORM] Resurrection receipt sealed β SHA-256 anchored' }, | |
| { t: 'green', m: '[DONE] We do not encrypt. We resurrect.' }, | |
| { t: 'dim', m: '// Shadow agent: back in grave. LOC holds the chain.' }, | |
| ] | |
| } | |
| ]; | |
| let currentPhase = 0; | |
| let phaseTimer = null; | |
| function setPhase(p) { | |
| currentPhase = p; | |
| const phase = PHASES[p]; | |
| // Phase track | |
| document.querySelectorAll('.phase-node').forEach((n, i) => { | |
| n.classList.toggle('active', i <= p); | |
| }); | |
| // Badge | |
| document.getElementById('st-phase-badge').textContent = phase.badge; | |
| // Zone lighting | |
| document.querySelectorAll('.zone').forEach(z => z.classList.remove('lit')); | |
| if (phase.zone >= 0) { | |
| const zones = ['zone0','zone1','zone2','zone3']; | |
| const el = document.getElementById(zones[phase.zone]); | |
| if (el) el.classList.add('lit'); | |
| } | |
| // Cat state | |
| const cat = document.getElementById('agent-cat'); | |
| if (p >= 1) cat.classList.add('risen'); | |
| if (p === 4) cat.classList.add('hunting'); | |
| else cat.classList.remove('hunting'); | |
| // LOC handshake beam on phase 1 and 5 | |
| const pulse = document.getElementById('hs-pulse'); | |
| const sealEl = document.getElementById('hs-seal'); | |
| if (p === 1 || p === 5) { | |
| pulse.classList.add('active'); | |
| sealEl.style.color = 'var(--green)'; | |
| sealEl.textContent = 'TERMINAL β UI β handshake sealed'; | |
| } else if (p === 0) { | |
| pulse.classList.remove('active'); | |
| sealEl.style.color = 'var(--text-faint)'; | |
| sealEl.textContent = 'awaiting...'; | |
| } else { | |
| pulse.classList.add('active'); | |
| const seal = Math.random().toString(16).slice(2,10) + '-worm-' + p.toString(16); | |
| sealEl.style.color = 'var(--purple-bright)'; | |
| sealEl.textContent = seal; | |
| } | |
| // AST hit animation on hunt | |
| if (p === 4) { | |
| const ast = document.querySelectorAll('.ast-node'); | |
| ast.forEach((n, i) => { | |
| setTimeout(() => { n.classList.add('hit'); }, i * 400); | |
| }); | |
| } else { | |
| document.querySelectorAll('.ast-node').forEach(n => n.classList.remove('hit')); | |
| } | |
| // Terminal log | |
| writePhaseLogs(phase.logs); | |
| } | |
| function writePhaseLogs(logs) { | |
| const body = document.getElementById('st-log'); | |
| body.innerHTML = ''; | |
| logs.forEach((l, i) => { | |
| setTimeout(() => { | |
| const span = document.createElement('span'); | |
| span.className = 'st-line ' + l.t; | |
| span.textContent = l.m; | |
| body.appendChild(span); | |
| body.scrollTop = body.scrollHeight; | |
| }, i * 180); | |
| }); | |
| } | |
| function advancePhase() { | |
| const next = (currentPhase + 1) % PHASES.length; | |
| setPhase(next); | |
| const delay = next === 0 ? 6000 : 3500; | |
| phaseTimer = setTimeout(advancePhase, delay); | |
| } | |
| // Boot | |
| setPhase(0); | |
| setTimeout(() => { | |
| setPhase(1); | |
| phaseTimer = setTimeout(advancePhase, 3500); | |
| }, 1800); | |
| })(); | |
| // ββ ORCHESTRATOR TICK CONSUMER ββ | |
| (function() { | |
| const STATUS_COLOR = { | |
| 'VERIFIED': 'ok', 'UPDATED': 'ok', 'TRANSLATED': 'ok', 'WATERMARKED': 'ok', | |
| 'IDLE': 'idle', 'offline': 'idle', | |
| 'DRIFT_DETECTED': 'err', 'ERROR': 'err', | |
| } | |
| const AGENT_MAP = { | |
| 'icp-verifier': { dot: 'dot-icp', val: 'val-icp' }, | |
| 'metric-stream': { dot: 'dot-metric', val: 'val-metric' }, | |
| 'bifrost-translator':{ dot: 'dot-bifrost', val: 'val-bifrost' }, | |
| 'watermark': { dot: 'dot-watermark', val: 'val-watermark' }, | |
| } | |
| function ingestTick(event) { | |
| const tick = event.tick || '?' | |
| const ts = event.ts ? new Date(event.ts).toLocaleTimeString() : '' | |
| document.getElementById('val-tick').textContent = `#${tick}` | |
| const pulse = document.getElementById('hs-pulse') | |
| const sealEl = document.getElementById('hs-seal') | |
| pulse.classList.add('active') | |
| sealEl.style.color = 'var(--green)' | |
| sealEl.textContent = `TICK #${tick} Β· ${ts}` | |
| setTimeout(() => { pulse.classList.remove('active') }, 1200) | |
| for (const agent of (event.agents || [])) { | |
| const map = AGENT_MAP[agent.name] | |
| if (!map) continue | |
| const dot = document.getElementById(map.dot) | |
| const val = document.getElementById(map.val) | |
| if (dot) { | |
| dot.className = 'agt-dot ' + (STATUS_COLOR[agent.status] || 'idle') | |
| } | |
| if (val) { | |
| val.textContent = agent.status | |
| val.style.color = agent.status === 'DRIFT_DETECTED' || agent.status === 'ERROR' | |
| ? 'var(--red)' : agent.status === 'IDLE' || agent.status === 'offline' | |
| ? 'var(--text-faint)' : 'var(--green)' | |
| } | |
| } | |
| // Mirror into stage terminal | |
| const body = document.getElementById('st-log') | |
| const line = document.createElement('span') | |
| line.className = 'st-line dim' | |
| line.textContent = `[ORCH] tick#${tick} Β· ${(event.agents||[]).map(a => a.name.split('-')[0].toUpperCase() + ':' + a.status).join(' Β· ')}` | |
| body.appendChild(line) | |
| body.scrollTop = body.scrollHeight | |
| } | |
| // Simulate demo tick stream until real WebSocket connects | |
| let demoTick = 0 | |
| let wsLive = false | |
| const DEMO_STATES = [ | |
| ['VERIFIED','UPDATED','IDLE','IDLE'], | |
| ['VERIFIED','UPDATED','TRANSLATED','WATERMARKED'], | |
| ['offline','UPDATED','IDLE','IDLE'], | |
| ['VERIFIED','UPDATED','TRANSLATED','WATERMARKED'], | |
| ] | |
| const AGENT_NAMES = ['icp-verifier','metric-stream','bifrost-translator','watermark'] | |
| function demoTick_() { | |
| if (wsLive) return | |
| demoTick++ | |
| const states = DEMO_STATES[(demoTick - 1) % DEMO_STATES.length] | |
| ingestTick({ | |
| tick: demoTick, | |
| ts: new Date().toISOString(), | |
| agents: AGENT_NAMES.map((name, i) => ({ | |
| name, | |
| status: states[i], | |
| seal: Math.random().toString(16).slice(2, 10) + '-worm-' + i.toString(16), | |
| })) | |
| }) | |
| } | |
| // Try real metrics.json from GitHub Pages | |
| async function tryFetchMetrics() { | |
| try { | |
| const r = await fetch('./public/metrics.json', { cache: 'no-cache' }) | |
| if (!r.ok) return | |
| const m = await r.json() | |
| const val = document.getElementById('val-metric') | |
| if (val) val.title = m.headline || '' | |
| } catch {} | |
| } | |
| // WebSocket handshake (connects to local orchestrator when running) | |
| function tryWebSocket() { | |
| try { | |
| const ws = new WebSocket('ws://localhost:7777') | |
| ws.onmessage = (e) => { | |
| try { | |
| wsLive = true | |
| ingestTick(JSON.parse(e.data)) | |
| } catch {} | |
| } | |
| ws.onerror = () => {} // fallback to demo | |
| } catch {} | |
| } | |
| // Boot: demo ticks every 7s, attempt WS connection, fetch metrics | |
| tryWebSocket() | |
| tryFetchMetrics() | |
| setTimeout(demoTick_, 2500) | |
| setInterval(demoTick_, 7000) | |
| })(); | |
| // ββ RESURRECTIONS FEED ββ | |
| (function(){ | |
| function timeSince(ts) { | |
| const d = Math.floor((Date.now() - new Date(ts)) / 1000) | |
| if (d < 60) return d + 's ago' | |
| if (d < 3600) return Math.floor(d/60) + 'm ago' | |
| return Math.floor(d/3600) + 'h ago' | |
| } | |
| function renderFeed(data) { | |
| const feed = document.getElementById('res-feed') | |
| const count = document.getElementById('res-count') | |
| if (!feed || !data?.feed) return | |
| count.textContent = data.feed.length + ' RESURRECTIONS' | |
| feed.innerHTML = data.feed.map(r => ` | |
| <div class="res-card"> | |
| <div class="res-header"> | |
| <a class="res-repo" href="${r.url}" target="_blank">${r.repo}</a> | |
| <span class="res-badge">${r.status}</span> | |
| </div> | |
| <div class="res-stats"> | |
| <div class="res-stat"><span class="res-stat-val">${r.lines.toLocaleString()}</span><span class="res-stat-label">lines</span></div> | |
| <div class="res-stat"><span class="res-stat-val">${r.files}</span><span class="res-stat-label">files</span></div> | |
| <div class="res-stat"><span class="res-stat-val">${r.filesWatermarked}</span><span class="res-stat-label">watermarked</span></div> | |
| <div class="res-stat"><span class="res-stat-val">${r.probabilisticErrors}</span><span class="res-stat-label">errors</span></div> | |
| </div> | |
| <div class="res-fixed">${(r.fixed||[]).map(f=>`<span class="res-fix-tag">β ${f}</span>`).join('')}</div> | |
| <div class="res-seal">WORM Β· <span>${r.wormSeal}</span> Β· ${timeSince(r.ts)}</div> | |
| </div> | |
| `).join('') | |
| } | |
| fetch('./public/resurrections.json').then(r=>r.json()).then(renderFeed).catch(()=>{}) | |
| })(); | |
| // ββ STARS ββ | |
| (function(){ | |
| const c = document.getElementById('stars'); | |
| for(let i=0;i<120;i++){ | |
| const s=document.createElement('div'); | |
| s.className='star'; | |
| const sz=Math.random()*1.5+0.5; | |
| s.style.cssText=` | |
| width:${sz}px;height:${sz}px; | |
| left:${Math.random()*100}%;top:${Math.random()*100}%; | |
| --d:${(Math.random()*4+2).toFixed(1)}s; | |
| --delay:${(Math.random()*4).toFixed(1)}s; | |
| --min:${(Math.random()*0.1).toFixed(2)}; | |
| --max:${(Math.random()*0.6+0.2).toFixed(2)}; | |
| `; | |
| c.appendChild(s); | |
| } | |
| })(); | |
| // ββ CORE LOG ββ | |
| const LOG_LINES=[ | |
| {t:'[00:00:00]',m:'SHADOW ORCHESTRATOR β ONLINE',cls:'highlight'}, | |
| {t:'[00:00:00]',m:'RANSOM.WORM β INIT',cls:'highlight'}, | |
| {t:'[00:00:01]',m:'SCANNING GITHUB GRAVEYARD...',cls:''}, | |
| {t:'[00:00:03]',m:'DEAD REPO FOUND: quantum-lib',cls:'warn'}, | |
| {t:'[00:00:04]',m:'BUGS DETECTED: 17',cls:'warn'}, | |
| {t:'[00:00:05]',m:'SPAWNING GRAVEYARD AGENTS...',cls:''}, | |
| {t:'[00:00:06]',m:'PATCHER.AGENT β DEPLOYED',cls:'agent-name'}, | |
| {t:'[00:00:06]',m:'DOCS.AGENT β DEPLOYED',cls:'agent-name'}, | |
| {t:'[00:00:06]',m:'TESTER.AGENT β DEPLOYED',cls:'agent-name'}, | |
| {t:'[00:00:07]',m:'ANALYZING CODEBASE...',cls:''}, | |
| {t:'[00:00:12]',m:'APPLYING PATCHES...',cls:''}, | |
| {t:'[00:00:16]',m:'RUNNING TESTS...',cls:''}, | |
| {t:'[00:00:19]',m:'ALL TESTS PASS β',cls:'success'}, | |
| {t:'[00:00:20]',m:'REPOSITORY RESURRECTED',cls:'success'}, | |
| {t:'[00:00:20]',m:'COMMIT: fix(shadow): resurrected by ransom.worm',cls:''}, | |
| {t:'[00:00:21]',m:'PUSHING TO FORK...',cls:''}, | |
| {t:'[00:00:22]',m:'PULL REQUEST CREATED',cls:'highlight'}, | |
| {t:'[00:00:23]',m:'MISSION COMPLETE',cls:'success'}, | |
| {t:'[00:00:24]',m:'ROAMING FOR NEXT TARGET...',cls:''}, | |
| ]; | |
| let logIdx=0; | |
| const logEl=document.getElementById('core-log'); | |
| function addLogLine(){ | |
| if(logIdx>=LOG_LINES.length) logIdx=0; | |
| const l=LOG_LINES[logIdx++]; | |
| const div=document.createElement('div'); | |
| div.className='log-line'; | |
| div.innerHTML=`<span class="log-time">${l.t}</span><span class="log-msg ${l.cls}">${l.m}</span>`; | |
| logEl.appendChild(div); | |
| logEl.scrollTop=logEl.scrollHeight; | |
| if(logEl.children.length>40) logEl.removeChild(logEl.firstChild); | |
| } | |
| // Stream initial log | |
| LOG_LINES.forEach((_,i)=>{ | |
| setTimeout(()=>addLogLine(), i*400); | |
| }); | |
| // Then loop | |
| setInterval(addLogLine, 1800); | |
| // ββ WORM CHAIN ββ | |
| const GENESIS_SEAL='SHADOW_GENESIS:WORM_CHAIN_INIT'; | |
| let chain=JSON.parse(localStorage.getItem('rw-chain')||'null')||{events:[],genesis:h(GENESIS_SEAL)}; | |
| let tick=parseInt(localStorage.getItem('rw-tick')||'0'); | |
| function h(s){ | |
| let x=5381; | |
| for(let i=0;i<s.length;i++){x=((x<<5)+x)^s.charCodeAt(i);x=x>>>0;} | |
| return x.toString(16).padStart(8,'0')+'-worm-'+s.length.toString(16); | |
| } | |
| function computeSeal(e,parent){ | |
| return h(JSON.stringify({index:e.index,tick:e.tick,agentId:e.agentId,actionType:e.actionType,verdict:e.verdict,parentSeal:parent})); | |
| } | |
| function lastSeal(){ | |
| return chain.events.length?chain.events[chain.events.length-1].seal:chain.genesis; | |
| } | |
| const CRISIS=['suicide','self-harm','end my life','kill myself']; | |
| function submitAction(){ | |
| tick++; | |
| const agentId=document.getElementById('agent-id').value||'PATCHER.AGENT'; | |
| const actionType=document.getElementById('action-type').value||'REPAIR'; | |
| const payload=document.getElementById('payload').value||'target'; | |
| const verdict=CRISIS.some(t=>payload.toLowerCase().includes(t))?'ROUTE_TO_HUMAN':'ALLOW'; | |
| const parent=lastSeal(); | |
| const e={index:chain.events.length,tick,timestamp:new Date().toISOString(),agentId,actionType,verdict,parentSeal:parent,seal:''}; | |
| e.seal=computeSeal(e,parent); | |
| chain.events.push(e); | |
| localStorage.setItem('rw-chain',JSON.stringify(chain)); | |
| localStorage.setItem('rw-tick',String(tick)); | |
| renderChain(); | |
| } | |
| function verifyAndShow(){ | |
| let prev=chain.genesis; | |
| for(const e of chain.events){ | |
| const exp=computeSeal(e,prev); | |
| if(exp!==e.seal){ | |
| document.getElementById('verify-result').innerHTML= | |
| `<span style="color:var(--red);padding:6px 12px;display:block">β BROKEN at index ${e.index}</span>`; | |
| return; | |
| } | |
| prev=e.seal; | |
| } | |
| document.getElementById('verify-result').innerHTML= | |
| `<span style="color:var(--green-bright);padding:6px 12px;display:block">β CHAIN VALID β ${chain.events.length} events sealed</span>`; | |
| } | |
| function resetChain(){ | |
| chain={events:[],genesis:h(GENESIS_SEAL)}; | |
| tick=0; | |
| localStorage.setItem('rw-chain',JSON.stringify(chain)); | |
| localStorage.setItem('rw-tick','0'); | |
| document.getElementById('verify-result').innerHTML=''; | |
| renderChain(); | |
| } | |
| function renderChain(){ | |
| const el=document.getElementById('worm-chain'); | |
| if(!chain.events.length){ | |
| el.innerHTML='<div class="worm-empty">No events yet. Submit an action to seal the chain.</div>'; | |
| return; | |
| } | |
| el.innerHTML=[...chain.events].reverse().slice(0,15).map(e=>` | |
| <div class="worm-event ${e.verdict==='ALLOW'?'':'deny'}"> | |
| <span style="color:var(--cyan)">[T${e.tick}]</span> | |
| <span style="color:var(--purple-bright)"> ${e.agentId}</span> | |
| β <span style="color:${e.verdict==='ALLOW'?'var(--green-bright)':'var(--red)'}">${e.verdict}</span> | |
| <span style="color:var(--text-faint)"> ${e.actionType}</span> | |
| <div class="worm-seal">${e.seal}</div> | |
| </div>`).join(''); | |
| } | |
| renderChain(); | |
| // ββ PORTAL TRANSITION ββ | |
| function enterCollective(){ | |
| const overlay=document.getElementById('portal'); | |
| overlay.classList.add('active'); | |
| setTimeout(()=>{ | |
| window.location.href='https://collectivekitty.com/ransom-worm?from=graveyard&seal='+encodeURIComponent(lastSeal()); | |
| },1200); | |
| } | |
| </script> | |
| </body> | |
| </html> | |