@mndrk/agx 2.0.13 → 2.0.15

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/app/api/teams/route.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSQLiteDb } from "@/lib/sqlite-query-adapter";
+import { LOCAL_USER } from "@/lib/auth-mode";
+import { ensureDefaultTeam, ensureCrewTeam, migrateTeamsThreadId, migrateTeamWorkspaces } from "@/lib/teams";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+function runMigrations(db: ReturnType<typeof getSQLiteDb>) {
+  migrateTeamsThreadId(db);
+  migrateTeamWorkspaces(db);
+}
+
+/** GET /api/teams — list all teams for the current user, with agent membership + workspace links */
+export async function GET(request: NextRequest) {
+  try {
+    const db = getSQLiteDb();
+    runMigrations(db);
+
+    // Ensure default team exists and unassigned agents are placed in it
+    ensureDefaultTeam(db, LOCAL_USER.id);
+    ensureCrewTeam(db, LOCAL_USER.id);
+
+    const threadId = request.nextUrl.searchParams.get("threadId");
+
+    // Return teams matching the thread_id filter (via join table) or all
+    let teams: any[];
+    if (threadId) {
+      teams = db
+        .prepare(`
+          SELECT DISTINCT t.* FROM teams t
+          LEFT JOIN team_workspaces tw ON tw.team_id = t.id
+          WHERE t.user_id = ? AND (tw.thread_id = ? OR t.is_default = 1)
+          ORDER BY t.is_default DESC, t.name ASC
+        `)
+        .all(LOCAL_USER.id, threadId) as any[];
+    } else {
+      teams = db
+        .prepare("SELECT * FROM teams WHERE user_id = ? ORDER BY is_default DESC, name ASC")
+        .all(LOCAL_USER.id) as any[];
+    }
+
+    // Batch-load agents for all teams
+    const teamIds = teams.map((t) => t.id);
+    const agentsByTeam: Record<string, any[]> = {};
+    const workspacesByTeam: Record<string, string[]> = {};
+
+    if (teamIds.length > 0) {
+      const placeholders = teamIds.map(() => "?").join(", ");
+      const agentRows = db
+        .prepare(
+          `SELECT * FROM team_agents WHERE team_id IN (${placeholders}) ORDER BY routing_order ASC`
+        )
+        .all(...teamIds) as any[];
+      for (const row of agentRows) {
+        (agentsByTeam[row.team_id] ??= []).push(row);
+      }
+
+      const wsRows = db
+        .prepare(
+          `SELECT team_id, thread_id FROM team_workspaces WHERE team_id IN (${placeholders})`
+        )
+        .all(...teamIds) as { team_id: string; thread_id: string }[];
+      for (const row of wsRows) {
+        (workspacesByTeam[row.team_id] ??= []).push(row.thread_id);
+      }
+    }
+
+    const result = teams.map((t) => ({
+      ...t,
+      agents: agentsByTeam[t.id] || [],
+      workspace_ids: workspacesByTeam[t.id] || [],
+    }));
+
+    return NextResponse.json({ teams: result });
+  } catch (error) {
+    console.error("Error fetching teams:", error);
+    return NextResponse.json({ error: "Failed to fetch teams" }, { status: 500 });
+  }
+}
+
+/** POST /api/teams — create a new team */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json().catch(() => ({}));
+    const name = typeof body.name === "string" ? body.name.trim() : "";
+
+    if (!name) {
+      return NextResponse.json({ error: "Team name is required" }, { status: 400 });
+    }
+
+    if (body.is_default) {
+      return NextResponse.json({ error: "Cannot set is_default on creation" }, { status: 400 });
+    }
+
+    const db = getSQLiteDb();
+    runMigrations(db);
+
+    // Accept single threadId (string) or multiple workspaceIds (string[])
+    const workspaceIds: string[] = Array.isArray(body.workspaceIds)
+      ? body.workspaceIds.filter((id: unknown) => typeof id === "string")
+      : typeof body.threadId === "string"
+        ? [body.threadId]
+        : [];
+
+    // Legacy thread_id column gets the first workspace (or null)
+    const threadId = workspaceIds[0] ?? null;
+
+    const team = db
+      .prepare(
+        "INSERT INTO teams (user_id, name, thread_id) VALUES (?, ?, ?) RETURNING *"
+      )
+      .get(LOCAL_USER.id, name, threadId) as any;
+
+    // Insert workspace links
+    if (workspaceIds.length > 0) {
+      const insertWs = db.prepare(
+        "INSERT OR IGNORE INTO team_workspaces (team_id, thread_id) VALUES (?, ?)"
+      );
+      for (const wsId of workspaceIds) {
+        insertWs.run(team.id, wsId);
+      }
+    }
+
+    return NextResponse.json({
+      team: { ...team, agents: [], workspace_ids: workspaceIds },
+    }, { status: 201 });
+  } catch (error) {
+    console.error("Error creating team:", error);
+    return NextResponse.json({ error: "Failed to create team" }, { status: 500 });
+  }
+}

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/app/projects/[slug]/layout.tsx

@@ -4,10 +4,10 @@ import { useProjects } from "@/hooks/useProjects";
 import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
 import { Suspense, use, useMemo, useState } from "react";
-import { PanelLeftClose, Hash, Minus, Plus } from "lucide-react";
+import { PanelLeftClose, Hash, Minus, Plus, LayoutGrid } from "lucide-react";
 import { useThreadState } from "@/hooks/useThreadState";
 import ProjectModal, { useProjectFormState, createProjectPayload } from "@/components/ProjectModal";
-import "@/styles/threadSidebar.css";
+import "@/styles/workspaceSidebar.css";
 
 function ProjectLayoutContent({
     children,
@@ -91,7 +91,7 @@ function ProjectLayoutContent({
 
     const sidebarContent = (
         <>
-            <div className="thread-sidebar__brand">
+            <div className="workspace-sidebar__brand">
                 <div className="flex items-center justify-center mr-2" aria-hidden="true">
                     <svg
                         width="64"
@@ -120,12 +120,12 @@ function ProjectLayoutContent({
                     <PanelLeftClose className="h-4 w-4" strokeWidth={1.75} />
                 </button>
             </div>
-            <div className="thread-sidebar__content">
-                <nav className="thread-sidebar__section">
-                    <div className="thread-sidebar__section-header">
+            <div className="workspace-sidebar__content">
+                <nav className="workspace-sidebar__section">
+                    <div className="workspace-sidebar__section-header">
                         <Link
                             href="/"
-                            className="thread-sidebar__section-label hover:text-slate-700 transition-colors cursor-pointer"
+                            className="workspace-sidebar__section-label hover:text-slate-700 transition-colors cursor-pointer"
                             onClick={() => setSidebarOpen(false)}
                         >
                             Workspace
@@ -134,33 +134,33 @@ function ProjectLayoutContent({
                     {sortedWorkspaces.map((workspace) => {
                         const title = workspace.title?.trim() || "Untitled workspace";
                         return (
-                            <div key={workspace.id} className="thread-sidebar__workspace-item group">
+                            <div key={workspace.id} className="workspace-sidebar__workspace-item group">
                                 <Link
                                     href="/"
                                     onClick={() => setSidebarOpen(false)}
-                                    className="thread-sidebar__nav-item thread-sidebar__workspace-nav-item"
+                                    className="workspace-sidebar__nav-item workspace-sidebar__workspace-nav-item"
                                 >
                                     <Hash size={18} />
-                                    <span className="thread-sidebar__workspace-title">{title}</span>
+                                    <span className="workspace-sidebar__workspace-title">{title}</span>
                                 </Link>
                             </div>
                         );
                     })}
                 </nav>
-                <nav className="thread-sidebar__section mt-4">
-                    <div className="thread-sidebar__section-header">
+                <nav className="workspace-sidebar__section mt-4">
+                    <div className="workspace-sidebar__section-header">
                         <Link
                             href="/projects"
-                            className="thread-sidebar__section-label hover:text-slate-700 transition-colors cursor-pointer"
+                            className="workspace-sidebar__section-label hover:text-slate-700 transition-colors cursor-pointer"
                             onClick={() => setSidebarOpen(false)}
                         >
                             Projects
                         </Link>
-                        <div className="thread-sidebar__header-actions">
+                        <div className="workspace-sidebar__header-actions">
                             <button
                                 type="button"
                                 onClick={handleOpenNewProject}
-                                className="thread-sidebar__action"
+                                className="workspace-sidebar__action"
                                 aria-label="Add project"
                                 title="Add project"
                             >
@@ -168,24 +168,43 @@ function ProjectLayoutContent({
                             </button>
                         </div>
                     </div>
-                    <div className="thread-sidebar__workspace-list">
+                    <div className="workspace-sidebar__workspace-list">
                         {projects.map((p) => {
                             const isActive = p.slug === params.slug;
                             return (
-                                <div key={p.slug} className="thread-sidebar__workspace-item group">
+                                <div key={p.slug} className="workspace-sidebar__workspace-item group">
                                     <Link
                                         href={`/projects/${p.slug}`}
                                         onClick={() => setSidebarOpen(false)}
-                                        className={`thread-sidebar__nav-item thread-sidebar__workspace-nav-item flex items-center gap-3 ${isActive ? "thread-sidebar__nav-item--active thread-sidebar__workspace-nav-item--active" : ""}`}
+                                        className={`workspace-sidebar__nav-item workspace-sidebar__workspace-nav-item flex items-center gap-3 ${isActive ? "workspace-sidebar__nav-item--active workspace-sidebar__workspace-nav-item--active" : ""}`}
                                     >
                                         <Minus size={16} className={`flex-shrink-0 ${isActive ? 'text-indigo-600' : 'text-slate-400'}`} />
-                                        <span className="thread-sidebar__workspace-title">{p.name}</span>
+                                        <span className="workspace-sidebar__workspace-title">{p.name}</span>
                                     </Link>
                                 </div>
                             );
                         })}
                     </div>
                 </nav>
+                <nav className="workspace-sidebar__section mt-4">
+                    <div className="workspace-sidebar__section-header">
+                        <span className="workspace-sidebar__section-label">
+                            Boards
+                        </span>
+                    </div>
+                    <div className="flex flex-col items-center py-4 px-3 text-center">
+                        <LayoutGrid size={20} className="text-slate-300 mb-1.5" />
+                        <p className="text-xs text-slate-400 mb-2">You have no boards</p>
+                        <Link
+                            href="/projects"
+                            onClick={() => setSidebarOpen(false)}
+                            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md bg-indigo-50 text-indigo-600 hover:bg-indigo-100 transition-colors"
+                        >
+                            <Plus size={12} />
+                            Create one
+                        </Link>
+                    </div>
+                </nav>
             </div>
             {/* Discord CTA */}
             <div className="mt-auto p-3">
@@ -246,7 +265,7 @@ function ProjectLayoutContent({
                 <div className="fixed inset-0 z-50 md:hidden" onClick={() => setSidebarOpen(false)}>
                     <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
                     <aside
-                        className="absolute left-0 top-0 bottom-0 thread-sidebar shadow-xl animate-slide-in-left"
+                        className="absolute left-0 top-0 bottom-0 workspace-sidebar shadow-xl animate-slide-in-left"
                         onClick={(e) => e.stopPropagation()}
                     >
                         {sidebarContent}
@@ -256,12 +275,12 @@ function ProjectLayoutContent({
 
             {/* Desktop Sidebar */}
             {sidebarVisible ? (
-                <aside className="thread-sidebar hidden md:flex" onClick={(e) => e.stopPropagation()}>
+                <aside className="workspace-sidebar hidden md:flex" onClick={(e) => e.stopPropagation()}>
                     {sidebarContent}
                 </aside>
             ) : (
-                <aside className="thread-sidebar thread-sidebar--collapsed hidden md:flex">
-                    <div className="thread-sidebar__brand">
+                <aside className="workspace-sidebar workspace-sidebar--collapsed hidden md:flex">
+                    <div className="workspace-sidebar__brand">
                         <button
                             type="button"
                             onClick={() => setSidebarVisible(true)}

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/KanbanBoard.tsx

@@ -654,6 +654,7 @@ function FlatColumnContent({ stage, tasks, allTasks, selectedTaskId, setSelected
                 task={task}
                 onClick={() => onSelectTask?.(task)}
                 onStatusChange={onTaskUpdate ? (s) => onTaskUpdate(task.id, { status: s }) : undefined}
+                onApprovalModeChange={onTaskUpdate ? (m) => onTaskUpdate(task.id, { approval_mode: m }) : undefined}
                 allTasks={allTasks}
                 relationship={rel}
               />

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/SortableTaskCard.tsx

@@ -9,11 +9,12 @@ interface SortableTaskCardProps {
   task: Task;
   onClick?: () => void;
   onStatusChange?: (status: TaskStatus) => void;
+  onApprovalModeChange?: (mode: "auto" | "manual") => void;
   allTasks?: Task[];
   relationship?: 'active' | 'blocking' | 'dependent' | 'dimmed' | 'none';
 }
 
-export default function SortableTaskCard({ task, onClick, onStatusChange, allTasks, relationship = 'none' }: SortableTaskCardProps) {
+export default function SortableTaskCard({ task, onClick, onStatusChange, onApprovalModeChange, allTasks, relationship = 'none' }: SortableTaskCardProps) {
   const {
     attributes,
     listeners,
@@ -42,6 +43,7 @@ export default function SortableTaskCard({ task, onClick, onStatusChange, allTas
         task={task}
         onClick={onClick}
         onStatusChange={onStatusChange}
+        onApprovalModeChange={onApprovalModeChange}
         allTasks={allTasks}
         relationship={relationship}
       />

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/TaskCard.tsx

@@ -100,12 +100,13 @@ interface TaskCardProps {
   onClick?: () => void;
   compact?: boolean;
   onStatusChange?: (status: TaskStatus) => void;
+  onApprovalModeChange?: (mode: "auto" | "manual") => void;
   /** All tasks in the board, used to resolve dependency status */
   allTasks?: Task[];
   relationship?: 'active' | 'blocking' | 'dependent' | 'dimmed' | 'none';
 }
 
-export default function TaskCard({ task, onClick, compact = false, onStatusChange, allTasks, relationship = 'none' }: TaskCardProps) {
+export default function TaskCard({ task, onClick, compact = false, onStatusChange, onApprovalModeChange, allTasks, relationship = 'none' }: TaskCardProps) {
   const status = statusConfig[task.status || "queued"];
   const stage = task.stage ? stageConfig[task.stage] : null;
   const { summary, isLoading: isGraphSummaryLoading } = useTaskGraphSummary(task.id !== "draft" ? task.id : null);
@@ -166,6 +167,31 @@ export default function TaskCard({ task, onClick, compact = false, onStatusChang
               P{task.priority}
             </span>
           )}
+          {onApprovalModeChange && (
+            task.approval_mode === "auto" ? (
+              <span
+                className="px-1.5 py-0.5 rounded font-semibold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 cursor-pointer select-none"
+                title="Auto-approve enabled. Click to switch to manual."
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onApprovalModeChange("manual");
+                }}
+              >
+                AUTO
+              </span>
+            ) : (
+              <span
+                className="px-1.5 py-0.5 rounded font-semibold bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500 cursor-pointer select-none opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Manual approval. Click to enable auto-approve."
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onApprovalModeChange("auto");
+                }}
+              >
+                AUTO
+              </span>
+            )
+          )}
           {task.id !== 'draft' && (
             <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[9px]">
               {task.id.slice(0, 5)}

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

@@ -3,16 +3,16 @@
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { useGroupChat } from "@/hooks/useGroupChat";
 import { useThreadState } from "@/hooks/useThreadState";
-import { ThreadSidebar } from "@/components/thread/ThreadSidebar";
-import "@/styles/threadSidebar.css";
+import { WorkspaceSidebar } from "@/components/thread/WorkspaceSidebar";
+import "@/styles/workspaceSidebar.css";
 import { MessageList } from "./MessageList";
 import { ThreadView } from "./ThreadView";
 import { SearchResults } from "./SearchResults";
 import { Composer } from "./Composer";
 import { LogPanel } from "./LogPanel";
 import {
-  loadThreadSidebarVisible,
-  persistThreadSidebarVisible,
+  loadWorkspaceSidebarVisible,
+  persistWorkspaceSidebarVisible,
 } from "@/state/uiSettings";
 import {
   loadStoredActiveParticipantIds,
@@ -26,6 +26,7 @@ import type { SlashCommand } from "@/hooks/useCommandAutocomplete";
 import type { Participant, GroupMessage, MessageSearchResponse, MessageSearchResult } from "@/lib/types";
 import type { TaskDraftMessage } from "@/types/tasks";
 import { buildTasks } from "@/services/agxService";
+import { useTeams } from "@/hooks/useTeams";
 import { SquareTerminal, Search, ChevronLeft } from "lucide-react";
 import { StatusIndicator } from "./StatusIndicator";
 
@@ -152,19 +153,33 @@ export function ChatContainer() {
     isLoading: threadsLoading,
     isRestoringActiveThread,
     renameThread,
+    updateThreadStatus,
+    updateThreadOutcomeNote,
+    updateMessageThreadStatus,
+    updateMessageOutcomeNote,
   } = useThreadState();
-  const { messages, streaming, loading, logs, sendMessage, loadHistory, clearLogs, stop, stopThread } =
+  const { messages, setMessages, streaming, loading, logs, sendMessage, loadHistory, clearLogs, stop, stopThread } =
     useGroupChat(activeThreadId);
+  const {
+    teams,
+    createTeam,
+    renameTeam,
+    deleteTeam,
+    addAgent: addAgentToTeam,
+    removeAgent: removeAgentFromTeam,
+    reorderAgents,
+    moveAgent,
+  } = useTeams();
   const [participants, setParticipants] = useState<Participant[]>([]);
   const [participantsLoaded, setParticipantsLoaded] = useState(false);
   const [activeParticipantIds, setActiveParticipantIds] = useState<string[]>([]);
   const [copied, setCopied] = useState(false);
   const [logsOpen, setLogsOpen] = useState(false);
-  const [threadSidebarVisible, setThreadSidebarVisible] = useState(false);
+  const [workspaceSidebarVisible, setWorkspaceSidebarVisible] = useState(false);
 
   // Sync sidebar visibility from localStorage after hydration to avoid SSR mismatch
   useEffect(() => {
-    setThreadSidebarVisible(loadThreadSidebarVisible());
+    setWorkspaceSidebarVisible(loadWorkspaceSidebarVisible());
   }, []);
   const [openThreadId, setOpenThreadId] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
@@ -218,7 +233,7 @@ export function ChatContainer() {
     []
   );
 
-  const persistThreadSidebarPreferenceRemotely = useCallback(async (visible: boolean) => {
+  const persistWorkspaceSidebarPreferenceRemotely = useCallback(async (visible: boolean) => {
     try {
       await updateUserPreferences({ threadSidebarVisible: visible });
     } catch (error) {
@@ -228,10 +243,10 @@ export function ChatContainer() {
 
   const persistSidebarPreference = useCallback(
     (visible: boolean) => {
-      persistThreadSidebarVisible(visible);
-      void persistThreadSidebarPreferenceRemotely(visible);
+      persistWorkspaceSidebarVisible(visible);
+      void persistWorkspaceSidebarPreferenceRemotely(visible);
     },
-    [persistThreadSidebarPreferenceRemotely]
+    [persistWorkspaceSidebarPreferenceRemotely]
   );
 
   const normalizedSearchQuery = searchQuery.trim();
@@ -396,11 +411,11 @@ export function ChatContainer() {
       try {
         const preferences = await fetchUserPreferences();
         if (cancelled) return;
-        setThreadSidebarVisible((current) => {
+        setWorkspaceSidebarVisible((current) => {
           if (current === preferences.threadSidebarVisible) {
             return current;
           }
-          persistThreadSidebarVisible(preferences.threadSidebarVisible);
+          persistWorkspaceSidebarVisible(preferences.threadSidebarVisible);
           return preferences.threadSidebarVisible;
         });
       } catch (error) {
@@ -410,7 +425,7 @@ export function ChatContainer() {
     return () => {
       cancelled = true;
     };
-  }, [fetchUserPreferences, persistThreadSidebarVisible]);
+  }, [fetchUserPreferences, persistWorkspaceSidebarVisible]);
 
   useEffect(() => {
     if (!threadsLoading && !isCreating && threads.length === 0) {
@@ -908,6 +923,12 @@ export function ChatContainer() {
     [handleSearchCommand, handleSummarizeCommand, handleCreateTasksCommand]
   );
 
+  // Teams scoped to the current workspace
+  const workspaceTeams = useMemo(
+    () => activeThreadId ? teams.filter((t) => t.workspace_ids?.includes(activeThreadId)) : teams,
+    [teams, activeThreadId]
+  );
+
   const renderReplyComposer = useCallback(
     (rootMessageId: string) => (
       <Composer
@@ -915,16 +936,17 @@ export function ChatContainer() {
         onStop={() => stopThread(rootMessageId)}
         loading={Object.values(streaming).some((s) => s.rootMessageId === rootMessageId)}
         participants={activeParticipants}
+        teams={workspaceTeams}
         messages={messages}
         commands={slashCommands}
         placeholder="Reply — @name to mention, /search, /summarize"
       />
     ),
-    [handleThreadReply, stopThread, streaming, activeParticipants, slashCommands, messages]
+    [handleThreadReply, stopThread, streaming, activeParticipants, workspaceTeams, slashCommands, messages]
   );
 
-  const toggleThreadSidebar = useCallback(() => {
-    setThreadSidebarVisible((prev) => {
+  const toggleWorkspaceSidebar = useCallback(() => {
+    setWorkspaceSidebarVisible((prev) => {
       const next = !prev;
       persistSidebarPreference(next);
       return next;
@@ -1013,6 +1035,21 @@ export function ChatContainer() {
     [activeThreadId, participants]
   );
 
+  const handleSelectTeam = useCallback(
+    (teamId: string) => {
+      const team = teams.find((t) => t.id === teamId);
+      if (!team) return;
+      // Only change participants if the team belongs to the current workspace
+      if (activeThreadId && !team.workspace_ids?.includes(activeThreadId)) return;
+      const agentIds = team.agents.map((a) => a.agent_id);
+      setActiveParticipantIds(agentIds);
+      if (activeThreadId) {
+        persistStoredActiveParticipantIds(activeThreadId, agentIds);
+      }
+    },
+    [teams, activeThreadId]
+  );
+
   const searchInputBar = (
     <div className="border-b border-slate-200/60 bg-white px-6 py-2.5">
       <div className="max-w-2xl mx-auto relative group/search">
@@ -1053,7 +1090,7 @@ export function ChatContainer() {
 
   return (
     <div className="flex h-screen bg-white text-zinc-900">
-      <ThreadSidebar
+      <WorkspaceSidebar
         threads={threads}
         participants={participants}
         activeThreadId={activeThreadId}
@@ -1066,15 +1103,20 @@ export function ChatContainer() {
         onCreateThread={createThread}
         onRenameThread={renameThread}
         onDeleteThread={handleDeleteThread}
-        onAddParticipant={handleAdd}
-        onUpdateParticipant={handleUpdate}
-        onRemoveParticipant={handleRemove}
         activeParticipantIds={activeParticipantIds}
         onToggleParticipantActive={handleToggleParticipantActive}
-        onReorderParticipants={handleReorderParticipants}
-        visible={threadSidebarVisible}
-        onToggle={toggleThreadSidebar}
-
+        visible={workspaceSidebarVisible}
+        onToggle={toggleWorkspaceSidebar}
+        teams={teams}
+        onCreateTeam={createTeam}
+        onRenameTeam={renameTeam}
+        onDeleteTeam={deleteTeam}
+        onAddAgentToTeam={addAgentToTeam}
+        onRemoveAgentFromTeam={removeAgentFromTeam}
+        onReorderAgents={reorderAgents}
+        onMoveAgent={moveAgent}
+        onUpdateParticipant={handleUpdate}
+        onSelectTeam={handleSelectTeam}
       />
       <div className="flex flex-col flex-1 min-w-0 relative">
         {/* Top-right controls */}
@@ -1192,6 +1234,17 @@ export function ChatContainer() {
                     taskDrafts={taskDrafts}
                     deletingThreadRootId={deletingThreadRootId}
                     highlightedMessageId={highlightedMessageId}
+                    onUpdateMessageThreadStatus={activeThreadId ? (messageId, status) => {
+                      setMessages((prev) => prev.map((m) => m.id === messageId ? { ...m, threadStatus: status } : m));
+                      void updateMessageThreadStatus(activeThreadId, messageId, status);
+                      void fetch("/api/history", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ threadId: activeThreadId, messageId, threadStatus: status }) });
+                    } : undefined}
+                    onUpdateMessageOutcomeNote={activeThreadId ? (messageId, note) => {
+                      setMessages((prev) => prev.map((m) => m.id === messageId ? { ...m, outcomeNote: note } : m));
+                      void updateMessageOutcomeNote(activeThreadId, messageId, note);
+                      const msg = messages.find((m) => m.id === messageId);
+                      void fetch("/api/history", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ threadId: activeThreadId, messageId, threadStatus: msg?.threadStatus ?? null, outcomeNote: note }) });
+                    } : undefined}
                   />
                 )}
                 {!searchActive && !openThreadId && (
@@ -1200,6 +1253,7 @@ export function ChatContainer() {
                     onStop={stop}
                     loading={loading}
                     participants={activeParticipants}
+                    teams={workspaceTeams}
                     messages={messages}
                     commands={slashCommands}
                     pendingThreadInsert={pendingThreadInsert}

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

@@ -22,6 +22,7 @@ import { ThreadMentionPopover } from "./ThreadMentionPopover";
 import { AttachmentTray } from "./AttachmentTray";
 import { ComposerDropZone } from "./ComposerDropZone";
 import type { Participant, GroupMessage } from "@/lib/types";
+import type { Team } from "@/hooks/useTeams";
 import { Paperclip } from "lucide-react";
 
 import "@/styles/composer-pills.css";
@@ -40,6 +41,8 @@ interface Props {
   onStop: () => void;
   loading: boolean;
   participants: Participant[];
+  /** Teams for the current workspace */
+  teams?: Team[];
   /** All messages in the current workspace — used for @# discussion mentions */
   messages?: GroupMessage[];
   commands: SlashCommand[];
@@ -82,6 +85,7 @@ export function Composer({
   onStop,
   loading,
   participants,
+  teams = [],
   messages: allMessages = [],
   commands,
   placeholder = "Message — @name to mention, /search, /summarize",
@@ -100,7 +104,7 @@ export function Composer({
 
   const [threadRefs, setThreadRefs] = useState<ThreadRef[]>([]);
 
-  const mention = useMentionAutocomplete({ participants, maxSuggestions: 6 });
+  const mention = useMentionAutocomplete({ participants, teams, maxSuggestions: 8 });
   const command = useCommandAutocomplete({ commands, maxSuggestions: 6 });
   const fileMention = useFileMention({ maxSuggestions: 8 });
   const threadMention = useThreadMention({ messages: allMessages, maxSuggestions: 8 });
@@ -289,14 +293,26 @@ export function Composer({
     if (!info) return;
 
     const isParallel = replacement.text.startsWith("@@");
-    const content = {
-      type: "participantMention",
-      attrs: {
-        id: suggestion.id,
-        name: suggestion.name,
-        mode: isParallel ? "parallel" : "sequential",
-      },
-    };
+
+    const content = suggestion.kind === "team"
+      ? {
+          type: "participantMention",
+          attrs: {
+            id: suggestion.team.id,
+            name: suggestion.team.name,
+            mode: isParallel ? "parallel" : "sequential",
+            kind: "team",
+          },
+        }
+      : {
+          type: "participantMention",
+          attrs: {
+            id: suggestion.participant.id,
+            name: suggestion.participant.name,
+            mode: isParallel ? "parallel" : "sequential",
+            kind: "agent",
+          },
+        };
 
     replaceRangeWithNode(editor, info.blockStart, replacement.startIndex, replacement.endIndex, content);
     mention.close();