pi-deepseek-tariff 0.3.2 → 0.4.0

package/README.md

@@ -10,7 +10,7 @@ A [pi](https://pi.dev) extension that shows the current **DeepSeek API tariff wi
 DeepSeek charges double during peak hours, so knowing the current window is worth real money.
 
 ```
-● DeepSeek Off-peak for 11h 59m          ← footer line, always visible
+◷ deepseek OFF-PEAK → 11h 59m          ← footer line, always visible
 
 Now OFF-PEAK
 Computer: 14:43:52 26-10-2026(MSK) | UTC: 2026-10-26 11:43
@@ -38,7 +38,7 @@ Commands: /dsp on|off|refresh|en|ru · /dsp footer on|off
 pi install npm:pi-deepseek-tariff
 
 # from git: tags mirror the npm versions, so pin whichever you want
-pi install git:github.com/valderan/pi-deepseek-tariff@v0.3.0
+pi install git:github.com/valderan/pi-deepseek-tariff@v0.4.0
 
 # local checkout, for development
 git clone git@github.com:valderan/pi-deepseek-tariff.git
@@ -66,14 +66,26 @@ Type `/dsp ` and press Tab: the arguments above are offered as completions, with
 
 ## What it does
 
-- **Footer line** — one compact status line: `● DeepSeek Off-peak for 11h 59m`, or `● DeepSeek Peak for 1h 40m` during peak. The text is always yellow and only the dot changes colour — green for off-peak, red for peak. Shown only while a DeepSeek model is active; `/dsp footer off` hides it for good.
+- **Footer line** — one compact status line: `◷ deepseek OFF-PEAK → 11h 59m`, or `◷ deepseek PEAK → 1h 40m` during peak. The clock glyph leads the line and takes the state colour — green for off-peak, red for peak — and the tariff word next to it is coloured the same way. The brand is written lowercase in DeepSeek blue (`#4175E6`), the countdown uses the theme accent. Shown only while a DeepSeek model is active; `/dsp footer off` hides it for good.
 
-  Russian looks like `● DeepSeek Обычный ещё 11ч 59м` / `● DeepSeek Пиковый ещё 1ч 40м`.
+  The tariff is spelled `PEAK` / `OFF-PEAK` in English regardless of the panel language; only the countdown units are localized, so Russian reads `◷ deepseek OFF-PEAK → 11ч 59м`.
+
+  The line escalates as the switch approaches — clock and countdown first, then the tariff word itself:
+
+  | Left to the switch | Clock + countdown | Tariff word |
+  |---|---|---|
+  | more than 15 min | state colour / accent | whole word in the state colour |
+  | below 15 min | **yellow** (`warning`) | unchanged |
+  | counter shows `4m` / `3m` / `2m` / `1m` / `0m` | yellow | last **1 / 2 / 3 / 3 / 4** letters take the incoming colour, the rest dims |
+
+  So the word is eaten from the end, one letter per minute of the visible countdown: `OFF-PEA` + `K`, then `OFF-PE` + `AK`, … up to `OFF-` + `PEAK` in the final seconds. The tail is **red** when PEAK is about to start and **green** when off-peak is about to start, and the tick drops to 1 s during the last five minutes so each step lands on the minute.
+
+  ![Countdown states: every step of the footer for both switches, in English and Russian](https://raw.githubusercontent.com/valderan/pi-deepseek-tariff/main/assets/footer-states.png)
 
   Pi renders every extension status on a single footer line, joined alphabetically, so the segment is kept short.
 - **Peak rules** — DeepSeek defines peak as `01:00-04:00` and `06:00-10:00` **UTC, Monday to Friday**; weekends and Chinese public holidays are off-peak all day.
 - **Local time everywhere** — the UTC clock comes from the machine clock, so peak windows, weekday labels and countdowns are rendered in *your* zone (`(MSK)`, `(UTC-04:00)`, …). Weekday labels shift with the zone: at UTC−4 the windows land on Sun–Thu.
-- **Prices** — parsed from `api-docs.deepseek.com/quick_start/pricing/`: cache hit, cache miss and output per model, plus the Search & Fetch request rates. The tariff in effect is highlighted.
+- **Prices** — parsed from `api-docs.deepseek.com/quick_start/pricing/`: cache hit, cache miss and output per model, plus the Search & Fetch request rates. The tariff in effect is highlighted, and the `DeepSeek` word in the `DeepSeek prices:` label keeps the same brand blue as the footer.
 - **Caching** — the page is parsed at most once per `pricingTtlHours` (default 6), and the result is cached on disk, so restarts stay offline. `PI_OFFLINE` disables network access entirely and the panel falls back to built-in values.
 
 ## Configuration
@@ -96,7 +108,7 @@ Type `/dsp ` and press Tab: the arguments above are offered as completions, with
 | Key | Default | Meaning |
 |---|---|---|
 | `language` | pi's `settings.json` language, else `en` | `"en"` or `"ru"` |
-| `intervalMs` | `30000` | minimum refresh cadence (clamped to ≥ 5000) |
+| `intervalMs` | `30000` | repaint cadence (clamped to ≥ 5000); the footer switches to a 1 s tick by itself in the last five minutes before a switch |
 | `pricingTtlHours` | `6` | how long parsed prices stay valid |
 | `alwaysShow` | `false` | show the footer line for non-DeepSeek models too |
 | `footer` | `true` | show the footer status line at all; `/dsp footer off` writes this |
@@ -136,11 +148,11 @@ the commit whose `package.json` says `X.Y.Z`, and npm publishes that same versio
 
 ```bash
 # 1. bump package.json, add a CHANGELOG entry, commit
-npm version 0.3.2 --no-git-tag-version     # or edit by hand
-git commit -am "chore: release 0.3.2"
+npm version 0.4.0 --no-git-tag-version     # or edit by hand
+git commit -am "chore: release 0.4.0"
 
 # 2. tag the release commit and push
-git tag -a v0.3.2 -m v0.3.2
+git tag -a v0.4.0 -m v0.4.0
 git push origin main --tags
 
 # 3. publish the tag to npm (2FA prompt, or --otp=123456)
@@ -151,7 +163,7 @@ npm publish --access public
 Check the result:
 
 ```bash
-npm view pi-deepseek-tariff dist-tags    # { latest: '0.3.2' }
+npm view pi-deepseek-tariff dist-tags    # { latest: '0.4.0' }
 npm view pi-deepseek-tariff versions
 ```
 
@@ -159,7 +171,7 @@ npm view pi-deepseek-tariff versions
 `NPM_TOKEN` secret is configured; with trusted publishing enabled on npmjs.com the
 token is not needed at all and the build is signed with provenance.
 
-Tags are pinnable with `pi install git:…@v0.3.2`. Published versions show up in the
+Tags are pinnable with `pi install git:…@v0.4.0`. Published versions show up in the
 [pi package gallery](https://pi.dev/packages) through the `pi-package` keyword.
 
 ## Changelog

package/extensions/deepseek-peak.ts

@@ -14,15 +14,22 @@ import type { ExtensionAPI, ExtensionCommandContext, ExtensionContext, Theme } f
 import { loadConfig, PRICING_CACHE, saveConfig, type Config } from "../src/config.ts";
 import { STRINGS, type Lang } from "../src/i18n.ts";
 import { createPricingStore, isOffline, type Pricing } from "../src/pricing.ts";
+import { nextTransition } from "../src/rules.ts";
 import { SEPARATOR, panelLines, statusText } from "../src/view.ts";
 
 const STATUS_KEY = "deepseek-peak";
 const WIDGET_KEY = "deepseek-peak";
 
+/** Tick used while the footer counts down the last minutes before a switch. */
+const FAST_TICK_MS = 1_000;
+
+/** The footer changes every minute below this gap, so it needs the fast tick. */
+const FAST_WINDOW_MS = 5 * 60_000;
+
 export default function deepseekPeak(pi: ExtensionAPI) {
 	let config = loadConfig();
 	let lang: Lang = config.language ?? "en";
-	let timer: ReturnType<typeof setInterval> | undefined;
+	let timer: ReturnType<typeof setTimeout> | undefined;
 	let panelVisible = false;
 
 	const pricing = createPricingStore({
@@ -80,21 +87,36 @@ export default function deepseekPeak(pi: ExtensionAPI) {
 	};
 
 	const stop = () => {
-		if (timer !== undefined) clearInterval(timer);
+		if (timer !== undefined) clearTimeout(timer);
 		timer = undefined;
 	};
 
+	/**
+	 * Normally the footer only needs `intervalMs`, but in the last five minutes the
+	 * countdown word changes every minute, so poll faster to land on the boundary.
+	 */
+	const nextDelay = () => {
+		const msLeft = nextTransition(new Date(), config.holidays).getTime() - Date.now();
+		return msLeft < FAST_WINDOW_MS ? Math.min(FAST_TICK_MS, config.intervalMs) : config.intervalMs;
+	};
+
 	const start = (ctx: ExtensionContext) => {
 		stop();
 		render(ctx);
-		timer = setInterval(() => {
-			// Only hits the network when the TTL expired.
-			if (!pricing.expired()) {
-				render(ctx);
-				return;
-			}
-			void pricing.refresh().then((value) => render(ctx, value));
-		}, config.intervalMs);
+
+		// A self-rescheduling timeout instead of an interval: the cadence follows the countdown.
+		const schedule = () => {
+			timer = setTimeout(() => {
+				const paint = (value?: Pricing) => {
+					render(ctx, value);
+					schedule();
+				};
+				// Only hits the network when the TTL expired.
+				if (pricing.expired()) void pricing.refresh().then(paint);
+				else paint();
+			}, nextDelay());
+		};
+		schedule();
 	};
 
 	pi.on("session_start", async (_event, ctx) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-deepseek-tariff",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "DeepSeek peak/off-peak tariff panel for pi: local clock, next window, live per-model prices and Search & Fetch rates",
   "keywords": [
     "pi-package",

package/src/i18n.ts

@@ -23,6 +23,8 @@ type Strings = {
 	nextIn: (duration: string) => string;
 	and: string;
 	prices: string;
+	/** The product name inside `prices`, rendered in the DeepSeek blue instead of the label token. */
+	pricesBrand: string;
 	pricesState: (state: string) => string;
 	activeModel: string;
 	peakWindows: (zone: string) => string;
@@ -34,6 +36,7 @@ type Strings = {
 	sourceBuiltin: string;
 	requestPricing: string;
 	commands: string;
+	/** Footer line — the state is always written in English (PEAK / OFF-PEAK), in every language. */
 	statusBrand: string;
 	statusPeak: string;
 	statusOffPeak: string;
@@ -53,6 +56,7 @@ export const STRINGS: Record<Lang, Strings> = {
 		nextIn: (duration) => `in ${duration}`,
 		and: "and",
 		prices: "DeepSeek prices:",
+		pricesBrand: "DeepSeek",
 		pricesState: (state) => `$ per 1M tokens, active: ${state}`,
 		activeModel: "← active",
 		peakWindows: (zone) => `Peak windows (${zone}):`,
@@ -64,10 +68,10 @@ export const STRINGS: Record<Lang, Strings> = {
 		sourceBuiltin: "built-in values (page unavailable)",
 		requestPricing: "Search & Fetch:",
 		commands: "Commands:",
-		statusBrand: "DeepSeek",
-		statusPeak: "Peak",
-		statusOffPeak: "Off-peak",
-		statusFor: (duration) => `for ${duration}`,
+		statusBrand: "deepseek",
+		statusPeak: "PEAK",
+		statusOffPeak: "OFF-PEAK",
+		statusFor: (duration) => `\u2192 ${duration}`,
 		locale: "en-GB",
 		hourUnit: "h",
 		minuteUnit: "m",
@@ -81,6 +85,7 @@ export const STRINGS: Record<Lang, Strings> = {
 		nextIn: (duration) => `через ${duration}`,
 		and: "и",
 		prices: "Цены DeepSeek:",
+		pricesBrand: "DeepSeek",
 		pricesState: (state) => `$ за 1M токенов, активен ${state}`,
 		activeModel: "← активна",
 		peakWindows: (zone) => `Окна peak (${zone}):`,
@@ -92,10 +97,10 @@ export const STRINGS: Record<Lang, Strings> = {
 		sourceBuiltin: "встроенные значения (страница недоступна)",
 		requestPricing: "Search & Fetch:",
 		commands: "Команды:",
-		statusBrand: "DeepSeek",
-		statusPeak: "Пиковый",
-		statusOffPeak: "Обычный",
-		statusFor: (duration) => `ещё ${duration}`,
+		statusBrand: "deepseek",
+		statusPeak: "PEAK",
+		statusOffPeak: "OFF-PEAK",
+		statusFor: (duration) => `\u2192 ${duration}`,
 		locale: "ru-RU",
 		hourUnit: "ч",
 		minuteUnit: "м",

package/src/rules.ts

@@ -111,8 +111,12 @@ export function clockTime(date: Date, lang: Lang): string {
 	return date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
 }
 
+export function countdownMinutes(ms: number): number {
+	return Math.max(0, Math.round(ms / 60_000));
+}
+
 export function humanize(ms: number, lang: Lang = "en"): string {
-	const minutes = Math.max(0, Math.round(ms / 60_000));
+	const minutes = countdownMinutes(ms);
 	const hourUnit = lang === "ru" ? "ч" : "h";
 	const minuteUnit = lang === "ru" ? "м" : "m";
 	if (minutes < 60) return `${minutes}${minuteUnit}`;
@@ -121,6 +125,44 @@ export function humanize(ms: number, lang: Lang = "en"): string {
 	return rest === 0 ? `${hours}${hourUnit}` : `${hours}${hourUnit} ${rest}${minuteUnit}`;
 }
 
+export type CountdownPhase = {
+	/** Minutes the counter shows, so the animation can follow the visible number. */
+	minutes: number;
+	/** Less than 15 minutes to the switch: the clock and the countdown turn yellow. */
+	urgent: boolean;
+	/** Trailing letters of the tariff word painted in the incoming colour (0..4). */
+	swallowed: number;
+};
+
+/** Yellow warning starts below this gap to the next switch. */
+export const URGENT_MS = 15 * 60_000;
+
+/** A four-letter tail is all the animation ever covers, so `PEAK` is eaten whole. */
+export const MAX_SWALLOWED = 4;
+
+/**
+ * Letters of the four-letter tail already painted in the incoming colour, keyed by
+ * the minute the counter shows. `1` repeats the `2` step, and the whole tail goes
+ * only when the counter drops to `0` in the last seconds.
+ */
+const SWALLOWED_BY_MINUTES: Readonly<Record<number, number>> = { 0: 4, 1: 3, 2: 3, 3: 2, 4: 1 };
+
+/**
+ * How close the next switch is, expressed as what the footer should paint.
+ *
+ * The step follows the *displayed* countdown (`4м` → one letter, `3м` → two, …),
+ * so the colours change exactly when the number changes instead of up to a
+ * minute earlier.
+ */
+export function countdownPhase(msLeft: number): CountdownPhase {
+	const minutes = countdownMinutes(msLeft);
+	return {
+		minutes,
+		urgent: msLeft < URGENT_MS,
+		swallowed: minutes >= 5 ? 0 : (SWALLOWED_BY_MINUTES[minutes] ?? 0),
+	};
+}
+
 /** Local wall-clock time of a UTC hour on the machine's current date. */
 export function localClock(date: Date, utcHour: number): string {
 	const instant = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), utcHour, 0, 0));

package/src/view.ts

@@ -1,15 +1,19 @@
 /**
  * Presentation: the footer status line and the panel body.
  *
- * Colors follow the pi theme: labels in the warning token, values in the text
- * token, active rows bold, inactive rows dim.
+ * Colors follow the pi theme: the footer clock and the tariff word share the
+ * state token (green off-peak, red peak), the countdown uses the accent token,
+ * and only the brand keeps a fixed colour. The panel below the editor keeps the
+ * warning/text pairing.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Color } from "@earendil-works/pi-tui";
 import type { Config } from "./config.ts";
 import { localizeUnit, STRINGS, type Lang } from "./i18n.ts";
 import type { Pricing, RequestPricing } from "./pricing.ts";
 import {
+	countdownPhase,
 	dayRangeLabel,
 	humanize,
 	isHoliday,
@@ -21,11 +25,22 @@ import {
 	PEAK_WINDOWS_UTC,
 	tzLabel,
 	utcStamp,
+	type CountdownPhase,
 } from "./rules.ts";
 
 /** Placeholder for a full-width rule; the renderer expands it to the panel width. */
 export const SEPARATOR = "\u0000rule";
 
+/** Footer clock: one cell wide, so the segment stays short on the shared status line. */
+const CLOCK = "\u25F7"; // ◷
+
+/**
+ * DeepSeek brand blue (#4175E6). Fixed in every theme: it is the product colour, not a
+ * theme role. Written as a plain `Color` literal rather than `parseColor("#4175E6")`, so
+ * this module keeps zero runtime imports — the test job runs without `npm install`.
+ */
+const BRAND_BLUE: Color = { kind: "rgb", r: 0x41, g: 0x75, b: 0xe6 };
+
 /** "Search & Fetch" value: a shared price is printed once. */
 export function requestPricingText(entries: RequestPricing[], lang: Lang): string | undefined {
 	if (entries.length === 0) return undefined;
@@ -54,9 +69,31 @@ export function requestPricingText(entries: RequestPricing[], lang: Lang): strin
 }
 
 /**
- * Compact footer line: a coloured dot plus always-yellow text, for example
- * "● DeepSeek Off-peak for 11h 59m" or "● DeepSeek Peak for 1h 40m".
- * Only the dot changes colour, so the line reads calmly in both states.
+ * The tariff word with its tail painted as the switch approaches: the letters the
+ * feed already consumed go dim and the last up to four take the colour of the tariff
+ * that is about to start (red towards PEAK, green towards OFF-PEAK).
+ */
+function tariffWord(
+	theme: Theme,
+	word: string,
+	current: "success" | "error",
+	incoming: "success" | "error",
+	phase: CountdownPhase,
+): string {
+	if (phase.swallowed <= 0) return theme.fg(current, word);
+	const cut = Math.max(0, word.length - phase.swallowed);
+	const head = cut > 0 ? theme.fg("dim", word.slice(0, cut)) : "";
+	return `${head}${theme.fg(incoming, word.slice(cut))}`;
+}
+
+/**
+ * Compact footer line: a clock, the brand in DeepSeek blue, the tariff word and
+ * the countdown — for example "◷ deepseek OFF-PEAK → 11h 59m".
+ *
+ * The clock carries the state colour (green off-peak, red peak). Below 15 minutes
+ * to the next switch both the clock and the countdown turn yellow, and in the last
+ * four minutes the tariff word is eaten from the end, one letter per minute shown
+ * by the counter. The duration keeps the panel language units.
  */
 export function statusText(theme: Theme, config: Config, lang: Lang, pricing: Pricing): string {
 	void pricing;
@@ -64,10 +101,29 @@ export function statusText(theme: Theme, config: Config, lang: Lang, pricing: Pr
 	const now = new Date();
 	const peak = isPeak(now, config.holidays);
 	const next = nextTransition(now, config.holidays);
-	const dot = theme.fg(peak ? "error" : "success", "●");
-	const label = peak ? text.statusPeak : text.statusOffPeak;
-	const duration = humanize(next.getTime() - now.getTime(), lang);
-	return `${dot} ${theme.fg("warning", `${text.statusBrand} ${label} ${text.statusFor(duration)}`)}`;
+	const msLeft = next.getTime() - now.getTime();
+	const phase = countdownPhase(msLeft);
+	const state = peak ? "error" : "success";
+	const incoming = peak ? "success" : "error";
+	const clock = theme.fg(phase.urgent ? "warning" : state, CLOCK);
+	const brand = theme.style(text.statusBrand, { fg: BRAND_BLUE });
+	const word = peak ? text.statusPeak : text.statusOffPeak;
+	const label = tariffWord(theme, word, state, incoming, phase);
+	const countdown = theme.fg(phase.urgent ? "warning" : "accent", text.statusFor(humanize(msLeft, lang)));
+	return `${clock} ${brand} ${label} ${countdown}`;
+}
+
+/**
+ * Colour the product name inside a panel label without splitting the string in
+ * i18n: the label stays one translatable line, only the brand word is swapped to
+ * the DeepSeek blue. Falls back to `rest(label)` when the name is missing.
+ */
+function brandLabel(theme: Theme, label: string, brand: string, rest: (value: string) => string): string {
+	const at = label.indexOf(brand);
+	if (at < 0) return rest(label);
+	const head = rest(label.slice(0, at));
+	const tail = rest(label.slice(at + brand.length));
+	return `${head}${theme.style(brand, { fg: BRAND_BLUE })}${tail}`;
 }
 
 export function panelLines(
@@ -111,7 +167,7 @@ export function panelLines(
 	);
 
 	// 4. Model prices with the active tariff highlighted.
-	lines.push(`${yellow(text.prices)} ${white(text.pricesState(state))}`);
+	lines.push(`${brandLabel(theme, text.prices, text.pricesBrand, yellow)} ${white(text.pricesState(state))}`);
 	const value = (amount: number) => amount.toFixed(4).padStart(8);
 	for (const [name, model] of Object.entries(pricing.models)) {
 		const id = `${config.providerPrefix}${name}`;