Web: live streaming — show running cost and what the agent is doing in real time

Adds a streaming solve path so the UI is transparent *during* the run, not just
after:
- MathAgent.solve(on_event=...) emits an event per step (llm turn, tool_start,
tool) carrying the running token/cost usage
- /api/solve_stream streams NDJSON events while the solve runs (thread + queue),
ending with a final "done" payload
- UI consumes the stream: a live meter (tokens · $cost · elapsed · calls) and a
live timeline that fills in as the model reasons and tools run; "working…"
shows the current action
- ui -> studio-v7-stream, badge studio · v7

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

ai4math_demo

@@ -0,0 +1 @@
+Subproject commit e6275bc1aacd15849cef746cb4a0d389f367dab9

mathagent/agent/math_agent.py

@@ -104,7 +104,11 @@ class MathAgent(BaseAgent):
         if usage.get("model"):
             t["model"] = usage["model"]
 
-    def solve(self, task: Task) -> Trajectory:
+    def solve(self, task: Task, on_event=None) -> Trajectory:
+        """Solve ``task``. If ``on_event`` is given, it is called with a dict for
+        each step as it happens (live streaming): an ``llm`` event after every
+        model turn and a ``tool`` event after every tool run, each carrying the
+        running token/cost usage so far under ``running``."""
         messages = [
             LLMMessage("system", self._system()),
             LLMMessage("user", self._user(task)),
@@ -112,6 +116,14 @@ class MathAgent(BaseAgent):
         steps: list[dict] = []
         self.last_usage = {}
 
+        def _emit(ev: dict) -> None:
+            if on_event:
+                ev["running"] = dict(self.last_usage)
+                try:
+                    on_event(ev)
+                except Exception:
+                    pass
+
         def _traj(output: str) -> Trajectory:
             return Trajectory(
                 task_id=task.id,
@@ -131,6 +143,8 @@ class MathAgent(BaseAgent):
                 {"type": "llm", "turn": turn + 1, "text": text,
                  "reasoning": reasoning, "usage": resp.usage or {}}
             )
+            _emit({"ev": "step", "type": "llm", "turn": turn + 1,
+                   "reasoning": reasoning, "usage": resp.usage or {}})
 
             final = _FINAL_RE.search(text)
             if final:
@@ -146,8 +160,10 @@ class MathAgent(BaseAgent):
 
             results = []
             for name, body in calls:
+                _emit({"ev": "step", "type": "tool_start", "tool": name, "input": body})
                 out = self.tools.run(name, body)
                 steps.append({"type": "tool", "tool": name, "input": body, "output": out})
+                _emit({"ev": "step", "type": "tool", "tool": name, "input": body, "output": out})
                 results.append(f"<tool:{name}> result:\n{out}")
             messages.append(
                 LLMMessage(

mathagent/web/server.py

@@ -20,7 +20,7 @@ import uuid
 from pathlib import Path
 
 from fastapi import FastAPI
-from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 
@@ -157,7 +157,7 @@ def create_app(
         return JSONResponse(
             {
                 "status": "ok",
-                "ui": "studio-v6-katex",
+                "ui": "studio-v7-stream",
                 "provider": cfg["provider_kind"],
                 "model": _resolved_model(),
                 "python": cfg["enable_python"],
@@ -212,6 +212,62 @@ def create_app(
             }
         )
 
+    @app.post("/api/solve_stream")
+    async def solve_stream(req: SolveRequest) -> StreamingResponse:
+        """Live streaming: emits one NDJSON line per agent step (with running
+        token/cost usage), then a final ``done`` line with the full result."""
+        import asyncio
+        import queue
+        import threading
+
+        cfg = app.state.cfg
+        prov = build_provider(req.provider or cfg["provider_kind"], model=req.model or cfg["model"])
+        py = cfg["enable_python"] if req.enable_python is None else req.enable_python
+        ln = cfg["enable_lean"] if req.enable_lean is None else req.enable_lean
+        tools = default_registry(python=py, lean=ln)
+        agent = MathAgent(cfg["workspace"], prov, tools=tools, max_steps=req.max_steps)
+        model = req.model or _resolved_model()
+
+        q: queue.Queue = queue.Queue()
+
+        def run() -> None:
+            t0 = time.time()
+            try:
+                traj = agent.solve(
+                    Task(id=uuid.uuid4().hex[:8], input=req.problem), on_event=q.put
+                )
+                files: dict[str, str] = {}
+                if req.format != "none":
+                    name = f"sol-{uuid.uuid4().hex[:8]}"
+                    produced = export(traj.output, cfg["out_dir"], name=name, fmt=req.format)
+                    for kind, p in produced.items():
+                        if kind in ("tex", "pdf", "docx"):
+                            files[kind] = f"/files/{Path(p).name}"
+                q.put({"ev": "done", "result": {
+                    "solution": traj.output, "answer": extract_boxed(traj.output),
+                    "files": files, "model": model, "elapsed_s": round(time.time() - t0, 2),
+                    "usage": getattr(agent, "last_usage", {}), "steps": traj.steps,
+                }})
+            except Exception as e:
+                q.put({"ev": "error", "error": f"{type(e).__name__}: {e}"})
+            finally:
+                q.put(None)
+
+        threading.Thread(target=run, daemon=True).start()
+
+        async def gen():
+            loop = asyncio.get_event_loop()
+            while True:
+                ev = await loop.run_in_executor(None, q.get)
+                if ev is None:
+                    break
+                yield json.dumps(ev) + "\n"
+
+        return StreamingResponse(
+            gen(), media_type="application/x-ndjson",
+            headers={"Cache-Control": "no-store", "X-Accel-Buffering": "no"},
+        )
+
     return app
 
 

mathagent/web/static/index.html

@@ -118,7 +118,7 @@
   <div class="logo"><span class="mark">∑</span> mathagent</div>
   <span class="tagline">math solving &amp; proofs</span>
   <div class="right">
-    <span class="badge">studio · v6</span>
+    <span class="badge">studio · v7</span>
     <span class="dot" title="online"></span>
     <span id="cfg">…</span>
   </div>
@@ -304,23 +304,62 @@ function addHistory(d){
     `<div class="it" data-h="${i}"><div class="q">${escapeHtml(h.problem)}</div><div class="a">${escapeHtml(h.answer||'—')} · ${escapeHtml((h.model||'').replace('openrouter/',''))}</div></div>`).join('');
   $('history').querySelectorAll('[data-h]').forEach(el=>el.addEventListener('click',()=>renderResult(state.history[+el.dataset.h])));
 }
+function liveMeterHtml(run, t0){
+  const u=run||{};
+  return `<b>${u.total_tokens||0}</b> tok &nbsp;·&nbsp; <b>$${Number(u.cost_usd||0).toFixed(4)}</b>`
+       + ` &nbsp;·&nbsp; <b>${((Date.now()-t0)/1000).toFixed(1)}s</b>`
+       + ` &nbsp;·&nbsp; ${u.llm_calls||0} calls`;
+}
 async function solve(){
   const problem=$('problem').value.trim(); if(!problem) return;
   const btn=$('go'); btn.disabled=true;
   $('emptyState').classList.add('hidden');
   const body=$('resultBody'); body.classList.remove('hidden');
   const t0=Date.now();
-  body.innerHTML=`<div style="color:var(--muted);padding:8px 2px"><span class="spinner"></span> &nbsp;solving… <span id="el">0.0s</span></div>`;
-  const tick=setInterval(()=>{const e=$('el'); if(e) e.textContent=((Date.now()-t0)/1000).toFixed(1)+'s';},100);
+  let run={};
+  body.innerHTML=`
+    <div class="answer-banner" style="background:var(--surface2);border-color:var(--line)">
+      <div><div class="lab">working…</div><div class="val"><span class="spinner"></span> <span id="liveAct">starting…</span></div></div>
+      <span class="verified" id="liveMeter" style="background:var(--surface);color:var(--muted);border-color:var(--line)">0 tok · $0.0000 · 0.0s</span>
+    </div>
+    <div class="timeline" id="liveTl"></div>`;
+  const liveSteps=[];
+  const tick=setInterval(()=>{const e=$('liveMeter'); if(e) e.innerHTML=liveMeterHtml(run,t0);},100);
+  const setAct=t=>{const e=$('liveAct'); if(e) e.textContent=t;};
+  const redraw=()=>{const e=$('liveTl'); if(e){ e.innerHTML=timelineHtml(liveSteps); typeset(e);} };
+
   try{
     const req={problem, format:$('format').value, enable_python:$('python').checked, enable_lean:$('lean').checked};
     let m=$('model').value; if(m==='__custom__') m=$('modelCustom').value.trim(); if(m) req.model=m;
-    const r=await fetch('/api/solve',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(req)});
-    const d=await r.json(); clearInterval(tick);
-    if(!r.ok||d.error){ body.innerHTML=`<div class="err">${escapeHtml(d.error||('HTTP '+r.status))}</div>`; return; }
-    d.problem=problem; renderResult(d); addHistory(d);
-  }catch(e){ clearInterval(tick); body.innerHTML=`<div class="err">${escapeHtml(e)}</div>`; }
-  finally{ btn.disabled=false; }
+    const r=await fetch('/api/solve_stream',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(req)});
+    if(!r.ok||!r.body){ const d=await r.json().catch(()=>({})); throw new Error(d.error||('HTTP '+r.status)); }
+    const reader=r.body.getReader(); const dec=new TextDecoder(); let buf='';
+    let finished=false;
+    while(!finished){
+      const {value,done}=await reader.read(); if(done) break;
+      buf+=dec.decode(value,{stream:true});
+      let nl;
+      while((nl=buf.indexOf('\n'))>=0){
+        const line=buf.slice(0,nl).trim(); buf=buf.slice(nl+1);
+        if(!line) continue;
+        const ev=JSON.parse(line);
+        if(ev.ev==='step'){
+          if(ev.running) run=ev.running;
+          if(ev.type==='llm'){ setAct(`step ${ev.turn}: reasoning`); liveSteps.push(ev); redraw(); }
+          else if(ev.type==='tool_start'){ setAct(`running ${ev.tool}…`); }
+          else if(ev.type==='tool'){ setAct(`${ev.tool} done`); liveSteps.push(ev); redraw(); }
+          $('liveMeter').innerHTML=liveMeterHtml(run,t0);
+        } else if(ev.ev==='done'){
+          clearInterval(tick); finished=true;
+          const d=ev.result; d.problem=problem; renderResult(d); addHistory(d);
+        } else if(ev.ev==='error'){
+          clearInterval(tick); finished=true;
+          body.innerHTML=`<div class="err">${escapeHtml(ev.error)}</div>`;
+        }
+      }
+    }
+  }catch(e){ clearInterval(tick); body.innerHTML=`<div class="err">${escapeHtml(e.message||e)}</div>`; }
+  finally{ clearInterval(tick); btn.disabled=false; }
 }
 $('go').addEventListener('click', solve);
 $('problem').addEventListener('keydown', e=>{ if((e.metaKey||e.ctrlKey)&&e.key==='Enter') solve(); });