diff --git a/src/psyc/cockpit/static/cockpit.css b/src/psyc/cockpit/static/cockpit.css index fdf937d..8cb156b 100644 --- a/src/psyc/cockpit/static/cockpit.css +++ b/src/psyc/cockpit/static/cockpit.css @@ -17,7 +17,12 @@ body { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; - background: var(--bg); + background-color: var(--bg); + /* faint cyber grid */ + background-image: + linear-gradient(rgba(30, 200, 255, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(30, 200, 255, 0.035) 1px, transparent 1px); + background-size: 44px 44px; color: var(--text); font-size: 14px; line-height: 1.45; @@ -31,7 +36,27 @@ h1, h2, h3, .brand-sub, .nav a, .family-tag, .family-hub, .bot-name { font-family: var(--font-display); } /* one-line purpose statement under a page title */ -.page-intro { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 4px 0 18px; max-width: 74ch; } +.page-intro { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 4px 0 10px; max-width: 74ch; } + +/* collapsible per-page help — how to use it, what you're seeing, why it matters */ +.page-help { margin: 0 0 18px; max-width: 80ch; } +.page-help summary { + cursor: pointer; color: var(--accent); font-size: 12px; + font-family: var(--font-display); letter-spacing: 0.5px; + list-style: none; user-select: none; display: inline-block; +} +.page-help summary::-webkit-details-marker { display: none; } +.page-help summary::before { content: "▸ "; } +.page-help[open] summary::before { content: "▾ "; } +.page-help summary:hover { text-shadow: 0 0 10px var(--accent-glow); } +.help-body { + margin-top: 10px; padding: 12px 14px; + background: var(--panel-2); border: 1px solid var(--border); + border-left: 2px solid var(--accent); border-radius: 4px; +} +.help-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--muted); } +.help-body p:last-child { margin-bottom: 0; } +.help-body b { color: var(--accent); font-family: var(--font-display); font-weight: 600; } .topbar { display: flex; justify-content: space-between; align-items: center; @@ -72,13 +97,21 @@ h1, h2, h3, .footer { text-align: center; color: var(--muted); padding: 24px; font-size: 12px; } .panel { + position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 20px 24px; } +/* HUD corner brackets — targeting-frame cyber look */ +.panel::before, .panel::after { + content: ""; position: absolute; width: 15px; height: 15px; + border: 2px solid var(--accent); pointer-events: none; +} +.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; } +.panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; } .panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; } -.panel-head h1 { margin: 0; font-size: 18px; } +.panel-head h1 { margin: 0; font-size: 18px; text-shadow: 0 0 18px var(--accent-glow); } .count { color: var(--muted); font-size: 12px; } .empty { color: var(--muted); } .back { color: var(--muted); font-size: 12px; } diff --git a/src/psyc/cockpit/templates/case_detail.html b/src/psyc/cockpit/templates/case_detail.html index 46ae14e..f597b9a 100644 --- a/src/psyc/cockpit/templates/case_detail.html +++ b/src/psyc/cockpit/templates/case_detail.html @@ -9,6 +9,14 @@
{{ case.summary }}
The full record for one case — how Classifyline rated it, what Scoutline observed, the evidence Sealine encrypted, where Routeline may send it, and every ledger entry it produced.
+How to use. Read the cards top-to-bottom — classification, observables, sealed package, routes, ledger. Hit ▶ case journey for the animated walk-through.
+What you're seeing. Every worker line's output for this one case: how it was rated, what was observed, what was encrypted and to whom, where it would route, and the audit rows it produced.
+Why it matters. Nothing sensitive leaves psyc without a human seeing the full reasoning chain — this page is that chain, for one case.
+Every threat case psyc is tracking — ingested from URLhaus, CISA KEV, and Feodo Tracker, then classified by severity and TLP. The live queue of what the platform currently knows about; click any case to follow it through the pipeline.
+How to use. Scan the severity and TLP badges to triage; click any case ID to open its full record and Worker Mesh journey. Run psyc fetch-all to pull fresh cases from the feeds.
What you're seeing. Each row is one normalized Case object — ingested by Scoutline from URLhaus, CISA KEV, or Feodo Tracker, then rated by Classifyline.
+Why it matters. A defender needs one place that answers "what is happening right now" before deciding what to act on — this queue is that place.
+No cases yet. Run psyc fetch urlhaus to ingest.
{{ case.summary }}
Watch the case move through psyc's worker mesh — seven bots, each performing one pipeline stage and reporting its real result. The Classifier bot's severity verdict comes from the live fine-tuned model; hit ▶ replay to run it again.
+How to use. Let the case token travel the mesh — each bot wakes, performs its stage, and reports. Press ▶ replay to run it again.
+What you're seeing. Seven worker bots, one per pipeline stage. Awake bots ran for this case; asleep bots are stages that didn't apply. The Classifier bot's verdict is generated live by the fine-tuned model.
+Why it matters. It makes the chain of reasoning legible — you can watch what the platform did and why, not just trust a final answer.
+