@mndrk/agx 2.0.56 → 2.2.0

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

@@ -0,0 +1,215 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  buildObjectiveHealthHistoryFromActivities,
+  mergeObjectiveHealthSamples,
+  readObjectiveHealthHistory,
+  type ObjectiveHealthSample,
+} from "@/lib/objective-health-history";
+import type { ProjectObjectiveHealth } from "@/lib/project-objectives";
+import type { ObjectiveActivityPage } from "@/src/objectives/activities/types";
+
+interface ObjectiveHealthTrendProps {
+  projectId: string;
+  objectiveId: string;
+  objectiveKey: string;
+  metadata: Record<string, unknown> | undefined;
+  currentProgress: number;
+  currentStatus: ProjectObjectiveHealth;
+  objectiveUpdatedAt: string;
+}
+
+const STATUS_META: Record<ProjectObjectiveHealth, { label: string; stroke: string }> = {
+  on_track: {
+    label: "On track",
+    stroke: "var(--status-completed-text)",
+  },
+  at_risk: {
+    label: "At risk",
+    stroke: "var(--status-blocked-text)",
+  },
+  off_track: {
+    label: "Off track",
+    stroke: "var(--status-failed-text)",
+  },
+  done: {
+    label: "Done",
+    stroke: "var(--status-in-progress-text)",
+  },
+};
+
+function formatUpdateLabel(iso: string): string {
+  return new Date(iso).toLocaleString([], {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+function buildPolylinePoints(samples: ObjectiveHealthSample[], width: number, height: number): string {
+  const leftPad = 6;
+  const rightPad = 6;
+  const topPad = 6;
+  const bottomPad = 6;
+  const xSpan = Math.max(1, width - leftPad - rightPad);
+  const ySpan = Math.max(1, height - topPad - bottomPad);
+
+  if (samples.length === 1) {
+    const progressY = height - bottomPad - (samples[0].progress / 100) * ySpan;
+    return `${width / 2},${progressY}`;
+  }
+
+  return samples
+    .map((sample, index) => {
+      const x = leftPad + (index / Math.max(1, samples.length - 1)) * xSpan;
+      const y = height - bottomPad - (sample.progress / 100) * ySpan;
+      return `${x},${y}`;
+    })
+    .join(" ");
+}
+
+export function ObjectiveHealthTrend(props: ObjectiveHealthTrendProps) {
+  const {
+    projectId,
+    objectiveId,
+    objectiveKey,
+    metadata,
+    currentProgress,
+    currentStatus,
+    objectiveUpdatedAt,
+  } = props;
+
+  const historyFromMetadata = useMemo(
+    () => readObjectiveHealthHistory(metadata, objectiveId),
+    [metadata, objectiveId],
+  );
+  const [samples, setSamples] = useState<ObjectiveHealthSample[]>(historyFromMetadata);
+  const currentSample = useMemo(
+    () => ({
+      progress: currentProgress,
+      status: currentStatus,
+      recordedAt: objectiveUpdatedAt,
+      objectiveId,
+      objectiveKey,
+    }),
+    [currentProgress, currentStatus, objectiveId, objectiveKey, objectiveUpdatedAt],
+  );
+
+  useEffect(() => {
+    setSamples(historyFromMetadata);
+  }, [historyFromMetadata]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadActivityBackfill() {
+      try {
+        const response = await fetch(
+          `/api/projects/${projectId}/objectives/${objectiveId}/activities?type=status-update&limit=100`,
+        );
+        if (!response.ok) {
+          throw new Error("Failed to load objective activity history");
+        }
+
+        const payload = (await response.json()) as ObjectiveActivityPage;
+        const activities = Array.isArray(payload.activities) ? payload.activities : [];
+        const mergedSamples = mergeObjectiveHealthSamples(
+          historyFromMetadata,
+          buildObjectiveHealthHistoryFromActivities(activities, objectiveKey),
+        );
+        if (!cancelled) {
+          setSamples(mergedSamples);
+        }
+      } catch {
+        if (!cancelled) {
+          setSamples(historyFromMetadata);
+        }
+      }
+    }
+
+    void loadActivityBackfill();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [historyFromMetadata, objectiveId, objectiveKey, projectId]);
+
+  const plottedSamples = mergeObjectiveHealthSamples(samples, [currentSample]);
+  const latestSample = plottedSamples[plottedSamples.length - 1];
+  const polylinePoints = buildPolylinePoints(plottedSamples, 180, 52);
+  const statusMeta = STATUS_META[latestSample.status];
+  const sampleCountLabel = samples.length === 0
+    ? "Current state"
+    : plottedSamples.length === 1
+      ? "1 update"
+      : `${plottedSamples.length} updates`;
+
+  return (
+    <div
+      data-testid="objective-health-trend"
+      className="flex min-w-[260px] flex-1 items-center gap-4 rounded-2xl border border-[var(--border)] bg-[var(--overlay-panel-muted)] px-4 py-3"
+    >
+      <div className="min-w-[84px]">
+        <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--muted-foreground)]">
+          Objective health
+        </div>
+        <div className="mt-1 text-[24px] font-semibold leading-none text-[var(--foreground)]">
+          {latestSample.progress}%
+        </div>
+        <div className="mt-1 text-[11px] font-medium" style={{ color: statusMeta.stroke }}>
+          {statusMeta.label}
+        </div>
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <svg
+          viewBox="0 0 180 52"
+          className="h-[52px] w-full overflow-visible"
+          role="img"
+          aria-label="Objective health trend"
+        >
+          <line
+            x1="6"
+            y1="26"
+            x2="174"
+            y2="26"
+            stroke="var(--border)"
+            strokeDasharray="3 3"
+            strokeWidth="1"
+          />
+          <polyline
+            fill="none"
+            stroke={statusMeta.stroke}
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            points={polylinePoints}
+          />
+          {plottedSamples.map((sample, index) => {
+            const pointString = polylinePoints.split(" ")[index] ?? "";
+            const [cx = "0", cy = "0"] = pointString.split(",");
+            return (
+              <circle
+                key={`${sample.recordedAt}-${index}`}
+                cx={cx}
+                cy={cy}
+                r={index === plottedSamples.length - 1 ? 4 : 3}
+                fill={statusMeta.stroke}
+                fillOpacity={index === plottedSamples.length - 1 ? 1 : 0.2}
+                stroke={statusMeta.stroke}
+                strokeWidth="1.5"
+              />
+            );
+          })}
+        </svg>
+
+        <div className="mt-1 flex items-center justify-between gap-2 text-[10px] text-[var(--muted-foreground)]">
+          <span>{sampleCountLabel}</span>
+          <span>{formatUpdateLabel(latestSample.recordedAt)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -6,9 +6,12 @@ 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 RichTextEditor from "@/components/RichTextEditor";
+import { ScheduleConditionPicker } from "@/components/scheduling/ScheduleConditionPicker";
 
 export type ObjectiveScheduledTaskDraft = CreateJobData;
 
+
 interface ObjectiveScheduledTasksPanelProps {
   projectId: string;
   objectiveId: string;
@@ -65,21 +68,113 @@ 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,
-  onHide,
-  hiding,
+  onUpdate,
 }: {
   job: PromptJob;
   onClose: () => void;
-  onHide: () => Promise<void>;
-  hiding: boolean;
+  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="w-full max-w-2xl rounded-[28px] border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl">
-        <div className="flex items-start justify-between gap-4 border-b border-[var(--border)] px-6 py-5">
+      <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)]">
@@ -115,45 +210,40 @@ function ObjectiveScheduledTaskDetailModal({
           </button>
         </div>
 
-        <div className="space-y-5 px-6 py-6">
+        {/* 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="whitespace-pre-wrap rounded-2xl border border-[var(--border)] bg-[var(--overlay-panel-muted)] px-4 py-4 text-sm leading-6 text-[var(--foreground)]">
-              {job.prompt || "No instructions yet"}
+            <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>
 
-          {job.condition ? (
-            <div>
-              <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
-                Condition
-              </p>
-              <div className="rounded-2xl border border-[var(--border)] bg-[var(--overlay-panel-muted)] px-4 py-4 text-sm leading-6 text-[var(--foreground)]">
-                {job.condition}
-              </div>
-            </div>
-          ) : null}
-
-          <div className="flex items-center justify-end gap-3 border-t border-[var(--border)] pt-5">
-            <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)]"
-            >
-              Close
-            </button>
-            <button
-              type="button"
-              onClick={() => void onHide()}
-              disabled={hiding}
-              className="inline-flex items-center gap-2 rounded-xl border border-[var(--status-failed-border)] px-4 py-2.5 text-sm text-[var(--destructive)] transition-colors hover:bg-[var(--destructive-muted)] disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              <Trash2 className="h-4 w-4" />
-              {hiding ? "Hiding..." : "Hide task"}
-            </button>
-          </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>
@@ -183,7 +273,7 @@ export function ObjectiveScheduledTasksPanel({
   createDefaults,
   onCreateTask,
 }: ObjectiveScheduledTasksPanelProps) {
-  const { jobs, loading, refresh, deleteJob, toggleJob, fetchRuns, runNow } = usePromptJobs(projectId, {
+  const { jobs, loading, refresh, deleteJob, toggleJob, updateJob, fetchRuns, runNow } = usePromptJobs(projectId, {
     requireProjectId: true,
     includeObjectiveJobs: true,
     objectiveId,
@@ -192,12 +282,18 @@ export function ObjectiveScheduledTasksPanel({
   const [busyId, setBusyId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const [scheduleEditJobId, setScheduleEditJobId] = useState<string | null>(null);
   const [recentRuns, setRecentRuns] = useState<(PromptRun & { jobName: string })[]>([]);
 
-  const visibleJobs = useMemo(
-    () => jobs.filter((job) => job.objectiveId === objectiveId),
-    [jobs, objectiveId]
-  );
+  const visibleJobs = useMemo(() => {
+    const filtered = jobs.filter((job) => job.objectiveId === objectiveId);
+    // Pin "Objective worker" to the top
+    return filtered.sort((a, b) => {
+      const aPin = a.name.toLowerCase().includes("objective worker") ? 0 : 1;
+      const bPin = b.name.toLowerCase().includes("objective worker") ? 0 : 1;
+      return aPin - bPin;
+    });
+  }, [jobs, objectiveId]);
   const selectedJob = useMemo(
     () => visibleJobs.find((job) => job.id === selectedJobId) ?? null,
     [selectedJobId, visibleJobs]
@@ -253,6 +349,10 @@ export function ObjectiveScheduledTasksPanel({
     return ok;
   };
 
+  const scheduleEditJob = useMemo(
+    () => visibleJobs.find((job) => job.id === scheduleEditJobId) ?? null,
+    [scheduleEditJobId, visibleJobs]
+  );
 
   return (
     <>
@@ -270,10 +370,22 @@ export function ObjectiveScheduledTasksPanel({
         <ObjectiveScheduledTaskDetailModal
           job={selectedJob}
           onClose={() => setSelectedJobId(null)}
-          onHide={async () => {
-            await handleHide(selectedJob);
+          onUpdate={async (updates) => {
+            const ok = await updateJob(selectedJob.id, updates);
+            if (ok) await refresh();
+            return ok;
+          }}
+        />
+      ) : null}
+      {scheduleEditJob ? (
+        <ScheduleEditModal
+          job={scheduleEditJob}
+          onClose={() => setScheduleEditJobId(null)}
+          onUpdate={async (updates) => {
+            const ok = await updateJob(scheduleEditJob.id, updates);
+            if (ok) await refresh();
+            return ok;
           }}
-          hiding={busyId === selectedJob.id}
         />
       ) : null}
 
@@ -363,6 +475,7 @@ export function ObjectiveScheduledTasksPanel({
                         Next run {formatNextRun(job.nextRunAt, job.state)}
                       </span>
                       <span className="inline-flex items-center gap-1.5">
+                        <Clock className="h-3.5 w-3.5" />
                         {formatCadence(job)}
                       </span>
                       {job.condition ? (
@@ -398,6 +511,17 @@ export function ObjectiveScheduledTasksPanel({
                     >
                       <Play className="h-3.5 w-3.5 fill-current" />
                     </button>
+                    <button
+                      type="button"
+                      title="Edit schedule"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setScheduleEditJobId(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" />
+                    </button>
                     <button
                       type="button"
                       title={job.state === "active" ? "Pause" : "Resume"}
@@ -453,41 +577,45 @@ export function ObjectiveScheduledTasksPanel({
                 const isFailed = run.status === "failed";
                 const isRunning = run.status === "running";
                 return (
-                  <div
-                    key={run.id}
-                    className="flex items-center gap-3 py-2 px-2 rounded-md text-xs"
-                  >
-                    <span
-                      className={`flex size-5 shrink-0 items-center justify-center rounded-full border ${
-                        isSuccess
-                          ? "border-emerald-500/40 text-emerald-400"
-                          : isFailed
-                            ? "border-[var(--status-failed-border)] text-[var(--destructive)]"
-                            : isRunning
-                              ? "border-sky-500/40 text-sky-400"
-                              : "border-[var(--border)] text-[var(--muted-foreground)]"
-                      }`}
-                    >
-                      {isSuccess ? (
-                        <Check className="h-3 w-3" />
-                      ) : isFailed ? (
-                        <XCircle className="h-3 w-3" />
-                      ) : (
-                        <span className={`block size-1.5 rounded-full ${isRunning ? "bg-sky-400 animate-pulse" : "bg-current"}`} />
-                      )}
-                    </span>
-                    <span className="truncate text-[var(--muted-foreground)]">
-                      {run.jobName}
-                    </span>
-                    <span className="ml-auto shrink-0 text-[11px] text-[var(--muted-foreground)]">
-                      {formatDateTime(ts)}
-                    </span>
-                    {run.durationMs != null && (
-                      <span className="shrink-0 font-mono text-[11px] text-[var(--muted-foreground)]">
-                        {run.durationMs < 1000
-                          ? `${run.durationMs}ms`
-                          : `${Math.round(run.durationMs / 1000)}s`}
+                  <div key={run.id} className="py-2 px-2 rounded-md text-xs">
+                    <div className="flex items-center gap-3">
+                      <span
+                        className={`flex size-5 shrink-0 items-center justify-center rounded-full border ${
+                          isSuccess
+                            ? "border-emerald-500/40 text-emerald-400"
+                            : isFailed
+                              ? "border-[var(--status-failed-border)] text-[var(--destructive)]"
+                              : isRunning
+                                ? "border-sky-500/40 text-sky-400"
+                                : "border-[var(--border)] text-[var(--muted-foreground)]"
+                        }`}
+                      >
+                        {isSuccess ? (
+                          <Check className="h-3 w-3" />
+                        ) : isFailed ? (
+                          <XCircle className="h-3 w-3" />
+                        ) : (
+                          <span className={`block size-1.5 rounded-full ${isRunning ? "bg-sky-400 animate-pulse" : "bg-current"}`} />
+                        )}
+                      </span>
+                      <span className="truncate text-[var(--muted-foreground)]">
+                        {run.jobName}
                       </span>
+                      <span className="ml-auto shrink-0 text-[11px] text-[var(--muted-foreground)]">
+                        {formatDateTime(ts)}
+                      </span>
+                      {run.durationMs != null && (
+                        <span className="shrink-0 font-mono text-[11px] text-[var(--muted-foreground)]">
+                          {run.durationMs < 1000
+                            ? `${run.durationMs}ms`
+                            : `${Math.round(run.durationMs / 1000)}s`}
+                        </span>
+                      )}
+                    </div>
+                    {isFailed && run.error && (
+                      <p className="mt-1 ml-8 text-[11px] leading-snug text-[var(--destructive)] opacity-80 line-clamp-2">
+                        {run.error}
+                      </p>
                     )}
                   </div>
                 );

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

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { WorkingNowCard } from "./WorkingNowCard";
+import { RecentlyCompletedCard } from "./RecentlyCompletedCard";
 import { TeamsSummaryCard } from "./TeamsSummaryCard";
 import { ScheduledTasksSummaryCard } from "./ScheduledTasksSummaryCard";
 import { FoldersSummaryCard } from "./FoldersSummaryCard";
@@ -57,14 +58,19 @@ export function ProjectHome({
         <section>
           <h2 className="mb-3 text-sm text-[var(--muted-foreground)]">What's happening now</h2>
           <div className="space-y-4">
+            <ScheduledTasksSummaryCard
+              projectId={projectId}
+              projectSlug={projectSlug}
+              onViewAll={() => router.push(`/projects/${projectSlug}/automations`)}
+            />
             <WorkingNowCard
               projectSlug={projectSlug}
               projectThreadIds={threadIds}
             />
-            <ScheduledTasksSummaryCard
+            <RecentlyCompletedCard
               projectId={projectId}
               projectSlug={projectSlug}
-              onViewAll={() => router.push(`/projects/${projectSlug}/automations`)}
+              projectThreadIds={threadIds}
             />
           </div>
         </section>