@decentnetwork/lan 0.1.136 → 0.1.138

package/dist/ui/desktop/app.js

@@ -285,7 +285,7 @@ function useDaemonData() {
           status: m.file.status,
           pct: m.file.status === "sending" && m.file.size ? Math.min(100, Math.floor((m.file.sent || 0) / m.file.size * 100)) : void 0
         } : void 0,
-        status: m.dir === "out" ? "read" : void 0
+        status: m.dir === "out" ? m.status === "queued" ? "queued" : "read" : void 0
       }));
       const withDay = msgs.length ? [{ day: dkDayLabel(arr[0].ts) }].concat(msgs) : [];
       setThreads((t) => Object.assign({}, t, { [peerId]: withDay }));
@@ -1032,38 +1032,39 @@ const inputStyle = {
 };
 function Msg({ m, peer, T }) {
   const mine = m.from === "me";
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "flex-end", gap: 8, margin: "3px 0" } }, !mine && /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }), /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, m.file ? !mine && m.file.status !== "sending" && m.file.status !== "failed" && (m.file.media === "image" || m.file.media === "video" || m.file.media === "audio") ? (
-    // Received media → inline preview / player, with name, size, download.
-    /* @__PURE__ */ React.createElement("div", { style: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 6,
-      maxWidth: 300,
-      background: "var(--bub-them)",
-      border: "1px solid var(--line)",
-      borderRadius: 12,
-      padding: 6
-    } }, m.file.media === "image" && /* @__PURE__ */ React.createElement("a", { href: dkFileUrl(m.file.name), target: "_blank", rel: "noreferrer", style: { display: "block", lineHeight: 0 } }, /* @__PURE__ */ React.createElement(
-      "img",
-      {
-        src: dkFileUrl(m.file.name),
-        alt: m.file.name,
-        style: { display: "block", maxWidth: "100%", maxHeight: 280, borderRadius: 8, objectFit: "cover" }
-      }
-    )), m.file.media === "video" && /* @__PURE__ */ React.createElement(
-      "video",
-      {
-        src: dkFileUrl(m.file.name),
-        controls: true,
-        preload: "metadata",
-        style: { maxWidth: "100%", maxHeight: 320, borderRadius: 8, background: "#000" }
-      }
-    ), m.file.media === "audio" && /* @__PURE__ */ React.createElement("audio", { src: dkFileUrl(m.file.name), controls: true, style: { width: "100%" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px" } }, /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, m.file.name), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", flexShrink: 0 } }, m.file.size), /* @__PURE__ */ React.createElement("a", { href: dkFileDownloadUrl(m.file.name), download: m.file.name, title: "download", style: { display: "inline-flex", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 15, stroke: 2, color: "var(--accent)" }))))
-  ) : React.createElement(
-    mine ? "div" : "a",
-    {
-      ...mine ? {} : { href: dkFileDownloadUrl(m.file.name), download: m.file.name, title: "download" },
-      style: {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "flex-end", gap: 8, margin: "3px 0" } }, !mine && /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }), /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, m.file ? (
+    // Inline preview/player. Received media: as soon as it's saved.
+    // Sent media: once it's fully delivered ('sent') — the daemon keeps a
+    // local copy so it plays on the sender's side too.
+    (m.file.media === "image" || m.file.media === "video" || m.file.media === "audio") && (mine ? m.file.status === "sent" : m.file.status !== "sending" && m.file.status !== "failed" && m.file.status !== "queued") ? (
+      // Received media → inline preview / player, with name, size, download.
+      /* @__PURE__ */ React.createElement("div", { style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        maxWidth: 300,
+        background: "var(--bub-them)",
+        border: "1px solid var(--line)",
+        borderRadius: 12,
+        padding: 6
+      } }, m.file.media === "image" && /* @__PURE__ */ React.createElement("a", { href: dkFileUrl(m.file.name), target: "_blank", rel: "noreferrer", style: { display: "block", lineHeight: 0 } }, /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: dkFileUrl(m.file.name),
+          alt: m.file.name,
+          style: { display: "block", maxWidth: "100%", maxHeight: 280, borderRadius: 8, objectFit: "cover" }
+        }
+      )), m.file.media === "video" && /* @__PURE__ */ React.createElement(
+        "video",
+        {
+          src: dkFileUrl(m.file.name),
+          controls: true,
+          preload: "metadata",
+          style: { maxWidth: "100%", maxHeight: 320, borderRadius: 8, background: "#000" }
+        }
+      ), m.file.media === "audio" && /* @__PURE__ */ React.createElement("audio", { src: dkFileUrl(m.file.name), controls: true, style: { width: "100%" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px" } }, /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, m.file.name), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", flexShrink: 0 } }, m.file.size), /* @__PURE__ */ React.createElement("a", { href: dkFileDownloadUrl(m.file.name), download: m.file.name, title: "download", style: { display: "inline-flex", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 15, stroke: 2, color: "var(--accent)" }))))
+    ) : (() => {
+      const cardStyle = {
         display: "flex",
         alignItems: "center",
         gap: 10,
@@ -1074,11 +1075,34 @@ function Msg({ m, peer, T }) {
         minWidth: 200,
         textDecoration: "none",
         cursor: mine ? "default" : "pointer"
+      };
+      const icon = /* @__PURE__ */ React.createElement("div", { style: { width: 34, height: 34, borderRadius: 7, flexShrink: 0, background: mine ? "rgba(255,255,255,0.16)" : "var(--chip)", display: "flex", alignItems: "center", justifyContent: "center", color: mine ? "#fff" : "var(--accent)" } }, /* @__PURE__ */ React.createElement(Icon, { name: m.file.media === "image" ? "image" : m.file.media === "video" ? "video" : m.file.media === "audio" ? "play" : "file", size: 18, stroke: 1.9 }));
+      const meta = /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 600, color: mine ? "#fff" : "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, m.file.name), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 11, color: mine ? "rgba(255,255,255,0.7)" : "var(--faint)", marginTop: 1 } }, m.file.status === "queued" ? `${m.file.size} \xB7 ${T.queued || "queued"}` : m.file.status === "sending" ? `${m.file.size} \xB7 sending ${m.file.pct != null ? m.file.pct + "%" : "\u2026"}` : m.file.status === "failed" ? `${m.file.size} \xB7 failed` : mine ? `${m.file.size} \xB7 sent` : `${m.file.size} \xB7 ${T.open || "open"}`));
+      if (mine) {
+        return /* @__PURE__ */ React.createElement("div", { style: cardStyle }, icon, meta, m.file.status === "queued" ? /* @__PURE__ */ React.createElement(Icon, { name: "clock", size: 16, stroke: 2, color: "rgba(255,255,255,0.85)" }) : m.file.status === "sending" ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.9)" } }, m.file.pct != null ? m.file.pct + "%" : "\u2026") : m.file.status === "failed" ? /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 16, stroke: 2.4, color: "rgba(255,200,190,0.95)" }) : /* @__PURE__ */ React.createElement(Icon, { name: "checkCheck", size: 16, stroke: 2, color: "rgba(255,255,255,0.85)" }));
       }
-    },
-    /* @__PURE__ */ React.createElement("div", { style: { width: 34, height: 34, borderRadius: 7, flexShrink: 0, background: mine ? "rgba(255,255,255,0.16)" : "var(--chip)", display: "flex", alignItems: "center", justifyContent: "center", color: mine ? "#fff" : "var(--accent)" } }, /* @__PURE__ */ React.createElement(Icon, { name: m.file.media === "image" ? "image" : m.file.media === "video" ? "video" : m.file.media === "audio" ? "play" : "file", size: 18, stroke: 1.9 })),
-    /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 600, color: mine ? "#fff" : "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, m.file.name), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 11, color: mine ? "rgba(255,255,255,0.7)" : "var(--faint)", marginTop: 1 } }, m.file.status === "sending" ? `${m.file.size} \xB7 sending ${m.file.pct != null ? m.file.pct + "%" : "\u2026"}` : m.file.status === "failed" ? `${m.file.size} \xB7 failed` : mine ? `${m.file.size} \xB7 sent` : `${m.file.size} \xB7 download`)),
-    mine ? m.file.status === "sending" ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.9)" } }, m.file.pct != null ? m.file.pct + "%" : "\u2026") : m.file.status === "failed" ? /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 16, stroke: 2.4, color: "rgba(255,200,190,0.95)" }) : /* @__PURE__ */ React.createElement(Icon, { name: "checkCheck", size: 16, stroke: 2, color: "rgba(255,255,255,0.85)" }) : /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 16, stroke: 2, color: "var(--accent)" })
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: cardStyle,
+          title: "open",
+          onClick: () => window.open(dkFileUrl(m.file.name), "_blank", "noopener")
+        },
+        icon,
+        meta,
+        /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            href: dkFileDownloadUrl(m.file.name),
+            download: m.file.name,
+            title: "download",
+            onClick: (e) => e.stopPropagation(),
+            style: { display: "inline-flex", flexShrink: 0 }
+          },
+          /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 16, stroke: 2, color: "var(--accent)" })
+        )
+      );
+    })()
   ) : /* @__PURE__ */ React.createElement("div", { style: {
     padding: "8px 12px",
     borderRadius: 12,
@@ -1092,7 +1116,7 @@ function Msg({ m, peer, T }) {
     lineHeight: 1.4,
     letterSpacing: -0.1,
     wordBreak: "break-word"
-  } }, m.text), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, margin: "3px 3px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, m.time), mine && m.status && /* @__PURE__ */ React.createElement(Icon, { name: "checkCheck", size: 12, stroke: 2.2, color: m.status === "read" ? "var(--accent)" : "var(--faint)" }))));
+  } }, m.text), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, margin: "3px 3px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, m.time), mine && m.status === "queued" ? /* @__PURE__ */ React.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 2 }, title: "waiting for peer \u2014 will send when they're online" }, /* @__PURE__ */ React.createElement(Icon, { name: "clock", size: 11, stroke: 2.2, color: "var(--faint)" }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, T.queued || "queued")) : mine && m.status && /* @__PURE__ */ React.createElement(Icon, { name: "checkCheck", size: 12, stroke: 2.2, color: m.status === "read" ? "var(--accent)" : "var(--faint)" }))));
 }
 function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, onAlias, onRemove, onOpenNet }) {
   const scrollRef = React.useRef(null);
@@ -1362,6 +1386,8 @@ const STR = {
     message: "Message",
     send: "Send",
     pickPeer: "Select a peer to open the conversation",
+    queued: "queued",
+    open: "open",
     myIp: "my ip",
     copyAddr: "copy address",
     peersOnline: "peers online",
@@ -1437,6 +1463,8 @@ const STR = {
     message: "\u6D88\u606F",
     send: "\u53D1\u9001",
     pickPeer: "\u9009\u62E9\u4E00\u4F4D\u597D\u53CB\u5F00\u59CB\u4F1A\u8BDD",
+    queued: "\u5F85\u53D1\u9001",
+    open: "\u6253\u5F00",
     myIp: "\u6211\u7684 IP",
     copyAddr: "\u590D\u5236\u5730\u5740",
     peersOnline: "\u5728\u7EBF\u597D\u53CB",
@@ -1579,7 +1607,7 @@ function DkApp() {
     { 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("span", { style: { fontFamily: "var(--mono)", fontSize: 14, fontWeight: 700, letterSpacing: -0.3, color: "var(--text)" } }, "decentlan"), /* @__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, onAlias, onRemove, onOpenNet }), tab === "network" && /* @__PURE__ */ React.createElement(NetworkTab, { T, me, peers, exits, activeExit, reqCount: requests.length, onSetExit, onOpenChat }), 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("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, onAlias, onRemove, onOpenNet }), tab === "network" && /* @__PURE__ */ React.createElement(NetworkTab, { T, me, peers, exits, activeExit, reqCount: requests.length, onSetExit, onOpenChat }), 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/ui/desktop/index.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>decentlan — Beagle Chat</title>
+<title>Beagle</title>
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
 <style>
   * { box-sizing: border-box; }

package/dist/ui/server.js

@@ -319,10 +319,28 @@ export function startFriendUi(opts) {
                     mp3: "audio/mpeg", m4a: "audio/mp4", aac: "audio/aac", wav: "audio/wav",
                     ogg: "audio/ogg", flac: "audio/flac", opus: "audio/opus",
                     pdf: "application/pdf",
+                    // Text / markup / code / config → served as UTF-8 text so a plain
+                    // click opens (previews) them in the browser instead of forcing a
+                    // download. `.md` and friends are the common case here.
+                    md: "text/markdown", markdown: "text/markdown",
+                    txt: "text/plain", text: "text/plain", log: "text/plain",
+                    json: "application/json", csv: "text/csv", tsv: "text/tab-separated-values",
+                    xml: "text/xml", yaml: "text/plain", yml: "text/plain",
+                    ini: "text/plain", conf: "text/plain", cfg: "text/plain", toml: "text/plain",
+                    html: "text/html", htm: "text/html", css: "text/css",
+                    js: "text/plain", ts: "text/plain", jsx: "text/plain", tsx: "text/plain",
+                    py: "text/plain", sh: "text/plain", srt: "text/plain", vtt: "text/vtt",
                 };
                 const ctype = MIME[ext] || "application/octet-stream";
                 const isMedia = ctype.startsWith("image/") || ctype.startsWith("video/") || ctype.startsWith("audio/");
-                const wantDownload = q.get("dl") === "1" || !isMedia;
+                const isText = ctype.startsWith("text/") || ctype === "application/json" || ctype === "application/pdf";
+                // Anything we can render inline (media, text, pdf) opens on a plain GET;
+                // `?dl=1` forces a save. Binary stays attachment-only.
+                const inlineViewable = isMedia || isText;
+                const wantDownload = q.get("dl") === "1" || !inlineViewable;
+                // Text needs an explicit charset so the browser renders UTF-8 (Chinese
+                // markdown etc.) correctly rather than as mojibake.
+                const ctypeHeader = ctype.startsWith("text/") ? `${ctype}; charset=utf-8` : ctype;
                 // Content-Disposition must be ASCII — Node throws ERR_INVALID_CHAR on a
                 // non-ASCII header value (filenames from macOS contain U+202F before
                 // "PM", and others may be Chinese, etc.). Provide an ASCII-only
@@ -343,7 +361,7 @@ export function startFriendUi(opts) {
                         return;
                     }
                     res.writeHead(206, {
-                        "content-type": ctype,
+                        "content-type": ctypeHeader,
                         "content-disposition": disposition,
                         "accept-ranges": "bytes",
                         "content-range": `bytes ${start}-${end}/${size}`,
@@ -353,7 +371,7 @@ export function startFriendUi(opts) {
                     return;
                 }
                 res.writeHead(200, {
-                    "content-type": ctype,
+                    "content-type": ctypeHeader,
                     "content-disposition": disposition,
                     "accept-ranges": "bytes",
                     "content-length": String(size),
@@ -633,7 +651,7 @@ export function startFriendUi(opts) {
 const PAGE = `<!doctype html>
 <html lang="en"><head><meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<title>decentlan — friends</title>
+<title>Beagle — friends</title>
 <style>
   :root { color-scheme: light dark; }
   body { font: 15px/1.5 -apple-system, system-ui, sans-serif; max-width: 760px; margin: 2rem auto; padding: 0 1rem; }

package/docs/INSTALL.md

@@ -13,13 +13,27 @@ transparently between any two daemons that are Carrier friends.
 | | minimum |
 |---|---|
 | Node.js | **20+** |
-| OS | Linux (`x86_64`, `aarch64`) or macOS (`aarch64`, `x86_64`) |
+| OS | Linux (`x86_64`, `aarch64`), macOS (`aarch64`, `x86_64`), or **Windows 10 / 11 via WSL2** ([Windows guide](INSTALL-WINDOWS.md)) |
 | Root / sudo | Yes — needed to create the TUN device. The daemon drops back to user-mode for everything else. |
 | Outbound network | TCP and UDP to public Carrier bootstrap nodes (ports 33445 + 443). No inbound port needed; no public IP needed. |
 
-Windows isn't supported yet; WSL2 with Linux mode works (UDP through
-WSL's NAT is unreliable, so the SDK falls back to TCP relay — works,
-just slower).
+### Windows
+
+Windows **is** supported — but the daemon runs inside **WSL2** (Windows
+Subsystem for Linux), a real Linux environment Windows installs for you, not
+on Windows directly. Requirements:
+
+- **Windows 11**, or **Windows 10 version 2004 or later** (build 19041+) —
+  this is what the one-command `wsl --install` needs.
+- **Fast (direct UDP) path needs Windows 11, version 22H2 or later.** There you
+  turn on WSL **mirrored networking mode**, which lets the direct UDP
+  hole-punch succeed (~200 ms — smooth for live video). On **Windows 10**
+  mirrored mode doesn't exist, so WSL's NAT blocks inbound UDP and the SDK
+  falls back to the TCP relay: it still works, just slower (fine for SSH, chat,
+  and most browsing; live sports may stutter).
+
+👉 **Non-technical step-by-step for Windows users: [INSTALL-WINDOWS.md](INSTALL-WINDOWS.md)**
+(install WSL → install Node.js → install decentlan, three steps).
 
 ## Install
 
@@ -52,7 +66,7 @@ Wait ~60–90s, then verify:
 
 ```bash
 agentnet ipam list           # should show 6+ peers
-agentnet diag | grep tun     # your allocated 10.86.1.x
+agentnet diag | grep tun     # your allocated 10.86.x.x
 ```
 
 > ### If `ipam list` shows only yourself after 2 minutes
@@ -63,7 +77,7 @@ agentnet diag | grep tun     # your allocated 10.86.1.x
 >
 > 1. Re-send the friend-request directly through your live daemon:
 >    ```bash
->    agentnet friend-request Jt7w1pKkyLT5GVue9h6ZPkjg1EeuuTbD6JVSLycXLsdm6nvBGSUd
+>    agentnet friend-request NsuN81dZdEoyvwEFgWaHkT8SPJB6UWeRmdYcCGFV5CdbbPXoK2RM
 >    ```
 >    Then wait 60s and re-check `agentnet ipam list`.
 >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/lan",
-  "version": "0.1.136",
+  "version": "0.1.138",
   "description": "Private virtual LAN for self-hosted services and AI agents, built on Elastos Carrier. NAT-traversal, name service, ACL, all over a peer-to-peer mesh — no public IP required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@decentnetwork/dora": "^0.1.11",
-    "@decentnetwork/peer": "^0.1.70",
+    "@decentnetwork/peer": "^0.1.71",
     "ink": "^5.2.1",
     "js-yaml": "^4.1.0",
     "react": "^18.3.1",