@javierfrancoleal/deepseek-prices 1.0.3 → 1.0.5

package/README.md

@@ -18,6 +18,8 @@ temps réel :
 - **Le compte à rebours** jusqu'au prochain changement de tarif, avec l'heure locale
   du basculement.
 - **La date de vérification** des prix (survol de la barre).
+- **L'idiome et le thème** : la barre suit la langue sélectionnée dans DeepSeek
+  Harness (anglais / chinois) et les jetons de thème `--dsw-*` (clair / sombre).
 
 ---
 
@@ -91,6 +93,9 @@ des prix, la compare à la grille embarquée, et ajoute un enregistrement JSONL
 
 La barre affiche la date de vérification embarquée au survol.
 
+Un **rappel de vérification** quotidien (via l'agenda de DeepSeek Harness) rappelle
+de contrôler ce registre et de mettre à jour les prix embarqués en cas de dérive.
+
 ---
 
 ## Configuration / limites

package/lib/client.js

@@ -6,24 +6,20 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		const React = require("react");
 
-		// ── styles ────────────────────────────────────────────────────────────────
+		// ── styles (DeepSeek Harness design tokens; theme-aware) ────────────────
 		const CSS = [
-			".Jfdp_bar{box-sizing:border-box;width:100%;height:34px;display:flex;align-items:center;gap:14px;padding:0 16px;border-top:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.2));background:var(--dsw-specific-menu, rgba(0,0,0,.04));color:var(--dsw-alias-label-secondary, #666);font-size:12px;line-height:1;font-family:var(--dsh-font-family-body, inherit);overflow:hidden;white-space:nowrap}",
-			".Jfdp_bar[data-tariff='peak']{background:linear-gradient(90deg, rgba(229,72,77,.10), var(--dsw-specific-menu, rgba(0,0,0,.04))) }",
-			".Jfdp_bar[data-tariff='offpeak']{background:linear-gradient(90deg, rgba(48,164,108,.10), var(--dsw-specific-menu, rgba(0,0,0,.04))) }",
-			".Jfdp_dot{width:9px;height:9px;border-radius:50%;flex:none;background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.15)}",
-			".Jfdp_bar[data-tariff='offpeak'] .Jfdp_dot{background:#30a46c;box-shadow:0 0 0 3px rgba(48,164,108,.15)}",
-			".Jfdp_status{flex:none;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--dsw-alias-label-primary, #111)}",
-			".Jfdp_bar[data-tariff='peak'] .Jfdp_status{color:#e5484d}",
-			".Jfdp_bar[data-tariff='offpeak'] .Jfdp_status{color:#30a46c}",
+			".Jfdp_bar{box-sizing:border-box;width:100%;height:34px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--dsw-specific-menu);border-top:1px solid var(--dsw-alias-border-l1);backdrop-filter:var(--dsw-menu-backdrop-filter);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1;overflow:hidden;white-space:nowrap}",
+			".Jfdp_dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--dsw-alias-state-warn-primary)}",
+			".Jfdp_bar[data-tariff='offpeak'] .Jfdp_dot{background:var(--dsw-alias-state-success-primary)}",
+			".Jfdp_status{flex:none;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--dsw-alias-state-warn-primary)}",
+			".Jfdp_bar[data-tariff='offpeak'] .Jfdp_status{color:var(--dsw-alias-state-success-primary)}",
 			".Jfdp_model{display:inline-flex;align-items:baseline;gap:6px;flex:none}",
-			".Jfdp_modelName{font-weight:600;color:var(--dsw-alias-label-primary, #111)}",
-			".Jfdp_price{font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary, #555)}",
+			".Jfdp_modelName{font-weight:600;color:var(--dsw-alias-label-primary)}",
+			".Jfdp_price{font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary)}",
 			".Jfdp_arrow{opacity:.55}",
 			".Jfdp_spacer{flex:1}",
-			".Jfdp_clock{flex:none;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-tertiary, #888)}",
-			".Jfdp_countdown{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-primary, #111)}",
-			".Jfdp_countdown b{color:var(--dsw-alias-label-secondary, #555);font-weight:600}",
+			".Jfdp_clock{flex:none;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-tertiary)}",
+			".Jfdp_countdown{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-primary)}",
 			".Jfdp_hideSmall{flex:none}",
 			"@media (max-width:900px){.Jfdp_bar{gap:8px;padding:0 10px}.Jfdp_hideSmall{display:none}}"
 		].join("\n");
@@ -108,35 +104,63 @@ window.__ModuleLoader__.load({
 				return "--:--";
 			}
 		}
-		function fmtDuration(ms) {
+		function fmtDuration(ms, t) {
 			let s = Math.max(0, Math.floor(ms / 1000));
 			const h = Math.floor(s / 3600);
 			const m = Math.floor((s % 3600) / 60);
 			const sec = s % 60;
-			if (h > 0) return h + "h " + m + "m " + sec + "s";
-			if (m > 0) return m + "m " + sec + "s";
-			return sec + "s";
+			if (h > 0) return h + t("unit.h") + " " + m + t("unit.m") + " " + sec + t("unit.s");
+			if (m > 0) return m + t("unit.m") + " " + sec + t("unit.s");
+			return sec + t("unit.s");
 		}
 		function fmtPrice(n) {
 			if (n < 0.01) return "$" + n.toFixed(3);
 			return "$" + n.toFixed(2);
 		}
 
-		const LANGS = {
-			en: { peak: "PEAK", offPeak: "OFF-PEAK", to: "to", utc: "UTC", quebec: "Quebec", changes: "changes to", in: "in", next: "next" },
-			fr: { peak: "POINTE", offPeak: "HORS POINTE", to: "à", utc: "UTC", quebec: "Québec", changes: "passe à", in: "dans", next: "prochaine" },
-			es: { peak: "PICO", offPeak: "VALLE", to: "a", utc: "UTC", quebec: "Québec", changes: "cambia a", in: "en", next: "próximo" }
+		// ── i18n namespace (follows the language selected in DeepSeek Harness) ──
+		const NS = "deepseekPrices";
+		const zh = {
+			"status.peak": "高峰",
+			"status.offPeak": "错峰",
+			"clock.utc": "UTC",
+			"clock.quebec": "魁北克",
+			"countdown.changesTo": "切换至",
+			"countdown.in": "于",
+			"unit.h": "时",
+			"unit.m": "分",
+			"unit.s": "秒",
+			"tooltip.title": "DeepSeek 令牌价格（美元 / 100 万令牌）",
+			"tooltip.input": "输入",
+			"tooltip.output": "输出",
+			"tooltip.hit": "命中",
+			"tooltip.peakHours": "高峰：01:00–04:00 与 06:00–10:00 UTC（周一至周五，不含中国法定节假日）",
+			"tooltip.offPeakRule": "错峰：其余时间（5 折）",
+			"tooltip.source": "来源",
+			"tooltip.verified": "核实日期"
+		};
+		const en = {
+			"status.peak": "PEAK",
+			"status.offPeak": "OFF-PEAK",
+			"clock.utc": "UTC",
+			"clock.quebec": "Quebec",
+			"countdown.changesTo": "changes to",
+			"countdown.in": "in",
+			"unit.h": "h",
+			"unit.m": "m",
+			"unit.s": "s",
+			"tooltip.title": "DeepSeek token prices (USD / 1M tokens)",
+			"tooltip.input": "in",
+			"tooltip.output": "out",
+			"tooltip.hit": "hit",
+			"tooltip.peakHours": "Peak: 01:00–04:00 & 06:00–10:00 UTC (Mon–Fri, excl. CN holidays)",
+			"tooltip.offPeakRule": "Off-peak: all other hours (50% off)",
+			"tooltip.source": "Source",
+			"tooltip.verified": "Verified"
 		};
-		function pickLang() {
-			try {
-				const l = (navigator.language || "").toLowerCase();
-				if (l.indexOf("fr") === 0) return "fr";
-				if (l.indexOf("en") === 0) return "en";
-			} catch (e) { /* ignore */ }
-			return "es";
-		}
 
-		function PriceBar() {
+		function PriceBar(_props) {
+			const t = _props && typeof _props.t === "function" ? _props.t : function (k) { return k; };
 			const [now, setNow] = React.useState(function () { return new Date(); });
 			React.useEffect(function () {
 				const id = setInterval(function () { setNow(new Date()); }, 1000);
@@ -145,12 +169,10 @@ window.__ModuleLoader__.load({
 
 			const peak = isPeak(now);
 			const next = nextTransition(now);
-			const lang = pickLang();
-			const t = LANGS[lang] || LANGS.es;
 			const tariff = peak ? "peak" : "offpeak";
-			const statusLabel = peak ? t.peak : t.offPeak;
-			const nextLabel = next ? (isPeak(next) ? t.peak : t.offPeak) : "";
-			const remaining = next ? fmtDuration(next.getTime() - now.getTime()) : "—";
+			const statusLabel = peak ? t("status.peak") : t("status.offPeak");
+			const nextLabel = next ? (isPeak(next) ? t("status.peak") : t("status.offPeak")) : "";
+			const remaining = next ? fmtDuration(next.getTime() - now.getTime(), t) : "—";
 
 			const modelRows = Object.keys(PRICING.models).map(function (key) {
 				const m = PRICING.models[key];
@@ -166,18 +188,18 @@ window.__ModuleLoader__.load({
 				);
 			});
 
-			// Full-detail tooltip (cache hit + cache miss + output, peak & off-peak).
 			const detail = Object.keys(PRICING.models).map(function (key) {
 				const m = PRICING.models[key];
-				return m.label + " — " + t.peak + ": in " + fmtPrice(m.inputCacheMiss.peak)
-					+ " (hit " + fmtPrice(m.inputCacheHit.peak) + ") / out " + fmtPrice(m.output.peak)
-					+ "  ·  " + t.offPeak + ": in " + fmtPrice(m.inputCacheMiss.offPeak)
-					+ " (hit " + fmtPrice(m.inputCacheHit.offPeak) + ") / out " + fmtPrice(m.output.offPeak);
+				return m.label + " — " + t("status.peak") + ": " + t("tooltip.input") + " " + fmtPrice(m.inputCacheMiss.peak)
+					+ " (" + t("tooltip.hit") + " " + fmtPrice(m.inputCacheHit.peak) + ") / " + t("tooltip.output") + " " + fmtPrice(m.output.peak)
+					+ "  ·  " + t("status.offPeak") + ": " + t("tooltip.input") + " " + fmtPrice(m.inputCacheMiss.offPeak)
+					+ " (" + t("tooltip.hit") + " " + fmtPrice(m.inputCacheHit.offPeak) + ") / " + t("tooltip.output") + " " + fmtPrice(m.output.offPeak);
 			}).join("\n");
-			const title = "DeepSeek token prices (USD / 1M)\n" + detail
-				+ "\n\n" + t.peak + ": 01:00–04:00 & 06:00–10:00 UTC (Mon–Fri, excl. CN holidays)"
-				+ "\n" + t.offPeak + ": all other hours (50% off)"
-				+ "\nSource: " + PRICING.source + "\nVerified: " + PRICING.verifiedAt;
+			const title = t("tooltip.title") + "\n" + detail
+				+ "\n\n" + t("tooltip.peakHours")
+				+ "\n" + t("tooltip.offPeakRule")
+				+ "\n" + t("tooltip.source") + ": " + PRICING.source
+				+ "\n" + t("tooltip.verified") + ": " + PRICING.verifiedAt;
 
 			return React.createElement("div", {
 				className: "Jfdp_bar",
@@ -190,21 +212,25 @@ window.__ModuleLoader__.load({
 				React.createElement("span", { className: "Jfdp_hideSmall" }, "·"),
 				modelRows,
 				React.createElement("span", { className: "Jfdp_spacer" }),
-				React.createElement("span", { className: "Jfdp_clock" }, t.utc + " " + fmtClock(now, "UTC")),
-				React.createElement("span", { className: "Jfdp_clock Jfdp_hideSmall" }, t.quebec + " " + fmtClock(now, "America/Toronto")),
+				React.createElement("span", { className: "Jfdp_clock" }, t("clock.utc") + " " + fmtClock(now, "UTC")),
+				React.createElement("span", { className: "Jfdp_clock Jfdp_hideSmall" }, t("clock.quebec") + " " + fmtClock(now, "America/Toronto")),
 				React.createElement("span", { className: "Jfdp_countdown" },
-					next ? (t.changes + " " + nextLabel + " " + t.in + " " + remaining + " · " + fmtClock(next, "America/Toronto") + " " + t.quebec) : ""
+					next ? (t("countdown.changesTo") + " " + nextLabel + " " + t("countdown.in") + " " + remaining + " · " + fmtClock(next, "America/Toronto") + " " + t("clock.quebec")) : ""
 				)
 			);
 		}
 
-		const inject = ["slots"];
+		const inject = ["slots", "locale"];
 		function apply(ctx) {
+			ctx.effect(function () {
+				return ctx.locale.register(NS, { zh, en });
+			}, "deepseek-prices: locale dictionaries");
 			ctx.slots.inject("shell.bottom", function () {
 				return ctx.slots.register({
 					name: "shell.bottom",
 					id: "jfranco-deepseek-prices",
-					order: 0
+					order: 0,
+					locale: NS
 				}, PriceBar);
 			});
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@javierfrancoleal/deepseek-prices",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Live DeepSeek API token price bar for the web GUI: peak/off-peak tariff, UTC + local (Quebec) clocks, countdown to the next tariff change, and a daily self-verification against the official DeepSeek pricing page.",
   "author": "J.Franco",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "client": {
       "platform": "web",
       "inject": [
+        "@deepseek-ai/dsh-client-locale",
         "@deepseek-ai/dsh-client-ui-layout"
       ]
     }