feat: data preview / live tail panel

[TerrifiedBug]

Summary

• Add LiveTailPanel component that uses the existing requestSamples/sampleResult tRPC procedures to sample live events from deployed pipeline components
• Add tabbed layout (Config / Live Tail) to the detail panel — Live Tail tab only appears when the pipeline is deployed
• Pass pipelineId and isDeployed props from the pipeline editor page to the detail panel
• Update pipeline editor documentation with a new "Live Tail" section explaining usage

Test plan

• Open a deployed pipeline in the editor, select a node, verify "Config" and "Live Tail" tabs appear
• Open a draft pipeline, verify only the "Config" tab is visible
• On the Live Tail tab, click "Sample 10 Events" and verify events appear after polling
• Click an event row to expand/collapse the full JSON payload
• Verify sampling multiple times appends events (up to 50 cap)
• Verify error state displays correctly when sampling fails
• Verify the Config tab still works identically to before (no regressions)

[greptile-apps]

Greptile Summary

This PR introduces a Live Tail panel to the pipeline detail view, allowing users to one-shot sample live events from any deployed pipeline component via the existing requestSamples/sampleResult tRPC procedures. The changes are well-scoped and all six issues flagged in the previous review threads have been addressed.

Key changes:

• LiveTailPanel resets its own state when componentKey changes using React's recommended derived-state pattern (prevComponentKey comparison during render), covering the previously flagged stale-events bug.
• isPending now includes resultQuery.isFetching, closing the re-entry window between mutation success and first poll response.
• EXPIRED status sets hasExpired and clears requestId; a COMPLETED result with no matching events sets completedEmpty — both now show distinct, informative UI messages instead of the misleading "never sampled" prompt.
• isDeployed prop uses !!isDeployed from the existing line-154 variable, keeping it consistent with the metrics/logs polling gate.
• The blank-panel regression (Radix Tabs keeping "live-tail" as active value when the tab is removed) is resolved by keeping both tabs always rendered and letting LiveTailPanel show a guard message when !isDeployed.
• Remaining concern (from a previous thread, not a new finding): processResults is still called inside the select callback rather than a useEffect. React may invoke select during the render phase under concurrent features/Strict Mode, making the setEvents/setRequestId calls there a latent issue. The processedRequestRef guard prevents obvious double-execution, but this pattern is worth revisiting.

Confidence Score: 3/5

• Safe to merge with one acknowledged caveat: the select-as-side-effect pattern from the prior review thread remains in place and is a latent correctness risk under React Strict Mode / concurrent rendering.
• All previously flagged correctness bugs have been addressed in this revision. The only outstanding concern is the processResults call inside TanStack Query's select callback, which was flagged in a prior thread and the developer has kept intentionally. This is a real antipattern in TanStack Query v5 (select runs during React's render phase), but the processedRequestRef guard limits observable damage today. Score reflects working, tested-against functionality held back by one unresolved architectural pattern.
• src/components/flow/live-tail-panel.tsx — the select side-effect pattern at lines 77–81 is the one area warranting additional scrutiny before merge.

Important Files Changed

Filename	Overview
src/components/flow/live-tail-panel.tsx	New LiveTailPanel component. Previous thread issues (events reset on node switch, EXPIRED handling, completedEmpty state, isPending isFetching coverage) are all addressed. The select-as-side-effect antipattern flagged in a previous thread remains; ERROR status does not clear requestId but the logic still flows correctly because handleSample clears it before the next mutation.
src/components/flow/detail-panel.tsx	Adds tabbed layout. Both tabs are always rendered (Live Tail shows a "must be deployed" guard message rather than being hidden), which resolves the previously flagged blank-panel issue. pipelineId prop comes directly from the parent rather than re-reading useParams, which is cleaner.
src/app/(dashboard)/pipelines/[id]/page.tsx	Passes pipelineId and !!isDeployed to DetailPanel, reusing the existing isDeployed variable — resolves the previously flagged split-brain inconsistency. useMemo → useState change for errorCheckSince is a correct equivalent simplification.
docs/public/user-guide/pipeline-editor.md	Documentation-only addition. Adds a Live Tail section with step-by-step instructions, a hint about the heartbeat-based sampling model, and notes about the 50-event cap and 2-minute expiry window. Content is accurate relative to the implementation.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant LP as LiveTailPanel
    participant TQ as TanStack Query
    participant tRPC as tRPC (server)
    participant A as Vector Agent

    U->>LP: Click "Sample 10 Events"
    LP->>LP: handleSample()<br/>reset processedRequestRef, requestId, flags
    LP->>tRPC: requestSamples mutation<br/>{pipelineId, componentKeys, limit}
    tRPC->>A: Schedule sample capture
    tRPC-->>LP: onSuccess → setRequestId(result.requestId)
    LP->>TQ: Enable sampleResult query<br/>(enabled: !!requestId)

    loop Poll every 1 second while PENDING
        TQ->>tRPC: sampleResult({ requestId })
        tRPC-->>TQ: { status: "PENDING" }
    end

    A->>tRPC: Heartbeat delivers captured events
    TQ->>tRPC: sampleResult({ requestId })
    tRPC-->>TQ: { status: "COMPLETED", samples: [...] }
    TQ->>LP: select() → processResults(data)
    LP->>LP: filter samples by componentKey<br/>setEvents / setCompletedEmpty<br/>setRequestId(null) — stops polling

    alt status: EXPIRED
        tRPC-->>TQ: { status: "EXPIRED" }
        TQ->>LP: select() → processResults(data)
        LP->>LP: setHasExpired(true)<br/>setRequestId(null)
    end

    alt status: ERROR
        tRPC-->>TQ: { status: "ERROR" }
        TQ->>LP: refetchInterval → false (stop polling)
        LP->>U: Show error banner<br/>button re-enabled
    end

    U->>LP: Click event row
    LP->>LP: toggleExpand(index)
    LP->>U: Render full JSON payload

Loading

_{Last reviewed commit: 6cd9fba}