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>

src/ui/shell/ActionSlot.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useActionSlot } from "@/hooks/use-action-slot";
+import { invokeAction, type SlotContribution } from "@/shell/action-registry";
+
+interface ActionSlotProps {
+  slotId: string;
+  /**
+   * Arguments for the action, read at click time rather than on render. A
+   * getter keeps expensive context (a serialized terminal buffer, say) off the
+   * render path.
+   */
+  context?: () => unknown[];
+  /** Applied to the default button so a slot owner can match its own controls. */
+  className?: string;
+  /** Hides the whole slot. For a surface that is contextually unavailable. */
+  enabled?: boolean;
+  /** Renders a contribution the owner's own way instead of as a button. */
+  renderItem?: (
+    contribution: SlotContribution,
+    invoke: () => void,
+  ) => React.ReactNode;
+  /** Icon-only, for toolbars that collapse their labels. */
+  hideLabels?: boolean;
+  /** Passed to each contribution's `when`. */
+  when?: Record<string, unknown>;
+}
+
+/**
+ * Renders whatever plugins have contributed to a named slot.
+ *
+ * Renders null when there is nothing to show, which covers both "no plugin
+ * contributed" and "the user may not see what was contributed". Those two
+ * cases are deliberately identical in the DOM: no placeholder, no disabled
+ * button, nothing hinting at a feature the user cannot reach.
+ */
+export function ActionSlot({
+  slotId,
+  context,
+  className,
+  enabled = true,
+  renderItem,
+  hideLabels,
+  when,
+}: ActionSlotProps) {
+  const { t } = useTranslation();
+  const contributions = useActionSlot(slotId, when).filter(
+    (contribution) => contribution.kind !== "component",
+  );
+
+  if (!enabled || contributions.length === 0) return null;
+
+  return (
+    <>
+      {contributions.map((contribution) => {
+        const invoke = () => {
+          void invokeAction(contribution.actionId, ...(context?.() ?? []));
+        };
+
+        if (renderItem) {
+          return (
+            <React.Fragment key={contribution.actionId}>
+              {renderItem(contribution, invoke)}
+            </React.Fragment>
+          );
+        }
+
+        const Icon = contribution.icon;
+        const label = t(contribution.titleKey);
+
+        return (
+          <button
+            key={contribution.actionId}
+            type="button"
+            className={className}
+            aria-label={label}
+            title={label}
+            onClick={invoke}
+          >
+            {Icon && <Icon className="size-4 shrink-0" />}
+            {!hideLabels && label}
+          </button>
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * Renders the component contributions in a slot, each with the owner's
+ * props. Same permission and `when` filtering as buttons, and the same
+ * nothing-at-all output when there is nothing to show.
+ */
+export function ComponentSlot({
+  slotId,
+  props,
+  when,
+}: {
+  slotId: string;
+  props?: Record<string, unknown>;
+  when?: Record<string, unknown>;
+}) {
+  const contributions = useActionSlot(slotId, when).filter(
+    (contribution) =>
+      contribution.kind === "component" && contribution.component,
+  );
+  if (contributions.length === 0) return null;
+  return (
+    <>
+      {contributions.map((contribution) => {
+        const Contributed = contribution.component!;
+        return <Contributed key={contribution.actionId} {...(props ?? {})} />;
+      })}
+    </>
+  );
+}

src/ui/shell/CommandPalette.tsx

@@ -13,39 +13,37 @@ import {
 import {
   Server,
   Settings,
-  Terminal,
-  FolderOpen,
-  FolderSearch,
-  Box,
   Globe,
-  HardDrive,
   Plus,
   MessagesSquare,
   LifeBuoy,
   Search,
-  Activity,
-  Network,
   User,
   KeyRound,
-  Layers, // --- tmux-monitor ---
-  Monitor,
-  MousePointerClick,
   Clock,
   Folder,
   Pencil,
-  Play,
-  Clipboard,
 } from "lucide-react";
-import {
-  getRecentActivity,
-  getSnippets,
-  type RecentActivityItem,
-} from "@/main-axios";
-import type { Host, TabType, Tab, Snippet } from "@/types/ui-types";
+import { getRecentActivity, type RecentActivityItem } from "@/main-axios";
+import type { Host, TabType, Tab } from "@/types/ui-types";
 import { canEditHost } from "@/sidebar/host-permissions";
-import { RAIL_ITEMS, RAIL_UTILITY_ITEMS } from "@/sidebar/rail-items";
-import { useAiAvailability } from "@/hooks/use-ai-availability";
-import { useSnippetRunner } from "@/hooks/use-snippet-runner.tsx";
+import { RAIL_UTILITY_ITEMS, useRailItems } from "@/sidebar/rail-items";
+import {
+  defaultConnectAction,
+  hostActionsFor,
+  runHostAction,
+  useHostActions,
+} from "@/sidebar/host-contributions";
+import {
+  filterPaletteItems,
+  loadPaletteGroup,
+  paletteEntriesFor,
+  usePaletteEntries,
+  usePaletteGroups,
+  type PaletteItemDef,
+} from "./palette-registry";
+import { activityTarget } from "@/lib/activity-types";
+import { shell } from "@/plugin-host/shell-bridge";
 
 interface CommandPaletteProps {
   isOpen: boolean;
@@ -58,71 +56,6 @@ interface CommandPaletteProps {
   onOpenPanel?: (view: string) => void;
 }
 
-const ACTIVITY_ICONS: Record<string, React.ReactNode> = {
-  terminal: <Terminal className="size-3.5" />,
-  file_manager: <FolderOpen className="size-3.5" />,
-  server_stats: <Activity className="size-3.5" />,
-  tunnel: <Network className="size-3.5" />,
-  docker: <Box className="size-3.5" />,
-  telnet: <MessagesSquare className="size-3.5" />,
-  vnc: <MousePointerClick className="size-3.5" />,
-  rdp: <Monitor className="size-3.5" />,
-};
-
-const ACTIVITY_TAB_TYPE: Record<string, TabType> = {
-  terminal: "terminal",
-  file_manager: "files",
-  server_stats: "host-metrics",
-  tunnel: "tunnel",
-  docker: "docker",
-  telnet: "telnet",
-  vnc: "vnc",
-  rdp: "rdp",
-};
-
-function getSshActions(host: Host): {
-  type: TabType;
-  icon: React.ElementType;
-  label: string;
-}[] {
-  const metricsEnabled = host.statsConfig?.metricsEnabled !== false;
-  return [
-    host.enableTerminal !== false && {
-      type: "terminal",
-      icon: Terminal,
-      label: "Terminal",
-    },
-    host.enableFileManager && {
-      type: "files",
-      icon: FolderSearch,
-      label: "Files",
-    },
-    host.enableDocker && { type: "docker", icon: Box, label: "Docker" },
-    // --- tmux-monitor --- opt-in per host, off by default
-    host.enableTerminal !== false &&
-      host.enableTmuxMonitor && {
-        type: "tmux_monitor",
-        icon: Layers,
-        label: "Tmux Monitor",
-      },
-    host.enableTunnel && { type: "tunnel", icon: Network, label: "Tunnels" },
-    metricsEnabled && {
-      type: "host-metrics",
-      icon: Activity,
-      label: "Host Metrics",
-    },
-    host.enableProxmoxStats === true && {
-      type: "proxmox-stats",
-      icon: HardDrive,
-      label: "Proxmox Stats",
-    },
-  ].filter(Boolean) as {
-    type: TabType;
-    icon: React.ElementType;
-    label: string;
-  }[];
-}
-
 export function CommandPalette({
   isOpen,
   setIsOpen,
@@ -133,15 +66,19 @@ export function CommandPalette({
   onOpenPanel,
 }: CommandPaletteProps) {
   const { t } = useTranslation();
-  const { globallyEnabled: aiGloballyEnabled } = useAiAvailability();
+  const railItems = useRailItems();
+  const hostActions = useHostActions();
+  const paletteEntries = usePaletteEntries();
   const inputRef = useRef<HTMLInputElement>(null);
   const [search, setSearch] = useState("");
   const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
     [],
   );
-  const [snippets, setSnippets] = useState<Snippet[]>([]);
+  const paletteGroups = usePaletteGroups();
+  const [groupItems, setGroupItems] = useState<
+    Record<string, PaletteItemDef[]>
+  >({});
   const [selectedValue, setSelectedValue] = useState("");
-  const { runSnippet, dialog: runSnippetDialog } = useSnippetRunner();
 
   useEffect(() => {
     if (isOpen) {
@@ -150,12 +87,24 @@ export function CommandPalette({
       getRecentActivity(5)
         .then(setRecentActivity)
         .catch(() => {});
-      getSnippets()
-        .then((data) => setSnippets((data ?? []) as unknown as Snippet[]))
-        .catch(() => {});
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    if (!isOpen) return;
+    let cancelled = false;
+    for (const group of paletteGroups) {
+      void loadPaletteGroup(group).then((items) => {
+        if (!cancelled) {
+          setGroupItems((prev) => ({ ...prev, [group.id]: items }));
+        }
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, paletteGroups]);
+
   useEffect(() => {
     if (!isOpen) return;
 
@@ -198,16 +147,6 @@ export function CommandPalette({
     groupedHosts.push({ folder, hosts: fhosts });
   }
 
-  const filteredSnippets = search.trim()
-    ? snippets.filter((s) => {
-        const query = search.toLowerCase();
-        return (
-          s.name.toLowerCase().includes(query) ||
-          s.content.toLowerCase().includes(query)
-        );
-      })
-    : [];
-
   useEffect(() => {
     if (!isOpen) return;
     const firstHost = filteredHosts[0];
@@ -215,11 +154,7 @@ export function CommandPalette({
       setSelectedValue(`host-${firstHost.id}`);
       return;
     }
-    setSelectedValue(
-      window.electronAPI?.isElectron
-        ? "quick-action-local-terminal"
-        : "quick-action-add-host",
-    );
+    setSelectedValue("quick-action-add-host");
   }, [filteredHosts, isOpen, search]);
 
   const activeTargetTab =
@@ -231,10 +166,7 @@ export function CommandPalette({
   };
   const showHostResultsFirst = search.trim().length > 0;
 
-  // Closing the palette unmounts this component (AppShell only renders it
-  // while commandPaletteOpen is true), so keep rendering just the variables
-  // dialog after close if a snippet run is still pending its inputs.
-  if (!isOpen) return runSnippetDialog;
+  if (!isOpen) return null;
 
   return (
     <div
@@ -277,27 +209,6 @@ export function CommandPalette({
               heading={t("commandPalette.quickActions")}
               className="px-2"
             >
-              {window.electronAPI?.isElectron && (
-                <CommandItem
-                  value="quick-action-local-terminal"
-                  onSelect={() =>
-                    handleAction(() => onOpenTab("local-terminal"))
-                  }
-                  className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
-                >
-                  <div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors">
-                    <Terminal className="size-4 text-accent-brand" />
-                  </div>
-                  <div className="flex flex-col flex-1">
-                    <span className="text-sm font-semibold">
-                      {t("commandPalette.localTerminal")}
-                    </span>
-                    <span className="text-xs text-muted-foreground">
-                      {t("commandPalette.localTerminalDesc")}
-                    </span>
-                  </div>
-                </CommandItem>
-              )}
               <CommandItem
                 value="quick-action-add-host"
                 onSelect={() =>
@@ -394,9 +305,8 @@ export function CommandPalette({
                   heading={t("commandPalette.navigation")}
                   className="px-2"
                 >
-                  {[...RAIL_ITEMS, ...RAIL_UTILITY_ITEMS]
+                  {[...railItems, ...RAIL_UTILITY_ITEMS]
                     .filter((item) => item.kind !== "tab")
-                    .filter((item) => item.id !== "ai" || aiGloballyEnabled)
                     .map((item) => {
                       const Icon = item.icon;
                       return (
@@ -421,50 +331,92 @@ export function CommandPalette({
               </>
             )}
 
-            {filteredSnippets.length > 0 && (
+            {paletteGroups.map((group) => {
+              const items = filterPaletteItems(
+                groupItems[group.id] ?? [],
+                search,
+                group.showWhenEmpty,
+              );
+              if (items.length === 0) return null;
+              return (
+                <React.Fragment key={`group-${group.id}`}>
+                  <CommandSeparator className="my-2" />
+                  <CommandGroup heading={t(group.titleKey)} className="px-2">
+                    {items.map((item) => {
+                      const Icon = item.icon;
+                      const blocked = !!item.needsTarget && !activeTargetTab;
+                      return (
+                        <CommandItem
+                          key={`${group.id}-${item.id}`}
+                          value={`group-${group.id}-${item.id}`}
+                          onSelect={() => {
+                            if (blocked) return;
+                            handleAction(() =>
+                              item.run({ targetTab: activeTargetTab, shell }),
+                            );
+                          }}
+                          className={cn(
+                            "group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer",
+                            blocked && "pointer-events-none opacity-50",
+                          )}
+                        >
+                          <div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors shrink-0">
+                            {Icon && (
+                              <Icon className="size-4 text-accent-brand" />
+                            )}
+                          </div>
+                          <div className="flex flex-col flex-1 min-w-0">
+                            <span className="text-sm font-semibold truncate">
+                              {item.title}
+                            </span>
+                            {item.description && (
+                              <span className="text-xs text-muted-foreground truncate font-mono">
+                                {item.description}
+                              </span>
+                            )}
+                          </div>
+                          {(blocked || item.hint) && (
+                            <span className="text-[10px] text-muted-foreground/60 shrink-0">
+                              {blocked
+                                ? t("commandPalette.noTargetTab")
+                                : item.hint}
+                            </span>
+                          )}
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </React.Fragment>
+              );
+            })}
+
+            {paletteEntriesFor(paletteEntries, "global").length > 0 && (
               <>
                 <CommandSeparator className="my-2" />
                 <CommandGroup
-                  heading={t("commandPalette.snippets")}
+                  heading={t("commandPalette.pluginActions")}
                   className="px-2"
                 >
-                  {filteredSnippets.map((snippet) => (
-                    <CommandItem
-                      key={snippet.id}
-                      value={`snippet-${snippet.id}`}
-                      onSelect={() => {
-                        if (!activeTargetTab) return;
-                        handleAction(() =>
-                          runSnippet(snippet, [activeTargetTab]),
-                        );
-                      }}
-                      className={cn(
-                        "group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer",
-                        !activeTargetTab && "pointer-events-none opacity-50",
-                      )}
-                    >
-                      <div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors shrink-0">
-                        {snippet.isNote ? (
-                          <Clipboard className="size-4 text-accent-brand" />
-                        ) : (
-                          <Play className="size-4 text-accent-brand" />
-                        )}
-                      </div>
-                      <div className="flex flex-col flex-1 min-w-0">
-                        <span className="text-sm font-semibold truncate">
-                          {snippet.name}
+                  {paletteEntriesFor(paletteEntries, "global").map((entry) => {
+                    const Icon = entry.icon;
+                    return (
+                      <CommandItem
+                        key={`plugin-${entry.id}`}
+                        value={`plugin-${entry.id} ${t(entry.titleKey)} ${(entry.keywords ?? []).join(" ")}`}
+                        onSelect={() => handleAction(() => entry.run(shell))}
+                        className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
+                      >
+                        <div className="size-8 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors">
+                          {Icon && (
+                            <Icon className="size-4 text-accent-brand" />
+                          )}
+                        </div>
+                        <span className="text-sm font-semibold flex-1">
+                          {t(entry.titleKey)}
                         </span>
-                        <span className="text-xs text-muted-foreground truncate font-mono">
-                          {snippet.content}
-                        </span>
-                      </div>
-                      <span className="text-[10px] text-muted-foreground/60 shrink-0">
-                        {activeTargetTab
-                          ? t("commandPalette.runSnippetDesc")
-                          : t("newUi.sidebar.snippets.noTerminalTabsOpen")}
-                      </span>
-                    </CommandItem>
-                  ))}
+                      </CommandItem>
+                    );
+                  })}
                 </CommandGroup>
               </>
             )}
@@ -481,17 +433,18 @@ export function CommandPalette({
                       key={item.id}
                       value={`recent-activity-${item.id}`}
                       onSelect={() =>
-                        handleAction(() =>
-                          onOpenTab(
-                            ACTIVITY_TAB_TYPE[item.type],
-                            item.hostName,
-                          ),
-                        )
+                        handleAction(() => {
+                          const target = activityTarget(item.type);
+                          if (target) onOpenTab(target.tab, item.hostName);
+                        })
                       }
                       className="group flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
                     >
                       <div className="size-7 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors text-muted-foreground group-hover:text-accent-brand">
-                        {ACTIVITY_ICONS[item.type]}
+                        {(() => {
+                          const Icon = activityTarget(item.type)?.icon;
+                          return Icon ? <Icon className="size-3.5" /> : null;
+                        })()}
                       </div>
                       <div className="flex flex-col flex-1 min-w-0">
                         <span className="text-sm font-semibold truncate">
@@ -535,16 +488,11 @@ export function CommandPalette({
                           value={`host-${host.id}`}
                           onSelect={() =>
                             handleAction(() => {
-                              const type = host.enableSsh
-                                ? "terminal"
-                                : host.enableRdp
-                                  ? "rdp"
-                                  : host.enableVnc
-                                    ? "vnc"
-                                    : host.enableTelnet
-                                      ? "telnet"
-                                      : "terminal";
-                              onOpenTab(type, host.name);
+                              const action = defaultConnectAction(
+                                hostActions,
+                                host,
+                              );
+                              if (action) runHostAction(action, host, shell);
                             })
                           }
                           className="group flex items-center gap-3 px-3 py-2.5 rounded-none hover:bg-accent-brand/10 cursor-pointer"
@@ -578,80 +526,51 @@ export function CommandPalette({
                             </span>
                           </div>
                           <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                            {host.enableSsh &&
-                              getSshActions(host).map(
-                                ({ type, icon: Icon, label }) => (
-                                  <button
-                                    key={type}
-                                    title={label}
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleAction(() =>
-                                        onOpenTab(type, host.name),
-                                      );
-                                    }}
-                                    className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
-                                  >
-                                    <Icon className="size-3.5" />
-                                  </button>
-                                ),
-                              )}
-                            {host.enableSsh &&
-                              (host.enableRdp ||
-                                host.enableVnc ||
-                                host.enableTelnet) && (
-                                <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
-                              )}
-                            {host.enableRdp && (
-                              <button
-                                title="RDP"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleAction(() =>
-                                    onOpenTab("rdp", host.name),
-                                  );
-                                }}
-                                className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
-                              >
-                                <Monitor className="size-3" />
-                                RDP
-                              </button>
-                            )}
-                            {host.enableVnc && (
-                              <button
-                                title="VNC"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleAction(() =>
-                                    onOpenTab("vnc", host.name),
-                                  );
-                                }}
-                                className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
-                              >
-                                <MousePointerClick className="size-3" />
-                                VNC
-                              </button>
-                            )}
-                            {host.enableTelnet && (
-                              <button
-                                title="Telnet"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleAction(() =>
-                                    onOpenTab("telnet", host.name),
-                                  );
-                                }}
-                                className="flex items-center gap-1 px-2 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
-                              >
-                                <Terminal className="size-3" />
-                                Telnet
-                              </button>
-                            )}
+                            {hostActionsFor(hostActions, host).map((action) => {
+                              const Icon = action.icon;
+                              const label =
+                                action.label?.(host) ?? t(action.titleKey);
+                              return (
+                                <button
+                                  key={action.id}
+                                  title={label}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleAction(() =>
+                                      runHostAction(action, host, shell),
+                                    );
+                                  }}
+                                  className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                                >
+                                  <Icon className="size-3.5" />
+                                </button>
+                              );
+                            })}
+                            {paletteEntriesFor(
+                              paletteEntries,
+                              "host",
+                              host,
+                            ).map((entry) => {
+                              const Icon = entry.icon;
+                              return (
+                                <button
+                                  key={entry.id}
+                                  title={t(entry.titleKey)}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleAction(() => entry.run(shell, host));
+                                  }}
+                                  className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
+                                >
+                                  {Icon && <Icon className="size-3.5" />}
+                                </button>
+                              );
+                            })}
                             {canEditHost(host) && (
                               <>
                                 <div className="w-px h-3.5 bg-border/60 mx-0.5 shrink-0" />
                                 <button
-                                  title="Edit Host"
+                                  title={t("hosts.editHost")}
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     setIsOpen(false);
@@ -757,8 +676,6 @@ export function CommandPalette({
           </div>
         </Command>
       </div>
-
-      {runSnippetDialog}
     </div>
   );
 }

src/ui/shell/MobileBottomBar.tsx

@@ -9,26 +9,23 @@ import {
   DropdownMenuSeparator,
 } from "@/components/dropdown-menu";
 import type { RailView } from "@/sidebar/AppRail";
-import { visibleRailItems } from "@/sidebar/rail-items";
-import { useAiAvailability } from "@/hooks/use-ai-availability";
-import type { SplitMode } from "@/types/ui-types";
+import { useRailItems } from "@/sidebar/rail-items";
 import { readHiddenRailTabs } from "@/sidebar/hidden-rail-tabs";
+import { RailBadge } from "@/sidebar/RailBadge";
 
 export function MobileBottomBar({
   railView,
   sidebarOpen,
-  splitMode,
   onRailClick,
 }: {
   railView: RailView;
   sidebarOpen: boolean;
-  splitMode: SplitMode;
   onRailClick: (view: RailView) => void;
 }) {
   const { t } = useTranslation();
   const [moreOpen, setMoreOpen] = useState(false);
   const [hidden, setHidden] = useState<Set<string>>(readHiddenRailTabs);
-  const { userEnabled: aiEnabled } = useAiAvailability();
+  const railItems = useRailItems();
 
   // The rail's visibility toggles apply on mobile too; this used to ignore
   // them, so hiding a tab did nothing on a phone.
@@ -40,11 +37,8 @@ export function MobileBottomBar({
 
   const { primaryItems, moreItems } = useMemo(() => {
     // Tab-opening entries (network graph) have no sidebar panel to show here.
-    const visible = visibleRailItems().filter(
-      (item) =>
-        item.kind !== "tab" &&
-        !hidden.has(item.id) &&
-        (item.id !== "ai" || aiEnabled),
+    const visible = railItems.filter(
+      (item) => item.kind !== "tab" && !hidden.has(item.id),
     );
     const preferred = visible.filter((item) => item.mobilePrimary);
     // Keep four primary slots filled even when the user hides the defaults,
@@ -58,7 +52,7 @@ export function MobileBottomBar({
       primaryItems: primary,
       moreItems: visible.filter((item) => !primaryIds.has(item.id)),
     };
-  }, [hidden, aiEnabled]);
+  }, [hidden, railItems]);
 
   const moreActive =
     sidebarOpen &&
@@ -70,7 +64,6 @@ export function MobileBottomBar({
     <div className="md:hidden flex items-stretch shrink-0 bg-sidebar border-t border-border safe-bottom">
       {primaryItems.map((item) => {
         const active = sidebarOpen && railView === item.id;
-        const hasDot = item.id === "split-screen" && splitMode !== "none";
         const Icon = item.icon;
         return (
           <button
@@ -79,13 +72,18 @@ export function MobileBottomBar({
             className={`relative flex flex-col items-center justify-center flex-1 gap-0.5 py-2 min-h-[56px] transition-colors text-[10px] font-medium
               ${active ? "text-accent-brand" : "text-muted-foreground"}`}
           >
-            <Icon className="size-5" />
+            <span className="relative">
+              <Icon className="size-5" />
+              {item.useBadge && (
+                <RailBadge
+                  useBadge={item.useBadge}
+                  className="-top-1.5 -right-2.5"
+                />
+              )}
+            </span>
             <span className="max-w-full truncate px-0.5">
               {t(item.labelKey)}
             </span>
-            {hasDot && (
-              <span className="absolute top-1.5 right-[calc(50%-10px)] size-1.5 rounded-full bg-accent-brand" />
-            )}
           </button>
         );
       })}
@@ -96,7 +94,19 @@ export function MobileBottomBar({
             className={`relative flex flex-col items-center justify-center flex-1 gap-0.5 py-2 min-h-[56px] transition-colors text-[10px] font-medium
               ${moreActive ? "text-accent-brand" : "text-muted-foreground"}`}
           >
-            <MoreHorizontal className="size-5" />
+            <span className="relative">
+              <MoreHorizontal className="size-5" />
+              {moreItems.map((item) =>
+                item.useBadge ? (
+                  <RailBadge
+                    key={item.id}
+                    useBadge={item.useBadge}
+                    variant="dot"
+                    className="-top-0.5 -right-1"
+                  />
+                ) : null,
+              )}
+            </span>
             <span>{t("common.more")}</span>
           </button>
         </DropdownMenuTrigger>
@@ -119,6 +129,11 @@ export function MobileBottomBar({
               >
                 <Icon className="size-4" />
                 {t(item.labelKey)}
+                {item.useBadge && (
+                  <span className="relative ml-auto w-5 h-3.5">
+                    <RailBadge useBadge={item.useBadge} className="right-0" />
+                  </span>
+                )}
               </DropdownMenuItem>
             );
           })}

src/ui/shell/SplitView.tsx

@@ -1,826 +0,0 @@
-import React, { useState, useRef, useEffect, memo, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
-import { splitDragState, notifyDragEnd } from "@/lib/splitDragging";
-import { tabIcon } from "@/shell/tabUtils";
-import type { Tab, SplitMode } from "@/types/ui-types";
-
-// ─── useSplitDrag ─────────────────────────────────────────────────────────────
-
-export type RowColSizes = number[][];
-
-export function defaultSizes(mode: SplitMode): {
-  rowSizes: number[];
-  rowColSizes: RowColSizes;
-} {
-  switch (mode) {
-    case "2-way":
-      return { rowSizes: [100], rowColSizes: [[50, 50]] };
-    case "2-way-horizontal":
-      return { rowSizes: [50, 50], rowColSizes: [[100], [100]] };
-    case "3-way":
-      return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
-    case "3-way-horizontal":
-      return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
-    case "4-way":
-      return {
-        rowSizes: [50, 50],
-        rowColSizes: [
-          [50, 50],
-          [50, 50],
-        ],
-      };
-    case "5-way":
-      return {
-        rowSizes: [50, 50],
-        rowColSizes: [
-          [33.3, 33.3, 33.4],
-          [33.3, 66.7],
-        ],
-      };
-    case "6-way":
-      return {
-        rowSizes: [50, 50],
-        rowColSizes: [
-          [33.3, 33.3, 33.4],
-          [33.3, 33.3, 33.4],
-        ],
-      };
-    default:
-      return { rowSizes: [100], rowColSizes: [[100]] };
-  }
-}
-
-function useSplitDrag(
-  rowSizes: number[],
-  rowColSizes: RowColSizes,
-  onRowSizesChange: (sizes: number[]) => void,
-  onRowColSizesChange: (sizes: RowColSizes) => void,
-  onReset?: () => void,
-) {
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  function reset() {
-    onReset?.();
-  }
-
-  function startDrag() {
-    splitDragState.active = true;
-    setIsDragging(true);
-  }
-  function endDrag() {
-    splitDragState.active = false;
-    setIsDragging(false);
-    notifyDragEnd();
-  }
-
-  function onRowDivider(e: React.MouseEvent, rowIdx: number) {
-    e.preventDefault();
-    const container = containerRef.current;
-    if (!container) return;
-    startDrag();
-    const totalH = container.getBoundingClientRect().height;
-    const startY = e.clientY;
-    const a = rowSizes[rowIdx],
-      b = rowSizes[rowIdx + 1];
-    function onMove(ev: MouseEvent) {
-      const na = Math.max(
-        10,
-        Math.min(a + b - 10, a + ((ev.clientY - startY) / totalH) * 100),
-      );
-      const n = [...rowSizes];
-      n[rowIdx] = na;
-      n[rowIdx + 1] = a + b - na;
-      onRowSizesChange(n);
-    }
-    function onUp() {
-      endDrag();
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    }
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-  }
-
-  function onRowDividerTouch(e: React.TouchEvent, rowIdx: number) {
-    const container = containerRef.current;
-    if (!container) return;
-    startDrag();
-    const totalH = container.getBoundingClientRect().height;
-    const startY = e.touches[0].clientY;
-    const a = rowSizes[rowIdx],
-      b = rowSizes[rowIdx + 1];
-    function onMove(ev: TouchEvent) {
-      const na = Math.max(
-        10,
-        Math.min(
-          a + b - 10,
-          a + ((ev.touches[0].clientY - startY) / totalH) * 100,
-        ),
-      );
-      const n = [...rowSizes];
-      n[rowIdx] = na;
-      n[rowIdx + 1] = a + b - na;
-      onRowSizesChange(n);
-    }
-    function onUp() {
-      endDrag();
-      window.removeEventListener("touchmove", onMove);
-      window.removeEventListener("touchend", onUp);
-    }
-    window.addEventListener("touchmove", onMove, { passive: false });
-    window.addEventListener("touchend", onUp);
-  }
-
-  function onColDivider(e: React.MouseEvent, rowIdx: number, colIdx: number) {
-    e.preventDefault();
-    const container = containerRef.current;
-    if (!container) return;
-    startDrag();
-    const totalW = container.getBoundingClientRect().width;
-    const startX = e.clientX;
-    const cols = rowColSizes[rowIdx];
-    const a = cols[colIdx],
-      b = cols[colIdx + 1];
-    function onMove(ev: MouseEvent) {
-      const na = Math.max(
-        10,
-        Math.min(a + b - 10, a + ((ev.clientX - startX) / totalW) * 100),
-      );
-      const next = rowColSizes.map((r) => [...r]);
-      next[rowIdx][colIdx] = na;
-      next[rowIdx][colIdx + 1] = a + b - na;
-      onRowColSizesChange(next);
-    }
-    function onUp() {
-      endDrag();
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    }
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-  }
-
-  function onColDividerTouch(
-    e: React.TouchEvent,
-    rowIdx: number,
-    colIdx: number,
-  ) {
-    const container = containerRef.current;
-    if (!container) return;
-    startDrag();
-    const totalW = container.getBoundingClientRect().width;
-    const startX = e.touches[0].clientX;
-    const cols = rowColSizes[rowIdx];
-    const a = cols[colIdx],
-      b = cols[colIdx + 1];
-    function onMove(ev: TouchEvent) {
-      const na = Math.max(
-        10,
-        Math.min(
-          a + b - 10,
-          a + ((ev.touches[0].clientX - startX) / totalW) * 100,
-        ),
-      );
-      const next = rowColSizes.map((r) => [...r]);
-      next[rowIdx][colIdx] = na;
-      next[rowIdx][colIdx + 1] = a + b - na;
-      onRowColSizesChange(next);
-    }
-    function onUp() {
-      endDrag();
-      window.removeEventListener("touchmove", onMove);
-      window.removeEventListener("touchend", onUp);
-    }
-    window.addEventListener("touchmove", onMove, { passive: false });
-    window.addEventListener("touchend", onUp);
-  }
-
-  return {
-    isDragging,
-    containerRef,
-    reset,
-    onRowDivider,
-    onRowDividerTouch,
-    onColDivider,
-    onColDividerTouch,
-  };
-}
-
-// ─── Dividers ─────────────────────────────────────────────────────────────────
-
-function ColDivider({
-  onMouseDown,
-  onTouchStart,
-}: {
-  onMouseDown: (e: React.MouseEvent) => void;
-  onTouchStart: (e: React.TouchEvent) => void;
-}) {
-  return (
-    <div className="relative w-0 shrink-0 z-10">
-      <div
-        onMouseDown={onMouseDown}
-        onTouchStart={onTouchStart}
-        className="absolute inset-y-0 -left-2 -right-2 cursor-col-resize flex items-center justify-center group"
-      >
-        <div className="w-px h-full bg-border group-hover:bg-accent-brand/60 transition-colors pointer-events-none" />
-      </div>
-    </div>
-  );
-}
-
-function RowDivider({
-  onMouseDown,
-  onTouchStart,
-}: {
-  onMouseDown: (e: React.MouseEvent) => void;
-  onTouchStart: (e: React.TouchEvent) => void;
-}) {
-  return (
-    <div className="relative h-0 w-full shrink-0 z-10">
-      <div
-        onMouseDown={onMouseDown}
-        onTouchStart={onTouchStart}
-        className="absolute inset-x-0 -top-2 -bottom-2 cursor-row-resize flex flex-col items-center justify-center group"
-      >
-        <div className="h-px w-full bg-border group-hover:bg-accent-brand/60 transition-colors pointer-events-none" />
-      </div>
-    </div>
-  );
-}
-
-// ─── Pane ─────────────────────────────────────────────────────────────────────
-
-function PaneHeader({
-  tab,
-  paneIndex,
-  isFocused,
-  onClear,
-}: {
-  tab: Tab | null;
-  paneIndex: number;
-  isFocused: boolean;
-  onClear?: () => void;
-}) {
-  const { t } = useTranslation();
-  return (
-    <div
-      className={`flex items-center gap-1.5 px-2.5 h-7 shrink-0 border-b text-xs font-medium select-none transition-colors ${
-        isFocused
-          ? "bg-accent-brand/10 border-accent-brand/40 text-accent-brand"
-          : "bg-sidebar border-border text-muted-foreground"
-      }`}
-    >
-      {isFocused && (
-        <span className="w-1 h-3.5 rounded-full bg-accent-brand shrink-0" />
-      )}
-      {tab ? (
-        <>
-          <span className={isFocused ? "text-accent-brand" : "opacity-60"}>
-            {tabIcon(tab.type)}
-          </span>
-          <span
-            className={`truncate flex-1 ${isFocused ? "text-accent-brand font-semibold" : "text-foreground"}`}
-          >
-            {tab.type === "dashboard" ? "Dashboard" : tab.label}
-          </span>
-          <button
-            type="button"
-            title={t("terminal.split.removeFromSplit")}
-            aria-label={t("terminal.split.removeFromSplit")}
-            className="ml-auto flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground"
-            onClick={(event) => {
-              event.stopPropagation();
-              onClear?.();
-            }}
-          >
-            <X className="size-3" />
-          </button>
-        </>
-      ) : (
-        <span className="opacity-40">
-          {t("splitScreen.paneEmpty", { index: paneIndex + 1 })}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function EmptyPane() {
-  const { t } = useTranslation();
-  return (
-    <div className="flex flex-col items-center justify-center w-full h-full gap-2 text-muted-foreground/30 bg-background">
-      <div className="grid grid-cols-2 gap-1">
-        <div className="size-5 border-2 border-current rounded-sm" />
-        <div className="size-5 border-2 border-current rounded-sm" />
-        <div className="size-5 border-2 border-current rounded-sm" />
-        <div className="size-5 border-2 border-current rounded-sm" />
-      </div>
-      <span className="text-xs">{t("splitScreen.noTabAssigned")}</span>
-    </div>
-  );
-}
-
-const Pane = memo(function Pane({
-  tab,
-  paneIndex,
-  isDragging,
-  isFocused,
-  onPaneContentRef,
-  onPaneClick,
-  onAssignPane,
-}: {
-  tab: Tab | null;
-  paneIndex: number;
-  isDragging: boolean;
-  isFocused: boolean;
-  onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
-  onPaneClick?: (paneIndex: number) => void;
-  onAssignPane?: (paneIndex: number, tabId: string) => void;
-}) {
-  const [isDragOver, setIsDragOver] = useState(false);
-
-  const contentRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      onPaneContentRef?.(paneIndex, el);
-    },
-    [paneIndex, onPaneContentRef],
-  );
-
-  return (
-    <div
-      className={`relative flex flex-col w-full h-full min-w-0 min-h-0 overflow-hidden transition-colors ${
-        isFocused ? "ring-1 ring-inset ring-accent-brand/30" : ""
-      } ${isDragOver ? "ring-2 ring-inset ring-accent-brand" : ""}`}
-      onClick={() => onPaneClick?.(paneIndex)}
-      onDragOver={(e) => {
-        e.preventDefault();
-        setIsDragOver(true);
-      }}
-      onDragLeave={() => setIsDragOver(false)}
-      onDrop={(e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-        const tabId = e.dataTransfer.getData("text/plain");
-        if (tabId) onAssignPane?.(paneIndex, tabId);
-      }}
-    >
-      <PaneHeader
-        tab={tab}
-        paneIndex={paneIndex}
-        isFocused={isFocused}
-        onClear={tab ? () => onAssignPane?.(paneIndex, "") : undefined}
-      />
-      <div className="flex-1 min-h-0 overflow-hidden relative">
-        {tab ? (
-          <div ref={contentRef} className="absolute inset-0" />
-        ) : (
-          <EmptyPane />
-        )}
-        {isDragOver && (
-          <div className="absolute inset-0 z-20 flex items-center justify-center bg-accent-brand/10 border-2 border-dashed border-accent-brand pointer-events-none">
-            <span className="text-xs font-medium text-accent-brand">
-              Drop to assign
-            </span>
-          </div>
-        )}
-      </div>
-      {isDragging && (
-        <div className="absolute inset-0 z-10" style={{ cursor: "inherit" }} />
-      )}
-    </div>
-  );
-});
-
-// ─── Row (top-level so React never sees a new component type) ─────────────────
-
-const Row = memo(function Row({
-  rowIdx,
-  paneIndices,
-  rowHeight,
-  colWidths,
-  paneTabIds,
-  tabs,
-  isDragging,
-  focusedPaneIndex,
-  onColDivider,
-  onColDividerTouch,
-  onPaneContentRef,
-  onPaneClick,
-  onAssignPane,
-}: {
-  rowIdx: number;
-  paneIndices: number[];
-  rowHeight: number;
-  colWidths: number[];
-  paneTabIds: (string | null)[];
-  tabs: Tab[];
-  isDragging: boolean;
-  focusedPaneIndex: number | null;
-  onColDivider: (e: React.MouseEvent, rowIdx: number, colIdx: number) => void;
-  onColDividerTouch: (
-    e: React.TouchEvent,
-    rowIdx: number,
-    colIdx: number,
-  ) => void;
-  onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
-  onPaneClick?: (paneIndex: number) => void;
-  onAssignPane?: (paneIndex: number, tabId: string) => void;
-}) {
-  const widths = colWidths ?? [];
-  return (
-    <div className="flex min-h-0 w-full" style={{ height: `${rowHeight}%` }}>
-      {paneIndices.map((pIdx, ci) => {
-        const tabId = paneTabIds[pIdx];
-        const tab =
-          tabId != null ? (tabs.find((t) => t.id === tabId) ?? null) : null;
-        return (
-          <React.Fragment key={pIdx}>
-            <div
-              className="min-w-0 min-h-0 overflow-hidden"
-              style={{ width: `${widths[ci] ?? 100 / paneIndices.length}%` }}
-            >
-              <Pane
-                tab={tab}
-                paneIndex={pIdx}
-                isDragging={isDragging}
-                isFocused={focusedPaneIndex === pIdx}
-                onPaneContentRef={onPaneContentRef}
-                onPaneClick={onPaneClick}
-                onAssignPane={onAssignPane}
-              />
-            </div>
-            {ci < paneIndices.length - 1 && (
-              <ColDivider
-                onMouseDown={(e) => onColDivider(e, rowIdx, ci)}
-                onTouchStart={(e) => onColDividerTouch(e, rowIdx, ci)}
-              />
-            )}
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-});
-
-// ─── SplitView ────────────────────────────────────────────────────────────────
-
-export const SplitView = memo(function SplitView({
-  tabs,
-  paneTabIds,
-  splitMode,
-  rowSizes,
-  rowColSizes,
-  onRowSizesChange,
-  onRowColSizesChange,
-  onReset,
-  focusedPaneIndex,
-  onTerminalResize,
-  onPaneContentRef,
-  onPaneClick,
-  onAssignPane,
-}: {
-  tabs: Tab[];
-  paneTabIds: (string | null)[];
-  splitMode: SplitMode;
-  rowSizes: number[];
-  rowColSizes: RowColSizes;
-  onRowSizesChange: (sizes: number[]) => void;
-  onRowColSizesChange: (sizes: RowColSizes) => void;
-  onReset?: () => void;
-  focusedPaneIndex?: number | null;
-  onTerminalResize?: () => void;
-  onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
-  onPaneClick?: (paneIndex: number) => void;
-  onAssignPane?: (paneIndex: number, tabId: string) => void;
-}) {
-  const {
-    isDragging,
-    containerRef,
-    reset,
-    onRowDivider,
-    onRowDividerTouch,
-    onColDivider,
-    onColDividerTouch,
-  } = useSplitDrag(
-    rowSizes,
-    rowColSizes,
-    onRowSizesChange,
-    onRowColSizesChange,
-    onReset,
-  );
-
-  useEffect(() => {
-    if (!isDragging) {
-      const id = requestAnimationFrame(() => onTerminalResize?.());
-      return () => cancelAnimationFrame(id);
-    }
-  }, [isDragging, onTerminalResize]);
-
-  // Inline pane lookup for the non-Row layouts (3-way, 3-way-horizontal)
-  function tab(idx: number): Tab | null {
-    const tabId = paneTabIds[idx];
-    return tabId != null ? (tabs.find((t) => t.id === tabId) ?? null) : null;
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      className="flex flex-col w-full h-full min-h-0 overflow-hidden relative"
-    >
-      <button
-        onClick={reset}
-        className="absolute top-1 right-1 z-20 text-xs text-muted-foreground hover:text-foreground bg-background/80 border border-border px-1.5 py-0.5 leading-tight"
-        title="Reset to equal split"
-      >
-        Reset
-      </button>
-
-      {splitMode === "2-way" && (
-        <Row
-          rowIdx={0}
-          paneIndices={[0, 1]}
-          rowHeight={rowSizes[0]}
-          colWidths={rowColSizes[0] ?? []}
-          paneTabIds={paneTabIds}
-          tabs={tabs}
-          isDragging={isDragging}
-          focusedPaneIndex={focusedPaneIndex ?? null}
-          onColDivider={onColDivider}
-          onColDividerTouch={onColDividerTouch}
-          onPaneContentRef={onPaneContentRef}
-          onPaneClick={onPaneClick}
-          onAssignPane={onAssignPane}
-        />
-      )}
-
-      {splitMode === "2-way-horizontal" && (
-        <div className="flex flex-col w-full h-full min-h-0">
-          <Row
-            rowIdx={0}
-            paneIndices={[0]}
-            rowHeight={rowSizes[0]}
-            colWidths={rowColSizes[0] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-          <RowDivider
-            onMouseDown={(e) => onRowDivider(e, 0)}
-            onTouchStart={(e) => onRowDividerTouch(e, 0)}
-          />
-          <Row
-            rowIdx={1}
-            paneIndices={[1]}
-            rowHeight={rowSizes[1]}
-            colWidths={rowColSizes[1] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-        </div>
-      )}
-
-      {splitMode === "3-way" && (
-        <div className="flex w-full h-full min-h-0">
-          <div
-            className="min-w-0 min-h-0 overflow-hidden"
-            style={{ width: `${rowColSizes[0][0]}%` }}
-          >
-            <Pane
-              tab={tab(0)}
-              paneIndex={0}
-              isDragging={isDragging}
-              isFocused={focusedPaneIndex === 0}
-              onPaneContentRef={onPaneContentRef}
-              onPaneClick={onPaneClick}
-              onAssignPane={onAssignPane}
-            />
-          </div>
-          <ColDivider
-            onMouseDown={(e) => onColDivider(e, 0, 0)}
-            onTouchStart={(e) => onColDividerTouch(e, 0, 0)}
-          />
-          <div className="flex flex-col flex-1 min-h-0">
-            <div
-              className="min-h-0 overflow-hidden"
-              style={{ height: `${rowSizes[0]}%` }}
-            >
-              <Pane
-                tab={tab(1)}
-                paneIndex={1}
-                isDragging={isDragging}
-                isFocused={focusedPaneIndex === 1}
-                onPaneContentRef={onPaneContentRef}
-                onPaneClick={onPaneClick}
-                onAssignPane={onAssignPane}
-              />
-            </div>
-            <RowDivider
-              onMouseDown={(e) => onRowDivider(e, 0)}
-              onTouchStart={(e) => onRowDividerTouch(e, 0)}
-            />
-            <div
-              className="min-h-0 overflow-hidden"
-              style={{ height: `${rowSizes[1]}%` }}
-            >
-              <Pane
-                tab={tab(2)}
-                paneIndex={2}
-                isDragging={isDragging}
-                isFocused={focusedPaneIndex === 2}
-                onPaneContentRef={onPaneContentRef}
-                onPaneClick={onPaneClick}
-                onAssignPane={onAssignPane}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {splitMode === "3-way-horizontal" && (
-        <div className="flex flex-col w-full h-full min-h-0">
-          <div
-            className="flex min-h-0 overflow-hidden"
-            style={{ height: `${rowSizes[0]}%` }}
-          >
-            <div
-              className="min-w-0 min-h-0 overflow-hidden"
-              style={{ width: `${rowColSizes[0][0]}%` }}
-            >
-              <Pane
-                tab={tab(0)}
-                paneIndex={0}
-                isDragging={isDragging}
-                isFocused={focusedPaneIndex === 0}
-                onPaneContentRef={onPaneContentRef}
-                onPaneClick={onPaneClick}
-                onAssignPane={onAssignPane}
-              />
-            </div>
-            <ColDivider
-              onMouseDown={(e) => onColDivider(e, 0, 0)}
-              onTouchStart={(e) => onColDividerTouch(e, 0, 0)}
-            />
-            <div className="flex-1 min-w-0 min-h-0 overflow-hidden">
-              <Pane
-                tab={tab(1)}
-                paneIndex={1}
-                isDragging={isDragging}
-                isFocused={focusedPaneIndex === 1}
-                onPaneContentRef={onPaneContentRef}
-                onPaneClick={onPaneClick}
-                onAssignPane={onAssignPane}
-              />
-            </div>
-          </div>
-          <RowDivider
-            onMouseDown={(e) => onRowDivider(e, 0)}
-            onTouchStart={(e) => onRowDividerTouch(e, 0)}
-          />
-          <div className="flex-1 min-h-0 overflow-hidden">
-            <Pane
-              tab={tab(2)}
-              paneIndex={2}
-              isDragging={isDragging}
-              isFocused={focusedPaneIndex === 2}
-              onPaneContentRef={onPaneContentRef}
-              onPaneClick={onPaneClick}
-              onAssignPane={onAssignPane}
-            />
-          </div>
-        </div>
-      )}
-
-      {splitMode === "4-way" && (
-        <div className="flex flex-col w-full h-full min-h-0">
-          <Row
-            rowIdx={0}
-            paneIndices={[0, 1]}
-            rowHeight={rowSizes[0]}
-            colWidths={rowColSizes[0] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-          <RowDivider
-            onMouseDown={(e) => onRowDivider(e, 0)}
-            onTouchStart={(e) => onRowDividerTouch(e, 0)}
-          />
-          <Row
-            rowIdx={1}
-            paneIndices={[2, 3]}
-            rowHeight={rowSizes[1]}
-            colWidths={rowColSizes[1] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-        </div>
-      )}
-
-      {splitMode === "5-way" && (
-        <div className="flex flex-col w-full h-full min-h-0">
-          <Row
-            rowIdx={0}
-            paneIndices={[0, 1, 2]}
-            rowHeight={rowSizes[0]}
-            colWidths={rowColSizes[0] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-          <RowDivider
-            onMouseDown={(e) => onRowDivider(e, 0)}
-            onTouchStart={(e) => onRowDividerTouch(e, 0)}
-          />
-          <Row
-            rowIdx={1}
-            paneIndices={[3, 4]}
-            rowHeight={rowSizes[1]}
-            colWidths={rowColSizes[1] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-        </div>
-      )}
-
-      {splitMode === "6-way" && (
-        <div className="flex flex-col w-full h-full min-h-0">
-          <Row
-            rowIdx={0}
-            paneIndices={[0, 1, 2]}
-            rowHeight={rowSizes[0]}
-            colWidths={rowColSizes[0] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-          <RowDivider
-            onMouseDown={(e) => onRowDivider(e, 0)}
-            onTouchStart={(e) => onRowDividerTouch(e, 0)}
-          />
-          <Row
-            rowIdx={1}
-            paneIndices={[3, 4, 5]}
-            rowHeight={rowSizes[1]}
-            colWidths={rowColSizes[1] ?? []}
-            paneTabIds={paneTabIds}
-            tabs={tabs}
-            isDragging={isDragging}
-            focusedPaneIndex={focusedPaneIndex ?? null}
-            onColDivider={onColDivider}
-            onColDividerTouch={onColDividerTouch}
-            onPaneContentRef={onPaneContentRef}
-            onPaneClick={onPaneClick}
-            onAssignPane={onAssignPane}
-          />
-        </div>
-      )}
-    </div>
-  );
-});

src/ui/shell/TabBar.tsx

@@ -19,69 +19,82 @@ import {
   ChevronUp,
   RefreshCw,
   X,
-  LayoutPanelLeft,
   Plus,
-  Minus,
   Pencil,
+  Columns2,
+  Rows2,
+  Ungroup,
   Maximize2,
   Minimize2,
-  FolderOpen,
   PanelRight,
-  Share2,
 } from "lucide-react";
 import { tabIcon } from "@/shell/tabUtils";
+import { isSessionTabType } from "@/shell/tab-registry";
 import { isElectron } from "@/lib/electron";
-import type { Tab, TabType, SplitMode } from "@/types/ui-types";
-import { SPLIT_MODES, PANE_COUNTS } from "@/lib/theme";
+import type { Tab, TabType } from "@/types/ui-types";
+import { ActionSlot } from "@/shell/ActionSlot";
+import {
+  canJoinSplit,
+  isSplitTab,
+  type SplitSummary,
+  type TabSplitAction,
+} from "@/shell/split/split-tabs";
+import { MAX_PANES } from "@/shell/split/split-tree";
+import { SplitLayoutMenu } from "@/shell/split/SplitLayoutMenu";
+import {
+  beginSplitDrag,
+  endSplitDrag,
+  isSplitDragging,
+  moveSplitDrag,
+} from "@/shell/split/split-drag";
 
-const CONNECTION_TAB_TYPES: TabType[] = [
-  "terminal",
-  "local-terminal",
-  "rdp",
-  "vnc",
-  "telnet",
-];
+/** How far below the bar a dragged tab has to go before it drags into the view. */
+const DRAG_OUT_DISTANCE = 16;
+
+/**
+ * Tabs holding a live connection that can be refreshed: the registered
+ * session tabs.
+ */
+function isConnectionTab(type: TabType): boolean {
+  return isSessionTabType(type);
+}
 
 export function TabBar({
   tabs,
   activeTabId,
-  splitMode,
-  paneTabIds,
-  focusedPaneIndex,
+  splits,
+  activeSplitFull,
   onSetActiveTab,
   onCloseTab,
   onRefreshTab,
+  onReconnectDisconnected,
   onReorderTabs,
-  onSplitTab,
-  onAddToSplit,
-  onRemoveFromSplit,
+  onSplitAction,
   onRenameTab,
-  onOpenFileManager,
-  onOpenShare,
   isAppFullscreen,
   onToggleAppFullscreen,
   rightDockOpen,
   onToggleRightDock,
+  showTabNumbers,
 }: {
   tabs: Tab[];
   activeTabId: string;
-  splitMode: SplitMode;
-  paneTabIds: (string | null)[];
-  focusedPaneIndex: number | null;
+  /** Every split tab and its panes, for the "Add to split" entries. */
+  splits: SplitSummary[];
+  /** The active tab is a split with no room for another pane. */
+  activeSplitFull: boolean;
   onSetActiveTab: (id: string) => void;
   onCloseTab: (id: string) => void;
   onRefreshTab: (id: string) => void;
+  onReconnectDisconnected?: () => void;
   onReorderTabs: (tabs: Tab[]) => void;
-  onSplitTab: (tabId: string, mode: SplitMode) => void;
-  onAddToSplit: (tabId: string) => void;
-  onRemoveFromSplit: (tabId: string) => void;
+  onSplitAction: (action: TabSplitAction) => void;
   onRenameTab?: (tabId: string, newLabel: string) => void;
-  onOpenFileManager?: (tabId: string) => void;
-  onOpenShare?: (tabId: string) => void;
   isAppFullscreen: boolean;
   onToggleAppFullscreen: () => void;
   rightDockOpen?: boolean;
   onToggleRightDock?: () => void;
+  showTabNumbers?: boolean;
 }) {
   const { t } = useTranslation();
   const reduceMotion = useReducedMotion();
@@ -89,6 +102,7 @@ export function TabBar({
   const [dragTabId, setDragTabId] = useState<string | null>(null);
   const [dragTargetIndex, setDragTargetIndex] = useState<number | null>(null);
   const [dragPos, setDragPos] = useState<{ x: number; y: number } | null>(null);
+  const [draggingOut, setDraggingOut] = useState(false);
   const [contextTabId, setContextTabId] = useState<string | null>(null);
   const [contextPos, setContextPos] = useState<{ x: number; y: number } | null>(
     null,
@@ -124,8 +138,7 @@ export function TabBar({
   } | null>(null);
   const skipIndicatorAnimRef = useRef(false);
 
-  const isSplit = splitMode !== "none";
-  const paneCount = PANE_COUNTS[splitMode];
+  const activeIsSplit = isSplitTab(tabs.find((tab) => tab.id === activeTabId));
 
   const measureIndicator = useCallback(() => {
     const el = activeTabId ? tabEls.current.get(activeTabId) : null;
@@ -142,7 +155,7 @@ export function TabBar({
   // its pre-reorder position before this caught up, flashing at the old spot.
   useLayoutEffect(() => {
     measureIndicator();
-  }, [measureIndicator, tabs, splitMode, dragTargetIndex]);
+  }, [measureIndicator, tabs, dragTargetIndex]);
 
   useEffect(() => {
     const el = tabBarRef.current;
@@ -182,6 +195,35 @@ export function TabBar({
       if (Math.abs(e.clientX - d.startX) > 5) didDrag.current = true;
 
       const barRect = tabBarRef.current.getBoundingClientRect();
+
+      // Dragged down out of the bar: the tab heads for the view to be split.
+      const dragged = tabs.find((t) => t.id === d.id);
+      if (
+        canJoinSplit(dragged) &&
+        e.clientY > barRect.bottom + DRAG_OUT_DISTANCE
+      ) {
+        didDrag.current = true;
+        if (isSplitDragging()) moveSplitDrag(e.clientX, e.clientY);
+        else
+          beginSplitDrag(
+            {
+              kind: "tab",
+              tabId: d.id,
+              label: dragged!.customLabel || dragged!.label,
+            },
+            e.clientX,
+            e.clientY,
+          );
+        setDraggingOut(true);
+        dragTargetRef.current = d.index;
+        setDragTargetIndex(d.index);
+        return;
+      }
+      if (isSplitDragging()) {
+        endSplitDrag(false);
+        setDraggingOut(false);
+      }
+
       const x = Math.max(
         barRect.left + 2,
         Math.min(barRect.right - d.width - 6, e.clientX - d.offsetX),
@@ -211,7 +253,10 @@ export function TabBar({
       if (!dragData.current) return;
       const { id, index } = dragData.current;
       const to = dragTargetRef.current ?? index;
-      if (commit && to !== index) {
+      const droppedOut = isSplitDragging();
+      if (droppedOut) endSplitDrag(commit);
+      setDraggingOut(false);
+      if (commit && !droppedOut && to !== index) {
         const next = [...tabs];
         if (next[0].id !== id) next.splice(to, 0, next.splice(index, 1)[0]);
         skipIndicatorAnimRef.current = true;
@@ -307,9 +352,6 @@ export function TabBar({
           {tabs.map((tab, index) => {
             const active = tab.id === activeTabId;
             const isDragging = dragTabId === tab.id;
-            const paneIdx = paneTabIds.indexOf(tab.id);
-            const isInPane = paneIdx !== -1;
-            const isFocusedPane = isInPane && paneIdx === focusedPaneIndex;
             let translateX = 0;
             if (
               dragTabId &&
@@ -326,9 +368,6 @@ export function TabBar({
                 translateX = draggedWidth;
             }
 
-            const showFocusIndicator = isFocusedPane && isSplit;
-            const showInPaneIndicator = isInPane && isSplit && !isFocusedPane;
-
             return (
               <div
                 key={tab.id}
@@ -336,12 +375,6 @@ export function TabBar({
                   if (el) tabEls.current.set(tab.id, el);
                   else tabEls.current.delete(tab.id);
                 }}
-                draggable={isSplit && tab.type !== "dashboard"}
-                onDragStart={(e) => {
-                  if (!isSplit || tab.type === "dashboard") return;
-                  e.dataTransfer.setData("text/plain", tab.id);
-                  e.dataTransfer.effectAllowed = "move";
-                }}
                 onClick={() =>
                   !dragTabId && !didDrag.current && onSetActiveTab(tab.id)
                 }
@@ -414,13 +447,11 @@ export function TabBar({
                     : `px-2.5 md:px-4 font-medium ${active ? "bg-surface text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-surface"}`
                 }`}
               >
-                {/* Focused-pane indicator: brand accent bottom border overlay */}
-                {showFocusIndicator && (
-                  <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent-brand/70 z-10" />
-                )}
-                {/* In-pane (not focused) indicator: subtle dot */}
-                {showInPaneIndicator && (
-                  <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-muted-foreground/40 z-10" />
+                {showTabNumbers && tab.type !== "dashboard" && (
+                  <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground/70">
+                    {tabs.slice(0, index).filter((t) => t.type !== "dashboard")
+                      .length + 1}
+                  </span>
                 )}
                 {tabIcon(tab.type)}
                 {tab.type !== "dashboard" && renamingTabId === tab.id ? (
@@ -445,7 +476,7 @@ export function TabBar({
                   <div
                     className={`flex items-center gap-0.5 ml-1 ${active ? "opacity-100" : "opacity-0 group-hover/tab:opacity-100"}`}
                   >
-                    {CONNECTION_TAB_TYPES.includes(tab.type) && (
+                    {isConnectionTab(tab.type) && (
                       <button
                         onPointerDown={(e) => e.stopPropagation()}
                         onClick={(e) => {
@@ -458,19 +489,27 @@ export function TabBar({
                         <RefreshCw className="size-3" />
                       </button>
                     )}
-                    {CONNECTION_TAB_TYPES.includes(tab.type) && onOpenShare && (
-                      <button
-                        onPointerDown={(e) => e.stopPropagation()}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onOpenShare(tab.id);
-                        }}
-                        title={t("sessionSharing.shareButton")}
-                        className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
-                      >
-                        <Share2 className="size-3" />
-                      </button>
-                    )}
+                    {/* Plugins add small buttons here, invoked with the tab's surface handle. */}
+                    <ActionSlot
+                      slotId="tab.inline"
+                      when={{ tab, handle: tab.terminalRef?.current }}
+                      context={() => [tab.terminalRef?.current, tab]}
+                      renderItem={(contribution, invoke) => (
+                        <button
+                          onPointerDown={(e) => e.stopPropagation()}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            invoke();
+                          }}
+                          title={t(contribution.titleKey)}
+                          className="flex items-center justify-center size-5 md:size-4 rounded-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+                        >
+                          {contribution.icon && (
+                            <contribution.icon className="size-3" />
+                          )}
+                        </button>
+                      )}
+                    />
                     <button
                       onPointerDown={(e) => e.stopPropagation()}
                       onClick={(e) => {
@@ -489,6 +528,7 @@ export function TabBar({
 
           {dragTabId &&
             dragPos &&
+            !draggingOut &&
             (() => {
               const tab = tabs.find((t) => t.id === dragTabId)!;
               const active = tab.id === activeTabId;
@@ -543,13 +583,20 @@ export function TabBar({
               sideOffset={1}
               className="w-56 border-t-0 [clip-path:inset(0px_-4px_-4px_-4px)] p-0"
             >
-              {tabs.map((tab) => (
+              {tabs.map((tab, index) => (
                 <div
                   key={tab.id}
                   onClick={() => onSetActiveTab(tab.id)}
                   className={`flex items-center justify-between px-2 py-2 text-xs cursor-default hover:bg-accent hover:text-accent-foreground ${tab.id === activeTabId ? "text-foreground" : "text-muted-foreground"}`}
                 >
                   <div className="flex items-center gap-2 flex-1 min-w-0">
+                    {showTabNumbers && tab.type !== "dashboard" && (
+                      <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground/70">
+                        {tabs
+                          .slice(0, index)
+                          .filter((t) => t.type !== "dashboard").length + 1}
+                      </span>
+                    )}
                     {tabIcon(tab.type)}
                     <span className="truncate">
                       {tab.type === "dashboard"
@@ -572,6 +619,13 @@ export function TabBar({
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
+          <Separator orientation="vertical" />
+          <SplitLayoutMenu
+            activeIsSplit={activeIsSplit}
+            canAddPane={!activeSplitFull}
+            onSplit={(edge) => onSplitAction({ kind: "splitActive", edge })}
+            onPreset={(presetId) => onSplitAction({ kind: "preset", presetId })}
+          />
           {onToggleRightDock && (
             <>
               <Separator orientation="vertical" />
@@ -597,11 +651,13 @@ export function TabBar({
                 className="h-full w-12.5 rounded-none border-y-0 border-border text-muted-foreground hover:text-foreground"
                 title={
                   isAppFullscreen
-                    ? "Exit fullscreen (Ctrl+Shift+F)"
-                    : "Enter fullscreen (Ctrl+Shift+F)"
+                    ? t("nav.exitFullscreen")
+                    : t("nav.enterFullscreen")
                 }
                 aria-label={
-                  isAppFullscreen ? "Exit fullscreen" : "Enter fullscreen"
+                  isAppFullscreen
+                    ? t("nav.exitFullscreen")
+                    : t("nav.enterFullscreen")
                 }
                 onClick={onToggleAppFullscreen}
               >
@@ -641,25 +697,32 @@ export function TabBar({
         (() => {
           const ctxTab = tabs.find((t) => t.id === contextTabId);
           if (!ctxTab) return null;
-          const isInPane = paneTabIds.includes(contextTabId);
-          const hasEmptySlot =
-            isSplit && paneTabIds.slice(0, paneCount).some((p) => p === null);
+          const joinable = canJoinSplit(ctxTab);
+          const itemClass =
+            "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none";
+          const runSplit = (action: TabSplitAction) => {
+            onSplitAction(action);
+            setContextTabId(null);
+          };
+          const menuTop = Math.min(contextPos.y, window.innerHeight - 160);
+          const menuLeft = Math.min(contextPos.x, window.innerWidth - 240);
           return (
             <div
               data-context-menu
               style={{
                 position: "fixed",
-                left: contextPos.x,
-                top: contextPos.y,
+                left: Math.max(4, menuLeft),
+                top: Math.max(4, menuTop),
+                maxHeight: window.innerHeight - Math.max(4, menuTop) - 8,
                 zIndex: 10000,
               }}
-              className="bg-popover border border-border shadow-lg py-1 min-w-[180px]"
+              className="bg-popover border border-border shadow-lg py-1 min-w-[200px] max-w-[260px] overflow-y-auto"
             >
               <div className="px-2 py-1 text-xs font-semibold text-muted-foreground truncate max-w-[200px]">
                 {ctxTab.label}
               </div>
               <div className="h-px bg-border my-1" />
-              {CONNECTION_TAB_TYPES.includes(ctxTab.type) && (
+              {isConnectionTab(ctxTab.type) && (
                 <button
                   className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground"
                   onClick={() => {
@@ -671,20 +734,38 @@ export function TabBar({
                   {t("nav.refreshTab")}
                 </button>
               )}
-              {ctxTab.type === "terminal" &&
-                ctxTab.host &&
-                onOpenFileManager && (
+              {onReconnectDisconnected && (
+                <button
+                  className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground"
+                  onClick={() => {
+                    onReconnectDisconnected();
+                    setContextTabId(null);
+                  }}
+                >
+                  <RefreshCw className="size-3" />
+                  {t("nav.reconnectDisconnectedTerminals")}
+                </button>
+              )}
+              {/* Plugins add entries here, invoked with the tab's surface handle. */}
+              <ActionSlot
+                slotId="tab.menu"
+                when={{ tab: ctxTab, handle: ctxTab.terminalRef?.current }}
+                context={() => [ctxTab.terminalRef?.current, ctxTab]}
+                renderItem={(contribution, invoke) => (
                   <button
                     className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground"
                     onClick={() => {
-                      onOpenFileManager(contextTabId);
+                      invoke();
                       setContextTabId(null);
                     }}
                   >
-                    <FolderOpen className="size-3" />
-                    {t("nav.openFileManager")}
+                    {contribution.icon && (
+                      <contribution.icon className="size-3" />
+                    )}
+                    {t(contribution.titleKey)}
                   </button>
                 )}
+              />
               <button
                 className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground"
                 onClick={() => {
@@ -697,53 +778,109 @@ export function TabBar({
                 <Pencil className="size-3" />
                 {t("nav.renameTab")}
               </button>
-              {ctxTab.type !== "split-screen" && (
+              {isSplitTab(ctxTab) && (
                 <>
                   <div className="h-px bg-border my-1" />
-                  <div className="px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                    {t("terminal.split.splitTab")}
-                  </div>
-                  {SPLIT_MODES.filter((m) => m.id !== "none").map((mode) => (
-                    <button
-                      key={mode.id}
-                      className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground"
-                      onClick={() => {
-                        onSplitTab(contextTabId, mode.id);
-                        setContextTabId(null);
-                      }}
-                    >
-                      <LayoutPanelLeft className="size-3 text-muted-foreground" />
-                      {mode.label}
-                    </button>
-                  ))}
+                  <button
+                    className={itemClass}
+                    onClick={() =>
+                      runSplit({ kind: "unsplit", splitTabId: ctxTab.id })
+                    }
+                  >
+                    <Ungroup className="size-3" />
+                    {t("splitScreen.unsplit")}
+                  </button>
                 </>
               )}
-              {isSplit && (
+              {joinable && (
                 <>
                   <div className="h-px bg-border my-1" />
-                  {isInPane ? (
-                    <button
-                      className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground text-muted-foreground"
-                      onClick={() => {
-                        onRemoveFromSplit(contextTabId);
-                        setContextTabId(null);
-                      }}
-                    >
-                      <Minus className="size-3" />
-                      {t("terminal.split.removeFromSplit")}
-                    </button>
-                  ) : hasEmptySlot ? (
-                    <button
-                      className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-left hover:bg-accent hover:text-accent-foreground"
-                      onClick={() => {
-                        onAddToSplit(contextTabId);
-                        setContextTabId(null);
-                      }}
-                    >
-                      <Plus className="size-3" />
-                      {t("terminal.split.addToSplit")}
-                    </button>
-                  ) : null}
+                  <button
+                    className={itemClass}
+                    onClick={() =>
+                      runSplit({
+                        kind: "split",
+                        tabId: ctxTab.id,
+                        edge: "right",
+                      })
+                    }
+                  >
+                    <Columns2 className="size-3" />
+                    {t("splitScreen.splitRight")}
+                  </button>
+                  <button
+                    className={itemClass}
+                    onClick={() =>
+                      runSplit({
+                        kind: "split",
+                        tabId: ctxTab.id,
+                        edge: "bottom",
+                      })
+                    }
+                  >
+                    <Rows2 className="size-3" />
+                    {t("splitScreen.splitDown")}
+                  </button>
+                  {splits.map((split) => (
+                    <div key={split.id} className="flex flex-col">
+                      <div className="h-px bg-border my-1" />
+                      <div className="px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground truncate">
+                        {t("splitScreen.addToSplit", { split: split.label })}
+                      </div>
+                      {split.panes.map((pane) => (
+                        <button
+                          key={pane.id}
+                          className={`${itemClass} pl-5`}
+                          onClick={() =>
+                            runSplit({
+                              kind: "addToPane",
+                              tabId: ctxTab.id,
+                              splitTabId: split.id,
+                              paneId: pane.id,
+                            })
+                          }
+                        >
+                          <span
+                            className={`truncate ${pane.label ? "" : "text-muted-foreground"}`}
+                          >
+                            {pane.label
+                              ? t("splitScreen.paneItem", {
+                                  index: pane.index,
+                                  label: pane.label,
+                                })
+                              : t("splitScreen.paneEmptyItem", {
+                                  index: pane.index,
+                                })}
+                          </span>
+                        </button>
+                      ))}
+                      {(["right", "bottom"] as const).map((edge) => (
+                        <button
+                          key={edge}
+                          className={`${itemClass} pl-5`}
+                          disabled={split.full}
+                          title={
+                            split.full
+                              ? t("splitScreen.maxPanes", { count: MAX_PANES })
+                              : undefined
+                          }
+                          onClick={() =>
+                            runSplit({
+                              kind: "addPane",
+                              tabId: ctxTab.id,
+                              splitTabId: split.id,
+                              edge,
+                            })
+                          }
+                        >
+                          <Plus className="size-3" />
+                          {edge === "right"
+                            ? t("splitScreen.newPaneRight")
+                            : t("splitScreen.newPaneBelow")}
+                        </button>
+                      ))}
+                    </div>
+                  ))}
                 </>
               )}
               <div className="h-px bg-border my-1" />

src/ui/shell/TabContext.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
+import { getTabType } from "./tab-registry";
 import React, {
   createContext,
   useContext,
@@ -35,8 +36,6 @@ interface TabContextType {
     },
   ) => void;
   updateTab: (tabId: number, updates: Partial<Omit<Tab, "id">>) => void;
-  previewTerminalTheme: string | null;
-  setPreviewTerminalTheme: (theme: string | null) => void;
 }
 
 const TabContext = createContext<TabContextType | undefined>(undefined);
@@ -61,8 +60,6 @@ const NOOP_TABS: TabContextType = {
   reorderTabs: () => {},
   updateHostConfig: () => {},
   updateTab: () => {},
-  previewTerminalTheme: null,
-  setPreviewTerminalTheme: () => {},
 };
 
 export function useTabsSafe(): TabContextType {
@@ -85,9 +82,6 @@ export function TabProvider({ children }: TabProviderProps) {
   ]);
   const [currentTab, setCurrentTab] = useState<number>(1);
   const [allSplitScreenTab, setAllSplitScreenTab] = useState<number[]>([]);
-  const [previewTerminalTheme, setPreviewTerminalTheme] = useState<
-    string | null
-  >(null);
   const [initialMaxId] = useState(2);
   const nextTabId = useRef(initialMaxId);
 
@@ -110,16 +104,8 @@ export function TabProvider({ children }: TabProviderProps) {
 
   const computeUniqueTitle = useCallback(
     (tabType: Tab["type"], desiredTitle: string | undefined): string => {
-      const defaultTitle =
-        tabType === "server_stats"
-          ? t("nav.hostMetrics")
-          : tabType === "file_manager"
-            ? t("nav.fileManager")
-            : tabType === "tunnel"
-              ? t("nav.tunnels")
-              : tabType === "docker"
-                ? t("nav.docker")
-                : t("nav.terminal");
+      const titleKey = getTabType(tabType)?.titleKey;
+      const defaultTitle = titleKey ? t(titleKey) : t("nav.terminal");
       const baseTitle = (desiredTitle || defaultTitle).trim();
       const match = baseTitle.match(/^(.*) \((\d+)\)$/);
       const root = match ? match[1] : baseTitle;
@@ -153,9 +139,12 @@ export function TabProvider({ children }: TabProviderProps) {
 
   const addTab = useCallback(
     (tabData: Omit<Tab, "id">): number => {
-      // --- tmux-monitor --- (tmux_monitor is a singleton tab like ssh_manager:
-      // re-opening focuses the existing tab instead of adding a duplicate)
-      if (tabData.type === "ssh_manager" || tabData.type === "tmux_monitor") {
+      // A singleton tab: re-opening focuses the existing tab instead of
+      // adding a duplicate.
+      if (
+        tabData.type === "ssh_manager" ||
+        getTabType(tabData.type)?.singleton
+      ) {
         const existingTab = tabs.find((t) => t.type === tabData.type);
         if (existingTab) {
           setTabs((prev) =>
@@ -183,26 +172,23 @@ export function TabProvider({ children }: TabProviderProps) {
 
       const id = nextTabId.current++;
       const instanceId = `tab_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const isCommandTarget = !!getTabType(tabData.type)?.commandTarget;
       const needsUniqueTitle =
-        tabData.type === "terminal" ||
-        tabData.type === "server_stats" ||
-        tabData.type === "file_manager" ||
-        tabData.type === "tunnel" ||
-        tabData.type === "docker";
+        isCommandTarget || !!getTabType(tabData.type)?.multiInstance;
+      const singletonTitleKey = getTabType(tabData.type)?.singleton
+        ? getTabType(tabData.type)?.titleKey
+        : undefined;
       const effectiveTitle = needsUniqueTitle
         ? computeUniqueTitle(tabData.type, tabData.title)
-        : tabData.type === "tmux_monitor" // --- tmux-monitor ---
-          ? tabData.title || t("nav.tmuxMonitor")
-          : tabData.title || "";
+        : tabData.title || (singletonTitleKey ? t(singletonTitleKey) : "");
       const newTab: Tab = {
         ...tabData,
         id,
         instanceId,
         title: effectiveTitle,
-        terminalRef:
-          tabData.type === "terminal"
-            ? React.createRef<TerminalRefHandle>()
-            : undefined,
+        terminalRef: isCommandTarget
+          ? React.createRef<TerminalRefHandle>()
+          : undefined,
         hostConfig: tabData.hostConfig
           ? {
               ...tabData.hostConfig,
@@ -215,7 +201,7 @@ export function TabProvider({ children }: TabProviderProps) {
       setAllSplitScreenTab((prev) => prev.filter((tid) => tid !== id));
       return id;
     },
-    [computeUniqueTitle, tabs, t], // --- tmux-monitor --- (added t)
+    [computeUniqueTitle, tabs, t],
   );
 
   const pendingCurrentTabRef = useRef<number | null>(null);
@@ -379,8 +365,6 @@ export function TabProvider({ children }: TabProviderProps) {
       reorderTabs,
       updateHostConfig,
       updateTab,
-      previewTerminalTheme,
-      setPreviewTerminalTheme,
     }),
     [
       tabs,
@@ -393,8 +377,6 @@ export function TabProvider({ children }: TabProviderProps) {
       reorderTabs,
       updateHostConfig,
       updateTab,
-      previewTerminalTheme,
-      setPreviewTerminalTheme,
     ],
   );
 

src/ui/shell/action-registry.ts

@@ -0,0 +1,233 @@
+/**
+ * Runtime registry for plugin-contributed UI actions and the slots they fill.
+ *
+ * This is the frontend sibling of src/backend/plugins/service-registry.ts, and
+ * the difference between them is the thing to be clear about:
+ *
+ *   - The backend registry's proxy IS a boundary. It checks the acting user's
+ *     RBAC permission on every call before the provider ever runs.
+ *   - This one is NOT. It runs in the browser, where anyone can call
+ *     invokeAction from the console. The permission attached to an action
+ *     decides whether a button is DRAWN, nothing more.
+ *
+ * Real enforcement stays where it already is: the backend route the handler
+ * eventually calls. Treating this file as a security boundary is the easy
+ * mistake to make when reading the two side by side, so it is said plainly
+ * here rather than left to be inferred.
+ *
+ * Unlike the rail and tab registries (rail-items.ts, tabUtils.tsx), which are
+ * plain Maps read during render, this one is reactive. A slot renders live and
+ * has to react when a plugin is enabled or disabled at runtime, so it carries
+ * subscribe/getSnapshot plumbing for useSyncExternalStore.
+ */
+
+import type { ComponentType } from "react";
+
+/**
+ * Args are unknown[] because the registry never inspects them: a slot owner
+ * passes whatever its surface offers (the terminal passes its buffer text) and
+ * the contributing plugin knows what to expect. Handlers are written with
+ * concrete parameter types, so registerAction accepts those too.
+ */
+export type ActionHandler = (...args: never[]) => unknown;
+
+export interface RegisteredAction {
+  id: string;
+  handler: ActionHandler;
+  /** Role permission a user needs before this action is offered. */
+  permission?: string;
+  pluginId?: string;
+}
+
+export interface ActionSlotDefinition {
+  id: string;
+  /** Contribution kinds this slot will render. */
+  accepts: string[];
+}
+
+export interface SlotContribution {
+  /** Action invoked when this contribution is activated. */
+  actionId: string;
+  titleKey: string;
+  /** Secondary text, for slots that show one (onboarding cards). */
+  descriptionKey?: string;
+  icon?: ComponentType<{ className?: string }>;
+  /** Checked against the slot's accepts. Defaults to "button". */
+  kind?: string;
+  /**
+   * For kind "component": rendered by the slot owner with its own props,
+   * e.g. a panel docked into the terminal.
+   */
+  component?: ComponentType<Record<string, unknown>>;
+  /** Extra condition, evaluated against the slot owner's context. */
+  when?: (context: Record<string, unknown>) => boolean;
+  pluginId?: string;
+  /** Lower sorts first. Ties break on actionId so ordering is stable. */
+  order?: number;
+}
+
+const actions = new Map<string, RegisteredAction>();
+const slots = new Map<string, ActionSlotDefinition>();
+/** slotId -> actionId -> contribution. */
+const contributions = new Map<string, Map<string, SlotContribution>>();
+const listeners = new Set<() => void>();
+
+/**
+ * Cached per-slot arrays.
+ *
+ * Required, not an optimization: useSyncExternalStore compares snapshots by
+ * identity, so building a fresh array per call makes React throw "The result
+ * of getSnapshot should be cached" and re-render forever.
+ */
+const snapshots = new Map<string, SlotContribution[]>();
+
+const EMPTY: SlotContribution[] = [];
+
+function emit(): void {
+  snapshots.clear();
+  for (const listener of listeners) listener();
+}
+
+export function registerAction(
+  id: string,
+  handler: ActionHandler,
+  options: { permission?: string; pluginId?: string } = {},
+): () => void {
+  const action = { id, handler, ...options };
+  actions.set(id, action);
+  emit();
+  return () => {
+    if (actions.get(id) === action) {
+      actions.delete(id);
+      emit();
+    }
+  };
+}
+
+/** Every registered action. */
+export function listActions(): RegisteredAction[] {
+  return [...actions.values()];
+}
+
+/** Whether a handler is registered, i.e. its plugin is running. */
+export function isActionRegistered(id: string): boolean {
+  return actions.has(id);
+}
+
+/** The permission gating an action, if it declared one. */
+export function getActionPermission(id: string): string | undefined {
+  return actions.get(id)?.permission;
+}
+
+/**
+ * Runs an action. Resolves quietly when the id is unknown: a contribution can
+ * outlive the plugin that registered its handler, and a click should not throw
+ * into the React event handler because of it.
+ */
+export async function invokeAction(
+  id: string,
+  ...args: unknown[]
+): Promise<unknown> {
+  const action = actions.get(id);
+  if (!action) {
+    console.warn(`[actions] no handler registered for "${id}"`);
+    return undefined;
+  }
+  return (action.handler as (...a: unknown[]) => unknown)(...args);
+}
+
+export function declareActionSlot(slot: ActionSlotDefinition): () => void {
+  slots.set(slot.id, slot);
+  emit();
+  return () => {
+    if (slots.get(slot.id) === slot) {
+      slots.delete(slot.id);
+      emit();
+    }
+  };
+}
+
+/**
+ * Adds a contribution to a slot.
+ *
+ * A contribution for a slot nobody has declared yet is kept rather than
+ * dropped: plugin activation order is not guaranteed, and the slot owner may
+ * register after the contributor. It becomes visible once the slot appears.
+ */
+export function registerSlotContribution(
+  slotId: string,
+  contribution: SlotContribution,
+): () => void {
+  const slot = slots.get(slotId);
+  const kind = contribution.kind ?? "button";
+
+  if (slot && !slot.accepts.includes(kind)) {
+    console.warn(
+      `[actions] slot "${slotId}" does not accept "${kind}" (accepts: ${slot.accepts.join(", ")})`,
+    );
+    return () => {};
+  }
+
+  let forSlot = contributions.get(slotId);
+  if (!forSlot) {
+    forSlot = new Map();
+    contributions.set(slotId, forSlot);
+  }
+  const stored = { ...contribution, kind };
+  forSlot.set(contribution.actionId, stored);
+  emit();
+  return () => {
+    if (contributions.get(slotId)?.get(contribution.actionId) === stored) {
+      unregisterSlotContribution(slotId, contribution.actionId);
+    }
+  };
+}
+
+export function unregisterSlotContribution(
+  slotId: string,
+  actionId: string,
+): void {
+  const forSlot = contributions.get(slotId);
+  if (!forSlot?.delete(actionId)) return;
+  if (forSlot.size === 0) contributions.delete(slotId);
+  emit();
+}
+
+/**
+ * Contributions for a slot, sorted and referentially stable between changes.
+ * Unfiltered: callers that render go through useActionSlot, which drops the
+ * ones the current user may not see.
+ */
+export function getSlotContributions(slotId: string): SlotContribution[] {
+  const cached = snapshots.get(slotId);
+  if (cached) return cached;
+
+  const forSlot = contributions.get(slotId);
+  if (!forSlot || forSlot.size === 0) {
+    snapshots.set(slotId, EMPTY);
+    return EMPTY;
+  }
+
+  const sorted = [...forSlot.values()].sort(
+    (a, b) =>
+      (a.order ?? 0) - (b.order ?? 0) || a.actionId.localeCompare(b.actionId),
+  );
+  snapshots.set(slotId, sorted);
+  return sorted;
+}
+
+export function subscribeToActionRegistry(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** Test seam, mirroring resetPluginState(). */
+export function resetActionRegistry(): void {
+  actions.clear();
+  slots.clear();
+  contributions.clear();
+  snapshots.clear();
+  emit();
+}

src/ui/shell/keybinding-registry.ts

@@ -0,0 +1,150 @@
+import type { ComponentType } from "react";
+import type { KeybindingAction, KeyCombo } from "@/types/keybindings";
+import { byOrderThenId, createRegistry } from "@/lib/registry";
+
+export interface KeybindingEditorProps {
+  action: KeybindingAction;
+  onChange: (action: KeybindingAction) => void;
+}
+
+export interface KeybindingRunContext {
+  sessionId?: string;
+  host?: {
+    ip?: string;
+    username?: string;
+    port?: number | string;
+    name?: string;
+  } | null;
+  send?: (data: string) => void;
+}
+
+/**
+ * An action a key can be bound to. The shell registers its own; plugins add
+ * theirs with app.registerKeybindingAction. `id` is what a saved binding
+ * stores as action.type.
+ */
+export interface KeybindingActionDef {
+  id: string;
+  pluginId?: string;
+  /** A full translation key. */
+  labelKey: string;
+  scope: "session" | "global";
+  editor?: ComponentType<KeybindingEditorProps>;
+  summary?: ComponentType<KeybindingEditorProps>;
+  /** A full translation key when the action cannot be saved yet. */
+  validate?: (action: KeybindingAction) => string | null;
+  run?: (action: KeybindingAction, context: KeybindingRunContext) => void;
+  order?: number;
+}
+
+/** A built-in key the user can rebind. */
+export interface KeybindingDefaultDef {
+  id: string;
+  pluginId?: string;
+  combo: KeyCombo;
+  /** A full translation key. */
+  descriptionKey: string;
+  order?: number;
+}
+
+/** Fired for the shell's own actions; AppShell runs them. */
+export const GLOBAL_KEYBINDING_EVENT = "termix:global-keybinding";
+
+function shellAction(id: string, labelKey: string, order: number) {
+  return {
+    id,
+    labelKey,
+    scope: "global" as const,
+    order,
+    run: (action: KeybindingAction) => {
+      window.dispatchEvent(
+        new CustomEvent(GLOBAL_KEYBINDING_EVENT, {
+          detail: { type: action.type },
+        }),
+      );
+    },
+  };
+}
+
+/** The actions the shell runs itself. */
+const SHELL_ACTIONS: KeybindingActionDef[] = [
+  shellAction("nextTab", "newUi.sidebar.keybindings.actionNextTab", 1000),
+  shellAction(
+    "previousTab",
+    "newUi.sidebar.keybindings.actionPreviousTab",
+    1001,
+  ),
+  shellAction(
+    "openCommandPalette",
+    "newUi.sidebar.keybindings.actionOpenCommandPalette",
+    1002,
+  ),
+  shellAction(
+    "reconnectSession",
+    "newUi.sidebar.keybindings.actionReconnectSession",
+    1003,
+  ),
+];
+
+export const SHELL_KEYBINDING_ACTION_IDS = SHELL_ACTIONS.map(
+  (action) => action.id,
+);
+
+const actions = createRegistry<KeybindingActionDef>(byOrderThenId);
+const defaults = createRegistry<KeybindingDefaultDef>(byOrderThenId);
+
+function install(): void {
+  for (const action of SHELL_ACTIONS) {
+    if (!actions.get(action.id)) actions.register(action);
+  }
+}
+install();
+
+/** Adds a plugin's action. A shell action's id cannot be taken over. */
+export function registerKeybindingAction(
+  action: KeybindingActionDef,
+): () => void {
+  if (SHELL_KEYBINDING_ACTION_IDS.includes(action.id)) {
+    throw new Error(`Keybinding action "${action.id}" belongs to the shell`);
+  }
+  const existing = actions.get(action.id);
+  if (existing && existing.pluginId !== action.pluginId) {
+    throw new Error(
+      `Keybinding action "${action.id}" is already registered by ${existing.pluginId}`,
+    );
+  }
+  return actions.register(action);
+}
+
+export const registerKeybindingDefault = defaults.register;
+export const listKeybindingActions = actions.list;
+export const useKeybindingActions = actions.useList;
+export const getKeybindingAction = actions.get;
+export const listKeybindingDefaults = defaults.list;
+export const useKeybindingDefaults = defaults.useList;
+
+/** Back to the shell's own actions and no defaults, for tests. */
+export function resetKeybindingRegistry(): void {
+  actions.reset();
+  defaults.reset();
+  install();
+}
+
+/**
+ * Runs a bound action through whoever registered it. False when nothing
+ * running handles its type (its plugin is off), so the caller can let the
+ * key through.
+ */
+export function runKeybindingAction(
+  action: KeybindingAction,
+  context: KeybindingRunContext = {},
+): boolean {
+  const def = actions.get(action.type);
+  if (!def?.run) return false;
+  try {
+    def.run(action, context);
+  } catch (error) {
+    console.error(`[keybindings] ${action.type} failed`, error);
+  }
+  return true;
+}

src/ui/shell/palette-registry.ts

@@ -0,0 +1,96 @@
+import type { ComponentType } from "react";
+import type { Host, Tab } from "@/types/ui-types";
+import { byOrderThenId, createRegistry } from "@/lib/registry";
+import type { TabShellCallbacks } from "./tab-registry";
+
+/** A command palette entry a plugin contributes. */
+export interface PaletteEntryDef {
+  id: string;
+  pluginId?: string;
+  titleKey: string;
+  icon?: ComponentType<{ className?: string }>;
+  keywords?: string[];
+  scope: "global" | "host";
+  when?: (host?: Host) => boolean;
+  run: (shell: TabShellCallbacks, host?: Host) => void;
+  order?: number;
+}
+
+const registry = createRegistry<PaletteEntryDef>(byOrderThenId);
+
+export const registerPaletteEntry = registry.register;
+export const usePaletteEntries = registry.useList;
+export const listPaletteEntries = registry.list;
+export const resetPaletteEntries = registry.reset;
+
+export function paletteEntriesFor(
+  all: PaletteEntryDef[],
+  scope: PaletteEntryDef["scope"],
+  host?: Host,
+): PaletteEntryDef[] {
+  return all.filter((entry) => {
+    if (entry.scope !== scope) return false;
+    if (!entry.when) return true;
+    try {
+      return entry.when(host);
+    } catch {
+      return false;
+    }
+  });
+}
+
+/** One row of a palette group. */
+export interface PaletteItemDef {
+  id: string;
+  title: string;
+  description?: string;
+  icon?: ComponentType<{ className?: string }>;
+  keywords?: string[];
+  needsTarget?: boolean;
+  hint?: string;
+  run: (context: { targetTab?: Tab; shell: TabShellCallbacks }) => void;
+}
+
+/** A searchable group of items a plugin fills, e.g. its saved commands. */
+export interface PaletteGroupDef {
+  id: string;
+  pluginId?: string;
+  titleKey: string;
+  order?: number;
+  load: () => PaletteItemDef[] | Promise<PaletteItemDef[]>;
+  showWhenEmpty?: boolean;
+}
+
+const groups = createRegistry<PaletteGroupDef>(byOrderThenId);
+
+export const registerPaletteGroup = groups.register;
+export const usePaletteGroups = groups.useList;
+export const listPaletteGroups = groups.list;
+export const resetPaletteGroups = groups.reset;
+
+/** A group's items, or none when its loader throws. */
+export async function loadPaletteGroup(
+  group: PaletteGroupDef,
+): Promise<PaletteItemDef[]> {
+  try {
+    const items = await group.load();
+    return Array.isArray(items) ? items : [];
+  } catch {
+    return [];
+  }
+}
+
+/** The items the query matches, by title, description or keyword. */
+export function filterPaletteItems(
+  items: PaletteItemDef[],
+  query: string,
+  showWhenEmpty = false,
+): PaletteItemDef[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return showWhenEmpty ? items : [];
+  return items.filter((item) =>
+    [item.title, item.description ?? "", ...(item.keywords ?? [])].some(
+      (text) => text.toLowerCase().includes(needle),
+    ),
+  );
+}

src/ui/shell/panel-registry.ts

@@ -0,0 +1,30 @@
+import type { ComponentType } from "react";
+import { createRegistry } from "@/lib/registry";
+import type { TabShellCallbacks } from "./tab-registry";
+
+export interface PanelRenderProps {
+  /** The command-target tab the user is working in, if any. */
+  targetTab?: import("@/types/ui-types").Tab;
+  active: boolean;
+  shell: TabShellCallbacks;
+  setEditing: (editing: boolean) => void;
+  activeTabType?: string;
+  placement: "left" | "right" | "tab";
+}
+
+/** Sidebar content for a rail view a plugin contributes. */
+export interface PanelDef {
+  id: string;
+  pluginId?: string;
+  component: ComponentType<PanelRenderProps>;
+  /** Stays mounted once opened, so its state survives switching away. */
+  keepMounted?: boolean;
+}
+
+const registry = createRegistry<PanelDef>();
+
+export const registerPanel = registry.register;
+export const getPanel = registry.get;
+export const listPanels = registry.list;
+export const usePanels = registry.useList;
+export const resetPanels = registry.reset;

src/ui/shell/reconnect-tabs.ts

@@ -0,0 +1,19 @@
+import type { Tab } from "@/types/ui-types";
+
+/** Includes hidden tabs and split children; each plugin decides whether it is idle. */
+export function reconnectDisconnectedTabs(tabs: readonly Tab[]) {
+  const seen = new Set<NonNullable<Tab["terminalRef"]>["current"]>();
+  let reconnected = 0;
+  let failed = 0;
+  for (const tab of tabs) {
+    const handle = tab.terminalRef?.current;
+    if (!handle?.reconnectIfDisconnected || seen.has(handle)) continue;
+    seen.add(handle);
+    try {
+      if (handle.reconnectIfDisconnected()) reconnected++;
+    } catch {
+      failed++;
+    }
+  }
+  return { reconnected, failed };
+}

src/ui/shell/shell-layout.ts

@@ -0,0 +1,198 @@
+import type {
+  Host,
+  SplitState,
+  Tab,
+  WorkspacePayload,
+  WorkspaceSplitSnapshot,
+  WorkspaceTabSnapshot,
+} from "@/types/ui-types";
+import { createId } from "@/lib/create-id";
+import { getTabType } from "./tab-registry";
+import { isSplitTab, restoreSplitState } from "./split/split-tabs";
+import { listPanes, mapTabIds } from "./split/split-tree";
+
+/**
+ * Serializing and restoring the shell's arrangement: which tabs are open,
+ * how they are split, and what the docks show. This is the shell's own
+ * state, so it lives here; the workspaces plugin only stores and names these
+ * snapshots, through app.tabs.getLayout and applyLayout.
+ */
+
+/** Core tab types that are never part of a saved arrangement. */
+const CORE_UNSAVED = new Set([
+  "dashboard",
+  "host-manager",
+  "user-profile",
+  "admin-settings",
+  "split-screen",
+]);
+
+/**
+ * A tab type no running plugin has registered: its plugin is disabled,
+ * failed, still loading or not installed. The shell shows a placeholder for
+ * it, and a layout keeps it so nothing is lost when the plugin comes back.
+ */
+function isUnregisteredPluginTabType(type: string): boolean {
+  return !CORE_UNSAVED.has(type) && !getTabType(type);
+}
+
+export function isCapturableTabType(type: string): boolean {
+  if (isUnregisteredPluginTabType(type)) return true;
+  const def = getTabType(type);
+  return !!def && def.inLayouts !== false;
+}
+
+// A hostless type opened for a host (a tunnel tab) is one tab per host, the
+// same as when the shell opens it live.
+function opensAsSingleton(type: string, hasHost: boolean): boolean {
+  const def = getTabType(type);
+  return !!def && (!!def.singleton || (!!def.hostless && !hasHost));
+}
+
+/**
+ * Maps live tabs to snapshots, with a fresh slotId per tab. slotId is a
+ * stable key within the saved payload, distinct from Tab.id, which is
+ * regenerated every time a tab opens.
+ */
+export function buildLayoutTabSnapshots(
+  tabs: Tab[],
+  genSlotId: () => string = createId,
+): { snapshots: WorkspaceTabSnapshot[]; slotIdByTabId: Map<string, string> } {
+  const capturable = tabs.filter((tab) => isCapturableTabType(tab.type));
+  const slotIdByTabId = new Map(capturable.map((tab) => [tab.id, genSlotId()]));
+
+  const snapshots: WorkspaceTabSnapshot[] = capturable.map((tab) => ({
+    slotId: slotIdByTabId.get(tab.id)!,
+    type: tab.type,
+    hostSyncId: tab.host?.syncId ?? null,
+    hostNameSnapshot: tab.host?.name ?? null,
+    label: tab.label,
+    customLabel: tab.customLabel,
+    data: tab.data,
+  }));
+
+  return { snapshots, slotIdByTabId };
+}
+
+/**
+ * The tab's plugin payload. Payloads saved before tabs carried `data` stored
+ * the fleet a fleet-inventory tab showed as a field of its own.
+ */
+export function snapshotData(
+  snapshot: WorkspaceTabSnapshot,
+): Record<string, unknown> | undefined {
+  if (snapshot.data) return snapshot.data;
+  // Payloads saved before tabs carried `data` kept these as fields of their own.
+  const legacy: Record<string, unknown> = {};
+  if (snapshot.fleetId !== undefined) legacy.fleetId = snapshot.fleetId;
+  if (snapshot.initialFilePath)
+    legacy.initialFilePath = snapshot.initialFilePath;
+  if (snapshot.initialPath) legacy.initialPath = snapshot.initialPath;
+  return Object.keys(legacy).length > 0 ? legacy : undefined;
+}
+
+/**
+ * How to reopen one saved tab. "singleton" types go through
+ * openSingletonTab with an optional host; "host" types need a resolved host
+ * to open at all.
+ */
+export function resolveLayoutTabTarget(
+  snapshot: WorkspaceTabSnapshot,
+  allHosts: Host[],
+):
+  | { kind: "singleton"; host?: Host }
+  | { kind: "host"; host: Host }
+  | { kind: "skip" } {
+  let host: Host | undefined;
+  if (snapshot.hostSyncId) {
+    host = allHosts.find((h) => h.syncId === snapshot.hostSyncId);
+    if (!host) return { kind: "skip" };
+  }
+
+  if (opensAsSingleton(snapshot.type, !!host)) {
+    return { kind: "singleton", host };
+  }
+
+  // Reopened as a placeholder rather than dropped, so applying a workspace
+  // while a plugin is off does not quietly lose its tabs.
+  if (!host && isUnregisteredPluginTabType(snapshot.type)) {
+    return { kind: "singleton" };
+  }
+
+  return host ? { kind: "host", host } : { kind: "skip" };
+}
+
+export function buildLayoutPayload(input: {
+  tabs: Tab[];
+  activeTabId: string;
+  genSlotId?: () => string;
+  sidebar?: WorkspacePayload["sidebar"];
+}): WorkspacePayload {
+  const genSlotId = input.genSlotId ?? createId;
+  const { snapshots, slotIdByTabId } = buildLayoutTabSnapshots(
+    input.tabs,
+    genSlotId,
+  );
+
+  const splits: WorkspaceSplitSnapshot[] = [];
+  for (const tab of input.tabs) {
+    if (!isSplitTab(tab)) continue;
+    const root = mapTabIds(
+      tab.split.root,
+      (tabId) => slotIdByTabId.get(tabId) ?? null,
+    );
+    // A split whose tabs are all left out of layouts has nothing to restore.
+    if (!listPanes(root).some((pane) => pane.tabId)) continue;
+    const slotId = genSlotId();
+    slotIdByTabId.set(tab.id, slotId);
+    splits.push({
+      slotId,
+      label: tab.label,
+      root,
+      focusedPaneId: tab.split.focusedPaneId,
+    });
+  }
+
+  return {
+    version: 2,
+    tabs: snapshots,
+    activeSlotId: slotIdByTabId.get(input.activeTabId) ?? null,
+    splits,
+    ...(input.sidebar ? { sidebar: input.sidebar } : {}),
+  };
+}
+
+/**
+ * The splits a saved layout describes, with live tab ids. Version 1 payloads
+ * held one split as a fixed mode; it comes back with no label or slotId, so
+ * the caller names it.
+ */
+export function resolveLayoutSplits(
+  payload: WorkspacePayload,
+  slotIdToTabId: Map<string, string>,
+): { slotId: string | null; label: string | null; split: SplitState }[] {
+  const resolve = (slotId: string) => slotIdToTabId.get(slotId) ?? null;
+  if (Array.isArray(payload.splits)) {
+    return payload.splits.flatMap((saved) => {
+      const split = restoreSplitState(saved, resolve);
+      return split ? [{ slotId: saved.slotId, label: saved.label, split }] : [];
+    });
+  }
+  if (
+    typeof payload.splitMode === "string" &&
+    payload.splitMode !== "none" &&
+    Array.isArray(payload.paneTabIds)
+  ) {
+    const split = restoreSplitState(
+      {
+        mode: payload.splitMode,
+        paneInstanceIds: payload.paneTabIds,
+        rowSizes: payload.rowSizes,
+        rowColSizes: payload.rowColSizes,
+      },
+      resolve,
+    );
+    return split ? [{ slotId: null, label: null, split }] : [];
+  }
+  return [];
+}

src/ui/shell/split/EmptyPanePicker.tsx

@@ -0,0 +1,262 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Search, X } from "lucide-react";
+import { Input } from "@/components/input";
+import { Button } from "@/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/dropdown-menu";
+import { tabIcon } from "@/shell/tabUtils";
+import {
+  hostActionsFor,
+  useHostActions,
+  type HostActionDef,
+} from "@/sidebar/host-contributions";
+import type { Host, Tab } from "@/types/ui-types";
+
+/** Hosts listed before a search narrows them down. */
+const HOST_LIMIT = 60;
+
+export interface NewTabOption {
+  type: string;
+  label: string;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+export type PickHostTarget =
+  | { action: HostActionDef }
+  | { action: HostActionDef; item: { id: string; label: string } };
+
+function HostActionButton({
+  host,
+  action,
+  onPick,
+}: {
+  host: Host;
+  action: HostActionDef;
+  onPick: (target: PickHostTarget) => void;
+}) {
+  const { t } = useTranslation();
+  const Icon = action.icon;
+  const title = action.label?.(host) ?? t(action.titleKey);
+  const items = action.items?.(host) ?? [];
+  const button = (
+    <button
+      type="button"
+      title={title}
+      aria-label={`${host.name}: ${title}`}
+      className="flex size-6 shrink-0 items-center justify-center text-muted-foreground hover:bg-accent-brand/10 hover:text-accent-brand"
+      onClick={items.length > 1 ? undefined : () => onPick({ action })}
+    >
+      <Icon className="size-3.5" />
+    </button>
+  );
+  if (items.length <= 1) return button;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        {items.map((item) => (
+          <DropdownMenuItem
+            key={item.id}
+            onSelect={() => onPick({ action, item })}
+          >
+            {item.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * What an empty pane shows: the tabs that could move in, new tabs to start,
+ * and every host with the ways to open it. Picking anything fills this pane.
+ */
+export function EmptyPanePicker({
+  paneIndex,
+  freeTabs,
+  hosts,
+  newTabOptions,
+  onPickTab,
+  onPickHost,
+  onOpenType,
+  onClosePane,
+}: {
+  paneIndex: number;
+  freeTabs: Tab[];
+  hosts: Host[];
+  newTabOptions: NewTabOption[];
+  onPickTab: (tabId: string) => void;
+  onPickHost: (host: Host, target: PickHostTarget) => void;
+  onOpenType: (type: string) => void;
+  onClosePane: () => void;
+}) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+  const allActions = useHostActions();
+
+  const shownHosts = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const matches = q
+      ? hosts.filter((host) =>
+          [host.name, host.ip, host.username, host.folder]
+            .filter(Boolean)
+            .some((field) => String(field).toLowerCase().includes(q)),
+        )
+      : hosts;
+    return [...matches]
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .slice(0, HOST_LIMIT);
+  }, [hosts, query]);
+
+  return (
+    <div
+      className="flex size-full justify-center overflow-y-auto bg-background p-4"
+      data-split-empty-pane
+    >
+      <div className="flex w-full max-w-md flex-col gap-4 self-start">
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-semibold text-foreground">
+            {t("splitScreen.emptyTitle")}
+            <span className="ml-2 text-xs font-normal text-muted-foreground">
+              {t("splitScreen.paneNumber", { index: paneIndex })}
+            </span>
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {t("splitScreen.emptyHint")}
+          </span>
+        </div>
+
+        <section className="flex flex-col gap-1.5">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            {t("splitScreen.openTabs")}
+          </span>
+          {freeTabs.length === 0 ? (
+            <span className="text-xs text-muted-foreground/70">
+              {t("splitScreen.noOpenTabs")}
+            </span>
+          ) : (
+            <div className="flex flex-col border border-border">
+              {freeTabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  className="flex items-center gap-2 border-b border-border px-2.5 py-1.5 text-left text-xs last:border-b-0 hover:bg-accent-brand/10 hover:text-accent-brand"
+                  onClick={() => onPickTab(tab.id)}
+                >
+                  <span className="shrink-0 text-muted-foreground">
+                    {tabIcon(tab.type)}
+                  </span>
+                  <span className="truncate">{tab.label}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </section>
+
+        {newTabOptions.length > 0 && (
+          <section className="flex flex-col gap-1.5">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              {t("splitScreen.newSession")}
+            </span>
+            <div className="flex flex-wrap gap-1.5">
+              {newTabOptions.map((option) => {
+                const Icon = option.icon;
+                return (
+                  <button
+                    key={option.type}
+                    type="button"
+                    className="flex items-center gap-1.5 border border-border px-2.5 py-1.5 text-xs hover:border-accent-brand/40 hover:bg-accent-brand/10 hover:text-accent-brand"
+                    onClick={() => onOpenType(option.type)}
+                  >
+                    {Icon && <Icon className="size-3.5" />}
+                    {option.label}
+                  </button>
+                );
+              })}
+            </div>
+          </section>
+        )}
+
+        <section className="flex flex-col gap-1.5">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            {t("splitScreen.hosts")}
+          </span>
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder={t("splitScreen.searchHosts")}
+              aria-label={t("splitScreen.searchHosts")}
+              className="h-8 rounded-none pl-7 text-xs"
+            />
+          </div>
+          {shownHosts.length === 0 ? (
+            <span className="text-xs text-muted-foreground/70">
+              {t("splitScreen.noHosts")}
+            </span>
+          ) : (
+            <div className="flex flex-col border border-border">
+              {shownHosts.map((host) => {
+                const actions = hostActionsFor(allActions, host);
+                const connect = actions
+                  .filter((action) => action.kind === "connect")
+                  .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+                const open = actions.filter((action) => action.kind === "open");
+                const primary = connect[0];
+                return (
+                  <div
+                    key={host.id}
+                    className="flex items-center gap-2 border-b border-border px-2.5 py-1 last:border-b-0"
+                  >
+                    <button
+                      type="button"
+                      disabled={!primary}
+                      className="flex min-w-0 flex-1 flex-col items-start text-left text-xs enabled:hover:text-accent-brand disabled:opacity-60"
+                      onClick={() =>
+                        primary && onPickHost(host, { action: primary })
+                      }
+                    >
+                      <span className="w-full truncate font-medium">
+                        {host.name}
+                      </span>
+                      <span className="w-full truncate text-[10px] text-muted-foreground">
+                        {host.username ? `${host.username}@` : ""}
+                        {host.ip}
+                      </span>
+                    </button>
+                    <div className="flex shrink-0 items-center">
+                      {[...connect, ...open].map((action) => (
+                        <HostActionButton
+                          key={action.id}
+                          host={host}
+                          action={action}
+                          onPick={(target) => onPickHost(host, target)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </section>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="self-start rounded-none text-xs text-muted-foreground"
+          onClick={onClosePane}
+        >
+          <X className="size-3" />
+          {t("splitScreen.closePane")}
+        </Button>
+      </div>
+    </div>
+  );
+}

src/ui/shell/split/SplitDropOverlay.tsx

@@ -0,0 +1,100 @@
+import { useEffect, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import {
+  dropTargetAt,
+  dropTargetRect,
+  setSplitDropHitTest,
+  useSplitDrag,
+} from "./split-drag";
+
+/**
+ * Drop zones over the main area while a tab or pane is dragged. Over a
+ * split, each pane offers its four edges (split there) and its center (show
+ * it there). Over a plain tab only the edges count, to start a new split.
+ */
+export function SplitDropOverlay({
+  containerRef,
+}: {
+  containerRef: RefObject<HTMLElement | null>;
+}) {
+  const { t } = useTranslation();
+  const drag = useSplitDrag();
+
+  useEffect(
+    () =>
+      setSplitDropHitTest((x, y, source) => {
+        const container = containerRef.current;
+        if (!container) return null;
+        const bounds = container.getBoundingClientRect();
+        if (
+          x < bounds.left ||
+          x > bounds.right ||
+          y < bounds.top ||
+          y > bounds.bottom
+        ) {
+          return null;
+        }
+        const panes = Array.from(
+          container.querySelectorAll<HTMLElement>("[data-split-pane-id]"),
+        ).filter((el) => el.getClientRects().length > 0);
+
+        if (panes.length === 0) {
+          if (source.kind !== "tab") return null;
+          const target = dropTargetAt(bounds, x, y);
+          if (target === "center") return null;
+          return { paneId: null, target, rect: dropTargetRect(bounds, target) };
+        }
+
+        for (const el of panes) {
+          const rect = el.getBoundingClientRect();
+          if (
+            x < rect.left ||
+            x > rect.right ||
+            y < rect.top ||
+            y > rect.bottom
+          ) {
+            continue;
+          }
+          const paneId = el.dataset.splitPaneId ?? null;
+          if (source.kind === "pane" && source.paneId === paneId) return null;
+          const target = dropTargetAt(rect, x, y);
+          return { paneId, target, rect: dropTargetRect(rect, target) };
+        }
+        return null;
+      }),
+    [containerRef],
+  );
+
+  if (!drag) return null;
+  const { hover } = drag;
+
+  return createPortal(
+    <div className="pointer-events-none fixed inset-0 z-[9998]">
+      {hover && (
+        <div
+          className="absolute flex items-center justify-center border-2 border-dashed border-accent-brand bg-accent-brand/15 transition-[left,top,width,height] duration-100"
+          style={{
+            left: hover.rect.left,
+            top: hover.rect.top,
+            width: hover.rect.width,
+            height: hover.rect.height,
+          }}
+        >
+          <span className="bg-background/90 px-2 py-1 text-xs font-medium text-accent-brand">
+            {hover.target === "center"
+              ? t("splitScreen.dropHere")
+              : t("splitScreen.dropSplit")}
+          </span>
+        </div>
+      )}
+      <div
+        className="absolute max-w-48 truncate border border-border bg-popover px-2 py-1 text-xs text-foreground shadow-lg"
+        style={{ left: drag.x + 12, top: drag.y + 12 }}
+      >
+        {drag.source.label}
+      </div>
+    </div>,
+    document.body,
+  );
+}

src/ui/shell/split/SplitLayoutMenu.tsx

@@ -0,0 +1,142 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Columns2, LayoutPanelLeft, Rows2 } from "lucide-react";
+import { Button } from "@/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/dropdown-menu";
+import type { LayoutNode } from "@/types/ui-types";
+import {
+  buildPreset,
+  SPLIT_PRESETS,
+  type SplitPresetId,
+} from "./split-presets";
+import { MAX_PANES, type PaneEdge } from "./split-tree";
+
+function NodeThumb({ node }: { node: LayoutNode }) {
+  if (node.kind === "pane") {
+    return <div className="size-full border border-current" />;
+  }
+  return (
+    <div
+      className={`flex size-full gap-0.5 ${node.direction === "row" ? "flex-row" : "flex-col"}`}
+    >
+      {node.children.map((child, index) => (
+        <div
+          key={child.id}
+          className="min-w-0 min-h-0"
+          style={{ flex: `${node.sizes[index]} 1 0px` }}
+        >
+          <NodeThumb node={child} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A small drawing of a preset's panes. */
+export function PresetThumb({ id }: { id: SplitPresetId }) {
+  const node = useMemo(() => buildPreset(id), [id]);
+  return <NodeThumb node={node} />;
+}
+
+/**
+ * The tab bar's split button: split the active tab right or down, or lay it
+ * out as one of the presets.
+ */
+export function SplitLayoutMenu({
+  activeIsSplit,
+  canAddPane,
+  onSplit,
+  onPreset,
+}: {
+  activeIsSplit: boolean;
+  canAddPane: boolean;
+  onSplit: (edge: Extract<PaneEdge, "right" | "bottom">) => void;
+  onPreset: (id: SplitPresetId) => void;
+}) {
+  const { t } = useTranslation();
+  const fullTitle = canAddPane
+    ? undefined
+    : t("splitScreen.maxPanes", { count: MAX_PANES });
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={`h-full w-12.5 rounded-none border-y-0 border-border ${activeIsSplit ? "text-accent-brand" : "text-muted-foreground hover:text-foreground"}`}
+          title={t("splitScreen.title")}
+          aria-label={t("splitScreen.title")}
+        >
+          <LayoutPanelLeft className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={1}
+        className="w-64 border-t-0 [clip-path:inset(0px_-4px_-4px_-4px)] p-1"
+      >
+        <DropdownMenuItem
+          disabled={!canAddPane}
+          title={fullTitle}
+          onSelect={() => onSplit("right")}
+        >
+          <Columns2 className="size-3.5" />
+          {t("splitScreen.splitRight")}
+          <DropdownMenuShortcut>Ctrl+Shift+\</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          disabled={!canAddPane}
+          title={fullTitle}
+          onSelect={() => onSplit("bottom")}
+        >
+          <Rows2 className="size-3.5" />
+          {t("splitScreen.splitDown")}
+          <DropdownMenuShortcut>Ctrl+Shift+-</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          {activeIsSplit
+            ? t("splitScreen.applyLayout")
+            : t("splitScreen.layouts")}
+        </DropdownMenuLabel>
+        <div className="grid grid-cols-4 gap-1 p-1">
+          {SPLIT_PRESETS.map((preset) => (
+            <DropdownMenuItem
+              key={preset.id}
+              className="flex h-12 items-center justify-center p-1.5 text-muted-foreground focus:text-accent-brand"
+              title={t(preset.titleKey)}
+              aria-label={t(preset.titleKey)}
+              onSelect={() => onPreset(preset.id)}
+            >
+              <div className="h-8 w-11">
+                <PresetThumb id={preset.id} />
+              </div>
+            </DropdownMenuItem>
+          ))}
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          {t("splitScreen.shortcuts")}
+        </DropdownMenuLabel>
+        <div className="flex flex-col gap-1 px-2 pb-1.5 text-xs text-muted-foreground">
+          <div className="flex items-center justify-between gap-2">
+            <span>{t("splitScreen.shortcutNavigate")}</span>
+            <kbd className="font-mono text-[10px]">Alt+Arrows</kbd>
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            <span>{t("splitScreen.zoom")}</span>
+            <kbd className="font-mono text-[10px]">Ctrl+Shift+Enter</kbd>
+          </div>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/ui/shell/split/SplitView.tsx

@@ -0,0 +1,606 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ChevronDown,
+  Columns2,
+  Maximize2,
+  Minimize2,
+  MoreHorizontal,
+  Rows2,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/dropdown-menu";
+import { tabIcon } from "@/shell/tabUtils";
+import type { LayoutNode, PaneNode, SplitNode, Tab } from "@/types/ui-types";
+import type { SplitTab } from "./split-tabs";
+import {
+  listPanes,
+  MAX_PANES,
+  moveDivider,
+  shownPanes,
+  type PaneEdge,
+} from "./split-tree";
+import { beginSplitDrag, endSplitDrag, moveSplitDrag } from "./split-drag";
+
+export interface SplitViewActions {
+  focusPane: (paneId: string) => void;
+  resize: (nodeId: string, sizes: number[]) => void;
+  equalize: (nodeId: string) => void;
+  splitPane: (
+    paneId: string,
+    edge: Extract<PaneEdge, "right" | "bottom">,
+  ) => void;
+  closePane: (paneId: string) => void;
+  closeSession: (tabId: string) => void;
+  moveToTab: (paneId: string) => void;
+  showInPane: (paneId: string, tabId: string | null) => void;
+  swapPanes: (firstId: string, secondId: string) => void;
+  toggleZoom: (paneId: string) => void;
+  /** A divider drag finished, so sessions can fit their new size. */
+  resizeEnd: () => void;
+}
+
+interface PaneContext {
+  splitTab: SplitTab;
+  tabsById: Map<string, Tab>;
+  /** Tabs outside any split, offered in each pane's switcher. */
+  freeTabs: Tab[];
+  paneIndexById: Map<string, number>;
+  paneCount: number;
+  isMobile: boolean;
+  resizing: boolean;
+  actions: SplitViewActions;
+  onPaneContentRef: (paneId: string, el: HTMLDivElement | null) => void;
+  renderEmptyPane: (paneId: string, paneIndex: number) => React.ReactNode;
+  setResizing: (resizing: boolean) => void;
+}
+
+const DRAG_THRESHOLD = 5;
+
+function tabLabel(tab: Tab): string {
+  return tab.customLabel || tab.label;
+}
+
+function PaneHeader({
+  pane,
+  tab,
+  focused,
+  ctx,
+}: {
+  pane: PaneNode;
+  tab: Tab | null;
+  focused: boolean;
+  ctx: PaneContext;
+}) {
+  const { t } = useTranslation();
+  const { actions, splitTab, paneIndexById, tabsById } = ctx;
+  const index = paneIndexById.get(pane.id) ?? 0;
+  const panes = listPanes(splitTab.split.root);
+  const otherPanes = panes.filter((other) => other.id !== pane.id);
+  const full = panes.length >= MAX_PANES;
+  const zoomed = splitTab.split.zoomedPaneId === pane.id;
+  const fullTitle = full
+    ? t("splitScreen.maxPanes", { count: MAX_PANES })
+    : undefined;
+  const drag = useRef<{ x: number; y: number; started: boolean } | null>(null);
+
+  const label = tab ? tabLabel(tab) : t("splitScreen.emptyTitle");
+
+  function onPointerDown(event: React.PointerEvent<HTMLDivElement>) {
+    if (event.button !== 0 || ctx.isMobile || !tab) return;
+    // The header's menus render in portals, and React still bubbles their
+    // events up to here. Only presses on the header itself start a drag.
+    const target = event.target as HTMLElement;
+    if (!event.currentTarget.contains(target)) return;
+    if (target.closest("button")) return;
+    drag.current = { x: event.clientX, y: event.clientY, started: false };
+  }
+
+  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
+    const state = drag.current;
+    if (!state || !tab) return;
+    // Released outside the header before it became a drag.
+    if (!state.started && event.buttons === 0) {
+      drag.current = null;
+      return;
+    }
+    if (!state.started) {
+      const moved = Math.hypot(
+        event.clientX - state.x,
+        event.clientY - state.y,
+      );
+      if (moved < DRAG_THRESHOLD) return;
+      state.started = true;
+      // Captured only once it is really a drag, so a plain click stays a click.
+      event.currentTarget.setPointerCapture(event.pointerId);
+      beginSplitDrag(
+        {
+          kind: "pane",
+          splitTabId: splitTab.id,
+          paneId: pane.id,
+          label: tabLabel(tab),
+        },
+        event.clientX,
+        event.clientY,
+      );
+      return;
+    }
+    moveSplitDrag(event.clientX, event.clientY);
+  }
+
+  function finishDrag(commit: boolean) {
+    const started = drag.current?.started;
+    drag.current = null;
+    if (started) endSplitDrag(commit);
+  }
+
+  const buttonClass =
+    "flex size-6 shrink-0 items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+
+  return (
+    <div
+      data-split-pane-header
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={() => finishDrag(true)}
+      onPointerCancel={() => finishDrag(false)}
+      onLostPointerCapture={() => finishDrag(false)}
+      className={`flex h-7 shrink-0 items-center gap-1 border-b pl-1 pr-0.5 text-xs select-none ${
+        focused
+          ? "border-accent-brand/40 bg-accent-brand/10"
+          : "border-border bg-sidebar"
+      } ${tab && !ctx.isMobile ? "cursor-grab active:cursor-grabbing" : ""}`}
+    >
+      <span
+        className={`flex h-4 min-w-4 shrink-0 items-center justify-center px-1 font-mono text-[10px] ${
+          focused
+            ? "bg-accent-brand text-background"
+            : "bg-muted text-muted-foreground"
+        }`}
+      >
+        {index}
+      </span>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className={`flex min-w-0 items-center gap-1.5 px-1 py-0.5 hover:bg-muted ${
+              focused ? "text-accent-brand" : "text-foreground"
+            }`}
+            title={t("splitScreen.showHere")}
+          >
+            {tab && (
+              <span className={focused ? "" : "text-muted-foreground"}>
+                {tabIcon(tab.type)}
+              </span>
+            )}
+            <span
+              className={`truncate ${tab ? "font-medium" : "text-muted-foreground"}`}
+            >
+              {label}
+            </span>
+            <ChevronDown className="size-3 shrink-0 opacity-60" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-60">
+          <DropdownMenuLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            {t("splitScreen.showHere")}
+          </DropdownMenuLabel>
+          {ctx.freeTabs.length === 0 && (
+            <DropdownMenuItem disabled>
+              {t("splitScreen.noOpenTabs")}
+            </DropdownMenuItem>
+          )}
+          {ctx.freeTabs.map((free) => (
+            <DropdownMenuItem
+              key={free.id}
+              onSelect={() => actions.showInPane(pane.id, free.id)}
+            >
+              {tabIcon(free.type)}
+              <span className="truncate">{tabLabel(free)}</span>
+            </DropdownMenuItem>
+          ))}
+          {tab && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => actions.showInPane(pane.id, null)}
+              >
+                {t("splitScreen.clearPane")}
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <div className="ml-auto flex shrink-0 items-center">
+        {!ctx.isMobile && (
+          <>
+            <button
+              type="button"
+              className={buttonClass}
+              disabled={full}
+              title={fullTitle ?? t("splitScreen.splitRight")}
+              aria-label={t("splitScreen.splitRight")}
+              onClick={() => actions.splitPane(pane.id, "right")}
+            >
+              <Columns2 className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              className={buttonClass}
+              disabled={full}
+              title={fullTitle ?? t("splitScreen.splitDown")}
+              aria-label={t("splitScreen.splitDown")}
+              onClick={() => actions.splitPane(pane.id, "bottom")}
+            >
+              <Rows2 className="size-3.5" />
+            </button>
+            {panes.length > 1 && (
+              <button
+                type="button"
+                className={`${buttonClass} ${zoomed ? "text-accent-brand" : ""}`}
+                title={zoomed ? t("splitScreen.unzoom") : t("splitScreen.zoom")}
+                aria-label={
+                  zoomed ? t("splitScreen.unzoom") : t("splitScreen.zoom")
+                }
+                aria-pressed={zoomed}
+                onClick={() => actions.toggleZoom(pane.id)}
+              >
+                {zoomed ? (
+                  <Minimize2 className="size-3.5" />
+                ) : (
+                  <Maximize2 className="size-3.5" />
+                )}
+              </button>
+            )}
+          </>
+        )}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className={buttonClass}
+              title={t("splitScreen.paneActions")}
+              aria-label={t("splitScreen.paneActions")}
+            >
+              <MoreHorizontal className="size-3.5" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-52">
+            {tab && (
+              <>
+                <DropdownMenuItem onSelect={() => actions.moveToTab(pane.id)}>
+                  {t("splitScreen.moveToTab")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => actions.closeSession(tab.id)}>
+                  {t("splitScreen.closeSession")}
+                </DropdownMenuItem>
+              </>
+            )}
+            {otherPanes.length > 0 && (
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  {t("splitScreen.swapWith")}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent className="w-56">
+                  {otherPanes.map((other) => {
+                    const otherTab = other.tabId
+                      ? tabsById.get(other.tabId)
+                      : undefined;
+                    const otherIndex = paneIndexById.get(other.id) ?? 0;
+                    return (
+                      <DropdownMenuItem
+                        key={other.id}
+                        onSelect={() => actions.swapPanes(pane.id, other.id)}
+                      >
+                        <span className="truncate">
+                          {otherTab
+                            ? t("splitScreen.paneItem", {
+                                index: otherIndex,
+                                label: tabLabel(otherTab),
+                              })
+                            : t("splitScreen.paneEmptyItem", {
+                                index: otherIndex,
+                              })}
+                        </span>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            )}
+            {(tab || otherPanes.length > 0) && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              variant="destructive"
+              onSelect={() => actions.closePane(pane.id)}
+            >
+              {t("splitScreen.closePane")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
+
+const PaneView = memo(function PaneView({
+  pane,
+  ctx,
+}: {
+  pane: PaneNode;
+  ctx: PaneContext;
+}) {
+  const tab = pane.tabId ? (ctx.tabsById.get(pane.tabId) ?? null) : null;
+  const focused = ctx.splitTab.split.focusedPaneId === pane.id;
+  const { onPaneContentRef, actions } = ctx;
+  const paneId = pane.id;
+  const contentRef = useCallback(
+    (el: HTMLDivElement | null) => onPaneContentRef(paneId, el),
+    [paneId, onPaneContentRef],
+  );
+  const paneRef = useRef<HTMLDivElement>(null);
+  const focusRef = useRef(actions.focusPane);
+  focusRef.current = actions.focusPane;
+
+  // Native listeners, not React props: a tab's content is a portal that the
+  // shell moves in here by hand, so React sends its events elsewhere.
+  useEffect(() => {
+    const el = paneRef.current;
+    if (!el) return;
+    const focus = () => focusRef.current(paneId);
+    el.addEventListener("pointerdown", focus, true);
+    el.addEventListener("focusin", focus);
+    return () => {
+      el.removeEventListener("pointerdown", focus, true);
+      el.removeEventListener("focusin", focus);
+    };
+  }, [paneId]);
+
+  return (
+    <div
+      ref={paneRef}
+      data-split-pane-id={pane.id}
+      className="relative flex size-full min-h-0 min-w-0 flex-col overflow-hidden bg-background"
+    >
+      <PaneHeader pane={pane} tab={tab} focused={focused} ctx={ctx} />
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        {tab ? (
+          <div ref={contentRef} className="absolute inset-0" />
+        ) : (
+          ctx.renderEmptyPane(pane.id, ctx.paneIndexById.get(pane.id) ?? 0)
+        )}
+        {ctx.resizing && <div className="absolute inset-0 z-10" />}
+      </div>
+      {/* Drawn over the content, which would otherwise cover an inset ring. */}
+      {focused && ctx.paneCount > 1 && (
+        <div className="pointer-events-none absolute inset-0 z-30 border border-accent-brand/70" />
+      )}
+    </div>
+  );
+});
+
+function Divider({
+  node,
+  index,
+  ctx,
+}: {
+  node: SplitNode;
+  index: number;
+  ctx: PaneContext;
+}) {
+  const { t } = useTranslation();
+  const row = node.direction === "row";
+  const drag = useRef<{
+    start: number;
+    total: number;
+    sizes: number[];
+  } | null>(null);
+
+  function onPointerDown(event: React.PointerEvent<HTMLDivElement>) {
+    if (event.button !== 0) return;
+    const parent = event.currentTarget.parentElement?.parentElement;
+    if (!parent) return;
+    event.preventDefault();
+    const rect = parent.getBoundingClientRect();
+    drag.current = {
+      start: row ? event.clientX : event.clientY,
+      total: row ? rect.width : rect.height,
+      sizes: node.sizes,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    ctx.setResizing(true);
+  }
+
+  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
+    const state = drag.current;
+    if (!state || state.total <= 0) return;
+    const position = row ? event.clientX : event.clientY;
+    const delta = ((position - state.start) / state.total) * 100;
+    ctx.actions.resize(node.id, moveDivider(state.sizes, index, delta));
+  }
+
+  function finish() {
+    if (!drag.current) return;
+    drag.current = null;
+    ctx.setResizing(false);
+    ctx.actions.resizeEnd();
+  }
+
+  return (
+    <div
+      className={`relative z-20 shrink-0 bg-border ${row ? "w-px" : "h-px"}`}
+    >
+      <div
+        role="separator"
+        aria-orientation={row ? "vertical" : "horizontal"}
+        title={t("splitScreen.dividerHint")}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={finish}
+        onPointerCancel={finish}
+        onDoubleClick={() => {
+          ctx.actions.equalize(node.id);
+          ctx.actions.resizeEnd();
+        }}
+        className={`group absolute flex touch-none items-center justify-center ${
+          row
+            ? "inset-y-0 -left-1.5 -right-1.5 cursor-col-resize"
+            : "inset-x-0 -top-1.5 -bottom-1.5 cursor-row-resize"
+        }`}
+      >
+        <div
+          className={`pointer-events-none bg-transparent transition-colors group-hover:bg-accent-brand/60 ${
+            row ? "h-full w-0.5" : "h-0.5 w-full"
+          }`}
+        />
+      </div>
+    </div>
+  );
+}
+
+function NodeView({ node, ctx }: { node: LayoutNode; ctx: PaneContext }) {
+  if (node.kind === "pane") return <PaneView pane={node} ctx={ctx} />;
+  const row = node.direction === "row";
+  return (
+    <div
+      className={`flex size-full min-h-0 min-w-0 ${row ? "flex-row" : "flex-col"}`}
+    >
+      {node.children.map((child, index) => (
+        <React.Fragment key={child.id}>
+          <div
+            className="relative min-h-0 min-w-0 overflow-hidden"
+            style={{ flex: `${node.sizes[index]} 1 0px` }}
+          >
+            <NodeView node={child} ctx={ctx} />
+          </div>
+          {index < node.children.length - 1 && (
+            <Divider node={node} index={index} ctx={ctx} />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+function MobilePaneStrip({ ctx }: { ctx: PaneContext }) {
+  const { t } = useTranslation();
+  const panes = listPanes(ctx.splitTab.split.root);
+  return (
+    <div className="flex h-9 shrink-0 items-stretch overflow-x-auto border-b border-border bg-sidebar">
+      {panes.map((pane) => {
+        const tab = pane.tabId ? ctx.tabsById.get(pane.tabId) : undefined;
+        const active = ctx.splitTab.split.focusedPaneId === pane.id;
+        const index = ctx.paneIndexById.get(pane.id) ?? 0;
+        return (
+          <button
+            key={pane.id}
+            type="button"
+            onClick={() => ctx.actions.focusPane(pane.id)}
+            className={`flex min-w-0 max-w-40 shrink-0 items-center gap-1.5 border-r border-border px-3 text-xs ${
+              active
+                ? "bg-accent-brand/10 text-accent-brand"
+                : "text-muted-foreground"
+            }`}
+          >
+            <span className="font-mono text-[10px]">{index}</span>
+            <span className="truncate">
+              {tab ? tabLabel(tab) : t("splitScreen.emptyTitle")}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * A split tab's panes. Each pane with a tab renders an empty host element;
+ * the shell moves the tab's own DOM node into it, so switching panes never
+ * remounts a session.
+ */
+export function SplitView({
+  splitTab,
+  tabs,
+  isMobile,
+  actions,
+  onPaneContentRef,
+  renderEmptyPane,
+}: {
+  splitTab: SplitTab;
+  tabs: Tab[];
+  isMobile: boolean;
+  actions: SplitViewActions;
+  onPaneContentRef: (paneId: string, el: HTMLDivElement | null) => void;
+  renderEmptyPane: (paneId: string, paneIndex: number) => React.ReactNode;
+}) {
+  const [resizing, setResizing] = useState(false);
+  const focusRef = useRef(actions.focusPane);
+  focusRef.current = actions.focusPane;
+
+  // A click into an iframe (a web page tab) sends no pointer event to this
+  // document, only a blur on the window. The focused iframe says which pane.
+  useEffect(() => {
+    const onBlur = () =>
+      setTimeout(() => {
+        const active = document.activeElement;
+        if (!(active instanceof HTMLIFrameElement)) return;
+        const pane = active.closest<HTMLElement>("[data-split-pane-id]");
+        const paneId = pane?.dataset.splitPaneId;
+        if (paneId) focusRef.current(paneId);
+      }, 0);
+    window.addEventListener("blur", onBlur);
+    return () => window.removeEventListener("blur", onBlur);
+  }, []);
+  const panes = listPanes(splitTab.split.root);
+  const paneIndexById = new Map(panes.map((pane, i) => [pane.id, i + 1]));
+  const tabsById = new Map(tabs.map((tab) => [tab.id, tab]));
+  const freeTabs = tabs.filter(
+    (tab) =>
+      !tab.parentSplitTabId &&
+      tab.type !== "dashboard" &&
+      tab.type !== splitTab.type,
+  );
+  const ctx: PaneContext = {
+    splitTab,
+    tabsById,
+    freeTabs,
+    paneIndexById,
+    paneCount: panes.length,
+    isMobile,
+    resizing,
+    actions,
+    onPaneContentRef,
+    renderEmptyPane,
+    setResizing,
+  };
+
+  const shown = shownPanes(splitTab.split, isMobile);
+  const single = shown.length === 1 && panes.length > 1 ? shown[0] : null;
+
+  return (
+    <div
+      className={`flex size-full min-h-0 flex-col overflow-hidden ${resizing ? "select-none" : ""}`}
+      data-split-view={splitTab.id}
+    >
+      {isMobile && panes.length > 1 && <MobilePaneStrip ctx={ctx} />}
+      <div className="relative min-h-0 flex-1">
+        {single ? (
+          <PaneView key={single.id} pane={single} ctx={ctx} />
+        ) : (
+          <NodeView node={splitTab.split.root} ctx={ctx} />
+        )}
+      </div>
+    </div>
+  );
+}

src/ui/shell/split/split-drag.ts

@@ -0,0 +1,136 @@
+import { useSyncExternalStore } from "react";
+import type { DropTarget } from "./split-tree";
+
+/**
+ * Dragging a tab or a pane onto the main area to split it. The tab bar and
+ * pane headers start a drag, the drop overlay over the main area answers
+ * where the pointer is, and the shell's handler acts on the drop.
+ */
+
+export type SplitDragSource =
+  | { kind: "tab"; tabId: string; label: string }
+  | { kind: "pane"; splitTabId: string; paneId: string; label: string };
+
+export interface SplitDropHover {
+  /** The pane under the pointer, or null over a view that is not split. */
+  paneId: string | null;
+  target: DropTarget;
+  rect: { left: number; top: number; width: number; height: number };
+}
+
+export interface SplitDragState {
+  source: SplitDragSource;
+  x: number;
+  y: number;
+  hover: SplitDropHover | null;
+}
+
+type HitTest = (
+  x: number,
+  y: number,
+  source: SplitDragSource,
+) => SplitDropHover | null;
+type DropHandler = (source: SplitDragSource, hover: SplitDropHover) => void;
+
+let state: SplitDragState | null = null;
+let hitTest: HitTest | null = null;
+let dropHandler: DropHandler | null = null;
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+export function beginSplitDrag(source: SplitDragSource, x: number, y: number) {
+  state = { source, x, y, hover: hitTest?.(x, y, source) ?? null };
+  emit();
+}
+
+export function moveSplitDrag(x: number, y: number) {
+  if (!state) return;
+  state = { ...state, x, y, hover: hitTest?.(x, y, state.source) ?? null };
+  emit();
+}
+
+/** Ends the drag, dropping it where it is when `commit` is true. */
+export function endSplitDrag(commit: boolean) {
+  const ended = state;
+  if (!ended) return;
+  state = null;
+  emit();
+  if (commit && ended.hover) dropHandler?.(ended.source, ended.hover);
+}
+
+export function isSplitDragging(): boolean {
+  return state !== null;
+}
+
+export function setSplitDropHitTest(next: HitTest): () => void {
+  hitTest = next;
+  return () => {
+    if (hitTest === next) hitTest = null;
+  };
+}
+
+export function setSplitDropHandler(next: DropHandler): () => void {
+  dropHandler = next;
+  return () => {
+    if (dropHandler === next) dropHandler = null;
+  };
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function useSplitDrag(): SplitDragState | null {
+  return useSyncExternalStore(
+    subscribe,
+    () => state,
+    () => null,
+  );
+}
+
+/** Share of a pane's width or height, from each edge, that splits on drop. */
+const EDGE_SHARE = 0.25;
+
+/** Which zone of a rect a point falls in: an edge band, else the center. */
+export function dropTargetAt(
+  rect: { left: number; top: number; width: number; height: number },
+  x: number,
+  y: number,
+): DropTarget {
+  const fx = (x - rect.left) / rect.width;
+  const fy = (y - rect.top) / rect.height;
+  const distances: [DropTarget, number][] = [
+    ["left", fx],
+    ["right", 1 - fx],
+    ["top", fy],
+    ["bottom", 1 - fy],
+  ];
+  const [edge, distance] = distances.reduce((best, entry) =>
+    entry[1] < best[1] ? entry : best,
+  );
+  return distance < EDGE_SHARE ? edge : "center";
+}
+
+/** The part of a rect a drop target covers, for drawing the highlight. */
+export function dropTargetRect(
+  rect: { left: number; top: number; width: number; height: number },
+  target: DropTarget,
+): SplitDropHover["rect"] {
+  const { left, top, width, height } = rect;
+  switch (target) {
+    case "left":
+      return { left, top, width: width / 2, height };
+    case "right":
+      return { left: left + width / 2, top, width: width / 2, height };
+    case "top":
+      return { left, top, width, height: height / 2 };
+    case "bottom":
+      return { left, top: top + height / 2, width, height: height / 2 };
+    default:
+      return { left, top, width, height };
+  }
+}

src/ui/shell/split/split-presets.ts

@@ -0,0 +1,162 @@
+import {
+  createPane,
+  createSplitNode,
+  createSplitState,
+  listPanes,
+  type LayoutNode,
+  type SplitState,
+} from "./split-tree";
+
+/** Starting layouts offered in the layout picker. Any pane can be split further. */
+export type SplitPresetId =
+  | "columns-2"
+  | "rows-2"
+  | "columns-3"
+  | "main-left-3"
+  | "main-bottom-3"
+  | "grid-4"
+  | "grid-5"
+  | "grid-6";
+
+export interface SplitPreset {
+  id: SplitPresetId;
+  titleKey: string;
+  panes: number;
+}
+
+export const SPLIT_PRESETS: SplitPreset[] = [
+  { id: "columns-2", titleKey: "splitScreen.presets.columns2", panes: 2 },
+  { id: "rows-2", titleKey: "splitScreen.presets.rows2", panes: 2 },
+  { id: "columns-3", titleKey: "splitScreen.presets.columns3", panes: 3 },
+  { id: "main-left-3", titleKey: "splitScreen.presets.mainLeft3", panes: 3 },
+  {
+    id: "main-bottom-3",
+    titleKey: "splitScreen.presets.mainBottom3",
+    panes: 3,
+  },
+  { id: "grid-4", titleKey: "splitScreen.presets.grid4", panes: 4 },
+  { id: "grid-5", titleKey: "splitScreen.presets.grid5", panes: 5 },
+  { id: "grid-6", titleKey: "splitScreen.presets.grid6", panes: 6 },
+];
+
+type Sizes = { outer?: number[]; inner?: number[][] };
+
+/**
+ * Builds a preset's tree, filling panes in reading order from `tabIds`.
+ * `sizes` lets the legacy mapping keep the user's divider positions.
+ */
+export function buildPreset(
+  id: SplitPresetId,
+  tabIds: (string | null)[] = [],
+  sizes: Sizes = {},
+): LayoutNode {
+  const p = (index: number) => createPane(tabIds[index] ?? null);
+  const inner = (index: number) => sizes.inner?.[index];
+  switch (id) {
+    case "columns-2":
+      return createSplitNode("row", [p(0), p(1)], inner(0));
+    case "rows-2":
+      return createSplitNode("column", [p(0), p(1)], sizes.outer);
+    case "columns-3":
+      return createSplitNode("row", [p(0), p(1), p(2)], inner(0));
+    case "main-left-3": {
+      const first = inner(0)?.[0];
+      return createSplitNode(
+        "row",
+        [p(0), createSplitNode("column", [p(1), p(2)], sizes.outer)],
+        first !== undefined ? [first, 100 - first] : undefined,
+      );
+    }
+    case "main-bottom-3":
+      return createSplitNode(
+        "column",
+        [createSplitNode("row", [p(0), p(1)], inner(0)), p(2)],
+        sizes.outer,
+      );
+    case "grid-4":
+      return createSplitNode(
+        "column",
+        [
+          createSplitNode("row", [p(0), p(1)], inner(0)),
+          createSplitNode("row", [p(2), p(3)], inner(1)),
+        ],
+        sizes.outer,
+      );
+    case "grid-5":
+      return createSplitNode(
+        "column",
+        [
+          createSplitNode("row", [p(0), p(1), p(2)], inner(0)),
+          createSplitNode("row", [p(3), p(4)], inner(1)),
+        ],
+        sizes.outer,
+      );
+    case "grid-6":
+      return createSplitNode(
+        "column",
+        [
+          createSplitNode("row", [p(0), p(1), p(2)], inner(0)),
+          createSplitNode("row", [p(3), p(4), p(5)], inner(1)),
+        ],
+        sizes.outer,
+      );
+  }
+}
+
+/**
+ * Re-lays an existing split out as a preset, keeping its tabs in reading
+ * order. Tabs past the preset's pane count drop out of the split.
+ */
+export function applyPreset(state: SplitState, id: SplitPresetId): SplitState {
+  const tabIds = listPanes(state.root).flatMap((pane) =>
+    pane.tabId ? [pane.tabId] : [],
+  );
+  return createSplitState(buildPreset(id, tabIds));
+}
+
+/** Split modes from before the layout tree, still found in storage and old workspaces. */
+export type LegacySplitMode =
+  | "2-way"
+  | "2-way-horizontal"
+  | "3-way"
+  | "3-way-horizontal"
+  | "4-way"
+  | "5-way"
+  | "6-way";
+
+const LEGACY_PRESETS: Record<LegacySplitMode, SplitPresetId> = {
+  "2-way": "columns-2",
+  "2-way-horizontal": "rows-2",
+  "3-way": "main-left-3",
+  "3-way-horizontal": "main-bottom-3",
+  "4-way": "grid-4",
+  "5-way": "grid-5",
+  "6-way": "grid-6",
+};
+
+function validSizes(value: unknown): number[] | undefined {
+  return Array.isArray(value) &&
+    value.length > 0 &&
+    value.every((n) => typeof n === "number" && n > 0)
+    ? value
+    : undefined;
+}
+
+/** Maps an old fixed-mode split onto the tree, keeping sizes where they fit. */
+export function fromLegacyConfig(
+  mode: string,
+  paneTabIds: (string | null)[],
+  rowSizes?: unknown,
+  rowColSizes?: unknown,
+): LayoutNode | null {
+  const presetId = LEGACY_PRESETS[mode as LegacySplitMode];
+  if (!presetId) return null;
+  const inner = Array.isArray(rowColSizes)
+    ? rowColSizes.map((row) => validSizes(row) ?? [])
+    : undefined;
+  return buildPreset(presetId, paneTabIds, {
+    outer: validSizes(rowSizes),
+    inner: inner?.map((row) => (row.length > 0 ? row : undefined)) as
+      number[][] | undefined,
+  });
+}

src/ui/shell/split/split-tabs.ts

@@ -0,0 +1,347 @@
+import type { LayoutNode, SplitState, Tab } from "@/types/ui-types";
+import {
+  assignTab,
+  clearTab,
+  createSplitState,
+  findPaneByTab,
+  focusPane,
+  listPanes,
+  mapTabIds,
+  normalizeState,
+  tabIdsInSplit,
+} from "./split-tree";
+import { fromLegacyConfig, type SplitPresetId } from "./split-presets";
+
+/**
+ * Split tabs as they live in the shell's tab list. A split tab owns its
+ * layout tree; every tab shown in one of its panes carries parentSplitTabId
+ * so the tab bar hides it. These keep the two in step.
+ */
+
+export const SPLIT_TAB_TYPE = "split-screen";
+
+export type SplitTab = Tab & { split: SplitState };
+
+export function isSplitTab(tab: Tab | undefined | null): tab is SplitTab {
+  return !!tab && tab.type === SPLIT_TAB_TYPE && !!tab.split;
+}
+
+/** Tabs a pane may hold: anything but the dashboard and other splits. */
+export function canJoinSplit(tab: Tab | undefined | null): boolean {
+  return !!tab && tab.type !== "dashboard" && tab.type !== SPLIT_TAB_TYPE;
+}
+
+export function splitTabOf(tabs: Tab[], tabId: string): SplitTab | undefined {
+  const tab = tabs.find((t) => t.id === tabId);
+  const parentId = tab?.parentSplitTabId;
+  const parent = parentId ? tabs.find((t) => t.id === parentId) : undefined;
+  if (isSplitTab(parent) && findPaneByTab(parent.split, tabId)) return parent;
+  return tabs.find(
+    (t): t is SplitTab => isSplitTab(t) && !!findPaneByTab(t.split, tabId),
+  );
+}
+
+/**
+ * Makes parentSplitTabId match the trees. Pane tab ids that no longer exist
+ * are emptied, and a tab claimed by two splits stays with the first.
+ */
+export function syncSplitChildren(tabs: Tab[]): Tab[] {
+  const joinable = new Set(tabs.filter(canJoinSplit).map((tab) => tab.id));
+  const owner = new Map<string, string>();
+  let changed = false;
+
+  const withSplits = tabs.map((tab) => {
+    if (!isSplitTab(tab)) return tab;
+    const split = normalizeState(
+      tab.split,
+      (id) => joinable.has(id) && !owner.has(id),
+    );
+    for (const id of tabIdsInSplit(split)) owner.set(id, tab.id);
+    if (split === tab.split) return tab;
+    changed = true;
+    return { ...tab, split };
+  });
+
+  const next = withSplits.map((tab) => {
+    const parent = owner.get(tab.id);
+    if (parent) {
+      if (tab.parentSplitTabId === parent) return tab;
+      changed = true;
+      return { ...tab, parentSplitTabId: parent };
+    }
+    if (tab.parentSplitTabId === undefined) return tab;
+    changed = true;
+    const { parentSplitTabId: _released, ...released } = tab;
+    return released;
+  });
+
+  return changed ? next : tabs;
+}
+
+/** Empties the panes holding these tabs in every split but `exceptSplitId`. */
+function releaseFromSplits(
+  tabs: Tab[],
+  tabIds: string[],
+  exceptSplitId?: string,
+): Tab[] {
+  if (tabIds.length === 0) return tabs;
+  return tabs.map((tab) => {
+    if (!isSplitTab(tab) || tab.id === exceptSplitId) return tab;
+    let split = tab.split;
+    for (const id of tabIds) split = clearTab(split, id);
+    return split === tab.split ? tab : { ...tab, split };
+  });
+}
+
+/**
+ * Applies `fn` to one split's state. Returning null closes the split and
+ * sends its tabs back to the tab bar.
+ */
+export function updateSplit(
+  tabs: Tab[],
+  splitTabId: string,
+  fn: (state: SplitState) => SplitState | null,
+): Tab[] {
+  const target = tabs.find((tab) => tab.id === splitTabId);
+  if (!isSplitTab(target)) return tabs;
+  const next = fn(target.split);
+  if (next === target.split) return tabs;
+  if (!next) return closeSplitTab(tabs, splitTabId);
+  const claimed = tabIdsInSplit(next);
+  const released = releaseFromSplits(tabs, claimed, splitTabId);
+  return syncSplitChildren(
+    released.map((tab) =>
+      tab.id === splitTabId ? { ...tab, split: next } : tab,
+    ),
+  );
+}
+
+export function makeSplitTab(
+  instanceId: string,
+  label: string,
+  split: SplitState,
+  openedAt = Date.now(),
+): SplitTab {
+  return {
+    id: `split-${instanceId}`,
+    instanceId,
+    type: SPLIT_TAB_TYPE,
+    label,
+    openedAt,
+    split,
+  };
+}
+
+/** Adds a split tab, taking its tabs out of any other split. */
+export function addSplitTab(tabs: Tab[], splitTab: SplitTab): Tab[] {
+  const released = releaseFromSplits(tabs, tabIdsInSplit(splitTab.split));
+  return syncSplitChildren([...released, splitTab]);
+}
+
+/** Removes a split tab. Its tabs go back to the tab bar. */
+export function closeSplitTab(tabs: Tab[], splitTabId: string): Tab[] {
+  return syncSplitChildren(tabs.filter((tab) => tab.id !== splitTabId));
+}
+
+/**
+ * Removes a closed tab. A pane that held it stays, empty and focused, so the
+ * next thing the user opens can go straight into it.
+ */
+export function removeTab(tabs: Tab[], tabId: string): Tab[] {
+  const without = tabs
+    .filter((tab) => tab.id !== tabId)
+    .map((tab) => {
+      if (!isSplitTab(tab)) return tab;
+      const pane = findPaneByTab(tab.split, tabId);
+      if (!pane) return tab;
+      return {
+        ...tab,
+        split: focusPane(clearTab(tab.split, tabId), pane.id),
+      };
+    });
+  return syncSplitChildren(without);
+}
+
+/** Puts a tab in a pane of a split and focuses that pane. */
+export function placeTabInPane(
+  tabs: Tab[],
+  splitTabId: string,
+  paneId: string,
+  tabId: string,
+): Tab[] {
+  if (!canJoinSplit(tabs.find((tab) => tab.id === tabId))) return tabs;
+  return updateSplit(tabs, splitTabId, (state) =>
+    focusPane(assignTab(state, paneId, tabId), paneId),
+  );
+}
+
+/** What the tab bar asks the shell to do with splits. */
+export type TabSplitAction =
+  | { kind: "split"; tabId: string; edge: "right" | "bottom" }
+  | { kind: "addToPane"; tabId: string; splitTabId: string; paneId: string }
+  | {
+      kind: "addPane";
+      tabId: string;
+      splitTabId: string;
+      edge: "right" | "bottom";
+    }
+  | { kind: "unsplit"; splitTabId: string }
+  | { kind: "splitActive"; edge: "right" | "bottom" }
+  | { kind: "preset"; presetId: SplitPresetId };
+
+/** The lowest N not already used by a "Split N" style label. */
+export function nextSplitNumber(
+  tabs: Tab[],
+  labelFor: (n: number) => string,
+): number {
+  const used = new Set(
+    tabs.filter((tab) => tab.type === SPLIT_TAB_TYPE).map((tab) => tab.label),
+  );
+  let n = 1;
+  while (used.has(labelFor(n))) n += 1;
+  return n;
+}
+
+export interface SplitPaneSummary {
+  id: string;
+  /** 1-based, in reading order. */
+  index: number;
+  tabId: string | null;
+  /** The tab's label, or null for an empty pane. */
+  label: string | null;
+}
+
+export interface SplitSummary {
+  id: string;
+  label: string;
+  panes: SplitPaneSummary[];
+  full: boolean;
+}
+
+export function summarizeSplits(tabs: Tab[], maxPanes: number): SplitSummary[] {
+  const byId = new Map(tabs.map((tab) => [tab.id, tab]));
+  return tabs.filter(isSplitTab).map((tab) => {
+    const panes = listPanes(tab.split.root);
+    return {
+      id: tab.id,
+      label: tab.label,
+      panes: panes.map((pane, i) => {
+        const inPane = pane.tabId ? byId.get(pane.tabId) : undefined;
+        return {
+          id: pane.id,
+          index: i + 1,
+          tabId: pane.tabId,
+          label: inPane ? inPane.customLabel || inPane.label : null,
+        };
+      }),
+      full: panes.length >= maxPanes,
+    };
+  });
+}
+
+// ─── Persistence ──────────────────────────────────────────────────────────────
+
+/** Saved in localStorage; pane tab ids are tab instanceIds, which survive a reload. */
+export type PersistedSplitTab = {
+  version: 2;
+  instanceId: string;
+  label: string;
+  root: LayoutNode;
+  focusedPaneId: string;
+};
+
+/** The shape saved before the layout tree. */
+type LegacyPersistedSplitTab = {
+  instanceId: string;
+  label: string;
+  mode: string;
+  paneInstanceIds: (string | null)[];
+  rowSizes?: number[];
+  rowColSizes?: number[][];
+};
+
+export function serializeSplitTabs(tabs: Tab[]): PersistedSplitTab[] {
+  const instanceIdById = new Map(tabs.map((tab) => [tab.id, tab.instanceId]));
+  return tabs.filter(isSplitTab).map((tab) => ({
+    version: 2,
+    instanceId: tab.instanceId,
+    label: tab.label,
+    root: mapTabIds(tab.split.root, (id) => instanceIdById.get(id) ?? null),
+    focusedPaneId: tab.split.focusedPaneId,
+  }));
+}
+
+function isLayoutNode(value: unknown): value is LayoutNode {
+  if (!value || typeof value !== "object") return false;
+  const node = value as Partial<LayoutNode>;
+  if (node.kind === "pane") return typeof node.id === "string";
+  if (node.kind === "split") {
+    return (
+      typeof node.id === "string" &&
+      (node.direction === "row" || node.direction === "column") &&
+      Array.isArray(node.children) &&
+      node.children.length > 0 &&
+      Array.isArray(node.sizes) &&
+      node.children.every(isLayoutNode)
+    );
+  }
+  return false;
+}
+
+/**
+ * Rebuilds a saved split's tree with live tab ids. `resolve` maps whatever
+ * the save used (instanceIds, workspace slotIds) to a live tab id. Null when
+ * the entry is unreadable or none of its tabs came back.
+ */
+export function restoreSplitState(
+  entry: unknown,
+  resolve: (savedId: string) => string | null,
+): SplitState | null {
+  if (!entry || typeof entry !== "object") return null;
+  const saved = entry as Partial<PersistedSplitTab> &
+    Partial<LegacyPersistedSplitTab>;
+  let root: LayoutNode | null = null;
+  let focusedPaneId: string | undefined;
+  if (isLayoutNode(saved.root)) {
+    root = mapTabIds(saved.root, resolve);
+    focusedPaneId = saved.focusedPaneId;
+  } else if (
+    typeof saved.mode === "string" &&
+    Array.isArray(saved.paneInstanceIds)
+  ) {
+    root = fromLegacyConfig(
+      saved.mode,
+      saved.paneInstanceIds.map((id) => (id ? resolve(id) : null)),
+      saved.rowSizes,
+      saved.rowColSizes,
+    );
+  }
+  if (!root) return null;
+  const state = normalizeState(createSplitState(root, focusedPaneId));
+  return tabIdsInSplit(state).length > 0 ? state : null;
+}
+
+export function restoreSplitTabs(
+  persisted: unknown[],
+  tabs: Tab[],
+  openedAt = Date.now(),
+): Tab[] {
+  const tabIdByInstanceId = new Map(
+    tabs.map((tab) => [tab.instanceId, tab.id]),
+  );
+  let next = tabs;
+  for (const entry of persisted) {
+    const saved = entry as { instanceId?: unknown; label?: unknown };
+    if (typeof saved?.instanceId !== "string") continue;
+    const instanceId = saved.instanceId;
+    if (next.some((tab) => tab.instanceId === instanceId)) continue;
+    const split = restoreSplitState(
+      entry,
+      (id) => tabIdByInstanceId.get(id) ?? null,
+    );
+    if (!split) continue;
+    const label = typeof saved.label === "string" ? saved.label : "";
+    next = addSplitTab(next, makeSplitTab(instanceId, label, split, openedAt));
+  }
+  return next;
+}

src/ui/shell/split/split-targets.ts

@@ -0,0 +1,65 @@
+import { useSyncExternalStore } from "react";
+import type { SplitSummary } from "./split-tabs";
+
+/**
+ * Lets menus outside the shell (the host list) offer "Open in split" without
+ * threading split state through every sidebar component. The shell publishes
+ * its splits here and registers how to aim the next opened tab at a pane.
+ */
+
+export type SplitOpenTarget =
+  | { kind: "pane"; splitTabId: string; paneId: string }
+  | { kind: "newPane"; splitTabId: string }
+  /** A new split holding the active tab and the opened one. */
+  | { kind: "newSplit" };
+
+export interface SplitTargetsSnapshot {
+  splits: SplitSummary[];
+  /** The active tab can start a new split. */
+  canStartSplit: boolean;
+}
+
+type Opener = (target: SplitOpenTarget, open: () => void) => void;
+
+const EMPTY: SplitTargetsSnapshot = { splits: [], canStartSplit: false };
+let snapshot: SplitTargetsSnapshot = EMPTY;
+let snapshotKey = "";
+let opener: Opener | null = null;
+const listeners = new Set<() => void>();
+
+export function publishSplitTargets(next: SplitTargetsSnapshot) {
+  const key = JSON.stringify(next);
+  if (key === snapshotKey) return;
+  snapshotKey = key;
+  snapshot = next;
+  for (const listener of listeners) listener();
+}
+
+export function setSplitOpener(next: Opener): () => void {
+  opener = next;
+  return () => {
+    if (opener === next) {
+      opener = null;
+      publishSplitTargets(EMPTY);
+    }
+  };
+}
+
+/** Runs `open` so whatever tab it opens lands in `target`. */
+export function openInSplit(target: SplitOpenTarget, open: () => void) {
+  if (opener) opener(target, open);
+  else open();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function useSplitTargets(): SplitTargetsSnapshot {
+  return useSyncExternalStore(
+    subscribe,
+    () => snapshot,
+    () => EMPTY,
+  );
+}

src/ui/shell/split/split-tree.ts

@@ -0,0 +1,571 @@
+import { createId } from "@/lib/create-id";
+import type {
+  LayoutNode,
+  PaneNode,
+  SplitDirection,
+  SplitNode,
+  SplitState,
+} from "@/types/ui-types";
+
+/**
+ * The layout of one split tab: a tree where every leaf is a pane holding at
+ * most one tab, and every inner node lays its children out in a row (side by
+ * side) or a column (stacked). All functions here are pure and return a new
+ * state, so the shell can keep the whole thing on the split tab itself.
+ */
+
+export const MAX_PANES = 8;
+/** Smallest share of its parent a pane or group can be dragged down to. */
+export const MIN_PANE_SIZE = 10;
+
+export type {
+  SplitDirection,
+  PaneNode,
+  SplitNode,
+  LayoutNode,
+  SplitState,
+} from "@/types/ui-types";
+export type PaneEdge = "left" | "right" | "top" | "bottom";
+export type DropTarget = PaneEdge | "center";
+export type NavDirection = "left" | "right" | "up" | "down";
+
+export interface PaneRect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export function createPane(tabId: string | null = null): PaneNode {
+  return { kind: "pane", id: createId(), tabId };
+}
+
+export function evenSizes(count: number): number[] {
+  return Array.from({ length: count }, () => 100 / count);
+}
+
+export function createSplitNode(
+  direction: SplitDirection,
+  children: LayoutNode[],
+  sizes?: number[],
+): SplitNode {
+  return {
+    kind: "split",
+    id: createId(),
+    direction,
+    children,
+    sizes:
+      sizes && sizes.length === children.length
+        ? scaleTo100(sizes)
+        : evenSizes(children.length),
+  };
+}
+
+export function createSplitState(
+  root: LayoutNode,
+  focusedPaneId?: string,
+): SplitState {
+  const panes = listPanes(root);
+  const focused =
+    panes.find((pane) => pane.id === focusedPaneId) ??
+    panes.find((pane) => pane.tabId === null) ??
+    panes[0];
+  return { root, focusedPaneId: focused.id, zoomedPaneId: null };
+}
+
+export function listPanes(node: LayoutNode): PaneNode[] {
+  if (node.kind === "pane") return [node];
+  return node.children.flatMap(listPanes);
+}
+
+export function paneCount(state: SplitState): number {
+  return listPanes(state.root).length;
+}
+
+export function findPane(
+  state: SplitState,
+  paneId: string,
+): PaneNode | undefined {
+  return listPanes(state.root).find((pane) => pane.id === paneId);
+}
+
+export function findPaneByTab(
+  state: SplitState,
+  tabId: string,
+): PaneNode | undefined {
+  return listPanes(state.root).find((pane) => pane.tabId === tabId);
+}
+
+export function emptyPanes(state: SplitState): PaneNode[] {
+  return listPanes(state.root).filter((pane) => pane.tabId === null);
+}
+
+export function tabIdsInSplit(state: SplitState): string[] {
+  return listPanes(state.root).flatMap((pane) =>
+    pane.tabId ? [pane.tabId] : [],
+  );
+}
+
+/**
+ * The panes on screen: just the zoomed one, just the focused one when only
+ * one fits (mobile), else all of them.
+ */
+export function shownPanes(state: SplitState, onePaneOnly = false): PaneNode[] {
+  const panes = listPanes(state.root);
+  const single =
+    state.zoomedPaneId ?? (onePaneOnly ? state.focusedPaneId : null);
+  const pane = single ? panes.find((p) => p.id === single) : undefined;
+  return pane ? [pane] : panes;
+}
+
+export function canAddPane(state: SplitState): boolean {
+  return paneCount(state) < MAX_PANES;
+}
+
+function edgeDirection(edge: PaneEdge): SplitDirection {
+  return edge === "left" || edge === "right" ? "row" : "column";
+}
+
+function isLeadingEdge(edge: PaneEdge): boolean {
+  return edge === "left" || edge === "top";
+}
+
+function scaleTo100(sizes: number[]): number[] {
+  const total = sizes.reduce((sum, size) => sum + size, 0);
+  if (!(total > 0)) return evenSizes(sizes.length);
+  return sizes.map((size) => (size / total) * 100);
+}
+
+function mapPanes(
+  node: LayoutNode,
+  fn: (pane: PaneNode) => PaneNode,
+): LayoutNode {
+  if (node.kind === "pane") return fn(node);
+  let changed = false;
+  const children = node.children.map((child) => {
+    const next = mapPanes(child, fn);
+    if (next !== child) changed = true;
+    return next;
+  });
+  return changed ? { ...node, children } : node;
+}
+
+function mapSplit(
+  node: LayoutNode,
+  splitId: string,
+  fn: (split: SplitNode) => SplitNode,
+): LayoutNode {
+  if (node.kind === "pane") return node;
+  if (node.id === splitId) return fn(node);
+  let changed = false;
+  const children = node.children.map((child) => {
+    const next = mapSplit(child, splitId, fn);
+    if (next !== child) changed = true;
+    return next;
+  });
+  return changed ? { ...node, children } : node;
+}
+
+/**
+ * Collapses groups with one child, inlines a child group running the same
+ * way as its parent, and rescales sizes. Keeps the tree in the one shape the
+ * rest of the code expects after any edit.
+ */
+export function normalizeNode(node: LayoutNode): LayoutNode {
+  if (node.kind === "pane") return node;
+  const children: LayoutNode[] = [];
+  const sizes: number[] = [];
+  const baseSizes =
+    node.sizes.length === node.children.length
+      ? node.sizes
+      : evenSizes(node.children.length);
+  let changed = baseSizes !== node.sizes;
+  node.children.forEach((raw, index) => {
+    const child = normalizeNode(raw);
+    if (child !== raw) changed = true;
+    const size = baseSizes[index] ?? 0;
+    if (child.kind === "split" && child.direction === node.direction) {
+      changed = true;
+      child.children.forEach((grandchild, i) => {
+        children.push(grandchild);
+        sizes.push((size * child.sizes[i]) / 100);
+      });
+    } else {
+      children.push(child);
+      sizes.push(size);
+    }
+  });
+  if (children.length === 1) return children[0];
+  const total = sizes.reduce((sum, size) => sum + size, 0);
+  if (!changed && Math.abs(total - 100) < 0.01) return node;
+  return { ...node, children, sizes: scaleTo100(sizes) };
+}
+
+function insertBeside(
+  node: LayoutNode,
+  paneId: string,
+  edge: PaneEdge,
+  newPane: PaneNode,
+): LayoutNode {
+  const direction = edgeDirection(edge);
+  if (node.kind === "pane") {
+    if (node.id !== paneId) return node;
+    return createSplitNode(
+      direction,
+      isLeadingEdge(edge) ? [newPane, node] : [node, newPane],
+    );
+  }
+  const index = node.children.findIndex(
+    (child) => child.kind === "pane" && child.id === paneId,
+  );
+  if (index !== -1 && node.direction === direction) {
+    const children = [...node.children];
+    const sizes = [...node.sizes];
+    const half = sizes[index] / 2;
+    const insertAt = isLeadingEdge(edge) ? index : index + 1;
+    sizes[index] = half;
+    children.splice(insertAt, 0, newPane);
+    sizes.splice(insertAt, 0, half);
+    return { ...node, children, sizes };
+  }
+  let changed = false;
+  const children = node.children.map((child) => {
+    const next = insertBeside(child, paneId, edge, newPane);
+    if (next !== child) changed = true;
+    return next;
+  });
+  return changed ? { ...node, children } : node;
+}
+
+/** Removes `tabId` from every pane except `keepPaneId`: a tab lives in one pane. */
+function releaseTabElsewhere(
+  node: LayoutNode,
+  tabId: string,
+  keepPaneId: string,
+): LayoutNode {
+  return mapPanes(node, (pane) =>
+    pane.tabId === tabId && pane.id !== keepPaneId
+      ? { ...pane, tabId: null }
+      : pane,
+  );
+}
+
+/**
+ * Adds a pane next to `paneId`, holding `tabId` or empty. Null when the pane
+ * does not exist or the split is full.
+ */
+export function splitPane(
+  state: SplitState,
+  paneId: string,
+  edge: PaneEdge,
+  tabId: string | null = null,
+): { state: SplitState; paneId: string } | null {
+  if (!findPane(state, paneId) || !canAddPane(state)) return null;
+  const newPane = createPane(tabId);
+  let root = insertBeside(state.root, paneId, edge, newPane);
+  if (tabId) root = releaseTabElsewhere(root, tabId, newPane.id);
+  return {
+    state: {
+      ...state,
+      root: normalizeNode(root),
+      focusedPaneId: newPane.id,
+      zoomedPaneId: null,
+    },
+    paneId: newPane.id,
+  };
+}
+
+/** Adds a pane along one outer edge of the whole split. */
+export function addPaneAtEdge(
+  state: SplitState,
+  edge: PaneEdge,
+  tabId: string | null = null,
+): { state: SplitState; paneId: string } | null {
+  if (!canAddPane(state)) return null;
+  const direction = edgeDirection(edge);
+  const newPane = createPane(tabId);
+  const leading = isLeadingEdge(edge);
+  let root: LayoutNode;
+  if (state.root.kind === "split" && state.root.direction === direction) {
+    const count = state.root.children.length;
+    const share = 100 / (count + 1);
+    const scaled = state.root.sizes.map((size) => (size * count) / (count + 1));
+    root = {
+      ...state.root,
+      children: leading
+        ? [newPane, ...state.root.children]
+        : [...state.root.children, newPane],
+      sizes: leading ? [share, ...scaled] : [...scaled, share],
+    };
+  } else {
+    root = createSplitNode(
+      direction,
+      leading ? [newPane, state.root] : [state.root, newPane],
+    );
+  }
+  if (tabId) root = releaseTabElsewhere(root, tabId, newPane.id);
+  return {
+    state: {
+      ...state,
+      root: normalizeNode(root),
+      focusedPaneId: newPane.id,
+      zoomedPaneId: null,
+    },
+    paneId: newPane.id,
+  };
+}
+
+function withoutPane(node: LayoutNode, paneId: string): LayoutNode | null {
+  if (node.kind === "pane") return node.id === paneId ? null : node;
+  const children: LayoutNode[] = [];
+  const sizes: number[] = [];
+  let changed = false;
+  node.children.forEach((child, index) => {
+    const next = withoutPane(child, paneId);
+    if (next !== child) changed = true;
+    if (next) {
+      children.push(next);
+      sizes.push(node.sizes[index]);
+    }
+  });
+  if (!changed) return node;
+  if (children.length === 0) return null;
+  return { ...node, children, sizes };
+}
+
+/** Removes a pane. Null when it was the last one, so the split should close. */
+export function removePane(
+  state: SplitState,
+  paneId: string,
+): SplitState | null {
+  const before = listPanes(state.root);
+  const index = before.findIndex((pane) => pane.id === paneId);
+  if (index === -1) return state;
+  const raw = withoutPane(state.root, paneId);
+  if (!raw) return null;
+  const root = normalizeNode(raw);
+  const after = listPanes(root);
+  const focusedPaneId =
+    state.focusedPaneId !== paneId &&
+    after.some((pane) => pane.id === state.focusedPaneId)
+      ? state.focusedPaneId
+      : after[Math.max(0, index - 1)].id;
+  return {
+    root,
+    focusedPaneId,
+    zoomedPaneId: state.zoomedPaneId === paneId ? null : state.zoomedPaneId,
+  };
+}
+
+/** Puts a tab in a pane (or empties it with null), moving it out of any other pane. */
+export function assignTab(
+  state: SplitState,
+  paneId: string,
+  tabId: string | null,
+): SplitState {
+  if (!findPane(state, paneId)) return state;
+  const root = mapPanes(state.root, (pane) => {
+    if (pane.id === paneId)
+      return pane.tabId === tabId ? pane : { ...pane, tabId };
+    if (tabId && pane.tabId === tabId) return { ...pane, tabId: null };
+    return pane;
+  });
+  return root === state.root ? state : { ...state, root };
+}
+
+/** Empties whichever pane holds the tab, leaving the pane in place. */
+export function clearTab(state: SplitState, tabId: string): SplitState {
+  const root = mapPanes(state.root, (pane) =>
+    pane.tabId === tabId ? { ...pane, tabId: null } : pane,
+  );
+  return root === state.root ? state : { ...state, root };
+}
+
+export function swapPanes(
+  state: SplitState,
+  firstId: string,
+  secondId: string,
+): SplitState {
+  const first = findPane(state, firstId);
+  const second = findPane(state, secondId);
+  if (!first || !second || firstId === secondId) return state;
+  const root = mapPanes(state.root, (pane) => {
+    if (pane.id === firstId) return { ...pane, tabId: second.tabId };
+    if (pane.id === secondId) return { ...pane, tabId: first.tabId };
+    return pane;
+  });
+  return { ...state, root };
+}
+
+/**
+ * Drops one pane onto another: the center swaps their contents, an edge
+ * moves the dragged pane to that side of the target.
+ */
+export function movePane(
+  state: SplitState,
+  fromId: string,
+  toId: string,
+  target: DropTarget,
+): SplitState {
+  if (fromId === toId) return state;
+  const from = findPane(state, fromId);
+  if (!from || !findPane(state, toId)) return state;
+  if (target === "center") {
+    return { ...swapPanes(state, fromId, toId), focusedPaneId: toId };
+  }
+  const removed = removePane(state, fromId);
+  if (!removed) return state;
+  const moved = splitPane(removed, toId, target, from.tabId);
+  return moved ? moved.state : state;
+}
+
+export function focusPane(state: SplitState, paneId: string): SplitState {
+  if (state.focusedPaneId === paneId || !findPane(state, paneId)) return state;
+  return {
+    ...state,
+    focusedPaneId: paneId,
+    // Moving focus out of a zoomed pane would leave the user looking at a
+    // pane they are not typing into.
+    zoomedPaneId: state.zoomedPaneId ? paneId : state.zoomedPaneId,
+  };
+}
+
+export function toggleZoom(state: SplitState, paneId: string): SplitState {
+  if (!findPane(state, paneId)) return state;
+  const zoomed = state.zoomedPaneId === paneId;
+  return {
+    ...state,
+    focusedPaneId: paneId,
+    zoomedPaneId: zoomed ? null : paneId,
+  };
+}
+
+export function resizeSplit(
+  state: SplitState,
+  splitId: string,
+  sizes: number[],
+): SplitState {
+  const root = mapSplit(state.root, splitId, (split) =>
+    sizes.length === split.children.length
+      ? { ...split, sizes: scaleTo100(sizes) }
+      : split,
+  );
+  return root === state.root ? state : { ...state, root };
+}
+
+export function equalizeSplit(state: SplitState, splitId: string): SplitState {
+  const root = mapSplit(state.root, splitId, (split) => ({
+    ...split,
+    sizes: evenSizes(split.children.length),
+  }));
+  return root === state.root ? state : { ...state, root };
+}
+
+/**
+ * Moves the divider between children `index` and `index + 1` by `delta`
+ * percent, keeping both above MIN_PANE_SIZE.
+ */
+export function moveDivider(
+  sizes: number[],
+  index: number,
+  delta: number,
+): number[] {
+  const a = sizes[index];
+  const b = sizes[index + 1];
+  if (a === undefined || b === undefined) return sizes;
+  const nextA = Math.max(
+    MIN_PANE_SIZE,
+    Math.min(a + b - MIN_PANE_SIZE, a + delta),
+  );
+  const next = [...sizes];
+  next[index] = nextA;
+  next[index + 1] = a + b - nextA;
+  return next;
+}
+
+/**
+ * Repairs a state read from storage or left over after tabs closed: drops
+ * tab ids that no longer exist, keeps each tab in one pane, fixes focus.
+ */
+export function normalizeState(
+  state: SplitState,
+  isLiveTab: (tabId: string) => boolean = () => true,
+): SplitState {
+  const seen = new Set<string>();
+  const root = normalizeNode(
+    mapPanes(state.root, (pane) => {
+      if (!pane.tabId) return pane;
+      if (!isLiveTab(pane.tabId) || seen.has(pane.tabId)) {
+        return { ...pane, tabId: null };
+      }
+      seen.add(pane.tabId);
+      return pane;
+    }),
+  );
+  const panes = listPanes(root);
+  const focusedPaneId = panes.some((pane) => pane.id === state.focusedPaneId)
+    ? state.focusedPaneId
+    : panes[0].id;
+  const zoomedPaneId = panes.some((pane) => pane.id === state.zoomedPaneId)
+    ? (state.zoomedPaneId ?? null)
+    : null;
+  if (
+    root === state.root &&
+    focusedPaneId === state.focusedPaneId &&
+    zoomedPaneId === (state.zoomedPaneId ?? null)
+  ) {
+    return state;
+  }
+  return { root, focusedPaneId, zoomedPaneId };
+}
+
+/** Rewrites every pane's tab id, e.g. live ids to saved instance ids and back. */
+export function mapTabIds(
+  node: LayoutNode,
+  fn: (tabId: string) => string | null,
+): LayoutNode {
+  return mapPanes(node, (pane) =>
+    pane.tabId ? { ...pane, tabId: fn(pane.tabId) } : pane,
+  );
+}
+
+/**
+ * The pane next to `paneId` in a direction, by on-screen position. Picks the
+ * closest pane that overlaps along the other axis, then the one with the
+ * most overlap, so it works for any tree shape.
+ */
+export function neighborPane(
+  paneId: string,
+  direction: NavDirection,
+  rects: Record<string, PaneRect>,
+): string | null {
+  const from = rects[paneId];
+  if (!from) return null;
+  let best: { id: string; distance: number; overlap: number } | null = null;
+  for (const [id, rect] of Object.entries(rects)) {
+    if (id === paneId) continue;
+    let distance: number;
+    let overlap: number;
+    if (direction === "left" || direction === "right") {
+      distance =
+        direction === "right" ? rect.left - from.right : from.left - rect.right;
+      overlap =
+        Math.min(rect.bottom, from.bottom) - Math.max(rect.top, from.top);
+    } else {
+      distance =
+        direction === "down" ? rect.top - from.bottom : from.top - rect.bottom;
+      overlap =
+        Math.min(rect.right, from.right) - Math.max(rect.left, from.left);
+    }
+    // A pixel of slack for the dividers and sub-pixel layout.
+    if (distance < -2 || overlap <= 0) continue;
+    if (
+      !best ||
+      distance < best.distance - 1 ||
+      (Math.abs(distance - best.distance) <= 1 && overlap > best.overlap)
+    ) {
+      best = { id, distance, overlap };
+    }
+  }
+  return best?.id ?? null;
+}

src/ui/shell/splitTabUtils.ts

@@ -1,104 +0,0 @@
-import type { SplitMode, SplitTabConfig, Tab } from "@/types/ui-types";
-
-const EMPTY_PANES = 6;
-
-export type PersistedSplitTab = {
-  instanceId: string;
-  label: string;
-  mode: Exclude<SplitMode, "none">;
-  paneInstanceIds: (string | null)[];
-  rowSizes: number[];
-  rowColSizes: number[][];
-};
-
-export function createSplitConfig(
-  mode: Exclude<SplitMode, "none">,
-  paneTabIds: (string | null)[],
-  sizes: Pick<SplitTabConfig, "rowSizes" | "rowColSizes">,
-): SplitTabConfig {
-  return {
-    mode,
-    paneTabIds: [...paneTabIds, ...Array(EMPTY_PANES).fill(null)].slice(
-      0,
-      EMPTY_PANES,
-    ),
-    rowSizes: [...sizes.rowSizes],
-    rowColSizes: sizes.rowColSizes.map((row) => [...row]),
-  };
-}
-
-export function assignTabsToSplit(
-  tabs: Tab[],
-  splitTabId: string,
-  paneTabIds: (string | null)[],
-): Tab[] {
-  const assigned = new Set(paneTabIds.filter((id): id is string => !!id));
-  return tabs.map((tab) => {
-    if (tab.id === splitTabId) return tab;
-    if (assigned.has(tab.id)) return { ...tab, parentSplitTabId: splitTabId };
-    if (tab.parentSplitTabId === splitTabId) {
-      const { parentSplitTabId: _removed, ...released } = tab;
-      return released;
-    }
-    return tab;
-  });
-}
-
-export function releaseSplitTabs(tabs: Tab[], splitTabId: string): Tab[] {
-  return tabs
-    .filter((tab) => tab.id !== splitTabId)
-    .map((tab) => {
-      if (tab.parentSplitTabId !== splitTabId) return tab;
-      const { parentSplitTabId: _removed, ...released } = tab;
-      return released;
-    });
-}
-
-export function serializeSplitTabs(tabs: Tab[]): PersistedSplitTab[] {
-  const instanceIdById = new Map(tabs.map((tab) => [tab.id, tab.instanceId]));
-  return tabs.flatMap((tab) => {
-    if (tab.type !== "split-screen" || !tab.splitConfig) return [];
-    return [
-      {
-        instanceId: tab.instanceId,
-        label: tab.label,
-        mode: tab.splitConfig.mode,
-        paneInstanceIds: tab.splitConfig.paneTabIds.map((id) =>
-          id ? (instanceIdById.get(id) ?? null) : null,
-        ),
-        rowSizes: [...tab.splitConfig.rowSizes],
-        rowColSizes: tab.splitConfig.rowColSizes.map((row) => [...row]),
-      },
-    ];
-  });
-}
-
-export function restoreSplitTabs(
-  persisted: PersistedSplitTab[],
-  tabs: Tab[],
-  openedAt = Date.now(),
-): Tab[] {
-  const tabIdByInstanceId = new Map(
-    tabs.map((tab) => [tab.instanceId, tab.id]),
-  );
-  let next = [...tabs];
-
-  for (const saved of persisted) {
-    const id = `split-${saved.instanceId}`;
-    const paneTabIds = saved.paneInstanceIds.map((instanceId) =>
-      instanceId ? (tabIdByInstanceId.get(instanceId) ?? null) : null,
-    );
-    if (!paneTabIds.some(Boolean)) continue;
-    const splitTab: Tab = {
-      id,
-      instanceId: saved.instanceId,
-      type: "split-screen",
-      label: saved.label,
-      openedAt,
-      splitConfig: createSplitConfig(saved.mode, paneTabIds, saved),
-    };
-    next = assignTabsToSplit([...next, splitTab], id, paneTabIds);
-  }
-
-  return next;
-}

src/ui/shell/tab-registry.ts

@@ -0,0 +1,157 @@
+import type { ComponentType, Ref } from "react";
+import type { HostDraft } from "@termix/plugin-sdk/frontend";
+import type { Host, Tab } from "@/types/ui-types";
+import { createRegistry } from "@/lib/registry";
+import { viewOwner } from "@/plugin-host/view-ownership";
+
+/**
+ * The shell callbacks a registered tab may use. Same bag every tab gets, so
+ * a plugin tab can do anything a core tab can without new positional props.
+ */
+export interface TabShellCallbacks {
+  openTab: (
+    host: Host | null,
+    type: string,
+    options?: {
+      label?: string;
+      forceNewTab?: boolean;
+      data?: Record<string, unknown>;
+    },
+  ) => void;
+  openSingletonTab: (
+    type: string,
+    options?: { label?: string; data?: Record<string, unknown> },
+  ) => void;
+  /** Connects the way clicking the host in the host list does. */
+  connectHost: (host: Host, type?: string) => void;
+  closeTab: (tabId: string) => void;
+  renameTab: (tabId: string, label: string) => void;
+
+  openRailView: (id: string) => void;
+  /** Closes a rail view wherever it is shown, e.g. when its feature goes away. */
+  closeRailView: (id: string) => void;
+  /** Opens the host editor for a new host with these fields filled in. */
+  openHostEditor?: (draft?: HostDraft) => void;
+  /** Saves a quick-connect tab's host. Core terminal only. */
+  saveQuickConnect?: (tab: Tab, host: Host) => Promise<void>;
+}
+
+export interface TabRenderProps {
+  tab: Tab;
+  host?: Host;
+  /** The host in the shape SSH-facing components take. */
+  sshHost?: Record<string, unknown>;
+  label: string;
+  isVisible: boolean;
+  isFocusedPane: boolean;
+  inSplit?: boolean;
+  handleRef: Ref<unknown>;
+  shell: TabShellCallbacks;
+}
+
+export interface StandaloneViewProps {
+  hostId?: string;
+  view: string;
+  params: URLSearchParams;
+}
+
+export interface TabTypeDef {
+  /** The tab type. */
+  id: string;
+  pluginId?: string;
+  component: ComponentType<TabRenderProps>;
+  icon?: ComponentType<{ className?: string }>;
+  titleKey?: string;
+  requiresHost?: boolean;
+  noHostMessageKey?: string;
+  persistent?: boolean;
+  singleton?: boolean;
+  session?: boolean;
+  hostless?: boolean;
+  restore?: (host: Host) => boolean;
+  activityTypes?: string[];
+  standalone?: ComponentType<StandaloneViewProps>;
+  standaloneViews?: string[];
+  panelFrame?: boolean;
+  /** False keeps this tab out of saved layouts and workspaces. */
+  inLayouts?: boolean;
+  /** Panels that type into a terminal act on the last one of these focused. */
+  commandTarget?: boolean;
+  /** Paints its own background; its frame stays transparent. */
+  ownBackground?: boolean;
+  /** Every open is a new tab. */
+  multiInstance?: boolean;
+  preload?: () => Promise<unknown>;
+}
+
+const registry = createRegistry<TabTypeDef>();
+
+export const registerTabType = registry.register;
+export const getTabType = registry.get;
+export const listTabTypes = registry.list;
+export const useTabTypes = registry.useList;
+export const resetTabTypes = registry.reset;
+
+/** Core tab types that are saved and reopened after login. */
+const CORE_PERSISTENT = new Set<string>();
+/** Core tab types that hold a live session (close confirm, refresh). */
+const CORE_SESSION = new Set<string>();
+/** Core tab types that restore without a host. */
+const CORE_HOSTLESS = new Set(["dashboard"]);
+
+/**
+ * A plugin tab type nobody registered right now: its plugin is off, failed or
+ * still loading. It keeps the behaviour it had, so a saved tab survives the
+ * plugin being disabled instead of being dropped by the next sync.
+ */
+function isOwnedButAbsent(type: string): boolean {
+  return !registry.get(type) && !!viewOwner("tab", type);
+}
+
+export function isPersistentTabType(type: string): boolean {
+  if (CORE_PERSISTENT.has(type)) return true;
+  const def = registry.get(type);
+  if (def) return !!def.persistent;
+  return isOwnedButAbsent(type);
+}
+
+export function isSessionTabType(type: string): boolean {
+  return CORE_SESSION.has(type) || !!registry.get(type)?.session;
+}
+
+function isHostlessTabType(type: string): boolean {
+  return CORE_HOSTLESS.has(type) || !!registry.get(type)?.hostless;
+}
+
+/** Whether a saved tab of this type may be restored for this host. */
+export function canRestoreTabType(
+  type: string,
+  host: Host | undefined,
+): boolean {
+  const def = registry.get(type);
+  if (!host) return isHostlessTabType(type) || isOwnedButAbsent(type);
+  return def?.restore ? def.restore(host) : true;
+}
+
+/** The tab type a recent-activity entry opens, if a registered tab claims it. */
+export function tabTypeForActivity(
+  activityType: string,
+): TabTypeDef | undefined {
+  return registry
+    .list()
+    .find(
+      (def) =>
+        def.id === activityType || def.activityTypes?.includes(activityType),
+    );
+}
+
+/** The registered tab serving a `?view=` full-screen link. */
+export function standaloneViewFor(view: string): TabTypeDef | undefined {
+  return registry
+    .list()
+    .find(
+      (def) =>
+        def.standalone &&
+        (def.id === view || def.standaloneViews?.includes(view)),
+    );
+}

src/ui/shell/tabUtils.tsx

@@ -1,243 +1,37 @@
 /* eslint-disable react-refresh/only-export-components */
 import {
-  Box,
-  Boxes,
-  Braces,
-  FolderSearch,
-  HardDrive,
   LayoutDashboard,
-  LayoutGrid,
   LayoutPanelLeft,
-  MessagesSquare,
-  Monitor,
-  MousePointerClick,
-  Network,
-  ArrowLeftRight,
   Server,
   Settings,
-  Terminal,
-  Usb,
   User,
-  Activity,
-  TerminalSquare,
-  Layers, // --- tmux-monitor ---
-  Clock,
-  Fingerprint,
-  Hammer,
-  Play,
-  Plug,
-  ScrollText,
-  Sparkles,
-  Presentation,
-  Workflow,
-  Globe,
 } from "lucide-react";
-import { lazy, Suspense } from "react";
+import { lazy, memo, Suspense } from "react";
 import { useTranslation } from "react-i18next";
-import type { SerialHandle } from "@/features/serial/serial-types";
-import type {
-  TerminalHandle,
-  TerminalHostConfig,
-} from "@/features/terminal/Terminal";
-import type { GuacamoleAppHandle } from "@/features/guacamole/GuacamoleApp";
-import { useIsMobile } from "@/hooks/use-mobile";
-import type { Tab, TabType, Host } from "@/types/ui-types";
+import type { Tab, TabType } from "@/types/ui-types";
+import { hostToSSHHost } from "@/lib/host-to-ssh-host";
+import { PluginViewPlaceholder } from "@/plugin-host/PluginViewPlaceholder";
 import {
-  isQuickConnectHost,
-  quickConnectGuacHost,
-} from "@/sidebar/quick-connect-host";
-import type { SSHHost } from "@/types";
-import { useTabsSafe } from "@/shell/TabContext";
+  getTabType,
+  type TabShellCallbacks,
+  type TabTypeDef,
+} from "./tab-registry";
+import { getPanel, type PanelDef } from "./panel-registry";
 import {
   markAdaptiveResourceUsed,
   runAdaptiveBackgroundTask,
 } from "@/lib/adaptive-resource-budget";
 
 // Heavy tab surfaces — keep out of the AppShell critical path.
-const CommandHistoryProvider = lazy(() =>
-  import("@/features/terminal/command-history/CommandHistoryContext").then(
-    (m) => ({ default: m.CommandHistoryProvider }),
-  ),
-);
-const loadTerminalFeature = () =>
-  import("@/features/terminal/Terminal").then((m) => ({
-    default: m.Terminal,
-  }));
-const TerminalFeature = lazy(loadTerminalFeature);
-const CollabRoomTab = lazy(() =>
-  import("@/features/collab/CollabRoomTab").then((m) => ({
-    default: m.CollabRoomTab,
-  })),
-);
-const LocalTerminal = lazy(() =>
-  import("@/features/local-terminal/LocalTerminal").then((m) => ({
-    default: m.LocalTerminal,
-  })),
-);
-const MobileTerminalKeyboard = lazy(() =>
-  import("@/features/terminal/MobileTerminalKeyboard").then((m) => ({
-    default: m.MobileTerminalKeyboard,
-  })),
-);
-const loadFileManager = () =>
-  import("@/features/file-manager/FileManager").then((m) => ({
-    default: m.FileManager,
-  }));
-const FileManager = lazy(loadFileManager);
-const loadDockerManager = () =>
-  import("@/features/docker/DockerManager").then((m) => ({
-    default: m.DockerManager,
-  }));
-const DockerManager = lazy(loadDockerManager);
-const loadWebEndpointTab = () =>
-  import("@/features/web-endpoint/WebEndpointTab").then((m) => ({
-    default: m.WebEndpointTab,
-  }));
-const WebEndpointTab = lazy(loadWebEndpointTab);
-const loadHostMetricsTab = () =>
-  import("@/features/host-metrics/HostMetricsTab").then((m) => ({
-    default: m.HostMetricsTab,
-  }));
-const HostMetricsTab = lazy(loadHostMetricsTab);
-const loadProxmoxStatsTab = () =>
-  import("@/features/proxmox-stats/ProxmoxStatsTab").then((m) => ({
-    default: m.ProxmoxStatsTab,
-  }));
-const ProxmoxStatsTab = lazy(loadProxmoxStatsTab);
-const loadTmuxMonitor = () =>
-  import("@/features/tmux-monitor/TmuxMonitor").then((m) => ({
-    default: m.TmuxMonitor,
-  }));
-const TmuxMonitor = lazy(loadTmuxMonitor);
-const loadGuacamoleApp = () =>
-  import("@/features/guacamole/GuacamoleApp").then((m) => ({
-    default: m.default,
-  }));
-const GuacamoleApp = lazy(loadGuacamoleApp);
 const DashboardTab = lazy(() =>
   import("@/dashboard/DashboardTab").then((m) => ({
     default: m.DashboardTab,
   })),
 );
-const HomepageCanvas = lazy(() =>
-  import("@/features/homepage/HomepageCanvas").then((m) => ({
-    default: m.HomepageCanvas,
-  })),
-);
-const loadTunnelTab = () =>
-  import("@/features/tunnel/TunnelTab").then((m) => ({
-    default: m.TunnelTab,
-  }));
-const TunnelTab = lazy(loadTunnelTab);
-const SftpTransferTab = lazy(() =>
-  import("@/features/sftp/SftpTransferTab").then((m) => ({
-    default: m.SftpTransferTab,
-  })),
-);
-const NetworkGraphCard = lazy(() =>
-  import("@/dashboard/cards/NetworkGraphCard").then((m) => ({
-    default: m.NetworkGraphCard,
-  })),
-);
-const Serial = lazy(() =>
-  import("@/features/serial/Serial").then((m) => ({
-    default: m.Serial,
-  })),
-);
-const FleetInventoryTab = lazy(() =>
-  import("@/sidebar/FleetInventoryTab").then((m) => ({
-    default: m.FleetInventoryTab,
-  })),
-);
-
-// Rail panels promoted to full tabs.
-const TermixIdPanel = lazy(() =>
-  import("@/sidebar/TermixIdPanel").then((m) => ({ default: m.TermixIdPanel })),
-);
-const AlertsPanel = lazy(() =>
-  import("@/sidebar/AlertsPanel").then((m) => ({ default: m.AlertsPanel })),
-);
-const SessionLogsPanel = lazy(() =>
-  import("@/sidebar/SessionLogsPanel").then((m) => ({
-    default: m.SessionLogsPanel,
-  })),
-);
-const SnippetsPanel = lazy(() =>
-  import("@/sidebar/SnippetsPanel").then((m) => ({ default: m.SnippetsPanel })),
-);
-const MacrosPanel = lazy(() =>
-  import("@/sidebar/MacrosPanel").then((m) => ({ default: m.MacrosPanel })),
-);
-const HistoryPanel = lazy(() =>
-  import("@/sidebar/HistoryPanel").then((m) => ({ default: m.HistoryPanel })),
-);
-const SshToolsPanel = lazy(() =>
-  import("@/sidebar/SshToolsPanel").then((m) => ({ default: m.SshToolsPanel })),
-);
-const AutomationsPanel = lazy(() =>
-  import("@/sidebar/AutomationsPanel").then((m) => ({
-    default: m.AutomationsPanel,
-  })),
-);
-
-const AiPanel = lazy(() =>
-  import("@/features/ai/AiPanel").then((m) => ({
-    default: m.AiPanel,
-  })),
-);
-
-const tabSurfaceLoaders: Partial<Record<TabType, () => Promise<unknown>>> = {
-  terminal: loadTerminalFeature,
-  files: loadFileManager,
-  docker: loadDockerManager,
-  "host-metrics": loadHostMetricsTab,
-  "proxmox-stats": loadProxmoxStatsTab,
-  tmux_monitor: loadTmuxMonitor,
-  tunnel: loadTunnelTab,
-  rdp: loadGuacamoleApp,
-  vnc: loadGuacamoleApp,
-  telnet: loadGuacamoleApp,
-};
-
-/**
- * A plugin-contributed tab surface. `component` is the loader's resolved
- * default export, rendered with the same Tab it would have received from the
- * switch in renderTabContent -- plugins get the raw tab record and decide
- * for themselves what they need out of it.
- */
-export type PluginTabComponent = React.ComponentType<{ tab: Tab }>;
-export type PluginTabLoader = () => Promise<{ default: PluginTabComponent }>;
-
-interface PluginTabEntry {
-  loader: PluginTabLoader;
-  icon?: React.ReactNode;
-  // Built lazily on first render and cached here, so every render of the same
-  // plugin tab reuses one lazy component instead of remounting it each time.
-  LazyComponent?: PluginTabComponent;
-}
-
-/**
- * Runtime registry for plugin tab ids that don't exist in the built-in
- * TabType union. Registered once a plugin loads, looked up by tabIcon and
- * renderTabContent instead of a switch case.
- */
-const registeredTabComponents = new Map<string, PluginTabEntry>();
-
-export function registerTabComponent(
-  id: string,
-  loader: PluginTabLoader,
-  icon?: React.ReactNode,
-): void {
-  registeredTabComponents.set(id, { loader, icon });
-}
-
-export function unregisterTabComponent(id: string): void {
-  registeredTabComponents.delete(id);
-}
 
 /** Download a likely next tab without starting a connection or mounting UI. */
 export function preloadTabSurface(type: TabType): void {
-  const loader = tabSurfaceLoaders[type];
+  const loader = getTabType(type)?.preload;
   if (loader) runAdaptiveBackgroundTask("module", `tab:${type}`, loader);
 }
 
@@ -245,54 +39,6 @@ export function markTabSurfaceUsed(type: TabType): void {
   markAdaptiveResourceUsed("module", `tab:${type}`);
 }
 
-function hostToSSHHost(h: Host): SSHHost {
-  return {
-    id: parseInt(h.id, 10),
-    name: h.name,
-    ip: h.ip,
-    port: h.port,
-    username: h.username,
-    folder: h.folder ?? "",
-    tags: h.tags ?? [],
-    pin: h.pin ?? false,
-    authType: h.authType,
-    password: h.password,
-    hasPassword: h.hasPassword,
-    key: h.key,
-    keyPassword: h.keyPassword,
-    hasKey: h.hasKey,
-    hasKeyPassword: h.hasKeyPassword,
-    keyType: h.keyType,
-    credentialId: h.credentialId ? parseInt(h.credentialId, 10) : undefined,
-    terminalConfig: h.terminalConfig,
-    hasSudoPassword: h.hasSudoPassword,
-    enableTerminal: h.enableTerminal ?? false,
-    enableTunnel: h.enableTunnel ?? false,
-    enableFileManager: h.enableFileManager ?? false,
-    enableDocker: h.enableDocker ?? false,
-    enableTerminalToolbar: h.enableTerminalToolbar ?? true,
-    enableAiAssistant: h.enableAiAssistant ?? false,
-    dockerConfig: h.dockerConfig ?? null,
-    enableWebUi: h.enableWebUi ?? false,
-    webUiConfig: h.webUiConfig ?? { endpoints: [] },
-    showTerminalInSidebar: true,
-    showFileManagerInSidebar: true,
-    showTunnelInSidebar: true,
-    showDockerInSidebar: true,
-    showServerStatsInSidebar: true,
-    defaultPath: h.defaultPath ?? "",
-    tunnelConnections: [],
-    connectionType: "ssh",
-    connectionOrigin: h.connectionOrigin ?? null,
-    isShared: h.isShared ?? false,
-    // Carries the host's identity to a delegated backend. Without it the
-    // remote side resolves our local row id against its own table.
-    syncId: h.syncId ?? null,
-    createdAt: "",
-    updatedAt: "",
-  } as unknown as SSHHost;
-}
-
 function EmptyState({
   icon: Icon,
   messageKey,
@@ -344,466 +90,171 @@ export function tabIcon(type: TabType) {
   switch (type) {
     case "dashboard":
       return <LayoutDashboard className="size-3.5" />;
-    case "terminal":
-      return <Terminal className="size-3.5" />;
-    case "local-terminal":
-      return <TerminalSquare className="size-3.5" />;
-    case "rdp":
-      return <Monitor className="size-3.5" />;
-    case "vnc":
-      return <MousePointerClick className="size-3.5" />;
-    case "telnet":
-      return <MessagesSquare className="size-3.5" />;
-    case "host-metrics":
-      return <Server className="size-3.5" />;
-    case "proxmox-stats":
-      return <HardDrive className="size-3.5" />;
-    case "files":
-      return <FolderSearch className="size-3.5" />;
     case "host-manager":
       return <Server className="size-3.5" />;
     case "user-profile":
       return <User className="size-3.5" />;
     case "admin-settings":
       return <Settings className="size-3.5" />;
-    case "docker":
-      return <Box className="size-3.5" />;
-    case "web-endpoint":
-      return <Globe className="size-3.5" />;
-    case "tunnel":
-      return <Network className="size-3.5" />;
-    case "sftp":
-      return <ArrowLeftRight className="size-3.5" />;
-    case "network_graph":
-      return <Network className="size-3.5" />;
-    // --- tmux-monitor ---
-    case "tmux_monitor":
-      return <Layers className="size-3.5" />;
-    case "serial":
-      return <Usb className="size-3.5" />;
-    case "homepage":
-      return <LayoutGrid className="size-3.5" />;
-    case "fleet-inventory":
-      return <Boxes className="size-3.5" />;
-    case "collab":
-      return <Presentation className="size-3.5" />;
-    case "termix-id":
-      return <Fingerprint className="size-3.5" />;
-    case "alerts":
-      return <Plug className="size-3.5" />;
-    case "session-logs":
-      return <ScrollText className="size-3.5" />;
-    case "snippets":
-      return <Play className="size-3.5" />;
-    case "macros":
-      return <Braces className="size-3.5" />;
-    case "history":
-      return <Clock className="size-3.5" />;
-    case "ssh-tools":
-      return <Hammer className="size-3.5" />;
-    case "automations":
-      return <Workflow className="size-3.5" />;
-    case "ai":
-      return <Sparkles className="size-3.5" />;
     case "split-screen":
       return <LayoutPanelLeft className="size-3.5" />;
-    default:
-      return registeredTabComponents.get(type)?.icon;
+    default: {
+      const Icon = getTabType(type)?.icon;
+      return Icon ? <Icon className="size-3.5" /> : null;
+    }
   }
 }
 
-function TerminalTabContent({
+/**
+ * A plugin's tab: its registered component with the generic render props.
+ * Unregistered types get the ownership placeholder in renderTabContent.
+ */
+const RegisteredTab = memo(function RegisteredTab({
+  def,
   tab,
-  host,
-  label,
   isVisible,
   isFocusedPane,
-  onCloseTab,
-  onRenameTab,
-  onOpenFileInEditor,
-  onOpenFileManager,
-  onOpenTab,
-  onSaveQuickConnect,
+  inSplit,
+  shell,
 }: {
+  def: TabTypeDef;
   tab: Tab;
-  host: Host;
-  label: string;
   isVisible: boolean;
   isFocusedPane: boolean;
-  onCloseTab?: (id: string) => void;
-  onRenameTab?: (tabId: string, newLabel: string) => void;
-  onOpenFileInEditor?: (filePath: string) => void;
-  onOpenFileManager?: (path?: string) => void;
-  onOpenTab?: (type: TabType) => void;
-  onSaveQuickConnect?: () => Promise<void>;
+  inSplit: boolean;
+  shell: TabShellCallbacks;
 }) {
-  const { previewTerminalTheme } = useTabsSafe();
-  const isMobile = useIsMobile();
-  return withTabSuspense(
-    <CommandHistoryProvider>
-      <div className="flex flex-col h-full w-full">
-        <div className="flex-1 min-h-0">
-          <TerminalFeature
-            ref={tab.terminalRef as React.Ref<TerminalHandle>}
-            hostConfig={
-              {
-                ...hostToSSHHost(host),
-                sshPort: host.sshPort ?? host.port,
-                instanceId: tab.instanceId ?? tab.id,
-                restoredSessionId: tab.restoredSessionId ?? null,
-                joinSharedSessionId: tab.joinSharedSessionId ?? null,
-                joinShareId: tab.joinShareId ?? null,
-              } as TerminalHostConfig
-            }
-            isVisible={isVisible}
-            initialPath={tab.initialFilePath}
-            title={label}
-            showTitle={false}
-            splitScreen={false}
-            onClose={() => onCloseTab?.(tab.id)}
-            onTitleChange={
-              onRenameTab && host.terminalConfig?.useSSHTitle
-                ? (title) => onRenameTab(tab.id, title)
-                : undefined
-            }
-            previewTheme={previewTerminalTheme}
-            onOpenFileInEditor={onOpenFileInEditor}
-            onOpenFileManager={onOpenFileManager}
-            isQuickConnect={host.id.startsWith("quick-connect-")}
-            onSaveQuickConnect={onSaveQuickConnect}
-            host={host}
-            onOpenTab={onOpenTab}
-            isFocusedPane={isFocusedPane}
-          />
-        </div>
-        {isMobile && (
-          <MobileTerminalKeyboard
-            terminalRef={
-              tab.terminalRef as React.RefObject<TerminalHandle | null>
-            }
-          />
-        )}
-      </div>
-    </CommandHistoryProvider>,
+  const { host, label } = tab;
+  if (def.requiresHost && !host) {
+    return (
+      <EmptyState
+        icon={Server}
+        messageKey={def.noHostMessageKey ?? "hosts.noHostSelected"}
+      />
+    );
+  }
+  const Component = def.component;
+  const content = (
+    <Component
+      tab={tab}
+      host={host}
+      sshHost={
+        host
+          ? (hostToSSHHost(host) as unknown as Record<string, unknown>)
+          : undefined
+      }
+      label={label}
+      isVisible={isVisible}
+      isFocusedPane={isFocusedPane}
+      inSplit={inSplit}
+      handleRef={tab.terminalRef as React.Ref<unknown>}
+      shell={shell}
+    />
   );
+  return withTabSuspense(
+    def.panelFrame ? <PanelTabFrame>{content}</PanelTabFrame> : content,
+  );
+});
+
+const DashboardTabHost = memo(function DashboardTabHost({
+  shell,
+  isVisible,
+}: {
+  shell: TabShellCallbacks;
+  isVisible: boolean;
+}) {
+  return withTabSuspense(
+    <DashboardTab
+      onOpenSingletonTab={(type) => shell.openSingletonTab(type)}
+      onOpenTab={(host, type) => shell.openTab(host, type)}
+      isVisible={isVisible}
+    />,
+  );
+});
+
+/** A rail panel opened as a tab when its plugin registers no tab of its own. */
+const PanelAsTab = memo(function PanelAsTab({
+  panel,
+  isVisible,
+  targetTab,
+  shell,
+}: {
+  panel: PanelDef;
+  isVisible: boolean;
+  targetTab?: Tab;
+  shell: TabShellCallbacks;
+}) {
+  const Panel = panel.component;
+  return withTabSuspense(
+    <PanelTabFrame>
+      <Panel
+        targetTab={targetTab}
+        active={isVisible}
+        shell={shell}
+        setEditing={noop}
+        placement="tab"
+      />
+    </PanelTabFrame>,
+  );
+});
+
+function noop() {}
+
+export interface TabRenderContext {
+  shell: TabShellCallbacks;
+  /** The terminal a panel shown as a tab sends commands to. */
+  panelTargetTab?: Tab;
+  isVisible?: boolean;
+  isFocusedPane?: boolean;
+  inSplit?: boolean;
 }
 
-/**
- * Everything the promoted rail panels need from AppShell. Passed as one bag
- * rather than more positional params, which renderTabContent already has too
- * many of.
- */
-export type PromotedPanelProps = {
-  terminalTabs?: Tab[];
-  targetTerminalTabId?: string;
-  storageMode?: "local" | "cloud";
-};
-
-export function renderTabContent(
-  tab: Tab,
-  onOpenSingletonTab?: (type: TabType) => void,
-  onOpenTab?: (host: Host, type: TabType) => void,
-  onCloseTab?: (id: string) => void,
-  isVisible = true,
-  onOpenFileInEditor?: (host: Host, filePath: string) => void,
-  onOpenFileManager?: (host: Host, path?: string) => void,
-  onOpenTerminalTab?: (host: Host, path?: string) => void,
-  onRenameTab?: (tabId: string, newLabel: string) => void,
-  onSaveQuickConnect?: (tab: Tab, host: Host) => Promise<void>,
-  isFocusedPane = true,
-  panelProps?: PromotedPanelProps,
-) {
-  const { host, label } = tab;
+export function renderTabContent(tab: Tab, context: TabRenderContext) {
+  const {
+    shell,
+    isVisible = true,
+    isFocusedPane = true,
+    inSplit = false,
+  } = context;
 
   switch (tab.type) {
     case "dashboard":
-      return withTabSuspense(
-        <DashboardTab
-          onOpenSingletonTab={onOpenSingletonTab!}
-          onOpenTab={onOpenTab!}
-          isVisible={isVisible}
-        />,
-      );
-
-    case "terminal":
-      if (!host)
-        return (
-          <EmptyState
-            icon={TerminalSquare}
-            messageKey="terminal.noHostSelected"
-          />
-        );
-      return (
-        <TerminalTabContent
-          tab={tab}
-          host={host}
-          label={label}
-          isVisible={isVisible}
-          isFocusedPane={isFocusedPane}
-          onCloseTab={onCloseTab}
-          onRenameTab={onRenameTab}
-          onOpenFileInEditor={
-            onOpenFileInEditor
-              ? (fp) => onOpenFileInEditor(host, fp)
-              : undefined
-          }
-          onOpenFileManager={
-            onOpenFileManager ? (p) => onOpenFileManager(host, p) : undefined
-          }
-          onOpenTab={onOpenTab ? (type) => onOpenTab(host, type) : undefined}
-          onSaveQuickConnect={
-            onSaveQuickConnect ? () => onSaveQuickConnect(tab, host) : undefined
-          }
-        />
-      );
-
-    case "local-terminal":
-      return withTabSuspense(
-        <LocalTerminal instanceId={tab.instanceId} isVisible={isVisible} />,
-      );
-
-    case "files":
-      if (!host)
-        return (
-          <EmptyState
-            icon={FolderSearch}
-            messageKey="fileManager.noHostSelected"
-          />
-        );
-      return withTabSuspense(
-        <FileManager
-          initialHost={hostToSSHHost(host)}
-          initialFilePath={tab.initialFilePath}
-          initialPath={tab.initialPath}
-          isVisible={isVisible}
-          onOpenTerminalTab={
-            onOpenTerminalTab
-              ? (path) => onOpenTerminalTab(host, path)
-              : undefined
-          }
-        />,
-      );
-
-    case "web-endpoint":
-      if (!host)
-        return (
-          <EmptyState icon={Globe} messageKey="webEndpoint.noHostSelected" />
-        );
-      // Passed the endpoint ID, not the endpoint object: the tab resolves it
-      // against the host on every render, so an endpoint deleted while its tab
-      // is open shows a plain message instead of throwing.
-      return withTabSuspense(
-        <WebEndpointTab host={host} endpointId={tab.endpointId} />,
-      );
-
-    case "docker":
-      if (!host)
-        return <EmptyState icon={Box} messageKey="docker.noHostSelected" />;
-      return withTabSuspense(
-        <DockerManager
-          hostConfig={hostToSSHHost(host)}
-          title={label}
-          isVisible={isVisible}
-          isTopbarOpen={false}
-          embedded={true}
-        />,
-      );
-
-    case "host-metrics":
-      if (!host)
-        return (
-          <EmptyState icon={Activity} messageKey="hostMetrics.noHostSelected" />
-        );
-      return withTabSuspense(
-        <HostMetricsTab
-          hostConfig={hostToSSHHost(host)}
-          title={label}
-          isVisible={isVisible}
-          isTopbarOpen={false}
-          embedded={true}
-        />,
-      );
-
-    case "proxmox-stats":
-      if (!host)
-        return (
-          <EmptyState
-            icon={HardDrive}
-            messageKey="proxmoxStats.noHostSelected"
-          />
-        );
-      return withTabSuspense(
-        <ProxmoxStatsTab
-          hostConfig={hostToSSHHost(host)}
-          title={label}
-          isVisible={isVisible}
-          isTopbarOpen={false}
-          embedded={true}
-        />,
-      );
-
-    case "tunnel":
-      return withTabSuspense(
-        <TunnelTab label={label} host={host} isVisible={isVisible} />,
-      );
-
-    case "sftp":
-      return withTabSuspense(<SftpTransferTab />);
-
-    case "rdp":
-    case "vnc":
-    case "telnet":
-      if (!host)
-        return (
-          <EmptyState icon={Monitor} messageKey="guacamole.noHostSelected" />
-        );
-      return withTabSuspense(
-        <GuacamoleApp
-          ref={tab.terminalRef as React.Ref<GuacamoleAppHandle>}
-          hostId={host.id}
-          tabId={tab.id}
-          protocol={tab.type as "rdp" | "vnc" | "telnet"}
-          isVisible={isVisible}
-          quickConnectHost={
-            isQuickConnectHost(host) ? quickConnectGuacHost(host) : undefined
-          }
-        />,
-      );
-
-    case "network_graph":
-      return withTabSuspense(
-        <NetworkGraphCard embedded={false} isVisible={isVisible} />,
-      );
-
-    // --- tmux-monitor ---
-    case "tmux_monitor":
-      return withTabSuspense(
-        <TmuxMonitor
-          initialHostId={host ? parseInt(host.id, 10) : undefined}
-          isVisible={isVisible}
-        />,
-      );
-
-    case "serial":
-      if (!tab.serialConfig)
-        return <EmptyState icon={Usb} messageKey="serial.notSupportedTitle" />;
-      return withTabSuspense(
-        <Serial
-          ref={tab.terminalRef as React.Ref<SerialHandle>}
-          config={tab.serialConfig}
-          isVisible={isVisible}
-          instanceId={tab.instanceId}
-        />,
-      );
-
-    case "homepage":
-      return withTabSuspense(<HomepageCanvas />);
-
-    case "fleet-inventory":
-      return withTabSuspense(
-        <FleetInventoryTab fleetId={tab.fleetId} isVisible={isVisible} />,
-      );
-
-    case "collab":
-      return withTabSuspense(
-        <CollabRoomTab roomId={tab.collabRoomId} isVisible={isVisible} />,
-      );
-
-    case "termix-id":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <TermixIdPanel />
-        </PanelTabFrame>,
-      );
-
-    case "alerts":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <AlertsPanel />
-        </PanelTabFrame>,
-      );
-
-    case "session-logs":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <SessionLogsPanel />
-        </PanelTabFrame>,
-      );
-
-    case "automations":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <AutomationsPanel active={isVisible} />
-        </PanelTabFrame>,
-      );
-
-    case "ai":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <AiPanel />
-        </PanelTabFrame>,
-      );
+      return <DashboardTabHost shell={shell} isVisible={isVisible} />;
 
     case "split-screen":
       return null;
 
-    case "snippets":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <SnippetsPanel
-            terminalTabs={panelProps?.terminalTabs ?? []}
-            activeTabId={panelProps?.targetTerminalTabId ?? ""}
-            storageMode={panelProps?.storageMode ?? "local"}
-          />
-        </PanelTabFrame>,
-      );
-
-    case "macros":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <MacrosPanel
-            terminalTabs={panelProps?.terminalTabs ?? []}
-            activeTabId={panelProps?.targetTerminalTabId ?? ""}
-            storageMode={panelProps?.storageMode ?? "local"}
-          />
-        </PanelTabFrame>,
-      );
-
-    case "history":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <HistoryPanel
-            terminalTabs={panelProps?.terminalTabs ?? []}
-            activeTabId={panelProps?.targetTerminalTabId ?? ""}
-          />
-        </PanelTabFrame>,
-      );
-
-    case "ssh-tools":
-      return withTabSuspense(
-        <PanelTabFrame>
-          <SshToolsPanel
-            terminalTabs={panelProps?.terminalTabs ?? []}
-            activeTabId={panelProps?.targetTerminalTabId ?? ""}
-          />
-        </PanelTabFrame>,
-      );
-
     case "host-manager":
     case "user-profile":
     case "admin-settings":
       return null;
 
     default: {
-      const entry = registeredTabComponents.get(tab.type);
-      if (!entry) return null;
-      if (!entry.LazyComponent) {
-        entry.LazyComponent = lazy(() =>
-          entry.loader().then((m) => ({ default: m.default })),
-        ) as unknown as PluginTabComponent;
+      const def = getTabType(tab.type);
+      if (!def) {
+        const panel = getPanel(tab.type);
+        if (panel) {
+          return (
+            <PanelAsTab
+              panel={panel}
+              isVisible={isVisible}
+              targetTab={context.panelTargetTab}
+              shell={shell}
+            />
+          );
+        }
+        return <PluginViewPlaceholder kind="tab" viewId={tab.type} />;
       }
-      const PluginTab = entry.LazyComponent;
-      return withTabSuspense(<PluginTab tab={tab} />);
+      return (
+        <RegisteredTab
+          def={def}
+          tab={tab}
+          isVisible={isVisible}
+          isFocusedPane={isFocusedPane}
+          inSplit={inSplit}
+          shell={shell}
+        />
+      );
     }
   }
 }

src/ui/shell/workspaceUtils.ts

@@ -1,165 +0,0 @@
-import type {
-  Host,
-  Tab,
-  TabType,
-  WorkspacePayload,
-  WorkspaceTabSnapshot,
-} from "@/types/ui-types";
-
-// "dashboard" is deliberately excluded: AppShell always keeps a dashboard
-// tab alive as the fallback when every other tab closes, so it isn't a
-// meaningful part of a saved arrangement and shouldn't count toward
-// tabCount or be reopened on apply.
-export const WORKSPACE_CAPTURABLE_TYPES: TabType[] = [
-  "terminal",
-  "rdp",
-  "vnc",
-  "telnet",
-  "host-metrics",
-  "proxmox-stats",
-  "files",
-  "docker",
-  "tunnel",
-  "network_graph",
-  "tmux_monitor",
-  "serial",
-  "homepage",
-  "fleet-inventory",
-  "termix-id",
-  "alerts",
-  "session-logs",
-  "snippets",
-  "macros",
-  "history",
-  "ssh-tools",
-  "automations",
-  "ai",
-];
-
-export const HOSTLESS_WORKSPACE_TAB_TYPES: TabType[] = [
-  "tunnel",
-  "network_graph",
-  "tmux_monitor",
-  "homepage",
-  "fleet-inventory",
-  "docker",
-  "termix-id",
-  "alerts",
-  "session-logs",
-  "snippets",
-  "macros",
-  "history",
-  "ssh-tools",
-  "automations",
-  "ai",
-];
-
-function createWorkspaceSlotId(): string {
-  if (typeof globalThis.crypto?.randomUUID === "function") {
-    return globalThis.crypto.randomUUID();
-  }
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
-}
-
-/**
- * Maps live tabs to WorkspaceTabSnapshots, generating a fresh slotId per tab.
- * slotId is a stable key within the saved payload, distinct from Tab.id
- * (which is regenerated every time a tab is opened).
- */
-export function buildWorkspaceTabSnapshots(
-  tabs: Tab[],
-  genSlotId: () => string = createWorkspaceSlotId,
-): { snapshots: WorkspaceTabSnapshot[]; slotIdByTabId: Map<string, string> } {
-  const capturable = tabs.filter((t) =>
-    WORKSPACE_CAPTURABLE_TYPES.includes(t.type),
-  );
-  const slotIdByTabId = new Map(capturable.map((t) => [t.id, genSlotId()]));
-
-  const snapshots: WorkspaceTabSnapshot[] = capturable.map((t) => ({
-    slotId: slotIdByTabId.get(t.id)!,
-    type: t.type,
-    hostSyncId: t.type === "serial" ? null : (t.host?.syncId ?? null),
-    hostNameSnapshot: t.host?.name ?? null,
-    label: t.label,
-    customLabel: t.customLabel,
-    initialFilePath: t.initialFilePath,
-    initialPath: t.initialPath,
-    fleetId: t.fleetId,
-    serialConfig: t.type === "serial" ? t.serialConfig : undefined,
-  }));
-
-  return { snapshots, slotIdByTabId };
-}
-
-/** Remaps a slotId-keyed array (paneTabIds shape) to live tab ids via a slotId->tabId map. */
-export function remapSlotIds(
-  slotIds: (string | null)[],
-  slotIdToTabId: Map<string, string>,
-): (string | null)[] {
-  return slotIds.map((slotId) =>
-    slotId != null ? (slotIdToTabId.get(slotId) ?? null) : null,
-  );
-}
-
-/**
- * Resolves how to (re)open a single workspace-payload tab on apply.
- *
- * "singleton" covers every rail-singleton tab type (dashboard/tunnel/docker/
- * etc.) whether or not a host was resolved for it - these always go through
- * openSingletonTab, which accepts an optional preselected host. "host" is
- * for genuinely per-host tab types (terminal/rdp/files/...), which always
- * need a resolved host to open at all.
- */
-export function resolveWorkspaceTabTarget(
-  snapshot: WorkspaceTabSnapshot,
-  allHosts: Host[],
-):
-  | { kind: "serial" }
-  | { kind: "singleton"; host?: Host }
-  | { kind: "host"; host: Host }
-  | { kind: "skip" } {
-  if (snapshot.type === "serial") {
-    return snapshot.serialConfig ? { kind: "serial" } : { kind: "skip" };
-  }
-
-  let host: Host | undefined;
-  if (snapshot.hostSyncId) {
-    host = allHosts.find((h) => h.syncId === snapshot.hostSyncId);
-    if (!host) return { kind: "skip" };
-  }
-
-  if (HOSTLESS_WORKSPACE_TAB_TYPES.includes(snapshot.type)) {
-    return { kind: "singleton", host };
-  }
-
-  return host ? { kind: "host", host } : { kind: "skip" };
-}
-
-export function buildWorkspacePayload(input: {
-  tabs: Tab[];
-  activeTabId: string;
-  splitMode: WorkspacePayload["splitMode"];
-  paneTabIds: (string | null)[];
-  rowSizes: number[];
-  rowColSizes: number[][];
-  genSlotId?: () => string;
-  sidebar?: WorkspacePayload["sidebar"];
-}): WorkspacePayload {
-  const { snapshots, slotIdByTabId } = buildWorkspaceTabSnapshots(
-    input.tabs,
-    input.genSlotId,
-  );
-
-  return {
-    version: 1,
-    tabs: snapshots,
-    activeSlotId: slotIdByTabId.get(input.activeTabId) ?? null,
-    splitMode: input.splitMode,
-    paneTabIds: input.paneTabIds.map((tabId) =>
-      tabId != null ? (slotIdByTabId.get(tabId) ?? null) : null,
-    ),
-    rowSizes: input.rowSizes,
-    rowColSizes: input.rowColSizes,
-    ...(input.sidebar ? { sidebar: input.sidebar } : {}),
-  };
-}