@decentnetwork/beagle 0.1.17 → 0.1.18

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.16";
+window.__DK_UI_VERSION="0.1.17";
 const ICON_PATHS = {
   // ---- tab bar (the four must feel like one set) ----
   users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
@@ -2822,6 +2822,112 @@ function ProfileTab({ T, me, onEdit }) {
   } }));
 }
 Object.assign(window, { ProfileTab });
+function DkDirAvatar({ p, size }) {
+  const [broken, setBroken] = React.useState(false);
+  if (p.avatar && !broken) {
+    return /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: p.avatar,
+        alt: "",
+        width: size,
+        height: size,
+        onError: () => setBroken(true),
+        style: { width: size, height: size, borderRadius: Math.round(size / 4), objectFit: "cover", flexShrink: 0, background: "var(--panel-2)" }
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(DkIdenticon, { seed: p.userid || p.name, size, radius: Math.round(size / 4) });
+}
+function DkDirRow({ p, T, isFriend, isMe, onAdd, onOpenChat }) {
+  const [state, setState] = React.useState(null);
+  const add = () => {
+    setState("busy");
+    Promise.resolve(onAdd(p.address)).then((r) => setState(r && r.ok === false ? r.error || T.addFailed || "failed" : "sent")).catch((e) => setState(String(e && e.message || e)));
+  };
+  const btn = (label, onClick, disabled) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick,
+      disabled,
+      style: {
+        padding: "5px 11px",
+        borderRadius: 8,
+        border: "1px solid var(--line)",
+        flexShrink: 0,
+        background: disabled ? "transparent" : "var(--accent)",
+        color: disabled ? "var(--faint)" : "#fff",
+        fontFamily: "var(--ui)",
+        fontSize: 12,
+        cursor: disabled ? "default" : "pointer"
+      }
+    },
+    label
+  );
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 11, padding: "var(--row-pad)", borderBottom: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement(DkDirAvatar, { p, size: 34 }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 8, minWidth: 0 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 13.5, fontWeight: 600, color: "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, p.name), p.points != null && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent)", flexShrink: 0 } }, p.points.toLocaleString(), " pts"), p.ens && p.ens !== p.name && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, p.ens)), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 } }, /* @__PURE__ */ React.createElement(Mono, { size: 10.5, dim: true, copy: p.userid, title: p.userid }, shortKey(p.userid, 10, 6)), p.description && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 11, color: "var(--faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, p.description))), isMe ? /* @__PURE__ */ React.createElement(Tag, null, T.dirMe || "me") : isFriend ? btn(T.dirOpenChat || "chat", () => onOpenChat(p.userid), false) : state === "sent" ? /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, T.dirSent || "requested") : state && state !== "busy" ? /* @__PURE__ */ React.createElement("span", { title: state, style: { fontFamily: "var(--ui)", fontSize: 11, color: "var(--warn, #f59e0b)", flexShrink: 0 } }, T.addFailed || "failed") : btn(state === "busy" ? "\u2026" : T.dirAdd || "Add", add, state === "busy"));
+}
+function DiscoverTab({ T, kind, peers, meId, onAdd, onOpenChat }) {
+  const [list, setList] = React.useState(null);
+  const [err, setErr] = React.useState(null);
+  const [q, setQ] = React.useState("");
+  React.useEffect(() => {
+    let dead = false;
+    setList(null);
+    setErr(null);
+    fetch(kind === "recommended" ? "/api/discover-recommended" : "/api/discover-registered").then((r) => r.json()).then((d) => {
+      if (dead)
+        return;
+      if (d.ok)
+        setList(d.list || []);
+      else
+        setErr(d.error || "load failed");
+    }).catch((e) => {
+      if (!dead)
+        setErr(String(e && e.message || e));
+    });
+    return () => {
+      dead = true;
+    };
+  }, [kind]);
+  const friendIds = React.useMemo(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const p of peers || []) {
+      if (p.id)
+        s.add(p.id);
+      if (p.userId)
+        s.add(p.userId);
+    }
+    return s;
+  }, [peers]);
+  const shown = React.useMemo(() => {
+    if (!list)
+      return [];
+    const needle = q.trim().toLowerCase();
+    if (!needle)
+      return list;
+    return list.filter((p) => (p.name || "").toLowerCase().includes(needle) || (p.ens || "").toLowerCase().includes(needle) || (p.userid || "").toLowerCase().includes(needle));
+  }, [list, q]);
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { style: { flexShrink: 0, display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderBottom: "1px solid var(--line)", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "search", size: 15, stroke: 2, color: "var(--faint)" }), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      value: q,
+      onChange: (e) => setQ(e.target.value),
+      placeholder: T.dirSearch || "search name / userid",
+      style: { flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontFamily: "var(--ui)", fontSize: 13 }
+    }
+  ), list && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, shown.length, "/", list.length)), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" } }, err ? /* @__PURE__ */ React.createElement("div", { style: { padding: 22, fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, (T.dirError || "Could not load the directory:") + " " + err) : !list ? /* @__PURE__ */ React.createElement("div", { style: { padding: 22, fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, T.dirLoading || "loading\u2026") : shown.length === 0 ? /* @__PURE__ */ React.createElement("div", { style: { padding: 22, fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, T.dirEmpty || "nobody here") : shown.map((p) => /* @__PURE__ */ React.createElement(
+    DkDirRow,
+    {
+      key: p.userid,
+      p,
+      T,
+      isMe: !!meId && p.userid === meId,
+      isFriend: friendIds.has(p.userid),
+      onAdd,
+      onOpenChat
+    }
+  ))));
+}
 const DK_FILE_RTC_KIND = "file";
 const DK_FILE_RTC_CHUNK = 16 * 1024;
 const DK_FILE_RTC_OPEN_TIMEOUT_MS = 2e4;
@@ -3645,6 +3751,16 @@ const STR = {
     chat: "Chat",
     network: "Network",
     profile: "Profile",
+    recommended: "Discover",
+    registered: "Names",
+    dirAdd: "Add",
+    dirSent: "requested",
+    dirOpenChat: "chat",
+    dirMe: "me",
+    dirSearch: "search name / userid\u2026",
+    dirLoading: "loading directory\u2026",
+    dirEmpty: "nobody matches",
+    dirError: "Could not load the directory:",
     addPlaceholder: "paste a friend's carrier address\u2026",
     add: "Add",
     search: "search peers / ip\u2026",
@@ -3746,6 +3862,16 @@ const STR = {
     chat: "\u804A\u5929",
     network: "\u7F51\u7EDC",
     profile: "\u6211\u7684",
+    recommended: "\u63A8\u8350",
+    registered: "\u540D\u5F55",
+    dirAdd: "\u52A0\u597D\u53CB",
+    dirSent: "\u5DF2\u8BF7\u6C42",
+    dirOpenChat: "\u4F1A\u8BDD",
+    dirMe: "\u6211",
+    dirSearch: "\u641C\u7D22\u540D\u5B57 / userid\u2026",
+    dirLoading: "\u6B63\u5728\u52A0\u8F7D\u540D\u5355\u2026",
+    dirEmpty: "\u6CA1\u6709\u5339\u914D\u7684\u4EBA",
+    dirError: "\u540D\u5355\u52A0\u8F7D\u5931\u8D25\uFF1A",
     addPlaceholder: "\u7C98\u8D34\u597D\u53CB\u7684 carrier \u5730\u5740\u2026",
     add: "\u6DFB\u52A0",
     search: "\u641C\u7D22\u597D\u53CB / IP\u2026",
@@ -4035,10 +4161,12 @@ function DkApp() {
   const onOpenNet = () => setTab("network");
   const nav = [
     { id: "chat", icon: "message", label: T.chat },
+    { id: "recommended", icon: "sparkles", label: T.recommended },
+    { id: "registered", icon: "at", label: T.registered },
     { id: "network", icon: "network", label: T.network },
     { id: "profile", icon: "userRound", label: T.profile }
   ];
-  return /* @__PURE__ */ React.createElement("div", { style: { ...vars, "--row-pad": rowPad, position: "fixed", inset: 0, display: "flex", background: "var(--bg)", color: "var(--text)", fontFamily: "var(--ui)" } }, /* @__PURE__ */ React.createElement("div", { style: { width: 68, flexShrink: 0, borderRight: "1px solid var(--line)", background: "var(--rail)", display: "flex", flexDirection: "column", alignItems: "center", padding: "14px 0", gap: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { width: 38, height: 38, borderRadius: 10, background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 8 } }, /* @__PURE__ */ React.createElement(Icon, { name: "terminal", size: 20, color: "#fff", stroke: 2.2 })), nav.map((n) => /* @__PURE__ */ React.createElement(RailBtn, { key: n.id, icon: n.icon, label: n.label, active: tab === n.id, soon: n.soon, onClick: () => setTab(n.id) })), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: { ...me, id: me.userId, agent: false }, size: 36, radius: 9 }))), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement("div", { style: { height: 46, flexShrink: 0, borderBottom: "1px solid var(--line)", background: "var(--panel)", display: "flex", alignItems: "center", gap: 12, padding: "0 16px" } }, /* @__PURE__ */ React.createElement("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "var(--accent)", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", style: { display: "block", flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "m4.5 17 6-6-6-6" }), /* @__PURE__ */ React.createElement("path", { d: "M12 18.5h7.5" })), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 14, fontWeight: 700, letterSpacing: -0.3, color: "var(--text)" } }, "beagle"), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12, color: "var(--faint)" } }, "\xB7 ", nav.find((n) => n.id === tab).label.toLowerCase()), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, me.channel, " \xB7 lan ", me.lanVer), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 7, padding: "0 4px" } }, /* @__PURE__ */ React.createElement(StatusDot, { online: me.online }), /* @__PURE__ */ React.createElement(Mono, { size: 12.5, copy: me.ip }, me.ip)), /* @__PURE__ */ React.createElement("span", { style: { width: 1, height: 22, background: "var(--line)" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: { ...me, id: me.userId, agent: false }, size: 26, radius: 7 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 600, color: "var(--text)" } }, me.name))), tab === "chat" && /* @__PURE__ */ React.createElement(ChatTab, { T, lang: t.lang, peers, requests, activeId, thread: data.threads[activeId], onSelect, onAct, onAdd, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread: () => activeId && data.loadThread(activeId), prefillAddr: pendingAddr, onPrefillConsumed: () => setPendingAddr("") }), tab === "network" && /* @__PURE__ */ React.createElement(NetworkTab, { T, me, peers, exits, activeExit, reqCount: requests.length, onSetExit, onOpenChat, backend, onArmLan: armLan, onCancelLan: cancelLan }), tab === "profile" && /* @__PURE__ */ React.createElement(ProfileTab, { T, me, onEdit })), /* @__PURE__ */ React.createElement(TweaksPanel, null, /* @__PURE__ */ React.createElement(TweakSection, { label: t.lang === "zh" ? "\u5916\u89C2" : "Appearance" }), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { style: { ...vars, "--row-pad": rowPad, position: "fixed", inset: 0, display: "flex", background: "var(--bg)", color: "var(--text)", fontFamily: "var(--ui)" } }, /* @__PURE__ */ React.createElement("div", { style: { width: 68, flexShrink: 0, borderRight: "1px solid var(--line)", background: "var(--rail)", display: "flex", flexDirection: "column", alignItems: "center", padding: "14px 0", gap: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { width: 38, height: 38, borderRadius: 10, background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 8 } }, /* @__PURE__ */ React.createElement(Icon, { name: "terminal", size: 20, color: "#fff", stroke: 2.2 })), nav.map((n) => /* @__PURE__ */ React.createElement(RailBtn, { key: n.id, icon: n.icon, label: n.label, active: tab === n.id, soon: n.soon, onClick: () => setTab(n.id) })), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: { ...me, id: me.userId, agent: false }, size: 36, radius: 9 }))), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement("div", { style: { height: 46, flexShrink: 0, borderBottom: "1px solid var(--line)", background: "var(--panel)", display: "flex", alignItems: "center", gap: 12, padding: "0 16px" } }, /* @__PURE__ */ React.createElement("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "var(--accent)", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", style: { display: "block", flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "m4.5 17 6-6-6-6" }), /* @__PURE__ */ React.createElement("path", { d: "M12 18.5h7.5" })), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 14, fontWeight: 700, letterSpacing: -0.3, color: "var(--text)" } }, "beagle"), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12, color: "var(--faint)" } }, "\xB7 ", nav.find((n) => n.id === tab).label.toLowerCase()), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, me.channel, " \xB7 lan ", me.lanVer), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 7, padding: "0 4px" } }, /* @__PURE__ */ React.createElement(StatusDot, { online: me.online }), /* @__PURE__ */ React.createElement(Mono, { size: 12.5, copy: me.ip }, me.ip)), /* @__PURE__ */ React.createElement("span", { style: { width: 1, height: 22, background: "var(--line)" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: { ...me, id: me.userId, agent: false }, size: 26, radius: 7 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 600, color: "var(--text)" } }, me.name))), tab === "chat" && /* @__PURE__ */ React.createElement(ChatTab, { T, lang: t.lang, peers, requests, activeId, thread: data.threads[activeId], onSelect, onAct, onAdd, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread: () => activeId && data.loadThread(activeId), prefillAddr: pendingAddr, onPrefillConsumed: () => setPendingAddr("") }), tab === "recommended" && /* @__PURE__ */ React.createElement(DiscoverTab, { T, kind: "recommended", peers, meId: me.userId, onAdd, onOpenChat }), tab === "registered" && /* @__PURE__ */ React.createElement(DiscoverTab, { T, kind: "registered", peers, meId: me.userId, onAdd, onOpenChat }), tab === "network" && /* @__PURE__ */ React.createElement(NetworkTab, { T, me, peers, exits, activeExit, reqCount: requests.length, onSetExit, onOpenChat, backend, onArmLan: armLan, onCancelLan: cancelLan }), tab === "profile" && /* @__PURE__ */ React.createElement(ProfileTab, { T, me, onEdit })), /* @__PURE__ */ React.createElement(TweaksPanel, null, /* @__PURE__ */ React.createElement(TweakSection, { label: t.lang === "zh" ? "\u5916\u89C2" : "Appearance" }), /* @__PURE__ */ React.createElement(
     TweakRadio,
     {
       label: t.lang === "zh" ? "\u4E3B\u9898" : "Theme",

package/dist/server.js

@@ -29,6 +29,28 @@ const DESKTOP_DIR = join(dirname(fileURLToPath(import.meta.url)), "desktop");
 // (which probes all exits on each poll) stays responsive over a lossy mesh.
 const EXIT_PROBE_PORT = 8888;
 const EXIT_PROBE_TIMEOUT_MS = 2000;
+/** Server-side fetch for the discovery directories (leaderboard / ENS names),
+ *  with a small TTL cache so tab switches don't hammer the upstreams. */
+const DISCOVER_CACHE_TTL_MS = 5 * 60_000;
+const discoverCache = new Map();
+async function fetchDiscoverJson(url) {
+    const hit = discoverCache.get(url);
+    if (hit && Date.now() - hit.at < DISCOVER_CACHE_TTL_MS)
+        return hit.body;
+    const ctl = new AbortController();
+    const timer = setTimeout(() => ctl.abort(), 10_000);
+    try {
+        const r = await fetch(url, { signal: ctl.signal });
+        if (!r.ok)
+            throw new Error(`upstream ${r.status}`);
+        const body = await r.json();
+        discoverCache.set(url, { at: Date.now(), body });
+        return body;
+    }
+    finally {
+        clearTimeout(timer);
+    }
+}
 /** True only when the request came from the local machine. Used to gate the
  *  "Sign in with Decent" routes so binding the UI to a LAN IP can't expose
  *  identity signing to other hosts. The popup always runs in the local user's
@@ -619,6 +641,50 @@ export function startBeagleServer(opts) {
                 sendJson(res, 200, { friends });
                 return;
             }
+            // People-discovery directories, proxied server-side: the browser can't
+            // fetch these origins (CORS), and the cache keeps us polite upstream.
+            // recommended = points leaderboard; registered = mobile-app ENS names.
+            if (req.method === "GET" && url === "/api/discover-recommended") {
+                try {
+                    const raw = (await fetchDiscoverJson("https://points.beagle.chat/leaderboard"));
+                    const list = (Array.isArray(raw) ? raw : [])
+                        .map((e) => ({
+                        userid: typeof e.account === "string" ? e.account : "",
+                        address: typeof e.carrier_address === "string" ? e.carrier_address : "",
+                        name: (typeof e.name === "string" && e.name) || (typeof e.ens_name === "string" && e.ens_name) || "",
+                        avatar: typeof e.avatar === "string" && /^https:\/\//.test(e.avatar) ? e.avatar : null,
+                        points: typeof e.points === "number" ? e.points : null,
+                    }))
+                        .filter((e) => e.userid && e.address);
+                    sendJson(res, 200, { ok: true, list });
+                }
+                catch (err) {
+                    sendJson(res, 502, { ok: false, error: String(err?.message ?? err) });
+                }
+                return;
+            }
+            if (req.method === "GET" && url === "/api/discover-registered") {
+                try {
+                    const raw = (await fetchDiscoverJson("https://ens-gateway.beaglechat.workers.dev/names"));
+                    const list = Object.entries(raw && typeof raw === "object" ? raw : {})
+                        .map(([ens, v]) => {
+                        const t = v?.texts ?? {};
+                        return {
+                            userid: t.carrierUserId ?? "",
+                            address: t.carrierAddress ?? "",
+                            name: t.displayName || ens,
+                            ens,
+                            description: t.description || null,
+                        };
+                    })
+                        .filter((e) => e.userid && e.address);
+                    sendJson(res, 200, { ok: true, list });
+                }
+                catch (err) {
+                    sendJson(res, 502, { ok: false, error: String(err?.message ?? err) });
+                }
+                return;
+            }
             // One bootstrap call for the desktop UI: composes the design's DK_*
             // shapes (me / peers / requests / exits) from diag + friends-list +
             // ipam + routes, so the client data layer is a single poll.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Beagle — P2P chat, file transfer and calls for regular users, on the Decent Network. No admin privilege required.",
   "type": "module",
   "main": "./dist/index.js",