@mndrk/agx 2.0.55 → 2.0.56

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

@@ -30,7 +30,7 @@ const TYPE_META: Record<ObjectiveActivityType, { label: string; className: strin
   },
   note: {
     label: "Note",
-    className: "bg-zinc-500/15 text-zinc-400 border-zinc-500/30",
+    className: "bg-[var(--tone-neutral-bg)] text-[var(--tone-neutral)] border-[var(--tone-neutral-border)]",
   },
 };
 
@@ -62,42 +62,46 @@ function formatRelativeTime(isoDate: string): string {
 function ActivityEntry({ activity }: { activity: ObjectiveActivityFile }) {
   const [expanded, setExpanded] = useState(false);
   const meta = TYPE_META[activity.type] ?? TYPE_META.note;
-  const preview =
-    activity.body.length > 200 ? `${activity.body.slice(0, 200).trim()}…` : activity.body;
   const hasMore = activity.body.length > 200;
 
   return (
     <div className="relative pl-6 pb-6 last:pb-0">
-      <div className="absolute left-0 top-1.5 w-3 h-3 rounded-full border-2 border-zinc-600 bg-[#131315]" />
-      <div className="absolute left-[5px] top-4 bottom-0 w-px bg-zinc-800 last:hidden" />
+      <div className="absolute left-0 top-1.5 h-3 w-3 rounded-full border-2 border-[var(--timeline-node-border)] bg-[var(--timeline-node-bg)]" />
+      <div className="absolute bottom-0 left-[5px] top-4 w-px bg-[var(--timeline-track)] last:hidden" />
 
-      <div className="flex items-center gap-2 mb-1.5">
+      <div className="mb-1.5 flex items-center gap-2">
         <span
           className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] ${meta.className}`}
         >
           {meta.label}
         </span>
-        <span className="text-[11px] text-zinc-500">{formatRelativeTime(activity.createdAt)}</span>
+        <span className="text-[11px] text-[var(--muted-foreground)]">{formatRelativeTime(activity.createdAt)}</span>
         {activity.source !== "manual" && (
-          <span className="text-[11px] text-zinc-600 font-mono truncate max-w-[180px]">
+          <span className="max-w-[180px] truncate font-mono text-[11px] text-[var(--app-shell-soft-text)]">
             {activity.source}
           </span>
         )}
       </div>
 
       {expanded ? (
-        <div className="text-sm text-zinc-300 prose prose-invert prose-sm max-w-none">
+        <div className="prose prose-sm max-w-none text-sm text-[var(--foreground)] prose-neutral dark:prose-invert">
           <Markdown content={activity.body} />
         </div>
       ) : (
-        <p className="text-sm text-zinc-400 leading-relaxed">{preview}</p>
+        <div
+          className={`text-sm leading-relaxed text-[var(--muted-foreground)] ${
+            hasMore ? "max-h-24 overflow-hidden [mask-image:linear-gradient(to_bottom,black_72%,transparent)]" : ""
+          }`}
+        >
+          <Markdown content={activity.body} />
+        </div>
       )}
 
       {hasMore && (
         <button
           type="button"
           onClick={() => setExpanded(!expanded)}
-          className="mt-1.5 flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+          className="mt-1.5 flex items-center gap-1 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
         >
           {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
           {expanded ? "Show less" : "Show more"}
@@ -152,8 +156,8 @@ function LogActivityForm({
   };
 
   return (
-    <div className="rounded-lg border border-zinc-700/60 bg-zinc-900/50 p-3 mb-4">
-      <div className="flex flex-wrap gap-1.5 mb-3">
+    <div className="mb-4 rounded-lg border border-[var(--border)] bg-[var(--overlay-panel-muted)] p-3">
+      <div className="mb-3 flex flex-wrap gap-1.5">
         {ALL_TYPES.map((t) => {
           const meta = TYPE_META[t];
           const isActive = type === t;
@@ -164,7 +168,7 @@ function LogActivityForm({
               onClick={() => setType(t)}
               className={`rounded-full border px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] transition-colors ${
                 isActive
-                  ? "bg-zinc-200 text-zinc-900 border-zinc-200"
+                  ? "border-[var(--foreground)] bg-[var(--foreground)] text-[var(--background)]"
                   : `${meta.className} hover:opacity-80`
               }`}
             >
@@ -179,13 +183,13 @@ function LogActivityForm({
         onChange={(e) => setBody(e.target.value)}
         placeholder="What did you do?"
         rows={3}
-        className="w-full rounded-md border border-zinc-700/60 bg-zinc-800/50 px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 resize-none"
+        className="w-full resize-none rounded-md border border-[var(--border)] bg-[var(--input)] px-3 py-2 text-sm text-[var(--foreground)] placeholder:text-[var(--app-shell-soft-text)] focus:border-[var(--card-hover-border)] focus:outline-none"
       />
-      <div className="flex items-center justify-end gap-2 mt-2">
+      <div className="mt-2 flex items-center justify-end gap-2">
         <button
           type="button"
           onClick={onCancel}
-          className="px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 transition-colors"
+          className="px-3 py-1.5 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
         >
           Cancel
         </button>
@@ -229,10 +233,14 @@ export function ObjectiveActivityTimeline({
         if (!response.ok) throw new Error("Failed to load activities");
 
         const data = (await response.json()) as ObjectiveActivityPage;
-        setActivities((prev) => (append ? [...prev, ...data.activities] : data.activities));
-        setTotal(data.total);
-        onTotalChange?.(data.total);
-        setHasMore(data.hasMore);
+        const nextActivities = Array.isArray(data.activities) ? data.activities : [];
+        const nextTotal = typeof data.total === "number" ? data.total : nextActivities.length;
+        const nextHasMore = Boolean(data.hasMore);
+
+        setActivities((prev) => (append ? [...prev, ...nextActivities] : nextActivities));
+        setTotal(nextTotal);
+        onTotalChange?.(nextTotal);
+        setHasMore(nextHasMore);
       } catch (error) {
         console.error("Failed to fetch activities:", error);
       } finally {
@@ -255,8 +263,8 @@ export function ObjectiveActivityTimeline({
 
   return (
     <section>
-      <div className="flex items-center justify-between mb-3">
-        <p className="text-sm text-zinc-500">
+      <div className="mb-3 flex items-center justify-between">
+        <p className="text-sm text-[var(--muted-foreground)]">
           Time-ordered log of outputs from scheduled tasks and manual entries.
         </p>
         <div className="flex items-center gap-1.5">
@@ -266,7 +274,7 @@ export function ObjectiveActivityTimeline({
             className={`flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${
               showLogForm
                 ? "text-sky-400 bg-sky-500/10"
-                : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50"
+                : "text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
             }`}
           >
             {showLogForm ? <X size={12} /> : <Plus size={12} />}
@@ -278,7 +286,7 @@ export function ObjectiveActivityTimeline({
             className={`p-1.5 rounded-md transition-colors ${
               showFilter || typeFilter !== "all"
                 ? "text-sky-400 bg-sky-500/10"
-                : "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50"
+                : "text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
             }`}
             aria-label="Filter activities"
           >
@@ -294,8 +302,8 @@ export function ObjectiveActivityTimeline({
             onClick={() => setTypeFilter("all")}
             className={`rounded-full border px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] transition-colors ${
               typeFilter === "all"
-                ? "bg-zinc-200 text-zinc-900 border-zinc-200"
-                : "bg-zinc-800/50 text-zinc-400 border-zinc-700 hover:border-zinc-500"
+                ? "border-[var(--foreground)] bg-[var(--foreground)] text-[var(--background)]"
+                : "border-[var(--tone-neutral-border)] bg-[var(--tone-neutral-bg)] text-[var(--tone-neutral)] hover:border-[var(--card-hover-border)]"
             }`}
           >
             All
@@ -310,7 +318,7 @@ export function ObjectiveActivityTimeline({
                 onClick={() => setTypeFilter(type)}
                 className={`rounded-full border px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] transition-colors ${
                   isActive
-                    ? "bg-zinc-200 text-zinc-900 border-zinc-200"
+                    ? "border-[var(--foreground)] bg-[var(--foreground)] text-[var(--background)]"
                     : `${meta.className} hover:opacity-80`
                 }`}
               >
@@ -339,11 +347,11 @@ export function ObjectiveActivityTimeline({
       )}
 
       {isLoading && activities.length === 0 ? (
-        <div className="text-sm text-zinc-500 py-6 text-center">Loading activities...</div>
+        <div className="py-6 text-center text-sm text-[var(--muted-foreground)]">Loading activities...</div>
       ) : activities.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-zinc-700/60 bg-zinc-900/30 p-6 text-center">
-          <p className="text-sm text-zinc-500">No activities yet.</p>
-          <p className="text-xs text-zinc-600 mt-1">
+        <div className="rounded-xl border border-dashed border-[var(--border)] bg-[var(--overlay-panel-muted)] p-6 text-center">
+          <p className="text-sm text-[var(--muted-foreground)]">No activities yet.</p>
+          <p className="mt-1 text-xs text-[var(--app-shell-soft-text)]">
             Activities are created by scheduled tasks and agent actions.
           </p>
         </div>

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

@@ -1,10 +1,10 @@
 "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";
 
 export type ObjectiveScheduledTaskDraft = CreateJobData;
@@ -15,7 +15,6 @@ interface ObjectiveScheduledTasksPanelProps {
   objectiveKey: string;
   createDefaults?: Partial<ObjectiveScheduledTaskDraft>;
   onCreateTask: (draft: ObjectiveScheduledTaskDraft) => Promise<boolean>;
-  onCreateObjectiveLinearWorker: () => Promise<boolean>;
 }
 
 function formatCadence(job: Pick<PromptJob, "cadence" | "cronExpr">): string {
@@ -24,6 +23,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";
@@ -109,7 +120,7 @@ function ObjectiveScheduledTaskDetailModal({
             <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">
+            <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>
           </div>
@@ -119,7 +130,7 @@ function ObjectiveScheduledTaskDetailModal({
               <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)]">
+              <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>
@@ -137,7 +148,7 @@ function ObjectiveScheduledTaskDetailModal({
               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"
+              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"}
@@ -157,12 +168,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,18 +182,17 @@ export function ObjectiveScheduledTasksPanel({
   objectiveKey,
   createDefaults,
   onCreateTask,
-  onCreateObjectiveLinearWorker,
 }: ObjectiveScheduledTasksPanelProps) {
-  const { jobs, loading, refresh, deleteJob } = usePromptJobs(projectId, {
+  const { jobs, loading, refresh, deleteJob, toggleJob, 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 [recentRuns, setRecentRuns] = useState<(PromptRun & { jobName: string })[]>([]);
 
   const visibleJobs = useMemo(
     () => jobs.filter((job) => job.objectiveId === objectiveId),
@@ -193,6 +203,32 @@ export function ObjectiveScheduledTasksPanel({
     [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 +253,6 @@ 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();
-  };
 
   return (
     <>
@@ -262,15 +287,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 +299,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 +324,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 +339,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,9 +350,15 @@ 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>
@@ -355,23 +381,120 @@ 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={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

@@ -34,18 +34,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,7 +55,7 @@ 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">
             <WorkingNowCard
               projectSlug={projectSlug}