@decentnetwork/lan 0.1.88 → 0.1.90

package/dist/ui/desktop/vendor/react.production.min.js

@@ -0,0 +1,31 @@
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+(function(){'use strict';(function(c,x){"object"===typeof exports&&"undefined"!==typeof module?x(exports):"function"===typeof define&&define.amd?define(["exports"],x):(c=c||self,x(c.React={}))})(this,function(c){function x(a){if(null===a||"object"!==typeof a)return null;a=V&&a[V]||a["@@iterator"];return"function"===typeof a?a:null}function w(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Y(){}function K(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Z(a,b,
+e){var m,d={},c=null,h=null;if(null!=b)for(m in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(c=""+b.key),b)aa.call(b,m)&&!ba.hasOwnProperty(m)&&(d[m]=b[m]);var l=arguments.length-2;if(1===l)d.children=e;else if(1<l){for(var f=Array(l),k=0;k<l;k++)f[k]=arguments[k+2];d.children=f}if(a&&a.defaultProps)for(m in l=a.defaultProps,l)void 0===d[m]&&(d[m]=l[m]);return{$$typeof:y,type:a,key:c,ref:h,props:d,_owner:L.current}}function oa(a,b){return{$$typeof:y,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}
+function M(a){return"object"===typeof a&&null!==a&&a.$$typeof===y}function pa(a){var b={"=":"=0",":":"=2"};return"$"+a.replace(/[=:]/g,function(a){return b[a]})}function N(a,b){return"object"===typeof a&&null!==a&&null!=a.key?pa(""+a.key):b.toString(36)}function B(a,b,e,m,d){var c=typeof a;if("undefined"===c||"boolean"===c)a=null;var h=!1;if(null===a)h=!0;else switch(c){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case y:case qa:h=!0}}if(h)return h=a,d=d(h),a=""===m?"."+
+N(h,0):m,ca(d)?(e="",null!=a&&(e=a.replace(da,"$&/")+"/"),B(d,b,e,"",function(a){return a})):null!=d&&(M(d)&&(d=oa(d,e+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(da,"$&/")+"/")+a)),b.push(d)),1;h=0;m=""===m?".":m+":";if(ca(a))for(var l=0;l<a.length;l++){c=a[l];var f=m+N(c,l);h+=B(c,b,e,f,d)}else if(f=x(a),"function"===typeof f)for(a=f.call(a),l=0;!(c=a.next()).done;)c=c.value,f=m+N(c,l++),h+=B(c,b,e,f,d);else if("object"===c)throw b=String(a),Error("Objects are not valid as a React child (found: "+
+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}function C(a,b,e){if(null==a)return a;var c=[],d=0;B(a,c,"","",function(a){return b.call(e,a,d++)});return c}function ra(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b});-1===a._status&&(a._status=
+0,a._result=b)}if(1===a._status)return a._result.default;throw a._result;}function O(a,b){var e=a.length;a.push(b);a:for(;0<e;){var c=e-1>>>1,d=a[c];if(0<D(d,b))a[c]=b,a[e]=d,e=c;else break a}}function p(a){return 0===a.length?null:a[0]}function E(a){if(0===a.length)return null;var b=a[0],e=a.pop();if(e!==b){a[0]=e;a:for(var c=0,d=a.length,k=d>>>1;c<k;){var h=2*(c+1)-1,l=a[h],f=h+1,g=a[f];if(0>D(l,e))f<d&&0>D(g,l)?(a[c]=g,a[f]=e,c=f):(a[c]=l,a[h]=e,c=h);else if(f<d&&0>D(g,e))a[c]=g,a[f]=e,c=f;else break a}}return b}
+function D(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}function P(a){for(var b=p(r);null!==b;){if(null===b.callback)E(r);else if(b.startTime<=a)E(r),b.sortIndex=b.expirationTime,O(q,b);else break;b=p(r)}}function Q(a){z=!1;P(a);if(!u)if(null!==p(q))u=!0,R(S);else{var b=p(r);null!==b&&T(Q,b.startTime-a)}}function S(a,b){u=!1;z&&(z=!1,ea(A),A=-1);F=!0;var c=k;try{P(b);for(n=p(q);null!==n&&(!(n.expirationTime>b)||a&&!fa());){var m=n.callback;if("function"===typeof m){n.callback=null;
+k=n.priorityLevel;var d=m(n.expirationTime<=b);b=v();"function"===typeof d?n.callback=d:n===p(q)&&E(q);P(b)}else E(q);n=p(q)}if(null!==n)var g=!0;else{var h=p(r);null!==h&&T(Q,h.startTime-b);g=!1}return g}finally{n=null,k=c,F=!1}}function fa(){return v()-ha<ia?!1:!0}function R(a){G=a;H||(H=!0,I())}function T(a,b){A=ja(function(){a(v())},b)}function ka(a){throw Error("act(...) is not supported in production builds of React.");}var y=Symbol.for("react.element"),qa=Symbol.for("react.portal"),sa=Symbol.for("react.fragment"),
+ta=Symbol.for("react.strict_mode"),ua=Symbol.for("react.profiler"),va=Symbol.for("react.provider"),wa=Symbol.for("react.context"),xa=Symbol.for("react.forward_ref"),ya=Symbol.for("react.suspense"),za=Symbol.for("react.memo"),Aa=Symbol.for("react.lazy"),V=Symbol.iterator,X={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,m){},enqueueSetState:function(a,b,c,m){}},la=Object.assign,W={};w.prototype.isReactComponent={};w.prototype.setState=function(a,
+b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState")};w.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};Y.prototype=w.prototype;var t=K.prototype=new Y;t.constructor=K;la(t,w.prototype);t.isPureReactComponent=!0;var ca=Array.isArray,aa=Object.prototype.hasOwnProperty,L={current:null},
+ba={key:!0,ref:!0,__self:!0,__source:!0},da=/\/+/g,g={current:null},J={transition:null};if("object"===typeof performance&&"function"===typeof performance.now){var Ba=performance;var v=function(){return Ba.now()}}else{var ma=Date,Ca=ma.now();v=function(){return ma.now()-Ca}}var q=[],r=[],Da=1,n=null,k=3,F=!1,u=!1,z=!1,ja="function"===typeof setTimeout?setTimeout:null,ea="function"===typeof clearTimeout?clearTimeout:null,na="undefined"!==typeof setImmediate?setImmediate:null;"undefined"!==typeof navigator&&
+void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var H=!1,G=null,A=-1,ia=5,ha=-1,U=function(){if(null!==G){var a=v();ha=a;var b=!0;try{b=G(!0,a)}finally{b?I():(H=!1,G=null)}}else H=!1};if("function"===typeof na)var I=function(){na(U)};else if("undefined"!==typeof MessageChannel){t=new MessageChannel;var Ea=t.port2;t.port1.onmessage=U;I=function(){Ea.postMessage(null)}}else I=function(){ja(U,0)};t={ReactCurrentDispatcher:g,
+ReactCurrentOwner:L,ReactCurrentBatchConfig:J,Scheduler:{__proto__:null,unstable_ImmediatePriority:1,unstable_UserBlockingPriority:2,unstable_NormalPriority:3,unstable_IdlePriority:5,unstable_LowPriority:4,unstable_runWithPriority:function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=k;k=a;try{return b()}finally{k=c}},unstable_next:function(a){switch(k){case 1:case 2:case 3:var b=3;break;default:b=k}var c=k;k=b;try{return a()}finally{k=c}},unstable_scheduleCallback:function(a,
+b,c){var e=v();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?e+c:e):c=e;switch(a){case 1:var d=-1;break;case 2:d=250;break;case 5:d=1073741823;break;case 4:d=1E4;break;default:d=5E3}d=c+d;a={id:Da++,callback:b,priorityLevel:a,startTime:c,expirationTime:d,sortIndex:-1};c>e?(a.sortIndex=c,O(r,a),null===p(q)&&a===p(r)&&(z?(ea(A),A=-1):z=!0,T(Q,c-e))):(a.sortIndex=d,O(q,a),u||F||(u=!0,R(S)));return a},unstable_cancelCallback:function(a){a.callback=null},unstable_wrapCallback:function(a){var b=
+k;return function(){var c=k;k=b;try{return a.apply(this,arguments)}finally{k=c}}},unstable_getCurrentPriorityLevel:function(){return k},unstable_shouldYield:fa,unstable_requestPaint:function(){},unstable_continueExecution:function(){u||F||(u=!0,R(S))},unstable_pauseExecution:function(){},unstable_getFirstCallbackNode:function(){return p(q)},get unstable_now(){return v},unstable_forceFrameRate:function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):
+ia=0<a?Math.floor(1E3/a):5},unstable_Profiling:null}};c.Children={map:C,forEach:function(a,b,c){C(a,function(){b.apply(this,arguments)},c)},count:function(a){var b=0;C(a,function(){b++});return b},toArray:function(a){return C(a,function(a){return a})||[]},only:function(a){if(!M(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};c.Component=w;c.Fragment=sa;c.Profiler=ua;c.PureComponent=K;c.StrictMode=ta;c.Suspense=ya;c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=
+t;c.act=ka;c.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var e=la({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=L.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var l=a.type.defaultProps;for(f in b)aa.call(b,f)&&!ba.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==l?l[f]:b[f])}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){l=
+Array(f);for(var g=0;g<f;g++)l[g]=arguments[g+2];e.children=l}return{$$typeof:y,type:a.type,key:d,ref:k,props:e,_owner:h}};c.createContext=function(a){a={$$typeof:wa,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:va,_context:a};return a.Consumer=a};c.createElement=Z;c.createFactory=function(a){var b=Z.bind(null,a);b.type=a;return b};c.createRef=function(){return{current:null}};c.forwardRef=function(a){return{$$typeof:xa,
+render:a}};c.isValidElement=M;c.lazy=function(a){return{$$typeof:Aa,_payload:{_status:-1,_result:a},_init:ra}};c.memo=function(a,b){return{$$typeof:za,type:a,compare:void 0===b?null:b}};c.startTransition=function(a,b){b=J.transition;J.transition={};try{a()}finally{J.transition=b}};c.unstable_act=ka;c.useCallback=function(a,b){return g.current.useCallback(a,b)};c.useContext=function(a){return g.current.useContext(a)};c.useDebugValue=function(a,b){};c.useDeferredValue=function(a){return g.current.useDeferredValue(a)};
+c.useEffect=function(a,b){return g.current.useEffect(a,b)};c.useId=function(){return g.current.useId()};c.useImperativeHandle=function(a,b,c){return g.current.useImperativeHandle(a,b,c)};c.useInsertionEffect=function(a,b){return g.current.useInsertionEffect(a,b)};c.useLayoutEffect=function(a,b){return g.current.useLayoutEffect(a,b)};c.useMemo=function(a,b){return g.current.useMemo(a,b)};c.useReducer=function(a,b,c){return g.current.useReducer(a,b,c)};c.useRef=function(a){return g.current.useRef(a)};
+c.useState=function(a){return g.current.useState(a)};c.useSyncExternalStore=function(a,b,c){return g.current.useSyncExternalStore(a,b,c)};c.useTransition=function(){return g.current.useTransition()};c.version="18.3.1"});
+})();

package/dist/ui/server.d.ts

@@ -8,6 +8,15 @@ export interface FriendUiOptions {
     /** If this node also runs a dora server, the path to its roster.yaml — the
      *  UI shows the allocation table (userid → IP → name). Undefined = no dora. */
     doraRosterPath?: string;
+    /** Version/wire strings for the desktop "my node" panel — the daemon's diag
+     *  doesn't carry them, so the CLI reads them off the installed packages and
+     *  passes them in. */
+    meExtra?: {
+        lanVer?: string;
+        peerVer?: string;
+        wire?: string;
+        channel?: string;
+    };
     listenHost?: string;
     listenPort?: number;
     log?: (msg: string) => void;

package/dist/ui/server.js

@@ -14,7 +14,30 @@
 //
 import http from "node:http";
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
 import yaml from "js-yaml";
+// Directory holding the built desktop UI bundle (index.html, app.js, vendor/).
+// scripts/build-ui.mjs emits it next to this compiled module at dist/ui/desktop/.
+const DESKTOP_DIR = join(dirname(fileURLToPath(import.meta.url)), "desktop");
+// ---- shapes the desktop UI (src/ui/desktop) consumes (DK_* in the design) ----
+const fmtTime = (ts) => {
+    if (!ts)
+        return "";
+    const d = new Date(ts);
+    const today = new Date();
+    const sameDay = d.toDateString() === today.toDateString();
+    if (sameDay)
+        return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+    const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const yest = new Date(today.getTime() - 86400000);
+    if (d.toDateString() === yest.toDateString())
+        return "Yest";
+    if (today.getTime() - d.getTime() < 7 * 86400000)
+        return days[d.getDay()];
+    return `${d.getDate()} ${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][d.getMonth()]}`;
+};
+const viaFromTransport = (t) => t === "udp" || t === "both" ? "direct" : t === "tcp-relay" ? "relay" : null;
 export function startFriendUi(opts) {
     const host = opts.listenHost ?? "127.0.0.1";
     const port = opts.listenPort ?? 8765;
@@ -38,11 +61,38 @@ export function startFriendUi(opts) {
     const server = http.createServer(async (req, res) => {
         try {
             const url = (req.url || "/").split("?")[0];
+            // Desktop UI bundle (the design). Falls back to the classic page when
+            // the bundle hasn't been built (dist/ui/desktop missing).
+            const desktopIndex = join(DESKTOP_DIR, "index.html");
             if (req.method === "GET" && (url === "/" || url === "/index.html")) {
+                if (existsSync(desktopIndex)) {
+                    res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+                    res.end(readFileSync(desktopIndex));
+                    return;
+                }
                 res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
                 res.end(PAGE);
                 return;
             }
+            if (req.method === "GET" && (url === "/classic" || url === "/classic.html")) {
+                res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+                res.end(PAGE);
+                return;
+            }
+            // Static assets for the desktop bundle (app.js + vendored react UMD).
+            if (req.method === "GET" && (url === "/app.js" || url.startsWith("/vendor/"))) {
+                const rel = url === "/app.js" ? "app.js" : url.slice(1); // strip leading /
+                const file = join(DESKTOP_DIR, rel);
+                // Guard against path traversal: resolved file must stay under DESKTOP_DIR.
+                if (existsSync(file) && file.startsWith(DESKTOP_DIR)) {
+                    res.writeHead(200, { "content-type": "application/javascript; charset=utf-8" });
+                    res.end(readFileSync(file));
+                    return;
+                }
+                res.writeHead(404);
+                res.end("not found");
+                return;
+            }
             if (req.method === "GET" && url === "/api/state") {
                 const [diag, pending] = await Promise.all([
                     opts.call({ op: "diag" }),
@@ -75,6 +125,101 @@ export function startFriendUi(opts) {
                 sendJson(res, 200, { friends });
                 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.
+            if (req.method === "GET" && url === "/api/desktop") {
+                const [diag, pending, flist] = await Promise.all([
+                    opts.call({ op: "diag" }),
+                    opts.call({ op: "friends-pending" }),
+                    opts.call({ op: "friends-list" }),
+                ]);
+                const d = (diag.ok ? diag.data : {}) ?? {};
+                const identity = d.identity ?? {};
+                const tun = d.tun ?? {};
+                const node = d.node ?? {};
+                const diagFriends = d.friends ?? [];
+                const ipamList = d.ipam ?? [];
+                const ipByUserid = new Map();
+                for (const p of ipamList)
+                    if (p.carrierId)
+                        ipByUserid.set(p.carrierId, p.virtualIp);
+                const sessByUserid = new Map();
+                for (const f of diagFriends) {
+                    const uid = f.carrierId || f.pubkey || "";
+                    if (uid && f.session)
+                        sessByUserid.set(uid, f.session);
+                }
+                const me = {
+                    name: node.name || (identity.userid ?? "").slice(0, 8),
+                    handle: node.name ? `@decentnetwork/${node.name}` : "@decentnetwork/peer",
+                    userId: identity.userid ?? "",
+                    carrier: identity.address ?? "",
+                    netKey: identity.userid ?? "",
+                    ip: d.allocatedIp ?? tun.ip ?? "",
+                    online: !!tun.ip,
+                    lanVer: opts.meExtra?.lanVer ?? "",
+                    peerVer: opts.meExtra?.peerVer ?? "",
+                    channel: opts.meExtra?.channel ?? "@next",
+                    wire: opts.meExtra?.wire ?? "163",
+                };
+                const fl = (flist.ok ? (flist.data?.friends ?? []) : []);
+                const peers = fl.map((f) => {
+                    const uid = f.userid ?? "";
+                    const sess = sessByUserid.get(uid);
+                    const status = f.status;
+                    const online = status === "connected" || status === "online";
+                    const realName = typeof f.name === "string" && f.name !== uid ? f.name : undefined;
+                    const lm = f.lastMessage;
+                    return {
+                        id: uid,
+                        alias: f.alias || realName || null,
+                        userId: uid,
+                        online,
+                        via: online ? viaFromTransport(sess?.transport) : null,
+                        ping: null,
+                        ip: ipByUserid.get(uid) ?? "",
+                        unread: f.unread ?? 0,
+                        agent: false,
+                        lastMsg: lm ? (lm.dir === "out" ? "you: " : "") + (lm.text ?? "") : "",
+                        lastTime: fmtTime(lm?.ts),
+                        wire: "163",
+                    };
+                });
+                const pend = pending.ok ? (pending.data?.pending ?? []) : [];
+                const requests = pend.map((p, i) => ({
+                    id: p.userid || p.address || `r${i}`,
+                    carrier: p.address || p.userid || "",
+                    userid: p.userid || "",
+                    via: "lan",
+                    time: "",
+                }));
+                // Exit nodes from routes.yaml regions, online-status resolved via ipam.
+                let routes = { regions: [], default: "direct" };
+                if (existsSync(opts.routesPath)) {
+                    routes = yaml.load(readFileSync(opts.routesPath, "utf-8")) ?? routes;
+                }
+                const onlineIps = new Set();
+                for (const [uid, ip] of ipByUserid) {
+                    const s = sessByUserid.get(uid);
+                    if (s && s.transport && s.transport !== "none")
+                        onlineIps.add(ip);
+                }
+                const exits = (routes.regions ?? []).map((r) => ({
+                    region: r.name,
+                    flag: (r.name || "?").slice(0, 2).toUpperCase(),
+                    label: r.name,
+                    nodes: (r.exits ?? []).map((ip, i) => ({
+                        ip,
+                        online: onlineIps.has(ip),
+                        ping: null,
+                        host: `${(r.name || "ex").slice(0, 2)}-${String(i + 1).padStart(2, "0")}`,
+                    })),
+                }));
+                const activeExit = routes.default && routes.default !== "direct" ? routes.default : null;
+                sendJson(res, 200, { me, peers, requests, exits, activeExit });
+                return;
+            }
             if (req.method === "GET" && url === "/api/chat-history") {
                 const peer = new URL(req.url || "/", "http://x").searchParams.get("peer") || undefined;
                 const r = await opts.call({ op: "chat-history", userid: peer });
@@ -262,19 +407,34 @@ async function refresh(){
     </div>\`).join('') : '<div class="empty">No pending requests.</div>';
   document.getElementById('friends').innerHTML = fr.length ? fr.map(f => {
     const uid = f.userid||f.carrierId;
-    const nm = f.alias || f.name || short(uid);
+    const nm = friendName(f, uid);
     const lm = f.lastMessage;
     const preview = lm ? ((lm.dir==='out'?'You: ':'') + lm.text) : (f.status||'offline');
     const badge = f.unread ? '<span style="background:#e74c3c;color:#fff;border-radius:10px;padding:0 .45rem;font-size:.7rem;margin-left:.4rem">'+f.unread+'</span>' : '';
     return \`<div class="row" style="cursor:pointer" onclick="openChat('\${esc(uid)}')" title="open chat">
-      <span class="dot \${esc(f.status||'offline')}"></span>
+      \${avatar(uid, nm, f.status)}
       <div class="meta"><div class="name">\${esc(nm)}\${badge}</div>
-        <div class="sub">\${esc(preview)}</div></div>
+        <div class="sub"><span class="dot \${esc(f.status||'offline')}" style="display:inline-block;vertical-align:middle"></span> \${esc(preview)}</div></div>
       <button onclick="event.stopPropagation();editAlias('\${esc(uid)}')" title="rename" style="padding:.2rem .55rem">✎</button>
       <button class="reject" onclick="event.stopPropagation();delFriend('\${esc(uid)}')" title="remove friend" style="padding:.2rem .55rem">×</button>
     </div>\`;
   }).join('') : '<div class="empty">No friends yet.</div>';
 }
+// The build default "@decentnetwork/peer" is useless (every node sends it) —
+// treat it as no-name and fall back to alias / short userid.
+function friendName(f, uid){
+  const n = f.alias || (f.name && f.name !== '@decentnetwork/peer' ? f.name : '');
+  return n || short(uid);
+}
+// Deterministic colored-initial avatar from the userid (no protocol/avatar
+// exchange needed yet — same userid always gets the same color + letter).
+function avatar(uid, nm, status){
+  const colors=['#e74c3c','#e67e22','#f39c12','#16a085','#27ae60','#2980b9','#8e44ad','#2c3e50','#d35400','#c0392b'];
+  let h=0; for(let i=0;i<String(uid).length;i++) h=(h*31+uid.charCodeAt(i))>>>0;
+  const c=colors[h%colors.length];
+  const ch=((nm||'?').trim().charAt(0)||'?').toUpperCase();
+  return '<span style="display:inline-flex;width:2rem;height:2rem;border-radius:50%;background:'+c+';color:#fff;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto">'+esc(ch)+'</span>';
+}
 function copyId(){ const id=(window.me&&(window.me.address||window.me.userid))||''; if(id&&navigator.clipboard){ navigator.clipboard.writeText(id); toast('Your address copied — share it so others can add you'); } }
 async function delFriend(uid){ if(!confirm('Remove this friend and your messages with them?')) return; const r=await api('/api/friend-remove',{userid:uid}); toast(r.ok?'Removed':(r.error||'failed')); if(chatWith===uid) closeChat(); refresh(); }
 async function editAlias(uid){ const cur=(window.friendsById[uid]||{}).alias||''; const a=prompt('Local name for this friend (empty to clear):', cur); if(a===null) return; const r=await api('/api/friend-alias',{userid:uid,alias:a}); toast(r.ok?'Saved':(r.error||'failed')); refresh(); }
@@ -286,7 +446,7 @@ let chatWith = null, chatTimer = null;
 async function openChat(userid){
   chatWith = userid;
   const f = window.friendsById[userid] || {};
-  document.getElementById('chatName').textContent = f.alias || f.name || short(userid);
+  document.getElementById('chatName').textContent = friendName(f, userid);
   document.getElementById('chatSub').textContent = (f.status||'') + ' · ' + short(userid);
   document.getElementById('chat').style.display = 'block';
   api('/api/chat-mark-read', {userid});   // clears the unread badge

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/lan",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "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",
@@ -58,7 +58,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && chmod +x dist/cli/index.js && node scripts/build-ui.mjs",
+    "build:ui": "node scripts/build-ui.mjs",
     "build:helper": "cd helper/tun-helper && go build -o ../../bin/tun-helper-$(go env GOOS)-$(go env GOARCH) .",
     "build:helper:linux-amd64": "cd helper/tun-helper && GOOS=linux GOARCH=amd64 go build -o ../../bin/tun-helper-linux-amd64 .",
     "build:helper:linux-arm64": "cd helper/tun-helper && GOOS=linux GOARCH=arm64 go build -o ../../bin/tun-helper-linux-arm64 .",
@@ -77,7 +78,7 @@
   },
   "dependencies": {
     "@decentnetwork/dora": "^0.1.6",
-    "@decentnetwork/peer": "^0.1.39",
+    "@decentnetwork/peer": "^0.1.40",
     "js-yaml": "^4.1.0",
     "yargs": "^17.7.2"
   },
@@ -89,6 +90,8 @@
     "@typescript-eslint/parser": "^7.10.0",
     "@vitest/coverage-v8": "^1.6.0",
     "eslint": "^8.57.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "vitest": "^1.6.0"