@decentnetwork/beagle-ui 0.2.35 → 0.2.37

package/dist/beagle-ui.js

@@ -1,4 +1,4 @@
-export const BEAGLE_UI_VERSION = "0.2.35";
+export const BEAGLE_UI_VERSION = "0.2.37";
 // src/icons.jsx
 var ICON_PATHS = {
   // ---- tab bar (the four must feel like one set) ----
@@ -276,7 +276,7 @@ function collapseProtocol(thread, isProto, lang) {
   };
   (thread || []).forEach((m, i) => {
     const hit = m && !m.day ? isProto({ text: m.text, dir: m && m.from === "me" ? "out" : "in", ts: m && m.ts }) : false;
-    if (!hit || m && m.file) {
+    if (!hit || m && (m.file || m.kind === "friend-request")) {
       flush();
       out.push(m);
       return;
@@ -448,6 +448,10 @@ var dkApi = {
   cancelSend: (userid, ids) => dkPost("/api/file-cancel", { userid, ids }),
   retrySend: (userid, ids) => dkPost("/api/file-retry", { userid, ids }),
   setProfile: (name, description) => dkPost("/api/set-profile", { name, description }),
+  // Probe a failed exit once, now (or every failed exit with all=true). Exits
+  // that failed three times in a row are never probed again on their own.
+  reconnectExit: (ip) => dkPost("/api/exits/reconnect", { ip }),
+  reconnectAllExits: () => dkPost("/api/exits/reconnect", { all: true }),
   // Used by the browser's welcome flow, which also picks an avatar and marks
   // first run done. Harmless where there is no welcome flow: nothing calls it.
   setProfileFull: (p) => dkPost("/api/set-profile", p),
@@ -535,7 +539,10 @@ function dkThreadMsg(m) {
     // Brief 30: a validated component form, already whitelisted host-side.
     // Passed through untouched — the renderer treats every string as text,
     // never markup.
-    components: m.components
+    components: m.components,
+    // 'friend-request': the accepted request's greeting, merged in by the
+    // host (beagle's friend-greetings.ts); chat.jsx draws its own bubble.
+    kind: m.kind
   };
 }
 var DK_TAIL_MIN = 30;
@@ -580,22 +587,27 @@ function useProtocolTails(peers, isProtocol, enabled) {
   }, [peers, isProtocol, enabled]);
   return fixes;
 }
-function useDaemonData() {
+function useDaemonData(opts) {
+  const wantExits = !!(opts && opts.exits);
+  const wantExitsRef = React.useRef(wantExits);
+  wantExitsRef.current = wantExits;
   const [snap, setSnap] = React.useState({
     me: DK_ME_FALLBACK,
     peers: [],
     requests: [],
     exits: [],
     activeExit: null,
+    exitFeature: null,
+    routeFallback: null,
     loaded: false,
     locked: false
   });
   const [threads, setThreads] = React.useState({});
   const refreshRef = React.useRef(null);
   const refresh = React.useCallback(async () => {
-    var _a;
+    var _a, _b, _c;
     try {
-      const d = await dkGet("/api/desktop");
+      const d = await dkGet(wantExitsRef.current ? "/api/desktop?exits=1" : "/api/desktop");
       if (d && d.locked) {
         setSnap((s) => ({ ...s, locked: true, loaded: true }));
         return;
@@ -613,6 +625,8 @@ function useDaemonData() {
         requests: d.requests || [],
         exits: d.exits || [],
         activeExit: (_a = d.activeExit) != null ? _a : null,
+        exitFeature: (_b = d.exitFeature) != null ? _b : null,
+        routeFallback: (_c = d.routeFallback) != null ? _c : null,
         loaded: true
       });
     } catch (e) {
@@ -624,6 +638,10 @@ function useDaemonData() {
     const t = setInterval(refresh, 2500);
     return () => clearInterval(t);
   }, [refresh]);
+  React.useEffect(() => {
+    if (wantExits)
+      refresh();
+  }, [wantExits, refresh]);
   const inFlight = React.useRef(/* @__PURE__ */ new Set());
   const cache = React.useRef({});
   const [earlier, setEarlier] = React.useState({});
@@ -632,15 +650,23 @@ function useDaemonData() {
     if (!c)
       return;
     const arr = [...c.byId.values()].sort((a, b) => a.ts - b.ts);
-    const msgs = arr.map(dkThreadMsg);
-    const withDay = msgs.length ? [{ day: dkDayLabel(arr[0].ts) }].concat(msgs) : [];
+    const withDay = [];
+    let lastDay = null;
+    for (const m of arr) {
+      const day = dkDayLabel(m.ts);
+      if (day !== lastDay) {
+        withDay.push({ day });
+        lastDay = day;
+      }
+      withDay.push(dkThreadMsg(m));
+    }
     setThreads((t) => Object.assign({}, t, { [peerId]: withDay }));
     setEarlier((e) => e[peerId] === c.more ? e : Object.assign({}, e, { [peerId]: c.more }));
   }, []);
-  const loadThread = React.useCallback(async (peerId, opts) => {
+  const loadThread = React.useCallback(async (peerId, opts2) => {
     if (!peerId)
       return;
-    if (opts && opts.reset)
+    if (opts2 && opts2.reset)
       delete cache.current[peerId];
     if (inFlight.current.has(peerId))
       return;
@@ -1745,6 +1771,27 @@ function requestAvatarSource(r, skipUrl = false) {
   return { kind: "ens" };
 }
 
+// src/request-greeting.js
+var REQUEST_TRANSPORTS = ["lan", "carrier", "direct", "relay", "express", "webrtc", "online", "offline", "tcp", "udp", "p2p"];
+function unquote(s) {
+  const m = /^"([\s\S]*)"$/.exec(s);
+  return m ? m[1] : s;
+}
+function requestGreeting(r) {
+  const hello = r && typeof r.hello === "string" ? r.hello.trim() : "";
+  const via = r && typeof r.via === "string" ? r.via.trim() : "";
+  const isTransport = !!via && REQUEST_TRANSPORTS.includes(via.toLowerCase());
+  const isName = !!via && !!r && typeof r.name === "string" && r.name.trim() === via;
+  return {
+    greeting: hello || (via && !isTransport && !isName ? unquote(via).trim() : ""),
+    transport: isTransport ? via : ""
+  };
+}
+var GREETING_KIND = "friend-request";
+function isGreetingItem(m) {
+  return !!m && m.kind === GREETING_KIND;
+}
+
 // src/chat.jsx
 var DK_CMD_HIST_KEY = "beagle.assistant.history";
 var DK_CMD_HIST_MAX = 50;
@@ -1797,7 +1844,7 @@ function RequestsBlock({ T, requests, onAct }) {
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
-  } }, r.name) : /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)", fontStyle: "italic" } }, T.noName || "no name given"), /* @__PURE__ */ React.createElement(Mono, { size: 11, copy: r.carrier, title: r.carrier }, shortKey(r.carrier, 8, 6)), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)", marginTop: 2 } }, "via ", r.via, " \xB7 ", r.time))), r.descr && /* @__PURE__ */ React.createElement("div", { style: {
+  } }, r.name) : /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)", fontStyle: "italic" } }, T.noName || "no name given"), /* @__PURE__ */ React.createElement(Mono, { size: 11, copy: r.carrier, title: r.carrier }, shortKey(r.carrier, 8, 6)), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)", marginTop: 2 } }, requestGreeting(r).transport ? "via " + requestGreeting(r).transport + " \xB7 " : "", r.time))), /* @__PURE__ */ React.createElement(DkRequestGreeting, { T, text: requestGreeting(r).greeting }), r.descr && /* @__PURE__ */ React.createElement("div", { style: {
     fontFamily: "var(--ui)",
     fontSize: 12,
     color: "var(--dim, var(--faint))",
@@ -1806,6 +1853,76 @@ function RequestsBlock({ T, requests, onAct }) {
     paddingLeft: 8
   } }, r.descr), failed[r.id] && /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 11, color: "var(--danger)" } }, failed[r.id]), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6 } }, /* @__PURE__ */ React.createElement(Btn, { tone: "ok", icon: "check", size: "sm", onClick: () => act(r, "accept"), style: { flex: 1 } }, T.accept), /* @__PURE__ */ React.createElement(Btn, { tone: "danger", icon: "x", size: "sm", onClick: () => act(r, "reject"), style: { flex: 1 } }, T.reject))))));
 }
+function DkRequestGreeting({ T, text }) {
+  const [open, setOpen] = React.useState(false);
+  const [clipped, setClipped] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (el && !open)
+      setClipped(el.scrollHeight > el.clientHeight + 1);
+  }, [text, open]);
+  if (!text)
+    return null;
+  const toggle = () => {
+    try {
+      const sel = window.getSelection && window.getSelection();
+      if (sel && String(sel).length)
+        return;
+    } catch (e) {
+    }
+    if (clipped || open)
+      setOpen((o) => !o);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: toggle,
+      title: !open && clipped ? T.showAll || "show all" : void 0,
+      style: { cursor: clipped || open ? "pointer" : "text" }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { background: "var(--bub-them)", border: "1px solid var(--line)", borderRadius: 8, padding: "6px 9px" } }, /* @__PURE__ */ React.createElement("div", { ref, style: {
+      fontFamily: "var(--ui)",
+      fontSize: 12.5,
+      color: "var(--text)",
+      lineHeight: 1.45,
+      whiteSpace: "pre-wrap",
+      overflowWrap: "anywhere",
+      userSelect: "text",
+      WebkitUserSelect: "text",
+      ...open ? { maxHeight: 240, overflowY: "auto" } : { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }
+    } }, text)),
+    (clipped || open) && /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 11, color: "var(--accent)", marginTop: 3 } }, open ? T.showLess || "show less" : T.showAll || "show all")
+  );
+}
+function DkGreetingMsg({ m, peer, T }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "flex-start", alignItems: "flex-end", gap: 8, margin: "3px 0 10px" } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }), /* @__PURE__ */ React.createElement("div", { style: {
+    maxWidth: "75%",
+    padding: "8px 12px",
+    borderRadius: 12,
+    borderBottomLeftRadius: 4,
+    background: "var(--panel-2)",
+    border: "1px dashed var(--accent)",
+    color: "var(--text)"
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    marginBottom: 4,
+    fontFamily: "var(--mono)",
+    fontSize: 10.5,
+    color: "var(--accent)",
+    fontWeight: 600
+  } }, /* @__PURE__ */ React.createElement(Icon, { name: "userPlus", size: 12, stroke: 2.2, color: "var(--accent)" }), /* @__PURE__ */ React.createElement("span", null, T.friendRequestItem || "Friend request"), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--faint)", fontWeight: 400 } }, "\xB7 ", m.time)), /* @__PURE__ */ React.createElement("div", { style: {
+    fontFamily: "var(--ui)",
+    fontSize: 13.5,
+    lineHeight: 1.5,
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+    userSelect: "text",
+    WebkitUserSelect: "text"
+  } }, m.text)));
+}
 function DkRequestAvatar({ r, size, radius }) {
   const [urlBroken, setUrlBroken] = React.useState(false);
   const url = requestAvatarUrl(r);
@@ -2580,7 +2697,12 @@ function DkChatForm({ form, submitted, peer, onSubmit }) {
     return null;
   }), err && /* @__PURE__ */ React.createElement("div", { style: { color: "var(--danger, #ff6b6b)", fontSize: 11.5, fontFamily: "var(--mono)" } }, err));
 }
-function Msg({ m, peer, T, lang, onTheater, onDelete, onCancel, onRetry, onRetryMsg, onReveal, onOpenFile, onCall, onFormSubmit, onNameCard, onAssistantRemove, onAssistantAdopt, answered, selMode, selected, onToggleSel, busy, isGroup }) {
+function Msg(props) {
+  if (isGreetingItem(props.m))
+    return /* @__PURE__ */ React.createElement(DkGreetingMsg, { m: props.m, peer: props.peer, T: props.T });
+  return /* @__PURE__ */ React.createElement(DkMsgBody, { ...props });
+}
+function DkMsgBody({ m, peer, T, lang, onTheater, onDelete, onCancel, onRetry, onRetryMsg, onReveal, onOpenFile, onCall, onFormSubmit, onNameCard, onAssistantRemove, onAssistantAdopt, answered, selMode, selected, onToggleSel, busy, isGroup }) {
   const mine = m.from === "me";
   const nativeMedia = !m.file ? dkNativeMediaFromText(m.text) : null;
   const grp = isGroup && m.dir !== "out" && !m.file && !nativeMedia ? dkGroupParse(m.text) : null;
@@ -6054,15 +6176,40 @@ function PeerTable({ T, peers, onOpenChat }) {
     borderBottom: i < peers.length - 1 ? "1px solid var(--line)" : "none"
   } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: p, size: 26, radius: 6 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: p.alias ? "var(--ui)" : "var(--mono)", fontSize: 13, fontWeight: 600, color: "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, p.alias || shortKey(p.userId, 8, 5)), p.agent && /* @__PURE__ */ React.createElement(Icon, { name: "bot", size: 12, color: "var(--faint)", stroke: 2 })), /* @__PURE__ */ React.createElement(Mono, { size: 12.5, dim: true, copy: p.ip }, p.ip), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(RouteTag, { peer: p })), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: p.wire === "64" ? "var(--warn)" : "var(--dim)" } }, p.wire === "64" ? "old\xB764" : "new\xB7163"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6 } }, /* @__PURE__ */ React.createElement(Btn, { icon: "message", size: "sm", title: T.openChat, onClick: () => onOpenChat(p.id) }), /* @__PURE__ */ React.createElement(Btn, { icon: "signal", size: "sm", title: T.ping })))));
 }
-function ExitCard({ T, region, activeExit, onSetExit }) {
+function ReconnectBtn({ T, ip, onReconnect, label, icon = "refresh" }) {
+  const [busy, setBusy] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(
+    Btn,
+    {
+      size: "sm",
+      icon,
+      disabled: busy,
+      onClick: async () => {
+        if (busy || !onReconnect)
+          return;
+        setBusy(true);
+        try {
+          await onReconnect(ip);
+        } finally {
+          setBusy(false);
+        }
+      }
+    },
+    busy ? T.exitChecking || "checking\u2026" : label || T.exitReconnect || "Reconnect"
+  );
+}
+function ExitCard({ T, region, activeExit, onSetExit, onReconnect, featureOn }) {
   return /* @__PURE__ */ React.createElement("div", { style: { borderRadius: 11, border: "1px solid var(--line)", overflow: "hidden", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderBottom: "1px solid var(--line)", background: "var(--panel-2)" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700, letterSpacing: 0.5, padding: "2px 7px", borderRadius: 5, background: "var(--chip)", color: "var(--dim)" } }, region.flag), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 13.5, fontWeight: 600, color: "var(--text)" } }, region.label), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), (() => {
     const reach = region.nodes.filter((n) => n.reachable).length;
-    const down = region.nodes.length - reach;
-    return /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: down > 0 ? "var(--warn)" : "var(--faint)" } }, reach, "/", region.nodes.length, " ", T.up, down > 0 ? ` \xB7 ${down} down` : "");
+    const failed = region.nodes.filter((n) => n.status === "failed").length;
+    const down = region.nodes.length - reach - failed;
+    return /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: down + failed > 0 ? "var(--warn)" : "var(--faint)" } }, reach, "/", region.nodes.length, " ", T.up, failed > 0 ? ` \xB7 ${failed} ${T.exitFailed || "failed"}` : "", down > 0 ? ` \xB7 ${down} down` : "");
   })()), /* @__PURE__ */ React.createElement("div", null, region.nodes.map((n, i) => {
     const active = n.ip === activeExit;
     const stuck = n.online && !n.reachable;
-    return /* @__PURE__ */ React.createElement("div", { key: n.ip, className: "dk-wrap", style: { display: "flex", alignItems: "center", gap: 12, rowGap: 6, padding: "10px 14px", borderBottom: i < region.nodes.length - 1 ? "1px solid var(--line)" : "none", background: active ? "color-mix(in oklab, var(--accent), transparent 92%)" : "transparent" } }, /* @__PURE__ */ React.createElement(StatusDot, { online: n.reachable }), /* @__PURE__ */ React.createElement(Mono, { size: 13, copy: n.ip }, n.ip), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, n.host), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), n.reachable ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: n.ping > 200 ? "var(--warn)" : "var(--dim)" } }, n.ping, "ms") : stuck ? /* @__PURE__ */ React.createElement(Tag, { tone: "warn", title: "Announces online but IP won't pass \u2014 session desync or NAT-blocked" }, "online \xB7 no route") : /* @__PURE__ */ React.createElement(Tag, { tone: "off" }, "offline"), active ? /* @__PURE__ */ React.createElement(Btn, { tone: "ok", icon: "check", size: "sm", onClick: () => onSetExit(null) }, T.routing) : /* @__PURE__ */ React.createElement(Btn, { size: "sm", icon: "route", onClick: () => n.reachable && onSetExit(n.ip), style: { opacity: n.reachable ? 1 : 0.4 } }, T.routeThru));
+    const failed = n.status === "failed";
+    const usable = n.reachable && featureOn !== false;
+    return /* @__PURE__ */ React.createElement("div", { key: n.ip, className: "dk-wrap", style: { display: "flex", alignItems: "center", gap: 12, rowGap: 6, padding: "10px 14px", borderBottom: i < region.nodes.length - 1 ? "1px solid var(--line)" : "none", background: active ? "color-mix(in oklab, var(--accent), transparent 92%)" : "transparent" } }, /* @__PURE__ */ React.createElement(StatusDot, { online: n.reachable }), /* @__PURE__ */ React.createElement(Mono, { size: 13, copy: n.ip }, n.ip), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, n.host), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), n.reachable ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: n.ping > 200 ? "var(--warn)" : "var(--dim)" } }, n.ping, "ms") : failed ? /* @__PURE__ */ React.createElement(Tag, { tone: "danger", title: "Failed 3 checks in a row \u2014 no longer checked automatically" }, T.exitFailed || "failed") : n.status === "unknown" ? /* @__PURE__ */ React.createElement(Tag, { tone: "off" }, T.exitNotChecked || "not checked") : stuck ? /* @__PURE__ */ React.createElement(Tag, { tone: "warn", title: "Announces online but IP won't pass \u2014 session desync or NAT-blocked" }, "online \xB7 no route") : n.status === "retrying" ? /* @__PURE__ */ React.createElement(Tag, { tone: "warn", title: "No answer \u2014 will try again shortly" }, T.exitRetrying || "retrying", " \xB7 ", n.fails, "/3") : /* @__PURE__ */ React.createElement(Tag, { tone: "off" }, "offline"), failed ? /* @__PURE__ */ React.createElement(ReconnectBtn, { T, ip: n.ip, onReconnect }) : active ? /* @__PURE__ */ React.createElement(Btn, { tone: "ok", icon: "check", size: "sm", onClick: () => onSetExit(null) }, T.routing) : /* @__PURE__ */ React.createElement(Btn, { size: "sm", icon: "route", disabled: !usable, onClick: () => usable && onSetExit(n.ip), style: { opacity: usable ? 1 : 0.4 } }, T.routeThru));
   })));
 }
 function LanEnableCard({ backend, onArm, onCancel }) {
@@ -6166,12 +6313,14 @@ function LanEnableCard({ backend, onArm, onCancel }) {
     "\u53D6\u6D88,\u6062\u590D\u6D88\u606F"
   )));
 }
-function NetworkTab({ T, me, peers, exits, activeExit, reqCount, onSetExit, onOpenChat, backend, onArmLan, onCancelLan }) {
+function NetworkTab({ T, me, peers, exits, activeExit, exitFeature, routeFallback, onReconnectExit, reqCount, onSetExit, onOpenChat, backend, onArmLan, onCancelLan }) {
+  const featureOn = !exitFeature || exitFeature.available !== false;
+  const anyFailed = (exits || []).some((r) => (r.nodes || []).some((n) => n.status === "failed"));
   if (backend && backend.switchable && !backend.hasVirtualLan) {
     return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { className: "dk-page", style: { maxWidth: 1040, margin: "0 auto", padding: "24px 28px 60px", display: "flex", flexDirection: "column", gap: 26 } }, /* @__PURE__ */ React.createElement(MyNode, { T, me, activeExit, peers, reqCount }), /* @__PURE__ */ React.createElement(LanEnableCard, { backend, onArm: onArmLan, onCancel: onCancelLan })));
   }
   const lanless = !!backend && backend.hasVirtualLan === false;
-  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { className: "dk-page", style: { maxWidth: 1040, margin: "0 auto", padding: "24px 28px 60px", display: "flex", flexDirection: "column", gap: 26 } }, /* @__PURE__ */ React.createElement(MyNode, { T, me, activeExit, peers, reqCount }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement(Section, { label: T.peerRouting, count: peers.length }), /* @__PURE__ */ React.createElement(PeerTable, { T, peers, onOpenChat }), !peers.length && /* @__PURE__ */ React.createElement("div", { style: { padding: "14px 16px", borderRadius: 11, border: "1px dashed var(--line)", fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, T.noPeersYet || "No friends yet \u2014 add one from Chat and it shows up here with its route.")), lanless ? null : /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement(Section, { label: T.exitNodes, trailing: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6 } }, /* @__PURE__ */ React.createElement(Btn, { icon: "plus", size: "sm" }, T.addExit)) }), activeExit && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderRadius: 10, background: "color-mix(in oklab, var(--warn), transparent 90%)", border: "1px solid color-mix(in oklab, var(--warn), transparent 70%)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "route", size: 17, color: "var(--warn)", stroke: 2 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--text)" } }, T.egressVia), /* @__PURE__ */ React.createElement(Mono, { size: 13, copy: activeExit }, activeExit), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Btn, { tone: "danger", icon: "unlink", size: "sm", onClick: () => onSetExit(null) }, T.stopRouting)), /* @__PURE__ */ React.createElement("div", { className: "dk-grid1", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 } }, exits.map((r) => /* @__PURE__ */ React.createElement(ExitCard, { key: r.region, T, region: r, activeExit, onSetExit }))))));
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { className: "dk-page", style: { maxWidth: 1040, margin: "0 auto", padding: "24px 28px 60px", display: "flex", flexDirection: "column", gap: 26 } }, /* @__PURE__ */ React.createElement(MyNode, { T, me, activeExit, peers, reqCount }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement(Section, { label: T.peerRouting, count: peers.length }), /* @__PURE__ */ React.createElement(PeerTable, { T, peers, onOpenChat }), !peers.length && /* @__PURE__ */ React.createElement("div", { style: { padding: "14px 16px", borderRadius: 11, border: "1px dashed var(--line)", fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, T.noPeersYet || "No friends yet \u2014 add one from Chat and it shows up here with its route.")), lanless ? null : /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement(Section, { label: T.exitNodes, trailing: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6 } }, anyFailed && onReconnectExit && /* @__PURE__ */ React.createElement(ReconnectBtn, { T, ip: null, onReconnect: onReconnectExit, label: T.exitReconnectAll || "Reconnect all" }), /* @__PURE__ */ React.createElement(Btn, { icon: "plus", size: "sm" }, T.addExit)) }), !featureOn && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4, padding: "11px 14px", borderRadius: 10, background: "var(--panel-2)", border: "1px dashed var(--line)" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 700, color: "var(--text)" } }, T.noExitAvailable || "No exit available \u2014 routing and proxy are off."), anyFailed && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 12, color: "var(--dim)" } }, T.noExitHint || "Every exit failed 3 times and is no longer checked automatically. Press Reconnect to try one again.")), routeFallback && routeFallback.from && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderRadius: 10, background: "color-mix(in oklab, var(--warn), transparent 90%)", border: "1px solid color-mix(in oklab, var(--warn), transparent 70%)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "route", size: 17, color: "var(--warn)", stroke: 2 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--text)" } }, T.routeFellBack || "Routing fell back to direct: every exit it used failed. Reconnect one to route through it again.")), activeExit && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderRadius: 10, background: "color-mix(in oklab, var(--warn), transparent 90%)", border: "1px solid color-mix(in oklab, var(--warn), transparent 70%)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "route", size: 17, color: "var(--warn)", stroke: 2 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--text)" } }, T.egressVia), /* @__PURE__ */ React.createElement(Mono, { size: 13, copy: activeExit }, activeExit), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Btn, { tone: "danger", icon: "unlink", size: "sm", onClick: () => onSetExit(null) }, T.stopRouting)), /* @__PURE__ */ React.createElement("div", { className: "dk-grid1", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 } }, exits.map((r) => /* @__PURE__ */ React.createElement(ExitCard, { key: r.region, T, region: r, activeExit, onSetExit, onReconnect: onReconnectExit, featureOn }))))));
 }
 Object.assign(window, { NetworkTab });
 
@@ -6512,6 +6661,9 @@ var STR = {
     dirSearch: "search name / userid\u2026",
     dirLoading: "loading directory\u2026",
     noName: "no name given",
+    friendRequestItem: "Friend request",
+    showAll: "show all",
+    showLess: "show less",
     dirEmpty: "nobody matches",
     dirError: "Could not load the directory:",
     bridgeEmpty: "Nobody else is listed on this bridge yet. You are the first.",
@@ -6586,6 +6738,15 @@ var STR = {
     routeThru: "route",
     egressVia: "all egress routed via",
     stopRouting: "stop",
+    exitFailed: "failed",
+    exitReconnect: "Reconnect",
+    exitReconnectAll: "Reconnect all",
+    exitChecking: "checking\u2026",
+    exitNotChecked: "not checked",
+    exitRetrying: "retrying",
+    noExitAvailable: "No exit available \u2014 routing and proxy are off.",
+    noExitHint: "Every exit failed 3 times and is no longer checked automatically. Press Reconnect to try one again.",
+    routeFellBack: "Routing fell back to direct: every exit it used failed. Reconnect one to route through it again.",
     identity: "Identity",
     userId: "user id",
     carrierAddr: "carrier address",
@@ -6711,6 +6872,9 @@ var STR = {
     dirSearch: "\u641C\u7D22\u540D\u5B57 / userid\u2026",
     dirLoading: "\u6B63\u5728\u52A0\u8F7D\u540D\u5355\u2026",
     noName: "\u5BF9\u65B9\u6CA1\u6709\u586B\u540D\u5B57",
+    friendRequestItem: "\u597D\u53CB\u8BF7\u6C42",
+    showAll: "\u5C55\u5F00\u5168\u6587",
+    showLess: "\u6536\u8D77",
     dirEmpty: "\u6CA1\u6709\u5339\u914D\u7684\u4EBA",
     dirError: "\u540D\u5355\u52A0\u8F7D\u5931\u8D25\uFF1A",
     bridgeEmpty: "\u8FD9\u4E2A bridge \u4E0A\u8FD8\u6CA1\u6709\u522B\u4EBA\uFF0C\u4F60\u662F\u7B2C\u4E00\u4E2A\u3002",
@@ -6785,6 +6949,15 @@ var STR = {
     routeThru: "\u8DEF\u7531",
     egressVia: "\u5168\u90E8\u51FA\u53E3\u6D41\u91CF\u7ECF\u7531",
     stopRouting: "\u505C\u6B62",
+    exitFailed: "\u5DF2\u5931\u8D25",
+    exitReconnect: "\u91CD\u65B0\u8FDE\u63A5",
+    exitReconnectAll: "\u5168\u90E8\u91CD\u8FDE",
+    exitChecking: "\u68C0\u6D4B\u4E2D\u2026",
+    exitNotChecked: "\u672A\u68C0\u6D4B",
+    exitRetrying: "\u91CD\u8BD5\u4E2D",
+    noExitAvailable: "\u6CA1\u6709\u53EF\u7528\u7684\u51FA\u53E3 \u2014\u2014 \u8DEF\u7531\u548C\u4EE3\u7406\u5DF2\u5173\u95ED\u3002",
+    noExitHint: "\u6240\u6709\u51FA\u53E3\u90FD\u8FDE\u7EED\u5931\u8D25 3 \u6B21,\u5DF2\u4E0D\u518D\u81EA\u52A8\u68C0\u6D4B\u3002\u70B9\u300C\u91CD\u65B0\u8FDE\u63A5\u300D\u518D\u8BD5\u4E00\u6B21\u3002",
+    routeFellBack: "\u8DEF\u7531\u5DF2\u6539\u56DE\u76F4\u8FDE:\u5B83\u4F7F\u7528\u7684\u51FA\u53E3\u5168\u90E8\u5931\u8D25\u3002\u91CD\u65B0\u8FDE\u63A5\u5176\u4E2D\u4E00\u4E2A\u5373\u53EF\u6062\u590D\u3002",
     identity: "\u8EAB\u4EFD",
     userId: "\u7528\u6237 ID",
     carrierAddr: "Carrier \u5730\u5740",
@@ -7079,7 +7252,7 @@ function DkApp() {
     return hasTab(tabs, want) || DK_PEOPLE_TABS.includes(want) && showPeople ? want : firstTab;
   });
   const [activeId, setActiveId] = React.useState(null);
-  const data = useDaemonData();
+  const data = useDaemonData({ exits: tab === "network" });
   const me = data.me;
   const [upd, setUpd] = React.useState(null);
   React.useEffect(() => {
@@ -7442,6 +7615,10 @@ function DkApp() {
   const onEdit = (name, description) => dkApi.setProfile(name, description).then(data.refresh);
   const onSetExit = () => {
   };
+  const onReconnectExit = (ip) => (ip ? dkApi.reconnectExit(ip) : dkApi.reconnectAllExits()).then((r) => {
+    data.refresh();
+    return r;
+  });
   const onOpenChat = (id) => {
     setTab("chat");
     openConversation(id);
@@ -7521,7 +7698,7 @@ function DkApp() {
     fontWeight: 600,
     background: tab === n.id ? "var(--accent)" : "transparent",
     color: tab === n.id ? "#fff" : "var(--dim)"
-  } }, /* @__PURE__ */ React.createElement(Icon, { name: n.icon, size: 14, stroke: 2, color: tab === n.id ? "#fff" : "var(--dim)" }), n.label))), tab === "chat" && /* @__PURE__ */ React.createElement(ChatTab, { T, lang: t.lang, phone, isProtocol, protocolFix, onBack: closeConversation, peers, requests, activeId, thread: activeId === ASSISTANT_ID ? assistant.thread : data.threads[activeId], onSelect, onAct, onAdd, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread: () => activeId && data.loadThread(activeId), hasEarlier: !!(activeId && activeId !== ASSISTANT_ID && data.earlier[activeId]), onAssistantRemove: activeId === ASSISTANT_ID ? assistant.removeFriends : null, onAssistantAdopt: activeId === ASSISTANT_ID ? assistant.adoptServicePeers : null, onLoadEarlier: () => activeId && data.loadEarlier(activeId), prefillAddr: pendingAddr, onPrefillConsumed: () => setPendingAddr(""), muted: mutedIds, onToggleMute }), tab === "here" && /* @__PURE__ */ React.createElement(DiscoverTab, { T, kind: "bridge", peers, meId: me.userId, onAdd, onOpenChat }), 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 === "apps" && /* @__PURE__ */ React.createElement(AppsTab, { T, t, me, peers, phone, setTab }), tabs.map((x) => x.kind === "host" && tab === x.id ? /* @__PURE__ */ React.createElement(HostTabPane, { key: x.id, tab: x, props: { T, t, me, peers, phone, setTab }, lang: t.lang }) : null), tab === "profile" && /* @__PURE__ */ React.createElement(
+  } }, /* @__PURE__ */ React.createElement(Icon, { name: n.icon, size: 14, stroke: 2, color: tab === n.id ? "#fff" : "var(--dim)" }), n.label))), tab === "chat" && /* @__PURE__ */ React.createElement(ChatTab, { T, lang: t.lang, phone, isProtocol, protocolFix, onBack: closeConversation, peers, requests, activeId, thread: activeId === ASSISTANT_ID ? assistant.thread : data.threads[activeId], onSelect, onAct, onAdd, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread: () => activeId && data.loadThread(activeId), hasEarlier: !!(activeId && activeId !== ASSISTANT_ID && data.earlier[activeId]), onAssistantRemove: activeId === ASSISTANT_ID ? assistant.removeFriends : null, onAssistantAdopt: activeId === ASSISTANT_ID ? assistant.adoptServicePeers : null, onLoadEarlier: () => activeId && data.loadEarlier(activeId), prefillAddr: pendingAddr, onPrefillConsumed: () => setPendingAddr(""), muted: mutedIds, onToggleMute }), tab === "here" && /* @__PURE__ */ React.createElement(DiscoverTab, { T, kind: "bridge", peers, meId: me.userId, onAdd, onOpenChat }), 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, exitFeature: data.exitFeature, routeFallback: data.routeFallback, onReconnectExit, reqCount: requests.length, onSetExit, onOpenChat, backend, onArmLan: armLan, onCancelLan: cancelLan }), tab === "apps" && /* @__PURE__ */ React.createElement(AppsTab, { T, t, me, peers, phone, setTab }), tabs.map((x) => x.kind === "host" && tab === x.id ? /* @__PURE__ */ React.createElement(HostTabPane, { key: x.id, tab: x, props: { T, t, me, peers, phone, setTab }, lang: t.lang }) : null), tab === "profile" && /* @__PURE__ */ React.createElement(
     ProfileTab,
     {
       T,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle-ui",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "description": "The Beagle chat UI, minus the machine it runs on — shared by the desktop install and the browser build.",
   "license": "MIT",
   "type": "module",