diff --git a/.changeset/add-machine-dialog.md b/.changeset/add-machine-dialog.md deleted file mode 100644 index 30c4559..0000000 --- a/.changeset/add-machine-dialog.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Replace add-machine browser prompts with a PI WEB form that asks for the remote URL first, suggests a machine name, and supports an optional bearer token. diff --git a/.changeset/bind-session-extensions.md b/.changeset/bind-session-extensions.md new file mode 100644 index 0000000..7d57121 --- /dev/null +++ b/.changeset/bind-session-extensions.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Initialize Pi extensions for web-managed sessions so `session_start` handlers, extension resources, and startup-dependent tools run correctly. diff --git a/.changeset/built-in-plugin-docs.md b/.changeset/built-in-plugin-docs.md deleted file mode 100644 index 309e0cb..0000000 --- a/.changeset/built-in-plugin-docs.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Document built-in PI WEB plugins, including configuration guidance for Workspace Tasks. diff --git a/.changeset/calm-navigation-panels.md b/.changeset/calm-navigation-panels.md new file mode 100644 index 0000000..821aa1d --- /dev/null +++ b/.changeset/calm-navigation-panels.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Reduce desktop navigation crowding by moving machine switching into a compact header control and removing automatic desktop section collapse. diff --git a/.changeset/close-workspace-terminals-before-delete.md b/.changeset/close-workspace-terminals-before-delete.md deleted file mode 100644 index ed12d70..0000000 --- a/.changeset/close-workspace-terminals-before-delete.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Delete workspaces through a server-side operation that closes target workspace terminals before running the worktree removal command, preventing stale machine activity indicators. diff --git a/.changeset/collapsible-desktop-navigation.md b/.changeset/collapsible-desktop-navigation.md new file mode 100644 index 0000000..3f7a660 --- /dev/null +++ b/.changeset/collapsible-desktop-navigation.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Make navigation sections collapsible on desktop and auto-collapse completed context sections after selections. diff --git a/.changeset/document-machine-federation.md b/.changeset/document-machine-federation.md new file mode 100644 index 0000000..bb57440 --- /dev/null +++ b/.changeset/document-machine-federation.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Document machine federation across the website and add a Fleet guide for setup, trust model, remote plugins, and troubleshooting. diff --git a/.changeset/editable-keyboard-shortcuts.md b/.changeset/editable-keyboard-shortcuts.md new file mode 100644 index 0000000..c499af1 --- /dev/null +++ b/.changeset/editable-keyboard-shortcuts.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Add a keyboard shortcuts settings editor with manual entry, recording, disabling, reset-to-default controls, and conflict/shadowing indicators. diff --git a/.changeset/fix-firefox-selection-copy.md b/.changeset/fix-firefox-selection-copy.md new file mode 100644 index 0000000..d15697a --- /dev/null +++ b/.changeset/fix-firefox-selection-copy.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Let Firefox copy only the selected chat text instead of replacing selections with the full message. diff --git a/.changeset/fix-workspace-api-reference.md b/.changeset/fix-workspace-api-reference.md deleted file mode 100644 index 60272d3..0000000 --- a/.changeset/fix-workspace-api-reference.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Fix workspace selection in the web UI so local machine project and session loading no longer fails with `api is not defined`. diff --git a/.changeset/full-reload-refresh-control.md b/.changeset/full-reload-refresh-control.md new file mode 100644 index 0000000..596c4e7 --- /dev/null +++ b/.changeset/full-reload-refresh-control.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Make the app refresh control perform a full page reload directly instead of opening refresh-data options. diff --git a/.changeset/hide-single-machine-mobile-crumb.md b/.changeset/hide-single-machine-mobile-crumb.md new file mode 100644 index 0000000..1d97f32 --- /dev/null +++ b/.changeset/hide-single-machine-mobile-crumb.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Simplify the mobile location breadcrumb by hiding the machine crumb when there is only one configured machine and removing activity indicators from breadcrumb items. diff --git a/.changeset/hide-single-machine-navigation.md b/.changeset/hide-single-machine-navigation.md deleted file mode 100644 index 68d9a2e..0000000 --- a/.changeset/hide-single-machine-navigation.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Hide the Machines navigation section when only one machine is configured, align Machines list spacing with the other navigation sections, and add a remove action to remote machine rows. diff --git a/.changeset/keyboard-navigation-ladder.md b/.changeset/keyboard-navigation-ladder.md new file mode 100644 index 0000000..fa456f0 --- /dev/null +++ b/.changeset/keyboard-navigation-ladder.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Add keyboard-first navigation for focusing Machines, Projects, Workspaces, Sessions, and the chat composer. diff --git a/.changeset/lean-workspace-context.md b/.changeset/lean-workspace-context.md new file mode 100644 index 0000000..d44258a --- /dev/null +++ b/.changeset/lean-workspace-context.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Reduce repeated machine and workspace details in the chat status bar and workspace tool header, keeping compact session metrics right-aligned. diff --git a/.changeset/machine-activity-indicators.md b/.changeset/machine-activity-indicators.md deleted file mode 100644 index 9a319b0..0000000 --- a/.changeset/machine-activity-indicators.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Show machine activity indicators when sessions or terminals are active on any workspace for that machine. diff --git a/.changeset/machine-scoped-local-apis.md b/.changeset/machine-scoped-local-apis.md deleted file mode 100644 index ef8f8bb..0000000 --- a/.changeset/machine-scoped-local-apis.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add machine-scoped local project, workspace, file, and git API aliases as the next step toward machine federation. diff --git a/.changeset/machine-specific-plugins.md b/.changeset/machine-specific-plugins.md new file mode 100644 index 0000000..e11e01b --- /dev/null +++ b/.changeset/machine-specific-plugins.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Allow PI WEB plugins to mark themselves as machine-specific so the gateway copy stays local-only and remote machines can provide their own status/plugin UI. diff --git a/.changeset/mobile-actions-button.md b/.changeset/mobile-actions-button.md deleted file mode 100644 index 88308c7..0000000 --- a/.changeset/mobile-actions-button.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Make the mobile Actions entry available from the top context controls and remove the redundant PI WEB navigation header on mobile. diff --git a/.changeset/mobile-docs-header-controls.md b/.changeset/mobile-docs-header-controls.md new file mode 100644 index 0000000..caaf056 --- /dev/null +++ b/.changeset/mobile-docs-header-controls.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Keep the documentation site's GitHub and theme controls visible in mobile portrait layouts. diff --git a/.changeset/mobile-tab-icons.md b/.changeset/mobile-tab-icons.md deleted file mode 100644 index ad794bc..0000000 --- a/.changeset/mobile-tab-icons.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Use compact icons, initials, and inline badges for the mobile main tab bar so tabs are easier to fit without losing horizontal scrolling; let workspace panel plugins provide custom SVG tab icons; and add icons for bundled Info, Updates, and Tasks plugin panels. diff --git a/.changeset/offline-remote-fallback.md b/.changeset/offline-remote-fallback.md deleted file mode 100644 index eab366f..0000000 --- a/.changeset/offline-remote-fallback.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Fall back to the local machine when a bookmarked or restored remote machine is offline, and clear stale remote workspace route state. diff --git a/.changeset/permanent-tab-icons.md b/.changeset/permanent-tab-icons.md deleted file mode 100644 index 7c7f5b3..0000000 --- a/.changeset/permanent-tab-icons.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Keep workspace tool tab icons visible in the desktop workspace panel and collapse tab names only in compact panel widths. diff --git a/.changeset/persist-tab-navigation-memory.md b/.changeset/persist-tab-navigation-memory.md deleted file mode 100644 index 68e55f0..0000000 --- a/.changeset/persist-tab-navigation-memory.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Preserve machine, workspace, session, and terminal navigation memory across reloads within each browser tab. diff --git a/.changeset/plugin-disable-config.md b/.changeset/plugin-disable-config.md deleted file mode 100644 index 2aacf91..0000000 --- a/.changeset/plugin-disable-config.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add plugin enablement settings so discovered PI WEB plugins can be disabled before the browser imports them. diff --git a/.changeset/plugin-public-context-helpers.md b/.changeset/plugin-public-context-helpers.md deleted file mode 100644 index ddaeeb4..0000000 --- a/.changeset/plugin-public-context-helpers.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add documented plugin context helpers for machine-scoped workspace files and terminal commands, generate plugin API declarations from source, and move bundled plugins away from direct PI WEB API calls. diff --git a/.changeset/preserve-archived-session-parents.md b/.changeset/preserve-archived-session-parents.md new file mode 100644 index 0000000..1969a23 --- /dev/null +++ b/.changeset/preserve-archived-session-parents.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Keep archived parent sessions visible in the current session tree while they still have unarchived children. diff --git a/.changeset/private-plugin-api-copy.md b/.changeset/private-plugin-api-copy.md new file mode 100644 index 0000000..46794ec --- /dev/null +++ b/.changeset/private-plugin-api-copy.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Clarify plugin docs and website copy around private PI WEB APIs and the supported helper surface. diff --git a/.changeset/pwa-refresh-menu.md b/.changeset/pwa-refresh-menu.md deleted file mode 100644 index 7bb77b6..0000000 --- a/.changeset/pwa-refresh-menu.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Keep the PWA refresh control menu visible above mobile tab navigation and workspace tab content. diff --git a/.changeset/remember-machine-navigation.md b/.changeset/remember-machine-navigation.md deleted file mode 100644 index 2702826..0000000 --- a/.changeset/remember-machine-navigation.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Remember each machine's last selected project, workspace, session, and workspace tool when switching machines in the web UI. diff --git a/.changeset/remote-machine-federation.md b/.changeset/remote-machine-federation.md deleted file mode 100644 index f2c3c62..0000000 --- a/.changeset/remote-machine-federation.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add remote machine federation so PI WEB can register trusted remote runtimes and proxy their projects, workspaces, sessions, files, git state, activity, and terminals through the current web server. diff --git a/.changeset/remote-machine-plugins.md b/.changeset/remote-machine-plugins.md deleted file mode 100644 index 07b7121..0000000 --- a/.changeset/remote-machine-plugins.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Load trusted PI WEB plugins from selected federated machines with machine-scoped actions, workspace panels, labels, proxied plugin assets, and gateway-preferred duplicate handling. diff --git a/.changeset/remove-panel-open-terminal.md b/.changeset/remove-panel-open-terminal.md deleted file mode 100644 index f989483..0000000 --- a/.changeset/remove-panel-open-terminal.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Clean up the workspace panel plugin context by removing the legacy `openTerminal` alias and moving render invalidation to `context.host.requestRender()`. diff --git a/.changeset/resizable-side-panels.md b/.changeset/resizable-side-panels.md new file mode 100644 index 0000000..8d8a604 --- /dev/null +++ b/.changeset/resizable-side-panels.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Add draggable, persistent side panel resizing for the web UI navigation and workspace panels, including reset actions. diff --git a/.changeset/right-aligned-machine-status.md b/.changeset/right-aligned-machine-status.md new file mode 100644 index 0000000..ac8e108 --- /dev/null +++ b/.changeset/right-aligned-machine-status.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Align the desktop machine badge status to the right edge of the badge. diff --git a/.changeset/session-lifecycle-actions.md b/.changeset/session-lifecycle-actions.md new file mode 100644 index 0000000..4bef5cc --- /dev/null +++ b/.changeset/session-lifecycle-actions.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Add safe bulk session actions for archiving current sessions and permanently deleting archived sessions, with runtime capability checks for remote compatibility. diff --git a/.changeset/settings-config-ui.md b/.changeset/settings-config-ui.md deleted file mode 100644 index 38c42d2..0000000 --- a/.changeset/settings-config-ui.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add a deep-linked Settings UI for editing the active PI WEB config file and viewing registered keyboard shortcuts. diff --git a/.changeset/shortcut-config-foundation.md b/.changeset/shortcut-config-foundation.md deleted file mode 100644 index 467023f..0000000 --- a/.changeset/shortcut-config-foundation.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add shortcut preferences to the PI WEB config schema so keyboard shortcuts can be overridden or disabled by action id. diff --git a/.changeset/snappy-machine-restore.md b/.changeset/snappy-machine-restore.md new file mode 100644 index 0000000..5450783 --- /dev/null +++ b/.changeset/snappy-machine-restore.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Keep machine/session navigation snappy by deferring expensive Pi-Web status refreshes and caching status checks. diff --git a/.changeset/synthesized-local-machines.md b/.changeset/synthesized-local-machines.md deleted file mode 100644 index 22ac957..0000000 --- a/.changeset/synthesized-local-machines.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add the first machine registry API and show the synthesized Local machine in the web UI as the foundation for machine federation. diff --git a/.changeset/unified-activity-indicators.md b/.changeset/unified-activity-indicators.md new file mode 100644 index 0000000..6cc62ce --- /dev/null +++ b/.changeset/unified-activity-indicators.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Pin navigation activity indicators to the top-right of list chips so active projects, workspaces, and sessions no longer shift their labels. diff --git a/.changeset/updates-plugin-rename.md b/.changeset/updates-plugin-rename.md deleted file mode 100644 index 1ddfd22..0000000 --- a/.changeset/updates-plugin-rename.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Rename the built-in Updates plugin id from `pi-web` to `updates` for clearer plugin configuration. diff --git a/.changeset/workspace-label-file-context.md b/.changeset/workspace-label-file-context.md deleted file mode 100644 index fc950fe..0000000 --- a/.changeset/workspace-label-file-context.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Add workspace file and render helpers to plugin workspace label callbacks so labels can load workspace-scoped metadata without hidden panels. diff --git a/.changeset/workspace-tasks-click-feedback.md b/.changeset/workspace-tasks-click-feedback.md deleted file mode 100644 index 731b4e2..0000000 --- a/.changeset/workspace-tasks-click-feedback.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Prevent redundant Workspace Tasks panel re-renders from resetting mobile scroll position or replacing task buttons mid-click, and show feedback for stale, cancelled, or already-starting tasks. diff --git a/.changeset/workspace-tasks-rename.md b/.changeset/workspace-tasks-rename.md deleted file mode 100644 index d195d8b..0000000 --- a/.changeset/workspace-tasks-rename.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Bundle Workspace Tasks with PI WEB as a built-in plugin for running `.pi-web/tasks.json` commands in workspace terminals. diff --git a/CHANGELOG.md b/CHANGELOG.md index 8de60eb..5312898 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,37 @@ # @jmfederico/pi-web +## 1.202606.1 + +### Patch Changes + +- 93b50e6: Replace add-machine browser prompts with a PI WEB form that asks for the remote URL first, suggests a machine name, and supports an optional bearer token. +- 08f69d0: Document built-in PI WEB plugins, including configuration guidance for Workspace Tasks. +- 9c3dafc: Delete workspaces through a server-side operation that closes target workspace terminals before running the worktree removal command, preventing stale machine activity indicators. +- 159f533: Fix workspace selection in the web UI so local machine project and session loading no longer fails with `api is not defined`. +- 82ba2e0: Prevent malformed session prompt API calls from crashing the session daemon. +- f2d211d: Harden remote machine plugin asset proxying so plugin asset URLs cannot escape the remote plugin directory. +- ccd4a76: Hide the Machines navigation section when only one machine is configured, align Machines list spacing with the other navigation sections, and add a remove action to remote machine rows. +- 193c9d0: Show machine activity indicators when sessions or terminals are active on any workspace for that machine. +- b5f8810: Add machine-scoped local project, workspace, file, and git API aliases as the next step toward machine federation. +- 4495a26: Make the mobile Actions entry available from the top context controls and remove the redundant PI WEB navigation header on mobile. +- 4548e5c: Use compact icons, initials, and inline badges for the mobile main tab bar so tabs are easier to fit without losing horizontal scrolling; let workspace panel plugins provide custom SVG tab icons; and add icons for bundled Info, Updates, and Tasks plugin panels. +- e352dce: Fall back to the local machine when a bookmarked or restored remote machine is offline, and clear stale remote workspace route state. +- bd8d1f1: Keep workspace tool tab icons visible in the desktop workspace panel and collapse tab names only in compact panel widths. +- 30fb960: Preserve machine, workspace, session, and terminal navigation memory across reloads within each browser tab. +- 08f69d0: Add plugin enablement settings so discovered PI WEB plugins can be disabled before the browser imports them. +- e3533eb: Add documented plugin context helpers for machine-scoped workspace files and terminal commands, generate plugin API declarations from source, and move bundled plugins away from direct PI WEB API calls. +- 8cd2bba: Keep the PWA refresh control menu visible above mobile tab navigation and workspace tab content. +- b3bb732: Remember each machine's last selected project, workspace, session, and workspace tool when switching machines in the web UI. +- a142f5e: Add remote machine federation so PI WEB can register trusted remote runtimes and proxy their projects, workspaces, sessions, files, git state, activity, and terminals through the current web server. +- b9be7de: Load trusted PI WEB plugins from selected federated machines with machine-scoped actions, workspace panels, labels, proxied plugin assets, and gateway-preferred duplicate handling. +- f1c8f1f: Clean up the workspace panel plugin context by moving render invalidation to `context.host.requestRender()` and deprecating the legacy runtime-only `openTerminal` alias in favor of `context.terminal.open()`. +- 4495a26: Add a deep-linked Settings UI for editing the active PI WEB config file and viewing registered keyboard shortcuts. +- a58c211: Add shortcut preferences to the PI WEB config schema so keyboard shortcuts can be overridden or disabled by action id. +- 0405b38: Add the first machine registry API and show the synthesized Local machine in the web UI as the foundation for machine federation. +- 4bc0010: Add workspace file and render helpers to plugin workspace label callbacks so labels can load workspace-scoped metadata without hidden panels. +- 08f69d0: Prevent redundant Workspace Tasks panel re-renders from resetting mobile scroll position or replacing task buttons mid-click, and show feedback for stale, cancelled, or already-starting tasks. +- 08f69d0: Bundle Workspace Tasks with PI WEB as a built-in plugin for running `.pi-web/tasks.json` commands in workspace terminals. + ## 1.202606.0 ### Patch Changes diff --git a/README.md b/README.md index 4dc0a72..e224286 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,7 @@ PI WEB keeps its own state intentionally small: ## Machine federation -The Machines section lets one PI WEB instance act as a gateway to other PI WEB runtimes. Register a remote machine from **Actions → Add Machine** with the remote PI WEB base URL, for example a Tailscale, WireGuard, SSH tunnel, or trusted reverse-proxy URL. The browser continues talking to the local PI WEB origin; project, workspace, file, git, session, activity, and terminal HTTP/WebSocket traffic is proxied server-to-server. +The Machines section lets one PI WEB instance act as a gateway to other PI WEB runtimes. Register a remote machine from **Actions → Add Machine** with the remote PI WEB base URL, for example a URL reachable over NetBird, Tailscale, WireGuard, an SSH tunnel, or a trusted reverse proxy. The browser continues talking to the local PI WEB origin; project, workspace, file, git, session, activity, and terminal HTTP/WebSocket traffic is proxied server-to-server. See the [Fleet guide](https://pi-web.dev/machines.html) for setup, trust model, and troubleshooting details. Remote model-provider credentials and OAuth state stay on the target machine. API-key provider configuration can be proxied, but OAuth login should be completed by opening the remote PI WEB directly. Register remote machines only when you trust the endpoint and the network path: adding a machine gives this PI WEB server permission to contact that URL with the optional bearer token you configured. @@ -112,7 +112,7 @@ Remote model-provider credentials and OAuth state stay on the target machine. AP PI WEB production installs can load trusted local UI plugins without rebuilding PI WEB. Plugins are browser-side ES modules that can add action-palette actions, workspace panels, and workspace-label metadata, using documented context helpers for workspace files and terminals. They do not run in the session daemon and are not sandboxed. -The supported package shape is intentionally singular: `piWeb.plugins` entries with explicit `id` and `module`, plus a browser module that exports `{ apiVersion: 1, name, activate }`. The bundled `pi-web-plugins/info` TypeScript source is the canonical minimal real example, `pi-web-plugins/updates` demonstrates a dynamic status panel, and built-in [Workspace Tasks](docs/plugins.md#workspace-tasks) adds a workspace tab for running configured shell commands in PI WEB terminals. +The supported package shape is intentionally singular: `piWeb.plugins` entries with explicit `id` and `module` plus optional `machineSpecific` metadata, and a browser module that exports `{ apiVersion: 1, name, activate }`. The bundled `pi-web-plugins/info` TypeScript source is the canonical minimal real example, `pi-web-plugins/updates` demonstrates a dynamic status panel, and built-in [Workspace Tasks](docs/plugins.md#workspace-tasks) adds a workspace tab for running configured shell commands in PI WEB terminals. A useful prompt for AI agents: diff --git a/docs/404.html b/docs/404.html index 7821ce7..069a501 100644 --- a/docs/404.html +++ b/docs/404.html @@ -28,23 +28,28 @@ @@ -75,6 +80,7 @@
PI WEB · remote control for persistent Pi Coding Agent sessions.
+ Fleet Install Plugins FAQ diff --git a/docs/faq.html b/docs/faq.html index 240b8e9..6aa14e5 100644 --- a/docs/faq.html +++ b/docs/faq.html @@ -27,23 +27,28 @@ @@ -71,6 +76,7 @@ User service manager is unavailable I cannot open the web UI Can I expose this publicly? + How do remote machines work? Laptop or server? Can I use local plugins? Sessions stop unexpectedly @@ -189,6 +195,23 @@

+
+

How do I connect another PI WEB machine?

+

+ Install and run PI WEB on the target machine, make its PI WEB URL reachable from the gateway through a + trusted path, then open the gateway and choose Actions → Add Machine. The browser keeps + talking to the gateway while projects, sessions, files, and terminals run on the selected remote runtime. +

+
    +
  • Use NetBird, Tailscale, WireGuard, private LAN, SSH tunnel, or an authenticated reverse proxy.
    • +
  • Remote Pi auth, OAuth state, sessions, terminals, repositories, and plugins stay on the target machine.
    • +
  • API-key provider configuration can be proxied, but OAuth login should be completed by opening the remote PI WEB directly.
    • +
  • Remote plugins are trusted browser code and only appear while that machine is selected.
    • +
  • If the remote reports offline, check that the gateway server can reach the remote URL and try Actions → Refresh Selected Machine.
    • +
+

Read the fleet guide →

+
+

Should I run PI WEB on my laptop or a server?

@@ -251,6 +274,7 @@

Home Remote-first + Fleet Install Plugins Issues diff --git a/docs/index.html b/docs/index.html index ea0ea08..be0d922 100644 --- a/docs/index.html +++ b/docs/index.html @@ -34,23 +34,28 @@ @@ -298,6 +303,7 @@ PI WEB · remote control for persistent Pi Coding Agent sessions.
Remote-first + Fleet Install Plugins FAQ diff --git a/docs/install.html b/docs/install.html index ac60a54..3a63479 100644 --- a/docs/install.html +++ b/docs/install.html @@ -27,23 +27,28 @@ @@ -70,6 +75,7 @@ Install through Pi WSL / manual run Remote access + Federated machines Manage services Configure Uninstall @@ -189,11 +195,28 @@
PI WEB is designed for trusted users and trusted server paths. Do not expose it directly to the public internet. If you use a VPN or private network, bind PI WEB to the server's VPN/private IP, such as a - Tailscale/WireGuard/LAN address, and make sure that network policy limits access. Avoid + NetBird/Tailscale/WireGuard/LAN address, and make sure that network policy limits access. Avoid 0.0.0.0 unless a firewall, VPN, or authenticated reverse proxy strictly controls the port.
+
+

Federated machines

+

+ To use one PI WEB instance as a gateway to others, install and run PI WEB on each target machine first. + Make each target reachable from the gateway through a trusted path, then open the gateway and use + Actions → Add Machine with the target PI WEB base URL. +

+

+ The remote URL can be reachable through NetBird, Tailscale, WireGuard, LAN, an SSH tunnel, or an authenticated reverse proxy. The + browser keeps using the gateway origin while projects, sessions, files, and terminals run on the selected + remote runtime. +

+
+ Read the fleet guide +
+
+

Manage services

pi-web version compares the installed package version with the versions reported by the running Web/UI and session daemon services.

@@ -291,6 +314,7 @@
Home Remote-first + Fleet Plugins FAQ GitHub diff --git a/docs/machines.html b/docs/machines.html new file mode 100644 index 0000000..f327fad --- /dev/null +++ b/docs/machines.html @@ -0,0 +1,284 @@ + + + + + + PI WEB fleet + + + + + + + + + + + +
+ +
+ +
+
+
+

PI WEB fleet

+

Connect trusted PI WEB runtimes when one machine is not enough.

+

+ Most PI WEB setups only need one runtime. When you do have more than one, machine federation lets the PI WEB + instance you opened act as a gateway to other trusted runtimes while each machine keeps its own repositories, + credentials, sessions, and plugins. +

+
+
+ +
+
+ + +
+
+

What Fleet does

+

+ A machine is a PI WEB runtime endpoint. The local machine is synthesized automatically. Remote machines + are opt-in PI WEB runtimes that you register with a base URL and, optionally, a bearer token. +

+

+ After registration, the browser keeps talking to the current PI WEB origin. The gateway contacts the + selected remote PI WEB server and routes that machine's projects, workspaces, sessions, files, git state, + activity, and terminals to the browser UI. +

+
+
+ Fleet shape + +
+ 
Browser
+  ↓
+PI WEB gateway you opened
+  ├─ [ Local runtime ]
+  │
+  ├─ [ Remote PI WEB runtime A ]
+  │     ↓ selected machine
+  │     projects, workspaces, sessions, terminals, plugins
+  │
+  └─ [ Remote PI WEB runtime B ]
+
+
+ +
+

When to use it

+

+ Federation is useful when you have more than one place where agents should work, but you want one stable + browser entrypoint. +

+
+
+
▦
+

Many dev boxes

+

Register a workstation, home server, cloud VM, or client-specific host without moving repositories.

+
+
+
⇄
+

One gateway

+

Open one trusted PI WEB URL and switch machines instead of juggling browser tabs and tunnels.

+
+
+
⌁
+

Local ownership

+

Each target machine keeps its own Pi auth, sessions, worktrees, terminal state, and plugins.

+
+
+
+ +
+

Set up another runtime

+

+ Install and run PI WEB on every machine you want to register. The remote URL must be reachable from the + gateway server, not just from your browser. +

+
+
+ Install on each target + +
+ 
$ npm install -g @jmfederico/pi-web
+$ pi-web install
+$ pi-web doctor
+
+

+ Prefer a private path such as NetBird, Tailscale, WireGuard, private LAN, SSH tunnel, or an authenticated reverse + proxy. If the remote is behind a path prefix, include that prefix in the machine URL, for example + https://devbox.example.test/pi-web. +

+
+ Do not expose PI WEB directly to the public internet. Register machines only over trusted network paths + and only when you trust the endpoint. +
+
+ +
+

Add a machine

+
    +
  1. Open the PI WEB instance you want to use as the gateway.
    2. +
  2. Open Actions → Add Machine.
    3. +
  3. Enter the remote PI WEB base URL, including http:// or https://.
    4. +
  4. Accept the suggested name or enter a friendlier sidebar label.
    5. +
  5. Paste an optional bearer token if the remote endpoint requires one.
    6. +
+

+ The Machines section appears when there is more than one machine. Select a machine, then add projects, + workspaces, and sessions on that selected machine. +

+
+ Removing a remote machine only removes it from this gateway's registry. It does not stop the remote PI WEB + service or delete projects, workspaces, sessions, or credentials on the target machine. +
+
+ +
+

What works remotely

+

+ After you select a machine, the rest of the app works in that machine's scope. The gateway routes the + selected-machine work to the target PI WEB runtime. +

+
    +
  • Projects and workspaces.
    • +
  • Files, previews, git status, and diffs.
    • +
  • Pi sessions, transcripts, prompts, model controls, and commands.
    • +
  • Activity indicators and realtime updates.
    • +
  • Terminals and terminal command runs.
    • +
  • Remote plugins from the selected machine.
    • +
+
+ +
+

Credentials stay on the target machine

+

+ Model-provider credentials, Pi configuration, OAuth state, repositories, and active session runtimes stay + on the selected target machine. The gateway does not copy them into its own Pi configuration. +

+
    +
  • API-key provider configuration can be proxied through the gateway.
    • +
  • OAuth login should be completed by opening the remote PI WEB directly.
    • +
  • The optional machine bearer token is stored by the gateway and sent to the remote while proxying requests.
    • +
+

+ Use Actions → Open Selected Machine PI WEB when you need to authenticate directly on a + remote machine or inspect it outside the gateway. +

+
+ +
+

Plugins follow the selected machine

+

+ When you select a remote machine, PI WEB tries to load that machine's discovered plugins through the + gateway. Remote plugin actions, workspace panels, and workspace labels only appear while that machine is + selected, and documented file and terminal helpers run against that machine. +

+

+ Remote plugins are still trusted browser-side code. Only federate machines whose PI WEB plugins you are + comfortable loading in the browser. +

+

Read the remote machine plugin notes →

+
+ +
+

Trust boundaries

+

+ Machine federation is for trusted users, trusted PI WEB servers, and trusted network paths. Adding a + machine gives the gateway permission to contact that URL and forward user-initiated PI WEB traffic to it. +

+
    +
  • Use private networking, an SSH tunnel, or an authenticated reverse proxy.
    • +
  • Do not include credentials in the machine URL itself.
    • +
  • Use bearer tokens or proxy authentication when a remote endpoint needs an extra gate.
    • +
+
+ +
+

Troubleshooting

+

+ Remote machine records are stored on the gateway in ~/.pi-web/machines.json. If + PI_WEB_DATA_DIR is set, they live under $PI_WEB_DATA_DIR/machines.json. +

+
    +
  • Use Actions → Refresh Selected Machine to re-check health.
    • +
  • Make sure the remote URL is reachable from the gateway server.
    • +
  • Open the remote PI WEB directly to verify it is running and to complete provider login flows.
    • +
  • Check gateway logs with pi-web logs for proxy timeouts or upstream errors.
    • +
+
+ Review remote access setup + Read remote machine FAQ +
+
+
+
+
+
+ + + + + diff --git a/docs/plugins.html b/docs/plugins.html index 4d65dbb..dadaf25 100644 --- a/docs/plugins.html +++ b/docs/plugins.html @@ -27,23 +27,28 @@ @@ -89,7 +94,9 @@

Plugins cannot extend the session daemon or add server-side hooks. They run in the browser UI only. - PI WEB's internal API routes are not plugin API; use documented context helpers instead. + Use documented context helpers for the stable API surface. Daring plugins can reach into PI WEB + internals, but those private surfaces are experimental: they may graduate into stable helpers, change + shape, or disappear.

The plugin API is intentionally limited and actively developed. Feedback is appreciated: if an extension @@ -184,7 +191,8 @@ After editing, check the manifest endpoint and browser-console failure cases.Updates

Updates adds a conditional Updates workspace tab with PI WEB update, - restart, and installed-service guidance. It is built into PI WEB and enabled by default. + restart, and installed-service guidance. It is built into PI WEB, enabled by default, and uses the + selected machine's plugin copy when machine federation is active.

  • Plugin id: updates
    • @@ -295,14 +303,14 @@ After editing, check the manifest endpoint and browser-console failure cases.

    Remote machine plugins

    - With machine federation, PI WEB also loads discovered plugins from the selected remote machine. Remote - plugins are trusted browser-side code like local plugins, but their actions, workspace panels, and - workspace labels only appear while that machine is selected. + With machine federation, PI WEB also loads discovered plugins from the selected + remote machine. Remote plugins are trusted browser-side code like local plugins, but their actions, + workspace panels, and workspace labels only appear while that machine is selected.

    • File and terminal helpers run against the selected remote machine.
    • Remote plugin code is loaded best-effort through the current gateway and cached for the page lifetime.
      • -
    • If the gateway already has an enabled plugin with the same original id, the gateway plugin wins and the remote duplicate stays hidden.
      • +
    • If the gateway and remote machine both have an enabled plugin with the same original id, machineSpecific metadata decides whether the gateway copy is reused or only the selected-machine copy can appear.
    • Remote theme contributions are ignored for now because themes are app-wide.
    • Mixed PI WEB versions across federated machines are best-effort and not guaranteed compatible.
    @@ -310,6 +318,11 @@ After editing, check the manifest endpoint and browser-console failure cases. +

    + Plugin package metadata can set machineSpecific: true. Use it for plugins like Updates whose + UI should come from the selected PI WEB instance; on remote machines, the gateway copy is hidden unless + the remote machine exposes its own copy. +

    For portable plugin assets, prefer URLs relative to the plugin module, such as new URL("./asset.json", import.meta.url). If a remote plugin constructs absolute asset URLs, @@ -347,8 +360,8 @@ After editing, check the manifest endpoint and browser-console failure cases.

    If you want to understand the API yourself, ask an agent to read that file and explain the relevant - extension points for the plugin you want. The Markdown reference also marks which context fields are - stable and which PI WEB internals should be avoided unless necessary. + public extension points for the plugin you want. Private PI WEB internals exist for the daring; treat + them as experimental surfaces that may graduate into stable helpers, change shape, or disappear.

@@ -376,8 +389,10 @@ After editing, check the manifest endpoint and browser-console failure cases.

Trust model

- Plugins are not sandboxed. They run as JavaScript in the browser, can call PI WEB APIs available to the - current session, and can render arbitrary UI. Install only plugins you trust. + Plugins are not sandboxed. They run as JavaScript in the browser, can use browser APIs, call documented + PI WEB helpers, and render arbitrary UI. If a plugin reaches beyond those helpers into private PI WEB + internals, treat that dependency as experimental: it may become stable, change shape, or disappear. + Install only plugins you trust.

Plugins do not run inside the session daemon and do not provide server-side hooks. @@ -394,6 +409,7 @@ After editing, check the manifest endpoint and browser-console failure cases. Home Remote-first + Fleet Install FAQ GitHub diff --git a/docs/plugins.md b/docs/plugins.md index 66570fd..0743670 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -22,7 +22,7 @@ Plugins run as JavaScript in the browser app. Treat them as trusted code: - they can render arbitrary Lit templates/custom elements in plugin contribution areas; - they should not be installed from untrusted sources. -PI WEB's `/api/...` HTTP and WebSocket endpoints are internal implementation details. Plugin code should not fetch PI WEB API endpoints directly; use the documented context helpers instead. +PI WEB's `/api/...` HTTP and WebSocket endpoints are internal implementation details. Plugin code should use the documented context helpers instead. Daring plugins can still reach private routes or runtime objects because they run in the browser, but those private surfaces are experimental: they may graduate into stable helpers, change shape, or disappear. ## What to ask AI to build @@ -131,17 +131,22 @@ Reload the PI WEB browser tab. PI WEB serves plugin modules with an mtime-based ## Remote machine plugins -When machine federation is enabled, PI WEB also loads discovered plugins from the selected remote machine. Remote plugins are trusted browser-side code like local plugins, but their contributions are machine-scoped: +When [machine federation](https://pi-web.dev/machines.html) is enabled, PI WEB also loads discovered plugins from the selected remote machine. Remote plugins are trusted browser-side code like local plugins, but their contributions are machine-scoped: - actions, workspace panels, and workspace labels only appear while that machine is selected; - plugin file and terminal helpers run against that machine; - plugin code is loaded best-effort through the current gateway and cached for the browser page lifetime; -- if the gateway already has an enabled plugin with the same original id, the gateway plugin wins and the remote duplicate stays hidden; +- if the gateway and remote machine both have an enabled plugin with the same original id, `machineSpecific` metadata decides whether the gateway copy is reused or only the selected machine's copy can appear; - remote theme contributions are ignored for now because themes are app-wide; - mixed PI WEB versions across federated machines are best-effort and not guaranteed compatible. Remote plugin enablement is controlled by the remote machine's PI WEB plugin config. To edit or disable a remote machine plugin, open that machine directly or update its config file. +Plugin package metadata may set `machineSpecific: true` when the plugin's meaning is tied to the selected PI WEB machine: + +- Omitted or `false`: use the gateway copy when the same plugin id is also present on a remote machine. This is best for portable UI plugins whose helpers already route through the selected machine. +- `true`: the gateway copy only appears for the local machine. When a remote machine is selected, only that remote machine's copy can appear; if the remote machine does not expose the plugin, the plugin is hidden. This is best for plugins that report machine-local PI WEB status or depend on machine-local plugin code. + For portable plugin assets, prefer URLs relative to the plugin module, for example: ```js @@ -182,10 +187,10 @@ Built-in plugins can be managed from **Settings → Plugins** or with the top-le ### Updates -**Plugin id:** `updates` +**Plugin id:** `updates` **What it does:** adds a conditional **Updates** workspace tab with PI WEB update, restart, and installed-service guidance. -Updates is enabled by default. To hide it, disable `updates` in **Settings → Plugins** or set: +Updates is enabled by default. It declares `machineSpecific: true` so the gateway Updates tab only appears for the local machine; while a remote machine is selected, that remote machine's Updates plugin is used if available. To hide it, disable `updates` in **Settings → Plugins** or set: ```json { @@ -197,8 +202,8 @@ Updates is enabled by default. To hide it, disable `updates` in **Settings → P ### Workspace Tasks -**Plugin id:** `workspace-tasks` -**Config file:** `.pi-web/tasks.json` +**Plugin id:** `workspace-tasks` +**Config file:** `.pi-web/tasks.json` **What it does:** adds a **Tasks** workspace tab for running configured shell commands in dedicated PI WEB terminals. Workspace Tasks is enabled by default. To hide it, disable `workspace-tasks` in **Settings → Plugins** or set: @@ -286,7 +291,7 @@ A package can expose one or more PI WEB plugin modules. There is exactly one sup "piWeb": { "plugins": [ { "id": "review", "module": "dist/review.js" }, - { "id": "dashboard", "module": "dist/dashboard.js" } + { "id": "dashboard", "module": "dist/dashboard.js", "machineSpecific": true } ] } } @@ -298,6 +303,7 @@ Rules: - Each entry must have an explicit `id` and `module`. - `id` must match `^[a-z][a-z0-9.-]*$`. - `module` must be a safe relative path inside the plugin package root. +- `machineSpecific` is optional and must be a boolean; omit it for the default portable gateway behavior. - Duplicate plugin ids are not auto-renamed; later duplicates are skipped. - Legacy shortcuts such as `piWeb.plugin`, string entries in `piWeb.plugins`, `piWeb.id` fallback ids, and no-`package.json` fallbacks are not supported. @@ -312,13 +318,14 @@ The manifest contains each discovered plugin module: "id": "my-plugin", "module": "/pi-web-plugins/my-plugin/pi-web-plugin.js?v=1234567890", "source": "local", - "scope": "local" + "scope": "local", + "machineSpecific": false } ] } ``` -`source` describes where the plugin came from (`bundled`, `local`, or the Pi package source). `scope` is `bundled`, `local`, `user`, or `project`. +`source` describes where the plugin came from (`bundled`, `local`, or the Pi package source). `scope` is `bundled`, `local`, `user`, or `project`. `machineSpecific` controls whether the gateway copy is valid for remote machines or only each selected machine's own copy can appear. A plugin can fetch its own static assets with URLs under: @@ -450,12 +457,12 @@ interface PluginRuntimeContext { Notes: - `state` is a snapshot of current UI state when actions are built. -- The stable state fields are `state.selectedWorkspace`, `state.selectedSession`, and `state.piWebStatus`. -- Other `state` fields may exist at runtime, but they are PI WEB internals and can change quickly. +- The stable state fields are `state.selectedWorkspace`, `state.selectedSession`, and `state.piWebStatus`. `state.piWebStatus` describes the currently selected machine's PI WEB runtime, or the gateway/local runtime when the local machine is selected. +- Other `state` fields may exist at runtime, but they are private PI WEB internals that may graduate into stable helpers, change shape, or disappear. - `enabled` is evaluated when the action palette asks for actions. - `selectWorkspaceTool()` expects a qualified panel id such as `my-plugin:workspace.info`. - `openTerminal()` switches to the built-in terminal panel. Pass `{ terminalId }` to deep-link to a specific terminal. -- Only fields documented here and declared in `plugin-api.d.ts` are stable public plugin API. Unstable runtime fields are intentionally omitted from these types; if a plugin author chooses to depend on them, they must explicitly import unstable types from `@jmfederico/pi-web/plugin-api/unstable` and type-assert the context in their own code. +- Only fields documented here and declared in `plugin-api.d.ts` are stable public plugin API. Anything else is experimental: it may become public API later, change shape, or disappear. #### Keyboard shortcuts @@ -534,6 +541,8 @@ interface WorkspacePanelContext { `machine`, `workspace`, `files`, `terminal`, and `host` are documented as stable for panel callbacks. Use `terminal.open()` to switch to the built-in terminal panel; pass `{ terminalId }` to deep-link to a specific terminal. Call `host.requestRender()` when async plugin-owned state changes should make PI WEB re-evaluate panel callbacks such as `badge`, `visible`, or `render`. +For compatibility, PI WEB still provides the old `context.openTerminal()` workspace-panel helper at runtime. It is deprecated, intentionally omitted from the public TypeScript declarations, and planned for removal in v2. Existing JavaScript plugins keep working, while typed plugins should migrate to `context.terminal.open()`. + Useful workspace and machine shapes: ```ts @@ -761,22 +770,11 @@ render: ({ terminal }) => html` Review command strings carefully. They are trusted shell commands executed in the workspace terminal. -## Internal PI WEB APIs and explicit unstable opt-in +## Private and experimental PI WEB APIs -PI WEB's `/api/...` HTTP and WebSocket routes are private implementation details. Plugin code should not fetch PI WEB API endpoints directly because those URLs, response shapes, and machine-federation routing rules can change. +PI WEB's `/api/...` HTTP and WebSocket routes and runtime-only fields are private implementation details. They exist because plugins are trusted browser code, and because some capabilities may be evaluated there before they are designed as stable helpers. -If a plugin author deliberately chooses to depend on an unstable runtime field while a public helper is still being designed, make that decision explicit in code with a type-only unstable import and a local type assertion: - -```ts -import type { WorkspacePanelContext } from "@jmfederico/pi-web/plugin-api"; -import type { UnstableWorkspacePanelContext } from "@jmfederico/pi-web/plugin-api/unstable"; - -function unstableContext(context: WorkspacePanelContext) { - return context as WorkspacePanelContext & UnstableWorkspacePanelContext; -} -``` - -Unstable APIs are not covered by the v1 compatibility promise. Prefer documented helpers whenever they exist. +That is allowed, but outside the v1 compatibility promise: URLs, response shapes, runtime fields, and machine-federation routing may graduate into stable APIs, change shape, or disappear. The stable public plugin API is only the documented helpers and declarations in `plugin-api.d.ts`. Prefer those whenever they exist; if you rely on private surfaces, keep the dependency local to the plugin and expect to revisit it after PI WEB upgrades. ## Async data and caching @@ -793,7 +791,7 @@ PI WEB does not provide a plugin cache/invalidation framework. Keep host callbac If you are an AI agent building or editing a PI WEB plugin, follow this checklist: 1. Create or update a plugin folder with `package.json` and a JavaScript module such as `pi-web-plugin.js`. -2. Use the single supported package metadata shape: `piWeb.plugins` array with `{ id, module }` entries. +2. Use the single supported package metadata shape: `piWeb.plugins` array with `{ id, module, machineSpecific? }` entries. 3. Default-export `{ apiVersion: 1, name, activate }` from the module. 4. Return `{ contributions: { actions, workspacePanels, workspaceLabels } }` from `activate()`. 5. Use ids matching `^[a-z][a-z0-9.-]*$`. @@ -804,7 +802,7 @@ If you are an AI agent building or editing a PI WEB plugin, follow this checklis 10. Add workspace labels for compact inline metadata. 11. Return arrays from workspace label `items()`; return an empty array to render nothing. 12. Use documented context helpers first: `files`, `terminal`, `host.requestRender`, `workspace`, `machine`, `state.selectedWorkspace`, `state.selectedSession`, and `state.piWebStatus`. -13. Do not fetch PI WEB `/api/...` endpoints directly. If an unstable runtime field is intentionally required, import the type from `@jmfederico/pi-web/plugin-api/unstable` and type-assert locally. +13. Do not fetch PI WEB `/api/...` endpoints directly unless you intentionally accept private API churn; prefer documented helpers. 14. Treat plugins as trusted code and avoid reading or displaying secrets unless intentional. 15. After local edits, tell the user to hard reload the browser and check the console for plugin errors. diff --git a/docs/remote-first.html b/docs/remote-first.html index c75f4dc..c0651a7 100644 --- a/docs/remote-first.html +++ b/docs/remote-first.html @@ -30,23 +30,28 @@

@@ -182,6 +187,7 @@ PI WEB · remote-first control for persistent AI agents.
Home + Fleet Install Plugins FAQ diff --git a/docs/styles.css b/docs/styles.css index 681fedd..d622208 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -197,12 +197,27 @@ video { background: var(--brand-2); } -.nav-links { +.nav-links, +.nav-pages, +.nav-actions { display: flex; align-items: center; gap: 6px; + min-width: 0; +} + +.nav-links { color: var(--muted); font-size: 0.95rem; + white-space: nowrap; +} + +.nav-pages { + flex: 0 1 auto; +} + +.nav-actions { + flex: 0 0 auto; } .nav-links a, @@ -856,6 +871,7 @@ code .comment, .footer-links { display: flex; + flex-wrap: wrap; gap: 14px; } @@ -1062,11 +1078,7 @@ html[data-theme="light"] .comment { } } -@media (max-width: 680px) { - .container { - width: min(100% - 28px, 1120px); - } - +@media (max-width: 820px) { .nav { position: relative; align-items: stretch; @@ -1082,17 +1094,23 @@ html[data-theme="light"] .comment { } .nav-links { - flex-wrap: nowrap; - overflow-x: auto; + overflow: visible; width: 100%; - scrollbar-width: none; } - .nav-links a:not(.github-link) { + .nav-pages { + flex: 1 1 auto; + overflow-x: auto; + padding-bottom: 2px; + scrollbar-width: none; + -webkit-overflow-scrolling: touch; + } + + .nav-pages a { flex: 0 0 auto; } - .nav-links::-webkit-scrollbar { + .nav-pages::-webkit-scrollbar { display: none; } @@ -1102,28 +1120,30 @@ html[data-theme="light"] .comment { padding: 0 10px; } - .nav-links .github-link, - .nav-links .theme-toggle { + .nav-actions { position: absolute; top: 14px; + right: 0; + } + + .nav-actions .github-link, + .nav-actions .theme-toggle { justify-content: center; width: 38px; min-width: 38px; padding: 0; } - .nav-links .github-link { - right: 44px; - } - - .nav-links .theme-toggle { - right: 0; - } - - .nav-links .github-link span, - .nav-links .theme-toggle [data-theme-label] { + .nav-actions .github-link span, + .nav-actions .theme-toggle [data-theme-label] { display: none; } +} + +@media (max-width: 680px) { + .container { + width: min(100% - 28px, 1120px); + } .hero { padding-top: 52px; diff --git a/package-lock.json b/package-lock.json index d9b2bf3..a8c805d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@jmfederico/pi-web", - "version": "1.202606.0", + "version": "1.202606.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@jmfederico/pi-web", - "version": "1.202606.0", + "version": "1.202606.1", "license": "MIT", "dependencies": { "@codemirror/lang-css": "^6.3.1", diff --git a/package.json b/package.json index 93a8752..b75ff9f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@jmfederico/pi-web", - "version": "1.202606.0", + "version": "1.202606.1", "description": "Remote web UI and browser control plane for persistent Pi Coding Agent sessions.", "license": "MIT", "author": "Federico Jaramillo Martinez", diff --git a/pi-web-plugins/updates/package.json b/pi-web-plugins/updates/package.json index e53b362..0772085 100644 --- a/pi-web-plugins/updates/package.json +++ b/pi-web-plugins/updates/package.json @@ -3,7 +3,7 @@ "private": true, "piWeb": { "plugins": [ - { "id": "updates", "module": "pi-web-plugin.js" } + { "id": "updates", "module": "pi-web-plugin.js", "machineSpecific": true } ] } } diff --git a/src/client/src/api.ts b/src/client/src/api.ts index d7b5a48..10e3e7e 100644 --- a/src/client/src/api.ts +++ b/src/client/src/api.ts @@ -1,3 +1,3 @@ export { activityApi, api, configApi, filesApi, gitApi, machinesApi, piWebApi, pluginsApi, projectsApi, sessionsApi, terminalsApi, workspacesApi } from "./api/clients"; export { globalSessionEvents, realtimeEvents, sessionEvents, terminalSocket } from "./api/sockets"; -export type { ArchiveSessionsResponse, AuthProviderOption, AuthProviderStatus, AuthProvidersResponse, AuthStatusSource, AuthType, CommandOption, CommandResult, FileContentMediaType, FileContentResponse, FileSuggestion, FileTreeEntry, FileTreeResponse, GitDiffResponse, GitFileState, GitStatusFile, GitStatusResponse, Machine, MachineHealth, MachineKind, MachineStatus, MessagePage, ModelSelectionResponse, OAuthFlowState, PiWebComponentStatus, PiWebConfigEnvOverrides, PiWebConfigResponse, PiWebConfigValues, PiWebInstallationInfo, PiWebPluginConfig, PiWebPluginConfigMap, PiWebPluginInfo, PiWebPluginsResponse, PiWebPluginScope, PiWebPluginSettings, PiWebReleaseStatus, PiWebShortcutConfig, PiWebStatusMessage, PiWebStatusResponse, Project, QueuedSessionMessage, RealtimeEvent, RunTerminalCommandInput, SessionActivity, SessionInfo, SessionRef, SessionModel, SessionStatus, SlashCommand, SessionUiEvent, TerminalCommandRun, TerminalCommandRunFilter, TerminalCommandRunHandle, TerminalCommandRunStatus, TerminalInfo, TerminalUiEvent, ThinkingLevel, ThinkingLevelsResponse, Workspace, WorkspaceActivity, WorkspaceActivityResponse, WorkspaceActivityUiEvent } from "../../shared/apiTypes"; +export type { ArchiveSessionsResponse, AuthProviderOption, AuthProviderStatus, AuthProvidersResponse, AuthStatusSource, AuthType, CommandOption, CommandResult, FileContentMediaType, FileContentResponse, FileSuggestion, FileTreeEntry, FileTreeResponse, GitDiffResponse, GitFileState, GitStatusFile, GitStatusResponse, Machine, MachineHealth, MachineKind, MachineRuntime, MachineStatus, MessagePage, ModelSelectionResponse, OAuthFlowState, PiWebCapability, PiWebComponentStatus, PiWebConfigEnvOverrides, PiWebConfigResponse, PiWebConfigValues, PiWebInstallationInfo, PiWebPluginConfig, PiWebPluginConfigMap, PiWebPluginInfo, PiWebPluginsResponse, PiWebPluginScope, PiWebPluginSettings, PiWebReleaseStatus, PiWebRuntimeComponent, PiWebRuntimeResponse, PiWebShortcutConfig, PiWebStatusMessage, PiWebStatusResponse, Project, QueuedSessionMessage, RealtimeEvent, RunTerminalCommandInput, SessionActivity, SessionInfo, SessionRef, SessionModel, SessionStatus, SlashCommand, SessionUiEvent, TerminalCommandRun, TerminalCommandRunFilter, TerminalCommandRunHandle, TerminalCommandRunStatus, TerminalInfo, TerminalUiEvent, ThinkingLevel, ThinkingLevelsResponse, Workspace, WorkspaceActivity, WorkspaceActivityResponse, WorkspaceActivityUiEvent } from "../../shared/apiTypes"; diff --git a/src/client/src/api/clients.test.ts b/src/client/src/api/clients.test.ts index 4de6ef7..224846c 100644 --- a/src/client/src/api/clients.test.ts +++ b/src/client/src/api/clients.test.ts @@ -1,6 +1,7 @@ import { afterEach, describe, expect, it, vi } from "vitest"; +import { PI_WEB_CAPABILITIES } from "../../../shared/capabilities"; import type { TerminalCommandRun, Workspace } from "../../../shared/apiTypes"; -import { terminalsApi, workspacesApi } from "./clients"; +import { machinesApi, piWebApi, terminalsApi, workspacesApi } from "./clients"; const workspace: Workspace = { id: "w/1", @@ -29,6 +30,36 @@ afterEach(() => { vi.unstubAllGlobals(); }); +describe("machine-scoped runtime API", () => { + it("reads machine PI WEB status through the gateway route", async () => { + const fetchMock = stubJsonFetch({ + packageName: "@jmfederico/pi-web", + generatedAt: "now", + components: { + web: { component: "web", label: "PI WEB", available: true, stale: false }, + sessiond: { component: "sessiond", label: "PI WEB Session Daemon", available: true, stale: false }, + }, + release: { packageName: "@jmfederico/pi-web", updateAvailable: false }, + commands: {}, + messages: [], + }); + + await piWebApi.piWebStatus("remote a"); + + expect(fetchMock).toHaveBeenCalledOnce(); + expect(fetchCall(fetchMock, 0)[0]).toBe("/api/machines/remote%20a/pi-web/status"); + }); + + it("reads machine runtime through the gateway route", async () => { + const fetchMock = stubJsonFetch({ machineId: "remote a", ok: true, checkedAt: "now", capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }); + + await machinesApi.runtime("remote a"); + + expect(fetchMock).toHaveBeenCalledOnce(); + expect(fetchCall(fetchMock, 0)[0]).toBe("/api/machines/remote%20a/runtime"); + }); +}); + describe("machine-scoped terminal command-run API", () => { it("deletes workspaces through the selected machine scope", async () => { const fetchMock = stubJsonFetch(commandRun); diff --git a/src/client/src/api/clients.ts b/src/client/src/api/clients.ts index 8b85453..a207bbe 100644 --- a/src/client/src/api/clients.ts +++ b/src/client/src/api/clients.ts @@ -8,6 +8,7 @@ import { parseAuthProvidersResponse, parseClosed, parseCommandResult, + parseDeleted, parseDetached, parseFileContentResponse, parseFileSuggestion, @@ -16,12 +17,14 @@ import { parseGitStatusResponse, parseMachine, parseMachineHealth, + parseMachineRuntime, parseMachinesResponse, parseMessagePage, parseModelSelectionResponse, parseOAuthFlowState, parsePiWebConfigResponse, parsePiWebPluginsResponse, + parsePiWebRuntimeResponse, parsePiWebStatusResponse, parseProject, parseRestored, @@ -39,8 +42,12 @@ import { machineGitDiffUrl, messageUrl } from "./urls"; const machinePrefix = (machineId = "local") => `/api/machines/${encodeURIComponent(machineId)}`; +function sessionBaseUrl(session: SessionRef, machineId = "local"): string { + return `${machinePrefix(machineId)}/sessions/${encodeURIComponent(session.id)}`; +} + function sessionUrl(session: SessionRef, endpoint: string, machineId = "local"): string { - return `${machinePrefix(machineId)}/sessions/${encodeURIComponent(session.id)}/${endpoint}`; + return `${sessionBaseUrl(session, machineId)}/${endpoint}`; } function sessionQueryUrl(session: SessionRef, endpoint: string, machineId = "local"): string { @@ -49,7 +56,8 @@ function sessionQueryUrl(session: SessionRef, endpoint: string, machineId = "loc } export const piWebApi = { - piWebStatus: () => request("/api/pi-web/status", parsePiWebStatusResponse), + piWebStatus: (machineId = "local") => request(machineId === "local" ? "/api/pi-web/status" : `${machinePrefix(machineId)}/pi-web/status`, parsePiWebStatusResponse), + piWebRuntime: () => request("/api/pi-web/runtime", parsePiWebRuntimeResponse), }; export const machinesApi = { @@ -57,6 +65,7 @@ export const machinesApi = { addMachine: (input: { name: string; baseUrl: string; token?: string }) => request("/api/machines", parseMachine, { method: "POST", body: JSON.stringify(input) }), deleteMachine: (machineId: string) => request(`/api/machines/${encodeURIComponent(machineId)}`, (value) => value, { method: "DELETE" }), health: (machineId: string) => request(`/api/machines/${encodeURIComponent(machineId)}/health`, parseMachineHealth), + runtime: (machineId: string) => request(`/api/machines/${encodeURIComponent(machineId)}/runtime`, parseMachineRuntime), }; export const configApi = { @@ -107,6 +116,7 @@ export const sessionsApi = { archive: (session: SessionRef, machineId = "local") => request(sessionUrl(session, "archive", machineId), parseArchived, { method: "POST", body: JSON.stringify({ cwd: session.cwd }) }), archiveWithDescendants: (session: SessionRef, machineId = "local") => request(sessionUrl(session, "archive-tree", machineId), parseArchived, { method: "POST", body: JSON.stringify({ cwd: session.cwd }) }), restore: (session: SessionRef, machineId = "local") => request(sessionUrl(session, "restore", machineId), parseRestored, { method: "POST", body: JSON.stringify({ cwd: session.cwd }) }), + deleteArchived: (session: SessionRef, machineId = "local") => request(`${sessionBaseUrl(session, machineId)}?${new URLSearchParams({ cwd: session.cwd }).toString()}`, parseDeleted, { method: "DELETE" }), detachParent: (session: SessionRef, machineId = "local") => request(sessionUrl(session, "detach-parent", machineId), parseDetached, { method: "POST", body: JSON.stringify({ cwd: session.cwd }) }), authProviders: (options?: { mode?: "login" | "logout"; authType?: "oauth" | "api_key"; machineId?: string }) => { const params = new URLSearchParams(); diff --git a/src/client/src/api/federatedRouteContract.test.ts b/src/client/src/api/federatedRouteContract.test.ts index 2e1188b..059212e 100644 --- a/src/client/src/api/federatedRouteContract.test.ts +++ b/src/client/src/api/federatedRouteContract.test.ts @@ -1,7 +1,7 @@ import { afterEach, describe, expect, it, vi } from "vitest"; import type { Workspace } from "../../../shared/apiTypes"; import { FEDERATED_HTTP_ROUTES, FEDERATED_WEBSOCKET_ROUTES, type FederatedHttpRouteSpec } from "../../../shared/federatedRoutes"; -import { activityApi, filesApi, gitApi, projectsApi, sessionsApi, terminalsApi, workspacesApi } from "./clients"; +import { activityApi, filesApi, gitApi, piWebApi, projectsApi, sessionsApi, terminalsApi, workspacesApi } from "./clients"; import { globalSessionEvents, realtimeEvents, sessionEvents, terminalSocket } from "./sockets"; import { workspaceImagePreviewUrl } from "./urls"; @@ -27,6 +27,7 @@ describe("federated route contract", () => { vi.stubGlobal("fetch", fetchMock); await Promise.all([ + ignoreParseFailure(piWebApi.piWebStatus(machineId)), ignoreParseFailure(activityApi.workspaceActivity(machineId)), ignoreParseFailure(projectsApi.projects(machineId)), ignoreParseFailure(projectsApi.addProject("/repo", "Repo", false, machineId)), @@ -59,6 +60,7 @@ describe("federated route contract", () => { ignoreParseFailure(sessionsApi.archive(session, machineId)), ignoreParseFailure(sessionsApi.archiveWithDescendants(session, machineId)), ignoreParseFailure(sessionsApi.restore(session, machineId)), + ignoreParseFailure(sessionsApi.deleteArchived(session, machineId)), ignoreParseFailure(sessionsApi.detachParent(session, machineId)), ignoreParseFailure(sessionsApi.authProviders({ mode: "login", authType: "oauth", machineId })), ignoreParseFailure(sessionsApi.saveApiKey("openai", "key", machineId)), diff --git a/src/client/src/api/parsers.test.ts b/src/client/src/api/parsers.test.ts index 1c36ed0..3bcd3ba 100644 --- a/src/client/src/api/parsers.test.ts +++ b/src/client/src/api/parsers.test.ts @@ -1,5 +1,6 @@ import { describe, expect, it } from "vitest"; -import { parseCommandResult, parseFileContentResponse, parseFileSuggestion, parseGitStatusResponse, parseMessagePage, parsePiWebConfigResponse, parsePiWebPluginsResponse, parseSessionStatus, parseSlashCommand, parseTerminalCommandRun, parseTerminalInfo, parseWorkspaceActivityResponse } from "./parsers"; +import { PI_WEB_CAPABILITIES } from "../../../shared/capabilities"; +import { parseCommandResult, parseFileContentResponse, parseFileSuggestion, parseGitStatusResponse, parseMessagePage, parsePiWebConfigResponse, parsePiWebPluginsResponse, parsePiWebRuntimeResponse, parseSessionStatus, parseSlashCommand, parseTerminalCommandRun, parseTerminalInfo, parseWorkspaceActivityResponse } from "./parsers"; describe("API parsers", () => { it("parses PI WEB config responses", () => { @@ -18,11 +19,23 @@ describe("API parsers", () => { }); }); + it("parses PI WEB runtime responses", () => { + expect(parsePiWebRuntimeResponse({ + packageName: "@jmfederico/pi-web", + generatedAt: "now", + components: { + web: { component: "web", label: "Web/UI", runtimeVersion: "1.0.0", available: true, capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }, + sessiond: { component: "sessiond", label: "Session daemon", runtimeVersion: "1.0.0", available: true, capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }, + }, + capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived], + })).toMatchObject({ capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }); + }); + it("parses PI WEB plugin status responses", () => { expect(parsePiWebPluginsResponse({ - plugins: [{ id: "info", module: "/pi-web-plugins/info/pi-web-plugin.js?v=1", source: "bundled", scope: "bundled", enabled: false }], + plugins: [{ id: "info", module: "/pi-web-plugins/info/pi-web-plugin.js?v=1", source: "bundled", scope: "bundled", machineSpecific: true, enabled: false }], })).toEqual({ - plugins: [{ id: "info", module: "/pi-web-plugins/info/pi-web-plugin.js?v=1", source: "bundled", scope: "bundled", enabled: false }], + plugins: [{ id: "info", module: "/pi-web-plugins/info/pi-web-plugin.js?v=1", source: "bundled", scope: "bundled", machineSpecific: true, enabled: false }], }); }); diff --git a/src/client/src/api/parsers.ts b/src/client/src/api/parsers.ts index 6da7872..6245a5d 100644 --- a/src/client/src/api/parsers.ts +++ b/src/client/src/api/parsers.ts @@ -1,4 +1,5 @@ -import type { ArchiveSessionsResponse, AuthProviderOption, AuthProviderStatus, AuthProvidersResponse, AuthStatusSource, AuthType, CommandOption, CommandResult, FileContentResponse, FileSuggestion, FileTreeEntry, FileTreeResponse, GitDiffResponse, GitFileState, GitStatusFile, GitStatusResponse, Machine, MachineHealth, MachineKind, MachineStatus, MessagePage, ModelSelectionResponse, OAuthFlowState, PiWebComponentStatus, PiWebConfigEnvOverrides, PiWebConfigResponse, PiWebConfigValues, PiWebInstallationInfo, PiWebPluginConfigMap, PiWebPluginInfo, PiWebPluginsResponse, PiWebPluginScope, PiWebReleaseStatus, PiWebServiceComponent, PiWebShortcutConfig, PiWebStatusMessage, PiWebStatusResponse, PiWebStatusSeverity, Project, QueuedSessionMessage, SessionInfo, SessionModel, SessionStatus, SlashCommand, TerminalCommandRun, TerminalCommandRunStatus, TerminalInfo, ThinkingLevel, ThinkingLevelsResponse, Workspace, WorkspaceActivity, WorkspaceActivityResponse } from "../../../shared/apiTypes"; +import type { ArchiveSessionsResponse, AuthProviderOption, AuthProviderStatus, AuthProvidersResponse, AuthStatusSource, AuthType, CommandOption, CommandResult, FileContentResponse, FileSuggestion, FileTreeEntry, FileTreeResponse, GitDiffResponse, GitFileState, GitStatusFile, GitStatusResponse, Machine, MachineHealth, MachineKind, MachineRuntime, MachineStatus, MessagePage, ModelSelectionResponse, OAuthFlowState, PiWebCapability, PiWebComponentStatus, PiWebConfigEnvOverrides, PiWebConfigResponse, PiWebConfigValues, PiWebInstallationInfo, PiWebPluginConfigMap, PiWebPluginInfo, PiWebPluginsResponse, PiWebPluginScope, PiWebReleaseStatus, PiWebRuntimeComponent, PiWebRuntimeResponse, PiWebServiceComponent, PiWebShortcutConfig, PiWebStatusMessage, PiWebStatusResponse, PiWebStatusSeverity, Project, QueuedSessionMessage, SessionInfo, SessionModel, SessionStatus, SlashCommand, TerminalCommandRun, TerminalCommandRunStatus, TerminalInfo, ThinkingLevel, ThinkingLevelsResponse, Workspace, WorkspaceActivity, WorkspaceActivityResponse } from "../../../shared/apiTypes"; +import { isPiWebCapability } from "../../../shared/capabilities"; function isRecord(value: unknown): value is Record { return typeof value === "object" && value !== null; @@ -95,6 +96,21 @@ export function parseMachineHealth(value: unknown): MachineHealth { }; } +export function parseMachineRuntime(value: unknown): MachineRuntime { + const record = requireRecord(value); + const error = optionalString(record, "error"); + return { + machineId: requireString(record, "machineId"), + ok: requireBoolean(record, "ok"), + checkedAt: requireString(record, "checkedAt"), + ...optionalField("packageName", optionalString(record, "packageName")), + ...optionalField("generatedAt", optionalString(record, "generatedAt")), + ...(record["components"] === undefined ? {} : { components: parsePiWebRuntimeComponents(record["components"]) }), + ...(record["capabilities"] === undefined ? {} : { capabilities: parsePiWebCapabilities(record["capabilities"]) }), + ...(error === undefined ? {} : { error }), + }; +} + function requireMachineKind(record: Record, key: string): MachineKind { const value = requireString(record, key); if (value !== "local" && value !== "remote") throw new Error(`Expected machine kind field: ${key}`); @@ -476,6 +492,7 @@ function parsePiWebPluginInfo(value: unknown): PiWebPluginInfo { module: requireString(record, "module"), source: requireString(record, "source"), scope: parsePiWebPluginScope(record["scope"]), + machineSpecific: parseOptionalBoolean(record["machineSpecific"], "machineSpecific") ?? false, enabled: requireBoolean(record, "enabled"), }; } @@ -485,6 +502,12 @@ function parsePiWebPluginScope(value: unknown): PiWebPluginScope { return value; } +function parseOptionalBoolean(value: unknown, key: string): boolean | undefined { + if (value === undefined) return undefined; + if (typeof value !== "boolean") throw new Error(`Expected optional boolean field: ${key}`); + return value; +} + export function parsePiWebStatusResponse(value: unknown): PiWebStatusResponse { const record = requireRecord(value); return { @@ -497,11 +520,38 @@ export function parsePiWebStatusResponse(value: unknown): PiWebStatusResponse { }; } +export function parsePiWebRuntimeResponse(value: unknown): PiWebRuntimeResponse { + const record = requireRecord(value); + return { + packageName: requireString(record, "packageName"), + generatedAt: requireString(record, "generatedAt"), + components: parsePiWebRuntimeComponents(record["components"]), + capabilities: parsePiWebCapabilities(record["capabilities"]), + }; +} + function parsePiWebComponents(value: unknown): PiWebStatusResponse["components"] { const record = requireRecord(value); return { web: parsePiWebComponentStatus(record["web"]), sessiond: parsePiWebComponentStatus(record["sessiond"]) }; } +function parsePiWebRuntimeComponents(value: unknown): PiWebRuntimeResponse["components"] { + const record = requireRecord(value); + return { web: parsePiWebRuntimeComponent(record["web"]), sessiond: parsePiWebRuntimeComponent(record["sessiond"]) }; +} + +function parsePiWebRuntimeComponent(value: unknown): PiWebRuntimeComponent { + const record = requireRecord(value); + return { + component: parsePiWebServiceComponent(record["component"]), + label: requireString(record, "label"), + ...optionalField("runtimeVersion", optionalString(record, "runtimeVersion")), + available: requireBoolean(record, "available"), + capabilities: parsePiWebCapabilities(record["capabilities"]), + ...optionalField("error", optionalString(record, "error")), + }; +} + function parsePiWebComponentStatus(value: unknown): PiWebComponentStatus { const record = requireRecord(value); return { @@ -571,6 +621,11 @@ function parsePiWebServiceComponent(value: unknown): PiWebServiceComponent { return value; } +function parsePiWebCapabilities(value: unknown): PiWebCapability[] { + if (!Array.isArray(value) || !value.every(isPiWebCapability)) throw new Error("Invalid PI WEB capabilities"); + return value; +} + function parsePiWebStatusSeverity(value: unknown): PiWebStatusSeverity { if (value !== "info" && value !== "warning" && value !== "error") throw new Error("Invalid PI WEB status severity"); return value; @@ -638,6 +693,12 @@ export function parseRestored(value: unknown): { restored: true } { return { restored: true }; } +export function parseDeleted(value: unknown): { deleted: true } { + const record = requireRecord(value); + if (record["deleted"] !== true) throw new Error("Expected deleted response"); + return { deleted: true }; +} + export function parseDetached(value: unknown): { detached: true } { const record = requireRecord(value); if (record["detached"] !== true) throw new Error("Expected detached response"); diff --git a/src/client/src/appShell/navigationState.test.ts b/src/client/src/appShell/navigationState.test.ts index d90669e..17aa244 100644 --- a/src/client/src/appShell/navigationState.test.ts +++ b/src/client/src/appShell/navigationState.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from "vitest"; -import { defaultNavigationSection, expandedNavigationSection, isNavigationSectionCollapsed, toggleNavigationSection } from "./navigationState"; +import { defaultNavigationSection, expandedNavigationSection, isNavigationSectionCollapsed, toggleCollapsedNavigationSection, toggleNavigationSection } from "./navigationState"; describe("navigationState", () => { it("defaults to the first incomplete selection section", () => { @@ -16,15 +16,22 @@ describe("navigationState", () => { expect(expandedNavigationSection("none", state)).toBeUndefined(); }); - it("only collapses sections in mobile navigation layouts", () => { + it("uses the mobile accordion state on mobile layouts", () => { const state = { selectedProject: {}, selectedWorkspace: {} }; - expect(isNavigationSectionCollapsed("projects", { isMobileLayout: false, expanded: "sessions", state })).toBe(false); expect(isNavigationSectionCollapsed("projects", { isMobileLayout: true, expanded: "sessions", state })).toBe(true); expect(isNavigationSectionCollapsed("sessions", { isMobileLayout: true, expanded: "sessions", state })).toBe(false); }); - it("toggles the effective section, including the implicit default section", () => { + it("uses independent collapsed sections on desktop layouts", () => { + const state = { selectedProject: {}, selectedWorkspace: {} }; + + expect(isNavigationSectionCollapsed("projects", { isMobileLayout: false, expanded: "sessions", state })).toBe(false); + expect(isNavigationSectionCollapsed("projects", { isMobileLayout: false, expanded: "sessions", state, collapsedSections: ["projects"] })).toBe(true); + expect(isNavigationSectionCollapsed("sessions", { isMobileLayout: false, expanded: "sessions", state, collapsedSections: ["projects"] })).toBe(false); + }); + + it("toggles the effective mobile section, including the implicit default section", () => { const state = { selectedProject: undefined, selectedWorkspace: undefined }; expect(toggleNavigationSection(undefined, "projects", { isMobileLayout: true, state })).toBe("none"); @@ -37,4 +44,11 @@ describe("navigationState", () => { expect(toggleNavigationSection("projects", "projects", { isMobileLayout: false, state })).toBe("projects"); }); + + it("toggles desktop sections independently", () => { + expect(toggleCollapsedNavigationSection([], "projects")).toEqual(["projects"]); + expect(toggleCollapsedNavigationSection(["machines", "projects"], "projects")).toEqual(["machines"]); + expect(toggleCollapsedNavigationSection(["sessions"], "machines")).toEqual(["machines", "sessions"]); + }); + }); diff --git a/src/client/src/appShell/navigationState.ts b/src/client/src/appShell/navigationState.ts index 6036a3d..0981d03 100644 --- a/src/client/src/appShell/navigationState.ts +++ b/src/client/src/appShell/navigationState.ts @@ -1,6 +1,7 @@ import type { ReactiveController, ReactiveControllerHost } from "lit"; -export type NavigationSection = "machines" | "projects" | "workspaces" | "sessions"; +export const NAVIGATION_SECTION_ORDER = ["machines", "projects", "workspaces", "sessions"] as const; +export type NavigationSection = (typeof NAVIGATION_SECTION_ORDER)[number]; export type ExpandedNavigationSection = NavigationSection | "none" | undefined; export interface NavigationSelectionState { @@ -19,8 +20,9 @@ export function expandedNavigationSection(expanded: ExpandedNavigationSection, s return expanded ?? defaultNavigationSection(state); } -export function isNavigationSectionCollapsed(section: NavigationSection, options: { isMobileLayout: boolean; expanded: ExpandedNavigationSection; state: NavigationSelectionState }): boolean { - return options.isMobileLayout && expandedNavigationSection(options.expanded, options.state) !== section; +export function isNavigationSectionCollapsed(section: NavigationSection, options: { isMobileLayout: boolean; expanded: ExpandedNavigationSection; state: NavigationSelectionState; collapsedSections?: readonly NavigationSection[] | undefined }): boolean { + if (options.isMobileLayout) return expandedNavigationSection(options.expanded, options.state) !== section; + return options.collapsedSections?.includes(section) ?? false; } export function toggleNavigationSection(expanded: ExpandedNavigationSection, section: NavigationSection, options: { isMobileLayout: boolean; state: NavigationSelectionState }): ExpandedNavigationSection { @@ -32,8 +34,20 @@ export function expandNavigationSection(expanded: ExpandedNavigationSection, sec return isMobileLayout ? section : expanded; } -export class MobileNavigationController implements ReactiveController { +export function toggleCollapsedNavigationSection(collapsedSections: readonly NavigationSection[], section: NavigationSection): NavigationSection[] { + const collapsed = new Set(collapsedSections); + if (collapsed.has(section)) collapsed.delete(section); + else collapsed.add(section); + return orderedNavigationSections(collapsed); +} + +export function nextNavigationSection(section: NavigationSection): NavigationSection | undefined { + return NAVIGATION_SECTION_ORDER[NAVIGATION_SECTION_ORDER.indexOf(section) + 1]; +} + +export class NavigationSectionsController implements ReactiveController { private expanded: ExpandedNavigationSection; + private collapsedSections: readonly NavigationSection[] = []; hostConnected(): void { return; @@ -56,15 +70,30 @@ export class MobileNavigationController implements ReactiveController { isMobileLayout: this.isMobileLayout(), expanded: this.expanded, state: this.getState(), + collapsedSections: this.collapsedSections, }); } toggle(section: NavigationSection): void { - this.setExpanded(toggleNavigationSection(this.expanded, section, { isMobileLayout: this.isMobileLayout(), state: this.getState() })); + if (this.isMobileLayout()) { + this.setExpanded(toggleNavigationSection(this.expanded, section, { isMobileLayout: true, state: this.getState() })); + return; + } + this.setCollapsedSections(toggleCollapsedNavigationSection(this.collapsedSections, section)); } expand(section: NavigationSection): void { - this.setExpanded(expandNavigationSection(this.expanded, section, this.isMobileLayout())); + if (this.isMobileLayout()) { + this.setExpanded(expandNavigationSection(this.expanded, section, true)); + return; + } + this.setCollapsedSections(this.collapsedSections.filter((collapsedSection) => collapsedSection !== section)); + } + + advanceAfterSelection(section: NavigationSection): void { + if (!this.isMobileLayout()) return; + const next = nextNavigationSection(section); + if (next !== undefined) this.expand(next); } open(section: NavigationSection, openNavigationView: () => void): void { @@ -78,4 +107,19 @@ export class MobileNavigationController implements ReactiveController { this.expanded = expanded; this.host.requestUpdate(); } + + private setCollapsedSections(collapsedSections: readonly NavigationSection[]): void { + if (navigationSectionListsEqual(this.collapsedSections, collapsedSections)) return; + this.collapsedSections = collapsedSections; + this.host.requestUpdate(); + } +} + +function orderedNavigationSections(sections: Iterable): NavigationSection[] { + const sectionSet = new Set(sections); + return NAVIGATION_SECTION_ORDER.filter((section) => sectionSet.has(section)); +} + +function navigationSectionListsEqual(first: readonly NavigationSection[], second: readonly NavigationSection[]): boolean { + return first.length === second.length && first.every((section, index) => section === second[index]); } diff --git a/src/client/src/appShell/panelCollapseController.ts b/src/client/src/appShell/panelCollapseController.ts index 378563d..7356420 100644 --- a/src/client/src/appShell/panelCollapseController.ts +++ b/src/client/src/appShell/panelCollapseController.ts @@ -23,6 +23,18 @@ export class PanelCollapseController implements ReactiveController { this.host.requestUpdate(); } + expandNavigationPanel(): void { + if (!this.navigationPanelCollapsed) return; + this.navigationPanelCollapsed = false; + this.host.requestUpdate(); + } + + expandWorkspacePanel(): void { + if (!this.workspacePanelCollapsed) return; + this.workspacePanelCollapsed = false; + this.host.requestUpdate(); + } + shellClass(mainView: AppState["mainView"]): string { return [ "shell", diff --git a/src/client/src/appShell/panelResizeController.test.ts b/src/client/src/appShell/panelResizeController.test.ts new file mode 100644 index 0000000..4730ab8 --- /dev/null +++ b/src/client/src/appShell/panelResizeController.test.ts @@ -0,0 +1,115 @@ +import { describe, expect, it } from "vitest"; +import { + clampPanelWidth, + PANEL_SIZE_STORAGE_KEY, + panelResizeDelta, + panelWidthFromDrag, + panelWidthFromKeyboard, + readStoredPanelSizes, + writeStoredPanelSizes, +} from "./panelResizeController"; + +describe("panel resize behavior", () => { + it("resizes left and right panels in opposite drag directions", () => { + expect(panelResizeDelta("navigation", 100, 140)).toBe(40); + expect(panelWidthFromDrag("navigation", 300, 100, 140)).toBe(340); + + expect(panelResizeDelta("workspace", 100, 140)).toBe(-40); + expect(panelWidthFromDrag("workspace", 500, 100, 140)).toBe(460); + }); + + it("clamps panel widths to broad fallback bounds", () => { + expect(clampPanelWidth("navigation", 50)).toBe(180); + expect(clampPanelWidth("navigation", 9000)).toBe(4096); + expect(clampPanelWidth("workspace", 50)).toBe(240); + expect(clampPanelWidth("workspace", 9000)).toBe(4096); + }); + + it("supports narrower viewport-aware constraints", () => { + const constraints = { minWidth: 200, maxWidth: 900, defaultWidth: 340, keyboardStep: 24, largeKeyboardStep: 72 }; + + expect(clampPanelWidth("navigation", 100, constraints)).toBe(200); + expect(clampPanelWidth("navigation", 1200, constraints)).toBe(900); + }); + + it("supports keyboard resizing in panel-relative directions", () => { + expect(panelWidthFromKeyboard("navigation", 300, "ArrowRight")).toBe(324); + expect(panelWidthFromKeyboard("navigation", 300, "ArrowLeft")).toBe(276); + expect(panelWidthFromKeyboard("workspace", 500, "ArrowLeft")).toBe(524); + expect(panelWidthFromKeyboard("workspace", 500, "ArrowRight")).toBe(476); + expect(panelWidthFromKeyboard("workspace", 500, "Home")).toBe(240); + expect(panelWidthFromKeyboard("workspace", 500, "End")).toBe(4096); + expect(panelWidthFromKeyboard("workspace", 500, "Enter")).toBeUndefined(); + }); + + it("reads, writes, and clears stored panel widths", () => { + const storage = new FakeStorage(); + + expect(readStoredPanelSizes(storage)).toEqual({}); + writeStoredPanelSizes({ navigationPanelWidth: 260, workspacePanelWidth: 640 }, storage); + + expect(JSON.parse(storage.value(PANEL_SIZE_STORAGE_KEY) ?? "{}")).toEqual({ + version: 1, + navigationPanelWidth: 260, + workspacePanelWidth: 640, + }); + expect(readStoredPanelSizes(storage)).toEqual({ navigationPanelWidth: 260, workspacePanelWidth: 640 }); + + writeStoredPanelSizes({}, storage); + expect(storage.value(PANEL_SIZE_STORAGE_KEY)).toBeUndefined(); + expect(readStoredPanelSizes(storage)).toEqual({}); + }); + + it("clamps stored panel widths and ignores invalid values", () => { + const storage = new FakeStorage({ + [PANEL_SIZE_STORAGE_KEY]: JSON.stringify({ version: 1, navigationPanelWidth: 9999, workspacePanelWidth: "wide" }), + }); + + expect(readStoredPanelSizes(storage)).toEqual({ navigationPanelWidth: 4096 }); + }); + + it("ignores storage failures", () => { + const storage = new ThrowingStorage(); + + expect(readStoredPanelSizes(storage)).toEqual({}); + expect(() => { writeStoredPanelSizes({ navigationPanelWidth: 260 }, storage); }).not.toThrow(); + }); +}); + +class FakeStorage { + private readonly values = new Map(); + + constructor(seed: Record = {}) { + for (const [key, value] of Object.entries(seed)) this.values.set(key, value); + } + + getItem(key: string): string | null { + return this.values.get(key) ?? null; + } + + setItem(key: string, value: string): void { + this.values.set(key, value); + } + + removeItem(key: string): void { + this.values.delete(key); + } + + value(key: string): string | undefined { + return this.values.get(key); + } +} + +class ThrowingStorage { + getItem(): string | null { + throw new Error("blocked"); + } + + setItem(): void { + throw new Error("blocked"); + } + + removeItem(): void { + throw new Error("blocked"); + } +} diff --git a/src/client/src/appShell/panelResizeController.ts b/src/client/src/appShell/panelResizeController.ts new file mode 100644 index 0000000..ff21d92 --- /dev/null +++ b/src/client/src/appShell/panelResizeController.ts @@ -0,0 +1,221 @@ +import type { ReactiveController, ReactiveControllerHost } from "lit"; + +export type ResizablePanelSide = "navigation" | "workspace"; + +export interface PanelResizeConstraints { + minWidth: number; + maxWidth: number; + defaultWidth: number; + keyboardStep: number; + largeKeyboardStep: number; +} + +export interface PanelSizePreferences { + navigationPanelWidth?: number; + workspacePanelWidth?: number; +} + +export interface PanelResizeControllerOptions { + storage?: PanelSizeStorage; +} + +export interface PanelResizeOptions { + persist?: boolean; +} + +export interface PanelResetOptions { + persist?: boolean; +} + +export interface PanelKeyboardResizeOptions { + largeStep?: boolean; + constraints?: PanelResizeConstraints; +} + +export type PanelSizeStorage = Pick; +export type PanelResizeConstraintsBySide = Partial>; + +export const PANEL_SIZE_STORAGE_KEY = "pi-web:panel-sizes:v1"; +export const PANEL_RESIZE_CONSTRAINTS = { + navigation: { minWidth: 180, maxWidth: 4096, defaultWidth: 340, keyboardStep: 24, largeKeyboardStep: 72 }, + workspace: { minWidth: 240, maxWidth: 4096, defaultWidth: 480, keyboardStep: 24, largeKeyboardStep: 72 }, +} as const satisfies Record; + +interface StoredPanelSizeEnvelope { + version: 1; + navigationPanelWidth?: number; + workspacePanelWidth?: number; +} + +export class PanelResizeController implements ReactiveController { + private readonly storage: PanelSizeStorage | undefined; + private panelSizes: PanelSizePreferences; + + constructor(private readonly host: ReactiveControllerHost, options: PanelResizeControllerOptions = {}) { + host.addController(this); + this.storage = options.storage ?? browserPanelSizeStorage(); + this.panelSizes = readStoredPanelSizes(this.storage); + } + + hostConnected(): void { + return; + } + + constraints(side: ResizablePanelSide): PanelResizeConstraints { + return panelResizeConstraints(side); + } + + panelWidth(side: ResizablePanelSide, measuredWidth?: number): number { + return clampPanelWidth(side, measuredWidth ?? this.storedPanelWidth(side) ?? this.constraints(side).defaultWidth); + } + + resizePanel(side: ResizablePanelSide, width: number, options: PanelResizeOptions = {}): void { + const nextWidth = clampPanelWidth(side, width); + if (this.storedPanelWidth(side) === nextWidth) return; + this.panelSizes = panelSizesWithWidth(this.panelSizes, side, nextWidth); + if (options.persist !== false) this.persistPanelSizes(); + this.host.requestUpdate(); + } + + resetPanel(side: ResizablePanelSide, options: PanelResetOptions = {}): void { + if (this.storedPanelWidth(side) === undefined) return; + this.panelSizes = panelSizesWithoutSide(this.panelSizes, side); + if (options.persist !== false) this.persistPanelSizes(); + this.host.requestUpdate(); + } + + resetPanels(options: PanelResetOptions = {}): void { + if (this.panelSizes.navigationPanelWidth === undefined && this.panelSizes.workspacePanelWidth === undefined) return; + this.panelSizes = {}; + if (options.persist !== false) this.persistPanelSizes(); + this.host.requestUpdate(); + } + + persistPanelSizes(): void { + writeStoredPanelSizes(this.panelSizes, this.storage); + } + + shellStyle(constraintsBySide: PanelResizeConstraintsBySide = {}): string { + const declarations: string[] = []; + if (this.panelSizes.navigationPanelWidth !== undefined) { + declarations.push(`--navigation-panel-size: ${formatPanelWidth(clampPanelWidth("navigation", this.panelSizes.navigationPanelWidth, constraintsBySide.navigation))};`); + } + if (this.panelSizes.workspacePanelWidth !== undefined) { + declarations.push(`--workspace-panel-size: ${formatPanelWidth(clampPanelWidth("workspace", this.panelSizes.workspacePanelWidth, constraintsBySide.workspace))};`); + } + return declarations.join(" "); + } + + private storedPanelWidth(side: ResizablePanelSide): number | undefined { + return side === "navigation" ? this.panelSizes.navigationPanelWidth : this.panelSizes.workspacePanelWidth; + } +} + +export function panelResizeConstraints(side: ResizablePanelSide): PanelResizeConstraints { + return PANEL_RESIZE_CONSTRAINTS[side]; +} + +export function panelResizeDelta(side: ResizablePanelSide, startClientX: number, currentClientX: number): number { + return side === "navigation" ? currentClientX - startClientX : startClientX - currentClientX; +} + +export function panelWidthFromDrag(side: ResizablePanelSide, startWidth: number, startClientX: number, currentClientX: number, constraints = panelResizeConstraints(side)): number { + return clampPanelWidth(side, startWidth + panelResizeDelta(side, startClientX, currentClientX), constraints); +} + +export function panelWidthFromKeyboard(side: ResizablePanelSide, currentWidth: number, key: string, options: PanelKeyboardResizeOptions = {}): number | undefined { + const constraints = options.constraints ?? panelResizeConstraints(side); + if (key === "Home") return constraints.minWidth; + if (key === "End") return constraints.maxWidth; + + const step = options.largeStep === true ? constraints.largeKeyboardStep : constraints.keyboardStep; + const delta = keyboardResizeDelta(side, key, step); + if (delta === undefined) return undefined; + return clampPanelWidth(side, currentWidth + delta, constraints); +} + +export function clampPanelWidth(side: ResizablePanelSide, width: number, constraints = panelResizeConstraints(side)): number { + if (!Number.isFinite(width)) return constraints.defaultWidth; + return Math.round(Math.min(Math.max(width, constraints.minWidth), constraints.maxWidth)); +} + +export function readStoredPanelSizes(storage: PanelSizeStorage | undefined = browserPanelSizeStorage()): PanelSizePreferences { + try { + const raw = storage?.getItem(PANEL_SIZE_STORAGE_KEY); + if (raw === undefined || raw === null || raw === "") return {}; + const value: unknown = JSON.parse(raw); + return parseStoredPanelSizes(value); + } catch { + return {}; + } +} + +export function writeStoredPanelSizes(panelSizes: PanelSizePreferences, storage: PanelSizeStorage | undefined = browserPanelSizeStorage()): void { + if (storage === undefined) return; + try { + if (panelSizes.navigationPanelWidth === undefined && panelSizes.workspacePanelWidth === undefined) { + storage.removeItem(PANEL_SIZE_STORAGE_KEY); + return; + } + const envelope: StoredPanelSizeEnvelope = { version: 1 }; + if (panelSizes.navigationPanelWidth !== undefined) envelope.navigationPanelWidth = clampPanelWidth("navigation", panelSizes.navigationPanelWidth); + if (panelSizes.workspacePanelWidth !== undefined) envelope.workspacePanelWidth = clampPanelWidth("workspace", panelSizes.workspacePanelWidth); + storage.setItem(PANEL_SIZE_STORAGE_KEY, JSON.stringify(envelope)); + } catch { + // Ignore localStorage quota/privacy errors; the resized layout still applies in memory for this tab. + } +} + +function parseStoredPanelSizes(value: unknown): PanelSizePreferences { + if (!isRecord(value) || value["version"] !== 1) return {}; + const panelSizes: PanelSizePreferences = {}; + const navigationWidth = parseStoredPanelWidth(value["navigationPanelWidth"]); + const workspaceWidth = parseStoredPanelWidth(value["workspacePanelWidth"]); + if (navigationWidth !== undefined) panelSizes.navigationPanelWidth = clampPanelWidth("navigation", navigationWidth); + if (workspaceWidth !== undefined) panelSizes.workspacePanelWidth = clampPanelWidth("workspace", workspaceWidth); + return panelSizes; +} + +function parseStoredPanelWidth(value: unknown): number | undefined { + return typeof value === "number" && Number.isFinite(value) ? value : undefined; +} + +function panelSizesWithWidth(panelSizes: PanelSizePreferences, side: ResizablePanelSide, width: number): PanelSizePreferences { + if (side === "navigation") return { ...panelSizes, navigationPanelWidth: width }; + return { ...panelSizes, workspacePanelWidth: width }; +} + +function panelSizesWithoutSide(panelSizes: PanelSizePreferences, side: ResizablePanelSide): PanelSizePreferences { + if (side === "navigation") { + return panelSizes.workspacePanelWidth === undefined ? {} : { workspacePanelWidth: panelSizes.workspacePanelWidth }; + } + return panelSizes.navigationPanelWidth === undefined ? {} : { navigationPanelWidth: panelSizes.navigationPanelWidth }; +} + +function keyboardResizeDelta(side: ResizablePanelSide, key: string, step: number): number | undefined { + if (side === "navigation") { + if (key === "ArrowRight") return step; + if (key === "ArrowLeft") return -step; + return undefined; + } + if (key === "ArrowLeft") return step; + if (key === "ArrowRight") return -step; + return undefined; +} + +function formatPanelWidth(width: number): string { + return `${String(Math.round(width))}px`; +} + +function browserPanelSizeStorage(): PanelSizeStorage | undefined { + try { + if (typeof window === "undefined") return undefined; + return window.localStorage; + } catch { + return undefined; + } +} + +function isRecord(value: unknown): value is Record { + return typeof value === "object" && value !== null; +} diff --git a/src/client/src/appState.ts b/src/client/src/appState.ts index 8d844fa..9a79f4c 100644 --- a/src/client/src/appState.ts +++ b/src/client/src/appState.ts @@ -1,4 +1,4 @@ -import type { AuthProviderOption, CommandOption, CommandResult, FileContentResponse, FileTreeEntry, GitDiffResponse, GitStatusResponse, Machine, MachineHealth, OAuthFlowState, PiWebStatusResponse, Project, SessionActivity, SessionInfo, SessionStatus, TerminalCommandRun, Workspace, WorkspaceActivity } from "./api"; +import type { AuthProviderOption, CommandOption, CommandResult, FileContentResponse, FileTreeEntry, GitDiffResponse, GitStatusResponse, Machine, MachineHealth, MachineRuntime, OAuthFlowState, PiWebStatusResponse, Project, SessionActivity, SessionInfo, SessionStatus, TerminalCommandRun, Workspace, WorkspaceActivity } from "./api"; import type { ChatLine } from "./components/shared"; import type { QualifiedContributionId } from "./plugins/ids"; @@ -7,6 +7,7 @@ export interface AppState { selectedMachine: Machine | undefined; isLoadingMachines: boolean; machineStatuses: Record; + machineRuntimes: Record; projects: Project[]; workspaces: Workspace[]; sessions: SessionInfo[]; @@ -102,6 +103,7 @@ export function initialAppState(): AppState { selectedMachine: undefined, isLoadingMachines: false, machineStatuses: {}, + machineRuntimes: {}, projects: [], workspaces: [], sessions: [], diff --git a/src/client/src/components/FormattedText.ts b/src/client/src/components/FormattedText.ts index 1369307..259204b 100644 --- a/src/client/src/components/FormattedText.ts +++ b/src/client/src/components/FormattedText.ts @@ -9,7 +9,7 @@ export class FormattedText extends LitElement { @property() text = ""; override render() { - return html`
${unsafeHTML(toSafeMarkdownHtml(this.text))}
`; + return html`
${unsafeHTML(toSafeMarkdownHtml(this.text))}
`; } override updated(): void { @@ -48,13 +48,6 @@ export class FormattedText extends LitElement { void this.copyCode(code.textContent, button); }; - private readonly onFormattedCopy = (event: ClipboardEvent): void => { - if (event.clipboardData === null || !hasSelectedText(currentSelection(this))) return; - event.clipboardData.setData("text/plain", this.text); - event.preventDefault(); - event.stopPropagation(); - }; - private async copyCode(text: string, button: HTMLButtonElement): Promise { const ok = await writeClipboard(text); this.setCopyButtonState(button, ok ? "copied" : "failed"); @@ -74,20 +67,6 @@ export class FormattedText extends LitElement { static override styles = formattedTextStyles; } -function currentSelection(element: Element): Selection | null { - const root = element.getRootNode(); - if (typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot && hasRootSelection(root)) return root.getSelection(); - return element.ownerDocument.getSelection(); -} - -function hasRootSelection(root: Node): root is Node & { getSelection: () => Selection | null } { - return "getSelection" in root && typeof root.getSelection === "function"; -} - -function hasSelectedText(selection: Selection | null): boolean { - return selection !== null && !selection.isCollapsed && selection.toString() !== ""; -} - async function writeClipboard(text: string): Promise { try { await navigator.clipboard.writeText(text); diff --git a/src/client/src/components/MachineList.ts b/src/client/src/components/MachineList.ts index cfaf4cf..b9aaec1 100644 --- a/src/client/src/components/MachineList.ts +++ b/src/client/src/components/MachineList.ts @@ -3,12 +3,13 @@ import { customElement, property, state } from "lit/decorators.js"; import type { Machine, MachineHealth, WorkspaceActivity } from "../api"; import { machineActivityIndicator } from "../workspaceActivity"; import { actionMenuPanelStyle } from "./actionMenu"; -import { renderActivityIndicator } from "./activityBadge"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +import { renderActionActivityIndicator } from "./activityBadge"; +import type { KeyboardNavigableSection } from "./navigationFocus"; +import { activateSelectableRow, focusSelectedOrFirstSelectableRow, handleSelectableRowKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; @customElement("machine-list") -export class MachineList extends LitElement { +export class MachineList extends LitElement implements KeyboardNavigableSection { @property({ attribute: false }) machines: Machine[] = []; @property({ attribute: false }) selected?: Machine; @property({ attribute: false }) statuses: Record = {}; @@ -18,6 +19,8 @@ export class MachineList extends LitElement { @property({ attribute: false }) onSelect?: (machine: Machine) => void; @property({ attribute: false }) onRemove?: (machine: Machine) => void | Promise; @property({ attribute: false }) onToggleCollapsed?: () => void; + @property({ attribute: false }) onFocusNextSection?: () => void | Promise; + @property({ attribute: false }) onCancelKeyboardNavigation?: () => void | Promise; @state() private openMenuMachineId: string | undefined; @state() private menuStyle = ""; @@ -41,6 +44,11 @@ export class MachineList extends LitElement { if (changed.has("collapsed") && this.collapsed) this.openMenuMachineId = undefined; } + async focusSelectedOrFirst(): Promise { + await this.updateComplete; + return focusSelectedOrFirstSelectableRow(this.renderRoot, { fallbackSelector: ".section-toggle" }); + } + override render() { return html`
@@ -67,7 +75,8 @@ export class MachineList extends LitElement { @keydown=${(event: KeyboardEvent) => { this.handleMachineKeydown(event, machine); }} >
- ${this.renderActivity(machine)}${machine.name}${machine.kind === "local" ? "Local Pi Web" : machine.baseUrl ?? "Remote Pi Web"} · ${statusLabel} + ${machine.name}${machine.kind === "local" ? "Local Pi Web" : machine.baseUrl ?? "Remote Pi Web"} · ${statusLabel} + ${this.renderActivity(machine)}
${hasRemoveAction ? this.renderMachineMenu(machine) : null}
@@ -78,7 +87,7 @@ export class MachineList extends LitElement { const status = this.statuses[machine.id]?.status ?? machine.status; if (status === "offline" || status === "error") return undefined; const kind = machineActivityIndicator(this.activities[machine.id]); - return renderActivityIndicator(kind, kind === "terminal" ? "Machine terminal active" : "Machine active"); + return renderActionActivityIndicator(kind, kind === "terminal" ? "Machine terminal active" : "Machine active"); } private renderMachineMenu(machine: Machine) { @@ -107,7 +116,7 @@ export class MachineList extends LitElement { if (!this.collapsible) return "Machines"; const selectedSummary = this.selected?.name ?? "No machine selected"; const selectedTitle = this.selected?.baseUrl ?? selectedSummary; - return html``; + return html``; } private toggleMenu(machineId: string, target: EventTarget | null): void { @@ -131,7 +140,11 @@ export class MachineList extends LitElement { this.openMenuMachineId = undefined; return; } - activateSelectableRowFromKeyboard(event, () => this.onSelect?.(machine)); + handleSelectableRowKeyboard(event, { + activate: () => this.onSelect?.(machine), + nextSection: this.onFocusNextSection === undefined ? undefined : () => { void this.onFocusNextSection?.(); }, + cancel: this.onCancelKeyboardNavigation === undefined ? undefined : () => { void this.onCancelKeyboardNavigation?.(); }, + }); } static override styles = [ @@ -139,7 +152,6 @@ export class MachineList extends LitElement { css` .machine-row.no-actions .action-main { border-radius: 8px; } .machine-primary { display: flex; align-items: baseline; gap: 6px; } - .machine-primary .activity-indicator { flex: 0 0 auto; margin-right: 0; } .machine-primary-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .machine-menu-panel button.danger { color: var(--pi-danger); } .machine-menu-panel button.danger:hover, .machine-menu-panel button.danger:focus { background: color-mix(in srgb, var(--pi-danger) 14%, transparent); } diff --git a/src/client/src/components/MachineSwitcher.ts b/src/client/src/components/MachineSwitcher.ts new file mode 100644 index 0000000..f983409 --- /dev/null +++ b/src/client/src/components/MachineSwitcher.ts @@ -0,0 +1,333 @@ +import { LitElement, css, html, type PropertyValues, type TemplateResult } from "lit"; +import { customElement, property, state } from "lit/decorators.js"; +import type { Machine, MachineHealth, MachineStatus, WorkspaceActivity } from "../api"; +import { machineActivityIndicator } from "../workspaceActivity"; +import { actionMenuPanelStyle } from "./actionMenu"; +import { renderActivityIndicator } from "./activityBadge"; +import { canRemoveMachine } from "./MachineList"; +import type { KeyboardNavigableSection } from "./navigationFocus"; + +@customElement("machine-switcher") +export class MachineSwitcher extends LitElement implements KeyboardNavigableSection { + @property({ attribute: false }) machines: Machine[] = []; + @property({ attribute: false }) selected?: Machine; + @property({ attribute: false }) statuses: Record = {}; + @property({ attribute: false }) activities: Record> = {}; + @property({ attribute: false }) onSelect?: (machine: Machine) => void | Promise; + @property({ attribute: false }) onRemove?: (machine: Machine) => void | Promise; + @property({ attribute: false }) onFocusNextSection?: () => void | Promise; + @property({ attribute: false }) onCancelKeyboardNavigation?: () => void | Promise; + @state() private open = false; + @state() private menuStyle = ""; + @state() private openActionsMachineId: string | undefined; + @state() private actionMenuStyle = ""; + + private readonly onDocumentClick = (event: MouseEvent) => { + if (event.composedPath().includes(this)) return; + this.open = false; + this.openActionsMachineId = undefined; + }; + + override connectedCallback(): void { + super.connectedCallback(); + document.addEventListener("click", this.onDocumentClick); + } + + override disconnectedCallback(): void { + document.removeEventListener("click", this.onDocumentClick); + super.disconnectedCallback(); + } + + protected override updated(changed: PropertyValues): void { + if (changed.has("machines") && this.open && this.selectedMachine() === undefined) this.open = false; + if (changed.has("machines") && this.openActionsMachineId !== undefined && !this.machines.some((machine) => machine.id === this.openActionsMachineId)) this.openActionsMachineId = undefined; + } + + async focusSelectedOrFirst(): Promise { + const button = this.switcherButton(); + if (button === null) return false; + return await this.openMenuAndFocusOption(button); + } + + override render() { + const selected = this.selectedMachine(); + if (selected === undefined) return null; + const status = machineStatus(selected, this.statuses); + const label = selected.name; + return html` +
+ + ${this.open ? html` +
{ event.stopPropagation(); }}> + ${this.machines.map((machine) => this.renderMachineOption(machine))} +
+ ` : null} +
+ `; + } + + private renderMachineOption(machine: Machine): TemplateResult { + const selected = this.selected?.id === machine.id; + const status = machineStatus(machine, this.statuses); + const hasActions = canRemoveMachine(machine) && this.onRemove !== undefined; + const actionsOpen = this.openActionsMachineId === machine.id; + return html` +
+ + ${hasActions ? html` +
+ + ${actionsOpen ? html` +
{ event.stopPropagation(); }}> + +
+ ` : null} +
+ ` : null} +
+ `; + } + + private renderActivity(machine: Machine): TemplateResult | undefined { + const status = machineStatus(machine, this.statuses); + if (status === "offline" || status === "error") return undefined; + const kind = machineActivityIndicator(this.activities[machine.id]); + return renderActivityIndicator(kind, kind === "terminal" ? "Machine terminal active" : "Machine active"); + } + + private selectedMachine(): Machine | undefined { + return this.selected ?? this.machines.find((machine) => machine.id === "local") ?? this.machines[0]; + } + + private switcherButton(): HTMLElement | null { + return this.renderRoot.querySelector(".machine-switcher-button"); + } + + private handleSwitcherButtonKeydown(event: KeyboardEvent): void { + if (event.key === "ArrowDown" || event.key === "ArrowUp") { + event.preventDefault(); + event.stopPropagation(); + void this.openMenuAndFocusOption(event.currentTarget); + return; + } + if (event.key === "ArrowRight" && this.onFocusNextSection !== undefined) { + event.preventDefault(); + event.stopPropagation(); + void this.onFocusNextSection(); + return; + } + if (event.key === "Escape" && this.onCancelKeyboardNavigation !== undefined) { + event.preventDefault(); + event.stopPropagation(); + void this.onCancelKeyboardNavigation(); + } + } + + private handleMachineOptionKeydown(event: KeyboardEvent): void { + if (event.key === "ArrowUp") { + this.focusRelativeMachineOption(event.currentTarget, -1, event); + return; + } + if (event.key === "ArrowDown") { + this.focusRelativeMachineOption(event.currentTarget, 1, event); + return; + } + if (event.key === "Home") { + this.focusIndexedMachineOption(0, event); + return; + } + if (event.key === "End") { + this.focusIndexedMachineOption(-1, event); + return; + } + if (event.key === "ArrowRight" && this.onFocusNextSection !== undefined) { + event.preventDefault(); + event.stopPropagation(); + this.open = false; + void this.onFocusNextSection(); + return; + } + if (event.key === "ArrowLeft" || event.key === "Escape") { + event.preventDefault(); + event.stopPropagation(); + this.open = false; + void this.updateComplete.then(() => { this.focusSwitcherButton(); }); + } + } + + private toggleMenu(target: EventTarget | null): void { + this.menuStyle = machineSwitcherMenuStyle(target); + this.open = !this.open; + this.openActionsMachineId = undefined; + } + + private focusSwitcherButton(): boolean { + const button = this.switcherButton(); + if (button === null) return false; + button.focus(); + return true; + } + + private async openMenuAndFocusOption(target: EventTarget | null): Promise { + this.menuStyle = machineSwitcherMenuStyle(target); + this.open = true; + this.openActionsMachineId = undefined; + await this.updateComplete; + return this.focusSelectedMachineOption(); + } + + private focusSelectedMachineOption(): boolean { + const selected = this.renderRoot.querySelector(".machine-option.selected .machine-option-main"); + const first = this.machineOptionButtons()[0]; + const target = selected ?? first; + if (target === undefined) return false; + target.focus(); + target.scrollIntoView({ block: "nearest" }); + return true; + } + + private focusRelativeMachineOption(target: EventTarget | null, delta: number, event: KeyboardEvent): void { + event.preventDefault(); + event.stopPropagation(); + const buttons = this.machineOptionButtons(); + if (buttons.length === 0 || !(target instanceof HTMLElement)) return; + const index = buttons.indexOf(target); + if (index < 0) return; + this.focusMachineOptionAt(index + delta); + } + + private focusIndexedMachineOption(index: number, event: KeyboardEvent): void { + event.preventDefault(); + event.stopPropagation(); + this.focusMachineOptionAt(index < 0 ? this.machineOptionButtons().length - 1 : index); + } + + private focusMachineOptionAt(index: number): void { + const buttons = this.machineOptionButtons(); + const target = buttons[Math.min(Math.max(index, 0), buttons.length - 1)]; + target?.focus(); + target?.scrollIntoView({ block: "nearest" }); + } + + private machineOptionButtons(): HTMLElement[] { + return Array.from(this.renderRoot.querySelectorAll(".machine-option-main")); + } + + private toggleActionsMenu(machineId: string, target: EventTarget | null): void { + if (this.openActionsMachineId === machineId) { + this.openActionsMachineId = undefined; + return; + } + this.actionMenuStyle = actionMenuPanelStyle(target, { constrainTo: "viewport" }); + this.openActionsMachineId = machineId; + } + + private select(machine: Machine): void { + this.open = false; + this.openActionsMachineId = undefined; + void this.onSelect?.(machine); + } + + private removeMachine(machine: Machine): void { + this.open = false; + this.openActionsMachineId = undefined; + void this.onRemove?.(machine); + } + + static override styles = css` + :host { min-width: 0; display: block; } + .machine-switcher { min-width: 0; } + .machine-switcher-button { box-sizing: border-box; width: 100%; min-width: 0; display: flex; align-items: center; gap: 6px; border: 1px solid var(--pi-border); border-radius: 999px; background: var(--pi-surface); color: var(--pi-text); padding: 5px 8px; cursor: pointer; text-align: left; } + .machine-switcher-button:hover, .machine-switcher-button:focus-visible { border-color: var(--pi-accent); background: var(--pi-selection-bg); } + .machine-switcher-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; } + .machine-switcher-kicker { color: var(--pi-muted); font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; } + .machine-switcher-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.2; } + .machine-status { flex: 0 0 auto; color: var(--pi-muted); font-size: 11px; } + .machine-status.online { color: var(--pi-success); } + .machine-status.offline, .machine-status.error { color: var(--pi-danger); } + .machine-chevron { flex: 0 0 auto; color: var(--pi-muted); font-size: 11px; } + .activity-indicator { flex: 0 0 auto; display: inline-block; width: 7px; height: 7px; background: var(--pi-success); animation: pulse 1s ease-in-out infinite; } + .activity-indicator.session { border-radius: 50%; background: var(--pi-success); } + .activity-indicator.terminal { border-radius: 2px; background: var(--pi-accent); } + .machine-switcher-menu { position: fixed; z-index: 10000; box-sizing: border-box; min-width: min(280px, calc(100vw - 16px)); overflow: auto; padding: 4px; border: 1px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); box-shadow: 0 8px 24px var(--pi-shadow); } + .machine-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px; align-items: stretch; margin: 2px 0; } + .machine-option.no-actions { grid-template-columns: minmax(0, 1fr); } + .machine-option-main, .machine-option-actions-toggle, .machine-option-actions-panel button { border: 0; border-radius: 7px; background: transparent; color: var(--pi-text); cursor: pointer; } + .machine-option-main { min-width: 0; display: grid; gap: 2px; padding: 7px 8px; text-align: left; } + .machine-option-name { min-width: 0; display: flex; align-items: baseline; gap: 6px; } + .machine-option-name span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .machine-option-main small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pi-muted); } + .machine-option-actions { position: relative; align-self: stretch; } + .machine-option-actions-toggle { display: grid; place-items: center; height: 100%; min-width: 32px; padding: 0; color: var(--pi-muted); } + .machine-option-actions-panel { position: fixed; z-index: 10001; box-sizing: border-box; min-width: min(120px, calc(100vw - 16px)); overflow: auto; padding: 4px; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); box-shadow: 0 8px 24px var(--pi-shadow); } + .machine-option-actions-panel button { display: block; width: 100%; padding: 7px 9px; text-align: left; white-space: nowrap; } + .machine-option-actions-panel button.danger { color: var(--pi-danger); } + .machine-option-main:hover, .machine-option-main:focus-visible, .machine-option-actions-toggle:hover, .machine-option-actions-toggle:focus-visible, .machine-option.selected .machine-option-main { background: var(--pi-selection-bg); } + .machine-option-actions-panel button:hover, .machine-option-actions-panel button:focus-visible { background: var(--pi-selection-bg); } + .machine-option-actions-panel button.danger:hover, .machine-option-actions-panel button.danger:focus-visible { background: color-mix(in srgb, var(--pi-danger) 14%, transparent); } + @keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } + `; +} + +export function shouldShowMachineSwitcher(machines: readonly Machine[]): boolean { + return machines.length > 1; +} + +function machineStatus(machine: Machine, statuses: Record): MachineStatus { + return statuses[machine.id]?.status ?? machine.status ?? "unknown"; +} + +function machineStatusLabel(status: MachineStatus): string { + return status === "online" ? "online" : status === "offline" ? "offline" : status === "error" ? "error" : "unknown"; +} + +function machineTitle(machine: Machine): string { + return machine.baseUrl ?? machine.name; +} + +function machineSwitcherMenuStyle(target: EventTarget | null): string { + if (typeof HTMLElement === "undefined" || typeof window === "undefined" || !(target instanceof HTMLElement)) return ""; + const trigger = target.getBoundingClientRect(); + const viewportPadding = 8; + const menuWidth = Math.min(280, Math.max(0, window.innerWidth - viewportPadding * 2)); + const left = Math.min(Math.max(viewportPadding, trigger.left), Math.max(viewportPadding, window.innerWidth - viewportPadding - menuWidth)); + const availableBelow = Math.max(0, window.innerHeight - trigger.bottom - viewportPadding); + return [`top: ${px(trigger.bottom)};`, `left: ${px(left)};`, `width: ${px(menuWidth)};`, `max-height: ${px(availableBelow)};`].join(" "); +} + +function px(value: number): string { + return `${String(Math.round(value))}px`; +} diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 5e6c925..8eb9dbf 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -4,6 +4,7 @@ import { configApi, piWebApi, terminalsApi, workspacesApi, type Machine, type Ma import type { AppAction } from "../actions"; import { initialAppState, type AppState } from "../appState"; import { isSessionActive } from "../../../shared/activity"; +import { PI_WEB_CAPABILITIES, supportsPiWebCapability } from "../../../shared/capabilities"; import { ActivityController } from "../controllers/activityController"; import { AuthController } from "../controllers/authController"; import { FileExplorerController } from "../controllers/fileExplorerController"; @@ -27,14 +28,14 @@ import { loadExternalPlugins } from "../plugins/external"; import { PluginRegistry, installPluginRuntimeScope, installWorkspacePanelScope } from "../plugins/registry"; import { queryNamespace, readNamespacedString, setNamespacedQueryKey } from "../namespacedQueryArgs"; import { AppShellController } from "../appShell/appShellController"; -import { MobileNavigationController, type NavigationSection } from "../appShell/navigationState"; +import { NavigationSectionsController, type NavigationSection } from "../appShell/navigationState"; import { PanelCollapseController, mainViewClass } from "../appShell/panelCollapseController"; +import { PanelResizeController, type PanelResizeConstraints, type ResizablePanelSide } from "../appShell/panelResizeController"; import { readRoute, writeRoute, type AppRoute } from "../route"; import { readSettingsSection, writeSettingsSection, type SettingsSection } from "../settingsRoute"; -import { applyShortcutPreferences } from "../shortcutPreferences"; +import { applyActiveShortcutPreferences } from "../shortcutPreferences"; import { createTerminalCommandRunsRuntime } from "../runtime/terminalRuntime"; import { isWorkspaceDeletionPending, isWorkspaceDeletionRunPending, latestWorkspaceDeletionRuns, pendingWorkspaceDeletionIds, targetWorkspaceIdForRun, workspaceDeletionRunFilter } from "../workspaceDeletion"; -import { machineActivityIndicator } from "../workspaceActivity"; import "./MachineList"; import "./ProjectList"; import "./WorkspaceList"; @@ -56,13 +57,14 @@ import type { WorkspacePanelEmptyState } from "./WorkspacePanel"; import "./appShell/AppContextBar"; import "./appShell/AppMobileMainTabs"; import type { AppMobileMainTab, AppMobileMainTabIcon } from "./appShell/AppMobileMainTabs"; -import "./appShell/AppNavigationPanel"; +import { shouldShowMachinesSection, type AppNavigationPanel, type NavigationFocusTarget } from "./appShell/AppNavigationPanel"; import "./appShell/AppPanelEdgeControl"; import "./appShell/AppRefreshControl"; import { appStyles } from "./shared"; const PI_WEB_STATUS_REFRESH_MS = 15 * 60 * 1000; +const PI_WEB_STATUS_DEFER_MS = 750; const GLOBAL_SHORTCUT_LISTENER_OPTIONS = { capture: true } as const; const THEME_AUTO_ON_VALUE = "auto:on"; const THEME_AUTO_OFF_VALUE = "auto:off"; @@ -70,12 +72,18 @@ const THEME_OPTION_PREFIX = "theme:"; const FILES_ROUTE_NAMESPACE = queryNamespace("core:workspace.files"); const GIT_ROUTE_NAMESPACE = queryNamespace("core:workspace.git"); const TERMINAL_ROUTE_NAMESPACE = queryNamespace("core:workspace.terminal"); +const MIN_RESIZABLE_CHAT_WIDTH_PX = 320; +const PANEL_EDGE_COLUMNS_WIDTH_PX = 2; +const DESKTOP_SIDE_BY_SIDE_MEDIA_QUERY = "(min-width: 1181px)"; @customElement("pi-web-app") export class PiWebApp extends LitElement { @state() private state: AppState = initialAppState(); @query("chat-view") private chatView?: ChatView; @query("prompt-editor") private promptEditor?: PromptEditor; + @query("app-navigation-panel") private navigationPanel?: AppNavigationPanel; + @query("#navigation-panel") private navigationPanelFrame?: HTMLElement; + @query("#workspace-panel") private workspacePanelFrame?: HTMLElement; private readonly sessions = new SessionController( () => this.state, @@ -128,7 +136,8 @@ export class PiWebApp extends LitElement { private readonly terminalSelection = new SessionStorageTerminalSelectionMemory(); private readonly appShell = new AppShellController(this); private readonly panelCollapse = new PanelCollapseController(this); - private readonly mobileNavigation = new MobileNavigationController( + private readonly panelResize = new PanelResizeController(this); + private readonly navigationSections = new NavigationSectionsController( this, () => this.state, () => this.appShell.isMobileNavigationLayout, @@ -136,6 +145,7 @@ export class PiWebApp extends LitElement { private readonly systemLightThemeMedia = typeof window !== "undefined" && "matchMedia" in window ? window.matchMedia("(prefers-color-scheme: light)") : undefined; private terminalAutoStartWorkspaceId: string | undefined; private piWebStatusTimer: number | undefined; + private piWebStatusDeferredTimer: number | undefined; private workspaceDeletionPollTimer: number | undefined; private refreshingWorkspaceDeletionRuns = false; private readonly handledWorkspaceDeletionRunIds = new Set(); @@ -163,7 +173,7 @@ export class PiWebApp extends LitElement { private readonly onFocus = () => { this.appShell.repairViewportPosition(); void this.sessions.refreshSelectedSession(); - void this.refreshPiWebStatus(); + this.schedulePiWebStatusRefresh(); void this.refreshMachineActivities(); void this.refreshWorkspaceDeletionRuns(); }; @@ -171,7 +181,7 @@ export class PiWebApp extends LitElement { if (document.visibilityState === "visible") { this.appShell.repairViewportPosition(); void this.sessions.refreshSelectedSession(); - void this.refreshPiWebStatus(); + this.schedulePiWebStatusRefresh(); void this.refreshMachineActivities(); void this.refreshWorkspaceDeletionRuns(); } @@ -184,7 +194,8 @@ export class PiWebApp extends LitElement { } private readonly onKeyDown = (event: KeyboardEvent) => { - if (this.keyboard.handle(event, this.getActions())) { + if (this.settingsSection !== undefined) return; + if (this.keyboard.handle(event, this.getDefaultActions(), { shortcuts: this.shortcutConfig })) { event.preventDefault(); event.stopPropagation(); } @@ -204,12 +215,11 @@ export class PiWebApp extends LitElement { this.systemLightThemeMedia?.addEventListener("change", this.onSystemLightThemeChange); this.applyPreferredTheme(false); this.connectRealtime(); - this.piWebStatusTimer = window.setInterval(() => { void this.refreshPiWebStatus(); }, PI_WEB_STATUS_REFRESH_MS); - void this.refreshPiWebStatus(); + this.piWebStatusTimer = window.setInterval(() => { this.schedulePiWebStatusRefresh(); }, PI_WEB_STATUS_REFRESH_MS); void this.refreshWorkspaceActivity(); void this.loadClientConfig(); void this.ensureGatewayPluginsLoaded(); - void this.loadProjectsAndRestoreRoute(); + void this.loadProjectsAndRestoreRoute().finally(() => { this.schedulePiWebStatusRefresh(); }); } override disconnectedCallback(): void { @@ -227,6 +237,7 @@ export class PiWebApp extends LitElement { this.git.dispose(); if (this.piWebStatusTimer !== undefined) window.clearInterval(this.piWebStatusTimer); this.piWebStatusTimer = undefined; + this.clearScheduledPiWebStatusRefresh(); if (this.workspaceDeletionPollTimer !== undefined) window.clearInterval(this.workspaceDeletionPollTimer); this.workspaceDeletionPollTimer = undefined; super.disconnectedCallback(); @@ -256,11 +267,28 @@ export class PiWebApp extends LitElement { await this.refreshWorkspaceDeletionRuns(); } + private schedulePiWebStatusRefresh(delayMs = PI_WEB_STATUS_DEFER_MS): void { + this.clearScheduledPiWebStatusRefresh(); + this.piWebStatusDeferredTimer = window.setTimeout(() => { + this.piWebStatusDeferredTimer = undefined; + void this.refreshPiWebStatus(); + }, delayMs); + } + + private clearScheduledPiWebStatusRefresh(): void { + if (this.piWebStatusDeferredTimer === undefined) return; + window.clearTimeout(this.piWebStatusDeferredTimer); + this.piWebStatusDeferredTimer = undefined; + } + private async refreshPiWebStatus(): Promise { + const machineId = selectedMachineId(this.state); try { - this.setState({ piWebStatus: await piWebApi.piWebStatus() }); + const piWebStatus = await piWebApi.piWebStatus(machineId); + if (selectedMachineId(this.state) === machineId) this.setState({ piWebStatus }); } catch (error) { - console.warn("Failed to refresh PI WEB status", error); + if (selectedMachineId(this.state) === machineId) this.setState({ piWebStatus: undefined }); + console.warn(`Failed to refresh PI WEB status for ${machineId}`, error); } } @@ -299,12 +327,12 @@ export class PiWebApp extends LitElement { try { await Promise.all([ this.sessions.refreshSelectedSession(), - this.refreshPiWebStatus(), this.refreshMachineActivities(), this.loadClientConfig(), this.refreshWorkspaceDeletionRuns(), this.refreshCurrentWorkspaceSurface(), ]); + this.schedulePiWebStatusRefresh(); } finally { this.isRefreshingApp = false; } @@ -328,6 +356,7 @@ export class PiWebApp extends LitElement { } private async restoreRouteFor(route: AppRoute, updateUrl: boolean, surface = this.readWorkspaceRouteSurface(route), restoredMainView?: AppState["mainView"]) { + const machineBeforeRestore = selectedMachineId(this.state); const routeSurface = route.projectId === undefined || route.projectId === "" ? emptyWorkspaceRouteSurface() : surface; const restoreSeq = ++this.routeRestoreSeq; this.routeRestoreDepth += 1; @@ -371,6 +400,7 @@ export class PiWebApp extends LitElement { } finally { this.routeRestoreDepth = Math.max(0, this.routeRestoreDepth - 1); if (this.routeRestoreDepth === 0) this.restoringRouteTerminalId = undefined; + if (selectedMachineId(this.state) !== machineBeforeRestore) this.schedulePiWebStatusRefresh(); } } @@ -714,6 +744,7 @@ export class PiWebApp extends LitElement { this.realtime.close(); this.connectRealtime(); this.activeTerminalIds.clear(); + this.setState({ piWebStatus: undefined }); this.git.updatePolling(); void this.loadPluginsForSelectedMachine(); } @@ -726,7 +757,6 @@ export class PiWebApp extends LitElement { private renderWorkspacePanel() { const workspace = this.state.selectedWorkspace; const panelContext = workspace === undefined ? undefined : this.createWorkspacePanelContext(workspace); - const workspaceLabelItems = workspace === undefined ? [] : this.workspaceLabelItems(workspace); const emptyState = workspace === undefined ? this.workspacePanelEmptyState() : undefined; return html` { this.openWorkspaceTool(tool); }} > `; } private renderNavigationPanelEdgeControl() { + const constraints = this.resizablePanelConstraints("navigation"); return html` { this.panelCollapse.toggleNavigationPanel(); }} + .onResizeStart=${() => this.startPanelResize("navigation")} + .onResize=${(width: number) => { this.panelResize.resizePanel("navigation", width, { persist: false }); }} + .onResizeEnd=${() => { this.panelResize.persistPanelSizes(); }} + .onReset=${() => { this.resetResizablePanel("navigation"); }} > `; } private renderWorkspacePanelEdgeControl() { + const constraints = this.resizablePanelConstraints("workspace"); return html` { this.panelCollapse.toggleWorkspacePanel(); }} + .onResizeStart=${() => this.startPanelResize("workspace")} + .onResize=${(width: number) => { this.panelResize.resizePanel("workspace", width, { persist: false }); }} + .onResizeEnd=${() => { this.panelResize.persistPanelSizes(); }} + .onReset=${() => { this.resetResizablePanel("workspace"); }} > `; } - private renderNavigationPanel(autoSwitchToChat: boolean) { - const openChatAfter = (action: () => Promise) => this.withChatScrollTransition(async () => { - await action(); - if (autoSwitchToChat) this.setState({ mainView: "chat" }); - if (autoSwitchToChat) this.updateUrl(); - }); + private startPanelResize(side: ResizablePanelSide): number { + if (side === "navigation") this.panelCollapse.expandNavigationPanel(); + else this.panelCollapse.expandWorkspacePanel(); + return this.measuredPanelWidth(side) ?? this.panelResize.panelWidth(side); + } + + private resizablePanelConstraints(side: ResizablePanelSide): PanelResizeConstraints { + const constraints = this.panelResize.constraints(side); + return { + ...constraints, + maxWidth: this.resizablePanelMaxWidth(side, constraints), + }; + } + + private resizablePanelMaxWidth(side: ResizablePanelSide, constraints: PanelResizeConstraints): number { + const shellWidth = this.getBoundingClientRect().width || (typeof window === "undefined" ? 0 : window.innerWidth); + if (shellWidth <= 0) return constraints.maxWidth; + + const otherPanelWidth = this.oppositeResizablePanelWidth(side); + const maxWidth = Math.floor(shellWidth - otherPanelWidth - PANEL_EDGE_COLUMNS_WIDTH_PX - MIN_RESIZABLE_CHAT_WIDTH_PX); + return Math.max(constraints.minWidth, Math.min(constraints.maxWidth, maxWidth)); + } + + private oppositeResizablePanelWidth(side: ResizablePanelSide): number { + const otherSide: ResizablePanelSide = side === "navigation" ? "workspace" : "navigation"; + if (this.isResizablePanelCollapsedOrStacked(otherSide)) return 0; + return this.measuredPanelWidth(otherSide) ?? this.panelResize.panelWidth(otherSide); + } + + private isResizablePanelCollapsedOrStacked(side: ResizablePanelSide): boolean { + if (side === "navigation") return this.panelCollapse.navigationPanelCollapsed; + return this.panelCollapse.workspacePanelCollapsed || !this.isDesktopSideBySideLayout(); + } + + private isDesktopSideBySideLayout(): boolean { + if (typeof window === "undefined" || !("matchMedia" in window)) return true; + return window.matchMedia(DESKTOP_SIDE_BY_SIDE_MEDIA_QUERY).matches; + } + + private measuredPanelWidth(side: ResizablePanelSide): number | undefined { + const element = side === "navigation" ? this.navigationPanelFrame : this.workspacePanelFrame; + const width = element?.getBoundingClientRect().width; + return width === undefined || width <= 0 ? undefined : width; + } + + private resetResizablePanel(side: ResizablePanelSide): void { + this.panelResize.resetPanel(side); + } + + private resetResizablePanels(): void { + this.panelResize.resetPanels(); + } + + private canDeleteArchivedSessions(): boolean { + const runtime = this.selectedMachineRuntime(); + return runtime?.ok === true && supportsPiWebCapability(runtime, PI_WEB_CAPABILITIES.sessionsDeleteArchived); + } + + private archivedDeleteUnavailableMessage(): string { + const machineName = this.state.selectedMachine?.name ?? "this machine"; + return `Update and restart Pi-Web on ${machineName} to delete archived sessions.`; + } + + private selectedMachineRuntime() { + return this.state.machineRuntimes[selectedMachineId(this.state)]; + } + + private renderNavigationPanel() { return html` { this.mobileNavigation.toggle("machines"); }} - .onSelectMachine=${(machine: Machine) => this.withChatScrollTransition(async () => { - this.mobileNavigation.expand("projects"); - await this.selectMachineWithMemory(machine); - })} + .machinesCollapsed=${this.navigationSections.isCollapsed("machines")} + .onToggleMachines=${() => { this.navigationSections.toggle("machines"); }} + .onSelectMachine=${(machine: Machine) => this.selectNavigationItem("machines", "projects", () => this.selectMachineWithMemory(machine))} .onRemoveMachine=${(machine: Machine) => { void this.removeMachine(machine); }} .projects=${this.state.projects} .selectedProject=${this.state.selectedProject} @@ -799,40 +907,78 @@ export class PiWebApp extends LitElement { .sessionActivities=${this.state.sessionActivities} .selectedSession=${this.state.selectedSession} .canStartSession=${!!this.state.selectedWorkspace} - .collapsible=${this.appShell.isMobileNavigationLayout} - .projectsCollapsed=${this.mobileNavigation.isCollapsed("projects")} - .workspacesCollapsed=${this.mobileNavigation.isCollapsed("workspaces")} - .sessionsCollapsed=${this.mobileNavigation.isCollapsed("sessions")} + .canDeleteArchivedSessions=${this.canDeleteArchivedSessions()} + .archivedDeleteUnavailableMessage=${this.archivedDeleteUnavailableMessage()} + .collapsible=${true} + .compact=${this.appShell.isMobileNavigationLayout} + .projectsCollapsed=${this.navigationSections.isCollapsed("projects")} + .workspacesCollapsed=${this.navigationSections.isCollapsed("workspaces")} + .sessionsCollapsed=${this.navigationSections.isCollapsed("sessions")} .workspaceLabelItems=${(workspace: Workspace) => this.workspaceLabelItems(workspace)} .refreshControl=${this.appShell.shouldShowAppRefreshInHeader() ? this.renderAppRefresh() : undefined} .onShowActions=${() => { this.setState({ actionPaletteOpen: true }); }} - .onToggleProjects=${() => { this.mobileNavigation.toggle("projects"); }} - .onToggleWorkspaces=${() => { this.mobileNavigation.toggle("workspaces"); }} - .onToggleSessions=${() => { this.mobileNavigation.toggle("sessions"); }} - .onSelectProject=${(project: Project) => this.withChatScrollTransition(async () => { - this.mobileNavigation.expand("workspaces"); - await this.workspaces.selectProject(project); - })} + .onToggleProjects=${() => { this.navigationSections.toggle("projects"); }} + .onToggleWorkspaces=${() => { this.navigationSections.toggle("workspaces"); }} + .onToggleSessions=${() => { this.navigationSections.toggle("sessions"); }} + .onSelectProject=${(project: Project) => this.selectNavigationItem("projects", "workspaces", () => this.workspaces.selectProject(project))} .onCloseProject=${(project: Project) => this.projects.closeProject(project.id)} - .onSelectWorkspace=${(workspace: Workspace) => this.withChatScrollTransition(async () => { - this.mobileNavigation.expand("sessions"); - await this.workspaces.selectWorkspace(workspace); - })} + .onSelectWorkspace=${(workspace: Workspace) => this.selectNavigationItem("workspaces", "sessions", () => this.workspaces.selectWorkspace(workspace))} .onDeleteWorkspace=${(workspace: Workspace) => { void this.deleteWorkspace(workspace); }} .onArchivedCollapsed=${() => { this.sessions.clearSelectionAfterArchivedCollapse(); }} - .onStartSession=${() => openChatAfter(() => this.sessions.startSession())} - .onSelectSession=${(session: SessionInfo) => openChatAfter(() => this.sessions.selectSession(session))} + .onStartSession=${() => this.selectNavigationItem("sessions", "chat", () => this.sessions.startSession())} + .onSelectSession=${(session: SessionInfo) => this.selectNavigationItem("sessions", "chat", () => this.sessions.selectSession(session))} .onArchiveSession=${(session: SessionInfo) => this.sessions.archiveSession(session)} .onArchiveSessionWithDescendants=${(session: SessionInfo) => this.sessions.archiveSessionWithDescendants(session)} - .onRestoreSession=${(session: SessionInfo) => openChatAfter(() => this.sessions.restoreSession(session))} + .onArchiveSessions=${(sessions: SessionInfo[]) => this.sessions.archiveSessions(sessions)} + .onRestoreSession=${(session: SessionInfo) => this.selectNavigationItem("sessions", "chat", () => this.sessions.restoreSession(session))} .onDeleteCachedNewSession=${(session: SessionInfo) => this.sessions.deleteCachedNewSession(session)} + .onDeleteArchivedSession=${(session: SessionInfo) => this.sessions.deleteArchivedSessions([session])} + .onDeleteArchivedSessions=${(sessions: SessionInfo[]) => this.sessions.deleteArchivedSessions(sessions)} .onDetachParentSession=${(session: SessionInfo) => this.sessions.detachParent(session)} + .onFocusNavigationTarget=${(target: NavigationFocusTarget) => { void this.focusNavigationTarget(target); }} + .onCancelKeyboardNavigation=${() => { void this.focusChatComposer(); }} > `; } private openNavigationSection(section: NavigationSection): void { - this.mobileNavigation.open(section, () => { this.selectMainView("navigation"); }); + this.navigationSections.open(section, () => { this.selectMainView("navigation"); }); + } + + private async selectNavigationItem(section: NavigationSection, nextTarget: NavigationFocusTarget, action: () => Promise): Promise { + await this.withChatScrollTransition(async () => { + this.navigationSections.advanceAfterSelection(section); + await action(); + }); + await this.focusNavigationTarget(nextTarget); + } + + private async focusNavigationTarget(target: NavigationFocusTarget): Promise { + if (target === "chat") { + await this.focusChatComposer(); + return; + } + await this.focusNavigationSection(target); + } + + private async focusNavigationSection(section: NavigationSection): Promise { + if (section === "machines" && !shouldShowMachinesSection(this.state.machines)) { + await this.focusNavigationSection("projects"); + return; + } + this.panelCollapse.expandNavigationPanel(); + if (this.appShell.isMobileNavigationLayout) this.selectMainView("navigation"); + this.navigationSections.expand(section); + await this.updateComplete; + await nextFrame(); + await this.navigationPanel?.focusSection(section); + } + + private async focusChatComposer(): Promise { + if (this.state.mainView !== "chat") this.selectMainView("chat"); + await this.updateComplete; + await nextFrame(); + this.promptEditor?.focusInput(); } private visibleWorkspacePanels(): QualifiedWorkspacePanelContribution[] { @@ -943,6 +1089,7 @@ export class PiWebApp extends LitElement { open: (options) => { void this.openRuntimeTerminal(machineId, workspace, options); }, runCommand: (input) => terminalCommandRuns.runCommand({ ...input, workspace }), }, + openTerminal: (options) => { void this.openRuntimeTerminal(machineId, workspace, options); }, host: this.createWorkspaceHost(), piWebUnstable: { terminalCommandRuns }, fileTree: this.state.fileTree, @@ -970,7 +1117,74 @@ export class PiWebApp extends LitElement { } private getActions(): AppAction[] { - return applyShortcutPreferences(this.plugins.getActions(this.createPluginRuntimeContext()), this.shortcutConfig); + return applyActiveShortcutPreferences(this.getDefaultActions(), this.shortcutConfig); + } + + private getDefaultActions(): AppAction[] { + return [...this.plugins.getActions(this.createPluginRuntimeContext()), ...this.navigationFocusActions(), ...this.panelLayoutActions()]; + } + + private panelLayoutActions(): AppAction[] { + return [ + { + id: "app.layout.reset-navigation-panel-size", + title: "Reset Navigation Panel Size", + description: "Restore the navigation panel to its default width", + group: "View", + run: () => { this.resetResizablePanel("navigation"); }, + }, + { + id: "app.layout.reset-workspace-panel-size", + title: "Reset Workspace Panel Size", + description: "Restore the workspace panel to its default width", + group: "View", + run: () => { this.resetResizablePanel("workspace"); }, + }, + { + id: "app.layout.reset-panel-sizes", + title: "Reset Panel Sizes", + description: "Restore all side panels to their default widths", + group: "View", + run: () => { this.resetResizablePanels(); }, + }, + ]; + } + + private navigationFocusActions(): AppAction[] { + return [ + { + id: "app.navigation.focus-machines", + title: "Focus Machines", + description: "Move keyboard focus to the machine selector", + shortcut: "mod+g m", + group: "Navigation", + run: () => this.focusNavigationSection("machines"), + }, + { + id: "app.navigation.focus-projects", + title: "Focus Projects", + description: "Move keyboard focus to the projects list", + shortcut: "mod+g p", + group: "Navigation", + run: () => this.focusNavigationSection("projects"), + }, + { + id: "app.navigation.focus-workspaces", + title: "Focus Workspaces", + description: "Move keyboard focus to the workspaces list", + shortcut: "mod+g w", + group: "Navigation", + run: () => this.focusNavigationSection("workspaces"), + }, + { + id: "app.navigation.focus-sessions", + title: "Focus Sessions", + description: "Move keyboard focus to the sessions list", + shortcut: "mod+g s", + group: "Navigation", + run: () => this.focusNavigationSection("sessions"), + }, + ]; } private ensureGatewayPluginsLoaded(): Promise { @@ -994,7 +1208,10 @@ export class PiWebApp extends LitElement { const existing = this.machinePluginLoadPromises.get(machine.id); if (existing !== undefined) return existing; - const load = this.registerExternalPlugins(`PI WEB plugins from ${machine.name}`, () => loadExternalPlugins(`/api/machines/${encodeURIComponent(machine.id)}/pi-web-plugins/manifest.json`, { machineId: machine.id })) + const load = this.registerExternalPlugins(`PI WEB plugins from ${machine.name}`, () => loadExternalPlugins(`/api/machines/${encodeURIComponent(machine.id)}/pi-web-plugins/manifest.json`, { + machineId: machine.id, + shouldLoadPlugin: (entry) => this.plugins.shouldLoadRemotePlugin(entry.id, entry.machineSpecific), + })) .then((loaded) => { if (loaded) this.loadedMachinePluginIds.add(machine.id); }) .finally(() => { this.machinePluginLoadPromises.delete(machine.id); }); this.machinePluginLoadPromises.set(machine.id, load); @@ -1028,10 +1245,12 @@ export class PiWebApp extends LitElement { openSettings: (section) => { this.openSettings(section); }, }, openActionPalette: () => { this.setState({ actionPaletteOpen: true }); }, - focusPrompt: () => { this.promptEditor?.focusInput(); }, + focusPrompt: () => { void this.focusChatComposer(); }, addProject: () => { this.setState({ projectDialogOpen: true }); }, addMachine: () => { this.openMachineDialog(); }, - refreshSelectedMachine: () => this.machines.refreshMachineHealth(), + refreshSelectedMachine: async () => { + await Promise.all([this.machines.refreshMachineHealth(), this.machines.refreshMachineRuntime()]); + }, removeSelectedMachine: () => this.removeMachine(), openSelectedMachine: () => { this.openSelectedMachine(); }, configureAuth: () => this.auth.openLogin(), @@ -1158,7 +1377,10 @@ export class PiWebApp extends LitElement { private async submitMachineDialog(input: MachineDialogSubmit): Promise { const machine = await this.machines.addMachine(input); - if (machine !== undefined) this.setState({ machineDialogOpen: false }); + if (machine !== undefined) { + this.setState({ machineDialogOpen: false }); + this.schedulePiWebStatusRefresh(); + } } private async removeMachine(machine: Machine | undefined = this.state.selectedMachine): Promise { @@ -1327,8 +1549,8 @@ export class PiWebApp extends LitElement { if (!this.appShell.isMobileNavigationLayout) return null; return html` this.refreshAppData()} .onReload=${() => { this.hardReloadApp(); }}>`; + return html` { this.hardReloadApp(); }}>`; } override render() { const state = this.state; return html` -
- +
+ ${this.renderNavigationPanelEdgeControl()}
${this.renderContextBar()} ${this.renderMobileMainTabs()} ${state.error ? html`
${state.error}
` : null} -
${this.appShell.isMobileNavigationLayout ? this.renderNavigationPanel(true) : null}
+
${this.appShell.isMobileNavigationLayout ? this.renderNavigationPanel() : null}
${state.selectedSession ? html` 0} .loadingMore=${state.isLoadingEarlierMessages} .isReceivingPartialStream=${state.isReceivingPartialStream} .isCompacting=${state.status?.isCompacting === true} .pendingMessageCount=${state.status?.pendingMessageCount ?? 0} .status=${state.status} .activity=${state.activity} .onLoadMore=${() => this.withChatPrependTransition(() => this.sessions.loadEarlierMessages())}> 0} .status=${state.status} .onSend=${(text: string, streamingBehavior?: "steer" | "followUp") => { this.sendPrompt(text, streamingBehavior); }} .onStop=${() => this.sessions.stopActiveWork()} .onSelectModel=${() => { void this.openModelDialog(); }} .onSelectThinking=${() => { void this.openThinkingDialog(); }}> - + ${state.commandDialog !== undefined ? html` this.sessions.respondToCommand(state.commandDialog?.requestId ?? "", value)} .onCancel=${() => { this.sessions.cancelCommand(); }}>` : null} ${state.modelDialog !== undefined ? html` { void this.pickModel(value); }} .onCancel=${() => { this.setState({ modelDialog: undefined }); }}>` : null} ${state.thinkingDialog !== undefined ? html` { void this.pickThinking(value); }} .onCancel=${() => { this.setState({ thinkingDialog: undefined }); }}>` : null} @@ -1396,7 +1618,7 @@ export class PiWebApp extends LitElement { ${state.projectDialogOpen ? html` this.projects.addProject(path, create)} .onCancel=${() => { this.setState({ projectDialogOpen: false }); }}>` : null} ${state.machineDialogOpen ? html` this.submitMachineDialog(input)} .onCancel=${() => { this.setState({ machineDialogOpen: false }); }}>` : null} ${state.themeDialog !== undefined ? html` { this.pickTheme(value); }} .onCancel=${() => { this.setState({ themeDialog: undefined }); }}>` : null} - ${this.settingsSection !== undefined ? html` { this.navigateSettings(section); }} .onClose=${() => { this.closeSettings(); }} .onConfigSaved=${(config: PiWebConfigValues) => { this.applyClientConfig(config); }}>` : null} + ${this.settingsSection !== undefined ? html` { this.navigateSettings(section); }} .onClose=${() => { this.closeSettings(); }} .onConfigSaved=${(config: PiWebConfigValues) => { this.applyClientConfig(config); }}>` : null}
`; } @@ -1433,14 +1655,6 @@ function shouldRefreshMachineActivity(machine: Machine, health: MachineHealth | return status === undefined || status === "unknown" || status === "online"; } -function selectedMachineActivityIndicator(state: AppState) { - const machineId = selectedMachineId(state); - const machine = state.selectedMachine; - const status = state.machineStatuses[machineId]?.status ?? machine?.status; - if (status === "offline" || status === "error") return undefined; - return machineActivityIndicator(state.machineActivities[machineId]); -} - function patchChangesState(state: AppState, patch: Partial): boolean { return Object.entries(patch).some(([key, value]) => Reflect.get(state, key) !== value); } diff --git a/src/client/src/components/ProjectList.ts b/src/client/src/components/ProjectList.ts index f857404..80b492d 100644 --- a/src/client/src/components/ProjectList.ts +++ b/src/client/src/components/ProjectList.ts @@ -3,12 +3,13 @@ import { customElement, property, state } from "lit/decorators.js"; import type { Project, Workspace, WorkspaceActivity } from "../api"; import { projectActivityIndicator } from "../workspaceActivity"; import { actionMenuPanelStyle } from "./actionMenu"; -import { renderActivityIndicator } from "./activityBadge"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +import { renderActionActivityIndicator } from "./activityBadge"; +import type { KeyboardNavigableSection } from "./navigationFocus"; +import { activateSelectableRow, focusSelectedOrFirstSelectableRow, handleSelectableRowKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; @customElement("project-list") -export class ProjectList extends LitElement { +export class ProjectList extends LitElement implements KeyboardNavigableSection { @property({ attribute: false }) projects: Project[] = []; @property({ attribute: false }) selected?: Project; @property({ attribute: false }) activities: Record = {}; @@ -18,6 +19,9 @@ export class ProjectList extends LitElement { @property({ attribute: false }) onSelect?: (project: Project) => void; @property({ attribute: false }) onClose?: (project: Project) => void; @property({ attribute: false }) onToggleCollapsed?: () => void; + @property({ attribute: false }) onFocusPreviousSection?: () => void | Promise; + @property({ attribute: false }) onFocusNextSection?: () => void | Promise; + @property({ attribute: false }) onCancelKeyboardNavigation?: () => void | Promise; @state() private openMenuProjectId: string | undefined; @state() private menuStyle = ""; private readonly onDocumentClick = (event: MouseEvent) => { @@ -40,6 +44,11 @@ export class ProjectList extends LitElement { if (changed.has("collapsed") && this.collapsed) this.openMenuProjectId = undefined; } + async focusSelectedOrFirst(): Promise { + await this.updateComplete; + return focusSelectedOrFirstSelectableRow(this.renderRoot, { fallbackSelector: ".section-toggle" }); + } + override render() { return html`
@@ -52,10 +61,11 @@ export class ProjectList extends LitElement { tabindex="0" title=${project.path} @click=${(event: MouseEvent) => { activateSelectableRow(event, () => this.onSelect?.(project)); }} - @keydown=${(event: KeyboardEvent) => { activateSelectableRowFromKeyboard(event, () => this.onSelect?.(project)); }} + @keydown=${(event: KeyboardEvent) => { this.handleProjectKeydown(event, project); }} >
- ${project.name}${this.renderActivity(project)}${project.path} + ${project.name}${project.path} + ${this.renderActivity(project)}
@@ -73,16 +83,25 @@ export class ProjectList extends LitElement { `; } + private handleProjectKeydown(event: KeyboardEvent, project: Project): void { + handleSelectableRowKeyboard(event, { + activate: () => this.onSelect?.(project), + previousSection: this.onFocusPreviousSection === undefined ? undefined : () => { void this.onFocusPreviousSection?.(); }, + nextSection: this.onFocusNextSection === undefined ? undefined : () => { void this.onFocusNextSection?.(); }, + cancel: this.onCancelKeyboardNavigation === undefined ? undefined : () => { void this.onCancelKeyboardNavigation?.(); }, + }); + } + private renderHeading() { if (!this.collapsible) return "Projects"; const selectedSummary = this.selected?.name ?? "No project selected"; const selectedTitle = this.selected?.path ?? selectedSummary; - return html``; + return html``; } private renderActivity(project: Project) { const kind = projectActivityIndicator(project, this.workspacesByProjectId[project.id] ?? [], this.activities); - return renderActivityIndicator(kind, kind === "terminal" ? "Project terminal active" : "Project active") ?? ""; + return renderActionActivityIndicator(kind, kind === "terminal" ? "Project terminal active" : "Project active"); } private toggleMenu(projectId: string, target: EventTarget | null) { diff --git a/src/client/src/components/SessionList.test.ts b/src/client/src/components/SessionList.test.ts new file mode 100644 index 0000000..b301176 --- /dev/null +++ b/src/client/src/components/SessionList.test.ts @@ -0,0 +1,49 @@ +import { describe, expect, it } from "vitest"; +import type { SessionInfo } from "../api"; +import { sessionRowsForCurrentTree } from "./SessionList"; + +describe("sessionRowsForCurrentTree", () => { + it("keeps archived ancestors visible while they have unarchived descendants", () => { + const parent = { ...session("parent"), archived: true, archivedAt: "2026-06-09T00:00:00.000Z" }; + const child = session("child", { parentSessionPath: parent.path }); + + expect(rowSummaries(sessionRowsForCurrentTree([parent, child]))).toEqual([ + { id: "parent", depth: 0, hasMissingParent: false }, + { id: "child", depth: 1, hasMissingParent: false }, + ]); + }); + + it("hides archived parents from the current tree once children are detached", () => { + const parent = { ...session("parent"), archived: true, archivedAt: "2026-06-09T00:00:00.000Z" }; + const detachedChild = session("child"); + + expect(rowSummaries(sessionRowsForCurrentTree([parent, detachedChild]))).toEqual([ + { id: "child", depth: 0, hasMissingParent: false }, + ]); + }); + + it("still marks unavailable parents when the parent record is missing", () => { + const child = session("child", { parentSessionPath: "/sessions/missing.jsonl" }); + + expect(rowSummaries(sessionRowsForCurrentTree([child]))).toEqual([ + { id: "child", depth: 0, hasMissingParent: true }, + ]); + }); +}); + +function rowSummaries(rows: ReturnType) { + return rows.map((row) => ({ id: row.session.id, depth: row.depth, hasMissingParent: row.hasMissingParent })); +} + +function session(id: string, overrides: Partial = {}): SessionInfo { + return { + id, + path: `/sessions/${id}.jsonl`, + cwd: "/workspace", + created: "2026-06-09T00:00:00.000Z", + modified: "2026-06-09T00:00:00.000Z", + messageCount: 1, + firstMessage: id, + ...overrides, + }; +} diff --git a/src/client/src/components/SessionList.ts b/src/client/src/components/SessionList.ts index 0793781..fa3adf4 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -1,11 +1,12 @@ -import { LitElement, html, type PropertyValues } from "lit"; +import { LitElement, css, html, type PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import type { SessionActivity, SessionInfo, SessionStatus } from "../api"; import { isCachedNewSessionInfo } from "../cachedNewSessions"; import { isSessionActive } from "../../../shared/activity"; import { actionMenuPanelStyle } from "./actionMenu"; -import { renderActivityIndicator } from "./activityBadge"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +import { renderActionActivityIndicator } from "./activityBadge"; +import type { KeyboardNavigableSection } from "./navigationFocus"; +import { activateSelectableRow, focusSelectedOrFirstSelectableRow, handleSelectableRowKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; function sessionLabel(session: SessionInfo): string { @@ -13,37 +14,51 @@ function sessionLabel(session: SessionInfo): string { return session.firstMessage !== "" ? session.firstMessage : session.id.slice(0, 8); } -interface SessionRow { +export interface SessionRow { session: SessionInfo; depth: number; hasMissingParent: boolean; } +type SessionSelectionScope = "current" | "archived"; + @customElement("session-list") -export class SessionList extends LitElement { +export class SessionList extends LitElement implements KeyboardNavigableSection { @property({ attribute: false }) sessions: SessionInfo[] = []; @property({ attribute: false }) statuses: Record = {}; @property({ attribute: false }) activities: Record = {}; @property({ attribute: false }) selected?: SessionInfo; @property({ type: Boolean }) canStart = false; + @property({ type: Boolean }) canDeleteArchived = false; + @property({ type: String }) archivedDeleteUnavailableMessage = "Update and restart Pi-Web on this machine to delete archived sessions."; @property({ type: Boolean, reflect: true }) collapsible = false; @property({ type: Boolean, reflect: true }) collapsed = false; @property({ attribute: false }) onSelect?: (session: SessionInfo) => void; @property({ attribute: false }) onStart?: () => void; @property({ attribute: false }) onToggleCollapsed?: () => void; @property({ attribute: false }) onArchivedCollapsed?: () => void; + @property({ attribute: false }) onFocusPreviousSection?: () => void | Promise; + @property({ attribute: false }) onFocusNextSection?: () => void | Promise; + @property({ attribute: false }) onCancelKeyboardNavigation?: () => void | Promise; + @property({ attribute: false }) onArchive?: (session: SessionInfo) => void; + @property({ attribute: false }) onArchiveWithDescendants?: (session: SessionInfo) => void; + @property({ attribute: false }) onArchiveMany?: (sessions: SessionInfo[]) => void | Promise; + @property({ attribute: false }) onRestore?: (session: SessionInfo) => void; + @property({ attribute: false }) onDelete?: (session: SessionInfo) => void; + @property({ attribute: false }) onDeleteArchived?: (session: SessionInfo) => void | Promise; + @property({ attribute: false }) onDeleteArchivedMany?: (sessions: SessionInfo[]) => void | Promise; + @property({ attribute: false }) onDetachParent?: (session: SessionInfo) => void; + @state() private openMenuSessionId: string | undefined; @state() private menuStyle = ""; @state() private archivedExpanded = false; + @state() private selectionScopes: ReadonlySet = new Set(); + @state() private selectedSessionIds: ReadonlySet = new Set(); + private readonly onDocumentClick = (event: MouseEvent) => { if (event.composedPath().includes(this)) return; this.openMenuSessionId = undefined; }; - @property({ attribute: false }) onArchive?: (session: SessionInfo) => void; - @property({ attribute: false }) onArchiveWithDescendants?: (session: SessionInfo) => void; - @property({ attribute: false }) onRestore?: (session: SessionInfo) => void; - @property({ attribute: false }) onDelete?: (session: SessionInfo) => void; - @property({ attribute: false }) onDetachParent?: (session: SessionInfo) => void; override connectedCallback(): void { super.connectedCallback(); @@ -56,9 +71,12 @@ export class SessionList extends LitElement { } protected override updated(changed: PropertyValues): void { - if (changed.has("sessions") && this.openMenuSessionId !== undefined && !this.sessions.some((session) => session.id === this.openMenuSessionId)) this.openMenuSessionId = undefined; + if (changed.has("sessions")) { + if (this.openMenuSessionId !== undefined && !this.sessions.some((session) => session.id === this.openMenuSessionId)) this.openMenuSessionId = undefined; + if (!this.sessions.some((session) => session.archived === true)) this.archivedExpanded = false; + this.pruneSelectedSessionIds(); + } if (changed.has("collapsed") && this.collapsed) this.openMenuSessionId = undefined; - if (changed.has("sessions") && !this.sessions.some((session) => session.archived === true)) this.archivedExpanded = false; const previousSelected = changed.get("selected"); if (changed.has("selected") && this.selected?.archived === true && (previousSelected?.id !== this.selected.id || previousSelected.archived !== true) && !this.archivedExpanded) { this.archivedExpanded = true; @@ -68,20 +86,30 @@ export class SessionList extends LitElement { if ((changed.has("selected") || changed.has("sessions") || changed.has("collapsed")) && !this.collapsed) this.scrollSelectedIntoView(); } + async focusSelectedOrFirst(): Promise { + await this.updateComplete; + return focusSelectedOrFirstSelectableRow(this.renderRoot, { fallbackSelector: ".section-toggle, h2 button:not([disabled])" }); + } + override render() { - const activeRows = sessionRowsForActiveTree(this.sessions); - const activeIds = new Set(activeRows.map((row) => row.session.id)); - const archivedRows = sessionRows(this.sessions.filter((session) => session.archived === true && !activeIds.has(session.id))); + const currentRows = sessionRowsForCurrentTree(this.sessions); + const currentRowIds = new Set(currentRows.map((row) => row.session.id)); + const currentSelectableSessions = currentRows.map((row) => row.session).filter((session) => sessionSelectionScope(session) === "current"); + const archivedRows = sessionRows(this.sessions.filter((session) => session.archived === true && !currentRowIds.has(session.id))); const descendantCounts = unarchivedDescendantCounts(this.sessions); return html`
- ${this.renderHeading(activeRows.length + archivedRows.length)} + ${this.renderHeading(currentRows.length + archivedRows.length, currentSelectableSessions)} ${this.collapsed ? null : html`
- ${activeRows.map((row) => this.renderSession(row, descendantCounts.get(row.session.id) ?? 0))} + ${this.renderCurrentSelectionToolbar(currentSelectableSessions)} + ${currentRows.map((row) => this.renderSession(row, descendantCounts.get(row.session.id) ?? 0, "current"))} ${archivedRows.length > 0 ? html` -

- ${this.archivedExpanded ? archivedRows.map((row) => this.renderSession(row, descendantCounts.get(row.session.id) ?? 0)) : null} + ${this.renderArchivedHeading(archivedRows.map((row) => row.session))} + ${this.archivedExpanded ? html` + ${this.renderArchivedSelectionToolbar(archivedRows.map((row) => row.session))} + ${archivedRows.map((row) => this.renderSession(row, descendantCounts.get(row.session.id) ?? 0, "archived"))} + ` : null} ` : null}
`} @@ -89,43 +117,115 @@ export class SessionList extends LitElement { `; } - private renderHeading(sessionCount: number) { - if (!this.collapsible) return html`

Sessions

`; + private renderHeading(sessionCount: number, currentSessions: SessionInfo[]) { + if (!this.collapsible) { + return html` +

+ Sessions + ${this.renderCurrentSelectionButton(currentSessions)} + +

+ `; + } const selectedSummary = this.selected === undefined ? "No session selected" : sessionLabel(this.selected); const selectedTitle = this.selected?.path ?? selectedSummary; return html`

- + + ${this.renderCurrentSelectionButton(currentSessions)} + ${sessionCount}

`; } - private renderSession(row: SessionRow, descendantCount: number) { + private renderCurrentSelectionButton(currentSessions: SessionInfo[]) { + if (this.collapsed || currentSessions.length === 0) return null; + const active = this.selectionScopes.has("current"); + return html``; + } + + private renderArchivedHeading(archivedSessions: SessionInfo[]) { + const active = this.selectionScopes.has("archived"); + return html` +

+ + ${this.archivedExpanded ? html`` : null} + ${archivedSessions.length} +

+ `; + } + + private renderCurrentSelectionToolbar(visibleSessions: SessionInfo[]) { + if (visibleSessions.length === 0 || !this.selectionScopes.has("current")) return null; + + const selectedSessions = this.selectedSessions("current"); + const archivableSessions = selectedSessions.filter((session) => !isCachedNewSessionInfo(session)); + const allVisibleSelected = visibleSessions.length > 0 && visibleSessions.every((session) => this.selectedSessionIds.has(session.id)); + const visibleSelectedCount = visibleSessions.filter((session) => this.selectedSessionIds.has(session.id)).length; + return html` +
+ + ${selectedSessions.length} selected${visibleSelectedCount !== selectedSessions.length ? html` · ${visibleSelectedCount} visible` : null} + + + +
+ `; + } + + private renderArchivedSelectionToolbar(visibleSessions: SessionInfo[]) { + if (visibleSessions.length === 0 || !this.selectionScopes.has("archived")) return null; + + const selectedSessions = this.selectedSessions("archived"); + const allVisibleSelected = visibleSessions.length > 0 && visibleSessions.every((session) => this.selectedSessionIds.has(session.id)); + const visibleSelectedCount = visibleSessions.filter((session) => this.selectedSessionIds.has(session.id)).length; + return html` +
+ + ${selectedSessions.length} selected${visibleSelectedCount !== selectedSessions.length ? html` · ${visibleSelectedCount} visible` : null} + + + + ${this.canDeleteArchived ? null : html`${this.archivedDeleteUnavailableMessage}`} +
+ `; + } + + private renderSession(row: SessionRow, descendantCount: number, scope: SessionSelectionScope) { const { session } = row; const cappedDepth = Math.min(row.depth, 2); + const canBulkSelect = sessionSelectionScope(session) === scope; + const selectionActive = this.selectionScopes.has(scope); + const showsCheckbox = selectionActive && canBulkSelect; + const bulkSelected = showsCheckbox && this.selectedSessionIds.has(session.id); return html`
{ activateSelectableRow(event, () => this.onSelect?.(session)); }} - @keydown=${(event: KeyboardEvent) => { activateSelectableRowFromKeyboard(event, () => this.onSelect?.(session)); }} + @click=${(event: MouseEvent) => { activateSelectableRow(event, () => { this.activateSessionRow(session, scope); }); }} + @keydown=${(event: KeyboardEvent) => { this.handleSessionKeydown(event, session, scope); }} > -
- ${row.depth > 0 ? html`↳` : null}${sessionLabel(session)}${row.depth > 2 ? html` depth ${row.depth}` : null}${row.hasMissingParent ? html` parent unavailable` : null}${this.renderStatus(session)}${String(session.messageCount)} messages +
+ ${showsCheckbox ? html` { event.stopPropagation(); }} @change=${() => { this.toggleSelected(session.id); }}>` : null} + ${row.depth > 0 ? html`↳` : null}${sessionLabel(session)}${row.depth > 2 ? html` depth ${row.depth}` : null}${row.hasMissingParent ? html` parent unavailable` : null}${this.renderSessionMetaPrefix(session)}${String(session.messageCount)} messages + ${this.renderActivity(session)}
${this.openMenuSessionId === session.id ? html`
- ${session.parentSessionPath !== undefined ? html`` : null} ${isCachedNewSessionInfo(session) ? html`` : session.archived === true - ? html`` + ? html` + + + ` : html` + ${session.parentSessionPath !== undefined ? html`` : null} ${descendantCount > 0 ? html`` : null} `} @@ -136,11 +236,101 @@ export class SessionList extends LitElement { `; } + private handleSessionKeydown(event: KeyboardEvent, session: SessionInfo, scope: SessionSelectionScope): void { + handleSelectableRowKeyboard(event, { + activate: () => { this.activateSessionRow(session, scope); }, + previousSection: this.onFocusPreviousSection === undefined ? undefined : () => { void this.onFocusPreviousSection?.(); }, + nextSection: this.onFocusNextSection === undefined ? undefined : () => { void this.onFocusNextSection?.(); }, + cancel: this.onCancelKeyboardNavigation === undefined ? undefined : () => { void this.onCancelKeyboardNavigation?.(); }, + }); + } + + private activateSessionRow(session: SessionInfo, scope: SessionSelectionScope): void { + if (this.selectionScopes.has(scope) && sessionSelectionScope(session) === scope) { + this.toggleSelected(session.id); + return; + } + this.onSelect?.(session); + } + private confirmArchiveWithDescendants(session: SessionInfo, descendantCount: number): void { const noun = descendantCount === 1 ? "descendant session" : "descendant sessions"; if (confirm(`Archive “${sessionLabel(session)}” and ${String(descendantCount)} ${noun}?`)) this.onArchiveWithDescendants?.(session); } + private confirmDeleteArchived(session: SessionInfo): void { + if (!this.canDeleteArchived) return; + if (confirm(`Permanently delete archived session “${sessionLabel(session)}”? This cannot be undone.`)) void this.onDeleteArchived?.(session); + } + + private confirmDeleteSelectedArchived(): void { + if (!this.canDeleteArchived) return; + const archived = this.selectedSessions("archived"); + if (archived.length === 0) return; + const noun = archived.length === 1 ? "archived session" : "archived sessions"; + if (!confirm(`Permanently delete ${String(archived.length)} selected ${noun}? This cannot be undone.`)) return; + this.selectedSessionIds = removeSessionIds(this.selectedSessionIds, archived.map((session) => session.id)); + void this.onDeleteArchivedMany?.(archived); + } + + private archiveSelectedCurrent(): void { + const sessions = this.selectedSessions("current").filter((session) => !isCachedNewSessionInfo(session)); + this.selectedSessionIds = removeSessionIds(this.selectedSessionIds, sessions.map((session) => session.id)); + void this.onArchiveMany?.(sessions); + } + + private toggleSelection(scope: SessionSelectionScope, visibleSessions: SessionInfo[]): void { + if (this.selectionScopes.has(scope)) { + this.closeSelection(scope); + return; + } + this.startSelection(scope, visibleSessions); + } + + private startSelection(scope: SessionSelectionScope, visibleSessions: SessionInfo[]): void { + this.selectionScopes = new Set([...this.selectionScopes, scope]); + const onlyVisibleSession = visibleSessions.length === 1 ? visibleSessions[0] : undefined; + if (onlyVisibleSession !== undefined) this.selectedSessionIds = new Set([...this.selectedSessionIds, onlyVisibleSession.id]); + } + + private closeSelection(scope: SessionSelectionScope): void { + this.selectionScopes = new Set([...this.selectionScopes].filter((candidate) => candidate !== scope)); + this.clearSelection(scope); + } + + private clearSelection(scope: SessionSelectionScope): void { + const sessionIds = this.sessions.filter((session) => sessionSelectionScope(session) === scope).map((session) => session.id); + this.selectedSessionIds = removeSessionIds(this.selectedSessionIds, sessionIds); + } + + private toggleSelected(sessionId: string): void { + const next = new Set(this.selectedSessionIds); + if (next.has(sessionId)) next.delete(sessionId); + else next.add(sessionId); + this.selectedSessionIds = next; + } + + private toggleVisibleSelection(sessions: SessionInfo[], selected: boolean): void { + const next = new Set(this.selectedSessionIds); + for (const session of sessions) { + if (selected) next.add(session.id); + else next.delete(session.id); + } + this.selectedSessionIds = next; + } + + private selectedSessions(scope: SessionSelectionScope): SessionInfo[] { + return this.sessions.filter((session) => this.selectedSessionIds.has(session.id) && sessionSelectionScope(session) === scope); + } + + private pruneSelectedSessionIds(): void { + const existing = new Set(this.sessions.map((session) => session.id)); + const next = new Set([...this.selectedSessionIds].filter((sessionId) => existing.has(sessionId))); + if (next.size !== this.selectedSessionIds.size) this.selectedSessionIds = next; + if (this.selectionScopes.has("archived") && !this.sessions.some((session) => session.archived === true)) this.closeSelection("archived"); + if (this.selectionScopes.has("current") && !this.sessions.some((session) => session.archived !== true)) this.closeSelection("current"); + } + private toggleMenu(sessionId: string, target: EventTarget | null) { if (this.openMenuSessionId === sessionId) { this.openMenuSessionId = undefined; @@ -154,6 +344,7 @@ export class SessionList extends LitElement { this.archivedExpanded = !this.archivedExpanded; if (!this.archivedExpanded) { this.openMenuSessionId = undefined; + if (this.selectionScopes.has("archived")) this.closeSelection("archived"); this.onArchivedCollapsed?.(); } } @@ -162,13 +353,41 @@ export class SessionList extends LitElement { this.renderRoot.querySelector(".action-row.selected")?.scrollIntoView({ block: "nearest" }); } - private renderStatus(session: SessionInfo) { + private renderSessionMetaPrefix(session: SessionInfo) { if (isCachedNewSessionInfo(session)) return "new · "; if (session.archived === true) return "read-only · "; - return renderActivityIndicator(isSessionActive(this.statuses[session.id], this.activities[session.id]) ? "session" : undefined, "Session active") ?? ""; + return ""; } - static override styles = listStyles; + private renderActivity(session: SessionInfo) { + if (isCachedNewSessionInfo(session) || session.archived === true) return undefined; + return renderActionActivityIndicator(isSessionActive(this.statuses[session.id], this.activities[session.id]) ? "session" : undefined, "Session active"); + } + + static override styles = [listStyles, css` + h2 { min-height: 30px; } + h2 > .section-count { flex: 0 0 auto; display: inline; color: var(--pi-muted); font-size: inherit; } + .bulk-select-entry { box-sizing: border-box; flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; font-size: 13px; line-height: 1; text-transform: none; } + .bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; } + .bulk-row button { padding: 5px 7px; font-size: 12px; } + .bulk-row small { display: inline; min-width: 0; color: var(--pi-muted); } + .bulk-row .capability-hint { flex: 1 0 100%; color: var(--pi-warning); } + .bulk-row.selecting { padding: 6px; border: 1px solid var(--pi-border-muted); border-radius: 8px; background: color-mix(in srgb, var(--pi-surface) 65%, transparent); } + button.danger, .action-menu-panel button.danger { color: var(--pi-danger); } + button.danger:hover, .action-menu-panel button.danger:hover { background: color-mix(in srgb, var(--pi-danger) 14%, transparent); } + .action-row.bulk-selected .action-main { border-color: var(--pi-accent); box-shadow: inset 3px 0 0 var(--pi-accent); } + .action-main.selecting { padding-left: calc(32px + var(--depth, 0) * 16px); } + .session-checkbox { position: absolute; top: 9px; left: calc(8px + var(--depth, 0) * 16px); z-index: 2; margin: 0; } + `]; +} + +function sessionSelectionScope(session: SessionInfo): SessionSelectionScope { + return session.archived === true ? "archived" : "current"; +} + +function removeSessionIds(sessionIds: ReadonlySet, removedIds: readonly string[]): ReadonlySet { + const removed = new Set(removedIds); + return new Set([...sessionIds].filter((sessionId) => !removed.has(sessionId))); } function unarchivedDescendantCounts(sessions: SessionInfo[]): Map { @@ -196,16 +415,16 @@ function unarchivedDescendantCounts(sessions: SessionInfo[]): Map [session.id, countFor(session, new Set())])); } -function sessionRowsForActiveTree(sessions: SessionInfo[]): SessionRow[] { +export function sessionRowsForCurrentTree(sessions: SessionInfo[]): SessionRow[] { const byPath = new Map(sessions.map((session) => [session.path, session])); const visible = new Set(); for (const session of sessions) { if (session.archived === true) continue; visible.add(session.id); let parentPath = session.parentSessionPath; - const seen = new Set([session.path]); - while (parentPath !== undefined && !seen.has(parentPath)) { - seen.add(parentPath); + const seenPaths = new Set([session.path]); + while (parentPath !== undefined && !seenPaths.has(parentPath)) { + seenPaths.add(parentPath); const parent = byPath.get(parentPath); if (parent === undefined) break; visible.add(parent.id); diff --git a/src/client/src/components/SettingsDialog.ts b/src/client/src/components/SettingsDialog.ts index 3f601f7..7db4667 100644 --- a/src/client/src/components/SettingsDialog.ts +++ b/src/client/src/components/SettingsDialog.ts @@ -61,7 +61,18 @@ export class SettingsDialog extends LitElement { private renderActiveSection(): TemplateResult { if (this.section === "shortcuts") { - return html``; + return html` + this.loadConfig()} + .onSave=${(config: PiWebConfigValues) => this.saveConfig(config)} + > + `; } if (this.section === "plugins") { return html` diff --git a/src/client/src/components/StatusBar.ts b/src/client/src/components/StatusBar.ts index 72666e1..2fc2afb 100644 --- a/src/client/src/components/StatusBar.ts +++ b/src/client/src/components/StatusBar.ts @@ -1,17 +1,12 @@ import { LitElement, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import type { Machine, SessionStatus, Workspace } from "../api"; -import type { WorkspaceLabelItem } from "../plugins/types"; +import type { SessionStatus } from "../api"; import { formatCost, formatTokenCount } from "../utils/format"; import { statusBarStyles } from "./shared"; -import { renderWorkspaceLabel } from "./workspaceLabel"; @customElement("status-bar") export class StatusBar extends LitElement { @property({ attribute: false }) status?: SessionStatus; - @property({ attribute: false }) machine?: Machine; - @property({ attribute: false }) workspace?: Workspace; - @property({ attribute: false }) workspaceLabelItems: WorkspaceLabelItem[] = []; override render() { const status = this.status; @@ -25,11 +20,9 @@ export class StatusBar extends LitElement { const tokens = status.tokens; return html`
- ${this.machine?.name ?? "Local"} - ${renderWorkspaceLabel(this.workspace?.label ?? "workspace", this.workspaceLabelItems, this.workspace?.path)} ↑${formatTokenCount(tokens.input)} ↓${formatTokenCount(tokens.output)} - ${contextText} + ${contextText} ${formatCost(status.cost)} ${status.pendingMessageCount > 0 ? html`${String(status.pendingMessageCount)} queued` : null}
diff --git a/src/client/src/components/WorkspaceList.ts b/src/client/src/components/WorkspaceList.ts index b130dbb..6844c4d 100644 --- a/src/client/src/components/WorkspaceList.ts +++ b/src/client/src/components/WorkspaceList.ts @@ -4,13 +4,14 @@ import type { Workspace, WorkspaceActivity } from "../api"; import type { WorkspaceLabelItem } from "../plugins/types"; import { workspaceActivityFor, workspaceActivityIndicator } from "../workspaceActivity"; import { actionMenuPanelStyle } from "./actionMenu"; -import { renderActivityIndicator } from "./activityBadge"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +import { renderActionActivityIndicator } from "./activityBadge"; +import type { KeyboardNavigableSection } from "./navigationFocus"; +import { activateSelectableRow, focusSelectedOrFirstSelectableRow, handleSelectableRowKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; import { renderWorkspaceLabelInlineItems } from "./workspaceLabel"; @customElement("workspace-list") -export class WorkspaceList extends LitElement { +export class WorkspaceList extends LitElement implements KeyboardNavigableSection { @property({ attribute: false }) workspaces: Workspace[] = []; @property({ attribute: false }) selected?: Workspace; @property({ type: Boolean, reflect: true }) collapsible = false; @@ -21,6 +22,9 @@ export class WorkspaceList extends LitElement { @property({ attribute: false }) onSelect?: (workspace: Workspace) => void; @property({ attribute: false }) onDelete?: (workspace: Workspace) => void; @property({ attribute: false }) onToggleCollapsed?: () => void; + @property({ attribute: false }) onFocusPreviousSection?: () => void | Promise; + @property({ attribute: false }) onFocusNextSection?: () => void | Promise; + @property({ attribute: false }) onCancelKeyboardNavigation?: () => void | Promise; @state() private openMenuWorkspaceId: string | undefined; @state() private menuStyle = ""; @@ -45,6 +49,11 @@ export class WorkspaceList extends LitElement { if ((changed.has("selected") || changed.has("workspaces") || changed.has("collapsed")) && !this.collapsed) this.scrollSelectedIntoView(); } + async focusSelectedOrFirst(): Promise { + await this.updateComplete; + return focusSelectedOrFirstSelectableRow(this.renderRoot, { fallbackSelector: ".section-toggle" }); + } + override render() { return html`
@@ -79,18 +88,17 @@ export class WorkspaceList extends LitElement { if (!this.collapsible) return "Workspaces"; const selectedSummary = this.selected === undefined ? "No workspace selected" : `${this.selected.label}${this.selected.isMain ? " · main" : ""} · ${this.selected.path}`; const selectedTitle = this.selected?.path ?? selectedSummary; - return html``; + return html``; } private renderActivity(workspace: Workspace): TemplateResult | undefined { const kind = workspaceActivityIndicator(workspaceActivityFor(workspace, this.activities)); - return renderActivityIndicator(kind, kind === "terminal" ? "Workspace terminal active" : "Workspace active"); + return renderActionActivityIndicator(kind, kind === "terminal" ? "Workspace terminal active" : "Workspace active"); } private renderWorkspaceMain(label: string, items: WorkspaceLabelItem[], workspace: Workspace): TemplateResult { return html` - ${this.renderActivity(workspace)} ${label} ${this.isDeleting(workspace) ? html`Deleting…` : null} @@ -99,6 +107,7 @@ export class WorkspaceList extends LitElement { ${renderWorkspaceLabelInlineItems(items)} `} + ${this.renderActivity(workspace)} `; } @@ -182,7 +191,12 @@ export class WorkspaceList extends LitElement { this.openMenuWorkspaceId = undefined; return; } - activateSelectableRowFromKeyboard(event, () => this.onSelect?.(workspace)); + handleSelectableRowKeyboard(event, { + activate: () => this.onSelect?.(workspace), + previousSection: this.onFocusPreviousSection === undefined ? undefined : () => { void this.onFocusPreviousSection?.(); }, + nextSection: this.onFocusNextSection === undefined ? undefined : () => { void this.onFocusNextSection?.(); }, + cancel: this.onCancelKeyboardNavigation === undefined ? undefined : () => { void this.onCancelKeyboardNavigation?.(); }, + }); } private scrollSelectedIntoView(): void { diff --git a/src/client/src/components/WorkspacePanel.ts b/src/client/src/components/WorkspacePanel.ts index ced47fb..43f3029 100644 --- a/src/client/src/components/WorkspacePanel.ts +++ b/src/client/src/components/WorkspacePanel.ts @@ -1,9 +1,8 @@ import { LitElement, html, type TemplateResult } from "lit"; import { customElement, property, query, state } from "lit/decorators.js"; import type { Workspace } from "../api"; -import type { QualifiedContributionId, QualifiedWorkspacePanelContribution, WorkspaceLabelItem, WorkspacePanelContext } from "../plugins/types"; +import type { QualifiedContributionId, QualifiedWorkspacePanelContribution, WorkspacePanelContext } from "../plugins/types"; import { workspacePanelStyles } from "./shared"; -import { renderWorkspaceLabel } from "./workspaceLabel"; export interface WorkspacePanelEmptyState { title: string; @@ -19,7 +18,6 @@ export class WorkspacePanel extends LitElement { @property({ attribute: false }) emptyState: WorkspacePanelEmptyState | undefined; @property() tool: QualifiedContributionId = "core:workspace.files"; @property({ attribute: false }) panels: QualifiedWorkspacePanelContribution[] = []; - @property({ attribute: false }) workspaceLabelItems: WorkspaceLabelItem[] = []; @property({ type: Boolean }) hideToolTabs = false; @property({ attribute: false }) onSelectTool: (tool: QualifiedContributionId) => void = () => undefined; @query(".workspace-header-strip") private workspaceHeaderStrip?: HTMLElement | null; @@ -63,10 +61,10 @@ export class WorkspacePanel extends LitElement { const visiblePanels = this.panels; const selectedPanel = visiblePanels.find((panel) => panel.id === this.tool) ?? visiblePanels[0]; return html` -
-
-
- ${this.hideToolTabs ? null : html` + ${this.hideToolTabs ? null : html` +
+
+
${visiblePanels.map((panel) => { const selected = selectedPanel?.id === panel.id; @@ -79,11 +77,10 @@ export class WorkspacePanel extends LitElement { `; })}
- `} - ${renderWorkspaceLabel(workspace.label, this.workspaceLabelItems, workspace.path)} +
-
-
+ + `} ${selectedPanel === undefined ? this.renderEmptyState({ title: "No workspace tools available", body: "No tools are available for this workspace.", diff --git a/src/client/src/components/activityBadge.ts b/src/client/src/components/activityBadge.ts index 8750895..a674f49 100644 --- a/src/client/src/components/activityBadge.ts +++ b/src/client/src/components/activityBadge.ts @@ -6,3 +6,9 @@ export function renderActivityIndicator(kind: ActivityIndicatorKind | undefined, if (kind === undefined) return undefined; return html``; } + +export function renderActionActivityIndicator(kind: ActivityIndicatorKind | undefined, label = "Active"): TemplateResult | undefined { + const indicator = renderActivityIndicator(kind, label); + if (indicator === undefined) return undefined; + return html`${indicator}`; +} diff --git a/src/client/src/components/appShell/AppContextBar.test.ts b/src/client/src/components/appShell/AppContextBar.test.ts new file mode 100644 index 0000000..29badcc --- /dev/null +++ b/src/client/src/components/appShell/AppContextBar.test.ts @@ -0,0 +1,24 @@ +import { describe, expect, it } from "vitest"; +import type { Machine } from "../../api"; +import { shouldShowMachineContext } from "./AppContextBar"; + +describe("shouldShowMachineContext", () => { + it("hides the machine crumb when there is no machine choice", () => { + expect(shouldShowMachineContext([])).toBe(false); + expect(shouldShowMachineContext([machine("local")])).toBe(false); + }); + + it("shows the machine crumb when multiple machines exist", () => { + expect(shouldShowMachineContext([machine("local"), machine("remote-a")])).toBe(true); + }); +}); + +function machine(id: string): Machine { + return { + id, + name: id, + kind: id === "local" ? "local" : "remote", + createdAt: "2026-06-04T00:00:00.000Z", + updatedAt: "2026-06-04T00:00:00.000Z", + }; +} diff --git a/src/client/src/components/appShell/AppContextBar.ts b/src/client/src/components/appShell/AppContextBar.ts index 6a014f7..0b48445 100644 --- a/src/client/src/components/appShell/AppContextBar.ts +++ b/src/client/src/components/appShell/AppContextBar.ts @@ -2,12 +2,11 @@ import { LitElement, css, html } from "lit"; import { customElement, property, query, state } from "lit/decorators.js"; import type { Machine, Project, SessionInfo, Workspace } from "../../api"; import type { NavigationSection } from "../../appShell/navigationState"; -import { renderActivityIndicator, type ActivityIndicatorKind } from "../activityBadge"; @customElement("app-context-bar") export class AppContextBar extends LitElement { + @property({ attribute: false }) machines: Machine[] = []; @property({ attribute: false }) machine?: Machine; - @property({ attribute: false }) machineActivityKind?: ActivityIndicatorKind; @property({ attribute: false }) project?: Project; @property({ attribute: false }) workspace?: Workspace; @property({ attribute: false }) session?: SessionInfo; @@ -38,6 +37,7 @@ export class AppContextBar extends LitElement { } override render() { + const showMachineContext = shouldShowMachineContext(this.machines); const machineLabel = machineContextLabel(this.machine); const projectLabel = projectContextLabel(this.project); const workspaceLabel = workspaceContextLabel(this.workspace); @@ -46,13 +46,14 @@ export class AppContextBar extends LitElement {
- ${shouldShowMachinesSection(this.machines) ? html` + ${this.compact && shouldShowMachinesSection(this.machines) ? html` { this.onToggleMachines?.(); }} .onSelect=${(machine: Machine) => this.onSelectMachine?.(machine)} .onRemove=${(machine: Machine) => this.onRemoveMachine?.(machine)} + .onFocusNextSection=${() => { this.focusNextFrom("machines"); }} + .onCancelKeyboardNavigation=${() => { this.cancelKeyboardNavigation(); }} > ` : null} { this.onToggleProjects?.(); }} .onSelect=${(project: Project) => this.onSelectProject?.(project)} .onClose=${(project: Project) => this.onCloseProject?.(project)} + .onFocusPreviousSection=${() => { this.focusPreviousFrom("projects"); }} + .onFocusNextSection=${() => { this.focusNextFrom("projects"); }} + .onCancelKeyboardNavigation=${() => { this.cancelKeyboardNavigation(); }} > { this.onToggleWorkspaces?.(); }} .onSelect=${(workspace: Workspace) => this.onSelectWorkspace?.(workspace)} .onDelete=${(workspace: Workspace) => this.onDeleteWorkspace?.(workspace)} + .onFocusPreviousSection=${() => { this.focusPreviousFrom("workspaces"); }} + .onFocusNextSection=${() => { this.focusNextFrom("workspaces"); }} + .onCancelKeyboardNavigation=${() => { this.cancelKeyboardNavigation(); }} > { this.onToggleSessions?.(); }} @@ -111,29 +163,59 @@ export class AppNavigationPanel extends LitElement { .onSelect=${(session: SessionInfo) => this.onSelectSession?.(session)} .onArchive=${(session: SessionInfo) => this.onArchiveSession?.(session)} .onArchiveWithDescendants=${(session: SessionInfo) => this.onArchiveSessionWithDescendants?.(session)} + .onArchiveMany=${(sessions: SessionInfo[]) => this.onArchiveSessions?.(sessions)} .onRestore=${(session: SessionInfo) => this.onRestoreSession?.(session)} .onDelete=${(session: SessionInfo) => this.onDeleteCachedNewSession?.(session)} + .onDeleteArchived=${(session: SessionInfo) => this.onDeleteArchivedSession?.(session)} + .onDeleteArchivedMany=${(sessions: SessionInfo[]) => this.onDeleteArchivedSessions?.(sessions)} .onDetachParent=${(session: SessionInfo) => this.onDetachParentSession?.(session)} + .onFocusPreviousSection=${() => { this.focusPreviousFrom("sessions"); }} + .onFocusNextSection=${() => { this.focusNextFrom("sessions"); }} + .onCancelKeyboardNavigation=${() => { this.cancelKeyboardNavigation(); }} > `; } + private async focusNavigableSection(section: KeyboardNavigableSection | undefined): Promise { + if (section === undefined) return false; + return await section.focusSelectedOrFirst(); + } + + private focusPreviousFrom(section: NavigationSection): void { + const target = previousVisibleNavigationTarget(section, this.machines); + if (target !== undefined) void this.onFocusNavigationTarget?.(target); + } + + private focusNextFrom(section: NavigationSection): void { + void this.onFocusNavigationTarget?.(nextVisibleNavigationTarget(section, this.machines)); + } + + private cancelKeyboardNavigation(): void { + void this.onCancelKeyboardNavigation?.(); + } + static override styles = css` :host { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } - :host([collapsible]) { flex: 1 1 auto; } + :host([compact]) { flex: 1 1 auto; } header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid var(--pi-border); } - :host([collapsible]) header { display: none; } - .header-actions { display: flex; align-items: center; gap: 8px; } + header strong { flex: 0 0 auto; } + machine-switcher { flex: 1 1 auto; min-width: 0; } + :host([compact]) header { display: none; } + .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } machine-list, project-list, workspace-list { flex: 0 0 auto; max-height: 26%; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--pi-border-muted); } session-list { flex: 1 1 auto; min-height: 0; overflow: hidden; } - :host([collapsible]) machine-list, - :host([collapsible]) project-list, - :host([collapsible]) workspace-list, - :host([collapsible]) session-list { flex: 1 1 auto; max-height: none; min-height: 0; overflow: hidden; } - :host([collapsible]) machine-list[collapsed], - :host([collapsible]) project-list[collapsed], - :host([collapsible]) workspace-list[collapsed], - :host([collapsible]) session-list[collapsed] { flex: 0 0 auto; min-height: auto; overflow: hidden; } + machine-list[collapsed], + project-list[collapsed], + workspace-list[collapsed], + session-list[collapsed] { flex: 0 0 auto; min-height: auto; overflow: hidden; } + :host([compact]) machine-list, + :host([compact]) project-list, + :host([compact]) workspace-list, + :host([compact]) session-list { flex: 1 1 auto; max-height: none; min-height: 0; overflow: hidden; } + :host([compact]) machine-list[collapsed], + :host([compact]) project-list[collapsed], + :host([compact]) workspace-list[collapsed], + :host([compact]) session-list[collapsed] { flex: 0 0 auto; min-height: auto; overflow: hidden; } button { border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); color: var(--pi-text); padding: 7px 9px; cursor: pointer; } `; } @@ -141,3 +223,17 @@ export class AppNavigationPanel extends LitElement { export function shouldShowMachinesSection(machines: readonly Machine[]): boolean { return machines.length > 1; } + +function previousVisibleNavigationTarget(section: NavigationSection, machines: readonly Machine[]): NavigationSection | undefined { + const sections = visibleNavigationSections(machines); + return sections[sections.indexOf(section) - 1]; +} + +function nextVisibleNavigationTarget(section: NavigationSection, machines: readonly Machine[]): NavigationFocusTarget { + const sections = visibleNavigationSections(machines); + return sections[sections.indexOf(section) + 1] ?? "chat"; +} + +function visibleNavigationSections(machines: readonly Machine[]): NavigationSection[] { + return NAVIGATION_SECTION_ORDER.filter((section) => section !== "machines" || shouldShowMachinesSection(machines)); +} diff --git a/src/client/src/components/appShell/AppPanelEdgeControl.ts b/src/client/src/components/appShell/AppPanelEdgeControl.ts index 2f9594f..b030246 100644 --- a/src/client/src/components/appShell/AppPanelEdgeControl.ts +++ b/src/client/src/components/appShell/AppPanelEdgeControl.ts @@ -1,20 +1,51 @@ -import { LitElement, css, html } from "lit"; +import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators.js"; +import { clampPanelWidth, panelResizeConstraints, panelWidthFromDrag, panelWidthFromKeyboard, type PanelResizeConstraints, type ResizablePanelSide } from "../../appShell/panelResizeController"; -export type PanelEdgeSide = "navigation" | "workspace"; +export type PanelEdgeSide = ResizablePanelSide; + +interface ActivePanelResize { + pointerId: number; + startClientX: number; + startWidth: number; + handle: HTMLElement; + moved: boolean; +} + +const RESIZE_KEYS = new Set(["ArrowLeft", "ArrowRight", "Home", "End"]); +const DOUBLE_TAP_RESET_MS = 420; +const TAP_MOVE_TOLERANCE_PX = 4; @customElement("app-panel-edge-control") export class AppPanelEdgeControl extends LitElement { @property({ reflect: true }) side: PanelEdgeSide = "navigation"; @property({ type: Boolean, reflect: true }) collapsed = false; + @property({ type: Boolean }) resizable = false; + @property({ type: Number }) panelWidth?: number; + @property({ type: Number }) minWidth?: number; + @property({ type: Number }) maxWidth?: number; @property() controls = ""; + @property() resizeLabel = "Resize panel"; @property() expandLabel = "Expand panel"; @property() collapseLabel = "Collapse panel"; @property({ attribute: false }) onToggle?: () => void; + @property({ attribute: false }) onResizeStart?: () => number | undefined; + @property({ attribute: false }) onResize?: (width: number) => void; + @property({ attribute: false }) onResizeEnd?: () => void; + @property({ attribute: false }) onReset?: () => void; + + private activeResize: ActivePanelResize | undefined; + private lastTapAt = 0; + + override disconnectedCallback(): void { + this.finishActiveResize(); + super.disconnectedCallback(); + } override render() { const label = this.collapsed ? this.expandLabel : this.collapseLabel; return html` + ${this.renderResizeHandle()}
+ `; + } + + private resizeAriaValueNow() { + return this.panelWidth === undefined ? nothing : String(Math.round(this.panelWidth)); + } + private renderIcon() { const direction = this.iconDirection(); const path = direction === "left" ? "M15 18l-6-6 6-6" : "M9 18l6-6-6-6"; @@ -38,10 +98,115 @@ export class AppPanelEdgeControl extends LitElement { return this.collapsed ? "left" : "right"; } + private onResizePointerDown(event: PointerEvent): void { + if (!this.resizable || event.button !== 0) return; + const handle = event.currentTarget; + if (!(handle instanceof HTMLElement)) return; + const startWidth = this.resizeStartWidth(); + if (startWidth === undefined) return; + + event.preventDefault(); + event.stopPropagation(); + handle.setPointerCapture(event.pointerId); + this.activeResize = { pointerId: event.pointerId, startClientX: event.clientX, startWidth, handle, moved: false }; + this.toggleAttribute("resizing", true); + } + + private onResizePointerMove(event: PointerEvent): void { + const activeResize = this.activeResize; + if (activeResize?.pointerId !== event.pointerId) return; + event.preventDefault(); + if (Math.abs(event.clientX - activeResize.startClientX) <= TAP_MOVE_TOLERANCE_PX) return; + activeResize.moved = true; + this.commitPanelWidth(panelWidthFromDrag(this.side, activeResize.startWidth, activeResize.startClientX, event.clientX, this.resizeConstraints())); + } + + private onResizePointerUp(event: PointerEvent): void { + const activeResize = this.activeResize; + if (activeResize?.pointerId !== event.pointerId) return; + event.preventDefault(); + this.finishActiveResize(); + if (!activeResize.moved) this.registerTapForReset(); + } + + private onResizePointerCancel(event: PointerEvent): void { + if (this.activeResize?.pointerId !== event.pointerId) return; + this.finishActiveResize(); + } + + private onResizeDoubleClick(event: MouseEvent): void { + event.preventDefault(); + event.stopPropagation(); + this.resetPanelSize(); + } + + private onResizeKeyDown(event: KeyboardEvent): void { + if (!this.resizable || !RESIZE_KEYS.has(event.key)) return; + const currentWidth = this.resizeStartWidth(); + if (currentWidth === undefined) return; + const nextWidth = panelWidthFromKeyboard(this.side, currentWidth, event.key, { largeStep: event.shiftKey, constraints: this.resizeConstraints() }); + if (nextWidth === undefined) return; + + event.preventDefault(); + event.stopPropagation(); + this.commitPanelWidth(nextWidth); + this.onResizeEnd?.(); + } + + private registerTapForReset(): void { + const now = Date.now(); + if (now - this.lastTapAt <= DOUBLE_TAP_RESET_MS) { + this.lastTapAt = 0; + this.resetPanelSize(); + return; + } + this.lastTapAt = now; + } + + private resetPanelSize(): void { + this.finishActiveResize(); + this.onReset?.(); + } + + private resizeStartWidth(): number | undefined { + const width = this.onResizeStart?.() ?? this.panelWidth; + if (width === undefined) return undefined; + return clampPanelWidth(this.side, width, this.resizeConstraints()); + } + + private commitPanelWidth(width: number): void { + this.onResize?.(clampPanelWidth(this.side, width, this.resizeConstraints())); + } + + private finishActiveResize(): void { + const activeResize = this.activeResize; + if (activeResize === undefined) return; + try { + activeResize.handle.releasePointerCapture(activeResize.pointerId); + } catch { + // Pointer capture may already be gone if the browser canceled the drag. + } + this.activeResize = undefined; + this.toggleAttribute("resizing", false); + this.onResizeEnd?.(); + } + + private resizeConstraints(): PanelResizeConstraints { + const defaults = panelResizeConstraints(this.side); + return { + ...defaults, + minWidth: this.minWidth ?? defaults.minWidth, + maxWidth: this.maxWidth ?? defaults.maxWidth, + }; + } + static override styles = css` - :host { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: visible; background: var(--pi-border-muted); z-index: 2; } + :host { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: visible; background: var(--pi-border-muted); z-index: 2; } :host([side="navigation"]) { grid-column: 2; } :host([side="workspace"]) { grid-column: 4; } + .resize-handle { position: absolute; inset: 0 -6px; z-index: 0; cursor: col-resize; touch-action: none; outline: none; } + .resize-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: transparent; transition: width .12s ease, background .12s ease, opacity .12s ease; } + .resize-handle:hover::after, .resize-handle:focus-visible::after, :host([resizing]) .resize-handle::after { width: 3px; background: var(--pi-accent); opacity: .72; } .edge-button { position: relative; z-index: 1; box-sizing: border-box; display: grid; place-items: center; width: 18px; height: 48px; padding: 0; border: 1px solid var(--pi-border-muted); border-radius: 999px; background: var(--pi-bg); color: var(--pi-muted); opacity: .75; cursor: pointer; } .edge-button:hover, .edge-button:focus-visible { color: var(--pi-text); background: var(--pi-surface-hover); opacity: 1; } :host([side="navigation"][collapsed]) .edge-button { transform: translateX(calc(50% - .5px)); } diff --git a/src/client/src/components/appShell/AppRefreshControl.ts b/src/client/src/components/appShell/AppRefreshControl.ts index 90a050d..a37f710 100644 --- a/src/client/src/components/appShell/AppRefreshControl.ts +++ b/src/client/src/components/appShell/AppRefreshControl.ts @@ -1,51 +1,18 @@ import { LitElement, css, html } from "lit"; -import { customElement, property, state } from "lit/decorators.js"; -import { actionMenuPanelStyle } from "../actionMenu"; - -const REFRESH_LONG_PRESS_MS = 550; -const REFRESH_MENU_PORTAL_STYLE_ID = "pi-web-app-refresh-menu-portal-style"; +import { customElement, property } from "lit/decorators.js"; @customElement("app-refresh-control") export class AppRefreshControl extends LitElement { - @property({ type: Boolean }) isRefreshing = false; - @property({ attribute: false }) onRefresh?: () => void | Promise; @property({ attribute: false }) onReload?: () => void; - @state() private menuOpen = false; - private menuStyle = ""; - private menuPortal: HTMLDivElement | undefined; - private longPressTimer: number | undefined; - private suppressNextClick = false; - - override connectedCallback(): void { - super.connectedCallback(); - document.addEventListener("click", this.onDocumentClick); - document.addEventListener("keydown", this.onDocumentKeyDown); - } - - override disconnectedCallback(): void { - document.removeEventListener("click", this.onDocumentClick); - document.removeEventListener("keydown", this.onDocumentKeyDown); - this.clearLongPressTimer(); - this.removePortalMenu(); - super.disconnectedCallback(); - } override render() { - const label = this.isRefreshing ? "Refreshing app data. Long-press for reload options." : "Refresh app data. Long-press for reload options."; + const label = "Full page reload"; return html` `; } @@ -61,114 +28,9 @@ export class AppRefreshControl extends LitElement { `; } - private readonly onRefreshClick = (event: MouseEvent): void => { + private readonly onReloadClick = (event: MouseEvent): void => { event.stopPropagation(); - if (this.suppressNextClick) { - this.suppressNextClick = false; - return; - } - this.refresh(); - }; - - private readonly onRefreshPointerDown = (event: PointerEvent): void => { - if (!event.isPrimary || event.button !== 0) return; - const target = event.currentTarget; - if (!(target instanceof HTMLElement)) return; - this.clearLongPressTimer(); - this.suppressNextClick = false; - this.longPressTimer = window.setTimeout(() => { - this.longPressTimer = undefined; - this.suppressNextClick = true; - this.openMenu(target); - }, REFRESH_LONG_PRESS_MS); - }; - - private readonly onRefreshContextMenu = (event: MouseEvent): void => { - event.preventDefault(); - event.stopPropagation(); - this.clearLongPressTimer(); - this.suppressNextClick = true; - this.openMenu(event.currentTarget); - }; - - private readonly onDocumentClick = (event: MouseEvent): void => { - const path = event.composedPath(); - if (path.includes(this) || (this.menuPortal !== undefined && path.includes(this.menuPortal))) return; - this.closeMenu(); - }; - - private readonly onDocumentKeyDown = (event: KeyboardEvent): void => { - if (event.key !== "Escape" || !this.menuOpen) return; - event.preventDefault(); - event.stopPropagation(); - this.closeMenu(); - }; - - private openMenu(target: EventTarget | null): void { - this.menuStyle = actionMenuPanelStyle(target, { constrainTo: "viewport" }); - this.menuOpen = true; - this.renderPortalMenu(); - } - - private closeMenu(): void { - this.menuOpen = false; - this.suppressNextClick = false; - this.removePortalMenu(); - } - - private refresh(): void { - this.closeMenu(); - void this.onRefresh?.(); - } - - private reload(): void { - this.closeMenu(); this.onReload?.(); - } - - private clearLongPressTimer(): void { - if (this.longPressTimer === undefined) return; - window.clearTimeout(this.longPressTimer); - this.longPressTimer = undefined; - } - - private renderPortalMenu(): void { - const ownerDocument = this.ownerDocument; - ensurePortalMenuStyles(ownerDocument); - - const menu = this.menuPortal ?? ownerDocument.createElement("div"); - this.menuPortal = menu; - menu.className = "pi-web-app-refresh-menu-portal"; - menu.setAttribute("role", "menu"); - menu.setAttribute("style", this.menuStyle); - menu.replaceChildren( - this.createPortalMenuButton("Refresh app data", () => { this.refresh(); }), - this.createPortalMenuButton("Full page reload", () => { this.reload(); }), - ); - menu.addEventListener("click", this.onPortalMenuClick); - if (!menu.isConnected) ownerDocument.body.append(menu); - } - - private createPortalMenuButton(label: string, onClick: () => void): HTMLButtonElement { - const button = this.ownerDocument.createElement("button"); - button.type = "button"; - button.setAttribute("role", "menuitem"); - button.textContent = label; - button.addEventListener("click", (event) => { - event.stopPropagation(); - onClick(); - }); - return button; - } - - private removePortalMenu(): void { - this.menuPortal?.removeEventListener("click", this.onPortalMenuClick); - this.menuPortal?.remove(); - this.menuPortal = undefined; - } - - private readonly onPortalMenuClick = (event: MouseEvent): void => { - event.stopPropagation(); }; static override styles = css` @@ -176,52 +38,5 @@ export class AppRefreshControl extends LitElement { :host, :host * { -webkit-user-select: none; user-select: none; } .app-refresh-button { box-sizing: border-box; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--pi-border); border-radius: 999px; background: var(--pi-surface); color: var(--pi-text); padding: 0; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; } .app-refresh-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } - .app-refresh-button.refreshing .app-refresh-icon { animation: app-refresh-spin .8s linear infinite; } - @keyframes app-refresh-spin { to { transform: rotate(360deg); } } `; } - -function ensurePortalMenuStyles(ownerDocument: Document): void { - if (ownerDocument.getElementById(REFRESH_MENU_PORTAL_STYLE_ID) !== null) return; - const style = ownerDocument.createElement("style"); - style.id = REFRESH_MENU_PORTAL_STYLE_ID; - style.textContent = ` - .pi-web-app-refresh-menu-portal { - position: fixed; - z-index: 2147483647; - box-sizing: border-box; - min-width: min(170px, calc(100vw - 16px)); - overflow: auto; - padding: 4px; - border: 1px solid var(--pi-border); - border-radius: 8px; - background: var(--pi-surface); - color: var(--pi-text); - box-shadow: 0 8px 24px var(--pi-shadow); - overflow-wrap: anywhere; - font: 14px system-ui, sans-serif; - -webkit-touch-callout: none; - -webkit-user-select: none; - user-select: none; - } - .pi-web-app-refresh-menu-portal button { - display: block; - width: 100%; - border: 0; - border-radius: 8px; - background: transparent; - color: var(--pi-text); - padding: 7px 9px; - text-align: left; - white-space: normal; - overflow-wrap: anywhere; - font: inherit; - cursor: pointer; - } - .pi-web-app-refresh-menu-portal button:hover, - .pi-web-app-refresh-menu-portal button:focus { - background: var(--pi-selection-bg); - } - `; - ownerDocument.head.append(style); -} diff --git a/src/client/src/components/navigationFocus.ts b/src/client/src/components/navigationFocus.ts new file mode 100644 index 0000000..6f77c28 --- /dev/null +++ b/src/client/src/components/navigationFocus.ts @@ -0,0 +1,3 @@ +export interface KeyboardNavigableSection { + focusSelectedOrFirst(): boolean | Promise; +} diff --git a/src/client/src/components/selectableRow.test.ts b/src/client/src/components/selectableRow.test.ts index e2973b8..ce63d26 100644 --- a/src/client/src/components/selectableRow.test.ts +++ b/src/client/src/components/selectableRow.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it, vi } from "vitest"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +import { activateSelectableRow, activateSelectableRowFromKeyboard, handleSelectableRowKeyboard } from "./selectableRow"; describe("selectable row activation", () => { it("activates rows from non-interactive click targets", () => { @@ -38,10 +38,30 @@ describe("selectable row activation", () => { expect(action).not.toHaveBeenCalled(); expect(event.preventDefault).not.toHaveBeenCalled(); }); + + it("routes row keyboard navigation to adjacent section callbacks", () => { + const nextSection = vi.fn(); + const event = keyboardEventWithPath("ArrowRight", matchTarget(() => false)); + + expect(handleSelectableRowKeyboard(event, { activate: vi.fn(), nextSection })).toBe(true); + + expect(nextSection).toHaveBeenCalledOnce(); + expect(event.preventDefault).toHaveBeenCalledOnce(); + expect(event.stopPropagation).toHaveBeenCalledOnce(); + }); + + it("routes Escape row keyboard navigation to cancel", () => { + const cancel = vi.fn(); + const event = keyboardEventWithPath("Escape", matchTarget(() => false)); + + expect(handleSelectableRowKeyboard(event, { activate: vi.fn(), cancel })).toBe(true); + + expect(cancel).toHaveBeenCalledOnce(); + }); }); type EventWithPath = Pick; -type KeyboardEventWithPath = EventWithPath & Pick; +type KeyboardEventWithPath = EventWithPath & Pick; type MatchTarget = EventTarget & Pick; function matchTarget(matches: Element["matches"]): MatchTarget { @@ -53,5 +73,5 @@ function eventWithPath(target: MatchTarget): EventWithPath { } function keyboardEventWithPath(key: string, target: MatchTarget): KeyboardEventWithPath { - return { key, preventDefault: vi.fn<() => void>(), composedPath: () => [target] }; + return { key, preventDefault: vi.fn<() => void>(), stopPropagation: vi.fn<() => void>(), composedPath: () => [target] }; } diff --git a/src/client/src/components/selectableRow.ts b/src/client/src/components/selectableRow.ts index 7847ab8..1bda886 100644 --- a/src/client/src/components/selectableRow.ts +++ b/src/client/src/components/selectableRow.ts @@ -12,6 +12,14 @@ const interactiveSelector = [ type ComposedPathEvent = Pick; type SelectableKeyboardEvent = ComposedPathEvent & Pick; +type SelectableNavigationKeyboardEvent = SelectableKeyboardEvent & Partial>; + +export interface SelectableRowKeyboardOptions { + activate: () => void; + previousSection?: (() => void) | undefined; + nextSection?: (() => void) | undefined; + cancel?: (() => void) | undefined; +} export function isFromInteractiveElement(event: ComposedPathEvent): boolean { return event.composedPath().some((target) => targetMatches(target, interactiveSelector)); @@ -35,3 +43,74 @@ export function activateSelectableRowFromKeyboard(event: SelectableKeyboardEvent event.preventDefault(); action(); } + +export function handleSelectableRowKeyboard(event: SelectableNavigationKeyboardEvent, options: SelectableRowKeyboardOptions): boolean { + if (isFromInteractiveElement(event)) return false; + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + options.activate(); + return true; + } + if (event.key === "ArrowUp") return handleRowFocusKey(event, () => { focusRelativeSelectableRow(event.currentTarget, -1); }); + if (event.key === "ArrowDown") return handleRowFocusKey(event, () => { focusRelativeSelectableRow(event.currentTarget, 1); }); + if (event.key === "Home") return handleRowFocusKey(event, () => { focusIndexedSelectableRow(event.currentTarget, 0); }); + if (event.key === "End") return handleRowFocusKey(event, () => { focusIndexedSelectableRow(event.currentTarget, -1); }); + if (event.key === "ArrowLeft" && options.previousSection !== undefined) return handleRowFocusKey(event, options.previousSection); + if (event.key === "ArrowRight" && options.nextSection !== undefined) return handleRowFocusKey(event, options.nextSection); + if (event.key === "Escape" && options.cancel !== undefined) return handleRowFocusKey(event, options.cancel); + return false; +} + +export function focusSelectedOrFirstSelectableRow(root: ParentNode, options: { fallbackSelector?: string | undefined } = {}): boolean { + const target = root.querySelector(".action-row.selected") + ?? root.querySelector(".action-row") + ?? (options.fallbackSelector === undefined ? undefined : root.querySelector(options.fallbackSelector)); + if (target === undefined || target === null) return false; + target.focus(); + target.scrollIntoView({ block: "nearest" }); + return true; +} + +function handleRowFocusKey(event: SelectableNavigationKeyboardEvent, action: () => void): true { + event.preventDefault(); + event.stopPropagation?.(); + action(); + return true; +} + +function focusRelativeSelectableRow(target: EventTarget | null | undefined, delta: number): void { + const rows = selectableRowsForTarget(target); + const current = currentSelectableRow(target); + if (current === undefined || rows.length === 0) return; + const index = rows.indexOf(current); + if (index < 0) return; + focusSelectableRowAt(rows, index + delta); +} + +function focusIndexedSelectableRow(target: EventTarget | null | undefined, index: number): void { + const rows = selectableRowsForTarget(target); + if (rows.length === 0) return; + focusSelectableRowAt(rows, index < 0 ? rows.length - 1 : index); +} + +function focusSelectableRowAt(rows: HTMLElement[], index: number): void { + const target = rows[Math.min(Math.max(index, 0), rows.length - 1)]; + target?.focus(); + target?.scrollIntoView({ block: "nearest" }); +} + +function selectableRowsForTarget(target: EventTarget | null | undefined): HTMLElement[] { + const root = currentSelectableRow(target)?.getRootNode(); + if (root === undefined || !isSelectableRowRoot(root)) return []; + return Array.from(root.querySelectorAll(".action-row")); +} + +function isSelectableRowRoot(root: Node): root is Document | DocumentFragment { + return (typeof Document !== "undefined" && root instanceof Document) + || (typeof DocumentFragment !== "undefined" && root instanceof DocumentFragment); +} + +function currentSelectableRow(target: EventTarget | null | undefined): HTMLElement | undefined { + if (typeof HTMLElement === "undefined" || !(target instanceof HTMLElement)) return undefined; + return target.closest(".action-row") ?? undefined; +} diff --git a/src/client/src/components/settings/SettingsPluginsPanel.ts b/src/client/src/components/settings/SettingsPluginsPanel.ts index 3d5d6b1..c6930bb 100644 --- a/src/client/src/components/settings/SettingsPluginsPanel.ts +++ b/src/client/src/components/settings/SettingsPluginsPanel.ts @@ -46,7 +46,7 @@ export class SettingsPluginsPanel extends LitElement {
${plugin.id} - ${plugin.source} · ${plugin.scope} + ${plugin.source} · ${plugin.scope}${plugin.machineSpecific ? " · machine-specific" : ""} ${configuredState}