Merge pull request #560 from objectstack-ai/copilot/complete-roadmap-console-development

Author: hotlong

ROADMAP_CONSOLE.md

@@ -1,12 +1,22 @@
 import { defineStack } from '@objectstack/spec';
+import type { ObjectStackDefinition } from '@objectstack/spec';
 import crmConfigImport from '@object-ui/example-crm/objectstack.config';
 import todoConfigImport from '@object-ui/example-todo/objectstack.config';
 import kitchenSinkConfigImport from '@object-ui/example-kitchen-sink/objectstack.config';
 import { hotcrmObjects, hotcrmApps, mergeObjects } from '../../examples/hotcrm-bridge.js';
 
-const crmConfig = (crmConfigImport as any).default || crmConfigImport;
-const todoConfig = (todoConfigImport as any).default || todoConfigImport;
-const kitchenSinkConfig = (kitchenSinkConfigImport as any).default || kitchenSinkConfigImport;
+/** Resolve ESM default-export interop without `as any`. */
+type MaybeDefault<T> = T | { default: T };
+function resolveDefault<T>(mod: MaybeDefault<T>): T {
+  if (mod && typeof mod === 'object' && 'default' in mod) {
+    return (mod as { default: T }).default;
+  }
+  return mod as T;
+}
+
+const crmConfig = resolveDefault<ObjectStackDefinition>(crmConfigImport);
+const todoConfig = resolveDefault<ObjectStackDefinition>(todoConfigImport);
+const kitchenSinkConfig = resolveDefault<ObjectStackDefinition>(kitchenSinkConfigImport);
 
 // Patch CRM App Navigation to include Report using a supported navigation type
 // (type: 'url' passes schema validation while still routing correctly via React Router)
@@ -137,4 +147,4 @@ export const sharedConfig = {
   ]
 };
 
-export default defineStack(sharedConfig as any);
+export default defineStack(sharedConfig as Parameters<typeof defineStack>[0]);

apps/console/objectstack.shared.ts

@@ -1,9 +1,9 @@
 import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
-import { useState, useEffect, lazy, Suspense, useMemo, type ReactNode } from 'react';
+import { useState, useEffect, useCallback, lazy, Suspense, useMemo, type ReactNode } from 'react';
 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 } from '@object-ui/react';
+import { SchemaRendererProvider, useActionRunner } from '@object-ui/react';
 import type { ConnectionState } from './dataSource';
 import { AuthGuard, useAuth, PreviewBanner } from '@object-ui/auth';
 import { MetadataProvider, useMetadata } from './context/MetadataProvider';
@@ -92,6 +92,23 @@ export function AppContent() {
   const [refreshKey, setRefreshKey] = useState(0);
   const { addRecentItem } = useRecentItems();
 
+  // ActionRunner for CRUD dialog callbacks (Phase 2.9)
+  const { execute: executeAction, runner } = useActionRunner();
+
+  useEffect(() => {
+    runner.registerHandler('crud_success', async (action) => {
+      setIsDialogOpen(false);
+      setRefreshKey(k => k + 1);
+      toast.success(action.params?.message ?? 'Record saved successfully');
+      return { success: true, reload: true };
+    });
+
+    runner.registerHandler('dialog_cancel', async () => {
+      setIsDialogOpen(false);
+      return { success: true };
+    });
+  }, [runner]);
+
   // Branding is now applied by AppShell via ConsoleLayout
 
   useEffect(() => {
@@ -123,6 +140,22 @@ export function AppContent() {
 
   const currentObjectDef = allObjects.find((o: any) => o.name === objectNameFromPath);
 
+  const handleCrudSuccess = useCallback(() => {
+    const label = currentObjectDef?.label || 'Record';
+    executeAction({
+      type: 'crud_success',
+      params: {
+        message: editingRecord
+          ? `${label} updated successfully`
+          : `${label} created successfully`,
+      },
+    });
+  }, [executeAction, editingRecord, currentObjectDef?.label]);
+
+  const handleDialogCancel = useCallback(() => {
+    executeAction({ type: 'dialog_cancel' });
+  }, [executeAction]);
+
   // Track recent items on route change
   // Only depend on location.pathname — the sole external trigger.
   // All other values (activeApp, allObjects, cleanParts) are derived from
@@ -323,16 +356,8 @@ export function AppContent() {
                                         .filter(([_, f]: [string, any]) => evaluateVisibility(f.visible, expressionEvaluator))
                                         .map(([key]: [string, any]) => key))
                                 : [],
-                            onSuccess: () => {
-                                setIsDialogOpen(false);
-                                setRefreshKey(k => k + 1);
-                                toast.success(
-                                  editingRecord
-                                    ? `${currentObjectDef?.label} updated successfully`
-                                    : `${currentObjectDef?.label} created successfully`
-                                );
-                            }, 
-                            onCancel: () => setIsDialogOpen(false),
+                            onSuccess: handleCrudSuccess, 
+                            onCancel: handleDialogCancel,
                             showSubmit: true,
                             showCancel: true,
                             submitText: 'Save Record',

apps/console/src/App.tsx

@@ -0,0 +1,117 @@
+/**
+ * ActivityFeed
+ *
+ * Sidebar panel that displays recent activity items (create, update, delete,
+ * comment). Opens as a slide-out Sheet triggered by a bell icon button.
+ * Phase 17 L1 – local state only, no server integration.
+ * @module
+ */
+
+import { useState } from 'react';
+import {
+  Button,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@object-ui/components';
+import { Bell, Plus, Pencil, Trash2, MessageSquare } from 'lucide-react';
+
+export interface ActivityItem {
+  id: string;
+  type: 'create' | 'update' | 'delete' | 'comment';
+  objectName: string;
+  recordId?: string;
+  user: string;
+  description: string;
+  timestamp: string;
+}
+
+export interface ActivityFeedProps {
+  activities?: ActivityItem[];
+  className?: string;
+}
+
+const typeConfig: Record<
+  ActivityItem['type'],
+  { icon: React.ElementType; color: string }
+> = {
+  create: { icon: Plus, color: 'text-green-500' },
+  update: { icon: Pencil, color: 'text-blue-500' },
+  delete: { icon: Trash2, color: 'text-red-500' },
+  comment: { icon: MessageSquare, color: 'text-amber-500' },
+};
+
+/** Format an ISO timestamp as a relative string (e.g. "2m ago"). */
+function formatRelativeTime(iso: string): string {
+  const ms = new Date(iso).getTime();
+  if (Number.isNaN(ms)) return '';
+  const seconds = Math.floor((Date.now() - ms) / 1000);
+  if (seconds < 60) return `${Math.max(seconds, 0)}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export function ActivityFeed({ activities = [], className }: ActivityFeedProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={className ?? 'h-8 w-8'}
+          aria-label="Activity feed"
+        >
+          <Bell className="h-4 w-4" />
+          {activities.length > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-primary text-[9px] font-bold text-primary-foreground flex items-center justify-center">
+              {activities.length > 9 ? '9+' : activities.length}
+            </span>
+          )}
+        </Button>
+      </SheetTrigger>
+
+      <SheetContent side="right" className="w-80 sm:w-96">
+        <SheetHeader>
+          <SheetTitle>Recent Activity</SheetTitle>
+        </SheetHeader>
+
+        {activities.length === 0 ? (
+          <div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
+            <Bell className="h-8 w-8 opacity-40" />
+            <p className="text-sm">No recent activity</p>
+          </div>
+        ) : (
+          <ul className="mt-4 space-y-1 overflow-y-auto max-h-[calc(100vh-8rem)]">
+            {activities.map((item) => {
+              const { icon: Icon, color } = typeConfig[item.type];
+              return (
+                <li
+                  key={item.id}
+                  className="flex items-start gap-3 rounded-md px-2 py-2 hover:bg-muted/50 transition-colors"
+                >
+                  <span className={`mt-0.5 shrink-0 ${color}`}>
+                    <Icon className="h-4 w-4" />
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm leading-snug">{item.description}</p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {item.user} · {formatRelativeTime(item.timestamp)}
+                    </p>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/console/src/components/ActivityFeed.tsx

@@ -6,11 +6,13 @@
  * the object field definitions.
  */
 
-import { useState, useEffect } from 'react';
+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 { Database } from 'lucide-react';
+import { CommentThread, type Comment } from '@object-ui/collaboration';
+import { useAuth } from '@object-ui/auth';
+import { Database, MessageSquare } from 'lucide-react';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDetail } from './skeletons';
 
@@ -20,12 +22,42 @@ interface RecordDetailViewProps {
   onEdit: (record: any) => void;
 }
 
+const MOCK_USER = { id: 'current-user', name: 'Demo User' };
+
 export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps) {
   const { objectName, recordId } = useParams();
   const { showDebug, toggleDebug } = useMetadataInspector();
+  const { user } = useAuth();
   const [isLoading, setIsLoading] = useState(true);
+  const [comments, setComments] = useState<Comment[]>([]);
   const objectDef = objects.find((o: any) => o.name === objectName);
 
+  const currentUser = user
+    ? { id: user.id, name: user.name, avatar: user.image }
+    : MOCK_USER;
+
+  const handleAddComment = useCallback(
+    (content: string, mentions: string[], parentId?: string) => {
+      const newComment: Comment = {
+        id: crypto.randomUUID(),
+        author: currentUser,
+        content,
+        mentions,
+        createdAt: new Date().toISOString(),
+        parentId,
+      };
+      setComments(prev => [...prev, newComment]);
+    },
+    [currentUser],
+  );
+
+  const handleDeleteComment = useCallback(
+    (commentId: string) => {
+      setComments(prev => prev.filter(c => c.id !== commentId));
+    },
+    [],
+  );
+
   useEffect(() => {
     // Reset loading on navigation; the actual DetailView handles data fetching
     setIsLoading(true);
@@ -87,6 +119,21 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
             dataSource={dataSource}
             onEdit={() => onEdit({ _id: recordId, id: recordId })}
           />
+
+          {/* Comments & Discussion */}
+          <div className="mt-6 border-t pt-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
+              <MessageSquare className="h-4 w-4" />
+              Comments & Discussion
+            </h3>
+            <CommentThread
+              threadId={`${objectName}:${recordId}`}
+              comments={comments}
+              currentUser={currentUser}
+              onAddComment={handleAddComment}
+              onDeleteComment={handleDeleteComment}
+            />
+          </div>
         </div>
         <MetadataPanel
           open={showDebug}