@sweidos/eidos 1.0.24 → 1.0.30

package/dist/devtools.js

@@ -0,0 +1,597 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore, useState, useCallback } from "react";
+let _state;
+const _listeners = /* @__PURE__ */ new Set();
+function _notify() {
+  _listeners.forEach((fn) => fn());
+}
+function _set(updater) {
+  _state = { ..._state, ...updater(_state) };
+  _notify();
+}
+_state = {
+  isOnline: typeof navigator !== "undefined" ? navigator.onLine : true,
+  swStatus: "idle",
+  swError: void 0,
+  resources: {},
+  queue: [],
+  setOnline: (isOnline) => _set(() => ({ isOnline })),
+  setSwStatus: (swStatus, swError) => _set(() => ({ swStatus, swError })),
+  registerResource: (url, entry) => _set((s) => ({ resources: { ...s.resources, [url]: entry } })),
+  updateResource: (url, update) => _set((s) => ({
+    resources: {
+      ...s.resources,
+      [url]: s.resources[url] ? { ...s.resources[url], ...update } : s.resources[url]
+    }
+  })),
+  unregisterResource: (url) => _set((s) => {
+    const { [url]: _removed, ...rest } = s.resources;
+    return { resources: rest };
+  }),
+  addQueueItem: (item) => _set((s) => ({ queue: [...s.queue, item] })),
+  updateQueueItem: (id, update) => _set((s) => ({
+    queue: s.queue.map((item) => item.id === id ? { ...item, ...update } : item)
+  })),
+  batchUpdateQueueItems: (updates) => _set((s) => {
+    const map = new Map(updates.map((u) => [u.id, u.update]));
+    return {
+      queue: s.queue.map((item) => {
+        const u = map.get(item.id);
+        return u ? { ...item, ...u } : item;
+      })
+    };
+  }),
+  removeQueueItem: (id) => _set((s) => ({ queue: s.queue.filter((item) => item.id !== id) })),
+  hydrateQueue: (items) => _set(() => ({ queue: items }))
+};
+function _getState() {
+  return _state;
+}
+function _subscribe(listener) {
+  _listeners.add(listener);
+  return () => {
+    _listeners.delete(listener);
+  };
+}
+const useEidosStore = {
+  getState: _getState,
+  subscribe: _subscribe,
+  // Test/devtools helper — merges partial state, preserves action methods.
+  setState: (partial) => {
+    const update = typeof partial === "function" ? partial(_state) : partial;
+    _state = { ..._state, ...update };
+    _notify();
+  }
+};
+function useStore(selector) {
+  const fn = selector ?? ((s) => s);
+  return useSyncExternalStore(useEidosStore.subscribe, () => fn(useEidosStore.getState()));
+}
+function useEidosResources() {
+  return useStore((s) => s.resources);
+}
+function useEidosQueue() {
+  return useStore((s) => s.queue);
+}
+function useEidosStatus() {
+  const isOnline = useStore((s) => s.isOnline);
+  const swStatus = useStore((s) => s.swStatus);
+  const swError = useStore((s) => s.swError);
+  return { isOnline, swStatus, swError };
+}
+function useEidosQueueStats() {
+  const encoded = useStore((s) => {
+    let pending = 0, failed = 0, replaying = 0;
+    for (const q of s.queue) {
+      if (q.status === "pending") pending++;
+      else if (q.status === "failed") failed++;
+      else if (q.status === "replaying") replaying++;
+    }
+    return `${pending},${failed},${replaying},${s.queue.length}`;
+  });
+  const [p, f, r, t] = encoded.split(",");
+  return { pending: +p, failed: +f, replaying: +r, total: +t };
+}
+function setOfflineSimulation(enabled) {
+  useEidosStore.getState().setOnline(!enabled);
+}
+const DB_NAME = "eidos";
+const DB_VERSION = 1;
+const QUEUE_STORE = "action-queue";
+let _db = null;
+function openDB() {
+  if (_db) return Promise.resolve(_db);
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains(QUEUE_STORE)) {
+        const store = db.createObjectStore(QUEUE_STORE, { keyPath: "id" });
+        store.createIndex("status", "status", { unique: false });
+        store.createIndex("actionId", "actionId", { unique: false });
+      }
+    };
+    req.onsuccess = () => {
+      _db = req.result;
+      resolve(req.result);
+    };
+    req.onerror = () => reject(req.error);
+  });
+}
+async function idbUpdateQueueItem(id, update) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(QUEUE_STORE, "readwrite");
+    const store = tx.objectStore(QUEUE_STORE);
+    const get = store.get(id);
+    get.onsuccess = () => {
+      if (get.result) {
+        store.put({ ...get.result, ...update });
+      }
+    };
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+async function idbRemoveFromQueue(id) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(QUEUE_STORE, "readwrite");
+    tx.objectStore(QUEUE_STORE).delete(id);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+async function idbGetPendingItems() {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(QUEUE_STORE, "readonly");
+    const index = tx.objectStore(QUEUE_STORE).index("status");
+    const results = [];
+    let done = 0;
+    function finish(err) {
+      if (err) {
+        reject(err);
+        return;
+      }
+      if (++done === 2) resolve(results);
+    }
+    const pendingReq = index.openCursor(IDBKeyRange.only("pending"));
+    pendingReq.onsuccess = (e) => {
+      const cursor = e.target.result;
+      if (cursor) {
+        results.push(cursor.value);
+        cursor.continue();
+      } else finish();
+    };
+    pendingReq.onerror = () => finish(pendingReq.error);
+    const failedReq = index.openCursor(IDBKeyRange.only("failed"));
+    failedReq.onsuccess = (e) => {
+      const cursor = e.target.result;
+      if (cursor) {
+        results.push(cursor.value);
+        cursor.continue();
+      } else finish();
+    };
+    failedReq.onerror = () => finish(failedReq.error);
+  });
+}
+async function idbClearQueue() {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(QUEUE_STORE, "readwrite");
+    tx.objectStore(QUEUE_STORE).clear();
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+const _actionRegistry = /* @__PURE__ */ new Map();
+const _rollbackRegistry = /* @__PURE__ */ new Map();
+const _conflictRegistry = /* @__PURE__ */ new Map();
+function isClientError(err) {
+  if (err instanceof Response) return err.status >= 400 && err.status < 500;
+  if (typeof err === "object" && err !== null) {
+    const s = err.status;
+    if (typeof s === "number") return s >= 400 && s < 500;
+  }
+  return false;
+}
+function backoffMs(retryCount) {
+  const base = Math.min(2e3 * 2 ** retryCount, 3e5);
+  return base * (0.8 + Math.random() * 0.4);
+}
+let _replaying = false;
+async function replayQueue() {
+  const store = useEidosStore.getState();
+  if (!store.isOnline || _replaying) {
+    return { attempted: 0, succeeded: 0, failed: 0, retrying: 0, skipped: 0, conflicted: 0 };
+  }
+  _replaying = true;
+  try {
+    return await _doReplayQueue(store);
+  } finally {
+    _replaying = false;
+  }
+}
+async function _replayItem(item, store) {
+  var _a;
+  const fn = _actionRegistry.get(item.actionId);
+  if (!fn) return "skipped";
+  try {
+    await fn(...item.args);
+    const completedAt = Date.now();
+    store.updateQueueItem(item.id, { status: "succeeded", completedAt });
+    await idbUpdateQueueItem(item.id, { status: "succeeded", completedAt });
+    setTimeout(() => {
+      store.removeQueueItem(item.id);
+      idbRemoveFromQueue(item.id);
+    }, 3e3);
+    return "succeeded";
+  } catch (err) {
+    if (isClientError(err)) {
+      const onConflict = _conflictRegistry.get(item.actionId);
+      if (onConflict) {
+        const resolution = onConflict(err, item.args);
+        if (resolution === "skip") {
+          store.removeQueueItem(item.id);
+          await idbRemoveFromQueue(item.id);
+          return "conflicted";
+        }
+      }
+    }
+    const retryCount = item.retryCount + 1;
+    if (retryCount >= item.maxRetries) {
+      store.updateQueueItem(item.id, { status: "failed", error: String(err), retryCount });
+      await idbUpdateQueueItem(item.id, { status: "failed", error: String(err), retryCount });
+      (_a = _rollbackRegistry.get(item.actionId)) == null ? void 0 : _a(...item.args);
+      return "failed";
+    } else {
+      const nextRetryAt = Date.now() + backoffMs(retryCount);
+      store.updateQueueItem(item.id, { status: "pending", retryCount, nextRetryAt });
+      await idbUpdateQueueItem(item.id, { status: "pending", retryCount, nextRetryAt });
+      return "retrying";
+    }
+  }
+}
+async function _replayTier(items, store, result) {
+  if (items.length === 0) return;
+  const replayable = items.filter((item) => _actionRegistry.has(item.actionId));
+  result.skipped += items.length - replayable.length;
+  if (replayable.length > 0) {
+    store.batchUpdateQueueItems(replayable.map((item) => ({ id: item.id, update: { status: "replaying" } })));
+    for (const item of replayable) {
+      idbUpdateQueueItem(item.id, { status: "replaying" });
+    }
+  }
+  const outcomes = await Promise.allSettled(replayable.map((item) => _replayItem(item, store)));
+  for (const o of outcomes) {
+    const outcome = o.status === "fulfilled" ? o.value : "failed";
+    if (outcome === "skipped") {
+      result.skipped++;
+    } else if (outcome === "conflicted") {
+      result.conflicted++;
+    } else {
+      result.attempted++;
+      result[outcome]++;
+    }
+  }
+}
+async function _doReplayQueue(store) {
+  const candidates = await idbGetPendingItems();
+  const now = Date.now();
+  const pending = candidates.filter((item) => !item.nextRetryAt || item.nextRetryAt <= now);
+  const result = { attempted: 0, succeeded: 0, failed: 0, retrying: 0, skipped: 0, conflicted: 0 };
+  for (const tier of ["high", "normal", "low"]) {
+    const tierItems = pending.filter((item) => (item.priority ?? "normal") === tier);
+    await _replayTier(tierItems, store, result);
+  }
+  return result;
+}
+async function clearQueue() {
+  await idbClearQueue();
+  useEidosStore.getState().hydrateQueue([]);
+}
+const C = {
+  bg: "#0f1117",
+  surface: "#1a1d27",
+  border: "#2a2d3a",
+  text: "#e2e8f0",
+  muted: "#64748b",
+  green: "#22c55e",
+  red: "#ef4444",
+  yellow: "#f59e0b",
+  blue: "#3b82f6",
+  purple: "#a855f7",
+  cyan: "#06b6d4"
+};
+function pill(color) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "1px 7px",
+    borderRadius: 9999,
+    fontSize: 10,
+    fontWeight: 600,
+    background: `${color}22`,
+    color,
+    border: `1px solid ${color}44`,
+    fontFamily: "inherit"
+  };
+}
+function btn(variant = "ghost") {
+  const base = {
+    cursor: "pointer",
+    border: "none",
+    borderRadius: 6,
+    padding: "3px 10px",
+    fontSize: 11,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    transition: "opacity 0.15s"
+  };
+  if (variant === "danger") return { ...base, background: `${C.red}22`, color: C.red };
+  if (variant === "primary") return { ...base, background: `${C.blue}22`, color: C.blue };
+  return { ...base, background: C.surface, color: C.muted };
+}
+function swStatusColor(s) {
+  if (s === "active") return C.green;
+  if (s === "registering") return C.yellow;
+  if (s === "error" || s === "unsupported") return C.red;
+  return C.muted;
+}
+function queueStatusColor(s) {
+  if (s === "succeeded") return C.green;
+  if (s === "failed") return C.red;
+  if (s === "replaying") return C.yellow;
+  return C.blue;
+}
+function resourceStatusColor(s) {
+  if (s === "fresh") return C.green;
+  if (s === "stale" || s === "offline") return C.yellow;
+  if (s === "error") return C.red;
+  if (s === "fetching") return C.cyan;
+  return C.muted;
+}
+function positionStyle(p) {
+  const base = { position: "fixed", zIndex: 99999 };
+  if (p === "bottom-left") return { ...base, bottom: 16, left: 16 };
+  if (p === "top-right") return { ...base, top: 16, right: 16 };
+  if (p === "top-left") return { ...base, top: 16, left: 16 };
+  return { ...base, bottom: 16, right: 16 };
+}
+function EidosDevtools({ position = "bottom-right", defaultOpen = false }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [tab, setTab] = useState("queue");
+  const [simOffline, setSimOffline] = useState(false);
+  const { isOnline, swStatus, swError } = useEidosStatus();
+  const queue = useEidosQueue();
+  const { pending, failed, replaying } = useEidosQueueStats();
+  const resources = useEidosResources();
+  const resourceList = Object.values(resources);
+  const badgeCount = pending + failed + replaying;
+  const toggleOffline = useCallback(() => {
+    const next = !simOffline;
+    setSimOffline(next);
+    setOfflineSimulation(next);
+  }, [simOffline]);
+  const handleReplay = useCallback(() => {
+    void replayQueue();
+  }, []);
+  const handleClear = useCallback(() => {
+    void clearQueue();
+  }, []);
+  const toggleBtn = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => setOpen((v) => !v),
+      title: "Eidos Devtools",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "5px 10px",
+        background: C.bg,
+        border: `1px solid ${C.border}`,
+        borderRadius: 9999,
+        cursor: "pointer",
+        color: C.text,
+        fontSize: 11,
+        fontWeight: 600,
+        fontFamily: 'ui-monospace, "Cascadia Code", "Fira Mono", monospace',
+        boxShadow: "0 2px 12px rgba(0,0,0,0.5)",
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { color: isOnline ? C.green : C.red, fontSize: 8 }, children: "●" }),
+        /* @__PURE__ */ jsx("span", { style: { color: C.cyan }, children: "⚡" }),
+        /* @__PURE__ */ jsx("span", { children: "eidos" }),
+        badgeCount > 0 && /* @__PURE__ */ jsx("span", { style: {
+          background: failed > 0 ? C.red : C.yellow,
+          color: "#fff",
+          borderRadius: 9999,
+          minWidth: 16,
+          height: 16,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 9,
+          fontWeight: 700,
+          padding: "0 4px"
+        }, children: badgeCount })
+      ]
+    }
+  );
+  if (!open) {
+    return /* @__PURE__ */ jsx("div", { style: positionStyle(position), children: toggleBtn });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { ...positionStyle(position), display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      width: 340,
+      maxHeight: 480,
+      display: "flex",
+      flexDirection: "column",
+      background: C.bg,
+      border: `1px solid ${C.border}`,
+      borderRadius: 10,
+      overflow: "hidden",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.6)",
+      fontFamily: 'ui-monospace, "Cascadia Code", "Fira Mono", monospace',
+      fontSize: 11,
+      color: C.text
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "8px 12px",
+        background: C.surface,
+        borderBottom: `1px solid ${C.border}`,
+        flexShrink: 0
+      }, children: [
+        /* @__PURE__ */ jsx("span", { style: { color: C.cyan, fontSize: 13 }, children: "⚡" }),
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 12, color: C.text, flex: 1 }, children: "Eidos Devtools" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsx("span", { style: pill(isOnline ? C.green : C.red), children: isOnline ? "online" : "offline" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: toggleOffline,
+              title: simOffline ? "Disable offline simulation" : "Enable offline simulation",
+              style: {
+                ...btn("ghost"),
+                background: simOffline ? `${C.yellow}22` : C.surface,
+                color: simOffline ? C.yellow : C.muted,
+                border: `1px solid ${simOffline ? C.yellow + "44" : C.border}`,
+                fontSize: 10
+              },
+              children: simOffline ? "📡 simulating" : "✈ sim offline"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "6px 12px",
+        borderBottom: `1px solid ${C.border}`,
+        flexShrink: 0,
+        background: C.bg
+      }, children: [
+        /* @__PURE__ */ jsx("span", { style: { color: C.muted, fontSize: 10 }, children: "SW" }),
+        /* @__PURE__ */ jsx("span", { style: pill(swStatusColor(swStatus)), children: swStatus }),
+        swError && /* @__PURE__ */ jsx("span", { style: { color: C.red, fontSize: 10, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: swError })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: {
+        display: "flex",
+        borderBottom: `1px solid ${C.border}`,
+        flexShrink: 0,
+        background: C.surface
+      }, children: ["queue", "cache"].map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setTab(t),
+          style: {
+            flex: 1,
+            padding: "6px 0",
+            background: "none",
+            border: "none",
+            borderBottom: tab === t ? `2px solid ${C.cyan}` : "2px solid transparent",
+            cursor: "pointer",
+            color: tab === t ? C.cyan : C.muted,
+            fontSize: 11,
+            fontWeight: tab === t ? 600 : 400,
+            fontFamily: "inherit",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          },
+          children: t === "queue" ? `Queue (${queue.length})` : `Cache (${resourceList.length})`
+        },
+        t
+      )) }),
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: tab === "queue" ? /* @__PURE__ */ jsx(QueueTab, { queue, onReplay: handleReplay, onClear: handleClear }) : /* @__PURE__ */ jsx(CacheTab, { resources: resourceList }) })
+    ] }),
+    toggleBtn
+  ] });
+}
+function QueueTab({
+  queue,
+  onReplay,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      gap: 6,
+      padding: "8px 12px",
+      borderBottom: `1px solid ${C.border}`,
+      flexShrink: 0
+    }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: onReplay, style: btn("primary"), children: "▶ Replay queue" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClear, style: btn("danger"), children: "✕ Clear queue" }),
+      /* @__PURE__ */ jsxs("span", { style: { marginLeft: "auto", color: C.muted, fontSize: 10, alignSelf: "center" }, children: [
+        queue.length,
+        " item",
+        queue.length !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto" }, children: queue.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "20px 12px", textAlign: "center", color: C.muted }, children: "Queue empty" }) : queue.map((item) => /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      padding: "7px 12px",
+      borderBottom: `1px solid ${C.border}`
+    }, children: [
+      /* @__PURE__ */ jsx("span", { style: pill(queueStatusColor(item.status)), children: item.status }),
+      item.priority && item.priority !== "normal" && /* @__PURE__ */ jsx("span", { style: pill(item.priority === "high" ? C.purple : C.muted), children: item.priority }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: C.text }, children: item.actionName }),
+      item.retryCount > 0 && /* @__PURE__ */ jsxs("span", { style: { color: C.muted, fontSize: 10, flexShrink: 0 }, children: [
+        "×",
+        item.retryCount,
+        "/",
+        item.maxRetries
+      ] })
+    ] }, item.id)) })
+  ] });
+}
+function CacheTab({ resources }) {
+  return /* @__PURE__ */ jsx("div", { children: resources.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "20px 12px", textAlign: "center", color: C.muted }, children: "No resources registered" }) : resources.map((res) => /* @__PURE__ */ jsxs("div", { style: {
+    padding: "7px 12px",
+    borderBottom: `1px solid ${C.border}`
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+      /* @__PURE__ */ jsx("span", { style: pill(resourceStatusColor(res.status)), children: res.status }),
+      /* @__PURE__ */ jsx("span", { style: { color: C.muted, fontSize: 10 }, children: res.strategy.name })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      color: C.text,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      fontSize: 10,
+      marginBottom: 2
+    }, children: res.url }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, color: C.muted, fontSize: 10 }, children: [
+      /* @__PURE__ */ jsxs("span", { title: "Cache hits", children: [
+        "↑",
+        res.cacheHits,
+        " hit",
+        res.cacheHits !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs("span", { title: "Cache misses", children: [
+        "↓",
+        res.cacheMisses,
+        " miss",
+        res.cacheMisses !== 1 ? "es" : ""
+      ] }),
+      res.cachedAt && /* @__PURE__ */ jsxs("span", { title: "Cached at", children: [
+        "⏱ ",
+        new Date(res.cachedAt).toLocaleTimeString()
+      ] })
+    ] })
+  ] }, res.url)) });
+}
+export {
+  EidosDevtools
+};