diff --git a/media/webview-logging.css b/media/webview-logging.css
index 16293fc..f07c533 100644
--- a/media/webview-logging.css
+++ b/media/webview-logging.css
@@ -69,6 +69,11 @@
   color: var(--vscode-list-errorForeground);
 }
 
+.log-entry[data-moniker="<VSCode>"] {
+  line-height: 75%;
+  opacity: 70%;
+}
+
 #log-action-container {
   display: flex;
   height: var(--log-action-container-height);
diff --git a/src/ffx.ts b/src/ffx.ts
index 47a89d8..81e5b3d 100644
--- a/src/ffx.ts
+++ b/src/ffx.ts
@@ -311,17 +311,23 @@
    * Runs ffx --target [device] --machine json log
    *
    * @param device the name of the target device to use on ffx log
+   * @param args additional arguments for the `ffx log` process.
    * @param onData when data is received this command will be called
    * @returns the ffx log process
    */
-  public runLog(device: string | undefined, onData: (data: Object) => void): FfxLog {
-    let args = (device) ? ['--target', device] : [];
-    args = args.concat(['--machine', 'json', 'log']);
+  public runLog(
+    device: string | undefined,
+    args: string[],
+    onData: (data: Object) => void
+  ): FfxLog {
+    let ffxArgs = (device ? ['--target', device] : []);
+    ffxArgs.push('--machine', 'json', 'log');
+    ffxArgs.push(...args);
     return new JsonStreamProcess(
-      this.runFfxStreaming(args),
+      this.runFfxStreaming(ffxArgs),
       onData,
       (data) => {
-        logger.warn(`Error [${this.path} ${args}]: ${data}`);
+        logger.warn(`Error [${this.path} ${ffxArgs}]: ${data}`);
       });
   }
 
diff --git a/src/logging/view_provider.ts b/src/logging/view_provider.ts
index a70a9a1..430049a 100644
--- a/src/logging/view_provider.ts
+++ b/src/logging/view_provider.ts
@@ -59,8 +59,15 @@
 
     webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
 
-    webviewView.webview.onDidReceiveMessage(data => {
-      // No messages expected yet coming out of the webview.
+    webviewView.webview.onDidReceiveMessage(message => {
+      switch (message.command) {
+        case 'pauseLogStreaming':
+          this.process?.stop();
+          break;
+        case 'resumeLogStreaming':
+          this.startListeningForLogs('now');
+          break;
+      }
     });
 
     this.lastVisibilitySeen = this.view.visible;
@@ -111,9 +118,10 @@
     await this.view?.webview.postMessage({ type: 'reset' });
   }
 
-  private startListeningForLogs() {
+  private startListeningForLogs(since?: string) {
     this.process?.stop();
-    this.process = this.ffx.runLog(this.currentDevice, (data: Object) => {
+    const args = since ? ['--since', since] : [];
+    this.process = this.ffx.runLog(this.currentDevice, args, (data: Object) => {
       // this was... not marked async before, but postMessage is an async operation
       // so there's not much to do about this here.  We've gotta just go async & hope.
       this.addLog(data).catch((err) => logger.error('unable to show log line', undefined, err));
diff --git a/src/test/suite/ffx.test.ts b/src/test/suite/ffx.test.ts
index 53bb938..7269e86 100644
--- a/src/test/suite/ffx.test.ts
+++ b/src/test/suite/ffx.test.ts
@@ -577,7 +577,7 @@
       let received;
       const TEST_DATA: Object = { 'foo': 'bar' };
       stubbedSpawn.spawnStubInfo.callsFake(() => stubbedSpawn.spawnEvent);
-      ffx.runLog('foo', (data) => {
+      ffx.runLog('foo', [], (data) => {
         received = data;
       });
       assert.deepStrictEqual(
@@ -592,7 +592,7 @@
       // spy on the singleton instead of the module method, since we can't
       // modify singletons and such with ESM
       let spiedWarn = sandbox.spy(logger.logger, 'warn');
-      ffx.runLog('foo', (_) => { });
+      ffx.runLog('foo', [], (_) => { });
       stubbedSpawn.spawnEvent.stderr?.emit('data', 'oh no');
       assert(spiedWarn.calledOnce);
       assert(
diff --git a/src/test/suite/logging/view_provider.test.ts b/src/test/suite/logging/view_provider.test.ts
index eaf171c..d118e9b 100644
--- a/src/test/suite/logging/view_provider.test.ts
+++ b/src/test/suite/logging/view_provider.test.ts
@@ -39,8 +39,9 @@
       let fakeProcess = sandbox.createStubInstance(JsonStreamProcess);
       ffx.runLog.returns(fakeProcess);
       let provider = new LoggingViewProvider(uri, ffx);
-      let emitter = new vscode.EventEmitter<void>();
-      let view = fakeWebviewView(sandbox, true, emitter.event);
+      let visibilityEmitter = new vscode.EventEmitter<void>();
+      let view = fakeWebviewView(
+        sandbox, true, visibilityEmitter.event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -49,30 +50,32 @@
       });
 
       // This should trigger the creation of a process.
-      emitter.fire();
+      visibilityEmitter.fire();
 
       (view as any).visible = false;
-      emitter.fire();
+      visibilityEmitter.fire();
       assert.ok(fakeProcess.stop.calledOnce);
     });
 
     it('spawns an ffx process when the view appears', () => {
-      let emitter = new vscode.EventEmitter<void>();
-      let view = fakeWebviewView(sandbox, true, emitter.event);
+      let visibilityEmitter = new vscode.EventEmitter<void>();
+      let view = fakeWebviewView(
+        sandbox, true, visibilityEmitter.event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
         isCancellationRequested: false,
         onCancellationRequested: sandbox.stub()
       });
-      emitter.fire();
+      visibilityEmitter.fire();
       assert.ok(ffx.runLog.calledOnce);
       assert.deepStrictEqual(ffx.runLog.getCall(0).args[0], undefined);
     });
 
     it('spawns an ffx process when the view is resolved', () => {
-      let emitter = new vscode.EventEmitter<void>();
-      let view = fakeWebviewView(sandbox, true, emitter.event);
+      let visibilityEmitter = new vscode.EventEmitter<void>();
+      let view = fakeWebviewView(
+        sandbox, true, visibilityEmitter.event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -88,11 +91,13 @@
     it('pushes a log to the webview when received', () => {
       let process = new StubbedSpawn(sandbox);
       let ffx = new Ffx('foo');
-      sandbox.stub(ffx, 'runFfxStreaming').returns(process.spawnEvent as ChildProcessWithoutNullStreams);
+      sandbox.stub(ffx, 'runFfxStreaming').returns(
+        process.spawnEvent as ChildProcessWithoutNullStreams);
       let provider = new LoggingViewProvider(uri, ffx);
 
-      let emitter = new vscode.EventEmitter<void>();
-      let view = fakeWebviewView(sandbox, true, emitter.event);
+      let visibilityEmitter = new vscode.EventEmitter<void>();
+      let view = fakeWebviewView(
+        sandbox, true, visibilityEmitter.event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -101,7 +106,7 @@
       });
 
       // The view should be visible now.
-      emitter.fire();
+      visibilityEmitter.fire();
 
       const data = '{"data":{"TargetLog": {}}}';
       process.spawnEvent.stdout?.emit('data', data);
@@ -117,11 +122,13 @@
     it('handles logs that contain new lines', () => {
       let process = new StubbedSpawn(sandbox);
       let ffx = new Ffx('foo');
-      sandbox.stub(ffx, 'runFfxStreaming').returns(process.spawnEvent as ChildProcessWithoutNullStreams);
+      sandbox.stub(ffx, 'runFfxStreaming').returns(
+        process.spawnEvent as ChildProcessWithoutNullStreams);
       let provider = new LoggingViewProvider(uri, ffx);
 
-      let emitter = new vscode.EventEmitter<void>();
-      let view = fakeWebviewView(sandbox, true, emitter.event);
+      let visibilityEmitter = new vscode.EventEmitter<void>();
+      let view = fakeWebviewView(
+        sandbox, true, visibilityEmitter.event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -130,7 +137,7 @@
       });
 
       // Creates the process
-      emitter.fire();
+      visibilityEmitter.fire();
 
       const data = `{"data":{"TargetLog": {"payload": {"message": "foo\\nbar"}}}}
       {"data": {"TargetLog": {"payload": {"message": "baz"}}}}`;
@@ -169,7 +176,8 @@
     });
 
     it('resets the view when the device changes and the view is visible', async () => {
-      let view = fakeWebviewView(sandbox, true, new vscode.EventEmitter<any>().event);
+      let view = fakeWebviewView(
+        sandbox, true, new vscode.EventEmitter<any>().event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -187,7 +195,8 @@
     });
 
     it('shows the view when the device changes and the view is not visible', async () => {
-      let view = fakeWebviewView(sandbox, false, new vscode.EventEmitter<any>().event);
+      let view = fakeWebviewView(
+        sandbox, false, new vscode.EventEmitter<any>().event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -201,7 +210,8 @@
 
   describe('on default target change', () => {
     it('changes the current device and resets the view when visible', () => {
-      let view = fakeWebviewView(sandbox, true, new vscode.EventEmitter<any>().event);
+      let view = fakeWebviewView(
+        sandbox, true, new vscode.EventEmitter<any>().event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -217,7 +227,8 @@
     });
 
     it('changes the current device when the view is not visible', () => {
-      let view = fakeWebviewView(sandbox, false, new vscode.EventEmitter<any>().event);
+      let view = fakeWebviewView(
+        sandbox, false, new vscode.EventEmitter<any>().event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -233,7 +244,8 @@
     });
 
     it('does nothing when the device is the same', async () => {
-      let view = fakeWebviewView(sandbox, false, new vscode.EventEmitter<any>().event);
+      let view = fakeWebviewView(
+        sandbox, false, new vscode.EventEmitter<any>().event, new vscode.EventEmitter<any>().event);
       provider.resolveWebviewView(view, {
         state: undefined
       }, {
@@ -249,6 +261,51 @@
       assert.ok(!webview.postMessage.calledOnce);
     });
   });
+
+  describe('when receiving messages from the webview', () => {
+    it('handles pause commands and stops the ffx log process', () => {
+      let fakeProcess = sandbox.createStubInstance(JsonStreamProcess);
+      ffx.runLog.returns(fakeProcess);
+      let provider = new LoggingViewProvider(uri, ffx);
+      let webviewMessagesEmitter = new vscode.EventEmitter<{ command: string }>();
+      let view = fakeWebviewView(
+        sandbox, true, new vscode.EventEmitter<void>().event, webviewMessagesEmitter.event);
+
+      provider.resolveWebviewView(view, {
+        state: undefined
+      }, {
+        isCancellationRequested: false,
+        onCancellationRequested: sandbox.stub()
+      });
+      assert.ok(ffx.runLog.calledOnce);
+      assert.ok(fakeProcess.stop.notCalled);
+
+      webviewMessagesEmitter.fire({ command: 'pauseLogStreaming' });
+
+      // No more calls should have happened on runLog and the process should have been stopped.
+      assert.ok(ffx.runLog.calledOnce);
+      assert.ok(fakeProcess.stop.calledOnce);
+    });
+
+    it('handles resume commands and starts a ffx log process', () => {
+      let webviewMessagesEmitter = new vscode.EventEmitter<{ command: string }>();
+      let view = fakeWebviewView(
+        sandbox, true, new vscode.EventEmitter<any>().event, webviewMessagesEmitter.event);
+
+      provider.resolveWebviewView(view, {
+        state: undefined
+      }, {
+        isCancellationRequested: false,
+        onCancellationRequested: sandbox.stub()
+      });
+      assert.ok(ffx.runLog.calledOnce);
+
+      webviewMessagesEmitter.fire({ command: 'resumeLogStreaming' });
+
+      assert.ok(ffx.runLog.calledTwice);
+      assert.deepStrictEqual(ffx.runLog.getCall(1).args[1], ['--since', 'now']);
+    });
+  });
 });
 
 /**
@@ -261,13 +318,13 @@
  */
 function fakeWebviewView(
   sandbox: SinonSandbox, visible: boolean,
-  onDidChangeVisibility: vscode.Event<any>,
+  onDidChangeVisibility: vscode.Event<void>,
+  onDidReceiveMessage: vscode.Event<any>,
 ): vscode.WebviewView {
   let webview = sandbox.createStubInstance(FakeWebview);
-  webview.onDidReceiveMessage = sandbox.stub();
+  webview.onDidReceiveMessage = onDidReceiveMessage as any;
   webview.postMessage = sandbox.stub();
   webview.asWebviewUri.returns(vscode.Uri.file('/fake/file'));
-  sandbox.spy(webview.onDidReceiveMessage);
 
   let view = <vscode.WebviewView>{ visible };
   // These exist in the WebviewView interface, but when doing
diff --git a/webviews/logging/components/log_row.ts b/webviews/logging/components/log_row.ts
index 6714da6..01c3841 100644
--- a/webviews/logging/components/log_row.ts
+++ b/webviews/logging/components/log_row.ts
@@ -25,6 +25,8 @@
     } else if (this.log.data.SymbolizedTargetLog !== undefined) {
       this.symbolized = this.log.data.SymbolizedTargetLog[1];
       this.formatRow(this.log.data.SymbolizedTargetLog[0]);
+    } else if (this.log.data.ViewerEvent !== undefined) {
+      this.formatViewerEventRow(this.log.data.ViewerEvent);
     }
   }
 
@@ -84,6 +86,7 @@
 
   /**
    * Formats row for Malformed Logs.
+   * @param malformedLog the malformed log to render as a message.
    */
   private formatMalformedRow(malformedLog: string) {
     const fields = { 'message': formatMalformedLog(malformedLog) };
@@ -92,6 +95,16 @@
   }
 
   /**
+   *  Formats row for an viewer synthesizedd log.
+   * @param message  the message to display.
+   */
+  private formatViewerEventRow(message: string) {
+    const fields = { message, moniker: constant.VSCODE_SYNTHETIC_MONIKER };
+    this.createLogRowAttributes(fields);
+    this.createLogInnerHtml(fields);
+  }
+
+  /**
    * Formats row for Target Log and Symbolized Logs.
    */
   private formatRow(log: LogData) {
diff --git a/webviews/logging/components/log_view_actions.ts b/webviews/logging/components/log_view_actions.ts
index 0782fe8..03b3f7d 100644
--- a/webviews/logging/components/log_view_actions.ts
+++ b/webviews/logging/components/log_view_actions.ts
@@ -8,8 +8,16 @@
 export const DONT_WRAP_LOGS: string = 'Don\'t wrap logs';
 export const WRAP_LOGS: string = 'Wrap logs';
 
+export const RESUME_STREAMING_LOGS: string = 'Resume streaming logs';
+export const PAUSE_STREAMING_LOGS: string = 'Pause streaming logs';
+
 const ACTION_ICON_CLASSES: string = 'codicon icons action-icon';
 
+export interface LogViewActionsParameters {
+  wrappingLogs?: boolean;
+  playActive?: boolean;
+}
+
 /**
  * Class to create action buttons that control the log list webview.
  */
@@ -47,19 +55,33 @@
   @property({ attribute: true, reflect: true, type: Boolean })
   public wrappingLogs: boolean;
 
+  @property({ attribute: true, reflect: true, type: Boolean })
+  public playActive: boolean = false;
+
   public static readonly wrapLogsChangeEvent: string = 'wrap-logs-change';
   public static readonly clearRequestedEvent: string = 'clear-requested';
+  public static readonly playPauseChangeEvent: string = 'play-pause-change';
 
-  constructor(wrappingLogs: boolean) {
+  constructor(params: LogViewActionsParameters | undefined) {
     super();
-    this.wrappingLogs = wrappingLogs;
+    this.wrappingLogs = params?.wrappingLogs ?? false;
+    this.playActive = params?.playActive ?? false;
   }
 
   render() {
     const wrapLogsTitle = this.wrappingLogs ? DONT_WRAP_LOGS : WRAP_LOGS;
+    const playPauseTitle = this.playActive ? PAUSE_STREAMING_LOGS : RESUME_STREAMING_LOGS;
+    const playPauseIcon = this.playActive ? 'debug-pause' : 'play';
 
     return html`
       <div
+        id="play-pause"
+        title="${playPauseTitle}"
+        class="${ACTION_ICON_CLASSES} codicon-${playPauseIcon}"
+        @click="${this.onPlayPauseButtonClick}"
+      ></div>
+
+      <div
         id="clear"
         title="Clear Logs"
         class="${ACTION_ICON_CLASSES} codicon-clear-all"
@@ -90,4 +112,13 @@
       }
     }));
   }
+
+  private onPlayPauseButtonClick() {
+    this.playActive = !this.playActive;
+    this.dispatchEvent(new CustomEvent(LogViewActions.playPauseChangeEvent, {
+      detail: {
+        playActive: this.playActive,
+      }
+    }));
+  }
 }
diff --git a/webviews/logging/components/view.ts b/webviews/logging/components/view.ts
index d1ef29a..3daa5f7 100644
--- a/webviews/logging/components/view.ts
+++ b/webviews/logging/components/view.ts
@@ -8,14 +8,24 @@
 import { State } from '../src/state';
 import { LogList } from './log_list';
 
-export class LoggingView {
+export const RESUMING_LOG_STREAMING_LOG = 'Resuming log streaming, press [pause icon] to pause.';
+export const PAUSING_LOG_STREAMING_LOG = 'Playback has been paused, press [play icon] to resume.';
+
+export type ExternalActionRequestEvent =
+  | { type: 'pause-log-streaming' }
+  | { type: 'resume-log-streaming' };
+
+export class LoggingView extends EventTarget {
   private logActionContainer: HTMLDivElement;
   private logControl: LogControl;
   private logList: LogList;
   private logListContainer: HTMLDivElement;
   private logViewActions: LogViewActions;
 
+  public static readonly externalActionRequestEvent: string = 'external-action-request-event';
+
   constructor(private state: State, private root: HTMLElement) {
+    super();
     this.logList = new LogList(state);
 
     this.logControl = new LogControl(this.state.currentFilterText);
@@ -25,7 +35,14 @@
       this.state.registerFilter(filter, text);
     });
 
-    this.logViewActions = new LogViewActions(this.state.shouldWrapLogs);
+    this.logViewActions = new LogViewActions({
+      wrappingLogs: this.state.shouldWrapLogs,
+      /**
+       * TODO(fxbug.dev/109719): make this behavior persisted and automatic
+       * with focus changes
+       */
+      playActive: true
+    });
     this.logViewActions.addEventListener(LogViewActions.clearRequestedEvent, (e) => {
       this.logList.reset();
     });
@@ -35,6 +52,11 @@
       this.logList.logWrapping = wrapLogs;
       this.state.shouldWrapLogs = wrapLogs;
     });
+    this.logViewActions.addEventListener(LogViewActions.playPauseChangeEvent, (e) => {
+      const event = e as CustomEvent;
+      const { playActive } = event.detail;
+      this.onPlayPauseChangeEvent(playActive);
+    });
 
     this.logActionContainer = document.createElement('div');
     this.logActionContainer.id = 'log-action-container';
@@ -65,4 +87,29 @@
     this.logList.reset();
     this.logControl.reset();
   }
+
+  /**
+   * Handles a play/pause event emitted by the log actions view.
+   * @param playActive whether or not the streaming of logs is active
+   */
+  private onPlayPauseChangeEvent(playActive: boolean) {
+    const detail: ExternalActionRequestEvent =
+      playActive
+        ? { type: 'resume-log-streaming' }
+        : { type: 'pause-log-streaming' };
+    this.dispatchEvent(new CustomEvent(LoggingView.externalActionRequestEvent, {
+      detail,
+    }));
+
+    this.logList.addLog({
+      data: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        ViewerEvent: playActive
+          ? RESUMING_LOG_STREAMING_LOG
+          : PAUSING_LOG_STREAMING_LOG
+      },
+      timestamp: Date.now(),
+      version: 0
+    });
+  }
 }
diff --git a/webviews/logging/index.ts b/webviews/logging/index.ts
index dfe859e..e379cfc 100644
--- a/webviews/logging/index.ts
+++ b/webviews/logging/index.ts
@@ -2,25 +2,51 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { LoggingView } from './components/view';
-import { State } from './src/state';
+import { WebviewApi } from 'vscode-webview';
+import { ExternalActionRequestEvent, LoggingView } from './components/view';
+import { PersistedState, State } from './src/state';
 
 //@ts-check
 
 // This script will be run within the webview itself
 // It cannot access the main VS Code APIs directly.
 (function () {
-  const view = new LoggingView(new State(acquireVsCodeApi()), document.body);
+  const vscode = acquireVsCodeApi() as WebviewApi<PersistedState>;
+  const view = new LoggingView(new State(vscode), document.body);
+
+  // TODO(fxbug.dev/109719): move this to the persisted state.
+  let playing = true;
 
   // Handle messages sent from the extension to the webview
   window.addEventListener('message', event => {
     const message = event.data;
     switch (message.type) {
       case 'addLog':
-        view.addLog(message.log);
+        if (playing) {
+          view.addLog(message.log);
+        }
         break;
       case 'reset':
         view.reset();
     }
   });
+
+  // Forward webview messages to the extension.
+  view.addEventListener(LoggingView.externalActionRequestEvent, (e) => {
+    const event = (e as CustomEvent).detail as ExternalActionRequestEvent;
+    switch (event.type) {
+      case 'pause-log-streaming':
+        playing = false;
+        vscode.postMessage({
+          command: 'pauseLogStreaming'
+        });
+        break;
+      case 'resume-log-streaming':
+        playing = true;
+        vscode.postMessage({
+          command: 'resumeLogStreaming'
+        });
+        break;
+    }
+  });
 }());
diff --git a/webviews/logging/src/constants.ts b/webviews/logging/src/constants.ts
index c352e72..234a846 100644
--- a/webviews/logging/src/constants.ts
+++ b/webviews/logging/src/constants.ts
@@ -8,6 +8,7 @@
 
 export const MONIKER_FILTER_LABEL = 'Moniker:';
 export const FFX_MONIKER = '<ffx>';
+export const VSCODE_SYNTHETIC_MONIKER = '<VSCode>';
 
 export const SEARCH_PLACEHOLDER = 'Filter logs...';
 
diff --git a/webviews/logging/src/log_data.ts b/webviews/logging/src/log_data.ts
index 8f9e16c..aede082 100644
--- a/webviews/logging/src/log_data.ts
+++ b/webviews/logging/src/log_data.ts
@@ -14,6 +14,7 @@
   FfxEvent?: FfxEventData,
   MalformedTargetLog?: string;
   SymbolizedTargetLog?: [LogData, string];
+  ViewerEvent?: string;
 }
 
 export type FfxEventData = 'TargetDisconnected' | 'LoggingStarted';
diff --git a/webviews/logging/test/log_row.test.ts b/webviews/logging/test/log_row.test.ts
index fc56f75..efad7f7 100644
--- a/webviews/logging/test/log_row.test.ts
+++ b/webviews/logging/test/log_row.test.ts
@@ -185,5 +185,21 @@
       msgEl.innerText.should.equal(msg);
     });
 
+    it('formats viewer synthesized messages', () => {
+      const msg = 'Logs are cool';
+      const data = {
+        data: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          ViewerEvent: msg,
+        },
+        timestamp: 0,
+        version: 0
+      };
+      const logRow = new LogRow(data, false).element;
+      const monikerEl = logRow.children[3] as HTMLElement;
+      const msgEl = logRow.children[6] as HTMLElement;
+      monikerEl.innerText.should.equal(constant.VSCODE_SYNTHETIC_MONIKER);
+      msgEl.innerText.should.equal(msg);
+    });
   });
 });
diff --git a/webviews/logging/test/log_view_actions.test.ts b/webviews/logging/test/log_view_actions.test.ts
index 2beeb9b..ecf9ecb 100644
--- a/webviews/logging/test/log_view_actions.test.ts
+++ b/webviews/logging/test/log_view_actions.test.ts
@@ -4,7 +4,7 @@
 
 import chai from 'chai'; // not esm
 import chaiDom from 'chai-dom'; // not esm
-import { DONT_WRAP_LOGS, LogViewActions, WRAP_LOGS } from '../components/log_view_actions';
+import { DONT_WRAP_LOGS, LogViewActions, PAUSE_STREAMING_LOGS, RESUME_STREAMING_LOGS, WRAP_LOGS } from '../components/log_view_actions';
 
 before(function () {
   chai.should();
@@ -26,13 +26,14 @@
   describe('#constructor', () => {
     it('crates log view actions buttons', async () => {
       await logViewActions.updateComplete;
-      logViewActions.shadowRoot!.children.length.should.equal(2);
-      logViewActions.shadowRoot!.children[0].id.should.equal('clear');
-      logViewActions.shadowRoot!.children[1].id.should.equal('wrap-logs');
+      logViewActions.shadowRoot!.children.length.should.equal(3);
+      logViewActions.shadowRoot!.children[0].id.should.equal('play-pause');
+      logViewActions.shadowRoot!.children[1].id.should.equal('clear');
+      logViewActions.shadowRoot!.children[2].id.should.equal('wrap-logs');
     });
 
-    it('takes state into account when creating the log wrap btn', async () => {
-      let logViewActions = new LogViewActions(false);
+    it('correctly initializes the log-wrap btn', async () => {
+      let logViewActions = new LogViewActions({ wrappingLogs: false });
       document.body.appendChild(logViewActions);
       await logViewActions.updateComplete;
       let wrapLogsButton = logViewActions.shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
@@ -40,13 +41,32 @@
       wrapLogsButton.title.should.equal(WRAP_LOGS);
       logViewActions.remove();
 
-      logViewActions = new LogViewActions(true);
+      logViewActions = new LogViewActions({ wrappingLogs: true });
       document.body.appendChild(logViewActions);
       await logViewActions.updateComplete;
       wrapLogsButton = logViewActions.shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
       logViewActions.wrappingLogs.should.be.true;
       wrapLogsButton.title.should.equal(DONT_WRAP_LOGS);
     });
+
+    it('correctly initializes the play-pause btn', async () => {
+      let logViewActions = new LogViewActions({ playActive: true });
+      document.body.appendChild(logViewActions);
+      await logViewActions.updateComplete;
+      let playPauseButton = logViewActions.shadowRoot!.querySelector('#play-pause') as HTMLDivElement;
+      logViewActions.playActive.should.be.true;
+      playPauseButton.title.should.equal(PAUSE_STREAMING_LOGS);
+      playPauseButton.classList.contains('codicon-debug-pause').should.be.true;
+      logViewActions.remove();
+
+      logViewActions = new LogViewActions({ playActive: false });
+      document.body.appendChild(logViewActions);
+      await logViewActions.updateComplete;
+      playPauseButton = logViewActions.shadowRoot!.querySelector('#play-pause') as HTMLDivElement;
+      logViewActions.playActive.should.be.false;
+      playPauseButton.title.should.equal(RESUME_STREAMING_LOGS);
+      playPauseButton.classList.contains('codicon-play').should.be.true;
+    });
   });
 
   describe('on clear button press', () => {
@@ -99,4 +119,44 @@
       wrapLogsButton.title.should.equal(WRAP_LOGS);
     });
   });
+
+  describe('on play/pause button press', () => {
+    it('emits a play-pause-change event and updates itself', async () => {
+      await logViewActions.updateComplete;
+      const playPauseButton = logViewActions
+        .shadowRoot!.querySelector('#play-pause') as HTMLDivElement;
+      let promise = new Promise<{ playActive: boolean }>((resolve) => {
+        logViewActions.addEventListener(LogViewActions.playPauseChangeEvent, (e) => {
+          const event = e as CustomEvent;
+          resolve(event.detail);
+        });
+      });
+      playPauseButton.click();
+
+      let payload = await promise;
+      payload.playActive.should.be.true;
+      await logViewActions.updateComplete;
+      logViewActions.playActive.should.be.true;
+      playPauseButton.title.should.equal(PAUSE_STREAMING_LOGS);
+      playPauseButton.classList.contains('codicon-debug-pause').should.be.true;
+      playPauseButton.classList.contains('codicon-play').should.be.false;
+
+      // Clicking again should toggle the state.
+
+      promise = new Promise<{ playActive: boolean }>((resolve) => {
+        logViewActions.addEventListener(LogViewActions.playPauseChangeEvent, (e) => {
+          const event = e as CustomEvent;
+          resolve(event.detail);
+        });
+      });
+      playPauseButton.click();
+
+      payload = await promise;
+      payload.playActive.should.be.false;
+      await logViewActions.updateComplete;
+      playPauseButton.title.should.equal(RESUME_STREAMING_LOGS);
+      playPauseButton.classList.contains('codicon-play').should.be.true;
+      playPauseButton.classList.contains('codicon-pause').should.be.false;
+    });
+  });
 });
diff --git a/webviews/logging/test/view.test.ts b/webviews/logging/test/view.test.ts
index 37b5b9d..e86cb8c 100644
--- a/webviews/logging/test/view.test.ts
+++ b/webviews/logging/test/view.test.ts
@@ -4,7 +4,7 @@
 
 import { CURRENT_VERSION, State } from '../src/state';
 import { FakeWebviewAPi, logDataForTest } from './util';
-import { LoggingView } from '../components/view';
+import { ExternalActionRequestEvent, LoggingView, PAUSING_LOG_STREAMING_LOG, RESUMING_LOG_STREAMING_LOG } from '../components/view';
 import * as constant from '../src/constants';
 import chai from 'chai';
 import chaiDom from 'chai-dom'; // not esm
@@ -148,5 +148,52 @@
       state.shouldWrapLogs.should.be.true;
       logList.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.true;
     });
+
+    it('renders a synthetic log about pause/play and emits events', async () => {
+      const view = new LoggingView(state, root);
+      const logList = root.querySelector('#log-list') as HTMLElement;
+
+      let logViewActions = root.getElementsByTagName('log-view-actions')[0] as LogViewActions;
+      await logViewActions.updateComplete;
+      let playPauseButton =
+        logViewActions.shadowRoot!.querySelector('#play-pause') as HTMLDivElement;
+
+      let promise = new Promise<ExternalActionRequestEvent>((resolve) => {
+        view.addEventListener(LoggingView.externalActionRequestEvent, (e) => {
+          const event = e as CustomEvent;
+          resolve(event.detail);
+        });
+      });
+
+      playPauseButton.click();
+      let event = await promise;
+      await logViewActions.updateComplete;
+
+      event.should.deep.equal({ type: 'pause-log-streaming' });
+      let logLine = logList.children[1] as HTMLElement;
+      (logLine.querySelector('#message')! as HTMLTableCellElement)
+        .innerText.should.equal(PAUSING_LOG_STREAMING_LOG);
+      (logLine.querySelector('#moniker')! as HTMLTableCellElement)
+        .innerText.should.equal(constant.VSCODE_SYNTHETIC_MONIKER);
+
+      // Clicking the button again should show the "Play" state.
+      promise = new Promise<ExternalActionRequestEvent>((resolve) => {
+        view.addEventListener(LoggingView.externalActionRequestEvent, (e) => {
+          const event = e as CustomEvent;
+          resolve(event.detail);
+        });
+      });
+
+      playPauseButton.click();
+      event = await promise;
+      await logViewActions.updateComplete;
+
+      event.should.deep.equal({ type: 'resume-log-streaming' });
+      logLine = logList.children[2] as HTMLElement;
+      (logLine.querySelector('#message')! as HTMLTableCellElement)
+        .innerText.should.equal(RESUMING_LOG_STREAMING_LOG);
+      (logLine.querySelector('#moniker')! as HTMLTableCellElement)
+        .innerText.should.equal(constant.VSCODE_SYNTHETIC_MONIKER);
+    });
   });
 });