pgkiln 0.88.0 → 0.89.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.
@@ -548,6 +558,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 +594,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
@@ -1072,6 +1085,13 @@ 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.
+
 - **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 +1107,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.
 
@@ -1790,7 +1811,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 +1856,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 +2142,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 +2155,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 +2245,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 +2442,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.89.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,54 @@ 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; }

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();

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; }

package/public/worksheet.js

@@ -104,11 +104,15 @@
     out.dataset.active = key;
   };
   show(out.dataset.active || 'result');
+  // (UX-1) before a run the output is only its tab strip; choosing a tab opens it
   out.querySelector('[role=tablist]').addEventListener('click', (e) => {
     const t = e.target.closest('[role=tab]');
-    if (t) show(t.dataset.wsTab);
+    if (!t) return;
+    delete out.dataset.empty;
+    show(t.dataset.wsTab);
   });
   out.querySelector('[role=tablist]').addEventListener('keydown', (e) => {
+    delete out.dataset.empty;
     const k = tabs.findIndex((t) => t.getAttribute('aria-selected') === 'true');
     const next = { ArrowRight: k + 1, ArrowLeft: k - 1, Home: 0, End: tabs.length - 1 }[e.key];
     if (next === undefined) return;
@@ -552,6 +556,16 @@
     (k === 'h' ? fr : k === 'g' ? bar.querySelector('[data-ws-goto]') : fq).focus();
   };
   form.querySelector('[data-ws-find]').addEventListener('click', () => openFind('f'));
+  // (UX-1) Suggest and Check in the toolbar: the code editor's own buttons (its bar below the editor stays hidden
+  // until it has a message, such as Check's result)
+  const ceButton = (cls) => form.querySelector(`.ws-editor .${cls}`);
+  for (const [attr, cls] of [['data-ws-suggest', 'ce-suggest'], ['data-ws-check', 'ce-check']]) {
+    const btn = form.querySelector(`[${attr}]`);
+    btn?.addEventListener('click', () => ceButton(cls)?.click());
+    const sync = () => { if (btn) btn.hidden = !ceButton(cls) || ceButton(cls).hidden; };
+    sync();
+    window.addEventListener('load', sync);
+  }
   form.querySelector('[data-ws-format]').addEventListener('click', format);
   form.querySelector('[data-ws-case]').addEventListener('click', convertCase);
   bar.addEventListener('keydown', (e) => {

package/src/builder/designer.ts

@@ -123,7 +123,7 @@ export async function designerRoutes(app: FastifyInstance) {
     // (sprint 90) a commented-out component: struck through in the tree, Uncomment in its menu
     const commented = (r: any) => (r.build_option === 'COMMENTED_OUT' ? raw(' data-commented') : '');
     const leaf = (k: string, r: any, ic: Raw | '', label: string, note = '') =>
-      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
+      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}" title="${note ? `${label} (${note})` : label}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
     const folder = (label: string, children: Raw[] | Raw, open = true) =>
       html`<li${open ? '' : raw(' data-collapsed')}><span class="pd-node pd-folder"><span class="pd-label">${label}</span></span><ul>${children}</ul></li>`;
     const none = (text: string) => html`<li class="pd-empty">${text}</li>`;
@@ -136,7 +136,7 @@ export async function designerRoutes(app: FastifyInstance) {
       const bySlot = ['region', ...TOP_SLOTS, ...BOTTOM_SLOTS].map((sl) => [sl, buttons.filter((b) => (b.slot ?? 'region') === sl)] as const).filter(([, list]) => list.length);
       const kids = [...(items.length ? [folder(tx('pd.tree.items'), items.map(itemLeaf))] : []),
         ...bySlot.map(([sl, list]) => folder(sl === 'region' ? tx('pd.tree.buttons') : tx('pd.tree.buttons_at', { slot: slotLabel(sl) }), list.map(buttonLeaf)))];
-      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
+      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}" title="${regionTitle(r)} (${r.type})"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
     };
     // (sprint 77, APEX: the rendering tree by display position) the page template's positions, and others in use
     const treeSide = p.page_template === 'left_side_column' ? 'left' : p.page_template === 'right_side_column' ? 'right' : null;

package/src/builder/gallery.ts

@@ -9,7 +9,7 @@ import { migrate } from '../migrate.ts';
 import { clientIp, logActivity } from '../session.ts';
 import { openBlueprint } from './blueprints.ts';
 import { isAdmin } from './locks.ts';
-import { back, BASE, csrf, developer, flash, send, shell, type Req } from './ui.ts';
+import { back, BASE, csrf, developer, flash, pageHeader, send, shell, type Req } from './ui.ts';
 import { currentWorkspace, inWorkspaceSql, placeApp } from './workspaces.ts';
 import { workspacesChanged } from '../workspace-db.ts';
 import { scopedTx as tx, type BuilderKey } from './i18n.ts';
@@ -104,7 +104,7 @@ export async function galleryRoutes(app: FastifyInstance) {
     const tabs = html`<nav class="gal-tabs segmented" aria-label="${tx('gal.kinds')}">${TABS.map(([t, l]) =>
       html`<a href="${BASE}/gallery?tab=${t}${q ? `&q=${encodeURIComponent(q)}` : ''}"${tab === t ? raw(' aria-current="page"') : ''}>${tx(l)} <span class="gal-count">${counts[t]}</span></a>`)}</nav>`;
     const blueprintCard = (kind: 'starters' | 'utilities') => (x: Starter) => card(x.icon, x.title, 'pgkiln', x.description,
-      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">${tx('gal.install')}</button></form>`);
+      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-sm">${tx('gal.install')}</button></form>`);
     const cards =
       tab === 'samples'
         ? samples.filter(matches).map((x) => {
@@ -115,13 +115,13 @@ export async function galleryRoutes(app: FastifyInstance) {
                     ? html`<a class="btn btn-sm" href="${BASE}/apps/${it.id}">${tx('gal.edit')}</a>`
                     : html`<span class="muted small">${tx('gal.other_workspace')}</span>`}`
                 : admin
-                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="${tx('gal.confirm_install', { title: x.title })}">${tx('gal.install')}</button></form>`
+                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-sm" data-confirm="${tx('gal.confirm_install', { title: x.title })}">${tx('gal.install')}</button></form>`
                   : html`<span class="muted small">${tx('gal.admin_installs')}</span>`);
           })
         : tab === 'starters' || tab === 'utilities'
           ? (tab === 'starters' ? starters : utilities).filter(matches).map(blueprintCard(tab))
           : custom.filter(matches).map((x) => card('copy', x.name, tx('gal.this_workspace'), x.description ?? tx('gal.boilerplate_desc'),
-              html`<a class="btn btn-hot btn-sm" href="${BASE}/create?boilerplate=${x.id}">${tx('gal.create_from')}</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">${tx('gal.edit')}</a>`));
+              html`<a class="btn btn-sm" href="${BASE}/create?boilerplate=${x.id}">${tx('gal.create_from')}</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">${tx('gal.edit')}</a>`));
     const empty = q && counts[tab]
       ? html`<p class="muted">${tx.rich('gal.no_match', { q: html`<strong>${q}</strong>` })} <a href="${BASE}/gallery?tab=${tab}">${tx('gal.show_all')}</a></p>`
       : tab === 'custom'
@@ -129,13 +129,13 @@ export async function galleryRoutes(app: FastifyInstance) {
         : html`<p class="muted">${tx('gal.empty')}</p>`;
     const intro = tx(({ samples: 'gal.intro.samples', starters: 'gal.intro.starters', utilities: 'gal.intro.utilities', custom: 'gal.intro.custom' } as const)[tab]);
     const main = html`<div class="gal">
+      ${pageHeader(tx('rail.gallery'))}
       <div class="gal-bar">
         <form class="ab-search gal-search" role="search" method="get" action="${BASE}/gallery"><label class="sr-only" for="gal-q">${tx('gal.search')}</label>${icon('search')}
           <input type="hidden" name="tab" value="${tab}">
           <input id="gal-q" name="q" type="search" placeholder="${tx('gal.search')}" autocomplete="off" value="${q}" data-filter-list=".gal [data-filter-row]"></form>
         ${tabs}
       </div>
-      <h1 class="sr-only">${tx('rail.gallery')}</h1>
       <p class="muted">${intro}</p>
       ${cards.length ? html`<div class="gal-grid">${cards}</div>` : empty}
     </div>`;