feat: refactor app handling to use InstalledPackage type and update package management logic

Author: hotlong

apps/console/src/App.tsx

@@ -10,7 +10,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 type { AppPackage } from './mocks/browser';
+import type { InstalledPackage } from '@objectstack/spec/kernel';
 
 function DashboardWelcome() {
   return (
@@ -120,8 +120,8 @@ function DashboardWelcome() {
 
 export default function App() {
   const [client, setClient] = useState<ObjectStackClient | null>(null);
-  const [apps, setApps] = useState<AppPackage[]>([]);
-  const [selectedApp, setSelectedApp] = useState<AppPackage | null>(null);
+  const [packages, setPackages] = useState<InstalledPackage[]>([]);
+  const [selectedPackage, setSelectedPackage] = useState<InstalledPackage | null>(null);
   const [selectedObject, setSelectedObject] = useState<string | null>(null);
   const [selectedView, setSelectedView] = useState<'dashboard' | 'packages' | 'object'>('dashboard');
   const [editingRecord, setEditingRecord] = useState<any>(null);
@@ -138,29 +138,29 @@ export default function App() {
     setClient(newClient);
   }, []);
 
-  // 2. Fetch app list from the server API (not hardcoded)
+  // 2. Fetch installed packages from the server API
   useEffect(() => {
     if (!client) return;
     let mounted = true;
 
-    async function loadApps() {
+    async function loadPackages() {
       try {
-        // Spec: GET /api/v1/meta/apps → GetMetaItemsResponse = { type: 'apps', items: AppSchema[] }
-        const result: any = await client!.meta.getItems('apps');
-        const items: AppPackage[] = result?.items || result?.value || (Array.isArray(result) ? result : []);
+        // Spec: GET /api/v1/packages → ListPackagesResponse = { packages: InstalledPackage[], total }
+        const result = await client!.packages.list();
+        const items: InstalledPackage[] = result?.packages || [];
 
-        console.log('[App] Fetched apps from API:', items.map((a: any) => a.label || a.name));
+        console.log('[App] Fetched packages from API:', items.map((p) => p.manifest?.name || p.manifest?.id));
 
         if (mounted && items.length > 0) {
-          setApps(items);
-          setSelectedApp(items[0]);
+          setPackages(items);
+          setSelectedPackage(items[0]);
         }
       } catch (err) {
-        console.error('[App] Failed to fetch apps from API:', err);
+        console.error('[App] Failed to fetch packages from API:', err);
       }
     }
 
-    loadApps();
+    loadPackages();
     return () => { mounted = false; };
   }, [client]);
 
@@ -183,8 +183,8 @@ export default function App() {
     setEditingRecord(null);
   }
 
-  function handleSelectApp(app: AppPackage) {
-    setSelectedApp(app);
+  function handleSelectPackage(pkg: InstalledPackage) {
+    setSelectedPackage(pkg);
     setSelectedObject(null);
     setSelectedView('dashboard');
     setShowForm(false);
@@ -214,14 +214,14 @@ export default function App() {
         client={client} 
         selectedObject={selectedObject} 
         onSelectObject={handleSelectObject}
-        apps={apps}
-        selectedApp={selectedApp}
-        onSelectApp={handleSelectApp}
+        packages={packages}
+        selectedPackage={selectedPackage}
+        onSelectPackage={handleSelectPackage}
         onSelectView={handleSelectView}
         selectedView={selectedView}
       />
       <main className="flex min-w-0 flex-1 flex-col bg-background">
-        <SiteHeader selectedObject={selectedObject} appLabel={selectedApp?.label || selectedApp?.name} />
+        <SiteHeader selectedObject={selectedObject} appLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id} />
         <div className="flex flex-1 flex-col overflow-hidden">
           {selectedView === 'object' && selectedObject ? (
             <div className="flex flex-1 flex-col gap-4 p-4">

apps/console/src/components/app-sidebar.tsx

@@ -8,8 +8,6 @@ import {
   Sparkles,
   Search,
   Check,
-  Briefcase,
-  CheckSquare,
   Zap,
   BarChart3,
   FileText,
@@ -24,7 +22,7 @@ import {
 } from "lucide-react"
 import { useState, useEffect, useCallback } from "react"
 import { ObjectStackClient } from '@objectstack/client';
-import type { AppPackage } from "@/mocks/browser";
+import type { InstalledPackage } from '@objectstack/spec/kernel';
 
 import {
   Sidebar,
@@ -53,11 +51,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
-const APP_ICONS: Record<string, React.ElementType> = {
-  'check-square': CheckSquare,
-  'briefcase': Briefcase,
-};
-
 /** Icon & label hints for well-known metadata types */
 const META_TYPE_HINTS: Record<string, { label: string; icon: LucideIcon }> = {
   object:       { label: 'Objects',       icon: Package },
@@ -89,18 +82,32 @@ function getTypeIcon(type: string): LucideIcon {
 /** Types that are internal / should be hidden from the sidebar */
 const HIDDEN_TYPES = new Set(['plugin', 'plugins', 'kind', 'app', 'apps', 'package']);
 
+/** Icon mapping for package types */
+const PKG_TYPE_ICONS: Record<string, LucideIcon> = {
+  app: AppWindow,
+  plugin: Layers,
+  driver: Database,
+  server: Globe,
+  ui: Sparkles,
+  theme: Sparkles,
+  agent: Bot,
+  module: Package,
+  objectql: Database,
+  adapter: Zap,
+};
+
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   client: ObjectStackClient | null;
   selectedObject: string | null;
   onSelectObject: (name: string) => void;
-  apps: AppPackage[];
-  selectedApp: AppPackage | null;
-  onSelectApp: (app: AppPackage) => void;
+  packages: InstalledPackage[];
+  selectedPackage: InstalledPackage | null;
+  onSelectPackage: (pkg: InstalledPackage) => void;
   onSelectView?: (view: 'dashboard' | 'packages') => void;
   selectedView?: 'dashboard' | 'packages' | 'object';
 }
 
-export function AppSidebar({ client, selectedObject, onSelectObject, apps, selectedApp, onSelectApp, onSelectView, selectedView, ...props }: AppSidebarProps) {
+export function AppSidebar({ client, selectedObject, onSelectObject, packages, selectedPackage, onSelectPackage, onSelectView, selectedView, ...props }: AppSidebarProps) {
   const [loading, setLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   // Dynamic metadata: type -> items[]
@@ -165,55 +172,60 @@ export function AppSidebar({ client, selectedObject, onSelectObject, apps, selec
     label.toLowerCase().includes(searchQuery.toLowerCase()) ||
     name.toLowerCase().includes(searchQuery.toLowerCase());
 
-  const AppIcon = selectedApp?.icon ? (APP_ICONS[selectedApp.icon] || Sparkles) : Sparkles;
+  const SelectedPkgIcon = selectedPackage ? (PKG_TYPE_ICONS[selectedPackage.manifest?.type] || Package) : Sparkles;
 
   return (
     <Sidebar {...props}>
       <SidebarHeader className="border-b">
-        {/* App Switcher */}
+        {/* Package Switcher */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <button className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-sidebar-accent transition-colors">
               <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <AppIcon className="h-4 w-4" />
+                <SelectedPkgIcon className="h-4 w-4" />
               </div>
               <div className="flex flex-1 flex-col gap-0.5 leading-none overflow-hidden">
                 <span className="truncate font-semibold text-sm">
-                  {selectedApp ? (selectedApp.label || selectedApp.name) : 'ObjectStack'}
+                  {selectedPackage ? (selectedPackage.manifest?.name || selectedPackage.manifest?.id) : 'ObjectStack'}
                 </span>
                 <span className="truncate text-xs text-muted-foreground">
-                  {selectedApp ? (selectedApp.description || 'No description') : 'Loading apps...'}
+                  {selectedPackage ? `v${selectedPackage.manifest?.version} · ${selectedPackage.manifest?.type}` : 'Loading packages...'}
                 </span>
               </div>
               <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 text-muted-foreground" />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] min-w-64" align="start" sideOffset={4}>
-            <DropdownMenuLabel>Applications</DropdownMenuLabel>
+            <DropdownMenuLabel>Installed Packages</DropdownMenuLabel>
             <DropdownMenuSeparator />
-            {apps.map((app) => {
-              const Icon = app.icon ? (APP_ICONS[app.icon] || Package) : Package;
+            {packages.map((pkg) => {
+              const Icon = PKG_TYPE_ICONS[pkg.manifest?.type] || Package;
+              const isSelected = selectedPackage?.manifest?.id === pkg.manifest?.id;
               return (
                 <DropdownMenuItem
-                  key={app.name}
-                  onClick={() => onSelectApp(app)}
+                  key={pkg.manifest?.id}
+                  onClick={() => onSelectPackage(pkg)}
                   className="gap-2 py-2"
                 >
                   <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary">
                     <Icon className="h-3.5 w-3.5" />
                   </div>
                   <div className="flex flex-1 flex-col leading-tight">
-                    <span className="text-sm font-medium">{app.label || app.name}</span>
-                    {app.description && (
-                      <span className="text-xs text-muted-foreground">{app.description}</span>
-                    )}
+                    <span className="text-sm font-medium">{pkg.manifest?.name || pkg.manifest?.id}</span>
+                    <span className="text-xs text-muted-foreground">
+                      v{pkg.manifest?.version} · {pkg.manifest?.type}
+                      {!pkg.enabled && ' · disabled'}
+                    </span>
                   </div>
-                  {selectedApp?.name === app.name && (
+                  {isSelected && (
                     <Check className="h-4 w-4 text-primary" />
                   )}
                 </DropdownMenuItem>
               );
             })}
+            {packages.length === 0 && (
+              <div className="px-2 py-4 text-center text-xs text-muted-foreground">No packages installed</div>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarHeader>

packages/objectql/src/engine.test.ts

@@ -11,6 +11,14 @@ vi.mock('./registry', () => {
       getObject: vi.fn((name) => mockObjects.get(name)),
       registerObject: vi.fn((obj) => mockObjects.set(obj.name, obj)),
       registerKind: vi.fn(),
+      registerItem: vi.fn(),
+      registerApp: vi.fn(),
+      installPackage: vi.fn((manifest) => ({
+        manifest,
+        status: 'installed',
+        enabled: true,
+        installedAt: new Date().toISOString(),
+      })),
       metadata: {
         get: vi.fn(() => mockObjects) // Expose for verification if needed
       }