agl 22.0.4 → 24.0.0

package/ts_web/elements.harnesscontrollerapp.ts

@@ -1,10 +1,8 @@
 import * as plugins from './plugins.js';
 import * as interfaces from '../ts_interfaces/index.js';
 import { commitinfo } from './00_commitinfo_data.js';
-import {
-  ControllerSocketClient,
-  type TControllerBrowserViewEventMessage,
-} from './classes.controllersocketclient.js';
+import { ControllerSocketClient } from './classes.controllersocketclient.js';
+import { ControllerBrowserViewTransportClient } from './classes.browserviewtransport.js';
 import {
   SessionDraftSync,
   type ISessionDraftSyncState,
@@ -128,6 +126,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 +307,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.');
@@ -381,6 +457,7 @@ const layoutRequestTimeoutMs = 10_000;
 const providerLoginPollTimeoutMs = 15 * 60 * 1000;
 const providerRefreshPollTimeoutMs = 5 * 60 * 1000;
 const providerOpenCodeSwitchTimeoutMs = 6 * 60 * 1000;
+const browserRendererLifecycleTimeoutMs = 1_000;
 const maximumSlashSuggestions = 12;
 const maximumWorkspaceNoticeCharacters = 500;
 
@@ -543,6 +620,25 @@ const errorMessage = (errorArg: unknown): string => {
   return String(errorArg || 'The operation failed.');
 };
 
+const waitForBrowserRendererLifecycle = async (
+  operationArg: Promise<void>,
+  actionArg: string,
+): Promise<void> => {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  try {
+    await Promise.race([
+      operationArg,
+      new Promise<never>((_resolve, reject) => {
+        timeout = setTimeout(() => {
+          reject(new Error(`Browser renderer ${actionArg} timed out.`));
+        }, browserRendererLifecycleTimeoutMs);
+      }),
+    ]);
+  } finally {
+    if (timeout) clearTimeout(timeout);
+  }
+};
+
 const formatPercentage = (valueArg: number | null | undefined): string => (
   typeof valueArg === 'number' && Number.isFinite(valueArg)
     ? `${Math.round(valueArg)}%`
@@ -628,6 +724,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;
@@ -637,14 +734,27 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
   private browserNavigationRequestId = 0;
   private browserViewOpenAbortController: AbortController | undefined;
   private browserNavigationAbortController: AbortController | undefined;
+  private browserViewRecoveryAbortController: AbortController | undefined;
   private browserViewId = '';
   private browserViewConnectionGeneration = -1;
-  private browserViewPendingClose: { viewId: string; connectionGeneration: number } | undefined;
+  private browserViewStreamGeneration = -1;
+  private browserViewActivated = false;
+  private browserViewPendingClose: {
+    viewId: string;
+    streamGeneration: number;
+    connectionGeneration: number;
+    attempts: number;
+  } | undefined;
+  private browserViewCloseTask: Promise<void> | undefined;
+  private browserViewCloseRetryTimer: ReturnType<typeof setTimeout> | undefined;
   private browserViewResourceId = '';
   private browserViewAttachmentRevision = -1;
-  private browserViewState: interfaces.IControllerBrowserViewState | undefined;
   private readonly browserViewListeners = new Set<plugins.TLiveBrowserEventListener>();
+  private browserViewTransport?: ControllerBrowserViewTransportClient;
+  private browserViewTransportRecoveryTask?: Promise<void>;
   private browserRenderer?: plugins.LiveBrowserCanvasRenderer;
+  private browserAddressDraft = '';
+  private browserAddressEditing = false;
   private suggestRequestId = 0;
   private suggestDebounce: ReturnType<typeof setTimeout> | undefined;
   private controllerStatus: interfaces.IControllerStatus | undefined;
@@ -757,13 +867,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[] = [];
@@ -841,8 +968,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
   @plugins.deesElement.state()
   accessor staleBundleVersion = '';
 
-  @plugins.deesElement.state()
-  accessor systemMetrics: interfaces.IControllerSystemMetrics | undefined;
+  public systemMetrics: interfaces.IControllerSystemMetrics | undefined;
 
   @plugins.deesElement.state()
   accessor highCpuWarning = false;
@@ -919,6 +1045,9 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
   @plugins.deesElement.state()
   accessor browserViewLoading = false;
 
+  @plugins.deesElement.state()
+  accessor browserViewState: interfaces.IControllerBrowserViewState | undefined;
+
   @plugins.deesElement.state()
   accessor selectedTerminalId: TBrowserTerminalId | undefined;
 
@@ -940,7 +1069,6 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       onStatus: (statusArg) => this.handleConnectionStatus(statusArg),
       onControllerEvent: (eventArg) => this.handleControllerEvent(eventArg),
       onTerminalOutput: (outputArg) => this.handleTerminalOutput(outputArg),
-      onBrowserViewEvent: (eventArg) => this.handleBrowserViewEvent(eventArg),
       onTransportClose: (closeCodeArg, reasonArg) => {
         this.recordTransportClose(closeCodeArg, reasonArg);
         console.error(`Controller transport closed (code ${closeCodeArg}${reasonArg ? `: ${reasonArg}` : ''}).`);
@@ -949,6 +1077,13 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           ? 'The connection was closed because a response exceeded the transport frame limit. Reconnecting…'
           : `The connection was closed by the transport (code ${closeCodeArg}${reasonArg ? `: ${reasonArg}` : ''}). Reconnecting…`;
       },
+      onReconnectExhausted: (attemptsArg, endpointArg) => {
+        if (!this.componentConnected) return;
+        this.connectionError = `Automatic reconnection stopped after ${attemptsArg} attempts to ${endpointArg}.`;
+        void this.socketClient.stop().finally(() => {
+          if (this.componentConnected) this.connectionStatus = 'disconnected';
+        });
+      },
     });
     this.sessionDraftSync = new SessionDraftSync({
       transport: {
@@ -1824,8 +1959,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           padding: 0 var(--dees-spacing-sm);
         }
 
-        .brandSubtitle,
-        .headerActions .refreshAction {
+        .brandSubtitle {
           display: none;
         }
 
@@ -1979,6 +2113,8 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
 
     this.connectionStatus = statusArg;
     this.connectionGeneration += 1;
+    if (this.browserViewCloseRetryTimer) clearTimeout(this.browserViewCloseRetryTimer);
+    this.browserViewCloseRetryTimer = undefined;
     if (this.browserViewPendingClose?.connectionGeneration !== this.connectionGeneration) {
       this.browserViewPendingClose = undefined;
     }
@@ -1997,6 +2133,8 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
 
   private invalidateConnectionState(): void {
     this.connectionGeneration += 1;
+    if (this.browserViewCloseRetryTimer) clearTimeout(this.browserViewCloseRetryTimer);
+    this.browserViewCloseRetryTimer = undefined;
     if (this.browserViewPendingClose?.connectionGeneration !== this.connectionGeneration) {
       this.browserViewPendingClose = undefined;
     }
@@ -2016,6 +2154,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;
@@ -2513,12 +2652,54 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
 
     this.lastCpuSampleAt = sampledAt;
     this.systemMetrics = metricsArg;
+    this.updateSystemMetricsDom();
   }
 
   private resetHighCpuWarning(): void {
     this.highCpuStartedAt = undefined;
     this.lastCpuSampleAt = undefined;
     this.highCpuWarning = false;
+    this.updateSystemMetricsDom();
+  }
+
+  private updateSystemMetricsDom(): void {
+    const metrics = this.systemMetrics;
+    const memoryPercent = metrics?.memoryUsedBytes !== null
+      && metrics?.memoryUsedBytes !== undefined
+      && metrics.memoryTotalBytes !== null
+      && metrics.memoryTotalBytes !== undefined
+      && metrics.memoryTotalBytes > 0
+      ? (metrics.memoryUsedBytes / metrics.memoryTotalBytes) * 100
+      : null;
+    const cpu = this.shadowRoot?.querySelector<HTMLElement>('.cpuMetric');
+    const memory = this.shadowRoot?.querySelector<HTMLElement>('.memoryMetric');
+    const network = this.shadowRoot?.querySelector<HTMLElement>('.networkMetric');
+    const cpuValue = cpu?.querySelector<HTMLElement>('.metricValue');
+    const memoryValue = memory?.querySelector<HTMLElement>('.metricValue');
+    const networkReceive = network?.querySelector<HTMLElement>('.networkReceive');
+    const networkTransmit = network?.querySelector<HTMLElement>('.networkTransmit');
+    if (cpu) {
+      cpu.classList.toggle('highCpuWarning', this.highCpuWarning);
+      cpu.title = this.highCpuWarning
+        ? 'Whole-system CPU usage has remained above 50% for at least 10 seconds'
+        : 'Whole-system CPU usage';
+    }
+    if (cpuValue) cpuValue.textContent = formatPercentage(metrics?.cpuUsagePercent);
+    if (memory) {
+      memory.title = metrics?.memoryUsedBytes !== null
+        && metrics?.memoryUsedBytes !== undefined
+        && metrics.memoryTotalBytes !== null
+        && metrics.memoryTotalBytes !== undefined
+        ? `${formatBytes(metrics.memoryUsedBytes)} used of ${formatBytes(metrics.memoryTotalBytes)}`
+        : 'Memory usage unavailable';
+    }
+    if (memoryValue) memoryValue.textContent = formatPercentage(memoryPercent);
+    if (networkReceive) {
+      networkReceive.textContent = `in ${formatByteRate(metrics?.networkReceiveBytesPerSecond)}`;
+    }
+    if (networkTransmit) {
+      networkTransmit.textContent = `out ${formatByteRate(metrics?.networkTransmitBytesPerSecond)}`;
+    }
   }
 
   private readonly showLegalDisclosure = (): void => {
@@ -2843,12 +3024,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 +3112,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 +3133,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 +3169,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 +3208,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 +3273,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 +3465,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 +3482,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           this.invalidateDetailEnrichment();
           void this.refreshSelectedSessionDetail();
         }
-        this.refreshSessionsNow();
+        if (refreshSessionListArg) this.refreshSessionsNow();
       }
     }
     return true;
@@ -3153,6 +3552,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 +3582,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 +3610,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 +3677,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 +4001,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 +4055,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 +4151,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 +4394,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 +4522,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 +4534,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
             status: entryArg.stream.status,
             notice: subtaskPreviewUnavailableNotice,
           };
-      this.requestUpdate();
+      this.requestCanonicalChatReconciliation();
     }
   }
 
@@ -3840,7 +4567,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 +4578,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     }
     this.subtaskPreviewEntries.clear();
     this.subtaskPreviewHydrationQueue = [];
+    this.canonicalChatProjectionDirty = true;
   }
 
   private applySessionEventState(eventArg: interfaces.IControllerEvent): void {
@@ -4001,7 +4729,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 +4771,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 +4792,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 +4825,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 +4906,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,
@@ -4284,6 +5120,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,
@@ -4356,9 +5196,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.
@@ -4422,6 +5262,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 {
@@ -4551,14 +5395,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);
@@ -4636,6 +5485,18 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     const resourceId = eventArg.detail?.resource?.id;
     const resource = this.resources.find((candidate) => candidate.id === resourceId);
     if (!resource || resource.lifecycle !== 'active') return;
+    if (
+      resource.kind === 'browser'
+      && this.selectedResourceId === resource.id
+      && (
+        this.browserViewLoading
+        || (
+          this.browserViewResourceId === resource.id
+          && this.browserViewAttachmentRevision === resource.attachment.revision
+          && this.browserViewId !== ''
+        )
+      )
+    ) return;
     this.invalidateSlashCatalog();
     this.selectedResourceId = resource.id;
     if (resource.kind === 'browser') {
@@ -4671,6 +5532,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     this.browserViewLoading = true;
     this.workspaceError = '';
     let openedViewId = '';
+    let openedStreamGeneration = -1;
     try {
       const response = await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewOpen>(
         'controller.browser.view.open',
@@ -4682,6 +5544,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         { maxRetries: 0, abortSignal: openAbortController.signal },
       );
       openedViewId = response.viewId;
+      openedStreamGeneration = response.streamGeneration;
       if (
         generation !== this.browserViewGeneration
         || connectionGeneration !== this.connectionGeneration
@@ -4689,7 +5552,11 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         || response.resourceId !== resourceArg.id
         || response.attachmentRevision !== resourceArg.attachment.revision
       ) {
-        void this.requestBrowserViewClose(response.viewId, connectionGeneration);
+        void this.requestBrowserViewClose(
+          response.viewId,
+          response.streamGeneration,
+          connectionGeneration,
+        );
         return;
       }
       if (
@@ -4698,29 +5565,49 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       ) this.browserViewPendingClose = undefined;
       this.browserViewId = response.viewId;
       this.browserViewConnectionGeneration = connectionGeneration;
+      this.browserViewStreamGeneration = response.streamGeneration;
+      this.browserViewActivated = false;
       this.browserViewResourceId = response.resourceId;
       this.browserViewAttachmentRevision = response.attachmentRevision;
-      this.browserViewState = response.state;
+      this.applyBrowserViewState(response.state);
+      const transport = this.createBrowserViewTransportClient(
+        response.streamGeneration,
+        response.events,
+        response.operations,
+        generation,
+      );
+      this.browserViewTransport = transport;
+      const transportStart = transport.start();
       this.browserViewLoading = false;
       this.requestUpdate();
-      await this.updateComplete;
+      await Promise.all([this.updateComplete, transportStart]);
       const rendererReady = await this.mountBrowserRenderer(generation);
       if (
         !rendererReady
         || generation !== this.browserViewGeneration
         || connectionGeneration !== this.connectionGeneration
         || response.viewId !== this.browserViewId
+        || response.streamGeneration !== this.browserViewStreamGeneration
       ) return;
       await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewActivate>(
         'controller.browser.view.activate',
-        { viewId: response.viewId },
+        { viewId: response.viewId, streamGeneration: response.streamGeneration },
         { maxRetries: 0, abortSignal: openAbortController.signal },
       );
+      if (
+        generation === this.browserViewGeneration
+        && response.viewId === this.browserViewId
+        && response.streamGeneration === this.browserViewStreamGeneration
+      ) this.browserViewActivated = true;
     } catch (errorArg) {
       if (openedViewId && openedViewId === this.browserViewId) {
         await this.closeBrowserView(false);
       } else if (openedViewId && this.socketClient.isConnected) {
-        await this.requestBrowserViewClose(openedViewId, connectionGeneration);
+        await this.requestBrowserViewClose(
+          openedViewId,
+          openedStreamGeneration,
+          connectionGeneration,
+        );
       }
       if (
         generation === this.browserViewGeneration
@@ -4743,114 +5630,275 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     this.browserViewOpenAbortController = undefined;
     this.browserNavigationAbortController?.abort(new Error('Browser view changed.'));
     this.browserNavigationAbortController = undefined;
+    this.browserViewRecoveryAbortController?.abort(new Error('Browser view changed.'));
+    this.browserViewRecoveryAbortController = undefined;
     const renderer = this.browserRenderer;
-    if (renderer) {
-      await renderer.stop().then(
-        () => {
-          if (this.browserRenderer === renderer) this.browserRenderer = undefined;
-        },
-        (errorArg) => {
-          this.workspaceError = `Browser renderer cleanup remains pending: ${errorMessage(errorArg)}`;
-        },
-      );
-    }
+    const transport = this.browserViewTransport;
     const viewId = this.browserViewId;
+    const viewStreamGeneration = this.browserViewStreamGeneration;
     const viewConnectionGeneration = this.browserViewConnectionGeneration;
     this.browserViewId = '';
     this.browserViewConnectionGeneration = -1;
+    this.browserViewStreamGeneration = -1;
+    this.browserViewActivated = false;
     this.browserViewResourceId = '';
     this.browserViewAttachmentRevision = -1;
     this.browserViewState = undefined;
+    this.browserAddressDraft = '';
+    this.browserAddressEditing = false;
     this.browserViewLoading = false;
     this.browserViewListeners.clear();
-    if (viewId && viewConnectionGeneration === this.connectionGeneration) {
-      await this.requestBrowserViewClose(viewId, viewConnectionGeneration);
-    } else {
-      await this.flushPendingBrowserViewClose();
+    const remoteCloseTask = (
+      viewId
+      && viewStreamGeneration > 0
+      && viewConnectionGeneration === this.connectionGeneration
+    )
+      ? this.requestBrowserViewClose(
+          viewId,
+          viewStreamGeneration,
+          viewConnectionGeneration,
+        )
+      : this.flushPendingBrowserViewClose();
+    const rendererStopTask = renderer
+      ? this.stopBrowserRenderer(renderer)
+      : Promise.resolve();
+    const transportStopTask = transport
+      ? transport.stop(new Error('Browser view changed.')).then(() => {
+          if (this.browserViewTransport === transport) this.browserViewTransport = undefined;
+        })
+      : Promise.resolve();
+    await Promise.all([remoteCloseTask, rendererStopTask, transportStopTask]);
+  }
+
+  private async stopBrowserRenderer(rendererArg: plugins.LiveBrowserCanvasRenderer): Promise<void> {
+    let stopTask: Promise<void>;
+    try {
+      stopTask = rendererArg.stop();
+    } catch (errorArg) {
+      if (this.browserRenderer === rendererArg) {
+        this.workspaceError = `Browser renderer cleanup remains pending: ${errorMessage(errorArg)}`;
+      }
+      return;
+    }
+    void stopTask.then(() => {
+      if (this.browserRenderer === rendererArg) this.browserRenderer = undefined;
+    }, () => undefined);
+    try {
+      await waitForBrowserRendererLifecycle(stopTask, 'stop');
+    } catch (errorArg) {
+      if (this.browserRenderer === rendererArg) {
+        this.workspaceError = `Browser renderer cleanup remains pending: ${errorMessage(errorArg)}`;
+      }
     }
   }
 
   private async requestBrowserViewClose(
     viewIdArg: string,
+    streamGenerationArg: number,
     connectionGenerationArg: number,
   ): Promise<void> {
     if (connectionGenerationArg !== this.connectionGeneration) return;
-    const pendingClose = { viewId: viewIdArg, connectionGeneration: connectionGenerationArg };
+    const pendingClose = {
+      viewId: viewIdArg,
+      streamGeneration: streamGenerationArg,
+      connectionGeneration: connectionGenerationArg,
+      attempts: 0,
+    };
     this.browserViewPendingClose = pendingClose;
     await this.flushPendingBrowserViewClose();
   }
 
-  private async flushPendingBrowserViewClose(): Promise<void> {
-    const pendingClose = this.browserViewPendingClose;
+  private async flushPendingBrowserViewClose(): Promise<void> {
+    const pendingClose = this.browserViewPendingClose;
+    if (
+      !pendingClose
+      || pendingClose.connectionGeneration !== this.connectionGeneration
+      || !this.socketClient.isConnected
+    ) return;
+    if (this.browserViewCloseTask) return this.browserViewCloseTask;
+    pendingClose.attempts += 1;
+    const closeTask = this.socketClient.fire<interfaces.IReq_ControllerBrowserViewClose>(
+      'controller.browser.view.close',
+      {
+        viewId: pendingClose.viewId,
+        expectedStreamGeneration: pendingClose.streamGeneration,
+      },
+      { maxRetries: 0 },
+    ).then(() => {
+      if (this.browserViewPendingClose === pendingClose) {
+        this.browserViewPendingClose = undefined;
+      }
+    }).catch(() => {
+      if (
+        this.browserViewPendingClose === pendingClose
+        && pendingClose.attempts >= 3
+      ) {
+        this.browserViewPendingClose = undefined;
+        this.workspaceError = 'The browser view close request failed after three attempts.';
+        return;
+      }
+      if (
+        this.browserViewPendingClose !== pendingClose
+        || pendingClose.connectionGeneration !== this.connectionGeneration
+      ) return;
+      if (this.browserViewCloseRetryTimer) clearTimeout(this.browserViewCloseRetryTimer);
+      this.browserViewCloseRetryTimer = setTimeout(() => {
+        this.browserViewCloseRetryTimer = undefined;
+        void this.flushPendingBrowserViewClose();
+      }, 250 * pendingClose.attempts);
+    }).finally(() => {
+      if (this.browserViewCloseTask === closeTask) this.browserViewCloseTask = undefined;
+      if (
+        this.browserViewPendingClose
+        && this.browserViewPendingClose !== pendingClose
+      ) void this.flushPendingBrowserViewClose();
+    });
+    this.browserViewCloseTask = closeTask;
+    return closeTask;
+  }
+
+  private createBrowserViewTransportClient(
+    streamGenerationArg: number,
+    eventsArg: plugins.typedrequestInterfaces.TVirtualStream<'receive'>,
+    operationsArg: plugins.typedrequestInterfaces.TVirtualStream<'send'>,
+    viewGenerationArg: number,
+  ): ControllerBrowserViewTransportClient {
+    return new ControllerBrowserViewTransportClient({
+      streamGeneration: streamGenerationArg,
+      events: eventsArg,
+      operations: operationsArg,
+      onEvent: (eventArg) => {
+        if (
+          viewGenerationArg !== this.browserViewGeneration
+          || streamGenerationArg !== this.browserViewStreamGeneration
+        ) return;
+        this.handleBrowserViewEvent(eventArg);
+      },
+      onFailure: (errorArg, recoverableArg) => {
+        this.handleBrowserTransportFailure(
+          viewGenerationArg,
+          streamGenerationArg,
+          errorArg,
+          recoverableArg,
+        );
+      },
+    });
+  }
+
+  private handleBrowserViewEvent(eventArg: interfaces.TControllerBrowserViewEvent): void {
+    if (eventArg.type === 'state') this.applyBrowserViewState(eventArg.state);
+    if (eventArg.type === 'error' && eventArg.error.fatal) this.workspaceError = eventArg.error.message;
+    for (const listener of this.browserViewListeners) listener(eventArg);
+  }
+
+  private applyBrowserViewState(stateArg: interfaces.IControllerBrowserViewState): boolean {
+    if (this.browserViewState && stateArg.revision <= this.browserViewState.revision) return false;
+    this.browserViewState = stateArg;
+    if (!this.browserAddressEditing) {
+      this.browserAddressDraft = stateArg.tabs.find((tabArg) => tabArg.active)?.url ?? '';
+    }
+    return true;
+  }
+
+  private handleBrowserTransportFailure(
+    viewGenerationArg: number,
+    streamGenerationArg: number,
+    errorArg: unknown,
+    recoverableArg: boolean,
+  ): void {
     if (
-      !pendingClose
-      || pendingClose.connectionGeneration !== this.connectionGeneration
-      || !this.socketClient.isConnected
+      viewGenerationArg !== this.browserViewGeneration
+      || streamGenerationArg !== this.browserViewStreamGeneration
+      || !this.browserViewId
     ) return;
-    try {
-      await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewClose>(
-        'controller.browser.view.close',
-        { viewId: pendingClose.viewId },
-        { maxRetries: 0 },
-      );
-    } catch {
+    if (!recoverableArg || !this.browserViewActivated || !this.browserRenderer) {
+      this.workspaceError = `Browser transport failed: ${errorMessage(errorArg)}`;
+      void this.closeBrowserView();
       return;
     }
-    if (this.browserViewPendingClose === pendingClose) this.browserViewPendingClose = undefined;
+    if (this.browserViewTransportRecoveryTask) return;
+    const recovery = this.recoverBrowserViewTransport(
+      viewGenerationArg,
+      streamGenerationArg,
+      errorArg,
+    ).finally(() => {
+      if (this.browserViewTransportRecoveryTask === recovery) {
+        this.browserViewTransportRecoveryTask = undefined;
+      }
+    });
+    this.browserViewTransportRecoveryTask = recovery;
+    void recovery.catch(() => undefined);
   }
 
-  private async handleBrowserViewEvent(
-    messageArg: TControllerBrowserViewEventMessage,
+  private async recoverBrowserViewTransport(
+    viewGenerationArg: number,
+    streamGenerationArg: number,
+    reasonArg: unknown,
   ): Promise<void> {
-    const isCurrent = (): boolean => (
-      messageArg.viewId !== this.browserViewId
-      ? false
-      : messageArg.resourceId === this.browserViewResourceId
-        && messageArg.attachmentRevision === this.browserViewAttachmentRevision
-    );
-    if (messageArg.event.type === 'frame') {
-      const { dataStream, ...frame } = messageArg.event.frame;
-      const reject = async (reasonArg: unknown): Promise<void> => {
-        await dataStream.reject(reasonArg).catch(async () => {
-          await dataStream.abort(reasonArg).catch(() => undefined);
-        });
-      };
-      if (!isCurrent()) {
-        await reject(new Error('The browser frame belongs to a stale view.'));
-        return;
+    const viewId = this.browserViewId;
+    const connectionGeneration = this.connectionGeneration;
+    const oldTransport = this.browserViewTransport;
+    const renderer = this.browserRenderer;
+    if (!viewId || !oldTransport || !renderer) return;
+    const recoveryAbortController = new AbortController();
+    this.browserViewRecoveryAbortController = recoveryAbortController;
+    this.browserViewActivated = false;
+    try {
+      await waitForBrowserRendererLifecycle(renderer.suspend(), 'suspension');
+      await oldTransport.stop(reasonArg);
+      const response = await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewRecover>(
+        'controller.browser.view.recover',
+        { viewId, expectedStreamGeneration: streamGenerationArg },
+        { maxRetries: 0, abortSignal: recoveryAbortController.signal },
+      );
+      if (
+        viewGenerationArg !== this.browserViewGeneration
+        || connectionGeneration !== this.connectionGeneration
+        || viewId !== this.browserViewId
+        || streamGenerationArg !== this.browserViewStreamGeneration
+        || response.viewId !== viewId
+        || response.resourceId !== this.browserViewResourceId
+        || response.attachmentRevision !== this.browserViewAttachmentRevision
+        || response.streamGeneration !== streamGenerationArg + 1
+      ) throw new Error('The recovered browser stream generation is stale.');
+      const transport = this.createBrowserViewTransportClient(
+        response.streamGeneration,
+        response.events,
+        response.operations,
+        viewGenerationArg,
+      );
+      this.browserViewTransport = transport;
+      this.browserViewStreamGeneration = response.streamGeneration;
+      this.applyBrowserViewState(response.state);
+      await transport.start();
+      await waitForBrowserRendererLifecycle(renderer.resume(), 'resume');
+      await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewActivate>(
+        'controller.browser.view.activate',
+        { viewId, streamGeneration: response.streamGeneration },
+        { maxRetries: 0, abortSignal: recoveryAbortController.signal },
+      );
+      if (
+        viewGenerationArg === this.browserViewGeneration
+        && viewId === this.browserViewId
+        && response.streamGeneration === this.browserViewStreamGeneration
+      ) {
+        this.browserViewActivated = true;
+        this.workspaceError = '';
       }
-      let data: Uint8Array;
-      try {
-        const firstChunk = await dataStream.receive();
-        if (firstChunk === undefined) throw new Error('The browser frame stream was empty.');
-        if (await dataStream.receive() !== undefined) {
-          throw new Error('The browser frame stream contained multiple chunks.');
-        }
-        if (
-          dataStream.contentType !== frame.mimeType
-          || dataStream.integrity?.algorithm !== 'sha256'
-          || dataStream.integrity.byteLength !== firstChunk.byteLength
-        ) throw new Error('The browser frame stream metadata is invalid.');
-        if (!isCurrent()) {
-          await reject(new Error('The browser frame became stale during transfer.'));
-          return;
-        }
-        data = firstChunk;
-        await dataStream.accept();
-      } catch (errorArg) {
-        await reject(errorArg);
-        throw errorArg;
+    } catch (errorArg) {
+      if (
+        viewGenerationArg === this.browserViewGeneration
+        && connectionGeneration === this.connectionGeneration
+        && viewId === this.browserViewId
+      ) {
+        this.workspaceError = `Browser transport recovery failed: ${errorMessage(errorArg)}`;
+        await this.closeBrowserView();
+      }
+    } finally {
+      if (this.browserViewRecoveryAbortController === recoveryAbortController) {
+        this.browserViewRecoveryAbortController = undefined;
       }
-      if (!isCurrent()) return;
-      const event = { type: 'frame' as const, frame: { ...frame, data } };
-      for (const listener of this.browserViewListeners) listener(event);
-      return;
     }
-    if (!isCurrent()) return;
-    const event = messageArg.event;
-    if (event.type === 'state') this.browserViewState = event.state;
-    if (event.type === 'error' && event.error.fatal) this.workspaceError = event.error.message;
-    for (const listener of this.browserViewListeners) listener(event);
   }
 
   private async browserViewOperation(
@@ -4859,14 +5907,19 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     abortSignalArg?: AbortSignal,
   ): Promise<interfaces.IControllerBrowserViewState> {
     const viewId = this.browserViewId;
-    if (!viewId) throw new Error('The browser view is unavailable.');
-    const response = await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewOperate>(
-      'controller.browser.view.operate',
-      { viewId, operation: operationArg },
-      { maxRetries: 0, abortSignal: abortSignalArg },
-    );
-    if (publishStateArg && viewId === this.browserViewId) this.browserViewState = response.state;
-    return response.state;
+    const transport = this.browserViewTransport;
+    if (!viewId || !transport) throw new Error('The browser view is unavailable.');
+    const result = await transport.operate(operationArg, abortSignalArg);
+    if (
+      result.status === 'succeeded'
+      && result.state
+      && viewId === this.browserViewId
+    ) {
+      if (!publishStateArg) return result.state;
+      this.applyBrowserViewState(result.state);
+    }
+    if (!this.browserViewState) throw new Error('The browser view state is unavailable.');
+    return this.browserViewState;
   }
 
   private async navigateBrowserAddress(formArg: HTMLFormElement): Promise<void> {
@@ -4879,6 +5932,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     const input = formArg.querySelector<HTMLInputElement>('input');
     try {
       const url = controllerNormalizeBrowserAddress(input?.value ?? '');
+      this.browserAddressDraft = input?.value ?? '';
       this.workspaceError = '';
       const state = await this.browserViewOperation(
         { type: 'navigate', url },
@@ -4889,7 +5943,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         requestId === this.browserNavigationRequestId
         && viewGeneration === this.browserViewGeneration
         && viewId === this.browserViewId
-      ) this.browserViewState = state;
+      ) this.applyBrowserViewState(state);
     } catch (errorArg) {
       if (
         requestId === this.browserNavigationRequestId
@@ -4914,6 +5968,23 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
     if (form) void this.navigateBrowserAddress(form);
   };
 
+  private readonly handleBrowserAddressFocus = (eventArg: Event): void => {
+    const input = eventArg.currentTarget;
+    if (!(input instanceof HTMLInputElement)) return;
+    this.browserAddressEditing = true;
+    this.browserAddressDraft = input.value;
+  };
+
+  private readonly handleBrowserAddressInput = (eventArg: Event): void => {
+    const input = eventArg.currentTarget;
+    if (input instanceof HTMLInputElement) this.browserAddressDraft = input.value;
+  };
+
+  private readonly handleBrowserAddressBlur = (): void => {
+    this.browserAddressEditing = false;
+    this.requestUpdate();
+  };
+
   private browserCanvasClient(): plugins.ILiveBrowserCanvasClient {
     return {
       getState: () => {
@@ -4925,12 +5996,13 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
         return () => this.browserViewListeners.delete(listenerArg);
       },
       acknowledgeFrame: async (acknowledgement, options) => {
-        const response = await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewOperate>(
-          'controller.browser.view.operate',
-          { viewId: this.browserViewId, operation: { type: 'acknowledgeFrame', acknowledgement } },
-          { maxRetries: 0, abortSignal: options.signal },
+        const transport = this.browserViewTransport;
+        if (!transport) throw new Error('The browser view is unavailable.');
+        const result = await transport.operate(
+          { type: 'acknowledgeFrame', acknowledgement },
+          options.signal,
         );
-        return { accepted: response.accepted };
+        return { accepted: result.status === 'succeeded' && result.accepted === true };
       },
       setViewport: async (viewport, options) => {
         await this.browserViewOperation({ type: 'setViewport', viewport }, true, options.signal);
@@ -4961,14 +6033,30 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       focusTarget: surface,
       resizeTarget: surface,
       onError: (errorArg) => {
-        if (generationArg === this.browserViewGeneration) this.workspaceError = errorArg.message;
+        if (generationArg !== this.browserViewGeneration) return;
+        this.workspaceError = errorArg.message;
+        if (
+          errorArg.code === 'frame_acknowledgement_failed'
+          || errorArg.code === 'frame_render_failed'
+        ) {
+          this.handleBrowserTransportFailure(
+            generationArg,
+            this.browserViewStreamGeneration,
+            errorArg,
+            true,
+          );
+        }
       },
     });
     this.browserRenderer = renderer;
-    await renderer.start();
+    await this.startBrowserRenderer(renderer);
     return generationArg === this.browserViewGeneration && this.browserRenderer === renderer;
   }
 
+  private startBrowserRenderer(rendererArg: plugins.LiveBrowserCanvasRenderer): Promise<void> {
+    return waitForBrowserRendererLifecycle(rendererArg.start(), 'start');
+  }
+
   private readonly handleResourceAssociationRequest = (
     eventArg: CustomEvent<plugins.deesCatalog.THarnessResourceAssociationRequestDetail>,
   ): void => {
@@ -6707,9 +7795,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
@@ -6751,7 +7842,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       ) return;
       this.resources = Array.isArray(response.resources) ? response.resources : [];
       this.resourcesLoadedForProjectId = projectId;
-      const viewedBrowserResource = this.resources.find((resource) => (
+      const viewedBrowserResource = this.resources.find((resource): resource is interfaces.IControllerBrowserResource => (
         resource.id === this.browserViewResourceId && resource.kind === 'browser'
       ));
       if (
@@ -6761,7 +7852,22 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           || viewedBrowserResource.lifecycle !== 'active'
           || viewedBrowserResource.attachment.revision !== this.browserViewAttachmentRevision
         )
-      ) void this.closeBrowserView();
+      ) {
+        const reopen = Boolean(
+          viewedBrowserResource
+          && viewedBrowserResource.lifecycle === 'active'
+          && viewedBrowserResource.browserRuntimeState === 'available'
+          && this.selectedResourceId === viewedBrowserResource.id,
+        );
+        await this.closeBrowserView();
+        if (
+          reopen
+          && viewedBrowserResource
+          && this.selectedResourceId === viewedBrowserResource.id
+          && this.selectedProjectId === projectId
+          && this.isCurrentConnection(generation)
+        ) await this.openBrowserView(viewedBrowserResource);
+      }
       if (
         this.selectedResourceId
         && !this.resources.some((resource) => resource.id === this.selectedResourceId)
@@ -6981,6 +8087,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')
@@ -7933,6 +9050,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;
@@ -8038,79 +9566,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);
@@ -10424,25 +11900,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"
@@ -10746,9 +12203,12 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           <dees-icon icon="lucide:Globe2" iconSize="16"></dees-icon>
           <input
             aria-label="Browser address"
-            .value=${activeTab?.url ?? ''}
+            .value=${this.browserAddressEditing ? this.browserAddressDraft : activeTab?.url ?? ''}
             placeholder="https://example.com"
             ?disabled=${!this.browserViewId}
+            @focus=${this.handleBrowserAddressFocus}
+            @input=${this.handleBrowserAddressInput}
+            @blur=${this.handleBrowserAddressBlur}
           />
           <dees-button
             type="highlighted"
@@ -10803,6 +12263,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}`
@@ -10876,27 +12337,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),
@@ -11120,6 +12566,7 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
           .reasoningEffort=${this.resolveSessionEffortString(sessionId) || 'default'}
           .effortOptions=${this.resolveSessionEffortOptions(sessionId)}
           .showTodosPanel=${true}
+          .markdownWhileStreaming=${false}
           heading=${detailArg.session.title || `${sessionHarnessLabel(sessionId.harnessId)} session`}
           subheading=${readOnly
             ? `Flex unavailable · saved projection · read-only · ${runtimeIdDisplay(sessionId)}`
@@ -11454,13 +12901,6 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       ? (this.authenticated ? 'authenticated' : 'connected')
       : pending ? 'connecting' : 'offline';
     const metrics = this.systemMetrics;
-    const memoryPercent = metrics?.memoryUsedBytes !== null
-      && metrics?.memoryUsedBytes !== undefined
-      && metrics.memoryTotalBytes !== null
-      && metrics.memoryTotalBytes !== undefined
-      && metrics.memoryTotalBytes > 0
-      ? (metrics.memoryUsedBytes / metrics.memoryTotalBytes) * 100
-      : null;
     const memoryTitle = metrics?.memoryUsedBytes !== null
       && metrics?.memoryUsedBytes !== undefined
       && metrics.memoryTotalBytes !== null
@@ -11484,19 +12924,19 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
                     : 'Whole-system CPU usage'}
                 >
                   <span class="metricLabel">CPU</span>
-                  <span>${formatPercentage(metrics?.cpuUsagePercent)}</span>
+                  <span class="metricValue">--</span>
                 </span>
                 <span class="statusMetric memoryMetric" title=${memoryTitle}>
                   <span class="metricLabel">RAM</span>
-                  <span>${formatPercentage(memoryPercent)}</span>
+                  <span class="metricValue">--</span>
                 </span>
                 <span
                   class="statusMetric networkMetric"
                   title="Aggregate traffic across all system network interfaces"
                 >
                   <span class="metricLabel">NET</span>
-                  <span>in ${formatByteRate(metrics?.networkReceiveBytesPerSecond)}</span>
-                  <span>out ${formatByteRate(metrics?.networkTransmitBytesPerSecond)}</span>
+                  <span class="networkReceive">in --</span>
+                  <span class="networkTransmit">out --</span>
                 </span>
               </div>
             `