@adecore/database 0.17.0-beta.2 → 0.18.0

package/src/console/QueryConsole.tsx

@@ -1,15 +1,16 @@
-import { useEffect, useId, useMemo, useRef, useState, type Ref } from 'react';
+import { useEffect, useId, useMemo, useRef, useState, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
-import { Check, CircleAlert, History, Play, Square } from 'lucide-react';
-import type { TFunction } from 'i18next';
+import { Check, CircleAlert, History, Play, Square, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Banner, Button, Icon, messageOf, PromptDialog, Spinner, Tabs, Tooltip } from '@adecore/ui';
+import { Banner, Button, ColumnResizeHandle, Icon, IconButton, messageOf, PromptDialog, Spinner, Tabs, Tooltip, useColumnResize } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { DatabaseRequestError, type Connection } from '../client/types.ts';
-import { useDatabaseClient, useDatabaseFiles } from '../client-context.ts';
+import type { DatabaseNotice } from '../actions.ts';
+import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseNotice, useDatabaseStorage } from '../client-context.ts';
 import type { FileFormat, RowsResult, SchemaInfo, StatementResult } from '../protocol/index.ts';
 import { splitStatements, statementAt } from '../sql-split.ts';
 import { DestructiveDialog } from './DestructiveDialog.tsx';
+import type { QueryConsoleEditorHandle, QueryConsoleEditorProps, QueryConsoleRunScope } from './editor-slot.ts';
 import { findDestructive, type DestructiveStatement } from './destructive.ts';
 import type { HistoryEntry } from './history.ts';
 import { HistoryPanel } from './HistoryPanel.tsx';
@@ -17,16 +18,20 @@ import { statementLabel } from './labels.ts';
 import { isPageable, outcomeOf } from './outcome.ts';
 import { SchemaPicker } from './SchemaPicker.tsx';
 import { orderSchemas } from './schemas.ts';
+import { useResultKeys } from './result-keys.ts';
 import { RUN_ALL_SHORTCUT, RUN_SHORTCUT } from './shortcuts.ts';
-import { SqlEditor, type RunScope } from './SqlEditor.tsx';
+import { SqlEditor } from './SqlEditor.tsx';
 import { StatementResultView, type ResultPager } from './StatementResultView.tsx';
 import { TransactionControls, type TransactionMode } from './TransactionControls.tsx';
 import { useConsoleHistory } from './useConsoleHistory.ts';
 
 export interface QueryConsoleProps {
-    connection: Connection;
-    /* The schema the statements run in. */
+    /* Without one the console draws its editor and a bar with only `toolbarEnd`, where an app can offer to pick one; nothing runs. */
+    connection?: Connection;
+    /* The schema the statements run in. Without `onSchemaChange` the picker starts from it, and a new one resets the pick. */
     schema?: string;
+    /* Makes the schema the app's: the picker shows `schema` and asks for another through this. */
+    onSchemaChange?(schema: string): void;
     /* The SQL, when the app keeps it (a tab that survives a reload). Without it the console keeps the text itself, starting from `defaultValue`. */
     value?: string;
     defaultValue?: string;
@@ -35,6 +40,10 @@ export interface QueryConsoleProps {
     defaultHistoryOpen?: boolean;
     /* Puts the caret in the editor when the console mounts, for one a person just opened. */
     autoFocus?: boolean;
+    /* Draws the app's own editor in place of the console's text area. It owns its keys and runs through `run`. */
+    renderEditor?(editor: QueryConsoleEditorProps): ReactNode;
+    /* The app's own content in the group at the end of the bar, before the schema picker and History, such as where the console runs. */
+    toolbarEnd?: ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
@@ -46,70 +55,74 @@ type Run =
     | { readonly status: 'failed'; readonly message: string }
     | { readonly status: 'cancelled' };
 
-/* What a run is about to execute, and how the toolbar names it afterwards. */
-interface RunTarget {
-    readonly sql: string;
-    readonly ran: Ran;
-}
-
-type Ran = { readonly kind: 'statement'; readonly label: string } | { readonly kind: 'selection' } | { readonly kind: 'all'; readonly count: number };
-
 interface PageState {
     readonly offset: number;
     readonly rows: RowsResult;
 }
 
-interface Notice {
-    readonly tone: 'error' | 'neutral';
-    readonly message: string;
-}
-
 /* Rows in the first page of a result, and in every page after it. */
 const PAGE_SIZE = 500;
 
-const ranText = (ran: Ran, t: TFunction<'database'>): string => {
-    switch (ran.kind) {
-        case 'statement':
-            return t('console.ranStatement', { statement: ran.label });
-        case 'selection':
-            return t('console.ranSelection');
-        case 'all':
-            return t('console.ranAll', { count: ran.count, formatted: formatNumber(ran.count) });
+/* Where the height of the results is kept, in pixels, for every console. */
+export const RESULTS_HEIGHT_KEY = 'database:console-results';
+
+/* The results and the editor never shrink below these; the results start at half the console. */
+const MIN_RESULTS_HEIGHT = 96;
+const MIN_EDITOR_HEIGHT = 120;
+
+const parseHeight = (raw: string | null | undefined): number | null => {
+    try {
+        const value: unknown = JSON.parse(raw ?? 'null');
+        return typeof value === 'number' && Number.isFinite(value) && value >= MIN_RESULTS_HEIGHT ? Math.round(value) : null;
+    } catch {
+        return null;
     }
 };
 
+/* The app's editor as an element of its own, so it gets its props the way `SqlEditor` does and not during the console's render. */
+function AppEditor({ render, ...editor }: QueryConsoleEditorProps & { render(editor: QueryConsoleEditorProps): ReactNode }) {
+    return render(editor);
+}
+
 /* Type SQL, run it, and read what each statement did. Several statements give a tab each. */
 export function QueryConsole({
     connection,
     schema,
+    onSchemaChange,
     value,
     defaultValue = '',
     onValueChange,
     defaultHistoryOpen = false,
     autoFocus = false,
+    renderEditor,
+    toolbarEnd,
     className,
     ref
 }: QueryConsoleProps) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
+    const act = useDatabaseAction();
+    const onNotice = useDatabaseNotice();
     const files = useDatabaseFiles();
+    const storage = useDatabaseStorage();
     // A channel of its own, so a transaction a person starts here stays out of the table views and the designer.
     const channel = `console:${useId()}`;
-    const session = useMemo(() => client.session(connection, channel), [client, connection, channel]);
-    const engine = connection.config.engine;
+    const session = useMemo(() => (connection === undefined ? null : client.session(connection, channel)), [client, connection, channel]);
+    const engine = connection?.config.engine;
     useEffect(
         () => () => {
-            void session.close();
+            void session?.close();
         },
         [session]
     );
-    const history = useConsoleHistory(connection.id);
+    // Nothing is recorded without a connection, so the key of none is never written.
+    const history = useConsoleHistory(connection?.id ?? '');
     const running = useRef<AbortController | null>(null);
     const generation = useRef(0);
-    const editor = useRef<HTMLTextAreaElement>(null);
+    const editorHandle = useRef<QueryConsoleEditorHandle>(null);
+    const resultsPane = useRef<HTMLElement>(null);
     const [own, setOwn] = useState(defaultValue);
     const [run, setRun] = useState<Run>({ status: 'idle' });
-    const [ran, setRan] = useState<Ran | null>(null);
     const [tab, setTab] = useState(0);
     const [pages, setPages] = useState<Readonly<Record<number, PageState>>>({});
     const [paging, setPaging] = useState(false);
@@ -119,16 +132,27 @@ export function QueryConsole({
     const [inTransaction, setInTransaction] = useState(false);
     const [settling, setSettling] = useState(false);
     const [endingManual, setEndingManual] = useState(false);
-    const [confirming, setConfirming] = useState<{ readonly target: RunTarget; readonly statements: readonly DestructiveStatement[] } | null>(null);
+    const [confirming, setConfirming] = useState<{ readonly target: string; readonly statements: readonly DestructiveStatement[] } | null>(null);
     const [schemas, setSchemas] = useState<readonly SchemaInfo[]>([]);
     const [seededSchema, setSeededSchema] = useState(schema);
     const [pickedSchema, setPickedSchema] = useState<string | undefined>(undefined);
     const [exporting, setExporting] = useState(false);
-    const [notice, setNotice] = useState<Notice | null>(null);
+    // What the console shows itself when the app takes no notices.
+    const [notice, setNotice] = useState<DatabaseNotice | null>(null);
+    /* Closed until the first run, so the editor has the whole height before anything ran. */
+    const [resultsOpen, setResultsOpen] = useState(false);
+    const [resultsHeight, setResultsHeight] = useState(() => parseHeight(storage?.get(RESULTS_HEIGHT_KEY)));
+    const { startResize } = useColumnResize(resultsPane, {
+        size: resultsHeight ?? MIN_RESULTS_HEIGHT,
+        min: MIN_RESULTS_HEIGHT,
+        from: 'bottom',
+        max: () => (resultsPane.current?.parentElement?.clientHeight ?? 0) - MIN_EDITOR_HEIGHT,
+        onSize: setResultsHeight
+    });
     const sql = value ?? own;
     const blank = sql.trim() === '';
     const busy = run.status === 'running' || settling;
-    const activeSchema = pickedSchema ?? schema;
+    const activeSchema = onSchemaChange === undefined ? (pickedSchema ?? schema) : schema;
 
     if (seededSchema !== schema) {
         setSeededSchema(schema);
@@ -138,15 +162,13 @@ export function QueryConsole({
     useEffect(() => () => running.current?.abort(), []);
 
     useEffect(() => {
-        if (autoFocus) {
-            editor.current?.focus();
+        if (resultsHeight !== null) {
+            storage?.set(RESULTS_HEIGHT_KEY, JSON.stringify(resultsHeight));
         }
-        // Only on mount: a console that later becomes active keeps the focus where the person put it.
-        // eslint-disable-next-line react/exhaustive-deps
-    }, []);
+    }, [storage, resultsHeight]);
 
     useEffect(() => {
-        if (engine !== 'mysql') {
+        if (session === null || engine !== 'mysql') {
             return undefined;
         }
         const controller = new AbortController();
@@ -157,6 +179,14 @@ export function QueryConsole({
         return () => controller.abort();
     }, [engine, session]);
 
+    const notify = (next: DatabaseNotice): void => {
+        if (onNotice === undefined) {
+            setNotice(next);
+        } else {
+            onNotice(next);
+        }
+    };
+
     const changeSql = (next: string): void => {
         if (value === undefined) {
             setOwn(next);
@@ -164,30 +194,28 @@ export function QueryConsole({
         onValueChange?.(next);
     };
 
-    const targetOf = (scope: RunScope): RunTarget | null => {
-        if (scope === 'all') {
-            const statements = splitStatements(sql, engine);
-            const [only] = statements;
-            if (only === undefined) {
-                return null;
-            }
-            return { sql, ran: statements.length > 1 ? { kind: 'all', count: statements.length } : { kind: 'statement', label: statementLabel(only.text) } };
+    /* The SQL a run of the scope sends, or null when there is nothing to run. */
+    const targetOf = (scope: QueryConsoleRunScope): string | null => {
+        if (engine === undefined) {
+            return null;
+        }
+        const selection = editorHandle.current?.selection();
+        if (scope === 'all' || selection === undefined) {
+            return splitStatements(sql, engine).length === 0 ? null : sql;
         }
-        const start = editor.current?.selectionStart ?? 0;
-        const end = editor.current?.selectionEnd ?? 0;
+        const { start, end } = selection;
         const selected = sql.slice(start, end);
         if (splitStatements(selected, engine).length > 0) {
-            return { sql: selected, ran: { kind: 'selection' } };
+            return selected;
         }
-        const statement = statementAt(sql, start, engine);
-        return statement === null ? null : { sql: statement.text, ran: { kind: 'statement', label: statementLabel(statement.text) } };
+        return statementAt(sql, start, engine)?.text ?? null;
     };
 
-    const requestRun = (target: RunTarget | null): void => {
-        if (target === null || busy) {
+    const requestRun = (target: string | null): void => {
+        if (target === null || busy || engine === undefined) {
             return;
         }
-        const statements = findDestructive(target.sql, engine);
+        const statements = findDestructive(target, engine);
         if (statements.length > 0) {
             setConfirming({ target, statements });
             return;
@@ -195,20 +223,23 @@ export function QueryConsole({
         void execute(target);
     };
 
-    const execute = async (target: RunTarget): Promise<void> => {
+    const execute = async (target: string): Promise<void> => {
+        if (session === null || connection === undefined) {
+            return;
+        }
         const controller = new AbortController();
         const mine = ++generation.current;
         running.current = controller;
+        setResultsOpen(true);
         setRun({ status: 'running' });
-        setRan(target.ran);
         setNotice(null);
         const record = (outcome: Pick<HistoryEntry, 'ok' | 'rows'>): void =>
-            history.record({ sql: target.sql, at: Date.now(), connection: connection.name, ...outcome });
+            history.record({ sql: target, at: Date.now(), connection: connection.name, ...outcome });
         try {
             if (mode === 'manual' && !inTransaction) {
                 setInTransaction(await session.transaction('begin', { signal: controller.signal }));
             }
-            const executed = await session.execute(target.sql, { schema: activeSchema, limit: PAGE_SIZE, signal: controller.signal });
+            const executed = await session.execute(target, { schema: activeSchema, limit: PAGE_SIZE, signal: controller.signal });
             if (controller.signal.aborted) {
                 setRun({ status: 'cancelled' });
                 return;
@@ -235,17 +266,24 @@ export function QueryConsole({
     const pickHistory = (entry: HistoryEntry, runIt: boolean): void => {
         changeSql(entry.sql);
         if (runIt) {
-            requestRun({ sql: entry.sql, ran: { kind: 'statement', label: statementLabel(entry.sql) } });
+            requestRun(entry.sql);
         }
     };
 
     const settle = async (action: 'commit' | 'rollback'): Promise<boolean> => {
+        if (session === null) {
+            return false;
+        }
         setSettling(true);
         try {
             setInTransaction(await session.transaction(action));
             return true;
         } catch (error) {
-            setNotice({ tone: 'error', message: messageOf(error) });
+            notify({
+                tone: 'error',
+                title: t(action === 'commit' ? 'console.transaction.commitFailed' : 'console.transaction.rollbackFailed'),
+                description: messageOf(error)
+            });
             return false;
         } finally {
             setSettling(false);
@@ -268,6 +306,9 @@ export function QueryConsole({
     };
 
     const loadPage = async (index: number, result: StatementResult, offset: number): Promise<void> => {
+        if (session === null) {
+            return;
+        }
         const mine = generation.current;
         setPaging(true);
         setNotice(null);
@@ -277,14 +318,14 @@ export function QueryConsole({
                 setPages((current) => ({ ...current, [index]: { offset, rows } }));
             }
         } catch (error) {
-            setNotice({ tone: 'error', message: messageOf(error) });
+            notify({ tone: 'error', title: t('console.pageFailed'), description: messageOf(error) });
         } finally {
             setPaging(false);
         }
     };
 
     const exportResult = async (result: StatementResult, format: FileFormat): Promise<void> => {
-        if (files === undefined) {
+        if (files === undefined || session === null) {
             return;
         }
         setExporting(true);
@@ -292,10 +333,10 @@ export function QueryConsole({
             const path = await files.save({ suggestedName: `result.${format}`, format });
             if (path !== null) {
                 const exported = await session.export({ source: { kind: 'query', sql: result.sql, schema: activeSchema }, format, path });
-                setNotice({ tone: 'neutral', message: t('console.exported', { count: exported.rows, formatted: formatNumber(exported.rows) }) });
+                notify({ tone: 'success', title: t('console.exported', { count: exported.rows, formatted: formatNumber(exported.rows) }) });
             }
         } catch (error) {
-            setNotice({ tone: 'error', message: messageOf(error) });
+            notify({ tone: 'error', title: t('console.exportFailed'), description: messageOf(error) });
         } finally {
             setExporting(false);
         }
@@ -308,7 +349,7 @@ export function QueryConsole({
     const shown: StatementResult | undefined = base?.kind === 'rows' && page !== undefined ? { kind: 'rows', sql: base.sql, ...page.rows } : base;
     const offset = page?.offset ?? 0;
     const pager: ResultPager | undefined =
-        base?.kind === 'rows' && shown?.kind === 'rows' && isPageable(base.sql, engine) && (shown.hasMore || offset > 0)
+        base?.kind === 'rows' && shown?.kind === 'rows' && engine !== undefined && isPageable(base.sql, engine) && (shown.hasMore || offset > 0)
             ? {
                   page: offset / PAGE_SIZE + 1,
                   loading: paging,
@@ -317,102 +358,162 @@ export function QueryConsole({
               }
             : undefined;
     const exportBase = files !== undefined && base?.kind === 'rows' ? base : undefined;
+    // Read for the statement, not for each page of it, so paging through a result asks for nothing again.
+    const keys = useResultKeys(session, engine, base);
+
+    const editorProps: QueryConsoleEditorProps = {
+        ref: editorHandle,
+        value: sql,
+        onValueChange: changeSql,
+        run: (scope) => requestRun(targetOf(scope)),
+        busy,
+        label: t('console.editor'),
+        placeholder: t('console.placeholder'),
+        autoFocus
+    };
 
     return (
         <div ref={ref} className={clsx('flex min-h-0 flex-col bg-surface text-text', className)}>
-            <div className="flex shrink-0 border-b border-border">
-                <div className="flex min-w-0 flex-1 flex-col gap-2 p-3">
-                    <SqlEditor
-                        ref={editor}
-                        value={sql}
-                        onValueChange={changeSql}
-                        onRun={(scope) => requestRun(targetOf(scope))}
-                        label={t('console.editor')}
-                        placeholder={t('console.placeholder')}
-                    />
-                    <div className="flex flex-wrap items-center gap-2">
-                        {run.status === 'running' ? (
-                            <>
-                                <Button size="sm" onClick={() => running.current?.abort()}>
-                                    <Icon icon={Square} size={12} />
-                                    {t('console.cancel')}
-                                </Button>
-                                <Spinner size={14} label={t('console.running')} />
-                            </>
-                        ) : (
+            <div className="flex min-h-0 flex-1">
+                <div className="flex min-w-0 flex-1 flex-col">
+                    {/* The app's editor runs edge to edge, the way it draws a file; the text area keeps the inset of a field. */}
+                    <div className={clsx('flex min-h-0 flex-1 flex-col', renderEditor === undefined && 'px-3 pt-3')}>
+                        {renderEditor === undefined ? <SqlEditor {...editorProps} /> : <AppEditor render={renderEditor} {...editorProps} />}
+                    </div>
+                    <div
+                        className={clsx(
+                            'flex shrink-0 flex-wrap items-center gap-2 px-3 pb-3',
+                            renderEditor === undefined ? 'pt-2' : 'border-t border-border pt-3'
+                        )}
+                    >
+                        {session !== null && (
                             <>
-                                <Tooltip label={t('console.run')} kbd={RUN_SHORTCUT}>
-                                    <Button variant="primary" size="sm" disabled={blank || busy} onClick={() => requestRun(targetOf('selection-or-statement'))}>
-                                        <Icon icon={Play} size={12} />
-                                        {t('console.run')}
-                                    </Button>
-                                </Tooltip>
-                                <Tooltip label={t('console.runAll')} kbd={RUN_ALL_SHORTCUT}>
-                                    <Button variant="secondary" size="sm" disabled={blank || busy} onClick={() => requestRun(targetOf('all'))}>
-                                        {t('console.runAll')}
-                                    </Button>
-                                </Tooltip>
+                                {run.status === 'running' ? (
+                                    <>
+                                        <Button size="sm" onClick={() => running.current?.abort()}>
+                                            <Icon icon={Square} size={12} />
+                                            {t('console.cancel')}
+                                        </Button>
+                                        <Spinner size={14} label={t('console.running')} />
+                                    </>
+                                ) : (
+                                    <>
+                                        <Tooltip label={t('console.run')} kbd={RUN_SHORTCUT}>
+                                            <Button
+                                                variant="primary"
+                                                size="sm"
+                                                disabled={blank || busy}
+                                                onClick={() => requestRun(targetOf('selection-or-statement'))}
+                                            >
+                                                <Icon icon={Play} size={12} />
+                                                {t('console.run')}
+                                            </Button>
+                                        </Tooltip>
+                                        <Tooltip label={t('console.runAll')} kbd={RUN_ALL_SHORTCUT}>
+                                            <Button variant="secondary" size="sm" disabled={blank || busy} onClick={() => requestRun(targetOf('all'))}>
+                                                {t('console.runAll')}
+                                            </Button>
+                                        </Tooltip>
+                                    </>
+                                )}
+                                <TransactionControls
+                                    mode={mode}
+                                    onModeChange={changeMode}
+                                    open={inTransaction}
+                                    busy={busy}
+                                    onCommit={() => void settle('commit')}
+                                    onRollback={() => void settle('rollback')}
+                                />
                             </>
                         )}
-                        <TransactionControls
-                            mode={mode}
-                            onModeChange={changeMode}
-                            open={inTransaction}
-                            busy={busy}
-                            onCommit={() => void settle('commit')}
-                            onRollback={() => void settle('rollback')}
-                        />
-                        {ran !== null && run.status !== 'idle' && <span className="min-w-0 truncate text-xs text-text-muted">{ranText(ran, t)}</span>}
                         <div className="ml-auto flex items-center gap-2">
-                            {schemas.length > 0 && (
-                                <SchemaPicker schemas={schemas} value={activeSchema ?? null} disabled={busy} onValueChange={setPickedSchema} />
+                            {toolbarEnd}
+                            {session !== null && schemas.length > 0 && (
+                                <SchemaPicker
+                                    schemas={schemas}
+                                    value={activeSchema ?? null}
+                                    disabled={busy}
+                                    onValueChange={onSchemaChange ?? setPickedSchema}
+                                />
+                            )}
+                            {session !== null && (
+                                <Button
+                                    variant="secondary"
+                                    size="sm"
+                                    aria-pressed={historyOpen}
+                                    className="aria-pressed:bg-surface-active aria-pressed:text-text"
+                                    onClick={() => setHistoryOpen(!historyOpen)}
+                                >
+                                    <Icon icon={History} size={12} />
+                                    {t('console.history.title')}
+                                </Button>
                             )}
-                            <Button
-                                size="sm"
-                                aria-pressed={historyOpen}
-                                className="aria-pressed:bg-surface-active aria-pressed:text-text"
-                                onClick={() => setHistoryOpen(!historyOpen)}
-                            >
-                                <Icon icon={History} size={12} />
-                                {t('console.history.title')}
-                            </Button>
                         </div>
                     </div>
                 </div>
-                {historyOpen && <HistoryPanel entries={history.entries} onPick={pickHistory} onClear={history.clear} />}
+                {session !== null && historyOpen && <HistoryPanel entries={history.entries} onPick={pickHistory} onClear={history.clear} />}
             </div>
-            {run.status === 'failed' && <Banner icon={CircleAlert} tone="error" message={run.message} className="shrink-0 pt-2" />}
-            {run.status === 'cancelled' && <Banner icon={CircleAlert} tone="neutral" message={t('console.cancelled')} className="shrink-0 pt-2" />}
-            {notice !== null && (
-                <Banner icon={notice.tone === 'error' ? CircleAlert : Check} tone={notice.tone} message={notice.message} className="shrink-0 pt-2">
+            {session !== null && notice !== null && (
+                <Banner
+                    icon={notice.tone === 'error' ? CircleAlert : Check}
+                    tone={notice.tone === 'error' ? 'error' : 'neutral'}
+                    message={notice.description ?? notice.title}
+                    className="shrink-0 pb-2"
+                >
                     <Button size="xs" onClick={() => setNotice(null)}>
                         {t('console.dismiss')}
                     </Button>
                 </Banner>
             )}
-            {results.length > 1 && (
-                <Tabs.Root value={tab} onValueChange={(next) => setTab(Number(next))}>
-                    <Tabs.List className="shrink-0 px-3">
-                        {results.map((result, position) => (
-                            <Tabs.Tab key={position} value={position}>
-                                {statementLabel(result.sql)}
-                            </Tabs.Tab>
-                        ))}
-                    </Tabs.List>
-                </Tabs.Root>
-            )}
-            {shown !== undefined && (
-                <StatementResultView
-                    key={`${index}:${offset}`}
-                    result={shown}
-                    offset={offset}
-                    pager={pager}
-                    onExport={exportBase === undefined ? undefined : (format) => void exportResult(exportBase, format)}
-                    exporting={exporting}
-                    engine={engine}
-                    valuePanelOpen={panelOpen}
-                    onValuePanelOpenChange={setPanelOpen}
-                />
+            {session !== null && resultsOpen && (
+                <section
+                    ref={resultsPane}
+                    aria-label={t('console.results')}
+                    className="relative flex min-h-24 shrink-0 flex-col border-t border-border"
+                    style={{ height: resultsHeight ?? '50%', maxHeight: `calc(100% - ${MIN_EDITOR_HEIGHT}px)` }}
+                >
+                    <ColumnResizeHandle from="bottom" onPointerDown={startResize} />
+                    <Tabs.Root value={index} onValueChange={(next) => setTab(Number(next))}>
+                        <Tabs.List
+                            aria-label={t('console.results')}
+                            className="shrink-0 pr-1.5 pl-3"
+                            end={<IconButton icon={X} size="sm" label={t('console.closeResults')} onClick={() => setResultsOpen(false)} />}
+                        >
+                            {results.map((result, position) => (
+                                <Tabs.Tab key={position} value={position}>
+                                    {statementLabel(result.sql)}
+                                </Tabs.Tab>
+                            ))}
+                        </Tabs.List>
+                    </Tabs.Root>
+                    {run.status === 'failed' && <Banner icon={CircleAlert} tone="error" message={run.message} className="shrink-0 pt-2" />}
+                    {run.status === 'cancelled' && <Banner icon={CircleAlert} tone="neutral" message={t('console.cancelled')} className="shrink-0 pt-2" />}
+                    {shown !== undefined && (
+                        <StatementResultView
+                            key={`${index}:${offset}`}
+                            result={shown}
+                            offset={offset}
+                            pager={pager}
+                            onExport={exportBase === undefined ? undefined : (format) => void exportResult(exportBase, format)}
+                            exporting={exporting}
+                            engine={engine}
+                            valuePanelOpen={panelOpen}
+                            onValuePanelOpenChange={setPanelOpen}
+                            keys={keys}
+                            onFollowReference={
+                                act === undefined || connection === undefined
+                                    ? undefined
+                                    : (reference) =>
+                                          act({
+                                              kind: 'open-table',
+                                              ref: { connectionId: connection.id, schema: reference.schema, table: reference.table },
+                                              view: 'data',
+                                              where: reference.where
+                                          })
+                            }
+                        />
+                    )}
+                </section>
             )}
             <DestructiveDialog
                 statements={confirming?.statements ?? []}