@ssebastien/tcmd 0.1.4 → 0.1.7

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

@@ -25,15 +25,18 @@
 			     Cmd oranges (see `modeGradient` in Frame.js). The trailing
 			     slots of the shorter word are empty and take no column. -->
 			<box flexDirection="row" flexShrink="0" overflow="hidden">
-				<text when="modeHas0" out="modeL0" out:fg="modeFg0" wrapMode="none"></text>
-				<text when="modeHas1" out="modeL1" out:fg="modeFg1" wrapMode="none"></text>
-				<text when="modeHas2" out="modeL2" out:fg="modeFg2" wrapMode="none"></text>
-				<text when="modeHas3" out="modeL3" out:fg="modeFg3" wrapMode="none"></text>
-				<text when="modeHas4" out="modeL4" out:fg="modeFg4" wrapMode="none"></text>
-				<text when="modeHas5" out="modeL5" out:fg="modeFg5" wrapMode="none"></text>
-				<text when="modeHas6" out="modeL6" out:fg="modeFg6" wrapMode="none"></text>
-				<text when="modeHas7" out="modeL7" out:fg="modeFg7" wrapMode="none"></text>
-				<text when="modeHas8" out="modeL8" out:fg="modeFg8" wrapMode="none"></text>
+				<!-- Clicking the mode word flips explorer ⇄ commander. -->
+				<box flexDirection="row" overflow="hidden" on:click="!view:toggleMode">
+					<text when="modeHas0" out="modeL0" out:fg="modeFg0" wrapMode="none"></text>
+					<text when="modeHas1" out="modeL1" out:fg="modeFg1" wrapMode="none"></text>
+					<text when="modeHas2" out="modeL2" out:fg="modeFg2" wrapMode="none"></text>
+					<text when="modeHas3" out="modeL3" out:fg="modeFg3" wrapMode="none"></text>
+					<text when="modeHas4" out="modeL4" out:fg="modeFg4" wrapMode="none"></text>
+					<text when="modeHas5" out="modeL5" out:fg="modeFg5" wrapMode="none"></text>
+					<text when="modeHas6" out="modeL6" out:fg="modeFg6" wrapMode="none"></text>
+					<text when="modeHas7" out="modeL7" out:fg="modeFg7" wrapMode="none"></text>
+					<text when="modeHas8" out="modeL8" out:fg="modeFg8" wrapMode="none"></text>
+				</box>
 				<text out="topBarStatus" out:fg="topBarStatusFg" wrapMode="none"></text>
 			</box>
 		</box>
@@ -64,7 +67,6 @@
 					          in:active="parentActive" in:paneId="parentId" in:loading="parentLoading"
 					          in:viewport="listViewport"></filelist>
 					<entrydetail in:entry="parentEntry" in:marked="parentMarked" height="2"></entrydetail>
-					<summary in:entries="parentEntries" in:disk="parentDisk" height="1"></summary>
 				</box>
 				<box when="showLeftPane" flexDirection="column" flexBasis="0" out:flexGrow="leftGrow" border borderStyle="single"
 				     out:border="leftBorder" out:borderColor="leftBorderFg"
@@ -80,7 +82,6 @@
 					          in:active="leftActive" in:paneId="leftId" in:loading="leftLoading"
 					          in:viewport="listViewport"></filelist>
 					<entrydetail in:entry="leftEntry" in:marked="leftMarked" height="2"></entrydetail>
-					<summary in:entries="leftEntries" in:disk="leftDisk" height="1"></summary>
 				</box>
 				<box when="showRightPane" flexDirection="column" flexBasis="0" out:flexGrow="rightGrow" border borderStyle="single"
 				     out:border="rightBorder" out:borderColor="rightBorderFg"
@@ -96,10 +97,9 @@
 					          in:active="rightActive" in:paneId="rightId" in:loading="rightLoading"
 					          in:viewport="listViewport"></filelist>
 					<entrydetail in:entry="rightEntry" in:marked="rightMarked" height="2"></entrydetail>
-					<summary in:entries="rightEntries" in:disk="rightDisk" height="1"></summary>
 				</box>
 				<filepreview when="showInspectorInline" in:preview="preview" in:show="showInspectorInline"
-				             in:entry="appEntry" in:paneId="previewId"
+				             in:entry="appEntry" in:paneId="previewId" in:scroll="previewScroll"
 				             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
 				             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
 				             in:dirActive="previewActive" in:dirLoading="previewLoading"
@@ -108,22 +108,24 @@
 			<!-- Maximized inspector (`⇧V`): the preview takes the whole pane
 			     row, the identity and command bars staying in place. -->
 			<filepreview when="showPreviewFull" in:preview="preview" in:show="showPreviewFull"
-			             in:entry="appEntry" in:paneId="previewId"
+			             in:entry="appEntry" in:paneId="previewId" in:scroll="previewScroll"
 			             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
 			             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
 			             in:dirActive="previewActive" in:dirLoading="previewLoading"
 			             flexGrow="1"></filepreview>
 			<commandbar in:items="commandBarItems" in:notice="notice" in:leftError="leftError"
-			            in:rightError="rightError" in:active="active"
+			            in:rightError="rightError" in:active="active" in:uiSize="uiSize"
 			            in:leftMarked="leftMarked" in:rightMarked="rightMarked" out:height="barHeight"></commandbar>
 		</box>
 	</box>
 
-	<!-- Fullscreen inspector for narrow viewports. -->
+	<!-- Fullscreen inspector overlay: `v` below the inline breakpoint, or
+	     Enter on a file the host cannot edit (any width). -->
 	<box when="showViewer" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="10"
 	     alignItems="center" justifyContent="center">
 		<box width="80%" height="90%">
 			<filepreview in:preview="preview" in:show="showViewer" in:entry="appEntry" in:paneId="previewId"
+			             in:scroll="previewScroll"
 			             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
 			             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
 			             in:dirActive="previewActive" in:dirLoading="previewLoading"></filepreview>
@@ -133,15 +135,18 @@
 	<commandpanel when="panelOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="22"
 	              in:open="panelOpen" in:entry="panelEntry" in:items="panelItems"
 	              in:opCursor="panelOpIndex" in:rows="panelRows" in:argCursor="panelRowIndex"
-	              in:labelWidth="panelLabelWidth"
-	              in:focus="panelFocus"	              in:command="panelCommand" in:runnable="panelRunnable"
-	              in:picking="panelPicking" in:pickerQuery="pickerQuery" in:pickerPath="pickerPath"
+	              in:permBit="panelPermBit" in:focus="panelFocus"
+	              in:preview="panelPreview"
+	              in:picking="pickerOpen"
+	              in:pickerPathText="pickerPathText" in:pickerFocus="pickerFocus" in:pickerRows="pickerRows"
 	              in:query="panelQuery" in:value="panelValue"></commandpanel>
 	<bookmarklist when="bookmarkOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="25"
-	              in:open="bookmarkOpen" in:mode="bookmarkMode" in:query="bookmarkQuery"
-	              in:target="bookmarkTarget" in:items="bookmarkItems" in:selected="bookmarkIndex"></bookmarklist>
+	              in:open="bookmarkOpen" in:query="bookmarkQuery"
+	              in:items="bookmarkItems" in:selected="bookmarkIndex"></bookmarklist>
+	<overlaylist when="overlayOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="27"
+	             in:open="overlay" in:mode="overlay" in:items="overlayItems" in:cursor="overlayIndex"></overlaylist>
 	<confirm when="confirm" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="30"
 	         in:confirm="confirm"></confirm>
 	<help when="helpOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="40"
-	      in:open="helpOpen"></help>
+	      in:open="helpOpen" in:size="uiSize"></help>
 </box>

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

@@ -1,13 +1,12 @@
-<div class="bookmark-list" when="open" role="dialog" aria-modal="true" aria-label="Bookmarks">
-	<div class="bookmark-dialog">
+<div class="bookmark-list" when="open" role="dialog" aria-modal="true" aria-label="Bookmarks" on:click="!dialog:bookmark-cancel">
+	<div class="bookmark-dialog" on:click="dialogStop">
 		<h2 out="title"></h2>
 		<header>
 			<span class="bookmark-sign" out="sign"></span>
-			<input class="bookmark-query" type="text" inout="query" aria-label="Bookmark name or query" on:enter="confirm">
+			<input class="bookmark-query" type="text" inout="query" aria-label="Filter bookmarks" on:enter="confirm">
 		</header>
-		<p class="bookmark-target" when="inputVisible" out="target"></p>
 		<p class="bookmark-empty" when="emptyList" out="empty"></p>
-		<ul class="bookmark-rows" when="listVisible" out="rows"></ul>
+		<ul class="bookmark-rows" out="rows"></ul>
 		<footer out="footer"></footer>
 	</div>
 </div>

package/src/js/tcmd/components/BookmarkList.js

@@ -4,61 +4,35 @@
 // Created: 2026-10-09
 
 // Module: tcmd/components/BookmarkList
-// BookmarkList: the `g`/`b` overlay. In "name" mode it shows an input to name
-// the path being recorded; in "list" mode it shows the fuzzy picker over the
-// stored bookmarks (matched by name or path). The row logic lives in
+// BookmarkList: the single bookmarks panel opened with `b`. The input filters
+// the stored bookmarks (matched by name or path); the first row offers to add
+// the current path when it is not bookmarked yet. The row logic lives in
 // `BookmarkRow.js`; this parent maps its `items` to rows.
 //
 // Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
-// (footer/path), `textHeadingFg` (title), `rows(data)` returning the keyed rows
-// and `scrollTop(self, data)` (TUI viewport tracking).
+// (footer), `textHeadingFg` (title), `rows(data)` returning the keyed rows and
+// `scrollTop(self, data)` (TUI viewport tracking).
 
 import { unwrap } from "select/state/cells"
 
-// Function: title
-// The overlay title: "bookmark" while naming, "bookmarks" while picking.
-function bookmarkTitle(mode) {
-	return unwrap(mode) === "name" ? "bookmark" : "bookmarks"
-}
-
-// Function: footer
-function bookmarkFooter(mode) {
-	return unwrap(mode) === "name"
-		? "name the bookmark   ↵ save   Esc cancel"
-		: "↑↓ move   ↵ jump   Esc close"
-}
-
-// Function: targetLine
-// The path being recorded (name mode). `target` is `{ path, isDir }` or null.
-function targetLine(target) {
-	const value = unwrap(target)
-	if (!value) return ""
-	if (typeof value === "string") return value
-	return `${value.path ?? ""}${value.isDir === true ? "/" : ""}`
-}
-
 // Function: createBehaviors
 // Builds the BookmarkList behavior map for the given renderer environment.
 function createBehaviors(env) {
 	const behaviors = {
 		bg: () => env.overlayBg,
 		borderFg: () => env.borderPrimaryActiveFg,
-		confirm: (self, data) => self.pub("bookmark:confirm"),
-		footer: (_self, data) => bookmarkFooter(data.mode),
+		confirm: (self) => self.pub("bookmark:confirm"),
+		footer: () => "↑↓ move   ⌫/Del remove   ↵ open   Esc close",
 		footerFg: () => env.textSecondaryFg,
-		// The input is focused/typing in name mode; the list navigates otherwise.
+		// The filter input owns typing; the list navigates with the arrows.
 		focused: (_self, data) => Boolean(unwrap(data.open)),
-		inputVisible: (_self, data) => unwrap(data.mode) === "name",
-		listVisible: (_self, data) => unwrap(data.mode) === "list",
 		open: (_self, data) => Boolean(unwrap(data.open)),
-		pathFg: () => env.textSecondaryFg,
-		sign: (_self, data) => (unwrap(data.mode) === "name" ? "+" : "›"),
-		target: (_self, data) => targetLine(data.target),
-		title: (_self, data) => bookmarkTitle(data.mode),
+		sign: () => "›",
+		title: () => "bookmarks",
 		titleColor: () => env.textHeadingFg,
-		emptyList: (_self, data) =>
-			unwrap(data.mode) === "list" && (unwrap(data.items)?.length ?? 0) === 0,
-		empty: () => "  no bookmarks",
+		emptyList: (_self, data) => (unwrap(data.items)?.length ?? 0) === 0,
+		empty: (_self, data) =>
+			`${unwrap(data.query) ?? ""}`.trim() ? "  no matching bookmarks" : "  no bookmarks",
 		emptyFg: () => env.textSecondaryFg,
 	}
 	if (env?.rows) {
@@ -70,4 +44,4 @@ function createBehaviors(env) {
 	return behaviors
 }
 
-export { bookmarkTitle, createBehaviors }
+export { createBehaviors }

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

@@ -6,9 +6,8 @@
 			<text out="sign" out:fg="titleColor"></text>
 			<input ref="query" inout="query" flexGrow="1" height="1" out:focused="focused" on:enter="confirm"></input>
 		</box>
-		<text when="inputVisible" out="target" out:fg="pathFg" paddingLeft="1" wrapMode="none" truncate="true"></text>
 		<text when="emptyList" out="empty" out:fg="emptyFg" paddingLeft="1" wrapMode="none"></text>
-		<scrollbox when="listVisible" ref="list" flexGrow="1">
+		<scrollbox ref="list" flexGrow="1">
 			<box out="rows" flexDirection="column"></box>
 		</scrollbox>
 		<box flexDirection="row" height="1" paddingLeft="1">

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

@@ -1,5 +1,6 @@
-<li class="bookmark-row" out:class="rowClass" on:click="item.name!bookmark:select">
+<li class="bookmark-row" out:class="rowClass" on:click="item.key!bookmark:select">
 	<span class="bookmark-marker" out="rowMarker"></span>
+	<svg class="bookmark-icon ui-icon" when="hasIcon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use out:href="rowIconHref"></use></svg>
 	<span class="bookmark-name" out="rowName"></span>
 	<span class="bookmark-path" out="rowPath"></span>
 </li>

package/src/js/tcmd/components/BookmarkRow.js

@@ -4,17 +4,18 @@
 // Created: 2026-10-09
 
 // Module: tcmd/components/BookmarkRow
-// One row of the bookmark picker. Reads `{ item: { name, path }, index,
-// selected }`, the same bag shape in both engines. Selection is snapshotted by
-// the row builder into a plain `selectedRow` boolean and read through the
-// shared `isSelected` predicate, with the `selected` cell as fallback for
-// hand-built bags.
+// One row of the bookmarks panel. Reads `{ item: { name, path, add? }, index,
+// selected }`, the same bag shape in both engines. The synthetic add row reads
+// as an action; stored rows read as `name/` for directories. Selection is
+// snapshotted by the row builder into a plain `selectedRow` boolean and read
+// through the shared `isSelected` predicate, with the `selected` cell as
+// fallback for hand-built bags.
 //
 // Environment: `accentFg`, `textFg`, `textSecondaryFg`, `selectionBg` (TUI row
 // background), `selectedClass` (web), `icons` (show Nerd Font icons).
 
 import { isSelected } from "./rows.js"
-import { iconFor } from "./icons.js"
+import { iconFor, lucideIconFor } from "./icons.js"
 
 // Function: createBehaviors
 // Builds the BookmarkRow behavior map for the given renderer environment.
@@ -25,13 +26,17 @@ function createBehaviors(env) {
 		rowFg: (_self, data) => (isSelected(data) ? env.accentFg : env.textFg),
 		// The icon is its own slot, 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) => (env.icons ? iconFor(data.item) : ""),
+		rowIconHref: (_self, data) => (env.lucideIcons ? `#lucide-${lucideIconFor(data.item)}` : ""),
 		rowIconFg: () => env.textSecondaryFg,
 		rowMarker: (_self, data) => (isSelected(data) ? ">" : " "),
-		// A directory bookmark reads as `name/`, mirroring the listing.
+		// The add row names its action; a directory bookmark reads as
+		// `name/`, mirroring the listing.
 		rowName: (_self, data) =>
-			`${data.item?.name ?? ""}${data.item?.isDir === true ? "/" : ""}`,
+			data.item?.add
+				? data.item.name ?? ""
+				: `${data.item?.name ?? ""}${data.item?.isDir === true ? "/" : ""}`,
 		rowPath: (_self, data) => `${data.item?.path ?? ""}`,
 		rowPathFg: () => env.textSecondaryFg,
 	}

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

@@ -1,4 +1,4 @@
-<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="item.name!bookmark:select">
+<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="item.key!bookmark:select">
 	<text out="rowMarker" width="2" out:fg="rowFg"></text>
 	<text out="rowIcon" out:fg="rowIconFg" wrapMode="none" when="hasIcon"></text>
 	<box minWidth="12" flexShrink="0">

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

@@ -1,17 +1,28 @@
-<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">
+<li class="panel-row" out:class="rowClass" out:data-risk="row.risk" out:data-group="row.group" 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 class="panel-marker" when="isItem" out="marker"></span>
+		<span class="panel-name" when="isItem" out="name"></span>
+		<span class="panel-summary" when="isItem" 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-name panel-group-name" when="isGroup" out="name"></span>
+	<span class="panel-marker" when="showPlain" out="marker"></span>
+	<span class="panel-name" when="showPlain" out="name"></span>
+	<span class="panel-marker" when="isArg" out="marker"></span>
+	<span class="panel-name panel-arg-name" when="isArg" out="name"></span>
+	<span class="panel-perm" when="isPerm">
+		<span class="panel-perm-class" out="permClass"></span>
+		<button class="panel-perm-bit" type="button" tabindex="-1" out:class="permRClass" out:aria-pressed="permROn" on:click="row.keyR!panel:perm." out="permR"></button>
+		<button class="panel-perm-bit" type="button" tabindex="-1" out:class="permWClass" out:aria-pressed="permWOn" on:click="row.keyW!panel:perm." out="permW"></button>
+		<button class="panel-perm-bit" type="button" tabindex="-1" out:class="permXClass" out:aria-pressed="permXOn" on:click="row.keyX!panel:perm." out="permX"></button>
+	</span>
+	<button class="panel-run-button" when="isRun" type="button" tabindex="-1" out:aria-label="runAriaLabel" out="runLabel"></button>
+	<span class="panel-field" when="isArg" out:data-editable="editable">
 		<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>
+	<svg class="panel-op-chevron ui-icon" when="isOp" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-chevron-right"></use></svg>
 </li>

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

@@ -5,53 +5,66 @@
 
 // Module: tcmd/components/CommandArgRow
 // 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 }`
+// passes `{ type: "op" }` name-only rows (`risk` tints caution/destructive
+// categories) and `{ type: "group" }` headers (Command / File / Create / Edit / Delete). The
+// right pane passes `{ type: "arg" | "item" | "perm" | "frame" | "entry" |
+// "parent" | "run" }` rows: an argument header stacks its label over its value
+// — a bracketed field with a distinct background for textual arguments, a
+// summary otherwise; an item shows a `[x]`/`[ ]` (or radio) marker with its
+// basename and parent; `perm` is a `u/g/o` permission class with three r/w/x
+// cells; a `frame` draws a selection list's border; and `parent` is the
+// picker's `..` navigation row. Reads the row bag
+// `{ item, index, row, cursor, focus, permBit, value }`
 // built by `rows.js`.
 //
 // Environment: `accentFg` (focused row), `textFg`, `textSecondaryFg` (summary),
-// `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).
+// `textHeadingFg` (general headings), `accentSecondaryFg` (a selected item),
+// `errorFg` (destructive op/error), `warningFg` (caution op), `selectionBg`
+// (row background), `fieldBg`/`fieldFg` (editable values), `readonlyFg`
+// (read-only values), `borderSecondaryFg` (the list border), `focusedClass`
+// (web), `icons` (namespace marker).
 
 import { unwrap } from "select/state/cells"
+import { PERMISSION_BITS } from "../core/permissions.js"
 
 // Function: riskFg
-// The colour a row's risk maps to: red for destructive operations, amber for
-// caution (a move), null when the row is not risky.
+// The colour a row's category maps to: red for Delete, amber for Edit, null
+// when the row is neither.
 function riskFg(row, env) {
-	if (row?.type === "op" && row.risk === "destructive") return env.errorFg
-	if (row?.type === "op" && row.risk === "caution") return env.warningFg
+	if ((row?.type === "op" || row?.type === "run") && row.risk === "destructive") return env.errorFg
+	if ((row?.type === "op" || row?.type === "run") && row.risk === "caution") return env.warningFg
 	return null
 }
 
+// Function: groupFg
+// Color the purpose-group headings: Edit is amber and Delete is red.
+function groupFg(group, env) {
+	if (group === "Edit") return env.warningFg
+	if (group === "Delete") return env.errorFg
+	return env.textFg
+}
+
 // Function: rowName
-// The row's left cell: 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).
+// The row's label: a group heading, operation name, argument label, `[Run]`
+// action, `[x] basename`, or picker entry (directories carry a trailing slash).
 function rowName(row) {
 	if (!row) return ""
 	if (row.type === "group") return row.name ?? ""
+	if (row.type === "run") return row.error ? "[Retry]" : row.armed ? "[Confirm]" : "[Run]"
 	if (row.type === "item") return `${row.marker ?? "[ ]"} ${row.name ?? ""}`
+	if (row.type === "perm") return row.label ?? ""
+	if (row.type === "parent") return ".."
 	if (row.type === "entry") return `${row.name ?? ""}${row.isDir ? "/" : ""}`
 	return row.name ?? ""
 }
 
 // Function: rowSummary
-// The row's right cell: 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.
+// The row's right cell: an argument's binding summary (or its value), an
+// item's parent directory, or a picker entry's kind.
 function rowSummary(row) {
 	if (!row) return ""
 	if (row.type === "item") return row.parent ?? ""
+	if (row.type === "parent") return "parent directory"
 	if (row.type === "entry") {
 		if (row.isSymlink && row.target) return `${row.target}`
 		return row.isDir ? "dir" : ""
@@ -81,6 +94,11 @@ 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"
+	// A permission row has three bit cells; the bit cursor marks the one Space
+	// toggles, and a click toggles the cell it lands on.
+	const bits = (data) => data.row?.bits ?? []
+	const bitAt = (data, index) => bits(data)[index]
+	const bitFocused = (data, index) => focused(data) && (unwrap(data.permBit) ?? 0) === index
 	// The web classes that draw a selection's list box: the item rows carry the
 	// sides, the frame rows the top/bottom.
 	const listClass = (data) => {
@@ -91,23 +109,22 @@ function createBehaviors(env) {
 	// 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 {
+	const behaviors = {
 		editing,
 		// --- shared row content ---
 		marker: (_self, data) => (focused(data) ? ">" : " "),
 		markerFg: () => env.accentFg,
-		// 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
-		},
+		// An argument's label sits on its own line, above the value.
+		name: (_self, data) => rowName(data.row),
+		// A permission row: its class label and three bit cells.
+		permClass: (_self, data) => data.row?.label ?? data.row?.classId ?? "",
+		isPerm: (_self, data) => type(data) === "perm",
 		rowBg: (_self, data) => (focused(data) ? env.selectionBg : undefined),
 		rowClass: (_self, data) =>
 			[focused(data) ? env.focusedClass : null, listClass(data)].filter(Boolean).join(" ") || null,
 		rowSelected: (_self, data) => `${data.row?.selected === true}`,
 		rowFg: (_self, data) => {
-			if (type(data) === "group") return env.textHeadingFg
+			if (type(data) === "group") return groupFg(data.row?.group ?? data.row?.name, env)
 			const risk = riskFg(data.row, env)
 			if (risk) return risk
 			if (focused(data)) return env.accentFg
@@ -124,27 +141,66 @@ function createBehaviors(env) {
 		// --- layout branches ---
 		isArg: (_self, data) => type(data) === "arg",
 		isItem: (_self, data) => type(data) === "item",
+		isOp: (_self, data) => type(data) === "op",
+		isGroup: (_self, data) => type(data) === "group",
+		isEntry: (_self, data) => type(data) === "entry" || type(data) === "parent",
+		isRun: (_self, data) => type(data) === "run",
+		hasRunError: (_self, data) => type(data) === "run" && Boolean(data.row?.error),
 		isFrame: (_self, data) => type(data) === "frame",
 		isList: (_self, data) => isList(data),
-		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)),
+		showPlain: (_self, data) => type(data) === "op" || type(data) === "entry" || type(data) === "parent",
+		isPlain: (_self, data) => type(data) === "entry" || type(data) === "parent",
+		// An argument stacks its label over its value; every other row is one
+		// line tall.
+		rowHeight: (_self, data) => (type(data) === "arg" ? 2 : 1),
+		runMarginTop: (_self, data) => (type(data) === "run" ? 1 : 0),
+		runLabel: (_self, data) => (data?.row?.error ? "[Retry]" : data?.row?.armed ? "[Confirm]" : "[Run]"),
+		runAriaLabel: (_self, data) =>
+			data?.row?.error ? "Retry command" : data?.row?.armed ? "Confirm command" : "Run command",
+		runError: (_self, data) => data.row?.error ?? "",
+		runErrorFg: () => env.errorFg,
+		runFg: (_self, data) => riskFg(data.row, env) ?? env.textFg,
+		groupAttributes: () => env.groupAttributes ?? 0,
+		editable: (_self, data) => `${data.row?.editable === true}`,
+		// Editable values have a filled bracketed field; read-only summaries
+		// stay plain and muted.
+		fieldBg: (_self, data) => (data.row?.textual ? env.fieldBg : undefined),
+		fieldFg: (_self, data) =>
+			data.row?.textual ? (env.fieldFg ?? env.textFg) : (env.readonlyFg ?? env.textSecondaryFg),
+		textual: (_self, data) => data.row?.textual === true,
+		fieldOpen: (_self, data) => (data.row?.textual ? "[" : ""),
+		fieldClose: (_self, data) => (data.row?.textual ? "]" : ""),
+		// Selection lists share the argument pane's one-cell inset; the spacer
+		// is NBSP so the renderers do not collapse the leading run.
+		rowIndent: (_self, data) => (isList(data) ? 1 : 0),
+		listIndent: (_self, data) => 1,
+		listSpacer: (_self, data) => "\u00a0",
 		listBorder: (_self, data) => {
 			if (type(data) !== "frame") return ["left", "right"]
 			return data.row?.variant === "top" ? ["top", "left", "right"] : ["bottom", "left", "right"]
 		},
 		borderFg: () => env.borderSecondaryFg,
 	}
+	// r/w/x cells of a permission row, in the shared permission order so the
+	// templates can bind each cell without looping.
+	for (let i = 0; i < PERMISSION_BITS.length; i++) {
+		const bit = PERMISSION_BITS[i]
+		const name = bit.id.toUpperCase()
+		behaviors[`perm${name}`] = (_self, data) => (bitAt(data, i)?.selected ? bit.id : "-")
+		behaviors[`perm${name}On`] = (_self, data) => `${bitAt(data, i)?.selected === true}`
+		behaviors[`perm${name}Fg`] = (_self, data) =>
+			bitAt(data, i)?.selected ? env.accentSecondaryFg : env.textSecondaryFg
+		behaviors[`perm${name}Bg`] = (_self, data) =>
+			bitFocused(data, i) ? env.accentSecondaryBg : undefined
+		behaviors[`perm${name}Class`] = (_self, data) =>
+			[
+				bitAt(data, i)?.selected ? "is-on" : "is-off",
+				bitFocused(data, i) ? "is-bit-focused" : null,
+			]
+				.filter(Boolean)
+				.join(" ")
+	}
+	return behaviors
 }
 
 export { createBehaviors, isFocused, riskFg, rowName, rowSummary, wantsFocus }