@genkaku/dsh-worker-plugin 0.1.21 → 0.1.23

package/lib/client.js

@@ -91,6 +91,37 @@ var PANEL_CSS = `
 .gk-price input { text-align: right; }
 .gk-pull { width: 260px; max-width: 100%; }
 .gk-muted { color: var(--dsw-alias-label-tertiary); font-size: 12px; }
+/* The panel can hold every model Ollama has (two dozen is normal). A bounded
+   list keeps the download box, Save and the Worker section reachable.
+   macOS auto-hides native scrollbars (and Chromium screenshots never paint
+   them), so the bar is drawn by us: always visible, and click-to-jump. */
+.gk-models-wrap { position: relative; padding-right: 12px; }
+.gk-models {
+  max-height: min(420px, 45vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+.gk-models::-webkit-scrollbar { display: none; }
+.gk-rail {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  right: 2px;
+  width: 8px;
+  border-radius: 4px;
+  background: rgba(127,137,153,.16);
+  cursor: pointer;
+}
+.gk-thumb {
+  position: absolute;
+  left: 0;
+  width: 8px;
+  min-height: 16px;
+  border-radius: 4px;
+  background: rgba(127,137,153,.7);
+}
+.gk-rail:hover .gk-thumb { background: rgba(127,137,153,.9); }
 `;
 function Icon({ size = 16 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", width: size, height: size }, "aria-hidden": "true", children: [
@@ -135,6 +166,44 @@ function seedDraft(status) {
 function draftSignature(draft) {
   return Object.entries(draft).map(([model, price]) => `${model}=${price}`).sort().join("|");
 }
+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 Section({ title, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: box, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: caption, children: title }),
@@ -152,6 +221,7 @@ function Page() {
   const [pullModel, setPullModel] = (0, import_react.useState)("");
   const [pull, setPull] = (0, import_react.useState)(null);
   const seeded = (0, import_react.useRef)(false);
+  const models = useScrollThumb();
   const [origin, setOrigin] = (0, import_react.useState)(originOf(CANDIDATE_PORTS[0]));
   const originRef = (0, import_react.useRef)(origin);
   originRef.current = origin;
@@ -451,53 +521,64 @@ function Page() {
         "\u672A\u52FE\u9078\u7684\u6A21\u578B\u4ECD\u7559\u5728\u672C\u6A5F\uFF0C\u4F46\u4E0D\u6703\u4E0A\u67B6\u3002\u50F9\u683C\u70BA\u6BCF\u5C0F\u6642 USDC\uFF1B0 \u8868\u793A\u514D\u8CBB\u3002"
       ) }),
       names.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: dim, children: t("No local models yet. Download one below.", "\u672C\u6A5F\u9084\u6C92\u6709\u6A21\u578B\uFF0C\u53EF\u5728\u4E0B\u65B9\u4E0B\u8F09\u3002") }),
-      names.map((name) => {
-        const on = name in offered;
-        const tier = tierOf.get(name);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "gk-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              type: "checkbox",
-              checked: on,
-              "aria-label": name,
-              onChange: () => {
-                toggleOffer(name);
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
-            name,
-            tier !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...dim, fontSize: 11, marginLeft: 8 }, children: tier === "chat" ? t("not for agents", "\u4E0D\u9069\u7528\u65BC agent") : tier })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "gk-muted", style: { textAlign: "right" }, children: gb(sizeOf.get(name)) }),
-          on ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "gk-models-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "gk-models", ref: models.attach, onScroll: models.update, children: names.map((name) => {
+          const on = name in offered;
+          const tier = tierOf.get(name);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "gk-row", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_dsh_client_ui_primitives.Input,
+              "input",
               {
-                className: "gk-price",
-                value: offered[name] ?? "",
-                inputMode: "decimal",
-                "aria-label": t(`Price per hour for ${name}`, `${name} \u6BCF\u5C0F\u6642\u50F9\u683C`),
-                onChange: (e) => setDraft({ ...draft ?? {}, [name]: e.target.value })
+                type: "checkbox",
+                checked: on,
+                "aria-label": name,
+                onChange: () => {
+                  toggleOffer(name);
+                }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "gk-muted", children: "/h" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_dsh_client_ui_primitives.Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              disabled: busy === `remove:${name}`,
-              onClick: () => {
-                void removeModel(name);
-              },
-              children: t("delete", "\u522A\u9664")
-            }
-          )
-        ] }, name);
-      }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+              name,
+              tier !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...dim, fontSize: 11, marginLeft: 8 }, children: tier === "chat" ? t("not for agents", "\u4E0D\u9069\u7528\u65BC agent") : tier })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "gk-muted", style: { textAlign: "right" }, children: gb(sizeOf.get(name)) }),
+            on ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_dsh_client_ui_primitives.Input,
+                {
+                  className: "gk-price",
+                  value: offered[name] ?? "",
+                  inputMode: "decimal",
+                  "aria-label": t(`Price per hour for ${name}`, `${name} \u6BCF\u5C0F\u6642\u50F9\u683C`),
+                  onChange: (e) => setDraft({ ...draft ?? {}, [name]: e.target.value })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "gk-muted", children: "/h" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_dsh_client_ui_primitives.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                disabled: busy === `remove:${name}`,
+                onClick: () => {
+                  void removeModel(name);
+                },
+                children: t("delete", "\u522A\u9664")
+              }
+            )
+          ] }, name);
+        }) }),
+        models.thumb != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "gk-rail",
+            "aria-hidden": "true",
+            onPointerDown: (e) => models.jump(e),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "gk-thumb", style: { top: `${models.thumb.top}%`, height: `${models.thumb.height}%` } })
+          }
+        )
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...row, justifyContent: "flex-start", gap: 8, marginTop: 12 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_dsh_client_ui_primitives.Input,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genkaku/dsh-worker-plugin",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Share this machine's Ollama models on the GenKaKu network",
   "license": "MIT",
   "type": "module",