create-pmos 0.83.0 → 0.85.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-pmos",
-  "version": "0.83.0",
+  "version": "0.85.0",
   "description": "Scaffold the PMOS portable kit — run the PMOS product-management workflow (initiative → lane-fit spec → contract → build → three gates, with work-type lanes for features, research, maintenance, incidents, and content) entirely inside your own repo, with all state as git-versioned files. Includes `workflow-sweep`, which audits the state every board derives from and separates real defects from work you simply have not done. `create-pmos workspace` also installs + launches the local Terminal Workspace GUI. No database, no network, no telemetry.",
   "license": "MIT",
   "bin": {

package/payload/KIT-VERSION

@@ -1,3 +1,3 @@
-kernel-source: pmos@9bf7ec5
+kernel-source: pmos@2d5583a
 assembled: 2026-10-07
 mode: vendor

package/payload/planning/evals/eval-calibration.md

@@ -2,7 +2,7 @@
 type: Reference
 title: "Eval calibration log"
 description: "Append-only record of every PM override of an evaluator verdict."
-generated: {by: process:create-pmos, at: "2026-10-07T16:01:13Z"}
+generated: {by: process:create-pmos, at: "2026-10-07T16:18:36Z"}
 status: stable
 ---
 

package/payload/planning/okrs/health-budgets.md

@@ -2,7 +2,7 @@
 type: Reference
 title: "Health budgets"
 description: "Closed registry of health-budget anchors (D59), edited only by the PM."
-generated: {by: process:create-pmos, at: "2026-10-07T16:01:13Z"}
+generated: {by: process:create-pmos, at: "2026-10-07T16:18:36Z"}
 status: stable
 ---
 

package/payload/state/discoveries.md

@@ -2,7 +2,7 @@
 type: Reference
 title: "Discoveries and friction log"
 description: "Append-only record of what runs discovered and where the process rubbed."
-generated: {by: process:create-pmos, at: "2026-10-07T16:01:13Z"}
+generated: {by: process:create-pmos, at: "2026-10-07T16:18:36Z"}
 status: stable
 ---
 

package/workspace/guide/command-palette.md

@@ -2,16 +2,18 @@
 type: Guide
 title: "Command palette"
 description: "How to use the ⌘K palette: run a command, see its command-line form, keep a note, ask the bound session, search Knowledge, Memory and the Guide, and use the compose line on a phone."
-timestamp: 2026-10-05
+timestamp: 2026-10-07
 ---
 
 # Command palette
 
 The command palette is one box for three jobs: open something, run a command, or keep a note. Press **⌘K** (Ctrl+K on Windows and Linux) to open it. Press **Esc** to close it.
 
+On a desktop, the palette is a dialog in the middle of the screen. The search box is at the top with a search icon, the scope switch is under it, and a footer at the bottom shows a hint and the keys. On a phone it is a sheet (see "On a phone").
+
 ## Rows
 
-Type in the box. The rows change as you type. They always come in this order:
+Type in the box. The rows change as you type. Rows of one kind sit under one small label, for example Commands or Initiatives, and each row has an icon for its kind. The selected row has a ring and an arrow. The rows come in this order:
 
 1. **Matched rows.** A command, an initiative, a repository, a session, a tab or a view whose name matches what you typed. A command shows its command-line form next to its name, for example `pmos item`. You can run the same command from a terminal.
 2. **Capture as note.** Keeps what you typed as a note.

package/workspace/guide/layout.md

@@ -27,16 +27,16 @@ Each place is drawn when its run is built. Until then the place says which run b
 
 ## Settings
 
-Settings holds settings only, in eight sections:
+Settings holds settings only, in eight sections. On a wide screen they are cards in two columns, like Agenda: Repositories, New sessions, Profiles and Theme on the left, and Validate consent, People, Online and Updates on the right. On a narrow screen the cards stack in one column. Each switch (Validate consent, People, Online) turns on when you press it. **Check for updates** is at the top right of the page.
 
 - **Repositories**: every registered repository. Press a repository to make it the current one. Press its ⋯ for **Rename** or **Remove from PMOS**. Each asks in a sheet, and a remove asks you to confirm. **Add repository** shows the scan of a folder before you add it.
 - **Profiles**: the Claude profiles a session can start with. They open in the detail.
 - **New sessions**: the default CLI and the default model for a new session in the dock.
-- **Validate consent**: the consent of the current repository. Turn it on or off here. **Open Validate** opens the Validate page as a tab.
+- **Validate consent**: the consent of the current repository. Use its switch to turn it on or off. **Open Validate** opens the Validate page as a tab.
 - **People**: whether the morning brief keeps attendee names from the calendar for the current repository. It is off until you turn it on. Turning it off also hides the names recorded before.
-- **Online**: puts this workspace at your own address, such as `pmos.pm-os.app`, through a Cloudflare tunnel. Enter the public address, the tunnel name, your Cloudflare team domain, the Access audience (AUD) tag and your email, then press **Turn on**. The workspace runs the tunnel and remembers the switch when it restarts. On your phone, open the address and sign in with Cloudflare Access (Google or an email code). The workspace does not ask for its token there. Only the computer that runs the workspace can change this section. A phone sees whether it is on. When a sign-in at the address is refused, this section names the check that failed, such as the email or the AUD tag. [REMOTE.md](../REMOTE.md) has the one-time Cloudflare steps.
+- **Online**: puts this workspace at your own address, such as `pmos.pm-os.app`, through a Cloudflare tunnel. Enter the public address, the tunnel name, your Cloudflare team domain, the Access audience (AUD) tag and your email, then turn on the **Online** switch. The workspace runs the tunnel and remembers the switch when it restarts. On your phone, open the address and sign in with Cloudflare Access (Google or an email code). The workspace does not ask for its token there. Only the computer that runs the workspace can change this section. A phone sees whether it is on. When a sign-in at the address is refused, this section names the check that failed, such as the email or the AUD tag. [REMOTE.md](../REMOTE.md) has the one-time Cloudflare steps.
 - **Theme**: Dark or Light.
-- **Updates**: the version of the workspace app and the version of the kit in the current repository. Press **Check for updates** to compare them with the latest published version of PMOS. This is the only time the workspace asks the internet for a version, and it asks only when you press. When a newer version is available, one button shows: **Update to** and the version. It updates every part that is older, in this order:
+- **Updates**: the version of the workspace app and the version of the kit in the current repository. Press **Check for updates** at the top of the page to compare them with the latest published version of PMOS. This is the only time the workspace asks the internet for a version, and it asks only when you press. When a newer version is available, one button shows: **Update to** and the version. It updates every part that is older, in this order:
   - **The kit** in the current repository, when it is older. This does what `npx create-pmos@latest --update` does in a terminal. It changes only the kit's own files under `pmos/` (skills, scripts, templates and guides). Your records in `state/`, `planning/` and `okf/product/` do not change. The last lines of the output show under the button. The changed files are under `pmos/`, which Sync treats as records, so Sync (or automatic sync) sends them with your other records. To read them first, look at `git diff pmos/` before you sync.
   - **The workspace app**, when it is older. This does what `pmos upgrade` does in a terminal. The button asks you first. The workspace stops, installs the new version and starts again, and the page reloads when the new version starts. The reloaded page runs the new version's code: each start gives the page files a new address, so neither the browser nor the Online address's tunnel can keep the old ones. You do not need a terminal or a hard refresh. Sessions keep running in tmux. It works on the computer that runs the workspace and at its Online address, because the page comes back there after the restart. It also works on a phone or public address that signs in with a token set in `PMOS_TOKEN`, which the workspace keeps. When the workspace made its own token at start, the token changes on the restart, so the page refuses and says where to press it. When the workspace runs from a PMOS checkout, update it with `git pull` instead.
 

package/workspace/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pmos-workspace",
-  "version": "0.83.0",
+  "version": "0.85.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pmos-workspace",
-      "version": "0.83.0",
+      "version": "0.85.0",
       "license": "MIT",
       "dependencies": {
         "@xterm/addon-fit": "^0.11.0",

package/workspace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmos-workspace",
-  "version": "0.83.0",
+  "version": "0.85.0",
   "private": true,
   "description": "PMOS Terminal Workspace — local companion hosting real PTYs beside the library and gates (D62)",
   "license": "MIT",

package/workspace/public/pm/components.css

@@ -696,6 +696,14 @@
   height: auto;
   max-height: calc(var(--pmc-vvh, 100dvh) - 24px);
 }
+.pmc-sheet--center {
+  inset: auto;
+  top: 84px;
+  left: 50%;
+  width: 640px;
+  max-height: 70vh;
+  transform: translateX(-50%);
+}
 .pmc-sheet__handle {
   flex: none;
   width: 36px;
@@ -723,11 +731,33 @@
   letter-spacing: -0.01em;
   overflow-wrap: anywhere;
 }
+.pmc-sheet__title--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pmc-sheet__sub {
   font-size: 12px;
   line-height: 16px;
   color: var(--muted-foreground);
 }
+.pmc-sheet__sub--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pmc-sheet__head .pmc-btn--icon {
   margin: -4px -8px 0 0;
 }
@@ -741,6 +771,16 @@
   overscroll-behavior: contain;
   padding: 16px;
 }
+.pmc-sheet--center .pmc-sheet__body {
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+  min-height: 0;
+}
+.pmc-sheet--center {
+  display: flex;
+  flex-direction: column;
+}
 .pmc-sheet__body > * {
   flex: none;
 }
@@ -2359,18 +2399,22 @@
 .fr-body[data-fr-dock="rail"] > .fr-dock {
   display: none !important;
 }
-/* Settings: one column of seven sections. */
+/* Settings: a full-width two-column grid of cards, laid out like Agenda. The grid sits in a container so it folds to one
+ * column by the width of the page, not the window. */
 .fr-set {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  max-width: 720px;
-  padding: 24px 16px 48px;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 16px 48px;
+  container-type: inline-size;
 }
 .fr-set__intro {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 32px;
 }
 .fr-set__h1 {
   margin: 0;
@@ -2382,10 +2426,39 @@
   color: var(--muted-foreground);
   font-size: 12px;
 }
+.fr-set__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-rows: repeat(5, auto);
+  gap: 12px;
+  align-items: stretch;
+}
+/* Left: repositories, new sessions, profiles, theme. Right: Validate, People, Online, updates. The DOM order stays
+ * repositories, profiles, sessions, validate, people, online, theme, updates; Online spans two rows so the columns stay level. */
+.fr-set__section[data-fr-section="repositories"] { grid-column: 1; grid-row: 1 / span 1; }
+.fr-set__section[data-fr-section="sessions"] { grid-column: 1; grid-row: 2 / span 1; }
+.fr-set__section[data-fr-section="profiles"] { grid-column: 1; grid-row: 3 / span 1; }
+.fr-set__section[data-fr-section="theme"] { grid-column: 1; grid-row: 4 / span 1; }
+.fr-set__section[data-fr-section="validate"] { grid-column: 2; grid-row: 1 / span 1; }
+.fr-set__section[data-fr-section="people"] { grid-column: 2; grid-row: 2 / span 1; }
+.fr-set__section[data-fr-section="online"] { grid-column: 2; grid-row: 3 / span 2; }
+.fr-set__section[data-fr-section="updates"] { grid-column: 2; grid-row: 5 / span 1; }
+@container (max-width: 700px) {
+  .fr-set__grid {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: none;
+  }
+  .fr-set__section[data-fr-section] { grid-column: 1; grid-row: auto; }
+}
 .fr-set__section {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card);
 }
 .fr-set__head {
   display: flex;
@@ -2395,14 +2468,27 @@
   min-height: 32px;
 }
 .fr-set__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   margin: 0;
-  font-size: 14px;
-  font-weight: 600;
+  color: var(--muted-foreground);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 .fr-set__fields {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 10px;
+}
+.fr-set__fields--grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+.fr-set__fields--grid > * {
+  min-width: 0;
 }
 .fr-set__line {
   display: flex;
@@ -2410,6 +2496,32 @@
   justify-content: space-between;
   gap: 12px;
 }
+.fr-set__line--box {
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--background);
+  font-size: 14px;
+}
+.fr-set__sw {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--background);
+}
+.fr-set__sw-text {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+  font-size: 14px;
+}
 .fr-set__add {
   padding: 12px 0;
 }
@@ -2422,6 +2534,7 @@
   overflow: auto;
   padding: 8px;
   border: 1px solid var(--border);
+  border-radius: 6px;
   background: var(--muted);
   color: var(--foreground);
   font-family: var(--mono);
@@ -2441,9 +2554,13 @@
   }
 }
 @media (pointer: coarse) {
-  .fr-set__head {
+  .fr-set__head,
+  .fr-set__intro {
     min-height: 44px;
   }
+  .fr-set__sw {
+    min-height: 48px;
+  }
   /* The dock's own strip and bottom bar (panel-tabs.js) size their controls inline at 22-30px; under touch each is a
    * 44px target. The strip's fixed height yields to them. */
   .fr-dock [data-tabs="bar"] {
@@ -3595,13 +3712,49 @@
   overscroll-behavior: contain;
 }
 .pl-item[aria-selected="true"] {
-  background: var(--accent);
+  background: var(--accent) !important;
+  box-shadow: 0 0 0 1px var(--ring);
+}
+.pl-icon-tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  flex: none;
+}
+.pl-item[aria-selected="true"] .pl-icon-tile {
+  color: var(--foreground);
+}
+.pl-enter-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--foreground);
+}
+.pl-eyebrow {
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+  padding: 10px 8px 4px;
 }
 .pl-cli {
   font-family: var(--mono);
   font-size: 12px;
   line-height: 16px;
   color: var(--muted-foreground);
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: var(--background);
+  box-shadow: 0 0 0 1px var(--border);
 }
 .pl-note {
   margin: 0;
@@ -3612,6 +3765,74 @@
 .pl-note--error {
   color: var(--destructive);
 }
+.pl-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px 0 16px;
+  border-bottom: 1px solid var(--border);
+}
+.pl-search__icon {
+  display: flex;
+  color: var(--muted-foreground);
+}
+.pl-search > div {
+  flex: 1 1 auto;
+}
+.pl-input.pl-input,
+.pl-input.pl-input:focus-visible {
+  height: 52px;
+  font-size: 16px;
+  border: 0;
+  outline: none;
+}
+.pl-kbd {
+  font: 11px/16px var(--mono);
+  color: var(--muted-foreground);
+  padding: 0 6px;
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px var(--border);
+}
+.pl-center .pl-scopes {
+  align-self: flex-start;
+  margin: 10px 16px 4px;
+}
+.pl-center .pl-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+  padding: 4px 8px 8px;
+}
+.pl-center .pl-list .pl-item {
+  border-bottom: 0;
+  background: transparent;
+  border-radius: 6px;
+  min-height: 44px;
+  padding: 6px 8px;
+}
+.pl-center .pl-list .pl-item > span:first-child {
+  align-self: center;
+}
+.pl-foot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--background);
+}
+.pl-foot .pl-note {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 16px;
+}
+.pl-keys {
+  flex: none;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
 /* the terminal's compose line (phone): one message field and Send, in the bottom bar */
 .pl-compose {
   display: flex;

package/workspace/public/pm/dest-settings.js

@@ -31,6 +31,7 @@ import { repoRow } from './fixture.js';
 import { sessionDefaults, setSessionDefaults } from './dock.js';
 import { COPY } from './frame-copy.js';
 import { askConfirm } from './dialogs.js';
+import { icon } from './icons.js';
 
 const P = COPY.page;
 const roots = new WeakMap();      // host -> { root, sig }
@@ -104,10 +105,17 @@ async function setOnline(patch) {
   setState({});
 }
 
-const section = (id, title, kids, action) => el('section', { class: 'fr-set__section', 'data-fr-section': id },
-  el('div', { class: 'fr-set__head' }, el('h2', { class: 'fr-set__title' }, title), action || null),
+/* A card: a small uppercase eyebrow (icon + title) over the section's rows. The section ids and data-fr hooks are the contract. */
+const section = (id, title, kids, action, iconName) => el('section', { class: 'fr-set__section', 'data-fr-section': id },
+  el('div', { class: 'fr-set__head' }, el('h2', { class: 'fr-set__title' }, iconName ? icon(iconName) : null, title), action || null),
   kids);
 
+/** A toggle row: the state text beside a Turn on / Turn off button (the same button as before the redesign). */
+function switchRow({ textEl, on, disabled, attrs, onClick }) {
+  const toggle = button({ label: on ? P.turnOff : P.turnOn, variant: 'outline', size: 'sm', disabled: !!disabled, attrs, onClick });
+  return el('div', { class: 'fr-set__sw' }, el('div', { class: 'fr-set__sw-text' }, textEl), toggle);
+}
+
 /* ── the eight sections ────────────────────────────────────────────────────────────────────────────────────────── */
 
 function reposSection(scope) {
@@ -142,7 +150,7 @@ function reposSection(scope) {
   });
   const kids = rows.length ? rows : [empty({ text: P.reposEmpty })];
   if (addOpen) kids.push(addBoard());
-  return section('repositories', P.repos, kids, add);
+  return section('repositories', P.repos, kids, add, 'git-branch');
 }
 
 function loadAdd() {
@@ -173,7 +181,7 @@ function profilesSection() {
   return section('profiles', P.profiles, [row({
     title: P.profilesRow, meta: [P.profilesMeta], onOpen: open, openLabel: P.profilesOpen, trail: [more],
     attrs: { 'data-fr-row': 'profiles' },
-  })]);
+  })], null, 'bot');
 }
 
 function sessionsSection() {
@@ -190,21 +198,21 @@ function sessionsSection() {
     onCommit: (v) => { setSessionDefaults({ tier: v }); setState({}); },
     attrs: { 'data-fr': 'default-model' },
   });
-  return section('sessions', P.sessions, [el('div', { class: 'fr-set__fields' }, cli, model), el('p', { class: 'fr-set__note' }, P.sessionsNote)]);
+  return section('sessions', P.sessions, [el('div', { class: 'fr-set__fields fr-set__fields--grid' }, cli, model), el('p', { class: 'fr-set__note' }, P.sessionsNote)], null, 'square-terminal');
 }
 
 function validateSection(scope) {
   const repo = scope === 'all' ? null : activeProduct();
   const ws = wsOfRepo(repo);
-  if (!ws) return section('validate', P.validate, [empty({ text: P.validateNoRepo })]);
+  if (!ws) return section('validate', P.validate, [empty({ text: P.validateNoRepo })], null, 'check');
   readConsent(ws);
   const c = consentByWs.get(ws) || {};
   const known = c.on === true || c.on === false;
   const line = c.error ? P.validateUnread : !known ? '' : c.on ? P.validateOn : P.validateOff;
-  const toggle = known ? button({
-    label: c.on ? P.turnOff : P.turnOn, variant: 'outline', size: 'sm',
-    attrs: { 'data-fr': 'consent-toggle' }, onClick: () => setConsent(ws, !c.on),
-  }) : null;
+  const stateEl = el('span', { 'data-fr': 'consent-state', 'data-on': known ? String(c.on) : 'unread' }, line);
+  const toggleRow = known ? switchRow({
+    textEl: stateEl, label: line, on: c.on, attrs: { 'data-fr': 'consent-toggle' }, onClick: () => setConsent(ws, !c.on),
+  }) : el('div', { class: 'fr-set__sw' }, el('div', { class: 'fr-set__sw-text' }, stateEl));
   // Validate itself is a tool, not a place: it opens as a tab in the dock, from here only
   const open = button({
     label: P.validateOpen, variant: 'outline', size: 'sm', attrs: { 'data-fr': 'open-validate' },
@@ -214,32 +222,31 @@ function validateSection(scope) {
       const f = frame(); if (f) f.openDock();
     },
   });
-  return section('validate', P.validate, [el('div', { class: 'fr-set__line' },
-    el('span', { 'data-fr': 'consent-state', 'data-on': known ? String(c.on) : 'unread' }, line), toggle, open)]);
+  return section('validate', P.validate, [toggleRow], open, 'check');
 }
 
 function peopleSection(scope) {
   const repo = scope === 'all' ? null : activeProduct();
   const ws = wsOfRepo(repo);
-  if (!ws) return section('people', P.people, [empty({ text: P.peopleNoRepo })]);
+  if (!ws) return section('people', P.people, [empty({ text: P.peopleNoRepo })], null, 'share-2');
   readPeople(ws);
   const c = peopleByWs.get(ws) || {};
   const known = c.on === true || c.on === false;
   const line = c.error ? c.error : !known ? '' : c.on ? P.peopleOn : P.peopleOff;
-  const toggle = known ? button({
-    label: c.on ? P.turnOff : P.turnOn, variant: 'outline', size: 'sm',
-    attrs: { 'data-fr': 'people-calendar' }, onClick: () => setPeopleCalendar(ws, !c.on),
-  }) : null;
-  return section('people', P.people, [el('p', { class: 'fr-set__note' }, P.peopleNote),
-    el('div', { class: 'fr-set__line' }, el('span', { 'data-fr': 'people-state', 'data-on': known ? String(c.on) : 'unread' }, line), toggle)]);
+  const stateEl = el('span', { 'data-fr': 'people-state', 'data-on': known ? String(c.on) : 'unread' }, line);
+  const toggleRow = known ? switchRow({
+    textEl: stateEl, label: line, on: c.on, attrs: { 'data-fr': 'people-calendar' }, onClick: () => setPeopleCalendar(ws, !c.on),
+  }) : el('div', { class: 'fr-set__sw' }, el('div', { class: 'fr-set__sw-text' }, stateEl));
+  return section('people', P.people, [toggleRow, el('p', { class: 'fr-set__note' }, P.peopleNote)], null, 'share-2');
 }
 
 function onlineSection() {
   readOnline(false);
   const d = online.data;
-  if (!d) return section('online', P.online, [el('p', { class: 'fr-set__note' }, online.error || '')]);
-  if (d.envHost) return section('online', P.online, [el('p', { class: 'fr-set__note', 'data-fr': 'online-state', 'data-on': 'env' }, P.onlineEnv(d.envHost))]);
-  const lines = [el('p', { class: 'fr-set__note', 'data-fr': 'online-state', 'data-on': String(!!d.on) }, d.on ? P.onlineOn(d.host) : P.onlineOff)];
+  if (!d) return section('online', P.online, [el('p', { class: 'fr-set__note' }, online.error || '')], null, 'globe');
+  if (d.envHost) return section('online', P.online, [el('p', { class: 'fr-set__note', 'data-fr': 'online-state', 'data-on': 'env' }, P.onlineEnv(d.envHost))], null, 'globe');
+  const stateP = el('p', { class: 'fr-set__note', 'data-fr': 'online-state', 'data-on': String(!!d.on) }, d.on ? P.onlineOn(d.host) : P.onlineOff);
+  const lines = [];
   if (d.on) {
     const r = d.running || {};
     lines.push(el('p', { class: 'fr-set__note', 'data-fr': 'online-tunnel' },
@@ -247,24 +254,24 @@ function onlineSection() {
     if (d.keys && !d.keys.keys) lines.push(el('p', { class: 'fr-set__note', 'data-fr': 'online-keys' }, d.keys.lastError ? P.onlineKeysError(d.keys.lastError) : P.onlineKeysWait));
     if (d.lastRefusal) lines.push(el('p', { class: 'fr-set__note', 'data-fr': 'online-refused', role: 'status' }, P.onlineRefused(d.lastRefusal.reason, d.lastRefusal.at)));
   }
-  if (!d.canChange) return section('online', P.online, [...lines, el('p', { class: 'fr-set__note' }, P.onlineRemote)]);
+  if (!d.canChange) return section('online', P.online, [stateP, ...lines, el('p', { class: 'fr-set__note' }, P.onlineRemote)], null, 'globe');
   const f = (key, label, placeholder) => field({
     label, value: d[key] || '', placeholder,
     onCommit: (v) => setOnline({ [key]: v }),
     attrs: { 'data-fr': 'online-' + key, disabled: d.on ? true : undefined },
   });
-  const fields = el('div', { class: 'fr-set__fields' },
+  const fields = el('div', { class: 'fr-set__fields fr-set__fields--grid' },
     f('host', P.onlineHost, 'pmos.example.com'), f('tunnel', P.onlineTunnel, 'pmos'), f('team', P.onlineTeam, 'myteam.cloudflareaccess.com'),
     f('audience', P.onlineAudience, ''), f('email', P.onlineEmail, 'you@example.com'));
   const blocked = !d.on && (!d.complete ? P.onlineNeedFields : !d.cloudflared ? P.onlineNoCloudflared : null);
-  const toggle = button({
-    label: d.on ? P.turnOff : P.turnOn, variant: 'outline', size: 'sm', disabled: !!blocked,
+  const toggleRow = switchRow({
+    textEl: stateP, label: d.on ? P.onlineOn(d.host) : P.onlineOff, on: !!d.on, disabled: !!blocked,
     attrs: { 'data-fr': 'online-toggle' }, onClick: () => setOnline({ on: !d.on }),
   });
-  const kids = [el('p', { class: 'fr-set__note' }, P.onlineIntro), fields, el('div', { class: 'fr-set__line' }, ...lines, toggle)];
+  const kids = [toggleRow, ...lines, el('p', { class: 'fr-set__note' }, P.onlineIntro), fields];
   if (blocked) kids.push(el('p', { class: 'fr-set__note', 'data-fr': 'online-blocked' }, blocked));
   if (online.note) kids.push(el('p', { class: 'fr-set__note', 'data-fr': 'online-error', role: 'alert' }, online.note));
-  return section('online', P.online, kids);
+  return section('online', P.online, kids, null, 'globe');
 }
 
 function themeSection() {
@@ -273,7 +280,7 @@ function themeSection() {
     items: [{ id: 'dark', label: P.dark }, { id: 'light', label: P.light }],
     onChange: (id) => setState({ theme: id }),
     attrs: { 'data-fr': 'theme' },
-  })]);
+  })], null, 'sun');
 }
 
 function readKitStatus(ws, force) {
@@ -362,10 +369,10 @@ function updatesSection(scope) {
   const kids = [];
   const kitPresent = !!(kit && kit.present);
   const canUpdate = (cmp.appBehind && !app.fromCheckout) || (cmp.kitBehind && kitPresent);
-  kids.push(el('div', { class: 'fr-set__line' }, el('span', { 'data-fr': 'app-version' }, P.updatesApp(app.version))));
+  kids.push(el('div', { class: 'fr-set__line fr-set__line--box' }, icon('panel-top'), el('span', { 'data-fr': 'app-version' }, P.updatesApp(app.version))));
   if (cmp.appBehind && app.fromCheckout) kids.push(el('p', { class: 'fr-set__note', 'data-fr': 'app-checkout' }, P.updatesCheckout));
   const kitText = scope === 'all' || !ws ? P.updatesNoRepo : !kit ? '' : kit.present ? P.updatesKit(kit.version) : P.updatesNoKit;
-  kids.push(el('div', { class: 'fr-set__line' }, el('span', { 'data-fr': 'kit-version' }, kitText)));
+  kids.push(el('div', { class: 'fr-set__line fr-set__line--box' }, icon('cloud'), el('span', { 'data-fr': 'kit-version' }, kitText)));
   if (canUpdate) {
     kids.push(el('div', { class: 'fr-set__line' }, button({
       label: P.updateAllTo(upd.latest), variant: 'primary', size: 'sm', disabled: busy, attrs: { 'data-fr': 'update-all' },
@@ -378,11 +385,17 @@ function updatesSection(scope) {
   if (upd.error) kids.push(el('p', { class: 'fr-set__note fr-set__error', role: 'alert', 'data-fr': 'update-error' }, upd.error));
   if (upd.output) kids.push(el('pre', { class: 'fr-set__output', 'data-fr': 'update-output' }, upd.output));
   kids.push(el('p', { class: 'fr-set__note' }, P.updatesNote));
-  const check = button({
-    label: P.updatesCheck, variant: 'outline', size: 'sm', icon: 'refresh-cw', disabled: busy || !ws,
+  return section('updates', P.updates, kids, null, 'arrow-down');
+}
+
+/** Check for updates sits in the page header; it asks about the current repository's kit. */
+function checkButton(scope) {
+  const repo = scope === 'all' ? null : activeProduct();
+  const ws = wsOfRepo(repo) || wsOfRepo(activeProduct());
+  return button({
+    label: P.updatesCheck, variant: 'outline', size: 'sm', icon: 'refresh-cw', disabled: !!upd.phase || !ws,
     attrs: { 'data-fr': 'check-updates' }, onClick: () => checkUpdates(ws),
   });
-  return section('updates', P.updates, kids, check);
 }
 
 /* ── mount ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@@ -415,15 +428,18 @@ export function mountDestination(host, ctx) {
   if (sig === r.sig || busy(r.root)) return;
   r.sig = sig;
   setChildren(r.root, [
-    el('header', { class: 'fr-set__intro' }, el('h1', { class: 'fr-set__h1' }, P.title), el('p', { class: 'fr-set__note' }, P.intro)),
-    reposSection(scope),
-    profilesSection(),
-    sessionsSection(),
-    validateSection(scope),
-    peopleSection(scope),
-    onlineSection(),
-    themeSection(),
-    updatesSection(scope),
+    el('header', { class: 'fr-set__intro' }, el('h1', { class: 'fr-set__h1' }, P.title), checkButton(scope)),
+    /* The DOM keeps the section order (the tests and the keyboard order read it); the grid in components.css places the
+     * left column (repositories, new sessions, profiles, theme) and the right (Validate, People, Online, updates). */
+    el('div', { class: 'fr-set__grid' },
+      reposSection(scope),
+      profilesSection(),
+      sessionsSection(),
+      validateSection(scope),
+      peopleSection(scope),
+      onlineSection(),
+      themeSection(),
+      updatesSection(scope)),
   ]);
 }
 

package/workspace/public/pm/palette-copy.js

@@ -17,6 +17,10 @@ export const COPY = {
     command: 'Command', destination: 'Go to', initiative: 'Initiative', repository: 'Repository', session: 'Session',
     tab: 'Tab', view: 'View', knowledge: 'Document', memory: 'Memory', guide: 'Guide', capture: 'Note', ask: 'Ask',
   },
+  groups: {
+    destination: 'Go to', command: 'Commands', initiative: 'Initiatives', repository: 'Repositories', session: 'Sessions',
+    tab: 'Tabs', view: 'Views', knowledge: 'Knowledge', memory: 'Memory', guide: 'Guide', capture: 'Keep', ask: 'Keep',
+  },
   hint: 'Type to search. Press Enter to open the first row.',
   hintTyped: 'Type to search. Capture as note keeps what you typed.',
   noMatch: (q) => `Nothing matches "${q}".`,

package/workspace/public/pm/palette.js

@@ -21,8 +21,8 @@
 
 import { el } from './dom.js';
 import { state, setState, FIXTURE } from './state.js';
-import { sheet, field, tabs, row, badge, signal, toast, button, dialogText, ensureComponentsCss } from './primitives.js';
-import { ensureSprite } from './icons.js';
+import { sheet, field, tabs, row, badge, signal, toast, button, dialogText, ensureComponentsCss, narrowViewport } from './primitives.js';
+import { ensureSprite, icon } from './icons.js';
 import { pmGet, pmPost } from './http.js';
 import { COPY } from './palette-copy.js';
 
@@ -215,15 +215,27 @@ function choose(it) {
   try { it.run(); } catch (e) { console.warn('[palette] a row failed:', (e && e.message) || e); }
 }
 
+/** Get the kind icon for a palette item. */
+function kindIcon(kind) {
+  const iconMap = {
+    destination: 'arrow-right', command: 'code', initiative: 'target', repository: 'git-branch', session: 'square-terminal',
+    tab: 'panel-top', view: 'panel-top', knowledge: 'file-text', memory: 'history', guide: 'list', capture: 'text-quote', ask: 'bot',
+  };
+  return iconMap[kind] || 'circle';
+}
+
 function itemRow(it, i, id) {
   const sigs = [];
   if (it.cli) sigs.push(el('code', { class: 'pl-cli' }, it.cli));
   else if (it.tag) sigs.push(signal({ text: it.tag }));
+  const lead = [el('span', { class: 'pl-icon-tile', 'aria-hidden': 'true' }, icon(kindIcon(it.kind)))];
+  const trail = i === sel ? [el('span', { class: 'pl-enter-icon', 'aria-hidden': 'true' }, icon('chevron-right'))] : [];
   return row({
     title: it.label,
     meta: [it.hint].filter(Boolean),
     signals: sigs,
-    lead: [badge({ text: COPY.kinds[it.kind] || it.kind, tone: 'muted' })],
+    lead,
+    trail,
     onOpen: () => choose(it),
     openAttrs: { 'data-palette': 'item', 'data-kind': it.kind, tabindex: '-1' },
     attrs: { class: 'pl-item', id, role: 'option', 'aria-selected': i === sel ? 'true' : 'false' },
@@ -238,8 +250,21 @@ function refresh() {
   const sig = rows.map((it) => `${it.kind}|${it.label}|${it.hint || ''}|${it.cli || ''}`).join('\n') + '#' + sel;
   if (sig !== ui.sig) {
     ui.sig = sig;
-    ui.list.replaceChildren(...rows.map((it, i) => itemRow(it, i, ui.listId + '-' + i)));
-    const cur = ui.list.children[sel];
+    // Build the list with eyebrow labels for groups
+    const grouped = [];
+    let lastKind = null;
+    let itemCount = 0;
+    for (const it of rows) {
+      if (it.kind !== lastKind) {
+        const groupName = COPY.groups[it.kind] || COPY.kinds[it.kind] || it.kind;
+        grouped.push(el('div', { class: 'pl-eyebrow', 'aria-hidden': 'true' }, groupName));
+        lastKind = it.kind;
+      }
+      grouped.push(itemRow(it, itemCount, ui.listId + '-' + itemCount));
+      itemCount++;
+    }
+    ui.list.replaceChildren(...grouped);
+    const cur = ui.list.querySelector('[role="option"][aria-selected="true"]');
     ui.input.control.setAttribute('aria-activedescendant', cur ? cur.id : '');
     if (cur && cur.scrollIntoView) cur.scrollIntoView({ block: 'nearest' });
   }
@@ -262,7 +287,7 @@ function setScope(next) {
   ui.input.control.focus();
 }
 
-const scopeTabs = () => tabs({ variant: 'line', items: SCOPES.map((id) => ({ id, label: COPY.scopes[id] })), value: scope, onChange: setScope, ariaLabel: COPY.scopeLabel, attrs: { 'data-palette': 'scopes' } });
+const scopeTabs = () => tabs({ variant: narrowViewport() ? 'line' : 'segmented', items: SCOPES.map((id) => ({ id, label: COPY.scopes[id] })), value: scope, onChange: setScope, ariaLabel: COPY.scopeLabel, attrs: { 'data-palette': 'scopes', class: 'pl-scopes' } });
 
 function onKey(e) {
   if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
@@ -282,11 +307,17 @@ function openPalette(deps) {
   q = ''; scope = 'all'; sel = 0; noteKey = ''; pinned = null; busy = false;
   const listId = 'pl-list-' + Math.random().toString(36).slice(2, 7);
   const input = field({ label: COPY.inputLabel, hideLabel: true, placeholder: COPY.placeholder,
-    attrs: { 'data-palette': 'input', role: 'combobox', 'aria-expanded': 'true', 'aria-controls': listId, 'aria-autocomplete': 'list', spellcheck: 'false' } });
+    attrs: { 'data-palette': 'input', role: 'combobox', 'aria-expanded': 'true', 'aria-controls': listId, 'aria-autocomplete': 'list', spellcheck: 'false', class: narrowViewport() ? '' : 'pl-input' } });
   const list = el('div', { class: 'pl-list', role: 'listbox', id: listId, 'aria-label': COPY.title, 'data-palette': 'list' });
   const note = el('p', { class: 'pl-note', role: 'status', 'data-palette': 'note' });
   const scopes = scopeTabs();
-  const dlg = sheet({ mode: 'auto', title: COPY.title, sub: COPY.sub, body: [scopes, input, list, note], attrs: { 'data-palette': 'overlay' },
+
+  // Center mode for palette on desktop, bottom sheet on phone
+  const mode = narrowViewport() ? 'bottom' : 'center';
+  const center = mode === 'center';
+  const search = center ? el('div', { class: 'pl-search' }, el('span', { class: 'pl-search__icon', 'aria-hidden': 'true' }, icon('search')), input, el('kbd', { class: 'pl-kbd', 'aria-hidden': 'true' }, 'Esc')) : input;
+  const foot = center ? el('div', { class: 'pl-foot' }, note, el('span', { class: 'pl-keys' }, COPY.keys)) : note;
+  const dlg = sheet({ mode, title: COPY.title, sub: COPY.sub, body: [search, scopes, list, foot], attrs: { 'data-palette': 'overlay', class: center ? 'pl-center' : '' },
     onClose: () => { ui = null; if (state.paletteOpen) setState({ paletteOpen: false }); } });
   ui = { sheet: dlg, input, list, note, scopes, deps, sig: null, listId };
   input.control.addEventListener('input', () => { input.control.resetCommitted(input.control.value); q = input.control.value; sel = 0; pinned = null; if (ui) { ui.sig = null; refresh(); } });

package/workspace/public/pm/primitives.js

@@ -394,21 +394,23 @@ export function narrowViewport() {
 }
 
 /**
- * sheet({ mode: 'auto'|'side'|'bottom', title, sub, body: Node[], actions: Node[], onClose, attrs })
- * A modal <dialog> in the layer: 420px at the side above 760px, a bottom sheet below. Escape and the backdrop close it.
+ * sheet({ mode: 'auto'|'side'|'bottom'|'center', title, sub, body: Node[], actions: Node[], onClose, attrs })
+ * A modal <dialog> in the layer: 420px at the side above 760px, a bottom sheet below, or centered. Escape and the backdrop close it.
  * On a phone the sheet follows the on-screen keyboard through visualViewport. Returns { dialog, body, close, setHead }.
  */
 export function sheet({ mode = 'auto', title, sub, body, actions, onClose, attrs } = {}) {
   const m = mode === 'auto' ? (narrowViewport() ? 'bottom' : 'side') : mode;
   const tid = nextId('pmc-sheet-t');
-  const titleEl = el('h2', { class: 'pmc-sheet__title', id: tid }, title || '');
-  const subEl = el('div', { class: 'pmc-sheet__sub' }, sub || '');
+  const titleEl = el('h2', { class: cx('pmc-sheet__title', m === 'center' && 'pmc-sheet__title--hidden'), id: tid }, title || '');
+  const subEl = el('div', { class: cx('pmc-sheet__sub', m === 'center' && 'pmc-sheet__sub--hidden') }, sub || '');
   const bodyEl = el('div', { class: 'pmc-sheet__body' }, body || []);
   let closed = false;
+  const headEl = m === 'center' ? null : el('div', { class: 'pmc-sheet__head' }, el('div', { class: 'pmc-sheet__heading' }, titleEl, subEl),
+    iconButton({ icon: 'x', ariaLabel: 'Close', onClick: () => close() }));
   const dialog = el('dialog', { 'aria-modal': 'true', 'aria-labelledby': tid, tabindex: '-1', ...withClass(cx('pmc-sheet', 'pmc-sheet--' + m), attrs) },
   m === 'bottom' ? el('div', { class: 'pmc-sheet__handle', 'aria-hidden': 'true' }) : null,
-  el('div', { class: 'pmc-sheet__head' }, el('div', { class: 'pmc-sheet__heading' }, titleEl, subEl),
-    iconButton({ icon: 'x', ariaLabel: 'Close', onClick: () => close() })),
+  m === 'center' ? titleEl : headEl,
+  m === 'center' ? subEl : null,
   bodyEl,
   actions && actions.length ? el('div', { class: 'pmc-sheet__actions' }, actions) : null);