feat: enhance client usage in multiple components to support project-specific data handling

Author: hotlong

apps/studio/src/components/ObjectDataForm.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { useClient } from '@objectstack/client-react';
+import { useParams } from '@tanstack/react-router';
+import { useScopedClient } from '@/hooks/useObjectStackClient';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -21,7 +23,10 @@ interface ObjectDataFormProps {
 }
 
 export function ObjectDataForm({ objectApiName, record, onSuccess, onCancel }: ObjectDataFormProps) {
-    const client = useClient();
+    const unscopedClient = useClient();
+    const params = useParams({ strict: false }) as { projectId?: string };
+    const scopedClient = useScopedClient(params.projectId);
+    const client: any = scopedClient ?? unscopedClient;
     const [def, setDef] = useState<any>(null);
     const [formData, setFormData] = useState<any>({});
     const [loading, setLoading] = useState(false);

apps/studio/src/components/ObjectSchemaInspector.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { useClient } from '@objectstack/client-react';
+import { useParams } from '@tanstack/react-router';
+import { useScopedClient } from '@/hooks/useObjectStackClient';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
@@ -65,7 +67,10 @@ function CopyButton({ text }: { text: string }) {
 }
 
 export function ObjectSchemaInspector({ objectApiName }: ObjectSchemaInspectorProps) {
-  const client = useClient();
+  const unscopedClient = useClient();
+  const params = useParams({ strict: false }) as { projectId?: string };
+  const scopedClient = useScopedClient(params.projectId);
+  const client: any = scopedClient ?? unscopedClient;
   const [def, setDef] = useState<any>(null);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');

apps/studio/src/plugins/built-in/default-plugin.tsx

@@ -13,6 +13,8 @@
 import { useState, useEffect } from 'react';
 import { defineStudioPlugin } from '@objectstack/spec/studio';
 import { useClient } from '@objectstack/client-react';
+import { useParams } from '@tanstack/react-router';
+import { useScopedClient } from '@/hooks/useObjectStackClient';
 import { MetadataInspector } from '@/components/MetadataInspector';
 import { CodeExporter } from '@/components/CodeExporter';
 import type { CodeExporterProps } from '@/components/CodeExporter';
@@ -39,7 +41,10 @@ function PreviewViewerComponent({ metadataType, metadataName, packageId }: Metad
 // ─── Code Viewer (Code Exporter) ─────────────────────────────────────
 
 function CodeViewerComponent({ metadataType, metadataName, data, packageId }: MetadataViewerProps) {
-  const client = useClient();
+  const unscopedClient = useClient();
+  const params = useParams({ strict: false }) as { projectId?: string };
+  const scopedClient = useScopedClient(params.projectId);
+  const client: any = scopedClient ?? unscopedClient;
   const [definition, setDefinition] = useState<Record<string, unknown> | null>(data ?? null);
   const [loading, setLoading] = useState(!data);
 

apps/studio/src/plugins/built-in/tool-playground-plugin.tsx

@@ -13,6 +13,8 @@
 import { useState, useEffect, useRef } from 'react';
 import { defineStudioPlugin } from '@objectstack/spec/studio';
 import { useClient } from '@objectstack/client-react';
+import { useParams } from '@tanstack/react-router';
+import { useScopedClient } from '@/hooks/useObjectStackClient';
 import type { StudioPlugin, MetadataViewerProps } from '../types';
 import type { Tool } from '@objectstack/spec/ai';
 import {
@@ -347,7 +349,10 @@ function ExecutionItem({ entry }: ExecutionItemProps) {
  * Tool Playground Viewer Component
  */
 function ToolPlaygroundViewer({ metadataType, metadataName, data, packageId }: MetadataViewerProps) {
-  const client = useClient();
+  const unscopedClient = useClient();
+  const params = useParams({ strict: false }) as { projectId?: string };
+  const scopedClient = useScopedClient(params.projectId);
+  const client: any = scopedClient ?? unscopedClient;
   const [tool, setTool] = useState<Tool | null>(data ?? null);
   const [loading, setLoading] = useState(!data);
   const [executing, setExecuting] = useState(false);

packages/runtime/src/multi-project-plugin.ts

@@ -114,10 +114,27 @@ function extractMetadataItems(bundle: any): ExtractedItem[] {
     pushAll('flow', bundle?.flows);
     pushAll('agent', bundle?.agents);
     pushAll('app', bundle?.apps);
+    pushAll('action', bundle?.actions);
 
     return items;
 }
 
+/**
+ * Rewrite a dataset's `object` to the namespaced FQN so seed rows target
+ * the object the metadata layer actually registered. Bundle authors write
+ * the short name (`task`) because the namespace lives on the manifest;
+ * `extractMetadataItems` does the equivalent rewrite for objects.
+ */
+function namespaceDatasets(bundle: any): any[] {
+    const ns = bundle?.manifest?.namespace as string | undefined;
+    const datasets = Array.isArray(bundle?.data) ? bundle.data : [];
+    if (!ns || RESERVED_NS.has(ns)) return datasets;
+    return datasets.map((ds: any) => {
+        if (!ds?.object || ds.object.includes('__')) return ds;
+        return { ...ds, object: `${ns}__${ds.object}` };
+    });
+}
+
 function createTemplateSeeder(
     kernelManager: KernelManager,
     templates: Record<string, ProjectTemplate>,