@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/connections/ConnectionManager.tsx

@@ -0,0 +1,224 @@
+import { useState, type Ref } from 'react';
+import { CircleAlert, CircleCheck, Container, Database, Plus, Trash2, Unplug } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Banner, Button, EmptyState, Icon, Menu, messageOf, PromptDialog, Spinner } from '@adecore/ui';
+import { DetailHeader, MasterDetail, MasterItem } from '@adecore/ui/settings';
+import { useDatabaseClient } from '../client-context.ts';
+import type { Connection } from '../client/types.ts';
+import type { ConnectionConfig, DockerContainer, Engine, ServerInfo } from '../protocol/index.ts';
+import { defaultConfig, isValidConfig, targetOf } from './connection-config.ts';
+import { ConnectionForm } from './ConnectionForm.tsx';
+import { composeNameOf, connectionFromContainer, isMysqlContainer } from './docker.ts';
+import { useDockerContainers } from './use-docker-containers.ts';
+import { ENGINE_ICONS } from './engine-icons.ts';
+import { EngineIcon } from './EngineIcon.tsx';
+
+const ENGINES: readonly Engine[] = ['sqlite', 'mysql'];
+
+export interface ConnectionManagerProps {
+    value: readonly Connection[];
+    /* Saving is the app's: every add, edit and delete goes out whole through here. */
+    onValueChange(next: readonly Connection[]): void;
+    /* The id of the connection in the detail. Without it the manager keeps the selection itself; `null` is none. */
+    selected?: string | null;
+    onSelectedChange?(id: string | null): void;
+    /* Opens the app's file dialog for a database file or an SSH identity file; without it the path is typed. See `ConnectionForm`. */
+    onBrowse?(purpose: 'database' | 'identity'): Promise<string | null>;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+type TestOutcome = { readonly config: ConnectionConfig; readonly info: ServerInfo } | { readonly config: ConnectionConfig; readonly error: string };
+
+/* The saved connections beside the form of the one picked, for a settings pane or a view of its own. */
+export function ConnectionManager({ value, onValueChange, selected, onSelectedChange, onBrowse, className, ref }: ConnectionManagerProps) {
+    const { t } = useTranslation('database');
+    const [own, setOwn] = useState<string | null>(null);
+    const [deleting, setDeleting] = useState(false);
+    const client = useDatabaseClient();
+    const pickedId = selected === undefined ? own : selected;
+    const current = value.find((connection) => connection.id === pickedId) ?? value[0] ?? null;
+
+    const select = (id: string | null): void => {
+        if (selected === undefined) {
+            setOwn(id);
+        }
+        onSelectedChange?.(id);
+    };
+
+    const add = (engine: Engine): void => {
+        const connection: Connection = { id: crypto.randomUUID(), name: t('connections.newName'), config: defaultConfig(engine) };
+        onValueChange([...value, connection]);
+        select(connection.id);
+    };
+
+    const addFromContainer = (container: DockerContainer): void => {
+        const connection = connectionFromContainer(crypto.randomUUID(), container);
+        onValueChange([...value, connection]);
+        select(connection.id);
+    };
+
+    const change = (next: Connection): void => {
+        onValueChange(value.map((connection) => (connection.id === next.id ? next : connection)));
+    };
+
+    const remove = async (connection: Connection): Promise<void> => {
+        await client.disconnect(connection.id).catch(() => undefined);
+        const index = value.findIndex((entry) => entry.id === connection.id);
+        const rest = value.filter((entry) => entry.id !== connection.id);
+        onValueChange(rest);
+        select(rest[Math.min(index, rest.length - 1)]?.id ?? null);
+    };
+
+    const list = (
+        <>
+            <Menu.Root>
+                <Menu.Trigger render={<Button variant="secondary" size="sm" className="mb-2" />}>
+                    <Icon icon={Plus} size={14} />
+                    {t('connections.new')}
+                </Menu.Trigger>
+                <Menu.Popup>
+                    {ENGINES.map((engine) => (
+                        <Menu.Item key={engine} onClick={() => add(engine)}>
+                            <Icon icon={ENGINE_ICONS[engine]} size={14} />
+                            {t(`engine.${engine}`)}
+                        </Menu.Item>
+                    ))}
+                    <Menu.Separator />
+                    <Menu.SubmenuRoot>
+                        <Menu.SubmenuTrigger>
+                            <Icon icon={Container} size={14} />
+                            {t('connections.fromDocker.label')}
+                        </Menu.SubmenuTrigger>
+                        <Menu.Popup>
+                            <DockerMenuItems onPick={addFromContainer} />
+                        </Menu.Popup>
+                    </Menu.SubmenuRoot>
+                </Menu.Popup>
+            </Menu.Root>
+            {value.map((connection) => (
+                <MasterItem key={connection.id} selected={connection.id === current?.id} onSelect={() => select(connection.id)}>
+                    <EngineIcon engine={connection.config.engine} size={16} className="shrink-0 text-text-muted" />
+                    <span className="flex min-w-0 flex-col">
+                        <span className="truncate">{connection.name || t('connections.untitled')}</span>
+                        <span className="truncate text-xs text-text-faint">{targetOf(connection)}</span>
+                    </span>
+                </MasterItem>
+            ))}
+        </>
+    );
+
+    const detail =
+        current === null ? (
+            <EmptyState icon={Database}>{t('connections.empty')}</EmptyState>
+        ) : (
+            <>
+                <DetailHeader
+                    mark={<EngineIcon engine={current.config.engine} size={20} className="mt-0.5 shrink-0 text-text-muted" />}
+                    title={current.name || t('connections.untitled')}
+                    subtitle={targetOf(current)}
+                    actions={
+                        <Button variant="danger-outline" onClick={() => setDeleting(true)}>
+                            <Icon icon={Trash2} size={14} />
+                            {t('connections.delete.action')}
+                        </Button>
+                    }
+                />
+                <ConnectionForm value={current} onValueChange={change} onBrowse={onBrowse} />
+                <ConnectionTest key={current.id} connection={current} />
+                <PromptDialog
+                    open={deleting}
+                    danger
+                    onOpenChange={setDeleting}
+                    title={t('connections.delete.title')}
+                    description={t('connections.delete.description', { name: current.name || t('connections.untitled') })}
+                    confirmLabel={t('connections.delete.confirm')}
+                    onConfirm={async () => {
+                        await remove(current);
+                        setDeleting(false);
+                    }}
+                />
+            </>
+        );
+
+    return <MasterDetail ref={ref} className={className} list={list} listWidth={280} listLabel={t('connections.list')} detail={detail} />;
+}
+
+/* The containers Docker is running as menu items. The submenu mounts this when it opens, so Docker is asked only then. */
+function DockerMenuItems({ onPick }: { onPick(container: DockerContainer): void }) {
+    const { t } = useTranslation('database');
+    const { state, reload } = useDockerContainers();
+    if (state.status === 'loading') {
+        return (
+            <Menu.Label className="flex items-center gap-2">
+                <Spinner size={12} />
+                {t('connections.fromDocker.loading')}
+            </Menu.Label>
+        );
+    }
+    if (state.status !== 'ready') {
+        return (
+            <>
+                <Menu.Label className="max-w-64 break-words">
+                    {state.status === 'unsupported' ? `${t('connections.fromDocker.unsupported')} ${state.message}` : state.message}
+                </Menu.Label>
+                <Menu.Item closeOnClick={false} onClick={reload}>
+                    {t('connections.fromDocker.retry')}
+                </Menu.Item>
+            </>
+        );
+    }
+    const containers = state.containers.filter(isMysqlContainer);
+    if (containers.length === 0) {
+        return <Menu.Label>{t('connections.fromDocker.empty')}</Menu.Label>;
+    }
+    return containers.map((container) => (
+        <Menu.Item key={container.id} onClick={() => onPick(container)}>
+            <span className="flex min-w-0 flex-col">
+                <span className="truncate">{composeNameOf(container) ?? container.name}</span>
+                <span className="truncate text-xs text-text-faint">{container.image}</span>
+            </span>
+        </Menu.Item>
+    ));
+}
+
+/* The button that asks the server who it is, and what it answered; an answer to an older config is not shown. */
+function ConnectionTest({ connection }: { connection: Connection }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const [busy, setBusy] = useState(false);
+    const [outcome, setOutcome] = useState<TestOutcome | null>(null);
+    const shown = outcome !== null && outcome.config === connection.config ? outcome : null;
+
+    const test = async (): Promise<void> => {
+        const config = connection.config;
+        setBusy(true);
+        try {
+            setOutcome({ config, info: await client.test(config) });
+        } catch (e) {
+            setOutcome({ config, error: messageOf(e, t('connections.test.failed')) });
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-3">
+            <div>
+                <Button variant="secondary" disabled={busy || !isValidConfig(connection.config)} onClick={() => void test()}>
+                    {busy ? <Spinner size={14} /> : <Icon icon={Unplug} size={14} />}
+                    {t('connections.test.action')}
+                </Button>
+            </div>
+            {shown !== null && 'info' in shown && (
+                <Banner
+                    icon={CircleCheck}
+                    tone="neutral"
+                    className="w-full"
+                    message={t('connections.test.success', { server: `${t(`engine.flavor.${shown.info.flavor}`)} ${shown.info.version}` })}
+                />
+            )}
+            {shown !== null && 'error' in shown && <Banner icon={CircleAlert} tone="error" className="w-full" message={shown.error} />}
+        </div>
+    );
+}

package/src/connections/EngineIcon.tsx

@@ -0,0 +1,18 @@
+import type { Ref } from 'react';
+
+import { Icon } from '@adecore/ui';
+import type { Engine } from '../protocol/index.ts';
+import { ENGINE_ICONS } from './engine-icons.ts';
+
+export interface EngineIconProps {
+    engine: Engine;
+    /* 12, 14, 16 or 20. */
+    size?: number;
+    className?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+
+/* A file on disk for SQLite, a server for MySQL and MariaDB. */
+export function EngineIcon({ engine, size = 16, className, ref }: EngineIconProps) {
+    return <Icon ref={ref} icon={ENGINE_ICONS[engine]} size={size} className={className} />;
+}

package/src/connections/connection-config.ts

@@ -0,0 +1,143 @@
+import type { ConnectionConfig, Engine, MysqlConnectionConfig, SqliteConnectionConfig } from '../protocol/index.ts';
+import type { Connection } from '../client/types.ts';
+
+export const DEFAULT_MYSQL_PORT = 3306;
+export const DEFAULT_HOST = '127.0.0.1';
+
+/* How a MySQL connection reaches its server. */
+export type ConnectMode = 'tcp' | 'socket' | 'ssh' | 'docker';
+
+export const CONNECT_MODES: readonly ConnectMode[] = ['tcp', 'socket', 'ssh', 'docker'];
+
+/* What a field can be wrong about; the form maps each code onto a sentence. */
+export type ConfigProblem =
+    | 'path-required'
+    | 'path-relative'
+    | 'host-required'
+    | 'port-range'
+    | 'socket-required'
+    | 'ssh-host-required'
+    | 'ssh-port-range'
+    | 'container-required'
+    | 'container-port-range';
+
+export type ConfigProblems = Partial<Record<'path' | 'host' | 'port' | 'socket' | 'sshHost' | 'sshPort' | 'container' | 'containerPort', ConfigProblem>>;
+
+/* A config of this engine with every field at what a new connection starts with. */
+export const defaultConfig = (engine: Engine): ConnectionConfig =>
+    engine === 'sqlite'
+        ? { engine: 'sqlite', path: '', create: false, readOnly: false }
+        : { engine: 'mysql', host: DEFAULT_HOST, port: DEFAULT_MYSQL_PORT, user: '', password: '', tls: 'prefer', readOnly: false };
+
+/* A POSIX path, a Windows drive path or a UNC path. A relative one would resolve against the helper's working directory. */
+export const isAbsolutePath = (path: string): boolean => /^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(path);
+
+const sqliteProblems = (config: SqliteConnectionConfig): ConfigProblems => {
+    const path = config.path.trim();
+    if (path === '') {
+        return { path: 'path-required' };
+    }
+    return isAbsolutePath(path) ? {} : { path: 'path-relative' };
+};
+
+const isPort = (port: number): boolean => Number.isInteger(port) && port >= 1 && port <= 65535;
+
+/* The mode is in the config: a socket means the socket mode, even while its path is still empty, and a tunnel names its own. */
+export const modeOf = (config: MysqlConnectionConfig): ConnectMode => {
+    if (config.tunnel !== undefined) {
+        return config.tunnel.kind;
+    }
+    return config.socket === undefined ? 'tcp' : 'socket';
+};
+
+const mysqlProblems = (config: MysqlConnectionConfig): ConfigProblems => {
+    const problems: { -readonly [K in keyof ConfigProblems]: ConfigProblems[K] } = {};
+    const tunnel = config.tunnel;
+    const mode = modeOf(config);
+    if (mode === 'socket' && (config.socket ?? '').trim() === '') {
+        problems.socket = 'socket-required';
+    }
+    if ((mode === 'tcp' || mode === 'ssh') && config.host.trim() === '') {
+        problems.host = 'host-required';
+    }
+    if ((mode === 'tcp' || mode === 'ssh') && config.port !== undefined && !isPort(config.port)) {
+        problems.port = 'port-range';
+    }
+    if (tunnel?.kind === 'ssh') {
+        if (tunnel.host.trim() === '') {
+            problems.sshHost = 'ssh-host-required';
+        }
+        if (tunnel.port !== undefined && !isPort(tunnel.port)) {
+            problems.sshPort = 'ssh-port-range';
+        }
+    }
+    if (tunnel?.kind === 'docker') {
+        if (tunnel.container.trim() === '') {
+            problems.container = 'container-required';
+        }
+        if (tunnel.port !== undefined && !isPort(tunnel.port)) {
+            problems.containerPort = 'container-port-range';
+        }
+    }
+    return problems;
+};
+
+export const configProblems = (config: ConnectionConfig): ConfigProblems => (config.engine === 'sqlite' ? sqliteProblems(config) : mysqlProblems(config));
+
+export const isValidConfig = (config: ConnectionConfig): boolean => Object.keys(configProblems(config)).length === 0;
+
+const lastSegment = (path: string): string => {
+    const segments = path.split(/[\\/]/).filter((segment) => segment !== '');
+    return segments[segments.length - 1] ?? path;
+};
+
+const targetWhere = (config: MysqlConnectionConfig): string => {
+    const tunnel = config.tunnel;
+    if (tunnel?.kind === 'docker') {
+        return tunnel.container === '' ? 'Docker' : `${tunnel.container} (Docker)`;
+    }
+    if (tunnel?.kind === 'ssh') {
+        return tunnel.host === '' ? config.host : `${config.host} via ${tunnel.host}`;
+    }
+    if (config.socket !== undefined) {
+        return lastSegment(config.socket);
+    }
+    return `${config.host}:${config.port ?? DEFAULT_MYSQL_PORT}`;
+};
+
+/* The short line under a connection's name: the file name of a database file, or `user@host:port`, `user@host via <ssh host>` and `user@container (Docker)`. */
+export const targetOf = (connection: Connection): string => {
+    const config = connection.config;
+    if (config.engine === 'sqlite') {
+        return lastSegment(config.path);
+    }
+    const where = targetWhere(config);
+    return config.user === '' || where === '' ? where : `${config.user}@${where}`;
+};
+
+/* Moves to another way of reaching the server. What the person typed for the user, the password and the database stays. */
+export const withMode = (config: MysqlConnectionConfig, mode: ConnectMode): MysqlConnectionConfig => {
+    if (modeOf(config) === mode) {
+        return config;
+    }
+    const base: MysqlConnectionConfig = {
+        ...config,
+        host: config.host.trim() === '' ? DEFAULT_HOST : config.host,
+        socket: undefined,
+        tunnel: undefined
+    };
+    switch (mode) {
+        case 'tcp':
+            return base;
+        case 'socket':
+            return { ...base, socket: '' };
+        case 'ssh':
+            return { ...base, tunnel: { kind: 'ssh', host: '' } };
+        case 'docker':
+            return { ...base, tunnel: { kind: 'docker', container: '', port: DEFAULT_MYSQL_PORT } };
+    }
+};
+
+/* Moves to another engine, which keeps who the connection is and drops how it connects. */
+export const withEngine = (connection: Connection, engine: Engine): Connection =>
+    connection.config.engine === engine ? connection : { id: connection.id, name: connection.name, config: defaultConfig(engine) };

package/src/connections/docker.ts

@@ -0,0 +1,50 @@
+import type { Connection } from '../client/types.ts';
+import type { DockerContainer, MysqlConnectionConfig } from '../protocol/index.ts';
+import { DEFAULT_MYSQL_PORT, defaultConfig, withMode } from './connection-config.ts';
+
+/* A container a MySQL connection can point at: what `discover` found, minus a file engine, which no container serves. */
+export const isMysqlContainer = (container: DockerContainer): boolean => container.engine !== 'sqlite';
+
+/* The Compose `project/service` of a container, when it has both. */
+export const composeNameOf = (container: DockerContainer): string | null =>
+    container.project !== null && container.service !== null ? `${container.project}/${container.service}` : null;
+
+/* What names a container to a person: its Compose name, else its own. */
+export const containerTitle = (container: DockerContainer): string => composeNameOf(container) ?? container.name;
+
+/* The port to connect to inside the container: MySQL's own when the container lists it or lists nothing, else the first it lists. */
+export const containerPortOf = (container: DockerContainer): number => {
+    const ports = container.ports.map((entry) => entry.container);
+    return ports.length === 0 || ports.includes(DEFAULT_MYSQL_PORT) ? DEFAULT_MYSQL_PORT : ports[0]!;
+};
+
+/* The host port a container publishes a port on, or `null` when it does not. */
+export const publishedPortOf = (container: DockerContainer, port: number): number | null =>
+    container.ports.find((entry) => entry.container === port)?.host ?? null;
+
+const isEmpty = (text: string | undefined): boolean => text === undefined || text === '';
+
+/* Points a config at a container. The user, the password and the database come from the container's environment only where the config has none. */
+export const withContainer = (config: MysqlConnectionConfig, container: DockerContainer): MysqlConnectionConfig => {
+    const docker = withMode(config, 'docker');
+    const { user, password, database } = container.suggested;
+    return {
+        ...docker,
+        user: isEmpty(docker.user) && user !== undefined ? user : docker.user,
+        password: isEmpty(docker.password) && password !== undefined ? password : docker.password,
+        database: isEmpty(docker.database) && database !== undefined ? database : docker.database,
+        tunnel: {
+            kind: 'docker',
+            container: container.name,
+            port: containerPortOf(container),
+            ...(docker.tunnel?.kind === 'docker' && docker.tunnel.context !== undefined ? { context: docker.tunnel.context } : {})
+        }
+    };
+};
+
+/* A new MySQL connection to a container, named after its Compose `project/service` or its own name. */
+export const connectionFromContainer = (id: string, container: DockerContainer): Connection => ({
+    id,
+    name: containerTitle(container),
+    config: withContainer(defaultConfig('mysql') as MysqlConnectionConfig, container)
+});

package/src/connections/engine-icons.ts

@@ -0,0 +1,5 @@
+import { HardDrive, Server, type LucideIcon } from 'lucide-react';
+import type { Engine } from '../protocol/index.ts';
+
+/* A file on disk for SQLite, a server for MySQL and MariaDB. */
+export const ENGINE_ICONS: Record<Engine, LucideIcon> = { sqlite: HardDrive, mysql: Server };

package/src/connections/use-docker-containers.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { messageOf } from '@adecore/ui';
+import { useDatabaseClient } from '../client-context.ts';
+import { DatabaseRequestError } from '../client/types.ts';
+import type { DockerContainer } from '../protocol/index.ts';
+
+/* `unsupported` is a machine without Docker, or one the app cannot ask. */
+export type DockerState =
+    | { readonly status: 'loading' }
+    | { readonly status: 'ready'; readonly containers: readonly DockerContainer[] }
+    | { readonly status: 'unsupported'; readonly message: string }
+    | { readonly status: 'error'; readonly message: string };
+
+/* The running containers that look like a database, asked for when the component mounts and again on `reload`. */
+export function useDockerContainers(): { readonly state: DockerState; reload(): void } {
+    const client = useDatabaseClient();
+    const [state, setState] = useState<DockerState>({ status: 'loading' });
+    const [attempt, setAttempt] = useState(0);
+
+    useEffect(() => {
+        const controller = new AbortController();
+        client.discover('docker', { signal: controller.signal }).then(
+            (containers) => setState({ status: 'ready', containers }),
+            (e: unknown) => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                const message = messageOf(e);
+                setState({ status: e instanceof DatabaseRequestError && e.code === 'unsupported' ? 'unsupported' : 'error', message });
+            }
+        );
+        return () => controller.abort();
+    }, [client, attempt]);
+
+    const reload = (): void => {
+        setState({ status: 'loading' });
+        setAttempt((current) => current + 1);
+    };
+
+    return { state, reload };
+}

package/src/console/DestructiveDialog.tsx

@@ -0,0 +1,40 @@
+import type { Ref } from 'react';
+import { TriangleAlert } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { PromptDialog } from '@adecore/ui';
+import type { DestructiveStatement } from './destructive.ts';
+
+export interface DestructiveDialogProps {
+    /* The statements to warn about; the dialog is open while there are any. */
+    statements: readonly DestructiveStatement[];
+    onConfirm(): void;
+    onCancel(): void;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* Lists the statements that cannot be taken back and asks before they run. */
+export function DestructiveDialog({ statements, onConfirm, onCancel, ref }: DestructiveDialogProps) {
+    const { t } = useTranslation('database');
+    return (
+        <PromptDialog
+            ref={ref}
+            open={statements.length > 0}
+            danger
+            title={t('console.destructive.title')}
+            titleIcon={TriangleAlert}
+            description={t('console.destructive.description', { count: statements.length })}
+            confirmLabel={t('console.destructive.confirm')}
+            onConfirm={onConfirm}
+            onOpenChange={onCancel}
+        >
+            <ul className="mt-3 flex max-h-56 flex-col gap-2 overflow-auto">
+                {statements.map((statement, index) => (
+                    <li key={`${index}:${statement.sql}`} className="flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-sunken px-2.5 py-1.5">
+                        <span className="text-xs text-status-error">{t(`console.destructive.${statement.kind}`)}</span>
+                        <span className="truncate font-mono text-xs text-text">{statement.sql.replace(/\s+/g, ' ')}</span>
+                    </li>
+                ))}
+            </ul>
+        </PromptDialog>
+    );
+}

package/src/console/HistoryPanel.tsx

@@ -0,0 +1,67 @@
+import { useState, type Ref } from 'react';
+import clsx from 'clsx';
+import { Check, CircleAlert, Search, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon, IconButton, Input, isApplePlatform, isModHeld } from '@adecore/ui';
+import { formatMoment, formatNumber } from '@adecore/ui/format';
+import { searchHistory, type HistoryEntry } from './history.ts';
+
+export interface HistoryPanelProps {
+    entries: readonly HistoryEntry[];
+    /* Clicking puts the SQL in the editor, and Mod+click or a double click runs it as well. */
+    onPick(entry: HistoryEntry, run: boolean): void;
+    onClear(): void;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+
+/* The runs of this connection, newest first, with a search over their SQL. */
+export function HistoryPanel({ entries, onPick, onClear, className, ref }: HistoryPanelProps) {
+    const { t } = useTranslation('database');
+    const [query, setQuery] = useState('');
+    const shown = searchHistory(entries, query);
+
+    return (
+        <aside ref={ref} aria-label={t('console.history.title')} className={clsx('flex w-72 shrink-0 flex-col border-l border-border', className)}>
+            <div className="flex shrink-0 items-center gap-2 p-2">
+                <Input
+                    size="sm"
+                    type="search"
+                    icon={Search}
+                    className="min-w-0 flex-1"
+                    aria-label={t('console.history.search')}
+                    placeholder={t('console.history.search')}
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                />
+                <IconButton icon={Trash2} size="sm" label={t('console.history.clear')} disabled={entries.length === 0} onClick={onClear} />
+            </div>
+            <div className="relative min-h-24 flex-1 border-t border-border">
+                {shown.length === 0 ? (
+                    <p className="p-3 text-xs text-text-muted">{entries.length === 0 ? t('console.history.empty') : t('console.history.noMatches')}</p>
+                ) : (
+                    <ul className="absolute inset-0 overflow-auto">
+                        {shown.map((entry) => (
+                            <li key={`${entry.at}:${entry.sql}`} className="border-b border-border-soft">
+                                <button
+                                    type="button"
+                                    className="flex w-full min-w-0 flex-col gap-0.5 px-3 py-2 text-left hover:bg-surface-hover"
+                                    onClick={(event) => onPick(entry, isModHeld(event, isApplePlatform()))}
+                                    onDoubleClick={() => onPick(entry, true)}
+                                >
+                                    <span className="truncate font-mono text-xs text-text">{entry.sql.replace(/\s+/g, ' ')}</span>
+                                    <span className="flex items-center gap-1.5 text-xs text-text-muted tabular-nums">
+                                        <Icon icon={entry.ok ? Check : CircleAlert} size={12} className={entry.ok ? 'text-positive' : 'text-status-error'} />
+                                        {formatMoment(entry.at)}
+                                        {entry.rows !== null && t('console.history.rows', { count: entry.rows, formatted: formatNumber(entry.rows) })}
+                                    </span>
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+            <p className="shrink-0 border-t border-border px-3 py-2 text-xs text-text-faint">{t('console.history.hint')}</p>
+        </aside>
+    );
+}