Skip to content

frontend-preview-handoff.md

Latest commit

 

History

History
48 lines (36 loc) · 2.34 KB

frontend-preview-handoff.md

File metadata and controls

48 lines (36 loc) · 2.34 KB
Raw

Example: Frontend Preview Handoff

This example shows how MobileCodex can make a local web UI visible from Codex Mobile.

Natural Requests

Users should not need to know the helper command names. These should all trigger the same preview flow:

  • "Show me the website."
  • "Can I open this on my phone?"
  • "Give me the preview link."
  • "Is the app running?"
  • "Let me see what this looks like."

What Codex Should Do

  1. Infer that the user wants a browser-visible preview.
  2. Inspect the project shape and remembered .mobilecodex/ project memory.
  3. Run setup if preview readiness is unknown.
  4. Start or reuse the local preview through the server registry.
  5. Confirm the local URL responds.
  6. Capture desktop UX proof and summarize console/network issues.
  7. If safe, start or reuse ngrok and report the latest public phone URL. If ngrok is already running, always include that link.
  8. Finish with the final-flow handoff: preview, screenshot, proof bundle, server state, and next action.

Representative Commands

py .\skills\mobile-codex-dev\scripts\mobile_dev.py server-start --root . --name app --port 5173 -- npm run dev -- --host 127.0.0.1 --port 5173
py .\skills\mobile-codex-dev\scripts\mobile_dev.py server-list --root .
py .\skills\mobile-codex-dev\scripts\mobile_dev.py ux-proof --root . --url http://127.0.0.1:5173
py .\skills\mobile-codex-dev\scripts\mobile_dev.py ngrok-preview --port 5173
py .\skills\mobile-codex-dev\scripts\mobile_dev.py final-flow --root . --ui-work --test-result "preview smoke check passed" --public-preview

Handoff Shape

Result: Started the app preview and verified the page renders.
Preview: https://example.ngrok-free.app, forwarding to http://127.0.0.1:5173.
Proof: Desktop screenshot saved under proof/mobilecodex-ux-YYYYMMDD-HHMMSS/. Public URL returned 200. Proof bundle written to proof/mobilecodex-YYYYMMDD-HHMMSS/proof.md.
State: Server registry has app on port 5173 with PID, command, URL, and log path. ngrok remains running for the phone preview.
Next: Review the phone link, ask for another viewport, or ask me to keep iterating.

Why This Helps From Mobile

The user does not need to see the laptop browser, terminal, or process list. From the phone they can open ngrok for the live mobile view, inspect the posted desktop screenshot for the wide layout, and see exactly what is running.