blixify-ui-web-mcp 0.1.37 → 0.1.38

package/lib/components/data/dataTemplate/README.md

@@ -626,7 +626,47 @@ Use `organise.additionalQuery` to add filter controls above the list. Each entry
 
 ### With activity log (comments + audit trail)
 
-Enable `edit.activityLog` to show a comments panel and a change-log timeline in the read view.
+Enable `edit.activityLog` to open the activity panel from list and read views. It uses the new feeds and pagination UI, an inline comment composer, editable comments, confirmed deletion, and before/after audit values. It follows `organise.darkMode`, including when opened from a legacy table.
+
+In the modern table (`bareNewDTW`), the outlined chat bubble at the right of the first visible column opens that data's Comments first without navigating away. The column is pinned by default when no left pins are configured; mobile cards put the icon beside the title. Read views use the same outlined chat bubble with an accessible Comments and activity label. The collection-wide clock opens Logs first. Both entry points retain both enabled tabs, falling back to the available tab if only one is enabled.
+
+Audit entries summarize the actor and number of changed fields, with a compact Field / Before / After comparison. Only three changed fields show initially; use Show all changes for the rest and Show more for long values.
+
+Collection-wide activity is labelled **All data** and has a searchable **Filter by data** picker (searches data titles with a 400 ms debounce, up to 20 matches). It filters both comments and logs. Every entry displays its parent record title; click it to open the record. The row-specific modal header also shows the title. Missing/deleted/inaccessible records retain an ID fallback without a navigation link; collection-level comments are labelled Collection discussion. Posting while a data filter is selected attaches the comment to that record.
+
+Use `edit.activityLog.recordTitleColumn` to choose the title/search field. Otherwise DTW uses `organise.breadcrumbAttributeId`, a `title`/`name` field, or the first string field. Title lookups and searches use the parent collection's connection, credentials and `bareListFilterQuery` scope. Backend authorization still governs access. A pending draft prompts before switching record scope; pending notification retries disable that switch.
+
+Mention choices come from the existing `devSettings.organisationMembers` (`{ key, label, secondaryLabel? }[]`). Type `@` and select a person by keyboard or touch. A manually typed name does not identify a recipient. Old comments display without migration.
+
+Comments retain `comment`, `userId`, `collectionId`, `itemId`, and `createdAt`. New comments additionally store `mentions` (`{ userId, label, start, end }[]`) and `mentionedUserIds`. Editing preserves the original author and creation time and adds `updatedAt`. Offsets refer to the saved comment string; editing away a selected mention removes that identity.
+
+To send pings, provide `edit.activityLog.onMention`. It runs **after a successful save**, for newly mentioned users excluding the current user. Without it, mentions are saved but notifications are not sent. The consuming app owns delivery and record links:
+
+```tsx
+devSettings={{
+  organisationMembers: [
+    { key: "user-1", label: "Alex Morgan" },
+    { key: "user-2", label: "Sam Lee", secondaryLabel: "Design" },
+  ],
+}}
+edit={{
+  activityLog: {
+    enableComments: true,
+    commentCollectionId: "tasks-comments",
+    enableLogs: true,
+    logsCollectionId: "tasks-logs",
+    currentUserId: "user-1",
+    onMention: async (event) => {
+      // Your authenticated notification integration. Throw if delivery fails.
+      await sendCommentNotifications(event);
+    },
+  },
+}}
+```
+
+`ActivityMentionEvent` is exported from `data/dataTemplate/dataStateModel`. It contains `commentId`, `commentCollectionId`, `collectionId`, `itemId`, `comment`, `userId`, and `mentionedUserIds`. A failed callback displays a retry action that repeats only notification delivery, never the comment write. The handler must be idempotent per comment ID and recipient, validate recipients' access server-side, and use trusted server-side identity. UI props and mention IDs are not an authorization boundary. Existing backend access controls continue to govern comment creation, editing, and deletion.
+
+The panel keeps DataTemplateWrapper for fetching and paging, and uses the shared WriteQuery transport for composer mutations, forwarding configured API and user tokens. Custom comment-collection schemas must accept the added mention fields. No notification endpoint is assumed by the library.
 
 ```tsx
 <DataTemplate
@@ -973,6 +1013,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `logQuery`            | `Query[]` | Additional queries to filter logs                                                                 |
 | `userAPIEndpoint`     | `string`  | URL returning `{ data: { name: string, ...rest } }` — used to resolve user names in comments/logs |
 | `currentUserId`       | `string`  | Current user's record ID — required when `enableComments` is `true`                               |
+| `onMention` | `(event: ActivityMentionEvent) => void \| Promise<void>` | Optional notification handoff after saving; rejects to show a notification-only retry |
 
 ### Organise
 

package/lib/components/data/dataTemplate/activityModal.stories.tsx

@@ -0,0 +1,267 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { ActivityModal } from "./activityModal";
+import { DataStructure, DevSettings } from "./model";
+import { DataTemplateWrapper } from "../dataWrapper";
+import { ActivityLog } from "./dataStateModel";
+import { handleApplyStoryQueries } from "../dataWrapper/storyBackend.fixtures";
+
+const meta = { title: "Data/Activity Panel" };
+export default meta;
+
+const settings: DevSettings = {
+  server: "mongoServer",
+  dbEndpoint: "https://activity.blixify.invalid/data",
+  dbAPIToken: "",
+  dbUserToken: "",
+  schemaEndpoint: "",
+  imageEndpoint: "",
+  organisationMembers: [
+    { key: "alex", label: "Alex Morgan", secondaryLabel: "Product" },
+    { key: "sam", label: "Sam Lee", secondaryLabel: "Design" },
+    { key: "jordan", label: "Jordan Rivera", secondaryLabel: "Engineering" },
+  ],
+};
+
+const taskSchema: DataStructure[] = [
+  { id: "title", name: "Task", type: "string" },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: ["In progress", "In review", "Done"],
+    listSelectionColour: ["blue", "yellow", "green"],
+  },
+  { id: "owner", name: "Owner", type: "person" },
+];
+
+const ActivityDemo = ({
+  darkMode = false,
+  logsOnly = false,
+  integrated = false,
+}: {
+  darkMode?: boolean;
+  logsOnly?: boolean;
+  integrated?: boolean;
+}) => {
+  const [ready, setReady] = useState(false);
+  const [failPings, setFailPings] = useState(false);
+  const [recipients, setRecipients] = useState("");
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState("");
+  useEffect(() => {
+    const rows: Record<string, any[]> = {
+      tasks: [
+        {
+          _id: "task-1",
+          title: "Review activity panel",
+          status: "In review",
+          owner: "sam",
+        },
+        {
+          _id: "task-2",
+          title: "Check mobile layout",
+          status: "In progress",
+          owner: "jordan",
+        },
+      ],
+      "tasks-comments": [
+        {
+          _id: "comment-mobile",
+          collectionId: "tasks",
+          itemId: "task-2",
+          userId: "jordan",
+          comment: "Please check this task on your phone.",
+          createdAt: "2026-09-28T09:00:00Z",
+        },
+        {
+          _id: "comment-1",
+          collectionId: "tasks",
+          itemId: "task-1",
+          userId: "sam",
+          comment:
+            "The updated layout is ready for review.\nThe mobile view keeps the composer within reach.",
+          createdAt: "2026-09-28T10:30:00Z",
+        },
+        {
+          _id: "comment-2",
+          collectionId: "tasks",
+          itemId: "task-1",
+          userId: "alex",
+          comment: "Thanks @Sam Lee — I will check the spacing today.",
+          mentions: [{ userId: "sam", label: "Sam Lee", start: 7, end: 15 }],
+          mentionedUserIds: ["sam"],
+          createdAt: "2026-09-28T11:00:00Z",
+        },
+      ],
+      "tasks-logs": [
+        {
+          _id: "log-1",
+          collectionId: "tasks",
+          itemId: "task-1",
+          userId: "alex",
+          type: "update",
+          createdAt: "2026-09-28T11:05:00Z",
+          values: [
+            {
+              columnId: "status",
+              oldValue: "In progress",
+              newValue: "In review",
+            },
+            { columnId: "priority", oldValue: "Normal", newValue: "High" },
+            { columnId: "owner", oldValue: "Alex Morgan", newValue: "Sam Lee" },
+            {
+              columnId: "notes",
+              oldValue: "Review pending",
+              newValue: "The activity panel is ready for review. ".repeat(12),
+            },
+            {
+              columnId: "dueDate",
+              oldValue: "2026-09-29",
+              newValue: "2026-09-30",
+            },
+          ],
+        },
+        {
+          _id: "log-2",
+          collectionId: "tasks",
+          itemId: "task-1",
+          userId: "jordan",
+          type: "create",
+          createdAt: "2026-09-27T09:00:00Z",
+          values: [{ columnId: "title", newValue: "Review activity panel" }],
+        },
+      ],
+    };
+    const mock = new MockAdapter(axios);
+    mock
+      .onPost(/^https:\/\/activity\.blixify\.invalid\/data\//)
+      .reply((request) => {
+        const [collection, action] = request.url!.split("/").slice(-2);
+        const body = JSON.parse(request.data);
+        if (action === "get")
+          return [
+            200,
+            { data: rows[collection].find((row) => row._id === body.id) },
+          ];
+        if (action === "list") {
+          const data = handleApplyStoryQueries(
+            rows[collection] ?? [],
+            body.query,
+          ).sort((a, b) =>
+            String(b.createdAt ?? "").localeCompare(String(a.createdAt ?? "")),
+          );
+          return [
+            200,
+            {
+              data: data.slice(
+                body.cursor ?? 0,
+                (body.cursor ?? 0) + (body.limit ?? 10),
+              ),
+              count: data.length,
+            },
+          ];
+        }
+        if (action === "create") rows[collection].push(body.data);
+        if (action === "update")
+          rows[collection] = rows[collection].map((row) =>
+            row._id === body.id ? { ...row, ...body.data } : row,
+          );
+        if (action === "delete")
+          rows[collection] = rows[collection].filter(
+            (row) => row._id !== body.id,
+          );
+        return [200, { success: true }];
+      });
+    setReady(true);
+    return () => mock.restore();
+  }, []);
+  const activityLog: ActivityLog = {
+    enableComments: !logsOnly,
+    commentCollectionId: "tasks-comments",
+    enableLogs: true,
+    logsCollectionId: "tasks-logs",
+    currentUserId: "alex",
+    onMention: async (event) => {
+      if (failPings) throw new Error("Demo notification failure");
+      setRecipients(event.mentionedUserIds.join(", "));
+    },
+  };
+  return (
+    <div
+      className={`mx-auto max-w-3xl rounded-2xl p-3 sm:p-6 ${darkMode ? "bg-gray-900 text-gray-100" : "bg-gray-50 text-gray-800"}`}
+    >
+      <h1 className="mb-4 text-lg font-semibold">
+        {integrated
+          ? "DTW · Tasks with comments"
+          : "Activity · Review activity panel"}
+      </h1>
+      {integrated && (
+        <p className="mb-4 text-sm text-gray-500">
+          Click the chat icon beside a task for its comments and audit history,
+          or open the task and click its chat bubble. The list clock opens logs first. Tasks have separate conversations. All
+          data and notifications are simulated; refreshing resets the demo.
+          Audit entries are seeded examples.
+        </p>
+      )}
+      {!logsOnly && (
+        <label className="mb-4 flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            checked={failPings}
+            onChange={(event) => setFailPings(event.target.checked)}
+          />
+          Simulate notification failure
+        </label>
+      )}
+      {recipients && (
+        <p role="status" className="mb-3 text-sm">
+          Demo notification recipients: {recipients}
+        </p>
+      )}
+      {ready &&
+        (integrated ? (
+          <DataTemplateWrapper
+            title="Tasks"
+            type={viewType}
+            id={selectedId}
+            collectionId="tasks"
+            schema={taskSchema}
+            workspace={{
+              apiEndpoint: settings.dbEndpoint,
+              apiEndpointType: "mongoDB",
+            }}
+            devSettings={settings}
+            edit={{
+              allEditable: false,
+              createBtn: false,
+              deleteBtn: false,
+              disabledUpdate: true,
+              activityLog,
+            }}
+            bareSettings={{ bareNewDTW: true, bareOffline: false }}
+            organise={{ breadcrumbType: "button", darkMode }}
+            handleNavigate={(type, id) => {
+              setViewType(type as "list" | "read" | "update");
+              setSelectedId(id ?? "");
+            }}
+          />
+        ) : (
+          <ActivityModal
+            title="Tasks"
+            collectionId="tasks"
+            dataId="task-1"
+            devSettings={settings}
+            darkMode={darkMode}
+            activityLog={activityLog}
+          />
+        ))}
+    </div>
+  );
+};
+
+export const CommentsAndLogs = () => <ActivityDemo />;
+export const DarkMode = () => <ActivityDemo darkMode />;
+export const LogsOnly = () => <ActivityDemo logsOnly />;
+export const WithDataTemplateWrapper = () => <ActivityDemo integrated />;

package/lib/components/display/newTable/README.md

@@ -2,6 +2,10 @@
 
 Tabular display with a List-shaped mobile breakpoint. The architectural key: **`mobileView=true` delegates row rendering to `NewListRow`**, so the same tap-rhythm and avatar/title/trailing geometry shows up across NewList, NewFeeds, and NewTable mobile.
 
+## Row activity
+
+Pass `onRowActivity={(id) => ...}` to show a keyboard-accessible chat button at the right of the first visible cell (beside the title on mobile cards). It stops row navigation and does not enter inline editing. When no left pins are configured, the first ungrouped column is pinned automatically; existing pin configurations are preserved. DTW wires this callback automatically when `edit.activityLog` is enabled with `bareNewDTW`.
+
 ## Mobile column flags
 
 Columns expose three optional booleans that map them to the `NewListItem` shape:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {