tweaklocal 0.1.1 → 0.3.1

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

@@ -40,7 +40,7 @@
   .twk-total a:hover{color:#a7f3d0}
   .twk-tweak{background:#111827;color:#e5e7eb;border-radius:8px;padding:7px 11px;font-size:13px;display:flex;gap:8px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap;width:max-content;max-width:720px;overflow:hidden;text-overflow:ellipsis}
   .twk-dot{width:8px;height:8px;border-radius:50%;flex:none}
-  .twk-dot.done{background:#10b981}.twk-dot.queued,.twk-dot.running{background:#f59e0b;animation:twk-pulse 1s infinite}.twk-dot.error{background:#ef4444}.twk-dot.reverted{background:#6b7280}
+  .twk-dot.done{background:#10b981}.twk-dot.queued,.twk-dot.running{background:#f59e0b;animation:twk-pulse 1s infinite}.twk-dot.error{background:#ef4444}.twk-dot.reverted,.twk-dot.cancelled{background:#6b7280}
   .twk-tweak button{background:none;border:none;color:#818cf8;cursor:pointer;font-size:12.5px;padding:0}
   .twk-meta{color:#9ca3af}
   .twk-hint{position:fixed;left:14px;bottom:14px;background:#111827;color:#9ca3af;font-size:12.5px;padding:6px 11px;border-radius:6px;pointer-events:none}
@@ -708,6 +708,13 @@
       row._dot = el('span', 'twk-dot');
       row._label = el('span', null, '');
       row._meta = el('span', 'twk-meta', '');
+      row._cancel = el('button', null, 'cancel');
+      row._cancel.style.display = 'none';
+      row._cancel.onclick = async () => {
+        try {
+          await api('cancel', { id: t.id });
+        } catch (e) { row._meta.textContent = e.message; }
+      };
       row._undo = el('button', null, 'undo');
       row._undo.style.display = 'none';
       row._undo.onclick = async () => {
@@ -716,7 +723,7 @@
           setTimeout(reposition, 350);
         } catch (e) { row._meta.textContent = e.message; }
       };
-      row.append(row._dot, row._label, row._meta, row._undo);
+      row.append(row._dot, row._label, row._meta, row._cancel, row._undo);
       tray.insertBefore(row, totalBar.nextSibling);
       tweaks.set(String(t.id), row);
       while (tray.children.length > 7) tray.lastChild.remove();
@@ -724,10 +731,12 @@
     if (t.label) row._label.textContent = t.label;
     if (t.status) {
       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 bits = [];
-    if (t.model) bits.push(t.model);
+    if (t.model) bits.push(t.model.replace(/^claude-/, '') + (t.effort ? ` @ ${t.effort}` : ''));
     if (t.tokens === 0) bits.push('0 tokens');
     if (t.durationMs) bits.push((t.durationMs / 1000).toFixed(1) + 's');
     if (t.costUSD != null) bits.push('$' + t.costUSD.toFixed(3));

package/package.json

@@ -1,17 +1,35 @@
 {
   "name": "tweaklocal",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "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",
-  "bin": { "tweaklocal": "bin/tweaklocal.js" },
-  "scripts": { "start": "node bin/tweaklocal.js" },
-  "files": ["bin", "src", "overlay", "README.md"],
+  "bin": {
+    "tweaklocal": "bin/tweaklocal.js"
+  },
+  "scripts": {
+    "start": "node bin/tweaklocal.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "overlay",
+    "README.md"
+  ],
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
     "@babel/parser": "^7.26.0"
   },
-  "keywords": ["devtools", "tailwind", "visual-editor", "claude", "ai", "nextjs", "vite", "react"]
+  "keywords": [
+    "devtools",
+    "tailwind",
+    "visual-editor",
+    "claude",
+    "ai",
+    "nextjs",
+    "vite",
+    "react"
+  ]
 }

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) {
@@ -181,13 +181,9 @@ export function applyStyleEdit(root, loc, styles) {
   );
 }
 
-/**
- * Delete the element from source, consuming its whole line(s) when it sits
- * alone on them. Refuses (throws) if the removal would leave the file
- * unparseable — e.g. deleting a component's only root element.
- */
-export function applyDeleteElement(root, loc, { dryRun = false } = {}) {
-  const { abs, content, element, file } = loadTarget(root, loc);
+// Remove an element from its source string, consuming its whole line(s) when
+// it sits alone on them. Returns the new content, or null if unparseable.
+function removeElementFromContent(content, element, file) {
   let start = element.start;
   let end = element.end;
   const lineStart = content.lastIndexOf('\n', start - 1) + 1;
@@ -199,22 +195,183 @@ export function applyDeleteElement(root, loc, { dryRun = false } = {}) {
   const next = content.slice(0, start) + content.slice(end);
   try {
     parseSource(next, file);
+    return next;
   } catch {
-    // Almost always: this element is the ONLY thing its component (or a
-    // .map() callback) renders, so removing it would leave an empty
-    // `return ()` or `.map(() => ())` — invalid JS. Detect that specific,
-    // near-universal case to give an actionable message instead of a
-    // generic parse error.
-    const before = content.slice(0, start).trimEnd();
-    const soleReturn = /(return\s*\(?|=>\s*\(?)$/.test(before);
+    return null;
+  }
+}
+
+// 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 (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;
+}
+
+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;
+}
+
+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 === fn.start && n.init.end === fn.end &&
+      n.id && n.id.type === 'Identifier'
+    ) name = n.id.name;
+  });
+  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: removing it removes the rendered list). Never crosses a
+// function boundary except an inline callback (a function that is itself a
+// call argument, e.g. the .map render callback).
+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' };
+    }
+    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;
+}
+
+// Walk the project for JSX usages of <Name ...>. Returns [{file, element}].
+function findUsages(root, name) {
+  const usages = [];
+  const skip = new Set(['node_modules', '.next', '.git', 'dist', '.turbo']);
+  const stack = [root];
+  while (stack.length) {
+    const dir = stack.pop();
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { continue; }
+    for (const e of entries) {
+      const full = path.join(dir, e.name);
+      if (e.isDirectory()) { if (!skip.has(e.name)) stack.push(full); continue; }
+      if (!/\.(jsx|tsx)$/.test(e.name)) continue;
+      let content, ast;
+      try {
+        content = fs.readFileSync(full, 'utf8');
+        if (!content.includes('<' + name)) continue; // cheap prefilter
+        ast = parseSource(content, e.name);
+      } catch { continue; }
+      walk(ast, (n) => {
+        if (n.type !== 'JSXElement') return;
+        const openName = n.openingElement.name;
+        if (openName.type === 'JSXIdentifier' && openName.name === name) {
+          usages.push({ file: path.relative(root, full), abs: full, content, element: n });
+        }
+      });
+    }
+  }
+  return usages;
+}
+
+/**
+ * Delete behavior, in order:
+ *  1. Normal element (has siblings): remove it in place.
+ *  2. Element inside a `{...}` JSX expression whose removal parses — a list
+ *     template (`{arr.map(...)}`) or a conditional (`{cond && <el/>}`):
+ *     remove the whole expression. Deleting a list template removes the
+ *     rendered list — that's what the on-screen "container" is.
+ *  3. 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 } = {}) {
+  // 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) {
+    if (dryRun) return { abs, before: content, after: inPlace, wouldWrite: false };
+    return writeChecked(abs, content, inPlace);
+  }
+
+  // In-place removal breaks the file — walk up for a deletable wrapper.
+  const chain = ancestorChain(ast, element);
+
+  const wrapper = removableExpressionContainer(chain);
+  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)) {
     throw new Error(
-      soleReturn
-        ? "can't delete — it's the only thing this component (or list item) renders; deleting it would leave nothing to return. Describe the change instead (e.g. \"remove this from the list\") and it'll route through the model."
-        : 'deleting this element would break the file — describe the change instead'
+      "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."
     );
   }
-  if (dryRun) return { abs, before: content, after: next, wouldWrite: false };
-  return writeChecked(abs, content, next);
+
+  const usages = findUsages(root, name).filter(
+    (u) => !(u.abs === abs && u.element.start === element.start && u.element.end === element.end)
+  );
+  if (usages.length === 0) {
+    throw new Error(
+      `can't find where <${name}> is used, so there's no usage to remove. Describe the change instead and it'll route through the model.`
+    );
+  }
+  if (usages.length > 1) {
+    throw new Error(
+      `<${name}> is used in ${usages.length} places — deleting one is ambiguous. Select the specific <${name}> instance you want removed, or describe the change.`
+    );
+  }
+
+  const usage = usages[0];
+  const removed = removeElementFromContent(usage.content, usage.element, usage.file);
+  if (removed === null) {
+    throw new Error(
+      `removing the <${name}> usage would break ${usage.file}. Describe the change instead.`
+    );
+  }
+  if (dryRun) return { abs: usage.abs, before: usage.content, after: removed, wouldWrite: false, removedUsage: name };
+  return { ...writeChecked(usage.abs, usage.content, removed), removedUsage: name };
 }
 
 /** Returns null if the file parses, else the parse error message. */

package/src/router.js

@@ -1,24 +1,188 @@
 import { spawn } from 'node:child_process';
 
-// Behavior verbs only — visual states like "on hover"/"on focus" are style
-// (Tailwind variants), not functionality.
-const FUNCTIONALITY = /(click|toggle|open|close|submit|fetch|load|save|state|counter|count|when |scroll to|navigate|link to|form|validate|sort|filter|search|api|localstorage|modal|dropdown|expand|collapse|disable|enable|animate|animation|add a |remove the )/i;
+// ---------------------------------------------------------------------------
+// Model routing — layered router (deterministic first, LLM tiebreak second).
+//
+// Tiers (see README for the routing table):
+//   1  component tweaks / styles / copy / existing components  → Sonnet-tier
+//   2  new logic & functionality, low error rate               → Opus-tier
+//   3  multi-feature / cross-cutting / mission-critical        → Opus xhigh → Fable
+//
+// "Speed" within a tier is the claude CLI's --effort flag (low..max), scaled
+// by a complexity score. Layer 1 is lexicon+structure heuristics (<1ms, free);
+// when its signals are ambiguous, Layer 2 asks Haiku to classify via
+// --json-schema (~1-3s, ~$0.001). TWEAKLOCAL_ROUTER=heuristic|hybrid|llm.
+// ---------------------------------------------------------------------------
 
-/**
- * Route a natural-language tweak to a model tier.
- * Style/copy → fast model, functionality → reasoning model.
- * Overridable via TWEAKLOCAL_FAST_MODEL / TWEAKLOCAL_SMART_MODEL.
- */
-export function classify(instruction) {
-  const isFunc = FUNCTIONALITY.test(instruction);
+const MODELS = {
+  t1: process.env.TWEAKLOCAL_T1_MODEL || process.env.TWEAKLOCAL_FAST_MODEL || 'claude-sonnet-5',
+  t2: process.env.TWEAKLOCAL_T2_MODEL || process.env.TWEAKLOCAL_SMART_MODEL || 'claude-opus-4-8',
+  t3: process.env.TWEAKLOCAL_T3_MODEL || 'claude-opus-4-8',
+  t3Critical: process.env.TWEAKLOCAL_T3_CRITICAL_MODEL || 'claude-fable-5',
+};
+
+// --- Layer 1 lexicons ------------------------------------------------------
+
+const STYLE_COPY =
+  /(colou?r|\b(red|blue|green|yellow|orange|purple|pink|white|black|gr[ae]y|teal|indigo|emerald|amber|slate|navy|cream)\b|padding|margin|spacing|font|bigger|smaller|larger|tighter|wider|bold|italic|underline|round(ed)?|corner|radius|shadow|glow|gradient|background|border|align|cent(er|re)|width|height|gap|opacity|hover|focus|responsive|mobile|breakpoint|dark mode|reword|rewrite|rephrase|shorten|copy|headline|heading|title|caption|label|tone|punchier|catch(y|ier)|wording|typo|spelling)/i;
+
+const EXISTING_COMPONENT =
+  /(add another|duplicate|a copy of|move (the|this|it)|reorder|swap|reuse|use the existing|another instance|same as the|like the one)/i;
+
+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|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;
+
+const BIG_REWORK = /(refactor|redesign|rebuild|overhaul|rework|migrate)/i;
+
+// --- Layer 1: deterministic scoring ---------------------------------------
+
+function complexityOf(instruction) {
+  let score = 0;
+  const words = instruction.trim().split(/\s+/).length;
+  if (words > 12) score++;
+  if (words > 30) score++;
+  const clauses =
+    (instruction.match(/\b(and|then|also|plus|as well as|after that)\b/gi) || []).length +
+    (instruction.match(/[;,]/g) || []).length;
+  if (clauses >= 2) score++;
+  if (clauses >= 4) score++;
+  if (MULTI_SCOPE.test(instruction) || BIG_REWORK.test(instruction)) score++;
+  return score >= 3 ? 'high' : score >= 1 ? 'medium' : 'low';
+}
+
+function heuristicTier(instruction) {
+  const critical = MISSION_CRITICAL.test(instruction);
+  const multi = MULTI_SCOPE.test(instruction);
+  const rework = BIG_REWORK.test(instruction);
+  const logic = NEW_LOGIC.test(instruction);
+  const surface = STYLE_COPY.test(instruction) || EXISTING_COMPONENT.test(instruction);
+
+  if (critical) return { tier: 3, critical: true, confident: true };
+  if ((multi || rework) && (logic || rework || complexityOf(instruction) === 'high'))
+    return { tier: 3, critical: false, confident: true };
+  if (logic) return { tier: 2, critical: false, confident: true };
+  if (surface) return { tier: 1, critical: false, confident: true };
+  // no signal at all — default to the cheap tier but flag for the LLM tiebreak
+  return { tier: 1, critical: false, confident: false };
+}
+
+// --- Layer 2: Haiku classifier for ambiguous requests ----------------------
+
+const CLASSIFY_SCHEMA = JSON.stringify({
+  type: 'object',
+  properties: {
+    tier: { type: 'integer', enum: [1, 2, 3] },
+    complexity: { type: 'string', enum: ['low', 'medium', 'high'] },
+  },
+  required: ['tier', 'complexity'],
+  additionalProperties: false,
+});
+
+function llmClassify(instruction, cwd) {
+  return new Promise((resolve) => {
+    const prompt = [
+      'Classify this UI change request for model routing. Reply with JSON only.',
+      'tier 1: visual tweaks, styles, copy edits, or rearranging existing components.',
+      'tier 2: new logic or functionality within one area (handlers, state, forms, data fetching).',
+      'tier 3: multi-feature or cross-cutting work, or anything touching auth/payments/data/security.',
+      'complexity: low = one small change; medium = a few steps; high = many steps or broad scope.',
+      `Request: "${instruction.slice(0, 400)}"`,
+    ].join('\n');
+    const child = spawn(
+      'claude',
+      ['-p', prompt, '--model', 'haiku', '--effort', 'low', '--json-schema', CLASSIFY_SCHEMA, '--output-format', 'json'],
+      { cwd, env: { ...process.env, CLAUDE_CODE_ENTRYPOINT: undefined } }
+    );
+    let out = '';
+    const timer = setTimeout(() => { try { child.kill('SIGKILL'); } catch {} }, 15000);
+    timer.unref?.();
+    child.stdout.on('data', (d) => (out += d));
+    child.on('close', () => {
+      clearTimeout(timer);
+      try {
+        const envelope = JSON.parse(out);
+        // --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);
+    });
+    child.on('error', () => { clearTimeout(timer); resolve(null); });
+  });
+}
+
+// --- Route resolution -------------------------------------------------------
+
+const EFFORT = {
+  1: { low: 'low', medium: 'medium', high: 'high' },
+  2: { low: 'medium', medium: 'high', high: 'xhigh' },
+};
+
+function resolveRoute(tier, complexity, critical, source) {
+  if (tier === 3) {
+    const frontier = critical || complexity === 'high';
+    return {
+      tier,
+      complexity,
+      model: frontier ? MODELS.t3Critical : MODELS.t3,
+      // Fable's thinking is always on; effort still scales depth. Opus tier-3
+      // runs at xhigh — the setting recommended for the hardest agentic work.
+      effort: frontier ? 'high' : 'xhigh',
+      kind: critical ? 'mission-critical' : 'multi-feature',
+      source,
+    };
+  }
   return {
-    kind: isFunc ? 'functionality' : 'style/copy',
-    model: isFunc
-      ? process.env.TWEAKLOCAL_SMART_MODEL || 'sonnet'
-      : process.env.TWEAKLOCAL_FAST_MODEL || 'haiku',
+    tier,
+    complexity,
+    model: tier === 1 ? MODELS.t1 : MODELS.t2,
+    effort: EFFORT[tier][complexity],
+    kind: tier === 1 ? 'tweak' : 'feature',
+    source,
   };
 }
 
+/**
+ * Route an instruction to {tier, complexity, model, effort}. Async because
+ * ambiguous requests may consult the Haiku classifier (hybrid mode).
+ */
+export async function classify(instruction, { cwd } = {}) {
+  const mode = process.env.TWEAKLOCAL_ROUTER || 'hybrid';
+  const h = heuristicTier(instruction);
+  let tier = h.tier;
+  let critical = h.critical;
+  let complexity = complexityOf(instruction);
+  let source = 'heuristic';
+
+  const wantLLM = mode === 'llm' || (mode === 'hybrid' && !h.confident);
+  if (wantLLM) {
+    const llm = await llmClassify(instruction, cwd);
+    if (llm) {
+      tier = llm.tier;
+      complexity = llm.complexity;
+      critical = critical || (llm.tier === 3 && MISSION_CRITICAL.test(instruction));
+      source = 'llm';
+    }
+  }
+  return resolveRoute(tier, complexity, critical, source);
+}
+
+/** Synchronous heuristic-only classification (used by tests and dry runs). */
+export function classifySync(instruction) {
+  const h = heuristicTier(instruction);
+  return resolveRoute(h.tier, complexityOf(instruction), h.critical, 'heuristic');
+}
+
 export function buildPrompt({ file, target, instruction, tailwind = true }) {
   const styleRule = tailwind
     ? 'use Tailwind classes for styling'
@@ -36,31 +200,57 @@ export function buildPrompt({ file, target, instruction, tailwind = true }) {
   ].join('\n');
 }
 
-export function runClaude({ prompt, model, cwd, onEvent }) {
+/**
+ * Spawn a headless claude run. `onSpawn` receives the child process so the
+ * caller can register it for cancellation. If cancelled (child killed), the
+ * promise resolves with { ok: false, cancelled: true }.
+ */
+export function runClaude({ prompt, model, effort, cwd, onEvent, onSpawn }) {
   return new Promise((resolve) => {
     const started = Date.now();
+    const args = [
+      '-p',
+      prompt,
+      '--model',
+      model,
+      '--allowedTools',
+      'Read,Edit',
+      '--permission-mode',
+      'acceptEdits',
+      '--output-format',
+      'json',
+    ];
+    if (effort) args.push('--effort', effort);
     const child = spawn(
       'claude',
-      [
-        '-p',
-        prompt,
-        '--model',
-        model,
-        '--allowedTools',
-        'Read,Edit',
-        '--permission-mode',
-        'acceptEdits',
-        '--output-format',
-        'json',
-      ],
-      { cwd, env: { ...process.env, CLAUDE_CODE_ENTRYPOINT: undefined } }
+      args,
+      // detached → the child leads its own process group, so cancelling can
+      // signal the whole group (claude + any tool subprocesses it spawns).
+      // Killing only the top process orphans children that keep stdio pipes
+      // open, which would stall the 'close' event and the restore that follows.
+      { cwd, env: { ...process.env, CLAUDE_CODE_ENTRYPOINT: undefined }, detached: true }
     );
+    let cancelled = false;
+    const signalGroup = (sig) => {
+      try { process.kill(-child.pid, sig); } // negative pid = process group
+      catch { try { child.kill(sig); } catch {} } // fall back to the single process
+    };
+    child.__cancel = () => {
+      cancelled = true;
+      signalGroup('SIGTERM');
+      setTimeout(() => { if (!child.killed) signalGroup('SIGKILL'); }, 1500).unref?.();
+    };
+    onSpawn?.(child);
     let out = '';
     let err = '';
     child.stdout.on('data', (d) => (out += d));
     child.stderr.on('data', (d) => (err += d));
     child.on('close', (code) => {
       const durationMs = Date.now() - started;
+      if (cancelled) {
+        resolve({ ok: false, cancelled: true, durationMs });
+        return;
+      }
       if (code !== 0) {
         resolve({ ok: false, error: err.trim() || `claude exited ${code}`, durationMs });
         return;

package/src/server.js

@@ -30,6 +30,7 @@ function detectTailwind(root) {
 
 export function startServer({ root, port = 4100 }) {
   const undoStack = new Map(); // id -> { abs, before }
+  const running = new Map(); // id -> child process (for cancellation)
   const sseClients = new Set();
   let nextId = 1;
   const tailwind = detectTailwind(root);
@@ -135,7 +136,12 @@ export function startServer({ root, port = 4100 }) {
           const write = applyDeleteElement(root, body.loc);
           remember(id, write);
           telemetry.record('delete');
-          broadcast({ type: 'tweak', id, kind: 'delete', status: 'done', tokens: 0, label: `deleted <${target.tagName}>`, ...recordSavings(0, 50) });
+          const label = write.removedUsage
+            ? `removed <${write.removedUsage}> usage`
+            : 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 });
         }
 
@@ -148,24 +154,55 @@ export function startServer({ root, port = 4100 }) {
           return json(res, { ok: true });
         }
 
+        if (url.pathname === '/api/cancel') {
+          const child = running.get(String(body.id));
+          if (!child) return json(res, { ok: false, error: 'task not running' }, 404);
+          child.__cancel(); // kills the process; the nl handler restores the file
+          return json(res, { ok: true });
+        }
+
+        if (url.pathname === '/api/classify') {
+          // dry-run the router: no file writes, no model edit run (the hybrid
+          // router may still consult the Haiku classifier on ambiguous input)
+          const route = await classify(body.instruction || '', { cwd: root });
+          return json(res, { ok: true, ...route });
+        }
+
         if (url.pathname === '/api/nl') {
           const id = nextId++;
           const { file } = parseLoc(body.loc);
           const target = describeTarget(root, body.loc);
-          const route = classify(body.instruction);
+          const route = await classify(body.instruction, { cwd: root });
           const abs = path.resolve(root, file);
           remember(id, { abs, before: fs.readFileSync(abs, 'utf8') });
           telemetry.record('nl');
-          broadcast({ type: 'tweak', id, kind: route.kind, status: 'queued', model: route.model, label: body.instruction.slice(0, 60) });
-          json(res, { ok: true, id, model: route.model, kind: route.kind });
+          broadcast({ type: 'tweak', id, kind: route.kind, status: 'queued', model: route.model, effort: route.effort, tier: route.tier, label: body.instruction.slice(0, 60) });
+          json(res, { ok: true, id, model: route.model, effort: route.effort, tier: route.tier, kind: route.kind });
+
+          const restore = () => {
+            const entry = undoStack.get(String(id));
+            if (entry) fs.writeFileSync(entry.abs, entry.before);
+          };
 
           const prompt = buildPrompt({ file, target, instruction: body.instruction, tailwind });
           const result = await runClaude({
             prompt,
             model: route.model,
+            effort: route.effort,
             cwd: root,
             onEvent: (e) => broadcast({ type: 'tweak', id, ...e }),
+            onSpawn: (child) => running.set(String(id), child),
           });
+          running.delete(String(id));
+
+          // Cancelled mid-run: undo any partial edit and stop — no retry, no
+          // savings credit.
+          if (result.cancelled) {
+            restore();
+            undoStack.delete(String(id));
+            broadcast({ type: 'tweak', id, status: 'cancelled', model: route.model });
+            return;
+          }
 
           // The model's edit must leave the file parseable: retry once with
           // the parse error, then revert if it's still broken.
@@ -175,15 +212,23 @@ export function startServer({ root, port = 4100 }) {
             const retry = await runClaude({
               prompt: `Your previous edit to ${file} left it with a JSX/JS syntax error:\n${parseErr}\n\nFix ${file} so it parses cleanly while preserving the intended change: ${body.instruction}\nEdit ONLY that file.`,
               model: route.model,
+              effort: route.effort,
               cwd: root,
+              onSpawn: (child) => running.set(String(id), child),
             });
+            running.delete(String(id));
+            if (retry.cancelled) {
+              restore();
+              undoStack.delete(String(id));
+              broadcast({ type: 'tweak', id, status: 'cancelled', model: route.model });
+              return;
+            }
             result.durationMs += retry.durationMs || 0;
             if (retry.costUSD) result.costUSD = (result.costUSD || 0) + retry.costUSD;
             parseErr = checkSyntax(root, file);
           }
           if (parseErr) {
-            const entry = undoStack.get(String(id));
-            fs.writeFileSync(entry.abs, entry.before);
+            restore();
             result.ok = false;
             result.error = `edit reverted — file was left unparseable: ${parseErr.slice(0, 120)}`;
           }
@@ -193,6 +238,8 @@ export function startServer({ root, port = 4100 }) {
             id,
             status: result.ok ? 'done' : 'error',
             model: route.model,
+            effort: route.effort,
+            tier: route.tier,
             durationMs: result.durationMs,
             costUSD: result.costUSD,
             error: result.error,