@mndrk/agx 2.0.55 → 2.1.0

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/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>
+  );
+}