From f2c7836f07c50f3fe0ca0bd8f4565ead3211832a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Feb 2026 14:17:05 +0000
Subject: [PATCH 1/3] Initial plan


From 4572df1a2efddbd01784a07e6f6505b49118a76b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Feb 2026 14:26:47 +0000
Subject: [PATCH 2/3] feat: add Airtable-style Comments & Activity Timeline
 components (P0/P1/P2)

- Add FeedItem, FieldChangeEntry, Mention, Reaction, RecordSubscription types
- Add RecordActivityTimeline component with unified timeline, filtering, pagination
- Add RecordChatterPanel component with sidebar/inline/drawer modes
- Add CommentInput component
- Add FieldChangeItem component for field change history
- Add MentionAutocomplete component for @mention suggestions
- Add SubscriptionToggle component for bell notification toggle
- Add ReactionPicker component for emoji reactions
- Add ThreadedReplies component for comment threading
- Add comprehensive tests (67 new tests, 185 total passing)

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/plugin-detail/src/CommentInput.tsx   |  81 ++++
 .../plugin-detail/src/FieldChangeItem.tsx     |  46 ++
 .../plugin-detail/src/MentionAutocomplete.tsx | 123 +++++
 packages/plugin-detail/src/ReactionPicker.tsx | 106 +++++
 .../src/RecordActivityTimeline.tsx            | 424 ++++++++++++++++++
 .../plugin-detail/src/RecordChatterPanel.tsx  | 202 +++++++++
 .../plugin-detail/src/SubscriptionToggle.tsx  |  60 +++
 .../plugin-detail/src/ThreadedReplies.tsx     | 161 +++++++
 .../src/__tests__/CommentInput.test.tsx       |  57 +++
 .../src/__tests__/FieldChangeItem.test.tsx    |  72 +++
 .../__tests__/MentionAutocomplete.test.tsx    |  97 ++++
 .../src/__tests__/ReactionPicker.test.tsx     |  69 +++
 .../__tests__/RecordActivityTimeline.test.tsx | 209 +++++++++
 .../src/__tests__/RecordChatterPanel.test.tsx | 129 ++++++
 .../src/__tests__/SubscriptionToggle.test.tsx |  51 +++
 .../src/__tests__/ThreadedReplies.test.tsx    | 108 +++++
 packages/plugin-detail/src/index.tsx          |  16 +
 packages/types/src/index.ts                   |   7 +
 packages/types/src/views.ts                   | 113 +++++
 19 files changed, 2131 insertions(+)
 create mode 100644 packages/plugin-detail/src/CommentInput.tsx
 create mode 100644 packages/plugin-detail/src/FieldChangeItem.tsx
 create mode 100644 packages/plugin-detail/src/MentionAutocomplete.tsx
 create mode 100644 packages/plugin-detail/src/ReactionPicker.tsx
 create mode 100644 packages/plugin-detail/src/RecordActivityTimeline.tsx
 create mode 100644 packages/plugin-detail/src/RecordChatterPanel.tsx
 create mode 100644 packages/plugin-detail/src/SubscriptionToggle.tsx
 create mode 100644 packages/plugin-detail/src/ThreadedReplies.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/CommentInput.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/FieldChangeItem.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/MentionAutocomplete.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/ReactionPicker.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/RecordActivityTimeline.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/RecordChatterPanel.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/SubscriptionToggle.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/ThreadedReplies.test.tsx

diff --git a/packages/plugin-detail/src/CommentInput.tsx b/packages/plugin-detail/src/CommentInput.tsx
new file mode 100644
index 000000000..e3329c825
--- /dev/null
+++ b/packages/plugin-detail/src/CommentInput.tsx
@@ -0,0 +1,81 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { Send } from 'lucide-react';
+
+export interface CommentInputProps {
+  /** Called when a comment is submitted */
+  onSubmit: (text: string) => void | Promise<void>;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * CommentInput — Simple comment input component.
+ * Renders a "Leave a comment" textarea with submit button.
+ * Supports Ctrl+Enter to submit.
+ */
+export const CommentInput: React.FC<CommentInputProps> = ({
+  onSubmit,
+  placeholder = 'Leave a comment…',
+  disabled = false,
+  className,
+}) => {
+  const [text, setText] = React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = React.useCallback(async () => {
+    const value = text.trim();
+    if (!value) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(value);
+      setText('');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [text, onSubmit]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  return (
+    <div className={cn('flex gap-2', className)}>
+      <textarea
+        className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+        placeholder={placeholder}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled || isSubmitting}
+      />
+      <Button
+        size="icon"
+        variant="default"
+        onClick={handleSubmit}
+        disabled={!text.trim() || isSubmitting || disabled}
+        className="shrink-0 self-end"
+        aria-label="Submit comment"
+      >
+        <Send className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};
diff --git a/packages/plugin-detail/src/FieldChangeItem.tsx b/packages/plugin-detail/src/FieldChangeItem.tsx
new file mode 100644
index 000000000..92584f3e4
--- /dev/null
+++ b/packages/plugin-detail/src/FieldChangeItem.tsx
@@ -0,0 +1,46 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn } from '@object-ui/components';
+import { ArrowRight } from 'lucide-react';
+import type { FieldChangeEntry } from '@object-ui/types';
+
+export interface FieldChangeItemProps {
+  /** The field change entry to render */
+  change: FieldChangeEntry;
+  className?: string;
+}
+
+/**
+ * FieldChangeItem — Renders a single field change entry.
+ * Shows: field label → old value → new value with human-readable display values.
+ * Aligned with @objectstack/spec FieldChangeEntrySchema.
+ */
+export const FieldChangeItem: React.FC<FieldChangeItemProps> = ({
+  change,
+  className,
+}) => {
+  const label =
+    change.fieldLabel ??
+    change.field.charAt(0).toUpperCase() + change.field.slice(1).replace(/_/g, ' ');
+
+  const oldDisplay =
+    change.oldDisplayValue ?? (change.oldValue != null ? String(change.oldValue) : '(empty)');
+  const newDisplay =
+    change.newDisplayValue ?? (change.newValue != null ? String(change.newValue) : '(empty)');
+
+  return (
+    <div className={cn('flex items-center gap-1.5 text-sm flex-wrap', className)}>
+      <span className="font-medium text-foreground">{label}</span>
+      <span className="text-muted-foreground line-through">{oldDisplay}</span>
+      <ArrowRight className="h-3 w-3 text-muted-foreground shrink-0" />
+      <span className="text-foreground">{newDisplay}</span>
+    </div>
+  );
+};
diff --git a/packages/plugin-detail/src/MentionAutocomplete.tsx b/packages/plugin-detail/src/MentionAutocomplete.tsx
new file mode 100644
index 000000000..ae9f3c5a5
--- /dev/null
+++ b/packages/plugin-detail/src/MentionAutocomplete.tsx
@@ -0,0 +1,123 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn } from '@object-ui/components';
+import type { Mention } from '@object-ui/types';
+
+export interface MentionSuggestionItem {
+  /** Entity ID */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Avatar URL */
+  avatarUrl?: string;
+  /** Entity type */
+  type: 'user' | 'team' | 'group';
+}
+
+export interface MentionAutocompleteProps {
+  /** Search query (text after @) */
+  query: string;
+  /** Available suggestions */
+  suggestions: MentionSuggestionItem[];
+  /** Called when a suggestion is selected */
+  onSelect: (item: MentionSuggestionItem) => void;
+  /** Whether the dropdown is visible */
+  visible?: boolean;
+  /** Active/highlighted index */
+  activeIndex?: number;
+  className?: string;
+}
+
+/**
+ * MentionAutocomplete — Dropdown for @mention autocomplete.
+ * Filters suggestions by query and renders a selectable list.
+ * Produces MentionSchema data on selection.
+ */
+export const MentionAutocomplete: React.FC<MentionAutocompleteProps> = ({
+  query,
+  suggestions,
+  onSelect,
+  visible = true,
+  activeIndex = 0,
+  className,
+}) => {
+  const filtered = React.useMemo(() => {
+    if (!query) return suggestions;
+    const q = query.toLowerCase();
+    return suggestions.filter(
+      (s) => s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q),
+    );
+  }, [query, suggestions]);
+
+  if (!visible || filtered.length === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        'bg-popover border rounded-md shadow-md z-50 max-h-48 overflow-y-auto w-56',
+        className,
+      )}
+      role="listbox"
+      aria-label="Mention suggestions"
+    >
+      {filtered.map((item, index) => (
+        <button
+          key={item.id}
+          type="button"
+          role="option"
+          aria-selected={index === activeIndex}
+          className={cn(
+            'w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 hover:bg-accent transition-colors',
+            index === activeIndex && 'bg-accent',
+          )}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            onSelect(item);
+          }}
+        >
+          {item.avatarUrl ? (
+            <img
+              src={item.avatarUrl}
+              alt={item.name}
+              className="h-5 w-5 rounded-full object-cover"
+            />
+          ) : (
+            <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium">
+              {item.name.charAt(0).toUpperCase()}
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <span className="truncate">{item.name}</span>
+            {item.type !== 'user' && (
+              <span className="ml-1 text-xs text-muted-foreground capitalize">({item.type})</span>
+            )}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Helper to create a Mention object from a suggestion item.
+ */
+export function createMentionFromSuggestion(
+  item: MentionSuggestionItem,
+  offset: number,
+  length: number,
+): Mention {
+  return {
+    type: item.type,
+    id: item.id,
+    name: item.name,
+    offset,
+    length,
+  };
+}
diff --git a/packages/plugin-detail/src/ReactionPicker.tsx b/packages/plugin-detail/src/ReactionPicker.tsx
new file mode 100644
index 000000000..36da80c57
--- /dev/null
+++ b/packages/plugin-detail/src/ReactionPicker.tsx
@@ -0,0 +1,106 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { SmilePlus } from 'lucide-react';
+import type { Reaction } from '@object-ui/types';
+
+const DEFAULT_EMOJI_OPTIONS = ['👍', '❤️', '🎉', '😂', '😮', '😢'];
+
+export interface ReactionPickerProps {
+  /** Existing reactions on the feed item */
+  reactions: Reaction[];
+  /** Called when user adds or removes a reaction */
+  onToggleReaction?: (emoji: string) => void | Promise<void>;
+  /** Available emoji options */
+  emojiOptions?: string[];
+  className?: string;
+}
+
+/**
+ * ReactionPicker — Emoji reaction selector and display.
+ * Shows existing reactions with counts, and a picker to add/remove.
+ * Aligned with @objectstack/spec ReactionSchema.
+ */
+export const ReactionPicker: React.FC<ReactionPickerProps> = ({
+  reactions,
+  onToggleReaction,
+  emojiOptions = DEFAULT_EMOJI_OPTIONS,
+  className,
+}) => {
+  const [showPicker, setShowPicker] = React.useState(false);
+
+  const handleReaction = React.useCallback(
+    (emoji: string) => {
+      onToggleReaction?.(emoji);
+      setShowPicker(false);
+    },
+    [onToggleReaction],
+  );
+
+  return (
+    <div className={cn('flex items-center gap-1 flex-wrap', className)}>
+      {/* Existing reactions */}
+      {reactions.map((reaction) => (
+        <button
+          key={reaction.emoji}
+          type="button"
+          className={cn(
+            'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs border transition-colors',
+            reaction.reacted
+              ? 'bg-primary/10 border-primary/30 text-primary'
+              : 'bg-muted border-border text-muted-foreground hover:bg-muted/80',
+          )}
+          onClick={() => handleReaction(reaction.emoji)}
+          disabled={!onToggleReaction}
+          aria-label={`${reaction.emoji} ${reaction.count} reaction${reaction.count !== 1 ? 's' : ''}`}
+        >
+          <span>{reaction.emoji}</span>
+          <span>{reaction.count}</span>
+        </button>
+      ))}
+
+      {/* Add reaction button */}
+      {onToggleReaction && (
+        <div className="relative">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setShowPicker(!showPicker)}
+            aria-label="Add reaction"
+          >
+            <SmilePlus className="h-3.5 w-3.5" />
+          </Button>
+
+          {showPicker && (
+            <div
+              className="absolute bottom-full mb-1 left-0 bg-popover border rounded-md shadow-md z-50 p-1.5 flex gap-1"
+              role="listbox"
+              aria-label="Emoji picker"
+            >
+              {emojiOptions.map((emoji) => (
+                <button
+                  key={emoji}
+                  type="button"
+                  className="hover:bg-accent rounded p-1 text-base transition-colors"
+                  onClick={() => handleReaction(emoji)}
+                  role="option"
+                  aria-selected={reactions.some(r => r.emoji === emoji && r.reacted)}
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/plugin-detail/src/RecordActivityTimeline.tsx b/packages/plugin-detail/src/RecordActivityTimeline.tsx
new file mode 100644
index 000000000..695efbbc5
--- /dev/null
+++ b/packages/plugin-detail/src/RecordActivityTimeline.tsx
@@ -0,0 +1,424 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
+import {
+  Activity,
+  Edit,
+  PlusCircle,
+  Trash2,
+  MessageSquare,
+  ArrowRightLeft,
+  Calendar,
+  CheckSquare,
+  Zap,
+  Mail,
+  Phone,
+  ChevronDown,
+  Loader2,
+} from 'lucide-react';
+import type { FeedItem, FeedItemType, RecordActivityComponentProps, RecordSubscription } from '@object-ui/types';
+import { FieldChangeItem } from './FieldChangeItem';
+import { ReactionPicker } from './ReactionPicker';
+import { ThreadedReplies } from './ThreadedReplies';
+import { SubscriptionToggle } from './SubscriptionToggle';
+
+export type FeedFilterMode = 'all' | 'comments_only' | 'changes_only' | 'tasks_only';
+
+export interface RecordActivityTimelineProps {
+  /** Feed items to display */
+  items: FeedItem[];
+  /** Activity configuration from RecordActivityComponentProps */
+  config?: RecordActivityComponentProps;
+  /** Filter mode for the timeline */
+  filterMode?: FeedFilterMode;
+  /** Called when filter mode changes */
+  onFilterChange?: (mode: FeedFilterMode) => void;
+  /** Whether there are more items to load */
+  hasMore?: boolean;
+  /** Called when user wants to load more items */
+  onLoadMore?: () => void | Promise<void>;
+  /** Loading state */
+  loading?: boolean;
+  /** Called when a comment is submitted */
+  onAddComment?: (text: string) => void | Promise<void>;
+  /** Called when a reply is submitted */
+  onAddReply?: (parentId: string | number, text: string) => void | Promise<void>;
+  /** Called when user toggles a reaction */
+  onToggleReaction?: (itemId: string | number, emoji: string) => void | Promise<void>;
+  /** Subscription state */
+  subscription?: RecordSubscription;
+  /** Called when user toggles subscription */
+  onToggleSubscription?: (subscribed: boolean) => void | Promise<void>;
+  className?: string;
+}
+
+const FEED_TYPE_ICONS: Record<FeedItemType, React.ElementType> = {
+  comment: MessageSquare,
+  field_change: Edit,
+  task: CheckSquare,
+  event: Calendar,
+  system: Zap,
+  email: Mail,
+  call: Phone,
+};
+
+const FEED_TYPE_COLORS: Record<FeedItemType, string> = {
+  comment: 'bg-purple-100 text-purple-600',
+  field_change: 'bg-blue-100 text-blue-600',
+  task: 'bg-green-100 text-green-600',
+  event: 'bg-amber-100 text-amber-600',
+  system: 'bg-gray-100 text-gray-600',
+  email: 'bg-indigo-100 text-indigo-600',
+  call: 'bg-teal-100 text-teal-600',
+};
+
+const FILTER_OPTIONS: { value: FeedFilterMode; label: string }[] = [
+  { value: 'all', label: 'All Activity' },
+  { value: 'comments_only', label: 'Comments Only' },
+  { value: 'changes_only', label: 'Field Changes' },
+  { value: 'tasks_only', label: 'Tasks Only' },
+];
+
+function formatTimestamp(timestamp: string): string {
+  try {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  } catch {
+    return timestamp;
+  }
+}
+
+function filterItems(items: FeedItem[], mode: FeedFilterMode): FeedItem[] {
+  switch (mode) {
+    case 'comments_only':
+      return items.filter((i) => i.type === 'comment');
+    case 'changes_only':
+      return items.filter((i) => i.type === 'field_change');
+    case 'tasks_only':
+      return items.filter((i) => i.type === 'task');
+    default:
+      return items;
+  }
+}
+
+/**
+ * RecordActivityTimeline — Unified timeline renderer for Airtable-style activity feeds.
+ *
+ * Renders different feed item types (comment, field_change, task, event, system, etc.)
+ * in a unified timeline. Supports filtering, pagination, reactions, and threading.
+ *
+ * Aligned with @objectstack/spec RecordActivityProps.
+ */
+export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
+  items,
+  config,
+  filterMode: controlledFilter,
+  onFilterChange,
+  hasMore = false,
+  onLoadMore,
+  loading = false,
+  onAddComment,
+  onAddReply,
+  onToggleReaction,
+  subscription,
+  onToggleSubscription,
+  className,
+}) => {
+  const [internalFilter, setInternalFilter] = React.useState<FeedFilterMode>('all');
+  const [commentText, setCommentText] = React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+
+  const activeFilter = controlledFilter ?? internalFilter;
+  const showFilter = config?.showFilterToggle !== false;
+  const showCommentInput = config?.showCommentInput !== false && !!onAddComment;
+  const enableReactions = config?.enableReactions ?? false;
+  const enableThreading = config?.enableThreading ?? false;
+  const showSubscription = config?.showSubscriptionToggle ?? false;
+
+  const filtered = React.useMemo(
+    () => filterItems(items, activeFilter),
+    [items, activeFilter],
+  );
+
+  // Group replies by parentId
+  const rootItems = React.useMemo(() => {
+    if (!enableThreading) return filtered;
+    return filtered.filter((i) => !i.parentId);
+  }, [filtered, enableThreading]);
+
+  const repliesByParent = React.useMemo(() => {
+    if (!enableThreading) return new Map<string | number, FeedItem[]>();
+    const map = new Map<string | number, FeedItem[]>();
+    for (const item of filtered) {
+      if (item.parentId) {
+        const existing = map.get(item.parentId) ?? [];
+        existing.push(item);
+        map.set(item.parentId, existing);
+      }
+    }
+    return map;
+  }, [filtered, enableThreading]);
+
+  const handleFilterChange = React.useCallback(
+    (mode: FeedFilterMode) => {
+      if (onFilterChange) {
+        onFilterChange(mode);
+      } else {
+        setInternalFilter(mode);
+      }
+    },
+    [onFilterChange],
+  );
+
+  const handleAddComment = React.useCallback(async () => {
+    const text = commentText.trim();
+    if (!text || !onAddComment) return;
+    setIsSubmitting(true);
+    try {
+      await onAddComment(text);
+      setCommentText('');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [commentText, onAddComment]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleAddComment();
+      }
+    },
+    [handleAddComment],
+  );
+
+  const handleLoadMore = React.useCallback(async () => {
+    if (!onLoadMore) return;
+    setIsLoadingMore(true);
+    try {
+      await onLoadMore();
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [onLoadMore]);
+
+  return (
+    <Card className={cn('', className)}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Activity className="h-4 w-4" />
+            Activity
+            <span className="text-sm font-normal text-muted-foreground">
+              ({filtered.length})
+            </span>
+          </CardTitle>
+          <div className="flex items-center gap-1">
+            {showSubscription && subscription && (
+              <SubscriptionToggle
+                subscription={subscription}
+                onToggle={onToggleSubscription}
+              />
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Filter dropdown */}
+        {showFilter && (
+          <div className="flex items-center gap-2">
+            <select
+              className="rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              value={activeFilter}
+              onChange={(e) => handleFilterChange(e.target.value as FeedFilterMode)}
+              aria-label="Filter activity"
+            >
+              {FILTER_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Comment Input */}
+        {showCommentInput && (
+          <div className="flex gap-2">
+            <textarea
+              className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+              placeholder="Leave a comment… (Ctrl+Enter to submit)"
+              value={commentText}
+              onChange={(e) => setCommentText(e.target.value)}
+              onKeyDown={handleKeyDown}
+              disabled={isSubmitting}
+            />
+            <Button
+              size="icon"
+              variant="default"
+              onClick={handleAddComment}
+              disabled={!commentText.trim() || isSubmitting}
+              className="shrink-0 self-end"
+              aria-label="Submit comment"
+            >
+              <MessageSquare className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+
+        {/* Timeline */}
+        {filtered.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No activity recorded
+          </p>
+        ) : (
+          <div className="relative">
+            {/* Timeline line */}
+            <div className="absolute left-4 top-2 bottom-2 w-px bg-border" />
+
+            <div className="space-y-4">
+              {rootItems.map((item) => {
+                const Icon = FEED_TYPE_ICONS[item.type] || Zap;
+                const colorClass =
+                  FEED_TYPE_COLORS[item.type] || 'bg-gray-100 text-gray-600';
+                const replies = repliesByParent.get(item.id) ?? [];
+
+                return (
+                  <div key={item.id}>
+                    <div className="flex gap-3 relative">
+                      {/* Icon */}
+                      <div
+                        className={cn(
+                          'shrink-0 h-8 w-8 rounded-full flex items-center justify-center z-10',
+                          colorClass,
+                        )}
+                      >
+                        {item.actorAvatarUrl ? (
+                          <img
+                            src={item.actorAvatarUrl}
+                            alt={item.actor}
+                            className="h-8 w-8 rounded-full object-cover"
+                          />
+                        ) : (
+                          <Icon className="h-3.5 w-3.5" />
+                        )}
+                      </div>
+                      {/* Content */}
+                      <div className="flex-1 min-w-0 pt-1">
+                        <div className="flex items-center gap-2 mb-0.5">
+                          <span className="text-sm font-medium">{item.actor}</span>
+                          {item.source && (
+                            <span className="text-xs text-muted-foreground">
+                              via {item.source}
+                            </span>
+                          )}
+                          <span className="text-xs text-muted-foreground">
+                            {formatTimestamp(item.createdAt)}
+                          </span>
+                          {item.edited && (
+                            <span className="text-xs text-muted-foreground italic">(edited)</span>
+                          )}
+                          {item.pinned && (
+                            <span className="text-xs text-amber-600">📌 Pinned</span>
+                          )}
+                        </div>
+
+                        {/* Body text */}
+                        {item.body && (
+                          <p className="text-sm whitespace-pre-wrap break-words text-muted-foreground">
+                            {item.body}
+                          </p>
+                        )}
+
+                        {/* Field changes */}
+                        {item.type === 'field_change' && item.fieldChanges && (
+                          <div className="space-y-1 mt-1">
+                            {item.fieldChanges.map((change, idx) => (
+                              <FieldChangeItem key={idx} change={change} />
+                            ))}
+                          </div>
+                        )}
+
+                        {/* Reactions */}
+                        {enableReactions && item.reactions && item.reactions.length > 0 && (
+                          <div className="mt-1.5">
+                            <ReactionPicker
+                              reactions={item.reactions}
+                              onToggleReaction={
+                                onToggleReaction
+                                  ? (emoji) => onToggleReaction(item.id, emoji)
+                                  : undefined
+                              }
+                            />
+                          </div>
+                        )}
+
+                        {/* Add reaction button (even if no reactions yet) */}
+                        {enableReactions && (!item.reactions || item.reactions.length === 0) && onToggleReaction && (
+                          <div className="mt-1.5">
+                            <ReactionPicker
+                              reactions={[]}
+                              onToggleReaction={(emoji) => onToggleReaction(item.id, emoji)}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Threading */}
+                    {enableThreading && (item.replyCount ?? 0) > 0 && (
+                      <ThreadedReplies
+                        parentItem={item}
+                        replies={replies}
+                        onAddReply={onAddReply}
+                        showReplyInput={!!onAddReply}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Load More */}
+        {hasMore && (
+          <div className="text-center pt-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLoadMore}
+              disabled={isLoadingMore}
+              aria-label="Load more activity"
+            >
+              {isLoadingMore ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              ) : (
+                <ChevronDown className="h-4 w-4 mr-1" />
+              )}
+              Load more
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/packages/plugin-detail/src/RecordChatterPanel.tsx b/packages/plugin-detail/src/RecordChatterPanel.tsx
new file mode 100644
index 000000000..a49a44efc
--- /dev/null
+++ b/packages/plugin-detail/src/RecordChatterPanel.tsx
@@ -0,0 +1,202 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { MessageSquare, PanelRightOpen, PanelRightClose, X } from 'lucide-react';
+import type { RecordChatterComponentProps, FeedItem, RecordSubscription } from '@object-ui/types';
+import { RecordActivityTimeline } from './RecordActivityTimeline';
+import type { FeedFilterMode, RecordActivityTimelineProps } from './RecordActivityTimeline';
+
+export interface RecordChatterPanelProps {
+  /** Chatter panel configuration from RecordChatterComponentProps */
+  config?: RecordChatterComponentProps;
+  /** Feed items to display in the embedded timeline */
+  items: FeedItem[];
+  /** Whether there are more items to load */
+  hasMore?: boolean;
+  /** Called when user wants to load more */
+  onLoadMore?: () => void | Promise<void>;
+  /** Loading state */
+  loading?: boolean;
+  /** Called when a comment is submitted */
+  onAddComment?: (text: string) => void | Promise<void>;
+  /** Called when a reply is submitted */
+  onAddReply?: (parentId: string | number, text: string) => void | Promise<void>;
+  /** Called when user toggles a reaction */
+  onToggleReaction?: (itemId: string | number, emoji: string) => void | Promise<void>;
+  /** Subscription state */
+  subscription?: RecordSubscription;
+  /** Called when user toggles subscription */
+  onToggleSubscription?: (subscribed: boolean) => void | Promise<void>;
+  /** Filter mode */
+  filterMode?: FeedFilterMode;
+  /** Called when filter changes */
+  onFilterChange?: (mode: FeedFilterMode) => void;
+  className?: string;
+}
+
+/**
+ * RecordChatterPanel — Side/inline/drawer panel for record discussions.
+ *
+ * Consumes RecordChatterComponentProps from the spec protocol.
+ * Supports three positions: bottom (inline), right (sidebar), left (sidebar).
+ * Can be collapsible/expandable.
+ *
+ * Embeds RecordActivityTimeline as the feed sub-component.
+ */
+export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
+  config,
+  items,
+  hasMore,
+  onLoadMore,
+  loading,
+  onAddComment,
+  onAddReply,
+  onToggleReaction,
+  subscription,
+  onToggleSubscription,
+  filterMode,
+  onFilterChange,
+  className,
+}) => {
+  const position = config?.position ?? 'right';
+  const width = config?.width ?? '360px';
+  const collapsible = config?.collapsible ?? true;
+  const defaultCollapsed = config?.defaultCollapsed ?? false;
+
+  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
+
+  const isSidebar = position === 'right' || position === 'left';
+  const isInline = position === 'bottom';
+
+  // Sidebar mode
+  if (isSidebar) {
+    if (collapsed && collapsible) {
+      return (
+        <div
+          className={cn(
+            'flex items-start pt-4',
+            position === 'right' ? 'border-l' : 'border-r',
+            className,
+          )}
+        >
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 mx-1"
+            onClick={() => setCollapsed(false)}
+            aria-label="Open discussion panel"
+          >
+            <PanelRightOpen className="h-4 w-4" />
+          </Button>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          'flex flex-col overflow-hidden',
+          position === 'right' ? 'border-l' : 'border-r',
+          className,
+        )}
+        style={{ width, minWidth: width }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b">
+          <div className="flex items-center gap-2">
+            <MessageSquare className="h-4 w-4" />
+            <span className="text-sm font-medium">Discussion</span>
+          </div>
+          {collapsible && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={() => setCollapsed(true)}
+              aria-label="Close discussion panel"
+            >
+              <X className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+
+        {/* Embedded Timeline */}
+        <div className="flex-1 overflow-y-auto">
+          <RecordActivityTimeline
+            items={items}
+            config={config?.feed}
+            hasMore={hasMore}
+            onLoadMore={onLoadMore}
+            loading={loading}
+            onAddComment={onAddComment}
+            onAddReply={onAddReply}
+            onToggleReaction={onToggleReaction}
+            subscription={subscription}
+            onToggleSubscription={onToggleSubscription}
+            filterMode={filterMode}
+            onFilterChange={onFilterChange}
+            className="border-0 shadow-none"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // Inline / bottom mode
+  return (
+    <div className={cn('', className)}>
+      {collapsible && collapsed ? (
+        <Button
+          variant="ghost"
+          className="w-full justify-start gap-2 text-muted-foreground"
+          onClick={() => setCollapsed(false)}
+          aria-label="Show discussion"
+        >
+          <MessageSquare className="h-4 w-4" />
+          <span>Show Discussion ({items.length})</span>
+        </Button>
+      ) : (
+        <div>
+          {collapsible && (
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <MessageSquare className="h-4 w-4" />
+                Discussion
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={() => setCollapsed(true)}
+                aria-label="Hide discussion"
+              >
+                <PanelRightClose className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          )}
+          <RecordActivityTimeline
+            items={items}
+            config={config?.feed}
+            hasMore={hasMore}
+            onLoadMore={onLoadMore}
+            loading={loading}
+            onAddComment={onAddComment}
+            onAddReply={onAddReply}
+            onToggleReaction={onToggleReaction}
+            subscription={subscription}
+            onToggleSubscription={onToggleSubscription}
+            filterMode={filterMode}
+            onFilterChange={onFilterChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/plugin-detail/src/SubscriptionToggle.tsx b/packages/plugin-detail/src/SubscriptionToggle.tsx
new file mode 100644
index 000000000..fd5a6c33f
--- /dev/null
+++ b/packages/plugin-detail/src/SubscriptionToggle.tsx
@@ -0,0 +1,60 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { Bell, BellOff } from 'lucide-react';
+import type { RecordSubscription } from '@object-ui/types';
+
+export interface SubscriptionToggleProps {
+  /** Current subscription state */
+  subscription: RecordSubscription;
+  /** Called when user toggles subscription */
+  onToggle?: (subscribed: boolean) => void | Promise<void>;
+  className?: string;
+}
+
+/**
+ * SubscriptionToggle — Bell icon toggle for record notification subscriptions.
+ * Aligned with @objectstack/spec RecordSubscriptionSchema.
+ */
+export const SubscriptionToggle: React.FC<SubscriptionToggleProps> = ({
+  subscription,
+  onToggle,
+  className,
+}) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleToggle = React.useCallback(async () => {
+    if (!onToggle) return;
+    setIsLoading(true);
+    try {
+      await onToggle(!subscription.subscribed);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onToggle, subscription.subscribed]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn('h-8 w-8', className)}
+      onClick={handleToggle}
+      disabled={isLoading || !onToggle}
+      aria-label={subscription.subscribed ? 'Unsubscribe from notifications' : 'Subscribe to notifications'}
+      title={subscription.subscribed ? 'Subscribed — click to unsubscribe' : 'Subscribe to notifications'}
+    >
+      {subscription.subscribed ? (
+        <Bell className="h-4 w-4 text-primary" />
+      ) : (
+        <BellOff className="h-4 w-4 text-muted-foreground" />
+      )}
+    </Button>
+  );
+};
diff --git a/packages/plugin-detail/src/ThreadedReplies.tsx b/packages/plugin-detail/src/ThreadedReplies.tsx
new file mode 100644
index 000000000..8195f9e32
--- /dev/null
+++ b/packages/plugin-detail/src/ThreadedReplies.tsx
@@ -0,0 +1,161 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { MessageSquare, ChevronDown, ChevronRight, Send } from 'lucide-react';
+import type { FeedItem } from '@object-ui/types';
+
+export interface ThreadedRepliesProps {
+  /** Parent feed item (root comment) */
+  parentItem: FeedItem;
+  /** Reply feed items (children) */
+  replies: FeedItem[];
+  /** Called when a reply is submitted */
+  onAddReply?: (parentId: string | number, text: string) => void | Promise<void>;
+  /** Whether to show the reply input */
+  showReplyInput?: boolean;
+  className?: string;
+}
+
+function formatTimestamp(timestamp: string): string {
+  try {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  } catch {
+    return timestamp;
+  }
+}
+
+/**
+ * ThreadedReplies — Displays a collapsible thread of replies under a parent comment.
+ * Supports adding new replies and showing reply count.
+ */
+export const ThreadedReplies: React.FC<ThreadedRepliesProps> = ({
+  parentItem,
+  replies,
+  onAddReply,
+  showReplyInput = true,
+  className,
+}) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const [replyText, setReplyText] = React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmitReply = React.useCallback(async () => {
+    const text = replyText.trim();
+    if (!text || !onAddReply) return;
+    setIsSubmitting(true);
+    try {
+      await onAddReply(parentItem.id, text);
+      setReplyText('');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [replyText, onAddReply, parentItem.id]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleSubmitReply();
+      }
+    },
+    [handleSubmitReply],
+  );
+
+  if (replies.length === 0 && !showReplyInput) return null;
+
+  return (
+    <div className={cn('ml-10 mt-1', className)}>
+      {/* Toggle */}
+      {replies.length > 0 && (
+        <button
+          type="button"
+          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-1"
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+        >
+          {expanded ? (
+            <ChevronDown className="h-3 w-3" />
+          ) : (
+            <ChevronRight className="h-3 w-3" />
+          )}
+          <MessageSquare className="h-3 w-3" />
+          <span>{replies.length} {replies.length === 1 ? 'reply' : 'replies'}</span>
+        </button>
+      )}
+
+      {/* Replies list */}
+      {expanded && (
+        <div className="space-y-2 border-l-2 border-border pl-3">
+          {replies.map((reply) => (
+            <div key={reply.id} className="flex gap-2">
+              <div className="shrink-0">
+                {reply.actorAvatarUrl ? (
+                  <img
+                    src={reply.actorAvatarUrl}
+                    alt={reply.actor}
+                    className="h-6 w-6 rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
+                    {reply.actor.charAt(0).toUpperCase()}
+                  </div>
+                )}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5">
+                  <span className="text-xs font-medium">{reply.actor}</span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {formatTimestamp(reply.createdAt)}
+                  </span>
+                </div>
+                <p className="text-xs whitespace-pre-wrap break-words">{reply.body}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Reply input */}
+      {showReplyInput && onAddReply && (
+        <div className="flex gap-1.5 mt-1.5">
+          <input
+            className="flex-1 rounded-md border border-input bg-background px-2 py-1 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            placeholder="Reply…"
+            value={replyText}
+            onChange={(e) => setReplyText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isSubmitting}
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 shrink-0"
+            onClick={handleSubmitReply}
+            disabled={!replyText.trim() || isSubmitting}
+            aria-label="Send reply"
+          >
+            <Send className="h-3 w-3" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/plugin-detail/src/__tests__/CommentInput.test.tsx b/packages/plugin-detail/src/__tests__/CommentInput.test.tsx
new file mode 100644
index 000000000..cc27c7bd0
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/CommentInput.test.tsx
@@ -0,0 +1,57 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { CommentInput } from '../CommentInput';
+
+describe('CommentInput', () => {
+  it('should render placeholder text', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    expect(screen.getByPlaceholderText('Leave a comment…')).toBeInTheDocument();
+  });
+
+  it('should render custom placeholder', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} placeholder="Type here…" />);
+    expect(screen.getByPlaceholderText('Type here…')).toBeInTheDocument();
+  });
+
+  it('should disable submit when textarea is empty', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    expect(screen.getByLabelText('Submit comment')).toBeDisabled();
+  });
+
+  it('should enable submit when text is entered', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    fireEvent.change(screen.getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'Hello' },
+    });
+    expect(screen.getByLabelText('Submit comment')).not.toBeDisabled();
+  });
+
+  it('should call onSubmit with text when clicked', () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    render(<CommentInput onSubmit={onSubmit} />);
+    fireEvent.change(screen.getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'Hello world' },
+    });
+    fireEvent.click(screen.getByLabelText('Submit comment'));
+    expect(onSubmit).toHaveBeenCalledWith('Hello world');
+  });
+
+  it('should disable input when disabled prop is true', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} disabled />);
+    expect(screen.getByPlaceholderText('Leave a comment…')).toBeDisabled();
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/FieldChangeItem.test.tsx b/packages/plugin-detail/src/__tests__/FieldChangeItem.test.tsx
new file mode 100644
index 000000000..a12ad081e
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/FieldChangeItem.test.tsx
@@ -0,0 +1,72 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { FieldChangeItem } from '../FieldChangeItem';
+import type { FieldChangeEntry } from '@object-ui/types';
+
+describe('FieldChangeItem', () => {
+  it('should render field label with old and new display values', () => {
+    const change: FieldChangeEntry = {
+      field: 'status',
+      fieldLabel: 'Status',
+      oldDisplayValue: 'Open',
+      newDisplayValue: 'Closed',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('Status')).toBeInTheDocument();
+    expect(screen.getByText('Open')).toBeInTheDocument();
+    expect(screen.getByText('Closed')).toBeInTheDocument();
+  });
+
+  it('should derive field label from field name when fieldLabel is not set', () => {
+    const change: FieldChangeEntry = {
+      field: 'first_name',
+      oldValue: 'John',
+      newValue: 'Jane',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('First name')).toBeInTheDocument();
+  });
+
+  it('should use raw values when display values are not set', () => {
+    const change: FieldChangeEntry = {
+      field: 'priority',
+      fieldLabel: 'Priority',
+      oldValue: 'low',
+      newValue: 'high',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('low')).toBeInTheDocument();
+    expect(screen.getByText('high')).toBeInTheDocument();
+  });
+
+  it('should show (empty) when value is null/undefined', () => {
+    const change: FieldChangeEntry = {
+      field: 'notes',
+      fieldLabel: 'Notes',
+      newValue: 'Some text',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('(empty)')).toBeInTheDocument();
+    expect(screen.getByText('Some text')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const change: FieldChangeEntry = {
+      field: 'name',
+      fieldLabel: 'Name',
+      oldValue: 'A',
+      newValue: 'B',
+    };
+    const { container } = render(<FieldChangeItem change={change} className="custom-class" />);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/MentionAutocomplete.test.tsx b/packages/plugin-detail/src/__tests__/MentionAutocomplete.test.tsx
new file mode 100644
index 000000000..5a013695c
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/MentionAutocomplete.test.tsx
@@ -0,0 +1,97 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MentionAutocomplete, createMentionFromSuggestion } from '../MentionAutocomplete';
+import type { MentionSuggestionItem } from '../MentionAutocomplete';
+
+const mockSuggestions: MentionSuggestionItem[] = [
+  { id: 'u1', name: 'Alice Smith', type: 'user' },
+  { id: 'u2', name: 'Bob Johnson', type: 'user', avatarUrl: 'https://example.com/bob.jpg' },
+  { id: 't1', name: 'Engineering', type: 'team' },
+];
+
+describe('MentionAutocomplete', () => {
+  it('should render suggestions when visible', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(screen.getByText('Alice Smith')).toBeInTheDocument();
+    expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
+    expect(screen.getByText('Engineering')).toBeInTheDocument();
+  });
+
+  it('should not render when not visible', () => {
+    const onSelect = vi.fn();
+    const { container } = render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible={false} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should filter suggestions by query', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="Ali" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(screen.getByText('Alice Smith')).toBeInTheDocument();
+    expect(screen.queryByText('Bob Johnson')).not.toBeInTheDocument();
+  });
+
+  it('should show type label for non-user types', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="Eng" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(screen.getByText('(team)')).toBeInTheDocument();
+  });
+
+  it('should call onSelect when a suggestion is clicked', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    fireEvent.mouseDown(screen.getByText('Alice Smith'));
+    expect(onSelect).toHaveBeenCalledWith(mockSuggestions[0]);
+  });
+
+  it('should render avatar image when avatarUrl is present', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    const img = screen.getByAltText('Bob Johnson');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', 'https://example.com/bob.jpg');
+  });
+
+  it('should not render when no matching suggestions', () => {
+    const onSelect = vi.fn();
+    const { container } = render(
+      <MentionAutocomplete query="xyz" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe('createMentionFromSuggestion', () => {
+  it('should create a Mention object from a suggestion item', () => {
+    const item: MentionSuggestionItem = { id: 'u1', name: 'Alice', type: 'user' };
+    const mention = createMentionFromSuggestion(item, 5, 6);
+    expect(mention).toEqual({
+      type: 'user',
+      id: 'u1',
+      name: 'Alice',
+      offset: 5,
+      length: 6,
+    });
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/ReactionPicker.test.tsx b/packages/plugin-detail/src/__tests__/ReactionPicker.test.tsx
new file mode 100644
index 000000000..2632c43d6
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/ReactionPicker.test.tsx
@@ -0,0 +1,69 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ReactionPicker } from '../ReactionPicker';
+import type { Reaction } from '@object-ui/types';
+
+const mockReactions: Reaction[] = [
+  { emoji: '👍', count: 3, reacted: true },
+  { emoji: '❤️', count: 1, reacted: false },
+];
+
+describe('ReactionPicker', () => {
+  it('should render existing reactions with counts', () => {
+    render(<ReactionPicker reactions={mockReactions} />);
+    expect(screen.getByText('👍')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('❤️')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('should highlight reacted emoji', () => {
+    render(<ReactionPicker reactions={mockReactions} />);
+    const thumbs = screen.getByLabelText(/👍 3/);
+    expect(thumbs).toHaveClass('bg-primary/10');
+  });
+
+  it('should show add reaction button when onToggleReaction provided', () => {
+    const onToggle = vi.fn();
+    render(<ReactionPicker reactions={[]} onToggleReaction={onToggle} />);
+    expect(screen.getByLabelText('Add reaction')).toBeInTheDocument();
+  });
+
+  it('should not show add button when no onToggleReaction', () => {
+    render(<ReactionPicker reactions={[]} />);
+    expect(screen.queryByLabelText('Add reaction')).not.toBeInTheDocument();
+  });
+
+  it('should call onToggleReaction when clicking existing reaction', () => {
+    const onToggle = vi.fn();
+    render(<ReactionPicker reactions={mockReactions} onToggleReaction={onToggle} />);
+    fireEvent.click(screen.getByLabelText(/👍 3/));
+    expect(onToggle).toHaveBeenCalledWith('👍');
+  });
+
+  it('should show emoji picker when add button is clicked', () => {
+    const onToggle = vi.fn();
+    render(<ReactionPicker reactions={[]} onToggleReaction={onToggle} />);
+    fireEvent.click(screen.getByLabelText('Add reaction'));
+    expect(screen.getByRole('listbox', { name: 'Emoji picker' })).toBeInTheDocument();
+  });
+
+  it('should call onToggleReaction when emoji is selected from picker', () => {
+    const onToggle = vi.fn();
+    render(<ReactionPicker reactions={[]} onToggleReaction={onToggle} />);
+    fireEvent.click(screen.getByLabelText('Add reaction'));
+    // Select first emoji option (👍)
+    const options = screen.getAllByRole('option');
+    fireEvent.click(options[0]);
+    expect(onToggle).toHaveBeenCalledWith('👍');
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/RecordActivityTimeline.test.tsx b/packages/plugin-detail/src/__tests__/RecordActivityTimeline.test.tsx
new file mode 100644
index 000000000..f36348daa
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/RecordActivityTimeline.test.tsx
@@ -0,0 +1,209 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { RecordActivityTimeline } from '../RecordActivityTimeline';
+import type { FeedItem } from '@object-ui/types';
+
+const mockItems: FeedItem[] = [
+  {
+    id: '1',
+    type: 'comment',
+    actor: 'Alice',
+    body: 'This looks great!',
+    createdAt: '2026-02-20T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'field_change',
+    actor: 'Bob',
+    createdAt: '2026-02-20T11:00:00Z',
+    fieldChanges: [
+      {
+        field: 'status',
+        fieldLabel: 'Status',
+        oldDisplayValue: 'Open',
+        newDisplayValue: 'In Progress',
+      },
+    ],
+  },
+  {
+    id: '3',
+    type: 'task',
+    actor: 'Charlie',
+    body: 'Follow up with client',
+    createdAt: '2026-02-20T12:00:00Z',
+  },
+  {
+    id: '4',
+    type: 'system',
+    actor: 'System',
+    body: 'Record created automatically',
+    createdAt: '2026-02-20T08:00:00Z',
+  },
+];
+
+describe('RecordActivityTimeline', () => {
+  it('should render activity heading with count', () => {
+    render(<RecordActivityTimeline items={mockItems} />);
+    expect(screen.getByText('Activity')).toBeInTheDocument();
+    expect(screen.getByText('(4)')).toBeInTheDocument();
+  });
+
+  it('should render actor names', () => {
+    render(<RecordActivityTimeline items={mockItems} />);
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+    expect(screen.getByText('System')).toBeInTheDocument();
+  });
+
+  it('should render comment body text', () => {
+    render(<RecordActivityTimeline items={mockItems} />);
+    expect(screen.getByText('This looks great!')).toBeInTheDocument();
+  });
+
+  it('should render field change entries', () => {
+    render(<RecordActivityTimeline items={mockItems} />);
+    expect(screen.getByText('Status')).toBeInTheDocument();
+    expect(screen.getByText('Open')).toBeInTheDocument();
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+  });
+
+  it('should show "No activity recorded" when empty', () => {
+    render(<RecordActivityTimeline items={[]} />);
+    expect(screen.getByText('No activity recorded')).toBeInTheDocument();
+  });
+
+  it('should filter to comments only', () => {
+    render(
+      <RecordActivityTimeline items={mockItems} filterMode="comments_only" />,
+    );
+    expect(screen.getByText('(1)')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.queryByText('Bob')).not.toBeInTheDocument();
+  });
+
+  it('should filter to changes only', () => {
+    render(
+      <RecordActivityTimeline items={mockItems} filterMode="changes_only" />,
+    );
+    expect(screen.getByText('(1)')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+  });
+
+  it('should filter to tasks only', () => {
+    render(
+      <RecordActivityTimeline items={mockItems} filterMode="tasks_only" />,
+    );
+    expect(screen.getByText('(1)')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('should show filter dropdown by default', () => {
+    render(<RecordActivityTimeline items={mockItems} />);
+    expect(screen.getByLabelText('Filter activity')).toBeInTheDocument();
+  });
+
+  it('should hide filter when showFilterToggle is false', () => {
+    render(
+      <RecordActivityTimeline
+        items={mockItems}
+        config={{ showFilterToggle: false }}
+      />,
+    );
+    expect(screen.queryByLabelText('Filter activity')).not.toBeInTheDocument();
+  });
+
+  it('should show comment input when onAddComment provided', () => {
+    const onAdd = vi.fn();
+    render(
+      <RecordActivityTimeline items={[]} onAddComment={onAdd} />,
+    );
+    expect(screen.getByPlaceholderText(/Leave a comment/)).toBeInTheDocument();
+  });
+
+  it('should hide comment input when showCommentInput is false', () => {
+    const onAdd = vi.fn();
+    render(
+      <RecordActivityTimeline
+        items={[]}
+        onAddComment={onAdd}
+        config={{ showCommentInput: false }}
+      />,
+    );
+    expect(screen.queryByPlaceholderText(/Leave a comment/)).not.toBeInTheDocument();
+  });
+
+  it('should call onAddComment when comment is submitted', () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <RecordActivityTimeline items={[]} onAddComment={onAdd} />,
+    );
+    fireEvent.change(screen.getByPlaceholderText(/Leave a comment/), {
+      target: { value: 'New comment' },
+    });
+    fireEvent.click(screen.getByLabelText('Submit comment'));
+    expect(onAdd).toHaveBeenCalledWith('New comment');
+  });
+
+  it('should show Load more button when hasMore is true', () => {
+    render(
+      <RecordActivityTimeline items={mockItems} hasMore onLoadMore={() => {}} />,
+    );
+    expect(screen.getByLabelText('Load more activity')).toBeInTheDocument();
+  });
+
+  it('should call onLoadMore when Load more is clicked', () => {
+    const onLoadMore = vi.fn().mockResolvedValue(undefined);
+    render(
+      <RecordActivityTimeline items={mockItems} hasMore onLoadMore={onLoadMore} />,
+    );
+    fireEvent.click(screen.getByLabelText('Load more activity'));
+    expect(onLoadMore).toHaveBeenCalled();
+  });
+
+  it('should render source label when present', () => {
+    const items: FeedItem[] = [
+      { id: '1', type: 'comment', actor: 'Alice', body: 'Hi', createdAt: '2026-02-20T10:00:00Z', source: 'email' },
+    ];
+    render(<RecordActivityTimeline items={items} />);
+    expect(screen.getByText('via email')).toBeInTheDocument();
+  });
+
+  it('should render edited indicator', () => {
+    const items: FeedItem[] = [
+      { id: '1', type: 'comment', actor: 'Alice', body: 'Edited', createdAt: '2026-02-20T10:00:00Z', edited: true },
+    ];
+    render(<RecordActivityTimeline items={items} />);
+    expect(screen.getByText('(edited)')).toBeInTheDocument();
+  });
+
+  it('should render pinned indicator', () => {
+    const items: FeedItem[] = [
+      { id: '1', type: 'comment', actor: 'Alice', body: 'Pinned comment', createdAt: '2026-02-20T10:00:00Z', pinned: true },
+    ];
+    render(<RecordActivityTimeline items={items} />);
+    expect(screen.getByText('📌 Pinned')).toBeInTheDocument();
+  });
+
+  it('should show subscription toggle when configured', () => {
+    render(
+      <RecordActivityTimeline
+        items={[]}
+        config={{ showSubscriptionToggle: true }}
+        subscription={{ recordId: '1', subscribed: true }}
+        onToggleSubscription={() => {}}
+      />,
+    );
+    expect(screen.getByLabelText('Unsubscribe from notifications')).toBeInTheDocument();
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/RecordChatterPanel.test.tsx b/packages/plugin-detail/src/__tests__/RecordChatterPanel.test.tsx
new file mode 100644
index 000000000..d13e958c4
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/RecordChatterPanel.test.tsx
@@ -0,0 +1,129 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { RecordChatterPanel } from '../RecordChatterPanel';
+import type { FeedItem } from '@object-ui/types';
+
+const mockItems: FeedItem[] = [
+  {
+    id: '1',
+    type: 'comment',
+    actor: 'Alice',
+    body: 'Hello from chatter',
+    createdAt: '2026-02-20T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'field_change',
+    actor: 'Bob',
+    createdAt: '2026-02-20T11:00:00Z',
+    fieldChanges: [
+      { field: 'priority', fieldLabel: 'Priority', oldValue: 'low', newValue: 'high' },
+    ],
+  },
+];
+
+describe('RecordChatterPanel', () => {
+  describe('sidebar mode (right)', () => {
+    it('should render Discussion header in sidebar mode', () => {
+      render(
+        <RecordChatterPanel config={{ position: 'right' }} items={mockItems} />,
+      );
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+    });
+
+    it('should render activity items', () => {
+      render(
+        <RecordChatterPanel config={{ position: 'right' }} items={mockItems} />,
+      );
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+      expect(screen.getByText('Hello from chatter')).toBeInTheDocument();
+    });
+
+    it('should collapse when close button is clicked', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true }}
+          items={mockItems}
+        />,
+      );
+      // Initially expanded (not defaultCollapsed)
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+      fireEvent.click(screen.getByLabelText('Close discussion panel'));
+      // Now collapsed — show expand button
+      expect(screen.getByLabelText('Open discussion panel')).toBeInTheDocument();
+    });
+
+    it('should start collapsed when defaultCollapsed is true', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByLabelText('Open discussion panel')).toBeInTheDocument();
+      expect(screen.queryByText('Discussion')).not.toBeInTheDocument();
+    });
+
+    it('should expand from collapsed state', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      fireEvent.click(screen.getByLabelText('Open discussion panel'));
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+    });
+  });
+
+  describe('inline mode (bottom)', () => {
+    it('should render timeline in inline mode', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: false }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByText('Activity')).toBeInTheDocument();
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+    });
+
+    it('should show/hide discussion toggle in inline collapsible mode', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
+      fireEvent.click(screen.getByLabelText('Show discussion'));
+      expect(screen.getByText('Activity')).toBeInTheDocument();
+    });
+  });
+
+  describe('default config', () => {
+    it('should default to right position', () => {
+      render(<RecordChatterPanel items={mockItems} />);
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+    });
+
+    it('should pass feed config to embedded timeline', () => {
+      render(
+        <RecordChatterPanel
+          config={{ feed: { showFilterToggle: false } }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.queryByLabelText('Filter activity')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/SubscriptionToggle.test.tsx b/packages/plugin-detail/src/__tests__/SubscriptionToggle.test.tsx
new file mode 100644
index 000000000..845c7e2dd
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/SubscriptionToggle.test.tsx
@@ -0,0 +1,51 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SubscriptionToggle } from '../SubscriptionToggle';
+import type { RecordSubscription } from '@object-ui/types';
+
+describe('SubscriptionToggle', () => {
+  it('should render subscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} />);
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveAttribute('aria-label', 'Unsubscribe from notifications');
+  });
+
+  it('should render unsubscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} />);
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveAttribute('aria-label', 'Subscribe to notifications');
+  });
+
+  it('should call onToggle with new state when clicked', () => {
+    const onToggle = vi.fn();
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('should call onToggle with false when unsubscribing', () => {
+    const onToggle = vi.fn();
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('should be disabled when no onToggle provided', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} />);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/ThreadedReplies.test.tsx b/packages/plugin-detail/src/__tests__/ThreadedReplies.test.tsx
new file mode 100644
index 000000000..821cc22fa
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/ThreadedReplies.test.tsx
@@ -0,0 +1,108 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThreadedReplies } from '../ThreadedReplies';
+import type { FeedItem } from '@object-ui/types';
+
+const parentItem: FeedItem = {
+  id: 'p1',
+  type: 'comment',
+  actor: 'Alice',
+  body: 'Parent comment',
+  createdAt: '2026-02-20T10:00:00Z',
+  replyCount: 2,
+};
+
+const mockReplies: FeedItem[] = [
+  {
+    id: 'r1',
+    type: 'comment',
+    actor: 'Bob',
+    body: 'First reply',
+    createdAt: '2026-02-20T11:00:00Z',
+    parentId: 'p1',
+  },
+  {
+    id: 'r2',
+    type: 'comment',
+    actor: 'Charlie',
+    body: 'Second reply',
+    createdAt: '2026-02-20T12:00:00Z',
+    parentId: 'p1',
+  },
+];
+
+describe('ThreadedReplies', () => {
+  it('should render reply count toggle', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    expect(screen.getByText('2 replies')).toBeInTheDocument();
+  });
+
+  it('should use singular "reply" for one reply', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[mockReplies[0]]} />,
+    );
+    expect(screen.getByText('1 reply')).toBeInTheDocument();
+  });
+
+  it('should not render replies by default (collapsed)', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    expect(screen.queryByText('First reply')).not.toBeInTheDocument();
+  });
+
+  it('should expand replies when toggle is clicked', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('First reply')).toBeInTheDocument();
+    expect(screen.getByText('Second reply')).toBeInTheDocument();
+  });
+
+  it('should show reply authors', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('should show reply input when onAddReply and showReplyInput', () => {
+    const onAdd = vi.fn();
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    expect(screen.getByPlaceholderText('Reply…')).toBeInTheDocument();
+  });
+
+  it('should call onAddReply with parentId and text', () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…');
+    fireEvent.change(input, { target: { value: 'My reply' } });
+    fireEvent.click(screen.getByLabelText('Send reply'));
+    expect(onAdd).toHaveBeenCalledWith('p1', 'My reply');
+  });
+
+  it('should return null when no replies and no reply input', () => {
+    const { container } = render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} showReplyInput={false} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/packages/plugin-detail/src/index.tsx b/packages/plugin-detail/src/index.tsx
index 3ea5c752b..618fe3a96 100644
--- a/packages/plugin-detail/src/index.tsx
+++ b/packages/plugin-detail/src/index.tsx
@@ -24,6 +24,14 @@ export { RecordNavigationEnhanced } from './RecordNavigationEnhanced';
 export { RelationshipGraph } from './RelationshipGraph';
 export { CommentAttachment } from './CommentAttachment';
 export { PointInTimeRestore } from './PointInTimeRestore';
+export { RecordActivityTimeline } from './RecordActivityTimeline';
+export { RecordChatterPanel } from './RecordChatterPanel';
+export { CommentInput } from './CommentInput';
+export { FieldChangeItem } from './FieldChangeItem';
+export { MentionAutocomplete, createMentionFromSuggestion } from './MentionAutocomplete';
+export { SubscriptionToggle } from './SubscriptionToggle';
+export { ReactionPicker } from './ReactionPicker';
+export { ThreadedReplies } from './ThreadedReplies';
 export type { DetailViewProps } from './DetailView';
 export type { DetailSectionProps } from './DetailSection';
 export type { DetailTabsProps } from './DetailTabs';
@@ -37,6 +45,14 @@ export type { RecordNavigationEnhancedProps } from './RecordNavigationEnhanced';
 export type { RelationshipGraphProps, GraphNode } from './RelationshipGraph';
 export type { CommentAttachmentProps, Attachment } from './CommentAttachment';
 export type { PointInTimeRestoreProps, RevisionEntry } from './PointInTimeRestore';
+export type { RecordActivityTimelineProps, FeedFilterMode } from './RecordActivityTimeline';
+export type { RecordChatterPanelProps } from './RecordChatterPanel';
+export type { CommentInputProps } from './CommentInput';
+export type { FieldChangeItemProps } from './FieldChangeItem';
+export type { MentionAutocompleteProps, MentionSuggestionItem } from './MentionAutocomplete';
+export type { SubscriptionToggleProps } from './SubscriptionToggle';
+export type { ReactionPickerProps } from './ReactionPicker';
+export type { ThreadedRepliesProps } from './ThreadedReplies';
 
 // Register DetailView component
 ComponentRegistry.register('detail-view', DetailView, {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 4f925c975..eeee141fd 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -701,6 +701,13 @@ export type {
   MentionNotification,
   CommentSearchResult,
   ActivityEntry,
+  // Feed / Chatter Protocol Types
+  FeedItemType,
+  FeedItem,
+  FieldChangeEntry,
+  Mention,
+  Reaction,
+  RecordSubscription,
 } from './views';
 
 export type {
diff --git a/packages/types/src/views.ts b/packages/types/src/views.ts
index ed589e3a3..2166516e5 100644
--- a/packages/types/src/views.ts
+++ b/packages/types/src/views.ts
@@ -256,6 +256,119 @@ export interface ActivityEntry {
   description?: string;
 }
 
+// ============================================================================
+// Feed / Chatter Protocol Types
+// Aligned with @objectstack/spec FeedItemSchema, MentionSchema, ReactionSchema,
+// FieldChangeEntrySchema, RecordSubscriptionSchema
+// ============================================================================
+
+/**
+ * Feed item type — determines rendering style in the activity timeline.
+ * Aligned with @objectstack/spec FeedItemSchema.type enum.
+ */
+export type FeedItemType = 'comment' | 'field_change' | 'task' | 'event' | 'system' | 'email' | 'call';
+
+/**
+ * FeedItem — A single item in the unified activity feed.
+ * Aligned with @objectstack/spec FeedItemSchema.
+ */
+export interface FeedItem {
+  /** Unique identifier */
+  id: string | number;
+  /** Feed item type */
+  type: FeedItemType;
+  /** Actor / author display name */
+  actor: string;
+  /** Actor avatar URL */
+  actorAvatarUrl?: string;
+  /** Main body / text content (may contain Markdown) */
+  body?: string;
+  /** Creation timestamp (ISO 8601) */
+  createdAt: string;
+  /** Last update timestamp (ISO 8601) */
+  updatedAt?: string;
+  /** Source of the feed item (e.g., 'manual', 'api', 'automation') */
+  source?: string;
+  /** Parent feed item ID (for threading) */
+  parentId?: string | number;
+  /** Number of replies (if this is a root comment) */
+  replyCount?: number;
+  /** Field change entries (for field_change type) */
+  fieldChanges?: FieldChangeEntry[];
+  /** Mentions within this feed item */
+  mentions?: Mention[];
+  /** Reactions on this feed item */
+  reactions?: Reaction[];
+  /** Whether this item is pinned */
+  pinned?: boolean;
+  /** Whether this item has been edited */
+  edited?: boolean;
+}
+
+/**
+ * FieldChangeEntry — A single field change within a feed item.
+ * Aligned with @objectstack/spec FieldChangeEntrySchema.
+ */
+export interface FieldChangeEntry {
+  /** Field API name */
+  field: string;
+  /** Field display label */
+  fieldLabel?: string;
+  /** Previous raw value */
+  oldValue?: unknown;
+  /** New raw value */
+  newValue?: unknown;
+  /** Previous human-readable display value */
+  oldDisplayValue?: string;
+  /** New human-readable display value */
+  newDisplayValue?: string;
+}
+
+/**
+ * Mention — An @mention within a feed item.
+ * Aligned with @objectstack/spec MentionSchema.
+ */
+export interface Mention {
+  /** Mention target type */
+  type: 'user' | 'team' | 'group';
+  /** Mentioned entity ID */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Offset in the body text */
+  offset?: number;
+  /** Length of the mention text */
+  length?: number;
+}
+
+/**
+ * Reaction — An emoji reaction on a feed item.
+ * Aligned with @objectstack/spec ReactionSchema.
+ */
+export interface Reaction {
+  /** Emoji identifier (e.g. '👍', '❤️', '🎉') */
+  emoji: string;
+  /** Number of users who reacted with this emoji */
+  count: number;
+  /** Whether the current user reacted with this emoji */
+  reacted?: boolean;
+  /** IDs of users who reacted */
+  userIds?: string[];
+}
+
+/**
+ * RecordSubscription — Notification subscription state for a record.
+ * Aligned with @objectstack/spec RecordSubscriptionSchema.
+ */
+export interface RecordSubscription {
+  /** Record ID */
+  recordId: string | number;
+  /** Whether the current user is subscribed */
+  subscribed: boolean;
+  /** Notification channels */
+  channels?: Array<'in_app' | 'email' | 'push'>;
+}
+
 /**
  * Detail View Schema - Display detailed information about a single record
  * Enhanced in Phase 2 with better organization and features

From 3c4e20eb803e7ea78ad70924e13075df3b9c9360 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Feb 2026 14:30:08 +0000
Subject: [PATCH 3/3] docs: update ROADMAP with Airtable-style Feed/Chatter UI
 implementation status

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 ROADMAP.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 7d6107442..eab22d9b9 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -13,7 +13,7 @@
 
 ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind + Shadcn. It renders JSON metadata from the @objectstack/spec protocol into pixel-perfect, accessible, and interactive enterprise interfaces.
 
-**Where We Are:** Foundation is **solid and shipping** — 35 packages, 91+ components, 5,110+ tests, 78 Storybook stories, 42/42 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), and **Flow Designer** (P2.4) — all ✅ complete.
+**Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 5,177+ tests, 78 Storybook stories, 42/42 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), and **Feed/Chatter UI** (P1.5) — all ✅ complete.
 
 **What Remains:** The gap to **Airtable-level UX** is primarily in:
 1. ~~**AppShell** — No dynamic navigation renderer from spec JSON (last P0 blocker)~~ ✅ Complete
@@ -130,6 +130,16 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Comment search across all records
 - [x] Comment pinning/starring
 - [x] Activity feed filtering (comments only / field changes only)
+- [x] Airtable-style Feed/Chatter UI components (P0/P1/P2):
+  - [x] `FeedItem`/`FieldChangeEntry`/`Mention`/`Reaction`/`RecordSubscription` types
+  - [x] `RecordActivityTimeline` — unified timeline renderer (filter, pagination, actor display)
+  - [x] `RecordChatterPanel` — sidebar/inline/drawer panel (collapsible)
+  - [x] `CommentInput` — comment input with Ctrl+Enter submit
+  - [x] `FieldChangeItem` — field change history (old→new display values)
+  - [x] `MentionAutocomplete` — @mention autocomplete dropdown
+  - [x] `SubscriptionToggle` — bell notification toggle
+  - [x] `ReactionPicker` — emoji reaction selector
+  - [x] `ThreadedReplies` — collapsible comment reply threading
 
 ### P1.6 Console — Automation