@mndrk/agx 2.4.4 → 2.4.6

package/cloud-runtime/standalone/apps/local/components/PromptJobBoard.tsx

@@ -16,6 +16,7 @@ import {
   Pencil,
   User,
   Sparkles,
+  Search,
 } from "lucide-react";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
 import { usePromptJobs } from "@/hooks/usePromptJobs";
@@ -113,6 +114,10 @@ function promptTarget(prompt: string): string {
   return firstLine.replace(/^execute\s+/i, "");
 }
 
+export function hasActivePromptRun(runs: PromptRun[]): boolean {
+  return runs.some((run) => run.status === "queued" || run.status === "running");
+}
+
 function stateDotClass(state: PromptJob["state"]): string {
   if (state === "active") return "bg-emerald-400";
   if (state === "paused") return "bg-amber-400";
@@ -129,7 +134,7 @@ function SectionLabel({ children }: { children: React.ReactNode }) {
 
 // ── Create/Edit Modal ────────────────────────────────────────────────────────
 
-interface AgentOption {
+export interface AgentOption {
   id: string;
   name: string;
   provider: string;
@@ -159,12 +164,12 @@ function Label({ children }: { children: React.ReactNode }) {
   );
 }
 
-function agentAvatar(id: string, color: string, size = 24) {
+export function agentAvatar(id: string, color: string, size = 24) {
   const bg = color ? color.replace("#", "") : "e2e8f0";
   return `https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${encodeURIComponent(id)}&size=${size}&backgroundColor=${bg}`;
 }
 
-function AgentDropdown({
+export function AgentDropdown({
   agents,
   value,
   onChange,
@@ -174,8 +179,23 @@ function AgentDropdown({
   onChange: (id: string) => void;
 }) {
   const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
   const selected = agents.find((a) => a.id === value);
 
+  useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+
+  const q = query.trim().toLowerCase();
+  const filteredAgents = q
+    ? agents.filter(
+        (a) =>
+          a.name.toLowerCase().includes(q) ||
+          a.provider.toLowerCase().includes(q) ||
+          (a.model ?? "").toLowerCase().includes(q)
+      )
+    : agents;
+
   return (
     <div className="relative">
       <Label>Agent</Label>
@@ -213,38 +233,62 @@ function AgentDropdown({
       </button>
 
       {open && (
-        <div className="absolute z-20 mt-1 w-full rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] shadow-lg max-h-[280px] overflow-y-auto">
-          {agents.map((a) => (
-            <button
-              key={a.id}
-              type="button"
-              onClick={() => {
-                onChange(a.id);
-                setOpen(false);
-              }}
-              className={`w-full flex items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-[var(--muted)] ${value === a.id ? "bg-[var(--muted)]" : ""}`}
-            >
-              <img
-                src={agentAvatar(a.id, a.color)}
-                alt=""
-                className="size-6 rounded-full shrink-0"
+        <div className="absolute z-20 mt-1 w-full rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] shadow-lg flex flex-col max-h-[320px]">
+          <div className="sticky top-0 shrink-0 border-b border-[var(--card-border)] bg-[var(--card-bg)] px-2 py-2">
+            <div className="relative">
+              <Search
+                size={12}
+                className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
               />
-              <div className="min-w-0 flex-1">
-                <div className="text-xs font-medium text-[var(--foreground)] truncate">
-                  {a.name}
-                </div>
-                <div className="text-[10px] text-[var(--muted-foreground)]">
-                  {a.provider}
-                  {a.model ? ` / ${a.model}` : ""}
-                </div>
+              <input
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                autoFocus
+                placeholder="Search agents..."
+                className="w-full rounded-md border border-[var(--card-border)] bg-[var(--muted)] pl-7 pr-2 py-1.5 text-xs text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:border-[var(--foreground)]"
+              />
+            </div>
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {filteredAgents.length === 0 ? (
+              <div className="px-3 py-4 text-center text-[11px] text-[var(--muted-foreground)]">
+                No agents match "{query}"
               </div>
-              {value === a.id && (
-                <span className="text-xs text-[var(--foreground)]">
-                  &#10003;
-                </span>
-              )}
-            </button>
-          ))}
+            ) : (
+              filteredAgents.map((a) => (
+                <button
+                  key={a.id}
+                  type="button"
+                  onClick={() => {
+                    onChange(a.id);
+                    setOpen(false);
+                  }}
+                  className={`w-full flex items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-[var(--muted)] ${value === a.id ? "bg-[var(--muted)]" : ""}`}
+                >
+                  <img
+                    src={agentAvatar(a.id, a.color)}
+                    alt=""
+                    className="size-6 rounded-full shrink-0"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="text-xs font-medium text-[var(--foreground)] truncate">
+                      {a.name}
+                    </div>
+                    <div className="text-[10px] text-[var(--muted-foreground)]">
+                      {a.provider}
+                      {a.model ? ` / ${a.model}` : ""}
+                    </div>
+                  </div>
+                  {value === a.id && (
+                    <span className="text-xs text-[var(--foreground)]">
+                      &#10003;
+                    </span>
+                  )}
+                </button>
+              ))
+            )}
+          </div>
         </div>
       )}
     </div>
@@ -1000,7 +1044,7 @@ function JobDetailView({
   }, [replaceSelection, runs, runsLoaded, selectedRunId]);
 
   const selectedRun = runs.find((r) => r.id === selectedRunId) ?? null;
-  const isRunning = job.lastOutcome === "running";
+  const hasActiveRun = hasActivePromptRun(runs);
   const scheduleLabel =
     (job.cronExpr && cronToHuman(job.cronExpr)) || job.cadence || job.cronExpr;
   const targetLabel = promptTarget(job.prompt);
@@ -1040,7 +1084,7 @@ function JobDetailView({
                 </button>
                 <button
                   onClick={onRunNow}
-                  disabled={isRunning}
+                  disabled={hasActiveRun}
                   title="Run now"
                   className="rounded-md border border-[var(--card-border)] p-1.5 text-[var(--muted-foreground)] transition-colors hover:border-[var(--foreground)] hover:text-[var(--foreground)] disabled:opacity-50"
                 >
@@ -1055,8 +1099,9 @@ function JobDetailView({
                 </button>
                 <button
                   onClick={onDelete}
-                  title="Delete"
-                  className="p-1.5 rounded-md border border-[var(--card-border)] text-[var(--muted-foreground)] hover:text-red-400 hover:border-red-400/30 transition-colors"
+                  disabled={hasActiveRun}
+                  title={hasActiveRun ? "Cancel the live run before deleting this task" : "Delete"}
+                  className="p-1.5 rounded-md border border-[var(--card-border)] text-[var(--muted-foreground)] transition-colors hover:text-red-400 hover:border-red-400/30 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-[var(--card-border)] disabled:hover:text-[var(--muted-foreground)]"
                 >
                   <Trash2 size={12} />
                 </button>
@@ -1186,7 +1231,7 @@ function JobDetailView({
 
               <div className="border-t border-[var(--card-border)] px-6 py-4">
                 <div className="flex flex-wrap items-center gap-2">
-                  {isRunning ? (
+                  {hasActiveRun ? (
                     <button
                       onClick={onCancelRun}
                       className="inline-flex items-center gap-1.5 rounded-md border border-red-400/30 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.05em] text-red-400 transition-colors hover:bg-red-500/10"
@@ -1194,6 +1239,11 @@ function JobDetailView({
                       Cancel run
                     </button>
                   ) : null}
+                  {hasActiveRun ? (
+                    <span className="text-[11px] text-amber-300">
+                      Delete is blocked while a run is queued or running. Cancel the live run first.
+                    </span>
+                  ) : null}
                   {job.condition ? (
                     <span className="rounded-md border border-blue-400/20 bg-blue-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-blue-400">
                       gated
@@ -1356,13 +1406,16 @@ export default function PromptJobBoard({
   };
 
   const handleDelete = async (id: string) => {
-    const ok = await deleteJob(id);
-    if (ok) {
+    const result = await deleteJob(id);
+    if (result.ok) {
       if (selectedId === id) {
         pushSelection({ job: null, run: null });
       }
       showToast("Job deleted");
+      return;
     }
+
+    showToast(result.error ?? "Failed to delete scheduled task");
   };
 
   const handleCancelRun = async (id: string) => {
@@ -1676,7 +1729,7 @@ export default function PromptJobBoard({
       <ConfirmDialog
         isOpen={Boolean(deleteTarget)}
         title="Delete scheduled task?"
-        message="This permanently removes the task and all its run history. This cannot be undone."
+        message="This permanently removes the task and all of its run history. Delete is only allowed when no run is queued or running."
         preview={deleteTarget?.name}
         confirmLabel="Delete"
         variant="danger"

package/cloud-runtime/standalone/apps/local/components/TaskCard.tsx

@@ -14,6 +14,7 @@ export interface Task {
   content: string;
   description?: string;
   title?: string;
+  identifier?: string | null;
   status?: TaskStatus;
   stage?: TaskStage;
   depends_on?: string[];
@@ -166,6 +167,11 @@ export default function TaskCard({
         <h3 className={`text-sm font-medium text-[var(--foreground)] leading-snug line-clamp-2 sm:line-clamp-3
           ${task.status === 'completed' ? 'text-[var(--muted-foreground)] line-through' : ''}
         `}>
+          {task.identifier ? (
+            <span className="mr-1.5 inline-block rounded bg-[var(--secondary)] px-1.5 py-0.5 align-middle font-mono text-[10px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">
+              {task.identifier}
+            </span>
+          ) : null}
           {task.title || "Untitled Task"}
         </h3>
 
@@ -211,7 +217,7 @@ export default function TaskCard({
               </span>
             )
           )}
-          {task.id !== 'draft' && (
+          {task.id !== 'draft' && !task.identifier && (
             <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[9px]">
               {task.id.slice(0, 5)}
             </span>