feat(top-bar): enhance package switching functionality and update imports

Author: hotlong

apps/studio/src/components/top-bar.tsx

@@ -10,8 +10,9 @@
  * - Right segment: Global search placeholder, mode badge, ThemeToggle, UserMenu
  */
 
-import { Link, useLocation, useParams } from '@tanstack/react-router';
-import { useMemo } from 'react';
+import { Link, useLocation, useNavigate, useParams } from '@tanstack/react-router';
+import { useCallback, useMemo } from 'react';
+import type { InstalledPackage } from '@objectstack/spec/kernel';
 import { Separator } from '@/components/ui/separator';
 import {
   Breadcrumb,
@@ -28,9 +29,11 @@ import { Boxes, Cpu, Search } from 'lucide-react';
 import { config } from '@/lib/config';
 import { ProjectSwitcher } from '@/components/project-switcher';
 import { OrganizationSwitcher } from '@/components/organization-switcher';
+import { PackageSwitcher } from '@/components/package-switcher';
 import { UserMenu } from '@/components/user-menu';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { useActiveOrganizationId } from '@/hooks/useSession';
+import { useEnvAwarePackages } from '@/hooks/useProjectAwarePackages';
 
 const META_TYPE_LABELS: Record<string, string> = {
   action: 'Actions',
@@ -75,6 +78,7 @@ function SlashDivider() {
 
 export function TopBar() {
   const location = useLocation();
+  const navigate = useNavigate();
   const activeOrgId = useActiveOrganizationId();
   const params = useParams({ strict: false }) as {
     package?: string;
@@ -84,6 +88,38 @@ export function TopBar() {
     orgId?: string;
   };
 
+  // Load packages installed in the current project so users can switch
+  // between them from the top-bar (e.g. while viewing metadata).
+  const { packages } = useEnvAwarePackages(params.projectId);
+
+  // Resolve the current package from the URL segment. Match either the
+  // full reverse-domain id (e.g. com.example.crm) or the last segment (crm).
+  const selectedPackage = useMemo<InstalledPackage | null>(() => {
+    if (!params.package || !packages.length) return null;
+    return (
+      packages.find(
+        (p) =>
+          p.manifest?.id === params.package ||
+          p.manifest?.id?.split('.').pop() === params.package,
+      ) ?? null
+    );
+  }, [packages, params.package]);
+
+  const handleSelectPackage = useCallback(
+    (pkg: InstalledPackage) => {
+      const nextId = pkg.manifest?.id;
+      if (!nextId || !params.projectId) return;
+      // Switching package invalidates the current metadata path (the same
+      // type/name may not exist in the target package), so land on the
+      // package overview.
+      navigate({
+        to: '/projects/$projectId/$package',
+        params: { projectId: params.projectId, package: nextId },
+      });
+    },
+    [navigate, params.projectId],
+  );
+
   // Infer view type from pathname
   const viewType = useMemo(() => {
     const pathname = location.pathname;
@@ -182,6 +218,16 @@ export function TopBar() {
           {!config.singleProject && <OrganizationSwitcher />}
           {(!config.singleProject && activeOrgId) && <SlashDivider />}
           {!config.singleProject && <ProjectSwitcher />}
+          {params.projectId && params.package && (
+            <>
+              <SlashDivider />
+              <PackageSwitcher
+                packages={packages}
+                selectedPackage={selectedPackage}
+                onSelectPackage={handleSelectPackage}
+              />
+            </>
+          )}
         </div>
         {/* Mobile: Show only current page breadcrumb */}
         <div className="sm:hidden min-w-0 flex-1">

apps/studio/src/hooks/usePackages.ts

@@ -5,19 +5,15 @@ import { useClient } from '@objectstack/client-react';
 import type { InstalledPackage } from '@objectstack/spec/kernel';
 
 export interface UsePackagesOptions {
-  /**
-   * When `'project'` (default), exclude platform-scoped packages (they are
-   * runtime-global, not env-installable). When `'platform'`, return ONLY
-   * platform-scoped packages — used by the platform pseudo-project surface.
-   */
-  scope?: 'project' | 'platform';
+  // Reserved for future filtering options. Scope-based filtering has been
+  // intentionally removed — every installed package (system + project) is
+  // visible from every surface so the user can always switch between them.
 }
 
 /**
  * Hook to fetch and manage installed packages
  */
-export function usePackages(options: UsePackagesOptions = {}) {
-  const { scope = 'project' } = options;
+export function usePackages(_options: UsePackagesOptions = {}) {
   const client = useClient();
   const [packages, setPackages] = useState<InstalledPackage[]>([]);
   const [selectedPackage, setSelectedPackage] = useState<InstalledPackage | null>(null);
@@ -30,14 +26,12 @@ export function usePackages(options: UsePackagesOptions = {}) {
       try {
         const result = await client.packages.list();
         const all: InstalledPackage[] = result?.packages || [];
-        // Always exclude dev-workspace (monorepo aggregator) and unversioned packages.
-        // Then narrow by scope.
+        // Exclude dev-workspace (monorepo aggregator) and unversioned packages;
+        // otherwise return every package regardless of `manifest.scope`.
         const items = all.filter((p) => {
           if (p.manifest?.version === '0.0.0') return false;
           if (p.manifest?.id === 'dev-workspace') return false;
-          const pkgScope = (p.manifest as any)?.scope;
-          if (scope === 'platform') return pkgScope === 'platform';
-          return pkgScope !== 'platform';
+          return true;
         });
         console.log('[App] Fetched packages:', items.map((p) => p.manifest?.name || p.manifest?.id));
         if (mounted) {
@@ -57,7 +51,7 @@ export function usePackages(options: UsePackagesOptions = {}) {
 
     loadPackages();
     return () => { mounted = false; };
-  }, [client, scope]);
+  }, [client]);
 
   return { packages, selectedPackage, setSelectedPackage };
 }

apps/studio/src/hooks/useProjectAwarePackages.ts

@@ -20,9 +20,7 @@ import { isPlatformProject } from '@/lib/platform-project';
  */
 export function useEnvAwarePackages(envId: string | undefined) {
   const isPlatform = isPlatformProject(envId);
-  const { packages: globalPkgs } = usePackages({
-    scope: isPlatform ? 'platform' : 'project',
-  });
+  const { packages: globalPkgs } = usePackages();
   const { packages: installedRecords } = useProjectPackages(envId);
 
   const [selectedPackage, setSelectedPackage] = useState<InstalledPackage | null>(null);