From 37bb1682045dfab709bc4a5779c6b288a11b92ef Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Fri, 15 May 2026 13:30:57 +0700 Subject: [PATCH] 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). --- .../app/src/components/agent-stream-view.tsx | 42 ++++++----- packages/app/src/components/message.tsx | 56 +++++---------- packages/app/src/utils/time.test.ts | 26 +++---- packages/app/src/utils/time.ts | 72 +++++++++---------- 4 files changed, 88 insertions(+), 108 deletions(-) diff --git a/packages/app/src/components/agent-stream-view.tsx b/packages/app/src/components/agent-stream-view.tsx index e6404780c..7fd7e2ed4 100644 --- a/packages/app/src/components/agent-stream-view.tsx +++ b/packages/app/src/components/agent-stream-view.tsx @@ -44,6 +44,7 @@ import { CompactionMarker, LiveElapsed, MessageOuterSpacingProvider, + STREAM_METADATA_FONT_SIZE, type InlinePathTarget, } from "./message"; import { PlanCard } from "./plan-card"; @@ -325,7 +326,7 @@ const AgentStreamViewComponent = forwardRef + ); @@ -940,11 +941,13 @@ function TurnCopyButtonSlot({ strategy, items, startIndex }: TurnCopyButtonSlotP [strategy, items, startIndex], ); return ( - + + + ); } @@ -1244,6 +1247,7 @@ const stylesheet = StyleSheet.create((theme) => ({ width: "100%", maxWidth: MAX_CONTENT_WIDTH, alignSelf: "center", + paddingHorizontal: theme.spacing[2], }, listContentContainer: { paddingVertical: 0, @@ -1264,6 +1268,7 @@ const stylesheet = StyleSheet.create((theme) => ({ width: "100%", maxWidth: MAX_CONTENT_WIDTH, alignSelf: "center", + paddingHorizontal: theme.spacing[2], }, emptyState: { flex: 1, @@ -1282,37 +1287,35 @@ const stylesheet = StyleSheet.create((theme) => ({ alignItems: "center", justifyContent: "flex-start", marginTop: theme.spacing[4], - paddingLeft: 3, - paddingRight: 3, paddingTop: theme.spacing[3], paddingBottom: theme.spacing[2], gap: theme.spacing[2], }, - inlineTurnFooter: { + turnFooterSlot: { + flexDirection: "row", + alignItems: "center", alignSelf: "flex-start", - marginTop: theme.spacing[2], - padding: theme.spacing[2], - paddingTop: 0, + minHeight: 24, + marginTop: theme.spacing[1], + paddingBottom: theme.spacing[6], }, inlineWorkingIndicatorFrame: { - height: 18, + height: 24, flexDirection: "row", alignItems: "center", justifyContent: "flex-start", - gap: theme.spacing[2], + gap: theme.spacing[3], }, workingElapsed: { color: theme.colors.foregroundMuted, - fontSize: theme.fontSize.sm, + fontSize: STREAM_METADATA_FONT_SIZE, fontVariant: ["tabular-nums"], }, workingIndicatorBubble: { flexDirection: "row", alignItems: "center", - gap: theme.spacing[2], - paddingHorizontal: 0, + gap: theme.spacing[3], paddingVertical: theme.spacing[1], - paddingLeft: theme.spacing[2], borderRadius: theme.borderRadius.full, backgroundColor: "transparent", borderWidth: 0, @@ -1322,6 +1325,7 @@ const stylesheet = StyleSheet.create((theme) => ({ flexDirection: "row", alignItems: "center", gap: theme.spacing[1], + transform: [{ translateY: 1 }], }, workingDot: { width: 6, diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx index 07be2b4b5..4ba3e2d37 100644 --- a/packages/app/src/components/message.tsx +++ b/packages/app/src/components/message.tsx @@ -187,6 +187,10 @@ const WEB_TOOLCALL_SHIMMER_KEYFRAME_CSS = ` `; let webToolCallShimmerRegistered = false; const SCROLL_EDGE_EPSILON = 0.5; + +// Font size for stream metadata (timestamps, durations, live elapsed timer). +// Lives between theme.fontSize.xs (12) and theme.fontSize.sm (14); no token. +export const STREAM_METADATA_FONT_SIZE = 13; type ScrollAxis = "x" | "y"; function ensureWebToolCallShimmerKeyframes() { @@ -318,7 +322,6 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({ container: { flexDirection: "row", justifyContent: "flex-end", - paddingHorizontal: theme.spacing[2], ...(isWeb ? { userSelect: "text" as const } : {}), }, content: { @@ -393,6 +396,7 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({ }, copyButton: { padding: theme.spacing[1], + marginRight: -theme.spacing[1], }, trailingRow: { alignSelf: "flex-end", @@ -409,7 +413,7 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({ }, timestampText: { color: theme.colors.foregroundMuted, - fontSize: theme.fontSize.xs, + fontSize: STREAM_METADATA_FONT_SIZE, }, })); @@ -562,20 +566,20 @@ const assistantTurnFooterStylesheet = StyleSheet.create((theme) => ({ flexDirection: "row", alignItems: "center", gap: theme.spacing[2], - paddingVertical: theme.spacing[1], }, copyButton: { alignSelf: "center", padding: theme.spacing[1], paddingTop: theme.spacing[1], marginTop: 0, + marginLeft: -theme.spacing[1], }, labelWrapper: { position: "relative", }, labelSizer: { color: theme.colors.foregroundMuted, - fontSize: theme.fontSize.xs, + fontSize: STREAM_METADATA_FONT_SIZE, opacity: 0, }, labelOverlay: { @@ -583,7 +587,7 @@ const assistantTurnFooterStylesheet = StyleSheet.create((theme) => ({ top: 0, left: 0, color: theme.colors.foregroundMuted, - fontSize: theme.fontSize.xs, + fontSize: STREAM_METADATA_FONT_SIZE, }, })); @@ -699,7 +703,7 @@ export const LiveElapsed = memo(function LiveElapsed({ return ( - {formatDuration(elapsedMs, { mode: "live" })} + {formatDuration(elapsedMs)} ); }); @@ -712,13 +716,11 @@ interface AssistantMessageProps { serverId?: string; client?: DaemonClient | null; toast?: ToastApi | null; - disableOuterSpacing?: boolean; spacing?: "default" | "compactTop" | "compactBottom" | "compactBoth"; } export const assistantMessageStylesheet = StyleSheet.create((theme) => ({ container: { - paddingHorizontal: theme.spacing[2], paddingVertical: theme.spacing[3], ...(isWeb ? { userSelect: "text" as const } : {}), }, @@ -728,9 +730,6 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({ containerCompactBottom: { paddingBottom: 0, }, - containerSpacing: { - marginBottom: theme.spacing[4], - }, // Used in custom markdownRules for path chip styling pathChip: { backgroundColor: theme.colors.surface2, @@ -1259,9 +1258,9 @@ export const TurnCopyButton = memo(function TurnCopyButton({ ? turnCopyButtonStylesheet.iconHoveredColor.color : turnCopyButtonStylesheet.iconColor.color; return copied ? ( - + ) : ( - + ); }} @@ -1270,7 +1269,7 @@ export const TurnCopyButton = memo(function TurnCopyButton({ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({ container: { - marginHorizontal: -6, + marginHorizontal: -13, }, containerSpacing: { marginBottom: theme.spacing[1], @@ -1341,8 +1340,8 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({ flex: 1, }, chevron: { - marginLeft: theme.spacing[1], flexShrink: 0, + transform: [{ scale: 1.3 }], }, openFileButton: { marginLeft: theme.spacing[1], @@ -1355,7 +1354,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({ height: 14, }, chevronExpanded: { - transform: [{ rotate: "90deg" }], + transform: [{ scale: 1.3 }, { rotate: "90deg" }], }, detailWrapper: { borderBottomLeftRadius: theme.borderRadius.lg, @@ -1660,13 +1659,8 @@ export const AssistantMessage = memo(function AssistantMessage({ serverId, client, toast, - disableOuterSpacing, spacing = "default", }: AssistantMessageProps) { - const resolvedDisableOuterSpacing = useDisableOuterSpacing( - disableOuterSpacing ?? spacing !== "default", - ); - const markdownParser = useMemo(() => { const parser = MarkdownIt({ typographer: true, linkify: true }); const defaultValidateLink = parser.validateLink.bind(parser); @@ -1943,9 +1937,8 @@ export const AssistantMessage = memo(function AssistantMessage({ assistantMessageStylesheet.containerCompactTop, (spacing === "compactBottom" || spacing === "compactBoth") && assistantMessageStylesheet.containerCompactBottom, - !resolvedDisableOuterSpacing && assistantMessageStylesheet.containerSpacing, ], - [spacing, resolvedDisableOuterSpacing], + [spacing], ); return ( @@ -1976,7 +1969,6 @@ interface SpeakMessageProps { const speakMessageStylesheet = StyleSheet.create((theme) => ({ container: { - paddingHorizontal: theme.spacing[2], paddingVertical: theme.spacing[3], }, containerSpacing: { @@ -2041,7 +2033,6 @@ interface ActivityLogProps { const activityLogStylesheet = StyleSheet.create((theme) => ({ pressable: { - marginHorizontal: theme.spacing[2], borderRadius: theme.borderRadius.md, overflow: "hidden", }, @@ -2610,7 +2601,7 @@ function renderExpandableBadgeIconSlot({ }): ReactNode { if (showChevron) { return ( - + ); } return iconNode; @@ -2735,7 +2726,6 @@ const ExpandableBadge = memo(function ExpandableBadge({ const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing); const [isHovered, setIsHovered] = useState(false); const [isOpenFileHovered, setIsOpenFileHovered] = useState(false); - const [isIconHovered, setIsIconHovered] = useState(false); const [isPressed, setIsPressed] = useState(false); const isInteractive = Boolean(onToggle); const hasDetailContent = Boolean(renderDetails); @@ -2763,8 +2753,6 @@ const ExpandableBadge = memo(function ExpandableBadge({ ); const handleOpenFileHoverIn = useCallback(() => setIsOpenFileHovered(true), []); const handleOpenFileHoverOut = useCallback(() => setIsOpenFileHovered(false), []); - const handleIconHoverIn = useCallback(() => setIsIconHovered(true), []); - const handleIconHoverOut = useCallback(() => setIsIconHovered(false), []); const nativeGradientIdRef = useRef( `shimmer-gradient-${Math.random().toString(36).substring(2, 9)}`, @@ -2961,7 +2949,7 @@ const ExpandableBadge = memo(function ExpandableBadge({ const ThemedIcon = useMemo(() => (icon ? withUnistyles(icon) : null), [icon]); const iconNode = renderExpandableBadgeIcon({ isError, isActive, ThemedIcon }); const iconSlotNode = renderExpandableBadgeIconSlot({ - showChevron: isInteractive && isHovered && !isIconHovered, + showChevron: isInteractive && isHovered, chevronStyle, iconNode, }); @@ -2989,13 +2977,7 @@ const ExpandableBadge = memo(function ExpandableBadge({ style={pressableStyle} > - - {iconSlotNode} - + {iconSlotNode} { - it("renders static durations as integers", () => { - expect(formatDuration(5_600)).toBe("5s"); - expect(formatDuration(0)).toBe("0s"); + it("renders 0-10s with one decimal", () => { + expect(formatDuration(0)).toBe("0.0s"); + expect(formatDuration(5_600)).toBe("5.6s"); + expect(formatDuration(9_900)).toBe("9.9s"); }); it("renders 10s-60s as whole seconds", () => { - expect(formatDuration(47_000)).toBe("47s"); expect(formatDuration(10_400)).toBe("10s"); + expect(formatDuration(12_340)).toBe("12s"); + expect(formatDuration(47_000)).toBe("47s"); }); - it("renders minutes and remainder seconds", () => { + it("renders minutes and remainder seconds without decimals", () => { + expect(formatDuration(75_230)).toBe("1m 15s"); expect(formatDuration(132_000)).toBe("2m 12s"); expect(formatDuration(120_000)).toBe("2m"); }); - it("renders hours and remainder minutes", () => { + it("renders hours and remainder minutes without decimals", () => { expect(formatDuration(3_900_000)).toBe("1h 5m"); expect(formatDuration(3_600_000)).toBe("1h"); }); it("guards against negative and NaN", () => { - expect(formatDuration(-1)).toBe("0s"); - expect(formatDuration(Number.NaN)).toBe("0s"); - }); - - it("keeps one decimal for live durations", () => { - expect(formatDuration(5_600, { mode: "live" })).toBe("5.6s"); - expect(formatDuration(12_340, { mode: "live" })).toBe("12.3s"); - expect(formatDuration(75_230, { mode: "live" })).toBe("1m 15.2s"); - expect(formatDuration(0, { mode: "live" })).toBe("0.0s"); + expect(formatDuration(-1)).toBe("0.0s"); + expect(formatDuration(Number.NaN)).toBe("0.0s"); }); }); diff --git a/packages/app/src/utils/time.ts b/packages/app/src/utils/time.ts index 3fbf16076..f750f9acf 100644 --- a/packages/app/src/utils/time.ts +++ b/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`; }