@rebasepro/studio 0.17.3 → 0.18.0

package/src/components/JSEditor/JSMonacoEditor.tsx

@@ -1,410 +0,0 @@
-
-import React, { useRef, useEffect } from "react";
-import Editor, { Monaco, OnMount } from "@monaco-editor/react";
-import type { editor } from "monaco-editor";
-import { cls, defaultBorderMixin, FileIcon } from "@rebasepro/ui";
-import { useModeController } from "@rebasepro/app";
-import { ALL_WHERE_FILTER_OPS } from "@rebasepro/types";
-
-/**
- * Shape of `monaco.languages.typescript` at runtime.
- * The bundled type stubs mark this API as deprecated, but it is fully functional.
- */
-interface MonacoTypeScriptApi {
-    typescriptDefaults: {
-        setCompilerOptions(options: Record<string, unknown>): void;
-        setDiagnosticsOptions(options: Record<string, unknown>): void;
-        addExtraLib(content: string, filePath: string): void;
-    };
-    ScriptTarget: Record<string, number>;
-    ModuleKind: Record<string, number>;
-}
-
-/**
- * Ambient type definitions for the Rebase client SDK injected into Monaco.
- *
- * Hand-mirrored from `@rebasepro/client`, so it drifts: this block spent long
- * enough declaring the ten Firestore-era filter operators and a
- * `where?: Record<string, string>` that the editor was autocompleting a query
- * shape the server rejects. The operator union is interpolated from
- * {@link ALL_WHERE_FILTER_OPS} for that reason — it is the one part that cannot
- * fall behind. The rest still has to be kept in step by hand.
- */
-const REBASE_CLIENT_TYPES = `
-// ─── Rebase Client SDK Type Definitions ─────────────────────────────
-
-/** A flat database row with the id merged at the top level. */
-
-interface FindParams {
-    limit?: number;
-    offset?: number;
-    page?: number;
-    /** \`{ status: ["==", "active"] }\` — a tuple per field, or an array of tuples. */
-    where?: Record<string, [WhereFilterOp, any] | [WhereFilterOp, any][]>;
-    logical?: LogicalCondition;
-    /** \`["created_at", "desc"]\` */
-    orderBy?: [string, "asc" | "desc"];
-    include?: string[];
-    searchString?: string;
-}
-
-interface FindResult<M extends Record<string, any> = any> {
-    data: M[];
-    meta: {
-        total: number;
-        limit: number;
-        offset: number;
-        hasMore: boolean;
-    };
-}
-
-type WhereFilterOp = ${ALL_WHERE_FILTER_OPS.map(op => `"${op}"`).join(" | ")};
-
-interface FilterCondition {
-    column: string;
-    operator: WhereFilterOp;
-    value: any;
-}
-
-interface LogicalCondition {
-    type: "and" | "or";
-    conditions: (FilterCondition | LogicalCondition)[];
-}
-
-interface QueryBuilder<M extends Record<string, any> = any> {
-    where(column: keyof M & string, operator: WhereFilterOp, value: any): QueryBuilder<M>;
-    orderBy(column: keyof M & string, direction?: "asc" | "desc"): QueryBuilder<M>;
-    limit(count: number): QueryBuilder<M>;
-    offset(count: number): QueryBuilder<M>;
-    search(searchString: string): QueryBuilder<M>;
-    find(): Promise<FindResult<M>>;
-    count(): Promise<number>;
-}
-
-interface CollectionClient<M extends Record<string, any> = any> {
-    find(params?: FindParams): Promise<FindResult<M>>;
-    findById(id: string | number): Promise<M | undefined>;
-    create(data: Partial<M>, id?: string | number): Promise<M>;
-    update(id: string | number, data: Partial<M>): Promise<M>;
-    delete(id: string | number): Promise<void>;
-    where(column: keyof M & string, operator: WhereFilterOp, value: any): QueryBuilder<M>;
-    orderBy(column: keyof M & string, direction?: "asc" | "desc"): QueryBuilder<M>;
-    limit(count: number): QueryBuilder<M>;
-    offset(count: number): QueryBuilder<M>;
-    search(searchString: string): QueryBuilder<M>;
-    listen?(params: FindParams | undefined, onUpdate: (response: FindResult<M>) => void, onError?: (error: Error) => void): () => void;
-    listenById?(id: string | number, onUpdate: (row: M | undefined) => void, onError?: (error: Error) => void): () => void;
-    count?(params?: FindParams): Promise<number>;
-}
-
-interface User {
-    uid: string;
-    email: string | null;
-    displayName: string | null;
-    photoURL: string | null;
-    providerId: string;
-    isAnonymous: boolean;
-    emailVerified?: boolean;
-    roles?: string[];
-    metadata?: Record<string, unknown>;
-}
-
-interface RebaseSession {
-    accessToken: string;
-    refreshToken: string;
-    expiresAt: number;
-    user: User;
-}
-
-type AuthChangeEvent = 'SIGNED_IN' | 'SIGNED_OUT' | 'TOKEN_REFRESHED' | 'USER_UPDATED';
-
-interface RebaseAuth {
-    signInWithEmail(email: string, password: string): Promise<{ user: User; accessToken: string; refreshToken: string }>;
-    signUp(email: string, password: string, displayName?: string): Promise<{ user: User; accessToken: string; refreshToken: string }>;
-    signInWithGoogle(idToken: string): Promise<{ user: User; accessToken: string; refreshToken: string }>;
-    signOut(): Promise<void>;
-    refreshSession(): Promise<RebaseSession>;
-    getUser(): Promise<User>;
-    updateUser(updates: { displayName?: string; photoURL?: string }): Promise<User>;
-    resetPasswordForEmail(email: string): Promise<{ success: boolean; message: string }>;
-    resetPassword(token: string, password: string): Promise<{ success: boolean; message: string }>;
-    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<RebaseSession[]>;
-    revokeSession(sessionId: string): Promise<{ success: boolean }>;
-    revokeAllSessions(): Promise<{ success: boolean }>;
-    getSession(): RebaseSession | null;
-    onAuthStateChange(callback: (event: AuthChangeEvent, session: RebaseSession | null) => void): () => void;
-}
-
-interface AdminUser {
-    uid: string;
-    email: string;
-    displayName: string | null;
-    photoURL: string | null;
-    provider: string;
-    roles: string[];
-    createdAt: string;
-    updatedAt: string;
-}
-
-interface RebaseCMS {
-    listUsers(): Promise<{ users: AdminUser[] }>;
-    getUser(userId: string): Promise<{ user: AdminUser }>;
-    createUser(data: { email: string; displayName?: string; password?: string; roles?: string[] }): Promise<{ user: AdminUser }>;
-    updateUser(userId: string, data: { email?: string; displayName?: string; password?: string; roles?: string[] }): Promise<{ user: AdminUser }>;
-    deleteUser(userId: string): Promise<{ success: boolean }>;
-    bootstrap(): Promise<{ success: boolean; message: string; user: { uid: string; roles: string[] } }>;
-}
-
-interface UploadFileProps {
-    file: FileIcon;
-    fileName?: string;
-    path?: string;
-    metadata?: Record<string, unknown>;
-    bucket?: string;
-}
-
-interface UploadFileResult {
-    path: string;
-    bucket?: string;
-    downloadUrl?: string;
-}
-
-interface DownloadConfig {
-    url: string | null;
-    fileNotFound?: boolean;
-    metadata?: Record<string, unknown>;
-}
-
-interface StorageSource {
-    putObject(props: UploadFileProps): Promise<UploadFileResult>;
-    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<unknown>;
-}
-
-type RebaseData = {
-    /** Look up a collection by slug. */
-    collection(slug: string): CollectionClient;
-} & {
-    /** Dynamic collection access — e.g. client.data.authors */
-    [collectionSlug: string]: CollectionClient;
-};
-
-/**
- * The Rebase client instance. Use \`client.data\`, \`client.auth\`, \`client.admin\`,
- * \`client.storage\`, and \`client.call()\` to interact with your Rebase backend.
- *
- * @example
- * // Query a collection
- * const result = await client.data.products.find({ limit: 10 });
- *
- * // Create a record
- * await client.data.products.create({ name: "Camera", price: 299 });
- *
- * // Fluent query
- * const expensive = await client.data.products.where("price", ">", 100).orderBy("price", "desc").limit(5).find();
- *
- * // Auth
- * const session = client.auth.getSession();
- *
- * // Admin
- * const { users } = await client.admin.listUsers();
- *
- * // Custom endpoint
- * const result = await client.call("/my-endpoint", { myData: 123 });
- */
-interface RebaseClient {
-    /** Data access — dynamic collection accessors */
-    data: RebaseData;
-    /** Authentication methods */
-    auth: RebaseAuth;
-    /** User/role admin methods */
-    admin: RebaseCMS;
-    /** Storage operations */
-    storage?: StorageSource;
-    /** Call a custom server-side endpoint */
-    call<T = unknown>(endpoint: string, payload?: unknown): Promise<T>;
-    /** Direct collection access (shorthand) */
-    [collectionSlug: string]: unknown;
-}
-
-/** The pre-configured client instance. Already authenticated with the current user session. */
-declare const client: RebaseClient;
-
-/** Execution context with user and collection information. */
-interface JSEditorContext {
-    /** The user the script is running as. */
-    user: {
-        uid: string;
-        displayName: string | null;
-        email: string | null;
-        roles?: string[];
-    } | null;
-    /** Registered collections with their property names. */
-    collections: Array<{
-        slug: string;
-        name: string;
-        properties: string[];
-    }>;
-}
-
-/** Execution context — contains info about the selected user and registered collections. */
-declare const context: JSEditorContext;
-`;
-
-export type CollectionInfo = {
-    slug: string;
-    name: string;
-    properties: string[];
-};
-
-export type JSMonacoEditorProps = {
-    value: string;
-    onChange: (value: string | undefined) => void;
-    onRun?: (selectedText?: string) => void;
-    className?: string;
-    readOnly?: boolean;
-    autoFocus?: boolean;
-    /** Collection slugs for basic autocomplete */
-    collectionSlugs?: string[];
-    /** Full collection info with property names for richer type generation */
-    collections?: CollectionInfo[];
-};
-
-export const JSMonacoEditor = ({
-    value,
-    onChange,
-    onRun,
-    className,
-    readOnly = false,
-    autoFocus = true,
-    collectionSlugs = [],
-    collections = []
-}: JSMonacoEditorProps) => {
-    const { mode } = useModeController();
-    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-    const monacoRef = useRef<Monaco | null>(null);
-    const onRunRef = useRef(onRun);
-    onRunRef.current = onRun;
-    const typesRegisteredRef = useRef(false);
-
-    const handleEditorOnMount: OnMount = (editorInstance, monaco) => {
-        editorRef.current = editorInstance;
-        monacoRef.current = monaco;
-
-        // Register Cmd/Ctrl+Enter to run
-        editorInstance.addAction({
-            id: "run-script",
-            label: "Run Script",
-            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-            contextMenuGroupId: "operation",
-            contextMenuOrder: 0,
-            run: () => {
-                if (onRunRef.current) {
-                    const selection = editorInstance.getSelection();
-                    let selectedText: string | undefined;
-                    if (selection && !selection.isEmpty()) {
-                        selectedText = editorInstance.getModel()?.getValueInRange(selection)?.trim();
-                    }
-                    onRunRef.current(selectedText || undefined);
-                }
-            }
-        });
-
-        // Configure TypeScript/JavaScript defaults for richer completion
-        if (!typesRegisteredRef.current) {
-            typesRegisteredRef.current = true;
-
-            // Configure TS compiler for modern JS with top-level await
-            // Note: cast through `any` because the bundled type stubs mark
-            // `monaco.languages.typescript` as deprecated while the runtime
-            // API is fully functional.
-            const ts = (monaco.languages as unknown as { typescript: MonacoTypeScriptApi }).typescript;
-            ts.typescriptDefaults.setCompilerOptions({
-                target: ts.ScriptTarget.ESNext,
-                module: ts.ModuleKind.ESNext,
-                allowJs: true,
-                checkJs: false,
-                strict: false,
-                noEmit: true,
-                allowNonTsExtensions: true
-            });
-
-            // Suppress diagnostics that don't apply to our script context.
-            // Scripts are executed inside `new AsyncFunction(...)` at runtime,
-            // so top-level `await` (1375) and `return` (1108) are valid.
-            ts.typescriptDefaults.setDiagnosticsOptions({
-                diagnosticCodesToIgnore: [1375, 1108]
-            });
-
-            // Inject the Rebase Client SDK type definitions
-            ts.typescriptDefaults.addExtraLib(
-                REBASE_CLIENT_TYPES,
-                "ts:rebase-client.d.ts"
-            );
-
-            // Generate collection-specific types from registered collections
-            if (collections.length > 0) {
-                const lines: string[] = [];
-                for (const col of collections) {
-                    // Generate a typed interface for each collection
-                    const ifaceName = col.slug.replace(/[^a-zA-Z0-9_]/g, "_");
-                    const propsType = col.properties.length > 0
-                        ? `{ ${col.properties.map(p => `${p}: any`).join("; ")} }`
-                        : "Record<string, any>";
-                    lines.push(`/** Collection: ${col.name} (${col.slug}) */`);
-                    lines.push(`interface ${ifaceName}_Row ${propsType}`);
-                    lines.push(`declare namespace client.data { const ${col.slug}: CollectionClient<${ifaceName}_Row>; }`);
-                }
-                ts.typescriptDefaults.addExtraLib(
-                    lines.join("\n"),
-                    "ts:rebase-collections.d.ts"
-                );
-            } else if (collectionSlugs.length > 0) {
-                // Fallback: just slug names without property info
-                const collectionHints = collectionSlugs.map(slug =>
-                    `/** Collection: ${slug} */\ndeclare namespace client.data { const ${slug}: CollectionClient; }`
-                ).join("\n");
-                ts.typescriptDefaults.addExtraLib(
-                    collectionHints,
-                    "ts:rebase-collections.d.ts"
-                );
-            }
-        }
-
-        if (autoFocus) {
-            editorInstance.focus();
-        }
-    };
-
-    return (
-        <div className={cls("relative w-full h-full overflow-hidden", className)}>
-            <Editor
-                height="100%"
-                defaultLanguage="typescript"
-                path="rebase-script.ts"
-                value={value}
-                onChange={onChange}
-                onMount={handleEditorOnMount}
-                theme={mode === "dark" ? "vs-dark" : "vs"}
-                options={{
-                    minimap: { enabled: false },
-                    fontSize: 14,
-                    lineNumbers: "on",
-                    scrollBeyondLastLine: false,
-                    automaticLayout: true,
-                    readOnly,
-                    tabSize: 2,
-                    wordWrap: "on",
-                    suggestOnTriggerCharacters: true,
-                    quickSuggestions: true,
-                    parameterHints: { enabled: true }
-                }}
-            />
-        </div>
-    );
-};

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -1,273 +0,0 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { ArrowDownToLineIcon, Checkbox, cls, defaultBorderMixin, Label, Select, SelectItem, TextField, Typography } from "@rebasepro/ui";
-import { idNum, useLogTail } from "./useLogTail";
-import type { LogTransport } from "./useLogTail";
-
-const LEVEL_COLORS: Record<string, string> = {
-    debug: "text-surface-500",
-    info: "text-blue-600 dark:text-blue-500",
-    warn: "text-amber-600 dark:text-amber-500",
-    error: "text-red-600 dark:text-red-500"
-};
-
-const SOURCE_COLORS: Record<string, string> = {
-    api: "text-sky-600 dark:text-sky-400",
-    auth: "text-purple-600 dark:text-purple-400",
-    storage: "text-green-600 dark:text-green-500",
-    realtime: "text-orange-600 dark:text-orange-400",
-    system: "text-surface-600 dark:text-surface-400"
-};
-
-const TRANSPORT_LABELS: Record<LogTransport, string> = {
-    connecting: "Connecting",
-    live: "Live",
-    polling: "Polling"
-};
-
-const TRANSPORT_DOTS: Record<LogTransport, string> = {
-    connecting: "bg-amber-500",
-    live: "bg-green-500",
-    polling: "bg-surface-400"
-};
-
-const TRANSPORT_TITLES: Record<LogTransport, string> = {
-    connecting: "Reconnecting to the log stream.",
-    live: "Streaming — entries appear as the server writes them.",
-    polling: "This server has no log stream; falling back to a refresh every 3 seconds."
-};
-
-// How close to the bottom edge still counts as "at the bottom".
-const STICK_THRESHOLD = 40;
-
-export function LogsExplorer() {
-    const [level, setLevel] = useState<string>("all");
-    const [source, setSource] = useState<string>("all");
-    const [searchInput, setSearchInput] = useState("");
-    const [search, setSearch] = useState("");
-    const [autoScroll, setAutoScroll] = useState(true);
-    // Entries that arrived while the user was scrolled away from the bottom.
-    const [newCount, setNewCount] = useState(0);
-    const [atBottom, setAtBottom] = useState(true);
-    const containerRef = useRef<HTMLDivElement>(null);
-    // Whether the view is stuck to the bottom right now. A ref, not state:
-    // the scroll handler and the entry-counting effect both read it synchronously.
-    const stickRef = useRef(true);
-    const lastMaxIdRef = useRef<number | null>(null);
-
-    // Debounce the search box so typing doesn't reopen the stream per keystroke.
-    useEffect(() => {
-        const t = setTimeout(() => setSearch(searchInput), 300);
-        return () => clearTimeout(t);
-    }, [searchInput]);
-
-    const { logs, error, transport, dropped } = useLogTail({ level,
-        source,
-        search });
-
-    // A filter change replaces the window wholesale — "new since you looked
-    // away" stops meaning anything, so the counter starts over.
-    useEffect(() => {
-        setNewCount(0);
-    }, [level, source, search]);
-
-    // Count what arrived while the user was reading further up. Driven off the
-    // rendered window rather than off the transport, so it means the same thing
-    // whether the entries were streamed or polled.
-    useEffect(() => {
-        const max = logs.length > 0 ? idNum(logs[logs.length - 1]) : null;
-        const prevMax = lastMaxIdRef.current;
-        if (prevMax != null && !stickRef.current) {
-            const fresh = logs.filter(e => idNum(e) > prevMax).length;
-            if (fresh > 0) setNewCount(c => c + fresh);
-        }
-        lastMaxIdRef.current = max;
-    }, [logs]);
-
-    const scrollToBottom = useCallback(() => {
-        const el = containerRef.current;
-        if (!el) return;
-        el.scrollTop = el.scrollHeight;
-        stickRef.current = true;
-        setAtBottom(true);
-        setNewCount(0);
-    }, []);
-
-    // Stick to the bottom only while the user is already there. Scrolling up
-    // disengages; scrolling back down re-engages. Our own scrollTop writes
-    // always land at the bottom, so they can never disengage it.
-    const handleScroll = useCallback(() => {
-        const el = containerRef.current;
-        if (!el) return;
-        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;
-        stickRef.current = nearBottom;
-        setAtBottom(nearBottom);
-        if (nearBottom) setNewCount(0);
-    }, []);
-
-    useLayoutEffect(() => {
-        if (autoScroll && stickRef.current) {
-            const el = containerRef.current;
-            if (el) el.scrollTop = el.scrollHeight;
-        }
-    }, [logs, autoScroll]);
-
-    return (
-        <div className="flex flex-col h-[calc(100vh-64px)] w-full bg-surface-50 dark:bg-surface-800">
-            {/* Toolbar */}
-            <div className={cls(
-                "flex gap-2 p-3 border-b items-center flex-wrap shrink-0",
-                defaultBorderMixin
-            )}>
-                <Select
-                    value={level}
-                    onValueChange={setLevel}
-                    size="small"
-                    placeholder="All Levels"
-                >
-                    <SelectItem value="all">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">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"
-                    aria-label="Search logs"
-                    placeholder="Search logs..."
-                    value={searchInput}
-                    onChange={e => setSearchInput(e.target.value)}
-                    className="flex-1 min-w-[200px]"
-                />
-                <div className="flex items-center gap-1.5 cursor-pointer ml-2">
-                    <Checkbox
-                        id="auto-scroll"
-                        checked={autoScroll}
-                        onCheckedChange={(checked: boolean) => {
-                            setAutoScroll(checked);
-                            if (checked) scrollToBottom();
-                        }}
-                        size="small"
-                        padding={false}
-                    />
-                    <Label
-                        htmlFor="auto-scroll"
-                        className="text-xs select-none cursor-pointer text-surface-600 dark:text-surface-400"
-                    >
-                        Auto-scroll
-                    </Label>
-                </div>
-                {/* Whether the tail is actually attached. A log view with
-                    nothing in it is ambiguous — quiet server, or a stream that
-                    dropped — and this is the difference. */}
-                <div className="ml-auto pl-4 flex items-center gap-3">
-                    <div className="flex items-center gap-1.5" title={TRANSPORT_TITLES[transport]}>
-                        <span
-                            aria-hidden
-                            className={cls("w-1.5 h-1.5 rounded-full shrink-0", TRANSPORT_DOTS[transport])}
-                        />
-                        <Typography variant="caption" color="secondary">
-                            {TRANSPORT_LABELS[transport]}
-                        </Typography>
-                    </div>
-                    <Typography variant="caption" color="secondary">
-                        {logs.length} entries
-                    </Typography>
-                </div>
-            </div>
-
-            {/* A broken tail must stay visible even while stale logs are on
-                screen — otherwise the view quietly freezes. */}
-            {error && logs.length > 0 && (
-                <div className={cls(
-                    "px-4 py-1.5 border-b bg-amber-50 dark:bg-amber-950/20 shrink-0",
-                    defaultBorderMixin
-                )}>
-                    <Typography variant="caption" className="text-amber-700 dark:text-amber-400">
-                        {error}
-                    </Typography>
-                </div>
-            )}
-
-            {/* The server bounds what it holds per connection, so a burst big
-                enough leaves a hole in what is on screen. Say so: a tail that
-                silently skips entries is worse than one that admits it. */}
-            {dropped > 0 && (
-                <div className={cls(
-                    "px-4 py-1.5 border-b bg-amber-50 dark:bg-amber-950/20 shrink-0",
-                    defaultBorderMixin
-                )}>
-                    <Typography variant="caption" className="text-amber-700 dark:text-amber-400">
-                        {dropped} {dropped === 1 ? "entry was" : "entries were"} dropped — the log is
-                        arriving faster than this view can read it. Narrow the filter to keep up.
-                    </Typography>
-                </div>
-            )}
-
-            {/* Log entries */}
-            <div className="relative flex-1 min-h-0">
-                <div
-                    ref={containerRef}
-                    onScroll={handleScroll}
-                    className="h-full overflow-auto py-2"
-                >
-                    {logs.map(log => (
-                        <div
-                            key={log.id}
-                            className={cls(
-                                "flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors",
-                                defaultBorderMixin
-                            )}
-                        >
-                            <Typography variant="body2" color="secondary" className="w-[72px] shrink-0 font-mono">
-                                {new Date(log.timestamp).toLocaleTimeString()}
-                            </Typography>
-                            <Typography variant="body2" className={cls("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500")}>
-                                {log.level}
-                            </Typography>
-                            <Typography variant="body2" className={cls("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500")}>
-                                [{log.source}]
-                            </Typography>
-                            <Typography variant="body2" className="flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100">
-                                {log.message}
-                            </Typography>
-                        </div>
-                    ))}
-                    {logs.length === 0 && (
-                        <div className="p-8 text-center">
-                            <Typography
-                                variant="body2"
-                                className={error ? "text-red-600 dark:text-red-500" : undefined}
-                                color={error ? undefined : "secondary"}
-                            >
-                                {error ?? "No log entries yet. Logs will appear here as requests come in."}
-                            </Typography>
-                        </div>
-                    )}
-                </div>
-
-                {autoScroll && !atBottom && newCount > 0 && (
-                    <button
-                        onClick={scrollToBottom}
-                        className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-full bg-primary text-white text-xs font-medium pl-2.5 pr-3 py-1.5 shadow-md hover:bg-primary-dark transition-colors"
-                    >
-                        <ArrowDownToLineIcon size={14}/>
-                        {newCount} new {newCount === 1 ? "entry" : "entries"}
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-}