Import AITURK IDE 1.0.0-beta.1 from Hermes 63279301; preserve MIT license
This commit is contained in:
yilsem committed
commit
03634b1ca3
11340 files changed
+3442369
No files matched your search
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2026 Hermes Achievements contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,150 @@
|
||||
# Hermes Achievements
|
||||
|
||||
> **Bundled with Hermes Agent.** Originally authored by [@PCinkusz](https://github.com/PCinkusz) at https://github.com/PCinkusz/hermes-achievements — vendored into `plugins/hermes-achievements/` so it ships with the dashboard out-of-the-box and stays in lockstep with Hermes feature changes. Upstream repo remains the staging ground for new badges and UI iteration.
|
||||
>
|
||||
> When Hermes is installed via the install script or cloned from source, this plugin auto-registers as a dashboard tab on first `hermes dashboard` launch. No separate install step. See [Built-in Plugins → hermes-achievements](../../website/docs/user-guide/features/built-in-plugins.md) in the main docs.
|
||||
|
||||
Achievement system for the Hermes Dashboard: collectible, tiered badges generated from real local Hermes session history.
|
||||
|
||||
|
||||
|
||||
The screenshots use temporary demo tier data to show the full visual range. The plugin itself reads real local Hermes session history by default.
|
||||
|
||||
> **Update notice (2026-04-29):** If you installed this plugin before today, update to the latest version. The achievements scan path was refactored for much faster warm loads (snapshot cache + incremental checkpoint scan).
|
||||
>
|
||||
> **Share cards (2026-05-04, vendored in hermes-agent v0.4.0):** Unlocked achievement cards now have a "Share" button that renders a 1200×630 PNG share card (client-side canvas, no backend, no network) with Download + Copy-to-clipboard actions. Fits X/Twitter, Discord, LinkedIn, Bluesky link-preview dimensions.
|
||||
|
||||
## What it does
|
||||
|
||||
Hermes Achievements scans local Hermes sessions and unlocks badges based on real agent behavior:
|
||||
|
||||
- autonomous tool chains
|
||||
- debugging and recovery patterns
|
||||
- vibe-coding file edits
|
||||
- Hermes-native skills, memory, cron, and plugin usage
|
||||
- web research and browser automation
|
||||
- model/provider workflows
|
||||
- lifestyle patterns such as weekend or night sessions
|
||||
|
||||
Achievements have three visible states:
|
||||
|
||||
- **Unlocked** — earned at least one tier
|
||||
- **Discovered** — known achievement, progress visible, not earned yet
|
||||
- **Secret** — hidden until Hermes detects the first related signal
|
||||
|
||||
Most achievements level through:
|
||||
|
||||
```text
|
||||
Copper → Silver → Gold → Diamond → Olympian
|
||||
```
|
||||
|
||||
Each card has a collapsible **What counts** section showing the exact tracked metric or requirement once the user wants details.
|
||||
|
||||
Version `0.2.x` expands the catalog to 60+ achievements, including model/provider badges such as **Five-Model Flight**, **Provider Polyglot**, **Claude Confidant**, **Gemini Cartographer**, and **Open Weights Pilgrim**.
|
||||
|
||||
## Examples
|
||||
|
||||
- Let Him Cook
|
||||
- Toolchain Maxxer
|
||||
- Red Text Connoisseur
|
||||
- Port 3000 Is Taken
|
||||
- This Was Supposed To Be Quick
|
||||
- One More Small Change
|
||||
- Skillsmith
|
||||
- Memory Keeper
|
||||
- Context Dragon
|
||||
- Plugin Goblin
|
||||
- Rabbit Hole Certified
|
||||
|
||||
## Install
|
||||
|
||||
Clone into your Hermes plugins directory:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/PCinkusz/hermes-achievements ~/.hermes/plugins/hermes-achievements
|
||||
```
|
||||
|
||||
For local development, keep the repo elsewhere and symlink it:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/PCinkusz/hermes-achievements ~/hermes-achievements
|
||||
ln -s ~/hermes-achievements ~/.hermes/plugins/hermes-achievements
|
||||
```
|
||||
|
||||
Then rescan dashboard plugins:
|
||||
|
||||
```bash
|
||||
curl http://127.0.0.1:9119/api/dashboard/plugins/rescan
|
||||
```
|
||||
|
||||
If backend API routes 404, restart `hermes dashboard`; plugin APIs are mounted at dashboard startup.
|
||||
|
||||
## Updating
|
||||
|
||||
If you installed with git:
|
||||
|
||||
```bash
|
||||
cd ~/.hermes/plugins/hermes-achievements
|
||||
git pull --ff-only
|
||||
curl http://127.0.0.1:9119/api/dashboard/plugins/rescan
|
||||
```
|
||||
|
||||
If the update changes backend routes or `plugin_api.py`, restart `hermes dashboard` after pulling.
|
||||
|
||||
As of 2026-04-29, updating is strongly recommended because scan performance changed significantly:
|
||||
- removed duplicate `/overview` scan path
|
||||
- added cached `/achievements` snapshot
|
||||
- added incremental checkpoint reuse for unchanged sessions
|
||||
|
||||
Achievement unlock state is stored locally in `state.json` and is not overwritten by git updates. New achievements are evaluated from your existing Hermes session history. Achievement IDs are stable and should not be renamed casually because they are the unlock-state keys.
|
||||
|
||||
Releases are tagged in git, for example:
|
||||
|
||||
```bash
|
||||
git fetch --tags
|
||||
git checkout v0.2.0
|
||||
```
|
||||
|
||||
## Files
|
||||
|
||||
```text
|
||||
dashboard/
|
||||
├── manifest.json
|
||||
├── plugin_api.py
|
||||
└── dist/
|
||||
├── index.js
|
||||
└── style.css
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
Routes are mounted under:
|
||||
|
||||
```text
|
||||
/api/plugins/hermes-achievements/
|
||||
```
|
||||
|
||||
Endpoints:
|
||||
|
||||
```text
|
||||
GET /achievements
|
||||
GET /scan-status
|
||||
GET /recent-unlocks
|
||||
GET /sessions/{session_id}/badges
|
||||
POST /rescan
|
||||
POST /reset-state
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
Run checks:
|
||||
|
||||
```bash
|
||||
node --check dashboard/dist/index.js
|
||||
python3 -m py_compile dashboard/plugin_api.py
|
||||
python3 -m unittest tests/test_achievement_engine.py -v
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
+726
@@ -0,0 +1,726 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
// hermes-achievements dashboard plugin
|
||||
// Originally authored by @PCinkusz — https://github.com/PCinkusz/hermes-achievements (MIT).
|
||||
// Bundled into hermes-agent. Upstream repo remains the staging ground for new
|
||||
// badges and UI iteration; the in-progress scan banner below is a small addition
|
||||
// layered on top of the original dist bundle.
|
||||
const SDK = window.__HERMES_PLUGIN_SDK__;
|
||||
if (!SDK || !window.__HERMES_PLUGINS__) return;
|
||||
|
||||
const React = SDK.React;
|
||||
const hooks = SDK.hooks;
|
||||
const C = SDK.components;
|
||||
const cn = SDK.utils.cn;
|
||||
// useI18n is a hook so each component that needs translations calls it
|
||||
// locally (see AchievementsPage, AchievementCard, ShareDialog, LoadingPage).
|
||||
// Older host dashboards may not expose useI18n yet; fall back to a no-op
|
||||
// shim that returns en values so the bundle still renders against an older
|
||||
// host SDK. English fallback strings live alongside each call site.
|
||||
const useI18n = SDK.useI18n || function () { return { t: { achievements: null }, locale: "en" }; };
|
||||
|
||||
// Resolve a translation by dotted path (e.g. "card.share_text"); fall back to
|
||||
// the English string passed in. Used inside components after they call
|
||||
// useI18n() so they can still render against an older host SDK that doesn't
|
||||
// expose the achievements namespace yet.
|
||||
function tx(t, path, fallback, vars) {
|
||||
let node = t && t.achievements;
|
||||
if (node) {
|
||||
const parts = path.split(".");
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
if (node && typeof node === "object" && parts[i] in node) {
|
||||
node = node[parts[i]];
|
||||
} else { node = null; break; }
|
||||
}
|
||||
}
|
||||
let str = (typeof node === "string") ? node : fallback;
|
||||
if (vars) {
|
||||
for (const k in vars) {
|
||||
str = str.replace(new RegExp("\\{" + k + "\\}", "g"), vars[k]);
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
const LUCIDE = {"flame":"<path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\" />","avalanche":"<path d=\"m8 3 4 8 5-5 5 15H2L8 3z\" />\n <path d=\"M4.14 15.08c2.62-1.57 5.24-1.43 7.86.42 2.74 1.94 5.49 2 8.23.19\" />","nodes":"<rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\" />\n <rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\" />\n <rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\" />\n <path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\" />\n <path d=\"M12 12V8\" />","rocket":"<path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\" />\n <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\" />\n <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\" />\n <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\" />","branch":"<line x1=\"6\" x2=\"6\" y1=\"3\" y2=\"15\" />\n <circle cx=\"18\" cy=\"6\" r=\"3\" />\n <circle cx=\"6\" cy=\"18\" r=\"3\" />\n <path d=\"M18 9a9 9 0 0 1-9 9\" />","daemon":"<path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n <path d=\"M21 3v5h-5\" />","clock":"<circle cx=\"12\" cy=\"12\" r=\"10\" />\n <polyline points=\"12 6 12 12 16 14\" />","warning":"<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />","wine":"<path d=\"M8 22h8\" />\n <path d=\"M7 10h10\" />\n <path d=\"M12 15v7\" />\n <path d=\"M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z\" />","scroll":"<path d=\"M15 12h-5\" />\n <path d=\"M15 8h-5\" />\n <path d=\"M19 17V5a2 2 0 0 0-2-2H4\" />\n <path d=\"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3\" />","plug":"<path d=\"m19 5 3-3\" />\n <path d=\"m2 22 3-3\" />\n <path d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\" />\n <path d=\"M7.5 13.5 10 11\" />\n <path d=\"M10.5 16.5 13 14\" />\n <path d=\"m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z\" />","lock":"<circle cx=\"12\" cy=\"16\" r=\"1\" />\n <rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\" />\n <path d=\"M7 10V7a5 5 0 0 1 10 0v3\" />","package_skull":"<path d=\"M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14\" />\n <path d=\"m7.5 4.27 9 5.15\" />\n <polyline points=\"3.29 7 12 12 20.71 7\" />\n <line x1=\"12\" x2=\"12\" y1=\"22\" y2=\"12\" />\n <path d=\"m17 13 5 5m-5 0 5-5\" />","restart":"<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" />\n <path d=\"M21 3v5h-5\" />\n <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" />\n <path d=\"M8 16H3v5\" />","key":"<path d=\"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z\" />\n <circle cx=\"16.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />","colon":"<path d=\"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1\" />\n <path d=\"M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1\" />","container":"<path d=\"M22 7.7c0-.6-.4-1.2-.8-1.5l-6.3-3.9a1.72 1.72 0 0 0-1.7 0l-10.3 6c-.5.2-.9.8-.9 1.4v6.6c0 .5.4 1.2.8 1.5l6.3 3.9a1.72 1.72 0 0 0 1.7 0l10.3-6c.5-.3.9-1 .9-1.5Z\" />\n <path d=\"M10 21.9V14L2.1 9.1\" />\n <path d=\"m10 14 11.9-6.9\" />\n <path d=\"M14 19.8v-8.1\" />\n <path d=\"M18 17.5V9.4\" />","melting_clock":"<line x1=\"10\" x2=\"14\" y1=\"2\" y2=\"2\" />\n <line x1=\"12\" x2=\"15\" y1=\"14\" y2=\"11\" />\n <circle cx=\"12\" cy=\"14\" r=\"8\" />","pencil":"<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" />\n <path d=\"m15 5 4 4\" />","blueprint":"<path d=\"m12.99 6.74 1.93 3.44\" />\n <path d=\"M19.136 12a10 10 0 0 1-14.271 0\" />\n <path d=\"m21 21-2.16-3.84\" />\n <path d=\"m3 21 8.02-14.26\" />\n <circle cx=\"12\" cy=\"5\" r=\"2\" />","pixel":"<path d=\"M3 7V5a2 2 0 0 1 2-2h2\" />\n <path d=\"M17 3h2a2 2 0 0 1 2 2v2\" />\n <path d=\"M21 17v2a2 2 0 0 1-2 2h-2\" />\n <path d=\"M7 21H5a2 2 0 0 1-2-2v-2\" />\n <path d=\"M7 12h10\" />","ship":"<path d=\"M12 10.189V14\" />\n <path d=\"M12 2v3\" />\n <path d=\"M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6\" />\n <path d=\"M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76\" />\n <path d=\"M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1\" />","spark_cursor":"<path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063aLine truncated
|
||||
|
||||
const tierClass = function (tier) {
|
||||
return tier ? "ha-tier-" + tier.toLowerCase() : "ha-tier-pending";
|
||||
};
|
||||
|
||||
function api(path, options) {
|
||||
// Delegate to the host SDK's fetchJSON so auth is handled correctly in
|
||||
// BOTH dashboard modes: loopback (X-Hermes-Session-Token header) and
|
||||
// gated OAuth (hermes_session_at cookie via credentials:'include').
|
||||
// Hand-rolling fetch + reading window.__HERMES_SESSION_TOKEN__ directly
|
||||
// 401s in gated mode (the token isn't injected there). fetchJSON throws
|
||||
// Error("<status>: <body>") on non-2xx — the call sites' .catch() relies
|
||||
// on that to surface errors, so we let it propagate (don't swallow).
|
||||
const url = "/api/plugins/hermes-achievements" + path;
|
||||
return SDK.fetchJSON(url, options);
|
||||
}
|
||||
|
||||
function AchievementIcon({ icon }) {
|
||||
const svg = LUCIDE[icon] || LUCIDE.secret;
|
||||
const ref = React.useRef(null);
|
||||
React.useEffect(function () {
|
||||
if (!ref.current) return;
|
||||
const el = ref.current;
|
||||
while (el.firstChild) el.removeChild(el.firstChild);
|
||||
try {
|
||||
const doc = new DOMParser().parseFromString(
|
||||
"<svg xmlns=\"http://www.w3.org/2000/svg\">" + svg + "</svg>",
|
||||
"image/svg+xml"
|
||||
);
|
||||
if (!doc.querySelector("parsererror")) {
|
||||
Array.from(doc.documentElement.childNodes).forEach(function (n) {
|
||||
el.appendChild(document.importNode(n, true));
|
||||
});
|
||||
}
|
||||
} catch (_) {}
|
||||
}, [svg]);
|
||||
return React.createElement("svg", {
|
||||
ref: ref,
|
||||
className: "ha-lucide",
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: 2,
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
"aria-hidden": "true",
|
||||
});
|
||||
}
|
||||
|
||||
const TIER_HEX = {
|
||||
"Copper": "#b87333",
|
||||
"Silver": "#c0c7d2",
|
||||
"Gold": "#f2c94c",
|
||||
"Diamond": "#67e8f9",
|
||||
"Olympian": "#c084fc",
|
||||
};
|
||||
|
||||
function tierHex(tier) {
|
||||
return TIER_HEX[tier] || "#67e8f9";
|
||||
}
|
||||
|
||||
// Render a LUCIDE icon path fragment into a standalone SVG string with an
|
||||
// explicit stroke color so it can be rasterized onto a <canvas> via Image.
|
||||
// The normal render path uses stroke="currentColor" which browsers honor in
|
||||
// DOM but NOT when the SVG is drawn to a canvas from a data URL.
|
||||
function iconSvgForCanvas(iconKey, strokeColor) {
|
||||
const paths = LUCIDE[iconKey] || LUCIDE.secret;
|
||||
return "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" " +
|
||||
"stroke=\"" + strokeColor + "\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">" +
|
||||
paths + "</svg>";
|
||||
}
|
||||
|
||||
function loadSvgImage(svgString) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const img = new Image();
|
||||
img.onload = function () { URL.revokeObjectURL(url); resolve(img); };
|
||||
img.onerror = function (e) { URL.revokeObjectURL(url); reject(e); };
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
function wrapText(ctx, text, maxWidth) {
|
||||
const words = String(text || "").split(/\s+/).filter(Boolean);
|
||||
const lines = [];
|
||||
let current = "";
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
const candidate = current ? current + " " + words[i] : words[i];
|
||||
if (ctx.measureText(candidate).width <= maxWidth) {
|
||||
current = candidate;
|
||||
} else {
|
||||
if (current) lines.push(current);
|
||||
current = words[i];
|
||||
}
|
||||
}
|
||||
if (current) lines.push(current);
|
||||
return lines;
|
||||
}
|
||||
|
||||
// Build a 1200x630 share card PNG for a single achievement. Returns a Blob.
|
||||
// Pure client-side render via Canvas2D — no external deps, no network.
|
||||
async function buildShareImage(achievement) {
|
||||
const W = 1200;
|
||||
const H = 630;
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = W;
|
||||
canvas.height = H;
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
const tier = achievement.tier || achievement.next_tier || "Copper";
|
||||
const color = tierHex(tier);
|
||||
|
||||
// Background: dark charcoal with a tier-tinted radial highlight on the
|
||||
// top-left, echoing the card visual language.
|
||||
ctx.fillStyle = "#0b0d11";
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
const bgGrad = ctx.createRadialGradient(260, 220, 60, 260, 220, 820);
|
||||
bgGrad.addColorStop(0, color + "33");
|
||||
bgGrad.addColorStop(0.55, color + "0a");
|
||||
bgGrad.addColorStop(1, "#0b0d1100");
|
||||
ctx.fillStyle = bgGrad;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// Outer border
|
||||
ctx.strokeStyle = color + "66";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeRect(1, 1, W - 2, H - 2);
|
||||
|
||||
// Icon block — 380x380 on the left
|
||||
try {
|
||||
const svg = iconSvgForCanvas(achievement.icon || "secret", color);
|
||||
const iconImg = await loadSvgImage(svg);
|
||||
const ix = 90;
|
||||
const iy = 125;
|
||||
const isize = 380;
|
||||
// Icon glow
|
||||
ctx.save();
|
||||
ctx.shadowColor = color;
|
||||
ctx.shadowBlur = 40;
|
||||
ctx.drawImage(iconImg, ix, iy, isize, isize);
|
||||
ctx.restore();
|
||||
} catch (_) {
|
||||
// Icon render failure is non-fatal; card still useful without it.
|
||||
}
|
||||
|
||||
// Right column text layout
|
||||
const rx = 520;
|
||||
const rMaxWidth = W - rx - 70;
|
||||
|
||||
// Category label (kicker)
|
||||
ctx.fillStyle = "#8b95a8";
|
||||
ctx.font = "600 22px ui-monospace, 'SF Mono', Menlo, monospace";
|
||||
ctx.textBaseline = "top";
|
||||
ctx.fillText((achievement.category || "").toUpperCase(), rx, 112);
|
||||
|
||||
// Achievement name — wrap to 2 lines if needed
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "780 68px system-ui, -apple-system, 'Segoe UI', sans-serif";
|
||||
const nameLines = wrapText(ctx, achievement.name || "Achievement", rMaxWidth).slice(0, 2);
|
||||
let cursorY = 150;
|
||||
for (let i = 0; i < nameLines.length; i++) {
|
||||
ctx.fillText(nameLines[i], rx, cursorY);
|
||||
cursorY += 76;
|
||||
}
|
||||
|
||||
// Tier badge pill
|
||||
const badgeLabel = tier.toUpperCase() + " TIER";
|
||||
ctx.font = "700 22px ui-monospace, 'SF Mono', Menlo, monospace";
|
||||
const badgeWidth = ctx.measureText(badgeLabel).width + 32;
|
||||
const badgeX = rx;
|
||||
const badgeY = cursorY + 14;
|
||||
const badgeH = 40;
|
||||
ctx.fillStyle = color + "1f";
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.beginPath();
|
||||
ctx.rect(badgeX, badgeY, badgeWidth, badgeH);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = color;
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText(badgeLabel, badgeX + 16, badgeY + badgeH / 2 + 1);
|
||||
ctx.textBaseline = "top";
|
||||
|
||||
// Description — wrap up to 3 lines
|
||||
ctx.fillStyle = "#c3cad6";
|
||||
ctx.font = "400 26px system-ui, -apple-system, 'Segoe UI', sans-serif";
|
||||
const descLines = wrapText(ctx, achievement.description || "", rMaxWidth).slice(0, 3);
|
||||
let descY = badgeY + badgeH + 28;
|
||||
for (let i = 0; i < descLines.length; i++) {
|
||||
ctx.fillText(descLines[i], rx, descY);
|
||||
descY += 34;
|
||||
}
|
||||
|
||||
// Progress / stat line (if meaningful)
|
||||
const progressValue = achievement.progress;
|
||||
const threshold = achievement.next_threshold;
|
||||
let statLine = null;
|
||||
if (progressValue && threshold) {
|
||||
statLine = progressValue.toLocaleString() + " / " + threshold.toLocaleString();
|
||||
} else if (progressValue) {
|
||||
statLine = progressValue.toLocaleString();
|
||||
}
|
||||
if (statLine) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = "700 28px ui-monospace, 'SF Mono', Menlo, monospace";
|
||||
ctx.fillText(statLine, rx, descY + 14);
|
||||
}
|
||||
|
||||
// Footer watermark
|
||||
ctx.fillStyle = "#8b95a8";
|
||||
ctx.font = "600 20px ui-monospace, 'SF Mono', Menlo, monospace";
|
||||
ctx.textBaseline = "bottom";
|
||||
ctx.fillText("HERMES AGENT · hermes-agent.nousresearch.com", 70, H - 40);
|
||||
|
||||
// "UNLOCKED" stamp upper-right
|
||||
ctx.textBaseline = "top";
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = "800 24px ui-monospace, 'SF Mono', Menlo, monospace";
|
||||
const stamp = "◆ UNLOCKED";
|
||||
const stampW = ctx.measureText(stamp).width;
|
||||
ctx.fillText(stamp, W - 70 - stampW, 70);
|
||||
|
||||
return await new Promise(function (resolve, reject) {
|
||||
canvas.toBlob(function (blob) {
|
||||
if (blob) resolve(blob); else reject(new Error("canvas.toBlob returned null"));
|
||||
}, "image/png");
|
||||
});
|
||||
}
|
||||
|
||||
function ShareDialog({ achievement, onClose }) {
|
||||
const { t } = useI18n();
|
||||
const [status, setStatus] = hooks.useState("rendering"); // rendering | ready | copied | error
|
||||
const [errorMsg, setErrorMsg] = hooks.useState(null);
|
||||
const [previewUrl, setPreviewUrl] = hooks.useState(null);
|
||||
const blobRef = React.useRef(null);
|
||||
|
||||
hooks.useEffect(function () {
|
||||
let cancelled = false;
|
||||
let createdUrl = null;
|
||||
buildShareImage(achievement).then(function (blob) {
|
||||
if (cancelled) return;
|
||||
blobRef.current = blob;
|
||||
createdUrl = URL.createObjectURL(blob);
|
||||
setPreviewUrl(createdUrl);
|
||||
setStatus("ready");
|
||||
}).catch(function (err) {
|
||||
if (cancelled) return;
|
||||
setErrorMsg(String(err && err.message || err));
|
||||
setStatus("error");
|
||||
});
|
||||
return function () {
|
||||
cancelled = true;
|
||||
if (createdUrl) URL.revokeObjectURL(createdUrl);
|
||||
};
|
||||
}, [achievement.id]);
|
||||
|
||||
function download() {
|
||||
if (!blobRef.current) return;
|
||||
const url = URL.createObjectURL(blobRef.current);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "hermes-achievement-" + (achievement.id || "badge") + ".png";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
|
||||
}
|
||||
|
||||
async function copyToClipboard() {
|
||||
if (!blobRef.current) return;
|
||||
try {
|
||||
if (!navigator.clipboard || !window.ClipboardItem) {
|
||||
throw new Error(tx(t, "share.clipboard_unsupported", "Clipboard image copy not supported in this browser — use Download instead."));
|
||||
}
|
||||
await navigator.clipboard.write([
|
||||
new window.ClipboardItem({ "image/png": blobRef.current }),
|
||||
]);
|
||||
setStatus("copied");
|
||||
setTimeout(function () { setStatus("ready"); }, 1800);
|
||||
} catch (err) {
|
||||
setErrorMsg(String(err && err.message || err));
|
||||
setStatus("error");
|
||||
}
|
||||
}
|
||||
|
||||
// Build the pre-filled tweet text. Keep it short so X doesn't truncate
|
||||
// when the user hasn't attached the PNG yet — they'll copy-image and
|
||||
// paste in the same flow.
|
||||
function tweetText() {
|
||||
const tierPart = achievement.tier ? (achievement.tier + " tier ") : "";
|
||||
const tmpl = tx(t, "share.tweet_text", "Just unlocked {tier_part}\"{name}\" in Hermes Agent ☤", {
|
||||
tier_part: tierPart,
|
||||
name: achievement.name,
|
||||
});
|
||||
return tmpl + "\n\n@NousResearch · https://hermes-agent.nousresearch.com";
|
||||
}
|
||||
|
||||
function shareOnX() {
|
||||
const url = "https://x.com/intent/post?text=" + encodeURIComponent(tweetText());
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
|
||||
return React.createElement("div", {
|
||||
className: "ha-share-backdrop",
|
||||
onClick: function (e) { if (e.target === e.currentTarget) onClose(); },
|
||||
},
|
||||
React.createElement("div", { className: "ha-share-dialog", role: "dialog", "aria-label": tx(t, "share.dialog_label", "Share achievement") },
|
||||
React.createElement("div", { className: "ha-share-head" },
|
||||
React.createElement("strong", null, tx(t, "share.header", "Share: {name}", { name: achievement.name })),
|
||||
React.createElement("button", { className: "ha-share-close", onClick: onClose, "aria-label": tx(t, "share.close", "Close") }, "×")
|
||||
),
|
||||
React.createElement("div", { className: "ha-share-preview" },
|
||||
status === "rendering" && React.createElement("div", { className: "ha-share-placeholder" }, tx(t, "share.rendering", "Rendering…")),
|
||||
previewUrl && React.createElement("img", { src: previewUrl, alt: tx(t, "share.card_alt", "{name} share card", { name: achievement.name }) })
|
||||
),
|
||||
status === "error" && React.createElement("div", { className: "ha-share-error" }, errorMsg || tx(t, "share.error_generic", "Something went wrong.")),
|
||||
React.createElement("div", { className: "ha-share-actions" },
|
||||
React.createElement("button", {
|
||||
className: "ha-share-btn ha-share-btn-primary",
|
||||
onClick: shareOnX,
|
||||
title: tx(t, "share.x_title", "Opens X with a pre-filled post"),
|
||||
}, tx(t, "share.x_button", "Share on X")),
|
||||
React.createElement("button", {
|
||||
className: "ha-share-btn",
|
||||
onClick: copyToClipboard,
|
||||
disabled: status !== "ready" && status !== "copied",
|
||||
title: tx(t, "share.copy_title", "Copy the image to paste into your post"),
|
||||
}, status === "copied" ? tx(t, "share.copied", "Copied ✓") : tx(t, "share.copy_button", "Copy image")),
|
||||
React.createElement("button", {
|
||||
className: "ha-share-btn",
|
||||
onClick: download,
|
||||
disabled: status !== "ready" && status !== "copied",
|
||||
}, tx(t, "share.download_button", "Download PNG"))
|
||||
),
|
||||
React.createElement("p", { className: "ha-share-hint" },
|
||||
tx(t, "share.hint", "Share on X opens a pre-filled post in a new tab. Click Copy image first if you want the 1200×630 badge attached — X lets you paste it right into the tweet composer. Download PNG saves the file for use anywhere.")
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard(props) {
|
||||
return React.createElement(C.Card, { className: "ha-stat" },
|
||||
React.createElement(C.CardContent, { className: "ha-stat-content" },
|
||||
React.createElement("div", { className: "ha-stat-label" }, props.label),
|
||||
React.createElement("div", { className: "ha-stat-value" }, props.value),
|
||||
props.hint && React.createElement("div", { className: "ha-stat-hint" }, props.hint)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function TierLegend() {
|
||||
return React.createElement("div", { className: "ha-tier-legend" },
|
||||
["Copper", "Silver", "Gold", "Diamond", "Olympian"].map(function (tier, index, arr) {
|
||||
return React.createElement(React.Fragment, { key: tier },
|
||||
React.createElement("span", { className: "ha-tier-step ha-tier-" + tier.toLowerCase() },
|
||||
React.createElement("i", null),
|
||||
tier
|
||||
),
|
||||
index < arr.length - 1 && React.createElement("span", { className: "ha-tier-arrow" }, "→")
|
||||
);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function LoadingSkeletonCard(props) {
|
||||
return React.createElement(C.Card, { className: "ha-card ha-skeleton-card ha-tier-pending" },
|
||||
React.createElement(C.CardContent, { className: "ha-card-content" },
|
||||
React.createElement("div", { className: "ha-card-head" },
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-icon" }),
|
||||
React.createElement("div", { className: "ha-skeleton-stack" },
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-title" }),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-meta" })
|
||||
),
|
||||
React.createElement("div", { className: "ha-badges" },
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-badge" }),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-badge ha-skeleton-badge-short" })
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-line" }),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-line ha-skeleton-line-short" }),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-criteria" }),
|
||||
React.createElement("div", { className: "ha-evidence-slot" }, React.createElement("div", { className: "ha-skeleton ha-skeleton-evidence" })),
|
||||
React.createElement("div", { className: "ha-progress-row" },
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-progress" }),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-progress-text" })
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingPage() {
|
||||
const { t } = useI18n();
|
||||
return React.createElement("div", { className: "ha-page ha-page-loading" },
|
||||
React.createElement("section", { className: "ha-hero ha-loading-hero" },
|
||||
React.createElement("div", null,
|
||||
React.createElement("div", { className: "ha-kicker" }, tx(t, "hero.kicker", "Agentic Gamerscore")),
|
||||
React.createElement("h1", null, tx(t, "hero.title", "Hermes Achievements")),
|
||||
React.createElement("p", null, tx(t, "hero.scan_subtitle", "Scanning Hermes session history. First scan can take 5–10 seconds on large histories."))
|
||||
),
|
||||
React.createElement("div", { className: "ha-scan-status", role: "status", "aria-live": "polite" },
|
||||
React.createElement("span", { className: "ha-scan-pulse", "aria-hidden": "true" }),
|
||||
React.createElement("div", null,
|
||||
React.createElement("strong", null, tx(t, "scan.building_headline", "Building achievement profile…")),
|
||||
React.createElement("p", null, tx(t, "scan.building_detail", "Reading sessions, tool calls, model metadata, and unlock state."))
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "ha-stats" },
|
||||
[
|
||||
{ key: "stats.unlocked", fallback: "Unlocked" },
|
||||
{ key: "stats.discovered", fallback: "Discovered" },
|
||||
{ key: "stats.secrets", fallback: "Secrets" },
|
||||
{ key: "stats.highest_tier", fallback: "Highest tier" },
|
||||
{ key: "stats.latest", fallback: "Latest" },
|
||||
].map(function (entry) {
|
||||
const label = tx(t, entry.key, entry.fallback);
|
||||
return React.createElement(C.Card, { key: entry.key, className: "ha-stat ha-skeleton-stat" },
|
||||
React.createElement(C.CardContent, { className: "ha-stat-content" },
|
||||
React.createElement("div", { className: "ha-stat-label" }, label),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-stat-value" }),
|
||||
React.createElement("div", { className: "ha-skeleton ha-skeleton-stat-hint" })
|
||||
)
|
||||
);
|
||||
})
|
||||
),
|
||||
React.createElement("section", { className: "ha-guide ha-loading-guide" },
|
||||
React.createElement("div", null,
|
||||
React.createElement("strong", null, tx(t, "guide.scan_status_header", "Scan status")),
|
||||
React.createElement("p", null, tx(t, "guide.scan_status_body", "Hermes is scanning local history once, then cards will appear automatically. Nothing is stuck if this takes a few seconds."))
|
||||
),
|
||||
React.createElement("div", null,
|
||||
React.createElement("strong", null, tx(t, "guide.what_scanned_header", "What is scanned")),
|
||||
React.createElement("p", null, tx(t, "guide.what_scanned_body", "Sessions, tool calls, model metadata, errors, achievements, and local unlock state."))
|
||||
)
|
||||
),
|
||||
React.createElement("section", { className: "ha-grid" }, [0, 1, 2, 3, 4, 5].map(function (i) {
|
||||
return React.createElement(LoadingSkeletonCard, { key: i });
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function AchievementCard({ achievement }) {
|
||||
const { t } = useI18n();
|
||||
const unlocked = achievement.unlocked;
|
||||
const progress = achievement.progress || 0;
|
||||
const pct = achievement.progress_pct || (unlocked ? 100 : 0);
|
||||
const state = achievement.state || (unlocked ? "unlocked" : "discovered");
|
||||
const stateLabel = state === "unlocked"
|
||||
? tx(t, "state.unlocked", "Unlocked")
|
||||
: (state === "secret" ? tx(t, "state.secret", "Secret") : tx(t, "state.discovered", "Discovered"));
|
||||
const targetTier = achievement.next_tier || achievement.tier;
|
||||
let tierLabel;
|
||||
if (achievement.tier) {
|
||||
tierLabel = achievement.tier;
|
||||
} else if (targetTier) {
|
||||
tierLabel = tx(t, "tier.target", "Target {tier}", { tier: targetTier });
|
||||
} else if (state === "secret") {
|
||||
tierLabel = tx(t, "tier.hidden", "Hidden");
|
||||
} else if (unlocked) {
|
||||
tierLabel = tx(t, "tier.complete", "Complete");
|
||||
} else {
|
||||
tierLabel = tx(t, "tier.objective", "Objective");
|
||||
}
|
||||
const progressText = state === "secret"
|
||||
? tx(t, "progress.hidden", "hidden")
|
||||
: (progress + (achievement.next_threshold ? " / " + achievement.next_threshold : ""));
|
||||
const [shareOpen, setShareOpen] = hooks.useState(false);
|
||||
return React.createElement(C.Card, { className: cn("ha-card", "ha-state-" + state, tierClass(achievement.tier || achievement.next_tier)) },
|
||||
React.createElement(C.CardContent, { className: "ha-card-content" },
|
||||
React.createElement("div", { className: "ha-card-head" },
|
||||
React.createElement("div", { className: "ha-icon" }, React.createElement(AchievementIcon, { icon: achievement.icon || "secret" })),
|
||||
React.createElement("div", { className: "ha-card-title-wrap" },
|
||||
React.createElement("div", { className: "ha-card-title" }, achievement.name),
|
||||
React.createElement("div", { className: "ha-card-category" }, achievement.category)
|
||||
),
|
||||
React.createElement("div", { className: "ha-badges" },
|
||||
React.createElement("span", { className: "ha-state-badge" }, stateLabel),
|
||||
React.createElement("span", { className: "ha-tier-badge" }, tierLabel),
|
||||
state === "unlocked" && React.createElement("button", {
|
||||
className: "ha-share-trigger",
|
||||
onClick: function () { setShareOpen(true); },
|
||||
title: tx(t, "card.share_title", "Share this achievement"),
|
||||
"aria-label": tx(t, "card.share_label", "Share {name}", { name: achievement.name }),
|
||||
}, tx(t, "card.share_text", "Share"))
|
||||
)
|
||||
),
|
||||
React.createElement("p", { className: "ha-description" }, achievement.description),
|
||||
achievement.criteria && React.createElement("details", { className: "ha-criteria" },
|
||||
React.createElement("summary", null, state === "secret"
|
||||
? tx(t, "card.how_to_reveal", "How to reveal")
|
||||
: tx(t, "card.what_counts", "What counts")),
|
||||
React.createElement("p", null, achievement.criteria)
|
||||
),
|
||||
React.createElement("div", { className: "ha-evidence-slot" },
|
||||
achievement.evidence ? React.createElement("div", { className: "ha-evidence" },
|
||||
React.createElement("span", { className: "ha-evidence-label" }, tx(t, "card.evidence_label", "Evidence")),
|
||||
React.createElement("span", { className: "ha-evidence-title" }, achievement.evidence.title || achievement.evidence.session_id || tx(t, "card.evidence_session_fallback", "session"))
|
||||
) : React.createElement("div", { className: "ha-evidence ha-evidence-empty", "aria-hidden": "true" }, tx(t, "card.no_evidence", "No evidence yet"))
|
||||
),
|
||||
React.createElement("div", { className: "ha-progress-row" },
|
||||
React.createElement("div", { className: "ha-progress-track" },
|
||||
React.createElement("div", { className: "ha-progress-fill", style: { width: Math.max(state === "secret" ? 0 : 3, Math.min(100, pct)) + "%" } })
|
||||
),
|
||||
React.createElement("span", { className: "ha-progress-text" }, progressText)
|
||||
)
|
||||
),
|
||||
shareOpen && React.createElement(ShareDialog, {
|
||||
achievement: achievement,
|
||||
onClose: function () { setShareOpen(false); },
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function AchievementsPage() {
|
||||
const { t } = useI18n();
|
||||
const [data, setData] = hooks.useState(null);
|
||||
const [loading, setLoading] = hooks.useState(true);
|
||||
const [error, setError] = hooks.useState(null);
|
||||
const [category, setCategory] = hooks.useState("All");
|
||||
const [visibility, setVisibility] = hooks.useState("all");
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
api("/achievements")
|
||||
.then(function (payload) { setData(payload); setError((payload && payload.error) || null); })
|
||||
.catch(function (err) { setError(String(err)); })
|
||||
.finally(function () { setLoading(false); });
|
||||
}
|
||||
// refresh() re-fetches without flipping the loading state — used by the
|
||||
// auto-poller during an in-progress background scan so the page updates
|
||||
// with growing unlock counts instead of flashing the loading skeleton.
|
||||
function refresh() {
|
||||
api("/achievements")
|
||||
.then(function (payload) { setData(payload); setError((payload && payload.error) || null); })
|
||||
.catch(function (err) { setError(String(err)); });
|
||||
}
|
||||
hooks.useEffect(load, []);
|
||||
|
||||
// Auto-poll while the backend is still scanning. scan_meta.mode is
|
||||
// "pending" on the very first request (no cache yet) and "in_progress"
|
||||
// while the background thread is publishing partial snapshots. Once it
|
||||
// flips to "full" or "incremental" the scan is done and we stop polling.
|
||||
const scanMode = (data && data.scan_meta && data.scan_meta.mode) || null;
|
||||
const scanInFlight = scanMode === "pending" || scanMode === "in_progress";
|
||||
hooks.useEffect(function () {
|
||||
if (!scanInFlight) return undefined;
|
||||
const id = setInterval(refresh, 4000);
|
||||
return function () { clearInterval(id); };
|
||||
}, [scanInFlight]);
|
||||
|
||||
const achievements = (data && data.achievements) || [];
|
||||
const categories = ["All"].concat(Array.from(new Set(achievements.map(function (a) { return a.category; }))));
|
||||
const visible = achievements.filter(function (a) {
|
||||
if (category !== "All" && a.category !== category) return false;
|
||||
if (visibility === "unlocked" && a.state !== "unlocked") return false;
|
||||
if (visibility === "discovered" && a.state !== "discovered") return false;
|
||||
if (visibility === "secret" && a.state !== "secret") return false;
|
||||
return true;
|
||||
});
|
||||
const unlocked = achievements.filter(function (a) { return a.state === "unlocked"; });
|
||||
const discovered = achievements.filter(function (a) { return a.state === "discovered"; });
|
||||
const secret = achievements.filter(function (a) { return a.state === "secret"; });
|
||||
const latest = unlocked.slice().sort(function (a, b) { return (b.unlocked_at || 0) - (a.unlocked_at || 0); }).slice(0, 5);
|
||||
const highest = ["Olympian", "Diamond", "Gold", "Silver", "Copper"].find(function (tier) { return unlocked.some(function (a) { return a.tier === tier; }); }) || tx(t, "stats.none_yet", "None yet");
|
||||
|
||||
// Build the in-progress scan banner once so the JSX below stays readable.
|
||||
// Shows nothing when the scan is idle. When a scan is running it renders
|
||||
// a pulsing status row with "X / Y sessions · Z%" and a filling bar, so
|
||||
// the user gets continuous visual feedback during long cold scans on
|
||||
// large session databases (can take several minutes on 8000+ sessions).
|
||||
let scanBanner = null;
|
||||
if (scanInFlight) {
|
||||
const meta = (data && data.scan_meta) || {};
|
||||
const scanned = Number(meta.sessions_scanned_so_far || meta.sessions_total || 0);
|
||||
const total = Number(meta.sessions_expected_total || 0);
|
||||
const pct = total > 0 ? Math.max(0, Math.min(100, Math.floor((scanned / total) * 100))) : 0;
|
||||
const headline = scanMode === "pending"
|
||||
? tx(t, "scan.starting_headline", "Starting achievement scan…")
|
||||
: tx(t, "scan.building_headline", "Building achievement profile…");
|
||||
const detail = total > 0
|
||||
? tx(t, "scan.progress_detail", "Scanned {scanned} of {total} sessions · {pct}%. Badges unlock as more history streams in.", {
|
||||
scanned: scanned.toLocaleString(),
|
||||
total: total.toLocaleString(),
|
||||
pct: String(pct),
|
||||
})
|
||||
: tx(t, "scan.idle_detail", "Reading sessions, tool calls, model metadata, and unlock state. Badges appear here as they unlock.");
|
||||
scanBanner = React.createElement("section", { className: "ha-scan-banner", role: "status", "aria-live": "polite" },
|
||||
React.createElement("div", { className: "ha-scan-banner-head" },
|
||||
React.createElement("span", { className: "ha-scan-pulse", "aria-hidden": "true" }),
|
||||
React.createElement("div", { className: "ha-scan-banner-text" },
|
||||
React.createElement("strong", null, headline),
|
||||
React.createElement("p", null, detail)
|
||||
)
|
||||
),
|
||||
total > 0 && React.createElement("div", { className: "ha-scan-progress-track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct },
|
||||
React.createElement("div", { className: "ha-scan-progress-fill", style: { width: pct + "%" } })
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return React.createElement(LoadingPage, null);
|
||||
}
|
||||
|
||||
// Translate the "All" category pill but keep the underlying state ("All")
|
||||
// as the canonical key the API matches against.
|
||||
const allCategoryLabel = tx(t, "filters.all_categories", "All");
|
||||
const visibilityLabels = {
|
||||
all: tx(t, "filters.visibility_all", "all"),
|
||||
unlocked: tx(t, "filters.visibility_unlocked", "unlocked"),
|
||||
discovered: tx(t, "filters.visibility_discovered", "discovered"),
|
||||
secret: tx(t, "filters.visibility_secret", "secret"),
|
||||
};
|
||||
|
||||
return React.createElement("div", { className: "ha-page" },
|
||||
React.createElement("section", { className: "ha-hero" },
|
||||
React.createElement("div", null,
|
||||
React.createElement("div", { className: "ha-kicker" }, tx(t, "hero.kicker", "Agentic Gamerscore")),
|
||||
React.createElement("h1", null, tx(t, "hero.title", "Hermes Achievements")),
|
||||
React.createElement("p", null, tx(t, "hero.subtitle", "Collectible Hermes badges earned from real session history. Known unfinished achievements are shown as Discovered; Secret achievements stay hidden until the first matching behavior appears."))
|
||||
),
|
||||
React.createElement(C.Button, { onClick: load, className: "ha-refresh" }, tx(t, "actions.rescan", "Rescan"))
|
||||
),
|
||||
scanBanner,
|
||||
error && React.createElement(C.Card, { className: "ha-error" }, React.createElement(C.CardContent, null, String(error))),
|
||||
React.createElement("div", { className: "ha-stats" },
|
||||
React.createElement(StatCard, { label: tx(t, "stats.unlocked", "Unlocked"), value: (data ? data.unlocked_count : 0) + " / " + (data ? data.total_count : 0), hint: tx(t, "stats.unlocked_hint", "earned badges") }),
|
||||
React.createElement(StatCard, { label: tx(t, "stats.discovered", "Discovered"), value: discovered.length, hint: tx(t, "stats.discovered_hint", "known, not earned yet") }),
|
||||
React.createElement(StatCard, { label: tx(t, "stats.secrets", "Secrets"), value: secret.length, hint: tx(t, "stats.secrets_hint", "hidden until first signal") }),
|
||||
React.createElement(StatCard, { label: tx(t, "stats.highest_tier", "Highest tier"), value: highest, hint: tx(t, "stats.highest_tier_hint", "Copper → Silver → Gold → Diamond → Olympian") }),
|
||||
React.createElement(StatCard, { label: tx(t, "stats.latest", "Latest"), value: latest[0] ? latest[0].name : tx(t, "stats.none_yet", "None yet"), hint: latest[0] ? latest[0].category : tx(t, "stats.latest_hint_empty", "run Hermes more") })
|
||||
),
|
||||
React.createElement("section", { className: "ha-guide" },
|
||||
React.createElement("div", null,
|
||||
React.createElement("strong", null, tx(t, "guide.tiers_header", "Tiers")),
|
||||
React.createElement(TierLegend, null)
|
||||
),
|
||||
React.createElement("div", null,
|
||||
React.createElement("strong", null, tx(t, "guide.secret_header", "Secret achievements")),
|
||||
React.createElement("p", null, tx(t, "guide.secret_body", "Secrets hide their exact trigger. Once Hermes sees a related signal, the card becomes Discovered and shows its requirement."))
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "ha-toolbar" },
|
||||
React.createElement("div", { className: "ha-pills" }, categories.map(function (cat) {
|
||||
// Render the localized "All" pill but keep the underlying value
|
||||
// unchanged so the filter logic still compares against "All".
|
||||
const pillLabel = cat === "All" ? allCategoryLabel : cat;
|
||||
return React.createElement("button", { key: cat, onClick: function () { setCategory(cat); }, className: cat === category ? "active" : "" }, pillLabel);
|
||||
})),
|
||||
React.createElement("div", { className: "ha-pills" }, ["all", "unlocked", "discovered", "secret"].map(function (v) {
|
||||
return React.createElement("button", { key: v, onClick: function () { setVisibility(v); }, className: v === visibility ? "active" : "" }, visibilityLabels[v] || v);
|
||||
}))
|
||||
),
|
||||
latest.length > 0 && React.createElement("section", { className: "ha-latest" },
|
||||
React.createElement("h2", null, tx(t, "latest.header", "Recent unlocks")),
|
||||
React.createElement("div", { className: "ha-latest-row" }, latest.map(function (a) {
|
||||
return React.createElement("div", { key: a.id, className: cn("ha-chip", tierClass(a.tier)) },
|
||||
React.createElement("span", { className: "ha-chip-icon" }, React.createElement(AchievementIcon, { icon: a.icon || "secret" })),
|
||||
a.name
|
||||
);
|
||||
}))
|
||||
),
|
||||
visibility === "secret" && visible.length === 0 && React.createElement(C.Card, { className: "ha-secret-empty" },
|
||||
React.createElement(C.CardContent, { className: "ha-secret-empty-content" },
|
||||
React.createElement("strong", null, tx(t, "empty.no_secrets_header", "No hidden secrets left in this scan.")),
|
||||
React.createElement("p", null, tx(t, "empty.no_secrets_body", "Clue: secrets usually start from unusual failure or power-user patterns — port conflicts, permission walls, missing env vars, YAML mistakes, Docker collisions, rollback/checkpoint use, cache hits, or tiny fixes after lots of red text."))
|
||||
)
|
||||
),
|
||||
React.createElement("section", { className: "ha-grid" }, visible.map(function (a) {
|
||||
return React.createElement(AchievementCard, { key: a.id, achievement: a });
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
window.__HERMES_PLUGINS__.register("hermes-achievements", AchievementsPage);
|
||||
})();
|
||||
@@ -0,0 +1,146 @@
|
||||
/* hermes-achievements dashboard styles
|
||||
* Originally authored by @PCinkusz — https://github.com/PCinkusz/hermes-achievements (MIT).
|
||||
* Bundled into hermes-agent. The in-progress scan banner rules at the bottom
|
||||
* (.ha-scan-banner*) are a small addition layered on top of the original bundle.
|
||||
*/
|
||||
.ha-page { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.ha-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border: 1px solid var(--color-border); background: radial-gradient(circle at 12% 0, rgba(103,232,249,.13), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--color-card) 88%, transparent), color-mix(in srgb, var(--color-primary) 10%, transparent)); padding: 1.25rem; }
|
||||
.ha-hero:before { content: ""; position: absolute; inset: auto -10% -80% -10%; height: 180%; pointer-events: none; background: radial-gradient(circle, rgba(242,201,76,.12), transparent 55%); }
|
||||
.ha-hero h1 { position: relative; margin: 0; font-size: clamp(2rem, 4vw, 4.2rem); line-height: .9; letter-spacing: -0.06em; }
|
||||
.ha-hero p { position: relative; max-width: 52rem; margin: .65rem 0 0; color: var(--color-muted-foreground); }
|
||||
.ha-kicker { position: relative; color: var(--color-muted-foreground); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-family: var(--font-mono, ui-monospace, monospace); }
|
||||
.ha-refresh { position: relative; white-space: nowrap; }
|
||||
.ha-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
|
||||
.ha-stat-content { padding: 1rem !important; }
|
||||
.ha-stat-label { color: var(--color-muted-foreground); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
|
||||
.ha-stat-value { margin-top: .35rem; font-size: 1.4rem; font-weight: 750; letter-spacing: -0.035em; }
|
||||
.ha-stat-hint { margin-top: .2rem; color: var(--color-muted-foreground); font-size: .75rem; }
|
||||
.ha-toolbar { display: flex; justify-content: space-between; gap: .75rem; align-items: center; flex-wrap: wrap; }
|
||||
.ha-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
|
||||
.ha-pills button { border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-card) 72%, transparent); color: var(--color-muted-foreground); padding: .35rem .6rem; font-size: .78rem; cursor: pointer; }
|
||||
.ha-pills button.active, .ha-pills button:hover { color: var(--color-foreground); border-color: var(--ha-tier, var(--color-ring)); background: color-mix(in srgb, var(--color-primary) 16%, var(--color-card)); }
|
||||
.ha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; }
|
||||
.ha-card { --ha-tier: var(--color-border); position: relative; overflow: hidden; min-height: 214px; border: 1px solid color-mix(in srgb, var(--ha-tier) 46%, var(--color-border)); background: radial-gradient(circle at 2.6rem 2.2rem, color-mix(in srgb, var(--ha-tier) 16%, transparent), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.04), transparent), color-mix(in srgb, var(--color-card) 92%, #000); transition: transform .16s ease, border-color .16s ease, opacity .16s ease, box-shadow .16s ease; }
|
||||
.ha-card:hover { border-color: var(--ha-tier); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ha-tier) 16%, transparent); }
|
||||
.ha-card-content { position: relative; z-index: 1; padding: 1rem !important; display: flex; flex-direction: column; gap: .75rem; height: 100%; }
|
||||
.ha-card-head { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; gap: .85rem; align-items: start; }
|
||||
.ha-icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; color: var(--ha-tier); }
|
||||
.ha-lucide { width: 1.78rem; height: 1.78rem; stroke: currentColor; stroke-width: 2.15; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ha-tier) 24%, transparent)); }
|
||||
.ha-card-title { font-weight: 780; line-height: 1.05; letter-spacing: -0.025em; }
|
||||
.ha-card-category { margin-top: .28rem; color: var(--color-muted-foreground); font-size: .76rem; }
|
||||
.ha-badges { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
|
||||
.ha-tier-badge, .ha-state-badge { border: 1px solid var(--ha-tier); color: var(--ha-tier); background: color-mix(in srgb, var(--ha-tier) 10%, transparent); padding: .16rem .38rem; font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono, ui-monospace, monospace); }
|
||||
.ha-description { margin: 0; color: var(--color-muted-foreground); font-size: .86rem; line-height: 1.45; min-height: 2.4em; }
|
||||
.ha-criteria { border: 1px solid color-mix(in srgb, var(--ha-tier) 28%, var(--color-border)); background: color-mix(in srgb, var(--ha-tier) 5%, transparent); }
|
||||
.ha-criteria summary { cursor: pointer; padding: .5rem .65rem; color: var(--ha-tier); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-family: var(--font-mono, ui-monospace, monospace); user-select: none; }
|
||||
.ha-criteria summary:hover { background: color-mix(in srgb, var(--ha-tier) 8%, transparent); }
|
||||
.ha-criteria p { margin: 0; border-top: 1px solid color-mix(in srgb, var(--ha-tier) 18%, var(--color-border)); padding: .55rem .65rem .65rem; color: color-mix(in srgb, var(--color-foreground) 78%, var(--color-muted-foreground)); font-size: .76rem; line-height: 1.38; }
|
||||
.ha-progress-row { display: flex; align-items: center; gap: .55rem; margin-top: 0; }
|
||||
.ha-progress-track { flex: 1; height: .48rem; border: 1px solid color-mix(in srgb, var(--ha-tier) 34%, var(--color-border)); background: rgba(0,0,0,.22); overflow: hidden; }
|
||||
.ha-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ha-tier), color-mix(in srgb, var(--ha-tier) 48%, white)); }
|
||||
.ha-progress-text { min-width: 5.4rem; text-align: right; font-family: var(--font-mono, ui-monospace, monospace); color: var(--color-muted-foreground); font-size: .72rem; }
|
||||
.ha-evidence-slot { min-height: 1.65rem; margin-top: auto; display: flex; align-items: flex-end; }
|
||||
.ha-evidence { width: 100%; display: flex; align-items: center; gap: .4rem; color: var(--color-muted-foreground); font-size: .72rem; min-width: 0; }
|
||||
.ha-evidence-label { text-transform: uppercase; letter-spacing: .09em; font-family: var(--font-mono, ui-monospace, monospace); flex: 0 0 auto; }
|
||||
.ha-evidence-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--color-foreground) 84%, var(--color-muted-foreground)); }
|
||||
.ha-evidence-empty { visibility: hidden; }
|
||||
.ha-latest h2 { margin: 0 0 .5rem; font-size: 1rem; }
|
||||
.ha-latest-row { display: flex; gap: .5rem; flex-wrap: wrap; }
|
||||
.ha-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--ha-tier); color: var(--ha-tier); background: color-mix(in srgb, var(--ha-tier) 10%, transparent); padding: .35rem .55rem; font-size: .8rem; }
|
||||
.ha-chip-icon .ha-lucide { width: .95rem; height: .95rem; }
|
||||
.ha-slot { border-style: dashed; }
|
||||
.ha-slot-content { display: flex; gap: .6rem; align-items: center; padding: .65rem .8rem !important; font-size: .82rem; }
|
||||
.ha-slot-star { color: #67e8f9; }
|
||||
.ha-slot-muted { color: var(--color-muted-foreground); margin-left: auto; }
|
||||
.ha-error { border-color: #ef4444; color: #fecaca; }
|
||||
.ha-loading { color: var(--color-muted-foreground); font-family: var(--font-mono, ui-monospace, monospace); padding: 2rem; border: 1px dashed var(--color-border); }
|
||||
.ha-guide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .75rem; }
|
||||
.ha-guide > div { border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-card) 82%, transparent); padding: .85rem 1rem; }
|
||||
.ha-guide strong { display: block; margin-bottom: .45rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono, ui-monospace, monospace); }
|
||||
.ha-guide p { margin: 0; color: var(--color-muted-foreground); font-size: .84rem; line-height: 1.45; }
|
||||
.ha-tier-legend { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
|
||||
.ha-tier-step { --ha-tier: var(--color-border); display: inline-flex; align-items: center; gap: .32rem; color: var(--ha-tier); border: 1px solid color-mix(in srgb, var(--ha-tier) 52%, var(--color-border)); background: color-mix(in srgb, var(--ha-tier) 8%, transparent); padding: .28rem .45rem; font-size: .72rem; font-family: var(--font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .06em; }
|
||||
.ha-tier-step i { width: .55rem; height: .55rem; background: var(--ha-tier); display: inline-block; }
|
||||
.ha-tier-arrow { color: var(--color-muted-foreground); }
|
||||
.ha-state-discovered { opacity: .92; }
|
||||
.ha-state-discovered .ha-card-title { color: color-mix(in srgb, var(--color-foreground) 82%, var(--ha-tier)); }
|
||||
.ha-state-secret { opacity: .5; filter: grayscale(.55); }
|
||||
.ha-state-secret:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255,255,255,.035) 8px 10px); }
|
||||
.ha-tier-pending { --ha-tier: color-mix(in srgb, var(--color-muted-foreground) 64%, transparent); }
|
||||
.ha-tier-copper { --ha-tier: #b87333; }
|
||||
.ha-tier-silver { --ha-tier: #c0c7d2; }
|
||||
.ha-tier-gold { --ha-tier: #f2c94c; box-shadow: 0 0 22px rgba(242,201,76,.08); }
|
||||
.ha-tier-diamond { --ha-tier: #67e8f9; box-shadow: 0 0 24px rgba(103,232,249,.1); }
|
||||
.ha-tier-olympian { --ha-tier: #c084fc; box-shadow: 0 0 34px rgba(192,132,252,.18), 0 0 12px rgba(242,201,76,.1); }
|
||||
@media (max-width: 980px) { .ha-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ha-guide { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 800px) { .ha-stats { grid-template-columns: 1fr; } .ha-hero { flex-direction: column; align-items: stretch; } .ha-card-head { grid-template-columns: 3.1rem 1fr; } .ha-badges { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; } }
|
||||
|
||||
.ha-secret-empty-content { padding: 1rem !important; }
|
||||
.ha-secret-empty strong { display: block; margin-bottom: .35rem; }
|
||||
.ha-secret-empty p { margin: 0; color: var(--color-muted-foreground); font-size: .86rem; line-height: 1.45; }
|
||||
.ha-page-loading { animation: ha-fade-in .18s ease-out; }
|
||||
.ha-loading-hero { align-items: center; }
|
||||
.ha-scan-status { position: relative; z-index: 1; display: flex; align-items: center; gap: .8rem; min-width: 18rem; border: 1px solid color-mix(in srgb, #67e8f9 35%, var(--color-border)); background: color-mix(in srgb, var(--color-card) 78%, transparent); padding: .8rem .95rem; color: var(--color-foreground); }
|
||||
.ha-scan-status strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono, ui-monospace, monospace); }
|
||||
.ha-scan-status p { margin: .25rem 0 0; font-size: .78rem; line-height: 1.35; color: var(--color-muted-foreground); }
|
||||
.ha-scan-pulse { width: .72rem; height: .72rem; flex: 0 0 auto; border-radius: 999px; background: #67e8f9; box-shadow: 0 0 0 0 rgba(103,232,249,.55); animation: ha-pulse 1.35s ease-out infinite; }
|
||||
.ha-skeleton-card { pointer-events: none; }
|
||||
.ha-skeleton { position: relative; overflow: hidden; border-radius: 0; background: color-mix(in srgb, var(--color-muted-foreground) 16%, transparent); }
|
||||
.ha-skeleton:after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); animation: ha-shimmer 1.35s infinite; }
|
||||
.ha-skeleton-stack { display: flex; flex-direction: column; gap: .45rem; padding-top: .15rem; }
|
||||
.ha-skeleton-icon { width: 2.9rem; height: 2.9rem; }
|
||||
.ha-skeleton-title { width: 72%; height: .95rem; }
|
||||
.ha-skeleton-meta { width: 45%; height: .65rem; }
|
||||
.ha-skeleton-badge { width: 4.4rem; height: 1.05rem; }
|
||||
.ha-skeleton-badge-short { width: 3.6rem; }
|
||||
.ha-skeleton-line { height: .78rem; width: 92%; }
|
||||
.ha-skeleton-line-short { width: 68%; }
|
||||
.ha-skeleton-criteria { height: 2.2rem; width: 100%; border: 1px solid color-mix(in srgb, var(--color-muted-foreground) 18%, var(--color-border)); }
|
||||
.ha-skeleton-evidence { width: 58%; height: .8rem; }
|
||||
.ha-skeleton-progress { flex: 1; height: .48rem; }
|
||||
.ha-skeleton-progress-text { width: 4.6rem; height: .75rem; }
|
||||
.ha-skeleton-stat-value { width: 56%; height: 1.35rem; margin-top: .55rem; }
|
||||
.ha-skeleton-stat-hint { width: 76%; height: .7rem; margin-top: .55rem; }
|
||||
.ha-loading-guide p { color: var(--color-muted-foreground); }
|
||||
@keyframes ha-shimmer { 100% { transform: translateX(100%); } }
|
||||
@keyframes ha-pulse { 0% { box-shadow: 0 0 0 0 rgba(103,232,249,.48); } 70% { box-shadow: 0 0 0 .65rem rgba(103,232,249,0); } 100% { box-shadow: 0 0 0 0 rgba(103,232,249,0); } }
|
||||
@keyframes ha-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.ha-loading-hero p, .ha-scan-status p, .ha-loading-guide p { text-transform: none; letter-spacing: normal; }
|
||||
|
||||
/* In-progress scan banner — shown on the main page while the background scan
|
||||
* is still walking through session history, so the user sees continuous
|
||||
* progress (X / Y sessions · Z%) instead of guessing whether anything is
|
||||
* happening. Reuses .ha-scan-pulse + ha-pulse keyframes from the loading page.
|
||||
*/
|
||||
.ha-scan-banner { display: flex; flex-direction: column; gap: .6rem; border: 1px solid color-mix(in srgb, #67e8f9 35%, var(--color-border)); background: color-mix(in srgb, var(--color-card) 78%, transparent); padding: .8rem .95rem; animation: ha-fade-in .18s ease-out; }
|
||||
.ha-scan-banner-head { display: flex; align-items: center; gap: .8rem; }
|
||||
.ha-scan-banner-text strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono, ui-monospace, monospace); color: var(--color-foreground); }
|
||||
.ha-scan-banner-text p { margin: .25rem 0 0; font-size: .78rem; line-height: 1.35; color: var(--color-muted-foreground); text-transform: none; letter-spacing: normal; }
|
||||
.ha-scan-progress-track { height: .4rem; border: 1px solid color-mix(in srgb, #67e8f9 28%, var(--color-border)); background: rgba(0,0,0,.22); overflow: hidden; }
|
||||
.ha-scan-progress-fill { height: 100%; background: linear-gradient(90deg, #67e8f9, color-mix(in srgb, #67e8f9 48%, white)); transition: width .4s ease-out; }
|
||||
|
||||
/* Share achievement — trigger button on unlocked cards + modal dialog.
|
||||
* Added to the vendored bundle (on top of the upstream PCinkusz base).
|
||||
* Canvas rendering is pure client-side, no backend, no network.
|
||||
*/
|
||||
.ha-share-trigger { border: 1px solid color-mix(in srgb, var(--ha-tier) 58%, var(--color-border)); color: var(--ha-tier); background: color-mix(in srgb, var(--ha-tier) 8%, transparent); padding: .18rem .42rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono, ui-monospace, monospace); cursor: pointer; margin-top: .05rem; transition: background .12s ease, border-color .12s ease; }
|
||||
.ha-share-trigger:hover { background: color-mix(in srgb, var(--ha-tier) 20%, transparent); border-color: var(--ha-tier); }
|
||||
.ha-share-trigger:focus-visible { outline: 2px solid var(--ha-tier); outline-offset: 2px; }
|
||||
|
||||
.ha-share-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(4,6,10,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: ha-fade-in .14s ease-out; }
|
||||
.ha-share-dialog { width: min(760px, 100%); max-height: calc(100vh - 3rem); overflow: auto; border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-ring)); background: color-mix(in srgb, var(--color-card) 94%, #000); box-shadow: 0 24px 60px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: .9rem; padding: 1rem 1.1rem 1.1rem; }
|
||||
.ha-share-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
|
||||
.ha-share-head strong { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono, ui-monospace, monospace); color: var(--color-foreground); }
|
||||
.ha-share-close { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--color-border); background: transparent; color: var(--color-muted-foreground); font-size: 1.1rem; cursor: pointer; line-height: 1; }
|
||||
.ha-share-close:hover { color: var(--color-foreground); border-color: var(--color-ring); }
|
||||
.ha-share-preview { position: relative; border: 1px solid var(--color-border); background: #0b0d11; overflow: hidden; aspect-ratio: 1200 / 630; }
|
||||
.ha-share-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
|
||||
.ha-share-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted-foreground); font-family: var(--font-mono, ui-monospace, monospace); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; animation: ha-pulse 1.4s ease-in-out infinite; border-radius: 0; }
|
||||
.ha-share-error { border: 1px solid #ef4444; color: #fecaca; background: color-mix(in srgb, #ef4444 10%, transparent); padding: .55rem .7rem; font-size: .78rem; font-family: var(--font-mono, ui-monospace, monospace); }
|
||||
.ha-share-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
|
||||
.ha-share-btn { border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-card) 72%, transparent); color: var(--color-foreground); padding: .5rem .85rem; font-size: .82rem; font-family: var(--font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
|
||||
.ha-share-btn:hover:not(:disabled) { border-color: var(--color-ring); background: color-mix(in srgb, var(--color-primary) 16%, var(--color-card)); }
|
||||
.ha-share-btn:disabled { opacity: .5; cursor: not-allowed; }
|
||||
.ha-share-btn-primary { border-color: #ffffff; color: #ffffff; background: #000000; }
|
||||
.ha-share-btn-primary:hover:not(:disabled) { background: #1a1a1a; border-color: #67e8f9; color: #67e8f9; }
|
||||
.ha-share-hint { margin: 0; color: var(--color-muted-foreground); font-size: .76rem; line-height: 1.45; }
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "hermes-achievements",
|
||||
"label": "Achievements",
|
||||
"description": "Steam-style achievements for vibe coding and agentic Hermes workflows.",
|
||||
"icon": "Star",
|
||||
"version": "0.4.0",
|
||||
"tab": { "path": "/achievements", "position": "after:analytics" },
|
||||
"entry": "dist/index.js",
|
||||
"css": "dist/style.css",
|
||||
"api": "plugin_api.py"
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,171 @@
|
||||
import importlib.util
|
||||
import unittest
|
||||
from pathlib import Path
|
||||
|
||||
MODULE_PATH = Path(__file__).resolve().parents[1] / "dashboard" / "plugin_api.py"
|
||||
spec = importlib.util.spec_from_file_location("plugin_api", MODULE_PATH)
|
||||
plugin_api = importlib.util.module_from_spec(spec)
|
||||
spec.loader.exec_module(plugin_api)
|
||||
|
||||
|
||||
class AchievementEngineTests(unittest.TestCase):
|
||||
def test_tool_call_stats_detect_tool_names_and_errors(self):
|
||||
messages = [
|
||||
{"role": "assistant", "tool_calls": [{"function": {"name": "terminal"}}]},
|
||||
{"role": "tool", "tool_name": "terminal", "content": "Error: port 3000 already in use"},
|
||||
{"role": "assistant", "tool_calls": [{"function": {"name": "web_search"}}]},
|
||||
]
|
||||
|
||||
stats = plugin_api.analyze_messages("s1", "Fix dev server", messages)
|
||||
|
||||
self.assertEqual(stats["tool_call_count"], 2)
|
||||
self.assertEqual(stats["tool_names"], {"terminal", "web_search"})
|
||||
self.assertEqual(stats["error_count"], 1)
|
||||
self.assertIs(stats["port_conflict"], True)
|
||||
|
||||
def test_tiered_achievement_reaches_highest_matching_tier(self):
|
||||
definition = {
|
||||
"id": "let_him_cook",
|
||||
"threshold_metric": "max_tool_calls_in_session",
|
||||
"tiers": [
|
||||
{"name": "Copper", "threshold": 10},
|
||||
{"name": "Silver", "threshold": 25},
|
||||
{"name": "Gold", "threshold": 50},
|
||||
],
|
||||
}
|
||||
aggregate = {"max_tool_calls_in_session": 28}
|
||||
|
||||
result = plugin_api.evaluate_tiered(definition, aggregate)
|
||||
|
||||
self.assertIs(result["unlocked"], True)
|
||||
self.assertEqual(result["tier"], "Silver")
|
||||
self.assertEqual(result["progress"], 28)
|
||||
self.assertEqual(result["next_tier"], "Gold")
|
||||
|
||||
def test_tiered_achievement_can_be_discovered_without_unlocking(self):
|
||||
definition = {
|
||||
"id": "terminal_goblin",
|
||||
"threshold_metric": "total_terminal_calls",
|
||||
"tiers": [{"name": "Copper", "threshold": 50}],
|
||||
}
|
||||
aggregate = {"total_terminal_calls": 12}
|
||||
|
||||
result = plugin_api.evaluate_tiered(definition, aggregate)
|
||||
|
||||
self.assertIs(result["unlocked"], False)
|
||||
self.assertIs(result["discovered"], True)
|
||||
self.assertEqual(result["state"], "discovered")
|
||||
self.assertEqual(result["progress"], 12)
|
||||
self.assertEqual(result["next_threshold"], 50)
|
||||
|
||||
def test_secret_achievement_stays_hidden_without_progress(self):
|
||||
definition = {
|
||||
"id": "permission_denied_any_percent",
|
||||
"name": "Permission Denied Any%",
|
||||
"secret": True,
|
||||
"requirements": [{"metric": "permission_denied_events", "gte": 3}],
|
||||
}
|
||||
aggregate = {"permission_denied_events": 0}
|
||||
|
||||
result = plugin_api.evaluate_requirements(definition, aggregate)
|
||||
display = plugin_api.display_achievement({**definition, **result})
|
||||
|
||||
self.assertEqual(result["state"], "secret")
|
||||
self.assertEqual(display["name"], "???")
|
||||
self.assertNotIn("Permission", display["description"])
|
||||
|
||||
def test_multi_condition_unlock_requires_all_requirements(self):
|
||||
definition = {
|
||||
"id": "full_send",
|
||||
"requirements": [
|
||||
{"metric": "max_terminal_calls_in_session", "gte": 10},
|
||||
{"metric": "max_file_tool_calls_in_session", "gte": 5},
|
||||
{"metric": "max_web_calls_in_session", "gte": 2},
|
||||
],
|
||||
}
|
||||
|
||||
partial = plugin_api.evaluate_requirements(definition, {
|
||||
"max_terminal_calls_in_session": 12,
|
||||
"max_file_tool_calls_in_session": 2,
|
||||
"max_web_calls_in_session": 0,
|
||||
})
|
||||
complete = plugin_api.evaluate_requirements(definition, {
|
||||
"max_terminal_calls_in_session": 12,
|
||||
"max_file_tool_calls_in_session": 6,
|
||||
"max_web_calls_in_session": 2,
|
||||
})
|
||||
|
||||
self.assertEqual(partial["state"], "discovered")
|
||||
self.assertIs(partial["unlocked"], False)
|
||||
self.assertLess(partial["progress_pct"], 100)
|
||||
self.assertEqual(complete["state"], "unlocked")
|
||||
self.assertIs(complete["unlocked"], True)
|
||||
|
||||
def test_catalog_has_60_plus_unique_achievements(self):
|
||||
ids = [achievement["id"] for achievement in plugin_api.ACHIEVEMENTS]
|
||||
self.assertGreaterEqual(len(ids), 60)
|
||||
self.assertEqual(len(ids), len(set(ids)))
|
||||
|
||||
def test_model_provider_metrics_are_aggregated(self):
|
||||
sessions = [
|
||||
{"model_names": {"openai/gpt-5", "anthropic/claude-sonnet-4"}},
|
||||
{"model_names": {"google/gemini-pro", "mistral/large"}},
|
||||
{"model_names": {"qwen/qwen3"}},
|
||||
]
|
||||
|
||||
aggregate = plugin_api.aggregate_stats(sessions)
|
||||
|
||||
self.assertEqual(aggregate["distinct_model_count"], 5)
|
||||
self.assertEqual(aggregate["distinct_provider_count"], 5)
|
||||
result = plugin_api.evaluate_definition(
|
||||
next(a for a in plugin_api.ACHIEVEMENTS if a["id"] == "five_model_flight"),
|
||||
aggregate,
|
||||
)
|
||||
self.assertEqual(result["state"], "unlocked")
|
||||
self.assertEqual(result["tier"], "Copper")
|
||||
|
||||
def test_removed_noisy_achievements_are_not_in_catalog(self):
|
||||
ids = {achievement["id"] for achievement in plugin_api.ACHIEVEMENTS}
|
||||
self.assertNotIn("fallback_pilot", ids)
|
||||
self.assertNotIn("browser_sleuth", ids)
|
||||
self.assertNotIn("release_ritualist", ids)
|
||||
|
||||
def test_open_weights_pilgrim_counts_only_local_model_metadata(self):
|
||||
aggregate_mentions_only = plugin_api.aggregate_stats([
|
||||
{"model_names": {"openai/gpt-5"}, "local_model_events": 999},
|
||||
])
|
||||
aggregate_local_chat = plugin_api.aggregate_stats([
|
||||
{"model_names": {"openai/gpt-5"}},
|
||||
{"model_names": {"ollama/llama3"}},
|
||||
])
|
||||
definition = next(a for a in plugin_api.ACHIEVEMENTS if a["id"] == "open_weights_pilgrim")
|
||||
|
||||
self.assertEqual(aggregate_mentions_only["local_model_chat_sessions"], 0)
|
||||
self.assertEqual(plugin_api.evaluate_definition(definition, aggregate_mentions_only)["state"], "discovered")
|
||||
self.assertEqual(aggregate_local_chat["local_model_chat_sessions"], 1)
|
||||
self.assertEqual(plugin_api.evaluate_definition(definition, aggregate_local_chat)["state"], "unlocked")
|
||||
|
||||
def test_config_surgeon_ignores_generic_config_mentions(self):
|
||||
stats = plugin_api.analyze_messages("s1", "Config talk", [{"content": "config config configuration not configured"}])
|
||||
self.assertEqual(stats["config_events"], 0)
|
||||
stats = plugin_api.analyze_messages("s2", "Real config", [{"content": "edited config.yaml, manifest.json, and .env.local"}])
|
||||
self.assertGreaterEqual(stats["config_events"], 3)
|
||||
|
||||
def test_dashboard_card_hover_does_not_move_click_target(self):
|
||||
style_css = (
|
||||
Path(__file__).resolve().parents[1]
|
||||
/ "dashboard"
|
||||
/ "dist"
|
||||
/ "style.css"
|
||||
).read_text(encoding="utf-8")
|
||||
|
||||
hover_rule = next(
|
||||
line for line in style_css.splitlines() if line.startswith(".ha-card:hover")
|
||||
)
|
||||
self.assertNotIn("transform:", hover_rule)
|
||||
self.assertIn("border-color: var(--ha-tier)", hover_rule)
|
||||
self.assertIn("box-shadow:", hover_rule)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
Reference in new issue
Block a user