# Juli-Fone 850 — Answering Machine Prototype A retro-styled interactive answering machine demo: a Nuxt 4 single-page app (`ssr: false`) that draws a 402×874 machine and behaves like the object rather than like a web page. It began as one 4,100-line `index.html` of React transpiled in the browser; that build was ported to this one and deleted, and git history is where it lives now. See "How the app is put together" below. --- ## Running the app ```bash pnpm install pnpm dev ``` `install` matters the first time in a fresh worktree, and often not even then — `.worktreeinclude` copies `node_modules` into a new one. `pnpm dev` takes no port. It serves on **this worktree's slot** (3456 for the main checkout — see the table below), refuses rather than sliding if the slot is taken, and prints the directory it's serving with the URL it chose. Pass `--port 3461` to override it, or `--host` as well to reach it from the iPad on the same WiFi — layout only, since the mic needs a secure context and a plain-http LAN address isn't one. --- ## Worktrees and ports Work happens in **git worktrees**, one per task, so several versions of the machine can be served at once and compared side by side in a browser. Each worktree gets its own port — a *slot* — and the slot is written into the directory name so nothing has to be looked up: | worktree directory | slot | port | launch.json config | | ----------------------- | ---- | ---- | ------------------ | | `answeringmachine` | 1 | 3456 | `slot-1-main` | | `answeringmachine-2` | 2 | 3457 | `slot-2` | | `answeringmachine-3` | 3 | 3458 | `slot-3` | | `answeringmachine-4` | 4 | 3459 | `slot-4` | Create one next to the main checkout, taking the lowest free slot: ```bash git worktree add ../answeringmachine-2 -b some-task ``` Then in that directory, `pnpm dev` needs no argument — `scripts/dev.mjs` reads the slot off the directory name (`-2` → 3457) and prints the URL it picked, along with the directory it's serving, so two terminals are never confused for each other. The main checkout has no suffix and gets 3456. An explicit `pnpm dev --port 3461` or `AM_PORT=3461 pnpm dev` still wins over both. The port is deliberately **not** auto-negotiated. If a slot is taken the server refuses to start and says so, rather than quietly sliding to another port — sliding would leave the browser pointed at a *different* worktree's app, which looks like your change didn't work. Four slots is the roster; a fifth simultaneous worktree needs a row added to the table and to `.claude/launch.json`. That refusal is `scripts/dev.mjs`, not Nuxt. `nuxt dev --port 3456` will happily bind `127.0.0.1:3456` next to another process holding `*:3456` — both servers "up", and the browser gets whichever one it resolves first — and when it can't bind at all it takes a *random* port instead. The script connects to the port first, which is the only check that sees the first case, and exits with the collision message. It's the one piece of the old `server.py` that was worth keeping. Each worktree is a full checkout of the same repo, so all of it works unchanged: audio, fonts, the stickers. Per-directory are `node_modules` (copied in by `.worktreeinclude`), the ignored `.nuxt/` and `.output/` build directories, `.claude/settings.local.json`, and the ignored `firmware/` paths. A worktree created by Claude Code sits under `.claude/worktrees/` inside the main checkout rather than beside it, so that path is gitignored — otherwise every other session's copy of the app shows up as untracked files in this one. When a task in a worktree is done, it gets merged back into the main worktree and the worktree is removed: ```bash git worktree remove ../answeringmachine-2 git branch -d some-task ``` --- ## File structure ``` nuxt.config.ts — ssr:false, the two global stylesheets, and the : title, viewport, and the one Google Fonts link package.json — nuxt / vue / vue-router, and nothing else scripts/dev.mjs — what `pnpm dev` runs: picks this worktree's port, refuses a taken one, prints what it's serving, then starts Nuxt .claude/launch.json — one dev-server config per slot, so a session in a worktree starts on that worktree's port .worktreeinclude — untracked paths a new worktree gets its own copy of, as gitignore-style globs. Just `node_modules` — 250M of pnpm tree that a new worktree would otherwise have to install README.md — this file app/ app.vue — one route, mounted through pages/index.vue — the frame: chassis, screen body, nav, and every modal and sheet that sits over them components/ — 28 SFCs. The cassette (Cassette + ShellArt, HubAssembly, AnimatedName, ShellSwatch, TapeSlot, TapeSpine, GhostTape), the three screens, TapeCustomiser and the page that hosts it, the modals and sheets, and the onboarding flow's five composables/ useMachine.js — the machine's whole state, its refs and every handler utils/ tape-parts.js — Kat's cassette, data half: the four part maps, the sticker list and the geometry. The artwork is the components above and the stylesheet below data.js — FRIENDS, MESSAGES, RADIO_SESSIONS, ME, TAPE_W, REC_PROMPTS helpers.js — the pure functions (fmtSecs, the two date helpers withMeta derives a row from, copyText, inviteFromLink, obMakeInvite …) onboarding.js — the flow's two constants assets/css/ tape-parts.css — the cassette's own styles, and the @font-face rules for the four label faces in public/fonts main.css — everything else: the machine, all three screens, the customiser page and the onboarding flow public/ — everything fetched by URL at runtime, which is why these paths are plain strings in the code rather than imports fonts/ — pencil / blocky / script / brush .otf, the tape faces that aren't on Google Fonts assets/stickers/ — the twelve glitter stickers, drawn onto a tape when it carries them, plus `unreadmessages-sticker.png`, the word sticker the machine's own tape wears instead of a name assets/labels/ — the six printed label stocks, Kat's files under Kat's names (label1…label6), each a seamless tile. The name carries the ink the artwork was drawn to take — `label3_whitetext`, `label5_whitetextblackstroke` — and LABEL_DESIGNS is the only place the files are named. `glitterswatch.png` sits beside them as a seventh stock, the machine tape's only, and is the one file here that ISN'T seamless — hence its 200% scale, which keeps the single seam under the sticker assets/machine.png — the photograph on the onboarding intro Leeheng.m4a — home voicemail from Leeheng Tony.m4a — home voicemail from Tony W celine.m4a — home voicemail from Celine alex.m4a — unused: Alex isn't a friend, so he has no tape. Kept on disk Patrik habit.m4a — unused: answered the old "worst habit" prompt, which the Jenny habit.m4a sentimental prompts replaced. Kept on disk like alex.m4a; Tony habit.m4a RADIO_SESSIONS no longer names any response audio BEEP.mp3 — plays when user selects a contact to leave a message for, and when user taps Record on the radio tab REWIND.mp3 — plays as intro before the radio show begins ``` Two files that used to be here are gone, deleted with the React build they ran on: `prototype-hybrid-tape.html`, the cassette sandbox that drew every part at every size on one screen, and `prototype-onboarding.html`, where the sign-up flow was designed. The flow has a real home now — `Onboarding.vue` and its four steps — but **the cassette sandbox has no successor**, and it was where a change to the part maps got looked at. It would come back as a route (`/tape-sandbox`) in about forty lines if that's wanted. --- ## How the app is put together Nuxt 4, Vue 3, `ssr: false` — a client-side SPA, because the machine opens the mic, holds object URLs, measures its own boxes and keeps no storage, none of which has a server half. It's a port of a single 4,100-line `index.html` (React, transpiled in the browser by Babel), and the port's whole rule was that nothing about the design, the layout or the flow changed on the way across: the two were compared screen by screen in a browser before the old one was deleted. That's why the sections below explain Vue in terms of the React they replaced — those notes are the map for anyone reading a commit from before the port, and `git log -- index.html` is where it is. **The CSS was moved, not rewritten.** `app/assets/css/main.css` was `index.html`'s `