Polish agent stream spacing, alignment, and metadata

- Centralize horizontal alignment: StreamItemWrapper / contentWrapper own
  the chat rail (paddingHorizontal: 8). Stream items stop setting their
  own outer horizontal padding. Copy icons get negative margins so the
  visible icon sits flush with the rail edges.

- Unify the inline working indicator and assistant turn footer into a
  shared slot (minHeight: 24, paddingBottom: 24). No layout shift on
  streaming -> idle, and both gain breathing room above the composer
  and the next user bubble.

- Equalize the gap on both sides of an assistant message adjacent to a
  tool call (20px each). Drop assistantMessageStylesheet.containerSpacing,
  which was a redundant marginBottom that only fired in one direction
  and duplicated getGapBetween's responsibility.

- Scale up the chevron via transform (size stays 12, viewBox padding no
  longer dominates), iconBadge dimensions unchanged. Tool icon and
  chevron now read as similar visual weight.

- Shared STREAM_METADATA_FONT_SIZE (13) for user message timestamp,
  assistant footer duration/timestamp, and the live elapsed timer.

- formatDuration: one rule for static and live displays - 0-10s as
  X.Xs, 10-60s as Xs, minutes/hours integers only. Drops the `mode`
  parameter.

- formatMessageTimestamp: explicitly carry the resolved hourCycle so
  the runtime applies an OS-level 24h preference when the platform
  exposes it (e.g. AppleICUForce24HourTime on macOS).

packages/app/src/utils/time.ts

@@ -44,17 +44,32 @@ function isSameLocalDay(a: Date, b: Date): boolean {
   );
 }
 
+// Cached Intl formatter. Explicitly carrying `hourCycle` from the resolved
+// options is what makes the runtime respect the user's OS-level 12h/24h
+// preference rather than the locale's default cycle.
+let cachedTimeFormatter: Intl.DateTimeFormat | null = null;
+function getTimeFormatter(): Intl.DateTimeFormat {
+  if (cachedTimeFormatter) return cachedTimeFormatter;
+  const resolved = new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  }).resolvedOptions();
+  cachedTimeFormatter = new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+    hourCycle: resolved.hourCycle,
+  });
+  return cachedTimeFormatter;
+}
+
 /**
  * Format a chat-message timestamp for hover-revealed UI.
- * - Same day: "10:11 PM"
+ * - Same day: "10:11 PM" or "22:11" depending on user preference
  * - Within ~6 days: "Wednesday 10:11 PM"
  * - Older: "14 May 2026, 10:11 PM"
  */
 export function formatMessageTimestamp(date: Date, now: Date = new Date()): string {
-  const time = date.toLocaleTimeString(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-  });
+  const time = getTimeFormatter().format(date);
 
   if (isSameLocalDay(date, now)) {
     return time;
@@ -75,47 +90,30 @@ export function formatMessageTimestamp(date: Date, now: Date = new Date()): stri
   return `${dateLabel}, ${time}`;
 }
 
-type DurationFormatMode = "static" | "live";
-
 /**
  * Format a duration as a compact human-readable string.
- * - Static: integer units only
- * - Live: always keep one decimal in the smallest displayed unit
+ * - 0-10s: one decimal ("3.4s")
+ * - 10s-60s: whole seconds ("47s")
+ * - Minutes/hours: integers only ("2m 12s", "1h 5m")
  */
-export function formatDuration(
-  durationMs: number,
-  options?: { mode?: DurationFormatMode },
-): string {
-  const mode = options?.mode ?? "static";
+export function formatDuration(durationMs: number): string {
   if (!Number.isFinite(durationMs) || durationMs < 0) {
-    return mode === "live" ? "0.0s" : "0s";
+    return "0.0s";
   }
   const totalSeconds = durationMs / 1000;
 
-  if (mode === "live") {
-    if (totalSeconds < 60) {
-      return `${totalSeconds.toFixed(1)}s`;
-    }
-    if (totalSeconds < 60 * 60) {
-      const minutes = Math.floor(totalSeconds / 60);
-      const seconds = totalSeconds - minutes * 60;
-      return `${minutes}m ${seconds.toFixed(1)}s`;
-    }
-    const hours = Math.floor(totalSeconds / (60 * 60));
-    const minutes = (totalSeconds - hours * 60 * 60) / 60;
-    return `${hours}h ${minutes.toFixed(1)}m`;
+  if (totalSeconds < 10) {
+    return `${totalSeconds.toFixed(1)}s`;
   }
-
-  const wholeSeconds = Math.floor(totalSeconds);
-  if (wholeSeconds < 60) {
-    return `${wholeSeconds}s`;
+  if (totalSeconds < 60) {
+    return `${Math.floor(totalSeconds)}s`;
   }
-  const minutes = Math.floor(wholeSeconds / 60);
-  if (minutes < 60) {
-    const seconds = wholeSeconds % 60;
-    return seconds === 0 ? `${minutes}m` : `${minutes}m ${seconds}s`;
+  const totalMinutes = Math.floor(totalSeconds / 60);
+  if (totalMinutes < 60) {
+    const seconds = Math.floor(totalSeconds) % 60;
+    return seconds === 0 ? `${totalMinutes}m` : `${totalMinutes}m ${seconds}s`;
   }
-  const hours = Math.floor(minutes / 60);
-  const remMinutes = minutes % 60;
+  const hours = Math.floor(totalMinutes / 60);
+  const remMinutes = totalMinutes % 60;
   return remMinutes === 0 ? `${hours}h` : `${hours}h ${remMinutes}m`;
 }