feat(web): share button in local app header#160
Merged
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
WalkthroughThis PR adds a Share button to the web app header that generates a self-contained URL pointing to the OpenHop Pages playground with the current flow encoded in the fragment, enabling users to share flows without requiring installation. The feature includes a new Pages-specific share URL builder, clipboard copy interaction with fallback prompt, and visual toast feedback. ChangesShare URL to Pages Playground
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/web/src/App.tsx (1)
1-657:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRun Prettier on this file to unblock CI.
prettier --checkis failing for this file in the pipeline; please format and recommit so required checks pass.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/web/src/App.tsx` around lines 1 - 657, Prettier formatting failed for packages/web/src/App.tsx; run the project's formatter and re-commit the changes to satisfy CI. Open App.tsx (containing the React component App, helper functions like ShareIcon, and exports) and run the configured Prettier command (e.g. prettier --write packages/web/src/App.tsx or yarn/npm script that formats), then stage and commit the formatted file so the pipeline's prettier --check passes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/web/src/App.tsx`:
- Around line 1-657: Prettier formatting failed for packages/web/src/App.tsx;
run the project's formatter and re-commit the changes to satisfy CI. Open
App.tsx (containing the React component App, helper functions like ShareIcon,
and exports) and run the configured Prettier command (e.g. prettier --write
packages/web/src/App.tsx or yarn/npm script that formats), then stage and commit
the formatted file so the pipeline's prettier --check passes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: aea93a20-7e0f-4a95-85b8-ffca458a02cc
📒 Files selected for processing (5)
CHANGELOG.mdREADME.mdpackages/web/__tests__/share-url.test.tspackages/web/src/App.tsxpackages/web/src/lib/share-url.ts
The local app had no first-class way to send someone the flow you're looking at — only the Pages playground did, by encoding the YAML into the URL hash on Save. That mismatch meant every "look at this" turned into a YAML paste-and-instruction. This wires the same affordance into the local app: - Header gets a "Share" button (only when a flow is loaded). Clicks YAML-stringify the in-memory flow, encode it via the existing v1 fragment format, build a URL pointing at the public Pages playground (https://naorsabag.github.io/openhop/#<encoded>), and copy that URL to the clipboard with a cyan toast confirmation. Falls back to window.prompt if clipboard access is blocked. - New buildPagesShareUrl helper in lib/share-url.ts hardcodes the Pages destination as a module-level constant, so the local-app share target stays in one place if the playground ever moves. The generic buildShareUrl is unchanged — AppFragment.tsx still uses Vite's BASE_URL like before. The Pages site is the only host that can decode share fragments without a local server, so sharing always targets it (regardless of where the sharer is running OpenHop). Sub-flow drilldown state is recipient-side navigation and intentionally omitted from the payload — share is per-top-level-flow, matching AppFragment's Save behaviour. Inline SVG share icon (Android-style three connected nodes) sits in the button instead of a glyph, with display:block + edge-to-edge content so it lines up with the pixel font without padding asymmetry. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…nto one line CI's npm run format:check rejected the multi-line svg props in packages/web/src/App.tsx. Run prettier --write to match repo style; no behaviour change. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
naorsabag
force-pushed
the
worktree-add-share-button-local-app
branch
from
b2b4aae to
dcf2cfa
Compare
9 tasks
naorsabag
added a commit
that referenced
this pull request
May 17, 2026
…3.3 (#161) Patch release covering everything merged since 0.3.2 (#157, #158, #160). Versions: - @openhop/server 0.3.2 -> 0.3.3 - @openhop/web 0.3.2 -> 0.3.3 - openhop (CLI) 0.3.2 -> 0.3.3 What's in this release: - @openhop/web picks up two unrelated user-facing additions: the new "Share" button in the local-app header (#160) which copies a Pages-playground share URL of the current flow to the clipboard, and the SEO/AI-search wiring for the Pages deploy (#157) — robots.txt, sitemap.xml, social-preview.png, Open Graph / Twitter Card meta, schema.org JSON-LD, and crawler-visible static landing content in index.html. - The CLI bump keeps the @openhop/server / @openhop/web deps in lockstep. No CLI-bundled change (skills/ payload unchanged). - @openhop/server has no behavioural delta this release; the bump is lockstep-only so the version-diff publisher tags all three together. - Repository also ships a single-plugin Claude Code marketplace (.claude-plugin/ + commands/, #158) — install via `/plugin marketplace add naorsabag/openhop` then `/plugin install openhop@openhop`. Plugin files are repo-only and do NOT ship in any npm tarball (`files` lists are unchanged), so this bump does not need to cover them — but the README install instructions that landed alongside #158 are user-facing and worth publishing under the new tag. No breaking changes -- additive only. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
packages/web/src/App.tsx) that copies a self-contained URL of the currently-loaded flow to the clipboard. The URL targets the public Pages playground (https://naorsabag.github.io/openhop/#<encoded>), so recipients can view the flow without installing OpenHop or running a server.buildPagesShareUrlhelper inpackages/web/src/lib/share-url.tscentralises the Pages destination behind a single call. Reuses the existing v1 fragment encoder, so old share URLs and the playground's decoder are unaffected.Why
Until now the local app had no first-class way to send a flow to anyone else — only the Pages playground encoded YAML into the URL hash on Save. Anyone editing a flow locally had to manually paste YAML over chat. This closes that gap with one button, and routes through Pages because that's the only host that can decode share fragments without a local server.
Test plan
npm --workspace packages/web run typecheck— cleannpm --workspace packages/web test— 48/48 pass, including a newbuildPagesShareUrlround-trip testnpm --workspace packages/web run lint— 0 errors (pre-existing warnings only)npm --workspace packages/web run build— bundles cleanlynpm --workspace packages/cli run build— CLI bundles cleanly🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
Documentation