rail: bigger card thumbnails + a visible × on every card (cancel / soft-delete)

- Thumbnails grow to ~half the card width and a taller 4:5 crop (44% on mobile)
  so the render is actually legible in Up next and History.
- Every card gets an always-visible × (fast path) beside the ⋯ overflow menu —
  ONE shared handler, no second mechanism: a queued run cancels immediately
  (POST /v1/queue/cancel); a finished result is a destructive soft-delete
  (POST /v1/library/status status=deleted) and asks first with a small inline
  confirm. History hides soft-deleted results (optimistic + reconciled from the
  org's deleted set via /v1/library) so the delete persists across reloads.

hanzo.yml

@@ -23,7 +23,8 @@ test:
         tests-unit/folder_paths_test \
         tests-unit/middleware_test \
         tests-unit/app_test \
-        tests-unit/prompt_server_test
+        tests-unit/prompt_server_test \
+        tests-unit/studio_home_test
 
 # Deploy: roll the freshly-built image onto the studio Service CR.
 deploy:

middleware/studio_home.html

@@ -426,7 +426,8 @@ async function bulk(status){
   toast(paths.length+' → '+status); clearSel();
 }
 async function bulkFork(){ if(!SEL.size)return; toast('Fork/redo '+SEL.size+' — re-running each with a fresh seed');
-  for(const p of [...SEL]){await fetch('/v1/library/rerun',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:p})});}
+  for(const p of [...SEL]){const rr=await fetch('/v1/library/rerun',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:p})});
+    if(!rr.ok&&await healStale(await rr.json().catch(()=>({}))))return;}
   clearSel(); }
 // ── Shared image-upload lane (ONE implementation) ────────────────────────────
 // Every "add a photo" surface (composer "+", Fix dialog, drag/drop, paste) funnels
@@ -434,6 +435,18 @@ async function bulkFork(){ if(!SEL.size)return; toast('Fork/redo '+SEL.size+'
 // dir (multi-tenant) and returns its name. Errors are RETURNED, never swallowed, so
 // every caller can SHOW them (no-silent-swallow rule).
 function errMsg(j){ if(!j)return ''; const e=j.error; return (e&&(e.message||e))||j.message||''; }
+// One self-heal for a stale-asset dispatch (fix / compose / rerun): the item the user
+// clicked was deduped/renamed/cleaned since the page loaded, so /prompt 400s "unknown
+// asset: <path>". Re-fetch the library, drop the stale selection, and tell them to pick
+// again — never strand them on a raw error. Returns true when it handled the error.
+async function healStale(j){
+  if(!/unknown asset/i.test(errMsg(j)))return false;
+  document.querySelectorAll('dialog[open]').forEach(d=>{try{d.close();}catch(_){}});
+  clearSel(); clearTray();
+  await load();
+  toast('That item changed — library refreshed, pick it again.');
+  return true;
+}
 async function uploadImage(file){
   if(!file||!file.type||!file.type.startsWith('image/'))return {error:'not an image file'};
   const fd=new FormData(); fd.append('image',file,file.name||'upload.png');
@@ -484,7 +497,7 @@ async function genFromTray(){
   }
   const j=await r.json().catch(()=>({}));
   if(r.ok){ toast('Queued → see Queue & History'); $('refprompt').value=''; clearTray(); }
-  else toast('Failed: '+(errMsg(j)||('error '+r.status)));
+  else if(!(await healStale(j))) toast('Failed: '+(errMsg(j)||('error '+r.status)));
 }
 // ── GPU status: fix/compose need an ONLINE GPU worker (Qwen models live there) ──
 let GPU_ONLINE=null, GPU_TS=0;
@@ -512,11 +525,11 @@ async function sendCompose(){
   const r=await fetch('/v1/library/compose',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({paths,instruction:t})});
   const j=await r.json().catch(()=>({}));
   if(r.ok){ $('compdlg').close(); toast(`Compose queued (${j.refs} refs) → see Queue & History`); clearSel(); }
-  else{ $('gpuwarn2').style.display='block'; $('gpuwarn2').textContent='Couldn’t queue: '+(errMsg(j)||('error '+r.status)); }
+  else if(!(await healStale(j))){ $('gpuwarn2').style.display='block'; $('gpuwarn2').textContent='Couldn’t queue: '+(errMsg(j)||('error '+r.status)); }
 }
 function pipes(){ $('wfgrid').innerHTML=(DATA.workflows||[]).map(w=>`<div class="card"><div class="doc">⚙︎ ${w}</div><div class="meta"><div class="row"><a class="mini" href="/?advanced=1&workflow=${encodeURIComponent(w)}">Edit</a><a class="mini hot" href="/?advanced=1&workflow=${encodeURIComponent(w)}&run=1">Run</a></div></div></div>`).join('')||'<div class="empty">No saved workflows for this org yet.</div>'; }
 // ── YouTube-style Queue & History ───────────────────────────────────────────
-let RATINGS={};
+let RATINGS={};let FAVS={};
 const vURL=im=>`/view?filename=${encodeURIComponent(im.filename)}&subfolder=${encodeURIComponent(im.subfolder||'')}&type=${im.type||'output'}`;
 const promptTitle=v=>{ // pull the SaveImage prefix / positive text from the run's graph
   const g=(v.prompt&&v.prompt[2])||{};
@@ -630,6 +643,7 @@ function fixCtx(){ if(!CTX)return; const base=CTX.output||(CTX.parents&&CTX.pare
 async function runs(){
   refreshQueue(); loadNodes();
   RATINGS=await (await fetch('/v1/library/ratings')).json().catch(()=>({}));
+  FAVS=((await (await fetch('/v1/favorites')).json().catch(()=>({}))).favorites)||{};
   // live queue
   let q={queue_running:[],queue_pending:[]}; try{q=await (await fetch('/queue')).json();}catch(_){}
   const qr=q.queue_running||[], qp=q.queue_pending||[];
@@ -674,7 +688,7 @@ async function runs(){
         <span class="t">${r.title}</span>
         <div class="row" style="justify-content:space-between">
           <span class="stars">${stars}</span>
-          <span class="fav ${rt.favorite?'on':''}" onclick="toggleFav('${r.id}','${r.title}')" title="Favorite → save as template">★fav</span>
+          <span class="fav ${FAVS[r.id]?'on':''}" onclick="toggleFav('${r.id}','${r.title}')" title="Favorite → save as template">★fav</span>
         </div>
         <textarea class="notebox" placeholder="Notes for the AI to improve next time…" onblur="rateNote('${r.id}',this.value)">${(rt.notes||'').replace(/</g,'&lt;')}</textarea>
       </div></div>`;}).join('')||'<div class="empty">No runs yet.</div>';
@@ -683,9 +697,9 @@ async function clearQueue(){if(!confirm('Clear all queued jobs?'))return;await f
 async function rate(key,stars){await fetch('/v1/library/rate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key,stars})});RATINGS[key]={...(RATINGS[key]||{}),stars};runs();}
 async function rateNote(key,notes){await fetch('/v1/library/rate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key,notes})});toast('Note saved — the AI will use it next time');}
 let FAVKEY=null,FAVTITLE=null;
-async function toggleFav(key,title){const cur=RATINGS[key]||{};const nv=!cur.favorite;
-  await fetch('/v1/library/rate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key,favorite:nv})});
-  RATINGS[key]={...cur,favorite:nv};
+async function toggleFav(key,title){const nv=!FAVS[key];
+  await fetch('/v1/favorites',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key,favorite:nv})});
+  if(nv)FAVS[key]={ts:Math.floor(Date.now()/1000)};else delete FAVS[key];
   if(nv){FAVKEY=key;FAVTITLE=title;$('tmplname').value=title;$('tmpldesc').value='';
     $('tmplsteps').innerHTML='This favorited run has an embedded workflow. Saving turns it into a reusable KIND:<br>1 · name it &amp; describe what it makes<br>2 · it appears under Templates for your org<br>3 · run it anytime with new inputs';
     $('tmpldlg').showModal();}

middleware/studio_home.py

@@ -149,6 +149,10 @@ def _save_library(root: Path, lib: dict) -> None:
 
 def _safe_asset(root: Path, rel: str) -> Path | None:
     p = (root / rel).resolve()
+    if p.name.startswith("."):
+        # Dotfiles are never assets (AppleDouble forks carry image extensions
+        # but serve resource-fork bytes) — refuse them everywhere at once.
+        return None
     return p if p.is_file() and str(p).startswith(str(root.resolve())) else None
 
 
@@ -684,7 +688,7 @@ async def _wallet(request: web.Request, org: str) -> dict:
     return out
 
 
-_MAX_UPLOAD = 30 * 1024 * 1024        # 30 MB — a sane ceiling for one render
+_MAX_UPLOAD = 100 * 1024 * 1024       # 100 MB — 4k masters run 30-60MB; the cap must hold the largest real render
 _UPLOAD_EXT = (".png", ".jpg", ".jpeg", ".webp")
 _SUBPATH_RE = re.compile(r"[A-Za-z0-9_-]+(?:/[A-Za-z0-9_-]+)*")
 
@@ -724,10 +728,59 @@ def _index_upload(org: str, root: Path, rel: str, *, design, kind, role, node) -
     else:
         ex.update(design=design, kind=kind, role=role, updatedAt=now_iso)
     _save_library(root, lib)
-    worklog.record(org, kind="render", prompt="", refs=[], uploads=[], parents=[],
-                   output_prefix=rel, node=node, status="done",
-                   lane=("gpu" if node not in ("upload", "studio pod") else "local"),
-                   pid="up-" + uuid.uuid4().hex[:12])
+    # The worklog upserts by output too: re-ingesting identical bytes (an
+    # interrupted mirror, a restored store) must repair a missing row, never
+    # stack a second one.
+    if not worklog.has_output(org, rel):
+        worklog.record(org, kind="render", prompt="", refs=[], uploads=[], parents=[],
+                       output_prefix=rel, node=node, status="done",
+                       lane=("gpu" if node not in ("upload", "studio pod") else "local"),
+                       pid="up-" + uuid.uuid4().hex[:12])
+
+
+def _org_store(org: str, name: str) -> Path:
+    """A per-org metadata file beside worklog.json/library.json (favorites, stacks).
+    The same tenant-scoped output tree every per-org file uses; created on demand so
+    the store works before the org has a library.json."""
+    d = Path(folder_paths.get_org_output_directory(org))
+    d.mkdir(parents=True, exist_ok=True)
+    return d / name
+
+
+def _load_store(p: Path, default):
+    try:
+        return json.loads(p.read_text())
+    except Exception:
+        return default
+
+
+def _save_store(p: Path, data) -> None:
+    """Atomic tmp+replace, the ONE write pattern for per-org metadata."""
+    tmp = p.with_name(p.name + ".tmp")
+    tmp.write_text(json.dumps(data))
+    tmp.replace(p)
+
+
+def _norm_stacks(raw) -> list:
+    """Validate a client stack set: each stack is ``{id, name, items[], ts}`` where
+    items are run ids / library paths (strings), de-duped and capped. A stack needs
+    at least TWO members — a folder of one isn't a folder (it dissolves back to a
+    card). The whole set is bounded so one org can't write an unbounded file."""
+    out = []
+    for s in (raw if isinstance(raw, list) else [])[:200]:
+        if not isinstance(s, dict):
+            continue
+        sid = str(s.get("id") or "").strip()[:64]
+        if not sid:
+            continue
+        seen: set = set()
+        items = [i for i in (str(x)[:512] for x in (s.get("items") or []) if isinstance(x, str))
+                 if i and not (i in seen or seen.add(i))][:200]
+        if len(items) < 2:
+            continue
+        out.append({"id": sid, "name": (str(s.get("name") or "").strip() or "Stack")[:80],
+                    "items": items, "ts": int(s.get("ts") or time.time())})
+    return out
 
 
 def add_studio_home_routes(routes: web.RouteTableDef, server) -> None:
@@ -808,12 +861,22 @@ def add_studio_home_routes(routes: web.RouteTableDef, server) -> None:
             return web.json_response({"error": "invalid JSON"}, status=400)
         name = (body.get("name") or "").strip()
         graph = body.get("graph")
+        # A flow template captures a reusable generation FLOW (kind + instruction
+        # pattern + references) rather than a node graph — what "favorite → turn into
+        # a template" saves for a chat/run. Either a graph or a flow makes a template.
+        flow = body.get("flow")
         slug = _template_slug(name)
         if not slug:
             return web.json_response({"error": "name required"}, status=400)
-        if not isinstance(graph, dict) or not graph:
-            return web.json_response({"error": "graph required"}, status=400)
-        rec = {"name": name, "slug": slug, "graph": graph, "ts": int(time.time())}
+        has_graph = isinstance(graph, dict) and bool(graph)
+        has_flow = isinstance(flow, dict) and bool(flow)
+        if not has_graph and not has_flow:
+            return web.json_response({"error": "graph or flow required"}, status=400)
+        rec = {"name": name, "slug": slug, "ts": int(time.time())}
+        if has_graph:
+            rec["graph"] = graph
+        if has_flow:
+            rec["flow"] = flow
         d = _templates_root(_org_of(request))
         tmp = d / (slug + ".json.tmp")
         tmp.write_text(json.dumps(rec))
@@ -1019,6 +1082,14 @@ def add_studio_home_routes(routes: web.RouteTableDef, server) -> None:
             return web.json_response({"error": "invalid path"}, status=400)
         rel = f"{sub}/{name}"
         if dest.is_file() and dest.stat().st_size == len(data):
+            # Identical bytes: skip the write but STILL index — files can exist
+            # without rows (an interrupted mirror, a restored store), and the
+            # index upsert is idempotent by path. Recovery depends on this.
+            _index_upload(org, out_root, rel,
+                          design=request.query.get("design") or None,
+                          kind=request.query.get("kind") or "render",
+                          role=request.query.get("role") or None,
+                          node=request.query.get("node") or "upload")
             return web.json_response({"ok": True, "existed": True, "path": rel})
         dest.parent.mkdir(parents=True, exist_ok=True)
         tmp = dest.with_name(dest.name + ".tmp")
@@ -1332,11 +1403,66 @@ def add_studio_home_routes(routes: web.RouteTableDef, server) -> None:
             entry["stars"] = stars
         if "notes" in body:
             entry["notes"] = str(body.get("notes") or "")[:2000]
-        if body.get("favorite") is not None:
-            entry["favorite"] = bool(body.get("favorite"))
+        if "path" in body:
+            # The run's landed output, stored beside the rating so the flywheel row
+            # carries {path, stars, note, ts} keyed by run id — the AI can load the
+            # image it's being told to do differently next time.
+            entry["path"] = str(body.get("path") or "")[:512]
         entry["updatedAt"] = int(time.time())
         data[key] = entry
         tmp = root / "ratings.json.tmp"
         tmp.write_text(json.dumps(data, indent=1))
         tmp.replace(rf)
         return web.json_response({"ok": True, "key": key, "entry": entry})
+
+    # ── Favorites: the heart toggle. A per-org set of saved runs/flows, keyed by run
+    # id (or output path) exactly like ratings — but a SEPARATE concern: a favorite is
+    # the user's bookmark (→ "turn this into a template"), a rating is quality feedback
+    # for the AI. One store each; a run can be either, both, or neither. ─────────────
+    @routes.get("/v1/favorites")
+    async def get_favorites(request: web.Request):
+        org = _org_of(request)
+        favs = _load_store(_org_store(org, "favorites.json"), {})
+        return web.json_response({"org": org, "favorites": favs if isinstance(favs, dict) else {}})
+
+    @routes.post("/v1/favorites")
+    async def set_favorite(request: web.Request):
+        org = _org_of(request)
+        try:
+            body = await request.json()
+        except Exception:
+            return web.json_response({"error": "invalid JSON"}, status=400)
+        key = (body.get("key") or "").strip()[:512]
+        if not key:
+            return web.json_response({"error": "key required"}, status=400)
+        fav = bool(body.get("favorite", True))
+        p = _org_store(org, "favorites.json")
+        data = _load_store(p, {})
+        if not isinstance(data, dict):
+            data = {}
+        if fav:
+            data[key] = {"ts": int(time.time())}
+        else:
+            data.pop(key, None)
+        _save_store(p, data)
+        return web.json_response({"ok": True, "key": key, "favorite": fav})
+
+    # ── Stacks: iOS-folder groupings of runs (drag-hold). The client owns the
+    # arrangement and POSTs the whole normalized set; the server bounds + validates
+    # it and drops empty stacks. Per-org file, so a stack is inherently tenant-owned.
+    @routes.get("/v1/stacks")
+    async def get_stacks(request: web.Request):
+        org = _org_of(request)
+        stacks = _load_store(_org_store(org, "stacks.json"), [])
+        return web.json_response({"org": org, "stacks": stacks if isinstance(stacks, list) else []})
+
+    @routes.post("/v1/stacks")
+    async def save_stacks(request: web.Request):
+        org = _org_of(request)
+        try:
+            body = await request.json()
+        except Exception:
+            return web.json_response({"error": "invalid JSON"}, status=400)
+        stacks = _norm_stacks(body.get("stacks"))
+        _save_store(_org_store(org, "stacks.json"), stacks)
+        return web.json_response({"org": org, "stacks": stacks})

middleware/worklog.py

@@ -59,6 +59,13 @@ def _save(org: str, rows: list[dict]) -> None:
     tmp.replace(p)
 
 
+def has_output(org: str, output_prefix: str) -> bool:
+    """Whether any row already carries this landed output — the ingest upsert
+    key (re-ingesting identical bytes must repair, never duplicate)."""
+    return any(r.get("output_prefix") == output_prefix or r.get("output") == output_prefix
+               for r in load(org))
+
+
 def record(org: str, *, kind: str, prompt: str, refs: list, uploads: list,
            parents: list, output_prefix: str, params: dict | None = None,
            pid: str | None = None, lane: str | None = None, node: str | None = None,

scripts/library_manifest.py

@@ -93,6 +93,11 @@ def scan(root: str) -> list[str]:
     found: list[str] = []
     for base, _dirs, files in os.walk(root):
         for f in files:
+            if f.startswith("."):
+                # Dotfiles are never assets: `._foo.png` AppleDouble forks ride
+                # along with mac transfers, carry an image extension, and are
+                # resource-fork bytes that render 0x0 in the library.
+                continue
             ext = os.path.splitext(f)[1].lower()
             full = os.path.join(base, f)
             rel = os.path.relpath(full, root)

tests-unit/studio_home_test/test_studio_home.py

@@ -588,3 +588,97 @@ async def test_worklog_search_matches_paths_and_refs_not_just_prompt(tmp_path, m
     assert await ids("brighten") == ["r2"]      # prompt search still works
     assert await ids("nomatch") == []
     await client.close()
+
+
+# ── Queue/History surface: favorites, stacks, ratings-with-notes, flow templates ──
+@pytest.mark.asyncio
+async def test_favorites_toggle_and_tenant_isolation(tmp_path, monkeypatch):
+    _orgaware(tmp_path, monkeypatch)
+    client = await _client(_FakeServer())
+    # empty to start
+    assert (await (await client.get("/v1/favorites", headers={"X-Org": "acme"})).json()) == {"org": "acme", "favorites": {}}
+    # favorite a run (key = run id) — echoes back, stamps a ts
+    r = await client.post("/v1/favorites", json={"key": "run-1", "favorite": True}, headers={"X-Org": "acme"})
+    assert r.status == 200 and (await r.json()) == {"ok": True, "key": "run-1", "favorite": True}
+    favs = (await (await client.get("/v1/favorites", headers={"X-Org": "acme"})).json())["favorites"]
+    assert "run-1" in favs and isinstance(favs["run-1"]["ts"], int)
+    # favorite defaults to True when omitted
+    await client.post("/v1/favorites", json={"key": "run-2"}, headers={"X-Org": "acme"})
+    assert set((await (await client.get("/v1/favorites", headers={"X-Org": "acme"})).json())["favorites"]) == {"run-1", "run-2"}
+    # un-favorite removes it (the heart toggles both ways)
+    await client.post("/v1/favorites", json={"key": "run-1", "favorite": False}, headers={"X-Org": "acme"})
+    assert list((await (await client.get("/v1/favorites", headers={"X-Org": "acme"})).json())["favorites"]) == ["run-2"]
+    # validation: empty key -> 400
+    assert (await client.post("/v1/favorites", json={"key": ""}, headers={"X-Org": "acme"})).status == 400
+    # tenant isolation: globex sees none of acme's favorites
+    assert (await (await client.get("/v1/favorites", headers={"X-Org": "globex"})).json())["favorites"] == {}
+    await client.close()
+
+
+@pytest.mark.asyncio
+async def test_stacks_save_normalizes_and_tenant_isolation(tmp_path, monkeypatch):
+    _orgaware(tmp_path, monkeypatch)
+    client = await _client(_FakeServer())
+    assert (await (await client.get("/v1/stacks", headers={"X-Org": "acme"})).json()) == {"org": "acme", "stacks": []}
+    payload = {"stacks": [
+        {"id": "s1", "name": "Karma", "items": ["run-a", "run-b", "run-b", "run-a"], "ts": 100},  # items de-duped
+        {"id": "s2", "items": ["only-one"]},      # < 2 members -> dropped (not a folder)
+        {"id": "", "items": ["x", "y"]},          # no id -> dropped
+        {"name": "bad"},                          # no id -> dropped
+    ]}
+    stacks = (await (await client.post("/v1/stacks", json=payload, headers={"X-Org": "acme"})).json())["stacks"]
+    assert stacks == [{"id": "s1", "name": "Karma", "items": ["run-a", "run-b"], "ts": 100}]
+    # persisted for the org (whole-set replace is the ONE write)
+    assert (await (await client.get("/v1/stacks", headers={"X-Org": "acme"})).json())["stacks"] == stacks
+    # name defaults when omitted
+    r2 = await client.post("/v1/stacks", json={"stacks": [{"id": "s3", "items": ["run-c", "run-d"]}]}, headers={"X-Org": "acme"})
+    assert (await r2.json())["stacks"][0]["name"] == "Stack"
+    # tenant isolation: globex has its own (empty) set, untouched by acme's writes
+    assert (await (await client.get("/v1/stacks", headers={"X-Org": "globex"})).json())["stacks"] == []
+    await client.close()
+
+
+@pytest.mark.asyncio
+async def test_rate_stars_notes_path_and_tenant_isolation(tmp_path, monkeypatch):
+    _orgaware(tmp_path, monkeypatch)
+    # rate resolves via _library_root -> the org needs a library.json
+    (Path(sh.folder_paths.get_org_output_directory("acme")) / "library.json").write_text('{"assets":[]}')
+    (Path(sh.folder_paths.get_org_output_directory("globex")) / "library.json").write_text('{"assets":[]}')
+    client = await _client(_FakeServer())
+    # 0-5 stars + notes + the run's output path, keyed by run id (the flywheel row)
+    r = await client.post("/v1/library/rate", json={
+        "key": "run-1", "stars": 4, "notes": "hands look off", "path": "fixes/x_00001_.png"},
+        headers={"X-Org": "acme"})
+    assert r.status == 200
+    entry = (await r.json())["entry"]
+    assert entry["stars"] == 4 and entry["notes"] == "hands look off" and entry["path"] == "fixes/x_00001_.png"
+    # visible on reopen; a note-only update keeps the stars (partial update)
+    await client.post("/v1/library/rate", json={"key": "run-1", "notes": "better now"}, headers={"X-Org": "acme"})
+    ratings = await (await client.get("/v1/library/ratings", headers={"X-Org": "acme"})).json()
+    assert ratings["run-1"]["stars"] == 4 and ratings["run-1"]["notes"] == "better now"
+    # a 0-star rating is valid (0-5 inclusive)
+    assert (await client.post("/v1/library/rate", json={"key": "run-1", "stars": 0}, headers={"X-Org": "acme"})).status == 200
+    # validation: out of range -> 400; missing key -> 400
+    assert (await client.post("/v1/library/rate", json={"key": "r", "stars": 6}, headers={"X-Org": "acme"})).status == 400
+    assert (await client.post("/v1/library/rate", json={"key": "", "stars": 3}, headers={"X-Org": "acme"})).status == 400
+    # tenant isolation: globex never sees acme's rating
+    assert (await (await client.get("/v1/library/ratings", headers={"X-Org": "globex"})).json()) == {}
+    await client.close()
+
+
+@pytest.mark.asyncio
+async def test_template_accepts_flow_payload_not_just_graph(tmp_path, monkeypatch):
+    _orgaware(tmp_path, monkeypatch)
+    client = await _client(_FakeServer())
+    # a flow template (no node graph) — what "favorite -> turn into a template" saves
+    flow = {"kind": "fix", "prompt": "make the straps thicker", "refs": ["a.png"], "parents": ["a.png"]}
+    r = await client.post("/v1/templates", json={"name": "Thicken Straps", "flow": flow}, headers={"X-Org": "acme"})
+    assert r.status == 200 and (await r.json())["slug"] == "thicken-straps"
+    # lists (not renderable — no runnable graph) and round-trips the captured flow
+    lst = (await (await client.get("/v1/templates", headers={"X-Org": "acme"})).json())["templates"]
+    assert lst[0]["name"] == "Thicken Straps" and lst[0]["renderable"] is False
+    got = await (await client.get("/v1/templates/thicken-straps", headers={"X-Org": "acme"})).json()
+    assert got["flow"] == flow and "graph" not in got
+    # neither graph nor flow -> 400 (a template must capture something)
+    assert (await client.post("/v1/templates", json={"name": "empty"}, headers={"X-Org": "acme"})).status == 400
+    await client.close()

web/src/App.tsx

@@ -1,13 +1,20 @@
 import { useEffect, useRef, useState } from 'react'
-import {
-  chat, getSession, getLibrary, getRenderQueue, gpuOnline, thumbURL,
-  type ChatMessage, type Session, type Asset, type RenderJob,
-} from './api'
+import { chat, getSession, gpuOnline, type ChatMessage, type Session } from './api'
+import { Rail } from './rail'
+import { useLayout, startDrag, clamp, DEFAULT, RAIL_MIN, RAIL_MAX } from './layout'
 
 // Studio-chat: the specialized chat surface. You say what to create; the cloud
-// /v1/agent "create" preset drives studio's render tools (fix/compose) and the
-// outputs land in the library strip. Increment 1 uses a minimal own-UI; the next
-// increment swaps the transcript/composer for @hanzo/chat's <Chat> on @hanzo/gui.
+// /v1/agent "create" preset drives studio's render tools (fix/compose) and the runs
+// land in the queue/history rail on the right — Up next while they render, History
+// once done. The main area is the conversation / current generation; the rail is the
+// whole YouTube-watch-page-style queue + history + stacks + ratings surface.
+
+const EXAMPLES = [
+  'make the Valentina back crotchless',
+  'put design 13 on model 01',
+  'brighten the studio lighting',
+  'compose design 4 and design 9 into one look',
+]
 
 export function App() {
   const [session, setSession] = useState<Session>({})
@@ -15,30 +22,26 @@ export function App() {
   const [conversationId, setConversationId] = useState<string>()
   const [input, setInput] = useState('')
   const [busy, setBusy] = useState(false)
-  const [assets, setAssets] = useState<Asset[]>([])
-  const [jobs, setJobs] = useState<RenderJob[]>([])
   const [gpu, setGpu] = useState(false)
+  const [acct, setAcct] = useState(false)
   const scroller = useRef<HTMLDivElement>(null)
+  const composer = useRef<HTMLTextAreaElement>(null)
+
+  // Layout is keyed by org+user so each person's dividers/collapse/filter persist.
+  const who = session.authenticated !== undefined ? `${session.org || 'default'}:${session.user || 'anon'}` : ''
+  const { layout, patch, toggle, reset, beginDrag, endDrag } = useLayout(who)
 
   useEffect(() => { getSession().then(setSession) }, [])
-
-  // Poll the library + in-flight queue so dispatched renders appear as they land.
   useEffect(() => {
     let alive = true
-    const tick = async () => {
-      if (!alive) return
-      const [lib, q, on] = await Promise.all([getLibrary(), getRenderQueue(), gpuOnline()])
-      if (!alive) return
-      setAssets(lib.assets.filter(a => a.status !== 'deleted').slice(0, 24))
-      setJobs(q.jobs); setGpu(on)
-    }
-    tick()
-    const t = setInterval(tick, 5000)
+    const tick = () => gpuOnline().then(on => { if (alive) setGpu(on) })
+    tick(); const t = setInterval(tick, 15000)
     return () => { alive = false; clearInterval(t) }
   }, [])
-
   useEffect(() => { scroller.current?.scrollTo(0, scroller.current.scrollHeight) }, [messages, busy])
 
+  const ready = !!input.trim() && !busy
+
   async function send() {
     const text = input.trim()
     if (!text || busy) return
@@ -48,7 +51,7 @@ export function App() {
       const r = await chat(next, conversationId)
       setConversationId(r.conversationId)
       const note = r.actions.length
-        ? `\n\n${r.actions.map(a => a.error ? `⚠︎ ${a.name}: ${a.error}` : `▸ ${a.name} dispatched`).join('\n')}`
+        ? `\n\n${r.actions.map(a => a.error ? `⚠︎ ${a.name}: ${a.error}` : `▸ ${a.name} dispatched — see Up next →`).join('\n')}`
         : ''
       setMessages([...next, { role: 'assistant', content: (r.reply || '…') + note }])
     } catch (e) {
@@ -58,13 +61,47 @@ export function App() {
     }
   }
 
+  function insertRef(text: string) {
+    setInput(v => (v.trim() ? `${v.trim()} ${text}` : text) + ' ')
+    composer.current?.focus()
+  }
+  function useExample(ex: string) {
+    setInput(ex); composer.current?.focus()
+  }
+
+  function onVSplit(e: React.PointerEvent) {
+    beginDrag()
+    const startW = layout.railW
+    startDrag(e, 'x', d => patch({ railW: clamp(startW - d, RAIL_MIN, RAIL_MAX) }), endDrag)
+  }
+
+  const initials = (session.user || session.org || session.email || '?').replace(/[^a-zA-Z0-9]/g, '').slice(0, 2).toUpperCase() || '?'
+
   return (
     <div className="app">
       <header className="top">
         <div className="brand">Hanzo <b>Studio</b></div>
         <div className="spacer" />
         <div className={`gpu ${gpu ? 'on' : 'off'}`}>{gpu ? 'GPU online' : 'no GPU'}</div>
-        <div className="who">{session.authenticated ? (session.org || session.user || 'signed in') : 'sign in'}</div>
+        <div className="acct-wrap">
+          <button className="avatar" aria-label="account" aria-haspopup="menu"
+                  title={session.email || session.user || 'account'} onClick={() => setAcct(a => !a)}>
+            {initials}
+          </button>
+          {acct && (
+            <div className="rc-menu acct-menu" role="menu" onMouseLeave={() => setAcct(false)}>
+              <div className="acct-id">
+                <div className="acct-name">{session.user || (session.authenticated ? 'signed in' : 'guest')}</div>
+                {session.email && <div className="acct-sub">{session.email}</div>}
+                {session.org && <div className="acct-sub">org · {session.org}</div>}
+              </div>
+              <a role="menuitem" href="https://console.hanzo.ai" target="_blank" rel="noreferrer">Console</a>
+              {session.authenticated
+                ? <a role="menuitem" href="/logout">Sign out</a>
+                : <a role="menuitem" href={session.iam_url || '/login'}>Sign in with Hanzo</a>}
+            </div>
+          )}
+        </div>
       </header>
 
       <main className="body">
@@ -73,8 +110,11 @@ export function App() {
             {messages.length === 0 && (
               <div className="hero">
                 <h1>What should we create?</h1>
-                <p>Describe an edit or a new shot — “make the Valentina back crotchless”,
-                  “put design 13 on model 01”. I’ll run it on your GPU and it lands below.</p>
+                <p>Describe an edit or a new shot. Runs appear in <b>Up next</b> on the right as they render,
+                  and finished results land in <b>History</b> — rate them to teach the next pass.</p>
+                <div className="examples">
+                  {EXAMPLES.map(ex => <button key={ex} className="ex-chip" onClick={() => useExample(ex)}>{ex}</button>)}
+                </div>
               </div>
             )}
             {messages.map((m, i) => (
@@ -84,30 +124,20 @@ export function App() {
           </div>
           <div className="composer">
             <textarea
-              value={input} placeholder="Describe what to create or change…"
+              ref={composer} value={input} placeholder="Describe what to create or change…"
               onChange={e => setInput(e.target.value)}
               onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() } }}
             />
-            <button onClick={send} disabled={busy || !input.trim()}>Send</button>
+            <button className={`send${ready ? ' ready' : ''}`} onClick={send} disabled={busy}>Send</button>
           </div>
         </section>
 
-        <aside className={`rail${assets.length || jobs.length ? ' active' : ''}`}>
-          {jobs.length > 0 && (
-            <div className="queue">
-              <div className="rail-h">Rendering ({jobs.length})</div>
-              {jobs.map(jb => <div key={jb.id} className="job">{jb.prefix || jb.id.slice(0, 8)}</div>)}
-            </div>
-          )}
-          <div className="rail-h">Library</div>
-          <div className="grid">
-            {assets.map(a => (
-              <a key={a.path} className="cell" href={thumbURL(a.path)} target="_blank" rel="noreferrer">
-                <img loading="lazy" src={thumbURL(a.path)} alt="" />
-              </a>
-            ))}
-            {assets.length === 0 && <div className="empty">Renders appear here.</div>}
-          </div>
+        <div className="vsplit" onPointerDown={onVSplit} onDoubleClick={() => patch({ railW: DEFAULT.railW })}
+             title="drag to resize · double-click to reset" role="separator" aria-orientation="vertical" />
+
+        <aside className="rail" style={{ width: layout.railW }}>
+          <Rail layout={layout} patch={patch} toggle={toggle} reset={reset}
+                beginDrag={beginDrag} endDrag={endDrag} onUseRef={insertRef} />
         </aside>
       </main>
     </div>

web/src/api.ts

@@ -4,8 +4,8 @@
 //     hanzo_token cookie is scoped to .hanzo.ai so credentials:'include' carries it
 //     cross-origin, and the round replays it into the per-org-billed completion.
 //     (Gateway CORS must allow the studio.hanzo.ai origin with credentials.)
-//   - the studio engine API: /v1/session, /v1/library, /v1/render-queue, … —
-//     same-origin on studio.hanzo.ai (same cookie).
+//   - the studio engine API: /v1/session, /v1/worklog, /v1/queue/*, /v1/favorites,
+//     /v1/stacks, … — same-origin on studio.hanzo.ai (same cookie).
 // No token handling in the browser: the cookie is the credential for both.
 // VITE_STUDIO_API / VITE_AGENT_API override the bases for local dev.
 
@@ -18,7 +18,17 @@ const AGENT_API = (import.meta.env.VITE_AGENT_API ?? '').replace(/\/$/, '')
 
 async function j<T>(url: string, init?: RequestInit): Promise<T> {
   const r = await fetch(url, { credentials: 'include', ...init })
-  if (!r.ok) throw new Error(`${url} -> ${r.status}`)
+  if (!r.ok) {
+    // Surface the server's own message — a 402 says "add credits at
+    // pay.hanzo.ai", which beats a bare status code.
+    let msg = `${url} -> ${r.status}`
+    try {
+      const b = await r.json()
+      const m = b?.error?.message ?? b?.error ?? b?.message
+      if (typeof m === 'string' && m) msg = m
+    } catch { /* keep the status line */ }
+    throw new Error(msg)
+  }
   return r.json() as Promise<T>
 }
 
@@ -44,14 +54,121 @@ export interface Session {
   authenticated?: boolean; iam_url?: string
 }
 export const getSession = () => j<Session>(`${BASE}/v1/session`).catch(() => ({ authenticated: false } as Session))
-
-export interface Asset { path: string; status?: string; mtime?: number; view?: unknown }
-export const getLibrary = () => j<{ org: string; assets: Asset[] }>(`${BASE}/v1/library`).catch(() => ({ org: '', assets: [] }))
-
-export interface RenderJob { id: string; prefix?: string; refs?: string[]; ts?: number; age?: number; status?: string }
-export const getRenderQueue = () => j<{ jobs: RenderJob[] }>(`${BASE}/v1/render-queue`).catch(() => ({ jobs: [] }))
 export const gpuOnline = () => j<{ online: boolean }>(`${BASE}/v1/gpu-status`).then(r => r.online).catch(() => false)
 
-// Thumbnail URL for a library asset (the studio pod serves a downsized JPEG).
+// A run in a flow: one dispatched generation (fix/compose/rerun/render/template) with
+// its instruction, references, parents (the assets it derived from), landed output and
+// real status. The queue/history backbone — GET /v1/worklog, newest first.
+export type RunStatus = 'queued' | 'running' | 'done' | 'failed' | 'cancelled'
+export interface Run {
+  id: string; ts: number; kind: string; prompt: string
+  refs: string[]; uploads: string[]; parents: string[]
+  output_prefix: string; output: string | null
+  lane: string; node: string; status: RunStatus
+  started_at?: number; finished_at?: number; error?: string
+  params?: Record<string, unknown>
+}
+export const getWorklog = (q?: string) =>
+  j<{ org: string; items: Run[] }>(`${BASE}/v1/worklog${q ? `?q=${encodeURIComponent(q)}` : ''}`)
+    .catch(() => ({ org: '', items: [] as Run[] }))
+
+// Live position + ETA overlay for the ACTIVE runs, per lane, from the org's own
+// measured medians. Joined onto the worklog rows by id.
+export interface QueueItem {
+  id: string; kind: string; prompt: string; status: string; node: string
+  lane?: string; position?: number; of?: number
+  eta_seconds?: number; wait_seconds?: number; elapsed_seconds?: number; remaining_seconds?: number | null
+}
+export interface QueueStatus { items: Record<string, QueueItem>; medians: Record<string, number>; lanes: Record<string, number>; now: number }
+export const getQueueStatus = () =>
+  j<QueueStatus>(`${BASE}/v1/queue/status`).catch(() => ({ items: {}, medians: {}, lanes: {}, now: Math.floor(Date.now() / 1000) }))
+
+// The version chain of one output — ancestors (what it derived from) + descendants
+// (later iterations). The iteration history of a design flow.
+export interface LineageStep { path: string; prompt: string; kind: string; ts: number }
+export interface Lineage { ancestors: LineageStep[]; node: string; descendants: LineageStep[] }
+export const getLineage = (path: string) =>
+  j<Lineage>(`${BASE}/v1/worklog/lineage?path=${encodeURIComponent(path)}`)
+    .catch(() => ({ ancestors: [], node: path, descendants: [] }))
+
+// Delete a queued run (tenant-scoped cancel; a foreign id 404s).
+export const cancelRun = (id: string) =>
+  j<{ ok: boolean; canceled: string }>(`${BASE}/v1/queue/cancel`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ prompt_id: id }),
+  })
+
+// Amend a still-queued run — the ONE way to change it (atomic cancel + re-dispatch
+// with the same instruction plus added references). Adding references IS an amend.
+export const amendRun = (id: string, instruction: string, uploads: string[], paths: string[] = []) =>
+  j<{ ok: boolean; prompt_id: string; amended_from: string; refs: number }>(`${BASE}/v1/queue/amend`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ prompt_id: id, instruction, uploads, paths }),
+  })
+
+// Stage a reference image in the org input dir (the engine's upload route); returns
+// the flat name amend/compose reference by.
+export const uploadRef = (file: File) => {
+  const fd = new FormData()
+  fd.append('image', file, file.name)
+  return j<{ name: string; subfolder: string; type: string }>(`${BASE}/upload/image`, { method: 'POST', body: fd })
+}
+
+// Ratings feed the AI flywheel: 0-5 stars + a note, keyed by run id, carrying the
+// output path. Persisted per-org; visible on reopen.
+export interface Rating { stars?: number; notes?: string; path?: string; updatedAt?: number }
+export const getRatings = () => j<Record<string, Rating>>(`${BASE}/v1/library/ratings`).catch(() => ({}))
+export const rate = (key: string, patch: { stars?: number; notes?: string; path?: string }) =>
+  j<{ ok: boolean; key: string; entry: Rating }>(`${BASE}/v1/library/rate`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ key, ...patch }),
+  })
+
+// Soft-delete a finished result — the library status lifecycle ('deleted'), the same
+// mechanism the assets view uses. Keyed by the run's output path.
+export const softDelete = (path: string) =>
+  j<{ ok: boolean; path: string; status: string }>(`${BASE}/v1/library/status`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path, status: 'deleted' }),
+  })
+// The org's soft-deleted asset paths — so History hides results deleted here or in the
+// assets view, and the delete persists across reloads.
+export const getDeletedPaths = () =>
+  j<{ assets: { path: string; status?: string }[] }>(`${BASE}/v1/library`)
+    .then(r => (r.assets || []).filter(a => a.status === 'deleted').map(a => a.path))
+    .catch(() => [] as string[])
+
+// Favorites: the heart toggle, a per-org set keyed by run id. Separate concern from
+// ratings — a bookmark, not quality feedback.
+export const getFavorites = () =>
+  j<{ org: string; favorites: Record<string, { ts: number }> }>(`${BASE}/v1/favorites`)
+    .then(r => r.favorites).catch(() => ({} as Record<string, { ts: number }>))
+export const setFavorite = (key: string, favorite: boolean) =>
+  j<{ ok: boolean; key: string; favorite: boolean }>(`${BASE}/v1/favorites`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ key, favorite }),
+  })
+
+// Stacks: iOS-folder groupings of runs. The client owns the arrangement; the whole
+// normalized set is POSTed back and echoed.
+export interface Stack { id: string; name: string; items: string[]; ts: number }
+export const getStacks = () =>
+  j<{ org: string; stacks: Stack[] }>(`${BASE}/v1/stacks`).then(r => r.stacks).catch(() => [] as Stack[])
+export const saveStacks = (stacks: Stack[]) =>
+  j<{ org: string; stacks: Stack[] }>(`${BASE}/v1/stacks`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ stacks }),
+  }).then(r => r.stacks)
+
+// Favorite → template: capture a reusable FLOW (kind + instruction + refs + parents).
+export interface Flow { kind: string; prompt: string; refs: string[]; parents: string[] }
+export const saveTemplate = (name: string, flow: Flow) =>
+  j<{ ok: boolean; name: string; slug: string }>(`${BASE}/v1/templates`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, flow }),
+  })
+
+// Thumbnails: a landed library output, a staged input reference, and the full-res file.
 export const thumbURL = (path: string) => `${BASE}/v1/library/file?thumb=1&path=${encodeURIComponent(path)}`
+export const inputThumbURL = (name: string) => `${BASE}/v1/library/file?input=1&thumb=1&path=${encodeURIComponent(name)}`
 export const fileURL = (path: string) => `${BASE}/v1/library/file?path=${encodeURIComponent(path)}`

web/src/card.tsx

@@ -0,0 +1,219 @@
+import { useState } from 'react'
+import {
+  type Run, type QueueItem, type Rating,
+  thumbURL, inputThumbURL, fileURL,
+} from './api'
+
+// ── Small shared bits ────────────────────────────────────────────────────────────
+export function relTime(ts: number, now: number): string {
+  const s = Math.max(0, now - ts)
+  if (s < 45) return 'just now'
+  if (s < 3600) return `${Math.round(s / 60)}m ago`
+  if (s < 86400) return `${Math.round(s / 3600)}h ago`
+  return `${Math.round(s / 86400)}d ago`
+}
+export function fmtDur(sec: number): string {
+  if (sec < 60) return `${Math.round(sec)}s`
+  if (sec < 3600) return `${Math.round(sec / 60)}m`
+  return `${(sec / 3600).toFixed(1)}h`
+}
+// A friendly identifier for a run, from its output/prefix (the finding: cards must
+// carry names like the "design 13" the prompts teach). Strips the _NNNNN_ counter.
+export function idLabel(run: Run): string {
+  const raw = (run.output || run.output_prefix || run.kind || '').split('/').pop() || run.kind
+  return raw.replace(/_\d+_?\.\w+$/, '').replace(/_\d+_$/, '').replace(/\.\w+$/, '') || run.kind
+}
+export function runThumb(run: Run): string | null {
+  if (run.output) return thumbURL(run.output)
+  if (run.parents[0]) return thumbURL(run.parents[0])
+  if (run.refs[0]) return inputThumbURL(run.refs[0])
+  return null
+}
+const isActive = (run: Run) => run.status === 'queued' || run.status === 'running'
+
+export function Stars({ value, onChange }: { value: number; onChange?: (n: number) => void }) {
+  const stars = [1, 2, 3, 4, 5]
+  return (
+    <span className={`stars${onChange ? ' interactive' : ''}`} role={onChange ? 'radiogroup' : undefined} aria-label="rating">
+      {stars.map(n => (
+        <button
+          key={n} type="button" className={`star${n <= value ? ' on' : ''}`}
+          disabled={!onChange} aria-label={`${n} star${n > 1 ? 's' : ''}`}
+          onClick={onChange ? () => onChange(n === value ? 0 : n) : undefined}
+        >★</button>
+      ))}
+    </span>
+  )
+}
+
+// ── One run card ─────────────────────────────────────────────────────────────────
+export interface CardProps {
+  run: Run
+  qitem?: QueueItem
+  rating?: Rating
+  favorite: boolean
+  now: number
+  version?: { pos: number; len: number }
+  onRemove: (run: Run) => void
+  onAmend: (run: Run, files: File[]) => Promise<void>
+  onRate: (run: Run, patch: { stars?: number; notes?: string; path?: string }) => void
+  onFavorite: (run: Run) => void
+  onAddToStack: (run: Run) => void
+  onOpenVersions: (run: Run) => void
+  onUseRef: (run: Run) => void
+  dnd: {
+    onDragStart: (e: React.DragEvent) => void
+    onDragEnter: (e: React.DragEvent) => void
+    onDragOver: (e: React.DragEvent) => void
+    onDragLeave: (e: React.DragEvent) => void
+    onDrop: (e: React.DragEvent) => void
+    intent: boolean
+  }
+}
+
+export function RunCard(p: CardProps) {
+  const { run, qitem, rating, favorite, now, version } = p
+  const [menu, setMenu] = useState(false)
+  const [panel, setPanel] = useState<'none' | 'rate' | 'refs'>('none')
+  const [stars, setStars] = useState(rating?.stars ?? 0)
+  const [notes, setNotes] = useState(rating?.notes ?? '')
+  const [files, setFiles] = useState<File[]>([])
+  const [busy, setBusy] = useState(false)
+  const [fileOver, setFileOver] = useState(false)
+  const [confirmDel, setConfirmDel] = useState(false)
+
+  const active = isActive(run)
+  const src = runThumb(run)
+  const fresh = run.status === 'done' && now - (run.finished_at || run.ts) < 120
+
+  // Corner badge: ETA while queued, elapsed while running, stars-or-node when done.
+  let badge = ''
+  if (run.status === 'running') badge = qitem?.elapsed_seconds != null ? fmtDur(qitem.elapsed_seconds) : 'running'
+  else if (run.status === 'queued') badge = qitem?.eta_seconds != null ? `~${fmtDur(qitem.eta_seconds)}` : 'queued'
+  else if (run.status === 'failed') badge = 'failed'
+  else if (run.status === 'cancelled') badge = 'cancelled'
+  else badge = rating?.stars ? `★${rating.stars}` : run.node
+
+  const pos = qitem?.position && qitem?.of ? `${qitem.position}/${qitem.of}` : ''
+  const meta = [run.node, relTime(run.ts, now), run.status + (pos ? ` · ${pos}` : '')].filter(Boolean).join(' · ')
+
+  const collectFiles = (list: FileList | null) =>
+    setFiles(f => [...f, ...[...(list || [])].filter(x => x.type.startsWith('image/'))])
+
+  function onDrop(e: React.DragEvent) {
+    const dropped = [...(e.dataTransfer?.files || [])].filter(x => x.type.startsWith('image/'))
+    if (dropped.length && active) {           // files onto a queued card → add references
+      e.preventDefault(); e.stopPropagation(); setFileOver(false)
+      setPanel('refs'); setFiles(f => [...f, ...dropped]); return
+    }
+    setFileOver(false); p.dnd.onDrop(e)         // otherwise an internal run drag → stacking
+  }
+  function onDragOver(e: React.DragEvent) {
+    if (active && e.dataTransfer?.types?.includes('Files')) { e.preventDefault(); setFileOver(true); return }
+    p.dnd.onDragOver(e)                          // internal run drag → let the stack drop fire
+  }
+
+  async function applyRefs() {
+    if (!files.length || busy) return
+    setBusy(true)
+    try { await p.onAmend(run, files); setFiles([]); setPanel('none') } finally { setBusy(false) }
+  }
+  function saveRate() {
+    p.onRate(run, { stars, notes, path: run.output || undefined })
+    setPanel('none')
+  }
+  // The × (and the menu's Delete) share ONE handler: a queued run cancels straight
+  // away; a finished result is a destructive soft-delete, so it asks first.
+  function requestDelete() {
+    if (active) p.onRemove(run)
+    else setConfirmDel(true)
+  }
+
+  return (
+    <article
+      className={`rc rc-${run.status}${p.dnd.intent ? ' stack-intent' : ''}${fileOver ? ' file-over' : ''}`}
+      draggable onDragStart={p.dnd.onDragStart}
+      onDragEnter={p.dnd.onDragEnter} onDragLeave={e => { setFileOver(false); p.dnd.onDragLeave(e) }}
+      onDragOver={onDragOver} onDrop={onDrop}
+    >
+      <a className="rc-thumb" draggable={false} href={run.output ? fileURL(run.output) : undefined}
+         target="_blank" rel="noreferrer" onClick={e => { if (!run.output) e.preventDefault() }}>
+        {src ? <img loading="lazy" draggable={false} src={src} alt="" /> : <span className="rc-ph">{run.kind || '—'}</span>}
+        <span className={`rc-badge s-${run.status}`}>{badge}</span>
+        {fresh && <span className="rc-new">New</span>}
+      </a>
+
+      <button className="rc-x" aria-label={active ? 'cancel' : 'delete'}
+              title={active ? 'Cancel' : 'Delete'} onClick={requestDelete}>×</button>
+      {confirmDel && (
+        <div className="rc-confirm" role="alertdialog" aria-label="confirm delete">
+          <span>Delete result?</span>
+          <button className="danger" onClick={() => { setConfirmDel(false); p.onRemove(run) }}>Delete</button>
+          <button onClick={() => setConfirmDel(false)}>Keep</button>
+        </div>
+      )}
+
+      <div className="rc-body">
+        <div className="rc-title" title={run.prompt || run.kind}>{run.prompt || `(${run.kind})`}</div>
+        <div className="rc-meta">{meta}</div>
+        <div className="rc-tags">
+          <span className="rc-id">{idLabel(run)}</span>
+          {version && version.len > 1 && (
+            <button className="rc-vers" title="versions of this design" onClick={() => p.onOpenVersions(run)}>
+              {Array.from({ length: Math.min(version.len, 6) }).map((_, i) =>
+                <span key={i} className={`pip${i === version.pos - 1 ? ' on' : ''}`} />)}
+              <span className="rc-vn">v{version.pos}</span>
+            </button>
+          )}
+          {favorite && <span className="rc-fav" title="favorite">♥</span>}
+          {rating?.stars ? <span className="rc-rated"><Stars value={rating.stars} /></span> : null}
+        </div>
+      </div>
+
+      <button className="rc-more" aria-label="more actions" aria-haspopup="menu"
+              onClick={() => setMenu(m => !m)}>⋯</button>
+
+      {menu && (
+        <div className="rc-menu" role="menu" onMouseLeave={() => setMenu(false)}>
+          <button role="menuitem" onClick={() => { setMenu(false); requestDelete() }}>Delete</button>
+          {active && <button role="menuitem" onClick={() => { setMenu(false); setPanel('refs') }}>Add references</button>}
+          <button role="menuitem" onClick={() => { setMenu(false); setStars(rating?.stars ?? 0); setNotes(rating?.notes ?? ''); setPanel('rate') }}>Rate &amp; note</button>
+          <button role="menuitem" onClick={() => { setMenu(false); p.onFavorite(run) }}>{favorite ? 'Unfavorite' : 'Favorite'}</button>
+          <button role="menuitem" onClick={() => { setMenu(false); p.onAddToStack(run) }}>Add to stack</button>
+          <button role="menuitem" onClick={() => { setMenu(false); p.onUseRef(run) }}>Use as reference</button>
+        </div>
+      )}
+
+      {panel === 'rate' && (
+        <div className="rc-panel">
+          <Stars value={stars} onChange={setStars} />
+          <textarea className="rc-notes" value={notes} onChange={e => setNotes(e.target.value)}
+                    placeholder="What should the AI do differently next time?" />
+          <div className="rc-panel-row">
+            <button className="pri" onClick={saveRate}>Save</button>
+            <button onClick={() => setPanel('none')}>Cancel</button>
+          </div>
+        </div>
+      )}
+
+      {panel === 'refs' && (
+        <div className={`rc-panel rc-drop${fileOver ? ' over' : ''}`}
+             onDragOver={e => { e.preventDefault(); setFileOver(true) }}
+             onDragLeave={() => setFileOver(false)}
+             onDrop={e => { e.preventDefault(); e.stopPropagation(); setFileOver(false); collectFiles(e.dataTransfer.files) }}>
+          <div className="rc-drop-hint">Drop images here, or</div>
+          <label className="rc-pick">Choose files
+            <input type="file" multiple accept="image/*" onChange={e => collectFiles(e.target.files)} />
+          </label>
+          {files.length > 0 && <div className="rc-files">{files.map((f, i) => <span key={i} className="chip">{f.name}</span>)}</div>}
+          <div className="rc-panel-row">
+            <button className="pri" disabled={!files.length || busy} onClick={applyRefs}>
+              {busy ? 'Requeuing…' : `Add ${files.length || ''} & requeue`}
+            </button>
+            <button onClick={() => { setFiles([]); setPanel('none') }}>Cancel</button>
+          </div>
+        </div>
+      )}
+    </article>
+  )
+}

web/src/layout.ts

@@ -0,0 +1,82 @@
+// Layout state for the queue/history rail: divider positions, per-section collapse,
+// and the active filter chip — ONE mechanism, persisted in localStorage keyed by
+// org+user (from /v1/session) and restored on load. Dividers are native pointer
+// drags; nothing here depends on a DnD library.
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type React from 'react'
+
+export type Filter = 'all' | 'queued' | 'done' | 'favorites' | 'stacks'
+
+export interface Layout {
+  railW: number                 // px — the main | rail divider (horizontal resize)
+  upFrac: number                // 0..1 — the Up next | History divider (vertical resize)
+  collapsed: { next: boolean; up: boolean; hist: boolean }
+  filter: Filter
+}
+
+export const DEFAULT: Layout = {
+  railW: 360, upFrac: 0.5,
+  collapsed: { next: false, up: false, hist: false }, filter: 'all',
+}
+export const RAIL_MIN = 300
+export const RAIL_MAX = 640
+
+const KEY = (who: string) => `studio.layout:${who}`
+export const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v))
+
+export function useLayout(who: string) {
+  const [layout, setLayout] = useState<Layout>(DEFAULT)
+  const loaded = useRef(false)
+  const dragging = useRef(false)
+
+  // Restore once we know who the user is (org:user); merge over defaults so a stored
+  // layout from an older shape never loses a newly-added field.
+  useEffect(() => {
+    if (!who || loaded.current) return
+    loaded.current = true
+    try {
+      const raw = localStorage.getItem(KEY(who))
+      if (raw) {
+        const s = JSON.parse(raw)
+        setLayout({ ...DEFAULT, ...s, collapsed: { ...DEFAULT.collapsed, ...(s.collapsed || {}) } })
+      }
+    } catch { /* corrupt entry — fall back to defaults */ }
+  }, [who])
+
+  // Persist on change — but not on every drag frame; the drag commits once on release.
+  useEffect(() => {
+    if (!who || !loaded.current || dragging.current) return
+    try { localStorage.setItem(KEY(who), JSON.stringify(layout)) } catch { /* quota — ignore */ }
+  }, [who, layout])
+
+  const patch = useCallback((p: Partial<Layout>) => setLayout(l => ({ ...l, ...p })), [])
+  const toggle = useCallback((k: keyof Layout['collapsed']) =>
+    setLayout(l => ({ ...l, collapsed: { ...l.collapsed, [k]: !l.collapsed[k] } })), [])
+  const reset = useCallback(() => { setLayout(DEFAULT); dragging.current = false }, [])
+  const beginDrag = useCallback(() => { dragging.current = true }, [])
+  const endDrag = useCallback(() => { dragging.current = false; setLayout(l => ({ ...l })) }, [])
+
+  return { layout, patch, toggle, reset, beginDrag, endDrag }
+}
+
+// Native divider drag. Tracks pointer delta from the grab point on the given axis and
+// hands it to `onMove` (the caller clamps + applies); `onEnd` commits/persists.
+export function startDrag(
+  e: React.PointerEvent, axis: 'x' | 'y',
+  onMove: (delta: number) => void, onEnd: () => void,
+) {
+  e.preventDefault()
+  const origin = axis === 'x' ? e.clientX : e.clientY
+  const move = (ev: PointerEvent) => onMove((axis === 'x' ? ev.clientX : ev.clientY) - origin)
+  const up = () => {
+    window.removeEventListener('pointermove', move)
+    window.removeEventListener('pointerup', up)
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+    onEnd()
+  }
+  window.addEventListener('pointermove', move)
+  window.addEventListener('pointerup', up)
+  document.body.style.userSelect = 'none'
+  document.body.style.cursor = axis === 'x' ? 'col-resize' : 'row-resize'
+}

web/src/rail.tsx

@@ -0,0 +1,442 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  getWorklog, getQueueStatus, getRatings, getFavorites, getStacks, saveStacks,
+  cancelRun, amendRun, uploadRef, rate, setFavorite, saveTemplate, getLineage,
+  softDelete, getDeletedPaths, thumbURL, fileURL,
+  type Run, type QueueStatus, type QueueItem, type Rating, type Stack, type Lineage,
+} from './api'
+import { RunCard, runThumb, idLabel, relTime, fmtDur } from './card'
+import { type Filter, type Layout, startDrag, clamp } from './layout'
+
+// The queue/history rail — the whole YouTube-watch-page surface adapted to studio's
+// generative flows. App owns the shell + composer + layout persistence; this owns all
+// queue/history/favorites/stacks data, polling and mutations, and calls back to insert
+// a reference into the composer.
+
+// Version chain (pos/len) for each run's output, derived from the loaded rows — the
+// same parent→child edges the server's lineage walk uses, counted for the "vN" pips.
+function chains(rows: Run[]): Map<string, { pos: number; len: number }> {
+  const producer = new Map<string, Run>()
+  for (const r of rows) if (r.output && !producer.has(r.output)) producer.set(r.output, r)
+  const childrenOf = new Map<string, Run[]>()
+  for (const r of rows) for (const par of r.parents || []) {
+    const arr = childrenOf.get(par)
+    if (arr) arr.push(r); else childrenOf.set(par, [r])
+  }
+  const out = new Map<string, { pos: number; len: number }>()
+  for (const r of rows) {
+    if (!r.output) continue
+    let anc = 0, cur: string | undefined = r.output
+    const seen = new Set([r.output])
+    for (;;) {
+      const par: string | undefined = producer.get(cur!)?.parents?.[0]
+      if (!par || seen.has(par)) break
+      seen.add(par); anc++; cur = par
+    }
+    let desc = 0
+    const q = [r.output], seenD = new Set([r.output])
+    while (q.length) {
+      for (const kid of childrenOf.get(q.shift()!) || []) {
+        const key = kid.output || kid.id
+        if (seenD.has(key)) continue
+        seenD.add(key); desc++
+        if (kid.output) q.push(kid.output)
+      }
+    }
+    out.set(r.id, { pos: anc + 1, len: anc + 1 + desc })
+  }
+  return out
+}
+
+export interface RailProps {
+  layout: Layout
+  patch: (p: Partial<Layout>) => void
+  toggle: (k: 'next' | 'up' | 'hist') => void
+  reset: () => void
+  beginDrag: () => void
+  endDrag: () => void
+  onUseRef: (text: string) => void
+}
+
+export function Rail(props: RailProps) {
+  const { layout, patch, toggle, reset, beginDrag, endDrag } = props
+  const filter = layout.filter
+
+  const [rows, setRows] = useState<Run[]>([])
+  const [q, setQ] = useState<QueueStatus>({ items: {}, medians: {}, lanes: {}, now: Math.floor(Date.now() / 1000) })
+  const [now, setNow] = useState(Math.floor(Date.now() / 1000))
+  const [ratings, setRatings] = useState<Record<string, Rating>>({})
+  const [favorites, setFavorites] = useState<Record<string, { ts: number }>>({})
+  const [stacks, setStacks] = useState<Stack[]>([])
+  const [deletedPaths, setDeletedPaths] = useState<Set<string>>(new Set())
+  const [hidden, setHidden] = useState<Set<string>>(new Set())
+  const [query, setQuery] = useState('')
+
+  const [openStack, setOpenStack] = useState<string | null>(null)
+  const [stackPick, setStackPick] = useState<Run | null>(null)
+  const [versionsFor, setVersionsFor] = useState<Run | null>(null)
+  const [lineage, setLineage] = useState<Lineage | null>(null)
+  const [offer, setOffer] = useState<Run | null>(null)
+  const [railMenu, setRailMenu] = useState(false)
+  const [err, setErr] = useState('')
+
+  const pollLive = useCallback(async () => {
+    const [w, qs] = await Promise.all([getWorklog(query), getQueueStatus()])
+    setRows(w.items); setQ(qs); setNow(qs.now)
+  }, [query])
+  const loadRatings = useCallback(() => getRatings().then(setRatings), [])
+  const loadFavorites = useCallback(() => getFavorites().then(setFavorites), [])
+  const loadStacks = useCallback(() => getStacks().then(setStacks), [])
+  const loadDeleted = useCallback(() => getDeletedPaths().then(ps => setDeletedPaths(new Set(ps))), [])
+
+  useEffect(() => { pollLive(); const t = setInterval(pollLive, 4000); return () => clearInterval(t) }, [pollLive])
+  useEffect(() => { loadRatings(); loadFavorites(); loadStacks(); loadDeleted() }, [loadRatings, loadFavorites, loadStacks, loadDeleted])
+  useEffect(() => { if (!err) return; const t = setTimeout(() => setErr(''), 4000); return () => clearTimeout(t) }, [err])
+
+  // Active = the runs the server still counts as in-flight (present in queue/status),
+  // plus just-dispatched rows not yet in the next poll — so a stalled row doesn't
+  // linger in Up next forever (matches the queue's own 30-min active window).
+  const active = rows.filter(r => (r.status === 'queued' || r.status === 'running') && (q.items[r.id] || now - r.ts <= 1800))
+    .sort((a, b) => ((q.items[a.id]?.position ?? 999) - (q.items[b.id]?.position ?? 999)) || (a.ts - b.ts))
+  const history = rows.filter(r => (r.status === 'done' || r.status === 'failed' || r.status === 'cancelled')
+    && !hidden.has(r.id) && !(r.output && deletedPaths.has(r.output)))
+  const favRuns = rows.filter(r => favorites[r.id])
+  const nextRun = active[0]
+  const chainMap = chains(rows)
+
+  // ── Mutations (each refreshes the affected store) ────────────────────────────────
+  // A dispatch/mutation can fail because the run or asset changed since this list was
+  // fetched (deduped, finished, cancelled). The trailing refresh already re-fetches;
+  // swap the raw error for a plain "pick it again" — one self-heal for every mutation.
+  const STALE = /unknown asset|not found|no such job|already finished/i
+  const heal = (e: Error): boolean => {
+    if (!STALE.test(e.message)) return false
+    setErr('That run changed — refreshed, pick it again.')
+    return true
+  }
+  // The ONE remove handler behind both the card's × and its menu Delete: a queued run
+  // cancels; a finished result soft-deletes its output (the library lifecycle) and is
+  // hidden from History optimistically (reconciled from the server's deleted set).
+  async function onRemove(run: Run) {
+    if (run.status === 'queued' || run.status === 'running') {
+      try { await cancelRun(run.id) } catch (e) { if (!heal(e as Error)) setErr((e as Error).message) }
+      pollLive(); return
+    }
+    setHidden(h => new Set(h).add(run.id))
+    const out = run.output
+    if (out) {
+      try { await softDelete(out); setDeletedPaths(d => new Set(d).add(out)) }
+      catch (e) { if (!heal(e as Error)) setErr((e as Error).message) }
+    }
+    pollLive()
+  }
+  async function onAmend(run: Run, files: File[]) {
+    const names: string[] = []
+    for (const f of files) { try { const u = await uploadRef(f); if (u?.name) names.push(u.name) } catch (e) { setErr((e as Error).message) } }
+    if (!names.length) return
+    const instr = (run.prompt || '').trim()
+    try { await amendRun(run.id, instr.length >= 3 ? instr : `${run.kind || 'edit'} update`, names) }
+    catch (e) { if (!heal(e as Error)) setErr((e as Error).message) }
+    pollLive()
+  }
+  async function onRate(run: Run, p: { stars?: number; notes?: string; path?: string }) {
+    try { await rate(run.id, p) } catch (e) { setErr((e as Error).message) }
+    loadRatings()
+  }
+  async function onFavorite(run: Run) {
+    const nowFav = !favorites[run.id]
+    try { await setFavorite(run.id, nowFav) } catch (e) { setErr((e as Error).message) }
+    await loadFavorites()
+    if (nowFav) setOffer(run)                    // offer to turn the flow into a template
+  }
+  async function onOpenVersions(run: Run) {
+    setVersionsFor(run); setLineage(null)
+    setLineage(await getLineage(run.output || ''))
+  }
+  async function persistStacks(next: Stack[]) {
+    const clean = next.filter(s => s.items.length >= 2)  // a folder of one dissolves
+    setStacks(clean)
+    try { setStacks(await saveStacks(clean)) } catch (e) { setErr((e as Error).message) }
+  }
+  function stackRuns(from: string, target: string) {
+    const next = stacks.map(s => ({ ...s, items: s.items.filter(i => i !== from) }))
+    const host = next.find(s => s.items.includes(target))
+    if (host) host.items = [...host.items, from]
+    else next.push({ id: `st_${Date.now().toString(36)}`, name: 'Stack', items: [target, from], ts: Math.floor(Date.now() / 1000) })
+    persistStacks(next)
+  }
+  function addToStack(run: Run, stackId: string) {
+    const next = stacks.map(s => ({ ...s, items: s.items.filter(i => i !== run.id) }))
+    const host = next.find(s => s.id === stackId)
+    if (host) host.items = [...host.items, run.id]
+    persistStacks(next); setStackPick(null)
+  }
+  function unstack(run: Run) {
+    persistStacks(stacks.map(s => ({ ...s, items: s.items.filter(i => i !== run.id) })))
+  }
+  function renameStack(id: string, name: string) {
+    setStacks(s => s.map(x => x.id === id ? { ...x, name } : x))
+  }
+  function commitRename() { persistStacks(stacks) }
+
+  // ── Drag-hold stacking (native HTML5 drag + a 600ms hover timer) ─────────────────
+  const dragId = useRef<string | null>(null)
+  const holdTimer = useRef<number | undefined>(undefined)
+  const [intentId, setIntentId] = useState<string | null>(null)
+  function dndFor(run: Run) {
+    return {
+      onDragStart: (e: React.DragEvent) => { dragId.current = run.id; e.dataTransfer.setData('text/plain', run.id); e.dataTransfer.effectAllowed = 'move' },
+      onDragOver: (e: React.DragEvent) => { if (dragId.current && dragId.current !== run.id) { e.preventDefault(); e.dataTransfer.dropEffect = 'move' } },
+      onDragEnter: (e: React.DragEvent) => {
+        if (!dragId.current || dragId.current === run.id) return
+        e.preventDefault()
+        window.clearTimeout(holdTimer.current)
+        holdTimer.current = window.setTimeout(() => setIntentId(run.id), 600)   // hold to form a stack
+      },
+      onDragLeave: () => { window.clearTimeout(holdTimer.current); setIntentId(cur => cur === run.id ? null : cur) },
+      onDrop: () => {
+        window.clearTimeout(holdTimer.current)
+        const from = dragId.current, held = intentId === run.id
+        setIntentId(null); dragId.current = null
+        if (from && from !== run.id && held) stackRuns(from, run.id)
+      },
+      intent: intentId === run.id,
+    }
+  }
+
+  const card = (run: Run) => (
+    <RunCard
+      key={run.id} run={run} qitem={q.items[run.id]} rating={ratings[run.id]}
+      favorite={!!favorites[run.id]} now={now} version={chainMap.get(run.id)}
+      onRemove={onRemove} onAmend={onAmend} onRate={onRate} onFavorite={onFavorite}
+      onAddToStack={r => setStackPick(r)} onOpenVersions={onOpenVersions}
+      onUseRef={r => props.onUseRef(idLabel(r))} dnd={dndFor(run)}
+    />
+  )
+
+  // ── Section layout (content-driven flex + the vertical resize divider) ───────────
+  const sectionsRef = useRef<HTMLDivElement>(null)
+  const bothOpen = filter === 'all' && !layout.collapsed.up && !layout.collapsed.hist
+  const upStyle: React.CSSProperties = filter === 'queued' ? { flex: '1 1 auto' }
+    : bothOpen ? { flex: `0 0 ${Math.round(layout.upFrac * 100)}%` }
+    : layout.collapsed.up ? { flex: '0 0 auto' } : { flex: '1 1 auto' }
+  const histStyle: React.CSSProperties = layout.collapsed.hist ? { flex: '0 0 auto' } : { flex: '1 1 0' }
+  function onHSplit(e: React.PointerEvent) {
+    beginDrag()
+    const h = sectionsRef.current?.getBoundingClientRect().height || 1
+    const start = layout.upFrac
+    startDrag(e, 'y', d => patch({ upFrac: clamp(start + d / h, 0.15, 0.85) }), endDrag)
+  }
+
+  const chips: { k: Filter; label: string; n?: number }[] = [
+    { k: 'all', label: 'All' },
+    { k: 'queued', label: 'Queued', n: active.length },
+    { k: 'done', label: 'Done' },
+    { k: 'favorites', label: 'Favorites', n: favRuns.length },
+    { k: 'stacks', label: 'Stacks', n: stacks.length },
+  ]
+
+  return (
+    <>
+      {(filter === 'all' || filter === 'queued') && nextRun && (
+        <div className={`nextpin${layout.collapsed.next ? ' col' : ''}`}>
+          <button className="pin-h" onClick={() => toggle('next')} aria-expanded={!layout.collapsed.next}>
+            <span className="pin-lab">Next</span>
+            <span className="pin-count">{active.length} in queue</span>
+            <span className="chev">{layout.collapsed.next ? '▸' : '▾'}</span>
+          </button>
+          {!layout.collapsed.next && <NextBody run={nextRun} q={q.items[nextRun.id]} now={now} />}
+        </div>
+      )}
+
+      <div className="chips">
+        <div className="chips-row">
+          {chips.map(c => (
+            <button key={c.k} className={`chip-f${filter === c.k ? ' on' : ''}`} onClick={() => patch({ filter: c.k })}>
+              {c.label}{c.n ? <span className="chip-n">{c.n}</span> : null}
+            </button>
+          ))}
+        </div>
+        <div className="rail-more-wrap">
+          <button className="rail-more" aria-label="rail options" onClick={() => setRailMenu(m => !m)}>⋯</button>
+          {railMenu && (
+            <div className="rc-menu" role="menu" onMouseLeave={() => setRailMenu(false)}>
+              <button role="menuitem" onClick={() => { setRailMenu(false); reset() }}>Reset layout</button>
+              <button role="menuitem" onClick={() => { setRailMenu(false); pollLive(); loadRatings(); loadFavorites(); loadStacks() }}>Refresh</button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="rail-main">
+        {filter === 'stacks' ? (
+          <div className="stacks-view">
+            {stacks.length === 0 && <div className="empty">No stacks yet. Drag one card onto another and hold (~½s) to make a stack.</div>}
+            {stacks.map(s => {
+              const members = s.items.map(id => rows.find(r => r.id === id)).filter((r): r is Run => !!r)
+              const open = openStack === s.id
+              return (
+                <div key={s.id} className={`stack${open ? ' open' : ''}`}>
+                  <button className="stack-tile" onClick={() => setOpenStack(open ? null : s.id)}>
+                    <span className="stack-cards">
+                      {members.slice(0, 3).map((m, i) => {
+                        const src = runThumb(m)
+                        return <span key={i} className="sc" style={src ? { backgroundImage: `url(${src})` } : undefined} />
+                      })}
+                    </span>
+                    <span className="stack-meta">
+                      <span className="stack-name">{s.name}</span>
+                      <span className="stack-count">{members.length}</span>
+                    </span>
+                  </button>
+                  {open && (
+                    <div className="stack-open">
+                      <input className="stack-rename" value={s.name} aria-label="stack name"
+                             onChange={e => renameStack(s.id, e.target.value)} onBlur={commitRename} />
+                      {members.map(m => (
+                        <div key={m.id} className="stack-member">
+                          {card(m)}
+                          <button className="unstack" title="remove from stack" onClick={() => unstack(m)}>×</button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        ) : filter === 'favorites' ? (
+          <section className="sec">
+            <div className="sec-body">
+              {favRuns.length ? favRuns.map(card) : <div className="empty">No favorites yet. Tap ♥ on any card.</div>}
+            </div>
+          </section>
+        ) : (
+          <div className="sections" ref={sectionsRef}>
+            {(filter === 'all' || filter === 'queued') && (
+              <section className={`sec${layout.collapsed.up ? ' col' : ''}`} style={upStyle}>
+                <SecHeader label="Up next" n={active.length} collapsed={layout.collapsed.up} onToggle={() => toggle('up')} />
+                {!layout.collapsed.up && (
+                  <div className="sec-body">{active.length ? active.map(card) : <div className="empty">Nothing queued. Describe a change to start a run.</div>}</div>
+                )}
+              </section>
+            )}
+            {bothOpen && <div className="hsplit" onPointerDown={onHSplit} onDoubleClick={() => patch({ upFrac: 0.5 })} title="drag to resize · double-click to reset" />}
+            {(filter === 'all' || filter === 'done') && (
+              <section className={`sec${layout.collapsed.hist ? ' col' : ''}`} style={histStyle}>
+                <SecHeader label="History" n={history.length} collapsed={layout.collapsed.hist} onToggle={() => toggle('hist')}
+                  search={<input className="sec-search" placeholder="Search history…" value={query} onChange={e => setQuery(e.target.value)} />} />
+                {!layout.collapsed.hist && (
+                  <div className="sec-body">{history.length ? history.map(card) : <div className="empty">No past generations{query ? ' match your search' : ' yet'}.</div>}</div>
+                )}
+              </section>
+            )}
+          </div>
+        )}
+      </div>
+
+      {stackPick && (
+        <div className="ovl" onClick={() => setStackPick(null)}>
+          <div className="sheet" onClick={e => e.stopPropagation()}>
+            <div className="sheet-h">Add “{idLabel(stackPick)}” to a stack</div>
+            {stacks.length === 0
+              ? <p className="muted">No stacks yet — drag one card onto another and hold to make the first one.</p>
+              : stacks.map(s => <button key={s.id} className="sheet-item" onClick={() => addToStack(stackPick, s.id)}>{s.name} · {s.items.length}</button>)}
+            <div className="sheet-row"><button onClick={() => setStackPick(null)}>Cancel</button></div>
+          </div>
+        </div>
+      )}
+
+      {versionsFor && (
+        <div className="ovl" onClick={() => setVersionsFor(null)}>
+          <div className="sheet vers" onClick={e => e.stopPropagation()}>
+            <div className="sheet-h">Versions of {idLabel(versionsFor)}</div>
+            {!lineage ? <div className="empty">Loading…</div> : (
+              <div className="vers-strip">
+                {[...lineage.ancestors,
+                  { path: lineage.node, prompt: versionsFor.prompt, kind: versionsFor.kind, ts: versionsFor.ts },
+                  ...lineage.descendants].map((step, i) => (
+                  <a key={i} className={`vstep${step.path === lineage.node ? ' cur' : ''}`}
+                     href={step.path ? fileURL(step.path) : undefined} target="_blank" rel="noreferrer"
+                     onClick={e => { if (!step.path) e.preventDefault() }} title={step.prompt || step.kind}>
+                    {step.path ? <img src={thumbURL(step.path)} alt="" /> : <span className="rc-ph">?</span>}
+                    <span className="vlabel">v{i + 1}</span>
+                  </a>
+                ))}
+              </div>
+            )}
+            <div className="sheet-row"><button onClick={() => setVersionsFor(null)}>Close</button></div>
+          </div>
+        </div>
+      )}
+
+      {offer && <TemplateOffer run={offer} onClose={() => setOffer(null)} onError={setErr} />}
+      {err && <div className="rail-toast" role="alert">{err}</div>}
+    </>
+  )
+}
+
+function NextBody({ run, q, now }: { run: Run; q?: QueueItem; now: number }) {
+  const src = runThumb(run)
+  const badge = run.status === 'running'
+    ? (q?.elapsed_seconds != null ? `running · ${fmtDur(q.elapsed_seconds)}` : 'running')
+    : (q?.eta_seconds != null ? `starts in ~${fmtDur(q.eta_seconds)}` : 'queued')
+  return (
+    <div className="pin-body">
+      <div className="pin-thumb">{src ? <img src={src} alt="" /> : <span className="rc-ph">{run.kind}</span>}</div>
+      <div className="pin-txt">
+        <div className="pin-prompt" title={run.prompt}>{run.prompt || `(${run.kind})`}</div>
+        <div className="pin-meta">{badge} · {run.node} · {relTime(run.ts, now)}</div>
+      </div>
+    </div>
+  )
+}
+
+function SecHeader({ label, n, collapsed, onToggle, search }:
+  { label: string; n: number; collapsed: boolean; onToggle: () => void; search?: React.ReactNode }) {
+  return (
+    <div className="sec-h">
+      <button className="sec-toggle" onClick={onToggle} aria-expanded={!collapsed}>
+        <span className="chev">{collapsed ? '▸' : '▾'}</span>
+        <span className="sec-lab">{label}</span>
+        <span className="sec-n">{n}</span>
+      </button>
+      {search}
+    </div>
+  )
+}
+
+function TemplateOffer({ run, onClose, onError }: { run: Run; onClose: () => void; onError: (m: string) => void }) {
+  const [stage, setStage] = useState<'offer' | 'name'>('offer')
+  const [name, setName] = useState(idLabel(run))
+  const [busy, setBusy] = useState(false)
+  const [done, setDone] = useState(false)
+  async function save() {
+    setBusy(true)
+    try {
+      await saveTemplate(name.trim() || idLabel(run), { kind: run.kind, prompt: run.prompt, refs: run.refs, parents: run.parents })
+      setDone(true); setTimeout(onClose, 900)
+    } catch (e) { onError((e as Error).message); onClose() } finally { setBusy(false) }
+  }
+  return (
+    <div className="ovl" onClick={onClose}>
+      <div className="sheet" onClick={e => e.stopPropagation()}>
+        {done ? <div className="sheet-h">Saved to templates ✓</div>
+          : stage === 'offer' ? (
+            <>
+              <div className="sheet-h">Turn this into a template?</div>
+              <p className="muted">Reuse this flow — {run.kind}, its instruction and {run.refs.length} reference{run.refs.length === 1 ? '' : 's'} — as a starting point next time.</p>
+              <div className="sheet-row"><button className="pri" onClick={() => setStage('name')}>Name it…</button><button onClick={onClose}>Not now</button></div>
+            </>
+          ) : (
+            <>
+              <div className="sheet-h">Name this template</div>
+              <input className="sheet-in" value={name} autoFocus onChange={e => setName(e.target.value)} placeholder="Template name" />
+              <p className="muted">Captures: {run.kind} · “{run.prompt || '(no instruction)'}” · {run.refs.length} ref{run.refs.length === 1 ? '' : 's'}</p>
+              <div className="sheet-row"><button className="pri" disabled={busy || !name.trim()} onClick={save}>{busy ? 'Saving…' : 'Save template'}</button><button onClick={onClose}>Cancel</button></div>
+            </>
+          )}
+      </div>
+    </div>
+  )
+}

web/src/styles.css

@@ -1,54 +1,236 @@
 :root {
-  --bg: #0d0d0f; --panel: #151517; --line: #26262b; --text: #f4f4f6;
-  --dim: #9a9aa2; --accent: #f4f4f6; --accent-ink: #0d0d0f;
+  --bg: #0d0d0f; --panel: #151517; --panel2: #1c1c20; --line: #26262b; --text: #f4f4f6;
+  --dim: #a6a6ae; --accent: #f4f4f6; --accent-ink: #0d0d0f; --brand: #4f8cff;
+  --good: #35c26b; --bad: #ff6b6b; --halo: #4f8cff;
 }
 @media (prefers-color-scheme: light) {
-  :root { --bg: #fafafa; --panel: #fff; --line: #e6e6ea; --text: #16161a; --dim: #6b6b73; --accent: #16161a; --accent-ink: #fff; }
+  :root {
+    --bg: #fafafa; --panel: #fff; --panel2: #f3f3f5; --line: #e6e6ea; --text: #16161a;
+    --dim: #55565e; --accent: #16161a; --accent-ink: #fff; --brand: #2f6be0;
+    --good: #1f9d57; --bad: #d33; --halo: #2f6be0;
+  }
 }
 * { box-sizing: border-box; }
 html, body, #root { height: 100%; margin: 0; }
-body { background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+body {
+  background: var(--bg); color: var(--text);
+  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  overflow-x: hidden;
+}
+button { font: inherit; color: inherit; }
 
 .app { display: flex; flex-direction: column; height: 100%; }
-.top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
+.top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
 .brand { font-weight: 500; letter-spacing: .2px; } .brand b { font-weight: 700; }
 .spacer { flex: 1; }
-.gpu { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
-.gpu.on { color: var(--text); } .gpu.on::before { content: "● "; color: #35c26b; }
-.who { font-size: 13px; color: var(--dim); }
+.gpu { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
+.gpu.on { color: var(--text); } .gpu.on::before { content: "● "; color: var(--good); }
 
-.body { flex: 1; display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
-.chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
-.scroll { flex: 1; overflow-y: auto; padding: 22px; }
-.hero { max-width: 560px; margin: 8vh auto 0; text-align: center; }
-.hero h1 { font-size: 30px; font-weight: 600; margin: 0 0 10px; }
-.hero p { color: var(--dim); }
+/* Account avatar + menu — a 44px target, not bare text */
+.acct-wrap { position: relative; }
+.avatar {
+  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line);
+  background: var(--panel2); color: var(--text); font-weight: 700; font-size: 13px;
+  cursor: pointer; letter-spacing: .5px;
+}
+.avatar:hover { border-color: var(--dim); }
+.acct-menu { right: 0; top: 50px; min-width: 210px; }
+.acct-id { padding: 8px 12px; border-bottom: 1px solid var(--line); }
+.acct-name { font-weight: 600; }
+.acct-sub { font-size: 12px; color: var(--dim); }
+
+.body { flex: 1; display: flex; min-height: 0; }
+.chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
+.scroll { flex: 1; overflow-y: auto; padding: 20px; }
+.hero { max-width: 580px; margin: 4vh auto 0; text-align: center; }
+.hero h1 { font-size: 27px; font-weight: 600; margin: 0 0 8px; }
+.hero p { color: var(--dim); margin: 0 0 16px; }
+.examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+.ex-chip {
+  border: 1px solid var(--line); background: var(--panel); color: var(--text);
+  border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer;
+}
+.ex-chip:hover { border-color: var(--brand); color: var(--brand); }
 .msg { display: flex; margin: 10px 0; } .msg.user { justify-content: flex-end; }
 .bubble { max-width: 74%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; border: 1px solid var(--line); background: var(--panel); }
 .msg.user .bubble { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
 .bubble.dim { color: var(--dim); }
 
-.composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
-.composer textarea { flex: 1; resize: none; height: 44px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
-.composer button { padding: 0 18px; border-radius: 12px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; }
-.composer button:disabled { opacity: .5; cursor: default; }
-
-.rail { overflow-y: auto; padding: 16px; }
-.rail-h { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); margin: 14px 0 8px; }
-.queue .job { font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; color: var(--dim); }
-.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
-.cell { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
-.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.empty { color: var(--dim); font-size: 13px; }
+.composer { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg); }
+.composer textarea { flex: 1; resize: none; height: 46px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
+.composer textarea:focus { outline: none; border-color: var(--brand); }
+.send {
+  padding: 0 20px; border-radius: 12px; cursor: pointer; font-weight: 600;
+  border: 1px solid var(--line); background: transparent; color: var(--dim);   /* empty: muted outline */
+}
+.send.ready { border-color: transparent; background: var(--brand); color: #fff; }  /* text present: brand fill */
+.send:disabled { cursor: default; opacity: .6; }
 
+/* ── The main | rail divider ─────────────────────────────────────────────── */
+.vsplit { flex: 0 0 6px; cursor: col-resize; background: var(--line); opacity: .5; }
+.vsplit:hover { opacity: 1; background: var(--brand); }
+
+/* ── The rail ────────────────────────────────────────────────────────────── */
+.rail { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); }
+.chev { color: var(--dim); font-size: 11px; }
+
+.nextpin { border-bottom: 1px solid var(--line); }
+.pin-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--panel2); border: 0; cursor: pointer; text-align: left; }
+.pin-lab { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
+.pin-count { flex: 1; color: var(--dim); font-size: 12px; }
+.pin-body { display: flex; gap: 10px; padding: 10px 14px; }
+.pin-thumb { flex: 0 0 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; }
+.pin-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.pin-txt { min-width: 0; }
+.pin-prompt { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.pin-meta { font-size: 12px; color: var(--dim); margin-top: 3px; }
+
+.chips { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
+.chips-row { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
+.chips-row::-webkit-scrollbar { display: none; }
+.chip-f { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); color: var(--dim); border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
+.chip-f.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
+.chip-n { font-size: 11px; background: color-mix(in srgb, var(--dim) 22%, transparent); border-radius: 999px; padding: 0 6px; }
+.chip-f.on .chip-n { background: color-mix(in srgb, var(--accent-ink) 25%, transparent); }
+.rail-more-wrap { position: relative; }
+.rail-more, .rc-more { border: 0; background: transparent; cursor: pointer; color: var(--dim); font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
+.rail-more:hover { background: var(--panel2); color: var(--text); }
+
+.rail-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.sections { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.sec { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.sec.col { flex: 0 0 auto !important; }
+.sec-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
+.sec-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; background: transparent; border: 0; cursor: pointer; padding: 2px 4px; }
+.sec-lab { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
+.sec-n { font-size: 11px; color: var(--dim); background: var(--panel2); border-radius: 999px; padding: 0 7px; }
+.sec-search { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; padding: 5px 9px; font-size: 13px; }
+.sec-search:focus { outline: none; border-color: var(--brand); }
+.sec-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
+.hsplit { flex: 0 0 6px; cursor: row-resize; background: var(--line); opacity: .5; }
+.hsplit:hover { opacity: 1; background: var(--brand); }
+.empty { color: var(--dim); font-size: 13px; padding: 14px; text-align: center; }
+
+/* ── Run card ────────────────────────────────────────────────────────────── */
+.rc { position: relative; display: flex; flex-wrap: wrap; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
+.rc:hover { border-color: var(--dim); }
+.rc.stack-intent { border-color: var(--halo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--halo) 35%, transparent); }
+.rc.file-over { border-color: var(--brand); border-style: dashed; }
+.rc-thumb { position: relative; flex: 0 0 48%; max-width: 48%; border-radius: 8px; overflow: hidden; background: var(--panel2); border: 1px solid var(--line); display: block; aspect-ratio: 4 / 5; text-decoration: none; }
+.rc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.rc-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--dim); font-size: 12px; }
+.rc-badge { position: absolute; left: 5px; bottom: 5px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, #000 62%, transparent); color: #fff; }
+.rc-badge.s-running { background: var(--good); }
+.rc-badge.s-failed { background: var(--bad); }
+.rc-new { position: absolute; right: 5px; top: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 6px; background: var(--brand); color: #fff; }
+.rc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.rc-title { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
+.rc-meta { font-size: 12px; color: var(--dim); }
+.rc-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
+.rc-id { font-size: 11px; color: var(--dim); background: var(--panel2); border-radius: 6px; padding: 1px 6px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rc-vers { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 1px 7px 1px 5px; cursor: pointer; }
+.rc-vers .pip { width: 5px; height: 5px; border-radius: 999px; background: var(--dim); opacity: .5; }
+.rc-vers .pip.on { background: var(--brand); opacity: 1; }
+.rc-vn { font-size: 11px; color: var(--dim); }
+.rc-fav { color: var(--bad); }
+.rc-more { position: absolute; right: 4px; top: 4px; }
+.rc-more:hover { background: var(--panel2); color: var(--text); }
+/* Always-visible fast-path delete/cancel (× top-left of the thumb) */
+.rc-x { position: absolute; left: 6px; top: 6px; z-index: 4; width: 22px; height: 22px; border-radius: 999px; border: 0; background: color-mix(in srgb, #000 55%, transparent); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: .9; }
+.rc-x:hover { background: var(--bad); opacity: 1; }
+.rc-confirm { position: absolute; left: 6px; top: 6px; z-index: 7; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 5px 7px; box-shadow: 0 6px 20px rgba(0,0,0,.28); font-size: 12px; }
+.rc-confirm button { border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
+.rc-confirm .danger { background: var(--bad); color: #fff; border-color: transparent; }
+
+.rc-menu { position: absolute; z-index: 20; right: 6px; top: 30px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 5px; display: flex; flex-direction: column; min-width: 168px; }
+.rc-menu > button, .rc-menu > a { text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer; color: var(--text); text-decoration: none; font-size: 14px; }
+.rc-menu > button:hover, .rc-menu > a:hover { background: var(--panel2); }
+
+.rc-panel { flex-basis: 100%; order: 9; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
+.rc-notes { width: 100%; min-height: 56px; resize: vertical; border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; }
+.rc-notes:focus { outline: none; border-color: var(--brand); }
+.rc-panel-row { display: flex; gap: 8px; }
+.rc-panel-row .pri, .sheet .pri, .send.ready { }
+.rc-panel-row button, .sheet-row button, .sheet-item { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; padding: 7px 13px; cursor: pointer; font-size: 13px; }
+.rc-panel-row .pri, .sheet-row .pri { background: var(--brand); color: #fff; border-color: transparent; }
+.rc-panel-row button:disabled, .sheet-row button:disabled { opacity: .5; cursor: default; }
+.rc-drop { align-items: stretch; text-align: center; }
+.rc-drop.over { outline: 2px dashed var(--brand); outline-offset: 2px; border-radius: 8px; }
+.rc-drop-hint { font-size: 12px; color: var(--dim); }
+.rc-pick { display: inline-block; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; align-self: center; }
+.rc-pick input { display: none; }
+.rc-files { display: flex; flex-wrap: wrap; gap: 5px; }
+.chip { font-size: 11px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* stars */
+.stars { display: inline-flex; gap: 1px; }
+.stars .star { border: 0; background: transparent; padding: 0 1px; cursor: default; color: var(--dim); font-size: 15px; line-height: 1; }
+.stars.interactive .star { cursor: pointer; font-size: 20px; }
+.stars .star.on { color: #f5b301; }
+.rc-rated .stars .star { font-size: 12px; }
+
+/* ── Stacks ──────────────────────────────────────────────────────────────── */
+.stacks-view { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }
+.stack { grid-column: 1 / -1; }
+.stack:not(.open) { grid-column: auto; }
+.stack-tile { width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
+.stack-tile:hover { border-color: var(--dim); }
+.stack-cards { position: relative; height: 92px; }
+.stack-cards .sc { position: absolute; width: 66%; height: 84px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2) center/cover no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
+.stack-cards .sc:nth-child(1) { left: 0; top: 8px; transform: rotate(-5deg); }
+.stack-cards .sc:nth-child(2) { left: 17%; top: 4px; transform: rotate(1deg); z-index: 1; }
+.stack-cards .sc:nth-child(3) { left: 34%; top: 0; transform: rotate(6deg); z-index: 2; }
+.stack-meta { display: flex; align-items: center; justify-content: space-between; }
+.stack-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.stack-count { font-size: 12px; color: var(--dim); background: var(--panel2); border-radius: 999px; padding: 1px 8px; }
+.stack.open .stack-open { animation: folder-open .22s ease; overflow: hidden; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+@keyframes folder-open { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
+.stack-rename { border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 8px; padding: 6px 9px; font: inherit; font-weight: 600; }
+.stack-rename:focus { outline: none; border-color: var(--brand); }
+.stack-member { position: relative; }
+.unstack { position: absolute; right: -6px; top: -6px; z-index: 5; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; line-height: 1; }
+.unstack:hover { background: var(--bad); color: #fff; border-color: transparent; }
+
+/* ── Overlays / sheets ───────────────────────────────────────────────────── */
+.ovl { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.4); display: grid; place-items: center; padding: 16px; }
+.sheet { width: min(460px, 100%); max-height: 80vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
+.sheet-h { font-weight: 600; font-size: 16px; }
+.muted { color: var(--dim); font-size: 13px; margin: 0; }
+.sheet-in { border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; }
+.sheet-in:focus { outline: none; border-color: var(--brand); }
+.sheet-item { text-align: left; }
+.sheet-item:hover { border-color: var(--dim); }
+.sheet-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
+.vers-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; }
+.vstep { flex: 0 0 auto; width: 92px; text-align: center; text-decoration: none; color: var(--dim); }
+.vstep img, .vstep .rc-ph { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
+.vstep.cur img, .vstep.cur .rc-ph { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent); }
+.vlabel { display: block; font-size: 12px; margin-top: 4px; }
+.vstep.cur .vlabel { color: var(--text); font-weight: 600; }
+
+.rail-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80; background: var(--bad); color: #fff; padding: 9px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: 90vw; }
+
+/* ── Mobile / tablet: ONE vertical scroll — chat transcript, then the rail as the
+   bottom section — with the composer FIXED to the viewport bottom + safe-area inset
+   (the #1 thumb-reach fix). Dividers are a desktop affordance (hidden); collapse
+   chevrons + filter chips + persistence all still apply. */
 @media (max-width: 820px) {
-  /* Chat fills; the library drops UNDER it as a compact strip so renders stay
-     reachable on a phone. Empty (no jobs, no assets) it hides entirely — the
-     `active` class is set only when there is something to show — so the empty
-     chat state stays clean. */
-  .body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
-  .chat { border-right: 0; }
-  .rail { display: none; }
-  .rail.active { display: block; border-top: 1px solid var(--line); max-height: 42vh; overflow-y: auto; }
-  .rail.active .grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
+  .body { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
+          padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
+  .chat { flex: 0 0 auto; min-height: 52vh; }
+  .scroll { flex: 0 0 auto; overflow: visible; }
+  .composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
+              border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.12);
+              padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
+  .vsplit, .hsplit { display: none; }
+  .rail { width: auto !important; flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
+  .rail-main, .sections, .sec, .sec-body, .stacks-view { overflow: visible; min-height: 0; }
+  .sec, .sec.col { flex: 0 0 auto !important; }
+  .chips { position: sticky; top: 0; z-index: 5; background: var(--bg); }
+  .rc-thumb { flex-basis: 44%; max-width: 44%; }
+  .stacks-view { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 420px) {
+  .stacks-view { grid-template-columns: 1fr 1fr; }
+  .sheet { border-radius: 14px; }
 }