pgkiln 0.88.0 → 0.90.0

package/docs/guide/03-builder.md

@@ -225,9 +225,16 @@ department. Every installation has the **Default** workspace, which holds the ap
 - **New applications** (Create, from a file, pasted data, existing tables, a blueprint) and **imports** go into the
   current workspace; a working copy stays in its main application's workspace. Imports made with the command line
   (`pgkiln import`) go into Default. Exports don't carry the workspace.
-- **Workspace utilities**: tiles for users and sign-in, application groups, the App Gallery, developers, the SQL
-  Workshop, the dashboard, [static workspace files, remote servers and web credentials](#static-workspace-files-remote-servers-and-web-credentials) (and, for administrators, instance settings, workspaces, AI and mail services and the
-  installation), with **Cross Application Reports** in the side column (APEX: Cross Application Reports), each over
+- **Workspace utilities** (the rail's **Administration**, `/builder/utilities`; UX-4): the utilities in sections with a
+  **filter** field at the top: *People and sign-in* (users, developers, identity providers, LDAP directories, password
+  policy), *Connections* ([remote servers, web credentials](#static-workspace-files-remote-servers-and-web-credentials),
+  remote databases, REST source catalogs, mail services; for workspace administrators the mail queue and network
+  access), *Data and AI* (AI services, vector providers, UI defaults, static workspace files, icons), *Operations*
+  (application groups, backups, export and import, the dashboard, OpenTelemetry), the current **workspace** (for its
+  administrators: its page, [workspace message and environment banner](#workspace-message-and-environment-banner),
+  preferences, extension links, [workspace utilization](#workspace-utilization)) and the **instance** (for
+  administrators: instance settings, workspaces, [Database users](#database-users), the installation), then
+  **Cross Application Reports** (APEX: Cross Application Reports), each over
   every application of the current workspace: *Application attributes* (type, sign-in, availability, build status,
   debug level, language, database role), *Build options*, *Developer comments*, *Authentication* (sign-in methods,
   identity providers, LDAP, access, the login page, Forgot password), *Authorization schemes*, *Password items* and
@@ -247,7 +254,7 @@ its developers must not reach other teams' applications or data.
 ### Workspace message and environment banner
 
 Administrators and the workspace's administrators set them on the workspace's page (*Manage service*, or the
-Administration menu → *Workspace message and environment banner*; APEX: Define Workspace Message, Define Environment
+Administration → *Workspace message and environment banner*; APEX: Define Workspace Message, Define Environment
 Banner): a **message** (plain text, up to 2000 characters) shown to the workspace's developers on the
 [Workspace home](#workspace-home) (where they can also edit it in place) and the App Builder home,
 and an **environment banner**: a label of up to 40 characters in one of eight colours, shown at the top of every
@@ -255,7 +262,7 @@ builder page while the workspace is current.
 
 ### Workspace preferences
 
-Administrators and the workspace's administrators set them on the workspace's page (Administration menu →
+Administrators and the workspace's administrators set them on the workspace's page (Administration →
 *Workspace preferences*; APEX: Set Workspace Preferences):
 
 - **Enable the SQL Workshop**: off, every SQL Workshop page (the SQL Worksheet, the Object Browser, SQL scripts, Load and
@@ -349,7 +356,7 @@ says what was added, kept and replaced.
 
 ### Workspace utilization
 
-Administration menu → **Workspace utilization** (`/builder/workspaces/<id>/utilization`; APEX: Workspace
+Administration → **Workspace utilization** (`/builder/workspaces/<id>/utilization`; APEX: Workspace
 Utilization), for administrators and the workspace's administrators: the number of applications, pages, developers,
 page views of the last 30 days and SQL scripts; per application its pages, regions, items, page views, users and the
 size of its static files; and the schemas the workspace's database roles use with their tables and storage.
@@ -462,11 +469,14 @@ longer sign in. Delete a workspace only when it is shared and empty; its logins
 Every builder page has the same frame, modelled on an IDE:
 
 - **The icon rail** on the left: Home (the [Workspace home](#workspace-home); the logo leads there too), App Builder,
-  SQL Workshop, [App Gallery](#app-gallery), [Data Reporter](#data-reporter-datasets-and-reporting-applications), **Search** (on the
-  pages of an application); at the bottom the **Administration** menu (Workspace utilities; for administrators of the
-  current workspace *Manage service*: [workspace message and environment banner](#workspace-message-and-environment-banner),
-  [workspace utilization](#workspace-utilization) and the workspace's page; Manage users and groups, Developers,
-  Monitor activity, [Database users](#database-users) for administrators, Change my password), Help, and your account menu (the circle with your initials) with the
+  SQL Workshop, [App Gallery](#app-gallery), [Data Reporter](#data-reporter-datasets-and-reporting-applications),
+  Team Development and **Administration** (the workspace utilities, below); at the bottom Help, **Show labels** and your
+  account menu (the circle with your initials). (UX-3) The entry of the page you are on is marked, by the page's
+  address (an application's pages under App Builder; users, developers, workspaces, instance settings and the other
+  utilities under Administration). *Show labels* puts each entry's name next to its icon (*Hide labels* takes them
+  away; kept for your session); without them the name shows when you point at an icon or move to it with the
+  keyboard. The search is the field at the top of every page (**Ctrl+K**); an application's own search is its
+  **Search** tab. Your account menu has the
   **builder theme** (*Dark*, the default; *Light*; or *System*, which follows the operating system),
   Change password and Sign out. The theme is remembered on this device, also after signing out;
   it only changes the builder, not your applications.
@@ -494,7 +504,9 @@ other sites.
 (sprint 86) An address under `/builder` that leads nowhere (a deleted application or page, a typo, an
 application of a workspace you are not a member of) shows a **Page not found** page in the builder's
 theme with a link to the App Builder home; a server error shows **Something went wrong** (the error
-is in the server log, not on the page). Scripts get the plain answers they always got.
+is in the server log, not on the page). Scripts get the plain answers they always got. (UX-10) Signed in, the
+page stays inside the builder (rail, header search, status bar), with a search field filled with the words of the
+address and your recent applications. `/builder/apps/new` and `/builder/apps/create` lead to Create application.
 
 ### Choosing the builder language
 
@@ -548,6 +560,8 @@ names and help of a shared component's form), the links to this guide, and any S
 (sprint 109; APEX: the workspace home page) The page the builder opens after signing in, `/builder/home`, above the
 App Builder and the SQL Workshop. Everything on it is of the current [workspace](#workspaces), and it works without
 JavaScript. The [default-password banner](#signing-in-and-developer-accounts) stays on top until the password is changed.
+(UX-13) For administrators, **Needs attention** under the heading lists what must not wait: failing
+[lockout checks](#lockout-checks) and, with the release check on, a newer pgkiln (details in the System message).
 
 - **Tool cards**: App Builder (`/builder/apps`), SQL Workshop (not when the workspace's preferences turn it off),
   **Data Reporter** (when the server has the Data Reporter tool at `/builder/reporter`) and the [App Gallery](#app-gallery).
@@ -582,12 +596,13 @@ that may not reach the internet. Under the test runner the server never asks Git
 The App Builder's home page, `/builder/apps` (`/builder` shows it too, unless the workspace's
 [preferences](#workspace-preferences) send `/builder` to the Workspace home), is laid out like APEX's App Builder:
 
-- **Four tiles**: **Create** and **Import** (each on its own page), the workspace **Dashboard**
-  (applications, pages, active accounts; page views, users, failed sign-ins and errors of the last
-  24 hours, and per application the last 7 days with a link to its Activity page) and
-  **Workspace Utilities** (users, identity providers, LDAP directories, password policy,
-  developers, the SQL Workshop, and for administrators [workspaces](#workspaces), AI services and the
-  [installation log](#installation)). The list, the dashboard and Recent show the current workspace.
+- **The header** (UX-5): the heading *App Builder*, **Create** (the page's one primary action), **Import** and a
+  **⋯** menu with the workspace **Dashboard** (applications, pages, active accounts; page views, users, failed
+  sign-ins and errors of the last 24 hours, and per application the last 7 days with a link to its Activity page)
+  and **Administration** (the [workspace utilities](#workspaces)). The list, the dashboard and Recent show the
+  current workspace. Every builder page follows the same pattern: one heading, one primary (accent) button,
+  the other actions beside it or in a ⋯ menu; an application's Pages tab has **Create page** as its primary action
+  in the application's header (other tabs: **Run**), and its Tasks list only what the page doesn't offer already.
 - **The applications**, as a report (application id, name, alias, pages, page views of the last 24
   hours, sign-in, last updated, **updated by**, **working copies**, and Edit / Run) or as cards. **Search** filters the list as you type
   (by name, alias or id; without JavaScript, press Enter). Click a column heading, or use
@@ -714,19 +729,22 @@ you like. `meta.reporting_app_count(workspace_id)` counts a workspace's reportin
 
 ### Creating an application
 
-**Create** (a tile, or `/builder/create`) is one page, like APEX's Create Application wizard. Links at the top
-start from a file, pasted data, a blueprint or the App Gallery instead. Then:
+**Create** (the App Builder's primary button, or `/builder/create`) is one page, like APEX's Create Application
+wizard. Links at the top start from a file, pasted data, a blueprint or the App Gallery instead. (UX-7) The name
+comes first, then the data and its pages, features, appearance and sign-in; **Create application** and Cancel stay
+in a footer at the bottom of the window, next to a one-line summary (*12 pages on hr · App users (login page) ·
+English*) that follows your choices. The sections:
 
 | Section | Field | Meaning |
 |---|---|---|
-| Data | Pages on the tables of | The parsing schema: an existing schema, or a new, empty one named after the alias. (sprint 87) Choosing a schema lists its tables under Pages at once, with the name and alias proposed for it (unless you already typed them); without JavaScript, *Show its tables* does it |
 | Application | Name | Display name, shown in the header. Proposed from the schema and selected when you click it, so typing replaces it |
-| | Description, Icon | Shown on the home page's hero and the About page |
-| Appearance | Theme style, Navigation, Accent colour | Iris, Lavender or Standard; a side or top menu; an own accent colour |
-| Pages | a page type per table | *Interactive report with form*, *Faceted search*, *Cards*, *Calendar* (a table with a date column), *Master detail* (a table another table refers to), *Interactive grid*, *Report* or *No page*. Tables with a single-column primary key get a modal form with their report, faceted search, cards and calendar; views and tables without such a key can't have a form or a grid. Proposed: a report with form, an interactive grid for a table of more than 100,000 rows, a report for a view. (sprint 87) A table with [row level security](08-security.md) shows *RLS · n* (its number of policies), or *RLS, no policies* in red: the application's role would see no rows. *Dashboard*: a chart per table |
+| | Alias | Lowercase URL name: `inventory` gives `/a/inventory`. (sprint 87) It follows the name as you type it (*Café Orders* → `cafe-orders`) until you change it yourself |
+| | Icon, Description | Shown on the home page's hero and the About page |
+| Data and pages | Pages on the tables of | The parsing schema: an existing schema, or a new, empty one named after the alias. (sprint 87) Choosing a schema lists its tables at once, with the name and alias proposed for it (unless you already typed them); without JavaScript, *Show its tables* does it (it reloads the page, so choose the schema before typing) |
+| | a page type per table | *Interactive report with form*, *Faceted search*, *Cards*, *Calendar* (a table with a date column), *Master detail* (a table another table refers to), *Interactive grid*, *Report* or *No page*. Tables with a single-column primary key get a modal form with their report, faceted search, cards and calendar; views and tables without such a key can't have a form or a grid. Proposed: a report with form, an interactive grid for a table of more than 100,000 rows, a report for a view. (sprint 87) A table with [row level security](08-security.md) shows *RLS · n* (its number of policies), or *RLS, no policies* in red: the application's role would see no rows. *Dashboard*: a chart per table |
 | Features | | *About page* (in a Help menu), *Access control* (authorization schemes `CONTRIBUTOR` and `READER` next to `ADMIN`, for the roles admin, contributor and reader), *Activity reporting* (page 9010 for administrators: page views per day and the latest activity, from `meta.app_activity`), *Feedback*, *Theme style selection* (users may choose light or dark), *Install as an app* (PWA) and *Push notifications* (needs `PGKILN_SECRET_KEY`) |
-| Settings | Alias | Lowercase URL name: `inventory` gives `/a/inventory`. (sprint 87) It follows the name as you type it (*Café Orders* → `cafe-orders`) until you change it yourself |
-| | Authentication | *App users* (a login page and a user list), *HTTP header* (a trusted reverse proxy names the user, see [chapter 8](08-security.md#http-header-authentication-reverse-proxy)), *Database accounts* (PostgreSQL login roles and their passwords, see [chapter 8](08-security.md#database-accounts-postgresql-roles)), *Custom* (your own PL/pgSQL function, see [chapter 8](08-security.md#custom-authentication-a-plpgsql-function)) or *None* (a public app) |
+| Appearance | Theme style, Navigation, Accent colour | Iris, Lavender or Standard; a side or top menu; an own accent colour |
+| Sign-in | Authentication | *App users* (a login page and a user list), *HTTP header* (a trusted reverse proxy names the user, see [chapter 8](08-security.md#http-header-authentication-reverse-proxy)), *Database accounts* (PostgreSQL login roles and their passwords, see [chapter 8](08-security.md#database-accounts-postgresql-roles)), *Custom* (your own PL/pgSQL function, see [chapter 8](08-security.md#custom-authentication-a-plpgsql-function)) or *None* (a public app) |
 | | First user / Password | The first user; they get the `admin` role. An existing account is reused (its password isn't changed). (sprint 87) Hidden while Authentication is *None* |
 | | Language | The application's primary language |
 | Advanced | Start from | Shown when there are **boilerplate** applications (Settings → Application type): their pages, shared components and settings are copied into the new application, which keeps its own name, alias, role and authentication ([application types](#application-types-and-subscriptions)) |
@@ -940,7 +958,11 @@ they are **not** run until you choose to.
 (sprint 74) Above the pages: a **search** by page name or number (the rows filter while you type),
 **Report** and **Icons** views, and **Create page** (the page wizards below). **Tasks** on the right: run the
 application, create pages (also with AI), (sprint 137) **Add feature page** and **Create page as copy**, Shared
-Components, page groups, export, backups, supporting objects, lock or delete the application.
+Components, page groups, export, backups, supporting objects and lock the application. (UX-9) The report shows a
+page's mode in the property editor's words (*Normal*, *Modal dialog*), and Group stays empty for a page without one.
+(UX-6) Deleting the application is not a task: it is the **Danger zone** at the bottom of Settings → Definition,
+where you type the application's alias to confirm (the server checks it too). Its pages, shared components,
+working copies and backups go with it, so export it first if you may need it again.
 
 The **default-password** warning shows on the App Builder home (and Developers) only; dismiss it with × until the
 next sign-in. The avatar keeps a red dot until the password is changed.
@@ -1072,6 +1094,16 @@ The page designer has three panes, as in APEX's Page Designer. From 1024 pixels
 side by side; on phones and portrait tablets they are tabs (**Tree**, **Layout**, **Properties**):
 choosing a component opens the Properties tab.
 
+(UX-2) From 1024 pixels wide the designer is fixed to the window: only the panes scroll, so the toolbar
+with **Save**, Undo / Redo and the page navigator stays in view, and the property editor's own save button
+stays at the bottom of its pane. **Ctrl+S** (Cmd+S) saves. A change not saved yet puts a dot on Save, and
+leaving the page with one asks first. On a window under 800 pixels high the gallery under the layout is only
+its tabs (*Regions*, *Items*, *Buttons*): choose one to open it, choose the open one to fold it again; the
+designer remembers which you prefer.
+
+(UX-6) **Delete page** is in the toolbar's page menu (the wrench), away from Save: type the page number to
+confirm. Its regions, items, buttons, dynamic actions and processes go with it, as do its lock and comments.
+
 - **Left: the component tree**, with four tabs:
   - **Rendering**: the page, *Pre-Rendering* (branches, computations and processes that run
     before the page is shown), the regions by
@@ -1087,7 +1119,8 @@ choosing a component opens the Properties tab.
     application items), linking to Shared Components.
 
   Icons show which components have an authorization scheme, a condition or a build option; type icons are coloured
-  by kind (regions, items, buttons, dynamic actions, processes). Folders open and close
+  by kind (regions, items, buttons, dynamic actions, processes). (UX-12) A component's name comes first: when the
+  pane is narrow its type text is left out (the icon shows the type; hover a component for its name and type). Folders open and close
   with a click; with the keyboard, the arrow keys walk the tree (Left / Right close and open a
   folder), Enter opens a component.
 
@@ -1581,7 +1614,8 @@ on import), downloads it again and removes it. See
 ## Users (the user directory)
 
 **Builder → Users** lists every account with the applications (and roles) it can use. Create
-accounts here (a password is optional for single sign-on-only accounts). Open an account to edit
+accounts here (a password is optional for single sign-on-only accounts): (UX-8) **Create account** in the header
+opens a side panel, so the list keeps the page's width. Open an account to edit
 its name and e-mail, set or remove its password, deactivate or delete it, and grant, change or
 revoke access per application. Password changes, deactivation and access changes end the
 affected sessions. See [chapter 8](08-security.md#the-user-directory).
@@ -1790,7 +1824,7 @@ sending mailboxes (an application access policy or RBAC for Applications).
 
 ### Mail queue
 
-Administration menu → **Mail queue** (`/builder/mail-queue`; APEX 26.2: Administration → Mail queue): the delivery
+Administration → **Mail queue** (`/builder/mail-queue`; APEX 26.2: Administration → Mail queue): the delivery
 health of the mail queue, for administrators (every workspace, or one) and a workspace's administrators (the current
 workspace's applications only; other developers get 403). Filter by period (24 hours, 48 hours, 7 days), workspace and
 application:
@@ -1835,7 +1869,7 @@ applications off or send them to a collector of their own as well (through the a
 
 ### Network access
 
-Administration menu → **Network access** (`/builder/network`; APEX 26.2: workspace network ACLs), for administrators
+Administration → **Network access** (`/builder/network`; APEX 26.2: workspace network ACLs), for administrators
 (any workspace, `?ws=`) and a workspace's administrators (their workspaces): which web services a workspace's
 applications may call. The installation's list (`PGKILN_REST_ALLOWED_HOSTS`, set in the server's environment, shown
 read-only; the private hosts to administrators only) applies to every workspace. A workspace can choose **Only the
@@ -2121,7 +2155,8 @@ others (Quick SQL, Query Builder, Load and Unload Data, Sample Data, DDL, Compar
 
 (sprint 96; Database Actions: the Launchpad) The home page starts with **Pinned & recently visited**: the pages you
 pinned (a tool, a database object from the Object Browser, a saved worksheet from its file menu; at most 24, per
-workspace) and the SQL Workshop pages you opened last in this browser. Below, the tools are in three tabs,
+workspace) and the SQL Workshop pages you opened last in this browser (UX-14: each page once, the latest visit
+first, without the Launchpad itself or a page that is pinned already). Below, the tools are in three tabs,
 **Development**, **Administration** and **Monitoring**, each with a line about what it does and a pin; the **More**
 menu uses the same headings.
 
@@ -2133,6 +2168,12 @@ the SQL Workshop's connection may use. Without JavaScript the header's field ope
 - **SQL Worksheet** (`/builder/sql/worksheet`, sprint 91; Database Actions: SQL; was SQL Commands, whose address
   `/builder/sql/commands` opens the same page): one screen with a **navigator** on the left, the **editor** with a
   toolbar, **output tabs** below and a **status bar**.
+  - (UX-1) The **toolbar is one row**: the worksheet's file menu, **Run Statement**, **Run Script**, **Explain Plan**
+    and **Autotrace** (icons with their name as a tooltip when the window is narrow), **Suggest** and **Check**, the
+    commit mode, fullscreen and a **⋯ menu** with *Continue on error*, Format, Convert case, Find, Load data, Clear
+    and the keyboard shortcuts. **Run as** is in the status bar (its tooltip says who the statements run as).
+    The editor takes about half of the window and the output the other half (drag the splitter; the size is
+    remembered); before the first run the output is only its row of tabs, and choosing a tab opens it.
   - The navigator has a schema (the same one as the Object Browser), an object type (*All Objects*, tables, views,
     materialized views, indexes, sequences, types, functions, procedures, triggers, policies) and a search field.
     A table or view opens to its columns with their types (a key marks the primary key); drag it into the editor
@@ -2217,11 +2258,11 @@ the SQL Workshop's connection may use. Without JavaScript the header's field ope
     remembered for the session; the history and the log keep the statement as written.
   - **Format** (**Ctrl + F7**) lays out the selection or the whole worksheet: a clause per line, the columns of a select
     list and the conditions of a WHERE one per line, joins and subqueries indented, keywords in lower or UPPER case
-    (chosen in the **?** menu). Strings, comments and `$$` bodies stay as they are. **Convert case** (**Ctrl + B**)
+    (chosen in the **⋯** menu). Strings, comments and `$$` bodies stay as they are. **Convert case** (**Ctrl + B**)
     cycles the selection (or the word at the cursor) through UPPER, lower and Initial caps. **Find and replace**
     (**Ctrl + F**, **Ctrl + H**) with a regular expression or exact case, **Go to line** (**Ctrl + G**), and
-    **Ctrl + /** comments the selected lines out or in. The **?** menu lists every key; **F1** opens this help. The
-    upload button opens Load Data for the navigator's schema.
+    **Ctrl + /** comments the selected lines out or in. The **⋯** menu lists every key; **F1** opens this help.
+    *Load data* in the same menu opens Load Data for the navigator's schema.
   - Each statement commits on its own (**Autocommit**, like Database Actions). Statements run as the **owner connection** (an isolated workspace's
     developer login for its developers), on a connection of their own that is closed afterwards, so `SET ROLE` or
     `SET search_path` doesn't leak. **Run as** picks an application of your workspace instead: the statements then
@@ -2414,7 +2455,7 @@ the SQL Workshop's connection may use. Without JavaScript the header's field ope
     connections, memory, row security), the installed extensions and the schemas with their size.
   - **SQL Monitor** (administrators only): see [SQL Monitor](#sql-monitor) below (it replaced the Database Monitor;
     the old address `/builder/sql/utilities/monitor` redirects).
-  - **Database Users** (administrators only; Administration menu → *Database users*, `/builder/db-users`; sprint 99,
+  - **Database Users** (administrators only; Administration → *Database users*, `/builder/db-users`; sprint 99,
     Database Actions: Database Users): see [Database users](#database-users).
   - **Schema Export / Import** (administrators only; `/builder/sql/data-pump`; sprint 103, Database Actions: Data
     Pump): see [Schema export and import](#schema-export-and-import).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.88.0",
+  "version": "0.90.0",
   "description": "Open source low-code, SQL-driven application builder for PostgreSQL, inspired by Oracle APEX",
   "keywords": [
     "postgresql",

package/public/builder.css

@@ -444,7 +444,9 @@ body.ide {
   .pd > .tab-panel > .pd-pane-title { display: none; }
   /* with script the designer fills the window and each pane scrolls on its own */
   .js .ide-full .ide-main { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
-  .js .ide-full .ide-work { flex: 1 1 auto; min-height: 0; }
+  /* (UX-2) the work area is the containing block and clips: nothing inside (a screen-reader heading placed
+     absolutely, a pane's overflow) can make the page itself scroll */
+  .js .ide-full .ide-work { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
   .js .ide-full .pd { height: 100%; min-height: 0; }
   .js .pd-pane { min-height: 0; overflow: auto; }
   .js .pd-center { display: flex; flex-direction: column; overflow: hidden; }
@@ -484,8 +486,9 @@ body.ide {
 }
 .pd-node .icon { width: 16px; height: 16px; color: var(--muted); }
 a.pd-node:hover { background: var(--surface-3); }
-.pd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-.pd-note { margin-left: auto; padding-left: 8px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11.5px; }
+/* (UX-12) the name keeps its room: the type gives way first (the icon tells it, the tooltip names it) */
+.pd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
+.pd-note { margin-left: auto; padding-left: 8px; max-width: 45%; min-width: 0; flex: 0 1000 auto; overflow: hidden; text-overflow: clip; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
 .pd-folder { color: var(--muted); font-weight: 600; cursor: default; }
 .pd-tag { display: inline-flex; }
 .pd-tag .icon { width: 13px; height: 13px; color: var(--warn); }
@@ -1671,3 +1674,88 @@ a.cp-type:hover, a.cp-type:focus-visible { border-color: var(--accent); }
 .api-client-actions select { width: auto; min-height: 0; padding-block: 0.2rem; font-size: 0.8125rem; }
 .api-client-actions .inline-form { display: flex; gap: 6px; align-items: center; }
 .api-clients td.actions { text-align: end; }
+
+/* (UX-2) Page Designer on a short window: the gallery folded to its tabs (builder.js), Save at hand */
+@media (min-width: 1024px) {
+  .js .pd-gallery.is-folded { height: auto; min-height: 0; overflow: hidden; }
+  .js .pd-gallery.is-folded .tab-panel { display: none; }
+}
+.tb-save.is-dirty { position: relative; }
+.tb-save.is-dirty::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); }
+#pd-p-props .component-form > .buttons { position: sticky; bottom: 0; z-index: 1; margin: 0; padding: 8px 0; background: var(--surface); border-top: 1px solid var(--border); }
+.pd-note.is-cut { display: none; }
+
+/* (UX-3) the rail with labels next to its icons (the toggle at its bottom, kept in the session) */
+.rail-toggle { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; }
+@media (min-width: 900px) {
+  .ide.rail-labels { --rail-w: 196px; }
+  .rail-labels .rail-list { padding: 0 10px; }
+  .rail-labels .rail-link { display: flex; justify-content: flex-start; gap: 12px; padding: 0 12px; }
+  .rail-labels .rail-link .rail-label { position: static; opacity: 1; transform: none; padding: 0; background: none; color: inherit;
+    box-shadow: none; font-size: 13.5px; font-weight: 500; pointer-events: auto; }
+  .rail-labels .rail-logo { margin-left: 18px; }
+  .rail-labels .rail-user { justify-content: flex-start; padding-left: 14px; }
+}
+
+/* (UX-4) Administration: the workspace utilities in sections of compact tiles, with a filter (builder.js) */
+.adm { max-width: 1180px; }
+.adm .title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
+.adm-filter input { width: min(320px, 100%); }
+.adm-lede { max-width: 75ch; }
+.adm-section { margin-top: 22px; }
+.adm-section h2 { font-size: 15px; margin: 0 0 8px; color: var(--text-2, var(--muted)); text-transform: none; }
+.adm-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
+.adm-tile { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
+.adm-tile:hover, .adm-tile:focus-visible { border-color: var(--hot); background: var(--surface-2); }
+.adm-tile-head { display: flex; align-items: center; gap: 8px; }
+.adm-tile-head .icon { width: 16px; height: 16px; color: var(--hot); flex: none; }
+.adm-tile-text { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
+.adm-reports { columns: 2 260px; }
+
+/* (UX-5) a builder page's header: one heading, one primary (accent) action, secondary actions and a ⋯ menu */
+.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
+.page-head h1 { margin: 0; font-size: 22px; }
+.page-head-sub { margin: 2px 0 0; }
+.page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.page-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
+.page-head-actions .icon { width: 15px; height: 15px; }
+/* (UX-13) the Workspace home's "Needs attention" list for administrators, above the tools */
+.wh-attention { display: block; margin: 0 0 16px; }
+.wh-attention h2 { margin: 0 0 4px; font-size: 14px; }
+.wh-attention ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.wh-attention .icon { width: 15px; height: 15px; vertical-align: -2px; }
+/* (UX-6) deleting an application or a page: apart from everyday actions, the name typed to confirm */
+.danger-box { margin-top: 24px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); border-radius: 8px; background: var(--danger-soft); }
+.danger-box h2 { margin: 0 0 4px; font-size: 15px; color: var(--danger); }
+.danger-box p { margin: 0 0 8px; }
+.danger-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
+.danger-form .field { margin: 0; flex: 1 1 14rem; max-width: 22rem; }
+.menu-section .danger-form { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
+/* (UX-7) Create application: Create always in reach, with a one-line summary */
+.aw-footer { position: sticky; bottom: 29px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
+  margin-top: 16px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
+.aw-footer .buttons { margin: 0; }
+.aw-summary { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.aw-schema-row { align-items: end; }
+.aw-schema-row .buttons { margin: 0 0 1rem; }
+/* (UX-10) Page not found inside the builder */
+.nf-page h1 { margin-top: 8px; }
+.nf-search { margin: 12px 0 16px; max-width: 32rem; }
+.nf-page h2 { font-size: 14px; margin: 12px 0 4px; }
+/* (UX-8) builder reports at laptop width, one rule for all (opt in with .rep-fit): low-value columns (.col-low, under 1150 px of table width) give
+   way first, long text wraps (.col-wrap), and the Actions column (.col-actions) stays on screen at the right */
+.table-wrap.rep-fit { container-type: inline-size; }
+@container (max-width: 1150px) { .rep-fit .report .col-low { display: none; } }
+.ide .report td.col-wrap { white-space: normal; min-width: 12rem; overflow-wrap: anywhere; }
+.ide .report .col-actions { position: sticky; right: 0; background: var(--surface); box-shadow: inset 1px 0 0 var(--border); }
+.ide .report th.col-actions { background: var(--surface-2); }
+/* (UX-8) a side drawer opened from the page header (details.drawer): Create account on Users */
+.drawer { display: inline-block; }
+.drawer > summary { list-style: none; cursor: pointer; }
+.drawer > summary::-webkit-details-marker { display: none; }
+.drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(26rem, 100vw); overflow-y: auto; padding: 16px 18px 24px;
+  background: var(--surface); color: var(--text); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); text-align: left; }
+.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
+.drawer-head h2 { margin: 0; font-size: 16px; }
+.drawer-panel .buttons { justify-content: flex-end; }

package/public/builder.js

@@ -508,6 +508,38 @@
       const dirty = () => save.classList.add('is-dirty');
       form.addEventListener('input', dirty);
       form.addEventListener('change', dirty);
+      // (UX-2) Ctrl+S saves; leaving with unsaved changes asks first (saving doesn't)
+      let submitting = false;
+      form.addEventListener('submit', () => (submitting = true));
+      document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && !e.altKey && e.key.toLowerCase() === 's' && !e.target.closest?.('.ws, dialog')) {
+          e.preventDefault();
+          form.requestSubmit();
+        }
+      });
+      window.addEventListener('beforeunload', (e) => {
+        if (!submitting && save.classList.contains('is-dirty')) {
+          e.preventDefault();
+          e.returnValue = '';
+        }
+      });
+    }
+    // (UX-2) on a short window the gallery is only its tabs: choosing a tab opens it, choosing the open one folds it
+    const gallery = document.querySelector('.pd-gallery');
+    if (gallery) {
+      const short = window.matchMedia('(max-height: 800px)');
+      const apply = () => gallery.classList.toggle('is-folded', short.matches && store.get('gallery') !== 'open');
+      apply();
+      short.addEventListener('change', apply);
+      gallery.addEventListener('click', (e) => {
+        const t = e.target.closest('[role=tab]');
+        if (!t || !short.matches) return;
+        const folded = gallery.classList.contains('is-folded');
+        const wasActive = t.getAttribute('aria-selected') === 'true';
+        const open = folded || !wasActive;
+        store.set('gallery', open ? 'open' : null);
+        gallery.classList.toggle('is-folded', !open);
+      }, true); // before the tabs switch, so the tab that was open is known
     }
   }
 
@@ -1011,7 +1043,41 @@
     setupQueryCanvas();
     setupThemePreview();
     setupTabs();
+    // (UX-4) Administration: filter the utilities by their text; sections without a match hide
+    const admQ = document.querySelector('[data-adm-filter]');
+    if (admQ) {
+      admQ.closest('.adm-filter').hidden = false;
+      const page = admQ.closest('.adm');
+      const none = page.querySelector('.adm-none');
+      admQ.addEventListener('input', () => {
+        const q = admQ.value.trim().toLowerCase();
+        let any = false;
+        for (const sec of page.querySelectorAll('.adm-section')) {
+          let shown = 0;
+          for (const li of sec.querySelectorAll('li')) {
+            const hit = !q || li.textContent.toLowerCase().includes(q);
+            li.hidden = !hit;
+            if (hit) shown++;
+          }
+          sec.hidden = !shown;
+          if (shown) any = true;
+        }
+        none.hidden = any;
+      });
+    }
     for (const tree of document.querySelectorAll('.pd-tree')) setupTree(tree);
+    // (UX-12) a node's type text only when it fits whole: the name comes first (the icon and tooltip tell the type)
+    const fitNotes = () => {
+      for (const n of document.querySelectorAll('.pd-tree .pd-note')) {
+        n.classList.remove('is-cut');
+        if (n.scrollWidth > n.clientWidth + 1) n.classList.add('is-cut');
+      }
+    };
+    fitNotes();
+    if ('ResizeObserver' in window) {
+      const pane = document.querySelector('.pd-tree')?.closest('.pd-pane');
+      if (pane) new ResizeObserver(() => requestAnimationFrame(fitNotes)).observe(pane);
+    }
     for (const tree of document.querySelectorAll('.pd-tree[data-tree-menu]')) setupTreeMenu(tree);
     setupProperties();
     setupCanvas();
@@ -1206,7 +1272,30 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
     sync();
   });
 
-  const picker = document.querySelector('form.create-schema select[name="schema"]');
+  // (UX-7) the footer's summary follows the page types, the sign-in and the language
+  const awForm = document.querySelector('form.aw-form');
+  const summary = document.getElementById('aw-summary');
+  const sum = () => {
+    const tpl = document.getElementById('aw-summary-pages');
+    if (!awForm || !summary || !tpl) return;
+    let parts;
+    if (tpl.dataset.schema) {
+      let n = 1;
+      awForm.querySelectorAll('#aw-pages select').forEach((sel) => (n += Number(sel.selectedOptions[0]?.dataset.pages ?? 0)));
+      const chart = awForm.querySelector('#aw-pages input[name="chart"]');
+      if (chart?.checked && n > 1) n += 1;
+      parts = [n === 1 ? tpl.dataset.one : tpl.dataset.many.replace('{n}', String(n))];
+    } else parts = [tpl.dataset.new];
+    for (const name of ['authentication', 'language']) {
+      const sel = awForm.elements.namedItem(name);
+      const text = sel?.selectedOptions?.[0]?.textContent?.replace(/\s*\([a-z-]+\)$/i, '');
+      if (text) parts.push(text);
+    }
+    summary.textContent = parts.join(' · ');
+  };
+  awForm?.addEventListener('change', sum);
+
+  const picker = document.querySelector('select[name="schema"][form="aw-schema-get"]');
   const pages = document.getElementById('aw-pages');
   const hidden = document.getElementById('aw-schema-fields');
   if (!picker || !pages || !hidden) return;
@@ -1231,12 +1320,13 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
       if (alias && !alias.hasAttribute('data-edited')) alias.value = doc.getElementById('f_alias')?.value ?? alias.value;
       history.replaceState(null, '', url);
       document.getElementById('aw-pages')?.removeAttribute('aria-busy');
+      sum();
     } catch {
       picker.form.submit();
     }
   });
   // the button is for pages without JavaScript
-  picker.form.querySelector('button')?.setAttribute('hidden', '');
+  document.querySelector('button[form="aw-schema-get"]')?.setAttribute('hidden', '');
 })();
 
 // (sprint 101, DA-12) SQL Workshop › Scheduling: the schedule builder's five fields and the common schedules fill the
@@ -1335,3 +1425,12 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
 })();
 
 // (sprint 127) Passkeys: the [data-passkey] buttons are handled by app.js (sprint 131), which every builder page loads too.
+
+// (UX-8) a side drawer (details.drawer): Close, Escape and a click outside close it; the first field gets the focus
+document.querySelectorAll('details.drawer').forEach((d) => {
+  const close = () => { d.open = false; d.querySelector('summary')?.focus(); };
+  d.querySelector('[data-drawer-close]')?.addEventListener('click', close);
+  d.addEventListener('toggle', () => { if (d.open) d.querySelector('.drawer-panel input:not([type=hidden]), .drawer-panel select, .drawer-panel textarea')?.focus(); });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && d.open) close(); });
+  document.addEventListener('click', (e) => { if (d.open && !d.contains(e.target)) d.open = false; });
+});

package/public/palette.js

@@ -18,15 +18,22 @@
   if (/^\/builder\/sql\/./.test(path) && !/\/(panel|navigator|action)$/.test(path)) {
     const title = document.title.replace(/ · Builder$/, '');
     const href = path + location.search;
-    const list = (store.get('sw.recent') || []).filter((r) => r && r.href !== href);
+    // (UX-14) one entry per page (its path): opened again with other parameters, the newest wins
+    const list = (store.get('sw.recent') || []).filter((r) => r && typeof r.href === 'string' && r.href.split('?')[0] !== path);
     list.unshift({ href, title });
     store.set('sw.recent', list.slice(0, 8));
   }
   const recent = document.querySelector('[data-lp-recent]');
   if (recent) {
     const list = store.get('sw.recent') || [];
+    // (UX-14) not the page you are on, not what is pinned already, each path once
+    const pinned = new Set([...document.querySelectorAll('.lp-pins .lp-chips:not([data-lp-recent]) a[href]')].map((a) => a.getAttribute('href').split('?')[0]));
+    const seen = new Set([path]);
     for (const r of list) {
       if (typeof r?.href !== 'string' || !r.href.startsWith('/builder/')) continue;
+      const p = r.href.split('?')[0];
+      if (seen.has(p) || pinned.has(p)) continue;
+      seen.add(p);
       const li = document.createElement('li');
       const a = document.createElement('a');
       a.href = r.href;

package/public/worksheet.css

@@ -3,7 +3,7 @@
    screens: navigator | editor over output tabs, filling the window, with a status bar at the bottom. */
 .ws-page { display: flex; flex-direction: column; padding: 8px 10px 0; background: var(--bg); }
 .ws-page > .sw-tabs { margin-bottom: 6px; }
-.ws { --ws-nav: 280px; --ws-out: 42vh; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface);
+.ws { --ws-nav: 280px; --ws-out: 45%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface);
   border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
 .ws-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }
 .ws-nav { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
@@ -32,7 +32,7 @@
 .ws-obj-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 8px 34px; }
 .ws-obj-actions .btn { font-size: 11px; padding: 1px 6px; }
 
-.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; container-type: inline-size; }
 .ws-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
 .ws-toolbar .btn { display: inline-flex; align-items: center; gap: 4px; }
 .ws-toolbar .icon { width: 15px; height: 15px; }
@@ -99,12 +99,16 @@
   .js .ide-full .ws-editor .ce { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; border: 0; border-radius: 0; }
   .js .ide-full .ws-editor .ce-main { min-height: 0; }
   .js .ide-full .ws-editor .ce textarea.ce-input { height: 100%; min-height: 0; resize: none; }
-  .js .ide-full .ws-output { flex: 0 0 var(--ws-out); }
+  .js .ide-full .ws-output { flex: 0 1 var(--ws-out); }
+  /* (UX-1) the editor keeps at least ten lines; an empty output is only its tab strip until a run */
+  .js .ide-full .ws-editor { min-height: 13.5rem; }
+  .js .ide-full .ws-output[data-empty] { flex: 0 0 auto; }
+  .js .ide-full .ws-output[data-empty] .ws-pane { display: none; }
   .js .ide-full .ws-pane { flex: 1 1 auto; }
   .js .ide-full .ws-nav { overflow: hidden; }
 }
 @media (max-width: 899px) {
-  .ws-toolbar .btn span:not(.sr-only) { display: none; }
+  .ws-toolbar .btn span:not(.sr-only):not(.ws-dots) { display: none; }
   .ws-toolbar .btn-hot span:not(.sr-only) { display: inline; }
 }
 /* fullscreen: only the editor and its toolbar */
@@ -299,3 +303,34 @@ details.menu.obj-menu > summary::before, details.menu.obj-menu > summary::after
 .ws-txn-badge[data-state="open"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); font-weight: 600; }
 .ws-txn-badge[data-state="aborted"] { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); font-weight: 600; }
 .ws-txn-alert { margin: 6px 8px; }
+
+/* (UX-1) one toolbar row: the run buttons, Suggest / Check, Commit mode, fullscreen and a ⋯ menu with the rest */
+/* it fits on one row; an open transaction (badge, Commit, Rollback) may take a second one */
+.ws-toolbar > * { flex: none; }
+/* the commit mode's options name it (Autocommit / Transaction): no label beside the select */
+.ws-toolbar .ws-txn .ws-runas > span { display: none; }
+@container (max-width: 950px) {
+  .ws-toolbar .btn:not(.btn-hot) > span:not(.sr-only):not(.ws-dots) { display: none; }
+}
+@container (max-width: 640px) {
+  .ws-toolbar > * { flex: 0 1 auto; min-width: 0; }
+  .ws-toolbar .ws-txn { flex-wrap: wrap; }
+}
+.ws-more .menu-panel { min-width: 18rem; max-height: calc(100dvh - 190px); overflow: auto; }
+/* with script the worksheet tabs name the file: the file menu is its icon */
+.js .ws-toolbar .ws-file-name { display: none; }
+.ws-more-tools { display: flex; flex-direction: column; gap: 2px; }
+.ws-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none;
+  color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.ws-menu-item:hover, .ws-menu-item:focus-visible { background: var(--surface-2); }
+.ws-menu-item .icon { width: 15px; height: 15px; }
+.ws-menu-item kbd { margin-left: auto; font-size: 11.5px; color: var(--muted); }
+.ws-more-tools .ws-check { padding: 6px 8px; }
+.ws-more-head { display: block; margin-bottom: 4px; }
+/* the code editor's hint bar under the editor: only while it has something to say (Check's result) */
+.ws-editor .ce-bar:not(:has(.ce-msg:not(:empty))) { display: none; }
+.ws-editor .ce-bar :is(.ce-hint, .ce-suggest, .ce-check) { display: none; }
+/* (UX-1) who the statements run as: a chip at the right of the status bar */
+.ws-status-run { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
+.ws-runas-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; }
+.ws-runas-chip select { padding: 1px 22px 1px 6px; min-height: 0; font-size: 12.5px; }