@mndrk/agx 2.0.19 → 2.0.21

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

@@ -1,12 +1,11 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ChevronDown,
   ChevronRight,
   Hash,
   Bot,
-  Check,
   GripVertical,
   Minus,
   PanelLeftClose,
@@ -35,12 +34,12 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { Thread } from "@/lib/storage";
-import type { ChatProvider, Participant } from "@/lib/types";
+import type { Participant } from "@/lib/types";
 import type { Team, TeamAgent } from "@/hooks/useTeams";
 import { useFocusManagement } from "@/hooks/useFocusManagement";
 import { useProjects } from "@/hooks/useProjects";
+import { useProcessPolling } from "@/hooks/useProcessPolling";
 import { agentAvatarUrl, AgentForm, type AgentFormData } from "@/components/chat-ui/ParticipantBar";
-import RichTextEditor from "@/components/RichTextEditor";
 
 interface WorkspaceSidebarProps {
   threads: Thread[];
@@ -171,6 +170,18 @@ export function WorkspaceSidebar({
   const [createTeamName, setCreateTeamName] = useState("");
   const [createTeamAgents, setCreateTeamAgents] = useState<Set<string>>(new Set());
   const { projects } = useProjects();
+  const { processes: allProcesses } = useProcessPolling({});
+
+  // Build a set of workspace IDs that have active processes
+  const workspacesWithActiveProcesses = useMemo(() => {
+    const active = new Set<string>();
+    for (const p of allProcesses) {
+      if (p.state === "spawning" || p.state === "running") {
+        active.add(p.workspaceId);
+      }
+    }
+    return active;
+  }, [allProcesses]);
 
   // Generic text input modal state
   const [inputModal, setInputModal] = useState<{
@@ -442,16 +453,14 @@ export function WorkspaceSidebar({
           </div>
         )}
 
-        <nav className="workspace-sidebar__section">
-          <div className="workspace-sidebar__section-header">
-            <Link
-              href="/agents"
-              className="workspace-sidebar__section-link"
-            >
-              <Bot size={13} className="flex-shrink-0" />
-              Manage Agents
-            </Link>
-          </div>
+        <nav className="workspace-sidebar__section" style={{ gap: 0, marginTop: '1.5rem' }}>
+          <Link
+            href="/agents"
+            className="workspace-sidebar__section-link"
+          >
+            <Bot size={13} className="flex-shrink-0" />
+            Manage Agents
+          </Link>
         </nav>
 
         <nav className="workspace-sidebar__section">
@@ -1007,370 +1016,50 @@ export function WorkspaceSidebar({
         </div>
       )}
 
-      {agentDetailAgent && (
-        <AgentDetailModal
-          agent={agentDetailAgent}
-          teams={teams}
-          onClose={() => setAgentDetailId(null)}
-          onSave={onUpdateParticipant}
-          onAddToTeam={onAddAgentToTeam}
-          onRemoveFromTeam={onRemoveAgentFromTeam}
-        />
-      )}
+      {agentDetailAgent && (() => {
+        const agentTeams = teams.filter((t) => t.agents.some((a) => a.agent_id === agentDetailAgent.id));
+        const availableTeams = teams.filter((t) => !t.agents.some((a) => a.agent_id === agentDetailAgent.id));
+        return (
+          <AgentForm
+            title="Edit agent"
+            initial={{
+              name: agentDetailAgent.name,
+              provider: agentDetailAgent.provider,
+              model: agentDetailAgent.model || "",
+              identity: agentDetailAgent.identity || "",
+              identityFile: agentDetailAgent.identityFile || "",
+              skills: agentDetailAgent.skills || [],
+              variables: agentDetailAgent.variables ?? {},
+              color: agentDetailAgent.color,
+            }}
+            agentId={agentDetailAgent.id}
+            submitLabel="Save"
+            teamMemberships={{
+              current: agentTeams.map((t) => ({ id: t.id, name: t.name, is_default: !!t.is_default })),
+              available: availableTeams.map((t) => ({ id: t.id, name: t.name })),
+            }}
+            onAddToTeam={onAddAgentToTeam ? (teamId) => onAddAgentToTeam(teamId, agentDetailAgent.id) : undefined}
+            onRemoveFromTeam={onRemoveAgentFromTeam ? (teamId) => onRemoveAgentFromTeam(teamId, agentDetailAgent.id) : undefined}
+            onSubmit={async (data) => {
+              if (onUpdateParticipant) {
+                await onUpdateParticipant({
+                  ...agentDetailAgent,
+                  name: data.name,
+                  provider: data.provider,
+                  model: data.model,
+                  color: data.color ?? agentDetailAgent.color,
+                  skills: data.skills,
+                  ...(data.identity ? { identity: data.identity } : {}),
+                  ...(data.identityFile ? { identityFile: data.identityFile } : {}),
+                  variables: data.variables,
+                });
+              }
+              setAgentDetailId(null);
+            }}
+            onCancel={() => setAgentDetailId(null)}
+          />
+        );
+      })()}
     </aside>
   );
 }
-
-// ── Agent Detail/Edit Modal ─────────────────────────────────────────────────
-
-const PROVIDERS: ChatProvider[] = ["claude", "gemini", "ollama", "codex"];
-
-function AgentDetailModal({
-  agent,
-  teams,
-  onClose,
-  onSave,
-  onAddToTeam,
-  onRemoveFromTeam,
-}: {
-  agent: Participant | null;
-  teams: Team[];
-  onClose: () => void;
-  onSave?: (updated: Participant) => Promise<unknown>;
-  onAddToTeam?: (teamId: string, agentId: string) => Promise<unknown>;
-  onRemoveFromTeam?: (teamId: string, agentId: string) => Promise<unknown>;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [name, setName] = useState("");
-  const [provider, setProvider] = useState<ChatProvider>("claude");
-  const [model, setModel] = useState("");
-  const [identity, setIdentity] = useState("");
-  const [identityFile, setIdentityFile] = useState("");
-  const [color, setColor] = useState("#6B7280");
-  const [skills, setSkills] = useState<{ file: string; condition: string }[]>([]);
-  const [variableEntries, setVariableEntries] = useState<{ key: string; value: string }[]>([]);
-  const [saving, setSaving] = useState(false);
-
-  // Reset form when agent changes
-  const resetForm = useCallback(() => {
-    if (!agent) return;
-    setName(agent.name);
-    setProvider(agent.provider);
-    setModel(agent.model ?? "");
-    setIdentity(agent.identity ?? "");
-    setIdentityFile(agent.identityFile ?? "");
-    setColor(agent.color ?? "#6B7280");
-    setSkills((agent.skills ?? []).map((s) => ({ file: s.file, condition: s.condition })));
-    setVariableEntries(
-      agent.variables && Object.keys(agent.variables).length > 0
-        ? Object.entries(agent.variables).map(([key, value]) => ({ key, value }))
-        : [{ key: "", value: "" }],
-    );
-  }, [agent]);
-
-  // Initialize on open
-  useEffect(() => { resetForm(); }, [resetForm]);
-
-  if (!agent) return null;
-
-  const agentTeams = teams.filter((t) => t.agents.some((a) => a.agent_id === agent.id));
-  const availableTeams = teams.filter((t) => !t.agents.some((a) => a.agent_id === agent.id));
-
-  const handleSave = async () => {
-    if (!onSave || !name.trim() || !model.trim()) return;
-    const parsedVars: Record<string, string> = {};
-    for (const entry of variableEntries) {
-      if (entry.key.trim()) parsedVars[entry.key.trim()] = entry.value;
-    }
-    setSaving(true);
-    try {
-      await onSave({
-        ...agent,
-        name: name.trim(),
-        provider,
-        model: model.trim(),
-        color,
-        skills: skills.filter((s) => s.file.trim()),
-        ...(identity.trim() ? { identity: identity.trim() } : {}),
-        ...(identityFile.trim() ? { identityFile: identityFile.trim() } : {}),
-        ...(Object.keys(parsedVars).length > 0 ? { variables: parsedVars } : {}),
-      });
-      onClose();
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const inputClass = "w-full px-3 py-2 text-sm border border-slate-200 rounded-lg outline-none focus:border-slate-400 focus:ring-1 focus:ring-slate-200 transition-all";
-  const labelClass = "text-[10px] font-medium text-slate-400 uppercase tracking-wide mb-1 block";
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
-      onClick={onClose}
-    >
-      <div
-        className="bg-white rounded-xl shadow-xl border border-slate-200 w-[640px] max-h-[85vh] flex flex-col overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
-          <h3 className="text-sm font-medium text-slate-900">Agent Details</h3>
-          <button
-            type="button"
-            className="text-slate-400 hover:text-slate-600 transition-colors"
-            onClick={onClose}
-          >
-            <X size={16} />
-          </button>
-        </div>
-
-        {/* Body */}
-        <div className="overflow-y-auto px-5 py-5 flex flex-col gap-4">
-          {/* Avatar + Name */}
-          <div className="flex items-center gap-4">
-            <img
-              src={agentAvatarUrl(agent.id, 64, color)}
-              alt={agent.name}
-              className="w-16 h-16 rounded-full bg-slate-100"
-            />
-            <div className="min-w-0 flex-1">
-              <div className="flex flex-col gap-2">
-                <input
-                  type="text"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Agent name"
-                  className={inputClass}
-                />
-                <div className="flex items-center gap-2">
-                  <label className="text-[10px] text-slate-400">Color</label>
-                  <input
-                    type="color"
-                    value={color}
-                    onChange={(e) => setColor(e.target.value)}
-                    className="w-6 h-6 rounded border border-slate-200 cursor-pointer p-0"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Provider + Model */}
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className={labelClass}>Provider</label>
-              <select
-                value={provider}
-                onChange={(e) => setProvider(e.target.value as ChatProvider)}
-                className={inputClass}
-              >
-                {PROVIDERS.map((p) => (
-                  <option key={p} value={p}>{p}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className={labelClass}>Model</label>
-              <input
-                type="text"
-                value={model}
-                onChange={(e) => setModel(e.target.value)}
-                placeholder="e.g. claude-sonnet-4-20250514"
-                className={`${inputClass} font-mono`}
-              />
-            </div>
-          </div>
-
-          {/* Identity File */}
-          <div>
-            <label className={labelClass}>Identity file</label>
-            <input
-              type="text"
-              value={identityFile}
-              onChange={(e) => setIdentityFile(e.target.value)}
-              placeholder="/path/to/identity.md"
-              className={`${inputClass} font-mono`}
-            />
-          </div>
-
-          {/* Identity text */}
-          <div>
-            <label className={labelClass}>Identity prompt</label>
-            <div className="border border-slate-200 rounded-lg overflow-hidden focus-within:border-slate-400 focus-within:ring-1 focus-within:ring-slate-200 transition-all">
-              <RichTextEditor
-                content={identity}
-                onChange={(md) => setIdentity(md)}
-                placeholder="System prompt / identity text…"
-              />
-            </div>
-          </div>
-
-          {/* Variables */}
-          <div>
-            <label className={labelClass}>Variables</label>
-            <div className="flex flex-col gap-2">
-              {variableEntries.map((entry, i) => (
-                <div key={i} className="flex items-center gap-2">
-                  <input
-                    value={entry.key}
-                    onChange={(e) => {
-                      const next = [...variableEntries];
-                      next[i] = { ...next[i], key: e.target.value };
-                      setVariableEntries(next);
-                    }}
-                    placeholder="key"
-                    className={`${inputClass} flex-1 font-mono !text-xs`}
-                  />
-                  <input
-                    value={entry.value}
-                    onChange={(e) => {
-                      const next = [...variableEntries];
-                      next[i] = { ...next[i], value: e.target.value };
-                      setVariableEntries(next);
-                    }}
-                    placeholder="value"
-                    className={`${inputClass} flex-1 font-mono !text-xs`}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => {
-                      const next = variableEntries.filter((_, j) => j !== i);
-                      setVariableEntries(next.length ? next : [{ key: "", value: "" }]);
-                    }}
-                    className="text-slate-400 hover:text-red-500 transition-colors text-xs shrink-0"
-                  >
-                    ×
-                  </button>
-                </div>
-              ))}
-              <button
-                type="button"
-                onClick={() => setVariableEntries([...variableEntries, { key: "", value: "" }])}
-                className="text-xs text-slate-400 hover:text-slate-600 transition-colors self-start"
-              >
-                + Add variable
-              </button>
-            </div>
-            <p className="text-[10px] text-slate-400 mt-1">
-              {"Use {{key}} in identity or skill conditions."}
-            </p>
-          </div>
-
-          {/* Skills */}
-          <div>
-            <label className={labelClass}>Skills</label>
-            <div className="flex flex-col gap-2">
-              {skills.map((s, i) => (
-                <div key={i} className="bg-slate-50 rounded-lg px-3 py-2.5 relative group/skill">
-                  <button
-                    type="button"
-                    className="absolute top-2 right-2 opacity-0 group-hover/skill:opacity-100 text-slate-400 hover:text-red-500 transition-all"
-                    onClick={() => setSkills(skills.filter((_, j) => j !== i))}
-                  >
-                    <X size={12} />
-                  </button>
-                  <div className="flex flex-col gap-1.5">
-                    <div>
-                      <label className="text-[9px] text-slate-400 uppercase tracking-wide">File path</label>
-                      <input
-                        type="text"
-                        value={s.file}
-                        onChange={(e) => {
-                          const next = [...skills];
-                          next[i] = { ...next[i], file: e.target.value };
-                          setSkills(next);
-                        }}
-                        placeholder="/path/to/skill.md"
-                        className={`${inputClass} font-mono !text-xs !py-1.5`}
-                      />
-                    </div>
-                    <div>
-                      <label className="text-[9px] text-slate-400 uppercase tracking-wide">Condition</label>
-                      <input
-                        type="text"
-                        value={s.condition}
-                        onChange={(e) => {
-                          const next = [...skills];
-                          next[i] = { ...next[i], condition: e.target.value };
-                          setSkills(next);
-                        }}
-                        placeholder="e.g. when editing React files"
-                        className={`${inputClass} !text-xs !py-1.5`}
-                      />
-                    </div>
-                  </div>
-                </div>
-              ))}
-              <button
-                type="button"
-                className="inline-flex items-center gap-1 text-xs text-slate-500 hover:text-slate-700 transition-colors self-start px-1 py-0.5"
-                onClick={() => setSkills([...skills, { file: "", condition: "" }])}
-              >
-                <Plus size={12} />
-                Add skill
-              </button>
-            </div>
-          </div>
-
-          {/* Teams (multi-team) */}
-          <div>
-            <label className={labelClass}>Teams</label>
-            {agentTeams.length > 0 ? (
-              <div className="flex flex-col gap-1">
-                {agentTeams.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, agent.id)}
-                        title="Remove from team"
-                      >
-                        <X size={12} />
-                      </button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <p className="text-xs text-slate-400 italic">Not in any team</p>
-            )}
-            {availableTeams.length > 0 && onAddToTeam && (
-              <div className="mt-2 flex flex-wrap gap-1">
-                {availableTeams.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, agent.id)}
-                  >
-                    <Plus size={10} />
-                    {t.name}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Footer */}
-        {onSave && (
-          <div className="px-5 py-3 border-t border-slate-100 flex justify-end">
-            <button
-              type="button"
-              disabled={saving || !name.trim() || !model.trim()}
-              className="px-3 py-1.5 text-xs font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex items-center gap-1"
-              onClick={() => void handleSave()}
-            >
-              <Check size={12} />
-              Save
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/db/sqlite/001_agx_board_schema.sql

@@ -315,11 +315,13 @@ CREATE TABLE IF NOT EXISTS execution_graphs (
     mode TEXT NOT NULL,
     policy JSON NOT NULL DEFAULT '{}',
     done_criteria JSON NOT NULL DEFAULT '{}',
+    schedule JSON,
     execution_state TEXT NOT NULL DEFAULT 'ready',
     created_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ','now')),
     updated_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ','now')),
     CHECK (mode IN ('SIMPLE', 'PROJECT')),
-    CHECK (execution_state IN ('ready', 'running', 'paused', 'stopped', 'done'))
+    CHECK (execution_state IN ('ready', 'running', 'paused', 'stopped', 'done')),
+    CHECK (schedule IS NULL OR json_valid(schedule))
 );
 
 CREATE TABLE IF NOT EXISTS graph_nodes (
@@ -331,7 +333,7 @@ CREATE TABLE IF NOT EXISTS graph_nodes (
     output JSON,
     metrics JSON,
     PRIMARY KEY (graph_id, node_id),
-    CHECK (type IN ('work', 'gate', 'fork', 'join', 'conditional', 'root')),
+    CHECK (type IN ('work', 'gate', 'fork', 'join', 'conditional', 'root', 'function')),
     CHECK (status IN ('pending', 'running', 'awaiting_human', 'done', 'passed', 'failed', 'blocked', 'skipped', 'stopped'))
 );
 

package/cloud-runtime/standalone/Projects/Agents/agx-cloud/hooks/useAutomations.ts

@@ -0,0 +1,87 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { GraphSchedule } from '@/src/graph/types';
+
+export interface AutomationItem {
+  taskId: string;
+  graphId: string;
+  schedule: GraphSchedule;
+  executionState: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function useAutomations() {
+  const [automations, setAutomations] = useState<AutomationItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchAutomations = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await fetch('/api/automations');
+      if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+      const data = await res.json();
+      setAutomations(data.automations ?? []);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAutomations();
+    const interval = setInterval(fetchAutomations, 10_000);
+    return () => clearInterval(interval);
+  }, [fetchAutomations]);
+
+  const pauseSchedule = useCallback(async (taskId: string) => {
+    const res = await fetch(`/api/tasks/${taskId}/graph/schedule`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'pause' }),
+    });
+    if (res.ok) await fetchAutomations();
+    return res.ok;
+  }, [fetchAutomations]);
+
+  const resumeSchedule = useCallback(async (taskId: string) => {
+    const res = await fetch(`/api/tasks/${taskId}/graph/schedule`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'resume' }),
+    });
+    if (res.ok) await fetchAutomations();
+    return res.ok;
+  }, [fetchAutomations]);
+
+  const deleteSchedule = useCallback(async (taskId: string) => {
+    const res = await fetch(`/api/tasks/${taskId}/graph/schedule`, {
+      method: 'DELETE',
+    });
+    if (res.ok) await fetchAutomations();
+    return res.ok;
+  }, [fetchAutomations]);
+
+  const runNow = useCallback(async (taskId: string) => {
+    const res = await fetch('/api/schedules/poll', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ taskId }),
+    });
+    if (res.ok) await fetchAutomations();
+    return res.ok;
+  }, [fetchAutomations]);
+
+  return {
+    automations,
+    loading,
+    error,
+    refresh: fetchAutomations,
+    pauseSchedule,
+    resumeSchedule,
+    deleteSchedule,
+    runNow,
+  };
+}