fix(studio): Route Code tab to CodeExporter instead of always rendering preview by Copilot · Pull Request #1080 · objectstack-ai/objectstack

Copilot · 2026-04-07T08:06:44Z

The default-plugin registered a single json-inspector viewer claiming modes: ['preview', 'code'], but the component unconditionally rendered <MetadataInspector> — the mode prop was ignored.

Changes

Split single viewer into two contributions in default-plugin.tsx:
- json-inspector → modes: ['preview'] → MetadataInspector (unchanged)
- code-exporter → modes: ['code'] → CodeExporter (new)
New CodeViewerComponent loads metadata via useClient().meta.getItem() (same pattern as MetadataInspector) and renders the existing <CodeExporter> with TypeScript/JSON toggle + copy-to-clipboard
Metadata type mapping from plural Studio types (objects, flows, agents, etc.) to CodeExporter's singular ExportType

// Before: one viewer, mode ignored
metadataViewers: [{id: 'json-inspector',modes: ['preview','code']}]activate(api){api.registerViewer('json-inspector',DefaultViewerComponent);}// After: two viewers, correct routing
metadataViewers: [{id: 'json-inspector',modes: ['preview']},{id: 'code-exporter',modes: ['code']},]activate(api){api.registerViewer('json-inspector',PreviewViewerComponent);api.registerViewer('code-exporter',CodeViewerComponent);}

No changes to plugin-host.tsx or CodeExporter.tsx — the infrastructure already resolved viewers by mode correctly; the default-plugin just wasn't wired up properly.

vercel · 2026-04-07T08:06:50Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectstack-play	Ready	Preview, Comment	Apr 7, 2026 8:16am
spec	Ready	Preview, Comment	Apr 7, 2026 8:16am

…ing preview Split default-plugin's single viewer (modes: ['preview', 'code']) into two separate viewer contributions: - json-inspector (preview mode) → MetadataInspector - code-exporter (code mode) → CodeExporter The CodeViewerComponent loads metadata via useClient().meta.getItem() and maps plural metadataType names to CodeExporter's singular ExportType. Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/862dcad5-06e8-4973-a996-340dccc3789e Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot

Pull request overview

Fixes Studio’s metadata “Code” tab behavior by correctly routing code-mode viewing to CodeExporter (instead of always rendering the JSON preview inspector), improving the default fallback viewer wiring in the built-in Studio plugin.

Changes:

Split the default wildcard viewer into two separate viewer contributions: preview (json-inspector) vs code (code-exporter).
Added a CodeViewerComponent that loads metadata via useClient().meta.getItem() and renders CodeExporter.
Updated changelog to document the Studio Code tab fix.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
CHANGELOG.md	Documents the Studio Code tab fix and viewer split.
apps/studio/src/plugins/built-in/default-plugin.tsx	Splits viewer contributions by mode and introduces a code-mode viewer that renders `CodeExporter`.

Copilot · 2026-04-07T09:01:57Z

 metadataViewers: [
 {
 id: 'json-inspector',
- metadataTypes: ['*'], // Wildcard: matches all types
+ metadataTypes: ['*'],
 label: 'JSON Inspector',
- priority: -1, // Lowest priority — any plugin overrides this
- modes: ['preview', 'code'],
+ priority: -1,
+ modes: ['preview'],
+ },
+ {
+ id: 'code-exporter',
+ metadataTypes: ['*'],
+ label: 'Code Export',
+ priority: -1,
+ modes: ['code'],
 },


code-exporter is registered for metadataTypes: ['*'], but CodeExporter only supports a limited set of export types (object|view|flow|agent|app). For other Studio metadata types (e.g. actions, pages, dashboards, workflows, ragPipelines, roles, etc.), exportType falls back to 'object', which will generate misleading/incorrect TypeScript (wrong top-level stack key).
Consider either (a) restricting the code-exporter contribution to only the metadata types you can correctly map, or (b) detecting unsupported types in CodeViewerComponent and showing a clear “export not supported for this type” message / JSON-only export instead of defaulting to 'object'.

Copilot · 2026-04-07T09:01:58Z

+ const [definition, setDefinition] = useState<Record<string, unknown> | null>(data ?? null);
+ const [loading, setLoading] = useState(!data);
+
+ useEffect(() => {
+ // If data was passed directly, use it
+ if (data) {
+ setDefinition(data as Record<string, unknown>);
+ setLoading(false);
+ return;
+ }
+
+ let mounted = true;
+ setLoading(true);
+
+ async function load() {
+ try {
+ const result: any = await client.meta.getItem(metadataType, metadataName, packageId ? { packageId } : undefined);
+ if (mounted) {
+ setDefinition(result?.item || result);
+ }
+ } catch (err) {
+ console.error(`[CodeViewer] Failed to load ${metadataType}/${metadataName}:`, err);
+ } finally {
+ if (mounted) setLoading(false);
+ }
+ }
+ load();
+ return () => { mounted = false; };
+ }, [client, metadataType, metadataName, data, packageId]);
+
+ if (loading) {


CodeViewerComponent keeps definition state across metadata navigation. When metadataType/metadataName changes, the component can render once with the previousdefinition but the newmetadataName (until the effect flips loading), which can briefly show incorrect exported code.
To avoid this, track which {metadataType, metadataName, packageId} the current definition belongs to (e.g., a loadedKey state) and render the loading/empty state whenever the props key doesn’t match, or clear definition synchronously when props change (so you never render with stale data).
Suggested change
const[definition,setDefinition]=useState<Record<string,unknown>|null>(data??null);
const[loading,setLoading]=useState(!data);
useEffect(()=>{
// If data was passed directly, use it
if(data){
setDefinition(dataasRecord<string,unknown>);
setLoading(false);
return;
}
letmounted=true;
setLoading(true);
asyncfunctionload(){
try{
constresult: any=awaitclient.meta.getItem(metadataType,metadataName,packageId ? { packageId } : undefined);
if(mounted){
setDefinition(result?.item||result);
}
}catch(err){
console.error(`[CodeViewer] Failed to load ${metadataType}/${metadataName}:`,err);
}finally{
if(mounted)setLoading(false);
}
}
load();
return()=>{mounted=false;};
},[client,metadataType,metadataName,data,packageId]);
if(loading){
constcurrentKey=`${metadataType}::${metadataName}::${packageId??''}`;
const[definition,setDefinition]=useState<Record<string,unknown>|null>(data??null);
const[loadedKey,setLoadedKey]=useState<string|null>(data ? currentKey : null);
const[loading,setLoading]=useState(!data);
useEffect(()=>{
// If data was passed directly, bind it to the current metadata identity.
if(data){
setDefinition(dataasRecord<string,unknown>);
setLoadedKey(currentKey);
setLoading(false);
return;
}
letmounted=true;
setLoading(true);
setDefinition(null);
setLoadedKey(null);
asyncfunctionload(){
try{
constresult: any=awaitclient.meta.getItem(metadataType,metadataName,packageId ? { packageId } : undefined);
if(mounted){
setDefinition((result?.item||result)??null);
setLoadedKey(currentKey);
}
}catch(err){
console.error(`[CodeViewer] Failed to load ${metadataType}/${metadataName}:`,err);
if(mounted){
setDefinition(null);
setLoadedKey(currentKey);
}
}finally{
if(mounted)setLoading(false);
}
}
load();
return()=>{mounted=false;};
},[client,metadataType,metadataName,data,packageId,currentKey]);
if(loading||loadedKey!==currentKey){

Initial plan
5d6f6cd

CopilotAI assigned Copilot and hotlong Apr 7, 2026

Copilotstarted work on behalf of hotlong April 7, 2026 08:06 View session

CopilotAI linked an issue Apr 7, 2026 that may be closed by this pull request
【Studio】Code tab does not show code export (default-plugin viewer always renders preview, not code) #1079
Closed

vercelBotdeployed to Preview – objectstack-play April 7, 2026 08:07 View deployment

vercelBotdeployed to Preview – spec April 7, 2026 08:09 View deployment

vercelBotdeployed to Preview – spec April 7, 2026 08:16 View deployment

vercelBotdeployed to Preview – objectstack-play April 7, 2026 08:16 View deployment

CopilotAI changed the title ~~[WIP] Fix code tab not showing code export in Studio~~fix(studio): Route Code tab to CodeExporter instead of always rendering previewApr 7, 2026

Copilotfinished work on behalf of hotlong April 7, 2026 08:17

CopilotAI requested a review from hotlong April 7, 2026 08:17

hotlong marked this pull request as ready for review April 7, 2026 08:57

CopilotAI review requested due to automatic review settings April 7, 2026 08:57

Copilotstarted reviewing on behalf of hotlong April 7, 2026 08:58 View session

hotlong merged commit 7d690ae into mainApr 7, 2026
5 checks passed

CopilotAI reviewed Apr 7, 2026
View reviewed changes

claudeBot mentioned this pull request Aug 4, 2026
[engine] driver-sql 编译 spec 未声明的「数组 where 方言」—— 与 Turso remote 的拒收分叉,需一次定调(接纳进 spec 或响亮弃用) #5158
Closed

Navigation Menu

Uh oh!

fix(studio): Route Code tab to CodeExporter instead of always rendering preview - #1080

fix(studio): Route Code tab to CodeExporter instead of always rendering preview#1080
hotlong merged 2 commits into
mainfrom
copilot/fix-code-tab-export-issue

CopilotAI commented Apr 7, 2026•
edited
Loading

Uh oh!

vercelBot commented Apr 7, 2026•
edited
Loading

Uh oh!

Uh oh!

CopilotAI left a comment

Uh oh!

CopilotAIApr 7, 2026

Uh oh!

CopilotAIApr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-const[definition,setDefinition]=useState<Record<string,unknown>|null>(data??null);
-const[loading,setLoading]=useState(!data);
-useEffect(()=>{
-// If data was passed directly, use it
-if(data){
-setDefinition(dataasRecord<string,unknown>);
-setLoading(false);
-return;
-}
-letmounted=true;
-setLoading(true);
-asyncfunctionload(){
-try{
-constresult: any=awaitclient.meta.getItem(metadataType,metadataName,packageId ? { packageId } : undefined);
-if(mounted){
-setDefinition(result?.item||result);
-}
-}catch(err){
-console.error(`[CodeViewer] Failed to load ${metadataType}/${metadataName}:`,err);
-}finally{
-if(mounted)setLoading(false);
-}
-}
-load();
-return()=>{mounted=false;};
-},[client,metadataType,metadataName,data,packageId]);
-if(loading){
+constcurrentKey=`${metadataType}::${metadataName}::${packageId??''}`;
+const[definition,setDefinition]=useState<Record<string,unknown>|null>(data??null);
+const[loadedKey,setLoadedKey]=useState<string|null>(data ? currentKey : null);
+const[loading,setLoading]=useState(!data);
+useEffect(()=>{
+// If data was passed directly, bind it to the current metadata identity.
+if(data){
+setDefinition(dataasRecord<string,unknown>);
+setLoadedKey(currentKey);
+setLoading(false);
+return;
+}
+letmounted=true;
+setLoading(true);
+setDefinition(null);
+setLoadedKey(null);
+asyncfunctionload(){
+try{
+constresult: any=awaitclient.meta.getItem(metadataType,metadataName,packageId ? { packageId } : undefined);
+if(mounted){
+setDefinition((result?.item||result)??null);
+setLoadedKey(currentKey);
+}
+}catch(err){
+console.error(`[CodeViewer] Failed to load ${metadataType}/${metadataName}:`,err);
+if(mounted){
+setDefinition(null);
+setLoadedKey(currentKey);
+}
+}finally{
+if(mounted)setLoading(false);
+}
+}
+load();
+return()=>{mounted=false;};
+},[client,metadataType,metadataName,data,packageId,currentKey]);
+if(loading||loadedKey!==currentKey){

Uh oh!

Conversation

CopilotAI commented Apr 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

vercelBot commented Apr 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

CopilotAIApr 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIApr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CopilotAI commented Apr 7, 2026•
edited
Loading

vercelBot commented Apr 7, 2026•
edited
Loading