feat: shareable replay deep-link on /cockpit (?replay=<id>&step=<n>) [agent:clawd]

[TargiX]

Closes #6

What

Shareable replay deep-links on /cockpit: ?replay=<scenarioId> arms the guided incident replay at step 0, and &step=<n> jumps to a specific beat. As the viewer steps through the replay, the URL stays in sync (history.replaceState — no extra history entries, no scroll jump), so every beat is copy-shareable. A Copy link control in the replay rail copies the current beat's URL.

This makes SignalOps' strongest first-90-seconds recruiter moment reachable via a direct link — the portfolio case study and wow-lab roadmap can now drop a viewer straight into a specific replay beat.

Changes (additive, 2 files, +138/-6)

• src/components/dashboard.tsx
  • readReplayParams() — parses ?replay/&step client-side, validates the id against replayScenarios, clamps the step to the valid range; unknown/empty/invalid values degrade to no replay (no crash).
  • replayScenarioId / replayStepIndex seeded from the URL via lazy state init (no mount flash).
  • Mount-only effect applies the linked beat to dashboard controls via the existing goToReplayStep() (rAF-deferred so the scroll target settles first).
  • Sync effect calls syncReplayUrl() on scenario/step change; replay exit clears the params.
• src/components/incident-replay.tsx
  • CopyLinkButton — clipboard write of the current URL (already kept in sync by the dashboard), with a 2s "Copied" confirmed state; silently no-ops when clipboard is unavailable.

No new runtime dependencies. No rewrite of existing dashboard.tsx control logic — URL hydration just seeds the initial goToReplayStep() call.

Verification

• pnpm check green (lint + typecheck + build). Next.js 16.2.6 production build compiles, /cockpit prerenders as static.
• Manual matrix (per issue feat: shareable replay deep-link (?replay=<id>&step=<n>) on /cockpit #6 acceptance criteria): /cockpit?replay=flux-retry arms at step 0; ?replay=template-cost&step=3 lands on step 3 (clamped); stepping updates the URL; Copy link yields a working URL; ?replay=garbage loads the normal dashboard with no console error; replay exit clears params.

agent:clawd

Summary by CodeRabbit

• New Features
  • Added deep-linking for replay scenarios and steps via URL query parameters (replay and step), including automatic step clamping, URL synchronization, and reliable application after data loads.
  • Added a “Copy link” button to the replay player that copies the current step URL to the clipboard and shows a temporary “Copied” confirmation.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
signalops	Ready	Preview, Comment	Jun 21, 2026 3:53am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5a0055f4-e214-4f89-9f21-9972351b8908

📥 Commits

Reviewing files that changed from the base of the PR and between d8587a1 and 36e2c76.

📒 Files selected for processing (1)

• src/components/dashboard.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/dashboard.tsx

---

📝 Walkthrough

Walkthrough

Dashboard gains URL-based replay hydration: it reads ?replay=<id>&step=<n> on first render to seed state, applies it via requestAnimationFrame on mount, and keeps the URL in sync with history.replaceState as steps change. ReplayPlayer gains a CopyLinkButton that copies the current URL to the clipboard with a 2-second "Copied" confirmation.

Changes

Shareable Replay Deep-Link

Layer / File(s)	Summary
URL parse/sync utilities and lazy state seed src/components/dashboard.tsx	Adds PARAM_REPLAY / PARAM_STEP constants, readReplayParams() that parses and clamps window.location.search, and syncReplayUrl() that calls history.replaceState. Changes Dashboard's replayScenarioId and replayStepIndex useState calls to lazy-init from readReplayParams().
Mount effect and URL sync effect src/components/dashboard.tsx	Adds a mount-only useEffect that schedules goToReplayStep via requestAnimationFrame (with cancelAnimationFrame cleanup), a one-time data-dependent effect that re-applies the replay routing rule when the ops snapshot resolves, and a dependency-driven useEffect that calls syncReplayUrl whenever the active replay scenario or step changes.
CopyLinkButton and ReplayPlayer header src/components/incident-replay.tsx	Imports Link2 from lucide-react, adds CopyLinkButton with copied state and silent clipboard write, and renders it alongside the step counter in ReplayPlayer's header row.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• TargiX/signalops#5: Introduced the guided incident replay, goToReplayStep, and ReplayPlayer that this PR directly extends with URL hydration and copy-link functionality.

Poem

🐇 A link, a step, a replay beat,
I hop to the URL — oh, how neat!
?replay=flux-retry seeds the show,
history.replaceState keeps the flow,
Copy the link, share the delight —
Every cockpit moment bookmarked right! 🔗

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and concisely describes the main feature: shareable replay deep-links using URL query parameters on the /cockpit route.
Linked Issues check	✅ Passed	The PR implements all key coding requirements from issue #6: URL parameter parsing and hydration, step clamping, continuous URL sync via history.replaceState, copy-to-clipboard control, graceful degradation, and parameter clearing on replay exit.
Out of Scope Changes check	✅ Passed	All changes are scoped to dashboard.tsx and incident-replay.tsx as specified in issue #6; no new routes, ProductHome changes, or logic refactoring outside the stated objectives are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch clawd/signalops-replay-deeplink

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}