diff --git a/frontend/src/app/workspace/component/menu/menu.component.html b/frontend/src/app/workspace/component/menu/menu.component.html
index c5bde9d41dc..c238fddd0ba 100644
--- a/frontend/src/app/workspace/component/menu/menu.component.html
+++ b/frontend/src/app/workspace/component/menu/menu.component.html
@@ -227,6 +227,14 @@
                   >Status</label
                 >
               </li>
+              <li nz-menu-item>
+                <label
+                  nz-checkbox
+                  [(ngModel)]="showResultPreview"
+                  (ngModelChange)="toggleResultPreview()"
+                  >Result preview</label
+                >
+              </li>
               <li nz-menu-item>
                 <label
                   nz-checkbox
diff --git a/frontend/src/app/workspace/component/menu/menu.component.ts b/frontend/src/app/workspace/component/menu/menu.component.ts
index b81eb7a9532..f12520342e1 100644
--- a/frontend/src/app/workspace/component/menu/menu.component.ts
+++ b/frontend/src/app/workspace/component/menu/menu.component.ts
@@ -160,6 +160,7 @@ export class MenuComponent implements OnInit, OnDestroy {
   public showNumWorkers: boolean = false;
   public showStatus: boolean = false;
   public showHeatmap: boolean = false;
+  public showResultPreview: boolean = true;
   public heatmapView: HeatmapView = HeatmapView.Runtime;
   public HeatmapView = HeatmapView; // make Angular HTML access enum definition
   protected readonly USER_WORKFLOW = USER_WORKFLOW;
@@ -243,6 +244,7 @@ export class MenuComponent implements OnInit, OnDestroy {
 
   public ngOnInit(): void {
     this.restorePersistedHeatmapOverlay();
+    this.showResultPreview = this.workflowActionService.getJointGraphWrapper().isResultPreviewEnabled();
     // The export flags are reset when a menu is destroyed, which is right when the workspace is
     // left and wrong when a workflow's two views hand over and the results are kept. Recompute
     // from what is in hand, so a menu arriving on retained results does not offer a dead button.
@@ -353,6 +355,10 @@ export class MenuComponent implements OnInit, OnDestroy {
     document.body.removeChild(tempSpan);
   }
 
+  toggleResultPreview() {
+    this.workflowActionService.getJointGraphWrapper().setResultPreviewEnabled(this.showResultPreview);
+  }
+
   toggleNumWorkers() {
     this.workflowActionService
       .getJointGraphWrapper()
diff --git a/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.html b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.html
new file mode 100644
index 00000000000..d6b6cd1d9bd
--- /dev/null
+++ b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.html
@@ -0,0 +1,69 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<div
+  class="result-preview"
+  role="tooltip">
+  <div class="result-preview__header">
+    <span class="result-preview__title">{{ preview.title }}</span>
+    <span
+      class="result-preview__summary"
+      [class.result-preview__summary--error]="preview.kind === 'error'"
+      >{{ preview.summary }}</span
+    >
+  </div>
+  <table
+    *ngIf="preview.columns.length > 0"
+    class="result-preview__table">
+    <thead>
+      <tr>
+        <th
+          *ngFor="let column of preview.columns"
+          [title]="column">
+          {{ column }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let row of rows ?? []">
+        <td
+          *ngFor="let cell of row"
+          [title]="cell">
+          {{ cell }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div
+    *ngIf="preview.kind === 'table' && rows === undefined"
+    class="result-preview__note">
+    Loading rows…
+  </div>
+  <div
+    *ngIf="preview.moreColumns > 0"
+    class="result-preview__note">
+    +{{ preview.moreColumns }} more {{ preview.moreColumns === 1 ? "column" : "columns" }}
+  </div>
+  <div
+    *ngIf="preview.detail"
+    class="result-preview__detail"
+    [class.result-preview__detail--error]="preview.kind === 'error'">
+    {{ preview.detail }}
+  </div>
+</div>
diff --git a/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.scss b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.scss
new file mode 100644
index 00000000000..442e9dc685a
--- /dev/null
+++ b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.scss
@@ -0,0 +1,108 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// One size for every operator, so the card does not jump as the pointer moves between them: it
+// fits the 5 rows and 6 columns the preview shows, and longer content is cut or scrolls inside.
+.result-preview {
+  box-sizing: border-box;
+  width: 440px;
+  height: 210px;
+  overflow: hidden;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #262626;
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+
+  &__header {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+  }
+
+  &__title {
+    min-width: 0;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__summary {
+    flex-shrink: 0;
+    color: #595959;
+
+    &--error {
+      color: #cf1322;
+    }
+  }
+
+  // the columns share the card's width evenly, whatever their contents
+  &__table {
+    flex-shrink: 0;
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    font-family: monospace;
+    font-size: 11px;
+
+    th,
+    td {
+      padding: 3px 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: left;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    th {
+      font-weight: 600;
+      color: #595959;
+      background: #fafafa;
+    }
+  }
+
+  &__note {
+    flex-shrink: 0;
+    color: #595959;
+  }
+
+  // a long error message scrolls inside the card instead of growing it
+  &__detail {
+    min-height: 0;
+    overflow-y: auto;
+    padding: 6px 8px;
+    border-radius: 4px;
+    background: #f5f5f5;
+
+    &--error {
+      color: #a8071a;
+      background: #fff1f0;
+    }
+  }
+}
diff --git a/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.spec.ts b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.spec.ts
new file mode 100644
index 00000000000..e736ba1ccdb
--- /dev/null
+++ b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.spec.ts
@@ -0,0 +1,278 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { By } from "@angular/platform-browser";
+import { NzModalModule } from "ng-zorro-antd/modal";
+
+import { NEVER, of, Subject } from "rxjs";
+import {
+  formatPreviewCell,
+  OperatorResultPreviewComponent,
+  PREVIEW_CELL_LIMIT,
+  PREVIEW_COLUMN_LIMIT,
+  PREVIEW_ROW_LIMIT,
+} from "./operator-result-preview.component";
+import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
+import { WorkflowResultService } from "../../../service/workflow-result/workflow-result.service";
+import { WorkflowCompilingService } from "../../../service/compile-workflow/workflow-compiling.service";
+import { ExecuteWorkflowService } from "../../../service/execute-workflow/execute-workflow.service";
+import { OperatorMetadataService } from "../../../service/operator-metadata/operator-metadata.service";
+import { StubOperatorMetadataService } from "../../../service/operator-metadata/stub-operator-metadata.service";
+import { ComputingUnitStatusService } from "../../../../common/service/computing-unit/computing-unit-status/computing-unit-status.service";
+import { MockComputingUnitStatusService } from "../../../../common/service/computing-unit/computing-unit-status/mock-computing-unit-status.service";
+import { commonTestProviders } from "../../../../common/testing/test-utils";
+import { mockPoint, mockScanPredicate } from "../../../service/workflow-graph/model/mock-workflow-data";
+import { ExecutionState, WebResultUpdate } from "../../../types/execute-workflow.interface";
+import { ConsoleMessage } from "../../../types/workflow-common.interface";
+import { WorkflowConsoleService } from "../../../service/workflow-console/workflow-console.service";
+import { AttributeType } from "../../../types/workflow-compiling.interface";
+import { WorkflowFatalError } from "../../../types/workflow-websocket.interface";
+import { OperatorPaginationResultService } from "../../../service/workflow-result/workflow-result.service";
+
+describe("OperatorResultPreviewComponent", () => {
+  let component: OperatorResultPreviewComponent;
+  let fixture: ComponentFixture<OperatorResultPreviewComponent>;
+  let resultService: WorkflowResultService;
+  let compilingService: WorkflowCompilingService;
+  let executeService: ExecuteWorkflowService;
+
+  const id = mockScanPredicate.operatorID;
+
+  const fatalError = (operatorId: string): WorkflowFatalError => ({
+    message: "KeyError: 'price'",
+    details: "",
+    operatorId,
+    workerId: "",
+    type: { name: "ExecutionError" },
+    timestamp: { nanos: 0, seconds: 0 },
+  });
+
+  const withColumns = (count: number) =>
+    vi.spyOn(compilingService, "getOperatorOutputSchemaMap").mockReturnValue({
+      "output-0": Array.from({ length: count }, (_, i) => ({
+        attributeName: `col${i}`,
+        attributeType: "string" as AttributeType,
+      })),
+    });
+
+  // A paginated result of `rows` tuples whose first page is `page`; `page` undefined never answers.
+  const withRows = (rows: number, page?: Record<string, unknown>[]) => {
+    const peekFirstRows = vi.fn(() => (page ? of({ table: page }) : NEVER));
+    vi.spyOn(resultService, "getPaginatedResultService").mockReturnValue({
+      getCurrentTotalNumTuples: () => rows,
+      peekFirstRows,
+    } as unknown as OperatorPaginationResultService);
+    return peekFirstRows;
+  };
+
+  // Set through the input, as the canvas does, so ngOnChanges loads the rows.
+  const hover = (operatorId: string) => {
+    fixture.componentRef.setInput("operatorId", operatorId);
+    fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OperatorResultPreviewComponent, HttpClientTestingModule, NzModalModule],
+      providers: [
+        WorkflowActionService,
+        ExecuteWorkflowService,
+        { provide: OperatorMetadataService, useClass: StubOperatorMetadataService },
+        { provide: ComputingUnitStatusService, useClass: MockComputingUnitStatusService },
+        ...commonTestProviders,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OperatorResultPreviewComponent);
+    component = fixture.componentInstance;
+    resultService = TestBed.inject(WorkflowResultService);
+    compilingService = TestBed.inject(WorkflowCompilingService);
+    executeService = TestBed.inject(ExecuteWorkflowService);
+    TestBed.inject(WorkflowActionService).addOperator({ ...mockScanPredicate, customDisplayName: "Orders" }, mockPoint);
+    component.operatorId = id;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    fixture.destroy();
+  });
+
+  it("shows a table result's size and its columns", () => {
+    withRows(1240);
+    withColumns(3);
+
+    expect(component.preview).toEqual({
+      title: "Orders",
+      kind: "table",
+      summary: "1,240 rows · 3 columns",
+      columns: ["col0", "col1", "col2"],
+      moreColumns: 0,
+    });
+  });
+
+  it("lists only the first columns of a wide result and counts the rest", () => {
+    withRows(1);
+    withColumns(PREVIEW_COLUMN_LIMIT + 4);
+
+    const preview = component.preview;
+    expect(preview.summary).toBe(`1 row · ${PREVIEW_COLUMN_LIMIT + 4} columns`);
+    expect(preview.columns.length).toBe(PREVIEW_COLUMN_LIMIT);
+    expect(preview.moreColumns).toBe(4);
+  });
+
+  it("says the rows are the first output's when the operator has several", () => {
+    const split = "split-op";
+    TestBed.inject(WorkflowActionService).addOperator(
+      {
+        ...mockScanPredicate,
+        operatorID: split,
+        outputPorts: [{ portID: "output-0" }, { portID: "output-1" }],
+      },
+      mockPoint
+    );
+    component.operatorId = split;
+    withRows(10);
+    withColumns(2);
+
+    expect(component.preview.summary).toBe("10 rows · 2 columns · first of 2 outputs");
+  });
+
+  it("says a chart was drawn for a result that is not a table", () => {
+    vi.spyOn(resultService, "hasResult").mockReturnValue(true);
+
+    expect(component.preview.kind).toBe("chart");
+  });
+
+  it("shows the operator's error ahead of any result", () => {
+    withRows(5);
+    vi.spyOn(executeService, "getErrorMessages").mockReturnValue([fatalError(id)]);
+
+    expect(component.preview).toMatchObject({ kind: "error", summary: "failed", detail: "KeyError: 'price'" });
+  });
+
+  // A bad tuple pauses the worker and writes an ERROR to the console rather than failing the run.
+  it("shows the error an operator wrote to its console", () => {
+    withRows(5);
+    vi.spyOn(TestBed.inject(WorkflowConsoleService), "getConsoleMessages").mockReturnValue([
+      { msgType: { name: "PRINT" }, title: "hello" },
+      { msgType: { name: "ERROR" }, title: 'NumberFormatException: For input string: "a"' },
+    ] as unknown as ConsoleMessage[]);
+
+    expect(component.preview).toMatchObject({
+      kind: "error",
+      summary: "failed",
+      detail: 'NumberFormatException: For input string: "a"',
+    });
+  });
+
+  it("says to run the workflow when nothing has run yet", () => {
+    expect(component.preview).toMatchObject({ kind: "none", detail: "Run the workflow to see its result." });
+  });
+
+  it("says how to keep the result when the run did not keep one", () => {
+    vi.spyOn(executeService, "getExecutionState").mockReturnValue({ state: ExecutionState.Completed });
+
+    expect(component.preview.kind).toBe("none");
+    expect(component.preview.detail).toContain("Turn on its eye icon");
+  });
+
+  it("renders the first rows under the first columns, and counts the columns left out", () => {
+    withRows(2, [
+      { col0: "a", col1: 1, col6: "hidden" },
+      { col0: null, col1: { nested: true }, col6: "hidden" },
+    ]);
+    withColumns(PREVIEW_COLUMN_LIMIT + 1);
+    hover(id);
+
+    const text = (css: string) => fixture.debugElement.query(By.css(css)).nativeElement.textContent.trim();
+    const cells = (css: string) =>
+      fixture.debugElement.queryAll(By.css(css)).map(e => e.nativeElement.textContent.trim());
+    expect(text(".result-preview__title")).toBe("Orders");
+    expect(text(".result-preview__summary")).toBe(`2 rows · ${PREVIEW_COLUMN_LIMIT + 1} columns`);
+    expect(cells("th").length).toBe(PREVIEW_COLUMN_LIMIT);
+    expect(fixture.debugElement.queryAll(By.css("tbody tr")).length).toBe(2);
+    expect(cells("tbody tr:first-child td").slice(0, 2)).toEqual(["a", "1"]);
+    expect(cells("tbody tr:nth-child(2) td").slice(0, 2)).toEqual(["", '{"nested":true}']);
+    expect(text(".result-preview__note")).toBe("+1 more column");
+    expect(fixture.debugElement.query(By.css(".result-preview__detail"))).toBeNull();
+  });
+
+  it("asks for the first rows only, and shows that they are loading until they come", () => {
+    const peek = withRows(10);
+    withColumns(2);
+    hover(id);
+
+    expect(peek).toHaveBeenCalledWith(PREVIEW_ROW_LIMIT);
+    expect(component.rows).toBeUndefined();
+    expect(fixture.debugElement.query(By.css(".result-preview__note")).nativeElement.textContent.trim()).toBe(
+      "Loading rows…"
+    );
+  });
+
+  it("asks for no rows when the result has none", () => {
+    const peek = withRows(0);
+    withColumns(2);
+    hover(id);
+
+    expect(peek).not.toHaveBeenCalled();
+    expect(component.rows).toEqual([]);
+  });
+
+  it("fetches the rows again as a running operator's result grows, until the preview is full", () => {
+    const resultUpdates = new Subject<Record<string, WebResultUpdate | undefined>>();
+    vi.spyOn(resultService, "getResultUpdateStream").mockReturnValue(resultUpdates);
+    withRows(0);
+    withColumns(1);
+    hover(id);
+    expect(component.rows).toEqual([]);
+
+    const fullPage = Array.from({ length: PREVIEW_ROW_LIMIT }, (_, i) => ({ col0: `r${i}` }));
+    const peek = withRows(PREVIEW_ROW_LIMIT, fullPage);
+    resultUpdates.next({ "another-op": undefined });
+    expect(peek).not.toHaveBeenCalled();
+    resultUpdates.next({ [id]: undefined });
+    expect(component.rows?.length).toBe(PREVIEW_ROW_LIMIT);
+
+    resultUpdates.next({ [id]: undefined });
+    expect(peek).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the rows on show while it fetches them again", () => {
+    const resultUpdates = new Subject<Record<string, WebResultUpdate | undefined>>();
+    vi.spyOn(resultService, "getResultUpdateStream").mockReturnValue(resultUpdates);
+    withRows(1, [{ col0: "a" }]);
+    withColumns(1);
+    hover(id);
+
+    withRows(2);
+    resultUpdates.next({ [id]: undefined });
+    expect(component.rows).toEqual([["a"]]);
+  });
+
+  it("prints a cell short, blank for null, and as JSON for an object", () => {
+    expect(formatPreviewCell(null)).toBe("");
+    expect(formatPreviewCell(undefined)).toBe("");
+    expect(formatPreviewCell(3.5)).toBe("3.5");
+    expect(formatPreviewCell({ a: 1 })).toBe('{"a":1}');
+    const long = "x".repeat(PREVIEW_CELL_LIMIT + 10);
+    expect(formatPreviewCell(long)).toBe("x".repeat(PREVIEW_CELL_LIMIT - 1) + "…");
+  });
+});
diff --git a/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.ts b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.ts
new file mode 100644
index 00000000000..159725f1ead
--- /dev/null
+++ b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.ts
@@ -0,0 +1,183 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { NgFor, NgIf } from "@angular/common";
+import { Subscription } from "rxjs";
+import { filter } from "rxjs/operators";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
+import { WorkflowResultService } from "../../../service/workflow-result/workflow-result.service";
+import { WorkflowCompilingService } from "../../../service/compile-workflow/workflow-compiling.service";
+import { ExecuteWorkflowService } from "../../../service/execute-workflow/execute-workflow.service";
+import { WorkflowConsoleService } from "../../../service/workflow-console/workflow-console.service";
+import { ExecutionState } from "../../../types/execute-workflow.interface";
+
+/** How many columns the preview shows before it says how many more there are. */
+export const PREVIEW_COLUMN_LIMIT = 6;
+/** How many rows the preview shows. */
+export const PREVIEW_ROW_LIMIT = 5;
+/** How many characters of a cell the preview shows; the rest is in the cell's tooltip. */
+export const PREVIEW_CELL_LIMIT = 24;
+
+/** A cell as the preview prints it: short, and never "[object Object]". */
+export function formatPreviewCell(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  const text = typeof value === "object" ? JSON.stringify(value) : String(value);
+  return text.length > PREVIEW_CELL_LIMIT ? text.slice(0, PREVIEW_CELL_LIMIT - 1) + "…" : text;
+}
+
+export interface OperatorResultPreview {
+  title: string;
+  kind: "table" | "chart" | "error" | "none";
+  summary: string;
+  columns: readonly string[];
+  moreColumns: number;
+  detail?: string;
+}
+
+/**
+ * What hovering an operator on the canvas shows about its result: the first rows of a table,
+ * that it drew a chart, its error, or why there is nothing. The rows are fetched on their own
+ * request, which leaves the page the result table is on alone.
+ */
+@UntilDestroy()
+@Component({
+  selector: "texera-operator-result-preview",
+  templateUrl: "./operator-result-preview.component.html",
+  styleUrls: ["./operator-result-preview.component.scss"],
+  imports: [NgIf, NgFor],
+})
+export class OperatorResultPreviewComponent implements OnInit, OnChanges {
+  @Input() operatorId = "";
+
+  // The first rows of a table result, one string per shown column; undefined while they load.
+  rows: readonly (readonly string[])[] | undefined = undefined;
+  private rowsSubscription?: Subscription;
+
+  constructor(
+    private workflowActionService: WorkflowActionService,
+    private workflowResultService: WorkflowResultService,
+    private workflowCompilingService: WorkflowCompilingService,
+    private executeWorkflowService: ExecuteWorkflowService,
+    private workflowConsoleService: WorkflowConsoleService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    // A running operator's rows keep coming after the card opens, so fetch again until it has a full preview.
+    this.workflowResultService
+      .getResultUpdateStream()
+      .pipe(
+        filter(update => this.operatorId in update && (this.rows?.length ?? 0) < PREVIEW_ROW_LIMIT),
+        untilDestroyed(this)
+      )
+      .subscribe(() => this.loadRows(true));
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["operatorId"]) {
+      this.loadRows();
+    }
+  }
+
+  /** A refresh keeps the rows on show until the new ones come, so the card does not flash "Loading". */
+  private loadRows(refresh = false): void {
+    this.rowsSubscription?.unsubscribe();
+    const paginated = this.workflowResultService.getPaginatedResultService(this.operatorId);
+    if (!paginated || paginated.getCurrentTotalNumTuples() === 0) {
+      this.rows = [];
+      return;
+    }
+    if (!refresh) this.rows = undefined;
+    const columns = this.outputColumns(this.operatorId).slice(0, PREVIEW_COLUMN_LIMIT);
+    // Replaced when another operator is hovered, and dropped with the preview when the pointer leaves.
+    this.rowsSubscription = paginated
+      .peekFirstRows(PREVIEW_ROW_LIMIT)
+      .pipe(untilDestroyed(this))
+      .subscribe(page => {
+        this.rows = page.table.map(row =>
+          columns.map(column => formatPreviewCell((row as Record<string, unknown>)[column]))
+        );
+        this.changeDetectorRef.detectChanges();
+      });
+  }
+
+  get preview(): OperatorResultPreview {
+    const id = this.operatorId;
+    const graph = this.workflowActionService.getTexeraGraph();
+    const operator = graph.hasOperator(id) ? graph.getOperator(id) : undefined;
+    const title = operator?.customDisplayName ?? operator?.operatorType ?? id;
+    const base = { title, columns: [], moreColumns: 0 };
+
+    const error = this.executeWorkflowService
+      .getErrorMessages()
+      .concat(Object.values(this.workflowCompilingService.getWorkflowCompilationErrors()))
+      .find(e => e.operatorId === id);
+    if (error) {
+      return { ...base, kind: "error", summary: "failed", detail: error.message };
+    }
+    // A bad tuple pauses the worker and writes an ERROR to the console rather than failing the run.
+    const consoleError = (this.workflowConsoleService.getConsoleMessages(id) ?? []).find(
+      message => message.msgType.name === "ERROR"
+    );
+    if (consoleError) {
+      return { ...base, kind: "error", summary: "failed", detail: consoleError.title };
+    }
+
+    const paginated = this.workflowResultService.getPaginatedResultService(id);
+    if (paginated) {
+      const columns = this.outputColumns(id);
+      const rows = paginated.getCurrentTotalNumTuples();
+      // The preview is of the first output port; the pinned window has a tab for each.
+      const outputCount = operator?.outputPorts.length ?? 1;
+      return {
+        ...base,
+        kind: "table",
+        summary:
+          `${rows.toLocaleString()} ${rows === 1 ? "row" : "rows"} · ${columns.length} ${
+            columns.length === 1 ? "column" : "columns"
+          }` + (outputCount > 1 ? ` · first of ${outputCount} outputs` : ""),
+        columns: columns.slice(0, PREVIEW_COLUMN_LIMIT),
+        moreColumns: Math.max(0, columns.length - PREVIEW_COLUMN_LIMIT),
+      };
+    }
+
+    if (this.workflowResultService.hasResult(id)) {
+      return { ...base, kind: "chart", summary: "chart" };
+    }
+
+    const hasRun = this.executeWorkflowService.getExecutionState().state !== ExecutionState.Uninitialized;
+    return {
+      ...base,
+      kind: "none",
+      summary: "no result",
+      detail: hasRun
+        ? "This run did not keep this operator's result. Turn on its eye icon to keep it next time."
+        : "Run the workflow to see its result.",
+    };
+  }
+
+  /** The columns the operator's first output port was compiled to produce. */
+  private outputColumns(operatorId: string): string[] {
+    const ports = this.workflowCompilingService.getOperatorOutputSchemaMap(operatorId);
+    const firstPort = ports ? Object.values(ports)[0] : undefined;
+    return (firstPort ?? []).map(attribute => attribute.attributeName);
+  }
+}
diff --git a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.html b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.html
index 43d25120e9c..7e777e5f48d 100644
--- a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.html
+++ b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.html
@@ -31,6 +31,14 @@
     <div class="heatmap-tooltip__row">{{ heatmapTooltip.metricLabel }}</div>
     <div class="heatmap-tooltip__row">Heat: {{ heatmapTooltip.heatLabel }}</div>
   </div>
+  <texera-operator-result-preview
+    class="result-preview-anchor"
+    *ngIf="resultPreview"
+    [operatorId]="resultPreview.operatorId"
+    (mouseenter)="keepResultPreview()"
+    (mouseleave)="hideResultPreviewSoon()"
+    [style.left.px]="resultPreview.x"
+    [style.top.px]="resultPreview.y"></texera-operator-result-preview>
   <nz-dropdown-menu
     nzNoAnimation
     #menu="nzDropdownMenu">
diff --git a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.scss b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.scss
index ad7ce546fda..26812ce4fca 100644
--- a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.scss
+++ b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.scss
@@ -34,6 +34,11 @@
   transition: fill 0.25s ease;
 }
 
+.result-preview-anchor {
+  position: absolute;
+  z-index: 11;
+}
+
 .heatmap-tooltip {
   position: absolute;
   z-index: 11;
diff --git a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.spec.ts b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.spec.ts
index 3b419e683a3..7f88fdfe456 100644
--- a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.spec.ts
+++ b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.spec.ts
@@ -24,7 +24,7 @@ import { DragDropService } from "../../service/drag-drop/drag-drop.service";
 import { WorkflowUtilService } from "../../service/workflow-graph/util/workflow-util.service";
 import { ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testing";
 import { ValidationWorkflowService } from "../../service/validation/validation-workflow.service";
-import { WorkflowEditorComponent } from "./workflow-editor.component";
+import { RESULT_PREVIEW_DELAY_MS, RESULT_PREVIEW_HIDE_MS, WorkflowEditorComponent } from "./workflow-editor.component";
 import { workflowEditorTestImports, workflowEditorTestProviders } from "./workflow-editor.test-utils";
 import { OperatorMetadataService } from "../../service/operator-metadata/operator-metadata.service";
 import { StubOperatorMetadataService } from "../../service/operator-metadata/stub-operator-metadata.service";
@@ -374,6 +374,103 @@ describe("WorkflowEditorComponent", () => {
       expect(linkView.hasTools()).toBe(false);
     });
 
+    it("previews a hovered operator's result once the pointer rests, and hides it when the pointer leaves", fakeAsync(() => {
+      addLinkedPair();
+      const view = component.paper.findViewByModel(mockScanPredicate.operatorID);
+
+      component.paper.trigger("element:mouseenter", view, new MouseEvent("mouseenter"));
+      // passing over an operator opens nothing; only a pointer that rests on it does
+      tick(RESULT_PREVIEW_DELAY_MS - 1);
+      expect(component.resultPreview).toBeNull();
+      tick(1);
+      fixture.detectChanges();
+      expect(component.resultPreview?.operatorId).toBe(mockScanPredicate.operatorID);
+      expect(fixture.debugElement.query(By.css("texera-operator-result-preview"))).toBeTruthy();
+
+      component.paper.trigger("element:mouseleave", view, new MouseEvent("mouseleave"));
+      // the card lingers a moment, so the pointer can cross into it
+      tick(RESULT_PREVIEW_HIDE_MS);
+      fixture.detectChanges();
+      expect(component.resultPreview).toBeNull();
+      expect(fixture.debugElement.query(By.css("texera-operator-result-preview"))).toBeNull();
+    }));
+
+    it("closes the card, and cancels a pending one, when an output port is pressed to drag a link", fakeAsync(() => {
+      addLinkedPair();
+      const view = component.paper.findViewByModel(mockScanPredicate.operatorID);
+      const outputPort = view.el.querySelector("[port-group='out']")!;
+
+      component.paper.trigger("element:mouseenter", view, new MouseEvent("mouseenter"));
+      tick(RESULT_PREVIEW_DELAY_MS);
+      expect(component.resultPreview).not.toBeNull();
+      outputPort.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+      expect(component.resultPreview).toBeNull();
+
+      component.paper.trigger("element:mouseenter", view, new MouseEvent("mouseenter"));
+      tick(RESULT_PREVIEW_DELAY_MS - 1);
+      outputPort.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+      tick(1);
+      expect(component.resultPreview).toBeNull();
+    }));
+
+    it("closes the card, and cancels a pending one, when its operator is deleted, but not for another", fakeAsync(() => {
+      addLinkedPair();
+      const workflowActionService = TestBed.inject(WorkflowActionService);
+      const scanView = component.paper.findViewByModel(mockScanPredicate.operatorID);
+      const resultView = component.paper.findViewByModel(mockResultPredicate.operatorID);
+
+      component.paper.trigger("element:mouseenter", scanView, new MouseEvent("mouseenter"));
+      tick(RESULT_PREVIEW_DELAY_MS);
+      workflowActionService.deleteOperator(mockResultPredicate.operatorID);
+      expect(component.resultPreview?.operatorId).toBe(mockScanPredicate.operatorID);
+      workflowActionService.deleteOperator(mockScanPredicate.operatorID);
+      expect(component.resultPreview).toBeNull();
+
+      workflowActionService.addOperator(mockResultPredicate, mockPoint);
+      component.paper.trigger("element:mouseenter", resultView, new MouseEvent("mouseenter"));
+      tick(RESULT_PREVIEW_DELAY_MS - 1);
+      workflowActionService.deleteOperator(mockResultPredicate.operatorID);
+      tick(1);
+      expect(component.resultPreview).toBeNull();
+    }));
+
+    it("opens no card once the editor is destroyed", fakeAsync(() => {
+      addLinkedPair();
+      const view = component.paper.findViewByModel(mockScanPredicate.operatorID);
+
+      component.paper.trigger("element:mouseenter", view, new MouseEvent("mouseenter"));
+      fixture.destroy();
+      tick(RESULT_PREVIEW_DELAY_MS);
+
+      expect(component.resultPreview).toBeNull();
+    }));
+
+    it("leaves the hover to the heat-map tooltip while that overlay is on", fakeAsync(() => {
+      addLinkedPair();
+      vi.spyOn(TestBed.inject(WorkflowActionService).getJointGraphWrapper(), "getHeatmapView").mockReturnValue(
+        "throughput" as any
+      );
+      const view = component.paper.findViewByModel(mockScanPredicate.operatorID);
+
+      component.paper.trigger("element:mouseenter", view, new MouseEvent("mouseenter"));
+      tick(RESULT_PREVIEW_DELAY_MS);
+
+      expect(component.resultPreview).toBeNull();
+    }));
+
+    it("opens no card while Layers > Result preview is off", fakeAsync(() => {
+      addLinkedPair();
+      vi.spyOn(TestBed.inject(WorkflowActionService).getJointGraphWrapper(), "isResultPreviewEnabled").mockReturnValue(
+        false
+      );
+      const view = component.paper.findViewByModel(mockScanPredicate.operatorID);
+
+      component.paper.trigger("element:mouseenter", view, new MouseEvent("mouseenter"));
+      tick(RESULT_PREVIEW_DELAY_MS);
+
+      expect(component.resultPreview).toBeNull();
+    }));
+
     /** Select the scan operator the way a click does and return its model, whose attrs say what is on show. */
     function selectScanOperator(): joint.dia.Cell {
       addLinkedPair();
diff --git a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
index 1fac6beeba3..023f2624da8 100644
--- a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
+++ b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
@@ -55,6 +55,7 @@ import { ContextMenuComponent } from "./context-menu/context-menu/context-menu.c
 import { NgIf } from "@angular/common";
 import { AgentInteractionComponent } from "../agent/agent-interaction/agent-interaction.component";
 import { HeatmapLegendComponent } from "../heatmap-legend/heatmap-legend.component";
+import { OperatorResultPreviewComponent } from "./operator-result-preview/operator-result-preview.component";
 import { JupyterPanelService } from "../../service/jupyter-panel/jupyter-panel.service";
 
 // jointjs interactive options for enabling and disabling interactivity
@@ -78,6 +79,17 @@ export const MAIN_CANVAS = {
   yMax: 1512, // yMin * 2.8
 };
 
+/** How long the pointer rests on an operator before its result card opens. */
+export const RESULT_PREVIEW_DELAY_MS = 500;
+/** How long the card stays after the pointer leaves, so the pointer can move into it. */
+export const RESULT_PREVIEW_HIDE_MS = 200;
+
+/** Whether a mouse button is down. JointJS hands over a jQuery event, which keeps the DOM one inside. */
+function isButtonHeld(evt: unknown): boolean {
+  const event = evt as { buttons?: number; originalEvent?: { buttons?: number } };
+  return (event.originalEvent?.buttons ?? event.buttons ?? 0) !== 0;
+}
+
 /**
  * WorkflowEditorComponent is the component for the main workflow editor part of the UI.
  *
@@ -103,6 +115,7 @@ export const MAIN_CANVAS = {
     NgIf,
     AgentInteractionComponent,
     HeatmapLegendComponent,
+    OperatorResultPreviewComponent,
   ],
 })
 export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -119,6 +132,12 @@ export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy
     metricLabel: string;
     heatLabel: string;
   } | null = null;
+  // The hovered operator's result preview, and where to show it. Null when hidden.
+  public resultPreview: { operatorId: string; x: number; y: number } | null = null;
+  private previewShowTimer?: ReturnType<typeof setTimeout>;
+  // The operator previewShowTimer opens the card for.
+  private previewPendingOperatorId?: string;
+  private previewHideTimer?: ReturnType<typeof setTimeout>;
   private paperInteractive: boolean = true;
   // Keeps the paper sized to its OWN container (not just the window) and rebuilds cell geometry
   // when the container goes 0 -> real size. Needed by embedded previews like the Form View strip,
@@ -249,6 +268,7 @@ export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy
     this.handleOperatorStatusUpdate();
     this.handleHeatmapOverlay();
     this.handleHeatmapHover();
+    this.handleResultPreviewHover();
     this.handleRegionEvents();
     this.handleOperatorSuggestionHighlightEvent();
     this.handleAgentHoverHighlight();
@@ -270,6 +290,9 @@ export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy
 
   ngOnDestroy(): void {
     this.paperResizeObserver?.disconnect();
+    // A card timer left running would reach for the removed paper and this destroyed view.
+    clearTimeout(this.previewShowTimer);
+    clearTimeout(this.previewHideTimer);
     // The paper is bound to the joint graph, which is root-provided and outlives this component,
     // so an undisposed one goes on listening to that graph from a DOM node no longer on the page.
     // Harmless while every mount followed a page load; the switch between a workflow's two views
@@ -590,6 +613,91 @@ export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy
       });
   }
 
+  /**
+   * Shows the hovered operator's result preview beside it. Off when Layers > Result preview is
+   * unchecked, and while the heat-map overlay is on, whose own tooltip answers the hover then.
+   */
+  private handleResultPreviewHover(): void {
+    fromJointPaperEvent(this.paper, "element:mouseenter")
+      .pipe(untilDestroyed(this))
+      .subscribe(([elementView, evt]) => {
+        clearTimeout(this.previewHideTimer);
+        clearTimeout(this.previewShowTimer);
+        if (this.wrapper.getHeatmapView() !== null || !this.wrapper.isResultPreviewEnabled()) {
+          return;
+        }
+        const operatorId = elementView.model.id.toString();
+        // no preview while a button is held: the pointer is dragging an operator or a link
+        if (!this.workflowActionService.getTexeraGraph().hasOperator(operatorId) || isButtonHeld(evt)) {
+          return;
+        }
+        // Only a pointer that rests on the operator opens the card, so passing over one does not.
+        this.previewPendingOperatorId = operatorId;
+        this.previewShowTimer = setTimeout(() => {
+          this.resultPreview = { operatorId, ...this.operatorAnchor(operatorId) };
+          // JointJS paper events fire outside Angular's zone (see handleHeatmapHover).
+          this.changeDetectorRef.detectChanges();
+        }, RESULT_PREVIEW_DELAY_MS);
+      });
+
+    fromJointPaperEvent(this.paper, "element:mouseleave")
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        clearTimeout(this.previewShowTimer);
+        this.hideResultPreviewSoon();
+      });
+
+    // A click or a drag on the canvas closes the card at once. A native capture listener, because
+    // pressing a port to drag a link stops JointJS before it emits element:pointerdown.
+    fromEvent(this.paper.el, "pointerdown", { capture: true })
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        clearTimeout(this.previewShowTimer);
+        if (this.resultPreview === null) return;
+        this.resultPreview = null;
+        this.changeDetectorRef.detectChanges();
+      });
+
+    // A deleted operator takes its card along, and a card still waiting to open for it.
+    this.workflowActionService
+      .getTexeraGraph()
+      .getOperatorDeleteStream()
+      .pipe(untilDestroyed(this))
+      .subscribe(({ deletedOperatorID }) => {
+        if (this.previewPendingOperatorId === deletedOperatorID) clearTimeout(this.previewShowTimer);
+        if (this.resultPreview?.operatorId !== deletedOperatorID) return;
+        this.resultPreview = null;
+        this.changeDetectorRef.detectChanges();
+      });
+  }
+
+  /** Close the card after a moment, so the pointer can cross from the operator into it. */
+  public hideResultPreviewSoon(): void {
+    clearTimeout(this.previewHideTimer);
+    this.previewHideTimer = setTimeout(() => {
+      this.resultPreview = null;
+      this.changeDetectorRef.detectChanges();
+    }, RESULT_PREVIEW_HIDE_MS);
+  }
+
+  /** The pointer reached the card, so it stays open. */
+  public keepResultPreview(): void {
+    clearTimeout(this.previewHideTimer);
+  }
+
+  /** Just right of the operator's box, level with its top, in the editor's coordinates. */
+  private operatorAnchor(operatorId: string): { x: number; y: number } {
+    const cell = this.paper.getModelById(operatorId);
+    if (!cell) return { x: 0, y: 0 };
+    const bbox = cell.getBBox();
+    const scale = this.paper.scale();
+    const translate = this.paper.translate();
+    return {
+      x: (bbox.x + bbox.width) * scale.sx + translate.tx + 12,
+      y: bbox.y * scale.sy + translate.ty,
+    };
+  }
+
   /**
    * Resolves the execution state to render for an operator: an operator the
    * state map does not know falls back to Uninitialized, and a reported state
diff --git a/frontend/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts b/frontend/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts
index acb31c4917f..44f0b5fe5eb 100644
--- a/frontend/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts
+++ b/frontend/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts
@@ -52,6 +52,8 @@ type JointLinkChangeEvent = [joint.dia.Link, { x: number; y: number }, { ui: boo
 
 type JointPositionChangeEvent = [joint.dia.Element, { x: number; y: number }];
 
+export const RESULT_PREVIEW_SETTING_KEY = "result-preview-on-hover";
+
 type PositionInfo = {
   currPos: Point;
   lastPos: Point | undefined;
@@ -112,6 +114,10 @@ export class JointGraphWrapper {
   // main canvas and the mini-map.
   private heatmapViewStream = new BehaviorSubject<HeatmapView | null>(null);
 
+  // Whether hovering an operator previews its result (Layers > Result preview). On unless the
+  // user turned it off, which this browser remembers.
+  private resultPreviewEnabled = localStorage.getItem(RESULT_PREVIEW_SETTING_KEY) !== "false";
+
   private elementPositions: Map<string, PositionInfo> = new Map<string, PositionInfo>();
   private listenPositionChange: boolean = true;
 
@@ -247,6 +253,15 @@ export class JointGraphWrapper {
     return this.heatmapViewStream.asObservable();
   }
 
+  public setResultPreviewEnabled(enabled: boolean): void {
+    this.resultPreviewEnabled = enabled;
+    localStorage.setItem(RESULT_PREVIEW_SETTING_KEY, String(enabled));
+  }
+
+  public isResultPreviewEnabled(): boolean {
+    return this.resultPreviewEnabled;
+  }
+
   /**
    * This method is used to toggle the multiselect mode.
    * @param multiSelect
diff --git a/frontend/src/app/workspace/service/workflow-result/workflow-result.service.spec.ts b/frontend/src/app/workspace/service/workflow-result/workflow-result.service.spec.ts
index 6bf168ed62f..09270b06808 100644
--- a/frontend/src/app/workspace/service/workflow-result/workflow-result.service.spec.ts
+++ b/frontend/src/app/workspace/service/workflow-result/workflow-result.service.spec.ts
@@ -485,6 +485,47 @@ describe("OperatorPaginationResultService", () => {
     });
   });
 
+  describe("peekFirstRows", () => {
+    // A hover preview asks for the first rows while the result table may be on any page; the
+    // table's page and cache must come through untouched.
+    it("fetches the first rows without moving the table's page or reading its cache", () => {
+      const eventSubject = mockWorkflowWebsocketService.subscribeToEvent.mock.results[0]
+        .value as unknown as Subject<PaginatedResultEvent>;
+      (service as any).currentPageIndex = 4;
+      (service as any).resultCache.set(1, [{ id: "cached" }]);
+      const received: PaginatedResultEvent[] = [];
+
+      service.peekFirstRows(5).subscribe(e => received.push(e));
+
+      expect(mockWorkflowWebsocketService.send).toHaveBeenCalledWith(
+        "ResultPaginationRequest",
+        expect.objectContaining({
+          operatorID: "testOperator",
+          pageIndex: 1,
+          pageSize: 5,
+          columnOffset: 0,
+          // within the server's Int, which a larger number fails to parse as
+          columnLimit: 2147483647,
+        })
+      );
+      const requestID = (mockWorkflowWebsocketService.send.mock.calls[0][1] as any).requestID;
+      const page: PaginatedResultEvent = {
+        requestID,
+        operatorID: "testOperator",
+        pageIndex: 1,
+        table: [{ id: 1 }],
+        schema: [{ attributeName: "id", attributeType: "integer" }],
+        portIndex: 0,
+        totalTuples: 1,
+      };
+      eventSubject.next(page);
+
+      expect(received).toEqual([page]);
+      expect(service.getCurrentPageIndex()).toBe(4);
+      expect((service as any).resultCache.get(1)).toEqual([{ id: "cached" }]);
+    });
+  });
+
   describe("handleResultUpdate", () => {
     it("records the total tuple count and evicts only the dirty pages", () => {
       (service as any).resultCache.set(1, [{ id: 1 }]);
@@ -548,13 +589,15 @@ describe("OperatorPaginationResultService", () => {
         .value as unknown as Subject<PaginatedResultEvent>;
     });
 
-    it("names the port in its requests, and the first port's service leaves it out", () => {
+    it("names the port in every request, and the first port's service leaves it out", () => {
       secondPort.selectPage(1, 10).subscribe();
+      secondPort.peekFirstRows(5).subscribe();
       service.selectPage(1, 10).subscribe();
 
       const sent = mockWorkflowWebsocketService.send.mock.calls.map(call => call[1] as any);
       expect(sent[0].portIndex).toBe(1);
-      expect("portIndex" in sent[1]).toBe(false);
+      expect(sent[1].portIndex).toBe(1);
+      expect("portIndex" in sent[2]).toBe(false);
     });
 
     it("takes its row count from each reply, as no live update reports on it", () => {
diff --git a/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts b/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts
index 2b73e418372..e542b6856ea 100644
--- a/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts
+++ b/frontend/src/app/workspace/service/workflow-result/workflow-result.service.ts
@@ -262,6 +262,12 @@ export class OperatorResultService {
   }
 }
 
+/**
+ * A column limit that asks for every column. The server reads the limit as a 32-bit Int, so it is
+ * Int.MaxValue there; Number.MAX_SAFE_INTEGER fails to parse and the request is never answered.
+ */
+export const ALL_COLUMNS = 2147483647;
+
 export class OperatorPaginationResultService {
   private pendingRequests: Map<string, Subject<PaginatedResultEvent>> = new Map();
   private resultCache: Map<number, ReadonlyArray<object>> = new Map();
@@ -356,6 +362,29 @@ export class OperatorPaginationResultService {
     }
   }
 
+  /**
+   * The first rows of the result, for a glance at it. Unlike selectPage this leaves the page the
+   * result table is on alone and never touches its cache, so a preview cannot move the table.
+   * Every column is asked for, so the schema the reply carries is the whole one, as a table
+   * page's would be.
+   */
+  public peekFirstRows(rowCount: number): Observable<PaginatedResultEvent> {
+    const requestID = uuid();
+    this.workflowWebsocketService.send("ResultPaginationRequest", {
+      requestID,
+      operatorID: this.operatorID,
+      pageIndex: 1,
+      pageSize: rowCount,
+      columnOffset: 0,
+      columnLimit: ALL_COLUMNS,
+      columnSearch: "",
+      ...this.portField(),
+    });
+    const pendingRequestSubject = new Subject<PaginatedResultEvent>();
+    this.pendingRequests.set(requestID, pendingRequestSubject);
+    return pendingRequestSubject;
+  }
+
   public reset(): void {
     this.pendingRequests.clear();
     this.resultCache.clear();