@xpufx/paseo-top 0.4.4 → 0.4.7

package/client/telemetry.tsx

@@ -3,54 +3,42 @@ import { Text, View } from "react-native";
 import { useAgent, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
 import {
-  Badge,
-  Collapsible,
-  CopyButton,
-  PluginThemeProvider,
-  ProgressBar,
-  Row,
-  Stack,
-  usePluginSettings,
-} from "./vendor/paseo-plugin-helper/index";
-import { formatBytes, formatUptime, truncatePath } from "../shared/vendor/paseo-plugin-helper/index";
+  HostBadge,
+  HostCollapsible,
+  HostCopyButton,
+  HostLayoutProvider,
+  HostProgressBar,
+  HostRow,
+  HostStack,
+  HostThemeProvider,
+  HostVital,
+  getStatusColor,
+} from "./host-ui";
+import { usePluginSettings } from "./vendor/paseo-plugin-helper/core/index";
+import {
+  formatBytes,
+  formatUptime,
+  resolveMetricStatus,
+  truncatePath,
+} from "../shared/vendor/paseo-plugin-helper/index";
 import { buildTelemetryCopyText } from "./telemetry-copy";
 import {
   isTimelineEnabled,
   isMcpSurfaceEnabled,
   topSettingsContract,
   TIMELINE_RENDERED_METRICS,
+  CPU_THRESHOLDS,
+  MEM_THRESHOLDS,
   type MetricId,
   type TopTimelineTelemetryData,
 } from "../shared/resources";
-import { formatCompactTokens, type TopAgentSnapshot } from "./pill-labels";
+import {
+  formatCompactTokens,
+  type TopAgentSnapshot,
+} from "./pill-labels";
 
 export { TIMELINE_RENDERED_METRICS };
 
-function Vital({
-  icon,
-  color,
-  children,
-}: {
-  icon: string;
-  color: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <Row gap={4} align="center">
-      <Icon name={icon} size={12} color={color} />
-      {/*
-       * Color MUST be applied to the label as well as the icon. A <Text> with
-       * no `color` falls back to React Native's default black and disappears on
-       * dark surfaces (xpufx-org/paseo#208). Reusing the icon's `color` keeps
-       * threshold states (e.g. CPU/RAM warning/danger) consistent for both.
-       */}
-      <Text numberOfLines={1} style={{ fontSize: 11, fontWeight: "500", color }}>
-        {children}
-      </Text>
-    </Row>
-  );
-}
-
 export function TopTimelineTelemetryCard({
   item,
   theme,
@@ -58,6 +46,7 @@ export function TopTimelineTelemetryCard({
   timestamp,
 }: PluginTimelineItemProps<TopTimelineTelemetryData>) {
   const data = item.data;
+  const compact = layout?.compact ?? false;
   const [isExpanded, setIsExpanded] = useState(false);
   const liveUsage = useAgent(data.agentId, (a: TopAgentSnapshot) => a.lastUsage);
   const inputTokens = data.inputTokens ?? liveUsage?.inputTokens;
@@ -111,17 +100,19 @@ export function TopTimelineTelemetryCard({
     }
   }, [data.outcomeKind, theme.colors]);
 
-  const cpuColor = useMemo(() => {
-    if (data.cpuPercent >= 85) return theme.colors.statusDanger;
-    if (data.cpuPercent >= 70) return theme.colors.statusWarning;
-    return theme.colors.foreground;
-  }, [data.cpuPercent, theme.colors]);
+  // CPU/RAM colors resolve through the shared canonical thresholds
+  // (shared/resources.ts) so the timeline card can never diverge from the
+  // pill and dashboard surfaces.
+  const cpuColor = useMemo(
+    () => getStatusColor(resolveMetricStatus(data.cpuPercent, CPU_THRESHOLDS), theme.colors),
+    [data.cpuPercent, theme.colors],
+  );
 
-  const memColor = useMemo(() => {
-    if (data.memPercent >= 90) return theme.colors.statusDanger;
-    if (data.memPercent >= 75) return theme.colors.statusWarning;
-    return theme.colors.foreground;
-  }, [data.memPercent, theme.colors]);
+  const memColor = useMemo(
+    () =>
+      getStatusColor(resolveMetricStatus(data.memPercent, MEM_THRESHOLDS), theme.colors),
+    [data.memPercent, theme.colors],
+  );
 
   const timeLabel = useMemo(() => {
     try {
@@ -166,306 +157,358 @@ export function TopTimelineTelemetryCard({
         : (data.outcomeError ?? "Canceled")
       : "";
 
+  // Velocity badge from computed tokensPerSecond.
+  const velocityBadge = useMemo(() => {
+    if (data.tokensPerSecond == null || !Number.isFinite(data.tokensPerSecond)) return null;
+    const tps = Math.round(data.tokensPerSecond);
+    let label = `⚡ ${tps} tok/s`;
+    if (data.contextPressureLevel === "high") {
+      label += " · ⚠️ high ctx";
+    } else if (data.contextPressureLevel === "warning") {
+      label += " · ⚠️ warn ctx";
+    }
+    return label;
+  }, [data.tokensPerSecond, data.contextPressureLevel]);
+
   return (
-    <PluginThemeProvider theme={theme} layout={layout}>
-      <Collapsible
-        variant="elevated"
-        isExpanded={isExpanded}
-        onToggle={setIsExpanded}
-        style={data.outcomeKind === "failed" ? { borderColor: theme.colors.statusDanger } : undefined}
-        title={
-          <Row gap={6} align="center">
-            <Icon name={outcomeConfig.icon} size={14} color={outcomeConfig.color} />
-            <Text style={{ fontSize: 12, fontWeight: "600", color: theme.colors.foreground }}>
-              {outcomeConfig.label}
-            </Text>
-            {data.durationMs != null ? (
-              <Badge label={`${(data.durationMs / 1000).toFixed(1)}s`} variant="neutral" />
-            ) : null}
-          </Row>
-        }
-        headerRight={
-          <Row gap={6} align="center">
-            {timeLabel !== "" ? (
-              <Text style={{ fontSize: 10, color: theme.colors.foregroundMuted }}>{timeLabel}</Text>
-            ) : null}
-            <Text
-              style={{
-                fontSize: 10,
-                color: theme.colors.foregroundMuted,
-                fontStyle: "italic",
-              }}
-            >
-              via top
-            </Text>
-            {/*
-             * Explicit copy affordance. Web's selection-copy handler only
-             * rebuilds clipboard content for `[data-testid="assistant-message"]`
-             * selections, so styled timeline items copy nothing
-             * (xpufx-org/paseo#278). The helper CopyButton bypasses that gate
-             * with the helper's own clipboard path. Empty labels keep the
-             * header compact: the icon flips Copy -> Check on success.
-             */}
-            <CopyButton
-              getText={getCopyText}
-              label=""
-              copiedLabel=""
-              accessibilityLabel="Copy timeline card"
-              toastMessage="timeline card"
-            />
-          </Row>
-        }
-        summary={
-          !isExpanded && data.outcomeKind === "canceled" ? (
-            <Text numberOfLines={2} style={{ fontSize: 11, color: theme.colors.statusDanger }}>
-              {canceledText}
-            </Text>
-          ) : undefined
-        }
-      >
-        <Stack gap={6}>
-          <Row wrap gap={8} align="center">
-            {show("cpu_ram") && (
-              <Vital icon="Cpu" color={cpuColor}>
-                CPU {data.cpuPercent}%
-              </Vital>
-            )}
+    <HostThemeProvider theme={theme}>
+      <HostLayoutProvider layout={layout}>
+        <HostCollapsible
+          variant="elevated"
+          isExpanded={isExpanded}
+          onToggle={setIsExpanded}
+          style={data.outcomeKind === "failed" ? { borderColor: theme.colors.statusDanger } : undefined}
+          title={
+            <HostRow gap={6} align="center" style={styles.headerInlineRow}>
+              <Icon name={outcomeConfig.icon} size={14} color={outcomeConfig.color} />
+              <Text style={{ fontSize: 12, fontWeight: "600", color: theme.colors.foreground, flexShrink: 0 }}>
+                {outcomeConfig.label}
+              </Text>
+              {data.durationMs != null ? (
+                <HostBadge
+                  label={`${(data.durationMs / 1000).toFixed(1)}s`}
+                  variant="neutral"
+                  style={{ flexShrink: 0 }}
+                />
+              ) : null}
+              {show("velocity") && velocityBadge ? (
+                <HostBadge
+                  label={velocityBadge}
+                  variant={
+                    data.contextPressureLevel === "high"
+                      ? "danger"
+                      : data.contextPressureLevel === "warning"
+                        ? "warning"
+                        : "neutral"
+                  }
+                  style={{ flexShrink: 0 }}
+                />
+              ) : null}
+            </HostRow>
+          }
+          subtitle={
+            !isExpanded && data.outcomeKind === "canceled" ? (
+              <Text numberOfLines={2} style={{ fontSize: 11, color: theme.colors.statusDanger }}>
+                {canceledText}
+              </Text>
+            ) : undefined
+          }
+          headerRight={
+            <HostRow gap={6} align="center" style={styles.headerInlineRow}>
+              {timeLabel !== "" ? (
+                <Text style={{ fontSize: 10, color: theme.colors.foregroundMuted }}>{timeLabel}</Text>
+              ) : null}
+              <Text
+                style={{
+                  fontSize: 10,
+                  color: theme.colors.foregroundMuted,
+                  fontStyle: "italic",
+                }}
+              >
+                via top
+              </Text>
+              {/*
+               * Explicit copy affordance. Web's selection-copy handler only
+               * rebuilds clipboard content for `[data-testid="assistant-message"]`
+               * selections, so styled timeline items copy nothing
+               * (xpufx-org/paseo#278). The helper CopyButton bypasses that gate
+               * with the helper's own clipboard path. Empty labels keep the
+               * header compact: the icon flips Copy -> Check on success.
+               */}
+              <HostCopyButton
+                getText={getCopyText}
+                label=""
+                copiedLabel=""
+                accessibilityLabel="Copy timeline card"
+                toastMessage="timeline card"
+              />
+            </HostRow>
+          }
+          summary={
+            <HostRow wrap gap={compact ? 6 : 8} align="center">
+              {show("cpu_ram") && (
+                <HostVital icon="Cpu" color={cpuColor}>
+                  CPU {data.cpuPercent}%
+                </HostVital>
+              )}
 
-            {show("cpu_ram") && (
-              <Vital icon="Database" color={memColor}>
-                RAM {formatBytes(data.memUsedBytes)} ({data.memPercent}%)
-              </Vital>
-            )}
+              {show("cpu_ram") && (
+                <HostVital icon="Database" color={memColor}>
+                  RAM {formatBytes(data.memUsedBytes)} ({data.memPercent}%)
+                </HostVital>
+              )}
 
-            {show("load") && (
-              <Vital icon="Activity" color={theme.colors.foreground}>
-                Load {data.loadAvg1m.toFixed(2)}
-              </Vital>
-            )}
+              {show("load") && (
+                <HostVital icon="Activity" color={theme.colors.foreground}>
+                  Load {data.loadAvg1m.toFixed(2)}
+                </HostVital>
+              )}
 
-            {showMcp && (
-              <Vital
-                icon="Server"
-                color={
-                  data.mcpTotal == null
-                    ? theme.colors.foregroundMuted
-                    : (data.mcpHealthy ?? 0) === data.mcpTotal
-                      ? theme.colors.statusSuccess
-                      : theme.colors.statusWarning
-                }
-              >
-                {data.mcpTotal != null ? `MCP ${data.mcpHealthy ?? 0}/${data.mcpTotal}` : "MCP --"}
-              </Vital>
-            )}
+              {showMcp && (
+                <HostVital
+                  icon="Server"
+                  color={
+                    data.mcpTotal == null
+                      ? theme.colors.foregroundMuted
+                      : (data.mcpHealthy ?? 0) === data.mcpTotal
+                        ? theme.colors.statusSuccess
+                        : theme.colors.statusWarning
+                  }
+                >
+                  {data.mcpTotal != null ? `MCP ${data.mcpHealthy ?? 0}/${data.mcpTotal}` : "MCP --"}
+                </HostVital>
+              )}
 
-            {show("agent_id") && (
-              <Vital icon="Fingerprint" color={theme.colors.foreground}>
-                {data.agentId && data.agentId.length > 7
-                  ? data.agentId.slice(0, 7)
-                  : (data.agentId ?? "--")}
-              </Vital>
-            )}
+              {show("agent_id") && (
+                <HostVital icon="Fingerprint" color={theme.colors.foreground}>
+                  {data.agentId && data.agentId.length > 7
+                    ? data.agentId.slice(0, 7)
+                    : (data.agentId ?? "--")}
+                </HostVital>
+              )}
 
-            {show("agent") && (
-              <Vital
-                icon="Bot"
-                color={data.agentModel ? theme.colors.foreground : theme.colors.foregroundMuted}
-              >
-                {data.agentModel ?? "model --"}
-              </Vital>
-            )}
+              {show("agent") && (
+                <HostVital
+                  icon="Bot"
+                  color={data.agentModel ? theme.colors.foreground : theme.colors.foregroundMuted}
+                >
+                  {data.agentModel ?? "model --"}
+                </HostVital>
+              )}
 
-            {show("agent_provider") && (
-              <Vital
-                icon="Globe"
-                color={
-                  data.agentProvider ? theme.colors.foreground : theme.colors.foregroundMuted
-                }
-              >
-                {data.agentProvider ?? "provider --"}
-              </Vital>
-            )}
+              {show("agent_provider") && (
+                <HostVital
+                  icon="Globe"
+                  color={
+                    data.agentProvider ? theme.colors.foreground : theme.colors.foregroundMuted
+                  }
+                >
+                  {data.agentProvider ?? "provider --"}
+                </HostVital>
+              )}
 
-            {show("agent_title") && (
-              <Vital
-                icon="Tag"
-                color={data.agentTitle ? theme.colors.foreground : theme.colors.foregroundMuted}
-              >
-                {data.agentTitle ?? "title --"}
-              </Vital>
-            )}
+              {show("agent_title") && (
+                <HostVital
+                  icon="Tag"
+                  color={data.agentTitle ? theme.colors.foreground : theme.colors.foregroundMuted}
+                >
+                  {data.agentTitle ?? "title --"}
+                </HostVital>
+              )}
 
-            {show("branch") && (
-              <Vital
-                icon="GitBranch"
-                color={data.branch ? theme.colors.foreground : theme.colors.foregroundMuted}
-              >
-                {data.branch ?? "branch --"}
-              </Vital>
-            )}
+              {show("branch") && (
+                <HostVital
+                  icon="GitBranch"
+                  color={data.branch ? theme.colors.foreground : theme.colors.foregroundMuted}
+                >
+                  {data.branch ?? "branch --"}
+                </HostVital>
+              )}
 
-            {show("worktree") && (
-              <Vital
-                icon="Folder"
-                color={data.worktree ? theme.colors.foreground : theme.colors.foregroundMuted}
-              >
-                {data.worktree ? truncatePath(data.worktree, 20) : "worktree --"}
-              </Vital>
-            )}
+              {show("worktree") && (
+                <HostVital
+                  icon="Folder"
+                  color={data.worktree ? theme.colors.foreground : theme.colors.foregroundMuted}
+                >
+                  {data.worktree ? truncatePath(data.worktree, 20) : "worktree --"}
+                </HostVital>
+              )}
 
-            {show("uptime") && (
-              <Vital icon="Clock" color={theme.colors.foreground}>
-                {data.uptimeSeconds ? formatUptime(data.uptimeSeconds) : "--"}
-              </Vital>
-            )}
+              {show("uptime") && (
+                <HostVital icon="Clock" color={theme.colors.foreground}>
+                  {data.uptimeSeconds ? formatUptime(data.uptimeSeconds) : "--"}
+                </HostVital>
+              )}
 
-            {show("changes") && (
-              <Vital icon="GitCommitHorizontal" color={theme.colors.foreground}>
-                {(data.gitFilesChanged ?? 0) > 0
-                  ? `±${data.gitFilesChanged} files +${data.gitInsertions ?? 0}/-${data.gitDeletions ?? 0}`
-                  : "No changes"}
-              </Vital>
-            )}
+              {show("changes") && (
+                <HostVital icon="GitCommitHorizontal" color={theme.colors.foreground}>
+                  {(data.gitFilesChanged ?? 0) > 0
+                    ? `±${data.gitFilesChanged} files +${data.gitInsertions ?? 0}/-${data.gitDeletions ?? 0}`
+                    : "No changes"}
+                </HostVital>
+              )}
 
-            {show("tokens") && (
-              <Vital
-                icon="Coins"
-                color={
-                  totalTokens != null || contextUsedTokens != null
-                    ? theme.colors.foreground
-                    : theme.colors.foregroundMuted
-                }
-              >
-                {contextUsedTokens != null && contextMaxTokens
-                  ? `${formatCompactTokens(contextUsedTokens)}/${formatCompactTokens(contextMaxTokens)}${contextPercent != null ? ` (${contextPercent}% ctx)` : ""}`
-                  : totalTokens != null
-                    ? `${formatCompactTokens(totalTokens)} tok`
-                    : contextUsedTokens != null
-                      ? `${formatCompactTokens(contextUsedTokens)} ctx`
-                      : "tok --"}
-              </Vital>
-            )}
+              {show("tokens") && (
+                <HostVital
+                  icon="Coins"
+                  color={
+                    totalTokens != null || contextUsedTokens != null
+                      ? theme.colors.foreground
+                      : theme.colors.foregroundMuted
+                  }
+                >
+                  {contextUsedTokens != null && contextMaxTokens
+                    ? `${formatCompactTokens(contextUsedTokens)}/${formatCompactTokens(contextMaxTokens)}${contextPercent != null ? ` (${contextPercent}% ctx)` : ""}`
+                    : totalTokens != null
+                      ? `${formatCompactTokens(totalTokens)} tok`
+                      : contextUsedTokens != null
+                        ? `${formatCompactTokens(contextUsedTokens)} ctx`
+                        : "tok --"}
+                </HostVital>
+              )}
 
-            {show("tools") && (
-              <Vital icon="Sigma" color={theme.colors.foreground}>
-                {data.toolCalls != null
-                  ? `${data.toolCalls}${data.toolErrors ? ` (${data.toolErrors} err)` : ""}`
-                  : "tools --"}
-              </Vital>
-            )}
+              {show("velocity") && (
+                <HostVital
+                  icon="Zap"
+                  color={
+                    data.tokensPerSecond != null && Number.isFinite(data.tokensPerSecond)
+                      ? data.contextPressureLevel === "high"
+                        ? theme.colors.statusDanger
+                        : data.contextPressureLevel === "warning"
+                          ? theme.colors.statusWarning
+                          : theme.colors.foreground
+                      : theme.colors.foregroundMuted
+                  }
+                >
+                  {data.tokensPerSecond != null && Number.isFinite(data.tokensPerSecond)
+                    ? `${Math.round(data.tokensPerSecond)} tok/s`
+                    : "vel --"}
+                </HostVital>
+              )}
 
-            {show("turns") && (
-              <Vital
-                icon="Repeat"
-                color={data.turnCount != null ? theme.colors.foreground : theme.colors.foregroundMuted}
-              >
-                {data.turnCount != null ? `${data.turnCount} turns` : "turns --"}
-              </Vital>
-            )}
-          </Row>
-
-          {show("tokens") && hasTokenDetails ? (
-            <Stack gap={8}>
-              <Row justify="space-between" align="center">
-                <Row gap={4} align="center">
-                  <Icon name="Coins" size={12} color={theme.colors.foregroundMuted} />
-                  <Text style={sectionTitleStyle(theme.colors)}>Tokens & Context</Text>
-                </Row>
-                {costUsd != null && (
-                  <Text style={{ fontSize: 10, fontWeight: "600", color: theme.colors.foreground }}>
-                    ${costUsd < 0.01 ? costUsd.toFixed(4) : costUsd.toFixed(2)}
-                  </Text>
-                )}
-              </Row>
+              {show("tools") && (
+                <HostVital icon="Sigma" color={theme.colors.foreground}>
+                  {data.toolCalls != null
+                    ? `${data.toolCalls}${data.toolErrors ? ` (${data.toolErrors} err)` : ""}`
+                    : "tools --"}
+                </HostVital>
+              )}
 
-              {contextMaxTokens != null && contextMaxTokens > 0 ? (
-                <Stack gap={4}>
-                  <Row justify="space-between" align="center">
-                    <Text style={{ fontSize: 10, color: theme.colors.foregroundMuted }}>
-                      Context Window
-                    </Text>
+              {show("turns") && (
+                <HostVital
+                  icon="Repeat"
+                  color={data.turnCount != null ? theme.colors.foreground : theme.colors.foregroundMuted}
+                >
+                  {data.turnCount != null ? `${data.turnCount} turns` : "turns --"}
+                </HostVital>
+              )}
+            </HostRow>
+          }
+        >
+          <HostStack gap={6}>
+            {show("tokens") && hasTokenDetails ? (
+              <HostStack gap={8}>
+                <HostRow justify="between" align="center">
+                  <HostRow gap={4} align="center">
+                    <Icon name="Coins" size={12} color={theme.colors.foregroundMuted} />
+                    <Text style={sectionTitleStyle(theme.colors)}>Tokens & Context</Text>
+                  </HostRow>
+                  {costUsd != null && (
                     <Text style={{ fontSize: 10, fontWeight: "600", color: theme.colors.foreground }}>
-                      {formatCompactTokens(contextUsedTokens ?? 0)} /{" "}
-                      {formatCompactTokens(contextMaxTokens)} ({contextPercent}%)
+                      ${costUsd < 0.01 ? costUsd.toFixed(4) : costUsd.toFixed(2)}
                     </Text>
-                  </Row>
-                  <ProgressBar
-                    value={contextPercent ?? 0}
-                    thresholds={{ warning: 70, danger: 85 }}
-                    height={6}
-                  />
-                </Stack>
-              ) : contextUsedTokens != null ? (
-                <Text style={{ fontSize: 10, color: theme.colors.foreground }}>
-                  {formatCompactTokens(contextUsedTokens)} tokens
+                  )}
+                </HostRow>
+
+                {contextMaxTokens != null && contextMaxTokens > 0 ? (
+                  <HostStack gap={4}>
+                    <HostRow justify="between" align="center">
+                      <Text style={{ fontSize: 10, color: theme.colors.foregroundMuted }}>
+                        Context Window
+                      </Text>
+                      <Text style={{ fontSize: 10, fontWeight: "600", color: theme.colors.foreground }}>
+                        {formatCompactTokens(contextUsedTokens ?? 0)} /{" "}
+                        {formatCompactTokens(contextMaxTokens)} ({contextPercent}%)
+                      </Text>
+                    </HostRow>
+                    <HostProgressBar
+                      value={contextPercent ?? 0}
+                      thresholds={{ warning: 70, danger: 85 }}
+                      height={6}
+                    />
+                  </HostStack>
+                ) : contextUsedTokens != null ? (
+                  <Text style={{ fontSize: 10, color: theme.colors.foreground }}>
+                    {formatCompactTokens(contextUsedTokens)} tokens
+                  </Text>
+                ) : null}
+
+                <HostRow wrap gap={6} align="center">
+                  {inputTokens != null && (
+                    <HostBadge label={`In: ${inputTokens.toLocaleString('en-US')}`} variant="neutral" />
+                  )}
+                  {outputTokens != null && (
+                    <HostBadge label={`Out: ${outputTokens.toLocaleString('en-US')}`} variant="neutral" />
+                  )}
+                  {cachedTokens != null && (
+                    <HostBadge label={`Cache: ${cachedTokens.toLocaleString('en-US')}`} variant="neutral" />
+                  )}
+                </HostRow>
+              </HostStack>
+            ) : show("tokens") ? (
+              <HostRow justify="between" align="center">
+                <Text style={sectionTitleStyle(theme.colors)}>Tokens & Context</Text>
+                <Text
+                  style={{
+                    fontSize: 10,
+                    fontStyle: "italic",
+                    color: theme.colors.foregroundMuted,
+                  }}
+                >
+                  Not reported by provider
                 </Text>
-              ) : null}
+              </HostRow>
+            ) : null}
 
-              <Row wrap gap={6} align="center">
-                {inputTokens != null && (
-                  <Badge label={`In: ${inputTokens.toLocaleString()}`} variant="neutral" />
-                )}
-                {outputTokens != null && (
-                  <Badge label={`Out: ${outputTokens.toLocaleString()}`} variant="neutral" />
+            <HostStack gap={4}>
+              <Text style={sectionTitleStyle(theme.colors)}>Turn Details</Text>
+              <HostRow wrap gap={12} align="center">
+                <HostVital grow={false} icon="Cpu" color={theme.colors.foreground}>
+                  {data.agentModel ?? "Unknown model"} ({data.agentProvider ?? "default"})
+                </HostVital>
+                {data.toolCalls != null && (
+                  <HostVital grow={false} icon="Sigma" color={theme.colors.foreground}>
+                    {data.toolCalls} calls
+                    {data.toolErrors ? `, ${data.toolErrors} failed` : ""}
+                  </HostVital>
                 )}
-                {cachedTokens != null && (
-                  <Badge label={`Cache: ${cachedTokens.toLocaleString()}`} variant="neutral" />
+                {(data.gitInsertions != null || data.gitDeletions != null) && (
+                  <HostVital grow={false} icon="GitCommitHorizontal" color={theme.colors.foreground}>
+                    +{data.gitInsertions ?? 0} -{data.gitDeletions ?? 0}
+                  </HostVital>
                 )}
-              </Row>
-            </Stack>
-          ) : show("tokens") ? (
-            <Row justify="space-between" align="center">
-              <Text style={sectionTitleStyle(theme.colors)}>Tokens & Context</Text>
-              <Text
+              </HostRow>
+            </HostStack>
+
+            {data.outcomeError && (
+              <View
                 style={{
-                  fontSize: 10,
-                  fontStyle: "italic",
-                  color: theme.colors.foregroundMuted,
+                  padding: 6,
+                  borderRadius: 4,
+                  backgroundColor: theme.colors.surface2,
+                  borderLeftWidth: 3,
+                  borderLeftColor: theme.colors.statusDanger,
                 }}
               >
-                Not reported by provider
-              </Text>
-            </Row>
-          ) : null}
-
-          <Stack gap={4}>
-            <Text style={sectionTitleStyle(theme.colors)}>Turn Details</Text>
-            <Row wrap gap={12} align="center">
-              <Vital icon="Cpu" color={theme.colors.foreground}>
-                {data.agentModel ?? "Unknown model"} ({data.agentProvider ?? "default"})
-              </Vital>
-              {data.toolCalls != null && (
-                <Vital icon="Sigma" color={theme.colors.foreground}>
-                  {data.toolCalls} calls
-                  {data.toolErrors ? `, ${data.toolErrors} failed` : ""}
-                </Vital>
-              )}
-              {(data.gitInsertions != null || data.gitDeletions != null) && (
-                <Vital icon="GitCommitHorizontal" color={theme.colors.foreground}>
-                  +{data.gitInsertions ?? 0} -{data.gitDeletions ?? 0}
-                </Vital>
-              )}
-            </Row>
-          </Stack>
-
-          {data.outcomeError && (
-            <View
-              style={{
-                padding: 6,
-                borderRadius: 4,
-                backgroundColor: theme.colors.surface2,
-                borderLeftWidth: 3,
-                borderLeftColor: theme.colors.statusDanger,
-              }}
-            >
-              <Text numberOfLines={2} style={{ fontSize: 11, color: theme.colors.statusDanger }}>
-                {data.outcomeError}
-              </Text>
-            </View>
-          )}
-        </Stack>
-      </Collapsible>
-    </PluginThemeProvider>
+                <Text numberOfLines={2} style={{ fontSize: 11, color: theme.colors.statusDanger }}>
+                  {data.outcomeError}
+                </Text>
+              </View>
+            )}
+          </HostStack>
+        </HostCollapsible>
+      </HostLayoutProvider>
+    </HostThemeProvider>
   );
 }
 
@@ -479,6 +522,14 @@ const styles = {
     textTransform: "uppercase",
     letterSpacing: 0.5,
   },
+  // Header slots are auto-width: a `HostRow`'s base `width: 100%` resolves to
+  // zero inside the collapsible's `flex: 1` title column on native Yoga, which
+  // collapsed the header and stranded the outcome/time row mid-card
+  // (xpufx-org/paseo#1010). Opting these rows out of the full-width default
+  // keeps the header on one content-sized line.
+  headerInlineRow: {
+    width: "auto",
+  },
 } as const;
 
 function sectionTitleStyle(colors: { foregroundMuted: string }) {