@ssebastien/tcmd 0.1.4 → 0.1.7

package/src/js/tcmd/desktop/fs.js

@@ -0,0 +1,91 @@
+// Project: TinyCommand
+// License: BSD
+// Module: tcmd/desktop/fs
+// Frontend adapter: forward the shared core's filesystem contract over named
+// tinyjs RPC calls. `createDesktopFs` is async because it caches immutable
+// home/cwd/root values required by the synchronous adapter getters. Raw
+// bytes cross the bridge base64-encoded, like the web API.
+
+import { decodeBase64 } from "../core/base64.js"
+
+// Function: createDesktopFs
+// Builds the adapter over the tinyjs RPC bridge. `on` subscribes to backend
+// push events (the native watcher); without it the adapter reports no `watch`
+// and `core/watch` falls back to polling.
+function createDesktopFs({ call, on }) {
+	if (typeof call !== "function") throw new TypeError("an RPC call function is required")
+	const watching = typeof on === "function"
+	// One backend channel carries every watcher; ids tell them apart and a
+	// page reload restarts the sequence after `fsWatchReset` closes the old
+	// page's watchers.
+	const watchHandlers = new Map()
+	// A per-page prefix keeps ids unique across windows: `app.push` broadcasts
+	// every `fs-change` to all of them, and a fixed sequence would make two
+	// windows mistake each other's watcher events for their own.
+	const watchPrefix = Math.random().toString(36).slice(2, 8)
+	let watchSeq = 0
+	return (async () => {
+		const info = await call("fsInfo")
+		if (watching) {
+			on("fs-change", (payload) => {
+				const id = payload?.id
+				if (id != null) watchHandlers.get(id)?.()
+			})
+			await call("fsWatchReset").catch(() => {})
+		}
+		return {
+			readDir: (path) => call("fsReadDir", { path }),
+			stat: (path) => call("fsStat", { path }),
+			realpath: (path) => call("fsRealpath", { path }),
+			isDir: async (path) => Boolean((await call("fsStat", { path }))?.isDir),
+			readTextHead: (path, maxBytes) => call("fsReadTextHead", { path, maxBytes }),
+			readBytes: async (path, maxBytes) =>
+				decodeBase64((await call("fsReadBytes", { path, maxBytes })).base64),
+			du: (path) => call("fsDu", { path }),
+			disk: (path) => call("fsDisk", { path }),
+			copy: (from, to) => call("fsCopy", { from, to }),
+			move: (from, to) => call("fsMove", { from, to }),
+			hardlink: (from, to) => call("fsHardlink", { from, to }),
+			symlink: (target, link) => call("fsSymlink", { target, link }),
+			chmod: (path, mode) => call("fsChmod", { path, mode }),
+			chown: (path, owner) => call("fsChown", { path, owner }),
+			unlink: (path) => call("fsUnlink", { path }),
+			trash: (paths) => call("fsTrash", { paths }),
+			trashList: () => call("fsTrashList"),
+			restore: (paths) => call("fsRestore", { paths }),
+			erase: (paths) => call("fsErase", { paths }),
+			touch: (path) => call("fsTouch", { path }),
+			mkdir: (path) => call("fsMkdir", { path }),
+			// Function: watch
+			// Registers a native directory watcher in the backend. Resolves to
+			// its stop, or null when the bridge cannot watch the path — which
+			// sends `core/watch` to its polling fallback.
+			async watch(path, onChange) {
+				if (!watching) return null
+				const id = `${watchPrefix}-${++watchSeq}`
+				watchHandlers.set(id, onChange)
+				try {
+					await call("fsWatch", { path, id })
+				} catch (error) {
+					watchHandlers.delete(id)
+					return null
+				}
+				let stopped = false
+				return () => {
+					if (stopped) return
+					stopped = true
+					watchHandlers.delete(id)
+					void Promise.resolve(call("fsUnwatch", { id })).catch(() => {})
+				}
+			},
+			home: () => info.home,
+			cwd: () => info.cwd,
+			root: () => info.root,
+			host: () => info.host,
+		}
+	})()
+}
+
+export { createDesktopFs }
+
+// EOF

package/src/js/tcmd/desktop/main.js

@@ -0,0 +1,194 @@
+// Project: TinyCommand
+// License: BSD
+// Module: tcmd/desktop/main
+// tinyjs frontend bootstrap. This deliberately bypasses the browser entry's
+// OPFS/HTTP backend selection and mounts the existing DOM UI over the native
+// filesystem and host adapters.
+
+import { effect } from "select/state/cells"
+import { createBookmarks } from "../core/bookmarks.js"
+import { parent } from "../core/path.js"
+import { createPane } from "../core/pane.js"
+import { createSession, load } from "../core/session.js"
+import { main as mount } from "../web/index.js"
+import { createDesktopBookmarkStore } from "./bookmarks.js"
+import { createDesktopFs } from "./fs.js"
+import { createDesktopOs } from "./os.js"
+
+const WORKSPACE_KEY = "tcmd.workspace.v1"
+
+function showError(tiny, title, error) {
+	const message = error?.message ?? `${error}`
+	return tiny.dialog.alert(title, message).catch(() => {})
+}
+
+function start({ doc = globalThis.document, tiny = globalThis.tiny } = {}) {
+	const host = doc?.querySelector?.("#app")
+	if (!host) throw new Error("TinyCommand desktop page is missing #app")
+	if (!tiny?.api?.call) throw new Error("TinyCommand needs the tinyjs API bridge")
+	return startApp({ host, doc, tiny })
+}
+
+async function startApp({ host, doc, tiny }) {
+	let stopOpenFiles = null
+	let ready = false
+	let flushPromise = null
+	let flushRequested = false
+	let session = null
+	let fs = null
+	let instance = null
+	let stopWorkspaceEffect = null
+	let stopDrop = null
+	let saveTimer = null
+	let disposed = false
+	let quitting = false
+	function dispose() {
+		if (disposed) return
+		disposed = true
+		ready = false
+		clearTimeout(saveTimer)
+		stopOpenFiles?.()
+		stopDrop?.()
+		stopWorkspaceEffect?.()
+		instance?.unmount?.()
+	}
+	const call = (method, params) => tiny.api.call(method, params)
+	const flushOpenFiles = () => {
+		if (!ready) return Promise.resolve()
+		flushRequested = true
+		if (flushPromise) return flushPromise
+		flushPromise = (async () => {
+			while (ready && flushRequested) {
+				flushRequested = false
+				const paths = await call("fsTakeOpenFiles")
+				if (paths?.length) await openPaths(paths)
+			}
+		})()
+			.catch((error) => showError(tiny, "Could not open folder", error))
+			.finally(() => {
+				flushPromise = null
+				if (ready && flushRequested) return flushOpenFiles()
+			})
+		return flushPromise
+	}
+	stopOpenFiles = tiny.api.on("open-files", () => {
+		if (ready) void flushOpenFiles()
+	})
+
+	async function openPaths(paths) {
+		for (const rawPath of paths ?? []) {
+			if (typeof rawPath !== "string" || !rawPath) continue
+			const stats = await fs.stat(rawPath)
+			if (!stats) continue
+			const folder = stats.isDir ? rawPath : parent(rawPath)
+			session.active.set("left")
+			await session.panes.left.navigate(folder, { cursorPath: stats.isDir ? null : rawPath })
+			return rawPath
+		}
+		throw new Error("The requested folder or file no longer exists")
+	}
+
+	async function chooseFolder() {
+		const path = await tiny.dialog.pickFolder()
+		if (path) await openPaths([path])
+	}
+
+	try {
+		fs = await createDesktopFs({ call, on: (event, handler) => tiny.api.on(event, handler) })
+		const saved = await tiny.store.get(WORKSPACE_KEY).catch(() => null)
+		const validDirectory = async (value) => {
+			if (typeof value !== "string") return null
+			return await fs.isDir(value).catch(() => false) ? value : null
+		}
+		const home = fs.home()
+		const leftPath = (await validDirectory(saved?.left)) ?? home
+		const rightPath = (await validDirectory(saved?.right)) ?? home
+		const viewMode = saved?.viewMode === "commander" ? "commander" : "explorer"
+		const left = createPane({ fs, path: leftPath })
+		const right = createPane({ fs, path: rightPath })
+		const bookmarks = createBookmarks({
+			store: createDesktopBookmarkStore({ store: tiny.store }),
+		})
+		session = createSession({
+			fs,
+			os: createDesktopOs({ call, tiny }),
+			left,
+			right,
+			host: fs.host(),
+			bookmarks,
+			viewMode,
+		})
+		await load(session)
+		instance = mount(session, "#app", {
+			desktopMode: true,
+			onQuit: quit,
+			onOpenFolder: chooseFolder,
+			onError: (error) => showError(tiny, "TinyCommand", error),
+		})
+		doc.title = "TinyCommand"
+		tiny.win.setTitle?.("TinyCommand")
+		tiny.win.setMinSize?.(900, 640)
+
+		let warnedAboutStorage = false
+		const saveWorkspace = async (leftLocation, rightLocation, mode) => {
+			try {
+				const savedOk = await tiny.store.set(WORKSPACE_KEY, {
+					left: leftLocation,
+					right: rightLocation,
+					viewMode: mode,
+				})
+				if (savedOk === false && !warnedAboutStorage) {
+					warnedAboutStorage = true
+					session.notice.set({ kind: "warning", text: "Could not save the workspace settings" })
+				}
+			} catch (error) {
+				if (!warnedAboutStorage) {
+					warnedAboutStorage = true
+					session.notice.set({ kind: "warning", text: `Could not save workspace settings: ${error.message}` })
+				}
+			}
+		}
+		async function quit() {
+			if (quitting || disposed) return
+			quitting = true
+			clearTimeout(saveTimer)
+			try {
+				await saveWorkspace(left.path.value, right.path.value, session.viewMode.value)
+				await tiny.quit()
+				dispose()
+			} catch (error) {
+				quitting = false
+				await showError(tiny, "Could not quit TinyCommand", error)
+			}
+		}
+		stopWorkspaceEffect = effect([left.path, right.path, session.viewMode], ([leftLocation, rightLocation, mode]) => {
+			if (!ready) return
+			clearTimeout(saveTimer)
+			saveTimer = setTimeout(() => void saveWorkspace(leftLocation, rightLocation, mode), 350)
+		})
+		ready = true
+		await saveWorkspace(left.path.value, right.path.value, session.viewMode.value)
+		stopDrop = tiny.win.onDrop?.((paths) => {
+			void openPaths(paths).catch((error) => showError(tiny, "Could not open dropped item", error))
+		})
+		await flushOpenFiles()
+		return {
+			fs,
+			session,
+			instance,
+			dispose,
+		}
+	} catch (error) {
+		dispose()
+		host.textContent = `TinyCommand desktop could not start: ${error?.message ?? error}`
+		throw error
+	}
+}
+
+if (globalThis.document && globalThis.tiny) {
+	void start().catch((error) => console.error("TinyCommand desktop startup failed", error))
+}
+
+export { start, startApp, WORKSPACE_KEY }
+
+// EOF

package/src/js/tcmd/desktop/os.js

@@ -0,0 +1,33 @@
+// Project: TinyCommand
+// License: BSD
+// Module: tcmd/desktop/os
+// Host adapter for tinyjs. Opening/editing is delegated to the OS's default
+// application. Explicit shell commands run in a non-interactive shell; bounded
+// output is returned to the caller and shown in a native alert. Clipboard
+// writes go through the webview's Clipboard API.
+
+import { copyToBrowserClipboard } from "../core/os.js"
+
+function createDesktopOs({ call, tiny = globalThis.tiny }) {
+	return {
+		canEdit: true,
+		copy: (text) => copyToBrowserClipboard(text),
+		open: (path) => call("hostOpen", { path }),
+		edit: (path) => call("hostEdit", { path }),
+		async run(command, options = {}) {
+			const result = await call("hostRun", { command, cwd: options.cwd })
+			const sections = []
+			if (result.stdout) sections.push(result.stdout.trimEnd())
+			if (result.stderr) sections.push(result.stderr.trimEnd())
+			if (result.truncated) sections.push("[Output truncated after 32 KiB per stream]")
+			if (result.exitCode !== 0) sections.push(`Process exited with status ${result.exitCode}`)
+			if (result.signal) sections.push(`Process stopped by ${result.signal}`)
+			if (sections.length) await tiny.dialog.alert("Command output", sections.join("\n\n"))
+			return result
+		},
+	}
+}
+
+export { createDesktopOs }
+
+// EOF

package/src/js/tcmd/tui/app.js

@@ -9,8 +9,9 @@
 //
 // The TUI layers two presentation-only cells on top of the shared controller:
 // `size` (viewport dimensions from the renderer's resize events) and `help`
-// (the `?` overlay). A third, `viewer`, tracks the fullscreen inspector used
-// below the inline-inspector breakpoint. None of them exist in the web view.
+// (the `?` overlay). The fullscreen inspector is not one of them: it lives in
+// the session (`viewerOpen`), so a command can open it and both renderers show
+// it (`components/Frame#showViewer`).
 
 import { cell, derived, unwrap } from "select/state/cells"
 import { ui } from "select.tui"
@@ -18,14 +19,50 @@ import appXml from "../components/App.xml" with { type: "text" }
 import { elideCrumbs } from "../components/format.js"
 import { appBehaviors, appEvents, appInit } from "../components/index.js"
 import { registerComponents } from "./catalogue.js"
-import { createFrameBehaviors, currentColumnId, INSPECTOR_INLINE_WIDTH, isExplorer, isNarrow } from "../components/Frame.js"
+import { createFrameBehaviors, currentColumnId, isExplorer, paneColumnWidth, PANE_GROW } from "../components/Frame.js"
 import { tuiTheme } from "./theme.js"
 
-// Constant: CURRENT_GROW
-// How much wider the explorer's middle (current) column is than its
-// neighbours — enough to read as the working pane, not enough to starve the
-// parent and preview columns.
-const CURRENT_GROW = 1.35
+// Columns available to a pane's breadcrumb strip: the viewport split by the
+// panes' own grow ratios (explorer grows the current column, so its mirrors
+// are narrower than an even split), minus the pane chrome. `0` (unknown, web)
+// disables the collapse.
+function crumbWidthFor(size, session, paneId) {
+	return derived([size, session.showPreview, session.viewMode, session.currentId], ([value, showPreview, viewMode, currentId]) => {
+		const columns = paneColumnWidth(value?.width, paneId, { viewMode, currentId, showPreview })
+		return columns > 0 ? Math.max(8, columns - 8) : 0
+	})
+}
+
+// The elided breadcrumb segments for one pane (a presentation-only view of the
+// pane's own segment list; paths stay intact for clicks).
+function paneCrumbs(size, session, paneId, pane) {
+	return derived([pane.segments, crumbWidthFor(size, session, paneId)], ([segments, width]) => elideCrumbs(segments, width))
+}
+
+// Function: normalizeKey
+// OpenTUI's Kitty keyboard events can report shifted letters in uppercase and
+// punctuation with `shift: true`. The shared keymap uses lowercase letters
+// plus explicit modifiers, while shifted punctuation is already its own key
+// (for example, `:`), so normalize those details before dispatch.
+function normalizeKey(event) {
+	const rawName = `${event?.name ?? ""}`
+	const sequence = `${event?.sequence ?? ""}`
+	const shiftedPunctuation =
+		event?.source === "kitty" &&
+		Boolean(event?.shift) &&
+		rawName.length === 1 &&
+		sequence.length === 1 &&
+		!/[a-z0-9]/i.test(sequence)
+	const nameSource = shiftedPunctuation ? sequence : rawName
+	const name = nameSource.toLowerCase()
+	const punctuation = name.length === 1 && !/[a-z0-9]/.test(name)
+	const shiftedLetter = rawName.length === 1 && rawName !== name && /[a-z]/i.test(rawName)
+	return {
+		...event,
+		name,
+		shift: !punctuation && (Boolean(event?.shift) || shiftedLetter),
+	}
+}
 
 // Function: createAppComponent
 // Builds the root component bound to a `session`.
@@ -43,29 +80,20 @@ function createAppComponent(session, options = {}) {
 	registerComponents()
 	const size = options.size ?? cell({ width: 0, height: 0 })
 	const help = options.help ?? cell(false)
-	const viewer = options.viewer ?? cell(false)
+	// The fullscreen inspector overlay lives in the session (core), so a
+	// command — Enter on a file that cannot be edited — can open it; the
+	// renderer only shows it (`components/Frame#showViewer`).
+	const viewer = session.viewerOpen
 
-	// Columns available to a pane's breadcrumb strip: the viewport shared by
-	// the panes (plus the inline inspector), minus the pane border, the
-	// header inset, the SRC/DST slot and a safety column. `0` (unknown, web)
-	// disables the collapse.
-	const crumbWidth = derived([size, session.showPreview], ([value, showPreview]) => {
-		const width = Math.floor(value?.width ?? 0)
-		if (width <= 0) return 0
-		const columns = showPreview && width >= INSPECTOR_INLINE_WIDTH ? 3 : 2
-		return Math.max(8, Math.floor(width / columns) - 8)
-	})
-	// The elided breadcrumb segments for each pane (presentation-only view of
-	// the pane's own segment list; paths stay intact for clicks).
-	const leftCrumbs = derived([session.panes.left.segments, crumbWidth], ([segments, width]) =>
-		elideCrumbs(segments, width),
-	)
-	const rightCrumbs = derived([session.panes.right.segments, crumbWidth], ([segments, width]) =>
-		elideCrumbs(segments, width),
-	)
-	const parentCrumbs = derived([session.panes.parent.segments, crumbWidth], ([segments, width]) =>
-		elideCrumbs(segments, width),
-	)
+	// Columns available to each pane's breadcrumb strip: the pane's own share
+	// of the viewport (explorer's current column is wider, so its mirrors are
+	// narrower), minus the pane chrome. `0` (unknown, web) disables the
+	// collapse. An even `width / columns` split used to overflow the narrower
+	// mirror columns, which the renderer then mangled.
+	const leftCrumbs = paneCrumbs(size, session, "left", session.panes.left)
+	const rightCrumbs = paneCrumbs(size, session, "right", session.panes.right)
+	const parentCrumbs = paneCrumbs(size, session, "parent", session.panes.parent)
+	const previewCrumbs = paneCrumbs(size, session, "preview", session.panes.preview)
 
 	const quit = options.quit ?? ((self) => {
 		// Destroying the renderer from within a keypress deadlocks the native
@@ -78,28 +106,44 @@ function createAppComponent(session, options = {}) {
 
 	const baseKeys = appBehaviors({ quit }).keys
 	const frame = createFrameBehaviors({ theme: tuiTheme })
+	const appSubs = appEvents()
+
+	// The active pane's border and head rule take the view mode's own accent:
+	// the Tiny blue in explorer, the gold accent in commander. An inactive
+	// pane keeps the muted border. `isExplorer` defaults an absent mode to
+	// commander, matching the rest of the workspace.
+	const paneActiveFg = (data) =>
+		isExplorer(data) ? tuiTheme.borderActiveExplorerFg : tuiTheme.borderSecondaryActiveFg
+	const paneBorderFg = (paneId) => (_self, data) =>
+		unwrap(data.active) === paneId ? paneActiveFg(data) : tuiTheme.borderSecondaryFg
 
 	return ui
 		.component("App")
-		.init(() => ({
-			...appInit(session)(),
-			uiSize: size,
-			helpOpen: help,
-			viewerOpen: viewer,
-			leftSegments: leftCrumbs,
-			parentSegments: parentCrumbs,
-			rightSegments: rightCrumbs,
-		}))
+		.init((self) => {
+			// The panel's Quit command reaches the renderer through this hook.
+			session.quit = () => quit(self)
+			return {
+				...appInit(session)(),
+				uiSize: size,
+				helpOpen: help,
+				viewerOpen: viewer,
+				leftSegments: leftCrumbs,
+				parentSegments: parentCrumbs,
+				rightSegments: rightCrumbs,
+				previewSegments: previewCrumbs,
+			}
+		})
 		.does({
 			...frame,
 			keys: (self, data, event) => {
-				const key = event
+				const key = normalizeKey(event)
 				const name = key?.name
-				const isQuestion = name === "?" || (name === "/" && key?.shift)
+				const isQuestion = name === "?" || (name === "/" && event?.shift)
 				const busy =
 					unwrap(data.confirm) ||
 					unwrap(data.filtering) ||
 					unwrap(data.bookmarkOpen) ||
+					unwrap(data.overlay) ||
 					unwrap(data.panelOpen)
 
 				// Help overlay owns the keyboard while open.
@@ -111,48 +155,41 @@ function createAppComponent(session, options = {}) {
 					help.set(true)
 					return
 				}
-				// The fullscreen viewer: Esc closes, O/E act on the file.
-				if (viewer.value && isNarrow(data, self)) {
-					if (name === "escape") {
-						viewer.set(false)
-						return
-					}
-					if (name === "o" && key.shift) return data.dispatch("file.open", { paneId: unwrap(data.active) })
-					if (name === "e" && key.shift) return data.dispatch("file.edit", { paneId: unwrap(data.active) })
-					return
-				}
-				// Below the inline breakpoint `v` toggles the viewer overlay
-				// instead of the side panel (`⇧V` still maximizes).
-				if (!busy && name === "v" && !key.shift && isNarrow(data, self)) {
-					viewer.set(!viewer.value)
-					return
-				}
-				return baseKeys(self, data, event)
+				// The viewer overlay and the narrow-`v` shortcut are shared
+				// modal routing, handled by `components/App#createBehaviors`.
+				return baseKeys(self, data, key)
 			},
-			// TUI-only presentation of the shared App state.
-			leftBorderFg: (_self, data) =>
-				unwrap(data.active) === "left" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
-			rightBorderFg: (_self, data) =>
-				unwrap(data.active) === "right" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
-			parentBorderFg: (_self, data) =>
-				unwrap(data.active) === "parent" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
+			// TUI-only presentation of the shared App state: each pane's
+			// border and header rule track its own focus, tinted by the view
+			// mode (explorer blue, commander gold).
+			leftBorderFg: paneBorderFg("left"),
+			rightBorderFg: paneBorderFg("right"),
+			parentBorderFg: paneBorderFg("parent"),
 			// The header rule carries the same focus tint as the pane border.
-			leftHeadRuleFg: (_self, data) =>
-				unwrap(data.active) === "left" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
-			rightHeadRuleFg: (_self, data) =>
-				unwrap(data.active) === "right" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
-			parentHeadRuleFg: (_self, data) =>
-				unwrap(data.active) === "parent" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
+			leftHeadRuleFg: paneBorderFg("left"),
+			rightHeadRuleFg: paneBorderFg("right"),
+			parentHeadRuleFg: paneBorderFg("parent"),
 			// In explorer the current column takes the extra width; in
 			// commander both panes share the row evenly. The columns carry
 			// `flexBasis="0"` so the whole row is distributed by these
 			// growers instead of by the content each column would claim.
 			leftGrow: (_self, data) =>
-				isExplorer(data) && currentColumnId(data) === "left" ? CURRENT_GROW : 1,
+				isExplorer(data) && currentColumnId(data) === "left" ? PANE_GROW : 1,
 			rightGrow: (_self, data) =>
-				isExplorer(data) && currentColumnId(data) === "right" ? CURRENT_GROW : 1,
+				isExplorer(data) && currentColumnId(data) === "right" ? PANE_GROW : 1,
+		})
+		.sub({
+			...appSubs,
+			// The bar's `[Help ?]` entry opens the overlay, the same path as the
+			// `?` key (the renderer owns the help cell).
+			"commandbar:run": (self, data, event) => {
+				if (event.data === "app.help") {
+					help.set(!help.value)
+					return
+				}
+				appSubs["commandbar:run"](self, data, event)
+			},
 		})
-		.sub(appEvents({ quit }))
 		.using(appXml)
 }