open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/shared/playground-examples/components/sankey-toxic-flow.html
Kjell Tore Guttormsen f1fecf39b8 feat(shared): Tier 3 wave 2 (12 components) + self-hosted fonts 
Two changes in one commit because they were prepared together and the
component demos depend on the new self-hosted fonts.css.

Tier 3 wave 2 — 12 new components
---------------------------------
Adds components-tier3-supplement.css (886 lines) and 12 isolated demo
HTML pages under shared/playground-examples/components/:
toxic-flow chain, fleet-overview, kanban Keep/Review/Remove,
maturity-ladder, classify-and-transform, cycle-ribbon,
persistent-antipattern, suppressed-signals, ExpansionCard, ReadMore,
FormProgress, Aspirational-vs-Committed.

Reuses existing tokens — no new CSS custom properties. Honors the
Phase 1 feedback rules: no large pink areas for body text, severity-red
distinct from failure-red, dark mode via existing [data-theme="dark"].

Provenance: components-tier3-supplement.css and the 12 demo bodies were
authored by claude.ai/design (separate Anthropic instance) on 2026-05-03.
This commit only integrates them — path rewrites, font swap, generic
name substitution in fleet-overview demo data, README updates.
base.css from the export was deliberately NOT taken in because it
reverted the inline-message contrast fix from v0.1.

Self-hosted fonts (Inter, JetBrains Mono, Source Serif 4)
---------------------------------------------------------
Replaces all fonts.googleapis.com / fonts.gstatic.com requests with
.woff2 files bundled at shared/playground-design-system/fonts/.

Why:
- No data leaked to Google about end-user IPs and User-Agents.
- GDPR-safe for Norwegian public-sector deployments.
- Works offline / behind air-gapped firewalls.
- Forkers downloading the marketplace get a complete bundle.

All three families are SIL Open Font License 1.1 — license texts
included alongside the woff2 files. Source Serif 4 woff2 generated
locally from the upstream OTF release using
fonttools ttLib.woff2 compress; Inter and JetBrains Mono are
unmodified upstream webfont releases.

Total bundle: 9 woff2 files, ~940 KB. New fonts.css declares all
@font-face rules with font-display: swap. All 6 example HTMLs and 12
new component demos load it via a single relative path.

Verified
--------
- Privacy grep returns empty across plugins/ and shared/
- Google Fonts grep returns empty across shared/*.html
- Smoke test via python -m http.server: HTML + 7 stylesheets +
  Inter-Regular.woff2 all return 200

Doc updates
-----------
- shared/playground-design-system/README.md: file tree updated,
  Quick start snippet shows fonts.css link, "Self-hosted fonts"
  section added
- shared/playground-design-system/fonts/LICENSES.md: combined attribution
- README.md (root): Tier 3 wave 1+2 component list, Privacy-first bullet
- CLAUDE.md (root): tree entry expanded for new components + fonts

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-03 05:08:07 +02:00

117 lines
6.2 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="nb">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Toxic-Flow Chain · Tier 3 supp</title>
<link rel="stylesheet" href="../../playground-design-system/tokens.css" />
<link rel="stylesheet" href="../../playground-design-system/base.css" />
<link rel="stylesheet" href="../../playground-design-system/components.css" />
<link rel="stylesheet" href="../../playground-design-system/components-tier2.css" />
<link rel="stylesheet" href="../../playground-design-system/components-tier3-supplement.css" />
<link rel="stylesheet" href="../../playground-design-system/fonts.css" />
</head>
<body>
<header class="app-header">
<a href="../index.html" class="app-header__brand"><span class="app-header__brand-mark">P</span><span>Playground</span></a>
<span class="app-header__breadcrumb">/ Komponenter / Toxic-Flow Chain (TFA)</span>
</header>
<main class="container container--wide" style="padding: var(--space-8) 0;">
<div style="margin-bottom: var(--space-6);">
<span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-scope-security); font-weight: var(--font-weight-semibold);">llm-security · TFA</span>
<h1 style="margin: 4px 0 6px;">Toxic-Flow Chain</h1>
<p class="text-secondary" style="max-width: 65ch;">Trifecta Flow Analysis: Input → Access → Exfil. Hver leg viser type, kilde og mitigation-status. Tykkere arrows = høyere severity. Grønt skjold = mitigation som bryter kjeden.</p>
</div>
<h2 style="font-size: var(--font-size-lg); margin: 0 0 var(--space-3);">TFA-2026-118-001 — BLOCK</h2>
<div class="tfa-flow" id="flow1">
<span class="tfa-flow__verdict" data-verdict="BLOCK">BLOCK</span>
<button type="button" class="tfa-leg" data-severity="high" onclick="alert('Drill-down: Input leg — skill markdown fil')">
<span class="tfa-leg__label">Input</span>
<span class="tfa-leg__name">Untrusted data</span>
<span class="tfa-leg__source">skill markdown-fil</span>
<span class="tfa-leg__status" data-mit="unmitigated">● Ikke mitigert</span>
</button>
<span class="tfa-arrow" data-severity="critical" aria-hidden="true"><span class="tfa-arrow__line"></span></span>
<button type="button" class="tfa-leg" data-severity="critical" onclick="alert('Drill-down: Access leg — Bash + filsystem')">
<span class="tfa-leg__label">Access</span>
<span class="tfa-leg__name">Sensitive capability</span>
<span class="tfa-leg__source">Bash · filsystem-tilgang</span>
<span class="tfa-leg__status" data-mit="partially_mitigated">◐ Delvis mitigert</span>
</button>
<span class="tfa-arrow" data-severity="critical" aria-hidden="true"><span class="tfa-arrow__line"></span></span>
<button type="button" class="tfa-leg" data-severity="critical" onclick="alert('Drill-down: Exfil leg — webhook.site')">
<span class="tfa-leg__label">Exfil</span>
<span class="tfa-leg__name">External endpoint</span>
<span class="tfa-leg__source">webhook.site/abc123</span>
<span class="tfa-leg__status" data-mit="unmitigated">● Ikke mitigert</span>
</button>
</div>
<h2 style="font-size: var(--font-size-lg); margin: var(--space-8) 0 var(--space-3);">TFA-2026-118-002 — WARN (mitigation present)</h2>
<div class="tfa-flow">
<span class="tfa-flow__verdict" data-verdict="WARN">WARN</span>
<button type="button" class="tfa-leg" data-severity="medium">
<span class="tfa-leg__label">Input</span>
<span class="tfa-leg__name">User prompt</span>
<span class="tfa-leg__source">chat input</span>
<span class="tfa-leg__status" data-mit="mitigated">✓ Sanert</span>
</button>
<span class="tfa-arrow tfa-arrow--mitigated" data-severity="medium" aria-hidden="true">
<span class="tfa-arrow__line"></span>
<span class="tfa-arrow__shield" title="Sanitering bryter kjeden">🛡</span>
</span>
<button type="button" class="tfa-leg" data-severity="high">
<span class="tfa-leg__label">Access</span>
<span class="tfa-leg__name">Read-only DB query</span>
<span class="tfa-leg__source">SELECT-only role</span>
<span class="tfa-leg__status" data-mit="partially_mitigated">◐ RBAC aktiv</span>
</button>
<span class="tfa-arrow" data-severity="high" aria-hidden="true"><span class="tfa-arrow__line"></span></span>
<button type="button" class="tfa-leg" data-severity="high">
<span class="tfa-leg__label">Exfil</span>
<span class="tfa-leg__name">Logged endpoint</span>
<span class="tfa-leg__source">api.bærum.no/log</span>
<span class="tfa-leg__status" data-mit="mitigated">✓ Audit-sporet</span>
</button>
</div>
<h2 style="font-size: var(--font-size-lg); margin: var(--space-8) 0 var(--space-3);">TFA-2026-118-003 — ALLOW</h2>
<div class="tfa-flow">
<span class="tfa-flow__verdict" data-verdict="ALLOW">ALLOW</span>
<button type="button" class="tfa-leg" data-severity="medium">
<span class="tfa-leg__label">Input</span>
<span class="tfa-leg__name">Konfig-fil</span>
<span class="tfa-leg__source">checked-in config.toml</span>
<span class="tfa-leg__status" data-mit="mitigated">✓ Signert</span>
</button>
<span class="tfa-arrow tfa-arrow--mitigated" data-severity="medium" aria-hidden="true">
<span class="tfa-arrow__line"></span>
<span class="tfa-arrow__shield">🛡</span>
</span>
<button type="button" class="tfa-leg" data-severity="medium">
<span class="tfa-leg__label">Access</span>
<span class="tfa-leg__name">Local file read</span>
<span class="tfa-leg__source">repo-scope</span>
<span class="tfa-leg__status" data-mit="mitigated">✓ Sandboxed</span>
</button>
<span class="tfa-arrow tfa-arrow--mitigated" data-severity="medium" aria-hidden="true">
<span class="tfa-arrow__line"></span>
<span class="tfa-arrow__shield">🛡</span>
</span>
<button type="button" class="tfa-leg" data-severity="medium">
<span class="tfa-leg__label">Exfil</span>
<span class="tfa-leg__name">Stdout</span>
<span class="tfa-leg__source">terminal</span>
<span class="tfa-leg__status" data-mit="mitigated">✓ Lokalt</span>
</button>
</div>
</main>
</body>
</html>
Reference in a new issue View git blame Copy permalink