@mndrk/agx 2.0.42 → 2.0.45

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import dynamic from "next/dynamic";
 import {
   Play,
@@ -21,10 +21,25 @@ import {
   ArrowLeft,
   Copy,
   ExternalLink,
+  User,
+  Sparkles,
 } from "lucide-react";
 import { usePromptJobs } from "@/hooks/usePromptJobs";
+import { useGroupChat } from "@/hooks/useGroupChat";
+import { useProcessPolling } from "@/hooks/useProcessPolling";
+import { Markdown } from "@/components/chat-ui/Markdown";
+import { stripMarkers } from "@/lib/chat-utils";
+import {
+  orderParticipantIds,
+  type ComposerRoutingMetadata,
+} from "@/lib/chat/composer-routing";
+import type { GroupMessage } from "@/lib/types";
 import type { PromptJob, PromptRun } from "@/src/prompt-scheduler/types";
 
+const Composer = dynamic(() => import("@/components/chat-ui/Composer").then((m) => m.Composer), {
+  ssr: false,
+});
+
 const RichTextEditor = dynamic(() => import("@/components/RichTextEditor"), {
   ssr: false,
 });
@@ -754,6 +769,342 @@ function CreateJobModal({
   );
 }
 
+// ── Run Chat Panel ──────────────────────────────────────────────────────────
+
+function RunChatPanel({
+  run,
+  job,
+  agentMap,
+}: {
+  run: PromptRun;
+  job: PromptJob;
+  agentMap: Record<string, AgentOption>;
+}) {
+  const threadId = `prompt-run:${run.id}`;
+  const agentName =
+    job.agentId && agentMap[job.agentId] ? agentMap[job.agentId].name : null;
+  const agent = job.agentId ? agentMap[job.agentId] : null;
+
+  // Fetch project-scoped agent IDs
+  const [projectAgentIds, setProjectAgentIds] = useState<Set<string>>(new Set());
+  useEffect(() => {
+    if (!job.projectId) return;
+    fetch(`/api/projects/${encodeURIComponent(job.projectId)}/agents`)
+      .then((r) => r.json())
+      .then((d) => {
+        const ids = new Set<string>(
+          (d.agents ?? []).map((a: { agent_id: string }) => a.agent_id),
+        );
+        setProjectAgentIds(ids);
+      })
+      .catch(() => {});
+  }, [job.projectId]);
+
+  // Build Participant[] from only the project's agents
+  const participants = useMemo(
+    () =>
+      Object.values(agentMap)
+        .filter((a) => projectAgentIds.has(a.id))
+        .map((a) => ({
+          id: a.id,
+          name: a.name,
+          title: a.title ?? undefined,
+          provider: (a.provider ?? "claude") as import("@/lib/types").ChatProvider,
+          model: a.model,
+          color: a.color,
+        })),
+    [agentMap, projectAgentIds],
+  );
+
+  // Stable root message ID so all messages form a single thread with full history
+  const rootMessageId = useMemo(() => `run-root:${run.id}`, [run.id]);
+
+  const {
+    messages,
+    setMessages,
+    sendMessage,
+    loadHistory,
+    chatRuns,
+    stop,
+  } = useGroupChat(threadId);
+
+  const { processes, streaming, chatRuns: polledChatRuns } = useProcessPolling(
+    { workspaceId: threadId, threadId: rootMessageId },
+    { messages, setMessages },
+  );
+
+  const activeChatRuns = useMemo(() => {
+    const merged = [...chatRuns];
+    for (const pr of polledChatRuns) {
+      if (!merged.some((r) => r.chatRunId === pr.chatRunId)) merged.push(pr);
+    }
+    return merged;
+  }, [chatRuns, polledChatRuns]);
+
+  const isWorking =
+    activeChatRuns.some((r) => r.status === "queued" || r.status === "running") ||
+    processes.some((p) => p.state === "spawning" || p.state === "running");
+
+  const activityStatus: "ready" | "queued" | "working" = isWorking
+    ? activeChatRuns.some((r) => r.status === "queued")
+      ? "queued"
+      : "working"
+    : "ready";
+
+  // Load chat history and seed root message for the thread
+  const seededRef = useRef(false);
+  useEffect(() => {
+    loadHistory().then(() => {
+      // Seed an invisible root message so the thread exists for history context
+      if (!seededRef.current) {
+        seededRef.current = true;
+        const rootContent = run.output
+          ? `[Automation run output]\n\n${run.output}${run.error ? `\n\n[Error]\n${run.error}` : ""}`
+          : "[Automation run — no output]";
+        const rootMsg: GroupMessage = {
+          id: rootMessageId,
+          role: "assistant",
+          participantId: job.agentId || null,
+          content: rootContent,
+          timestamp: new Date(run.startedAt ?? run.createdAt).getTime(),
+          rootMessageId: null,
+          parentMessageId: null,
+          depth: 0,
+        };
+        // Save the root message so the /api/chat backend can find thread history
+        fetch("/api/history", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ threadId, messages: [rootMsg] }),
+        }).catch(() => {});
+      }
+    });
+  }, [loadHistory, threadId, rootMessageId, run, job.agentId]);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const prevMsgCountRef = useRef(messages.length);
+
+  // Auto-scroll when new messages arrive
+  useEffect(() => {
+    if (messages.length > prevMsgCountRef.current) {
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+    prevMsgCountRef.current = messages.length;
+  }, [messages.length]);
+
+  const handleSend = useCallback(
+    (
+      message: string,
+      maxRounds: number,
+      attachmentIds?: string[],
+      _attachments?: unknown[],
+      pinnedParticipantId?: string,
+      promptPrefix?: string,
+      routing?: ComposerRoutingMetadata,
+    ) => {
+      // Run output is in the seeded root message — the backend includes it in
+      // thread history automatically. Just forward any composer-provided prefix.
+      const prefix = promptPrefix;
+      const agentIds = orderParticipantIds(
+        Array.from(projectAgentIds),
+        pinnedParticipantId
+      );
+      sendMessage(
+        message,
+        maxRounds,
+        undefined, // threadIdOverride
+        rootMessageId,
+        attachmentIds,
+        undefined, // attachmentMetas
+        agentIds.length > 0 ? agentIds : undefined,
+        undefined, // projectSlug
+        prefix,
+        routing,
+      );
+    },
+    [sendMessage, projectAgentIds, rootMessageId],
+  );
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-[var(--card-border)] px-4 py-2">
+        <div className="min-w-0">
+          <div className="text-[12px] font-semibold text-[var(--foreground)] truncate">
+            Run {run.id.slice(0, 8)}
+          </div>
+          <div className="text-[10px] text-[var(--muted-foreground)]">
+            {run.status}{" "}
+            {run.durationMs != null &&
+              `· ${(run.durationMs / 1000).toFixed(1)}s`}
+          </div>
+        </div>
+      </div>
+
+      {/* Messages area */}
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
+        <div className="space-y-4 max-w-none">
+          {/* Original run output bubble */}
+          {run.output && (
+            <div className="flex gap-2.5">
+              <div className="shrink-0 mt-0.5">
+                {agent ? (
+                  <img
+                    src={agentAvatar(job.agentId!, agent.color, 28)}
+                    alt=""
+                    className="size-7 rounded-full"
+                  />
+                ) : (
+                  <div className="flex size-7 items-center justify-center rounded-full bg-[var(--muted)] text-[10px] text-[var(--muted-foreground)]">
+                    <Terminal size={12} />
+                  </div>
+                )}
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="mb-1 flex items-center gap-2">
+                  <span className="text-[11px] font-semibold text-[var(--foreground)]">
+                    {agentName ?? job.provider}
+                  </span>
+                  <span className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--muted)] text-[var(--muted-foreground)] font-medium uppercase tracking-wider">
+                    Run output
+                  </span>
+                </div>
+                <div className="rounded-lg px-3 py-2 text-[12px] leading-[1.55] bg-[var(--muted)] text-[var(--foreground)]">
+                  <Markdown content={run.output} />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Error bubble */}
+          {run.error && (
+            <div className="flex gap-2.5">
+              <div className="shrink-0 mt-0.5">
+                <div className="flex size-7 items-center justify-center rounded-full bg-red-500/10 text-[10px] text-red-400">
+                  !
+                </div>
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="rounded-lg px-3 py-2 text-[12px] leading-[1.55] bg-red-500/10 text-red-400">
+                  <div className="whitespace-pre-wrap break-words">
+                    {run.error}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* No output placeholder */}
+          {!run.output && !run.error && (
+            <div className="text-center py-12 text-[var(--muted-foreground)] text-sm">
+              {run.status === "queued"
+                ? "Waiting to start..."
+                : run.status === "running"
+                  ? "Running..."
+                  : "No output captured"}
+            </div>
+          )}
+
+          {/* Follow-up chat messages (exclude the seeded root message) */}
+          {messages.filter((m) => m.id !== rootMessageId).map((msg) => {
+            const isUser = msg.role === "user";
+            const msgAgent = msg.participantId ? agentMap[msg.participantId] : null;
+            const msgAgentName = msgAgent?.name ?? agentName ?? job.provider;
+            return (
+              <div key={msg.id} className="flex gap-2.5">
+                <div className="shrink-0 mt-0.5">
+                  {isUser ? (
+                    <div className="flex size-7 items-center justify-center rounded-full bg-[var(--muted)] text-[var(--muted-foreground)]">
+                      <User size={12} />
+                    </div>
+                  ) : msgAgent ? (
+                    <img
+                      src={agentAvatar(msgAgent.id, msgAgent.color, 28)}
+                      alt=""
+                      className="size-7 rounded-full"
+                    />
+                  ) : agent ? (
+                    <img
+                      src={agentAvatar(job.agentId!, agent.color, 28)}
+                      alt=""
+                      className="size-7 rounded-full"
+                    />
+                  ) : (
+                    <div className="flex size-7 items-center justify-center rounded-full bg-[var(--muted)] text-[10px] text-[var(--muted-foreground)]">
+                      <Terminal size={12} />
+                    </div>
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="mb-1">
+                    <span className="text-[11px] font-semibold text-[var(--foreground)]">
+                      {isUser ? "You" : msgAgentName}
+                    </span>
+                  </div>
+                  <div className={`rounded-lg px-3 py-2 text-[12px] leading-[1.55] ${isUser ? "bg-blue-500/10 text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--foreground)]"}`}>
+                    <Markdown content={stripMarkers(msg.content)} isUser={isUser} />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Streaming / typing indicator */}
+          {Object.entries(streaming).filter(([, entry]) => entry.rootMessageId === rootMessageId).map(([pid]) => {
+            const streamAgent = agentMap[pid] ?? agent;
+            return (
+              <div key={`streaming-${pid}`} className="flex gap-2.5 animate-in fade-in duration-300">
+                <div className="shrink-0 mt-0.5">
+                  {streamAgent ? (
+                    <img
+                      src={agentAvatar(streamAgent.id, streamAgent.color, 28)}
+                      alt=""
+                      className="size-7 rounded-full"
+                    />
+                  ) : (
+                    <div className="flex size-7 items-center justify-center rounded-full bg-[var(--muted)] text-[10px] text-[var(--muted-foreground)]">
+                      <Sparkles size={12} />
+                    </div>
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 py-1">
+                    <span className="text-[11px] text-[var(--muted-foreground)]">
+                      {streamAgent?.name ?? "Thinking"}
+                    </span>
+                    <span className="inline-flex items-center gap-[3px]">
+                      <span className="w-1 h-1 rounded-full bg-[var(--muted-foreground)]/50 animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
+                      <span className="w-1 h-1 rounded-full bg-[var(--muted-foreground)]/50 animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
+                      <span className="w-1 h-1 rounded-full bg-[var(--muted-foreground)]/50 animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+
+          <div ref={bottomRef} />
+        </div>
+      </div>
+
+      {/* Composer — floating at bottom */}
+      <div className="px-3 py-2">
+        <Composer
+          onSend={handleSend}
+          onStop={stop}
+          loading={isWorking}
+          activityStatus={activityStatus}
+          participants={participants}
+          commands={[]}
+          placeholder="Follow up on this run..."
+          initialPinnedParticipantId={job.agentId || undefined}
+        />
+      </div>
+    </div>
+  );
+}
+
 // ── Detail View (3-panel) ────────────────────────────────────────────────────
 
 function JobDetailView({
@@ -1012,92 +1363,21 @@ function JobDetailView({
           </div>
         </div>
 
-        {/* RIGHT: Selected run output */}
-        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-          {selectedRun ? (
-            <>
-              <div className="flex items-center justify-between border-b border-[var(--card-border)] px-4 py-2">
-                <div className="min-w-0">
-                  <div className="text-[12px] font-semibold text-[var(--foreground)] truncate">
-                    Run {selectedRun.id.slice(0, 8)}
-                  </div>
-                  <div className="text-[10px] text-[var(--muted-foreground)]">
-                    {selectedRun.status}{" "}
-                    {selectedRun.durationMs != null &&
-                      `· ${(selectedRun.durationMs / 1000).toFixed(1)}s`}
-                  </div>
-                </div>
-              </div>
-              <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
-                {selectedRun.output ? (
-                  <div className="space-y-3">
-                    <div className="flex gap-2.5">
-                      <div className="shrink-0 mt-0.5">
-                        {job.agentId && agentMap[job.agentId] ? (
-                          <img
-                            src={agentAvatar(
-                              job.agentId,
-                              agentMap[job.agentId].color,
-                              28,
-                            )}
-                            alt=""
-                            className="size-7 rounded-full"
-                          />
-                        ) : (
-                          <div className="flex size-7 items-center justify-center rounded-full bg-[var(--muted)] text-[10px] text-[var(--muted-foreground)]">
-                            <Terminal size={12} />
-                          </div>
-                        )}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <div className="mb-1">
-                          <span className="text-[11px] font-semibold text-[var(--foreground)]">
-                            {agentName ?? job.provider}
-                          </span>
-                        </div>
-                        <div className="rounded-lg px-3 py-2 text-[12px] leading-[1.55] bg-[var(--muted)] text-[var(--foreground)]">
-                          <div className="whitespace-pre-wrap break-words">
-                            {selectedRun.output}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    {selectedRun.error && (
-                      <div className="flex gap-2.5">
-                        <div className="shrink-0 mt-0.5">
-                          <div className="flex size-7 items-center justify-center rounded-full bg-red-500/10 text-[10px] text-red-400">
-                            !
-                          </div>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <div className="rounded-lg px-3 py-2 text-[12px] leading-[1.55] bg-red-500/10 text-red-400">
-                            <div className="whitespace-pre-wrap break-words">
-                              {selectedRun.error}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <div className="text-center py-12 text-[var(--muted-foreground)] text-sm">
-                    {selectedRun.status === "queued"
-                      ? "Waiting to start..."
-                      : selectedRun.status === "running"
-                        ? "Running..."
-                        : "No output captured"}
-                  </div>
-                )}
-              </div>
-            </>
-          ) : (
-            <div className="flex-1 flex items-center justify-center text-[var(--muted-foreground)] text-sm">
-              {runs.length === 0
-                ? 'No runs yet. Click "Run now" to trigger one.'
-                : "Select a run to view its output"}
-            </div>
-          )}
-        </div>
+        {/* RIGHT: Selected run output + chat */}
+        {selectedRun ? (
+          <RunChatPanel
+            key={selectedRun.id}
+            run={selectedRun}
+            job={job}
+            agentMap={agentMap}
+          />
+        ) : (
+          <div className="flex min-w-0 flex-1 items-center justify-center text-[var(--muted-foreground)] text-sm">
+            {runs.length === 0
+              ? 'No runs yet. Click "Run now" to trigger one.'
+              : "Select a run to view its output"}
+          </div>
+        )}
       </div>
     </div>
   );

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

@@ -25,6 +25,10 @@ import {
 } from "@/services/userPreferences";
 import type { SlashCommand } from "@/hooks/useCommandAutocomplete";
 import type { Participant, GroupMessage, MessageSearchResponse, MessageSearchResult } from "@/lib/types";
+import {
+  orderParticipantIds,
+  type ComposerRoutingMetadata,
+} from "@/lib/chat/composer-routing";
 import type { ThreadStatus } from "@/lib/storage/thread-adapter";
 import type { TaskDraftMessage } from "@/types/tasks";
 import { buildTasks } from "@/services/agxService";
@@ -954,13 +958,20 @@ export function ChatContainer({
   }, [activeThreadId, messages, updateThreadMessages]);
 
   const handleThreadReply = useCallback(
-    (rootMessageId: string, content: string, maxRounds: number = 10, pinnedParticipantId?: string, promptPrefix?: string) => {
+    (
+      rootMessageId: string,
+      content: string,
+      maxRounds: number = 10,
+      pinnedParticipantId?: string,
+      promptPrefix?: string,
+      routing?: ComposerRoutingMetadata
+    ) => {
       if (!activeThreadId) return;
       if (activeParticipants.length === 0) return;
-      const selectedActiveIds = activeParticipants.map((participant) => participant.id);
-      const orderedActiveIds = pinnedParticipantId && selectedActiveIds.includes(pinnedParticipantId)
-        ? [pinnedParticipantId, ...selectedActiveIds.filter((participantId) => participantId !== pinnedParticipantId)]
-        : selectedActiveIds;
+      const orderedActiveIds = orderParticipantIds(
+        activeParticipants.map((participant) => participant.id),
+        pinnedParticipantId
+      );
       void sendMessage(
         content,
         maxRounds,
@@ -970,7 +981,8 @@ export function ChatContainer({
         undefined,
         orderedActiveIds,
         effectiveProjectSlug,
-        promptPrefix
+        promptPrefix,
+        routing
       );
     },
     [activeThreadId, sendMessage, activeParticipants, effectiveProjectSlug]
@@ -1180,7 +1192,8 @@ export function ChatContainer({
       attachmentIds?: string[],
       attachmentMetas?: import("@/lib/types").Attachment[],
       pinnedParticipantId?: string,
-      promptPrefix?: string
+      promptPrefix?: string,
+      routing?: ComposerRoutingMetadata
     ) => {
       const searchMatch = prompt.match(/^\/search(?:\s+([\s\S]+))?$/i);
       if (searchMatch) {
@@ -1219,9 +1232,7 @@ export function ChatContainer({
         window.alert("Enable at least one agent in this project.");
         return;
       }
-      const orderedActiveIds = pinnedParticipantId && selectedActiveIds.includes(pinnedParticipantId)
-        ? [pinnedParticipantId, ...selectedActiveIds.filter((participantId) => participantId !== pinnedParticipantId)]
-        : selectedActiveIds;
+      const orderedActiveIds = orderParticipantIds(selectedActiveIds, pinnedParticipantId);
 
       if (openThreadId) {
         await sendMessage(
@@ -1233,7 +1244,8 @@ export function ChatContainer({
           attachmentMetas,
           orderedActiveIds,
           effectiveProjectSlug,
-          promptPrefix
+          promptPrefix,
+          routing
         );
         return;
       }
@@ -1249,7 +1261,8 @@ export function ChatContainer({
         attachmentMetas,
         orderedActiveIds,
         effectiveProjectSlug,
-        promptPrefix
+        promptPrefix,
+        routing
       );
 
       // If ship mode was staged on the main composer, activate it for the new thread
@@ -1521,8 +1534,8 @@ export function ChatContainer({
 
       return (
         <Composer
-          onSend={(message, maxRounds, _attachmentIds, _attachments, pinnedParticipantId, promptPrefix) =>
-            handleThreadReply(rootMessageId, message, maxRounds, pinnedParticipantId, promptPrefix)
+          onSend={(message, maxRounds, _attachmentIds, _attachments, pinnedParticipantId, promptPrefix, routing) =>
+            handleThreadReply(rootMessageId, message, maxRounds, pinnedParticipantId, promptPrefix, routing)
           }
           onStop={() => handleStopThread(rootMessageId)}
           loading={threadActivityStatus !== "ready"}
@@ -1530,6 +1543,7 @@ export function ChatContainer({
           participants={activeParticipants}
           projectGroups={threadProjects}
           projects={projectMentions}
+          projectSlug={effectiveProjectSlug}
           messages={messages}
           commands={slashCommands}
           placeholder="Reply — @name to mention, /search, /summarize"
@@ -1541,7 +1555,7 @@ export function ChatContainer({
         />
       );
     },
-    [handleThreadReply, handleStopThread, streaming, activeParticipants, threadProjects, projectMentions, slashCommands, messages, autoMode, handleAutoModeChange, activeProcesses, activeChatRuns, activeProjectRepos, selectedRepoIds, handleRepoSelectionChange]
+    [handleThreadReply, handleStopThread, streaming, activeParticipants, threadProjects, projectMentions, effectiveProjectSlug, slashCommands, messages, autoMode, handleAutoModeChange, activeProcesses, activeChatRuns, activeProjectRepos, selectedRepoIds, handleRepoSelectionChange]
   );
 
   const toggleWorkspaceSidebar = useCallback(() => {
@@ -1937,6 +1951,7 @@ export function ChatContainer({
                     participants={activeParticipants}
                     projects={projectMentions}
                     projectGroups={threadProjects}
+                    projectSlug={effectiveProjectSlug}
                     messages={messages}
                     commands={slashCommands}
                     pendingThreadInsert={pendingThreadInsert}