@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/workbench/DatabaseWorkbench.tsx

@@ -0,0 +1,348 @@
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react';
+import clsx from 'clsx';
+import { PencilRuler, Settings2, SquareTerminal, Table, TableProperties } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+    Button,
+    ColumnResizeHandle,
+    Dialog,
+    EmptyState,
+    Icon,
+    IconButton,
+    PromptDialog,
+    Segmented,
+    Tabs,
+    isApplePlatform,
+    matchesShortcut,
+    shortcut,
+    useColumnResize
+} from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { DatabaseProvider } from '../DatabaseProvider.tsx';
+import type { DatabaseAction, ExplorerSelection } from '../actions.ts';
+import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseStorage, useNumberNotation } from '../client-context.ts';
+import type { Connection } from '../client/types.ts';
+import { ConnectionManager } from '../connections/ConnectionManager.tsx';
+import { QueryConsole } from '../console/QueryConsole.tsx';
+import { DatabaseExplorer } from '../explorer/DatabaseExplorer.tsx';
+import { DesignerTab } from './DesignerTab.tsx';
+import { TableTab } from './TableTab.tsx';
+import {
+    closeTab,
+    connectionIdOf,
+    focusTab,
+    openConsole,
+    openDesigner,
+    openTable,
+    parseState,
+    pruneTabs,
+    serializeState,
+    setConsoleSql,
+    setDesignerTable,
+    setTableView,
+    STORAGE_KEY,
+    type WorkbenchTab
+} from './tabs.ts';
+import { useStableCallback } from '../use-stable-callback.ts';
+
+export interface DatabaseWorkbenchProps {
+    connections: readonly Connection[];
+    /* Saving is the app's. Without it the connections are fixed: there is no way to manage them from here. */
+    onConnectionsChange?(next: readonly Connection[]): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+const DEFAULT_WIDTH = 280;
+const MIN_WIDTH = 200;
+
+/*
+ * 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
+ * goes on to the `DatabaseProvider` above it. The open tabs are kept through the provider's `storage`.
+ */
+export function DatabaseWorkbench({ connections, onConnectionsChange, className, ref }: DatabaseWorkbenchProps) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const outer = useDatabaseAction();
+    const storage = useDatabaseStorage();
+    const files = useDatabaseFiles();
+    const numberNotation = useNumberNotation();
+    const column = useRef<HTMLElement>(null);
+    const [state, setState] = useState(() => parseState(storage?.get(STORAGE_KEY) ?? null));
+    const [selection, setSelection] = useState<ExplorerSelection | null>(null);
+    const [width, setWidth] = useState(DEFAULT_WIDTH);
+    const [managing, setManaging] = useState(false);
+    const [managed, setManaged] = useState<string | null>(null);
+    /* Ids of the table tabs that hold changes nobody submitted, and the tab a person asked to close while it does. */
+    const [dirty, setDirty] = useState<ReadonlySet<string>>(() => new Set());
+    const [closing, setClosing] = useState<string | null>(null);
+    const { startResize } = useColumnResize(column, { size: width, min: MIN_WIDTH, from: 'left', max: () => window.innerWidth / 2, onSize: setWidth });
+
+    const known = useMemo(() => new Set(connections.map((connection) => connection.id)), [connections]);
+    // While there are no connections they may still be loading, so nothing is dropped then.
+    const pruned = known.size > 0 ? pruneTabs(state, known) : state;
+    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 tabs = state.tabs.filter((tab) => known.has(connectionIdOf(tab)));
+    const active = tabs.find((tab) => tab.id === state.activeId) ?? tabs.at(-1) ?? null;
+    const canManage = onConnectionsChange !== undefined;
+
+    useEffect(() => {
+        storage?.set(STORAGE_KEY, serializeState(state));
+    }, [storage, state]);
+
+    const onAction = useStableCallback((action: DatabaseAction): void => {
+        const connectionId = action.kind === 'open-table' || action.kind === 'edit-table' ? action.ref.connectionId : action.connectionId;
+        if (!known.has(connectionId) || (action.kind === 'manage-connection' && !canManage)) {
+            outer?.(action);
+            return;
+        }
+        switch (action.kind) {
+            case 'open-table':
+                setSelection(action.ref);
+                setState((current) => openTable(current, action.ref, action.view, action.where));
+                break;
+            case 'open-console':
+                setState((current) => openConsole(current, action.connectionId, action.schema, action.sql));
+                break;
+            case 'new-table':
+                setState((current) => openDesigner(current, action.connectionId, action.schema));
+                break;
+            case 'edit-table':
+                setState((current) => openDesigner(current, action.ref.connectionId, action.ref.schema, action.ref.table));
+                break;
+            case 'manage-connection':
+                setManaged(action.connectionId);
+                setManaging(true);
+                break;
+        }
+    });
+
+    function newConsole(): void {
+        const context = consoleContext();
+        if (context !== null) {
+            setState((current) => openConsole(current, context.connectionId, context.schema));
+        }
+    }
+
+    /* Where a new console runs: the connection of the tab in front, else the one picked in the explorer, else the first. */
+    function consoleContext(): { readonly connectionId: string; readonly schema?: string } | null {
+        if (active !== null) {
+            return { connectionId: connectionIdOf(active), schema: active.kind === 'table' ? active.ref.schema : active.schema };
+        }
+        if (selection !== null && known.has(selection.connectionId)) {
+            return { connectionId: selection.connectionId, schema: selection.schema };
+        }
+        const first = connections[0];
+        return first === undefined ? null : { connectionId: first.id };
+    }
+
+    function onKeyDown(e: KeyboardEvent<HTMLDivElement>): void {
+        // A dialog opened from here is a portal: its events reach this handler through React, not through the DOM.
+        if (
+            active !== null &&
+            e.currentTarget.contains(e.target as Node) &&
+            !e.nativeEvent.isComposing &&
+            matchesShortcut(shortcut('Mod+W'), e.nativeEvent, isApplePlatform())
+        ) {
+            e.preventDefault();
+            requestClose(active.id);
+        }
+    }
+
+    function closeById(id: string): void {
+        setState((current) => closeTab(current, id));
+    }
+
+    /* A table tab with changes that are not submitted asks first. */
+    function requestClose(id: string): void {
+        if (dirty.has(id)) {
+            setClosing(id);
+        } else {
+            closeById(id);
+        }
+    }
+
+    function markDirty(id: string, isDirty: boolean): void {
+        setDirty((current) => {
+            if (current.has(id) === isDirty) {
+                return current;
+            }
+            const next = new Set(current);
+            if (isDirty) {
+                next.add(id);
+            } else {
+                next.delete(id);
+            }
+            return next;
+        });
+    }
+
+    const titleOf = (tab: WorkbenchTab): string => {
+        switch (tab.kind) {
+            case 'table':
+                return tab.where === undefined ? tab.ref.table : t('workbench.filtered', { table: tab.ref.table });
+            case 'console':
+                return t('workbench.console', { number: formatNumber(tab.number) });
+            case 'designer':
+                return tab.table === undefined ? t('workbench.newTable') : t('workbench.designer', { table: tab.table });
+        }
+    };
+
+    const viewOf = (tab: WorkbenchTab) => {
+        const connection = connections.find((entry) => entry.id === connectionIdOf(tab));
+        if (connection === undefined) {
+            return null;
+        }
+        switch (tab.kind) {
+            case 'table':
+                return <TableTab connection={connection} tab={tab} onDirtyChange={(isDirty) => markDirty(tab.id, isDirty)} />;
+            case 'console':
+                return (
+                    <QueryConsole
+                        connection={connection}
+                        schema={tab.schema}
+                        value={tab.sql}
+                        onValueChange={(sql) => setState((current) => setConsoleSql(current, tab.id, sql))}
+                        autoFocus={tab.id === active?.id}
+                        className="h-full"
+                    />
+                );
+            case 'designer':
+                return (
+                    <DesignerTab connection={connection} tab={tab} onTableChange={(table) => setState((current) => setDesignerTable(current, tab.id, table))} />
+                );
+        }
+    };
+
+    const canOpenConsole = consoleContext() !== null;
+    const closingTab = state.tabs.find((tab) => tab.id === closing);
+    const closingTable = closingTab?.kind === 'table' ? closingTab.ref.table : '';
+
+    return (
+        <DatabaseProvider client={client} onAction={onAction} storage={storage} files={files} numberNotation={numberNotation}>
+            <div ref={ref} className={clsx('flex h-full min-h-0 min-w-0 bg-surface text-text', className)} onKeyDown={onKeyDown}>
+                <aside ref={column} className="relative flex shrink-0 flex-col border-r border-border" style={{ width }}>
+                    <header className="flex h-9 shrink-0 items-center justify-between border-b border-border pr-2 pl-3">
+                        <h2 className="text-sm font-semibold text-text">{t('workbench.title')}</h2>
+                        {canManage && (
+                            <IconButton
+                                icon={Settings2}
+                                size="sm"
+                                label={t('workbench.manage')}
+                                onClick={() => {
+                                    setManaged(null);
+                                    setManaging(true);
+                                }}
+                            />
+                        )}
+                    </header>
+                    <DatabaseExplorer connections={connections} value={selection} onValueChange={setSelection} className="min-h-0 flex-1" />
+                    <ColumnResizeHandle from="left" onPointerDown={startResize} />
+                </aside>
+                <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"
+                >
+                    <Tabs.List
+                        aria-label={t('workbench.tabs')}
+                        className="px-2"
+                        end={
+                            <>
+                                {active?.kind === 'table' && (
+                                    <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 }
+                                        ]}
+                                    />
+                                )}
+                                <IconButton
+                                    icon={SquareTerminal}
+                                    size="sm"
+                                    label={t('workbench.newConsole')}
+                                    tooltip={canOpenConsole ? undefined : t('workbench.noConnection')}
+                                    disabled={!canOpenConsole}
+                                    onClick={newConsole}
+                                />
+                            </>
+                        }
+                    >
+                        {tabs.map((tab) => (
+                            <Tabs.Tab key={tab.id} value={tab.id} onClose={() => requestClose(tab.id)}>
+                                <Icon icon={tab.kind === 'table' ? Table : tab.kind === 'console' ? SquareTerminal : PencilRuler} size={14} />
+                                {titleOf(tab)}
+                            </Tabs.Tab>
+                        ))}
+                    </Tabs.List>
+                    {tabs.length === 0 ? (
+                        <EmptyState
+                            icon={SquareTerminal}
+                            title={t('workbench.empty.title')}
+                            className="flex-1"
+                            action={
+                                <Button variant="secondary" disabled={!canOpenConsole} onClick={newConsole}>
+                                    {t('workbench.newConsole')}
+                                </Button>
+                            }
+                        >
+                            {t('workbench.empty.body')}
+                        </EmptyState>
+                    ) : (
+                        tabs.map((tab) => (
+                            <Tabs.Panel key={tab.id} value={tab.id} keepMounted className="min-h-0 flex-1">
+                                {viewOf(tab)}
+                            </Tabs.Panel>
+                        ))
+                    )}
+                </Tabs.Root>
+                <PromptDialog
+                    open={closing !== null}
+                    danger
+                    title={t('workbench.discard.title', { table: closingTable })}
+                    description={t('workbench.discard.description')}
+                    confirmLabel={t('workbench.discard.confirm')}
+                    onConfirm={() => {
+                        if (closing !== null) {
+                            closeById(closing);
+                        }
+                        setClosing(null);
+                    }}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setClosing(null);
+                        }
+                    }}
+                />
+                {onConnectionsChange !== undefined && (
+                    <Dialog.Root open={managing} onOpenChange={setManaging}>
+                        <Dialog.Popup className="flex h-[560px] w-[900px] flex-col overflow-hidden">
+                            <div className="border-b border-border px-4 py-3">
+                                <Dialog.Title>{t('workbench.connections')}</Dialog.Title>
+                            </div>
+                            <ConnectionManager
+                                value={connections}
+                                onValueChange={onConnectionsChange}
+                                selected={managed}
+                                onSelectedChange={setManaged}
+                                className="min-h-0 flex-1"
+                            />
+                            <Dialog.Footer>
+                                <Dialog.Close render={<Button variant="secondary" />}>{t('workbench.close')}</Dialog.Close>
+                            </Dialog.Footer>
+                        </Dialog.Popup>
+                    </Dialog.Root>
+                )}
+            </div>
+        </DatabaseProvider>
+    );
+}

package/src/workbench/DesignerTab.tsx

@@ -0,0 +1,37 @@
+import { DatabaseProvider } from '../DatabaseProvider.tsx';
+import type { DatabaseAction } from '../actions.ts';
+import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseStorage, useNumberNotation } from '../client-context.ts';
+import type { Connection } from '../client/types.ts';
+import { TableDesigner } from '../designer/TableDesigner.tsx';
+import type { WorkbenchTab } from './tabs.ts';
+import { useStableCallback } from '../use-stable-callback.ts';
+
+export interface DesignerTabProps {
+    connection: Connection;
+    tab: Extract<WorkbenchTab, { kind: 'designer' }>;
+    /* The designer saved the table under this name, so the tab is now the designer of that table. */
+    onTableChange(table: string): void;
+}
+
+/* The designer answers a save with `edit-table`; in its own tab that is the same tab, not another one. Everything else goes on to the workbench. */
+export function DesignerTab({ connection, tab, onTableChange }: DesignerTabProps) {
+    const client = useDatabaseClient();
+    const storage = useDatabaseStorage();
+    const files = useDatabaseFiles();
+    const outer = useDatabaseAction();
+    const numberNotation = useNumberNotation();
+
+    const onAction = useStableCallback((action: DatabaseAction): void => {
+        if (action.kind === 'edit-table' && action.ref.connectionId === tab.connectionId && action.ref.schema === tab.schema) {
+            onTableChange(action.ref.table);
+        } else {
+            outer?.(action);
+        }
+    });
+
+    return (
+        <DatabaseProvider client={client} storage={storage} files={files} numberNotation={numberNotation} onAction={onAction}>
+            <TableDesigner connection={connection} schema={tab.schema} table={tab.table} className="h-full" />
+        </DatabaseProvider>
+    );
+}

package/src/workbench/TableTab.tsx

@@ -0,0 +1,27 @@
+import type { Connection } from '../client/types.ts';
+import { StructureView } from '../structure/StructureView.tsx';
+import { TableView } from '../table/TableView.tsx';
+import type { WorkbenchTab } from './tabs.ts';
+
+export interface TableTabProps {
+    connection: Connection;
+    tab: Extract<WorkbenchTab, { kind: 'table' }>;
+    /* Told whether the data holds changes that are not submitted. The view that switches `tab.view` is the workbench's. */
+    onDirtyChange?(dirty: boolean): void;
+}
+
+/* The data and the structure of one table, the one that `tab.view` names in front. Both stay mounted, so pending edits in the data survive a look at the structure. */
+export function TableTab({ connection, tab, onDirtyChange }: TableTabProps) {
+    const { schema, table } = tab.ref;
+
+    return (
+        <div className="flex h-full min-h-0 flex-col">
+            <div className="min-h-0 flex-1" hidden={tab.view !== 'data'}>
+                <TableView connection={connection} schema={schema} table={table} defaultWhere={tab.where} onDirtyChange={onDirtyChange} className="h-full" />
+            </div>
+            <div className="min-h-0 flex-1" hidden={tab.view !== 'structure'}>
+                <StructureView connection={connection} schema={schema} table={table} className="h-full" />
+            </div>
+        </div>
+    );
+}

package/src/workbench/tabs.ts

@@ -0,0 +1,184 @@
+import type { TableRef } from '../client/types.ts';
+
+export type TableViewMode = 'data' | 'structure';
+
+export type WorkbenchTab =
+    | { readonly id: string; readonly kind: 'table'; readonly ref: TableRef; readonly view: TableViewMode; readonly where?: string }
+    | { readonly id: string; readonly kind: 'console'; readonly connectionId: string; readonly schema?: string; readonly sql: string; readonly number: number }
+    /* Without `table` the designer makes a new table. */
+    | { readonly id: string; readonly kind: 'designer'; readonly connectionId: string; readonly schema: string; readonly table?: string };
+
+export interface WorkbenchState {
+    readonly tabs: readonly WorkbenchTab[];
+    readonly activeId: string | null;
+    /* The next number for an id that is not derived from what the tab shows. Never reused, so a restored tab cannot clash with a new one. */
+    readonly serial: number;
+    /* The number the last console got, for its title. */
+    readonly consoles: number;
+}
+
+export const STORAGE_KEY = 'database:workbench';
+
+export const emptyState: WorkbenchState = { tabs: [], activeId: null, serial: 0, consoles: 0 };
+
+export const connectionIdOf = (tab: WorkbenchTab): string => (tab.kind === 'table' ? tab.ref.connectionId : tab.connectionId);
+
+const tableTabId = (ref: TableRef): string => `table:${ref.connectionId}\u0000${ref.schema}\u0000${ref.table}`;
+
+const add = (state: WorkbenchState, tab: WorkbenchTab): WorkbenchState => ({ ...state, tabs: [...state.tabs, tab], activeId: tab.id });
+
+const update = (state: WorkbenchState, id: string, change: (tab: WorkbenchTab) => WorkbenchTab): WorkbenchState => {
+    let changed = false;
+    const tabs = state.tabs.map((tab) => {
+        if (tab.id !== id) {
+            return tab;
+        }
+        const next = change(tab);
+        changed ||= next !== tab;
+        return next;
+    });
+    return changed ? { ...state, tabs } : state;
+};
+
+export const focusTab = (state: WorkbenchState, id: string): WorkbenchState =>
+    state.activeId === id || !state.tabs.some((tab) => tab.id === id) ? state : { ...state, activeId: id };
+
+/* A table opens once per table; a filtered one is always a tab of its own, since the filter is what the person asked to see. */
+export const openTable = (state: WorkbenchState, ref: TableRef, view: TableViewMode, where?: string): WorkbenchState => {
+    if (where !== undefined && where.trim() !== '') {
+        return add({ ...state, serial: state.serial + 1 }, { id: `filtered:${state.serial + 1}`, kind: 'table', ref, view, where });
+    }
+    const id = tableTabId(ref);
+    const existing = state.tabs.find((tab) => tab.id === id);
+    if (existing === undefined) {
+        return add(state, { id, kind: 'table', ref, view });
+    }
+    return focusTab(setTableView(state, id, view), id);
+};
+
+export const openConsole = (state: WorkbenchState, connectionId: string, schema?: string, sql = ''): WorkbenchState => {
+    const serial = state.serial + 1;
+    const consoles = state.consoles + 1;
+    return add({ ...state, serial, consoles }, { id: `console:${serial}`, kind: 'console', connectionId, schema, sql, number: consoles });
+};
+
+/* A table is designed in one tab; a new table gets a tab each time. */
+export const openDesigner = (state: WorkbenchState, connectionId: string, schema: string, table?: string): WorkbenchState => {
+    const existing =
+        table === undefined
+            ? undefined
+            : state.tabs.find((tab) => tab.kind === 'designer' && tab.connectionId === connectionId && tab.schema === schema && tab.table === table);
+    if (existing !== undefined) {
+        return focusTab(state, existing.id);
+    }
+    const serial = state.serial + 1;
+    return add({ ...state, serial }, { id: `designer:${serial}`, kind: 'designer', connectionId, schema, table });
+};
+
+export const setTableView = (state: WorkbenchState, id: string, view: TableViewMode): WorkbenchState =>
+    update(state, id, (tab) => (tab.kind === 'table' && tab.view !== view ? { ...tab, view } : tab));
+
+export const setConsoleSql = (state: WorkbenchState, id: string, sql: string): WorkbenchState =>
+    update(state, id, (tab) => (tab.kind === 'console' && tab.sql !== sql ? { ...tab, sql } : tab));
+
+/* The designer of a new table became the designer of that table, in the same tab. Closes any other designer of it. */
+export const setDesignerTable = (state: WorkbenchState, id: string, table: string): WorkbenchState => {
+    const subject = state.tabs.find((tab) => tab.id === id);
+    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)
+    );
+    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. */
+export const closeTab = (state: WorkbenchState, id: string): WorkbenchState => {
+    const at = state.tabs.findIndex((tab) => tab.id === id);
+    if (at < 0) {
+        return state;
+    }
+    const tabs = state.tabs.filter((tab) => tab.id !== id);
+    return { ...state, tabs, activeId: state.activeId === id ? (tabs[Math.min(at, tabs.length - 1)]?.id ?? null) : state.activeId };
+};
+
+/* Drops the tabs of connections that are gone. */
+export const pruneTabs = (state: WorkbenchState, connectionIds: ReadonlySet<string>): WorkbenchState => {
+    const tabs = state.tabs.filter((tab) => connectionIds.has(connectionIdOf(tab)));
+    if (tabs.length === state.tabs.length) {
+        return state;
+    }
+    return { ...state, tabs, activeId: tabs.some((tab) => tab.id === state.activeId) ? state.activeId : (tabs.at(-1)?.id ?? null) };
+};
+
+export const serializeState = (state: WorkbenchState): string => JSON.stringify({ version: 1, ...state });
+
+const isText = (value: unknown): value is string => typeof value === 'string' && value !== '';
+
+const isOptionalText = (value: unknown): value is string | undefined => value === undefined || typeof value === 'string';
+
+const refOf = (value: unknown): TableRef | null => {
+    const ref = value as Partial<Record<keyof TableRef, unknown>> | null;
+    return typeof ref === 'object' && ref !== null && isText(ref.connectionId) && isText(ref.schema) && isText(ref.table)
+        ? { connectionId: ref.connectionId, schema: ref.schema, table: ref.table }
+        : null;
+};
+
+const tabOf = (value: unknown): WorkbenchTab | null => {
+    const raw = value as Record<string, unknown> | null;
+    if (typeof raw !== 'object' || raw === null || !isText(raw.id)) {
+        return null;
+    }
+    const id = raw.id;
+    switch (raw.kind) {
+        case 'table': {
+            const ref = refOf(raw.ref);
+            const view = raw.view === 'structure' ? 'structure' : 'data';
+            return ref === null || !isOptionalText(raw.where) ? null : { id, kind: 'table', ref, view, where: raw.where };
+        }
+        case 'console':
+            return isText(raw.connectionId) && isOptionalText(raw.schema) && typeof raw.sql === 'string' && typeof raw.number === 'number'
+                ? { id, kind: 'console', connectionId: raw.connectionId, schema: raw.schema, sql: raw.sql, number: raw.number }
+                : null;
+        case 'designer':
+            return isText(raw.connectionId) && isText(raw.schema) && isOptionalText(raw.table)
+                ? { id, kind: 'designer', connectionId: raw.connectionId, schema: raw.schema, table: raw.table }
+                : null;
+        default:
+            return null;
+    }
+};
+
+/* What a past run stored, or an empty workbench for anything that is missing or not ours. A tab that is not valid is left out, the rest stays. */
+export const parseState = (raw: string | null): WorkbenchState => {
+    if (raw === null) {
+        return emptyState;
+    }
+    let data: Record<string, unknown>;
+    try {
+        data = JSON.parse(raw) as Record<string, unknown>;
+    } catch {
+        return emptyState;
+    }
+    if (typeof data !== 'object' || data === null || data.version !== 1 || !Array.isArray(data.tabs)) {
+        return emptyState;
+    }
+    const seen = new Set<string>();
+    const tabs = data.tabs.map(tabOf).filter((tab): tab is WorkbenchTab => {
+        if (tab === null || seen.has(tab.id)) {
+            return false;
+        }
+        seen.add(tab.id);
+        return true;
+    });
+    const activeId = typeof data.activeId === 'string' && seen.has(data.activeId) ? data.activeId : (tabs.at(-1)?.id ?? null);
+    const counter = (value: unknown): number => (typeof value === 'number' && Number.isFinite(value) && value >= 0 ? Math.floor(value) : 0);
+    return {
+        tabs,
+        activeId,
+        serial: Math.max(counter(data.serial), ...tabs.map((tab) => Number(/^(?:filtered|console|designer):(\d+)$/.exec(tab.id)?.[1] ?? 0))),
+        consoles: Math.max(counter(data.consoles), ...tabs.map((tab) => (tab.kind === 'console' ? tab.number : 0)))
+    };
+};