From 501a13eb094051bf9d3a95d90a9e06a7f382ea0b Mon Sep 17 00:00:00 2001
From: Sajith Ekanayaka <rkskekanayaka@gmail.com>
Date: Mon, 6 Jul 2026 18:10:52 +0530
Subject: [PATCH 1/4] [CSM Portal] show state transitions and field updates in
 case activity stream
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wire the case activity feed's lifecycle lane to the new field-change
activity endpoint. Previously the lane was always empty because the
audit list was hardcoded to an empty array on the client, so state,
severity, and assignee changes never appeared in the timeline even
though the backend now records them.

Comments, work notes, chat, and attachments keep reading from their
existing endpoints/hooks — this only adds the field-change lane
alongside them.
---
 .../webapp/src/api/backend/types.ts           |  48 +++++++
 .../webapp/src/constants/apiConstants.ts      |   1 +
 .../api/useCsmCaseActivities.test.ts          | 108 +++++++++++++++
 .../csm-cases/api/useCsmCaseActivities.ts     |  96 +++++++++++++
 .../features/csm-cases/api/usePatchCsmCase.ts |   9 ++
 .../components/CaseActivitiesFeed.test.tsx    | 126 ++++++++++++++++++
 .../components/CaseActivitiesFeed.tsx         |  52 +++++++-
 .../components/CaseDetailWidgets.tsx          |   1 +
 .../csm-cases/pages/CsmCaseDetailPage.tsx     |   9 +-
 .../src/features/csm-cases/types/csmCases.ts  |  19 ++-
 10 files changed, 462 insertions(+), 7 deletions(-)
 create mode 100644 apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.test.ts
 create mode 100644 apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.ts
 create mode 100644 apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx

diff --git a/apps/csm-portal/webapp/src/api/backend/types.ts b/apps/csm-portal/webapp/src/api/backend/types.ts
index 04a3a302a8..adbc1cbbe0 100644
--- a/apps/csm-portal/webapp/src/api/backend/types.ts
+++ b/apps/csm-portal/webapp/src/api/backend/types.ts
@@ -556,6 +556,54 @@ export interface BeCommentSearchResponse extends BeSearchResponseBase {
   comments?: BeComment[];
 }
 
+// ---------------------------------------------------------------------------
+// Case activities (unified comment / attachment / field-change stream)
+// ---------------------------------------------------------------------------
+
+/** One field changed within a single audited save-transaction. */
+export interface BeFieldChange {
+  /** Wire field name (e.g. `state`, `priority`, `assignedEngineer`). */
+  field: string;
+  /** Human-readable label for the field (e.g. "State", "Severity"). */
+  fieldLabel: string;
+  /** Absent/empty when the field was previously unset. */
+  previousValue?: string;
+  /** Absent/empty when the field was cleared. */
+  newValue?: string;
+}
+
+export type BeCaseActivityType = "comment" | "attachment" | "field_change";
+
+/**
+ * One entry from `POST /cases/{id}/activities/search`. Shared fields are
+ * present on every entry regardless of `type`; `changes` is populated only
+ * for `type === "field_change"`. This endpoint intentionally excludes work
+ * notes — the comments/work-notes feed continues to read from
+ * `/cases/{id}/comments/search` (see {@link BeComment}).
+ */
+export interface BeCaseActivityEntry {
+  id: string;
+  type: BeCaseActivityType;
+  content?: string;
+  createdOn: string;
+  createdBy?: string;
+  createdByFirstName?: string;
+  createdByLastName?: string;
+  createdByFullName?: string;
+  /** Only present on `type === "field_change"` entries. */
+  changes?: BeFieldChange[];
+}
+
+export interface BeCaseActivitiesSearchPayload {
+  pagination?: BePagination;
+  /** Whether the response should include `field_change` entries. */
+  includeFieldChanges?: boolean;
+}
+
+export interface BeCaseActivitiesSearchResponse extends BeSearchResponseBase {
+  activity?: BeCaseActivityEntry[];
+}
+
 // ---------------------------------------------------------------------------
 // Attachments
 // ---------------------------------------------------------------------------
diff --git a/apps/csm-portal/webapp/src/constants/apiConstants.ts b/apps/csm-portal/webapp/src/constants/apiConstants.ts
index c4dc92b0ab..4d898684ee 100644
--- a/apps/csm-portal/webapp/src/constants/apiConstants.ts
+++ b/apps/csm-portal/webapp/src/constants/apiConstants.ts
@@ -90,6 +90,7 @@ export const ApiQueryKeys = {
   CSM_CASE_DETAIL: "csm-case-detail",
   CSM_CASE_COMMENTS: "csm-case-comments",
   CSM_CASE_ATTACHMENTS: "csm-case-attachments",
+  CSM_CASE_ACTIVITIES: "csm-case-activities",
   CSM_CASE_SLAS: "csm-case-slas",
   CSM_PROJECTS: "csm-projects",
   CSM_PROJECT_DETAIL: "csm-project-detail",
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.test.ts b/apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.test.ts
new file mode 100644
index 0000000000..83e76ca3de
--- /dev/null
+++ b/apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.test.ts
@@ -0,0 +1,108 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { describe, expect, it, vi } from "vitest";
+import type { BeCaseActivityEntry } from "@api/backend/types";
+
+// The module also exports `useGetCsmCaseActivities`, which imports the
+// backend client; that client throws at import time if the runtime config
+// (`CSM_PORTAL_BACKEND_BASE_URL`) isn't present, which it isn't under
+// vitest. Stub it out — this test only exercises the pure mapper.
+vi.mock("@api/backend/client", () => ({
+  useBackendApi: vi.fn(),
+}));
+
+const { auditEntryFromBeActivity } = await import("./useCsmCaseActivities");
+
+describe("auditEntryFromBeActivity", () => {
+  it("maps a field_change entry with a preferred display-name order", () => {
+    const entry: BeCaseActivityEntry = {
+      id: "fc-1",
+      type: "field_change",
+      createdOn: "2026-07-01T00:00:00Z",
+      createdBy: "jane.doe@example.com",
+      createdByFirstName: "Jane",
+      createdByLastName: "Doe",
+      createdByFullName: "Jane Doe",
+      changes: [
+        {
+          field: "state",
+          fieldLabel: "State",
+          previousValue: "In Progress",
+          newValue: "Resolved",
+        },
+      ],
+    };
+
+    const mapped = auditEntryFromBeActivity(entry);
+
+    expect(mapped).toEqual({
+      id: "fc-1",
+      kind: "field_change",
+      actor: "Jane Doe",
+      createdAt: "2026-07-01T00:00:00Z",
+      changes: [
+        {
+          field: "state",
+          fieldLabel: "State",
+          previousValue: "In Progress",
+          newValue: "Resolved",
+        },
+      ],
+    });
+  });
+
+  it("falls back to first+last name, then the bare email, when fullName is absent", () => {
+    const noFullName: BeCaseActivityEntry = {
+      id: "fc-2",
+      type: "field_change",
+      createdOn: "2026-07-01T00:00:00Z",
+      createdByFirstName: "Jane",
+      createdByLastName: "Doe",
+      changes: [],
+    };
+    expect(auditEntryFromBeActivity(noFullName).actor).toBe("Jane Doe");
+
+    const emailOnly: BeCaseActivityEntry = {
+      id: "fc-3",
+      type: "field_change",
+      createdOn: "2026-07-01T00:00:00Z",
+      createdBy: "jane.doe@example.com",
+      changes: [],
+    };
+    expect(auditEntryFromBeActivity(emailOnly).actor).toBe(
+      "jane.doe@example.com",
+    );
+
+    const nothing: BeCaseActivityEntry = {
+      id: "fc-4",
+      type: "field_change",
+      createdOn: "2026-07-01T00:00:00Z",
+      changes: [],
+    };
+    expect(auditEntryFromBeActivity(nothing).actor).toBe("Unknown");
+  });
+
+  it("defaults changes to an empty array when absent", () => {
+    const entry: BeCaseActivityEntry = {
+      id: "fc-5",
+      type: "field_change",
+      createdOn: "2026-07-01T00:00:00Z",
+      createdByFullName: "Jane Doe",
+    };
+    expect(auditEntryFromBeActivity(entry).changes).toEqual([]);
+  });
+});
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.ts b/apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.ts
new file mode 100644
index 0000000000..51ecdb0ed2
--- /dev/null
+++ b/apps/csm-portal/webapp/src/features/csm-cases/api/useCsmCaseActivities.ts
@@ -0,0 +1,96 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { ApiQueryKeys, BE_MAX_PAGE_LIMIT } from "@constants/apiConstants";
+import { useBackendApi } from "@api/backend/client";
+import type {
+  BeCaseActivitiesSearchPayload,
+  BeCaseActivitiesSearchResponse,
+  BeCaseActivityEntry,
+} from "@api/backend/types";
+import type { CaseAuditEntry } from "@features/csm-cases/types/csmCases";
+
+/** Page size used when loading the field-change lane. Capped by the BE; see BE_MAX_PAGE_LIMIT. */
+const ACTIVITIES_PAGE_LIMIT = BE_MAX_PAGE_LIMIT;
+
+/** Best display name off an activity entry's flat author fields. */
+function activityAuthorName(entry: BeCaseActivityEntry): string {
+  const full = entry.createdByFullName?.trim();
+  if (full) return full;
+  const composed = [entry.createdByFirstName, entry.createdByLastName]
+    .filter((p) => p && p.trim())
+    .join(" ")
+    .trim();
+  if (composed) return composed;
+  return entry.createdBy?.trim() || "Unknown";
+}
+
+/** Map one backend `field_change` activity entry onto a {@link CaseAuditEntry}. */
+export function auditEntryFromBeActivity(
+  entry: BeCaseActivityEntry,
+): CaseAuditEntry {
+  return {
+    id: entry.id,
+    kind: "field_change",
+    actor: activityAuthorName(entry),
+    createdAt: entry.createdOn,
+    changes: (entry.changes ?? []).map((c) => ({
+      field: c.field,
+      fieldLabel: c.fieldLabel,
+      previousValue: c.previousValue,
+      newValue: c.newValue,
+    })),
+  };
+}
+
+/**
+ * Load the audited field/state-change lane for a case. In LIVE mode calls
+ * `POST /cases/{id}/activities/search` with a single wide page (limit capped
+ * at BE_MAX_PAGE_LIMIT) and `includeFieldChanges: true`, then filters the
+ * response down to `type === "field_change"` entries — this endpoint also
+ * returns `comment`/`attachment` entries, but those lanes keep reading from
+ * their existing hooks (`useGetCsmCaseComments` / `useGetCsmCaseAttachments`),
+ * so they are ignored here to avoid a second, divergent read path. Notably
+ * this endpoint excludes work notes, so it must never replace the comments
+ * hook.
+ */
+export function useGetCsmCaseActivities(
+  caseId: string | undefined,
+): UseQueryResult<CaseAuditEntry[], Error> {
+  const api = useBackendApi();
+
+  return useQuery<CaseAuditEntry[], Error>({
+    queryKey: [ApiQueryKeys.CSM_CASE_ACTIVITIES, caseId ?? ""],
+    queryFn: async (): Promise<CaseAuditEntry[]> => {
+      if (!caseId) return [];
+
+      const payload: BeCaseActivitiesSearchPayload = {
+        pagination: { offset: 0, limit: ACTIVITIES_PAGE_LIMIT },
+        includeFieldChanges: true,
+      };
+      const response = await api.post<
+        BeCaseActivitiesSearchPayload,
+        BeCaseActivitiesSearchResponse
+      >(`/cases/${encodeURIComponent(caseId)}/activities/search`, payload);
+      return (response.activity ?? [])
+        .filter((a) => a.type === "field_change")
+        .map(auditEntryFromBeActivity);
+    },
+    enabled: !!caseId,
+    staleTime: 10_000,
+  });
+}
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/api/usePatchCsmCase.ts b/apps/csm-portal/webapp/src/features/csm-cases/api/usePatchCsmCase.ts
index a7188ceacd..c379f27e9d 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/api/usePatchCsmCase.ts
+++ b/apps/csm-portal/webapp/src/features/csm-cases/api/usePatchCsmCase.ts
@@ -57,6 +57,12 @@ export function usePatchCsmCase(
         queryKey: [ApiQueryKeys.CSM_CASE_DETAIL, caseId ?? ""],
       });
       queryClient.invalidateQueries({ queryKey: [ApiQueryKeys.CSM_CASES] });
+      // A state/severity/assignee/watcher patch is audited server-side, so
+      // refresh the activity/field-change lane too — otherwise the new
+      // lifecycle entry wouldn't show until the next unrelated refetch.
+      queryClient.invalidateQueries({
+        queryKey: [ApiQueryKeys.CSM_CASE_ACTIVITIES, caseId ?? ""],
+      });
     },
   });
 }
@@ -86,6 +92,9 @@ export function usePatchCsmCaseById(): (
         queryKey: [ApiQueryKeys.CSM_CASE_DETAIL, caseId],
       });
       queryClient.invalidateQueries({ queryKey: [ApiQueryKeys.CSM_CASES] });
+      queryClient.invalidateQueries({
+        queryKey: [ApiQueryKeys.CSM_CASE_ACTIVITIES, caseId],
+      });
     },
     [api, queryClient],
   );
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
new file mode 100644
index 0000000000..0843c808bd
--- /dev/null
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
@@ -0,0 +1,126 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import CaseActivitiesFeed from "@features/csm-cases/components/CaseActivitiesFeed";
+import type { CaseAuditEntry } from "@features/csm-cases/types/csmCases";
+
+describe("CaseActivitiesFeed", () => {
+  it("renders a field_change entry with old/new values", () => {
+    const entry: CaseAuditEntry = {
+      id: "fc-1",
+      kind: "field_change",
+      actor: "Jane Doe",
+      createdAt: "2026-07-01T00:00:00Z",
+      changes: [
+        {
+          field: "state",
+          fieldLabel: "State",
+          previousValue: "In Progress",
+          newValue: "Resolved",
+        },
+      ],
+    };
+
+    const { container } = render(
+      <CaseActivitiesFeed comments={[]} audit={[entry]} attachments={[]} />,
+    );
+
+    expect(screen.getByText("State:")).toBeInTheDocument();
+    // The line reads "State: Resolved was In Progress" across sibling text
+    // nodes (new value, then the struck-through old value in its own span) —
+    // assert on the row's combined text rather than a single text node.
+    expect(container.textContent).toContain("Resolved");
+    expect(container.textContent).toContain("was");
+    expect(container.textContent).toContain("In Progress");
+    expect(screen.getByText(/Jane Doe/)).toBeInTheDocument();
+  });
+
+  it("renders multiple field changes from one field_change entry", () => {
+    const entry: CaseAuditEntry = {
+      id: "fc-2",
+      kind: "field_change",
+      actor: "Jane Doe",
+      createdAt: "2026-07-01T00:00:00Z",
+      changes: [
+        {
+          field: "state",
+          fieldLabel: "State",
+          previousValue: "New",
+          newValue: "In Progress",
+        },
+        {
+          field: "assignedEngineer",
+          fieldLabel: "Assignee",
+          previousValue: undefined,
+          newValue: "John Smith",
+        },
+      ],
+    };
+
+    render(
+      <CaseActivitiesFeed comments={[]} audit={[entry]} attachments={[]} />,
+    );
+
+    expect(screen.getByText("State:")).toBeInTheDocument();
+    expect(screen.getByText("Assignee:")).toBeInTheDocument();
+    expect(screen.getByText("John Smith")).toBeInTheDocument();
+    // No previous value on the "set" change — no strike-through text for it.
+    expect(screen.queryByText("cleared")).not.toBeInTheDocument();
+  });
+
+  it("shows a cleared marker when newValue is empty", () => {
+    const entry: CaseAuditEntry = {
+      id: "fc-3",
+      kind: "field_change",
+      actor: "Jane Doe",
+      createdAt: "2026-07-01T00:00:00Z",
+      changes: [
+        {
+          field: "assignedEngineer",
+          fieldLabel: "Assignee",
+          previousValue: "John Smith",
+          newValue: undefined,
+        },
+      ],
+    };
+
+    render(
+      <CaseActivitiesFeed comments={[]} audit={[entry]} attachments={[]} />,
+    );
+
+    expect(screen.getByText("cleared")).toBeInTheDocument();
+    expect(screen.getByText("John Smith")).toBeInTheDocument();
+  });
+
+  it("falls back to description when changes is absent", () => {
+    const entry: CaseAuditEntry = {
+      id: "fc-4",
+      kind: "state_change",
+      actor: "System",
+      description: "Case moved to In Progress",
+      createdAt: "2026-07-01T00:00:00Z",
+    };
+
+    render(
+      <CaseActivitiesFeed comments={[]} audit={[entry]} attachments={[]} />,
+    );
+
+    expect(screen.getByText("Case moved to In Progress")).toBeInTheDocument();
+  });
+});
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
index b592a713be..cb0fd8992b 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
@@ -74,8 +74,40 @@ const AUDIT_ICON: Record<CaseAuditEntry["kind"], JSX.Element> = {
   attachment_added: <Paperclip size={14} />,
   sla_breached: <TriangleAlert size={14} />,
   created: <Plus size={14} />,
+  field_change: <Activity size={14} />,
 };
 
+/** One "<label>: <new> was <old>" line for a field-change entry's audit strip. */
+function FieldChangeLine({
+  field,
+}: {
+  field: { fieldLabel: string; previousValue?: string; newValue?: string };
+}): JSX.Element {
+  const hadPrevious = !!field.previousValue?.trim();
+  const hasNew = !!field.newValue?.trim();
+  return (
+    <Typography variant="body2" component="div">
+      <strong>{field.fieldLabel}:</strong>{" "}
+      {hasNew ? field.newValue : <em>cleared</em>}
+      {hadPrevious && (
+        <>
+          {" "}
+          was{" "}
+          <Box
+            component="span"
+            sx={{
+              textDecoration: "line-through",
+              color: "text.secondary",
+            }}
+          >
+            {field.previousValue}
+          </Box>
+        </>
+      )}
+    </Typography>
+  );
+}
+
 export default function CaseActivitiesFeed({
   comments,
   audit,
@@ -246,9 +278,23 @@ export default function CaseActivitiesFeed({
                     {AUDIT_ICON[e.entry.kind]}
                   </Box>
                   <Box sx={{ flex: 1, minWidth: 0, overflowWrap: "anywhere" }}>
-                    <Typography variant="body2">
-                      {e.entry.description}
-                    </Typography>
+                    {e.entry.changes && e.entry.changes.length > 0 ? (
+                      <Box
+                        sx={{
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 0.25,
+                        }}
+                      >
+                        {e.entry.changes.map((change, i) => (
+                          <FieldChangeLine key={`${change.field}-${i}`} field={change} />
+                        ))}
+                      </Box>
+                    ) : (
+                      <Typography variant="body2">
+                        {e.entry.description}
+                      </Typography>
+                    )}
                     <Typography variant="caption" color="text.secondary">
                       {e.entry.actor} ·{" "}
                       <RelativeTime
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseDetailWidgets.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseDetailWidgets.tsx
index 0b24457068..5c307974ee 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseDetailWidgets.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseDetailWidgets.tsx
@@ -778,6 +778,7 @@ const AUDIT_ICON: Record<CaseAuditEntry["kind"], JSX.Element> = {
   attachment_added: <Activity size={14} />,
   sla_breached: <TriangleAlert size={14} />,
   created: <Plus size={14} />,
+  field_change: <Activity size={14} />,
 };
 
 export function AuditTimelineWidget({
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx b/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
index 75987c9814..1cb416e340 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
@@ -60,6 +60,7 @@ import {
   usePostCsmCaseComment,
 } from "@features/csm-cases/api/useCsmCaseComments";
 import { useGetCsmConversationMessages } from "@features/csm-cases/api/useCsmConversationMessages";
+import { useGetCsmCaseActivities } from "@features/csm-cases/api/useCsmCaseActivities";
 import {
   useGetCsmCaseAttachments,
   usePostCsmCaseAttachment,
@@ -266,6 +267,10 @@ export default function CsmCaseDetailPage(): JSX.Element {
     isLoading: isCommentsLoading,
     isError: isCommentsError,
   } = useGetCsmCaseComments(caseId);
+  // Audited field/state changes (the "State changes" lifecycle lane), loaded
+  // from the dedicated activities endpoint — kept separate from the comments
+  // hook above, which is the sole source for comments/work notes.
+  const { data: activityAudit } = useGetCsmCaseActivities(caseId);
   // The chat transcript the case was spawned from, when linked. Loaded lazily
   // off the case's conversation id and merged into the comment stream below so
   // it renders as the earliest activity entries — mirrors the customer portal.
@@ -1103,7 +1108,7 @@ export default function CsmCaseDetailPage(): JSX.Element {
                 <Chip
                   size="small"
                   variant="outlined"
-                  label={`${safeComments.length + c.audit.length + attachmentList.length} entries`}
+                  label={`${safeComments.length + (activityAudit?.length ?? 0) + attachmentList.length} entries`}
                 />
               )}
             </Box>
@@ -1136,7 +1141,7 @@ export default function CsmCaseDetailPage(): JSX.Element {
                 )}
                 <CaseActivitiesFeed
                   comments={safeComments}
-                  audit={c.audit}
+                  audit={activityAudit ?? []}
                   attachments={attachmentList}
                   onDownloadAttachment={onDownloadAttachment}
                 />
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/types/csmCases.ts b/apps/csm-portal/webapp/src/features/csm-cases/types/csmCases.ts
index bdcdec12a2..5e7378018c 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/types/csmCases.ts
+++ b/apps/csm-portal/webapp/src/features/csm-cases/types/csmCases.ts
@@ -257,14 +257,29 @@ export type CaseAuditKind =
   | "comment_added"
   | "attachment_added"
   | "sla_breached"
-  | "created";
+  | "created"
+  | "field_change";
+
+/** One field changed within a single audited save-transaction. */
+export interface CaseAuditFieldChange {
+  field: string;
+  fieldLabel: string;
+  /** Absent/empty when the field was previously unset (a "set" change). */
+  previousValue?: string;
+  /** Absent/empty when the field was cleared. */
+  newValue?: string;
+}
 
 export interface CaseAuditEntry {
   id: string;
   kind: CaseAuditKind;
   actor: string;
-  description: string;
+  /** Free-text summary; used when `changes` is absent (older/synthetic entries). */
+  description?: string;
   createdAt: string;
+  /** Populated for `kind === "field_change"`: one save-transaction may touch
+   * several fields at once (e.g. state + assignee in the same update). */
+  changes?: CaseAuditFieldChange[];
 }
 
 export interface CaseCustomerContext {

From 9bbfed9b77da84456325ba8ecf91e02080f9dfdd Mon Sep 17 00:00:00 2001
From: Sajith Ekanayaka <rkskekanayaka@gmail.com>
Date: Mon, 6 Jul 2026 18:41:46 +0530
Subject: [PATCH 2/4] [CSM Portal] field-change activity entries: comment-style
 author/time header, drop duplicate timestamp, local tz

---
 .../components/CaseActivitiesFeed.test.tsx    |  89 +++++++++
 .../components/CaseActivitiesFeed.tsx         | 172 +++++++++++++-----
 2 files changed, 217 insertions(+), 44 deletions(-)

diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
index 0843c808bd..9072ea7876 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
@@ -18,6 +18,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import "@testing-library/jest-dom/vitest";
 import CaseActivitiesFeed from "@features/csm-cases/components/CaseActivitiesFeed";
+import { formatAbsoluteForUser } from "@utils/dateTime";
 import type { CaseAuditEntry } from "@features/csm-cases/types/csmCases";
 
 describe("CaseActivitiesFeed", () => {
@@ -108,6 +109,94 @@ describe("CaseActivitiesFeed", () => {
     expect(screen.getByText("John Smith")).toBeInTheDocument();
   });
 
+  it("renders a comment-style header (author + permalinked time) above the changes", () => {
+    const entry: CaseAuditEntry = {
+      id: "fc-5",
+      kind: "field_change",
+      actor: "Jane Doe",
+      createdAt: "2026-07-01T10:15:00Z",
+      changes: [
+        {
+          field: "state",
+          fieldLabel: "State",
+          previousValue: "In Progress",
+          newValue: "Resolved",
+        },
+      ],
+    };
+
+    render(
+      <CaseActivitiesFeed comments={[]} audit={[entry]} attachments={[]} />,
+    );
+
+    expect(screen.getByText("Jane Doe")).toBeInTheDocument();
+    expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+    // The time is a permalink anchor to the entry, same pattern comments use.
+    const permalink = document.querySelector(`a[href="#${entry.id}"]`);
+    expect(permalink).not.toBeNull();
+  });
+
+  it("suppresses a change line whose new value just restates the entry's own timestamp", () => {
+    const entry: CaseAuditEntry = {
+      id: "fc-6",
+      kind: "field_change",
+      actor: "Jane Doe",
+      createdAt: "2026-07-01T10:15:00Z",
+      changes: [
+        {
+          field: "state",
+          fieldLabel: "State",
+          previousValue: "In Progress",
+          newValue: "Resolved",
+        },
+        {
+          field: "resolvedAt",
+          fieldLabel: "Resolved On",
+          previousValue: undefined,
+          // Same instant as createdAt (to the minute) — this restates the
+          // header time and should be dropped.
+          newValue: "2026-07-01 10:15:22",
+        },
+      ],
+    };
+
+    render(
+      <CaseActivitiesFeed comments={[]} audit={[entry]} attachments={[]} />,
+    );
+
+    expect(screen.getByText("State:")).toBeInTheDocument();
+    expect(screen.queryByText("Resolved On:")).not.toBeInTheDocument();
+  });
+
+  it("does not suppress a timestamp change when it differs from the entry's own time", () => {
+    const entry: CaseAuditEntry = {
+      id: "fc-7",
+      kind: "field_change",
+      actor: "Jane Doe",
+      createdAt: "2026-07-01T10:15:00Z",
+      changes: [
+        {
+          field: "dueDate",
+          fieldLabel: "Due Date",
+          previousValue: undefined,
+          newValue: "2026-08-15 09:00:00",
+        },
+      ],
+    };
+
+    const { container } = render(
+      <CaseActivitiesFeed comments={[]} audit={[entry]} attachments={[]} />,
+    );
+
+    expect(screen.getByText("Due Date:")).toBeInTheDocument();
+    // The timestamp value must be routed through the shared user-timezone
+    // formatter, not shown as the raw backend string.
+    expect(screen.queryByText("2026-08-15 09:00:00")).not.toBeInTheDocument();
+    const expected = formatAbsoluteForUser("2026-08-15 09:00:00");
+    expect(expected).not.toBeNull();
+    expect(container.textContent).toContain(expected);
+  });
+
   it("falls back to description when changes is absent", () => {
     const entry: CaseAuditEntry = {
       id: "fc-4",
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
index cb0fd8992b..2f37292b0c 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
@@ -45,6 +45,10 @@ import { useMemo, useState, type JSX } from "react";
 import CsmCaseCommentBubble from "@features/csm-cases/components/CsmCaseCommentBubble";
 import RelativeTime from "@components/RelativeTime";
 import { formatBytes } from "@utils/formatBytes";
+import {
+  formatAbsoluteForUser,
+  parseBackendTimestamp,
+} from "@utils/dateTime";
 import {
   compareFeedEntries,
   type FeedEntry,
@@ -52,6 +56,7 @@ import {
 import type {
   CaseAttachment,
   CaseAuditEntry,
+  CaseAuditFieldChange,
   CsmCaseComment,
 } from "@features/csm-cases/types/csmCases";
 
@@ -77,6 +82,47 @@ const AUDIT_ICON: Record<CaseAuditEntry["kind"], JSX.Element> = {
   field_change: <Activity size={14} />,
 };
 
+// Matches the handful of backend timestamp shapes `parseBackendTimestamp`
+// understands (space-separated, "M/D/YYYY h:m:s", ISO "T"-separated). Plain
+// text values ("High", "3", "2026") must NOT match — `new Date(...)` parses
+// bare years/numbers as valid dates, which would misclassify them.
+const TIMESTAMP_VALUE_PATTERN =
+  /^(\d{4}-\d{1,2}-\d{1,2}[T ]\d{1,2}:\d{1,2}(:\d{1,2})?(\.\d+)?(Z|[+-]\d{2}:?\d{2})?|\d{1,2}\/\d{1,2}\/\d{4}\s+\d{1,2}:\d{1,2}(:\d{1,2})?)$/;
+
+/** True when `value` looks like a full date-time (not a bare number/year). */
+function isTimestampLikeValue(value: string | undefined): boolean {
+  return !!value && TIMESTAMP_VALUE_PATTERN.test(value.trim());
+}
+
+/**
+ * A change line is redundant when its new value is itself the activity's own
+ * timestamp (to the minute) — e.g. an "updated on"/"assigned on" field that
+ * always mirrors the entry's own `createdAt`. Showing it repeats the header
+ * time, so the caller drops it. Only suppressed when the previous value is
+ * either absent or also a timestamp, so a real value-to-value change is never
+ * hidden.
+ */
+function isRedundantTimestampChange(
+  change: CaseAuditFieldChange,
+  entryCreatedAt: string,
+): boolean {
+  if (!isTimestampLikeValue(change.newValue)) return false;
+  if (change.previousValue?.trim() && !isTimestampLikeValue(change.previousValue)) {
+    return false;
+  }
+  const newDate = parseBackendTimestamp(change.newValue);
+  const entryDate = parseBackendTimestamp(entryCreatedAt);
+  if (!newDate || !entryDate) return false;
+  return Math.abs(newDate.getTime() - entryDate.getTime()) < 60_000;
+}
+
+/** Renders a field's value, formatting it in the user's local timezone when
+ * it is itself a timestamp; otherwise the raw value is shown as-is. */
+function formatChangeValue(value: string | undefined): string | undefined {
+  if (!isTimestampLikeValue(value)) return value;
+  return formatAbsoluteForUser(value) ?? value;
+}
+
 /** One "<label>: <new> was <old>" line for a field-change entry's audit strip. */
 function FieldChangeLine({
   field,
@@ -88,7 +134,7 @@ function FieldChangeLine({
   return (
     <Typography variant="body2" component="div">
       <strong>{field.fieldLabel}:</strong>{" "}
-      {hasNew ? field.newValue : <em>cleared</em>}
+      {hasNew ? formatChangeValue(field.newValue) : <em>cleared</em>}
       {hadPrevious && (
         <>
           {" "}
@@ -100,7 +146,7 @@ function FieldChangeLine({
               color: "text.secondary",
             }}
           >
-            {field.previousValue}
+            {formatChangeValue(field.previousValue)}
           </Box>
         </>
       )}
@@ -254,62 +300,100 @@ export default function CaseActivitiesFeed({
             }
             if (e.kind === "audit") {
               const isBreach = e.entry.kind === "sla_breached";
+              // Drop change lines that would just restate the header's own
+              // timestamp (e.g. an "updated on" field set to this same
+              // activity time) — the header already shows it once.
+              const visibleChanges = (e.entry.changes ?? []).filter(
+                (change) =>
+                  !isRedundantTimestampChange(change, e.entry.createdAt),
+              );
               return (
-                <Paper
+                <Box
                   id={e.entry.id}
                   key={`a-${e.entry.id}`}
-                  variant="outlined"
                   sx={{
-                    p: 1,
                     display: "flex",
-                    alignItems: "center",
-                    gap: 1.25,
-                    backgroundColor: isBreach ? "error.50" : "background.default",
-                    borderColor: isBreach ? "error.main" : undefined,
+                    gap: 1.5,
+                    alignItems: "flex-start",
                     scrollMarginTop: 96,
                   }}
                 >
-                  <Box
+                  <Avatar
                     sx={{
-                      color: isBreach ? "error.main" : "text.secondary",
-                      display: "flex",
+                      width: 32,
+                      height: 32,
+                      bgcolor: isBreach ? "error.main" : "action.selected",
+                      color: isBreach ? "error.contrastText" : "text.secondary",
                     }}
                   >
                     {AUDIT_ICON[e.entry.kind]}
-                  </Box>
-                  <Box sx={{ flex: 1, minWidth: 0, overflowWrap: "anywhere" }}>
-                    {e.entry.changes && e.entry.changes.length > 0 ? (
-                      <Box
-                        sx={{
-                          display: "flex",
-                          flexDirection: "column",
-                          gap: 0.25,
-                        }}
-                      >
-                        {e.entry.changes.map((change, i) => (
-                          <FieldChangeLine key={`${change.field}-${i}`} field={change} />
-                        ))}
-                      </Box>
-                    ) : (
-                      <Typography variant="body2">
-                        {e.entry.description}
+                  </Avatar>
+                  <Paper
+                    variant="outlined"
+                    sx={{
+                      p: 1.5,
+                      flex: 1,
+                      minWidth: 0,
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 0.75,
+                      backgroundColor: isBreach ? "error.50" : undefined,
+                      borderColor: isBreach ? "error.main" : undefined,
+                    }}
+                  >
+                    {/* Header mirrors the comment bubble: actor + time up top,
+                        so a field-change entry reads the same way as a
+                        comment before the reader gets to what changed. */}
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        flexWrap: "wrap",
+                      }}
+                    >
+                      <Typography variant="subtitle2">
+                        {e.entry.actor}
                       </Typography>
-                    )}
-                    <Typography variant="caption" color="text.secondary">
-                      {e.entry.actor} ·{" "}
-                      <RelativeTime
-                        iso={e.entry.createdAt}
-                        href={`#${e.entry.id}`}
+                      <Chip
+                        size="small"
+                        variant="outlined"
+                        label="Lifecycle"
+                        color={isBreach ? "error" : "default"}
                       />
-                    </Typography>
-                  </Box>
-                  <Chip
-                    size="small"
-                    variant="outlined"
-                    label="Lifecycle"
-                    color={isBreach ? "error" : "default"}
-                  />
-                </Paper>
+                      <Typography variant="caption" color="text.secondary">
+                        <RelativeTime
+                          iso={e.entry.createdAt}
+                          href={`#${e.entry.id}`}
+                        />
+                      </Typography>
+                    </Box>
+                    <Box sx={{ minWidth: 0, overflowWrap: "anywhere" }}>
+                      {e.entry.changes && e.entry.changes.length > 0 ? (
+                        visibleChanges.length > 0 && (
+                          <Box
+                            sx={{
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: 0.25,
+                            }}
+                          >
+                            {visibleChanges.map((change, i) => (
+                              <FieldChangeLine
+                                key={`${change.field}-${i}`}
+                                field={change}
+                              />
+                            ))}
+                          </Box>
+                        )
+                      ) : (
+                        <Typography variant="body2">
+                          {e.entry.description}
+                        </Typography>
+                      )}
+                    </Box>
+                  </Paper>
+                </Box>
               );
             }
             // attachment — rendered like a comment: avatar + card carrying the

From 37a3853d7e67559cfb4ed327807d8a19c5323baa Mon Sep 17 00:00:00 2001
From: Sajith Ekanayaka <rkskekanayaka@gmail.com>
Date: Mon, 6 Jul 2026 18:49:57 +0530
Subject: [PATCH 3/4] [CSM Portal] activity field-change entries: render all
 backend-provided changes (field curation moved to backend)

---
 .../components/CaseActivitiesFeed.test.tsx    |  8 +--
 .../components/CaseActivitiesFeed.tsx         | 65 +++++--------------
 2 files changed, 19 insertions(+), 54 deletions(-)

diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
index 9072ea7876..c7199b5f2a 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
@@ -136,7 +136,7 @@ describe("CaseActivitiesFeed", () => {
     expect(permalink).not.toBeNull();
   });
 
-  it("suppresses a change line whose new value just restates the entry's own timestamp", () => {
+  it("renders every backend-provided change line, even one matching the entry's own timestamp", () => {
     const entry: CaseAuditEntry = {
       id: "fc-6",
       kind: "field_change",
@@ -153,8 +153,8 @@ describe("CaseActivitiesFeed", () => {
           field: "resolvedAt",
           fieldLabel: "Resolved On",
           previousValue: undefined,
-          // Same instant as createdAt (to the minute) — this restates the
-          // header time and should be dropped.
+          // Field-level curation is a backend concern now — the FE renders
+          // whatever `changes[]` it receives, with no client-side dropping.
           newValue: "2026-07-01 10:15:22",
         },
       ],
@@ -165,7 +165,7 @@ describe("CaseActivitiesFeed", () => {
     );
 
     expect(screen.getByText("State:")).toBeInTheDocument();
-    expect(screen.queryByText("Resolved On:")).not.toBeInTheDocument();
+    expect(screen.getByText("Resolved On:")).toBeInTheDocument();
   });
 
   it("does not suppress a timestamp change when it differs from the entry's own time", () => {
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
index 2f37292b0c..3e0c02e074 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
@@ -45,10 +45,7 @@ import { useMemo, useState, type JSX } from "react";
 import CsmCaseCommentBubble from "@features/csm-cases/components/CsmCaseCommentBubble";
 import RelativeTime from "@components/RelativeTime";
 import { formatBytes } from "@utils/formatBytes";
-import {
-  formatAbsoluteForUser,
-  parseBackendTimestamp,
-} from "@utils/dateTime";
+import { formatAbsoluteForUser } from "@utils/dateTime";
 import {
   compareFeedEntries,
   type FeedEntry,
@@ -56,7 +53,6 @@ import {
 import type {
   CaseAttachment,
   CaseAuditEntry,
-  CaseAuditFieldChange,
   CsmCaseComment,
 } from "@features/csm-cases/types/csmCases";
 
@@ -94,28 +90,6 @@ function isTimestampLikeValue(value: string | undefined): boolean {
   return !!value && TIMESTAMP_VALUE_PATTERN.test(value.trim());
 }
 
-/**
- * A change line is redundant when its new value is itself the activity's own
- * timestamp (to the minute) — e.g. an "updated on"/"assigned on" field that
- * always mirrors the entry's own `createdAt`. Showing it repeats the header
- * time, so the caller drops it. Only suppressed when the previous value is
- * either absent or also a timestamp, so a real value-to-value change is never
- * hidden.
- */
-function isRedundantTimestampChange(
-  change: CaseAuditFieldChange,
-  entryCreatedAt: string,
-): boolean {
-  if (!isTimestampLikeValue(change.newValue)) return false;
-  if (change.previousValue?.trim() && !isTimestampLikeValue(change.previousValue)) {
-    return false;
-  }
-  const newDate = parseBackendTimestamp(change.newValue);
-  const entryDate = parseBackendTimestamp(entryCreatedAt);
-  if (!newDate || !entryDate) return false;
-  return Math.abs(newDate.getTime() - entryDate.getTime()) < 60_000;
-}
-
 /** Renders a field's value, formatting it in the user's local timezone when
  * it is itself a timestamp; otherwise the raw value is shown as-is. */
 function formatChangeValue(value: string | undefined): string | undefined {
@@ -300,13 +274,6 @@ export default function CaseActivitiesFeed({
             }
             if (e.kind === "audit") {
               const isBreach = e.entry.kind === "sla_breached";
-              // Drop change lines that would just restate the header's own
-              // timestamp (e.g. an "updated on" field set to this same
-              // activity time) — the header already shows it once.
-              const visibleChanges = (e.entry.changes ?? []).filter(
-                (change) =>
-                  !isRedundantTimestampChange(change, e.entry.createdAt),
-              );
               return (
                 <Box
                   id={e.entry.id}
@@ -370,22 +337,20 @@ export default function CaseActivitiesFeed({
                     </Box>
                     <Box sx={{ minWidth: 0, overflowWrap: "anywhere" }}>
                       {e.entry.changes && e.entry.changes.length > 0 ? (
-                        visibleChanges.length > 0 && (
-                          <Box
-                            sx={{
-                              display: "flex",
-                              flexDirection: "column",
-                              gap: 0.25,
-                            }}
-                          >
-                            {visibleChanges.map((change, i) => (
-                              <FieldChangeLine
-                                key={`${change.field}-${i}`}
-                                field={change}
-                              />
-                            ))}
-                          </Box>
-                        )
+                        <Box
+                          sx={{
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 0.25,
+                          }}
+                        >
+                          {e.entry.changes.map((change, i) => (
+                            <FieldChangeLine
+                              key={`${change.field}-${i}`}
+                              field={change}
+                            />
+                          ))}
+                        </Box>
                       ) : (
                         <Typography variant="body2">
                           {e.entry.description}

From cc48b13234a2dc475f19b1bc4db79a7704cf31c0 Mon Sep 17 00:00:00 2001
From: Sajith Ekanayaka <rkskekanayaka@gmail.com>
Date: Mon, 6 Jul 2026 19:08:50 +0530
Subject: [PATCH 4/4] [CSM Portal] surface load/error state for case activities
 fetch

---
 .../csm-cases/pages/CsmCaseDetailPage.tsx     | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx b/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
index 1cb416e340..b7c36f59ed 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
@@ -270,7 +270,11 @@ export default function CsmCaseDetailPage(): JSX.Element {
   // Audited field/state changes (the "State changes" lifecycle lane), loaded
   // from the dedicated activities endpoint — kept separate from the comments
   // hook above, which is the sole source for comments/work notes.
-  const { data: activityAudit } = useGetCsmCaseActivities(caseId);
+  const {
+    data: activityAudit,
+    isLoading: isActivityLoading,
+    isError: isActivityError,
+  } = useGetCsmCaseActivities(caseId);
   // The chat transcript the case was spawned from, when linked. Loaded lazily
   // off the case's conversation id and merged into the comment stream below so
   // it renders as the earliest activity entries — mirrors the customer portal.
@@ -1113,9 +1117,9 @@ export default function CsmCaseDetailPage(): JSX.Element {
               )}
             </Box>
 
-            {isCommentsLoading || isChatLoading ? (
-              // Wait for both the comments and the linked chat transcript so the
-              // transcript doesn't pop into an already-rendered timeline.
+            {isCommentsLoading || isChatLoading || isActivityLoading ? (
+              // Wait for the comments, linked chat transcript, and activity
+              // audit so nothing pops into an already-rendered timeline.
               // isChatLoading is false for chat-less cases (query disabled).
               <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                 {[0, 1, 2].map((i) => (
@@ -1123,8 +1127,8 @@ export default function CsmCaseDetailPage(): JSX.Element {
                 ))}
               </Box>
             ) : (
-              // A comments/chat failure shouldn't blank the timeline — the
-              // description, audit, and attachments loaded fine. Show them with
+              // A comments/chat/activity failure shouldn't blank the timeline —
+              // the description and whatever else loaded fine. Show them with
               // an inline notice.
               <>
                 {isCommentsError && (
@@ -1139,6 +1143,12 @@ export default function CsmCaseDetailPage(): JSX.Element {
                     activity — reload to try again.
                   </Typography>
                 )}
+                {isActivityError && (
+                  <Typography variant="body2" color="error">
+                    Could not load state changes. Showing the rest of the
+                    activity — reload to try again.
+                  </Typography>
+                )}
                 <CaseActivitiesFeed
                   comments={safeComments}
                   audit={activityAudit ?? []}