npm - vibe-roast - Versions diffs - 0.98.0 - Mend

vibe-roast 0.98.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/assests/live-report.html ADDED Viewed

@@ -0,0 +1,1403 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Live Report · Vibe Roaster</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --bg: #f3f1ec;
+        --bg-deep: #e8e4db;
+        --card: #fffcf7;
+        --ink: #1a1a1a;
+        --muted: #6b6560;
+        --line: #e4dfd6;
+        --orange: #ff5a1f;
+        --orange-soft: #fff0e8;
+        --shadow: 0 10px 30px rgba(40, 28, 12, 0.06);
+        --radius: 18px;
+        --accent: #ff5a1f;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        color: var(--ink);
+        font-family: Outfit, sans-serif;
+        background:
+          radial-gradient(1200px 600px at 10% -10%, #ffe7d6 0%, transparent 55%),
+          radial-gradient(900px 500px at 100% 0%, #d9fff3 0%, transparent 50%),
+          linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
+      }
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+      .topnav {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 22px;
+        padding: 0;
+        background: transparent;
+        border: none;
+      }
+      .brand {
+        margin: 0;
+        font-family: "Great Vibes", cursive;
+        font-weight: 400;
+        font-size: clamp(40px, 6vw, 52px);
+        line-height: 0.95;
+        letter-spacing: 0.01em;
+        color: var(--ink);
+      }
+      .nav-links {
+        display: flex;
+        gap: 18px;
+        color: var(--muted);
+        font-size: 14px;
+        font-weight: 600;
+        padding-bottom: 6px;
+      }
+      .nav-links a:hover {
+        color: var(--ink);
+      }
+      .shell {
+        width: min(1120px, calc(100% - 32px));
+        margin: 0 auto;
+        padding: 28px 0 80px;
+        overflow-x: clip;
+      }
+      .back {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 18px;
+        color: var(--muted);
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .picker {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 22px;
+      }
+      .picker button {
+        appearance: none;
+        border: 1px solid var(--line);
+        background: rgba(255, 252, 247, 0.8);
+        color: var(--muted);
+        border-radius: 999px;
+        padding: 8px 12px;
+        font: inherit;
+        font-size: 13px;
+        font-weight: 650;
+        cursor: pointer;
+        transition: 160ms ease;
+      }
+      .picker button:hover,
+      .picker button.is-active {
+        color: #fff;
+        border-color: transparent;
+        background: var(--accent);
+        transform: translateY(-1px);
+      }
+      .layout {
+        display: grid;
+        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
+        gap: 20px;
+        align-items: start;
+        min-width: 0;
+      }
+      .card {
+        background: var(--card);
+        border: 1px solid rgba(0, 0, 0, 0.04);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+      }
+      .profile-card {
+        padding: 8px 4px 0;
+        text-align: center;
+        position: relative;
+        overflow: visible;
+        background: transparent;
+        border: 0;
+        box-shadow: none;
+        min-width: 0;
+      }
+      .profile-stage {
+        position: relative;
+        margin: 0 auto 8px;
+        padding: 12px 8px 0;
+        isolation: isolate;
+      }
+      .profile-stage::before {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 8%;
+        width: 100%;
+        height: 78%;
+        transform: translateX(-50%);
+        border-radius: 46% 54% 42% 58% / 48% 44% 56% 52%;
+        background:
+          radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 28%, #fff), transparent 58%),
+          radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--accent) 16%, #f3f1ec), transparent 62%);
+        z-index: 0;
+        pointer-events: none;
+      }
+      .profile-stage::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        bottom: 6%;
+        width: 58%;
+        height: 18px;
+        transform: translateX(-50%);
+        border-radius: 50%;
+        background: color-mix(in srgb, var(--accent) 18%, transparent);
+        filter: blur(8px);
+        z-index: 0;
+        pointer-events: none;
+      }
+      .handle {
+        position: relative;
+        z-index: 1;
+        margin: 0;
+        font-size: 28px;
+        font-weight: 800;
+        letter-spacing: -0.04em;
+        color: var(--accent);
+      }
+      .name {
+        position: relative;
+        z-index: 1;
+        margin: 4px 0 6px;
+        color: var(--muted);
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .mascot-wrap {
+        position: relative;
+        z-index: 1;
+        width: min(100%, 300px);
+        margin: 0 auto;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+        animation: floaty 4.8s ease-in-out infinite;
+      }
+      .mascot-wrap img {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        height: auto;
+        display: block;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        /* transparent PNG sits unframed on stage blob */
+        image-rendering: auto;
+      }
+      .meta-panel {
+        margin-top: 6px;
+        padding: 16px 14px 14px;
+        border-radius: 18px;
+        background: rgba(255, 252, 247, 0.78);
+        border: 1px solid rgba(0, 0, 0, 0.04);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(10px);
+      }
+      .score-block {
+        position: relative;
+        margin: 8px 0 6px;
+      }
+      .score-num {
+        font-family: "JetBrains Mono", monospace;
+        font-size: 44px;
+        font-weight: 700;
+        letter-spacing: -0.05em;
+        line-height: 1;
+        color: var(--accent);
+        white-space: nowrap;
+      }
+      .score-num span {
+        font-size: 18px;
+        color: var(--muted);
+        font-weight: 500;
+      }
+      .tier {
+        margin: 8px 0 4px;
+        font-size: 28px;
+        font-weight: 800;
+        letter-spacing: 0.04em;
+        color: var(--accent);
+        white-space: nowrap;
+      }
+      .tier-blurb {
+        margin: 0 0 14px;
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 6px;
+        margin-bottom: 16px;
+      }
+      .tags span {
+        padding: 5px 10px;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--accent) 12%, white);
+        color: color-mix(in srgb, var(--accent) 70%, #222);
+        font-size: 12px;
+        font-weight: 700;
+      }
+      .hashtag-row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 6px;
+        margin: 12px 0 4px;
+      }
+      .hashtag-row span {
+        padding: 5px 10px;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--accent) 14%, #fffcf7);
+        color: color-mix(in srgb, var(--accent) 72%, #222);
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: -0.01em;
+      }
+      .cloud-stage,
+      .activity-stage {
+        border-radius: 14px;
+        background: #f7f4ef;
+        overflow: hidden;
+      }
+      .cloud-stage {
+        height: 140px;
+        display: block;
+        position: relative;
+      }
+      .cloud-stage canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      .activity-stage {
+        min-height: 280px;
+        max-height: 360px;
+        padding: 0;
+        position: relative;
+      }
+      .activity-view-toggle {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        z-index: 2;
+        display: inline-flex;
+        gap: 2px;
+        padding: 2px;
+        border-radius: 999px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        background: color-mix(in srgb, #fffcf7 92%, transparent);
+      }
+      .activity-view-toggle button {
+        border: 0;
+        background: transparent;
+        color: #6b6560;
+        font: 700 10px/1 "JetBrains Mono", ui-monospace, monospace;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        border-radius: 999px;
+        padding: 6px 10px;
+        cursor: pointer;
+      }
+      .activity-view-toggle button.is-active {
+        background: #10b981;
+        color: #fff;
+      }
+      .activity-view-body {
+        padding-top: 0;
+        transform-origin: 50% 85%;
+      }
+      .activity-view-body.is-enter {
+        animation: heatmapViewIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+      }
+      .activity-view-body.is-exit {
+        animation: heatmapViewOut 0.16s ease-in both;
+      }
+      @keyframes heatmapViewIn {
+        from {
+          opacity: 0;
+          transform: perspective(900px) rotateX(10deg) translateY(14px) scale(0.97);
+        }
+        to {
+          opacity: 1;
+          transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
+        }
+      }
+      @keyframes heatmapViewOut {
+        from {
+          opacity: 1;
+          transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
+        }
+        to {
+          opacity: 0;
+          transform: perspective(900px) rotateX(6deg) translateY(8px) scale(0.98);
+        }
+      }
+      .activity-2d-wrap {
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        padding: 0;
+      }
+      .activity-kpi {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 3px;
+        margin-bottom: 2px;
+        padding-right: 64px;
+      }
+      .activity-kpi > div {
+        border-radius: 8px;
+        background: #fffcf7;
+        border: 1px solid rgba(0, 0, 0, 0.04);
+        padding: 3px 5px;
+      }
+      .activity-kpi span {
+        display: block;
+        font-size: 9px;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #8b8680;
+      }
+      .activity-kpi strong {
+        display: block;
+        margin-top: 2px;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 14px;
+        font-weight: 800;
+        color: #059669;
+      }
+      @media (max-width: 720px) {
+        .activity-kpi {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          padding-right: 0;
+        }
+      }
+      .poster-bar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 18px;
+      }
+      .poster-bar .hint {
+        color: var(--muted);
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .share-icon-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        border: 0;
+        border-radius: 14px;
+        color: #fff;
+        background: var(--accent, #ff5a1f);
+        box-shadow: 0 10px 20px color-mix(in srgb, var(--accent, #ff5a1f) 28%, transparent);
+        cursor: pointer;
+      }
+      .share-icon-btn:disabled {
+        opacity: 0.6;
+        cursor: wait;
+      }
+      .poster-modal {
+        position: fixed;
+        inset: 0;
+        z-index: 80;
+        display: none;
+        align-items: flex-end;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.45);
+        backdrop-filter: blur(2px);
+        padding: 0;
+      }
+      .poster-modal.is-open {
+        display: flex;
+      }
+      .poster-sheet {
+        width: min(100%, 440px);
+        max-height: 96vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: #fffcf7;
+        border-radius: 22px 22px 0 0;
+        box-shadow: 0 -12px 40px rgba(40, 28, 12, 0.18);
+      }
+      .poster-sheet-head,
+      .poster-sheet-foot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        padding: 14px 16px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      }
+      .poster-sheet-foot {
+        border-bottom: 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.06);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        padding-bottom: max(14px, env(safe-area-inset-bottom));
+      }
+      .poster-sheet-body {
+        overflow: auto;
+        padding: 16px;
+      }
+      .poster-preview {
+        aspect-ratio: 3 / 4;
+        width: min(100%, 320px);
+        margin: 0 auto;
+        overflow: hidden;
+        border-radius: 16px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        background: #f3f1ec;
+        box-shadow: 0 10px 28px rgba(40, 28, 12, 0.1);
+      }
+      .poster-preview img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .poster-sheet-title {
+        font-size: 14px;
+        font-weight: 800;
+        color: var(--ink);
+      }
+      .poster-sheet-sub {
+        margin-top: 2px;
+        font-size: 11px;
+        color: var(--muted);
+      }
+      .poster-sheet button {
+        min-height: 48px;
+        border-radius: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        background: #fff;
+        font-weight: 700;
+        cursor: pointer;
+      }
+      .poster-sheet .download {
+        border: 0;
+        color: #fff;
+        background: var(--accent, #ff5a1f);
+      }
+      .poster-sheet .download:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      @media (min-width: 640px) {
+        .poster-modal {
+          align-items: center;
+          padding: 16px;
+        }
+        .poster-sheet {
+          border-radius: 22px;
+          max-height: 92vh;
+          box-shadow: 0 24px 60px rgba(40, 28, 12, 0.22);
+        }
+      }
+      .signal-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 8px;
+        text-align: left;
+      }
+      .signal {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        padding: 10px 12px;
+        border-radius: 12px;
+        background: #f6f3ee;
+        font-size: 13px;
+        min-width: 0;
+      }
+      .signal span {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .signal strong {
+        font-family: "JetBrains Mono", monospace;
+        font-weight: 700;
+        flex-shrink: 0;
+        max-width: 58%;
+        text-align: right;
+        overflow-wrap: anywhere;
+      }
+      .stack {
+        display: grid;
+        gap: 16px;
+      }
+      .panel {
+        padding: 22px 22px 20px;
+      }
+      .panel.panel-compact {
+        padding: 16px 16px 12px;
+      }
+      .panel h2 {
+        margin: 0 0 4px;
+        font-size: 20px;
+        letter-spacing: -0.02em;
+      }
+      .panel .sub {
+        margin: 0 0 16px;
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .panel.panel-compact .sub {
+        margin: 0 0 8px;
+      }
+      .radar-wrap {
+        display: grid;
+        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+        gap: 12px;
+        align-items: center;
+      }
+      .radar-stage {
+        position: relative;
+        min-height: 340px;
+        display: grid;
+        place-items: center;
+        padding: 8px;
+        overflow: visible;
+        min-width: 0;
+      }
+      .radar-stage svg {
+        width: min(100%, 360px);
+        height: auto;
+        overflow: visible;
+        display: block;
+      }
+      .axis-list {
+        display: grid;
+        gap: 10px;
+        min-width: 0;
+      }
+      .axis-row {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 8px;
+        align-items: baseline;
+        padding: 10px 12px;
+        border-radius: 12px;
+        background: #f7f4ef;
+      }
+      .axis-row .label {
+        font-size: 13px;
+        font-weight: 700;
+      }
+      .axis-row .hint {
+        grid-column: 1 / -1;
+        color: var(--muted);
+        font-size: 11px;
+      }
+      .axis-row .val {
+        font-family: "JetBrains Mono", monospace;
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--accent);
+      }
+      .featured {
+        display: grid;
+        gap: 10px;
+      }
+      .feat {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: center;
+        padding: 12px 14px;
+        border-radius: 12px;
+        border: 1px solid var(--line);
+        background: #fff;
+        transition: 160ms ease;
+      }
+      .feat:hover {
+        border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
+        transform: translateX(2px);
+      }
+      .feat strong {
+        display: block;
+        font-size: 14px;
+      }
+      .feat span {
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .roast {
+        position: relative;
+        padding: 20px 20px 18px;
+        border-radius: 14px;
+        background: linear-gradient(180deg, #fff7f2, #fff);
+        border: 1px solid #ffd7c4;
+        line-height: 1.7;
+        font-size: 15px;
+      }
+      .roast .tldr {
+        margin: 14px 0 0;
+        padding-top: 12px;
+        border-top: 1px dashed #ffd7c4;
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .roast .tldr b {
+        color: var(--ink);
+      }
+      .lang-toggle {
+        display: inline-flex;
+        margin-bottom: 10px;
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        overflow: hidden;
+      }
+      .lang-toggle button {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        padding: 6px 12px;
+        font: inherit;
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--muted);
+        cursor: pointer;
+      }
+      .lang-toggle button.is-active {
+        background: var(--ink);
+        color: #fff;
+      }
+      .standing {
+        margin-top: 14px;
+        padding: 14px;
+        border-radius: 14px;
+        background: #fff;
+        border: 1px solid var(--line);
+        text-align: left;
+      }
+      .standing .rank {
+        font-size: 13px;
+        color: var(--muted);
+      }
+      .standing .pct {
+        margin-top: 4px;
+        font-size: 18px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+      }
+      .cta {
+        margin-top: 12px;
+        width: 100%;
+        appearance: none;
+        border: 0;
+        border-radius: 12px;
+        padding: 12px 14px;
+        background: var(--orange);
+        color: #fff;
+        font: inherit;
+        font-weight: 750;
+        cursor: pointer;
+        box-shadow: 0 10px 20px rgba(255, 90, 31, 0.25);
+      }
+      .cta:hover {
+        filter: brightness(1.05);
+      }
+      .float-notes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin: 0 0 16px;
+        position: static;
+        height: auto;
+      }
+      .note {
+        position: static;
+        max-width: none;
+        padding: 8px 12px;
+        border-radius: 12px;
+        background: rgba(255, 252, 247, 0.92);
+        border: 1px solid var(--line);
+        box-shadow: none;
+        font-size: 12px;
+        font-weight: 650;
+        color: var(--muted);
+        animation: none;
+        pointer-events: none;
+      }
+      .note b {
+        color: var(--ink);
+      }
+      .note.n1,
+      .note.n2 {
+        top: auto;
+        right: auto;
+        animation-delay: 0s;
+      }
+      footer.page-foot {
+        margin-top: 28px;
+        color: var(--muted);
+        font-size: 12px;
+        text-align: center;
+      }
+      footer.page-foot a {
+        color: var(--orange);
+        font-weight: 700;
+      }
+      @keyframes floaty {
+        0%,
+        100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-8px);
+        }
+      }
+      @keyframes bob {
+        0%,
+        100% {
+          transform: translateY(0) rotate(-1deg);
+        }
+        50% {
+          transform: translateY(-6px) rotate(1deg);
+        }
+      }
+      @keyframes drawIn {
+        from {
+          opacity: 0;
+          transform: scale(0.92);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+      .is-animating .radar-stage svg {
+        animation: drawIn 420ms ease both;
+      }
+      @media (max-width: 960px) {
+        .layout {
+          grid-template-columns: 1fr;
+        }
+        .radar-wrap {
+          grid-template-columns: 1fr;
+        }
+        .radar-stage {
+          min-height: 300px;
+        }
+      }
+      @media (max-width: 720px) {
+        .float-notes,
+        .nav-links {
+          display: none;
+        }
+        .shell {
+          width: min(1120px, calc(100% - 24px));
+          padding: 20px 0 64px;
+        }
+        .score-num {
+          font-size: 38px;
+        }
+        .tier {
+          font-size: 24px;
+        }
+        .mascot-wrap {
+          width: min(100%, 260px);
+        }
+      }
+      .live-banner {
+        margin-bottom: 18px;
+        padding: 12px 16px;
+        border-radius: 14px;
+        background: color-mix(in srgb, var(--accent) 12%, #fffcf7);
+        border: 1px solid color-mix(in srgb, var(--accent) 28%, #e4dfd6);
+        font-size: 13px;
+        color: var(--muted);
+      }
+      .live-banner b { color: var(--ink); }
+      .picker { display: none; }
+    </style>
+  </head>
+  <body>
+    <main class="shell">
+      <header class="topnav">
+        <h1 class="brand">Vibe Roaster</h1>
+        <nav class="nav-links">
+          <a href="/" id="navHome">Home</a>
+          <a href="live-report.html" id="navLive">Live export</a>
+        </nav>
+      </header>
+      <div class="live-banner" id="banner"></div>
+      <div class="poster-bar">
+        <div class="hint" id="posterHint">Share poster · 3:4</div>
+        <button class="share-icon-btn" type="button" id="posterBtn" aria-label="Share poster" title="Share poster">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="M15 8a3 3 0 1 0-2.83-4H12a3 3 0 0 0 3 4Zm-6 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.8"/>
+            <path d="M8.6 11.4 15 8.6M8.6 12.6 15.4 15.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+      <section class="layout is-animating" id="stage">
+        <aside class="profile-card" id="profileCard"></aside>
+        <div class="stack">
+          <article class="card panel">
+            <h2 id="scoreTitle">Score breakdown</h2>
+            <p class="sub" id="scoreSub">Six agent-native axes · live inspect</p>
+            <div class="radar-wrap">
+              <div class="radar-stage" id="radar"></div>
+              <div class="axis-list" id="axisList"></div>
+            </div>
+          </article>
+          <article class="card panel">
+            <h2 id="roastTitle">🔥 Full roast</h2>
+            <div class="lang-toggle" role="group" aria-label="Roast language">
+              <button type="button" id="langZh" class="is-active">中文</button>
+              <button type="button" id="langEn">EN</button>
+            </div>
+            <div class="roast" id="roast"></div>
+          </article>
+          <article class="card panel panel-compact">
+            <h2 id="cloudTitle">Word cloud</h2>
+            <p class="sub" id="cloudSub">From inspect word_frequencies</p>
+            <div class="cloud-stage"><canvas id="wordCloud"></canvas></div>
+          </article>
+          <article class="card panel panel-compact">
+            <h2 id="activityTitle">Activity</h2>
+            <p class="sub" id="activitySub">Emerald heatmap · TokenTracker when available · toggle 3D</p>
+            <div class="activity-stage" id="activityMap"></div>
+          </article>
+        </div>
+      </section>
+      <footer class="page-foot" id="pageFoot">
+        Static snapshot from redacted live inspect · no prompt bodies ·
+        <a href="notes/live-inspect-summary.json">JSON</a>
+      </footer>
+    </main>
+    <div class="poster-modal" id="posterModal" aria-hidden="true">
+      <div class="poster-sheet" role="dialog" aria-modal="true" aria-labelledby="posterModalTitle">
+        <div class="poster-sheet-head">
+          <div>
+            <div class="poster-sheet-title" id="posterModalTitle">Share poster · 3:4</div>
+            <div class="poster-sheet-sub" id="posterModalHint">Preview first, then download when you’re ready.</div>
+          </div>
+          <button type="button" id="posterModalCloseTop">Close</button>
+        </div>
+        <div class="poster-sheet-body">
+          <div class="poster-preview">
+            <img id="posterPreviewImg" alt="Share poster preview" hidden />
+          </div>
+        </div>
+        <div class="poster-sheet-foot">
+          <button type="button" id="posterModalClose">Close</button>
+          <button type="button" class="download" id="posterModalDownload" disabled>Download PNG</button>
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      import {
+        buildHashtags,
+        renderWordCloud,
+        renderActivityMap,
+        renderSharePoster,
+        downloadCanvasPng,
+      } from "./scripts/roast-extras.js";
+      import { EMBED } from "./scripts/live-report-boot.js";
+      const COPY = {
+        en: {
+          navHome: "Home",
+          navLive: "Live export",
+          posterHint: "Share poster · 3:4",
+          posterShare: "Share poster",
+          posterBusy: "Preparing…",
+          posterTitle: "Share poster · 3:4",
+          posterModalHint: "Preview first, then download when you’re ready.",
+          posterDownload: "Download PNG",
+          posterClose: "Close",
+          scoreTitle: "Score breakdown",
+          scoreSub: "Six agent-native axes · live inspect",
+          roastTitle: "🔥 Full roast",
+          cloudTitle: "Word cloud",
+          cloudSub: "From inspect word_frequencies",
+          activityTitle: "Activity",
+          activitySub: "Emerald heatmap · TokenTracker when available · toggle 3D",
+          foot: "Static snapshot from redacted live inspect · no prompt bodies ·",
+          banner: (meta, srcBits) =>
+            `<b>Live inspect</b> · ${meta.generated_at} · prompts ${meta.prompt_count} · sources ${meta.source_count} (${srcBits}) · redacted aggregates only`,
+        },
+        zh: {
+          navHome: "首页",
+          navLive: "静态导出",
+          posterHint: "分享海报 · 3:4",
+          posterShare: "分享海报",
+          posterBusy: "准备中…",
+          posterTitle: "分享海报 · 3:4",
+          posterModalHint: "先预览，确认后再下载。",
+          posterDownload: "下载 PNG",
+          posterClose: "关闭",
+          scoreTitle: "分数明细",
+          scoreSub: "六维 Agent 轴 · live inspect",
+          roastTitle: "🔥 完整 Roast",
+          cloudTitle: "词云",
+          cloudSub: "来自 inspect word_frequencies",
+          activityTitle: "活动",
+          activitySub: "翠绿热力图 · 可用时用 TokenTracker · 可切换 3D",
+          foot: "来自脱敏 live inspect 的静态快照 · 不含 prompt 正文 ·",
+          banner: (meta, srcBits) =>
+            `<b>Live inspect</b> · ${meta.generated_at} · 提示 ${meta.prompt_count} · 数据源 ${meta.source_count} (${srcBits}) · 仅脱敏聚合`,
+        },
+      };
+      async function loadPayload() {
+        try {
+          const res = await fetch("notes/live-inspect-summary.json", { cache: "no-store" });
+          if (!res.ok) throw new Error("fetch failed");
+          const summary = await res.json();
+          const vibe = { ...summary.vibe_profile };
+          const rel = (p) => String(p || "").replace(/^\/assests\//, "");
+          vibe.figure = rel(vibe.figure);
+          vibe.badge = rel(vibe.badge);
+          return {
+            LIVE: vibe,
+            META: {
+              generated_at: summary.generated_at,
+              prompt_count: summary.summary?.prompt_count,
+              source_count: summary.summary?.source_count,
+              sources: Object.fromEntries(
+                Object.entries(summary.sources || {}).map(([k, v]) => [k, v.prompt_count || 0]),
+              ),
+            },
+            WORDS: summary.word_frequencies || [],
+            ACTIVITY: summary.activity || {},
+            CATEGORIES: summary.profile_signals?.prompt_analysis?.categories || {},
+          };
+        } catch {
+          return EMBED;
+        }
+      }
+      const profileCard = document.getElementById("profileCard");
+      const radar = document.getElementById("radar");
+      const axisList = document.getElementById("axisList");
+      const roast = document.getElementById("roast");
+      const stage = document.getElementById("stage");
+      const langZh = document.getElementById("langZh");
+      const langEn = document.getElementById("langEn");
+      const banner = document.getElementById("banner");
+      const posterBtn = document.getElementById("posterBtn");
+      const posterHint = document.getElementById("posterHint");
+      const wordCloud = document.getElementById("wordCloud");
+      const activityMap = document.getElementById("activityMap");
+      const posterModal = document.getElementById("posterModal");
+      const posterPreviewImg = document.getElementById("posterPreviewImg");
+      const posterModalDownload = document.getElementById("posterModalDownload");
+      const posterModalClose = document.getElementById("posterModalClose");
+      const posterModalCloseTop = document.getElementById("posterModalCloseTop");
+      let lang = "zh";
+      let payload = EMBED;
+      let posterCanvas = null;
+      function copy() {
+        return COPY[lang] || COPY.en;
+      }
+      function applyChrome() {
+        const c = copy();
+        document.getElementById("navHome").textContent = c.navHome;
+        document.getElementById("navLive").textContent = c.navLive;
+        posterHint.textContent = c.posterHint;
+        posterBtn.setAttribute("aria-label", c.posterShare);
+        posterBtn.title = c.posterShare;
+        document.getElementById("scoreTitle").textContent = c.scoreTitle;
+        document.getElementById("scoreSub").textContent = c.scoreSub;
+        document.getElementById("roastTitle").textContent = c.roastTitle;
+        document.getElementById("cloudTitle").textContent = c.cloudTitle;
+        document.getElementById("cloudSub").textContent = c.cloudSub;
+        document.getElementById("activityTitle").textContent = c.activityTitle;
+        document.getElementById("activitySub").textContent = c.activitySub;
+        document.getElementById("pageFoot").innerHTML = `${c.foot} <a href="notes/live-inspect-summary.json">JSON</a>`;
+        document.getElementById("posterModalTitle").textContent = c.posterTitle;
+        document.getElementById("posterModalHint").textContent = c.posterModalHint;
+        posterModalClose.textContent = c.posterClose;
+        posterModalCloseTop.textContent = c.posterClose;
+        posterModalDownload.textContent = c.posterDownload;
+        posterPreviewImg.alt = c.posterTitle;
+      }
+      function closePosterModal() {
+        posterModal.classList.remove("is-open");
+        posterModal.setAttribute("aria-hidden", "true");
+      }
+      function openPosterModal() {
+        posterModal.classList.add("is-open");
+        posterModal.setAttribute("aria-hidden", "false");
+      }
+      langZh.addEventListener("click", () => { lang = "zh"; render(); });
+      langEn.addEventListener("click", () => { lang = "en"; render(); });
+      posterBtn.addEventListener("click", async () => {
+        const c = copy();
+        posterBtn.disabled = true;
+        posterBtn.title = c.posterBusy;
+        posterBtn.setAttribute("aria-label", c.posterBusy);
+        posterCanvas = null;
+        posterPreviewImg.hidden = true;
+        posterPreviewImg.removeAttribute("src");
+        posterModalDownload.disabled = true;
+        openPosterModal();
+        try {
+          const hashtags = buildHashtags(payload.LIVE, payload.CATEGORIES, { locale: lang });
+          posterCanvas = await renderSharePoster({ vibe: payload.LIVE, hashtags, lang });
+          posterPreviewImg.src = posterCanvas.toDataURL("image/png");
+          posterPreviewImg.hidden = false;
+          posterModalDownload.disabled = false;
+        } finally {
+          posterBtn.disabled = false;
+          posterBtn.title = c.posterShare;
+          posterBtn.setAttribute("aria-label", c.posterShare);
+        }
+      });
+      posterModalDownload.addEventListener("click", () => {
+        if (!posterCanvas) return;
+        const code = (payload.LIVE?.archetype?.code || "vibe").toLowerCase();
+        downloadCanvasPng(posterCanvas, `vibe-roast-${code}-3x4.png`);
+      });
+      posterModalClose.addEventListener("click", closePosterModal);
+      posterModalCloseTop.addEventListener("click", closePosterModal);
+      posterModal.addEventListener("click", (event) => {
+        if (event.target === posterModal) closePosterModal();
+      });
+      window.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") closePosterModal();
+      });
+      function escapeHtml(value) {
+        return String(value)
+          .replaceAll("&", "&amp;")
+          .replaceAll("<", "&lt;")
+          .replaceAll(">", "&gt;")
+          .replaceAll('"', "&quot;");
+      }
+      const escapeXml = escapeHtml;
+      function render() {
+        const vibe = payload.LIVE;
+        const META = payload.META;
+        const arch = vibe.archetype;
+        const tier = vibe.tier;
+        const score = Number(vibe.total);
+        const c = copy();
+        document.documentElement.style.setProperty("--accent", arch.accent);
+        langZh.classList.toggle("is-active", lang === "zh");
+        langEn.classList.toggle("is-active", lang === "en");
+        applyChrome();
+        const srcBits = Object.entries(META.sources || {})
+          .map(([k, v]) => `${k} ${v}`)
+          .join(" · ");
+        banner.innerHTML = c.banner(
+          {
+            generated_at: escapeHtml(META.generated_at),
+            prompt_count: META.prompt_count,
+            source_count: META.source_count,
+          },
+          escapeHtml(srcBits),
+        );
+        const hook = lang === "zh" ? arch.hookZh : arch.hook;
+        const blurb = lang === "zh" ? tier.blurbZh : tier.blurb;
+        const percentile = Math.min(99.5, Math.round((score / 100) * 97 + 2));
+        const hashtags = buildHashtags(vibe, payload.CATEGORIES, { locale: lang });
+        profileCard.innerHTML = `
+          <div class="profile-stage">
+            <h1 class="handle">@${escapeHtml(arch.code.toLowerCase())}</h1>
+            <p class="name">${escapeHtml(arch.title)} · ${escapeHtml(hook)}</p>
+            <div class="mascot-wrap">
+              <img src="${escapeHtml(vibe.figure)}" width="384" height="512" alt="${escapeHtml(arch.title)}" />
+            </div>
+            <div class="hashtag-row">${hashtags.map((t) => `<span>${escapeHtml(t)}</span>`).join("")}</div>
+          </div>
+          <div class="meta-panel">
+            <div class="score-block">
+              <div class="score-num">${score.toFixed(1)} <span>/ 100</span></div>
+            </div>
+            <div class="tier">${tier.emoji} ${escapeHtml(tier.id)}</div>
+            <p class="tier-blurb">${escapeHtml(blurb)}</p>
+            <div class="signal-grid">
+              ${vibe.signals
+                .map(
+                  (s) =>
+                    `<div class="signal"><span>${escapeHtml(lang === "zh" ? s.labelZh : s.label)}</span><strong>${escapeHtml(s.value)}</strong></div>`,
+                )
+                .join("")}
+            </div>
+            <div class="standing">
+              <div class="rank">${lang === "zh" ? "Agent 使用力分位" : "Agent-usage percentile"}</div>
+              <div class="pct">${lang === "zh" ? `击败 ${percentile}% 的 vibe coder` : `Beats ${percentile}% of vibe coders`}</div>
+            </div>
+          </div>
+        `;
+        axisList.innerHTML = vibe.dimensions
+          .map(
+            (dim) => `<div class="axis-row">
+            <div class="label">${escapeHtml(lang === "zh" ? dim.labelZh : dim.label)}</div>
+            <div class="val">${Number(dim.value).toFixed(1)} / ${dim.max}</div>
+            <div class="hint">${escapeHtml(lang === "zh" ? (dim.hintZh || dim.hint) : dim.hint)}</div>
+          </div>`,
+          )
+          .join("");
+        radar.innerHTML = renderRadar(vibe.dimensions, arch.accent);
+        const body = lang === "zh" ? vibe.roastZh : vibe.roast;
+        const tldr = lang === "zh" ? vibe.tldrZh : vibe.tldr;
+        roast.innerHTML = `${escapeHtml(body)}<p class="tldr"><b>TL;DR</b> · ${escapeHtml(tldr)}</p>`;
+        renderWordCloud(wordCloud, payload.WORDS, arch.accent);
+        renderActivityMap(activityMap, payload.ACTIVITY, 52, { defaultMode: "2d" });
+        stage.classList.remove("is-animating");
+        void stage.offsetWidth;
+        stage.classList.add("is-animating");
+        document.title = `${arch.title} — ${score.toFixed(1)}/100 · ${tier.id} | live report`;
+      }
+      function renderRadar(dimensions, accent) {
+        const size = 360;
+        const pad = 36;
+        const center = size / 2;
+        const maxRadius = 108;
+        const rings = [0.33, 0.66, 1];
+        const points = dimensions.map((dim, index) => {
+          const angle = -Math.PI / 2 + (index * Math.PI * 2) / dimensions.length;
+          const ratio = Math.min(1, Number(dim.score || 0));
+          const radius = 28 + ratio * (maxRadius - 28);
+          const labelR = maxRadius + 34;
+          return {
+            ...dim,
+            x: center + Math.cos(angle) * radius,
+            y: center + Math.sin(angle) * radius,
+            axisX: center + Math.cos(angle) * maxRadius,
+            axisY: center + Math.sin(angle) * maxRadius,
+            labelX: center + Math.cos(angle) * labelR,
+            labelY: center + Math.sin(angle) * labelR,
+          };
+        });
+        const polygon = points.map((p) => `${p.x},${p.y}`).join(" ");
+        const ringPolys = rings
+          .map((ring) => {
+            const pts = dimensions
+              .map((_, index) => {
+                const angle = -Math.PI / 2 + (index * Math.PI * 2) / dimensions.length;
+                return `${center + Math.cos(angle) * maxRadius * ring},${center + Math.sin(angle) * maxRadius * ring}`;
+              })
+              .join(" ");
+            return `<polygon points="${pts}" fill="none" stroke="rgba(40,30,20,0.12)" stroke-width="1" />`;
+          })
+          .join("");
+        const axes = points
+          .map((p) => `<line x1="${center}" y1="${center}" x2="${p.axisX}" y2="${p.axisY}" stroke="rgba(40,30,20,0.1)" stroke-width="1" />`)
+          .join("");
+        const dots = points
+          .map((p) => `<circle cx="${p.x}" cy="${p.y}" r="4.5" fill="${accent}" stroke="#fff" stroke-width="2" />`)
+          .join("");
+        const labels = points
+          .map((p) => {
+            const anchor = p.labelX < center - 8 ? "end" : p.labelX > center + 8 ? "start" : "middle";
+            const text = lang === "zh" ? p.labelZh : p.label;
+            const scoreText = `${Number(p.value).toFixed(1)}/${p.max}`;
+            const dy = p.labelY < center - 40 ? -2 : p.labelY > center + 40 ? 2 : 0;
+            return `<text x="${p.labelX}" y="${p.labelY - 7 + dy}" text-anchor="${anchor}" fill="#1a1a1a" font-size="11" font-weight="700" font-family="Outfit,sans-serif">${escapeXml(text)}</text>
+              <text x="${p.labelX}" y="${p.labelY + 8 + dy}" text-anchor="${anchor}" fill="${accent}" font-size="11" font-weight="700" font-family="JetBrains Mono,monospace">${scoreText}</text>`;
+          })
+          .join("");
+        return `<svg viewBox="${-pad} ${-pad} ${size + pad * 2} ${size + pad * 2}" role="img" aria-label="Score radar">
+          ${ringPolys}
+          ${axes}
+          <polygon points="${polygon}" fill="${accent}33" stroke="${accent}" stroke-width="2.5" />
+          ${dots}
+          ${labels}
+        </svg>`;
+      }
+      payload = await loadPayload();
+      render();
+      let cloudResizeTimer = 0;
+      const redrawCloud = () => {
+        renderWordCloud(wordCloud, payload.WORDS, payload.LIVE?.archetype?.accent);
+      };
+      if (typeof ResizeObserver !== "undefined" && wordCloud?.parentElement) {
+        new ResizeObserver(() => {
+          clearTimeout(cloudResizeTimer);
+          cloudResizeTimer = setTimeout(redrawCloud, 80);
+        }).observe(wordCloud.parentElement);
+      }
+      window.addEventListener("resize", () => {
+        clearTimeout(cloudResizeTimer);
+        cloudResizeTimer = setTimeout(redrawCloud, 80);
+      });
+    </script>
+  </body>
+</html>