npm - agent-devkit - Versions diffs - 0.3.2 → 0.3.4 - Mend

agent-devkit 0.3.2 → 0.3.4

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 (5351) hide show

package/runtime/vendor/plugins/open-design/_official/examples/eng-runbook/example.html DELETED Viewed

@@ -1,250 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Auth Service · Runbook</title>
-<style>
-  :root {
-    --bg: #0c0e14;
-    --paper: #14171f;
-    --paper-2: #1c2030;
-    --ink: #eaecf3;
-    --muted: #8b94ad;
-    --line: #262b3b;
-    --accent: #6ee7b7;
-    --accent-soft: rgba(110,231,183,0.1);
-    --warn: #fbbf24;
-    --danger: #f87171;
-    --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
-    --mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
-  }
-  * { box-sizing: border-box; }
-  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.6; }
-  .page { max-width: 1100px; margin: 0 auto; padding: 32px 28px 64px; }
-  /* Header */
-  .head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
-  .head-left { display: flex; flex-direction: column; gap: 6px; }
-  .crumb { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
-  h1 { font-family: var(--display); font-size: 36px; margin: 4px 0; font-weight: 700; letter-spacing: -0.02em; }
-  .head-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
-  .head-meta span { color: var(--accent); }
-  .pill {
-    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
-    font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
-  }
-  .pill.tier { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(110,231,183,0.3); }
-  .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
-  section { margin-top: 40px; }
-  h2 { font-family: var(--display); font-size: 22px; margin: 0 0 14px; letter-spacing: -0.005em; font-weight: 700; }
-  h2 .index { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-right: 12px; vertical-align: middle; }
-  /* Summary */
-  .summary { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
-  .panel { padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
-  .panel p { margin: 0 0 12px; }
-  .panel p:last-child { margin: 0; }
-  .deps h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; font-weight: 500; }
-  .deps ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
-  .deps li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--paper-2); border-radius: 6px; }
-  .deps li .ok { color: var(--accent); }
-  .deps li .warn { color: var(--warn); }
-  /* Tables */
-  table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
-  th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
-  th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--paper-2); }
-  tr:last-child td { border-bottom: none; }
-  td.code, .panel code { font-family: var(--mono); }
-  .sev { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
-  .sev-1 { background: rgba(248,113,113,0.15); color: var(--danger); }
-  .sev-2 { background: rgba(251,191,36,0.15); color: var(--warn); }
-  .sev-3 { background: rgba(110,231,183,0.15); color: var(--accent); }
-  /* Procedure cards */
-  .procs { display: flex; flex-direction: column; gap: 14px; }
-  .proc { padding: 18px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
-  .proc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
-  .proc-head h3 { margin: 0; font-family: var(--display); font-size: 17px; }
-  .proc-head .when { font-family: var(--mono); font-size: 11px; color: var(--muted); }
-  pre { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #cdd6f4; margin: 8px 0 0; }
-  pre .cmt { color: var(--muted); }
-  pre .var { color: var(--warn); }
-  pre .ok { color: var(--accent); }
-  /* On-call */
-  .rota { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
-  /* Checklist */
-  .checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
-  .step { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 16px; align-items: flex-start; }
-  .step-num { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--display); font-size: 16px; }
-  .step h4 { margin: 0 0 6px; font-family: var(--display); font-size: 15px; }
-  .step p { margin: 0; color: var(--muted); font-size: 13px; }
-  .step code { font-family: var(--mono); background: var(--paper-2); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--accent); }
-  footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
-  @media (max-width: 880px) {
-    .summary, .checklist { grid-template-columns: 1fr; }
-    h1 { font-size: 26px; }
-  }
-</style>
-</head>
-<body>
-<div class="page">
-  <header class="head">
-    <div class="head-left">
-      <div class="crumb">Northwind / Identity / Auth</div>
-      <h1>auth-service</h1>
-      <div class="head-meta">Owned by <span>@identity-platform</span> · v4.7.2 · Last reviewed 14 Oct 2025</div>
-    </div>
-    <span class="pill tier"><span class="dot"></span>Tier 0 · production-critical</span>
-  </header>
-  <section>
-    <h2><span class="index">01</span>Service summary</h2>
-    <div class="summary">
-      <div class="panel">
-        <p><strong>auth-service</strong> issues, validates, and revokes session tokens for every Northwind product surface — web, mobile, and the public API. It owns the password store, the TOTP/WebAuthn enrollments, and the audit-log writer for all auth events.</p>
-        <p>If <code>auth-service</code> is down, customers cannot log in or refresh sessions. Existing valid sessions continue to work for their TTL (15 minutes) but no new auth happens.</p>
-      </div>
-      <div class="panel deps">
-        <h3>Dependencies</h3>
-        <ul>
-          <li><span>Postgres · auth-db</span><span class="ok">healthy</span></li>
-          <li><span>Redis · session-cache</span><span class="ok">healthy</span></li>
-          <li><span>KMS · auth-keyring</span><span class="ok">healthy</span></li>
-          <li><span>SES · transactional</span><span class="warn">degraded</span></li>
-          <li><span>Pager · oncall.northwind</span><span class="ok">healthy</span></li>
-        </ul>
-      </div>
-    </div>
-  </section>
-  <section>
-    <h2><span class="index">02</span>Alerts you might wake up to</h2>
-    <table>
-      <thead><tr><th>Alert</th><th>Severity</th><th>What it means</th><th>First response</th></tr></thead>
-      <tbody>
-        <tr>
-          <td class="code">auth.login_5xx_rate &gt; 1%</td>
-          <td><span class="sev sev-1">SEV-1</span></td>
-          <td>Login endpoint returning errors. Customers are locked out.</td>
-          <td>Check Postgres + Redis dashboards. Roll back last deploy if &lt; 30 min old.</td>
-        </tr>
-        <tr>
-          <td class="code">auth.token_refresh_lag_p95 &gt; 800ms</td>
-          <td><span class="sev sev-2">SEV-2</span></td>
-          <td>Refresh path is slow. Web app starts to feel sluggish.</td>
-          <td>Inspect Redis CPU + connection count. Scale read replicas if needed.</td>
-        </tr>
-        <tr>
-          <td class="code">auth.signup_failure &gt; 10/min</td>
-          <td><span class="sev sev-2">SEV-2</span></td>
-          <td>New signups are failing. Often SES bounces or SMTP auth.</td>
-          <td>Check SES bounce rate. Failover transactional queue to backup region.</td>
-        </tr>
-        <tr>
-          <td class="code">auth.kms_signing_errors &gt; 0</td>
-          <td><span class="sev sev-1">SEV-1</span></td>
-          <td>KMS can't sign session tokens. New logins fail; existing sessions OK.</td>
-          <td>Page the security team. Do not roll keys without a security engineer.</td>
-        </tr>
-        <tr>
-          <td class="code">auth.audit_writer_backlog &gt; 5k</td>
-          <td><span class="sev sev-3">SEV-3</span></td>
-          <td>Audit log writer is falling behind. Compliance impact.</td>
-          <td>Drain manually. Open a ticket; not a wake-up.</td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
-  <section>
-    <h2><span class="index">03</span>Common procedures</h2>
-    <div class="procs">
-      <div class="proc">
-        <div class="proc-head"><h3>Deploy a new version</h3><span class="when">Use during business hours</span></div>
-        <p>Deploys are blue/green. The script waits for two consecutive healthchecks before promoting traffic.</p>
-<pre><span class="cmt"># Deploy auth-service v4.7.3 to production</span>
-$ nw deploy auth-service --tag <span class="var">v4.7.3</span> --env production
-<span class="cmt"># Wait for two consecutive healthchecks (~90 s), then promote.</span>
-$ nw deploy promote auth-service --env production
-<span class="ok">→ traffic shifted: 10% / 50% / 100%</span></pre>
-      </div>
-      <div class="proc">
-        <div class="proc-head"><h3>Roll back to last known good</h3><span class="when">Use when error rate &gt; 1% post-deploy</span></div>
-<pre><span class="cmt"># Rolls back to the previously promoted version, no rebuild.</span>
-$ nw deploy rollback auth-service --env production
-<span class="ok">→ rolled back to v4.7.2 in 38 s</span></pre>
-      </div>
-      <div class="proc">
-        <div class="proc-head"><h3>Rotate signing keys</h3><span class="when">Schedule with security; never solo</span></div>
-<pre><span class="cmt"># 1. Generate the new signing key in KMS</span>
-$ nw kms create-key --alias auth-signing-<span class="var">$(date +%Y%m%d)</span>
-<span class="cmt"># 2. Mark the new key as the primary; old key remains valid for 24h</span>
-$ nw kms set-primary auth-signing --key <span class="var">&lt;arn&gt;</span>
-<span class="cmt"># 3. After 24h, schedule deletion of the previous key</span>
-$ nw kms schedule-deletion auth-signing --key <span class="var">&lt;old-arn&gt;</span> --days 30</pre>
-      </div>
-      <div class="proc">
-        <div class="proc-head"><h3>Drain audit-log backlog</h3><span class="when">Use when audit_writer_backlog alert fires</span></div>
-<pre>$ nw exec auth-service -- bin/audit-drain --batch <span class="var">5000</span>
-<span class="ok">→ drained 4,812 entries in 12 s; backlog now 0</span></pre>
-      </div>
-    </div>
-  </section>
-  <section>
-    <h2><span class="index">04</span>On-call rotation · this month</h2>
-    <table class="rota">
-      <thead><tr><th>Week</th><th>Primary</th><th>Secondary</th><th>Backup (escalation)</th></tr></thead>
-      <tbody>
-        <tr><td>Oct 27 – Nov 02</td><td>Devon Park</td><td>Priya Banerjee</td><td>Sasha Lin</td></tr>
-        <tr><td>Nov 03 – Nov 09</td><td>Caleb Renner</td><td>Devon Park</td><td>Sasha Lin</td></tr>
-        <tr><td>Nov 10 – Nov 16</td><td>Priya Banerjee</td><td>Caleb Renner</td><td>Mira Reddy</td></tr>
-        <tr><td>Nov 17 – Nov 23</td><td>Sasha Lin</td><td>Priya Banerjee</td><td>Mira Reddy</td></tr>
-      </tbody>
-    </table>
-  </section>
-  <section>
-    <h2><span class="index">05</span>Incident response — first 30 minutes</h2>
-    <div class="checklist">
-      <div class="step">
-        <div class="step-num">1</div>
-        <div><h4>Acknowledge the page within 5 min.</h4><p>Type <code>/ack</code> in <code>#incidents-auth</code>. The bot stops re-paging and tags the on-call.</p></div>
-      </div>
-      <div class="step">
-        <div class="step-num">2</div>
-        <div><h4>Open the incident channel.</h4><p>Run <code>/incident open auth-service "&lt;short title&gt;"</code>. Slack bot creates a dedicated channel and pages the secondary.</p></div>
-      </div>
-      <div class="step">
-        <div class="step-num">3</div>
-        <div><h4>Post a status snapshot.</h4><p>Customer-impact in one line, what you know, what you're checking next. Re-post every 10 minutes.</p></div>
-      </div>
-      <div class="step">
-        <div class="step-num">4</div>
-        <div><h4>Mitigate before you diagnose.</h4><p>If a recent deploy is suspect, roll back. If KMS is degraded, fail open is <em>never</em> the answer for auth — escalate to security.</p></div>
-      </div>
-      <div class="step">
-        <div class="step-num">5</div>
-        <div><h4>Hand off or stand down.</h4><p>If you can't resolve in 30 min, hand to the secondary. When healthy, close with <code>/incident close</code>; postmortem is owed within 5 business days.</p></div>
-      </div>
-    </div>
-  </section>
-  <footer>
-    <span>Northwind Identity Platform · runbook v3.2</span>
-    <span>Source: ops-docs/auth-service.md</span>
-  </footer>
-</div>
-</body>
-</html>

package/runtime/vendor/plugins/open-design/_official/examples/eng-runbook/open-design.json DELETED Viewed

@@ -1,127 +0,0 @@
-{
-  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
-  "specVersion": "1.0.0",
-  "name": "example-eng-runbook",
-  "title": "Eng Runbook",
-  "title_i18n": {
-    "zh-CN": "工程运维手册",
-    "zh-TW": "工程運維手冊",
-    "ja": "エンジニアリングランブック",
-    "ko": "엔지니어링 런북",
-    "de": "Engineering-Runbook",
-    "fr": "Runbook d'ingénierie",
-    "ru": "Инженерный Runbook",
-    "es": "Runbook de ingeniería",
-    "pt-BR": "Runbook de engenharia",
-    "it": "Runbook di ingegneria",
-    "vi": "Sổ tay vận hành kỹ thuật",
-    "pl": "Runbook inżynieryjny",
-    "id": "Runbook teknik",
-    "nl": "Engineering-runbook",
-    "ar": "دليل العمليات الهندسية",
-    "tr": "Mühendislik Runbook'u",
-    "uk": "Інженерний Runbook",
-    "en": "Eng Runbook"
-  },
-  "version": "0.1.0",
-  "description": "An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions \"runbook\", \"ops doc\", \"on-call guide\", \"SRE doc\", or \"运维手册\".",
-  "description_i18n": {
-    "zh-CN": "工程运维手册 — 包含服务概览、告警表、仪表盘链接、常用命令操作步骤、值班轮换和事故响应清单。适用于需要运维文档、值班指南、SRE 文档或运维手册的场景。",
-    "zh-TW": "工程運維手冊 — 包含服務概覽、告警表、儀表板連結、常用指令操作步驟、值班輪換和事故回應清單。適用於需要運維文件、值班指南、SRE 文件或運維手冊的場景。",
-    "ja": "エンジニアリングランブック — サービス概要、アラート表、ダッシュボードリンク、コピペ可能なコマンド付き運用手順、オンコールローテーション、インシデント対応チェックリストを含みます。ランブック、運用ドキュメント、オンコールガイド、SREドキュメント、運維手册が必要な場面で使用します。",
-    "ko": "엔지니어링 런북 — 서비스 개요, 알림 테이블, 대시보드 링크, 복사 가능한 명령어가 포함된 운영 절차, 온콜 로테이션, 인시던트 대응 체크리스트를 제공합니다. 런북, 운영 문서, 온콜 가이드, SRE 문서가 필요한 경우 사용하세요.",
-    "de": "Ein Engineering-Runbook — mit Service-Übersicht, Alarm-Tabelle, Dashboard-Links, gängigen Prozeduren mit kopierbaren Befehlen, On-Call-Rotation und Incident-Response-Checkliste. Verwenden Sie es für Runbooks, Ops-Docs, On-Call-Guides, SRE-Docs oder 运维手册.",
-    "fr": "Un runbook d'ingénierie — vue d'ensemble du service, tableau d'alertes, liens vers les tableaux de bord, procédures courantes avec commandes copiables, rotation d'astreinte et checklist de réponse aux incidents. À utiliser pour les runbooks, docs ops, guides d'astreinte, docs SRE ou 运维手册.",
-    "ru": "Инженерный runbook — обзор сервиса, таблица алертов, ссылки на дашборды, типовые процедуры с копируемыми командами, график дежурств и чек-лист реагирования на инциденты. Используйте для runbook, ops-документации, on-call руководств, SRE-документации или 运维手册.",
-    "es": "Un runbook de ingeniería — resumen del servicio, tabla de alertas, enlaces a dashboards, procedimientos comunes con comandos copiables, rotación de guardia y checklist de respuesta a incidentes. Úselo para runbooks, documentos ops, guías de guardia, documentos SRE o 运维手册.",
-    "pt-BR": "Um runbook de engenharia — visão geral do serviço, tabela de alertas, links para dashboards, procedimentos comuns com comandos copiáveis, rotação de plantão e checklist de resposta a incidentes. Use para runbooks, docs de ops, guias de plantão, docs SRE ou 运维手册.",
-    "it": "Un runbook di ingegneria — panoramica del servizio, tabella degli alert, link alle dashboard, procedure comuni con comandi copiabili, rotazione delle reperibilità e checklist di risposta agli incidenti. Da usare per runbook, doc ops, guide on-call, doc SRE o 运维手册.",
-    "vi": "Sổ tay vận hành kỹ thuật — tổng quan dịch vụ, bảng cảnh báo, liên kết dashboard, quy trình thông dụng với lệnh có thể sao chép, lịch trực và danh sách kiểm tra phản ứng sự cố. Sử dụng cho runbook, tài liệu ops, hướng dẫn trực, tài liệu SRE hoặc 运维手册.",
-    "pl": "Runbook inżynieryjny — przegląd usługi, tabela alertów, linki do dashboardów, typowe procedury z poleceniami do skopiowania, harmonogram dyżurów i checklista reakcji na incydenty. Użyj dla runbooków, dokumentacji ops, przewodników dyżurowych, dokumentacji SRE lub 运维手册.",
-    "id": "Runbook teknik — ringkasan layanan, tabel alert, tautan dashboard, prosedur umum dengan perintah yang dapat disalin, rotasi on-call, dan checklist respons insiden. Gunakan untuk runbook, dokumen ops, panduan on-call, dokumen SRE, atau 运维手册.",
-    "nl": "Een engineering-runbook — serviceoverzicht, waarschuwingentabel, dashboardlinks, veelvoorkomende procedures met kopieerbare commando's, on-callrooster en incident-responsechecklist. Gebruik voor runbooks, ops-docs, on-callgidsen, SRE-docs of 运维手册.",
-    "ar": "دليل عمليات هندسي — نظرة عامة على الخدمة، جدول التنبيهات، روابط لوحات المعلومات، إجراءات شائعة مع أوامر قابلة للنسخ، جدول المناوبات، وقائمة التحقق من الاستجابة للحوادث. استخدمه للـ runbook أو مستندات ops أو دليل المناوبة أو مستندات SRE أو 运维手册.",
-    "tr": "Bir mühendislik runbook'u — hizmet genel bakışı, alarm tablosu, dashboard bağlantıları, kopyalanabilir komutlarla yaygın prosedürler, nöbet rotasyonu ve olay müdahale kontrol listesi. Runbook, ops dokümanı, nöbet rehberi, SRE dokümanı veya 运维手册 için kullanın.",
-    "uk": "Інженерний runbook — огляд сервісу, таблиця алертів, посилання на дашборди, типові процедури з командами для копіювання, графік чергувань і чек-лист реагування на інциденти. Використовуйте для runbook, ops-документації, on-call посібників, SRE-документації або 运维手册.",
-    "en": "An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions \"runbook\", \"ops doc\", \"on-call guide\", \"SRE doc\", or \"运维手册\"."
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Open Design",
-    "url": "https://github.com/nexu-io"
-  },
-  "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/eng-runbook",
-  "tags": [
-    "example",
-    "first-party",
-    "prototype",
-    "engineering",
-    "web",
-    "desktop",
-    "runbook",
-    "ops-doc",
-    "on-call",
-    "sre-doc",
-    "service-runbook",
-    "untitled"
-  ],
-  "compat": {
-    "agentSkills": [
-      {
-        "path": "./SKILL.md"
-      }
-    ]
-  },
-  "od": {
-    "kind": "scenario",
-    "taskKind": "new-generation",
-    "mode": "prototype",
-    "platform": "desktop",
-    "scenario": "engineering",
-    "surface": "web",
-    "preview": {
-      "type": "html",
-      "entry": "./example.html"
-    },
-    "useCase": {
-      "query": {
-        "en": "Write a runbook for our auth service — alerts, dashboards, common procedures, on-call rotation.",
-        "zh-CN": "使用这个插件完成以下任务：Write a runbook for our auth service — alerts, dashboards, common procedures, on-call rotation."
-      },
-      "exampleOutputs": [
-        {
-          "path": "./example.html",
-          "title": "Eng Runbook"
-        }
-      ]
-    },
-    "context": {
-      "skills": [
-        {
-          "path": "./SKILL.md"
-        }
-      ],
-      "designSystem": {
-        "primary": true
-      },
-      "assets": [
-        "./example.html"
-      ]
-    },
-    "pipeline": {
-      "stages": [
-        {
-          "id": "generate",
-          "atoms": [
-            "file-write",
-            "live-artifact"
-          ]
-        }
-      ]
-    },
-    "capabilities": [
-      "prompt:inject",
-      "fs:write"
-    ]
-  }
-}

package/runtime/vendor/plugins/open-design/_official/examples/evergreen-finance/SKILL.md DELETED Viewed

@@ -1,157 +0,0 @@
----
-name: evergreen-finance
-description: "Use this plugin when the user wants a premium 'Kova' fintech / banking landing page: a full-screen hero with a boomerang (forward/reverse) video background, animated FadeUp reveals, floating dashboard cards (savings line chart, spend bar charts), a split testimonial section with a square autoplay video, and a 4-up features grid with image cards and a donut spend chart. Invoke for 'fintech landing', 'banking app landing', 'Kova', 'finance hero with video', or when the user references the Evergreen Finance template."
-version: 0.1.0
-od:
-  mode: prototype
-  surface: web
-  scenario: design
-  preview:
-    type: html
-    entry: example.html
-  design_system:
-    requires: false
----
-# Evergreen Finance — Kova Fintech Landing
-Produce a premium **"Kova" fintech landing page**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, colors, three sections, dashboard cards, donut chart, and animations described below.
-This is the authoritative build brief. Follow it exactly — the named colors, fonts, video URLs, and animation curves are locked. **Do NOT use purple/indigo colors anywhere.**
-## Stack
-- Default output: the single self-contained `example.html` seed (vanilla HTML/CSS/JS). It already includes everything inline.
-- If the user explicitly asks for a **React + TypeScript + Vite + Tailwind + Framer Motion** project, port the seed faithfully: same tokens, same markup structure, same section order. Use `lucide-react` for icons and `framer-motion` for the FadeUp reveals. Do not change the design while porting.
-- **Motion loading (locked).** If you emit a single self-contained inline-JSX file instead of the Vite project, Motion's React hooks (`useScroll`, `useTransform`, `useAnimationFrame`, …) exist only in the **React** UMD build: load `<script src="https://unpkg.com/framer-motion@11.11.13/dist/framer-motion.js"></script>` and read them off `window.Motion` — never the vanilla `https://unpkg.com/motion@.../dist/motion.js` DOM bundle, which lacks `useScroll` and renders a blank page. (The Vite project imports from npm and is unaffected.)
-- Dependencies for the React port: `framer-motion ^12.38.0`, `lucide-react ^0.344.0`, `react ^18.3.1`, `react-dom ^18.3.1`; dev: Vite, Tailwind CSS 3, TypeScript, PostCSS, Autoprefixer.
-## Fonts (locked)
-Load both Cooper BT W01 faces via `<link>` in the head:
-- `https://db.onlinewebfonts.com/c/53077f9a3eee9c479d37d6af20394ded?family=Cooper+BT+W01+Light`
-- `https://db.onlinewebfonts.com/c/5ade3423145f3b9f7031574333ca0b73?family=Cooper+BT+W01+Medium`
-Utility classes:
-```
-.font-cooper { font-family: 'Cooper BT W01 Light', 'Georgia', serif; }
-.font-cooper-medium { font-family: 'Cooper BT W01 Medium', 'Cooper BT W01 Light', 'Georgia', serif; font-weight: 500; }
-```
-Body text uses a neutral sans (Inter / system-ui).
-## Color Palette (locked)
-```
---dark-green:  #08150C   (primary dark green, buttons, brand)
---hover-green: #1a2e1f   (button hover)
---cream:       #FDF5EB   (warm cream — sections 2 & 3 background)
---beige-card:  #EBE4DC   (Spend Insights card)
---beige-inner: #F4F1EC   (inner container of Spend Insights)
-```
-Donut chart colors: `#C46B2D`, `#7A8C3E`, `#A8B87A`, `#B8AFA4`.
-Body/text: stone-600/700/800. Accent greens: emerald-400/500 for the savings chart. Hero is white (video fills it); the lower two sections are `#FDF5EB`. **No purple/indigo.**
-## Animations — FadeUp (locked)
-A reusable reveal with two modes:
-- `hidden`: `opacity: 0; translateY(24px); filter: blur(8px)`.
-- `visible`: `opacity: 1; translateY(0); filter: blur(0)`.
-- Transition: `duration 0.7s, ease cubic-bezier(0.25,0.1,0.25,1)`, per-element `delay`.
-- **immediate** mode (Hero elements): fire on mount.
-- **scroll-triggered** mode (Testimonial + Features): fire when entering the viewport, once, with a `-60px` margin.
-Vanilla seed mapping: `immediate` → `setTimeout` on load; scroll-triggered → `IntersectionObserver` toggling a `.visible` class. In the React port use Framer Motion `animate="visible"` (immediate) and `whileInView="visible"` with `viewport={{ once: true, margin: '-60px' }}`.
-## Section 1 — Hero (full viewport, `min-h-screen overflow-hidden`)
-White background. `hero-inner` is `flex-1 flex flex-col justify-between` so the dashboard cards sit at the bottom.
-### Boomerang video background (locked)
-`<BoomerangVideoBg>` wrapped in `absolute inset-0 w-full h-full scale-[1.08] origin-center`:
-- Loads (muted, playsInline, crossOrigin="anonymous"): `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_070729_32a7eb4e-d6e2-4571-badc-91b4dab1ecbe-2db9b1.mp4`
-- Captures every frame into offscreen canvases (max width 960px) while the video plays once, via `requestVideoFrameCallback` (with `requestAnimationFrame` fallback).
-- After `ended`, swaps the `<video>` for a visible `<canvas>` and plays the captured frames forward/reverse (boomerang) at 30fps. The `scale-[1.08]` hides edge gaps.
-- If frame capture fails (cross-origin taint), it gracefully keeps showing the looping `<video>` — keep this fallback.
-### Navbar (FadeUp immediate, delay 0)
-- Flex row, `justify-between`, padding `px-5 sm:px-10 lg:px-16 py-5`.
-- Left: brand "Kova" in `font-cooper text-xl sm:text-2xl text-[#08150C] tracking-tight`.
-- Center (`hidden md:flex`): links "Explore", "Pricing" (active, with a `h-0.5 bg-[#08150C] rounded-full` underline bar `-bottom-1`), "Perks", "Reach" — `text-sm text-stone-700`, hover `text-[#08150C]`; active is `font-medium text-[#08150C]`.
-- Right desktop: "Get Started" — `bg-[#08150C] text-white text-sm font-medium px-5 py-2.5 rounded-xl hover:bg-[#1a2e1f]`.
-- Right mobile: hamburger (Lucide `Menu`/`X`, size 22) toggling a `bg-white/95 backdrop-blur-md shadow-lg` dropdown with the same links + button.
-### Hero content (centered, `flex-col items-center text-center`, `px-5 sm:px-10 pt-8 sm:pt-14 pb-8 sm:pb-14`)
-- Heading (FadeUp immediate, delay 0.1): `font-cooper text-[2.2rem] sm:text-5xl md:text-6xl lg:text-7xl text-[#08150C] leading-tight max-w-5xl tracking-tight` — "Own your money and build the wealth you deserve".
-- Subtext (delay 0.25): `mt-4 sm:mt-5 text-sm sm:text-base text-stone-600 max-w-sm sm:max-w-md leading-relaxed` — "Step into a smarter way to bank, right from your pocket. Kova gives you instant control over your money, wherever you are."
-- CTAs (delay 0.4), `flex-col sm:flex-row gap-3`:
-  - "Watch 30s Demo" — `white/80 backdrop-blur`, border stone-200, Lucide `Play` (size 14, fill stone-800), `rounded-xl`.
-  - "Get the App" — `bg-[#08150C] text-white`, Lucide `Download` (size 14), `rounded-xl`.
-### Dashboard cards (bottom of hero, FadeUp immediate)
-Flex row `items-end justify-center gap-2 sm:gap-4`; the two outer cards are `hidden sm:block`. All cards `bg-white/95 backdrop-blur rounded-2xl` with a soft shadow.
-- **SavingsCard** (delay 0.55, `w-44 sm:w-64`): "Savings" label + "+25%" and "+12%" green badges; an SVG line chart (green polyline `#10b981` + gradient fill); month labels Jan–Apr.
-- **OthersCard** (delay 0.65, `w-44 sm:w-72`): "Others" header + "Monthly" dropdown pill; three stats (78% Groceries, 43% Entertain., 23% Transport); bar chart of **12 bars**, the **5th bar orange `#f97316`**, rest gray `#d1d5db`.
-- **BillPayCard** (delay 0.75, `w-44 sm:w-64`): "Bill Pay" header + "Monthly" dropdown pill; "-8%" red badge; bar chart of **12 bars**, the **7th bar dark `#08150C`**, rest light gray `#e5e7eb`; month labels.
-## Section 2 — Testimonial
-`bg-[#FDF5EB] py-14 sm:py-20 px-5 sm:px-10 lg:px-20`. Inner: `max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-[3fr_2fr] gap-10 md:gap-16 items-center`.
-Left column (scroll FadeUp, staggered delays 0 → 0.4):
-- Heading (0): `font-cooper-medium text-2xl sm:text-3xl text-[#08150C] leading-snug mb-6 sm:mb-8` — "Trusted by ambitious, fast-moving teams".
-- Company badge (0.1): `w-7 h-7 rounded-md bg-[#08150C]` square with "A" + "Arcvex".
-- Quote (0.2): `font-cooper text-stone-700 text-lg sm:text-xl md:text-2xl leading-relaxed mb-5 sm:mb-6` — "With Kova, I have full visibility into our team's spending in real time. It feels like having a sharp financial advisor available at every hour, helping us stay on budget and make wiser calls."
-- Attribution (0.3): "Maya Reeves" (`text-sm font-semibold`) + "Director, Arcvex" (`text-xs text-stone-500`).
-- Button (0.4): "All Stories" + arrow icon, dark button style.
-Right column (FadeUp delay 0.15): a looping muted autoplay video `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_074029_c7a854bd-2d6e-4b62-96b3-ae8c16311e44-59f9be.mp4`, styled `w-full rounded-2xl object-cover aspect-square` inside `max-w-xs sm:max-w-sm`.
-## Section 3 — Features
-`bg-[#FDF5EB] py-14 sm:py-20 px-5 sm:px-10 lg:px-20`. Inner `max-w-7xl mx-auto`.
-Header row (scroll-animated):
-- Heading (FadeUp 0): `font-cooper-medium text-2xl sm:text-3xl md:text-4xl text-[#08150C] leading-snug` — "Designed to sharpen every decision".
-- Button (0.1): "Watch Demo" + Lucide `Play` (size 13, fill white), dark button style.
-Cards grid: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4`. Each card `aspect-[3/4] rounded-2xl overflow-hidden`, scroll FadeUp with staggered delays 0.05 / 0.15 / 0.25 / 0.35.
-- **Card 1 — Smart Budgeting** (0.05): absolute object-cover bg image; gradient overlay `bg-gradient-to-t from-[#08150C]/80 via-[#08150C]/20 to-transparent`; top label Lucide `Sparkles` (16, white) + "Smart Budgeting"; bottom text "Let AI reshape how you plan your spending. Kova adapts to your…" (`text-white/80`).
-  - Image: `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_061249_f20dfeda-1033-45ce-a3ee-070965599cbf-6c6b7e.webp&w=1280&q=85`
-- **Card 2 — Bank-Grade Security** (0.15): same overlay; Lucide `ShieldCheck` (16, white) + "Bank-Grade Security"; bottom text "Keep your money safe with end-to-end encryption, live fraud alerts, and two-factor auth…".
-  - Image: `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_061305_db631f5f-185f-4fda-a7a8-1dd7359ef2ea-4b7cdd.webp&w=1280&q=85`
-- **Card 3 — Spend Insights** (0.25): **no bg image**. Solid `#EBE4DC`, `p-5`. Top label Lucide `PieChart` (16, `text-stone-700`) + "Spend Insights". Inner `rounded-2xl p-4` `#F4F1EC` centered: "Monthly Spend" + "1 Apr – 30 May 2026", then a donut SVG (`viewBox="0 0 36 36"`, `-rotate-90`, four circles r=14 strokeWidth=5) with arcs: `#C46B2D` (26.4/61.56, offset 0), `#7A8C3E` (22/65.96, offset -26.4), `#A8B87A` (17.6/70.36, offset -48.4), `#B8AFA4` (22/65.96, offset -66); center overlay "50%" bold + "of budget".
-- **Card 4 — Wealth Building** (0.35): same overlay; Lucide `TrendingUp` (16, white) + "Wealth Building"; bottom text "Grow your net worth with tools that help you set targets, monitor gains, and act…".
-  - Image: `https://plugin-assets.open-design.ai/plugins/evergreen-finance/hf_20260517_061316_50e651f8-02d0-4add-9ddb-7d81d15ac02e-24edde.webp&w=1280&q=85`
-## Assets — keep remote (do not inline)
-All hero/testimonial videos live on `d8j0ntlcm91z4.cloudfront.net` and the feature stills on `images.higgs.ai` — large, stable CDNs. **Keep these as remote URLs**; do not inline them. There are **no avatar images** in this template (Arcvex is a CSS square badge with the letter "A"), so there is no remote-avatar pitfall to avoid here. If you later add real avatars, prefer inline `data:` URIs over remote avatar hosts.
-## Global CSS
-```
-* { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; overflow-x: hidden; }
-```
-Plus the two `.font-cooper*` utilities above.
-## Responsive behavior
-- Mobile-first. Feature cards: 1 col, 2 at `sm`, 4 at `lg`.
-- Hero dashboard cards: the two outer cards `hidden` below `sm`.
-- Nav links + CTA `hidden` below `md`, replaced by the hamburger menu.
-- Text sizes step up at `sm` and `md`.
-- Testimonial grid: single column on mobile, `3fr 2fr` at `md`.
-## Hard rules
-- Buttons use `rounded-xl` (not full pill).
-- Hero is `min-h-screen overflow-hidden` with **no page scroll**; `hero-inner` uses `flex-1 flex flex-col justify-between` to push the cards down.
-- Boomerang background must use `scale-[1.08]` to avoid edge gaps.
-- **No purple/indigo anywhere.** The dark green `#08150C` and warm cream `#FDF5EB` are locked.