@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/components/chat/ComposerCommands.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useMemo } from "react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+/** Built-in composer slash commands. More can land here later. */
+export type SlashCommandId = "invite" | "new" | "tools";
+
+export interface SlashCommand {
+  id: SlashCommandId;
+  /** Token after `/` — typed and shown as `/invite`. */
+  slash: string;
+  label: string;
+  hint: string;
+  /** After picking the command, open the agent list (`/invite `). */
+  needsAgents?: boolean;
+}
+
+/** Which commands the current chat can offer. */
+export function buildSlashCommands(opts: {
+  canInvite?: boolean;
+  canNewSession?: boolean;
+  canToggleTools?: boolean;
+}): SlashCommand[] {
+  const out: SlashCommand[] = [];
+  if (opts.canInvite) {
+    out.push({
+      id: "invite",
+      slash: "invite",
+      label: t("project.groups.cmd_invite_label"),
+      hint: t("project.groups.cmd_invite_hint"),
+      needsAgents: true,
+    });
+  }
+  if (opts.canNewSession) {
+    out.push({
+      id: "new",
+      slash: "new",
+      label: t("project.groups.cmd_new_label"),
+      hint: t("project.groups.cmd_new_hint"),
+    });
+  }
+  if (opts.canToggleTools) {
+    out.push({
+      id: "tools",
+      slash: "tools",
+      label: t("project.groups.cmd_tools_label"),
+      hint: t("project.groups.cmd_tools_hint"),
+    });
+  }
+  return out;
+}
+
+/** Typing `/` or `/inv` (no space yet) → command menu. */
+export function activeSlashCommand(value: string): { query: string } | null {
+  const m = value.match(/^\s*\/([A-Za-z0-9_-]*)$/);
+  return m ? { query: m[1] } : null;
+}
+
+/**
+ * After `/invite ` — incomplete agent slug only.
+ * `/invite andy ` or `/invite andy hola` → closed (user composing the message).
+ */
+export function activeInviteArg(value: string): { query: string } | null {
+  const m = value.match(/^\s*\/invite\s+([A-Za-z0-9_-]*)$/i);
+  return m ? { query: m[1] } : null;
+}
+
+/** Full send line: `/invite andy [message…]`. */
+export function parseInviteCommand(text: string): { slug: string; message: string } | null {
+  const m = text.trim().match(/^\/invite\s+([A-Za-z0-9_-]+)(?:\s+([\s\S]*))?$/i);
+  if (!m) return null;
+  return { slug: m[1], message: (m[2] || "").trim() };
+}
+
+/** Ensure the invited agent is @mentioned so the cascade addresses them. */
+export function messageForInvite(slug: string, message: string): string {
+  const body = message.trim();
+  if (!body) return `@${slug}`;
+  if (new RegExp(`(?:^|[\\s([{])@${slug}\\b`, "i").test(body)) return body;
+  return `@${slug} ${body}`;
+}
+
+export function filterSlashCommands(list: SlashCommand[], query: string): SlashCommand[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return list;
+  return list.filter(
+    (c) => c.slash.startsWith(q) || c.label.toLowerCase().includes(q) || c.id.includes(q),
+  );
+}
+
+interface Props {
+  commands: SlashCommand[];
+  query: string;
+  activeIndex: number;
+  onActiveIndexChange: (i: number) => void;
+  onPick: (cmd: SlashCommand) => void;
+  docked?: boolean;
+}
+
+/**
+ * Drop-in list of `/` commands under the token strip.
+ * Agent args for `/invite` live in ComposerSuggest — this is commands only.
+ */
+export function ComposerCommands({
+  commands,
+  query,
+  activeIndex,
+  onActiveIndexChange,
+  onPick,
+  docked = false,
+}: Props) {
+  const filtered = useMemo(() => filterSlashCommands(commands, query), [commands, query]);
+
+  useEffect(() => {
+    if (activeIndex >= filtered.length) {
+      onActiveIndexChange(Math.max(0, filtered.length - 1));
+    }
+  }, [filtered.length, activeIndex, onActiveIndexChange]);
+
+  if (filtered.length === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        "text-sm",
+        docked
+          ? "-mx-2 border-b border-border/70 bg-muted/25"
+          : "rounded-xl border border-border bg-popover/95 shadow-md backdrop-blur",
+      )}
+    >
+      <p
+        className={cn(
+          "px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+          !docked && "border-b border-border",
+        )}
+      >
+        {t("project.groups.cmd_menu")}
+      </p>
+      <ul role="listbox" className={cn("overflow-y-auto py-0.5", docked ? "max-h-40" : "max-h-56")}>
+        {filtered.map((c, i) => {
+          const active = i === activeIndex;
+          return (
+            <li key={c.id} role="option" aria-selected={active}>
+              <button
+                type="button"
+                onMouseEnter={() => onActiveIndexChange(i)}
+                onClick={() => onPick(c)}
+                className={cn(
+                  "flex w-full items-start gap-2 px-3 py-1.5 text-left",
+                  active ? "bg-accent text-accent-foreground" : "hover:bg-accent/60",
+                )}
+              >
+                <code className="mt-0.5 shrink-0 rounded bg-muted px-1.5 py-0.5 text-[11px]">
+                  /{c.slash}
+                </code>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-xs font-medium">{c.label}</span>
+                  <span className="block truncate text-[10px] text-muted-foreground">{c.hint}</span>
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      <div
+        className={cn(
+          "px-3 py-1 text-[10px] text-muted-foreground",
+          !docked && "border-t border-border",
+        )}
+      >
+        {t("project.groups.suggest_hint")}
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/chat/ComposerSuggest.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useMemo, useState } from "react";
+import { AgentAvatar } from "../agents/AgentAvatar";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+/** One row the composer can suggest (@mention or /invite). */
+export interface SuggestAgent {
+  slug: string;
+  name?: string | null;
+  icon?: string | null;
+  emoji?: string | null;
+}
+
+// ── Detection ────────────────────────────────────────────────────────────────
+
+/** Trailing incomplete @handle: "hola @can" → query "can", start index of "@". */
+export function activeMention(value: string): { start: number; query: string } | null {
+  const m = value.match(/(?:^|[\s([{])@([A-Za-z0-9_-]*)$/);
+  if (!m) return null;
+  const query = m[1];
+  const start = value.length - query.length - 1; // "@" position
+  return { start, query };
+}
+
+/**
+ * `/invite ` + incomplete slug — agent list for the arg.
+ * Prefer `activeInviteArg` from ComposerCommands; kept here for the agent UI.
+ */
+export function activeInvite(value: string): { query: string } | null {
+  const m = value.match(/^\s*\/invite\s+([A-Za-z0-9_-]*)$/i);
+  return m ? { query: m[1] } : null;
+}
+
+export function filterAgents(list: SuggestAgent[], query: string): SuggestAgent[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return list.slice(0, 12);
+  return list
+    .filter((a) => {
+      const slug = a.slug.toLowerCase();
+      const name = (a.name || "").toLowerCase();
+      return slug.includes(q) || name.includes(q);
+    })
+    .slice(0, 12);
+}
+
+/** Replace the incomplete `@query` with `@slug `. */
+export function applyMention(value: string, start: number, slug: string): string {
+  return `${value.slice(0, start)}@${slug} `;
+}
+
+// ── UI ───────────────────────────────────────────────────────────────────────
+
+type Mode = "mention" | "invite";
+
+interface Props {
+  mode: Mode;
+  agents: SuggestAgent[];
+  query: string;
+  /** Controlled highlight index (owned by Composer for keyboard). */
+  activeIndex: number;
+  onActiveIndexChange: (i: number) => void;
+  onPick: (slug: string) => void;
+  /** Invite label: add to room vs escalate 1:1 → group. */
+  inviteKind?: "add" | "escalate";
+  /** Sit under the token strip inside the composer card (no floating sheet). */
+  docked?: boolean;
+}
+
+/**
+ * Agent picker for @mentions and /invite. Prefer `docked` under the token
+ * strip so it shares the field's chrome instead of floating over the thread.
+ * Keyboard (↑/↓/Enter/Esc) lives in the parent so the textarea keeps focus.
+ */
+export function ComposerSuggest({
+  mode,
+  agents,
+  query,
+  activeIndex,
+  onActiveIndexChange,
+  onPick,
+  inviteKind = "add",
+  docked = false,
+}: Props) {
+  const filtered = useMemo(() => filterAgents(agents, query), [agents, query]);
+
+  // Keep the highlight inside the filtered list when the query shrinks it.
+  useEffect(() => {
+    if (activeIndex >= filtered.length) {
+      onActiveIndexChange(Math.max(0, filtered.length - 1));
+    }
+  }, [filtered.length, activeIndex, onActiveIndexChange]);
+
+  if (filtered.length === 0) {
+    if (mode === "invite") {
+      return (
+        <div
+          className={cn(
+            "px-3 py-2 text-xs text-muted-foreground",
+            docked
+              ? "-mx-2 border-b border-border/70 bg-muted/25"
+              : "rounded-xl border border-border bg-popover/95 shadow-md backdrop-blur",
+          )}
+        >
+          {t("project.groups.all_in")}
+        </div>
+      );
+    }
+    return null;
+  }
+
+  const title =
+    mode === "mention"
+      ? t("project.groups.mention_pick")
+      : inviteKind === "escalate"
+        ? t("project.groups.make_group")
+        : t("project.groups.add_member");
+
+  return (
+    <div
+      className={cn(
+        "text-sm",
+        docked
+          ? "-mx-2 border-b border-border/70 bg-muted/25"
+          : "rounded-xl border border-border bg-popover/95 shadow-md backdrop-blur",
+      )}
+    >
+      <p
+        className={cn(
+          "px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+          !docked && "border-b border-border",
+        )}
+      >
+        {title}
+      </p>
+      <ul role="listbox" className={cn("overflow-y-auto py-0.5", docked ? "max-h-40" : "max-h-56")}>
+        {filtered.map((a, i) => {
+          const label = a.name || a.slug;
+          const active = i === activeIndex;
+          return (
+            <li key={a.slug} role="option" aria-selected={active}>
+              <button
+                type="button"
+                onMouseEnter={() => onActiveIndexChange(i)}
+                onClick={() => onPick(a.slug)}
+                className={cn(
+                  "flex w-full items-center gap-2 px-3 py-1.5 text-left",
+                  active ? "bg-accent text-accent-foreground" : "hover:bg-accent/60",
+                )}
+              >
+                <AgentAvatar icon={a.icon} emoji={a.emoji} name={label} size={20} />
+                <span className="min-w-0 flex-1 truncate text-xs">{label}</span>
+                <code className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                  @{a.slug}
+                </code>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      <div
+        className={cn(
+          "px-3 py-1 text-[10px] text-muted-foreground",
+          !docked && "border-t border-border",
+        )}
+      >
+        {t("project.groups.suggest_hint")}
+      </div>
+    </div>
+  );
+}
+
+/** Arrow / Enter / Esc handling for an open suggest list. Returns true if consumed. */
+export function handleSuggestKey(
+  e: { key: string; preventDefault: () => void },
+  opts: {
+    open: boolean;
+    count: number;
+    activeIndex: number;
+    setActiveIndex: (i: number | ((prev: number) => number)) => void;
+    onConfirm: () => void;
+    onDismiss: () => void;
+  },
+): boolean {
+  if (!opts.open || opts.count === 0) return false;
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    opts.setActiveIndex((i) => (i + 1) % opts.count);
+    return true;
+  }
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    opts.setActiveIndex((i) => (i - 1 + opts.count) % opts.count);
+    return true;
+  }
+  if (e.key === "Enter" || e.key === "Tab") {
+    e.preventDefault();
+    opts.onConfirm();
+    return true;
+  }
+  if (e.key === "Escape") {
+    e.preventDefault();
+    opts.onDismiss();
+    return true;
+  }
+  return false;
+}
+
+/** Local active-index state that resets when the suggest mode/query changes. */
+export function useSuggestIndex(resetKey: string) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [resetKey]);
+  return [activeIndex, setActiveIndex] as const;
+}

package/src/interfaces/web/src/components/chat/ContextBar.tsx

@@ -31,12 +31,35 @@ function filePathOf(args?: Record<string, unknown>): string | undefined {
 
 /**
  * Compact, opencode-style strip summarising the conversation: token usage,
- * tool count, an expandable list of files the agent wrote or edited, and the
- * per-actor breakdown (which agent answered on which model, and what each
- * spent). Renders nothing until the agent has actually done something.
+ * tool count, the files the agent wrote or edited, and the per-actor breakdown
+ * (which agent answered on which model, and what each spent).
+ *
+ * Collapsed, it is icons and numbers and nothing else. It used to spell out
+ * "1500.8k tok (1483.1k↑ / 17.7k↓)" and the model's full name, which is three
+ * quarters of a phone's width spent on a line nobody reads mid-conversation —
+ * and it wrapped to two rows to do it. Every word of that still exists, one
+ * tap away. Renders nothing until the agent has actually done something.
  */
-export function ContextBar({ msgs }: { msgs: ChatMsg[] }) {
+export function ContextBar({ msgs, docked = false, onOpenChange }: {
+  msgs: ChatMsg[];
+  /** Sit inside the composer card as its top edge, instead of as a standalone
+   *  strip above it. The detail then opens upward, out of the same seam. */
+  docked?: boolean;
+  /** Told when the detail opens or closes. The host freezes the space the
+   *  thread reserves while it is open, so the conversation is covered rather
+   *  than shoved up and back down around a panel open for two seconds. */
+  onOpenChange?: (open: boolean) => void;
+}) {
   const [open, setOpen] = useState(false);
+  // Told OUTSIDE the updater. A state updater runs during render, and calling
+  // the host's setState from in there is React updating one component while
+  // rendering another — which it refuses, mid-render, taking whatever else was
+  // being committed down with it.
+  const toggle = () => {
+    const next = !open;
+    setOpen(next);
+    onOpenChange?.(next);
+  };
 
   const { inTok, outTok, toolCount, changed, actors } = useMemo(() => {
     let inTok = 0;
@@ -62,9 +85,10 @@ export function ContextBar({ msgs }: { msgs: ChatMsg[] }) {
           byActor.set(key, { key, agent: m.agent, model: m.model, inTok: mIn, outTok: mOut, turns: 1 });
         }
       }
+      let turnTools = 0;
       for (const part of m.parts) {
         if (part.kind !== "tool") continue;
-        toolCount += 1;
+        turnTools += 1;
         if (FILE_TOOLS.has(part.tool) && (part as ToolPart).status !== "error") {
           const path = filePathOf(part.args);
           if (path && !seen.has(path)) {
@@ -73,89 +97,133 @@ export function ContextBar({ msgs }: { msgs: ChatMsg[] }) {
           }
         }
       }
+      toolCount += turnTools || m.toolSummary?.total || 0;
     }
     return { inTok, outTok, toolCount, changed, actors: [...byActor.values()] };
   }, [msgs]);
 
   const totalTok = inTok + outTok;
-  const expandable = changed.length > 0 || actors.length > 1;
   if (totalTok === 0 && toolCount === 0 && actors.length === 0) return null;
 
+  const detail = (
+    <div
+      className={cn(
+        "space-y-2 overflow-y-auto px-4 py-2 text-[11px]",
+        docked ? "max-h-[40vh]" : "max-h-52 border-t border-border/60",
+      )}
+    >
+      {/* The numbers the collapsed row reduced to glyphs, spelled out. */}
+      <ul className="space-y-0.5 text-muted-foreground">
+        <li className="flex items-center gap-2">
+          <Gauge size={11} className="shrink-0" />
+          <span>{t("chat_ui.ctx_tokens")}</span>
+          <span className="ml-auto font-mono">
+            {fmt(totalTok)} ({fmt(inTok)}↑ / {fmt(outTok)}↓)
+          </span>
+        </li>
+        {toolCount > 0 && (
+          <li className="flex items-center gap-2">
+            <Wrench size={11} className="shrink-0" />
+            <span>{t("chat_ui.ctx_tools")}</span>
+            <span className="ml-auto font-mono">{toolCount}</span>
+          </li>
+        )}
+      </ul>
+      {actors.length > 0 && (
+        <ul className="space-y-0.5">
+          {actors.map((a) => (
+            // One line each where there is room, and only where there is not
+            // does the spend drop under the name. Forcing the two lines always
+            // made a wide panel read as a stack of paragraphs; forcing one line
+            // always truncated "zen:deepseek-v4-flash-free" to "ze…" on a
+            // phone, which is the one field here you cannot guess from the
+            // rest. Wrapping decides it per width.
+            <li key={a.key} className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-[11px]">
+              <Bot size={11} className="shrink-0 self-center text-sky-700 dark:text-sky-400" />
+              <span className="shrink-0 font-medium text-emerald-700 dark:text-emerald-300">{a.agent || "—"}</span>
+              <span className="min-w-0 font-mono [overflow-wrap:anywhere] text-muted-foreground">{a.model || "—"}</span>
+              <span className="ml-auto shrink-0 font-mono text-[10px] text-muted-foreground">
+                {fmt(a.inTok + a.outTok)} tok ({fmt(a.inTok)}↑ / {fmt(a.outTok)}↓) ·{" "}
+                {t("chat_ui.ctx_turns", { n: a.turns })}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+      {changed.length > 0 && (
+        <ul className="space-y-0.5">
+          {changed.map((f) => (
+            <li key={f.path} className="flex items-center gap-2 font-mono text-[11px]">
+              <FilePen size={11} className="shrink-0 text-violet-700 dark:text-violet-400" />
+              <span className="truncate">{f.path}</span>
+              <span className="ml-auto shrink-0 text-[10px] text-muted-foreground">
+                {f.tool === "write_file" ? "write" : "edit"}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+
   return (
-    <div className="shrink-0 border-t border-border bg-card/40 text-[11px]">
+    <div
+      className={cn(
+        "shrink-0 text-[11px]",
+        // Docked: full-bleed inside the composer card's padding, so the strip
+        // IS the card's top edge — no gap, no second border, no floating line
+        // above a floating field.
+        docked
+          ? "-mx-2 -mt-2 overflow-hidden rounded-t-[calc(1rem-1px)] border-b border-border/70 bg-muted/40"
+          : "border-t border-border bg-card/40",
+      )}
+    >
+      {/* Docked, the detail grows the card UPWARD from inside it. Floating it
+          over the card as its own sheet lined the edges up perfectly and still
+          read as a second box glued on top — a panel that belongs to the field
+          has to live inside the field's border. What it must NOT do is move the
+          conversation: the host freezes the space the thread reserves while
+          this is open (see `onOpenChange`), so the card covers the text instead
+          of shoving it. */}
+      {docked && open && detail}
       <button
         type="button"
-        onClick={() => expandable && setOpen((v) => !v)}
+        onClick={toggle}
+        aria-expanded={open}
+        aria-label={t("chat_ui.ctx_expand")}
         className={cn(
-          "flex w-full items-center gap-3 px-4 py-1.5 text-muted-foreground",
-          expandable && "hover:text-foreground",
+          "flex w-full items-center gap-3 px-4 py-1.5 text-muted-foreground hover:text-foreground",
+          docked && open && "border-t border-border/70",
         )}
       >
-        <span className="flex items-center gap-1">
-          <Gauge size={12} /> {fmt(totalTok)} tok
-          <span className="text-muted-foreground/60">
-            ({fmt(inTok)}↑ / {fmt(outTok)}↓)
-          </span>
+        <span className="flex items-center gap-1 tabular-nums">
+          <Gauge size={12} /> {fmt(totalTok)}
         </span>
         {toolCount > 0 && (
-          <span className="flex items-center gap-1">
-            <Wrench size={12} /> {toolCount} tools
+          <span className="flex items-center gap-1 tabular-nums">
+            <Wrench size={12} /> {toolCount}
           </span>
         )}
         {changed.length > 0 && (
-          <span className="flex items-center gap-1 text-violet-400">
-            <FilePen size={12} /> {changed.length} {t("chat_ui.ctx_files")}
-          </span>
-        )}
-        {/* One actor → show it inline. Several → say how many and let the user
-            expand for the split. */}
-        {actors.length === 1 && (
-          <span className="ml-auto truncate font-mono text-muted-foreground/70">
-            {[actors[0].agent, actors[0].model].filter(Boolean).join(" · ")}
+          <span className="flex items-center gap-1 tabular-nums text-violet-700 dark:text-violet-400">
+            <FilePen size={12} /> {changed.length}
           </span>
         )}
-        {actors.length > 1 && (
-          <span className="ml-auto flex items-center gap-1 text-sky-400">
-            <Bot size={12} /> {t("chat_ui.ctx_actors", { n: actors.length })}
+        {actors.length > 0 && (
+          <span className="flex items-center gap-1 tabular-nums text-sky-700 dark:text-sky-400">
+            <Bot size={12} /> {actors.length}
           </span>
         )}
-        {expandable && (
-          <ChevronDown className={cn("size-3 shrink-0 transition-transform", open && "rotate-180")} />
-        )}
-      </button>
-
-      {open && (
-        <div className="max-h-52 space-y-2 overflow-y-auto border-t border-border/60 px-4 py-2">
-          {actors.length > 1 && (
-            <ul className="space-y-0.5">
-              {actors.map((a) => (
-                <li key={a.key} className="flex items-center gap-2 text-[11px]">
-                  <Bot size={11} className="shrink-0 text-sky-400" />
-                  <span className="shrink-0 font-medium text-emerald-300">{a.agent || "—"}</span>
-                  <span className="truncate font-mono text-muted-foreground/70">{a.model || "—"}</span>
-                  <span className="ml-auto shrink-0 font-mono text-[10px] text-muted-foreground/60">
-                    {fmt(a.inTok + a.outTok)} tok ({fmt(a.inTok)}↑ / {fmt(a.outTok)}↓) ·{" "}
-                    {t("chat_ui.ctx_turns", { n: a.turns })}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          )}
-          {changed.length > 0 && (
-            <ul className="space-y-0.5">
-              {changed.map((f) => (
-                <li key={f.path} className="flex items-center gap-2 font-mono text-[11px]">
-                  <FilePen size={11} className="shrink-0 text-violet-400" />
-                  <span className="truncate">{f.path}</span>
-                  <span className="ml-auto shrink-0 text-[10px] text-muted-foreground/60">
-                    {f.tool === "write_file" ? "write" : "edit"}
-                  </span>
-                </li>
-              ))}
-            </ul>
+        {/* The arrow points at where the panel will appear — which is UP when
+            docked, since the dock grows out of the bottom of the screen. */}
+        <ChevronDown
+          className={cn(
+            "ml-auto size-3 shrink-0 transition-transform",
+            docked !== open && "rotate-180",
           )}
-        </div>
-      )}
+        />
+      </button>
+      {!docked && open && detail}
     </div>
   );
 }