@useago/sdk 0.3.0 → 0.3.2

package/dist/devtools.cjs

@@ -0,0 +1,182 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/devtools/initDevPanel.ts
+var stateEl;
+var logEl;
+var getStateFn = () => ({});
+function renderState() {
+	if (!stateEl) return;
+	stateEl.textContent = JSON.stringify(getStateFn(), null, 2);
+}
+function logLine(text, kind) {
+	if (!logEl) return;
+	const line = document.createElement("div");
+	line.className = `dev-log-line dev-log-${kind}`;
+	line.textContent = `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}  ${text}`;
+	logEl.appendChild(line);
+	logEl.scrollTop = logEl.scrollHeight;
+}
+var COLLAPSE_KEY = "devPanelCollapsed";
+function setCollapsed(panel, collapsed) {
+	panel.classList.toggle("collapsed", collapsed);
+	const toggle = panel.querySelector(".dev-toggle");
+	if (toggle) {
+		toggle.textContent = collapsed ? "▢" : "—";
+		toggle.title = collapsed ? "Expand dev tools" : "Collapse dev tools";
+		toggle.setAttribute("aria-expanded", String(!collapsed));
+	}
+	try {
+		localStorage.setItem(COLLAPSE_KEY, collapsed ? "1" : "0");
+	} catch {}
+}
+function initDevPanel(options) {
+	const { store, client, target } = options;
+	getStateFn = store.get;
+	injectStyles();
+	const host = typeof target === "string" ? document.querySelector(target) : target instanceof Element ? target : document.body;
+	const panel = document.createElement("aside");
+	panel.id = "dev-panel";
+	(host ?? document.body).appendChild(panel);
+	panel.innerHTML = `
+    <div class="dev-head">
+      <span class="dev-badge">DEV</span>
+      <span class="dev-title">DEV TOOLS · client-side function state — not for production</span>
+      <button type="button" class="dev-toggle" aria-label="Toggle dev tools">—</button>
+    </div>
+    <div class="dev-body">
+      <div class="dev-fns">Registered functions: <code>${(client.getRegisteredFunctions?.() ?? []).map((f) => f.name).join(", ") || "—"}</code></div>
+      <div class="dev-section-label">JSON object (built by the agent)</div>
+      <pre class="dev-state" id="dev-state"></pre>
+      <div class="dev-section-label">Function calls</div>
+      <div class="dev-log" id="dev-log"></div>
+    </div>
+  `;
+	stateEl = panel.querySelector("#dev-state");
+	logEl = panel.querySelector("#dev-log");
+	panel.querySelector(".dev-toggle")?.addEventListener("click", (e) => {
+		e.stopPropagation();
+		setCollapsed(panel, !panel.classList.contains("collapsed"));
+	});
+	panel.addEventListener("click", () => {
+		if (panel.classList.contains("collapsed")) setCollapsed(panel, false);
+	});
+	let startCollapsed = false;
+	try {
+		startCollapsed = localStorage.getItem(COLLAPSE_KEY) === "1";
+	} catch {}
+	setCollapsed(panel, startCollapsed);
+	client.on("function:invoke", ({ functionName, arguments: args }) => {
+		logLine(`→ ${functionName}(${JSON.stringify(args ?? {})})`, "invoke");
+	});
+	client.on("function:result", ({ result, error }) => {
+		logLine(error ? `✗ error: ${error}` : `← ${JSON.stringify(result)}`, error ? "error" : "result");
+	});
+	store.subscribe(renderState);
+	renderState();
+}
+var STYLE_ID = "dev-panel-styles";
+function injectStyles() {
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = PANEL_CSS;
+	document.head.appendChild(style);
+}
+var PANEL_CSS = `
+#dev-panel {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: min(360px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  box-sizing: border-box;
+  max-height: calc(100vh - 32px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #0f1419;
+  color: #d7e0e8;
+  border: 1px solid #2a3441;
+  border-radius: 12px;
+  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  z-index: 1000;
+}
+#dev-panel .dev-head { display: flex; align-items: center; gap: 8px; }
+#dev-panel .dev-toggle {
+  margin-left: auto;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: #7c8a99;
+  border: 1px solid #2a3441;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+#dev-panel .dev-toggle:hover { color: #d7e0e8; border-color: #3a4655; }
+#dev-panel .dev-body { display: flex; flex-direction: column; gap: 8px; }
+
+/* Collapsed: shrink to a small clickable widget showing only the DEV badge. */
+#dev-panel.collapsed {
+  width: auto;
+  cursor: pointer;
+  padding: 8px 10px;
+}
+#dev-panel.collapsed .dev-title,
+#dev-panel.collapsed .dev-body { display: none; }
+#dev-panel.collapsed .dev-toggle { margin-left: 6px; }
+#dev-panel .dev-badge {
+  background: #f59e0b;
+  color: #1c1206;
+  font-weight: 700;
+  font-size: 10px;
+  letter-spacing: .08em;
+  padding: 2px 6px;
+  border-radius: 5px;
+}
+#dev-panel .dev-title { color: #f59e0b; font-size: 11px; line-height: 1.3; }
+#dev-panel .dev-fns { color: #7c8a99; font-size: 11px; }
+#dev-panel .dev-fns code { color: #9ecbff; }
+#dev-panel .dev-section-label {
+  color: #7c8a99;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  font-size: 10px;
+  margin-top: 4px;
+}
+#dev-panel .dev-state {
+  margin: 0;
+  padding: 8px;
+  background: #060a0e;
+  border-radius: 8px;
+  overflow: auto;
+  max-height: 40vh;
+  white-space: pre;
+  color: #c8e6c9;
+}
+#dev-panel .dev-log {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  max-height: 24vh;
+  background: #060a0e;
+  border-radius: 8px;
+  padding: 6px 8px;
+}
+#dev-panel .dev-log-line { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
+#dev-panel .dev-log-invoke { color: #9ecbff; }
+#dev-panel .dev-log-result { color: #86efac; }
+#dev-panel .dev-log-error { color: #fca5a5; }
+`;
+//#endregion
+exports.initDevPanel = initDevPanel;
+
+//# sourceMappingURL=devtools.cjs.map

package/dist/devtools.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.cjs","names":[],"sources":["../src/devtools/initDevPanel.ts"],"sourcesContent":["import type { AgoClient } from \"../client/AgoClient\";\nimport type { Store } from \"../state/createStore\";\n\n/** Options for {@link initDevPanel}. */\nexport interface DevPanelOptions {\n  /** The store whose state the panel renders live. */\n  store: Store<unknown>;\n  /**\n   * Client to read registered functions from and listen to function events on.\n   * Typed structurally so a mock client works too.\n   */\n  client: Pick<AgoClient, \"on\" | \"getRegisteredFunctions\">;\n  /** Where to mount: a CSS selector, an Element, or `document.body` (default). */\n  target?: string | Element;\n}\n\nlet stateEl: HTMLElement | null;\nlet logEl: HTMLElement | null;\nlet getStateFn: () => unknown = () => ({});\n\n// Re-render the JSON object. Wired to the store's subscribe() in initDevPanel.\nfunction renderState(): void {\n  if (!stateEl) return;\n  stateEl.textContent = JSON.stringify(getStateFn(), null, 2);\n}\n\nfunction logLine(text: string, kind: \"invoke\" | \"result\" | \"error\"): void {\n  if (!logEl) return;\n  const line = document.createElement(\"div\");\n  line.className = `dev-log-line dev-log-${kind}`;\n  const time = new Date().toLocaleTimeString();\n  line.textContent = `${time}  ${text}`;\n  logEl.appendChild(line);\n  logEl.scrollTop = logEl.scrollHeight;\n}\n\nconst COLLAPSE_KEY = \"devPanelCollapsed\";\n\nfunction setCollapsed(panel: HTMLElement, collapsed: boolean): void {\n  panel.classList.toggle(\"collapsed\", collapsed);\n  const toggle = panel.querySelector<HTMLButtonElement>(\".dev-toggle\");\n  if (toggle) {\n    toggle.textContent = collapsed ? \"▢\" : \"—\";\n    toggle.title = collapsed ? \"Expand dev tools\" : \"Collapse dev tools\";\n    toggle.setAttribute(\"aria-expanded\", String(!collapsed));\n  }\n  try {\n    localStorage.setItem(COLLAPSE_KEY, collapsed ? \"1\" : \"0\");\n  } catch {\n    // localStorage may be unavailable; collapse state just won't persist.\n  }\n}\n\nexport function initDevPanel(options: DevPanelOptions): void {\n  const { store, client, target } = options;\n  getStateFn = store.get;\n  injectStyles();\n  const host =\n    typeof target === \"string\"\n      ? document.querySelector(target)\n      : target instanceof Element\n        ? target\n        : document.body;\n  const panel = document.createElement(\"aside\");\n  panel.id = \"dev-panel\";\n  (host ?? document.body).appendChild(panel);\n\n  const registered = client.getRegisteredFunctions?.() ?? [];\n  const fnNames = registered.map((f) => f.name).join(\", \") || \"—\";\n\n  panel.innerHTML = `\n    <div class=\"dev-head\">\n      <span class=\"dev-badge\">DEV</span>\n      <span class=\"dev-title\">DEV TOOLS · client-side function state — not for production</span>\n      <button type=\"button\" class=\"dev-toggle\" aria-label=\"Toggle dev tools\">—</button>\n    </div>\n    <div class=\"dev-body\">\n      <div class=\"dev-fns\">Registered functions: <code>${fnNames}</code></div>\n      <div class=\"dev-section-label\">JSON object (built by the agent)</div>\n      <pre class=\"dev-state\" id=\"dev-state\"></pre>\n      <div class=\"dev-section-label\">Function calls</div>\n      <div class=\"dev-log\" id=\"dev-log\"></div>\n    </div>\n  `;\n\n  stateEl = panel.querySelector<HTMLElement>(\"#dev-state\");\n  logEl = panel.querySelector<HTMLElement>(\"#dev-log\");\n\n  const toggle = panel.querySelector<HTMLButtonElement>(\".dev-toggle\");\n  toggle?.addEventListener(\"click\", (e) => {\n    e.stopPropagation();\n    setCollapsed(panel, !panel.classList.contains(\"collapsed\"));\n  });\n  // When collapsed, the whole widget acts as an expand button.\n  panel.addEventListener(\"click\", () => {\n    if (panel.classList.contains(\"collapsed\")) setCollapsed(panel, false);\n  });\n\n  let startCollapsed = false;\n  try {\n    startCollapsed = localStorage.getItem(COLLAPSE_KEY) === \"1\";\n  } catch {\n    // ignore\n  }\n  setCollapsed(panel, startCollapsed);\n\n  client.on(\"function:invoke\", ({ functionName, arguments: args }) => {\n    logLine(`→ ${functionName}(${JSON.stringify(args ?? {})})`, \"invoke\");\n  });\n  client.on(\"function:result\", ({ result, error }) => {\n    logLine(\n      error ? `✗ error: ${error}` : `← ${JSON.stringify(result)}`,\n      error ? \"error\" : \"result\",\n    );\n  });\n\n  // Re-render the JSON object on every state change, then paint the initial state.\n  store.subscribe(renderState);\n  renderState();\n}\n\nconst STYLE_ID = \"dev-panel-styles\";\n\nfunction injectStyles(): void {\n  if (document.getElementById(STYLE_ID)) return;\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent = PANEL_CSS;\n  document.head.appendChild(style);\n}\n\nconst PANEL_CSS = `\n#dev-panel {\n  position: fixed;\n  top: 16px;\n  right: 16px;\n  width: min(360px, calc(100vw - 32px));\n  max-width: calc(100vw - 32px);\n  box-sizing: border-box;\n  max-height: calc(100vh - 32px);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px 14px;\n  background: #0f1419;\n  color: #d7e0e8;\n  border: 1px solid #2a3441;\n  border-radius: 12px;\n  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  z-index: 1000;\n}\n#dev-panel .dev-head { display: flex; align-items: center; gap: 8px; }\n#dev-panel .dev-toggle {\n  margin-left: auto;\n  flex: none;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: #7c8a99;\n  border: 1px solid #2a3441;\n  border-radius: 6px;\n  font-size: 12px;\n  line-height: 1;\n  cursor: pointer;\n}\n#dev-panel .dev-toggle:hover { color: #d7e0e8; border-color: #3a4655; }\n#dev-panel .dev-body { display: flex; flex-direction: column; gap: 8px; }\n\n/* Collapsed: shrink to a small clickable widget showing only the DEV badge. */\n#dev-panel.collapsed {\n  width: auto;\n  cursor: pointer;\n  padding: 8px 10px;\n}\n#dev-panel.collapsed .dev-title,\n#dev-panel.collapsed .dev-body { display: none; }\n#dev-panel.collapsed .dev-toggle { margin-left: 6px; }\n#dev-panel .dev-badge {\n  background: #f59e0b;\n  color: #1c1206;\n  font-weight: 700;\n  font-size: 10px;\n  letter-spacing: .08em;\n  padding: 2px 6px;\n  border-radius: 5px;\n}\n#dev-panel .dev-title { color: #f59e0b; font-size: 11px; line-height: 1.3; }\n#dev-panel .dev-fns { color: #7c8a99; font-size: 11px; }\n#dev-panel .dev-fns code { color: #9ecbff; }\n#dev-panel .dev-section-label {\n  color: #7c8a99;\n  text-transform: uppercase;\n  letter-spacing: .08em;\n  font-size: 10px;\n  margin-top: 4px;\n}\n#dev-panel .dev-state {\n  margin: 0;\n  padding: 8px;\n  background: #060a0e;\n  border-radius: 8px;\n  overflow: auto;\n  max-height: 40vh;\n  white-space: pre;\n  color: #c8e6c9;\n}\n#dev-panel .dev-log {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overflow-y: auto;\n  max-height: 24vh;\n  background: #060a0e;\n  border-radius: 8px;\n  padding: 6px 8px;\n}\n#dev-panel .dev-log-line { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }\n#dev-panel .dev-log-invoke { color: #9ecbff; }\n#dev-panel .dev-log-result { color: #86efac; }\n#dev-panel .dev-log-error { color: #fca5a5; }\n`;\n"],"mappings":";;AAgBA,IAAI;AACJ,IAAI;AACJ,IAAI,oBAAmC,EAAE;AAGzC,SAAS,cAAoB;AAC3B,KAAI,CAAC,QAAS;AACd,SAAQ,cAAc,KAAK,UAAU,YAAY,EAAE,MAAM,EAAE;;AAG7D,SAAS,QAAQ,MAAc,MAA2C;AACxE,KAAI,CAAC,MAAO;CACZ,MAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,MAAK,YAAY,wBAAwB;AAEzC,MAAK,cAAc,oBADN,IAAI,MAAM,EAAC,oBACF,CAAK,IAAI;AAC/B,OAAM,YAAY,KAAK;AACvB,OAAM,YAAY,MAAM;;AAG1B,IAAM,eAAe;AAErB,SAAS,aAAa,OAAoB,WAA0B;AAClE,OAAM,UAAU,OAAO,aAAa,UAAU;CAC9C,MAAM,SAAS,MAAM,cAAiC,cAAc;AACpE,KAAI,QAAQ;AACV,SAAO,cAAc,YAAY,MAAM;AACvC,SAAO,QAAQ,YAAY,qBAAqB;AAChD,SAAO,aAAa,iBAAiB,OAAO,CAAC,UAAU,CAAC;;AAE1D,KAAI;AACF,eAAa,QAAQ,cAAc,YAAY,MAAM,IAAI;SACnD;;AAKV,SAAgB,aAAa,SAAgC;CAC3D,MAAM,EAAE,OAAO,QAAQ,WAAW;AAClC,cAAa,MAAM;AACnB,eAAc;CACd,MAAM,OACJ,OAAO,WAAW,WACd,SAAS,cAAc,OAAO,GAC9B,kBAAkB,UAChB,SACA,SAAS;CACjB,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,EAAC,QAAQ,SAAS,MAAM,YAAY,MAAM;AAK1C,OAAM,YAAY;;;;;;;0DAHC,OAAO,0BAA0B,IAAI,EAAE,EAC/B,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,IASG;;;;;;;AAQ/D,WAAU,MAAM,cAA2B,aAAa;AACxD,SAAQ,MAAM,cAA2B,WAAW;AAErC,OAAM,cAAiC,cACtD,EAAQ,iBAAiB,UAAU,MAAM;AACvC,IAAE,iBAAiB;AACnB,eAAa,OAAO,CAAC,MAAM,UAAU,SAAS,YAAY,CAAC;GAC3D;AAEF,OAAM,iBAAiB,eAAe;AACpC,MAAI,MAAM,UAAU,SAAS,YAAY,CAAE,cAAa,OAAO,MAAM;GACrE;CAEF,IAAI,iBAAiB;AACrB,KAAI;AACF,mBAAiB,aAAa,QAAQ,aAAa,KAAK;SAClD;AAGR,cAAa,OAAO,eAAe;AAEnC,QAAO,GAAG,oBAAoB,EAAE,cAAc,WAAW,WAAW;AAClE,UAAQ,KAAK,aAAa,GAAG,KAAK,UAAU,QAAQ,EAAE,CAAC,CAAC,IAAI,SAAS;GACrE;AACF,QAAO,GAAG,oBAAoB,EAAE,QAAQ,YAAY;AAClD,UACE,QAAQ,YAAY,UAAU,KAAK,KAAK,UAAU,OAAO,IACzD,QAAQ,UAAU,SACnB;GACD;AAGF,OAAM,UAAU,YAAY;AAC5B,cAAa;;AAGf,IAAM,WAAW;AAEjB,SAAS,eAAqB;AAC5B,KAAI,SAAS,eAAe,SAAS,CAAE;CACvC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,IAAM,YAAY"}

package/dist/devtools.d.ts

@@ -0,0 +1,2 @@
+export * from './devtools/index'
+export {}

package/dist/devtools.js

@@ -0,0 +1,181 @@
+//#region src/devtools/initDevPanel.ts
+var stateEl;
+var logEl;
+var getStateFn = () => ({});
+function renderState() {
+	if (!stateEl) return;
+	stateEl.textContent = JSON.stringify(getStateFn(), null, 2);
+}
+function logLine(text, kind) {
+	if (!logEl) return;
+	const line = document.createElement("div");
+	line.className = `dev-log-line dev-log-${kind}`;
+	line.textContent = `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}  ${text}`;
+	logEl.appendChild(line);
+	logEl.scrollTop = logEl.scrollHeight;
+}
+var COLLAPSE_KEY = "devPanelCollapsed";
+function setCollapsed(panel, collapsed) {
+	panel.classList.toggle("collapsed", collapsed);
+	const toggle = panel.querySelector(".dev-toggle");
+	if (toggle) {
+		toggle.textContent = collapsed ? "▢" : "—";
+		toggle.title = collapsed ? "Expand dev tools" : "Collapse dev tools";
+		toggle.setAttribute("aria-expanded", String(!collapsed));
+	}
+	try {
+		localStorage.setItem(COLLAPSE_KEY, collapsed ? "1" : "0");
+	} catch {}
+}
+function initDevPanel(options) {
+	const { store, client, target } = options;
+	getStateFn = store.get;
+	injectStyles();
+	const host = typeof target === "string" ? document.querySelector(target) : target instanceof Element ? target : document.body;
+	const panel = document.createElement("aside");
+	panel.id = "dev-panel";
+	(host ?? document.body).appendChild(panel);
+	panel.innerHTML = `
+    <div class="dev-head">
+      <span class="dev-badge">DEV</span>
+      <span class="dev-title">DEV TOOLS · client-side function state — not for production</span>
+      <button type="button" class="dev-toggle" aria-label="Toggle dev tools">—</button>
+    </div>
+    <div class="dev-body">
+      <div class="dev-fns">Registered functions: <code>${(client.getRegisteredFunctions?.() ?? []).map((f) => f.name).join(", ") || "—"}</code></div>
+      <div class="dev-section-label">JSON object (built by the agent)</div>
+      <pre class="dev-state" id="dev-state"></pre>
+      <div class="dev-section-label">Function calls</div>
+      <div class="dev-log" id="dev-log"></div>
+    </div>
+  `;
+	stateEl = panel.querySelector("#dev-state");
+	logEl = panel.querySelector("#dev-log");
+	panel.querySelector(".dev-toggle")?.addEventListener("click", (e) => {
+		e.stopPropagation();
+		setCollapsed(panel, !panel.classList.contains("collapsed"));
+	});
+	panel.addEventListener("click", () => {
+		if (panel.classList.contains("collapsed")) setCollapsed(panel, false);
+	});
+	let startCollapsed = false;
+	try {
+		startCollapsed = localStorage.getItem(COLLAPSE_KEY) === "1";
+	} catch {}
+	setCollapsed(panel, startCollapsed);
+	client.on("function:invoke", ({ functionName, arguments: args }) => {
+		logLine(`→ ${functionName}(${JSON.stringify(args ?? {})})`, "invoke");
+	});
+	client.on("function:result", ({ result, error }) => {
+		logLine(error ? `✗ error: ${error}` : `← ${JSON.stringify(result)}`, error ? "error" : "result");
+	});
+	store.subscribe(renderState);
+	renderState();
+}
+var STYLE_ID = "dev-panel-styles";
+function injectStyles() {
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = PANEL_CSS;
+	document.head.appendChild(style);
+}
+var PANEL_CSS = `
+#dev-panel {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: min(360px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  box-sizing: border-box;
+  max-height: calc(100vh - 32px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #0f1419;
+  color: #d7e0e8;
+  border: 1px solid #2a3441;
+  border-radius: 12px;
+  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  z-index: 1000;
+}
+#dev-panel .dev-head { display: flex; align-items: center; gap: 8px; }
+#dev-panel .dev-toggle {
+  margin-left: auto;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: #7c8a99;
+  border: 1px solid #2a3441;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+#dev-panel .dev-toggle:hover { color: #d7e0e8; border-color: #3a4655; }
+#dev-panel .dev-body { display: flex; flex-direction: column; gap: 8px; }
+
+/* Collapsed: shrink to a small clickable widget showing only the DEV badge. */
+#dev-panel.collapsed {
+  width: auto;
+  cursor: pointer;
+  padding: 8px 10px;
+}
+#dev-panel.collapsed .dev-title,
+#dev-panel.collapsed .dev-body { display: none; }
+#dev-panel.collapsed .dev-toggle { margin-left: 6px; }
+#dev-panel .dev-badge {
+  background: #f59e0b;
+  color: #1c1206;
+  font-weight: 700;
+  font-size: 10px;
+  letter-spacing: .08em;
+  padding: 2px 6px;
+  border-radius: 5px;
+}
+#dev-panel .dev-title { color: #f59e0b; font-size: 11px; line-height: 1.3; }
+#dev-panel .dev-fns { color: #7c8a99; font-size: 11px; }
+#dev-panel .dev-fns code { color: #9ecbff; }
+#dev-panel .dev-section-label {
+  color: #7c8a99;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  font-size: 10px;
+  margin-top: 4px;
+}
+#dev-panel .dev-state {
+  margin: 0;
+  padding: 8px;
+  background: #060a0e;
+  border-radius: 8px;
+  overflow: auto;
+  max-height: 40vh;
+  white-space: pre;
+  color: #c8e6c9;
+}
+#dev-panel .dev-log {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  max-height: 24vh;
+  background: #060a0e;
+  border-radius: 8px;
+  padding: 6px 8px;
+}
+#dev-panel .dev-log-line { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
+#dev-panel .dev-log-invoke { color: #9ecbff; }
+#dev-panel .dev-log-result { color: #86efac; }
+#dev-panel .dev-log-error { color: #fca5a5; }
+`;
+//#endregion
+export { initDevPanel };
+
+//# sourceMappingURL=devtools.js.map

package/dist/devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","names":[],"sources":["../src/devtools/initDevPanel.ts"],"sourcesContent":["import type { AgoClient } from \"../client/AgoClient\";\nimport type { Store } from \"../state/createStore\";\n\n/** Options for {@link initDevPanel}. */\nexport interface DevPanelOptions {\n  /** The store whose state the panel renders live. */\n  store: Store<unknown>;\n  /**\n   * Client to read registered functions from and listen to function events on.\n   * Typed structurally so a mock client works too.\n   */\n  client: Pick<AgoClient, \"on\" | \"getRegisteredFunctions\">;\n  /** Where to mount: a CSS selector, an Element, or `document.body` (default). */\n  target?: string | Element;\n}\n\nlet stateEl: HTMLElement | null;\nlet logEl: HTMLElement | null;\nlet getStateFn: () => unknown = () => ({});\n\n// Re-render the JSON object. Wired to the store's subscribe() in initDevPanel.\nfunction renderState(): void {\n  if (!stateEl) return;\n  stateEl.textContent = JSON.stringify(getStateFn(), null, 2);\n}\n\nfunction logLine(text: string, kind: \"invoke\" | \"result\" | \"error\"): void {\n  if (!logEl) return;\n  const line = document.createElement(\"div\");\n  line.className = `dev-log-line dev-log-${kind}`;\n  const time = new Date().toLocaleTimeString();\n  line.textContent = `${time}  ${text}`;\n  logEl.appendChild(line);\n  logEl.scrollTop = logEl.scrollHeight;\n}\n\nconst COLLAPSE_KEY = \"devPanelCollapsed\";\n\nfunction setCollapsed(panel: HTMLElement, collapsed: boolean): void {\n  panel.classList.toggle(\"collapsed\", collapsed);\n  const toggle = panel.querySelector<HTMLButtonElement>(\".dev-toggle\");\n  if (toggle) {\n    toggle.textContent = collapsed ? \"▢\" : \"—\";\n    toggle.title = collapsed ? \"Expand dev tools\" : \"Collapse dev tools\";\n    toggle.setAttribute(\"aria-expanded\", String(!collapsed));\n  }\n  try {\n    localStorage.setItem(COLLAPSE_KEY, collapsed ? \"1\" : \"0\");\n  } catch {\n    // localStorage may be unavailable; collapse state just won't persist.\n  }\n}\n\nexport function initDevPanel(options: DevPanelOptions): void {\n  const { store, client, target } = options;\n  getStateFn = store.get;\n  injectStyles();\n  const host =\n    typeof target === \"string\"\n      ? document.querySelector(target)\n      : target instanceof Element\n        ? target\n        : document.body;\n  const panel = document.createElement(\"aside\");\n  panel.id = \"dev-panel\";\n  (host ?? document.body).appendChild(panel);\n\n  const registered = client.getRegisteredFunctions?.() ?? [];\n  const fnNames = registered.map((f) => f.name).join(\", \") || \"—\";\n\n  panel.innerHTML = `\n    <div class=\"dev-head\">\n      <span class=\"dev-badge\">DEV</span>\n      <span class=\"dev-title\">DEV TOOLS · client-side function state — not for production</span>\n      <button type=\"button\" class=\"dev-toggle\" aria-label=\"Toggle dev tools\">—</button>\n    </div>\n    <div class=\"dev-body\">\n      <div class=\"dev-fns\">Registered functions: <code>${fnNames}</code></div>\n      <div class=\"dev-section-label\">JSON object (built by the agent)</div>\n      <pre class=\"dev-state\" id=\"dev-state\"></pre>\n      <div class=\"dev-section-label\">Function calls</div>\n      <div class=\"dev-log\" id=\"dev-log\"></div>\n    </div>\n  `;\n\n  stateEl = panel.querySelector<HTMLElement>(\"#dev-state\");\n  logEl = panel.querySelector<HTMLElement>(\"#dev-log\");\n\n  const toggle = panel.querySelector<HTMLButtonElement>(\".dev-toggle\");\n  toggle?.addEventListener(\"click\", (e) => {\n    e.stopPropagation();\n    setCollapsed(panel, !panel.classList.contains(\"collapsed\"));\n  });\n  // When collapsed, the whole widget acts as an expand button.\n  panel.addEventListener(\"click\", () => {\n    if (panel.classList.contains(\"collapsed\")) setCollapsed(panel, false);\n  });\n\n  let startCollapsed = false;\n  try {\n    startCollapsed = localStorage.getItem(COLLAPSE_KEY) === \"1\";\n  } catch {\n    // ignore\n  }\n  setCollapsed(panel, startCollapsed);\n\n  client.on(\"function:invoke\", ({ functionName, arguments: args }) => {\n    logLine(`→ ${functionName}(${JSON.stringify(args ?? {})})`, \"invoke\");\n  });\n  client.on(\"function:result\", ({ result, error }) => {\n    logLine(\n      error ? `✗ error: ${error}` : `← ${JSON.stringify(result)}`,\n      error ? \"error\" : \"result\",\n    );\n  });\n\n  // Re-render the JSON object on every state change, then paint the initial state.\n  store.subscribe(renderState);\n  renderState();\n}\n\nconst STYLE_ID = \"dev-panel-styles\";\n\nfunction injectStyles(): void {\n  if (document.getElementById(STYLE_ID)) return;\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent = PANEL_CSS;\n  document.head.appendChild(style);\n}\n\nconst PANEL_CSS = `\n#dev-panel {\n  position: fixed;\n  top: 16px;\n  right: 16px;\n  width: min(360px, calc(100vw - 32px));\n  max-width: calc(100vw - 32px);\n  box-sizing: border-box;\n  max-height: calc(100vh - 32px);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px 14px;\n  background: #0f1419;\n  color: #d7e0e8;\n  border: 1px solid #2a3441;\n  border-radius: 12px;\n  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  z-index: 1000;\n}\n#dev-panel .dev-head { display: flex; align-items: center; gap: 8px; }\n#dev-panel .dev-toggle {\n  margin-left: auto;\n  flex: none;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: #7c8a99;\n  border: 1px solid #2a3441;\n  border-radius: 6px;\n  font-size: 12px;\n  line-height: 1;\n  cursor: pointer;\n}\n#dev-panel .dev-toggle:hover { color: #d7e0e8; border-color: #3a4655; }\n#dev-panel .dev-body { display: flex; flex-direction: column; gap: 8px; }\n\n/* Collapsed: shrink to a small clickable widget showing only the DEV badge. */\n#dev-panel.collapsed {\n  width: auto;\n  cursor: pointer;\n  padding: 8px 10px;\n}\n#dev-panel.collapsed .dev-title,\n#dev-panel.collapsed .dev-body { display: none; }\n#dev-panel.collapsed .dev-toggle { margin-left: 6px; }\n#dev-panel .dev-badge {\n  background: #f59e0b;\n  color: #1c1206;\n  font-weight: 700;\n  font-size: 10px;\n  letter-spacing: .08em;\n  padding: 2px 6px;\n  border-radius: 5px;\n}\n#dev-panel .dev-title { color: #f59e0b; font-size: 11px; line-height: 1.3; }\n#dev-panel .dev-fns { color: #7c8a99; font-size: 11px; }\n#dev-panel .dev-fns code { color: #9ecbff; }\n#dev-panel .dev-section-label {\n  color: #7c8a99;\n  text-transform: uppercase;\n  letter-spacing: .08em;\n  font-size: 10px;\n  margin-top: 4px;\n}\n#dev-panel .dev-state {\n  margin: 0;\n  padding: 8px;\n  background: #060a0e;\n  border-radius: 8px;\n  overflow: auto;\n  max-height: 40vh;\n  white-space: pre;\n  color: #c8e6c9;\n}\n#dev-panel .dev-log {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overflow-y: auto;\n  max-height: 24vh;\n  background: #060a0e;\n  border-radius: 8px;\n  padding: 6px 8px;\n}\n#dev-panel .dev-log-line { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }\n#dev-panel .dev-log-invoke { color: #9ecbff; }\n#dev-panel .dev-log-result { color: #86efac; }\n#dev-panel .dev-log-error { color: #fca5a5; }\n`;\n"],"mappings":";AAgBA,IAAI;AACJ,IAAI;AACJ,IAAI,oBAAmC,EAAE;AAGzC,SAAS,cAAoB;AAC3B,KAAI,CAAC,QAAS;AACd,SAAQ,cAAc,KAAK,UAAU,YAAY,EAAE,MAAM,EAAE;;AAG7D,SAAS,QAAQ,MAAc,MAA2C;AACxE,KAAI,CAAC,MAAO;CACZ,MAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,MAAK,YAAY,wBAAwB;AAEzC,MAAK,cAAc,oBADN,IAAI,MAAM,EAAC,oBACF,CAAK,IAAI;AAC/B,OAAM,YAAY,KAAK;AACvB,OAAM,YAAY,MAAM;;AAG1B,IAAM,eAAe;AAErB,SAAS,aAAa,OAAoB,WAA0B;AAClE,OAAM,UAAU,OAAO,aAAa,UAAU;CAC9C,MAAM,SAAS,MAAM,cAAiC,cAAc;AACpE,KAAI,QAAQ;AACV,SAAO,cAAc,YAAY,MAAM;AACvC,SAAO,QAAQ,YAAY,qBAAqB;AAChD,SAAO,aAAa,iBAAiB,OAAO,CAAC,UAAU,CAAC;;AAE1D,KAAI;AACF,eAAa,QAAQ,cAAc,YAAY,MAAM,IAAI;SACnD;;AAKV,SAAgB,aAAa,SAAgC;CAC3D,MAAM,EAAE,OAAO,QAAQ,WAAW;AAClC,cAAa,MAAM;AACnB,eAAc;CACd,MAAM,OACJ,OAAO,WAAW,WACd,SAAS,cAAc,OAAO,GAC9B,kBAAkB,UAChB,SACA,SAAS;CACjB,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,EAAC,QAAQ,SAAS,MAAM,YAAY,MAAM;AAK1C,OAAM,YAAY;;;;;;;0DAHC,OAAO,0BAA0B,IAAI,EAAE,EAC/B,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,IASG;;;;;;;AAQ/D,WAAU,MAAM,cAA2B,aAAa;AACxD,SAAQ,MAAM,cAA2B,WAAW;AAErC,OAAM,cAAiC,cACtD,EAAQ,iBAAiB,UAAU,MAAM;AACvC,IAAE,iBAAiB;AACnB,eAAa,OAAO,CAAC,MAAM,UAAU,SAAS,YAAY,CAAC;GAC3D;AAEF,OAAM,iBAAiB,eAAe;AACpC,MAAI,MAAM,UAAU,SAAS,YAAY,CAAE,cAAa,OAAO,MAAM;GACrE;CAEF,IAAI,iBAAiB;AACrB,KAAI;AACF,mBAAiB,aAAa,QAAQ,aAAa,KAAK;SAClD;AAGR,cAAa,OAAO,eAAe;AAEnC,QAAO,GAAG,oBAAoB,EAAE,cAAc,WAAW,WAAW;AAClE,UAAQ,KAAK,aAAa,GAAG,KAAK,UAAU,QAAQ,EAAE,CAAC,CAAC,IAAI,SAAS;GACrE;AACF,QAAO,GAAG,oBAAoB,EAAE,QAAQ,YAAY;AAClD,UACE,QAAQ,YAAY,UAAU,KAAK,KAAK,UAAU,OAAO,IACzD,QAAQ,UAAU,SACnB;GACD;AAGF,OAAM,UAAU,YAAY;AAC5B,cAAa;;AAGf,IAAM,WAAW;AAEjB,SAAS,eAAqB;AAC5B,KAAI,SAAS,eAAe,SAAS,CAAE;CACvC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,IAAM,YAAY"}