Initial commit: API Debug Tool

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/App.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import Sidebar from './components/Sidebar';
+import TenantManager from './components/TenantManager';
+import EndpointManager from './components/EndpointManager';
+import DebugTabs from './components/DebugTabs';
+import Auth from './components/Auth';
+import Settings from './components/Settings';
+import './index.css';
+
+function App() {
+  const [activeTab, setActiveTab] = useState('debug');
+  const [showSettings, setShowSettings] = useState(false);
+  const [user, setUser] = useState(() => {
+    const saved = localStorage.getItem('api_debug_user');
+    return saved ? JSON.parse(saved) : null;
+  });
+
+  const handleLogout = () => {
+    localStorage.removeItem('api_debug_token');
+    localStorage.removeItem('api_debug_user');
+    setUser(null);
+  };
+
+  if (!user) {
+    return <Auth onLogin={setUser} />;
+  }
+
+  return (
+    <div className="app-container">
+      <Sidebar
+        currentTab={activeTab}
+        setTab={setActiveTab}
+        onLogout={handleLogout}
+        onSettings={() => setShowSettings(true)}
+      />
+      <main className="main-content" style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ display: activeTab === 'tenants' ? 'flex' : 'none', flexDirection: 'column', flex: 1, minHeight: 0 }}><TenantManager /></div>
+        <div style={{ display: activeTab === 'endpoints' ? 'flex' : 'none', flexDirection: 'column', flex: 1, minHeight: 0 }}><EndpointManager /></div>
+        <div style={{ display: activeTab === 'debug' ? 'flex' : 'none', flexDirection: 'column', flex: 1, minHeight: 0 }}><DebugTabs /></div>
+      </main>
+      {showSettings && <Settings onClose={() => setShowSettings(false)} />}
+    </div>
+  );
+}
+
+export default App;