Edit file: built-in editor + external editor with watch & auto-upload

- Built-in editor (default): large modal with monospace textarea, Cmd+S save,
  dirty guard; reads/writes through the provider streams so it works on local
  and remote files identically (2MB cap with a friendly error)
- External editor: remote files download to appDataDir/edits/<id>, open via
  macOS `open -a`, the temp DIR is watched (survives atomic rename-saves) and
  every save enqueues a normal upload job (progress/errors in the transfer
  list); watchers + temp dirs are cleaned when the session disconnects
- Editor setting: Built-in | Custom with a NATIVE app picker (electrobun
  openFileDialog, /Applications, .app filter) and reset-to-default
- Leftover temp files from a crash prompt for cleanup at boot
- F4, toolbar button (mynaFileText), and File > Edit File (Cmd+E) menu entry
- README: feature notes + Portability notes (open/start/xdg-open seam
  documented in code and README per user request)

Verified headless against the box: sftp read/write roundtrip incl. UTF-8,
size cap, watch->save->auto-upload->remote-updated, session cleanup, orphan
listing and clearing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

README.md

@@ -25,6 +25,12 @@ remote server over SSH/SFTP, so you can move files **local↔remote**,
   (MB/s or Mbps), persisted across restarts.
 - On macOS the tab bar is fused with the window titlebar; other platforms keep
   a standard titlebar.
+- **Edit files** (F4 / toolbar / File menu): a built-in editor works on local
+  and remote files directly; or pick an external app (Options → Editor →
+  Custom → Choose…). External edits of remote files download to a temp folder,
+  are watched, and every save auto-uploads (visible in the transfer list) until
+  the session disconnects. Leftover temp files from a crash are offered for
+  cleanup at the next start.
 - Browse, sort (name/size/modified, folders first), keyboard navigation.
 - Create folder / file, rename, delete (recursive), change permissions (chmod).
 - Upload, download, and remote→remote copy — files **and** whole folders —
@@ -136,6 +142,18 @@ Saved connections live in a plain JSON file in the OS app-data directory
 
 (On Macs, function keys may need `fn` — every action also has a toolbar button.)
 
+## Portability notes
+
+The codebase is platform-neutral except for two seams, both macOS-only today:
+
+- **External editor launch** (`launchEditor` in [src/bun/edits.ts](src/bun/edits.ts)):
+  uses macOS `open [-a app] file`. A Windows port should use
+  `cmd /c start "" [app] file`; Linux `xdg-open file` (or invoke the configured
+  editor binary directly). The `.app` picker in the `pickEditorApp` handler
+  needs the equivalent executable picker per platform.
+- **Application menu** ([src/bun/menu.ts](src/bun/menu.ts)): electrobun menus
+  are macOS-only; the in-app UI covers every menu action.
+
 ## Known issues
 
 - **Rare native crash under load.** A long-running session (multiple remote

src/bun/edits.ts

@@ -0,0 +1,187 @@
+import { watch, type FSWatcher } from "node:fs";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { pipeline } from "node:stream/promises";
+import type { FileSystemProvider } from "./fs/provider";
+import type { SessionRegistry } from "./fs/registry";
+import type { SettingsStore } from "./store/settings";
+import { appDataDir } from "./store/paths";
+import type { TransferEngine } from "./transfers/engine";
+
+// Built-in editor guard: bigger than this is not a config file.
+const MAX_EDIT_BYTES = 2 * 1024 * 1024;
+const SAVE_DEBOUNCE_MS = 400;
+
+/** Read a whole file as UTF-8 through any provider (local or sftp). */
+export async function readFileText(
+	provider: FileSystemProvider,
+	filePath: string,
+): Promise<string> {
+	const stat = await provider.stat(filePath);
+	if (stat.size > MAX_EDIT_BYTES) {
+		throw new Error(
+			`File is ${Math.round(stat.size / 1024 / 1024)}MB — too large for the built-in editor. Use a custom editor instead.`,
+		);
+	}
+	const chunks: Buffer[] = [];
+	const stream = provider.createReadStream(filePath);
+	for await (const chunk of stream) {
+		chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+	}
+	return Buffer.concat(chunks).toString("utf8");
+}
+
+/** Write UTF-8 content through any provider. */
+export function writeFileText(
+	provider: FileSystemProvider,
+	filePath: string,
+	content: string,
+): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const stream = provider.createWriteStream(filePath);
+		stream.on("error", reject);
+		stream.end(Buffer.from(content, "utf8"), () => resolve());
+	});
+}
+
+/**
+ * Launch a file in an external editor.
+ *
+ * PORTABILITY: this is the only platform-specific piece of the edit feature.
+ * macOS delivers the file to any GUI app uniformly via `open [-a app]`.
+ * A Windows port should use `cmd /c start "" [app] file` and a Linux port
+ * `xdg-open file` (or `app file` when an editor is configured) — swap the
+ * spawn below and the .app picker in pickEditorApp; everything else
+ * (temp download, directory watch, auto-upload) is platform-neutral.
+ */
+function launchEditor(filePath: string, editorApp: string): void {
+	const args = editorApp ? ["open", "-a", editorApp, filePath] : ["open", filePath];
+	Bun.spawn(args, { stdout: "ignore", stderr: "ignore" });
+}
+
+interface WatchedEdit {
+	sessionId: string;
+	remotePath: string;
+	tempDir: string;
+	tempFile: string;
+	watcher: FSWatcher;
+	debounce: ReturnType<typeof setTimeout> | null;
+}
+
+/**
+ * External-editor flow for remote files: download to a temp dir, open the
+ * editor, watch the directory (survives atomic rename-saves), and enqueue an
+ * upload job on every save. Watchers die with their session; temp dirs left
+ * behind by a crash are offered for cleanup at next boot.
+ */
+export class EditManager {
+	private readonly editsDir = path.join(appDataDir(), "edits");
+	private watched: WatchedEdit[] = [];
+
+	constructor(
+		private registry: SessionRegistry,
+		private engine: TransferEngine,
+		private settings: SettingsStore,
+	) {}
+
+	async editExternal(sessionId: string, filePath: string): Promise<{ watching: boolean }> {
+		const { editorApp } = await this.settings.load();
+
+		if (sessionId === "local") {
+			launchEditor(filePath, editorApp);
+			return { watching: false };
+		}
+
+		const provider = this.registry.get(sessionId);
+		const tempDir = path.join(this.editsDir, crypto.randomUUID().slice(0, 8));
+		const name = provider.basename(filePath);
+		const tempFile = path.join(tempDir, name);
+
+		await fs.mkdir(tempDir, { recursive: true });
+		await fs.writeFile(
+			path.join(tempDir, "meta.json"),
+			JSON.stringify({ remotePath: filePath, sessionId, downloadedAt: new Date().toISOString() }),
+		);
+		const { createWriteStream } = await import("node:fs");
+		await pipeline(provider.createReadStream(filePath), createWriteStream(tempFile));
+
+		launchEditor(tempFile, editorApp);
+
+		const edit: WatchedEdit = {
+			sessionId,
+			remotePath: filePath,
+			tempDir,
+			tempFile,
+			watcher: watch(tempDir, (_event, changed) => {
+				if (changed !== name) return;
+				if (edit.debounce) clearTimeout(edit.debounce);
+				edit.debounce = setTimeout(() => this.uploadEdit(edit), SAVE_DEBOUNCE_MS);
+			}),
+			debounce: null,
+		};
+		this.watched.push(edit);
+		console.log(`[edit] watching ${tempFile} -> ${sessionId}:${filePath}`);
+		return { watching: true };
+	}
+
+	private uploadEdit(edit: WatchedEdit): void {
+		const provider = this.registry.get(edit.sessionId);
+		this.engine.enqueue({
+			srcSessionId: "local",
+			items: [{ path: edit.tempFile, type: "file" }],
+			dstSessionId: edit.sessionId,
+			dstDir: provider.dirname(edit.remotePath),
+		});
+	}
+
+	/** Session gone (disconnect, tab close, death): stop its watchers, drop temps. */
+	stopForSession(sessionId: string): void {
+		const [mine, rest] = [
+			this.watched.filter((w) => w.sessionId === sessionId),
+			this.watched.filter((w) => w.sessionId !== sessionId),
+		];
+		this.watched = rest;
+		for (const edit of mine) {
+			edit.watcher.close();
+			if (edit.debounce) clearTimeout(edit.debounce);
+			void fs.rm(edit.tempDir, { recursive: true, force: true });
+		}
+	}
+
+	/** Temp files from previous runs (crash / quit mid-edit). */
+	async listLeftovers(): Promise<string[]> {
+		const names: string[] = [];
+		let entries: string[];
+		try {
+			entries = await fs.readdir(this.editsDir);
+		} catch {
+			return names;
+		}
+		const active = new Set(this.watched.map((w) => path.basename(w.tempDir)));
+		for (const entry of entries) {
+			if (active.has(entry)) continue;
+			try {
+				const files = await fs.readdir(path.join(this.editsDir, entry));
+				const file = files.find((f) => f !== "meta.json");
+				names.push(file ?? entry);
+			} catch {
+				names.push(entry);
+			}
+		}
+		return names;
+	}
+
+	async clearLeftovers(): Promise<void> {
+		const active = new Set(this.watched.map((w) => path.basename(w.tempDir)));
+		let entries: string[] = [];
+		try {
+			entries = await fs.readdir(this.editsDir);
+		} catch {
+			return;
+		}
+		for (const entry of entries) {
+			if (active.has(entry)) continue;
+			await fs.rm(path.join(this.editsDir, entry), { recursive: true, force: true });
+		}
+	}
+}

src/bun/index.ts

@@ -1,6 +1,7 @@
 import { ApplicationMenu, BrowserWindow, Updater } from "electrobun/bun";
 import { BRANDING } from "../shared/branding";
 import { effectiveConcurrency } from "../shared/types";
+import { EditManager } from "./edits";
 import { SessionRegistry } from "./fs/registry";
 import { applyApplicationMenu } from "./menu";
 import { createAppRPC } from "./rpc-handlers";
@@ -32,11 +33,12 @@ const registry = new SessionRegistry();
 const engine = new TransferEngine(registry);
 const store = new ConnectionStore();
 const settings = new SettingsStore();
+const edits = new EditManager(registry, engine, settings);
 const events = {
 	sessionClosed: (_info: { sessionId: string; reason: string }) => {},
 	connectionsChanged: () => {},
 };
-const rpc = createAppRPC({ registry, engine, store, settings, events });
+const rpc = createAppRPC({ registry, engine, store, settings, edits, events });
 const url = await getMainViewUrl();
 
 const isMac = process.platform === "darwin";

src/bun/menu.ts

@@ -48,6 +48,8 @@ export async function applyApplicationMenu(store: ConnectionStore): Promise<void
 				{ label: "New Folder", action: "new-folder" },
 				{ label: "New File", action: "new-file" },
 				{ type: "separator" },
+				{ label: "Edit File", action: "edit-file", accelerator: "e" },
+				{ type: "separator" },
 				{ label: "Connect", submenu: connectSubmenu },
 			],
 		},

src/bun/rpc-handlers.ts

@@ -1,6 +1,7 @@
-import { BrowserView } from "electrobun/bun";
+import { BrowserView, Utils } from "electrobun/bun";
 import type { AppRPC } from "../shared/rpc";
 import { effectiveConcurrency, type Result } from "../shared/types";
+import { readFileText, writeFileText, type EditManager } from "./edits";
 import type { SessionRegistry } from "./fs/registry";
 import { SftpProvider } from "./fs/sftp";
 import type { ConnectionStore } from "./store/connections";
@@ -17,6 +18,7 @@ export interface AppDeps {
 	engine: TransferEngine;
 	store: ConnectionStore;
 	settings: SettingsStore;
+	edits: EditManager;
 	/** Assigned after the rpc object exists (it needs rpc.send). */
 	events: {
 		sessionClosed: (info: { sessionId: string; reason: string }) => void;
@@ -32,7 +34,7 @@ async function wrap<T extends object>(fn: () => Promise<T> | T): Promise<Result<
 	}
 }
 
-export function createAppRPC({ registry, engine, store, settings, events }: AppDeps) {
+export function createAppRPC({ registry, engine, store, settings, edits, events }: AppDeps) {
 	return BrowserView.defineRPC<AppRPC>({
 		maxRequestTime: MAX_REQUEST_TIME_MS,
 		handlers: {
@@ -45,6 +47,7 @@ export function createAppRPC({ registry, engine, store, settings, events }: AppD
 							if (!sessionId) return;
 							registry.drop(sessionId);
 							engine.failSession(sessionId, reason);
+							edits.stopForSession(sessionId);
 							events.sessionClosed({ sessionId, reason });
 						});
 						sessionId = registry.add(provider);
@@ -55,6 +58,7 @@ export function createAppRPC({ registry, engine, store, settings, events }: AppD
 
 				disconnect: ({ sessionId }) =>
 					wrap(async () => {
+						edits.stopForSession(sessionId);
 						await registry.remove(sessionId);
 						console.log(`[rpc] disconnected ${sessionId}`);
 						return {};
@@ -160,6 +164,43 @@ export function createAppRPC({ registry, engine, store, settings, events }: AppD
 						engine.setConcurrency(effectiveConcurrency(next));
 						return {};
 					}),
+
+				// ---- file editing ----
+				readFile: ({ sessionId, path }) =>
+					wrap(async () => ({
+						content: await readFileText(registry.get(sessionId), path),
+					})),
+
+				writeFile: ({ sessionId, path, content }) =>
+					wrap(async () => {
+						await writeFileText(registry.get(sessionId), path, content);
+						return {};
+					}),
+
+				editExternal: ({ sessionId, path }) =>
+					wrap(() => edits.editExternal(sessionId, path)),
+
+				pickEditorApp: () =>
+					wrap(async () => {
+						const picked = await Utils.openFileDialog({
+							startingFolder: "/Applications",
+							allowedFileTypes: "app",
+							canChooseFiles: true,
+							canChooseDirectory: false,
+							allowsMultipleSelection: false,
+						});
+						const path = picked.find((p) => p.trim().length > 0) ?? null;
+						return { path };
+					}),
+
+				getEditLeftovers: () =>
+					wrap(async () => ({ names: await edits.listLeftovers() })),
+
+				clearEditLeftovers: () =>
+					wrap(async () => {
+						await edits.clearLeftovers();
+						return {};
+					}),
 			},
 		},
 	});

src/shared/rpc.ts

@@ -74,6 +74,28 @@ export type AppRPC = {
 				response: Result<{ settings: AppSettings }>;
 			};
 			saveSettings: { params: { settings: AppSettings }; response: Result };
+			// file editing
+			readFile: {
+				params: { sessionId: string; path: string };
+				response: Result<{ content: string }>;
+			};
+			writeFile: {
+				params: { sessionId: string; path: string; content: string };
+				response: Result;
+			};
+			editExternal: {
+				params: { sessionId: string; path: string };
+				response: Result<{ watching: boolean }>;
+			};
+			pickEditorApp: {
+				params: Record<string, never>;
+				response: Result<{ path: string | null }>;
+			};
+			getEditLeftovers: {
+				params: Record<string, never>;
+				response: Result<{ names: string[] }>;
+			};
+			clearEditLeftovers: { params: Record<string, never>; response: Result };
 		};
 		messages: Record<never, never>;
 	};

src/shared/types.ts

@@ -52,6 +52,10 @@ export interface AppSettings {
 	transferConcurrency: number;
 	/** Remove completed transfers from the list automatically. */
 	autoClearCompleted: boolean;
+	/** Edit files with the built-in editor or an external application. */
+	editor: "builtin" | "custom";
+	/** Full path to the external editor .app; empty = OS default application. */
+	editorApp: string;
 }
 
 export const DEFAULT_SETTINGS: AppSettings = {
@@ -61,6 +65,8 @@ export const DEFAULT_SETTINGS: AppSettings = {
 	transferMode: "single",
 	transferConcurrency: 3,
 	autoClearCompleted: true,
+	editor: "builtin",
+	editorApp: "",
 };
 
 export function effectiveConcurrency(settings: AppSettings): number {

ui/src/app/app.html

@@ -37,6 +37,9 @@
   @if (dialogs.overwrite(); as req) {
     <app-overwrite-dialog [request]="req" />
   }
+  @if (dialogs.editor(); as req) {
+    <app-editor-dialog [request]="req" />
+  }
 
   <!-- toasts -->
   <div class="pointer-events-none fixed right-3 bottom-8 z-50 flex w-80 flex-col gap-2">

ui/src/app/app.ts

@@ -5,6 +5,7 @@ import { ConnectionManager } from './connection-manager/connection-manager';
 import { ConnectionsService } from './connections.service';
 import { ChmodDialog } from './dialogs/chmod-dialog';
 import { ConfirmDialog } from './dialogs/confirm-dialog';
+import { EditorDialog } from './dialogs/editor-dialog';
 import { OverwriteDialog } from './dialogs/overwrite-dialog';
 import { PromptDialog } from './dialogs/prompt-dialog';
 import { DialogsService } from './dialogs.service';
@@ -28,6 +29,7 @@ import { TransferBar } from './transfer-bar/transfer-bar';
     ConfirmDialog,
     ChmodDialog,
     OverwriteDialog,
+    EditorDialog,
     TransferBar,
     ConnectionManager,
   ],
@@ -46,9 +48,25 @@ export class App {
     document.title = BRANDING.appName;
     if (this.rpc.available) {
       this.rpc.onMenuAction((action) => this.handleMenuAction(action));
+      void this.promptForEditLeftovers();
     }
   }
 
+  /** Temp files from external edits in a previous run (crash / quit mid-edit). */
+  private async promptForEditLeftovers(): Promise<void> {
+    const res = await this.rpc.request.getEditLeftovers({});
+    if (!res.ok || !res.names.length) return;
+    const shown = res.names.slice(0, 5).join(', ');
+    const more = res.names.length > 5 ? `, +${res.names.length - 5} more` : '';
+    this.dialogs.confirm.set({
+      title: 'Leftover edited files',
+      body: `A previous session left ${res.names.length} temporary edited file(s) behind (${shown}${more}). Clear them?`,
+      confirmLabel: 'Clear',
+      destructive: true,
+      onConfirm: () => void this.rpc.request.clearEditLeftovers({}),
+    });
+  }
+
   /** Native application-menu actions forwarded from the bun process. */
   private handleMenuAction(action: string): void {
     if (action.startsWith('connect:')) {
@@ -72,6 +90,9 @@ export class App {
       case 'new-file':
         this.actions.createFile(this.panels.active());
         break;
+      case 'edit-file':
+        void this.actions.edit(this.panels.active());
+        break;
       case 'refresh-active':
         void this.panels.active().refresh();
         break;

ui/src/app/dialogs.service.ts

@@ -1,5 +1,6 @@
 import { Injectable, signal } from '@angular/core';
 import type { FileEntry } from '@shared/types';
+import type { PanelState } from './panels.service';
 
 export type OverwriteChoice = 'overwrite' | 'skip' | 'overwriteAll' | 'skipAll' | 'cancel';
 
@@ -33,12 +34,22 @@ export interface ChmodRequest {
   onConfirm: (mode: number) => void;
 }
 
+export interface EditorRequest {
+  sessionId: string;
+  path: string;
+  name: string;
+  sessionTitle: string;
+  content: string;
+  panel: PanelState; // refreshed after save
+}
+
 @Injectable({ providedIn: 'root' })
 export class DialogsService {
   readonly prompt = signal<PromptRequest | null>(null);
   readonly confirm = signal<ConfirmRequest | null>(null);
   readonly chmod = signal<ChmodRequest | null>(null);
   readonly overwrite = signal<OverwriteRequest | null>(null);
+  readonly editor = signal<EditorRequest | null>(null);
   readonly manager = signal(false);
 
   /** Ask what to do about one name collision; resolves with the user's choice. */

ui/src/app/dialogs/editor-dialog.ts

@@ -0,0 +1,158 @@
+import {
+  Component,
+  ElementRef,
+  afterNextRender,
+  inject,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { DialogsService, type EditorRequest } from '../dialogs.service';
+import { PanelsService } from '../panels.service';
+import { RpcService } from '../rpc.service';
+import { ToastService } from '../toast.service';
+
+@Component({
+  selector: 'app-editor-dialog',
+  imports: [NgIcon],
+  template: `
+    <div class="fixed inset-0 z-40 grid place-items-center bg-black/40">
+      <div
+        class="flex h-[80vh] w-[85vw] max-w-5xl flex-col rounded-lg border border-border bg-card text-card-foreground shadow-xl"
+        (keydown)="onKeydown($event)"
+      >
+        <div class="flex items-center gap-2 border-b border-border px-4 py-2.5">
+          <ng-icon name="mynaFileText" size="0.95rem" class="shrink-0 text-muted-foreground" />
+          <h2 class="min-w-0 truncate font-mono text-sm font-semibold">
+            {{ request().name }}{{ dirty() ? ' •' : '' }}
+          </h2>
+          <span class="shrink-0 text-[11px] text-muted-foreground">
+            {{ request().sessionTitle }}
+          </span>
+          <div class="flex-1"></div>
+          <button
+            (click)="close()"
+            class="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <ng-icon name="mynaX" size="1rem" />
+          </button>
+        </div>
+
+        <textarea
+          #box
+          [value]="text()"
+          (input)="onInput($any($event.target).value)"
+          spellcheck="false"
+          class="min-h-0 flex-1 resize-none bg-transparent p-4 font-mono text-xs leading-relaxed outline-none"
+        ></textarea>
+
+        <div class="flex items-center gap-2 border-t border-border px-4 py-2.5">
+          <span class="text-[11px] text-muted-foreground">⌘S saves · Esc closes</span>
+          <div class="flex-1"></div>
+          <button
+            (click)="close()"
+            class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
+          >
+            Cancel
+          </button>
+          <button
+            (click)="save()"
+            [disabled]="saving() || !dirty()"
+            class="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+          >
+            @if (saving()) {
+              <ng-icon name="mynaSpinner" size="0.85rem" class="animate-spin" />
+            }
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class EditorDialog {
+  readonly request = input.required<EditorRequest>();
+
+  readonly text = signal('');
+  readonly dirty = signal(false);
+  readonly saving = signal(false);
+
+  private readonly box = viewChild.required<ElementRef<HTMLTextAreaElement>>('box');
+  private readonly dialogs = inject(DialogsService);
+  private readonly panels = inject(PanelsService);
+  private readonly rpc = inject(RpcService);
+  private readonly toast = inject(ToastService);
+
+  constructor() {
+    afterNextRender(() => {
+      this.text.set(this.request().content);
+      this.box().nativeElement.focus();
+    });
+  }
+
+  onInput(value: string): void {
+    this.text.set(value);
+    this.dirty.set(value !== this.request().content);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
+      event.preventDefault();
+      void this.save();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      this.close();
+    } else if (event.key === 'Tab' && event.target === this.box().nativeElement) {
+      // keep Tab as an input character inside the editor
+      event.preventDefault();
+      const el = this.box().nativeElement;
+      const { selectionStart, selectionEnd, value } = el;
+      el.value = `${value.slice(0, selectionStart)}\t${value.slice(selectionEnd)}`;
+      el.selectionStart = el.selectionEnd = selectionStart + 1;
+      this.onInput(el.value);
+    }
+  }
+
+  async save(): Promise<void> {
+    const req = this.request();
+    if (!this.dirty() || this.saving()) return;
+    this.saving.set(true);
+    try {
+      const res = await this.rpc.request.writeFile({
+        sessionId: req.sessionId,
+        path: req.path,
+        content: this.text(),
+      });
+      if (!res.ok) {
+        this.toast.error(res.error);
+        return;
+      }
+      this.toast.success(`Saved ${req.name}`);
+      req.content = this.text();
+      this.dirty.set(false);
+      void req.panel.refresh();
+    } finally {
+      this.saving.set(false);
+    }
+  }
+
+  close(): void {
+    if (this.dirty()) {
+      this.dialogs.confirm.set({
+        title: 'Discard changes?',
+        body: `"${this.request().name}" has unsaved changes.`,
+        confirmLabel: 'Discard',
+        destructive: true,
+        onConfirm: () => this.forceClose(),
+      });
+      return;
+    }
+    this.forceClose();
+  }
+
+  private forceClose(): void {
+    this.dialogs.editor.set(null);
+    this.panels.refocus();
+  }
+}

ui/src/app/file-actions.service.ts

@@ -4,6 +4,7 @@ import { DialogsService } from './dialogs.service';
 import { joinPath } from './format';
 import { type PanelState } from './panels.service';
 import { RpcService } from './rpc.service';
+import { SettingsService } from './settings.service';
 import { ToastService } from './toast.service';
 
 /**
@@ -15,6 +16,7 @@ export class FileActionsService {
   private readonly rpc = inject(RpcService);
   private readonly toast = inject(ToastService);
   private readonly dialogs = inject(DialogsService);
+  private readonly settings = inject(SettingsService);
 
   /** Selection if non-empty, else the cursor entry. Never the ".." parent row. */
   targets(panel: PanelState): FileEntry[] {
@@ -56,6 +58,42 @@ export class FileActionsService {
     });
   }
 
+  /** Open the cursor file in the built-in editor or the configured external app. */
+  async edit(panel: PanelState): Promise<void> {
+    const entry = panel.sorted()[panel.cursor()];
+    if (!entry || entry.type !== 'file' || entry.name === '..') return;
+
+    if (this.settings.editor() === 'custom') {
+      const res = await this.rpc.request.editExternal({
+        sessionId: panel.sessionId(),
+        path: entry.path,
+      });
+      if (!res.ok) {
+        this.toast.error(res.error);
+      } else if (res.watching) {
+        this.toast.info(`Editing ${entry.name} — saves upload automatically`);
+      }
+      return;
+    }
+
+    const res = await this.rpc.request.readFile({
+      sessionId: panel.sessionId(),
+      path: entry.path,
+    });
+    if (!res.ok) {
+      this.toast.error(res.error);
+      return;
+    }
+    this.dialogs.editor.set({
+      sessionId: panel.sessionId(),
+      path: entry.path,
+      name: entry.name,
+      sessionTitle: panel.title(),
+      content: res.content,
+      panel,
+    });
+  }
+
   rename(panel: PanelState): void {
     const entry = panel.sorted()[panel.cursor()];
     if (!entry || entry.name === '..') return;

ui/src/app/file-panel/file-panel.html

@@ -37,6 +37,13 @@
   >
     <ng-icon [name]="copyIcon()" size="0.95rem" />
   </button>
+  <button
+    (click)="run('edit')"
+    title="Edit file (F4)"
+    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+  >
+    <ng-icon name="mynaFileText" size="0.9rem" />
+  </button>
   <button
     (click)="run('rename')"
     title="Rename (F2)"

ui/src/app/file-panel/file-panel.ts

@@ -65,9 +65,9 @@ export class FilePanel {
     void this.transfers.copyToOtherPanel(this.side());
   }
 
-  run(action: 'rename' | 'mkdir' | 'createFile' | 'chmod' | 'delete'): void {
+  run(action: 'edit' | 'rename' | 'mkdir' | 'createFile' | 'chmod' | 'delete'): void {
     this.activate();
-    this.actions[action](this.panel());
+    void this.actions[action](this.panel());
   }
 
   pickLocal(): void {
@@ -186,6 +186,9 @@ export class FilePanel {
       case 'F2':
         this.actions.rename(panel);
         break;
+      case 'F4':
+        void this.actions.edit(panel);
+        break;
       case 'F5':
         void this.transfers.copyToOtherPanel(this.side());
         break;

ui/src/app/icons.ts

@@ -15,6 +15,7 @@ import {
   mynaEdit,
   mynaFile,
   mynaFilePlus,
+  mynaFileText,
   mynaFolder,
   mynaFolderPlus,
   mynaHardDrive,
@@ -43,6 +44,7 @@ export const APP_ICONS = {
   mynaEdit,
   mynaFile,
   mynaFilePlus,
+  mynaFileText,
   mynaFolder,
   mynaFolderPlus,
   mynaHardDrive,

ui/src/app/settings.service.ts

@@ -10,6 +10,8 @@ export class SettingsService {
   readonly transferMode = signal<AppSettings['transferMode']>(DEFAULT_SETTINGS.transferMode);
   readonly transferConcurrency = signal(DEFAULT_SETTINGS.transferConcurrency);
   readonly autoClearCompleted = signal(DEFAULT_SETTINGS.autoClearCompleted);
+  readonly editor = signal<AppSettings['editor']>(DEFAULT_SETTINGS.editor);
+  readonly editorApp = signal(DEFAULT_SETTINGS.editorApp);
 
   private readonly rpc = inject(RpcService);
 
@@ -23,6 +25,8 @@ export class SettingsService {
       this.transferMode.set(res.settings.transferMode);
       this.transferConcurrency.set(res.settings.transferConcurrency);
       this.autoClearCompleted.set(res.settings.autoClearCompleted);
+      this.editor.set(res.settings.editor);
+      this.editorApp.set(res.settings.editorApp);
       this.applyTheme();
       this.applyTextSize();
     });
@@ -60,6 +64,16 @@ export class SettingsService {
     void this.persist();
   }
 
+  setEditor(editor: AppSettings['editor']): void {
+    this.editor.set(editor);
+    void this.persist();
+  }
+
+  setEditorApp(path: string): void {
+    this.editorApp.set(path);
+    void this.persist();
+  }
+
   private applyTheme(): void {
     const theme = this.theme();
     if (theme === 'system') {
@@ -86,6 +100,8 @@ export class SettingsService {
       transferMode: this.transferMode(),
       transferConcurrency: this.transferConcurrency(),
       autoClearCompleted: this.autoClearCompleted(),
+      editor: this.editor(),
+      editorApp: this.editorApp(),
     };
   }
 

ui/src/app/tab-bar/tab-bar.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, effect, inject, signal, viewChild } from '@angul
 import { NgIcon } from '@ng-icons/core';
 import { PanelsService } from '../panels.service';
 import { IS_MAC_CHROME } from '../platform';
+import { RpcService } from '../rpc.service';
 import { SettingsService } from '../settings.service';
 
 const THEMES = ['system', 'light', 'dark'] as const;
@@ -188,6 +189,55 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
             </div>
           }
 
+          <div class="mt-2.5 flex items-center justify-between gap-2">
+            <span class="text-xs text-muted-foreground">Editor</span>
+            <div class="flex rounded-md border border-border p-0.5">
+              <button
+                (click)="settings.setEditor('builtin')"
+                class="rounded px-2 py-0.5 text-[11px]"
+                [class.bg-accent]="settings.editor() === 'builtin'"
+                [class.text-foreground]="settings.editor() === 'builtin'"
+                [class.text-muted-foreground]="settings.editor() !== 'builtin'"
+              >
+                Built-in
+              </button>
+              <button
+                (click)="settings.setEditor('custom')"
+                class="rounded px-2 py-0.5 text-[11px]"
+                [class.bg-accent]="settings.editor() === 'custom'"
+                [class.text-foreground]="settings.editor() === 'custom'"
+                [class.text-muted-foreground]="settings.editor() !== 'custom'"
+              >
+                Custom
+              </button>
+            </div>
+          </div>
+
+          @if (settings.editor() === 'custom') {
+            <div class="mt-2.5 flex items-center justify-between gap-2 pl-3">
+              <span class="min-w-0 truncate text-xs text-muted-foreground" [title]="settings.editorApp()">
+                {{ editorAppName() }}
+              </span>
+              <div class="flex shrink-0 items-center gap-1">
+                <button
+                  (click)="pickEditorApp()"
+                  class="rounded-md border border-border px-2 py-0.5 text-[11px] hover:bg-accent"
+                >
+                  Choose…
+                </button>
+                @if (settings.editorApp()) {
+                  <button
+                    (click)="settings.setEditorApp('')"
+                    title="Reset to system default"
+                    class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+                  >
+                    <ng-icon name="mynaX" size="0.7rem" />
+                  </button>
+                }
+              </div>
+            </div>
+          }
+
           <div class="mt-2.5 flex items-center justify-between gap-2">
             <span class="text-xs text-muted-foreground">Finished transfers</span>
             <div class="flex rounded-md border border-border p-0.5">
@@ -219,6 +269,7 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
 export class TabBar {
   readonly panels = inject(PanelsService);
   readonly settings = inject(SettingsService);
+  private readonly rpc = inject(RpcService);
   readonly settingsOpen = signal(false);
   readonly isMacChrome = IS_MAC_CHROME;
   readonly themes = THEMES;
@@ -248,6 +299,19 @@ export class TabBar {
     this.panels.closeWorkspace(id);
   }
 
+  /** "Visual Studio Code.app" -> "Visual Studio Code"; empty -> system default. */
+  editorAppName(): string {
+    const path = this.settings.editorApp();
+    if (!path) return 'System default';
+    const base = path.split('/').filter(Boolean).pop() ?? path;
+    return base.replace(/\.app$/i, '');
+  }
+
+  async pickEditorApp(): Promise<void> {
+    const res = await this.rpc.request.pickEditorApp({});
+    if (res.ok && res.path) this.settings.setEditorApp(res.path);
+  }
+
   /** Insertion line at the drop position (inset shadow: no layout shift). */
   dropIndicatorShadow(index: number): string | null {
     const target = this.dropTarget();