@agentprojectcontext/apx 1.80.2 → 1.89.1

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ElementType } from "react";
+import { useEffect, useMemo, useRef, useState, type ElementType } from "react";
 import useSWR from "swr";
 import clsx from "clsx";
 import {
@@ -13,13 +13,17 @@ import {
   Plus,
   Send,
   Timer,
-  User,
+  Users,
 } from "lucide-react";
 import { Conversations } from "../../lib/api";
-import { Input, Loading } from "../ui";
+import { AgentAvatar, AgentAvatarGroup, SUPER_AGENT_ICON, type AgentFace } from "../agents/AgentAvatar";
+import { Input, Loading, Switch } from "../ui";
 import { UiSelect } from "../UiSelect";
 import { t } from "../../i18n";
 import type { AgentEntry, ConversationListEntry, ThreadListEntry } from "../../types/daemon";
+import type { ActiveTurn } from "../../types/daemon";
+import { conversationActivityKey, threadActivityKey } from "../../lib/chat-activity";
+import { ChatRowActivity } from "./ChatRowActivity";
 
 // Channel taxonomy — same channels the daemon writes ("web", "voice",
 // "desktop", "telegram", …) folded into sidebar groups. Each group has an
@@ -32,6 +36,7 @@ export type ChannelGroupKey =
   | "desktop"
   | "voice"
   | "a2a"
+  | "group"
   | "schedule"
   | "other";
 
@@ -47,8 +52,9 @@ const GROUP_META: Record<ChannelGroupKey, GroupMeta> = {
   desktop:  { label: "Desktop", icon: Monitor, order: 2 },
   voice:    { label: "Voice", icon: Mic, order: 3 },
   a2a:      { label: "Agent ↔ Agent", icon: Bot, order: 4 },
-  schedule: { label: "Schedule", icon: Timer, order: 5 },
-  other:    { label: "Other", icon: FolderOpen, order: 6 },
+  group:    { label: "Groups", icon: Users, order: 5 },
+  schedule: { label: "Schedule", icon: Timer, order: 6 },
+  other:    { label: "Other", icon: FolderOpen, order: 7 },
 };
 
 function channelGroup(channel?: string): ChannelGroupKey {
@@ -59,6 +65,7 @@ function channelGroup(channel?: string): ChannelGroupKey {
   if (c === "desktop") return "desktop";
   if (c === "web" || c === "sidebar" || c === "web-sidebar") return "web";
   if (c === "a2a" || c.startsWith("agent")) return "a2a";
+  if (c === "group") return "group";
   if (c === "schedule" || c === "cron" || c === "routine") return "schedule";
   return "other";
 }
@@ -83,6 +90,9 @@ export interface ChatSelectionMeta {
   channel?: string;
   createdAt?: string;
   title?: string;
+  /** Reached from the archived group: the ⋯ menu offers to take it back out
+   *  rather than to put it away again. */
+  archived?: boolean;
 }
 
 interface Props {
@@ -91,11 +101,18 @@ interface Props {
   /** Virtual super-agent slug used by the dropdown (kept in sync with ChatTab). */
   superAgentSlug: string;
   superAgentLabel: string;
+  superAgentIcon?: string;
   selected: ChatKey;
   onSelect: (key: ChatKey, meta?: ChatSelectionMeta) => void;
   /** Start a fresh in-memory session with the chosen agent (super-agent or a
    *  project agent). It materialises in the Web group on the first message. */
   onNewChat: (agentSlug: string) => void;
+  /** Create a group room with the chosen agents and open it.
+   *  `showTools` is the initial transcript layout preference for that room. */
+  onNewGroup?: (agentSlugs: string[], opts?: { showTools?: boolean }) => void;
+  /** Nothing was chosen for us (no deep link, no host selection) — open this
+   *  project's most recent chat once the lists land. */
+  autoSelectLatest?: boolean;
 }
 
 // Per-agent SWR fetcher. Lives in a child so adding/removing agents doesn't
@@ -126,23 +143,36 @@ export function ChatList({
   agents,
   superAgentSlug,
   superAgentLabel,
+  superAgentIcon = SUPER_AGENT_ICON,
   selected,
   onSelect,
   onNewChat,
+  onNewGroup,
+  autoSelectLatest = false,
 }: Props) {
   const [query, setQuery] = useState("");
   const [agentFilter, setAgentFilter] = useState("");
   const [collapsed, setCollapsed] = useState<Partial<Record<ChannelGroupKey, boolean>>>({});
   const [byAgent, setByAgent] = useState<Record<string, ConversationListEntry[]>>({});
   const [pickerOpen, setPickerOpen] = useState(false);
+  // The "+ New" picker asks first WHAT to start (a 1:1 or a group), then WHO.
+  const [pickerMode, setPickerMode] = useState<"root" | "agent" | "group">("root");
+  const [groupPick, setGroupPick] = useState<string[]>([]);
+  // Initial transcript layout for the new room — same switch that will sit in
+  // the chat header after create. Off = pelado (text only); on = tools visible.
+  const [groupShowTools, setGroupShowTools] = useState(false);
+  const openPicker = () => { setPickerOpen(true); setPickerMode("root"); setGroupPick([]); setGroupShowTools(false); };
+  const closePicker = () => { setPickerOpen(false); setPickerMode("root"); setGroupPick([]); setGroupShowTools(false); };
 
   // Super-agent channel threads (telegram, web quick-chat, desktop …) come from
-  // the global message ledger, which is daemon-level and NOT project-scoped.
-  // Only surface them in the Base workspace (pid "0"); inside a real project the
-  // sidebar shows just that project's own agent conversations.
-  const isBase = String(pid) === "0";
+  // the global message ledger, scoped by the daemon to the project this screen
+  // is showing: each project lists its own conversations, and the general
+  // workspace (pid "0") owns the channels that have no project of their own —
+  // Telegram and desktop talk to the super-agent there. Inside the project, the
+  // channel groups below stay as they are: a project routing its own Telegram
+  // gets a Telegram group with just those chats in it.
   const threadsQ = useSWR(
-    isBase ? `/api/projects/${pid}/super-agent/threads` : null,
+    `/api/projects/${pid}/super-agent/threads`,
     () => Conversations.threads(pid),
     { revalidateOnFocus: false },
   );
@@ -238,10 +268,47 @@ export function ChatList({
     [agents, superAgentSlug, superAgentLabel],
   );
 
+  // Conversations carry a slug, not an agent record — resolve it once here so
+  // every row can wear the right face.
+  const faceFor = (slug: string): AgentFace => {
+    if (slug === superAgentSlug) return { slug, icon: superAgentIcon, name: superAgentLabel };
+    const hit = agents.find((a) => a.slug === slug);
+    return { slug, icon: hit?.icon, emoji: hit?.emoji, name: hit?.name || slug };
+  };
+
   const totalCount = allConvs.length + (threadsQ.data?.length || 0);
   const anyLoaded =
     Object.keys(byAgent).length > 0 || agents.length === 0 || !!threadsQ.data;
 
+  // Landing here with nothing chosen — a first visit, or a project switch that
+  // left the previous chat's ids behind in the old URL — should open THIS
+  // project's most recent conversation, not a blank session belonging to
+  // nothing. Waits for every list to answer, so a slow agent fetch can't make
+  // a channel thread look like the newest thing in the project. Fires once:
+  // after that the selection is the user's, and re-picking would fight them.
+  const autoSelected = useRef(false);
+  const listsReady =
+    agents.every((a) => byAgent[a.slug] !== undefined) && !threadsQ.isLoading;
+  useEffect(() => {
+    if (!autoSelectLatest || autoSelected.current || !listsReady) return;
+    autoSelected.current = true;
+    const newest = [
+      ...allConvs.map((c) => ({
+        ts: c.started_at || "",
+        key: { kind: "conv", agentSlug: c.agent_slug, convId: c.id } as ChatKey,
+        meta: { channel: c.channel, createdAt: c.started_at, title: c.title },
+      })),
+      ...(threadsQ.data || []).map((th) => ({
+        ts: th.last_ts || th.started_at || "",
+        key: { kind: "thread", channel: th.channel, threadId: th.id } as ChatKey,
+        meta: { channel: th.channel, createdAt: th.started_at, title: th.title },
+      })),
+    ].sort((a, b) => new Date(b.ts || 0).getTime() - new Date(a.ts || 0).getTime())[0];
+    // A project with no conversations yet keeps the live session already shown.
+    if (newest) onSelect(newest.key, newest.meta);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoSelectLatest, listsReady, allConvs, threadsQ.data]);
+
   return (
     <aside className="flex h-full w-72 shrink-0 flex-col border-r border-border bg-card/30">
       {/* Hidden per-agent fetchers — one SWR per agent, but with a stable
@@ -260,7 +327,7 @@ export function ChatList({
         <div className="relative">
           <button
             type="button"
-            onClick={() => setPickerOpen((o) => !o)}
+            onClick={() => (pickerOpen ? closePicker() : openPicker())}
             className="inline-flex items-center gap-1 rounded-md border border-border bg-accent/60 px-2 py-1 text-[11px] font-medium hover:bg-accent"
           >
             <Plus className="size-3" /> {t("project.chat.list.new")}
@@ -273,28 +340,107 @@ export function ChatList({
                 aria-hidden
                 tabIndex={-1}
                 className="fixed inset-0 z-10 cursor-default"
-                onClick={() => setPickerOpen(false)}
+                onClick={closePicker}
               />
-              <div className="absolute right-0 top-full z-20 mt-1 w-56 rounded-md border border-border bg-card p-1 shadow-lg">
-                <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-fg">
-                  {t("project.chat.list.pick_agent")}
-                </p>
-                <div className="max-h-64 overflow-y-auto">
-                  {newChatAgents.map((a) => (
+              <div className="absolute right-0 top-full z-20 mt-1 w-60 rounded-md border border-border bg-card p-1 shadow-lg">
+                {pickerMode === "root" ? (
+                  <div className="flex flex-col gap-0.5">
                     <button
-                      key={`new-${a.slug}`}
                       type="button"
-                      onClick={() => {
-                        setPickerOpen(false);
-                        onNewChat(a.slug);
-                      }}
-                      className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50"
+                      onClick={() => setPickerMode("agent")}
+                      className="flex items-center gap-2 rounded px-2 py-2 text-left text-xs hover:bg-accent/50"
                     >
-                      <Bot className="size-3 shrink-0 text-muted-fg" />
-                      <span className="truncate">{a.label}</span>
+                      <MessageSquare className="size-4 shrink-0 text-muted-fg" />
+                      <span>
+                        <span className="block font-medium">{t("project.chat.list.new_single")}</span>
+                        <span className="block text-[10px] text-muted-fg">{t("project.chat.list.new_single_hint")}</span>
+                      </span>
                     </button>
-                  ))}
-                </div>
+                    {onNewGroup && agents.length >= 2 && (
+                      <button
+                        type="button"
+                        onClick={() => setPickerMode("group")}
+                        className="flex items-center gap-2 rounded px-2 py-2 text-left text-xs hover:bg-accent/50"
+                      >
+                        <Users className="size-4 shrink-0 text-primary" />
+                        <span>
+                          <span className="block font-medium">{t("project.groups.new_title")}</span>
+                          <span className="block text-[10px] text-muted-fg">{t("project.groups.new_hint")}</span>
+                        </span>
+                      </button>
+                    )}
+                  </div>
+                ) : pickerMode === "group" ? (
+                  <>
+                    <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-fg">
+                      {t("project.groups.pick_members")}
+                    </p>
+                    <div className="max-h-56 overflow-y-auto">
+                      {agents.map((a) => {
+                        const on = groupPick.includes(a.slug);
+                        return (
+                          <button
+                            key={`grp-${a.slug}`}
+                            type="button"
+                            onClick={() => setGroupPick((p) => on ? p.filter((s) => s !== a.slug) : [...p, a.slug])}
+                            className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50"
+                          >
+                            <span className={clsx("flex size-4 shrink-0 items-center justify-center rounded border text-[9px] font-bold",
+                              on ? "border-primary bg-primary text-primary-foreground" : "border-border")}>
+                              {on ? groupPick.indexOf(a.slug) + 1 : ""}
+                            </span>
+                            <AgentAvatar icon={a.icon} emoji={a.emoji} name={a.name || a.slug} size={18} />
+                            <span className="truncate">{a.name || a.slug}</span>
+                          </button>
+                        );
+                      })}
+                    </div>
+                    <p className="px-2 pt-1 text-[10px] text-muted-fg">{t("project.groups.first_hint")}</p>
+                    <div className="flex items-center gap-2 px-2 py-1.5 text-xs">
+                      <Switch
+                        checked={groupShowTools}
+                        onChange={setGroupShowTools}
+                        label={t("chat_ui.show_tools")}
+                      />
+                    </div>
+                    <p className="px-2 pb-1 text-[10px] text-muted-fg">{t("chat_ui.show_tools_hint")}</p>
+                    <div className="flex items-center gap-1 p-1">
+                      <button type="button" onClick={() => { setPickerMode("root"); setGroupPick([]); setGroupShowTools(false); }}
+                        className="flex-1 rounded px-2 py-1 text-xs text-muted-fg hover:bg-accent/50">
+                        {t("mobile.back")}
+                      </button>
+                      <button type="button" disabled={groupPick.length < 1}
+                        onClick={() => {
+                          const picks = groupPick;
+                          const showTools = groupShowTools;
+                          closePicker();
+                          onNewGroup?.(picks, { showTools });
+                        }}
+                        className="flex-1 rounded bg-primary px-2 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50">
+                        {t("project.groups.create")}
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-fg">
+                      {t("project.chat.list.pick_agent")}
+                    </p>
+                    <div className="max-h-56 overflow-y-auto">
+                      {newChatAgents.map((a) => (
+                        <button
+                          key={`new-${a.slug}`}
+                          type="button"
+                          onClick={() => { closePicker(); onNewChat(a.slug); }}
+                          className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50"
+                        >
+                          <Bot className="size-3 shrink-0 text-muted-fg" />
+                          <span className="truncate">{a.label}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </>
+                )}
               </div>
             </>
           )}
@@ -333,13 +479,24 @@ export function ChatList({
                   selected.kind === "thread" &&
                   selected.channel === th.channel &&
                   selected.threadId === th.id;
+                // Multi-agent threads (a2a between two agents, or a group room)
+                // aren't the super-agent's: draw every participant's face and
+                // skip the super-agent badge. The faces arrive resolved on the
+                // thread (api/thread-faces.js) — resolving them here against
+                // `agents` drew a bare letter for the super-agent and for every
+                // coding CLI, neither of which is a project agent.
+                const isMulti = th.channel === "a2a" || th.channel === "group";
                 return (
                   <ChatListItem
                     key={`thread-${th.channel}-${th.id}`}
                     title={th.title}
                     subtitle={[th.channel, `${th.messages} msg`].join(" · ")}
-                    badge="super"
+                    badge={isMulti ? undefined : t("agents_ui.super_agent_badge")}
+                    face={isMulti ? undefined : { icon: superAgentIcon, name: superAgentLabel }}
+                    faces={isMulti ? th.participant_faces : undefined}
                     timeAgo={th.last_ts}
+                    activityKey={threadActivityKey(pid, th.channel, th.id)}
+                    activeTurn={th.active_turn}
                     selected={active}
                     onClick={() =>
                       onSelect(
@@ -362,8 +519,10 @@ export function ChatList({
                   subtitle={[c.agent_slug, `${c.messages ?? 0} msg`]
                     .filter(Boolean)
                     .join(" · ")}
-                  badge={c.agent_slug}
+                  face={faceFor(c.agent_slug)}
                   timeAgo={c.started_at}
+                  activityKey={conversationActivityKey(pid, c.id)}
+                  activeTurn={c.active_turn}
                   selected={active}
                   onClick={() =>
                     onSelect(
@@ -431,14 +590,25 @@ function ChatListItem({
   title,
   subtitle,
   badge,
+  face,
+  faces,
   timeAgo,
+  activityKey,
+  activeTurn,
   selected,
   onClick,
 }: {
   title: string;
   subtitle?: string;
   badge?: string;
+  /** Whose conversation this is — same face the thread header and the bubbles
+   *  draw, so a row and the thread it opens look like the same agent. */
+  face?: AgentFace;
+  /** Two faces for a group chat (a2a): drawn overlapping. Wins over `face`. */
+  faces?: AgentFace[];
   timeAgo?: string;
+  activityKey: string | null;
+  activeTurn?: ActiveTurn | null;
   selected?: boolean;
   onClick: () => void;
 }) {
@@ -447,32 +617,37 @@ function ChatListItem({
       type="button"
       onClick={onClick}
       className={clsx(
-        "w-full rounded-md border px-2.5 py-2 text-left transition-colors",
+        "relative flex w-full items-start gap-2 rounded-md border px-2 py-2 text-left transition-colors",
         selected
-          ? "border-primary/50 bg-primary/10"
-          : "border-transparent hover:border-border hover:bg-accent/40",
+          ? "border-primary/40 bg-primary/12"
+          : "border-transparent hover:border-border hover:bg-accent/50",
       )}
     >
-      <div className="flex items-start justify-between gap-2">
-        <p className={clsx("truncate text-sm", selected ? "font-semibold" : "font-medium")}>
-          {title}
-        </p>
-        {timeAgo && (
-          <span className="inline-flex shrink-0 items-center gap-0.5 text-[10px] text-muted-fg">
-            <Clock className="size-2.5" />
-            {formatTimeAgo(timeAgo)}
+      {faces?.length ? (
+        <AgentAvatarGroup faces={faces} size={22} className="mt-0.5" />
+      ) : face ? (
+        <AgentAvatar {...face} size={24} className="mt-0.5" />
+      ) : null}
+      <span className="min-w-0 flex-1">
+        <span className="flex items-start justify-between gap-2">
+          <span className={clsx("truncate text-sm", selected ? "font-semibold" : "font-medium")}>
+            {title}
           </span>
-        )}
-      </div>
-      <div className="mt-0.5 flex items-center justify-between gap-2 text-[10px] text-muted-fg">
-        <span className="truncate">{subtitle}</span>
-        {badge && (
-          <span className="inline-flex shrink-0 items-center gap-1 rounded bg-accent/50 px-1.5 py-0.5">
-            <User className="size-2.5" />
-            {badge}
+          {timeAgo && (
+            <span className="inline-flex shrink-0 items-center gap-0.5 text-[10px] text-muted-fg">
+              <Clock className="size-2.5" />
+              {formatTimeAgo(timeAgo)}
+            </span>
+          )}
+        </span>
+        <span className="mt-0.5 flex items-center gap-2 text-[10px] text-muted-fg">
+          <span className="truncate">{subtitle}</span>
+          <span className="ml-auto inline-flex shrink-0 items-center">
+            {badge && <span className="truncate rounded bg-accent px-1.5 py-0.5">{badge}</span>}
+            <ChatRowActivity activityKey={activityKey} activeTurn={activeTurn} />
           </span>
-        )}
-      </div>
+        </span>
+      </span>
     </button>
   );
 }

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

@@ -0,0 +1,45 @@
+import { LoaderCircle } from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { ActiveTurn } from "../../types/daemon";
+import { useChatActivity } from "../../hooks/useChatActivity";
+import { t } from "../../i18n";
+
+/** One compact status mark for every chat rail: spinner while work is live,
+ * blue dot after it finishes out of view. Its width animates from zero, so the
+ * adjacent badge shifts rather than jumping when activity changes. */
+export function ChatRowActivity({
+  activityKey,
+  activeTurn,
+}: {
+  activityKey: string | null;
+  activeTurn?: ActiveTurn | null;
+}) {
+  const activity = useChatActivity(activityKey, activeTurn);
+  const status = activity.running ? "running" : activity.unread ? "unread" : null;
+
+  return (
+    <span
+      role={status ? "status" : undefined}
+      aria-label={status === "running" ? t("chat_ui.running_elsewhere") : status === "unread" ? t("chat_ui.unread_reply") : undefined}
+      className={cn(
+        "relative inline-grid h-2.5 shrink-0 overflow-hidden align-[-1px] transition-[width,margin,opacity] duration-200 ease-out motion-reduce:transition-none",
+        status ? "ml-1 w-2.5 opacity-100" : "ml-0 w-0 opacity-0",
+      )}
+    >
+      <span
+        className={cn(
+          "absolute inset-0 grid place-items-center rounded-full bg-black/65 text-white ring-1 ring-white/15 transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none",
+          status === "running" ? "scale-100 opacity-100" : "scale-75 opacity-0",
+        )}
+      >
+        <LoaderCircle className="size-2 animate-spin" />
+      </span>
+      <span
+        className={cn(
+          "absolute inset-0 rounded-full bg-blue-500 ring-1 ring-card transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none",
+          status === "unread" ? "scale-100 opacity-100" : "scale-75 opacity-0",
+        )}
+      />
+    </span>
+  );
+}