@ssebastien/tcmd 0.1.3 → 0.1.7

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

@@ -4,95 +4,121 @@
 // 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 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), `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 keyed row lists, and
+// the TUI viewport hooks `opScrollTop` / `argScrollTop`.
 
 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"
+
+// Function: pickerFooter
+const PICKER_FOOTER = "type path   ↑↓ rows   → open   ↵ go   ⌃↵ here   ⇥ focus   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. 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 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}: ` : ""
+		// 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)),
+		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
 		},
-		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 and a horizontal rule under
+		// the filter, in the secondary border colour.
 		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.
-		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,
+		// 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.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?.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
 }
 
-export { PANEL_FOOTER, createBehaviors, panelSign, panelTitle }
+export { PANEL_FOOTER, PICKER_FOOTER, createBehaviors, panelSign, panelTitle }

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

@@ -1,35 +1,59 @@
 <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" 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 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>
-			<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, 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" flexGrow="1" flexShrink="1" minWidth="0" wrapMode="none" truncate="true"></text>
+				</box>
+				<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
+				<!-- 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>
+				<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">
-	<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.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

@@ -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
@@ -135,7 +148,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 = {}
@@ -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,
 }

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/FilePicker.html

@@ -0,0 +1,10 @@
+<div class="panel-picker-pane" when="open" aria-label="File picker">
+	<div class="panel-picker">
+		<label class="panel-picker-line">
+			<svg class="panel-picker-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-folder-open"></use></svg>
+			<input class="panel-picker-path" type="text" inout="path" aria-label="Path" spellcheck="false" autocomplete="off" />
+		</label>
+	</div>
+	<ul class="panel-args panel-picker-rows" aria-label="Picker entries" out="rows"></ul>
+	<p class="panel-args-empty" when="empty" out="emptyText"></p>
+</div>

package/src/js/tcmd/components/FilePicker.js

@@ -0,0 +1,43 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-20
+
+// Module: tcmd/components/FilePicker
+// The command panel's file picker: an editable path line over a file-panel
+// listing (`FilePickerRow`), with the `..` parent row kept at the top. Typing
+// in the path narrows the listing (or enters a directory) through the session's
+// path resolution; the row logic lives in `FilePickerRow.js`.
+//
+// Environment: `rows(self, data)` returning keyed `FilePickerRow`s and
+// `scrollTop(self, data)` (TUI viewport tracking).
+
+import { unwrap } from "select/state/cells"
+
+// Function: createBehaviors
+// Builds the FilePicker behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const open = (_self, data) => Boolean(unwrap(data.open))
+	const behaviors = {
+		open,
+		// The editable path owns the keyboard by default; Down/Tab hands it to
+		// the entry list.
+		pathFocused: (_self, data) => open(_self, data) && (unwrap(data.focus) ?? "path") === "path",
+		pathSign: () => "› ",
+		pathSignFg: () => env.accentFg,
+		// The parent row is a navigation row, not a match: an empty listing is
+		// an empty result even while `..` stays visible.
+		empty: (_self, data) =>
+			open(_self, data) && !(unwrap(data.rows) ?? []).some((row) => row.type === "entry"),
+		emptyText: () => "  no matches",
+		emptyFg: () => env.textSecondaryFg,
+		rule: () => ["bottom"],
+		ruleFg: () => env.borderSecondaryFg,
+		borderFg: () => env.borderSecondaryFg,
+	}
+	if (env?.rows) behaviors.rows = (self, data) => env.rows(self, data)
+	if (env?.scrollTop) behaviors.scrollTop = (self, data) => env.scrollTop(self, data)
+	return behaviors
+}
+
+export { createBehaviors }

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

@@ -0,0 +1,13 @@
+<box when="open" flexDirection="column" flexGrow="1" flexShrink="1" minHeight="0" paddingLeft="1" paddingRight="1" paddingBottom="1">
+	<box flexDirection="column" flexGrow="1" flexShrink="1" minHeight="0" border borderStyle="single" out:borderColor="borderFg">
+		<box flexDirection="row" height="1" paddingLeft="1" paddingRight="1" overflow="hidden">
+			<text out="pathSign" out:fg="pathSignFg" wrapMode="none"></text>
+			<input ref="path" inout="path" flexGrow="1" minWidth="0" height="1" out:focused="pathFocused"></input>
+		</box>
+		<box height="1" out:border="rule" out:borderColor="ruleFg"></box>
+		<scrollbox ref="list" flexGrow="1" flexShrink="1" minHeight="0" out:scrollTop="scrollTop">
+			<box out="rows" flexDirection="column"></box>
+		</scrollbox>
+		<text when="empty" out="emptyText" out:fg="emptyFg" paddingLeft="1" wrapMode="none"></text>
+	</box>
+</box>

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

@@ -0,0 +1,6 @@
+<li class="file-row picker-row" out:class="rowClass" out:data-marked="rowMarked" out:data-active="rowActive" out:data-kind="rowKind" out:data-type="rowType" out:data-key="rowHref" on:click="key!panel:select">
+	<span class="marker" out="rowMarker"></span>
+	<svg class="file-row-icon ui-icon" when="hasIcon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use out:href="rowIconHref"></use></svg>
+	<span class="name" out:class="rowNameClass" out="rowName"></span>
+	<span class="size" out="rowSize"></span>
+</li>

package/src/js/tcmd/components/FilePickerRow.js

@@ -0,0 +1,27 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-20
+
+// Module: tcmd/components/FilePickerRow
+// One entry in the file picker. The row presentation deliberately mirrors the
+// file panes (`FileRow`): marker, kind icon, name and right-aligned size. It
+// only overrides the `..` parent row (no trailing slash) and its click event,
+// which the command panel routes back through `panel:select`.
+
+import { createBehaviors as fileRowBehaviors, rowName as fileRowName } from "./FileRow.js"
+
+// Function: createBehaviors
+// Builds the FilePickerRow behavior map from the shared FileRow behaviors.
+function createBehaviors(env) {
+	const behaviors = fileRowBehaviors(env)
+	return {
+		...behaviors,
+		rowName: (_self, data) => (data.item?.isParent ? ".." : fileRowName(data.item)),
+		rowSize: (_self, data) => (data.item?.isParent ? "" : behaviors.rowSize?.(_self, data) ?? ""),
+		rowType: (_self, data) => (data.item?.isParent ? "parent" : data.item?.type ?? "entry"),
+		rowHref: (_self, data) => data.key ?? data.item?.path ?? "",
+	}
+}
+
+export { createBehaviors }

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

@@ -0,0 +1,10 @@
+<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="key!panel:select">
+	<text out="rowMarker" width="2" out:fg="rowMarkerFg"></text>
+	<box flexGrow="1" minWidth="0" overflow="hidden" flexDirection="row" columnGap="1">
+		<text out="rowIcon" out:fg="rowIconFg" wrapMode="none" when="hasIcon"></text>
+		<text out="rowName" out:fg="rowNameFg" wrapMode="none" truncate="true"></text>
+	</box>
+	<box width="9" justifyContent="flex-end">
+		<text out="rowSize" out:fg="rowSizeFg" wrapMode="none"></text>
+	</box>
+</box>

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

@@ -1,5 +1,15 @@
-<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>
-	<footer class="preview-actions" out="actions"></footer>
+<!-- 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>
 </aside>