+ {/* The user must be able to read the FULL command before deciding: below sm the
+ preview wraps in whole (expanded-args style: pre-wrap + break-all, no inner
+ scroll, the block may grow) — the one-line treatment resumes once decided, since
+ this pending block unmounts and only the truncating header subtitle remains. At
+ ≥sm the row stays one line (the desktop column is wide enough in practice). */}
+
{item.name || S.chat.unknownTool}
-
+
{preview}
diff --git a/packages/web/src/features/chat/work-group.tsx b/packages/web/src/features/chat/work-group.tsx
index a85e229..e2564f2 100644
--- a/packages/web/src/features/chat/work-group.tsx
+++ b/packages/web/src/features/chat/work-group.tsx
@@ -104,9 +104,11 @@ export function WorkGroup({
>
{active ? S.chat.workRunning : S.chat.workDone}
- {/* A pure-thinking group (no tool calls) doesn't show "0 steps". */}
+ {/* A pure-thinking group (no tool calls) doesn't show "0 steps"; below sm the count is
+ dropped entirely (title on the header carries nothing extra — the header must stay
+ a single uncut line on phones). */}
{steps > 0 && (
-
+
{S.chat.workGroupSteps(steps)}
)}
@@ -132,9 +134,21 @@ export function WorkGroup({
)}
{pending && !shown && (
-
- {S.chat.approvalWaiting}
-
+ <>
+ {/* Below sm the pill collapses to a bare amber dot (title/aria carry the meaning):
+ the text pill would push the header past one line on phones. role="img", not a
+ live region — same non-live semantics as the text pill, so re-renders don't
+ chatter at screen readers. */}
+
+ {S.chat.approvalWaiting}
+
+
+
)}
diff --git a/packages/web/src/lib/format.ts b/packages/web/src/lib/format.ts
index a520e65..176c41b 100644
--- a/packages/web/src/lib/format.ts
+++ b/packages/web/src/lib/format.ts
@@ -22,11 +22,16 @@ export function humanizeTokens(n: number): string {
return `${trimZero(n / 1_000_000)}M`;
}
-/** Convert milliseconds to a human-readable duration: `820ms`, `2.3s`, `1m3s`. */
-export function humanizeDuration(ms: number): string {
+/**
+ * Convert milliseconds to a human-readable duration: `820ms`, `2.3s`, `1m3s`.
+ * `compact` (narrow screens): seconds from 10s up drop the tenths (`12s`, not `12.7s` — at that
+ * scale the decimal no longer carries information worth the width); below 10s the tenth is
+ * significant and stays (`1.7s`), ms and minute forms are already whole-numbered.
+ */
+export function humanizeDuration(ms: number, opts?: { compact?: boolean }): string {
if (ms < 1000) return `${Math.round(ms)}ms`;
const s = ms / 1000;
- if (s < 60) return `${trimZero(s)}s`;
+ if (s < 60) return opts?.compact && s >= 10 ? `${Math.round(s)}s` : `${trimZero(s)}s`;
const m = Math.floor(s / 60);
return `${m}m${Math.round(s % 60)}s`;
}
@@ -98,16 +103,22 @@ export function formatPercent(ratio: number | null | undefined): string {
* Cost display (converted to the selected currency; prices are stored in
* USD): null/undefined → `—`; 1 USD ≈ 7 CNY; decimal places scale with
* magnitude (≥100 rounds to an integer, ≥1 uses two places, otherwise four).
+ * `compact` (narrow screens): sub-unit amounts keep 2 significant digits
+ * instead of 4 fixed decimals (`$0.1234` → `$0.12`, `$0.0012` stays
+ * `$0.0012`) — significant digits, not fixed decimals, so a nonzero cost is
+ * never rounded down to zero; amounts ≥ 1 are already short and unchanged.
*/
export function formatMoney(
usd: number | null | undefined,
currency: "USD" | "CNY" = "USD",
+ opts?: { compact?: boolean },
): string {
if (usd == null) return "—";
const symbol = currency === "CNY" ? "¥" : "$";
const v = currency === "CNY" ? usd * 7 : usd;
if (v === 0) return `${symbol}0`;
const abs = Math.abs(v);
+ if (opts?.compact && abs < 1) return `${symbol}${Number(v.toPrecision(2))}`;
const digits = abs >= 100 ? 0 : abs >= 1 ? 2 : 4;
return `${symbol}${v.toFixed(digits)}`;
}
diff --git a/packages/web/test/format.test.ts b/packages/web/test/format.test.ts
index 72589df..2e36513 100644
--- a/packages/web/test/format.test.ts
+++ b/packages/web/test/format.test.ts
@@ -49,6 +49,14 @@ describe("humanizeDuration", () => {
expect(humanizeDuration(63000)).toBe("1m3s");
expect(humanizeDuration(130000)).toBe("2m10s");
});
+
+ it("compact (narrow screens) drops the tenths from 10s up, keeps them below", () => {
+ expect(humanizeDuration(12700, { compact: true })).toBe("13s");
+ expect(humanizeDuration(59400, { compact: true })).toBe("59s");
+ expect(humanizeDuration(1700, { compact: true })).toBe("1.7s");
+ expect(humanizeDuration(820, { compact: true })).toBe("820ms");
+ expect(humanizeDuration(63000, { compact: true })).toBe("1m3s");
+ });
});
describe("signedDelta", () => {
@@ -77,6 +85,16 @@ describe("formatMoney", () => {
expect(formatMoney(1, "CNY")).toBe("¥7.00");
expect(formatMoney(0.01, "CNY")).toBe("¥0.0700");
});
+
+ it("compact (narrow screens): sub-unit costs keep 2 significant digits, never rounding a nonzero cost to zero", () => {
+ expect(formatMoney(0.1234, "USD", { compact: true })).toBe("$0.12");
+ expect(formatMoney(0.0012, "USD", { compact: true })).toBe("$0.0012");
+ expect(formatMoney(0.00047, "USD", { compact: true })).toBe("$0.00047");
+ expect(formatMoney(1.5, "USD", { compact: true })).toBe("$1.50");
+ expect(formatMoney(150, "USD", { compact: true })).toBe("$150");
+ expect(formatMoney(0, "USD", { compact: true })).toBe("$0");
+ expect(formatMoney(0.01, "CNY", { compact: true })).toBe("¥0.07");
+ });
});
describe("formatPercent", () => {