npm - motion-cart - Versions diffs - 0.1.0 → 0.1.5 - Mend

motion-cart 0.1.0 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (194) hide show

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // src/index.ts
-import path3 from "path";
+import path6 from "path";
 // ../core/dist/chunk-YCZ2J2MA.js
 var MENU_GROUPS = [
@@ -649,13 +649,216 @@ function overlayScript() {
 }
 // ../core/dist/index.js
-import { promises as fs } from "fs";
-import path from "path";
+import { randomUUID } from "crypto";
+import { promises as fs2 } from "fs";
+import path3 from "path";
 import path2 from "path";
 import { realpathSync } from "fs";
 import { query } from "@anthropic-ai/claude-agent-sdk";
+import { promises as fs } from "fs";
+import path from "path";
 import { execFile } from "child_process";
 import { promisify } from "util";
+function panelHtml(opts) {
+  const base = opts.base ?? "";
+  return `<!doctype html>
+<html><head><meta charset="utf-8"><title>motion-cart</title>
+<style>
+  :root{color-scheme:dark}
+  *{box-sizing:border-box}
+  body{margin:0;height:100vh;display:flex;flex-direction:column;background:#0a0b0e;color:#e7e7ea;font:13px system-ui}
+  header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #ffffff1a}
+  header b{font-size:14px}header small{color:#ffffff80}
+  .body{flex:1;display:flex;min-height:0}
+  iframe{flex:1;border:0;background:#fff}
+  aside{width:360px;border-left:1px solid #ffffff1a;display:flex;flex-direction:column;min-height:0}
+  input{width:100%;background:#ffffff0d;border:1px solid #ffffff26;border-radius:8px;color:#fff;padding:9px 11px;outline:none;font-size:13px}
+  input:focus{border-color:#22d3ee80}
+  .hint{color:#ffffff73;font-size:12px;margin:8px 2px 0}
+  .cat{flex:1;overflow:auto;padding:8px 10px}
+  .grp{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#ffffff8c;margin:12px 2px 5px;font-weight:600}
+  .row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;cursor:pointer;color:#ffffffcc;font-size:13px}
+  .row:hover{background:#ffffff14;color:#fff}
+  .row.in{background:#22d3ee30;color:#a5f3fc;box-shadow:inset 0 0 0 1px #22d3ee66}
+  footer{border-top:1px solid #ffffff1a;padding:11px}
+  .item{border:1px solid #ffffff1a;border-radius:6px;padding:7px 9px;margin-bottom:6px;background:#ffffff0a}
+  .item.pick{border-color:#22d3eecc;background:#22d3ee26}
+  .item .top{display:flex;justify-content:space-between;align-items:center;gap:6px}
+  .btn{border:1px solid #ffffff33;border-radius:5px;background:#ffffff0d;color:#fff;padding:4px 9px;font-size:12px;cursor:pointer}
+  .btn.on{background:#22d3ee;color:#06202a;border-color:#22d3ee}
+  .chip{display:inline-flex;gap:5px;align-items:center;background:#00000080;border-radius:4px;padding:2px 7px;font-size:11px;color:#ffffffb3;margin:4px 4px 0 0}
+  .empty{border:1px dashed #ffffff26;border-radius:6px;padding:12px;text-align:center;color:#ffffff73;font-size:12px;margin-bottom:8px}
+  .row2{display:flex;gap:8px}
+  .apply{flex:1;padding:11px;border:0;border-radius:8px;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(90deg,#06b6d4,#6366f1);font-size:13px}
+  .apply:disabled{opacity:.35;cursor:not-allowed}
+  .stop{padding:11px 14px;border:1px solid #ffffff33;border-radius:8px;background:#ffffff0d;color:#fff;cursor:pointer}
+  .note{text-align:center;color:#ffffff66;font-size:11px;margin-top:7px}
+  #savebar{display:flex;gap:6px;margin-top:8px}
+  .save{flex:1;padding:8px;border:1px solid #ffffff26;border-radius:7px;background:#ffffff0d;color:#fff;cursor:pointer;font-size:12px}
+  .save:hover{background:#ffffff1a}
+  .save.danger{border-color:#f8717155;color:#fca5a5}
+  .save:disabled{opacity:.4;cursor:not-allowed}
+  pre{margin:7px 0 0;max-height:160px;overflow:auto;background:#000000a6;border:1px solid #ffffff26;border-radius:6px;padding:9px;font:12px ui-monospace;color:#ffffffd9;white-space:pre-wrap}
+  .x{color:#ffffff73;cursor:pointer}.x:hover{color:#fff}
+  #cart{max-height:34vh;overflow-y:auto;margin-bottom:8px}
+  .cat,#cart,pre{scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
+  .cat::-webkit-scrollbar,#cart::-webkit-scrollbar,pre::-webkit-scrollbar{width:8px;height:8px}
+  .cat::-webkit-scrollbar-thumb,#cart::-webkit-scrollbar-thumb,pre::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:8px;border:2px solid transparent;background-clip:content-box}
+  .cat::-webkit-scrollbar-thumb:hover,#cart::-webkit-scrollbar-thumb:hover,pre::-webkit-scrollbar-thumb:hover{background:#ffffff45;background-clip:content-box}
+  .cat::-webkit-scrollbar-track,#cart::-webkit-scrollbar-track,pre::-webkit-scrollbar-track{background:transparent}
+  #hovercard{position:fixed;z-index:9999;pointer-events:none;width:300px;border:1px solid #ffffff2e;border-radius:10px;overflow:hidden;background:#0c0d11;box-shadow:0 12px 44px #000a;display:none}
+  #hovercard .cap{font:10px ui-monospace;text-transform:uppercase;letter-spacing:.06em;color:#ffffff59;padding:5px 9px;border-bottom:1px solid #ffffff14}
+  #hovercard video{display:block;width:100%;height:198px;object-fit:contain;background:#0c0d11}
+</style></head>
+<body>
+<header><b>motion-cart</b><small>${opts.framework} &middot; ${opts.target}</small></header>
+<div class="body">
+  <iframe id="site" src="${opts.iframeSrc}"></iframe>
+  <aside>
+    <div style="padding:11px;border-bottom:1px solid #ffffff1a">
+      <input id="q" placeholder="Search animations\u2026">
+      <div class="hint">Click an animation to add it &middot; then optionally pick the elements to target.</div>
+    </div>
+    <div class="cat" id="cat"></div>
+    <footer><div id="cart"></div>
+      <div class="row2">
+        <button class="apply" id="apply" disabled>Apply with AI</button>
+        <button class="stop" id="stop" style="display:none">Stop</button>
+      </div>
+      <div class="note">Runs a real Claude agent on your project &middot; ~30s &middot; uses AI credits<span id="sess"></span></div>
+      <div id="savebar" style="display:none">
+        <button class="save" id="undo">Undo last</button>
+        <button class="save" id="merge">Merge</button>
+        <button class="save" id="push" style="display:none">Push</button>
+        <button class="save danger" id="discard">Discard</button>
+      </div>
+      <pre id="log" style="display:none"></pre>
+    </footer>
+  </aside>
+</div>
+<div id="hovercard"><div class="cap">Live preview</div><video id="hovervid" muted loop playsinline preload="none"></video></div>
+<script>
+const MC="motion-cart", BASE=${JSON.stringify(base)}, IFRAME=${JSON.stringify(opts.iframeSrc)}, TOKEN=${JSON.stringify(opts.token)};
+const FRAME_ORIGIN=new URL(IFRAME,location.href).origin;
+let MENU=[],GROUPS=[],cart=[],pickingFor=null,running=false,q="",sessionCost=0,abort=null;
+const site=document.getElementById('site');
+function send(kind){ try{ site.contentWindow.postMessage({source:MC,kind},FRAME_ORIGIN);}catch(e){} }
+window.addEventListener('message',e=>{
+  if(e.origin!==FRAME_ORIGIN) return;
+  const d=e.data; if(!d||d.source!==MC) return;
+  if(d.kind==='picker:ready' && pickingFor) send('picker:enable');
+  if(d.kind==='picker:selected' && pickingFor){
+    const it=cart.find(c=>c.id===pickingFor); if(!it) return;
+    if(!it.targets.some(t=>t.animId===d.target.animId)) it.targets.push(d.target);
+    renderCart();
+  }
+});
+const H={'x-mc-token':TOKEN};
+fetch(BASE+'/api/catalogue',{headers:H}).then(r=>r.json()).then(d=>{MENU=d.items;GROUPS=d.groups;renderCat();});
+let PREVIEWS={}, hoverTimer=null, mx=0, my=0;
+fetch(BASE+'/api/previews',{headers:H}).then(r=>r.json()).then(d=>PREVIEWS=d||{});
+const hc=document.getElementById('hovercard'), hv=document.getElementById('hovervid');
+function placeHover(){ if(hc.style.display==='none')return; const w=300,h=224; let l=mx-w-18; if(l<8)l=mx+18; let t=my-h/2; if(t<8)t=8; if(t+h>innerHeight)t=innerHeight-h-8; hc.style.transform='translate('+l+'px,'+t+'px)'; }
+window.addEventListener('pointermove',e=>{mx=e.clientX;my=e.clientY;placeHover();});
+function showPreview(id){ const p=PREVIEWS[id]; if(!p){hidePreview();return;} if(hoverTimer){clearTimeout(hoverTimer);hoverTimer=null;} hv.poster=BASE+'/previews/'+p.poster; hv.src=BASE+'/previews/'+p.clip; hc.style.display='block'; placeHover(); hv.play&&hv.play().catch(()=>{}); }
+function hidePreview(){ if(hoverTimer)clearTimeout(hoverTimer); hoverTimer=setTimeout(()=>{hc.style.display='none'; hv.pause&&hv.pause(); hv.removeAttribute('src');},120); }
+function inCart(id){return cart.some(c=>c.id===id)}
+function toggle(id){ cart=inCart(id)?cart.filter(c=>c.id!==id):cart.concat([{id,targets:[]}]); if(pickingFor===id)setPicking(null); renderCat();renderCart(); }
+function setPicking(id){ pickingFor=id; send(id?'picker:enable':'picker:disable'); renderCart(); }
+function pickFor(id){ if(!inCart(id))cart.push({id,targets:[]}); setPicking(pickingFor===id?null:id); }
+function title(id){const m=MENU.find(x=>x.id===id);return m?m.title:id}
+function renderCat(){
+  const cat=document.getElementById('cat');cat.innerHTML='';
+  const matched=GROUPS.map(g=>({g,items:MENU.filter(m=>m.group===g && (!q || (m.title+' '+g).toLowerCase().includes(q)))})).filter(x=>x.items.length);
+  if(!matched.length){ cat.innerHTML='<p class="empty">No animations match "'+q+'".</p>'; return; }
+  matched.forEach(({g,items})=>{
+    const h=document.createElement('div');h.className='grp';h.textContent=g;cat.appendChild(h);
+    items.forEach(m=>{const r=document.createElement('div');r.className='row'+(inCart(m.id)?' in':'');
+      r.innerHTML='<span>'+m.title+'</span><span>'+(inCart(m.id)?'\\u2713':'+')+'</span>';
+      r.onclick=()=>toggle(m.id);
+      r.onmouseenter=()=>showPreview(m.id); r.onmouseleave=()=>hidePreview();
+      cat.appendChild(r);});
+  });
+}
+function renderCart(){
+  const c=document.getElementById('cart');c.innerHTML='';
+  if(!cart.length){ c.innerHTML='<div class="empty">Your cart is empty. Add animations from the catalogue above.</div>'; }
+  cart.forEach(it=>{const d=document.createElement('div');d.className='item'+(pickingFor===it.id?' pick':'');
+    const picking=pickingFor===it.id;
+    d.innerHTML='<div class="top"><span>'+title(it.id)+'</span><span>'+
+      '<button class="btn" data-retry="'+it.id+'">Retry</button> '+
+      '<button class="btn '+(picking?'on':'')+'" data-pick="'+it.id+'">'+(picking?'Done picking':('Target'+(it.targets.length?' ('+it.targets.length+')':'')))+'</button> '+
+      '<span class="x" data-rm="'+it.id+'">\\u2715</span></span></div>'+
+      (it.targets.length?'<div>'+it.targets.map(t=>'<span class="chip">'+t.tag+(t.text?'\\u00b7'+t.text.slice(0,14):'')+'</span>').join('')+'</div>':'');
+    c.appendChild(d);});
+  c.querySelectorAll('[data-pick]').forEach(b=>b.onclick=()=>pickFor(b.getAttribute('data-pick')));
+  c.querySelectorAll('[data-rm]').forEach(b=>b.onclick=()=>toggle(b.getAttribute('data-rm')));
+  c.querySelectorAll('[data-retry]').forEach(b=>b.onclick=()=>retryItem(b.getAttribute('data-retry')));
+  document.getElementById('apply').disabled=!cart.length||running;
+}
+document.getElementById('q').oninput=e=>{q=e.target.value.trim().toLowerCase();renderCat();};
+document.getElementById('stop').onclick=()=>{ if(abort) abort.abort(); };
+async function runStream(endpoint, body, intro){
+  if(running) return; running=true; setPicking(null);
+  const log=document.getElementById('log');log.style.display='block';log.textContent=intro+'\\n';
+  document.getElementById('apply').disabled=true; document.getElementById('stop').style.display='inline-block';
+  const started=Date.now(); abort=new AbortController();
+  try{
+    const res=await fetch(BASE+endpoint,{method:'POST',headers:{'content-type':'application/json','x-mc-token':TOKEN},body:JSON.stringify(body),signal:abort.signal});
+    if(!res.ok||!res.body){ log.textContent+='Error: server returned '+res.status+'\\n'; return; }
+    const rd=res.body.getReader();const dec=new TextDecoder();let buf='';
+    for(;;){const{value,done}=await rd.read();
+      buf+=done?dec.decode():dec.decode(value,{stream:true});
+      const fr=buf.split('\\n\\n');buf=done?'':fr.pop();
+      for(const f of fr){const l=f.replace(/^data: /,'').trim();if(!l||l[0]===':')continue;let ev;try{ev=JSON.parse(l)}catch{continue}
+        if(ev.type==='status')log.textContent+=ev.message+'\\n';
+        else if(ev.type==='tool')log.textContent+=(ev.tool==='Read'?'read ':(/Edit|Write/.test(ev.tool)?'edit ':ev.tool.toLowerCase()+' '))+(ev.detail||'')+'\\n';
+        else if(ev.type==='assistant')log.textContent+='AI: '+ev.text.slice(0,200)+'\\n';
+        else if(ev.type==='done'){log.textContent+='Done'+(ev.turns?' \\u00b7 '+ev.turns+' turns':'')+(ev.cost?' \\u00b7 $'+ev.cost.toFixed(3):'')+'\\n'; if(ev.cost){sessionCost+=ev.cost; document.getElementById('sess').textContent=' \\u00b7 session: $'+sessionCost.toFixed(3);}}
+        else if(ev.type==='error')log.textContent+='Error: '+ev.message+'\\n';
+        log.scrollTop=log.scrollHeight;}
+      if(done)break;
+    }
+  }catch(err){ log.textContent+=(err&&err.name==='AbortError'?'Stopped':'Error: '+err)+'\\n'; }
+  finally{
+    running=false;abort=null;
+    document.getElementById('apply').disabled=false; document.getElementById('stop').style.display='none';
+    const secs=Math.round((Date.now()-started)/1000); log.textContent+='('+secs+'s)\\n';
+    setTimeout(()=>{site.src=site.src; refreshStatus();},400);
+  }
+}
+document.getElementById('apply').onclick=()=>{ if(cart.length) runStream('/api/apply',{items:cart},'Sending cart to the agent\u2026'); };
+function retryItem(id){
+  const it=cart.find(c=>c.id===id); if(!it) return;
+  const note=window.prompt('Retry "'+title(id)+'" \u2014 how should it be different? (optional, e.g. "subtler", "slower", "different effect")');
+  if(note===null) return;
+  runStream('/api/retry',{items:[it],note},'Retrying "'+title(id)+'"'+(note?' \u2014 '+note:'')+'\u2026');
+}
+async function refreshStatus(){
+  try{
+    const s=await (await fetch(BASE+'/api/status',{headers:H})).json();
+    document.getElementById('savebar').style.display=(s.active && s.checkpoints>0)?'flex':'none';
+    document.getElementById('merge').textContent='Merge \u2192 '+s.base;
+    document.getElementById('push').style.display=s.remote?'block':'none';
+    document.getElementById('undo').disabled=s.checkpoints<1;
+  }catch(e){}
+}
+async function gitAction(endpoint, confirmMsg){
+  if(confirmMsg && !window.confirm(confirmMsg)) return;
+  const log=document.getElementById('log');log.style.display='block';
+  try{ const r=await fetch(BASE+endpoint,{method:'POST',headers:H}); const d=await r.json();
+    log.textContent+=(d.ok?'\\u2713 '+endpoint.replace('/api/','')+(d.merged?' '+d.merged:'')+(d.branch?' '+d.branch:''):'Error: '+(d.error||r.status))+'\\n';
+  }catch(e){ log.textContent+='Error: '+e+'\\n'; }
+  setTimeout(()=>{site.src=site.src; refreshStatus();},400);
+}
+document.getElementById('undo').onclick=()=>gitAction('/api/undo');
+document.getElementById('merge').onclick=()=>gitAction('/api/merge','Merge this session into your base branch?');
+document.getElementById('push').onclick=()=>gitAction('/api/push');
+document.getElementById('discard').onclick=()=>gitAction('/api/discard','Discard the whole session (delete the branch)?');
+refreshStatus();
+</script>
+</body></html>`;
+}
 async function detectFramework(targetDir) {
   let pkg = {};
   try {
@@ -681,7 +884,7 @@ function frameworkGuidance(fw) {
       return "Vanilla JS/DOM. Use the `motion` package's `animate()` / `scroll()` / `inView()` functions directly on elements; no JSX. Adapt React reference techniques to imperative DOM calls.";
   }
 }
-function composeInstruction(framework, items) {
+function composeInstruction(framework, items, note) {
   const lines = items.flatMap((ci) => {
     const it = MENU_BY_ID[ci.id];
     if (!it) return [];
@@ -706,6 +909,7 @@ function composeInstruction(framework, items) {
     `- Keep it performant (animate transform/opacity/filter; avoid layout thrash; respect prefers-reduced-motion).`,
     `- If the Motion library isn't installed yet, note it clearly in your summary (do not run package installs).`,
     `- The project must keep compiling.`,
+    ...note ? [``, `Adjustment requested for this pass: ${note}`] : [],
     ``,
     `Explain briefly what you changed.`
   ].join("\n");
@@ -735,8 +939,15 @@ function inside(root, abs) {
   }
   return abs === realRoot || abs.startsWith(realRoot + path2.sep);
 }
+function authHint(message) {
+  if (/401|authenticat|bearer|api key|credential|unauthor/i.test(message)) {
+    return `${message}
+\u2192 Auth: pass --api-key/--base-url (e.g. iO Bonzai), log into Claude Code, or set ANTHROPIC_API_KEY. Note: an invalid env key overrides your Claude login.`;
+  }
+  return message;
+}
 async function* runAnimationAgent(opts) {
-  const { root, framework, items, motionToken } = opts;
+  const { root, framework, items, motionToken, baseUrl, apiKey, model, note } = opts;
   const guard = async (tool, input) => {
     if (BLOCKED_TOOLS.has(tool)) return { behavior: "deny", message: `${tool} is disabled.` };
     if (WRITE_TOOLS.has(tool)) {
@@ -764,12 +975,18 @@ async function* runAnimationAgent(opts) {
       env: { TOKEN: motionToken }
     }
   } : void 0;
+  const agentEnv = baseUrl || apiKey ? {
+    ...process.env,
+    ...baseUrl ? { ANTHROPIC_BASE_URL: baseUrl } : {},
+    ...apiKey ? { ANTHROPIC_AUTH_TOKEN: apiKey, ANTHROPIC_API_KEY: apiKey } : {}
+  } : void 0;
+  const providerNote = baseUrl ? ` via ${new URL(baseUrl).host}` : "";
   yield {
     type: "status",
-    message: `Agent starting on a ${framework} project with ${items.length} animation(s)\u2026 ${mcpServers ? "(Motion AI Kit MCP enabled)" : "(bundled Motion guidance)"}`
+    message: `Agent starting on a ${framework} project with ${items.length} animation(s)${providerNote}\u2026 ${mcpServers ? "(Motion AI Kit MCP enabled)" : "(bundled Motion guidance)"}`
   };
   const response = query({
-    prompt: composeInstruction(framework, items),
+    prompt: composeInstruction(framework, items, note),
     options: {
       cwd: root,
       permissionMode: "default",
@@ -777,6 +994,8 @@ async function* runAnimationAgent(opts) {
       allowedTools: ["Read", "Write", "Edit", "Glob", "Grep"],
       disallowedTools: [...BLOCKED_TOOLS],
       ...mcpServers ? { mcpServers } : {},
+      ...agentEnv ? { env: agentEnv } : {},
+      ...model ? { model } : {},
       settingSources: [],
       maxTurns: 80
     }
@@ -799,12 +1018,12 @@ async function* runAnimationAgent(opts) {
         if (message.subtype === "success") {
           yield { type: "done", summary: message.result, cost: message.total_cost_usd, turns: message.num_turns, ms: message.duration_ms };
         } else {
-          yield { type: "error", message: `Agent ended: ${message.subtype}` };
+          yield { type: "error", message: authHint(`Agent ended: ${message.subtype}`) };
         }
       }
     }
   } catch (err) {
-    yield { type: "error", message: err instanceof Error ? err.message : String(err) };
+    yield { type: "error", message: authHint(err instanceof Error ? err.message : String(err)) };
   }
 }
 var run = promisify(execFile);
@@ -849,6 +1068,247 @@ async function diffStat(dir) {
     return "";
   }
 }
+async function headSha(dir) {
+  return git(dir, ["rev-parse", "--short", "HEAD"]);
+}
+async function getRemote(dir) {
+  try {
+    const out = await git(dir, ["remote"]);
+    const first = out.split("\n").map((s) => s.trim()).filter(Boolean)[0];
+    return first ?? null;
+  } catch {
+    return null;
+  }
+}
+async function pushBranch(dir, branch, remote = "origin") {
+  await git(dir, ["push", "-u", remote, branch]);
+}
+async function resetHard(dir, ref) {
+  await git(dir, ["reset", "--hard", ref]);
+}
+async function checkoutBranch(dir, branch) {
+  await git(dir, ["checkout", branch]);
+}
+async function deleteBranch(dir, branch) {
+  await git(dir, ["branch", "-D", branch]);
+}
+async function mergeToBase(dir, base, session) {
+  await git(dir, ["checkout", base]);
+  await git(dir, ["merge", "--no-ff", "--no-edit", session]);
+}
+var MAX_BODY = 256 * 1024;
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    let b = "";
+    let size = 0;
+    req.on("data", (c) => {
+      size += c.length;
+      if (size > MAX_BODY) {
+        reject(new Error("body too large"));
+        req.destroy();
+        return;
+      }
+      b += c;
+    });
+    req.on("end", () => resolve(b));
+    req.on("error", reject);
+  });
+}
+function createNodeDevApi(cfg) {
+  const base = cfg.base ?? "";
+  const token = randomUUID();
+  let sessionBranch = null;
+  let baseBranch = "HEAD";
+  let baseSha = "";
+  const checkpoints = [];
+  async function ensureSession() {
+    if (sessionBranch) return;
+    if (!await isGitRepo(cfg.targetDir)) throw new Error("target is not a git repository");
+    if (!await isClean(cfg.targetDir))
+      throw new Error("target git tree has uncommitted changes \u2014 commit or stash first");
+    baseBranch = await currentBranch(cfg.targetDir);
+    sessionBranch = `motion-cart/session-${Date.now()}`;
+    await checkoutNewBranch(cfg.targetDir, sessionBranch);
+    baseSha = await headSha(cfg.targetDir);
+    checkpoints.length = 0;
+  }
+  const json = (res, code, body) => {
+    res.writeHead(code, { "content-type": "application/json" });
+    res.end(JSON.stringify(body));
+  };
+  const authed = (req) => req.headers["x-mc-token"] === token;
+  async function runAgentSSE(res, items, note) {
+    res.writeHead(200, {
+      "content-type": "text/event-stream; charset=utf-8",
+      "cache-control": "no-cache, no-transform",
+      connection: "keep-alive"
+    });
+    const send = (e) => res.write(`data: ${JSON.stringify(e)}
+`);
+    const heartbeat = setInterval(() => res.write(`: ping
+`), 15e3);
+    try {
+      if (!items.length) throw new Error("cart is empty");
+      const fresh = !sessionBranch;
+      await ensureSession();
+      if (fresh)
+        send({
+          type: "status",
+          message: `Editing on branch ${sessionBranch} (branched from ${baseBranch}; your ${baseBranch} branch is untouched)`
+        });
+      for await (const ev of runAnimationAgent({
+        root: cfg.targetDir,
+        framework: cfg.framework,
+        items,
+        note,
+        motionToken: cfg.token,
+        baseUrl: cfg.baseUrl,
+        apiKey: cfg.apiKey,
+        model: cfg.model
+      }))
+        send(ev);
+      const stat = await diffStat(cfg.targetDir);
+      const committed = await commitAll(
+        cfg.targetDir,
+        note ? `motion-cart: retry \u2014 ${note.slice(0, 60)}` : `motion-cart: applied ${items.length} animation(s)`
+      );
+      if (committed) {
+        checkpoints.push(await headSha(cfg.targetDir));
+        if (stat) send({ type: "status", message: `Committed (checkpoint ${checkpoints.length}):
+${stat}` });
+      }
+    } catch (err) {
+      send({ type: "error", message: err instanceof Error ? err.message : String(err) });
+    } finally {
+      clearInterval(heartbeat);
+      send({ type: "end" });
+      res.end();
+    }
+  }
+  async function servedPreview(res, file0) {
+    if (!cfg.previewsDir) return false;
+    const file = path3.basename(decodeURIComponent(file0));
+    if (file === "preview-manifest.json") {
+      try {
+        res.writeHead(200, { "content-type": "application/json" });
+        res.end(await fs2.readFile(path3.join(cfg.previewsDir, file)));
+      } catch {
+        json(res, 200, {});
+      }
+      return true;
+    }
+    if (!/^[\w.-]+\.(webm|jpg)$/.test(file)) {
+      res.writeHead(404).end();
+      return true;
+    }
+    try {
+      const buf = await fs2.readFile(path3.join(cfg.previewsDir, file));
+      res.writeHead(200, {
+        "content-type": file.endsWith(".webm") ? "video/webm" : "image/jpeg",
+        "cache-control": "public, max-age=3600"
+      });
+      res.end(buf);
+    } catch {
+      res.writeHead(404).end();
+    }
+    return true;
+  }
+  async function handle(req, res) {
+    const url = new URL(req.url || "/", "http://localhost");
+    let p = url.pathname;
+    if (base && p.startsWith(base)) p = p.slice(base.length) || "/";
+    else if (base) return false;
+    if (req.method === "GET" && p === "/") {
+      res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+      res.end(panelHtml({ base, iframeSrc: cfg.iframeSrc, target: cfg.targetDir, framework: cfg.framework, token }));
+      return true;
+    }
+    if (p.startsWith("/previews/")) return servedPreview(res, p.slice("/previews/".length));
+    if (!p.startsWith("/api/")) return false;
+    if (!authed(req)) {
+      json(res, 403, { error: "forbidden" });
+      return true;
+    }
+    if (req.method === "GET" && p === "/api/catalogue") {
+      json(res, 200, { groups: MENU_GROUPS, items: MENU });
+      return true;
+    }
+    if (req.method === "GET" && p === "/api/previews") return servedPreview(res, "preview-manifest.json");
+    if (req.method === "GET" && p === "/api/status") {
+      const remote = sessionBranch ? await getRemote(cfg.targetDir) : null;
+      json(res, 200, { base: baseBranch, session: sessionBranch, checkpoints: checkpoints.length, remote, active: !!sessionBranch });
+      return true;
+    }
+    if (req.method === "POST" && (p === "/api/apply" || p === "/api/retry")) {
+      let items = [];
+      let note;
+      try {
+        const body = JSON.parse(await readBody(req));
+        items = body.items ?? [];
+        if (p === "/api/retry" && typeof body.note === "string" && body.note.trim()) note = body.note.trim();
+      } catch {
+      }
+      await runAgentSSE(res, items, note);
+      return true;
+    }
+    if (req.method === "POST" && p === "/api/undo") {
+      if (!sessionBranch || checkpoints.length === 0) return json(res, 400, { error: "nothing to undo" }), true;
+      const target = checkpoints.length >= 2 ? checkpoints[checkpoints.length - 2] : baseSha;
+      try {
+        await resetHard(cfg.targetDir, target);
+        checkpoints.pop();
+        json(res, 200, { ok: true, checkpoints: checkpoints.length });
+      } catch (err) {
+        json(res, 500, { error: err instanceof Error ? err.message : String(err) });
+      }
+      return true;
+    }
+    if (req.method === "POST" && p === "/api/push") {
+      if (!sessionBranch) return json(res, 400, { error: "no active session" }), true;
+      const remote = await getRemote(cfg.targetDir);
+      if (!remote) return json(res, 400, { error: "no git remote configured" }), true;
+      try {
+        await pushBranch(cfg.targetDir, sessionBranch, remote);
+        json(res, 200, { ok: true, remote, branch: sessionBranch });
+      } catch (err) {
+        json(res, 500, { error: err instanceof Error ? err.message : String(err) });
+      }
+      return true;
+    }
+    if (req.method === "POST" && p === "/api/merge") {
+      if (!sessionBranch) return json(res, 400, { error: "no active session" }), true;
+      const merged = sessionBranch;
+      try {
+        await mergeToBase(cfg.targetDir, baseBranch, sessionBranch);
+        sessionBranch = null;
+        checkpoints.length = 0;
+        json(res, 200, { ok: true, merged, base: baseBranch });
+      } catch (err) {
+        json(res, 500, { error: err instanceof Error ? err.message : String(err) });
+      }
+      return true;
+    }
+    if (req.method === "POST" && p === "/api/discard") {
+      if (!sessionBranch) return json(res, 400, { error: "no active session" }), true;
+      const branch = sessionBranch;
+      try {
+        await checkoutBranch(cfg.targetDir, baseBranch);
+        await deleteBranch(cfg.targetDir, branch);
+        sessionBranch = null;
+        checkpoints.length = 0;
+        json(res, 200, { ok: true, discarded: branch });
+      } catch (err) {
+        json(res, 500, { error: err instanceof Error ? err.message : String(err) });
+      }
+      return true;
+    }
+    json(res, 404, { error: "not found" });
+    return true;
+  }
+  return { token, handle };
+}
 // src/proxy.ts
 import http from "http";
@@ -950,261 +1410,71 @@ function startProxy(devUrl, port2, panelOrigin) {
 // src/server.ts
 import http2 from "http";
-import { randomUUID } from "crypto";
-// src/panel.ts
-function panelHtml(opts) {
-  return `<!doctype html>
-<html><head><meta charset="utf-8"><title>motion-cart</title>
-<style>
-  :root{color-scheme:dark}
-  *{box-sizing:border-box}
-  body{margin:0;height:100vh;display:flex;flex-direction:column;background:#0a0b0e;color:#e7e7ea;font:13px system-ui}
-  header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #ffffff1a}
-  header b{font-size:14px}header small{color:#ffffff80}
-  .body{flex:1;display:flex;min-height:0}
-  iframe{flex:1;border:0;background:#fff}
-  aside{width:360px;border-left:1px solid #ffffff1a;display:flex;flex-direction:column;min-height:0}
-  input{width:100%;background:#ffffff0d;border:1px solid #ffffff26;border-radius:8px;color:#fff;padding:9px 11px;outline:none;font-size:13px}
-  input:focus{border-color:#22d3ee80}
-  .hint{color:#ffffff73;font-size:12px;margin:8px 2px 0}
-  .cat{flex:1;overflow:auto;padding:8px 10px}
-  .grp{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#ffffff8c;margin:12px 2px 5px;font-weight:600}
-  .row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;cursor:pointer;color:#ffffffcc;font-size:13px}
-  .row:hover{background:#ffffff14;color:#fff}
-  .row.in{background:#22d3ee30;color:#a5f3fc;box-shadow:inset 0 0 0 1px #22d3ee66}
-  footer{border-top:1px solid #ffffff1a;padding:11px}
-  .item{border:1px solid #ffffff1a;border-radius:6px;padding:7px 9px;margin-bottom:6px;background:#ffffff0a}
-  .item.pick{border-color:#22d3eecc;background:#22d3ee26}
-  .item .top{display:flex;justify-content:space-between;align-items:center;gap:6px}
-  .btn{border:1px solid #ffffff33;border-radius:5px;background:#ffffff0d;color:#fff;padding:4px 9px;font-size:12px;cursor:pointer}
-  .btn.on{background:#22d3ee;color:#06202a;border-color:#22d3ee}
-  .chip{display:inline-flex;gap:5px;align-items:center;background:#00000080;border-radius:4px;padding:2px 7px;font-size:11px;color:#ffffffb3;margin:4px 4px 0 0}
-  .empty{border:1px dashed #ffffff26;border-radius:6px;padding:12px;text-align:center;color:#ffffff73;font-size:12px;margin-bottom:8px}
-  .row2{display:flex;gap:8px}
-  .apply{flex:1;padding:11px;border:0;border-radius:8px;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(90deg,#06b6d4,#6366f1);font-size:13px}
-  .apply:disabled{opacity:.35;cursor:not-allowed}
-  .stop{padding:11px 14px;border:1px solid #ffffff33;border-radius:8px;background:#ffffff0d;color:#fff;cursor:pointer}
-  .note{text-align:center;color:#ffffff66;font-size:11px;margin-top:7px}
-  pre{margin:7px 0 0;max-height:200px;overflow:auto;background:#000000a6;border:1px solid #ffffff26;border-radius:6px;padding:9px;font:12px ui-monospace;color:#ffffffd9;white-space:pre-wrap}
-  .x{color:#ffffff73;cursor:pointer}.x:hover{color:#fff}
-</style></head>
-<body>
-<header><b>motion-cart</b><small>${opts.framework} &middot; ${opts.target}</small></header>
-<div class="body">
-  <iframe id="site" src="${opts.proxyUrl}"></iframe>
-  <aside>
-    <div style="padding:11px;border-bottom:1px solid #ffffff1a">
-      <input id="q" placeholder="Search animations\u2026">
-      <div class="hint">Click an animation to add it &middot; then optionally pick the elements to target.</div>
-    </div>
-    <div class="cat" id="cat"></div>
-    <footer><div id="cart"></div>
-      <div class="row2">
-        <button class="apply" id="apply" disabled>Apply with AI</button>
-        <button class="stop" id="stop" style="display:none">Stop</button>
-      </div>
-      <div class="note">Runs a real Claude agent on your project &middot; ~30s &middot; uses AI credits<span id="sess"></span></div>
-      <pre id="log" style="display:none"></pre>
-    </footer>
-  </aside>
-</div>
-<script>
-const MC="motion-cart", PROXY=${JSON.stringify(opts.proxyUrl)}, TOKEN=${JSON.stringify(opts.token)};
-let MENU=[],GROUPS=[],cart=[],pickingFor=null,running=false,q="",sessionCost=0,abort=null;
-const site=document.getElementById('site');
-function send(kind){ try{ site.contentWindow.postMessage({source:MC,kind},PROXY);}catch(e){} }
-window.addEventListener('message',e=>{
-  if(e.origin!==PROXY) return;
-  const d=e.data; if(!d||d.source!==MC) return;
-  if(d.kind==='picker:ready' && pickingFor) send('picker:enable');
-  if(d.kind==='picker:selected' && pickingFor){
-    const it=cart.find(c=>c.id===pickingFor); if(!it) return;
-    if(!it.targets.some(t=>t.animId===d.target.animId)) it.targets.push(d.target);
-    renderCart();
-  }
-});
-fetch('/api/catalogue',{headers:{'x-mc-token':TOKEN}}).then(r=>r.json()).then(d=>{MENU=d.items;GROUPS=d.groups;renderCat();});
-function inCart(id){return cart.some(c=>c.id===id)}
-function toggle(id){ cart=inCart(id)?cart.filter(c=>c.id!==id):cart.concat([{id,targets:[]}]); if(pickingFor===id)setPicking(null); renderCat();renderCart(); }
-function setPicking(id){ pickingFor=id; send(id?'picker:enable':'picker:disable'); renderCart(); }
-function pickFor(id){ if(!inCart(id))cart.push({id,targets:[]}); setPicking(pickingFor===id?null:id); }
-function title(id){const m=MENU.find(x=>x.id===id);return m?m.title:id}
-function renderCat(){
-  const cat=document.getElementById('cat');cat.innerHTML='';
-  const matched=GROUPS.map(g=>({g,items:MENU.filter(m=>m.group===g && (!q || (m.title+' '+g).toLowerCase().includes(q)))})).filter(x=>x.items.length);
-  if(!matched.length){ cat.innerHTML='<p class="empty">No animations match "'+q+'".</p>'; return; }
-  matched.forEach(({g,items})=>{
-    const h=document.createElement('div');h.className='grp';h.textContent=g;cat.appendChild(h);
-    items.forEach(m=>{const r=document.createElement('div');r.className='row'+(inCart(m.id)?' in':'');
-      r.innerHTML='<span>'+m.title+'</span><span>'+(inCart(m.id)?'\\u2713':'+')+'</span>';
-      r.onclick=()=>toggle(m.id);cat.appendChild(r);});
-  });
-}
-function renderCart(){
-  const c=document.getElementById('cart');c.innerHTML='';
-  if(!cart.length){ c.innerHTML='<div class="empty">Your cart is empty. Add animations from the catalogue above.</div>'; }
-  cart.forEach(it=>{const d=document.createElement('div');d.className='item'+(pickingFor===it.id?' pick':'');
-    const picking=pickingFor===it.id;
-    d.innerHTML='<div class="top"><span>'+title(it.id)+'</span><span>'+
-      '<button class="btn '+(picking?'on':'')+'" data-pick="'+it.id+'">'+(picking?'Done picking':('Target'+(it.targets.length?' ('+it.targets.length+')':'')))+'</button> '+
-      '<span class="x" data-rm="'+it.id+'">\\u2715</span></span></div>'+
-      (it.targets.length?'<div>'+it.targets.map(t=>'<span class="chip">'+t.tag+(t.text?'\\u00b7'+t.text.slice(0,14):'')+'</span>').join('')+'</div>':'');
-    c.appendChild(d);});
-  c.querySelectorAll('[data-pick]').forEach(b=>b.onclick=()=>pickFor(b.getAttribute('data-pick')));
-  c.querySelectorAll('[data-rm]').forEach(b=>b.onclick=()=>toggle(b.getAttribute('data-rm')));
-  document.getElementById('apply').disabled=!cart.length||running;
-}
-document.getElementById('q').oninput=e=>{q=e.target.value.trim().toLowerCase();renderCat();};
-document.getElementById('stop').onclick=()=>{ if(abort) abort.abort(); };
-document.getElementById('apply').onclick=async()=>{
-  if(!cart.length||running)return; running=true; setPicking(null);
-  const log=document.getElementById('log');log.style.display='block';log.textContent='Sending cart to the agent\u2026\\n';
-  document.getElementById('apply').disabled=true; document.getElementById('stop').style.display='inline-block';
-  const started=Date.now();
-  abort=new AbortController();
-  try{
-    const res=await fetch('/api/apply',{method:'POST',headers:{'content-type':'application/json','x-mc-token':TOKEN},body:JSON.stringify({items:cart}),signal:abort.signal});
-    if(!res.ok||!res.body){ log.textContent+='Error: server returned '+res.status+'\\n'; return; }
-    const rd=res.body.getReader();const dec=new TextDecoder();let buf='';
-    for(;;){const{value,done}=await rd.read();
-      buf+=done?dec.decode():dec.decode(value,{stream:true});
-      const fr=buf.split('\\n\\n');buf=done?'':fr.pop();
-      for(const f of fr){const l=f.replace(/^data: /,'').trim();if(!l||l[0]===':')continue;let ev;try{ev=JSON.parse(l)}catch{continue}
-        if(ev.type==='status')log.textContent+=ev.message+'\\n';
-        else if(ev.type==='tool')log.textContent+=(ev.tool==='Read'?'read ':(/Edit|Write/.test(ev.tool)?'edit ':ev.tool.toLowerCase()+' '))+(ev.detail||'')+'\\n';
-        else if(ev.type==='assistant')log.textContent+='AI: '+ev.text.slice(0,200)+'\\n';
-        else if(ev.type==='done'){log.textContent+='Done'+(ev.turns?' \\u00b7 '+ev.turns+' turns':'')+(ev.cost?' \\u00b7 $'+ev.cost.toFixed(3):'')+'\\n'; if(ev.cost){sessionCost+=ev.cost; document.getElementById('sess').textContent=' \\u00b7 session: $'+sessionCost.toFixed(3);}}
-        else if(ev.type==='error')log.textContent+='Error: '+ev.message+'\\n';
-        log.scrollTop=log.scrollHeight;}
-      if(done)break;
-    }
-  }catch(err){ log.textContent+=(err&&err.name==='AbortError'?'Stopped':'Error: '+err)+'\\n'; }
-  finally{
-    running=false;abort=null;
-    document.getElementById('apply').disabled=false; document.getElementById('stop').style.display='none';
-    const secs=Math.round((Date.now()-started)/1000); log.textContent+='('+secs+'s)\\n';
-    setTimeout(()=>{site.src=site.src;},400);
-  }
-};
-</script>
-</body></html>`;
-}
-// src/server.ts
-var MAX_BODY = 256 * 1024;
-function readBody(req) {
-  return new Promise((resolve, reject) => {
-    let b = "";
-    let size = 0;
-    req.on("data", (c) => {
-      size += c.length;
-      if (size > MAX_BODY) {
-        reject(new Error("body too large"));
-        req.destroy();
-        return;
-      }
-      b += c;
-    });
-    req.on("end", () => resolve(b));
-    req.on("error", reject);
-  });
-}
+import path4 from "path";
+import { fileURLToPath } from "url";
+var PREVIEWS_DIR = path4.resolve(path4.dirname(fileURLToPath(import.meta.url)), "../previews");
 function startControlServer(cfg, port2) {
   const panelOrigin = `http://localhost:${port2}`;
-  const sessionToken = randomUUID();
-  let sessionBranch = null;
-  let baseBranch = "HEAD";
-  async function ensureSession() {
-    if (sessionBranch) return;
-    if (!await isGitRepo(cfg.targetDir)) throw new Error("target is not a git repository");
-    if (!await isClean(cfg.targetDir))
-      throw new Error("target git tree has uncommitted changes \u2014 commit or stash first");
-    baseBranch = await currentBranch(cfg.targetDir);
-    sessionBranch = `motion-cart/session-${Date.now()}`;
-    await checkoutNewBranch(cfg.targetDir, sessionBranch);
-  }
-  function authed(req) {
-    const origin = req.headers["origin"];
-    if (origin && origin !== panelOrigin) return false;
-    return req.headers["x-mc-token"] === sessionToken;
-  }
+  const api = createNodeDevApi({
+    targetDir: cfg.targetDir,
+    framework: cfg.framework,
+    iframeSrc: cfg.proxyUrl,
+    // the panel embeds the proxied target site
+    base: "",
+    previewsDir: PREVIEWS_DIR,
+    token: cfg.token,
+    baseUrl: cfg.baseUrl,
+    apiKey: cfg.apiKey,
+    model: cfg.model
+  });
   const server = http2.createServer(async (req, res) => {
-    const url = new URL(req.url || "/", panelOrigin);
-    if (req.method === "GET" && url.pathname === "/") {
-      res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
-      return res.end(
-        panelHtml({
-          proxyUrl: cfg.proxyUrl,
-          target: cfg.targetDir,
-          framework: cfg.framework,
-          token: sessionToken
-        })
-      );
-    }
-    if (url.pathname.startsWith("/api/")) {
-      if (!authed(req)) {
-        res.writeHead(403, { "content-type": "application/json" });
-        return res.end(JSON.stringify({ error: "forbidden" }));
-      }
-    }
-    if (req.method === "GET" && url.pathname === "/api/catalogue") {
-      res.writeHead(200, { "content-type": "application/json" });
-      return res.end(JSON.stringify({ groups: MENU_GROUPS, items: MENU }));
-    }
-    if (req.method === "POST" && url.pathname === "/api/apply") {
-      let items = [];
-      try {
-        items = JSON.parse(await readBody(req)).items ?? [];
-      } catch {
-      }
-      res.writeHead(200, {
-        "content-type": "text/event-stream; charset=utf-8",
-        "cache-control": "no-cache, no-transform",
-        connection: "keep-alive"
-      });
-      const send = (e) => res.write(`data: ${JSON.stringify(e)}
-`);
-      const heartbeat = setInterval(() => res.write(`: ping
-`), 15e3);
-      try {
-        if (!items.length) throw new Error("cart is empty");
-        await ensureSession();
-        send({
-          type: "status",
-          message: `Editing on branch ${sessionBranch} (branched from ${baseBranch}; your ${baseBranch} branch is untouched)`
-        });
-        for await (const ev of runAnimationAgent({
-          root: cfg.targetDir,
-          framework: cfg.framework,
-          items,
-          motionToken: cfg.token
-        })) {
-          send(ev);
-        }
-        const stat = await diffStat(cfg.targetDir);
-        const committed = await commitAll(cfg.targetDir, `motion-cart: applied ${items.length} animation(s)`);
-        if (committed && stat) send({ type: "status", message: `Committed:
-${stat}` });
-        send({ type: "status", message: `Review: git diff ${baseBranch}..${sessionBranch}` });
-      } catch (err) {
-        send({ type: "error", message: err instanceof Error ? err.message : String(err) });
-      } finally {
-        clearInterval(heartbeat);
-        send({ type: "end" });
-        res.end();
-      }
-      return;
+    if (req.url?.startsWith("/__mc/previews/")) req.url = req.url.replace("/__mc/previews/", "/previews/");
+    if (!await api.handle(req, res)) {
+      res.writeHead(404);
+      res.end();
     }
-    res.writeHead(404);
-    res.end();
   });
   server.listen(port2, "127.0.0.1");
   return { server, url: panelOrigin };
 }
+// src/config.ts
+import { promises as fs3 } from "fs";
+import os from "os";
+import path5 from "path";
+var DIR = path5.join(os.homedir(), ".motion-cart");
+var FILE = path5.join(DIR, "config.json");
+function configPath() {
+  return FILE;
+}
+async function loadConfig() {
+  try {
+    return JSON.parse(await fs3.readFile(FILE, "utf8"));
+  } catch {
+    return {};
+  }
+}
+async function saveConfig(patch) {
+  const current = await loadConfig();
+  const merged = { ...current };
+  for (const [k, v] of Object.entries(patch)) {
+    if (v != null && v !== "") merged[k] = v;
+  }
+  await fs3.mkdir(DIR, { recursive: true });
+  await fs3.writeFile(FILE, JSON.stringify(merged, null, 2), { mode: 384 });
+  try {
+    await fs3.chmod(FILE, 384);
+  } catch {
+  }
+  return merged;
+}
+async function clearConfig() {
+  try {
+    await fs3.rm(FILE);
+  } catch {
+  }
+}
 // src/index.ts
 function arg(name, fallback) {
   const i = process.argv.indexOf(`--${name}`);
@@ -1214,17 +1484,38 @@ function arg(name, fallback) {
   }
   return fallback;
 }
+async function runConfig() {
+  if (process.argv.includes("--clear")) {
+    await clearConfig();
+    console.log("motion-cart: provider config cleared.");
+    return;
+  }
+  const patch = { baseUrl: arg("base-url"), apiKey: arg("api-key"), model: arg("model") };
+  const cfg = Object.values(patch).some((v) => v) ? await saveConfig(patch) : await loadConfig();
+  const key = cfg.apiKey ? `${cfg.apiKey.slice(0, 6)}\u2026 (set)` : "(unset)";
+  console.log(`motion-cart provider config \u2014 ${configPath()}`);
+  console.log(`  base-url  ${cfg.baseUrl || "(unset \u2192 Claude Code login)"}`);
+  console.log(`  api-key   ${key}`);
+  console.log(`  model     ${cfg.model || "(default)"}`);
+  console.log(`
+Flags and MOTION_CART_* env vars override these per run.`);
+}
 function port(name, def) {
   const v = Number(arg(name, String(def)));
   return Number.isInteger(v) && v > 0 && v < 65536 ? v : def;
 }
 var LOOPBACK = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "0.0.0.0", "[::1]", "::1"]);
 async function main() {
-  const target = path3.resolve(arg("target", process.cwd()));
+  if (process.argv[2] === "config") return runConfig();
+  const saved = await loadConfig();
+  const target = path6.resolve(arg("target", process.cwd()));
   const devUrl = arg("dev-url");
   const panelPort = port("port", 7100);
   const proxyPort = port("proxy-port", 7101);
   const token = arg("token", process.env.MOTION_PLUS_TOKEN);
+  const baseUrl = arg("base-url", process.env.MOTION_CART_BASE_URL ?? saved.baseUrl);
+  const apiKey = arg("api-key", process.env.MOTION_CART_API_KEY ?? saved.apiKey);
+  const model = arg("model", process.env.MOTION_CART_MODEL ?? saved.model);
   if (!devUrl) {
     console.error(
       "Usage: motion-cart --dev-url <url> [--target <dir>] [--port 7100] [--proxy-port 7101] [--token <motion+ token>]\n  --dev-url   URL of your already-running LOCAL dev server (e.g. http://localhost:5173)\n  --target    project directory the agent will edit (default: cwd)"
@@ -1247,11 +1538,16 @@ async function main() {
   const framework = await detectFramework(target);
   const proxyUrl = `http://localhost:${proxyPort}`;
   startProxy(devUrl, proxyPort, `http://localhost:${panelPort}`);
-  const { url } = startControlServer({ targetDir: target, devUrl, proxyUrl, framework, token }, panelPort);
+  const { url } = startControlServer(
+    { targetDir: target, devUrl, proxyUrl, framework, token, baseUrl, apiKey, model },
+    panelPort
+  );
+  const provider = baseUrl ? `${new URL(baseUrl).host}${model ? ` (${model})` : ""}` : apiKey ? "custom api key" : "Claude Code login";
   console.log(`
   motion-cart`);
   console.log(`  target    ${target}  (${framework})`);
   console.log(`  dev-url   ${devUrl}  ->  proxied at ${proxyUrl}`);
+  console.log(`  provider  ${provider}`);
   console.log(`  MCP       ${token ? "Motion AI Kit enabled" : "bundled guidance (set --token to enable)"}`);
   console.log(`
   Open the control panel:  ${url}