@adecore/database 0.21.1 → 0.22.0

package/dist/workbench/DatabaseWorkbench.js

@@ -10,12 +10,18 @@ import { useDatabaseAction, useDatabaseStorage } from '../client-context.js';
 import { ConnectionManager } from '../connections/ConnectionManager.js';
 import { QueryConsole } from '../console/QueryConsole.js';
 import { DatabaseExplorer } from '../explorer/DatabaseExplorer.js';
+import { useStableCallback } from '../use-stable-callback.js';
 import { DesignerTab } from './DesignerTab.js';
 import { TableTab } from './TableTab.js';
 import { closeTab, connectionIdOf, focusTab, openConsole, openDesigner, openTable, parseState, pruneTabs, serializeState, setConsoleSql, setDesignerTable, setTableView, STORAGE_KEY } from './tabs.js';
-import { useStableCallback } from '../use-stable-callback.js';
 const DEFAULT_WIDTH = 280;
 const MIN_WIDTH = 200;
+const CLOSE_TAB = shortcut('Mod+W');
+const TAB_ICON = {
+    table: Table,
+    console: SquareTerminal,
+    designer: PencilRuler
+};
 /*
  * The whole database view in one piece: the explorer beside closable tabs for the tables, consoles and
  * designers a person opens. It answers the actions of the views below itself; an action it cannot place
@@ -41,8 +47,9 @@ export function DatabaseWorkbench({ connections, onConnectionsChange, className,
     if (pruned !== state) {
         setState(pruned);
     }
-    if ([...dirty].some((id) => !state.tabs.some((tab) => tab.id === id))) {
-        setDirty(new Set([...dirty].filter((id) => state.tabs.some((tab) => tab.id === id))));
+    const isOpen = (id) => state.tabs.some((tab) => tab.id === id);
+    if (![...dirty].every(isOpen)) {
+        setDirty(new Set([...dirty].filter(isOpen)));
     }
     const tabs = state.tabs.filter((tab) => known.has(connectionIdOf(tab)));
     const active = tabs.find((tab) => tab.id === state.activeId) ?? tabs.at(-1) ?? null;
@@ -98,7 +105,7 @@ export function DatabaseWorkbench({ connections, onConnectionsChange, className,
         if (active !== null &&
             e.currentTarget.contains(e.target) &&
             !e.nativeEvent.isComposing &&
-            matchesShortcut(shortcut('Mod+W'), e.nativeEvent, isApplePlatform())) {
+            matchesShortcut(CLOSE_TAB, e.nativeEvent, isApplePlatform())) {
             e.preventDefault();
             requestClose(active.id);
         }
@@ -163,7 +170,7 @@ export function DatabaseWorkbench({ connections, onConnectionsChange, className,
                                     } }))] }), _jsx(DatabaseExplorer, { connections: connections, value: selection, onValueChange: setSelection, className: "min-h-0 flex-1" }), _jsx(ColumnResizeHandle, { from: "left", onPointerDown: startResize })] }), _jsxs(Tabs.Root, { value: active?.id ?? null, onValueChange: (id) => setState((current) => focusTab(current, String(id))), className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { "aria-label": t('workbench.tabs'), className: "px-2", end: _jsxs(_Fragment, { children: [active?.kind === 'table' && (_jsx(Segmented, { label: t('workbench.views'), value: active.view, onValueChange: (view) => setState((current) => setTableView(current, active.id, view)), options: [
                                             { id: 'data', label: t('workbench.data'), icon: Table },
                                             { id: 'structure', label: t('workbench.structure'), icon: TableProperties }
-                                        ] })), _jsx(IconButton, { icon: SquareTerminal, size: "sm", label: t('workbench.newConsole'), tooltip: canOpenConsole ? undefined : t('workbench.noConnection'), disabled: !canOpenConsole, onClick: newConsole })] }), children: tabs.map((tab) => (_jsxs(Tabs.Tab, { value: tab.id, onClose: () => requestClose(tab.id), children: [_jsx(Icon, { icon: tab.kind === 'table' ? Table : tab.kind === 'console' ? SquareTerminal : PencilRuler, size: 14 }), titleOf(tab)] }, tab.id))) }), tabs.length === 0 ? (_jsx(EmptyState, { icon: SquareTerminal, title: t('workbench.empty.title'), className: "flex-1", action: _jsx(Button, { variant: "secondary", disabled: !canOpenConsole, onClick: newConsole, children: t('workbench.newConsole') }), children: t('workbench.empty.body') })) : (tabs.map((tab) => (_jsx(Tabs.Panel, { value: tab.id, keepMounted: true, className: "min-h-0 flex-1", children: viewOf(tab) }, tab.id))))] }), _jsx(PromptDialog, { open: closing !== null, danger: true, title: t('workbench.discard.title', { table: closingTable }), description: t('workbench.discard.description'), confirmLabel: t('workbench.discard.confirm'), onConfirm: () => {
+                                        ] })), _jsx(IconButton, { icon: SquareTerminal, size: "sm", label: t('workbench.newConsole'), tooltip: canOpenConsole ? undefined : t('workbench.noConnection'), disabled: !canOpenConsole, onClick: newConsole })] }), children: tabs.map((tab) => (_jsxs(Tabs.Tab, { value: tab.id, onClose: () => requestClose(tab.id), children: [_jsx(Icon, { icon: TAB_ICON[tab.kind], size: 14 }), titleOf(tab)] }, tab.id))) }), tabs.length === 0 ? (_jsx(EmptyState, { icon: SquareTerminal, title: t('workbench.empty.title'), className: "flex-1", action: _jsx(Button, { variant: "secondary", disabled: !canOpenConsole, onClick: newConsole, children: t('workbench.newConsole') }), children: t('workbench.empty.body') })) : (tabs.map((tab) => (_jsx(Tabs.Panel, { value: tab.id, keepMounted: true, className: "min-h-0 flex-1", children: viewOf(tab) }, tab.id))))] }), _jsx(PromptDialog, { open: closing !== null, danger: true, title: t('workbench.discard.title', { table: closingTable }), description: t('workbench.discard.description'), confirmLabel: t('workbench.discard.confirm'), onConfirm: () => {
                         if (closing !== null) {
                             closeById(closing);
                         }

package/dist/workbench/tabs.js

@@ -2,6 +2,7 @@ export const STORAGE_KEY = 'database:workbench';
 export const emptyState = { tabs: [], activeId: null, serial: 0, consoles: 0 };
 export const connectionIdOf = (tab) => (tab.kind === 'table' ? tab.ref.connectionId : tab.connectionId);
 const tableTabId = (ref) => `table:${ref.connectionId}\u0000${ref.schema}\u0000${ref.table}`;
+const isDesignerOf = (tab, connectionId, schema, table) => tab.kind === 'designer' && tab.connectionId === connectionId && tab.schema === schema && tab.table === table;
 const add = (state, tab) => ({ ...state, tabs: [...state.tabs, tab], activeId: tab.id });
 const update = (state, id, change) => {
     let changed = false;
@@ -35,9 +36,7 @@ export const openConsole = (state, connectionId, schema, sql = '') => {
 };
 /* A table is designed in one tab; a new table gets a tab each time. */
 export const openDesigner = (state, connectionId, schema, table) => {
-    const existing = table === undefined
-        ? undefined
-        : state.tabs.find((tab) => tab.kind === 'designer' && tab.connectionId === connectionId && tab.schema === schema && tab.table === table);
+    const existing = table === undefined ? undefined : state.tabs.find((tab) => isDesignerOf(tab, connectionId, schema, table));
     if (existing !== undefined) {
         return focusTab(state, existing.id);
     }
@@ -52,7 +51,7 @@ export const setDesignerTable = (state, id, table) => {
     if (subject?.kind !== 'designer' || subject.table === table) {
         return state;
     }
-    const tabs = state.tabs.filter((tab) => tab.id === id || !(tab.kind === 'designer' && tab.connectionId === subject.connectionId && tab.schema === subject.schema && tab.table === table));
+    const tabs = state.tabs.filter((tab) => tab.id === id || !isDesignerOf(tab, subject.connectionId, subject.schema, table));
     return update({ ...state, tabs }, id, (tab) => (tab.kind === 'designer' ? { ...tab, table } : tab));
 };
 /* The tab next to the closed one comes forward when the closed one was in front. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/database",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "Browse, query and edit SQLite and MySQL databases: React views for the page, a host for the backend and a native helper that talks to the server.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -61,13 +61,13 @@
     "lucide-react": "^1.47.0"
   },
   "optionalDependencies": {
-    "@adecore/database-darwin-arm64": "0.21.1",
-    "@adecore/database-linux-arm64": "0.21.1",
-    "@adecore/database-linux-x64": "0.21.1",
-    "@adecore/database-win32-x64": "0.21.1"
+    "@adecore/database-darwin-arm64": "0.22.0",
+    "@adecore/database-linux-arm64": "0.22.0",
+    "@adecore/database-linux-x64": "0.22.0",
+    "@adecore/database-win32-x64": "0.22.0"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.21.1",
+    "@adecore/ui": "^0.22.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
@@ -81,7 +81,6 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "i18next": "^26.4.2",
-    "oxc-parser": "^0.151.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15",

package/src/assign-ref.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'react';
+
+/* Hands a node to a ref of either kind, for an element that keeps a ref of its own beside the one it was given. */
+export function assignRef<T>(ref: Ref<T> | undefined, node: T | null): void {
+    if (typeof ref === 'function') {
+        ref(node);
+    } else if (ref) {
+        ref.current = node;
+    }
+}

package/src/client/client.ts

@@ -25,9 +25,9 @@ const cancelledError = (): DatabaseRequestError => new DatabaseRequestError('can
 const isUnknownSession = (error: unknown): boolean => error instanceof DatabaseRequestError && error.code === 'unknown-session';
 
 const LEADING_COMMENTS = /^(?:\s+|--[^\n]*(?:\n|$)|#[^\n]*(?:\n|$)|\/\*[\s\S]*?\*\/)+/;
-const CHANGES_SHAPE = /^(?:create|alter|drop|rename|truncate)\b/i;
+const SCHEMA_STATEMENT = /^(?:create|alter|drop|rename|truncate)\b/i;
 
-const changesShape = (sql: string): boolean => CHANGES_SHAPE.test(sql.replace(LEADING_COMMENTS, ''));
+const changesSchema = (sql: string): boolean => SCHEMA_STATEMENT.test(sql.replace(LEADING_COMMENTS, ''));
 
 /* Structural equality for the JSON a config is made of; a key set to `undefined` counts as absent. */
 const isEqual = (left: unknown, right: unknown): boolean => {
@@ -71,6 +71,17 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
     const live = new Map<string, Map<string, ReturnType<typeof createSession>>>();
     const schemaListeners = new Set<(change: SchemaChange) => void>();
 
+    const channelsOf = (connectionId: string): Map<string, ReturnType<typeof createSession>> => {
+        let channels = live.get(connectionId);
+
+        if (channels === undefined) {
+            channels = new Map();
+            live.set(connectionId, channels);
+        }
+
+        return channels;
+    };
+
     const notifySchemaChange = (change: SchemaChange): void => {
         for (const listener of [...schemaListeners]) {
             try {
@@ -127,12 +138,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
 
         /* A session that was closed and is used again is findable again, so `disconnect` and `dispose` reach it. */
         const track = (): void => {
-            let channels = live.get(connection.id);
-
-            if (channels === undefined) {
-                channels = new Map();
-                live.set(connection.id, channels);
-            }
+            const channels = channelsOf(connection.id);
 
             if (!channels.has(channel)) {
                 channels.set(channel, created);
@@ -240,7 +246,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
                 const { signal: _signal, ...rest } = executeOptions ?? {};
                 const result = await request('execute', (id) => ({ session: id, sql, ...rest }), executeOptions, false);
 
-                if (result.results.some((item) => item.kind !== 'error' && changesShape(item.sql))) {
+                if (result.results.some((item) => item.kind !== 'error' && changesSchema(item.sql))) {
                     notifySchemaChange({ connectionId: connection.id, ...(rest.schema === undefined ? {} : { schema: rest.schema }) });
                 }
 
@@ -290,8 +296,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
             };
         },
         session(connection, channel = '') {
-            let channels = live.get(connection.id);
-            const existing = channels?.get(channel);
+            const existing = live.get(connection.id)?.get(channel);
 
             if (existing !== undefined && isEqual(existing.session.connection.config, connection.config)) {
                 existing.update(connection);
@@ -301,13 +306,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
             void existing?.close();
 
             const created = createSession(connection, channel);
-
-            if (channels === undefined) {
-                channels = new Map();
-                live.set(connection.id, channels);
-            }
-
-            channels.set(channel, created);
+            channelsOf(connection.id).set(channel, created);
             return created.session;
         },
         async disconnect(connectionId) {

package/src/client/types.ts

@@ -159,3 +159,6 @@ export class DatabaseRequestError extends Error {
         this.change = change;
     }
 }
+
+/* Whether a request failed because it was cancelled, which is no failure to show. */
+export const isCancelled = (error: unknown): boolean => error instanceof DatabaseRequestError && error.code === 'cancelled';

package/src/connections/ConnectionForm.tsx

@@ -43,6 +43,8 @@ interface FieldsProps<Config> {
     touch(field: string): void;
 }
 
+type Browse = ConnectionFormProps['onBrowse'];
+
 /* A text field that is empty means "not set" for the optional fields of a config. */
 const optionalText = (text: string): string | undefined => (text === '' ? undefined : text);
 
@@ -113,13 +115,7 @@ function useProblem(problem: ConfigProblem | undefined, field: string, touched:
     return t(`connections.form.problems.${problem}`);
 }
 
-function SqliteFields({
-    config,
-    onConfigChange,
-    touched,
-    touch,
-    onBrowse
-}: FieldsProps<SqliteConnectionConfig> & { onBrowse: ConnectionFormProps['onBrowse'] }) {
+function SqliteFields({ config, onConfigChange, touched, touch, onBrowse }: FieldsProps<SqliteConnectionConfig> & { onBrowse: Browse }) {
     const { t } = useTranslation('database');
     const browsing = useAsyncAction();
     const problem = configProblems(config).path;
@@ -144,22 +140,15 @@ function SqliteFields({
                 orientation="horizontal"
                 group={onBrowse !== undefined}
             >
-                <div className="flex items-center gap-2">
-                    <Input
-                        mono
-                        value={config.path}
-                        placeholder="/path/to/database.sqlite"
-                        spellCheck={false}
-                        aria-label={onBrowse === undefined ? undefined : t('connections.form.path')}
-                        onBlur={() => touch('path')}
-                        onChange={(e) => onConfigChange({ ...config, path: e.target.value })}
-                    />
-                    {onBrowse !== undefined && (
-                        <Button variant="secondary" disabled={browsing.busy} onClick={() => void browse()}>
-                            {t('connections.form.browse')}
-                        </Button>
-                    )}
-                </div>
+                <PathInput
+                    value={config.path}
+                    placeholder="/path/to/database.sqlite"
+                    label={t('connections.form.path')}
+                    busy={browsing.busy}
+                    onBlur={() => touch('path')}
+                    onValueChange={(path) => onConfigChange({ ...config, path })}
+                    onBrowse={onBrowse === undefined ? undefined : () => void browse()}
+                />
             </Field>
             <Field label={t('connections.form.create')} hint={t('connections.form.createHint')} orientation="horizontal" group>
                 <Switch
@@ -172,6 +161,46 @@ function SqliteFields({
     );
 }
 
+/* A path typed by hand, with a Browse button beside it when the app has a file dialog. */
+function PathInput({
+    value,
+    placeholder,
+    label,
+    busy,
+    onBlur,
+    onValueChange,
+    onBrowse
+}: {
+    value: string;
+    placeholder: string;
+    label: string;
+    busy: boolean;
+    onBlur?: () => void;
+    onValueChange(path: string): void;
+    onBrowse: (() => void) | undefined;
+}) {
+    const { t } = useTranslation('database');
+
+    return (
+        <div className="flex items-center gap-2">
+            <Input
+                mono
+                value={value}
+                placeholder={placeholder}
+                spellCheck={false}
+                aria-label={onBrowse === undefined ? undefined : label}
+                onBlur={onBlur}
+                onChange={(e) => onValueChange(e.target.value)}
+            />
+            {onBrowse !== undefined && (
+                <Button variant="secondary" disabled={busy} onClick={onBrowse}>
+                    {t('connections.form.browse')}
+                </Button>
+            )}
+        </div>
+    );
+}
+
 function PortField({
     label,
     hint,
@@ -205,7 +234,7 @@ function PortField({
     );
 }
 
-function MysqlFields({ config, onConfigChange, touched, touch, onBrowse }: FieldsProps<MysqlConnectionConfig> & { onBrowse: ConnectionFormProps['onBrowse'] }) {
+function MysqlFields({ config, onConfigChange, touched, touch, onBrowse }: FieldsProps<MysqlConnectionConfig> & { onBrowse: Browse }) {
     const { t } = useTranslation('database');
     const mode = modeOf(config);
     const tunnel = config.tunnel;
@@ -316,14 +345,7 @@ function SocketField({ config, onConfigChange, touched, touch }: FieldsProps<Mys
     );
 }
 
-function SshFields({
-    config,
-    tunnel,
-    onConfigChange,
-    touched,
-    touch,
-    onBrowse
-}: FieldsProps<MysqlConnectionConfig> & { tunnel: SshTunnel; onBrowse: ConnectionFormProps['onBrowse'] }) {
+function SshFields({ config, tunnel, onConfigChange, touched, touch, onBrowse }: FieldsProps<MysqlConnectionConfig> & { tunnel: SshTunnel; onBrowse: Browse }) {
     const { t } = useTranslation('database');
     const browsing = useAsyncAction();
     const problems = configProblems(config);
@@ -369,21 +391,14 @@ function SshFields({
                 orientation="horizontal"
                 group={onBrowse !== undefined}
             >
-                <div className="flex items-center gap-2">
-                    <Input
-                        mono
-                        value={tunnel.identityFile ?? ''}
-                        placeholder="~/.ssh/id_ed25519"
-                        spellCheck={false}
-                        aria-label={onBrowse === undefined ? undefined : t('connections.form.ssh.identityFile')}
-                        onChange={(e) => update({ identityFile: optionalText(e.target.value) })}
-                    />
-                    {onBrowse !== undefined && (
-                        <Button variant="secondary" disabled={browsing.busy} onClick={() => void browse()}>
-                            {t('connections.form.browse')}
-                        </Button>
-                    )}
-                </div>
+                <PathInput
+                    value={tunnel.identityFile ?? ''}
+                    placeholder="~/.ssh/id_ed25519"
+                    label={t('connections.form.ssh.identityFile')}
+                    busy={browsing.busy}
+                    onValueChange={(identityFile) => update({ identityFile: optionalText(identityFile) })}
+                    onBrowse={onBrowse === undefined ? undefined : () => void browse()}
+                />
             </Field>
             <ServerFields config={config} onConfigChange={onConfigChange} touched={touched} touch={touch} />
         </>

package/src/connections/ConnectionManager.tsx

@@ -60,16 +60,17 @@ export function ConnectionManager({ value, onValueChange, selected, onSelectedCh
         onSelectedChange?.(id);
     };
 
-    const add = (engine: Engine): void => {
-        const connection: Connection = { id: crypto.randomUUID(), name: t('connections.newName'), config: defaultConfig(engine) };
+    const append = (connection: Connection): void => {
         onValueChange([...value, connection]);
         select(connection.id);
     };
 
+    const add = (engine: Engine): void => {
+        append({ id: crypto.randomUUID(), name: t('connections.newName'), config: defaultConfig(engine) });
+    };
+
     const addFromContainer = (container: DockerContainer): void => {
-        const connection = connectionFromContainer(crypto.randomUUID(), container);
-        onValueChange([...value, connection]);
-        select(connection.id);
+        append(connectionFromContainer(crypto.randomUUID(), container));
     };
 
     const change = (next: Connection): void => {

package/src/connections/EngineIcon.tsx

@@ -1,5 +1,4 @@
 import type { Ref } from 'react';
-
 import { Icon } from '@adecore/ui';
 import type { Engine } from '../protocol/index.ts';
 import { ENGINE_ICONS } from './engine-icons.ts';
@@ -12,7 +11,6 @@ export interface EngineIconProps {
     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/console/QueryConsole.tsx

@@ -4,7 +4,7 @@ import { Check, CircleAlert, History, Play, Square, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 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 { isCancelled, type Connection } from '../client/types.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';
@@ -84,6 +84,49 @@ function AppEditor({ render, ...editor }: QueryConsoleEditorProps & { render(edi
     return render(editor);
 }
 
+/* Run and Run all, or Cancel while a run is under way. */
+function RunButtons({
+    running,
+    disabled,
+    onCancel,
+    onRun
+}: {
+    running: boolean;
+    disabled: boolean;
+    onCancel(): void;
+    onRun(scope: QueryConsoleRunScope): void;
+}) {
+    const { t } = useTranslation('database');
+
+    if (running) {
+        return (
+            <>
+                <Button size="sm" onClick={onCancel}>
+                    <Icon icon={Square} size={12} />
+                    {t('console.cancel')}
+                </Button>
+                <Spinner size={14} label={t('console.running')} />
+            </>
+        );
+    }
+
+    return (
+        <>
+            <Tooltip label={t('console.run')} kbd={RUN_SHORTCUT}>
+                <Button variant="primary" size="sm" disabled={disabled} onClick={() => onRun('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={disabled} onClick={() => onRun('all')}>
+                    {t('console.runAll')}
+                </Button>
+            </Tooltip>
+        </>
+    );
+}
+
 /* Type SQL, run it, and read what each statement did. Several statements give a tab each. */
 export function QueryConsole({
     connection,
@@ -139,7 +182,7 @@ export function QueryConsole({
     const [exporting, setExporting] = useState(false);
     // 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. */
+    // 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, {
@@ -250,7 +293,7 @@ export function QueryConsole({
             setRun({ status: 'done', results: executed.results });
             record(outcomeOf(executed.results));
         } catch (error) {
-            if (controller.signal.aborted || (error instanceof DatabaseRequestError && error.code === 'cancelled')) {
+            if (controller.signal.aborted || isCancelled(error)) {
                 setRun({ status: 'cancelled' });
             } else {
                 setRun({ status: 'failed', message: messageOf(error) });
@@ -379,34 +422,12 @@ export function QueryConsole({
                     <div className="flex shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2">
                         {session !== null && (
                             <>
-                                {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>
-                                    </>
-                                )}
+                                <RunButtons
+                                    running={run.status === 'running'}
+                                    disabled={blank || busy}
+                                    onCancel={() => running.current?.abort()}
+                                    onRun={(scope) => requestRun(targetOf(scope))}
+                                />
                                 <TransactionControls
                                     mode={mode}
                                     onModeChange={changeMode}

package/src/console/editing.ts

@@ -18,7 +18,6 @@ const lineEndOf = (value: string, at: number): number => {
     return newline === -1 ? value.length : newline;
 };
 
-/* The whitespace a line begins with. */
 const indentOf = (line: string): string => /^[ \t]*/.exec(line)![0];
 
 /* The lines a selection touches. A selection that ends at the start of a line leaves that line out. */
@@ -58,13 +57,12 @@ export const outdentEdit = (value: string, start: number, end: number): TextEdit
     if (total === 0) {
         return null;
     }
-    const firstLineStart = from;
     return {
         from,
         to,
         insert: lines.map((line, index) => line.slice(removed[index]!)).join('\n'),
-        selectionStart: Math.max(firstLineStart, start - removed[0]!),
-        selectionEnd: Math.max(firstLineStart, end - total)
+        selectionStart: Math.max(from, start - removed[0]!),
+        selectionEnd: Math.max(from, end - total)
     };
 };
 

package/src/console/useConsoleHistory.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import type { DatabaseStorage } from '../actions.ts';
 import { useDatabaseStorage } from '../client-context.ts';
 import { addEntry, historyKey, parseHistory, serializeHistory, type HistoryEntry } from './history.ts';
 
@@ -15,14 +16,16 @@ export interface ConsoleHistory {
     clear(): void;
 }
 
+const load = (storage: DatabaseStorage | undefined, key: string): Loaded => ({ key, entries: parseHistory(storage?.get(key) ?? null), changed: false });
+
 /* The runs of one connection, kept in the app's storage when it has one and for the life of the console when it has not. */
 export function useConsoleHistory(connectionId: string): ConsoleHistory {
     const storage = useDatabaseStorage();
     const key = historyKey(connectionId);
-    const [state, setState] = useState<Loaded>(() => ({ key, entries: parseHistory(storage?.get(key) ?? null), changed: false }));
+    const [state, setState] = useState<Loaded>(() => load(storage, key));
 
     if (state.key !== key) {
-        setState({ key, entries: parseHistory(storage?.get(key) ?? null), changed: false });
+        setState(load(storage, key));
     }
 
     useEffect(() => {

package/src/ddl/alter-mysql.ts

@@ -1,19 +1,11 @@
 import { columnSpecSql } from './column.ts';
-import { foreignKeySql, mysqlOptionsSql } from './create.ts';
+import { foreignKeySql, inlineIndexSql, mysqlOptionsSql } from './create.ts';
 import { columnList, quote, tableName, type Dialect } from './dialect.ts';
 import type { TableDiff } from './diff.ts';
-import type { ColumnDraft, IndexDraft, TableDraft } from './draft.ts';
+import type { ColumnDraft, TableDraft } from './draft.ts';
 
 const positionSql = (dialect: Dialect, after: string | null): string => (after === null ? 'FIRST' : `AFTER ${quote(dialect, after)}`);
 
-const indexSql = (dialect: Dialect, index: IndexDraft): string =>
-    [
-        'ADD',
-        index.unique ? 'UNIQUE INDEX' : 'INDEX',
-        ...(index.name === '' ? [] : [quote(dialect, index.name)]),
-        `(${columnList(dialect, index.columns)})`
-    ].join(' ');
-
 const withPosition = (clause: string, position: string | null): string => (position === null ? clause : `${clause} ${position}`);
 
 /*
@@ -71,7 +63,7 @@ export const mysqlAlterSql = (dialect: Dialect, schema: string, original: TableD
         late.push(`ADD PRIMARY KEY (${columnList(dialect, draft.primaryKey)})`);
     }
     for (const index of diff.addedIndexes) {
-        late.push(indexSql(dialect, index));
+        late.push(`ADD ${inlineIndexSql(dialect, index)}`);
     }
     for (const foreignKey of diff.addedForeignKeys) {
         late.push(`ADD ${foreignKeySql(dialect, schema, foreignKey)}`);

package/src/ddl/alter-sqlite.ts

@@ -8,7 +8,7 @@ import { dropIndexSql } from './statements.ts';
 const RENAME_COLUMN = [3, 25];
 const DROP_COLUMN = [3, 35];
 
-/* The clauses `ALTER TABLE .. ADD COLUMN` refuses: a key, a computed value, or a NOT NULL column with nothing to fill the rows with. */
+/* Whether `ALTER TABLE .. ADD COLUMN` takes the column; it refuses a key, a stored computed value, or a NOT NULL column with nothing to fill the rows with. */
 const addable = (column: ColumnDraft): boolean => {
     if (column.autoIncrement || (column.generated && column.generatedClause !== null && /\bSTORED\b/i.test(column.generatedClause))) {
         return false;