From 82ba2e0490b709e65c1c63a86a416b8c940a5d8a Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 10:59:01 +0200 Subject: [PATCH 01/28] fix: validate prompt API payloads Fixes #11 --- .changeset/guard-missing-prompt-text.md | 5 ++ src/server/sessions/piSessionService.test.ts | 14 +++++ src/server/sessions/piSessionService.ts | 25 ++++++-- .../sessions/sessionNameGenerator.test.ts | 4 ++ src/server/sessions/sessionNameGenerator.ts | 4 +- src/server/sessions/sessionRoutes.test.ts | 58 +++++++++++++++++++ src/server/sessions/sessionRoutes.ts | 9 ++- 7 files changed, 110 insertions(+), 9 deletions(-) create mode 100644 .changeset/guard-missing-prompt-text.md create mode 100644 src/server/sessions/sessionRoutes.test.ts diff --git a/.changeset/guard-missing-prompt-text.md b/.changeset/guard-missing-prompt-text.md new file mode 100644 index 0000000..c094f79 --- /dev/null +++ b/.changeset/guard-missing-prompt-text.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Prevent malformed session prompt API calls from crashing the session daemon. diff --git a/src/server/sessions/piSessionService.test.ts b/src/server/sessions/piSessionService.test.ts index eb23fc1..f04535e 100644 --- a/src/server/sessions/piSessionService.test.ts +++ b/src/server/sessions/piSessionService.test.ts @@ -366,6 +366,20 @@ describe("PiSessionService", () => { await service.dispose(); }); + it("rejects malformed prompt text before opening the runtime", async () => { + const fake = fakeRuntime("prompt-session"); + const service = new PiSessionService(new CapturingSessionEventHub(), { + createAgentRuntime: runtimeCreator(fake.runtime), + sessionManager: sessionGateway([sessionRecord("prompt-session")]), + heartbeatIntervalMs: 60_000, + }); + + await expect(service.prompt("prompt-session", undefined)).rejects.toThrow("Prompt text is required"); + + expect(fake.calls.prompt).toEqual([]); + await service.dispose(); + }); + it("includes queued message details in session status", async () => { const fake = fakeRuntime("status-session", { messages: [{ role: "user", content: "hello" }, { role: "assistant", content: "hi" }], diff --git a/src/server/sessions/piSessionService.ts b/src/server/sessions/piSessionService.ts index cdb29ed..26b6df8 100644 --- a/src/server/sessions/piSessionService.ts +++ b/src/server/sessions/piSessionService.ts @@ -41,6 +41,17 @@ interface QueuedPrompt { text: string; } +function requirePromptText(value: unknown): string { + if (typeof value !== "string") throw new Error("Prompt text is required"); + return value; +} + +function parsePromptStreamingBehavior(value: unknown): QueuedPromptKind | undefined { + if (value === undefined) return undefined; + if (value === "steer" || value === "followUp") return value; + throw new Error('Prompt streamingBehavior must be "steer" or "followUp"'); +} + type SessionArchiveRepository = Pick; interface PiSessionListEntry { id: string; @@ -360,22 +371,24 @@ export class PiSessionService { return commands.sort((a, b) => a.name.localeCompare(b.name)); } - async prompt(sessionId: string, text: string, streamingBehavior?: "steer" | "followUp"): Promise { + async prompt(sessionId: string, text: unknown, streamingBehavior?: unknown): Promise { + const promptText = requirePromptText(text); + const requestedBehavior = parsePromptStreamingBehavior(streamingBehavior); await this.assertWritable(sessionId); const session = await this.getOrOpen(sessionId); - this.maybeGenerateSessionName(session, text); + this.maybeGenerateSessionName(session, promptText); const isQueued = session.isStreaming || session.isCompacting; - const behavior = isQueued ? streamingBehavior ?? "followUp" : undefined; - if (isQueued && this.hasQueuedMessageText(session, text)) { + const behavior = isQueued ? requestedBehavior ?? "followUp" : undefined; + if (isQueued && this.hasQueuedMessageText(session, promptText)) { this.publishActivity(session, "duplicate queued message ignored", "active"); this.publishStatus(session); return; } if (session.isCompacting) { - this.enqueuePromptDuringCompaction(session, text, behavior ?? "followUp"); + this.enqueuePromptDuringCompaction(session, promptText, behavior ?? "followUp"); return; } - void this.submitPrompt(session, text, behavior); + void this.submitPrompt(session, promptText, behavior); } private submitPrompt(session: PiAgentSession, text: string, behavior: QueuedPromptKind | undefined): Promise { diff --git a/src/server/sessions/sessionNameGenerator.test.ts b/src/server/sessions/sessionNameGenerator.test.ts index be26d68..5a93d50 100644 --- a/src/server/sessions/sessionNameGenerator.test.ts +++ b/src/server/sessions/sessionNameGenerator.test.ts @@ -15,4 +15,8 @@ describe("sessionNameGenerator", () => { expect(fallbackSessionName('\nDo x\n\n\nCheck the UI now')) .toBe("Check the UI now"); }); + + it("skips fallback names when the first request is missing", () => { + expect(fallbackSessionName(undefined)).toBeUndefined(); + }); }); diff --git a/src/server/sessions/sessionNameGenerator.ts b/src/server/sessions/sessionNameGenerator.ts index 0c5ed07..d214ea3 100644 --- a/src/server/sessions/sessionNameGenerator.ts +++ b/src/server/sessions/sessionNameGenerator.ts @@ -43,7 +43,9 @@ export async function generateShortSessionName(modelRegistry: return cleanSessionName(finalMessage === undefined ? streamedText : textFromAssistant(finalMessage)); } -export function fallbackSessionName(firstMessage: string): string | undefined { +export function fallbackSessionName(firstMessage: unknown): string | undefined { + if (typeof firstMessage !== "string") return undefined; + return cleanSessionName(firstMessage .replace(/[\s\S]*?<\/skill>/g, "") .replace(/```[\s\S]*?```/g, " ") diff --git a/src/server/sessions/sessionRoutes.test.ts b/src/server/sessions/sessionRoutes.test.ts new file mode 100644 index 0000000..4e9c438 --- /dev/null +++ b/src/server/sessions/sessionRoutes.test.ts @@ -0,0 +1,58 @@ +import Fastify, { type FastifyInstance } from "fastify"; +import fastifyWebsocket from "@fastify/websocket"; +import { afterEach, beforeEach, describe, expect, it } from "vitest"; +import { SessionEventHub } from "../realtime/sessionEventHub.js"; +import { PiSessionService, type PiSessionManagerGateway } from "./piSessionService.js"; +import { registerSessionRoutes } from "./sessionRoutes.js"; + +let app: FastifyInstance; +let service: PiSessionService; +let sessionManager: RejectingSessionManager; + +beforeEach(async () => { + app = Fastify({ logger: false }); + await app.register(fastifyWebsocket); + sessionManager = new RejectingSessionManager(); + const eventHub = new SessionEventHub(); + service = new PiSessionService(eventHub, { sessionManager, heartbeatIntervalMs: 60_000 }); + registerSessionRoutes(app, service, eventHub); +}); + +afterEach(async () => { + await service.dispose(); + await app.close(); +}); + +describe("session routes", () => { + it("rejects prompt payloads that omit text without opening a session", async () => { + const response = await app.inject({ method: "POST", url: "/sessions/session-1/prompt", payload: { body: "Build the thing" } }); + + expect(response.statusCode).toBe(400); + expect(response.json()).toEqual({ error: "Prompt text is required" }); + expect(sessionManager.calls).toEqual({ create: 0, list: 0, listAll: 0, open: 0 }); + }); +}); + +class RejectingSessionManager implements PiSessionManagerGateway { + readonly calls = { create: 0, list: 0, listAll: 0, open: 0 }; + + list() { + this.calls.list += 1; + return Promise.resolve([]); + } + + create(): never { + this.calls.create += 1; + throw new Error("Session manager should not create sessions for invalid prompt payloads"); + } + + listAll() { + this.calls.listAll += 1; + return Promise.resolve([]); + } + + open(): never { + this.calls.open += 1; + throw new Error("Session manager should not open sessions for invalid prompt payloads"); + } +} diff --git a/src/server/sessions/sessionRoutes.ts b/src/server/sessions/sessionRoutes.ts index 4de5b55..5fa9aab 100644 --- a/src/server/sessions/sessionRoutes.ts +++ b/src/server/sessions/sessionRoutes.ts @@ -2,6 +2,11 @@ import type { FastifyInstance } from "fastify"; import type { SessionEventHub } from "../realtime/sessionEventHub.js"; import type { PiSessionService } from "./piSessionService.js"; +interface PromptRequestBody { + text?: unknown; + streamingBehavior?: unknown; +} + export function registerSessionRoutes(app: FastifyInstance, sessions: PiSessionService, eventHub: SessionEventHub, prefix = ""): void { app.get<{ Querystring: { cwd?: string } }>(`${prefix}/sessions`, async (request, reply) => { if (request.query.cwd === undefined || request.query.cwd === "") return reply.code(400).send({ error: "cwd query parameter is required" }); @@ -89,9 +94,9 @@ export function registerSessionRoutes(app: FastifyInstance, sessions: PiSessionS } }); - app.post<{ Params: { sessionId: string }; Body: { text: string; streamingBehavior?: "steer" | "followUp" } }>(`${prefix}/sessions/:sessionId/prompt`, async (request, reply) => { + app.post<{ Params: { sessionId: string }; Body: PromptRequestBody | undefined }>(`${prefix}/sessions/:sessionId/prompt`, async (request, reply) => { try { - await sessions.prompt(request.params.sessionId, request.body.text, request.body.streamingBehavior); + await sessions.prompt(request.params.sessionId, request.body?.text, request.body?.streamingBehavior); return { accepted: true }; } catch (error) { return reply.code(400).send({ error: error instanceof Error ? error.message : String(error) }); From 0d9d1242373da9a7362f23d8964a7f7433fa56f4 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 14:26:35 +0200 Subject: [PATCH 02/28] fix(plugins): preserve deprecated panel terminal alias --- .changeset/remove-panel-open-terminal.md | 2 +- docs/plugins.md | 8 +++++--- src/client/src/components/PiWebApp.ts | 1 + src/client/src/plugins/types.ts | 5 +++++ src/plugin-api.ts | 1 - 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/.changeset/remove-panel-open-terminal.md b/.changeset/remove-panel-open-terminal.md index f989483..00a8f80 100644 --- a/.changeset/remove-panel-open-terminal.md +++ b/.changeset/remove-panel-open-terminal.md @@ -2,4 +2,4 @@ "@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()`. +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()`. diff --git a/docs/plugins.md b/docs/plugins.md index 66570fd..2e8ab53 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -182,7 +182,7 @@ 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: @@ -197,8 +197,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: @@ -534,6 +534,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 diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 5e6c925..4bc238c 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -943,6 +943,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, diff --git a/src/client/src/plugins/types.ts b/src/client/src/plugins/types.ts index 4290865..23cde24 100644 --- a/src/client/src/plugins/types.ts +++ b/src/client/src/plugins/types.ts @@ -131,6 +131,11 @@ export interface QualifiedPluginAction extends AppAction { export interface WorkspacePanelContext extends WorkspaceContext { terminal: WorkspacePanelTerminal; + /** + * @deprecated Runtime-only compatibility alias for pre-v2 plugins. Use `terminal.open()` instead. + * This is intentionally not part of the public `@jmfederico/pi-web/plugin-api` declarations. + */ + openTerminal?: (options?: { terminalId?: string | undefined }) => void; piWebUnstable?: Pick; fileTree: FileTreeEntry[]; expandedDirs: Record; diff --git a/src/plugin-api.ts b/src/plugin-api.ts index d7285a5..971e46c 100644 --- a/src/plugin-api.ts +++ b/src/plugin-api.ts @@ -212,4 +212,3 @@ export interface ThemePairContribution { light: LocalContributionId; dark: LocalContributionId; } - From f2d211da9c215f3f45ff415d4ff5dd93720ba3b3 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 14:32:41 +0200 Subject: [PATCH 03/28] fix(plugins): harden remote plugin asset proxy --- .changeset/harden-remote-plugin-assets.md | 5 ++ src/server/app.test.ts | 39 +++++++++++ .../machines/machinePluginProxyRoutes.ts | 64 ++++++++++++++----- 3 files changed, 93 insertions(+), 15 deletions(-) create mode 100644 .changeset/harden-remote-plugin-assets.md diff --git a/.changeset/harden-remote-plugin-assets.md b/.changeset/harden-remote-plugin-assets.md new file mode 100644 index 0000000..62797c2 --- /dev/null +++ b/.changeset/harden-remote-plugin-assets.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Harden remote machine plugin asset proxying so plugin asset URLs cannot escape the remote plugin directory. diff --git a/src/server/app.test.ts b/src/server/app.test.ts index 9113b5a..aebed93 100644 --- a/src/server/app.test.ts +++ b/src/server/app.test.ts @@ -343,6 +343,45 @@ describe("buildApp", () => { expect(request).toHaveBeenCalledWith("GET", "/pi-web-plugins/remote-tools/pi-web-plugin.js?v=123"); }); + it("drops unsafe remote machine plugin manifest modules", async () => { + const addResponse = await app.inject({ method: "POST", url: "/api/machines", payload: { name: "Remote", baseUrl: "https://remote.example.test/" } }); + const remote = addResponse.json<{ id: string }>(); + remoteClient = fakeRemoteClient({ + requestJson: vi.fn(() => Promise.resolve({ + statusCode: 200, + headers: { "content-type": "application/json" }, + body: { + plugins: [ + { id: "safe-tools", module: "nested/pi-web-plugin.js?v=1", source: "local", scope: "local" }, + { id: "traversal-tools", module: "..%2F..%2Fapi%2Fconfig", source: "local", scope: "local" }, + { id: "wrong-root", module: "/pi-web-plugins/other/pi-web-plugin.js", source: "local", scope: "local" }, + ], + }, + })), + }); + + const manifestResponse = await app.inject({ method: "GET", url: `/api/machines/${remote.id}/pi-web-plugins/manifest.json` }); + + expect(manifestResponse.statusCode).toBe(200); + expect(manifestResponse.json()).toEqual({ + plugins: [{ id: "safe-tools", module: `/pi-web-plugins/${machineScopedPluginId(remote.id, "safe-tools")}/nested/pi-web-plugin.js?v=1`, source: "local", scope: "local" }], + }); + }); + + it("rejects remote machine plugin asset traversal before proxying", async () => { + const addResponse = await app.inject({ method: "POST", url: "/api/machines", payload: { name: "Remote", baseUrl: "https://remote.example.test/" } }); + const remote = addResponse.json<{ id: string }>(); + const request = vi.fn(() => Promise.resolve({ statusCode: 200, headers: {}, body: Readable.from([]) })); + remoteClient = fakeRemoteClient({ request }); + const scopedPluginId = machineScopedPluginId(remote.id, "remote-tools"); + + const response = await app.inject({ method: "GET", url: `/pi-web-plugins/${scopedPluginId}/..%2F..%2Fapi%2Fconfig` }); + + expect(response.statusCode).toBe(400); + expect(response.json()).toEqual({ error: "Invalid remote PI WEB plugin asset path" }); + expect(request).not.toHaveBeenCalled(); + }); + it("returns stable errors for invalid project requests", async () => { const addResponse = await app.inject({ method: "POST", diff --git a/src/server/machines/machinePluginProxyRoutes.ts b/src/server/machines/machinePluginProxyRoutes.ts index 20b37ee..65856b2 100644 --- a/src/server/machines/machinePluginProxyRoutes.ts +++ b/src/server/machines/machinePluginProxyRoutes.ts @@ -59,8 +59,14 @@ export async function proxyMachinePluginAsset(machines: MachinePluginProxyMachin return true; } + const requestPath = remotePluginAssetRequestPath(remotePlugin, assetPath, requestUrl); + if (requestPath === undefined) { + await reply.code(400).send({ error: "Invalid remote PI WEB plugin asset path" }); + return true; + } + try { - const upstream = await client.request("GET", remotePluginAssetRequestPath(remotePlugin, assetPath, requestUrl)); + const upstream = await client.request("GET", requestPath); reply.code(upstream.statusCode); applySafeHeaders(reply, upstream.headers); if (upstream.body === undefined) await reply.send(); @@ -87,29 +93,57 @@ function rewriteRemotePluginManifest(machineId: string, manifest: RemotePluginMa function remotePluginModulePath(pluginId: string, module: string): { path: string; query: string } | undefined { if (!isPiWebPluginId(pluginId)) return undefined; + const prefix = `/pi-web-plugins/${encodeURIComponent(pluginId)}/`; + const base = new URL(prefix, "http://pi-web.local"); try { - const url = new URL(module, "http://pi-web.local"); - const prefix = `/pi-web-plugins/${encodeURIComponent(pluginId)}/`; - if (url.pathname.startsWith(prefix)) { - return { path: url.pathname.slice(prefix.length), query: url.search }; - } - if (!module.startsWith("/") && !/^https?:\/\//iu.test(module)) { - const [path, query = ""] = module.split("?", 2); - if (path !== undefined && path !== "") return { path, query: query === "" ? "" : `?${query}` }; - } + const url = new URL(module, base); + if (url.origin !== base.origin || !url.pathname.startsWith(prefix)) return undefined; + const path = safeRemotePluginAssetPath(url.pathname.slice(prefix.length)); + return path === undefined ? undefined : { path, query: url.search }; } catch { return undefined; } - return undefined; } -function remotePluginAssetRequestPath(remotePlugin: MachineScopedPluginIdParts, assetPath: string, requestUrl: string): string { +function remotePluginAssetRequestPath(remotePlugin: MachineScopedPluginIdParts, assetPath: string, requestUrl: string): string | undefined { + const path = safeRemotePluginAssetPath(assetPath); + if (path === undefined) return undefined; const query = requestUrl.includes("?") ? requestUrl.slice(requestUrl.indexOf("?")) : ""; - return `/pi-web-plugins/${encodeURIComponent(remotePlugin.pluginId)}/${encodePathSegments(assetPath)}${query}`; + return `/pi-web-plugins/${encodeURIComponent(remotePlugin.pluginId)}/${path}${query}`; } -function encodePathSegments(path: string): string { - return path.split("/").map((segment) => encodeURIComponent(segment)).join("/"); +function safeRemotePluginAssetPath(path: string): string | undefined { + const segments: string[] = []; + for (const rawSegment of path.split("/")) { + const segment = safeRemotePluginAssetPathSegment(rawSegment); + if (segment === undefined) return undefined; + if (segment === "") continue; + segments.push(segment); + } + if (segments.length === 0) return undefined; + return segments.map((segment) => encodeURIComponent(segment)).join("/"); +} + +function safeRemotePluginAssetPathSegment(rawSegment: string): string | undefined { + if (rawSegment === "" || rawSegment === ".") return ""; + if (/%(?:2f|5c)/iu.test(rawSegment)) return undefined; + let segment: string; + try { + segment = decodeURIComponent(rawSegment); + } catch { + return undefined; + } + if (segment === "" || segment === ".") return ""; + if (segment === ".." || segment.includes("/") || segment.includes("\\") || hasControlCharacter(segment)) return undefined; + return segment; +} + +function hasControlCharacter(value: string): boolean { + for (let index = 0; index < value.length; index += 1) { + const code = value.charCodeAt(index); + if (code <= 0x1f || code === 0x7f) return true; + } + return false; } function parseRemoteManifest(value: unknown): RemotePluginManifest { From 73218be5166ec21ee932c6ec0734a9bb44b08318 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 15:41:53 +0200 Subject: [PATCH 04/28] chore(release): v1.202606.1 --- .changeset/add-machine-dialog.md | 5 --- .changeset/built-in-plugin-docs.md | 5 --- ...close-workspace-terminals-before-delete.md | 5 --- .changeset/fix-workspace-api-reference.md | 5 --- .changeset/guard-missing-prompt-text.md | 5 --- .changeset/harden-remote-plugin-assets.md | 5 --- .changeset/hide-single-machine-navigation.md | 5 --- .changeset/machine-activity-indicators.md | 5 --- .changeset/machine-scoped-local-apis.md | 5 --- .changeset/mobile-actions-button.md | 5 --- .changeset/mobile-tab-icons.md | 5 --- .changeset/offline-remote-fallback.md | 5 --- .changeset/permanent-tab-icons.md | 5 --- .changeset/persist-tab-navigation-memory.md | 5 --- .changeset/plugin-disable-config.md | 5 --- .changeset/plugin-public-context-helpers.md | 5 --- .changeset/pwa-refresh-menu.md | 5 --- .changeset/remember-machine-navigation.md | 5 --- .changeset/remote-machine-federation.md | 5 --- .changeset/remote-machine-plugins.md | 5 --- .changeset/remove-panel-open-terminal.md | 5 --- .changeset/settings-config-ui.md | 5 --- .changeset/shortcut-config-foundation.md | 5 --- .changeset/synthesized-local-machines.md | 5 --- .changeset/updates-plugin-rename.md | 5 --- .changeset/workspace-label-file-context.md | 5 --- .changeset/workspace-tasks-click-feedback.md | 5 --- .changeset/workspace-tasks-rename.md | 5 --- CHANGELOG.md | 32 +++++++++++++++++++ package-lock.json | 4 +-- package.json | 2 +- 31 files changed, 35 insertions(+), 143 deletions(-) delete mode 100644 .changeset/add-machine-dialog.md delete mode 100644 .changeset/built-in-plugin-docs.md delete mode 100644 .changeset/close-workspace-terminals-before-delete.md delete mode 100644 .changeset/fix-workspace-api-reference.md delete mode 100644 .changeset/guard-missing-prompt-text.md delete mode 100644 .changeset/harden-remote-plugin-assets.md delete mode 100644 .changeset/hide-single-machine-navigation.md delete mode 100644 .changeset/machine-activity-indicators.md delete mode 100644 .changeset/machine-scoped-local-apis.md delete mode 100644 .changeset/mobile-actions-button.md delete mode 100644 .changeset/mobile-tab-icons.md delete mode 100644 .changeset/offline-remote-fallback.md delete mode 100644 .changeset/permanent-tab-icons.md delete mode 100644 .changeset/persist-tab-navigation-memory.md delete mode 100644 .changeset/plugin-disable-config.md delete mode 100644 .changeset/plugin-public-context-helpers.md delete mode 100644 .changeset/pwa-refresh-menu.md delete mode 100644 .changeset/remember-machine-navigation.md delete mode 100644 .changeset/remote-machine-federation.md delete mode 100644 .changeset/remote-machine-plugins.md delete mode 100644 .changeset/remove-panel-open-terminal.md delete mode 100644 .changeset/settings-config-ui.md delete mode 100644 .changeset/shortcut-config-foundation.md delete mode 100644 .changeset/synthesized-local-machines.md delete mode 100644 .changeset/updates-plugin-rename.md delete mode 100644 .changeset/workspace-label-file-context.md delete mode 100644 .changeset/workspace-tasks-click-feedback.md delete mode 100644 .changeset/workspace-tasks-rename.md 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/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/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/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/guard-missing-prompt-text.md b/.changeset/guard-missing-prompt-text.md deleted file mode 100644 index c094f79..0000000 --- a/.changeset/guard-missing-prompt-text.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Prevent malformed session prompt API calls from crashing the session daemon. diff --git a/.changeset/harden-remote-plugin-assets.md b/.changeset/harden-remote-plugin-assets.md deleted file mode 100644 index 62797c2..0000000 --- a/.changeset/harden-remote-plugin-assets.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@jmfederico/pi-web": patch ---- - -Harden remote machine plugin asset proxying so plugin asset URLs cannot escape the remote plugin directory. 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/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/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-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/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 00a8f80..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 moving render invalidation to `context.host.requestRender()` and deprecating the legacy runtime-only `openTerminal` alias in favor of `context.terminal.open()`. 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/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/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/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", From b35ce1d3e039663d02e2d668b802649a49443339 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 20:26:12 +0200 Subject: [PATCH 05/28] fix: reduce repeated workspace context --- .changeset/lean-workspace-context.md | 5 +++++ src/client/src/components/PiWebApp.ts | 4 +--- src/client/src/components/StatusBar.ts | 7 +------ src/client/src/components/WorkspacePanel.ts | 19 ++++++++----------- src/client/src/components/shared.ts | 10 +--------- 5 files changed, 16 insertions(+), 29 deletions(-) create mode 100644 .changeset/lean-workspace-context.md diff --git a/.changeset/lean-workspace-context.md b/.changeset/lean-workspace-context.md new file mode 100644 index 0000000..4542b43 --- /dev/null +++ b/.changeset/lean-workspace-context.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Reduce repeated workspace details in the chat status bar and workspace tool header so workspace context stays in the workspace chip. diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 4bc238c..d8c0efc 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -726,7 +726,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); }} > `; @@ -1384,7 +1382,7 @@ export class PiWebApp extends LitElement { ${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} diff --git a/src/client/src/components/StatusBar.ts b/src/client/src/components/StatusBar.ts index 72666e1..3fa605b 100644 --- a/src/client/src/components/StatusBar.ts +++ b/src/client/src/components/StatusBar.ts @@ -1,17 +1,13 @@ 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 { Machine, 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; @@ -26,7 +22,6 @@ export class StatusBar extends LitElement { return html`
${this.machine?.name ?? "Local"} - ${renderWorkspaceLabel(this.workspace?.label ?? "workspace", this.workspaceLabelItems, this.workspace?.path)} ↑${formatTokenCount(tokens.input)} ↓${formatTokenCount(tokens.output)} ${contextText} 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/shared.ts b/src/client/src/components/shared.ts index e4a4ee1..8aeca75 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -186,10 +186,7 @@ export const workspacePanelStyles = css` .empty-state h2 { margin: 0; color: var(--pi-text); font-size: 15px; line-height: 1.3; } .empty-state p { margin: 0; line-height: 1.45; } small, .muted { color: var(--pi-muted); } - header small { flex: 0 0 auto; min-width: max-content; overflow: visible; text-overflow: clip; white-space: nowrap; } - header .workspace-label { width: max-content; max-width: none; overflow: visible; } - header .workspace-label-base, header .workspace-label-item, header .workspace-label-render { overflow: visible; text-overflow: clip; } - @media (max-width: 1180px) { .tabs { display: none; } } + @media (max-width: 1180px) { header { display: none; } } .workspace-label { min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; overflow: hidden; white-space: nowrap; } .workspace-label-base, .workspace-label-item, .workspace-label-render { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .workspace-label-item, .workspace-label-render, .workspace-label-separator { color: var(--pi-muted); } @@ -395,11 +392,6 @@ export const statusBarStyles = css` :host { display: block; color: var(--pi-muted); font: 12px system-ui, sans-serif; } .bar { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 7px 12px; border-top: 1px solid var(--pi-border); background: var(--pi-bg); white-space: nowrap; overflow: hidden; } span { overflow: hidden; text-overflow: ellipsis; } - .workspace-label { min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; overflow: hidden; white-space: nowrap; } - .workspace-label-base, .workspace-label-item, .workspace-label-render { min-width: 0; overflow: hidden; text-overflow: ellipsis; } - .workspace-label-item, .workspace-label-render, .workspace-label-separator { color: var(--pi-muted); } - .workspace-label-link { color: var(--pi-accent); text-decoration: none; } - .workspace-label-link:hover, .workspace-label-link:focus { text-decoration: underline; } .bar > span:first-child { flex: 1 1 auto; min-width: 80px; } .activity { display: inline-flex; align-items: center; gap: 6px; color: var(--pi-muted); } .activity.active { color: var(--pi-success); } From 98cdc29208cd413c48172659df8bd6ded391070a Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 20:33:58 +0200 Subject: [PATCH 06/28] fix: streamline status bar context --- .changeset/lean-workspace-context.md | 2 +- src/client/src/components/PiWebApp.ts | 2 +- src/client/src/components/StatusBar.ts | 6 ++---- src/client/src/components/shared.ts | 4 ++-- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/.changeset/lean-workspace-context.md b/.changeset/lean-workspace-context.md index 4542b43..43e4a76 100644 --- a/.changeset/lean-workspace-context.md +++ b/.changeset/lean-workspace-context.md @@ -2,4 +2,4 @@ "@jmfederico/pi-web": patch --- -Reduce repeated workspace details in the chat status bar and workspace tool header so workspace context stays in the workspace chip. +Reduce repeated machine and workspace details in the chat status bar and workspace tool header so context stays in the location chips. diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index d8c0efc..99d22ee 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -1382,7 +1382,7 @@ export class PiWebApp extends LitElement { ${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} diff --git a/src/client/src/components/StatusBar.ts b/src/client/src/components/StatusBar.ts index 3fa605b..2fc2afb 100644 --- a/src/client/src/components/StatusBar.ts +++ b/src/client/src/components/StatusBar.ts @@ -1,13 +1,12 @@ import { LitElement, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import type { Machine, SessionStatus } from "../api"; +import type { SessionStatus } from "../api"; import { formatCost, formatTokenCount } from "../utils/format"; import { statusBarStyles } from "./shared"; @customElement("status-bar") export class StatusBar extends LitElement { @property({ attribute: false }) status?: SessionStatus; - @property({ attribute: false }) machine?: Machine; override render() { const status = this.status; @@ -21,10 +20,9 @@ export class StatusBar extends LitElement { const tokens = status.tokens; return html`
- ${this.machine?.name ?? "Local"} ↑${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/shared.ts b/src/client/src/components/shared.ts index 8aeca75..1202696 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -391,8 +391,8 @@ export const formattedTextStyles = css` export const statusBarStyles = css` :host { display: block; color: var(--pi-muted); font: 12px system-ui, sans-serif; } .bar { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 7px 12px; border-top: 1px solid var(--pi-border); background: var(--pi-bg); white-space: nowrap; overflow: hidden; } - span { overflow: hidden; text-overflow: ellipsis; } - .bar > span:first-child { flex: 1 1 auto; min-width: 80px; } + span { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; } + .context { flex: 1 1 auto; min-width: 0; } .activity { display: inline-flex; align-items: center; gap: 6px; color: var(--pi-muted); } .activity.active { color: var(--pi-success); } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; } From 66c5d0faca229acb443a992cbd17ed97dee36d46 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 20:35:18 +0200 Subject: [PATCH 07/28] fix: right align status bar metrics --- .changeset/lean-workspace-context.md | 2 +- src/client/src/components/shared.ts | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.changeset/lean-workspace-context.md b/.changeset/lean-workspace-context.md index 43e4a76..d44258a 100644 --- a/.changeset/lean-workspace-context.md +++ b/.changeset/lean-workspace-context.md @@ -2,4 +2,4 @@ "@jmfederico/pi-web": patch --- -Reduce repeated machine and workspace details in the chat status bar and workspace tool header so context stays in the location chips. +Reduce repeated machine and workspace details in the chat status bar and workspace tool header, keeping compact session metrics right-aligned. diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts index 1202696..c4a78f6 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -390,9 +390,8 @@ export const formattedTextStyles = css` export const statusBarStyles = css` :host { display: block; color: var(--pi-muted); font: 12px system-ui, sans-serif; } - .bar { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 7px 12px; border-top: 1px solid var(--pi-border); background: var(--pi-bg); white-space: nowrap; overflow: hidden; } - span { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; } - .context { flex: 1 1 auto; min-width: 0; } + .bar { display: flex; justify-content: flex-end; gap: 12px; align-items: center; min-width: 0; padding: 7px 12px; border-top: 1px solid var(--pi-border); background: var(--pi-bg); white-space: nowrap; overflow: hidden; } + span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .activity { display: inline-flex; align-items: center; gap: 6px; color: var(--pi-muted); } .activity.active { color: var(--pi-success); } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; } From ad963a239106b2f4f28d307f14864db931aa3eaf Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 20:43:45 +0200 Subject: [PATCH 08/28] fix: simplify mobile breadcrumb machine context --- .../hide-single-machine-mobile-crumb.md | 5 +++ src/client/src/components/PiWebApp.ts | 11 +------ .../components/appShell/AppContextBar.test.ts | 24 ++++++++++++++ .../src/components/appShell/AppContextBar.ts | 31 +++++++++---------- 4 files changed, 44 insertions(+), 27 deletions(-) create mode 100644 .changeset/hide-single-machine-mobile-crumb.md create mode 100644 src/client/src/components/appShell/AppContextBar.test.ts 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/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 99d22ee..230e423 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -34,7 +34,6 @@ import { readSettingsSection, writeSettingsSection, type SettingsSection } from import { applyShortcutPreferences } 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"; @@ -1326,8 +1325,8 @@ export class PiWebApp extends LitElement { if (!this.appShell.isMobileNavigationLayout) return null; return html` ): boolean { return Object.entries(patch).some(([key, value]) => Reflect.get(state, key) !== value); } 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 {
+ + + +
+
+
+

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 machine federation is

+

+ 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. +

+
+
+ Federated shape + +
+ 
Browser
+  ↓
+PI WEB gateway you opened
+  ↓ gateway proxy
+Remote PI WEB runtime
+  ↓
+Remote projects, workspaces, sessions, terminals, plugins
+
+
+ +
+

When to use federation

+

+ 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.

+
+
+
+ +
+

Prepare the target machines

+

+ 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 remote 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 is proxied

+

+ 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.
    • +
+
+ +
+

Auth and 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. +

+
+ +
+

Remote plugins are machine-scoped

+

+ 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 model

+

+ 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.
    • +
+
+ +
+

Storage and 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 7963d6b..ea29827 100644 --- a/docs/plugins.html +++ b/docs/plugins.html @@ -28,6 +28,7 @@ PI WEB
Remote-first + Fleet Install Plugins FAQ @@ -297,9 +298,9 @@ 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.
    • @@ -398,6 +399,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 54e6871..9e8d501 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -131,7 +131,7 @@ 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; diff --git a/docs/remote-first.html b/docs/remote-first.html index c75f4dc..b864c69 100644 --- a/docs/remote-first.html +++ b/docs/remote-first.html @@ -31,6 +31,7 @@ PI WEB
    Remote-first + Fleet Install Plugins FAQ @@ -182,6 +183,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..3660062 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -201,8 +201,10 @@ video { display: flex; align-items: center; gap: 6px; + min-width: 0; color: var(--muted); font-size: 0.95rem; + white-space: nowrap; } .nav-links a, @@ -856,6 +858,7 @@ code .comment, .footer-links { display: flex; + flex-wrap: wrap; gap: 14px; } @@ -1062,11 +1065,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; @@ -1085,7 +1084,9 @@ html[data-theme="light"] .comment { flex-wrap: nowrap; overflow-x: auto; width: 100%; + padding-bottom: 2px; scrollbar-width: none; + -webkit-overflow-scrolling: touch; } .nav-links a:not(.github-link) { @@ -1124,6 +1125,12 @@ html[data-theme="light"] .comment { .nav-links .theme-toggle [data-theme-label] { display: none; } +} + +@media (max-width: 680px) { + .container { + width: min(100% - 28px, 1120px); + } .hero { padding-top: 52px; From 0ae0bdf4325c5a29fe10501d68d7f6be06e53ef7 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 23:40:16 +0200 Subject: [PATCH 11/28] docs: refine fleet guide --- docs/machines.html | 45 ++++++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/docs/machines.html b/docs/machines.html index ab70d8c..f4e5de2 100644 --- a/docs/machines.html +++ b/docs/machines.html @@ -69,20 +69,20 @@
    -

    What machine federation is

    +

    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. @@ -94,21 +94,24 @@

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

    When to use federation

    +

    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. @@ -133,7 +136,7 @@ Remote projects, workspaces, sessions, terminals, plugins

    -

    Prepare the target machines

    +

    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. @@ -159,7 +162,7 @@ Remote projects, workspaces, sessions, terminals, plugins

    -

    Add a remote machine

    +

    Add a machine

    1. Open the PI WEB instance you want to use as the gateway.
    2. Open Actions → Add Machine.
      3. @@ -178,7 +181,7 @@ Remote projects, workspaces, sessions, terminals, plugins
    -

    What is proxied

    +

    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. @@ -194,7 +197,7 @@ Remote projects, workspaces, sessions, terminals, plugins

    -

    Auth and credentials stay on the target 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. @@ -211,7 +214,7 @@ Remote projects, workspaces, sessions, terminals, plugins

    -

    Remote plugins are machine-scoped

    +

    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 @@ -225,7 +228,7 @@ Remote projects, workspaces, sessions, terminals, plugins

    -

    Trust model

    +

    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. @@ -238,7 +241,7 @@ Remote projects, workspaces, sessions, terminals, plugins

    -

    Storage and troubleshooting

    +

    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. From f7eff88e00a177dc5f26b4bd5a5bab588170accc Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 23:40:59 +0200 Subject: [PATCH 12/28] feat: make refresh control reload the page --- .changeset/full-reload-refresh-control.md | 5 + src/client/src/components/PiWebApp.ts | 2 +- .../components/appShell/AppRefreshControl.ts | 195 +----------------- src/client/src/components/shared.ts | 9 - src/client/src/plugins/core/actions.ts | 7 - src/client/src/plugins/registry.test.ts | 6 +- 6 files changed, 14 insertions(+), 210 deletions(-) create mode 100644 .changeset/full-reload-refresh-control.md 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/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 230e423..093b59c 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -1364,7 +1364,7 @@ export class PiWebApp extends LitElement { } private renderAppRefresh() { - return html` this.refreshAppData()} .onReload=${() => { this.hardReloadApp(); }}>`; + return html` { this.hardReloadApp(); }}>`; } override render() { 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/shared.ts b/src/client/src/components/shared.ts index c4a78f6..495a32b 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -75,14 +75,6 @@ export const appStyles = css` .context-item { flex: 0 0 auto; min-width: 0; display: flex; } .context-actions { position: absolute; top: 6px; right: 0; bottom: 6px; z-index: 3; display: flex; align-items: center; padding: 0 8px 0 0; pointer-events: none; } .context-actions::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 26px; background: var(--pi-bg); pointer-events: none; } - .app-refresh { position: relative; z-index: 1; display: flex; align-items: center; pointer-events: auto; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } - .app-refresh, .app-refresh * { -webkit-user-select: none; user-select: none; } - .app-refresh-button { box-sizing: border-box; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; padding: 0; line-height: 1; 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; } - .app-refresh-menu { position: fixed; z-index: 10000; 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); box-shadow: 0 8px 24px var(--pi-shadow); overflow-wrap: anywhere; } - .app-refresh-menu button { display: block; width: 100%; border: 0; background: transparent; color: var(--pi-text); text-align: left; white-space: normal; overflow-wrap: anywhere; } - .app-refresh-menu button:hover, .app-refresh-menu button:focus { background: var(--pi-selection-bg); } .context-chip { flex: 0 0 auto; min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--pi-border-muted); border-radius: 999px; background: var(--pi-surface); color: var(--pi-text); padding: 4px 8px; font: inherit; text-align: left; } .context-chip:hover { background: var(--pi-surface-hover); } .context-chip:focus-visible { outline: 2px solid var(--pi-accent); outline-offset: 2px; } @@ -155,7 +147,6 @@ export const appStyles = css` button { border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); color: var(--pi-text); padding: 7px 9px; cursor: pointer; } .empty { margin: auto; color: var(--pi-muted); } .error { padding: 10px 16px; border-bottom: 1px solid var(--pi-border); color: var(--pi-danger); } - @keyframes app-refresh-spin { to { transform: rotate(360deg); } } `; export const workspacePanelStyles = css` diff --git a/src/client/src/plugins/core/actions.ts b/src/client/src/plugins/core/actions.ts index 9e07c51..77e7d3a 100644 --- a/src/client/src/plugins/core/actions.ts +++ b/src/client/src/plugins/core/actions.ts @@ -87,13 +87,6 @@ export function createCoreActions(): PluginAction[] { group: "Preferences", run: (context) => { context.piWebUnstable?.openSettings?.(); }, }, - { - id: "app.refresh-data", - title: "Refresh App Data", - description: "Refresh session, status, activity, and the current workspace surface without reloading the page", - group: "General", - run: (context) => context.refreshAppData(), - }, { id: "app.reload-page", title: "Full Page Reload", diff --git a/src/client/src/plugins/registry.test.ts b/src/client/src/plugins/registry.test.ts index bbe7312..1b5f64b 100644 --- a/src/client/src/plugins/registry.test.ts +++ b/src/client/src/plugins/registry.test.ts @@ -174,17 +174,17 @@ describe("PluginRegistry", () => { expect(calls).toEqual(["refreshGit"]); }); - it("routes app refresh, reload, and settings actions through the runtime context", () => { + it("routes app reload and settings actions through the runtime context", () => { const registry = new PluginRegistry(); registry.register({ id: "core", plugin: corePlugin }); const { context, calls } = createContext(); const actions = registry.getActions(context); - void actions.find((candidate) => candidate.id === "core:app.refresh-data")?.run(); + expect(actions.some((candidate) => candidate.id === "core:app.refresh-data")).toBe(false); void actions.find((candidate) => candidate.id === "core:app.reload-page")?.run(); void actions.find((candidate) => candidate.id === "core:settings.open")?.run(); - expect(calls).toEqual(["refreshAppData", "reloadPage", "openSettings"]); + expect(calls).toEqual(["reloadPage", "openSettings"]); }); it("exposes terminal navigation as a shortcut-backed action", () => { From 9a3f2ce64f7f6998fd52c4eee8f6eab7adf43736 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 21:45:23 +0200 Subject: [PATCH 13/28] feat: make desktop navigation sections collapsible --- .changeset/collapsible-desktop-navigation.md | 5 ++ .../src/appShell/navigationState.test.ts | 28 ++++++-- src/client/src/appShell/navigationState.ts | 71 +++++++++++++++++-- src/client/src/components/MachineList.ts | 2 +- src/client/src/components/PiWebApp.ts | 46 +++++++----- src/client/src/components/ProjectList.ts | 2 +- src/client/src/components/SessionList.ts | 2 +- src/client/src/components/WorkspaceList.ts | 2 +- .../components/appShell/AppNavigationPanel.ts | 25 ++++--- 9 files changed, 141 insertions(+), 42 deletions(-) create mode 100644 .changeset/collapsible-desktop-navigation.md 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/src/client/src/appShell/navigationState.test.ts b/src/client/src/appShell/navigationState.test.ts index d90669e..399d0c0 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 { collapsedNavigationSectionsAfterSelection, 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,17 @@ 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"]); + }); + + it("collapses completed desktop sections and expands the next section after selection", () => { + expect(collapsedNavigationSectionsAfterSelection([], "machines")).toEqual(["machines"]); + expect(collapsedNavigationSectionsAfterSelection(["workspaces"], "projects")).toEqual(["machines", "projects"]); + expect(collapsedNavigationSectionsAfterSelection([], "workspaces")).toEqual(["machines", "projects", "workspaces"]); + expect(collapsedNavigationSectionsAfterSelection(["sessions"], "sessions")).toEqual(["machines", "projects", "workspaces"]); + }); }); diff --git a/src/client/src/appShell/navigationState.ts b/src/client/src/appShell/navigationState.ts index 6036a3d..71a98b1 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,32 @@ 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 collapsedNavigationSectionsAfterSelection(collapsedSections: readonly NavigationSection[], selectedSection: NavigationSection): NavigationSection[] { + const selectedIndex = NAVIGATION_SECTION_ORDER.indexOf(selectedSection); + const collapsed = new Set(collapsedSections); + const collapseThroughIndex = selectedSection === "sessions" ? selectedIndex - 1 : selectedIndex; + for (const section of NAVIGATION_SECTION_ORDER.slice(0, collapseThroughIndex + 1)) collapsed.add(section); + + const next = nextNavigationSection(selectedSection); + if (next !== undefined) collapsed.delete(next); + if (selectedSection === "sessions") collapsed.delete("sessions"); + 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 +82,33 @@ 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()) { + const next = nextNavigationSection(section); + if (next !== undefined) this.expand(next); + return; + } + this.setCollapsedSections(collapsedNavigationSectionsAfterSelection(this.collapsedSections, section)); } open(section: NavigationSection, openNavigationView: () => void): void { @@ -78,4 +122,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/components/MachineList.ts b/src/client/src/components/MachineList.ts index cfaf4cf..2363813 100644 --- a/src/client/src/components/MachineList.ts +++ b/src/client/src/components/MachineList.ts @@ -107,7 +107,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 { diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 093b59c..19646c9 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -27,7 +27,7 @@ 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 { readRoute, writeRoute, type AppRoute } from "../route"; import { readSettingsSection, writeSettingsSection, type SettingsSection } from "../settingsRoute"; @@ -127,7 +127,7 @@ 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 navigationSections = new NavigationSectionsController( this, () => this.state, () => this.appShell.isMobileNavigationLayout, @@ -777,10 +777,10 @@ export class PiWebApp extends LitElement { .selectedMachine=${this.state.selectedMachine} .machineStatuses=${this.state.machineStatuses} .machineActivities=${this.state.machineActivities} - .machinesCollapsed=${this.mobileNavigation.isCollapsed("machines")} - .onToggleMachines=${() => { this.mobileNavigation.toggle("machines"); }} + .machinesCollapsed=${this.navigationSections.isCollapsed("machines")} + .onToggleMachines=${() => { this.navigationSections.toggle("machines"); }} .onSelectMachine=${(machine: Machine) => this.withChatScrollTransition(async () => { - this.mobileNavigation.expand("projects"); + this.navigationSections.advanceAfterSelection("machines"); await this.selectMachineWithMemory(machine); })} .onRemoveMachine=${(machine: Machine) => { void this.removeMachine(machine); }} @@ -796,32 +796,42 @@ 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")} + .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"); }} + .onToggleProjects=${() => { this.navigationSections.toggle("projects"); }} + .onToggleWorkspaces=${() => { this.navigationSections.toggle("workspaces"); }} + .onToggleSessions=${() => { this.navigationSections.toggle("sessions"); }} .onSelectProject=${(project: Project) => this.withChatScrollTransition(async () => { - this.mobileNavigation.expand("workspaces"); + this.navigationSections.advanceAfterSelection("projects"); await this.workspaces.selectProject(project); })} .onCloseProject=${(project: Project) => this.projects.closeProject(project.id)} .onSelectWorkspace=${(workspace: Workspace) => this.withChatScrollTransition(async () => { - this.mobileNavigation.expand("sessions"); + this.navigationSections.advanceAfterSelection("workspaces"); await 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=${() => openChatAfter(() => { + this.navigationSections.advanceAfterSelection("sessions"); + return this.sessions.startSession(); + })} + .onSelectSession=${(session: SessionInfo) => openChatAfter(() => { + this.navigationSections.advanceAfterSelection("sessions"); + return 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))} + .onRestoreSession=${(session: SessionInfo) => openChatAfter(() => { + this.navigationSections.advanceAfterSelection("sessions"); + return this.sessions.restoreSession(session); + })} .onDeleteCachedNewSession=${(session: SessionInfo) => this.sessions.deleteCachedNewSession(session)} .onDetachParentSession=${(session: SessionInfo) => this.sessions.detachParent(session)} > @@ -829,7 +839,7 @@ export class PiWebApp extends LitElement { } private openNavigationSection(section: NavigationSection): void { - this.mobileNavigation.open(section, () => { this.selectMainView("navigation"); }); + this.navigationSections.open(section, () => { this.selectMainView("navigation"); }); } private visibleWorkspacePanels(): QualifiedWorkspacePanelContribution[] { diff --git a/src/client/src/components/ProjectList.ts b/src/client/src/components/ProjectList.ts index f857404..b494d2a 100644 --- a/src/client/src/components/ProjectList.ts +++ b/src/client/src/components/ProjectList.ts @@ -77,7 +77,7 @@ export class ProjectList extends LitElement { 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) { diff --git a/src/client/src/components/SessionList.ts b/src/client/src/components/SessionList.ts index 0793781..33adeb7 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -95,7 +95,7 @@ export class SessionList extends LitElement { const selectedTitle = this.selected?.path ?? selectedSummary; return html`

    - +

    `; diff --git a/src/client/src/components/WorkspaceList.ts b/src/client/src/components/WorkspaceList.ts index b130dbb..838d18f 100644 --- a/src/client/src/components/WorkspaceList.ts +++ b/src/client/src/components/WorkspaceList.ts @@ -79,7 +79,7 @@ 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 { diff --git a/src/client/src/components/appShell/AppNavigationPanel.ts b/src/client/src/components/appShell/AppNavigationPanel.ts index 56a8dee..99305b6 100644 --- a/src/client/src/components/appShell/AppNavigationPanel.ts +++ b/src/client/src/components/appShell/AppNavigationPanel.ts @@ -27,6 +27,7 @@ export class AppNavigationPanel extends LitElement { @property({ attribute: false }) workspaceLabelItems: (workspace: Workspace) => WorkspaceLabelItem[] = () => []; @property({ attribute: false }) refreshControl: unknown; @property({ type: Boolean, reflect: true }) collapsible = false; + @property({ type: Boolean, reflect: true }) compact = false; @property({ type: Boolean }) machinesCollapsed = false; @property({ type: Boolean }) projectsCollapsed = false; @property({ type: Boolean }) workspacesCollapsed = false; @@ -120,20 +121,24 @@ export class AppNavigationPanel extends LitElement { 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; } + :host([compact]) header { display: none; } .header-actions { 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; } `; } From a73bcebbd67a938909ec363baaf5386b398f91a5 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Fri, 5 Jun 2026 23:11:23 +0200 Subject: [PATCH 14/28] feat: simplify desktop navigation --- .changeset/calm-navigation-panels.md | 5 + .../src/appShell/navigationState.test.ts | 8 +- src/client/src/appShell/navigationState.ts | 21 +- src/client/src/components/MachineSwitcher.ts | 213 ++++++++++++++++++ .../appShell/AppNavigationPanel.test.ts | 4 +- .../components/appShell/AppNavigationPanel.ts | 17 +- 6 files changed, 239 insertions(+), 29 deletions(-) create mode 100644 .changeset/calm-navigation-panels.md create mode 100644 src/client/src/components/MachineSwitcher.ts 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/src/client/src/appShell/navigationState.test.ts b/src/client/src/appShell/navigationState.test.ts index 399d0c0..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 { collapsedNavigationSectionsAfterSelection, defaultNavigationSection, expandedNavigationSection, isNavigationSectionCollapsed, toggleCollapsedNavigationSection, toggleNavigationSection } from "./navigationState"; +import { defaultNavigationSection, expandedNavigationSection, isNavigationSectionCollapsed, toggleCollapsedNavigationSection, toggleNavigationSection } from "./navigationState"; describe("navigationState", () => { it("defaults to the first incomplete selection section", () => { @@ -51,10 +51,4 @@ describe("navigationState", () => { expect(toggleCollapsedNavigationSection(["sessions"], "machines")).toEqual(["machines", "sessions"]); }); - it("collapses completed desktop sections and expands the next section after selection", () => { - expect(collapsedNavigationSectionsAfterSelection([], "machines")).toEqual(["machines"]); - expect(collapsedNavigationSectionsAfterSelection(["workspaces"], "projects")).toEqual(["machines", "projects"]); - expect(collapsedNavigationSectionsAfterSelection([], "workspaces")).toEqual(["machines", "projects", "workspaces"]); - expect(collapsedNavigationSectionsAfterSelection(["sessions"], "sessions")).toEqual(["machines", "projects", "workspaces"]); - }); }); diff --git a/src/client/src/appShell/navigationState.ts b/src/client/src/appShell/navigationState.ts index 71a98b1..0981d03 100644 --- a/src/client/src/appShell/navigationState.ts +++ b/src/client/src/appShell/navigationState.ts @@ -41,18 +41,6 @@ export function toggleCollapsedNavigationSection(collapsedSections: readonly Nav return orderedNavigationSections(collapsed); } -export function collapsedNavigationSectionsAfterSelection(collapsedSections: readonly NavigationSection[], selectedSection: NavigationSection): NavigationSection[] { - const selectedIndex = NAVIGATION_SECTION_ORDER.indexOf(selectedSection); - const collapsed = new Set(collapsedSections); - const collapseThroughIndex = selectedSection === "sessions" ? selectedIndex - 1 : selectedIndex; - for (const section of NAVIGATION_SECTION_ORDER.slice(0, collapseThroughIndex + 1)) collapsed.add(section); - - const next = nextNavigationSection(selectedSection); - if (next !== undefined) collapsed.delete(next); - if (selectedSection === "sessions") collapsed.delete("sessions"); - return orderedNavigationSections(collapsed); -} - export function nextNavigationSection(section: NavigationSection): NavigationSection | undefined { return NAVIGATION_SECTION_ORDER[NAVIGATION_SECTION_ORDER.indexOf(section) + 1]; } @@ -103,12 +91,9 @@ export class NavigationSectionsController implements ReactiveController { } advanceAfterSelection(section: NavigationSection): void { - if (this.isMobileLayout()) { - const next = nextNavigationSection(section); - if (next !== undefined) this.expand(next); - return; - } - this.setCollapsedSections(collapsedNavigationSectionsAfterSelection(this.collapsedSections, section)); + if (!this.isMobileLayout()) return; + const next = nextNavigationSection(section); + if (next !== undefined) this.expand(next); } open(section: NavigationSection, openNavigationView: () => void): void { diff --git a/src/client/src/components/MachineSwitcher.ts b/src/client/src/components/MachineSwitcher.ts new file mode 100644 index 0000000..dad943a --- /dev/null +++ b/src/client/src/components/MachineSwitcher.ts @@ -0,0 +1,213 @@ +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"; + +@customElement("machine-switcher") +export class MachineSwitcher extends LitElement { + @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; + @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; + } + + 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 toggleMenu(target: EventTarget | null): void { + this.menuStyle = machineSwitcherMenuStyle(target); + this.open = !this.open; + this.openActionsMachineId = undefined; + } + + 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 { 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/appShell/AppNavigationPanel.test.ts b/src/client/src/components/appShell/AppNavigationPanel.test.ts index 57757c8..51defa1 100644 --- a/src/client/src/components/appShell/AppNavigationPanel.test.ts +++ b/src/client/src/components/appShell/AppNavigationPanel.test.ts @@ -3,12 +3,12 @@ import type { Machine } from "../../api"; import { shouldShowMachinesSection } from "./AppNavigationPanel"; describe("shouldShowMachinesSection", () => { - it("hides the machines section when there is no machine choice", () => { + it("hides machine navigation when there is no machine choice", () => { expect(shouldShowMachinesSection([])).toBe(false); expect(shouldShowMachinesSection([machine("local")])).toBe(false); }); - it("shows the machines section when there are multiple machines", () => { + it("shows machine navigation when there are multiple machines", () => { expect(shouldShowMachinesSection([machine("local"), machine("remote-a")])).toBe(true); }); }); diff --git a/src/client/src/components/appShell/AppNavigationPanel.ts b/src/client/src/components/appShell/AppNavigationPanel.ts index 99305b6..cd5aa2e 100644 --- a/src/client/src/components/appShell/AppNavigationPanel.ts +++ b/src/client/src/components/appShell/AppNavigationPanel.ts @@ -3,6 +3,7 @@ import { customElement, property } from "lit/decorators.js"; import type { Machine, MachineHealth, Project, SessionActivity, SessionInfo, SessionStatus, Workspace, WorkspaceActivity } from "../../api"; import type { WorkspaceLabelItem } from "../../plugins/types"; import "../MachineList"; +import "../MachineSwitcher"; import "../ProjectList"; import "../WorkspaceList"; import "../SessionList"; @@ -57,12 +58,22 @@ export class AppNavigationPanel extends LitElement { return html`
    PI WEB + ${shouldShowMachinesSection(this.machines) ? html` + this.onSelectMachine?.(machine)} + .onRemove=${(machine: Machine) => this.onRemoveMachine?.(machine)} + > + ` : null}
    ${this.refreshControl}
    - ${shouldShowMachinesSection(this.machines) ? html` + ${this.compact && shouldShowMachinesSection(this.machines) ? html` Date: Sun, 7 Jun 2026 12:52:21 +0200 Subject: [PATCH 15/28] fix(docs): keep mobile header controls visible --- .changeset/mobile-docs-header-controls.md | 5 +++ docs/404.html | 40 ++++++++++--------- docs/faq.html | 40 ++++++++++--------- docs/index.html | 40 ++++++++++--------- docs/install.html | 40 ++++++++++--------- docs/machines.html | 40 ++++++++++--------- docs/plugins.html | 40 ++++++++++--------- docs/remote-first.html | 40 ++++++++++--------- docs/styles.css | 47 +++++++++++++++-------- 9 files changed, 189 insertions(+), 143 deletions(-) create mode 100644 .changeset/mobile-docs-header-controls.md 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/docs/404.html b/docs/404.html index 766b4f1..069a501 100644 --- a/docs/404.html +++ b/docs/404.html @@ -28,24 +28,28 @@ diff --git a/docs/faq.html b/docs/faq.html index ba14122..6aa14e5 100644 --- a/docs/faq.html +++ b/docs/faq.html @@ -27,24 +27,28 @@ diff --git a/docs/index.html b/docs/index.html index ef9505d..be0d922 100644 --- a/docs/index.html +++ b/docs/index.html @@ -34,24 +34,28 @@ diff --git a/docs/install.html b/docs/install.html index 9644398..67b37ce 100644 --- a/docs/install.html +++ b/docs/install.html @@ -27,24 +27,28 @@ diff --git a/docs/machines.html b/docs/machines.html index f4e5de2..f327fad 100644 --- a/docs/machines.html +++ b/docs/machines.html @@ -30,24 +30,28 @@ diff --git a/docs/plugins.html b/docs/plugins.html index ea29827..b7e9f0c 100644 --- a/docs/plugins.html +++ b/docs/plugins.html @@ -27,24 +27,28 @@ diff --git a/docs/remote-first.html b/docs/remote-first.html index b864c69..c0651a7 100644 --- a/docs/remote-first.html +++ b/docs/remote-first.html @@ -30,24 +30,28 @@ diff --git a/docs/styles.css b/docs/styles.css index 3660062..d622208 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -197,16 +197,29 @@ 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, .theme-toggle { display: inline-flex; @@ -1081,19 +1094,23 @@ html[data-theme="light"] .comment { } .nav-links { - flex-wrap: nowrap; - overflow-x: auto; + overflow: visible; width: 100%; + } + + .nav-pages { + flex: 1 1 auto; + overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } - .nav-links a:not(.github-link) { + .nav-pages a { flex: 0 0 auto; } - .nav-links::-webkit-scrollbar { + .nav-pages::-webkit-scrollbar { display: none; } @@ -1103,26 +1120,22 @@ 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; } } From f501f9d757236ea19219175251a6766de3af1abf Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Mon, 8 Jun 2026 11:19:52 +0200 Subject: [PATCH 16/28] fix: stabilize navigation activity indicators --- .changeset/unified-activity-indicators.md | 5 ++++ src/client/src/components/MachineList.ts | 8 ++--- src/client/src/components/ProjectList.ts | 7 +++-- src/client/src/components/SessionList.ts | 35 ++++++++++++++++++---- src/client/src/components/WorkspaceList.ts | 6 ++-- src/client/src/components/activityBadge.ts | 6 ++++ src/client/src/components/shared.ts | 5 ++-- 7 files changed, 54 insertions(+), 18 deletions(-) create mode 100644 .changeset/unified-activity-indicators.md 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/src/client/src/components/MachineList.ts b/src/client/src/components/MachineList.ts index 2363813..8ac457b 100644 --- a/src/client/src/components/MachineList.ts +++ b/src/client/src/components/MachineList.ts @@ -3,7 +3,7 @@ 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 { renderActionActivityIndicator } from "./activityBadge"; import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; @@ -67,7 +67,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 +79,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) { @@ -139,7 +140,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/ProjectList.ts b/src/client/src/components/ProjectList.ts index b494d2a..6c72c9a 100644 --- a/src/client/src/components/ProjectList.ts +++ b/src/client/src/components/ProjectList.ts @@ -3,7 +3,7 @@ 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 { renderActionActivityIndicator } from "./activityBadge"; import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; @@ -55,7 +55,8 @@ export class ProjectList extends LitElement { @keydown=${(event: KeyboardEvent) => { activateSelectableRowFromKeyboard(event, () => this.onSelect?.(project)); }} >
    - ${project.name}${this.renderActivity(project)}${project.path} + ${project.name}${project.path} + ${this.renderActivity(project)}
    @@ -82,7 +83,7 @@ export class ProjectList extends LitElement { 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.ts b/src/client/src/components/SessionList.ts index 33adeb7..f85a88e 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -4,8 +4,8 @@ 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 { activateSelectableRow, focusSelectedOrFirstSelectableRow, handleSelectableRowKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; function sessionLabel(session: SessionInfo): string { @@ -32,6 +32,9 @@ export class SessionList extends LitElement { @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; @state() private openMenuSessionId: string | undefined; @state() private menuStyle = ""; @state() private archivedExpanded = false; @@ -68,6 +71,11 @@ 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)); @@ -111,10 +119,11 @@ export class SessionList extends LitElement { tabindex="0" title=${session.path} @click=${(event: MouseEvent) => { activateSelectableRow(event, () => this.onSelect?.(session)); }} - @keydown=${(event: KeyboardEvent) => { activateSelectableRowFromKeyboard(event, () => this.onSelect?.(session)); }} + @keydown=${(event: KeyboardEvent) => { this.handleSessionKeydown(event, session); }} >
    - ${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 + ${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)}
    @@ -136,6 +145,15 @@ export class SessionList extends LitElement { `; } + private handleSessionKeydown(event: KeyboardEvent, session: SessionInfo): void { + handleSelectableRowKeyboard(event, { + activate: () => this.onSelect?.(session), + 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 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); @@ -162,10 +180,15 @@ 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 ""; + } + + 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; diff --git a/src/client/src/components/WorkspaceList.ts b/src/client/src/components/WorkspaceList.ts index 838d18f..9bc2d4e 100644 --- a/src/client/src/components/WorkspaceList.ts +++ b/src/client/src/components/WorkspaceList.ts @@ -4,7 +4,7 @@ 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 { renderActionActivityIndicator } from "./activityBadge"; import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; import { renderWorkspaceLabelInlineItems } from "./workspaceLabel"; @@ -84,13 +84,12 @@ export class WorkspaceList extends LitElement { 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 +98,7 @@ export class WorkspaceList extends LitElement { ${renderWorkspaceLabelInlineItems(items)} `} + ${this.renderActivity(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/shared.ts b/src/client/src/components/shared.ts index 495a32b..da0005b 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -225,12 +225,11 @@ export const listStyles = css` .action-row:focus-visible { outline: 2px solid var(--pi-accent); outline-offset: 2px; border-radius: 8px; } .action-row.selected .action-main, .action-row.selected .action-menu-toggle { border-color: var(--pi-accent); background: var(--pi-selection-bg); } .action-row.archived .action-main { color: var(--pi-muted); } - .action-main { box-sizing: border-box; min-width: 0; width: 100%; border: 1px solid var(--pi-border); border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background: var(--pi-surface); color: var(--pi-text); padding: 7px 9px 7px calc(9px + var(--depth, 0) * 16px); text-align: left; } + .action-main { position: relative; box-sizing: border-box; min-width: 0; width: 100%; border: 1px solid var(--pi-border); border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background: var(--pi-surface); color: var(--pi-text); padding: 7px 22px 7px calc(9px + var(--depth, 0) * 16px); text-align: left; } .action-name { display: -webkit-box; max-height: 2.5em; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .action-row:not(.selected):hover .action-main { background: var(--pi-surface-hover); } .workspace-row .action-main { border-radius: 8px 0 0 8px; } .workspace-primary { min-width: 0; display: flex; align-items: baseline; gap: 6px; } - .workspace-primary .activity-indicator { flex: 0 0 auto; margin-right: 0; } .workspace-primary-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-status { flex: 0 0 auto; color: var(--pi-warning); font-size: 12px; } .workspace-secondary { margin-top: 3px; } @@ -244,6 +243,8 @@ export const listStyles = css` .workspace-detail-row dd { min-width: 0; margin: 0; overflow-wrap: anywhere; white-space: normal; } .tree-marker { color: var(--pi-dim); margin-right: 5px; } .badge { display: inline-block; margin-left: 5px; border: 1px solid var(--pi-border); border-radius: 999px; color: var(--pi-muted); padding: 0 5px; font-size: 11px; font-weight: 400; } + .action-activity { position: absolute; top: 5px; right: 6px; z-index: 1; display: grid; place-items: center; width: 10px; height: 10px; } + .action-activity .activity-indicator { margin: 0; vertical-align: 0; } .activity-indicator { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--pi-success); animation: pulse 1s ease-in-out infinite; vertical-align: 1px; } .activity-indicator.session { border-radius: 50%; background: var(--pi-success); } .activity-indicator.terminal { border-radius: 2px; background: var(--pi-accent); } From f3e19d14635dcef7d5c5e2cdf2671df6a5f54757 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Mon, 8 Jun 2026 13:33:06 +0200 Subject: [PATCH 17/28] feat: add keyboard navigation ladder --- .changeset/keyboard-navigation-ladder.md | 5 + .../src/appShell/panelCollapseController.ts | 6 + src/client/src/components/MachineList.ts | 18 ++- src/client/src/components/MachineSwitcher.ts | 122 ++++++++++++++++- src/client/src/components/PiWebApp.ts | 123 +++++++++++++----- src/client/src/components/ProjectList.ts | 24 +++- src/client/src/components/SessionList.ts | 3 +- src/client/src/components/WorkspaceList.ts | 20 ++- .../components/appShell/AppNavigationPanel.ts | 70 +++++++++- src/client/src/components/navigationFocus.ts | 3 + .../src/components/selectableRow.test.ts | 26 +++- src/client/src/components/selectableRow.ts | 79 +++++++++++ src/client/src/keyboardShortcuts.test.ts | 21 +++ src/client/src/keyboardShortcuts.ts | 31 +++-- src/client/src/plugins/core/actions.ts | 4 +- src/client/src/plugins/registry.test.ts | 1 + 16 files changed, 492 insertions(+), 64 deletions(-) create mode 100644 .changeset/keyboard-navigation-ladder.md create mode 100644 src/client/src/components/navigationFocus.ts 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/src/client/src/appShell/panelCollapseController.ts b/src/client/src/appShell/panelCollapseController.ts index 378563d..668f97b 100644 --- a/src/client/src/appShell/panelCollapseController.ts +++ b/src/client/src/appShell/panelCollapseController.ts @@ -23,6 +23,12 @@ export class PanelCollapseController implements ReactiveController { this.host.requestUpdate(); } + expandNavigationPanel(): void { + if (!this.navigationPanelCollapsed) return; + this.navigationPanelCollapsed = false; + this.host.requestUpdate(); + } + shellClass(mainView: AppState["mainView"]): string { return [ "shell", diff --git a/src/client/src/components/MachineList.ts b/src/client/src/components/MachineList.ts index 8ac457b..b9aaec1 100644 --- a/src/client/src/components/MachineList.ts +++ b/src/client/src/components/MachineList.ts @@ -4,11 +4,12 @@ import type { Machine, MachineHealth, WorkspaceActivity } from "../api"; import { machineActivityIndicator } from "../workspaceActivity"; import { actionMenuPanelStyle } from "./actionMenu"; import { renderActionActivityIndicator } from "./activityBadge"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +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`
    @@ -132,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 = [ diff --git a/src/client/src/components/MachineSwitcher.ts b/src/client/src/components/MachineSwitcher.ts index dad943a..c32383c 100644 --- a/src/client/src/components/MachineSwitcher.ts +++ b/src/client/src/components/MachineSwitcher.ts @@ -5,15 +5,18 @@ 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 { +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; @@ -40,6 +43,12 @@ export class MachineSwitcher extends LitElement { 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; @@ -54,6 +63,7 @@ export class MachineSwitcher extends LitElement { aria-label=${`Machine: ${label}. Switch machine.`} aria-expanded=${String(this.open)} @click=${(event: MouseEvent) => { this.toggleMenu(event.currentTarget); }} + @keydown=${(event: KeyboardEvent) => { this.handleSwitcherButtonKeydown(event); }} > ${this.renderActivity(selected)} @@ -83,7 +93,9 @@ export class MachineSwitcher extends LitElement { type="button" class="machine-option-main" title=${machineTitle(machine)} + data-machine-id=${machine.id} @click=${() => { this.select(machine); }} + @keydown=${(event: KeyboardEvent) => { this.handleMachineOptionKeydown(event); }} > ${this.renderActivity(machine)}${machine.name} ${machine.kind === "local" ? "Local Pi Web" : machine.baseUrl ?? "Remote Pi Web"} · ${machineStatusLabel(status)} @@ -120,12 +132,120 @@ export class MachineSwitcher extends LitElement { 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; diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 19646c9..c619965 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -55,7 +55,7 @@ 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"; @@ -75,6 +75,7 @@ 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; private readonly sessions = new SessionController( () => this.state, @@ -765,12 +766,7 @@ export class PiWebApp extends LitElement { `; } - private renderNavigationPanel(autoSwitchToChat: boolean) { - const openChatAfter = (action: () => Promise) => this.withChatScrollTransition(async () => { - await action(); - if (autoSwitchToChat) this.setState({ mainView: "chat" }); - if (autoSwitchToChat) this.updateUrl(); - }); + private renderNavigationPanel() { return html` { this.navigationSections.toggle("machines"); }} - .onSelectMachine=${(machine: Machine) => this.withChatScrollTransition(async () => { - this.navigationSections.advanceAfterSelection("machines"); - await this.selectMachineWithMemory(machine); - })} + .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} @@ -807,33 +800,20 @@ export class PiWebApp extends LitElement { .onToggleProjects=${() => { this.navigationSections.toggle("projects"); }} .onToggleWorkspaces=${() => { this.navigationSections.toggle("workspaces"); }} .onToggleSessions=${() => { this.navigationSections.toggle("sessions"); }} - .onSelectProject=${(project: Project) => this.withChatScrollTransition(async () => { - this.navigationSections.advanceAfterSelection("projects"); - await this.workspaces.selectProject(project); - })} + .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.navigationSections.advanceAfterSelection("workspaces"); - 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.navigationSections.advanceAfterSelection("sessions"); - return this.sessions.startSession(); - })} - .onSelectSession=${(session: SessionInfo) => openChatAfter(() => { - this.navigationSections.advanceAfterSelection("sessions"); - return 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.navigationSections.advanceAfterSelection("sessions"); - return this.sessions.restoreSession(session); - })} + .onRestoreSession=${(session: SessionInfo) => this.selectNavigationItem("sessions", "chat", () => this.sessions.restoreSession(session))} .onDeleteCachedNewSession=${(session: SessionInfo) => this.sessions.deleteCachedNewSession(session)} .onDetachParentSession=${(session: SessionInfo) => this.sessions.detachParent(session)} + .onFocusNavigationTarget=${(target: NavigationFocusTarget) => { void this.focusNavigationTarget(target); }} + .onCancelKeyboardNavigation=${() => { void this.focusChatComposer(); }} > `; } @@ -842,6 +822,42 @@ export class PiWebApp extends LitElement { 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[] { const workspace = this.state.selectedWorkspace; if (workspace === undefined) return []; @@ -978,7 +994,44 @@ export class PiWebApp extends LitElement { } private getActions(): AppAction[] { - return applyShortcutPreferences(this.plugins.getActions(this.createPluginRuntimeContext()), this.shortcutConfig); + return applyShortcutPreferences([...this.plugins.getActions(this.createPluginRuntimeContext()), ...this.navigationFocusActions()], this.shortcutConfig); + } + + 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 { @@ -1036,7 +1089,7 @@ 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(), @@ -1381,13 +1434,13 @@ export class PiWebApp extends LitElement { 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(); }}> diff --git a/src/client/src/components/ProjectList.ts b/src/client/src/components/ProjectList.ts index 6c72c9a..80b492d 100644 --- a/src/client/src/components/ProjectList.ts +++ b/src/client/src/components/ProjectList.ts @@ -4,11 +4,12 @@ import type { Project, Workspace, WorkspaceActivity } from "../api"; import { projectActivityIndicator } from "../workspaceActivity"; import { actionMenuPanelStyle } from "./actionMenu"; import { renderActionActivityIndicator } from "./activityBadge"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +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,7 +61,7 @@ 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}${project.path} @@ -74,6 +83,15 @@ 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"; diff --git a/src/client/src/components/SessionList.ts b/src/client/src/components/SessionList.ts index f85a88e..1c62994 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -5,6 +5,7 @@ import { isCachedNewSessionInfo } from "../cachedNewSessions"; import { isSessionActive } from "../../../shared/activity"; import { actionMenuPanelStyle } from "./actionMenu"; import { renderActionActivityIndicator } from "./activityBadge"; +import type { KeyboardNavigableSection } from "./navigationFocus"; import { activateSelectableRow, focusSelectedOrFirstSelectableRow, handleSelectableRowKeyboard } from "./selectableRow"; import { listStyles } from "./shared"; @@ -20,7 +21,7 @@ interface SessionRow { } @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 = {}; diff --git a/src/client/src/components/WorkspaceList.ts b/src/client/src/components/WorkspaceList.ts index 9bc2d4e..6844c4d 100644 --- a/src/client/src/components/WorkspaceList.ts +++ b/src/client/src/components/WorkspaceList.ts @@ -5,12 +5,13 @@ import type { WorkspaceLabelItem } from "../plugins/types"; import { workspaceActivityFor, workspaceActivityIndicator } from "../workspaceActivity"; import { actionMenuPanelStyle } from "./actionMenu"; import { renderActionActivityIndicator } from "./activityBadge"; -import { activateSelectableRow, activateSelectableRowFromKeyboard } from "./selectableRow"; +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`
    @@ -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/appShell/AppNavigationPanel.ts b/src/client/src/components/appShell/AppNavigationPanel.ts index cd5aa2e..57f6728 100644 --- a/src/client/src/components/appShell/AppNavigationPanel.ts +++ b/src/client/src/components/appShell/AppNavigationPanel.ts @@ -1,13 +1,18 @@ import { LitElement, css, html } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { customElement, property, query } from "lit/decorators.js"; import type { Machine, MachineHealth, Project, SessionActivity, SessionInfo, SessionStatus, Workspace, WorkspaceActivity } from "../../api"; import type { WorkspaceLabelItem } from "../../plugins/types"; +import type { NavigationSection } from "../../appShell/navigationState"; +import { NAVIGATION_SECTION_ORDER } from "../../appShell/navigationState"; +import type { KeyboardNavigableSection } from "../navigationFocus"; import "../MachineList"; import "../MachineSwitcher"; import "../ProjectList"; import "../WorkspaceList"; import "../SessionList"; +export type NavigationFocusTarget = NavigationSection | "chat"; + @customElement("app-navigation-panel") export class AppNavigationPanel extends LitElement { @property({ attribute: false }) machines: Machine[] = []; @@ -53,6 +58,24 @@ export class AppNavigationPanel extends LitElement { @property({ attribute: false }) onArchivedCollapsed?: () => void | Promise; @property({ attribute: false }) onSelectMachine?: (machine: Machine) => void | Promise; @property({ attribute: false }) onRemoveMachine?: (machine: Machine) => void | Promise; + @property({ attribute: false }) onFocusNavigationTarget?: (target: NavigationFocusTarget) => void | Promise; + @property({ attribute: false }) onCancelKeyboardNavigation?: () => void | Promise; + + @query("machine-list") private machineList?: KeyboardNavigableSection; + @query("machine-switcher") private machineSwitcher?: KeyboardNavigableSection; + @query("project-list") private projectList?: KeyboardNavigableSection; + @query("workspace-list") private workspaceList?: KeyboardNavigableSection; + @query("session-list") private sessionList?: KeyboardNavigableSection; + + async focusSection(section: NavigationSection): Promise { + await this.updateComplete; + switch (section) { + case "machines": return await this.focusNavigableSection(this.compact ? this.machineList : this.machineSwitcher); + case "projects": return await this.focusNavigableSection(this.projectList); + case "workspaces": return await this.focusNavigableSection(this.workspaceList); + case "sessions": return await this.focusNavigableSection(this.sessionList); + } + } override render() { return html` @@ -66,6 +89,8 @@ export class AppNavigationPanel extends LitElement { .activities=${this.machineActivities} .onSelect=${(machine: Machine) => this.onSelectMachine?.(machine)} .onRemove=${(machine: Machine) => this.onRemoveMachine?.(machine)} + .onFocusNextSection=${() => { this.focusNextFrom("machines"); }} + .onCancelKeyboardNavigation=${() => { this.cancelKeyboardNavigation(); }} > ` : null}
    @@ -84,6 +109,8 @@ export class AppNavigationPanel extends LitElement { .onToggleCollapsed=${() => { 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.onRestoreSession?.(session)} .onDelete=${(session: SessionInfo) => this.onDeleteCachedNewSession?.(session)} .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([compact]) { flex: 1 1 auto; } @@ -159,3 +213,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/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/keyboardShortcuts.test.ts b/src/client/src/keyboardShortcuts.test.ts index c4c5782..348b543 100644 --- a/src/client/src/keyboardShortcuts.test.ts +++ b/src/client/src/keyboardShortcuts.test.ts @@ -66,4 +66,25 @@ describe("KeyboardShortcutDispatcher", () => { expect(dispatcher.handle(keyEvent("r", { ctrlKey: true, shiftKey: true }), [value])).toBe(true); expect(run).toHaveBeenCalledTimes(1); }); + + it("runs a shortcut sequence that starts with a modified key", () => { + const dispatcher = new KeyboardShortcutDispatcher(); + const { value, run } = action("mod+g p"); + + expect(dispatcher.handle(keyEvent("g", { ctrlKey: true }), [value])).toBe(true); + expect(run).not.toHaveBeenCalled(); + expect(dispatcher.handle(keyEvent("p"), [value])).toBe(true); + expect(run).toHaveBeenCalledTimes(1); + }); + + it("falls back to a standalone modified shortcut when a pending sequence misses", () => { + const dispatcher = new KeyboardShortcutDispatcher(); + const sequence = action("mod+g p"); + const standalone = action("mod+k"); + + expect(dispatcher.handle(keyEvent("g", { ctrlKey: true }), [sequence.value, standalone.value])).toBe(true); + expect(dispatcher.handle(keyEvent("k", { ctrlKey: true }), [sequence.value, standalone.value])).toBe(true); + expect(sequence.run).not.toHaveBeenCalled(); + expect(standalone.run).toHaveBeenCalledTimes(1); + }); }); diff --git a/src/client/src/keyboardShortcuts.ts b/src/client/src/keyboardShortcuts.ts index 37aedd4..1c28045 100644 --- a/src/client/src/keyboardShortcuts.ts +++ b/src/client/src/keyboardShortcuts.ts @@ -14,20 +14,32 @@ export interface ShortcutKeyEvent { export class KeyboardShortcutDispatcher { private pendingTokens: string[] = []; - private pendingTimer: number | undefined; + private pendingTimer: ReturnType | undefined; handle(event: ShortcutKeyEvent, actions: AppAction[]): boolean { const token = eventToken(event); - if (token === undefined || !isModifiedShortcut(token)) return false; + if (token === undefined) return false; const shortcuts = actions .filter((action) => action.shortcut !== undefined && action.enabled !== false) .map((action) => ({ action, tokens: normalizeShortcut(action.shortcut ?? "") })) .filter((entry) => entry.tokens.length > 0); - const sequence = this.pendingTokens.length > 0 && !isModifiedShortcut(token) - ? [...this.pendingTokens, token] - : [token]; + if (this.pendingTokens.length > 0) { + const handledPending = this.handleSequence([...this.pendingTokens, token], shortcuts); + if (handledPending) return true; + this.clearPending(); + if (!isModifiedShortcut(token)) return false; + } else if (!isModifiedShortcut(token)) return false; + + return this.handleSequence([token], shortcuts); + } + + reset(): void { + this.clearPending(); + } + + private handleSequence(sequence: string[], shortcuts: { action: AppAction; tokens: string[] }[]): boolean { const exact = shortcuts.find((entry) => sameTokens(entry.tokens, sequence)); if (exact !== undefined) { this.clearPending(); @@ -41,18 +53,13 @@ export class KeyboardShortcutDispatcher { return true; } - this.clearPending(); return false; } - reset(): void { - this.clearPending(); - } - private setPending(tokens: string[]): void { this.clearPending(); this.pendingTokens = tokens; - this.pendingTimer = window.setTimeout(() => { + this.pendingTimer = globalThis.setTimeout(() => { this.pendingTokens = []; this.pendingTimer = undefined; }, sequenceTimeoutMs); @@ -61,7 +68,7 @@ export class KeyboardShortcutDispatcher { private clearPending(): void { this.pendingTokens = []; if (this.pendingTimer !== undefined) { - window.clearTimeout(this.pendingTimer); + globalThis.clearTimeout(this.pendingTimer); this.pendingTimer = undefined; } } diff --git a/src/client/src/plugins/core/actions.ts b/src/client/src/plugins/core/actions.ts index 77e7d3a..e46b84f 100644 --- a/src/client/src/plugins/core/actions.ts +++ b/src/client/src/plugins/core/actions.ts @@ -18,8 +18,8 @@ export function createCoreActions(): PluginAction[] { id: "prompt.focus", title: "Focus Prompt", description: "Move keyboard focus to the message composer", + shortcut: "mod+g c", group: "General", - enabled: (context) => context.state.selectedSession !== undefined, run: (context) => { context.focusPrompt(); }, }, { @@ -99,7 +99,7 @@ export function createCoreActions(): PluginAction[] { title: "Go to Chat", shortcut: "mod+1", group: "Navigation", - run: (context) => { context.selectMainView("chat"); }, + run: (context) => { context.focusPrompt(); }, }, { id: "view.files", diff --git a/src/client/src/plugins/registry.test.ts b/src/client/src/plugins/registry.test.ts index 1b5f64b..317c236 100644 --- a/src/client/src/plugins/registry.test.ts +++ b/src/client/src/plugins/registry.test.ts @@ -208,6 +208,7 @@ describe("PluginRegistry", () => { expect(shortcuts).toEqual([ ["core:actions.show", "mod+k"], + ["core:prompt.focus", "mod+g c"], ["core:settings.open", "mod+,"], ["core:view.chat", "mod+1"], ["core:view.files", "mod+2"], From 351ed03bf8624ef5b19af67a92019ebc1fbd57ec Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Mon, 8 Jun 2026 14:57:24 +0200 Subject: [PATCH 18/28] feat: add editable keyboard shortcuts --- .changeset/editable-keyboard-shortcuts.md | 5 + src/client/src/components/PiWebApp.ts | 13 +- src/client/src/components/SettingsDialog.ts | 13 +- .../settings/SettingsShortcutsPanel.ts | 360 ++++++++++++++++-- src/client/src/keyboardShortcuts.test.ts | 113 +++++- src/client/src/keyboardShortcuts.ts | 347 +++++++++++++++-- src/client/src/shortcutPreferences.test.ts | 22 +- src/client/src/shortcutPreferences.ts | 8 + 8 files changed, 800 insertions(+), 81 deletions(-) create mode 100644 .changeset/editable-keyboard-shortcuts.md 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/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index c619965..e842917 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -31,7 +31,7 @@ import { NavigationSectionsController, type NavigationSection } from "../appShel import { PanelCollapseController, mainViewClass } from "../appShell/panelCollapseController"; 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 "./MachineList"; @@ -184,7 +184,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(); } @@ -994,7 +995,11 @@ export class PiWebApp extends LitElement { } private getActions(): AppAction[] { - return applyShortcutPreferences([...this.plugins.getActions(this.createPluginRuntimeContext()), ...this.navigationFocusActions()], this.shortcutConfig); + return applyActiveShortcutPreferences(this.getDefaultActions(), this.shortcutConfig); + } + + private getDefaultActions(): AppAction[] { + return [...this.plugins.getActions(this.createPluginRuntimeContext()), ...this.navigationFocusActions()]; } private navigationFocusActions(): AppAction[] { @@ -1457,7 +1462,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}
    `; } 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/settings/SettingsShortcutsPanel.ts b/src/client/src/components/settings/SettingsShortcutsPanel.ts index 528a9fc..34db3f0 100644 --- a/src/client/src/components/settings/SettingsShortcutsPanel.ts +++ b/src/client/src/components/settings/SettingsShortcutsPanel.ts @@ -1,55 +1,283 @@ -import { css, html, LitElement, type TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { css, html, LitElement, type PropertyValues, type TemplateResult } from "lit"; +import { customElement, property, state } from "lit/decorators.js"; import type { AppAction } from "../../actions"; -import type { PiWebConfigResponse, PiWebShortcutConfig } from "../../api"; -import { formatShortcut } from "../../keyboardShortcuts"; +import type { PiWebConfigResponse, PiWebConfigValues, PiWebShortcutConfig } from "../../api"; +import { formatShortcut, isShortcutSequenceStarter, parseShortcutInput, resolveShortcutBindings, shortcutSequenceTimeoutMs, shortcutTokenFromEvent, type ShortcutBindingResolution } from "../../keyboardShortcuts"; + +const RECORD_SHORTCUT_LISTENER_OPTIONS = { capture: true } as const; @customElement("settings-shortcuts-panel") export class SettingsShortcutsPanel extends LitElement { @property({ attribute: false }) actions: AppAction[] = []; @property({ attribute: false }) configResponse: PiWebConfigResponse | undefined; + @property({ type: Boolean }) loading = false; + @property({ type: Boolean }) saving = false; + @property() error = ""; + @property() savedMessage = ""; + @property({ attribute: false }) onReload?: () => void | Promise; + @property({ attribute: false }) onSave?: (config: PiWebConfigValues) => void | Promise; + @state() private drafts: Record = {}; + @state() private localError = ""; + @state() private recording: RecordingState | undefined; + private recordingTimer: number | undefined; + private recordingListenerActive = false; + + private readonly onRecordKeyDown = (event: KeyboardEvent): void => { + const recording = this.recording; + if (recording === undefined) return; + event.preventDefault(); + event.stopPropagation(); + + if (event.key === "Escape") { + this.stopRecording(); + return; + } + + const token = shortcutTokenFromEvent(event); + if (token === undefined) { + this.localError = "Press a letter, number, punctuation, function, or navigation key. Press Esc to cancel recording."; + return; + } + if (recording.tokens.length === 0 && !isShortcutSequenceStarter(token)) { + this.localError = "Start shortcuts with Ctrl/⌘ or Alt so normal typing is not captured."; + return; + } + + const tokens = [...recording.tokens, token]; + this.localError = ""; + this.drafts = { [recording.actionId]: tokens.join(" ") }; + this.recording = { actionId: recording.actionId, tokens }; + this.armRecordingTimer(); + }; + + protected override willUpdate(changed: PropertyValues): void { + if (changed.has("configResponse") && this.configResponse !== undefined) { + this.drafts = {}; + this.localError = ""; + this.stopRecording(); + } + } + + override disconnectedCallback(): void { + this.stopRecording(); + super.disconnectedCallback(); + } override render(): TemplateResult { const groups = shortcutGroups(this.actions); + const shortcutResolutions = this.shortcutResolutions(); return html`

    Keyboard shortcuts

    -

    Review registered app actions and the shortcut config that will become editable here. Manual config entries use action ids and can override a default shortcut or set it to null to disable it.

    +

    Edit app shortcuts by action. Type a shortcut such as mod+k or mod+g p, record one from the keyboard, disable it with None, or reset it to the default. When shortcuts conflict, custom shortcuts win before defaults; ties are resolved by action id, and shorter shortcuts shadow longer sequences with the same prefix.

    +
    -
    Config key: shortcuts. Example: { "core:view.chat": "mod+1", "core:session.stop": null }
    - ${groups.length === 0 ? html`
    No actions registered.
    ` : groups.map((group) => html` -
    -

    ${group.name}

    -
    - ${group.actions.map((action) => this.renderShortcutRow(action))} -
    -
    - `)} + ${this.renderMessages()} + ${this.configResponse === undefined && this.loading ? html`
    Loading shortcuts…
    ` : html` +
    + Config file + ${this.configResponse?.path ?? "Unknown"} + Shortcut overrides are saved under shortcuts. A value of null disables the action shortcut. +
    + ${groups.length === 0 ? html`
    No actions registered.
    ` : groups.map((group) => html` +
    +

    ${group.name}

    +
    + ${group.actions.map((action) => this.renderShortcutRow(action, shortcutResolutions.get(action.id)))} +
    +
    + `)} + `} `; } - private renderShortcutRow(action: AppAction): TemplateResult { + private renderMessages(): TemplateResult | null { + const error = this.localError || this.error; + if (error !== "") return html`
    ${error}
    `; + if (this.savedMessage !== "") return html`
    ${this.savedMessage}
    `; + return null; + } + + private renderShortcutRow(action: AppAction, resolution: ShortcutBindingResolution | undefined): TemplateResult { const shortcuts = this.configResponse?.config.shortcuts; const configured = shortcutPreference(action.id, shortcuts); - const shortcut = configured === null ? undefined : configured ?? action.shortcut; const state = shortcutState(action, shortcuts); + const inputText = this.shortcutInputText(action); + const parsedInput = inputText.trim() === "" ? undefined : parseShortcutInput(inputText); + const previewShortcut = parsedInput?.ok === true ? parsedInput.shortcut : effectiveShortcut(action, shortcuts); + const hasConfiguredShortcut = configured !== undefined; + const hasDraft = this.drafts[action.id] !== undefined; + const displayState = hasDraft && inputText.trim() !== "" ? "custom" : state; + const recordingHint = this.recordingHint(action.id); + const conflictLabel = shortcutConflictLabel(resolution); return html` -
    +
    ${action.title} ${action.description !== undefined && action.description !== "" ? html`${action.description}` : null} ${action.id} + ${action.shortcut !== undefined && action.shortcut !== "" ? html`Default: ${formatShortcut(action.shortcut)}` : "No default shortcut"}
    -
    - ${shortcut !== undefined && shortcut !== "" ? html`${formatShortcut(shortcut)}` : html`${state === "disabled" ? "Disabled" : "Unassigned"}`} - ${shortcutStateLabel(state)} +
    +
    + ${previewShortcut !== undefined && previewShortcut !== "" ? html`${formatShortcut(previewShortcut)}` : html`${state === "disabled" ? "Disabled" : "Unassigned"}`} + ${shortcutStateLabel(displayState)}${hasDraft ? " · Unsaved" : ""} + ${conflictLabel === undefined ? null : html`${conflictLabel}`} +
    + + ${recordingHint !== "" ? html`${recordingHint}` : null} +
    + + + + +
    -
    +
    `; } + private shortcutInputText(action: AppAction): string { + const draft = this.drafts[action.id]; + if (draft !== undefined) return draft; + const configured = shortcutPreference(action.id, this.configResponse?.config.shortcuts); + if (configured === null) return ""; + return configured ?? action.shortcut ?? ""; + } + + private recordingHint(actionId: string): string { + const recording = this.recording; + if (recording?.actionId !== actionId) return ""; + if (recording.tokens.length === 0) return "Recording: press Ctrl/⌘ or Alt with a key. Press Esc to cancel."; + return `Recording: ${formatShortcut(recording.tokens.join(" "))}. Press another key to add a sequence, or wait to finish.`; + } + + private updateDraft(actionId: string, value: string): void { + this.drafts = { [actionId]: value }; + this.localError = ""; + } + + private async saveShortcut(action: AppAction): Promise { + this.stopRecording(); + const input = this.shortcutInputText(action).trim(); + const parsed = parseShortcutInput(input); + if (!parsed.ok) { + this.localError = parsed.message; + return; + } + this.localError = ""; + await this.saveShortcutPreference(action.id, parsed.shortcut); + } + + private async setShortcutNone(actionId: string): Promise { + this.stopRecording(); + this.localError = ""; + await this.saveShortcutPreference(actionId, null); + } + + private async resetShortcut(actionId: string): Promise { + this.stopRecording(); + this.localError = ""; + await this.saveShortcutPreference(actionId, undefined); + } + + private async saveShortcutPreference(actionId: string, shortcut: string | null | undefined): Promise { + const config: PiWebConfigValues = { ...(this.configResponse?.config ?? {}) }; + const currentShortcuts = config.shortcuts ?? {}; + const shortcuts = shortcut === undefined ? withoutShortcutPreference(currentShortcuts, actionId) : { ...currentShortcuts, [actionId]: shortcut }; + if (Object.keys(shortcuts).length === 0) { + delete config.shortcuts; + } else { + config.shortcuts = shortcuts; + } + await this.onSave?.(config); + } + + private shortcutResolutions(): Map { + return new Map(resolveShortcutBindings(this.actions, this.previewShortcutConfig(), { enabledOnly: true }).map((resolution) => [resolution.action.id, resolution])); + } + + private previewShortcutConfig(): PiWebShortcutConfig | undefined { + const shortcuts = { ...(this.configResponse?.config.shortcuts ?? {}) }; + for (const [actionId, draft] of Object.entries(this.drafts)) { + const trimmedDraft = draft.trim(); + if (trimmedDraft === "") continue; + const parsed = parseShortcutInput(trimmedDraft); + if (parsed.ok) shortcuts[actionId] = parsed.shortcut; + } + return Object.keys(shortcuts).length === 0 ? undefined : shortcuts; + } + + private async toggleRecording(actionId: string): Promise { + if (this.recording?.actionId === actionId) { + this.stopRecording(); + return; + } + this.stopRecording(); + this.localError = ""; + this.recording = { actionId, tokens: [] }; + this.ensureRecordingListener(); + await this.updateComplete; + this.focusShortcutInput(actionId); + } + + private focusShortcutInput(actionId: string): void { + for (const input of this.renderRoot.querySelectorAll(".shortcut-input")) { + if (input.dataset["actionId"] === actionId) { + input.focus(); + input.select(); + return; + } + } + } + + private armRecordingTimer(): void { + this.clearRecordingTimer(); + this.recordingTimer = window.setTimeout(() => { + this.recordingTimer = undefined; + this.stopRecording(); + }, shortcutSequenceTimeoutMs); + } + + private stopRecording(): void { + this.clearRecordingTimer(); + this.removeRecordingListener(); + this.recording = undefined; + } + + private clearRecordingTimer(): void { + if (this.recordingTimer === undefined) return; + window.clearTimeout(this.recordingTimer); + this.recordingTimer = undefined; + } + + private ensureRecordingListener(): void { + if (this.recordingListenerActive) return; + window.addEventListener("keydown", this.onRecordKeyDown, RECORD_SHORTCUT_LISTENER_OPTIONS); + this.recordingListenerActive = true; + } + + private removeRecordingListener(): void { + if (!this.recordingListenerActive) return; + window.removeEventListener("keydown", this.onRecordKeyDown, RECORD_SHORTCUT_LISTENER_OPTIONS); + this.recordingListenerActive = false; + } + static override styles = css` :host { display: block; } .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } @@ -58,37 +286,83 @@ export class SettingsShortcutsPanel extends LitElement { h2 { font-size: 17px; line-height: 1.25; } h3 { font-size: 13px; line-height: 1.3; } p { color: var(--pi-muted); line-height: 1.45; } + button, input { font: inherit; } + button { border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); color: var(--pi-text); padding: 7px 9px; cursor: pointer; } + button:disabled, input:disabled { opacity: .55; cursor: not-allowed; } + .primary { border-color: var(--pi-accent); background: var(--pi-selection-bg); color: var(--pi-text-bright); } + .secondary { flex: 0 0 auto; } + .message, .loading-card, .config-path-card { border: 1px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); padding: 12px; } + .message { margin-bottom: 12px; } + .error-message { border-color: var(--pi-danger); color: var(--pi-danger); background: color-mix(in srgb, var(--pi-danger) 10%, var(--pi-surface)); } + .success-message { border-color: var(--pi-success-border); color: var(--pi-success); background: var(--pi-success-surface); } + .loading-card, .config-path-card { color: var(--pi-muted); } + .config-path-card { display: grid; gap: 5px; margin-bottom: 14px; } + .config-path-card span { color: var(--pi-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } code { border: 1px solid var(--pi-border-muted); border-radius: 5px; background: var(--pi-bg); padding: 1px 4px; color: var(--pi-text); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; } - .loading-card, .shortcut-note { border: 1px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); padding: 12px; } - .loading-card, .shortcut-note { color: var(--pi-muted); } - .shortcut-note { margin-bottom: 14px; } .shortcut-group { margin: 0 0 16px; } .shortcut-group h3 { margin: 0 0 8px; color: var(--pi-muted); font-size: 12px; text-transform: uppercase; } .shortcut-list { border: 1px solid var(--pi-border); border-radius: 10px; overflow: hidden; } - .shortcut-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--pi-border-muted); background: var(--pi-surface); } + .shortcut-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 48%); gap: 14px; align-items: start; padding: 12px; border-bottom: 1px solid var(--pi-border-muted); background: var(--pi-surface); } + .shortcut-row.shadowed { background: color-mix(in srgb, var(--pi-warning) 5%, var(--pi-surface)); } + .shortcut-row.shadowing { background: color-mix(in srgb, var(--pi-accent) 5%, var(--pi-surface)); } .shortcut-row:last-child { border-bottom: 0; } - .shortcut-main { min-width: 0; display: grid; gap: 3px; } + .shortcut-main { min-width: 0; display: grid; gap: 4px; } .shortcut-main strong, .shortcut-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shortcut-main small { color: var(--pi-muted); } .shortcut-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } - .shortcut-value { justify-self: end; display: grid; justify-items: end; gap: 3px; } - kbd { justify-self: end; border: 1px solid var(--pi-border); border-radius: 6px; background: var(--pi-bg); color: var(--pi-text-secondary); padding: 3px 7px; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; } - .unassigned { justify-self: end; color: var(--pi-muted); font-size: 12px; } - .shortcut-value small { color: var(--pi-muted); font-size: 11px; } - .shortcut-value small.custom { color: var(--pi-accent); } - .shortcut-value small.disabled { color: var(--pi-warning); } + .shortcut-editor { min-width: 0; display: grid; gap: 8px; } + .shortcut-status { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } + .shortcut-status small { color: var(--pi-muted); font-size: 11px; } + .shortcut-status small.custom { color: var(--pi-accent); } + .shortcut-status small.disabled { color: var(--pi-warning); } + .shortcut-status small.conflict { border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px; } + .shortcut-status small.conflict.shadowing { color: var(--pi-accent); } + .shortcut-status small.conflict.shadowed { color: var(--pi-warning); } + .shortcut-input-label { min-width: 0; display: grid; gap: 5px; } + .shortcut-input-label span { color: var(--pi-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; } + input { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-bg); color: var(--pi-text); padding: 8px 9px; outline: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } + input:focus { border-color: var(--pi-accent); box-shadow: 0 0 0 1px var(--pi-accent-border); } + .shortcut-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; } + kbd { border: 1px solid var(--pi-border); border-radius: 6px; background: var(--pi-bg); color: var(--pi-text-secondary); padding: 3px 7px; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; } + .unassigned { color: var(--pi-muted); font-size: 12px; } + .recording-hint { color: var(--pi-accent); font-size: 12px; } @media (max-width: 760px) { .section-heading { display: grid; gap: 12px; } + .section-heading .secondary { justify-self: start; } .shortcut-row { grid-template-columns: minmax(0, 1fr); align-items: start; } - .shortcut-value { justify-self: start; justify-items: start; } - kbd, .unassigned { justify-self: start; } + .shortcut-status, .shortcut-actions { justify-content: flex-start; } } `; } +interface RecordingState { + actionId: string; + tokens: string[]; +} + type ShortcutState = "default" | "custom" | "disabled" | "unassigned"; +function shortcutRowClass(resolution: ShortcutBindingResolution | undefined): string { + if (resolution?.active === false) return "shortcut-row shadowed"; + if (resolution?.active === true && resolution.shadows.length > 0) return "shortcut-row shadowing"; + return "shortcut-row"; +} + +function shortcutConflictClass(resolution: ShortcutBindingResolution | undefined): string { + return resolution?.active === false ? "conflict shadowed" : "conflict shadowing"; +} + +function shortcutConflictLabel(resolution: ShortcutBindingResolution | undefined): string | undefined { + if (resolution === undefined) return undefined; + if (!resolution.active) return `Shadowed by ${resolution.shadowedBy?.action.title ?? "another action"}`; + const shadowedCount = resolution.shadows.length; + if (shadowedCount === 0) return undefined; + const shadowedNames = resolution.shadows.slice(0, 2).map((binding) => binding.action.title).join(", "); + const suffix = shadowedCount > 2 ? `, +${String(shadowedCount - 2)} more` : ""; + return `Shadows ${String(shadowedCount)} ${shadowedCount === 1 ? "action" : "actions"}: ${shadowedNames}${suffix}`; +} + function shortcutGroups(actions: AppAction[]): { name: string; actions: AppAction[] }[] { const grouped = new Map(); for (const action of [...actions].sort(compareActions)) { @@ -107,6 +381,16 @@ function shortcutPreference(actionId: string, shortcuts: PiWebShortcutConfig | u return shortcuts[actionId]; } +function withoutShortcutPreference(shortcuts: PiWebShortcutConfig, actionId: string): PiWebShortcutConfig { + return Object.fromEntries(Object.entries(shortcuts).filter(([shortcutActionId]) => shortcutActionId !== actionId)); +} + +function effectiveShortcut(action: AppAction, shortcuts: PiWebShortcutConfig | undefined): string | undefined { + const configured = shortcutPreference(action.id, shortcuts); + if (configured === null) return undefined; + return configured ?? action.shortcut; +} + function shortcutState(action: AppAction, shortcuts: PiWebShortcutConfig | undefined): ShortcutState { const configured = shortcutPreference(action.id, shortcuts); if (configured === null) return "disabled"; @@ -117,8 +401,12 @@ function shortcutState(action: AppAction, shortcuts: PiWebShortcutConfig | undef function shortcutStateLabel(state: ShortcutState): string { switch (state) { case "default": return "Default"; - case "custom": return "Config override"; - case "disabled": return "Config disabled"; + case "custom": return "Custom"; + case "disabled": return "Disabled"; case "unassigned": return "No default"; } } + +function inputValue(event: Event): string { + return event.target instanceof HTMLInputElement ? event.target.value : ""; +} diff --git a/src/client/src/keyboardShortcuts.test.ts b/src/client/src/keyboardShortcuts.test.ts index 348b543..804da85 100644 --- a/src/client/src/keyboardShortcuts.test.ts +++ b/src/client/src/keyboardShortcuts.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it, vi } from "vitest"; import type { AppAction } from "./actions"; -import { KeyboardShortcutDispatcher, type ShortcutKeyEvent } from "./keyboardShortcuts"; +import { KeyboardShortcutDispatcher, parseShortcutInput, resolveShortcutBindings, shortcutTokenFromEvent, type ShortcutKeyEvent } from "./keyboardShortcuts"; function keyEvent(key: string, modifiers: Partial = {}): ShortcutKeyEvent { return { @@ -16,10 +16,14 @@ function keyEvent(key: string, modifiers: Partial = {}): Short } function action(shortcut: string, enabled = true) { + return actionWithId(shortcut, shortcut, enabled); +} + +function actionWithId(id: string, shortcut: string, enabled = true) { const run = vi.fn(); const value: AppAction = { - id: shortcut, - title: shortcut, + id, + title: id, shortcut, enabled, run, @@ -48,6 +52,26 @@ describe("KeyboardShortcutDispatcher", () => { expect(run).not.toHaveBeenCalled(); }); + it("matches manually typed Ctrl shortcuts as the cross-platform Mod modifier", () => { + const dispatcher = new KeyboardShortcutDispatcher(); + const { value, run } = action("ctrl+k"); + + const handled = dispatcher.handle(keyEvent("k", { ctrlKey: true }), [value]); + + expect(handled).toBe(true); + expect(run).toHaveBeenCalledTimes(1); + }); + + it("ignores shift-only shortcuts so capitalized typing is never captured", () => { + const dispatcher = new KeyboardShortcutDispatcher(); + const { value, run } = action("shift+r"); + + const handled = dispatcher.handle(keyEvent("r", { shiftKey: true }), [value]); + + expect(handled).toBe(false); + expect(run).not.toHaveBeenCalled(); + }); + it("ignores disabled matching shortcuts", () => { const dispatcher = new KeyboardShortcutDispatcher(); const { value, run } = action("mod+enter", false); @@ -77,6 +101,42 @@ describe("KeyboardShortcutDispatcher", () => { expect(run).toHaveBeenCalledTimes(1); }); + it("deterministically runs the lowest action id when default shortcuts conflict", () => { + const dispatcher = new KeyboardShortcutDispatcher(); + const later = actionWithId("plugin:z", "mod+k"); + const earlier = actionWithId("plugin:a", "mod+k"); + + const handled = dispatcher.handle(keyEvent("k", { ctrlKey: true }), [later.value, earlier.value]); + + expect(handled).toBe(true); + expect(earlier.run).toHaveBeenCalledTimes(1); + expect(later.run).not.toHaveBeenCalled(); + }); + + it("runs custom shortcut winners before default shortcut conflicts", () => { + const dispatcher = new KeyboardShortcutDispatcher(); + const defaultAction = actionWithId("plugin:a", "mod+j"); + const customAction = actionWithId("plugin:z", "mod+k"); + + const handled = dispatcher.handle(keyEvent("j", { ctrlKey: true }), [defaultAction.value, customAction.value], { shortcuts: { "plugin:z": "mod+j" } }); + + expect(handled).toBe(true); + expect(customAction.run).toHaveBeenCalledTimes(1); + expect(defaultAction.run).not.toHaveBeenCalled(); + }); + + it("uses the same shadowing rules when a standalone shortcut is a sequence prefix", () => { + const dispatcher = new KeyboardShortcutDispatcher(); + const standalone = actionWithId("plugin:standalone", "mod+g"); + const sequence = actionWithId("plugin:sequence", "mod+g p"); + + const handled = dispatcher.handle(keyEvent("g", { ctrlKey: true }), [standalone.value, sequence.value]); + + expect(handled).toBe(true); + expect(standalone.run).toHaveBeenCalledTimes(1); + expect(sequence.run).not.toHaveBeenCalled(); + }); + it("falls back to a standalone modified shortcut when a pending sequence misses", () => { const dispatcher = new KeyboardShortcutDispatcher(); const sequence = action("mod+g p"); @@ -88,3 +148,50 @@ describe("KeyboardShortcutDispatcher", () => { expect(standalone.run).toHaveBeenCalledTimes(1); }); }); + +describe("shortcut conflict resolution", () => { + it("reports which duplicate bindings shadow and which are shadowed", () => { + const defaultAction = actionWithId("plugin:a", "mod+k"); + const customAction = actionWithId("plugin:z", "mod+j"); + + const resolutions = resolveShortcutBindings([defaultAction.value, customAction.value], { "plugin:z": "mod+k" }); + const defaultResolution = resolutions.find((resolution) => resolution.action.id === "plugin:a"); + const customResolution = resolutions.find((resolution) => resolution.action.id === "plugin:z"); + + expect(customResolution?.active).toBe(true); + expect(customResolution?.shadows.map((binding) => binding.action.id)).toEqual(["plugin:a"]); + expect(defaultResolution?.active).toBe(false); + expect(defaultResolution?.shadowedBy?.action.id).toBe("plugin:z"); + }); + + it("reports sequence bindings shadowed by shorter shortcut prefixes", () => { + const standalone = actionWithId("plugin:standalone", "mod+g"); + const sequence = actionWithId("plugin:sequence", "mod+g p"); + + const resolutions = resolveShortcutBindings([sequence.value, standalone.value]); + const standaloneResolution = resolutions.find((resolution) => resolution.action.id === "plugin:standalone"); + const sequenceResolution = resolutions.find((resolution) => resolution.action.id === "plugin:sequence"); + + expect(standaloneResolution?.active).toBe(true); + expect(standaloneResolution?.shadows.map((binding) => binding.action.id)).toEqual(["plugin:sequence"]); + expect(sequenceResolution?.active).toBe(false); + expect(sequenceResolution?.shadowedBy?.action.id).toBe("plugin:standalone"); + }); +}); + +describe("shortcut input parsing", () => { + it("normalizes manually typed shortcuts", () => { + expect(parseShortcutInput("Ctrl + Shift + K")).toEqual({ ok: true, shortcut: "mod+shift+k", tokens: ["mod+shift+k"] }); + expect(parseShortcutInput("cmd+g p")).toEqual({ ok: true, shortcut: "mod+g p", tokens: ["mod+g", "p"] }); + }); + + it("rejects shortcuts that would capture normal typing", () => { + expect(parseShortcutInput("r")).toEqual({ ok: false, message: "Shortcuts must start with Ctrl/⌘ or Alt so normal typing is not captured." }); + expect(parseShortcutInput("shift+r")).toEqual({ ok: false, message: "Shortcuts must start with Ctrl/⌘ or Alt so normal typing is not captured." }); + }); + + it("builds canonical tokens from recorded key events", () => { + expect(shortcutTokenFromEvent(keyEvent("K", { metaKey: true, shiftKey: true }))).toBe("mod+shift+k"); + expect(shortcutTokenFromEvent(keyEvent("ArrowDown", { altKey: true }))).toBe("alt+arrowdown"); + }); +}); diff --git a/src/client/src/keyboardShortcuts.ts b/src/client/src/keyboardShortcuts.ts index 1c28045..ac207c3 100644 --- a/src/client/src/keyboardShortcuts.ts +++ b/src/client/src/keyboardShortcuts.ts @@ -1,6 +1,12 @@ import type { AppAction } from "./actions"; -const sequenceTimeoutMs = 1200; +export const shortcutSequenceTimeoutMs = 1200; + +const modifierOrder = ["mod", "alt", "shift"] as const; +type ShortcutModifier = typeof modifierOrder[number]; + +export type ShortcutPreferenceConfig = Record; +export type ShortcutBindingSource = "default" | "custom"; export interface ShortcutKeyEvent { key: string; @@ -12,25 +18,49 @@ export interface ShortcutKeyEvent { target: EventTarget | null; } +export type ShortcutParseResult = + | { ok: true; shortcut: string; tokens: string[] } + | { ok: false; message: string }; + +export interface ShortcutBindingSummary { + action: AppAction; + shortcut: string; + source: ShortcutBindingSource; +} + +export interface ShortcutBindingResolution extends ShortcutBindingSummary { + tokens: string[]; + key: string; + order: number; + active: boolean; + shadows: ShortcutBindingSummary[]; + shadowedBy?: ShortcutBindingSummary; +} + +interface ShortcutBinding extends ShortcutBindingSummary { + tokens: string[]; + key: string; + order: number; +} + export class KeyboardShortcutDispatcher { private pendingTokens: string[] = []; private pendingTimer: ReturnType | undefined; - handle(event: ShortcutKeyEvent, actions: AppAction[]): boolean { - const token = eventToken(event); + handle(event: ShortcutKeyEvent, actions: AppAction[], options: { shortcuts?: ShortcutPreferenceConfig } = {}): boolean { + const token = shortcutTokenFromEvent(event); if (token === undefined) return false; - const shortcuts = actions - .filter((action) => action.shortcut !== undefined && action.enabled !== false) - .map((action) => ({ action, tokens: normalizeShortcut(action.shortcut ?? "") })) - .filter((entry) => entry.tokens.length > 0); + const shortcuts = resolveShortcutBindings(actions, options.shortcuts, { enabledOnly: true }) + .filter((binding) => binding.active) + .map((binding) => ({ action: binding.action, tokens: binding.tokens })); if (this.pendingTokens.length > 0) { const handledPending = this.handleSequence([...this.pendingTokens, token], shortcuts); if (handledPending) return true; this.clearPending(); - if (!isModifiedShortcut(token)) return false; - } else if (!isModifiedShortcut(token)) return false; + if (!isShortcutSequenceStarter(token)) return false; + } else if (!isShortcutSequenceStarter(token)) return false; return this.handleSequence([token], shortcuts); } @@ -62,7 +92,7 @@ export class KeyboardShortcutDispatcher { this.pendingTimer = globalThis.setTimeout(() => { this.pendingTokens = []; this.pendingTimer = undefined; - }, sequenceTimeoutMs); + }, shortcutSequenceTimeoutMs); } private clearPending(): void { @@ -74,25 +104,67 @@ export class KeyboardShortcutDispatcher { } } +export function resolveShortcutBindings(actions: AppAction[], shortcuts?: ShortcutPreferenceConfig, options: { enabledOnly?: boolean } = {}): ShortcutBindingResolution[] { + const bindings = actions.flatMap((action, order) => { + if (options.enabledOnly === true && action.enabled === false) return []; + const binding = shortcutBindingForAction(action, shortcuts, order); + return binding === undefined ? [] : [binding]; + }); + const bindingsByKey = new Map(); + for (const binding of bindings) { + bindingsByKey.set(binding.key, [...(bindingsByKey.get(binding.key) ?? []), binding]); + } + + const exactWinnersByKey = new Map(); + for (const conflictSet of bindingsByKey.values()) { + const winner = [...conflictSet].sort(compareShortcutBindings)[0]; + if (winner !== undefined) exactWinnersByKey.set(winner.key, winner); + } + + const exactWinners = [...exactWinnersByKey.values()].sort(compareShortcutPrefixCandidates); + const shadowsByWinner = new Map(); + const winnerByBinding = new Map(); + for (const binding of bindings) { + const exactWinner = exactWinnersByKey.get(binding.key); + if (exactWinner === undefined) continue; + const winner = prefixWinnerFor(exactWinner, exactWinners) ?? exactWinner; + winnerByBinding.set(binding, winner); + if (binding !== winner) shadowsByWinner.set(winner, [...(shadowsByWinner.get(winner) ?? []), binding]); + } + + return bindings.map((binding) => { + const winner = winnerByBinding.get(binding); + const active = winner === binding; + const shadowedBy = winner === undefined || active ? undefined : shortcutBindingSummary(winner); + const shadows = active ? [...(shadowsByWinner.get(binding) ?? [])].sort(compareShortcutBindings).map(shortcutBindingSummary) : []; + return { + ...binding, + active, + shadows, + ...(shadowedBy === undefined ? {} : { shadowedBy }), + }; + }).sort((left, right) => left.order - right.order); +} + +export function parseShortcutInput(shortcut: string): ShortcutParseResult { + return parseShortcut(shortcut, { requireFirstChordActivator: true }); +} + +export function normalizeShortcut(shortcut: string): string[] { + const parsed = parseShortcut(shortcut, { requireFirstChordActivator: false }); + return parsed.ok ? parsed.tokens : []; +} + export function formatShortcut(shortcut: string): string { return normalizeShortcut(shortcut) .map((token) => token .split("+") - .map((part) => { - if (part === "mod") return isMac() ? "⌘" : "Ctrl"; - if (part === "shift") return "Shift"; - if (part === "alt") return isMac() ? "⌥" : "Alt"; - if (part === "ctrl") return "Ctrl"; - if (part === "enter") return "Enter"; - if (part === "escape") return "Esc"; - if (part === ".") return "."; - return part.length === 1 ? part.toUpperCase() : `${part.charAt(0).toUpperCase()}${part.slice(1)}`; - }) + .map(formatShortcutPart) .join("+")) .join(" "); } -function eventToken(event: ShortcutKeyEvent): string | undefined { +export function shortcutTokenFromEvent(event: ShortcutKeyEvent): string | undefined { if (event.isComposing) return undefined; const key = normalizeKey(event.key); if (key === undefined) return undefined; @@ -104,21 +176,228 @@ function eventToken(event: ShortcutKeyEvent): string | undefined { return modifiers.join("+"); } -function normalizeShortcut(shortcut: string): string[] { - return shortcut - .trim() - .toLowerCase() - .split(/\s+/u) - .filter((token) => token !== "") - .map((token) => token.split("+").filter((part) => part !== "").join("+")); +export function isShortcutSequenceStarter(token: string): boolean { + return token.split("+").includes("mod") || token.split("+").includes("alt"); +} + +function shortcutBindingForAction(action: AppAction, shortcuts: ShortcutPreferenceConfig | undefined, order: number): ShortcutBinding | undefined { + const configured = shortcutPreference(action.id, shortcuts); + if (configured === null) return undefined; + const shortcut = configured ?? action.shortcut; + if (shortcut === undefined || shortcut === "") return undefined; + const tokens = normalizeShortcut(shortcut); + const firstToken = tokens[0]; + if (firstToken === undefined || !isShortcutSequenceStarter(firstToken)) return undefined; + return { + action, + shortcut: tokens.join(" "), + source: configured === undefined ? "default" : "custom", + tokens, + key: shortcutBindingKey(tokens), + order, + }; +} + +function shortcutPreference(actionId: string, shortcuts: ShortcutPreferenceConfig | undefined): string | null | undefined { + if (shortcuts === undefined || !Object.hasOwn(shortcuts, actionId)) return undefined; + return shortcuts[actionId]; +} + +function shortcutBindingKey(tokens: string[]): string { + return tokens.join("\u0000"); +} + +function shortcutBindingSummary(binding: ShortcutBinding): ShortcutBindingSummary { + return { action: binding.action, shortcut: binding.shortcut, source: binding.source }; +} + +function compareShortcutBindings(left: ShortcutBinding, right: ShortcutBinding): number { + return shortcutSourceRank(left.source) - shortcutSourceRank(right.source) + || compareStrings(left.action.id, right.action.id) + || compareStrings(left.action.title, right.action.title) + || left.order - right.order; +} + +function compareShortcutPrefixCandidates(left: ShortcutBinding, right: ShortcutBinding): number { + return left.tokens.length - right.tokens.length || compareShortcutBindings(left, right); +} + +function prefixWinnerFor(binding: ShortcutBinding, exactWinners: ShortcutBinding[]): ShortcutBinding | undefined { + return exactWinners.find((candidate) => candidate !== binding && candidate.tokens.length < binding.tokens.length && startsWithTokens(binding.tokens, candidate.tokens)); +} + +function shortcutSourceRank(source: ShortcutBindingSource): number { + switch (source) { + case "custom": return 0; + case "default": return 1; + } +} + +function compareStrings(left: string, right: string): number { + if (left < right) return -1; + if (left > right) return 1; + return 0; +} + +function parseShortcut(shortcut: string, options: { requireFirstChordActivator: boolean }): ShortcutParseResult { + const cleaned = shortcut.trim().toLowerCase().replace(/\s*\+\s*/gu, "+"); + if (cleaned === "") return { ok: false, message: "Enter a shortcut, choose None, or reset to the default." }; + + const tokens: string[] = []; + const chordInputs = cleaned.split(/\s+/u).filter((token) => token !== ""); + for (const [index, chordInput] of chordInputs.entries()) { + const parsed = parseShortcutChord(chordInput); + if (!parsed.ok) return parsed; + if (index === 0 && options.requireFirstChordActivator && !isShortcutSequenceStarter(parsed.token)) { + return { ok: false, message: "Shortcuts must start with Ctrl/⌘ or Alt so normal typing is not captured." }; + } + tokens.push(parsed.token); + } + + return { ok: true, shortcut: tokens.join(" "), tokens }; +} + +type ShortcutChordParseResult = + | { ok: true; token: string } + | { ok: false; message: string }; + +function parseShortcutChord(chord: string): ShortcutChordParseResult { + const parts = chord.split("+").filter((part) => part !== ""); + if (parts.length === 0) return { ok: false, message: "Shortcut chords must include a key." }; + + const modifiers = new Set(); + let key: string | undefined; + for (const part of parts) { + const modifier = modifierAlias(part); + if (modifier !== undefined) { + if (modifiers.has(modifier)) return { ok: false, message: `Shortcut has duplicate ${formatShortcutPart(modifier)} modifiers.` }; + modifiers.add(modifier); + continue; + } + + const normalizedKey = normalizeShortcutKeyName(part); + if (normalizedKey === undefined) return { ok: false, message: `Unsupported shortcut key: ${part}` }; + if (key !== undefined) return { ok: false, message: "Each shortcut chord can include only one non-modifier key." }; + key = normalizedKey; + } + + if (key === undefined) return { ok: false, message: "Shortcut chords must include a key." }; + + const orderedModifiers = modifierOrder.filter((modifier) => modifiers.has(modifier)); + return { ok: true, token: [...orderedModifiers, key].join("+") }; +} + +function modifierAlias(part: string): ShortcutModifier | undefined { + switch (part) { + case "mod": + case "meta": + case "cmd": + case "command": + case "ctrl": + case "control": + case "primary": + return "mod"; + case "alt": + case "option": + case "opt": + return "alt"; + case "shift": + return "shift"; + default: + return undefined; + } +} + +function normalizeShortcutKeyName(key: string): string | undefined { + const alias = keyAlias(key); + if (alias !== undefined) return alias; + if (/^f(?:[1-9]|1[0-9]|2[0-4])$/u.test(key)) return key; + if (key.length === 1) return key; + return undefined; } function normalizeKey(key: string): string | undefined { if (key === " ") return "space"; - if (key.length === 1) return key.toLowerCase(); const normalized = key.toLowerCase(); - if (["enter", "escape", "tab", "arrowup", "arrowdown", "arrowleft", "arrowright", "backspace", "delete"].includes(normalized)) return normalized; - return undefined; + return normalizeShortcutKeyName(normalized); +} + +function keyAlias(key: string): string | undefined { + switch (key) { + case " ": + case "spacebar": + case "space": + return "space"; + case "esc": + case "escape": + return "escape"; + case "return": + case "enter": + return "enter"; + case "del": + case "delete": + return "delete"; + case "backspace": + return "backspace"; + case "tab": + return "tab"; + case "up": + case "arrowup": + return "arrowup"; + case "down": + case "arrowdown": + return "arrowdown"; + case "left": + case "arrowleft": + return "arrowleft"; + case "right": + case "arrowright": + return "arrowright"; + case "pageup": + case "pagedown": + case "home": + case "end": + return key; + case "+": + case "plus": + return "plus"; + case "period": + case "dot": + return "."; + case "comma": + return ","; + case "slash": + return "/"; + case "backslash": + return "\\"; + case "minus": + return "-"; + default: + return undefined; + } +} + +function formatShortcutPart(part: string): string { + if (part === "mod") return isMac() ? "⌘" : "Ctrl"; + if (part === "shift") return "Shift"; + if (part === "alt") return isMac() ? "⌥" : "Alt"; + if (part === "enter") return "Enter"; + if (part === "escape") return "Esc"; + if (part === "space") return "Space"; + if (part === "tab") return "Tab"; + if (part === "backspace") return "Backspace"; + if (part === "delete") return "Delete"; + if (part === "arrowup") return "↑"; + if (part === "arrowdown") return "↓"; + if (part === "arrowleft") return "←"; + if (part === "arrowright") return "→"; + if (part === "pageup") return "PageUp"; + if (part === "pagedown") return "PageDown"; + if (part === "home") return "Home"; + if (part === "end") return "End"; + if (part === "plus") return "+"; + if (/^f(?:[1-9]|1[0-9]|2[0-4])$/u.test(part)) return part.toUpperCase(); + return part.length === 1 ? part.toUpperCase() : `${part.charAt(0).toUpperCase()}${part.slice(1)}`; } function sameTokens(left: string[], right: string[]): boolean { @@ -129,10 +408,6 @@ function startsWithTokens(tokens: string[], prefix: string[]): boolean { return prefix.every((token, index) => tokens[index] === token); } -function isModifiedShortcut(token: string): boolean { - return token.includes("+"); -} - function isMac(): boolean { - return navigator.userAgent.toLowerCase().includes("mac"); + return typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("mac"); } diff --git a/src/client/src/shortcutPreferences.test.ts b/src/client/src/shortcutPreferences.test.ts index 51128e9..7bb453e 100644 --- a/src/client/src/shortcutPreferences.test.ts +++ b/src/client/src/shortcutPreferences.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it } from "vitest"; import type { AppAction } from "./actions"; -import { applyShortcutPreferences } from "./shortcutPreferences"; +import { applyActiveShortcutPreferences, applyShortcutPreferences } from "./shortcutPreferences"; const noop = () => undefined; @@ -26,6 +26,26 @@ describe("shortcut preferences", () => { action({ id: "core:view.chat" }), ]); }); + + it("keeps only active shortcuts when applying preferences for display", () => { + expect(applyActiveShortcutPreferences([ + action({ id: "core:z", title: "Later", shortcut: "mod+k" }), + action({ id: "core:a", title: "Earlier", shortcut: "mod+k" }), + ], undefined)).toEqual([ + action({ id: "core:z", title: "Later" }), + action({ id: "core:a", title: "Earlier", shortcut: "mod+k" }), + ]); + }); + + it("hides default shortcut labels shadowed by user-defined shortcuts", () => { + expect(applyActiveShortcutPreferences([ + action({ id: "core:a", title: "Default", shortcut: "mod+1" }), + action({ id: "core:z", title: "Custom", shortcut: "mod+2" }), + ], { "core:z": "mod+1" })).toEqual([ + action({ id: "core:a", title: "Default" }), + action({ id: "core:z", title: "Custom", shortcut: "mod+1" }), + ]); + }); }); function action(patch: Partial): AppAction { diff --git a/src/client/src/shortcutPreferences.ts b/src/client/src/shortcutPreferences.ts index ff9902e..baed861 100644 --- a/src/client/src/shortcutPreferences.ts +++ b/src/client/src/shortcutPreferences.ts @@ -1,11 +1,19 @@ import type { AppAction } from "./actions"; import type { PiWebShortcutConfig } from "./api"; +import { resolveShortcutBindings } from "./keyboardShortcuts"; export function applyShortcutPreferences(actions: AppAction[], shortcuts: PiWebShortcutConfig | undefined): AppAction[] { if (shortcuts === undefined) return actions; return actions.map((action) => applyShortcutPreference(action, shortcuts)); } +export function applyActiveShortcutPreferences(actions: AppAction[], shortcuts: PiWebShortcutConfig | undefined): AppAction[] { + const activeShortcutActionIds = new Set(resolveShortcutBindings(actions, shortcuts, { enabledOnly: true }) + .filter((binding) => binding.active) + .map((binding) => binding.action.id)); + return applyShortcutPreferences(actions, shortcuts).map((action) => action.shortcut !== undefined && !activeShortcutActionIds.has(action.id) ? withoutShortcut(action) : action); +} + export function applyShortcutPreference(action: AppAction, shortcuts: PiWebShortcutConfig): AppAction { if (!Object.hasOwn(shortcuts, action.id)) return action; const shortcut = shortcuts[action.id]; From b6166842fe2db1dc7995da7ea81044443725b1a0 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Mon, 8 Jun 2026 15:41:52 +0200 Subject: [PATCH 19/28] feat: add resizable side panels --- .changeset/resizable-side-panels.md | 5 + .../src/appShell/panelCollapseController.ts | 6 + .../appShell/panelResizeController.test.ts | 115 +++++++++ .../src/appShell/panelResizeController.ts | 221 ++++++++++++++++++ src/client/src/components/PiWebApp.ts | 110 ++++++++- .../appShell/AppPanelEdgeControl.ts | 171 +++++++++++++- src/client/src/components/shared.ts | 2 +- 7 files changed, 624 insertions(+), 6 deletions(-) create mode 100644 .changeset/resizable-side-panels.md create mode 100644 src/client/src/appShell/panelResizeController.test.ts create mode 100644 src/client/src/appShell/panelResizeController.ts 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/src/client/src/appShell/panelCollapseController.ts b/src/client/src/appShell/panelCollapseController.ts index 668f97b..7356420 100644 --- a/src/client/src/appShell/panelCollapseController.ts +++ b/src/client/src/appShell/panelCollapseController.ts @@ -29,6 +29,12 @@ export class PanelCollapseController implements ReactiveController { 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/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index e842917..6d7118d 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -29,6 +29,7 @@ import { queryNamespace, readNamespacedString, setNamespacedQueryKey } from "../ import { AppShellController } from "../appShell/appShellController"; 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 { applyActiveShortcutPreferences } from "../shortcutPreferences"; @@ -69,6 +70,9 @@ 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 { @@ -76,6 +80,8 @@ export class PiWebApp extends LitElement { @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,6 +134,7 @@ export class PiWebApp extends LitElement { private readonly terminalSelection = new SessionStorageTerminalSelectionMemory(); private readonly appShell = new AppShellController(this); private readonly panelCollapse = new PanelCollapseController(this); + private readonly panelResize = new PanelResizeController(this); private readonly navigationSections = new NavigationSectionsController( this, () => this.state, @@ -742,31 +749,104 @@ export class PiWebApp extends LitElement { } 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 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 renderNavigationPanel() { return html` { 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[] { @@ -1438,7 +1544,7 @@ export class PiWebApp extends LitElement { override render() { const state = this.state; return html` -
    +
    ${this.renderNavigationPanelEdgeControl()}
    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/shared.ts b/src/client/src/components/shared.ts index da0005b..3a98ead 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -56,7 +56,7 @@ export const appStyles = css` @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { :host { --pi-app-safe-area-bottom: env(safe-area-inset-bottom); } } - .shell { --navigation-panel-width: 340px; --workspace-panel-width: minmax(360px, 42vw); display: grid; grid-template-columns: var(--navigation-panel-width) 1px minmax(420px, 1fr) 1px var(--workspace-panel-width); height: 100%; min-height: 0; } + .shell { --navigation-panel-size: 340px; --workspace-panel-size: minmax(360px, 42vw); --navigation-panel-width: var(--navigation-panel-size); --workspace-panel-width: var(--workspace-panel-size); display: grid; grid-template-columns: var(--navigation-panel-width) 1px minmax(320px, 1fr) 1px var(--workspace-panel-width); height: 100%; min-height: 0; } aside { grid-column: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } aside app-navigation-panel { flex: 1 1 auto; min-height: 0; } 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); } From b2a79750a3670b0ce8d660460859492dec068dfe Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Mon, 8 Jun 2026 15:44:52 +0200 Subject: [PATCH 20/28] fix: align machine badge status --- .changeset/right-aligned-machine-status.md | 5 +++++ src/client/src/components/MachineSwitcher.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/right-aligned-machine-status.md 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/src/client/src/components/MachineSwitcher.ts b/src/client/src/components/MachineSwitcher.ts index c32383c..f983409 100644 --- a/src/client/src/components/MachineSwitcher.ts +++ b/src/client/src/components/MachineSwitcher.ts @@ -272,7 +272,7 @@ export class MachineSwitcher extends LitElement implements KeyboardNavigableSect .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 { min-width: 0; display: grid; gap: 1px; } + .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; } From a3b5b722c9e62f1495b43b694928dbca1a520f18 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Mon, 8 Jun 2026 17:20:00 +0200 Subject: [PATCH 21/28] feat: add safe session bulk cleanup actions --- .changeset/session-lifecycle-actions.md | 5 + src/client/src/api/clients.ts | 2 + .../src/api/federatedRouteContract.test.ts | 1 + src/client/src/api/parsers.ts | 6 + src/client/src/components/PiWebApp.ts | 3 + src/client/src/components/SessionList.ts | 260 +++++++++++++++--- .../components/appShell/AppNavigationPanel.ts | 6 + .../src/controllers/sessionController.test.ts | 60 ++++ .../src/controllers/sessionController.ts | 83 ++++++ src/server/sessions/piSessionService.test.ts | 27 ++ src/server/sessions/piSessionService.ts | 18 +- .../sessions/sessionArchiveStore.test.ts | 27 ++ src/server/sessions/sessionArchiveStore.ts | 12 + src/server/sessions/sessionRoutes.ts | 9 + src/shared/federatedRoutes.ts | 1 + 15 files changed, 474 insertions(+), 46 deletions(-) create mode 100644 .changeset/session-lifecycle-actions.md diff --git a/.changeset/session-lifecycle-actions.md b/.changeset/session-lifecycle-actions.md new file mode 100644 index 0000000..6063035 --- /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. diff --git a/src/client/src/api/clients.ts b/src/client/src/api/clients.ts index aab597e..e1588b0 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, @@ -98,6 +99,7 @@ export const sessionsApi = { archive: (sessionId: string, machineId = "local") => request(`${machinePrefix(machineId)}/sessions/${sessionId}/archive`, parseArchived, { method: "POST" }), archiveWithDescendants: (sessionId: string, machineId = "local") => request(`${machinePrefix(machineId)}/sessions/${sessionId}/archive-tree`, parseArchived, { method: "POST" }), restore: (sessionId: string, machineId = "local") => request(`${machinePrefix(machineId)}/sessions/${sessionId}/restore`, parseRestored, { method: "POST" }), + deleteArchived: (sessionId: string, machineId = "local") => request(`${machinePrefix(machineId)}/sessions/${sessionId}`, parseDeleted, { method: "DELETE" }), detachParent: (sessionId: string, machineId = "local") => request(`${machinePrefix(machineId)}/sessions/${sessionId}/detach-parent`, parseDetached, { method: "POST" }), 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 5104513..903f078 100644 --- a/src/client/src/api/federatedRouteContract.test.ts +++ b/src/client/src/api/federatedRouteContract.test.ts @@ -58,6 +58,7 @@ describe("federated route contract", () => { ignoreParseFailure(sessionsApi.archive("s 1", machineId)), ignoreParseFailure(sessionsApi.archiveWithDescendants("s 1", machineId)), ignoreParseFailure(sessionsApi.restore("s 1", machineId)), + ignoreParseFailure(sessionsApi.deleteArchived("s 1", machineId)), ignoreParseFailure(sessionsApi.detachParent("s 1", machineId)), ignoreParseFailure(sessionsApi.authProviders({ mode: "login", authType: "oauth", machineId })), ignoreParseFailure(sessionsApi.saveApiKey("openai", "key", machineId)), diff --git a/src/client/src/api/parsers.ts b/src/client/src/api/parsers.ts index 6da7872..bc55552 100644 --- a/src/client/src/api/parsers.ts +++ b/src/client/src/api/parsers.ts @@ -638,6 +638,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/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 6d7118d..962c65a 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -890,8 +890,11 @@ export class PiWebApp extends LitElement { .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)} + .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(); }} diff --git a/src/client/src/components/SessionList.ts b/src/client/src/components/SessionList.ts index 1c62994..7426799 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -1,4 +1,4 @@ -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"; @@ -20,6 +20,8 @@ interface SessionRow { hasMissingParent: boolean; } +type SessionSelectionScope = "current" | "archived"; + @customElement("session-list") export class SessionList extends LitElement implements KeyboardNavigableSection { @property({ attribute: false }) sessions: SessionInfo[] = []; @@ -36,18 +38,25 @@ export class SessionList extends LitElement implements KeyboardNavigableSection @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(); @@ -60,9 +69,12 @@ export class SessionList extends LitElement implements KeyboardNavigableSection } 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; @@ -78,19 +90,22 @@ export class SessionList extends LitElement implements KeyboardNavigableSection } 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 = sessionRowsForCurrentSessions(this.sessions); + const archivedRows = sessionRows(this.sessions.filter((session) => session.archived === true)); const descendantCounts = unarchivedDescendantCounts(this.sessions); return html`
    - ${this.renderHeading(activeRows.length + archivedRows.length)} + ${this.renderHeading(currentRows.length + archivedRows.length, currentRows.map((row) => row.session))} ${this.collapsed ? null : html`
    - ${activeRows.map((row) => this.renderSession(row, descendantCounts.get(row.session.id) ?? 0))} + ${this.renderCurrentSelectionToolbar(currentRows.map((row) => row.session))} + ${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}
    `} @@ -98,31 +113,96 @@ export class SessionList extends LitElement implements KeyboardNavigableSection `; } - 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} + + + +
    + `; + } + + private renderSession(row: SessionRow, descendantCount: number, scope: SessionSelectionScope) { const { session } = row; const cappedDepth = Math.min(row.depth, 2); + const showsCheckbox = this.selectionScopes.has(scope); + const bulkSelected = showsCheckbox && this.selectedSessionIds.has(session.id); return html`
    { activateSelectableRow(event, () => this.onSelect?.(session)); }} - @keydown=${(event: KeyboardEvent) => { this.handleSessionKeydown(event, session); }} + @click=${(event: MouseEvent) => { activateSelectableRow(event, () => { this.activateSessionRow(session, scope); }); }} + @keydown=${(event: KeyboardEvent) => { this.handleSessionKeydown(event, session, scope); }} > -
    +
    + ${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)}
    @@ -130,12 +210,15 @@ export class SessionList extends LitElement implements KeyboardNavigableSection ${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} `} @@ -146,20 +229,99 @@ export class SessionList extends LitElement implements KeyboardNavigableSection `; } - private handleSessionKeydown(event: KeyboardEvent, session: SessionInfo): void { + private handleSessionKeydown(event: KeyboardEvent, session: SessionInfo, scope: SessionSelectionScope): void { handleSelectableRowKeyboard(event, { - activate: () => this.onSelect?.(session), + 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)) { + 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 (confirm(`Permanently delete archived session “${sessionLabel(session)}”? This cannot be undone.`)) void this.onDeleteArchived?.(session); + } + + private confirmDeleteSelectedArchived(): void { + 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; @@ -173,6 +335,7 @@ export class SessionList extends LitElement implements KeyboardNavigableSection this.archivedExpanded = !this.archivedExpanded; if (!this.archivedExpanded) { this.openMenuSessionId = undefined; + if (this.selectionScopes.has("archived")) this.closeSelection("archived"); this.onArchivedCollapsed?.(); } } @@ -192,7 +355,29 @@ export class SessionList extends LitElement implements KeyboardNavigableSection return renderActionActivityIndicator(isSessionActive(this.statuses[session.id], this.activities[session.id]) ? "session" : undefined, "Session active"); } - static override styles = listStyles; + 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.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 { @@ -220,23 +405,8 @@ function unarchivedDescendantCounts(sessions: SessionInfo[]): Map [session.id, countFor(session, new Set())])); } -function sessionRowsForActiveTree(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 parent = byPath.get(parentPath); - if (parent === undefined) break; - visible.add(parent.id); - parentPath = parent.parentSessionPath; - } - } - return sessionRows(sessions.filter((session) => visible.has(session.id))); +function sessionRowsForCurrentSessions(sessions: SessionInfo[]): SessionRow[] { + return sessionRows(sessions.filter((session) => session.archived !== true)); } function sessionRows(sessions: SessionInfo[]): SessionRow[] { diff --git a/src/client/src/components/appShell/AppNavigationPanel.ts b/src/client/src/components/appShell/AppNavigationPanel.ts index 57f6728..e07d007 100644 --- a/src/client/src/components/appShell/AppNavigationPanel.ts +++ b/src/client/src/components/appShell/AppNavigationPanel.ts @@ -52,8 +52,11 @@ export class AppNavigationPanel extends LitElement { @property({ attribute: false }) onSelectSession?: (session: SessionInfo) => void | Promise; @property({ attribute: false }) onArchiveSession?: (session: SessionInfo) => void | Promise; @property({ attribute: false }) onArchiveSessionWithDescendants?: (session: SessionInfo) => void | Promise; + @property({ attribute: false }) onArchiveSessions?: (sessions: SessionInfo[]) => void | Promise; @property({ attribute: false }) onRestoreSession?: (session: SessionInfo) => void | Promise; @property({ attribute: false }) onDeleteCachedNewSession?: (session: SessionInfo) => void | Promise; + @property({ attribute: false }) onDeleteArchivedSession?: (session: SessionInfo) => void | Promise; + @property({ attribute: false }) onDeleteArchivedSessions?: (sessions: SessionInfo[]) => void | Promise; @property({ attribute: false }) onDetachParentSession?: (session: SessionInfo) => void | Promise; @property({ attribute: false }) onArchivedCollapsed?: () => void | Promise; @property({ attribute: false }) onSelectMachine?: (machine: Machine) => void | Promise; @@ -156,8 +159,11 @@ 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"); }} diff --git a/src/client/src/controllers/sessionController.test.ts b/src/client/src/controllers/sessionController.test.ts index eead33c..4bbc5b0 100644 --- a/src/client/src/controllers/sessionController.test.ts +++ b/src/client/src/controllers/sessionController.test.ts @@ -290,6 +290,66 @@ describe("SessionController", () => { expect(state.selectedSession?.id).toBe(nextSession.id); }); + it("archives selected sessions in bulk", async () => { + const secondSession = { ...oldSession, id: "second-session", path: "/tmp/second-session.jsonl" }; + const nextSession = { ...oldSession, id: "next-session", path: "/tmp/next-session.jsonl" }; + const archivedIds: string[] = []; + let state: AppState = { ...initialAppState(), selectedWorkspace: workspace, sessions: [oldSession, secondSession, nextSession] }; + const api: typeof defaultApi = { + ...defaultApi, + archive: (sessionId) => { + archivedIds.push(sessionId); + return Promise.resolve({ archived: true }); + }, + messages: () => Promise.resolve(emptyPage), + status: (sessionId) => Promise.resolve(status(sessionId)), + }; + const controller = new SessionController( + () => state, + (patch) => { state = { ...state, ...patch }; }, + () => undefined, + new InMemorySessionSelectionMemory(), + { api, socket: new FakeSocket() }, + ); + + await controller.selectSession(oldSession, { updateUrl: false }); + await controller.archiveSessions([oldSession, secondSession]); + + expect(archivedIds).toEqual([oldSession.id, secondSession.id]); + expect(state.sessions.find((session) => session.id === oldSession.id)).toMatchObject({ archived: true }); + expect(state.sessions.find((session) => session.id === secondSession.id)).toMatchObject({ archived: true }); + expect(state.selectedSession?.id).toBe(nextSession.id); + }); + + it("deletes selected archived sessions in bulk and selects the next current session", async () => { + const archivedSession = { ...oldSession, archived: true, archivedAt: "later" }; + const nextSession = { ...oldSession, id: "next-session", path: "/tmp/next-session.jsonl" }; + const deletedIds: string[] = []; + let state: AppState = { ...initialAppState(), selectedWorkspace: workspace, selectedSession: archivedSession, sessions: [archivedSession, nextSession] }; + const api: typeof defaultApi = { + ...defaultApi, + deleteArchived: (sessionId) => { + deletedIds.push(sessionId); + return Promise.resolve({ deleted: true }); + }, + messages: () => Promise.resolve(emptyPage), + status: (sessionId) => Promise.resolve(status(sessionId)), + }; + const controller = new SessionController( + () => state, + (patch) => { state = { ...state, ...patch }; }, + () => undefined, + new InMemorySessionSelectionMemory(), + { api, socket: new FakeSocket() }, + ); + + await controller.deleteArchivedSessions([archivedSession]); + + expect(deletedIds).toEqual([archivedSession.id]); + expect(state.sessions.map((session) => session.id)).toEqual([nextSession.id]); + expect(state.selectedSession?.id).toBe(nextSession.id); + }); + it("forgets archived selections when the archived section collapse clears selection", async () => { const archivedSession = { ...oldSession, archived: true, archivedAt: "later" }; let state: AppState = { ...initialAppState(), selectedWorkspace: workspace, sessions: [archivedSession] }; diff --git a/src/client/src/controllers/sessionController.ts b/src/client/src/controllers/sessionController.ts index 3bc4bba..ff13d92 100644 --- a/src/client/src/controllers/sessionController.ts +++ b/src/client/src/controllers/sessionController.ts @@ -261,6 +261,52 @@ export class SessionController { } } + async archiveSessions(sessions: readonly SessionInfo[]): Promise { + const candidates = uniqueSessionsById(sessions).filter((session) => session.archived !== true && !isCachedNewSessionInfo(session)); + if (candidates.length === 0) return; + + const machineId = selectedMachineId(this.getState()); + const results = await Promise.allSettled(candidates.map(async (session) => { + await this.api.archive(session.id, machineId); + return session.id; + })); + const archivedIds = fulfilledValues(results); + if (archivedIds.length > 0) { + const state = this.getState(); + const nextSessions = markSessionsArchived(state.sessions, archivedIds, new Date().toISOString()); + const selectionChange = selectionAfterArchivingSessions(nextSessions, state.selectedSession?.id, archivedIds); + this.setState({ sessions: nextSessions }); + + if (selectionChange.type === "select") await this.selectSession(selectionChange.session); + else if (selectionChange.type === "clear") this.deselectSession({ forgetRememberedSelection: true }); + } + this.applyBulkSessionError("Archive", results); + } + + async deleteArchivedSessions(sessions: readonly SessionInfo[]): Promise { + const candidates = uniqueSessionsById(sessions).filter((session) => session.archived === true); + if (candidates.length === 0) return; + + const machineId = selectedMachineId(this.getState()); + const results = await Promise.allSettled(candidates.map(async (session) => { + await this.api.deleteArchived(session.id, machineId); + return session.id; + })); + const deletedIds = fulfilledValues(results); + if (deletedIds.length > 0) { + const deletedIdSet = new Set(deletedIds); + const state = this.getState(); + const nextSessions = state.sessions.filter((session) => !deletedIdSet.has(session.id)); + this.setState({ sessions: nextSessions }); + if (state.selectedSession !== undefined && deletedIdSet.has(state.selectedSession.id)) { + const next = nextSessions.find((session) => session.archived !== true) ?? nextSessions[0]; + if (next !== undefined) await this.selectSession(next); + else this.deselectSession({ forgetRememberedSelection: true }); + } + } + this.applyBulkSessionError("Delete", results); + } + async deleteCachedNewSession(session = this.getState().selectedSession) { if (!isCachedNewSessionInfo(session)) return; void this.api.stop(session.id, selectedMachineId(this.getState())).catch(() => { @@ -397,6 +443,12 @@ export class SessionController { } } + private applyBulkSessionError(action: string, results: readonly PromiseSettledResult[]): void { + const failures = rejectedReasons(results); + if (failures.length === 0) return; + this.setState({ error: `${action} failed for ${String(failures.length)} session${failures.length === 1 ? "" : "s"}: ${failures.join("; ")}` }); + } + private sessionCacheKey(sessionId: string): string { return machineSessionKey(selectedMachineId(this.getState()), sessionId); } @@ -561,6 +613,37 @@ function omitSessionActivity(activities: Record, sessio return Object.fromEntries(Object.entries(activities).filter(([id]) => id !== sessionId)); } +function uniqueSessionsById(sessions: readonly SessionInfo[]): SessionInfo[] { + const seen = new Set(); + const unique: SessionInfo[] = []; + for (const session of sessions) { + if (seen.has(session.id)) continue; + seen.add(session.id); + unique.push(session); + } + return unique; +} + +function fulfilledValues(results: readonly PromiseSettledResult[]): T[] { + return results.filter(isFulfilled).map((result) => result.value); +} + +function rejectedReasons(results: readonly PromiseSettledResult[]): string[] { + return results.filter(isRejected).map((result) => errorMessage(result.reason)); +} + +function isFulfilled(result: PromiseSettledResult): result is PromiseFulfilledResult { + return result.status === "fulfilled"; +} + +function isRejected(result: PromiseSettledResult): result is PromiseRejectedResult { + return result.status === "rejected"; +} + +function errorMessage(error: unknown): string { + return error instanceof Error ? error.message : String(error); +} + function sessionMessageCountPatch(state: AppState, sessionId: string, messageCount: number | undefined): Pick, "sessions" | "selectedSession"> { if (messageCount === undefined) return {}; diff --git a/src/server/sessions/piSessionService.test.ts b/src/server/sessions/piSessionService.test.ts index f04535e..d7133e5 100644 --- a/src/server/sessions/piSessionService.test.ts +++ b/src/server/sessions/piSessionService.test.ts @@ -318,6 +318,33 @@ describe("PiSessionService", () => { await service.dispose(); }); + it("permanently deletes archived sessions through the archive store", async () => { + const deletedSessionIds: string[] = []; + const service = new PiSessionService(new CapturingSessionEventHub(), { + archiveStore: { + list: () => Promise.resolve([]), + get: (sessionId) => Promise.resolve(sessionId === "archived" || "archived".startsWith(sessionId) + ? { sessionId: "archived", cwd: "/workspace", archivedAt: "2026-01-02T00:00:00.000Z", archivePath: "/archive/archived.jsonl" } + : undefined), + archive: () => { throw new Error("archive should not be called for records that already have archive files"); }, + restore: () => Promise.resolve(), + isArchived: () => Promise.resolve(false), + deleteArchived: (sessionId) => { + deletedSessionIds.push(sessionId); + return Promise.resolve(); + }, + }, + sessionManager: sessionGateway([sessionRecord("active")]), + heartbeatIntervalMs: 60_000, + }); + + await expect(service.deleteArchived("arch")).resolves.toBeUndefined(); + await expect(service.deleteArchived("active")).rejects.toThrow("Archived session not found"); + + expect(deletedSessionIds).toEqual(["archived"]); + await service.dispose(); + }); + it("reconciles workspace activity when listing only archived sessions", async () => { const reconciliations: { cwd: string; sessionIds: string[] }[] = []; const service = new PiSessionService(new CapturingSessionEventHub(), { diff --git a/src/server/sessions/piSessionService.ts b/src/server/sessions/piSessionService.ts index 26b6df8..0f23c6a 100644 --- a/src/server/sessions/piSessionService.ts +++ b/src/server/sessions/piSessionService.ts @@ -52,7 +52,7 @@ function parsePromptStreamingBehavior(value: unknown): QueuedPromptKind | undefi throw new Error('Prompt streamingBehavior must be "steer" or "followUp"'); } -type SessionArchiveRepository = Pick; +type SessionArchiveRepository = Pick & { deleteArchived?: (sessionId: string) => Promise }; interface PiSessionListEntry { id: string; path: string; @@ -489,6 +489,16 @@ export class PiSessionService { await this.archiveStore.restore(sessionId); } + async deleteArchived(sessionId: string): Promise { + const record = await this.archiveStore.get(sessionId); + if (record === undefined) throw new Error("Archived session not found"); + if (this.archiveStore.deleteArchived === undefined) throw new Error("Archive store does not support deletion"); + + await this.closeActive(record.sessionId); + if (record.archivePath === undefined) await this.ensureArchivedRecordMoved(record); + await this.archiveStore.deleteArchived(record.sessionId); + } + async detachParent(sessionId: string): Promise { const session = await this.getOrOpen(sessionId); const sessionFile = session.sessionFile; @@ -530,6 +540,12 @@ export class PiSessionService { } } + private async ensureArchivedRecordMoved(record: ArchivedSessionRecord): Promise { + const session = (await this.sessionManager.list(record.cwd)).find((candidate) => candidate.id === record.sessionId); + if (session === undefined) return record; + return this.archiveStore.archive(archiveInputFromListEntry(session)); + } + private async archiveInputForSession(session: PiAgentSession): Promise { const cwd = session.sessionManager.getCwd(); const sessionFile = session.sessionFile; diff --git a/src/server/sessions/sessionArchiveStore.test.ts b/src/server/sessions/sessionArchiveStore.test.ts index f228b8c..ac441fa 100644 --- a/src/server/sessions/sessionArchiveStore.test.ts +++ b/src/server/sessions/sessionArchiveStore.test.ts @@ -44,6 +44,33 @@ describe("SessionArchiveStore", () => { expect(await exists(record.archivePath)).toBe(false); await expect(store.list()).resolves.toEqual([]); }); + + it("permanently deletes archived session files and records", async () => { + const root = await mkdtemp(join(tmpdir(), "pi-web-archive-delete-")); + tempRoots.push(root); + const activeDir = join(root, "active"); + await mkdir(activeDir, { recursive: true }); + const sourcePath = join(activeDir, "2026-01-01_s1.jsonl"); + await writeFile(sourcePath, "session contents\n", "utf8"); + + const store = new SessionArchiveStore(join(root, "archived-sessions.json"), join(root, "archived-files")); + const record = await store.archive({ + sessionId: "s1", + cwd: "/workspace", + path: sourcePath, + created: "2026-01-01T00:00:00.000Z", + modified: "2026-01-01T00:01:00.000Z", + messageCount: 2, + firstMessage: "hello", + }); + + if (record.archivePath === undefined) throw new Error("Expected archive path"); + await store.deleteArchived("s1"); + + expect(await exists(sourcePath)).toBe(false); + expect(await exists(record.archivePath)).toBe(false); + await expect(store.list()).resolves.toEqual([]); + }); }); async function exists(path: string): Promise { diff --git a/src/server/sessions/sessionArchiveStore.ts b/src/server/sessions/sessionArchiveStore.ts index 7c55a50..3655d92 100644 --- a/src/server/sessions/sessionArchiveStore.ts +++ b/src/server/sessions/sessionArchiveStore.ts @@ -88,6 +88,18 @@ export class SessionArchiveStore { }); } + async deleteArchived(sessionId: string): Promise { + await this.exclusive(async () => { + const data = await this.read(); + const record = data.sessions.find((session) => session.sessionId === sessionId); + if (record === undefined) return; + + if (record.archivePath !== undefined && await pathExists(record.archivePath)) await unlink(record.archivePath); + const sessions = data.sessions.filter((session) => session.sessionId !== sessionId); + await this.write({ sessions }); + }); + } + async isArchived(sessionId: string): Promise { return (await this.get(sessionId)) !== undefined; } diff --git a/src/server/sessions/sessionRoutes.ts b/src/server/sessions/sessionRoutes.ts index 5fa9aab..91b637a 100644 --- a/src/server/sessions/sessionRoutes.ts +++ b/src/server/sessions/sessionRoutes.ts @@ -164,6 +164,15 @@ export function registerSessionRoutes(app: FastifyInstance, sessions: PiSessionS } }); + app.delete<{ Params: { sessionId: string } }>(`${prefix}/sessions/:sessionId`, async (request, reply) => { + try { + await sessions.deleteArchived(request.params.sessionId); + return { deleted: true }; + } catch (error) { + return reply.code(400).send({ error: error instanceof Error ? error.message : String(error) }); + } + }); + app.post<{ Params: { sessionId: string } }>(`${prefix}/sessions/:sessionId/detach-parent`, async (request, reply) => { try { await sessions.detachParent(request.params.sessionId); diff --git a/src/shared/federatedRoutes.ts b/src/shared/federatedRoutes.ts index 1796f8e..aae3d84 100644 --- a/src/shared/federatedRoutes.ts +++ b/src/shared/federatedRoutes.ts @@ -48,6 +48,7 @@ export const FEDERATED_HTTP_ROUTES = [ { method: "POST", path: "/sessions/:sessionId/archive" }, { method: "POST", path: "/sessions/:sessionId/archive-tree" }, { method: "POST", path: "/sessions/:sessionId/restore" }, + { method: "DELETE", path: "/sessions/:sessionId" }, { method: "POST", path: "/sessions/:sessionId/detach-parent" }, { method: "GET", path: "/auth/providers" }, { method: "POST", path: "/auth/api-key" }, From fc20b95fed1e42a39e3e23dc63cb0a06717f0a65 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Tue, 9 Jun 2026 11:40:17 +0200 Subject: [PATCH 22/28] feat: gate session cleanup by runtime capabilities --- .changeset/session-lifecycle-actions.md | 2 +- src/client/src/api.ts | 2 +- src/client/src/api/clients.test.ts | 14 ++- src/client/src/api/clients.ts | 4 + src/client/src/api/parsers.test.ts | 15 ++- src/client/src/api/parsers.ts | 50 ++++++++- src/client/src/appState.ts | 4 +- src/client/src/components/PiWebApp.ts | 23 +++- src/client/src/components/SessionList.ts | 8 +- .../components/appShell/AppNavigationPanel.ts | 4 + .../src/controllers/machineController.ts | 21 +++- .../src/controllers/sessionController.test.ts | 35 +++++- .../src/controllers/sessionController.ts | 6 + src/server/app.test.ts | 35 ++++++ src/server/app.ts | 12 +- src/server/machines/machineRoutes.ts | 6 + src/server/machines/machineService.ts | 86 ++++++++++++++- src/server/piWebStatus.ts | 103 ++++++++++++++++-- src/server/sessiond.ts | 26 +++-- src/server/sessiond/sessionProxyRoutes.ts | 1 + src/shared/apiTypes.ts | 36 ++++++ src/shared/capabilities.ts | 32 ++++++ src/shared/piWebStatusParsing.ts | 41 ++++++- 23 files changed, 528 insertions(+), 38 deletions(-) create mode 100644 src/shared/capabilities.ts diff --git a/.changeset/session-lifecycle-actions.md b/.changeset/session-lifecycle-actions.md index 6063035..4bef5cc 100644 --- a/.changeset/session-lifecycle-actions.md +++ b/.changeset/session-lifecycle-actions.md @@ -2,4 +2,4 @@ "@jmfederico/pi-web": patch --- -Add safe bulk session actions for archiving current sessions and permanently deleting archived sessions. +Add safe bulk session actions for archiving current sessions and permanently deleting archived sessions, with runtime capability checks for remote compatibility. diff --git a/src/client/src/api.ts b/src/client/src/api.ts index 547421a..1da9db8 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, 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, 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..3575f0b 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, terminalsApi, workspacesApi } from "./clients"; const workspace: Workspace = { id: "w/1", @@ -29,6 +30,17 @@ afterEach(() => { vi.unstubAllGlobals(); }); +describe("machine-scoped runtime API", () => { + 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 e1588b0..5530577 100644 --- a/src/client/src/api/clients.ts +++ b/src/client/src/api/clients.ts @@ -17,12 +17,14 @@ import { parseGitStatusResponse, parseMachine, parseMachineHealth, + parseMachineRuntime, parseMachinesResponse, parseMessagePage, parseModelSelectionResponse, parseOAuthFlowState, parsePiWebConfigResponse, parsePiWebPluginsResponse, + parsePiWebRuntimeResponse, parsePiWebStatusResponse, parseProject, parseRestored, @@ -42,6 +44,7 @@ const machinePrefix = (machineId = "local") => `/api/machines/${encodeURICompone export const piWebApi = { piWebStatus: () => request("/api/pi-web/status", parsePiWebStatusResponse), + piWebRuntime: () => request("/api/pi-web/runtime", parsePiWebRuntimeResponse), }; export const machinesApi = { @@ -49,6 +52,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 = { diff --git a/src/client/src/api/parsers.test.ts b/src/client/src/api/parsers.test.ts index 1c36ed0..e12ba43 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,6 +19,18 @@ 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 }], diff --git a/src/client/src/api/parsers.ts b/src/client/src/api/parsers.ts index bc55552..7e40afe 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}`); @@ -497,11 +513,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 +614,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; 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/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 962c65a..f414aad 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"; @@ -847,6 +848,22 @@ export class PiWebApp extends LitElement { 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"; + const runtime = this.selectedMachineRuntime(); + if (runtime?.ok === false && runtime.error !== undefined) return `Update and restart Pi-Web on ${machineName} to delete archived sessions. Runtime check failed: ${runtime.error}`; + 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` { 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(), diff --git a/src/client/src/components/SessionList.ts b/src/client/src/components/SessionList.ts index 7426799..aab4877 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -29,6 +29,8 @@ export class SessionList extends LitElement implements KeyboardNavigableSection @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; @@ -180,7 +182,7 @@ export class SessionList extends LitElement implements KeyboardNavigableSection
    ${selectedSessions.length} selected${visibleSelectedCount !== selectedSessions.length ? html` · ${visibleSelectedCount} visible` : null} - +
    @@ -215,7 +217,7 @@ export class SessionList extends LitElement implements KeyboardNavigableSection : session.archived === true ? html` - + ` : html` ${session.parentSessionPath !== undefined ? html`` : null} @@ -252,10 +254,12 @@ export class SessionList extends LitElement implements KeyboardNavigableSection } 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"; diff --git a/src/client/src/components/appShell/AppNavigationPanel.ts b/src/client/src/components/appShell/AppNavigationPanel.ts index e07d007..bc4a10b 100644 --- a/src/client/src/components/appShell/AppNavigationPanel.ts +++ b/src/client/src/components/appShell/AppNavigationPanel.ts @@ -39,6 +39,8 @@ export class AppNavigationPanel extends LitElement { @property({ type: Boolean }) workspacesCollapsed = false; @property({ type: Boolean }) sessionsCollapsed = false; @property({ type: Boolean }) canStartSession = false; + @property({ type: Boolean }) canDeleteArchivedSessions = false; + @property({ type: String }) archivedDeleteUnavailableMessage = "Update and restart Pi-Web on this machine to delete archived sessions."; @property({ attribute: false }) onShowActions?: () => void; @property({ attribute: false }) onToggleMachines?: () => void; @property({ attribute: false }) onToggleProjects?: () => void; @@ -151,6 +153,8 @@ export class AppNavigationPanel extends LitElement { .activities=${this.sessionActivities} .selected=${this.selectedSession} .canStart=${this.canStartSession} + .canDeleteArchived=${this.canDeleteArchivedSessions} + .archivedDeleteUnavailableMessage=${this.archivedDeleteUnavailableMessage} .collapsible=${this.collapsible} .collapsed=${this.sessionsCollapsed} .onToggleCollapsed=${() => { this.onToggleSessions?.(); }} diff --git a/src/client/src/controllers/machineController.ts b/src/client/src/controllers/machineController.ts index f179df7..1b92520 100644 --- a/src/client/src/controllers/machineController.ts +++ b/src/client/src/controllers/machineController.ts @@ -12,8 +12,9 @@ export class MachineController { const machines = await api.machines(); const selectedMachine = await this.selectInitialMachine(machines, routeMachineId); const machineIds = new Set(machines.map((machine) => machine.id)); - this.setState({ machines, selectedMachine, machineActivities: filterKeys(this.getState().machineActivities, machineIds) }); + this.setState({ machines, selectedMachine, machineActivities: filterKeys(this.getState().machineActivities, machineIds), machineRuntimes: filterKeys(this.getState().machineRuntimes, machineIds) }); void this.refreshMachineHealthFor(machines); + void this.refreshMachineRuntimeFor(machines); } catch (error) { this.setState({ error: String(error) }); } finally { @@ -47,6 +48,7 @@ export class MachineController { if (options.updateUrl !== false) this.updateUrl(); await this.projects.loadProjects(); void this.refreshMachineHealth(machine.id); + void this.refreshMachineRuntime(machine.id); } async addMachine(input: { name: string; baseUrl: string; token?: string }): Promise { @@ -73,7 +75,7 @@ export class MachineController { await api.deleteMachine(machine.id); const machines = this.getState().machines.filter((candidate) => candidate.id !== machine.id); const local = machines.find((candidate) => candidate.id === "local") ?? machines[0]; - this.setState({ machines, machineStatuses: omitKey(this.getState().machineStatuses, machine.id), machineActivities: omitKey(this.getState().machineActivities, machine.id) }); + this.setState({ machines, machineStatuses: omitKey(this.getState().machineStatuses, machine.id), machineRuntimes: omitKey(this.getState().machineRuntimes, machine.id), machineActivities: omitKey(this.getState().machineActivities, machine.id) }); if (wasSelected && local !== undefined) { if (options.selectFallback === false) return local; await this.selectMachine(local); @@ -95,6 +97,15 @@ export class MachineController { } } + async refreshMachineRuntime(machineId = this.getState().selectedMachine?.id ?? "local"): Promise { + try { + const runtime = await api.runtime(machineId); + this.setState({ machineRuntimes: { ...this.getState().machineRuntimes, [runtime.machineId]: runtime } }); + } catch (error) { + this.setState({ error: String(error) }); + } + } + private async selectInitialMachine(machines: Machine[], routeMachineId?: string): Promise { const requestedMachine = machines.find((machine) => machine.id === (routeMachineId ?? "local")); if (requestedMachine?.kind !== "remote") return requestedMachine ?? this.localMachine(machines); @@ -133,6 +144,12 @@ export class MachineController { const health = Object.fromEntries(results.flatMap((result) => result.status === "fulfilled" ? [[result.value.machineId, result.value] as const] : [])); if (Object.keys(health).length > 0) this.setState({ machineStatuses: { ...this.getState().machineStatuses, ...health } }); } + + private async refreshMachineRuntimeFor(machines: Machine[]): Promise { + const results = await Promise.allSettled(machines.map((machine) => api.runtime(machine.id))); + const runtimes = Object.fromEntries(results.flatMap((result) => result.status === "fulfilled" ? [[result.value.machineId, result.value] as const] : [])); + if (Object.keys(runtimes).length > 0) this.setState({ machineRuntimes: { ...this.getState().machineRuntimes, ...runtimes } }); + } } function omitKey(record: Record, keyToOmit: string): Record { diff --git a/src/client/src/controllers/sessionController.test.ts b/src/client/src/controllers/sessionController.test.ts index 4bbc5b0..f58879c 100644 --- a/src/client/src/controllers/sessionController.test.ts +++ b/src/client/src/controllers/sessionController.test.ts @@ -3,6 +3,7 @@ import { api as defaultApi, type MessagePage, type SessionActivity, type Session import { isCachedNewSessionInfo, loadCachedNewSessions, markCachedNewSessionInfo, rememberCachedNewSession } from "../cachedNewSessions"; import { initialAppState, type AppState } from "../appState"; import { machineSessionKey } from "../machineKeys"; +import { PI_WEB_CAPABILITIES } from "../../../shared/capabilities"; import { loadDraft, saveDraft } from "../promptDraftStorage"; import { SessionController, type SessionEventSocket } from "./sessionController"; import { InMemorySessionSelectionMemory } from "./sessionSelection"; @@ -325,7 +326,13 @@ describe("SessionController", () => { const archivedSession = { ...oldSession, archived: true, archivedAt: "later" }; const nextSession = { ...oldSession, id: "next-session", path: "/tmp/next-session.jsonl" }; const deletedIds: string[] = []; - let state: AppState = { ...initialAppState(), selectedWorkspace: workspace, selectedSession: archivedSession, sessions: [archivedSession, nextSession] }; + let state: AppState = { + ...initialAppState(), + selectedWorkspace: workspace, + selectedSession: archivedSession, + sessions: [archivedSession, nextSession], + machineRuntimes: { local: { machineId: "local", ok: true, checkedAt: "now", capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] } }, + }; const api: typeof defaultApi = { ...defaultApi, deleteArchived: (sessionId) => { @@ -350,6 +357,32 @@ describe("SessionController", () => { expect(state.selectedSession?.id).toBe(nextSession.id); }); + it("does not delete archived sessions when the selected machine runtime does not support it", async () => { + const archivedSession = { ...oldSession, archived: true, archivedAt: "later" }; + const deletedIds: string[] = []; + let state: AppState = { ...initialAppState(), selectedWorkspace: workspace, sessions: [archivedSession] }; + const api: typeof defaultApi = { + ...defaultApi, + deleteArchived: (sessionId) => { + deletedIds.push(sessionId); + return Promise.resolve({ deleted: true }); + }, + }; + const controller = new SessionController( + () => state, + (patch) => { state = { ...state, ...patch }; }, + () => undefined, + new InMemorySessionSelectionMemory(), + { api, socket: new FakeSocket() }, + ); + + await controller.deleteArchivedSessions([archivedSession]); + + expect(deletedIds).toEqual([]); + expect(state.sessions).toEqual([archivedSession]); + expect(state.error).toContain("requires an updated Pi-Web runtime"); + }); + it("forgets archived selections when the archived section collapse clears selection", async () => { const archivedSession = { ...oldSession, archived: true, archivedAt: "later" }; let state: AppState = { ...initialAppState(), selectedWorkspace: workspace, sessions: [archivedSession] }; diff --git a/src/client/src/controllers/sessionController.ts b/src/client/src/controllers/sessionController.ts index ff13d92..b0a6bb7 100644 --- a/src/client/src/controllers/sessionController.ts +++ b/src/client/src/controllers/sessionController.ts @@ -8,6 +8,7 @@ import { ChatTranscriptStore } from "../chatTranscriptStore"; import { isShellInput } from "../inputModes"; import { SessionSocket, type GlobalSessionEvent, type SessionUiEvent } from "../sessionSocket"; import { isSessionActive } from "../../../shared/activity"; +import { PI_WEB_CAPABILITIES, supportsPiWebCapability } from "../../../shared/capabilities"; import { InMemorySessionSelectionMemory, markSessionArchived, markSessionsArchived, selectPreferredSession, selectionAfterArchivingSession, selectionAfterArchivingSessions, shouldDeselectAfterArchivedCollapse, type SessionSelectionMemory } from "./sessionSelection"; import { selectedMachineId, type GetState, type SetState, type UpdateUrl } from "./types"; @@ -288,6 +289,11 @@ export class SessionController { if (candidates.length === 0) return; const machineId = selectedMachineId(this.getState()); + const runtime = this.getState().machineRuntimes[machineId]; + if (runtime?.ok !== true || !supportsPiWebCapability(runtime, PI_WEB_CAPABILITIES.sessionsDeleteArchived)) { + this.setState({ error: "Deleting archived sessions requires an updated Pi-Web runtime on this machine." }); + return; + } const results = await Promise.allSettled(candidates.map(async (session) => { await this.api.deleteArchived(session.id, machineId); return session.id; diff --git a/src/server/app.test.ts b/src/server/app.test.ts index aebed93..b785445 100644 --- a/src/server/app.test.ts +++ b/src/server/app.test.ts @@ -12,6 +12,7 @@ import { MachineService } from "./machines/machineService.js"; import { MachineStore } from "./machines/machineStore.js"; import { WorkspaceService } from "./workspaces/workspaceService.js"; import type { SessionProxyDaemon } from "./sessiond/sessionProxyRoutes.js"; +import { PI_WEB_CAPABILITIES } from "../shared/capabilities.js"; import { machineScopedPluginId } from "../shared/machinePluginIds.js"; import { MAX_IMAGE_PREVIEW_BYTES } from "../shared/workspaceFiles.js"; import type { Project, Workspace } from "./types.js"; @@ -47,6 +48,15 @@ beforeEach(async () => { commands: { update: "", restart: "", restartSystemd: "", restartDev: "" }, messages: [], }), + localRuntime: () => Promise.resolve({ + packageName: "@jmfederico/pi-web", + generatedAt: "2026-05-25T00:00:00.000Z", + components: { + web: { component: "web", label: "PI WEB", available: true, capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }, + sessiond: { component: "sessiond", label: "PI WEB Session Daemon", available: true, capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }, + }, + capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived], + }), }), sessionDaemon: fakeSessionDaemon(), piWebPlugins: { @@ -109,6 +119,31 @@ describe("buildApp", () => { expect(remoteHealth.json()).toMatchObject({ machineId: remote.id, ok: true, status: "online" }); }); + it("reports effective machine runtime capabilities for remote machines", async () => { + const addResponse = await app.inject({ method: "POST", url: "/api/machines", payload: { name: "Remote", baseUrl: "https://remote.example.test/" } }); + const remote = addResponse.json<{ id: string }>(); + const requestJson = vi.fn(() => Promise.resolve({ + statusCode: 200, + headers: { "content-type": "application/json" }, + body: { + packageName: "@jmfederico/pi-web", + generatedAt: "2026-05-25T00:00:00.000Z", + components: { + web: { component: "web", label: "Remote Web", runtimeVersion: "1.0.0", available: true, capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }, + sessiond: { component: "sessiond", label: "Remote Sessiond", runtimeVersion: "1.0.0", available: true, capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }, + }, + capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived], + }, + })); + remoteClient = fakeRemoteClient({ requestJson }); + + const runtime = await app.inject({ method: "GET", url: `/api/machines/${remote.id}/runtime` }); + + expect(runtime.statusCode).toBe(200); + expect(runtime.json()).toMatchObject({ machineId: remote.id, ok: true, capabilities: [PI_WEB_CAPABILITIES.sessionsDeleteArchived] }); + expect(requestJson).toHaveBeenCalledWith("GET", "/api/pi-web/runtime", undefined, { timeoutMs: 3000 }); + }); + it("proxies allowlisted remote HTTP routes through the selected machine", async () => { const addResponse = await app.inject({ method: "POST", url: "/api/machines", payload: { name: "Remote", baseUrl: "https://remote.example.test/" } }); const remote = addResponse.json<{ id: string }>(); diff --git a/src/server/app.ts b/src/server/app.ts index 254882d..7eb39ea 100644 --- a/src/server/app.ts +++ b/src/server/app.ts @@ -17,7 +17,7 @@ import { registerTerminalProxyRoutes } from "./terminalProxyRoutes.js"; import { registerWorkspaceDeletionRoutes } from "./workspaces/workspaceDeletionRoutes.js"; import { registerConfigRoutes, type PiWebConfigService } from "./configRoutes.js"; import { PiWebPluginService } from "./piWebPluginService.js"; -import { getPiWebStatus, getPiWebVersionStatus } from "./piWebStatus.js"; +import { getPiWebRuntime, getPiWebStatus, getPiWebVersionStatus } from "./piWebStatus.js"; import { MachineService } from "./machines/machineService.js"; import { registerMachineRoutes } from "./machines/machineRoutes.js"; import { registerMachineProxyRoutes } from "./machines/machineProxyRoutes.js"; @@ -91,8 +91,11 @@ export async function buildApp(deps: AppDependencies = {}): Promise getPiWebRuntime(sessionDaemon), + localStatus: () => getPiWebStatus(sessionDaemon), + }); app.get("/pi-web-plugins/manifest.json", async () => piWebPlugins.manifest()); @@ -104,8 +107,9 @@ export async function buildApp(deps: AppDependencies = {}): Promise getPiWebStatus()); - app.get("/api/pi-web/version", async () => getPiWebVersionStatus()); + app.get("/api/pi-web/status", async () => getPiWebStatus(sessionDaemon)); + app.get("/api/pi-web/version", async () => getPiWebVersionStatus(sessionDaemon)); + app.get("/api/pi-web/runtime", async () => getPiWebRuntime(sessionDaemon)); app.get("/api/plugins", async () => piWebPlugins.plugins()); registerConfigRoutes(app, deps.config); diff --git a/src/server/machines/machineRoutes.ts b/src/server/machines/machineRoutes.ts index e6392e1..28a2802 100644 --- a/src/server/machines/machineRoutes.ts +++ b/src/server/machines/machineRoutes.ts @@ -18,6 +18,12 @@ export function registerMachineRoutes(app: FastifyInstance, machines = new Machi return health; }); + app.get<{ Params: { machineId: string } }>("/api/machines/:machineId/runtime", async (request, reply) => { + const runtime = await machines.runtime(request.params.machineId); + if (runtime === undefined) return reply.code(404).send({ error: "Machine not found" }); + return runtime; + }); + app.get<{ Params: { machineId: string } }>("/api/machines/:machineId", async (request, reply) => { const machine = await machines.get(request.params.machineId); if (machine === undefined) return reply.code(404).send({ error: "Machine not found" }); diff --git a/src/server/machines/machineService.ts b/src/server/machines/machineService.ts index 0225bd1..1e55f68 100644 --- a/src/server/machines/machineService.ts +++ b/src/server/machines/machineService.ts @@ -1,5 +1,6 @@ -import type { Machine, MachineHealth, PiWebComponentStatus, PiWebStatusResponse } from "../../shared/apiTypes.js"; -import { getPiWebStatus } from "../piWebStatus.js"; +import type { Machine, MachineHealth, MachineRuntime, PiWebComponentStatus, PiWebRuntimeResponse, PiWebStatusResponse } from "../../shared/apiTypes.js"; +import { isPiWebCapability } from "../../shared/capabilities.js"; +import { getPiWebRuntime, getPiWebStatus } from "../piWebStatus.js"; import { DEFAULT_REMOTE_HEALTH_TIMEOUT_MS, RemoteMachineClient, type MachineClient, validateConfiguredMachineHeaders } from "./machineClient.js"; import { MachineStore, type StoredMachine } from "./machineStore.js"; @@ -14,9 +15,11 @@ export type UpdateMachineInput = Partial; export interface MachineServiceDependencies { localStatus?: () => Promise; + localRuntime?: () => Promise; remoteClientFactory?: (machine: StoredMachine) => MachineClient; now?: () => Date; healthCacheTtlMs?: number; + runtimeCacheTtlMs?: number; } const LOCAL_MACHINE_TIMESTAMP = "1970-01-01T00:00:00.000Z"; @@ -24,6 +27,7 @@ const DEFAULT_HEALTH_CACHE_TTL_MS = 5_000; export class MachineService { private readonly healthCache = new Map(); + private readonly runtimeCache = new Map(); constructor(private readonly store = new MachineStore(), private readonly deps: MachineServiceDependencies = {}) {} @@ -52,14 +56,20 @@ export class MachineService { if (input.token !== undefined) patch.token = input.token; if (input.headers !== undefined) patch.headers = validateHeaders(input.headers); const stored = await this.store.update(id, patch); - if (stored !== undefined) this.healthCache.delete(id); + if (stored !== undefined) { + this.healthCache.delete(id); + this.runtimeCache.delete(id); + } return stored === undefined ? undefined : publicMachine(stored); } async remove(id: string): Promise { if (id === "local") throw new Error("Local machine cannot be deleted"); const removed = await this.store.remove(id); - if (removed) this.healthCache.delete(id); + if (removed) { + this.healthCache.delete(id); + this.runtimeCache.delete(id); + } return removed; } @@ -84,6 +94,17 @@ export class MachineService { return health; } + async runtime(id: string): Promise { + const cached = this.runtimeCache.get(id); + const now = this.now().getTime(); + if (cached !== undefined && cached.expiresAt > now) return cached.runtime; + + const runtime = id === "local" ? await this.localRuntime() : await this.remoteRuntime(id); + if (runtime === undefined) return undefined; + this.runtimeCache.set(id, { expiresAt: now + (this.deps.runtimeCacheTtlMs ?? DEFAULT_HEALTH_CACHE_TTL_MS), runtime }); + return runtime; + } + private async localHealth(): Promise { const checkedAt = this.now().toISOString(); try { @@ -109,6 +130,28 @@ export class MachineService { } } + private async localRuntime(): Promise { + const checkedAt = this.now().toISOString(); + try { + return machineRuntime("local", checkedAt, await (this.deps.localRuntime ?? getPiWebRuntime)()); + } catch (error) { + return { machineId: "local", ok: false, checkedAt, error: errorMessage(error) }; + } + } + + private async remoteRuntime(id: string): Promise { + const machine = await this.storedRemote(id); + if (machine === undefined) return undefined; + const checkedAt = this.now().toISOString(); + try { + const response = await this.clientFor(machine).requestJson("GET", "/api/pi-web/runtime", undefined, { timeoutMs: DEFAULT_REMOTE_HEALTH_TIMEOUT_MS }); + if (response.statusCode >= 200 && response.statusCode < 300 && isPiWebRuntimeResponse(response.body)) return machineRuntime(id, checkedAt, response.body); + return { machineId: id, ok: false, checkedAt, error: `Remote runtime returned HTTP ${String(response.statusCode)}` }; + } catch (error) { + return { machineId: id, ok: false, checkedAt, error: errorMessage(error) }; + } + } + private clientFor(machine: StoredMachine): MachineClient { return this.deps.remoteClientFactory?.(machine) ?? new RemoteMachineClient(machine); } @@ -162,6 +205,18 @@ function errorMessage(error: unknown): string { return error instanceof Error ? error.message : String(error); } +function machineRuntime(machineId: string, checkedAt: string, runtime: PiWebRuntimeResponse): MachineRuntime { + return { + machineId, + ok: true, + checkedAt, + packageName: runtime.packageName, + generatedAt: runtime.generatedAt, + components: runtime.components, + capabilities: runtime.capabilities, + }; +} + function isPiWebStatusResponse(value: unknown): value is PiWebStatusResponse { if (!isRecord(value)) return false; const components = value["components"]; @@ -169,6 +224,16 @@ function isPiWebStatusResponse(value: unknown): value is PiWebStatusResponse { return isPiWebComponentStatus(components["web"]) && isPiWebComponentStatus(components["sessiond"]); } +function isPiWebRuntimeResponse(value: unknown): value is PiWebRuntimeResponse { + if (!isRecord(value)) return false; + const packageName = value["packageName"]; + const generatedAt = value["generatedAt"]; + const components = value["components"]; + const capabilities = value["capabilities"]; + if (typeof packageName !== "string" || typeof generatedAt !== "string" || !isRecord(components) || !isPiWebCapabilityArray(capabilities)) return false; + return isPiWebRuntimeComponent(components["web"]) && isPiWebRuntimeComponent(components["sessiond"]); +} + function isPiWebComponentStatus(value: unknown): value is PiWebComponentStatus { if (!isRecord(value)) return false; const component = value["component"]; @@ -178,6 +243,19 @@ function isPiWebComponentStatus(value: unknown): value is PiWebComponentStatus { && typeof value["available"] === "boolean"; } +function isPiWebRuntimeComponent(value: unknown): boolean { + if (!isRecord(value)) return false; + const component = value["component"]; + return (component === "web" || component === "sessiond") + && typeof value["label"] === "string" + && typeof value["available"] === "boolean" + && isPiWebCapabilityArray(value["capabilities"]); +} + +function isPiWebCapabilityArray(value: unknown): boolean { + return Array.isArray(value) && value.every(isPiWebCapability); +} + function isRecord(value: unknown): value is Record { return typeof value === "object" && value !== null && !Array.isArray(value); } diff --git a/src/server/piWebStatus.ts b/src/server/piWebStatus.ts index b44ee6e..e1bf4be 100644 --- a/src/server/piWebStatus.ts +++ b/src/server/piWebStatus.ts @@ -5,8 +5,9 @@ import { homedir } from "node:os"; import { dirname, join, relative, resolve, sep } from "node:path"; import { fileURLToPath } from "node:url"; import { DefaultPackageManager, getAgentDir, SettingsManager } from "@earendil-works/pi-coding-agent"; -import type { PiWebComponentStatus, PiWebInstallationInfo, PiWebReleaseStatus, PiWebServiceComponent, PiWebStatusMessage, PiWebStatusResponse, PiWebVersionResponse } from "../shared/apiTypes.js"; -import { parsePiWebComponentStatus } from "../shared/piWebStatusParsing.js"; +import type { PiWebCapability, PiWebComponentStatus, PiWebInstallationInfo, PiWebReleaseStatus, PiWebRuntimeComponent, PiWebRuntimeResponse, PiWebServiceComponent, PiWebStatusMessage, PiWebStatusResponse, PiWebVersionResponse } from "../shared/apiTypes.js"; +import { effectivePiWebCapabilities, WEB_RUNTIME_CAPABILITIES } from "../shared/capabilities.js"; +import { parsePiWebComponentStatus, parsePiWebRuntimeComponent } from "../shared/piWebStatusParsing.js"; import { SessionDaemonClient } from "../sessiond/sessionDaemonClient.js"; const PI_WEB_PACKAGE_NAME = "@jmfederico/pi-web"; @@ -61,10 +62,35 @@ interface PackageInfo { path: string; } +interface PiWebStatusDaemon { + request(method: string, path: string, body?: unknown): Promise<{ statusCode: number; headers: Record; body: string }>; +} + let latestReleaseCache: { checkedAtMs: number; latestVersion?: string; error?: string } | undefined; const runtimePackageInfo = readPackageInfoSync(); +export function getPiWebRuntimeComponent(component: PiWebServiceComponent, capabilities: readonly PiWebCapability[] = []): PiWebRuntimeComponent { + return { + component, + label: component === "web" ? "Web/UI" : "Session daemon", + runtimeVersion: runtimePackageInfo?.version ?? DEFAULT_VERSION, + available: true, + capabilities: [...capabilities], + }; +} + +export async function getPiWebRuntime(daemon: PiWebStatusDaemon = new SessionDaemonClient()): Promise { + const web = getPiWebRuntimeComponent("web", WEB_RUNTIME_CAPABILITIES); + const sessiond = await getSessiondRuntimeComponent(daemon); + return { + packageName: PI_WEB_PACKAGE_NAME, + generatedAt: new Date().toISOString(), + components: { web, sessiond }, + capabilities: effectivePiWebCapabilities({ web, sessiond }), + }; +} + export async function getPiWebComponentStatus(component: PiWebServiceComponent): Promise { const [installed, installation] = await Promise.all([ readInstalledPackageInfo(), @@ -83,7 +109,7 @@ export async function getPiWebComponentStatus(component: PiWebServiceComponent): }; } -export async function getPiWebVersionStatus(daemon = new SessionDaemonClient()): Promise { +export async function getPiWebVersionStatus(daemon: PiWebStatusDaemon = new SessionDaemonClient()): Promise { const [web, sessiond] = await Promise.all([ getPiWebComponentStatus("web"), getSessiondComponentStatus(daemon), @@ -95,7 +121,7 @@ export async function getPiWebVersionStatus(daemon = new SessionDaemonClient()): }; } -export async function getPiWebStatus(daemon = new SessionDaemonClient()): Promise { +export async function getPiWebStatus(daemon: PiWebStatusDaemon = new SessionDaemonClient()): Promise { const versionStatus = await getPiWebVersionStatus(daemon); const { web, sessiond } = versionStatus.components; const release = await getLatestReleaseStatus(web.installedVersion ?? web.runtimeVersion ?? DEFAULT_VERSION); @@ -214,21 +240,78 @@ function isSameOrWithin(parent: string, candidate: string): boolean { return rel === "" || (!rel.startsWith("..") && !rel.startsWith(sep)); } -async function getSessiondComponentStatus(daemon: SessionDaemonClient): Promise { +async function getSessiondRuntimeComponent(daemon: PiWebStatusDaemon): Promise { try { - const upstream = await daemon.request("GET", "/health"); + const upstream = await daemon.request("GET", "/runtime"); if (upstream.statusCode < 200 || upstream.statusCode >= 300) { - return unavailableSessiond(`health check returned HTTP ${String(upstream.statusCode)}`); + return await legacySessiondRuntimeComponent(daemon) ?? unavailableSessiondRuntime(`runtime check returned HTTP ${String(upstream.statusCode)}`); } const parsed: unknown = upstream.body === "" ? undefined : JSON.parse(upstream.body); - const version = isRecord(parsed) ? parsed["version"] : undefined; - const component = parsePiWebComponentStatus(version); - return component ?? unavailableSessiond("health response did not include version information"); + const runtime = parsePiWebRuntimeComponent(parsed); + if (runtime !== undefined) return runtime; + const legacyVersion = isRecord(parsed) ? parsePiWebComponentStatus(parsed["version"]) : undefined; + if (legacyVersion !== undefined) return runtimeComponentFromStatus(legacyVersion); + return await legacySessiondRuntimeComponent(daemon) ?? unavailableSessiondRuntime("runtime response did not include valid runtime information"); + } catch (error) { + return unavailableSessiondRuntime(error instanceof Error ? error.message : String(error)); + } +} + +async function getSessiondComponentStatus(daemon: PiWebStatusDaemon): Promise { + try { + const upstream = await daemon.request("GET", "/runtime"); + if (upstream.statusCode < 200 || upstream.statusCode >= 300) { + return await legacySessiondComponentStatus(daemon) ?? unavailableSessiond(`runtime check returned HTTP ${String(upstream.statusCode)}`); + } + const parsed: unknown = upstream.body === "" ? undefined : JSON.parse(upstream.body); + const legacyVersion = isRecord(parsed) ? parsePiWebComponentStatus(parsed["version"]) : undefined; + if (legacyVersion !== undefined) return legacyVersion; + const runtime = parsePiWebRuntimeComponent(parsed); + if (runtime?.available !== true) return await legacySessiondComponentStatus(daemon) ?? unavailableSessiond(runtime?.error ?? "runtime response did not include valid runtime information"); + const status = await getPiWebComponentStatus("sessiond"); + return { ...status, ...(runtime.runtimeVersion === undefined ? {} : { runtimeVersion: runtime.runtimeVersion }), available: true }; } catch (error) { return unavailableSessiond(error instanceof Error ? error.message : String(error)); } } +async function legacySessiondRuntimeComponent(daemon: PiWebStatusDaemon): Promise { + const status = await legacySessiondComponentStatus(daemon); + return status === undefined ? undefined : runtimeComponentFromStatus(status); +} + +async function legacySessiondComponentStatus(daemon: PiWebStatusDaemon): Promise { + try { + const upstream = await daemon.request("GET", "/health"); + if (upstream.statusCode < 200 || upstream.statusCode >= 300) return undefined; + const parsed: unknown = upstream.body === "" ? undefined : JSON.parse(upstream.body); + return isRecord(parsed) ? parsePiWebComponentStatus(parsed["version"]) : undefined; + } catch { + return undefined; + } +} + +function runtimeComponentFromStatus(status: PiWebComponentStatus): PiWebRuntimeComponent { + return { + component: status.component, + label: status.label, + ...(status.runtimeVersion === undefined ? {} : { runtimeVersion: status.runtimeVersion }), + available: status.available, + capabilities: [], + ...(status.error === undefined ? {} : { error: status.error }), + }; +} + +function unavailableSessiondRuntime(error: string): PiWebRuntimeComponent { + return { + component: "sessiond", + label: "Session daemon", + available: false, + capabilities: [], + error, + }; +} + function unavailableSessiond(error: string): PiWebComponentStatus { return { component: "sessiond", diff --git a/src/server/sessiond.ts b/src/server/sessiond.ts index 7f4b6d9..0798f9d 100644 --- a/src/server/sessiond.ts +++ b/src/server/sessiond.ts @@ -13,7 +13,8 @@ import { registerSessionRoutes } from "./sessions/sessionRoutes.js"; import { sessiondSocketPath } from "../sessiond/config.js"; import { TerminalService } from "./terminals/terminalService.js"; import { registerTerminalRoutes } from "./terminals/terminalRoutes.js"; -import { getPiWebComponentStatus } from "./piWebStatus.js"; +import { getPiWebRuntimeComponent } from "./piWebStatus.js"; +import { SESSIOND_RUNTIME_CAPABILITIES } from "../shared/capabilities.js"; const app = Fastify({ logger: true }); await app.register(fastifyWebsocket); @@ -29,12 +30,23 @@ registerAuthRoutes(app, auth); registerSessionRoutes(app, sessions, eventHub); registerTerminalRoutes(app, terminals); -app.get("/health", async () => ({ - ok: true, - activeSessions: sessions.activeCount(), - checkedAt: new Date().toISOString(), - version: await getPiWebComponentStatus("sessiond"), -})); +app.get("/health", () => { + const runtime = getPiWebRuntimeComponent("sessiond", SESSIOND_RUNTIME_CAPABILITIES); + return { + ok: true, + activeSessions: sessions.activeCount(), + checkedAt: new Date().toISOString(), + version: { + component: runtime.component, + label: runtime.label, + ...(runtime.runtimeVersion === undefined ? {} : { runtimeVersion: runtime.runtimeVersion }), + stale: false, + available: runtime.available, + }, + }; +}); + +app.get("/runtime", () => getPiWebRuntimeComponent("sessiond", SESSIOND_RUNTIME_CAPABILITIES)); let shuttingDown = false; async function shutdown(signal: NodeJS.Signals): Promise { diff --git a/src/server/sessiond/sessionProxyRoutes.ts b/src/server/sessiond/sessionProxyRoutes.ts index 68b1f55..51c1af9 100644 --- a/src/server/sessiond/sessionProxyRoutes.ts +++ b/src/server/sessiond/sessionProxyRoutes.ts @@ -22,6 +22,7 @@ export function registerSessionProxyRoutes(app: FastifyInstance, daemon: Session }; app.get(`${prefix}/sessiond/health`, (_request, reply) => proxy({ method: "GET", url: `${prefix}/health` }, reply)); + app.get(`${prefix}/sessiond/runtime`, (_request, reply) => proxy({ method: "GET", url: `${prefix}/runtime` }, reply)); app.get<{ Params: { sessionId: string } }>(`${prefix}/sessions/:sessionId/events`, { websocket: true }, (socket, request) => { bridgeSockets(socket, daemon.connectWebSocket(`/sessions/${request.params.sessionId}/events`)); diff --git a/src/shared/apiTypes.ts b/src/shared/apiTypes.ts index 56019c0..26f985a 100644 --- a/src/shared/apiTypes.ts +++ b/src/shared/apiTypes.ts @@ -1,6 +1,12 @@ export type MachineKind = "local" | "remote"; export type MachineStatus = "unknown" | "online" | "offline" | "error"; +export const PI_WEB_CAPABILITIES = { + sessionsDeleteArchived: "sessions.deleteArchived", +} as const; + +export type PiWebCapability = typeof PI_WEB_CAPABILITIES[keyof typeof PI_WEB_CAPABILITIES]; + export interface Machine { id: string; name: string; @@ -22,6 +28,17 @@ export interface MachineHealth { error?: string; } +export interface MachineRuntime { + machineId: string; + ok: boolean; + checkedAt: string; + packageName?: string; + generatedAt?: string; + components?: PiWebRuntimeResponse["components"]; + capabilities?: PiWebCapability[]; + error?: string; +} + export type PiWebShortcutConfig = Record; export type PiWebPluginSettings = Record; export type PiWebPluginConfigMap = Record; @@ -337,6 +354,15 @@ export interface PiWebComponentStatus { error?: string; } +export interface PiWebRuntimeComponent { + component: PiWebServiceComponent; + label: string; + runtimeVersion?: string; + available: boolean; + capabilities: PiWebCapability[]; + error?: string; +} + export interface PiWebReleaseStatus { packageName: string; latestVersion?: string; @@ -363,6 +389,16 @@ export interface PiWebVersionResponse { }; } +export interface PiWebRuntimeResponse { + packageName: string; + generatedAt: string; + components: { + web: PiWebRuntimeComponent; + sessiond: PiWebRuntimeComponent; + }; + capabilities: PiWebCapability[]; +} + export interface PiWebStatusResponse extends PiWebVersionResponse { release: PiWebReleaseStatus; commands: { diff --git a/src/shared/capabilities.ts b/src/shared/capabilities.ts new file mode 100644 index 0000000..2240710 --- /dev/null +++ b/src/shared/capabilities.ts @@ -0,0 +1,32 @@ +import { PI_WEB_CAPABILITIES, type PiWebCapability, type PiWebRuntimeComponent, type PiWebServiceComponent } from "./apiTypes.js"; + +export { PI_WEB_CAPABILITIES }; +export type { PiWebCapability }; + +export const KNOWN_PI_WEB_CAPABILITIES = Object.values(PI_WEB_CAPABILITIES); +const knownPiWebCapabilities: ReadonlySet = new Set(KNOWN_PI_WEB_CAPABILITIES); + +export const WEB_RUNTIME_CAPABILITIES = [PI_WEB_CAPABILITIES.sessionsDeleteArchived] as const satisfies readonly PiWebCapability[]; +export const SESSIOND_RUNTIME_CAPABILITIES = [PI_WEB_CAPABILITIES.sessionsDeleteArchived] as const satisfies readonly PiWebCapability[]; + +const EFFECTIVE_CAPABILITY_REQUIREMENTS = { + [PI_WEB_CAPABILITIES.sessionsDeleteArchived]: ["web", "sessiond"], +} as const satisfies Record; + +export function isPiWebCapability(value: unknown): value is PiWebCapability { + return typeof value === "string" && knownPiWebCapabilities.has(value); +} + +export function supportsPiWebCapability(source: { capabilities?: readonly PiWebCapability[] } | undefined, capability: PiWebCapability): boolean { + return source?.capabilities?.includes(capability) === true; +} + +export function effectivePiWebCapabilities(components: Partial>>): PiWebCapability[] { + return KNOWN_PI_WEB_CAPABILITIES.filter((capability) => { + const requiredComponents = EFFECTIVE_CAPABILITY_REQUIREMENTS[capability]; + return requiredComponents.every((component) => { + const runtime = components[component]; + return runtime?.available === true && supportsPiWebCapability(runtime, capability); + }); + }); +} diff --git a/src/shared/piWebStatusParsing.ts b/src/shared/piWebStatusParsing.ts index a588dc5..96d7c20 100644 --- a/src/shared/piWebStatusParsing.ts +++ b/src/shared/piWebStatusParsing.ts @@ -1,4 +1,5 @@ -import type { PiWebComponentStatus, PiWebInstallationInfo, PiWebVersionResponse } from "./apiTypes.js"; +import type { PiWebCapability, PiWebComponentStatus, PiWebInstallationInfo, PiWebRuntimeComponent, PiWebRuntimeResponse, PiWebVersionResponse } from "./apiTypes.js"; +import { isPiWebCapability } from "./capabilities.js"; export function parsePiWebVersionResponse(value: unknown): PiWebVersionResponse | undefined { if (!isRecord(value)) return undefined; @@ -12,6 +13,39 @@ export function parsePiWebVersionResponse(value: unknown): PiWebVersionResponse return { packageName, generatedAt, components: { web, sessiond } }; } +export function parsePiWebRuntimeResponse(value: unknown): PiWebRuntimeResponse | undefined { + if (!isRecord(value)) return undefined; + const packageName = value["packageName"]; + const generatedAt = value["generatedAt"]; + const components = value["components"]; + if (typeof packageName !== "string" || packageName === "" || typeof generatedAt !== "string" || generatedAt === "" || !isRecord(components)) return undefined; + const web = parsePiWebRuntimeComponent(components["web"]); + const sessiond = parsePiWebRuntimeComponent(components["sessiond"]); + const capabilities = parsePiWebCapabilities(value["capabilities"]); + if (web === undefined || sessiond === undefined || capabilities === undefined) return undefined; + return { packageName, generatedAt, components: { web, sessiond }, capabilities }; +} + +export function parsePiWebRuntimeComponent(value: unknown): PiWebRuntimeComponent | undefined { + if (!isRecord(value)) return undefined; + const component = value["component"]; + const label = value["label"]; + const runtimeVersion = value["runtimeVersion"]; + const available = value["available"]; + const capabilities = parsePiWebCapabilities(value["capabilities"]); + const error = value["error"]; + if (component !== "web" && component !== "sessiond") return undefined; + if (typeof label !== "string" || label === "" || typeof available !== "boolean" || capabilities === undefined) return undefined; + return { + component, + label, + ...(typeof runtimeVersion === "string" ? { runtimeVersion } : {}), + available, + capabilities, + ...(typeof error === "string" ? { error } : {}), + }; +} + export function parsePiWebComponentStatus(value: unknown): PiWebComponentStatus | undefined { if (!isRecord(value)) return undefined; const component = value["component"]; @@ -36,6 +70,11 @@ export function parsePiWebComponentStatus(value: unknown): PiWebComponentStatus }; } +function parsePiWebCapabilities(value: unknown): PiWebCapability[] | undefined { + if (!Array.isArray(value) || !value.every(isPiWebCapability)) return undefined; + return value; +} + export function parsePiWebInstallationInfo(value: unknown): PiWebInstallationInfo | undefined { if (!isRecord(value)) return undefined; const kind = value["kind"]; From 313dbea34e473235fd00c17cab29ab993db04705 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Tue, 9 Jun 2026 12:29:56 +0200 Subject: [PATCH 23/28] chore: clarify archived delete capability hint --- src/client/src/components/PiWebApp.ts | 2 -- src/client/src/components/SessionList.ts | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index f414aad..17df161 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -855,8 +855,6 @@ export class PiWebApp extends LitElement { private archivedDeleteUnavailableMessage(): string { const machineName = this.state.selectedMachine?.name ?? "this machine"; - const runtime = this.selectedMachineRuntime(); - if (runtime?.ok === false && runtime.error !== undefined) return `Update and restart Pi-Web on ${machineName} to delete archived sessions. Runtime check failed: ${runtime.error}`; return `Update and restart Pi-Web on ${machineName} to delete archived sessions.`; } diff --git a/src/client/src/components/SessionList.ts b/src/client/src/components/SessionList.ts index aab4877..f479c40 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -185,6 +185,7 @@ export class SessionList extends LitElement implements KeyboardNavigableSection + ${this.canDeleteArchived ? null : html`${this.archivedDeleteUnavailableMessage}`}
    `; } @@ -366,6 +367,7 @@ export class SessionList extends LitElement implements KeyboardNavigableSection .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); } From 0118e6ebe9f692062d0d83561e017cefb53bbcc6 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Tue, 9 Jun 2026 13:40:48 +0200 Subject: [PATCH 24/28] fix: keep archived parent sessions visible --- .../preserve-archived-session-parents.md | 5 ++ src/client/src/components/SessionList.test.ts | 49 +++++++++++++++++++ src/client/src/components/SessionList.ts | 41 +++++++++++----- 3 files changed, 84 insertions(+), 11 deletions(-) create mode 100644 .changeset/preserve-archived-session-parents.md create mode 100644 src/client/src/components/SessionList.test.ts 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/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 f479c40..fa3adf4 100644 --- a/src/client/src/components/SessionList.ts +++ b/src/client/src/components/SessionList.ts @@ -14,7 +14,7 @@ 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; @@ -92,15 +92,17 @@ export class SessionList extends LitElement implements KeyboardNavigableSection } override render() { - const currentRows = sessionRowsForCurrentSessions(this.sessions); - const archivedRows = sessionRows(this.sessions.filter((session) => session.archived === true)); + 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(currentRows.length + archivedRows.length, currentRows.map((row) => row.session))} + ${this.renderHeading(currentRows.length + archivedRows.length, currentSelectableSessions)} ${this.collapsed ? null : html`
    - ${this.renderCurrentSelectionToolbar(currentRows.map((row) => row.session))} + ${this.renderCurrentSelectionToolbar(currentSelectableSessions)} ${currentRows.map((row) => this.renderSession(row, descendantCounts.get(row.session.id) ?? 0, "current"))} ${archivedRows.length > 0 ? html` ${this.renderArchivedHeading(archivedRows.map((row) => row.session))} @@ -193,18 +195,20 @@ export class SessionList extends LitElement implements KeyboardNavigableSection private renderSession(row: SessionRow, descendantCount: number, scope: SessionSelectionScope) { const { session } = row; const cappedDepth = Math.min(row.depth, 2); - const showsCheckbox = this.selectionScopes.has(scope); + 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.activateSessionRow(session, scope); }); }} @keydown=${(event: KeyboardEvent) => { this.handleSessionKeydown(event, session, scope); }} > -
    +
    ${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)} @@ -242,7 +246,7 @@ export class SessionList extends LitElement implements KeyboardNavigableSection } private activateSessionRow(session: SessionInfo, scope: SessionSelectionScope): void { - if (this.selectionScopes.has(scope)) { + if (this.selectionScopes.has(scope) && sessionSelectionScope(session) === scope) { this.toggleSelected(session.id); return; } @@ -411,8 +415,23 @@ function unarchivedDescendantCounts(sessions: SessionInfo[]): Map [session.id, countFor(session, new Set())])); } -function sessionRowsForCurrentSessions(sessions: SessionInfo[]): SessionRow[] { - return sessionRows(sessions.filter((session) => session.archived !== true)); +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 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); + parentPath = parent.parentSessionPath; + } + } + return sessionRows(sessions.filter((session) => visible.has(session.id))); } function sessionRows(sessions: SessionInfo[]): SessionRow[] { From c57f24dfa5f632625e1d18178d50648e0cfde19c Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Tue, 9 Jun 2026 15:10:32 +0200 Subject: [PATCH 25/28] feat: support machine-specific plugins --- .changeset/machine-specific-plugins.md | 5 ++ README.md | 2 +- docs/plugins.html | 10 ++- docs/plugins.md | 21 +++-- pi-web-plugins/updates/package.json | 2 +- src/client/src/api/clients.test.ts | 21 ++++- src/client/src/api/clients.ts | 2 +- .../src/api/federatedRouteContract.test.ts | 3 +- src/client/src/api/parsers.test.ts | 4 +- src/client/src/api/parsers.ts | 7 ++ src/client/src/components/PiWebApp.ts | 14 ++- .../settings/SettingsPluginsPanel.ts | 2 +- src/client/src/plugins/external.ts | 14 ++- src/client/src/plugins/registry.test.ts | 85 +++++++++++++++++++ src/client/src/plugins/registry.ts | 76 ++++++++++++++--- src/client/src/plugins/types.ts | 1 + src/server/app.test.ts | 12 +-- .../machines/machinePluginProxyRoutes.ts | 8 ++ src/server/piWebPluginService.test.ts | 14 ++- src/server/piWebPluginService.ts | 28 +++++- src/shared/apiTypes.ts | 1 + src/shared/federatedRoutes.ts | 1 + 22 files changed, 286 insertions(+), 47 deletions(-) create mode 100644 .changeset/machine-specific-plugins.md 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/README.md b/README.md index e7aff9e..ca4f67f 100644 --- a/README.md +++ b/README.md @@ -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/plugins.html b/docs/plugins.html index b7e9f0c..dadaf25 100644 --- a/docs/plugins.html +++ b/docs/plugins.html @@ -191,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
      • @@ -309,7 +310,7 @@ After editing, check the manifest endpoint and browser-console failure cases.
    • 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.
    @@ -317,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, diff --git a/docs/plugins.md b/docs/plugins.md index 9e8d501..0743670 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -136,12 +136,17 @@ When [machine federation](https://pi-web.dev/machines.html) is enabled, PI WEB a - 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 @@ -185,7 +190,7 @@ Built-in plugins can be managed from **Settings → Plugins** or with the top-le **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 { @@ -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,7 +457,7 @@ 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`. +- 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`. @@ -784,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.-]*$`. 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/clients.test.ts b/src/client/src/api/clients.test.ts index 3575f0b..224846c 100644 --- a/src/client/src/api/clients.test.ts +++ b/src/client/src/api/clients.test.ts @@ -1,7 +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 { machinesApi, terminalsApi, workspacesApi } from "./clients"; +import { machinesApi, piWebApi, terminalsApi, workspacesApi } from "./clients"; const workspace: Workspace = { id: "w/1", @@ -31,6 +31,25 @@ afterEach(() => { }); 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] }); diff --git a/src/client/src/api/clients.ts b/src/client/src/api/clients.ts index 5530577..da653af 100644 --- a/src/client/src/api/clients.ts +++ b/src/client/src/api/clients.ts @@ -43,7 +43,7 @@ import { machineGitDiffUrl, messageUrl } from "./urls"; const machinePrefix = (machineId = "local") => `/api/machines/${encodeURIComponent(machineId)}`; 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), }; diff --git a/src/client/src/api/federatedRouteContract.test.ts b/src/client/src/api/federatedRouteContract.test.ts index 903f078..f675bc5 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"; @@ -26,6 +26,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)), diff --git a/src/client/src/api/parsers.test.ts b/src/client/src/api/parsers.test.ts index e12ba43..3bcd3ba 100644 --- a/src/client/src/api/parsers.test.ts +++ b/src/client/src/api/parsers.test.ts @@ -33,9 +33,9 @@ describe("API parsers", () => { 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 7e40afe..6245a5d 100644 --- a/src/client/src/api/parsers.ts +++ b/src/client/src/api/parsers.ts @@ -492,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"), }; } @@ -501,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 { diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index 17df161..d88cae3 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -266,10 +266,13 @@ export class PiWebApp extends LitElement { } 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); } } @@ -723,7 +726,9 @@ export class PiWebApp extends LitElement { this.realtime.close(); this.connectRealtime(); this.activeTerminalIds.clear(); + this.setState({ piWebStatus: undefined }); this.git.updatePolling(); + void this.refreshPiWebStatus(); void this.loadPluginsForSelectedMachine(); } @@ -1186,7 +1191,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); 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}