fix: distinguish primary from sub-agent compression in banner

Author: jahilldev

app/src/components/RunOutput/Compression.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'preact/hooks';
 import type { LangfuseEvent } from '@olympian/api/langfuse/langfuse.model.js';
-import { IconCompress } from './Icons.tsx';
+import { IconBrain, IconCompress, IconRobot } from './Icons.tsx';
 import { fmtTime, splitThinking } from './format.tsx';
 import {
   ChatMessages,
@@ -171,20 +171,27 @@ export function CompressionMarker({
   before,
   after,
   contextLength,
+  isSubagent = false,
 }: {
   before: number;
   after: number;
   contextLength: number;
+  isSubagent?: boolean;
 }) {
   const pct = (t: number) => Math.round((t / contextLength) * 100);
   const k = (t: number) => (t >= 1000 ? `${(t / 1000).toFixed(1)}k` : String(t));
   return (
     <div class="mb-3 flex items-center gap-2 sm:gap-3">
       <div class="h-px flex-1 bg-zinc-800" />
-      <div class="flex shrink-0 items-center gap-2 rounded-xl border border-cyan-900/50 bg-cyan-950/30 px-3 py-1.5 text-cyan-500">
-        <IconCompress />
+      <div class="flex shrink-0 items-center gap-2 rounded-xl border border-zinc-700/60 bg-zinc-900/40 px-3 py-1.5 text-zinc-400">
+        <span
+          class="inline-flex items-center"
+          title={isSubagent ? 'sub-agent context' : 'primary agent context'}
+        >
+          {isSubagent ? <IconRobot /> : <IconBrain />}
+        </span>
         <span class="text-[11px] font-mono font-semibold uppercase tracking-wide">Compress</span>
-        <span class="whitespace-nowrap text-[10px] font-mono text-cyan-600 tabular-nums">
+        <span class="whitespace-nowrap text-[10px] font-mono text-zinc-500 tabular-nums">
           {k(before)}→{k(after)} tok · {pct(before)}%→{pct(after)}%
         </span>
       </div>

app/src/components/RunOutput/StreamingOutput.tsx

@@ -66,10 +66,6 @@ export function StreamingOutput({
   // Compression is inferred from the input-token drop between turns (see
   // compressionDrops), plus any explicitly-labelled compression span.
   const drops = useMemo(() => compressionDrops(orderedEvents), [orderedEvents]);
-  const compressionCount = useMemo(
-    () => drops.size + orderedEvents.reduce((n, ev) => n + (isExplicitCompression(ev) ? 1 : 0), 0),
-    [drops, orderedEvents],
-  );
 
   // The parent agent's trace is the first one we see; delegate_task children run as separate
   // traces under the same session. Anything not on the parent trace is sub-agent activity.
@@ -81,6 +77,18 @@ export function StreamingOutput({
     return null;
   }, [orderedEvents]);
 
+  // Count only the PRIMARY agent's compressions here — this badge sits beside the primary
+  // context meter, so a sub-agent compressing its own (separate, much larger) context must not
+  // inflate it. Sub-agent compressions still render inline, labelled as such.
+  const compressionCount = useMemo(() => {
+    const onParent = (ev: LangfuseEvent) =>
+      parentTraceId !== null && String(ev.body.traceId ?? '') === parentTraceId;
+    let n = 0;
+    for (const i of drops.keys()) if (onParent(orderedEvents[i])) n++;
+    for (const ev of orderedEvents) if (isExplicitCompression(ev) && onParent(ev)) n++;
+    return n;
+  }, [drops, orderedEvents, parentTraceId]);
+
   const contextPct = useMemo(() => {
     // Track the MAIN agent's context only — the first generation's trace. A run's stream
     // interleaves delegate_task children (separate traces) whose small fresh contexts would
@@ -266,6 +274,7 @@ export function StreamingOutput({
                     before={drop.before}
                     after={drop.after}
                     contextLength={contextLength}
+                    isSubagent={isSubagent}
                   />
                 )}
                 {showDivider && <hr class="border-zinc-800 my-4" />}