aipeek 0.1.0

package/README.md

@@ -0,0 +1,48 @@
+# aipeek
+
+Gives AI a peek into your running browser app. Captures UI tree (React fiber), console logs, network requests, errors, and store state — served as plain text via Vite dev server.
+
+## Install
+
+```bash
+npm i aipeek
+```
+
+## Setup
+
+```ts
+// vite.config.ts
+import { aipeekPlugin } from 'aipeek'
+
+export default defineConfig({
+  plugins: [aipeekPlugin()],
+})
+```
+
+## API Endpoints
+
+All endpoints are available on your Vite dev server:
+
+| Endpoint | Description |
+|----------|-------------|
+| `GET /__aipeek` | Summary of all sections (UI, console, network, errors, state) |
+| `GET /__aipeek/{section}` | Detail for a section (`ui`, `console`, `network`, `errors`, `state`) |
+| `GET /__aipeek/{section}/{index}` | Detail for a specific item in a section |
+| `GET /__aipeek/{section}?full` | Full detail (no truncation) |
+
+## CLI
+
+```bash
+npx aipeek                  # fetch from localhost:5195
+npx aipeek --port=3000      # custom port
+```
+
+## Store Registration (optional)
+
+Register MobX/other stores for state inspection:
+
+```ts
+window.__AIPEEK_STORES__ = { myStore, anotherStore }
+```
+
+State is snapshotted on demand (depth-limited, bounded) and included in the `<state>` section.

package/dist/chunk-4W6WRO3S.cjs

@@ -0,0 +1,529 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/plugin.ts
+var _path = require('path');
+var _url = require('url');
+
+// src/compact.ts
+var SLOW_THRESHOLD = 1e3;
+var MAX_UI_DEPTH = 6;
+var UI_PRIMITIVES = /* @__PURE__ */ new Set([
+  "Button",
+  "Input",
+  "Label",
+  "Badge",
+  "Checkbox",
+  "Skeleton",
+  "Spinner",
+  "Switch",
+  "Tabs",
+  "Tooltip",
+  "Popover",
+  "Dialog",
+  "Select",
+  "Card",
+  "Table",
+  "Slider",
+  "Progress",
+  "RadioGroup",
+  "HoverCard",
+  "DropdownMenu",
+  "ContextMenu",
+  "Command",
+  "Form",
+  "Alert",
+  "Pagination",
+  "Textarea",
+  "TooltipProvider",
+  "DialogPortal",
+  "Router",
+  "RenderErrorBoundary",
+  "RouterProvider",
+  "RouterProvider2",
+  "PanelGroup",
+  "Panel"
+]);
+function compactUI(tree) {
+  if (!tree) return "";
+  const lines = tree.split("\n");
+  const result = [];
+  const repeatTracker = /* @__PURE__ */ new Map();
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trimStart();
+    if (!trimmed) continue;
+    const indent = line.length - trimmed.length;
+    const depth = Math.floor(indent / 2);
+    if (depth > MAX_UI_DEPTH) continue;
+    const componentName = trimmed.split(/[\s\[—]/)[0];
+    if (UI_PRIMITIVES.has(componentName)) continue;
+    const key = `${depth}:${componentName}`;
+    const tracker = repeatTracker.get(key);
+    if (tracker && i - tracker.lastIndex <= 2) {
+      tracker.count++;
+      tracker.lastIndex = i;
+      continue;
+    }
+    for (const [k, t] of repeatTracker) {
+      if (t.count > 1) {
+        const d = parseInt(k.split(":")[0]);
+        const name = k.split(":").slice(1).join(":");
+        result.push(`${"  ".repeat(d)}${name} \xD7${t.count}`);
+      }
+      if (t.count > 1 || i - t.lastIndex > 2) {
+        repeatTracker.delete(k);
+      }
+    }
+    repeatTracker.set(key, { count: 1, lastIndex: i });
+    result.push(line);
+  }
+  for (const [k, t] of repeatTracker) {
+    if (t.count > 1) {
+      const d = parseInt(k.split(":")[0]);
+      const name = k.split(":").slice(1).join(":");
+      result.push(`${"  ".repeat(d)}${name} \xD7${t.count}`);
+    }
+  }
+  return result.join("\n");
+}
+var NOISE_PATTERNS = [
+  /\[HMR\]/i,
+  /\[vite\]/i,
+  /hot module/i,
+  /react-devtools/i,
+  /download the react devtools/i,
+  /warning: react does not recognize/i,
+  /source map/i,
+  /favicon\.ico/,
+  /webpack/i,
+  /\[webpack\]/i
+];
+function compactConsole(logs) {
+  if (!logs.length) return "";
+  const filtered = logs.filter((l) => !NOISE_PATTERNS.some((p) => p.test(l.text)));
+  if (!filtered.length) return "";
+  const deduped = [];
+  for (const log of filtered) {
+    const last = deduped[deduped.length - 1];
+    if (last && last.entry.text === log.text && last.entry.level === log.level) {
+      last.count++;
+    } else {
+      deduped.push({ entry: log, count: 1 });
+    }
+  }
+  const errors = deduped.filter((d) => d.entry.level === "error");
+  const warns = deduped.filter((d) => d.entry.level === "warn");
+  const rest = deduped.filter((d) => d.entry.level !== "error" && d.entry.level !== "warn");
+  const recentRest = rest.slice(-10);
+  const lines = [];
+  for (const group of [...errors, ...warns, ...recentRest]) {
+    const prefix = `[${group.entry.level}]`;
+    const count = group.count > 1 ? ` \xD7${group.count}` : "";
+    const source = group.entry.source ? ` (${group.entry.source})` : "";
+    const text = truncate(group.entry.text, 200);
+    lines.push(`${prefix}${count} ${text}${source}`);
+  }
+  return lines.join("\n");
+}
+function compactNetwork(requests) {
+  if (!requests.length) return "";
+  const relevant = requests.filter(
+    (r) => r.resourceType === "fetch" || r.resourceType === "xhr" || r.resourceType === "websocket" || isApiUrl(r.url)
+  );
+  if (!relevant.length) return "";
+  const lines = [];
+  for (const req of relevant) {
+    const duration = req.duration > 0 ? ` ${formatDuration(req.duration)}` : "";
+    const slow = req.duration >= SLOW_THRESHOLD ? " [SLOW]" : "";
+    const url = compactUrl(req.url);
+    if (req.failed || req.status >= 400) {
+      const body = req.responseBody ? ` "${truncate(req.responseBody, 100)}"` : "";
+      const failure = req.failureText ? ` (${req.failureText})` : "";
+      lines.push(`${req.method} ${url} ${req.status}${failure}${body}${duration}${slow}`);
+    } else {
+      lines.push(`${req.method} ${url} ${req.status}${duration}${slow}`);
+    }
+  }
+  return lines.join("\n");
+}
+function isApiUrl(url) {
+  try {
+    const u = new URL(url);
+    return u.pathname.startsWith("/api") || u.pathname.includes("/graphql");
+  } catch (e) {
+    return false;
+  }
+}
+function compactUrl(url) {
+  try {
+    const u = new URL(url);
+    const path = u.pathname + (u.search ? "?" + truncate(u.search.slice(1), 50) : "");
+    return path;
+  } catch (e2) {
+    return truncate(url, 80);
+  }
+}
+function formatDuration(ms) {
+  return ms >= 1e3 ? `${(ms / 1e3).toFixed(1)}s` : `${Math.round(ms)}ms`;
+}
+function compactErrors(errors) {
+  if (!errors.length) return "";
+  const seen = /* @__PURE__ */ new Map();
+  for (const err of errors) {
+    if (!seen.has(err.message)) {
+      seen.set(err.message, err);
+    }
+  }
+  const lines = [];
+  for (const err of seen.values()) {
+    lines.push(err.message);
+    if (err.stack) {
+      const frames = filterStack(err.stack);
+      for (const frame of frames) {
+        lines.push(`  at ${frame}`);
+      }
+    }
+  }
+  return lines.join("\n");
+}
+function filterStack(stack) {
+  return stack.split("\n").map((l) => l.trim()).filter((l) => l.startsWith("at ")).map((l) => l.slice(3)).filter((l) => !l.includes("node_modules") && !l.includes("<anonymous>")).slice(0, 5);
+}
+function compactState(state) {
+  if (!state || !Object.keys(state).length) return "";
+  const lines = [];
+  for (const [name, value] of Object.entries(state)) {
+    lines.push(`${name}:`);
+    if (typeof value === "object" && value !== null) {
+      for (const [k, v] of Object.entries(value)) {
+        lines.push(`  ${k}: ${formatValue(v)}`);
+      }
+    } else {
+      lines.push(`  ${String(value)}`);
+    }
+  }
+  return lines.join("\n");
+}
+function formatValue(v) {
+  if (v === null || v === void 0) return String(v);
+  if (typeof v === "string") return v;
+  if (typeof v === "number" || typeof v === "boolean") return String(v);
+  if (typeof v === "object") {
+    const s = JSON.stringify(v);
+    return s.length > 120 ? s.slice(0, 120) + "\u2026" : s;
+  }
+  return String(v);
+}
+function compact(raw) {
+  return {
+    url: raw.url,
+    ui: compactUI(raw.ui),
+    console: compactConsole(raw.console),
+    network: compactNetwork(raw.network),
+    errors: compactErrors(raw.errors),
+    state: compactState(raw.state),
+    timestamp: raw.timestamp,
+    counts: {
+      console: raw.console.length,
+      network: raw.network.length,
+      errors: raw.errors.length,
+      state: Object.keys(raw.state).length
+    }
+  };
+}
+function truncate(s, max) {
+  return s.length > max ? s.slice(0, max) + "\u2026" : s;
+}
+
+// src/emit.ts
+var SECTIONS = ["ui", "console", "network", "errors", "state"];
+var COUNTED_SECTIONS = {
+  console: "console",
+  network: "network",
+  errors: "errors",
+  state: "state"
+};
+function emit(state) {
+  const sections = [];
+  for (const key of SECTIONS) {
+    if (state[key]) {
+      const countKey = COUNTED_SECTIONS[key];
+      const count = countKey ? _nullishCoalesce(_optionalChain([state, 'access', _ => _.counts, 'optionalAccess', _2 => _2[countKey]]), () => ( 0)) : 0;
+      const attr = count ? ` count="${count}"` : "";
+      sections.push(`<${key}${attr}>
+${state[key]}
+</${key}>`);
+    }
+  }
+  if (!sections.length) {
+    sections.push("<empty/>");
+  }
+  return `<aipeek url="${state.url}">
+
+${sections.join("\n\n")}
+
+</aipeek>
+
+detail: GET /__aipeek/{ui|console|network|errors|state}/{index}`;
+}
+
+// src/detail.ts
+async function detail(raw, section, index, full) {
+  switch (section) {
+    case "ui":
+      return full ? raw.ui || null : compactUI(raw.ui) || null;
+    case "console":
+      return detailConsole(raw.console, index, full);
+    case "network":
+      return detailNetwork(raw.network, index, full);
+    case "errors":
+      return detailError(raw.errors, index, full);
+    case "state":
+      return detailState(raw.state, index, full);
+    default:
+      return null;
+  }
+}
+function detailConsole(logs, index, full) {
+  const i = parseInt(_nullishCoalesce(index, () => ( "")));
+  if (isNaN(i) || i < 0 || i >= logs.length) return null;
+  const log = logs[i];
+  if (full) {
+    const parts = [`[${log.level}] ${log.text}`];
+    if (log.timestamp) parts.push(`timestamp: ${new Date(log.timestamp).toISOString()}`);
+    if (log.source) parts.push(`source: ${log.source}`);
+    return parts.join("\n");
+  }
+  return `[${log.level}] ${truncate2(log.text, 200)}`;
+}
+async function detailNetwork(requests, index, full) {
+  const i = parseInt(_nullishCoalesce(index, () => ( "")));
+  if (isNaN(i) || i < 0 || i >= requests.length) return null;
+  const req = requests[i];
+  const lines = [
+    `${req.method} ${req.url}`,
+    `status: ${req.status}`,
+    `duration: ${req.duration}ms`,
+    `type: ${req.resourceType}`
+  ];
+  if (req.failed) lines.push(`failed: ${req.failureText || "true"}`);
+  if (full) {
+    if (req.requestHeaders && Object.keys(req.requestHeaders).length) {
+      lines.push("request-headers:");
+      for (const [k, v] of Object.entries(req.requestHeaders)) lines.push(`  ${k}: ${v}`);
+    }
+    if (req.requestBody) lines.push(`request-body:
+${req.requestBody}`);
+    if (req.responseHeaders && Object.keys(req.responseHeaders).length) {
+      lines.push("response-headers:");
+      for (const [k, v] of Object.entries(req.responseHeaders)) lines.push(`  ${k}: ${v}`);
+    }
+    if (req.responseBody) lines.push(`response-body:
+${req.responseBody}`);
+  } else {
+    if (req.requestBody) {
+      lines.push(`request-body: ${byteSize(req.requestBody)}`);
+      if (req.requestSample) {
+        const ts = await quickTypeOrFallback(req.requestSample, "RequestBody");
+        if (ts) lines.push(ts);
+      }
+    }
+    if (req.responseBody) {
+      if (req.status >= 400) {
+        lines.push(`response-body: ${byteSize(req.responseBody)} "${truncate2(req.responseBody, 100)}"`);
+      } else {
+        if (req.responseSample) {
+          const ts = await quickTypeOrFallback(req.responseSample, "ResponseBody");
+          lines.push(`response-body: ${byteSize(req.responseBody)}`);
+          if (ts) lines.push(ts);
+        } else {
+          lines.push(`response-body: ${byteSize(req.responseBody)} ${truncate2(req.responseBody, 100)}`);
+        }
+      }
+    }
+  }
+  return lines.join("\n");
+}
+async function quickTypeOrFallback(sample, typeName) {
+  try {
+    const { InputData, jsonInputForTargetLanguage, quicktype } = await Promise.resolve().then(() => _interopRequireWildcard(require("quicktype-core")));
+    const jsonInput = jsonInputForTargetLanguage("typescript");
+    await jsonInput.addSource({ name: typeName, samples: [sample] });
+    const inputData = new InputData();
+    inputData.addInput(jsonInput);
+    const { lines } = await quicktype({
+      inputData,
+      lang: "typescript",
+      rendererOptions: { "just-types": "true", "acronym-style": "original" }
+    });
+    return lines.join("\n");
+  } catch (e3) {
+    return jsonSchema(sample);
+  }
+}
+function detailError(errors, index, full) {
+  const i = parseInt(_nullishCoalesce(index, () => ( "")));
+  if (isNaN(i) || i < 0 || i >= errors.length) return null;
+  const err = errors[i];
+  if (full) {
+    const lines2 = [err.message];
+    if (err.stack) lines2.push(err.stack);
+    if (err.source) lines2.push(`source: ${err.source}`);
+    if (err.line != null) lines2.push(`location: ${err.source || ""}:${err.line}:${_nullishCoalesce(err.column, () => ( 0))}`);
+    return lines2.join("\n");
+  }
+  const lines = [err.message];
+  if (err.stack) {
+    const appFrames = err.stack.split("\n").map((l) => l.trim()).filter((l) => l.startsWith("at ") && !l.includes("node_modules")).slice(0, 3);
+    if (appFrames.length) lines.push(...appFrames);
+    const totalApp = err.stack.split("\n").filter((l) => l.trim().startsWith("at ") && !l.includes("node_modules")).length;
+    if (totalApp > 3) lines.push(`  ... ${totalApp - 3} more app frames`);
+  }
+  if (err.line != null) lines.push(`location: ${err.source || ""}:${err.line}:${_nullishCoalesce(err.column, () => ( 0))}`);
+  return lines.join("\n");
+}
+function detailState(state, name, full) {
+  if (!name || !(name in state)) return null;
+  const value = state[name];
+  if (full) {
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch (e4) {
+      return String(value);
+    }
+  }
+  if (typeof value !== "object" || value === null) return `${name}: ${typeof value}`;
+  const lines = [];
+  for (const [k, v] of Object.entries(value)) {
+    lines.push(`${k}: ${formatSummaryValue(v)}`);
+  }
+  return lines.join("\n");
+}
+function formatSummaryValue(v) {
+  if (v === null || v === void 0) return String(v);
+  if (typeof v === "string") {
+    if (/^Array\(\d+\)$/.test(v)) return v;
+    return v.length > 80 ? v.slice(0, 80) + "\u2026" : v;
+  }
+  if (typeof v === "number" || typeof v === "boolean") return String(v);
+  if (typeof v === "object") {
+    const s = JSON.stringify(v);
+    return s.length > 80 ? s.slice(0, 80) + "\u2026" : s;
+  }
+  return String(v);
+}
+function jsonSchema(sample) {
+  try {
+    return schemaOf(JSON.parse(sample), 0);
+  } catch (e5) {
+    return null;
+  }
+}
+function schemaOf(v, d) {
+  if (v === null) return "null";
+  if (typeof v === "string") return "string";
+  if (typeof v === "number") return "number";
+  if (typeof v === "boolean") return "boolean";
+  if (Array.isArray(v)) {
+    if (!v.length) return "[]";
+    if (d >= 3) return "[\u2026]";
+    return `${schemaOf(v[0], d + 1)}[]`;
+  }
+  if (typeof v === "object") {
+    if (d >= 3) return "{\u2026}";
+    const entries = Object.entries(v);
+    if (!entries.length) return "{}";
+    const max = d === 0 ? 12 : 6;
+    const fields = entries.slice(0, max).map(([k, val]) => `${k}: ${schemaOf(val, d + 1)}`);
+    if (entries.length > max) fields.push(`\u2026 ${entries.length - max} more`);
+    return `{ ${fields.join(", ")} }`;
+  }
+  return typeof v;
+}
+function truncate2(s, max) {
+  return s.length > max ? s.slice(0, max) + "\u2026" : s;
+}
+function byteSize(s) {
+  const bytes = new TextEncoder().encode(s).length;
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+
+// src/plugin.ts
+var __dirname = _path.dirname.call(void 0, _url.fileURLToPath.call(void 0, import.meta.url));
+var clientPath = _path.resolve.call(void 0, __dirname, "client.ts");
+function aipeekPlugin() {
+  let pendingResolve = null;
+  let server;
+  let lastRaw = null;
+  function collectFromClient() {
+    return new Promise((resolve2, reject) => {
+      pendingResolve = resolve2;
+      setTimeout(() => {
+        pendingResolve = null;
+        reject(new Error("timeout: no client response within 3s"));
+      }, 3e3);
+      server.hot.send("aipeek:collect", {});
+    });
+  }
+  return {
+    name: "aipeek",
+    apply: "serve",
+    transformIndexHtml() {
+      return [{
+        tag: "script",
+        attrs: { type: "module" },
+        children: `import '/@fs/${clientPath}'`,
+        injectTo: "body"
+      }];
+    },
+    configureServer(_server) {
+      server = _server;
+      server.hot.on("aipeek:state", (data) => {
+        if (pendingResolve) {
+          pendingResolve(data);
+          pendingResolve = null;
+        }
+      });
+      server.middlewares.use("/__aipeek", async (req, res) => {
+        const url = new URL(req.url || "/", "http://localhost");
+        const parts = url.pathname.split("/").filter(Boolean);
+        const full = url.searchParams.has("full");
+        try {
+          if (parts.length >= 1) {
+            if (!lastRaw) lastRaw = await collectFromClient();
+            const result = await detail(lastRaw, parts[0], parts[1], full);
+            if (result !== null) {
+              res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
+              res.end(result);
+              return;
+            }
+            res.writeHead(404, { "Content-Type": "text/plain" });
+            res.end(`not found: ${parts.join("/")}`);
+            return;
+          }
+          const raw = await collectFromClient();
+          lastRaw = raw;
+          const compacted = compact(raw);
+          const output = emit(compacted);
+          res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
+          res.end(output);
+        } catch (err) {
+          res.writeHead(504, { "Content-Type": "text/plain" });
+          res.end(err instanceof Error ? err.message : "unknown error");
+        }
+      });
+    }
+  };
+}
+
+
+
+
+
+
+
+
+
+
+
+exports.compactUI = compactUI; exports.compactConsole = compactConsole; exports.compactNetwork = compactNetwork; exports.compactErrors = compactErrors; exports.compactState = compactState; exports.compact = compact; exports.emit = emit; exports.detail = detail; exports.aipeekPlugin = aipeekPlugin;