@ssebastien/tcmd 0.1.4 → 0.1.7

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

@@ -1,4 +1,4 @@
-<box flexDirection="row" height="1" out:backgroundColor="rowBg" on:click="row.key!panel:select">
+<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>
@@ -8,23 +8,47 @@
 		<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>
+	<!-- 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 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 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>
-	<!-- Operation, group and picker-entry rows: marker + name + summary. -->
-	<box when="isPlain" flexDirection="row" flexGrow="1" flexShrink="1" minWidth="0" columnGap="1">
+	<!-- 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>

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" 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 hints of the
+// 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
-// `CommandItem.js`; this parent maps its `items` to rows.
+// 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) => {
@@ -121,6 +127,6 @@ function createBehaviors(env) {
 	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.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,23 +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),
 		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 : ""),
-		itemSepFg: () => env?.textSecondaryFg,
-		itemHead: head,
+		// 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

@@ -1,6 +1,7 @@
-<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>
+<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">
@@ -11,17 +12,16 @@
 			</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 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>
-				<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>

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

@@ -5,17 +5,16 @@
 
 // Module: tcmd/components/CommandPanel
 // 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.
+// holds a `:` filter above categorized commands. The right pane lists the
+// selected operation's arguments followed by its [Run]/[Retry]
+// row.
+// The row logic lives in `CommandArgRow.js`; this parent maps the operation
+// list, scrolling argument rows, custom preview and pinned action row.
 //
 // Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
 // (footer), `textHeadingFg` (title/sign/command name), `opRows(self, data)` /
-// `argRows(self, data)` returning the keyed row lists, and
-// `argScrollTop(self, data)` (TUI viewport tracking).
+// `argRows(self, data)` returning keyed row lists, and
+// the TUI viewport hooks `opScrollTop` / `argScrollTop`.
 
 import { unwrap } from "select/state/cells"
 import { PANEL_FOCUS } from "../core/panel.js"
@@ -29,10 +28,10 @@ function panelTitle(entry) {
 }
 
 // Function: panelFooter
-const PANEL_FOOTER = "type to filter   ⇥ args   ⌃O browse   Spc toggle   ↵ run   Esc close"
+const PANEL_FOOTER = "type to filter   ⇥ args   ⌃O browse   Spc toggle   ↵ run"
 
 // Function: pickerFooter
-const PICKER_FOOTER = "type to filter   ↑↓ row   → open   ↵ choose   ⌃↵ this dir   ⌫ up   Esc back"
+const PICKER_FOOTER = "type path   ↑↓ rows   → open   ↵ go   ⌃↵ here   ⇥ focus   Esc back"
 
 // Function: panelSign
 // The filter prompt (`:`) before the command filter input.
@@ -47,29 +46,51 @@ function createBehaviors(env) {
 	const behaviors = {
 		bg: () => env.overlayBg,
 		borderFg: () => env.borderPrimaryActiveFg,
-		// The right pane's header: the selected command's name.
+		// The right pane's header: the selected command's name. The close
+		// shorthand lives in the dialog's top border.
 		commandName: (_self, data) => unwrap(data.entry)?.name ?? "",
 		commandNameFg: () => env.textHeadingFg,
+		closeHint: () => "[Close Esc]",
+		closeHintFg: () => env.textSecondaryFg,
 		confirm: (self) => self.pub("panel:confirm"),
-		// 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).
+		// The armed action prints the command it will execute below `[Confirm]`,
+		// tinted with the action's risk colour.
+		confirmCommand: (_self, data) =>
+			(unwrap(data?.rows) ?? []).find((row) => row.type === "run")?.command ?? "",
+		hasConfirmCommand: (_self, data) =>
+			Boolean((unwrap(data?.rows) ?? []).find((row) => row.type === "run")?.command),
+		confirmCommandFg: (_self, data) =>
+			unwrap(data?.entry)?.risk === "destructive" ? env.errorFg : env.warningFg,
+		confirmRisk: (_self, data) => unwrap(data?.entry)?.risk ?? null,
+		// A failed run moves its error out of the action row into a framed
+		// block below the button.
+		hasRunError: (_self, data) =>
+			Boolean((unwrap(data?.rows) ?? []).find((row) => row.type === "run" && row.error)?.error),
+		runError: (_self, data) =>
+			(unwrap(data?.rows) ?? []).find((row) => row.type === "run" && row.error)?.error ?? "",
+		runErrorFg: () => env.errorFg,
+		// The file picker sub-mode: the nested FilePicker owns its editable path,
+		// file-panel rows and scrollbar.
 		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),
+		pickerView: (_self, data) => ({
+			open: data.picking,
+			path: data.pickerPathText,
+			focus: data.pickerFocus,
+			rows: data.pickerRows,
+			cursor: data.argCursor,
+		}),
+		footer: (_self, data) => {
+			if (unwrap(data?.picking)) return PICKER_FOOTER
+			// An armed risky action turns Enter into the confirmation step. The
+			// run row carries the flag (the rows input is already reactive).
+			const armed = (unwrap(data?.rows) ?? []).some((row) => row.type === "run" && row.armed)
+			const base = armed ? PANEL_FOOTER.replace("↵ run", "↵ confirm") : PANEL_FOOTER
+			// The permission grid adds a bit cursor to the usual keys.
+			return unwrap(data?.entry)?.name === "chmod" ? `${base}   ←→ bits` : base
+		},
 		footerFg: () => env.textSecondaryFg,
-		// 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.
+		// Dividers: a vertical rule between the panes and a horizontal rule under
+		// the filter, in the secondary border colour.
 		ruleFg: () => env.borderSecondaryFg,
 		sideRule: () => ["left"],
 		headRule: () => ["top"],
@@ -77,15 +98,16 @@ function createBehaviors(env) {
 		focusArgs: (_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 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) ?? "",
-		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,
+		// Only operation-specific preflight output is rendered; the assembled
+		// shell command remains available from the session but is not echoed.
+		hasPreview: (_self, data) => !unwrap(data.picking) && Boolean(unwrap(data.preview)),
+		preview: (_self, data) => unwrap(data.preview) ?? "",
+		previewFg: () => env.textSecondaryFg,
+		panelHeight: (self, data) => env.panelHeight?.(self, data) ?? "72%",
 		sign: () => panelSign(),
 		signFg: () => env.textHeadingFg,
 		title: (_self, data) => panelTitle(data.entry),
@@ -93,6 +115,8 @@ function createBehaviors(env) {
 	}
 	if (env?.opRows) behaviors.opRows = (self, data) => env.opRows(self, data)
 	if (env?.argRows) behaviors.argRows = (self, data) => env.argRows(self, data)
+	if (env?.runRows) behaviors.runRows = (self, data) => env.runRows(self, data)
+	if (env?.opScrollTop) behaviors.opScrollTop = (self, data) => env.opScrollTop(self, data)
 	if (env?.argScrollTop) behaviors.argScrollTop = (self, data) => env.argScrollTop(self, data)
 	return behaviors
 }

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

@@ -1,5 +1,5 @@
 <box when="open" width="100%" height="100%" alignItems="center" justifyContent="center">
-	<box width="80%" height="72%" border borderStyle="rounded"
+	<box width="80%" out:height="panelHeight" border borderStyle="rounded"
 	     out:title="title" out:titleColor="titleColor" out:borderColor="borderFg"
 	     out:backgroundColor="bg" flexDirection="column">
 		<box flexDirection="row" flexGrow="1" overflow="hidden">
@@ -10,40 +10,50 @@
 					<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">
+				<scrollbox ref="ops" flexGrow="1" flexShrink="1" minHeight="0" out:scrollTop="opScrollTop">
 					<box out="opRows" flexDirection="column"></box>
 				</scrollbox>
 			</box>
 			<!-- Vertical rule between the panes. -->
 			<box width="1" out:border="sideRule" out:borderColor="ruleFg"></box>
-			<!-- Right pane: the command name, its arguments, the resolved command. -->
+			<!-- Right pane: the command name, arguments and trailing Run action. -->
 			<box flexDirection="column" flexGrow="3" flexBasis="0" overflow="hidden">
+				<!-- The command name heads the pane. -->
 				<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
-					<text out="commandName" out:fg="commandNameFg" wrapMode="none"></text>
+					<text out="commandName" out:fg="commandNameFg" flexGrow="1" flexShrink="1" minWidth="0" wrapMode="none" truncate="true"></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>
+				<!-- Arguments, preflight preview and the Run action share one
+				     scroller, so Run lands one line below the last field rather
+				     than pinned to the bottom of the pane. -->
+				<scrollbox when="!picking" ref="args" flexGrow="1" flexShrink="1" minHeight="0" out:scrollTop="argScrollTop">
+					<box out="argRows" flexDirection="column"></box>
+					<box ref="previewBox" when="hasPreview" flexDirection="column" flexShrink="0" maxHeight="5" paddingLeft="1" overflow="hidden">
+						<text out="preview" out:fg="previewFg" wrapMode="word"></text>
+					</box>
+					<box out="runRows" flexDirection="column" flexShrink="0" paddingLeft="1" paddingRight="1"></box>
+					<box when="hasRunError" border borderStyle="single" out:borderColor="runErrorFg"
+					     flexDirection="column" flexShrink="0" marginTop="1" marginLeft="1" marginRight="1"
+					     paddingLeft="1" paddingRight="1">
+						<text out="runError" out:fg="runErrorFg" wrapMode="word"></text>
+					</box>
+					<box when="hasConfirmCommand" paddingLeft="1">
+						<text out="confirmCommand" out:fg="confirmCommandFg" wrapMode="word"></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>
+				<filepicker when="picking" flexGrow="1" flexShrink="1" minHeight="0"
+				            in:open="picking" in:path="pickerPathText" in:focus="pickerFocus"
+				            in:rows="pickerRows" in:cursor="argCursor"></filepicker>
 			</box>
 		</box>
 		<box flexDirection="row" height="1" paddingLeft="1">
 			<text out="footer" out:fg="footerFg"></text>
 		</box>
+		<!-- The close action sits in the top border, upper-right, like a close
+		     button; the background masks the border run underneath. -->
+		<box position="absolute" top="-1" right="2" height="1" zIndex="3"
+		     out:backgroundColor="bg" on:click="!panel:close.">
+			<text out="closeHint" out:fg="closeHintFg" wrapMode="none"></text>
+		</box>
 	</box>
 </box>

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

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

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

@@ -10,7 +10,8 @@
 //
 // - `selected` (the pane's marked count, above one) leads in the mark colour;
 // - `date` (mtime) and `size` are the numeric fields, drawn bright;
-// - `type` (file/dir/link/dev) is coloured like the listing;
+// - `type` (file/dir/link/dev) is coloured like the listing, a plain file
+//   taking its executable/read-only colour too;
 // - `rights` (permission mode) is accented.
 //
 // When the pane is too narrow the trailing blocks give way first (`rights`,
@@ -21,6 +22,7 @@
 // out.
 
 import { unwrap } from "select/state/cells"
+import { isExecutable, isReadonly, nameFg } from "./FileRow.js"
 import { formatMode, formatSize, formatTime } from "./format.js"
 
 // Constant: KIND_LABELS
@@ -49,13 +51,24 @@ function entryKind(entry) {
 }
 
 // Function: typeColor
-// The listing colour for an entry's kind, mirroring `FileRow.nameFg`.
+// The listing colour for an entry's kind, delegating to `FileRow.nameFg` so
+// the detail's type reads exactly like the row's name — directory, symlink and
+// device kinds, plus the executable/read-only states of a plain file.
 function typeColor(entry, env) {
+	return nameFg(entry, env)
+}
+
+// Function: typeClass
+// The web state classes for the detail's type span: the kind's `is-<kind>`
+// class, plus the executable/read-only class when the entry is a plain file
+// (mirroring `FileRow.nameClass`, but on the type-specific `is-<kind>` base).
+function typeClass(entry, env) {
 	const kind = entryKind(entry)
-	if (kind === "symlink") return env.linkFg
-	if (kind === "directory") return env.dirFg
-	if (kind === "device") return env.devFg
-	return env.fileFg
+	const base = `is-${kind}`
+	if (kind !== "file") return base
+	if (isExecutable(entry)) return `${base} ${env.execClass}`
+	if (isReadonly(entry)) return `${base} ${env.readonlyClass}`
+	return base
 }
 
 // Function: detailBlocks
@@ -168,7 +181,7 @@ function createBehaviors(env = {}) {
 		detailTime: (self, data) => text(self, data, "time"),
 		detailHasType: (self, data) => has(self, data, "type"),
 		detailType: (self, data) => text(self, data, "type"),
-		detailTypeClass: (_self, data) => `is-${entryKind(unwrap(data.entry))}`,
+		detailTypeClass: (_self, data) => typeClass(unwrap(data.entry), env),
 		detailTypeFg: (_self, data) => typeColor(unwrap(data.entry), env),
 		detailHasSize: (self, data) => has(self, data, "size"),
 		detailSize: (self, data) => text(self, data, "size"),
@@ -190,5 +203,6 @@ export {
 	detailBlocks,
 	detailLine,
 	entryKind,
+	typeClass,
 	typeColor,
 }