@mndrk/agx 2.0.55 → 2.1.0

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

@@ -1,21 +1,23 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { Clock, Plus, Sparkles, Trash2, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Check, Clock, Pause, Play, Plus, Trash2, X, XCircle } from "lucide-react";
 import { usePromptJobs } from "@/hooks/usePromptJobs";
 import { cronToHuman } from "@/src/graph/nl-schedule";
-import type { PromptJob } from "@/src/prompt-scheduler/types";
+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;
   objectiveKey: string;
   createDefaults?: Partial<ObjectiveScheduledTaskDraft>;
   onCreateTask: (draft: ObjectiveScheduledTaskDraft) => Promise<boolean>;
-  onCreateObjectiveLinearWorker: () => Promise<boolean>;
 }
 
 function formatCadence(job: Pick<PromptJob, "cadence" | "cronExpr">): string {
@@ -24,6 +26,18 @@ function formatCadence(job: Pick<PromptJob, "cadence" | "cronExpr">): string {
   return cronToHuman(job.cronExpr || source) ?? source;
 }
 
+function isJobOverdue(job: Pick<PromptJob, "nextRunAt" | "lastRunAt" | "prevScheduledAt" | "state">): boolean {
+  if (job.state !== "active") return false;
+  if (job.nextRunAt !== null && job.nextRunAt - Date.now() < 0) {
+    if (job.lastRunAt && job.lastRunAt >= job.nextRunAt) return false;
+    return true;
+  }
+  if (job.prevScheduledAt && job.lastRunAt) {
+    return job.lastRunAt > job.prevScheduledAt + 5 * 60_000;
+  }
+  return false;
+}
+
 function formatNextRun(epochMs: number | null, state: PromptJob["state"]): string {
   if (state === "paused") return "Paused";
   if (state === "stopped") return "Stopped";
@@ -54,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)]">
@@ -104,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="rounded-2xl border border-[var(--border)] bg-[rgba(15,23,42,0.28)] px-4 py-4 text-sm leading-6 text-[var(--foreground)] whitespace-pre-wrap">
-              {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-[rgba(15,23,42,0.28)] 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-rose-500/20 px-4 py-2.5 text-sm text-rose-100 transition-colors hover:bg-rose-500/10 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>
@@ -157,12 +258,12 @@ function formatState(state: PromptJob["state"]): string {
 
 function stateClasses(state: PromptJob["state"]): string {
   if (state === "active") {
-    return "border-emerald-500/20 bg-emerald-500/10 text-emerald-300";
+    return "border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] text-[var(--status-completed)]";
   }
   if (state === "paused") {
-    return "border-amber-500/20 bg-amber-500/10 text-amber-300";
+    return "border-[var(--status-blocked-border)] bg-[var(--status-blocked-bg)] text-[var(--status-blocked)]";
   }
-  return "border-zinc-700 bg-zinc-800/80 text-zinc-300";
+  return "border-[var(--tone-neutral-border)] bg-[var(--tone-neutral-bg)] text-[var(--tone-neutral)]";
 }
 
 export function ObjectiveScheduledTasksPanel({
@@ -171,28 +272,59 @@ export function ObjectiveScheduledTasksPanel({
   objectiveKey,
   createDefaults,
   onCreateTask,
-  onCreateObjectiveLinearWorker,
 }: ObjectiveScheduledTasksPanelProps) {
-  const { jobs, loading, refresh, deleteJob } = usePromptJobs(projectId, {
+  const { jobs, loading, refresh, deleteJob, toggleJob, updateJob, fetchRuns, runNow } = usePromptJobs(projectId, {
     requireProjectId: true,
     includeObjectiveJobs: true,
     objectiveId,
   });
   const [showCreate, setShowCreate] = useState(false);
-  const [creatingLinearWorker, setCreatingLinearWorker] = useState(false);
   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]
   );
 
+  const loadRecentRuns = useCallback(async () => {
+    if (visibleJobs.length === 0) {
+      setRecentRuns([]);
+      return;
+    }
+    const allRuns: (PromptRun & { jobName: string })[] = [];
+    await Promise.all(
+      visibleJobs.map(async (job) => {
+        const runs = await fetchRuns(job.id);
+        for (const run of runs) {
+          allRuns.push({ ...run, jobName: job.name });
+        }
+      })
+    );
+    allRuns.sort(
+      (a, b) =>
+        new Date(b.startedAt ?? b.createdAt).getTime() -
+        new Date(a.startedAt ?? a.createdAt).getTime()
+    );
+    setRecentRuns(allRuns.slice(0, 10));
+  }, [visibleJobs, fetchRuns]);
+
+  useEffect(() => {
+    void loadRecentRuns();
+  }, [loadRecentRuns]);
+
   const handleHide = async (job: PromptJob) => {
     setBusyId(job.id);
     setError(null);
@@ -217,17 +349,10 @@ export function ObjectiveScheduledTasksPanel({
     return ok;
   };
 
-  const handleCreateObjectiveLinearWorker = async () => {
-    setCreatingLinearWorker(true);
-    setError(null);
-    const ok = await onCreateObjectiveLinearWorker();
-    setCreatingLinearWorker(false);
-    if (!ok) {
-      setError("Failed to create the objective Linear worker.");
-      return;
-    }
-    await refresh();
-  };
+  const scheduleEditJob = useMemo(
+    () => visibleJobs.find((job) => job.id === scheduleEditJobId) ?? null,
+    [scheduleEditJobId, visibleJobs]
+  );
 
   return (
     <>
@@ -245,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}
 
@@ -262,15 +399,6 @@ export function ObjectiveScheduledTasksPanel({
             </p>
           </div>
           <div className="flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void handleCreateObjectiveLinearWorker()}
-              disabled={creatingLinearWorker}
-              className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-100 transition-colors hover:bg-emerald-500/15 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              <Sparkles className="h-4 w-4" />
-              {creatingLinearWorker ? "Creating..." : "Work Linear tickets"}
-            </button>
             <button
               type="button"
               onClick={() => setShowCreate(true)}
@@ -283,7 +411,7 @@ export function ObjectiveScheduledTasksPanel({
         </div>
 
         {error ? (
-          <p className="mt-4 text-sm text-red-300">{error}</p>
+          <p className="mt-4 text-sm text-[var(--destructive)]">{error}</p>
         ) : null}
 
         <div className="mt-5 space-y-3">
@@ -308,7 +436,11 @@ export function ObjectiveScheduledTasksPanel({
                 }}
                 role="button"
                 tabIndex={0}
-                className="block w-full rounded-2xl border border-[var(--border)] bg-[rgba(15,23,42,0.28)] px-4 py-4 text-left transition-colors hover:border-[var(--card-hover-border)] focus:outline-none focus:ring-2 focus:ring-[var(--card-hover-border)]"
+                className={`block w-full rounded-2xl border px-4 py-4 text-left transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--card-hover-border)] ${
+                  isJobOverdue(job)
+                    ? "border-amber-500/40 bg-amber-500/5 hover:border-amber-500/60"
+                    : "border-[var(--border)] bg-[var(--overlay-panel-muted)] hover:border-[var(--card-hover-border)]"
+                }`}
               >
                 <div className="flex flex-wrap items-start justify-between gap-3">
                   <div className="min-w-0 flex-1">
@@ -319,7 +451,7 @@ export function ObjectiveScheduledTasksPanel({
                             ? "bg-emerald-400"
                             : job.state === "paused"
                               ? "bg-amber-400"
-                              : "bg-zinc-500"
+                              : "bg-[var(--tone-neutral)]"
                         }`}
                       />
                       <p className="truncate text-sm font-semibold text-[var(--foreground)]">
@@ -330,13 +462,20 @@ export function ObjectiveScheduledTasksPanel({
                       >
                         {formatState(job.state)}
                       </span>
+                      {isJobOverdue(job) && (
+                        <span className="shrink-0 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded-full border border-amber-500/20 inline-flex items-center gap-1">
+                          <Clock className="h-3 w-3" />
+                          overdue
+                        </span>
+                      )}
                     </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">
+                      <span className={`inline-flex items-center gap-1.5 ${isJobOverdue(job) ? "text-amber-400 font-medium" : ""}`}>
                         <Clock className="h-3.5 w-3.5" />
                         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 ? (
@@ -355,23 +494,131 @@ export function ObjectiveScheduledTasksPanel({
                     ) : null}
                   </div>
 
-                  <button
-                    type="button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      void handleHide(job);
-                    }}
-                    disabled={busyId === job.id}
-                    className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border)] px-3 py-2 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:border-red-400/40 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                    <Trash2 className="h-3.5 w-3.5" />
-                    {busyId === job.id ? "Hiding..." : "Hide"}
-                  </button>
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    <button
+                      type="button"
+                      title="Run now"
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                        setBusyId(job.id);
+                        await runNow(job.id);
+                        setBusyId(null);
+                        await refresh();
+                        await loadRecentRuns();
+                      }}
+                      disabled={busyId === job.id}
+                      className="rounded-lg border border-[var(--border)] p-2 text-[var(--muted-foreground)] transition-colors hover:border-emerald-400/40 hover:text-emerald-300 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                      <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"}
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                        setBusyId(job.id);
+                        await toggleJob(job);
+                        setBusyId(null);
+                      }}
+                      disabled={busyId === job.id}
+                      className={`rounded-lg border p-2 transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+                        job.state === "active"
+                          ? "border-[var(--border)] text-[var(--muted-foreground)] hover:border-amber-400/40 hover:text-amber-300"
+                          : "border-emerald-500/30 text-emerald-400 hover:border-emerald-400/50 hover:text-emerald-300"
+                      }`}
+                    >
+                      {job.state === "active" ? (
+                        <Pause className="h-3.5 w-3.5" />
+                      ) : (
+                        <Play className="h-3.5 w-3.5 fill-current" />
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      title="Delete"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        if (!confirm(`Delete "${job.name}"? This cannot be undone.`)) return;
+                        void handleHide(job);
+                      }}
+                      disabled={busyId === job.id}
+                      className="rounded-lg border border-[var(--border)] p-2 text-[var(--muted-foreground)] transition-colors hover:border-[var(--status-failed-border)] hover:text-[var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
                 </div>
               </div>
             ))
           )}
         </div>
+
+        {/* Recent Executions */}
+        {recentRuns.length > 0 && (
+          <div className="mt-8">
+            <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-[var(--muted-foreground)] mb-3">
+              Recent executions
+            </p>
+            <div className="space-y-0.5">
+              {recentRuns.map((run) => {
+                const ts = run.startedAt ?? run.createdAt;
+                const isSuccess = run.status === "success";
+                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`}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
       </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";
@@ -34,18 +35,18 @@ export function ProjectHome({
     <div className="h-full overflow-y-auto">
       <div className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {projectDescription && (
-          <p className="text-sm text-zinc-400">{projectDescription}</p>
+          <p className="text-sm text-[var(--muted-foreground)]">{projectDescription}</p>
         )}
 
         {/* Objectives */}
         <section>
-          <h2 className="text-sm text-zinc-500 mb-3">What you're working toward</h2>
+          <h2 className="mb-3 text-sm text-[var(--muted-foreground)]">What you're working toward</h2>
           <ObjectivesSection projectId={projectId} projectSlug={projectSlug} />
         </section>
 
         {/* Tool entry points */}
         <section>
-          <h2 className="text-sm text-zinc-500 mb-3">Start working</h2>
+          <h2 className="mb-3 text-sm text-[var(--muted-foreground)]">Start working</h2>
           <ToolPathsSection
             projectId={projectId}
             projectSlug={projectSlug}
@@ -55,16 +56,21 @@ export function ProjectHome({
 
         {/* Activity */}
         <section>
-          <h2 className="text-sm text-zinc-500 mb-3">What's happening now</h2>
+          <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>