agl 22.0.3 → 23.0.0

package/ts_web/elements.harnesscontrollerapp.ts

@@ -128,6 +128,33 @@ interface IDetailLoadOwnership {
   messageStreamEpoch: number;
 }
 
+interface ILiveMessageBaseline<
+  TUpdate extends interfaces.IControllerReasoningUpdate | interfaces.IControllerTextUpdate,
+> {
+  update: TUpdate;
+  textUtf8Bytes: number;
+  bytes: number;
+}
+
+interface ICanonicalReasoningTarget {
+  message: plugins.deesCatalog.IHarnessMessage;
+  part: plugins.deesCatalog.IHarnessReasoningPart;
+}
+
+interface ICanonicalChatProjection {
+  key: string;
+  sourceDetail: IControllerSessionRenderDetail | undefined;
+  messages: plugins.deesCatalog.IHarnessMessage[];
+  messagesById: Map<string, plugins.deesCatalog.IHarnessMessage>;
+  messagesByOrder: Map<string, plugins.deesCatalog.IHarnessMessage>;
+  reasoningById: Map<string, ICanonicalReasoningTarget>;
+}
+
+interface ILiveMessageDeltaBlock {
+  sessionId: TBrowserSessionId;
+  streamEpoch: number;
+}
+
 interface ISlashCatalogOwnership {
   key: string;
   projectId: string;
@@ -282,6 +309,57 @@ const controllerJsonValuesEqual = (leftArg: unknown, rightArg: unknown): boolean
     ));
 };
 
+const reconcileKeyedJsonArray = <TValue>(
+  currentArg: readonly TValue[],
+  nextArg: readonly TValue[],
+  keyForArg: (valueArg: TValue, indexArg: number) => string,
+): TValue[] => {
+  const currentByKey = new Map(
+    currentArg.map((value, index) => [keyForArg(value, index), value]),
+  );
+  const seenKeys = new Set<string>();
+  let unchanged = currentArg.length === nextArg.length;
+  const reconciled = nextArg.map((nextValue, index) => {
+    const key = keyForArg(nextValue, index);
+    const currentValue = seenKeys.has(key) ? undefined : currentByKey.get(key);
+    seenKeys.add(key);
+    const value = currentValue !== undefined && controllerJsonValuesEqual(currentValue, nextValue)
+      ? currentValue
+      : nextValue;
+    unchanged &&= value === currentArg[index];
+    return value;
+  });
+  return unchanged ? currentArg as TValue[] : reconciled;
+};
+
+const browserTextEncoder = new TextEncoder();
+
+const controllerTextAfterAppendUtf8Bytes = (
+  textArg: string,
+  textUtf8BytesArg: number,
+  deltaArg: string,
+): number | undefined => {
+  const previousCodeUnit = textArg.charCodeAt(textArg.length - 1);
+  const nextCodeUnit = deltaArg.charCodeAt(0);
+  // Separately encoded surrogate halves cost six bytes; the joined pair costs four.
+  const boundaryCorrection = textArg.length > 0
+    && deltaArg.length > 0
+    && previousCodeUnit >= 0xD800
+    && previousCodeUnit <= 0xDBFF
+    && nextCodeUnit >= 0xDC00
+    && nextCodeUnit <= 0xDFFF
+    ? -2
+    : 0;
+  const result = textUtf8BytesArg
+    + browserTextEncoder.encode(deltaArg).byteLength
+    + boundaryCorrection;
+  return Number.isSafeInteger(result) && result >= 0 ? result : undefined;
+};
+
+const transcriptOrderKey = (orderArg: interfaces.IControllerTranscriptOrder): string => (
+  `${orderArg.messageIndex}\0${orderArg.partIndex}`
+);
+
 const controllerNormalizeBrowserAddress = (addressArg: string): string => {
   const address = addressArg.trim();
   if (!address) throw new Error('Enter a browser address.');
@@ -628,6 +706,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
   private highCpuStartedAt: number | undefined;
   private lastCpuSampleAt: number | undefined;
   private refreshPending = false;
+  private refreshRelatedPending = false;
   private projectsRequestId = 0;
   private modelCatalogRequestId = 0;
   private layoutRequestId = 0;
@@ -757,13 +836,30 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
   private readonly liveToolOverlays = new Map<string, ILiveToolOverlay>();
   private readonly liveReasoningUpdates = new Map<string, interfaces.IControllerReasoningUpdate>();
   private readonly liveTextUpdates = new Map<string, interfaces.IControllerTextUpdate>();
+  private readonly liveReasoningBaselines = new Map<
+    string,
+    ILiveMessageBaseline<interfaces.IControllerReasoningUpdate>
+  >();
+  private readonly liveTextBaselines = new Map<
+    string,
+    ILiveMessageBaseline<interfaces.IControllerTextUpdate>
+  >();
+  private readonly liveReasoningTextUtf8Bytes = new Map<string, number>();
+  private readonly liveTextTextUtf8Bytes = new Map<string, number>();
+  private readonly liveReasoningStoredBytes = new Map<string, number>();
+  private readonly liveTextStoredBytes = new Map<string, number>();
   private readonly liveToolHydrationFloors = new Map<string, ILiveToolHydrationFloor>();
   private readonly liveMessageHydrationFloors = new Map<string, ILiveMessageHydrationFloor>();
+  private readonly liveMessageDeltaBlocks = new Map<string, ILiveMessageDeltaBlock>();
   private readonly liveHistoryBarriers = new Map<string, number>();
   private liveToolOverlayBytes = 0;
   private liveMessageOverlayBytes = 0;
   private readonly liveToolStreamEpochs = new Map<TBrowserSessionHarnessId, number>();
   private readonly liveMessageStreamEpochs = new Map<TBrowserSessionHarnessId, number>();
+  private canonicalChatProjection: ICanonicalChatProjection | undefined;
+  private canonicalChatProjectionDirty = false;
+  private canonicalTimelineRefreshPending = false;
+  private readonly canonicalMessageRefreshIds = new Set<string>();
   private readonly subtaskPreviewEntries = new Map<string, ISubtaskPreviewEntry>();
   private subtaskPreviewGeneration = 0;
   private subtaskPreviewHydrationQueue: string[] = [];
@@ -1824,8 +1920,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           padding: 0 var(--dees-spacing-sm);
         }
 
-        .brandSubtitle,
-        .headerActions .refreshAction {
+        .brandSubtitle {
           display: none;
         }
 
@@ -2016,6 +2111,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     this.draftSessionDetailReadyId = undefined;
     this.authenticated = false;
     this.refreshPending = false;
+    this.refreshRelatedPending = false;
     this.detailRefreshPending = false;
     this.projects = [];
     this.creatingProject = false;
@@ -2843,12 +2939,13 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     }
   }
 
-  private refreshSessions(): Promise<void> {
+  private refreshSessions(includeRelatedArg = true): Promise<void> {
     if (!this.authenticated || !this.socketClient.isConnected) {
       return Promise.resolve();
     }
 
     this.refreshPending = true;
+    this.refreshRelatedPending ||= includeRelatedArg;
     if (!this.refreshInFlight) {
       this.refreshInFlight = this.runRefreshQueue();
     }
@@ -2930,8 +3027,16 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     if (harnessIdArg === undefined) {
       this.liveReasoningUpdates.clear();
       this.liveTextUpdates.clear();
+      this.liveReasoningBaselines.clear();
+      this.liveTextBaselines.clear();
+      this.liveReasoningTextUtf8Bytes.clear();
+      this.liveTextTextUtf8Bytes.clear();
+      this.liveReasoningStoredBytes.clear();
+      this.liveTextStoredBytes.clear();
       this.liveMessageHydrationFloors.clear();
+      this.liveMessageDeltaBlocks.clear();
       this.liveMessageOverlayBytes = 0;
+      this.canonicalChatProjectionDirty = true;
       return;
     }
     for (const [key, floor] of this.liveMessageHydrationFloors) {
@@ -2943,6 +3048,18 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     for (const [key, update] of this.liveTextUpdates) {
       if (update.sessionId.harnessId === harnessIdArg) this.deleteLiveTextUpdate(key);
     }
+    for (const [key, baseline] of this.liveReasoningBaselines) {
+      if (baseline.update.sessionId.harnessId === harnessIdArg) {
+        this.deleteLiveReasoningBaseline(key);
+      }
+    }
+    for (const [key, baseline] of this.liveTextBaselines) {
+      if (baseline.update.sessionId.harnessId === harnessIdArg) this.deleteLiveTextBaseline(key);
+    }
+    for (const [key, block] of this.liveMessageDeltaBlocks) {
+      if (block.sessionId.harnessId === harnessIdArg) this.liveMessageDeltaBlocks.delete(key);
+    }
+    this.canonicalChatProjectionDirty = true;
   }
 
   private clearLiveToolSession(
@@ -2967,21 +3084,38 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         && controllerRuntimeIdsEqual(update.sessionId, sessionIdArg)
       ) this.deleteLiveTextUpdate(key);
     }
+    for (const [key, baseline] of this.liveReasoningBaselines) {
+      if (
+        key.startsWith(`${projectIdArg}\0`)
+        && controllerRuntimeIdsEqual(baseline.update.sessionId, sessionIdArg)
+      ) this.deleteLiveReasoningBaseline(key);
+    }
+    for (const [key, baseline] of this.liveTextBaselines) {
+      if (
+        key.startsWith(`${projectIdArg}\0`)
+        && controllerRuntimeIdsEqual(baseline.update.sessionId, sessionIdArg)
+      ) this.deleteLiveTextBaseline(key);
+    }
+    this.canonicalChatProjectionDirty = true;
     // Keep both hydration floors: they continue fencing snapshots already
     // represented by the last authoritative detail until its replacement lands.
   }
 
   private liveMessageUpdateBytes(updateArg: unknown): number {
-    return new TextEncoder().encode(JSON.stringify(updateArg)).byteLength;
+    return browserTextEncoder.encode(JSON.stringify(updateArg)).byteLength;
   }
 
   private deleteLiveReasoningUpdate(keyArg: string): void {
     const update = this.liveReasoningUpdates.get(keyArg);
     if (!update) return;
     this.liveReasoningUpdates.delete(keyArg);
+    this.liveReasoningTextUtf8Bytes.delete(keyArg);
+    const bytes = this.liveReasoningStoredBytes.get(keyArg)
+      ?? this.liveMessageUpdateBytes(update);
+    this.liveReasoningStoredBytes.delete(keyArg);
     this.liveMessageOverlayBytes = Math.max(
       0,
-      this.liveMessageOverlayBytes - this.liveMessageUpdateBytes(update),
+      this.liveMessageOverlayBytes - bytes,
     );
   }
 
@@ -2989,29 +3123,61 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     const update = this.liveTextUpdates.get(keyArg);
     if (!update) return;
     this.liveTextUpdates.delete(keyArg);
+    this.liveTextTextUtf8Bytes.delete(keyArg);
+    const bytes = this.liveTextStoredBytes.get(keyArg)
+      ?? this.liveMessageUpdateBytes(update);
+    this.liveTextStoredBytes.delete(keyArg);
     this.liveMessageOverlayBytes = Math.max(
       0,
-      this.liveMessageOverlayBytes - this.liveMessageUpdateBytes(update),
+      this.liveMessageOverlayBytes - bytes,
     );
   }
 
+  private deleteLiveReasoningBaseline(keyArg: string): void {
+    const baseline = this.liveReasoningBaselines.get(keyArg);
+    if (!baseline) return;
+    this.liveReasoningBaselines.delete(keyArg);
+    this.liveMessageOverlayBytes = Math.max(0, this.liveMessageOverlayBytes - baseline.bytes);
+  }
+
+  private deleteLiveTextBaseline(keyArg: string): void {
+    const baseline = this.liveTextBaselines.get(keyArg);
+    if (!baseline) return;
+    this.liveTextBaselines.delete(keyArg);
+    this.liveMessageOverlayBytes = Math.max(0, this.liveMessageOverlayBytes - baseline.bytes);
+  }
+
+  private liveMessageEntryCount(): number {
+    return this.liveReasoningUpdates.size
+      + this.liveTextUpdates.size
+      + this.liveReasoningBaselines.size
+      + this.liveTextBaselines.size;
+  }
+
   private storeLiveReasoningUpdate(
     keyArg: string,
     updateArg: interfaces.IControllerReasoningUpdate,
   ): boolean {
     const bytes = this.liveMessageUpdateBytes(updateArg);
     const existing = this.liveReasoningUpdates.get(keyArg);
-    const existingBytes = existing ? this.liveMessageUpdateBytes(existing) : 0;
+    const baseline = this.liveReasoningBaselines.get(keyArg);
+    const existingBytes = existing
+      ? this.liveReasoningStoredBytes.get(keyArg) ?? this.liveMessageUpdateBytes(existing)
+      : baseline?.bytes ?? 0;
     if (
-      (!existing && this.liveReasoningUpdates.size + this.liveTextUpdates.size >= maxLiveToolOverlayEntries)
+      (!existing && !baseline && this.liveMessageEntryCount() >= maxLiveToolOverlayEntries)
       || this.liveMessageOverlayBytes - existingBytes + bytes > maxLiveToolOverlayBytes
     ) {
-      this.clearLiveMessageState();
-      this.refreshSessionsNow();
       return false;
     }
     if (existing) this.deleteLiveReasoningUpdate(keyArg);
+    if (baseline) this.deleteLiveReasoningBaseline(keyArg);
     this.liveReasoningUpdates.set(keyArg, updateArg);
+    this.liveReasoningTextUtf8Bytes.set(
+      keyArg,
+      browserTextEncoder.encode(updateArg.text).byteLength,
+    );
+    this.liveReasoningStoredBytes.set(keyArg, bytes);
     this.liveMessageOverlayBytes += bytes;
     return true;
   }
@@ -3022,21 +3188,168 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
   ): boolean {
     const bytes = this.liveMessageUpdateBytes(updateArg);
     const existing = this.liveTextUpdates.get(keyArg);
-    const existingBytes = existing ? this.liveMessageUpdateBytes(existing) : 0;
+    const baseline = this.liveTextBaselines.get(keyArg);
+    const existingBytes = existing
+      ? this.liveTextStoredBytes.get(keyArg) ?? this.liveMessageUpdateBytes(existing)
+      : baseline?.bytes ?? 0;
     if (
-      (!existing && this.liveReasoningUpdates.size + this.liveTextUpdates.size >= maxLiveToolOverlayEntries)
+      (!existing && !baseline && this.liveMessageEntryCount() >= maxLiveToolOverlayEntries)
       || this.liveMessageOverlayBytes - existingBytes + bytes > maxLiveToolOverlayBytes
     ) {
-      this.clearLiveMessageState();
-      this.refreshSessionsNow();
       return false;
     }
     if (existing) this.deleteLiveTextUpdate(keyArg);
+    if (baseline) this.deleteLiveTextBaseline(keyArg);
     this.liveTextUpdates.set(keyArg, updateArg);
+    this.liveTextTextUtf8Bytes.set(keyArg, browserTextEncoder.encode(updateArg.text).byteLength);
+    this.liveTextStoredBytes.set(keyArg, bytes);
     this.liveMessageOverlayBytes += bytes;
     return true;
   }
 
+  private retireLiveReasoningUpdateToBaseline(
+    keyArg: string,
+    updateArg: interfaces.IControllerReasoningUpdate,
+    textArg: string,
+    cursorArg: interfaces.IControllerMessageStreamCursor,
+  ): void {
+    const update = { ...updateArg, text: textArg, revision: cursorArg.revision };
+    const bytes = this.liveMessageUpdateBytes(update);
+    const existingBytes = this.liveReasoningStoredBytes.get(keyArg)
+      ?? this.liveReasoningBaselines.get(keyArg)?.bytes
+      ?? this.liveMessageUpdateBytes(updateArg);
+    if (this.liveMessageOverlayBytes - existingBytes + bytes > maxLiveToolOverlayBytes) {
+      this.deleteLiveReasoningUpdate(keyArg);
+      this.deleteLiveReasoningBaseline(keyArg);
+      return;
+    }
+    this.deleteLiveReasoningUpdate(keyArg);
+    this.deleteLiveReasoningBaseline(keyArg);
+    this.liveReasoningBaselines.set(keyArg, {
+      update,
+      textUtf8Bytes: browserTextEncoder.encode(textArg).byteLength,
+      bytes,
+    });
+    this.liveMessageOverlayBytes += bytes;
+  }
+
+  private retireLiveTextUpdateToBaseline(
+    keyArg: string,
+    updateArg: interfaces.IControllerTextUpdate,
+    textArg: string,
+    cursorArg: interfaces.IControllerMessageStreamCursor,
+  ): void {
+    const update = { ...updateArg, text: textArg, revision: cursorArg.revision };
+    const bytes = this.liveMessageUpdateBytes(update);
+    const existingBytes = this.liveTextStoredBytes.get(keyArg)
+      ?? this.liveTextBaselines.get(keyArg)?.bytes
+      ?? this.liveMessageUpdateBytes(updateArg);
+    if (this.liveMessageOverlayBytes - existingBytes + bytes > maxLiveToolOverlayBytes) {
+      this.deleteLiveTextUpdate(keyArg);
+      this.deleteLiveTextBaseline(keyArg);
+      return;
+    }
+    this.deleteLiveTextUpdate(keyArg);
+    this.deleteLiveTextBaseline(keyArg);
+    this.liveTextBaselines.set(keyArg, {
+      update,
+      textUtf8Bytes: browserTextEncoder.encode(textArg).byteLength,
+      bytes,
+    });
+    this.liveMessageOverlayBytes += bytes;
+  }
+
+  private storeLiveReasoningDeltaState(
+    keyArg: string,
+    updateArg: interfaces.IControllerReasoningUpdate,
+    textUtf8BytesArg: number,
+    deltaArg: string,
+  ): boolean {
+    const active = this.liveReasoningUpdates.get(keyArg);
+    const baseline = this.liveReasoningBaselines.get(keyArg);
+    const existingBytes = active
+      ? this.liveReasoningStoredBytes.get(keyArg) ?? this.liveMessageUpdateBytes(active)
+      : baseline?.bytes ?? 0;
+    const bytes = existingBytes + Math.max(
+      browserTextEncoder.encode(deltaArg).byteLength,
+      deltaArg.length * 6,
+    );
+    if (!active && !baseline) return false;
+    if (this.liveMessageOverlayBytes - existingBytes + bytes > maxLiveToolOverlayBytes) return false;
+    this.deleteLiveReasoningUpdate(keyArg);
+    this.deleteLiveReasoningBaseline(keyArg);
+    this.liveReasoningUpdates.set(keyArg, updateArg);
+    this.liveReasoningTextUtf8Bytes.set(keyArg, textUtf8BytesArg);
+    this.liveReasoningStoredBytes.set(keyArg, bytes);
+    this.liveMessageOverlayBytes += bytes;
+    return true;
+  }
+
+  private storeLiveTextDeltaState(
+    keyArg: string,
+    updateArg: interfaces.IControllerTextUpdate,
+    textUtf8BytesArg: number,
+    deltaArg: string,
+  ): boolean {
+    const active = this.liveTextUpdates.get(keyArg);
+    const baseline = this.liveTextBaselines.get(keyArg);
+    const existingBytes = active
+      ? this.liveTextStoredBytes.get(keyArg) ?? this.liveMessageUpdateBytes(active)
+      : baseline?.bytes ?? 0;
+    const bytes = existingBytes + Math.max(
+      browserTextEncoder.encode(deltaArg).byteLength,
+      deltaArg.length * 6,
+    );
+    if (!active && !baseline) return false;
+    if (this.liveMessageOverlayBytes - existingBytes + bytes > maxLiveToolOverlayBytes) return false;
+    this.deleteLiveTextUpdate(keyArg);
+    this.deleteLiveTextBaseline(keyArg);
+    this.liveTextUpdates.set(keyArg, updateArg);
+    this.liveTextTextUtf8Bytes.set(keyArg, textUtf8BytesArg);
+    this.liveTextStoredBytes.set(keyArg, bytes);
+    this.liveMessageOverlayBytes += bytes;
+    return true;
+  }
+
+  private liveMessageUpdateKey(
+    projectIdArg: string,
+    updateArg: interfaces.IControllerReasoningUpdate
+      | interfaces.IControllerTextUpdate
+      | interfaces.IControllerReasoningDelta
+      | interfaces.IControllerTextDelta,
+  ): string {
+    return `${projectIdArg}\0${controllerRuntimeIdToUiKey(updateArg.sessionId)}\0${controllerRuntimeIdToUiKey(updateArg.partId)}`;
+  }
+
+  private blockLiveMessageDeltas(
+    projectIdArg: string,
+    sessionIdArg: TBrowserSessionId,
+    streamEpochArg: number,
+    refreshArg = true,
+  ): void {
+    const sessionKey = this.sessionOperationKey(projectIdArg, sessionIdArg);
+    if (this.liveMessageDeltaBlocks.get(sessionKey)?.streamEpoch === streamEpochArg) return;
+    this.liveMessageDeltaBlocks.set(sessionKey, {
+      sessionId: sessionIdArg,
+      streamEpoch: streamEpochArg,
+    });
+    if (
+      refreshArg
+      && projectIdArg === this.selectedProjectId
+      && controllerRuntimeIdsEqual(sessionIdArg, this.selectedSessionId)
+    ) void this.refreshSelectedSessionDetail();
+  }
+
+  private liveMessageDeltasBlocked(
+    projectIdArg: string,
+    sessionIdArg: TBrowserSessionId,
+    streamEpochArg: number,
+  ): boolean {
+    return this.liveMessageDeltaBlocks.get(
+      this.sessionOperationKey(projectIdArg, sessionIdArg),
+    )?.streamEpoch === streamEpochArg;
+  }
+
   private acceptLiveToolEpoch(
     harnessIdArg: TBrowserSessionHarnessId,
     epochArg: number,
@@ -3067,6 +3380,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     harnessIdArg: TBrowserSessionHarnessId,
     epochArg: number,
     handleBarrierArg = true,
+    refreshSessionListArg = true,
   ): boolean {
     const currentEpoch = this.liveMessageStreamEpochs.get(harnessIdArg) ?? 0;
     if (epochArg < currentEpoch) return false;
@@ -3083,7 +3397,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           this.invalidateDetailEnrichment();
           void this.refreshSelectedSessionDetail();
         }
-        this.refreshSessionsNow();
+        if (refreshSessionListArg) this.refreshSessionsNow();
       }
     }
     return true;
@@ -3153,6 +3467,20 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     updateArg: interfaces.IControllerReasoningUpdate,
     detailArg: IControllerSessionRenderDetail,
   ): boolean {
+    const target = this.authoritativeReasoningTarget(updateArg, detailArg);
+    return target !== undefined
+      && (target.part.text === updateArg.text || target.part.text.startsWith(updateArg.text))
+      && (
+        updateArg.status === 'running'
+        || target.part.endedAt !== undefined
+        || target.message.streaming !== true
+      );
+  }
+
+  private authoritativeReasoningTarget(
+    updateArg: interfaces.IControllerReasoningUpdate,
+    detailArg: IControllerSessionRenderDetail,
+  ): { message: interfaces.IControllerMessage; part: interfaces.IControllerReasoningPart } | undefined {
     const message = detailArg.messages.find((messageArg) => (
       messageArg.role === 'assistant'
       && (
@@ -3169,16 +3497,24 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     const part = message?.reasoning?.find((partArg) => (
       controllerRuntimeIdsEqual(partArg.id, updateArg.partId)
     ));
-    return part !== undefined
-      && (part.text === updateArg.text || part.text.startsWith(updateArg.text))
-      && (updateArg.status === 'running' || part.endedAt !== undefined || message?.streaming !== true);
+    return message && part ? { message, part } : undefined;
   }
 
   private authoritativeTextUpdateCovers(
     updateArg: interfaces.IControllerTextUpdate,
     detailArg: IControllerSessionRenderDetail,
   ): boolean {
-    const message = detailArg.messages.find((messageArg) => (
+    const message = this.authoritativeTextTarget(updateArg, detailArg);
+    return message !== undefined
+      && (message.text === updateArg.text || message.text.startsWith(updateArg.text))
+      && (updateArg.status === 'running' || message.streaming !== true);
+  }
+
+  private authoritativeTextTarget(
+    updateArg: interfaces.IControllerTextUpdate,
+    detailArg: IControllerSessionRenderDetail,
+  ): interfaces.IControllerMessage | undefined {
+    return detailArg.messages.find((messageArg) => (
       messageArg.role === 'assistant'
       && (
         controllerRuntimeIdsEqual(messageArg.id, updateArg.partId)
@@ -3189,9 +3525,6 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         )
       )
     ));
-    return message !== undefined
-      && (message.text === updateArg.text || message.text.startsWith(updateArg.text))
-      && (updateArg.status === 'running' || message.streaming !== true);
   }
 
   private liveToolSnapshotIsNewer(
@@ -3259,6 +3592,257 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     return this.authoritativeToolCallCovers(merged, toolCallArg) ? undefined : merged;
   }
 
+  private ensureCanonicalChatProjection(
+    detailArg: IControllerSessionRenderDetail,
+    projectIdArg: string,
+    sessionIdArg: TBrowserSessionId,
+  ): ICanonicalChatProjection {
+    const key = this.sessionOperationKey(projectIdArg, sessionIdArg);
+    let projection = this.canonicalChatProjection;
+    if (!projection || projection.key !== key) {
+      projection = {
+        key,
+        sourceDetail: undefined,
+        messages: [],
+        messagesById: new Map(),
+        messagesByOrder: new Map(),
+        reasoningById: new Map(),
+      };
+      this.canonicalChatProjection = projection;
+      this.canonicalChatProjectionDirty = true;
+    }
+    if (projection.sourceDetail === detailArg && !this.canonicalChatProjectionDirty) {
+      return projection;
+    }
+
+    const messages = detailArg.messages
+      .filter((messageArg) => messageArg.toolCall?.name !== 'question')
+      .map((messageArg) => this.toHarnessMessage(messageArg, projectIdArg, sessionIdArg));
+    const visibleMessageIds = new Set(messages.map((message) => message.id));
+    for (const prompt of detailArg.pendingPrompts) {
+      const id = controllerRuntimeIdToUiKey(prompt.id);
+      if (visibleMessageIds.has(id)) continue;
+      visibleMessageIds.add(id);
+      messages.push({
+        id,
+        role: 'user',
+        text: prompt.text,
+        createdAt: prompt.createdAt,
+        markdown: false,
+        attachments: prompt.attachments.map((attachment) => ({ ...attachment })),
+      });
+    }
+    this.mergeLiveReasoningMessages(messages, projectIdArg, sessionIdArg);
+    this.mergeLiveTextMessages(messages, projectIdArg, sessionIdArg);
+    this.mergeLiveToolMessages(messages, projectIdArg, sessionIdArg);
+    const structureChanged = this.canonicalHarnessStructureChanged(
+      projection.messages,
+      messages,
+    );
+    this.reconcileCanonicalHarnessMessages(projection, messages);
+    this.canonicalTimelineRefreshPending ||= structureChanged;
+    projection.sourceDetail = detailArg;
+    this.canonicalChatProjectionDirty = false;
+    return projection;
+  }
+
+  private canonicalHarnessStructureChanged(
+    currentArg: readonly plugins.deesCatalog.IHarnessMessage[],
+    nextArg: readonly plugins.deesCatalog.IHarnessMessage[],
+  ): boolean {
+    return currentArg.length !== nextArg.length || currentArg.some((current, index) => {
+      const next = nextArg[index];
+      return !next
+        || current.id !== next.id
+        || current.role !== next.role
+        || current.toolCall?.id !== next.toolCall?.id
+        || current.toolCall?.name !== next.toolCall?.name
+        || !this.liveMessageOrdersEqual(current.order, next.order);
+    });
+  }
+
+  private reconcileCanonicalHarnessMessages(
+    projectionArg: ICanonicalChatProjection,
+    nextMessagesArg: plugins.deesCatalog.IHarnessMessage[],
+  ): void {
+    const currentById = new Map(
+      projectionArg.messages.map((message) => [message.id, message]),
+    );
+    const reconciled = nextMessagesArg.map((nextMessage) => {
+      const current = currentById.get(nextMessage.id);
+      if (!current) return nextMessage;
+      if (!controllerJsonValuesEqual(current, nextMessage)) {
+        this.canonicalMessageRefreshIds.add(current.id);
+      }
+      this.reconcileCanonicalHarnessMessage(current, nextMessage);
+      return current;
+    });
+    projectionArg.messages.splice(0, projectionArg.messages.length, ...reconciled);
+    this.rebuildCanonicalChatIndexes(projectionArg);
+  }
+
+  private reconcileCanonicalHarnessMessage(
+    targetArg: plugins.deesCatalog.IHarnessMessage,
+    sourceArg: plugins.deesCatalog.IHarnessMessage,
+  ): void {
+    const targetReasoning = targetArg.reasoning;
+    const sourceReasoning = sourceArg.reasoning;
+    const targetToolCall = targetArg.toolCall;
+    const sourceToolCall = sourceArg.toolCall;
+    const target = targetArg as unknown as Record<string, unknown>;
+    const source = sourceArg as unknown as Record<string, unknown>;
+    for (const key of Object.keys(target)) {
+      if (!(key in source)) delete target[key];
+    }
+    for (const [key, value] of Object.entries(source)) {
+      if (key !== 'reasoning' && key !== 'toolCall') target[key] = value;
+    }
+
+    if (sourceReasoning) {
+      const currentById = new Map((targetReasoning ?? []).map((part) => [part.id, part]));
+      const reasoning = sourceReasoning.map((sourcePart) => {
+        const currentPart = currentById.get(sourcePart.id);
+        if (!currentPart) return sourcePart;
+        const current = currentPart as unknown as Record<string, unknown>;
+        const next = sourcePart as unknown as Record<string, unknown>;
+        for (const key of Object.keys(current)) {
+          if (!(key in next)) delete current[key];
+        }
+        Object.assign(current, next);
+        return currentPart;
+      });
+      if (targetReasoning) targetReasoning.splice(0, targetReasoning.length, ...reasoning);
+      else targetArg.reasoning = reasoning;
+    }
+
+    if (sourceToolCall) {
+      if (targetToolCall?.id === sourceToolCall.id) {
+        const current = targetToolCall as unknown as Record<string, unknown>;
+        const next = sourceToolCall as unknown as Record<string, unknown>;
+        for (const key of Object.keys(current)) {
+          if (!(key in next)) delete current[key];
+        }
+        Object.assign(current, next);
+        targetArg.toolCall = targetToolCall;
+      } else {
+        targetArg.toolCall = sourceToolCall;
+      }
+    }
+  }
+
+  private rebuildCanonicalChatIndexes(projectionArg: ICanonicalChatProjection): void {
+    projectionArg.messagesById.clear();
+    projectionArg.messagesByOrder.clear();
+    projectionArg.reasoningById.clear();
+    for (const message of projectionArg.messages) {
+      projectionArg.messagesById.set(message.id, message);
+      if (message.order && !projectionArg.messagesByOrder.has(transcriptOrderKey(message.order))) {
+        projectionArg.messagesByOrder.set(transcriptOrderKey(message.order), message);
+      }
+      for (const part of message.reasoning ?? []) {
+        projectionArg.reasoningById.set(part.id, { message, part });
+      }
+    }
+  }
+
+  private selectedCanonicalChatProjection(
+    projectIdArg: string,
+    sessionIdArg: TBrowserSessionId,
+  ): ICanonicalChatProjection | undefined {
+    const detail = this.sessionDetail;
+    if (
+      projectIdArg !== this.selectedProjectId
+      || !detail
+      || !controllerRuntimeIdsEqual(detail.session.id, sessionIdArg)
+      || !controllerRuntimeIdsEqual(this.selectedSessionId, sessionIdArg)
+    ) return undefined;
+    return this.ensureCanonicalChatProjection(detail, projectIdArg, sessionIdArg);
+  }
+
+  private canonicalTextTarget(
+    projectionArg: ICanonicalChatProjection,
+    updateArg: interfaces.IControllerTextUpdate | interfaces.IControllerTextDelta,
+  ): plugins.deesCatalog.IHarnessMessage | undefined {
+    return projectionArg.messagesById.get(controllerRuntimeIdToUiKey(updateArg.messageId))
+      ?? projectionArg.messagesById.get(controllerRuntimeIdToUiKey(updateArg.partId))
+      ?? (updateArg.order
+        ? projectionArg.messagesByOrder.get(transcriptOrderKey(updateArg.order))
+        : undefined);
+  }
+
+  private canonicalReasoningTarget(
+    projectionArg: ICanonicalChatProjection,
+    updateArg: interfaces.IControllerReasoningUpdate | interfaces.IControllerReasoningDelta,
+  ): ICanonicalReasoningTarget | undefined {
+    const reasoningId = controllerRuntimeIdToUiKey(updateArg.partId);
+    const partTarget = projectionArg.reasoningById.get(reasoningId);
+    const message = projectionArg.messagesById.get(controllerRuntimeIdToUiKey(updateArg.messageId))
+      ?? partTarget?.message
+      ?? (updateArg.order
+        ? projectionArg.messagesByOrder.get(transcriptOrderKey(updateArg.order))
+        : undefined);
+    if (!message) return undefined;
+    const part = partTarget?.message === message
+      ? partTarget.part
+      : message.reasoning?.find((candidate) => candidate.id === reasoningId);
+    return part ? { message, part } : undefined;
+  }
+
+  private mountedCanonicalChat(
+    projectionArg: ICanonicalChatProjection,
+  ): InstanceType<typeof plugins.deesCatalog.DeesHarnessChat> | undefined {
+    const chat = this.shadowRoot?.querySelector('dees-harness-chat');
+    return chat instanceof plugins.deesCatalog.DeesHarnessChat
+      && chat.messages === projectionArg.messages
+      && chat.transcriptKey === projectionArg.key
+      ? chat
+      : undefined;
+  }
+
+  private applyCanonicalTextDelta(
+    projectionArg: ICanonicalChatProjection,
+    messageArg: plugins.deesCatalog.IHarnessMessage,
+    deltaArg: string,
+  ): boolean {
+    const previousText = messageArg.text;
+    const expectedText = `${previousText}${deltaArg}`;
+    const chat = this.mountedCanonicalChat(projectionArg);
+    chat?.applyDelta({ type: 'text', messageId: messageArg.id, delta: deltaArg });
+    if (messageArg.text === previousText) {
+      messageArg.text = expectedText;
+      messageArg.streaming = true;
+    }
+    if (messageArg.text === expectedText) return true;
+    messageArg.text = previousText;
+    return false;
+  }
+
+  private applyCanonicalReasoningDelta(
+    projectionArg: ICanonicalChatProjection,
+    targetArg: ICanonicalReasoningTarget,
+    deltaArg: string,
+  ): boolean {
+    const previousText = targetArg.part.text;
+    const expectedText = `${previousText}${deltaArg}`;
+    const chat = this.mountedCanonicalChat(projectionArg);
+    chat?.applyDelta({
+      type: 'reasoning',
+      messageId: targetArg.message.id,
+      partId: targetArg.part.id,
+      delta: deltaArg,
+    });
+    if (targetArg.part.text === previousText) targetArg.part.text = expectedText;
+    if (targetArg.part.text === expectedText) return true;
+    targetArg.part.text = previousText;
+    return false;
+  }
+
+  private requestCanonicalChatReconciliation(structureMayChangeArg = true): void {
+    this.canonicalChatProjectionDirty = true;
+    this.canonicalTimelineRefreshPending ||= structureMayChangeArg;
+    this.requestUpdate();
+  }
+
   private applyLiveToolExecution(
     projectIdArg: string,
     executionArg: interfaces.IControllerToolExecution,
@@ -3332,24 +3916,22 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     }
     this.reconcileSubtaskPreviews(projectIdArg, executionArg.sessionId);
 
-    const chat = this.shadowRoot?.querySelector('dees-harness-chat');
+    const projection = this.selectedCanonicalChatProjection(projectIdArg, executionArg.sessionId);
+    if (projection && this.canonicalTimelineRefreshPending) this.requestUpdate();
     const messageId = controllerRuntimeIdToUiKey(execution.partId);
     const harnessToolCall = this.toHarnessLiveToolCall(execution, projectIdArg);
-    if (
-      chat instanceof plugins.deesCatalog.DeesHarnessChat
-      && chat.messages.some((messageArg) => messageArg.id === messageId)
-    ) {
-      const message = chat.messages.find((messageArg) => messageArg.id === messageId)!;
+    const message = projection?.messagesById.get(messageId);
+    if (projection && message) {
       message.toolCall = harnessToolCall;
       message.streaming = execution.status === 'pending' || execution.status === 'running';
       message.updatedAt = execution.finishedAt ?? execution.sourceUpdatedAt;
-      chat.applyDelta({
+      this.mountedCanonicalChat(projection)?.applyDelta({
         type: 'tool-update',
         messageId,
         tool: harnessToolCall,
       });
     } else {
-      this.requestUpdate();
+      this.requestCanonicalChatReconciliation();
     }
   }
 
@@ -3388,23 +3970,59 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     if (cursorArg.streamEpoch < (this.liveMessageStreamEpochs.get(harnessId) ?? 0)) return false;
     if (!this.acceptLiveMessageEpoch(harnessId, cursorArg.streamEpoch, false)) return false;
     const sessionKey = this.liveToolSessionKey(projectIdArg, sessionIdArg);
+    const deltaBlockKey = this.sessionOperationKey(projectIdArg, sessionIdArg);
+    const recoveringDeltaGap = this.liveMessageDeltaBlocks.get(deltaBlockKey)?.streamEpoch
+      === cursorArg.streamEpoch;
     this.liveMessageHydrationFloors.set(sessionKey, { sessionId: sessionIdArg, cursor: cursorArg });
     for (const [key, update] of this.liveReasoningUpdates) {
+      const target = this.authoritativeReasoningTarget(update, detailArg);
       if (
         key.startsWith(`${projectIdArg}\0`)
         && controllerRuntimeIdsEqual(update.sessionId, sessionIdArg)
         && this.hydrationCursorCovers(cursorArg, update)
-        && this.authoritativeReasoningUpdateCovers(update, detailArg)
-      ) this.deleteLiveReasoningUpdate(key);
+        && target !== undefined
+        && (recoveringDeltaGap || this.authoritativeReasoningUpdateCovers(update, detailArg))
+      ) this.retireLiveReasoningUpdateToBaseline(key, update, target.part.text, cursorArg);
     }
     for (const [key, update] of this.liveTextUpdates) {
+      const target = this.authoritativeTextTarget(update, detailArg);
       if (
         key.startsWith(`${projectIdArg}\0`)
         && controllerRuntimeIdsEqual(update.sessionId, sessionIdArg)
         && this.hydrationCursorCovers(cursorArg, update)
-        && this.authoritativeTextUpdateCovers(update, detailArg)
-      ) this.deleteLiveTextUpdate(key);
+        && target !== undefined
+        && (recoveringDeltaGap || this.authoritativeTextUpdateCovers(update, detailArg))
+      ) this.retireLiveTextUpdateToBaseline(key, update, target.text, cursorArg);
+    }
+    for (const [key, baseline] of [...this.liveReasoningBaselines]) {
+      const update = baseline.update;
+      if (
+        !key.startsWith(`${projectIdArg}\0`)
+        || !controllerRuntimeIdsEqual(update.sessionId, sessionIdArg)
+        || !this.hydrationCursorCovers(cursorArg, update)
+      ) continue;
+      const target = this.authoritativeReasoningTarget(update, detailArg);
+      if (target) {
+        this.retireLiveReasoningUpdateToBaseline(key, update, target.part.text, cursorArg);
+      } else if (recoveringDeltaGap) {
+        this.deleteLiveReasoningBaseline(key);
+      }
+    }
+    for (const [key, baseline] of [...this.liveTextBaselines]) {
+      const update = baseline.update;
+      if (
+        !key.startsWith(`${projectIdArg}\0`)
+        || !controllerRuntimeIdsEqual(update.sessionId, sessionIdArg)
+        || !this.hydrationCursorCovers(cursorArg, update)
+      ) continue;
+      const target = this.authoritativeTextTarget(update, detailArg);
+      if (target) {
+        this.retireLiveTextUpdateToBaseline(key, update, target.text, cursorArg);
+      } else if (recoveringDeltaGap) {
+        this.deleteLiveTextBaseline(key);
+      }
     }
+    this.liveMessageDeltaBlocks.delete(deltaBlockKey);
     return true;
   }
 
@@ -3448,6 +4066,30 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         || !controllerRuntimeIdsEqual(update.sessionId, sessionId)
       ) this.deleteLiveTextUpdate(key);
     }
+    for (const [key, baseline] of this.liveReasoningBaselines) {
+      if (
+        !projectId
+        || !isSessionRuntimeId(sessionId)
+        || !key.startsWith(`${projectId}\0`)
+        || !controllerRuntimeIdsEqual(baseline.update.sessionId, sessionId)
+      ) this.deleteLiveReasoningBaseline(key);
+    }
+    for (const [key, baseline] of this.liveTextBaselines) {
+      if (
+        !projectId
+        || !isSessionRuntimeId(sessionId)
+        || !key.startsWith(`${projectId}\0`)
+        || !controllerRuntimeIdsEqual(baseline.update.sessionId, sessionId)
+      ) this.deleteLiveTextBaseline(key);
+    }
+    for (const [key, block] of this.liveMessageDeltaBlocks) {
+      if (
+        !projectId
+        || !isSessionRuntimeId(sessionId)
+        || key !== this.sessionOperationKey(projectId, sessionId)
+        || !controllerRuntimeIdsEqual(block.sessionId, sessionId)
+      ) this.liveMessageDeltaBlocks.delete(key);
+    }
   }
 
   private subtaskPreviewKey(
@@ -3667,7 +4309,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       if (isBusy) this.queueSubtaskPreviewHydration(entry);
       changed = true;
     }
-    if (changed) this.requestUpdate();
+    if (changed) this.requestCanonicalChatReconciliation();
   }
 
   private queueSubtaskPreviewHydration(entryArg: ISubtaskPreviewEntry): void {
@@ -3795,7 +4437,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         messages,
         ...((page.truncated === true || page.nextCursor !== undefined) ? { truncated: true } : {}),
       };
-      this.requestUpdate();
+      this.requestCanonicalChatReconciliation();
     } catch {
       if (abortControllerArg.signal.aborted) return;
       if (!this.subtaskPreviewEntryIsCurrent(entryArg)) return;
@@ -3807,7 +4449,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
             status: entryArg.stream.status,
             notice: subtaskPreviewUnavailableNotice,
           };
-      this.requestUpdate();
+      this.requestCanonicalChatReconciliation();
     }
   }
 
@@ -3840,7 +4482,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         this.queueSubtaskPreviewHydration(entry);
       }, subtaskPreviewRefreshDelayMs);
     }
-    if (changed) this.requestUpdate();
+    if (changed) this.requestCanonicalChatReconciliation();
   }
 
   private clearSubtaskPreviewState(): void {
@@ -3851,6 +4493,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     }
     this.subtaskPreviewEntries.clear();
     this.subtaskPreviewHydrationQueue = [];
+    this.canonicalChatProjectionDirty = true;
   }
 
   private applySessionEventState(eventArg: interfaces.IControllerEvent): void {
@@ -4001,7 +4644,9 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         && this.socketClient.isConnected
       ) {
         this.refreshPending = false;
-        await this.performSessionRefresh();
+        const includeRelated = this.refreshRelatedPending;
+        this.refreshRelatedPending = false;
+        await this.performSessionRefresh(includeRelated);
       }
     } finally {
       this.refreshInFlight = undefined;
@@ -4041,7 +4686,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     }
   }
 
-  private async performSessionRefresh(): Promise<void> {
+  private async performSessionRefresh(includeRelatedArg = true): Promise<void> {
     const projectId = this.selectedProjectId;
     if (!isNonEmptyString(projectId)) {
       this.sessions = [];
@@ -4062,10 +4707,14 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         && controllerRuntimeIdsEqual(sessionArg.id, selectedSessionAtStart)
         && sessionArg.archivedAt !== undefined
       ));
-    if (selectedSessionAtStart) void this.refreshSelectedSessionDetail(false);
-    void this.loadSessionGroups();
-    void this.loadTerminals();
-    void this.loadResources();
+    if (includeRelatedArg && selectedSessionAtStart) {
+      void this.refreshSelectedSessionDetail(false);
+    }
+    if (includeRelatedArg) {
+      void this.loadSessionGroups();
+      void this.loadTerminals();
+      void this.loadResources();
+    }
     // The loading state is for a list we cannot show yet; background refreshes
     // must not flip it, or the sidebar flashes on every pushed event.
     const initialLoad = this.sessionsLoadedForProjectId !== projectId;
@@ -4091,11 +4740,12 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         ? response.sessions.filter(hasSessionRuntimeId)
         : [];
       this.applySessionSnapshot(projectId, nextSessions, requestEventRevision);
-      // Keep the array identity stable when nothing changed so the list does
-      // not re-render for every no-op refresh.
-      if (JSON.stringify(nextSessions) !== JSON.stringify(this.sessions)) {
-        this.sessions = nextSessions;
-      }
+      const reconciledSessions = reconcileKeyedJsonArray(
+        this.sessions,
+        nextSessions,
+        (session) => controllerRuntimeIdToUiKey(session.id),
+      );
+      if (reconciledSessions !== this.sessions) this.sessions = reconciledSessions;
       const selectedSessionBecameArchived = selectedSessionAtStart !== undefined
         && !selectedSessionWasArchived
         && this.sessions.some((sessionArg) => (
@@ -4171,6 +4821,107 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     }
   }
 
+  private reconcileControllerMessages(
+    currentArg: readonly interfaces.IControllerMessage[],
+    nextArg: readonly interfaces.IControllerMessage[],
+  ): interfaces.IControllerMessage[] {
+    return reconcileKeyedJsonArray(
+      currentArg,
+      nextArg,
+      (message) => controllerRuntimeIdToUiKey(message.id),
+    );
+  }
+
+  private reconcileControllerMessageBundles(
+    currentArg: readonly interfaces.IControllerMessageBundle[],
+    nextArg: readonly interfaces.IControllerMessageBundle[],
+  ): interfaces.IControllerMessageBundle[] {
+    const currentByKey = new Map(currentArg.map((bundle) => [
+      controllerRuntimeIdToUiKey(bundle.sourceMessageId),
+      bundle,
+    ]));
+    let unchanged = currentArg.length === nextArg.length;
+    const bundles = nextArg.map((nextBundle, index) => {
+      const current = currentByKey.get(controllerRuntimeIdToUiKey(nextBundle.sourceMessageId));
+      if (!current) {
+        unchanged = false;
+        return nextBundle;
+      }
+      const messages = this.reconcileControllerMessages(current.messages, nextBundle.messages);
+      const bundle = current.structuralDigest === nextBundle.structuralDigest
+        && messages === current.messages
+        && controllerRuntimeIdsEqual(current.sourceMessageId, nextBundle.sourceMessageId)
+        ? current
+        : { ...nextBundle, messages };
+      unchanged &&= bundle === currentArg[index];
+      return bundle;
+    });
+    return unchanged ? currentArg as interfaces.IControllerMessageBundle[] : bundles;
+  }
+
+  private reconcileSessionRenderDetail(
+    currentArg: IControllerSessionRenderDetail | undefined,
+    nextArg: IControllerSessionRenderDetail,
+  ): IControllerSessionRenderDetail {
+    if (!currentArg || !controllerRuntimeIdsEqual(currentArg.session.id, nextArg.session.id)) {
+      return nextArg;
+    }
+    const reuse = <TValue>(currentValueArg: TValue, nextValueArg: TValue): TValue => (
+      controllerJsonValuesEqual(currentValueArg, nextValueArg) ? currentValueArg : nextValueArg
+    );
+    const messages = this.reconcileControllerMessages(currentArg.messages, nextArg.messages);
+    const pendingPrompts = reconcileKeyedJsonArray(
+      currentArg.pendingPrompts,
+      nextArg.pendingPrompts,
+      (prompt) => controllerRuntimeIdToUiKey(prompt.id),
+    );
+    const permissions = reconcileKeyedJsonArray(
+      currentArg.permissions,
+      nextArg.permissions,
+      (permission) => controllerRuntimeIdToUiKey(permission.id),
+    );
+    const questions = reconcileKeyedJsonArray(
+      currentArg.questions,
+      nextArg.questions,
+      (question) => controllerRuntimeIdToUiKey(question.id),
+    );
+    const todos = reconcileKeyedJsonArray(
+      currentArg.todos,
+      nextArg.todos,
+      (todo, index) => todo.id ? controllerRuntimeIdToUiKey(todo.id) : `index:${index}`,
+    );
+    const intelligenceExchanges = reconcileKeyedJsonArray(
+      currentArg.intelligenceExchanges,
+      nextArg.intelligenceExchanges,
+      (exchange) => exchange.id,
+    );
+    const detail: IControllerSessionRenderDetail = {
+      ...nextArg,
+      session: reuse(currentArg.session, nextArg.session),
+      messages,
+      pendingPrompts,
+      permissions,
+      questions,
+      todos,
+      scratchpad: reuse(currentArg.scratchpad, nextArg.scratchpad),
+      intelligenceExchanges,
+      sessionMetrics: reuse(currentArg.sessionMetrics, nextArg.sessionMetrics),
+      toolStreamCursor: reuse(currentArg.toolStreamCursor, nextArg.toolStreamCursor),
+      messageStreamCursor: reuse(currentArg.messageStreamCursor, nextArg.messageStreamCursor),
+      ...(nextArg.modelChoice === undefined
+        ? {}
+        : { modelChoice: reuse(currentArg.modelChoice, nextArg.modelChoice) }),
+    };
+    const current = currentArg as unknown as Record<string, unknown>;
+    const reconciled = detail as unknown as Record<string, unknown>;
+    const currentKeys = Object.keys(current);
+    const nextKeys = Object.keys(reconciled);
+    return currentKeys.length === nextKeys.length
+      && nextKeys.every((key) => Object.is(current[key], reconciled[key]))
+      ? currentArg
+      : detail;
+  }
+
   private async loadSessionDetail(
     sessionIdArg: TBrowserSessionId,
     restartEnrichmentArg = true,
@@ -4240,9 +4991,14 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       const historyBecameTerminal = sameSession
         && this.detailHistoryCursor !== undefined
         && response.messagePage.nextCursor === undefined;
+      const sessionBecameSettled = sameSession
+        && (currentDetail!.session.status === 'busy' || currentDetail!.session.status === 'retry')
+        && response.session.status !== 'busy'
+        && response.session.status !== 'retry';
       const restartEnrichment = restartEnrichmentArg
         || coreBoundaryChanged
         || historyBecameTerminal
+        || sessionBecameSettled
         || toolEpochAdvanced
         || messageEpochAdvanced;
       const nextCoreBundleKeySet = new Set(nextCoreBundleKeys);
@@ -4279,6 +5035,10 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         ));
         provisionalBundleKeys.clear();
       }
+      accumulated.bundles = this.reconcileControllerMessageBundles(
+        this.detailBundles,
+        accumulated.bundles,
+      );
       const { messagePage, ...coreDetail } = response;
       const renderDetail: IControllerSessionRenderDetail = {
         ...coreDetail,
@@ -4351,9 +5111,9 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           unavailable: this.detailHistoryLimits.unavailable,
         };
       }
-      if (JSON.stringify(renderDetail) !== JSON.stringify(this.sessionDetail)) {
-        this.sessionDetail = renderDetail;
-      }
+      const reconciledDetail = this.reconcileSessionRenderDetail(this.sessionDetail, renderDetail);
+      if (reconciledDetail !== this.sessionDetail) this.sessionDetail = reconciledDetail;
+      this.ensureCanonicalChatProjection(reconciledDetail, projectId, sessionIdArg);
       this.reconcileSubtaskPreviews(projectId, sessionIdArg);
       // A draft that materialized keeps its placeholder view until this first
       // real detail arrives; now the actual chat takes over.
@@ -4417,6 +5177,10 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     this.detailHistoryOwnership = undefined;
     this.detailHistoryLimits = emptyDetailHistoryLimits();
     this.detailHistoryStatus = 'idle';
+    this.canonicalChatProjection = undefined;
+    this.canonicalChatProjectionDirty = false;
+    this.canonicalTimelineRefreshPending = false;
+    this.canonicalMessageRefreshIds.clear();
   }
 
   private invalidateDetailEnrichment(): void {
@@ -4546,14 +5310,19 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         (bundle) => controllerRuntimeIdToUiKey(bundle.sourceMessageId),
       );
       if (provisionalContentChanged || !sameStringArray(previousKeys, nextKeys)) {
-        this.detailBundles = bounded.bundles;
+        this.detailBundles = this.reconcileControllerMessageBundles(
+          this.detailBundles,
+          bounded.bundles,
+        );
         this.detailBundleKeys = new Set(nextKeys);
         const detail = this.sessionDetail;
         if (!detail || !controllerRuntimeIdsEqual(detail.session.id, ownership.sessionId)) return;
-        this.sessionDetail = {
+        const nextDetail = this.reconcileSessionRenderDetail(detail, {
           ...detail,
-          messages: bounded.bundles.flatMap((bundle) => bundle.messages),
-        };
+          messages: this.detailBundles.flatMap((bundle) => bundle.messages),
+        });
+        if (nextDetail !== detail) this.sessionDetail = nextDetail;
+        this.ensureCanonicalChatProjection(nextDetail, ownership.projectId, ownership.sessionId);
       }
       this.detailHistoryCursor = nextCursor;
       if (nextCursor !== undefined) this.detailHistorySeenCursors.add(nextCursor);
@@ -6702,9 +7471,12 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       const terminals = Array.isArray(response.terminals)
         ? response.terminals.filter(hasTerminalRuntimeId)
         : [];
-      if (JSON.stringify(terminals) !== JSON.stringify(this.terminals)) {
-        this.terminals = terminals;
-      }
+      const reconciledTerminals = reconcileKeyedJsonArray(
+        this.terminals,
+        terminals,
+        (terminal) => controllerRuntimeIdToUiKey(terminal.id),
+      );
+      if (reconciledTerminals !== this.terminals) this.terminals = reconciledTerminals;
       this.terminalsLoadedForProjectId = projectId;
       if (
         this.selectedTerminalId !== undefined
@@ -6976,6 +7748,17 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
   public updated(changedPropertiesArg: Map<PropertyKey, unknown>): void {
     super.updated(changedPropertiesArg);
     this.flushComposerFocus();
+    const projection = this.canonicalChatProjection;
+    const chat = projection ? this.mountedCanonicalChat(projection) : undefined;
+    if (this.canonicalTimelineRefreshPending) {
+      this.canonicalTimelineRefreshPending = false;
+      this.canonicalMessageRefreshIds.clear();
+      chat?.refreshMessages();
+    } else if (this.canonicalMessageRefreshIds.size > 0) {
+      const messageIds = [...this.canonicalMessageRefreshIds];
+      this.canonicalMessageRefreshIds.clear();
+      chat?.refreshMessages(messageIds);
+    }
     if (
       changedPropertiesArg.has('selectedProjectId')
       || changedPropertiesArg.has('selectedSessionId')
@@ -7928,6 +8711,417 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     }
   }
 
+  private liveMessageOrdersEqual(
+    leftArg: interfaces.IControllerTranscriptOrder | undefined,
+    rightArg: interfaces.IControllerTranscriptOrder | undefined,
+  ): boolean {
+    return leftArg === undefined
+      ? rightArg === undefined
+      : rightArg !== undefined
+        && leftArg.messageIndex === rightArg.messageIndex
+        && leftArg.partIndex === rightArg.partIndex;
+  }
+
+  private liveMessageIdentityMatches(
+    previousArg: interfaces.IControllerReasoningUpdate | interfaces.IControllerTextUpdate,
+    deltaArg: interfaces.IControllerReasoningDelta | interfaces.IControllerTextDelta,
+  ): boolean {
+    return controllerRuntimeIdsEqual(previousArg.sessionId, deltaArg.sessionId)
+      && controllerRuntimeIdsEqual(previousArg.messageId, deltaArg.messageId)
+      && controllerRuntimeIdsEqual(previousArg.partId, deltaArg.partId)
+      && this.liveMessageOrdersEqual(previousArg.order, deltaArg.order);
+  }
+
+  private liveMessageEventPassesBarriers(
+    projectIdArg: string,
+    updateArg: interfaces.IControllerReasoningUpdate
+      | interfaces.IControllerTextUpdate
+      | interfaces.IControllerReasoningDelta
+      | interfaces.IControllerTextDelta,
+  ): { accepted: boolean; epochAdvanced: boolean } {
+    if (!isSessionRuntimeId(updateArg.sessionId)) {
+      return { accepted: false, epochAdvanced: false };
+    }
+    if (
+      updateArg.sourceUpdatedAt
+      <= (this.liveHistoryBarriers.get(
+        this.liveToolSessionKey(projectIdArg, updateArg.sessionId),
+      ) ?? Number.NEGATIVE_INFINITY)
+    ) return { accepted: false, epochAdvanced: false };
+    const previousEpoch = this.liveMessageStreamEpochs.get(updateArg.sessionId.harnessId) ?? 0;
+    const accepted = this.acceptLiveMessageEpoch(
+      updateArg.sessionId.harnessId,
+      updateArg.streamEpoch,
+      true,
+      false,
+    );
+    return { accepted, epochAdvanced: accepted && updateArg.streamEpoch > previousEpoch };
+  }
+
+  private refreshAfterTerminalLiveMessage(
+    projectIdArg: string,
+    sessionIdArg: TBrowserSessionId,
+  ): void {
+    if (
+      projectIdArg !== this.selectedProjectId
+      || !controllerRuntimeIdsEqual(sessionIdArg, this.selectedSessionId)
+    ) return;
+    void this.refreshSelectedSessionDetail();
+    void this.refreshSessions(false);
+  }
+
+  private applyLiveReasoningUpdate(
+    projectIdArg: string,
+    updateArg: interfaces.IControllerReasoningUpdate,
+  ): void {
+    if (!isSessionRuntimeId(updateArg.sessionId)) return;
+    const sessionId = updateArg.sessionId;
+    const barrier = this.liveMessageEventPassesBarriers(projectIdArg, updateArg);
+    if (!barrier.accepted) return;
+    if (controllerRuntimeIdsEqual(updateArg.sessionId, this.subagentModalSessionId)) {
+      this.scheduleSubagentModalRefresh();
+    }
+    if (
+      projectIdArg !== this.selectedProjectId
+      || !controllerRuntimeIdsEqual(updateArg.sessionId, this.selectedSessionId)
+    ) return;
+    const floor = this.liveMessageHydrationFloors.get(
+      this.liveToolSessionKey(projectIdArg, updateArg.sessionId),
+    )?.cursor;
+    if (
+      floor
+      && floor.streamEpoch === updateArg.streamEpoch
+      && updateArg.revision <= floor.revision
+    ) return;
+    const key = this.liveMessageUpdateKey(projectIdArg, updateArg);
+    const previous = this.liveReasoningUpdates.get(key)
+      ?? this.liveReasoningBaselines.get(key)?.update;
+    if (
+      previous
+      && previous.streamEpoch === updateArg.streamEpoch
+      && updateArg.revision <= previous.revision
+    ) return;
+    if (!this.storeLiveReasoningUpdate(key, updateArg)) {
+      this.blockLiveMessageDeltas(
+        projectIdArg,
+        sessionId,
+        updateArg.streamEpoch,
+        !barrier.epochAdvanced,
+      );
+      return;
+    }
+
+    const projection = this.selectedCanonicalChatProjection(projectIdArg, sessionId);
+    if (projection && this.canonicalTimelineRefreshPending) this.requestUpdate();
+    const target = projection ? this.canonicalReasoningTarget(projection, updateArg) : undefined;
+    if (!projection || !target) {
+      this.requestCanonicalChatReconciliation();
+    } else if (!this.harnessMessageIsTerminal(target.message)) {
+      const previousStreaming = target.message.streaming === true;
+      const previousText = target.part.text;
+      let correction = !updateArg.text.startsWith(previousText);
+      if (!correction && updateArg.text.length > previousText.length) {
+        correction = !this.applyCanonicalReasoningDelta(
+          projection,
+          target,
+          updateArg.text.slice(previousText.length),
+        );
+      }
+      if (correction) target.part.text = updateArg.text;
+      target.part.startedAt = updateArg.sourceUpdatedAt;
+      if (updateArg.status === 'running') delete target.part.endedAt;
+      target.message.streaming = updateArg.status === 'running'
+        || (updateArg.sessionId.harnessId === 'opencode' && previousStreaming);
+      if (
+        !correction
+        && updateArg.status === 'running'
+        && !previousStreaming
+        && updateArg.text === previousText
+      ) {
+        this.mountedCanonicalChat(projection)?.applyDelta({
+          type: 'reasoning',
+          messageId: target.message.id,
+          partId: target.part.id,
+          delta: '',
+        });
+      }
+      if (updateArg.status !== 'running') {
+        this.mountedCanonicalChat(projection)?.applyDelta({
+          type: 'reasoning-end',
+          messageId: target.message.id,
+          partId: target.part.id,
+          endedAt: updateArg.sourceUpdatedAt,
+        });
+        target.part.endedAt = updateArg.sourceUpdatedAt;
+      }
+      if (correction) {
+        this.canonicalMessageRefreshIds.add(target.message.id);
+        this.requestCanonicalChatReconciliation(false);
+      }
+    }
+    if (updateArg.status !== 'running') {
+      this.refreshAfterTerminalLiveMessage(projectIdArg, sessionId);
+    }
+  }
+
+  private applyLiveTextUpdate(
+    projectIdArg: string,
+    updateArg: interfaces.IControllerTextUpdate,
+  ): void {
+    if (!isSessionRuntimeId(updateArg.sessionId)) return;
+    const sessionId = updateArg.sessionId;
+    const barrier = this.liveMessageEventPassesBarriers(projectIdArg, updateArg);
+    if (!barrier.accepted) return;
+    if (controllerRuntimeIdsEqual(updateArg.sessionId, this.subagentModalSessionId)) {
+      this.scheduleSubagentModalRefresh();
+    }
+    if (
+      projectIdArg !== this.selectedProjectId
+      || !controllerRuntimeIdsEqual(updateArg.sessionId, this.selectedSessionId)
+    ) return;
+    const floor = this.liveMessageHydrationFloors.get(
+      this.liveToolSessionKey(projectIdArg, updateArg.sessionId),
+    )?.cursor;
+    if (
+      floor
+      && floor.streamEpoch === updateArg.streamEpoch
+      && updateArg.revision <= floor.revision
+    ) return;
+    const key = this.liveMessageUpdateKey(projectIdArg, updateArg);
+    const previous = this.liveTextUpdates.get(key) ?? this.liveTextBaselines.get(key)?.update;
+    if (
+      previous
+      && previous.streamEpoch === updateArg.streamEpoch
+      && updateArg.revision <= previous.revision
+    ) return;
+    if (!this.storeLiveTextUpdate(key, updateArg)) {
+      this.blockLiveMessageDeltas(
+        projectIdArg,
+        sessionId,
+        updateArg.streamEpoch,
+        !barrier.epochAdvanced,
+      );
+      return;
+    }
+
+    const projection = this.selectedCanonicalChatProjection(projectIdArg, sessionId);
+    if (projection && this.canonicalTimelineRefreshPending) this.requestUpdate();
+    const target = projection ? this.canonicalTextTarget(projection, updateArg) : undefined;
+    if (!projection || !target) {
+      this.requestCanonicalChatReconciliation();
+    } else if (!this.harnessMessageIsTerminal(target)) {
+      const previousStreaming = target.streaming === true;
+      const previousText = target.text;
+      let correction = !updateArg.text.startsWith(previousText);
+      if (!correction && updateArg.text.length > previousText.length) {
+        correction = !this.applyCanonicalTextDelta(
+          projection,
+          target,
+          updateArg.text.slice(previousText.length),
+        );
+      }
+      if (correction) target.text = updateArg.text;
+      if (updateArg.status === 'running') {
+        target.streaming = true;
+        if (!correction && !previousStreaming && updateArg.text === previousText) {
+          this.mountedCanonicalChat(projection)?.applyDelta({
+            type: 'text',
+            messageId: target.id,
+            delta: '',
+          });
+        }
+      } else {
+        this.mountedCanonicalChat(projection)?.applyDelta({
+          type: 'message-end',
+          messageId: target.id,
+        });
+        target.streaming = false;
+        target.updatedAt = updateArg.sourceUpdatedAt;
+      }
+      if (correction) {
+        this.canonicalMessageRefreshIds.add(target.id);
+        this.requestCanonicalChatReconciliation(false);
+      }
+    }
+    if (updateArg.status === 'completed') {
+      this.refreshAfterTerminalLiveMessage(projectIdArg, sessionId);
+    }
+  }
+
+  private applyLiveReasoningDelta(
+    projectIdArg: string,
+    deltaArg: interfaces.IControllerReasoningDelta,
+  ): void {
+    if (!isSessionRuntimeId(deltaArg.sessionId)) return;
+    const sessionId = deltaArg.sessionId;
+    const barrier = this.liveMessageEventPassesBarriers(projectIdArg, deltaArg);
+    if (!barrier.accepted) return;
+    if (
+      projectIdArg !== this.selectedProjectId
+      || !controllerRuntimeIdsEqual(deltaArg.sessionId, this.selectedSessionId)
+      || this.liveMessageDeltasBlocked(projectIdArg, sessionId, deltaArg.streamEpoch)
+    ) return;
+    const floor = this.liveMessageHydrationFloors.get(
+      this.liveToolSessionKey(projectIdArg, deltaArg.sessionId),
+    )?.cursor;
+    if (
+      floor
+      && floor.streamEpoch === deltaArg.streamEpoch
+      && deltaArg.revision <= floor.revision
+    ) return;
+    const key = this.liveMessageUpdateKey(projectIdArg, deltaArg);
+    const active = this.liveReasoningUpdates.get(key);
+    const baseline = this.liveReasoningBaselines.get(key);
+    const previous = active ?? baseline?.update;
+    if (
+      previous
+      && previous.streamEpoch === deltaArg.streamEpoch
+      && deltaArg.revision <= previous.revision
+    ) return;
+    const textUtf8Bytes = active
+      ? this.liveReasoningTextUtf8Bytes.get(key)
+        ?? browserTextEncoder.encode(active.text).byteLength
+      : baseline?.textUtf8Bytes;
+    const projection = this.selectedCanonicalChatProjection(projectIdArg, sessionId);
+    const target = projection ? this.canonicalReasoningTarget(projection, deltaArg) : undefined;
+    const nextTextUtf8Bytes = previous && textUtf8Bytes !== undefined
+      ? controllerTextAfterAppendUtf8Bytes(previous.text, textUtf8Bytes, deltaArg.delta)
+      : undefined;
+    if (
+      !previous
+      || previous.status !== 'running'
+      || previous.streamEpoch !== deltaArg.streamEpoch
+      || deltaArg.revision <= previous.revision
+      || deltaArg.sourceUpdatedAt < previous.sourceUpdatedAt
+      || !this.liveMessageIdentityMatches(previous, deltaArg)
+      || textUtf8Bytes !== deltaArg.baseTextUtf8Bytes
+      || nextTextUtf8Bytes !== deltaArg.textUtf8Bytes
+      || !projection
+      || !target
+      || this.harnessMessageIsTerminal(target.message)
+      || target.part.text !== previous.text
+      || (deltaArg.order !== undefined
+        && (!target.message.order
+          || transcriptOrderKey(target.message.order) !== transcriptOrderKey(deltaArg.order)))
+    ) {
+      this.blockLiveMessageDeltas(
+        projectIdArg,
+        sessionId,
+        deltaArg.streamEpoch,
+        !barrier.epochAdvanced,
+      );
+      return;
+    }
+    if (!this.applyCanonicalReasoningDelta(projection, target, deltaArg.delta)) {
+      this.blockLiveMessageDeltas(projectIdArg, sessionId, deltaArg.streamEpoch);
+      return;
+    }
+    target.message.streaming = true;
+    const update: interfaces.IControllerReasoningUpdate = {
+      ...previous,
+      text: `${previous.text}${deltaArg.delta}`,
+      sourceUpdatedAt: deltaArg.sourceUpdatedAt,
+      revision: deltaArg.revision,
+      streamEpoch: deltaArg.streamEpoch,
+    };
+    if (!this.storeLiveReasoningDeltaState(
+      key,
+      update,
+      deltaArg.textUtf8Bytes,
+      deltaArg.delta,
+    )) {
+      target.part.text = previous.text;
+      this.requestCanonicalChatReconciliation();
+      this.blockLiveMessageDeltas(projectIdArg, sessionId, deltaArg.streamEpoch);
+    }
+  }
+
+  private applyLiveTextDelta(
+    projectIdArg: string,
+    deltaArg: interfaces.IControllerTextDelta,
+  ): void {
+    if (!isSessionRuntimeId(deltaArg.sessionId)) return;
+    const sessionId = deltaArg.sessionId;
+    const barrier = this.liveMessageEventPassesBarriers(projectIdArg, deltaArg);
+    if (!barrier.accepted) return;
+    if (
+      projectIdArg !== this.selectedProjectId
+      || !controllerRuntimeIdsEqual(deltaArg.sessionId, this.selectedSessionId)
+      || this.liveMessageDeltasBlocked(projectIdArg, sessionId, deltaArg.streamEpoch)
+    ) return;
+    const floor = this.liveMessageHydrationFloors.get(
+      this.liveToolSessionKey(projectIdArg, deltaArg.sessionId),
+    )?.cursor;
+    if (
+      floor
+      && floor.streamEpoch === deltaArg.streamEpoch
+      && deltaArg.revision <= floor.revision
+    ) return;
+    const key = this.liveMessageUpdateKey(projectIdArg, deltaArg);
+    const active = this.liveTextUpdates.get(key);
+    const baseline = this.liveTextBaselines.get(key);
+    const previous = active ?? baseline?.update;
+    if (
+      previous
+      && previous.streamEpoch === deltaArg.streamEpoch
+      && deltaArg.revision <= previous.revision
+    ) return;
+    const textUtf8Bytes = active
+      ? this.liveTextTextUtf8Bytes.get(key)
+        ?? browserTextEncoder.encode(active.text).byteLength
+      : baseline?.textUtf8Bytes;
+    const projection = this.selectedCanonicalChatProjection(projectIdArg, sessionId);
+    const target = projection ? this.canonicalTextTarget(projection, deltaArg) : undefined;
+    const nextTextUtf8Bytes = previous && textUtf8Bytes !== undefined
+      ? controllerTextAfterAppendUtf8Bytes(previous.text, textUtf8Bytes, deltaArg.delta)
+      : undefined;
+    if (
+      !previous
+      || previous.status !== 'running'
+      || previous.streamEpoch !== deltaArg.streamEpoch
+      || deltaArg.revision <= previous.revision
+      || deltaArg.sourceUpdatedAt < previous.sourceUpdatedAt
+      || !this.liveMessageIdentityMatches(previous, deltaArg)
+      || textUtf8Bytes !== deltaArg.baseTextUtf8Bytes
+      || nextTextUtf8Bytes !== deltaArg.textUtf8Bytes
+      || !projection
+      || !target
+      || this.harnessMessageIsTerminal(target)
+      || target.text !== previous.text
+      || (deltaArg.order !== undefined
+        && (!target.order || transcriptOrderKey(target.order) !== transcriptOrderKey(deltaArg.order)))
+    ) {
+      this.blockLiveMessageDeltas(
+        projectIdArg,
+        sessionId,
+        deltaArg.streamEpoch,
+        !barrier.epochAdvanced,
+      );
+      return;
+    }
+    if (!this.applyCanonicalTextDelta(projection, target, deltaArg.delta)) {
+      this.blockLiveMessageDeltas(projectIdArg, sessionId, deltaArg.streamEpoch);
+      return;
+    }
+    const update: interfaces.IControllerTextUpdate = {
+      ...previous,
+      text: `${previous.text}${deltaArg.delta}`,
+      sourceUpdatedAt: deltaArg.sourceUpdatedAt,
+      revision: deltaArg.revision,
+      streamEpoch: deltaArg.streamEpoch,
+    };
+    if (!this.storeLiveTextDeltaState(
+      key,
+      update,
+      deltaArg.textUtf8Bytes,
+      deltaArg.delta,
+    )) {
+      target.text = previous.text;
+      this.requestCanonicalChatReconciliation();
+      this.blockLiveMessageDeltas(projectIdArg, sessionId, deltaArg.streamEpoch);
+    }
+  }
+
   private async handleControllerEvent(eventArg: interfaces.IControllerEvent): Promise<void> {
     if (!this.authenticated) {
       return;
@@ -8033,79 +9227,27 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       return;
     }
     if (eventArg.type === 'session.reasoning.updated' && eventArg.reasoningUpdate) {
-      const update = eventArg.reasoningUpdate;
       if (typeof eventArg.projectId !== 'string') return;
-      if (!isSessionRuntimeId(update.sessionId)) return;
-      if (
-        update.sourceUpdatedAt
-        <= (this.liveHistoryBarriers.get(
-          this.liveToolSessionKey(eventArg.projectId, update.sessionId),
-        ) ?? Number.NEGATIVE_INFINITY)
-      ) return;
-      if (!this.acceptLiveMessageEpoch(update.sessionId.harnessId, update.streamEpoch)) return;
-      if (controllerRuntimeIdsEqual(update.sessionId, this.subagentModalSessionId)) {
-        this.scheduleSubagentModalRefresh();
-      }
-      if (
-        eventArg.projectId !== this.selectedProjectId
-        || !controllerRuntimeIdsEqual(update.sessionId, this.selectedSessionId)
-      ) return;
-      const floor = this.liveMessageHydrationFloors.get(
-        this.liveToolSessionKey(eventArg.projectId, update.sessionId),
-      )?.cursor;
-      if (
-        floor
-        && floor.streamEpoch === update.streamEpoch
-        && update.revision <= floor.revision
-      ) return;
-      const key = `${eventArg.projectId ?? ''}\0${controllerRuntimeIdToUiKey(update.sessionId)}\0${controllerRuntimeIdToUiKey(update.partId)}`;
-      const previous = this.liveReasoningUpdates.get(key);
-      if (
-        !previous
-        || update.streamEpoch > previous.streamEpoch
-        || (update.streamEpoch === previous.streamEpoch && update.revision > previous.revision)
-      ) {
-        if (this.storeLiveReasoningUpdate(key, update)) this.requestUpdate();
-      }
-      if (update.status !== 'running') this.refreshSessionsNow();
+      if (!isSessionRuntimeId(eventArg.reasoningUpdate.sessionId)) return;
+      this.applyLiveReasoningUpdate(eventArg.projectId, eventArg.reasoningUpdate);
+      return;
+    }
+    if (eventArg.type === 'session.reasoning.delta' && eventArg.reasoningDelta) {
+      if (typeof eventArg.projectId !== 'string') return;
+      if (!isSessionRuntimeId(eventArg.reasoningDelta.sessionId)) return;
+      this.applyLiveReasoningDelta(eventArg.projectId, eventArg.reasoningDelta);
       return;
     }
     if (eventArg.type === 'session.text.updated' && eventArg.textUpdate) {
-      const update = eventArg.textUpdate;
       if (typeof eventArg.projectId !== 'string') return;
-      if (!isSessionRuntimeId(update.sessionId)) return;
-      if (
-        update.sourceUpdatedAt
-        <= (this.liveHistoryBarriers.get(
-          this.liveToolSessionKey(eventArg.projectId, update.sessionId),
-        ) ?? Number.NEGATIVE_INFINITY)
-      ) return;
-      if (!this.acceptLiveMessageEpoch(update.sessionId.harnessId, update.streamEpoch)) return;
-      if (controllerRuntimeIdsEqual(update.sessionId, this.subagentModalSessionId)) {
-        this.scheduleSubagentModalRefresh();
-      }
-      if (
-        eventArg.projectId !== this.selectedProjectId
-        || !controllerRuntimeIdsEqual(update.sessionId, this.selectedSessionId)
-      ) return;
-      const floor = this.liveMessageHydrationFloors.get(
-        this.liveToolSessionKey(eventArg.projectId, update.sessionId),
-      )?.cursor;
-      if (
-        floor
-        && floor.streamEpoch === update.streamEpoch
-        && update.revision <= floor.revision
-      ) return;
-      const key = `${eventArg.projectId ?? ''}\0${controllerRuntimeIdToUiKey(update.sessionId)}\0${controllerRuntimeIdToUiKey(update.partId)}`;
-      const previous = this.liveTextUpdates.get(key);
-      if (
-        !previous
-        || update.streamEpoch > previous.streamEpoch
-        || (update.streamEpoch === previous.streamEpoch && update.revision > previous.revision)
-      ) {
-        if (this.storeLiveTextUpdate(key, update)) this.requestUpdate();
-      }
-      if (update.status === 'completed') this.refreshSessionsNow();
+      if (!isSessionRuntimeId(eventArg.textUpdate.sessionId)) return;
+      this.applyLiveTextUpdate(eventArg.projectId, eventArg.textUpdate);
+      return;
+    }
+    if (eventArg.type === 'session.text.delta' && eventArg.textDelta) {
+      if (typeof eventArg.projectId !== 'string') return;
+      if (!isSessionRuntimeId(eventArg.textDelta.sessionId)) return;
+      this.applyLiveTextDelta(eventArg.projectId, eventArg.textDelta);
       return;
     }
     this.applySessionEventState(eventArg);
@@ -10419,25 +11561,6 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           <dees-badge type="success" text="Connected" .rounded=${true}></dees-badge>
           <span class="headerSpacer"></span>
           <div class="headerActions">
-            <dees-button
-              class="refreshAction"
-              type="ghost"
-              size="sm"
-              ?disabled=${this.sessionsLoading || this.mutationPending}
-              @clicked=${() => void this.refreshSessions()}
-            >
-              <dees-icon icon="lucide:RefreshCw" iconSize="14"></dees-icon>
-              Refresh
-            </dees-button>
-            <dees-button
-              type="ghost"
-              size="sm"
-              ?disabled=${!this.selectedSessionId || this.mutationPending}
-              @clicked=${this.showDeleteConfirmation}
-            >
-              <dees-icon icon="lucide:Trash2" iconSize="14"></dees-icon>
-              Delete
-            </dees-button>
             <dees-button
               type="ghost"
               size="sm"
@@ -10798,6 +11921,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           .reasoningEffort=${this.resolveSessionEffortString() || 'default'}
           .effortOptions=${this.resolveSessionEffortOptions()}
           .showTodosPanel=${false}
+          .markdownWhileStreaming=${false}
           heading=${`New ${sessionHarnessLabel(this.draftHarnessId)} conversation`}
           subheading=${directory
             ? `${sessionHarnessLabel(this.draftHarnessId)} creates this session on first send · starts in ${directory}`
@@ -10871,27 +11995,12 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     const sessionId = detailArg.session.id;
     const isOpenCode = sessionId.harnessId === 'opencode';
     const readOnly = this.sessionIsReadOnly(sessionId);
-    // The question tool call is the transcript's raw record of an ask; the
-    // inline question card is its rendering, so the JSON never shows.
-    const messages: plugins.deesCatalog.IHarnessMessage[] = detailArg.messages
-      .filter((messageArg) => messageArg.toolCall?.name !== 'question')
-      .map((messageArg) => this.toHarnessMessage(messageArg, this.selectedProjectId, sessionId));
-    const visibleMessageIds = new Set(messages.map((message) => message.id));
-    for (const prompt of detailArg.pendingPrompts) {
-      const id = controllerRuntimeIdToUiKey(prompt.id);
-      if (visibleMessageIds.has(id)) continue;
-      messages.push({
-        id,
-        role: 'user',
-        text: prompt.text,
-        createdAt: prompt.createdAt,
-        markdown: false,
-        attachments: prompt.attachments.map((attachment) => ({ ...attachment })),
-      });
-    }
-    this.mergeLiveReasoningMessages(messages, this.selectedProjectId, sessionId);
-    this.mergeLiveTextMessages(messages, this.selectedProjectId, sessionId);
-    this.mergeLiveToolMessages(messages, this.selectedProjectId, sessionId);
+    // The canonical array and all delta targets remain stable across unrelated app renders.
+    const messages = this.ensureCanonicalChatProjection(
+      detailArg,
+      this.selectedProjectId,
+      sessionId,
+    ).messages;
     const status = this.toHarnessStatus(
       detailArg.session,
       this.activeSubagentCount(messages),
@@ -11089,12 +12198,14 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           .intelligenceBusy=${this.intelligenceAskIdsBySession.has(operationKey)
             || detailArg.intelligenceExchanges.some((exchange) => exchange.status === 'running')}
           .intelligenceError=${intelligenceError}
-          .todos=${isOpenCode ? detailArg.todos.map((todoArg) => ({
+          .todos=${detailArg.todos.map((todoArg) => ({
             ...todoArg,
             ...(todoArg.id ? { id: controllerRuntimeIdToUiKey(todoArg.id) } : {}),
-          })) : []}
+          }))}
+          .todosAuthoritative=${true}
           .busy=${detailArg.session.status === 'busy' || detailArg.session.status === 'retry'}
           .queuedCount=${detailArg.pendingPrompts.length}
+          .steeringEnabled=${false}
           .disabled=${this.detailLoading
             || this.mutationPending
             || this.sessionModelPending
@@ -11112,7 +12223,8 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           .modelOptions=${this.modelOptionsForHarness(sessionId.harnessId, account)}
           .reasoningEffort=${this.resolveSessionEffortString(sessionId) || 'default'}
           .effortOptions=${this.resolveSessionEffortOptions(sessionId)}
-          .showTodosPanel=${isOpenCode}
+          .showTodosPanel=${true}
+          .markdownWhileStreaming=${false}
           heading=${detailArg.session.title || `${sessionHarnessLabel(sessionId.harnessId)} session`}
           subheading=${readOnly
             ? `Flex unavailable · saved projection · read-only · ${runtimeIdDisplay(sessionId)}`