release-2.9.0 (#1532)

* fix(macos): skip single-instance lock in Mac App Store builds (#1454)

fix(macos): skip single-instance lock in Mac App Store builds

* Fix/backend optional sharp (#1455)

Fix/backend optional sharp

* feat: issue #1218 (#1218)

https://github.com/Termix-SSH/Support/issues/1218

* feat: Add option to use saved global custom theme under Connection Defaults (#1209)

https://github.com/Termix-SSH/Support/issues/1209

* feat: Add Fleet Sharing functionality to the UI (#1228)

https://github.com/Termix-SSH/Support/issues/1228

* feat: Add a list view to the Docker management page (#1237)

https://github.com/Termix-SSH/Support/issues/1237

* feat: issue #1264 (#1264)

https://github.com/Termix-SSH/Support/issues/1264

* feat: 2FA With FortiToken (#1288)

https://github.com/Termix-SSH/Support/issues/1288

* feat: Allow to disable showing paths to folders (#1274)

https://github.com/Termix-SSH/Support/issues/1274

* feat: Sync Network Graph between Desktop and Remote Server (#1245)

https://github.com/Termix-SSH/Support/issues/1245

* feat: Version Number on offline servers (#1291)

https://github.com/Termix-SSH/Support/issues/1291

* feat: Support OrbStack Docker socket path on macOS / Fix "Docker is not installed" on mac... (#1302)

https://github.com/Termix-SSH/Support/issues/1302

* feat: Sidebar host click should focus existing tab instead of opening a new connection (#1289)

https://github.com/Termix-SSH/Support/issues/1289

* fix: Search in side bar shows overlapping hosts when grouped by tags (#1303)

https://github.com/Termix-SSH/Support/issues/1303

* fix: I can't send a file on its own. (#1304)

https://github.com/Termix-SSH/Support/issues/1304

* fix: sudo password not autofilling (#1248)

https://github.com/Termix-SSH/Support/issues/1248

* fix: node-MainThread (#1300)

https://github.com/Termix-SSH/Support/issues/1300

* fix: Tunnel authentication with shared credentials (#1295)

https://github.com/Termix-SSH/Support/issues/1295

* fix: host key updates not syncing, metrics 404 race on first connect

Host key writes never bumped updatedAt so sync never picked them up.
Also retry the first metrics fetch briefly instead of failing right away.

* chore: increment ver

* feat: add category and icon fields to plugin manifest schema

* ci(deps): bump the github-actions group with 2 updates (#1458)

Bumps the github-actions group with 2 updates: [crowdin/github-action](https://github.com/crowdin/github-action) and [actions/github-script](https://github.com/actions/github-script).


Updates `crowdin/github-action` from 2 to 3
- [Release notes](https://github.com/crowdin/github-action/releases)
- [Commits](https://github.com/crowdin/github-action/compare/v2...v3)

Updates `actions/github-script` from 7 to 9
- [Release notes](https://github.com/actions/github-script/releases)
- [Commits](https://github.com/actions/github-script/compare/v7...v9)

---
updated-dependencies:
- dependency-name: crowdin/github-action
  dependency-version: '3'
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: github-actions
- dependency-name: actions/github-script
  dependency-version: '9'
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: github-actions
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump the dev-patch-updates group with 13 updates (#1459)

Bumps the dev-patch-updates group with 13 updates:

| Package | From | To |
| --- | --- | --- |
| [@codemirror/commands](https://github.com/codemirror/commands) | `6.11.0` | `6.11.1` |
| [@codemirror/search](https://github.com/codemirror/search) | `6.7.1` | `6.7.2` |
| [@codemirror/view](https://github.com/codemirror/view) | `6.43.9` | `6.43.12` |
| [@testing-library/dom](https://github.com/testing-library/dom-testing-library) | `10.4.1` | `10.4.2` |
| [@testing-library/react](https://github.com/testing-library/react-testing-library) | `16.3.2` | `16.3.3` |
| [@testing-library/user-event](https://github.com/testing-library/user-event) | `14.6.5` | `14.6.7` |
| [@types/ssh2](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ssh2) | `1.15.5` | `1.15.6` |
| [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react) | `6.1.0` | `6.1.1` |
| [cytoscape](https://github.com/cytoscape/cytoscape.js) | `3.34.1` | `3.34.3` |
| [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) | `0.5.4` | `0.5.7` |
| [i18next](https://github.com/i18next/i18next) | `26.4.0` | `26.4.2` |
| [prettier](https://github.com/prettier/prettier) | `3.9.6` | `3.9.8` |
| [react-i18next](https://github.com/i18next/react-i18next) | `17.0.12` | `17.0.14` |


Updates `@codemirror/commands` from 6.11.0 to 6.11.1
- [Changelog](https://github.com/codemirror/commands/blob/main/CHANGELOG.md)
- [Commits](https://github.com/codemirror/commands/commits)

Updates `@codemirror/search` from 6.7.1 to 6.7.2
- [Changelog](https://github.com/codemirror/search/blob/main/CHANGELOG.md)
- [Commits](https://github.com/codemirror/search/commits)

Updates `@codemirror/view` from 6.43.9 to 6.43.12
- [Changelog](https://github.com/codemirror/view/blob/main/CHANGELOG.md)
- [Commits](https://github.com/codemirror/view/commits)

Updates `@testing-library/dom` from 10.4.1 to 10.4.2
- [Release notes](https://github.com/testing-library/dom-testing-library/releases)
- [Changelog](https://github.com/testing-library/dom-testing-library/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/dom-testing-library/compare/v10.4.1...v10.4.2)

Updates `@testing-library/react` from 16.3.2 to 16.3.3
- [Release notes](https://github.com/testing-library/react-testing-library/releases)
- [Changelog](https://github.com/testing-library/react-testing-library/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/react-testing-library/compare/v16.3.2...v16.3.3)

Updates `@testing-library/user-event` from 14.6.5 to 14.6.7
- [Release notes](https://github.com/testing-library/user-event/releases)
- [Changelog](https://github.com/testing-library/user-event/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/user-event/compare/v14.6.5...v14.6.7)

Updates `@types/ssh2` from 1.15.5 to 1.15.6
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ssh2)

Updates `@vitejs/plugin-react` from 6.1.0 to 6.1.1
- [Release notes](https://github.com/vitejs/vite-plugin-react/releases)
- [Changelog](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite-plugin-react/commits/plugin-react@6.1.1/packages/plugin-react)

Updates `cytoscape` from 3.34.1 to 3.34.3
- [Release notes](https://github.com/cytoscape/cytoscape.js/releases)
- [Commits](https://github.com/cytoscape/cytoscape.js/compare/v3.34.1...v3.34.3)

Updates `eslint-plugin-react-refresh` from 0.5.4 to 0.5.7
- [Release notes](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/releases)
- [Changelog](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/compare/v0.5.4...v0.5.7)

Updates `i18next` from 26.4.0 to 26.4.2
- [Release notes](https://github.com/i18next/i18next/releases)
- [Changelog](https://github.com/i18next/i18next/blob/master/CHANGELOG.md)
- [Commits](https://github.com/i18next/i18next/compare/v26.4.0...v26.4.2)

Updates `prettier` from 3.9.6 to 3.9.8
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/3.9.6...3.9.8)

Updates `react-i18next` from 17.0.12 to 17.0.14
- [Changelog](https://github.com/i18next/react-i18next/blob/master/CHANGELOG.md)
- [Commits](https://github.com/i18next/react-i18next/compare/v17.0.12...v17.0.14)

---
updated-dependencies:
- dependency-name: "@codemirror/commands"
  dependency-version: 6.11.1
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: "@codemirror/search"
  dependency-version: 6.7.2
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: "@codemirror/view"
  dependency-version: 6.43.12
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: "@testing-library/dom"
  dependency-version: 10.4.2
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: "@testing-library/react"
  dependency-version: 16.3.3
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: "@testing-library/user-event"
  dependency-version: 14.6.7
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: "@types/ssh2"
  dependency-version: 1.15.6
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: "@vitejs/plugin-react"
  dependency-version: 6.1.1
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: cytoscape
  dependency-version: 3.34.3
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: eslint-plugin-react-refresh
  dependency-version: 0.5.7
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: i18next
  dependency-version: 26.4.2
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: prettier
  dependency-version: 3.9.8
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
- dependency-name: react-i18next
  dependency-version: 17.0.14
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dev-patch-updates
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump the prod-patch-updates group with 6 updates (#1461)

Bumps the prod-patch-updates group with 6 updates:

| Package | From | To |
| --- | --- | --- |
| [@tanstack/react-virtual](https://github.com/TanStack/virtual/tree/HEAD/packages/react-virtual) | `3.14.10` | `3.14.13` |
| [compression](https://github.com/expressjs/compression) | `1.8.1` | `1.8.2` |
| [jose](https://github.com/panva/jose) | `6.2.9` | `6.2.12` |
| [jszip](https://github.com/Stuk/jszip) | `3.10.1` | `3.10.2` |
| [socks](https://github.com/JoshGlazebrook/socks) | `2.8.9` | `2.8.10` |
| [undici](https://github.com/nodejs/undici) | `8.10.0` | `8.10.2` |


Updates `@tanstack/react-virtual` from 3.14.10 to 3.14.13
- [Release notes](https://github.com/TanStack/virtual/releases)
- [Changelog](https://github.com/TanStack/virtual/blob/main/packages/react-virtual/CHANGELOG.md)
- [Commits](https://github.com/TanStack/virtual/commits/@tanstack/react-virtual@3.14.13/packages/react-virtual)

Updates `compression` from 1.8.1 to 1.8.2
- [Release notes](https://github.com/expressjs/compression/releases)
- [Changelog](https://github.com/expressjs/compression/blob/master/HISTORY.md)
- [Commits](https://github.com/expressjs/compression/compare/v1.8.1...v1.8.2)

Updates `jose` from 6.2.9 to 6.2.12
- [Release notes](https://github.com/panva/jose/releases)
- [Changelog](https://github.com/panva/jose/blob/main/CHANGELOG.md)
- [Commits](https://github.com/panva/jose/compare/v6.2.9...v6.2.12)

Updates `jszip` from 3.10.1 to 3.10.2
- [Changelog](https://github.com/Stuk/jszip/blob/main/CHANGES.md)
- [Commits](https://github.com/Stuk/jszip/compare/v3.10.1...v3.10.2)

Updates `socks` from 2.8.9 to 2.8.10
- [Release notes](https://github.com/JoshGlazebrook/socks/releases)
- [Commits](https://github.com/JoshGlazebrook/socks/compare/2.8.9...2.8.10)

Updates `undici` from 8.10.0 to 8.10.2
- [Release notes](https://github.com/nodejs/undici/releases)
- [Commits](https://github.com/nodejs/undici/compare/v8.10.0...v8.10.2)

---
updated-dependencies:
- dependency-name: "@tanstack/react-virtual"
  dependency-version: 3.14.13
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: prod-patch-updates
- dependency-name: compression
  dependency-version: 1.8.2
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: prod-patch-updates
- dependency-name: jose
  dependency-version: 6.2.12
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: prod-patch-updates
- dependency-name: jszip
  dependency-version: 3.10.2
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: prod-patch-updates
- dependency-name: socks
  dependency-version: 2.8.10
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: prod-patch-updates
- dependency-name: undici
  dependency-version: 8.10.2
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: prod-patch-updates
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat: add plugin worker protocol, bootstrap and plugin_storage table

Worker-side ctx proxy plus the message envelope it talks over, and the
per-plugin key/value table behind ctx.storage with migrations for all
three dialects. Rows cascade with the plugin so uninstalling leaves
nothing behind.

* feat: add allowlisted host view for plugins

An allowlist rather than a list of fields to strip. A blocklist rots:
the moment a new secret-bearing column lands on SSHHost it starts
leaking silently. With an allowlist a new field stays invisible to
plugins until someone adds it here on purpose.

* feat: add plugin loader with manifest validation and crash restart

Validates an unpacked plugin, spawns a worker_threads worker and manages
activate/deactivate/crash-restart with backoff, disabling after three
tries.

The crash counter clears only after a plugin stays up past a stability
window, not on activation. Clearing it on activation let a plugin that
activates cleanly and then dies restart forever, because every attempt
looked like the first.

loader.ts documents what the worker boundary does and does not buy you.
Node's permission model is process-wide, not per-worker, so it cannot be
enabled for plugin workers alone and is not claimed here.

* feat: route internal events through a shared plugin event bus

Formalises three ad-hoc publish paths that already existed:
automation-events.ts, metrics/automation-bridge.ts and the
hostSessionStatus singleton, now the host.session.status topic.

Both invariants the old code relied on are preserved. Publishing stays
fire-and-forget, so a failing subscriber cannot disturb a metrics poll or
a host delete. The automations engine subscribes to the bus at scheduler
start instead of being imported ad hoc, which keeps the edge
one-directional: automations may import repositories, hosts modules must
not import automations.

* feat: add plugin ctx broker with permission gate and audit

Every ctx call a plugin makes is checked against its granted
capabilities, performed by the main thread, then audited. A capability
must be both declared in the manifest and granted in the database, so
widening a plugin's reach always needs a new manifest the user can see,
never just a database row.

Audit attribution is set by the broker, not the plugin. The plugin
supplies only the details, so it cannot forge the actor.

fix: stop plugin workers seeing plaintext credentials in error messages

A failing ctx.ssh.connect handed the worker the raw error from deep in
the SSH stack, which embeds the connect config. The worker received, in
full:

  Authentication failed for root using password <SECRET>

where <SECRET> was the host's real plaintext password. Any plugin with
ssh.exec could read it by catching the error, defeating the whole point
of the handle-based ssh API.

Errors crossing the boundary are now sanitised. Only PluginFacingError
and PluginPermissionError, both authored here, reach a plugin verbatim;
anything else becomes a generic message and the real one goes to the
log. This uses a marker class rather than matching on message text,
because matching would start leaking again the moment an upstream error
happened to contain a familiar phrase.

Covered by credential-isolation.test.ts, which plants a sentinel in
every secret-bearing field and asserts it appears in no message the
worker ever receives.

* feat: dispatch plugin HTTP routes and wire the runtime into startup

ctx.http.route now registers a real router on the /plugin-api/:pluginId
dispatcher, replacing its stub 404. A plugin never touches the Express
req/res: it gets a plain summary and returns a plain object, so sockets
and session cookies stay on this side of the boundary. Authorization and
cookie headers are not forwarded.

Plugins load last in the start-up sequence, after the server is fully
wired, and are terminated before the database on shutdown so none can
outlive it. A plugin that fails to load cannot stop the backend.

fix: correct the nginx plugin-api location regex

The pattern was ^/plugin-api/(/.*)?$, which needs a double slash and so
never matched /plugin-api/<id>/<route>. Every other block in the file
uses ^/prefix(/.*)?$. Left alone, plugin routes would work in dev and
404 only behind Docker.

* fix: update stale SFTP transfer test for single file destination paths

The test still asserted transferToHost was called with the destination
directory "/srv". Commit 7727fa09 (#1304) deliberately changed a single
file transfer to send the full destination path including the filename,
so the correct expectation is "/srv/remote-1.txt". The code was right
and the test was left behind.

* feat: ship the ssh terminal as a first-party in-process plugin

Adds a hardcoded process:transport-owner tier so the terminal can own its
WebSocket server and ssh2 clients, which cannot cross the worker boundary.

* feat: ship docker as a first-party in-process plugin

Moves docker backend and frontend into plugins/docker/, alongside
ssh-terminal. Adds a host editor tab seam, a dashboard card registry,
and a build step to compile plugin backends into dist.

* feat: ship host metrics as a first-party in-process plugin

* fix: harden plugin auth and add per-request identity for ctx calls

Require auth on /plugin-api, gate plugin enable/grant/revoke routes
behind admin.plugins.manage, and thread the calling user through
worker ctx.hosts/ctx.ssh calls instead of always using the install
owner. Also adds the plugin permissions grant/revoke UI.

* feat: ship the AI assistant as a first-party in-process plugin

Moves src/backend/ai and its routes into plugins/ai, mounted through a
small /ai dispatcher instead of its own port. Moves the ai-enabled and
ai-private-endpoints settings routes out of user-settings-routes.ts
into the plugin too, so it has no leftover core dependents.

* fix: remove compiled plugin JS left behind in plugins/ after build

copy-bundled-plugins.cjs compiled and rewrote plugin backend TS in
place, copied it to dist/plugins, but never deleted the .js it had
just emitted next to the .ts sources. Those files shadowed the real
source for vitest/tsx and had import paths rewritten for the dist
layout, so tests failed with "Cannot find module" once a local build
had run. Affects docker, host-metrics and ai, not just this one.

* feat: add a permission-gated backend service registry for plugins

* feat: add a permission-gated UI action registry and action slots for plugins

Moves the terminal toolbar's hardwired AI button into a slot the ssh-terminal
plugin offers and the ai plugin fills, gated on ai.services.use.

* feat: add cross-plugin secret references gated by the provider's RBAC permission

* feat: move proxmox discovery/import/sync into a first-party plugin

* feat: move remote desktop (RDP/VNC/Telnet) into a first-party plugin

Relocates guacamole backend/frontend source and tests into
plugins/remote-desktop, following the ssh-terminal/docker pattern.

* feat: wire remote-desktop plugin into core and rename i18n keys

Repoints core consumers (dispatcher, collab, session-sharing, tab
utils) at the plugin, adds isTabTypeAvailable gating for rdp/vnc/
telnet, widens hostCapability to accept an array, and renames the
guacamole i18n namespace to remoteDesktop.

* feat: move fleets into a first-party plugin

* feat: move automations into a first-party plugin

* feat: remove legacy alert rules, superseded by automations

Alert rules already auto-migrate into automations on boot and the old
engine stands down after. Deletes the rule/firing tables, routes, UI,
and AI tools; keeps notification channels since automations still use
them. Also fixes automations' notify step, which still called the
deleted repository.

* feat: move network topology into a first-party plugin

* feat: move tailscale device discovery and settings into a plugin

Adds plugins/tailscale/ with a devices sidebar tab, admin settings
section, and re-auth dialog. Host Metrics tailscale manager card and
SSH re-auth banner parsing stay in core.

* feat: move workspaces into a first-party plugin

* feat: move web endpoint into a first-party plugin

* feat: collapse plugin runtime to one tier behind a plugin SDK

* feat: make each plugin an npm workspace built by a termix-plugin CLI

* feat: give plugins their own tables, migrations and sync entities

* feat: serve plugin http and websockets from one mount instead of ports

* feat: namespace plugin permissions and keep them valid when a plugin is off

* feat: give plugins their own settings and one settings screen

* feat: load plugin frontends at runtime and remove plugin ids from the shell

* fix: mock the ai status fetch in its activate test

* feat: add auth extension points and one ssh connect pipeline

* feat: rebuild workspaces as the reference plugin

* fix: gate second factors after SSO/LDAP behind an admin setting

* feat: convert network-topology to a full plugin (B1)

* feat: move snippets backend and tables into a plugin (B2)

* feat: point core frontend snippets pickers at the plugin (B2)

* feat: add the snippets plugin (B2)

* feat: wire ai, automations, fleets and ssh-terminal to snippets (B2)

* feat: finish the tailscale plugin, including SSH auth (B3)

* feat: finish the fleets plugin, add ctx.hosts and host-commands SDK (B4)

* chore: update proxmox and host-metrics locale files for B5

* chore: regenerate drizzle migration journals for B5

* feat: add ctx.hosts create/update to the SDK, host-metrics drops proxmox

* feat: move proxmox node stats and collectors into the proxmox plugin

* feat: drop proxmox host columns, use plugin settings instead

* feat: finish the fleets plugin, add ctx.hosts and host-commands SDK (B4)

* feat: convert file manager into a plugin

* feat: convert ssh tunnels into a plugin

* feat: finish the web-endpoint plugin, add ctx.desktop (B8)

* feat: move the terminal fully into the ssh-terminal plugin (B9)

* feat: convert tmux monitoring into a plugin (B10)

* feat: convert serial console into the serial plugin

* feat: move session sharing and collab rooms into a plugin (B12)

* feat: turn session recording into a plugin (B13)

* feat: finish the remote-desktop plugin (B14)

* feat: finish the host-metrics plugin, move host status into core (B16)

* feat: finish the docker plugin (B15)

* feat: finish the automations plugin (B17)

* feat: finish the ai plugin (B18)

* feat: finish the homepage plugin, move service links and canvas out of core (B19)

* feat: convert wake-on-lan into a plugin (B20)

* feat: convert secret-sources into a plugin (B20)

* feat: move totp and passkeys into plugins (C1)

* feat: move sso and ldap logins into plugins (C2)

* feat: move opkssh and warpgate into plugins (C3)

* feat: move step-ca into a plugin (C4)

* feat: move vault ssh signing into a plugin (C5)

* feat: move termix identity into a plugin (C6)

* feat: move acme certificate automation into a plugin (C7)

* fix: finish 2.9.0 plugin moves and get every check green

* chore: lock the plugin boundary and remove 2.9.0 leftovers

* fix: harden the plugin runtime after the 2.9.0 security review

* feat: add plugin packing, signing, pinned trust and tmxplug bundling

* test: prove 2.8 to 2.9.0 upgrade is lossless and fix what it caught

* fix: give bundled plugin backends a real require for CJS deps

* feat: improve UI loading time and jitter

* feat: show credential sharing inline in the sidebar like host sharing

* feat: tailscale add host and copy ip, fix outbound fetch hang and plugin ESM warning

* feat: unify alerts into one plugin, channels, rules and inbox

* feat: rebuild desktop sync as linked server accounts, fix packaged plugin bundles and UI scaling

* fix: set blacksmith builder cache-key to stop broken gha cache fallback

* fix: link plugin-sdk workspace before npm ci in docker deps stage

* fix: link every plugin workspace before npm ci in docker deps stage

* fix(host-metrics): exclude image and firmware filesystems (#1469)

* fix(host-metrics): exclude image and firmware filesystems

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* fix(hosts): normalize imported jump host references (#1470)

* fix(hosts): normalize imported jump host references

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* fix(ci): build plugin SDK and repair MySQL settings migration (#1471)

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* fix(file-manager): keep inline rename consistent (#1476)

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* fix(file-manager): keep inline rename consistent

* fix(dashboard): reuse translated host status labels (#1475)

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* fix(dashboard): reuse translated host status labels

* docs(api): clarify local and remote version fields (#1474)

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* docs(api): clarify local and remote version fields

* fix(file-manager): preserve selected backgrounds on hover (#1473)

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* fix(file-manager): preserve selection feedback on hover

* test(ui): await dialog focus cleanup before teardown

* fix(file-manager): restore Ctrl/Cmd+F file search (#1472)

* fix(ci): build plugin SDK before dependent checks

* fix(mysql): keep plugin settings scope indexes within limits

* test(mysql): refresh reviewed plugin upgrade SQL

* fix(file-manager): focus file search with Ctrl or Cmd F

* fix: keep rounded-full circular in production builds

* fix(file-manager): cancel uploads and stop remote writes (#1477)

* fix(file-manager): cancel uploads and stop remote writes

* test(css): exercise the configured PostCSS plugin chain

* fix(file-manager): apply compact density to directory tree (#1478)

* fix(file-manager): apply compact density to directory tree

* test(css): exercise the configured PostCSS plugin chain

* fix(file-manager): preserve font sizes in compact mode (#1480)

* fix(file-manager): preserve font sizes in compact mode

* test(css): exercise the configured PostCSS plugin chain

* fix(file-manager): prioritize file names in narrow lists (#1483)

* fix(file-manager): prioritize file names in narrow lists

* test(css): exercise the configured PostCSS plugin chain

* test(identity): preserve full Ed25519 public keys in fixtures

* test(remote-desktop): always mutate ciphertext in tamper test

* fix(remote-desktop): probe the saved host guacd endpoint (#1481)

* fix(remote-desktop): probe the saved host guacd endpoint

* test(css): exercise the configured PostCSS plugin chain

* test(identity): preserve full Ed25519 public keys in fixtures

* fix(homepage): check allowlisted private service reachability (#1479)

* fix(homepage): check allowlisted private service reachability

* test(css): exercise the configured PostCSS plugin chain

* fix(remote-desktop): stop unsolicited clipboard read prompts (#1482)

* fix(remote-desktop): read clipboard only on explicit paste

* test(css): exercise the configured PostCSS plugin chain

* test(identity): preserve full Ed25519 public keys in fixtures

* test(remote-desktop): always mutate ciphertext in tamper test

* chore: simplify plugin readmes, changelogs and manifest descriptions

* fix: keep plugins loaded after signing in from the login screen

* fix(file-manager): accept OS file drops over existing rows (#1484)

* fix(file-manager): accept OS file drops over existing rows

* test(file-manager): target the file label in drop tests

* test(css): exercise the configured PostCSS plugin chain

* test(identity): preserve full Ed25519 public keys in fixtures

* test(remote-desktop): always mutate ciphertext in tamper test

* fix(file-manager): pipeline SFTP download reads (#1485)

* feat: add plugin sdk build to beta release

* fix: make link-store secret check immune to random base64 matches

* fix(ldap): preserve the directory-provided bind DN (#1486)

* fix: compute beta changes across dev branches and move the beta tag

* chore: untrack plugin sdk ARCHITECTURE.md

* chore: remove references to plugin sdk ARCHITECTURE.md

* feat: merge host editor terminal tabs into one owned by ssh-terminal

* feat: add descriptions to plugin host enable toggles

* fix(file-manager): show download progress in file viewers (#1487)

* fix(electron): signal backend readiness over IPC (#1488)

* fix(split-screen): allow layout creation without randomUUID (#1490)

* fix(split-screen): allow layout creation without randomUUID

* test(credentials): avoid flaky Ed25519 key generation

* fix(sidebar): remeasure visible rows after density changes (#1489)

* fix(sidebar): remeasure visible rows after density changes

* test(credentials): avoid flaky Ed25519 key generation

* feat(split-screen): redesign split screen with free-form panes and pane picker

* feat(sidebar): add host click behavior setting, default to always opening a new tab

* feat(snippets): redesign panel to match the host list

* fix(session-recording): stop session logs panel from refetching in a loop

* feat(snippets): bring back sharing, target hosts and drag reorder

* feat(ssh-terminal): add toolbar position, start state, display and fade host settings

* feat(ssh-terminal): add host setting to turn off password prompt auto-fill

* fix(ai): stop streams getting cut off and keep tool steps across messages

* feat: improve quick connect system using plugin api

* fix: proxmox guest sync, startup snippet sync, drop dead cloudflare ssh transport

* feat: move terminal settings, look and ssh tools into ssh-terminal plugin

* feat: move snippets, keybinding actions and macros out of core into plugins

* feat: store rdp, vnc and telnet logins in a generic per-protocol table

* feat: type the plugin host record, move plugin strings out of core and add lint checks

* feat: replace core homepage widget registry with generic extension points

* feat: plugins only see their own host settings in the browser

* feat: harden plugin api for separate repos, signed updates and generic external login

* fix: keep plugin css below core utilities and version plugin assets by their css

* fix: load and save plugin host settings in the editor and tighten settings row spacing

* feat: redesign user host defaults system

* fix(remote-desktop): release held keys on focus loss (#1498)

* fix(session-sharing): replace local presentation after takeover (#1500)

* fix(file-manager): refresh disk usage with directory listing (#1503)

* fix(ssh-terminal): preserve input order during local echo reconciliation (#1505)

* feat(remote-desktop): expose display zoom controls for RDP (#1514)

* fix(file-manager): restore text selection and copying in Markdown previews (#1518)

* fix(sidebar): keep compact host addresses visible (#1524)

* fix(hosts): preserve plugin settings when reopening the editor (#1499)

* fix(ssh-terminal): close owner sockets when presentations unmount (#1501)

* fix(session-sharing): synchronize shared SSH terminal dimensions (#1502)

* fix(session-sharing): show participant presence in member terminals (#1504)

* fix(ai): sync provider configuration and keys across linked devices (#1506)

* feat(ssh-terminal): add a duplicate tab action (#1510)

* feat(file-manager): allow disabling move-to-trash confirmation (#1511)

* feat(file-manager): default to the remote login directory (#1512)

* feat(homepage): synchronize canvas layouts across devices (#1515)

* fix(shortcuts): prevent accidental double-Shift palette activation (#1519)

* feat(tmux-monitor): add a unified multi-host view (#1520)

* fix(electron): allow explicit quit with active connections (#1522)

* feat: reconnect all disconnected terminal tabs (#1523)

* fix(hosts): preserve recording and sharing settings in the dev editor (#1509)

* fix(database): preserve RDP domain during startup backfill (#1497)

* feat(sidebar): add keyboard type-ahead search for hosts (#1516)

* feat(automations): add per-host maintenance mode and recurring schedules (#1521)

* feat(tmux): add a per-host mouse toggle and preserve remote configuration (#1513)

* fix(session-sharing): use the linked server for desktop meetings and links (#1507)

* fix(tunnels): support TOTP for client tunnels and jump hosts (#1508)

* fix: type errors and lint failures from merged plugin prs

* feat(installer): make the Windows desktop shortcut optional (#1517)

* fix: ship the plugin sdk and serialport in desktop builds

* fix: prefer ipv4 when resolving ssh host names (#1365)

* fix: readable terminal selection with the light theme (#1319)

* fix: build desktop session share links on the linked server (#1350)

* fix: show meeting guests to members and hide the roster from guests (#1353)

* fix: reliable file manager saves with sudo prompt and no base64 guessing (#1335)

* fix: show disk usage for the mount being browsed (#1347)

* fix: load the linux tray icon reliably and log tray failures (#1332)

* fix: cover the gnome close path in the desktop quit test (#1332)

* fix: prompt for jump host TOTP in terminal, file manager and metrics (#1312)

* feat: optional auto reconnect for dropped ssh sessions (#1321)

* feat: tighter compact host rows with inline tags (#1325)

* feat: bring back the alert feed homepage widget

* feat: pick target terminals for snippets again

* feat: share button on connection tabs again

* feat: recent servers list when linking the desktop app

* feat: list the fixed app shortcuts in keyboard shortcuts

* fix: translate hardcoded toasts and drop em dashes from ui text

* fix: translate leftover hardcoded ui text

* fix: toolbar files button opens at the shell directory again

* fix: show the remote desktop note under connection origin again

* chore: openapi docs for host metrics manager routes

* chore: openapi docs for undocumented routes and fix two broken doc blocks

* fix: declare terminal.listSessions use for snippet targets

* revert: drop the alert feed widget, the notification center replaces it

* feat: restore the alert feed homepage widget

* fix: quick connect fills the host address from plugin auth editors like tailscale

* fix: docker container logs use the base background color

* chore: fix dependabot alerts and apply safe npm upgrades

* fix: proxmox stats tab reads its switch from plugin host settings

* fix: count plugin ssh logins toward host status and stop showing reachable as a warning

* fix: hide the built-in source pill in the host editor

* fix: host status shows online when the port answers and only warns on a failed login

* fix: drop the top border on the split layout menu

* fix: host defaults tabs sit where the host editor puts them and skip plugins with nothing to default

* fix: remote desktop auth method labels and notes for vnc and telnet

* fix: add description to the web endpoint enable switch

* fix: crowdin sync and pretranslate for plugin locales, run plugin tests on release

* feat: move telemetry out of core into a usage statistics plugin

* fix: recent activity card no longer cuts off host names early

* fix: remove duplicate top border on split screen menu

* fix: redesign session log player controls, fix tooltip overlap and drop dot separators

* fix: file manager and sftp text showing raw i18n keys

* fix: onboarding rerunning for existing users after upgrading

* fix: fleet detail buttons overflowing the sidebar

* fix: session log player scrolling off screen horizontally

* fix: network graph lag when adding hosts and on every render

* fix: maintenance index name, shared host read only view and badge polling

* fix: meeting tabs, workspace tab merging, rail panels as tabs and general ui lag

* chore: update release notes

* fix: remote desktop tabs reconnecting on every tab switch

* fix: build plugin sdk before linting in release workflow

* chore: lint, format, and bump version to 2.9.0

* chore: skip crowdin pre-translate in release for now

* chore: sync Crowdin translations for 2.9.0

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Koi <38512047+datlt4@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com>

plugins/file-manager/src/frontend/components/AudioPreview.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import AudioPlayer from "react-h5-audio-player";
+import "react-h5-audio-player/lib/styles.css";
+import { Music } from "lucide-react";
+import { cn } from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+
+interface FileItem {
+  name: string;
+  size?: number;
+}
+
+interface AudioPreviewProps {
+  file: FileItem;
+  content: string;
+  color: string;
+  onMediaDimensionsChange?: (dimensions: {
+    width: number;
+    height: number;
+  }) => void;
+}
+
+function formatFileSize(bytes?: number, t?: (key: string) => string): string {
+  if (!bytes) return t ? t("fileManager.unknownSize") : "Unknown size";
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
+}
+
+function getAudioMimeType(filename: string): string {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+
+  switch (ext) {
+    case "mp3":
+      return "audio/mpeg";
+    case "wav":
+      return "audio/wav";
+    case "flac":
+      return "audio/flac";
+    case "ogg":
+      return "audio/ogg";
+    case "aac":
+      return "audio/aac";
+    case "m4a":
+      return "audio/mp4";
+    default:
+      return "audio/mpeg";
+  }
+}
+
+export function AudioPreview({
+  file,
+  content,
+  color,
+  onMediaDimensionsChange,
+}: AudioPreviewProps) {
+  const { t } = useTranslation();
+  const ext = file.name.split(".").pop()?.toLowerCase() || "";
+  const audioUrl = `data:${getAudioMimeType(file.name)};base64,${content}`;
+
+  return (
+    <div className="p-6 flex items-center justify-center h-full">
+      <div className="w-full max-w-2xl">
+        <div className="space-y-4">
+          <div className="flex justify-center">
+            <div
+              className={cn(
+                "w-32 h-32 rounded-lg bg-gradient-to-br from-pink-100 to-purple-100 flex items-center justify-center shadow-lg",
+                color,
+              )}
+            >
+              <Music className="w-16 h-16 text-pink-600" />
+            </div>
+          </div>
+
+          <div className="text-center">
+            <h3 className="font-semibold text-foreground text-lg mb-1">
+              {file.name.replace(/\.[^/.]+$/, "")}
+            </h3>
+            <p className="flex justify-center gap-3 text-sm text-muted-foreground">
+              <span>{ext.toUpperCase()}</span>
+              <span>{formatFileSize(file.size, t)}</span>
+            </p>
+          </div>
+
+          <div className="rounded-lg overflow-hidden">
+            <AudioPlayer
+              src={audioUrl}
+              onLoadedMetaData={() => {
+                onMediaDimensionsChange?.({
+                  width: 600,
+                  height: 400,
+                });
+              }}
+              onError={(e) => {
+                console.error("Audio playback error:", e);
+              }}
+              showJumpControls={false}
+              showSkipControls={false}
+              showDownloadProgress={true}
+              customAdditionalControls={[]}
+              customVolumeControls={[]}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/CodeEditor.tsx

@@ -0,0 +1,164 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { oneDark } from "@codemirror/theme-one-dark";
+import {
+  loadLanguage,
+  type LanguageName,
+} from "@uiw/codemirror-extensions-langs";
+import { EditorView, keymap } from "@codemirror/view";
+import { searchKeymap, search, openSearchPanel } from "@codemirror/search";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  toggleComment,
+} from "@codemirror/commands";
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+
+export interface CodeEditorHandle {
+  openSearchPanel: () => void;
+}
+
+interface CodeEditorProps {
+  fileName: string;
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  fontSize?: number;
+}
+
+function getLanguageExtension(filename: string) {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  const baseName = filename.toLowerCase();
+
+  if (["dockerfile", "makefile", "rakefile", "gemfile"].includes(baseName)) {
+    return loadLanguage(baseName as LanguageName);
+  }
+
+  const langMap: Record<string, string> = {
+    js: "javascript",
+    jsx: "jsx",
+    ts: "typescript",
+    tsx: "tsx",
+    py: "python",
+    java: "java",
+    cpp: "cpp",
+    c: "c",
+    cs: "csharp",
+    php: "php",
+    rb: "ruby",
+    go: "go",
+    rs: "rust",
+    html: "html",
+    css: "css",
+    scss: "sass",
+    less: "less",
+    json: "json",
+    xml: "xml",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    sql: "sql",
+    sh: "shell",
+    bash: "shell",
+    zsh: "shell",
+    vue: "vue",
+    svelte: "svelte",
+    md: "markdown",
+    conf: "shell",
+    ini: "properties",
+  };
+
+  const language = langMap[ext];
+  return language ? loadLanguage(language as LanguageName) : null;
+}
+
+export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
+  function CodeEditor(
+    { fileName, value, placeholder, onChange, onFocus, onBlur, fontSize = 14 },
+    ref,
+  ) {
+    const editorRef = useRef<{ view?: EditorView } | null>(null);
+
+    const extensions = useMemo(() => {
+      const languageExtension = getLanguageExtension(fileName);
+
+      return [
+        ...(languageExtension ? [languageExtension] : []),
+        history(),
+        search(),
+        autocompletion(),
+        keymap.of([
+          ...defaultKeymap,
+          ...searchKeymap,
+          ...historyKeymap,
+          ...completionKeymap,
+          {
+            key: "Mod-/",
+            run: toggleComment,
+            preventDefault: true,
+          },
+          {
+            key: "Mod-h",
+            run: () => false,
+            preventDefault: true,
+          },
+        ]),
+        EditorView.theme({
+          "&": {
+            height: "100%",
+            fontSize: `${fontSize}px`,
+          },
+          ".cm-scroller": {
+            overflow: "auto",
+            scrollbarWidth: "thin",
+            scrollbarColor: "var(--scrollbar-thumb) var(--scrollbar-track)",
+          },
+          ".cm-editor": {
+            height: "100%",
+          },
+        }),
+      ];
+    }, [fileName, fontSize]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        openSearchPanel: () => {
+          const view = editorRef.current?.view;
+          if (view) {
+            openSearchPanel(view);
+          }
+        },
+      }),
+      [],
+    );
+
+    return (
+      <CodeMirror
+        ref={editorRef}
+        value={value}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        extensions={extensions}
+        theme={oneDark}
+        placeholder={placeholder}
+        className="h-full"
+        basicSetup={{
+          lineNumbers: true,
+          foldGutter: true,
+          dropCursor: false,
+          allowMultipleSelections: false,
+          indentOnInput: true,
+          bracketMatching: true,
+          closeBrackets: true,
+          autocompletion: true,
+          highlightSelectionMatches: false,
+        }}
+      />
+    );
+  },
+);

plugins/file-manager/src/frontend/components/ColumnResizeHandle.tsx

@@ -0,0 +1,43 @@
+import type React from "react";
+import { cn } from "@termix/plugin-sdk/ui";
+
+interface ColumnResizeHandleProps {
+  onMouseDown: (event: React.MouseEvent) => void;
+  onDoubleClick: (event: React.MouseEvent) => void;
+  onClick: (event: React.MouseEvent) => void;
+  "data-resizing"?: string;
+  title?: string;
+}
+
+/**
+ * Thin grab area on the left edge of a list-view header cell. The parent cell
+ * must be `relative`. Shows a hairline on hover and while dragging.
+ */
+export function ColumnResizeHandle({
+  title,
+  "data-resizing": resizing,
+  ...handlers
+}: ColumnResizeHandleProps) {
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      title={title}
+      data-column-resize-handle
+      data-resizing={resizing}
+      className={cn(
+        "absolute -left-2 top-0 bottom-0 w-3 cursor-col-resize group/handle z-10",
+      )}
+      {...handlers}
+    >
+      <div
+        className={cn(
+          "absolute left-1/2 top-0.5 bottom-0.5 w-px -translate-x-1/2 transition-colors",
+          resizing
+            ? "bg-accent-brand"
+            : "bg-transparent group-hover/handle:bg-accent-brand/60",
+        )}
+      />
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/ColumnVisibilityMenu.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Check } from "lucide-react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { cn } from "@termix/plugin-sdk/ui";
+import type { ResizableColumns } from "../hooks/useResizableColumns.ts";
+
+interface ColumnVisibilityMenuProps {
+  x: number;
+  y: number;
+  isVisible: boolean;
+  columns: ResizableColumns;
+  onClose: () => void;
+}
+
+/**
+ * Right-click menu for a list-view header: tick/untick which optional
+ * columns are shown. The name column is always on and not listed.
+ */
+export function ColumnVisibilityMenu({
+  x,
+  y,
+  isVisible,
+  columns,
+  onClose,
+}: ColumnVisibilityMenuProps) {
+  const { t } = useTranslation();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x, y });
+
+  useEffect(() => {
+    if (!isVisible) return;
+    const handleMouseDown = (event: MouseEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) onClose();
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    const timeout = setTimeout(() => {
+      document.addEventListener("mousedown", handleMouseDown, true);
+      document.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("blur", onClose);
+    }, 50);
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener("mousedown", handleMouseDown, true);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("blur", onClose);
+    };
+  }, [isVisible, onClose]);
+
+  useLayoutEffect(() => {
+    if (!isVisible || !menuRef.current) return;
+    const { offsetWidth, offsetHeight } = menuRef.current;
+    setPosition({
+      x: Math.max(8, Math.min(x, window.innerWidth - offsetWidth - 10)),
+      y: Math.max(8, Math.min(y, window.innerHeight - offsetHeight - 10)),
+    });
+  }, [isVisible, x, y]);
+
+  if (!isVisible) return null;
+
+  const onlyOneVisible = columns.visibleColumns.length <= 1;
+
+  return (
+    <div
+      ref={menuRef}
+      data-context-menu
+      data-testid="column-visibility-menu"
+      className="fixed bg-card border border-border rounded-none shadow-md min-w-[200px] z-[99995] py-1"
+      style={{ left: position.x, top: position.y }}
+    >
+      <div className="px-3 pt-1.5 pb-1 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+        {t("fileManager.columns")}
+      </div>
+      {columns.columns.map((column) => {
+        const visible = columns.isVisible(column.key);
+        // Keep at least one optional column so the header stays meaningful.
+        const disabled = visible && onlyOneVisible;
+        return (
+          <button
+            key={column.key}
+            type="button"
+            role="menuitemcheckbox"
+            aria-checked={visible}
+            disabled={disabled}
+            className={cn(
+              "w-full px-3 min-h-8 py-1.5 text-left text-xs font-semibold flex items-center gap-2 rounded-none transition-colors cursor-pointer",
+              "hover:bg-accent-brand/10 hover:text-accent-brand",
+              disabled &&
+                "opacity-40 cursor-not-allowed hover:bg-transparent hover:text-current",
+            )}
+            onClick={() => {
+              if (!disabled) columns.toggleColumn(column.key);
+            }}
+          >
+            <span className="size-3.5 flex items-center justify-center text-accent-brand">
+              {visible && <Check className="size-3.5" />}
+            </span>
+            <span className="flex-1 leading-tight">{t(column.labelKey)}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/CompressDialog.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  Input,
+  Label,
+} from "@termix/plugin-sdk/ui";
+import { Package } from "lucide-react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+
+interface CompressDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fileNames: string[];
+  onCompress: (archiveName: string, format: string) => void;
+}
+
+export function CompressDialog({
+  open,
+  onOpenChange,
+  fileNames,
+  onCompress,
+}: CompressDialogProps) {
+  const { t } = useTranslation();
+  const [archiveName, setArchiveName] = useState("");
+  const [format, setFormat] = useState("zip");
+
+  useEffect(() => {
+    if (open && fileNames.length > 0) {
+      if (fileNames.length === 1) {
+        const baseName = fileNames[0].replace(/\.[^/.]+$/, "");
+        setArchiveName(baseName);
+      } else {
+        setArchiveName("archive");
+      }
+    }
+  }, [open, fileNames]);
+
+  const handleCompress = () => {
+    if (!archiveName.trim()) return;
+
+    let finalName = archiveName.trim();
+    const extensions: Record<string, string> = {
+      zip: ".zip",
+      "tar.gz": ".tar.gz",
+      "tar.bz2": ".tar.bz2",
+      "tar.xz": ".tar.xz",
+      tar: ".tar",
+      "7z": ".7z",
+    };
+
+    const expectedExtension = extensions[format];
+    if (expectedExtension && !finalName.endsWith(expectedExtension)) {
+      finalName += expectedExtension;
+    }
+
+    onCompress(finalName, format);
+    onOpenChange(false);
+  };
+
+  const formats = ["zip", "tar.gz", "tar.bz2", "tar.xz", "tar", "7z"] as const;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[calc(100vw-2rem)] sm:max-w-md rounded-none border-border bg-card">
+        <DialogHeader>
+          <DialogTitle className="text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+            <Package className="size-4 text-accent-brand" />
+            {t("fileManager.compressFiles")}
+          </DialogTitle>
+          <DialogDescription className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground">
+            {t("fileManager.compressFilesDesc", { count: fileNames.length })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Label
+              className="text-xs font-bold uppercase tracking-widest text-muted-foreground"
+              htmlFor="archiveName"
+            >
+              {t("fileManager.archiveName")}
+            </Label>
+            <Input
+              id="archiveName"
+              value={archiveName}
+              onChange={(e) => setArchiveName(e.target.value)}
+              placeholder={t("fileManager.enterArchiveName")}
+              className="rounded-none bg-muted/50 border-border text-xs"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleCompress();
+                }
+              }}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+              {t("fileManager.compressionFormat")}
+            </Label>
+            <div className="grid grid-cols-3 gap-1">
+              {formats.map((f) => (
+                <button
+                  key={f}
+                  onClick={() => setFormat(f)}
+                  className={`py-2 text-xs font-bold uppercase tracking-widest border transition-colors ${
+                    format === f
+                      ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand"
+                      : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"
+                  }`}
+                >
+                  .{f}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="rounded-none bg-muted/10 border border-border p-3">
+            <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-2">
+              {t("fileManager.selectedFiles")}:
+            </p>
+            <ul className="text-xs space-y-1">
+              {fileNames.slice(0, 5).map((name, index) => (
+                <li
+                  key={index}
+                  className="truncate text-foreground font-medium"
+                >
+                  {name}
+                </li>
+              ))}
+              {fileNames.length > 5 && (
+                <li className="text-muted-foreground">
+                  {t("fileManager.andMoreFiles", {
+                    count: fileNames.length - 5,
+                  })}
+                </li>
+              )}
+            </ul>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            className="rounded-none text-[10px] font-bold uppercase tracking-widest"
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={handleCompress}
+            disabled={!archiveName.trim()}
+            className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest"
+          >
+            <Package className="size-3.5 mr-1" />
+            {t("fileManager.compress")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

plugins/file-manager/src/frontend/components/DiffViewer.tsx

@@ -0,0 +1,346 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect } from "react";
+import { DiffEditor } from "@monaco-editor/react";
+import { Button } from "@termix/plugin-sdk/ui";
+import { toast } from "sonner";
+import { DownloadProgressToast } from "./DownloadProgressToast";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import {
+  Download,
+  RefreshCw,
+  Eye,
+  EyeOff,
+  ArrowLeftRight,
+  FileText,
+} from "lucide-react";
+import {
+  readSSHFile,
+  downloadSSHFileStream,
+  getSSHStatus,
+  connectSSH,
+} from "../api/ssh-file-operations-api";
+import type { FileItem, SSHHost } from "../host-types";
+
+interface DiffViewerProps {
+  file1: FileItem;
+  file2: FileItem;
+  sshSessionId: string;
+  sshHost: SSHHost;
+  onDownload1?: () => void;
+  onDownload2?: () => void;
+}
+
+export function DiffViewer({
+  file1,
+  file2,
+  sshSessionId,
+  sshHost,
+}: DiffViewerProps) {
+  const { t } = useTranslation();
+  const [content1, setContent1] = useState<string>("");
+  const [content2, setContent2] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [diffMode, setDiffMode] = useState<"side-by-side" | "inline">(
+    "side-by-side",
+  );
+  const [showLineNumbers, setShowLineNumbers] = useState(true);
+
+  const ensureSSHConnection = async () => {
+    try {
+      const status = await getSSHStatus(sshSessionId);
+      if (!status.connected) {
+        await connectSSH(sshSessionId, {
+          hostId: sshHost.id,
+          ip: sshHost.ip,
+          port: sshHost.port,
+          username: sshHost.username,
+          password: sshHost.password,
+          sshKey: sshHost.key,
+          keyPassword: sshHost.keyPassword,
+          authType: sshHost.authType,
+          credentialId: sshHost.credentialId,
+          userId: sshHost.userId,
+        });
+      }
+    } catch {
+      await connectSSH(sshSessionId, {
+        hostId: sshHost.id,
+        ip: sshHost.ip,
+        port: sshHost.port,
+        username: sshHost.username,
+        password: sshHost.password,
+        sshKey: sshHost.key,
+        keyPassword: sshHost.keyPassword,
+        authType: sshHost.authType,
+        credentialId: sshHost.credentialId,
+        userId: sshHost.userId,
+      });
+    }
+  };
+
+  const loadFileContents = async () => {
+    if (file1.type !== "file" || file2.type !== "file") {
+      setError(t("fileManager.canOnlyCompareFiles"));
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      await ensureSSHConnection();
+
+      const [response1, response2] = await Promise.all([
+        readSSHFile(sshSessionId, file1.path),
+        readSSHFile(sshSessionId, file2.path),
+      ]);
+
+      setContent1(response1.content || "");
+      setContent2(response2.content || "");
+    } catch (error: unknown) {
+      console.error("Failed to load files for diff:", error);
+
+      const err = error as {
+        message?: string;
+        response?: { data?: { tooLarge?: boolean; error?: string } };
+      };
+      const errorData = err?.response?.data;
+      if (errorData?.tooLarge) {
+        setError(t("fileManager.fileTooLarge", { error: errorData.error }));
+      } else if (
+        err.message?.includes("connection") ||
+        err.message?.includes("established")
+      ) {
+        setError(
+          t("fileManager.sshConnectionFailed", {
+            name: sshHost.name,
+            ip: sshHost.ip,
+            port: sshHost.port,
+          }),
+        );
+      } else {
+        setError(
+          t("fileManager.loadFileFailed", {
+            error:
+              err.message || errorData?.error || t("fileManager.unknownError"),
+          }),
+        );
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDownloadFile = async (file: FileItem) => {
+    const toastId = toast.loading(
+      <DownloadProgressToast fileName={file.name} loaded={0} />,
+      { duration: Infinity },
+    );
+    try {
+      await ensureSSHConnection();
+      await downloadSSHFileStream(
+        sshSessionId,
+        file.path,
+        ({ loaded, total }) => {
+          toast.loading(
+            <DownloadProgressToast
+              fileName={file.name}
+              loaded={loaded}
+              total={total}
+            />,
+            { id: toastId, duration: Infinity },
+          );
+        },
+      );
+      toast.success(t("fileManager.downloadFileSuccess", { name: file.name }), {
+        id: toastId,
+        duration: undefined,
+      });
+    } catch (error: unknown) {
+      console.error("Failed to download file:", error);
+      const err = error as { message?: string };
+      toast.error(
+        t("fileManager.downloadFileFailed") +
+          ": " +
+          (err.message || t("fileManager.unknownError")),
+        { id: toastId, duration: undefined },
+      );
+    }
+  };
+
+  const getFileLanguage = (fileName: string): string => {
+    const ext = fileName.split(".").pop()?.toLowerCase();
+    const languageMap: Record<string, string> = {
+      js: "javascript",
+      jsx: "javascript",
+      ts: "typescript",
+      tsx: "typescript",
+      py: "python",
+      java: "java",
+      c: "c",
+      cpp: "cpp",
+      cs: "csharp",
+      php: "php",
+      rb: "ruby",
+      go: "go",
+      rs: "rust",
+      html: "html",
+      css: "css",
+      scss: "scss",
+      less: "less",
+      json: "json",
+      xml: "xml",
+      yaml: "yaml",
+      yml: "yaml",
+      md: "markdown",
+      sql: "sql",
+      sh: "shell",
+      bash: "shell",
+      ps1: "powershell",
+      dockerfile: "dockerfile",
+    };
+    return languageMap[ext || ""] || "plaintext";
+  };
+
+  useEffect(() => {
+    loadFileContents();
+  }, [file1, file2, sshSessionId]);
+
+  if (isLoading) {
+    return (
+      <div className="h-full flex items-center justify-center bg-card">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
+          <p className="text-sm text-muted-foreground">
+            {t("fileManager.loadingFileComparison")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-full flex items-center justify-center bg-card">
+        <div className="text-center max-w-md">
+          <FileText className="w-16 h-16 mx-auto mb-4 text-red-500 opacity-50" />
+          <p className="text-red-500 mb-4">{error}</p>
+          <Button onClick={loadFileContents} variant="outline">
+            <RefreshCw className="w-4 h-4 mr-2" />
+            {t("fileManager.reload")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-card">
+      <div className="flex-shrink-0 border-b border-border p-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="text-sm">
+              <span className="text-muted-foreground">
+                {t("fileManager.compare")}:
+              </span>
+              <span className="font-medium text-green-400 mx-2">
+                {file1.name}
+              </span>
+              <ArrowLeftRight className="w-4 h-4 inline mx-1" />
+              <span className="font-medium text-blue-400">{file2.name}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                setDiffMode(
+                  diffMode === "side-by-side" ? "inline" : "side-by-side",
+                )
+              }
+            >
+              {diffMode === "side-by-side"
+                ? t("fileManager.sideBySide")
+                : t("fileManager.inline")}
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowLineNumbers(!showLineNumbers)}
+            >
+              {showLineNumbers ? (
+                <Eye className="w-4 h-4" />
+              ) : (
+                <EyeOff className="w-4 h-4" />
+              )}
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleDownloadFile(file1)}
+              title={t("fileManager.downloadFile", { name: file1.name })}
+            >
+              <Download className="w-4 h-4 mr-1" />
+              {file1.name}
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleDownloadFile(file2)}
+              title={t("fileManager.downloadFile", { name: file2.name })}
+            >
+              <Download className="w-4 h-4 mr-1" />
+              {file2.name}
+            </Button>
+
+            <Button variant="outline" size="sm" onClick={loadFileContents}>
+              <RefreshCw className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1">
+        <DiffEditor
+          original={content1}
+          modified={content2}
+          language={getFileLanguage(file1.name)}
+          theme="vs-dark"
+          options={{
+            renderSideBySide: diffMode === "side-by-side",
+            lineNumbers: showLineNumbers ? "on" : "off",
+            minimap: { enabled: false },
+            scrollBeyondLastLine: false,
+            fontSize: 13,
+            wordWrap: "off",
+            automaticLayout: true,
+            readOnly: true,
+            originalEditable: false,
+            scrollbar: {
+              vertical: "visible",
+              horizontal: "visible",
+            },
+            diffWordWrap: "off",
+            ignoreTrimWhitespace: false,
+          }}
+          loading={
+            <div className="h-full flex items-center justify-center">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-2"></div>
+                <p className="text-sm text-muted-foreground">
+                  {t("fileManager.initializingEditor")}
+                </p>
+              </div>
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/DiffWindow.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { DraggableWindow } from "./DraggableWindow.tsx";
+import { DiffViewer } from "./DiffViewer.tsx";
+import { useWindowManager } from "./WindowManager.tsx";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import type { FileItem, SSHHost } from "../host-types";
+
+interface DiffWindowProps {
+  windowId: string;
+  file1: FileItem;
+  file2: FileItem;
+  sshSessionId: string;
+  sshHost: SSHHost;
+  initialX?: number;
+  initialY?: number;
+}
+
+export function DiffWindow({
+  windowId,
+  file1,
+  file2,
+  sshSessionId,
+  sshHost,
+  initialX = 150,
+  initialY = 100,
+}: DiffWindowProps) {
+  const { t } = useTranslation();
+  const { closeWindow, maximizeWindow, focusWindow, windows } =
+    useWindowManager();
+
+  const currentWindow = windows.find((w) => w.id === windowId);
+
+  const handleClose = () => {
+    closeWindow(windowId);
+  };
+
+  const handleMaximize = () => {
+    maximizeWindow(windowId);
+  };
+
+  const handleFocus = () => {
+    focusWindow(windowId);
+  };
+
+  if (!currentWindow) {
+    return null;
+  }
+
+  return (
+    <DraggableWindow
+      title={t("fileManager.fileComparison", {
+        file1: file1.name,
+        file2: file2.name,
+      })}
+      initialX={initialX}
+      initialY={initialY}
+      initialWidth={1200}
+      initialHeight={700}
+      minWidth={800}
+      minHeight={500}
+      onClose={handleClose}
+      onMaximize={handleMaximize}
+      onFocus={handleFocus}
+      isMaximized={currentWindow.isMaximized}
+      zIndex={currentWindow.zIndex}
+    >
+      <DiffViewer
+        file1={file1}
+        file2={file2}
+        sshSessionId={sshSessionId}
+        sshHost={sshHost}
+      />
+    </DraggableWindow>
+  );
+}

plugins/file-manager/src/frontend/components/DownloadProgressToast.tsx

@@ -0,0 +1,71 @@
+import { formatTransferMbPerSec } from "../api/transfer-api";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { ArrowDownToLine } from "lucide-react";
+import { TransferProgressBar } from "./TransferProgressBar";
+
+interface DownloadProgressToastProps {
+  fileName: string;
+  loaded: number;
+  total?: number;
+  mbPerSec?: number;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let size = bytes;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  const formattedSize =
+    size < 10 && unitIndex > 0 ? size.toFixed(1) : Math.round(size).toString();
+  return `${formattedSize} ${units[unitIndex]}`;
+}
+
+export function DownloadProgressToast({
+  fileName,
+  loaded,
+  total,
+  mbPerSec,
+}: DownloadProgressToastProps) {
+  const { t } = useTranslation();
+  const percent =
+    total !== undefined && total > 0
+      ? Math.min(100, Math.round((loaded / total) * 100))
+      : undefined;
+
+  const speed = formatTransferMbPerSec(mbPerSec);
+
+  return (
+    <div className="flex w-[min(calc(100vw-5rem),288px)] max-w-full flex-col gap-2 pr-2">
+      <p className="flex items-center gap-2 text-sm font-medium leading-tight">
+        <ArrowDownToLine className="size-3.5 shrink-0 text-accent-brand" />
+        <span className="truncate">
+          {t("fileManager.downloadingFile", { name: fileName })}
+        </span>
+      </p>
+      <TransferProgressBar
+        value={percent}
+        label={t("fileManager.downloadingFile", { name: fileName })}
+      />
+      <div className="flex items-center justify-between gap-3 pr-1 text-xs text-muted-foreground">
+        <span className="min-w-0 truncate">
+          {total !== undefined
+            ? t("fileManager.downloadProgressBytes", {
+                transferred: formatBytes(loaded),
+                total: formatBytes(total),
+              })
+            : formatBytes(loaded)}
+        </span>
+        <span
+          className={`shrink-0 tabular-nums ${speed ? "font-medium text-foreground" : "invisible"}`}
+          aria-hidden={!speed}
+        >
+          {speed || "0 MB/s"}
+        </span>
+      </div>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/DraggableWindow.tsx

@@ -0,0 +1,381 @@
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { cn } from "@termix/plugin-sdk/ui";
+import { Minus, X, Maximize2, Minimize2 } from "lucide-react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+
+interface DraggableWindowProps {
+  title: string;
+  children: React.ReactNode;
+  initialX?: number;
+  initialY?: number;
+  initialWidth?: number;
+  initialHeight?: number;
+  minWidth?: number;
+  minHeight?: number;
+  onClose: () => void;
+  onMinimize?: () => void;
+  onMaximize?: () => void;
+  onResize?: () => void;
+  isMaximized?: boolean;
+  zIndex?: number;
+  onFocus?: () => void;
+  targetSize?: { width: number; height: number };
+  titleActions?: React.ReactNode;
+}
+
+export function DraggableWindow({
+  title,
+  children,
+  initialX = 100,
+  initialY = 100,
+  initialWidth = 600,
+  initialHeight = 400,
+  minWidth = 300,
+  minHeight = 200,
+  onClose,
+  onMinimize,
+  onMaximize,
+  onResize,
+  isMaximized = false,
+  zIndex = 1000,
+  onFocus,
+  targetSize,
+  titleActions,
+}: DraggableWindowProps) {
+  const { t } = useTranslation();
+  const [position, setPosition] = useState({ x: initialX, y: initialY });
+  const [size, setSize] = useState({
+    width: initialWidth,
+    height: initialHeight,
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizeDirection, setResizeDirection] = useState<string>("");
+
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [windowStart, setWindowStart] = useState({ x: 0, y: 0 });
+  const [sizeStart, setSizeStart] = useState({ width: 0, height: 0 });
+  const containerBoundsRef = useRef({ width: 0, height: 0 });
+
+  const windowRef = useRef<HTMLDivElement>(null);
+  const titleBarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (targetSize && !isMaximized) {
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      const maxWidth = container
+        ? Math.min(container.clientWidth * 0.9, 1200)
+        : Math.min(window.innerWidth * 0.9, 1200);
+      const maxHeight = container
+        ? Math.min(container.clientHeight * 0.8, 800)
+        : Math.min(window.innerHeight * 0.8, 800);
+
+      let newWidth = Math.min(targetSize.width + 50, maxWidth);
+      let newHeight = Math.min(targetSize.height + 150, maxHeight);
+
+      if (newWidth > maxWidth || newHeight > maxHeight) {
+        const widthRatio = maxWidth / newWidth;
+        const heightRatio = maxHeight / newHeight;
+        const scale = Math.min(widthRatio, heightRatio);
+
+        newWidth = Math.floor(newWidth * scale);
+        newHeight = Math.floor(newHeight * scale);
+      }
+
+      newWidth = Math.max(newWidth, minWidth);
+      newHeight = Math.max(newHeight, minHeight);
+
+      setSize({ width: newWidth, height: newHeight });
+
+      setPosition({
+        x: Math.max(
+          0,
+          (container ? container.clientWidth : window.innerWidth) / 2 -
+            newWidth / 2,
+        ),
+        y: Math.max(
+          0,
+          (container ? container.clientHeight : window.innerHeight) / 2 -
+            newHeight / 2,
+        ),
+      });
+    }
+  }, [targetSize, isMaximized, minWidth, minHeight]);
+
+  const handleWindowClick = useCallback(() => {
+    onFocus?.();
+  }, [onFocus]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (isMaximized) return;
+
+      e.preventDefault();
+      setIsDragging(true);
+      setDragStart({ x: e.clientX, y: e.clientY });
+      setWindowStart({ x: position.x, y: position.y });
+
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      containerBoundsRef.current = {
+        width: container ? container.clientWidth : window.innerWidth,
+        height: container ? container.clientHeight : window.innerHeight,
+      };
+
+      onFocus?.();
+    },
+    [isMaximized, position, onFocus],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (isDragging && !isMaximized) {
+        const deltaX = e.clientX - dragStart.x;
+        const deltaY = e.clientY - dragStart.y;
+
+        const newX = windowStart.x + deltaX;
+        const newY = windowStart.y + deltaY;
+
+        const { width: containerW, height: containerH } =
+          containerBoundsRef.current;
+        const maxX = containerW - size.width;
+        const maxY = containerH - size.height;
+
+        setPosition({
+          x: Math.max(0, Math.min(maxX, newX)),
+          y: Math.max(49, Math.min(maxY, newY)),
+        });
+      }
+
+      if (isResizing && !isMaximized) {
+        const deltaX = e.clientX - dragStart.x;
+        const deltaY = e.clientY - dragStart.y;
+
+        let newWidth = sizeStart.width;
+        let newHeight = sizeStart.height;
+        let newX = windowStart.x;
+        let newY = windowStart.y;
+
+        if (resizeDirection.includes("right")) {
+          newWidth = Math.max(minWidth, sizeStart.width + deltaX);
+        }
+        if (resizeDirection.includes("left")) {
+          const widthChange = -deltaX;
+          newWidth = Math.max(minWidth, sizeStart.width + widthChange);
+          if (newWidth > minWidth || widthChange > 0) {
+            newX = windowStart.x - (newWidth - sizeStart.width);
+          } else {
+            newX = windowStart.x - (minWidth - sizeStart.width);
+          }
+        }
+
+        if (resizeDirection.includes("bottom")) {
+          newHeight = Math.max(minHeight, sizeStart.height + deltaY);
+        }
+        if (resizeDirection.includes("top")) {
+          const heightChange = -deltaY;
+          newHeight = Math.max(minHeight, sizeStart.height + heightChange);
+          if (newHeight > minHeight || heightChange > 0) {
+            newY = windowStart.y - (newHeight - sizeStart.height);
+          } else {
+            newY = windowStart.y - (minHeight - sizeStart.height);
+          }
+        }
+
+        const { width: containerW, height: containerH } =
+          containerBoundsRef.current;
+        newX = Math.max(0, Math.min(containerW - newWidth, newX));
+        newY = Math.max(49, Math.min(containerH - newHeight, newY));
+
+        setSize({ width: newWidth, height: newHeight });
+        setPosition({ x: newX, y: newY });
+
+        if (onResize) {
+          onResize();
+        }
+      }
+    },
+    [
+      isDragging,
+      isResizing,
+      isMaximized,
+      dragStart,
+      windowStart,
+      sizeStart,
+      size,
+      minWidth,
+      minHeight,
+      resizeDirection,
+      onResize,
+    ],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+    setResizeDirection("");
+  }, []);
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent, direction: string) => {
+      if (isMaximized) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+      setResizeDirection(direction);
+      setDragStart({ x: e.clientX, y: e.clientY });
+      setWindowStart({ x: position.x, y: position.y });
+      setSizeStart({ width: size.width, height: size.height });
+
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      containerBoundsRef.current = {
+        width: container ? container.clientWidth : window.innerWidth,
+        height: container ? container.clientHeight : window.innerHeight,
+      };
+
+      onFocus?.();
+    },
+    [isMaximized, position, size, onFocus],
+  );
+
+  useEffect(() => {
+    if (isDragging || isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = isDragging ? "grabbing" : "resizing";
+
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+      };
+    }
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+
+  const handleTitleDoubleClick = useCallback(() => {
+    onMaximize?.();
+  }, [onMaximize]);
+
+  return (
+    <div
+      ref={windowRef}
+      className={cn(
+        "absolute bg-[#0d0e0c] border border-border rounded-none shadow-2xl",
+        "select-none overflow-hidden flex flex-col",
+        isMaximized ? "inset-0" : "",
+      )}
+      style={{
+        left: isMaximized ? 0 : position.x,
+        top: isMaximized ? 0 : position.y,
+        width: isMaximized ? "100%" : size.width,
+        height: isMaximized ? "100%" : size.height,
+        zIndex,
+      }}
+      onClick={handleWindowClick}
+    >
+      <div
+        ref={titleBarRef}
+        className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border shrink-0 cursor-grab active:cursor-grabbing"
+        onMouseDown={handleMouseDown}
+        onDoubleClick={handleTitleDoubleClick}
+      >
+        <div className="flex items-center gap-3 flex-1 overflow-hidden">
+          <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-accent-brand shrink-0">
+            {t("fileManager.editor")}
+          </span>
+          <div className="h-4 w-px bg-border/50 shrink-0" />
+          <span className="text-[10px] font-bold tracking-tight text-muted-foreground truncate">
+            {title}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-0.5">
+          {titleActions}
+
+          {onMinimize && (
+            <button
+              className="size-6 flex items-center justify-center rounded-none hover:bg-accent-brand/10 hover:text-accent-brand text-muted-foreground transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMinimize();
+              }}
+              title={t("common.minimize")}
+            >
+              <Minus className="size-3.5" />
+            </button>
+          )}
+
+          {onMaximize && (
+            <button
+              className="size-6 flex items-center justify-center rounded-none hover:bg-accent-brand/10 hover:text-accent-brand text-muted-foreground transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMaximize();
+              }}
+              title={isMaximized ? t("common.restore") : t("common.maximize")}
+            >
+              {isMaximized ? (
+                <Minimize2 className="size-3.5" />
+              ) : (
+                <Maximize2 className="size-3.5" />
+              )}
+            </button>
+          )}
+
+          <button
+            className="size-6 flex items-center justify-center rounded-none hover:bg-accent-brand/10 hover:text-accent-brand text-muted-foreground transition-colors"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+            title={t("common.close")}
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-hidden">{children}</div>
+
+      {!isMaximized && (
+        <>
+          <div
+            className="absolute top-0 left-0 right-0 h-1 cursor-n-resize"
+            onMouseDown={(e) => handleResizeStart(e, "top")}
+          />
+          <div
+            className="absolute bottom-0 left-0 right-0 h-1 cursor-s-resize"
+            onMouseDown={(e) => handleResizeStart(e, "bottom")}
+          />
+          <div
+            className="absolute top-0 bottom-0 left-0 w-1 cursor-w-resize"
+            onMouseDown={(e) => handleResizeStart(e, "left")}
+          />
+          <div
+            className="absolute top-0 bottom-0 right-0 w-1 cursor-e-resize"
+            onMouseDown={(e) => handleResizeStart(e, "right")}
+          />
+
+          <div
+            className="absolute top-0 left-0 w-2 h-2 cursor-nw-resize"
+            onMouseDown={(e) => handleResizeStart(e, "top-left")}
+          />
+          <div
+            className="absolute top-0 right-0 w-2 h-2 cursor-ne-resize"
+            onMouseDown={(e) => handleResizeStart(e, "top-right")}
+          />
+          <div
+            className="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize"
+            onMouseDown={(e) => handleResizeStart(e, "bottom-left")}
+          />
+          <div
+            className="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize"
+            onMouseDown={(e) => handleResizeStart(e, "bottom-right")}
+          />
+        </>
+      )}
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/FileViewer.tsx

@@ -0,0 +1,950 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { Suspense, lazy, useState, useEffect, useRef } from "react";
+import { cn } from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import {
+  FileText,
+  Image as ImageIcon,
+  Film,
+  Music,
+  File as FileIcon,
+  Code,
+  AlertCircle,
+  Download,
+  Eye,
+  Edit,
+  Save,
+  RotateCcw,
+  Keyboard,
+  ExternalLink,
+  Settings,
+  Search,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import {
+  SiJavascript,
+  SiTypescript,
+  SiPython,
+  SiCplusplus,
+  SiC,
+  SiDotnet,
+  SiPhp,
+  SiRuby,
+  SiGo,
+  SiRust,
+  SiHtml5,
+  SiSass,
+  SiVuedotjs,
+  SiSvelte,
+  SiMarkdown,
+  SiGnubash,
+  SiMysql,
+  SiDocker,
+} from "react-icons/si";
+import { Button } from "@termix/plugin-sdk/ui";
+import { Kbd, KbdKey } from "@termix/plugin-sdk/ui";
+import type { CodeEditorHandle } from "./CodeEditor.tsx";
+import {
+  loadAudioPreview,
+  loadCodeEditor,
+  loadImagePreview,
+  loadMarkdownRenderer,
+  loadPdfPreview,
+  resolveFilePreviewKind,
+} from "../file-preview-preload";
+
+const CodeEditor = lazy(loadCodeEditor);
+const ImagePreview = lazy(loadImagePreview);
+const MarkdownRenderer = lazy(loadMarkdownRenderer);
+const PdfPreview = lazy(loadPdfPreview);
+const AudioPreview = lazy(loadAudioPreview);
+
+interface FileItem {
+  name: string;
+  type: "file" | "directory" | "link";
+  path: string;
+  size?: number;
+  modified?: string;
+  permissions?: string;
+  owner?: string;
+  group?: string;
+}
+
+interface FileViewerProps {
+  file: FileItem;
+  content?: string;
+  savedContent?: string;
+  isLoading?: boolean;
+  isSaving?: boolean;
+  isEditable?: boolean;
+  resetKey?: number;
+  onContentChange?: (content: string) => void;
+  onSave?: (content: string) => void;
+  onRevert?: () => void;
+  onDownload?: () => void;
+  onOpenExternal?: () => void;
+  onChooseExternalEditor?: () => void;
+  onMediaDimensionsChange?: (dimensions: {
+    width: number;
+    height: number;
+  }) => void;
+}
+
+function getLanguageIcon(filename: string): React.ReactNode {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  const baseName = filename.toLowerCase();
+
+  if (["dockerfile"].includes(baseName)) {
+    return <SiDocker className="w-6 h-6 text-blue-400" />;
+  }
+  if (["makefile", "rakefile", "gemfile"].includes(baseName)) {
+    return <SiRuby className="w-6 h-6 text-red-500" />;
+  }
+
+  const iconMap: Record<string, React.ReactNode> = {
+    js: <SiJavascript className="w-6 h-6 text-yellow-400" />,
+    jsx: <SiJavascript className="w-6 h-6 text-yellow-400" />,
+    ts: <SiTypescript className="w-6 h-6 text-blue-500" />,
+    tsx: <SiTypescript className="w-6 h-6 text-blue-500" />,
+    py: <SiPython className="w-6 h-6 text-blue-400" />,
+    java: <Code className="w-6 h-6 text-red-500" />,
+    cpp: <SiCplusplus className="w-6 h-6 text-blue-600" />,
+    c: <SiC className="w-6 h-6 text-blue-700" />,
+    cs: <SiDotnet className="w-6 h-6 text-purple-600" />,
+    php: <SiPhp className="w-6 h-6 text-indigo-500" />,
+    rb: <SiRuby className="w-6 h-6 text-red-500" />,
+    go: <SiGo className="w-6 h-6 text-cyan-500" />,
+    rs: <SiRust className="w-6 h-6 text-orange-600" />,
+    html: <SiHtml5 className="w-6 h-6 text-orange-500" />,
+    css: <Code className="w-6 h-6 text-blue-500" />,
+    scss: <SiSass className="w-6 h-6 text-pink-500" />,
+    sass: <SiSass className="w-6 h-6 text-pink-500" />,
+    less: <Code className="w-6 h-6 text-blue-600" />,
+    json: <Code className="w-6 h-6 text-yellow-500" />,
+    xml: <Code className="w-6 h-6 text-orange-500" />,
+    yaml: <Code className="w-6 h-6 text-red-400" />,
+    yml: <Code className="w-6 h-6 text-red-400" />,
+    toml: <Code className="w-6 h-6 text-orange-400" />,
+    sql: <SiMysql className="w-6 h-6 text-blue-500" />,
+    sh: <SiGnubash className="w-6 h-6 text-foreground" />,
+    bash: <SiGnubash className="w-6 h-6 text-foreground" />,
+    zsh: <Code className="w-6 h-6 text-foreground" />,
+    vue: <SiVuedotjs className="w-6 h-6 text-green-500" />,
+    svelte: <SiSvelte className="w-6 h-6 text-orange-500" />,
+    md: <SiMarkdown className="w-6 h-6 text-muted-foreground" />,
+    conf: <Code className="w-6 h-6 text-muted-foreground" />,
+    ini: <Code className="w-6 h-6 text-muted-foreground" />,
+  };
+
+  return iconMap[ext] || <Code className="w-6 h-6 text-yellow-500" />;
+}
+
+function getFileType(filename: string): {
+  type: string;
+  icon: React.ReactNode;
+  color: string;
+} {
+  const kind = resolveFilePreviewKind(filename);
+
+  if (kind === "image") {
+    return {
+      type: "image",
+      icon: <ImageIcon className="w-6 h-6" />,
+      color: "text-green-500",
+    };
+  } else if (kind === "video") {
+    return {
+      type: "video",
+      icon: <Film className="w-6 h-6" />,
+      color: "text-purple-500",
+    };
+  } else if (kind === "audio") {
+    return {
+      type: "audio",
+      icon: <Music className="w-6 h-6" />,
+      color: "text-pink-500",
+    };
+  } else if (kind === "markdown") {
+    return {
+      type: "markdown",
+      icon: <FileText className="w-6 h-6" />,
+      color: "text-blue-600",
+    };
+  } else if (kind === "pdf") {
+    return {
+      type: "pdf",
+      icon: <FileText className="w-6 h-6" />,
+      color: "text-red-600",
+    };
+  } else if (kind === "text") {
+    return {
+      type: "text",
+      icon: <FileText className="w-6 h-6" />,
+      color: "text-blue-500",
+    };
+  } else if (kind === "code") {
+    return {
+      type: "code",
+      icon: getLanguageIcon(filename),
+      color: "text-yellow-500",
+    };
+  } else {
+    return {
+      type: "unknown",
+      icon: <FileIcon className="w-6 h-6" />,
+      color: "text-foreground-subtle",
+    };
+  }
+}
+
+function formatFileSize(bytes?: number, t?: (key: string) => string): string {
+  if (!bytes) return t ? t("fileManager.unknownSize") : "Unknown size";
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
+}
+
+function PreviewFallback({ label }: { label: string }) {
+  return (
+    <div className="h-full flex items-center justify-center">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
+        <p className="text-sm text-muted-foreground">{label}</p>
+      </div>
+    </div>
+  );
+}
+
+export function FileViewer({
+  file,
+  content = "",
+  savedContent = "",
+  isLoading = false,
+  isSaving = false,
+  isEditable = false,
+  resetKey,
+  onContentChange,
+  onSave,
+  onRevert,
+  onDownload,
+  onOpenExternal,
+  onChooseExternalEditor,
+  onMediaDimensionsChange,
+}: FileViewerProps) {
+  const { t } = useTranslation();
+  const [editedContent, setEditedContent] = useState(content);
+  const [, setOriginalContent] = useState(savedContent || content);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [showLargeFileWarning, setShowLargeFileWarning] = useState(false);
+  const [forceShowAsText, setForceShowAsText] = useState(false);
+  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(false);
+  const [editorFocused, setEditorFocused] = useState(false);
+  const [markdownEditMode, setMarkdownEditMode] = useState(false);
+  const [editorFontSize, setEditorFontSize] = useState<number>(() => {
+    const stored = localStorage.getItem("fileManagerEditorFontSize");
+    return stored ? parseInt(stored, 10) : 14;
+  });
+  const editorRef = useRef<CodeEditorHandle | null>(null);
+
+  const MIN_FONT_SIZE = 8;
+  const MAX_FONT_SIZE = 32;
+
+  const decreaseFontSize = () => {
+    setEditorFontSize((prev) => {
+      const next = Math.max(MIN_FONT_SIZE, prev - 1);
+      localStorage.setItem("fileManagerEditorFontSize", String(next));
+      return next;
+    });
+  };
+
+  const increaseFontSize = () => {
+    setEditorFontSize((prev) => {
+      const next = Math.min(MAX_FONT_SIZE, prev + 1);
+      localStorage.setItem("fileManagerEditorFontSize", String(next));
+      return next;
+    });
+  };
+
+  const fileTypeInfo = getFileType(file.name);
+
+  const WARNING_SIZE = 50 * 1024 * 1024;
+  const MAX_SIZE = Number.MAX_SAFE_INTEGER;
+
+  const shouldShowAsText =
+    fileTypeInfo.type === "text" ||
+    fileTypeInfo.type === "code" ||
+    (fileTypeInfo.type === "unknown" &&
+      (forceShowAsText || !file.size || file.size <= WARNING_SIZE));
+
+  const isLargeFile = file.size && file.size > WARNING_SIZE;
+  const isTooLarge = file.size && file.size > MAX_SIZE;
+
+  useEffect(() => {
+    setEditedContent(content);
+    if (savedContent) {
+      setOriginalContent(savedContent);
+    }
+  }, [file.name, file.path, resetKey]);
+
+  useEffect(() => {
+    setHasChanges(content !== savedContent);
+
+    if (fileTypeInfo.type === "unknown" && isLargeFile && !forceShowAsText) {
+      setShowLargeFileWarning(true);
+    } else {
+      setShowLargeFileWarning(false);
+    }
+  }, [content, savedContent, fileTypeInfo.type, isLargeFile, forceShowAsText]);
+
+  const handleContentChange = (newContent: string) => {
+    setEditedContent(newContent);
+    setHasChanges(newContent !== savedContent);
+    onContentChange?.(newContent);
+  };
+
+  const handleSave = () => {
+    if (isSaving) return;
+    onSave?.(editedContent);
+  };
+
+  const handleRevert = () => {
+    if (onRevert) {
+      onRevert();
+    } else {
+      setEditedContent(savedContent);
+      setHasChanges(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!editorFocused || !isEditable) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isCtrl = e.ctrlKey || e.metaKey;
+      if (isCtrl && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSave();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown, true);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [editorFocused, isEditable, handleSave]);
+
+  const handleConfirmOpenAsText = () => {
+    setForceShowAsText(true);
+    setShowLargeFileWarning(false);
+  };
+
+  const handleCancelOpenAsText = () => {
+    setShowLargeFileWarning(false);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
+          <p className="text-sm text-muted-foreground">Loading file...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-background">
+      <div className="flex-shrink-0 bg-card border-b border-border p-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <div className={cn("p-2 rounded-lg bg-muted", fileTypeInfo.color)}>
+              {fileTypeInfo.icon}
+            </div>
+            <div>
+              <h3 className="font-medium text-foreground">{file.name}</h3>
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                <span>{formatFileSize(file.size, t)}</span>
+                {file.modified && (
+                  <span>
+                    {t("fileManager.modified")}: {file.modified}
+                  </span>
+                )}
+                <span
+                  className={cn(
+                    "px-2 py-1 rounded-full text-xs",
+                    fileTypeInfo.color,
+                    "bg-muted",
+                  )}
+                >
+                  {fileTypeInfo.type.toUpperCase()}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="ml-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-2">
+            {isEditable && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => editorRef.current?.openSearchPanel()}
+                className="flex items-center gap-2"
+                title={t("fileManager.searchInFile")}
+              >
+                <Search className="w-4 h-4" />
+              </Button>
+            )}
+            {isEditable && (
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={decreaseFontSize}
+                  disabled={editorFontSize <= MIN_FONT_SIZE}
+                  title={t("fileManager.decreaseFontSize")}
+                  className="w-7 h-7 p-0"
+                >
+                  <ZoomOut className="w-4 h-4" />
+                </Button>
+                <span className="text-xs text-muted-foreground w-8 text-center select-none">
+                  {editorFontSize}px
+                </span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={increaseFontSize}
+                  disabled={editorFontSize >= MAX_FONT_SIZE}
+                  title={t("fileManager.increaseFontSize")}
+                  className="w-7 h-7 p-0"
+                >
+                  <ZoomIn className="w-4 h-4" />
+                </Button>
+              </div>
+            )}
+            {isEditable && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowKeyboardShortcuts(!showKeyboardShortcuts)}
+                className="flex items-center gap-2"
+                title={t("fileManager.showKeyboardShortcuts")}
+              >
+                <Keyboard className="w-4 h-4" />
+              </Button>
+            )}
+            {hasChanges && (
+              <>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleRevert}
+                  disabled={isSaving}
+                  className="flex items-center gap-2"
+                >
+                  <RotateCcw className="w-4 h-4" />
+                  Revert
+                </Button>
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={isSaving}
+                  className="flex items-center gap-2"
+                >
+                  <Save className="w-4 h-4" />
+                  Save
+                </Button>
+              </>
+            )}
+            {onDownload && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onDownload}
+                className="flex items-center gap-2"
+              >
+                <Download className="w-4 h-4" />
+                {t("fileManager.download")}
+              </Button>
+            )}
+            {isEditable && onOpenExternal && (
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onOpenExternal}
+                  className="flex items-center gap-2"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  {t("fileManager.openExternalEditor")}
+                </Button>
+                {onChooseExternalEditor && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onChooseExternalEditor}
+                    className="h-8 w-8 p-0"
+                    title={t("fileManager.chooseExternalEditor")}
+                  >
+                    <Settings className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {showKeyboardShortcuts && isEditable && (
+        <div className="flex-shrink-0 bg-muted/30 border-b border-border p-4">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-sm font-semibold">
+              {t("fileManager.keyboardShortcuts")}
+            </h3>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowKeyboardShortcuts(false)}
+              className="h-6 w-6 p-0"
+            >
+              ×
+            </Button>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
+            <div className="space-y-2">
+              <h4 className="font-medium text-muted-foreground">
+                {t("fileManager.searchAndReplace")}
+              </h4>
+              <div className="space-y-1">
+                <div className="flex justify-between">
+                  <span>{t("fileManager.search")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+F
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.replace")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+H
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.findNext")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      F3
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.findPrevious")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Shift+F3
+                    </KbdKey>
+                  </Kbd>
+                </div>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-muted-foreground">
+                {t("fileManager.editing")}
+              </h4>
+              <div className="space-y-1">
+                <div className="flex justify-between">
+                  <span>{t("fileManager.save")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+S
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.selectAll")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+A
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.undo")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+Z
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.redo")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+Y
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.toggleComment")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+/
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.autoComplete")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Ctrl+Space
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.moveLineUp")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Alt+↑
+                    </KbdKey>
+                  </Kbd>
+                </div>
+                <div className="flex justify-between">
+                  <span>{t("fileManager.moveLineDown")}</span>
+                  <Kbd className="px-2 py-1 bg-background rounded text-xs">
+                    <KbdKey className="px-2 py-1 bg-background rounded text-xs">
+                      Alt+↓
+                    </KbdKey>
+                  </Kbd>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-hidden">
+        {showLargeFileWarning && (
+          <div className="h-full flex items-center justify-center bg-background">
+            <div className="bg-card border border-destructive/30 rounded-lg p-6 max-w-md mx-4 shadow-lg">
+              <div className="flex items-start gap-3 mb-4">
+                <AlertCircle className="w-6 h-6 text-destructive flex-shrink-0 mt-0.5" />
+                <div>
+                  <h3 className="font-medium text-foreground mb-2">
+                    {t("fileManager.largeFileWarning")}
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    {t("fileManager.largeFileWarningDesc", {
+                      size: formatFileSize(file.size, t),
+                    })}
+                  </p>
+                  {isTooLarge ? (
+                    <div className="bg-destructive/10 border border-destructive/30 rounded p-3 mb-4">
+                      <p className="text-sm text-destructive font-medium">
+                        File is too large (&gt; 10MB) and cannot be opened as
+                        text for security reasons.
+                      </p>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Do you want to continue opening this file as text? This
+                      may slow down your browser.
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex gap-3">
+                {!isTooLarge && (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    onClick={handleConfirmOpenAsText}
+                    className="flex items-center gap-2"
+                  >
+                    <FileText className="w-4 h-4" />
+                    Open as Text
+                  </Button>
+                )}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onDownload}
+                  className="flex items-center gap-2"
+                >
+                  <Download className="w-4 h-4" />
+                  {t("fileManager.downloadInstead")}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleCancelOpenAsText}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {fileTypeInfo.type === "image" && !showLargeFileWarning && (
+          <Suspense fallback={<PreviewFallback label="Loading image..." />}>
+            <ImagePreview
+              content={content}
+              fileName={file.name}
+              onDownload={onDownload}
+              onMediaDimensionsChange={onMediaDimensionsChange}
+            />
+          </Suspense>
+        )}
+
+        {shouldShowAsText && !showLargeFileWarning && (
+          <div className="h-full flex flex-col">
+            {isEditable ? (
+              <Suspense
+                fallback={<PreviewFallback label="Loading editor..." />}
+              >
+                <CodeEditor
+                  ref={editorRef}
+                  fileName={file.name}
+                  value={editedContent}
+                  onChange={handleContentChange}
+                  onFocus={() => setEditorFocused(true)}
+                  onBlur={() => setEditorFocused(false)}
+                  placeholder={t("fileManager.startTyping")}
+                  fontSize={editorFontSize}
+                />
+              </Suspense>
+            ) : (
+              <div className="h-full p-4 font-mono text-sm whitespace-pre-wrap overflow-auto thin-scrollbar bg-background text-foreground">
+                {editedContent || content || t("fileManager.fileIsEmpty")}
+              </div>
+            )}
+          </div>
+        )}
+
+        {fileTypeInfo.type === "video" && !showLargeFileWarning && (
+          <div className="p-6 flex items-center justify-center h-full">
+            <div className="w-full max-w-4xl">
+              {(() => {
+                const ext = file.name.split(".").pop()?.toLowerCase() || "";
+                const mimeType = (() => {
+                  switch (ext) {
+                    case "mp4":
+                      return "video/mp4";
+                    case "webm":
+                      return "video/webm";
+                    case "mkv":
+                      return "video/x-matroska";
+                    case "avi":
+                      return "video/x-msvideo";
+                    case "mov":
+                      return "video/quicktime";
+                    case "wmv":
+                      return "video/x-ms-wmv";
+                    case "flv":
+                      return "video/x-flv";
+                    default:
+                      return "video/mp4";
+                  }
+                })();
+
+                const videoUrl = `data:${mimeType};base64,${content}`;
+
+                return (
+                  <div className="relative">
+                    <video
+                      controls
+                      className="w-full rounded-lg shadow-sm"
+                      style={{
+                        maxHeight: "calc(100vh - 200px)",
+                        backgroundColor: "#000",
+                      }}
+                      preload="metadata"
+                      onError={(e) => {
+                        console.error(
+                          "Video playback error:",
+                          e.currentTarget.error,
+                        );
+                      }}
+                      onLoadedMetadata={(e) => {
+                        const video = e.currentTarget;
+                        if (
+                          onMediaDimensionsChange &&
+                          video.videoWidth &&
+                          video.videoHeight
+                        ) {
+                          onMediaDimensionsChange({
+                            width: video.videoWidth,
+                            height: video.videoHeight,
+                          });
+                        }
+                      }}
+                    >
+                      <source src={videoUrl} type={mimeType} />
+                      <div className="text-center text-muted-foreground p-4">
+                        <AlertCircle className="w-8 h-8 mx-auto mb-2" />
+                        <p>{t("fileManager.videoUnsupported")}</p>
+                        {onDownload && (
+                          <Button
+                            variant="outline"
+                            onClick={onDownload}
+                            className="mt-2 flex items-center gap-2 mx-auto"
+                          >
+                            <Download className="w-4 h-4" />
+                            {t("fileManager.downloadToPlay")}
+                          </Button>
+                        )}
+                      </div>
+                    </video>
+                  </div>
+                );
+              })()}
+            </div>
+          </div>
+        )}
+
+        {fileTypeInfo.type === "markdown" && !showLargeFileWarning && (
+          <div className="h-full flex flex-col">
+            <div className="flex-shrink-0 bg-muted/30 border-b border-border p-2">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant={markdownEditMode ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setMarkdownEditMode(true)}
+                  >
+                    <Edit className="w-4 h-4 mr-1" />
+                    {t("fileManager.edit")}
+                  </Button>
+                  <Button
+                    variant={!markdownEditMode ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setMarkdownEditMode(false)}
+                  >
+                    <Eye className="w-4 h-4 mr-1" />
+                    {t("fileManager.preview")}
+                  </Button>
+                </div>
+                <div className="flex items-center gap-2"></div>
+              </div>
+            </div>
+
+            <div className="flex-1 flex overflow-hidden">
+              {markdownEditMode ? (
+                <>
+                  <div className="flex-1 border-r border-border">
+                    <div className="h-full p-4 bg-background">
+                      <textarea
+                        value={editedContent}
+                        onChange={(e) => {
+                          setEditedContent(e.target.value);
+                          onContentChange?.(e.target.value);
+                        }}
+                        className="w-full h-full resize-none border-0 bg-transparent text-foreground font-mono text-sm leading-relaxed focus:outline-none focus:ring-0"
+                        placeholder={t("fileManager.startWritingMarkdown")}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-auto thin-scrollbar bg-muted/10">
+                    <div className="p-4">
+                      <Suspense
+                        fallback={
+                          <PreviewFallback label="Loading preview..." />
+                        }
+                      >
+                        <MarkdownRenderer
+                          compact
+                          content={editedContent || "Nothing to preview yet..."}
+                        />
+                      </Suspense>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className="flex-1 overflow-auto thin-scrollbar p-6">
+                  <div className="max-w-4xl mx-auto">
+                    <Suspense
+                      fallback={<PreviewFallback label="Loading preview..." />}
+                    >
+                      <MarkdownRenderer content={editedContent} />
+                    </Suspense>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {fileTypeInfo.type === "pdf" && !showLargeFileWarning && (
+          <Suspense
+            fallback={<PreviewFallback label="Loading PDF viewer..." />}
+          >
+            <PdfPreview
+              content={content}
+              onDownload={onDownload}
+              onMediaDimensionsChange={onMediaDimensionsChange}
+            />
+          </Suspense>
+        )}
+
+        {fileTypeInfo.type === "audio" && !showLargeFileWarning && (
+          <Suspense
+            fallback={<PreviewFallback label="Loading audio player..." />}
+          >
+            <AudioPreview
+              file={file}
+              content={content}
+              color={fileTypeInfo.color}
+              onMediaDimensionsChange={onMediaDimensionsChange}
+            />
+          </Suspense>
+        )}
+
+        {fileTypeInfo.type === "unknown" &&
+          !shouldShowAsText &&
+          !showLargeFileWarning && (
+            <div className="h-full flex items-center justify-center">
+              <div className="text-center text-muted-foreground">
+                <AlertCircle className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
+                <h3 className="text-lg font-medium mb-2">
+                  {t("fileManager.cannotPreviewType")}
+                </h3>
+                <p className="text-sm mb-4">
+                  {t("fileManager.cannotPreviewTypeHint")}
+                </p>
+                {onDownload && (
+                  <Button
+                    variant="outline"
+                    onClick={onDownload}
+                    className="flex items-center gap-2 mx-auto"
+                  >
+                    <Download className="w-4 h-4" />
+                    {t("fileManager.downloadFile")}
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+      </div>
+
+      <div className="flex-shrink-0 bg-muted/50 border-t border-border px-4 py-2 text-xs text-muted-foreground">
+        <div className="flex justify-between items-center">
+          <span>{file.path}</span>
+          {hasChanges && (
+            <span className="text-orange-600 font-medium">
+              ● Unsaved changes
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/FileWindow.tsx

@@ -0,0 +1,604 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect, useRef } from "react";
+import { DraggableWindow } from "./DraggableWindow.tsx";
+import { FileViewer } from "./FileViewer.tsx";
+import { useWindowManager } from "./WindowManager.tsx";
+import {
+  downloadSSHFileStream,
+  readSSHFile,
+  writeSSHFile,
+  getSSHStatus,
+  connectSSH,
+  setSudoPassword,
+} from "../api/ssh-file-operations-api";
+import { SudoPasswordDialog } from "../SudoPasswordDialog.tsx";
+import { toast } from "sonner";
+import { DownloadProgressToast } from "./DownloadProgressToast";
+import type { SSHHost } from "../host-types";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+
+interface FileItem {
+  name: string;
+  type: "file" | "directory" | "link";
+  path: string;
+  size?: number;
+  modified?: string;
+  permissions?: string;
+  owner?: string;
+  group?: string;
+}
+
+interface FileWindowProps {
+  windowId: string;
+  file: FileItem;
+  sshSessionId: string;
+  sshHost: SSHHost;
+  initialX?: number;
+  initialY?: number;
+  onFileNotFound?: (file: FileItem) => void;
+}
+
+function isDisplayableText(str: string): boolean {
+  let printable = 0;
+  for (let i = 0; i < Math.min(str.length, 1000); i++) {
+    const code = str.charCodeAt(i);
+    if (
+      (code >= 32 && code <= 126) ||
+      code === 9 ||
+      code === 10 ||
+      code === 13 ||
+      code >= 128
+    ) {
+      printable++;
+    }
+  }
+  return printable / Math.min(str.length, 1000) > 0.85;
+}
+
+export function FileWindow({
+  windowId,
+  file,
+  sshSessionId,
+  sshHost,
+  initialX = 100,
+  initialY = 100,
+  onFileNotFound,
+}: FileWindowProps) {
+  const { closeWindow, maximizeWindow, focusWindow, windows } =
+    useWindowManager();
+
+  const { t } = useTranslation();
+
+  const [content, setContent] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isEditable, setIsEditable] = useState(false);
+  const [pendingContent, setPendingContent] = useState<string>("");
+  const [resetKey, setResetKey] = useState(0);
+  const [mediaDimensions, setMediaDimensions] = useState<
+    { width: number; height: number } | undefined
+  >();
+  const [externalEditorPath, setExternalEditorPath] = useState<string>("");
+  const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const externalEditorRef = useRef<{
+    editId: string;
+    unsubscribe?: () => void;
+  } | null>(null);
+
+  const currentWindow = windows.find((w) => w.id === windowId);
+
+  useEffect(() => {
+    if (!window.electronAPI?.isElectron) return;
+
+    window.electronAPI
+      .getSetting?.("fileManager.externalEditorPath")
+      .then((value) => {
+        if (typeof value === "string") setExternalEditorPath(value);
+      })
+      .catch(() => {});
+  }, []);
+
+  const ensureSSHConnection = async () => {
+    try {
+      const status = await getSSHStatus(sshSessionId);
+
+      if (!status.connected) {
+        await connectSSH(sshSessionId, {
+          hostId: sshHost.id,
+          ip: sshHost.ip,
+          port: sshHost.port,
+          username: sshHost.username,
+          password: sshHost.password,
+          sshKey: sshHost.key,
+          keyPassword: sshHost.keyPassword,
+          authType: sshHost.authType,
+          credentialId: sshHost.credentialId,
+          userId: sshHost.userId,
+        });
+      }
+    } catch (error) {
+      console.error("SSH connection check/reconnect failed:", error);
+      throw error;
+    }
+  };
+
+  useEffect(() => {
+    const loadFileContent = async () => {
+      if (file.type !== "file") return;
+
+      try {
+        setIsLoading(true);
+
+        await ensureSSHConnection();
+
+        const response = await readSSHFile(sshSessionId, file.path);
+        let fileContent = response.content || "";
+
+        if (response.encoding === "base64") {
+          try {
+            const bytes = Uint8Array.from(atob(fileContent), (c) =>
+              c.charCodeAt(0),
+            );
+            const decoded = new TextDecoder("utf-8").decode(bytes);
+            if (isDisplayableText(decoded)) {
+              fileContent = decoded;
+            }
+          } catch (err) {
+            console.error("Failed to decode base64 content:", err);
+          }
+        }
+
+        setContent(fileContent);
+        setPendingContent(fileContent);
+        setResetKey((k) => k + 1);
+
+        if (!file.size) {
+          const contentSize = new Blob([fileContent]).size;
+          file.size = contentSize;
+        }
+
+        const mediaExtensions = [
+          "jpg",
+          "jpeg",
+          "png",
+          "gif",
+          "bmp",
+          "svg",
+          "webp",
+          "tiff",
+          "ico",
+          "mp3",
+          "wav",
+          "ogg",
+          "aac",
+          "flac",
+          "m4a",
+          "wma",
+          "mp4",
+          "avi",
+          "mov",
+          "wmv",
+          "flv",
+          "mkv",
+          "webm",
+          "m4v",
+          "zip",
+          "rar",
+          "7z",
+          "tar",
+          "gz",
+          "bz2",
+          "xz",
+          "exe",
+          "dll",
+          "so",
+          "dylib",
+          "bin",
+          "iso",
+        ];
+
+        const extension = file.name.split(".").pop()?.toLowerCase();
+        setIsEditable(!mediaExtensions.includes(extension || ""));
+      } catch (error: unknown) {
+        console.error("Failed to load file:", error);
+
+        const err = error as {
+          message?: string;
+          isFileNotFound?: boolean;
+          response?: {
+            status?: number;
+            data?: {
+              tooLarge?: boolean;
+              error?: string;
+              fileNotFound?: boolean;
+            };
+          };
+        };
+        const errorData = err?.response?.data;
+        if (errorData?.tooLarge) {
+          toast.error(
+            t("fileManager.fileTooLarge", { error: errorData.error }),
+            {
+              duration: 10000,
+            },
+          );
+        } else if (
+          err.message?.includes("connection") ||
+          err.message?.includes("established")
+        ) {
+          toast.error(
+            `SSH connection failed. Please check your connection to ${sshHost.name} (${sshHost.ip}:${sshHost.port})`,
+          );
+        } else {
+          const errorMessage =
+            errorData?.error || err.message || "Unknown error";
+          const isFileNotFound =
+            err.isFileNotFound ||
+            errorData?.fileNotFound ||
+            err.response?.status === 404 ||
+            errorMessage.includes("File not found") ||
+            errorMessage.includes("No such file or directory") ||
+            errorMessage.includes("cannot access") ||
+            errorMessage.includes("not found") ||
+            errorMessage.includes("Resource not found");
+
+          if (isFileNotFound && onFileNotFound) {
+            onFileNotFound(file);
+            toast.error(
+              t("fileManager.fileNotFoundAndRemoved", { name: file.name }),
+            );
+
+            closeWindow(windowId);
+            return;
+          } else {
+            toast.error(
+              t("fileManager.failedToLoadFile", {
+                error: errorMessage.includes("Server error occurred")
+                  ? t("fileManager.serverErrorOccurred")
+                  : errorMessage,
+              }),
+            );
+          }
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadFileContent();
+  }, [file, sshSessionId, sshHost]);
+
+  const handleRevert = async () => {
+    const loadFileContent = async () => {
+      if (file.type !== "file") return;
+
+      try {
+        setIsLoading(true);
+
+        await ensureSSHConnection();
+
+        const response = await readSSHFile(sshSessionId, file.path, {
+          force: true,
+        });
+        const fileContent = response.content || "";
+        setContent(fileContent);
+        setPendingContent("");
+        setResetKey((k) => k + 1);
+
+        if (!file.size) {
+          const contentSize = new Blob([fileContent]).size;
+          file.size = contentSize;
+        }
+      } catch (error: unknown) {
+        console.error("Failed to load file content:", error);
+        const err = error as { message?: string };
+        toast.error(
+          `${t("fileManager.failedToLoadFile")}: ${err.message || t("fileManager.unknownError")}`,
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadFileContent();
+  };
+
+  const [sudoSaveContent, setSudoSaveContent] = useState<string | null>(null);
+
+  const handleSudoSave = async (password: string) => {
+    const pending = sudoSaveContent;
+    setSudoSaveContent(null);
+    if (pending === null) return;
+    try {
+      await setSudoPassword(sshSessionId, password);
+    } catch {
+      toast.error(t("fileManager.sudoAuthFailed"));
+      return;
+    }
+    await handleSave(pending);
+  };
+
+  const handleSave = async (newContent: string) => {
+    try {
+      setIsSaving(true);
+
+      await ensureSSHConnection();
+
+      await writeSSHFile(sshSessionId, file.path, newContent);
+      setContent(newContent);
+      setPendingContent("");
+
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+        autoSaveTimerRef.current = null;
+      }
+
+      toast.success(t("fileManager.fileSavedSuccessfully"));
+    } catch (error: unknown) {
+      console.error("Failed to save file:", error);
+
+      const err = error as {
+        message?: string;
+        response?: { data?: { needsSudo?: boolean } };
+      };
+      if (err.response?.data?.needsSudo) {
+        setSudoSaveContent(newContent);
+      } else if (
+        err.message?.includes("connection") ||
+        err.message?.includes("established")
+      ) {
+        toast.error(
+          t("fileManager.sshConnectionFailed", {
+            name: sshHost.name,
+            ip: sshHost.ip,
+            port: sshHost.port,
+          }),
+        );
+      } else {
+        toast.error(
+          `${t("fileManager.failedToSaveFile")}: ${err.message || t("fileManager.unknownError")}`,
+        );
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const closeExternalEditor = async () => {
+    const session = externalEditorRef.current;
+    if (!session) return;
+
+    session.unsubscribe?.();
+    externalEditorRef.current = null;
+
+    try {
+      await window.electronAPI?.closeExternalEditor?.(session.editId);
+    } catch (error) {
+      console.error("Failed to close external editor session:", error);
+    }
+  };
+
+  const handleOpenExternalEditor = async () => {
+    if (!window.electronAPI?.isElectron) {
+      toast.error(t("fileManager.externalEditorDesktopOnly"));
+      return;
+    }
+
+    try {
+      await closeExternalEditor();
+      const result = await window.electronAPI.openExternalEditor({
+        fileName: file.name,
+        content: pendingContent || content,
+        encoding: "utf8",
+        editorPath: externalEditorPath || null,
+      });
+
+      if (!result.success || !result.editId) {
+        throw new Error(result.error || "Failed to open external editor");
+      }
+
+      const unsubscribe = window.electronAPI.onExternalEditorSaved?.(
+        (payload) => {
+          if (payload.editId !== result.editId) return;
+          void handleSave(payload.content);
+        },
+      );
+
+      externalEditorRef.current = {
+        editId: result.editId,
+        unsubscribe,
+      };
+      toast.success(t("fileManager.externalEditorOpened"));
+    } catch (error: unknown) {
+      console.error("Failed to open external editor:", error);
+      const err = error as { message?: string };
+      toast.error(
+        `${t("fileManager.failedToOpenExternalEditor")}: ${
+          err.message || t("fileManager.unknownError")
+        }`,
+      );
+    }
+  };
+
+  const handleChooseExternalEditor = async () => {
+    if (!window.electronAPI?.isElectron) {
+      toast.error(t("fileManager.externalEditorDesktopOnly"));
+      return;
+    }
+
+    try {
+      const result = await window.electronAPI.showOpenDialog({
+        title: t("fileManager.chooseExternalEditor"),
+        properties: ["openFile"],
+      });
+      const editorPath = result.filePaths?.[0];
+      if (result.canceled || !editorPath) return;
+
+      await window.electronAPI.setSetting?.(
+        "fileManager.externalEditorPath",
+        editorPath,
+      );
+      setExternalEditorPath(editorPath);
+      toast.success(t("fileManager.externalEditorSelected"));
+    } catch (error: unknown) {
+      console.error("Failed to select external editor:", error);
+      const err = error as { message?: string };
+      toast.error(
+        `${t("fileManager.failedToSelectExternalEditor")}: ${
+          err.message || t("fileManager.unknownError")
+        }`,
+      );
+    }
+  };
+
+  const handleContentChange = (newContent: string) => {
+    setPendingContent(newContent);
+
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+      autoSaveTimerRef.current = null;
+    }
+
+    if (newContent !== content) {
+      autoSaveTimerRef.current = setTimeout(async () => {
+        try {
+          await handleSave(newContent);
+          toast.success(t("fileManager.fileAutoSaved"));
+        } catch (error) {
+          console.error("Auto-save failed:", error);
+          toast.error(t("fileManager.autoSaveFailed"));
+        }
+      }, 60000);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+      }
+      void closeExternalEditor();
+    };
+  }, []);
+
+  const handleDownload = async () => {
+    const toastId = toast.loading(
+      <DownloadProgressToast fileName={file.name} loaded={0} />,
+      { duration: Infinity },
+    );
+    try {
+      await ensureSSHConnection();
+
+      await downloadSSHFileStream(
+        sshSessionId,
+        file.path,
+        ({ loaded, total }) => {
+          toast.loading(
+            <DownloadProgressToast
+              fileName={file.name}
+              loaded={loaded}
+              total={total}
+            />,
+            { id: toastId, duration: Infinity },
+          );
+        },
+      );
+      toast.success(
+        t("fileManager.fileDownloadedSuccessfully", { name: file.name }),
+        { id: toastId, duration: undefined },
+      );
+    } catch (error: unknown) {
+      console.error("Failed to download file:", error);
+
+      const err = error as { message?: string };
+      if (
+        err.message?.includes("connection") ||
+        err.message?.includes("established")
+      ) {
+        toast.error(
+          `SSH connection failed. Please check your connection to ${sshHost.name} (${sshHost.ip}:${sshHost.port})`,
+          { id: toastId, duration: undefined },
+        );
+      } else {
+        toast.error(
+          `Failed to download file: ${err.message || "Unknown error"}`,
+          { id: toastId, duration: undefined },
+        );
+      }
+    }
+  };
+
+  const handleClose = () => {
+    void closeExternalEditor();
+    closeWindow(windowId);
+  };
+
+  const handleMaximize = () => {
+    maximizeWindow(windowId);
+  };
+
+  const handleFocus = () => {
+    focusWindow(windowId);
+  };
+
+  const handleMediaDimensionsChange = (dimensions: {
+    width: number;
+    height: number;
+  }) => {
+    setMediaDimensions(dimensions);
+  };
+
+  if (!currentWindow) {
+    return null;
+  }
+
+  return (
+    <DraggableWindow
+      title={file.name}
+      initialX={initialX}
+      initialY={initialY}
+      initialWidth={800}
+      initialHeight={600}
+      minWidth={400}
+      minHeight={300}
+      onClose={handleClose}
+      onMaximize={handleMaximize}
+      onFocus={handleFocus}
+      isMaximized={currentWindow.isMaximized}
+      zIndex={currentWindow.zIndex}
+      targetSize={mediaDimensions}
+    >
+      <FileViewer
+        file={file}
+        content={pendingContent || content}
+        savedContent={content}
+        isLoading={isLoading}
+        isSaving={isSaving}
+        resetKey={resetKey}
+        onRevert={handleRevert}
+        isEditable={isEditable}
+        onContentChange={handleContentChange}
+        onSave={(newContent) => handleSave(newContent)}
+        onDownload={handleDownload}
+        onOpenExternal={
+          window.electronAPI?.isElectron && isEditable
+            ? handleOpenExternalEditor
+            : undefined
+        }
+        onChooseExternalEditor={
+          window.electronAPI?.isElectron && isEditable
+            ? handleChooseExternalEditor
+            : undefined
+        }
+        onMediaDimensionsChange={handleMediaDimensionsChange}
+      />
+      <SudoPasswordDialog
+        open={sudoSaveContent !== null}
+        onOpenChange={(open) => {
+          if (!open) setSudoSaveContent(null);
+        }}
+        onSubmit={(password) => void handleSudoSave(password)}
+      />
+    </DraggableWindow>
+  );
+}

plugins/file-manager/src/frontend/components/FolderTree.tsx

@@ -0,0 +1,668 @@
+"use client";
+import React, {
+  useState,
+  useCallback,
+  createContext,
+  useContext,
+  useRef,
+  useEffect,
+} from "react";
+import {
+  motion,
+  AnimatePresence,
+  easeInOut,
+  type Variants,
+} from "motion/react";
+import {
+  ChevronRight,
+  Folder,
+  FolderOpen,
+  File,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@termix/plugin-sdk/ui";
+
+const animationVariants: Variants = {
+  rootInitial: { opacity: 0, y: 20 },
+  rootAnimate: { opacity: 1, y: 0 },
+  itemInitial: { opacity: 0, x: -10 },
+  itemAnimate: { opacity: 1, x: 0 },
+  contentHidden: { opacity: 0, height: 0 },
+  contentVisible: { opacity: 1, height: "auto" },
+  chevronClosed: { rotate: 0 },
+  chevronOpen: { rotate: 90 },
+};
+
+const transitions = {
+  root: { duration: 0.4 },
+  item: { duration: 0.2 },
+  content: { duration: 0.3, ease: easeInOut },
+  chevron: { duration: 0.2 },
+};
+
+interface ExpansionContextType {
+  expandedIds: Set<string>;
+  toggleExpanded: (id: string) => void;
+}
+
+interface SelectionContextType {
+  selectedId: string | null;
+  setSelected: (id: string) => void;
+  onSelect?: (id: string, label: string) => void;
+}
+
+interface TreeContextType {
+  focusedId: string | null;
+  setFocusedId: (id: string | null) => void;
+  treeId: string;
+  setKeyboardMode: (mode: boolean) => void;
+  keyboardMode: boolean;
+}
+
+interface LevelContextType {
+  level: number;
+}
+
+const ExpansionContext = createContext<ExpansionContextType | null>(null);
+const SelectionContext = createContext<SelectionContextType | null>(null);
+const TreeContext = createContext<TreeContextType | null>(null);
+const LevelContext = createContext<LevelContextType>({ level: 0 });
+
+const useExpansion = () => {
+  const context = useContext(ExpansionContext);
+  if (!context) {
+    throw new Error(
+      "FolderTree components must be used within FolderTree.Root",
+    );
+  }
+  return context;
+};
+
+const useSelection = () => {
+  const context = useContext(SelectionContext);
+  if (!context) {
+    throw new Error(
+      "FolderTree components must be used within FolderTree.Root",
+    );
+  }
+  return context;
+};
+
+const useTree = () => {
+  const context = useContext(TreeContext);
+  if (!context) {
+    throw new Error(
+      "FolderTree components must be used within FolderTree.Root",
+    );
+  }
+  return context;
+};
+
+const useLevel = () => {
+  return useContext(LevelContext);
+};
+
+const getPaddingClass = (level: number): string => {
+  const paddingMap: Record<number, string> = {
+    0: "pl-3",
+    1: "pl-8",
+    2: "pl-12",
+    3: "pl-16",
+    4: "pl-20",
+    5: "pl-24",
+    6: "pl-28",
+    7: "pl-32",
+  };
+  return paddingMap[level] || `pl-[${Math.min(level * 4 + 12, 48)}px]`;
+};
+
+interface CustomBadge {
+  content: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
+
+interface RootProps {
+  defaultExpanded?: string[];
+  defaultSelected?: string;
+  selectedId?: string | null;
+  expandedIds?: Set<string>;
+  onSelect?: (id: string, label: string) => void;
+  className?: string;
+  children: React.ReactNode;
+  id?: string;
+}
+
+interface ItemProps {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+  badge?: string | number;
+  modified?: boolean | CustomBadge;
+  untracked?: boolean | CustomBadge;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+interface TriggerProps {
+  className?: string;
+}
+
+interface ContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Root: React.FC<RootProps> = ({
+  defaultExpanded = [],
+  defaultSelected,
+  selectedId: controlledSelectedId,
+  expandedIds: additionalExpandedIds,
+  onSelect,
+  className = "",
+  children,
+  id = "folder-tree",
+}) => {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    new Set(defaultExpanded),
+  );
+  const [internalSelectedId, setInternalSelectedId] = useState<string | null>(
+    defaultSelected || null,
+  );
+  const selectedId =
+    controlledSelectedId !== undefined
+      ? controlledSelectedId
+      : internalSelectedId;
+  const [focusedId, setFocusedId] = useState<string | null>(null);
+  const [keyboardMode, setKeyboardMode] = useState(false);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!additionalExpandedIds || additionalExpandedIds.size === 0) return;
+    setExpandedIds((prev) => {
+      const merged = new Set(prev);
+      let changed = false;
+      for (const id of additionalExpandedIds) {
+        if (!merged.has(id)) {
+          merged.add(id);
+          changed = true;
+        }
+      }
+      return changed ? merged : prev;
+    });
+  }, [additionalExpandedIds]);
+
+  const toggleExpanded = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const setSelected = useCallback((id: string) => {
+    setInternalSelectedId(id);
+  }, []);
+
+  const getVisibleItemIds = useCallback(() => {
+    const items = Array.from(
+      treeRef.current?.querySelectorAll('[role="treeitem"]') || [],
+    );
+    return items
+      .filter((item) => {
+        const element = item as HTMLElement;
+        return element.offsetHeight > 0 && element.offsetWidth > 0;
+      })
+      .map((item) => item.getAttribute("data-id"))
+      .filter(Boolean) as string[];
+  }, []);
+
+  const [treeHasFocus, setTreeHasFocus] = useState(false);
+
+  const handleTreeFocus = useCallback(() => {
+    if (!treeHasFocus) {
+      setTreeHasFocus(true);
+      setKeyboardMode(true);
+    }
+  }, [treeHasFocus]);
+
+  const handleTreeBlur = useCallback((e: React.FocusEvent) => {
+    if (!treeRef.current?.contains(e.relatedTarget as Node)) {
+      setTreeHasFocus(false);
+      setFocusedId(null);
+      setKeyboardMode(false);
+    }
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const getVisibleItems = () => {
+        return Array.from(
+          treeRef.current?.querySelectorAll('[role="treeitem"]') || [],
+        ).filter((item) => {
+          const element = item as HTMLElement;
+          return element.offsetHeight > 0 && element.offsetWidth > 0;
+        });
+      };
+
+      if (e.key === "Tab") {
+        if (treeHasFocus && !focusedId) {
+          const visibleItemIds = getVisibleItemIds();
+          if (visibleItemIds.length > 0) {
+            setFocusedId(visibleItemIds[0]);
+            e.preventDefault();
+            return;
+          }
+        }
+
+        if (focusedId) {
+          const visibleItems = getVisibleItems();
+          const currentIndex = visibleItems.findIndex(
+            (item) => item.getAttribute("data-id") === focusedId,
+          );
+
+          if (e.shiftKey) {
+            if (currentIndex === 0) {
+              setFocusedId(null);
+              setTreeHasFocus(false);
+              setKeyboardMode(false);
+              return;
+            }
+            const nextIndex = Math.max(0, currentIndex - 1);
+            const nextItem = visibleItems[nextIndex] as HTMLElement;
+            const nextId = nextItem?.getAttribute("data-id");
+            if (nextId) {
+              setFocusedId(nextId);
+              e.preventDefault();
+            }
+          } else {
+            if (currentIndex === visibleItems.length - 1) {
+              setFocusedId(null);
+              setTreeHasFocus(false);
+              setKeyboardMode(false);
+              return;
+            }
+            const nextIndex = Math.min(
+              visibleItems.length - 1,
+              currentIndex + 1,
+            );
+            const nextItem = visibleItems[nextIndex] as HTMLElement;
+            const nextId = nextItem?.getAttribute("data-id");
+            if (nextId) {
+              setFocusedId(nextId);
+              e.preventDefault();
+            }
+          }
+        }
+        return;
+      }
+
+      if (!keyboardMode || !focusedId) return;
+
+      const visibleItems = getVisibleItems();
+      const currentIndex = visibleItems.findIndex(
+        (item) => item.getAttribute("data-id") === focusedId,
+      );
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (currentIndex < visibleItems.length - 1) {
+            const nextItem = visibleItems[currentIndex + 1] as HTMLElement;
+            const nextId = nextItem.getAttribute("data-id");
+            if (nextId) setFocusedId(nextId);
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (currentIndex > 0) {
+            const prevItem = visibleItems[currentIndex - 1] as HTMLElement;
+            const prevId = prevItem.getAttribute("data-id");
+            if (prevId) setFocusedId(prevId);
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (!expandedIds.has(focusedId)) {
+            toggleExpanded(focusedId);
+          }
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (expandedIds.has(focusedId)) {
+            toggleExpanded(focusedId);
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          setSelected(focusedId);
+          if (onSelect) {
+            const currentItem = visibleItems[currentIndex] as HTMLElement;
+            const label =
+              currentItem.querySelector("span:nth-of-type(2)")?.textContent ||
+              "";
+            onSelect(focusedId, label);
+          }
+          break;
+      }
+    },
+    [
+      focusedId,
+      keyboardMode,
+      expandedIds,
+      toggleExpanded,
+      setSelected,
+      onSelect,
+      getVisibleItemIds,
+      treeHasFocus,
+    ],
+  );
+
+  useEffect(() => {
+    const handleMouseDown = () => setKeyboardMode(false);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
+
+  const expansionValue: ExpansionContextType = {
+    expandedIds,
+    toggleExpanded,
+  };
+
+  const selectionValue: SelectionContextType = {
+    selectedId,
+    setSelected,
+    onSelect,
+  };
+
+  const treeValue: TreeContextType = {
+    focusedId,
+    setFocusedId,
+    treeId: id,
+    setKeyboardMode,
+    keyboardMode,
+  };
+
+  return (
+    <ExpansionContext.Provider value={expansionValue}>
+      <SelectionContext.Provider value={selectionValue}>
+        <TreeContext.Provider value={treeValue}>
+          <LevelContext.Provider value={{ level: 0 }}>
+            <motion.div
+              ref={treeRef}
+              variants={animationVariants}
+              initial="rootInitial"
+              animate="rootAnimate"
+              transition={transitions.root}
+              className={cn(
+                "bg-canvas border border-edge rounded-lg overflow-hidden",
+                className,
+              )}
+              role="tree"
+              aria-labelledby={`${id}-label`}
+              tabIndex={0}
+              onKeyDown={handleKeyDown}
+              onFocus={handleTreeFocus}
+              onBlur={handleTreeBlur}
+            >
+              <div className="w-full overflow-y-auto bg-canvas text-sm">
+                {children}
+              </div>
+            </motion.div>
+          </LevelContext.Provider>
+        </TreeContext.Provider>
+      </SelectionContext.Provider>
+    </ExpansionContext.Provider>
+  );
+};
+
+const ItemContext = createContext<{
+  itemId: string;
+  hasChildren: boolean;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+} | null>(null);
+
+const Item: React.FC<ItemProps> = ({
+  id,
+  label,
+  icon,
+  badge,
+  modified,
+  untracked,
+  className = "",
+  children,
+}) => {
+  const expansionContext = useExpansion();
+  const selectionContext = useSelection();
+  const treeContext = useTree();
+  const { level } = useLevel();
+  const itemRef = useRef<HTMLDivElement>(null);
+  const keyboardMode = treeContext.keyboardMode;
+
+  const hasChildren = React.Children.count(children) > 0;
+  const isExpanded = expansionContext.expandedIds.has(id);
+  const isSelected = selectionContext.selectedId === id;
+  const isFocused = treeContext.focusedId === id;
+
+  const handleItemClick = useCallback(() => {
+    treeContext.setKeyboardMode(false);
+    selectionContext.setSelected(id);
+    treeContext.setFocusedId(id);
+    if (selectionContext.onSelect) {
+      selectionContext.onSelect(id, label);
+    }
+  }, [id, label, selectionContext, treeContext]);
+
+  const toggleExpanded = useCallback(() => {
+    if (hasChildren) {
+      expansionContext.toggleExpanded(id);
+    }
+  }, [id, hasChildren, expansionContext]);
+
+  const handleFocus = useCallback(() => {
+    treeContext.setFocusedId(id);
+  }, [id, treeContext]);
+
+  useEffect(() => {
+    if (isFocused && itemRef.current) {
+      itemRef.current.focus();
+    }
+  }, [isFocused]);
+
+  const IconComponent =
+    icon || (hasChildren ? (isExpanded ? FolderOpen : Folder) : File);
+
+  const itemContextValue = {
+    itemId: id,
+    hasChildren,
+    isExpanded,
+    toggleExpanded,
+  };
+
+  const renderBadge = (
+    badgeData: boolean | CustomBadge | undefined,
+    defaultContent: string,
+    defaultClassName: string,
+  ) => {
+    if (!badgeData) return null;
+
+    if (typeof badgeData === "boolean") {
+      return (
+        <span
+          className={defaultClassName}
+          aria-label={`${defaultContent} status`}
+        >
+          {defaultContent}
+        </span>
+      );
+    }
+
+    return (
+      <span
+        className={cn(
+          "ml-auto text-xs px-2 py-0.5 rounded-full",
+          badgeData.className,
+        )}
+        aria-label={badgeData.ariaLabel || `Custom badge: ${badgeData.content}`}
+      >
+        {badgeData.content}
+      </span>
+    );
+  };
+
+  return (
+    <ItemContext.Provider value={itemContextValue}>
+      <LevelContext.Provider value={{ level: level + 1 }}>
+        <div>
+          <motion.div
+            ref={itemRef}
+            variants={animationVariants}
+            initial="itemInitial"
+            animate="itemAnimate"
+            transition={{ ...transitions.item, delay: level * 0.05 }}
+            data-selected={isSelected ? "true" : "false"}
+            data-id={id}
+            className={cn(
+              "flex items-center gap-2 py-1.5 text-sm transition-colors cursor-pointer select-none",
+              getPaddingClass(level),
+              className,
+              isSelected
+                ? "bg-accent text-accent-foreground border-r-2 border-ring"
+                : "",
+              !isSelected && "hover:bg-hover",
+              keyboardMode && isFocused
+                ? "focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-inset"
+                : "focus:outline-hidden",
+            )}
+            onClick={(e: React.MouseEvent) => {
+              handleItemClick();
+              e.stopPropagation();
+              toggleExpanded();
+            }}
+            onFocus={handleFocus}
+            role="treeitem"
+            tabIndex={isFocused ? 0 : -1}
+            aria-expanded={hasChildren ? isExpanded : undefined}
+            aria-selected={isSelected}
+            aria-label={`${hasChildren ? "Folder" : "File"}: ${label}`}
+            aria-level={level + 1}
+          >
+            {hasChildren && (
+              <motion.span
+                className="shrink-0 cursor-pointer"
+                variants={animationVariants}
+                animate={isExpanded ? "chevronOpen" : "chevronClosed"}
+                transition={transitions.chevron}
+                aria-hidden="true"
+              >
+                <ChevronRight size={14} className="text-muted-foreground" />
+              </motion.span>
+            )}
+            {!hasChildren && <span className="w-3 mr-2" aria-hidden="true" />}
+            {IconComponent && (
+              <IconComponent
+                size={16}
+                data-selected={isSelected ? "true" : "false"}
+                data-child={hasChildren ? "true" : "false"}
+                className={cn(
+                  "mr-1 shrink-0 text-muted-foreground data-[child=true]:text-primary data-[selected=true]:text-accent-foreground",
+                )}
+                aria-hidden="true"
+              />
+            )}
+            <span className="flex-1">{label}</span>
+            {badge && (
+              <span
+                className="ml-auto text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded-full"
+                aria-label={`Badge: ${badge}`}
+              >
+                {badge}
+              </span>
+            )}
+            {renderBadge(
+              modified,
+              "M",
+              "ml-auto text-xs bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded-full",
+            )}
+            {renderBadge(
+              untracked,
+              "U",
+              "ml-auto text-xs bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full",
+            )}
+          </motion.div>
+          {children}
+        </div>
+      </LevelContext.Provider>
+    </ItemContext.Provider>
+  );
+};
+
+const Trigger: React.FC<TriggerProps> = ({ className = "" }) => {
+  const itemContext = useContext(ItemContext);
+  if (!itemContext || !itemContext.hasChildren) {
+    return null;
+  }
+
+  return (
+    <motion.span
+      className={cn("mr-2 shrink-0 cursor-pointer", className)}
+      variants={animationVariants}
+      animate={itemContext.isExpanded ? "chevronOpen" : "chevronClosed"}
+      transition={transitions.chevron}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation();
+        itemContext.toggleExpanded();
+      }}
+      role="button"
+      aria-label={itemContext.isExpanded ? "Collapse" : "Expand"}
+      tabIndex={-1}
+    >
+      <ChevronRight size={14} className="text-muted-foreground" />
+    </motion.span>
+  );
+};
+
+const Content: React.FC<ContentProps> = ({ children, className = "" }) => {
+  const itemContext = useContext(ItemContext);
+  if (!itemContext) {
+    return <>{children}</>;
+  }
+
+  const hasContent = React.Children.count(children) > 0;
+
+  return (
+    <AnimatePresence>
+      {hasContent && itemContext.isExpanded && (
+        <motion.div
+          variants={animationVariants}
+          initial="contentHidden"
+          animate="contentVisible"
+          exit="contentHidden"
+          transition={transitions.content}
+          style={{ overflow: "hidden" }}
+          className={className}
+          role="group"
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+const FolderTree = {
+  Root,
+  Item,
+  Trigger,
+  Content,
+};
+
+export default FolderTree;

plugins/file-manager/src/frontend/components/ImagePreview.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import "react-photo-view/dist/react-photo-view.css";
+import { AlertCircle, Download } from "lucide-react";
+import { Button } from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+
+interface ImagePreviewProps {
+  content: string;
+  fileName: string;
+  onDownload?: () => void;
+  onMediaDimensionsChange?: (dimensions: {
+    width: number;
+    height: number;
+  }) => void;
+}
+
+function getImageDataUrl(content: string, fileName: string): string {
+  const ext = fileName.split(".").pop()?.toLowerCase() || "";
+
+  const mimeTypes: Record<string, string> = {
+    svg: "image/svg+xml",
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+    bmp: "image/bmp",
+    ico: "image/x-icon",
+    tiff: "image/tiff",
+    tif: "image/tiff",
+  };
+
+  const mimeType = mimeTypes[ext] || "image/png";
+  return `data:${mimeType};base64,${content}`;
+}
+
+export function ImagePreview({
+  content,
+  fileName,
+  onDownload,
+  onMediaDimensionsChange,
+}: ImagePreviewProps) {
+  const { t } = useTranslation();
+  const [imageLoadError, setImageLoadError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(true);
+  const imageUrl = getImageDataUrl(content, fileName);
+
+  return (
+    <div className="p-6 flex items-center justify-center h-full relative">
+      {imageLoadError ? (
+        <div className="text-center text-muted-foreground">
+          <AlertCircle className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
+          <h3 className="text-lg font-medium mb-2">
+            {t("fileManager.imageLoadError")}
+          </h3>
+          <p className="text-sm mb-4">{fileName}</p>
+          {onDownload && (
+            <Button
+              variant="outline"
+              onClick={onDownload}
+              className="flex items-center gap-2 mx-auto"
+            >
+              <Download className="w-4 h-4" />
+              {t("fileManager.download")}
+            </Button>
+          )}
+        </div>
+      ) : (
+        <PhotoProvider maskOpacity={0.7}>
+          <PhotoView src={imageUrl}>
+            <img
+              src={imageUrl}
+              alt={fileName}
+              className="max-w-full max-h-full object-contain rounded-lg shadow-sm cursor-pointer hover:shadow-lg transition-shadow"
+              style={{ maxHeight: "calc(100vh - 200px)" }}
+              onLoad={(e) => {
+                setImageLoading(false);
+                setImageLoadError(false);
+
+                const img = e.currentTarget;
+                if (
+                  onMediaDimensionsChange &&
+                  img.naturalWidth &&
+                  img.naturalHeight
+                ) {
+                  onMediaDimensionsChange({
+                    width: img.naturalWidth,
+                    height: img.naturalHeight,
+                  });
+                }
+              }}
+              onError={() => {
+                setImageLoading(false);
+                setImageLoadError(true);
+              }}
+            />
+          </PhotoView>
+        </PhotoProvider>
+      )}
+
+      {imageLoading && !imageLoadError && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
+            <p className="text-sm text-muted-foreground">Loading image...</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/LocalTransferProgressToast.tsx

@@ -0,0 +1,109 @@
+import { Button } from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { formatFileSize } from "../file-manager-utils.ts";
+
+export interface LocalTransferBatchStatus {
+  direction: "upload" | "download";
+  totalFiles: number;
+  completedFiles: number;
+  currentFileName?: string;
+  /** Files being transferred right now (parallel transfers). */
+  activeFiles?: number;
+  bytesDone: number;
+  totalBytes: number;
+  mbPerSec?: number;
+  cancelling?: boolean;
+}
+
+interface LocalTransferProgressToastProps {
+  status: LocalTransferBatchStatus;
+  onCancel?: () => void;
+}
+
+export function LocalTransferProgressToast({
+  status,
+  onCancel,
+}: LocalTransferProgressToastProps) {
+  const { t } = useTranslation();
+  const percent =
+    status.totalBytes > 0
+      ? Math.min(100, Math.round((status.bytesDone / status.totalBytes) * 100))
+      : undefined;
+
+  const title =
+    status.direction === "upload"
+      ? t("fileManager.localUploadingProgress", {
+          current: Math.min(
+            status.completedFiles + Math.max(1, status.activeFiles ?? 1),
+            status.totalFiles,
+          ),
+          total: status.totalFiles,
+        })
+      : t("fileManager.localDownloadingProgress", {
+          current: Math.min(
+            status.completedFiles + Math.max(1, status.activeFiles ?? 1),
+            status.totalFiles,
+          ),
+          total: status.totalFiles,
+        });
+
+  return (
+    <div className="flex w-[min(calc(100vw-5rem),288px)] max-w-full flex-col gap-2 pr-2">
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <p className="text-sm font-medium leading-tight">{title}</p>
+          {status.currentFileName && (
+            <p
+              className="text-xs text-muted-foreground truncate"
+              title={status.currentFileName}
+            >
+              {(status.activeFiles ?? 0) > 1 && (
+                <span className="mr-2.5 text-foreground/70">
+                  {t("fileManager.localTransferInFlight", {
+                    count: status.activeFiles,
+                  })}
+                </span>
+              )}
+              {status.currentFileName}
+            </p>
+          )}
+        </div>
+        {onCancel && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 shrink-0 px-2 text-xs"
+            disabled={status.cancelling}
+            onClick={onCancel}
+          >
+            {status.cancelling
+              ? t("transfer.progressCancelling")
+              : t("transfer.progressCancel")}
+          </Button>
+        )}
+      </div>
+      <div className="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
+        {percent === undefined ? (
+          <div className="bg-primary/60 absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full" />
+        ) : (
+          <div
+            className="bg-primary h-full rounded-full transition-[width]"
+            style={{ width: `${percent}%` }}
+          />
+        )}
+      </div>
+      <div className="flex items-center justify-between gap-3 pr-1 text-xs text-muted-foreground">
+        <span className="min-w-0 truncate">
+          {formatFileSize(status.bytesDone)} /{" "}
+          {formatFileSize(status.totalBytes)}
+        </span>
+        <span className="shrink-0 tabular-nums font-medium text-foreground">
+          {status.mbPerSec !== undefined
+            ? `${status.mbPerSec.toFixed(status.mbPerSec >= 10 ? 0 : 1)} MB/s`
+            : ""}
+        </span>
+      </div>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/MarkdownRenderer.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark as syntaxTheme } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface MarkdownRendererProps {
+  content: string;
+  compact?: boolean;
+}
+
+export function MarkdownRenderer({
+  content,
+  compact = false,
+}: MarkdownRendererProps) {
+  const h1Class = compact
+    ? "text-2xl font-bold mb-4 mt-6 text-foreground border-b border-border pb-2"
+    : "text-3xl font-bold mb-6 mt-8 text-foreground border-b border-border pb-2";
+  const h2Class = compact
+    ? "text-xl font-semibold mb-3 mt-5 text-foreground border-b border-border pb-1"
+    : "text-2xl font-semibold mb-4 mt-6 text-foreground border-b border-border pb-1";
+  const h3Class = compact
+    ? "text-lg font-semibold mb-2 mt-4 text-foreground"
+    : "text-xl font-semibold mb-3 mt-4 text-foreground";
+  const h4Class = compact
+    ? "text-base font-semibold mb-2 mt-3 text-foreground"
+    : "text-lg font-semibold mb-2 mt-3 text-foreground";
+  const pClass = compact
+    ? "mb-3 text-foreground leading-relaxed"
+    : "mb-4 text-foreground leading-relaxed";
+  const listClass = compact
+    ? "mb-3 ml-4 text-foreground"
+    : "mb-4 ml-6 text-foreground";
+  const quoteClass = compact
+    ? "border-l-4 border-blue-500 pl-3 mb-3 italic text-muted-foreground bg-muted/30 py-1"
+    : "border-l-4 border-blue-500 pl-4 mb-4 italic text-muted-foreground bg-muted/30 py-2";
+  const tableWrapClass = compact
+    ? "mb-3 overflow-x-auto thin-scrollbar"
+    : "mb-4 overflow-x-auto thin-scrollbar";
+  const tableClass = compact
+    ? "min-w-full border border-border rounded-lg text-sm"
+    : "min-w-full border border-border rounded-lg";
+  const thClass = compact
+    ? "px-3 py-2 text-left font-semibold text-foreground"
+    : "px-4 py-2 text-left font-semibold text-foreground";
+  const tdClass = compact
+    ? "px-3 py-2 text-foreground"
+    : "px-4 py-2 text-foreground";
+
+  return (
+    <div
+      className="select-text"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        // Keep native text copying out of the file grid's global shortcuts.
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "c")
+          event.stopPropagation();
+      }}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code({ className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            // v9 removed the `inline` flag; a fenced block always carries a
+            // language- class, an inline span never does.
+            const inline = !className;
+            return !inline && match ? (
+              <SyntaxHighlighter
+                style={syntaxTheme}
+                language={match[1]}
+                PreTag="div"
+                className="rounded-lg"
+                {...props}
+              >
+                {String(children).replace(/\n$/, "")}
+              </SyntaxHighlighter>
+            ) : (
+              <code
+                className="bg-muted px-1 py-0.5 rounded text-sm font-mono"
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          },
+          h1: ({ children }) => <h1 className={h1Class}>{children}</h1>,
+          h2: ({ children }) => <h2 className={h2Class}>{children}</h2>,
+          h3: ({ children }) => <h3 className={h3Class}>{children}</h3>,
+          h4: ({ children }) => <h4 className={h4Class}>{children}</h4>,
+          p: ({ children }) => <p className={pClass}>{children}</p>,
+          ul: ({ children }) => (
+            <ul className={`${listClass} list-disc`}>{children}</ul>
+          ),
+          ol: ({ children }) => (
+            <ol className={`${listClass} list-decimal`}>{children}</ol>
+          ),
+          li: ({ children }) => (
+            <li className="mb-1 text-foreground">{children}</li>
+          ),
+          blockquote: ({ children }) => (
+            <blockquote className={quoteClass}>{children}</blockquote>
+          ),
+          table: ({ children }) => (
+            <div className={tableWrapClass}>
+              <table className={tableClass}>{children}</table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-muted">{children}</thead>
+          ),
+          tbody: ({ children }) => <tbody>{children}</tbody>,
+          tr: ({ children }) => (
+            <tr className="border-b border-border">{children}</tr>
+          ),
+          th: ({ children }) => <th className={thClass}>{children}</th>,
+          td: ({ children }) => <td className={tdClass}>{children}</td>,
+          a: ({ href, children }) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-800 underline"
+            >
+              {children}
+            </a>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/PaneResizeHandle.tsx

@@ -0,0 +1,43 @@
+import type React from "react";
+import { cn } from "@termix/plugin-sdk/ui";
+
+interface PaneResizeHandleProps {
+  label: string;
+  onMouseDown: (event: React.MouseEvent) => void;
+  onDoubleClick?: () => void;
+  active?: boolean;
+}
+
+/**
+ * Vertical drag handle placed between two panes in a `gap-3` flex row. It
+ * overlaps the gap (negative margins) so the panes' spacing is unchanged, and
+ * shows a hairline on hover / while dragging. Double-click resets the width.
+ */
+export function PaneResizeHandle({
+  label,
+  onMouseDown,
+  onDoubleClick,
+  active = false,
+}: PaneResizeHandleProps) {
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      title={label}
+      data-pane-resize-handle
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      className="hidden md:block -mx-3 w-3 shrink-0 cursor-col-resize group relative z-10"
+    >
+      <div
+        className={cn(
+          "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors",
+          active
+            ? "bg-accent-brand"
+            : "bg-transparent group-hover:bg-accent-brand/60",
+        )}
+      />
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/PdfPreview.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import { AlertCircle, Download } from "lucide-react";
+import { Button } from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import pdfjsWorkerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
+
+pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorkerUrl;
+
+interface PdfPreviewProps {
+  content: string;
+  onDownload?: () => void;
+  onMediaDimensionsChange?: (dimensions: {
+    width: number;
+    height: number;
+  }) => void;
+}
+
+export function PdfPreview({
+  content,
+  onDownload,
+  onMediaDimensionsChange,
+}: PdfPreviewProps) {
+  const { t } = useTranslation();
+  const [numPages, setNumPages] = useState<number | null>(null);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [pdfScale, setPdfScale] = useState(1.2);
+  const [pdfError, setPdfError] = useState(false);
+
+  return (
+    <div className="h-full flex flex-col bg-background">
+      <div className="flex-shrink-0 bg-muted/30 border-b border-border p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPageNumber(Math.max(1, pageNumber - 1))}
+                disabled={pageNumber <= 1}
+              >
+                {t("fileManager.previous")}
+              </Button>
+              <span className="text-sm text-foreground px-3 py-1 bg-background border border-border">
+                {t("fileManager.pageXOfY", {
+                  current: pageNumber,
+                  total: numPages || 0,
+                })}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() =>
+                  setPageNumber(Math.min(numPages || 1, pageNumber + 1))
+                }
+                disabled={!numPages || pageNumber >= numPages}
+              >
+                {t("fileManager.next")}
+              </Button>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPdfScale(Math.max(0.5, pdfScale - 0.2))}
+              >
+                {t("fileManager.zoomOut")}
+              </Button>
+              <span className="text-sm text-foreground px-3 py-1 bg-background border border-border min-w-[80px] text-center">
+                {Math.round(pdfScale * 100)}%
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPdfScale(Math.min(3.0, pdfScale + 0.2))}
+              >
+                {t("fileManager.zoomIn")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto thin-scrollbar p-6 bg-surface">
+        <div className="flex justify-center">
+          {pdfError ? (
+            <div className="text-center text-muted-foreground p-8">
+              <AlertCircle className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
+              <h3 className="text-lg font-medium mb-2">
+                {t("fileManager.cannotLoadPdf")}
+              </h3>
+              <p className="text-sm mb-4">{t("fileManager.pdfLoadError")}</p>
+              {onDownload && (
+                <Button
+                  variant="outline"
+                  onClick={onDownload}
+                  className="flex items-center gap-2 mx-auto"
+                >
+                  <Download className="w-4 h-4" />
+                  {t("fileManager.download")}
+                </Button>
+              )}
+            </div>
+          ) : (
+            <Document
+              file={`data:application/pdf;base64,${content}`}
+              onLoadSuccess={({ numPages }) => {
+                setNumPages(numPages);
+                setPdfError(false);
+
+                onMediaDimensionsChange?.({
+                  width: 800,
+                  height: 600,
+                });
+              }}
+              onLoadError={(error) => {
+                console.error("PDF load error:", error);
+                setPdfError(true);
+              }}
+              loading={
+                <div className="text-center p-8">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
+                  <p className="text-sm text-muted-foreground">
+                    {t("fileManager.loadingPdf")}
+                  </p>
+                </div>
+              }
+            >
+              <Page
+                pageNumber={pageNumber}
+                scale={pdfScale}
+                className="shadow-lg"
+                loading={
+                  <div className="text-center p-4">
+                    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-2"></div>
+                    <p className="text-xs text-muted-foreground">
+                      {t("fileManager.loadingPage")}
+                    </p>
+                  </div>
+                }
+              />
+            </Document>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/PermissionsDialog.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+} from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { Lock } from "lucide-react";
+
+interface FileItem {
+  name: string;
+  type: "file" | "directory" | "link";
+  path: string;
+  permissions?: string;
+  owner?: string;
+  group?: string;
+}
+
+interface PermissionsDialogProps {
+  file: FileItem | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (file: FileItem, permissions: string) => Promise<void>;
+}
+
+const parsePermissions = (
+  perms: string,
+): { owner: number; group: number; other: number } => {
+  if (!perms) {
+    return { owner: 0, group: 0, other: 0 };
+  }
+
+  if (/^\d{3,4}$/.test(perms)) {
+    const numStr = perms.slice(-3);
+    return {
+      owner: parseInt(numStr[0] || "0", 10),
+      group: parseInt(numStr[1] || "0", 10),
+      other: parseInt(numStr[2] || "0", 10),
+    };
+  }
+  const cleanPerms = perms.replace(/^-/, "").substring(0, 9);
+
+  const calcBits = (str: string): number => {
+    let value = 0;
+    if (str[0] === "r") value += 4;
+    if (str[1] === "w") value += 2;
+    if (str[2] === "x") value += 1;
+    return value;
+  };
+
+  return {
+    owner: calcBits(cleanPerms.substring(0, 3)),
+    group: calcBits(cleanPerms.substring(3, 6)),
+    other: calcBits(cleanPerms.substring(6, 9)),
+  };
+};
+
+const toNumeric = (owner: number, group: number, other: number): string => {
+  return `${owner}${group}${other}`;
+};
+
+export function PermissionsDialog({
+  file,
+  open,
+  onOpenChange,
+  onSave,
+}: PermissionsDialogProps) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+
+  const initialPerms = parsePermissions(file?.permissions || "644");
+  const [ownerRead, setOwnerRead] = useState((initialPerms.owner & 4) !== 0);
+  const [ownerWrite, setOwnerWrite] = useState((initialPerms.owner & 2) !== 0);
+  const [ownerExecute, setOwnerExecute] = useState(
+    (initialPerms.owner & 1) !== 0,
+  );
+
+  const [groupRead, setGroupRead] = useState((initialPerms.group & 4) !== 0);
+  const [groupWrite, setGroupWrite] = useState((initialPerms.group & 2) !== 0);
+  const [groupExecute, setGroupExecute] = useState(
+    (initialPerms.group & 1) !== 0,
+  );
+
+  const [otherRead, setOtherRead] = useState((initialPerms.other & 4) !== 0);
+  const [otherWrite, setOtherWrite] = useState((initialPerms.other & 2) !== 0);
+  const [otherExecute, setOtherExecute] = useState(
+    (initialPerms.other & 1) !== 0,
+  );
+
+  useEffect(() => {
+    if (file) {
+      const perms = parsePermissions(file.permissions || "644");
+      setOwnerRead((perms.owner & 4) !== 0);
+      setOwnerWrite((perms.owner & 2) !== 0);
+      setOwnerExecute((perms.owner & 1) !== 0);
+      setGroupRead((perms.group & 4) !== 0);
+      setGroupWrite((perms.group & 2) !== 0);
+      setGroupExecute((perms.group & 1) !== 0);
+      setOtherRead((perms.other & 4) !== 0);
+      setOtherWrite((perms.other & 2) !== 0);
+      setOtherExecute((perms.other & 1) !== 0);
+    }
+  }, [file]);
+
+  const calculateOctal = (): string => {
+    const owner =
+      (ownerRead ? 4 : 0) + (ownerWrite ? 2 : 0) + (ownerExecute ? 1 : 0);
+    const group =
+      (groupRead ? 4 : 0) + (groupWrite ? 2 : 0) + (groupExecute ? 1 : 0);
+    const other =
+      (otherRead ? 4 : 0) + (otherWrite ? 2 : 0) + (otherExecute ? 1 : 0);
+    return toNumeric(owner, group, other);
+  };
+
+  const handleSave = async () => {
+    if (!file) return;
+
+    setLoading(true);
+    try {
+      const permissions = calculateOctal();
+      await onSave(file, permissions);
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Failed to update permissions:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!file) return null;
+
+  const octal = calculateOctal();
+
+  const rows = [
+    {
+      label: `${t("fileManager.owner")}${file.owner ? ` (${file.owner})` : ""}`,
+      read: ownerRead,
+      setRead: setOwnerRead,
+      write: ownerWrite,
+      setWrite: setOwnerWrite,
+      execute: ownerExecute,
+      setExecute: setOwnerExecute,
+    },
+    {
+      label: `${t("fileManager.group")}${file.group ? ` (${file.group})` : ""}`,
+      read: groupRead,
+      setRead: setGroupRead,
+      write: groupWrite,
+      setWrite: setGroupWrite,
+      execute: groupExecute,
+      setExecute: setGroupExecute,
+    },
+    {
+      label: t("fileManager.others"),
+      read: otherRead,
+      setRead: setOtherRead,
+      write: otherWrite,
+      setWrite: setOtherWrite,
+      execute: otherExecute,
+      setExecute: setOtherExecute,
+    },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[calc(100vw-2rem)] sm:max-w-lg rounded-none border-border bg-card">
+        <DialogHeader>
+          <DialogTitle className="text-xs font-bold uppercase tracking-widest flex items-center gap-2">
+            <Lock className="size-4 text-accent-brand" />
+            {t("fileManager.changePermissions")}
+          </DialogTitle>
+          <DialogDescription className="text-[10px] font-bold tracking-tight text-muted-foreground font-mono break-all">
+            {file.path}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-3 flex flex-col gap-4">
+          <div className="border border-border overflow-hidden">
+            <div className="grid grid-cols-[1fr_64px_64px_64px] bg-muted/50 border-b border-border">
+              <div className="px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground" />
+              {[
+                t("fileManager.read"),
+                t("fileManager.write"),
+                t("fileManager.execute"),
+              ].map((h) => (
+                <div
+                  key={h}
+                  className="py-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-center border-l border-border"
+                >
+                  {h}
+                </div>
+              ))}
+            </div>
+            {rows.map((row, i) => (
+              <div
+                key={i}
+                className={`grid grid-cols-[1fr_64px_64px_64px] ${i < rows.length - 1 ? "border-b border-border" : ""}`}
+              >
+                <div className="px-3 py-3 text-xs font-semibold">
+                  {row.label}
+                </div>
+                {[
+                  { val: row.read, set: row.setRead },
+                  { val: row.write, set: row.setWrite },
+                  { val: row.execute, set: row.setExecute },
+                ].map((perm, j) => (
+                  <div
+                    key={j}
+                    className="flex items-center justify-center border-l border-border py-3"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={perm.val}
+                      onChange={(e) => perm.set(e.target.checked)}
+                      className="accent-[var(--accent-brand)] size-4 cursor-pointer"
+                    />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-3">
+            <span className="text-xs font-bold uppercase tracking-widest text-muted-foreground shrink-0">
+              {t("fileManager.octal")}
+            </span>
+            <Input
+              value={octal}
+              readOnly
+              className="w-20 rounded-none bg-muted/50 border-border text-xs font-mono text-center h-8"
+            />
+            <span className="text-[10px] text-muted-foreground font-mono">
+              {t("fileManager.currentPermissions")}: {file.permissions || "—"}
+            </span>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+            className="rounded-none text-[10px] font-bold uppercase tracking-widest"
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={handleSave}
+            disabled={loading}
+            className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest"
+          >
+            {loading ? t("common.saving") : t("common.save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

plugins/file-manager/src/frontend/components/TerminalWindow.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { DraggableWindow } from "./DraggableWindow.tsx";
+import type { TabHandle as TerminalHandle } from "@termix/plugin-sdk/frontend";
+import { PluginComponent } from "@termix/plugin-sdk/ui";
+import { useWindowManager } from "./WindowManager.tsx";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import type { SSHHost } from "../host-types";
+import { ExternalLink } from "lucide-react";
+
+interface TerminalWindowProps {
+  windowId: string;
+  hostConfig: SSHHost;
+  initialPath?: string;
+  initialX?: number;
+  initialY?: number;
+  executeCommand?: string;
+  onPromoteToTab?: (path?: string) => void;
+}
+
+export function TerminalWindow({
+  windowId,
+  hostConfig,
+  initialPath,
+  initialX = 200,
+  initialY = 150,
+  executeCommand,
+  onPromoteToTab,
+}: TerminalWindowProps) {
+  const { t } = useTranslation();
+  const { closeWindow, maximizeWindow, focusWindow, windows } =
+    useWindowManager();
+  const terminalRef = React.useRef<TerminalHandle | null>(null);
+  const resizeTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const currentWindow = windows.find((w) => w.id === windowId);
+  if (!currentWindow) {
+    return null;
+  }
+
+  const handleClose = () => {
+    closeWindow(windowId);
+  };
+
+  const handleMaximize = () => {
+    maximizeWindow(windowId);
+    if (resizeTimeoutRef.current) {
+      clearTimeout(resizeTimeoutRef.current);
+    }
+    resizeTimeoutRef.current = setTimeout(() => {
+      if (terminalRef.current?.fit) {
+        terminalRef.current.fit();
+      }
+    }, 150);
+  };
+
+  const handleFocus = () => {
+    focusWindow(windowId);
+  };
+
+  const handleResize = () => {
+    if (resizeTimeoutRef.current) {
+      clearTimeout(resizeTimeoutRef.current);
+    }
+
+    resizeTimeoutRef.current = setTimeout(() => {
+      if (terminalRef.current?.fit) {
+        terminalRef.current.fit();
+      }
+    }, 100);
+  };
+
+  const handlePromoteToTab = () => {
+    onPromoteToTab?.(initialPath);
+    closeWindow(windowId);
+  };
+
+  const terminalTitle = executeCommand
+    ? t("terminal.runTitle", { host: hostConfig.name, command: executeCommand })
+    : initialPath
+      ? t("terminal.terminalWithPath", {
+          host: hostConfig.name,
+          path: initialPath,
+        })
+      : t("terminal.terminalTitle", { host: hostConfig.name });
+
+  return (
+    <>
+      <DraggableWindow
+        title={terminalTitle}
+        initialX={initialX}
+        initialY={initialY}
+        initialWidth={800}
+        initialHeight={500}
+        minWidth={600}
+        minHeight={400}
+        onClose={handleClose}
+        onMaximize={handleMaximize}
+        onFocus={handleFocus}
+        onResize={handleResize}
+        isMaximized={currentWindow.isMaximized}
+        zIndex={currentWindow.zIndex}
+        titleActions={
+          onPromoteToTab ? (
+            <button
+              className="size-6 flex items-center justify-center rounded-none hover:bg-accent-brand/10 hover:text-accent-brand text-muted-foreground transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                handlePromoteToTab();
+              }}
+              title={t("common.openInNewTab")}
+            >
+              <ExternalLink className="size-3.5" />
+            </button>
+          ) : null
+        }
+      >
+        <PluginComponent
+          id="terminal.view"
+          handleRef={terminalRef}
+          hostConfig={hostConfig}
+          isVisible={!currentWindow.isMinimized}
+          initialPath={initialPath}
+          executeCommand={executeCommand}
+          onClose={handleClose}
+        />
+      </DraggableWindow>
+    </>
+  );
+}

plugins/file-manager/src/frontend/components/TransferProgressBar.tsx

@@ -0,0 +1,42 @@
+import type { CSSProperties } from "react";
+
+import { cn } from "@termix/plugin-sdk/ui";
+
+export function TransferProgressBar({
+  value,
+  label,
+  stalled = false,
+}: {
+  value?: number;
+  label: string;
+  stalled?: boolean;
+}) {
+  const clamped = Math.min(100, Math.max(0, value ?? 0));
+  const indeterminate = value === undefined;
+
+  return (
+    <div
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={indeterminate ? undefined : clamped}
+      aria-busy={indeterminate}
+      data-stalled={stalled || undefined}
+      className="transfer-progress-track"
+    >
+      <div
+        className={cn(
+          "transfer-progress-fill",
+          indeterminate && "transfer-progress-indeterminate",
+          stalled && "transfer-progress-stalled",
+        )}
+        style={
+          indeterminate
+            ? undefined
+            : ({ "--transfer-progress": clamped / 100 } as CSSProperties)
+        }
+      />
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/TransferProgressToast.tsx

@@ -0,0 +1,149 @@
+import { Button } from "@termix/plugin-sdk/ui";
+import {
+  formatTransferMbPerSec,
+  getTransferProgressPercent,
+  type TransferProgressResponse,
+} from "../api/transfer-api";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import {
+  Archive,
+  ArchiveRestore,
+  ArrowRight,
+  Gauge,
+  RefreshCw,
+  ShieldCheck,
+} from "lucide-react";
+import { TransferProgressBar } from "./TransferProgressBar";
+
+interface TransferProgressToastProps {
+  status: TransferProgressResponse;
+  liveMbPerSec?: number;
+  stalled?: boolean;
+  formatSize: (bytes?: number) => string;
+  onCancel?: () => void;
+  cancelling?: boolean;
+}
+
+export function TransferProgressToast({
+  status,
+  liveMbPerSec,
+  stalled = false,
+  formatSize,
+  onCancel,
+  cancelling = false,
+}: TransferProgressToastProps) {
+  const { t } = useTranslation();
+  const percent = getTransferProgressPercent(status);
+
+  let title = t("transfer.progressTransferring");
+  if (status.phase === "reconnecting") {
+    title = t("transfer.progressReconnecting");
+  } else if (status.phase === "benchmarking") {
+    title = t("transfer.progressBenchmarking");
+  } else if (status.phase === "verifying") {
+    title = t("transfer.progressVerifying");
+  } else if (status.phase === "compressing") {
+    title = t("transfer.progressCompressing");
+  } else if (status.phase === "extracting") {
+    title = t("transfer.progressExtracting");
+  } else if (
+    status.method === "item_sftp" &&
+    status.totalItems !== undefined &&
+    status.itemsCompleted !== undefined
+  ) {
+    title = t("transfer.progressTransferringItems", {
+      current: status.itemsCompleted,
+      total: status.totalItems,
+    });
+  }
+
+  const hasByteProgress =
+    status.bytesTransferred !== undefined &&
+    status.totalBytes !== undefined &&
+    status.totalBytes > 0;
+
+  const detailLeft = hasByteProgress
+    ? t("transfer.progressBytes", {
+        transferred: formatSize(status.bytesTransferred),
+        total: formatSize(status.totalBytes),
+      })
+    : status.method === "item_sftp" &&
+        status.totalItems !== undefined &&
+        status.itemsCompleted !== undefined
+      ? t("transfer.progressItems", {
+          current: status.itemsCompleted,
+          total: status.totalItems,
+        })
+      : null;
+
+  const liveRate =
+    status.phase === "reconnecting"
+      ? undefined
+      : stalled
+        ? t("transfer.progressStalled")
+        : liveMbPerSec !== undefined
+          ? status.parallelSegmentCount && status.parallelSegmentCount > 1
+            ? t("transfer.progressTotalSpeed", {
+                speed: formatTransferMbPerSec(liveMbPerSec),
+                lanes: status.parallelSegmentCount,
+              })
+            : formatTransferMbPerSec(liveMbPerSec)
+          : undefined;
+
+  const showIndeterminate =
+    status.phase === "reconnecting" || percent === undefined;
+  const PhaseIcon =
+    status.phase === "compressing"
+      ? Archive
+      : status.phase === "benchmarking"
+        ? Gauge
+        : status.phase === "verifying"
+          ? ShieldCheck
+          : status.phase === "extracting"
+            ? ArchiveRestore
+            : status.phase === "reconnecting"
+              ? RefreshCw
+              : ArrowRight;
+
+  return (
+    <div className="flex w-[min(calc(100vw-5rem),288px)] max-w-full flex-col gap-2 pr-2">
+      <div className="flex items-start justify-between gap-2">
+        <p
+          key={status.phase}
+          className="motion-transfer-phase flex min-w-0 items-center gap-2 text-sm font-medium leading-tight"
+        >
+          <PhaseIcon className="size-3.5 shrink-0 text-accent-brand" />
+          <span className="truncate">{title}</span>
+        </p>
+        {onCancel && status.status === "running" && status.transferId && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 shrink-0 px-2 text-xs"
+            disabled={cancelling}
+            onClick={onCancel}
+          >
+            {cancelling
+              ? t("transfer.progressCancelling")
+              : t("transfer.progressCancel")}
+          </Button>
+        )}
+      </div>
+      <TransferProgressBar
+        value={showIndeterminate ? undefined : percent}
+        label={title}
+        stalled={stalled}
+      />
+      <div className="flex items-center justify-between gap-3 pr-1 text-xs text-muted-foreground">
+        <span className="min-w-0 truncate">{detailLeft ?? ""}</span>
+        <span
+          className={`shrink-0 tabular-nums ${stalled ? "text-amber-500" : liveRate ? "font-medium text-foreground" : "invisible"}`}
+          aria-hidden={!liveRate}
+        >
+          {liveRate ?? "0 MB/s"}
+        </span>
+      </div>
+    </div>
+  );
+}

plugins/file-manager/src/frontend/components/WindowManager.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable react-refresh/only-export-components */
+import React, { useState, useCallback, useRef } from "react";
+
+export interface WindowInstance {
+  id: string;
+  title: string;
+  component: React.ReactNode | ((windowId: string) => React.ReactNode);
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isMaximized: boolean;
+  isMinimized: boolean;
+  zIndex: number;
+}
+
+interface WindowManagerProps {
+  children?: React.ReactNode;
+}
+
+interface WindowManagerContextType {
+  windows: WindowInstance[];
+  openWindow: (window: Omit<WindowInstance, "id" | "zIndex">) => string;
+  closeWindow: (id: string) => void;
+  minimizeWindow: (id: string) => void;
+  maximizeWindow: (id: string) => void;
+  focusWindow: (id: string) => void;
+  updateWindow: (id: string, updates: Partial<WindowInstance>) => void;
+}
+
+const WindowManagerContext =
+  React.createContext<WindowManagerContextType | null>(null);
+
+export function WindowManager({ children }: WindowManagerProps) {
+  const [windows, setWindows] = useState<WindowInstance[]>([]);
+  const nextZIndex = useRef(1000);
+  const windowCounter = useRef(0);
+
+  const openWindow = useCallback(
+    (windowData: Omit<WindowInstance, "id" | "zIndex">) => {
+      const id = `window-${++windowCounter.current}`;
+      const zIndex = ++nextZIndex.current;
+
+      const offset = (windows.length % 5) * 20;
+      let adjustedX = windowData.x + offset;
+      let adjustedY = windowData.y + offset;
+
+      const maxX = Math.max(0, window.innerWidth - windowData.width - 20);
+      const maxY = Math.max(0, window.innerHeight - windowData.height - 20);
+
+      adjustedX = Math.max(20, Math.min(adjustedX, maxX));
+      adjustedY = Math.max(20, Math.min(adjustedY, maxY));
+
+      const newWindow: WindowInstance = {
+        ...windowData,
+        id,
+        zIndex,
+        x: adjustedX,
+        y: adjustedY,
+      };
+
+      setWindows((prev) => [...prev, newWindow]);
+      return id;
+    },
+    [windows.length],
+  );
+
+  const closeWindow = useCallback((id: string) => {
+    setWindows((prev) => prev.filter((w) => w.id !== id));
+  }, []);
+
+  const minimizeWindow = useCallback((id: string) => {
+    setWindows((prev) =>
+      prev.map((w) =>
+        w.id === id ? { ...w, isMinimized: !w.isMinimized } : w,
+      ),
+    );
+  }, []);
+
+  const maximizeWindow = useCallback((id: string) => {
+    setWindows((prev) =>
+      prev.map((w) =>
+        w.id === id ? { ...w, isMaximized: !w.isMaximized } : w,
+      ),
+    );
+  }, []);
+
+  const focusWindow = useCallback((id: string) => {
+    setWindows((prev) => {
+      const targetWindow = prev.find((w) => w.id === id);
+      if (!targetWindow) return prev;
+
+      const newZIndex = ++nextZIndex.current;
+      return prev.map((w) => (w.id === id ? { ...w, zIndex: newZIndex } : w));
+    });
+  }, []);
+
+  const updateWindow = useCallback(
+    (id: string, updates: Partial<WindowInstance>) => {
+      setWindows((prev) =>
+        prev.map((w) => (w.id === id ? { ...w, ...updates } : w)),
+      );
+    },
+    [],
+  );
+
+  const contextValue: WindowManagerContextType = {
+    windows,
+    openWindow,
+    closeWindow,
+    minimizeWindow,
+    maximizeWindow,
+    focusWindow,
+    updateWindow,
+  };
+
+  return (
+    <WindowManagerContext.Provider value={contextValue}>
+      {children}
+      <div
+        className="window-container absolute inset-0 pointer-events-none overflow-hidden"
+        style={{ zIndex: 1000 }}
+      >
+        <div className="relative w-full h-full pointer-events-none">
+          {windows.map((window) => (
+            <div key={window.id} className="pointer-events-auto">
+              {typeof window.component === "function"
+                ? window.component(window.id)
+                : window.component}
+            </div>
+          ))}
+        </div>
+      </div>
+    </WindowManagerContext.Provider>
+  );
+}
+
+export function useWindowManager() {
+  const context = React.useContext(WindowManagerContext);
+  if (!context) {
+    throw new Error("useWindowManager must be used within a WindowManager");
+  }
+  return context;
+}