fix(studio): auto-reconnect when preview server is not running (#802)

* fix(studio): auto-reconnect when preview server is not running

When the preview server is not reachable (tab reload after server died,
or opening the URL before running npm run dev), the Studio was silently
swallowing the fetch error and rendering an infinite pulsing dot with no
recovery path. Users had no idea what happened.

Instead of showing an error and asking the user to act, the Studio now
polls /api/projects every 2 seconds and automatically transitions into
the full editor the moment the server becomes available — no manual
reload required.

Also fixes how agents are instructed about the dev server: CLAUDE.md and
AGENTS.md listed `npm run dev` as a one-liner comment identical to other
commands, giving no indication it blocks until stopped. Agents (including
Claude Code) were running it in foreground, timing out after ~2 minutes,
and silently killing the server. Added an explicit note that it must be
started as a background process.

* fix(studio): auto-reconnect when preview server is not running

Two issues combined to produce the "reloading the tab kills the whole"
experience for users running with an AI agent:

1. Agents silently killed the server — CLAUDE.md/AGENTS.md listed
   npm run dev with no indication it blocks. Agents ran it in foreground,
   the Bash tool timed out, and the process died. Added an explicit
   run_in_background instruction.

2. Studio had no recovery path — fetch errors were swallowed, leaving
   a permanent pulsing dot with no way out. Now the Studio polls every
   2s and auto-transitions the moment the server responds.

Also fixes the bookmark-reload case: the hash path previously bailed out
before pinging the server, so a dead server + saved URL produced a blank
editor instead of the waiting state. The server is now always contacted
first, regardless of whether a hash project ID is present.

Timer cleanup (cancelled flag + clearTimeout) prevents setState on
unmounted components under StrictMode dev re-mounts.

Extracted into useServerConnection hook to keep App.tsx under the 500
LOC limit.

packages/cli/src/templates/_shared/AGENTS.md

@@ -13,13 +13,17 @@ Skills encode patterns like `window.__timelines` registration, `data-*` attribut
 ## Commands
 
 ```bash
-npm run dev          # preview in browser (studio editor)
+npm run dev          # start the preview server (long-running — keep it alive in background)
 npm run check        # lint + validate + inspect
 npm run render       # render to MP4
 npm run publish      # publish and get a shareable link
 npx hyperframes docs <topic> # reference docs in terminal
 ```
 
+> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
+> Always run it as a background process so it stays alive while you edit compositions.
+> Running it in the foreground will time out and kill the server, breaking the browser preview.
+
 ## Project Structure
 
 - `index.html` — main composition (root timeline)

packages/cli/src/templates/_shared/CLAUDE.md

@@ -25,7 +25,7 @@
 ## Commands
 
 ```bash
-npm run dev          # preview in browser (studio editor)
+npm run dev          # start the preview server (long-running — keep it alive in background)
 npm run check        # lint + validate + inspect
 npm run render       # render to MP4
 npm run publish      # publish and get a shareable link
@@ -34,6 +34,10 @@ npx hyperframes lint --json     # machine-readable output for CI
 npx hyperframes docs <topic> # reference docs in terminal
 ```
 
+> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
+> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
+> command — it will time out and the server will die, breaking the browser preview.
+
 ## Documentation
 
 **For quick reference**, use the local CLI docs command (no network required):