feat: interactive OpenCode remote control setup app by leoncheng57 · Pull Request #164 · leoncheng57/leoncheng57.github.io

leoncheng57 · 2026-08-11T18:09:10Z

Proposal

Host the OpenCode remote-control project as a single interactive guide page on leoncheng.dev, replacing the now-closed draft blog PR.

Live preview: https://leoncheng.dev/previews/pr-164/?p=/guides/opencode-remote-control

What ships

One page at /guides/opencode-remote-control (/opencode-remote-control redirects there):

ASCII architecture diagram near the top — the phone ↔ Mac / ntfy loop from the repo README, rendered in a terminal-styled block
Animated architecture storyboard — a command dot rides the Tailscale tunnel from the phone into the Mac, the agent works as figure-eight dots in the hub, and events flow plugin → ntfy relay → phone with a ping ripple; SMIL + framer-motion, fully static under prefers-reduced-motion. Plus a horizontal 4-step lifecycle timeline
How to Setup — the interactive builder: change project root, web port, ntfy server, and the picker workaround; install/config.env/launch commands regenerate live; non-secret preferences persist in localStorage
Daily commands — oc-remote web / link / topic / notify-test reference
Phone onboarding — subscribe + QR flow
Customize notifications — the three publish triggers with priorities and payloads, Click actions and inline buttons, OPENCODE_NTFY_* runtime knobs, where to edit message text, the multi-instance plugin trap, and topic rotation
A day in the life, Security boundary, and Troubleshooting (with upstream workarounds folded in)
Compact sticky numbered table-of-contents navbar (01–08) with a scroll spy that highlights the section in view; a hero note describes the tooling as a simple public repo and links it, and GitHub is also linked from the nav and the guides index card
Scoped Supabase-inspired theme; the document background is painted dark while mounted so overscroll never flashes the site background

Integration with the guides site

This branch merges current main (standalone themed guides site, 404 route, SiteFooter) and adapts:

The page registers as an explicit route alongside /guides/:slug/* (static segments win route ranking)
The /guides index lists it with a hardcoded terminal-style card — updated · interactive guide · GitHub ↗ — since it is not a markdown guide
The homepage Recent work grid lists it as a Guide
It is intentionally not on the /apps index

Other changes

Design components: /repo/design-components gains a "Storyboard animations" section documenting the SessionStoryboard/RemoteControlStoryboard pattern, with the live guide component as the specimen
The page is marked BETA (hero pill + guides index badge) and uses the shared SiteFooter
ScrollToTop hash fix: arriving at a URL with an anchor (e.g. …#notifications) now scrolls to the anchor instead of the top; hash-only in-page navigation is unchanged
Fixed the #builder anchor and replaced the positional .navLinks nth-child mobile rule with an explicit .navExternal class

Verification

npm run lint — clean
npx vitest run --maxWorkers=4 — 295 tests pass (49 files)
Vite production build — passes (existing chunk-size warning only)
Playwright-checked desktop (1280px) and mobile (390px) renders; full-page screenshot confirms the dark background edge to edge; /opencode-remote-control redirect verified

Supersedes

PR #63 was closed in favor of this interactive guide proposal.

with-full:/guides/opencode-remote-control -- One-pager (viewport + full scroll)
/guides

github-actions · 2026-08-11T18:09:50Z

PR preview: https://leoncheng.dev/previews/pr-164/

Deployed at 8188728, updated 2026-08-17 17:37 EDT / 2026-08-17 21:37 UTC. This preview refreshes on every push and is removed when the pull request closes.

github-actions · 2026-08-13T19:33:02Z

PR screenshots

One-pager (viewport + full scroll)

/guides/opencode-remote-control

📸 Full page — /guides/opencode-remote-control (click to expand)

`/guides`

Captured at e11e54c, updated 2026-08-17 17:26 EDT / 2026-08-17 21:26 UTC. Screenshots refresh on every push and description edit, and are removed when the pull request closes.

cursor · 2026-08-17T21:34:45Z

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

The test takes over 4s on CI runners even on main; anything that adds marginal load pushes it past the default 5s limit and fails the verify job intermittently.

A single interactive page at /guides/opencode-remote-control (with a redirect from /opencode-remote-control): ASCII architecture diagram, stacked control/notification plane walkthrough with a lifecycle timeline, interactive setup builder, daily commands, phone onboarding, ntfy notification customization, day-in-the-life, security boundary, and troubleshooting, under a compact sticky numbered TOC. Listed on the /guides index with a terminal-style card and on the home recent-work grid as a Guide. The document background is painted dark while mounted so overscroll never reveals the site background.

…oter - SERVE block keeps only --help and web; the links/topic block and both command reference paragraphs/tables requested for removal are gone - Notifications drops the oc-web-url and env-intro paragraphs and the NTFY ENV example block; Runtime knobs flows straight into the table - BETA badge on the page hero and on the guides index card - Replace the custom ProductFooter with the shared SiteFooter (#198), themed via --sf-* vars, with the GitHub and picker-issue links in the extra row

- Move the GitHub source link from the footer to a hero note describing the tooling as a simple public repo; drop the picker-issue footer link - Render the shared SiteFooter without an extra row - Highlight the active section in the sticky TOC via a scroll spy with aria-current and an accent underline

Replace the static control/notification plane cards with an animated SVG storyboard in the SessionStoryboard style: a command dot rides the Tailscale tunnel from the phone into the Mac, the agent works as figure-eight dots inside the hub, and events flow plugin -> ntfy relay -> phone with a ping ripple where the push lands. Entrance stagger via framer-motion, path-riding via SMIL animateMotion (calcMode paced), all loops disabled under prefers-reduced-motion. Also documents the storyboard pattern on /repo/design-components with the live guide component as the specimen.

…repo note The animated storyboard supersedes the static ASCII block. Card descriptions are resized and rewrapped so nothing overflows the PHONE, MAC, or NTFY boxes, and the hero repo note gains an octopus icon.

leoncheng57 mentioned this pull request Aug 11, 2026

blog: controlling coding agent sessions from your phone (draft) #63

Closed

leoncheng57 force-pushed the feature/opencode-remote-control-app branch 2 times, most recently from 7b4a996 to ba6584a Compare August 13, 2026 19:31

leoncheng57 force-pushed the feature/opencode-remote-control-app branch 2 times, most recently from e11e54c to 9bbc57e Compare August 17, 2026 21:31

leoncheng57 marked this pull request as ready for review August 17, 2026 21:34

leoncheng57 added 8 commits August 17, 2026 17:34

fix: honor URL hash anchors when navigating to a new route

d50513b

test: raise timeout on the heavy tuzi catalog render test

0542933

The test takes over 4s on CI runners even on main; anything that adds marginal load pushes it past the default 5s limit and fails the verify job intermittently.

chore: restore yarn.lock from main

3b51c6f

style: drop the ASCII diagram, contain storyboard card text, octopus …

8188728

…repo note The animated storyboard supersedes the static ASCII block. Card descriptions are resized and rewrapped so nothing overflows the PHONE, MAC, or NTFY boxes, and the hero repo note gains an octopus icon.

leoncheng57 force-pushed the feature/opencode-remote-control-app branch from 9bbc57e to 8188728 Compare August 17, 2026 21:36

leoncheng57 merged commit 7adb138 into main Aug 17, 2026
3 checks passed

leoncheng57 mentioned this pull request Aug 21, 2026

guides: link out to the Agent Skills catalogue #241

Merged

Navigation Menu

feat: interactive OpenCode remote control setup app - #164

feat: interactive OpenCode remote control setup app#164
leoncheng57 merged 8 commits into
mainfrom
feature/opencode-remote-control-app

leoncheng57 commented Aug 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 13, 2026 •

edited

Loading

Uh oh!

cursor Bot commented Aug 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

leoncheng57 commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposal

What ships

Integration with the guides site

Other changes

Verification

Supersedes

Uh oh!

github-actions Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR screenshots

One-pager (viewport + full scroll)

/guides

Uh oh!

cursor Bot commented Aug 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

leoncheng57 commented Aug 11, 2026 •

edited

Loading

github-actions Bot commented Aug 11, 2026 •

edited

Loading

github-actions Bot commented Aug 13, 2026 •

edited

Loading

`/guides`