@ssebastien/tcmd 0.1.3 → 0.1.7

package/src/js/tcmd/components/CommandArgRow.js

@@ -4,61 +4,87 @@
 // Created: 2026-10-09
 
 // Module: tcmd/components/CommandArgRow
-// CommandArgRow: one row shared by both command-panel columns. The operation
-// column passes `{ type: "op" }` rows (name = operation title, summary =
-// signature, `risk` tints destructive/caution operations); the argument column
-// passes `{ type: "arg" | "item" }` rows from `core/panel.panelRowList`. An
-// item shows a `[x]`/`[ ]` toggle with its basename and, dimmed after it, the
-// parent directory; a focused row carries a `>` marker so focus is not
-// colour-only. Reads the row bag `{ item, index, row, cursor, focus }` built by
-// `rows.js`.
+// CommandArgRow: one row shared by the command panel's two panes. The left pane
+// passes `{ type: "op" }` name-only rows (`risk` tints caution/destructive
+// categories) and `{ type: "group" }` headers (Command / File / Create / Edit / Delete). The
+// right pane passes `{ type: "arg" | "item" | "perm" | "frame" | "entry" |
+// "parent" | "run" }` rows: an argument header stacks its label over its value
+// — a bracketed field with a distinct background for textual arguments, a
+// summary otherwise; an item shows a `[x]`/`[ ]` (or radio) marker with its
+// basename and parent; `perm` is a `u/g/o` permission class with three r/w/x
+// cells; a `frame` draws a selection list's border; and `parent` is the
+// picker's `..` navigation row. Reads the row bag
+// `{ item, index, row, cursor, focus, permBit, value }`
+// built by `rows.js`.
 //
 // Environment: `accentFg` (focused row), `textFg`, `textSecondaryFg` (summary),
-// `accentSecondaryFg` (a selected item), `errorFg` (destructive op),
-// `warningFg` (caution op), `selectionBg` (row background), `focusedClass`
-// (web).
+// `textHeadingFg` (general headings), `accentSecondaryFg` (a selected item),
+// `errorFg` (destructive op/error), `warningFg` (caution op), `selectionBg`
+// (row background), `fieldBg`/`fieldFg` (editable values), `readonlyFg`
+// (read-only values), `borderSecondaryFg` (the list border), `focusedClass`
+// (web), `icons` (namespace marker).
 
 import { unwrap } from "select/state/cells"
+import { PERMISSION_BITS } from "../core/permissions.js"
 
 // Function: riskFg
-// The colour a row's risk maps to: red for destructive operations, amber for
-// caution (a move), null when the row is not risky.
+// The colour a row's category maps to: red for Delete, amber for Edit, null
+// when the row is neither.
 function riskFg(row, env) {
-	if (row?.type === "op" && row.risk === "destructive") return env.errorFg
-	if (row?.type === "op" && row.risk === "caution") return env.warningFg
+	if ((row?.type === "op" || row?.type === "run") && row.risk === "destructive") return env.errorFg
+	if ((row?.type === "op" || row?.type === "run") && row.risk === "caution") return env.warningFg
 	return null
 }
 
+// Function: groupFg
+// Color the purpose-group headings: Edit is amber and Delete is red.
+function groupFg(group, env) {
+	if (group === "Edit") return env.warningFg
+	if (group === "Delete") return env.errorFg
+	return env.textFg
+}
+
 // Function: rowName
-// The row's left cell: the operation title, an argument's name, or an item's
-// `[x] basename`.
+// The row's label: a group heading, operation name, argument label, `[Run]`
+// action, `[x] basename`, or picker entry (directories carry a trailing slash).
 function rowName(row) {
 	if (!row) return ""
+	if (row.type === "group") return row.name ?? ""
+	if (row.type === "run") return row.error ? "[Retry]" : row.armed ? "[Confirm]" : "[Run]"
 	if (row.type === "item") return `${row.marker ?? "[ ]"} ${row.name ?? ""}`
+	if (row.type === "perm") return row.label ?? ""
+	if (row.type === "parent") return ".."
+	if (row.type === "entry") return `${row.name ?? ""}${row.isDir ? "/" : ""}`
 	return row.name ?? ""
 }
 
 // Function: rowSummary
-// The row's right cell: the operation signature, an argument's binding
-// summary, or an item's parent directory.
+// The row's right cell: an argument's binding summary (or its value), an
+// item's parent directory, or a picker entry's kind.
 function rowSummary(row) {
 	if (!row) return ""
 	if (row.type === "item") return row.parent ?? ""
-	if (row.type === "op") return row.summary ?? ""
+	if (row.type === "parent") return "parent directory"
+	if (row.type === "entry") {
+		if (row.isSymlink && row.target) return `${row.target}`
+		return row.isDir ? "dir" : ""
+	}
 	return row.summary ?? ""
 }
 
 // Function: wantsFocus
-// The focus token a row belongs to: the operation column ("ops") or the
-// argument column ("args").
+// The focus token a row belongs to: the command list ("ops"), the argument
+// pane ("args"), or none (a group header or a list frame never takes the
+// cursor).
 function wantsFocus(row) {
+	if (row?.type === "group" || row?.type === "frame") return "none"
 	return row?.type === "op" ? "ops" : "args"
 }
 
 // Function: isFocused
-// True when this row owns the cursor in the focused column.
+// True when this row owns the cursor in the focused region.
 function isFocused(row, index, cursor, focus) {
-	if (!row || !focus) return false
+	if (!row || !focus || row.type === "group" || row.type === "frame") return false
 	return focus === wantsFocus(row) && index === cursor
 }
 
@@ -66,25 +92,115 @@ function isFocused(row, index, cursor, focus) {
 // Builds the CommandArgRow behavior map for the given renderer environment.
 function createBehaviors(env) {
 	const focused = (data) => isFocused(data.row, data.index, unwrap(data.cursor), unwrap(data.focus))
-	return {
+	const type = (data) => data.row?.type
+	const isList = (data) => type(data) === "item" || type(data) === "frame"
+	// A permission row has three bit cells; the bit cursor marks the one Space
+	// toggles, and a click toggles the cell it lands on.
+	const bits = (data) => data.row?.bits ?? []
+	const bitAt = (data, index) => bits(data)[index]
+	const bitFocused = (data, index) => focused(data) && (unwrap(data.permBit) ?? 0) === index
+	// The web classes that draw a selection's list box: the item rows carry the
+	// sides, the frame rows the top/bottom.
+	const listClass = (data) => {
+		if (!isList(data)) return null
+		if (type(data) === "frame") return data.row?.variant === "top" ? "is-list-top" : "is-list-bottom"
+		return "is-list-item"
+	}
+	// A textual argument header edits in place while it owns the cursor: its
+	// summary yields to a value input bound to the panel's edit cell.
+	const editing = (_self, data) => focused(data) && type(data) === "arg" && data.row?.textual === true
+	const behaviors = {
+		editing,
+		// --- shared row content ---
 		marker: (_self, data) => (focused(data) ? ">" : " "),
 		markerFg: () => env.accentFg,
+		// An argument's label sits on its own line, above the value.
 		name: (_self, data) => rowName(data.row),
+		// A permission row: its class label and three bit cells.
+		permClass: (_self, data) => data.row?.label ?? data.row?.classId ?? "",
+		isPerm: (_self, data) => type(data) === "perm",
 		rowBg: (_self, data) => (focused(data) ? env.selectionBg : undefined),
-		rowClass: (_self, data) => (focused(data) ? env.focusedClass : null),
+		rowClass: (_self, data) =>
+			[focused(data) ? env.focusedClass : null, listClass(data)].filter(Boolean).join(" ") || null,
+		rowSelected: (_self, data) => `${data.row?.selected === true}`,
 		rowFg: (_self, data) => {
-			// A risky operation (delete/erase/move) is always tinted — even
-			// focused — so danger reads at a glance; focus is carried by the
-			// `>` marker and the row background instead.
+			if (type(data) === "group") return groupFg(data.row?.group ?? data.row?.name, env)
 			const risk = riskFg(data.row, env)
 			if (risk) return risk
 			if (focused(data)) return env.accentFg
-			if (data.row?.type === "item" && data.row?.selected) return env.accentSecondaryFg
+			if (type(data) === "item" && data.row?.selected) return env.accentSecondaryFg
 			return env.textFg
 		},
 		summary: (_self, data) => rowSummary(data.row),
 		summaryFg: () => env.textSecondaryFg,
+		// The list branch repeats the marker/name/summary nodes, so it carries
+		// its own out-names (duplicate `out` names in one template collide).
+		listMarker: (_self, data) => (focused(data) ? ">" : " "),
+		listName: (_self, data) => rowName(data.row, env.icons),
+		listSummary: (_self, data) => rowSummary(data.row),
+		// --- layout branches ---
+		isArg: (_self, data) => type(data) === "arg",
+		isItem: (_self, data) => type(data) === "item",
+		isOp: (_self, data) => type(data) === "op",
+		isGroup: (_self, data) => type(data) === "group",
+		isEntry: (_self, data) => type(data) === "entry" || type(data) === "parent",
+		isRun: (_self, data) => type(data) === "run",
+		hasRunError: (_self, data) => type(data) === "run" && Boolean(data.row?.error),
+		isFrame: (_self, data) => type(data) === "frame",
+		isList: (_self, data) => isList(data),
+		showPlain: (_self, data) => type(data) === "op" || type(data) === "entry" || type(data) === "parent",
+		isPlain: (_self, data) => type(data) === "entry" || type(data) === "parent",
+		// An argument stacks its label over its value; every other row is one
+		// line tall.
+		rowHeight: (_self, data) => (type(data) === "arg" ? 2 : 1),
+		runMarginTop: (_self, data) => (type(data) === "run" ? 1 : 0),
+		runLabel: (_self, data) => (data?.row?.error ? "[Retry]" : data?.row?.armed ? "[Confirm]" : "[Run]"),
+		runAriaLabel: (_self, data) =>
+			data?.row?.error ? "Retry command" : data?.row?.armed ? "Confirm command" : "Run command",
+		runError: (_self, data) => data.row?.error ?? "",
+		runErrorFg: () => env.errorFg,
+		runFg: (_self, data) => riskFg(data.row, env) ?? env.textFg,
+		groupAttributes: () => env.groupAttributes ?? 0,
+		editable: (_self, data) => `${data.row?.editable === true}`,
+		// Editable values have a filled bracketed field; read-only summaries
+		// stay plain and muted.
+		fieldBg: (_self, data) => (data.row?.textual ? env.fieldBg : undefined),
+		fieldFg: (_self, data) =>
+			data.row?.textual ? (env.fieldFg ?? env.textFg) : (env.readonlyFg ?? env.textSecondaryFg),
+		textual: (_self, data) => data.row?.textual === true,
+		fieldOpen: (_self, data) => (data.row?.textual ? "[" : ""),
+		fieldClose: (_self, data) => (data.row?.textual ? "]" : ""),
+		// Selection lists share the argument pane's one-cell inset; the spacer
+		// is NBSP so the renderers do not collapse the leading run.
+		rowIndent: (_self, data) => (isList(data) ? 1 : 0),
+		listIndent: (_self, data) => 1,
+		listSpacer: (_self, data) => "\u00a0",
+		listBorder: (_self, data) => {
+			if (type(data) !== "frame") return ["left", "right"]
+			return data.row?.variant === "top" ? ["top", "left", "right"] : ["bottom", "left", "right"]
+		},
+		borderFg: () => env.borderSecondaryFg,
+	}
+	// r/w/x cells of a permission row, in the shared permission order so the
+	// templates can bind each cell without looping.
+	for (let i = 0; i < PERMISSION_BITS.length; i++) {
+		const bit = PERMISSION_BITS[i]
+		const name = bit.id.toUpperCase()
+		behaviors[`perm${name}`] = (_self, data) => (bitAt(data, i)?.selected ? bit.id : "-")
+		behaviors[`perm${name}On`] = (_self, data) => `${bitAt(data, i)?.selected === true}`
+		behaviors[`perm${name}Fg`] = (_self, data) =>
+			bitAt(data, i)?.selected ? env.accentSecondaryFg : env.textSecondaryFg
+		behaviors[`perm${name}Bg`] = (_self, data) =>
+			bitFocused(data, i) ? env.accentSecondaryBg : undefined
+		behaviors[`perm${name}Class`] = (_self, data) =>
+			[
+				bitAt(data, i)?.selected ? "is-on" : "is-off",
+				bitFocused(data, i) ? "is-bit-focused" : null,
+			]
+				.filter(Boolean)
+				.join(" ")
 	}
+	return behaviors
 }
 
 export { createBehaviors, isFocused, riskFg, rowName, rowSummary, wantsFocus }

package/src/js/tcmd/components/CommandArgRow.xml

@@ -1,5 +1,56 @@
-<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="row.key!panel:select">
-	<text out="marker" width="2" out:fg="markerFg"></text>
-	<text out="name" flexShrink="0" out:fg="rowFg" wrapMode="none"></text>
-	<text out="summary" flexGrow="1" flexShrink="1" minWidth="0" out:fg="summaryFg" wrapMode="none" truncate="true"></text>
+<box flexDirection="row" out:height="rowHeight" out:marginTop="runMarginTop" out:backgroundColor="rowBg" on:click="row.key!panel:select">
+	<!-- A selection's item list: indented under the value column and framed
+	     by the top/bottom border rows. -->
+	<text when="isList" out="listSpacer" wrapMode="none"></text>
+	<box when="isList" flexGrow="1" flexShrink="1" minWidth="0" flexDirection="row" columnGap="1"
+	     out:border="listBorder" out:borderColor="borderFg">
+		<text when="isItem" out="listMarker" width="2" out:fg="markerFg"></text>
+		<text when="isItem" out="listName" flexShrink="0" out:fg="rowFg" wrapMode="none"></text>
+		<text when="isItem" out="listSummary" flexGrow="1" flexShrink="1" minWidth="0" out:fg="summaryFg" wrapMode="none" truncate="true"></text>
+	</box>
+	<!-- An argument header: its label on one line, the value field under it.
+	     Both start one cell in from the pane border. -->
+	<box when="isArg" flexDirection="column" flexGrow="1" flexShrink="1" minWidth="0" paddingLeft="1">
+		<box flexDirection="row" height="1" columnGap="1" minWidth="0">
+			<text out="name" flexShrink="0" out:fg="rowFg" wrapMode="none"></text>
+		</box>
+		<box flexDirection="row" height="1" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
+			<box when="editing" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" out:backgroundColor="fieldBg" overflow="hidden">
+				<text when="textual" out="fieldOpen" out:fg="fieldFg"></text>
+				<input inout="value" flexGrow="1" minWidth="6" height="1" out:focused="editing"></input>
+				<text when="textual" out="fieldClose" out:fg="fieldFg"></text>
+			</box>
+			<box when="!editing" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" out:backgroundColor="fieldBg" overflow="hidden">
+				<text when="textual" out="fieldOpen" out:fg="fieldFg"></text>
+				<text out="summary" flexGrow="1" flexShrink="1" minWidth="0" out:fg="summaryFg" wrapMode="none" truncate="true"></text>
+				<text when="textual" out="fieldClose" out:fg="fieldFg"></text>
+			</box>
+		</box>
+	</box>
+	<!-- A permission class: its label and three clickable r/w/x cells. The bit
+	     cursor marks the cell Space toggles. -->
+	<box when="isPerm" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" height="1" columnGap="1" paddingLeft="1">
+		<text out="permClass" width="7" out:fg="rowFg" wrapMode="none"></text>
+		<box height="1" on:click="row.keyR!panel:perm." out:backgroundColor="permRBg"><text out="permR" width="1" out:fg="permRFg"></text></box>
+		<box height="1" on:click="row.keyW!panel:perm." out:backgroundColor="permWBg"><text out="permW" width="1" out:fg="permWFg"></text></box>
+		<box height="1" on:click="row.keyX!panel:perm." out:backgroundColor="permXBg"><text out="permX" width="1" out:fg="permXFg"></text></box>
+	</box>
+	<box when="isRun" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" columnGap="1" justifyContent="flex-start">
+		<text out="runLabel" out:fg="runFg" wrapMode="none"></text>
+	</box>
+	<!-- Bold color-group title; operations below it are indented. -->
+	<box when="isGroup" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" paddingLeft="1">
+		<text out="name" out:fg="rowFg" out:attributes="groupAttributes" wrapMode="none"></text>
+	</box>
+	<!-- Name-only operation row, indented beneath its group title. -->
+	<box when="isOp" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" columnGap="1" paddingLeft="2">
+		<text out="marker" width="2" out:fg="markerFg"></text>
+		<text out="name" flexShrink="0" out:fg="rowFg" wrapMode="none"></text>
+	</box>
+	<!-- Picker entries retain their cursor marker and trailing kind summary. -->
+	<box when="isEntry" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" columnGap="1">
+		<text out="marker" width="2" out:fg="markerFg"></text>
+		<text out="name" flexShrink="0" out:fg="rowFg" wrapMode="none"></text>
+		<text out="summary" flexGrow="1" flexShrink="1" minWidth="0" out:fg="summaryFg" wrapMode="none" truncate="true"></text>
+	</box>
 </box>

package/src/js/tcmd/components/CommandBar.html

@@ -1,4 +1,4 @@
-<footer class="command-bar">
+<footer class="command-bar" ref="box" when="showBar">
 	<nav when="showKeys" out:class="listClass" out="rows"></nav>
-	<span when="showStatus" out="status" out:class="statusClass"></span>
+	<span when="showStatus" out="status" out:class="statusClass" out:data-kind="notice.kind" role="status"></span>
 </footer>

package/src/js/tcmd/components/CommandBar.js

@@ -5,16 +5,17 @@
 
 // Module: tcmd/components/CommandBar
 // CommandBar: the bottom bar. By default it shows the keys available in the
-// current context (the command registry's `bar` commands, or the palette
-// hints while the palette is open); a pane error or a session notice takes
-// its place. Entries are bracket shorthands (see `CommandItem.js`) that wrap
-// onto as many rows as the width demands; the active pane's marked count
-// joins the list as a dimmed, non-clickable entry. The row logic lives in
-// `CommandItem.js`; this parent maps its `items` to rows.
+// current context (the command registry's `BAR_COMMANDS`, or the hints of the
+// overlay that owns the keyboard); a pane error or a session notice takes
+// its place. Entries are bracket shorthands (see `CommandItem.js`) that stay
+// on one line: entries that do not fit are dropped and a trailing ellipsis
+// takes their place, while the active pane's marked count joins the list as a
+// dimmed, non-clickable entry. The row logic lives in `CommandItem.js`; this
+// parent maps its `items` to rows.
 //
 // The web presentation swaps the key list for a single status line
 // (`showKeys`/`showStatus`/`status`/`statusClass`); the TUI presentation
-// keeps the wrapped key list and swaps it for the status when there is one.
+// keeps the single-line key list and swaps it for the status when there is one.
 //
 // Environment: `rows(data)` returning the keyed row list, `listClass` (web
 // root class), `errorClass` (web), and the TUI colors plus the
@@ -23,6 +24,10 @@
 import { unwrap } from "select/state/cells"
 import { commandWidth } from "./CommandItem.js"
 
+// Constant: ELLIPSIS
+// The trailing marker shown when the bar cannot fit every entry.
+const ELLIPSIS = { id: null, title: "…", dim: true }
+
 // Function: commandBarStatus
 // The one-line status the bar shows when something needs attention: the
 // session notice first, then a pane error. Empty when everything is fine.
@@ -52,25 +57,25 @@ function commandBarMarksItem(data) {
 	return marks ? { id: null, title: marks, dim: true } : null
 }
 
-// Function: commandBarRowCount
-// How many rows the wrapped entries occupy at `width` columns (greedy fill,
-// matching the flex layout, separators included). `width <= 0` (unknown)
-// assumes a single row.
-function commandBarRowCount(items, width) {
-	if (!width || width <= 0) return 1
-	let rows = 1
-	let cols = 0
-	let index = 0
-	for (const item of items ?? []) {
-		const w = commandWidth(item, index)
-		if (cols > 0 && cols + w > width) {
-			rows++
-			cols = 0
+// Function: commandBarFit
+// Truncates entries to `width` columns, appending a dim ellipsis when an entry
+// had to be dropped. `width <= 0` (not measured yet) keeps every entry and
+// lets the renderer clip. The bar is always one line: entries never wrap.
+function commandBarFit(items, width) {
+	const list = items ?? []
+	if (!width || width <= 0) return list
+	let used = 0
+	for (let i = 0; i < list.length; i++) {
+		const next = used + commandWidth(list[i])
+		if (next > width) {
+			const kept = list.slice(0, i)
+			// The ellipsis needs its own column plus the separating space.
+			while (kept.length && used + 2 > width) used -= commandWidth(kept.pop())
+			return [...kept, ELLIPSIS]
 		}
-		cols += w
-		index++
+		used = next
 	}
-	return rows
+	return list
 }
 
 // Function: isInfo
@@ -91,7 +96,8 @@ function statusKind(data) {
 function createBehaviors(env) {
 	const behaviors = {
 		listClass: () => env?.listClass,
-		showKeys: (_self, data) => !commandBarStatus(data),
+		showBar: (_self, data) => !unwrap(data?.desktopMode) || Boolean(commandBarStatus(data)),
+		showKeys: (_self, data) => !unwrap(data?.desktopMode) && !commandBarStatus(data),
 		showStatus: (_self, data) => Boolean(commandBarStatus(data)),
 		status: (_self, data) => commandBarStatus(data),
 		statusBg: (_self, data) => {
@@ -116,11 +122,11 @@ function createBehaviors(env) {
 		},
 	}
 	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
+		behaviors.rows = (self, data) => env.rows(self, data)
 	}
 	return behaviors
 }
 
-export { commandBarMarks, commandBarMarksItem, commandBarRowCount, commandBarStatus, createBehaviors }
+export { commandBarFit, commandBarMarks, commandBarMarksItem, commandBarStatus, createBehaviors }
 
 // EOF

package/src/js/tcmd/components/CommandBar.xml

@@ -1,4 +1,4 @@
-<box flexDirection="column" overflow="hidden">
-	<box when="showKeys" out="rows" flexDirection="row" flexWrap="wrap" flexGrow="1" overflow="hidden"></box>
+<box ref="box" flexDirection="column" overflow="hidden">
+	<box when="showKeys" out="rows" flexDirection="row" flexWrap="nowrap" flexGrow="1" overflow="hidden"></box>
 	<text when="showStatus" out="status" out:fg="statusFg" out:bg="statusBg" flexShrink="0"></text>
 </box>

package/src/js/tcmd/components/CommandItem.html

@@ -1,3 +1,3 @@
-<button class="command-key" type="button" on:click="item.id!commandbar:run">
+<button class="command-key" type="button" out:disabled="itemHint" on:click="item.id!commandbar:run">
 	<span out="itemLabel"></span>
 </button>

package/src/js/tcmd/components/CommandItem.js

@@ -8,16 +8,16 @@
 // both engines. `item.id` may be null for pure key hints, in which case a
 // click dispatches nothing.
 //
-// Each entry renders as a plain bracket shorthand, preceded by a dim `|`
-// divider (except the first entry):
+// Each entry renders as a plain bracket shorthand:
 //
-//   [Open ⏎]   — the bracket and title in the text colour, the key glyph in
-//                the accent (primary) or secondary accent, and a trailing
-//                space separating it from the next entry.
+//   [Open ⏎]   — the brackets in the dim text colour, the title in the text
+//                colour, the key glyph in the accent (primary) or secondary
+//                accent, and a trailing space separating it from the next
+//                entry. Entries are separated by that space alone — no
+//                divider glyph.
 //
 // Entries without a key (the marked count) render as a dimmed plain word
-// with no brackets. The web renders the same label as a single string (its
-// buttons are separated by their gap, not the pipe).
+// with no brackets. The web renders the same label as a single string.
 //
 // Environment: `accentFg` (primary), `accentSecondaryFg` (secondary),
 // `textFg`, `textSecondaryFg`.
@@ -25,8 +25,12 @@
 // Function: keyGlyph
 // The shorthand glyph for a shortcut label: ⏎ for Enter, ⇥ for Tab.
 function keyGlyph(keys) {
+	if (!keys) return keys
 	const GLYPHS = { Enter: "⏎", "↵": "⏎", Tab: "⇥" }
-	return GLYPHS[keys] ?? keys
+	return keys
+		.split("/")
+		.map((key) => GLYPHS[key] ?? (key.endsWith("Tab") ? `${key.slice(0, -3)}⇥` : key))
+		.join("/")
 }
 
 // Function: commandLabel
@@ -36,16 +40,10 @@ function commandLabel(item) {
 	return item.keys ? `[${item.title} ${keyGlyph(item.keys)}] ` : `${item.title} `
 }
 
-// Constant: COMMAND_SEP
-// The divider drawn before every entry but the first: a dim pipe and the
-// space that keeps it clear of the button.
-const COMMAND_SEP = "| "
-
 // Function: commandWidth
-// Columns the entry occupies: its label plus the leading separator when it
-// is not the first entry.
-function commandWidth(item, index) {
-	return commandLabel(item).length + (index > 0 ? COMMAND_SEP.length : 0)
+// Columns the entry occupies: its label, brackets and trailing space included.
+function commandWidth(item) {
+	return commandLabel(item).length
 }
 
 // Function: isPrimary
@@ -57,22 +55,24 @@ function isPrimary(item) {
 // Function: createBehaviors
 // Builds the CommandItem behavior map for the given renderer environment.
 function createBehaviors(env) {
-	const head = (_self, data) => (data.item?.keys ? `[${data.item.title} ` : `${data.item?.title ?? ""} `)
 	return {
 		// Web: the whole shorthand as one label.
 		itemLabel: (_self, data) => commandLabel(data.item),
-		// TUI: the dim pipe divider, then the bracket + title head, the
-		// accent key glyph, the closer.
-		itemSep: (_self, data) => (data.index > 0 ? COMMAND_SEP : ""),
-		itemSepFg: () => env?.textSecondaryFg,
-		itemHead: head,
+		itemHint: (_self, data) => !data.item?.id,
+		// TUI: the dim brackets around the bright title, then the accent key
+		// glyph and the closer. Keyless entries (the marked count) render as a
+		// plain dim word, with no brackets.
+		itemOpen: (_self, data) => (data.item?.keys ? "[" : ""),
+		itemOpenFg: () => env?.textSecondaryFg,
+		itemHead: (_self, data) => `${data.item?.title ?? ""} `,
 		itemFg: (_self, data) => (data.item?.keys ? env?.textFg : env?.textSecondaryFg),
 		keyText: (_self, data) => (data.item?.keys ? keyGlyph(data.item.keys) : ""),
 		keyFg: (_self, data) => (isPrimary(data.item) ? env?.accentFg : env?.accentSecondaryFg),
-		endText: (_self, data) => (data.item?.keys ? "] " : ""),
+		itemClose: (_self, data) => (data.item?.keys ? "] " : ""),
+		itemCloseFg: () => env?.textSecondaryFg,
 	}
 }
 
-export { COMMAND_SEP, commandLabel, commandWidth, createBehaviors, isPrimary, keyGlyph }
+export { commandLabel, commandWidth, createBehaviors, isPrimary, keyGlyph }
 
 // EOF

package/src/js/tcmd/components/CommandItem.xml

@@ -1,6 +1,6 @@
 <box flexDirection="row" height="1" flexShrink="0" on:click="item.id!commandbar:run">
-	<text out="itemSep" out:fg="itemSepFg" wrapMode="none"></text>
+	<text out="itemOpen" out:fg="itemOpenFg" wrapMode="none"></text>
 	<text out="itemHead" out:fg="itemFg" wrapMode="none"></text>
 	<text out="keyText" out:fg="keyFg" wrapMode="none"></text>
-	<text out="endText" out:fg="itemFg" wrapMode="none"></text>
+	<text out="itemClose" out:fg="itemCloseFg" wrapMode="none"></text>
 </box>

package/src/js/tcmd/components/CommandPanel.html

@@ -0,0 +1,29 @@
+<section class="command-panel" when="open" role="dialog" aria-modal="true" aria-label="Command panel" tabindex="-1" on:click="!dialog:panel-cancel">
+	<div class="command-dialog" on:click="dialogStop">
+		<header class="panel-title" out="title"></header>
+		<button class="panel-close" type="button" tabindex="-1" aria-label="Close command panel" on:click="!panel:close." out="closeHint"></button>
+		<div class="panel-columns">
+			<div class="panel-command-column">
+				<label class="panel-query-line">
+					<span out="sign"></span>
+					<input class="panel-query" type="text" inout="query" aria-label="Filter commands" />
+				</label>
+				<ul class="panel-ops" aria-label="Commands" out="opRows"></ul>
+			</div>
+			<div class="panel-args-column">
+				<p class="panel-command-name" out="commandName"></p>
+				<div when="picking" out="pickerView|FilePicker"></div>
+				<div class="panel-args-scroll" when="!picking">
+					<ul class="panel-args" aria-label="Arguments" out="argRows"></ul>
+					<pre class="panel-preview" when="hasPreview" out="preview"></pre>
+					<ul class="panel-run-action" aria-label="Run command" out="runRows"></ul>
+					<div class="panel-run-error-block" when="hasRunError">
+						<p out="runError"></p>
+					</div>
+					<p class="panel-confirm-command" when="hasConfirmCommand" out="confirmCommand" out:data-risk="confirmRisk"></p>
+				</div>
+			</div>
+		</div>
+		<footer out="footer"></footer>
+	</div>
+</section>