fix(extraction): stabilize explore mode toggle visuals

Three fixes for visual jumping when toggling explore mode (#892):

1. Reorder pipeline-mode hints so a/x/esc are always the trailing
   three items, matching explore mode. Mode-specific hints (enter,
   t/layout) come before the stable tail.

2. Compute preview line reservation from the tallest tab's row count
   and pad the rendered section to that height, preventing the overlay
   from shrinking when switching between tabs with different row counts.

3. Use ex.previewTab in both modes instead of resetting to tab 0 in
   pipeline mode, maintaining visual continuity across toggle.

closes #892

Author: cpcloud

internal/app/extraction_render.go

@@ -55,6 +55,25 @@ func previewNaturalWidth(groups []previewTableGroup, sepW int, currencySymbol st
 	return maxW
 }
 
+// stablePreviewLines returns a stable line reservation for the preview
+// section based on the tallest tab's row count. This prevents the overlay
+// height from changing when switching between tabs with different row counts.
+func stablePreviewLines(groups []previewTableGroup) int {
+	if len(groups) == 0 {
+		return 0
+	}
+	maxRows := 0
+	for _, g := range groups {
+		if len(g.cells) > maxRows {
+			maxRows = len(g.cells)
+		}
+	}
+	// Preview section structure: tabBar + underline + header + divider + rows.
+	// That's maxRows+3 newlines within the section itself, plus 2 for the
+	// separator rule and blank line above the section.
+	return maxRows + 3 + 2
+}
+
 // buildExtractionPipelineOverlay renders the pipeline step view with an
 // optional operation preview section below. The preview is dimmed when
 // not in explore mode and fully interactive when exploring.
@@ -133,7 +152,17 @@ func (m *Model) buildExtractionPipelineOverlay(
 	previewLines := 0
 	if hasOps {
 		previewSection = m.renderOperationPreviewSection(innerW, ex.exploring)
-		previewLines = strings.Count(previewSection, "\n") + 2 // +2 for separator + blank
+		// Reserve height for the tallest preview tab so the overlay
+		// doesn't jump when switching tabs in explore mode.
+		previewLines = stablePreviewLines(ex.previewGroups)
+		// Pad rendered section to stable height so the overlay
+		// doesn't shrink when a shorter tab is displayed.
+		actualLines := strings.Count(previewSection, "\n")
+		targetLines := previewLines - 2 // -2: sep+blank added as separate parts
+		for actualLines < targetLines {
+			previewSection += "\n"
+			actualLines++
+		}
 	}
 
 	maxH := max(m.effectiveHeight()*2/3-6-previewLines, 4)
@@ -209,9 +238,6 @@ func (m *Model) buildExtractionPipelineOverlay(
 		if cursorStatus != stepPending {
 			hints = append(hints, m.helpItem(symReturn, "expand"))
 		}
-		if hasOps {
-			hints = append(hints, m.helpItem(keyX, "explore"))
-		}
 		if ex.Done {
 			if ex.hasLLM {
 				label := "layout on"
@@ -220,7 +246,11 @@ func (m *Model) buildExtractionPipelineOverlay(
 				}
 				hints = append(hints, m.helpItem(keyT, label))
 			}
-			hints = append(hints, m.helpItem(keyA, "accept"), m.helpItem(keyEsc, "discard"))
+			if hasOps {
+				hints = append(hints, m.helpItem(keyA, "accept"), m.helpItem(keyX, "explore"), m.helpItem(keyEsc, "discard"))
+			} else {
+				hints = append(hints, m.helpItem(keyA, "accept"), m.helpItem(keyEsc, "discard"))
+			}
 		} else {
 			hints = append(hints,
 				m.helpItem(symCtrlC, "int"),
@@ -279,12 +309,10 @@ func (m *Model) renderOperationPreviewSection(innerW int, interactive bool) stri
 	tabBar := lipgloss.JoinHorizontal(lipgloss.Left, tabParts...)
 	underline := m.styles.TabUnderline().Render(strings.Repeat(symHLineHeavy, innerW))
 
-	// Always render a single tab: the active one in explore mode,
-	// the first one in pipeline mode.
-	tabIdx := 0
-	if interactive {
-		tabIdx = ex.previewTab
-	}
+	// Always render the active preview tab. In explore mode it follows
+	// user navigation; in pipeline mode it preserves the last-explored
+	// tab so the view doesn't reset on toggle.
+	tabIdx := ex.previewTab
 	if tabIdx >= len(groups) {
 		tabIdx = 0
 	}

internal/app/extraction_test.go

@@ -6,6 +6,7 @@ package app
 import (
 	"context"
 	"errors"
+	"strings"
 	"testing"
 	"time"
 
@@ -52,6 +53,13 @@ func newExtractionModel(t *testing.T, steps map[extractionStep]stepStatus) *Mode
 	return m
 }
 
+// hintIndex returns the byte index of a hint label in ANSI-stripped overlay
+// output. Keycap rendering inserts variable padding between key and label,
+// so this searches by label word alone.
+func hintIndex(stripped, label string) int {
+	return strings.Index(stripped, label)
+}
+
 func sendExtractionKey(m *Model, key string) {
 	var msg tea.KeyPressMsg
 	switch key {
@@ -3542,3 +3550,142 @@ func TestExtractionLLMCancelFn_SetSynchronouslyOnRerun(t *testing.T) {
 	// Clean up by cancelling the timeout context so the test doesn't leak.
 	ex.cancelLLMTimeout()
 }
+
+func TestExploreMode_HintBarTrailingOrder(t *testing.T) {
+	t.Parallel()
+	m := newPreviewModel(t, []extract.Operation{
+		{Action: "create", Table: data.TableVendors, Data: map[string]any{"name": "A"}},
+	})
+	ex := m.ex.extraction
+
+	// Pipeline mode: x should come after a and before esc.
+	pipelineOut := m.buildExtractionPipelineOverlay(100, 90, "test")
+	pipelinePlain := ansi.Strip(pipelineOut)
+
+	pipelineAcceptIdx := hintIndex(pipelinePlain, "accept")
+	pipelineExploreIdx := hintIndex(pipelinePlain, "explore")
+	pipelineEscIdx := hintIndex(pipelinePlain, "discard")
+	require.Greater(t, pipelineAcceptIdx, 0, "accept hint should appear")
+	require.Greater(t, pipelineExploreIdx, 0, "explore hint should appear")
+	require.Greater(t, pipelineEscIdx, 0, "discard hint should appear")
+	assert.Less(t, pipelineAcceptIdx, pipelineExploreIdx,
+		"accept should come before explore")
+	assert.Less(t, pipelineExploreIdx, pipelineEscIdx,
+		"explore should come before discard")
+
+	// Enter explore mode: x should still come after a and before esc.
+	sendExtractionKey(m, "x")
+	require.True(t, ex.exploring)
+
+	exploreOut := m.buildExtractionPipelineOverlay(100, 90, "test")
+	explorePlain := ansi.Strip(exploreOut)
+
+	exploreAcceptIdx := hintIndex(explorePlain, "accept")
+	exploreBackIdx := hintIndex(explorePlain, "back")
+	exploreEscIdx := hintIndex(explorePlain, "discard")
+	require.Greater(t, exploreAcceptIdx, 0, "accept hint should appear")
+	require.Greater(t, exploreBackIdx, 0, "back hint should appear")
+	require.Greater(t, exploreEscIdx, 0, "discard hint should appear")
+	assert.Less(t, exploreAcceptIdx, exploreBackIdx,
+		"accept should come before back")
+	assert.Less(t, exploreBackIdx, exploreEscIdx,
+		"back should come before discard")
+}
+
+func TestExploreMode_HintBarTrailingOrderMultiTab(t *testing.T) {
+	t.Parallel()
+	m := newPreviewModel(t, []extract.Operation{
+		{Action: "create", Table: data.TableVendors, Data: map[string]any{"name": "A"}},
+		{
+			Action: "create",
+			Table:  data.TableQuotes,
+			Data:   map[string]any{"total_cents": float64(100)},
+		},
+	})
+	ex := m.ex.extraction
+
+	// Explore mode with multiple tabs: b/f tabs hint appears but
+	// a/x/esc must still be trailing three.
+	sendExtractionKey(m, "x")
+	require.True(t, ex.exploring)
+	require.Greater(t, len(ex.previewGroups), 1, "need multiple tabs")
+
+	out := m.buildExtractionPipelineOverlay(100, 90, "test")
+	plain := ansi.Strip(out)
+
+	tabsIdx := hintIndex(plain, "tabs")
+	acceptIdx := hintIndex(plain, "accept")
+	backIdx := hintIndex(plain, "back")
+	escIdx := hintIndex(plain, "discard")
+	require.Greater(t, tabsIdx, 0, "tabs hint should appear")
+	require.Greater(t, acceptIdx, 0)
+	require.Greater(t, backIdx, 0)
+	require.Greater(t, escIdx, 0)
+
+	assert.Less(t, tabsIdx, acceptIdx,
+		"tabs should come before stable trailing group")
+	assert.Less(t, acceptIdx, backIdx,
+		"accept should come before back")
+	assert.Less(t, backIdx, escIdx,
+		"back should come before discard")
+}
+
+func TestExploreMode_OverlayHeightStableAcrossToggle(t *testing.T) {
+	t.Parallel()
+	// Two tables with different row counts to trigger height change.
+	m := newPreviewModel(t, []extract.Operation{
+		{Action: "create", Table: data.TableVendors, Data: map[string]any{"name": "A"}},
+		{Action: "create", Table: data.TableVendors, Data: map[string]any{"name": "B"}},
+		{Action: "create", Table: data.TableVendors, Data: map[string]any{"name": "C"}},
+		{
+			Action: "create",
+			Table:  data.TableQuotes,
+			Data:   map[string]any{"total_cents": float64(100)},
+		},
+	})
+	ex := m.ex.extraction
+
+	// Pipeline mode overlay.
+	pipelineOut := m.buildExtractionPipelineOverlay(100, 90, "test")
+	pipelineLines := strings.Count(pipelineOut, "\n")
+
+	// Enter explore mode and switch to tab with fewer rows.
+	sendExtractionKey(m, "x")
+	require.True(t, ex.exploring)
+	sendExtractionKey(m, "f") // switch to quotes tab (1 row vs 3)
+	require.Equal(t, 1, ex.previewTab)
+
+	exploreOut := m.buildExtractionPipelineOverlay(100, 90, "test")
+	exploreLines := strings.Count(exploreOut, "\n")
+
+	assert.Equal(t, pipelineLines, exploreLines,
+		"overlay height should be identical regardless of active tab row count")
+}
+
+func TestExploreMode_TabPersistsOnExit(t *testing.T) {
+	t.Parallel()
+	m := newPreviewModel(t, []extract.Operation{
+		{Action: "create", Table: data.TableVendors, Data: map[string]any{"name": "A"}},
+		{
+			Action: "create",
+			Table:  data.TableQuotes,
+			Data:   map[string]any{"total_cents": float64(100)},
+		},
+	})
+	ex := m.ex.extraction
+
+	// Enter explore, switch to tab 1, exit.
+	sendExtractionKey(m, "x")
+	require.True(t, ex.exploring)
+	sendExtractionKey(m, "f")
+	require.Equal(t, 1, ex.previewTab)
+	sendExtractionKey(m, "x") // exit explore
+	require.False(t, ex.exploring)
+
+	// Pipeline mode should now show tab 1 (dimmed), not reset to 0.
+	out := m.renderOperationPreviewSection(80, false)
+	plain := ansi.Strip(out)
+	// Tab 1 is Quotes -- its data should appear in rendered table.
+	assert.Contains(t, plain, "Total",
+		"pipeline mode should show last-explored tab content")
+}