2a:null 2b:["$","title",null,{"children":"Roboco-op 5 | Tom Larkworthy | Observable"}] 31:T4ed8,robocoop_5 = { hostSetup; contextSetup; // boots the situational-context providers wherever the chat renders (same pattern as hostSetup) const C = { bg: '#0d1117', fg: '#c9d1d9', muted: '#8b949e', border: '#30363d', user: '#1f6feb', asst: '#161b22', tool: '#21262d', accent: '#7ee787', err: '#ff7b72' }; const root = html`

`; // ── credentials / model / prompt (collapsed by default) ────────────────── const cfg = html`

⚙ settings — key, model, system prompt

`; const cfgBody = html`

`; // Observable Inputs render with a light-theme palette (near-invisible on the dark UI). Force legible colors // on the form controls + labels; scoped to .rc5-settings so it can't leak into the agent's own rendered cells. cfgBody.append(html``); cfgBody.append(keyView, modelView, promptView, contextToggle, reasoningToggle); cfg.append(cfgBody); root.append(cfg); // ── transcript ─────────────────────────────────────────────────────────── // flex:1 + min-height:0 scrolls when the pane bounds us; max-height is a fallback so the log // scrolls (and the input bar stays reachable) even when lopepage gives the cell an unbounded height. const log = html`

`; root.append(log); const bubble = (side, bgc, node) => { const wrap = document.createElement('div'); wrap.style.cssText = 'display:flex;justify-content:' + (side === 'right' ? 'flex-end' : 'flex-start'); const b = document.createElement('div'); b.style.cssText = 'max-width:85%;padding:6px 10px;border-radius:10px;background:' + bgc + ';border:1px solid ' + C.border + ';white-space:normal;overflow-wrap:anywhere'; b.append(node); wrap.append(b); return wrap; }; // A user message is a string, or OpenAI content parts (text + image_url) when images were attached. const renderContent = content => { const frag = document.createDocumentFragment(); if (Array.isArray(content)) { for (const p of content) { if (p?.type === 'image_url' && p.image_url?.url) { const im = document.createElement('img'); im.src = p.image_url.url; im.style.cssText = 'max-width:220px;max-height:160px;border-radius:6px;margin-top:4px;display:block'; frag.append(im); } else if (p?.type === 'text' && p.text) { const d = document.createElement('div'); d.textContent = p.text; frag.append(d); } } } else { frag.append(document.createTextNode(String(content ?? ''))); } return frag; }; let busy = false; const errors = []; // surfaced agent failures (e.g. OpenRouter 402); part of render state so they persist let lastOutcome = null; // a turn-end summary shown when the agent stops WITHOUT a final reply (so it's never silent) // Live per-step status — a cheap, persistent line so a running turn is never silent. Updated directly // (textContent), NOT through the heavy render() that wipes+re-parses every bubble. let stepN = 0; const statusEl = document.createElement('div'); statusEl.style.cssText = 'display:none;color:' + C.accent + ';font-size:12px;font-style:italic;padding:4px 10px;border-top:1px solid ' + C.border; const setStatus = txt => { statusEl.textContent = txt || ''; statusEl.style.display = txt ? 'block' : 'none'; }; // ── live reasoning ──────────────────────────────────────────────────────── // A thinking model streams its reasoning for seconds before its first visible token (measured on // mimo-v2.5-pro: 0.7–5.9s to the first reasoning delta, 9.0–40.3s to the first content/tool-call // delta), so the transcript used to sit blank for that whole window. ONE persistent

holds // it: chunks are appended to a single text node (appendData, O(1)) — never a re-render per token, // which would re-parse and relayout every bubble in the log on every chunk. render() is called // exactly once per step, when the block first appears. const thinkEl = document.createElement('details'); thinkEl.style.cssText = 'display:none;color:' + C.muted + ';font-size:11.5px;padding:0 4px;opacity:.85'; const thinkSum = document.createElement('summary'); thinkSum.style.cssText = 'cursor:pointer;list-style-position:inside;font-style:italic'; const thinkPre = document.createElement('pre'); thinkPre.style.cssText = 'white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 0;max-height:9em;overflow-y:auto;color:' + C.muted + ';font-size:11px'; const thinkText = document.createTextNode(''); thinkPre.append(thinkText); thinkEl.append(thinkSum, thinkPre); let thinkChars = 0; // characters streamed for the CURRENT step (0 ⇒ block is not in the transcript) let thinkAnchor = -1; // messages.length when this step's thinking began → keeps it ABOVE the reply it produced const thinkReset = () => { thinkText.data = ''; thinkChars = 0; thinkAnchor = -1; thinkEl.style.display = 'none'; }; const thinkAppend = chunk => { const first = thinkChars === 0; thinkChars += chunk.length; thinkText.appendData(chunk); thinkSum.textContent = '\u{1F4AD} thinking… ' + thinkChars + ' chars'; if (first) { thinkAnchor = session.messages.length; thinkEl.open = true; thinkEl.style.display = ''; render(); // once, to place the block; every later chunk is appendData only } log.scrollTop = log.scrollHeight; }; // The moment real output lands, the thinking is history: collapse it (kept, subdued, expandable) so a // wall of deliberation never pushes the actual answer off-screen. const thinkSettle = () => { if (!thinkChars) return; thinkEl.open = false; thinkSum.textContent = '\u{1F4AD} thought ' + thinkChars + ' chars'; }; // Memoized render: md-parse each message bubble ONCE per content change (cached by message identity in a // WeakMap), reuse the node otherwise, then reconcile with replaceChildren. With no terminal pane, an // assistant message's tool_calls render as a compact muted activity line so the agent's work is visible // in place (the transcript is the ONLY surface). const msgCache = new WeakMap(); const activityLine = calls => { const d = document.createElement('div'); d.style.cssText = 'color:' + C.muted + ';font-size:11.5px;padding:0 4px'; d.textContent = '\u2699 ' + calls.map(c => { let args = c?.function?.arguments; try { if (typeof args === 'string') args = JSON.parse(args); } catch { args = {}; } return toolLabel(c?.function?.name || 'tool', args); }).join(' \xB7 '); return d; }; const cacheKey = m => String(m.content ?? '') + '|' + (Array.isArray(m.tool_calls) ? m.tool_calls.length : 0); const renderMsg = m => { // Injected situational context: shown as a muted collapsible line so the human can audit exactly // what the agent was told. Other system messages (nudges, watch updates) stay hidden. if (m.role === 'system' && typeof m.content === 'string' && m.content.startsWith(' { const desired = []; let mi = 0; for (const m of session.messages) { // The reasoning block goes where it started — before the assistant message it produced, not after it. if (mi++ === thinkAnchor && thinkChars) desired.push(thinkEl); const c = msgCache.get(m); let wrap; if (c && (m.role === 'user' || c.key === cacheKey(m))) wrap = c.wrap; // unchanged → reuse else { wrap = renderMsg(m); msgCache.set(m, { key: cacheKey(m), wrap }); } if (wrap) desired.push(wrap); } // In flight: the reply it is thinking about has not been pushed yet, so the block trails the transcript. if (thinkChars && thinkAnchor >= session.messages.length) desired.push(thinkEl); for (const er of errors) { const d = document.createElement('div'); d.style.cssText = 'color:' + C.err + ';background:#2d0f0f;border:1px solid ' + C.err + ';border-radius:8px;padding:6px 10px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere'; d.textContent = '\u26A0 agent error \u2014 ' + er; desired.push(d); } if (lastOutcome) { const d = document.createElement('div'); d.style.cssText = 'color:' + C.muted + ';font-size:12px;font-style:italic;text-align:center;padding:4px 10px'; d.textContent = lastOutcome; desired.push(d); } log.replaceChildren(...desired); log.scrollTop = log.scrollHeight; }; render(); // ── input (with image attachments — paste, drop, or 📎) ───────────────────── const pendingImages = []; // data URLs staged for the next send; shown as removable thumbnails const thumbs = html``; const renderThumbs = () => { thumbs.innerHTML = ''; thumbs.style.display = pendingImages.length ? 'flex' : 'none'; pendingImages.forEach((url, i) => { const w = document.createElement('div'); w.style.cssText = 'position:relative'; const im = document.createElement('img'); im.src = url; im.style.cssText = 'width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid ' + C.border; const x = document.createElement('button'); x.textContent = '\xD7'; x.title = 'remove'; x.style.cssText = 'position:absolute;top:-6px;right:-6px;width:18px;height:18px;line-height:15px;border-radius:50%;border:0;background:' + C.err + ';color:#fff;cursor:pointer;font-size:12px;padding:0'; x.addEventListener('click', () => { pendingImages.splice(i, 1); renderThumbs(); }); w.append(im, x); thumbs.append(w); }); }; const addImageFile = f => new Promise(res => { if (!f || !/^image\//.test(f.type || '')) return res(); const fr = new FileReader(); fr.onload = () => { pendingImages.push(fr.result); renderThumbs(); res(); }; fr.onerror = () => res(); fr.readAsDataURL(f); }); const ta = html``; const fileInput = html``; const attach = html``; const send = html``; const stop = html``; const newchat = html``; const bar = html`

`; bar.append(newchat, attach, ta, send, stop, fileInput); // Active-model line: makes a mid-conversation model switch visibly take effect. const modelEl = document.createElement('div'); modelEl.style.cssText = 'color:' + C.muted + ';font-size:11px;padding:0 10px 4px;text-align:right'; const refreshModel = () => { const sel = modelView.querySelector?.('select'); const label = sel?.selectedOptions?.[0]?.textContent?.trim() || modelView.value || '\u2014'; modelEl.textContent = 'model: ' + label; }; refreshModel(); // Switching the picker mid-turn interrupts the in-flight call so the new model drives the very next step. modelView.addEventListener('input', () => { refreshModel(); if (busy) { session.interrupt?.(); setStatus('\u21AA switching model \u2192 ' + (modelView.value || '') + ' \xB7 step ' + stepN); } }); root.append(thumbs, statusEl, modelEl, bar); attach.addEventListener('click', () => fileInput.click()); fileInput.addEventListener('change', async () => { for (const f of fileInput.files) await addImageFile(f); fileInput.value = ''; }); ta.addEventListener('paste', async ev => { const items = ev.clipboardData?.items || []; let had = false; for (const it of items) if (it.type && it.type.startsWith('image/')) { const f = it.getAsFile(); if (f) { had = true; await addImageFile(f); } } if (had) ev.preventDefault(); }); root.addEventListener('dragover', ev => { ev.preventDefault(); root.style.outline = '2px dashed ' + C.accent; root.style.outlineOffset = '-2px'; }); root.addEventListener('dragleave', ev => { if (ev.target === root) root.style.outline = ''; }); root.addEventListener('drop', async ev => { ev.preventDefault(); root.style.outline = ''; for (const f of ev.dataTransfer?.files || []) await addImageFile(f); }); const submit = async () => { const text = ta.value.trim(); if (!text && !pendingImages.length) return; const images = pendingImages.splice(0); // take and clear the staged images const input = images.length ? { text: text || null, images } : text; // STEERING: if a turn is already running, inject this as a redirect into the live conversation (aborts the // in-flight model call so the agent reads it on the next step) rather than blocking. if (busy) { session.steer?.(input); ta.value = ''; renderThumbs(); setStatus('\u21AA steering\u2026 \xB7 step ' + stepN); ta.focus(); return; } busy = true; ta.value = ''; send.textContent = 'Steer'; stop.style.display = ''; errors.length = 0; lastOutcome = null; stepN = 0; renderThumbs(); setStatus('\u25CF thinking\u2026'); try { // send() pushes the user message synchronously before its first await, so kicking it off and rendering // immediately shows the user's bubble right away. Tool calls land in the transcript as activity lines // (render on each tool call), and the cheap statusEl carries the live signal. const p = session.send(input, { onStep: i => { stepN = (i | 0) + 1; thinkReset(); // each step thinks afresh; the previous step's deliberation is spent setStatus('\u25CF thinking\u2026 \xB7 step ' + stepN); }, // Streamed reasoning — the only thing arriving during the long silence before the first visible token. onReasoningToken: thinkAppend, onToolCall: (callId, name, args) => { thinkSettle(); setStatus('\u2699 ' + toolLabel(name, args) + ' \xB7 step ' + stepN); render(); }, onToolResult: () => setStatus('\u25CF thinking\u2026 \xB7 step ' + stepN), onSteer: render, // a steered user message was injected into the running turn → show its bubble onInterrupt: () => { thinkReset(); // the interrupted call's partial reasoning dies with the call setStatus('\u21AA redirecting\u2026 \xB7 step ' + stepN); render(); }, onText: () => { thinkSettle(); render(); }, onFinish: render }); render(); const result = await p; // If the turn produced no closing assistant text, show why it ended so the user is never left guessing. const last = session.messages[session.messages.length - 1]; if (!(last && last.role === 'assistant' && last.content)) lastOutcome = summarizeTurn(result); } catch (err) { errors.push(err && err.message ? err.message : String(err)); } finally { busy = false; send.textContent = 'Send'; stop.style.display = 'none'; thinkSettle(); // collapse whatever the last step thought (incl. an aborted one) — it stays readable // above the reply it produced until the next step starts thinking afresh setStatus(''); render(); ta.focus(); } }; send.addEventListener('click', submit); stop.addEventListener('click', () => { if (busy) { session.abort?.(); setStatus('\u23F9 stopping\u2026'); } }); // New chat: abort any running turn, then wipe the LLM conversation history. The agent's built modules // are separate and are NOT touched — only the chat context is reset. newchat.addEventListener('click', () => { if (busy) session.abort?.(); session.reset?.(); thinkReset(); errors.length = 0; lastOutcome = null; stepN = 0; setStatus(''); render(); ta.focus(); }); ta.addEventListener('keydown', ev => { if (ev.key === 'Enter' && !ev.shiftKey) { ev.preventDefault(); submit(); } }); return root; }32:[] 2e:{"id":"d96593582dba0de5","slug":"robocoop-5","title":"Roboco-op 5","thumbnail":"17b64ff8a1878d75b1170aa550ae956577e9483e1c9c337c1cad3ff4abd79c2c","access_level":"public","create_time":"$D2026-07-07T20:07:27.604Z","update_time":"$D2026-08-18T17:48:03.083Z","view_time":null,"first_public_time":"$D2026-07-07T20:07:45.801Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":60,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"86b5d3ba55d60f6e","slug":"robocoop-5","title":"robocoop-5","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Roboco-op 5","cells":[{"id":50,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"import { session, contextToggle, reasoningToggle, keyView, modelView, promptView } from \"@tomlarkworthy/robocoop-5-engine\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import { summarizeTurn, toolLabel } from \"@tomlarkworthy/robocoop-5-core\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"import { hostSetup } from \"@tomlarkworthy/robocoop-5-srctools\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"import { contextSetup } from \"@tomlarkworthy/robocoop-5-context\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"