Surface context window usage in the UI

- Normalize provider token-usage events into thread activities
- Add a compact context window meter to chat
- Handle context compaction markers in the timeline

Author: juliusmarminge

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -147,11 +147,25 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       }
 
       if (timelineEntry.kind === "work") {
+        if (timelineEntry.entry.display === "timeline-marker") {
+          nextRows.push({
+            kind: "work",
+            id: timelineEntry.id,
+            createdAt: timelineEntry.createdAt,
+            groupedEntries: [timelineEntry.entry],
+          });
+          continue;
+        }
         const groupedEntries = [timelineEntry.entry];
         let cursor = index + 1;
         while (cursor < timelineEntries.length) {
           const nextEntry = timelineEntries[cursor];
-          if (!nextEntry || nextEntry.kind !== "work") break;
+          if (
+            !nextEntry ||
+            nextEntry.kind !== "work" ||
+            nextEntry.entry.display === "timeline-marker"
+          )
+            break;
           groupedEntries.push(nextEntry.entry);
           cursor += 1;
         }
@@ -314,6 +328,21 @@ export const MessagesTimeline = memo(function MessagesTimeline({
         (() => {
           const groupId = row.id;
           const groupedEntries = row.groupedEntries;
+          const markerEntry =
+            groupedEntries.length === 1 && groupedEntries[0]?.display === "timeline-marker"
+              ? groupedEntries[0]
+              : null;
+          if (markerEntry) {
+            return (
+              <div className="my-3 flex items-center gap-3">
+                <span className="h-px flex-1 bg-border" />
+                <span className="rounded-full border border-border bg-background px-2.5 py-1 text-[10px] uppercase tracking-[0.14em] text-muted-foreground/80">
+                  {markerEntry.label}
+                </span>
+                <span className="h-px flex-1 bg-border" />
+              </div>
+            );
+          }
           const isExpanded = expandedWorkGroups[groupId] ?? false;
           const hasOverflow = groupedEntries.length > MAX_VISIBLE_WORK_LOG_ENTRIES;
           const visibleEntries =

apps/web/src/session-logic.ts

@@ -40,6 +40,7 @@ export interface WorkLogEntry {
   command?: string;
   changedFiles?: ReadonlyArray<string>;
   tone: "thinking" | "tool" | "info" | "error";
+  display?: "timeline-marker";
   toolTitle?: string;
   itemType?: ToolLifecycleItemType;
   requestKind?: PendingApproval["requestKind"];
@@ -522,6 +523,9 @@ function toDerivedWorkLogEntry(activity: OrchestrationThreadActivity): DerivedWo
   if (requestKind) {
     entry.requestKind = requestKind;
   }
+  if (activity.kind === "context-compaction") {
+    entry.display = "timeline-marker";
+  }
   const collapseKey = deriveToolLifecycleCollapseKey(entry);
   if (collapseKey) {
     entry.collapseKey = collapseKey;