@mndrk/agx 2.0.13 → 2.0.15

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

@@ -146,27 +146,32 @@ function useClickOutside(ref: React.RefObject<HTMLElement | null>, onClose: () =
   }, [ref, onClose]);
 }
 
-interface AgentFormData {
+export interface AgentFormData {
   name: string;
   provider: ChatProvider;
   model: string;
   identity: string;
   identityFile: string;
   skills: Skill[];
+  variables: Record<string, string>;
 }
 
-function AgentForm({
+export function AgentForm({
   title,
   initial,
   submitLabel,
   onSubmit,
   onCancel,
+  teams,
+  initialTeamIds,
 }: {
   title: string;
   initial: AgentFormData;
   submitLabel: string;
-  onSubmit: (data: AgentFormData) => void;
+  onSubmit: (data: AgentFormData, teamIds?: string[]) => void;
   onCancel: () => void;
+  teams?: { id: string; name: string; label?: string }[];
+  initialTeamIds?: string[];
 }) {
   interface UploadedAttachment {
     id: string;
@@ -193,6 +198,8 @@ function AgentForm({
   );
   const [identityMode, setIdentityMode] = useState<"text" | "file">(initial.identityFile ? "file" : "text");
   const [skills, setSkills] = useState<Skill[]>(initial.skills.length > 0 ? initial.skills : []);
+  const [variables, setVariables] = useState<Record<string, string>>(initial.variables ?? {});
+  const [selectedTeamIds, setSelectedTeamIds] = useState<Set<string>>(new Set(initialTeamIds ?? []));
   const [isIdentityUploading, setIsIdentityUploading] = useState(false);
   const [identityUploadProgress, setIdentityUploadProgress] = useState(0);
 
@@ -269,7 +276,8 @@ function AgentForm({
       identity: identityMode === "text" ? identity.trim() : "",
       identityFile: identityMode === "file" ? identityFile.trim() : "",
       skills: skills.filter((s) => s.file.trim()),
-    });
+      variables,
+    }, teams ? Array.from(selectedTeamIds) : undefined);
   };
 
   const isSidebar = title.toLowerCase().includes("agent");
@@ -349,6 +357,71 @@ function AgentForm({
             </div>
           </div>
 
+          {/* Variables Section */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <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);
+                      });
+                    }}
+                    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>
+
           {/* Identity Section */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
@@ -361,7 +434,7 @@ function AgentForm({
                   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'}`}
                 >
-                  Txt
+                  Prompt
                 </button>
                 <button
                   type="button"
@@ -460,6 +533,37 @@ function AgentForm({
             </div>
           </div>
 
+          {/* Teams Section */}
+          {teams && teams.length > 0 && (
+            <div className="space-y-3">
+              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
+                <User size={16} /> Teams
+              </label>
+              <div className="space-y-1 max-h-[140px] overflow-y-auto">
+                {teams.map((team) => {
+                  const checked = selectedTeamIds.has(team.id);
+                  return (
+                    <button
+                      key={team.id}
+                      type="button"
+                      className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${checked ? "bg-indigo-50 text-indigo-700" : "text-slate-600 hover:bg-slate-50"}`}
+                      onClick={() => setSelectedTeamIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(team.id)) next.delete(team.id); else next.add(team.id);
+                        return next;
+                      })}
+                    >
+                      <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${checked ? "bg-indigo-600 border-indigo-600" : "border-slate-300"}`}>
+                        {checked && <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
+                      </div>
+                      <span className="text-xs font-medium">{team.label ?? team.name}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
           {/* Footer Actions */}
           <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
             <button
@@ -557,10 +661,10 @@ export function ParticipantBar({
                 {openPanel === p.id && !isAddPanelOpen && (
                   <AgentForm
                     title="Edit agent"
-                    initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", identityFile: p.identityFile || "", skills: p.skills || [] }}
+                    initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", identityFile: p.identityFile || "", skills: p.skills || [], variables: p.variables ?? {} }}
                     submitLabel="Save"
                     onSubmit={(data) => {
-                      onUpdate({ id: p.id, color: p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}) });
+                      onUpdate({ id: p.id, color: p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}), variables: data.variables });
                       setOpenPanel(null);
                     }}
                     onCancel={() => setOpenPanel(null)}
@@ -588,12 +692,12 @@ export function ParticipantBar({
           {isAddPanelOpen && (
             <AgentForm
               title="Add agent"
-              initial={{ name: "", provider: "claude", model: "", identity: "", identityFile: "", skills: [] }}
+              initial={{ name: "", provider: "claude", model: "", identity: "", identityFile: "", skills: [], variables: {} }}
               submitLabel="Add"
               onSubmit={(data) => {
                 const color = COLORS[participants.length % COLORS.length];
                 const id = data.name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-                onAdd({ id, color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}) });
+                onAdd({ id, color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}), variables: data.variables });
                 setOpenPanel(null);
               }}
               onCancel={() => setOpenPanel(null)}
@@ -628,10 +732,10 @@ export function ParticipantBar({
           {openPanel === p.id && (
             <AgentForm
               title="Edit agent"
-              initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", identityFile: p.identityFile || "", skills: p.skills || [] }}
+              initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", identityFile: p.identityFile || "", skills: p.skills || [], variables: p.variables ?? {} }}
               submitLabel="Save"
               onSubmit={(data) => {
-                onUpdate({ id: p.id, color: p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}) });
+                onUpdate({ id: p.id, color: p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}), variables: data.variables });
                 setOpenPanel(null);
               }}
               onCancel={() => setOpenPanel(null)}
@@ -652,12 +756,12 @@ export function ParticipantBar({
         {openPanel === "add" && (
           <AgentForm
             title="Add agent"
-            initial={{ name: "", provider: "claude", model: "", identity: "", identityFile: "", skills: [] }}
+            initial={{ name: "", provider: "claude", model: "", identity: "", identityFile: "", skills: [], variables: {} }}
             submitLabel="Add"
             onSubmit={(data) => {
               const color = COLORS[participants.length % COLORS.length];
               const id = data.name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-              onAdd({ id, color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}) });
+              onAdd({ id, color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), ...(data.identityFile ? { identityFile: data.identityFile } : {}), ...(data.skills.length > 0 ? { skills: data.skills } : {}), variables: data.variables });
               setOpenPanel(null);
             }}
             onCancel={() => setOpenPanel(null)}

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

@@ -5,7 +5,7 @@ import type { GroupMessage, Participant } from "@/lib/types";
 import type { StreamingEntry } from "@/hooks/useGroupChat";
 import type { TaskDraftMessage } from "@/types/tasks";
 import { Markdown } from "./Markdown";
-import { Copy, Maximize2, Trash2, ChevronLeft, User, Link } from "lucide-react";
+import { Copy, Trash2, ChevronLeft, User, Link } from "lucide-react";
 import { MessageAttachments } from "./MessageAttachments";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { MessageReactionsBar } from "./MessageReactionsBar";
@@ -160,10 +160,13 @@ export function ThreadView({
                                             </button>
                                         )}
                                         <button
+                                            onClick={() => {
+                                                navigator.clipboard.writeText(msg.content);
+                                            }}
                                             className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded"
-                                            title="Maximize"
+                                            title="Copy as Markdown"
                                         >
-                                            <Maximize2 size={14} />
+                                            <Copy size={14} />
                                         </button>
                                         {msg.id === rootMessageId && onDeleteThreadRoot && (
                                             <button

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

@@ -30,7 +30,7 @@ export function ThreadItem({ thread, isActive, onSelect }: ThreadItemProps) {
   const title = thread.title?.trim() || "Untitled workspace";
   const preview = getPreview(thread);
   return (
-    <li className="thread-sidebar__list-item">
+    <li className="workspace-sidebar__list-item">
       <button
         type="button"
         className={`thread-item ${isActive ? "thread-item--active" : ""}`}

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

@@ -17,7 +17,7 @@ export function ThreadList({ threads, activeThreadId, onSelectThread }: ThreadLi
   const sortedThreads = [...threads].sort((a, b) => b.updatedAt - a.updatedAt);
 
   return (
-    <ul className="thread-sidebar__list" role="list">
+    <ul className="workspace-sidebar__list" role="list">
       {sortedThreads.map((thread) => (
         <ThreadItem
           key={thread.id}