@decentnetwork/beagle-ui 0.2.19 → 0.2.21

package/dist/beagle-ui.js

@@ -1,4 +1,4 @@
-export const BEAGLE_UI_VERSION = "0.2.19";
+export const BEAGLE_UI_VERSION = "0.2.21";
 // src/icons.jsx
 var ICON_PATHS = {
   // ---- tab bar (the four must feel like one set) ----
@@ -345,6 +345,42 @@ var DK_ME_FALLBACK = {
   channel: "@next",
   wire: "163"
 };
+var DK_PAGE = 30;
+function dkMsgKey(m) {
+  return m.id || m.ts + ":" + m.dir;
+}
+function dkThreadMsg(m) {
+  return {
+    id: m.id,
+    from: m.dir === "out" ? "me" : "them",
+    time: dkClock(m.ts),
+    text: m.text,
+    file: m.file ? {
+      name: m.file.name,
+      size: dkFileSize(m.file.size),
+      dir: m.dir,
+      media: dkFileMediaKind(m.file.name),
+      status: m.file.status,
+      pct: m.file.status === "sending" && m.file.size ? Math.min(100, (m.file.sent || 0) / m.file.size * 100) : void 0,
+      kbps: m.file.kbps
+    } : void 0,
+    // Pass the real state through. Collapsing everything that was not
+    // 'queued' to 'read' meant a message still in flight — or one that
+    // never went out at all — rendered as delivered.
+    status: m.dir === "out" ? m.status === "queued" || m.status === "sending" || m.status === "failed" || m.status === "sent" ? m.status : "read" : void 0,
+    error: m.error,
+    // false = went to a live session but nobody acknowledged it (one tick).
+    // Dropped here before, so that state could never render.
+    confirmed: m.confirmed,
+    // Delivery path: "online" = live session, "offline" = express relay.
+    // Both directions carry it now; the bubble labels them the same way.
+    via: m.via,
+    // 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
+  };
+}
 function useDaemonData() {
   const [snap, setSnap] = React.useState({
     me: DK_ME_FALLBACK,
@@ -390,52 +426,74 @@ function useDaemonData() {
     return () => clearInterval(t);
   }, [refresh]);
   const inFlight = React.useRef(/* @__PURE__ */ new Set());
-  const loadThread = React.useCallback(async (peerId) => {
-    if (!peerId || inFlight.current.has(peerId))
+  const cache = React.useRef({});
+  const [earlier, setEarlier] = React.useState({});
+  const publish = React.useCallback((peerId) => {
+    const c = cache.current[peerId];
+    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) : [];
+    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) => {
+    if (!peerId)
+      return;
+    if (opts && opts.reset)
+      delete cache.current[peerId];
+    if (inFlight.current.has(peerId))
       return;
     inFlight.current.add(peerId);
     try {
-      const d = await dkGet("/api/chat-history?peer=" + encodeURIComponent(peerId) + "&limit=200");
+      const d = await dkGet("/api/chat-history?peer=" + encodeURIComponent(peerId) + "&limit=" + DK_PAGE);
       const arr = d.chats && d.chats[peerId] || [];
       await prefetchThreadFiles(arr);
-      const msgs = arr.map((m) => ({
-        id: m.id,
-        from: m.dir === "out" ? "me" : "them",
-        time: dkClock(m.ts),
-        text: m.text,
-        file: m.file ? {
-          name: m.file.name,
-          size: dkFileSize(m.file.size),
-          dir: m.dir,
-          media: dkFileMediaKind(m.file.name),
-          status: m.file.status,
-          pct: m.file.status === "sending" && m.file.size ? Math.min(100, (m.file.sent || 0) / m.file.size * 100) : void 0,
-          kbps: m.file.kbps
-        } : void 0,
-        // Pass the real state through. Collapsing everything that was not
-        // 'queued' to 'read' meant a message still in flight — or one that
-        // never went out at all — rendered as delivered.
-        status: m.dir === "out" ? m.status === "queued" || m.status === "sending" || m.status === "failed" || m.status === "sent" ? m.status : "read" : void 0,
-        error: m.error,
-        // false = went to a live session but nobody acknowledged it (one tick).
-        // Dropped here before, so that state could never render.
-        confirmed: m.confirmed,
-        // Delivery path: "online" = live session, "offline" = express relay.
-        // Both directions carry it now; the bubble labels them the same way.
-        via: m.via,
-        // 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
-      }));
-      const withDay = msgs.length ? [{ day: dkDayLabel(arr[0].ts) }].concat(msgs) : [];
-      setThreads((t) => Object.assign({}, t, { [peerId]: withDay }));
+      let c = cache.current[peerId];
+      if (!c)
+        c = cache.current[peerId] = { byId: /* @__PURE__ */ new Map(), more: arr.length >= DK_PAGE };
+      if (arr.length) {
+        const from = arr[0].ts;
+        for (const [k, m] of c.byId)
+          if (m.ts >= from)
+            c.byId.delete(k);
+      }
+      for (const m of arr)
+        c.byId.set(dkMsgKey(m), m);
+      publish(peerId);
     } catch (e) {
     } finally {
       inFlight.current.delete(peerId);
     }
-  }, []);
-  return Object.assign({}, snap, { threads, refresh, loadThread });
+  }, [publish]);
+  const loadEarlier = React.useCallback(async (peerId) => {
+    const c = cache.current[peerId];
+    if (!c || !c.more || c.loadingEarlier)
+      return;
+    let oldest = Infinity;
+    for (const m of c.byId.values())
+      if (m.ts < oldest)
+        oldest = m.ts;
+    if (!Number.isFinite(oldest))
+      return;
+    c.loadingEarlier = true;
+    try {
+      const d = await dkGet("/api/chat-history?peer=" + encodeURIComponent(peerId) + "&limit=" + DK_PAGE + "&before=" + oldest);
+      const arr = d.chats && d.chats[peerId] || [];
+      await prefetchThreadFiles(arr);
+      if (cache.current[peerId] !== c)
+        return;
+      for (const m of arr)
+        c.byId.set(dkMsgKey(m), m);
+      c.more = arr.length >= DK_PAGE;
+      publish(peerId);
+    } catch (e) {
+    } finally {
+      c.loadingEarlier = false;
+    }
+  }, [publish]);
+  return Object.assign({}, snap, { threads, earlier, refresh, loadThread, loadEarlier });
 }
 Object.assign(window, {
   dkHash,
@@ -448,6 +506,564 @@ Object.assign(window, {
   dkCopy
 });
 
+// src/assistant/actions.json
+var actions_default = {
+  version: 1,
+  scope: "assistant",
+  note: "The Assistant's action list. /help is generated from it, the router dispatches from it, and iOS/Android implement it. A later natural-language layer translates a sentence into one of these actions and nothing else. See docs/assistant/SPEC.md.",
+  actions: [
+    {
+      name: "help",
+      usage: "/help",
+      summary: "List what the Assistant can do.",
+      params: { type: "object", properties: {}, required: [] },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "friends-list",
+      usage: "/friends list [filter\u2026]",
+      summary: "Show friends as a table: name, last heard from, messages in/out. With no filter, everyone.",
+      params: {
+        type: "object",
+        properties: {
+          filters: {
+            type: "array",
+            items: { enum: ["never-messaged", "never-replied", "silent", "pending"] },
+            description: "Several filters are OR'd together."
+          },
+          silentDays: { type: "integer", minimum: 1, default: 90, description: "Argument of the silent filter: nothing from them in this many days." }
+        },
+        required: []
+      },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "friends-remove",
+      usage: "/friends remove <filter\u2026>",
+      summary: "Same table with a tick per row and a Remove button. Nothing is removed by typing alone.",
+      params: {
+        type: "object",
+        properties: {
+          filters: {
+            type: "array",
+            items: { enum: ["never-messaged", "never-replied", "silent", "pending"] },
+            minItems: 1
+          },
+          silentDays: { type: "integer", minimum: 1, default: 90 }
+        },
+        required: ["filters"]
+      },
+      confirm: "list",
+      scope: "assistant"
+    },
+    {
+      name: "find",
+      usage: "/find <text>",
+      summary: "Friends whose name, alias, description or ens name contains the text.",
+      params: {
+        type: "object",
+        properties: { text: { type: "string", minLength: 1 } },
+        required: ["text"]
+      },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "rename",
+      usage: "/rename <friend> <new name>",
+      summary: "Set a friend's alias \u2014 what you see them as, on this device.",
+      params: {
+        type: "object",
+        properties: {
+          friend: { type: "string", description: "Matches name, alias or userid prefix. Ambiguous = nothing happens, the candidates are listed." },
+          alias: { type: "string", minLength: 1 }
+        },
+        required: ["friend", "alias"]
+      },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "mute",
+      usage: "/mute <friend>",
+      summary: "Stop alerts from one conversation.",
+      params: {
+        type: "object",
+        properties: { friend: { type: "string" } },
+        required: ["friend"]
+      },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "unmute",
+      usage: "/unmute <friend>",
+      summary: "Alerts from that conversation again.",
+      params: {
+        type: "object",
+        properties: { friend: { type: "string" } },
+        required: ["friend"]
+      },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "sound",
+      usage: "/sound on|off",
+      summary: "Sound on a new message.",
+      params: {
+        type: "object",
+        properties: { on: { type: "boolean" } },
+        required: ["on"]
+      },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "flash",
+      usage: "/flash on|off",
+      summary: "Flash the window on a new message.",
+      params: {
+        type: "object",
+        properties: { on: { type: "boolean" } },
+        required: ["on"]
+      },
+      confirm: "none",
+      scope: "assistant"
+    },
+    {
+      name: "status",
+      usage: "/status",
+      summary: "Friends, pending requests, how far back the history on this device goes, app version.",
+      params: { type: "object", properties: {}, required: [] },
+      confirm: "none",
+      scope: "assistant"
+    }
+  ],
+  filters: [
+    {
+      name: "never-messaged",
+      usage: "never-messaged",
+      summary: "No message either way.",
+      guarded: true
+    },
+    {
+      name: "never-replied",
+      usage: "never-replied",
+      summary: "You wrote at least once, they never did.",
+      guarded: true
+    },
+    {
+      name: "silent",
+      usage: "silent [days]",
+      summary: "Nothing from them for this many days (default 90).",
+      guarded: true,
+      arg: { name: "days", type: "integer", default: 90, minimum: 1 }
+    },
+    {
+      name: "pending",
+      usage: "pending",
+      summary: "A request you sent that was never accepted.",
+      guarded: false
+    }
+  ],
+  dropped: [
+    {
+      name: "never-called",
+      reason: "The message store holds no call records on any platform, so the predicate cannot be evaluated. /api/assistant/friends returns lastCallTs: null and the filter is not offered."
+    }
+  ],
+  guard: {
+    recentDays: 14,
+    applies: "Filters marked guarded never match a friend accepted (or, with no acceptance stamp, requested) less than recentDays ago; the result says how many were skipped."
+  }
+};
+
+// src/assistant/filters.js
+var ASSISTANT_ID = "__assistant__";
+var DAY_MS = 864e5;
+var RECENT_DAYS = 14;
+var DEFAULT_SILENT_DAYS = 90;
+var FILTER_NAMES = ["never-messaged", "never-replied", "silent", "pending"];
+var GUARDED = /* @__PURE__ */ new Set(["never-messaged", "never-replied", "silent"]);
+function parseCommand(line) {
+  const text = String(line != null ? line : "").trim();
+  if (!text.startsWith("/"))
+    return null;
+  const parts = text.slice(1).split(/\s+/).filter(Boolean);
+  if (!parts.length)
+    return null;
+  const head = parts[0].toLowerCase();
+  if (head === "friends") {
+    const sub = (parts[1] || "").toLowerCase();
+    if (sub === "list" || sub === "remove")
+      return { ok: true, name: `friends-${sub}`, args: parts.slice(2) };
+    return { ok: false, name: "friends", args: parts.slice(1), error: "friends-subcommand" };
+  }
+  return { ok: true, name: head, args: parts.slice(1) };
+}
+function parseFilters(args) {
+  const filters = [];
+  const unknown = [];
+  let silentDays = DEFAULT_SILENT_DAYS;
+  const words = (args != null ? args : []).map((a) => String(a).toLowerCase());
+  for (let i = 0; i < words.length; i++) {
+    const w = words[i];
+    if (!FILTER_NAMES.includes(w)) {
+      unknown.push(words[i]);
+      continue;
+    }
+    if (w === "silent") {
+      const n = Number(words[i + 1]);
+      if (Number.isInteger(n) && n > 0) {
+        silentDays = n;
+        i++;
+      }
+    }
+    if (!filters.includes(w))
+      filters.push(w);
+  }
+  return { filters, silentDays, unknown };
+}
+var acceptedOrRequestedAt = (f) => f.acceptedAt || f.requestedAt || 0;
+function isRecent(friend, now, recentDays = RECENT_DAYS) {
+  const at = acceptedOrRequestedAt(friend);
+  return at > 0 && now - at < recentDays * DAY_MS;
+}
+function matchesFilter(friend, filter, { now, silentDays = DEFAULT_SILENT_DAYS } = {}) {
+  const inCount = friend.inboundCount || 0;
+  const outCount = friend.outboundCount || 0;
+  switch (filter) {
+    case "never-messaged":
+      return inCount === 0 && outCount === 0;
+    case "never-replied":
+      return outCount > 0 && inCount === 0;
+    case "silent":
+      return !friend.lastInboundTs || now - friend.lastInboundTs > silentDays * DAY_MS;
+    case "pending":
+      return friend.pending === true;
+    default:
+      return false;
+  }
+}
+function selectFriends(friends, filters, { now = Date.now(), silentDays = DEFAULT_SILENT_DAYS, recentDays = RECENT_DAYS } = {}) {
+  const pool = (friends != null ? friends : []).filter((f) => f && f.userid !== ASSISTANT_ID && !f.pinned);
+  if (!filters || !filters.length)
+    return { matched: pool.slice(), skippedRecent: [] };
+  const matched = [];
+  const skippedRecent = [];
+  for (const f of pool) {
+    let hit = false;
+    let guardedOnly = false;
+    for (const filter of filters) {
+      if (!matchesFilter(f, filter, { now, silentDays }))
+        continue;
+      if (GUARDED.has(filter) && isRecent(f, now, recentDays)) {
+        guardedOnly = true;
+        continue;
+      }
+      hit = true;
+      break;
+    }
+    if (hit)
+      matched.push(f);
+    else if (guardedOnly)
+      skippedRecent.push(f);
+  }
+  return { matched, skippedRecent };
+}
+function findFriends(friends, text) {
+  const q = String(text != null ? text : "").trim().toLowerCase();
+  if (!q)
+    return [];
+  return (friends != null ? friends : []).filter((f) => f && f.userid !== ASSISTANT_ID).filter((f) => [f.name, f.alias, f.description, f.ens].some((v) => typeof v === "string" && v.toLowerCase().includes(q)));
+}
+function resolveFriend(friends, token) {
+  const q = String(token != null ? token : "").trim().toLowerCase();
+  if (!q)
+    return { match: null, candidates: [] };
+  const pool = (friends != null ? friends : []).filter((f) => f && f.userid !== ASSISTANT_ID);
+  const exact = pool.filter((f) => [f.name, f.alias].some((v) => typeof v === "string" && v.toLowerCase() === q));
+  if (exact.length === 1)
+    return { match: exact[0], candidates: exact };
+  if (exact.length > 1)
+    return { match: null, candidates: exact };
+  const partial = pool.filter((f) => [f.name, f.alias].some((v) => typeof v === "string" && v.toLowerCase().startsWith(q)) || typeof f.userid === "string" && f.userid.toLowerCase().startsWith(q));
+  if (partial.length === 1)
+    return { match: partial[0], candidates: partial };
+  return { match: null, candidates: partial };
+}
+
+// src/assistant.jsx
+var ASSISTANT_PEER = {
+  id: ASSISTANT_ID,
+  userId: ASSISTANT_ID,
+  alias: "Beagle Assistant",
+  address: "",
+  online: true,
+  app: true,
+  pinned: true,
+  agent: false,
+  pending: false,
+  via: null,
+  ping: null,
+  ip: "",
+  unread: 0,
+  lastMsg: "",
+  lastTime: "",
+  lastTs: 0,
+  lastDir: null,
+  acceptedAt: 0,
+  requestedAt: 0,
+  wire: "163",
+  avatarUrl: null,
+  punkId: null
+};
+var fmtDate = (ts, lang) => !ts ? lang === "zh" ? "\u4ECE\u672A" : "never" : new Date(ts).toLocaleDateString(lang === "zh" ? "zh-CN" : "en-GB", { year: "numeric", month: "short", day: "numeric" });
+var fmtAgo = (ts, now, lang) => {
+  if (!ts)
+    return lang === "zh" ? "\u4ECE\u672A" : "never";
+  const days = Math.floor((now - ts) / 864e5);
+  if (days <= 0)
+    return lang === "zh" ? "\u4ECA\u5929" : "today";
+  if (days === 1)
+    return lang === "zh" ? "1 \u5929\u524D" : "1 day ago";
+  return lang === "zh" ? `${days} \u5929\u524D` : `${days} days ago`;
+};
+var nameOf = (f) => f.alias || f.name || f.userid;
+function sinceLine(historySince, lang) {
+  if (!historySince)
+    return lang === "zh" ? "_\u57FA\u4E8E\u672C\u8BBE\u5907\u4E0A\u7684\u6D88\u606F\uFF08\u672C\u673A\u6682\u65E0\u5386\u53F2\u8BB0\u5F55\uFF09_" : "_based on messages on this device (no history here yet)_";
+  return lang === "zh" ? `_\u57FA\u4E8E\u672C\u8BBE\u5907\u81EA ${fmtDate(historySince, lang)} \u8D77\u7684\u6D88\u606F_` : `_based on messages on this device since ${fmtDate(historySince, lang)}_`;
+}
+function friendTable(rows, now, lang) {
+  return rows.map((f) => lang === "zh" ? `- **${nameOf(f)}** \u2014 \u6700\u540E\u6536\u5230 ${fmtAgo(f.lastInboundTs, now, lang)} \xB7 \u6536 ${f.inboundCount || 0} / \u53D1 ${f.outboundCount || 0}` : `- **${nameOf(f)}** \u2014 last heard ${fmtAgo(f.lastInboundTs, now, lang)} \xB7 in ${f.inboundCount || 0} / out ${f.outboundCount || 0}`).join("\n");
+}
+function helpText(lang) {
+  const intro = lang === "zh" ? "**Beagle \u52A9\u624B** \u2014 \u53EA\u5728\u672C\u673A\u8FD0\u884C\uFF0C\u4E0D\u4F1A\u628A\u4EFB\u4F55\u5185\u5BB9\u53D1\u5230\u7F51\u7EDC\u4E0A\u3002\n\n\u53EF\u7528\u547D\u4EE4\uFF1A" : "**Beagle Assistant** \u2014 runs on this machine only; nothing here is sent over the network.\n\nCommands:";
+  const cmds = actions_default.actions.map((a) => `- \`${a.usage}\` \u2014 ${a.summary}`).join("\n");
+  const filters = actions_default.filters.map((f) => `- \`${f.usage}\` \u2014 ${f.summary}`).join("\n");
+  const tail = lang === "zh" ? `\u7B5B\u9009\u6761\u4EF6\uFF08\u53EF\u7EC4\u5408\uFF0C\u53D6\u5E76\u96C6\uFF09\uFF1A
+${filters}
+
+\u6700\u8FD1 ${RECENT_DAYS} \u5929\u5185\u6DFB\u52A0\u7684\u597D\u53CB\u4E0D\u4F1A\u88AB"\u4ECE\u672A/\u6C89\u9ED8"\u7C7B\u7B5B\u9009\u9009\u4E2D\u3002\u5220\u9664\u6C38\u8FDC\u9700\u8981\u5148\u786E\u8BA4\u3002` : `Filters (combine them; a friend matching any one is listed):
+${filters}
+
+Friends added in the last ${RECENT_DAYS} days are never matched by the "never/silent" filters. Removal always asks first.`;
+  return `${intro}
+${cmds}
+
+${tail}`;
+}
+var seq = 0;
+var asMsg = (from, text, extra) => Object.assign({
+  id: `as-${Date.now()}-${seq++}`,
+  from,
+  time: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+  text
+}, extra);
+function AssistantPanel({ m, T, lang, onRemove }) {
+  const rows = m.assistant.rows || [];
+  const [sel, setSel] = React.useState(() => new Set(rows.map((r) => r.userid)));
+  const [busy, setBusy] = React.useState(false);
+  const [done, setDone] = React.useState(null);
+  if (!rows.length)
+    return null;
+  const toggle = (id) => setSel((s) => {
+    const n = new Set(s);
+    n.has(id) ? n.delete(id) : n.add(id);
+    return n;
+  });
+  const label = lang === "zh" ? `\u5220\u9664 ${sel.size} \u4F4D` : `Remove ${sel.size}`;
+  return /* @__PURE__ */ React.createElement("div", { style: { marginTop: 8, border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden" } }, rows.map((r) => /* @__PURE__ */ React.createElement("label", { key: r.userid, style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "7px 10px",
+    borderBottom: "1px solid var(--line)",
+    fontSize: 13,
+    cursor: done ? "default" : "pointer"
+  } }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: sel.has(r.userid),
+      disabled: !!done || busy,
+      onChange: () => toggle(r.userid)
+    }
+  ), /* @__PURE__ */ React.createElement("span", { style: { flex: 1 } }, nameOf(r)), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, r.userid.slice(0, 8), "\u2026"))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "8px 10px" } }, done ? /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12.5, color: "var(--faint)" } }, done) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Btn, { size: "sm", tone: "danger", disabled: busy || !sel.size, onClick: () => {
+    setBusy(true);
+    onRemove([...sel]).then((r) => {
+      setDone(lang === "zh" ? `\u5DF2\u5220\u9664 ${r.removed} \u4F4D${r.failed ? `\uFF0C${r.failed} \u4F4D\u5931\u8D25` : ""}` : `Removed ${r.removed}${r.failed ? `, ${r.failed} failed` : ""}`);
+    }).finally(() => setBusy(false));
+  } }, busy ? T.working || "Working\u2026" : label), /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, color: "var(--faint)" } }, lang === "zh" ? "\u53D6\u6D88\u52FE\u9009\u53EF\u4FDD\u7559" : "Untick anyone you want to keep"))));
+}
+function useAssistant({ lang, T, muted, onToggleMute, sound, flash, setAlert, onReloadFriends }) {
+  const [thread, setThread] = React.useState(() => [{ day: (/* @__PURE__ */ new Date()).toLocaleDateString() }, asMsg("them", helpText(lang))]);
+  const append = React.useCallback((...ms) => setThread((t) => t.concat(ms)), []);
+  React.useEffect(() => {
+    setThread((t) => t.length === 2 ? [t[0], asMsg("them", helpText(lang))] : t);
+  }, [lang]);
+  const fetchFriends = async () => {
+    const r = await fetch("/api/assistant/friends").then((x) => x.json());
+    return { friends: r.friends || [], historySince: r.historySince || null, now: r.now || Date.now(), ver: r.beagleVer || "" };
+  };
+  const listReply = (rows, skipped, data, title) => {
+    if (!rows.length) {
+      return `${title}
+
+${lang === "zh" ? "\u6CA1\u6709\u7B26\u5408\u7684\u597D\u53CB\u3002" : "No friends match."}
+
+${sinceLine(data.historySince, lang)}`;
+    }
+    const skip = skipped.length ? lang === "zh" ? `
+
+_\u8DF3\u8FC7\u4E86 ${skipped.length} \u4F4D\u6700\u8FD1 ${RECENT_DAYS} \u5929\u5185\u6DFB\u52A0\u7684\u597D\u53CB\u3002_` : `
+
+_${skipped.length} friend${skipped.length > 1 ? "s" : ""} added in the last ${RECENT_DAYS} days ${skipped.length > 1 ? "were" : "was"} skipped._` : "";
+    return `${title}
+
+${friendTable(rows, data.now, lang)}${skip}
+
+${sinceLine(data.historySince, lang)}`;
+  };
+  const ambiguous = (cands) => lang === "zh" ? `\u6709 ${cands.length} \u4F4D\u597D\u53CB\u7B26\u5408\uFF0C\u8BF7\u8BF4\u5F97\u66F4\u5177\u4F53\u4E00\u4E9B\uFF1A
+${cands.map((c) => `- ${nameOf(c)}`).join("\n")}` : `That matches ${cands.length} friends \u2014 be more specific:
+${cands.map((c) => `- ${nameOf(c)}`).join("\n")}`;
+  const notFound = (tok) => lang === "zh" ? `\u6CA1\u6709\u627E\u5230\u597D\u53CB "${tok}"\u3002` : `No friend matches "${tok}".`;
+  const handle = React.useCallback(async (text) => {
+    append(asMsg("me", text, { status: "read" }));
+    const cmd = parseCommand(text);
+    if (!cmd) {
+      return append(asMsg("them", lang === "zh" ? "\u6211\u53EA\u8BA4\u8BC6\u4EE5 `/` \u5F00\u5934\u7684\u547D\u4EE4\u3002\u8F93\u5165 `/help` \u770B\u770B\u80FD\u505A\u4EC0\u4E48\u3002" : "I only understand commands starting with `/`. Type `/help` to see them."));
+    }
+    if (cmd.ok === false) {
+      return append(asMsg("them", lang === "zh" ? "`/friends` \u9700\u8981 `list` \u6216 `remove`\uFF0C\u4F8B\u5982 `/friends list silent 90`\u3002" : "`/friends` needs `list` or `remove`, for example `/friends list silent 90`."));
+    }
+    try {
+      switch (cmd.name) {
+        case "help":
+          return append(asMsg("them", helpText(lang)));
+        case "status": {
+          const d = await fetchFriends();
+          const pending = d.friends.filter((f) => f.pending).length;
+          return append(asMsg("them", lang === "zh" ? `**\u72B6\u6001**
+
+- \u597D\u53CB\uFF1A${d.friends.length}
+- \u5F85\u5BF9\u65B9\u63A5\u53D7\uFF1A${pending}
+- \u672C\u673A\u5386\u53F2\u8D77\u81EA\uFF1A${fmtDate(d.historySince, lang)}
+- \u7248\u672C\uFF1A${d.ver}` : `**Status**
+
+- Friends: ${d.friends.length}
+- Waiting to be accepted: ${pending}
+- History on this device since: ${fmtDate(d.historySince, lang)}
+- Version: ${d.ver}`));
+        }
+        case "friends-list": {
+          const { filters, silentDays, unknown } = parseFilters(cmd.args);
+          if (unknown.length) {
+            return append(asMsg("them", lang === "zh" ? `\u4E0D\u8BA4\u8BC6\u7684\u7B5B\u9009\u6761\u4EF6\uFF1A${unknown.join(", ")}\u3002\u53EF\u7528\uFF1A${actions_default.filters.map((f) => f.name).join(", ")}\u3002` : `I don't know the filter${unknown.length > 1 ? "s" : ""} ${unknown.join(", ")}. Try: ${actions_default.filters.map((f) => f.name).join(", ")}.`));
+          }
+          const d = await fetchFriends();
+          const { matched, skippedRecent } = selectFriends(d.friends, filters, { now: d.now, silentDays });
+          const title = filters.length ? `**${filters.join(" + ")}**${filters.includes("silent") ? ` (${silentDays}d)` : ""} \u2014 ${matched.length}` : lang === "zh" ? `**\u5168\u90E8\u597D\u53CB** \u2014 ${matched.length}` : `**All friends** \u2014 ${matched.length}`;
+          return append(asMsg("them", listReply(matched, skippedRecent, d, title)));
+        }
+        case "friends-remove": {
+          const { filters, silentDays, unknown } = parseFilters(cmd.args);
+          if (unknown.length || !filters.length) {
+            return append(asMsg("them", lang === "zh" ? `\u5220\u9664\u9700\u8981\u7B5B\u9009\u6761\u4EF6\uFF0C\u4F8B\u5982 \`/friends remove never-messaged\`\u3002\u53EF\u7528\uFF1A${actions_default.filters.map((f) => f.name).join(", ")}\u3002` : `Removing needs a filter, for example \`/friends remove never-messaged\`. Available: ${actions_default.filters.map((f) => f.name).join(", ")}.`));
+          }
+          const d = await fetchFriends();
+          const { matched, skippedRecent } = selectFriends(d.friends, filters, { now: d.now, silentDays });
+          const title = lang === "zh" ? `**\u5C06\u8981\u5220\u9664 ${matched.length} \u4F4D\u597D\u53CB** \u2014 \u8BF7\u5148\u6838\u5BF9\u8FD9\u4EFD\u540D\u5355` : `**${matched.length} friend${matched.length === 1 ? "" : "s"} to remove** \u2014 check the list first`;
+          return append(asMsg(
+            "them",
+            listReply(matched, skippedRecent, d, title),
+            matched.length ? { assistant: { kind: "confirm", rows: matched } } : void 0
+          ));
+        }
+        case "find": {
+          const q = cmd.args.join(" ");
+          if (!q)
+            return append(asMsg("them", lang === "zh" ? "\u7528\u6CD5\uFF1A`/find <\u6587\u5B57>`" : "Usage: `/find <text>`"));
+          const d = await fetchFriends();
+          const rows = findFriends(d.friends, q);
+          const title = lang === "zh" ? `**"${q}"** \u2014 ${rows.length} \u4F4D` : `**"${q}"** \u2014 ${rows.length} found`;
+          return append(asMsg("them", listReply(rows, [], d, title)));
+        }
+        case "rename": {
+          const [tok, ...rest] = cmd.args;
+          const alias = rest.join(" ").trim();
+          if (!tok || !alias)
+            return append(asMsg("them", lang === "zh" ? "\u7528\u6CD5\uFF1A`/rename <\u597D\u53CB> <\u65B0\u540D\u5B57>`" : "Usage: `/rename <friend> <new name>`"));
+          const d = await fetchFriends();
+          const { match, candidates } = resolveFriend(d.friends, tok);
+          if (!match)
+            return append(asMsg("them", candidates.length ? ambiguous(candidates) : notFound(tok)));
+          const was = nameOf(match);
+          await dkApi.alias(match.userid, alias);
+          if (onReloadFriends)
+            onReloadFriends();
+          return append(asMsg("them", lang === "zh" ? `\u5DF2\u628A "${was}" \u6539\u540D\u4E3A "${alias}"\u3002` : `Renamed "${was}" to "${alias}".`));
+        }
+        case "mute":
+        case "unmute": {
+          const tok = cmd.args.join(" ").trim();
+          if (!tok)
+            return append(asMsg("them", `${lang === "zh" ? "\u7528\u6CD5" : "Usage"}: \`/${cmd.name} <friend>\``));
+          const d = await fetchFriends();
+          const { match, candidates } = resolveFriend(d.friends, tok);
+          if (!match)
+            return append(asMsg("them", candidates.length ? ambiguous(candidates) : notFound(tok)));
+          const isMuted = (muted || []).includes(match.userid);
+          const want = cmd.name === "mute";
+          if (isMuted !== want)
+            onToggleMute(match.userid);
+          return append(asMsg("them", want ? lang === "zh" ? `\u5DF2\u9759\u97F3 "${nameOf(match)}"\u3002` : `Muted "${nameOf(match)}".` : lang === "zh" ? `\u5DF2\u53D6\u6D88\u9759\u97F3 "${nameOf(match)}"\u3002` : `Unmuted "${nameOf(match)}".`));
+        }
+        case "sound":
+        case "flash": {
+          const word = (cmd.args[0] || "").toLowerCase();
+          if (word !== "on" && word !== "off") {
+            return append(asMsg("them", `${lang === "zh" ? "\u7528\u6CD5" : "Usage"}: \`/${cmd.name} on|off\``));
+          }
+          const on = word === "on";
+          setAlert(cmd.name, on);
+          const what = cmd.name === "sound" ? lang === "zh" ? "\u63D0\u793A\u97F3" : "Sound" : lang === "zh" ? "\u7A97\u53E3\u95EA\u70C1" : "Window flash";
+          return append(asMsg("them", lang === "zh" ? `${what}\u5DF2${on ? "\u5F00\u542F" : "\u5173\u95ED"}\u3002` : `${what} ${on ? "on" : "off"}.`));
+        }
+        default:
+          return append(asMsg("them", lang === "zh" ? `\u4E0D\u8BA4\u8BC6\u7684\u547D\u4EE4 \`/${cmd.name}\`\u3002\u8F93\u5165 \`/help\` \u770B\u770B\u53EF\u7528\u547D\u4EE4\u3002` : `I don't know \`/${cmd.name}\`. Type \`/help\` for the list.`));
+      }
+    } catch (e) {
+      return append(asMsg("them", lang === "zh" ? `\u51FA\u9519\u4E86\uFF1A${e && e.message || e}` : `That failed: ${e && e.message || e}`));
+    }
+  }, [append, lang, muted, onToggleMute, setAlert, onReloadFriends]);
+  const removeFriends = React.useCallback(async (ids) => {
+    let removed = 0;
+    const failed = [];
+    for (const id of ids) {
+      try {
+        const r = await dkApi.remove(id);
+        if (r && r.ok === false)
+          failed.push(id);
+        else
+          removed++;
+      } catch (e) {
+        failed.push(id);
+      }
+    }
+    if (onReloadFriends)
+      onReloadFriends();
+    append(asMsg("them", failed.length ? lang === "zh" ? `\u5DF2\u5220\u9664 ${removed} \u4F4D\uFF0C${failed.length} \u4F4D\u5931\u8D25\u3002` : `Removed ${removed}, ${failed.length} failed.` : lang === "zh" ? `\u5DF2\u5220\u9664 ${removed} \u4F4D\u597D\u53CB\u3002` : `Removed ${removed} friend${removed === 1 ? "" : "s"}.`));
+    return { removed, failed: failed.length };
+  }, [append, lang, onReloadFriends]);
+  return { thread, handle, removeFriends };
+}
+
 // src/chat.jsx
 function RequestsBlock({ T, requests, onAct }) {
   const [acted, setActed] = React.useState({});
@@ -529,7 +1145,7 @@ function PeerRow({ peer, T, active, onClick, muted }) {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis"
-  } }, peer.alias || shortKey(peer.userId, 8, 5)), peer.agent && /* @__PURE__ */ React.createElement(Icon, { name: "bot", size: 13, color: "var(--faint)", stroke: 2 }), muted && /* @__PURE__ */ React.createElement(Icon, { name: "bellOff", size: 12, color: "var(--faint)", stroke: 2, title: T && T.mutedTag || "sound muted" }), peer.wire === "64" && /* @__PURE__ */ React.createElement(Tag, { tone: "off", style: { height: 15, fontSize: 9.5, padding: "0 4px" } }, "w64")), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 2 } }, peer.ip ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, peer.ip), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)", fontSize: 11 } }, "\xB7")) : null, /* @__PURE__ */ React.createElement("span", { style: {
+  } }, peer.alias || shortKey(peer.userId, 8, 5)), peer.agent && /* @__PURE__ */ React.createElement(Icon, { name: "bot", size: 13, color: "var(--faint)", stroke: 2 }), peer.app && /* @__PURE__ */ React.createElement(Tag, { tone: "accent", style: { height: 15, fontSize: 9.5, padding: "0 4px" } }, "APP"), muted && /* @__PURE__ */ React.createElement(Icon, { name: "bellOff", size: 12, color: "var(--faint)", stroke: 2, title: T && T.mutedTag || "sound muted" }), peer.wire === "64" && /* @__PURE__ */ React.createElement(Tag, { tone: "off", style: { height: 15, fontSize: 9.5, padding: "0 4px" } }, "w64")), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 2 } }, peer.ip ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, peer.ip), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)", fontSize: 11 } }, "\xB7")) : null, /* @__PURE__ */ React.createElement("span", { style: {
     fontSize: 11,
     color: "var(--dim)",
     whiteSpace: "nowrap",
@@ -585,6 +1201,8 @@ function PeerSidebar({ T, peers, requests, activeId, onSelect, onAct, onAdd, pre
     const s = (p.alias || "") + " " + p.userId + " " + p.ip;
     return s.toLowerCase().includes(q.toLowerCase());
   }).slice().sort((a, b) => {
+    if (!!a.pinned !== !!b.pinned)
+      return a.pinned ? -1 : 1;
     const ta = dkActivityTs(a), tb = dkActivityTs(b);
     if (ta !== tb)
       return tb - ta;
@@ -1250,7 +1868,7 @@ 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, onTheater, onDelete, onCancel, onRetry, onRetryMsg, onReveal, onOpenFile, onCall, onFormSubmit, onNameCard, answered, selMode, selected, onToggleSel, busy, isGroup }) {
+function Msg({ m, peer, T, lang, onTheater, onDelete, onCancel, onRetry, onRetryMsg, onReveal, onOpenFile, onCall, onFormSubmit, onNameCard, onAssistantRemove, 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;
@@ -1374,6 +1992,8 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onRetryMsg, o
           {
             src: dkFileUrl(m.file.name),
             alt: m.file.name,
+            loading: "lazy",
+            decoding: "async",
             onError: (e) => {
               const w = e.currentTarget.closest("[data-media]");
               if (w)
@@ -1577,7 +2197,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onRetryMsg, o
         letterSpacing: -0.1,
         wordBreak: "break-word"
       } }, /* @__PURE__ */ React.createElement(MarkdownText, { text: read.text, onNameCard })));
-    })(), read.form && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 6 } }, /* @__PURE__ */ React.createElement(DkChatForm, { form: read.form, submitted, peer, onSubmit: onFormSubmit })), /* @__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), (() => {
+    })(), read.form && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 6 } }, /* @__PURE__ */ React.createElement(DkChatForm, { form: read.form, submitted, peer, onSubmit: onFormSubmit })), m.assistant && onAssistantRemove && /* @__PURE__ */ React.createElement(AssistantPanel, { m, T, lang, onRemove: onAssistantRemove }), /* @__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), (() => {
       const sentDone = mine && m.status && m.status !== "queued" && m.status !== "sending" && m.status !== "failed";
       const via = !mine ? m.via : sentDone ? m.via === "offline" ? "offline" : "online" : null;
       if (!via)
@@ -1622,8 +2242,10 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onRetryMsg, o
     ) : mine && m.via === "offline" && m.status !== "queued" && m.status !== "sending" ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, stroke: 2.2, color: "#f59e0b", title: T.viaOutOffline || "posted to the offline relay \u2014 they get it when they come online" }) : mine && m.status === "sent" && m.confirmed === false ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, stroke: 2.2, color: "var(--faint)", title: T.sentUnconfirmed || "sent \u2014 not confirmed by the peer" }) : 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, peers, onOpenChat, thread: threadProp, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, muted, onToggleMute, phone, onBack }) {
+function Conversation({ T, peer, lang, peers, onOpenChat, thread: threadProp, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, hasEarlier, onLoadEarlier, onAssistantRemove, muted, onToggleMute, phone, onBack }) {
   const scrollRef = React.useRef(null);
+  const prependRef = React.useRef(null);
+  const [earlierBusy, setEarlierBusy] = React.useState(false);
   const isGroup = React.useMemo(() => dkThreadIsGroup(threadProp), [threadProp]);
   const followScrollRef = React.useRef(true);
   const fileRef = React.useRef(null);
@@ -1701,9 +2323,30 @@ function Conversation({ T, peer, lang, peers, onOpenChat, thread: threadProp, on
     followScrollRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
   };
   React.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    const pre = prependRef.current;
+    if (pre && el && el.scrollHeight !== pre.h) {
+      el.scrollTop = pre.top + (el.scrollHeight - pre.h);
+      prependRef.current = null;
+      return;
+    }
     if (followScrollRef.current)
       scrollToBottom();
   }, [peer.id, thread]);
+  React.useEffect(() => {
+    prependRef.current = null;
+    setEarlierBusy(false);
+  }, [peer.id]);
+  const loadEarlier = () => {
+    const el = scrollRef.current;
+    if (!onLoadEarlier || earlierBusy)
+      return;
+    if (el)
+      prependRef.current = { h: el.scrollHeight, top: el.scrollTop };
+    followScrollRef.current = false;
+    setEarlierBusy(true);
+    Promise.resolve(onLoadEarlier()).finally(() => setEarlierBusy(false));
+  };
   const toggleSel = (id) => setSel((s) => {
     const n = new Set(s);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -1904,7 +2547,7 @@ function Conversation({ T, peer, lang, peers, onOpenChat, thread: threadProp, on
         style: { width: 40, height: 44, flexShrink: 0, border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", padding: 0 }
       },
       /* @__PURE__ */ React.createElement(Icon, { name: "chevronLeft", size: 26, stroke: 2.2, color: "var(--accent)" })
-    ), /* @__PURE__ */ React.createElement("div", { onClick: () => setPubProfile(true), title: T && T.pubOpen || "View public profile", style: { cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 34, radius: 8 })), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0, flex: phone ? 1 : void 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 } }, /* @__PURE__ */ React.createElement("span", { onClick: () => setPubProfile(true), style: { fontFamily: peer.alias ? "var(--ui)" : "var(--mono)", fontSize: 15, fontWeight: 700, color: "var(--text)", cursor: "pointer", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 } }, peer.alias || shortKey(peer.userId, phone ? 6 : 10, phone ? 4 : 6)), peer.agent && !phone && /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, "agent"), isGroup && !phone && /* @__PURE__ */ React.createElement(Tag, null, T && T.groupTag || "group"), !phone && /* @__PURE__ */ React.createElement(RouteTag, { peer })), phone ? /* @__PURE__ */ React.createElement("div", { style: { marginTop: 2, display: "flex" } }, /* @__PURE__ */ React.createElement(RouteTag, { peer })) : /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 2 } }, /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.userId, title: peer.userId }, shortKey(peer.userId, 10, 6)), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement("button", { onClick: () => onOpenNet(peer), title: T && T.openNet || "Network view", style: { background: "none", border: "none", cursor: "pointer", padding: 0, color: "var(--accent)", display: "inline-flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Icon, { name: "network", size: 12, stroke: 2 })), /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.ip, title: peer.ip }, peer.ip), peer.address && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement("div", { onClick: () => setPubProfile(true), title: T && T.pubOpen || "View public profile", style: { cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 34, radius: 8 })), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0, flex: phone ? 1 : void 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 } }, /* @__PURE__ */ React.createElement("span", { onClick: () => setPubProfile(true), style: { fontFamily: peer.alias ? "var(--ui)" : "var(--mono)", fontSize: 15, fontWeight: 700, color: "var(--text)", cursor: "pointer", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 } }, peer.alias || shortKey(peer.userId, phone ? 6 : 10, phone ? 4 : 6)), peer.app && !phone && /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, "APP"), peer.agent && !phone && /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, "agent"), isGroup && !phone && /* @__PURE__ */ React.createElement(Tag, null, T && T.groupTag || "group"), !phone && !peer.app && /* @__PURE__ */ React.createElement(RouteTag, { peer })), phone ? /* @__PURE__ */ React.createElement("div", { style: { marginTop: 2, display: "flex" } }, /* @__PURE__ */ React.createElement(RouteTag, { peer })) : /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 2 } }, /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.userId, title: peer.userId }, shortKey(peer.userId, 10, 6)), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement("button", { onClick: () => onOpenNet(peer), title: T && T.openNet || "Network view", style: { background: "none", border: "none", cursor: "pointer", padding: 0, color: "var(--accent)", display: "inline-flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Icon, { name: "network", size: 12, stroke: 2 })), /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.ip, title: peer.ip }, peer.ip), peer.address && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement(
       Mono,
       {
         size: 11.5,
@@ -1963,15 +2606,17 @@ ${peer.address}`
       fontSize: 12.5,
       color: "var(--text)"
     } }, /* @__PURE__ */ React.createElement(Icon, { name: "clock", size: 13, stroke: 2.2, color: "#d29922" }), /* @__PURE__ */ React.createElement("span", null, T.pendingFriend || "Waiting for them to accept your friend request \u2014 messages will queue and deliver once they do.")),
-    /* @__PURE__ */ React.createElement("div", { ref: scrollRef, onScroll: updateFollowScroll, style: { flex: 1, overflow: "auto", padding: phone ? "12px 10px" : "18px 22px", WebkitOverflowScrolling: "touch" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 1200, margin: "0 auto" } }, thread.filter((m) => m.day || !hidden.has(m.id)).map((m, i) => m.day ? /* @__PURE__ */ React.createElement("div", { key: i, style: { display: "flex", justifyContent: "center", margin: "14px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 600, color: "var(--faint)", background: "var(--chip)", padding: "3px 10px", borderRadius: 999 } }, m.day)) : /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { ref: scrollRef, onScroll: updateFollowScroll, style: { flex: 1, overflow: "auto", padding: phone ? "12px 10px" : "18px 22px", WebkitOverflowScrolling: "touch" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 1200, margin: "0 auto" } }, hasEarlier && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "center", margin: "4px 0 10px" } }, /* @__PURE__ */ React.createElement(Btn, { size: "sm", onClick: loadEarlier, disabled: earlierBusy }, earlierBusy ? T.loadingEarlier || "Loading\u2026" : T.loadEarlier || "Load earlier messages")), thread.filter((m) => m.day || !hidden.has(m.id)).map((m, i) => m.day ? /* @__PURE__ */ React.createElement("div", { key: i, style: { display: "flex", justifyContent: "center", margin: "14px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 600, color: "var(--faint)", background: "var(--chip)", padding: "3px 10px", borderRadius: 999 } }, m.day)) : /* @__PURE__ */ React.createElement(
       Msg,
       {
         key: m.id || i,
         m,
         peer,
         T,
+        lang,
         isGroup,
         onTheater: setTheater,
+        onAssistantRemove,
         onDelete: (id) => doDelete([id]),
         onCancel: doCancel,
         onRetry: doRetry,
@@ -2123,12 +2768,12 @@ function MenuItem({ icon, label, onClick, danger }) {
 function ChatEmpty({ T }) {
   return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, color: "var(--faint)", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "message", size: 40, stroke: 1.4, color: "var(--line)" }), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 13 } }, T.pickPeer));
 }
-function ChatTab({ T, lang, peers, requests, activeId, thread, onSelect, onAct, onAdd, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, prefillAddr, onPrefillConsumed, muted, onToggleMute, phone, onBack }) {
+function ChatTab({ T, lang, peers, requests, activeId, thread, onSelect, onAct, onAdd, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, hasEarlier, onLoadEarlier, onAssistantRemove, prefillAddr, onPrefillConsumed, muted, onToggleMute, phone, onBack }) {
   const peer = peers.find((p) => p.id === activeId);
   if (phone) {
-    return peer ? /* @__PURE__ */ React.createElement(Conversation, { T, peer, lang, peers, onOpenChat: onSelect, thread, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, muted: !!muted && muted.includes(peer.id), onToggleMute, phone: true, onBack }) : /* @__PURE__ */ React.createElement(PeerSidebar, { T, peers, requests, activeId, onSelect, onAct, onAdd, prefillAddr, onPrefillConsumed, muted, wide: true });
+    return peer ? /* @__PURE__ */ React.createElement(Conversation, { T, peer, lang, peers, onOpenChat: onSelect, thread, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, hasEarlier, onLoadEarlier, onAssistantRemove, muted: !!muted && muted.includes(peer.id), onToggleMute, phone: true, onBack }) : /* @__PURE__ */ React.createElement(PeerSidebar, { T, peers, requests, activeId, onSelect, onAct, onAdd, prefillAddr, onPrefillConsumed, muted, wide: true });
   }
-  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React.createElement(PeerSidebar, { T, peers, requests, activeId, onSelect, onAct, onAdd, prefillAddr, onPrefillConsumed, muted }), peer ? /* @__PURE__ */ React.createElement(Conversation, { T, peer, lang, peers, onOpenChat: onSelect, thread, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, muted: !!muted && muted.includes(peer.id), onToggleMute }) : /* @__PURE__ */ React.createElement(ChatEmpty, { T }));
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React.createElement(PeerSidebar, { T, peers, requests, activeId, onSelect, onAct, onAdd, prefillAddr, onPrefillConsumed, muted }), peer ? /* @__PURE__ */ React.createElement(Conversation, { T, peer, lang, peers, onOpenChat: onSelect, thread, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, hasEarlier, onLoadEarlier, onAssistantRemove, muted: !!muted && muted.includes(peer.id), onToggleMute }) : /* @__PURE__ */ React.createElement(ChatEmpty, { T }));
 }
 Object.assign(window, { ChatTab });
 
@@ -4913,6 +5558,8 @@ var STR = {
     autoAcceptLabel: "Auto-accept friend requests",
     autoAcceptSub: "Off: requests wait in the sidebar for your approval.",
     groupSenderUnknown: "The group relays only this display name. Register Beagle as a group agent (/agent add <beagle address> in the group) to receive full member identities you can add as friends.",
+    loadEarlier: "Load earlier messages",
+    loadingEarlier: "Loading\u2026",
     pendingFriend: "Waiting for them to accept your friend request \u2014 messages will queue and deliver once they do.",
     cancelling: "Cancelling\u2026",
     cancelled: "Transfer cancelled",
@@ -5105,6 +5752,8 @@ var STR = {
     autoAcceptLabel: "\u81EA\u52A8\u63A5\u53D7\u597D\u53CB\u8BF7\u6C42",
     autoAcceptSub: "\u5173\u95ED\u540E\uFF0C\u597D\u53CB\u8BF7\u6C42\u4F1A\u7B49\u5F85\u4F60\u5728\u4FA7\u8FB9\u680F\u624B\u52A8\u786E\u8BA4\u3002",
     groupSenderUnknown: "\u7FA4\u670D\u52A1\u53EA\u8F6C\u53D1\u4E86\u663E\u793A\u540D\uFF0C\u62FF\u4E0D\u5230\u8BE5\u6210\u5458\u7684\u5B8C\u6574\u8EAB\u4EFD\u3002\u5728\u7FA4\u91CC\u6267\u884C /agent add <beagle \u5730\u5740> \u628A Beagle \u6CE8\u518C\u4E3A\u7FA4 agent \u540E\uFF0C\u5373\u53EF\u6536\u5230\u5B8C\u6574\u8EAB\u4EFD\u5E76\u4E00\u952E\u52A0\u597D\u53CB\u3002",
+    loadEarlier: "\u52A0\u8F7D\u66F4\u65E9\u7684\u6D88\u606F",
+    loadingEarlier: "\u52A0\u8F7D\u4E2D\u2026",
     pendingFriend: "\u7B49\u5F85\u5BF9\u65B9\u63A5\u53D7\u597D\u53CB\u8BF7\u6C42 \u2014 \u6D88\u606F\u4F1A\u5148\u6392\u961F\uFF0C\u5BF9\u65B9\u63A5\u53D7\u540E\u81EA\u52A8\u9001\u8FBE\u3002",
     cancelling: "\u6B63\u5728\u53D6\u6D88\u2026",
     cancelled: "\u5DF2\u53D6\u6D88\u4F20\u8F93",
@@ -5449,7 +6098,7 @@ function DkApp() {
     sessionStorage.setItem(key, "1");
     window.location.reload();
   }, [me && me.beagleVer]);
-  const peers = data.peers;
+  const peers = React.useMemo(() => [ASSISTANT_PEER].concat(data.peers || []), [data.peers]);
   const [pendingAddr, setPendingAddr] = React.useState(() => dkParseDeepLinkAddress());
   React.useEffect(() => {
     const onHash = () => {
@@ -5513,6 +6162,16 @@ function DkApp() {
     flash: t.alertFlash !== false,
     muted: mutedIds
   });
+  const assistant = useAssistant({
+    lang: t.lang,
+    T,
+    muted: mutedIds,
+    onToggleMute,
+    sound: t.alertSound !== false,
+    flash: t.alertFlash !== false,
+    setAlert: (which, on) => setTweak(which === "sound" ? "alertSound" : "alertFlash", on),
+    onReloadFriends: () => data.refresh()
+  });
   const callCtl = useCallController(me.userId, (peerId, video, direction) => {
     const text = `WebRTC ${video ? "video" : "audio"} call: ${direction}`;
     dkApi.logLocal(peerId, direction === "outgoing" ? "out" : "in", text).then(() => {
@@ -5575,7 +6234,9 @@ function DkApp() {
   React.useEffect(() => {
     if (!activeId)
       return;
-    data.loadThread(activeId);
+    if (activeId === ASSISTANT_ID)
+      return;
+    data.loadThread(activeId, { reset: true });
     dkApi.markRead(activeId).then(data.refresh);
     const iv = setInterval(() => {
       data.loadThread(activeId);
@@ -5618,6 +6279,10 @@ function DkApp() {
   const onSend = (text) => {
     if (!activeId || !text || !text.trim())
       return;
+    if (activeId === ASSISTANT_ID) {
+      assistant.handle(text.trim());
+      return;
+    }
     dkApi.send(activeId, text.trim()).then(() => data.loadThread(activeId)).then(data.refresh);
   };
   const peerTakesRtcFile = (id) => {
@@ -5725,7 +6390,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, onBack: closeConversation, 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(""), 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 }), tab === "profile" && /* @__PURE__ */ React.createElement(ProfileTab, { T, me, onEdit, t, setTweak, onSetAvatar: (p) => dkApi.setProfileFull(p).then((r) => {
+  } }, /* @__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, 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, 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 }), tab === "profile" && /* @__PURE__ */ React.createElement(ProfileTab, { T, me, onEdit, t, setTweak, onSetAvatar: (p) => dkApi.setProfileFull(p).then((r) => {
     data.refresh();
     return r;
   }) })), phone && !inConversation && /* @__PURE__ */ React.createElement("div", { style: { flexShrink: 0, display: "flex", borderTop: "1px solid var(--line)", background: "var(--rail)", paddingBottom: "env(safe-area-inset-bottom, 0px)" } }, phoneNav.map((n) => /* @__PURE__ */ React.createElement(TabBarBtn, { key: n.id, icon: n.icon, label: n.label, active: n.active, badge: n.badge, onClick: n.go }))), data.locked && /* @__PURE__ */ React.createElement(

package/package.json

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