diff --git a/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala b/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala
index 081d072180b..9f7983241e3 100644
--- a/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala
+++ b/amber/src/main/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEvent.scala
@@ -27,16 +27,31 @@ object PaginatedResultEvent {
   def apply(
       req: ResultPaginationRequest,
       table: List[ObjectNode],
-      schema: List[Attribute]
+      schema: List[Attribute],
+      totalTuples: Int = 0
   ): PaginatedResultEvent = {
-    PaginatedResultEvent(req.requestID, req.operatorID, req.pageIndex, table, schema)
+    PaginatedResultEvent(
+      req.requestID,
+      req.operatorID,
+      req.pageIndex,
+      table,
+      schema,
+      req.portIndex,
+      totalTuples
+    )
   }
 }
 
+/**
+  * One page of an output port's result. `totalTuples` counts the whole port, so a port that the
+  * running execution does not report on, any but an operator's first, can still be paged through.
+  */
 case class PaginatedResultEvent(
     requestID: String,
     operatorID: String,
     pageIndex: Int,
     table: List[ObjectNode],
-    schema: List[Attribute]
+    schema: List[Attribute],
+    portIndex: Int,
+    totalTuples: Int
 ) extends TexeraWebSocketEvent
diff --git a/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala b/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala
index 4a3e0a58a3e..2696d90bcb3 100644
--- a/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala
+++ b/amber/src/main/scala/org/apache/texera/web/model/websocket/request/ResultPaginationRequest.scala
@@ -26,5 +26,7 @@ case class ResultPaginationRequest(
     pageSize: Int,
     columnOffset: Int = 0,
     columnLimit: Int = Int.MaxValue,
-    columnSearch: Option[String] = None
+    columnSearch: Option[String] = None,
+    // which of the operator's output ports to read; an operator with one output has only port 0
+    portIndex: Int = 0
 ) extends TexeraWebSocketRequest
diff --git a/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala b/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala
index 2fa63f6b863..50d5c03de6b 100644
--- a/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala
+++ b/amber/src/main/scala/org/apache/texera/web/service/ExecutionResultService.scala
@@ -478,7 +478,7 @@ class ExecutionResultService(
     val storageUriOption = WorkflowExecutionsResource.getResultUriByLogicalPortId(
       latestExecutionId,
       OperatorIdentity(request.operatorID),
-      PortIdentity()
+      PortIdentity(request.portIndex)
     )
 
     // Refuse to read a per-user-warehouse result while the feature is off (#6930).
@@ -511,7 +511,12 @@ class ExecutionResultService(
         val attributes = paginationIterable.headOption
           .map(_.getSchema.getAttributes)
           .getOrElse(List.empty)
-        PaginatedResultEvent.apply(request, mappedResults, attributes)
+        PaginatedResultEvent.apply(
+          request,
+          mappedResults,
+          attributes,
+          virtualDocument.getCount.toInt
+        )
 
       case None =>
         // Handle the case when storageUri is empty
@@ -524,6 +529,11 @@ class ExecutionResultService(
       val newInfo: Map[OperatorIdentity, OperatorResultMetadata] = {
         WorkflowExecutionsResource
           .getResultUrisByExecutionId(executionId)
+          // One entry per operator, so it follows the first output port, as the result updates do.
+          // Keyed by operator, a second port's count would otherwise replace the first's.
+          .filter(uri =>
+            VFSURIFactory.decodeURI(uri).globalPortId.exists(_.portId == PortIdentity())
+          )
           .map(uri => {
             val count = DocumentFactory.openDocument(uri)._1.getCount.toInt
 
diff --git a/amber/src/test/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEventSpec.scala b/amber/src/test/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEventSpec.scala
index aa48cc81c8c..d07c881fa74 100644
--- a/amber/src/test/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEventSpec.scala
+++ b/amber/src/test/scala/org/apache/texera/web/model/websocket/event/PaginatedResultEventSpec.scala
@@ -60,7 +60,8 @@ class PaginatedResultEventSpec extends AnyFlatSpec with Matchers {
     pageSize = 25,
     columnOffset = 4,
     columnLimit = 6,
-    columnSearch = Some("city")
+    columnSearch = Some("city"),
+    portIndex = 1
   )
 
   private val table = List(
@@ -80,6 +81,12 @@ class PaginatedResultEventSpec extends AnyFlatSpec with Matchers {
     event.pageIndex shouldBe 3
   }
 
+  it should "echo the port the request read, and the port's row count" in {
+    val event = PaginatedResultEvent(request, table, schema, totalTuples = 40)
+    event.portIndex shouldBe 1
+    event.totalTuples shouldBe 40
+  }
+
   it should "pass the table and schema through untouched" in {
     val event = PaginatedResultEvent(request, table, schema)
     event.table should contain theSameElementsInOrderAs table
@@ -88,10 +95,21 @@ class PaginatedResultEventSpec extends AnyFlatSpec with Matchers {
 
   "the projected event" should "serialize to exactly the fields the Angular client declares" in {
     val json = objectMapper.readTree(
-      objectMapper.writeValueAsString(PaginatedResultEvent(request, table, schema))
+      objectMapper.writeValueAsString(PaginatedResultEvent(request, table, schema, 40))
     )
     json.fieldNames().asScala.toSet shouldBe
-      Set("type", "requestID", "operatorID", "pageIndex", "table", "schema")
+      Set(
+        "type",
+        "requestID",
+        "operatorID",
+        "pageIndex",
+        "table",
+        "schema",
+        "portIndex",
+        "totalTuples"
+      )
+    json.get("portIndex").asInt() shouldBe 1
+    json.get("totalTuples").asInt() shouldBe 40
     json.get("type").asText() shouldBe "PaginatedResultEvent"
     json.get("requestID").asText() shouldBe "req-alpha"
     json.get("operatorID").asText() shouldBe "op-beta"
diff --git a/amber/src/test/scala/org/apache/texera/web/model/websocket/event/TexeraWebSocketEventSpec.scala b/amber/src/test/scala/org/apache/texera/web/model/websocket/event/TexeraWebSocketEventSpec.scala
index 19dd3af6b7c..2aa250b3a7c 100644
--- a/amber/src/test/scala/org/apache/texera/web/model/websocket/event/TexeraWebSocketEventSpec.scala
+++ b/amber/src/test/scala/org/apache/texera/web/model/websocket/event/TexeraWebSocketEventSpec.scala
@@ -147,7 +147,9 @@ class TexeraWebSocketEventSpec extends AnyFlatSpec with Matchers {
       "op-2",
       3,
       List(resultRow),
-      List(new Attribute("city", AttributeType.STRING))
+      List(new Attribute("city", AttributeType.STRING)),
+      1,
+      40
     ),
     "PythonExpressionEvaluateResponse" -> PythonExpressionEvaluateResponse(
       "len(tuple_)",
diff --git a/amber/src/test/scala/org/apache/texera/web/resource/WorkflowWebsocketResourceSpec.scala b/amber/src/test/scala/org/apache/texera/web/resource/WorkflowWebsocketResourceSpec.scala
index 4761c5b3022..81057d74efa 100644
--- a/amber/src/test/scala/org/apache/texera/web/resource/WorkflowWebsocketResourceSpec.scala
+++ b/amber/src/test/scala/org/apache/texera/web/resource/WorkflowWebsocketResourceSpec.scala
@@ -284,7 +284,9 @@ class WorkflowWebsocketResourceSpec
         request.operatorID,
         request.pageIndex,
         List(objectMapper.createObjectNode().put("c", 5)),
-        List(new Attribute("c", AttributeType.INTEGER))
+        List(new Attribute("c", AttributeType.INTEGER)),
+        request.portIndex,
+        1
       )
     }
   }
diff --git a/amber/src/test/scala/org/apache/texera/web/service/ExecutionResultServiceSpec.scala b/amber/src/test/scala/org/apache/texera/web/service/ExecutionResultServiceSpec.scala
index 3d9ed9fcf8a..0fec412ec5a 100644
--- a/amber/src/test/scala/org/apache/texera/web/service/ExecutionResultServiceSpec.scala
+++ b/amber/src/test/scala/org/apache/texera/web/service/ExecutionResultServiceSpec.scala
@@ -925,6 +925,32 @@ class ExecutionResultServiceSpec
     event.schema.map(_.getName) shouldBe List("c1", "c2")
   }
 
+  it should "read the output port the request names, and count that port's rows" in {
+    val executionId = newExecution()
+    val schema = new Schema(List(new Attribute("id", AttributeType.INTEGER)))
+    val rows = (n: Int, offset: Int) =>
+      (0 until n).map(i =>
+        Tuple.builder(schema).add("id", AttributeType.INTEGER, offset + i).build()
+      )
+    // Two output ports of one operator, as a Split keeps them, with different row counts.
+    storeResult(executionId, "erss-two-ports", schema, rows(2, 0))
+    storeResult(executionId, "erss-two-ports", schema, rows(5, 100), port = PortIdentity(1))
+
+    val first = paginate(paginationRequest.copy(operatorID = "erss-two-ports", pageSize = 10))
+    val second = paginate(
+      paginationRequest.copy(operatorID = "erss-two-ports", pageSize = 3, portIndex = 1)
+    )
+
+    // Without a port, the first one is read, as before.
+    first.table.map(_.get("id").asInt()) shouldBe List(0, 1)
+    first.portIndex shouldBe 0
+    first.totalTuples shouldBe 2
+    // The second port's rows, and its own count, which pages the port past this first page.
+    second.table.map(_.get("id").asInt()) shouldBe List(100, 101, 102)
+    second.portIndex shouldBe 1
+    second.totalTuples shouldBe 5
+  }
+
   it should "return an empty page when the operator has no stored result" in {
     newExecution()
 
@@ -1237,6 +1263,34 @@ class ExecutionResultServiceSpec
     }
   }
 
+  it should "report an operator with two output ports by its first port's count" in {
+    val executionId = newExecution()
+    val schema = new Schema(List(new Attribute("id", AttributeType.INTEGER)))
+    val rows = (n: Int) =>
+      (0 until n).map(i => Tuple.builder(schema).add("id", AttributeType.INTEGER, i).build())
+    storeResult(executionId, "erss-final-two-ports", schema, rows(3))
+    storeResult(executionId, "erss-final-two-ports", schema, rows(8), port = PortIdentity(1))
+    val plan = planOf(
+      physicalOp(
+        executionId,
+        "erss-final-two-ports",
+        PortIdentity() -> OutputMode.SET_SNAPSHOT,
+        PortIdentity(1) -> OutputMode.SET_SNAPSHOT
+      )
+    )
+
+    withAttached(plan, executionId) { fixture =>
+      setPollingCancellable(fixture.service, new RecordingCancellable)
+
+      fixture.client.fire(ExecutionStateUpdate(WorkflowAggregatedState.COMPLETED))
+
+      // The update for an operator reads its first port, so its count has to come from there
+      // too; the second port's 8 rows must not stand in for the first port's 3.
+      val resultInfo = fixture.workflowStateStore.resultStore.getState.resultInfo
+      resultInfo(OperatorIdentity("erss-final-two-ports")).tupleCount shouldBe 3
+    }
+  }
+
   it should "leave polling running while the execution has not terminated" in {
     val executionId = newExecution()
     withAttached(planOf(), executionId) { fixture =>
@@ -1450,10 +1504,13 @@ class ExecutionResultServiceSpec
     ExecutionIdentity(execution.getEid.longValue())
   }
 
-  private def globalPortIdOf(operatorId: String): GlobalPortIdentity =
+  private def globalPortIdOf(
+      operatorId: String,
+      port: PortIdentity = PortIdentity()
+  ): GlobalPortIdentity =
     GlobalPortIdentity(
       PhysicalOpIdentity(OperatorIdentity(operatorId), "main"),
-      PortIdentity(),
+      port,
       input = false
     )
 
@@ -1461,13 +1518,14 @@ class ExecutionResultServiceSpec
   private def resultUriOf(
       executionId: ExecutionIdentity,
       operatorId: String,
-      warehouse: Option[String] = None
+      warehouse: Option[String] = None,
+      port: PortIdentity = PortIdentity()
   ): URI =
     VFSURIFactory.resultURI(
       VFSURIFactory.createPortBaseURI(
         WorkflowIdentity(testWid.longValue()),
         executionId,
-        globalPortIdOf(operatorId),
+        globalPortIdOf(operatorId, port),
         warehouse
       )
     )
@@ -1492,9 +1550,10 @@ class ExecutionResultServiceSpec
       executionId: ExecutionIdentity,
       operatorId: String,
       schema: Schema,
-      tuples: Seq[Tuple]
+      tuples: Seq[Tuple],
+      port: PortIdentity = PortIdentity()
   ): URI = {
-    val uri = resultUriOf(executionId, operatorId)
+    val uri = resultUriOf(executionId, operatorId, port = port)
     val document = DocumentFactory.createDocument(uri, schema)
     val writer = document.writer("erss").asInstanceOf[BufferedItemWriter[Tuple]]
     writer.open()
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/result-panel/result-panel-modal.component.spec.ts b/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.spec.ts
index 84a1eeff8e2..1251c0cd883 100644
--- a/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.spec.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.spec.ts
@@ -35,7 +35,7 @@ describe("RowModalComponent", () => {
 
   const mockTupleResult = { tuple: { id: "123", value: "test_data" } };
   const workflowResultServiceSpy = {
-    getPaginatedResultService: vi.fn().mockReturnValue({
+    getPortPaginatedResultService: vi.fn().mockReturnValue({
       selectTuple: vi.fn().mockReturnValue(of(mockTupleResult)),
     }),
   };
@@ -77,6 +77,12 @@ describe("RowModalComponent", () => {
     expect(component.currentDisplayRowData).toEqual(mockTupleResult.tuple);
   });
 
+  it("reads the row from the operator's first output port when the data names none", () => {
+    workflowResultServiceSpy.getPortPaginatedResultService.mockClear();
+    component.ngOnChanges();
+    expect(workflowResultServiceSpy.getPortPaginatedResultService).toHaveBeenCalledWith("op-1", 0);
+  });
+
   it("should use data URL directly without fetching for base64 media", () => {
     const dataUrl = "data:image/png;base64,abc123";
     (component as any).buildRowEntries({ img: dataUrl });
@@ -158,7 +164,7 @@ describe("RowModalComponent", () => {
   });
 
   it("should not update row data when tuple is null", () => {
-    vi.spyOn(workflowResultServiceSpy, "getPaginatedResultService").mockReturnValueOnce({
+    vi.spyOn(workflowResultServiceSpy, "getPortPaginatedResultService").mockReturnValueOnce({
       selectTuple: vi.fn().mockReturnValue(of({ tuple: null })),
     } as any);
     component.currentDisplayRowData = { existing: "data" };
@@ -209,7 +215,7 @@ describe("RowModalComponent (with pre-loaded rowData)", () => {
         { provide: NzModalRef, useValue: { getConfig: () => ({}), close: vi.fn() } },
         {
           provide: WorkflowResultService,
-          useValue: { getPaginatedResultService: vi.fn().mockReturnValue(null) },
+          useValue: { getPortPaginatedResultService: vi.fn().mockReturnValue(null) },
         },
         { provide: PanelResizeService, useValue: { pageSize: 10 } },
       ],
@@ -261,7 +267,7 @@ describe("RowModalComponent (template rendering)", () => {
         { provide: NzModalRef, useValue: { getConfig: () => ({}), close: vi.fn() } },
         {
           provide: WorkflowResultService,
-          useValue: { getPaginatedResultService: vi.fn().mockReturnValue(null) },
+          useValue: { getPortPaginatedResultService: vi.fn().mockReturnValue(null) },
         },
         { provide: PanelResizeService, useValue: { pageSize: 10 } },
       ],
diff --git a/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts b/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts
index dddb30caf2d..5105bcbbd0c 100644
--- a/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts
@@ -55,9 +55,15 @@ export class RowModalComponent implements OnChanges, OnDestroy {
     [];
   private readonly allocatedBlobUrls: string[] = [];
   // Index of current displayed row in currentResult
-  private readonly modalData: { operatorId: string; rowIndex: number; rowData?: Record<string, unknown> } =
-    inject(NZ_MODAL_DATA);
+  private readonly modalData: {
+    operatorId: string;
+    rowIndex: number;
+    rowData?: Record<string, unknown>;
+    portIndex?: number;
+  } = inject(NZ_MODAL_DATA);
   readonly operatorId: string = this.modalData.operatorId;
+  // the output port the row is from; left out, the first
+  readonly portIndex: number = this.modalData.portIndex ?? 0;
   rowIndex: number = this.modalData.rowIndex;
   currentDisplayRowData: Record<string, unknown> = {};
 
@@ -88,7 +94,7 @@ export class RowModalComponent implements OnChanges, OnDestroy {
 
   ngOnChanges(): void {
     this.workflowResultService
-      .getPaginatedResultService(this.operatorId)
+      .getPortPaginatedResultService(this.operatorId, this.portIndex)
       ?.selectTuple(this.rowIndex, this.resizeService.pageSize)
       .pipe(untilDestroyed(this))
       .subscribe(res => {
diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts
index 9afb07d04c3..9401e29fe86 100644
--- a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.spec.ts
@@ -69,6 +69,8 @@ describe("ResultTableFrameComponent", () => {
     pageIndex,
     table,
     schema: [],
+    portIndex: 0,
+    totalTuples: table.length,
   });
 
   // Installs a paginated-result-service double behind WorkflowResultService.getPaginatedResultService.
@@ -199,6 +201,83 @@ describe("ResultTableFrameComponent", () => {
       expect(component.tableStats).toEqual({ name: { min: 1 } });
       expect(component.prevTableStats).toBe(component.tableStats);
     });
+
+    it("loads the output port it is given, and a change of port alone reloads", () => {
+      const secondPort = {
+        getCurrentTotalNumTuples: vi.fn().mockReturnValue(5),
+        getCurrentPageIndex: vi.fn().mockReturnValue(1),
+        getStats: vi.fn().mockReturnValue({}),
+        selectPage: vi.fn().mockReturnValue(of(makePageEvent(1))),
+      };
+      const getPortService = vi
+        .spyOn(workflowResultService, "getPortPaginatedResultService")
+        .mockReturnValue(secondPort as unknown as OperatorPaginationResultService);
+      component.operatorId = "op1";
+      component.portIndex = 1;
+
+      component.ngOnChanges({ portIndex: new SimpleChange(0, 1, false) });
+
+      // the operator stays when only the port changes
+      expect(component.operatorId).toBe("op1");
+      expect(getPortService).toHaveBeenCalledWith("op1", 1);
+      expect(secondPort.selectPage).toHaveBeenCalledTimes(1);
+      expect(component.currentResult).toEqual([SAMPLE_ROW]);
+    });
+
+    describe("switching between output ports", () => {
+      const OTHER_ROW: IndexableObject = { _id: 0, name: "bob", score: 75 };
+      // a port's service whose page replies the test sends when it chooses
+      const portService = (total: number) => {
+        const replies = new Subject<PaginatedResultEvent>();
+        const service = {
+          getCurrentTotalNumTuples: vi.fn().mockReturnValue(total),
+          getCurrentPageIndex: vi.fn().mockReturnValue(1),
+          getStats: vi.fn().mockReturnValue({}),
+          selectPage: vi.fn().mockReturnValue(replies),
+        };
+        return { service, replies };
+      };
+      const showPort = (portIndex: number) => {
+        component.portIndex = portIndex;
+        component.ngOnChanges({ portIndex: new SimpleChange(1 - portIndex, portIndex, false) });
+      };
+
+      it("clears the previous port's rows when the port shown is empty", () => {
+        const first = portService(1);
+        const second = portService(0);
+        vi.spyOn(workflowResultService, "getPortPaginatedResultService").mockImplementation(
+          (_, port) => (port === 0 ? first.service : second.service) as unknown as OperatorPaginationResultService
+        );
+        component.operatorId = "op1";
+        showPort(0);
+        first.replies.next(makePageEvent(1, [SAMPLE_ROW]));
+        expect(component.currentResult).toEqual([SAMPLE_ROW]);
+
+        showPort(1);
+        second.replies.next(makePageEvent(1, []));
+
+        // the empty port shows no rows, and is no longer loading
+        expect(component.currentResult).toEqual([]);
+        expect(component.isLoadingResult).toBe(false);
+      });
+
+      it("ignores a reply from a port that is no longer shown", () => {
+        const first = portService(1);
+        const second = portService(1);
+        vi.spyOn(workflowResultService, "getPortPaginatedResultService").mockImplementation(
+          (_, port) => (port === 0 ? first.service : second.service) as unknown as OperatorPaginationResultService
+        );
+        component.operatorId = "op1";
+        showPort(0);
+        showPort(1);
+        second.replies.next(makePageEvent(1, [OTHER_ROW]));
+
+        // port 0's page 1 arrives late, after port 1's
+        first.replies.next(makePageEvent(1, [SAMPLE_ROW]));
+
+        expect(component.currentResult).toEqual([OTHER_ROW]);
+      });
+    });
   });
 
   describe("changePaginatedResultData", () => {
@@ -344,6 +423,18 @@ describe("ResultTableFrameComponent", () => {
       expect(component.totalNumTuples).toBe(0);
     });
 
+    it("leaves a port past the first alone, as the updates are about the first port", () => {
+      const paginated = makePaginatedResultService();
+      recreateComponent("op1");
+      component.portIndex = 1;
+      component.totalNumTuples = 5;
+
+      resultUpdates.next({ op1: paginationUpdate(63, [1]) });
+
+      expect(component.totalNumTuples).toBe(5);
+      expect(paginated.selectPage).not.toHaveBeenCalled();
+    });
+
     it("ignores updates when the frame has no operator", () => {
       recreateComponent(undefined);
 
@@ -579,7 +670,7 @@ describe("ResultTableFrameComponent", () => {
       const config: any = createSpy.mock.calls[0][0];
       expect(config.nzTitle).toBe("Row Details");
       expect(config.nzContent).toBe(RowModalComponent);
-      expect(config.nzData).toEqual({ operatorId: "op1", rowIndex: 7 });
+      expect(config.nzData).toEqual({ operatorId: "op1", rowIndex: 7, portIndex: 0 });
       expect(config.nzAutofocus).toBeNull();
       const [prev, next, ok] = config.nzFooter;
       expect([prev.label, next.label, ok.label]).toEqual(["<", ">", "OK"]);
diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
index a329161369e..cca6c04dfb8 100644
--- a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
@@ -30,7 +30,10 @@ import {
   NzCellEllipsisDirective,
 } from "ng-zorro-antd/table";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
-import { WorkflowResultService } from "../../../service/workflow-result/workflow-result.service";
+import {
+  OperatorPaginationResultService,
+  WorkflowResultService,
+} from "../../../service/workflow-result/workflow-result.service";
 import { PanelResizeService } from "../../../service/workflow-result/panel-resize/panel-resize.service";
 import { isWebPaginationUpdate, OperatorState } from "../../../types/execute-workflow.interface";
 import { IndexableObject, TableColumn } from "../../../types/result-table.interface";
@@ -88,6 +91,9 @@ export type MediaCellType = "video" | "audio" | "image" | "text";
 })
 export class ResultTableFrameComponent implements OnInit, OnChanges {
   @Input() operatorId?: string;
+  // which of the operator's output ports to show. The running execution reports only on the first,
+  // so another port is read when shown, and its counts and statistics are not followed live.
+  @Input() portIndex = 0;
 
   // display result table
   currentColumns?: TableColumn[];
@@ -135,9 +141,14 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.operatorId = changes.operatorId?.currentValue;
+    if (changes.operatorId) this.operatorId = changes.operatorId.currentValue;
+    // another port's rows are not this port's, so a new port starts from an empty table
+    if (changes.portIndex && !changes.portIndex.firstChange) {
+      this.currentResult = [];
+      this.currentColumns = undefined;
+    }
     if (this.operatorId) {
-      const paginatedResultService = this.workflowResultService.getPaginatedResultService(this.operatorId);
+      const paginatedResultService = this.paginatedResultService();
       if (paginatedResultService) {
         this.isFrontPagination = false;
         this.totalNumTuples = paginatedResultService.getCurrentTotalNumTuples();
@@ -150,6 +161,12 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
     }
   }
 
+  /** The service that pages the port shown. */
+  private paginatedResultService(): OperatorPaginationResultService | undefined {
+    if (!this.operatorId) return undefined;
+    return this.workflowResultService.getPortPaginatedResultService(this.operatorId, this.portIndex);
+  }
+
   ngOnInit(): void {
     this.workflowStatusService
       .getStateUpdateStream()
@@ -169,7 +186,8 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
       .getResultUpdateStream()
       .pipe(untilDestroyed(this))
       .subscribe(update => {
-        if (!this.operatorId) {
+        // an update is about the operator's first port
+        if (!this.operatorId || this.portIndex !== 0) {
           return;
         }
         const opUpdate = update[this.operatorId];
@@ -190,7 +208,8 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
       .getResultTableStats()
       .pipe(untilDestroyed(this))
       .subscribe(([prevStats, currentStats]) => {
-        if (!this.operatorId) {
+        // the statistics are the operator's first port's
+        if (!this.operatorId || this.portIndex !== 0) {
           return;
         }
 
@@ -347,7 +366,8 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
       // modal title
       nzTitle: "Row Details",
       nzContent: RowModalComponent,
-      nzData: { operatorId: this.operatorId, rowIndex: currentRowIndex }, // set the index value and page size to the modal for navigation
+      // set the index value and page size to the modal for navigation
+      nzData: { operatorId: this.operatorId, rowIndex: currentRowIndex, portIndex: this.portIndex },
       // prevent browser focusing close button (ugly square highlight)
       nzAutofocus: null,
       // modal footer buttons
@@ -395,19 +415,29 @@ export class ResultTableFrameComponent implements OnInit, OnChanges {
     if (!this.operatorId) {
       return;
     }
-    const paginatedResultService = this.workflowResultService.getPaginatedResultService(this.operatorId);
+    const paginatedResultService = this.paginatedResultService();
     if (!paginatedResultService) {
       return;
     }
     this.isLoadingResult = true;
+    // A reply can arrive after the table moved on to another operator or port; it is not theirs.
+    const operatorId = this.operatorId;
+    const portIndex = this.portIndex;
     paginatedResultService
       .selectPage(this.currentPageIndex, this.pageSize, this.currentColumnOffset, this.columnLimit, this.columnSearch)
       .pipe(untilDestroyed(this))
       .subscribe(pageData => {
-        if (this.currentPageIndex === pageData.pageIndex) {
-          this.setupResultTable(pageData.table, paginatedResultService.getCurrentTotalNumTuples());
-          this.changeDetectorRef.detectChanges();
+        if (
+          this.operatorId !== operatorId ||
+          this.portIndex !== portIndex ||
+          this.currentPageIndex !== pageData.pageIndex
+        ) {
+          return;
         }
+        // an empty page keeps the rows shown, but the loading is over
+        if (pageData.table.length === 0) this.isLoadingResult = false;
+        this.setupResultTable(pageData.table, paginatedResultService.getCurrentTotalNumTuples());
+        this.changeDetectorRef.detectChanges();
       });
   }
 
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..8e0e6b042a1
--- /dev/null
+++ b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.spec.ts
@@ -0,0 +1,247 @@
+/**
+ * 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 } 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 } 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("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..090be6d8d9d
--- /dev/null
+++ b/frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.ts
@@ -0,0 +1,170 @@
+/**
+ * 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, SimpleChanges } from "@angular/core";
+import { NgFor, NgIf } from "@angular/common";
+import { Subscription } from "rxjs";
+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 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
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["operatorId"]) {
+      this.loadRows();
+    }
+  }
+
+  private loadRows(): void {
+    this.rowsSubscription?.unsubscribe();
+    const paginated = this.workflowResultService.getPaginatedResultService(this.operatorId);
+    if (!paginated || paginated.getCurrentTotalNumTuples() === 0) {
+      this.rows = [];
+      return;
+    }
+    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..ea1c2bbd4e3 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,39 @@ 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("leaves the hover to the heat-map tooltip while that overlay is on", () => {
+      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"));
+
+      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..a3cba4289c0 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,10 @@ 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>;
+  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 +266,7 @@ export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy
     this.handleOperatorStatusUpdate();
     this.handleHeatmapOverlay();
     this.handleHeatmapHover();
+    this.handleResultPreviewHover();
     this.handleRegionEvents();
     this.handleOperatorSuggestionHighlightEvent();
     this.handleAgentHoverHighlight();
@@ -590,6 +608,77 @@ 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.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.
+    merge(fromJointPaperEvent(this.paper, "element:pointerdown"), fromJointPaperEvent(this.paper, "blank:pointerdown"))
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        clearTimeout(this.previewShowTimer);
+        if (this.resultPreview === null) 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 e53de2c11fc..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
@@ -115,6 +115,33 @@ describe("WorkflowResultService", () => {
     expect(updateEvents).toEqual([updates]);
   });
 
+  describe("getPortPaginatedResultService", () => {
+    it("gives the first port's service for port 0, and nothing for an operator without a table", () => {
+      const ws = TestBed.inject(WorkflowWebsocketService);
+      pushWsEvent(ws, { type: "WebResultUpdateEvent", updates: { pagOp: paginationUpdate(3) }, tableStats: {} });
+
+      expect(service.getPortPaginatedResultService("pagOp", 0)).toBe(service.getPaginatedResultService("pagOp"));
+      expect(service.getPortPaginatedResultService("noResult", 0)).toBeUndefined();
+      expect(service.getPortPaginatedResultService("noResult", 1)).toBeUndefined();
+    });
+
+    it("makes one service for another port, kept until the results are cleared", () => {
+      const ws = TestBed.inject(WorkflowWebsocketService);
+      pushWsEvent(ws, { type: "WebResultUpdateEvent", updates: { pagOp: paginationUpdate(3) }, tableStats: {} });
+
+      const second = service.getPortPaginatedResultService("pagOp", 1)!;
+
+      expect(second.portIndex).toBe(1);
+      expect(second.operatorID).toBe("pagOp");
+      expect(second).not.toBe(service.getPaginatedResultService("pagOp"));
+      expect(service.getPortPaginatedResultService("pagOp", 1)).toBe(second);
+
+      service.clearResults();
+      pushWsEvent(ws, { type: "WebResultUpdateEvent", updates: { pagOp: paginationUpdate(3) }, tableStats: {} });
+      expect(service.getPortPaginatedResultService("pagOp", 1)).not.toBe(second);
+    });
+  });
+
   it("hasNonEmptyResult tells an empty result apart from one with rows", () => {
     const ws = TestBed.inject(WorkflowWebsocketService);
     pushWsEvent(ws, {
@@ -355,6 +382,8 @@ describe("OperatorPaginationResultService", () => {
           pageIndex: 1,
           table: testTable,
           schema: testSchema,
+          portIndex: 0,
+          totalTuples: testTable.length,
         })
       );
 
@@ -382,6 +411,8 @@ describe("OperatorPaginationResultService", () => {
           pageIndex: 1,
           table: testTable,
           schema: testSchema,
+          portIndex: 0,
+          totalTuples: testTable.length,
         })
       );
 
@@ -407,6 +438,8 @@ describe("OperatorPaginationResultService", () => {
         pageIndex: 2,
         table: cachedPage,
         schema: [{ attributeName: "id", attributeType: "integer" }],
+        portIndex: 0,
+        totalTuples: 0,
       });
       expect(service.getCurrentPageIndex()).toBe(2);
     });
@@ -430,6 +463,8 @@ describe("OperatorPaginationResultService", () => {
         pageIndex: 3,
         table: [{ id: 7 }],
         schema: [{ attributeName: "id", attributeType: "integer" }],
+        portIndex: 0,
+        totalTuples: 1,
       };
       eventSubject.next(page);
 
@@ -450,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 }]);
@@ -494,15 +570,77 @@ describe("OperatorPaginationResultService", () => {
     });
   });
 
+  describe("for an output port past the first", () => {
+    let secondPort: OperatorPaginationResultService;
+    let eventSubject: Subject<PaginatedResultEvent>;
+    const reply = (requestID: string, totalTuples: number): PaginatedResultEvent => ({
+      requestID,
+      operatorID: "testOperator",
+      pageIndex: 1,
+      table: [{ id: 1 }],
+      schema: [{ attributeName: "id", attributeType: "integer" }],
+      portIndex: 1,
+      totalTuples,
+    });
+
+    beforeEach(() => {
+      secondPort = new OperatorPaginationResultService("testOperator", mockWorkflowWebsocketService, 1);
+      eventSubject = mockWorkflowWebsocketService.subscribeToEvent.mock.results[1]
+        .value as unknown as Subject<PaginatedResultEvent>;
+    });
+
+    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(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", () => {
+      secondPort.selectPage(1, 10).subscribe();
+      const requestID = (mockWorkflowWebsocketService.send.mock.calls[0][1] as any).requestID;
+
+      eventSubject.next(reply(requestID, 37));
+
+      expect(secondPort.getCurrentTotalNumTuples()).toBe(37);
+      expect(secondPort.getSchema()).toEqual([{ attributeName: "id", attributeType: "integer" }]);
+      // the first port's service did not ask, so the reply changes nothing there
+      expect(service.getCurrentTotalNumTuples()).toBe(0);
+      expect(service.getSchema()).toEqual([]);
+    });
+
+    it("asks the server again for a page it has read, so the page is never stale", () => {
+      (secondPort as any).resultCache.set(1, [{ id: 0 }]);
+
+      secondPort.selectPage(1, 10).subscribe();
+
+      expect(mockWorkflowWebsocketService.send).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe("incoming page events", () => {
-    it("refreshes the schema but ignores events whose request id is unknown", () => {
+    // Every operator's and every port's replies arrive on one stream, so a reply to another
+    // service's request must not hand this one its columns.
+    it("ignores an event whose request id is not its own, schema included", () => {
       const eventSubject = mockWorkflowWebsocketService.subscribeToEvent.mock.results[0]
         .value as unknown as Subject<PaginatedResultEvent>;
       const schema: SchemaAttribute[] = [{ attributeName: "name", attributeType: "string" }];
 
-      eventSubject.next({ requestID: "no-such-request", operatorID: "testOperator", pageIndex: 1, table: [], schema });
+      eventSubject.next({
+        requestID: "no-such-request",
+        operatorID: "testOperator",
+        pageIndex: 1,
+        table: [],
+        schema,
+        portIndex: 0,
+        totalTuples: 0,
+      });
 
-      expect(service.getSchema()).toEqual(schema);
+      expect(service.getSchema()).toEqual([]);
     });
   });
 });
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 e7879ba15e8..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
@@ -43,6 +43,8 @@ import { SchemaAttribute } from "../../types/workflow-compiling.interface";
 })
 export class WorkflowResultService {
   private paginatedResultServices = new Map<string, OperatorPaginationResultService>();
+  // the services for an operator's output ports past the first, keyed "operatorID:portIndex"
+  private otherPortResultServices = new Map<string, OperatorPaginationResultService>();
   private operatorResultServices = new Map<string, OperatorResultService>();
 
   // event stream of operator result update, undefined indicates the operator result is cleared
@@ -112,6 +114,26 @@ export class WorkflowResultService {
     return this.paginatedResultServices.get(operatorID);
   }
 
+  /**
+   * The service that pages one of the operator's output ports. The first port's is the one the
+   * running execution keeps up to date. Any other port is read only when asked, so its service is
+   * made on the first ask, for an operator whose result is a table.
+   */
+  public getPortPaginatedResultService(
+    operatorID: string,
+    portIndex: number
+  ): OperatorPaginationResultService | undefined {
+    const firstPort = this.getPaginatedResultService(operatorID);
+    if (portIndex === 0 || !firstPort) return firstPort;
+    const key = `${operatorID}:${portIndex}`;
+    let service = this.otherPortResultServices.get(key);
+    if (!service) {
+      service = new OperatorPaginationResultService(operatorID, this.wsService, portIndex);
+      this.otherPortResultServices.set(key, service);
+    }
+    return service;
+  }
+
   public getResultService(operatorID: string): OperatorResultService | undefined {
     return this.operatorResultServices.get(operatorID);
   }
@@ -124,6 +146,7 @@ export class WorkflowResultService {
   public clearResults(): void {
     this.operatorResultServices.clear();
     this.paginatedResultServices.clear();
+    this.otherPortResultServices.clear();
     this.resultTableStats.next({});
     this.resultClearedStream.next();
   }
@@ -239,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();
@@ -249,10 +278,12 @@ export class OperatorPaginationResultService {
 
   constructor(
     public operatorID: string,
-    private workflowWebsocketService: WorkflowWebsocketService
+    private workflowWebsocketService: WorkflowWebsocketService,
+    // which output port it pages. The running execution reports only on the first, so any other
+    // port keeps no page cache and takes its row count from each reply.
+    public readonly portIndex: number = 0
   ) {
     this.workflowWebsocketService.subscribeToEvent("PaginatedResultEvent").subscribe(event => {
-      this.schema = event.schema;
       this.handlePaginationResult(event);
     });
   }
@@ -298,7 +329,8 @@ export class OperatorPaginationResultService {
     // update currently selected page
     this.currentPageIndex = pageIndex;
     // first fetch from frontend result cache
-    const useCache = columnOffset === 0 && columnLimit === Number.MAX_SAFE_INTEGER && columnSearch === "";
+    const useCache =
+      this.portIndex === 0 && columnOffset === 0 && columnLimit === Number.MAX_SAFE_INTEGER && columnSearch === "";
     const pageCache = useCache ? this.resultCache.get(pageIndex) : undefined;
     if (pageCache) {
       return of(<PaginatedResultEvent>{
@@ -307,6 +339,8 @@ export class OperatorPaginationResultService {
         pageIndex: pageIndex,
         table: pageCache,
         schema: this.schema,
+        portIndex: this.portIndex,
+        totalTuples: this.currentTotalNumTuples,
       });
     } else {
       // fetch result data from server
@@ -320,6 +354,7 @@ export class OperatorPaginationResultService {
         columnOffset,
         columnLimit,
         columnSearch,
+        ...this.portField(),
       });
       const pendingRequestSubject = new Subject<PaginatedResultEvent>();
       this.pendingRequests.set(requestID, pendingRequestSubject);
@@ -327,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();
@@ -345,11 +403,22 @@ export class OperatorPaginationResultService {
     this.statsCache = statsUpdate;
   }
 
+  // the first port is the server's default, so a request for it leaves the field out
+  private portField(): { portIndex?: number } {
+    return this.portIndex === 0 ? {} : { portIndex: this.portIndex };
+  }
+
   private handlePaginationResult(res: PaginatedResultEvent): void {
     const pendingRequestSubject = this.pendingRequests.get(res.requestID);
     if (!pendingRequestSubject) {
       return;
     }
+    // Every operator's and every port's replies arrive on one stream, so only a reply to this
+    // service's own request may set its schema.
+    this.schema = res.schema;
+    if (this.portIndex !== 0) {
+      this.currentTotalNumTuples = res.totalTuples;
+    }
     pendingRequestSubject.next(res);
     pendingRequestSubject.complete();
     this.pendingRequests.delete(res.requestID);
diff --git a/frontend/src/app/workspace/types/workflow-websocket.interface.ts b/frontend/src/app/workspace/types/workflow-websocket.interface.ts
index fb22a3a8a42..ba8a11a5c28 100644
--- a/frontend/src/app/workspace/types/workflow-websocket.interface.ts
+++ b/frontend/src/app/workspace/types/workflow-websocket.interface.ts
@@ -96,6 +96,8 @@ export type PaginationRequest = Readonly<{
   columnOffset?: number;
   columnLimit?: number;
   columnSearch?: string;
+  // which of the operator's output ports to read; left out, the first
+  portIndex?: number;
 }>;
 
 export type PaginatedResultEvent = Readonly<{
@@ -104,6 +106,9 @@ export type PaginatedResultEvent = Readonly<{
   pageIndex: number;
   table: ReadonlyArray<IndexableObject>;
   schema: ReadonlyArray<SchemaAttribute>;
+  portIndex: number;
+  // the port's whole row count, for a port the running execution does not report on
+  totalTuples: number;
 }>;
 
 export type ResultExportRequest = Readonly<{