fix(web): example flows in sidebar + carrot-click highlight for string data

[naorsabag]

What changed

1. FLOWS sidebar on Pages

Pages had no sidebar — the previous PR (#107) put example cards on the empty state. You asked for the same sidebar UX the local app has. Reuses the existing `Sidebar` component, fed with `EXAMPLE_FLOWS` adapted to `FlowListItem[]` (with the YAML's `meta.path` so the directory tree groups examples the same way the local app would group server-side flows). FLOWS bookmark tab toggles the sidebar exactly like the local app.

Clicking a sidebar entry swaps `location.hash` to that example's encoded YAML, and the existing decode pipeline takes over — so reload, back/forward, and share-URL paste all keep working.

2. Carrot click highlight for string-data steps

`emitPixelClick` was synthesizing `{ label: step.data }` as `focus.data` whenever `step.data` was a string. The inspector matches by reference equality (`d === focus.data`), and the synthesized wrapper never matched the wrapper `normalizeData()` builds on the inspector side — so the highlight silently failed.

Pass `undefined` for string-data steps. The highlight then falls back to from/to-only matching, which is exactly right when there's only one block per section.

This was a latent bug on the local app too — just less visible because most curated flows mix object data. The simple-crud example I shipped in #107 is all-string, which is what surfaced it.

Note on the previous PR

`2c14b09` was accidentally pushed to the already-merged `feat/pages-example-flows` branch. This PR cherry-picks it onto a fresh branch off current master.

Test plan

• `npm test -w @openhop/web` (42/42)
• `VITE_BASE=/openhop/ VITE_FRAGMENT_MODE=1 npm run build` succeeds
• After merge: visit Pages, confirm FLOWS sidebar lists the three examples grouped by path
• Carrot click on the simple-crud example highlights the matching block in the inspector

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Added a new examples sidebar (toggleable via BookmarkTab) for browsing and loading pre-built flows
  • Example flows are now organized by folder structure for improved discoverability
  • Updated empty-state UI to guide users to use the sidebar for selecting examples

• Bug Fixes

  • Improved data pixel click handling for more accurate inspector highlighting

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: bb34948d-fc93-4a65-a980-17f9c437a988

📥 Commits

Reviewing files that changed from the base of the PR and between 0461834 and ba820dd.

📒 Files selected for processing (3)

• packages/web/src/AppFragment.tsx
• packages/web/src/components/DataPixel.tsx
• packages/web/src/lib/example-flows.ts

---

Walkthrough

Fragment mode now includes a user-toggleable sidebar displaying curated example flows organized by folder path. Selecting an example updates the URL hash, triggering the existing decode pipeline. The empty-state UI removes inline examples, directing users to the sidebar. DataPixel click behavior is refined to pass undefined for string data, allowing inspector highlight to use from/to-only matching.

Changes

Example Sidebar & Inspector Feature

Layer / File(s)	Summary
Data Shape packages/web/src/lib/example-flows.ts	ExampleFlow interface adds path: string field; EXAMPLE_FLOWS array entries now include folder path values for sidebar grouping.
Sidebar Component Setup packages/web/src/AppFragment.tsx	Imports Sidebar component and flow typing; creates module-level EXAMPLE_FLOW_LIST from EXAMPLE_FLOWS as FlowListItem[] for sidebar rendering.
Example Selection & State packages/web/src/AppFragment.tsx	Fragment mode introduces sidebarOpen state; implements example selection by matching encoded example YAML against location.hash and updating hash on sidebar selection.
Layout & UI Rendering packages/web/src/AppFragment.tsx	Main layout adds left-edge BookmarkTab and conditionally renders Sidebar with flows, selectedFlowId, and onSelectFlow wiring; empty-state messaging updated to direct users to sidebar instead of inline example list.
Inspector Click Behavior packages/web/src/components/DataPixel.tsx	emitPixelClick now passes undefined for step.data strings (unless dataOverride provided), allowing inspector highlight logic to fall back to from/to-only matching.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• naorsabag/openhop#107: Extends example-flows feature with folder paths and adds fragment-mode sidebar, building on initial example flows and empty-state logic.
• naorsabag/openhop#95: Introduces BookmarkTab pattern and sidebar UI wiring (left-edge FLOWS/INSPECT tabs) that this PR uses for fragment-mode example sidebar.
• naorsabag/openhop#93: Modifies on-pixel click and inspection flow; this PR refines DataPixel click payload behavior for inspector matching consistency.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.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 title clearly and concisely summarizes the two main changes: adding example flows to the sidebar and fixing carrot-click highlighting for string data.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 fix/sidebar-and-carrot-highlight

---

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