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/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<AgentStreamViewHandle, AgentStreamVi
           return tightGap;
         }
         if (isToolSequenceItem(item) && belowItem.kind === "assistant_message") {
-          return looseGap;
+          return tightGap;
         }
         if (isSameAssistantBlockGroup({ item, other: belowItem })) {
           return assistantBlockGap;
@@ -908,7 +909,7 @@ function InlineWorkingIndicatorSlot({
   inFlightTurnStartedAt: Date | null;
 }) {
   return (
-    <View style={stylesheet.inlineTurnFooter} testID="turn-working-indicator">
+    <View style={stylesheet.turnFooterSlot} testID="turn-working-indicator">
       <WorkingIndicator variant="inline" inFlightTurnStartedAt={inFlightTurnStartedAt} />
     </View>
   );
@@ -940,11 +941,13 @@ function TurnCopyButtonSlot({ strategy, items, startIndex }: TurnCopyButtonSlotP
     [strategy, items, startIndex],
   );
   return (
-    <AssistantTurnFooter
-      getContent={getContent}
-      startedAt={header?.startedAt}
-      durationMs={header?.durationMs}
-    />
+    <View style={stylesheet.turnFooterSlot}>
+      <AssistantTurnFooter
+        getContent={getContent}
+        startedAt={header?.startedAt}
+        durationMs={header?.durationMs}
+      />
+    </View>
   );
 }
 
@@ -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,