Merge branch 'main' of https://github.com/objectstack-ai/spec

Author: hotlong

apps/console/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@example/app-crm": "workspace:*",
     "@example/app-todo": "workspace:*",
     "@objectstack/client": "workspace:*",
     "@objectstack/client-react": "workspace:*",

apps/console/src/App.tsx

@@ -9,6 +9,7 @@ import { Toaster } from "@/components/ui/toaster"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 import { Database, Layers, Sparkles, Zap } from 'lucide-react';
 import { getApiBaseUrl, config } from './lib/config';
+import { appPackages, type AppPackage } from './mocks/browser';
 
 function DashboardWelcome() {
   return (
@@ -121,6 +122,7 @@ export default function App() {
   const [selectedObject, setSelectedObject] = useState<string | null>(null);
   const [editingRecord, setEditingRecord] = useState<any>(null);
   const [showForm, setShowForm] = useState(false);
+  const [selectedApp, setSelectedApp] = useState<AppPackage>(appPackages[0]);
 
   useEffect(() => {
     // Use the configured API base URL based on runtime mode (MSW or Server)
@@ -152,16 +154,26 @@ export default function App() {
     setEditingRecord(null);
   }
 
+  function handleSelectApp(app: AppPackage) {
+    setSelectedApp(app);
+    setSelectedObject(null);
+    setShowForm(false);
+    setEditingRecord(null);
+  }
+
   return (
     <SidebarProvider>
       <AppSidebar 
         client={client} 
         selectedObject={selectedObject} 
-        onSelectObject={(name) => setSelectedObject(name || null)} 
+        onSelectObject={(name) => setSelectedObject(name || null)}
+        apps={appPackages}
+        selectedApp={selectedApp}
+        onSelectApp={handleSelectApp}
       />
-      <main className="flex flex-1 flex-col bg-background">
-        <SiteHeader selectedObject={selectedObject} />
-        <div className="flex flex-1 flex-col">
+      <main className="flex min-w-0 flex-1 flex-col bg-background">
+        <SiteHeader selectedObject={selectedObject} appLabel={selectedApp?.label} />
+        <div className="flex flex-1 flex-col overflow-hidden">
           {selectedObject ? (
             <div className="flex flex-1 flex-col gap-4 p-4">
               {client && (

apps/console/src/components/ObjectDataTable.tsx

@@ -261,12 +261,12 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
             </CardHeader>
 
             <CardContent className="p-0">
-                <div className="overflow-auto">
+                <div className="overflow-x-auto">
                     <Table>
                         <TableHeader>
                             <TableRow className="hover:bg-transparent">
                                 {columns.map(col => (
-                                    <TableHead key={col.name} className="font-medium">
+                                    <TableHead key={col.name} className="font-medium whitespace-nowrap">
                                         <div className="flex items-center gap-1.5">
                                             {col.label}
                                             <Badge variant="outline" className="text-[10px] px-1 py-0 font-normal opacity-50 hidden lg:inline-flex">
@@ -275,7 +275,7 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
                                         </div>
                                     </TableHead>
                                 ))}
-                                <TableHead className="w-[60px]"></TableHead>
+                                <TableHead className="w-15 sticky right-0 bg-background"></TableHead>
                             </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -288,7 +288,7 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
                                             <CellValue value={record[col.name]} type={col.type} />
                                         </TableCell>
                                     ))}
-                                    <TableCell className="py-2.5">
+                                    <TableCell className="py-2.5 sticky right-0 bg-background">
                                         <DropdownMenu>
                                             <DropdownMenuTrigger asChild>
                                                 <Button