feat(studio): developer UX overhaul — Inspector, Problems, Hotkeys, Actions, Onboarding

Add cross-cutting tools to make Studio feel like a real developer workbench:

* Inspector drawer (right Sheet, toggle via header button or `]`)
  - API tab: endpoint, sample curl GET/POST
  - Source tab: raw metadata JSON with copy
  - Refs tab: cross-references (objects → views/hooks/flows)
  - Auto-populates when navigating to a resource detail page
* Problems panel (status bar pill + slide-up panel, `[`)
  - Subscribes to object/view/flow/hook changes
  - Reports unknown object refs, missing field refs, broken triggers
  - Deep-links problems back to source resource
* Keyboard shortcuts
  - `g o` / `g f` / `g v` / `g a` / `g s` / `g p` nav
  - `[` problems, `]` inspector, `?` help dialog
* Resource actions menu (⋯ on detail page header)
  - Copy as curl / fetch() / defineX() TypeScript / Metadata JSON
  - Open in VS Code, Open API endpoint
* Welcome onboarding (empty-state in DeveloperOverview)
  - 3 CTA cards: Create object / Playground / Browse docs
* StudioShell wraps all of the above; TopBar grows `rightSlot` for Inspector/Help buttons

Also: surface RECORD_LOCKED-style plain-string `error` bodies in client
fetch error messages instead of swallowing them as "Bad Request".

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: os-zhuang

apps/studio/src/components/DeveloperOverview.tsx

@@ -11,6 +11,7 @@ import {
   RefreshCw, ExternalLink, Code2
 } from 'lucide-react';
 import type { InstalledPackage } from '@objectstack/spec/kernel';
+import { WelcomeOnboarding } from '@/components/WelcomeOnboarding';
 
 interface DeveloperOverviewProps {
   packages: InstalledPackage[];
@@ -83,6 +84,11 @@ export function DeveloperOverview({ packages, selectedPackage, onNavigate = () =
   const objectCount = stats.metadata.counts['object'] || 0;
   const totalMetaItems = Object.values(stats.metadata.counts).reduce((a, b) => a + b, 0);
 
+  // First-run onboarding: no metadata authored yet for this package.
+  if (!stats.loading && totalMetaItems === 0 && selectedPackage?.manifest?.id) {
+    return <WelcomeOnboarding packageId={selectedPackage.manifest.id} />;
+  }
+
   return (
     <div className="flex flex-1 flex-col gap-6 p-6 overflow-auto">
       {/* Header */}

apps/studio/src/components/HotkeysHelpDialog.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * Keyboard shortcuts help dialog. Triggered by `?` or via the command
+ * palette. Lists every shortcut registered in `useStudioHotkeys`.
+ */
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { STUDIO_SHORTCUTS } from '@/hooks/useStudioHotkeys';
+
+interface HotkeysHelpDialogProps {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}
+
+export function HotkeysHelpDialog({ open, onOpenChange }: HotkeysHelpDialogProps) {
+  const groups = new Map<string, typeof STUDIO_SHORTCUTS>();
+  for (const s of STUDIO_SHORTCUTS) {
+    if (!groups.has(s.group)) groups.set(s.group, []);
+    (groups.get(s.group) as any).push(s);
+  }
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Keyboard shortcuts</DialogTitle>
+          <DialogDescription>
+            Most shortcuts use the <kbd className="px-1 rounded bg-muted text-xs">g</kbd>{' '}
+            prefix for "go to". Keys are ignored while typing.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 max-h-[60vh] overflow-auto">
+          {[...groups.entries()].map(([group, items]) => (
+            <div key={group}>
+              <div className="text-[11px] uppercase tracking-wide text-muted-foreground mb-1">
+                {group}
+              </div>
+              <ul className="space-y-1">
+                {items.map((s) => (
+                  <li
+                    key={s.keys + s.label}
+                    className="flex items-center justify-between text-sm py-1"
+                  >
+                    <span>{s.label}</span>
+                    <kbd className="px-1.5 py-0.5 rounded bg-muted text-xs font-mono">
+                      {s.keys}
+                    </kbd>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}