@textui/widgets 0.8.0 → 0.9.0

package/dist/control/text-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/control/text-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,gEAoKpB,CAAC"}
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/control/text-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,gEA0KpB,CAAC"}

package/dist/control/text-input.js

@@ -165,5 +165,11 @@ export const TextInput = defineComponent('TextInput', (props) => {
             : sliceColumns(shown, start, field),
         fg: empty ? 'subtle' : disabled ? 'disabled' : undefined,
         flex: 1,
+        // The name a theme styles this field's text under. Without it a theme
+        // could colour a list row and not the field a person types in - and the
+        // palette's search box, which is this component, could not be coloured
+        // at all. The placeholder and the disabled case state their own `fg`, so
+        // they keep the colours they had.
+        styleAs: 'TextInput',
     }));
 });

package/dist/display/marquee.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../src/display/marquee.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAa9C,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,OAAO,8DAwClB,CAAC"}
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../src/display/marquee.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAa9C,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,OAAO,8DAoDlB,CAAC"}

package/dist/display/marquee.js

@@ -29,11 +29,24 @@ export const Marquee = defineComponent('Marquee', (props) => {
     // at rather than at the rate it asked for.
     const [frame, setFrame] = useState(0);
     const seen = useRef(0);
-    const from = useRef(0);
-    useTicker((at) => { seen.current = at; setFrame(at - from.current); }, { fps, enabled: sliding });
+    // `null` until the first tick of a run, rather than 0.
+    //
+    // The ticker counts from the application's first frame, not from this
+    // component's, so a marquee that starts at frame 0 and subtracts a `from` of
+    // 0 begins at whatever number the application happens to be on - and a
+    // label scrolled to a cell nothing had travelled to yet is what opening a
+    // menu looked like. The effect below resets this, but it runs *after* the
+    // first tick, so the first tick has to be the one that starts the count.
+    const from = useRef(null);
+    useTicker((at) => {
+        seen.current = at;
+        if (from.current === null)
+            from.current = at;
+        setFrame(at - from.current);
+    }, { fps, enabled: sliding });
     // Back to the start whenever it stops or the words change, so the row you
     // leave is the row you saw when you arrived at it.
-    useEffect(() => { from.current = seen.current; setFrame(0); }, [sliding, content]);
+    useEffect(() => { from.current = null; setFrame(0); }, [sliding, content]);
     if (!sliding)
         return h('text', { content, truncate: 'end', ...rest });
     const perCell = Math.max(1, Math.round(fps / speed));

package/dist/navigation/menu.d.ts

@@ -54,6 +54,15 @@ export interface MenuProps extends BoxProps {
      * only follows.
      */
     interactive?: boolean;
+    /**
+     * What to say when nothing is selectable.
+     *
+     * A palette answers for an empty list itself: it knows *why* it is empty, and
+     * its own row can say which kind of nothing this is - nothing to choose,
+     * still asking, no match. Given one of its own it turns this off rather than
+     * putting both lines on the screen.
+     */
+    noMatch?: string | false;
 }
 /** The name a theme styles a menu row under. See `LIST`. */
 export declare const MENU = "Menu";

package/dist/navigation/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/navigation/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,4DAA4D;AAC5D,eAAO,MAAM,IAAI,SAAS,CAAC;AAE3B,eAAO,MAAM,IAAI,2DA8If,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/navigation/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC1B;AAED,4DAA4D;AAC5D,eAAO,MAAM,IAAI,SAAS,CAAC;AAE3B,eAAO,MAAM,IAAI,2DA8If,CAAC"}

package/dist/navigation/menu.js

@@ -6,7 +6,7 @@ export const MENU = 'Menu';
 export const Menu = defineComponent('Menu', (props) => {
     const theme = useTheme();
     const i18n = useI18n();
-    const { items, onSelect, visibleRows, activeId, autoFocus, interactive = true, descriptions = 'inline', ...rest } = props;
+    const { items, onSelect, visibleRows, activeId, autoFocus, interactive = true, descriptions = 'inline', noMatch, ...rest } = props;
     const focus = useFocus({ autoFocus, disabled: !interactive });
     const selectable = items.filter((i) => !i.disabled);
     const [internalHighlight, setHighlight] = useState(Math.max(0, items.findIndex((i) => i.id === activeId)));
@@ -123,8 +123,8 @@ export const Menu = defineComponent('Menu', (props) => {
         return item.separatorBefore
             ? [h('box', { key: `${item.id}-sep`, height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), row]
             : [row];
-    }), selectable.length === 0
-        ? h('text', { content: `  ${i18n.t('textui.menu.noMatch', undefined, 'no matches')}`, fg: 'subtle' })
+    }), selectable.length === 0 && noMatch !== false
+        ? h('text', { content: `  ${noMatch ?? i18n.t('textui.menu.noMatch', undefined, 'no matches')}`, fg: 'subtle' })
         : null);
 });
 /**

package/dist/overlay/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/overlay/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAkB/F,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,MAAM,iBAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,cAAc,qEAsezB,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,GAAG,SAAS,CAKrB;AA2DD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAehG"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/overlay/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAkB/F,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,MAAM,iBAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,cAAc,qEAifzB,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,GAAG,SAAS,CAKrB;AA2DD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAehG"}

package/dist/overlay/command-palette.js

@@ -323,11 +323,16 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
     // It is the one line in the panel that wraps rather than truncates,
     // because it is the one place a sentence can be read whole.
     const chosen = pending ? offered[index] : undefined;
-    const detail = pending
-        ? chosen?.description
-            ?? pending.arg.description
-            ?? i18n.t('textui.palette.needs', { command: pending.command.title, arg: pending.arg.name }, '{command} needs a {arg}')
-        : highlighted?.description ?? highlighted?.id ?? '';
+    // Nothing selectable is nothing to describe: the line under the list would
+    // otherwise keep the last answer's sentence, or repeat the question the row
+    // above has already asked.
+    const detail = rows.length === 0
+        ? ''
+        : pending
+            ? chosen?.description
+                ?? pending.arg.description
+                ?? i18n.t('textui.palette.needs', { command: pending.command.title, arg: pending.arg.name }, '{command} needs a {arg}')
+            : highlighted?.description ?? highlighted?.id ?? '';
     /*
      * How wide the panel wants to be.
      *
@@ -419,6 +424,11 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
         descriptions: pending?.arg.descriptions ?? descriptions,
         interactive: false,
         activeId: rows[index],
+        // When the answer is a fixed set, the row above already says which kind
+        // of nothing this is and this would be the second line. Searching the
+        // command list has no such row, and there the menu's own line is the one
+        // that says it.
+        noMatch: pending ? false : undefined,
         onSelect: (id) => {
             const at = rows.indexOf(id);
             if (at >= 0)
@@ -428,7 +438,9 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
     }), h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), 
     // What the highlighted row actually is, and how to move around. A palette
     // that shows only titles makes you run something to find out what it does.
-    h('box', { direction: 'row', gap: 1, align: 'start' }, h('text', { content: detail, fg: 'muted', flex: 1, wrap: 'word' }), h('text', { content: `${rows.length}`, fg: 'subtle' })), h('box', { direction: 'row', gap: 1 }, h('text', {
+    h('box', { direction: 'row', gap: 1, align: 'start' }, h('text', { content: detail, fg: 'muted', flex: 1, wrap: 'word' }), 
+    // A zero beside an empty line is a number with nothing to count.
+    rows.length > 0 ? h('text', { content: `${rows.length}`, fg: 'subtle' }) : null), h('box', { direction: 'row', gap: 1 }, h('text', {
         content: pending
             ? (pending.arg.choices === undefined
                 ? hint(theme, [

package/dist/shells/workbench-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFAmEzB,CAAC"}
+{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFAuEzB,CAAC"}

package/dist/shells/workbench-shell.js

@@ -25,7 +25,11 @@ export const WorkbenchShell = defineComponent('WorkbenchShell', (props) => {
         height: '100%',
         bg: 'canvas',
         fg: 'text',
-        border: theme.border,
+        // The frame is chrome, not text. A box that states an `fg` draws its
+        // border in it - which is right for `<box fg="danger" border="single">`
+        // and wrong here, where the `fg` is the application's text colour: it made
+        // every screen's outermost edge as bright as the words inside it.
+        border: { style: theme.border, color: 'border' },
         ...props,
     }, h(SurfaceArea, { surface: 'header' }), h('box', { direction: 'row', flex: 1 }, h(SurfaceArea, { surface: 'rail' }), showSidebar
         ? h('box', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The TextUI component catalog - layout, display, controls, data, overlays and charts",
   "keywords": [
     "terminal",
@@ -46,7 +46,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@textui/core": "^0.8.0"
+    "@textui/core": "^0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/control/text-input.ts

@@ -182,6 +182,12 @@ export const TextInput = defineComponent<TextInputProps>('TextInput', (props) =>
         : sliceColumns(shown, start, field),
       fg: empty ? 'subtle' : disabled ? 'disabled' : undefined,
       flex: 1,
+      // The name a theme styles this field's text under. Without it a theme
+      // could colour a list row and not the field a person types in - and the
+      // palette's search box, which is this component, could not be coloured
+      // at all. The placeholder and the disabled case state their own `fg`, so
+      // they keep the colours they had.
+      styleAs: 'TextInput',
     }),
   );
 });

package/src/display/marquee.ts

@@ -60,11 +60,23 @@ export const Marquee = defineComponent<MarqueeProps>('Marquee', (props) => {
   // at rather than at the rate it asked for.
   const [frame, setFrame] = useState(0);
   const seen = useRef(0);
-  const from = useRef(0);
-  useTicker((at) => { seen.current = at; setFrame(at - from.current); }, { fps, enabled: sliding });
+  // `null` until the first tick of a run, rather than 0.
+  //
+  // The ticker counts from the application's first frame, not from this
+  // component's, so a marquee that starts at frame 0 and subtracts a `from` of
+  // 0 begins at whatever number the application happens to be on - and a
+  // label scrolled to a cell nothing had travelled to yet is what opening a
+  // menu looked like. The effect below resets this, but it runs *after* the
+  // first tick, so the first tick has to be the one that starts the count.
+  const from = useRef<number | null>(null);
+  useTicker((at) => {
+    seen.current = at;
+    if (from.current === null) from.current = at;
+    setFrame(at - from.current);
+  }, { fps, enabled: sliding });
   // Back to the start whenever it stops or the words change, so the row you
   // leave is the row you saw when you arrived at it.
-  useEffect(() => { from.current = seen.current; setFrame(0); }, [sliding, content]);
+  useEffect(() => { from.current = null; setFrame(0); }, [sliding, content]);
 
   if (!sliding) return h('text', { content, truncate: 'end', ...rest });
 

package/src/navigation/menu.ts

@@ -59,6 +59,15 @@ export interface MenuProps extends BoxProps {
    * only follows.
    */
   interactive?: boolean;
+  /**
+   * What to say when nothing is selectable.
+   *
+   * A palette answers for an empty list itself: it knows *why* it is empty, and
+   * its own row can say which kind of nothing this is - nothing to choose,
+   * still asking, no match. Given one of its own it turns this off rather than
+   * putting both lines on the screen.
+   */
+  noMatch?: string | false;
 }
 
 /** The name a theme styles a menu row under. See `LIST`. */
@@ -69,7 +78,7 @@ export const Menu = defineComponent<MenuProps>('Menu', (props) => {
   const i18n = useI18n();
   const {
     items, onSelect, visibleRows, activeId, autoFocus, interactive = true,
-    descriptions = 'inline', ...rest
+    descriptions = 'inline', noMatch, ...rest
   } = props;
   const focus = useFocus({ autoFocus, disabled: !interactive });
   const selectable = items.filter((i) => !i.disabled);
@@ -202,8 +211,8 @@ export const Menu = defineComponent<MenuProps>('Menu', (props) => {
         ? [h('box', { key: `${item.id}-sep`, height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), row]
         : [row];
     }),
-    selectable.length === 0
-      ? h('text', { content: `  ${i18n.t('textui.menu.noMatch', undefined, 'no matches')}`, fg: 'subtle' })
+    selectable.length === 0 && noMatch !== false
+      ? h('text', { content: `  ${noMatch ?? i18n.t('textui.menu.noMatch', undefined, 'no matches')}`, fg: 'subtle' })
       : null,
   );
 });

package/src/overlay/command-palette.ts

@@ -439,7 +439,12 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   // It is the one line in the panel that wraps rather than truncates,
   // because it is the one place a sentence can be read whole.
   const chosen = pending ? offered[index] : undefined;
-  const detail = pending
+  // Nothing selectable is nothing to describe: the line under the list would
+  // otherwise keep the last answer's sentence, or repeat the question the row
+  // above has already asked.
+  const detail = rows.length === 0
+    ? ''
+    : pending
     ? chosen?.description
       ?? pending.arg.description
       ?? i18n.t(
@@ -549,6 +554,11 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
       descriptions: pending?.arg.descriptions ?? descriptions,
       interactive: false,
       activeId: rows[index],
+      // When the answer is a fixed set, the row above already says which kind
+      // of nothing this is and this would be the second line. Searching the
+      // command list has no such row, and there the menu's own line is the one
+      // that says it.
+      noMatch: pending ? false : undefined,
       onSelect: (id: string) => {
         const at = rows.indexOf(id);
         if (at >= 0) setHighlight(at);
@@ -560,7 +570,8 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
     // that shows only titles makes you run something to find out what it does.
     h('box', { direction: 'row', gap: 1, align: 'start' },
       h('text', { content: detail, fg: 'muted', flex: 1, wrap: 'word' }),
-      h('text', { content: `${rows.length}`, fg: 'subtle' })),
+      // A zero beside an empty line is a number with nothing to count.
+      rows.length > 0 ? h('text', { content: `${rows.length}`, fg: 'subtle' }) : null),
     h('box', { direction: 'row', gap: 1 },
       h('text', {
         content: pending

package/src/shells/workbench-shell.ts

@@ -28,7 +28,11 @@ export const WorkbenchShell = defineComponent<ShellProps>('WorkbenchShell', (pro
     height: '100%',
     bg: 'canvas',
     fg: 'text',
-    border: theme.border,
+    // The frame is chrome, not text. A box that states an `fg` draws its
+    // border in it - which is right for `<box fg="danger" border="single">`
+    // and wrong here, where the `fg` is the application's text colour: it made
+    // every screen's outermost edge as bright as the words inside it.
+    border: { style: theme.border, color: 'border' },
     ...props,
   },
     h(SurfaceArea, { surface: 'header' }),