@ssebastien/tcmd 0.1.4 → 0.1.7

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

@@ -2,7 +2,7 @@
      (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">
+<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>
@@ -12,5 +12,4 @@
 	<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>

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

@@ -21,7 +21,7 @@
 
 import { unwrap } from "select/state/cells"
 import { formatSize } from "./format.js"
-import { previewSource } from "../core/session.js"
+import { previewSource } from "../core/preview.js"
 
 const KIND_LABELS = {
 	directory: "directory",
@@ -58,11 +58,13 @@ function hasText(preview) {
 
 // Function: previewTitle
 // "Filename <EXT>" style title; falls back to the kind label when the file has
-// no extension.
+// no extension. A decompressed preview adds the inner label, so
+// `notes.txt.gz` reads `notes.txt.gz  <GZ · TXT>`.
 function previewTitle(preview) {
 	if (!preview) return "preview"
 	const badge = (preview.ext || KIND_LABELS[preview.kind] || "file").toUpperCase()
-	return `${preview.title}  <${badge}>`
+	const inner = preview.compression && preview.innerExt ? ` · ${preview.innerExt.toUpperCase()}` : ""
+	return `${preview.title}  <${badge}${inner}>`
 }
 
 // Function: entryCard
@@ -97,9 +99,13 @@ function headerTitle(preview, entry) {
 	if (entry) {
 		const source = previewSource(entry)
 		const badge = entry.isDir ? "DIR" : (source.ext || "file").toUpperCase()
+		const inner =
+			!entry.isDir && source.compression && source.innerExt
+				? ` · ${source.innerExt.toUpperCase()}`
+				: ""
 		const name = entry.isDir ? `${entry.name}/` : entry.name
 		const target = entry.isSymlink && entry.target ? ` -> ${entry.target}` : ""
-		return `${name}${target}  <${badge}>`
+		return `${name}${target}  <${badge}${inner}>`
 	}
 	return "inspector"
 }
@@ -113,10 +119,32 @@ function createBehaviors(env) {
 	const directory = (_self, data) =>
 		isDirectoryPane(unwrap(data.preview), unwrap(data.entry))
 	const body = (_self, data) => !directory(_self, data)
+	// An image the renderer can actually decode: the card stays whenever the
+	// preview carries `stat` details, or the entry sits behind the cursor as a
+	// directory. `imageExts` is renderer knowledge (the terminal image path
+	// decodes the raster formats only), so it comes from the environment and
+	// the web — which has no image renderable — simply never matches.
+	const isImage = (_self, data) => {
+		const preview = unwrap(data.preview)
+		const entry = unwrap(data.entry)
+		if (preview?.kind !== "image" || preview.details || !entry?.path) return false
+		const ext = `${preview.ext ?? entry.ext ?? ""}`.toLowerCase()
+		return (env.imageExts ?? []).includes(ext)
+	}
 	return {
 		actions,
 		actionsFg: () => env.textSecondaryFg,
 		cardText: (_self, data) => cardText(unwrap(data.preview)),
+		// Tree-sitter filetype for the previewed text, resolved by the
+		// renderer (the web has no highlighter and supplies no `filetype`).
+		// A compressed preview highlights the name inside, so `.txt.gz`
+		// still lands on the text parser.
+		codeFiletype: (_self, data) => {
+			const entry = unwrap(data.entry)
+			if (!entry?.path) return undefined
+			const source = previewSource(entry)
+			return env.filetype?.(source.compression ? source.innerName : entry.path)
+		},
 		// The directory column: breadcrumbs over the inspector pane's listing,
 		// shaped like a pane header (a rule separates it from the body).
 		dirCrumbsView: (_self, data) => ({ segments: data.dirSegments, paneId: data.paneId }),
@@ -141,6 +169,10 @@ function createBehaviors(env) {
 		headerTitle: (_self, data) => headerTitle(unwrap(data.preview), unwrap(data.entry)),
 		isEmpty: (_self, data) => !unwrap(data.preview) && !unwrap(data.entry),
 		isDirPane: directory,
+		// The path the image renderable loads (symlinks read through, like the
+		// text body).
+		previewImageSource: (_self, data) =>
+			isImage(_self, data) ? unwrap(data.entry)?.path : undefined,
 		previewText: (_self, data) => unwrap(data.preview)?.text ?? "",
 		previewTitle: (_self, data) => previewTitle(unwrap(data.preview)),
 		previewTitleColor: () => env.textHeadingFg,
@@ -154,7 +186,11 @@ function createBehaviors(env) {
 		showEmpty: (_self, data) => body(_self, data) && !unwrap(data.preview) && !unwrap(data.entry),
 		showEntryCard: (_self, data) =>
 			body(_self, data) && !unwrap(data.preview) && Boolean(unwrap(data.entry)),
+		// The image takes the body on its own; when the format has no decoder
+		// (or the preview is a `stat` card) the scrollbox carries the body.
+		showImage: (_self, data) => body(_self, data) && isImage(_self, data),
 		showText: (_self, data) => body(_self, data) && hasText(unwrap(data.preview)),
+		showTextOrCard: (_self, data) => body(_self, data) && !isImage(_self, data),
 		textFg: () => env.textFg,
 	}
 }

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

@@ -1,7 +1,9 @@
 <!-- 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 border and
-     the footer, and the whole column is clickable to take focus. -->
+     directory reads as a pane. A text body highlights through the `code`
+     tree-sitter renderable; an image draws through the `image` renderable's
+     terminal graphics protocol. The body and the column share the border, and
+     the whole column is clickable to take focus. -->
 <box when="show" out:title="headerTitle" out:titleColor="previewTitleColor" border borderStyle="rounded"
      flexDirection="column" flexGrow="1" overflow="hidden" on:click="paneId!pane:activate">
 	<box when="isDirPane" flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
@@ -12,12 +14,17 @@
 	<box when="isDirPane" height="1" out:border="headRule" out:borderColor="headRuleFg"></box>
 	<filelist when="isDirPane" in:entries="dirEntries" in:cursor="dirCursor" in:marked="dirMarked"
 	          in:active="dirActive" in:paneId="paneId" in:loading="dirLoading"></filelist>
-	<scrollbox when="showBody" flexGrow="1">
-		<text when="showText" out="previewText" out:fg="textFg"></text>
-		<text when="showCard" out="cardText" out:fg="dimFg"></text>
-		<text when="showEntryCard" out="entryText" out:fg="dimFg"></text>
-		<text when="showEmpty" out="emptyText" out:fg="dimFg"></text>
-	</scrollbox>
-	<box height="1" out:border="footRule" out:borderColor="footRuleFg"></box>
-	<box height="1"><text out="actions" out:fg="actionsFg"></text></box>
+	<box when="showBody" flexGrow="1" position="relative" overflow="hidden">
+		<scrollbox when="showTextOrCard" ref="body" flexGrow="1">
+			<code when="showText" out="previewText" out:fg="textFg" out:filetype="codeFiletype"></code>
+			<text when="showCard" out="cardText" out:fg="dimFg"></text>
+			<text when="showEntryCard" out="entryText" out:fg="dimFg"></text>
+			<text when="showEmpty" out="emptyText" out:fg="dimFg"></text>
+		</scrollbox>
+		<!-- Image files draw through the terminal's graphics protocol
+		     (Kitty/sixel, half-block fallback). Formats with no decoder
+		     (`bmp`, `svg`) keep the metadata card instead. -->
+		<image when="showImage" position="absolute" top="0" left="0" width="100%" height="100%"
+		       fit="fit" protocol="auto" out:source="previewImageSource"></image>
+	</box>
 </box>

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

@@ -1,5 +1,6 @@
 <li class="file-row" out:class="rowClass" out:data-marked="rowMarked" out:data-active="rowActive" out:data-kind="rowKind" on:click="paneId:paneId,index:index!list: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/FileRow.js

@@ -12,12 +12,13 @@
 // name (`notes -> ../real/notes`, see `rowName`).
 //
 // Environment: `cursorBg`, `cursorInactiveBg`, `currentClass`,
-// `accentSecondaryFg`, `accentFg`, `linkFg`, `dirFg`, `devFg`, `fileFg`,
-// `textSecondaryFg`, `dirClass`, `icons` (show Nerd Font icons).
+// `accentSecondaryFg`, `accentFg`, `linkFg`, `dirFg`, `devFg`, `execFg`,
+// `readonlyFg`, `fileFg`, `textSecondaryFg`, `dirClass`, `execClass`,
+// `readonlyClass`, `icons` (show Nerd Font icons).
 
 import { unwrap } from "select/state/cells"
 import { formatSize } from "./format.js"
-import { iconFor } from "./icons.js"
+import { iconFor, lucideIconFor } from "./icons.js"
 
 // Function: rowName
 // The entry name with the directory slash (the icon is its own slot, so it
@@ -37,6 +38,12 @@ function rowIcon(entry, icons) {
 	return icons ? iconFor(entry) : ""
 }
 
+// Function: rowIconHref
+// The current-file SVG reference used by the browser presentation.
+function rowIconHref(entry, icons) {
+	return icons ? `#lucide-${lucideIconFor(entry)}` : ""
+}
+
 // Function: rowSize
 function rowSize(entry) {
 	if (!entry) return ""
@@ -80,21 +87,64 @@ function rowIsMarked(data) {
 	return isMarked(data.item, unwrap(data.marked))
 }
 
+// Function: hasMode
+// Whether the entry carries POSIX mode bits. Backends that report no mode
+// (OPFS, some HTTP hosts) leave it 0, so such entries never read as executable
+// or read-only.
+function hasMode(entry) {
+	return Number.isFinite(entry?.mode) && entry.mode > 0
+}
+
+// Function: isExecutable
+// Whether the entry is a regular file with an execute bit set (any of the
+// owner/group/other slots). Directories, symlinks and device nodes have their
+// own colours and never read as executable here.
+function isExecutable(entry) {
+	if (!entry || entry.isDir || entry.isSymlink || entry.isDevice) return false
+	return hasMode(entry) && (entry.mode & 0o111) !== 0
+}
+
+// Function: isReadonly
+// Whether the entry is a regular file its owner cannot write (`mode` owner
+// write bit clear). Directories, symlinks and device nodes are excluded, and
+// the web backends, which report no mode, stay unaffected.
+function isReadonly(entry) {
+	if (!entry || entry.isDir || entry.isSymlink || entry.isDevice) return false
+	return hasMode(entry) && (entry.mode & 0o200) === 0
+}
+
 // Function: nameFg
 // The listing color for an entry: a symlink reads as a link, a directory as a
-// directory, a device node as a device, otherwise the plain file color.
+// directory, a device node as a device, an executable file green, a read-only
+// file dimmer than a plain file, otherwise the plain file color.
 // Symlinks win over directories, matching `dircolors` (a link to a directory
-// renders as a link).
+// renders as a link), and an executable wins over a read-only file, matching
+// `ls --color` (an executable stays green even when it cannot be written).
 function nameFg(item, env) {
 	if (item?.isSymlink) return env.linkFg
 	if (item?.isDir) return env.dirFg
 	if (item?.isDevice) return env.devFg
+	if (isExecutable(item)) return env.execFg
+	if (isReadonly(item)) return env.readonlyFg
 	return env.fileFg
 }
 
+// Function: nameClass
+// The web state classes for an entry's name, mirroring `nameFg`: `dirClass`
+// for a directory, else the executable/read-only class for a file, else null.
+// The class tokens are absent on the TUI env, which colours through
+// `rowNameFg` instead.
+function nameClass(item, env) {
+	if (item?.isDir) return env.dirClass
+	if (isExecutable(item)) return env.execClass
+	if (isReadonly(item)) return env.readonlyClass
+	return null
+}
+
 // Function: rowNameFg
 // The name color for a row: a marked row reads orange (the selection signal),
-// the cursor row the bright heading color, otherwise the entry's kind color.
+// the cursor row the bright heading color, otherwise the entry's own color
+// (kind plus executable/read-only state, see `nameFg`).
 // Marks win over the cursor so a marked-and-current row still reads as
 // marked, the same precedence the row marker follows.
 function rowNameFg(data, env) {
@@ -124,19 +174,20 @@ function createBehaviors(env) {
 		rowKind: (_self, data) => data.item?.isSymlink ? "link" : data.item?.isDir ? "dir" : data.item?.isDevice ? "dev" : "file",
 		// The icon is its own slot so it can sit dimmer than the name; it
 		// collapses when the environment keeps rows icon-free.
-		hasIcon: () => Boolean(env.icons),
+		hasIcon: () => Boolean(env.icons || env.lucideIcons),
 		rowIcon: (_self, data) => rowIcon(data.item, Boolean(env.icons)),
+		rowIconHref: (_self, data) => rowIconHref(data.item, Boolean(env.lucideIcons)),
 		rowIconFg: () => env.textSecondaryFg,
 		rowMarker: (_self, data) => rowMarker(data),
 		rowMarkerFg: (_self, data) => (rowIsMarked(data) ? env.accentSecondaryFg : env.accentFg),
 		rowName: (_self, data) => rowName(data.item),
-		rowNameClass: (_self, data) => (data.item?.isDir ? env.dirClass : null),
+		rowNameClass: (_self, data) => nameClass(data.item, env),
 		rowNameFg: (_self, data) => rowNameFg(data, env),
 		rowSize: (_self, data) => rowSize(data.item),
 		rowSizeFg: () => env.textSecondaryFg,
 	}
 }
 
-export { createBehaviors, isMarked, nameFg, rowIcon, rowName, rowNameFg, rowSize }
+export { createBehaviors, isExecutable, isMarked, isReadonly, nameClass, nameFg, rowIcon, rowIconHref, rowName, rowNameFg, rowSize }
 
 // EOF

package/src/js/tcmd/components/Frame.js

@@ -12,7 +12,7 @@
 // reference's text lives with its overlay in `Help.js`.
 
 import { unwrap } from "select/state/cells"
-import { commandBarMarksItem, commandBarRowCount, commandBarStatus } from "./CommandBar.js"
+import { commandBarStatus } from "./CommandBar.js"
 import pkg from "../../../../package.json" with { type: "json" }
 
 // Constant: VERSION
@@ -92,36 +92,56 @@ function currentColumnId(data) {
 	return `${unwrap(data?.currentId) ?? unwrap(data?.active) ?? "left"}`
 }
 
-// Function: commandBarRowsFor
-// The entries the bar currently shows: the context hints or the `bar`
-// commands, plus the active pane's marked count as a trailing entry.
-function commandBarRowsFor(data) {
-	const items = unwrap(data?.commandBarItems) ?? []
-	const marks = commandBarMarksItem(data)
-	return marks ? [...items, marks] : items
-}
+// Constant: PANE_GROW
+// The explorer's current column is this much wider than the parent/preview
+// mirrors — enough to read as the working pane, not enough to starve its
+// neighbours. Both renderers apply the same ratio (the TUI's pane row growers
+// and the web CSS `.pane.is-major`), so the geometry has one source of truth
+// here.
+const PANE_GROW = 1.35
 
-// Function: commandBarLines
-// Rows the wrapped command bar occupies at the current viewport (the bar
-// is inset one column from the viewport edge).
-function commandBarLines(data, self) {
-	const width = Math.floor(sizeOf(data, self)?.width ?? 0)
-	if (width <= 0) return 1
-	return commandBarRowCount(commandBarRowsFor(data), width - 1)
+// Function: paneColumnWidth
+// The columns a pane's column occupies at viewport `width` for the current
+// view. Explorer leads with the parent mirror and grows the current column by
+// PANE_GROW, so its mirrors are narrower than an even split; commander tiles
+// its two panes evenly. The inline inspector adds an equal column to either.
+// Panes hidden in the view, and an unknown viewport (`width <= 0`), are 0.
+//
+// The caller subtracts its own chrome (border, inset, safety) to get a content
+// budget: feeding every pane an even `width / columns` makes the narrower
+// mirror columns overflow, and the renderer then mangles their breadcrumbs.
+function paneColumnWidth(width, paneId, { viewMode, currentId, showPreview } = {}) {
+	const total = Math.floor(width ?? 0)
+	if (total <= 0) return 0
+	const weights = {}
+	if (viewMode === "explorer") {
+		weights.parent = 1
+		weights[`${currentId}` === "right" ? "right" : "left"] = PANE_GROW
+	} else {
+		weights.left = 1
+		weights.right = 1
+	}
+	if (Boolean(showPreview) && total >= INSPECTOR_INLINE_WIDTH) weights.preview = 1
+	const weight = weights[paneId] ?? 0
+	if (weight <= 0) return 0
+	const sum = Object.values(weights).reduce((acc, value) => acc + value, 0)
+	return Math.floor((total * weight) / sum)
 }
 
 // Function: paneListHeight
-// Rows available to a pane's listing: the viewport height minus the identity
-// bar (1), the pane's own border (2), the pane header + rule (2), the entry
-// detail (2), the summary (1) and the wrapped command bar — eight chrome rows
-// plus the bar. Fed to the windowed `filelist` so a large directory mounts
-// only the visible slice. `0` means "unknown — render everything to measure".
+// Rows available to a pane's listing: the viewport height minus the app header
+// (1 row in the web UI, 2 for the desktop toolbar), the pane border (2), pane
+// header + rule (2), entry detail (2), and the command bar when visible. Fed to
+// the windowed `filelist` so a large directory mounts only the visible slice.
+// `0` means "unknown — render everything to measure".
 function paneListHeight(data, self) {
 	const height = Math.floor(sizeOf(data, self)?.height ?? 0)
 	if (height <= 0) return 0
-	// A notice or error swaps the keys for a one-line status.
-	const bar = commandBarStatus(data) ? 1 : commandBarLines(data, self)
-	return Math.max(1, height - 8 - bar)
+	const desktop = Boolean(unwrap(data?.desktopMode))
+	// A notice or error keeps a one-line status in desktop mode; otherwise that
+	// renderer has no bottom command bar at all. The bar is always one line.
+	const bar = commandBarStatus(data) || !desktop ? 1 : 0
+	return Math.max(1, height - (desktop ? 8 : 7) - bar)
 }
 
 // Function: mixHex
@@ -256,12 +276,14 @@ function createFrameBehaviors(env) {
 			(!isExplorer(data) || currentColumnId(data) === "right") && !unwrap(data?.previewFull),
 
 		// The inline inspector shows when the preview is on and the viewport is
-		// wide enough; otherwise `v` opens the fullscreen viewer. Maximizing
-		// (`⇧V`) replaces the column with `showPreviewFull` below.
+		// wide enough; the viewer overlay shows whenever it is open, at any
+		// width (`v` on a narrow terminal, or Enter on a file that cannot be
+		// edited). Maximizing (`⇧V`) replaces the column with
+		// `showPreviewFull` below.
 		inspectorNarrow: (self, data) => isNarrow(data, self),
 		showInspectorInline: (self, data) =>
 			Boolean(unwrap(data.showPreview)) && !isNarrow(data, self) && !unwrap(data?.previewFull),
-		showViewer: (self, data) => Boolean(unwrap(data.viewerOpen)) && isNarrow(data, self),
+		showViewer: (_self, data) => Boolean(unwrap(data.viewerOpen)),
 		// The maximized inspector: the preview fills the pane row in either
 		// view mode, pushed by `view.maximize` (`⇧V`).
 		showPreviewFull: (_self, data) => Boolean(unwrap(data?.previewFull)),
@@ -270,17 +292,19 @@ function createFrameBehaviors(env) {
 		// overlay has a single source of truth.
 		helpOpen: (_self, data) => Boolean(unwrap(data.helpOpen)),
 
+		// The shared list overlay (history / trash) is mounted whenever a mode
+		// is set; the component itself gates on `open`.
+		overlayOpen: (_self, data) => Boolean(unwrap(data.overlay)),
+
 		// The windowed listing height for both panes (they share the row).
 		listViewport: (self, data) => paneListHeight(data, self),
 
-		// The command bar's height: one line for a status, otherwise as many
-		// rows as the wrapped bracket shorthands need.
-		barHeight: (self, data) => (commandBarStatus(data) ? 1 : commandBarLines(data, self)),
+		// The command bar's height: always a single line, status or key hints.
+		barHeight: () => 1,
 	}
 }
 
 export {
-	commandBarLines,
 	createFrameBehaviors,
 	currentColumnId,
 	INSPECTOR_INLINE_WIDTH,
@@ -291,6 +315,8 @@ export {
 	MODE_SLOTS,
 	modeGradient,
 	modeWord,
+	PANE_GROW,
+	paneColumnWidth,
 	sizeOf,
 	versionTrail,
 	VERSION,

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

@@ -1,7 +1,15 @@
-<section class="help" when="open" role="dialog" aria-modal="true" aria-label="Key reference" tabindex="-1">
-	<div class="help-dialog">
+<section class="help" when="open" role="dialog" aria-modal="true" aria-label="Key reference" tabindex="-1" on:click="!dialog:help-cancel">
+	<div class="help-dialog" on:click="dialogStop">
 		<header out="title"></header>
-		<pre out="text"></pre>
-		<footer out="hint"></footer>
+		<div class="help-columns">
+			<div class="help-column" out="leftRows"></div>
+			<div class="help-column" out="rightRows"></div>
+		</div>
+		<footer class="help-footer">
+			<span class="help-bracket" out="hintOpen"></span>
+			<span class="help-title" out="hintHead"></span>
+			<span class="help-key" out="hintKeys"></span>
+			<span class="help-bracket" out="hintClose"></span>
+		</footer>
 	</div>
 </section>