@rebasepro/studio 0.2.1 → 0.2.4

package/dist/ui/src/components/VirtualTable/types.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { CellRendererParams, OnRowClickParams, OnVirtualTableColumnResizeParams, VirtualTableColumn, VirtualTableFilterValues, VirtualTableWhereFilterOp } from "./VirtualTableProps";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
-export type VirtualTableRowProps<T> = {
-    style: any;
+export type VirtualTableRowProps<T extends Record<string, unknown>> = {
+    style: React.CSSProperties;
     rowHeight: number;
     rowData: T;
     rowIndex: number;
-    onRowClick?: (props: OnRowClickParams<any>) => void;
+    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
     children: React.ReactNode[];
     columns: VirtualTableColumn[];
     hoverRow?: boolean;
@@ -19,20 +19,20 @@ export type VirtualTableContextProps<T> = {
     columns: VirtualTableColumn[];
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
     currentSort: "asc" | "desc" | undefined;
-    filter?: VirtualTableFilterValues<any>;
-    onRowClick?: (props: OnRowClickParams<any>) => void;
-    onColumnSort: (key: string) => any;
+    filter?: VirtualTableFilterValues<string>;
+    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
+    onColumnSort: (key: string) => void;
     onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
     onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
-    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
     sortByProperty?: string;
     customView?: React.ReactNode;
     hoverRow: boolean;
-    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;
     rowClassName?: (rowData: T) => string | undefined;
     endAdornment?: React.ReactNode;
     AddColumnComponent?: React.ComponentType;
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
     draggingColumnId?: string | null;
-    extraData?: Record<string, any>;
+    extraData?: unknown;
 };

package/dist/ui/src/hooks/useDebounceCallback.d.ts

@@ -1 +1 @@
-export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback?: T, delay?: number): T;
+export declare function useDebounceCallback<T extends (...args: any[]) => unknown>(callback?: T, delay?: number): T;

package/dist/ui/src/util/debounce.d.ts

@@ -1,7 +1,7 @@
 /**
  * @ignore
  */
-export declare function debounce<T extends (...args: any[]) => any>(func: T, wait?: number): T & Cancelable;
+export declare function debounce<T extends (...args: any[]) => unknown>(func: T, wait?: number): T & Cancelable;
 /**
  * @ignore
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/studio",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/studio/src/index.d.ts",
@@ -15,19 +15,19 @@
     "pgsql-ast-parser": "12.0.2",
     "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^14.4.1",
-    "@rebasepro/common": "0.2.1",
-    "@rebasepro/core": "0.2.1",
-    "@rebasepro/types": "0.2.1",
-    "@rebasepro/utils": "0.2.1",
-    "@rebasepro/ui": "0.2.1",
-    "@rebasepro/client": "0.2.1"
+    "@rebasepro/common": "0.2.4",
+    "@rebasepro/client": "0.2.4",
+    "@rebasepro/core": "0.2.4",
+    "@rebasepro/ui": "0.2.4",
+    "@rebasepro/utils": "0.2.4",
+    "@rebasepro/types": "0.2.4"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-router": "^7.0.0",
     "react-router-dom": "^7.0.0",
-    "@rebasepro/admin": "0.2.1"
+    "@rebasepro/admin": "0.2.4"
   },
   "peerDependenciesMeta": {
     "@rebasepro/admin": {
@@ -78,6 +78,11 @@
     "access": "public"
   },
   "gitHead": "9ecf37abf793bd2f2daaaed6f517ee5ee19b01ae",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rebasepro/rebase.git",
+    "directory": "packages/studio"
+  },
   "scripts": {
     "dev": "vite",
     "test": "jest --passWithNoTests",

package/src/components/ApiExplorer/ApiExplorer.tsx

@@ -50,9 +50,9 @@ export function ApiExplorer() {
                     setSpec(data);
                     setLoading(false);
                 }
-            } catch (err: any) {
+            } catch (err: unknown) {
                 if (!cancelled) {
-                    setError(err.message ?? "Failed to load API spec");
+                    setError(err instanceof Error ? err.message : "Failed to load API spec");
                     setLoading(false);
                 }
             }

package/src/components/ApiExplorer/EndpointDetail.tsx

@@ -153,7 +153,7 @@ function SchemaBlock({ schema, spec, depth }: { schema: OpenApiSchema; spec: Ope
     // Resolve $ref
     if (schema.$ref) {
         const name = resolveRefName(schema.$ref);
-        const resolved = resolveRef(spec, schema.$ref);
+        const resolved = resolveRef(spec, schema.$ref) as OpenApiSchema;
         return (
             <div>
                 <Typography

package/src/components/ApiExplorer/TryItPanel.tsx

@@ -125,8 +125,8 @@ export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = ""
         if (hasBody && body.trim()) {
             try {
                 JSON.parse(body);
-            } catch (err: any) {
-                setValidationError(`Invalid JSON: ${err.message}`);
+            } catch (err: unknown) {
+                setValidationError(`Invalid JSON: ${err instanceof Error ? err.message : String(err)}`);
                 return;
             }
         }
@@ -171,11 +171,11 @@ export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = ""
 statusText: res.statusText,
 body: text,
 time: elapsed });
-        } catch (err: any) {
+        } catch (err: unknown) {
             setResponse({
                 status: 0,
                 statusText: "Network Error",
-                body: err.message ?? "Request failed",
+                body: err instanceof Error ? err.message : "Request failed",
                 time: Math.round(performance.now() - start)
             });
         } finally {
@@ -479,7 +479,7 @@ function buildBodyTemplate(endpoint: ParsedEndpoint): string {
     return lines.join("\n");
 }
 
-function defaultValue(schema: any): string {
+function defaultValue(schema: { type?: string; format?: string; enum?: (string | number)[] }): string {
     if (schema.enum) return JSON.stringify(schema.enum[0]);
     switch (schema.type) {
         case "string":

package/src/components/ApiExplorer/parseSpec.ts

@@ -94,11 +94,11 @@ export function resolveRefName(ref: string): string {
 /**
  * Resolve a $ref to its actual schema from the spec.
  */
-export function resolveRef(spec: OpenApiSpec, ref: string): any {
+export function resolveRef(spec: OpenApiSpec, ref: string): unknown {
     const parts = ref.replace("#/", "").split("/");
-    let current: any = spec;
+    let current: unknown = spec;
     for (const part of parts) {
-        current = current?.[part];
+        current = (current as Record<string, unknown>)?.[part];
     }
     return current ?? {};
 }

package/src/components/ApiExplorer/types.ts

@@ -6,7 +6,7 @@ export interface OpenApiSpec {
     paths: Record<string, Record<string, OpenApiOperation>>;
     components?: {
         schemas?: Record<string, OpenApiSchema>;
-        securitySchemes?: Record<string, any>;
+        securitySchemes?: Record<string, unknown>;
     };
     tags?: { name: string; description?: string }[];
     security?: Record<string, string[]>[];
@@ -57,8 +57,8 @@ export interface OpenApiSchema {
     maximum?: number;
     maxLength?: number;
     minLength?: number;
-    default?: any;
-    example?: any;
+    default?: unknown;
+    example?: unknown;
     additionalProperties?: boolean | OpenApiSchema;
 }
 

package/src/components/CronJobs/CronJobsView.tsx

@@ -91,8 +91,33 @@ export function CronJobsView() {
         }
 
         load();
-        const t = setInterval(load, 15_000);
-        return () => { cancelled = true; clearInterval(t); };
+
+        let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+        const scheduleNext = () => {
+            if (cancelled) return;
+            timeoutId = setTimeout(async () => {
+                if (document.visibilityState === "visible") {
+                    await load();
+                }
+                scheduleNext();
+            }, 15_000);
+        };
+
+        scheduleNext();
+
+        const handleVisibility = () => {
+            if (document.visibilityState === "visible") {
+                load();
+            }
+        };
+        document.addEventListener("visibilitychange", handleVisibility);
+
+        return () => {
+            cancelled = true;
+            if (timeoutId) clearTimeout(timeoutId);
+            document.removeEventListener("visibilitychange", handleVisibility);
+        };
     }, []); // runs once
 
     // ── Fetch logs when selection changes ──

package/src/components/JSEditor/JSEditor.tsx

@@ -47,12 +47,12 @@ import { AuthSimulationSelector } from "../AuthSimulationSelector";
 
 interface ConsoleEntry {
     type: "log" | "warn" | "error" | "info";
-    args: any[];
+    args: unknown[];
     timestamp: number;
 }
 
 interface ExecutionResult {
-    value: any;
+    value: unknown;
     console: ConsoleEntry[];
     duration: number;
     error?: string;
@@ -101,7 +101,7 @@ function saveToStorage<T>(key: string, value: T) {
     } catch { /* quota */ }
 }
 
-function formatJSON(value: any): string {
+function formatJSON(value: unknown): string {
     try {
         return JSON.stringify(value, null, 2);
     } catch {
@@ -125,7 +125,7 @@ interface MatchedJSCollection {
  */
 function detectCollectionsInResult(
     code: string,
-    resultValue: any,
+    resultValue: unknown,
     collections: EntityCollection[]
 ): MatchedJSCollection[] {
     if (!resultValue || !collections?.length) return [];
@@ -151,9 +151,10 @@ function detectCollectionsInResult(
     if (mentionedSlugs.size === 0) return [];
 
     // Check if result has rows with an "id" field
-    let rows: any[] = [];
-    if (resultValue?.data && Array.isArray(resultValue.data)) {
-        rows = resultValue.data;
+    let rows: Record<string, unknown>[] = [];
+    const rv = resultValue as Record<string, unknown>;
+    if (rv?.data && Array.isArray(rv.data)) {
+        rows = rv.data;
     } else if (Array.isArray(resultValue)) {
         rows = resultValue;
     }
@@ -405,7 +406,7 @@ isScoped: true };
             info: console.info
         };
 
-        const captureConsole = (type: ConsoleEntry["type"]) => (...args: any[]) => {
+        const captureConsole = (type: ConsoleEntry["type"]) => (...args: unknown[]) => {
             consoleEntries.push({ type,
 args,
 timestamp: Date.now() });
@@ -451,7 +452,8 @@ timestamp: Date.now() });
             });
 
             // Auto-detect best view
-            if (value?.data && Array.isArray(value.data)) {
+            const resultObj = value as Record<string, unknown> | undefined;
+            if (resultObj?.data && Array.isArray(resultObj.data)) {
                 setResultView("table");
             } else if (consoleEntries.length > 0 && value === undefined) {
                 setResultView("console");
@@ -522,11 +524,12 @@ message: "Snippet saved" });
         if (!result?.value) return { columns: [] as VirtualTableColumn[],
 data: [] as Record<string, unknown>[] };
 
-        let rows: any[] = [];
-        if (result.value?.data && Array.isArray(result.value.data)) {
-            rows = result.value.data.map((entity: any) => ({
+        let rows: Record<string, unknown>[] = [];
+        const val = result.value as Record<string, unknown>;
+        if (val?.data && Array.isArray(val.data)) {
+            rows = (val.data as Record<string, unknown>[]).map((entity) => ({
                 id: entity.id,
-                ...entity.values,
+                ...(entity.values as Record<string, unknown> ?? {}),
                 ...(entity.values ? {} : entity)
             }));
         } else if (Array.isArray(result.value)) {
@@ -564,13 +567,13 @@ data: rows };
         );
     }, [result, activeTab?.code, collectionRegistry?.collections]);
 
-    const getRowEntityActions = useCallback((rowData: any): { collection: MatchedJSCollection; entityId: string | number }[] => {
+    const getRowEntityActions = useCallback((rowData: Record<string, unknown>): { collection: MatchedJSCollection; entityId: string | number }[] => {
         if (!rowData || matchedCollections.length === 0) return [];
         return matchedCollections
             .filter(mc => rowData[mc.pkColumn] != null)
             .map(mc => ({
                 collection: mc,
-                entityId: rowData[mc.pkColumn]
+                entityId: rowData[mc.pkColumn] as string | number
             }));
     }, [matchedCollections]);
 
@@ -685,7 +688,7 @@ message: t("studio_sql_markdown_copy_failed") });
                                         </IconButton>
                                     </Tooltip>
 
-                                    {result?.value && (
+                                    {result?.value != null && (
                                         <Tooltip title="Export result as JSON">
                                             <IconButton size="small" onClick={exportResult}>
                                                 <DownloadIcon size={iconSize.smallest}/>
@@ -843,7 +846,7 @@ resizable: false }, ...tableData.columns]
                                                                 cellRenderer={({ rowData, column, rowIndex }: CellRendererParams<Record<string, unknown>>) => {
                                                                     // Entity action column
                                                                     if (column.key === "__entity_action__") {
-                                                                        const rowActions = getRowEntityActions(rowData);
+                                                                        const rowActions = getRowEntityActions(rowData ?? {});
                                                                         if (rowActions.length === 0) return <div className="h-full w-full"/>;
                                                                         if (rowActions.length === 1) {
                                                                             const ra = rowActions[0];
@@ -1037,7 +1040,7 @@ id: String(ra.entityId) })}
 
 // ─── JSON Syntax Highlighting ────────────────────────────────────────
 
-function JSONHighlight({ value }: { value: any }) {
+function JSONHighlight({ value }: { value: unknown }) {
     const json = formatJSON(value);
     const { mode } = useModeController();
 

package/src/components/JSEditor/JSMonacoEditor.tsx

@@ -111,7 +111,7 @@ interface RebaseAuth {
     changePassword(oldPassword: string, newPassword: string): Promise<{ success: boolean; message: string }>;
     sendVerificationEmail(): Promise<{ success: boolean; message: string }>;
     verifyEmail(token: string): Promise<{ success: boolean; message: string }>;
-    getSessions(): Promise<any[]>;
+    getSessions(): Promise<RebaseSession[]>;
     revokeSession(sessionId: string): Promise<{ success: boolean }>;
     revokeAllSessions(): Promise<{ success: boolean }>;
     getSession(): RebaseSession | null;
@@ -133,8 +133,8 @@ interface RebaseRole {
     id: string;
     name: string;
     isAdmin: boolean;
-    defaultPermissions: Record<string, any> | null;
-    config: Record<string, any> | null;
+    defaultPermissions: Record<string, unknown> | null;
+    config: Record<string, unknown> | null;
 }
 
 interface RebaseAdmin {
@@ -145,8 +145,8 @@ interface RebaseAdmin {
     deleteUser(userId: string): Promise<{ success: boolean }>;
     listRoles(): Promise<{ roles: RebaseRole[] }>;
     getRole(roleId: string): Promise<{ role: RebaseRole }>;
-    createRole(data: { id: string; name: string; isAdmin?: boolean; defaultPermissions?: any; config?: any }): Promise<{ role: RebaseRole }>;
-    updateRole(roleId: string, data: { name?: string; isAdmin?: boolean; defaultPermissions?: any; config?: any }): Promise<{ role: RebaseRole }>;
+    createRole(data: { id: string; name: string; isAdmin?: boolean; defaultPermissions?: Record<string, unknown>; config?: Record<string, unknown> }): Promise<{ role: RebaseRole }>;
+    updateRole(roleId: string, data: { name?: string; isAdmin?: boolean; defaultPermissions?: Record<string, unknown>; config?: Record<string, unknown> }): Promise<{ role: RebaseRole }>;
     deleteRole(roleId: string): Promise<{ success: boolean }>;
     bootstrap(): Promise<{ success: boolean; message: string; user: { uid: string; roles: string[] } }>;
 }
@@ -155,7 +155,7 @@ interface UploadFileProps {
     file: FileIcon;
     fileName?: string;
     path?: string;
-    metadata?: Record<string, any>;
+    metadata?: Record<string, unknown>;
     bucket?: string;
 }
 
@@ -168,7 +168,7 @@ interface UploadFileResult {
 interface DownloadConfig {
     url: string | null;
     fileNotFound?: boolean;
-    metadata?: any;
+    metadata?: Record<string, unknown>;
 }
 
 interface StorageSource {
@@ -176,7 +176,7 @@ interface StorageSource {
     getSignedUrl(pathOrUrl: string, bucket?: string): Promise<DownloadConfig>;
     getObject(path: string, bucket?: string): Promise<FileIcon | null>;
     deleteObject(path: string, bucket?: string): Promise<void>;
-    listObjects(path: string, options?: { bucket?: string; maxResults?: number; pageToken?: string }): Promise<any>;
+    listObjects(path: string, options?: { bucket?: string; maxResults?: number; pageToken?: string }): Promise<unknown>;
 }
 
 type RebaseData = {
@@ -220,9 +220,9 @@ interface RebaseClient {
     /** Storage operations */
     storage?: StorageSource;
     /** Call a custom server-side endpoint */
-    call<T = any>(endpoint: string, payload?: any): Promise<T>;
+    call<T = unknown>(endpoint: string, payload?: unknown): Promise<T>;
     /** Direct collection access (shorthand) */
-    [collectionSlug: string]: any;
+    [collectionSlug: string]: unknown;
 }
 
 /** The pre-configured client instance. Already authenticated with the current user session. */

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Select, SelectItem, TextField, Checkbox, Label } from "@rebasepro/ui";
+
+interface LogEntry {
+    id: string;
+    timestamp: string;
+    level: "debug" | "info" | "warn" | "error";
+    source: "api" | "auth" | "storage" | "realtime" | "system";
+    message: string;
+    metadata?: Record<string, unknown>;
+}
+
+const LEVEL_COLORS: Record<string, string> = {
+    debug: "#6c7086",
+    info: "#89b4fa",
+    warn: "#f9e2af",
+    error: "#f38ba8"
+};
+
+const SOURCE_COLORS: Record<string, string> = {
+    api: "#74c7ec",
+    auth: "#cba6f7",
+    storage: "#a6e3a1",
+    realtime: "#fab387",
+    system: "#6c7086"
+};
+
+export function LogsExplorer() {
+    const [logs, setLogs] = useState<LogEntry[]>([]);
+    const [level, setLevel] = useState<string>("");
+    const [source, setSource] = useState<string>("");
+    const [search, setSearch] = useState("");
+    const [autoScroll, setAutoScroll] = useState(true);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const fetchLogs = useCallback(async () => {
+        try {
+            const params = new URLSearchParams();
+            if (level) params.set("level", level);
+            if (source) params.set("source", source);
+            if (search) params.set("search", search);
+            params.set("limit", "200");
+
+            const resp = await fetch(`/api/logs?${params}`);
+            if (resp.ok) {
+                const data: { entries?: LogEntry[] } = await resp.json();
+                setLogs(data.entries || []);
+            }
+        } catch {
+            /* ignore poll failures */
+        }
+    }, [level, source, search]);
+
+    useEffect(() => {
+        let timeoutId: ReturnType<typeof setTimeout> | null = null;
+        let cancelled = false;
+
+        fetchLogs();
+
+        const scheduleNext = () => {
+            if (cancelled) return;
+            timeoutId = setTimeout(async () => {
+                if (document.visibilityState === "visible") {
+                    await fetchLogs();
+                }
+                scheduleNext();
+            }, 3000);
+        };
+
+        scheduleNext();
+
+        const handleVisibility = () => {
+            if (document.visibilityState === "visible") {
+                fetchLogs();
+            }
+        };
+        document.addEventListener("visibilitychange", handleVisibility);
+
+        return () => {
+            cancelled = true;
+            if (timeoutId) clearTimeout(timeoutId);
+            document.removeEventListener("visibilitychange", handleVisibility);
+        };
+    }, [fetchLogs]);
+
+    useEffect(() => {
+        if (autoScroll && containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+        }
+    }, [logs, autoScroll]);
+
+    const selectStyle: React.CSSProperties = {
+        background: "#313244",
+        color: "#cdd6f4",
+        border: "1px solid #45475a",
+        borderRadius: 4,
+        padding: "4px 8px"
+    };
+
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            height: "calc(100vh - 64px)",
+            background: "#1e1e2e",
+            color: "#cdd6f4"
+        }}>
+            {/* Toolbar */}
+            <div style={{
+                display: "flex",
+                gap: 8,
+                padding: "8px 16px",
+                borderBottom: "1px solid #313244",
+                alignItems: "center",
+                flexWrap: "wrap"
+            }}>
+                <Select
+                    value={level}
+                    onValueChange={setLevel}
+                    size="small"
+                    placeholder="All Levels"
+                >
+                    <SelectItem value="">All Levels</SelectItem>
+                    <SelectItem value="debug">Debug</SelectItem>
+                    <SelectItem value="info">Info</SelectItem>
+                    <SelectItem value="warn">Warn</SelectItem>
+                    <SelectItem value="error">Error</SelectItem>
+                </Select>
+                <Select
+                    value={source}
+                    onValueChange={setSource}
+                    size="small"
+                    placeholder="All Sources"
+                >
+                    <SelectItem value="">All Sources</SelectItem>
+                    <SelectItem value="api">API</SelectItem>
+                    <SelectItem value="auth">Auth</SelectItem>
+                    <SelectItem value="storage">Storage</SelectItem>
+                    <SelectItem value="realtime">Realtime</SelectItem>
+                    <SelectItem value="system">System</SelectItem>
+                </Select>
+                <TextField
+                    size="small"
+                    placeholder="Search logs..."
+                    value={search}
+                    onChange={e => setSearch(e.target.value)}
+                    className="flex-1 min-w-[200px]"
+                />
+                <div className="flex items-center gap-1.5 cursor-pointer">
+                    <Checkbox
+                        id="auto-scroll"
+                        checked={autoScroll}
+                        onCheckedChange={setAutoScroll}
+                        size="small"
+                        padding={false}
+                    />
+                    <Label
+                        htmlFor="auto-scroll"
+                        className="text-xs select-none cursor-pointer"
+                    >
+                        Auto-scroll
+                    </Label>
+                </div>
+                <span style={{ fontSize: 12, color: "#6c7086" }}>
+                    {logs.length} entries
+                </span>
+            </div>
+            {/* Log entries */}
+            <div
+                ref={containerRef}
+                style={{
+                    flex: 1,
+                    overflow: "auto",
+                    fontFamily: "monospace",
+                    fontSize: 12,
+                    padding: "8px 0"
+                }}
+            >
+                {logs.map(log => (
+                    <div
+                        key={log.id}
+                        style={{
+                            padding: "2px 16px",
+                            display: "flex",
+                            gap: 8,
+                            borderBottom: "1px solid #181825"
+                        }}
+                    >
+                        <span style={{ color: "#6c7086", flexShrink: 0 }}>
+                            {new Date(log.timestamp).toLocaleTimeString()}
+                        </span>
+                        <span style={{
+                            color: LEVEL_COLORS[log.level] || "#cdd6f4",
+                            width: 40,
+                            flexShrink: 0,
+                            textTransform: "uppercase",
+                            fontWeight: 600
+                        }}>
+                            {log.level}
+                        </span>
+                        <span style={{
+                            color: SOURCE_COLORS[log.source] || "#cdd6f4",
+                            width: 64,
+                            flexShrink: 0
+                        }}>
+                            [{log.source}]
+                        </span>
+                        <span style={{ color: "#cdd6f4", flex: 1 }}>
+                            {log.message}
+                        </span>
+                    </div>
+                ))}
+                {logs.length === 0 && (
+                    <div style={{
+                        padding: 32,
+                        textAlign: "center",
+                        color: "#6c7086"
+                    }}>
+                        No log entries yet. Logs will appear here as requests come in.
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}