@mndrk/agx 2.0.13 → 2.0.15

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/chat-ui/MentionPopover.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import type { MentionSuggestion } from "@/hooks/useMentionAutocomplete";
+import { Users } from "lucide-react";
 
 interface MentionPopoverProps {
   isOpen: boolean;
@@ -36,6 +37,9 @@ export function MentionPopover({
     return null;
   }
 
+  // Track which group headers we've rendered
+  const renderedGroups = new Set<string>();
+
   return (
     <div className="absolute left-0 right-0 bottom-full mb-3 z-20">
       <div
@@ -46,38 +50,87 @@ export function MentionPopover({
       >
         {suggestions.map((suggestion, index) => {
           const isActive = index === activeIndex;
+          const id = suggestion.kind === "team" ? `team-${suggestion.team.id}` : suggestion.participant.id;
+          const group = suggestion.group;
+
+          // Show group header if this is a new non-empty group
+          let groupHeader: React.ReactNode = null;
+          if (group && !renderedGroups.has(group)) {
+            renderedGroups.add(group);
+            groupHeader = (
+              <div className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400 bg-zinc-50 border-t border-zinc-100 first:border-t-0">
+                {group}
+              </div>
+            );
+          }
+
+          if (suggestion.kind === "team") {
+            return (
+              <div key={id}>
+                {groupHeader}
+                <button
+                  type="button"
+                  role="option"
+                  id={`${optionIdPrefix}-${id}`}
+                  aria-selected={isActive}
+                  ref={(element) => {
+                    optionRefs.current[index] = element;
+                  }}
+                  className={`w-full px-3 py-2 text-left text-sm transition-colors ${
+                    isActive ? "bg-blue-50 text-zinc-900" : "text-zinc-700 hover:bg-zinc-50"
+                  }`}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                  }}
+                  onClick={() => onSelect(suggestion)}
+                >
+                  <span className="inline-flex items-center gap-2">
+                    <Users className="h-3.5 w-3.5 text-zinc-500" aria-hidden />
+                    <span className="font-medium">{suggestion.team.name}</span>
+                    <span className="text-xs text-zinc-400">
+                      {suggestion.team.agents.length} agent{suggestion.team.agents.length !== 1 ? "s" : ""}
+                    </span>
+                  </span>
+                </button>
+              </div>
+            );
+          }
+
+          const participant = suggestion.participant;
           return (
-            <button
-              key={suggestion.id}
-              type="button"
-              role="option"
-              id={`${optionIdPrefix}-${suggestion.id}`}
-              aria-selected={isActive}
-              ref={(element) => {
-                optionRefs.current[index] = element;
-              }}
-              className={`w-full px-3 py-2 text-left text-sm transition-colors ${
-                isActive ? "bg-blue-50 text-zinc-900" : "text-zinc-700 hover:bg-zinc-50"
-              }`}
-              onMouseDown={(e) => {
-                e.preventDefault();
-              }}
-              onClick={() => onSelect(suggestion)}
-            >
-              <span className="inline-flex items-center gap-2">
-                <span
-                  className="h-2.5 w-2.5 rounded-full"
-                  style={{ backgroundColor: suggestion.color }}
-                  aria-hidden
-                />
-                <span className="font-medium">{suggestion.name}</span>
-                {suggestion.id === "all" ? (
-                  <span className="text-xs text-zinc-400">All participants</span>
-                ) : suggestion.model && (
-                  <span className="text-xs text-zinc-400">{suggestion.model}</span>
-                )}
-              </span>
-            </button>
+            <div key={id}>
+              {groupHeader}
+              <button
+                type="button"
+                role="option"
+                id={`${optionIdPrefix}-${participant.id}`}
+                aria-selected={isActive}
+                ref={(element) => {
+                  optionRefs.current[index] = element;
+                }}
+                className={`w-full px-3 py-2 text-left text-sm transition-colors ${
+                  isActive ? "bg-blue-50 text-zinc-900" : "text-zinc-700 hover:bg-zinc-50"
+                }${group ? " pl-6" : ""}`}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}
+                onClick={() => onSelect(suggestion)}
+              >
+                <span className="inline-flex items-center gap-2">
+                  <span
+                    className="h-2.5 w-2.5 rounded-full"
+                    style={{ backgroundColor: participant.color }}
+                    aria-hidden
+                  />
+                  <span className="font-medium">{participant.name}</span>
+                  {participant.id === "all" ? (
+                    <span className="text-xs text-zinc-400">All participants</span>
+                  ) : participant.model && (
+                    <span className="text-xs text-zinc-400">{participant.model}</span>
+                  )}
+                </span>
+              </button>
+            </div>
           );
         })}
       </div>

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/chat-ui/MessageBubble.tsx

@@ -6,6 +6,7 @@ import { agentAvatarUrl } from "./ParticipantBar";
 import { MessageReactionsBar } from "./MessageReactionsBar";
 import { MessageAttachments } from "./MessageAttachments";
 import { MessageSquare, User, FileText, Loader2 } from "lucide-react";
+import Link from "next/link";
 import { stripMarkers } from "@/lib/chat-utils";
 
 interface Props {
@@ -56,23 +57,33 @@ export function MessageBubble({
         }`}
     >
       {!(isUser && hideUserAvatarAndName) && (
-        <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${isUser ? 'bg-slate-200 text-slate-600' : 'bg-slate-100 overflow-hidden'}`}>
-          {isUser ? (
-            <User className="w-5 h-5" />
-          ) : participantId ? (
+        participantId && !isUser ? (
+          <Link href={`/agents/${participantId}`} className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 bg-slate-100 overflow-hidden hover:ring-2 hover:ring-blue-300 transition-shadow`}>
             <img src={agentAvatarUrl(participantId, 36, participantColor)} alt="" className="w-full h-full object-cover" />
-          ) : (
-            <User className="w-5 h-5 opacity-70" />
-          )}
-        </div>
+          </Link>
+        ) : (
+          <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${isUser ? 'bg-slate-200 text-slate-600' : 'bg-slate-100 overflow-hidden'}`}>
+            <User className="w-5 h-5" />
+          </div>
+        )
       )}
 
       <div className="flex-1 min-w-0">
         <div className="flex items-baseline gap-2 mb-1">
           {!(isUser && hideUserAvatarAndName) && (
-            <span className="font-bold text-[15px]" style={!isUser && participantColor ? { color: participantColor } : {}}>
-              {isUser ? "You" : (participantName || "Unknown")}
-            </span>
+            !isUser && participantId ? (
+              <Link
+                href={`/agents/${participantId}`}
+                className="font-bold text-[15px] hover:underline"
+                style={participantColor ? { color: participantColor } : {}}
+              >
+                {participantName || "Unknown"}
+              </Link>
+            ) : (
+              <span className="font-bold text-[15px]">
+                {isUser ? "You" : (participantName || "Unknown")}
+              </span>
+            )
           )}
           <span className="text-xs text-slate-400 font-medium">
             {formatTimestamp(message.timestamp)}

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/chat-ui/MessageList.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { GroupMessage, Participant, ThreadInfo } from "@/lib/types";
+import type { ThreadStatus } from "@/lib/storage/thread-adapter";
 import type { StreamingEntry } from "@/hooks/useGroupChat";
 import type { TaskDraftMessage } from "@/types/tasks";
 import { MessageBubble } from "./MessageBubble";
@@ -10,12 +11,22 @@ import { Markdown } from "./Markdown";
 import { MessageAttachments } from "./MessageAttachments";
 import { TaskDraftCard } from "./TaskDraftCard";
 import { TaskStatusCard } from "./TaskStatusCard";
-import { MessageSquare, Copy, Loader2, Trash2, User, Clock, Zap, ListTodo, CheckCircle2, Circle, Link } from "lucide-react";
+import { MessageSquare, Copy, Hash, Loader2, Trash2, User, Clock, Zap, ListTodo, CheckCircle2, Circle, Link } from "lucide-react";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { stripMarkers } from "@/lib/chat-utils";
 
 const INLINE_PREVIEW_COUNT = 2;
 
+const THREAD_STATUSES: { value: ThreadStatus; label: string; color: string }[] = [
+  { value: "thinking", label: "Thinking", color: "#f59e0b" },
+  { value: "converged", label: "Converged", color: "#10b981" },
+  { value: "resolved", label: "Resolved", color: "#3b82f6" },
+  { value: "parked", label: "Parked", color: "#6b7280" },
+  { value: "archived", label: "Archived", color: "#9ca3af" },
+];
+
+const COLLAPSED_STATUSES: Set<ThreadStatus> = new Set(["resolved", "parked", "archived"]);
+
 interface Props {
   messages: GroupMessage[];
   streaming: Record<string, StreamingEntry>;
@@ -34,6 +45,8 @@ interface Props {
   taskDrafts?: Record<string, TaskDraftMessage>;
   deletingThreadRootId?: string | null;
   highlightedMessageId?: string | null;
+  onUpdateMessageThreadStatus?: (messageId: string, status: ThreadStatus) => void;
+  onUpdateMessageOutcomeNote?: (messageId: string, note: string) => void;
 }
 
 interface ThreadData extends ThreadInfo {
@@ -101,17 +114,39 @@ export function MessageList({
   taskDrafts,
   deletingThreadRootId,
   highlightedMessageId,
+  onUpdateMessageThreadStatus,
+  onUpdateMessageOutcomeNote,
 }: Props) {
-  const bottomRef = useRef<HTMLDivElement>(null);
   const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const [statusMenuMessageId, setStatusMenuMessageId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<"active" | "parked" | "resolved" | "archived">("active");
   const participantMap = Object.fromEntries(participants.map((p) => [p.id, p]));
 
-  // Filter to only main chat messages (not thread replies)
-  const mainMessages = useMemo(
-    () => messages.filter((msg) => !msg.rootMessageId),
+  // Filter to only main chat messages (not thread replies), reverse chronological
+  const allMainMessages = useMemo(
+    () => [...messages.filter((msg) => !msg.rootMessageId)].reverse(),
     [messages]
   );
 
+  const TAB_FILTERS: Record<typeof activeTab, Set<ThreadStatus>> = {
+    active: new Set(["thinking", "converged"]),
+    parked: new Set(["parked"]),
+    resolved: new Set(["resolved"]),
+    archived: new Set(["archived"]),
+  };
+
+  const mainMessages = useMemo(
+    () => allMainMessages.filter((msg) => TAB_FILTERS[activeTab].has(msg.threadStatus ?? "thinking")),
+    [allMainMessages, activeTab]
+  );
+
+  const tabCounts = useMemo(() => ({
+    active: allMainMessages.filter((m) => TAB_FILTERS.active.has(m.threadStatus ?? "thinking")).length,
+    parked: allMainMessages.filter((m) => TAB_FILTERS.parked.has(m.threadStatus ?? "thinking")).length,
+    resolved: allMainMessages.filter((m) => TAB_FILTERS.resolved.has(m.threadStatus ?? "thinking")).length,
+    archived: allMainMessages.filter((m) => TAB_FILTERS.archived.has(m.threadStatus ?? "thinking")).length,
+  }), [allMainMessages]);
+
   const threadDataMap = useMemo(() => buildThreadDataMap(messages), [messages]);
 
   const setMessageRef = useCallback((messageId: string, element: HTMLDivElement | null) => {
@@ -129,20 +164,57 @@ export function MessageList({
     element.scrollIntoView({ behavior: "smooth", block: "center" });
   }, [highlightedMessageId, messages]);
 
-  useEffect(() => {
-    if (highlightedMessageId) return;
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [highlightedMessageId, mainMessages, streaming]);
+  // No auto-scroll needed — newest messages are at the top
+
+  const TABS: { key: typeof activeTab; label: string }[] = [
+    { key: "active", label: "Active" },
+    { key: "parked", label: "Parked" },
+    { key: "resolved", label: "Resolved" },
+    { key: "archived", label: "Archived" },
+  ];
 
   return (
     <div className="chat-scrollbar flex-1 overflow-y-auto p-4">
       <div className="max-w-3xl mx-auto">
-        {mainMessages.length === 0 && Object.keys(streaming).length === 0 && (
+        {allMainMessages.length > 0 && (
+          <div className="max-w-2xl mx-auto flex items-center gap-1 mb-4 border-b border-slate-100 pb-2">
+            {TABS.map((tab) => {
+              const count = tabCounts[tab.key];
+              const isActive = activeTab === tab.key;
+              return (
+                <button
+                  key={tab.key}
+                  type="button"
+                  onClick={() => setActiveTab(tab.key)}
+                  className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-colors ${
+                    isActive
+                      ? "bg-slate-900 text-white"
+                      : "text-slate-400 hover:text-slate-600 hover:bg-slate-50"
+                  }`}
+                >
+                  {tab.label}
+                  {count > 0 && (
+                    <span className={`ml-1.5 text-[10px] ${isActive ? "text-slate-300" : "text-slate-300"}`}>
+                      {count}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        )}
+        {/* Top-level streaming indicators are now rendered inside their triggering message card */}
+        {allMainMessages.length === 0 && Object.keys(streaming).length === 0 && (
           <div className="flex flex-col items-center justify-center text-slate-400 mt-32 space-y-3">
             <MessageSquare className="h-6 w-6" strokeWidth={1.5} />
             <span className="text-sm font-medium tracking-wide">Start a workspace</span>
           </div>
         )}
+        {allMainMessages.length > 0 && mainMessages.length === 0 && (
+          <div className="flex flex-col items-center justify-center text-slate-400 mt-16 space-y-2">
+            <span className="text-sm font-medium">No {activeTab} threads</span>
+          </div>
+        )}
         {mainMessages.map((msg) => {
           const p = msg.participantId ? participantMap[msg.participantId] : null;
           const threadData = threadDataMap.get(msg.id);
@@ -154,6 +226,95 @@ export function MessageList({
             : null;
 
           const repliesToShow = (threadData?.previewReplies || []).filter((r) => !r.content.startsWith(SUMMARY_MARKER));
+          const msgStatus = msg.threadStatus ?? "thinking";
+          const isCollapsed = COLLAPSED_STATUSES.has(msgStatus);
+          const statusInfo = THREAD_STATUSES.find((s) => s.value === msgStatus) ?? THREAD_STATUSES[0];
+
+          if (isCollapsed) {
+            return (
+              <div
+                key={msg.id}
+                ref={(element) => setMessageRef(msg.id, element)}
+                data-message-id={msg.id}
+                className="max-w-2xl mx-auto bg-slate-50 rounded-xl border border-slate-200 mb-3 group transition-all hover:border-slate-300 relative cursor-pointer"
+                onClick={() => onOpenThread?.(msg.id)}
+              >
+                <div className="px-4 py-2.5">
+                  <div className="flex items-center gap-3">
+                    <Hash className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                    <span className="text-sm font-medium text-slate-500 truncate flex-1">
+                      {stripMarkers(msg.content.split('\n')[0])}
+                    </span>
+                    {msg.outcomeNote && (
+                      <span className="text-[11px] text-slate-400 truncate max-w-[200px]">{msg.outcomeNote}</span>
+                    )}
+                    <span className="text-[10px] text-slate-400 shrink-0">
+                      {new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(msg.timestamp)}
+                    </span>
+                  {onUpdateMessageThreadStatus && (() => {
+                    const isOpen = statusMenuMessageId === msg.id;
+                    return (
+                      <div className="relative">
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setStatusMenuMessageId(isOpen ? null : msg.id);
+                          }}
+                          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold border transition-colors hover:bg-white"
+                          style={{ borderColor: statusInfo.color + "40", color: statusInfo.color }}
+                        >
+                          <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusInfo.color }} />
+                          {statusInfo.label}
+                        </button>
+                        {isOpen && (
+                          <div
+                            className="absolute top-full right-0 mt-1 z-50 bg-white border border-slate-200 rounded-lg shadow-lg p-1 min-w-[8.5rem]"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            {THREAD_STATUSES.map((s) => (
+                              <button
+                                key={s.value}
+                                type="button"
+                                className={`flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs font-medium transition-colors ${s.value === msgStatus ? "bg-indigo-50 text-indigo-700" : "text-slate-600 hover:bg-slate-50"}`}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onUpdateMessageThreadStatus(msg.id, s.value);
+                                  setStatusMenuMessageId(null);
+                                }}
+                              >
+                                <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: s.color }} />
+                                {s.label}
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })()}
+                  {threadData && threadData.replyCount > 0 && (
+                    <span className="text-[10px] text-slate-400 shrink-0">{threadData.replyCount} replies</span>
+                  )}
+                  </div>
+                  {(summaryText || taskDrafts?.[msg.id]) && (
+                    <div className="mt-1.5 pl-6 flex flex-col gap-1">
+                      {summaryText && (
+                        <div className="text-sm text-slate-600 leading-relaxed prose prose-sm prose-slate max-w-none">
+                          <Markdown content={summaryText} isUser={false} />
+                        </div>
+                      )}
+                      {taskDrafts?.[msg.id] && taskDrafts[msg.id].tasks.length > 0 && (
+                        <span className="text-[10px] text-slate-400 flex items-center gap-1">
+                          <ListTodo className="w-3 h-3" />
+                          {taskDrafts[msg.id].tasks.length} {taskDrafts[msg.id].tasks.length === 1 ? "task" : "tasks"}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          }
 
           return (
             <div key={msg.id} className="max-w-2xl mx-auto bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden mb-6 group transition-all hover:border-slate-300 relative">
@@ -232,10 +393,73 @@ export function MessageList({
                           <h3 className="text-lg font-bold text-slate-900 leading-tight group-hover/msg-title:text-indigo-600 transition-colors line-clamp-1">
                             {stripMarkers(msg.content.split('\n')[0])}
                           </h3>
-                          <div className="mt-1">
+                          <div className="mt-1 flex items-center gap-2">
                             <span className="text-[11px] font-medium text-slate-400">
                               {new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }).format(msg.timestamp)}
                             </span>
+                            {onUpdateMessageThreadStatus && (() => {
+                              const isOpen = statusMenuMessageId === msg.id;
+                              return (
+                                <div className="relative">
+                                  <button
+                                    type="button"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      setStatusMenuMessageId(isOpen ? null : msg.id);
+                                    }}
+                                    className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold border transition-colors hover:bg-slate-50"
+                                    style={{ borderColor: statusInfo.color + "40", color: statusInfo.color }}
+                                  >
+                                    <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusInfo.color }} />
+                                    {statusInfo.label}
+                                  </button>
+                                  {isOpen && (
+                                    <div
+                                      className="absolute top-full left-0 mt-1 z-50 bg-white border border-slate-200 rounded-lg shadow-lg p-1 min-w-[8.5rem]"
+                                      onClick={(e) => e.stopPropagation()}
+                                    >
+                                      {THREAD_STATUSES.map((s) => (
+                                        <button
+                                          key={s.value}
+                                          type="button"
+                                          className={`flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs font-medium transition-colors ${s.value === msgStatus ? "bg-indigo-50 text-indigo-700" : "text-slate-600 hover:bg-slate-50"}`}
+                                          onClick={(e) => {
+                                            e.stopPropagation();
+                                            onUpdateMessageThreadStatus(msg.id, s.value);
+                                            setStatusMenuMessageId(null);
+                                          }}
+                                        >
+                                          <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: s.color }} />
+                                          {s.label}
+                                        </button>
+                                      ))}
+                                      {msgStatus === "converged" && onUpdateMessageOutcomeNote && (
+                                        <div className="px-2 py-1.5 border-t border-slate-100 mt-1">
+                                          <input
+                                            type="text"
+                                            className="w-full border border-slate-200 rounded px-2 py-1 text-[11px] text-slate-700 outline-none focus:border-indigo-400"
+                                            placeholder="Outcome note…"
+                                            defaultValue={msg.outcomeNote ?? ""}
+                                            onClick={(e) => e.stopPropagation()}
+                                            onKeyDown={(e) => {
+                                              if (e.key === "Enter") {
+                                                onUpdateMessageOutcomeNote(msg.id, (e.target as HTMLInputElement).value);
+                                                setStatusMenuMessageId(null);
+                                              }
+                                            }}
+                                            onBlur={(e) => {
+                                              if (e.target.value !== (msg.outcomeNote ?? "")) {
+                                                onUpdateMessageOutcomeNote(msg.id, e.target.value);
+                                              }
+                                            }}
+                                          />
+                                        </div>
+                                      )}
+                                    </div>
+                                  )}
+                                </div>
+                              );
+                            })()}
                           </div>
                           {(msg.content.length > 80 || msg.content.includes('\n')) && (
                             <div className="mt-2 text-[15px] text-slate-600 leading-relaxed">
@@ -422,22 +646,6 @@ export function MessageList({
           );
         })}
 
-        {Object.entries(streaming)
-          .filter(([, entry]) => !entry.rootMessageId)
-          .map(([pid, entry]) => {
-            const p = participantMap[pid];
-            return (
-              <div key={`streaming-${pid}`} className="max-w-2xl mx-auto mb-8 px-4">
-                <TypingIndicator
-                  participantId={pid}
-                  participantName={p?.name || pid}
-                  participantColor={p?.color || "#888"}
-                  content={entry.content}
-                />
-              </div>
-            );
-          })}
-        <div ref={bottomRef} />
       </div>
     </div>
   );