agl 23.0.0 → 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,
@@ -459,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;
 
@@ -621,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)}%`
@@ -716,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;
@@ -937,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;
@@ -1015,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;
 
@@ -1036,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}` : ''}).`);
@@ -1045,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: {
@@ -2074,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;
     }
@@ -2092,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;
     }
@@ -2609,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 => {
@@ -5400,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') {
@@ -5435,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',
@@ -5446,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
@@ -5453,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 (
@@ -5462,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
@@ -5507,39 +5630,80 @@ 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();
   }
@@ -5551,70 +5715,190 @@ export class HarnessControllerApp extends plugins.deesElement.DeesElement {
       || pendingClose.connectionGeneration !== this.connectionGeneration
       || !this.socketClient.isConnected
     ) return;
-    try {
-      await this.socketClient.fire<interfaces.IReq_ControllerBrowserViewClose>(
-        'controller.browser.view.close',
-        { viewId: pendingClose.viewId },
-        { maxRetries: 0 },
-      );
-    } catch {
+    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 (
+      viewGenerationArg !== this.browserViewGeneration
+      || streamGenerationArg !== this.browserViewStreamGeneration
+      || !this.browserViewId
+    ) return;
+    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(
@@ -5623,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> {
@@ -5643,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 },
@@ -5653,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
@@ -5678,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: () => {
@@ -5689,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);
@@ -5725,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 => {
@@ -7518,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 (
@@ -7528,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)
@@ -11864,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"
@@ -12559,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
@@ -12589,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>
             `