tweaklocal 0.3.0 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tweaklocal",
-  "version": "0.3.0",
+  "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",

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) {
@@ -201,38 +201,78 @@ 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']);
 
-  // arrow/function bound to a name: const Foo = () => {} / const Foo = function(){}
+// 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 === 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: 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}].
@@ -267,15 +307,19 @@ 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. 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 } = {}) {
-  const { abs, content, element, file } = loadTarget(root, loc);
+  // 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 +327,25 @@ 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) {
+    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

@@ -138,7 +138,9 @@ export function startServer({ root, port = 4100 }) {
           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 });
         }