@mndrk/agx 2.4.4 → 2.4.6

package/cloud-runtime/standalone/apps/local/components/chat-ui/LogPanel.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import type { LogEntry } from "@/hooks/useGroupChat";
 import type { Participant } from "@/lib/types";
+import { JumpToLatestButton } from "./JumpToLatestButton";
 
 interface Props {
   logs: LogEntry[];
@@ -16,6 +17,8 @@ export function LogPanel({ logs, participants, onClear, open, onToggle }: Props)
   const [width, setWidth] = useState(420);
   const [filter, setFilter] = useState<string | null>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showJump, setShowJump] = useState(false);
   const dragging = useRef(false);
   const startX = useRef(0);
   const startW = useRef(0);
@@ -25,6 +28,21 @@ export function LogPanel({ logs, participants, onClear, open, onToggle }: Props)
     if (open) bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [logs.length, open]);
 
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const handler = () => {
+      const d = el.scrollHeight - el.scrollTop - el.clientHeight;
+      setShowJump(d > 200);
+    };
+    el.addEventListener("scroll", handler, { passive: true });
+    return () => el.removeEventListener("scroll", handler);
+  }, [open]);
+
+  const jumpToLatest = useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+
   const onPointerDown = useCallback((e: React.PointerEvent) => {
     e.preventDefault();
     dragging.current = true;
@@ -85,7 +103,8 @@ export function LogPanel({ logs, participants, onClear, open, onToggle }: Props)
             </button>
           </div>
         </div>
-        <div className="flex-1 overflow-y-auto font-mono text-[11px] leading-4 px-3 py-2">
+        <div className="relative flex-1 min-h-0 flex flex-col">
+        <div ref={scrollRef} className="flex-1 overflow-y-auto font-mono text-[11px] leading-4 px-3 py-2">
           {filtered.map((entry, i) => {
             const name = pMap[entry.participantId]?.name || entry.participantId;
             const color = pMap[entry.participantId]?.color || "#888";
@@ -104,6 +123,8 @@ export function LogPanel({ logs, participants, onClear, open, onToggle }: Props)
           })}
           <div ref={bottomRef} />
         </div>
+        <JumpToLatestButton visible={showJump && filtered.length > 20} onClick={jumpToLatest} />
+        </div>
       </div>
     </div>
   );

package/cloud-runtime/standalone/apps/local/components/chat-ui/MessageList.tsx

@@ -14,6 +14,7 @@ import { IconButton } from "../IconButton";
 import { MessageSquare, Copy, Hash, Loader2, Trash2, User, Clock, Zap, CheckCircle2, Circle, Link, AtSign, Rocket, ArrowUpDown, ArrowDown, ArrowUp } from "lucide-react";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { stripMarkers } from "@/lib/chat-utils";
+import { JumpToLatestButton } from "./JumpToLatestButton";
 
 
 const THREAD_STATUSES: { value: ThreadStatus; label: string; color: string }[] = [
@@ -103,6 +104,26 @@ export function MessageList({
   const [statusMenuMessageId, setStatusMenuMessageId] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<"active" | "paused" | "in-review" | "done" | "archived">("active");
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [showJumpToLatest, setShowJumpToLatest] = useState(false);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+      setShowJumpToLatest(distanceFromBottom > 200);
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const jumpToLatest = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const target = sortOrder === "asc" ? container.scrollHeight : 0;
+    container.scrollTo({ top: target, behavior: "smooth" });
+  }, [sortOrder]);
   const participantMap = Object.fromEntries(participants.map((p) => [p.id, p]));
 
   // Filter to only main chat messages (not thread replies)
@@ -177,6 +198,7 @@ export function MessageList({
   ];
 
   return (
+    <div className="relative flex-1 min-h-0 flex flex-col">
     <div ref={scrollContainerRef} className="chat-scrollbar flex-1 overflow-y-auto p-4">
       <div className="max-w-3xl mx-auto">
         {allMainMessages.length > 0 && (
@@ -578,5 +600,10 @@ export function MessageList({
 
       </div>
     </div>
+    <JumpToLatestButton
+      visible={showJumpToLatest && allMainMessages.length > 10}
+      onClick={jumpToLatest}
+    />
+    </div>
   );
 }

package/cloud-runtime/standalone/apps/local/components/chat-ui/ThreadView.tsx

@@ -14,6 +14,7 @@ import { agentAvatarUrl } from "./ParticipantBar";
 import { MessageReactionsBar } from "./MessageReactionsBar";
 import { stripMarkers } from "@/lib/chat-utils";
 import { StreamingSegments } from "./StreamingSegments";
+import { JumpToLatestButton } from "./JumpToLatestButton";
 
 interface Props {
     messages: GroupMessage[];
@@ -67,6 +68,7 @@ export function ThreadView({
     const scrollContainerRef = useRef<HTMLDivElement>(null);
     const userScrolledUpRef = useRef(false);
     const prevHighlightRef = useRef<string | null>(null);
+    const [showJumpToLatest, setShowJumpToLatest] = useState(false);
 
     // Track whether user has scrolled up
     useEffect(() => {
@@ -74,12 +76,18 @@ export function ThreadView({
         if (!container) return;
         const handleScroll = () => {
             const { scrollTop, scrollHeight, clientHeight } = container;
-            userScrolledUpRef.current = scrollHeight - scrollTop - clientHeight > 80;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            userScrolledUpRef.current = distanceFromBottom > 80;
+            setShowJumpToLatest(distanceFromBottom > 200);
         };
         container.addEventListener("scroll", handleScroll, { passive: true });
         return () => container.removeEventListener("scroll", handleScroll);
     }, []);
 
+    const jumpToLatest = useCallback(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, []);
+
     useEffect(() => {
         if (highlightedMessageId && highlightedMessageId !== prevHighlightRef.current) {
             prevHighlightRef.current = highlightedMessageId;
@@ -127,6 +135,7 @@ export function ThreadView({
                 </div>
             )}
             {/* Thread Content */}
+            <div className="relative flex-1 min-h-0 flex flex-col">
             <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">
 
@@ -330,6 +339,11 @@ export function ThreadView({
                     <div ref={bottomRef} className="h-4" />
                 </div>
             </div>
+            <JumpToLatestButton
+                visible={showJumpToLatest && threadMessages.length > 10}
+                onClick={jumpToLatest}
+            />
+            </div>
 
             {/* Composer Area */}
             <div className="z-20 transition-colors duration-200">

package/cloud-runtime/standalone/apps/local/components/projects/ObjectiveScheduledTasksPanel.tsx

@@ -1,14 +1,17 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Check, Clock, Pause, Play, Plus, Trash2, X, XCircle } from "lucide-react";
+import { Check, Clock, Pause, Pencil, Play, Plus, Terminal, Trash2, XCircle } from "lucide-react";
 import { usePromptJobs } from "@/hooks/usePromptJobs";
 import { cronToHuman } from "@/src/graph/nl-schedule";
 import type { PromptJob, PromptRun } from "@/src/prompt-scheduler/types";
-import { CreateJobModal, type CreateJobData } from "@/components/PromptJobBoard";
+import {
+  CreateJobModal,
+  agentAvatar,
+  type AgentOption,
+  type CreateJobData,
+} from "@/components/PromptJobBoard";
 import ConfirmDialog from "@/components/ConfirmDialog";
-import RichTextEditor from "@/components/RichTextEditor";
-import { ScheduleConditionPicker } from "@/components/scheduling/ScheduleConditionPicker";
 
 export type ObjectiveScheduledTaskDraft = CreateJobData;
 
@@ -51,14 +54,6 @@ function formatNextRun(epochMs: number | null, state: PromptJob["state"]): strin
   return `in ${Math.round(diff / 86_400_000)}d`;
 }
 
-function promptSummary(prompt: string): string {
-  const firstLine = prompt
-    .split("\n")
-    .map((line) => line.trim())
-    .find(Boolean);
-  return firstLine || "No instructions yet";
-}
-
 function formatDateTime(value: string): string {
   const date = new Date(value);
   return date.toLocaleString(undefined, {
@@ -69,188 +64,6 @@ function formatDateTime(value: string): string {
   });
 }
 
-function ScheduleEditModal({
-  job,
-  onClose,
-  onUpdate,
-}: {
-  job: PromptJob;
-  onClose: () => void;
-  onUpdate: (updates: Partial<PromptJob>) => Promise<boolean>;
-}) {
-  const [scheduleValue, setScheduleValue] = useState({
-    cadence: job.cronExpr || job.cadence || "",
-    condition: job.condition || "",
-  });
-  const [isValid, setIsValid] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  const handleSave = async () => {
-    if (!isValid) return;
-    setSaving(true);
-    await onUpdate({
-      cadence: scheduleValue.cadence,
-      condition: scheduleValue.condition,
-    } as Partial<PromptJob>);
-    setSaving(false);
-    onClose();
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-6">
-      <div className="flex w-full max-w-md max-h-[85vh] flex-col rounded-[28px] border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl">
-        <div className="flex shrink-0 items-center justify-between border-b border-[var(--border)] px-6 py-4">
-          <div className="flex items-center gap-2.5">
-            <Clock className="h-4 w-4 text-[var(--muted-foreground)]" />
-            <p className="text-sm font-semibold text-[var(--foreground)]">{job.name}</p>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-lg border border-[var(--border)] p-2 text-[var(--muted-foreground)] transition-colors hover:border-[var(--card-hover-border)] hover:text-[var(--foreground)]"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
-          <ScheduleConditionPicker
-            value={scheduleValue}
-            onChange={(next, meta) => {
-              setScheduleValue(next);
-              setIsValid(meta.isScheduleValid);
-            }}
-            scheduleLabel="Schedule"
-            conditionLabel="Condition"
-            conditionHelpText="Scheduled runs and Run now will check this condition before executing."
-          />
-        </div>
-
-        <div className="flex shrink-0 items-center justify-end gap-3 border-t border-[var(--border)] px-6 py-4">
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-xl border border-[var(--border)] px-4 py-2.5 text-sm text-[var(--foreground)] transition-colors hover:border-[var(--card-hover-border)]"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={() => void handleSave()}
-            disabled={saving || !isValid}
-            className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-2.5 text-sm text-emerald-400 transition-colors hover:bg-emerald-500/20 disabled:opacity-50"
-          >
-            {saving ? "Saving..." : "Save"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ObjectiveScheduledTaskDetailModal({
-  job,
-  onClose,
-  onUpdate,
-}: {
-  job: PromptJob;
-  onClose: () => void;
-  onUpdate: (updates: Partial<PromptJob>) => Promise<boolean>;
-}) {
-  const [promptDraft, setPromptDraft] = useState(job.prompt || "");
-  const [saving, setSaving] = useState(false);
-
-  const savePrompt = async () => {
-    if (promptDraft === job.prompt) {
-      onClose();
-      return;
-    }
-    setSaving(true);
-    await onUpdate({ prompt: promptDraft } as Partial<PromptJob>);
-    setSaving(false);
-    onClose();
-  };
-
-  return (
-    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/50 px-4 py-6">
-      <div className="flex w-full max-w-6xl max-h-[85vh] flex-col rounded-[28px] border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl">
-        {/* Header */}
-        <div className="flex shrink-0 items-start justify-between gap-4 border-b border-[var(--border)] px-6 py-5">
-          <div className="min-w-0">
-            <div className="flex flex-wrap items-center gap-2.5">
-              <p className="truncate text-lg font-semibold text-[var(--foreground)]">
-                {job.name}
-              </p>
-              <span
-                className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${stateClasses(job.state)}`}
-              >
-                {formatState(job.state)}
-              </span>
-              {job.condition ? (
-                <span className="rounded-md border border-blue-400/20 bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-blue-400">
-                  gated
-                </span>
-              ) : null}
-            </div>
-            <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-[var(--muted-foreground)]">
-              <span className="inline-flex items-center gap-1.5">
-                <Clock className="h-3.5 w-3.5" />
-                {formatCadence(job)}
-              </span>
-              <span>Next run {formatNextRun(job.nextRunAt, job.state)}</span>
-              <span>Updated {formatDateTime(job.updatedAt)}</span>
-            </div>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-lg border border-[var(--border)] p-2 text-[var(--muted-foreground)] transition-colors hover:border-[var(--card-hover-border)] hover:text-[var(--foreground)]"
-            aria-label="Close scheduled task details"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        {/* Scrollable editor area */}
-        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-6 space-y-5">
-          <div>
-            <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
-              Instructions
-            </p>
-            <div className="rounded-2xl border border-[var(--card-hover-border)] bg-[var(--overlay-panel-muted)] px-1 py-1 text-sm leading-6 text-[var(--foreground)]">
-              <RichTextEditor
-                content={promptDraft}
-                editable
-                onChange={setPromptDraft}
-                placeholder="Write instructions in markdown…"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Sticky footer */}
-        <div className="flex shrink-0 items-center justify-end gap-3 border-t border-[var(--border)] px-6 py-4">
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-xl border border-[var(--border)] px-4 py-2.5 text-sm text-[var(--foreground)] transition-colors hover:border-[var(--card-hover-border)]"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={() => void savePrompt()}
-            disabled={saving}
-            className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-2.5 text-sm text-emerald-400 transition-colors hover:bg-emerald-500/20 disabled:opacity-50"
-          >
-            {saving ? "Saving..." : "Save"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function formatState(state: PromptJob["state"]): string {
   if (state === "active") return "Active";
   if (state === "paused") return "Paused";
@@ -282,10 +95,21 @@ export function ObjectiveScheduledTasksPanel({
   const [showCreate, setShowCreate] = useState(false);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const [editingJobId, setEditingJobId] = useState<string | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<PromptJob | null>(null);
-  const [scheduleEditJobId, setScheduleEditJobId] = useState<string | null>(null);
   const [recentRuns, setRecentRuns] = useState<(PromptRun & { jobName: string })[]>([]);
+  const [agentMap, setAgentMap] = useState<Record<string, AgentOption>>({});
+
+  useEffect(() => {
+    fetch("/api/prompt-jobs/agents")
+      .then((r) => r.json())
+      .then((d) => {
+        const map: Record<string, AgentOption> = {};
+        for (const a of (d.agents ?? []) as AgentOption[]) map[a.id] = a;
+        setAgentMap(map);
+      })
+      .catch((err) => console.warn("[ObjectiveScheduledTasksPanel] fetch agents failed:", err));
+  }, []);
 
   const visibleJobs = useMemo(() => {
     const filtered = jobs.filter((job) => job.objectiveId === objectiveId);
@@ -296,9 +120,10 @@ export function ObjectiveScheduledTasksPanel({
       return aPin - bPin;
     });
   }, [jobs, objectiveId]);
-  const selectedJob = useMemo(
-    () => visibleJobs.find((job) => job.id === selectedJobId) ?? null,
-    [selectedJobId, visibleJobs]
+
+  const editingJob = useMemo(
+    () => visibleJobs.find((job) => job.id === editingJobId) ?? null,
+    [editingJobId, visibleJobs]
   );
 
   const loadRecentRuns = useCallback(async () => {
@@ -330,15 +155,12 @@ export function ObjectiveScheduledTasksPanel({
   const handleHide = async (job: PromptJob) => {
     setBusyId(job.id);
     setError(null);
-    const ok = await deleteJob(job.id);
+    const result = await deleteJob(job.id);
     setBusyId(null);
-    if (!ok) {
-      setError(`Failed to hide "${job.name}".`);
+    if (!result.ok) {
+      setError(result.error ?? `Failed to hide "${job.name}".`);
       return;
     }
-    if (selectedJobId === job.id) {
-      setSelectedJobId(null);
-    }
     await refresh();
   };
 
@@ -351,44 +173,46 @@ export function ObjectiveScheduledTasksPanel({
     return ok;
   };
 
-  const scheduleEditJob = useMemo(
-    () => visibleJobs.find((job) => job.id === scheduleEditJobId) ?? null,
-    [scheduleEditJobId, visibleJobs]
+  const handleEditSubmit = useCallback(
+    async (jobId: string, data: CreateJobData) => {
+      const ok = await updateJob(jobId, data as Partial<PromptJob>);
+      if (ok) {
+        await refresh();
+      }
+      return ok;
+    },
+    [refresh, updateJob]
   );
 
   return (
     <>
       {showCreate ? (
-        <CreateJobModal
-          onClose={() => setShowCreate(false)}
-          onSubmit={async (data) => {
-            await handleCreate(data);
-          }}
-          createDefaults={createDefaults}
-          contextLabel={objectiveKey}
-        />
-      ) : null}
-      {selectedJob ? (
-        <ObjectiveScheduledTaskDetailModal
-          job={selectedJob}
-          onClose={() => setSelectedJobId(null)}
-          onUpdate={async (updates) => {
-            const ok = await updateJob(selectedJob.id, updates);
-            if (ok) await refresh();
-            return ok;
-          }}
-        />
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-6">
+          <div className="w-full max-w-5xl h-[85vh] overflow-hidden rounded-[28px] border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl">
+            <CreateJobModal
+              onClose={() => setShowCreate(false)}
+              onSubmit={async (data) => {
+                await handleCreate(data);
+              }}
+              createDefaults={createDefaults}
+              contextLabel={objectiveKey}
+            />
+          </div>
+        </div>
       ) : null}
-      {scheduleEditJob ? (
-        <ScheduleEditModal
-          job={scheduleEditJob}
-          onClose={() => setScheduleEditJobId(null)}
-          onUpdate={async (updates) => {
-            const ok = await updateJob(scheduleEditJob.id, updates);
-            if (ok) await refresh();
-            return ok;
-          }}
-        />
+      {editingJob ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-6">
+          <div className="w-full max-w-5xl h-[85vh] overflow-hidden rounded-[28px] border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl">
+            <CreateJobModal
+              onClose={() => setEditingJobId(null)}
+              onSubmit={async (data) => {
+                await handleEditSubmit(editingJob.id, data);
+              }}
+              editingJob={editingJob}
+              contextLabel={objectiveKey}
+            />
+          </div>
+        </div>
       ) : null}
 
       <div className="px-1">
@@ -429,11 +253,11 @@ export function ObjectiveScheduledTasksPanel({
             visibleJobs.map((job) => (
               <div
                 key={job.id}
-                onClick={() => setSelectedJobId(job.id)}
+                onClick={() => setEditingJobId(job.id)}
                 onKeyDown={(event) => {
                   if (event.key === "Enter" || event.key === " ") {
                     event.preventDefault();
-                    setSelectedJobId(job.id);
+                    setEditingJobId(job.id);
                   }
                 }}
                 role="button"
@@ -486,9 +310,27 @@ export function ObjectiveScheduledTasksPanel({
                         </span>
                       ) : null}
                     </div>
-                    <p className="mt-3 line-clamp-2 text-sm leading-6 text-[var(--muted-foreground)]">
-                      {promptSummary(job.prompt)}
-                    </p>
+                    <div className="mt-3 flex items-center gap-2 min-w-0 text-xs text-[var(--muted-foreground)]">
+                      {job.agentId && agentMap[job.agentId] ? (
+                        <img
+                          src={agentAvatar(job.agentId, agentMap[job.agentId].color, 20)}
+                          alt=""
+                          className="size-5 rounded-full shrink-0"
+                        />
+                      ) : (
+                        <Terminal className="h-3.5 w-3.5 shrink-0" />
+                      )}
+                      <span className="truncate font-medium text-[var(--foreground)]">
+                        {job.agentId && agentMap[job.agentId]
+                          ? agentMap[job.agentId].name
+                          : job.provider}
+                      </span>
+                      {job.model ? (
+                        <span className="truncate font-mono text-[11px]">
+                          {job.model}
+                        </span>
+                      ) : null}
+                    </div>
                     {job.condition ? (
                       <p className="mt-2 text-xs text-[var(--muted-foreground)]">
                         Condition: {job.condition}
@@ -515,14 +357,14 @@ export function ObjectiveScheduledTasksPanel({
                     </button>
                     <button
                       type="button"
-                      title="Edit schedule"
+                      title="Edit"
                       onClick={(event) => {
                         event.stopPropagation();
-                        setScheduleEditJobId(job.id);
+                        setEditingJobId(job.id);
                       }}
                       className="rounded-lg border border-[var(--border)] p-2 text-[var(--muted-foreground)] transition-colors hover:border-sky-400/40 hover:text-sky-300"
                     >
-                      <Clock className="h-3.5 w-3.5" />
+                      <Pencil className="h-3.5 w-3.5" />
                     </button>
                     <button
                       type="button"