wip:milestone 0 fixes

web/js/admin.js

@@ -0,0 +1,457 @@
+const { createApp } = Vue;
+const API_BASE = '/platform/v1';
+
+createApp({
+    data() {
+        return {
+            currentTab: 'dashboard',
+            gatewayStatus: 'Checking...',
+            serviceKey: '',
+            
+            // Auth State
+            isAuthenticated: false,
+            isVerifyingAuth: true,
+            isLoggingIn: false,
+            adminPassword: '',
+            loginError: null,
+            
+            // Dashboard
+            projects: [],
+            newProjectName: '',
+            users: [],
+            metrics: 'Loading...',
+            metricsInterval: null,
+            pillars: [],
+            pillarInterval: null,
+
+            // Functions
+            functions: [],
+            newFunctionName: 'hello-world',
+            newFunctionCode: 'export default async function(req) { \n  return new Response("Hello from MadBase!"); \n}',
+            selectedFunction: null,
+            isDeploying: false,
+
+            // Database
+            tables: [],
+            selectedTable: null,
+            tableData: [],
+
+            // Storage
+            buckets: [],
+            selectedBucket: null,
+            objects: [],
+
+            // Realtime
+            ws: null,
+            wsConnected: false,
+            wsChannel: 'room:lobby',
+            wsMessages: [],
+            wsInput: '{"event":"broadcast","payload":{"message":"Hello"}}',
+
+            // Logs
+            logQuery: '{app="gateway"}',
+            logLimit: 100,
+            logs: []
+        }
+    },
+    async mounted() {
+        console.log('MadBase Studio: Mounting...');
+        await this.checkAuth();
+        this.isVerifyingAuth = false;
+    },
+    methods: {
+        async checkAuth() {
+            // Quick check if we can access the platform API
+            try {
+                const res = await fetch(`${API_BASE}/projects`);
+                if (res.status === 401) {
+                    this.isAuthenticated = false;
+                } else {
+                    this.isAuthenticated = true;
+                    this.onAuthenticated();
+                }
+            } catch {
+                this.isAuthenticated = false;
+            }
+        },
+        async login() {
+            this.isLoggingIn = true;
+            this.loginError = null;
+            try {
+                const res = await fetch(`${API_BASE}/login`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ password: this.adminPassword })
+                });
+                
+                if (res.ok) {
+                    this.isAuthenticated = true;
+                    this.onAuthenticated();
+                } else {
+                    this.loginError = 'Invalid admin password';
+                }
+            } catch (e) {
+                this.loginError = 'Connection failed: ' + e.message;
+            } finally {
+                this.isLoggingIn = false;
+            }
+        },
+        async onAuthenticated() {
+            // First fetch config (service key)
+            await this.fetchAdminConfig();
+            
+            // Then init regular data
+            this.checkHealth();
+            this.fetchProjects();
+            this.fetchUsers();
+            this.fetchFunctions();
+            this.fetchMetrics();
+            this.fetchPillars();
+            this.initChart();
+            if (this.metricsInterval) clearInterval(this.metricsInterval);
+            this.metricsInterval = setInterval(this.fetchMetrics, 5000);
+            if (this.pillarInterval) clearInterval(this.pillarInterval);
+            this.pillarInterval = setInterval(this.fetchPillars, 5000);
+            console.log('MadBase Studio: Ready.');
+        },
+        async fetchAdminConfig() {
+            try {
+                const res = await fetch(`${API_BASE}/admin/config`);
+                const data = await res.json();
+                this.serviceKey = data.service_role_key;
+                console.log('MadBase Studio: Service Key Provisioned.');
+            } catch (e) {
+                console.error('Failed to fetch admin config:', e);
+            }
+        },
+        // Dashboard
+        async checkHealth() {
+            try {
+                const res = await fetch('/');
+                this.gatewayStatus = res.ok ? 'Online' : 'Error';
+            } catch { this.gatewayStatus = 'Offline'; }
+        },
+        async fetchProjects() {
+            try {
+                const res = await fetch(`${API_BASE}/projects`);
+                this.projects = await res.json();
+            } catch (e) { console.error(e); }
+        },
+        async createProject() {
+            if (!this.newProjectName) return;
+            await fetch(`${API_BASE}/projects`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: this.newProjectName, owner_id: null })
+            });
+            this.newProjectName = '';
+            this.fetchProjects();
+        },
+        async deleteProject(id) {
+            if (!confirm('Are you sure you want to delete this project?')) return;
+            await fetch(`${API_BASE}/projects/${id}`, { method: 'DELETE' });
+            this.fetchProjects();
+        },
+        async fetchUsers() {
+            try {
+                const res = await fetch(`${API_BASE}/users`);
+                this.users = await res.json();
+            } catch (e) { console.error(e); }
+        },
+        async deleteUser(id) {
+            if (!confirm('Are you sure you want to delete this user?')) return;
+            await fetch(`${API_BASE}/users/${id}`, { method: 'DELETE' });
+            this.fetchUsers();
+        },
+        async fetchMetrics() {
+            try {
+                const res = await fetch('/metrics');
+                const text = await res.text();
+                this.metrics = text.split('\n').filter(l => !l.startsWith('#') && l.trim()).slice(0, 20).join('\n');
+                
+                // Parse for chart
+                const match = text.match(/axum_http_requests_total\{.*?\} (\d+)/);
+                if (match && this.chart) {
+                    const val = parseInt(match[1]);
+                    const now = new Date().toLocaleTimeString();
+                    
+                    this.chart.data.labels.push(now);
+                    this.chart.data.datasets[0].data.push(val);
+                    
+                    if (this.chart.data.labels.length > 20) {
+                        this.chart.data.labels.shift();
+                        this.chart.data.datasets[0].data.shift();
+                    }
+                    this.chart.update('none');
+                }
+            } catch {}
+        },
+        async fetchPillars() {
+            try {
+                const res = await fetch(`${API_BASE}/cluster/pillars`);
+                if (res.ok) {
+                    this.pillars = await res.json();
+                }
+            } catch (e) { console.error('Pillar fetch failed:', e); }
+        },
+        async scalePillar(pillar, direction) {
+            const p = this.pillars.find(x => x.pillar === pillar);
+            if (!p) return;
+            
+            const targetCount = direction === 'up' ? p.node_count + 1 : p.node_count - 1;
+            if (targetCount < 1) return;
+
+            const req = {
+                provider: 'hetzner', // Default for now
+                target_worker_count: pillar === 'worker' ? targetCount : undefined,
+                target_db_count: pillar === 'database' ? targetCount : undefined,
+                target_control_count: pillar === 'proxyapi' ? targetCount : undefined,
+            };
+
+            try {
+                const res = await fetch(`${API_BASE}/cluster/scale-plan`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(req)
+                });
+                const plan = await res.json();
+                
+                if (confirm(`Scaling ${pillar} to ${targetCount} nodes. Monthly cost impact: €${plan.total_cost_monthly}. Proceed?`)) {
+                    await fetch(`${API_BASE}/cluster/scale-execute`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(plan.scaling_plan)
+                    });
+                    this.fetchPillars();
+                }
+            } catch (e) { alert('Scaling failed: ' + e.message); }
+        },
+        initChart() {
+            if (typeof Chart === 'undefined') {
+                console.warn('MadBase Studio: Chart.js is not loaded yet.');
+                return;
+            }
+            const ctx = document.getElementById('metricsChart');
+            if (!ctx) return;
+            
+            this.chart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'HTTP Requests',
+                        data: [],
+                        borderColor: '#0ea5e9',
+                        backgroundColor: 'rgba(14, 165, 233, 0.1)',
+                        fill: true,
+                        tension: 0.4,
+                        borderWidth: 2,
+                        pointRadius: 0,
+                        pointHoverRadius: 4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { display: false },
+                        y: { 
+                            beginAtZero: false,
+                            grid: { color: 'rgba(0,0,0,0.05)' },
+                            ticks: { font: { size: 10 } }
+                        }
+                    },
+                    animation: { duration: 0 }
+                }
+            });
+        },
+
+        // Functions
+        async fetchFunctions() {
+            try {
+                const res = await fetch('/functions/v1', {
+                    headers: { 'x-project-ref': 'default', 'Authorization': `Bearer ${this.serviceKey}` }
+                });
+                this.functions = await res.json();
+            } catch (e) { console.error(e); }
+        },
+        initNewFunction() {
+            this.selectedFunction = { name: 'new-func' };
+            this.newFunctionName = 'new-func';
+            this.newFunctionCode = 'export default async function(req) { \n  return new Response("Hello!"); \n}';
+        },
+        async deployFunction() {
+            this.isDeploying = true;
+            try {
+                const payload = {
+                    name: this.newFunctionName,
+                    runtime: 'deno',
+                    code_base64: btoa(this.newFunctionCode)
+                };
+                const res = await fetch('/functions/v1', {
+                    method: 'POST',
+                    headers: { 
+                        'Content-Type': 'application/json',
+                        'x-project-ref': 'default',
+                        'Authorization': `Bearer ${this.serviceKey}`
+                    },
+                    body: JSON.stringify(payload)
+                });
+                if (res.ok) {
+                    alert('Function deployed successfully!');
+                    this.fetchFunctions();
+                    this.selectedFunction = null; // Clear view
+                } else {
+                    alert('Deployment failed: ' + await res.text());
+                }
+            } catch (e) { alert('Deployment error: ' + e); }
+            finally { this.isDeploying = false; }
+        },
+        async selectFunction(name) {
+             try {
+                const res = await fetch(`/functions/v1/${name}`, {
+                    headers: { 'x-project-ref': 'default', 'Authorization': `Bearer ${this.serviceKey}` }
+                });
+                const func = await res.json();
+                this.selectedFunction = func;
+                this.newFunctionName = func.name;
+                this.newFunctionCode = atob(func.code);
+            } catch (e) { console.error(e); }
+        },
+
+        // Database
+        async fetchTables() {
+            try {
+                const res = await fetch(`${API_BASE}/db/tables`);
+                this.tables = await res.json();
+            } catch (e) { console.error(e); }
+        },
+        async selectTable(t) {
+            this.selectedTable = t;
+            this.tableData = [];
+            try {
+                const res = await fetch(`${API_BASE}/db/tables/${t.schema}/${t.name}`);
+                this.tableData = await res.json();
+            } catch (e) { console.error(e); }
+        },
+
+        // Storage
+        async fetchBuckets() {
+            try {
+                const res = await fetch('/storage/v1/bucket', {
+                    headers: { 'Authorization': `Bearer ${this.serviceKey}`, 'x-project-ref': 'default' }
+                });
+                this.buckets = await res.json();
+            } catch (e) { alert('Failed to fetch buckets. Check Service Key.'); }
+        },
+        async selectBucket(id) {
+            this.selectedBucket = id;
+            this.objects = [];
+            try {
+                const res = await fetch(`/storage/v1/object/list/${id}`, {
+                    method: 'POST',
+                    headers: { 'Authorization': `Bearer ${this.serviceKey}`, 'x-project-ref': 'default' }
+                });
+                this.objects = await res.json();
+            } catch (e) { console.error(e); }
+        },
+        async uploadFile(event) {
+            const file = event.target.files[0];
+            if (!file || !this.selectedBucket) return;
+            
+            try {
+                await fetch(`/storage/v1/object/${this.selectedBucket}/${file.name}`, {
+                    method: 'POST',
+                    headers: { 
+                        'Authorization': `Bearer ${this.serviceKey}`,
+                        'x-project-ref': 'default',
+                        'Content-Type': file.type || 'application/octet-stream'
+                    },
+                    body: file
+                });
+                this.selectBucket(this.selectedBucket); // Refresh
+                alert('Upload successful');
+            } catch (e) { alert('Upload failed'); }
+        },
+        getObjectUrl(name) {
+            return `/storage/v1/object/${this.selectedBucket}/${name}?token=SERVICE_ROLE_BYPASS_NOT_IMPLEMENTED`; 
+        },
+        formatBytes(bytes, decimals = 2) {
+            if (!+bytes) return '0 Bytes';
+            const k = 1024;
+            const dm = decimals < 0 ? 0 : decimals;
+            const sizes = ['Bytes', 'KiB', 'MiB', 'GiB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+        },
+
+        // Realtime
+        toggleWs() {
+            if (this.wsConnected) {
+                this.ws.close();
+                this.wsConnected = false;
+                this.wsMessages.push({ type: 'sys', time: new Date().toLocaleTimeString(), data: 'Disconnected' });
+            } else {
+                const url = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/realtime/v1/websocket?apikey=${this.serviceKey}&vsn=1.0.0`;
+                this.ws = new WebSocket(url);
+                
+                this.ws.onopen = () => {
+                    this.wsConnected = true;
+                    this.wsMessages.push({ type: 'sys', time: new Date().toLocaleTimeString(), data: 'Connected' });
+                    this.sendJson({ event: 'phx_join', topic: this.wsChannel, payload: {}, ref: '1' });
+                };
+                
+                this.ws.onmessage = (e) => {
+                    this.wsMessages.push({ type: 'in', time: new Date().toLocaleTimeString(), data: e.data });
+                    if (this.wsMessages.length > 100) this.wsMessages.shift();
+                };
+
+                this.ws.onclose = () => {
+                    this.wsConnected = false;
+                    this.wsMessages.push({ type: 'sys', time: new Date().toLocaleTimeString(), data: 'Connection Closed' });
+                };
+            }
+        },
+        sendWs() {
+            if (!this.wsConnected) return;
+            try {
+                const payload = JSON.parse(this.wsInput);
+                const msg = { event: payload.event || 'broadcast', topic: this.wsChannel, payload: payload.payload || payload, ref: '2' };
+                this.sendJson(msg);
+            } catch (e) { alert('Invalid JSON'); }
+        },
+        sendJson(data) {
+            const str = JSON.stringify(data);
+            this.ws.send(str);
+            this.wsMessages.push({ type: 'out', time: new Date().toLocaleTimeString(), data: str });
+        },
+
+        // Logs
+        async fetchLogs() {
+            try {
+                const params = new URLSearchParams({
+                    query: this.logQuery,
+                    limit: this.logLimit
+                });
+                const res = await fetch(`${API_BASE}/logs?${params}`);
+                if (!res.ok) throw new Error(await res.text());
+                const data = await res.json();
+                if (data.data && data.data.result) {
+                    this.logs = data.data.result.flatMap(r => r.values).sort((a, b) => b[0] - a[0]);
+                } else {
+                    this.logs = [];
+                }
+            } catch (e) { 
+                alert('Log fetch failed: ' + e.message); 
+            }
+        }
+    },
+    watch: {
+        currentTab(val) {
+            if (val === 'storage' && !this.buckets.length) this.fetchBuckets();
+            if (val === 'functions' && !this.functions.length) this.fetchFunctions();
+            if (val === 'database' && !this.tables.length) this.fetchTables();
+        }
+    }
+}).mount('#app');