From 0b60c791b5a5beb2408ad6619f32e4b3581a7b92 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Wed, 16 Sep 2026 11:00:02 +0200
Subject: [PATCH] feat(card): activity timeline visible to both roles

---
 src/components/card/activity-timeline.tsx | 58 +++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/card/activity-timeline.tsx

diff --git a/src/components/card/activity-timeline.tsx b/src/components/card/activity-timeline.tsx
new file mode 100644
index 0000000..b5fd0a5
--- /dev/null
+++ b/src/components/card/activity-timeline.tsx
@@ -0,0 +1,58 @@
+import { describeActivity } from "@/lib/activity/format";
+import { relativeTime } from "@/lib/time/relative";
+import type { ActivityRecord } from "@/lib/pb/types";
+
+/**
+ * The card's history, newest first.
+ *
+ * This is the answer to "I never agreed to that date". It is shown to the
+ * client as well as the owner deliberately — a log only one side can see
+ * settles nothing.
+ */
+export function ActivityTimeline({
+  activity,
+  names,
+}: {
+  activity: ActivityRecord[];
+  names: Record<string, string>;
+}) {
+  if (activity.length === 0) {
+    return (
+      <section className="space-y-3">
+        <h2 className="text-xs font-semibold uppercase tracking-wide text-text-secondary">
+          History
+        </h2>
+        <p className="text-sm text-text-muted">Nothing has changed yet.</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="space-y-3">
+      <h2 className="text-xs font-semibold uppercase tracking-wide text-text-secondary">
+        History
+      </h2>
+
+      <ol className="space-y-2.5">
+        {activity.map((row) => (
+          <li key={row.id} className="flex gap-2.5 text-sm">
+            <span
+              aria-hidden
+              className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-border-strong"
+            />
+            <p className="text-text-secondary">
+              <span className="font-medium text-text-primary">
+                {names[row.actor] ?? "Someone"}
+              </span>{" "}
+              {describeActivity(row)}
+              <span className="text-text-muted">
+                {" · "}
+                {relativeTime(row.created)}
+              </span>
+            </p>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
\ No newline at end of file