fix(dashmint-lab): compact large prices on card chip to prevent overflow

Card price chip overflowed its column for values past ~7 digits. Render
compact (K/M/B/T/Q with one decimal) past 10M, with the exact value in
the title attribute.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: thephez

example-apps/dashmint-lab/src/components/CardTile.tsx

@@ -9,7 +9,12 @@ import { useState, useRef, useEffect } from "react";
 import type { Card } from "../dash/queries";
 import type { DashSdk } from "../dash/types";
 import { rarityOf } from "../lib/rarity";
-import { formatCredits, truncateId, truncateName } from "../lib/format";
+import {
+  formatCredits,
+  formatCreditsCompact,
+  truncateId,
+  truncateName,
+} from "../lib/format";
 import { useDpnsName } from "../hooks/useDpnsName";
 import { documentUrl } from "../lib/explorer";
 import { CardArt } from "./CardArt";
@@ -90,8 +95,11 @@ export function CardTile({
       <div className="flex items-center justify-between">
         <RarityTag rarity={rarity} />
         {hasPrice && (
-          <span className="rounded-full border border-line-2 px-2 py-0.5 font-mono text-[11px] text-ink-2">
-            {formatCredits(card.$price)} cr
+          <span
+            className="rounded-full border border-line-2 px-2 py-0.5 font-mono text-[11px] text-ink-2"
+            title={`${formatCredits(card.$price)} credits`}
+          >
+            {formatCreditsCompact(card.$price)} cr
           </span>
         )}
       </div>

example-apps/dashmint-lab/src/lib/format.ts

@@ -19,3 +19,42 @@ export function formatCredits(price: number | bigint | undefined): string {
   const n = typeof price === "bigint" ? price : BigInt(Math.trunc(price));
   return n.toLocaleString();
 }
+
+/**
+ * Compact credit formatter for tight UI (card chips, badges).
+ * Up to 9,999,999 renders with thousands separators; beyond that it
+ * collapses to K / M / B / T / Q with one decimal of precision.
+ *
+ * Precondition: `price` is non-negative. Platform credit prices cannot be
+ * negative, so this helper does not handle the sign — a large negative
+ * value would skip the compact branch and render as a long string.
+ */
+export function formatCreditsCompact(
+  price: number | bigint | undefined,
+): string {
+  if (price === undefined || price === null) return "";
+  const n = typeof price === "bigint" ? price : BigInt(Math.trunc(price));
+  if (n < 10_000_000n) return n.toLocaleString();
+
+  const units: Array<[bigint, string]> = [
+    [1_000_000_000_000_000n, "Q"],
+    [1_000_000_000_000n, "T"],
+    [1_000_000_000n, "B"],
+    [1_000_000n, "M"],
+    [1_000n, "K"],
+  ];
+  for (const [scale, suffix] of units) {
+    if (n >= scale) {
+      // One decimal of precision via integer math, then trim a trailing ".0".
+      const tenths = (n * 10n) / scale;
+      const whole = tenths / 10n;
+      const frac = tenths % 10n;
+      const body =
+        frac === 0n
+          ? whole.toLocaleString()
+          : `${whole.toLocaleString()}.${frac}`;
+      return `${body}${suffix}`;
+    }
+  }
+  return n.toLocaleString();
+}

example-apps/dashmint-lab/test/CardTile.test.tsx

@@ -186,6 +186,33 @@ describe("CardTile", () => {
     expect(ownerLink!.getAttribute("rel")).toContain("noreferrer");
   });
 
+  it("renders the price chip exactly for small values with the full amount in title", () => {
+    render(
+      <CardTile
+        card={{ ...card, $price: 9_999_999n }}
+        currentIdentityId={null}
+        sdk={sdk}
+      />,
+    );
+
+    const chip = screen.getByText("9,999,999 cr");
+    expect(chip.getAttribute("title")).toBe("9,999,999 credits");
+  });
+
+  it("renders the price chip in compact form past the threshold and keeps the exact value in title", () => {
+    render(
+      <CardTile
+        card={{ ...card, $price: 55_555_555_555_555n }}
+        currentIdentityId={null}
+        sdk={sdk}
+      />,
+    );
+
+    const chip = screen.getByText("55.5T cr");
+    expect(chip.getAttribute("title")).toBe("55,555,555,555,555 credits");
+    expect(screen.queryByText("55,555,555,555,555 cr")).toBeNull();
+  });
+
   it("copies the card id and opens the explorer from the overflow menu", () => {
     render(<CardTile card={card} currentIdentityId={null} sdk={sdk} />);
 

example-apps/dashmint-lab/test/dash.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { formatCredits } from "../src/lib/format";
+import { formatCredits, formatCreditsCompact } from "../src/lib/format";
 import { normalizeCards } from "../src/dash/queries";
 import { rarityOf } from "../src/lib/rarity";
 import { withAuthedCard } from "../src/dash/withAuthedCard";
@@ -72,6 +72,26 @@ describe("dashmint helpers", () => {
     expect(rarityOf(3, 4)).toBe("common");
   });
 
+  it("formatCreditsCompact keeps small values exact and abbreviates large ones", () => {
+    // Below the 10M threshold: full thousands separators, parity with formatCredits.
+    expect(formatCreditsCompact(undefined)).toBe("");
+    expect(formatCreditsCompact(0n)).toBe("0");
+    expect(formatCreditsCompact(9_999_999n)).toBe("9,999,999");
+
+    // Threshold boundary flips into compact form.
+    expect(formatCreditsCompact(10_000_000n)).toBe("10M");
+
+    // Each scale represented; trailing ".0" is trimmed when the scale is exact.
+    expect(formatCreditsCompact(123_456_789n)).toBe("123.4M");
+    expect(formatCreditsCompact(2_000_000_000n)).toBe("2B");
+    expect(formatCreditsCompact(1_999_999_999n)).toBe("1.9B");
+    expect(formatCreditsCompact(55_555_555_555_555n)).toBe("55.5T");
+    expect(formatCreditsCompact(1_000_000_000_000_000n)).toBe("1Q");
+
+    // number input takes the same path.
+    expect(formatCreditsCompact(15_000_000)).toBe("15M");
+  });
+
   it("withAuthedCard increments revision before invoking the mutation", async () => {
     const doc = { revision: 4n };
     const keyManager = {