lazyclaw 3.99.14 → 3.99.16

package/cli.mjs

@@ -1455,7 +1455,10 @@ function _attachGhostAutocomplete(rl) {
 function _renderBanner(version) {
   const W = 30;
   const accent = (s) => `\x1b[38;5;208m${s}\x1b[0m`;
-  const dim    = (s) => `\x1b[2m${s}\x1b[0m`;
+  // 24-bit color so the mascot reads in the same warm orange as the
+  // dist/index.html SVG (#d97757). Falls back gracefully on terminals
+  // that ignore truecolor — the glyphs are visible regardless.
+  const orange = (s) => `\x1b[38;2;217;119;87m${s}\x1b[0m`;
   // Inner content of each banner row — DO NOT pad here, the wrapper
   // does it. Backslashes are JS-escaped so each `\\` renders as one
   // literal `\` in the output.
@@ -1466,16 +1469,18 @@ function _renderBanner(version) {
     '  |_\\__,_/__\\_, |_|',
     '  LazyClaw  |__/  ' + String(version || '?.?.?').padEnd(10).slice(0, 10),
   ];
-  // Sleepy-cat mascot on the right, lined up with the busiest part
-  // of the wordmark. Three rows of ASCII art + "zz" trail. Plain
-  // ASCII (no box-drawing on the cat) so it lands well in any font.
+  // Pixel-art mascot mirrored from the lazyclaude SPA's #claudeMascot
+  // SVG (orange rectangles → block characters). Squashed to 5 rows so
+  // it lines up with `inner` in the banner. Eye sockets are left blank
+  // (the SVG fills them with #000); a hollow gap reads as eyes against
+  // the orange body in any monospace font.
   const mascot = [
     '',
-    '',
-    '   /\\_/\\',
-    '  ( -.- )  ' + dim('z z'),
-    '   > ^ <    ' + dim('z'),
-    '',
+    orange('   ██      ██'),
+    orange('  ██████████████'),
+    orange('  ██  ') + '██' + orange('  ') + '██' + orange('  ██'),
+    orange('  ██████████████'),
+    orange('   ██      ██'),
     '',
   ];
   const banner = [
@@ -1731,12 +1736,19 @@ async function _pickProviderInteractive() {
   while (!family) {
     const familyItems = Object.entries(families)
       .filter(([, b]) => b.members.length > 0)
-      .map(([id, b]) => ({
-        id,
-        label: b.label,
-        desc: `${b.desc}  ·  ${b.members.join(' / ')}`,
-        tag: b.tag,
-      }));
+      .map(([id, b]) => {
+        // Show member count + a few names instead of the full list — the
+        // API-key family alone now has 12 vendors and joining all of them
+        // produced an unreadable line.
+        const preview = b.members.slice(0, 3).join(' / ');
+        const more = b.members.length > 3 ? ` … (+${b.members.length - 3} more)` : '';
+        return {
+          id,
+          label: b.label,
+          desc: `${b.desc}  ·  ${preview}${more}`,
+          tag: b.tag,
+        };
+      });
     const picked = await _arrowMenu({
       title: 'LazyClaw setup — Step 1 of 3:  pick how you want to auth',
       subtitle: 'API: bring your own key  ·  CLI/Local: use what\'s already on this machine  ·  Mock: offline test',
@@ -1752,14 +1764,21 @@ async function _pickProviderInteractive() {
     const memberNames = families[family.id].members;
     const provItems = memberNames.map((name) => {
       const meta = info[name] || {};
-      const models = (meta.suggestedModels || []).slice(0, 4).join(' · ') || '(default)';
       const isCustom = !!meta.custom;
+      const isBuiltinCompat = !!meta.builtinOpenAICompat;
+      // Step-2 desc used to preview four suggested model ids per provider.
+      // That made the row read like "gemini · models: gemini-2.5-pro ·
+      // gemini-2.5-flash · gemini-2.0-flash · gemini-2.0-flash-thinking-exp",
+      // which is too dense and partly redundant — step 3 already shows the
+      // full curated list. Keep the row to a vendor label + endpoint hint.
+      let desc = '';
+      if (isCustom) desc = `custom · ${meta.baseUrl || ''}`;
+      else if (isBuiltinCompat) desc = meta.label || meta.baseUrl || '';
+      else if (meta.label && meta.label !== name) desc = meta.label;
       return {
         id: name,
         label: name,
-        desc: isCustom
-          ? `custom · ${meta.baseUrl || ''}`
-          : `models: ${models}`,
+        desc,
         tag: isCustom
           ? '\x1b[38;5;213m[custom]\x1b[0m'
           : (meta.requiresApiKey ? '\x1b[38;5;245m[api key]\x1b[0m' : '\x1b[38;5;208m[no key]\x1b[0m'),
@@ -1970,7 +1989,7 @@ async function _addCustomProviderInteractive() {
   process.stdout.write(dim('  · Groq             https://api.groq.com/openai/v1') + '\n');
   process.stdout.write(dim('  · vLLM / LM Studio http://localhost:8000/v1') + '\n\n');
 
-  const { validateCustomProviderName, registerCustomProviders, fetchOpenAICompatModels } = _registryMod;
+  const { validateCustomProviderName, registerCustomProviders, fetchOpenAICompatModels, isBuiltinOpenAICompatName } = _registryMod;
   let name;
   while (true) {
     const raw = (await _quickPrompt(`  ${bold('name')} ${dim('(short id, e.g. "nim", "openrouter"):')} `)).trim();
@@ -1978,8 +1997,24 @@ async function _addCustomProviderInteractive() {
       process.stdout.write(dim('  cancelled — back to the picker.\n'));
       return null;
     }
-    try { name = validateCustomProviderName(raw); break; }
-    catch (e) { process.stdout.write(`  \x1b[33m${e.message}\x1b[0m — try again.\n`); }
+    try { name = validateCustomProviderName(raw); }
+    catch (e) {
+      process.stdout.write(`  \x1b[33m${e.message}\x1b[0m — try again.\n`);
+      continue;
+    }
+    // OpenAI-compat builtins (nim / openrouter / groq / …) can be overridden
+    // by a custom entry of the same name — both go through
+    // makeOpenAICompatProvider, so the wire format is identical and the
+    // user is just pointing the same alias at a different URL/key. Surface
+    // the override so it isn't a silent surprise.
+    if (typeof isBuiltinOpenAICompatName === 'function' && isBuiltinOpenAICompatName(name)) {
+      process.stdout.write(
+        `  \x1b[2mNote: "${name}" is a built-in OpenAI-compatible provider; ` +
+        `your custom entry will override the built-in baseUrl/api-key for this install. ` +
+        `Remove with: lazyclaw providers remove ${name}\x1b[0m\n`
+      );
+    }
+    break;
   }
   const baseUrlRaw = (await _quickPrompt(`  ${bold('baseUrl')} ${dim('(must end in /v1, no trailing slash needed):')} `)).trim();
   if (!baseUrlRaw) { process.stdout.write(dim('  cancelled — baseUrl is required.\n')); return null; }
@@ -2463,6 +2498,7 @@ async function cmdDashboard(flags = {}) {
     port,
     once: false,
     readConfig,
+    writeConfig,
     sessionsDirGetter: () => cfgDir,
     sessionsMod,
     version: () => readVersionFromRepo(),
@@ -2568,6 +2604,12 @@ async function cmdDaemon(flags) {
     port: Number.isFinite(port) ? port : 0,
     once,
     readConfig,
+    // `lazyclaw daemon` exposes mutation endpoints (POST /providers,
+    // PUT /rates/<key>, etc.) only when an auth token is configured
+    // — without one the daemon is loopback-only but still untrusted
+    // (any process on the box can hit it). dashboard subcommand sets
+    // writeConfig unconditionally because it always runs as the user.
+    writeConfig: authToken ? writeConfig : undefined,
     sessionsDirGetter: () => cfgDir,
     sessionsMod,
     version: () => readVersionFromRepo(),

package/daemon.mjs

@@ -245,6 +245,7 @@ function isOriginAllowed(req, allowedOrigins) {
 /**
  * @param {{
  *   readConfig: () => Record<string, unknown>,
+ *   writeConfig?: (cfg: Record<string, unknown>) => void,
  *   sessionsDirGetter: () => string,
  *   sessionsMod: typeof import('./sessions.mjs'),
  *   version: () => string,
@@ -256,6 +257,12 @@ function isOriginAllowed(req, allowedOrigins) {
  *   logger?: ReturnType<typeof createLogger> | null,
  *   costCap?: Record<string, number> | null,
  * }} ctx
+ *
+ * `writeConfig` is optional; when omitted the mutation endpoints (POST
+ * /providers, DELETE /providers/<name>, PUT/DELETE /rates/<key>, PUT
+ * /config/<key>) reject with 405 Method Not Allowed. The CLI's
+ * `cmdDashboard` always supplies it; bare `lazyclaw daemon --once` callers
+ * can opt out by leaving it undefined.
  */
 export function makeHandler(ctx) {
   const authToken = ctx.authToken || null;
@@ -373,10 +380,12 @@ export function makeHandler(ctx) {
       const route = `${req.method} ${url.pathname}`;
       const sessionMatch = url.pathname.match(/^\/sessions\/([^/]+)$/);
       const providerMatch = url.pathname.match(/^\/providers\/([^/]+)$/);
+      const providerTestMatch = url.pathname.match(/^\/providers\/([^/]+)\/test$/);
       const sessionExportMatch = url.pathname.match(/^\/sessions\/([^/]+)\/export$/);
       const skillMatch = url.pathname.match(/^\/skills\/([^/]+)$/);
       const workflowMatch = url.pathname.match(/^\/workflows\/([^/]+)$/);
       const configKeyMatch = url.pathname.match(/^\/config\/([^/]+)$/);
+      const ratesKeyMatch = url.pathname.match(/^\/rates\/([^/]+)$/);
       switch (true) {
         case route === 'GET /' || route === 'GET /dashboard': {
           // Serve the lazyclaw-only web dashboard (a single static
@@ -487,9 +496,25 @@ export function makeHandler(ctx) {
         }
         case route === 'GET /providers': {
           // ?filter=<substr>&limit=<N> mirror v3.33+ list flags.
+          // The dashboard reads `custom` / `builtinOpenAICompat` / `endpoint`
+          // / `docs` to render the right pills + tooltips; CLI callers only
+          // need `name` / `requiresApiKey` / `suggestedModels` and ignore
+          // the extras (additive change, no migration).
           let out = Object.keys(PROVIDERS).map(name => {
             const meta = PROVIDER_INFO[name] || { name };
-            return { name, requiresApiKey: !!meta.requiresApiKey, defaultModel: meta.defaultModel || null, suggestedModels: meta.suggestedModels || [] };
+            return {
+              name,
+              requiresApiKey: !!meta.requiresApiKey,
+              defaultModel: meta.defaultModel || null,
+              suggestedModels: meta.suggestedModels || [],
+              endpoint: meta.endpoint || null,
+              docs: meta.docs || null,
+              custom: !!meta.custom,
+              builtinOpenAICompat: !!meta.builtinOpenAICompat,
+              baseUrl: meta.baseUrl || null,
+              envKey: meta.envKey || null,
+              keyPrefix: meta.keyPrefix || null,
+            };
           });
           const filter = url.searchParams.get('filter');
           if (filter) {
@@ -569,6 +594,100 @@ export function makeHandler(ctx) {
             results,
           });
         }
+        case req.method === 'GET' && !!providerTestMatch: {
+          // GET /providers/<name>/test — single-provider 1-token reachability
+          // probe. Same shape as one entry of GET /providers/test, but the
+          // endpoint stops on the first failure and exposes the reply body
+          // (truncated) so the dashboard can show a real signal of life.
+          const name = providerTestMatch[1];
+          const provider = PROVIDERS[name];
+          if (!provider) return writeJson(res, 404, { error: `unknown provider: ${name}` });
+          const cfg = ctx.readConfig();
+          const apiKey = cfg['api-key'] || '';
+          const meta = PROVIDER_INFO[name] || {};
+          const model = url.searchParams.get('model') || cfg.model || meta.defaultModel || 'unknown';
+          const prompt = url.searchParams.get('prompt') || 'ping';
+          const t0 = Date.now();
+          try {
+            let reply = '';
+            const stream = provider.sendMessage([{ role: 'user', content: prompt }], { apiKey, model });
+            for await (const chunk of stream) {
+              if (typeof chunk === 'string') reply += chunk;
+            }
+            return writeJson(res, reply.length > 0 ? 200 : 503, {
+              ok: reply.length > 0,
+              name, model,
+              durationMs: Date.now() - t0,
+              replyLength: reply.length,
+              reply: reply.slice(0, 500),
+            });
+          } catch (err) {
+            return writeJson(res, 503, {
+              ok: false, name, model,
+              durationMs: Date.now() - t0,
+              error: err?.message || String(err),
+              code: err?.code || null,
+            });
+          }
+        }
+        case route === 'POST /providers': {
+          // Register or overwrite a custom OpenAI-compatible provider.
+          // Body: { name, baseUrl, apiKey?, defaultModel? }. Persists into
+          // cfg.customProviders[] and hot-registers via the registry's
+          // registerCustomProviders() so the new entry is callable in this
+          // same process. 405 when the daemon was started without
+          // writeConfig (read-only mode). The same name as a built-in
+          // OpenAI-compat alias is allowed and overrides the built-in.
+          if (typeof ctx.writeConfig !== 'function') {
+            return writeJson(res, 405, { error: 'mutation disabled — daemon was started without writeConfig' });
+          }
+          let body;
+          try { body = await readJson(req); }
+          catch (e) { return writeJson(res, 400, { error: e?.message || String(e) }); }
+          const reg = await import('./providers/registry.mjs');
+          let name;
+          try { name = reg.validateCustomProviderName(body.name); }
+          catch (e) { return writeJson(res, 400, { error: e.message }); }
+          if (!body.baseUrl || typeof body.baseUrl !== 'string' || !/^https?:\/\//i.test(body.baseUrl)) {
+            return writeJson(res, 400, { error: 'baseUrl must be a string starting with http:// or https://' });
+          }
+          const cfg = ctx.readConfig();
+          cfg.customProviders = Array.isArray(cfg.customProviders) ? cfg.customProviders : [];
+          const idx = cfg.customProviders.findIndex((p) => p && p.name === name);
+          const entry = {
+            name,
+            baseUrl: String(body.baseUrl).replace(/\/+$/, ''),
+            apiKey: body.apiKey || undefined,
+            defaultModel: body.defaultModel || undefined,
+          };
+          if (idx >= 0) cfg.customProviders[idx] = { ...cfg.customProviders[idx], ...entry };
+          else cfg.customProviders.push(entry);
+          ctx.writeConfig(cfg);
+          try { reg.registerCustomProviders(cfg); } catch { /* keep going */ }
+          const overridesBuiltin = typeof reg.isBuiltinOpenAICompatName === 'function'
+            ? reg.isBuiltinOpenAICompatName(name)
+            : false;
+          return writeJson(res, 200, { ok: true, name, baseUrl: entry.baseUrl, overridesBuiltin });
+        }
+        case req.method === 'DELETE' && !!providerMatch && providerMatch[1] !== 'test': {
+          // DELETE /providers/<name> — drop a custom registration. Idempotent:
+          // 200 with `removed: false` when the name wasn't a custom entry.
+          // Built-in providers can't be deleted; their PROVIDERS row is
+          // restored on next process boot if the user previously overrode it.
+          if (typeof ctx.writeConfig !== 'function') {
+            return writeJson(res, 405, { error: 'mutation disabled' });
+          }
+          const name = providerMatch[1];
+          const cfg = ctx.readConfig();
+          if (!Array.isArray(cfg.customProviders) || cfg.customProviders.length === 0) {
+            return writeJson(res, 200, { ok: true, name, removed: false });
+          }
+          const before = cfg.customProviders.length;
+          cfg.customProviders = cfg.customProviders.filter((p) => !(p && p.name === name));
+          const removed = cfg.customProviders.length < before;
+          if (removed) ctx.writeConfig(cfg);
+          return writeJson(res, 200, { ok: true, name, removed });
+        }
         case route === 'GET /rates': {
           // Read-only view of cfg.rates so a dashboard's cost panel
           // can render the configured cards without shelling to the
@@ -608,6 +727,42 @@ export function makeHandler(ctx) {
           // fields without shelling to the CLI.
           return writeJson(res, 200, RATE_CARD_SHAPE);
         }
+        case req.method === 'PUT' && !!ratesKeyMatch && ratesKeyMatch[1] !== 'validate' && ratesKeyMatch[1] !== 'shape': {
+          // PUT /rates/<key> — set a rate card. Body is the card object
+          // ({ in, out, "cache-read"?, "cache-create"?, currency? }). The
+          // payload is merged into cfg.rates and validated as a whole;
+          // 422 on validation failure. 405 when writeConfig is unset.
+          if (typeof ctx.writeConfig !== 'function') {
+            return writeJson(res, 405, { error: 'mutation disabled' });
+          }
+          const key = decodeURIComponent(ratesKeyMatch[1]);
+          let body;
+          try { body = await readJson(req); }
+          catch (e) { return writeJson(res, 400, { error: e?.message || String(e) }); }
+          if (!body || typeof body !== 'object') return writeJson(res, 400, { error: 'body must be a JSON object' });
+          const cfg = ctx.readConfig();
+          cfg.rates = cfg.rates && typeof cfg.rates === 'object' ? cfg.rates : {};
+          cfg.rates[key] = body;
+          const v = validateRates(cfg.rates, PROVIDERS);
+          if (!v.ok) return writeJson(res, 422, v);
+          ctx.writeConfig(cfg);
+          return writeJson(res, 200, { ok: true, key, card: cfg.rates[key] });
+        }
+        case req.method === 'DELETE' && !!ratesKeyMatch && ratesKeyMatch[1] !== 'validate' && ratesKeyMatch[1] !== 'shape': {
+          // DELETE /rates/<key> — idempotent: 200 with `removed: false`
+          // when the card didn't exist.
+          if (typeof ctx.writeConfig !== 'function') {
+            return writeJson(res, 405, { error: 'mutation disabled' });
+          }
+          const key = decodeURIComponent(ratesKeyMatch[1]);
+          const cfg = ctx.readConfig();
+          if (!cfg.rates || typeof cfg.rates !== 'object' || !(key in cfg.rates)) {
+            return writeJson(res, 200, { ok: true, key, removed: false });
+          }
+          delete cfg.rates[key];
+          ctx.writeConfig(cfg);
+          return writeJson(res, 200, { ok: true, key, removed: true });
+        }
         case route === 'GET /status': {
           const cfg = ctx.readConfig();
           return writeJson(res, 200, {
@@ -654,6 +809,52 @@ export function makeHandler(ctx) {
           const value = key === 'api-key' ? maskApiKey(raw) : raw;
           return writeJson(res, 200, { key, value });
         }
+        case req.method === 'PUT' && !!configKeyMatch && configKeyMatch[1] !== 'validate': {
+          // PUT /config/<key>  body: { value: <any> }
+          // Mirror of `lazyclaw config set <key> <value>`. Re-validates the
+          // whole config after the write so we never persist a broken state.
+          // Nested cargo (customProviders / rates / authProfiles) goes
+          // through its own dedicated endpoint — guarded here so a
+          // dashboard PUT can't bypass schema validation.
+          if (typeof ctx.writeConfig !== 'function') {
+            return writeJson(res, 405, { error: 'mutation disabled' });
+          }
+          const key = configKeyMatch[1];
+          if (key === 'customProviders' || key === 'rates' || key === 'authProfiles') {
+            return writeJson(res, 400, {
+              error: `use the dedicated endpoint for "${key}" — POST /providers · PUT /rates/<key> · authProfiles via CLI`,
+            });
+          }
+          let body;
+          try { body = await readJson(req); }
+          catch (e) { return writeJson(res, 400, { error: e?.message || String(e) }); }
+          const value = body && Object.prototype.hasOwnProperty.call(body, 'value') ? body.value : undefined;
+          const cfg = ctx.readConfig();
+          if (value === null || value === undefined) delete cfg[key];
+          else cfg[key] = value;
+          const v = validateConfig(cfg, PROVIDERS);
+          if (!v.ok) return writeJson(res, 422, v);
+          ctx.writeConfig(cfg);
+          const stored = key === 'api-key' && typeof cfg[key] === 'string' ? maskApiKey(cfg[key]) : cfg[key];
+          return writeJson(res, 200, { ok: true, key, value: stored });
+        }
+        case req.method === 'DELETE' && !!configKeyMatch && configKeyMatch[1] !== 'validate': {
+          // DELETE /config/<key> — same as `lazyclaw config delete`.
+          // Idempotent: 200 with `removed: false` when the key wasn't
+          // present.
+          if (typeof ctx.writeConfig !== 'function') {
+            return writeJson(res, 405, { error: 'mutation disabled' });
+          }
+          const key = configKeyMatch[1];
+          if (key === 'customProviders' || key === 'rates' || key === 'authProfiles') {
+            return writeJson(res, 400, { error: `delete via the dedicated endpoint for "${key}"` });
+          }
+          const cfg = ctx.readConfig();
+          if (!(key in cfg)) return writeJson(res, 200, { ok: true, key, removed: false });
+          delete cfg[key];
+          ctx.writeConfig(cfg);
+          return writeJson(res, 200, { ok: true, key, removed: true });
+        }
         case route === 'GET /doctor': {
           // Mirror the CLI doctor output — same field set so any tool that
           // already knows how to read CLI doctor JSON can hit this endpoint.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazyclaw",
-  "version": "3.99.14",
+  "version": "3.99.16",
   "description": "Lazy, elegant terminal CLI for chatting with Claude / OpenAI / Gemini / Ollama and orchestrating multi-step LLM workflows. Banner-on-launch, slash-command ghost autocomplete, persistent sessions, local HTTP gateway.",
   "keywords": [
     "claude",

package/providers/registry.mjs

@@ -413,15 +413,27 @@ export function parseProviderModel(s) {
  * @param {string|undefined|null} key
  * @returns {string}
  */
-// Reserved provider names — built-in providers and meta-keywords the picker
-// uses internally. Custom registrations must not collide with these.
+// Reserved provider names — names whose factory is bespoke (not the
+// generic OpenAI-compat one) so a custom registration of the same name
+// would silently break the wire format. The OpenAI-compat builtins are
+// deliberately NOT listed: a user can register `nim` / `openrouter` /
+// etc. as a custom entry to override the baseUrl / api-key / headers,
+// because both the built-in and the custom go through
+// `makeOpenAICompatProvider` — overriding is well-defined.
 const RESERVED_PROVIDER_NAMES = new Set([
   'mock', 'claude-cli', 'anthropic', 'openai', 'gemini', 'ollama',
-  // OpenAI-compatible builtins (kept in lockstep with OPENAI_COMPAT_BUILTINS).
-  ...Object.keys(OPENAI_COMPAT_BUILTINS),
   '__add_custom__', '__custom_model__', '__fetch_models__',
 ]);
 
+/**
+ * Whether the supplied name belongs to one of the OpenAI-compatible
+ * builtins. Used by the custom-add interactive flow so it can warn the
+ * user that their custom entry will shadow the built-in registration.
+ */
+export function isBuiltinOpenAICompatName(name) {
+  return Object.prototype.hasOwnProperty.call(OPENAI_COMPAT_BUILTINS, String(name || '').trim().toLowerCase());
+}
+
 /**
  * Validate a custom provider name. Allowed: lowercase alnum + dash + dot.
  * Returns the trimmed name on success; throws on collision / bad format.

package/web/dashboard.html

@@ -41,8 +41,25 @@
       align-items: center;
       gap: 14px;
     }
-    .logo { font-weight: 700; font-size: 16px; color: var(--accent); }
+    .logo { font-weight: 700; font-size: 16px; color: var(--accent); display: flex; align-items: center; gap: 10px; }
+    .logo .mascot { width: 36px; height: 32px; flex: none; }
     .ver  { color: var(--dim); font-size: 11px; }
+    /* lazyclaude pixel-mascot — copied verbatim from dist/index.html so the
+       lazyclaw web dashboard wears the same character as the larger SPA. */
+    .mascot .mj-body   { animation: mj-jump 1s ease-in-out infinite; transform-origin: center bottom; }
+    .mascot .mj-shadow { animation: mj-sh   1s ease-in-out infinite; }
+    .mascot .mj-la     { animation: mj-wl   1s ease-in-out infinite; transform-origin: right center; }
+    .mascot .mj-ra     { animation: mj-wr   1s ease-in-out infinite; transform-origin: left center; }
+    .mascot .mj-le     { animation: mj-ear  1s ease-in-out infinite; transform-origin: center bottom; }
+    .mascot .mj-re     { animation: mj-ear  1s ease-in-out infinite .1s; transform-origin: center bottom; }
+    @keyframes mj-jump { 0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); } 30% { transform: translateY(-10px) scaleY(1.1) scaleX(.95); } 50% { transform: translateY(-12px) scaleY(1.05) scaleX(.98); } 80% { transform: translateY(-3px) scaleY(.95) scaleX(1.05); } }
+    @keyframes mj-sh   { 0%, 100% { transform: scaleX(1); opacity: .25; } 50% { transform: scaleX(.4); opacity: .08; } }
+    @keyframes mj-wl   { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-25deg); } }
+    @keyframes mj-wr   { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(25deg); } }
+    @keyframes mj-ear  { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(1.2); } 60% { transform: scaleY(.85); } }
+    @media (prefers-reduced-motion: reduce) {
+      .mascot .mj-body, .mascot .mj-shadow, .mascot .mj-la, .mascot .mj-ra, .mascot .mj-le, .mascot .mj-re { animation: none; }
+    }
     nav.tabs {
       display: flex;
       gap: 2px;
@@ -221,6 +238,35 @@
     .banner.err  { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.06); }
     .banner ul { margin: 6px 0 0 18px; padding: 0; }
     .banner li { font-size: 12px; }
+    /* Modal — used by session/workflow/skill detail views, the rate-card
+       editor, and the custom-provider form. One stacking layer; only one
+       open at a time. */
+    .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
+    .modal-backdrop.open { display: flex; }
+    .modal { background: var(--card); border: 1px solid var(--border); border-radius: 10px; max-width: min(720px, 96vw); width: 100%; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
+    .modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
+    .modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
+    .modal-close { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; }
+    .modal-close:hover { color: var(--text); }
+    .modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
+    .modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
+    .clickable { cursor: pointer; }
+    .clickable:hover { background: rgba(217, 119, 87, 0.05); }
+    .turn { padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; white-space: pre-wrap; word-wrap: break-word; font-size: 13px; }
+    .turn.user      { background: rgba(217, 119, 87, 0.10); border: 1px solid rgba(217, 119, 87, 0.25); }
+    .turn.assistant { background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.18); }
+    .turn.system    { background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.20); }
+    .turn .role-tag { display: block; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+    .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+    .form-row label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .form-row input, .form-row textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; }
+    .form-row textarea { resize: vertical; min-height: 80px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
+    .row-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
+    button.btn-sm { font-size: 12px; padding: 4px 10px; }
+    button.btn-danger { background: rgba(239,68,68,0.15); color: #ffb4b4; border: 1px solid rgba(239,68,68,0.3); }
+    button.btn-danger:hover { background: rgba(239,68,68,0.25); }
+    .markdown { font-size: 13px; line-height: 1.55; }
+    .markdown pre { font-size: 12px; }
     @media (max-width: 480px) {
       main { padding: 14px; }
       .grid { grid-template-columns: 1fr; }
@@ -239,7 +285,24 @@
 </head>
 <body>
   <header>
-    <div class="logo">🦞 LazyClaw</div>
+    <div class="logo">
+      <svg class="mascot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90" aria-hidden="true">
+        <ellipse class="mj-shadow" cx="50" cy="82" rx="22" ry="5" fill="#000"/>
+        <g class="mj-body">
+          <rect class="mj-le" x="22" y="10" width="8" height="14" fill="#d97757"/>
+          <rect class="mj-re" x="70" y="10" width="8" height="14" fill="#d97757"/>
+          <rect x="18" y="24" width="64" height="4" fill="#d97757"/>
+          <rect x="14" y="28" width="72" height="32" fill="#d97757"/>
+          <rect x="30" y="34" width="8" height="10" fill="#000"/>
+          <rect x="62" y="34" width="8" height="10" fill="#000"/>
+          <rect class="mj-la" x="2"  y="36" width="12" height="8" fill="#d97757"/>
+          <rect class="mj-ra" x="86" y="36" width="12" height="8" fill="#d97757"/>
+          <rect x="24" y="60" width="12" height="14" fill="#d97757"/>
+          <rect x="64" y="60" width="12" height="14" fill="#d97757"/>
+        </g>
+      </svg>
+      <span>LazyClaw</span>
+    </div>
     <div class="ver" id="version">…</div>
   </header>
 
@@ -283,6 +346,11 @@
 
     <section id="tab-providers">
       <h2>Providers</h2>
+      <div class="toolbar">
+        <button class="btn" onclick="openAddProviderModal()">+ Add custom OpenAI-compat</button>
+        <button class="btn btn-secondary" onclick="LOADERS.providers()">Refresh</button>
+        <span class="dim" id="providers-meta"></span>
+      </div>
       <div id="providers-list"><div class="empty">Loading…</div></div>
     </section>
 
@@ -312,6 +380,7 @@
     <section id="tab-rates">
       <h2>Rates</h2>
       <div class="toolbar">
+        <button class="btn" onclick="openRateCardModal()">+ Add / edit rate card</button>
         <input type="search" id="rates-filter" placeholder="filter by provider/model">
         <button class="btn btn-secondary" onclick="LOADERS.rates()">Refresh</button>
         <span class="dim" id="rates-meta"></span>
@@ -342,6 +411,7 @@
     <section id="tab-config">
       <h2>Config</h2>
       <div class="toolbar">
+        <button class="btn" onclick="openConfigEditModal()">+ Set key</button>
         <button class="btn btn-secondary" onclick="LOADERS.config()">Refresh</button>
         <span class="dim" id="config-meta"></span>
       </div>
@@ -359,6 +429,18 @@
     <span id="footer-url"></span>
   </footer>
 
+  <!-- Shared modal — opened by openModal({title, bodyHtml, footHtml}). -->
+  <div id="modal-backdrop" class="modal-backdrop" onclick="if(event.target===this)closeModal()">
+    <div class="modal" role="dialog" aria-modal="true">
+      <div class="modal-head">
+        <h3 id="modal-title"></h3>
+        <button class="modal-close" onclick="closeModal()" aria-label="Close">×</button>
+      </div>
+      <div class="modal-body" id="modal-body"></div>
+      <div class="modal-foot" id="modal-foot"></div>
+    </div>
+  </div>
+
   <script>
     // Tab switching ────────────────────────────────────────────────
     const tabs = document.querySelectorAll('nav.tabs button');
@@ -394,6 +476,25 @@
     function escHtml(s) {
       return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
     }
+    // ── Shared modal ────────────────────────────────────────────────
+    // openModal({ title, bodyHtml, footHtml }) renders into the markup
+    // declared at the bottom of <body> and shows the backdrop. ESC and
+    // backdrop click close. Only one modal is open at a time — calling
+    // openModal while another is already open replaces its contents.
+    function openModal({ title, bodyHtml, footHtml }) {
+      document.getElementById('modal-title').textContent = title || '';
+      document.getElementById('modal-body').innerHTML = bodyHtml || '';
+      document.getElementById('modal-foot').innerHTML = footHtml || '';
+      document.getElementById('modal-backdrop').classList.add('open');
+    }
+    function closeModal() {
+      document.getElementById('modal-backdrop').classList.remove('open');
+      document.getElementById('modal-body').innerHTML = '';
+      document.getElementById('modal-foot').innerHTML = '';
+    }
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && document.getElementById('modal-backdrop').classList.contains('open')) closeModal();
+    });
     function fmtDuration(ms) {
       if (!Number.isFinite(ms) || ms < 0) return '—';
       const s = Math.floor(ms / 1000);
@@ -457,20 +558,76 @@
         root.innerHTML = '';
         arr.forEach((s) => {
           const div = document.createElement('div');
-          div.className = 'card row';
+          div.className = 'card row clickable';
           const id = s.id || s.sessionId || s.name || JSON.stringify(s);
           const turns = s.turns ?? s.turnCount ?? '';
           const updated = s.updatedAt || s.mtime || '';
-          div.innerHTML = `<div class="name">${id}</div>
+          div.innerHTML = `<div class="name">${escHtml(id)}</div>
             <div class="dim">${turns ? turns + ' turns' : ''}</div>
-            <div class="dim" style="margin-left:auto;">${updated}</div>`;
+            <div class="dim row-actions">${escHtml(updated)}</div>
+            <button class="btn btn-secondary btn-sm" data-action="view">View</button>
+            <button class="btn btn-secondary btn-sm" data-action="export">Export</button>
+            <button class="btn btn-danger btn-sm" data-action="delete">Delete</button>`;
+          div.addEventListener('click', (e) => {
+            const action = e.target.closest('button')?.dataset.action;
+            if (action === 'export') return openSessionExport(id);
+            if (action === 'delete') return deleteSession(id);
+            return openSessionDetail(id);
+          });
           root.appendChild(div);
         });
       } catch (e) {
-        root.innerHTML = `<div class="empty">⚠ ${e.message}</div>`;
+        root.innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
       }
     };
 
+    async function openSessionDetail(id) {
+      openModal({ title: `Session — ${id}`, bodyHtml: '<div class="empty">Loading…</div>' });
+      try {
+        const r = await api('/sessions/' + encodeURIComponent(id));
+        const turns = r.turns || r.entries || r;
+        if (!Array.isArray(turns) || turns.length === 0) {
+          document.getElementById('modal-body').innerHTML = '<div class="empty">Empty session.</div>';
+          return;
+        }
+        const html = turns.map((t) => {
+          const role = (t.role || 'note').toLowerCase();
+          const content = String(t.content ?? t.text ?? '');
+          const ts = t.ts || t.timestamp || '';
+          return `<div class="turn ${escHtml(role)}">
+            <span class="role-tag">${escHtml(role)}${ts ? ' · ' + escHtml(ts) : ''}</span>${escHtml(content)}
+          </div>`;
+        }).join('');
+        document.getElementById('modal-body').innerHTML = html;
+      } catch (e) {
+        document.getElementById('modal-body').innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
+      }
+    }
+
+    async function openSessionExport(id) {
+      openModal({ title: `Export — ${id}`, bodyHtml: '<div class="empty">Loading…</div>' });
+      try {
+        const r = await fetch('/sessions/' + encodeURIComponent(id) + '/export?format=md');
+        const text = await r.text();
+        document.getElementById('modal-body').innerHTML = `<pre>${escHtml(text)}</pre>`;
+        document.getElementById('modal-foot').innerHTML = `
+          <button class="btn btn-secondary" onclick="navigator.clipboard.writeText(${JSON.stringify(text)}); this.textContent='Copied!'; setTimeout(()=>this.textContent='Copy markdown',1200)">Copy markdown</button>
+          <button class="btn" onclick="closeModal()">Close</button>`;
+      } catch (e) {
+        document.getElementById('modal-body').innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
+      }
+    }
+
+    async function deleteSession(id) {
+      if (!confirm(`Delete session "${id}"?\nTurn log will be permanently removed.`)) return;
+      try {
+        await fetch('/sessions/' + encodeURIComponent(id), { method: 'DELETE' });
+        LOADERS.sessions();
+      } catch (e) {
+        alert('Delete failed: ' + e.message);
+      }
+    }
+
     LOADERS.skills = async function loadSkills() {
       const root = document.getElementById('skills-list');
       root.innerHTML = '<div class="empty">Loading…</div>';
@@ -484,25 +641,60 @@
         root.innerHTML = '';
         arr.forEach((s) => {
           const div = document.createElement('div');
-          div.className = 'card';
+          div.className = 'card clickable';
           div.innerHTML = `<div class="row" style="border:0;padding:0;">
-              <div class="name">${s.name}</div>
-              <div class="dim" style="margin-left:auto;">${(s.bytes ?? '')} bytes</div>
+              <div class="name">${escHtml(s.name)}</div>
+              <div class="dim row-actions">${(s.bytes ?? '')} bytes</div>
+              <button class="btn btn-secondary btn-sm" data-action="view">View</button>
+              <button class="btn btn-danger btn-sm" data-action="delete">Delete</button>
             </div>
-            <div class="dim" style="margin-top:6px;">${s.summary || ''}</div>`;
+            <div class="dim" style="margin-top:6px;">${escHtml(s.summary || '')}</div>`;
+          div.addEventListener('click', (e) => {
+            const action = e.target.closest('button')?.dataset.action;
+            if (action === 'delete') return deleteSkill(s.name);
+            return openSkillDetail(s.name);
+          });
           root.appendChild(div);
         });
       } catch (e) {
-        root.innerHTML = `<div class="empty">⚠ ${e.message}</div>`;
+        root.innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
       }
     };
 
+    async function openSkillDetail(name) {
+      openModal({ title: `Skill — ${name}`, bodyHtml: '<div class="empty">Loading…</div>' });
+      try {
+        // GET /skills/<name> returns the markdown body as text/markdown.
+        const r = await fetch('/skills/' + encodeURIComponent(name));
+        if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
+        const text = await r.text();
+        document.getElementById('modal-body').innerHTML = `<pre class="markdown">${escHtml(text)}</pre>`;
+        document.getElementById('modal-foot').innerHTML = `
+          <button class="btn btn-secondary" onclick="navigator.clipboard.writeText(${JSON.stringify(text)}); this.textContent='Copied!'; setTimeout(()=>this.textContent='Copy',1200)">Copy</button>
+          <button class="btn" onclick="closeModal()">Close</button>`;
+      } catch (e) {
+        document.getElementById('modal-body').innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
+      }
+    }
+
+    async function deleteSkill(name) {
+      if (!confirm(`Remove skill "${name}"?`)) return;
+      try {
+        await fetch('/skills/' + encodeURIComponent(name), { method: 'DELETE' });
+        LOADERS.skills();
+      } catch (e) {
+        alert('Delete failed: ' + e.message);
+      }
+    }
+
     LOADERS.providers = async function loadProviders() {
       const root = document.getElementById('providers-list');
+      const meta = document.getElementById('providers-meta');
       root.innerHTML = '<div class="empty">Loading…</div>';
       try {
         const r = await api('/providers');
         const arr = r.providers || r;
+        meta.textContent = `${arr.length} registered`;
         root.innerHTML = '';
         arr.forEach((p) => {
           const div = document.createElement('div');
@@ -510,20 +702,132 @@
           const tag = p.requiresApiKey
             ? '<span class="pill warn">api key</span>'
             : '<span class="pill ok">no key</span>';
+          const customTag = p.custom ? ' <span class="pill" style="background:rgba(217,119,87,0.18);color:var(--accent);">custom</span>' : '';
+          const builtinCompat = p.builtinOpenAICompat ? ' <span class="pill" style="background:rgba(74,222,128,0.12);color:var(--ok);">openai-compat</span>' : '';
           const models = (p.suggestedModels || []).slice(0, 6).join(' · ') || '<span class="dim">(default)</span>';
+          const removeBtn = p.custom
+            ? `<button class="btn btn-danger btn-sm" data-action="remove">Remove</button>`
+            : '';
           div.innerHTML = `<div class="row" style="border:0;padding:0;">
-              <div class="name">${p.name}</div>${tag}
-              <div class="dim" style="margin-left:auto;">${p.endpoint || ''}</div>
+              <div class="name">${escHtml(p.name)}</div>${tag}${customTag}${builtinCompat}
+              <div class="dim row-actions">${escHtml(p.endpoint || '')}</div>
+              <button class="btn btn-secondary btn-sm" data-action="test">Test</button>
+              ${removeBtn}
             </div>
-            <div class="dim" style="margin-top:6px;">${p.docs || ''}</div>
-            <div style="margin-top:8px;font-size:12px;">${models}</div>`;
+            <div class="dim" style="margin-top:6px;">${escHtml(p.docs || '')}</div>
+            <div style="margin-top:8px;font-size:12px;">${models}</div>
+            <div class="dim" data-test-result style="margin-top:6px;font-size:11px;"></div>`;
+          div.addEventListener('click', async (e) => {
+            const btn = e.target.closest('button');
+            if (!btn) return;
+            if (btn.dataset.action === 'test') return testProvider(p.name, div);
+            if (btn.dataset.action === 'remove') return removeProvider(p.name);
+          });
           root.appendChild(div);
         });
       } catch (e) {
-        root.innerHTML = `<div class="empty">⚠ ${e.message}</div>`;
+        root.innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
       }
     };
 
+    async function testProvider(name, cardEl) {
+      const out = cardEl.querySelector('[data-test-result]');
+      out.textContent = '⏳ probing…';
+      out.style.color = 'var(--dim)';
+      try {
+        const r = await fetch('/providers/' + encodeURIComponent(name) + '/test');
+        const body = await r.json();
+        if (body.ok) {
+          out.style.color = 'var(--ok)';
+          const reply = (body.reply || '').replace(/\s+/g, ' ').slice(0, 120);
+          out.textContent = `✓ ok · ${body.model} · ${body.durationMs}ms${reply ? ' · ' + reply : ''}`;
+        } else {
+          out.style.color = 'var(--err)';
+          out.textContent = `✗ ${body.error || 'failed'} · ${body.code || r.status}`;
+        }
+      } catch (e) {
+        out.style.color = 'var(--err)';
+        out.textContent = '✗ ' + (e.message || String(e));
+      }
+    }
+
+    async function removeProvider(name) {
+      if (!confirm(`Remove custom provider "${name}"?`)) return;
+      try {
+        const r = await fetch('/providers/' + encodeURIComponent(name), { method: 'DELETE' });
+        const body = await r.json();
+        if (!r.ok) throw new Error(body.error || `${r.status}`);
+        LOADERS.providers();
+      } catch (e) {
+        alert('Remove failed: ' + e.message);
+      }
+    }
+
+    function openAddProviderModal() {
+      openModal({
+        title: 'Add custom OpenAI-compat provider',
+        bodyHtml: `
+          <div class="dim" style="margin-bottom:14px;font-size:12px;">
+            Works with any service that speaks the OpenAI v1 wire format
+            (vLLM · LM Studio · private gateways · self-hosted DeepInfra).
+            Built-in aliases (<code>nim</code>, <code>openrouter</code>, <code>groq</code>, …)
+            can be overridden by registering a custom entry of the same name.
+          </div>
+          <div class="form-row">
+            <label for="add-prov-name">Name (short id, e.g. "nim", "openrouter")</label>
+            <input id="add-prov-name" autofocus placeholder="e.g. my-vllm" />
+          </div>
+          <div class="form-row">
+            <label for="add-prov-baseurl">Base URL (must end in /v1)</label>
+            <input id="add-prov-baseurl" placeholder="https://integrate.api.nvidia.com/v1" />
+          </div>
+          <div class="form-row">
+            <label for="add-prov-apikey">API key (blank for auth-less endpoints)</label>
+            <input id="add-prov-apikey" type="password" placeholder="nvapi-…" />
+          </div>
+          <div class="form-row">
+            <label for="add-prov-model">Default model id (optional)</label>
+            <input id="add-prov-model" placeholder="meta/llama-3.1-405b-instruct" />
+          </div>
+          <div id="add-prov-status" class="dim" style="font-size:12px;"></div>
+        `,
+        footHtml: `
+          <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+          <button class="btn" onclick="submitAddProvider()">Save</button>
+        `,
+      });
+    }
+
+    async function submitAddProvider() {
+      const name = document.getElementById('add-prov-name').value.trim();
+      const baseUrl = document.getElementById('add-prov-baseurl').value.trim();
+      const apiKey = document.getElementById('add-prov-apikey').value.trim();
+      const defaultModel = document.getElementById('add-prov-model').value.trim();
+      const status = document.getElementById('add-prov-status');
+      status.style.color = 'var(--dim)';
+      status.textContent = 'Saving…';
+      try {
+        const r = await fetch('/providers', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ name, baseUrl, apiKey: apiKey || undefined, defaultModel: defaultModel || undefined }),
+        });
+        const body = await r.json();
+        if (!r.ok) {
+          status.style.color = 'var(--err)';
+          status.textContent = '✗ ' + (body.error || `${r.status} ${r.statusText}`);
+          return;
+        }
+        status.style.color = 'var(--ok)';
+        const overrideNote = body.overridesBuiltin ? ' (overrides built-in)' : '';
+        status.textContent = `✓ saved — ${body.name} → ${body.baseUrl}${overrideNote}`;
+        setTimeout(() => { closeModal(); LOADERS.providers(); }, 700);
+      } catch (e) {
+        status.style.color = 'var(--err)';
+        status.textContent = '✗ ' + (e.message || String(e));
+      }
+    }
+
     LOADERS.status = async function loadStatus() {
       const root = document.getElementById('status-card');
       root.innerHTML = '<div class="empty">Loading…</div>';
@@ -584,23 +888,79 @@
           if (sm.resumable)   tags.push('<span class="pill warn">resumable</span>');
           if (sm.done)        tags.push('<span class="pill ok">done</span>');
           const total = sm.total ?? '';
-          return `<tr>
+          return `<tr class="clickable" data-wf-id="${escHtml(s.sessionId)}">
             <td><code>${escHtml(s.sessionId)}</code></td>
             <td>${tags.join(' ') || '<span class="dim">—</span>'}</td>
             <td class="num">${sm.done ?? 0} / ${total}</td>
             <td class="num">${sm.failed ?? 0}</td>
             <td class="dim">${escHtml(s.updatedAt || s.startedAt || '')}</td>
+            <td><button class="btn btn-danger btn-sm" data-action="wf-delete">Delete</button></td>
           </tr>`;
         }).join('');
         list.innerHTML = `<table class="tbl">
-          <thead><tr><th>Session</th><th>State</th><th>Done / Total</th><th>Failed</th><th>Updated</th></tr></thead>
+          <thead><tr><th>Session</th><th>State</th><th>Done / Total</th><th>Failed</th><th>Updated</th><th></th></tr></thead>
           <tbody>${rows}</tbody>
         </table>`;
+        list.querySelectorAll('tr[data-wf-id]').forEach((tr) => {
+          tr.addEventListener('click', (e) => {
+            const id = tr.getAttribute('data-wf-id');
+            const action = e.target.closest('button')?.dataset.action;
+            if (action === 'wf-delete') return deleteWorkflow(id);
+            return openWorkflowDetail(id);
+          });
+        });
       } catch (e) {
         list.innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
       }
     };
 
+    async function openWorkflowDetail(id) {
+      openModal({ title: `Workflow — ${id}`, bodyHtml: '<div class="empty">Loading…</div>' });
+      try {
+        const r = await api('/workflows/' + encodeURIComponent(id));
+        const sm = r.summary || {};
+        const nodes = r.state?.nodeResults || r.nodeResults || {};
+        const nodeRows = Object.entries(nodes).map(([nid, n]) => {
+          const status = (n.status || '').toLowerCase();
+          const pillClass = status === 'failed' ? 'err' : (status === 'done' ? 'ok' : (status === 'running' ? 'warn' : ''));
+          const dur = n.durationMs != null ? fmtDuration(n.durationMs) : '—';
+          const out = String(n.output ?? n.error ?? '');
+          const truncated = out.length > 240 ? out.slice(0, 240) + '…' : out;
+          return `<tr>
+            <td><code>${escHtml(nid)}</code></td>
+            <td>${pillClass ? `<span class="pill ${pillClass}">${escHtml(status)}</span>` : escHtml(status || '—')}</td>
+            <td class="num">${dur}</td>
+            <td class="dim">${escHtml(truncated)}</td>
+          </tr>`;
+        }).join('');
+        const summaryHtml = `<div class="grid" style="margin-bottom:14px;">
+            <div class="stat"><div class="label">Total</div><div class="value">${sm.total ?? '—'}</div></div>
+            <div class="stat"><div class="label">Done</div><div class="value">${sm.done ?? 0}</div></div>
+            <div class="stat"><div class="label">Failed</div><div class="value" style="color:${sm.failed ? 'var(--err)' : 'inherit'}">${sm.failed ?? 0}</div></div>
+            <div class="stat"><div class="label">Running</div><div class="value">${sm.running ?? 0}</div></div>
+          </div>`;
+        const tableHtml = nodeRows
+          ? `<table class="tbl">
+              <thead><tr><th>Node</th><th>Status</th><th>Duration</th><th>Output / Error</th></tr></thead>
+              <tbody>${nodeRows}</tbody>
+            </table>`
+          : '<div class="empty">No node results yet.</div>';
+        document.getElementById('modal-body').innerHTML = summaryHtml + tableHtml;
+      } catch (e) {
+        document.getElementById('modal-body').innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
+      }
+    }
+
+    async function deleteWorkflow(id) {
+      if (!confirm(`Delete workflow session "${id}"?\nState file will be permanently removed.`)) return;
+      try {
+        await fetch('/workflows/' + encodeURIComponent(id), { method: 'DELETE' });
+        LOADERS.workflows();
+      } catch (e) {
+        alert('Delete failed: ' + e.message);
+      }
+    }
+
     // ── Rates ────────────────────────────────────────────────────
     document.getElementById('rates-filter').addEventListener('input', debounce(() => LOADERS.rates(), 250));
 
@@ -638,24 +998,115 @@
         }
         const rows = entries.map(([key, card]) => {
           const c = card || {};
-          return `<tr>
+          return `<tr data-rate-key="${escHtml(key)}">
             <td><code>${escHtml(key)}</code></td>
             <td class="num">${c.in ?? '—'}</td>
             <td class="num">${c.out ?? '—'}</td>
             <td class="num">${c['cache-read'] ?? '—'}</td>
             <td class="num">${c['cache-create'] ?? '—'}</td>
             <td class="dim">${escHtml(c.currency || 'USD')} / 1M tok</td>
+            <td>
+              <button class="btn btn-secondary btn-sm" data-action="rate-edit">Edit</button>
+              <button class="btn btn-danger btn-sm" data-action="rate-delete">Delete</button>
+            </td>
           </tr>`;
         }).join('');
         root.innerHTML = `<table class="tbl">
-          <thead><tr><th>Provider / Model</th><th>In</th><th>Out</th><th>Cache read</th><th>Cache create</th><th>Unit</th></tr></thead>
+          <thead><tr><th>Provider / Model</th><th>In</th><th>Out</th><th>Cache read</th><th>Cache create</th><th>Unit</th><th></th></tr></thead>
           <tbody>${rows}</tbody>
         </table>`;
+        root.querySelectorAll('tr[data-rate-key]').forEach((tr) => {
+          const key = tr.getAttribute('data-rate-key');
+          const card = (rates || {})[key] || {};
+          tr.querySelector('[data-action="rate-edit"]')?.addEventListener('click', () => openRateCardModal(key, card));
+          tr.querySelector('[data-action="rate-delete"]')?.addEventListener('click', () => deleteRateCard(key));
+        });
       } catch (e) {
         root.innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
       }
     };
 
+    function openRateCardModal(existingKey = '', existingCard = {}) {
+      const c = existingCard || {};
+      openModal({
+        title: existingKey ? `Edit rate card — ${existingKey}` : 'Add rate card',
+        bodyHtml: `
+          <div class="dim" style="margin-bottom:12px;font-size:12px;">
+            Cost per 1M tokens (input / output / optional cache pricing).
+            Same shape as <code>lazyclaw rates set</code>. Saving the same
+            key overwrites the existing card.
+          </div>
+          <div class="form-row">
+            <label for="rate-key">Provider / model key</label>
+            <input id="rate-key" placeholder="anthropic/claude-opus-4-7" value="${escHtml(existingKey)}" ${existingKey ? 'readonly' : ''}/>
+          </div>
+          <div class="grid" style="grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0;">
+            <div class="form-row"><label for="rate-in">Input (USD / 1M)</label><input id="rate-in" type="number" step="0.01" value="${c.in ?? ''}"/></div>
+            <div class="form-row"><label for="rate-out">Output (USD / 1M)</label><input id="rate-out" type="number" step="0.01" value="${c.out ?? ''}"/></div>
+            <div class="form-row"><label for="rate-cache-read">Cache read (optional)</label><input id="rate-cache-read" type="number" step="0.01" value="${c['cache-read'] ?? ''}"/></div>
+            <div class="form-row"><label for="rate-cache-create">Cache create (optional)</label><input id="rate-cache-create" type="number" step="0.01" value="${c['cache-create'] ?? ''}"/></div>
+            <div class="form-row"><label for="rate-currency">Currency</label><input id="rate-currency" value="${escHtml(c.currency || 'USD')}"/></div>
+          </div>
+          <div id="rate-status" class="dim" style="font-size:12px;margin-top:8px;"></div>
+        `,
+        footHtml: `
+          <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+          <button class="btn" onclick="submitRateCard()">Save</button>
+        `,
+      });
+    }
+
+    async function submitRateCard() {
+      const key = document.getElementById('rate-key').value.trim();
+      const status = document.getElementById('rate-status');
+      if (!key) { status.style.color = 'var(--err)'; status.textContent = 'Key is required.'; return; }
+      const card = {
+        in: parseFloat(document.getElementById('rate-in').value) || 0,
+        out: parseFloat(document.getElementById('rate-out').value) || 0,
+        currency: document.getElementById('rate-currency').value.trim() || 'USD',
+      };
+      const cr = parseFloat(document.getElementById('rate-cache-read').value);
+      const cc = parseFloat(document.getElementById('rate-cache-create').value);
+      if (Number.isFinite(cr)) card['cache-read'] = cr;
+      if (Number.isFinite(cc)) card['cache-create'] = cc;
+      status.style.color = 'var(--dim)';
+      status.textContent = 'Saving…';
+      try {
+        const r = await fetch('/rates/' + encodeURIComponent(key), {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(card),
+        });
+        const body = await r.json();
+        if (!r.ok) {
+          status.style.color = 'var(--err)';
+          const issues = (body.issues || []).map(i => typeof i === 'string' ? i : JSON.stringify(i)).join('; ');
+          status.textContent = `✗ ${body.error || issues || `${r.status} ${r.statusText}`}`;
+          return;
+        }
+        status.style.color = 'var(--ok)';
+        status.textContent = `✓ saved`;
+        setTimeout(() => { closeModal(); LOADERS.rates(); }, 600);
+      } catch (e) {
+        status.style.color = 'var(--err)';
+        status.textContent = '✗ ' + (e.message || String(e));
+      }
+    }
+
+    async function deleteRateCard(key) {
+      if (!confirm(`Delete rate card "${key}"?`)) return;
+      try {
+        const r = await fetch('/rates/' + encodeURIComponent(key), { method: 'DELETE' });
+        if (!r.ok) {
+          const body = await r.json().catch(() => ({}));
+          throw new Error(body.error || `${r.status}`);
+        }
+        LOADERS.rates();
+      } catch (e) {
+        alert('Delete failed: ' + e.message);
+      }
+    }
+
     // ── Metrics ──────────────────────────────────────────────────
     LOADERS.metrics = async function loadMetrics() {
       const cards = document.getElementById('metrics-cards');
@@ -748,21 +1199,121 @@
           root.innerHTML = '<div class="empty">No config yet. Run <code>lazyclaw onboard</code>.</div>';
           return;
         }
+        const NESTED = new Set(['customProviders', 'rates', 'authProfiles', 'authActiveProfile']);
         const rows = keys.sort().map((k) => {
           const v = cfg[k];
           const display = v && typeof v === 'object' ? JSON.stringify(v) : String(v);
-          return `<tr><td><code>${escHtml(k)}</code></td><td>${escHtml(display)}</td></tr>`;
+          const nested = NESTED.has(k);
+          const editBtn = nested
+            ? `<span class="dim" style="font-size:11px;">use the dedicated tab</span>`
+            : `<button class="btn btn-secondary btn-sm" data-action="cfg-edit" data-key="${escHtml(k)}">Edit</button>
+               <button class="btn btn-danger btn-sm" data-action="cfg-delete" data-key="${escHtml(k)}">Delete</button>`;
+          return `<tr><td><code>${escHtml(k)}</code></td><td>${escHtml(display)}</td><td>${editBtn}</td></tr>`;
         }).join('');
         root.innerHTML = `<table class="tbl">
-          <thead><tr><th style="width:30%">Key</th><th>Value</th></tr></thead>
+          <thead><tr><th style="width:25%">Key</th><th>Value</th><th style="width:160px"></th></tr></thead>
           <tbody>${rows}</tbody>
         </table>`;
+        root.querySelectorAll('[data-action="cfg-edit"]').forEach((b) => {
+          b.addEventListener('click', () => openConfigEditModal(b.dataset.key, cfg[b.dataset.key]));
+        });
+        root.querySelectorAll('[data-action="cfg-delete"]').forEach((b) => {
+          b.addEventListener('click', () => deleteConfigKey(b.dataset.key));
+        });
         raw.textContent = JSON.stringify(cfg, null, 2);
       } catch (e) {
         root.innerHTML = `<div class="empty">⚠ ${escHtml(e.message)}</div>`;
       }
     };
 
+    function openConfigEditModal(existingKey = '', existingValue = '') {
+      // Stringify for the editor; objects/arrays become JSON, primitives stay
+      // raw. Submitter parses JSON when the value looks like JSON, else
+      // sends a string verbatim — same behaviour as `lazyclaw config set`.
+      let display = '';
+      if (typeof existingValue === 'string') display = existingValue;
+      else if (existingValue == null) display = '';
+      else display = JSON.stringify(existingValue, null, 2);
+      openModal({
+        title: existingKey ? `Edit config — ${existingKey}` : 'Set config key',
+        bodyHtml: `
+          <div class="dim" style="margin-bottom:12px;font-size:12px;">
+            Mirrors <code>lazyclaw config set &lt;key&gt; &lt;value&gt;</code>. Values that look like
+            JSON (start with <code>{</code> / <code>[</code> / <code>"</code> / <code>true</code> / <code>false</code> / a number)
+            are parsed; everything else is stored as a plain string. Nested
+            stores (<code>customProviders</code>, <code>rates</code>, <code>authProfiles</code>) have their own
+            tabs — this form rejects them.
+          </div>
+          <div class="form-row">
+            <label for="cfg-key">Key</label>
+            <input id="cfg-key" placeholder="provider · model · api-key · skills · …" value="${escHtml(existingKey)}" ${existingKey ? 'readonly' : ''}/>
+          </div>
+          <div class="form-row">
+            <label for="cfg-value">Value</label>
+            <textarea id="cfg-value" rows="6">${escHtml(display)}</textarea>
+          </div>
+          <div id="cfg-status" class="dim" style="font-size:12px;"></div>
+        `,
+        footHtml: `
+          <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+          <button class="btn" onclick="submitConfigEdit()">Save</button>
+        `,
+      });
+    }
+
+    async function submitConfigEdit() {
+      const key = document.getElementById('cfg-key').value.trim();
+      const raw = document.getElementById('cfg-value').value;
+      const status = document.getElementById('cfg-status');
+      if (!key) { status.style.color = 'var(--err)'; status.textContent = 'Key is required.'; return; }
+      // Heuristic JSON parse — same surface as the CLI: try parse; if it
+      // throws, send the raw string. Numbers / true / false / null / objects /
+      // arrays / quoted strings end up correctly typed.
+      let value;
+      const trimmed = raw.trim();
+      if (trimmed === '') value = '';
+      else {
+        try { value = JSON.parse(trimmed); }
+        catch { value = raw; }
+      }
+      status.style.color = 'var(--dim)';
+      status.textContent = 'Saving…';
+      try {
+        const r = await fetch('/config/' + encodeURIComponent(key), {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ value }),
+        });
+        const body = await r.json();
+        if (!r.ok) {
+          status.style.color = 'var(--err)';
+          const issues = (body.issues || []).map(i => typeof i === 'string' ? i : JSON.stringify(i)).join('; ');
+          status.textContent = `✗ ${body.error || issues || `${r.status} ${r.statusText}`}`;
+          return;
+        }
+        status.style.color = 'var(--ok)';
+        status.textContent = '✓ saved';
+        setTimeout(() => { closeModal(); LOADERS.config(); }, 600);
+      } catch (e) {
+        status.style.color = 'var(--err)';
+        status.textContent = '✗ ' + (e.message || String(e));
+      }
+    }
+
+    async function deleteConfigKey(key) {
+      if (!confirm(`Delete config key "${key}"?`)) return;
+      try {
+        const r = await fetch('/config/' + encodeURIComponent(key), { method: 'DELETE' });
+        if (!r.ok) {
+          const body = await r.json().catch(() => ({}));
+          throw new Error(body.error || `${r.status}`);
+        }
+        LOADERS.config();
+      } catch (e) {
+        alert('Delete failed: ' + e.message);
+      }
+    }
+
     // First load = chat tab.
     LOADERS.chat();