@mndrk/agx 2.0.19 → 2.0.21

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

@@ -4,6 +4,7 @@ import React, { useState, useRef, useEffect, useMemo } from "react";
 import {
   X,
   User,
+  Users,
   Cpu,
   Box,
   BookOpen,
@@ -14,6 +15,7 @@ import {
   ChevronDown,
   GripVertical,
 } from 'lucide-react';
+import RichTextEditor from "@/components/RichTextEditor";
 import {
   DndContext,
   closestCenter,
@@ -154,6 +156,12 @@ export interface AgentFormData {
   identityFile: string;
   skills: Skill[];
   variables: Record<string, string>;
+  color?: string;
+}
+
+export interface TeamMembership {
+  current: { id: string; name: string; is_default?: boolean }[];
+  available: { id: string; name: string }[];
 }
 
 export function AgentForm({
@@ -164,6 +172,10 @@ export function AgentForm({
   onCancel,
   teams,
   initialTeamIds,
+  agentId,
+  teamMemberships,
+  onAddToTeam,
+  onRemoveFromTeam,
 }: {
   title: string;
   initial: AgentFormData;
@@ -172,6 +184,10 @@ export function AgentForm({
   onCancel: () => void;
   teams?: { id: string; name: string; label?: string }[];
   initialTeamIds?: string[];
+  agentId?: string;
+  teamMemberships?: TeamMembership;
+  onAddToTeam?: (teamId: string) => void;
+  onRemoveFromTeam?: (teamId: string) => void;
 }) {
   interface UploadedAttachment {
     id: string;
@@ -196,9 +212,16 @@ export function AgentForm({
   const [identityFileLabel, setIdentityFileLabel] = useState(
     initial.identityFile ? inferRefLabel(initial.identityFile) : ""
   );
-  const [identityMode, setIdentityMode] = useState<"text" | "file">(initial.identityFile ? "file" : "text");
+  const [color, setColor] = useState(initial.color ?? "#6B7280");
+  const isPathLike = (val: string) => val.startsWith("/") || val.startsWith("./") || val.startsWith("~");
+  const [identityMode, setIdentityMode] = useState<"text" | "path" | "file">(
+    initial.identityFile ? (isPathLike(initial.identityFile) ? "path" : "file") : "text"
+  );
   const [skills, setSkills] = useState<Skill[]>(initial.skills.length > 0 ? initial.skills : []);
   const [variables, setVariables] = useState<Record<string, string>>(initial.variables ?? {});
+  const [varsMode, setVarsMode] = useState<"form" | "json">("form");
+  const [varsJson, setVarsJson] = useState("");
+  const [varsJsonError, setVarsJsonError] = useState<string | null>(null);
   const [selectedTeamIds, setSelectedTeamIds] = useState<Set<string>>(new Set(initialTeamIds ?? []));
   const [isIdentityUploading, setIsIdentityUploading] = useState(false);
   const [identityUploadProgress, setIdentityUploadProgress] = useState(0);
@@ -274,30 +297,47 @@ export function AgentForm({
       provider,
       model: model.trim(),
       identity: identityMode === "text" ? identity.trim() : "",
-      identityFile: identityMode === "file" ? identityFile.trim() : "",
+      identityFile: identityMode === "path" ? identityFile.trim() : identityMode === "file" ? identityFile.trim() : "",
       skills: skills.filter((s) => s.file.trim()),
       variables,
+      color,
     }, teams ? Array.from(selectedTeamIds) : undefined);
   };
 
-  const isSidebar = title.toLowerCase().includes("agent");
-
   return (
     <div
       ref={ref}
-      className={isSidebar
-        ? "fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-500/20 backdrop-blur-sm"
-        : "absolute top-full left-0 mt-3 z-50 bg-white border border-slate-200 rounded-2xl shadow-2xl p-4 w-72 animate-in fade-in slide-in-from-top-2 duration-200"}
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-500/20 backdrop-blur-sm"
       onKeyDown={(e) => {
         if (e.key === "Escape") onCancel();
       }}
     >
-      <div className={`${isSidebar ? "bg-white rounded-[32px] shadow-2xl overflow-hidden w-full max-w-lg animate-in fade-in zoom-in duration-300" : "flex flex-col gap-5"}`}>
+      <div className="bg-white rounded-[32px] shadow-2xl overflow-hidden w-full max-w-2xl max-h-[90vh] flex flex-col animate-in fade-in zoom-in duration-300">
         {/* Header */}
-        <div className={`${isSidebar ? "px-8 pt-8 pb-4" : "mb-2"} flex items-center justify-between`}>
-          <div>
-            <h2 className="text-[10px] font-bold tracking-widest text-slate-400 uppercase">{title}</h2>
-            {isSidebar && <h1 className="text-2xl font-semibold mt-1">{name || "Configure Agent"}</h1>}
+        <div className="px-8 pt-8 pb-4 shrink-0 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            {agentId && (
+              <div className="flex flex-col items-center gap-1.5">
+                <img
+                  src={agentAvatarUrl(agentId, 64, color)}
+                  alt={name}
+                  className="w-14 h-14 rounded-full bg-slate-100"
+                />
+                <div className="flex items-center gap-1.5">
+                  <label className="text-[10px] text-slate-400">Color</label>
+                  <input
+                    type="color"
+                    value={color}
+                    onChange={(e) => setColor(e.target.value)}
+                    className="w-5 h-5 rounded border border-slate-200 cursor-pointer p-0"
+                  />
+                </div>
+              </div>
+            )}
+            <div>
+              <h2 className="text-[10px] font-bold tracking-widest text-slate-400 uppercase">{title}</h2>
+              <h1 className="text-2xl font-semibold mt-1">{name || "Configure Agent"}</h1>
+            </div>
           </div>
           <button
             onClick={onCancel}
@@ -307,7 +347,7 @@ export function AgentForm({
           </button>
         </div>
 
-        <div className={`${isSidebar ? "px-8 pb-8 space-y-6" : "flex flex-col gap-5"}`}>
+        <div className="px-8 pb-8 space-y-6 overflow-y-auto">
           {/* Name Field */}
           <div className="space-y-2">
             <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
@@ -363,63 +403,129 @@ export function AgentForm({
               <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
                 <Code2 size={16} /> Variables
               </label>
-              <button
-                type="button"
-                onClick={() => setVariables((prev) => ({ ...prev, [""]: "" }))}
-                className="flex items-center gap-1 text-[11px] font-bold text-indigo-600 hover:text-indigo-700 uppercase tracking-wider"
-              >
-                <Plus size={14} /> Add
-              </button>
-            </div>
-
-            <div className="space-y-2">
-              {Object.entries(variables).map(([key, value], index) => (
-                <div key={index} className="flex items-center gap-2">
-                  <input
-                    type="text"
-                    placeholder="KEY"
-                    value={key}
-                    onChange={(e) => {
-                      setVariables((prev) => {
-                        const entries = Object.entries(prev);
-                        entries[index] = [e.target.value, entries[index][1]];
-                        return Object.fromEntries(entries);
-                      });
-                    }}
-                    className="w-[40%] bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs font-mono text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-300"
-                  />
-                  <input
-                    type="text"
-                    placeholder="value"
-                    value={value}
-                    onChange={(e) => {
-                      setVariables((prev) => {
-                        const entries = Object.entries(prev);
-                        entries[index] = [entries[index][0], e.target.value];
-                        return Object.fromEntries(entries);
-                      });
+              <div className="flex items-center gap-2">
+                <div className="flex p-1 bg-slate-100 rounded-lg border border-slate-200">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (varsMode === "json") {
+                        try {
+                          const parsed = JSON.parse(varsJson);
+                          if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+                            const clean: Record<string, string> = {};
+                            for (const [k, v] of Object.entries(parsed)) clean[k] = String(v);
+                            setVariables(clean);
+                            setVarsJsonError(null);
+                          }
+                        } catch { /* stay on json if invalid */ }
+                      }
+                      setVarsMode("form");
                     }}
-                    className="flex-1 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs font-mono text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-300"
-                  />
+                    className={`px-3 py-1 text-xs font-semibold rounded-md transition-all ${varsMode === "form" ? "bg-white text-slate-900 shadow-sm" : "text-slate-500 hover:text-slate-700"}`}
+                  >
+                    Form
+                  </button>
                   <button
                     type="button"
                     onClick={() => {
-                      setVariables((prev) => {
-                        const entries = Object.entries(prev);
-                        entries.splice(index, 1);
-                        return Object.fromEntries(entries);
-                      });
+                      setVarsJson(JSON.stringify(variables, null, 2));
+                      setVarsJsonError(null);
+                      setVarsMode("json");
                     }}
-                    className="p-1 text-slate-300 hover:text-slate-600 transition-colors"
+                    className={`px-3 py-1 text-xs font-semibold rounded-md transition-all ${varsMode === "json" ? "bg-white text-slate-900 shadow-sm" : "text-slate-500 hover:text-slate-700"}`}
                   >
-                    <X size={14} />
+                    JSON
                   </button>
                 </div>
-              ))}
-              {Object.keys(variables).length === 0 && (
-                <div className="text-xs text-slate-400 px-1">No variables set.</div>
-              )}
+                {varsMode === "form" && (
+                  <button
+                    type="button"
+                    onClick={() => setVariables((prev) => ({ ...prev, [""]: "" }))}
+                    className="flex items-center gap-1 text-[11px] font-bold text-indigo-600 hover:text-indigo-700 uppercase tracking-wider"
+                  >
+                    <Plus size={14} /> Add
+                  </button>
+                )}
+              </div>
             </div>
+
+            {varsMode === "form" ? (
+              <div className="space-y-2">
+                {Object.entries(variables).map(([key, value], index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      placeholder="KEY"
+                      value={key}
+                      onChange={(e) => {
+                        setVariables((prev) => {
+                          const entries = Object.entries(prev);
+                          entries[index] = [e.target.value, entries[index][1]];
+                          return Object.fromEntries(entries);
+                        });
+                      }}
+                      className="w-[40%] bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs font-mono text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-300"
+                    />
+                    <input
+                      type="text"
+                      placeholder="value"
+                      value={value}
+                      onChange={(e) => {
+                        setVariables((prev) => {
+                          const entries = Object.entries(prev);
+                          entries[index] = [entries[index][0], e.target.value];
+                          return Object.fromEntries(entries);
+                        });
+                      }}
+                      className="flex-1 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs font-mono text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-indigo-300"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setVariables((prev) => {
+                          const entries = Object.entries(prev);
+                          entries.splice(index, 1);
+                          return Object.fromEntries(entries);
+                        });
+                      }}
+                      className="p-1 text-slate-300 hover:text-slate-600 transition-colors"
+                    >
+                      <X size={14} />
+                    </button>
+                  </div>
+                ))}
+                {Object.keys(variables).length === 0 && (
+                  <div className="text-xs text-slate-400 px-1">No variables set.</div>
+                )}
+              </div>
+            ) : (
+              <div className="space-y-1">
+                <textarea
+                  value={varsJson}
+                  onChange={(e) => {
+                    setVarsJson(e.target.value);
+                    try {
+                      const parsed = JSON.parse(e.target.value);
+                      if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+                        const clean: Record<string, string> = {};
+                        for (const [k, v] of Object.entries(parsed)) clean[k] = String(v);
+                        setVariables(clean);
+                        setVarsJsonError(null);
+                      } else {
+                        setVarsJsonError("Must be a JSON object");
+                      }
+                    } catch {
+                      setVarsJsonError("Invalid JSON");
+                    }
+                  }}
+                  className={`w-full min-h-[100px] px-4 py-3 bg-slate-50 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none font-mono text-xs leading-relaxed ${varsJsonError ? "border-red-300 focus:border-red-400" : "border-slate-200 focus:border-indigo-500"}`}
+                  placeholder='{ "KEY": "value" }'
+                />
+                {varsJsonError && (
+                  <p className="text-[11px] text-red-500 px-1">{varsJsonError}</p>
+                )}
+              </div>
+            )}
           </div>
 
           {/* Identity Section */}
@@ -429,29 +535,34 @@ export function AgentForm({
                 <BookOpen size={16} /> Identity
               </label>
               <div className="flex p-1 bg-slate-100 rounded-lg border border-slate-200">
-                <button
-                  type="button"
-                  onClick={() => setIdentityMode('text')}
-                  className={`px-3 py-1 text-xs font-semibold rounded-md transition-all ${identityMode === 'text' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
-                >
-                  Prompt
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setIdentityMode('file')}
-                  className={`px-3 py-1 text-xs font-semibold rounded-md transition-all ${identityMode === 'file' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
-                >
-                  File
-                </button>
+                {(["text", "path", "file"] as const).map((mode) => (
+                  <button
+                    key={mode}
+                    type="button"
+                    onClick={() => setIdentityMode(mode)}
+                    className={`px-3 py-1 text-xs font-semibold rounded-md transition-all ${identityMode === mode ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+                  >
+                    {mode === "text" ? "Prompt" : mode === "path" ? "Path" : "Upload"}
+                  </button>
+                ))}
               </div>
             </div>
 
             {identityMode === 'text' ? (
-              <textarea
-                value={identity}
-                onChange={(e) => setIdentity(e.target.value)}
-                className="w-full min-h-[120px] px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all resize-none placeholder:text-slate-400 leading-relaxed"
-                placeholder="Describe the agent's identity and goals..."
+              <div className="border border-slate-200 rounded-xl overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-indigo-500/20 focus-within:border-indigo-500 transition-all">
+                <RichTextEditor
+                  content={identity}
+                  onChange={(md) => setIdentity(md)}
+                  placeholder="Describe the agent's identity and goals..."
+                />
+              </div>
+            ) : identityMode === 'path' ? (
+              <input
+                type="text"
+                value={identityFile}
+                onChange={(e) => setIdentityFile(e.target.value)}
+                placeholder="/path/to/identity.md"
+                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-mono text-sm"
               />
             ) : (
               <div className="relative">
@@ -564,6 +675,52 @@ export function AgentForm({
             </div>
           )}
 
+          {/* Team Management (edit mode) */}
+          {teamMemberships && (
+            <div className="space-y-3">
+              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
+                <Users size={16} /> Teams
+              </label>
+              {teamMemberships.current.length > 0 ? (
+                <div className="flex flex-col gap-1">
+                  {teamMemberships.current.map((t) => (
+                    <div key={t.id} className="flex items-center gap-2 text-xs bg-slate-50 rounded-lg px-3 py-2">
+                      <Users size={12} className="text-slate-400 shrink-0" />
+                      <span className="truncate flex-1">{t.name}</span>
+                      {onRemoveFromTeam && !t.is_default && (
+                        <button
+                          type="button"
+                          className="text-slate-400 hover:text-red-500 transition-colors"
+                          onClick={() => onRemoveFromTeam(t.id)}
+                          title="Remove from team"
+                        >
+                          <X size={12} />
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-slate-400 italic">Not in any team</p>
+              )}
+              {teamMemberships.available.length > 0 && onAddToTeam && (
+                <div className="flex flex-wrap gap-1">
+                  {teamMemberships.available.map((t) => (
+                    <button
+                      key={t.id}
+                      type="button"
+                      className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-lg border border-dashed border-slate-300 text-slate-500 hover:border-slate-400 hover:text-slate-700 transition-colors"
+                      onClick={() => onAddToTeam(t.id)}
+                    >
+                      <Plus size={10} />
+                      {t.name}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
           {/* Footer Actions */}
           <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
             <button

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

@@ -1,12 +1,13 @@
 "use client";
 
-import { useEffect, useRef, useMemo } from "react";
+import { useCallback, useEffect, useRef, useMemo, useState } from "react";
 import NextLink from "next/link";
 import type { GroupMessage, Participant } from "@/lib/types";
 import type { StreamingEntry } from "@/hooks/useGroupChat";
 import type { TaskDraftMessage } from "@/types/tasks";
+import type { AgentProcessEntry } from "@/lib/agent-process-registry";
 import { Markdown } from "./Markdown";
-import { Copy, Trash2, ChevronLeft, User, Link } from "lucide-react";
+import { Copy, Trash2, ChevronLeft, User, Link, MessageSquareText } from "lucide-react";
 import { MessageAttachments } from "./MessageAttachments";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { MessageReactionsBar } from "./MessageReactionsBar";
@@ -26,6 +27,7 @@ interface Props {
     onDeleteThreadRoot?: (messageId: string) => void;
     highlightedMessageId?: string;
     renderReplyComposer: (rootMessageId: string) => React.ReactNode;
+    activeProcesses?: AgentProcessEntry[];
 }
 
 export function ThreadView({
@@ -39,6 +41,7 @@ export function ThreadView({
     onDeleteThreadRoot,
     highlightedMessageId,
     renderReplyComposer,
+    activeProcesses = [],
 }: Props) {
     const bottomRef = useRef<HTMLDivElement>(null);
     const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map());
@@ -57,11 +60,29 @@ export function ThreadView({
         else messageRefs.current.delete(id);
     };
 
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const userScrolledUpRef = useRef(false);
+    const prevHighlightRef = useRef<string | null>(null);
+
+    // Track whether user has scrolled up
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        const handleScroll = () => {
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            userScrolledUpRef.current = scrollHeight - scrollTop - clientHeight > 80;
+        };
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        return () => container.removeEventListener("scroll", handleScroll);
+    }, []);
+
     useEffect(() => {
-        if (highlightedMessageId) {
+        if (highlightedMessageId && highlightedMessageId !== prevHighlightRef.current) {
+            prevHighlightRef.current = highlightedMessageId;
             const el = messageRefs.current.get(highlightedMessageId);
             if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-        } else {
+        } else if (!highlightedMessageId && !userScrolledUpRef.current) {
+            prevHighlightRef.current = null;
             bottomRef.current?.scrollIntoView({ behavior: "smooth" });
         }
     }, [highlightedMessageId, threadMessages, streaming]);
@@ -77,8 +98,29 @@ export function ThreadView({
 
     return (
         <div className="flex flex-col h-full overflow-hidden bg-slate-50">
+            {/* Active processes bar */}
+            {activeProcesses.length > 0 && (
+                <div className="flex items-center justify-end gap-2 px-4 py-2 border-b border-slate-200 bg-white/80 backdrop-blur-sm">
+                    <span className="text-[11px] text-slate-400 uppercase tracking-wide font-medium">Working</span>
+                    <div className="flex items-center -space-x-1.5">
+                        {activeProcesses.map((proc) => {
+                            const p = participantMap[proc.agentId];
+                            return (
+                                <div key={proc.agentId} className="relative" title={`${p?.name || proc.agentId} — ${proc.state}`}>
+                                    <img
+                                        src={agentAvatarUrl(proc.agentId, 24, p?.color)}
+                                        alt={p?.name || proc.agentId}
+                                        className="w-6 h-6 rounded-full border-2 border-white shadow-sm"
+                                    />
+                                    <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-400 rounded-full border-2 border-white animate-pulse" />
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
             {/* Thread Content */}
-            <div className="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 chat-scrollbar">
+            <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 chat-scrollbar">
                 <div className="max-w-2xl mx-auto space-y-8 pb-4">
 
                     {threadMessages.map((msg) => {
@@ -149,11 +191,13 @@ export function ThreadView({
 
                                     {/* Actions on hover */}
                                     <div className="absolute top-8 -right-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 bg-white border border-slate-200 rounded-lg shadow-sm p-1 z-10 translate-x-full">
-                                        {msg.id === rootMessageId && onAddToChat && (
+                                        {msg.id === rootMessageId && (
                                             <button
-                                                onClick={() => onAddToChat(msg.id)}
+                                                onClick={() => {
+                                                    navigator.clipboard.writeText(msg.id);
+                                                }}
                                                 className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded"
-                                                title="Add to chat"
+                                                title="Copy message ID"
                                             >
                                                 <Link size={14} />
                                             </button>
@@ -164,7 +208,7 @@ export function ThreadView({
                                                 className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded"
                                                 title="Copy Thread"
                                             >
-                                                <Copy size={14} />
+                                                <MessageSquareText size={14} />
                                             </button>
                                         )}
                                         <button

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

@@ -57,7 +57,7 @@ export function TypingIndicator({
             </div>
           ) : (
             <div className="flex items-center gap-2 text-slate-400 italic">
-              <span className="text-sm font-medium">thinking</span>
+              <span className="text-sm font-medium">working</span>
               <PulsatingDots />
             </div>
           )}

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

@@ -19,6 +19,7 @@ import {
 
 import ConditionalNodeComponent from "@/components/graph/ConditionalNodeComponent";
 import ForkNodeComponent from "@/components/graph/ForkNodeComponent";
+import FunctionNodeComponent from "@/components/graph/FunctionNodeComponent";
 import GateNodeComponent from "@/components/graph/GateNodeComponent";
 import JoinNodeComponent from "@/components/graph/JoinNodeComponent";
 import WorkNodeComponent from "@/components/graph/WorkNodeComponent";
@@ -31,6 +32,7 @@ import type { ExecutionGraph, GraphNode, NodeStatus } from "@/src/graph/types";
 
 const NODE_TYPES = {
   work: WorkNodeComponent,
+  function: FunctionNodeComponent,
   gate: GateNodeComponent,
   fork: ForkNodeComponent,
   join: JoinNodeComponent,
@@ -66,6 +68,10 @@ function resolveNodeSize(node: GraphNode): { width: number; height: number } {
     return { width: 220, height: 88 };
   }
 
+  if (node.type === "function") {
+    return { width: 200, height: 80 };
+  }
+
   if (node.type === "gate") {
     return { width: 108, height: 108 };
   }

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+
+import { formatNodeStatusLabel, toNodeStatusClass } from "@/components/graph/graph-derived";
+import type { GraphFlowNode } from "@/components/graph/graph-flow-types";
+import type { FunctionNode } from "@/src/graph/types";
+
+export default function FunctionNodeComponent({ data, selected }: NodeProps<GraphFlowNode>) {
+  const node = data.node as FunctionNode;
+  const statusClass = toNodeStatusClass(node.status);
+  const kindLabel = node.kind === "mcp" ? "MCP" : "Bash";
+
+  return (
+    <div
+      className={`execution-node execution-node--function ${statusClass} ${selected ? "execution-node--selected" : ""}`}
+      title={data.label}
+    >
+      <Handle type="target" position={Position.Left} className="execution-node__handle" />
+
+      <div className="execution-node__header">
+        <div className="execution-node__title">{data.label}</div>
+        <span className="execution-node__badge">{kindLabel}</span>
+      </div>
+
+      <div className="execution-node__meta">
+        <span className="execution-node__status">{formatNodeStatusLabel(node.status)}</span>
+        {node.timeoutMs && (
+          <span className="execution-node__status">timeout {Math.round(node.timeoutMs / 1000)}s</span>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Right} className="execution-node__handle" />
+    </div>
+  );
+}

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/components/graph/graph-derived.ts

@@ -63,6 +63,10 @@ export function getNodeLabel(nodeId: string, node: GraphNode): string {
     return node.title?.trim() || nodeId;
   }
 
+  if (node.type === "function") {
+    return node.title?.trim() || nodeId;
+  }
+
   if (node.type === "gate") {
     return formatGateTypeLabel(node.gateType);
   }