pgkiln 0.88.0 → 0.89.0

package/src/builder/ui.ts

@@ -50,7 +50,24 @@ export async function send(reply: FastifyReply, s: Session, body: string) {
   return reply.type('text/html').send(body);
 }
 
-export type Section = 'home' | 'apps' | 'users' | 'sql' | 'developers' | 'gallery' | 'reporter' | 'team';
+export type Section = 'home' | 'apps' | 'users' | 'sql' | 'developers' | 'gallery' | 'reporter' | 'team' | 'admin';
+
+/**
+ * (UX-3) The rail's current section, from the request's path: one rule for every builder page, so a page doesn't have
+ * to name it (and can't name the wrong one). Administration: the workspace utilities and what they lead to.
+ */
+const ADMIN_PATHS = /^\/builder\/(utilities|users|developers|workspaces?|workspace-(?:import|export|files|credentials)|instance|installation|mail|mail-queue|network|dashboard|telemetry|ui-defaults|icons|vector-providers|ai|sso|backups|db-users|remote-servers|remote-databases|rest-catalogs|app-groups|cross-app)(?:[/?#]|$)/;
+export function sectionOf(path: string | undefined, fallback: Section): Section {
+  if (!path) return fallback;
+  if (/^\/builder\/home(?:[/?#]|$)/.test(path)) return 'home';
+  if (/^\/builder\/sql(?:[/?#]|$)/.test(path)) return 'sql';
+  if (/^\/builder\/(gallery)(?:[/?#]|$)/.test(path)) return 'gallery';
+  if (/^\/builder\/reporter(?:[/?#]|$)/.test(path)) return 'reporter';
+  if (/^\/builder\/team(?:[/?#]|$)/.test(path)) return 'team';
+  if (ADMIN_PATHS.test(path)) return 'admin';
+  if (/^\/builder\/(apps|pages|create|import|blueprints|working-copies)(?:[/?#]|$)/.test(path)) return 'apps';
+  return fallback;
+}
 
 // ------------------------------------------------------------------ builder head
 // Builder-only stylesheets and scripts, loaded on every builder page after
@@ -100,14 +117,15 @@ const initials = (name: string) => name.replace(/[^\p{L}\p{N}]+/gu, ' ').trim().
  * Administration, Help, the developer's menu), an environment banner (091), a compact toolbar with
  * back button and breadcrumb, then the page itself.
  */
-export function shell(s: Session, title: string, crumbs: [string, string?][], main: Raw, section: Section = 'apps', opts: ShellOpts = {}) {
+export function shell(s: Session, title: string, crumbs: [string, string?][], main: Raw, pageSection: Section = 'apps', opts: ShellOpts = {}) {
+  // (UX-3) the rail's current entry follows the request's path; a page's own choice only where the path says nothing
+  const section = sectionOf(s.path, pageSection);
+  const railLabels = s.state.__RAIL === 'labels';
   const ok = takeFlash(s, '__FLASH');
   const err = takeFlash(s, '__ERROR');
   const theme = builderTheme(s);
   // (sprint 121) the developer's builder language (i18n.ts); known English breadcrumb labels are translated here
   const tx = tr(s);
-  // the application these pages belong to (for the Search entry), from the breadcrumb
-  const appId = crumbs.map(([, href]) => /^\/builder\/apps\/(\d+)$/.exec(href ?? '')?.[1]).find(Boolean);
   const rail = (key: Section | 'search' | 'help', href: string, ic: string, label: string, extra: Raw | '' = '') =>
     html`<li><a href="${href}" class="rail-link" title="${label}"${section === key ? raw(' aria-current="page"') : ''}${extra}>${bicon(ic)}<span class="rail-label">${label}</span></a></li>`;
   // (sprint 74) the default-password warning: on the Workspace home (sprint 109), the App Builder home and the Developers page only, until
@@ -131,40 +149,16 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
         ${rail('gallery', `${BASE}/gallery`, 'package', tx('rail.gallery'))}
         ${rail('reporter', `${BASE}/reporter`, 'pie-chart', tx('rail.reporter'))}
         ${rail('team', `${BASE}/team`, 'kanban', tx('rail.team'))}
-        ${appId ? rail('search', `${BASE}/apps/${appId}/search`, 'search', tx('rail.search_app')) : ''}
+        ${rail('admin', `${BASE}/utilities`, 'settings', tx('rail.admin'))}
       </ul>
       <ul class="rail-list rail-bottom">
-        <li><details class="menu rail-user rail-admin">
-          <summary class="rail-link${section === 'users' || section === 'developers' ? ' rail-open' : ''}" title="${tx('rail.admin')}"${section === 'users' || section === 'developers' ? raw(' aria-current="page"') : ''}>${icon('settings')}<span class="rail-label">${tx('rail.admin')}</span></summary>
-          <div class="menu-panel">
-            <div class="menu-section menu-links">
-              <strong>${tx('rail.admin')}</strong>
-              <a href="${BASE}/utilities">${icon('grid')} ${tx('admin.utilities')}</a>
-            </div>
-            ${s.workspace?.admin ? html`<div class="menu-section menu-links">
-              <span class="small muted">${tx('admin.manage_service', { name: s.workspace.name })}</span>
-              <a href="${BASE}/workspaces/${s.workspace.id}#service">${icon('bell')} ${tx('admin.ws_message')}</a>
-              <a href="${BASE}/workspaces/${s.workspace.id}#preferences">${icon('sliders-horizontal')} ${tx('admin.ws_prefs')}</a>
-              <a href="${BASE}/workspaces/${s.workspace.id}#links">${icon('external-link')} ${tx('admin.ext_links')}</a>
-              <a href="${BASE}/workspaces/${s.workspace.id}/utilization">${icon('chart')} ${tx('admin.utilization')}</a>
-              <a href="${BASE}/mail-queue">${icon('inbox')} ${tx('admin.mail_queue')}</a>
-              <a href="${BASE}/network">${icon('globe')} ${tx('admin.network')}</a>
-              <a href="${BASE}/workspaces/${s.workspace.id}">${icon('layers')} ${tx('admin.ws_devs')}</a>
-            </div>` : ''}
-            <div class="menu-section menu-links">
-              <a href="${BASE}/users">${icon('user')} ${tx('admin.users')}</a>
-              <a href="${BASE}/developers">${icon('users')} ${tx('admin.developers')}</a>
-              <a href="${BASE}/dashboard">${icon('activity')} ${tx('admin.monitor')}</a>
-              ${s.instanceAdmin ? html`<a href="${BASE}/db-users">${icon('key')} ${tx('admin.db_users')}</a>` : ''}
-              <a href="${BASE}/developers">${icon('key')} ${tx('admin.change_my_password')}</a>
-            </div>
-          </div></details></li>
         ${s.workspace?.links?.length ? html`<li><details class="menu rail-user rail-admin rail-extensions">
           <summary class="rail-link" title="${tx('rail.extensions')}">${icon('puzzle')}<span class="rail-label">${tx('rail.extensions')}</span></summary>
           <div class="menu-panel"><div class="menu-section menu-links"><strong>${tx('rail.extensions')}</strong>
             ${s.workspace.links.map((l) => html`<a href="${l.url}" target="_blank" rel="noopener noreferrer"${l.description ? html` title="${l.description}"` : ''}>${icon('external-link')} ${l.label}</a>`)}
           </div></div></details></li>` : ''}
         ${rail('help', 'https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md', 'help', tx('rail.help'), raw(' target="_blank" rel="noopener"'))}
+        <li><form method="post" action="${BASE}/rail">${csrf(s)}<button class="rail-link rail-toggle" name="labels" value="${railLabels ? '' : 'labels'}" title="${tx(railLabels ? 'rail.labels_hide' : 'rail.labels_show')}" aria-pressed="${railLabels ? 'true' : 'false'}">${bicon(railLabels ? 'left' : 'right')}<span class="rail-label">${tx(railLabels ? 'rail.labels_hide' : 'rail.labels_show')}</span></button></form></li>
         <li><details class="menu rail-user">
           <summary class="rail-avatar${weak ? ' has-dot' : ''}" title="${weak ? tx('user.weak_title', { user: s.username }) : s.username}"><span aria-hidden="true">${initials(s.username ?? '')}</span><span class="sr-only">${tx(weak ? 'user.account_weak' : 'user.account', { user: s.username })}</span></summary>
           <div class="menu-panel">
@@ -213,7 +207,7 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
       </footer>
     </div>
     <div id="builder-texts" hidden data-texts="${JSON.stringify(clientTexts(tx.lang))}"></div>`,
-    `builder-body ide${opts.full ? ' ide-full' : ''}`,
+    `builder-body ide${opts.full ? ' ide-full' : ''}${railLabels ? ' rail-labels' : ''}`,
     {},
     builderHead(),
     { theme, lang: tx.lang },
@@ -225,6 +219,23 @@ export const BANNER_COLORS = ['red', 'orange', 'yellow', 'green', 'teal', 'blue'
 
 export const csrf = (s: Session) => html`<input type="hidden" name="__csrf" value="${s.csrf_token}">`;
 
+/**
+ * (UX-5) A builder page's header: its one heading, its one primary action (accent), a few secondary actions and a ⋯ menu
+ * for the rest. Every builder page should have exactly one H1 and one primary button.
+ */
+export function pageHeader(title: string | Raw, o: { sub?: Raw | string; primary?: [href: string, label: string, ic?: string]; secondary?: [href: string, label: string, ic?: string][]; more?: [href: string, label: string, ic?: string][]; moreLabel?: string } = {}) {
+  const link = ([href, label, ic]: [string, string, string?], cls: string) => html`<a class="${cls}" href="${href}">${ic ? icon(ic) : ''}<span>${label}</span></a>`;
+  return html`<div class="page-head">
+    <div class="page-head-title"><h1>${title}</h1>${o.sub ? html`<p class="page-head-sub muted">${o.sub}</p>` : ''}</div>
+    <div class="page-head-actions">
+      ${(o.secondary ?? []).map((a) => link(a, 'btn'))}
+      ${o.more?.length ? html`<details class="menu page-head-more"><summary class="btn btn-icon" title="${o.moreLabel ?? ''}"><span aria-hidden="true">⋯</span><span class="sr-only">${o.moreLabel ?? ''}</span></summary>
+        <div class="menu-panel align-right"><div class="menu-section menu-links">${o.more.map(([href, label, ic]) => html`<a href="${href}">${ic ? icon(ic) : ''} ${label}</a>`)}</div></div></details>` : ''}
+      ${o.primary ? link(o.primary, 'btn btn-hot') : ''}
+    </div>
+  </div>`;
+}
+
 export function input(name: string, label: string, value: unknown, opts: { type?: string; help?: string; required?: boolean; placeholder?: string; auto?: string } = {}) {
   return html`<div class="field"><label class="label" for="f_${name}">${label}</label>
     <input id="f_${name}" name="${name}" type="${opts.type ?? 'text'}" value="${value ?? ''}"${opts.required ? raw(' required') : ''} placeholder="${opts.placeholder}"${opts.auto ? raw(` autocomplete="${opts.auto}"`) : ''}>
@@ -243,7 +254,7 @@ export const region = (title: string, body: Raw | Raw[], extra: Raw | '' = '', i
   html`<section class="region region-standard"${id ? raw(` id="${id.replace(/[^a-z0-9-]/g, '')}"`) : ''}><header class="region-header"><h2>${title}</h2>${extra}</header><div class="region-body">${body}</div></section>`;
 
 /** Title and tabs of an application's builder pages (Pages, Shared Components, …), in the session's builder language. */
-export const appHeader = (a: any, active: 'pages' | 'shared' | 'settings' | 'activity' | 'api' | 'search' | 'advisor' | 'utilities', s?: Pick<Session, 'state'>) => {
+export const appHeader = (a: any, active: 'pages' | 'shared' | 'settings' | 'activity' | 'api' | 'search' | 'advisor' | 'utilities', s?: Pick<Session, 'state'>, primary?: [href: string, label: string, ic: string]) => {
   const tx = tr(s);
   const tab = (key: typeof active, href: string, ic: string, label: string) =>
     html`<a class="ide-tab" href="${href}"${active === key ? raw(' aria-current="page"') : ''}>${bicon(ic)}<span>${label}</span></a>`;
@@ -256,7 +267,9 @@ export const appHeader = (a: any, active: 'pages' | 'shared' | 'settings' | 'act
           <a class="btn btn-sm" href="${BASE}/apps/${a.id}/backups">${icon('history')} ${tx('app.head.backups')}</a>
           <a class="btn btn-sm" href="${BASE}/apps/${a.id}/availability">${icon('power')} ${tx('app.head.availability')}</a>
           <a class="btn btn-sm" href="${BASE}/apps/${a.id}/export">${icon('download')} ${tx('app.head.export')}</a>
-          <a class="btn btn-sm btn-run" href="/a/${a.alias}" target="_blank" rel="noopener">${icon('play')} ${tx('common.run')}</a>
+          <!-- (UX-5) one primary action: the page's own (Create page on the Pages tab), else Run -->
+          <a class="btn btn-sm${primary ? '' : ' btn-run'}" href="/a/${a.alias}" target="_blank" rel="noopener">${icon('play')} ${tx('common.run')}</a>
+          ${primary ? html`<a class="btn btn-sm btn-hot" href="${primary[0]}">${icon(primary[2])} ${primary[1]}</a>` : ''}
         </div></div>
       <nav class="ide-tabs" aria-label="${tx('app.head.tabs')}">
         ${tab('pages', `${BASE}/apps/${a.id}`, 'pages', tx('app.tab.pages'))}
@@ -323,6 +336,7 @@ export async function developer(req: Req, reply: FastifyReply) {
   // (sprint 121) a session from before the developer's language was kept in it: the stored choice (language.ts)
   if (s.state.__BLANG === undefined) await loadLanguage(s);
   setRequestTranslator(tr(s)); // (sprint 164) scopedTx in this request's handler and helpers
+  s.path = req.url; // (UX-3) the rail's section
   // (sprint 126, SEC-2) the two-factor policy: a banner during the grace period, then only the Security page until they enrol
   delete s.state.__MFA_DUE;
   const admin = await isAdmin(s.username);

package/src/builder/worksheet.ts

@@ -561,6 +561,7 @@ async function worksheet(req: Req, reply: FastifyReply) {
 
   const toolBtn = (m: RunMode, ic: string, label: string, key: string, hot = false) =>
     html`<button class="btn btn-sm${hot ? ' btn-hot' : ''}" name="mode" value="${m}" title="${label} (${key})" data-ws-key="${key}">${icon(ic)}<span>${label}</span></button>`;
+  const runsAsText = `${tx('ws.runs_as', { who: String(runsAs) })}${searchSchema ? `; ${tx('ws.search_path_plain', { schema: searchSchema })}` : ''}`;
   const main = html`${chartCss ? html`<style nonce="${req.cspNonce}">${raw(chartCss.replace(/</g, ''))}</style>` : ''}<div class="ws-page">
     <h1 class="sr-only">${tx('ws.title')}</h1>
     ${workshopTabs('sql', s)}
@@ -615,20 +616,9 @@ async function worksheet(req: Req, reply: FastifyReply) {
           ${toolBtn('script', 'file', tx('ws.run_script'), 'F5')}
           ${toolBtn('explain', 'route', tx('ws.tab.explain'), 'F10')}
           ${toolBtn('autotrace', 'activity', tx('ws.tab.autotrace'), 'F6')}
-          <label class="ws-check"><input type="checkbox" name="continue_on_error"${continueOnError ? raw(' checked') : ''}> ${tx('ws.continue')}</label>
+          <button type="button" class="btn btn-sm btn-icon" data-ws-suggest title="${tx('ws.suggest_title')}" hidden>${icon('list')}<span class="sr-only">${tx('ws.suggest')}</span></button>
+          <button type="button" class="btn btn-sm btn-icon" data-ws-check title="${tx('ws.check_title')}" hidden>${icon('check-circle')}<span class="sr-only">${tx('ws.check')}</span></button>
           <span class="ws-spacer"></span>
-          <button type="button" class="btn btn-sm btn-icon" data-ws-format title="${tx('ws.format_title')}" hidden>${icon('sliders')}<span class="sr-only">${tx('ws.format')}</span></button>
-          <button type="button" class="btn btn-sm btn-icon" data-ws-case title="${tx('ws.case_title')}" hidden><span aria-hidden="true" class="ws-aa">Aa</span><span class="sr-only">${tx('ws.case')}</span></button>
-          <button type="button" class="btn btn-sm btn-icon" data-ws-find title="${tx('ws.find_title')}" hidden>${icon('search')}<span class="sr-only">${tx('ws.find')}</span></button>
-          <a class="btn btn-sm btn-icon" href="${BASE}/sql/load?schema=${encodeURIComponent(navSchema)}" title="${tx('ws.load_title')}">${icon('upload')}<span class="sr-only">${tx('ws.load')}</span></a>
-          <details class="menu ws-keys"><summary class="btn btn-sm btn-icon" title="${tx('ws.keys')}">?<span class="sr-only">${tx('ws.keys')}</span></summary>
-            <div class="menu-panel align-right"><div class="menu-section"><dl class="ws-keylist">
-              <dt>Ctrl+Enter</dt><dd>${tx('ws.run_statement')}</dd><dt>F5</dt><dd>${tx('ws.run_script')}</dd><dt>F10</dt><dd>${tx('ws.tab.explain')}</dd><dt>F6</dt><dd>${tx('ws.tab.autotrace')}</dd>
-              <dt>Ctrl+S</dt><dd>${tx('ws.key.save')}</dd><dt>Ctrl+F7</dt><dd>${tx('ws.format')}</dd><dt>Ctrl+B</dt><dd>${tx('ws.case')}</dd><dt>Ctrl+F / Ctrl+H</dt><dd>${tx('ws.key.find')}</dd>
-              <dt>Ctrl+G</dt><dd>${tx('ws.key.goto')}</dd><dt>Ctrl+/</dt><dd>${tx('ws.key.comment')}</dd><dt>Ctrl+Space</dt><dd>${tx('ws.key.suggest')}</dd><dt>F1</dt><dd>${tx('ws.key.help')}</dd><dt>Escape</dt><dd>${tx('ws.key.fullscreen')}</dd>
-            </dl>
-            <label class="ws-kwcase" hidden>${tx('ws.kwcase')} <select data-ws-kwcase><option value="lower">${tx('ws.lower')}</option><option value="upper">${tx('ws.upper')}</option></select></label>
-            <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#sql-workshop" target="_blank" rel="noopener" data-ws-help>${tx('ws.help')}</a></div></div></details>
           <span class="ws-txn" data-ws-txn data-state="${tState}" data-statements="${txn?.statements ?? 0}" data-started="${txn?.startedMs ?? ''}" data-last="${txn?.lastMs ?? ''}" data-idle="${txnIdleSeconds()}" data-note="${tNote ?? ''}" data-now="${Date.now()}" hidden>
             <label class="ws-runas"><span>${tx('ws.commit_label')}</span><select name="txn" data-ws-txn-mode title="${tx('ws.txn.mode_title')}">
               <option value="">${tx('ws.autocommit')}</option><option value="on"${txnOn ? raw(' selected') : ''}>${tx('ws.transaction')}</option></select></label>
@@ -636,17 +626,25 @@ async function worksheet(req: Req, reply: FastifyReply) {
             <button class="btn btn-sm" name="mode" value="commit" data-ws-txn-commit title="${tx('ws.txn.commit_title')}"${txn ? '' : raw(' disabled')}>${icon('check')}<span>${tx('ws.commit_label')}</span></button>
             <button class="btn btn-sm" name="mode" value="rollback" data-ws-txn-rollback title="${tx('ws.txn.rollback_title')}"${txn ? '' : raw(' disabled')}>${icon('undo')}<span>${tx('ws.rollback')}</span></button>
           </span>
-          <label class="ws-runas"><span>${tx('ws.run_as')}</span>
-            <select name="as_app" title="${tx('ws.run_as_title')}">
-              <option value="">${db === owner ? tx('ws.owner_conn') : tx('ws.ws_login')}</option>
-              ${apps.map((a) => html`<option value="${a.id}"${asApp?.id === a.id ? raw(' selected') : ''}>${a.name} (${a.db_role})</option>`)}
-            </select></label>
-          <button type="button" class="btn btn-sm btn-icon" data-ws-clear title="${tx('ws.clear_title')}" hidden>${icon('trash')}<span class="sr-only">${tx('ws.clear')}</span></button>
           <button type="button" class="btn btn-sm btn-icon" data-ws-fullscreen title="${tx('ws.fullscreen_title')}" aria-pressed="false" hidden>${bicon('expand')}<span class="sr-only">${tx('ws.fullscreen')}</span></button>
+          <!-- (UX-1) the rest of the tools in one menu, so the toolbar is one row and the editor keeps its height -->
+          <details class="menu ws-more"><summary class="btn btn-sm btn-icon" title="${tx('ws.more')}"><span aria-hidden="true" class="ws-dots">⋯</span><span class="sr-only">${tx('ws.more')}</span></summary>
+            <div class="menu-panel align-right"><div class="menu-section ws-more-tools">
+              <label class="ws-check"><input type="checkbox" name="continue_on_error"${continueOnError ? raw(' checked') : ''}> ${tx('ws.continue')}</label>
+              <button type="button" class="ws-menu-item" data-ws-format title="${tx('ws.format_title')}" hidden>${icon('sliders')} ${tx('ws.format')} <kbd>Ctrl+F7</kbd></button>
+              <button type="button" class="ws-menu-item" data-ws-case title="${tx('ws.case_title')}" hidden><span aria-hidden="true" class="ws-aa">Aa</span> ${tx('ws.case')} <kbd>Ctrl+B</kbd></button>
+              <button type="button" class="ws-menu-item" data-ws-find title="${tx('ws.find_title')}" hidden>${icon('search')} ${tx('ws.find')} <kbd>Ctrl+F</kbd></button>
+              <a class="ws-menu-item" href="${BASE}/sql/load?schema=${encodeURIComponent(navSchema)}" title="${tx('ws.load_title')}">${icon('upload')} ${tx('ws.load')}</a>
+              <button type="button" class="ws-menu-item" data-ws-clear title="${tx('ws.clear_title')}" hidden>${icon('trash')} ${tx('ws.clear')}</button>
+            </div>
+            <div class="menu-section"><strong class="ws-more-head">${tx('ws.keys')}</strong><dl class="ws-keylist">
+              <dt>Ctrl+Enter</dt><dd>${tx('ws.run_statement')}</dd><dt>F5</dt><dd>${tx('ws.run_script')}</dd><dt>F10</dt><dd>${tx('ws.tab.explain')}</dd><dt>F6</dt><dd>${tx('ws.tab.autotrace')}</dd>
+              <dt>Ctrl+S</dt><dd>${tx('ws.key.save')}</dd><dt>Ctrl+F7</dt><dd>${tx('ws.format')}</dd><dt>Ctrl+B</dt><dd>${tx('ws.case')}</dd><dt>Ctrl+F / Ctrl+H</dt><dd>${tx('ws.key.find')}</dd>
+              <dt>Ctrl+G</dt><dd>${tx('ws.key.goto')}</dd><dt>Ctrl+/</dt><dd>${tx('ws.key.comment')}</dd><dt>Ctrl+Space</dt><dd>${tx('ws.key.suggest')}</dd><dt>Tab</dt><dd>${tx('ws.key.indent')}</dd><dt>F1</dt><dd>${tx('ws.key.help')}</dd><dt>Escape</dt><dd>${tx('ws.key.fullscreen')}</dd>
+            </dl>
+            <label class="ws-kwcase" hidden>${tx('ws.kwcase')} <select data-ws-kwcase><option value="lower">${tx('ws.lower')}</option><option value="upper">${tx('ws.upper')}</option></select></label>
+            <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#sql-workshop" target="_blank" rel="noopener" data-ws-help>${tx('ws.help')}</a></div></div></details>
         </div>
-        <p class="ws-runs-as muted small">${tx('ws.runs_as', { who: runsAs })}${searchSchema ? html`; ${tx.rich('ws.search_path', { schema: html`<code>${searchSchema}</code>`, change: html`<a href="${BASE}/sql">${tx('ws.change')}</a>` })}` : ''}. <span data-ws-commit-note>${txnOn
-          ? tx('ws.commit.txn', { idle: idleLabel(tx) })
-          : tx('ws.commit.auto')}</span></p>
         ${fileError ? html`<p class="alert alert-error ws-file-error" role="alert">${fileError}</p>` : ''}
         ${txnError ? html`<p class="alert alert-error ws-txn-alert" role="alert">${txnError}</p>` : txnInfo ? html`<p class="alert alert-info ws-txn-alert" role="status">${txnInfo}</p>` : ''}
         <div class="ws-wtabs" role="group" aria-label="${tx('ws.worksheets')}" hidden></div>
@@ -666,12 +664,23 @@ async function worksheet(req: Req, reply: FastifyReply) {
           <textarea id="ws-sql" name="sql" aria-label="SQL" class="code sql-editor" rows="14" spellcheck="false" data-code="plpgsql">${text || (isPost ? '' : 'select current_user, version();')}</textarea>
         </div>
         <div class="ws-split ws-split-h" role="separator" aria-orientation="horizontal" aria-label="${tx('ws.resize_out')}" tabindex="0" data-ws-split="out" hidden></div>
-        <div class="ws-output" data-active="${active}">
+        <div class="ws-output" data-active="${active}"${!run && !req.query?.tab ? raw(' data-empty') : ''}>
           <div class="ws-tabs" role="tablist" aria-label="${tx('ws.output')}">${TABS.map(([k]) => html`<button type="button" role="tab" id="ws-tab-${k}" aria-controls="ws-pane-${k}" aria-selected="${k === active ? 'true' : 'false'}" data-ws-tab="${k}">${tx(`ws.tab.${k}`)}</button>`)}</div>
           ${TABS.map(([k]) => html`<section class="ws-pane" id="ws-pane-${k}" role="tabpanel" aria-labelledby="ws-tab-${k}" data-pane="${k}"><h2 class="ws-pane-title">${tx(`ws.tab.${k}`)}</h2>${panes[k]}</section>`)}
         </div>
       </section>
-      <footer class="ws-status" role="status" aria-live="polite">${status}</footer>
+      <footer class="ws-status">
+        <span class="ws-status-run" role="status" aria-live="polite">${status}</span>
+        <!-- (UX-1) who the statements run as: a chip in the status bar; the explanation is its description -->
+        <label class="ws-runas ws-runas-chip" title="${runsAsText}"><span>${tx('ws.run_as')}</span>
+          <select name="as_app" aria-describedby="ws-runs-as">
+            <option value="">${db === owner ? tx('ws.owner_conn') : tx('ws.ws_login')}</option>
+            ${apps.map((a) => html`<option value="${a.id}"${asApp?.id === a.id ? raw(' selected') : ''}>${a.name} (${a.db_role})</option>`)}
+          </select></label>
+        <span class="sr-only" id="ws-runs-as">${tx('ws.runs_as', { who: runsAs })}${searchSchema ? html`; ${tx('ws.search_path_plain', { schema: searchSchema })}` : ''}. <span data-ws-commit-note>${txnOn
+          ? tx('ws.commit.txn', { idle: idleLabel(tx) })
+          : tx('ws.commit.auto')}</span></span>
+      </footer>
     </form>
     ${downloadable ? html`<form method="post" action="${BASE}/sql/unload" id="ws-dl" class="ws-dl-form">${csrf(s)}<input type="hidden" name="source" value="query"><input type="hidden" name="query" value="${downloadable}"><input type="hidden" name="header" value="1"><input type="hidden" name="bom" value="1"></form>` : ''}
   </div>`;

package/src/builder/workspace-home.ts

@@ -121,6 +121,22 @@ async function systemMessage(s: Session, admin: boolean) {
   return region(tx('wh.system'), html`${checks}${body}${admins}`, '', 'system-message');
 }
 
+/** (UX-13) What an administrator must see first: lockout risks and a newer pgkiln, above the tools (details: System message). */
+async function attention(s: Session, admin: boolean) {
+  if (!admin) return '';
+  const tx = tr(s);
+  const lockout = await attentionCount();
+  const check = await releaseCheckEnabled();
+  const r = check.on ? cachedRelease()?.release : null;
+  const newer = r && newerVersion(r.version, VERSION) ? r : null;
+  const items = [
+    lockout ? html`<li>${icon('alert')} ${tx('wh.lockout', { count: lockout })} <a href="${BASE}/instance#lockout-checks">${tx('wh.lockout_open')}</a></li>` : '',
+    newer ? html`<li>${icon('bell')} ${tx('wh.available', { version: newer.version })} <a href="#system-message">${tx('wh.release_notes')}</a></li>` : '',
+  ].filter(Boolean);
+  return items.length ? html`<section class="alert alert-warning wh-attention" role="status" aria-labelledby="wh-attention-h">
+    <h2 id="wh-attention-h">${tx('wh.attention')}</h2><ul>${items}</ul></section>` : '';
+}
+
 /** (Instance settings page) the release check: on, off, or as the environment says. */
 export async function releaseCheckRegion(s: Session) {
   const check = await releaseCheckEnabled();
@@ -194,6 +210,7 @@ export async function workspaceHomeRoutes(app: FastifyInstance) {
     const main = html`<div class="ab-home wh-home">
       <div class="ab-main">
         <h1 class="wh-title">${s.workspace ? tx('wh.title_ws', { name: s.workspace.name }) : tx('wh.title')}</h1>
+        ${await attention(s, admin)}
         <nav class="ab-tiles ab-tiles-wrap wh-tools" aria-label="${tx('wh.tools')}">
           ${card(`${BASE}/apps`, 'grid', tx('rail.app_builder'), tx('wh.card.apps'))}
           ${sql ? card(`${BASE}/sql`, 'database', tx('rail.sql_workshop'), tx('wh.card.sql')) : ''}

package/src/session.ts

@@ -36,6 +36,8 @@ export interface Session {
   /** Builder only: the developer's workspaces and the current one (src/builder/workspaces.ts). */
   workspaces?: BuilderWorkspace[];
   workspace?: BuilderWorkspace | null;
+  /** Builder only (UX-3): this request's path, so the rail marks the right section */
+  path?: string;
   /** Builder only (sprint 99): an administrator of the installation (the Administration menu's Database users) */
   instanceAdmin?: boolean;
   /** Builder only (079): sha256 of the developer toolbar token (src/runtime/devbar.ts). */