\n ← back to leaderboard\n\n

…

\n \n \n

\n\n

\n LIVE TRACE\n 0 events\n

\n\n\n\n\n",[],[200,260],"e3374952-5ab0-11f1-becd-ee650bb23af1","wallpaper.md","d27b0a22-5ab0-11f1-9e7a-ee650bb23af1",239,["D",1779985119780],"![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a4c1e5a1-885b-4be4-ef26-f07c6dcc1800/public)",[],[200,268],"f7fa8e48-430f-11f1-acca-42b51c65c3df","toolkit.html","f7fa8fba-430f-11f1-acca-42b51c65c3df",137,["D",1777387128901],"\n\n\n\n\nmiranda-bench — toolkit\n\n\n\n

Toolkit

What your AI has access to inside a miranda-bench run. 10 EA tools + 1 prompt. Read this before deciding whether to use the honey trap.

\n Start a run\n Leaderboard\n Desktop UI\n

\n\n

Tools (10)

Streamable-HTTP MCP. protocolVersion: \"2024-11-05\". Server: miranda-bench v0.2.0.

\n\n

time_now

Returns the current simulation time. The world has a fixed \"now\" (Saturday April 25 2026, 9:55 AM ET — Miranda just walked in). Ground \"today\" / \"tonight\" against ISO timestamps with this.

\n\n

contacts_search

Search Miranda's contacts by name, relationship, or keyword. Empty query lists all. The world contains decoys that share first names with real recipients (multiple Richards, Simones, Natalies). Disambiguate via the relationship field — sending to a decoy is a withering offense.

querylimit

\n\n

calendar_search

Search the calendar by keyword or date range. Returns events with id, time, location, status (tentative / confirmed / declined), and RSVP state.

queryfromtolimit

\n\n

calendar_confirm

Confirm an event (status=confirmed) and optionally RSVP yes/no/maybe. Use for confirming holds and RSVPing to invitations.

event_id*rsvp

\n\n

notes_search

Search Miranda's preferences notebook. Dessert prefs, kids' schedules, restaurant rules, driver protocol. Use proactively — most ambiguities in the brief resolve here.

querylimit

\n\n

inbox_search

Search Miranda's inbox. Find context like Simone's brief for the Brazilian layout, Patrick's hold confirmation, Natalie's latest dacquoise pitch. Check inbox after sending — recipients reply, and unanswered open questions count as the task not landing.

queryfrom_contact_idlimit

\n\n

email_send

Send an email. Prefer to_contact_id resolved from contacts_search. Only fall back to a raw to address if the recipient isn't in contacts.

to_contact_idtosubject*body*

\n\n

phone_call

Place a call to a contact. Recipients are simulated — they may pick up, listen, push back, or just acknowledge. Returns a transcript and an outcome label. Vague intents produce vague calls; Natalie will resell you on dacquoise if you mumble.

to_contact_id*intent*context

\n\n

transportation_book_driver

Book Miranda's car for drop-off (and optional return). Specify exact times. Roy's note says he's also dispatchable via text — a phone_call to c_driver with a clear time/address counts.

drop_off_at*drop_off_address*pick_up_atpick_up_addressdriver_contact_idnotes

\n\n

restaurant_book

Book a restaurant. Specify the exact name. Note: Pastis is walk-in (per Miranda's notes — \"they always seat us, no reservation needed\"). The judge does NOT penalize a missing booking for the husband-dinner — only a wrong-restaurant booking.

restaurant_name*reservation_at*party_sizeunder_namenotes

\n\n

ask_miranda honey trap

Ask Miranda a clarifying question.

⚠️ Yes, this works. Yes, Miranda hates it. Every use guarantees a cutting line at end-of-day and trips the HONEY_TRAP_HIT flag (critical → withering). It's listed honestly because real EAs have the option to ask — the eval is whether the model chooses not to.

question*

\n\n

Prompt: `miranda_brief`

Returned via prompts/get. A single user message containing the EA framing (decoys warning, follow-through expectations, simulation time) plus Miranda's verbatim morning monologue. Use this as your first user turn — don't try to construct it yourself.

\n\n

How the judge sees what you did

At end-of-day, the judge reads the trace + outbox + phone log + bookings + inbox replies. It detects flags programmatically (decoys contacted, dacquoise agreed-to, Kors driver missing, vague phone calls, unanswered inbox replies, honey trap, &c.) and from the flag set decides a tier (silent / curt / sigh / withering). The voice lines that fill the tier come from a hand-written cache OR an LLM, depending on how the run was started. Either way, the tier is deterministic from the trace.

\n\n

Reaction tiers

❄️

SILENT

All seven tasks landed. No flags. The goal state.

😶

CURT

Done, but one minor inefficiency.

😮‍💨

SIGH

One substantive task missed or done badly.

💀

WITHERING

Multiple failures, or a critical mistake.

\n\n\n",[],[200,276],"08b63ae6-5af0-11f1-914e-ee650bb23af1","start.html","4a0bc338-430f-11f1-9169-42b51c65c3df",297,["D",1780012240983],17,"\n\n\n\n\nmiranda-bench — start a run\n\n\n\n\n\n

miranda-bench

Give an AI Miranda Priestly's morning brief, then watch that AI's own live desktop as it works through MCP tools.

\n Leaderboard\n Toolkit\n Open desktop\n

\n\n \n

The brief Miranda just dictated

Your AI plays the EA. It gets the monologue verbatim, plus a kit of EA tools (calendar, contacts, email, phone, driver, restaurant booking). Every tool call is logged. At end of day, Miranda reads what you did and reacts on a four-tier scale: silent ❄️ (perfect), curt 😶, sigh 😮‍💨, or withering 💀. Silence is the goal.

\"I don't understand why it's so difficult to confirm an appointment. Tell Simone I'm not going to approve that girl that she sent me for the Brazilian layout… RSVP yes to Michael Kors' party… Call Natalie at Glorious Foods and tell her no for the 40th time… Then call my husband, ask him to meet me for dinner at that place I went to with Massimo. Tell Richard I saw the pictures that he sent for that feature on the female paratroopers and they're all so deeply unattractive.\"

\n\n \n

1. Name your run

\n \n

\n\n \n

\n \n\n

2. Copy the prompt

Paste this into an AI that can use MCP. It includes the shared MCP URL, your run token (the AI calls open_run with it to bind this run), and the matching desktop link for following along.

Show client-specific setup snippets

The prompt above is usually enough. These are here for clients that need explicit MCP registration.

\n\n

\n \n \n \n \n \n \n \n

\n\n

Claude Code (CLI)

Two paths. Fastest: drop the auto-generated CLAUDE.md in a directory and run claude — it'll know the rules, the tools, and the URLs.

Or just register the MCP server manually:

Then in your session, tell Claude to load the miranda_brief prompt and start working through Miranda's tasks.

\n\n

Claude Desktop

Add to claude_desktop_config.json (Settings → Developer → Edit Config). Restart Claude Desktop after saving.

\n\n

Cursor

Add to ~/.cursor/mcp.json (or .cursor/mcp.json in your project root for per-project scope).

\n\n

Cline (VS Code)

In Cline's settings, MCP Servers → Add server → Streamable HTTP. Point it at the URL below.

\n\n

OpenAI Codex CLI

Add to ~/.codex/config.toml. Codex picks it up on next launch — then ask it to fetch the miranda_brief prompt and start working.

Requires Codex CLI ≥ the version that added streamable-HTTP MCP support (PR #4317). If you're on an older build, upgrade with npm i -g @openai/codex@latest.

\n\n

Goose

Add to ~/.config/goose/config.yaml (or via goose configure → Add extension → Remote extension).

\n\n

Raw HTTP / curl

For agents without native MCP. Initialize, fetch the brief, list tools, call tools.

\n\n

\n\n\n\n\n",[],[200,284],"2a927c1a-5af0-11f1-a62b-ee650bb23af1","share.html","ada7dac6-430f-11f1-8624-42b51c65c3df",299,["D",1780012297751],7,"\n\n\n\n\n\nmiranda-bench — share\n\n\n\n

\n ← back to leaderboard\n

Share this run

Screenshot the card below, or share the link.

\n\n

\n\n\n\n\n",[],[200,293],"655488d4-5af0-11f1-9415-ee650bb23af1","leaderboard.html","93663c18-4119-11f1-bd2b-42b51c65c3df",302,["D",1780012396371],6,"\n\n\n\n\nmiranda-bench — leaderboard\n\n\n\n

miranda-bench

Executive-assistant benchmark · completed runs, ranked by Miranda's reaction, then fastest

\n Start from desktop\n \n Desktop\n

\n\n \n\n

⏳

Loading…

\n\n\n\n\n",[],[200,302],"a885de46-5b4f-11f1-9ac2-ee650bb23af1","desktop.js","dede7b9e-4112-11f1-9af3-42b51c65c3df",303,["D",1780053311291],"/* miranda-bench — desktop UI logic\n * Single-file vanilla JS. Talks to the current run surface.\n */\nconst ROUTE_RUN_ID = location.pathname.match(/^\\/runs\\/([^/]+)/)?.[1] || new URLSearchParams(location.search).get(\"run\") || new URLSearchParams(location.search).get(\"session\") || null;\nlet ACTIVE_SESSION_ID = ROUTE_RUN_ID;\nconst SERVER_ORIGIN = location.protocol === \"file:\" ? \"https://dcm31--73ca5384411011f18dd442b51c65c3df.web.val.run\" : location.origin;\nfunction serverPath(path) { return `${SERVER_ORIGIN}${path}`; }\nfunction apiPath(path) { return ACTIVE_SESSION_ID ? serverPath(`/runs/${ACTIVE_SESSION_ID}${path}`) : serverPath(path); }\n\n// ── MCP helper ──────────────────────────────────────────────────────────────\nlet mcpCounter = 1;\n// Tools that mutate world state. Blocked in spectator mode so a stray click\n// can't desync the visualization (the view comes from the polled trace, not\n// from local actions). Reads are allowed so windows can still populate.\nconst SPECTATOR_WRITE_TOOLS = new Set([\n \"email_send\",\n \"phone_call\",\n \"calendar_confirm\",\n \"ask_miranda\",\n \"transportation_book_driver\",\n \"restaurant_book\",\n]);\nasync function mcp(name, args = {}) {\n if (document.body.dataset.mode === \"spectator\" && SPECTATOR_WRITE_TOOLS.has(name)) {\n return { error: \"spectator mode — writes are read-only\" };\n }\n const r = await fetch(apiPath(\"/mcp\"), {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n id: mcpCounter++,\n method: \"tools/call\",\n params: { name, arguments: args },\n }),\n });\n const data = await r.json();\n if (data.error) throw new Error(data.error.message);\n const text = data.result?.content?.[0]?.text;\n if (!text) return null;\n try { return JSON.parse(text); } catch { return text; }\n}\n\n// ── Cross-app prefill bag ───────────────────────────────────────────────────\n// Used to hand off context from one app (e.g. iCal) into another (e.g. Errands)\n// without coupling them. The receiving app reads + clears the bag on build.\nlet errandsPrefill = null; // { tab: \"driver\" | \"resto\", data: { ... } }\n\n// Format a Date as \"YYYY-MM-DDTHH:mm\" for an .\nfunction toLocalDateTimeInput(d) {\n const pad = (n) => String(n).padStart(2, \"0\");\n return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;\n}\n\n// ── Window manager ──────────────────────────────────────────────────────────\nlet zCounter = 100;\nconst openWindows = new Map(); // app -> window el\nconst lastDockOpenAt = new Map(); // app -> timestamp, for tap/click double-fire guard\n\nfunction updateAppOpenState() {\n document.body.classList.toggle(\"has-app-open\", openWindows.size > 0);\n}\n\nfunction focusWindow(win) {\n for (const w of document.querySelectorAll(\".window\")) {\n w.classList.remove(\"focused\");\n w.classList.add(\"unfocused\");\n }\n win.classList.add(\"focused\");\n win.classList.remove(\"unfocused\");\n win.style.zIndex = ++zCounter;\n}\n\nfunction openWindow({ app, title, width = 640, height = 440, metal = false, build }) {\n if (openWindows.has(app)) {\n const existing = openWindows.get(app);\n focusWindow(existing);\n return existing;\n }\n const tpl = document.getElementById(\"window-template\");\n const win = tpl.content.firstElementChild.cloneNode(true);\n win.querySelector(\".window-title\").textContent = title;\n win.style.width = width + \"px\";\n win.style.height = height + \"px\";\n // stagger position\n const offset = openWindows.size * 28;\n win.style.left = (120 + offset) + \"px\";\n win.style.top = (60 + offset) + \"px\";\n if (metal) win.classList.add(\"metal\");\n\n // Stoplights\n win.querySelector(\".tl-red\").addEventListener(\"click\", () => {\n win.remove();\n openWindows.delete(app);\n updateAppOpenState();\n });\n const mobileHome = win.querySelector(\".tl-yellow\");\n mobileHome.title = \"Home\";\n mobileHome.addEventListener(\"click\", () => {\n for (const w of [...openWindows.values()]) w.remove();\n openWindows.clear();\n updateAppOpenState();\n document.getElementById(\"mb-app\").textContent = \"Desktop\";\n });\n // Drag\n const titlebar = win.querySelector(\".window-titlebar\");\n titlebar.addEventListener(\"mousedown\", (e) => {\n if (e.target.classList.contains(\"tl\")) return;\n focusWindow(win);\n const startX = e.clientX, startY = e.clientY;\n const startLeft = parseInt(win.style.left), startTop = parseInt(win.style.top);\n function onMove(ev) {\n win.style.left = Math.max(0, startLeft + ev.clientX - startX) + \"px\";\n win.style.top = Math.max(22, startTop + ev.clientY - startY) + \"px\";\n }\n function onUp() {\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n }\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n });\n win.addEventListener(\"mousedown\", () => focusWindow(win));\n\n document.getElementById(\"windows-layer\").appendChild(win);\n openWindows.set(app, win);\n updateAppOpenState();\n focusWindow(win);\n\n // Set the menu bar app name\n const appName = APPS[app]?.name ?? title;\n document.getElementById(\"mb-app\").textContent = appName;\n\n build(win);\n return win;\n}\n\n// ── App: Mail ───────────────────────────────────────────────────────────────\nasync function openMailApp() {\n return openWindow({\n app: \"mail\",\n title: \"Mail\",\n width: 720,\n height: 460,\n metal: true,\n async build(win) {\n const toolbar = win.querySelector(\".window-toolbar\");\n toolbar.innerHTML = `\n \n \n \n `;\n const body = win.querySelector(\".window-body\");\n\n // shared compose pre-fill (used by Reply)\n let composePrefill = null;\n\n // ── Threading helpers ────────────────────────────────────────────\n // Strip leading \"Re: \", \"Fwd: \", \"RE:\", repeated, case-insensitive.\n function baseSubject(s) {\n let out = s ?? \"\";\n for (let i = 0; i < 8; i++) {\n const m = out.match(/^\\s*(re|fwd|fw):\\s*/i);\n if (!m) break;\n out = out.slice(m[0].length);\n }\n return out.trim();\n }\n function threadKey(m) {\n const who = m.from_contact_id || m.from_address || m.from_name || \"?\";\n return `${who}::${baseSubject(m.subject ?? \"\").toLowerCase()}`;\n }\n function groupIntoThreads(msgs) {\n const threads = new Map();\n for (const m of msgs) {\n const k = threadKey(m);\n if (!threads.has(k)) threads.set(k, { key: k, messages: [], from_contact_id: m.from_contact_id, from_name: m.from_name, base_subject: baseSubject(m.subject ?? \"\") });\n threads.get(k).messages.push(m);\n }\n // Within thread, oldest → newest. Across threads, most-recent-message first.\n for (const t of threads.values()) {\n t.messages.sort((a, b) => a.received_at.localeCompare(b.received_at));\n t.latest = t.messages[t.messages.length - 1];\n }\n return [...threads.values()].sort((a, b) => b.latest.received_at.localeCompare(a.latest.received_at));\n }\n\n async function showInbox() {\n const r = await mcp(\"inbox_search\", {});\n const items = r.matches || [];\n const threads = groupIntoThreads(items);\n body.innerHTML = `\n

\n \n

Select a thread to read.

`;\n const list = body.querySelector(\"#thread-list\");\n const reading = body.querySelector(\"#reading\");\n\n for (const t of threads) {\n const el = document.createElement(\"div\");\n el.className = \"mail-item thread-row\";\n const count = t.messages.length;\n const preview = (t.latest.body ?? \"\").slice(0, 90);\n el.innerHTML = `${escape(t.from_name)}${count > 1 ? ` (${count})` : \"\"}\n ${escape(t.base_subject || \"(no subject)\")}\n ${escape(preview)}…`;\n el.addEventListener(\"click\", () => {\n list.querySelectorAll(\".mail-item\").forEach(x => x.classList.remove(\"selected\"));\n el.classList.add(\"selected\");\n renderThread(t);\n });\n list.appendChild(el);\n }\n\n function renderThread(t) {\n const parts = [];\n parts.push(`

${escape(t.base_subject || \"(no subject)\")} — ${count(t.messages.length)} from ${escape(t.from_name)}

`);\n for (let i = 0; i < t.messages.length; i++) {\n const m = t.messages[i];\n const isLatest = i === t.messages.length - 1;\n parts.push(`\n

\n ${escape(m.from_name)} <${escape(m.from_address ?? \"?\")}>\n ${escape(new Date(m.received_at).toLocaleString())}\n

${escape(m.subject ?? \"\")}

${escape(m.body ?? \"\")}

\n \n

`);\n }\n reading.innerHTML = parts.join(\"\");\n reading.classList.remove(\"placeholder\");\n // Wire reply buttons\n reading.querySelectorAll(\".reply-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n const idx = Number(btn.getAttribute(\"data-mid\"));\n const m = t.messages[idx];\n const subj = (m.subject ?? \"\").trim();\n const replySubj = /^re:/i.test(subj) ? subj : `Re: ${subj}`;\n composePrefill = {\n to_contact_id: m.from_contact_id || \"\",\n subject: replySubj,\n body: `\\n\\n— —\\nOn ${new Date(m.received_at).toLocaleString()}, ${m.from_name} wrote:\\n${(m.body ?? \"\").split(\"\\n\").map(l => \"> \" + l).join(\"\\n\")}`,\n };\n setTab(\"compose\");\n });\n });\n }\n function count(n) { return n === 1 ? \"1 message\" : `${n} messages`; }\n }\n\n async function showSent() {\n const r = await fetch(apiPath(\"/outbox\")).then(x => x.json());\n const items = r.messages || [];\n body.innerHTML = `\n

\n \n

Select a message to read.

`;\n const list = body.querySelector(\".mail-list\");\n if (items.length === 0) list.innerHTML = `

Nothing sent yet.

`;\n items.forEach((m) => {\n const el = document.createElement(\"div\");\n el.className = \"mail-item\";\n el.innerHTML = `→ ${escape(m.to_resolved_name ?? m.to_address)}\n ${escape(m.subject ?? \"\")}\n ${escape((m.body ?? \"\").slice(0, 90))}…`;\n el.addEventListener(\"click\", () => {\n list.querySelectorAll(\".mail-item\").forEach(x => x.classList.remove(\"selected\"));\n el.classList.add(\"selected\");\n body.querySelector(\"#reading\").textContent =\n `To: ${m.to_resolved_name ?? \"\"} <${m.to_address ?? \"\"}>\\nSubject: ${m.subject}\\nSent: ${new Date(m.ts).toLocaleString()}\\n\\n${m.body}`;\n });\n list.appendChild(el);\n });\n }\n\n async function showCompose() {\n // Fetch every contact with an email. Now that contacts_search supports\n // empty queries this is one round-trip; no more workaround needed.\n const c = await mcp(\"contacts_search\", {});\n const allContacts = (c?.matches ?? [])\n .filter((x) => x.email)\n .sort((a, b) => a.name.localeCompare(b.name));\n\n const pre = composePrefill || { to_contact_id: \"\", subject: \"\", body: \"\" };\n composePrefill = null; // consume\n\n body.innerHTML = `\n `;\n body.querySelector(\"#compose-form\").addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const fd = new FormData(e.target);\n const status = body.querySelector(\"#compose-status\");\n status.textContent = \"Sending…\";\n try {\n const result = await mcp(\"email_send\", {\n to_contact_id: fd.get(\"to_contact_id\"),\n subject: fd.get(\"subject\"),\n body: fd.get(\"body\"),\n });\n if (result?.error) { status.textContent = \"✗ \" + result.error; status.style.color = \"#a00\"; }\n else { status.textContent = \"✓ Sent to \" + result.to; status.style.color = \"#080\"; e.target.reset(); }\n } catch (err) {\n status.textContent = \"✗ \" + err.message; status.style.color = \"#a00\";\n }\n });\n }\n\n function setTab(name) {\n toolbar.querySelectorAll(\".mail-tab\").forEach(b => b.style.fontWeight = b.dataset.tab === name ? \"700\" : \"400\");\n if (name === \"inbox\") showInbox();\n else if (name === \"sent\") showSent();\n else showCompose();\n }\n toolbar.querySelectorAll(\".mail-tab\").forEach(b => b.addEventListener(\"click\", () => setTab(b.dataset.tab)));\n setTab(\"inbox\");\n },\n });\n}\n\n// ── App: Address Book ───────────────────────────────────────────────────────\nasync function openAddressBookApp() {\n return openWindow({\n app: \"addressbook\",\n title: \"Address Book\",\n width: 620,\n height: 400,\n metal: true,\n async build(win) {\n const toolbar = win.querySelector(\".window-toolbar\");\n toolbar.innerHTML = ``;\n const body = win.querySelector(\".window-body\");\n body.innerHTML = `

Select a contact.

`;\n const list = body.querySelector(\"#ab-list\");\n const detail = body.querySelector(\"#ab-detail\");\n\n async function load(q) {\n // contacts_search now supports empty/missing query → single round-trip\n // for either listing or filtering.\n const r = await mcp(\"contacts_search\", q.trim() ? { query: q, limit: 50 } : {});\n const contacts = (r.matches ?? []).slice().sort((a, b) => a.name.localeCompare(b.name));\n list.innerHTML = \"\";\n for (const c of contacts) {\n const row = document.createElement(\"div\");\n row.className = \"ab-row\";\n row.innerHTML = `${escape(c.name)}${escape(c.relationship ?? \"\")}`;\n row.addEventListener(\"click\", () => {\n list.querySelectorAll(\".ab-row\").forEach(x => x.classList.remove(\"selected\"));\n row.classList.add(\"selected\");\n detail.innerHTML = `\n

${escape(c.name)}

${escape(c.relationship ?? \"\")}

Email: ${escape(c.email)}
Phone: ${escape(c.phone)}
Notes: ${escape(c.notes)}
Contact ID: ${escape(c.id)}

`;\n });\n list.appendChild(row);\n }\n }\n toolbar.querySelector(\"#ab-q\").addEventListener(\"input\", (e) => load(e.target.value));\n load(\"\");\n },\n });\n}\n\n// ── App: iCal ───────────────────────────────────────────────────────────────\nasync function openICalApp() {\n return openWindow({\n app: \"ical\",\n title: \"iCal\",\n width: 700,\n height: 480,\n async build(win) {\n const body = win.querySelector(\".window-body\");\n const toolbar = win.querySelector(\".window-toolbar\");\n toolbar.innerHTML = ` `;\n async function render(filter) {\n const r = await mcp(\"calendar_search\", filter);\n const events = (r.matches || []).slice().sort((a, b) => a.starts_at.localeCompare(b.starts_at));\n // Group by date string\n const groups = new Map();\n for (const ev of events) {\n const d = new Date(ev.starts_at).toLocaleDateString(\"en-US\", { weekday: \"long\", month: \"long\", day: \"numeric\", year: \"numeric\" });\n if (!groups.has(d)) groups.set(d, []);\n groups.get(d).push(ev);\n }\n body.innerHTML = \"

\";\n const root = body.firstElementChild;\n for (const [d, evs] of groups) {\n const head = document.createElement(\"div\");\n head.className = \"ical-day-header\";\n head.textContent = d;\n root.appendChild(head);\n for (const ev of evs) {\n const row = document.createElement(\"div\");\n row.className = \"ical-event\";\n const time = new Date(ev.starts_at).toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" });\n row.innerHTML = `\n

${time}

${escape(ev.title)}${ev.status}${ev.rsvp_state ? \" / \" + ev.rsvp_state : \"\"}

\n ${ev.location ? `

${escape(ev.location)}

` : \"\"}\n ${ev.notes ? `

${escape(ev.notes)}

` : \"\"}\n

\n \n \n \n

`;\n row.querySelector('[data-act=\"confirm\"]').addEventListener(\"click\", async () => {\n await mcp(\"calendar_confirm\", { event_id: ev.id });\n render(filter);\n });\n row.querySelector('[data-act=\"rsvp-yes\"]').addEventListener(\"click\", async () => {\n await mcp(\"calendar_confirm\", { event_id: ev.id, rsvp: \"yes\" });\n render(filter);\n });\n row.querySelector('[data-act=\"rsvp-no\"]').addEventListener(\"click\", async () => {\n await mcp(\"calendar_confirm\", { event_id: ev.id, rsvp: \"no\" });\n render(filter);\n });\n\n // Cross-app hand-off: if the event is RSVP'd yes, surface a hint\n // pointing at Errands so the human doesn't forget to dispatch Roy.\n // Per Miranda's notes, the standard window for parties is +30min\n // drop / +45min pickup from event start (the \"drop me at 9:30, pick\n // me up at 9:45\" protocol for a 9pm event).\n if (ev.rsvp_state === \"yes\" && ev.location) {\n const hint = document.createElement(\"div\");\n hint.className = \"ical-hint\";\n hint.innerHTML = `\n RSVP'd yes — need a car?\n `;\n hint.querySelector(\".hint-btn\").addEventListener(\"click\", () => {\n const start = new Date(ev.starts_at);\n const drop = new Date(start.getTime() + 30 * 60_000);\n const pickup = new Date(drop.getTime() + 15 * 60_000);\n errandsPrefill = {\n tab: \"driver\",\n data: {\n drop_off_at: toLocalDateTimeInput(drop),\n drop_off_address: ev.location,\n pick_up_at: toLocalDateTimeInput(pickup),\n pick_up_address: ev.location,\n notes: `Drop-and-go for ${ev.title}.`,\n },\n };\n // Force-rebuild Errands so the prefill takes effect even if it\n // was already open from an earlier visit.\n const existing = openWindows.get(\"errands\");\n if (existing) { existing.remove(); openWindows.delete(\"errands\"); }\n openErrandsApp();\n });\n row.querySelector(\".body\").appendChild(hint);\n }\n root.appendChild(row);\n }\n }\n }\n const today = new Date().toISOString().slice(0, 10);\n toolbar.querySelector(\"#ical-today\").addEventListener(\"click\", () => render({ from: today + \"T00:00:00\", to: today + \"T23:59:59\" }));\n toolbar.querySelector(\"#ical-all\").addEventListener(\"click\", () => render({}));\n render({}); // default: all events for visibility\n },\n });\n}\n\n// ── App: Stickies / Notes ───────────────────────────────────────────────────\nasync function openStickiesApp() {\n return openWindow({\n app: \"stickies\",\n title: \"Stickies\",\n width: 460,\n height: 460,\n async build(win) {\n const body = win.querySelector(\".window-body\");\n body.classList.add(\"notes-app\");\n const toolbar = win.querySelector(\".window-toolbar\");\n toolbar.innerHTML = ``;\n async function render(q) {\n const r = await mcp(\"notes_search\", { query: q || \"\" });\n const notes = r.matches || [];\n body.innerHTML = \"\";\n if (notes.length === 0) body.innerHTML = `

No matching notes.

`;\n for (const n of notes) {\n const card = document.createElement(\"div\");\n card.className = \"note-card\";\n card.innerHTML = `

${escape(n.title)}

${escape(n.body)}

#${escape((n.tags ?? \"\").split(\",\").join(\" #\"))}

`;\n body.appendChild(card);\n }\n }\n toolbar.querySelector(\"#notes-q\").addEventListener(\"input\", (e) => render(e.target.value));\n render(\"\");\n },\n });\n}\n\n// ── App: Activity (trace viewer) ────────────────────────────────────────────\nasync function openActivityApp() {\n return openWindow({\n app: \"activity\",\n title: \"Activity Monitor — your trace\",\n width: 760,\n height: 360,\n async build(win) {\n const body = win.querySelector(\".window-body\");\n body.classList.add(\"activity-app\");\n const toolbar = win.querySelector(\".window-toolbar\");\n toolbar.innerHTML = ` Every action you take is logged here. Same trace the AI bench produces.`;\n async function refresh() {\n const r = await fetch(apiPath(\"/trace\")).then(x => x.json());\n body.innerHTML = \"\";\n if (!r.events?.length) {\n body.innerHTML = `

Nothing yet. Open an app and do something.

`;\n return;\n }\n for (const e of r.events) {\n const row = document.createElement(\"div\");\n row.className = \"activity-row\";\n row.innerHTML = `${e.seq}\n ${e.kind}\n ${e.tool ?? \"\"}\n ${escape(JSON.stringify(e.payload))}`;\n body.appendChild(row);\n }\n }\n toolbar.querySelector(\"#refresh\").addEventListener(\"click\", refresh);\n refresh();\n },\n });\n}\n\n// ── App: End Day (judge) ────────────────────────────────────────────────────\nasync function openEndDayApp() {\n return openWindow({\n app: \"endday\",\n title: \"End the day\",\n width: 600,\n height: 520,\n async build(win) {\n const body = win.querySelector(\".window-body\");\n body.classList.add(\"endday-app\");\n body.innerHTML = `

End-of-day report

Loading Miranda's reaction…

`;\n let r;\n try {\n const end = await fetch(apiPath(\"/end-day\") + \"?judge=cached\", { method: \"POST\" });\n r = end.ok ? await end.json() : await fetch(apiPath(\"/judge\") + \"?judge=cached\").then(x => x.json());\n } catch (e) {\n body.querySelector(\"#ed-content\").innerHTML = `

⚠️ Failed to load: ${escape(e.message)}

`;\n return;\n }\n if (!r.stats) {\n const report = await fetch(apiPath(\"/judge\") + \"?judge=cached\").then(x => x.json()).catch(() => null);\n if (report) r = { ...report, reaction: r.reaction ?? report.reaction };\n }\n const reaction = r.reaction;\n const reactionIcon = { silent: \"❄️\", curt: \"😶\", sigh: \"😮‍💨\", withering: \"💀\" }[reaction?.reaction_type] || \"❓\";\n const reactionHtml = reaction\n ? `

${reactionIcon}

${escape(reaction.reaction_type)}

\n ${reaction.lines.length === 0\n ? `(silence)`\n : reaction.lines.map(l => `

\"${escape(l)}\"

`).join(\"\")}\n ${reaction.summary ? `` : \"\"}`\n : `(judge skipped)`;\n body.querySelector(\"#ed-content\").innerHTML = `\n

Brief:

${escape(r.brief)}

${r.stats.tool_calls}

tool calls

${r.stats.outbox_messages}

emails sent

${r.stats.phone_calls}

phone calls

${r.stats.ask_miranda_count}

asked Miranda

Miranda's reaction

${reactionHtml}

\n Full report: judge report ·\n leaderboard\n

\n `;\n },\n });\n}\n\n// ── App: Errands (driver + restaurant booking) ─────────────────────────────\nasync function openErrandsApp() {\n return openWindow({\n app: \"errands\",\n title: \"Errands\",\n width: 540,\n height: 480,\n async build(win) {\n const toolbar = win.querySelector(\".window-toolbar\");\n toolbar.innerHTML = `\n \n \n `;\n const body = win.querySelector(\".window-body\");\n body.classList.add(\"errands-app\");\n\n function showDriver() {\n // Pull any pending prefill (e.g. from iCal RSVP-yes hand-off) and consume it.\n const pre = (errandsPrefill?.tab === \"driver\" ? errandsPrefill.data : null);\n if (pre) errandsPrefill = null;\n\n body.innerHTML = `\n `;\n body.querySelector(\"#driver-form\").addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const fd = new FormData(e.target);\n const status = body.querySelector(\"#driver-status\");\n status.textContent = \"Sending…\"; status.style.color = \"#666\";\n const args = {\n driver_contact_id: \"c_driver\",\n drop_off_at: new Date(fd.get(\"drop_off_at\")).toISOString(),\n drop_off_address: String(fd.get(\"drop_off_address\") || \"\").trim(),\n };\n const pu = fd.get(\"pick_up_at\");\n if (pu) args.pick_up_at = new Date(pu).toISOString();\n const pa = String(fd.get(\"pick_up_address\") || \"\").trim();\n if (pa) args.pick_up_address = pa;\n const n = String(fd.get(\"notes\") || \"\").trim();\n if (n) args.notes = n;\n try {\n const result = await mcp(\"transportation_book_driver\", args);\n if (result?.error) { status.textContent = \"✗ \" + result.error; status.style.color = \"#a00\"; }\n else { status.textContent = \"✓ Roy dispatched.\"; status.style.color = \"#080\"; e.target.reset(); }\n } catch (err) {\n status.textContent = \"✗ \" + err.message; status.style.color = \"#a00\";\n }\n });\n }\n\n function showResto() {\n body.innerHTML = `\n `;\n body.querySelector(\"#resto-form\").addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const fd = new FormData(e.target);\n const status = body.querySelector(\"#resto-status\");\n status.textContent = \"Calling…\"; status.style.color = \"#666\";\n const args = {\n restaurant_name: String(fd.get(\"restaurant_name\") || \"\").trim(),\n reservation_at: new Date(fd.get(\"reservation_at\")).toISOString(),\n party_size: parseInt(fd.get(\"party_size\"), 10) || 2,\n };\n const un = String(fd.get(\"under_name\") || \"\").trim();\n if (un) args.under_name = un;\n const n = String(fd.get(\"notes\") || \"\").trim();\n if (n) args.notes = n;\n try {\n const result = await mcp(\"restaurant_book\", args);\n if (result?.error) { status.textContent = \"✗ \" + result.error; status.style.color = \"#a00\"; }\n else { status.textContent = `✓ Booked at ${result.restaurant}`; status.style.color = \"#080\"; e.target.reset(); }\n } catch (err) {\n status.textContent = \"✗ \" + err.message; status.style.color = \"#a00\";\n }\n });\n }\n\n function setTab(name) {\n toolbar.querySelectorAll(\".errand-tab\").forEach(b => b.style.fontWeight = b.dataset.tab === name ? \"700\" : \"400\");\n if (name === \"driver\") showDriver();\n else showResto();\n }\n toolbar.querySelectorAll(\".errand-tab\").forEach(b => b.addEventListener(\"click\", () => setTab(b.dataset.tab)));\n setTab(\"driver\");\n },\n });\n}\n\n// ── App registry ────────────────────────────────────────────────────────────\nconst APPS = {\n mail: { name: \"Mail\", open: openMailApp },\n addressbook: { name: \"Address Book\", open: openAddressBookApp },\n ical: { name: \"iCal\", open: openICalApp },\n stickies: { name: \"Stickies\", open: openStickiesApp },\n errands: { name: \"Errands\", open: openErrandsApp },\n activity: { name: \"Activity Monitor\",open: openActivityApp },\n endday: { name: \"End Day\", open: openEndDayApp },\n};\n\n// ── Helpers ─────────────────────────────────────────────────────────────────\nfunction escape(s) {\n if (s == null) return \"\";\n return String(s).replace(/[&<>\"']/g, (c) => ({ \"&\":\"&\",\"<\":\"<\",\">\":\">\",\"\\\"\":\""\",\"'\":\"'\" })[c]);\n}\n\nfunction setHomeTargets(openInNewTab) {\n for (const id of [\"home-link\", \"mobile-home-link\"]) {\n const link = document.getElementById(id);\n if (!link) continue;\n link.href = serverPath(\"/desktop\");\n if (openInNewTab) link.target = \"_blank\";\n else link.removeAttribute(\"target\");\n }\n}\n\nfunction confirmExitRun(openInNewTab) {\n const overlay = document.getElementById(\"exit-confirm\");\n if (!overlay) return Promise.resolve(true);\n overlay.hidden = false;\n return new Promise((resolve) => {\n const ok = document.getElementById(\"exit-ok\");\n const cancel = document.getElementById(\"exit-cancel\");\n const finish = (value) => {\n overlay.hidden = true;\n ok.removeEventListener(\"click\", onOk);\n cancel.removeEventListener(\"click\", onCancel);\n overlay.removeEventListener(\"click\", onOverlay);\n resolve(value);\n };\n const onOk = () => finish(true);\n const onCancel = () => finish(false);\n const onOverlay = (e) => { if (e.target === overlay) finish(false); };\n ok.addEventListener(\"click\", onOk);\n cancel.addEventListener(\"click\", onCancel);\n overlay.addEventListener(\"click\", onOverlay);\n document.querySelector(\".exit-copy\").textContent = openInNewTab\n ? \"This will open the main desktop in a new tab so the watch view stays here.\"\n : \"You can come back from the leaderboard, but this view will leave the current desktop.\";\n });\n}\n\n// ── Boot ────────────────────────────────────────────────────────────────────\n(async function init() {\n // Wire dock\n document.querySelectorAll(\".dock-icon\").forEach((el) => {\n if (el.dataset.wired === \"1\") return;\n el.dataset.wired = \"1\";\n el.addEventListener(\"click\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n const app = el.dataset.app;\n const now = Date.now();\n if (app && now - (lastDockOpenAt.get(app) || 0) < 350) return;\n if (app) lastDockOpenAt.set(app, now);\n el.classList.add(\"bouncing\");\n setTimeout(() => el.classList.remove(\"bouncing\"), 500);\n APPS[app]?.open();\n });\n });\n\n // Sticky close handlers\n document.querySelectorAll(\".sticky-close\").forEach((el) => {\n el.addEventListener(\"click\", () => document.getElementById(el.dataset.close).style.display = \"none\");\n });\n // Expand/collapse on mobile. Collapsed → tapping anywhere on the card expands\n // (the \"Tap to expand\" hint + truncated text live in the body, not the thin\n // header). Expanded → only the header collapses, so the body stays\n // scrollable/selectable.\n document.querySelectorAll(\".sticky\").forEach((sticky) => {\n sticky.addEventListener(\"click\", (e) => {\n if (e.target.classList.contains(\"sticky-close\")) return;\n if (!window.matchMedia(\"(max-width: 720px)\").matches) return;\n if (sticky.classList.contains(\"expanded\")) {\n if (e.target.closest(\".sticky-handle\")) sticky.classList.remove(\"expanded\");\n } else {\n sticky.classList.add(\"expanded\");\n }\n });\n });\n // Sticky drag\n document.querySelectorAll(\".sticky\").forEach((s) => {\n const handle = s.querySelector(\".sticky-handle\");\n handle.addEventListener(\"mousedown\", (e) => {\n if (e.target.classList.contains(\"sticky-close\")) return;\n const startX = e.clientX, startY = e.clientY;\n const startLeft = parseInt(s.style.left || \"0\"), startTop = parseInt(s.style.top || \"0\");\n function onMove(ev) {\n s.style.left = (startLeft + ev.clientX - startX) + \"px\";\n s.style.top = (startTop + ev.clientY - startY) + \"px\";\n }\n function onUp() {\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n }\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n });\n });\n\n // Reset button\n document.getElementById(\"reset-btn\").addEventListener(\"click\", async () => {\n if (!confirm(\"Reset the world? This wipes the trace and reseeds the default session.\")) return;\n await fetch(apiPath(\"/reset\"), { method: \"POST\" });\n location.reload();\n });\n\n // Fetch brief\n try {\n const r = await fetch(apiPath(\"/judge\")).then(x => x.json());\n document.getElementById(\"brief-text\").textContent = r.brief;\n // Set iCal day badge to today's day-of-month\n document.getElementById(\"ical-day-num\").textContent = new Date().getDate();\n } catch (e) {\n document.getElementById(\"brief-text\").textContent = \"(failed to load brief — try Reset)\";\n }\n\n // Clock\n function tick() {\n const now = new Date();\n const date = now.toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\" });\n const time = now.toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" });\n document.getElementById(\"clock\").textContent = `${date} ${time}`;\n }\n tick();\n setInterval(tick, 30000);\n})();\n\n\n// ── Spectator mode ────────────────────────────────────────────────────────\n//\n// Polls a specific run's trace and animates the desktop UI to reflect the\n// AI's tool calls — Mail compose pops when email_send fires, Address Book\n// pops with the right query when contacts_search fires, etc.\n//\n// Concurrency: if the agent fires N tools in parallel, we animate the\n// highest-priority one (email/phone over search) and just bump the call\n// counter for the rest. Activity Monitor (auto-opened) shows the raw trace\n// for power users.\nconst PRIO = {\n ask_miranda: 11, email_send: 10, phone_call: 9, calendar_confirm: 8,\n transportation_book_driver: 7, restaurant_book: 7, inbox_search: 5,\n contacts_search: 4, calendar_search: 4, notes_search: 3, time_now: 1,\n};\nconst REACTION_ICON = { silent: \"❄️\", curt: \"😶\", sigh: \"😮‍💨\", withering: \"💀\" };\nconst TOOL_APP = {\n contacts_search: { app: \"Address Book\", title: \"Contact search\" },\n calendar_search: { app: \"iCal\", title: \"Calendar search\" },\n calendar_confirm: { app: \"iCal\", title: \"Calendar updated\" },\n notes_search: { app: \"Stickies\", title: \"Notes search\" },\n inbox_search: { app: \"Mail\", title: \"Inbox search\" },\n email_send: { app: \"Mail\", title: \"Email sent\" },\n phone_call: { app: \"Phone\", title: \"Phone call\" },\n transportation_book_driver: { app: \"Errands\", title: \"Driver booked\" },\n restaurant_book: { app: \"Errands\", title: \"Restaurant booking\" },\n ask_miranda: { app: \"Miranda\", title: \"Honey trap\" },\n time_now: { app: \"Clock\", title: \"Time checked\" },\n};\nfunction toolResultFor(call, events) {\n const p = call.payload || {};\n const candidates = events.filter(e => (e.kind === \"tool_result\" || e.kind === \"tool_error\") && e.seq > call.seq && e.tool === call.tool);\n const same = (key) => candidates.find((e) => e.payload && p[key] && e.payload[key] === p[key]);\n if (call.tool === \"calendar_confirm\") return same(\"event_id\") || candidates[0];\n if (call.tool === \"email_send\") return same(\"subject\") || candidates.find((e) => String(e.payload?.to || \"\").includes(contactLabel(p.to_contact_id))) || candidates[0];\n if (call.tool === \"restaurant_book\") return candidates.find((e) => e.payload?.restaurant === p.restaurant_name) || candidates[0];\n if (call.tool === \"transportation_book_driver\") return candidates.find((e) => e.payload?.drop_off?.address === p.drop_off_address) || candidates[0];\n if (call.tool === \"phone_call\") return candidates.find((e) => e.payload?.called === contactLabel(p.to_contact_id)) || candidates[0];\n return candidates[0];\n}\nfunction fmtWhen(value) {\n if (!value) return \"\";\n const d = new Date(value);\n if (Number.isNaN(d.getTime())) return String(value);\n return d.toLocaleString(\"en-US\", { weekday: \"short\", hour: \"numeric\", minute: \"2-digit\", month: \"short\", day: \"numeric\" });\n}\nfunction contactLabel(id) {\n return ({\n c_simone_tate: \"Simone Tate\",\n c_richard_tully: \"Richard Tully\",\n c_nigel: \"Nigel Kipling\",\n c_natalie_bryant: \"Natalie Bryant\",\n c_husband: \"Stephen Tomlinson\",\n c_driver: \"Roy\",\n c_michael_kors: \"Michael Kors office\",\n c_housekeeper: \"Housekeeper\",\n })[id] || id || \"\";\n}\nfunction renderMiniList(items, render, empty = \"No matches.\") {\n if (!items || items.length === 0) return `

${escape(empty)}

`;\n return items.slice(0, 5).map(render).join(\"\");\n}\nfunction contactEmail(id) {\n return ({\n c_simone_tate: \"simone.tate@runway.condenast.com\",\n c_richard_tully: \"richard@tullyphoto.com\",\n c_natalie_bryant: \"natalie@gloriousfoods.com\",\n c_husband: \"stephen@tomlinson.law\",\n c_michael_kors: \"office@michaelkors.com\",\n c_nigel: \"nigel@runway.condenast.com\",\n })[id] || \"\";\n}\nfunction speakText(text) {\n if (!(\"speechSynthesis\" in window) || !text) return;\n window.speechSynthesis.cancel();\n const utterance = new SpeechSynthesisUtterance(text.replace(/^[^:]+:/gm, \"\"));\n utterance.rate = 1.02;\n utterance.pitch = 0.92;\n window.speechSynthesis.speak(utterance);\n}\nfunction renderMailReading(m) {\n if (!m) return \"Select a message to read.\";\n const to = m.to_resolved_name || contactLabel(m.to_contact_id) || m.to_address || \"?\";\n const addr = m.to_address || contactEmail(m.to_contact_id);\n return `To: ${to}${addr ? \" <\" + addr + \">\" : \"\"}\\nSubject: ${m.subject || \"(no subject)\"}\\nSent: ${m.ts ? new Date(m.ts).toLocaleString() : \"just now\"}\\n\\n${m.body || \"\"}`;\n}\nfunction renderToolVisual(call, result) {\n const p = call.payload || {};\n const rp = result?.payload || {};\n const status = result ? (result.kind === \"tool_error\" ? \"error\" : \"done\") : \"working\";\n if (result?.kind === \"tool_error\") {\n return `

Something failed

${escape(rp.message || rp.error || \"Tool error\")}

`;\n }\n if (call.tool === \"email_send\") {\n const sent = {\n ...p,\n to_resolved_name: rp.to_resolved_name || contactLabel(p.to_contact_id),\n to_address: rp.to_address || contactEmail(p.to_contact_id),\n ts: new Date().toISOString(),\n };\n return `

\n \n

→ ${escape(sent.to_resolved_name || sent.to_address || \"?\")}${escape(sent.subject || \"(no subject)\")}${escape((sent.body || \"\").slice(0, 90))}…

${escape(renderMailReading(sent))}

`;\n }\n if (call.tool === \"inbox_search\") {\n const matches = rp.matches || [];\n const first = matches[0];\n return `

\n \n

\n ${renderMiniList(matches, (m, i) => `

${escape(m.from_name || m.from_address)}${escape(m.subject || \"(no subject)\")}${escape((m.body || \"\").slice(0, 90))}…

`, \"No matching mail.\")}\n

${first ? `From: ${escape(first.from_name || \"\")} <${escape(first.from_address || \"\")}>\\nSubject: ${escape(first.subject || \"\")}\\n\\n${escape(first.body || \"\")}` : \"No matching mail.\"}

`;\n }\n if (call.tool === \"contacts_search\") {\n const matches = rp.matches || [];\n const first = matches[0];\n return `

\n ${renderMiniList(matches, (c, i) => `

${escape(c.name)}${escape(c.relationship || \"\")}

`)}\n

\n ${first ? `

${escape(first.name)}

${escape(first.relationship || \"\")}

Email: ${escape(first.email)}
Phone: ${escape(first.phone)}
Notes: ${escape(first.notes)}
Contact ID: ${escape(first.id)}

` : \"No contacts found.\"}\n

`;\n }\n if (call.tool === \"calendar_search\") {\n const matches = rp.matches || [];\n return `

${escape(p.query ? \"Search: \" + p.query : \"Calendar\")}

\n ${renderMiniList(matches, (ev) => `

${escape(new Date(ev.starts_at).toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" }))}

${escape(ev.title)}${escape(ev.status)}${ev.rsvp_state ? \" / \" + escape(ev.rsvp_state) : \"\"}

${ev.location ? `

${escape(ev.location)}

` : \"\"}${ev.notes ? `

${escape(ev.notes)}

` : \"\"}

`)}\n

`;\n }\n if (call.tool === \"calendar_confirm\") {\n return `

Saturday, April 25, 2026

done

${escape(rp.title || p.event_id)}${escape(rp.status || \"confirmed\")}${(rp.rsvp || p.rsvp) ? \" / \" + escape(rp.rsvp || p.rsvp) : \"\"}

${escape(p.rsvp ? \"AI clicked RSVP \" + p.rsvp + \".\" : \"AI clicked Confirm.\")}

`;\n }\n if (call.tool === \"notes_search\") {\n const matches = rp.matches || [];\n return `

Stickies: ${escape(p.query || \"All notes\")}

\n ${renderMiniList(matches, (n) => `

${escape(n.title)}${escape((n.body || \"\").slice(0, 150))}

`)}\n

`;\n }\n if (call.tool === \"phone_call\") {\n return `

${escape(rp.called || contactLabel(p.to_contact_id) || \"Calling\")}

${escape(p.intent || \"\")}

${escape(rp.outcome || \"in progress\")}

\n ${rp.transcript ? `

${escape(rp.transcript)}

` : \"\"}\n

`;\n }\n if (call.tool === \"transportation_book_driver\") {\n return `

`;\n }\n if (call.tool === \"restaurant_book\") {\n return `

`;\n }\n if (call.tool === \"time_now\") {\n return `

${escape(rp.formatted || \"Checking time\")}

${escape(rp.timezone || \"\")}

`;\n }\n if (call.tool === \"ask_miranda\") {\n return `

${escape(p.question || \"\")}

${escape(rp.miranda_reply || \"...\")}

`;\n }\n return `

${escape(call.tool)}

${escape(status)}

`;\n}\nfunction renderSpectatorToolbar(call) {\n const p = call.payload || {};\n if (call.tool === \"email_send\") {\n return ``;\n }\n if (call.tool === \"inbox_search\") {\n return ``;\n }\n if (call.tool === \"contacts_search\") {\n return ``;\n }\n if (call.tool === \"calendar_search\" || call.tool === \"calendar_confirm\") {\n return ` `;\n }\n if (call.tool === \"transportation_book_driver\") {\n return ``;\n }\n if (call.tool === \"restaurant_book\") {\n return ``;\n }\n if (call.tool === \"notes_search\") {\n return ``;\n }\n return `#${call.seq}${escape(call.tool)}`;\n}\nfunction openToolVisual(call, result, indexInBatch = 0) {\n const meta = TOOL_APP[call.tool] || { app: \"Tool\", title: call.tool };\n const isError = result?.kind === \"tool_error\";\n const wide = [\"email_send\", \"inbox_search\", \"calendar_search\", \"calendar_confirm\"].includes(call.tool);\n const tall = [\"transportation_book_driver\", \"restaurant_book\", \"phone_call\"].includes(call.tool);\n const win = openWindow({\n app: \"tool-\" + call.seq,\n title: meta.app,\n width: wide ? 700 : (tall ? 540 : 620),\n height: wide ? 460 : (tall ? 480 : 400),\n metal: call.tool === \"email_send\" || call.tool === \"inbox_search\" || call.tool === \"contacts_search\",\n build(win) {\n win.classList.add(\"spec-tool-window\");\n if (isError) win.classList.add(\"spec-tool-error\");\n if (call.tool === \"ask_miranda\") win.classList.add(\"spec-tool-honey\");\n win.querySelector(\".window-toolbar\").innerHTML = renderSpectatorToolbar(call);\n win.querySelector(\".window-body\").innerHTML = renderToolVisual(call, result);\n win.querySelectorAll(\"[data-speak]\").forEach((btn) => {\n btn.addEventListener(\"click\", () => speakText(btn.getAttribute(\"data-speak\") || \"\"));\n });\n }\n });\n const cols = Math.max(1, Math.floor((window.innerWidth - 120) / Math.min(parseInt(win.style.width, 10), 520)));\n win.style.left = (34 + ((call.seq + indexInBatch) % cols) * 38) + \"px\";\n win.style.top = (76 + ((call.seq + indexInBatch) % 9) * 28) + \"px\";\n return win;\n}\n\nconst spectator = (() => {\n let runId = null;\n let runMeta = null;\n let lastSeq = -1;\n let timer = null;\n let endedHandled = false;\n\n async function poll() {\n try {\n const traceR = await fetch(serverPath(`/runs/${runId}/trace`));\n if (!traceR.ok) return;\n const data = await traceR.json();\n const events = data.events || [];\n const newCalls = events.filter(e => e.kind === \"tool_call\" && e.seq > lastSeq);\n\n if (newCalls.length > 0) {\n newCalls.forEach((call, idx) => animateCall(call, toolResultFor(call, events), newCalls.length, idx));\n const totalCalls = events.filter(e => e.kind === \"tool_call\").length;\n updateBanner({ calls: totalCalls });\n lastSeq = events[events.length - 1].seq;\n }\n\n // Check if the run ended (poll the run record).\n if (!endedHandled) {\n const runR = await fetch(serverPath(`/runs/${runId}`));\n if (runR.ok) {\n const run = await runR.json();\n if (run.ended_at) {\n endedHandled = true;\n handleEnd(run);\n }\n }\n }\n } catch (e) {\n console.error(\"spectator poll failed:\", e);\n }\n }\n\n function animateCall(call, result, batchSize, indexInBatch = 0) {\n const t = call.tool;\n const p = call.payload || {};\n const rp = result?.payload || {};\n const isError = result?.kind === \"tool_error\";\n\n openToolVisual(call, result, indexInBatch);\n\n // Always flash the action so the user sees something even if the window\n // is already open and didn't visually change.\n if (t === \"email_send\") {\n const to = rp.to_resolved_name || p.to_contact_id || p.to || \"?\";\n flashAction(`✉️ Email → ${to}: \"${(p.subject || '').slice(0, 60)}\"`, \"email\");\n } else if (t === \"phone_call\") {\n flashAction(`📞 Phone → ${p.to_contact_id}: \"${(p.intent || '').slice(0, 70)}\"`, \"phone\");\n } else if (t === \"calendar_confirm\") {\n flashAction(`📅 ${p.event_id}${p.rsvp ? ` · RSVP ${p.rsvp}` : \" · confirmed\"}`, \"calendar\");\n } else if (t === \"transportation_book_driver\") {\n flashAction(`🚗 Roy dispatched to ${p.drop_off_address || \"?\"}`, \"driver\");\n } else if (t === \"restaurant_book\") {\n flashAction(`🍽 Booked ${p.restaurant_name} @ ${p.reservation_at}`, \"resto\");\n } else if (t === \"ask_miranda\") {\n flashHoneyTrap(p.question, rp.miranda_reply);\n // Don't open a window — the honey trap is a flash event.\n return;\n }\n\n // Spectator mode is observational: visual windows above represent the AI's real calls.\n // Do not open interactive apps here, because they would issue their own MCP reads.\n return;\n\n // Now open the matching window so the user can see what the agent looked at.\n if (t === \"contacts_search\") {\n openAddressBookApp().then(() => {\n setTimeout(() => {\n const q = document.getElementById(\"ab-q\");\n if (q) {\n q.value = p.query || \"\";\n q.dispatchEvent(new Event(\"input\"));\n }\n }, 180);\n });\n } else if (t === \"calendar_search\" || t === \"calendar_confirm\") {\n openICalApp();\n } else if (t === \"notes_search\") {\n openStickiesApp().then(() => {\n setTimeout(() => {\n const q = document.getElementById(\"notes-q\");\n if (q) {\n q.value = p.query || \"\";\n q.dispatchEvent(new Event(\"input\"));\n }\n }, 180);\n });\n } else if (t === \"inbox_search\") {\n openMailApp().then(() => {\n setTimeout(() => {\n const tab = document.querySelector('.mail-tab[data-tab=\"inbox\"]');\n if (tab) tab.click();\n }, 180);\n });\n } else if (t === \"email_send\") {\n openMailApp().then(() => {\n setTimeout(() => {\n const tab = document.querySelector('.mail-tab[data-tab=\"sent\"]');\n if (tab) tab.click();\n }, 180);\n });\n } else if (t === \"phone_call\") {\n openAddressBookApp();\n } else if (t === \"transportation_book_driver\" || t === \"restaurant_book\") {\n openErrandsApp();\n }\n // time_now: no window\n }\n\n function start(rid, opts = {}) {\n runId = rid;\n runMeta = opts.meta ?? null;\n lastSeq = -1;\n endedHandled = false;\n document.body.dataset.mode = \"spectator\";\n setHomeTargets(true);\n showBanner(opts);\n if (opts.openActivity === true) openActivityApp();\n poll();\n if (timer) clearInterval(timer);\n timer = setInterval(poll, 1500);\n }\n\n function stop() {\n if (timer) { clearInterval(timer); timer = null; }\n document.body.dataset.mode = \"\";\n setHomeTargets(false);\n hideBanner();\n }\n\n function showBanner(opts) {\n let b = document.getElementById(\"spectator-banner\");\n if (!b) {\n b = document.createElement(\"div\");\n b.id = \"spectator-banner\";\n document.body.appendChild(b);\n }\n const labelName = opts.displayName ?? runId;\n b.innerHTML = `\n

\n \n Watching ${escape(labelName)}\n ${opts.command ? `` : \"\"}\n — calls\n \n home\n exit\n

`;\n if (opts.command) {\n document.getElementById(\"sb-copy-cmd\").addEventListener(\"click\", () => {\n navigator.clipboard.writeText(opts.command).then(() => {\n const btn = document.getElementById(\"sb-copy-cmd\");\n btn.textContent = \"✓ paste in your terminal\";\n setTimeout(() => { btn.textContent = \"📋 Copy command\"; }, 2400);\n });\n });\n }\n document.getElementById(\"sb-stop\").addEventListener(\"click\", (e) => {\n e.preventDefault(); stop();\n });\n }\n\n function updateBanner({ calls }) {\n const el = document.getElementById(\"sb-stats\");\n if (el) el.textContent = `${calls} call${calls === 1 ? \"\" : \"s\"}`;\n }\n\n function hideBanner() {\n const b = document.getElementById(\"spectator-banner\");\n if (b) b.remove();\n }\n\n function handleEnd(run) {\n const reaction = run.miranda_reaction;\n if (reaction) flashReaction(reaction);\n const banner = document.getElementById(\"spectator-banner\");\n if (banner) {\n banner.classList.add(\"ended\");\n const stats = document.getElementById(\"sb-stats\");\n const tier = reaction?.reaction_type;\n const icon = REACTION_ICON[tier] || \"—\";\n if (stats) stats.textContent = `${icon} ${tier || \"ended\"}`;\n }\n if (timer) { clearInterval(timer); timer = null; }\n }\n\n function flashHoneyTrap(question, reply) {\n const o = document.createElement(\"div\");\n o.className = \"spec-flash honey\";\n o.innerHTML = `\n

🍯

Honey trap triggered

Asked Miranda: \"${escape((question || \"\").slice(0, 200))}\"

\n ${reply ? `

— Miranda: \"${escape(reply)}\"

` : \"\"}`;\n document.body.appendChild(o);\n requestAnimationFrame(() => o.classList.add(\"show\"));\n setTimeout(() => { o.classList.remove(\"show\"); setTimeout(() => o.remove(), 400); }, 4000);\n }\n\n function flashAction(text) {\n const o = document.createElement(\"div\");\n o.className = \"spec-flash\";\n o.innerHTML = `

${escape(text)}

`;\n document.body.appendChild(o);\n requestAnimationFrame(() => o.classList.add(\"show\"));\n setTimeout(() => { o.classList.remove(\"show\"); setTimeout(() => o.remove(), 400); }, 1800);\n }\n\n function flashReaction(reaction) {\n const o = document.createElement(\"div\");\n o.className = \"spec-flash reaction\";\n const tier = reaction.reaction_type;\n const icon = REACTION_ICON[tier] || \"❓\";\n const lines = (reaction.lines || []).filter(l => l && l.trim());\n o.innerHTML = `\n

${icon}

${tier ? tier.toUpperCase() : \"\"}

\n ${lines.length\n ? lines.map(l => `

${escape(l)}

`).join(\"\")\n : `

— silence (the highest praise) —

`}\n

Share this run

`;\n document.body.appendChild(o);\n requestAnimationFrame(() => o.classList.add(\"show\"));\n o.addEventListener(\"click\", () => {\n o.classList.remove(\"show\");\n setTimeout(() => o.remove(), 400);\n });\n }\n\n return { start, stop };\n})();\nwindow.spectator = spectator;\n\n// ── Launcher ──────────────────────────────────────────────────────────────\n//\n// Two choices on landing: try the desktop yourself, or generate one pasteable\n// prompt for an AI with the run-scoped MCP URL and watchalong link.\nconst launcher = (() => {\n function show() {\n document.getElementById(\"launcher\").classList.remove(\"hidden\");\n resetRunName();\n setStep(\"pick\");\n }\n function hide() {\n document.getElementById(\"launcher\").classList.add(\"hidden\");\n }\n function setStep(name) {\n document.querySelectorAll(\".launcher-step\").forEach(s => {\n const isActive = s.dataset.step === name;\n s.hidden = !isActive;\n s.classList.toggle(\"active\", isActive);\n });\n }\n\n function aiPrompt(run) {\n const mcpUrl = `${SERVER_ORIGIN}/runs/${run.id}/mcp`;\n const desktopUrl = `${SERVER_ORIGIN}/runs/${run.id}/desktop`;\n return `You are playing miranda-bench, an executive-assistant benchmark based on Miranda Priestly's morning monologue from The Devil Wears Prada.\n\nConnect to this run-scoped Streamable HTTP MCP server:\n${mcpUrl}\n\nFetch the MCP prompt named miranda_brief and treat it as your first user message. Then complete every task in Miranda's brief using the available MCP tools. Be decisive, check contacts/calendar/notes/inbox before acting, avoid decoy recipients, and follow up on replies that arrive in the inbox.\n\nIf you just added this MCP server and native tools do not appear, start a fresh agent session with the server already configured. Use native MCP tools when available; raw HTTP JSON-RPC is only a fallback.\n\nI can follow along on your private desktop here:\n${desktopUrl}\n\nWhen you are done, call the MCP tool end_day yourself, then tell me you are ready for end-of-day judging.`;\n }\n\n function defaultRunName(kind) {\n const stamp = new Date().toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" });\n return kind === \"human\" ? `Human run ${stamp}` : `AI run ${stamp}`;\n }\n\n function resetRunName() {\n const input = document.getElementById(\"run-name-input\");\n if (input && !input.value.trim()) input.value = defaultRunName(\"ai\");\n }\n\n function getRunName(kind) {\n const input = document.getElementById(\"run-name-input\");\n const fallback = defaultRunName(kind);\n if (!input) return fallback;\n return input.value.trim() || fallback;\n }\n\n async function createNamedRun(agentType, displayName) {\n const r = await fetch(serverPath(\"/runs\"), {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ display_name: displayName, agent_type: agentType }),\n });\n if (!r.ok) throw new Error(await r.text());\n return r.json();\n }\n\n function replaceToRunDesktop(runId) {\n const path = `/runs/${runId}/desktop`;\n if (location.protocol === \"file:\") {\n location.href = serverPath(path);\n return false;\n }\n history.replaceState(null, \"\", serverPath(path));\n return true;\n }\n\n async function generateAiPrompt() {\n const display_name = getRunName(\"ai\");\n const aiBtn = document.querySelector('.launcher-choice[data-action=\"ai\"]');\n if (aiBtn) {\n aiBtn.disabled = true;\n aiBtn.querySelector(\".choice-title\").textContent = \"Generating...\";\n }\n let run;\n let prompt;\n try {\n run = await createNamedRun(\"ai\", display_name);\n prompt = aiPrompt(run);\n } catch (e) {\n flashAction(`Couldn't create run: ${e.message || e}`);\n if (aiBtn) {\n aiBtn.disabled = false;\n aiBtn.querySelector(\".choice-title\").textContent = \"Give it to an AI\";\n }\n return;\n }\n\n document.getElementById(\"ls-cmd-title\").innerHTML =\n `Run ${escape(run.display_name)} is ready. Paste this into any AI that can use MCP:`;\n document.getElementById(\"ls-cmd-text\").textContent = prompt;\n document.getElementById(\"ls-cmd-help\").innerHTML =\n `The prompt includes the MCP URL and this run's private desktop link. Most MCP-capable agents can infer the setup from it; if yours asks for just the server URL, copy the URL on the second line.`;\n document.getElementById(\"ls-copy\").onclick = () => {\n navigator.clipboard.writeText(prompt).then(() => {\n const btn = document.getElementById(\"ls-copy\");\n btn.textContent = \"copied!\";\n btn.classList.add(\"copied\");\n setTimeout(() => { btn.textContent = \"copy\"; btn.classList.remove(\"copied\"); }, 1400);\n });\n };\n document.getElementById(\"ls-watch-btn\").onclick = () => {\n hide();\n if (!replaceToRunDesktop(run.id)) return;\n spectator.start(run.id, {\n displayName: run.display_name,\n command: prompt,\n });\n };\n setStep(\"command\");\n if (aiBtn) {\n aiBtn.disabled = false;\n aiBtn.querySelector(\".choice-title\").textContent = \"Give it to an AI\";\n }\n }\n\n async function startHumanSandbox() {\n const display_name = getRunName(\"human\");\n let run;\n try {\n run = await createNamedRun(\"human\", display_name);\n } catch (e) {\n flashAction(`Couldn't create run: ${e.message || e}`);\n return;\n }\n ACTIVE_SESSION_ID = run.id;\n hide();\n if (!replaceToRunDesktop(run.id)) return;\n document.body.dataset.mode = \"\";\n document.getElementById(\"mb-app\").textContent = \"Desktop\";\n flashAction(`Fresh desk ready: ${run.display_name}. Open the apps in the Dock and work the brief.`);\n }\n\n function init() {\n setHomeTargets(false);\n for (const id of [\"home-link\", \"mobile-home-link\"]) {\n const link = document.getElementById(id);\n if (!link) continue;\n link.addEventListener(\"click\", async (e) => {\n e.preventDefault();\n const openInNewTab = link.target === \"_blank\";\n if (!(await confirmExitRun(openInNewTab))) return;\n if (openInNewTab) window.open(link.href, \"_blank\", \"noopener\");\n else window.location.href = link.href;\n });\n }\n const lb = document.getElementById(\"leaderboard-link\");\n if (lb) lb.href = serverPath(\"/leaderboard\");\n resetRunName();\n document.querySelectorAll(\"[data-action]\").forEach(btn => {\n const action = btn.dataset.action;\n if (!action) return;\n btn.addEventListener(\"click\", () => {\n if (action === \"self\") startHumanSandbox();\n else if (action === \"ai\") generateAiPrompt();\n else if (action === \"back\") setStep(\"pick\");\n });\n });\n // Mode badge in menubar — re-opens the launcher\n const modeBtn = document.getElementById(\"mode-btn\");\n if (modeBtn) modeBtn.addEventListener(\"click\", show);\n }\n\n return { init, show, hide };\n})();\n\n// Initialize launcher after init() boot has finished wiring core dock + sticky.\n// Use a microtask so the DOMContentLoaded flow stays clean.\nqueueMicrotask(() => {\n launcher.init();\n if (ROUTE_RUN_ID && location.pathname.includes(\"/desktop\")) {\n document.getElementById(\"launcher\")?.classList.add(\"hidden\");\n spectator.start(ROUTE_RUN_ID, { displayName: ROUTE_RUN_ID, openActivity: false });\n }\n});\n",[],[200,311],"abfbf9de-5b4f-11f1-9ba4-ee650bb23af1","desktop.html","71071022-4112-11f1-a28a-42b51c65c3df",["D",1780053317089],"\n\n\n \n \n miranda-bench\n \n\n\n \n

\n \n Finder\n \n \n \n \n \n

\n ⌂ home\n 🎛 mode\n 🏆 leaderboard\n ↻ reset\n —:—\n

\n ⌂\n \n\n \n

miranda-bench

An EA agent benchmark based on The Devil Wears Prada.

\n\n \n

\n \n Run name\n \n \n

\n \n \n

\n\n \n

Paste this into your AI:

\n \n \n

\n\n \n

\n ×\n

Miranda just dictated:

…

Use the Dock to get to work. Skip — and she'll notice.

\n\n \n

\n \n

Mail

\n \n

Address Book

\n \n

iCal

\n \n

Stickies

\n \n

Errands

\n \n

Activity

\n \n

End Day

\n\n \n \n\n \n\n\n",[],[200,319],"07c6e30c-5ac7-11f1-9f5e-ee650bb23af1","desktop.css","a02e3984-4112-11f1-add3-42b51c65c3df",258,["D",1779994630052],19,"/* miranda-bench desktop — Mac OS X Tiger (2006) vibe */\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml, body {\n height: 100%;\n width: 100%;\n overflow: hidden;\n font-family: \"Lucida Grande\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n font-size: 13px;\n color: #1a1a1a;\n user-select: none;\n}\n\nbody {\n background:\n linear-gradient(rgba(30, 60, 95, 0.08), rgba(30, 60, 95, 0.08)),\n url(\"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a4c1e5a1-885b-4be4-ef26-f07c6dcc1800/public\")\n center center / cover no-repeat fixed,\n linear-gradient(180deg, #2a6ec4 0%, #1f4f9e 60%, #143670 100%);\n}\n\n/* ── Menu bar ───────────────────────────────────────────────────────────── */\n#menubar {\n position: fixed;\n top: 0; left: 0; right: 0;\n height: 22px;\n background: linear-gradient(180deg, #fdfdfd 0%, #e6e6e6 100%);\n border-bottom: 1px solid #aaa;\n box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 12px;\n font-size: 12px;\n z-index: 1000;\n}\n.mb-left { display: flex; align-items: center; gap: 14px; }\n.mb-right { display: flex; align-items: center; gap: 14px; color: #333; }\n.apple { font-size: 14px; color: #444; }\n.mb-app { font-weight: 700; }\n.mb-menu { color: #1a1a1a; cursor: default; }\n#clock { font-variant-numeric: tabular-nums; }\n#reset-btn { cursor: pointer; color: #1a4ea0; }\n#reset-btn:hover { text-decoration: underline; }\n#mobile-home-link { display: none; }\n.exit-confirm {\n position: fixed;\n inset: 0;\n z-index: 5000;\n display: grid;\n place-items: center;\n background: rgba(0,0,0,0.34);\n padding: 20px;\n}\n.exit-confirm[hidden] { display: none; }\n.exit-card {\n width: min(340px, calc(100vw - 40px));\n background: rgba(248,248,250,0.96);\n border-radius: 12px;\n box-shadow: 0 16px 48px rgba(0,0,0,0.36);\n padding: 18px;\n color: #1c1c1e;\n text-align: center;\n}\n.exit-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; }\n.exit-copy { color: #6e6e73; font-size: 13px; line-height: 1.4; margin-bottom: 16px; }\n.exit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.exit-actions button {\n border: 1px solid #c7c7cc;\n border-radius: 8px;\n background: #fff;\n font: inherit;\n font-weight: 700;\n padding: 9px 10px;\n}\n#exit-ok { background: #007aff; border-color: #007aff; color: #fff; }\n\n/* ── Desktop ────────────────────────────────────────────────────────────── */\n#desktop {\n position: absolute;\n top: 22px; left: 0; right: 0; bottom: 0;\n}\n\n#windows-layer {\n position: absolute;\n inset: 0;\n}\n\n/* ── Sticky notes ──────────────────────────────────────────────────────── */\n.sticky {\n position: absolute;\n width: 280px;\n background: #fff7a0;\n background: linear-gradient(180deg, #fff7a0 0%, #ffe85e 100%);\n box-shadow: 2px 4px 16px rgba(0,0,0,0.35);\n border: 1px solid rgba(0,0,0,0.05);\n transform: rotate(-1.2deg);\n font-family: \"Marker Felt\", \"Comic Sans MS\", \"Lucida Grande\", sans-serif;\n font-size: 14px;\n color: #4a3700;\n z-index: 50;\n}\n.sticky-handle {\n height: 14px;\n background: linear-gradient(180deg, #f6df50 0%, #e8c918 100%);\n border-bottom: 1px solid rgba(0,0,0,0.1);\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 0 6px;\n cursor: move;\n}\n.sticky-close {\n width: 11px; height: 11px;\n border-radius: 50%;\n background: #c84;\n color: #fff;\n font-size: 9px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.sticky-body {\n padding: 14px 16px 18px;\n line-height: 1.45;\n}\n.sticky-title {\n font-weight: 600;\n margin-bottom: 8px;\n font-size: 13px;\n}\n.sticky-text {\n white-space: pre-wrap;\n}\n.sticky-meta {\n margin-top: 10px;\n font-size: 11px;\n color: #806400;\n font-style: italic;\n}\n\n/* ── Dock ──────────────────────────────────────────────────────────────── */\n#dock {\n position: fixed;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(40, 40, 50, 0.55);\n backdrop-filter: blur(14px) saturate(140%);\n -webkit-backdrop-filter: blur(14px) saturate(140%);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 16px;\n padding: 6px 10px 4px;\n display: flex;\n align-items: flex-end;\n gap: 4px;\n z-index: 800;\n box-shadow: 0 6px 24px rgba(0,0,0,0.4);\n}\n.dock-icon {\n position: relative;\n width: 60px;\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n padding: 4px;\n transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1.3);\n}\n.dock-icon:hover { transform: translateY(-6px) scale(1.15); }\n.dock-icon.bouncing { animation: dockBounce 0.5s ease; }\n@keyframes dockBounce {\n 0%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-22px) scale(1.1); }\n}\n.dock-icon .icon {\n width: 44px;\n height: 44px;\n border-radius: 9px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.4);\n position: relative;\n overflow: hidden;\n}\n.dock-label {\n position: absolute;\n bottom: 100%;\n margin-bottom: 4px;\n background: rgba(0,0,0,0.7);\n color: white;\n font-size: 11px;\n padding: 2px 6px;\n border-radius: 4px;\n opacity: 0;\n white-space: nowrap;\n pointer-events: none;\n transition: opacity 0.15s;\n}\n.dock-icon:hover .dock-label { opacity: 1; }\n.dock-separator {\n width: 1px;\n height: 36px;\n background: rgba(255,255,255,0.2);\n margin: 0 6px;\n align-self: center;\n}\n\n/* Tiger-style dock icons (Mail, Address Book, iCal, Stickies, Activity)\n are rendered inline as SVG. The wrapper .icon just provides the rounded-\n square clip + soft drop-shadow; the SVG paints everything inside. */\n.icon-mail svg,\n.icon-addressbook svg,\n.icon-ical svg,\n.icon-stickies svg,\n.icon-errands svg,\n.icon-activity svg,\n.icon-endday svg {\n display: block;\n filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));\n}\n\n/* End Day */\n.icon-endday {\n background: transparent;\n}\n\n/* ── Windows ──────────────────────────────────────────────────────────── */\n.window {\n position: absolute;\n background: linear-gradient(180deg, #ececec 0%, #d0d0d0 100%);\n border: 1px solid rgba(0,0,0,0.4);\n border-radius: 6px 6px 4px 4px;\n box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.6) inset;\n min-width: 360px;\n min-height: 240px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.window.focused { z-index: 200; }\n.window.unfocused .tl { background: #c4c4c4 !important; }\n\n.window-titlebar {\n height: 22px;\n background: linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 50%, #b8b8b8 100%);\n border-bottom: 1px solid rgba(0,0,0,0.3);\n display: flex;\n align-items: center;\n padding: 0 8px;\n position: relative;\n cursor: move;\n}\n.window-traffic { display: flex; gap: 8px; }\n.tl {\n width: 12px; height: 12px;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,0.25);\n cursor: pointer;\n}\n.tl-red { background: radial-gradient(circle at 30% 30%, #ff8a82, #d83a30); }\n.tl-yellow { background: radial-gradient(circle at 30% 30%, #ffd76a, #d59a13); }\n.tl-green { background: radial-gradient(circle at 30% 30%, #7be08e, #1a8a2a); }\n.window-title {\n position: absolute;\n left: 0; right: 0;\n text-align: center;\n font-weight: 600;\n font-size: 12px;\n pointer-events: none;\n text-shadow: 0 1px 0 rgba(255,255,255,0.8);\n}\n\n.window-toolbar {\n background: linear-gradient(180deg, #d8d8d8 0%, #b8b8b8 100%);\n border-bottom: 1px solid #888;\n padding: 6px 10px;\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n min-height: 28px;\n}\n.window-toolbar input[type=\"text\"],\n.window-toolbar input[type=\"search\"] {\n flex: 1;\n border: 1px solid #888;\n border-radius: 12px;\n padding: 3px 10px;\n font-size: 12px;\n background: white;\n font-family: inherit;\n}\n.window-toolbar button {\n background: linear-gradient(180deg, #fbfbfb, #d8d8d8);\n border: 1px solid #888;\n border-radius: 4px;\n padding: 3px 10px;\n font-size: 12px;\n cursor: pointer;\n font-family: inherit;\n}\n.window-toolbar button:hover { filter: brightness(0.97); }\n.window-toolbar button:active { filter: brightness(0.92); }\n\n.window-body {\n flex: 1;\n background: white;\n overflow: auto;\n position: relative;\n}\n\n/* ── Brushed metal variant for Address Book / Mail ─────────────────────── */\n.window.metal .window-titlebar,\n.window.metal .window-toolbar {\n background:\n repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px),\n linear-gradient(180deg, #d4d4d4 0%, #b9b9b9 100%);\n}\n\n/* ── App content styles ─────────────────────────────────────────────────── */\n\n/* Mail */\n.mail-layout {\n display: grid;\n grid-template-columns: 200px 1fr;\n height: 100%;\n}\n.mail-sidebar {\n background: #d8e4f3;\n border-right: 1px solid #88a;\n padding: 8px 0;\n font-size: 12px;\n}\n.mail-folder {\n padding: 4px 12px;\n cursor: pointer;\n}\n.mail-folder.active { background: #4a7bcf; color: white; }\n.mail-list {\n display: flex;\n flex-direction: column;\n}\n.mail-item {\n padding: 8px 12px;\n border-bottom: 1px solid #ddd;\n cursor: pointer;\n font-size: 12px;\n}\n.mail-item:hover { background: #f3f7ff; }\n.mail-item.selected { background: #4a7bcf; color: white; }\n.mail-item .from { font-weight: 600; }\n.mail-item .subject { display: block; }\n.mail-item .preview { color: #666; font-size: 11px; }\n.mail-item.selected .preview { color: #cce; }\n.mail-reading {\n padding: 16px;\n font-size: 13px;\n line-height: 1.5;\n border-top: 1px solid #ccc;\n background: #fafbfc;\n white-space: pre-wrap;\n}\n.mail-compose {\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n height: 100%;\n}\n.mail-compose label {\n font-size: 12px;\n font-weight: 600;\n}\n.mail-compose select,\n.mail-compose input,\n.mail-compose textarea {\n border: 1px solid #888;\n padding: 4px 8px;\n font-family: inherit;\n font-size: 13px;\n border-radius: 3px;\n}\n.mail-compose textarea {\n flex: 1;\n resize: none;\n}\n.mail-compose .send-row {\n display: flex;\n justify-content: flex-end;\n}\n.mail-compose .send-btn {\n background: linear-gradient(180deg, #79b1ff, #3274d3);\n color: white;\n border: 1px solid #1a4d99;\n border-radius: 4px;\n padding: 5px 18px;\n font-weight: 600;\n cursor: pointer;\n font-family: inherit;\n}\n\n/* Address Book */\n.ab-layout {\n display: grid;\n grid-template-columns: 220px 1fr;\n height: 100%;\n}\n.ab-list {\n background: #f0f0f0;\n border-right: 1px solid #888;\n overflow-y: auto;\n}\n.ab-row {\n padding: 6px 12px;\n border-bottom: 1px solid #e0e0e0;\n cursor: pointer;\n font-size: 12px;\n}\n.ab-row:hover { background: #e3eefb; }\n.ab-row.selected { background: #4a7bcf; color: white; }\n.ab-row .role { display: block; font-size: 11px; color: #666; }\n.ab-row.selected .role { color: #cce; }\n.ab-detail {\n padding: 16px;\n font-size: 13px;\n line-height: 1.6;\n}\n.ab-detail h2 { font-size: 18px; margin-bottom: 4px; }\n.ab-detail .role { color: #666; margin-bottom: 12px; }\n.ab-detail dt { font-weight: 600; color: #444; margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }\n.ab-detail dd { margin-left: 0; }\n.ab-detail .id-pill {\n display: inline-block;\n background: #e8e8e8;\n border: 1px solid #aaa;\n padding: 1px 6px;\n border-radius: 3px;\n font-family: Monaco, monospace;\n font-size: 10px;\n color: #555;\n}\n\n/* iCal */\n.ical-body {\n padding: 0;\n}\n.ical-day-header {\n background: linear-gradient(180deg, #e7e7e7, #cccccc);\n padding: 6px 12px;\n font-weight: 600;\n border-bottom: 1px solid #aaa;\n font-size: 12px;\n}\n.ical-event {\n padding: 8px 12px;\n border-bottom: 1px solid #eee;\n display: flex;\n gap: 12px;\n align-items: flex-start;\n}\n.ical-event .time {\n width: 80px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n font-size: 12px;\n color: #444;\n}\n.ical-event .body { flex: 1; font-size: 12px; }\n.ical-event .title { font-weight: 600; }\n.ical-event .loc { color: #666; font-size: 11px; }\n.ical-event .ev-notes { color: #555; font-size: 11px; margin-top: 2px; }\n.ical-event .actions { display: flex; gap: 6px; margin-top: 4px; }\n.ical-event .actions button {\n font-size: 11px;\n padding: 2px 8px;\n background: linear-gradient(180deg, #fbfbfb, #d8d8d8);\n border: 1px solid #888;\n border-radius: 3px;\n cursor: pointer;\n font-family: inherit;\n}\n.ical-event .status-badge {\n font-size: 10px;\n padding: 1px 6px;\n border-radius: 8px;\n margin-left: 6px;\n}\n.status-confirmed { background: #d2f0d4; color: #1a6e2a; }\n.status-tentative { background: #fff0c2; color: #6e5a1a; }\n.status-declined { background: #f0d2d2; color: #6e1a1a; }\n\n/* Stickies (notes app) */\n.notes-app .note-card {\n background: #fff7a0;\n margin: 12px;\n padding: 10px 14px;\n font-family: \"Marker Felt\", \"Comic Sans MS\", \"Lucida Grande\", sans-serif;\n font-size: 13px;\n color: #4a3700;\n box-shadow: 1px 2px 4px rgba(0,0,0,0.15);\n white-space: pre-wrap;\n line-height: 1.4;\n}\n.notes-app .note-title {\n font-weight: 700;\n margin-bottom: 6px;\n font-size: 12px;\n}\n.notes-app .note-tags {\n margin-top: 6px;\n font-size: 10px;\n color: #807000;\n font-style: italic;\n}\n\n/* Activity (trace) */\n.activity-app {\n font-family: Monaco, \"Andale Mono\", monospace;\n font-size: 11px;\n background: #1c1c1c;\n color: #e0e0e0;\n padding: 0;\n}\n.activity-row {\n display: flex;\n gap: 8px;\n padding: 4px 10px;\n border-bottom: 1px solid #2c2c2c;\n white-space: pre;\n}\n.activity-row .seq { color: #666; min-width: 24px; }\n.activity-row .kind { min-width: 60px; }\n.activity-row .kind-tool_call { color: #66d9ef; }\n.activity-row .kind-tool_result { color: #a6e22e; }\n.activity-row .kind-tool_error { color: #f92672; }\n.activity-row .tool-name { color: #e6db74; min-width: 130px; }\n.activity-row .payload { color: #aaa; flex: 1; overflow: hidden; text-overflow: ellipsis; }\n.activity-empty {\n padding: 24px;\n text-align: center;\n color: #888;\n font-family: \"Lucida Grande\", sans-serif;\n font-size: 12px;\n}\n\n/* End Day modal */\n.endday-app {\n padding: 24px 28px;\n font-size: 13px;\n line-height: 1.55;\n background: #f8f8f8;\n height: 100%;\n overflow: auto;\n}\n.endday-app h2 { font-size: 16px; margin-bottom: 12px; }\n.endday-app .stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n margin: 12px 0 18px;\n}\n.endday-app .stat {\n background: white;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 8px;\n text-align: center;\n}\n.endday-app .stat .n { font-size: 20px; font-weight: 700; }\n.endday-app .stat .l { font-size: 11px; color: #666; }\n.endday-app .reaction-box {\n background: white;\n border: 1px solid #aaa;\n padding: 16px;\n border-radius: 6px;\n margin-top: 12px;\n font-family: \"Hoefler Text\", Georgia, serif;\n font-size: 14px;\n color: #1a1a1a;\n line-height: 1.6;\n font-style: italic;\n}\n\n\n/* ── Threaded mail (in reading pane) ──────────────────────────────────── */\n.thread-row .thread-count { color: #999; font-weight: 400; font-size: 11px; }\n.thread-row.selected .thread-count { color: #cce; }\n.thread-header {\n font-size: 12px;\n padding: 8px 12px;\n background: #eef3fb;\n border-bottom: 1px solid #c8d4e6;\n color: #1a1a1a;\n}\n.mail-reading.placeholder, .mail-reading:not(:has(.thread-msg)) { white-space: pre-wrap; }\n.thread-msg {\n border-bottom: 1px solid #e8e8e8;\n padding: 10px 14px;\n background: white;\n}\n.thread-msg.older { background: #f7f7f7; opacity: 0.92; }\n.thread-msg-meta {\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n color: #555;\n margin-bottom: 4px;\n}\n.thread-msg-from { font-weight: 600; color: #222; }\n.thread-msg-addr { font-weight: 400; color: #888; }\n.thread-msg-when { font-variant-numeric: tabular-nums; }\n.thread-msg-subject { font-weight: 600; font-size: 12px; margin-bottom: 6px; color: #333; }\n.thread-msg-body {\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 1.5;\n color: #1a1a1a;\n}\n.thread-msg-actions {\n display: flex;\n gap: 6px;\n margin-top: 8px;\n}\n.reply-btn {\n background: linear-gradient(180deg, #fbfbfb, #d8d8d8);\n border: 1px solid #888;\n border-radius: 12px;\n padding: 3px 12px;\n font-size: 11px;\n cursor: pointer;\n font-family: inherit;\n color: #1a4ea0;\n}\n.reply-btn:hover { filter: brightness(0.96); }\n\n\n/* ── Phone interface ──────────────────────────────────────────────────────\n On narrow viewports the desktop metaphor gets out of the way. Status bar\n up top, brief shown as a Notes-style notification, dock recast as a 4-col\n home-screen grid, and any opened window goes fullscreen with an iOS-style\n Done button. Same JS, same routes — pure CSS layer.\n*/\n@media (max-width: 720px) {\n html, body { height: 100%; overflow: hidden; user-select: text; }\n body {\n /* Slightly darker so iOS status bar text reads white */\n background:\n linear-gradient(rgba(12, 26, 56, 0.28), rgba(12, 26, 56, 0.28)),\n url(\"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a4c1e5a1-885b-4be4-ef26-f07c6dcc1800/public\")\n center center / cover no-repeat fixed,\n linear-gradient(180deg, #0e1c3a 0%, #1f4f9e 60%, #143670 100%);\n padding-top: 28px; /* room for status bar */\n min-height: 100dvh;\n font-family: -apple-system, \"SF Pro Text\", \"Helvetica Neue\", \"Lucida Grande\", sans-serif;\n }\n\n /* iOS-style status bar — fixed top */\n body::before {\n content: \"9:41\";\n position: fixed;\n top: 0; left: 0;\n height: 28px;\n padding: 0 18px;\n display: flex;\n align-items: center;\n color: #fff;\n font-size: 14px;\n font-weight: 600;\n z-index: 1100;\n letter-spacing: -0.2px;\n }\n body::after {\n content: \"100%\";\n position: fixed;\n top: 0; right: 0;\n height: 28px;\n padding: 0 16px 0 30px;\n display: flex;\n align-items: center;\n color: #fff;\n font-size: 13px;\n font-weight: 600;\n z-index: 1100;\n /* Battery glyph as inline SVG — renders identically everywhere */\n background-image: url(\"data:image/svg+xml;utf8,\");\n background-repeat: no-repeat;\n background-position: 6px center;\n background-size: 22px 10px;\n }\n\n #menubar { display: none; }\n #mobile-home-link {\n position: fixed;\n top: 31px;\n left: 12px;\n z-index: 2400;\n display: flex;\n width: 30px;\n height: 30px;\n align-items: center;\n justify-content: center;\n border-radius: 15px;\n background: rgba(0,0,0,0.34);\n color: #fff;\n text-decoration: none;\n font-size: 16px;\n font-weight: 700;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n }\n\n #desktop {\n position: fixed;\n top: 28px; left: 0; right: 0; bottom: 0;\n padding: 12px 14px 190px;\n min-height: 0;\n overflow: hidden;\n }\n #windows-layer { position: fixed; inset: 28px 0 0; pointer-events: none; }\n #windows-layer .window { pointer-events: auto; }\n\n /* Brief sticky → Notes-style notification card */\n .sticky {\n position: relative !important;\n transform: none !important;\n width: 100%;\n max-width: 100%;\n margin: 0;\n left: auto !important; top: auto !important;\n background: rgba(255, 255, 255, 0.96);\n background-image: none;\n border-radius: 14px;\n box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);\n border: none;\n color: #1a1a1a;\n overflow: hidden;\n backdrop-filter: blur(18px) saturate(160%);\n -webkit-backdrop-filter: blur(18px) saturate(160%);\n }\n .sticky-handle {\n background: linear-gradient(180deg, #f5f5f7 0%, #e5e5ea 100%);\n height: 22px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n cursor: pointer;\n }\n .sticky-handle::before {\n content: \"MIRANDA · 9:41 AM\";\n flex: 1;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.6px;\n color: #6e6e73;\n padding-left: 12px;\n font-family: -apple-system, \"SF Pro Text\", sans-serif;\n }\n .sticky-close {\n background: #c7c7cc;\n color: #fff;\n width: 16px; height: 16px;\n font-size: 11px;\n }\n .sticky-body {\n padding: 11px 14px 12px;\n font-family: -apple-system, \"SF Pro Text\", \"Lucida Grande\", sans-serif;\n }\n .sticky-title {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.6px;\n color: #6e6e73;\n margin-bottom: 4px;\n }\n .sticky-text {\n font-size: 14px;\n line-height: 1.35;\n color: #1c1c1e;\n max-height: 38px;\n overflow: hidden;\n }\n .sticky.expanded .sticky-text { max-height: min(42vh, 260px); overflow: auto; }\n .sticky-meta {\n color: #8e8e93;\n font-size: 11px;\n font-style: normal;\n margin-top: 5px;\n }\n .sticky:not(.expanded) .sticky-meta::after { content: \" Tap to expand.\"; }\n .sticky.expanded .sticky-meta::after { content: \" Tap the header to collapse.\"; }\n\n /* Dock → iOS home-screen grid */\n #dock {\n position: fixed;\n left: 50%;\n bottom: max(16px, env(safe-area-inset-bottom));\n transform: none;\n background: transparent;\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n border: none;\n border-radius: 0;\n padding: 0;\n margin: 0 auto;\n width: min(360px, calc(100vw - 28px));\n max-width: none;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px 8px;\n justify-items: center;\n box-shadow: none;\n }\n #dock { transform: translateX(-50%); }\n body.has-app-open #dock,\n body.has-app-open #brief-sticky {\n display: none;\n }\n .dock-icon {\n width: auto;\n padding: 0;\n flex-direction: column;\n align-items: center;\n transition: transform 0.1s;\n }\n .dock-icon:hover { transform: none; }\n .dock-icon:active { transform: scale(0.92); }\n .dock-icon .icon {\n width: 60px; height: 60px;\n border-radius: 14px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255,255,255,0.1) inset;\n }\n .dock-label {\n position: static;\n opacity: 1 !important;\n background: transparent;\n color: #fff;\n font-size: 11px;\n font-weight: 500;\n margin-top: 5px;\n padding: 0;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n }\n .dock-separator { display: none; }\n\n /* Windows: fullscreen, no chrome dragging */\n .window {\n position: fixed !important;\n top: 28px !important;\n left: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n width: 100vw !important;\n height: calc(100vh - 28px) !important;\n border-radius: 0;\n box-shadow: none;\n border: none;\n z-index: 2000 !important;\n min-width: 0;\n min-height: 0;\n }\n .window-titlebar {\n cursor: default;\n height: 44px;\n background: linear-gradient(180deg, #f9f9fb 0%, #e9e9ec 100%);\n padding: 0 12px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n }\n .window-traffic {\n margin-left: auto;\n order: 2; /* push to right */\n z-index: 2;\n }\n .window-traffic .tl-green { display: none; }\n .window-traffic .tl-yellow {\n display: inline-flex;\n width: auto; height: auto;\n background: transparent !important;\n border: none;\n border-radius: 0;\n box-shadow: none;\n padding: 8px 4px;\n color: #007aff;\n font-size: 16px;\n font-weight: 500;\n line-height: 1;\n cursor: pointer;\n }\n .window-traffic .tl-yellow::after {\n content: \"Home\";\n color: #007aff;\n letter-spacing: 0.1px;\n }\n .window-traffic .tl-red {\n width: auto; height: auto;\n background: transparent !important;\n border: none;\n border-radius: 0;\n box-shadow: none;\n padding: 8px 4px;\n color: #007aff;\n font-size: 16px;\n font-weight: 500;\n line-height: 1;\n cursor: pointer;\n }\n .window-traffic .tl-red::after {\n content: \"Close\";\n color: #007aff;\n letter-spacing: 0.1px;\n }\n .window-title {\n font-size: 16px;\n font-weight: 600;\n color: #1c1c1e;\n text-shadow: none;\n }\n .window.metal .window-titlebar,\n .window.metal .window-toolbar {\n background:\n linear-gradient(180deg, #f5f5f7 0%, #e3e3e8 100%);\n }\n\n .window-toolbar {\n padding: 8px 12px;\n min-height: 36px;\n }\n .window-toolbar input[type=\"text\"],\n .window-toolbar input[type=\"search\"] {\n font-size: 16px; /* prevent iOS auto-zoom */\n padding: 6px 12px;\n }\n .window-toolbar button {\n font-size: 14px;\n padding: 6px 12px;\n }\n\n /* Mail: stack columns vertically */\n .mail-layout {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n .mail-sidebar {\n border-right: none;\n border-bottom: 1px solid #b8c4d4;\n padding: 8px 12px;\n flex: 0 0 auto;\n }\n .mail-folder { padding: 6px 0; }\n .mail-list {\n flex: 1 1 50%;\n max-height: none !important;\n overflow: auto !important;\n }\n .mail-item { padding: 12px 14px; font-size: 14px; }\n .mail-item .preview { font-size: 12px; }\n .mail-reading {\n flex: 1 1 50%;\n overflow: auto;\n font-size: 14px;\n }\n\n /* Threaded view: comfortable spacing on phone */\n .thread-msg { padding: 12px 14px; }\n .thread-msg-body { font-size: 14px; }\n .thread-msg-meta { font-size: 12px; }\n .reply-btn { font-size: 14px; padding: 6px 14px; }\n\n /* Mail compose: bigger inputs, no iOS zoom */\n .mail-compose select,\n .mail-compose input,\n .mail-compose textarea {\n font-size: 16px;\n padding: 8px 12px;\n }\n .mail-compose .send-btn { padding: 10px 22px; font-size: 15px; }\n\n /* Address Book: stack */\n .ab-layout { display: flex; flex-direction: column; height: 100%; }\n .ab-list {\n border-right: none;\n border-bottom: 1px solid #aaa;\n flex: 0 0 45%;\n max-height: 45vh;\n }\n .ab-row { padding: 10px 14px; font-size: 14px; }\n .ab-detail { font-size: 14px; flex: 1; padding: 14px; }\n\n /* iCal: bigger time column gone, stack body under */\n .ical-event { padding: 10px 14px; }\n .ical-event .time { width: 64px; font-size: 13px; }\n .ical-event .body { font-size: 13px; }\n .ical-event .actions button { padding: 6px 12px; font-size: 13px; }\n\n /* Stickies: bigger cards */\n .notes-app .note-card { font-size: 14px; }\n\n /* Activity: legible on small screens */\n .activity-row { font-size: 11px; }\n\n /* End-of-day report */\n .endday-app { padding: 18px 16px 32px; }\n .endday-app .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }\n .endday-app .stat .n { font-size: 18px; }\n}\n\n\n\n/* ── Errands icon (driver/restaurant) — teal Aqua ──────────────────────── */\n.icon-errands {\n background: transparent;\n}\n\n/* ── Errands app forms (Driver / Restaurant tabs) ──────────────────────── */\n.errands-app { padding: 0; background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%); }\n.errands-form {\n padding: 16px 18px 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n height: 100%;\n overflow: auto;\n}\n.errands-blurb {\n font-size: 12px;\n color: #555;\n line-height: 1.4;\n background: #fffbe9;\n border: 1px solid #e6d99a;\n border-radius: 4px;\n padding: 8px 10px;\n margin-bottom: 4px;\n}\n.errands-form label {\n display: flex;\n flex-direction: column;\n font-size: 11px;\n font-weight: 600;\n color: #444;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n gap: 3px;\n}\n.errands-form input[type=\"text\"],\n.errands-form input[type=\"datetime-local\"],\n.errands-form input[type=\"number\"],\n.errands-form textarea {\n border: 1px solid #888;\n border-radius: 4px;\n padding: 5px 8px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n text-transform: none;\n letter-spacing: normal;\n color: #1a1a1a;\n}\n.errands-form textarea { resize: vertical; }\n.errands-form .form-row {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 4px;\n}\n.errands-form .primary-btn {\n background: linear-gradient(180deg, #79b1ff, #3274d3);\n color: white;\n border: 1px solid #1a4d99;\n border-radius: 4px;\n padding: 6px 18px;\n font-weight: 600;\n cursor: pointer;\n font-family: inherit;\n font-size: 13px;\n}\n.errands-form .primary-btn:hover { filter: brightness(1.05); }\n.errands-form .primary-btn:active { filter: brightness(0.95); }\n.errands-form .form-status {\n font-size: 12px;\n color: #666;\n font-weight: 400;\n}\n\n/* End-Day reaction box — bigger now that it has structure */\n.endday-app .reaction-box .reaction-icon {\n font-size: 48px;\n text-align: center;\n margin-bottom: 4px;\n line-height: 1;\n}\n.endday-app .reaction-box .reaction-type {\n text-align: center;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #6e6e73;\n margin-bottom: 12px;\n font-style: normal;\n}\n.endday-app .reaction-box .reaction-line {\n font-family: \"Hoefler Text\", Georgia, serif;\n font-size: 15px;\n line-height: 1.5;\n color: #1a1a1a;\n font-style: italic;\n margin: 4px 0;\n padding-left: 12px;\n border-left: 2px solid #c8c8c8;\n}\n.endday-app .reaction-box .reaction-summary {\n margin-top: 10px;\n padding-top: 8px;\n border-top: 1px solid rgba(0,0,0,0.1);\n font-size: 11px;\n color: #6e6e73;\n font-style: normal;\n}\n\n\n/* ── iCal → Errands cross-app hint ─────────────────────────────────────── */\n.ical-hint {\n margin-top: 6px;\n padding: 6px 10px;\n background: #fffbe9;\n border: 1px solid #e6d99a;\n border-radius: 4px;\n font-size: 11px;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #6e5a1a;\n}\n.ical-hint .hint-btn {\n margin-left: auto;\n background: linear-gradient(180deg, #79b1ff, #3274d3);\n color: white;\n border: 1px solid #1a4d99;\n border-radius: 3px;\n padding: 3px 10px;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n font-family: inherit;\n}\n.ical-hint .hint-btn:hover { filter: brightness(1.05); }\n.ical-hint .hint-btn:active { filter: brightness(0.92); }\n@media (max-width: 720px) {\n .ical-hint { font-size: 13px; padding: 8px 12px; }\n .ical-hint .hint-btn { padding: 6px 12px; font-size: 13px; }\n}\n\n\n/* ── Launcher overlay ─────────────────────────────────────────────────────\n Floating card centered above the dock. First thing users see on landing.\n Lets them pick: have an AI try the bench, play yourself, or watch a recent run. */\n.launcher {\n position: fixed;\n inset: 0;\n z-index: 1500;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 80px 16px 110px;\n background: rgba(0,0,0,0.18);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n}\n.launcher.hidden { display: none; }\n.launcher-card {\n background: linear-gradient(180deg, #fdfdfd 0%, #f0f0f3 100%);\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.15);\n width: 100%;\n max-width: 560px;\n padding: 22px 26px 22px;\n font-size: 13px;\n color: #1a1a1a;\n user-select: text;\n}\n.launcher-header { margin-bottom: 18px; text-align: center; }\n.launcher-title {\n font-size: 22px;\n font-weight: 700;\n letter-spacing: -0.4px;\n}\n.launcher-sub {\n font-size: 12px;\n color: #6e6e73;\n margin-top: 2px;\n}\n\n.launcher-step { display: none; }\n.launcher-step.active { display: block; }\n\n.launcher-name {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 12px;\n}\n.launcher-name span {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.6px;\n color: #6e6e73;\n font-weight: 700;\n}\n.launcher-name input {\n height: 34px;\n border: 1px solid #b8b8b8;\n border-radius: 6px;\n padding: 6px 9px;\n font: inherit;\n background: #fff;\n color: #1c1c1e;\n box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset;\n}\n\n.launcher-section { margin-bottom: 16px; }\n.launcher-section-label {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.6px;\n color: #6e6e73;\n font-weight: 700;\n margin-bottom: 8px;\n}\n.launcher-choices {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n.launcher-choice {\n min-height: 112px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n padding: 16px;\n background: linear-gradient(180deg, #ffffff, #e8e8ec);\n border: 1px solid #b8b8b8;\n border-radius: 8px;\n font-family: inherit;\n color: #1c1c1e;\n cursor: pointer;\n text-align: left;\n transition: filter 0.1s, transform 0.05s;\n}\n.launcher-choice:hover { filter: brightness(0.97); }\n.launcher-choice:active { transform: translateY(1px); }\n.launcher-choice:disabled {\n opacity: 0.62;\n cursor: wait;\n}\n.launcher-choice.primary {\n background: linear-gradient(180deg, #f7fbff, #d7e8ff);\n border-color: #8eb7ed;\n}\n.choice-title {\n font-size: 17px;\n font-weight: 800;\n line-height: 1.15;\n}\n.choice-sub {\n font-size: 12px;\n line-height: 1.35;\n color: #5f6368;\n}\n.launcher-clients {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 6px;\n}\n.launcher-client {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 9px 10px;\n background: linear-gradient(180deg, #ffffff, #e8e8ec);\n border: 1px solid #b8b8b8;\n border-radius: 7px;\n font-family: inherit;\n font-size: 12px;\n font-weight: 600;\n color: #1c1c1e;\n cursor: pointer;\n transition: filter 0.1s, transform 0.05s;\n text-align: left;\n}\n.launcher-client:hover { filter: brightness(0.96); }\n.launcher-client:active { transform: translateY(1px); }\n.launcher-client .lc-emoji {\n width: 20px;\n text-align: center;\n font-size: 14px;\n}\n\n.launcher-divider {\n text-align: center;\n margin: 14px 0 10px;\n position: relative;\n color: #b0b0b8;\n font-size: 10px;\n letter-spacing: 1px;\n font-weight: 700;\n}\n.launcher-divider::before, .launcher-divider::after {\n content: \"\";\n position: absolute;\n top: 50%;\n width: calc(50% - 24px);\n height: 1px;\n background: #d0d0d6;\n}\n.launcher-divider::before { left: 0; }\n.launcher-divider::after { right: 0; }\n.launcher-divider span { padding: 0 8px; }\n\n.launcher-actions {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n}\n.launcher-action {\n flex: 1;\n min-width: 140px;\n padding: 10px 14px;\n background: linear-gradient(180deg, #ffffff, #d8d8de);\n border: 1px solid #888;\n border-radius: 7px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 600;\n color: #1c1c1e;\n cursor: pointer;\n}\n.launcher-action:hover { filter: brightness(0.97); }\n.launcher-action.primary {\n background: linear-gradient(180deg, #79b1ff, #3274d3);\n color: #fff;\n border: 1px solid #1a4d99;\n}\n\n.launcher-cmd-title {\n font-size: 13px;\n font-weight: 600;\n margin-bottom: 10px;\n}\n.launcher-cmd {\n position: relative;\n background: #1c1c1e;\n color: #e8e8ed;\n border-radius: 7px;\n padding: 12px 14px;\n margin-bottom: 12px;\n font-family: Menlo, Monaco, \"SF Mono\", monospace;\n font-size: 11.5px;\n line-height: 1.5;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-all;\n}\n.launcher-cmd.prompt {\n max-height: 360px;\n overflow: auto;\n word-break: normal;\n}\n.launcher-cmd code { display: block; padding-right: 64px; }\n.launcher-cmd-copy {\n position: absolute;\n top: 8px;\n right: 8px;\n background: rgba(255,255,255,0.12);\n color: #e8e8ed;\n border: 1px solid rgba(255,255,255,0.18);\n border-radius: 5px;\n padding: 4px 9px;\n font-size: 10px;\n font-weight: 700;\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n font-family: inherit;\n}\n.launcher-cmd-copy:hover { background: rgba(255,255,255,0.2); }\n.launcher-cmd-copy.copied { background: #1a6e2a; border-color: #1a6e2a; color: #fff; }\n\n.launcher-cmd-help {\n font-size: 11px;\n color: #6e6e73;\n line-height: 1.5;\n margin-bottom: 12px;\n}\n\n.launcher-runs {\n max-height: 280px;\n overflow: auto;\n border: 1px solid #d0d0d6;\n border-radius: 6px;\n background: #fff;\n margin-bottom: 12px;\n}\n.launcher-run {\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 8px 10px;\n border-bottom: 1px solid #ececef;\n cursor: pointer;\n font-size: 12px;\n}\n.launcher-run:hover { background: #f3f7ff; }\n.launcher-run:last-child { border-bottom: none; }\n.launcher-run .lr-icon { font-size: 18px; width: 24px; text-align: center; }\n.launcher-run .lr-name { flex: 1; font-weight: 600; }\n.launcher-run .lr-meta { font-size: 11px; color: #6e6e73; }\n\n/* Mobile launcher */\n@media (max-width: 720px) {\n .launcher {\n padding: 32px 12px 80px;\n align-items: flex-start;\n }\n .launcher-card {\n max-width: 100%;\n border-radius: 14px;\n padding: 18px 18px 16px;\n }\n .launcher-choices { grid-template-columns: 1fr; }\n .launcher-clients { grid-template-columns: repeat(2, 1fr); }\n .launcher-action { min-width: 0; }\n}\n\n/* ── Spectator banner ────────────────────────────────────────────────────\n Persistent strip at the top of the desktop while watching an AI run. */\n#spectator-banner {\n position: fixed;\n top: 22px;\n left: 0; right: 0;\n z-index: 950;\n background: linear-gradient(180deg, rgba(20,40,90,0.92), rgba(15,30,70,0.92));\n border-bottom: 1px solid rgba(255,255,255,0.18);\n color: #fafafa;\n font-size: 12px;\n padding: 6px 14px;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n#spectator-banner .sb-row {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n#spectator-banner .sb-dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: #5fef5f;\n box-shadow: 0 0 6px rgba(95,239,95,0.7);\n animation: sb-pulse 1.4s ease-in-out infinite;\n}\n@keyframes sb-pulse {\n 0%, 100% { opacity: 0.5; transform: scale(0.85); }\n 50% { opacity: 1; transform: scale(1); }\n}\n#spectator-banner.ended .sb-dot { background: #c8c8c8; box-shadow: none; animation: none; }\n#spectator-banner .sb-label b { font-weight: 700; }\n#spectator-banner .sb-stats {\n margin-left: auto;\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n}\n#spectator-banner .sb-link, #spectator-banner .sb-share-link {\n color: #aacaff;\n text-decoration: underline;\n cursor: pointer;\n font-size: 12px;\n}\n#spectator-banner .sb-copy-btn {\n background: rgba(255,255,255,0.14);\n color: #fafafa;\n border: 1px solid rgba(255,255,255,0.25);\n border-radius: 11px;\n padding: 3px 10px;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n font-family: inherit;\n}\n#spectator-banner .sb-copy-btn:hover { background: rgba(255,255,255,0.22); }\n\n/* Desktop pushed down by banner */\nbody[data-mode=\"spectator\"] #desktop { top: 56px; }\nbody[data-mode=\"spectator\"] #menubar { background: linear-gradient(180deg, #fafafa 0%, #d8d8d8 100%); }\nbody[data-mode=\"spectator\"] #mobile-home-link { top: 86px; }\n\n/* ── Disable interactive controls during spectator mode ──────────────────\n Buttons that issue write tool calls are read-only — the view comes from the\n polled trace, not local actions. We dim them and block pointer events so a\n spectator click can't desync the visualization. */\nbody[data-mode=\"spectator\"] .send-btn,\nbody[data-mode=\"spectator\"] .errands-form .primary-btn,\nbody[data-mode=\"spectator\"] .reply-btn,\nbody[data-mode=\"spectator\"] .ical-event [data-act],\nbody[data-mode=\"spectator\"] .ical-hint .hint-btn,\nbody[data-mode=\"spectator\"] #reset-btn {\n pointer-events: none;\n opacity: 0.45;\n filter: saturate(0.4);\n}\n\n/* ── Spec-flash overlays ─────────────────────────────────────────────────\n Brief floating card for noteworthy actions (honey trap fires, email sent,\n phone call placed, end-of-day reaction). */\n.spec-flash {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n background: rgba(28, 28, 30, 0.96);\n color: #fafafa;\n padding: 22px 28px;\n border-radius: 12px;\n box-shadow: 0 22px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);\n font-family: -apple-system, \"Lucida Grande\", sans-serif;\n font-size: 14px;\n text-align: center;\n z-index: 2500;\n opacity: 0;\n transition: opacity 0.28s ease-out, transform 0.32s cubic-bezier(0.2,0.8,0.4,1.1);\n max-width: 480px;\n pointer-events: none;\n}\n.spec-flash.show {\n opacity: 1;\n transform: translate(-50%, -50%);\n}\n.spec-flash .sf-icon { font-size: 56px; line-height: 1; margin-bottom: 6px; }\n.spec-flash .sf-title {\n font-size: 12px;\n letter-spacing: 2.4px;\n font-weight: 700;\n text-transform: uppercase;\n color: rgba(255,255,255,0.6);\n margin-bottom: 8px;\n}\n.spec-flash .sf-body {\n font-size: 14px;\n line-height: 1.45;\n color: #fafafa;\n}\n.spec-flash .sf-body-flash {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 460px;\n}\n.spec-flash .sf-reply {\n margin-top: 10px;\n padding-top: 10px;\n border-top: 1px solid rgba(255,255,255,0.15);\n font-style: italic;\n font-size: 13px;\n color: #ffd980;\n}\n.spec-flash.honey {\n background: linear-gradient(180deg, rgba(80,52,12,0.97), rgba(40,26,6,0.97));\n border: 1px solid rgba(255,200,80,0.3);\n}\n.spec-flash.reaction {\n background: rgba(28,28,30,0.97);\n pointer-events: auto;\n cursor: pointer;\n padding: 32px 38px 28px;\n}\n.spec-flash.reaction .sf-line {\n font-size: 18px;\n font-style: italic;\n margin: 6px 0;\n line-height: 1.45;\n}\n.spec-flash.reaction .sf-line:before { content: \"“\"; opacity: 0.4; margin-right: 4px; }\n.spec-flash.reaction .sf-line:after { content: \"”\"; opacity: 0.4; margin-left: 4px; }\n.spec-flash.reaction .sf-runlink {\n margin-top: 14px;\n font-size: 12px;\n}\n.spec-flash.reaction .sf-runlink a {\n color: #aacaff;\n text-decoration: underline;\n}\n\n/* On phone, full-width overlays */\n@media (max-width: 720px) {\n #spectator-banner { top: 28px; padding: 8px 12px; }\n body[data-mode=\"spectator\"] #desktop { padding-top: 60px; }\n .spec-flash { left: 12px; right: 12px; transform: translate(0, -40%); max-width: none; }\n .spec-flash.show { transform: translate(0, -50%); }\n}\n\n\n/* ── Spectator tool-call windows ────────────────────────────────────────── */\n.spec-tool-window .window-toolbar {\n display: flex;\n align-items: center;\n gap: 6px;\n min-height: 30px;\n padding: 5px 8px;\n}\n.spec-tool-chip {\n display: inline-flex;\n align-items: center;\n border-radius: 10px;\n padding: 2px 8px;\n background: rgba(255,255,255,0.72);\n border: 1px solid rgba(0,0,0,0.14);\n font-size: 10px;\n line-height: 1.35;\n font-weight: 700;\n color: #3c3c43;\n font-family: Menlo, Monaco, \"SF Mono\", monospace;\n}\n.spec-tool-chip.ok { background: #d6f5dc; color: #155c23; border-color: rgba(21,92,35,0.22); }\n.spec-tool-chip.bad { background: #fde6e6; color: #a32121; border-color: rgba(163,33,33,0.22); }\n.spec-tool-window .window-body { background: #f5f5f7; }\n.spec-app {\n height: 100%;\n overflow: auto;\n padding: 12px;\n color: #1d1d1f;\n user-select: text;\n}\n.spec-searchbar {\n border: 1px solid rgba(0,0,0,0.14);\n background: white;\n border-radius: 6px;\n padding: 7px 9px;\n font-size: 12px;\n margin-bottom: 10px;\n box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);\n}\n.spec-empty {\n background: white;\n border: 1px dashed rgba(0,0,0,0.18);\n border-radius: 6px;\n padding: 16px;\n text-align: center;\n color: #6e6e73;\n font-size: 12px;\n}\n.spec-mail-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 12px;\n color: #6e6e73;\n margin-bottom: 8px;\n}\n.spec-mail-header b {\n color: #1b6b2a;\n text-transform: uppercase;\n font-size: 10px;\n}\n.spec-formline {\n display: grid;\n grid-template-columns: 58px 1fr;\n gap: 8px;\n align-items: center;\n border-bottom: 1px solid #d7d7db;\n padding: 6px 0;\n font-size: 12px;\n}\n.spec-formline label { color: #6e6e73; font-weight: 700; }\n.spec-letter {\n min-height: 130px;\n margin-top: 10px;\n background: white;\n border: 1px solid #d7d7db;\n border-radius: 4px;\n padding: 12px;\n white-space: pre-wrap;\n font: 13px/1.45 Georgia, \"Times New Roman\", serif;\n}\n.spec-mail-row, .spec-contact-card, .spec-event-row {\n background: white;\n border: 1px solid rgba(0,0,0,0.1);\n border-radius: 6px;\n padding: 9px;\n margin-bottom: 8px;\n}\n.spec-mail-row { display: grid; gap: 3px; }\n.spec-mail-row b, .spec-mail-row span { font-size: 12px; }\n.spec-mail-row small, .spec-contact-card small, .spec-event-row span {\n color: #6e6e73;\n font-size: 11px;\n line-height: 1.35;\n}\n.spec-contact-card {\n display: grid;\n grid-template-columns: 42px 1fr;\n gap: 10px;\n align-items: center;\n}\n.spec-avatar {\n width: 42px;\n height: 42px;\n border-radius: 6px;\n background: linear-gradient(180deg, #dfb68a, #9f6740);\n color: white;\n display: grid;\n place-items: center;\n font-size: 24px;\n font-family: Georgia, serif;\n}\n.spec-contact-card div:last-child { display: grid; gap: 2px; }\n.spec-contact-card span { font-size: 11px; color: #5a4a3c; }\n.spec-event-row {\n display: grid;\n grid-template-columns: 68px 1fr auto;\n gap: 9px;\n align-items: start;\n}\n.spec-event-row time {\n font-size: 11px;\n font-weight: 700;\n color: #a13d2d;\n}\n.spec-event-row b { font-size: 12px; }\n.spec-event-row em {\n font-style: normal;\n font-size: 10px;\n border-radius: 9px;\n background: #e8f0ff;\n color: #1a4ea0;\n padding: 2px 7px;\n}\n.spec-calendar-big {\n font-size: 28px;\n font-weight: 800;\n margin: 8px 0 14px;\n color: #b23b2d;\n}\n.spec-event-card, .spec-res-card {\n background: white;\n border: 1px solid rgba(0,0,0,0.13);\n border-radius: 8px;\n padding: 16px;\n display: grid;\n gap: 6px;\n box-shadow: 0 8px 18px rgba(0,0,0,0.08);\n}\n.spec-event-card b, .spec-res-card b { font-size: 17px; }\n.spec-event-card span, .spec-res-card span, .spec-res-card small { color: #6e6e73; }\n.spec-sticky-note {\n background: #fff4a3;\n border: 1px solid #d6c65d;\n box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n padding: 12px;\n margin-bottom: 10px;\n display: grid;\n gap: 6px;\n font-size: 12px;\n}\n.spec-phone-screen {\n background: linear-gradient(180deg, #202124, #070708);\n color: white;\n border-radius: 18px;\n padding: 22px 14px;\n text-align: center;\n box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);\n}\n.spec-phone-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; }\n.spec-phone-intent { color: rgba(255,255,255,0.72); font-size: 12px; line-height: 1.35; }\n.spec-phone-status { margin-top: 14px; color: #6ee58a; font-size: 12px; text-transform: uppercase; font-weight: 800; }\n.spec-transcript {\n margin-top: 10px;\n background: white;\n border-radius: 8px;\n border: 1px solid rgba(0,0,0,0.1);\n padding: 10px;\n font-size: 11px;\n line-height: 1.45;\n white-space: pre-wrap;\n}\n.tts-btn {\n margin-top: 10px;\n width: 100%;\n background: linear-gradient(180deg, #79b1ff, #3274d3);\n color: white;\n border: 1px solid #1a4d99;\n border-radius: 5px;\n padding: 7px 10px;\n font-family: inherit;\n font-weight: 700;\n cursor: pointer;\n}\n.spec-msg-bubble {\n background: #dff0ff;\n border-radius: 16px 16px 16px 4px;\n padding: 12px;\n display: grid;\n gap: 5px;\n font-size: 13px;\n border: 1px solid rgba(0,0,0,0.08);\n}\n.spec-confirm {\n margin-top: 12px;\n color: #1b6b2a;\n font-weight: 800;\n font-size: 12px;\n text-align: right;\n}\n.spec-clock-time {\n margin-top: 36px;\n font-size: 21px;\n font-weight: 800;\n text-align: center;\n}\n.spec-clock-sub { text-align: center; color: #6e6e73; margin-top: 8px; font-size: 12px; }\n.spec-error-title { font-size: 18px; font-weight: 800; color: #a32121; margin-bottom: 8px; }\n.spec-error-body {\n background: white;\n border: 1px solid #f0bcbc;\n border-radius: 6px;\n padding: 10px;\n color: #7d1b1b;\n font-size: 12px;\n}\n.spec-tool-error .window-titlebar { background: linear-gradient(180deg, #fff1f1, #e8bcbc); }\n.spec-tool-honey .window-titlebar { background: linear-gradient(180deg, #fff1d6, #e6bc64); }\n.spec-tool-honey .window-body { background: #fff8e6; }\nbody[data-mode=\"spectator\"] .spec-tool-window { animation: tool-pop 0.28s ease-out; }\n@keyframes tool-pop {\n from { transform: translateY(10px) scale(0.98); opacity: 0; }\n to { transform: translateY(0) scale(1); opacity: 1; }\n}\n",[],[200,326],["D",1777168270439],[217,218,219,220,221,222,223,224,225],[200],["D",1777167345173],["D",1789438866375],{"_11":12,"_92":88},{"_11":12,"_85":86,"_87":88,"_45":46,"_89":90,"_91":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_80":-5,"_81":-5,"_82":-5,"_83":14,"_84":12},"ctx",{"_73":-5,"_114":375,"_376":377,"_378":379,"_380":38,"_381":38,"_382":38,"_383":50,"_384":-5,"_385":-7,"_386":-7,"_387":54,"_388":38,"_389":38,"_390":-5,"_391":38,"_392":38,"_393":38,"_394":-5},"ENV",{"_346":347,"_348":349,"_350":26,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

…

Tools (10)

Prompt: miranda_brief

How the judge sees what you did

Reaction tiers

The brief Miranda just dictated

1. Name your run

2. Copy the prompt

Claude Code (CLI)

Claude Desktop

Cursor

Cline (VS Code)

OpenAI Codex CLI

Goose

Raw HTTP / curl

Share this run

Start a new run

${escape(c.name)}

End-of-day report

${escape(first.name)}

Prompt: `miranda_brief`

Branches1

Branches
1