feat: added skeleton omr api integration

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react"
+import { useEffect, useState, useRef, Component, type ReactNode } from "react"
 import { Toolbar } from "./components/Toolbar"
 import { TitleBar } from "./components/TitleBar"
 import { LeftSidebar } from "./components/LeftSidebar"
@@ -7,15 +7,40 @@ import { PropertiesPanel } from "./components/PropertiesPanel"
 import { StatusBar } from "./components/StatusBar"
 import { KeyboardCheatSheet } from "./components/KeyboardCheatSheet"
 import { ResizeHandle } from "./components/ResizeHandle"
+import { TabBar } from "./components/TabBar"
+import { ApiClientPanel } from "./components/ApiClient/ApiClientPanel"
 import { useStore } from "./store/useStore"
 import { loadTemplateDialog } from "./utils/loadFile"
+import type { AppTab } from "./components/TabBar"
 
 const MIN_SIDEBAR = 160
 const MAX_SIDEBAR = 500
 
+class TabErrorBoundary extends Component<{ children: ReactNode; tab: string }, { hasError: boolean; error: string }> {
+  constructor(props: { children: ReactNode; tab: string }) {
+    super(props)
+    this.state = { hasError: false, error: "" }
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error: error.message || String(error) }
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="p-8 text-error bg-error/5 border border-error/20 rounded-lg m-4">
+          <h2 className="text-title-md font-medium mb-2">{this.props.tab} Tab Crashed</h2>
+          <pre className="text-code whitespace-pre-wrap">{this.state.error}</pre>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
 export default function App() {
   const containerRef = useRef<HTMLDivElement>(null)
   const [showCheatSheet, setShowCheatSheet] = useState(false)
+  const [activeTab, setActiveTab] = useState<AppTab>("editor")
   const [leftWidth, setLeftWidth] = useState(280)
   const [rightWidth, setRightWidth] = useState(320)
   const [leftCollapsed, setLeftCollapsed] = useState(false)
@@ -142,18 +167,29 @@ export default function App() {
   return (
     <div className="h-screen flex flex-col overflow-hidden">
       <TitleBar />
-      <Toolbar />
-      <div ref={containerRef} className="flex flex-1 overflow-hidden">
-        <LeftSidebar width={leftCollapsed ? 32 : leftWidth} collapsed={leftCollapsed} onToggle={() => setLeftCollapsed((v) => !v)} />
-        {!leftCollapsed && <ResizeHandle onResize={(clientX) => setLeftWidth(Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, clientX)))} />}
-        <CanvasView />
-        {!rightCollapsed && <ResizeHandle onResize={(clientX) => {
-          if (!containerRef.current) return
-          const cr = containerRef.current.getBoundingClientRect()
-          setRightWidth(Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, cr.right - clientX)))
-        }} />}
-        <PropertiesPanel width={rightCollapsed ? 32 : rightWidth} collapsed={rightCollapsed} onToggle={() => setRightCollapsed((v) => !v)} />
-      </div>
+      <TabBar active={activeTab} onChange={setActiveTab} />
+      {activeTab === "editor" ? (
+        <TabErrorBoundary tab="Editor" key="editor">
+          <Toolbar />
+          <div ref={containerRef} className="flex flex-1 overflow-hidden">
+            <LeftSidebar width={leftCollapsed ? 32 : leftWidth} collapsed={leftCollapsed} onToggle={() => setLeftCollapsed((v) => !v)} />
+            {!leftCollapsed && <ResizeHandle onResize={(clientX) => setLeftWidth(Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, clientX)))} />}
+            <CanvasView />
+            {!rightCollapsed && <ResizeHandle onResize={(clientX) => {
+              if (!containerRef.current) return
+              const cr = containerRef.current.getBoundingClientRect()
+              setRightWidth(Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, cr.right - clientX)))
+            }} />}
+            <PropertiesPanel width={rightCollapsed ? 32 : rightWidth} collapsed={rightCollapsed} onToggle={() => setRightCollapsed((v) => !v)} />
+          </div>
+        </TabErrorBoundary>
+      ) : (
+        <TabErrorBoundary tab="API Client" key="api">
+          <div className="flex-1 overflow-auto bg-canvas">
+            <ApiClientPanel />
+          </div>
+        </TabErrorBoundary>
+      )}
       <StatusBar />
       {showCheatSheet && <KeyboardCheatSheet onClose={() => setShowCheatSheet(false)} />}
     </div>