@genkaku/dsh-user-plugin 0.1.18 → 0.1.20

package/lib/client.js

@@ -78,9 +78,48 @@ function Icon({ size = 16 }) {
 var row = { display: "flex", justifyContent: "space-between", gap: 12, padding: "6px 0" };
 var dim = { opacity: 0.6 };
 var box = { border: "1px solid rgba(255,255,255,0.12)", borderRadius: 10, padding: 12, marginTop: 12 };
+function useScrollThumb() {
+  const [node, setNode] = (0, import_react.useState)(null);
+  const nodeRef = (0, import_react.useRef)(null);
+  const [thumb, setThumb] = (0, import_react.useState)(null);
+  const attach = (0, import_react.useCallback)((next) => {
+    nodeRef.current = next;
+    setNode(next);
+  }, []);
+  const update = (0, import_react.useCallback)(() => {
+    const el = nodeRef.current;
+    if (el == null) return;
+    const ratio = el.scrollHeight > el.clientHeight + 1 ? el.clientHeight / el.scrollHeight : 1;
+    setThumb(ratio >= 1 ? null : { top: el.scrollTop / el.scrollHeight * 100, height: Math.max(ratio * 100, 8) });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (node == null) return;
+    update();
+    node.addEventListener("scroll", update, { passive: true });
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    ro?.observe(node);
+    const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(update);
+    mo?.observe(node, { childList: true, subtree: true });
+    return () => {
+      node.removeEventListener("scroll", update);
+      ro?.disconnect();
+      mo?.disconnect();
+    };
+  }, [node, update]);
+  const jump = (0, import_react.useCallback)((event) => {
+    const el = nodeRef.current;
+    const rail = event.currentTarget;
+    if (el == null || rail == null) return;
+    const rect = rail.getBoundingClientRect();
+    if (rect.height <= 0) return;
+    el.scrollTop = Math.max(0, (event.clientY - rect.top) / rect.height) * el.scrollHeight;
+  }, []);
+  return { attach, thumb, update, jump };
+}
 function Page() {
   const [status, setStatus] = (0, import_react.useState)(null);
   const [error, setError] = (0, import_react.useState)(null);
+  const models = useScrollThumb();
   const load = (0, import_react.useCallback)(async () => {
     for (const port of CANDIDATE_PORTS) {
       try {
@@ -118,44 +157,85 @@ function Page() {
   }
   if (status == null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, ...dim }, children: "Loading worker status\u2026" });
   const offers = status.offers ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, maxWidth: 720 }, children: [
+  const price = (micro) => {
+    const n = Number(micro);
+    if (!Number.isFinite(n)) return "\u2014";
+    return n === 0 ? "free" : `${(n / 1e6).toFixed(2)} USDC`;
+  };
+  const eth = (wei) => {
+    const n = Number(wei);
+    return Number.isFinite(n) ? `${(n / 1e18).toFixed(4)} ETH` : "\u2014";
+  };
+  const usdc = (micro) => {
+    const n = Number(micro);
+    return Number.isFinite(n) ? `${(n / 1e6).toFixed(2)} USDC` : "\u2014";
+  };
+  const short = (addr) => addr == null || addr.length < 12 ? addr ?? "\u2014" : `${addr.slice(0, 6)}\u2026${addr.slice(-4)}`;
+  const wallets = new Set(offers.map((o) => o.offer?.workerWallet).filter((w) => typeof w === "string" && w !== ""));
+  const workerCount = wallets.size > 0 ? wallets.size : (status.workers ?? []).length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, maxWidth: 760 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        .gk-net-wrap { position: relative; padding-right: 12px; }
+        .gk-net-models { max-height: min(380px, 48vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+        .gk-net-models::-webkit-scrollbar { display: none; }
+        .gk-net-rail { position: absolute; top: 2px; bottom: 2px; right: 2px; width: 8px; border-radius: 4px; background: rgba(127,137,153,.16); cursor: pointer; }
+        .gk-net-thumb { position: absolute; left: 0; width: 8px; min-height: 16px; border-radius: 4px; background: rgba(127,137,153,.7); }
+        .gk-net-rail:hover .gk-net-thumb { background: rgba(127,137,153,.9); }
+        .gk-net-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 116px; gap: 10px; align-items: center; padding: 7px 0; border-top: 0.5px solid rgba(127,137,153,.18); }
+        .gk-net-row:first-child { border-top: none; }
+      ` }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { margin: 0 }, children: "GenKaKu network" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...dim, marginTop: 4 }, children: status.role ?? "unknown role" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...dim, marginTop: 4 }, children: [
+      "user \xB7 ",
+      status.env ?? "base-sepolia"
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: box, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Peer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: status.peerId ?? "\u2014" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Wallet" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { title: status.wallet, children: short(status.wallet) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Balance" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          eth(status.balances?.eth),
+          " \xB7 ",
+          usdc(status.balances?.usdc)
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Sessions served" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: status.sessions ?? 0 })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Payments" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: status.settle === true ? "escrow enabled" : "free / dev" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Published on-chain" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: status.published === true ? "yes" : "no" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Workers discovered" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: workerCount })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Addresses" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (status.peerAddrs ?? []).length })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: "Models offered" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: offers.length })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: box, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...dim, fontSize: 12, textTransform: "uppercase", letterSpacing: 1 }, children: "Models on the network" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-          .gk-net-models { max-height: min(360px, 45vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; }
-          .gk-net-models::-webkit-scrollbar { width: 10px; }
-          .gk-net-models::-webkit-scrollbar-track { background: transparent; }
-          .gk-net-models::-webkit-scrollbar-thumb { background: rgba(127,137,153,.55); border: 2px solid transparent; border-radius: 6px; background-clip: content-box; }
-        ` }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "gk-net-models", children: offers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { ...dim, marginBottom: 0 }, children: "Nothing offered yet. The worker auto-lists local Ollama models on start." }) : offers.map((offer, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: offer.model ?? "\u2014" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: dim, children: [
-          offer.pricePerHour ?? "?",
-          " / hour",
-          offer.tier === "chat" ? " \xB7 not for agents" : "",
-          offer.addr != null && status.transports?.[offer.addr] === "relay" ? " \xB7 via seed VM" : offer.addr != null && status.transports?.[offer.addr] === "direct" ? " \xB7 direct" : ""
-        ] })
-      ] }, `${offer.model ?? i}`)) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "gk-net-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "gk-net-models", ref: models.attach, onScroll: models.update, children: offers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { ...dim, marginBottom: 0 }, children: "Nothing offered yet. A worker lists its local Ollama models on start." }) : offers.map((entry, i) => {
+          const offer = entry.offer ?? {};
+          const transport = entry.addr == null ? null : status.transports?.[entry.addr];
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "gk-net-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+              offer.model ?? "model name missing",
+              offer.tier === "chat" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...dim, fontSize: 11, marginLeft: 8 }, children: "not for agents" }) : offer.tier != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...dim, fontSize: 11, marginLeft: 8 }, children: offer.tier }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...dim, textAlign: "right", fontSize: 12 }, children: offer.workerName ?? "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { textAlign: "right", fontSize: 12 }, children: [
+              price(offer.pricePerHour),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dim, children: transport === "relay" ? "\xB7 via seed VM" : transport === "direct" ? "\xB7 direct" : "" })
+            ] })
+          ] }, `${entry.addr ?? ""}:${offer.model ?? i}`);
+        }) }),
+        models.thumb != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "gk-net-rail", "aria-hidden": "true", onPointerDown: (e) => models.jump(e), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "gk-net-thumb", style: { top: `${models.thumb.top}%`, height: `${models.thumb.height}%` } }) })
+      ] })
     ] })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genkaku/dsh-user-plugin",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Buy peer-to-peer inference from the GenKaKu network",
   "license": "MIT",
   "type": "module",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@deepseek-ai/dsh-llm": "0.2.2-rc.1",
-    "@genkaku/dsh-runtime": "0.1.19",
+    "@genkaku/dsh-runtime": "0.1.20",
     "@genkaku/protocol": "0.1.13"
   },
   "peerDependencies": {