feat(pricing): make introductory rates editable in Settings

Users could edit a model's standard rates but not its time-limited
introductory (promo) rates — those were display-only, so the Sonnet 5
intro pricing could only be changed by editing seed code. Since intro
promos are not a one-off (any future model launch may ship one), make the
whole mechanism editable and generic.

Backend
- New setIntroPricing prepared statement updates ONLY the intro_* columns,
  kept separate from upsertPricing so a standard-rate edit never touches
  the promo and vice versa.
- PUT /api/pricing now accepts optional intro_input/output/cache_* and
  intro_until. It only writes intro columns when the caller sends at least
  one intro field, so older clients that PUT just the standard rates
  preserve any existing promo (backward compatible). intro_until is
  validated as YYYY-MM-DD; an empty value clears the promo and zeroes the
  intro rates (so a re-added date can't resurrect stale values). Both
  writes run in one transaction.

Frontend (Settings → Model Pricing)
- The edit/add form gains a second row: an "Introductory rates" box with a
  cutoff-date field plus intro input/output/cache-read/cache-write(5m/1h)
  inputs. Empty date = no promo. Client mirrors the YYYY-MM-DD validation.
- The display row now shows the intro subline on every rate column (was
  input/output only) so all editable intro values are visible.

Nothing here is Sonnet-5-specific: the date-driven promo window works for
any model pattern, so a future launch promo needs no code change — just an
edit in the UI. Adds a server route test covering persist / preserve /
clear / reject-malformed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: hoangsonww

client/src/i18n/locales/en/settings.json

@@ -14,6 +14,10 @@
     "title": "Model Pricing",
     "description": "Rates per million tokens (USD). Use % as wildcard in patterns. Some models have a time-limited introductory rate (shown in violet); usage on or before its cutoff date is billed at that rate, and usage after it at the standard rate.",
     "introNote": "Intro ${{input}}/${{output}} through {{until}}",
+    "introRatesTitle": "Introductory rates",
+    "introRatesHint": "Leave the date empty for no promo",
+    "introUntil": "Through (date)",
+    "introUntilInvalid": "Introductory cutoff must be a YYYY-MM-DD date",
     "resetConfirm": "Confirm Reset",
     "resetDefaults": "Reset Defaults",
     "resetResult": "Reset to {{count}} default rules",

client/src/i18n/locales/vi/settings.json

@@ -14,6 +14,10 @@
     "title": "Định giá mô hình",
     "description": "Đơn giá theo một triệu token (USD). Dùng % làm ký tự đại diện trong mẫu. Một số mô hình có mức giá giới thiệu có thời hạn (hiển thị màu tím); usage vào hoặc trước ngày kết thúc tính theo mức đó, sau đó tính theo mức chuẩn.",
     "introNote": "Ưu đãi ${{input}}/${{output}} đến {{until}}",
+    "introRatesTitle": "Giá giới thiệu",
+    "introRatesHint": "Để trống ngày nếu không có ưu đãi",
+    "introUntil": "Đến (ngày)",
+    "introUntilInvalid": "Ngày kết thúc ưu đãi phải theo định dạng YYYY-MM-DD",
     "resetConfirm": "Xác nhận đặt lại",
     "resetDefaults": "Khôi phục mặc định",
     "resetResult": "Đã đặt lại về {{count}} quy tắc mặc định",

client/src/i18n/locales/zh/settings.json

@@ -14,6 +14,10 @@
     "title": "模型定价",
     "description": "每百万 Token 的费率（美元）。在模式中使用 % 作为通配符。部分模型有限时优惠费率（以紫色显示）；在截止日期当天及之前的用量按该费率计费，之后按标准费率计费。",
     "introNote": "优惠 ${{input}}/${{output}}，截止 {{until}}",
+    "introRatesTitle": "优惠费率",
+    "introRatesHint": "留空日期表示无优惠",
+    "introUntil": "截止（日期）",
+    "introUntilInvalid": "优惠截止日期必须为 YYYY-MM-DD 格式",
     "resetConfirm": "确认重置",
     "resetDefaults": "恢复默认",
     "resetResult": "已重置为 {{count}} 条默认规则",

client/src/pages/Settings.tsx

@@ -4,7 +4,7 @@
  * @author Son Nguyen <hoangson091104@gmail.com>
  */
 
-import { useEffect, useState, useCallback, useRef, useSyncExternalStore } from "react";
+import { useEffect, useState, useCallback, useRef, useSyncExternalStore, Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import {
   DollarSign,
@@ -127,6 +127,14 @@ interface EditRow {
   cache_write_1h_per_mtok: string;
   fast_input_per_mtok: string;
   fast_output_per_mtok: string;
+  // Time-limited introductory rates. intro_until empty ⇒ no promo (the intro_*
+  // values are ignored). Generic: any model can carry a promo window.
+  intro_until: string;
+  intro_input_per_mtok: string;
+  intro_output_per_mtok: string;
+  intro_cache_read_per_mtok: string;
+  intro_cache_write_per_mtok: string;
+  intro_cache_write_1h_per_mtok: string;
 }
 
 const emptyRow: EditRow = {
@@ -139,6 +147,12 @@ const emptyRow: EditRow = {
   cache_write_1h_per_mtok: "0",
   fast_input_per_mtok: "0",
   fast_output_per_mtok: "0",
+  intro_until: "",
+  intro_input_per_mtok: "0",
+  intro_output_per_mtok: "0",
+  intro_cache_read_per_mtok: "0",
+  intro_cache_write_per_mtok: "0",
+  intro_cache_write_1h_per_mtok: "0",
 };
 
 interface SystemInfo {
@@ -526,6 +540,12 @@ export function Settings() {
       cache_write_1h_per_mtok: String(rule.cache_write_1h_per_mtok),
       fast_input_per_mtok: String(rule.fast_input_per_mtok),
       fast_output_per_mtok: String(rule.fast_output_per_mtok),
+      intro_until: rule.intro_until ?? "",
+      intro_input_per_mtok: String(rule.intro_input_per_mtok ?? 0),
+      intro_output_per_mtok: String(rule.intro_output_per_mtok ?? 0),
+      intro_cache_read_per_mtok: String(rule.intro_cache_read_per_mtok ?? 0),
+      intro_cache_write_per_mtok: String(rule.intro_cache_write_per_mtok ?? 0),
+      intro_cache_write_1h_per_mtok: String(rule.intro_cache_write_1h_per_mtok ?? 0),
     });
   };
 
@@ -546,6 +566,11 @@ export function Settings() {
       setError(t("pricing.validationRequired"));
       return;
     }
+    const introUntil = editRow.intro_until.trim();
+    if (introUntil && !/^\d{4}-\d{2}-\d{2}$/.test(introUntil)) {
+      setError(t("pricing.introUntilInvalid"));
+      return;
+    }
     setSaving(true);
     setError(null);
     try {
@@ -559,6 +584,14 @@ export function Settings() {
         cache_write_1h_per_mtok: parseFloat(editRow.cache_write_1h_per_mtok) || 0,
         fast_input_per_mtok: parseFloat(editRow.fast_input_per_mtok) || 0,
         fast_output_per_mtok: parseFloat(editRow.fast_output_per_mtok) || 0,
+        // Always send the intro block so the UI is authoritative for it: an
+        // empty date clears the promo, a valid date persists the intro rates.
+        intro_until: introUntil || null,
+        intro_input_per_mtok: parseFloat(editRow.intro_input_per_mtok) || 0,
+        intro_output_per_mtok: parseFloat(editRow.intro_output_per_mtok) || 0,
+        intro_cache_read_per_mtok: parseFloat(editRow.intro_cache_read_per_mtok) || 0,
+        intro_cache_write_per_mtok: parseFloat(editRow.intro_cache_write_per_mtok) || 0,
+        intro_cache_write_1h_per_mtok: parseFloat(editRow.intro_cache_write_1h_per_mtok) || 0,
       });
       setEditingPattern(null);
       setAdding(false);
@@ -775,6 +808,47 @@ export function Settings() {
     </>
   );
 
+  // Second edit row: the time-limited introductory-rate block. Rendered under
+  // the standard-rate cells whenever a row is being edited/added. Leaving the
+  // date empty means "no promo" — the rate inputs are then ignored. This is the
+  // ONLY place intro rates are entered, and it works for any model pattern (not
+  // just Sonnet 5), so a future model with a launch promo needs no code change.
+  const introField = (key: keyof EditRow, labelKey: string, opts: { date?: boolean } = {}) => (
+    <label className="flex flex-col gap-1">
+      <span className="text-[10px] uppercase tracking-wider text-violet-300/70">{t(labelKey)}</span>
+      <input
+        type={opts.date ? "text" : "number"}
+        {...(opts.date ? { placeholder: "YYYY-MM-DD" } : { step: "0.01", min: "0" })}
+        value={editRow[key]}
+        onChange={(e) => setEditRow((r) => ({ ...r, [key]: e.target.value }))}
+        className={`input text-sm font-mono ${opts.date ? "w-36" : "w-24 text-right"}`}
+      />
+    </label>
+  );
+
+  const renderIntroEditRow = () => (
+    <tr className="bg-surface-3">
+      <td colSpan={10} className="px-4 pb-3 pt-2">
+        <div className="mt-2 rounded-md border border-violet-500/20 bg-violet-500/[0.04] px-3 py-2.5">
+          <div className="flex items-center gap-1.5 mb-2">
+            <span className="text-[11px] font-semibold text-violet-300 uppercase tracking-wider">
+              {t("pricing.introRatesTitle")}
+            </span>
+            <span className="text-[11px] text-gray-500">{t("pricing.introRatesHint")}</span>
+          </div>
+          <div className="flex flex-wrap items-end gap-3">
+            {introField("intro_until", "pricing.introUntil", { date: true })}
+            {introField("intro_input_per_mtok", "common:token.input")}
+            {introField("intro_output_per_mtok", "common:token.output")}
+            {introField("intro_cache_read_per_mtok", "common:token.cacheRead")}
+            {introField("intro_cache_write_per_mtok", "pricing.cacheWrite5m")}
+            {introField("intro_cache_write_1h_per_mtok", "pricing.cacheWrite1h")}
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+
   const actionBanner = (keys: string[]) => {
     const match = actionResult && keys.includes(actionResult.key) ? actionResult : null;
     if (!match) return null;
@@ -1031,9 +1105,10 @@ export function Settings() {
             <tbody className="divide-y divide-border">
               {pricing.map((rule) =>
                 editingPattern === rule.model_pattern ? (
-                  <tr key={rule.model_pattern} className="bg-surface-3">
-                    {renderEditCells()}
-                  </tr>
+                  <Fragment key={rule.model_pattern}>
+                    <tr className="bg-surface-3">{renderEditCells()}</tr>
+                    {renderIntroEditRow()}
+                  </Fragment>
                 ) : (
                   <tr
                     key={rule.model_pattern}
@@ -1072,12 +1147,27 @@ export function Settings() {
                     </td>
                     <td className="px-4 py-3 text-sm text-gray-400 text-right font-mono">
                       ${rule.cache_read_per_mtok}
+                      {rule.intro_until && (
+                        <span className="block text-[11px] text-violet-400/80">
+                          ${rule.intro_cache_read_per_mtok}
+                        </span>
+                      )}
                     </td>
                     <td className="px-4 py-3 text-sm text-gray-400 text-right font-mono">
                       ${rule.cache_write_per_mtok}
+                      {rule.intro_until && (
+                        <span className="block text-[11px] text-violet-400/80">
+                          ${rule.intro_cache_write_per_mtok}
+                        </span>
+                      )}
                     </td>
                     <td className="px-4 py-3 text-sm text-gray-400 text-right font-mono">
                       ${rule.cache_write_1h_per_mtok}
+                      {rule.intro_until && (
+                        <span className="block text-[11px] text-violet-400/80">
+                          ${rule.intro_cache_write_1h_per_mtok}
+                        </span>
+                      )}
                     </td>
                     <td className="px-4 py-3 text-sm text-gray-400 text-right font-mono">
                       {rule.fast_input_per_mtok ? `$${rule.fast_input_per_mtok}` : "-"}
@@ -1108,7 +1198,12 @@ export function Settings() {
                   </tr>
                 )
               )}
-              {adding && <tr className="bg-surface-3">{renderEditCells()}</tr>}
+              {adding && (
+                <>
+                  <tr className="bg-surface-3">{renderEditCells()}</tr>
+                  {renderIntroEditRow()}
+                </>
+              )}
             </tbody>
           </table>
         </div>

server/__tests__/pricing-intro-edit.test.js

@@ -0,0 +1,176 @@
+/**
+ * @file Tests for editing time-limited introductory pricing via PUT /api/pricing.
+ *
+ * The Settings page lets users edit a model's introductory (promo) rates, not
+ * just its standard rates. This suite verifies the route contract that backs
+ * that UI, and that the mechanism is generic (works for any model pattern, not
+ * just the seeded Sonnet 5 promo):
+ *
+ *   1. PUT with intro fields + a valid intro_until persists the intro rates.
+ *   2. PUT that omits every intro field preserves an existing promo (backward
+ *      compatible with older clients that only send standard rates).
+ *   3. PUT with an empty intro_until clears the promo AND zeroes the intro
+ *      rates so a stale value can't resurface later.
+ *   4. A malformed intro_until is rejected with 400 and writes nothing.
+ *   5. Editing standard rates never disturbs the intro block.
+ *
+ * @author Son Nguyen <hoangson091104@gmail.com>
+ */
+
+const { describe, it, before, after } = require("node:test");
+const assert = require("node:assert/strict");
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+const http = require("http");
+
+const TEST_DB = path.join(os.tmpdir(), `dashboard-intro-edit-${Date.now()}-${process.pid}.db`);
+process.env.DASHBOARD_DB_PATH = TEST_DB;
+
+const { createApp, startServer } = require("../index");
+const { db, stmts } = require("../db");
+
+let server;
+let BASE;
+
+function fetch(urlPath, options = {}) {
+  return new Promise((resolve, reject) => {
+    const url = new URL(urlPath, BASE);
+    const opts = {
+      hostname: url.hostname,
+      port: url.port,
+      path: url.pathname + url.search,
+      method: options.method || "GET",
+      headers: { "Content-Type": "application/json", ...options.headers },
+    };
+    const req = http.request(opts, (res) => {
+      let body = "";
+      res.on("data", (c) => (body += c));
+      res.on("end", () => {
+        let parsed;
+        try {
+          parsed = JSON.parse(body);
+        } catch {
+          parsed = body;
+        }
+        resolve({ status: res.statusCode, body: parsed });
+      });
+    });
+    req.on("error", reject);
+    if (options.body) req.write(JSON.stringify(options.body));
+    req.end();
+  });
+}
+
+const PATTERN = "test-promo-model%";
+
+before(async () => {
+  const app = createApp();
+  server = await startServer(app, 0);
+  BASE = `http://127.0.0.1:${server.address().port}`;
+});
+
+after(() => {
+  if (server) server.close();
+  if (db) db.close();
+  for (const suffix of ["", "-wal", "-shm"]) {
+    try {
+      fs.unlinkSync(TEST_DB + suffix);
+    } catch {
+      /* ignore */
+    }
+  }
+});
+
+describe("PUT /api/pricing — introductory rate editing", () => {
+  it("persists intro rates when a valid intro_until is supplied", async () => {
+    const res = await fetch("/api/pricing", {
+      method: "PUT",
+      body: {
+        model_pattern: PATTERN,
+        display_name: "Test Promo Model",
+        input_per_mtok: 3,
+        output_per_mtok: 15,
+        intro_until: "2026-08-31",
+        intro_input_per_mtok: 2,
+        intro_output_per_mtok: 10,
+        intro_cache_read_per_mtok: 0.2,
+        intro_cache_write_per_mtok: 2.5,
+        intro_cache_write_1h_per_mtok: 4,
+      },
+    });
+    assert.equal(res.status, 200);
+    const row = stmts.getPricing.get(PATTERN);
+    assert.equal(row.intro_until, "2026-08-31");
+    assert.equal(row.intro_input_per_mtok, 2);
+    assert.equal(row.intro_output_per_mtok, 10);
+    assert.equal(row.intro_cache_read_per_mtok, 0.2);
+    assert.equal(row.intro_cache_write_per_mtok, 2.5);
+    assert.equal(row.intro_cache_write_1h_per_mtok, 4);
+    // Standard rates persisted too.
+    assert.equal(row.input_per_mtok, 3);
+    assert.equal(row.output_per_mtok, 15);
+  });
+
+  it("preserves an existing promo when the PUT omits all intro fields", async () => {
+    // Older client shape: standard rates only, no intro_* keys at all.
+    const res = await fetch("/api/pricing", {
+      method: "PUT",
+      body: {
+        model_pattern: PATTERN,
+        display_name: "Test Promo Model (renamed)",
+        input_per_mtok: 4,
+        output_per_mtok: 16,
+      },
+    });
+    assert.equal(res.status, 200);
+    const row = stmts.getPricing.get(PATTERN);
+    // Standard rates updated…
+    assert.equal(row.input_per_mtok, 4);
+    assert.equal(row.display_name, "Test Promo Model (renamed)");
+    // …but the promo is untouched.
+    assert.equal(row.intro_until, "2026-08-31");
+    assert.equal(row.intro_input_per_mtok, 2);
+    assert.equal(row.intro_output_per_mtok, 10);
+  });
+
+  it("rejects a malformed intro_until without mutating the row", async () => {
+    const before = stmts.getPricing.get(PATTERN);
+    const res = await fetch("/api/pricing", {
+      method: "PUT",
+      body: {
+        model_pattern: PATTERN,
+        display_name: "Test Promo Model",
+        input_per_mtok: 4,
+        output_per_mtok: 16,
+        intro_until: "August 31",
+        intro_input_per_mtok: 1,
+      },
+    });
+    assert.equal(res.status, 400);
+    const after = stmts.getPricing.get(PATTERN);
+    assert.deepEqual(after, before);
+  });
+
+  it("clears the promo and zeroes intro rates when intro_until is emptied", async () => {
+    const res = await fetch("/api/pricing", {
+      method: "PUT",
+      body: {
+        model_pattern: PATTERN,
+        display_name: "Test Promo Model",
+        input_per_mtok: 4,
+        output_per_mtok: 16,
+        intro_until: "",
+        // Even though rates are still sent, an empty date clears them so a
+        // re-added date later can't silently resurrect stale values.
+        intro_input_per_mtok: 2,
+        intro_output_per_mtok: 10,
+      },
+    });
+    assert.equal(res.status, 200);
+    const row = stmts.getPricing.get(PATTERN);
+    assert.equal(row.intro_until, null);
+    assert.equal(row.intro_input_per_mtok, 0);
+    assert.equal(row.intro_output_per_mtok, 0);
+  });
+});