pi-deepseek-tariff 0.3.3 → 0.4.0

package/README.md

@@ -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.3
+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
@@ -70,6 +70,18 @@ Type `/dsp ` and press Tab: the arguments above are offered as completions, with
 
   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.
@@ -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.3 --no-git-tag-version     # or edit by hand
-git commit -am "chore: release 0.3.3"
+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.3 -m v0.3.3
+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.3' }
+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.3`. 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.3",
+  "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/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

@@ -8,11 +8,12 @@
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { parseColor } from "@earendil-works/pi-tui";
+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,
@@ -24,6 +25,7 @@ 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. */
@@ -32,8 +34,12 @@ 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. Fixed in every theme: it is the product colour, not a theme role. */
-const BRAND_BLUE = parseColor("#4175E6");
+/**
+ * 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 {
@@ -63,12 +69,31 @@ export function requestPricingText(entries: RequestPricing[], lang: Lang): strin
 }
 
 /**
- * Compact footer line: a state-coloured clock, the brand name in DeepSeek blue,
- * the tariff in English and the countdown in the theme accent — for example
- * "◷ deepseek OFF-PEAK → 11h 59m" or "◷ deepseek PEAK → 1h 40m".
+ * 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, so the line stays legible without a
- * separate status dot; the duration keeps the panel language units.
+ * 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;
@@ -76,12 +101,16 @@ 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 msLeft = next.getTime() - now.getTime();
+	const phase = countdownPhase(msLeft);
 	const state = peak ? "error" : "success";
-	const duration = humanize(next.getTime() - now.getTime(), lang);
-	const clock = theme.fg(state, CLOCK);
+	const incoming = peak ? "success" : "error";
+	const clock = theme.fg(phase.urgent ? "warning" : state, CLOCK);
 	const brand = theme.style(text.statusBrand, { fg: BRAND_BLUE });
-	const label = theme.fg(state, peak ? text.statusPeak : text.statusOffPeak);
-	return `${clock} ${brand} ${label} ${theme.fg("accent", text.statusFor(duration))}`;
+	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}`;
 }
 
 /**