tweaklocal 0.3.0 → 0.3.3

package/README.md

@@ -4,7 +4,20 @@ Tweak your UI live in the browser — the changes are written straight to your s
 
 - **Copy**: click any text, edit in place, Enter. Written to the JSX literal. 0 tokens.
 - **Style**: padding/margin per side, font sizes and colors from *your* design system tokens. Deterministic Tailwind class edits. 0 tokens.
-- **Anything else**: describe it — routed to a fast model for style/copy or a reasoning model for functionality (headless `claude -p`), scoped to the exact file your selection maps to.
+- **Anything else**: describe it — a layered router picks a model *and* an effort level sized to the request, then runs headless `claude -p` scoped to the exact file your selection maps to.
+
+## Model routing
+
+| Tier | What it covers | Model | Effort (by complexity) |
+|---|---|---|---|
+| 1 | Styles, copy, component tweaks, existing components | `claude-sonnet-5` | low / medium / high |
+| 2 | New logic & functionality (handlers, state, forms, data) | `claude-opus-4-8` | medium / high / xhigh |
+| 3 | Multi-feature or cross-cutting work | `claude-opus-4-8` | xhigh |
+| 3+ | Mission-critical (auth, payments, data, security) or very high complexity | `claude-fable-5` | high |
+
+Routing is layered (RouteLLM-style): deterministic lexicon + structure scoring first (<1ms, free); requests with no clear signal fall through to a Haiku classifier with structured output (~1–3s, ~$0.001). Inspect any routing decision without running it: `POST /api/classify {"instruction": "..."}`.
+
+Overrides: `TWEAKLOCAL_T1_MODEL`, `TWEAKLOCAL_T2_MODEL`, `TWEAKLOCAL_T3_MODEL`, `TWEAKLOCAL_T3_CRITICAL_MODEL`, and `TWEAKLOCAL_ROUTER=heuristic|hybrid|llm` (default `hybrid`).
 
 ## Quickstart (Next.js)
 

package/overlay/overlay.js

@@ -16,6 +16,12 @@
   #twk-root{position:fixed;inset:0;pointer-events:none;z-index:2147483000;font-family:ui-sans-serif,system-ui,sans-serif}
   .twk-outline{position:fixed;border:1.5px solid #6366f1;border-radius:3px;background:rgba(99,102,241,.08);pointer-events:none;transition:all .04s linear}
   .twk-outline.twk-selected{border-color:#10b981;background:rgba(16,185,129,.06)}
+  .twk-multi{position:fixed;border:1.5px solid #f59e0b;border-radius:3px;background:rgba(245,158,11,.10);pointer-events:none}
+  .twk-multibar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:#111827;color:#f9fafb;border:1.5px solid #f59e0b;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);padding:8px;pointer-events:auto;display:flex;gap:6px;align-items:center;font-size:12px;z-index:2147483001}
+  .twk-multibar input{background:#1f2937;border:1px solid #374151;border-radius:6px;color:#f9fafb;padding:5px 8px;font-size:12px;outline:none;width:220px}
+  .twk-multibar button{background:#374151;color:#f9fafb;border:none;border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer}
+  .twk-multibar button.twk-danger{background:#dc2626}
+  .twk-multibar .twk-count{color:#fbbf24;font-weight:700}
   .twk-badge{position:fixed;background:#312e81;color:#e0e7ff;font-size:11px;padding:2px 7px;border-radius:4px;pointer-events:none;white-space:nowrap;transform:translateY(-100%)}
   .twk-pop-label{position:fixed;background:#10b981;color:#052e1b;font-size:13.8px;font-weight:700;padding:3px 10px;border-radius:8px 8px 0 0;pointer-events:none;white-space:nowrap;transform:translate(-50%,-100%);text-align:center}
   .twk-delete-btn{position:fixed;width:22px;height:22px;border-radius:50%;background:#dc2626;color:#fff;border:none;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.4)}
@@ -61,8 +67,13 @@
     selected: null, // { el, loc }
     editing: null, // { el, original }
     tailwind: true, // daemon reports whether the app uses Tailwind
+    model: 'auto', // NL model override; 'auto' = router picks
+    multi: [], // [{ el, loc }] shift-click multi-selection
   };
 
+  // Stack of undoable tweak ids (LIFO) for ⌘Z / Ctrl-Z global undo.
+  const undoStack = [];
+
   // ---------- helpers ----------
   const el = (tag, cls, text) => {
     const n = document.createElement(tag);
@@ -192,30 +203,39 @@
   deleteBtn.style.display = 'none';
   deleteBtn.title = 'Delete element';
   root.appendChild(deleteBtn);
+  // All instances of a mapped template share one source stamp; the DOM position
+  // of a given instance tells the daemon WHICH data item it is (list items
+  // render in array order).
+  function instanceIndex(elm, loc) {
+    const instances = [...document.querySelectorAll(`[data-twk="${CSS.escape(loc)}"]`)];
+    const i = instances.indexOf(elm);
+    return i >= 0 ? i : undefined;
+  }
+
+  async function deleteOne({ el: elm, loc }) {
+    const payload = { loc, index: instanceIndex(elm, loc) };
+    // Dry-run first so a refusal never flickers the element.
+    await api('delete', { ...payload, dryRun: true });
+    if (document.contains(elm)) elm.style.display = 'none'; // optimistic; HMR makes it real
+    await api('delete', payload);
+  }
+
   deleteBtn.onclick = async (e) => {
     e.preventDefault();
     e.stopPropagation();
     const sel = state.selected;
     if (!sel || !document.contains(sel.el)) return;
-    // Check first so a refusal never flickers the element or loses the
-    // selection — only hide optimistically once we know it'll succeed.
     deleteBtn.disabled = true;
     try {
-      await api('delete', { loc: sel.loc, dryRun: true });
+      await deleteOne(sel);
     } catch (err) {
+      if (document.contains(sel.el)) sel.el.style.display = '';
       deleteBtn.disabled = false;
-      addTweak({ id: 'x' + Date.now(), status: 'error', label: err.message.slice(0, 140) });
+      addTweak({ id: 'x' + Date.now(), status: 'error', label: `delete: ${err.message.slice(0, 140)}` });
       return;
     }
     deleteBtn.disabled = false;
-    sel.el.style.display = 'none'; // optimistic; HMR makes it real
     deselect();
-    try {
-      await api('delete', { loc: sel.loc });
-    } catch (err) {
-      sel.el.style.display = '';
-      addTweak({ id: 'x' + Date.now(), status: 'error', label: `delete: ${err.message}` });
-    }
   };
 
   function select(target) {
@@ -252,6 +272,97 @@
     deleteBtn.style.display = 'none';
   }
 
+  // ---------- multi-select (shift-click) ----------
+  const multiBoxes = []; // pooled outline divs
+  const multiBar = el('div', 'twk-multibar');
+  multiBar.style.display = 'none';
+  root.appendChild(multiBar);
+
+  function toggleMulti(target) {
+    const loc = target.getAttribute('data-twk');
+    const i = state.multi.findIndex((m) => m.el === target);
+    if (i >= 0) state.multi.splice(i, 1);
+    else {
+      // leaving single-selection mode: fold the current single selection in too
+      if (state.selected && !state.multi.some((m) => m.el === state.selected.el)) {
+        state.multi.push({ el: state.selected.el, loc: state.selected.loc });
+      }
+      if (!state.multi.some((m) => m.el === target)) state.multi.push({ el: target, loc });
+      deselect();
+    }
+    renderMulti();
+  }
+
+  function clearMulti() {
+    state.multi = [];
+    renderMulti();
+  }
+
+  function positionMulti() {
+    state.multi.forEach((m, i) => {
+      if (!multiBoxes[i]) { multiBoxes[i] = el('div', 'twk-multi'); root.appendChild(multiBoxes[i]); }
+      const box = multiBoxes[i];
+      if (!document.contains(m.el)) { box.style.display = 'none'; return; }
+      box.style.display = 'block';
+      positionBox(box, m.el);
+    });
+    for (let i = state.multi.length; i < multiBoxes.length; i++) multiBoxes[i].style.display = 'none';
+  }
+
+  let multiInput;
+  function renderMulti() {
+    positionMulti();
+    if (!state.multi.length) { multiBar.style.display = 'none'; return; }
+    multiBar.style.display = 'flex';
+    multiBar.textContent = '';
+    multiBar.append(el('span', 'twk-count', String(state.multi.length)));
+    multiBar.append(el('span', null, 'selected'));
+    multiInput = el('input');
+    multiInput.placeholder = 'Describe a change for all…';
+    multiInput.value = multiBar._draft || '';
+    multiInput.oninput = () => { multiBar._draft = multiInput.value; };
+    multiInput.onkeydown = (e) => { if (e.key === 'Enter') applyMultiNL(); e.stopPropagation(); };
+    const apply = el('button', 'twk-primary', 'Apply');
+    apply.onclick = applyMultiNL;
+    const del = el('button', 'twk-danger', 'Delete all');
+    del.onclick = deleteMulti;
+    const clear = el('button', null, 'Clear');
+    clear.onclick = clearMulti;
+    multiBar.append(multiInput, apply, del, clear);
+  }
+
+  async function applyMultiNL() {
+    const instruction = (multiInput?.value || '').trim();
+    if (!instruction) return;
+    const targets = state.multi.slice();
+    multiBar._draft = '';
+    clearMulti();
+    for (const t of targets) {
+      try {
+        const r = await api('nl', { loc: t.loc, instruction, model: state.model });
+        addTweak({ id: r.id, status: 'queued', model: r.model, label: `${shortLoc(t.loc)}: ${instruction.slice(0, 40)}` });
+      } catch (e) {
+        addTweak({ id: 'x' + Date.now() + t.loc, status: 'error', label: `${shortLoc(t.loc)}: ${e.message}` });
+      }
+    }
+  }
+
+  async function deleteMulti() {
+    const targets = state.multi.slice();
+    clearMulti();
+    // Delete bottom-up so a mapped-list removal doesn't shift the index of a
+    // not-yet-deleted sibling in the same list.
+    targets.sort((a, b) => (instanceIndex(b.el, b.loc) ?? 0) - (instanceIndex(a.el, a.loc) ?? 0));
+    for (const t of targets) {
+      try {
+        await deleteOne(t);
+      } catch (e) {
+        if (document.contains(t.el)) t.el.style.display = '';
+        addTweak({ id: 'x' + Date.now() + t.loc, status: 'error', label: `delete ${shortLoc(t.loc)}: ${e.message}` });
+      }
+    }
+  }
+
   function reposition() {
     const s = state.selected;
     if (!s) return;
@@ -322,12 +433,25 @@
   function fontStep(target, dir) {
     const scale = readTheme().textSizes;
     const classes = classList(target);
+    // An arbitrary size like `text-[34px]` also sets font-size and would
+    // override the scale class we add — remove it too, and seed the step from
+    // the element's rendered px so the first bump goes the right direction.
+    const arbitrary = classes.filter((c) => /^text-\[[^\]]+\]$/.test(c));
     const cur = classes.find((c) => scale.includes(c));
-    let idx = cur ? scale.indexOf(cur) : scale.indexOf('text-base');
+    let idx;
+    if (cur) idx = scale.indexOf(cur);
+    else {
+      const px = parseFloat(getComputedStyle(target).fontSize) || 16;
+      // nearest scale entry by rendered size, else middle
+      idx = scale.indexOf('text-base');
+      if (idx < 0) idx = Math.floor(scale.length / 2);
+    }
     if (idx < 0) idx = Math.floor(scale.length / 2);
     const next = Math.min(Math.max(idx + dir, 0), scale.length - 1);
-    if (scale[next] === cur) return null;
-    return { remove: cur ? [cur] : [], add: [scale[next]] };
+    const add = scale[next];
+    const remove = [...(cur ? [cur] : []), ...arbitrary];
+    if (add === cur && !arbitrary.length) return null;
+    return { remove, add: [add] };
   }
 
   // Property editor: which classes to strip when setting each property.
@@ -608,14 +732,14 @@
 
     const nlRow = el('div', 'twk-row');
     const input = el('input');
-    input.placeholder = 'Describe a change… (routed to the right model)';
+    input.placeholder = 'Describe a change…';
     const go = el('button', 'twk-primary', 'Go');
     const send = async () => {
       const instruction = input.value.trim();
       if (!instruction) return;
       input.value = '';
       try {
-        const r = await api('nl', { loc: s.loc, instruction });
+        const r = await api('nl', { loc: s.loc, instruction, model: state.model });
         addTweak({ id: r.id, status: 'queued', model: r.model, label: instruction.slice(0, 60) });
       } catch (e) {
         addTweak({ id: 'x' + Date.now(), status: 'error', label: e.message });
@@ -625,6 +749,20 @@
     input.onkeydown = (e) => { if (e.key === 'Enter') send(); e.stopPropagation(); };
     nlRow.append(input, go);
     pop.appendChild(nlRow);
+
+    // Model picker: Auto (router) or a forced tier.
+    const modelRow = el('div', 'twk-row');
+    modelRow.append(el('span', 'twk-label', 'Model'));
+    const modelSel = el('select');
+    for (const [label, value] of [['Auto (routed)', 'auto'], ['Sonnet', 'claude-sonnet-5'], ['Opus', 'claude-opus-4-8'], ['Fable', 'claude-fable-5']]) {
+      const o = el('option', null, label);
+      o.value = value;
+      if (value === state.model) o.selected = true;
+      modelSel.appendChild(o);
+    }
+    modelSel.onchange = () => { state.model = modelSel.value; };
+    modelRow.append(modelSel);
+    pop.appendChild(modelRow);
     // delete lives as a floating icon on the element itself (deleteBtn)
   }
 
@@ -733,7 +871,14 @@
       row._dot.className = 'twk-dot ' + t.status;
       const inFlight = t.status === 'queued' || t.status === 'running';
       row._cancel.style.display = inFlight ? '' : 'none';
-      row._undo.style.display = t.status === 'done' && !String(t.id).startsWith('x') ? '' : 'none';
+      const undoable = t.status === 'done' && !String(t.id).startsWith('x');
+      row._undo.style.display = undoable ? '' : 'none';
+      const key = String(t.id);
+      if (undoable && !undoStack.includes(key)) undoStack.push(key);
+      if (t.status === 'reverted') {
+        const i = undoStack.indexOf(key);
+        if (i >= 0) undoStack.splice(i, 1);
+      }
     }
     const bits = [];
     if (t.model) bits.push(t.model.replace(/^claude-/, '') + (t.effort ? ` @ ${t.effort}` : ''));
@@ -768,22 +913,64 @@
 
   function setMode(on) {
     state.selectMode = on;
-    hint.textContent = on ? 'select mode — click an element · Esc to exit' : '⌘. select mode';
-    if (!on) { setHover(null); deselect(); }
+    hint.textContent = on ? 'select mode — click · shift-click multi · Tab next · ⌘Z undo · Esc exit' : '⌘. select mode';
+    if (!on) { setHover(null); deselect(); clearMulti(); }
   }
 
+  // Visible, stamped elements in document order — the Tab cycle.
+  function stampedEls() {
+    return [...document.querySelectorAll('[data-twk]')].filter((n) => n.getClientRects().length);
+  }
+  function selectNext(dir) {
+    const els = stampedEls();
+    if (!els.length) return;
+    const cur = state.selected?.el;
+    let idx = cur ? els.indexOf(cur) : -1;
+    idx = (idx + dir + els.length) % els.length;
+    const next = els[idx];
+    select(next);
+    next.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  }
+
+  async function undoLast() {
+    const id = undoStack.pop();
+    if (id == null) return;
+    try {
+      await api('undo', { id });
+      setTimeout(reposition, 350);
+    } catch { /* already reverted / unknown — drop it */ }
+  }
+
+  // ⌘Z / Ctrl-Z should still do native undo inside inputs and while editing copy.
+  const inTextField = (t) =>
+    t instanceof Element && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
+
   addEventListener('keydown', (e) => {
     if ((e.metaKey || e.ctrlKey) && e.key === '.') {
       e.preventDefault();
       setMode(!state.selectMode);
       return;
     }
+    // Global undo (works whenever the overlay is active, not just in select
+    // mode) — but never hijack undo inside a text field or mid copy-edit.
+    if ((e.metaKey || e.ctrlKey) && (e.key === 'z' || e.key === 'Z') && !e.shiftKey) {
+      if (state.editing || inTextField(e.target)) return;
+      e.preventDefault();
+      undoLast();
+      return;
+    }
     if (!state.selectMode) return;
     if (e.key === 'Escape') {
       if (state.editing) return finishTextEdit(false);
+      if (state.multi.length) return clearMulti();
       if (state.selected) return deselect();
       return setMode(false);
     }
+    if (e.key === 'Tab' && !state.editing) {
+      e.preventDefault();
+      selectNext(e.shiftKey ? -1 : 1);
+      return;
+    }
     if (e.key === 'Enter' && state.editing) {
       e.preventDefault();
       finishTextEdit(true);
@@ -812,10 +999,13 @@
     e.preventDefault();
     e.stopPropagation();
     const target = e.target instanceof Element ? e.target.closest('[data-twk]') : null;
+    // Shift/⌘-click toggles an element in the multi-selection set.
+    if (target && (e.shiftKey || e.metaKey || e.ctrlKey)) return toggleMulti(target);
+    if (state.multi.length) clearMulti();
     if (target) select(target);
     else deselect();
   }, true);
 
-  addEventListener('scroll', () => { reposition(); setHover(state.hoverEl); }, true);
-  addEventListener('resize', () => reposition());
+  addEventListener('scroll', () => { reposition(); positionMulti(); setHover(state.hoverEl); }, true);
+  addEventListener('resize', () => { reposition(); positionMulti(); });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tweaklocal",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Tweak your UI live in the browser and write the changes straight to source. Copy and Tailwind edits cost zero tokens; everything else routes to a right-sized model via headless claude.",
   "license": "MIT",
   "type": "module",

package/src/resolver.js

@@ -49,7 +49,7 @@ export function loadTarget(root, loc) {
   });
   element = element || nearMiss;
   if (!element) throw new Error(`no JSX element at ${loc}`);
-  return { file, abs, content, element };
+  return { file, abs, content, element, ast };
 }
 
 export function describeTarget(root, loc) {
@@ -94,27 +94,72 @@ export function applyClassEdit(root, loc, removes = [], adds = []) {
   const { abs, content, element } = loadTarget(root, loc);
   const opening = element.openingElement;
   const attr = opening.attributes.find(
-    (a) =>
-      a.type === 'JSXAttribute' &&
-      a.name.name === 'className' &&
-      a.value &&
-      a.value.type === 'StringLiteral'
+    (a) => a.type === 'JSXAttribute' && a.name.name === 'className'
   );
-  let next;
-  if (attr) {
-    let classes = attr.value.value.split(/\s+/).filter(Boolean);
-    classes = classes.filter((c) => !removes.includes(c));
+
+  const editList = (list) => {
+    let classes = list.split(/\s+/).filter(Boolean).filter((c) => !removes.includes(c));
     for (const a of adds) if (!classes.includes(a)) classes.push(a);
-    next =
-      content.slice(0, attr.value.start + 1) +
-      classes.join(' ') +
-      content.slice(attr.value.end - 1);
-  } else {
+    return classes.join(' ');
+  };
+
+  // No className yet — add a fresh string attribute.
+  if (!attr) {
     const pos = opening.name.end;
-    next =
-      content.slice(0, pos) + ` className="${adds.join(' ')}"` + content.slice(pos);
+    return writeChecked(abs, content, content.slice(0, pos) + ` className="${adds.join(' ')}"` + content.slice(pos));
   }
-  return writeChecked(abs, content, next);
+
+  // className="..."  (plain string attribute)
+  if (attr.value && attr.value.type === 'StringLiteral') {
+    const next = content.slice(0, attr.value.start + 1) + editList(attr.value.value) + content.slice(attr.value.end - 1);
+    return writeChecked(abs, content, next);
+  }
+
+  const expr = attr.value && attr.value.type === 'JSXExpressionContainer' ? attr.value.expression : null;
+
+  // className={"..."} / className={'...'}  (string inside an expression)
+  if (expr && expr.type === 'StringLiteral') {
+    const next = content.slice(0, expr.start) + JSON.stringify(editList(expr.value)) + content.slice(expr.end);
+    return writeChecked(abs, content, next);
+  }
+
+  // className={`... ${dyn} ...`}  — edit only the STATIC class tokens; keep the
+  // dynamic `${...}` expressions verbatim, and stay a single className. (The
+  // old code appended a second className attribute here, which React silently
+  // ignored — the reported "font change didn't persist" bug.)
+  if (expr && expr.type === 'TemplateLiteral') {
+    const SENT = '\u0000'; // placeholder marking where each `${expr}` sits
+    const parts = [];
+    expr.quasis.forEach((q, i) => {
+      parts.push(q.value.raw);
+      if (i < expr.expressions.length) parts.push(SENT);
+    });
+    let tokens = parts
+      .join('')
+      .split(/\s+/)
+      .filter(Boolean)
+      .flatMap((t) => {
+        if (!t.includes(SENT)) return [t];
+        const out = [];
+        t.split(SENT).forEach((seg, i, a) => { if (seg) out.push(seg); if (i < a.length - 1) out.push(SENT); });
+        return out;
+      });
+    tokens = tokens.filter((t) => t === SENT || !removes.includes(t));
+    for (const a of adds) if (!tokens.includes(a)) tokens.push(a);
+    let ei = 0;
+    const rebuilt = tokens
+      .map((t) => (t === SENT ? '${' + content.slice(expr.expressions[ei].start, expr.expressions[ei++].end) + '}' : t))
+      .join(' ');
+    const next = content.slice(0, expr.start) + '`' + rebuilt + '`' + content.slice(expr.end);
+    return writeChecked(abs, content, next);
+  }
+
+  // Computed className (cn(...), a variable, &&/ternary at the top level) —
+  // refuse rather than write a duplicate/broken attribute. The overlay surfaces
+  // this; size/color still work via the inline-style lane.
+  throw new Error(
+    "className here is computed, so I can't edit its classes deterministically. Use the size/color controls (inline style) or describe the change to route it through the model."
+  );
 }
 
 /**
@@ -201,38 +246,141 @@ function removeElementFromContent(content, element, file) {
   }
 }
 
-// If `element` is the sole rendered output of a NAMED component function,
-// return that component's name. Returns null when the innermost enclosing
-// function is an anonymous callback (e.g. a `.map()` list item) — those are
-// data-driven and belong in the model lane, not a usage removal.
-function soleReturnComponentName(ast, element) {
-  // innermost function whose span contains the element
-  let inner = null;
-  walk(ast, (n) => {
-    if (
-      n.type !== 'FunctionDeclaration' &&
-      n.type !== 'FunctionExpression' &&
-      n.type !== 'ArrowFunctionExpression'
-    ) return;
-    if (n.start <= element.start && n.end >= element.end) {
-      if (!inner || (n.end - n.start) < (inner.end - inner.start)) inner = n;
+// Ancestor chain from `element` up to the Program node (element first).
+function ancestorChain(ast, element) {
+  const chain = [];
+  (function descend(node, trail) {
+    if (!node || typeof node.type !== 'string') return false;
+    if (node === element) {
+      chain.push(element, ...trail);
+      return true;
     }
-  });
-  if (!inner) return null;
+    if (node.start > element.start || node.end < element.end) return false;
+    for (const key of Object.keys(node)) {
+      if (key === 'loc') continue;
+      const v = node[key];
+      const kids = Array.isArray(v) ? v : [v];
+      for (const kid of kids) {
+        if (kid && typeof kid.type === 'string' && descend(kid, [node, ...trail])) return true;
+      }
+    }
+    return false;
+  })(ast, []);
+  return chain;
+}
 
-  // named function declaration: function Foo() {}
-  if (inner.id && inner.id.name) return inner.id.name;
+const FN_TYPES = new Set(['FunctionDeclaration', 'FunctionExpression', 'ArrowFunctionExpression']);
+
+// If the chain shows `element` is the RETURNED VALUE of the innermost enclosing
+// function (only Return/Block between them), return that function node.
+// This gate matters: without it, a parse-breaking delete anywhere inside a
+// named component would wrongly escalate to removing the component's usage.
+function returningFunction(chain) {
+  for (let i = 1; i < chain.length; i++) {
+    const t = chain[i].type;
+    if (t === 'ReturnStatement' || t === 'BlockStatement') continue;
+    return FN_TYPES.has(t) ? chain[i] : null;
+  }
+  return null;
+}
 
-  // arrow/function bound to a name: const Foo = () => {} / const Foo = function(){}
+function nameOfFunction(ast, fn) {
+  if (!fn) return null;
+  if (fn.id && fn.id.name) return fn.id.name;
   let name = null;
   walk(ast, (n) => {
     if (
       n.type === 'VariableDeclarator' &&
-      n.init && n.init.start === inner.start && n.init.end === inner.end &&
+      n.init && n.init.start === fn.start && n.init.end === fn.end &&
       n.id && n.id.type === 'Identifier'
     ) name = n.id.name;
   });
-  return name; // null if the innermost fn is an anonymous callback (map, etc.)
+  return name;
+}
+
+// Walk up from the element looking for a `{...}` JSX expression whose whole
+// removal parses — covers `{cond && <el/>}` (conditional) and `{arr.map(...)}`
+// (list template). Never crosses a function boundary except an inline callback
+// (a function that is itself a call argument, e.g. the .map render callback).
+// For lists, also returns the map CallExpression so the caller can target the
+// underlying data array instead of the whole list.
+function removableExpressionContainer(chain) {
+  for (let i = 1; i < chain.length; i++) {
+    const node = chain[i];
+    if (node.type === 'JSXExpressionContainer') {
+      const inner = chain[i - 1];
+      const isList = FN_TYPES.has(inner?.type) || inner?.type === 'CallExpression';
+      return { container: node, kind: isList ? 'list' : 'conditional block', mapCall: isList ? inner : null };
+    }
+    if (FN_TYPES.has(node.type)) {
+      // crossing a function is only allowed for inline callbacks (map etc.)
+      const parent = chain[i + 1];
+      if (!parent || parent.type !== 'CallExpression') return null;
+    }
+  }
+  return null;
+}
+
+// Unwrap TS wrappers around an initializer (as const / satisfies / parens).
+function unwrapExpr(node) {
+  let n = node;
+  while (n && (n.type === 'TSAsExpression' || n.type === 'TSSatisfiesExpression' || n.type === 'TSNonNullExpression' || n.type === 'ParenthesizedExpression'))
+    n = n.expression;
+  return n;
+}
+
+// For `{items.map(cb)}`: resolve `items` to a local `const items = [...]`
+// ArrayExpression in the same file. Returns the array node or null.
+function resolveMappedArray(ast, mapCall) {
+  let call = mapCall;
+  // chain may have handed us the arrow (expression-body case) — find the call
+  if (call && FN_TYPES.has(call.type)) return null; // caller passes the real call below
+  if (!call || call.type !== 'CallExpression') return null;
+  const callee = call.callee;
+  if (
+    callee?.type !== 'MemberExpression' ||
+    callee.property?.type !== 'Identifier' ||
+    !['map', 'flatMap'].includes(callee.property.name) ||
+    callee.object?.type !== 'Identifier'
+  ) return null;
+  const arrName = callee.object.name;
+  let arr = null;
+  walk(ast, (n) => {
+    if (arr) return;
+    if (n.type === 'VariableDeclarator' && n.id?.type === 'Identifier' && n.id.name === arrName) {
+      const init = unwrapExpr(n.init);
+      if (init?.type === 'ArrayExpression') arr = init;
+    }
+  });
+  return arr;
+}
+
+// Remove the k-th element of an ArrayExpression, handling commas and whole
+// lines. Returns new content, or null if the result doesn't parse.
+function removeArrayElement(content, arrayNode, k, file) {
+  const el = arrayNode.elements[k];
+  if (!el) return null;
+  let start = el.start;
+  let end = el.end;
+  const after = content.slice(end).match(/^\s*,/);
+  if (after) end += after[0].length;
+  else {
+    const before = content.slice(0, start).match(/,\s*$/);
+    if (before) start -= before[0].length;
+  }
+  const lineStart = content.lastIndexOf('\n', start - 1) + 1;
+  const trailing = content.slice(end).match(/^[ \t]*\n/);
+  if (/^[ \t]*$/.test(content.slice(lineStart, start)) && trailing) {
+    start = lineStart;
+    end += trailing[0].length;
+  }
+  const next = content.slice(0, start) + content.slice(end);
+  try {
+    parseSource(next, file);
+    return next;
+  } catch {
+    return null;
+  }
 }
 
 // Walk the project for JSX usages of <Name ...>. Returns [{file, element}].
@@ -267,15 +415,20 @@ function findUsages(root, name) {
 }
 
 /**
- * Delete behavior:
- *  - Normal element (has siblings / non-sole child): remove it in place.
- *  - Sole return of a component: the element IS the component's whole output,
- *    so "delete this" means remove the component's rendered *usage*. If the
- *    component is used in exactly one place, remove that usage deterministically.
- *    Otherwise refuse with an actionable message (ambiguous → model lane).
+ * Delete behavior, in order:
+ *  1. Normal element (has siblings): remove it in place.
+ *  2. List template (`{arr.map(...)}`): the clicked DOM instance's `index`
+ *     identifies the data item — remove that ONE entry from the local array
+ *     literal. Deleting one card removes one card, not the list. (To remove a
+ *     whole list, select its surrounding wrapper element instead.)
+ *  3. Conditional (`{cond && <el/>}`): remove the whole conditional block.
+ *  4. Sole return of a NAMED component used in exactly one place: remove that
+ *     usage at its call site.
+ *  Otherwise refuse with an actionable message (ambiguous → model lane).
  */
-export function applyDeleteElement(root, loc, { dryRun = false } = {}) {
-  const { abs, content, element, file } = loadTarget(root, loc);
+export function applyDeleteElement(root, loc, { dryRun = false, index } = {}) {
+  // reuse loadTarget's AST — element identity must hold for the ancestor walk
+  const { abs, content, element, file, ast } = loadTarget(root, loc);
 
   const inPlace = removeElementFromContent(content, element, file);
   if (inPlace !== null) {
@@ -283,13 +436,41 @@ export function applyDeleteElement(root, loc, { dryRun = false } = {}) {
     return writeChecked(abs, content, inPlace);
   }
 
-  // Removing the element in place would break the file → it's the sole return.
-  const ast = parseSource(content, file);
-  const name = soleReturnComponentName(ast, element);
+  // In-place removal breaks the file — walk up for a deletable wrapper.
+  const chain = ancestorChain(ast, element);
+
+  const wrapper = removableExpressionContainer(chain);
+  if (wrapper && wrapper.kind === 'list') {
+    const arr = resolveMappedArray(ast, wrapper.mapCall);
+    if (arr && Number.isInteger(index) && index >= 0 && index < arr.elements.length) {
+      const next = removeArrayElement(content, arr, index, file);
+      if (next !== null) {
+        const detail = `item ${index + 1} of ${arr.elements.length}`;
+        if (dryRun) return { abs, before: content, after: next, wouldWrite: false, removedBlock: detail };
+        return { ...writeChecked(abs, content, next), removedBlock: detail };
+      }
+    }
+    // data not editable deterministically (imported/computed array, or the
+    // instance index is unknown) — never silently delete the whole list
+    throw new Error(
+      "this is one item in a rendered list whose data I can't safely edit here. Describe the change (e.g. \"remove the second stat\") and it'll route through the model — or select the list's surrounding container to delete the whole list."
+    );
+  }
+  if (wrapper) {
+    const next = removeElementFromContent(content, wrapper.container, file);
+    if (next !== null) {
+      if (dryRun) return { abs, before: content, after: next, wouldWrite: false, removedBlock: wrapper.kind };
+      return { ...writeChecked(abs, content, next), removedBlock: wrapper.kind };
+    }
+  }
+
+  // Not a removable wrapper — usage removal, but ONLY when the element really
+  // is the returned output of a named component.
+  const fn = returningFunction(chain);
+  const name = nameOfFunction(ast, fn);
   if (!name || !/^[A-Z]/.test(name)) {
-    // no resolvable component name (anonymous default, or a .map() list item)
     throw new Error(
-      "can't delete this in place — it's the only thing rendered here (likely a list item or an unnamed component). Describe the change instead (e.g. \"remove this from the list\") and it'll route through the model."
+      "can't delete this in place — it's the only thing rendered here and there's no removable wrapper. Describe the change instead (e.g. \"remove this from the list\") and it'll route through the model."
     );
   }
 

package/src/router.js

@@ -32,8 +32,10 @@ const EXISTING_COMPONENT =
 const NEW_LOGIC =
   /(implement|build|create|add a (new )?(feature|form|modal|dropdown|toggle|filter|search|carousel|slider|tab|accordion|tooltip|menu|pagination|stepper|wizard)|when (clicked|submitted|hovered|selected|scrolled)|on (click|submit|change|load|scroll)|fetch|\bapi\b|endpoint|request|\bstate\b|store|track|count(er|down)?|validat(e|ion)|debounce|localstorage|session storage|cookie|websocket|subscribe|drag|sortable|upload|download|timer|interval|keyboard shortcut)/i;
 
+// "signup form" is a UI task (tier 2); "sign in with google" is auth (tier 3) —
+// the sign in/up pattern only counts when followed by an auth-flow preposition.
 const MISSION_CRITICAL =
-  /(\bauth\b|authentication|log ?in|log ?out|sign ?(in|up)|password|payment|checkout|billing|stripe|subscription|credit card|security|permission|\brole\b|admin|database|migration|schema|production|deploy|delete (all|account|user)|gdpr|\bpii\b|encrypt)/i;
+  /(\bauth\b|authentication|oauth|\bsso\b|log ?in|log ?out|sign ?(in|up) (with|via|using|flow)|password|payment|checkout|billing|stripe|subscription|credit card|security|permission|\brole\b|admin|database|migration|schema|production|deploy|delete (all|account|user)|gdpr|\bpii\b|encrypt)/i;
 
 const MULTI_SCOPE =
   /(across (the|all)|all pages|every (page|component|section)|entire (site|app|page)|throughout|end.to.end|site.wide|app.wide)/i;
@@ -107,7 +109,10 @@ function llmClassify(instruction, cwd) {
       clearTimeout(timer);
       try {
         const envelope = JSON.parse(out);
-        const parsed = typeof envelope.result === 'string' ? JSON.parse(envelope.result) : envelope.result;
+        // --json-schema puts the validated object in structured_output
+        const parsed =
+          envelope.structured_output ??
+          (typeof envelope.result === 'string' && envelope.result ? JSON.parse(envelope.result) : envelope.result);
         if (parsed && [1, 2, 3].includes(parsed.tier)) return resolve(parsed);
       } catch { /* fall through */ }
       resolve(null);

package/src/server.js

@@ -128,17 +128,19 @@ export function startServer({ root, port = 4100 }) {
 
         if (url.pathname === '/api/delete') {
           if (body.dryRun) {
-            applyDeleteElement(root, body.loc, { dryRun: true }); // throws if unsafe, writes nothing
+            applyDeleteElement(root, body.loc, { dryRun: true, index: body.index }); // throws if unsafe, writes nothing
             return json(res, { ok: true, dryRun: true });
           }
           const id = nextId++;
           const target = describeTarget(root, body.loc);
-          const write = applyDeleteElement(root, body.loc);
+          const write = applyDeleteElement(root, body.loc, { index: body.index });
           remember(id, write);
           telemetry.record('delete');
           const label = write.removedUsage
             ? `removed <${write.removedUsage}> usage`
-            : `deleted <${target.tagName}>`;
+            : write.removedBlock
+              ? `deleted ${write.removedBlock}`
+              : `deleted <${target.tagName}>`;
           broadcast({ type: 'tweak', id, kind: 'delete', status: 'done', tokens: 0, label, ...recordSavings(0, 50) });
           return json(res, { ok: true, id });
         }
@@ -171,6 +173,12 @@ export function startServer({ root, port = 4100 }) {
           const { file } = parseLoc(body.loc);
           const target = describeTarget(root, body.loc);
           const route = await classify(body.instruction, { cwd: root });
+          // Manual model override from the picker: keep the router's effort/tier
+          // (still sized to the request) but force the model the user chose.
+          if (body.model && body.model !== 'auto') {
+            route.model = body.model;
+            route.tier = 'manual';
+          }
           const abs = path.resolve(root, file);
           remember(id, { abs, before: fs.readFileSync(abs, 'utf8') });
           telemetry.record('nl');