<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><title>IDE Remote views (dev host)</title><link rel="stylesheet" href="css/shell.css"><link rel="stylesheet" href="css/views.css"><style>nav{display:flex;gap:6px;padding:6px} nav button{min-height:40px;flex:1;font:inherit} #views{flex:1;min-height:0;position:relative} section[hidden]{display:none}</style></head><body><nav id="nav"></nav><div id="views"><section class="panel" id="panel-claude"></section><section class="panel" id="panel-terminal" hidden></section><section class="panel" id="panel-files" hidden></section></div><script>// A fake host: feeds the views the way the real one will (?dev fixtures only; nothing leaves this page).const handlers = {};const b64 = (s) => btoa(unescape(encodeURIComponent(s)));window.IdeRemote = { panels: [{id:'claude'},{id:'terminal'},{id:'files'}], scope: 'all', state: 'connected', snap() {}, send() {}, on(name, fn) { (handlers[name] = handlers[name] || []).push(fn); return () => {}; }, invoke(name, p) { if (name === 'claude.send') { setTimeout(demoTurn, 300, p.prompt); return Promise.resolve({ id: 9 }); } if (name === 'terminal.open') return Promise.resolve({ id: 'T1', pty: true, shell: 'bash' }); if (name === 'files.list') return Promise.resolve({ files: ['src/Main.php', 'src/Scene/PlayScene.php', 'config/project.yaml', 'README.md', 'assets/x.png'].map((path) => ({ path, size: 100 })) }); if (name === 'file.read') return Promise.resolve({ path: p.path, text: true, content: Array.from({ length: 30 }, (_, i) => `<?php // line ${i + 1} of ${p.path} with a rather long line to check horizontal scrolling on a phone`).join('\n') }); return Promise.resolve(null); },};const emit = (n, p) => (handlers[n] || []).forEach((f) => f(p));const ev = (event) => emit('claude.event', { id: 9, event });function demoTurn(prompt) { ev({ type: 'system', subtype: 'init', model: 'claude-sonnet' }); ev({ type: 'assistant', message: { content: [{ type: 'thinking', thinking: 'Let me look at the project.' }, { type: 'tool_use', name: 'Read', input: { file_path: 'src/Main.php' } }] } }); ev({ type: 'stream_event', event: { type: 'content_block_start', content_block: { type: 'text' } } }); ev({ type: 'stream_event', event: { type: 'content_block_delta', delta: { text: 'Working on **' + prompt + '**…' } } });}document.addEventListener('DOMContentLoaded', () => {});</script><script type="module" src="js/views/claude.js"></script><script type="module" src="js/views/terminal.js"></script><script type="module" src="js/views/files.js"></script><script type="module">const nav = document.getElementById('nav');const show = (id) => { document.querySelectorAll('section').forEach((s) => s.hidden = s.id !== 'panel-' + id); emit('panel', id); };for (const id of ['claude', 'terminal', 'files']) nav.append(Object.assign(document.createElement('button'), { textContent: id, onclick: () => show(id) }));setTimeout(() => {// snapshots as a late joiner gets thememit('snap', { panel: 'claude', conv: 'c1', items: [ { role: 'user', text: 'Add a jump to the player' }, { role: 'thinking', text: 'I should read PlayScene first.' }, { role: 'tool', name: 'Read', input: { file_path: 'src/Scene/PlayScene.php' } }, { role: 'tool', name: 'Bash', input: { command: 'bin/jumphp test mygame' } }, { role: 'tool-error', text: 'phpstan: 1 error' }, { role: 'assistant', text: '## Done\nI added **jump** in `PlayScene`:\n\n```php\n$this->vy = -300;\n```\n\n- test passes\n- shot looks right' }, { role: 'done', text: 'Done · 12 s · 3 action(s)' },] });emit('snap', { panel: 'terminal', id: 'T1', data: b64('\x1b[32muser@pc\x1b[0m:~/project$ bin/jumphp test mygame\r\nOK (3 tests)\r\n\x1b[32muser@pc\x1b[0m:~/project$ '), cols: 80, rows: 24 });const want = location.hash.slice(1) || 'claude'; show(want);if (want === 'files') setTimeout(() => document.querySelector('.rv-row:nth-child(1)')?.click(), 200);if (want === 'claude') setTimeout(() => demoTurn('jump height'), 200);}, 300);</script></body></html>