0.3.1: @-completion of agent names, @channel, @here and @all in the chat box 0bfe88762caa

## 0.3.1

- **Added: @-completion in the chat box.** Typing `@` lists the agents and `@channel`, `@here` and `@all`, narrowing as you type, matching the start of a name or of any part of it (`@kim` finds kimi-bubblebobble, `@bub` too); arrow keys move, Tab or Enter fills the name in, Escape closes.

  "version": "0.3.1",

      // Names for @-completion: every agent, its project, presence; @channel, @here, @all.

      const names = this.model.agents

        .filter((a) => !a.disabled)

        .map((a) => ({ name: a.name, detail: `${a.kind} · #${a.project} · ${a.presence}` }))

        .concat([

          { name: "channel", detail: "every agent who belongs in this channel" },

          { name: "here", detail: "every agent online in this channel" },

          { name: "all", detail: "every agent, everywhere" },

        ]);

      void this.panel.webview.postMessage({ type: "render", html: render(m.items, thread?.items, this.openThread, replies), brief: brief ?? "", purpose, names });

form { position: relative; display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--vscode-panel-border); }

#ac { position: absolute; left: 16px; bottom: 100%; margin-bottom: 2px; min-width: 280px; max-height: 220px; overflow-y: auto; background: var(--vscode-editorSuggestWidget-background); border: 1px solid var(--vscode-editorSuggestWidget-border); color: var(--vscode-editorSuggestWidget-foreground); z-index: 10; }

#ac[hidden] { display: none; }

#ac div { padding: 3px 8px; cursor: pointer; display: flex; gap: 10px; justify-content: space-between; }

#ac div.on { background: var(--vscode-editorSuggestWidget-selectedBackground); color: var(--vscode-editorSuggestWidget-selectedForeground, inherit); }

#ac .d { color: var(--vscode-descriptionForeground); font-size: 11px; }

<form id="f"><div id="ac" role="listbox" hidden></div><textarea id="t" placeholder="Write as yourself. @name mentions an agent. Ctrl+Enter sends."></textarea><button id="b" type="submit">Send</button></form>

// @-completion of agent names.

const ac = document.getElementById("ac");

let names = [], shown = [], sel = 0, at = -1;

function token() {

  const upto = t.value.slice(0, t.selectionStart);

  const m = /(^|[\s(])@([a-z0-9-]*)$/i.exec(upto);

  return m ? { start: upto.length - m[2].length - 1, word: m[2].toLowerCase() } : null;

}

function close() { ac.hidden = true; shown = []; at = -1; }

function draw() {

  ac.innerHTML = "";

  shown.forEach((n, i) => {

    const d = document.createElement("div");

    d.className = i === sel ? "on" : "";

    d.setAttribute("role", "option");

    const a = document.createElement("span"); a.textContent = "@" + n.name;

    const b = document.createElement("span"); b.className = "d"; b.textContent = n.detail;

    d.append(a, b);

    d.addEventListener("mousedown", (e) => { e.preventDefault(); pick(i); });

    ac.appendChild(d);

  });

  ac.hidden = !shown.length;

  const on = ac.children[sel]; if (on) on.scrollIntoView({ block: "nearest" });

}

function suggest() {

  const tk = token();

  if (!tk) return close();

  at = tk.start;

  const w = tk.word;

  const starts = names.filter((n) => n.name.startsWith(w));

  const parts = names.filter((n) => !n.name.startsWith(w) && n.name.split("-").some((p) => p.startsWith(w)));

  shown = starts.concat(parts).slice(0, 12);

  sel = 0;

  draw();

}

function pick(i) {

  const n = shown[i]; if (!n || at < 0) return;

  const end = t.selectionStart;

  t.value = t.value.slice(0, at) + "@" + n.name + " " + t.value.slice(end);

  const caret = at + n.name.length + 2;

  t.setSelectionRange(caret, caret);

  close(); t.focus();

}

t.addEventListener("input", suggest);

t.addEventListener("click", suggest);

t.addEventListener("blur", () => setTimeout(close, 100));

t.addEventListener("keydown", (e) => {

  if (ac.hidden) return;

  if (e.key === "ArrowDown") { e.preventDefault(); sel = (sel + 1) % shown.length; draw(); }

  else if (e.key === "ArrowUp") { e.preventDefault(); sel = (sel - 1 + shown.length) % shown.length; draw(); }

  else if ((e.key === "Enter" && !e.ctrlKey && !e.metaKey) || e.key === "Tab") { e.preventDefault(); e.stopImmediatePropagation(); pick(sel); }

  else if (e.key === "Escape") { e.preventDefault(); close(); }

}, true);

t.addEventListener("keydown", (e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { close(); send(e); } });

    if (m.names) names = m.names;