Land the "Switch to Pi" link straight in Live mode

Switching to the Pi's own copy previously dropped you back in Simulator
mode, so you still had to manually toggle to Live and re-type the host.
The share-link fragment now carries an optional &live=1 alongside
canvas=, which the import effect uses to call setMode('live')
immediately after loading the canvas — and the host field already
defaults to raspberrypi.local (now exported as DEFAULT_HOST from
pi.ts), so the Pi's copy opens ready to click Connect to Pi.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LJFnmNcWRtwcDPZQ1vMMyc

Author: bennuttall

src/App.tsx

@@ -123,10 +123,10 @@ function pinsInUse(nodes: DeviceFlowNode[]): Set<number> {
   return pins;
 }
 
-/** The payload of a `#canvas=<payload>` fragment left by a share link, if any */
-function shareHashParam(): string | null {
-  const match = /^#canvas=(.+)$/.exec(window.location.hash);
-  return match ? match[1] : null;
+/** The payload of a `#canvas=<payload>[&live=1]` fragment left by a share link, if any */
+function shareHashParam(): { canvas: string; live: boolean } | null {
+  const match = /^#canvas=([^&]+)(&live=1)?$/.exec(window.location.hash);
+  return match ? { canvas: match[1], live: Boolean(match[2]) } : null;
 }
 
 /** A canvas name, trimmed to characters safe to use verbatim as a filename stem */
@@ -751,19 +751,22 @@ function Editor() {
   // A share link is imported as a new named canvas once decoded (async,
   // since the payload is deflate-compressed — see persist.ts); the
   // fragment is scrubbed immediately so a refresh doesn't re-import it
-  // or leak it into browser history beyond this one entry.
+  // or leak it into browser history beyond this one entry. The `&live=1`
+  // suffix is how the "Switch to Pi" link (LiveModeModal) asks to land
+  // straight in Live mode instead of Simulator.
   useEffect(() => {
     const param = shareHashParam();
     if (!param) return;
     window.history.replaceState(null, '', window.location.pathname + window.location.search);
-    decodeSharedCanvas(param).then((imported) => {
+    decodeSharedCanvas(param.canvas).then((imported) => {
       if (!imported) {
         showWarning('This share link is invalid or corrupted');
         return;
       }
       const name = untitledCanvasName(listCanvases(), imported.name || 'shared canvas');
       saveCanvas(name, imported.nodes, imported.edges);
       applyCanvas(name);
+      if (param.live) setMode('live');
       showWarning(`Imported shared canvas as "${name}"`);
     });
     // mount-only

src/components/LiveModeModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import type { Edge } from '@xyflow/react';
 import type { DeviceFlowNode } from '../types';
 import { encodeSharedCanvas, SHARE_TOO_LARGE } from '../persist';
-import { DEFAULT_APP_PORT } from '../pi';
+import { DEFAULT_APP_PORT, DEFAULT_HOST } from '../pi';
 
 interface Props {
   onClose: () => void;
@@ -20,15 +20,15 @@ interface StoredAppLink {
 
 function loadStored(): StoredAppLink {
   const raw = localStorage.getItem(STORAGE_KEY);
-  if (!raw) return { host: '', port: DEFAULT_APP_PORT };
+  if (!raw) return { host: DEFAULT_HOST, port: DEFAULT_APP_PORT };
   try {
     const parsed = JSON.parse(raw) as Partial<StoredAppLink>;
     return {
-      host: typeof parsed.host === 'string' ? parsed.host : '',
+      host: typeof parsed.host === 'string' ? parsed.host : DEFAULT_HOST,
       port: typeof parsed.port === 'string' ? parsed.port : DEFAULT_APP_PORT,
     };
   } catch {
-    return { host: '', port: DEFAULT_APP_PORT };
+    return { host: DEFAULT_HOST, port: DEFAULT_APP_PORT };
   }
 }
 
@@ -39,8 +39,10 @@ function loadStored(): StoredAppLink {
  * plain HTTP, where Live mode isn't blocked — so instead of connecting
  * a websocket from here, "Switch to Pi" opens the Pi's own copy of the
  * app with the current canvas attached as a `#canvas=` share link, in a
- * new tab. That's a page navigation, not a connection — the actual
- * websocket "Connect to Pi" happens once you're there.
+ * new tab, plus `&live=1` so it lands straight in Live mode (App.tsx's
+ * share-import effect) instead of Simulator. That's a page navigation,
+ * not a connection — the actual websocket "Connect to Pi" happens once
+ * you're there (host box defaults to raspberrypi.local, same as here).
  */
 export function LiveModeModal({ onClose, nodes, edges, canvasName }: Props) {
   const [link, setLink] = useState(loadStored);
@@ -67,7 +69,7 @@ export function LiveModeModal({ onClose, nodes, edges, canvasName }: Props) {
   const port = link.port.trim() || DEFAULT_APP_PORT;
   const href =
     host && encoded && encoded !== SHARE_TOO_LARGE
-      ? `http://${host}:${port}/app/#canvas=${encoded}`
+      ? `http://${host}:${port}/app/#canvas=${encoded}&live=1`
       : undefined;
 
   return (

src/pi.ts

@@ -18,7 +18,7 @@ export function liveModeSupported(): boolean {
 }
 
 const STORAGE_KEY = 'gpio-webapp.pi-address';
-const DEFAULT_HOST = 'raspberrypi.local';
+export const DEFAULT_HOST = 'raspberrypi.local';
 export const DEFAULT_PORT = '8765';
 /** Default port for the *web app* itself when it's served from the Pi
  * (python3 -m http.server 8000 — see docs/hosted-deployment.md option 1),