feat(dev-ui): serve dev UI under /dev/ path, proxy user app at root

Move the dev UI to /dev/* so the user's Next.js app can be served at /
via a reverse proxy to localhost:3000. This enables cloud-dev machines
to expose both the dev UI and the running app on the same domain.

- Add Vite base path /dev/ and update all frontend fetch URLs
- Restructure dev-server routing: /dev/* → dev UI, /* → user app proxy
- Move WebSocket endpoint to /dev/ws
- Add proxy.ts for forwarding requests to user app
- Fix entrypoint.sh: blocking node_modules copy + runcrayon symlink pin
- Fix postinstall to preserve runcrayon symlinks in container
- Update auth-server health check to ping /dev/

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Askir

CLAUDE.md

@@ -138,6 +138,33 @@ my-app/
 - **Lint/Format:** Biome — `pnpm biome check`
 - **CI:** GitHub Actions (`publish-dev.yml`) publishes to npm with `dev` tag on push to main
 
+### Testing Local Changes Against Cloud
+
+To test local core changes on a cloud dev machine:
+
+1. **Build & push a Docker image with your changes:**
+   ```bash
+   cd packages/core/docker && ./build-dev.sh <tag>
+   ```
+   This builds the core package, packs it, builds/pushes the Docker image to `registry.fly.io/crayon-cloud-dev-image:<tag>`, and updates `CLOUD_DEV_IMAGE` in `packages/auth-server/.env.local`.
+
+2. **Start the local auth server** (separate terminal):
+   ```bash
+   cd packages/auth-server && pnpm dev
+   ```
+
+3. **Create a new cloud machine using the local auth server:**
+   ```bash
+   CRAYON_SERVER_URL=http://localhost:3000 pnpm --filter runcrayon exec node dist/cli/index.js cloud run
+   ```
+
+4. **Open the dev UI** at `https://<fly-app-name>.fly.dev/dev/`
+
+To update an existing cloud machine to a new image:
+```bash
+cd packages/core/docker && ./update-machines.sh <fly-app-name> [image]
+```
+
 ## Deployment
 
 - **auth-server:** `cd packages/auth-server && flyctl deploy`

README.md

@@ -79,6 +79,27 @@ crayon/
     └── uptime-app/ # Example application
 ```
 
+## Testing Local Changes Against Cloud
+
+To test local core changes on a cloud dev machine:
+
+1. **Build & push a Docker image with your changes:**
+   ```bash
+   cd packages/core/docker && ./build-dev.sh <tag>
+   ```
+
+2. **Start the local auth server** (separate terminal):
+   ```bash
+   cd packages/auth-server && pnpm dev
+   ```
+
+3. **Create a new cloud machine using the local auth server:**
+   ```bash
+   CRAYON_SERVER_URL=http://localhost:3000 pnpm --filter runcrayon exec node dist/cli/index.js cloud run
+   ```
+
+4. **Open the dev UI** at `https://<fly-app-name>.fly.dev/dev/`
+
 ## Requirements
 
 - Node.js 20+

packages/auth-server/src/app/api/cloud-dev/status/route.ts

@@ -63,7 +63,7 @@ export async function GET(req: NextRequest) {
       if (state === "started" || state === "running") {
         // Ping the app URL to verify it responds
         try {
-          const resp = await fetch(appUrl!, {
+          const resp = await fetch(`${appUrl!}/dev/`, {
             signal: AbortSignal.timeout(5000),
           });
           if (resp.ok || resp.status < 500) {

packages/core/dev-ui/src/components/BottomPanel.tsx

@@ -56,7 +56,7 @@ export function BottomPanel({ tabs, defaultTab, onClose }: BottomPanelProps) {
 
   // Fetch claude command hint
   useEffect(() => {
-    fetch("/api/claude-command")
+    fetch("/dev/api/claude-command")
       .then((res) => res.ok ? res.json() : null)
       .then((data) => {
         if (data?.isCloud) {

packages/core/dev-ui/src/components/IntegrationSection.tsx

@@ -48,7 +48,7 @@ export function IntegrationSection({
   const handleConnect = useCallback(async () => {
     setConnecting(true);
     try {
-      const res = await fetch("/api/nango/connect-session", {
+      const res = await fetch("/dev/api/nango/connect-session", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ integration_id: integrationId }),

packages/core/dev-ui/src/components/RunWorkflowModal.tsx

@@ -65,7 +65,7 @@ export function RunWorkflowModal({ dag, onClose, onSuccess }: RunWorkflowModalPr
 
     setRunning(true);
     try {
-      const res = await fetch(`/api/workflows/${encodeURIComponent(dag.workflowName)}/run`, {
+      const res = await fetch(`/dev/api/workflows/${encodeURIComponent(dag.workflowName)}/run`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ input }),

packages/core/dev-ui/src/components/TestSection.tsx

@@ -46,7 +46,7 @@ export function TestSection({ dag, onSuccess }: TestSectionProps) {
 
     setRunning(true);
     try {
-      const res = await fetch(`/api/workflows/${encodeURIComponent(dag.workflowName)}/run`, {
+      const res = await fetch(`/dev/api/workflows/${encodeURIComponent(dag.workflowName)}/run`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ input }),

packages/core/dev-ui/src/hooks/useConnections.ts

@@ -23,7 +23,7 @@ export function useConnections() {
 
   const fetchConnections = useCallback(async () => {
     try {
-      const res = await fetch("/api/connections");
+      const res = await fetch("/dev/api/connections");
       if (res.ok) {
         setConnections(await res.json());
       }
@@ -40,7 +40,7 @@ export function useConnections() {
 
   const upsert = useCallback(
     async (mapping: Omit<ConnectionMapping, "updated_at">) => {
-      await fetch("/api/connections", {
+      await fetch("/dev/api/connections", {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(mapping),
@@ -53,7 +53,7 @@ export function useConnections() {
 
   const remove = useCallback(
     async (workflowName: string, nodeName: string, integrationId: string) => {
-      await fetch("/api/connections", {
+      await fetch("/dev/api/connections", {
         method: "DELETE",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -105,7 +105,7 @@ export function useNangoIntegrations() {
   useEffect(() => {
     (async () => {
       try {
-        const res = await fetch("/api/nango/integrations");
+        const res = await fetch("/dev/api/nango/integrations");
         if (res.ok) {
           setIntegrations(await res.json());
         }
@@ -128,7 +128,7 @@ export function useNangoConnections(integrationId: string | null, mutationVersio
     if (!integrationId) return [];
     setLoading(true);
     try {
-      const res = await fetch(`/api/nango/connections/${encodeURIComponent(integrationId)}`);
+      const res = await fetch(`/dev/api/nango/connections/${encodeURIComponent(integrationId)}`);
       if (res.ok) {
         const data: NangoConnection[] = await res.json();
         setNangoConnections(data);

packages/core/dev-ui/src/hooks/useDAGSocket.ts

@@ -23,7 +23,7 @@ export function useDAGSocket() {
 
   const connect = useCallback(() => {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+    const ws = new WebSocket(`${protocol}//${window.location.host}/dev/ws`);
     wsRef.current = ws;
 
     ws.onopen = () => {

packages/core/dev-ui/src/hooks/useDeploy.ts

@@ -21,7 +21,7 @@ export function useDeploy() {
   // Fetch deploy URL and freshness on mount, then poll every 30s
   useEffect(() => {
     const check = () => {
-      fetch("/api/deploy")
+      fetch("/dev/api/deploy")
         .then((r) => r.json() as Promise<{ deployed: boolean; url?: string; freshness?: DeployFreshness }>)
         .then((data) => {
           if (data.deployed && data.url) {
@@ -40,7 +40,7 @@ export function useDeploy() {
     setState({ status: "deploying", message: "Starting deploy..." });
 
     try {
-      const res = await fetch("/api/deploy", { method: "POST" });
+      const res = await fetch("/dev/api/deploy", { method: "POST" });
 
       if (!res.ok) {
         setState({ status: "error", error: `Deploy request failed (HTTP ${res.status})` });