feat: implement L2 features - presence avatars, kanban swimlanes, shared view password, undo toast, comment sorting & reactions

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/App.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback, lazy, Suspense, useMemo, type ReactNo
 import { ObjectForm } from '@object-ui/plugin-form';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { toast } from 'sonner';
-import { SchemaRendererProvider, useActionRunner } from '@object-ui/react';
+import { SchemaRendererProvider, useActionRunner, useGlobalUndo } from '@object-ui/react';
 import type { ConnectionState } from './dataSource';
 import { AuthGuard, useAuth, PreviewBanner } from '@object-ui/auth';
 import { MetadataProvider, useMetadata } from './context/MetadataProvider';
@@ -95,6 +95,23 @@ export function AppContent() {
   // ActionRunner for CRUD dialog callbacks (Phase 2.9)
   const { execute: executeAction, runner } = useActionRunner();
 
+  // Global Undo/Redo with toast notifications (Phase 16 L2)
+  const { redo } = useGlobalUndo({
+    dataSource: dataSource ?? undefined,
+    onUndo: (op) => {
+      toast.info(`Undo: ${op.description}`, {
+        duration: 4000,
+      });
+      setRefreshKey(k => k + 1);
+    },
+    onRedo: (op) => {
+      toast.info(`Redo: ${op.description}`, {
+        duration: 3000,
+      });
+      setRefreshKey(k => k + 1);
+    },
+  });
+
   useEffect(() => {
     runner.registerHandler('crud_success', async (action) => {
       setIsDialogOpen(false);

apps/console/src/components/AppHeader.tsx

@@ -27,6 +27,7 @@ import {
 import { Search, HelpCircle, ChevronDown } from 'lucide-react';
 
 import { useOffline } from '@object-ui/react';
+import { PresenceAvatars, type PresenceUser } from '@object-ui/collaboration';
 import { ModeToggle } from './mode-toggle';
 import { LocaleSwitcher } from './LocaleSwitcher';
 import { ConnectionStatus } from './ConnectionStatus';
@@ -40,10 +41,18 @@ function humanizeSlug(slug: string): string {
     .replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
-export function AppHeader({ appName, objects, connectionState }: { appName: string, objects: any[], connectionState?: ConnectionState }) {
+// Demo presence users for local/mock mode
+const MOCK_PRESENCE_USERS: PresenceUser[] = [
+  { userId: 'u1', userName: 'Alice Chen', color: '#3498db', status: 'active', lastActivity: new Date().toISOString() },
+  { userId: 'u2', userName: 'Bob Smith', color: '#2ecc71', status: 'idle', lastActivity: new Date().toISOString() },
+  { userId: 'u3', userName: 'Carol Li', color: '#e74c3c', status: 'active', lastActivity: new Date().toISOString() },
+];
+
+export function AppHeader({ appName, objects, connectionState, presenceUsers }: { appName: string, objects: any[], connectionState?: ConnectionState, presenceUsers?: PresenceUser[] }) {
     const location = useLocation();
     const params = useParams();
     const { isOnline } = useOffline();
+    const activeUsers = presenceUsers ?? MOCK_PRESENCE_USERS;
 
     // Parse the current route to build breadcrumbs
     const pathParts = location.pathname.split('/').filter(Boolean);
@@ -177,6 +186,13 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
 
                 {/* Connection Status */}
                 {connectionState && <ConnectionStatus state={connectionState} />}
+
+                {/* Presence Avatars */}
+                {activeUsers.length > 0 && (
+                  <div className="hidden md:flex items-center shrink-0" title="Users currently online">
+                    <PresenceAvatars users={activeUsers} size="sm" maxVisible={3} showStatus />
+                  </div>
+                )}
 
                 {/* Search - Desktop — opens ⌘K command palette */}
                 <button

apps/console/src/components/RecordDetailView.tsx

@@ -10,9 +10,9 @@ import { useState, useEffect, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import { DetailView } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
-import { CommentThread, type Comment } from '@object-ui/collaboration';
+import { CommentThread, PresenceAvatars, type Comment, type PresenceUser } from '@object-ui/collaboration';
 import { useAuth } from '@object-ui/auth';
-import { Database, MessageSquare } from 'lucide-react';
+import { Database, MessageSquare, Users } from 'lucide-react';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDetail } from './skeletons';
 
@@ -24,6 +24,12 @@ interface RecordDetailViewProps {
 
 const MOCK_USER = { id: 'current-user', name: 'Demo User' };
 
+// Demo presence users viewing the current record
+const MOCK_RECORD_VIEWERS: PresenceUser[] = [
+  { userId: 'u1', userName: 'Alice Chen', color: '#3498db', status: 'active', lastActivity: new Date().toISOString() },
+  { userId: 'u3', userName: 'Carol Li', color: '#e74c3c', status: 'active', lastActivity: new Date().toISOString() },
+];
+
 export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps) {
   const { objectName, recordId } = useParams();
   const { showDebug, toggleDebug } = useMetadataInspector();
@@ -58,6 +64,24 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
     [],
   );
 
+  const handleReaction = useCallback(
+    (commentId: string, emoji: string) => {
+      setComments(prev => prev.map(c => {
+        if (c.id !== commentId) return c;
+        const reactions = { ...(c.reactions || {}) };
+        const userIds = reactions[emoji] || [];
+        if (userIds.includes(currentUser.id)) {
+          reactions[emoji] = userIds.filter(id => id !== currentUser.id);
+          if (reactions[emoji].length === 0) delete reactions[emoji];
+        } else {
+          reactions[emoji] = [...userIds, currentUser.id];
+        }
+        return { ...c, reactions };
+      }));
+    },
+    [currentUser.id],
+  );
+
   useEffect(() => {
     // Reset loading on navigation; the actual DetailView handles data fetching
     setIsLoading(true);
@@ -108,7 +132,14 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
 
   return (
     <div className="h-full bg-background overflow-hidden flex flex-col relative">
-      <div className="absolute top-2 sm:top-4 right-2 sm:right-4 z-50">
+      <div className="absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2">
+        {/* Presence: who else is viewing this record */}
+        {MOCK_RECORD_VIEWERS.length > 0 && (
+          <div className="flex items-center gap-1.5" title="Users viewing this record">
+            <Users className="h-3.5 w-3.5 text-muted-foreground" />
+            <PresenceAvatars users={MOCK_RECORD_VIEWERS} size="sm" maxVisible={4} showStatus />
+          </div>
+        )}
         <MetadataToggle open={showDebug} onToggle={toggleDebug} />
       </div>
 
@@ -132,6 +163,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
               currentUser={currentUser}
               onAddComment={handleAddComment}
               onDeleteComment={handleDeleteComment}
+              onReaction={handleReaction}
             />
           </div>
         </div>

packages/collaboration/src/CommentThread.tsx

@@ -37,6 +37,8 @@ export interface CommentThreadProps {
   onDeleteComment?: (commentId: string) => void;
   /** Callback when thread is resolved/reopened */
   onResolve?: (resolved: boolean) => void;
+  /** Callback when a reaction is toggled */
+  onReaction?: (commentId: string, emoji: string) => void;
   /** Whether the thread is resolved */
   resolved?: boolean;
   /** Additional className */
@@ -192,6 +194,48 @@ const styles = {
     cursor: 'pointer',
     padding: 0,
   },
+  sortSelect: {
+    background: 'none',
+    border: '1px solid #e2e8f0',
+    borderRadius: '4px',
+    padding: '2px 6px',
+    fontSize: '11px',
+    color: '#64748b',
+    cursor: 'pointer',
+    outline: 'none',
+  },
+  reactionBar: {
+    display: 'flex',
+    gap: '4px',
+    marginTop: '4px',
+    flexWrap: 'wrap' as const,
+  },
+  reactionBtn: {
+    background: 'none',
+    border: '1px solid #e2e8f0',
+    borderRadius: '12px',
+    padding: '1px 6px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '2px',
+    lineHeight: '1.5',
+  },
+  reactionBtnActive: {
+    backgroundColor: '#eff6ff',
+    borderColor: '#93c5fd',
+  },
+  reactionPicker: {
+    background: 'none',
+    border: '1px solid #e2e8f0',
+    borderRadius: '12px',
+    padding: '1px 6px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    color: '#94a3b8',
+    lineHeight: '1.5',
+  },
   inputArea: {
     display: 'flex',
     gap: '8px',
@@ -281,6 +325,7 @@ export function CommentThread({
   onEditComment,
   onDeleteComment,
   onResolve,
+  onReaction,
   resolved = false,
   className,
 }: CommentThreadProps): React.ReactElement {
@@ -290,6 +335,7 @@ export function CommentThread({
   const [editValue, setEditValue] = useState('');
   const [mentionQuery, setMentionQuery] = useState<string | null>(null);
   const [mentionIndex, setMentionIndex] = useState(0);
+  const [sortOrder, setSortOrder] = useState<'newest' | 'oldest'>('oldest');
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const filteredMentions = useMemo(() => {
@@ -390,8 +436,14 @@ export function CommentThread({
   }, [filteredMentions.length, mentionIndex]);
 
   const rootComments = useMemo(
-    () => comments.filter(c => !c.parentId),
-    [comments],
+    () => {
+      const roots = comments.filter(c => !c.parentId);
+      if (sortOrder === 'newest') {
+        return [...roots].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+      }
+      return roots;
+    },
+    [comments, sortOrder],
   );
   const replies = useMemo(
     () => comments.filter(c => c.parentId),
@@ -446,12 +498,39 @@ export function CommentThread({
               }, 'Cancel'),
             )
           : React.createElement('div', { style: styles.content }, renderContent(comment.content)),
+        // Reactions display
+        !isEditing && comment.reactions && Object.keys(comment.reactions).length > 0 && React.createElement('div', { style: styles.reactionBar },
+          Object.entries(comment.reactions).map(([emoji, userIds]) =>
+            React.createElement('button', {
+              key: emoji,
+              style: {
+                ...styles.reactionBtn,
+                ...(userIds.includes(currentUser.id) ? styles.reactionBtnActive : {}),
+              },
+              onClick: () => onReaction?.(comment.id, emoji),
+              title: userIds.length === 1 ? '1 reaction' : `${userIds.length} reactions`,
+            }, `${emoji} ${userIds.length}`),
+          ),
+          onReaction && React.createElement('button', {
+            style: styles.reactionPicker,
+            onClick: () => onReaction(comment.id, '👍'),
+            title: 'Add reaction',
+          }, '+'),
+        ),
         // Actions
         !isEditing && React.createElement('div', { style: styles.actions },
           React.createElement('button', {
             style: styles.actionBtn,
             onClick: () => setReplyTo(comment.id),
           }, 'Reply'),
+          onReaction && React.createElement('button', {
+            style: styles.actionBtn,
+            onClick: () => onReaction(comment.id, '👍'),
+          }, '👍'),
+          onReaction && React.createElement('button', {
+            style: styles.actionBtn,
+            onClick: () => onReaction(comment.id, '❤️'),
+          }, '❤️'),
           isOwner && onEditComment && React.createElement('button', {
             style: styles.actionBtn,
             onClick: () => handleEdit(comment.id),
@@ -476,10 +555,21 @@ export function CommentThread({
         `${comments.length} comment${comments.length !== 1 ? 's' : ''}`,
         resolved ? ' · Resolved' : '',
       ),
-      onResolve && React.createElement('button', {
-        style: styles.resolveBtn,
-        onClick: () => onResolve(!resolved),
-      }, resolved ? 'Reopen' : 'Resolve'),
+      React.createElement('div', { style: { display: 'flex', gap: '6px', alignItems: 'center' } },
+        React.createElement('select', {
+          value: sortOrder,
+          onChange: (e: React.ChangeEvent<HTMLSelectElement>) => setSortOrder(e.target.value as 'newest' | 'oldest'),
+          style: styles.sortSelect,
+          'aria-label': 'Sort comments',
+        },
+          React.createElement('option', { value: 'oldest' }, 'Oldest'),
+          React.createElement('option', { value: 'newest' }, 'Newest'),
+        ),
+        onResolve && React.createElement('button', {
+          style: styles.resolveBtn,
+          onClick: () => onResolve(!resolved),
+        }, resolved ? 'Reopen' : 'Resolve'),
+      ),
     ),
     // Comments list
     React.createElement('div', { style: styles.commentList },