@ssebastien/tcmd 0.1.2 → 0.1.4

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

@@ -0,0 +1,17 @@
+<li class="panel-row" out:class="rowClass" out:data-risk="row.risk" out:data-type="row.type" out:data-selected="rowSelected" on:click="row.key!panel:select">
+	<span class="panel-list-indent" when="isList" out="listSpacer"></span>
+	<span class="panel-list-box" when="isList">
+		<span class="panel-marker" out="marker"></span>
+		<span class="panel-name" out="name"></span>
+		<span class="panel-summary" out="summary"></span>
+	</span>
+	<span class="panel-marker" when="!isList" out="marker"></span>
+	<span class="panel-name" when="!isList" out="name"></span>
+	<span class="panel-field" when="isArg">
+		<span class="panel-field-bracket" out="fieldOpen"></span>
+		<input class="panel-value" when="editing" type="text" inout="value" aria-label="Argument value" />
+		<span class="panel-field-value" when="!editing" out="summary"></span>
+		<span class="panel-field-bracket" out="fieldClose"></span>
+	</span>
+	<span class="panel-summary" when="isPlain" out="summary"></span>
+</li>

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

@@ -4,19 +4,23 @@
 // 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" }` rows (name = entry name, summary = signature or key
+// shortcut, `risk` tints destructive/caution operations, `source` marks the
+// namespace) and `{ type: "group" }` header rows ("System" / "Commands"). The
+// right pane passes `{ type: "arg" | "item" | "frame" | "entry" }` rows: an
+// argument header shows an aligned label and its value — a bracketed field with
+// a distinct background for a textual argument, a summary otherwise; an item
+// shows a `[x]`/`[ ]` (or radio) marker with its basename and parent; and a
+// `frame` row draws the top/bottom of the bordered list a selection's items sit
+// in. Reads the row bag `{ item, index, row, cursor, focus, value, labelWidth }`
+// 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` (a group header), `accentSecondaryFg` (a selected item),
+// `errorFg` (destructive op), `warningFg` (caution op), `selectionBg` (row
+// background), `fieldBg`/`fieldFg` (the value field), `borderSecondaryFg` (the
+// list border), `focusedClass` (web), `icons` (namespace marker).
 
 import { unwrap } from "select/state/cells"
 
@@ -30,35 +34,44 @@ function riskFg(row, env) {
 }
 
 // Function: rowName
-// The row's left cell: the operation title, an argument's name, or an item's
-// `[x] basename`.
+// The row's left cell: a group header's label, an operation's name, an
+// argument's label, an item's `[x] basename`, or a picker entry (directories
+// carry a trailing slash).
 function rowName(row) {
 	if (!row) return ""
+	if (row.type === "group") return row.name ?? ""
 	if (row.type === "item") return `${row.marker ?? "[ ]"} ${row.name ?? ""}`
+	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 entry's argument list or key shortcut, 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 === "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,24 +79,71 @@ 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))
+	const type = (data) => data.row?.type
+	const isList = (data) => type(data) === "item" || type(data) === "frame"
+	// 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
 	return {
+		editing,
+		// --- shared row content ---
 		marker: (_self, data) => (focused(data) ? ">" : " "),
 		markerFg: () => env.accentFg,
-		name: (_self, data) => rowName(data.row),
+		// An argument label is padded to the column width so values line up
+		// across arguments (both renderers honor the spaces).
+		name: (_self, data) => {
+			const text = rowName(data.row)
+			return type(data) === "arg" ? text.padEnd(data.labelWidth ?? 8) : text
+		},
 		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 env.textHeadingFg
 			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",
+		isFrame: (_self, data) => type(data) === "frame",
+		isList: (_self, data) => isList(data),
+		isPlain: (_self, data) => !isList(data) && type(data) !== "arg",
+		labelWidth: (_self, data) => data.labelWidth ?? 8,
+		// The value field: a distinct background and a `[ ]` frame.
+		fieldBg: () => env.fieldBg,
+		fieldFg: () => env.fieldFg ?? env.textFg,
+		fieldOpen: () => "[",
+		fieldClose: () => "]",
+		// The list indents under the value column: the marker (2) plus the gap
+		// (1) plus the label column plus the gap (1). The spacer is NBSP so the
+		// renderers do not collapse the leading run.
+		rowIndent: (_self, data) => (isList(data) ? 4 + (data.labelWidth ?? 8) : 0),
+		listIndent: (_self, data) => 4 + (data.labelWidth ?? 8),
+		listSpacer: (_self, data) => "\u00a0".repeat(4 + (data.labelWidth ?? 8)),
+		listBorder: (_self, data) => {
+			if (type(data) !== "frame") return ["left", "right"]
+			return data.row?.variant === "top" ? ["top", "left", "right"] : ["bottom", "left", "right"]
+		},
+		borderFg: () => env.borderSecondaryFg,
 	}
 }
 

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

@@ -1,5 +1,32 @@
-<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" height="1" 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: an aligned label and a bracketed value field. -->
+	<box when="isArg" 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>
+		<box when="editing" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" out:backgroundColor="fieldBg" overflow="hidden">
+			<text out="fieldOpen" out:fg="fieldFg"></text>
+			<input inout="value" flexGrow="1" minWidth="6" height="1" out:focused="editing"></input>
+			<text out="fieldClose" out:fg="fieldFg"></text>
+		</box>
+		<box when="!editing" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" out:backgroundColor="fieldBg" overflow="hidden">
+			<text out="fieldOpen" out:fg="fieldFg"></text>
+			<text out="summary" flexGrow="1" flexShrink="1" minWidth="0" out:fg="summaryFg" wrapMode="none" truncate="true"></text>
+			<text out="fieldClose" out:fg="fieldFg"></text>
+		</box>
+	</box>
+	<!-- Operation, group and picker-entry rows: marker + name + summary. -->
+	<box when="isPlain" 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">
 	<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,8 +5,8 @@
 
 // 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
+// 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 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
@@ -116,7 +116,7 @@ function createBehaviors(env) {
 		},
 	}
 	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
+		behaviors.rows = (self, data) => env.rows(self, data)
 	}
 	return behaviors
 }

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

@@ -61,6 +61,7 @@ function createBehaviors(env) {
 	return {
 		// Web: the whole shorthand as one label.
 		itemLabel: (_self, data) => commandLabel(data.item),
+		itemHint: (_self, data) => !data.item?.id,
 		// TUI: the dim pipe divider, then the bracket + title head, the
 		// accent key glyph, the closer.
 		itemSep: (_self, data) => (data.index > 0 ? COMMAND_SEP : ""),

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">
+	<div class="command-dialog">
+		<header out="title"></header>
+		<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 class="panel-picker" when="picking">
+					<p class="panel-picker-path" out="pickerPath"></p>
+					<label class="panel-picker-line">
+						<span out="pickerSign"></span>
+						<input class="panel-picker-query" type="text" inout="pickerQuery" aria-label="Filter entries" />
+					</label>
+				</div>
+				<p class="panel-args-empty" when="argsEmpty" out="argsEmptyText"></p>
+				<ul class="panel-args" aria-label="Arguments" out="argRows"></ul>
+				<p class="panel-args-empty" when="pickerEmpty" out="pickerEmptyText"></p>
+				<div class="panel-runs" out:data-runnable="runnableState"><pre out="preview"></pre></div>
+			</div>
+		</div>
+		<footer out="footer"></footer>
+	</div>
+</section>

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

@@ -4,95 +4,97 @@
 // Created: 2026-10-09
 
 // Module: tcmd/components/CommandPanel
-// CommandPanel: the Commando-style overlay (`m` / `:`). A filter input at the
-// top narrows the left operation list as you type (the matching command takes
-// the cursor); a right column shows the selected operation's arguments: one
-// header row per argument (its name and binding summary) and, for a selection,
-// one row per path with a `[x]`/`[ ]` toggle. A vertical rule divides the two
-// columns, a horizontal one separates them from the "runs" line below, which
-// shows the assembled command the draft maps to. The footer advertises the
-// panel keys. The row logic lives in `CommandArgRow.js`; this parent maps both
-// the operation list and the flattened argument rows.
+// CommandPanel: the one entry point (`:`), a two-pane palette. The left pane
+// holds a `:` filter above the command list — the CLI operations, flat. The
+// right pane lists the selected operation's arguments — one row per argument,
+// its label and its value (a bracketed field, or a checkbox/radio list of the
+// selected paths) — under the operation's name, with the resolved command at
+// the pane's foot. The row logic lives in `CommandArgRow.js`; this parent maps
+// the command list and the argument rows.
 //
 // Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
-// (footer), `textHeadingFg` (title/sign), `accentFg` (preview),
-// `errorFg` (unrunnable preview), `opRows(self, data)` / `argRows(self, data)`
-// returning the keyed row lists, and `argScrollTop(self, data)` (TUI viewport
-// tracking).
+// (footer), `textHeadingFg` (title/sign/command name), `opRows(self, data)` /
+// `argRows(self, data)` returning the keyed row lists, and
+// `argScrollTop(self, data)` (TUI viewport tracking).
 
 import { unwrap } from "select/state/cells"
 import { PANEL_FOCUS } from "../core/panel.js"
 
 // Function: panelTitle
-// " Command · copy " while an operation is selected (spaces so the title sits
+// " Command · copy " while an entry is selected (spaces so the title sits
 // clear of the border corners).
-function panelTitle(op) {
-	const name = unwrap(op)?.name
+function panelTitle(entry) {
+	const name = unwrap(entry)?.name
 	return name ? ` Command · ${name} ` : " Command "
 }
 
 // Function: panelFooter
-const PANEL_FOOTER = "type to filter   ⇥ args   Spc toggle   ↵ run   Esc close"
+const PANEL_FOOTER = "type to filter   ⇥ args   ⌃O browse   Spc toggle   ↵ run   Esc close"
+
+// Function: pickerFooter
+const PICKER_FOOTER = "type to filter   ↑↓ row   → open   ↵ choose   ⌃↵ this dir   ⌫ up   Esc back"
 
 // Function: panelSign
-// The prompt before the command filter input (a trailing space so the typed
-// text doesn't crowd the arrow; overridable per renderer).
+// The filter prompt (`:`) before the command filter input.
 function panelSign() {
-	return "› "
+	return ":"
 }
 
 // Function: createBehaviors
 // Builds the CommandPanel behavior map for the given renderer environment.
 function createBehaviors(env) {
-	// The assembled command line's colour, shared by the line and its "runs"
-	// label: the preview reads as an error until every required argument is
-	// filled.
-	const previewColor = (data) => (unwrap(data.runnable) === false ? env.errorFg ?? env.accentFg : env.accentFg)
+	const panelOpen = (_self, data) => Boolean(unwrap(data.open))
 	const behaviors = {
 		bg: () => env.overlayBg,
 		borderFg: () => env.borderPrimaryActiveFg,
-		// Enter in a text field runs the operation (the App key handler routes
-		// Enter for the non-input cases).
+		// The right pane's header: the selected command's name.
+		commandName: (_self, data) => unwrap(data.entry)?.name ?? "",
+		commandNameFg: () => env.textHeadingFg,
 		confirm: (self) => self.pub("panel:confirm"),
-		// The argument value field appears only while a textual argument owns
-		// the cursor; otherwise the command filter input keeps focus.
-		fieldVisible: (_self, data) => Boolean(unwrap(data.textual)) && unwrap(data.focus) === PANEL_FOCUS.ARGS,
-		fieldFocused: (_self, data) => Boolean(unwrap(data.textual)) && unwrap(data.focus) === PANEL_FOCUS.ARGS,
-		fieldPrompt: (_self, data) => {
-			const row = unwrap(data.argRow)
-			return row?.type === "arg" ? `${row.name}: ` : ""
-		},
-		footer: () => PANEL_FOOTER,
+		// The argument pane's empty state: an operation with no bound rows has
+		// nothing to fill. While picking the picker's own empty state stands in.
+		argsEmpty: (_self, data) =>
+			!unwrap(data.picking) && (unwrap(data.rows)?.length ?? 0) === 0,
+		argsEmptyText: () => "no arguments",
+		// The file picker sub-mode: a path line, its own filter input, and the
+		// entry rows (rendered through the shared arg-row map).
+		picking: (_self, data) => Boolean(unwrap(data.picking)),
+		pickerPath: (_self, data) => unwrap(data.pickerPath) ?? "",
+		pickerSign: () => "⌕ ",
+		pickerFocused: (self, data) => panelOpen(self, data) && Boolean(unwrap(data.picking)),
+		pickerEmpty: (_self, data) =>
+			Boolean(unwrap(data.picking)) && (unwrap(data.rows)?.length ?? 0) === 0,
+		pickerEmptyText: () => "  empty",
+		footer: (_self, data) => (unwrap(data?.picking) ? PICKER_FOOTER : PANEL_FOOTER),
 		footerFg: () => env.textSecondaryFg,
-		// Dividers: a vertical rule between the operation list and the argument
-		// sidebar, a horizontal one above the "runs" preview — both in the
-		// secondary border colour, like the pane header rules.
+		// Dividers: a vertical rule between the panes, horizontal ones under the
+		// filter and above the resolved command — all in the secondary border
+		// colour, like the pane header rules.
 		ruleFg: () => env.borderSecondaryFg,
 		sideRule: () => ["left"],
 		headRule: () => ["top"],
 		labelFg: () => env.textSecondaryFg,
 		focusArgs: (_self, data) => unwrap(data.focus) === PANEL_FOCUS.ARGS,
-		focusOps: (_self, data) => unwrap(data.focus) !== PANEL_FOCUS.ARGS,
+		focusOps: (_self, data) => unwrap(data.focus) === PANEL_FOCUS.OPS,
 		open: (_self, data) => Boolean(unwrap(data.open)),
-		// The assembled command line the draft maps to, and its colour (see
-		// `previewColor`); the "runs" label wears the same colour so the two
-		// read as one block.
+		// The resolved command the draft expands to, dim, at the foot of the
+		// argument pane; a `«NAME»` marks a required argument still to fill.
 		preview: (_self, data) => unwrap(data.command) ?? "",
-		previewFg: (_self, data) => previewColor(data),
-		previewLabel: () => "runs",
-		previewLabelFg: (_self, data) => previewColor(data),
-		// The filter input owns the keyboard while the panel is open and the
-		// command column is focused; typing narrows the operation list.
-		queryFocused: (_self, data) => Boolean(unwrap(data.open)) && unwrap(data.focus) !== PANEL_FOCUS.ARGS,
+		runnableState: (_self, data) => `${unwrap(data.runnable) !== false}`,
+		previewFg: () => env.textSecondaryFg,
+		// The filter input owns the keyboard while the panel is open, the
+		// command list is focused and the picker is not browsing.
+		queryFocused: (self, data) =>
+			panelOpen(self, data) && !unwrap(data.picking) && unwrap(data.focus) !== PANEL_FOCUS.ARGS,
 		sign: () => panelSign(),
 		signFg: () => env.textHeadingFg,
-		title: (_self, data) => panelTitle(data.operation),
+		title: (_self, data) => panelTitle(data.entry),
 		titleColor: () => env.textHeadingFg,
 	}
-	if (env?.opRows) behaviors.opRows = (_self, data) => env.opRows(self, data)
-	if (env?.argRows) behaviors.argRows = (_self, data) => env.argRows(self, data)
+	if (env?.opRows) behaviors.opRows = (self, data) => env.opRows(self, data)
+	if (env?.argRows) behaviors.argRows = (self, data) => env.argRows(self, data)
 	if (env?.argScrollTop) behaviors.argScrollTop = (self, data) => env.argScrollTop(self, data)
 	return behaviors
 }
 
-export { PANEL_FOOTER, createBehaviors, panelSign, panelTitle }
+export { PANEL_FOOTER, PICKER_FOOTER, createBehaviors, panelSign, panelTitle }

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

@@ -2,31 +2,45 @@
 	<box width="80%" height="72%" border borderStyle="rounded"
 	     out:title="title" out:titleColor="titleColor" out:borderColor="borderFg"
 	     out:backgroundColor="bg" flexDirection="column">
-		<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
-			<text out="sign" out:fg="signFg" wrapMode="none"></text>
-			<input ref="query" inout="query" flexGrow="1" height="1" out:focused="queryFocused" on:enter="confirm"></input>
-		</box>
-		<!-- Horizontal rule under the filter input. -->
-		<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
-		<box flexDirection="row" flexGrow="1" overflow="hidden" columnGap="1">
-			<scrollbox flexGrow="2">
-				<box out="opRows" flexDirection="column"></box>
-			</scrollbox>
-			<!-- Vertical rule between the operation list and the argument sidebar. -->
+		<box flexDirection="row" flexGrow="1" overflow="hidden">
+			<!-- Left pane: the `:` filter over the grouped command list. -->
+			<box flexDirection="column" flexGrow="2" flexBasis="0" overflow="hidden">
+				<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+					<text out="sign" out:fg="signFg" wrapMode="none"></text>
+					<input ref="query" inout="query" flexGrow="1" height="1" out:focused="queryFocused"></input>
+				</box>
+				<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
+				<scrollbox flexGrow="1">
+					<box out="opRows" flexDirection="column"></box>
+				</scrollbox>
+			</box>
+			<!-- Vertical rule between the panes. -->
 			<box width="1" out:border="sideRule" out:borderColor="ruleFg"></box>
-			<scrollbox ref="args" flexGrow="3" out:scrollTop="argScrollTop">
-				<box out="argRows" flexDirection="column"></box>
-			</scrollbox>
-		</box>
-		<!-- Horizontal rule above the assembled command preview. -->
-		<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
-		<box flexDirection="column" paddingLeft="1" paddingRight="1" flexShrink="0" overflow="hidden">
-			<text out="previewLabel" out:fg="previewLabelFg" wrapMode="none"></text>
-			<text out="preview" out:fg="previewFg" wrapMode="word"></text>
-		</box>
-		<box when="fieldVisible" flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
-			<text out="fieldPrompt" out:fg="labelFg" wrapMode="none"></text>
-			<input inout="value" flexGrow="1" height="1" out:focused="fieldFocused" on:enter="confirm"></input>
+			<!-- Right pane: the command name, its arguments, the resolved command. -->
+			<box flexDirection="column" flexGrow="3" flexBasis="0" overflow="hidden">
+				<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+					<text out="commandName" out:fg="commandNameFg" wrapMode="none"></text>
+				</box>
+				<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
+				<scrollbox ref="args" flexGrow="1" out:scrollTop="argScrollTop">
+					<box flexDirection="column">
+						<!-- File picker sub-mode: the browsed path, its own filter,
+						     then the entry rows (which arrive through `argRows`). -->
+						<text when="picking" out="pickerPath" out:fg="labelFg" paddingLeft="1" wrapMode="none" truncate="true"></text>
+						<box when="picking" flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+							<text out="pickerSign" out:fg="signFg" wrapMode="none"></text>
+							<input ref="pickQuery" inout="pickerQuery" flexGrow="1" height="1" out:focused="pickerFocused"></input>
+						</box>
+						<text when="argsEmpty" out="argsEmptyText" out:fg="labelFg" paddingLeft="1" wrapMode="none"></text>
+						<box out="argRows" flexDirection="column"></box>
+						<text when="pickerEmpty" out="pickerEmptyText" out:fg="labelFg" paddingLeft="1" wrapMode="none"></text>
+					</box>
+				</scrollbox>
+				<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
+				<box flexDirection="column" flexShrink="0" paddingLeft="1" paddingRight="1" overflow="hidden">
+					<text out="preview" out:fg="previewFg" wrapMode="word"></text>
+				</box>
+			</box>
 		</box>
 		<box flexDirection="row" height="1" paddingLeft="1">
 			<text out="footer" out:fg="footerFg"></text>

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

@@ -1,3 +1,3 @@
-<div class="confirm" when="visible">
+<div class="confirm" when="visible" role="dialog" aria-modal="true" aria-label="Confirm operation" tabindex="-1">
 	<p out="text"></p>
 </div>

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

@@ -1,15 +1,15 @@
-<div class="entry-detail">
+<div class="entry-detail" ref="box">
 	<div class="entry-detail-line">
-		<span class="entry-detail-indent" out="detailIndent"></span>
-		<span class="entry-detail-marked" out="detailMarked"></span>
+		<span class="entry-detail-indent" when="detailHasIndent" out="detailIndent"></span>
+		<span class="entry-detail-marked" when="detailHasMarked" out="detailMarked"></span>
 		<span class="entry-detail-sep" when="detailSepTime" out="detailSep"></span>
-		<span class="entry-detail-time" out="detailTime"></span>
+		<span class="entry-detail-time" when="detailHasTime" out="detailTime"></span>
 		<span class="entry-detail-sep" when="detailSepType" out="detailSep"></span>
-		<span class="entry-detail-type" out:class="detailTypeClass" out="detailType"></span>
+		<span class="entry-detail-type" when="detailHasType" out:class="detailTypeClass" out="detailType"></span>
 		<span class="entry-detail-sep" when="detailSepSize" out="detailSep"></span>
-		<span class="entry-detail-size" out="detailSize"></span>
+		<span class="entry-detail-size" when="detailHasSize" out="detailSize"></span>
 		<span class="entry-detail-spacer" when="detailHasMode"></span>
 		<span class="entry-detail-sep" when="detailSepMode" out="detailSep"></span>
-		<span class="entry-detail-mode" out="detailMode"></span>
+		<span class="entry-detail-mode" when="detailHasMode" out="detailMode"></span>
 	</div>
 </div>

package/src/js/tcmd/components/EntryDetail.js

@@ -135,7 +135,7 @@ function createBehaviors(env = {}) {
 		const entry = unwrap(data.entry)
 		const marked = unwrap(data.marked)
 		const markedCount = marked?.size ?? 0
-		const width = env.width ? env.width(self) : 0
+		const width = env.width ? env.width(self, data) : 0
 		const kept = fitBlocks(detailBlocks(entry, markedCount), width, measure, env.elide)
 		const keys = new Set(kept.map((block) => block.key))
 		const texts = {}

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

@@ -1 +1,5 @@
-<ul class="file-list" ref="list" out="rows"></ul>
+<div class="file-list">
+	<ul ref="list" out="rows"></ul>
+	<p when="showLoading" out="loadingText"></p>
+	<p when="showEmpty" out="emptyText"></p>
+</div>

package/src/js/tcmd/components/FileList.js

@@ -25,7 +25,8 @@ function createBehaviors(env) {
 		loadingFg: () => env?.textSecondaryFg,
 		showEmpty: (_self, data) =>
 			!unwrap(data.loading) && (unwrap(data.entries)?.length ?? 0) === 0,
-		showLoading: (_self, data) => Boolean(unwrap(data.loading)),
+		showLoading: (_self, data) =>
+			Boolean(unwrap(data.loading)) && (unwrap(data.entries)?.length ?? 0) === 0,
 	}
 	if (env?.rows) {
 		behaviors.rows = (self, data) => env.rows(self, data)

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

@@ -1,5 +1,16 @@
-<aside class="preview" when="show" out:title="previewTitle">
-	<pre when="hasText" out="previewText" class="preview-text"></pre>
-	<div when="hasCard" out="cardText" class="preview-card"></div>
+<!-- The inspector: a card/text body for a file, and a directory column
+     (breadcrumbs + cursorable listing) for a directory, so a previewed
+     directory reads as a pane. The body and the column share the frame, and
+     the whole column is clickable to take focus. -->
+<aside class="preview" when="show" out:title="headerTitle" on:click="paneId!pane:activate">
+	<header when="showBody" out="headerTitle"></header>
+	<div class="pane-header" when="isDirPane">
+		<div out="dirCrumbsView|Breadcrumbs"></div>
+	</div>
+	<div class="preview-list" when="isDirPane" data-slot="list" out="dirListView|FileList"></div>
+	<pre when="showText" out="previewText" class="preview-text"></pre>
+	<pre when="showCard" out="cardText" class="preview-card"></pre>
+	<pre when="showEntryCard" out="entryText" class="preview-card"></pre>
+	<pre when="showEmpty" out="emptyText" class="preview-card"></pre>
 	<footer class="preview-actions" out="actions"></footer>
 </aside>