From a2cac9c5bb13ecf26339389a4927eb766780c60d Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 24 May 2026 00:52:00 +0800 Subject: [PATCH 001/162] feat(core): add system dependency install contracts --- packages/core/src/domain/diagnostics.ts | 9 +- .../domain/system-dependency-install.test.ts | 114 ++++++++++++++++++ .../src/domain/system-dependency-install.ts | 91 ++++++++++++++ packages/core/src/index.ts | 1 + 4 files changed, 214 insertions(+), 1 deletion(-) create mode 100644 packages/core/src/domain/system-dependency-install.test.ts create mode 100644 packages/core/src/domain/system-dependency-install.ts diff --git a/packages/core/src/domain/diagnostics.ts b/packages/core/src/domain/diagnostics.ts index 3ceec2b0..7a37a17e 100644 --- a/packages/core/src/domain/diagnostics.ts +++ b/packages/core/src/domain/diagnostics.ts @@ -1,3 +1,5 @@ +import type { SystemDependencyId } from "./system-dependency-install"; + export type DiagnosticsContext = | "workspace_open" | "session_start" @@ -41,8 +43,13 @@ export interface DiagnosticsCheck { workspaceId?: string; workspacePath?: string; providerId?: string; + dependencyId?: SystemDependencyId; autoInstallSupported?: boolean; - installReadiness?: "ready" | "missing_prerequisite" | "unsupported_platform"; + installReadiness?: + | "ready" + | "missing_prerequisite" + | "unsupported_platform" + | "unsupported_package_manager"; missingCommands?: string[]; missingPrerequisites?: string[]; manualGuideKeys?: string[]; diff --git a/packages/core/src/domain/system-dependency-install.test.ts b/packages/core/src/domain/system-dependency-install.test.ts new file mode 100644 index 00000000..b542f0ba --- /dev/null +++ b/packages/core/src/domain/system-dependency-install.test.ts @@ -0,0 +1,114 @@ +import { describe, expect, expectTypeOf, it } from "vitest"; +import { + isSystemDependencyId, + SYSTEM_DEPENDENCY_IDS, + SYSTEM_DEPENDENCY_INSTALL_OUTPUT_TOPIC_SCOPE, + type SystemDependencyId, + type SystemDependencyInstallFailure, + type SystemDependencyInstallInteraction, + type SystemDependencyInstallJobSnapshot, + type SystemDependencyInstallOutputChunk, + type SystemDependencyInstallStepSnapshot, + type SystemDependencyPackageManager, + type SystemDependencyRuntimeEntry, + type SystemDependencyRuntimeStatusResponse, +} from "../index"; + +describe("system dependency install shared contract", () => { + it("defines the supported system dependency ids", () => { + expect(SYSTEM_DEPENDENCY_IDS).toEqual(["git", "node"]); + }); + + it("identifies supported system dependency ids", () => { + expect(isSystemDependencyId("git")).toBe(true); + expect(isSystemDependencyId("node")).toBe(true); + expect(isSystemDependencyId("python")).toBe(false); + }); + + it("defines the install output topic scope", () => { + expect(SYSTEM_DEPENDENCY_INSTALL_OUTPUT_TOPIC_SCOPE).toBe("systemDeps.install"); + }); + + it("keeps the shared type surface stable through the public barrel", () => { + expectTypeOf().toEqualTypeOf<"git" | "node">(); + expectTypeOf().toEqualTypeOf< + "brew" | "apt-get" | "dnf" | "yum" | "pacman" | "zypper" + >(); + + expectTypeOf().toEqualTypeOf<{ + dependencyId: "git" | "node"; + available: boolean; + version?: string; + autoInstallSupported: boolean; + installReadiness: "ready" | "unsupported_platform" | "unsupported_package_manager"; + packageManager?: "brew" | "apt-get" | "dnf" | "yum" | "pacman" | "zypper"; + manualGuideKeys: string[]; + docUrl?: string; + }>(); + + expectTypeOf().toEqualTypeOf<{ + dependencies: Record<"git" | "node", SystemDependencyRuntimeEntry>; + }>(); + + expectTypeOf().toEqualTypeOf<{ + kind: "none" | "sudo_password" | "confirm"; + promptExcerpt?: string; + echo: boolean; + }>(); + + expectTypeOf().toEqualTypeOf<{ + id: string; + titleKey: string; + kind: "check" | "install" | "verify"; + command: string; + args: string[]; + status: "pending" | "running" | "succeeded" | "failed"; + startedAt?: number; + finishedAt?: number; + exitCode?: number; + stdoutExcerpt?: string; + stderrExcerpt?: string; + }>(); + + expectTypeOf().toEqualTypeOf<{ + code: + | "unsupported_platform" + | "unsupported_package_manager" + | "permission_denied" + | "user_cancelled" + | "pty_disconnected" + | "command_not_found" + | "command_failed" + | "verification_failed" + | "unknown_failure"; + dependencyId: "git" | "node"; + failedStepId: string; + message: string; + command: string; + args: string[]; + exitCode?: number; + stdoutExcerpt?: string; + stderrExcerpt?: string; + packageManager?: "brew" | "apt-get" | "dnf" | "yum" | "pacman" | "zypper"; + manualGuideKeys: string[]; + docUrl?: string; + }>(); + + expectTypeOf().toEqualTypeOf<{ + jobId: string; + dependencyId: "git" | "node"; + status: "queued" | "running" | "waiting_input" | "succeeded" | "failed" | "cancelled"; + packageManager?: "brew" | "apt-get" | "dnf" | "yum" | "pacman" | "zypper"; + currentStepId?: string; + steps: SystemDependencyInstallStepSnapshot[]; + interaction: SystemDependencyInstallInteraction; + failure?: SystemDependencyInstallFailure; + }>(); + + expectTypeOf().toEqualTypeOf<{ + jobId: string; + chunk: string; + seq: number; + }>(); + }); +}); diff --git a/packages/core/src/domain/system-dependency-install.ts b/packages/core/src/domain/system-dependency-install.ts new file mode 100644 index 00000000..202f4712 --- /dev/null +++ b/packages/core/src/domain/system-dependency-install.ts @@ -0,0 +1,91 @@ +export const SYSTEM_DEPENDENCY_IDS = ["git", "node"] as const; +export const SYSTEM_DEPENDENCY_INSTALL_OUTPUT_TOPIC_SCOPE = "systemDeps.install" as const; + +export type SystemDependencyId = (typeof SYSTEM_DEPENDENCY_IDS)[number]; +export type SystemDependencyPackageManager = + | "brew" + | "apt-get" + | "dnf" + | "yum" + | "pacman" + | "zypper"; + +export function isSystemDependencyId(value: unknown): value is SystemDependencyId { + return typeof value === "string" && (SYSTEM_DEPENDENCY_IDS as readonly string[]).includes(value); +} + +export interface SystemDependencyRuntimeEntry { + dependencyId: SystemDependencyId; + available: boolean; + version?: string; + autoInstallSupported: boolean; + installReadiness: "ready" | "unsupported_platform" | "unsupported_package_manager"; + packageManager?: SystemDependencyPackageManager; + manualGuideKeys: string[]; + docUrl?: string; +} + +export interface SystemDependencyRuntimeStatusResponse { + dependencies: Record; +} + +export interface SystemDependencyInstallInteraction { + kind: "none" | "sudo_password" | "confirm"; + promptExcerpt?: string; + echo: boolean; +} + +export interface SystemDependencyInstallStepSnapshot { + id: string; + titleKey: string; + kind: "check" | "install" | "verify"; + command: string; + args: string[]; + status: "pending" | "running" | "succeeded" | "failed"; + startedAt?: number; + finishedAt?: number; + exitCode?: number; + stdoutExcerpt?: string; + stderrExcerpt?: string; +} + +export interface SystemDependencyInstallFailure { + code: + | "unsupported_platform" + | "unsupported_package_manager" + | "permission_denied" + | "user_cancelled" + | "pty_disconnected" + | "command_not_found" + | "command_failed" + | "verification_failed" + | "unknown_failure"; + dependencyId: SystemDependencyId; + failedStepId: string; + message: string; + command: string; + args: string[]; + exitCode?: number; + stdoutExcerpt?: string; + stderrExcerpt?: string; + packageManager?: SystemDependencyPackageManager; + manualGuideKeys: string[]; + docUrl?: string; +} + +export interface SystemDependencyInstallJobSnapshot { + jobId: string; + dependencyId: SystemDependencyId; + status: "queued" | "running" | "waiting_input" | "succeeded" | "failed" | "cancelled"; + packageManager?: SystemDependencyPackageManager; + currentStepId?: string; + steps: SystemDependencyInstallStepSnapshot[]; + interaction: SystemDependencyInstallInteraction; + failure?: SystemDependencyInstallFailure; +} + +export interface SystemDependencyInstallOutputChunk { + jobId: string; + chunk: string; + seq: number; +} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index d71712ed..ba65b2ec 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -6,6 +6,7 @@ export * from "./domain/lsp"; export * from "./domain/mcp"; export * from "./domain/provider-install"; export * from "./domain/supervisor"; +export * from "./domain/system-dependency-install"; // Domain export * from "./domain/types"; export * from "./domain/update"; From 69bb957b2d393db61d3e09436243241264d799ea Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 24 May 2026 01:11:16 +0800 Subject: [PATCH 002/162] feat(server): add system dependency runtime diagnostics --- .../__tests__/diagnostics-commands.test.ts | 78 ++++++++++- .../system-deps/runtime-status.test.ts | 81 ++++++++++++ packages/server/src/commands/diagnostics.ts | 73 ++++++----- .../server/src/system-deps/definitions.ts | 31 +++++ .../server/src/system-deps/runtime-status.ts | 122 ++++++++++++++++++ 5 files changed, 347 insertions(+), 38 deletions(-) create mode 100644 packages/server/src/__tests__/system-deps/runtime-status.test.ts create mode 100644 packages/server/src/system-deps/definitions.ts create mode 100644 packages/server/src/system-deps/runtime-status.ts diff --git a/packages/server/src/__tests__/diagnostics-commands.test.ts b/packages/server/src/__tests__/diagnostics-commands.test.ts index d8ff36f7..108e03e0 100644 --- a/packages/server/src/__tests__/diagnostics-commands.test.ts +++ b/packages/server/src/__tests__/diagnostics-commands.test.ts @@ -19,6 +19,8 @@ import "../commands/diagnostics.js"; import "../commands/workspace.js"; function createContext(overrides: Partial = {}): CommandContext { + const { providerRuntimeDeps, ...restOverrides } = overrides; + return { workspaceMgr: { get: (workspaceId: string) => @@ -44,8 +46,18 @@ function createContext(overrides: Partial = {}): CommandContext }, providerRuntimeDeps: { commandExists: async () => true, + runCommand: async (file: string) => { + if (file === "git") { + return { stdout: "git version 0.0-test\n", stderr: "" }; + } + if (file === "node") { + return { stdout: "v0.0.0-test\n", stderr: "" }; + } + throw new Error(`unexpected command: ${file}`); + }, + ...providerRuntimeDeps, }, - ...overrides, + ...restOverrides, }; } @@ -71,6 +83,16 @@ describe("diagnostics commands", () => { }); expect((result.data as { checks: Array<{ code: string; status: string }> }).checks).toEqual( expect.arrayContaining([ + expect.objectContaining({ + code: "git_ready", + status: "ready", + version: "git version 0.0-test", + }), + expect.objectContaining({ + code: "nodejs_ready", + status: "ready", + version: "v0.0.0-test", + }), expect.objectContaining({ code: "provider_runtime_ready", status: "ready", @@ -124,6 +146,60 @@ describe("diagnostics commands", () => { ); }); + it("blocks session start when node is missing but keeps workspace-open non-blocking", async () => { + const workspaceDir = await mkdtemp(join(tmpdir(), "diagnostics-base-runtime-")); + const nodeMissingContext = createContext({ + workspaceMgr: { + get: (workspaceId: string) => + workspaceId === "ws-1" ? { id: "ws-1", path: workspaceDir } : undefined, + list: () => [], + } as unknown as WorkspaceManager, + providerRuntimeDeps: { + commandExists: async (command: string) => + command === "brew" || command === "claude" || command === "git", + runCommand: async (file: string) => { + if (file === "git") { + return { stdout: "git version 2.49.0\n", stderr: "" }; + } + if (file === "node") { + throw Object.assign(new Error("missing node"), { exitCode: 127 }); + } + return { stdout: "", stderr: "" }; + }, + platform: "darwin", + }, + }); + + const sessionResult = await dispatch( + { + kind: "command", + id: "diag-session-node-missing", + op: "diagnostics.get", + args: { context: "session_start", workspaceId: "ws-1", providerId: "claude" }, + }, + nodeMissingContext + ); + + expect(sessionResult.ok).toBe(true); + expect(sessionResult.data).toMatchObject({ context: "session_start", canContinue: false }); + expect((sessionResult.data as { checks: Array<{ code: string }> }).checks).toEqual( + expect.arrayContaining([expect.objectContaining({ code: "nodejs_missing" })]) + ); + + const workspaceResult = await dispatch( + { + kind: "command", + id: "diag-workspace-node-missing", + op: "diagnostics.get", + args: { context: "workspace_open", workspacePath: workspaceDir }, + }, + nodeMissingContext + ); + + expect(workspaceResult.ok).toBe(true); + expect(workspaceResult.data).toMatchObject({ context: "workspace_open", canContinue: true }); + }); + it("returns workspace_path_not_found when the selected workspace path no longer exists", async () => { const result = await dispatch( { diff --git a/packages/server/src/__tests__/system-deps/runtime-status.test.ts b/packages/server/src/__tests__/system-deps/runtime-status.test.ts new file mode 100644 index 00000000..fa0ff634 --- /dev/null +++ b/packages/server/src/__tests__/system-deps/runtime-status.test.ts @@ -0,0 +1,81 @@ +import { describe, expect, it, vi } from "vitest"; +import { buildSystemDependencyRuntimeStatus } from "../../system-deps/runtime-status.js"; + +describe("buildSystemDependencyRuntimeStatus", () => { + it("uses commandExists as the availability gate before reading versions", async () => { + const runCommand = vi.fn(async (file: string) => { + if (file === "git") { + return { stdout: "git version 2.49.0\n", stderr: "" }; + } + if (file === "node") { + return { stdout: "v24.1.0\n", stderr: "" }; + } + throw new Error(`unexpected command: ${file}`); + }); + + const status = await buildSystemDependencyRuntimeStatus({ + platform: "darwin", + commandExists: vi.fn(async (command: string) => command === "brew" || command === "node"), + runCommand, + }); + + expect(status.dependencies.git).toMatchObject({ + dependencyId: "git", + available: false, + version: undefined, + autoInstallSupported: true, + installReadiness: "ready", + packageManager: "brew", + }); + expect(status.dependencies.node).toMatchObject({ + dependencyId: "node", + available: true, + version: "v24.1.0", + }); + expect(runCommand).toHaveBeenCalledTimes(1); + expect(runCommand).toHaveBeenCalledWith("node", ["--version"], { windowsHide: true }); + }); + + it("marks git installable on macOS when brew exists but git is missing", async () => { + const runCommand = vi.fn(async (file: string) => { + if (file === "git") { + throw Object.assign(new Error("missing git"), { exitCode: 127, stdout: "", stderr: "" }); + } + if (file === "node") { + return { stdout: "v24.1.0\n", stderr: "" }; + } + throw new Error(`unexpected command: ${file}`); + }); + + const status = await buildSystemDependencyRuntimeStatus({ + platform: "darwin", + commandExists: vi.fn(async (command: string) => command === "brew" || command === "node"), + runCommand, + }); + + expect(status.dependencies.git).toMatchObject({ + dependencyId: "git", + available: false, + autoInstallSupported: true, + installReadiness: "ready", + packageManager: "brew", + }); + expect(status.dependencies.node).toMatchObject({ + available: true, + version: "v24.1.0", + }); + }); + + it("reports unsupported_package_manager when Linux has neither apt nor brew", async () => { + const status = await buildSystemDependencyRuntimeStatus({ + platform: "linux", + commandExists: vi.fn(async () => false), + runCommand: vi.fn(async () => { + throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); + }), + }); + + expect(status.dependencies.git.installReadiness).toBe("unsupported_package_manager"); + expect(status.dependencies.node.autoInstallSupported).toBe(false); + }); +}); diff --git a/packages/server/src/commands/diagnostics.ts b/packages/server/src/commands/diagnostics.ts index a5e1d837..75c8831b 100644 --- a/packages/server/src/commands/diagnostics.ts +++ b/packages/server/src/commands/diagnostics.ts @@ -6,8 +6,8 @@ import type { ProviderRuntimeStatusEntry, } from "@coder-studio/core"; import { z } from "zod"; -import { runCommandAsString } from "../provider-runtime/command-runner.js"; import { buildProviderRuntimeStatus } from "../provider-runtime/runtime-status.js"; +import { buildSystemDependencyRuntimeStatus } from "../system-deps/runtime-status.js"; import { validatePath } from "../workspace/validator.js"; import { type CommandContext, registerCommand } from "../ws/dispatch.js"; @@ -281,45 +281,38 @@ function buildMobileHostCheck(ctx: CommandContext): { }; } -async function readCommandVersion( - command: string, - args: string[], - ctx: CommandContext -): Promise { - const runner = ctx.providerRuntimeDeps?.runCommand ?? runCommandAsString; - - try { - const { stdout } = await runner(command, args, { windowsHide: true }); - const version = stdout.trim(); - return version.length > 0 ? version : null; - } catch { - return null; - } -} - async function buildBaseRuntimeChecks( ctx: CommandContext ): Promise<{ canContinue: boolean; checks: DiagnosticsCheck[] }> { - const gitVersion = await readCommandVersion("git", ["--version"], ctx); - const nodeVersion = await readCommandVersion("node", ["--version"], ctx); - const checks: DiagnosticsCheck[] = [ - { - id: "runtime:git", - code: gitVersion ? "git_ready" : "git_missing", - status: gitVersion ? "ready" : "needs_attention", - version: gitVersion ?? undefined, - }, - { - id: "runtime:nodejs", - code: nodeVersion ? "nodejs_ready" : "nodejs_missing", - status: nodeVersion ? "ready" : "needs_attention", - version: nodeVersion ?? undefined, - }, - ]; - + const runtime = await buildSystemDependencyRuntimeStatus(ctx.providerRuntimeDeps); + const git = runtime.dependencies.git; + const node = runtime.dependencies.node; return { - canContinue: Boolean(gitVersion && nodeVersion), - checks, + canContinue: git.available && node.available, + checks: [ + { + id: "runtime:git", + code: git.available ? "git_ready" : "git_missing", + status: git.available ? "ready" : "needs_attention", + dependencyId: "git", + autoInstallSupported: git.autoInstallSupported, + installReadiness: git.installReadiness, + manualGuideKeys: git.manualGuideKeys, + docUrl: git.docUrl, + version: git.version, + }, + { + id: "runtime:nodejs", + code: node.available ? "nodejs_ready" : "nodejs_missing", + status: node.available ? "ready" : "needs_attention", + dependencyId: "node", + autoInstallSupported: node.autoInstallSupported, + installReadiness: node.installReadiness, + manualGuideKeys: node.manualGuideKeys, + docUrl: node.docUrl, + version: node.version, + }, + ], }; } @@ -328,16 +321,20 @@ async function buildSessionStartDiagnostics( ctx: CommandContext ): Promise { const workspaceSelection = await buildWorkspaceSelectionChecks(args, ctx); + const baseRuntime = await buildBaseRuntimeChecks(ctx); const providerChecks = await buildAllProviderChecks(ctx, args.providerId); const mobileHost = buildMobileHostCheck(ctx); const checks: DiagnosticsCheck[] = [ ...workspaceSelection.checks, + ...baseRuntime.checks, ...providerChecks.checks, buildServerAuthCheck(ctx), mobileHost.check, ]; const canContinue = - workspaceSelection.canContinue && providerChecks.canContinueForPreferredProvider; + workspaceSelection.canContinue && + baseRuntime.canContinue && + providerChecks.canContinueForPreferredProvider; return { context: "session_start", @@ -434,6 +431,7 @@ async function buildDiagnostics( switch (args.context as DiagnosticsContext) { case "workspace_open": { const workspaceSelection = await buildWorkspaceSelectionChecks(args, ctx); + const baseRuntime = await buildBaseRuntimeChecks(ctx); const providerChecks = await buildAllProviderChecks(ctx, args.providerId); const mobileHost = buildMobileHostCheck(ctx); return { @@ -441,6 +439,7 @@ async function buildDiagnostics( canContinue: workspaceSelection.canContinue, checks: [ ...workspaceSelection.checks, + ...baseRuntime.checks, ...providerChecks.checks, buildServerAuthCheck(ctx), mobileHost.check, diff --git a/packages/server/src/system-deps/definitions.ts b/packages/server/src/system-deps/definitions.ts new file mode 100644 index 00000000..8d66c3d6 --- /dev/null +++ b/packages/server/src/system-deps/definitions.ts @@ -0,0 +1,31 @@ +import type { SystemDependencyId, SystemDependencyPackageManager } from "@coder-studio/core"; + +export interface SystemDependencyDefinition { + dependencyId: SystemDependencyId; + versionCommand: { file: string; args: string[] }; + docsUrl: string; + manualGuideKeys: string[]; +} + +export const SYSTEM_DEPENDENCY_DEFINITIONS: Record = + { + git: { + dependencyId: "git", + versionCommand: { file: "git", args: ["--version"] }, + docsUrl: "https://git-scm.com/downloads", + manualGuideKeys: ["system_deps.install.git.manual"], + }, + node: { + dependencyId: "node", + versionCommand: { file: "node", args: ["--version"] }, + docsUrl: "https://nodejs.org/en/download", + manualGuideKeys: ["system_deps.install.node.manual"], + }, + }; + +export const PACKAGE_MANAGER_ORDER: Partial< + Record +> = { + darwin: ["brew"], + linux: ["apt-get", "dnf", "yum", "pacman", "zypper"], +}; diff --git a/packages/server/src/system-deps/runtime-status.ts b/packages/server/src/system-deps/runtime-status.ts new file mode 100644 index 00000000..800f21ee --- /dev/null +++ b/packages/server/src/system-deps/runtime-status.ts @@ -0,0 +1,122 @@ +import { + SYSTEM_DEPENDENCY_IDS, + type SystemDependencyId, + type SystemDependencyPackageManager, + type SystemDependencyRuntimeEntry, + type SystemDependencyRuntimeStatusResponse, +} from "@coder-studio/core"; +import { + type CommandAvailabilityCheck, + checkCommandAvailable, +} from "../provider-runtime/command-check.js"; +import { runCommandAsString } from "../provider-runtime/command-runner.js"; +import type { RuntimeStatusDeps } from "../provider-runtime/runtime-status.js"; +import { PACKAGE_MANAGER_ORDER, SYSTEM_DEPENDENCY_DEFINITIONS } from "./definitions.js"; + +async function readVersion( + dependencyId: SystemDependencyId, + deps: RuntimeStatusDeps +): Promise { + const definition = SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId]; + const runner = deps.runCommand ?? runCommandAsString; + + try { + const { stdout } = await runner( + definition.versionCommand.file, + definition.versionCommand.args, + { + windowsHide: true, + } + ); + const version = stdout.trim(); + return version.length > 0 ? version : undefined; + } catch { + return undefined; + } +} + +function getCommandExists(deps: RuntimeStatusDeps): CommandAvailabilityCheck { + return deps.commandExists ?? ((command: string) => checkCommandAvailable(command, deps)); +} + +async function detectPackageManager( + platform: NodeJS.Platform, + commandExists: CommandAvailabilityCheck +): Promise { + const candidates = PACKAGE_MANAGER_ORDER[platform] ?? []; + + for (const candidate of candidates) { + if (await commandExists(candidate)) { + return candidate; + } + } + + return undefined; +} + +async function buildDependencyEntry( + dependencyId: SystemDependencyId, + deps: RuntimeStatusDeps, + platform: NodeJS.Platform, + commandExists: CommandAvailabilityCheck, + packageManager: SystemDependencyPackageManager | undefined +): Promise { + const definition = SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId]; + const available = await commandExists(definition.versionCommand.file); + const version = available ? await readVersion(dependencyId, deps) : undefined; + + return { + dependencyId, + available, + version, + autoInstallSupported: !available && Boolean(packageManager), + installReadiness: available + ? "ready" + : packageManager + ? "ready" + : platform === "darwin" || platform === "linux" + ? "unsupported_package_manager" + : "unsupported_platform", + packageManager, + manualGuideKeys: definition.manualGuideKeys, + docUrl: definition.docsUrl, + }; +} + +async function buildDependencyMap( + ids: readonly [], + buildEntry: (dependencyId: never) => Promise +): Promise>; +async function buildDependencyMap< + const T extends readonly [SystemDependencyId, ...SystemDependencyId[]], +>( + ids: T, + buildEntry: (dependencyId: T[number]) => Promise +): Promise<{ [K in T[number]]: SystemDependencyRuntimeEntry }>; +async function buildDependencyMap( + ids: readonly SystemDependencyId[], + buildEntry: (dependencyId: SystemDependencyId) => Promise +): Promise> { + if (ids.length === 0) { + return {}; + } + + const [head, ...tail] = ids; + return { + [head]: await buildEntry(head), + ...(await buildDependencyMap(tail, buildEntry)), + }; +} + +export async function buildSystemDependencyRuntimeStatus( + deps: RuntimeStatusDeps = {} +): Promise { + const platform = deps.platform ?? process.platform; + const commandExists = getCommandExists(deps); + const packageManager = await detectPackageManager(platform, commandExists); + const dependencies = await buildDependencyMap(SYSTEM_DEPENDENCY_IDS, (dependencyId) => + buildDependencyEntry(dependencyId, deps, platform, commandExists, packageManager) + ); + + return { dependencies }; +} From 6ce491396ebdc3063bd8d6f06f427bed58f5da15 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 24 May 2026 01:17:52 +0800 Subject: [PATCH 003/162] feat(server): add interactive system dependency installer --- packages/core/src/protocol/topics.ts | 1 + .../system-deps/install-manager.test.ts | 105 ++++ .../system-deps/interaction-detector.test.ts | 27 + .../server/src/system-deps/install-manager.ts | 521 ++++++++++++++++++ .../src/system-deps/interaction-detector.ts | 31 ++ 5 files changed, 685 insertions(+) create mode 100644 packages/server/src/__tests__/system-deps/install-manager.test.ts create mode 100644 packages/server/src/__tests__/system-deps/interaction-detector.test.ts create mode 100644 packages/server/src/system-deps/install-manager.ts create mode 100644 packages/server/src/system-deps/interaction-detector.ts diff --git a/packages/core/src/protocol/topics.ts b/packages/core/src/protocol/topics.ts index 6eda379a..1cb8b284 100644 --- a/packages/core/src/protocol/topics.ts +++ b/packages/core/src/protocol/topics.ts @@ -35,6 +35,7 @@ export const Topics = { // Notification notificationToast: "notification.toast", updateStateChanged: "update.state.changed", + systemDependencyInstallOutput: (jobId: string) => `systemDeps.install.${jobId}.output`, // Supervisor-level (Phase 3) supervisorState: (workspaceId: string, sessionId: string) => diff --git a/packages/server/src/__tests__/system-deps/install-manager.test.ts b/packages/server/src/__tests__/system-deps/install-manager.test.ts new file mode 100644 index 00000000..e4f7b6b9 --- /dev/null +++ b/packages/server/src/__tests__/system-deps/install-manager.test.ts @@ -0,0 +1,105 @@ +import { Topics } from "@coder-studio/core"; +import { describe, expect, it, vi } from "vitest"; +import { SystemDependencyInstallManager } from "../../system-deps/install-manager.js"; + +function createFakePtyHost() { + let onData: ((data: string) => void) | undefined; + let onExit: ((event: { exitCode: number }) => void) | undefined; + const writes: string[] = []; + + return { + writes, + host: { + spawn: vi.fn(() => ({ + onData: (cb: (data: string) => void) => { + onData = cb; + }, + onExit: (cb: (event: { exitCode: number }) => void) => { + onExit = cb; + }, + write: (data: string | Buffer) => { + writes.push(Buffer.isBuffer(data) ? data.toString("utf8") : data); + }, + resize: () => {}, + kill: async () => { + onExit?.({ exitCode: 130 }); + }, + })), + }, + emitData: (data: string) => onData?.(data), + emitExit: (exitCode = 0) => onExit?.({ exitCode }), + }; +} + +describe("SystemDependencyInstallManager", () => { + it("reuses the active job, broadcasts output, waits for password input, and verifies success", async () => { + const pty = createFakePtyHost(); + const broadcast = vi.fn(); + let gitInstalled = false; + const manager = new SystemDependencyInstallManager({ + platform: "linux", + ptyHost: pty.host, + broadcaster: { broadcast } as never, + commandExists: vi.fn( + async (command: string) => command === "apt-get" || (gitInstalled && command === "git") + ), + runCommand: vi.fn(async (file: string) => { + if (file === "git") { + if (!gitInstalled) { + throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); + } + return { stdout: "git version 2.49.0\n", stderr: "" }; + } + throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); + }), + }); + + const first = await manager.start("git"); + const second = await manager.start("git"); + + expect(second.jobId).toBe(first.jobId); + + pty.emitData("[sudo] password for spencer:"); + + await vi.waitFor(() => { + expect(manager.get(first.jobId)?.status).toBe("waiting_input"); + }); + + await manager.submitInput(first.jobId, "hunter2\n"); + expect(pty.writes.at(-1)).toBe("hunter2\n"); + + gitInstalled = true; + pty.emitData("installed git\n"); + pty.emitExit(0); + + await vi.waitFor(() => { + expect(manager.get(first.jobId)?.status).toBe("succeeded"); + }); + + expect(broadcast).toHaveBeenCalledWith( + Topics.systemDependencyInstallOutput(first.jobId), + expect.objectContaining({ jobId: first.jobId, chunk: "installed git\n" }) + ); + }); + + it("marks a cancelled job when the user aborts the install", async () => { + const pty = createFakePtyHost(); + const manager = new SystemDependencyInstallManager({ + platform: "linux", + ptyHost: pty.host, + broadcaster: { broadcast: vi.fn() } as never, + commandExists: vi.fn(async (command: string) => command === "apt-get"), + runCommand: vi.fn(async () => { + throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); + }), + }); + + const job = await manager.start("git"); + await manager.cancel(job.jobId); + + expect(manager.get(job.jobId)).toMatchObject({ + status: "cancelled", + failure: { code: "user_cancelled" }, + }); + }); +}); diff --git a/packages/server/src/__tests__/system-deps/interaction-detector.test.ts b/packages/server/src/__tests__/system-deps/interaction-detector.test.ts new file mode 100644 index 00000000..7a12ba7a --- /dev/null +++ b/packages/server/src/__tests__/system-deps/interaction-detector.test.ts @@ -0,0 +1,27 @@ +import { describe, expect, it } from "vitest"; +import { detectSystemDependencyInteraction } from "../../system-deps/interaction-detector.js"; + +describe("detectSystemDependencyInteraction", () => { + it("detects sudo password prompts without enabling echo", () => { + expect(detectSystemDependencyInteraction("[sudo] password for spencer:")).toEqual({ + kind: "sudo_password", + promptExcerpt: "[sudo] password for spencer:", + echo: false, + }); + }); + + it("detects confirmation prompts", () => { + expect(detectSystemDependencyInteraction("Proceed? [Y/n]")).toEqual({ + kind: "confirm", + promptExcerpt: "Proceed? [Y/n]", + echo: true, + }); + }); + + it("returns none when output is not interactive", () => { + expect(detectSystemDependencyInteraction("installed git")).toEqual({ + kind: "none", + echo: false, + }); + }); +}); diff --git a/packages/server/src/system-deps/install-manager.ts b/packages/server/src/system-deps/install-manager.ts new file mode 100644 index 00000000..7ca2b51b --- /dev/null +++ b/packages/server/src/system-deps/install-manager.ts @@ -0,0 +1,521 @@ +import { randomUUID } from "node:crypto"; +import process from "node:process"; +import type { + SystemDependencyId, + SystemDependencyInstallFailure, + SystemDependencyInstallJobSnapshot, + SystemDependencyInstallStepSnapshot, + SystemDependencyPackageManager, +} from "@coder-studio/core"; +import { Topics } from "@coder-studio/core"; +import type { RuntimeStatusDeps } from "../provider-runtime/runtime-status.js"; +import type { PtyHost, PtyProcess } from "../terminal/types.js"; +import type { Broadcaster } from "../ws/hub.js"; +import { SYSTEM_DEPENDENCY_DEFINITIONS } from "./definitions.js"; +import { detectSystemDependencyInteraction } from "./interaction-detector.js"; +import { buildSystemDependencyRuntimeStatus } from "./runtime-status.js"; + +const EXCERPT_LIMIT = 400; + +interface InstallSession { + process: PtyProcess; + seq: number; +} + +export interface SystemDependencyInstallManagerDeps extends RuntimeStatusDeps { + ptyHost: PtyHost; + broadcaster: Pick; +} + +export class SystemDependencyInstallManager { + private readonly jobs = new Map(); + private readonly activeJobIdsByDependencyId = new Map(); + private readonly inFlightStartsByDependencyId = new Map< + SystemDependencyId, + Promise + >(); + private readonly sessions = new Map(); + + constructor(private readonly deps: SystemDependencyInstallManagerDeps) {} + + async start(dependencyId: SystemDependencyId): Promise { + const activeJob = this.getActiveJob(dependencyId); + if (activeJob) { + return cloneJobSnapshot(activeJob); + } + + const inFlightStart = this.inFlightStartsByDependencyId.get(dependencyId); + if (inFlightStart) { + return cloneJobSnapshot(await inFlightStart); + } + + const startPromise = this.prepareAndStart(dependencyId); + this.inFlightStartsByDependencyId.set(dependencyId, startPromise); + + try { + return cloneJobSnapshot(await startPromise); + } finally { + if (this.inFlightStartsByDependencyId.get(dependencyId) === startPromise) { + this.inFlightStartsByDependencyId.delete(dependencyId); + } + } + } + + get(jobId: string): SystemDependencyInstallJobSnapshot | undefined { + const job = this.jobs.get(jobId); + return job ? cloneJobSnapshot(job) : undefined; + } + + async submitInput(jobId: string, text: string): Promise { + const job = this.jobs.get(jobId); + const session = this.sessions.get(jobId); + if (!job || !session) { + throw { + code: "system_dependency_install_job_not_found", + message: `Install job not found: ${jobId}`, + }; + } + + job.status = "running"; + job.interaction = { kind: "none", echo: false }; + session.process.write(text); + + return cloneJobSnapshot(job); + } + + async cancel(jobId: string): Promise { + const job = this.jobs.get(jobId); + if (!job) { + throw { + code: "system_dependency_install_job_not_found", + message: `Install job not found: ${jobId}`, + }; + } + + if (job.status === "succeeded" || job.status === "failed" || job.status === "cancelled") { + return cloneJobSnapshot(job); + } + + const session = this.sessions.get(jobId); + const installStep = this.getCurrentStep(job); + if (installStep) { + installStep.status = "failed"; + installStep.finishedAt = Date.now(); + installStep.exitCode = 130; + } + + job.status = "cancelled"; + job.interaction = { kind: "none", echo: false }; + job.failure = this.createFailure(job, { + code: "user_cancelled", + message: `Install cancelled for ${job.dependencyId}`, + exitCode: 130, + }); + + this.activeJobIdsByDependencyId.delete(job.dependencyId); + + if (session) { + await session.process.kill("SIGTERM"); + this.sessions.delete(jobId); + } + + return cloneJobSnapshot(job); + } + + private getActiveJob( + dependencyId: SystemDependencyId + ): SystemDependencyInstallJobSnapshot | undefined { + const jobId = this.activeJobIdsByDependencyId.get(dependencyId); + if (!jobId) { + return undefined; + } + + const job = this.jobs.get(jobId); + if (!job) { + this.activeJobIdsByDependencyId.delete(dependencyId); + return undefined; + } + + if (job.status === "running" || job.status === "waiting_input" || job.status === "queued") { + return job; + } + + this.activeJobIdsByDependencyId.delete(dependencyId); + return undefined; + } + + private async prepareAndStart( + dependencyId: SystemDependencyId + ): Promise { + const runtime = await buildSystemDependencyRuntimeStatus(this.deps); + const entry = runtime.dependencies[dependencyId]; + + if (entry.available) { + const readyJob: SystemDependencyInstallJobSnapshot = { + jobId: randomUUID(), + dependencyId, + status: "succeeded", + packageManager: entry.packageManager, + steps: [], + interaction: { kind: "none", echo: false }, + }; + this.jobs.set(readyJob.jobId, readyJob); + return readyJob; + } + + if (!entry.autoInstallSupported || !entry.packageManager) { + const failedJob = this.createUnsupportedJob( + dependencyId, + entry.installReadiness === "unsupported_platform" + ? "unsupported_platform" + : "unsupported_package_manager", + entry.packageManager + ); + this.jobs.set(failedJob.jobId, failedJob); + return failedJob; + } + + return this.spawnInstallJob(dependencyId, entry.packageManager); + } + + private createUnsupportedJob( + dependencyId: SystemDependencyId, + code: "unsupported_platform" | "unsupported_package_manager", + packageManager: SystemDependencyPackageManager | undefined + ): SystemDependencyInstallJobSnapshot { + const stepId = `install-${dependencyId}`; + const command = packageManager ?? dependencyId; + + return { + jobId: randomUUID(), + dependencyId, + status: "failed", + packageManager, + currentStepId: stepId, + steps: [ + { + id: stepId, + titleKey: `system_deps.install.step.install.${dependencyId}`, + kind: "install", + command, + args: [], + status: "failed", + finishedAt: Date.now(), + }, + ], + interaction: { kind: "none", echo: false }, + failure: { + code, + dependencyId, + failedStepId: stepId, + message: `Cannot auto-install ${dependencyId}`, + command, + args: [], + packageManager, + manualGuideKeys: SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId].manualGuideKeys, + docUrl: SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId].docsUrl, + }, + }; + } + + private spawnInstallJob( + dependencyId: SystemDependencyId, + packageManager: SystemDependencyPackageManager + ): SystemDependencyInstallJobSnapshot { + const shellCommand = getInstallShellCommand(packageManager, dependencyId); + const env = getPtyEnv(); + const stepId = `install-${dependencyId}`; + + try { + const ptyProcess = this.deps.ptyHost.spawn(["/bin/sh", "-lc", shellCommand], { + cwd: process.cwd(), + env, + cols: 120, + rows: 30, + }); + + const job: SystemDependencyInstallJobSnapshot = { + jobId: randomUUID(), + dependencyId, + status: "running", + packageManager, + currentStepId: stepId, + steps: [ + { + id: stepId, + titleKey: `system_deps.install.step.install.${dependencyId}`, + kind: "install", + command: "/bin/sh", + args: ["-lc", shellCommand], + status: "running", + startedAt: Date.now(), + }, + { + id: `verify-${dependencyId}`, + titleKey: `system_deps.install.step.verify.${dependencyId}`, + kind: "verify", + command: SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId].versionCommand.file, + args: SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId].versionCommand.args, + status: "pending", + }, + ], + interaction: { kind: "none", echo: false }, + }; + + this.jobs.set(job.jobId, job); + this.activeJobIdsByDependencyId.set(dependencyId, job.jobId); + this.sessions.set(job.jobId, { process: ptyProcess, seq: 0 }); + + ptyProcess.onData((chunk) => { + this.handleOutput(job.jobId, chunk); + }); + ptyProcess.onExit(({ exitCode }) => { + void this.handleExit(job.jobId, exitCode); + }); + + return job; + } catch (error) { + const details = toErrorDetails(error); + const failedJob: SystemDependencyInstallJobSnapshot = { + jobId: randomUUID(), + dependencyId, + status: "failed", + packageManager, + currentStepId: stepId, + steps: [ + { + id: stepId, + titleKey: `system_deps.install.step.install.${dependencyId}`, + kind: "install", + command: "/bin/sh", + args: ["-lc", shellCommand], + status: "failed", + finishedAt: Date.now(), + stdoutExcerpt: excerpt(details.stdout), + stderrExcerpt: excerpt(details.stderr || details.message), + }, + ], + interaction: { kind: "none", echo: false }, + failure: { + code: details.code === "ENOENT" ? "command_not_found" : "unknown_failure", + dependencyId, + failedStepId: stepId, + message: details.message, + command: "/bin/sh", + args: ["-lc", shellCommand], + packageManager, + manualGuideKeys: SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId].manualGuideKeys, + docUrl: SYSTEM_DEPENDENCY_DEFINITIONS[dependencyId].docsUrl, + stdoutExcerpt: excerpt(details.stdout), + stderrExcerpt: excerpt(details.stderr || details.message), + }, + }; + this.jobs.set(failedJob.jobId, failedJob); + return failedJob; + } + } + + private handleOutput(jobId: string, chunk: string): void { + const job = this.jobs.get(jobId); + const session = this.sessions.get(jobId); + if (!job || !session) { + return; + } + + session.seq += 1; + this.deps.broadcaster.broadcast(Topics.systemDependencyInstallOutput(jobId), { + jobId, + chunk, + seq: session.seq, + }); + + const interaction = detectSystemDependencyInteraction(chunk); + if (interaction.kind !== "none") { + job.status = "waiting_input"; + job.interaction = interaction; + } + + const installStep = job.steps[0]; + if (installStep) { + installStep.stdoutExcerpt = excerpt(chunk); + } + } + + private async handleExit(jobId: string, exitCode: number): Promise { + const job = this.jobs.get(jobId); + if (!job) { + return; + } + + const installStep = job.steps[0]; + if (installStep && installStep.finishedAt === undefined) { + installStep.finishedAt = Date.now(); + installStep.exitCode = exitCode; + if (job.status !== "cancelled") { + installStep.status = exitCode === 0 ? "succeeded" : "failed"; + } + } + + this.sessions.delete(jobId); + + if (job.status === "cancelled") { + this.activeJobIdsByDependencyId.delete(job.dependencyId); + return; + } + + if (exitCode !== 0) { + job.status = "failed"; + job.interaction = { kind: "none", echo: false }; + job.failure = this.createFailure(job, { + code: "command_failed", + message: `Install failed for ${job.dependencyId}`, + exitCode, + }); + this.activeJobIdsByDependencyId.delete(job.dependencyId); + return; + } + + const verifyStep = job.steps[1]; + if (verifyStep) { + job.currentStepId = verifyStep.id; + verifyStep.status = "running"; + verifyStep.startedAt = Date.now(); + } + + const runtime = await buildSystemDependencyRuntimeStatus(this.deps); + const entry = runtime.dependencies[job.dependencyId]; + + if (verifyStep) { + verifyStep.finishedAt = Date.now(); + verifyStep.stdoutExcerpt = entry.version; + verifyStep.status = entry.available ? "succeeded" : "failed"; + } + + if (!entry.available) { + job.status = "failed"; + job.interaction = { kind: "none", echo: false }; + job.failure = this.createFailure(job, { + code: "verification_failed", + message: `Verification failed for ${job.dependencyId}`, + }); + this.activeJobIdsByDependencyId.delete(job.dependencyId); + return; + } + + job.status = "succeeded"; + job.interaction = { kind: "none", echo: false }; + this.activeJobIdsByDependencyId.delete(job.dependencyId); + } + + private getCurrentStep( + job: SystemDependencyInstallJobSnapshot + ): SystemDependencyInstallStepSnapshot | undefined { + if (job.currentStepId) { + return job.steps.find((step) => step.id === job.currentStepId); + } + + return job.steps.at(-1); + } + + private createFailure( + job: SystemDependencyInstallJobSnapshot, + input: { + code: SystemDependencyInstallFailure["code"]; + message: string; + exitCode?: number; + } + ): SystemDependencyInstallFailure { + const step = this.getCurrentStep(job); + return { + code: input.code, + dependencyId: job.dependencyId, + failedStepId: step?.id ?? `install-${job.dependencyId}`, + message: input.message, + command: step?.command ?? job.dependencyId, + args: step?.args ?? [], + exitCode: input.exitCode, + packageManager: job.packageManager, + manualGuideKeys: SYSTEM_DEPENDENCY_DEFINITIONS[job.dependencyId].manualGuideKeys, + docUrl: SYSTEM_DEPENDENCY_DEFINITIONS[job.dependencyId].docsUrl, + stdoutExcerpt: step?.stdoutExcerpt, + stderrExcerpt: step?.stderrExcerpt, + }; + } +} + +function getInstallShellCommand( + packageManager: SystemDependencyPackageManager, + dependencyId: SystemDependencyId +): string { + const packageName = dependencyId === "git" ? "git" : "node"; + + switch (packageManager) { + case "brew": + return `brew install ${packageName}`; + case "apt-get": + return dependencyId === "git" + ? "sudo apt-get update && sudo apt-get install -y git" + : "sudo apt-get update && sudo apt-get install -y nodejs npm"; + case "dnf": + return `sudo dnf install -y ${dependencyId === "git" ? "git" : "nodejs"}`; + case "yum": + return `sudo yum install -y ${dependencyId === "git" ? "git" : "nodejs"}`; + case "pacman": + return dependencyId === "git" + ? "sudo pacman -Sy --noconfirm git" + : "sudo pacman -Sy --noconfirm nodejs npm"; + case "zypper": + return `sudo zypper --non-interactive install ${dependencyId === "git" ? "git" : "nodejs"}`; + } +} + +function getPtyEnv(): Record { + const env: Record = {}; + + for (const [key, value] of Object.entries(process.env)) { + if (value != null) { + env[key] = value; + } + } + + env.TERM = "xterm-256color"; + env.COLORTERM = "truecolor"; + env.FORCE_COLOR = "3"; + + return env; +} + +function excerpt(value: string | undefined): string | undefined { + if (!value) { + return undefined; + } + + return value.length <= EXCERPT_LIMIT ? value : value.slice(-EXCERPT_LIMIT); +} + +function cloneJobSnapshot( + job: SystemDependencyInstallJobSnapshot +): SystemDependencyInstallJobSnapshot { + return structuredClone(job); +} + +function toErrorDetails(error: unknown): { + code?: string; + message: string; + stdout?: string; + stderr?: string; +} { + const candidate = error as { + code?: string; + message?: string; + stdout?: string; + stderr?: string; + }; + + return { + code: candidate.code, + message: candidate.message ?? "Unknown system dependency install error", + stdout: candidate.stdout, + stderr: candidate.stderr, + }; +} diff --git a/packages/server/src/system-deps/interaction-detector.ts b/packages/server/src/system-deps/interaction-detector.ts new file mode 100644 index 00000000..f42beb7e --- /dev/null +++ b/packages/server/src/system-deps/interaction-detector.ts @@ -0,0 +1,31 @@ +import type { SystemDependencyInstallInteraction } from "@coder-studio/core"; + +const SUDO_PASSWORD_PATTERNS = [/\[sudo\] password for .*:$/i, /^password:$/i]; +const CONFIRM_PATTERNS = [/proceed\?\s*\[[^\]]+\]$/i, /continue\?\s*\[[^\]]+\]$/i]; + +export function detectSystemDependencyInteraction( + chunk: string +): SystemDependencyInstallInteraction { + const trimmed = chunk.trim(); + + if (SUDO_PASSWORD_PATTERNS.some((pattern) => pattern.test(trimmed))) { + return { + kind: "sudo_password", + promptExcerpt: trimmed, + echo: false, + }; + } + + if (CONFIRM_PATTERNS.some((pattern) => pattern.test(trimmed))) { + return { + kind: "confirm", + promptExcerpt: trimmed, + echo: true, + }; + } + + return { + kind: "none", + echo: false, + }; +} From f7a46884842223a8aaf710f0ef00dd61a63bc253 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 24 May 2026 01:18:23 +0800 Subject: [PATCH 004/162] feat(server): wire system dependency install commands --- .../__tests__/system-deps/commands.test.ts | 103 ++++++++++++++++++ packages/server/src/commands/index.ts | 1 + packages/server/src/commands/system-deps.ts | 85 +++++++++++++++ packages/server/src/server.ts | 9 ++ packages/server/src/ws/dispatch.ts | 2 + 5 files changed, 200 insertions(+) create mode 100644 packages/server/src/__tests__/system-deps/commands.test.ts create mode 100644 packages/server/src/commands/system-deps.ts diff --git a/packages/server/src/__tests__/system-deps/commands.test.ts b/packages/server/src/__tests__/system-deps/commands.test.ts new file mode 100644 index 00000000..243780c5 --- /dev/null +++ b/packages/server/src/__tests__/system-deps/commands.test.ts @@ -0,0 +1,103 @@ +import { describe, expect, it, vi } from "vitest"; +import type { CommandContext } from "../../ws/dispatch.js"; +import { dispatch } from "../../ws/dispatch.js"; + +import "../../commands/system-deps.js"; + +function createContext(overrides: Partial = {}): CommandContext { + return { + workspaceMgr: {} as never, + sessionMgr: {} as never, + terminalMgr: {} as never, + eventBus: {} as never, + broadcaster: { + broadcast: vi.fn(), + sendToClient: () => true, + sendBinaryToClient: () => true, + } as never, + settingsRepo: {} as never, + providerConfigRepo: {} as never, + providerRegistry: [], + fencingMgr: {} as never, + supervisorMgr: {} as never, + autoFetch: {} as never, + activationMgr: {} as never, + lspMgr: {} as never, + providerRuntimeDeps: { + platform: "darwin", + commandExists: vi.fn(async (command: string) => command === "brew" || command === "git"), + runCommand: vi.fn(async (file: string) => { + if (file === "git") { + return { stdout: "git version 2.49.0\n", stderr: "" }; + } + if (file === "node") { + throw Object.assign(new Error("missing node"), { + exitCode: 127, + stdout: "", + stderr: "", + }); + } + return { stdout: "", stderr: "" }; + }), + }, + ...overrides, + }; +} + +describe("system deps commands", () => { + it("returns runtime status through systemDeps.runtimeStatus", async () => { + const result = await dispatch( + { kind: "command", id: "sysdeps-status", op: "systemDeps.runtimeStatus", args: {} }, + createContext() + ); + + expect(result.ok).toBe(true); + expect(result.data).toMatchObject({ + dependencies: { + git: { available: true }, + node: { available: false, autoInstallSupported: true }, + }, + }); + }); + + it("returns install lifecycle errors when the manager is missing or the job id is unknown", async () => { + const unavailable = await dispatch( + { + kind: "command", + id: "sysdeps-start-missing", + op: "systemDeps.install.start", + args: { dependencyId: "git" }, + }, + createContext() + ); + expect(unavailable.ok).toBe(false); + expect(unavailable.error?.code).toBe("system_dependency_install_unavailable"); + + const contextWithManager = createContext({ + systemDependencyInstallMgr: { + start: vi.fn(async () => ({ + jobId: "job-1", + dependencyId: "git", + status: "queued", + steps: [], + interaction: { kind: "none", echo: false }, + })), + get: vi.fn(() => undefined), + submitInput: vi.fn(), + cancel: vi.fn(), + } as never, + }); + + const missingJob = await dispatch( + { + kind: "command", + id: "sysdeps-get-missing", + op: "systemDeps.install.get", + args: { jobId: "missing-job" }, + }, + contextWithManager + ); + expect(missingJob.ok).toBe(false); + expect(missingJob.error?.code).toBe("system_dependency_install_job_not_found"); + }); +}); diff --git a/packages/server/src/commands/index.ts b/packages/server/src/commands/index.ts index 416ea752..a42f732e 100644 --- a/packages/server/src/commands/index.ts +++ b/packages/server/src/commands/index.ts @@ -16,6 +16,7 @@ import "./git.js"; import "./settings.js"; import "./diagnostics.js"; import "./provider.js"; +import "./system-deps.js"; import "./supervisor.js"; import "./worktree.js"; import "./fencing.js"; diff --git a/packages/server/src/commands/system-deps.ts b/packages/server/src/commands/system-deps.ts new file mode 100644 index 00000000..6fa135e5 --- /dev/null +++ b/packages/server/src/commands/system-deps.ts @@ -0,0 +1,85 @@ +import { SYSTEM_DEPENDENCY_IDS, type SystemDependencyInstallJobSnapshot } from "@coder-studio/core"; +import { z } from "zod"; +import { buildSystemDependencyRuntimeStatus } from "../system-deps/runtime-status.js"; +import { registerCommand } from "../ws/dispatch.js"; + +registerCommand("systemDeps.runtimeStatus", z.object({}), async (_args, ctx) => { + return buildSystemDependencyRuntimeStatus(ctx.providerRuntimeDeps); +}); + +registerCommand( + "systemDeps.install.start", + z.object({ + dependencyId: z.enum(SYSTEM_DEPENDENCY_IDS), + }), + async (args, ctx) => { + if (!ctx.systemDependencyInstallMgr) { + throw { + code: "system_dependency_install_unavailable", + message: "System dependency install manager not configured", + }; + } + + return ctx.systemDependencyInstallMgr.start(args.dependencyId); + } +); + +registerCommand( + "systemDeps.install.get", + z.object({ + jobId: z.string(), + }), + async (args, ctx): Promise => { + if (!ctx.systemDependencyInstallMgr) { + throw { + code: "system_dependency_install_unavailable", + message: "System dependency install manager not configured", + }; + } + + const job = ctx.systemDependencyInstallMgr.get(args.jobId); + if (!job) { + throw { + code: "system_dependency_install_job_not_found", + message: `Install job not found: ${args.jobId}`, + }; + } + + return job; + } +); + +registerCommand( + "systemDeps.install.input", + z.object({ + jobId: z.string(), + text: z.string(), + }), + async (args, ctx) => { + if (!ctx.systemDependencyInstallMgr) { + throw { + code: "system_dependency_install_unavailable", + message: "System dependency install manager not configured", + }; + } + + return ctx.systemDependencyInstallMgr.submitInput(args.jobId, args.text); + } +); + +registerCommand( + "systemDeps.install.cancel", + z.object({ + jobId: z.string(), + }), + async (args, ctx) => { + if (!ctx.systemDependencyInstallMgr) { + throw { + code: "system_dependency_install_unavailable", + message: "System dependency install manager not configured", + }; + } + + return ctx.systemDependencyInstallMgr.cancel(args.jobId); + } +); diff --git a/packages/server/src/server.ts b/packages/server/src/server.ts index 5f3b1019..2184b3bd 100644 --- a/packages/server/src/server.ts +++ b/packages/server/src/server.ts @@ -46,6 +46,7 @@ import { UpdateStateRepo } from "./storage/repositories/update-state-repo.js"; import { WorkspaceRepo } from "./storage/repositories/workspace-repo.js"; import { SupervisorManager } from "./supervisor/manager.js"; import * as targetStore from "./supervisor/target-store.js"; +import { SystemDependencyInstallManager } from "./system-deps/install-manager.js"; import { TerminalManager } from "./terminal/manager.js"; import { NodePtyHost } from "./terminal/pty-host.js"; import { UpdateService } from "./update/update-service.js"; @@ -262,12 +263,19 @@ export async function createServer( const providerRuntimeDeps: RuntimeStatusDeps = providerMockOverrides ? { commandExists: providerMockOverrides.commandExists, + runCommand: providerMockOverrides.runCommand, } : {}; const providerInstallMgr = new ProviderInstallManager(providerRegistry, { ...providerRuntimeDeps, runCommand: providerMockOverrides?.runCommand ?? runCommandAsString, }); + const systemDependencyInstallMgr = new SystemDependencyInstallManager({ + ...providerRuntimeDeps, + runCommand: providerMockOverrides?.runCommand ?? runCommandAsString, + ptyHost: createPtyHost(), + broadcaster: wsHub, + }); updateService = new UpdateService({ settingsRepo, @@ -301,6 +309,7 @@ export async function createServer( autoFetch, providerRuntimeDeps, providerInstallMgr, + systemDependencyInstallMgr, activationMgr, config, lspMgr, diff --git a/packages/server/src/ws/dispatch.ts b/packages/server/src/ws/dispatch.ts index a2ab85d5..1b458a80 100644 --- a/packages/server/src/ws/dispatch.ts +++ b/packages/server/src/ws/dispatch.ts @@ -18,6 +18,7 @@ import type { SessionManager } from "../session/manager.js"; import type { ProviderConfigRepo } from "../storage/repositories/provider-config-repo.js"; import type { SettingsRepo } from "../storage/repositories/settings-repo.js"; import type { SupervisorManager } from "../supervisor/manager.js"; +import type { SystemDependencyInstallManager } from "../system-deps/install-manager.js"; import type { TerminalManager } from "../terminal/manager.js"; import type { UpdateService } from "../update/update-service.js"; import type { WorkspaceManager } from "../workspace/manager.js"; @@ -42,6 +43,7 @@ export interface CommandContext { autoFetch: AutoFetchRuntime; providerRuntimeDeps?: RuntimeStatusDeps; providerInstallMgr?: ProviderInstallManager; + systemDependencyInstallMgr?: SystemDependencyInstallManager; activationMgr: ActivationManager; config?: Pick; lspMgr: LspManager; From 6f0598aaba400235150e68c87f01feeb9528206b Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 24 May 2026 01:34:20 +0800 Subject: [PATCH 005/162] feat(web): add diagnostics system dependency installer --- .../use-system-dependency-installer.ts | 146 ++++++++++++++ .../system-dependency-install-panel.tsx | 92 +++++++++ .../src/features/diagnostics/index.test.tsx | 179 ++++++++++++++++++ .../web/src/features/diagnostics/page.tsx | 29 +++ packages/web/src/locales/en.json | 25 +++ packages/web/src/locales/zh.json | 25 +++ packages/web/src/styles/components.css | 57 ++++++ .../web/src/styles/components.theme.test.ts | 7 + 8 files changed, 560 insertions(+) create mode 100644 packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts create mode 100644 packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx diff --git a/packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts b/packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts new file mode 100644 index 00000000..078abd4f --- /dev/null +++ b/packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts @@ -0,0 +1,146 @@ +import type { + SystemDependencyId, + SystemDependencyInstallJobSnapshot, + SystemDependencyInstallOutputChunk, +} from "@coder-studio/core"; +import { Topics } from "@coder-studio/core"; +import { useAtomValue } from "jotai"; +import { useEffect, useRef, useState } from "react"; +import { dispatchCommandAtom, wsClientAtom } from "../../../atoms/connection"; + +export function useSystemDependencyInstaller(onSucceeded: () => Promise) { + const dispatch = useAtomValue(dispatchCommandAtom); + const wsClient = useAtomValue(wsClientAtom); + const [job, setJob] = useState(null); + const [output, setOutput] = useState(""); + const [submitting, setSubmitting] = useState(false); + const pollTimerRef = useRef(null); + + const clearPollTimer = () => { + if (pollTimerRef.current !== null) { + window.clearTimeout(pollTimerRef.current); + pollTimerRef.current = null; + } + }; + + const schedulePoll = (jobId: string) => { + clearPollTimer(); + pollTimerRef.current = window.setTimeout(() => { + void poll(jobId); + }, 50); + }; + + const poll = async (jobId: string) => { + const result = await dispatch("systemDeps.install.get", { + jobId, + }); + + if (!result.ok || !result.data) { + return; + } + + setJob(result.data); + + if (result.data.status === "queued" || result.data.status === "running") { + schedulePoll(jobId); + return; + } + + if (result.data.status === "succeeded") { + clearPollTimer(); + await onSucceeded(); + setJob(null); + setOutput(""); + } + }; + + useEffect(() => { + return () => { + clearPollTimer(); + }; + }, []); + + useEffect(() => { + if (!job || !wsClient) { + return; + } + + return wsClient.subscribe( + [Topics.systemDependencyInstallOutput(job.jobId)], + (_topic, payload) => { + const chunk = payload as SystemDependencyInstallOutputChunk; + setOutput((previous) => `${previous}${chunk.chunk}`); + } + ); + }, [job, wsClient]); + + const start = async (dependencyId: SystemDependencyId) => { + clearPollTimer(); + setOutput(""); + + const result = await dispatch("systemDeps.install.start", { + dependencyId, + }); + if (!result.ok || !result.data) { + return; + } + + setJob(result.data); + + if (result.data.status === "queued" || result.data.status === "running") { + schedulePoll(result.data.jobId); + return; + } + + if (result.data.status === "succeeded") { + await onSucceeded(); + setJob(null); + setOutput(""); + } + }; + + const submitInput = async (text: string) => { + if (!job) { + return; + } + + setSubmitting(true); + const result = await dispatch("systemDeps.install.input", { + jobId: job.jobId, + text, + }); + setSubmitting(false); + + if (!result.ok || !result.data) { + return; + } + + setJob(result.data); + if (result.data.status === "queued" || result.data.status === "running") { + schedulePoll(result.data.jobId); + return; + } + + if (result.data.status === "succeeded") { + await onSucceeded(); + setJob(null); + setOutput(""); + } + }; + + const cancel = async () => { + if (!job) { + return; + } + + clearPollTimer(); + const result = await dispatch("systemDeps.install.cancel", { + jobId: job.jobId, + }); + if (result.ok && result.data) { + setJob(result.data); + } + }; + + return { job, output, submitting, start, submitInput, cancel }; +} diff --git a/packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx b/packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx new file mode 100644 index 00000000..7fc9f70f --- /dev/null +++ b/packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx @@ -0,0 +1,92 @@ +import type { SystemDependencyInstallJobSnapshot } from "@coder-studio/core"; +import { useState } from "react"; +import { Button, Input } from "../../../components/ui"; +import { useTranslation } from "../../../lib/i18n"; + +export function SystemDependencyInstallPanel(props: { + job: SystemDependencyInstallJobSnapshot; + output: string; + submitting: boolean; + onSubmitInput: (text: string) => Promise; + onCancel: () => Promise; +}) { + const t = useTranslation(); + const [value, setValue] = useState(""); + const showInput = + props.job.interaction.kind === "sudo_password" || props.job.interaction.kind === "confirm"; + const label = + props.job.interaction.kind === "confirm" + ? (props.job.interaction.promptExcerpt ?? t("system_deps.install.submit_input")) + : t("system_deps.install.password_label"); + + return ( +
+
+ + {t("system_deps.install.package_manager")}: {props.job.packageManager ?? "—"} + + {t(`system_deps.install.status.${props.job.status}`)} +
+ + 
{props.output}
+ + {showInput ? ( +
{ + event.preventDefault(); + if (!value) { + return; + } + void props.onSubmitInput(`${value}\n`); + setValue(""); + }} + > + + setValue(event.target.value)} + /> +
+ + +
+
+ ) : props.job.status === "queued" || + props.job.status === "running" || + props.job.status === "waiting_input" ? ( +
+ +
+ ) : null} +
+ ); +} diff --git a/packages/web/src/features/diagnostics/index.test.tsx b/packages/web/src/features/diagnostics/index.test.tsx index 5b720063..4a362104 100644 --- a/packages/web/src/features/diagnostics/index.test.tsx +++ b/packages/web/src/features/diagnostics/index.test.tsx @@ -281,6 +281,146 @@ describe("DiagnosticsPage", () => { expect(screen.getByText("Current version: v24.1.0")).toBeInTheDocument(); }); + it("installs a missing git dependency inline, accepts a sudo password, and rechecks on success", async () => { + let diagnosticsCallCount = 0; + let subscriptionHandler: ((topic: string, payload: unknown) => void) | undefined; + const sendCommand = vi.fn(async (op: string, args?: Record) => { + if (op === "diagnostics.get" || op === "diagnostics.recheck") { + diagnosticsCallCount += 1; + if (diagnosticsCallCount === 1) { + return createResponse({ context: "manual_check", canContinue: false }, [ + { + id: "git-missing", + code: "git_missing", + status: "needs_attention", + dependencyId: "git", + autoInstallSupported: true, + installReadiness: "ready", + manualGuideKeys: ["system_deps.install.git.manual"], + docUrl: "https://git-scm.com/downloads", + }, + ] as DiagnosticsCheck[]); + } + + return createResponse({ context: "manual_check", canContinue: true }, [ + { + id: "git-ready", + code: "git_ready", + status: "ready", + dependencyId: "git", + version: "git version 2.49.0", + }, + ] as DiagnosticsCheck[]); + } + + if (op === "systemDeps.install.start") { + expect(args).toEqual({ dependencyId: "git" }); + return { + jobId: "job-1", + dependencyId: "git", + status: "waiting_input", + packageManager: "apt-get", + currentStepId: "install-git", + steps: [], + interaction: { + kind: "sudo_password", + promptExcerpt: "[sudo] password for spencer:", + echo: false, + }, + }; + } + + if (op === "systemDeps.install.input") { + expect(args).toEqual({ jobId: "job-1", text: "hunter2\n" }); + return { + jobId: "job-1", + dependencyId: "git", + status: "running", + packageManager: "apt-get", + currentStepId: "install-git", + steps: [], + interaction: { kind: "none", echo: false }, + }; + } + + if (op === "systemDeps.install.get") { + return { + jobId: "job-1", + dependencyId: "git", + status: "succeeded", + packageManager: "apt-get", + currentStepId: "verify-git", + steps: [], + interaction: { kind: "none", echo: false }, + }; + } + + throw new Error(`Unexpected op: ${op}`); + }); + + const store = createStoreWithClient(sendCommand); + store.set(wsClientAtom, { + sendCommand, + subscribe: vi.fn((_topics: string[], handler: (topic: string, payload: unknown) => void) => { + subscriptionHandler = handler; + return () => { + subscriptionHandler = undefined; + }; + }), + } as never); + + render( + + + + } /> + + + + ); + + expect(await screen.findByText("Git is missing")).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Install Git" })); + expect(await screen.findByText("Package manager: apt-get")).toBeInTheDocument(); + expect(screen.getByLabelText("Administrator password")).toHaveAttribute("type", "password"); + + act(() => { + subscriptionHandler?.("systemDeps.install.job-1.output", { + jobId: "job-1", + chunk: "downloading git\n", + seq: 1, + }); + }); + + expect(await screen.findByText("downloading git")).toBeInTheDocument(); + + fireEvent.change(screen.getByLabelText("Administrator password"), { + target: { value: "hunter2" }, + }); + fireEvent.submit(screen.getByTestId("system-dependency-password-form")); + + await waitFor(() => { + expect(sendCommand).toHaveBeenCalledWith( + "systemDeps.install.get", + { jobId: "job-1" }, + undefined + ); + }); + + expect(sendCommand).toHaveBeenCalledWith( + "diagnostics.recheck", + { + context: "manual_check", + workspaceId: undefined, + workspacePath: undefined, + providerId: undefined, + }, + undefined + ); + expect(await screen.findByText("Git is ready")).toBeInTheDocument(); + }); + it("opens the workspace and updates workspace state when retrying workspace continuation", async () => { const workspace = createWorkspace("ws-1", "/repo"); const sendCommand = vi.fn(async (op: string, args?: Record) => { @@ -348,6 +488,45 @@ describe("DiagnosticsPage", () => { ); }); + it("shows missing git on workspace open without disabling the retry action", async () => { + const workspace = createWorkspace("ws-1", "/repo"); + const sendCommand = vi.fn(async (op: string, args?: Record) => { + if (op === "diagnostics.get") { + return createResponse({ context: "workspace_open", canContinue: true }, [ + { + id: "workspace-ready", + code: "workspace_path_ready", + status: "ready", + workspacePath: "/repo", + }, + { + id: "git-missing", + code: "git_missing", + status: "needs_attention", + dependencyId: "git", + autoInstallSupported: true, + installReadiness: "ready", + }, + ] as DiagnosticsCheck[]); + } + + if (op === "workspace.open") { + return workspace; + } + + if (op === "workspace.lastViewedTarget.set") { + return { workspaceId: "ws-1", updatedAt: 1 }; + } + + throw new Error(`Unexpected op: ${op}`); + }); + + renderDiagnostics("/diagnostics?context=workspace_open&workspacePath=%2Frepo", sendCommand); + + expect(await screen.findByText("Git is missing")).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Retry Opening Workspace" })).toBeEnabled(); + }); + it("shows session-start diagnostics as an environment report with docs and recheck actions", async () => { const sendCommand = vi .fn() diff --git a/packages/web/src/features/diagnostics/page.tsx b/packages/web/src/features/diagnostics/page.tsx index c6d694d7..f68d6e03 100644 --- a/packages/web/src/features/diagnostics/page.tsx +++ b/packages/web/src/features/diagnostics/page.tsx @@ -32,6 +32,8 @@ import { MobilePageHeader } from "../shared/components/mobile-page-header"; import { PageHeader } from "../shared/components/page-header"; import { usePersistWorkspaceLastViewedTarget } from "../workspace/actions/use-persist-workspace-last-viewed-target"; import { useWorkspaceUiStatePersistence } from "../workspace/actions/use-workspace-ui-state-persistence"; +import { useSystemDependencyInstaller } from "./actions/use-system-dependency-installer"; +import { SystemDependencyInstallPanel } from "./components/system-dependency-install-panel"; import { parseDiagnosticsSearch } from "./navigation"; function getProviderLabel(providerId?: string): string { @@ -222,6 +224,9 @@ export function DiagnosticsPage() { const persistWorkspaceUiState = useWorkspaceUiStatePersistence( workspaceUiStateTargetId ?? "__workspace_empty__" ); + const installer = useSystemDependencyInstaller(async () => { + await loadDiagnostics("diagnostics.recheck"); + }); function buildNextPaneLayout( workspaceId: string, @@ -635,6 +640,21 @@ export function DiagnosticsPage() { ) : null}
+ {check.dependencyId && + check.status === "needs_attention" && + check.autoInstallSupported ? ( + + ) : null} {check.docUrl ? (
+ {installer.job && installer.job.dependencyId === check.dependencyId ? ( + + ) : null} ); })} diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 3cec845d..edf0277f 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -1092,6 +1092,31 @@ } } }, + "system_deps": { + "install": { + "install_git": "Install Git", + "install_node": "Install Node.js", + "package_manager": "Package manager", + "password_label": "Administrator password", + "submit_password": "Submit password", + "submit_input": "Submit", + "cancel": "Cancel install", + "status": { + "queued": "Queued", + "running": "Installing", + "waiting_input": "Waiting for password", + "succeeded": "Installed", + "failed": "Install failed", + "cancelled": "Install cancelled" + }, + "git": { + "manual": "Install Git manually if automatic install is not available for this machine." + }, + "node": { + "manual": "Install Node.js manually if automatic install is not available for this machine." + } + } + }, "not_found": { "kicker": "ROUTE NOT FOUND", "title": "Page not found", diff --git a/packages/web/src/locales/zh.json b/packages/web/src/locales/zh.json index 9e55bcbb..3c67aa77 100644 --- a/packages/web/src/locales/zh.json +++ b/packages/web/src/locales/zh.json @@ -1092,6 +1092,31 @@ } } }, + "system_deps": { + "install": { + "install_git": "安装 Git", + "install_node": "安装 Node.js", + "package_manager": "包管理器", + "password_label": "管理员密码", + "submit_password": "提交密码", + "submit_input": "提交", + "cancel": "取消安装", + "status": { + "queued": "等待中", + "running": "安装中", + "waiting_input": "等待输入密码", + "succeeded": "安装完成", + "failed": "安装失败", + "cancelled": "安装已取消" + }, + "git": { + "manual": "如果当前机器不支持自动安装，请手动安装 Git。" + }, + "node": { + "manual": "如果当前机器不支持自动安装，请手动安装 Node.js。" + } + } + }, "not_found": { "kicker": "路由不存在", "title": "页面不存在", diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index 0afcf8a3..f5419124 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -2816,6 +2816,63 @@ body.is-resizing-panels * { gap: var(--sp-2); } +.diagnostics-install-panel { + display: grid; + gap: var(--sp-3); + margin-top: var(--sp-3); + padding: var(--sp-3); + border-color: var(--border-default); + border: 1px solid var(--border-default, var(--border)); + border-radius: var(--radius-lg); + background: var(--bg-surface); +} + +.diagnostics-install-panel__meta { + display: flex; + flex-wrap: wrap; + gap: var(--sp-2) var(--sp-4); + color: var(--text-secondary); + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + font-weight: var(--type-body-6-weight); +} + +.diagnostics-install-panel__log { + min-height: 120px; + max-height: 220px; + overflow: auto; + margin: 0; + padding: var(--sp-3); + border: 1px solid var(--border-subtle, var(--border)); + border-radius: var(--radius-md); + background: var(--bg-panel); + color: var(--text-primary); + white-space: pre-wrap; + word-break: break-word; +} + +.diagnostics-install-panel__prompt { + display: grid; + gap: var(--sp-2); +} + +.diagnostics-install-panel__label { + color: var(--text-secondary); + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + font-weight: var(--type-body-6-weight); +} + +.diagnostics-install-panel__input { + width: 100%; +} + +.diagnostics-install-panel__actions { + display: flex; + flex-wrap: wrap; + gap: var(--sp-2); +} + .welcome-divider { width: 48px; height: 1px; diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts index 60d5a7f8..7642bc59 100644 --- a/packages/web/src/styles/components.theme.test.ts +++ b/packages/web/src/styles/components.theme.test.ts @@ -2993,6 +2993,13 @@ describe("components.css theme-sensitive surfaces", () => { expect(actionRow).toContain("margin-top: var(--sp-3)"); }); + it("keeps diagnostics install surfaces on theme tokens", () => { + expect(stylesheet).toContain(".diagnostics-install-panel"); + expect(stylesheet).toContain("var(--bg-surface)"); + expect(stylesheet).toContain("var(--border-default)"); + expect(stylesheet).toContain("var(--text-secondary)"); + }); + it("does not add a dedicated About interval alignment wrapper", () => { expect(hasRuleBlock(".settings-about-interval-control-wrap")).toBe(false); }); From ee26303042425c4871dbf1a535707a1d9c647513 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 24 May 2026 02:33:48 +0800 Subject: [PATCH 006/162] fix(diagnostics): harden system dependency installs --- .../__tests__/system-deps/commands.test.ts | 115 +++++++ .../system-deps/install-manager.test.ts | 139 +++++++-- packages/server/src/commands/system-deps.ts | 16 +- .../server/src/system-deps/install-manager.ts | 181 +++++++++-- .../server/src/system-deps/runtime-status.ts | 39 +-- packages/server/src/terminal/pty-host.ts | 4 +- packages/server/src/terminal/types.ts | 8 +- .../use-system-dependency-installer.ts | 9 +- .../system-dependency-install-panel.tsx | 39 +++ .../src/features/diagnostics/index.test.tsx | 286 +++++++++++++++++- .../web/src/features/diagnostics/page.tsx | 6 +- packages/web/src/locales/en.json | 24 ++ packages/web/src/locales/zh.json | 24 ++ 13 files changed, 797 insertions(+), 93 deletions(-) diff --git a/packages/server/src/__tests__/system-deps/commands.test.ts b/packages/server/src/__tests__/system-deps/commands.test.ts index 243780c5..93f125f7 100644 --- a/packages/server/src/__tests__/system-deps/commands.test.ts +++ b/packages/server/src/__tests__/system-deps/commands.test.ts @@ -100,4 +100,119 @@ describe("system deps commands", () => { expect(missingJob.ok).toBe(false); expect(missingJob.error?.code).toBe("system_dependency_install_job_not_found"); }); + + it("binds install lifecycle commands to the owner client", async () => { + const start = vi.fn(async (_dependencyId: string, ownerClientId: string) => ({ + jobId: "job-1", + dependencyId: "git", + status: "queued", + steps: [], + interaction: { kind: "none", echo: false }, + ownerClientId, + })); + const get = vi.fn((jobId: string, ownerClientId: string) => { + if (jobId === "job-1" && ownerClientId === "client-a") { + return { + jobId, + dependencyId: "git", + status: "running", + steps: [], + interaction: { kind: "none", echo: false }, + }; + } + return undefined; + }); + const submitInput = vi.fn(async (jobId: string, ownerClientId: string, text: string) => ({ + jobId, + dependencyId: "git", + status: "running", + steps: [], + interaction: { kind: "none", echo: false }, + ownerClientId, + submittedText: text, + })); + const cancel = vi.fn(async (jobId: string, ownerClientId: string) => ({ + jobId, + dependencyId: "git", + status: "cancelled", + steps: [], + interaction: { kind: "none", echo: false }, + ownerClientId, + })); + + const context = createContext({ + systemDependencyInstallMgr: { + start, + get, + submitInput, + cancel, + } as never, + }); + + const started = await dispatch( + { + kind: "command", + id: "sysdeps-start-owner", + op: "systemDeps.install.start", + args: { dependencyId: "git" }, + }, + context, + "client-a" + ); + + expect(started.ok).toBe(true); + expect(start).toHaveBeenCalledWith("git", "client-a"); + + const ownerGet = await dispatch( + { + kind: "command", + id: "sysdeps-get-owner", + op: "systemDeps.install.get", + args: { jobId: "job-1" }, + }, + context, + "client-a" + ); + expect(ownerGet.ok).toBe(true); + expect(get).toHaveBeenCalledWith("job-1", "client-a"); + + const forbiddenGet = await dispatch( + { + kind: "command", + id: "sysdeps-get-forbidden", + op: "systemDeps.install.get", + args: { jobId: "job-1" }, + }, + context, + "client-b" + ); + expect(forbiddenGet.ok).toBe(false); + expect(forbiddenGet.error?.code).toBe("system_dependency_install_job_not_found"); + + const ownerInput = await dispatch( + { + kind: "command", + id: "sysdeps-input-owner", + op: "systemDeps.install.input", + args: { jobId: "job-1", text: "hunter2\n" }, + }, + context, + "client-a" + ); + expect(ownerInput.ok).toBe(true); + expect(submitInput).toHaveBeenCalledWith("job-1", "client-a", "hunter2\n"); + + const ownerCancel = await dispatch( + { + kind: "command", + id: "sysdeps-cancel-owner", + op: "systemDeps.install.cancel", + args: { jobId: "job-1" }, + }, + context, + "client-a" + ); + expect(ownerCancel.ok).toBe(true); + expect(cancel).toHaveBeenCalledWith("job-1", "client-a"); + }); }); diff --git a/packages/server/src/__tests__/system-deps/install-manager.test.ts b/packages/server/src/__tests__/system-deps/install-manager.test.ts index e4f7b6b9..47e92e4a 100644 --- a/packages/server/src/__tests__/system-deps/install-manager.test.ts +++ b/packages/server/src/__tests__/system-deps/install-manager.test.ts @@ -4,7 +4,9 @@ import { SystemDependencyInstallManager } from "../../system-deps/install-manage function createFakePtyHost() { let onData: ((data: string) => void) | undefined; - let onExit: ((event: { exitCode: number }) => void) | undefined; + let onExit: + | ((event: { exitCode: number; signal?: number; reason?: "exit" | "pty_disconnected" }) => void) + | undefined; const writes: string[] = []; return { @@ -14,7 +16,13 @@ function createFakePtyHost() { onData: (cb: (data: string) => void) => { onData = cb; }, - onExit: (cb: (event: { exitCode: number }) => void) => { + onExit: ( + cb: (event: { + exitCode: number; + signal?: number; + reason?: "exit" | "pty_disconnected"; + }) => void + ) => { onExit = cb; }, write: (data: string | Buffer) => { @@ -27,19 +35,26 @@ function createFakePtyHost() { })), }, emitData: (data: string) => onData?.(data), - emitExit: (exitCode = 0) => onExit?.({ exitCode }), + emitExit: ( + event: { exitCode?: number; signal?: number; reason?: "exit" | "pty_disconnected" } = {} + ) => + onExit?.({ + exitCode: event.exitCode ?? 0, + signal: event.signal, + reason: event.reason, + }), }; } describe("SystemDependencyInstallManager", () => { - it("reuses the active job, broadcasts output, waits for password input, and verifies success", async () => { + it("reuses the active job for the owner, sends output only to the owner, waits for password input, and verifies success", async () => { const pty = createFakePtyHost(); - const broadcast = vi.fn(); + const sendToClient = vi.fn(() => true); let gitInstalled = false; const manager = new SystemDependencyInstallManager({ platform: "linux", ptyHost: pty.host, - broadcaster: { broadcast } as never, + broadcaster: { sendToClient } as never, commandExists: vi.fn( async (command: string) => command === "apt-get" || (gitInstalled && command === "git") ), @@ -54,31 +69,39 @@ describe("SystemDependencyInstallManager", () => { }), }); - const first = await manager.start("git"); - const second = await manager.start("git"); + const first = await manager.start("git", "client-a"); + const second = await manager.start("git", "client-a"); expect(second.jobId).toBe(first.jobId); + await expect(manager.start("git", "client-b")).rejects.toMatchObject({ + code: "system_dependency_install_in_progress", + }); pty.emitData("[sudo] password for spencer:"); await vi.waitFor(() => { - expect(manager.get(first.jobId)?.status).toBe("waiting_input"); + expect(manager.get(first.jobId, "client-a")?.status).toBe("waiting_input"); }); + expect(manager.get(first.jobId, "client-b")).toBeUndefined(); - await manager.submitInput(first.jobId, "hunter2\n"); + await manager.submitInput(first.jobId, "client-a", "hunter2\n"); expect(pty.writes.at(-1)).toBe("hunter2\n"); gitInstalled = true; pty.emitData("installed git\n"); - pty.emitExit(0); + pty.emitExit({ exitCode: 0 }); await vi.waitFor(() => { - expect(manager.get(first.jobId)?.status).toBe("succeeded"); + expect(manager.get(first.jobId, "client-a")?.status).toBe("succeeded"); }); - expect(broadcast).toHaveBeenCalledWith( - Topics.systemDependencyInstallOutput(first.jobId), - expect.objectContaining({ jobId: first.jobId, chunk: "installed git\n" }) + expect(sendToClient).toHaveBeenCalledWith( + "client-a", + expect.objectContaining({ + kind: "event", + topic: Topics.systemDependencyInstallOutput(first.jobId), + data: expect.objectContaining({ jobId: first.jobId, chunk: "installed git\n" }), + }) ); }); @@ -87,19 +110,97 @@ describe("SystemDependencyInstallManager", () => { const manager = new SystemDependencyInstallManager({ platform: "linux", ptyHost: pty.host, - broadcaster: { broadcast: vi.fn() } as never, + broadcaster: { sendToClient: vi.fn(() => true) } as never, commandExists: vi.fn(async (command: string) => command === "apt-get"), runCommand: vi.fn(async () => { throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); }), }); - const job = await manager.start("git"); - await manager.cancel(job.jobId); + const job = await manager.start("git", "client-a"); + await manager.cancel(job.jobId, "client-a"); - expect(manager.get(job.jobId)).toMatchObject({ + expect(manager.get(job.jobId, "client-a")).toMatchObject({ status: "cancelled", failure: { code: "user_cancelled" }, }); }); + + it("classifies permission denied failures from install output", async () => { + const pty = createFakePtyHost(); + const manager = new SystemDependencyInstallManager({ + platform: "linux", + ptyHost: pty.host, + broadcaster: { sendToClient: vi.fn(() => true) } as never, + commandExists: vi.fn(async (command: string) => command === "apt-get"), + runCommand: vi.fn(async () => { + throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); + }), + }); + + const job = await manager.start("git", "client-a"); + pty.emitData( + "E: Could not open lock file /var/lib/dpkg/lock-frontend - open (13: Permission denied)\n" + ); + pty.emitExit({ exitCode: 100 }); + + await vi.waitFor(() => { + expect(manager.get(job.jobId, "client-a")).toMatchObject({ + status: "failed", + failure: { code: "permission_denied" }, + }); + }); + }); + + it("classifies pty disconnect failures distinctly", async () => { + const pty = createFakePtyHost(); + const manager = new SystemDependencyInstallManager({ + platform: "linux", + ptyHost: pty.host, + broadcaster: { sendToClient: vi.fn(() => true) } as never, + commandExists: vi.fn(async (command: string) => command === "apt-get"), + runCommand: vi.fn(async () => { + throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); + }), + }); + + const job = await manager.start("git", "client-a"); + pty.emitExit({ exitCode: 1, reason: "pty_disconnected" }); + + await vi.waitFor(() => { + expect(manager.get(job.jobId, "client-a")).toMatchObject({ + status: "failed", + failure: { code: "pty_disconnected" }, + }); + }); + }); + + it("allows the owner to retry after a failed install", async () => { + const firstPty = createFakePtyHost(); + const secondPty = createFakePtyHost(); + const spawn = vi + .fn() + .mockReturnValueOnce(firstPty.host.spawn()) + .mockReturnValueOnce(secondPty.host.spawn()); + const manager = new SystemDependencyInstallManager({ + platform: "linux", + ptyHost: { spawn } as never, + broadcaster: { sendToClient: vi.fn(() => true) } as never, + commandExists: vi.fn(async (command: string) => command === "apt-get"), + runCommand: vi.fn(async () => { + throw Object.assign(new Error("missing"), { exitCode: 127, stdout: "", stderr: "" }); + }), + }); + + const first = await manager.start("git", "client-a"); + firstPty.emitExit({ exitCode: 1 }); + + await vi.waitFor(() => { + expect(manager.get(first.jobId, "client-a")?.status).toBe("failed"); + }); + + const retried = await manager.start("git", "client-a"); + expect(retried.jobId).not.toBe(first.jobId); + expect(spawn).toHaveBeenCalledTimes(2); + }); }); diff --git a/packages/server/src/commands/system-deps.ts b/packages/server/src/commands/system-deps.ts index 6fa135e5..631514eb 100644 --- a/packages/server/src/commands/system-deps.ts +++ b/packages/server/src/commands/system-deps.ts @@ -12,7 +12,7 @@ registerCommand( z.object({ dependencyId: z.enum(SYSTEM_DEPENDENCY_IDS), }), - async (args, ctx) => { + async (args, ctx, clientId) => { if (!ctx.systemDependencyInstallMgr) { throw { code: "system_dependency_install_unavailable", @@ -20,7 +20,7 @@ registerCommand( }; } - return ctx.systemDependencyInstallMgr.start(args.dependencyId); + return ctx.systemDependencyInstallMgr.start(args.dependencyId, clientId); } ); @@ -29,7 +29,7 @@ registerCommand( z.object({ jobId: z.string(), }), - async (args, ctx): Promise => { + async (args, ctx, clientId): Promise => { if (!ctx.systemDependencyInstallMgr) { throw { code: "system_dependency_install_unavailable", @@ -37,7 +37,7 @@ registerCommand( }; } - const job = ctx.systemDependencyInstallMgr.get(args.jobId); + const job = ctx.systemDependencyInstallMgr.get(args.jobId, clientId); if (!job) { throw { code: "system_dependency_install_job_not_found", @@ -55,7 +55,7 @@ registerCommand( jobId: z.string(), text: z.string(), }), - async (args, ctx) => { + async (args, ctx, clientId) => { if (!ctx.systemDependencyInstallMgr) { throw { code: "system_dependency_install_unavailable", @@ -63,7 +63,7 @@ registerCommand( }; } - return ctx.systemDependencyInstallMgr.submitInput(args.jobId, args.text); + return ctx.systemDependencyInstallMgr.submitInput(args.jobId, clientId, args.text); } ); @@ -72,7 +72,7 @@ registerCommand( z.object({ jobId: z.string(), }), - async (args, ctx) => { + async (args, ctx, clientId) => { if (!ctx.systemDependencyInstallMgr) { throw { code: "system_dependency_install_unavailable", @@ -80,6 +80,6 @@ registerCommand( }; } - return ctx.systemDependencyInstallMgr.cancel(args.jobId); + return ctx.systemDependencyInstallMgr.cancel(args.jobId, clientId); } ); diff --git a/packages/server/src/system-deps/install-manager.ts b/packages/server/src/system-deps/install-manager.ts index 7ca2b51b..47e418fc 100644 --- a/packages/server/src/system-deps/install-manager.ts +++ b/packages/server/src/system-deps/install-manager.ts @@ -20,54 +20,90 @@ const EXCERPT_LIMIT = 400; interface InstallSession { process: PtyProcess; seq: number; + ownerClientId?: string; } export interface SystemDependencyInstallManagerDeps extends RuntimeStatusDeps { ptyHost: PtyHost; - broadcaster: Pick; + broadcaster: Pick; +} + +interface InFlightStart { + ownerClientId?: string; + promise: Promise; +} + +interface PtyExitEvent { + exitCode: number; + signal?: number; + reason?: "exit" | "pty_disconnected"; } export class SystemDependencyInstallManager { private readonly jobs = new Map(); + private readonly jobOwnerClientIds = new Map(); private readonly activeJobIdsByDependencyId = new Map(); - private readonly inFlightStartsByDependencyId = new Map< - SystemDependencyId, - Promise - >(); + private readonly inFlightStartsByDependencyId = new Map(); private readonly sessions = new Map(); constructor(private readonly deps: SystemDependencyInstallManagerDeps) {} - async start(dependencyId: SystemDependencyId): Promise { + async start( + dependencyId: SystemDependencyId, + ownerClientId?: string + ): Promise { const activeJob = this.getActiveJob(dependencyId); if (activeJob) { + if (!this.canAccessJob(activeJob.jobId, ownerClientId)) { + throw { + code: "system_dependency_install_in_progress", + message: `Install already in progress for ${dependencyId}`, + }; + } return cloneJobSnapshot(activeJob); } const inFlightStart = this.inFlightStartsByDependencyId.get(dependencyId); if (inFlightStart) { - return cloneJobSnapshot(await inFlightStart); + if (!this.matchesOwner(inFlightStart.ownerClientId, ownerClientId)) { + throw { + code: "system_dependency_install_in_progress", + message: `Install already in progress for ${dependencyId}`, + }; + } + return cloneJobSnapshot(await inFlightStart.promise); } - const startPromise = this.prepareAndStart(dependencyId); - this.inFlightStartsByDependencyId.set(dependencyId, startPromise); + const startPromise = this.prepareAndStart(dependencyId, ownerClientId); + this.inFlightStartsByDependencyId.set(dependencyId, { + ownerClientId, + promise: startPromise, + }); try { return cloneJobSnapshot(await startPromise); } finally { - if (this.inFlightStartsByDependencyId.get(dependencyId) === startPromise) { + if (this.inFlightStartsByDependencyId.get(dependencyId)?.promise === startPromise) { this.inFlightStartsByDependencyId.delete(dependencyId); } } } - get(jobId: string): SystemDependencyInstallJobSnapshot | undefined { + get(jobId: string, ownerClientId?: string): SystemDependencyInstallJobSnapshot | undefined { + if (!this.canAccessJob(jobId, ownerClientId)) { + return undefined; + } + const job = this.jobs.get(jobId); return job ? cloneJobSnapshot(job) : undefined; } - async submitInput(jobId: string, text: string): Promise { - const job = this.jobs.get(jobId); + async submitInput( + jobId: string, + ownerClientId: string | undefined, + text: string + ): Promise { + const job = this.getOwnedJob(jobId, ownerClientId); const session = this.sessions.get(jobId); if (!job || !session) { throw { @@ -83,8 +119,8 @@ export class SystemDependencyInstallManager { return cloneJobSnapshot(job); } - async cancel(jobId: string): Promise { - const job = this.jobs.get(jobId); + async cancel(jobId: string, ownerClientId?: string): Promise { + const job = this.getOwnedJob(jobId, ownerClientId); if (!job) { throw { code: "system_dependency_install_job_not_found", @@ -145,7 +181,8 @@ export class SystemDependencyInstallManager { } private async prepareAndStart( - dependencyId: SystemDependencyId + dependencyId: SystemDependencyId, + ownerClientId?: string ): Promise { const runtime = await buildSystemDependencyRuntimeStatus(this.deps); const entry = runtime.dependencies[dependencyId]; @@ -159,7 +196,7 @@ export class SystemDependencyInstallManager { steps: [], interaction: { kind: "none", echo: false }, }; - this.jobs.set(readyJob.jobId, readyJob); + this.storeJob(readyJob, ownerClientId); return readyJob; } @@ -171,11 +208,11 @@ export class SystemDependencyInstallManager { : "unsupported_package_manager", entry.packageManager ); - this.jobs.set(failedJob.jobId, failedJob); + this.storeJob(failedJob, ownerClientId); return failedJob; } - return this.spawnInstallJob(dependencyId, entry.packageManager); + return this.spawnInstallJob(dependencyId, entry.packageManager, ownerClientId); } private createUnsupportedJob( @@ -220,7 +257,8 @@ export class SystemDependencyInstallManager { private spawnInstallJob( dependencyId: SystemDependencyId, - packageManager: SystemDependencyPackageManager + packageManager: SystemDependencyPackageManager, + ownerClientId?: string ): SystemDependencyInstallJobSnapshot { const shellCommand = getInstallShellCommand(packageManager, dependencyId); const env = getPtyEnv(); @@ -262,15 +300,15 @@ export class SystemDependencyInstallManager { interaction: { kind: "none", echo: false }, }; - this.jobs.set(job.jobId, job); + this.storeJob(job, ownerClientId); this.activeJobIdsByDependencyId.set(dependencyId, job.jobId); - this.sessions.set(job.jobId, { process: ptyProcess, seq: 0 }); + this.sessions.set(job.jobId, { process: ptyProcess, seq: 0, ownerClientId }); ptyProcess.onData((chunk) => { this.handleOutput(job.jobId, chunk); }); - ptyProcess.onExit(({ exitCode }) => { - void this.handleExit(job.jobId, exitCode); + ptyProcess.onExit((event) => { + void this.handleExit(job.jobId, event as PtyExitEvent); }); return job; @@ -310,7 +348,7 @@ export class SystemDependencyInstallManager { stderrExcerpt: excerpt(details.stderr || details.message), }, }; - this.jobs.set(failedJob.jobId, failedJob); + this.storeJob(failedJob, ownerClientId); return failedJob; } } @@ -323,11 +361,19 @@ export class SystemDependencyInstallManager { } session.seq += 1; - this.deps.broadcaster.broadcast(Topics.systemDependencyInstallOutput(jobId), { - jobId, - chunk, - seq: session.seq, - }); + if (session.ownerClientId) { + this.deps.broadcaster.sendToClient(session.ownerClientId, { + kind: "event", + topic: Topics.systemDependencyInstallOutput(jobId), + seq: session.seq, + timestamp: Date.now(), + data: { + jobId, + chunk, + seq: session.seq, + }, + }); + } const interaction = detectSystemDependencyInteraction(chunk); if (interaction.kind !== "none") { @@ -341,11 +387,12 @@ export class SystemDependencyInstallManager { } } - private async handleExit(jobId: string, exitCode: number): Promise { + private async handleExit(jobId: string, event: PtyExitEvent): Promise { const job = this.jobs.get(jobId); if (!job) { return; } + const exitCode = event.exitCode; const installStep = job.steps[0]; if (installStep && installStep.finishedAt === undefined) { @@ -367,7 +414,7 @@ export class SystemDependencyInstallManager { job.status = "failed"; job.interaction = { kind: "none", echo: false }; job.failure = this.createFailure(job, { - code: "command_failed", + code: this.classifyFailureCode(job, event), message: `Install failed for ${job.dependencyId}`, exitCode, }); @@ -407,6 +454,45 @@ export class SystemDependencyInstallManager { this.activeJobIdsByDependencyId.delete(job.dependencyId); } + private storeJob( + job: SystemDependencyInstallJobSnapshot, + ownerClientId?: string + ): SystemDependencyInstallJobSnapshot { + this.jobs.set(job.jobId, job); + if (ownerClientId) { + this.jobOwnerClientIds.set(job.jobId, ownerClientId); + } + return job; + } + + private getOwnedJob( + jobId: string, + ownerClientId?: string + ): SystemDependencyInstallJobSnapshot | undefined { + if (!this.canAccessJob(jobId, ownerClientId)) { + return undefined; + } + + return this.jobs.get(jobId); + } + + private canAccessJob(jobId: string, ownerClientId?: string): boolean { + const owner = this.jobOwnerClientIds.get(jobId); + if (!owner) { + return true; + } + + return owner === ownerClientId; + } + + private matchesOwner(ownerA?: string, ownerB?: string): boolean { + if (!ownerA && !ownerB) { + return true; + } + + return ownerA === ownerB; + } + private getCurrentStep( job: SystemDependencyInstallJobSnapshot ): SystemDependencyInstallStepSnapshot | undefined { @@ -441,6 +527,37 @@ export class SystemDependencyInstallManager { stderrExcerpt: step?.stderrExcerpt, }; } + + private classifyFailureCode( + job: SystemDependencyInstallJobSnapshot, + event: PtyExitEvent + ): SystemDependencyInstallFailure["code"] { + if (event.reason === "pty_disconnected" || event.signal !== undefined) { + return "pty_disconnected"; + } + + const step = this.getCurrentStep(job); + const haystack = `${step?.stdoutExcerpt ?? ""}\n${step?.stderrExcerpt ?? ""}`.toLowerCase(); + + if ( + haystack.includes("permission denied") || + haystack.includes("eacces") || + haystack.includes("eperm") || + haystack.includes("incorrect password") + ) { + return "permission_denied"; + } + + if ( + haystack.includes("not found") || + haystack.includes("is not recognized") || + haystack.includes("enoent") + ) { + return "command_not_found"; + } + + return "command_failed"; + } } function getInstallShellCommand( diff --git a/packages/server/src/system-deps/runtime-status.ts b/packages/server/src/system-deps/runtime-status.ts index 800f21ee..dbaf1eb5 100644 --- a/packages/server/src/system-deps/runtime-status.ts +++ b/packages/server/src/system-deps/runtime-status.ts @@ -83,40 +83,25 @@ async function buildDependencyEntry( }; } -async function buildDependencyMap( - ids: readonly [], - buildEntry: (dependencyId: never) => Promise -): Promise>; -async function buildDependencyMap< - const T extends readonly [SystemDependencyId, ...SystemDependencyId[]], ->( - ids: T, - buildEntry: (dependencyId: T[number]) => Promise -): Promise<{ [K in T[number]]: SystemDependencyRuntimeEntry }>; -async function buildDependencyMap( - ids: readonly SystemDependencyId[], - buildEntry: (dependencyId: SystemDependencyId) => Promise -): Promise> { - if (ids.length === 0) { - return {}; - } - - const [head, ...tail] = ids; - return { - [head]: await buildEntry(head), - ...(await buildDependencyMap(tail, buildEntry)), - }; -} - export async function buildSystemDependencyRuntimeStatus( deps: RuntimeStatusDeps = {} ): Promise { const platform = deps.platform ?? process.platform; const commandExists = getCommandExists(deps); const packageManager = await detectPackageManager(platform, commandExists); - const dependencies = await buildDependencyMap(SYSTEM_DEPENDENCY_IDS, (dependencyId) => - buildDependencyEntry(dependencyId, deps, platform, commandExists, packageManager) + const dependencyEntries = await Promise.all( + SYSTEM_DEPENDENCY_IDS.map( + async (dependencyId) => + [ + dependencyId, + await buildDependencyEntry(dependencyId, deps, platform, commandExists, packageManager), + ] as const + ) ); + const dependencies = Object.fromEntries(dependencyEntries) as Record< + SystemDependencyId, + SystemDependencyRuntimeEntry + >; return { dependencies }; } diff --git a/packages/server/src/terminal/pty-host.ts b/packages/server/src/terminal/pty-host.ts index 3c0d2f20..1c463627 100644 --- a/packages/server/src/terminal/pty-host.ts +++ b/packages/server/src/terminal/pty-host.ts @@ -229,7 +229,9 @@ export class NodePtyHost implements PtyHost { ptyProcess.onData(callback); }, onExit: (callback) => { - ptyProcess.onExit(({ exitCode }: { exitCode: number }) => callback({ exitCode })); + ptyProcess.onExit(({ exitCode, signal }: { exitCode: number; signal?: number }) => + callback({ exitCode, signal, reason: "exit" }) + ); }, write: (data) => { if (Buffer.isBuffer(data)) { diff --git a/packages/server/src/terminal/types.ts b/packages/server/src/terminal/types.ts index 87660fcc..dada94ec 100644 --- a/packages/server/src/terminal/types.ts +++ b/packages/server/src/terminal/types.ts @@ -86,7 +86,13 @@ export class TerminalSpawnError extends Error { */ export interface PtyProcess { onData(callback: (data: string) => void): void; - onExit(callback: (event: { exitCode: number }) => void): void; + onExit( + callback: (event: { + exitCode: number; + signal?: number; + reason?: "exit" | "pty_disconnected"; + }) => void + ): void; write(data: Buffer | string): void; resize(cols: number, rows: number): void; kill(signal?: NodeJS.Signals): Promise; diff --git a/packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts b/packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts index 078abd4f..279f981d 100644 --- a/packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts +++ b/packages/web/src/features/diagnostics/actions/use-system-dependency-installer.ts @@ -30,6 +30,9 @@ export function useSystemDependencyInstaller(onSucceeded: () => Promise) { }, 50); }; + const isActiveJobStatus = (status: SystemDependencyInstallJobSnapshot["status"]) => + status === "queued" || status === "running" || status === "waiting_input"; + const poll = async (jobId: string) => { const result = await dispatch("systemDeps.install.get", { jobId, @@ -41,7 +44,7 @@ export function useSystemDependencyInstaller(onSucceeded: () => Promise) { setJob(result.data); - if (result.data.status === "queued" || result.data.status === "running") { + if (isActiveJobStatus(result.data.status)) { schedulePoll(jobId); return; } @@ -87,7 +90,7 @@ export function useSystemDependencyInstaller(onSucceeded: () => Promise) { setJob(result.data); - if (result.data.status === "queued" || result.data.status === "running") { + if (isActiveJobStatus(result.data.status)) { schedulePoll(result.data.jobId); return; } @@ -116,7 +119,7 @@ export function useSystemDependencyInstaller(onSucceeded: () => Promise) { } setJob(result.data); - if (result.data.status === "queued" || result.data.status === "running") { + if (isActiveJobStatus(result.data.status)) { schedulePoll(result.data.jobId); return; } diff --git a/packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx b/packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx index 7fc9f70f..1833804f 100644 --- a/packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx +++ b/packages/web/src/features/diagnostics/components/system-dependency-install-panel.tsx @@ -18,6 +18,12 @@ export function SystemDependencyInstallPanel(props: { props.job.interaction.kind === "confirm" ? (props.job.interaction.promptExcerpt ?? t("system_deps.install.submit_input")) : t("system_deps.install.password_label"); + const currentStep = props.job.steps.find((step) => step.id === props.job.currentStepId); + const failureCodeLabel = props.job.failure + ? t(`system_deps.install.failure.${props.job.failure.code}`) + : null; + const failureDetails = + props.job.failure?.stderrExcerpt ?? props.job.failure?.stdoutExcerpt ?? undefined; return (
@@ -28,6 +34,39 @@ export function SystemDependencyInstallPanel(props: { {t(`system_deps.install.status.${props.job.status}`)}
+ {currentStep ? ( +
+ + {t("system_deps.install.current_step")}: {t(currentStep.titleKey)} + +
+ ) : null} + + {props.job.failure ? ( +
+ + {t("system_deps.install.failure_reason")}:{" "} + {failureCodeLabel === `system_deps.install.failure.${props.job.failure.code}` + ? props.job.failure.message + : failureCodeLabel} + +
+ ) : null} + + {props.job.failure?.message ? ( +
+ {props.job.failure.message} +
+ ) : null} + + {failureDetails ? ( +
+ + {t("system_deps.install.failure_details")}: {failureDetails} + +
+ ) : null} + 
{props.output}
{showInput ? ( diff --git a/packages/web/src/features/diagnostics/index.test.tsx b/packages/web/src/features/diagnostics/index.test.tsx index 4a362104..3c99bd32 100644 --- a/packages/web/src/features/diagnostics/index.test.tsx +++ b/packages/web/src/features/diagnostics/index.test.tsx @@ -1,5 +1,5 @@ import type { DiagnosticsCheck, DiagnosticsResponse, Workspace } from "@coder-studio/core"; -import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react"; +import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"; import { createStore, Provider } from "jotai"; import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; @@ -421,6 +421,290 @@ describe("DiagnosticsPage", () => { expect(await screen.findByText("Git is ready")).toBeInTheDocument(); }); + it("keeps polling while waiting for input so a failed install converges without new output", async () => { + let installGetCalls = 0; + const sendCommand = vi.fn(async (op: string, args?: Record) => { + if (op === "diagnostics.get") { + return createResponse({ context: "manual_check", canContinue: false }, [ + { + id: "git-missing", + code: "git_missing", + status: "needs_attention", + dependencyId: "git", + autoInstallSupported: true, + installReadiness: "ready", + manualGuideKeys: ["system_deps.install.git.manual"], + docUrl: "https://git-scm.com/downloads", + }, + ] as DiagnosticsCheck[]); + } + + if (op === "systemDeps.install.start") { + expect(args).toEqual({ dependencyId: "git" }); + return { + jobId: "job-waiting", + dependencyId: "git", + status: "waiting_input", + packageManager: "apt-get", + currentStepId: "install-git", + steps: [ + { + id: "install-git", + titleKey: "system_deps.install.step.install.git", + kind: "install", + command: "/bin/sh", + args: ["-lc", "sudo apt-get install -y git"], + status: "running", + startedAt: 1, + }, + ], + interaction: { + kind: "sudo_password", + promptExcerpt: "[sudo] password for spencer:", + echo: false, + }, + }; + } + + if (op === "systemDeps.install.get") { + installGetCalls += 1; + if (installGetCalls === 1) { + return { + jobId: "job-waiting", + dependencyId: "git", + status: "waiting_input", + packageManager: "apt-get", + currentStepId: "install-git", + steps: [ + { + id: "install-git", + titleKey: "system_deps.install.step.install.git", + kind: "install", + command: "/bin/sh", + args: ["-lc", "sudo apt-get install -y git"], + status: "running", + startedAt: 1, + }, + ], + interaction: { + kind: "sudo_password", + promptExcerpt: "[sudo] password for spencer:", + echo: false, + }, + }; + } + + return { + jobId: "job-waiting", + dependencyId: "git", + status: "failed", + packageManager: "apt-get", + currentStepId: "install-git", + steps: [ + { + id: "install-git", + titleKey: "system_deps.install.step.install.git", + kind: "install", + command: "/bin/sh", + args: ["-lc", "sudo apt-get install -y git"], + status: "failed", + startedAt: 1, + finishedAt: 2, + exitCode: 1, + stderrExcerpt: "sudo: 3 incorrect password attempts", + }, + ], + interaction: { kind: "none", echo: false }, + failure: { + code: "permission_denied", + dependencyId: "git", + failedStepId: "install-git", + message: "Install failed for git", + command: "/bin/sh", + args: ["-lc", "sudo apt-get install -y git"], + exitCode: 1, + packageManager: "apt-get", + manualGuideKeys: ["system_deps.install.git.manual"], + docUrl: "https://git-scm.com/downloads", + stderrExcerpt: "sudo: 3 incorrect password attempts", + }, + }; + } + + throw new Error(`Unexpected op: ${op}`); + }); + + renderDiagnostics("/diagnostics?context=manual_check", sendCommand); + + expect(await screen.findByText("Git is missing")).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Install Git" })); + expect(await screen.findByText("Package manager: apt-get")).toBeInTheDocument(); + + await screen.findByText("Install failed"); + await waitFor(() => { + expect(installGetCalls).toBeGreaterThanOrEqual(2); + }); + + expect(screen.getByText(/Failure reason:\s*Permission denied/)).toBeInTheDocument(); + expect(screen.getByText(/sudo: 3 incorrect password attempts/)).toBeInTheDocument(); + }); + + it("shows the current step and structured failure details for failed installs", async () => { + const sendCommand = vi.fn(async (op: string, args?: Record) => { + if (op === "diagnostics.get") { + return createResponse({ context: "manual_check", canContinue: false }, [ + { + id: "node-missing", + code: "nodejs_missing", + status: "needs_attention", + dependencyId: "node", + autoInstallSupported: true, + installReadiness: "ready", + manualGuideKeys: ["system_deps.install.node.manual"], + docUrl: "https://nodejs.org/en/download", + }, + ] as DiagnosticsCheck[]); + } + + if (op === "systemDeps.install.start") { + expect(args).toEqual({ dependencyId: "node" }); + return { + jobId: "job-node-failed", + dependencyId: "node", + status: "failed", + packageManager: "brew", + currentStepId: "verify-node", + steps: [ + { + id: "install-node", + titleKey: "system_deps.install.step.install.node", + kind: "install", + command: "/bin/sh", + args: ["-lc", "brew install node"], + status: "succeeded", + startedAt: 1, + finishedAt: 2, + exitCode: 0, + }, + { + id: "verify-node", + titleKey: "system_deps.install.step.verify.node", + kind: "verify", + command: "node", + args: ["--version"], + status: "failed", + startedAt: 3, + finishedAt: 4, + stderrExcerpt: "node: command not found", + }, + ], + interaction: { kind: "none", echo: false }, + failure: { + code: "verification_failed", + dependencyId: "node", + failedStepId: "verify-node", + message: "Verification failed for node", + command: "node", + args: ["--version"], + packageManager: "brew", + manualGuideKeys: ["system_deps.install.node.manual"], + docUrl: "https://nodejs.org/en/download", + stderrExcerpt: "node: command not found", + }, + }; + } + + throw new Error(`Unexpected op: ${op}`); + }); + + renderDiagnostics("/diagnostics?context=manual_check", sendCommand); + + expect(await screen.findByText("Node.js is missing")).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Install Node.js" })); + + expect(await screen.findByText("Package manager: brew")).toBeInTheDocument(); + expect(screen.getByText("Install failed")).toBeInTheDocument(); + expect(screen.getByText("Verification failed for node")).toBeInTheDocument(); + expect(screen.getByText(/node: command not found/)).toBeInTheDocument(); + expect(screen.getByText(/Current step:\s*Verify Node\.js/)).toBeInTheDocument(); + }); + + it("allows retrying a failed install from the diagnostics card", async () => { + let startCalls = 0; + const sendCommand = vi.fn(async (op: string, args?: Record) => { + if (op === "diagnostics.get") { + return createResponse({ context: "manual_check", canContinue: false }, [ + { + id: "git-missing", + code: "git_missing", + status: "needs_attention", + dependencyId: "git", + autoInstallSupported: true, + installReadiness: "ready", + manualGuideKeys: ["system_deps.install.git.manual"], + docUrl: "https://git-scm.com/downloads", + }, + ] as DiagnosticsCheck[]); + } + + if (op === "systemDeps.install.start") { + startCalls += 1; + expect(args).toEqual({ dependencyId: "git" }); + return { + jobId: `job-retry-${startCalls}`, + dependencyId: "git", + status: "failed", + packageManager: "apt-get", + currentStepId: "install-git", + steps: [ + { + id: "install-git", + titleKey: "system_deps.install.step.install.git", + kind: "install", + command: "/bin/sh", + args: ["-lc", "sudo apt-get install -y git"], + status: "failed", + startedAt: 1, + finishedAt: 2, + exitCode: 1, + stderrExcerpt: `attempt ${startCalls} failed`, + }, + ], + interaction: { kind: "none", echo: false }, + failure: { + code: "command_failed", + dependencyId: "git", + failedStepId: "install-git", + message: `Install failed for git (attempt ${startCalls})`, + command: "/bin/sh", + args: ["-lc", "sudo apt-get install -y git"], + exitCode: 1, + packageManager: "apt-get", + manualGuideKeys: ["system_deps.install.git.manual"], + docUrl: "https://git-scm.com/downloads", + stderrExcerpt: `attempt ${startCalls} failed`, + }, + }; + } + + throw new Error(`Unexpected op: ${op}`); + }); + + renderDiagnostics("/diagnostics?context=manual_check", sendCommand); + + expect(await screen.findByText("Git is missing")).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Install Git" })); + expect(await screen.findByText("Install failed")).toBeInTheDocument(); + expect(screen.getByText(/attempt 1 failed/)).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Install Git" })); + expect(await screen.findByText(/attempt 2 failed/)).toBeInTheDocument(); + expect(startCalls).toBe(2); + }); + it("opens the workspace and updates workspace state when retrying workspace continuation", async () => { const workspace = createWorkspace("ws-1", "/repo"); const sendCommand = vi.fn(async (op: string, args?: Record) => { diff --git a/packages/web/src/features/diagnostics/page.tsx b/packages/web/src/features/diagnostics/page.tsx index f68d6e03..3448bcaa 100644 --- a/packages/web/src/features/diagnostics/page.tsx +++ b/packages/web/src/features/diagnostics/page.tsx @@ -645,7 +645,11 @@ export function DiagnosticsPage() { check.autoInstallSupported ? ( + ))} + + ); +} + +export function MonitoringPage() { + const t = useTranslation(); + const wsClient = useAtomValue(wsClientAtom); + const connectionStatus = useAtomValue(connectionStatusAtom); + const navigate = useNavigate(); + const isMobile = useViewport() === "mobile"; + const [response, setResponse] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [sortMode, setSortMode] = useState("cpu"); + const [mobileSection, setMobileSection] = useState("overview"); + const [timeWindow, setTimeWindow] = useState("15m"); + const [selectedEntityId, setSelectedEntityId] = useState(null); + + useEffect(() => { + if (!wsClient || connectionStatus !== "connected") { + return; + } + + let cancelled = false; + + const load = async () => { + setLoading(true); + setError(null); + + try { + const next = await wsClient.sendCommand( + "monitoring.get", + {}, + undefined + ); + if (!cancelled) { + setResponse(next); + } + } catch (loadError) { + if (!cancelled) { + setError(loadError instanceof Error ? loadError.message : t("monitoring.load_failed")); + } + } finally { + if (!cancelled) { + setLoading(false); + } + } + }; + + void load(); + const unsubscribe = wsClient.subscribe( + [Topics.monitoringSnapshotUpdated], + (_topic, payload) => { + setResponse(payload as MonitoringResponse); + setLoading(false); + setError(null); + } + ); + + return () => { + cancelled = true; + unsubscribe(); + }; + }, [connectionStatus, t, wsClient]); + + const refresh = async () => { + if (!wsClient) { + return; + } + + try { + setError(null); + const next = await wsClient.sendCommand( + "monitoring.recheck", + {}, + undefined + ); + setResponse(next); + } catch (refreshError) { + setError( + refreshError instanceof Error ? refreshError.message : t("monitoring.refresh_failed") + ); + } + }; + + const attributionEntities = useMemo(() => { + if (!response) { + return []; + } + + return sortEntities([...response.snapshot.workspaces, ...response.snapshot.sessions], sortMode); + }, [response, sortMode]); + + const processEntities = useMemo(() => { + if (!response) { + return []; + } + + return sortEntities(response.snapshot.subprocessGroups, sortMode); + }, [response, sortMode]); + + const selectedEntity = useMemo(() => { + if (!response) { + return null; + } + + return ( + [ + ...response.snapshot.workspaces, + ...response.snapshot.sessions, + ...response.snapshot.subprocessGroups, + ].find((entity) => entity.id === selectedEntityId) ?? null + ); + }, [response, selectedEntityId]); + + const runtimeStatus = useMemo(() => { + if (!response) { + return "loading"; + } + if (!response.settings.runtimeSummaryEnabled) { + return "disabled"; + } + if (response.snapshot.runtime) { + return "ready"; + } + if (response.telemetry?.degraded) { + return "degraded"; + } + return "waiting"; + }, [response]); + + const attributionStatus = useMemo(() => { + if (!response) { + return "loading"; + } + if (!response.settings.workspaceAttributionEnabled) { + return "disabled"; + } + if (attributionEntities.length > 0) { + return "ready"; + } + if (runtimeStatus === "degraded") { + return "degraded"; + } + if (runtimeStatus === "waiting") { + return "waiting"; + } + return "empty"; + }, [attributionEntities.length, response, runtimeStatus]); + + const processStatus = useMemo(() => { + if (!response) { + return "loading"; + } + if (!response.settings.subprocessDrilldownEnabled) { + return "disabled"; + } + if (processEntities.length > 0) { + return "ready"; + } + if (runtimeStatus === "degraded") { + return "degraded"; + } + if (runtimeStatus === "waiting") { + return "waiting"; + } + return "empty"; + }, [processEntities.length, response, runtimeStatus]); + + const header = isMobile ? ( + void refresh()}> + {t("action.refresh")} + + } + /> + ) : ( + void refresh()}> + {t("action.refresh")} + + } + /> + ); + + if (loading) { + return ( +
+ {header} +
+ +
+
+ ); + } + + if (error && !response) { + return ( +
+ {header} +
+ +
+
+ ); + } + + if (!response) { + return null; + } + + if (!response.settings.enabled) { + return ( +
+ {header} +
+
+

{t("monitoring.disabled_title")}

+

{t("monitoring.disabled_description")}

+ +
+
+
+ ); + } + + const overviewSection = ( + <> +
+
+
+ {formatRefreshInterval(response.settings.sampleIntervalMs)} + + {formatMonitoringMode(response.snapshot.mode, t)} + +
+ + setTimeWindow(value as TimeWindow)} + options={[ + { value: "5m", label: "5m" }, + { value: "15m", label: "15m" }, + { value: "30m", label: "30m" }, + ]} + /> +
+
+ +
+
+
+

{t("monitoring.host_overview")}

+ + {formatPressureLabel(response.snapshot.host?.pressure ?? "unknown", t)} + +
+ + + + + + {response.snapshot.host ? ( + + ) : null} +
+ +
+
+

{t("monitoring.runtime_summary_title")}

+ + {formatMonitoringMode(response.snapshot.mode, t)} + +
+ {runtimeStatus === "ready" && response.snapshot.runtime ? ( + <> + + + + + + + + ) : runtimeStatus === "degraded" ? ( + + ) : runtimeStatus === "waiting" ? ( + + ) : ( + + )} +
+
+ + ); + + const attributionSection = ( +
+
+
+

{t("monitoring.attribution_tree")}

+ setSortMode(value as SortMode)} + options={[ + { value: "cpu", label: t("monitoring.cpu") }, + { value: "memory", label: t("monitoring.memory") }, + ]} + /> +
+ {attributionStatus === "disabled" ? ( + + ) : attributionStatus === "ready" ? ( + setSelectedEntityId(entity.id)} + history={response.history} + sampledAt={response.snapshot.sampledAt} + timeWindow={timeWindow} + /> + ) : attributionStatus === "degraded" ? ( + + ) : attributionStatus === "waiting" ? ( + + ) : ( + + )} +
+ + {!isMobile ? ( +
+
+

{t("monitoring.detail_panel")}

+ {selectedEntity ? ( + + {selectedEntity.kind} + + ) : null} +
+

{t("monitoring.select_entity")}

+ {selectedEntity ? ( + <> +

{selectedEntity.label}

+ {entityDetailRows(selectedEntity, t).map((row) => ( + + ))} + + + ) : null} +
+ ) : null} +
+ ); + + const processSection = ( +
+
+

{t("monitoring.subprocess_drilldown")}

+
+ {processStatus === "disabled" ? ( + + ) : processStatus === "ready" ? ( + setSelectedEntityId(entity.id)} + history={response.history} + sampledAt={response.snapshot.sampledAt} + timeWindow={timeWindow} + /> + ) : processStatus === "degraded" ? ( + + ) : processStatus === "waiting" ? ( + + ) : ( + + )} +
+ ); + + return ( +
+ {header} +
+ {error ? ( + + ) : null} + {isMobile ? ( + <> + setMobileSection(value as MobileSection)} + options={[ + { value: "overview", label: t("monitoring.mobile_overview") }, + { value: "attribution", label: t("monitoring.mobile_attribution") }, + { value: "process", label: t("monitoring.mobile_process") }, + ]} + /> + {mobileSection === "overview" ? overviewSection : null} + {mobileSection === "attribution" ? attributionSection : null} + {mobileSection === "process" ? processSection : null} + + ) : ( + <> + {overviewSection} + {attributionSection} + {processSection} + + )} +
+
+ ); +} diff --git a/packages/web/src/features/monitoring/sparkline.tsx b/packages/web/src/features/monitoring/sparkline.tsx new file mode 100644 index 00000000..3e311e24 --- /dev/null +++ b/packages/web/src/features/monitoring/sparkline.tsx @@ -0,0 +1,36 @@ +import type { MonitoringSeriesPoint } from "@coder-studio/core"; + +export function Sparkline({ + points, + metric, + width = 96, + height = 28, +}: { + points: MonitoringSeriesPoint[]; + metric: "cpuPercent" | "memoryBytes"; + width?: number; + height?: number; +}) { + const values = points + .map((point) => point[metric] ?? null) + .filter((value): value is number => value !== null); + + if (values.length === 0) { + return
-
; + } + + const min = Math.min(...values); + const max = Math.max(...values); + const range = max - min || 1; + const coordinates = values.map((value, index) => { + const x = (index / Math.max(values.length - 1, 1)) * width; + const y = height - ((value - min) / range) * height; + return `${x},${y}`; + }); + + return ( + + ); +} diff --git a/packages/web/src/features/settings/components/monitoring-settings-card.tsx b/packages/web/src/features/settings/components/monitoring-settings-card.tsx new file mode 100644 index 00000000..eb8cf249 --- /dev/null +++ b/packages/web/src/features/settings/components/monitoring-settings-card.tsx @@ -0,0 +1,296 @@ +import { + MONITORING_SAMPLE_INTERVAL_OPTIONS, + type MonitoringMode, + type MonitoringSampleIntervalMs, + type MonitoringSettings, +} from "@coder-studio/core"; +import { Button, Notice, Pill, SegmentedControl, Switch } from "../../../components/ui"; +import { useTranslation } from "../../../lib/i18n"; + +type MonitoringPreset = "light" | "standard" | "deep" | "custom"; + +interface MonitoringSettingsCardProps { + readonly settings: MonitoringSettings; + readonly mode: MonitoringMode; + readonly onChange: (next: MonitoringSettings) => Promise | void; + readonly onOpenMonitoring: () => void; +} + +function formatModeLabel(mode: MonitoringMode, t: ReturnType) { + switch (mode) { + case "disabled": + return t("monitoring.mode_disabled"); + case "light": + return t("monitoring.mode_light"); + case "standard": + return t("monitoring.mode_standard"); + case "deep": + return t("monitoring.mode_deep"); + } +} + +function toPreset(settings: MonitoringSettings): MonitoringPreset { + if (!settings.enabled) { + return "custom"; + } + + if ( + settings.runtimeSummaryEnabled && + settings.workspaceAttributionEnabled && + settings.subprocessDrilldownEnabled + ) { + return "deep"; + } + + if ( + settings.runtimeSummaryEnabled && + settings.workspaceAttributionEnabled && + !settings.subprocessDrilldownEnabled + ) { + return "standard"; + } + + if ( + settings.runtimeSummaryEnabled && + !settings.workspaceAttributionEnabled && + !settings.subprocessDrilldownEnabled + ) { + return "light"; + } + + return "custom"; +} + +function normalizeSettings(settings: MonitoringSettings): MonitoringSettings { + const next = { ...settings }; + + if (!next.runtimeSummaryEnabled) { + next.workspaceAttributionEnabled = false; + next.subprocessDrilldownEnabled = false; + } + + if (!next.workspaceAttributionEnabled) { + next.subprocessDrilldownEnabled = false; + } + + return next; +} + +export function MonitoringSettingsCard({ + settings, + mode, + onChange, + onOpenMonitoring, +}: MonitoringSettingsCardProps) { + const t = useTranslation(); + const resolvedSettings = normalizeSettings(settings); + + const applyPreset = async (preset: MonitoringPreset) => { + if (preset === "custom") { + return; + } + + const base: MonitoringSettings = { + ...resolvedSettings, + enabled: true, + hostMetricsEnabled: true, + }; + + if (preset === "light") { + await onChange( + normalizeSettings({ + ...base, + runtimeSummaryEnabled: true, + workspaceAttributionEnabled: false, + subprocessDrilldownEnabled: false, + }) + ); + return; + } + + if (preset === "standard") { + await onChange( + normalizeSettings({ + ...base, + runtimeSummaryEnabled: true, + workspaceAttributionEnabled: true, + subprocessDrilldownEnabled: false, + }) + ); + return; + } + + await onChange( + normalizeSettings({ + ...base, + runtimeSummaryEnabled: true, + workspaceAttributionEnabled: true, + subprocessDrilldownEnabled: true, + }) + ); + }; + + return ( +
+
+
+

{t("monitoring.group")}

+

{t("monitoring.description")}

+
+
+ {formatModeLabel(mode, t)} + +
+
+ +
+
+ {t("monitoring.enable_monitoring")} + {t("monitoring.enable_monitoring_hint")} +
+ void onChange({ ...resolvedSettings, enabled: checked })} + /> +
+ +
+ {t("monitoring.preset")} + void applyPreset(value as MonitoringPreset)} + options={[ + { value: "light", label: t("monitoring.mode_light") }, + { value: "standard", label: t("monitoring.mode_standard") }, + { value: "deep", label: t("monitoring.mode_deep") }, + { value: "custom", label: t("monitoring.mode_custom") }, + ]} + size="sm" + value={toPreset(resolvedSettings)} + /> +
+ + {!resolvedSettings.enabled ? ( + + ) : null} + +
+
+
+ {t("monitoring.host_metrics")} +
+ + void onChange(normalizeSettings({ ...resolvedSettings, hostMetricsEnabled: checked })) + } + /> +
+ +
+
+ {t("monitoring.runtime_summary_setting")} +
+ + void onChange( + normalizeSettings({ + ...resolvedSettings, + runtimeSummaryEnabled: checked, + workspaceAttributionEnabled: checked + ? resolvedSettings.workspaceAttributionEnabled + : false, + subprocessDrilldownEnabled: checked + ? resolvedSettings.subprocessDrilldownEnabled + : false, + }) + ) + } + /> +
+ +
+
+ {t("monitoring.workspace_attribution")} +
+ + void onChange( + normalizeSettings({ + ...resolvedSettings, + runtimeSummaryEnabled: checked ? true : resolvedSettings.runtimeSummaryEnabled, + workspaceAttributionEnabled: checked, + subprocessDrilldownEnabled: checked + ? resolvedSettings.subprocessDrilldownEnabled + : false, + }) + ) + } + /> +
+ +
+
+ {t("monitoring.subprocess_drilldown")} +
+ + void onChange( + normalizeSettings({ + ...resolvedSettings, + runtimeSummaryEnabled: checked ? true : resolvedSettings.runtimeSummaryEnabled, + workspaceAttributionEnabled: checked + ? true + : resolvedSettings.workspaceAttributionEnabled, + subprocessDrilldownEnabled: checked, + }) + ) + } + /> +
+
+ +
+ {t("monitoring.refresh_rate")} + + void onChange({ + ...settings, + sampleIntervalMs: Number(value) as MonitoringSampleIntervalMs, + }) + } + options={MONITORING_SAMPLE_INTERVAL_OPTIONS.map((interval) => ({ + value: String(interval), + label: `${interval / 1000}s`, + }))} + size="sm" + value={String(resolvedSettings.sampleIntervalMs)} + /> +
+
+ ); +} diff --git a/packages/web/src/features/settings/components/settings-page.test.tsx b/packages/web/src/features/settings/components/settings-page.test.tsx index 9e524a47..8f24f723 100644 --- a/packages/web/src/features/settings/components/settings-page.test.tsx +++ b/packages/web/src/features/settings/components/settings-page.test.tsx @@ -339,8 +339,12 @@ describe("SettingsPage", () => { expect(screen.getByText(/诊断运行环境|Diagnose the runtime environment/)).toBeInTheDocument(); - const diagnosticsButton = await screen.findByRole("button", { - name: /Open|打开/, + const diagnosticsButton = await waitFor(() => { + const button = document.querySelector( + ".settings-diagnostics-button" + ) as HTMLButtonElement | null; + expect(button).not.toBeNull(); + return button; }); expect(diagnosticsButton).toHaveClass("settings-diagnostics-button"); fireEvent.click(diagnosticsButton); @@ -594,6 +598,151 @@ describe("SettingsPage", () => { }); }); + it("hydrates monitoring settings, enforces dependencies, and saves nested monitoring updates", async () => { + const sendCommand = vi.fn().mockImplementation(async (op: string) => { + if (op === "settings.get") { + return { + "monitoring.enabled": true, + "monitoring.hostMetricsEnabled": true, + "monitoring.runtimeSummaryEnabled": false, + "monitoring.workspaceAttributionEnabled": true, + "monitoring.subprocessDrilldownEnabled": true, + "monitoring.sampleIntervalMs": 5000, + }; + } + + return {}; + }); + const store = createConnectedStore(sendCommand); + + renderSettingsPage(store); + + expect(await screen.findByText("性能监控")).toBeInTheDocument(); + + const enableMonitoring = screen.getByRole("switch", { name: "启用性能监控" }); + const hostMetrics = screen.getByRole("switch", { name: "主机指标" }); + expect(enableMonitoring).toHaveAttribute("aria-checked", "true"); + expect(hostMetrics).toHaveAttribute("aria-checked", "true"); + await waitFor(() => { + expect(screen.getByRole("switch", { name: "运行时概览" })).toHaveAttribute( + "aria-checked", + "false" + ); + expect(screen.getByRole("switch", { name: "工作区与会话归因" })).toHaveAttribute( + "aria-checked", + "false" + ); + expect(screen.getByRole("switch", { name: "子进程钻取" })).toHaveAttribute( + "aria-checked", + "false" + ); + }); + expect(screen.getByRole("tab", { name: "轻量" })).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "标准" })).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "深度" })).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "自定义", selected: true })).toBeInTheDocument(); + expect(screen.queryByText("Light")).not.toBeInTheDocument(); + expect(screen.queryByText("Custom")).not.toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "5s", selected: true })).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("switch", { name: "子进程钻取" })); + + await waitFor(() => { + expect(sendCommand).toHaveBeenCalledWith( + "settings.update", + { + settings: { + monitoring: { + enabled: true, + hostMetricsEnabled: true, + runtimeSummaryEnabled: true, + workspaceAttributionEnabled: true, + subprocessDrilldownEnabled: true, + sampleIntervalMs: 5000, + }, + }, + }, + undefined + ); + }); + + await waitFor(() => { + expect(screen.getByRole("switch", { name: "运行时概览" })).toHaveAttribute( + "aria-checked", + "true" + ); + expect(screen.getByRole("switch", { name: "工作区与会话归因" })).toHaveAttribute( + "aria-checked", + "true" + ); + expect(screen.getByRole("switch", { name: "子进程钻取" })).toHaveAttribute( + "aria-checked", + "true" + ); + }); + + fireEvent.click(screen.getByRole("switch", { name: "运行时概览" })); + + await waitFor(() => { + expect(sendCommand).toHaveBeenCalledWith( + "settings.update", + { + settings: { + monitoring: { + enabled: true, + hostMetricsEnabled: true, + runtimeSummaryEnabled: false, + workspaceAttributionEnabled: false, + subprocessDrilldownEnabled: false, + sampleIntervalMs: 5000, + }, + }, + }, + undefined + ); + }); + + await waitFor(() => { + expect(screen.getByRole("switch", { name: "运行时概览" })).toHaveAttribute( + "aria-checked", + "false" + ); + expect(screen.getByRole("switch", { name: "工作区与会话归因" })).toHaveAttribute( + "aria-checked", + "false" + ); + expect(screen.getByRole("switch", { name: "子进程钻取" })).toHaveAttribute( + "aria-checked", + "false" + ); + }); + + fireEvent.click(screen.getByRole("tab", { name: "10s" })); + + await waitFor(() => { + expect(sendCommand).toHaveBeenCalledWith( + "settings.update", + { + settings: { + monitoring: { + enabled: true, + hostMetricsEnabled: true, + runtimeSummaryEnabled: false, + workspaceAttributionEnabled: false, + subprocessDrilldownEnabled: false, + sampleIntervalMs: 10000, + }, + }, + }, + undefined + ); + }); + + fireEvent.click(screen.getByRole("button", { name: "打开监控" })); + + expect(routerMocks.navigate).toHaveBeenCalledWith("/monitoring"); + }); + it("loads and saves supervisor evaluation timeout in seconds from general settings", async () => { const sendCommand = vi.fn().mockImplementation(async (op: string) => { if (op === "settings.get") { diff --git a/packages/web/src/features/settings/components/settings-page.tsx b/packages/web/src/features/settings/components/settings-page.tsx index 663e9dc5..be2c223e 100644 --- a/packages/web/src/features/settings/components/settings-page.tsx +++ b/packages/web/src/features/settings/components/settings-page.tsx @@ -5,6 +5,7 @@ */ import { + createDefaultMonitoringSettings, createDefaultUpdateSettings, DEFAULT_SUPERVISOR_EVALUATION_TIMEOUT_SEC, DEFAULT_SUPERVISOR_RETRY_DELAY_SEC, @@ -12,10 +13,13 @@ import { DEFAULT_SUPERVISOR_RETRY_MAX_COUNT, DEFAULT_SUPERVISOR_RETRY_ON_EVALUATOR_ERROR, DEFAULT_SUPERVISOR_RETRY_ON_TIMEOUT, + deriveMonitoringMode, type LspRuntimeMode, MAX_SUPERVISOR_EVALUATION_TIMEOUT_SEC, MAX_SUPERVISOR_RETRY_DELAY_SEC, MAX_SUPERVISOR_RETRY_MAX_COUNT, + type MonitoringSettings, + resolveMonitoringSettings, resolveSupervisorEvaluationTimeoutSec, resolveSupervisorRetryDelaySec, resolveSupervisorRetryEnabled, @@ -52,6 +56,7 @@ import { terminalPreferencesAtom, } from "../../terminal-panel/preferences"; import { AboutSettings } from "./about-settings"; +import { MonitoringSettingsCard } from "./monitoring-settings-card"; import { type ProviderInfo, ProviderSettings } from "./provider-settings"; import { resolveSettingsExitTargetFromBrowserHistory } from "./settings-navigation"; import { @@ -263,6 +268,9 @@ export function SettingsPage() { const [providerAdditionalArgsById, setProviderAdditionalArgsById] = useState< Record >({}); + const [monitoringSettings, setMonitoringSettings] = useState( + createDefaultMonitoringSettings() + ); const defaultUpdateSettings = createDefaultUpdateSettings(); const [updateAutoCheckEnabled, setUpdateAutoCheckEnabled] = useState( defaultUpdateSettings.autoCheckEnabled @@ -371,6 +379,7 @@ export function SettingsPage() { if (typeof settings["notifications.soundEnabled"] === "boolean") { setSoundEnabled(settings["notifications.soundEnabled"]); } + setMonitoringSettings(resolveMonitoringSettings(settings)); if ( updateSelectionVersionRef.current.autoCheckEnabled === updateSelectionVersionAtRequestStart.autoCheckEnabled @@ -589,6 +598,28 @@ export function SettingsPage() { }); }; + const saveMonitoringSettings = async (next: MonitoringSettings) => { + const previous = monitoringSettings; + setMonitoringSettings(next); + + const result = await dispatch("settings.update", { + settings: { + monitoring: { + enabled: next.enabled, + hostMetricsEnabled: next.hostMetricsEnabled, + runtimeSummaryEnabled: next.runtimeSummaryEnabled, + workspaceAttributionEnabled: next.workspaceAttributionEnabled, + subprocessDrilldownEnabled: next.subprocessDrilldownEnabled, + sampleIntervalMs: next.sampleIntervalMs, + }, + }, + }); + + if (result === null || !result.ok) { + setMonitoringSettings(previous); + } + }; + const handleUpdateAutoCheckChange = async (value: boolean) => { updateSelectionVersionRef.current.autoCheckEnabled += 1; setUpdateAutoCheckEnabled(value); @@ -672,6 +703,8 @@ export function SettingsPage() { terminalCopyOnSelect={terminalPreferences.copyOnSelect} setTerminalCopyOnSelect={handleTerminalCopyOnSelectSelection} activeWorkspaceId={activeWorkspaceId} + monitoringSettings={monitoringSettings} + onMonitoringSettingsChange={saveMonitoringSettings} /> ); case "appearance": @@ -881,6 +914,8 @@ interface GeneralSettingsProps { terminalCopyOnSelect: boolean; setTerminalCopyOnSelect: (value: boolean) => void; activeWorkspaceId: string | null; + monitoringSettings: MonitoringSettings; + onMonitoringSettingsChange: (value: MonitoringSettings) => Promise; } function parseSupervisorTimeoutInput(value: string): number | null { @@ -971,6 +1006,8 @@ function GeneralSettings({ terminalCopyOnSelect, setTerminalCopyOnSelect, activeWorkspaceId, + monitoringSettings, + onMonitoringSettingsChange, }: GeneralSettingsProps) { const t = useTranslation(); const navigate = useNavigate(); @@ -1176,6 +1213,15 @@ function GeneralSettings({ return (
+
+ navigate("/monitoring")} + settings={monitoringSettings} + /> +
+

{t("settings.notifications")}

{t("settings.notifications_channel_hint")}

diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 3cec845d..5720c511 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -627,6 +627,14 @@ "permission_request": "Request Permission", "permission_unavailable": "Unavailable", "permission_limited_hint": "Even with notification permission allowed, this mobile browser may still fail to show system notifications reliably.", + "monitoring": { + "group": "Performance monitoring", + "description": "Control whether runtime sampling is enabled and how deep it goes.", + "enable_monitoring": "Enable performance monitoring", + "enable_monitoring_hint": "Sampling is disabled by default to avoid background overhead.", + "disabled_title": "Monitoring disabled", + "disabled_settings_hint": "Turn monitoring on to start collecting host and runtime data." + }, "supervisor": { "title": "Supervisor", "hint": "Configure supervisor evaluation timeout and global retry behavior. Retry rules apply to all supervisors.", @@ -754,6 +762,74 @@ "permission_denied_hint": "Browser or system notification permission may be blocked. Check site settings and device notification settings.", "permission_unavailable_hint": "This environment cannot request browser notification permission" }, + "monitoring": { + "title": "Performance monitoring", + "command_label": "Monitoring", + "command_description": "Open the performance monitoring page", + "group": "Performance monitoring", + "description": "Control whether runtime sampling is enabled and how deep it goes.", + "enable_monitoring": "Enable performance monitoring", + "enable_monitoring_hint": "Sampling is disabled by default to avoid background overhead.", + "disabled_title": "Monitoring disabled", + "disabled_description": "No background sampling is running. Enable monitoring in settings before using this page.", + "disabled_settings_hint": "Turn monitoring on to start collecting host and runtime data.", + "open_settings": "Open Settings", + "open_monitoring": "Open Monitoring", + "loading": "Loading monitoring snapshot...", + "load_failed": "Monitoring failed to load", + "refresh_failed": "Could not refresh monitoring", + "last_updated": "Last updated", + "host_overview": "Host overview", + "mode_disabled": "Disabled", + "mode_light": "Light", + "mode_standard": "Standard", + "mode_deep": "Deep", + "mode_custom": "Custom", + "pressure_normal": "Normal", + "pressure_elevated": "Elevated", + "pressure_hot": "Hot", + "pressure_unknown": "Unknown", + "runtime_summary_title": "Coder Studio footprint", + "runtime_summary_disabled": "Runtime summary disabled", + "enable_runtime_summary": "Enable runtime summary in settings", + "runtime_summary_pending": "Waiting for the first process sample", + "runtime_summary_pending_description": "Waiting for the first process sample.", + "process_collection_degraded": "Process metrics unavailable", + "process_collection_unavailable": "Process collection is temporarily unavailable.", + "attribution_tree": "Attribution tree", + "attribution_disabled": "Attribution disabled", + "enable_attribution": "Enable workspace and session attribution in settings", + "attribution_empty": "No active attributed workloads", + "attribution_empty_description": "No workspace or session is currently contributing measurable load.", + "subprocess_disabled": "Subprocess drill-down disabled", + "enable_subprocess": "Enable subprocess drill-down in settings", + "subprocess_empty": "No active subprocesses", + "subprocess_empty_description": "No subprocesses are currently contributing measurable load.", + "detail_panel": "Detail panel", + "select_entity": "Select a workspace, session, or process to inspect details.", + "cpu": "CPU", + "memory": "Memory", + "available_memory": "Available memory", + "load_average": "Load average", + "uptime": "Uptime", + "server_cpu": "Server CPU", + "server_memory": "Server memory", + "managed_cpu": "Managed CPU", + "managed_memory": "Managed memory", + "process_count": "Process count", + "sort_by": "Sort by", + "time_window": "Time window", + "refresh_rate": "Refresh rate", + "preset": "Preset", + "host_metrics": "Host metrics", + "runtime_summary_setting": "Runtime summary", + "workspace_attribution": "Workspace and session attribution", + "subprocess_drilldown": "Subprocess drill-down", + "mobile_section": "Monitoring section", + "mobile_overview": "Overview", + "mobile_attribution": "Attribution", + "mobile_process": "Process" + }, "auth": { "description": "Enter your password to continue to the current workspace.", "hint": "Enter the access password configured for this deployment.", diff --git a/packages/web/src/locales/zh.json b/packages/web/src/locales/zh.json index 9e55bcbb..1c531aa7 100644 --- a/packages/web/src/locales/zh.json +++ b/packages/web/src/locales/zh.json @@ -627,6 +627,14 @@ "permission_request": "请求授权", "permission_unavailable": "不可用", "permission_limited_hint": "当前移动端浏览器内即使允许通知权限，也可能无法稳定展示系统通知。", + "monitoring": { + "group": "性能监控", + "description": "控制是否启用运行时采样，以及采样深度。", + "enable_monitoring": "启用性能监控", + "enable_monitoring_hint": "默认关闭采样，避免后台开销。", + "disabled_title": "监控已关闭", + "disabled_settings_hint": "开启监控后才会采集主机和运行时数据。" + }, "supervisor": { "title": "Supervisor", "hint": "配置 Supervisor 评估超时和全局重试策略。重试规则对所有 Supervisor 生效。", @@ -754,6 +762,74 @@ "permission_denied_hint": "浏览器或系统通知权限可能已阻止，请检查站点设置和设备通知设置", "permission_unavailable_hint": "当前环境无法请求浏览器通知权限" }, + "monitoring": { + "title": "性能监控", + "command_label": "监控", + "command_description": "打开性能监控页面", + "group": "性能监控", + "description": "控制是否启用运行时采样，以及采样深度。", + "enable_monitoring": "启用性能监控", + "enable_monitoring_hint": "默认关闭采样，避免后台开销。", + "disabled_title": "监控已关闭", + "disabled_description": "当前没有后台采样任务。请先在设置中启用监控，再使用此页面。", + "disabled_settings_hint": "开启监控后才会采集主机和运行时数据。", + "open_settings": "打开设置", + "open_monitoring": "打开监控", + "loading": "正在加载监控快照...", + "load_failed": "监控加载失败", + "refresh_failed": "刷新监控失败", + "last_updated": "最后更新", + "host_overview": "主机概览", + "mode_disabled": "已关闭", + "mode_light": "轻量", + "mode_standard": "标准", + "mode_deep": "深度", + "mode_custom": "自定义", + "pressure_normal": "正常", + "pressure_elevated": "偏高", + "pressure_hot": "过热", + "pressure_unknown": "未知", + "runtime_summary_title": "Coder Studio 占用", + "runtime_summary_disabled": "运行时概览已关闭", + "enable_runtime_summary": "在设置中启用运行时概览", + "runtime_summary_pending": "正在等待首个进程样本", + "runtime_summary_pending_description": "正在等待首个进程样本。", + "process_collection_degraded": "进程指标不可用", + "process_collection_unavailable": "进程采集暂时不可用。", + "attribution_tree": "归因树", + "attribution_disabled": "归因已关闭", + "enable_attribution": "在设置中启用工作区与会话归因", + "attribution_empty": "当前没有活跃归因负载", + "attribution_empty_description": "当前没有工作区或会话产生可观测负载。", + "subprocess_disabled": "子进程钻取已关闭", + "enable_subprocess": "在设置中启用子进程钻取", + "subprocess_empty": "当前没有活跃子进程", + "subprocess_empty_description": "当前没有子进程产生可观测负载。", + "detail_panel": "详情面板", + "select_entity": "选择一个工作区、会话或进程以查看详情。", + "cpu": "CPU", + "memory": "内存", + "available_memory": "可用内存", + "load_average": "负载均值", + "uptime": "运行时长", + "server_cpu": "服务 CPU", + "server_memory": "服务内存", + "managed_cpu": "托管 CPU", + "managed_memory": "托管内存", + "process_count": "进程数", + "sort_by": "排序方式", + "time_window": "时间窗口", + "refresh_rate": "刷新频率", + "preset": "预设", + "host_metrics": "主机指标", + "runtime_summary_setting": "运行时概览", + "workspace_attribution": "工作区与会话归因", + "subprocess_drilldown": "子进程钻取", + "mobile_section": "监控分区", + "mobile_overview": "概览", + "mobile_attribution": "归因", + "mobile_process": "进程" + }, "auth": { "description": "输入密码后继续进入当前工作区。", "hint": "请输入当前部署配置的访问密码。", diff --git a/packages/web/src/shells/desktop-shell.test.tsx b/packages/web/src/shells/desktop-shell.test.tsx index 9a2d79e6..2377b851 100644 --- a/packages/web/src/shells/desktop-shell.test.tsx +++ b/packages/web/src/shells/desktop-shell.test.tsx @@ -25,6 +25,10 @@ vi.mock("../features/diagnostics", () => ({ DiagnosticsPage: () =>
DiagnosticsPage
, })); +vi.mock("../features/monitoring", () => ({ + MonitoringPage: () =>
MonitoringPage
, +})); + vi.mock("../features/workspace/views/desktop/workspace-desktop-view", () => ({ WorkspaceDesktopView: () =>
WorkspacePage
, })); @@ -127,6 +131,20 @@ describe("DesktopShell auth gating", () => { expect(screen.queryByText("正在连接工作区...")).not.toBeInTheDocument(); }); + it("renders MonitoringPage on /monitoring while auth status is still unknown", () => { + window.history.replaceState({}, "", "/monitoring"); + + const store = createStore(); + store.set(connectionStatusAtom, "connected"); + store.set(authEnabledAtom, null); + store.set(authenticatedAtom, false); + + renderShell(store); + + expect(screen.getByText("MonitoringPage")).toBeInTheDocument(); + expect(screen.queryByText("正在连接工作区...")).not.toBeInTheDocument(); + }); + it("redirects / to /login when auth is enabled and user is unauthenticated", async () => { const store = createStore(); store.set(connectionStatusAtom, "connected"); diff --git a/packages/web/src/shells/desktop-shell.tsx b/packages/web/src/shells/desktop-shell.tsx index b4f5332d..9b5bccde 100644 --- a/packages/web/src/shells/desktop-shell.tsx +++ b/packages/web/src/shells/desktop-shell.tsx @@ -13,6 +13,7 @@ import { LoginPage } from "../features/auth"; import { SessionGatePage } from "../features/auth/session-gate"; import { CommandPalette } from "../features/command-palette"; import { DiagnosticsPage } from "../features/diagnostics"; +import { MonitoringPage } from "../features/monitoring"; import { NotFoundPage } from "../features/not-found"; import { ToastContainer } from "../features/notifications"; import { QuickOpen } from "../features/quick-open"; @@ -40,6 +41,7 @@ export function DesktopShell() { const shouldBypassAuthLoading = location.pathname.startsWith("/settings") || location.pathname.startsWith("/diagnostics") || + location.pathname.startsWith("/monitoring") || location.pathname === "/session-gate"; return ( @@ -72,6 +74,7 @@ export function DesktopShell() { } /> } /> } /> + } /> { }; }); +vi.mock("../../features/monitoring", () => ({ + MonitoringPage: () =>
MonitoringPage
, +})); + vi.mock("../../features/command-palette", () => ({ CommandPalette: () => null, })); @@ -1138,6 +1142,26 @@ describe("MobileShell Phase 2 workspace", () => { expect(screen.queryByText("正在连接工作区...")).not.toBeInTheDocument(); }); + it("renders MonitoringPage on mobile /monitoring while auth status is still unknown", () => { + const store = createStore(); + store.set(connectionStatusAtom, "connected"); + store.set(authEnabledAtom, null); + store.set(authenticatedAtom, false); + + render( + + + + + + + ); + + expect(screen.getByText("MonitoringPage")).toBeInTheDocument(); + expect(screen.getByTestId("location-display")).toHaveTextContent("/monitoring"); + expect(screen.queryByText("正在连接工作区...")).not.toBeInTheDocument(); + }); + it("does not bootstrap workspaces from / on mobile before redirecting to /login when auth is enabled and user is unauthenticated", async () => { const sendCommand = vi.fn(); const store = createStore(); diff --git a/packages/web/src/shells/mobile-shell/index.tsx b/packages/web/src/shells/mobile-shell/index.tsx index 2514ac76..73b0da7d 100644 --- a/packages/web/src/shells/mobile-shell/index.tsx +++ b/packages/web/src/shells/mobile-shell/index.tsx @@ -6,6 +6,7 @@ import { LoginPage } from "../../features/auth"; import { SessionGatePage } from "../../features/auth/session-gate"; import { CommandPalette } from "../../features/command-palette"; import { DiagnosticsPage } from "../../features/diagnostics"; +import { MonitoringPage } from "../../features/monitoring"; import { NotFoundPage } from "../../features/not-found"; import { ToastContainer } from "../../features/notifications"; import { SettingsPage } from "../../features/settings"; @@ -33,6 +34,7 @@ export function MobileShell() { const shouldBypassAuthLoading = location.pathname.startsWith("/settings") || location.pathname.startsWith("/diagnostics") || + location.pathname.startsWith("/monitoring") || location.pathname === "/session-gate"; return ( @@ -65,6 +67,7 @@ export function MobileShell() { } /> } /> } /> + } /> { expect(action).toContain("align-self: flex-start"); }); + it("keeps monitoring surfaces on shared theme tokens instead of bespoke colors", () => { + const monitoringCard = getLastRuleBlock(".monitoring-card"); + const monitoringSettingsCard = getLastRuleBlock(".settings-card--monitoring"); + const monitoringEntityRow = getLastRuleBlock(".monitoring-entity-row"); + const monitoringSparkline = getLastRuleBlock(".monitoring-sparkline"); + + expect(monitoringCard).toContain("border: 1px solid var(--surface-elevated-border)"); + expect(monitoringCard).toContain("background: var(--surface-elevated)"); + expect(monitoringCard).toContain("border-radius: var(--radius-xl)"); + expect(monitoringCard).toContain("box-shadow: var(--shadow-sm)"); + expect(monitoringSettingsCard).toContain("border: 1px solid var(--surface-elevated-border)"); + expect(monitoringSettingsCard).toContain("background: var(--surface-elevated)"); + expect(monitoringEntityRow).toContain( + "border-bottom: 1px solid var(--surface-elevated-border)" + ); + expect(monitoringEntityRow).toContain("background: transparent"); + expect(monitoringSparkline).toContain("color: var(--accent-blue)"); + }); + it("keeps shared segmented controls aligned with flat editor settings tabs instead of pill chrome", () => { const providerTabs = getLastRuleBlockFrom( segmentedControlStylesheet, From ecab32540bdd3b34302e00262dcf04c65957bd5c Mon Sep 17 00:00:00 2001 From: Spencer Date: Mon, 25 May 2026 14:42:05 +0000 Subject: [PATCH 013/162] docs: add vue editor and lsp support design --- ...026-05-25-vue-editor-lsp-support-design.md | 372 ++++++++++++++++++ 1 file changed, 372 insertions(+) create mode 100644 docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md diff --git a/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md b/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md new file mode 100644 index 00000000..4597b438 --- /dev/null +++ b/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md @@ -0,0 +1,372 @@ +# Vue Editor and LSP Support Design + +> Status: Draft +> Date: 2026-05-25 +> Scope: `packages/web/src/features/code-editor/*`, `packages/server/src/lsp/*`, `packages/server/src/lsp-tools/*`, `packages/server/src/commands/lsp.ts`, `packages/core/src/domain/lsp.ts`, related tests, package dependencies for Vue language tooling + +## Goal + +Add first-class Vue Single File Component support to the Monaco-based editor so `.vue` files behave like supported code files instead of plain text. + +The feature should deliver: + +- Vue syntax highlighting for `.vue` files +- workspace-backed Vue editor models using a stable Monaco language id +- Vue LSP session startup through the existing lazy `auto` runtime flow +- Vue diagnostics, hover, go-to-definition, references, and document symbols through Volar +- managed installation and recovery UX consistent with the existing Python, Go, and Rust LSP flow + +## Problem + +The current editor pipeline recognizes TypeScript, JavaScript, Python, Go, Rust, and a few markup styles by extension. `.vue` is not mapped in the editor language detector, so it falls back to `plaintext`. + +That creates two failures: + +1. the Monaco editor does not provide meaningful Vue syntax highlighting +2. the LSP pipeline does not consider `.vue` eligible for session startup, so no language intelligence is available + +For Vue projects, this means: + +- `.vue` files are visually degraded +- template and `'} + /> + + ); + + await waitFor(() => { + expect(mockRegistryGetOrCreate).toHaveBeenCalledWith( + expect.objectContaining({ + workspaceRootPath: "/repo", + path: "src/App.vue", + language: "vue", + }) + ); + expect(mockAttachLspBridgeModel).toHaveBeenCalledWith( + { + workspaceId: "ws-test", + workspaceRootPath: "/repo", + path: "src/App.vue", + monacoLanguage: "vue", + model: workspaceModelA, + }, + expect.any(Function) + ); + }); + }); + it("does not attach the lsp bridge when runtime mode is off", async () => { const store = createStore(); store.set(lspRuntimeModeAtom, "off"); diff --git a/packages/web/src/features/code-editor/components/monaco-host.tsx b/packages/web/src/features/code-editor/components/monaco-host.tsx index 3225bbec..f1505c64 100644 --- a/packages/web/src/features/code-editor/components/monaco-host.tsx +++ b/packages/web/src/features/code-editor/components/monaco-host.tsx @@ -25,6 +25,7 @@ import { globalLspBridge, type LspBridgeState } from "../lsp/bridge"; import { lspRuntimeModeAtom } from "../lsp/runtime-mode"; import { monacoModelRegistry } from "../monaco/model-registry"; import { fromWorkspaceFileUri } from "../monaco/uri"; +import { ensureVueLanguageRegistered } from "../monaco/vue-language"; import { LspStatusNotice } from "./lsp-status-notice"; const monacoGlobal = globalThis as typeof globalThis & { @@ -52,6 +53,7 @@ monacoGlobal.MonacoEnvironment ??= { let javaScriptTypeScriptDefaultsConfigured = false; configureJavaScriptTypeScriptDefaults(); +ensureVueLanguageRegistered(); interface MonacoTypeScriptLanguage { JsxEmit: { @@ -434,6 +436,7 @@ function detectEditorLanguage(filePath: string): string { py: "python", go: "go", rs: "rust", + vue: "vue", java: "java", cpp: "cpp", c: "c", diff --git a/packages/web/src/features/code-editor/monaco/vue-language.test.ts b/packages/web/src/features/code-editor/monaco/vue-language.test.ts new file mode 100644 index 00000000..749b1d38 --- /dev/null +++ b/packages/web/src/features/code-editor/monaco/vue-language.test.ts @@ -0,0 +1,50 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +const { mockRegisterLanguage, mockSetLanguageConfiguration, mockSetMonarchTokensProvider } = + vi.hoisted(() => ({ + mockRegisterLanguage: vi.fn(), + mockSetLanguageConfiguration: vi.fn(), + mockSetMonarchTokensProvider: vi.fn(), + })); + +vi.mock("monaco-editor", () => ({ + languages: { + register: mockRegisterLanguage, + setLanguageConfiguration: mockSetLanguageConfiguration, + setMonarchTokensProvider: mockSetMonarchTokensProvider, + }, +})); + +describe("ensureVueLanguageRegistered", () => { + beforeEach(() => { + vi.resetModules(); + mockRegisterLanguage.mockClear(); + mockSetLanguageConfiguration.mockClear(); + mockSetMonarchTokensProvider.mockClear(); + }); + + it("registers the vue language exactly once", async () => { + const monaco = await import("monaco-editor"); + const { ensureVueLanguageRegistered } = await import("./vue-language"); + + ensureVueLanguageRegistered(); + ensureVueLanguageRegistered(); + + expect(monaco.languages.register).toHaveBeenCalledWith({ id: "vue" }); + expect(monaco.languages.register).toHaveBeenCalledTimes(1); + expect(monaco.languages.setLanguageConfiguration).toHaveBeenCalledWith( + "vue", + expect.objectContaining({ + comments: expect.any(Object), + brackets: expect.any(Array), + autoClosingPairs: expect.any(Array), + }) + ); + expect(monaco.languages.setMonarchTokensProvider).toHaveBeenCalledWith( + "vue", + expect.objectContaining({ + tokenizer: expect.any(Object), + }) + ); + }); +}); diff --git a/packages/web/src/features/code-editor/monaco/vue-language.ts b/packages/web/src/features/code-editor/monaco/vue-language.ts new file mode 100644 index 00000000..c8930753 --- /dev/null +++ b/packages/web/src/features/code-editor/monaco/vue-language.ts @@ -0,0 +1,51 @@ +import * as monaco from "monaco-editor"; + +let vueLanguageRegistered = false; + +export function ensureVueLanguageRegistered(): void { + if (vueLanguageRegistered) { + return; + } + + monaco.languages.register({ id: "vue" }); + monaco.languages.setLanguageConfiguration("vue", { + comments: { blockComment: [""] }, + brackets: [ + ["<", ">"], + ["{", "}"], + ["(", ")"], + ["[", "]"], + ], + autoClosingPairs: [ + { open: "{", close: "}" }, + { open: "[", close: "]" }, + { open: "(", close: ")" }, + { open: '"', close: '"' }, + { open: "'", close: "'" }, + ], + }); + monaco.languages.setMonarchTokensProvider("vue", { + defaultToken: "", + tokenizer: { + root: [ + [/)/, ["delimiter", "tag", "", "delimiter"]], + [/(<\/)(template|script|style)(\s*)(>)/, ["delimiter", "tag", "", "delimiter"]], + [/\{\{|\}\}/, "delimiter.bracket"], + [/v-[\w-]+|:[\w-]+|@[\w-]+/, "attribute.name"], + [/".*?"/, "string"], + [/'.*?'/, "string"], + [//, "comment", "@pop"], + [/[^-]+/, "comment"], + [/./, "comment"], + ], + }, + }); + + vueLanguageRegistered = true; +} From fa96a6ff3af6cdbc566b4b295edb6a8549e2ab64 Mon Sep 17 00:00:00 2001 From: Spencer Date: Mon, 25 May 2026 14:42:05 +0000 Subject: [PATCH 017/162] docs: add vue editor and lsp support design --- ...026-05-25-vue-editor-lsp-support-design.md | 372 ++++++++++++++++++ 1 file changed, 372 insertions(+) create mode 100644 docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md diff --git a/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md b/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md new file mode 100644 index 00000000..4597b438 --- /dev/null +++ b/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md @@ -0,0 +1,372 @@ +# Vue Editor and LSP Support Design + +> Status: Draft +> Date: 2026-05-25 +> Scope: `packages/web/src/features/code-editor/*`, `packages/server/src/lsp/*`, `packages/server/src/lsp-tools/*`, `packages/server/src/commands/lsp.ts`, `packages/core/src/domain/lsp.ts`, related tests, package dependencies for Vue language tooling + +## Goal + +Add first-class Vue Single File Component support to the Monaco-based editor so `.vue` files behave like supported code files instead of plain text. + +The feature should deliver: + +- Vue syntax highlighting for `.vue` files +- workspace-backed Vue editor models using a stable Monaco language id +- Vue LSP session startup through the existing lazy `auto` runtime flow +- Vue diagnostics, hover, go-to-definition, references, and document symbols through Volar +- managed installation and recovery UX consistent with the existing Python, Go, and Rust LSP flow + +## Problem + +The current editor pipeline recognizes TypeScript, JavaScript, Python, Go, Rust, and a few markup styles by extension. `.vue` is not mapped in the editor language detector, so it falls back to `plaintext`. + +That creates two failures: + +1. the Monaco editor does not provide meaningful Vue syntax highlighting +2. the LSP pipeline does not consider `.vue` eligible for session startup, so no language intelligence is available + +For Vue projects, this means: + +- `.vue` files are visually degraded +- template and ` + + diff --git a/scripts/probe-fixtures/tsconfig.json b/scripts/probe-fixtures/tsconfig.json new file mode 100644 index 00000000..14980239 --- /dev/null +++ b/scripts/probe-fixtures/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "Bundler", + "strict": true, + "jsx": "preserve", + "lib": ["ESNext", "DOM"], + "types": ["vue/types"], + "allowImportingTsExtensions": false, + "skipLibCheck": true, + "noEmit": true + }, + "include": ["**/*.vue", "**/*.ts"] +} diff --git a/scripts/probe-vue-bridge.mjs b/scripts/probe-vue-bridge.mjs new file mode 100644 index 00000000..8c1c95e3 --- /dev/null +++ b/scripts/probe-vue-bridge.mjs @@ -0,0 +1,340 @@ +#!/usr/bin/env node +// Probe the Vue + tsserver bridge end-to-end against a real Volar + TS server. +// Usage: node scripts/probe-vue-bridge.mjs [path/to/some.vue] +// +// Spawns @vue/language-server (managed install) and typescript-language-server +// (bundled), initializes both with the same payloads our LspSession uses, opens +// a .vue document on Volar, and asks Volar for hover at a specific position. +// Bridges tsserver/request <-> workspace/executeCommand inline so we can print +// each step of the round-trip. + +import { spawn } from "node:child_process"; +import { existsSync, readFileSync } from "node:fs"; +import { createRequire } from "node:module"; +import { tmpdir } from "node:os"; +import { dirname, join, resolve } from "node:path"; +import { pathToFileURL } from "node:url"; + +// Resolve from packages/server which has vscode-jsonrpc in its node_modules. +const require = createRequire( + pathToFileURL(join(process.cwd(), "packages", "server", "package.json")).toString() +); +const jsonrpc = require("vscode-jsonrpc/node.js"); +const { createMessageConnection, StreamMessageReader, StreamMessageWriter } = jsonrpc; + +const STATE_DIR = process.env.STATE_DIR ?? join(tmpdir(), "coder-studio-dev"); +const VUE_INSTALL_ROOT = join(STATE_DIR, "lsp-tools", "vue", "3.3.2-typescript-6.0.3"); +const VUE_BIN = + process.platform === "win32" + ? join(VUE_INSTALL_ROOT, "node_modules", ".bin", "vue-language-server.cmd") + : join(VUE_INSTALL_ROOT, "node_modules", ".bin", "vue-language-server"); +const VUE_PKG = join(VUE_INSTALL_ROOT, "node_modules", "@vue", "language-server"); +const TSDK = join(VUE_INSTALL_ROOT, "node_modules", "typescript", "lib"); + +const TSLS_CLI = require.resolve("typescript-language-server/lib/cli.mjs", { + paths: [join(process.cwd(), "packages", "server"), process.cwd()], +}); + +const sample = process.argv[2] ? resolve(process.argv[2]) : writeSample(); + +const sampleText = readFileSync(sample, "utf8"); +const sampleUri = pathToFileURL(sample).toString(); +const rootDir = dirname(sample); +const rootUri = pathToFileURL(rootDir).toString(); + +console.log("paths:"); +console.log(" vue bin: ", VUE_BIN); +console.log(" vue install: ", VUE_PKG); +console.log(" tsdk: ", TSDK); +console.log(" tsls cli: ", TSLS_CLI); +console.log(" sample: ", sample); +console.log(" sample exists? ", existsSync(sample)); +console.log(" vue bin exists? ", existsSync(VUE_BIN)); +console.log(); + +if (!existsSync(VUE_BIN)) { + console.error("Vue bin missing; run the app once so it installs Volar."); + process.exit(1); +} + +const volar = spawn(VUE_BIN, ["--stdio"], { + cwd: rootDir, + stdio: ["pipe", "pipe", "pipe"], + shell: process.platform === "win32", + windowsHide: true, +}); +const tsls = spawn(process.execPath, [TSLS_CLI, "--stdio"], { + cwd: rootDir, + stdio: ["pipe", "pipe", "pipe"], + windowsHide: true, +}); + +volar.stderr.on("data", (b) => process.stderr.write("[volar stderr] " + b.toString())); +tsls.stderr.on("data", (b) => process.stderr.write("[tsls stderr] " + b.toString())); +volar.on("exit", (code) => console.log("[volar] exit code:", code)); +tsls.on("exit", (code) => console.log("[tsls] exit code:", code)); + +const volarConn = createMessageConnection( + new StreamMessageReader(volar.stdout), + new StreamMessageWriter(volar.stdin) +); +const tslsConn = createMessageConnection( + new StreamMessageReader(tsls.stdout), + new StreamMessageWriter(tsls.stdin) +); + +volarConn.onUnhandledNotification((n) => + console.log("[volar->] unhandled notification:", n.method, JSON.stringify(n.params).slice(0, 200)) +); +tslsConn.onUnhandledNotification((n) => + console.log("[tsls->] unhandled notification:", n.method, JSON.stringify(n.params).slice(0, 200)) +); + +function unwrap(raw) { + if (raw === null || raw === undefined) return null; + if (typeof raw !== "object") return raw; + if (!("body" in raw) && raw.type !== "response") return raw; + if (raw.success === false) return null; + return raw.body ?? null; +} + +// Bridge tsserver/request -> workspace/executeCommand on tsls +volarConn.onNotification("tsserver/request", async (payload) => { + if (!Array.isArray(payload) || payload.length < 2) { + console.log("[bridge] malformed tsserver/request payload:", payload); + return; + } + const [id, command, args] = payload; + console.log("[bridge] tsserver/request id=", id, "command=", command); + try { + const raw = await Promise.race([ + tslsConn.sendRequest("workspace/executeCommand", { + command: "typescript.tsserverRequest", + arguments: [command, args], + }), + new Promise((_, reject) => setTimeout(() => reject(new Error("bridge timeout")), 8000)), + ]); + const unwrapped = unwrap(raw); + console.log("[bridge] tsserver response (unwrapped):", trim(unwrapped)); + volarConn.sendNotification("tsserver/response", [id, unwrapped]); + } catch (e) { + console.log("[bridge] tsserver request failed:", e.message); + volarConn.sendNotification("tsserver/response", [id, null]); + } +}); + +volarConn.listen(); +tslsConn.listen(); + +const VUE_INIT_OPTIONS = { typescript: { tsdk: TSDK } }; +// Override location with PROBE_LOCATION env if set, so we can try alternative +// paths without editing the file. +const LOCATION = process.env.PROBE_LOCATION ?? VUE_PKG; +console.log("plugin location:", LOCATION); +const TSLS_INIT_OPTIONS = { + plugins: [ + { + name: "@vue/typescript-plugin", + location: LOCATION, + languages: ["vue"], + configNamespace: "typescript", + }, + ], + tsserver: { + logVerbosity: "verbose", + logDirectory: process.env.TSSERVER_LOG_DIR ?? join(tmpdir(), "tsserver-probe-logs"), + trace: "verbose", + }, +}; + +const initParams = { + processId: process.pid, + rootUri, + workspaceFolders: [{ uri: rootUri, name: "probe-workspace" }], + capabilities: {}, +}; + +(async () => { + try { + console.log("-> initialize both servers in parallel"); + const [vInit, tInit] = await Promise.all([ + volarConn.sendRequest("initialize", { + ...initParams, + initializationOptions: VUE_INIT_OPTIONS, + }), + tslsConn.sendRequest("initialize", { + ...initParams, + initializationOptions: TSLS_INIT_OPTIONS, + }), + ]); + console.log("volar capabilities.hoverProvider:", !!vInit?.capabilities?.hoverProvider); + console.log( + "tsls capabilities.executeCommandProvider:", + trim(tInit?.capabilities?.executeCommandProvider) + ); + + volarConn.sendNotification("initialized", {}); + tslsConn.sendNotification("initialized", {}); + + console.log("-> didOpen on both ends"); + volarConn.sendNotification("textDocument/didOpen", { + textDocument: { + uri: sampleUri, + languageId: "vue", + version: 1, + text: sampleText, + }, + }); + tslsConn.sendNotification("textDocument/didOpen", { + textDocument: { + uri: sampleUri, + languageId: "vue", + version: 1, + text: sampleText, + }, + }); + + // Wait longer so tsserver fully boots and indexes the plugin. + await new Promise((r) => setTimeout(r, 3500)); + + const lines = sampleText.split(/\r?\n/); + async function probeAt(label, target) { + let line = 0; + let char = 0; + for (let i = 0; i < lines.length; i++) { + const idx = lines[i].indexOf(target); + if (idx >= 0) { + line = i; + char = idx + Math.max(0, Math.floor(target.length / 2)); + break; + } + } + console.log( + `\n>>> ${label} at L${line + 1}:${char + 1} >> '${lines[line]?.slice(Math.max(0, char - 3), char + target.length + 3)}'` + ); + const position = { line, character: char }; + + // Fan out: ask Volar and TSLS in parallel, then merge as the real + // LspSession does. This mirrors what coder-studio's server does today + // and is the actual user-visible behavior. + const tasks = [ + Promise.race([ + volarConn.sendRequest("textDocument/hover", { + textDocument: { uri: sampleUri }, + position, + }), + new Promise((_, reject) => + setTimeout(() => reject(new Error("volar hover timeout")), 8000) + ), + ]).catch((e) => ({ __error: e.message })), + Promise.race([ + tslsConn.sendRequest("textDocument/hover", { + textDocument: { uri: sampleUri }, + position, + }), + new Promise((_, reject) => + setTimeout(() => reject(new Error("tsls hover timeout")), 8000) + ), + ]).catch((e) => ({ __error: e.message })), + ]; + const [vh, th] = await Promise.all(tasks); + console.log(`hover[${label}] volar :`, JSON.stringify(vh, null, 0)); + console.log(`hover[${label}] tsls :`, JSON.stringify(th, null, 0)); + const mergedContents = []; + for (const r of [vh, th]) { + if (r && !r.__error && r?.contents) { + if (typeof r.contents === "string") mergedContents.push(r.contents); + else if (typeof r.contents?.value === "string") mergedContents.push(r.contents.value); + else if (Array.isArray(r.contents)) + for (const c of r.contents) { + if (typeof c === "string") mergedContents.push(c); + else if (typeof c?.value === "string") mergedContents.push(c.value); + } + } + } + console.log(`MERGED[${label}]:`, mergedContents.length ? mergedContents : "(empty)"); + } + + async function probeTslsHoverAt(label, target) { + let line = 0; + let char = 0; + for (let i = 0; i < lines.length; i++) { + const idx = lines[i].indexOf(target); + if (idx >= 0) { + line = i; + char = idx + Math.max(0, Math.floor(target.length / 2)); + break; + } + } + try { + const hover = await Promise.race([ + tslsConn.sendRequest("textDocument/hover", { + textDocument: { uri: sampleUri }, + position: { line, character: char }, + }), + new Promise((_, reject) => + setTimeout(() => reject(new Error(`tsls hover timeout`)), 8000) + ), + ]); + console.log(`tslsHover[${label}]:`, JSON.stringify(hover, null, 0)); + } catch (e) { + console.log(`tslsHover[${label}] failed:`, e.message); + } + } + + await probeAt("count-decl", "const count"); + await probeTslsHoverAt("count-decl", "const count"); + await probeAt("ref-import", "ref, computed"); + await probeTslsHoverAt("ref-import", "ref, computed"); + await probeAt("count-usage-in-template", "{{ count"); + await probeTslsHoverAt("count-usage-in-template", "{{ count"); + + // Inspect document symbols to confirm Volar parses the SFC at all. + try { + const symbols = await volarConn.sendRequest("textDocument/documentSymbol", { + textDocument: { uri: sampleUri }, + }); + console.log("\ndocumentSymbols:", trim(symbols)); + } catch (e) { + console.log("documentSymbol failed:", e.message); + } + } catch (e) { + console.error("PROBE FAILED:", e.message); + } finally { + console.log("-> shutting down"); + try { + await volarConn.sendRequest("shutdown", null); + } catch {} + try { + await tslsConn.sendRequest("shutdown", null); + } catch {} + volar.kill(); + tsls.kill(); + setTimeout(() => process.exit(0), 500).unref?.(); + } +})(); + +function trim(value) { + const s = JSON.stringify(value); + return s == null ? String(value) : s.length > 240 ? s.slice(0, 240) + "..." : s; +} + +function writeSample() { + const path = join(tmpdir(), "probe-vue-bridge-sample.vue"); + const content = ` + + +`; + if (!existsSync(path)) { + const fs = require("node:fs"); + fs.writeFileSync(path, content); + } + return path; +} From 55a3463a48de312bb0207a26e41941e0b2ead7d8 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sat, 30 May 2026 12:04:45 +0800 Subject: [PATCH 143/162] test(server): cover managed LSP verify across platforms and Vue companion lifecycle The Vue LSP work fixed a Windows `where.exe` regression that affected every managed LSP (python / go / rust / vue) at the verify step, but no test actually exercised the real `checkCommandAvailable` against an absolute path. Add coverage to lock that fix in and fill a few adjacent gaps. - add `lsp-tools/install-manager.integration.test.ts`: drives the install manager with the real `checkCommandAvailable` (not the mocked one used in the unit tests) for every managed serverKind, with a stubbed `runCommand` that writes a fake executable to the expected absolute path. Verifies the verify step succeeds when the file is on disk and fails cleanly when it isn't. - add two Vue companion lifecycle tests in `lsp/session.test.ts`: primary exit must SIGTERM the companion, and explicit `stop()` must bring both children down so idle TTL cleanup doesn't leak processes. - fix pre-existing Windows-flaky cases: - `install-manager.test.ts > returns missing_prerequisite ...` now pins `platform: "linux"` so `getManagedPrerequisites` doesn't silently add `python` as a fallback on win32. - `install-manager.test.ts > downloads rust-analyzer ...` computes `executablePath` with the platform-aware `.exe` suffix. - `lsp/document-store.test.ts`: gate three POSIX-only assertions (`/repo` style absolute paths, `symlinkSync` requiring elevated privileges) via `it.skip` on win32. Suite is now green on Windows: 105 passed + 3 POSIX-only skipped. --- .../install-manager.integration.test.ts | 194 ++++++++++++++++++ .../src/lsp-tools/install-manager.test.ts | 14 +- .../server/src/lsp/document-store.test.ts | 45 ++-- packages/server/src/lsp/session.test.ts | 102 +++++++++ 4 files changed, 338 insertions(+), 17 deletions(-) create mode 100644 packages/server/src/lsp-tools/install-manager.integration.test.ts diff --git a/packages/server/src/lsp-tools/install-manager.integration.test.ts b/packages/server/src/lsp-tools/install-manager.integration.test.ts new file mode 100644 index 00000000..513fb329 --- /dev/null +++ b/packages/server/src/lsp-tools/install-manager.integration.test.ts @@ -0,0 +1,194 @@ +/** + * Integration tests for `LspToolInstallManager`'s verify step. + * + * Goal: prove the verify step works for every managed LSP under both POSIX + * and Windows path conventions, *without mocking `commandExists`*. That makes + * this the only place that exercises the real `checkCommandAvailable` against + * the absolute path the install plan computes. + * + * Why this matters: every managed LSP (python, go, rust, vue) verifies by + * passing an absolute path to `commandExists`. Windows `where.exe` rejects + * absolute paths because it parses the colon as a `path:pattern` separator, + * so before the absolute-path branch in `checkCommandAvailable`, every LSP + * install silently failed at verify. We assert here that an on-disk + * executable at the planned path passes the verify step for every kind. + * + * Strategy: + * - Mock only `runCommand` (so we don't actually invoke npm/pip/go/curl). + * - In the runCommand mock, write a real file at the expected + * `executablePath` so the verify step's `fs.existsSync` succeeds. + * - Run for every managed serverKind, under both `linux` and `win32`. + */ + +import { mkdirSync, mkdtempSync, writeFileSync } from "node:fs"; +import { tmpdir } from "node:os"; +import { dirname, join } from "node:path"; +import type { LspServerKind, Workspace } from "@coder-studio/core"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { VUE_MANAGED_VERSION } from "./definitions.js"; +import { LspToolInstallManager } from "./install-manager.js"; +import { FileManifestStore } from "./manifest-store.js"; + +const workspace: Workspace = { + id: "ws-1", + path: "/repo", + targetRuntime: "native", + openedAt: 1, + lastActiveAt: 1, + uiState: { leftPanelWidth: 240, bottomPanelHeight: 180, focusMode: false }, +}; + +interface ExpectedInstall { + serverKind: LspServerKind; + expectedPath: (root: string, platform: NodeJS.Platform) => string; +} + +const CASES: ExpectedInstall[] = [ + { + serverKind: "python", + expectedPath: (root, platform) => + join( + root, + "python", + "1.14.0", + "venv", + platform === "win32" ? "Scripts" : "bin", + platform === "win32" ? "pylsp.exe" : "pylsp" + ), + }, + { + serverKind: "go", + expectedPath: (root, platform) => + join(root, "go", "v0.21.1", "bin", platform === "win32" ? "gopls.exe" : "gopls"), + }, + { + serverKind: "rust", + expectedPath: (root, platform) => + join( + root, + "rust", + "2026-05-18", + "bin", + platform === "win32" ? "rust-analyzer.exe" : "rust-analyzer" + ), + }, + { + serverKind: "vue", + expectedPath: (root, platform) => + join( + root, + "vue", + VUE_MANAGED_VERSION, + "node_modules", + ".bin", + platform === "win32" ? "vue-language-server.cmd" : "vue-language-server" + ), + }, +]; + +// We can only meaningfully exercise the verify step on the host's actual +// platform — `path.join` and `fs.existsSync` use host conventions, and the +// real `checkCommandAvailable` walks the host PATH for any bare-name +// fallbacks. Cross-platform behavior of `checkCommandAvailable` itself is +// covered in detail by `command-check.test.ts`. +const PLATFORM = process.platform; + +describe(`LspToolInstallManager verify step (platform=${PLATFORM})`, () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + // Whitelist the bare-name prerequisites so the test doesn't depend on + // python3 / go / npm actually being installed on the runner. The verify + // step itself still goes through the *real* checkCommandAvailable. + const allowedPrereqs = new Set(["npm", "python", "python3", "go"]); + async function smartCommandExists(command: string): Promise { + if (allowedPrereqs.has(command)) { + return true; + } + const { checkCommandAvailable } = await import("../provider-runtime/command-check.js"); + return checkCommandAvailable(command, { platform: PLATFORM }); + } + + it.each(CASES)("$serverKind verify accepts the absolute managed executable path", async ({ + serverKind, + expectedPath: pathFn, + }) => { + const root = mkdtempSync(join(tmpdir(), `lsp-install-${serverKind}-`)); + const expectedPath = pathFn(root, PLATFORM); + + const runCommand = vi.fn(async () => { + // Simulate the install step actually putting the executable on disk + // so the verify step (real `checkCommandAvailable`) can find it. + mkdirSync(dirname(expectedPath), { recursive: true }); + writeFileSync(expectedPath, "#!/usr/bin/env sh\nexit 0\n", { mode: 0o755 }); + return { stdout: "", stderr: "" }; + }); + + const manager = new LspToolInstallManager({ + manifestStore: new FileManifestStore(root), + platform: PLATFORM, + commandExists: smartCommandExists, + runCommand, + }); + + const job = await manager.start({ workspace, serverKind }); + + await vi.waitFor( + () => { + const snapshot = manager.get(job.jobId); + expect(snapshot?.status).not.toBe("running"); + expect(snapshot?.status).not.toBe("queued"); + }, + { timeout: 5000 } + ); + + const final = manager.get(job.jobId); + expect(final?.status).toBe("succeeded"); + + // Manifest written → verify step actually accepted the on-disk file. + // On Windows this is the regression test for the `where.exe` colon bug. + const manifest = new FileManifestStore(root).read(serverKind); + expect(manifest).toMatchObject({ + serverKind, + executablePath: expectedPath, + platform: PLATFORM, + source: "managed", + }); + }); + + it.each( + CASES + )("$serverKind verify rejects when no executable exists at the expected path", async ({ + serverKind, + }) => { + const root = mkdtempSync(join(tmpdir(), `lsp-install-${serverKind}-miss-`)); + + const manager = new LspToolInstallManager({ + manifestStore: new FileManifestStore(root), + platform: PLATFORM, + commandExists: smartCommandExists, + // runCommand succeeds but never writes the file, simulating an + // install step that silently completed without producing the binary. + runCommand: vi.fn(async () => ({ stdout: "", stderr: "" })), + }); + + const job = await manager.start({ workspace, serverKind }); + + await vi.waitFor( + () => { + const snapshot = manager.get(job.jobId); + expect(snapshot?.status).not.toBe("running"); + expect(snapshot?.status).not.toBe("queued"); + }, + { timeout: 5000 } + ); + + const final = manager.get(job.jobId); + expect(final?.status).toBe("failed"); + // The verify step is the last one in every install plan; if it errored + // because the file isn't there, the failure should not be the missing + // prerequisites code (those were satisfied by smartCommandExists). + expect(final?.failure?.code).not.toBe("missing_prerequisite"); + }); +}); diff --git a/packages/server/src/lsp-tools/install-manager.test.ts b/packages/server/src/lsp-tools/install-manager.test.ts index a49595c1..84a701d6 100644 --- a/packages/server/src/lsp-tools/install-manager.test.ts +++ b/packages/server/src/lsp-tools/install-manager.test.ts @@ -27,8 +27,12 @@ describe("LspToolInstallManager", () => { }); it("returns missing_prerequisite when python3 is unavailable", async () => { + // Pin platform so the prerequisite list is deterministic (on win32 the + // manager also tries `python` as a fallback, which would otherwise leak + // into `missingCommands`). const manager = new LspToolInstallManager({ manifestStore: new FileManifestStore(mkdtempSync(join(tmpdir(), "lsp-tools-"))), + platform: "linux", commandExists: vi.fn(async () => false), runCommand: vi.fn(async () => ({ stdout: "", stderr: "" })), }); @@ -330,7 +334,15 @@ describe("LspToolInstallManager", () => { it("downloads rust-analyzer into the managed tool directory and writes a manifest", async () => { const root = mkdtempSync(join(tmpdir(), "lsp-tools-")); let installed = false; - const executablePath = join(root, "rust", "2026-05-18", "bin", "rust-analyzer"); + // The real manager picks `.exe` on Windows; mirror that here so the + // commandExists mock matches the path the verify step actually checks. + const executablePath = join( + root, + "rust", + "2026-05-18", + "bin", + process.platform === "win32" ? "rust-analyzer.exe" : "rust-analyzer" + ); const manager = new LspToolInstallManager({ manifestStore: new FileManifestStore(root), diff --git a/packages/server/src/lsp/document-store.test.ts b/packages/server/src/lsp/document-store.test.ts index cde620a2..a7e58e1a 100644 --- a/packages/server/src/lsp/document-store.test.ts +++ b/packages/server/src/lsp/document-store.test.ts @@ -5,6 +5,13 @@ import { pathToFileURL } from "node:url"; import { describe, expect, it } from "vitest"; import { DocumentStore } from "./document-store.js"; +// POSIX-style fixtures (`/repo`, `file:///repo/...`) only resolve correctly +// when the host treats `/` as an absolute root. On Windows `path.resolve("/repo")` +// returns `:\repo`, which breaks both URI construction and reverse +// lookup. Gate the POSIX-only assertions to keep the suite green on every host +// while preserving the actual coverage on the platforms where it matters. +const itPosix = process.platform === "win32" ? it.skip : it; + describe("DocumentStore", () => { it("tracks open/change/close versions and replayable snapshots", () => { const store = new DocumentStore("/repo"); @@ -31,7 +38,7 @@ describe("DocumentStore", () => { expect(store.listReplayable()).toHaveLength(0); }); - it("maps file URIs back to workspace-relative paths without a leading slash", () => { + itPosix("maps file URIs back to workspace-relative paths without a leading slash", () => { const store = new DocumentStore("/repo"); expect(store.fromUri("file:///repo/e2e/fixtures/lsp-workspace/shared.ts")).toBe( @@ -39,7 +46,7 @@ describe("DocumentStore", () => { ); }); - it("encodes spaces in file URIs and decodes them back to relative paths", () => { + itPosix("encodes spaces in file URIs and decodes them back to relative paths", () => { const store = new DocumentStore("/repo with spaces"); const opened = store.open({ path: "dir/a b.ts", @@ -61,18 +68,24 @@ describe("DocumentStore", () => { ); }); - it("maps POSIX file URIs back to workspace-relative paths when the workspace path is a symlink alias", () => { - const realRoot = mkdtempSync(join(tmpdir(), "document-store-real-")); - const aliasParent = mkdtempSync(join(tmpdir(), "document-store-alias-")); - const aliasRoot = join(aliasParent, "workspace"); - - mkdirSync(join(realRoot, "src")); - symlinkSync(realRoot, aliasRoot, "dir"); - - const store = new DocumentStore(aliasRoot); - - expect(store.fromUri(pathToFileURL(join(realRoot, "src/main.ts")).toString())).toBe( - "src/main.ts" - ); - }); + // `symlinkSync(... "dir")` requires elevated privileges or Developer Mode on + // Windows. The behaviour we care about (resolving symlink-aliased workspace + // roots) is POSIX-only in practice, so gate the test to non-Windows hosts. + itPosix( + "maps POSIX file URIs back to workspace-relative paths when the workspace path is a symlink alias", + () => { + const realRoot = mkdtempSync(join(tmpdir(), "document-store-real-")); + const aliasParent = mkdtempSync(join(tmpdir(), "document-store-alias-")); + const aliasRoot = join(aliasParent, "workspace"); + + mkdirSync(join(realRoot, "src")); + symlinkSync(realRoot, aliasRoot, "dir"); + + const store = new DocumentStore(aliasRoot); + + expect(store.fromUri(pathToFileURL(join(realRoot, "src/main.ts")).toString())).toBe( + "src/main.ts" + ); + } + ); }); diff --git a/packages/server/src/lsp/session.test.ts b/packages/server/src/lsp/session.test.ts index 237daf47..55430402 100644 --- a/packages/server/src/lsp/session.test.ts +++ b/packages/server/src/lsp/session.test.ts @@ -490,6 +490,108 @@ describe.sequential("LspSession", () => { await session.stop(); }); + it("kills the companion process when the primary exits", async () => { + // If Volar crashes we must not leave the TypeScript companion alive + // (otherwise idle-TTL cleanup leaks a process per session). + const previous = process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS; + process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS = "150"; + + try { + const session = new LspSession({ + workspaceId: "ws-1", + workspacePath: process.cwd(), + spec: { + serverKind: "vue", + // Primary exits 150ms after initialize. + command: "node", + args: [FAKE_LSP], + rootPath: process.cwd(), + companion: { + // Companion stays alive normally. + command: "node", + args: [FAKE_LSP], + }, + bridges: { tsserverRequest: true }, + }, + onDiagnostics: vi.fn(), + requestTimeoutMs: 2000, + logger: { + info: vi.fn(), + warn: vi.fn(), + error: vi.fn(), + }, + }); + + // Pull the companion field via a typed accessor for inspection. + type WithCompanion = LspSession & { + companion: null | { child: { killed: boolean } }; + }; + + await session.start(); + // Companion was spawned alongside primary. + expect((session as WithCompanion).companion).not.toBeNull(); + const companionChild = (session as WithCompanion).companion?.child; + expect(companionChild).toBeDefined(); + + // Wait long enough for the primary to exit and the termination handler + // to fire. + await vi.waitFor( + () => { + expect((session as WithCompanion).companion).toBeNull(); + }, + { timeout: 2000 } + ); + // The companion's process should have received SIGTERM. + expect(companionChild?.killed).toBe(true); + expect(session.getSummary().status).toBe("stopped"); + + await session.stop(); + } finally { + if (previous === undefined) { + delete process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS; + } else { + process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS = previous; + } + } + }); + + it("stops the companion when the session is explicitly stopped", async () => { + const session = new LspSession({ + workspaceId: "ws-1", + workspacePath: process.cwd(), + spec: { + serverKind: "vue", + command: "node", + args: [FAKE_LSP], + rootPath: process.cwd(), + companion: { + command: "node", + args: [FAKE_LSP], + }, + bridges: { tsserverRequest: true }, + }, + onDiagnostics: vi.fn(), + requestTimeoutMs: 2000, + logger: { + info: vi.fn(), + warn: vi.fn(), + error: vi.fn(), + }, + }); + + type WithCompanion = LspSession & { + companion: null | { child: { killed: boolean } }; + }; + + await session.start(); + const companionChild = (session as WithCompanion).companion?.child; + expect(companionChild).toBeDefined(); + + await session.stop(); + expect(companionChild?.killed).toBe(true); + expect((session as WithCompanion).companion).toBeNull(); + }); + it("drains child stderr output without breaking startup", async () => { const previous = process.env.CODER_STUDIO_FAKE_LSP_STDERR_ON_INIT; process.env.CODER_STUDIO_FAKE_LSP_STDERR_ON_INIT = "server boot log"; From bac970ca72def19b392011bbf1aa485ec6c90fee Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sat, 30 May 2026 14:20:21 +0800 Subject: [PATCH 144/162] fix(server): harden managed LSP probing and timeouts on Windows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A run of cross-language smoke tests (python, go, rust, vue) on a real Windows host turned up three classes of failures that all looked like "LSP unavailable" / "request timed out" but actually pointed at three different gaps in our probe + timeout logic. Fix them together so the Install / Retry flow tells the user something true. - `resolveManagedPythonCommand` now actively probes ` --version` on win32. The zero-byte Microsoft Store app execution aliases at `%LOCALAPPDATA%\Microsoft\WindowsApps\python(3).exe` pass `where.exe` but silently exit when invoked; before this change the install would crash opaquely at `python -m venv ...`. Now the prereq check rejects the stub and the UI shows `missing_prerequisite: python3, python`. - `LspToolManager.resolve` runs the same `--version` probe before accepting a system-PATH command on win32. This handles the symmetric case for rust-analyzer: `~/.cargo/bin/rust-analyzer.exe` is a rustup proxy that prints "Unknown binary 'rust-analyzer.exe'" to stderr and exits when the `rust-analyzer` rustup component is not installed. Before this fix the manager picked the broken proxy as the system source, never fell through to the managed download, and waited for an initialize response that never came. - `LspSession` now distinguishes `initializeTimeoutMs` (default `requestTimeoutMs * 10`, raised to 60_000 in `server.ts`) from `requestTimeoutMs` (raised from 2_000 to 8_000). rust-analyzer's `initialize` returns within ~70ms but background workspace indexing can take 25s on a real repo; the single 2-second budget would kill the child mid-init on cold start and never recover. Hover / definition keep the short fail-fast budget so the editor's "Loading..." popup doesn't linger when the server is wedged. Adds 11 unit tests covering the stub rejection paths and the initialize-vs-request timeout split, plus a `lsp-test/` directory of single-file fixtures (probe.{py,go,rs,vue}) for repeating the same smoke check by hand. Files an issue at `docs/issue/rust-analyzer-indexing-no-progress-feedback.md` describing the remaining UX gap — rust-analyzer silently returns `null` for hover/definition during its first ~25s of indexing, and we don't yet surface its `$/progress` notifications in the LSP status notice. Test sweep on Windows host: 16 server LSP test files, 118 passed + 3 POSIX-only skipped. --- .gitignore | 5 + ...-analyzer-indexing-no-progress-feedback.md | 66 ++++++++ lsp-test/Cargo.toml | 9 + lsp-test/README.md | 29 ++++ lsp-test/probe.go | 45 +++++ lsp-test/probe.py | 41 +++++ lsp-test/probe.rs | 44 +++++ lsp-test/probe.vue | 15 ++ .../src/__tests__/fixtures/fake-lsp-server.js | 10 +- .../server/src/lsp-tools/definitions.test.ts | 92 ++++++++++ packages/server/src/lsp-tools/definitions.ts | 34 +++- .../install-manager.integration.test.ts | 30 +++- .../src/lsp-tools/install-manager.test.ts | 45 ++++- .../server/src/lsp-tools/install-manager.ts | 10 +- packages/server/src/lsp-tools/manager.test.ts | 94 ++++++++++ packages/server/src/lsp-tools/manager.ts | 46 ++++- packages/server/src/lsp/manager.ts | 8 + packages/server/src/lsp/session.test.ts | 94 ++++++++++ packages/server/src/lsp/session.ts | 27 ++- packages/server/src/server.ts | 10 +- scripts/probe-rust.mjs | 160 ++++++++++++++++++ 21 files changed, 894 insertions(+), 20 deletions(-) create mode 100644 docs/issue/rust-analyzer-indexing-no-progress-feedback.md create mode 100644 lsp-test/Cargo.toml create mode 100644 lsp-test/README.md create mode 100644 lsp-test/probe.go create mode 100644 lsp-test/probe.py create mode 100644 lsp-test/probe.rs create mode 100644 lsp-test/probe.vue create mode 100644 packages/server/src/lsp-tools/definitions.test.ts create mode 100644 scripts/probe-rust.mjs diff --git a/.gitignore b/.gitignore index b80eb563..e2b4a05d 100644 --- a/.gitignore +++ b/.gitignore @@ -68,3 +68,8 @@ tsconfig.tsbuildinfo # Stitch design files .stitch/ + +# Rust build artefacts (from lsp-test/ fixture or any ad-hoc cargo) +target/ +Cargo.lock + diff --git a/docs/issue/rust-analyzer-indexing-no-progress-feedback.md b/docs/issue/rust-analyzer-indexing-no-progress-feedback.md new file mode 100644 index 00000000..2d0628dc --- /dev/null +++ b/docs/issue/rust-analyzer-indexing-no-progress-feedback.md @@ -0,0 +1,66 @@ +# rust-analyzer 启动期间 hover/definition 静默无响应，UI 无进度反馈 + +## 标题 + +`feat(web): surface rust-analyzer indexing progress in the LSP status notice` + +## 问题描述 + +打开第一个 `.rs` 文件时，rust-analyzer 会进入 `PrimeCaches` 阶段对工作区做初始化索引。这个阶段在 coder-studio 仓库根（中等仓库 + 大量 `node_modules`）下实测**会持续 ~25 秒**。 + +期间： + +- `initialize` LSP 请求几十毫秒就返回（rust-analyzer 设计上立刻确认 capabilities，workspace 加载是异步的） +- 我们的 `LspManager.ensureSession` 拿到 `summary.status === "ready"`，前端把 hover/definition provider 都注册好 +- 但用户**任何** hover/definition 请求都会被 rust-analyzer **立刻返回 `null`**——不是 hang、不是 timeout，而是它故意在 indexing 期间不给语义答案 +- Monaco 拿到 null 就什么都不显示 +- 用户感受：开了 `.rs` 文件之后随便点点都"完全没反应"，像 LSP 没起来 + +25 秒后 rust-analyzer 发 `$/progress { kind: "end" }` 通知，从此 hover 正常工作。但**这中间的等待期对用户完全不可见**。 + +## 复现步骤 + +1. 干净环境，无 rust-analyzer 缓存。 +2. 在 coder-studio 仓库根新建 `Cargo.toml` + `probe.rs`（最小 bin 项目即可）。 +3. 重启 dev server，让 LSP 会话从干净状态启动。 +4. 浏览器中打开 `probe.rs`，立刻 hover 任一标识符。 +5. 观察前 ~25 秒所有 hover/definition/references 都没反应。 + +可以用 `scripts/probe-rust.mjs probe.rs` 直接复现 —— +它会同时记录 initialize 用时、首次 hover 响应、`$/progress end` 用时。 + +## 实际行为 + +- 前 25 秒：hover 返回 null，UI 安静 +- 之后：hover 工作，但用户多半已经放弃尝试了 + +## 桌面终端对比 + +VS Code 的官方 rust-analyzer 扩展会在 status bar 上显示 +`rust-analyzer: indexing X/Y` 进度条；Helix 会在底部状态栏显示同样信息。两者都监听 rust-analyzer +的 `$/progress` LSP 通知。 + +我们目前没监听任何 LSP 进度通知。 + +## 已确认事实 + +- `initialize` 响应快（~70ms 量级，与 indexing 解耦） +- rust-analyzer 通过标准 LSP `$/progress` + notification 通报进度，token 是 `"rustAnalyzer/Indexing"` 或类似 +- `LspSession`（`packages/server/src/lsp/session.ts`）目前没有 `connection.onNotification("$/progress", ...)` + 处理器 +- 前端 `LspStatusNotice` 目前只有 ready / installing / failed / disabled 四种状态显示 + +## 后续排查方向 + +- **server**：`LspSession` 监听 `$/progress` 通知，把 `WorkDoneProgressBegin` / + `WorkDoneProgressReport` / `WorkDoneProgressEnd` 转成 `lsp.progress.updated` 事件 + via `eventBus` +- **core / shared**：在 `LspEnsureSessionResult` 或独立 `LspProgress` 类型里加一个 "indexing" 状态 +- **web**：`LspStatusNotice` 渲染 "Indexing 12 / 47 …" 或简单的 spinner + percentage +- 范围只对 rust-analyzer + 任何主动发 `$/progress` 的 server（pylsp、gopls 通常不发） + +## 临时缓解 + +- 文档里告诉用户："首次打开 `.rs` 文件需要等 ~30s 完成索引" +- 或检测 rust-analyzer 没回有效 hover 时，在编辑器里给一个 transient toast 提示 diff --git a/lsp-test/Cargo.toml b/lsp-test/Cargo.toml new file mode 100644 index 00000000..806ca84d --- /dev/null +++ b/lsp-test/Cargo.toml @@ -0,0 +1,9 @@ +[package] +name = "probe" +version = "0.0.0" +edition = "2021" +publish = false + +[[bin]] +name = "probe" +path = "probe.rs" diff --git a/lsp-test/README.md b/lsp-test/README.md new file mode 100644 index 00000000..d71148c9 --- /dev/null +++ b/lsp-test/README.md @@ -0,0 +1,29 @@ +# LSP smoke-test fixtures + +A small set of single-file projects used to verify each managed LSP works end-to-end against the editor (hover / definition / references / diagnostics). Each file has a TYPE ERROR at the bottom on purpose so the diagnostic provider also gets exercised. + +| File | Language server | What to verify | +| --- | --- | --- | +| `probe.vue` | `@vue/language-server` (Volar 3) + `typescript-language-server` companion | hover on `ref`/`computed`/`defineProps`, F12 to `Props`, red squiggle on the type error | +| `probe.py` | `python-lsp-server` (pylsp, managed) | hover on `multiply_by`/`Greeter`, F12 across functions, pyflakes-level diagnostic | +| `probe.go` | `gopls` (managed) | hover on `MultiplyBy`/`Greeter.Greet`, F12 across functions, type-mismatch diagnostic | +| `probe.rs` + `Cargo.toml` | `rust-analyzer` (system rustup component or managed download) | hover on `multiply_by`/`Greeter`/`greet`, F12 across functions, type-mismatch diagnostic | + +## Why a `Cargo.toml` + +Unlike the other servers, **rust-analyzer refuses to provide semantic info for `.rs` files that don't belong to a Cargo project**. The minimal `Cargo.toml` in this directory declares `probe.rs` as a bin so rust-analyzer treats the directory as a workspace. + +> rust-analyzer also takes ~25s on cold start to finish `PrimeCaches` indexing, during which all hover/definition requests silently return `null`. See `docs/issue/rust-analyzer-indexing-no-progress-feedback.md`. + +## How to run + +1. Open coder-studio in the editor (dev or built). +2. Open any file in this directory. +3. First open triggers the LSP install if needed — look for the `Install` button in the inline notice. +4. Once the notice disappears, exercise the four LSP features listed above. + +For protocol-level debugging without the editor in the loop, see `scripts/probe-vue-bridge.mjs` and `scripts/probe-rust.mjs` — they spawn the language server directly and assert specific LSP responses. + +## Cleanup + +These fixtures are intentionally checked in so a new contributor can repeat the same smoke check on day one. Feel free to leave them in place; they don't affect any production build. diff --git a/lsp-test/probe.go b/lsp-test/probe.go new file mode 100644 index 00000000..f0450f21 --- /dev/null +++ b/lsp-test/probe.go @@ -0,0 +1,45 @@ +// Quick LSP smoke probe for gopls. +// +// Try in the editor once this file is open: +// +// 1. Hover over `numbers`, `total`, `MultiplyBy`, `Greeter`, `Greet` — +// each should show its inferred Go signature with package context. +// 2. Ctrl-Click (or F12) on `MultiplyBy` inside `ComputeTotal` to jump +// to its definition. +// 3. Shift+F12 on `Greet` to see references. +// 4. The line marked `// TYPE ERROR` should get a gopls diagnostic +// (passing a string where an int is expected). +// +// Note: gopls expects a real module to fully analyze; we declare a +// throwaway one here so the file is self-contained. + +package main + +import "fmt" + +func MultiplyBy(value, factor int) int { + return value * factor +} + +func ComputeTotal(numbers []int, factor int) int { + total := 0 + for _, n := range numbers { + total += MultiplyBy(n, factor) + } + return total +} + +type Greeter struct { + Name string +} + +func (g Greeter) Greet() string { + return fmt.Sprintf("Hello, %s!", g.Name) +} + +func main() { + fmt.Println(ComputeTotal([]int{1, 2, 3}, 4)) + fmt.Println(Greeter{Name: "Vue"}.Greet()) + // TYPE ERROR: passing a string where an int is expected. + fmt.Println(MultiplyBy("not a number", 2)) +} diff --git a/lsp-test/probe.py b/lsp-test/probe.py new file mode 100644 index 00000000..fe385c1d --- /dev/null +++ b/lsp-test/probe.py @@ -0,0 +1,41 @@ +"""Quick LSP smoke probe for python-lsp-server (pylsp). + +Try the following in the editor once this file is open: + +1. Hover over `numbers`, `total`, `multiply_by`, `Greeter`, `greet` — + each should show its inferred type / signature. +2. Ctrl-Click (or F12) on `multiply_by` inside `compute_total` to jump + to its definition. +3. Shift+F12 on `greet` to see references. +4. The line marked `# TYPE ERROR` should get a pylsp diagnostic + (pylsp ships with pyflakes / pycodestyle by default; the call passes + a string to a parameter typed as `int`). +""" + +from dataclasses import dataclass + + +def multiply_by(value: int, factor: int) -> int: + return value * factor + + +def compute_total(numbers: list[int], factor: int) -> int: + total = 0 + for n in numbers: + total += multiply_by(n, factor) + return total + + +@dataclass +class Greeter: + name: str + + def greet(self) -> str: + return f"Hello, {self.name}!" + + +if __name__ == "__main__": + print(compute_total([1, 2, 3], 4)) + print(Greeter("Vue").greet()) + # TYPE ERROR: passing a string where an int is expected. + print(multiply_by("not a number", 2)) diff --git a/lsp-test/probe.rs b/lsp-test/probe.rs new file mode 100644 index 00000000..82567a8e --- /dev/null +++ b/lsp-test/probe.rs @@ -0,0 +1,44 @@ +//! Quick LSP smoke probe for rust-analyzer. +//! +//! Try in the editor once this file is open: +//! +//! 1. Hover over `numbers`, `total`, `multiply_by`, `Greeter`, `greet` — +//! each should show its inferred Rust type or signature. +//! 2. Ctrl-Click (or F12) on `multiply_by` inside `compute_total` to jump +//! to its definition. +//! 3. Shift+F12 on `greet` to see references. +//! 4. The line marked `// TYPE ERROR` should get a rust-analyzer +//! diagnostic (passing a `&str` where `i64` is expected). +//! +//! Note: rust-analyzer is happiest inside a Cargo workspace, so a few +//! features may behave slightly differently here than they would in a +//! real crate, but hover / definition / references still work. + +fn multiply_by(value: i64, factor: i64) -> i64 { + value * factor +} + +fn compute_total(numbers: &[i64], factor: i64) -> i64 { + let mut total = 0; + for n in numbers { + total += multiply_by(*n, factor); + } + total +} + +struct Greeter { + name: String, +} + +impl Greeter { + fn greet(&self) -> String { + format!("Hello, {}!", self.name) + } +} + +fn main() { + println!("{}", compute_total(&[1, 2, 3], 4)); + println!("{}", Greeter { name: "Vue".to_string() }.greet()); + // TYPE ERROR: passing a &str where i64 is expected. + println!("{}", multiply_by("not a number", 2)); +} diff --git a/lsp-test/probe.vue b/lsp-test/probe.vue new file mode 100644 index 00000000..abcbbc58 --- /dev/null +++ b/lsp-test/probe.vue @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/packages/server/src/__tests__/fixtures/fake-lsp-server.js b/packages/server/src/__tests__/fixtures/fake-lsp-server.js index 5e7f6895..39b3cd85 100644 --- a/packages/server/src/__tests__/fixtures/fake-lsp-server.js +++ b/packages/server/src/__tests__/fixtures/fake-lsp-server.js @@ -16,9 +16,10 @@ const connection = createMessageConnection( const docs = new Map(); const exitAfterInitMs = Number(process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS ?? "0"); const hoverDelayMs = Number(process.env.CODER_STUDIO_FAKE_LSP_HOVER_DELAY_MS ?? "0"); +const initDelayMs = Number(process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS ?? "0"); const stderrOnInit = process.env.CODER_STUDIO_FAKE_LSP_STDERR_ON_INIT ?? ""; -connection.onRequest("initialize", () => { +connection.onRequest("initialize", async () => { if (stderrOnInit) { process.stderr.write(`${stderrOnInit}\n`); } @@ -28,6 +29,13 @@ connection.onRequest("initialize", () => { timer.unref?.(); } + if (initDelayMs > 0) { + await new Promise((resolve) => { + const timer = setTimeout(resolve, initDelayMs); + timer.unref?.(); + }); + } + return { capabilities: { definitionProvider: true, diff --git a/packages/server/src/lsp-tools/definitions.test.ts b/packages/server/src/lsp-tools/definitions.test.ts new file mode 100644 index 00000000..9947c8f9 --- /dev/null +++ b/packages/server/src/lsp-tools/definitions.test.ts @@ -0,0 +1,92 @@ +import { describe, expect, it, vi } from "vitest"; +import { resolveManagedPythonCommand } from "./definitions.js"; + +describe("resolveManagedPythonCommand", () => { + it("returns the first available candidate on POSIX hosts without probing", async () => { + const commandExists = vi.fn(async (cmd: string) => cmd === "python3"); + const runCommand = vi.fn(); + + await expect( + resolveManagedPythonCommand(commandExists, "linux", runCommand as never) + ).resolves.toBe("python3"); + // POSIX hosts do not have Microsoft Store stubs; the helper must NOT + // execute the candidate just to check the version. + expect(runCommand).not.toHaveBeenCalled(); + }); + + it("returns null when no candidate is on PATH", async () => { + await expect( + resolveManagedPythonCommand( + vi.fn(async () => false), + "linux" + ) + ).resolves.toBeNull(); + }); + + it("on Windows, rejects a candidate whose `--version` prints nothing (Store stub)", async () => { + // Windows ships zero-byte App Execution Aliases for `python` / + // `python3`. `where.exe` reports them as present, but invoking them + // silently exits with empty stdout/stderr because Python is not + // actually installed. + const commandExists = vi.fn(async () => true); + const runCommand = vi.fn(async () => ({ stdout: "", stderr: "" })); + + await expect( + resolveManagedPythonCommand(commandExists, "win32", runCommand) + ).resolves.toBeNull(); + expect(runCommand).toHaveBeenCalledTimes(2); + expect(runCommand).toHaveBeenCalledWith( + "python3", + ["--version"], + expect.objectContaining({ windowsHide: true }) + ); + expect(runCommand).toHaveBeenCalledWith( + "python", + ["--version"], + expect.objectContaining({ windowsHide: true }) + ); + }); + + it("on Windows, accepts a candidate whose --version prints output on stdout", async () => { + const commandExists = vi.fn(async () => true); + const runCommand = vi.fn(async () => ({ stdout: "Python 3.12.0\n", stderr: "" })); + + await expect(resolveManagedPythonCommand(commandExists, "win32", runCommand)).resolves.toBe( + "python3" + ); + }); + + it("on Windows, accepts a candidate whose --version prints to stderr (older Pythons)", async () => { + // Pythons < 3.4 print the version banner to stderr instead of stdout. + const commandExists = vi.fn(async () => true); + const runCommand = vi.fn(async () => ({ stdout: "", stderr: "Python 2.7.18\n" })); + + await expect(resolveManagedPythonCommand(commandExists, "win32", runCommand)).resolves.toBe( + "python3" + ); + }); + + it("on Windows, falls through to the next candidate when the first one's probe fails to spawn", async () => { + const commandExists = vi.fn(async () => true); + const runCommand = vi.fn(async (file: string) => { + if (file === "python3") { + // simulate spawn failure (file is a stub that can't be executed) + throw new Error("spawn python3 ENOENT"); + } + return { stdout: "Python 3.12.0\n", stderr: "" }; + }); + + await expect(resolveManagedPythonCommand(commandExists, "win32", runCommand)).resolves.toBe( + "python" + ); + }); + + it("on Windows, returns null when both candidates are stubs that print nothing", async () => { + const commandExists = vi.fn(async () => true); + const runCommand = vi.fn(async () => ({ stdout: "", stderr: "" })); + + await expect( + resolveManagedPythonCommand(commandExists, "win32", runCommand) + ).resolves.toBeNull(); + }); +}); diff --git a/packages/server/src/lsp-tools/definitions.ts b/packages/server/src/lsp-tools/definitions.ts index 12ac684a..330fcd00 100644 --- a/packages/server/src/lsp-tools/definitions.ts +++ b/packages/server/src/lsp-tools/definitions.ts @@ -1,4 +1,5 @@ import type { LspServerKind } from "@coder-studio/core"; +import { type CommandRunner, runCommandAsString } from "../provider-runtime/command-runner.js"; export const VUE_LANGUAGE_SERVER_VERSION = "3.3.2"; export const VUE_TYPESCRIPT_VERSION = "6.0.3"; @@ -102,14 +103,41 @@ export function getManagedPrerequisites( export async function resolveManagedPythonCommand( commandExists: (command: string) => Promise, - platform: NodeJS.Platform = process.platform + platform: NodeJS.Platform = process.platform, + runCommand: CommandRunner = runCommandAsString ): Promise { const candidates = getManagedPrerequisites("python", platform); for (const candidate of candidates) { - if (await commandExists(candidate)) { - return candidate; + if (!(await commandExists(candidate))) { + continue; + } + if (platform === "win32" && !(await isWindowsPythonAlive(candidate, runCommand))) { + // `where python(3)` happily returns + // `%LOCALAPPDATA%\Microsoft\WindowsApps\python(3).exe` even when Python + // is not installed — those are zero-byte Microsoft Store "App Execution + // Aliases" that redirect to the Store. Accepting them would pass the + // prerequisite check and then explode at the `python -m venv ...` + // install step with an empty/non-existent venv. Probe the candidate + // with `--version` and require it to actually print something. + continue; } + return candidate; } return null; } + +/** + * Returns true if invoking ` --version` produces any output. Python + * prints its version to stdout from 3.4 onwards and stderr on older builds, + * so we accept either. The Microsoft Store stub prints nothing. + */ +async function isWindowsPythonAlive(command: string, runCommand: CommandRunner): Promise { + try { + const result = await runCommand(command, ["--version"], { windowsHide: true }); + const combined = `${result.stdout}\n${result.stderr}`.trim(); + return combined.length > 0; + } catch { + return false; + } +} diff --git a/packages/server/src/lsp-tools/install-manager.integration.test.ts b/packages/server/src/lsp-tools/install-manager.integration.test.ts index 513fb329..63e47dd3 100644 --- a/packages/server/src/lsp-tools/install-manager.integration.test.ts +++ b/packages/server/src/lsp-tools/install-manager.integration.test.ts @@ -117,7 +117,20 @@ describe(`LspToolInstallManager verify step (platform=${PLATFORM})`, () => { const root = mkdtempSync(join(tmpdir(), `lsp-install-${serverKind}-`)); const expectedPath = pathFn(root, PLATFORM); - const runCommand = vi.fn(async () => { + const runCommand = vi.fn(async (file: string, args: string[]) => { + // On Windows, the python prereq resolver probes ` + // --version` to defend against the Microsoft Store stub. Return a + // believable banner so the probe accepts the candidate; otherwise + // the install would short-circuit with `missing_prerequisite` + // before ever reaching the verify step under test. + if ( + PLATFORM === "win32" && + serverKind === "python" && + (file === "python" || file === "python3") && + args[0] === "--version" + ) { + return { stdout: "Python 3.12.0\n", stderr: "" }; + } // Simulate the install step actually putting the executable on disk // so the verify step (real `checkCommandAvailable`) can find it. mkdirSync(dirname(expectedPath), { recursive: true }); @@ -170,7 +183,20 @@ describe(`LspToolInstallManager verify step (platform=${PLATFORM})`, () => { commandExists: smartCommandExists, // runCommand succeeds but never writes the file, simulating an // install step that silently completed without producing the binary. - runCommand: vi.fn(async () => ({ stdout: "", stderr: "" })), + // For python on Windows we also need to satisfy the `--version` + // probe, otherwise the prereq resolver would short-circuit before + // ever reaching the verify step under test. + runCommand: vi.fn(async (file: string, args: string[]) => { + if ( + PLATFORM === "win32" && + serverKind === "python" && + (file === "python" || file === "python3") && + args[0] === "--version" + ) { + return { stdout: "Python 3.12.0\n", stderr: "" }; + } + return { stdout: "", stderr: "" }; + }), }); const job = await manager.start({ workspace, serverKind }); diff --git a/packages/server/src/lsp-tools/install-manager.test.ts b/packages/server/src/lsp-tools/install-manager.test.ts index 84a701d6..9b0ffb61 100644 --- a/packages/server/src/lsp-tools/install-manager.test.ts +++ b/packages/server/src/lsp-tools/install-manager.test.ts @@ -49,6 +49,30 @@ describe("LspToolInstallManager", () => { }); }); + it("fails with missing_prerequisite when the Windows python candidate is a Microsoft Store stub", async () => { + // Regression test: `where.exe python` returns the zero-byte App + // Execution Alias at `%LOCALAPPDATA%\Microsoft\WindowsApps\python.exe` + // even when Python is not installed. The manager must reject the + // candidate via the version probe instead of silently falling through + // to the venv install step (which then fails opaquely). + const manager = new LspToolInstallManager({ + manifestStore: new FileManifestStore(mkdtempSync(join(tmpdir(), "lsp-tools-"))), + platform: "win32", + // `where` finds both stubs. + commandExists: vi.fn(async () => true), + // ...but invoking the stub produces no output (Store stub behavior). + runCommand: vi.fn(async () => ({ stdout: "", stderr: "" })), + }); + + const job = await manager.start({ workspace, serverKind: "python" }); + + expect(job.status).toBe("failed"); + expect(job.failure).toMatchObject({ + code: "missing_prerequisite", + missingCommands: ["python3", "python"], + }); + }); + it("allows managed Python install on Windows when python is available but python3 is not", async () => { const root = mkdtempSync(join(tmpdir(), "lsp-tools-")); let installed = false; @@ -72,6 +96,13 @@ describe("LspToolInstallManager", () => { return false; }), runCommand: vi.fn(async (file: string, args: string[]) => { + // The resolver also probes `python --version` on Windows to defend + // against Microsoft Store stubs. Return a believable version banner + // so the candidate is accepted. + if (file === "python" && args[0] === "--version") { + return { stdout: "Python 3.12.0\n", stderr: "" }; + } + if (file === "python" && args[0] === "-m" && args[1] === "venv") { return { stdout: "created venv", stderr: "" }; } @@ -81,7 +112,7 @@ describe("LspToolInstallManager", () => { return { stdout: "installed pylsp", stderr: "" }; } - throw new Error(`unexpected command: ${file}`); + throw new Error(`unexpected command: ${file} ${args.join(" ")}`); }), }); @@ -239,6 +270,10 @@ describe("LspToolInstallManager", () => { }); const manager = new LspToolInstallManager({ manifestStore: new FileManifestStore(mkdtempSync(join(tmpdir(), "lsp-tools-"))), + // Pin platform so the Windows-only Microsoft Store stub probe (which + // calls `python --version`) doesn't intercept the ENOENT we want the + // install step itself to surface. + platform: "linux", commandExists: vi.fn(async () => true), runCommand: vi.fn(async () => { throw installError; @@ -288,6 +323,12 @@ describe("LspToolInstallManager", () => { return false; }), runCommand: vi.fn(async (file: string, args: string[]) => { + // On Windows the resolver probes `python3 --version` to defend + // against the Microsoft Store stub. Return a believable banner. + if (file === "python3" && args[0] === "--version") { + return { stdout: "Python 3.12.0\n", stderr: "" }; + } + if (file === "python3" && args[0] === "-m" && args[1] === "venv") { return { stdout: "created venv", stderr: "" }; } @@ -297,7 +338,7 @@ describe("LspToolInstallManager", () => { return { stdout: "installed pylsp", stderr: "" }; } - throw new Error(`unexpected command: ${file}`); + throw new Error(`unexpected command: ${file} ${args.join(" ")}`); }), }); diff --git a/packages/server/src/lsp-tools/install-manager.ts b/packages/server/src/lsp-tools/install-manager.ts index 2cbe6a4a..61e88833 100644 --- a/packages/server/src/lsp-tools/install-manager.ts +++ b/packages/server/src/lsp-tools/install-manager.ts @@ -117,7 +117,11 @@ export class LspToolInstallManager { const missingPrerequisites: string[] = []; let pythonCommand: string | null = null; if (input.serverKind === "python") { - pythonCommand = await resolveManagedPythonCommand(commandExists, platform); + pythonCommand = await resolveManagedPythonCommand( + commandExists, + platform, + this.deps.runCommand + ); if (!pythonCommand) { missingPrerequisites.push(...getManagedPrerequisites("python", platform)); } @@ -198,7 +202,9 @@ export class LspToolInstallManager { const commandExists = this.deps.commandExists ?? ((command: string) => checkCommandAvailable(command, this.deps)); const pythonCommand = - serverKind === "python" ? await resolveManagedPythonCommand(commandExists, platform) : null; + serverKind === "python" + ? await resolveManagedPythonCommand(commandExists, platform, this.deps.runCommand) + : null; mkdirSync(dirname(executablePath), { recursive: true }); diff --git a/packages/server/src/lsp-tools/manager.test.ts b/packages/server/src/lsp-tools/manager.test.ts index 7a0e765c..c37d6a11 100644 --- a/packages/server/src/lsp-tools/manager.test.ts +++ b/packages/server/src/lsp-tools/manager.test.ts @@ -93,6 +93,9 @@ describe("LspToolManager.resolve", () => { const manager = new LspToolManager({ manifestStore: new FileManifestStore(root), + // Pin platform so the win32-only Microsoft Store stub probe doesn't + // reach for the real `python --version` on the host. + platform: "linux", commandExists: vi.fn(async (command: string) => command === "python3"), resolveBundledCommand: vi.fn(() => null), }); @@ -129,6 +132,7 @@ describe("LspToolManager.resolve", () => { const manager = new LspToolManager({ manifestStore: new FileManifestStore(root), + platform: "linux", commandExists: vi.fn(async (command: string) => command === "python3"), resolveBundledCommand: vi.fn(() => null), }); @@ -196,10 +200,100 @@ describe("LspToolManager.resolve", () => { expect(result.args.slice(1)).toEqual(["--stdio"]); }); + it("rejects a Windows system PATH command whose `--version` prints nothing (e.g. broken rustup shim)", async () => { + // Regression test: `~/.cargo/bin/rust-analyzer.exe` exists on PATH as a + // rustup proxy even when the `rust-analyzer` component is not installed. + // Running it prints "Unknown binary 'rust-analyzer.exe' in official + // toolchain" to stderr and exits — the manager must fall through to the + // managed install path instead of pretending the system has a working + // rust-analyzer (which causes opaque LSP initialize timeouts). + const root = mkdtempSync(join(tmpdir(), "lsp-tools-")); + const manager = new LspToolManager({ + manifestStore: new FileManifestStore(root), + platform: "win32", + commandExists: vi.fn(async () => true), + runCommand: vi.fn(async () => { + // Simulate the rustup proxy: throws because of the non-zero exit. + const err = Object.assign(new Error("Command failed with exit code 1"), { + exitCode: 1, + stdout: "", + stderr: "", + }); + throw err; + }), + resolveBundledCommand: vi.fn(() => null), + }); + + const result = await manager.resolve({ + workspace, + serverKind: "rust", + env: {}, + }); + + expect(result).toMatchObject({ + kind: "tool_missing", + serverKind: "rust", + autoInstallSupported: true, + }); + }); + + it("accepts a Windows system command whose `--version` produces output", async () => { + const root = mkdtempSync(join(tmpdir(), "lsp-tools-")); + const manager = new LspToolManager({ + manifestStore: new FileManifestStore(root), + platform: "win32", + commandExists: vi.fn(async () => true), + runCommand: vi.fn(async () => ({ + stdout: "rust-analyzer 1.92.0 (ded5c06c 2025-12-08)\n", + stderr: "", + })), + resolveBundledCommand: vi.fn(() => null), + }); + + const result = await manager.resolve({ + workspace, + serverKind: "rust", + env: {}, + }); + + expect(result).toMatchObject({ + kind: "ready", + source: "system", + command: "rust-analyzer", + }); + }); + + it("skips the `--version` probe on POSIX hosts because broken proxies are uncommon there", async () => { + const root = mkdtempSync(join(tmpdir(), "lsp-tools-")); + const runCommand = vi.fn(); + const manager = new LspToolManager({ + manifestStore: new FileManifestStore(root), + platform: "linux", + commandExists: vi.fn(async () => true), + runCommand, + resolveBundledCommand: vi.fn(() => null), + }); + + const result = await manager.resolve({ + workspace, + serverKind: "rust", + env: {}, + }); + + expect(result).toMatchObject({ + kind: "ready", + source: "system", + }); + // POSIX must NOT incur the extra `--version` spawn for every LSP we + // resolve — it adds startup latency without any meaningful protection. + expect(runCommand).not.toHaveBeenCalled(); + }); + it("returns tool_missing when no source is available", async () => { const root = mkdtempSync(join(tmpdir(), "lsp-tools-")); const manager = new LspToolManager({ manifestStore: new FileManifestStore(root), + platform: "linux", commandExists: vi.fn(async (command: string) => command === "python3"), resolveBundledCommand: vi.fn(() => null), }); diff --git a/packages/server/src/lsp-tools/manager.ts b/packages/server/src/lsp-tools/manager.ts index c6b3c939..ade0c182 100644 --- a/packages/server/src/lsp-tools/manager.ts +++ b/packages/server/src/lsp-tools/manager.ts @@ -12,6 +12,7 @@ import { type CommandCheckDeps, checkCommandAvailable, } from "../provider-runtime/command-check.js"; +import { type CommandRunner, runCommandAsString } from "../provider-runtime/command-runner.js"; import { getLspCommandOverridePrefix, getLspToolDefinition, @@ -102,7 +103,7 @@ export class LspToolManager { }; } - if (await commandExists(definition.defaultCommand)) { + if (await this.isSystemCommandUsable(definition.defaultCommand, commandExists)) { return { kind: "ready", serverKind: input.serverKind, @@ -147,6 +148,43 @@ export class LspToolManager { }; } + /** + * Decide whether a system-PATH command should be treated as a usable LSP + * source. `commandExists` only checks PATH presence, but Windows is full of + * zero-byte or proxy shims that satisfy that check yet refuse to actually + * run: + * + * - `%LOCALAPPDATA%\Microsoft\WindowsApps\python(3).exe` — Microsoft + * Store app execution aliases that redirect to the Store when the + * underlying app isn't installed. + * - `~/.cargo/bin/rust-analyzer.exe` when the `rust-analyzer` rustup + * component isn't installed — the rustup proxy prints + * "Unknown binary 'rust-analyzer.exe' in official toolchain" and exits. + * + * Accepting either of those as a "system" source leads to ambiguous LSP + * timeouts the first time a hover lands. Probe with `--version` on + * Windows so we fall through to the managed install path instead. + */ + private async isSystemCommandUsable( + command: string, + commandExists: CommandAvailabilityCheck + ): Promise { + if (!(await commandExists(command))) { + return false; + } + const platform = this.deps.platform ?? process.platform; + if (platform !== "win32") { + return true; + } + const runCommand: CommandRunner = this.deps.runCommand ?? runCommandAsString; + try { + const result = await runCommand(command, ["--version"], { windowsHide: true }); + return `${result.stdout}\n${result.stderr}`.trim().length > 0; + } catch { + return false; + } + } + private resolveOverride( serverKind: LspServerKind, env: NodeJS.ProcessEnv @@ -238,7 +276,11 @@ export class LspToolManager { if (managed && workspace.targetRuntime === "native") { if (definition.serverKind === "python") { - const pythonCommand = await resolveManagedPythonCommand(commandExists, platform); + const pythonCommand = await resolveManagedPythonCommand( + commandExists, + platform, + this.deps.runCommand + ); if (!pythonCommand) { missingPrerequisites.push(...getManagedPrerequisites("python", platform)); } diff --git a/packages/server/src/lsp/manager.ts b/packages/server/src/lsp/manager.ts index 7fefeaed..e5e09814 100644 --- a/packages/server/src/lsp/manager.ts +++ b/packages/server/src/lsp/manager.ts @@ -63,6 +63,13 @@ export class LspManager { error: (...args: unknown[]) => void; }; requestTimeoutMs: number; + /** + * Timeout for the one-off LSP `initialize` request. Defaults to + * `requestTimeoutMs * 10` inside `LspSession`; override here if you + * want a different ceiling without inflating `requestTimeoutMs` (which + * also governs every hover/definition query). + */ + initializeTimeoutMs?: number; idleTtlMs: number; restartLimit: number; lspToolMgr: LspToolManager; @@ -189,6 +196,7 @@ export class LspManager { workspacePath: workspace.path, spec, requestTimeoutMs: this.deps.requestTimeoutMs, + initializeTimeoutMs: this.deps.initializeTimeoutMs, logger: this.deps.logger, onDiagnostics: (payload) => this.deps.eventBus.emit({ diff --git a/packages/server/src/lsp/session.test.ts b/packages/server/src/lsp/session.test.ts index 55430402..3c573d3d 100644 --- a/packages/server/src/lsp/session.test.ts +++ b/packages/server/src/lsp/session.test.ts @@ -592,6 +592,100 @@ describe.sequential("LspSession", () => { expect((session as WithCompanion).companion).toBeNull(); }); + it("uses initializeTimeoutMs (not requestTimeoutMs) for the LSP initialize handshake", async () => { + // Regression test: rust-analyzer's `initialize` routinely takes 10-30s in + // real projects, but per-request semantic queries should still fail fast. + // The session must wait the longer ceiling for initialize and the short + // one for hover/definition. Here we simulate a 350ms initialize and a + // 1000ms hover; with a request timeout of 200ms the initialize must + // still succeed and the hover must still time out. + const previousInit = process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS; + const previousHover = process.env.CODER_STUDIO_FAKE_LSP_HOVER_DELAY_MS; + process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS = "350"; + process.env.CODER_STUDIO_FAKE_LSP_HOVER_DELAY_MS = "1000"; + + try { + const session = new LspSession({ + workspaceId: "ws-1", + workspacePath: process.cwd(), + spec: { + serverKind: "rust", + command: "node", + args: [FAKE_LSP], + rootPath: process.cwd(), + }, + onDiagnostics: vi.fn(), + requestTimeoutMs: 200, + initializeTimeoutMs: 5_000, + logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() }, + }); + + // Initialize takes 350ms but the longer timeout allows it. + await expect(session.start()).resolves.toMatchObject({ status: "ready" }); + + await session.openDocument({ + path: "e2e/fixtures/lsp-workspace/shared.ts", + languageId: "rust", + text: "export const sharedValue = 1;\n", + }); + + // Hover takes 1000ms which exceeds requestTimeoutMs of 200ms — must + // still time out and recover so the next query can succeed. + await expect( + session.hover({ + path: "e2e/fixtures/lsp-workspace/shared.ts", + line: 1, + column: 16, + }) + ).resolves.toBeNull(); + + await session.stop(); + } finally { + if (previousInit === undefined) { + delete process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS; + } else { + process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS = previousInit; + } + if (previousHover === undefined) { + delete process.env.CODER_STUDIO_FAKE_LSP_HOVER_DELAY_MS; + } else { + process.env.CODER_STUDIO_FAKE_LSP_HOVER_DELAY_MS = previousHover; + } + } + }); + + it("falls back to requestTimeoutMs * 10 for initialize when initializeTimeoutMs is omitted", async () => { + const previousInit = process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS; + // 350ms init delay must succeed when requestTimeoutMs is 100 (so the + // implicit init budget is 1000ms). + process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS = "350"; + + try { + const session = new LspSession({ + workspaceId: "ws-1", + workspacePath: process.cwd(), + spec: { + serverKind: "rust", + command: "node", + args: [FAKE_LSP], + rootPath: process.cwd(), + }, + onDiagnostics: vi.fn(), + requestTimeoutMs: 100, + logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() }, + }); + + await expect(session.start()).resolves.toMatchObject({ status: "ready" }); + await session.stop(); + } finally { + if (previousInit === undefined) { + delete process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS; + } else { + process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS = previousInit; + } + } + }); + it("drains child stderr output without breaking startup", async () => { const previous = process.env.CODER_STUDIO_FAKE_LSP_STDERR_ON_INIT; process.env.CODER_STUDIO_FAKE_LSP_STDERR_ON_INIT = "server boot log"; diff --git a/packages/server/src/lsp/session.ts b/packages/server/src/lsp/session.ts index 8c9d6096..55028f17 100644 --- a/packages/server/src/lsp/session.ts +++ b/packages/server/src/lsp/session.ts @@ -44,7 +44,19 @@ interface SessionDeps { workspacePath: string; spec: LspServerSpec; onDiagnostics: (event: LspDiagnosticsEvent) => void; + /** + * Per-request timeout for semantic queries (hover, definition, references, + * documentSymbols, …). Keep this short enough that the editor's hover + * popup doesn't show "loading" forever when the server is wedged. + */ requestTimeoutMs: number; + /** + * Timeout for the LSP `initialize` request. Some servers (notably + * rust-analyzer) need to scan Cargo workspaces and load proc-macros on + * first boot, which can routinely take 20s+ in real projects. Defaults + * to `requestTimeoutMs * 10` so existing callers don't regress. + */ + initializeTimeoutMs?: number; platform?: NodeJS.Platform; logger: { info: (...args: unknown[]) => void; @@ -244,6 +256,7 @@ export class LspSession { } try { + const initTimeoutMs = this.deps.initializeTimeoutMs ?? this.deps.requestTimeoutMs * 10; const [initializeResult] = await Promise.all([ this.withTimeout( this.connection.sendRequest("initialize", { @@ -251,7 +264,8 @@ export class LspSession { rootUri: pathToFileURL(this.deps.spec.rootPath).toString(), capabilities: {}, initializationOptions: this.deps.spec.initializationOptions, - }) + }), + initTimeoutMs ), companion ? this.withTimeout( @@ -260,7 +274,8 @@ export class LspSession { rootUri: pathToFileURL(this.deps.spec.rootPath).toString(), capabilities: {}, initializationOptions: this.deps.spec.companion?.initializationOptions, - }) + }), + initTimeoutMs ) : Promise.resolve(null), ]); @@ -625,17 +640,15 @@ export class LspSession { return merged; } - private async withTimeout(promise: Promise): Promise { + private async withTimeout(promise: Promise, overrideMs?: number): Promise { let timer: NodeJS.Timeout | undefined; + const timeoutMs = overrideMs ?? this.deps.requestTimeoutMs; try { return await Promise.race([ promise, new Promise((_, reject) => { - timer = setTimeout( - () => reject(new LspRequestTimeoutError()), - this.deps.requestTimeoutMs - ); + timer = setTimeout(() => reject(new LspRequestTimeoutError()), timeoutMs); }), ]); } finally { diff --git a/packages/server/src/server.ts b/packages/server/src/server.ts index 79c6048c..063aa694 100644 --- a/packages/server/src/server.ts +++ b/packages/server/src/server.ts @@ -260,7 +260,15 @@ export async function createServer( workspaceMgr: { get: (workspaceId) => workspaceMgr.get(workspaceId) }, eventBus, logger: app.log, - requestTimeoutMs: 2000, + // Semantic queries (hover/definition/references/...) should fail fast so + // the editor's "Loading..." popup doesn't linger. 8s is comfortable for + // any LSP that's actually responsive. + requestTimeoutMs: 8_000, + // The one-off `initialize` request is a different beast — rust-analyzer + // can take 20-30s to scan a Cargo workspace and load proc-macros on + // first boot, and the Vue companion can be slow to start tsserver too. + // 60s is generous but caps the wait when the server is truly dead. + initializeTimeoutMs: 60_000, idleTtlMs: 60_000, restartLimit: 2, lspToolMgr, diff --git a/scripts/probe-rust.mjs b/scripts/probe-rust.mjs new file mode 100644 index 00000000..c1f77c2a --- /dev/null +++ b/scripts/probe-rust.mjs @@ -0,0 +1,160 @@ +#!/usr/bin/env node +// Quick LSP probe for rust-analyzer against `lsp-test/probe.rs` (or any path +// passed on argv). Spawns rust-analyzer directly, sends initialize + +// didOpen, then dumps the response shape for hover at a few canonical +// positions. Useful for verifying the protocol contract without going +// through the coder-studio LSP layer. +// +// Usage: node scripts/probe-rust.mjs [path/to/file.rs] + +import { spawn } from "node:child_process"; +import { readFileSync } from "node:fs"; +import { createRequire } from "node:module"; +import { join, resolve } from "node:path"; +import { pathToFileURL } from "node:url"; + +const require = createRequire( + pathToFileURL(join(process.cwd(), "packages", "server", "package.json")).toString() +); +const { + createMessageConnection, + StreamMessageReader, + StreamMessageWriter, +} = require("vscode-jsonrpc/node.js"); + +const RUST_ANALYZER = process.env.RUST_ANALYZER ?? "rust-analyzer"; +const sample = resolve(process.argv[2] ?? "lsp-test/probe.rs"); +const text = readFileSync(sample, "utf8"); +const uri = pathToFileURL(sample).toString(); +const rootDir = process.cwd(); + +console.log("rust-analyzer:", RUST_ANALYZER); +console.log("sample: ", sample); +console.log("rootDir: ", rootDir); + +const child = spawn(RUST_ANALYZER, [], { + stdio: ["pipe", "pipe", "pipe"], + shell: false, + windowsHide: true, +}); +child.stderr.on("data", (b) => process.stderr.write("[ra stderr] " + b.toString())); +child.on("exit", (code) => console.log("[ra] exit:", code)); + +const conn = createMessageConnection( + new StreamMessageReader(child.stdout), + new StreamMessageWriter(child.stdin) +); +conn.onUnhandledNotification((n) => + console.log("<- notification:", n.method, JSON.stringify(n.params).slice(0, 160)) +); +conn.listen(); + +(async () => { + try { + const tInit = Date.now(); + console.log("-> initialize"); + const init = await Promise.race([ + conn.sendRequest("initialize", { + processId: process.pid, + rootUri: pathToFileURL(rootDir).toString(), + workspaceFolders: [{ uri: pathToFileURL(rootDir).toString(), name: "probe-ws" }], + capabilities: {}, + initializationOptions: {}, + }), + new Promise((_, r) => setTimeout(() => r(new Error("init timeout 30s")), 30000)), + ]); + console.log( + "initialize returned in", + Date.now() - tInit, + "ms, hoverProvider:", + !!init?.capabilities?.hoverProvider + ); + conn.sendNotification("initialized", {}); + + console.log("-> didOpen", uri); + conn.sendNotification("textDocument/didOpen", { + textDocument: { uri, languageId: "rust", version: 1, text }, + }); + + // Reproduce the user's bug: hover *immediately*, before indexing is done. + // With a tight timeout this should fail to return anything within budget. + const tEarly = Date.now(); + try { + const early = await Promise.race([ + conn.sendRequest("textDocument/hover", { + textDocument: { uri }, + position: { line: 16, character: 5 }, + }), + new Promise((_, rj) => setTimeout(() => rj(new Error("early hover timeout 8s")), 8000)), + ]); + console.log( + `early hover after ${Date.now() - tEarly}ms:`, + JSON.stringify(early, null, 0).slice(0, 160) + ); + } catch (e) { + console.log(`early hover failed after ${Date.now() - tEarly}ms:`, e.message); + } + + // Wait for rust-analyzer to load (cold start can be slow). Wait either + // for a "Loading: " progress notification ending or a fixed timeout. + let loadDone = false; + conn.onUnhandledNotification?.((n) => { + if (n.method === "$/progress") { + const v = n.params?.value ?? {}; + if (v.kind === "end") loadDone = true; + console.log("[progress]", v.kind ?? "?", v.title ?? "", v.message ?? ""); + } + }); + const start = Date.now(); + while (!loadDone && Date.now() - start < 25_000) { + await new Promise((r) => setTimeout(r, 500)); + } + console.log("ready in", Date.now() - start, "ms"); + + // Find positions of interest — `anchor` is the substring whose middle we + // want to land on (so we don't hover the leading keyword). + const lines = text.split(/\r?\n/); + async function hoverAt(label, lineFragment, anchor) { + let line = -1, + ch = 0; + for (let i = 0; i < lines.length; i++) { + const lineIdx = lines[i].indexOf(lineFragment); + if (lineIdx >= 0) { + line = i; + const anchorIdx = lines[i].indexOf(anchor, lineIdx); + ch = anchorIdx + Math.floor(anchor.length / 2); + break; + } + } + if (line < 0) { + console.log(`hover[${label}] - line fragment not found: '${lineFragment}'`); + return; + } + const r = await Promise.race([ + conn.sendRequest("textDocument/hover", { + textDocument: { uri }, + position: { line, character: ch }, + }), + new Promise((_, rj) => setTimeout(() => rj(new Error(label + " timeout")), 15000)), + ]).catch((e) => ({ __error: e.message })); + console.log( + `hover[${label}] L${line + 1}:${ch + 1}:`, + JSON.stringify(r, null, 0).slice(0, 300) + ); + } + + await hoverAt("fn-multiply_by-decl", "fn multiply_by", "multiply_by"); + await hoverAt("fn-multiply_by-call", "multiply_by(*n,", "multiply_by"); + await hoverAt("var-total", "let mut total", "total"); + await hoverAt("struct-Greeter", "struct Greeter", "Greeter"); + await hoverAt("method-greet", "fn greet(&self)", "greet"); + } catch (e) { + console.error("PROBE FAILED:", e.message); + } finally { + try { + await conn.sendRequest("shutdown", null); + } catch {} + child.kill(); + setTimeout(() => process.exit(0), 200).unref?.(); + } +})(); From 24024c96f97dd9a948edab1e9617939ac6a379c8 Mon Sep 17 00:00:00 2001 From: Spencer Date: Sat, 30 May 2026 07:54:31 +0000 Subject: [PATCH 145/162] refactor(web): redesign draft pane with agent and file editor split layout - Replace single-column agent card grid with left-right two-panel layout - Agent panel: compact button list with icon + name + arrow - File Editor panel: dashed drop zone for drag-to-open files - Center the component within the draft pane - Add footer description line - Collapse to stacked layout in narrow containers - Remove unused kicker, description, and meta styles --- .../views/shared/draft-launcher.tsx | 214 +++++++++++------- packages/web/src/styles/components.css | 199 +++++++++------- 2 files changed, 247 insertions(+), 166 deletions(-) diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx index b5f2eebd..93876a94 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx @@ -253,87 +253,141 @@ export const DraftLauncher: FC = ({
- SESSION LAUNCHER -

- 选择一个 AI 会话，在当前 workspace 里继续查看文件、运行命令和推进代码修改。 -

-
- {( - [ - { - id: "claude", - title: "Claude", - meta: "analysis", - icon: , - description: "更适合长上下文梳理、方案分析和代码审查。", - className: "agent-provider-card-claude", - }, - { - id: "codex", - title: "Codex", - meta: "workspace", - icon: , - description: "更适合终端操作、直接改文件和逐步修复问题。", - className: "agent-provider-card-codex", - }, - ] as const - ).map((provider) => { - const state = states[provider.id]; - const guide = getProviderGuide(provider.id); - const isBusy = - state.loading || - state.installJob?.status === "queued" || - state.installJob?.status === "running"; - - return ( - - ); - })} + Agent +
+ +
+ {( + [ + { + id: "claude", + title: "Claude", + icon: , + className: "agent-provider-card-claude", + }, + { + id: "codex", + title: "Codex", + icon: , + className: "agent-provider-card-codex", + }, + ] as const + ).map((provider) => { + const state = states[provider.id]; + const guide = getProviderGuide(provider.id); + const isBusy = + state.loading || + state.installJob?.status === "queued" || + state.installJob?.status === "running"; + + return ( + + ); + })} +
+
+ + {/* File Editor panel */} +
+
+ + + + + + + File Editor +
+ +
+
+ + + + + +
+ 拖入文件打开 +
+
+
+ +
点击启动 Agent 或直接拖拽文件到右侧区域打开
diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index 895b8e9c..3d45323b 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -4077,20 +4077,17 @@ body.is-dragging-pane { display: flex; flex-direction: column; align-items: center; - gap: var(--sp-6); - padding: var(--sp-8); + justify-content: center; } -.agent-draft-title { - font-size: var(--type-heading-1-size); - line-height: var(--type-heading-1-line-height); - font-weight: var(--type-heading-1-weight); - color: var(--text-primary); +.agent-draft-component { + display: flex; + flex-direction: column; } -.agent-draft-providers { +.agent-draft-component-row { display: flex; - gap: var(--sp-4); + flex-direction: row; } /* ========== Session Card ========== */ @@ -7278,51 +7275,70 @@ textarea.input { } .agent-draft-content { - width: min(680px, calc(100% - 48px)); - max-width: 100%; - align-items: stretch; + align-items: center; + justify-content: center; +} + +/* ── Component layout ─────────────────────────────── */ +.agent-draft-component { + display: flex; + flex-direction: column; + gap: var(--sp-2); +} + +.agent-draft-component-row { + display: flex; + flex-direction: row; gap: var(--sp-4); - padding: var(--sp-8) var(--sp-6); } -.agent-draft-kicker { - font-size: var(--type-body-6-size); - line-height: var(--type-body-6-line-height); - font-weight: var(--type-body-6-weight); - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-tertiary); - text-align: center; +/* ── Panel ────────────────────────────────────────── */ +.agent-draft-panel { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--sp-3); } -.agent-draft-title { - font-size: var(--type-heading-1-size); - line-height: var(--type-heading-1-line-height); - font-weight: var(--type-heading-1-weight); - text-align: center; +.agent-draft-panel-header { + display: flex; + align-items: center; + gap: var(--sp-2); } -.agent-draft-description { - max-width: 560px; - margin: 0 auto; - text-align: center; +.agent-draft-panel-icon { + width: 24px; + height: 24px; + border-radius: var(--radius-sm); + background: var(--icon-surface-subtle); + display: inline-flex; + align-items: center; + justify-content: center; color: var(--text-secondary); - line-height: 1.7; + flex-shrink: 0; } -.agent-draft-providers { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--sp-4); +.agent-draft-panel-label { + font-family: var(--font-mono); + font-size: var(--type-body-5-size); + font-weight: var(--type-body-5-weight); + color: var(--text-primary); +} + +/* ── Agent button list ────────────────────────────── */ +.agent-draft-panel-list { + display: flex; + flex-direction: column; + gap: var(--sp-2); } .agent-provider-card { height: auto; min-width: 0; - align-items: flex-start; + align-items: center; justify-content: flex-start; - padding: var(--sp-4); - border-radius: var(--radius-xl); + padding: var(--sp-2) var(--sp-3); + border-radius: var(--radius-lg); text-align: left; white-space: normal; } @@ -7347,12 +7363,12 @@ textarea.input { } .agent-provider-card-icon { - width: 36px; - height: 36px; + width: 28px; + height: 28px; display: inline-flex; align-items: center; justify-content: center; - border-radius: var(--radius-lg); + border-radius: var(--radius-md); background: var(--icon-surface-subtle); color: var(--text-primary); flex-shrink: 0; @@ -7374,31 +7390,17 @@ textarea.input { } .agent-provider-card-title { + font-family: var(--font-mono); font-size: var(--type-heading-5-size); line-height: var(--type-heading-5-line-height); font-weight: var(--type-heading-5-weight); color: var(--text-primary); } -.agent-provider-card-meta { +.agent-provider-card-cta { font-size: var(--type-body-6-size); line-height: var(--type-body-6-line-height); font-weight: var(--type-body-6-weight); - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-tertiary); -} - -.agent-provider-card-desc { - color: var(--text-secondary); - line-height: 1.6; -} - -.agent-provider-card-cta { - margin-top: var(--sp-2); - font-size: var(--type-body-3-size); - line-height: var(--type-body-3-line-height); - font-weight: var(--type-body-3-weight); color: var(--text-primary); } @@ -7410,8 +7412,8 @@ textarea.input { } .agent-provider-card-guide { - margin-top: var(--sp-3); - padding-top: var(--sp-3); + margin-top: var(--sp-2); + padding-top: var(--sp-2); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; @@ -7439,14 +7441,56 @@ textarea.input { flex-shrink: 0; } -@container (max-width: 36rem) { - .agent-draft-content { - width: 100%; - padding-inline: var(--sp-4); - } +/* ── Drop zone ────────────────────────────────────── */ +.agent-draft-drop-zone { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--sp-2); + min-width: 150px; + min-height: 100px; + padding: var(--sp-5); + border: 2px dashed var(--border-subtle); + border-radius: var(--radius-lg); + background: + radial-gradient(circle at center, var(--component-rgba-108-182-255-0-04), transparent 60%), + transparent; + transition: border-color 0.15s ease; +} - .agent-draft-providers { - grid-template-columns: 1fr; +.agent-draft-drop-zone-icon { + width: 34px; + height: 34px; + border-radius: var(--radius-md); + background: var(--icon-surface-subtle); + border: 1px solid var(--border-default); + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--text-tertiary); + flex-shrink: 0; +} + +.agent-draft-drop-zone-title { + font-size: var(--type-body-5-size); + font-weight: var(--type-body-5-weight); + color: var(--text-primary); +} + +/* ── Footer ───────────────────────────────────────── */ +.agent-draft-footer { + text-align: center; + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + color: var(--text-tertiary); + padding-top: var(--sp-3); + border-top: 1px solid var(--border-default); +} + +@container (max-width: 36rem) { + .agent-draft-component-row { + flex-direction: column; } } @@ -7709,10 +7753,6 @@ textarea.input { } @media (max-width: 900px) { - .agent-draft-providers { - grid-template-columns: 1fr; - } - .panel-caption, .session-meta { display: none; @@ -15811,26 +15851,13 @@ body.is-dragging-pane .session-action-btn-drag { transparent; } -.agent-draft-content { - width: min(680px, calc(100% - 48px)); - max-width: 100%; - align-items: stretch; - gap: var(--sp-4); - padding: var(--sp-8) var(--sp-6); - border: 1px solid var(--component-mix-border-default-74pct-transparent); - border-radius: calc(var(--radius-xl) + var(--sp-1)); - background: var(--agent-draft-surface); - box-shadow: var(--shadow-lg); - backdrop-filter: var(--material-backdrop-filter); -} - .agent-provider-card { height: auto; min-width: 0; - align-items: flex-start; + align-items: center; justify-content: flex-start; - padding: var(--sp-4); - border-radius: var(--radius-xl); + padding: var(--sp-2) var(--sp-3); + border-radius: var(--radius-lg); text-align: left; white-space: normal; background: var(--agent-provider-card-surface); From fe2ecd13a0c70da464adbcbaff7f5e584d4a6247 Mon Sep 17 00:00:00 2001 From: Spencer Date: Sat, 30 May 2026 08:08:22 +0000 Subject: [PATCH 146/162] fix(web): align draft pane styles with design mockup - Add panel padding and vertical divider between Agent/File Editor panels - Add horizontal divider rule for stacked narrow layout - Remove CTA text from provider buttons (not in design) - Lower responsive breakpoint from 36rem to 28rem so side-by-side layout persists longer - Add border-left rule to base CSS block for consistency --- .../views/shared/draft-launcher.tsx | 3 --- packages/web/src/styles/components.css | 18 +++++++++++++++++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx index 93876a94..713a7f7b 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx @@ -308,9 +308,6 @@ export const DraftLauncher: FC = ({ {provider.title} - - {getProviderCta(provider.id)} - {isBusy ? ( {t("provider.install.status.installing")} diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index 3d45323b..0c309284 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -4090,6 +4090,10 @@ body.is-dragging-pane { flex-direction: row; } +.agent-draft-panel + .agent-draft-panel { + border-left: 1px solid var(--border-default); +} + /* ========== Session Card ========== */ .session-card { display: flex; @@ -7298,6 +7302,11 @@ textarea.input { flex-direction: column; align-items: flex-start; gap: var(--sp-3); + padding: var(--sp-5); +} + +.agent-draft-panel + .agent-draft-panel { + border-left: 1px solid var(--border-default); } .agent-draft-panel-header { @@ -7486,12 +7495,19 @@ textarea.input { color: var(--text-tertiary); padding-top: var(--sp-3); border-top: 1px solid var(--border-default); + margin-top: var(--sp-2); } -@container (max-width: 36rem) { +@container (max-width: 28rem) { .agent-draft-component-row { flex-direction: column; } + + .agent-draft-panel + .agent-draft-panel { + border-left: none; + border-top: 1px solid var(--border-default); + padding-left: var(--sp-5); + } } .session-card { From 0733f35e9fcc28f39392b18fce5361d243b284ab Mon Sep 17 00:00:00 2001 From: Spencer Date: Sat, 30 May 2026 08:08:53 +0000 Subject: [PATCH 147/162] chore(web): prefix unused getProviderCta with underscore --- .../src/features/agent-panes/views/shared/draft-launcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx index 713a7f7b..c7688078 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx @@ -82,7 +82,7 @@ export const DraftLauncher: FC = ({ return Boolean(runtime?.autoInstallSupported && runtime.installReadiness === "ready"); }; - const getProviderCta = (providerId: ProviderId): string => { + const _getProviderCta = (providerId: ProviderId): string => { const state = states[providerId]; if ( state.loading || From a388c2e83fa798674111abb220512b4b3cb03838 Mon Sep 17 00:00:00 2001 From: Spencer Date: Sat, 30 May 2026 11:21:04 +0000 Subject: [PATCH 148/162] fix draft launcher narrow carousel --- .../views/shared/draft-launcher.test.tsx | 30 ++++++++ .../views/shared/draft-launcher.tsx | 55 +++++++++++++- packages/web/src/styles/components.css | 73 ++++++++++++++++++- .../web/src/styles/components.theme.test.ts | 27 +++++-- 4 files changed, 175 insertions(+), 10 deletions(-) diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx index 50be54f4..8a19963e 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx @@ -125,6 +125,36 @@ describe("DraftLauncher", () => { expect(screen.getByText("Select Agent")).toBeInTheDocument(); }); + it("switches draft launcher carousel panels", () => { + const store = createStore(); + + store.set(localeAtom, "en"); + store.set(wsClientAtom, { + sendCommand: vi.fn(), + subscribe: vi.fn(() => () => {}), + } as never); + + const { container } = render( + + + + ); + + const agentButton = screen.getByRole("button", { name: "Agent" }); + const fileButton = screen.getByRole("button", { name: "File Editor" }); + const carouselTrack = container.querySelector(".agent-draft-component-row"); + + expect(agentButton).toHaveAttribute("aria-pressed", "true"); + expect(fileButton).toHaveAttribute("aria-pressed", "false"); + expect(carouselTrack).not.toHaveClass("agent-draft-component-row--file"); + + fireEvent.click(fileButton); + + expect(agentButton).toHaveAttribute("aria-pressed", "false"); + expect(fileButton).toHaveAttribute("aria-pressed", "true"); + expect(carouselTrack).toHaveClass("agent-draft-component-row--file"); + }); + it("renders a draft drop label when pane drag hover is active", () => { const store = createStore(); diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx index c7688078..6e66635c 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx @@ -1,7 +1,7 @@ import type { Session } from "@coder-studio/core"; import { useAtomValue, useSetAtom } from "jotai"; import { ArrowRight, FlipHorizontal, FlipVertical, X } from "lucide-react"; -import { type DragEvent, type FC, useState } from "react"; +import { type DragEvent, type FC, type PointerEvent, useRef, useState } from "react"; import { dispatchCommandAtom } from "../../../../atoms/connection"; import { sessionsAtom } from "../../../../atoms/sessions"; import { Button, IconButton, StatusDot, Tag, ThemedIcon, Tooltip } from "../../../../components/ui"; @@ -46,7 +46,9 @@ export const DraftLauncher: FC = ({ const t = useTranslation(); const dispatch = useAtomValue(dispatchCommandAtom); const setSessions = useSetAtom(sessionsAtom); + const [activePanel, setActivePanel] = useState<"agent" | "file">("agent"); const [isFileDropTarget, setIsFileDropTarget] = useState(false); + const swipeStartXRef = useRef(null); const { states, launch } = useProviderLauncher( dispatch, workspaceId, @@ -189,6 +191,34 @@ export const DraftLauncher: FC = ({ onOpenFile?.(paneId, path); }; + const handleCarouselPointerDown = (event: PointerEvent) => { + if (event.pointerType === "mouse") { + return; + } + + swipeStartXRef.current = event.clientX; + }; + + const handleCarouselPointerUp = (event: PointerEvent) => { + const startX = swipeStartXRef.current; + swipeStartXRef.current = null; + + if (startX === null || event.pointerType === "mouse") { + return; + } + + const deltaX = event.clientX - startX; + if (Math.abs(deltaX) < 48) { + return; + } + + setActivePanel(deltaX < 0 ? "file" : "agent"); + }; + + const handleCarouselPointerCancel = () => { + swipeStartXRef.current = null; + }; + return (
= ({
-
+
{/* Agent panel */}
@@ -384,6 +419,22 @@ export const DraftLauncher: FC = ({
+
+ {[ + { id: "agent" as const, label: "Agent" }, + { id: "file" as const, label: "File Editor" }, + ].map((panel) => ( +
+
点击启动 Agent 或直接拖拽文件到右侧区域打开
diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index 0c309284..5018ba58 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -7279,6 +7279,8 @@ textarea.input { } .agent-draft-content { + width: 100%; + max-width: 100%; align-items: center; justify-content: center; } @@ -7288,12 +7290,47 @@ textarea.input { display: flex; flex-direction: column; gap: var(--sp-2); + width: fit-content; + max-width: 100%; } .agent-draft-component-row { display: flex; flex-direction: row; + align-items: stretch; gap: var(--sp-4); + transition: transform var(--duration-normal) var(--ease-out); +} + +.agent-draft-carousel-dots { + display: none; + justify-content: center; + gap: var(--sp-2); + padding-top: var(--sp-2); +} + +.agent-draft-carousel-dot { + appearance: none; + border: 0; + width: 6px; + height: 6px; + border-radius: var(--radius-full); + background: var(--text-disabled); + padding: 0; + cursor: pointer; + transition: + width var(--duration-fast) var(--ease-out), + background-color var(--duration-fast) var(--ease-out); +} + +.agent-draft-carousel-dot:focus-visible { + outline: 2px solid var(--status-info-fg); + outline-offset: 2px; +} + +.agent-draft-carousel-dot--active { + width: 18px; + background: var(--text-primary); } /* ── Panel ────────────────────────────────────────── */ @@ -7499,15 +7536,47 @@ textarea.input { } @container (max-width: 28rem) { + .agent-draft-component { + width: min(100%, 24rem); + overflow: hidden; + } + .agent-draft-component-row { - flex-direction: column; + width: 200%; + flex-direction: row; + gap: 0; + } + + .agent-draft-component-row--file { + transform: translateX(-50%); + } + + .agent-draft-panel { + flex: 0 0 50%; + width: 50%; + align-items: stretch; + justify-content: center; } .agent-draft-panel + .agent-draft-panel { border-left: none; - border-top: 1px solid var(--border-default); + border-top: none; padding-left: var(--sp-5); } + + .agent-draft-panel-header { + align-self: flex-start; + } + + .agent-draft-panel-list, + .agent-draft-drop-zone, + .agent-provider-card { + width: 100%; + } + + .agent-draft-carousel-dots { + display: flex; + } } .session-card { diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts index 805f3d89..7a581a6a 100644 --- a/packages/web/src/styles/components.theme.test.ts +++ b/packages/web/src/styles/components.theme.test.ts @@ -1814,9 +1814,13 @@ describe("components.css theme-sensitive surfaces", () => { expect(stylesheet).not.toContain("\n.agent-provider-card[disabled] {\n"); }); - it("keeps draft launcher provider cards adaptive inside narrow panes", () => { + it("keeps draft launcher provider cards and carousel adaptive inside narrow panes", () => { const launcher = getLastRuleBlock(".agent-draft-launcher"); const content = getLastRuleBlock(".agent-draft-content"); + const component = getLastRuleBlock(".agent-draft-component"); + const carouselRow = getLastRuleBlock(".agent-draft-component-row"); + const carouselDots = getLastRuleBlock(".agent-draft-carousel-dots"); + const activeCarouselDot = getLastRuleBlock(".agent-draft-carousel-dot--active"); const providerCard = getLastRuleBlock(".agent-provider-card"); const providerBody = getLastRuleBlock(".agent-provider-card-body"); const providerArrow = getLastRuleBlock(".agent-provider-card-arrow"); @@ -1825,9 +1829,22 @@ describe("components.css theme-sensitive surfaces", () => { const providerIcon = getLastRuleBlock(".agent-provider-card-icon"); expect(launcher).toContain("container-type: inline-size"); + expect(content).toContain("width: 100%"); expect(content).toContain("max-width: 100%"); - expect(content).toContain("background: var(--agent-draft-surface)"); - expect(content).toContain("backdrop-filter: var(--material-backdrop-filter)"); + expect(component).toContain("max-width: 100%"); + expect(carouselRow).toContain("width: 200%"); + expect(carouselRow).toContain("flex-direction: row"); + expect(carouselRow).toContain("gap: 0"); + expect(getLastRuleBlock(".agent-draft-component-row--file")).toContain( + "transform: translateX(-50%)" + ); + expect( + getRuleBlocksFrom(stylesheet, ".agent-draft-carousel-dots").some((block) => + block.includes("display: none") + ) + ).toBe(true); + expect(carouselDots).toContain("display: flex"); + expect(activeCarouselDot).toContain("width: 18px"); expect(providerCard).toContain("background: var(--agent-provider-card-surface)"); expect(providerCard).toContain("min-width: 0"); expect(providerBody).toContain("width: 100%"); @@ -1838,9 +1855,7 @@ describe("components.css theme-sensitive surfaces", () => { expect(codexCard).toContain("background: var(--state-info-bg)"); expect(codexCard).toContain("border-color: var(--state-info-border)"); expect(providerIcon).toContain("background: var(--icon-surface-subtle)"); - expect(stylesheet).toMatch( - /@container\s*\(max-width:\s*36rem\)\s*\{[\s\S]*?\.agent-draft-providers\s*\{[\s\S]*?grid-template-columns:\s*1fr;[\s\S]*?\}/ - ); + expect(carouselRow).not.toContain("flex-direction: column"); }); it("keeps legacy agent pane chrome aligned to shared density and state tokens", () => { From d308cf92cd6dfdca9e74b8d57c69d560dde2fdd7 Mon Sep 17 00:00:00 2001 From: Spencer Date: Sat, 30 May 2026 13:29:13 +0000 Subject: [PATCH 149/162] feat: persist open editor state on server --- packages/core/src/domain/types.ts | 2 + .../src/__tests__/workspace-commands.test.ts | 45 +++++ packages/server/src/commands/workspace.ts | 2 + packages/web/src/app/providers.test.tsx | 41 ++++- packages/web/src/app/providers.tsx | 21 ++- .../web/src/features/diagnostics/page.tsx | 2 + .../workspace/actions/open-editor-state.ts | 156 ++++++++++++++++++ .../workspace/actions/open-editors-close.ts | 28 +++- .../actions/use-file-actions.test.tsx | 156 ++++++++++++++++-- .../workspace/actions/use-file-actions.ts | 60 ++++++- .../actions/use-open-editors-actions.ts | 32 ++++ .../actions/use-open-workspace-file.test.tsx | 55 +++++- .../actions/use-open-workspace-file.ts | 22 ++- .../actions/use-workspace-launch-actions.ts | 6 +- .../use-workspace-ui-state-persistence.ts | 25 ++- .../use-worktree-management-actions.ts | 6 +- .../web/src/features/workspace/atoms/files.ts | 5 + .../shared/open-editors-section.test.tsx | 35 +++- .../views/shared/open-editors-section.tsx | 15 +- .../shared/workspace-launch-modal.test.tsx | 14 ++ packages/web/src/hooks/use-bootstrap.test.tsx | 85 ++++++++++ packages/web/src/hooks/use-bootstrap.ts | 16 +- 22 files changed, 787 insertions(+), 42 deletions(-) create mode 100644 packages/web/src/features/workspace/actions/open-editor-state.ts create mode 100644 packages/web/src/hooks/use-bootstrap.test.tsx diff --git a/packages/core/src/domain/types.ts b/packages/core/src/domain/types.ts index 47dcf57a..bfa0e7e9 100644 --- a/packages/core/src/domain/types.ts +++ b/packages/core/src/domain/types.ts @@ -72,6 +72,8 @@ export interface UiState { activeSessionId?: string; paneLayout?: WorkspacePaneNode; fileTreeExpandedDirs?: string[]; + openEditorPaths?: string[]; + activeEditorPath?: string | null; } export interface WorkspaceLastViewedTarget { diff --git a/packages/server/src/__tests__/workspace-commands.test.ts b/packages/server/src/__tests__/workspace-commands.test.ts index 9557d60f..90671663 100644 --- a/packages/server/src/__tests__/workspace-commands.test.ts +++ b/packages/server/src/__tests__/workspace-commands.test.ts @@ -547,6 +547,51 @@ describe("Workspace Commands", () => { .fileTreeExpandedDirs ).toEqual(["packages", "packages/web"]); }); + + it("persists open editor paths and the active editor into workspace ui state", async () => { + const dir = join(tmpdir(), `workspace-open-editors-test-${Date.now()}`); + await mkdir(dir); + + const openResult = await dispatch( + { + kind: "command", + id: "open-workspace-open-editors", + op: "workspace.open", + args: { path: dir }, + }, + ctx + ); + + expect(openResult.ok).toBe(true); + const workspaceId = (openResult.data as { id: string }).id; + + const result = await dispatch( + { + kind: "command", + id: "set-ui-state-open-editors", + op: "workspace.uiState.set", + args: { + workspaceId, + uiState: { + leftPanelWidth: 320, + bottomPanelHeight: 210, + focusMode: false, + openEditorPaths: ["README.md", "src/app.tsx"], + activeEditorPath: "src/app.tsx", + }, + }, + }, + ctx + ); + + expect(result.ok).toBe(true); + expect( + (result.data as { uiState: { openEditorPaths?: string[] } }).uiState.openEditorPaths + ).toEqual(["README.md", "src/app.tsx"]); + expect( + (result.data as { uiState: { activeEditorPath?: string | null } }).uiState.activeEditorPath + ).toBe("src/app.tsx"); + }); }); describe("workspace.lastViewedTarget", () => { diff --git a/packages/server/src/commands/workspace.ts b/packages/server/src/commands/workspace.ts index abfc2230..27ee8ec7 100644 --- a/packages/server/src/commands/workspace.ts +++ b/packages/server/src/commands/workspace.ts @@ -200,6 +200,8 @@ registerCommand( activeSessionId: z.string().optional(), fileTreeExpandedDirs: z.array(z.string()).optional(), paneLayout: workspacePaneNodeSchema.optional(), + openEditorPaths: z.array(z.string()).optional(), + activeEditorPath: z.string().nullable().optional(), }), }), async (args, ctx) => { diff --git a/packages/web/src/app/providers.test.tsx b/packages/web/src/app/providers.test.tsx index 2986c076..de2d44df 100644 --- a/packages/web/src/app/providers.test.tsx +++ b/packages/web/src/app/providers.test.tsx @@ -13,7 +13,11 @@ import { paneLayoutAtomFamily } from "../features/agent-panes/atoms/pane-layout" import { supervisorsAtom } from "../features/supervisor/atoms"; import { terminalMetaAtomFamily } from "../features/terminal-panel/atoms"; import { updateStateAtom } from "../features/updates/atoms"; -import { fileTreeStaleAtomFamily } from "../features/workspace/atoms"; +import { + activeFilePathAtomFamily, + fileTreeStaleAtomFamily, + openEditorPathsAtomFamily, +} from "../features/workspace/atoms"; import { resetAppProvidersSingletonsForTests, routeEventToAtom } from "./providers"; describe("routeEventToAtom", () => { @@ -203,6 +207,41 @@ describe("routeEventToAtom", () => { }); }); + it("projects workspace open editor metadata into editor atoms", () => { + const store = createStore(); + + routeEventToAtom( + "workspace.ws-1.meta", + { + path: "/tmp/ws-1", + targetRuntime: "native", + uiState: { + leftPanelWidth: 280, + bottomPanelHeight: 200, + focusMode: false, + openEditorPaths: ["src/app.tsx", "README.md", "src/app.tsx", ""], + activeEditorPath: "src/app.tsx", + }, + }, + store + ); + + expect(store.get(openEditorPathsAtomFamily("ws-1"))).toEqual(["src/app.tsx", "README.md"]); + expect(store.get(activeFilePathAtomFamily("ws-1"))).toBe("src/app.tsx"); + }); + + it("keeps local open editor metadata when a workspace meta patch omits editor fields", () => { + const store = createStore(); + store.set(openEditorPathsAtomFamily("ws-1"), ["src/current.ts"]); + store.set(activeFilePathAtomFamily("ws-1"), "src/current.ts"); + + routeEventToAtom("workspace.ws-1.meta", { path: "/tmp/ws-1", targetRuntime: "native" }, store); + routeEventToAtom("workspace.ws-1.meta", { name: "Renamed workspace" }, store); + + expect(store.get(openEditorPathsAtomFamily("ws-1"))).toEqual(["src/current.ts"]); + expect(store.get(activeFilePathAtomFamily("ws-1"))).toBe("src/current.ts"); + }); + it("marks the file tree stale when an fs.dirty event arrives", () => { const store = createStore(); diff --git a/packages/web/src/app/providers.tsx b/packages/web/src/app/providers.tsx index 138a11c4..60c9a287 100644 --- a/packages/web/src/app/providers.tsx +++ b/packages/web/src/app/providers.tsx @@ -72,6 +72,10 @@ import { setGlobalRecoveryCoordinator, } from "../features/terminal-panel/recovery-singleton"; import { updateStateAtom } from "../features/updates/atoms"; +import { + hydrateWorkspaceEditorState, + normalizeWorkspaceEditorUiState, +} from "../features/workspace/actions/open-editor-state"; import { editorRefreshTokenAtomFamily, expandedDirsAtomFamily, @@ -1274,18 +1278,27 @@ export function routeEventToAtom(topic: string, payload: unknown, store: Store): return; } + const normalizedPatch: Partial = patch.uiState + ? { + ...patch, + uiState: normalizeWorkspaceEditorUiState(patch.uiState), + } + : patch; + store.set(workspacesAtom, (prev: Record) => ({ ...prev, [workspaceId]: { ...prev[workspaceId], - ...patch, + ...normalizedPatch, id: workspaceId, } as Workspace, })); - const paneLayout = patch.uiState?.paneLayout; - if (paneLayout) { - store.set(paneLayoutAtomFamily(workspaceId), normalizePaneLayout(paneLayout)); + const paneLayout = normalizedPatch.uiState?.paneLayout; + const normalizedPaneLayout = paneLayout ? normalizePaneLayout(paneLayout) : null; + if (normalizedPaneLayout) { + store.set(paneLayoutAtomFamily(workspaceId), normalizedPaneLayout); } + hydrateWorkspaceEditorState(store, workspaceId, normalizedPatch.uiState); store.set(workspaceOrderAtom, (prev: string[]) => { if (prev.includes(workspaceId)) { return prev; diff --git a/packages/web/src/features/diagnostics/page.tsx b/packages/web/src/features/diagnostics/page.tsx index 9989fde1..7c402fc9 100644 --- a/packages/web/src/features/diagnostics/page.tsx +++ b/packages/web/src/features/diagnostics/page.tsx @@ -31,6 +31,7 @@ import { import { assignSessionToPane } from "../agent-panes/pane-layout-tree"; import { MobilePageHeader } from "../shared/components/mobile-page-header"; import { PageHeader } from "../shared/components/page-header"; +import { hydrateWorkspaceEditorState } from "../workspace/actions/open-editor-state"; import { usePersistWorkspaceLastViewedTarget } from "../workspace/actions/use-persist-workspace-last-viewed-target"; import { useWorkspaceUiStatePersistence } from "../workspace/actions/use-workspace-ui-state-persistence"; import { useSystemDependencyInstaller } from "./actions/use-system-dependency-installer"; @@ -338,6 +339,7 @@ export function DiagnosticsPage() { ...prev, [result.data!.id]: result.data!, })); + hydrateWorkspaceEditorState(store, result.data.id, result.data.uiState); setWorkspaceOrder((prev) => { if (prev.includes(result.data!.id)) { return prev; diff --git a/packages/web/src/features/workspace/actions/open-editor-state.ts b/packages/web/src/features/workspace/actions/open-editor-state.ts new file mode 100644 index 00000000..6775039f --- /dev/null +++ b/packages/web/src/features/workspace/actions/open-editor-state.ts @@ -0,0 +1,156 @@ +import type { Workspace } from "@coder-studio/core"; +import type { Store } from "jotai/vanilla/store"; +import { activeFilePathAtomFamily, openEditorPathsAtomFamily } from "../atoms"; + +function hasOwnProperty(value: T, key: PropertyKey): boolean { + return Object.prototype.hasOwnProperty.call(value, key); +} + +export function normalizeOpenEditorPaths(value: unknown): string[] { + if (!Array.isArray(value)) { + return []; + } + + const seen = new Set(); + const next: string[] = []; + + for (const entry of value) { + if (typeof entry !== "string" || entry.trim().length === 0 || seen.has(entry)) { + continue; + } + + seen.add(entry); + next.push(entry); + } + + return next; +} + +export function normalizeActiveEditorPath(value: unknown): string | null { + if (typeof value !== "string" || value.trim().length === 0) { + return null; + } + + return value; +} + +export function mergeOpenEditorPaths(...pathLists: Array | undefined>): string[] { + return normalizeOpenEditorPaths(pathLists.flatMap((paths) => (paths ? Array.from(paths) : []))); +} + +export function appendOpenEditorPath(paths: Iterable, path: string): string[] { + return mergeOpenEditorPaths(paths, [path]); +} + +export function removeOpenEditorPaths( + paths: Iterable, + removedPaths: Iterable +): string[] { + const removed = new Set(removedPaths); + return normalizeOpenEditorPaths(Array.from(paths)).filter((path) => !removed.has(path)); +} + +export function rewriteDescendantEditorPath( + path: string, + fromPath: string, + toPath: string +): string { + if (path === fromPath) { + return toPath; + } + + if (path.startsWith(`${fromPath}/`)) { + return `${toPath}${path.slice(fromPath.length)}`; + } + + return path; +} + +export function rewriteOpenEditorPaths( + paths: Iterable, + fromPath: string, + toPath: string +): string[] { + return normalizeOpenEditorPaths( + Array.from(paths).map((path) => rewriteDescendantEditorPath(path, fromPath, toPath)) + ); +} + +export function normalizeWorkspaceEditorUiStatePatch( + uiState: Partial> +): { openEditorPaths?: string[]; activeEditorPath?: string | null } | null { + const hasOpenEditorPaths = hasOwnProperty(uiState, "openEditorPaths"); + const hasActiveEditorPath = hasOwnProperty(uiState, "activeEditorPath"); + + if (!hasOpenEditorPaths && !hasActiveEditorPath) { + return null; + } + + const next: { openEditorPaths?: string[]; activeEditorPath?: string | null } = {}; + + if (hasOpenEditorPaths) { + const openEditorPaths = normalizeOpenEditorPaths(uiState.openEditorPaths); + next.openEditorPaths = openEditorPaths; + + if (hasActiveEditorPath) { + const activeEditorPath = normalizeActiveEditorPath(uiState.activeEditorPath); + next.activeEditorPath = activeEditorPath; + + if (activeEditorPath && !openEditorPaths.includes(activeEditorPath)) { + next.openEditorPaths = [...openEditorPaths, activeEditorPath]; + } + } + } else if (hasActiveEditorPath) { + next.activeEditorPath = normalizeActiveEditorPath(uiState.activeEditorPath); + } + + return next; +} + +export function normalizeWorkspaceEditorUiState( + uiState: Workspace["uiState"] +): Workspace["uiState"] { + const normalizedPatch = normalizeWorkspaceEditorUiStatePatch(uiState); + if (!normalizedPatch) { + return uiState; + } + + return { + ...uiState, + ...(hasOwnProperty(normalizedPatch, "openEditorPaths") + ? { openEditorPaths: normalizedPatch.openEditorPaths } + : {}), + ...(hasOwnProperty(normalizedPatch, "activeEditorPath") + ? { activeEditorPath: normalizedPatch.activeEditorPath } + : {}), + }; +} + +export function hydrateWorkspaceEditorState( + store: Store, + workspaceId: string, + uiState?: Partial | null +): void { + if (!uiState) { + return; + } + + const hasOpenEditorPaths = hasOwnProperty(uiState, "openEditorPaths"); + const hasActiveEditorPath = hasOwnProperty(uiState, "activeEditorPath"); + if (!hasOpenEditorPaths && !hasActiveEditorPath) { + return; + } + + const normalizedPatch = normalizeWorkspaceEditorUiStatePatch(uiState); + if (!normalizedPatch) { + return; + } + + if (hasOpenEditorPaths) { + store.set(openEditorPathsAtomFamily(workspaceId), normalizedPatch.openEditorPaths ?? []); + } + + if (hasActiveEditorPath) { + store.set(activeFilePathAtomFamily(workspaceId), normalizedPatch.activeEditorPath ?? null); + } +} diff --git a/packages/web/src/features/workspace/actions/open-editors-close.ts b/packages/web/src/features/workspace/actions/open-editors-close.ts index 2f17610a..db0df85a 100644 --- a/packages/web/src/features/workspace/actions/open-editors-close.ts +++ b/packages/web/src/features/workspace/actions/open-editors-close.ts @@ -1,11 +1,22 @@ import type { OpenFile } from "../atoms"; +import { mergeOpenEditorPaths, normalizeOpenEditorPaths } from "./open-editor-state"; -export function orderOpenEditorPaths(openFiles: Record): string[] { - return Object.keys(openFiles).sort(); +function isPathIterable( + source: Record | Iterable +): source is Iterable { + return typeof (source as Iterable)[Symbol.iterator] === "function"; +} + +export function orderOpenEditorPaths( + source: Record | Iterable +): string[] { + const paths = isPathIterable(source) ? Array.from(source) : Object.keys(source); + return normalizeOpenEditorPaths(paths).sort(); } interface ResolveOpenEditorsCloseInput { openFiles: Record; + openEditorPaths?: string[]; activeFilePath: string | null; pendingActiveFilePath?: string | null; targetPath?: string; @@ -24,16 +35,19 @@ export function resolveOpenEditorsClose( ): ResolveOpenEditorsCloseResult { const { openFiles, + openEditorPaths = [], activeFilePath, pendingActiveFilePath = null, targetPath, closeAll = false, } = input; - const orderedPaths = orderOpenEditorPaths(openFiles); - const resolvedOrderedPaths = - pendingActiveFilePath && !orderedPaths.includes(pendingActiveFilePath) - ? [...orderedPaths, pendingActiveFilePath].sort() - : orderedPaths; + const resolvedOrderedPaths = orderOpenEditorPaths( + mergeOpenEditorPaths( + openEditorPaths, + Object.keys(openFiles), + pendingActiveFilePath ? [pendingActiveFilePath] : undefined + ) + ); if (closeAll) { return { diff --git a/packages/web/src/features/workspace/actions/use-file-actions.test.tsx b/packages/web/src/features/workspace/actions/use-file-actions.test.tsx index a59bf268..ea0ed205 100644 --- a/packages/web/src/features/workspace/actions/use-file-actions.test.tsx +++ b/packages/web/src/features/workspace/actions/use-file-actions.test.tsx @@ -6,6 +6,7 @@ import type { ReactNode } from "react"; import { describe, expect, it, vi } from "vitest"; import { localeAtom } from "../../../atoms/app-ui"; import { wsClientAtom } from "../../../atoms/connection"; +import { workspacesAtom } from "../../../atoms/workspaces"; import { activeEditorPaneIdAtomFamily, focusedEditorPaneIdAtomFamily, @@ -17,6 +18,7 @@ import { expandedDirsAtomFamily, fileTreeAtomFamily, loadedDirsAtomFamily, + openEditorPathsAtomFamily, openFilesAtomFamily, } from "../atoms"; import { useFileActions } from "./use-file-actions"; @@ -27,17 +29,51 @@ function wrapperFor(store: ReturnType) { }; } +function seedWorkspace(store: ReturnType) { + store.set(workspacesAtom, { + "ws-test": { + id: "ws-test", + path: "/workspace", + targetRuntime: "native", + openedAt: 1, + lastActiveAt: 1, + uiState: { + leftPanelWidth: 280, + bottomPanelHeight: 200, + focusMode: false, + }, + }, + } as never); +} + describe("useFileActions rename behavior", () => { it("renames the active file and rewrites the open-file map key", async () => { - const sendCommand = vi - .fn() - .mockResolvedValueOnce(undefined) - .mockResolvedValueOnce({ path: "/workspace", children: [] }); - const store = createStore(); + const sendCommand = vi.fn( + async (op: string, args?: { workspaceId?: string; uiState?: Record }) => { + if (op === "file.rename") { + return undefined; + } + + if (op === "workspace.uiState.set") { + return { + ...(store.get(workspacesAtom)[args?.workspaceId ?? "ws-test"] as never), + uiState: args?.uiState, + }; + } + + if (op === "file.readTree") { + return { path: "/workspace", children: [] }; + } + + throw new Error(`Unexpected command: ${op}`); + } + ); store.set(localeAtom, "en"); store.set(wsClientAtom, { sendCommand } as never); + seedWorkspace(store); store.set(activeFilePathAtomFamily("ws-test"), "src/app.tsx"); + store.set(openEditorPathsAtomFamily("ws-test"), ["src/app.tsx", "README.md"]); store.set(openFilesAtomFamily("ws-test"), { "src/app.tsx": { kind: "text", @@ -77,23 +113,45 @@ describe("useFileActions rename behavior", () => { undefined ); expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("src/main.tsx"); + expect(store.get(openEditorPathsAtomFamily("ws-test"))).toEqual(["src/main.tsx", "README.md"]); expect(store.get(openFilesAtomFamily("ws-test"))).toEqual({ "src/main.tsx": expect.objectContaining({ path: "src/main.tsx", }), }); + expect(store.get(workspacesAtom)["ws-test"]?.uiState.openEditorPaths).toEqual([ + "src/main.tsx", + "README.md", + ]); }); it("rewrites descendant editor paths when renaming a directory", async () => { - const sendCommand = vi - .fn() - .mockResolvedValueOnce(undefined) - .mockResolvedValueOnce({ path: "/workspace", children: [] }); - const store = createStore(); + const sendCommand = vi.fn( + async (op: string, args?: { workspaceId?: string; uiState?: Record }) => { + if (op === "file.rename") { + return undefined; + } + + if (op === "workspace.uiState.set") { + return { + ...(store.get(workspacesAtom)[args?.workspaceId ?? "ws-test"] as never), + uiState: args?.uiState, + }; + } + + if (op === "file.readTree") { + return { path: "/workspace", children: [] }; + } + + throw new Error(`Unexpected command: ${op}`); + } + ); store.set(localeAtom, "en"); store.set(wsClientAtom, { sendCommand } as never); + seedWorkspace(store); store.set(activeFilePathAtomFamily("ws-test"), "src/nested/app.tsx"); + store.set(openEditorPathsAtomFamily("ws-test"), ["src/nested/app.tsx", "README.md"]); store.set(openFilesAtomFamily("ws-test"), { "src/nested/app.tsx": { kind: "text", @@ -123,11 +181,19 @@ describe("useFileActions rename behavior", () => { }); expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("src/renamed/app.tsx"); + expect(store.get(openEditorPathsAtomFamily("ws-test"))).toEqual([ + "src/renamed/app.tsx", + "README.md", + ]); expect(store.get(openFilesAtomFamily("ws-test"))).toEqual({ "src/renamed/app.tsx": expect.objectContaining({ path: "src/renamed/app.tsx", }), }); + expect(store.get(workspacesAtom)["ws-test"]?.uiState.openEditorPaths).toEqual([ + "src/renamed/app.tsx", + "README.md", + ]); }); it("rejects blank names and names containing path separators before dispatch", async () => { @@ -311,4 +377,74 @@ describe("useFileActions rename behavior", () => { expect(Array.from(store.get(expandedDirsAtomFamily("ws-test")) ?? [])).toEqual([]); }); + + it("removes deleted editor paths from the persisted open editor list", async () => { + const store = createStore(); + const sendCommand = vi.fn( + async (op: string, args?: { workspaceId?: string; uiState?: Record }) => { + if (op === "file.delete") { + return undefined; + } + + if (op === "workspace.uiState.set") { + return { + ...(store.get(workspacesAtom)[args?.workspaceId ?? "ws-test"] as never), + uiState: args?.uiState, + }; + } + + if (op === "file.readTree") { + return { path: "/workspace", children: [] }; + } + + throw new Error(`Unexpected command: ${op}`); + } + ); + + store.set(localeAtom, "en"); + store.set(wsClientAtom, { sendCommand } as never); + seedWorkspace(store); + store.set(fileTreeAtomFamily("ws-test"), new Map([[".", []]])); + store.set(activeFilePathAtomFamily("ws-test"), "src/app.tsx"); + store.set(openEditorPathsAtomFamily("ws-test"), ["src/app.tsx", "README.md"]); + store.set(openFilesAtomFamily("ws-test"), { + "src/app.tsx": { + kind: "text", + path: "src/app.tsx", + content: "export {};", + savedContent: "export {};", + baseHash: "hash-3", + isDirty: false, + }, + "README.md": { + kind: "text", + path: "README.md", + content: "# README", + savedContent: "# README", + baseHash: "hash-4", + isDirty: false, + }, + }); + + const { result } = renderHook(() => useFileActions({ workspaceId: "ws-test" }), { + wrapper: wrapperFor(store), + }); + + act(() => { + result.current.requestDelete({ + path: "src/app.tsx", + name: "app.tsx", + error: null, + }); + }); + + await act(async () => { + await result.current.confirmDelete(); + }); + + expect(store.get(openEditorPathsAtomFamily("ws-test"))).toEqual(["README.md"]); + expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull(); + expect(store.get(workspacesAtom)["ws-test"]?.uiState.openEditorPaths).toEqual(["README.md"]); + expect(store.get(workspacesAtom)["ws-test"]?.uiState.activeEditorPath).toBeNull(); + }); }); diff --git a/packages/web/src/features/workspace/actions/use-file-actions.ts b/packages/web/src/features/workspace/actions/use-file-actions.ts index 242efccd..7b97bfd4 100644 --- a/packages/web/src/features/workspace/actions/use-file-actions.ts +++ b/packages/web/src/features/workspace/actions/use-file-actions.ts @@ -10,6 +10,7 @@ import { fileTreeStaleAtomFamily, loadedDirsAtomFamily, type OpenFile, + openEditorPathsAtomFamily, openFilesAtomFamily, } from "../atoms"; import { @@ -17,6 +18,11 @@ import { applyRootTreeRefresh, collectRefreshTargets, } from "./file-tree-refresh"; +import { + mergeOpenEditorPaths, + removeOpenEditorPaths, + rewriteOpenEditorPaths, +} from "./open-editor-state"; import { useOpenWorkspaceFile } from "./use-open-workspace-file"; import { useWorkspaceUiStatePersistence } from "./use-workspace-ui-state-persistence"; @@ -136,11 +142,14 @@ export function useFileActions({ const fileTree = useAtomValue(fileTreeAtomFamily(workspaceId)); const fileTreeStale = useAtomValue(fileTreeStaleAtomFamily(workspaceId)); const activeFilePath = useAtomValue(activeFilePathAtomFamily(workspaceId)); + const openEditorPaths = useAtomValue(openEditorPathsAtomFamily(workspaceId)); + const openFiles = useAtomValue(openFilesAtomFamily(workspaceId)); const expandedDirs = useAtomValue(expandedDirsAtomFamily(workspaceId)); const dispatch = useAtomValue(dispatchCommandAtom); const setFileTree = useSetAtom(fileTreeAtomFamily(workspaceId)); const setFileTreeStale = useSetAtom(fileTreeStaleAtomFamily(workspaceId)); const setActiveFilePath = useSetAtom(activeFilePathAtomFamily(workspaceId)); + const setOpenEditorPaths = useSetAtom(openEditorPathsAtomFamily(workspaceId)); const setOpenFiles = useSetAtom(openFilesAtomFamily(workspaceId)); const setExpandedDirs = useSetAtom(expandedDirsAtomFamily(workspaceId)); const { openWorkspaceFile } = useOpenWorkspaceFile(workspaceId); @@ -482,13 +491,38 @@ export function useFileActions({ return; } - setActiveFilePath((current) => - current ? rewriteDescendantPath(current, renameDialog.fromPath, toPath) : current + const nextActiveFilePath = activeFilePath + ? rewriteDescendantPath(activeFilePath, renameDialog.fromPath, toPath) + : activeFilePath; + const nextOpenEditorPaths = rewriteOpenEditorPaths( + mergeOpenEditorPaths(openEditorPaths, Object.keys(openFiles)), + renameDialog.fromPath, + toPath ); + + setActiveFilePath(nextActiveFilePath); + setOpenEditorPaths(nextOpenEditorPaths); setOpenFiles((current) => rewriteOpenFiles(current, renameDialog.fromPath, toPath)); + void persistUiState({ + openEditorPaths: nextOpenEditorPaths, + activeEditorPath: nextActiveFilePath, + }); await loadFileTree(); setRenameDialog(null); - }, [dispatch, loadFileTree, renameDialog, setActiveFilePath, setOpenFiles, t, workspaceId]); + }, [ + activeFilePath, + dispatch, + loadFileTree, + openEditorPaths, + openFiles, + persistUiState, + renameDialog, + setActiveFilePath, + setOpenEditorPaths, + setOpenFiles, + t, + workspaceId, + ]); const cancelDelete = useCallback(() => { setPendingDelete(null); @@ -516,10 +550,18 @@ export function useFileActions({ return; } - if (activeFilePath === pendingDelete.path) { - setActiveFilePath(null); + const nextActiveFilePath = activeFilePath === pendingDelete.path ? null : activeFilePath; + const nextOpenEditorPaths = removeOpenEditorPaths( + mergeOpenEditorPaths(openEditorPaths, Object.keys(openFiles)), + [pendingDelete.path] + ); + + if (activeFilePath !== nextActiveFilePath) { + setActiveFilePath(nextActiveFilePath); } + setOpenEditorPaths(nextOpenEditorPaths); + setOpenFiles((prev) => { if (!(pendingDelete.path in prev)) { return prev; @@ -529,6 +571,10 @@ export function useFileActions({ delete next[pendingDelete.path]; return next; }); + void persistUiState({ + openEditorPaths: nextOpenEditorPaths, + activeEditorPath: nextActiveFilePath, + }); await loadFileTree(); setPendingDelete(null); }, [ @@ -536,7 +582,11 @@ export function useFileActions({ dispatch, workspaceId, activeFilePath, + openEditorPaths, + openFiles, + persistUiState, setActiveFilePath, + setOpenEditorPaths, setOpenFiles, loadFileTree, t, diff --git a/packages/web/src/features/workspace/actions/use-open-editors-actions.ts b/packages/web/src/features/workspace/actions/use-open-editors-actions.ts index f6dd8efe..f2a6b2f9 100644 --- a/packages/web/src/features/workspace/actions/use-open-editors-actions.ts +++ b/packages/web/src/features/workspace/actions/use-open-editors-actions.ts @@ -13,9 +13,12 @@ import { type GitDiffPreview, gitDiffPreviewAtomFamily, gitDiffPreviewDismissedAtomFamily, + openEditorPathsAtomFamily, openFilesAtomFamily, } from "../atoms"; +import { mergeOpenEditorPaths, removeOpenEditorPaths } from "./open-editor-state"; import { resolveOpenEditorsClose } from "./open-editors-close"; +import { useWorkspaceUiStatePersistence } from "./use-workspace-ui-state-persistence"; interface UseOpenEditorsActionsOptions { workspaceRootPath?: string; @@ -46,10 +49,12 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit const workspace = useAtomValue(workspaceByIdAtomFamily(workspaceId)); const workspaceRootPath = options?.workspaceRootPath ?? workspace?.path; const [activeFilePath, setActiveFilePath] = useAtom(activeFilePathAtomFamily(workspaceId)); + const [openEditorPaths, setOpenEditorPaths] = useAtom(openEditorPathsAtomFamily(workspaceId)); const [openFiles, setOpenFiles] = useAtom(openFilesAtomFamily(workspaceId)); const [diffPreview, setDiffPreview] = useAtom(gitDiffPreviewAtomFamily(workspaceId)); const setDiffPreviewDismissed = useSetAtom(gitDiffPreviewDismissedAtomFamily(workspaceId)); const [, setEditorMode] = useAtom(editorModeAtomFamily(workspaceId)); + const { persistUiState } = useWorkspaceUiStatePersistence(workspaceId); const closePath = useCallback( (targetPath?: string) => { @@ -57,6 +62,7 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit activeFilePath && !(activeFilePath in openFiles) ? activeFilePath : null; const resolution = resolveOpenEditorsClose({ openFiles, + openEditorPaths, activeFilePath, pendingActiveFilePath: transientActiveFilePath, targetPath, @@ -86,10 +92,24 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit } } + const nextOpenEditorPaths = removeOpenEditorPaths( + mergeOpenEditorPaths( + openEditorPaths, + Object.keys(openFiles), + transientActiveFilePath ? [transientActiveFilePath] : undefined + ), + resolution.removedPaths + ); + + setOpenEditorPaths(nextOpenEditorPaths); setActiveFilePath(resolution.nextActiveFilePath); if (resolution.nextActiveFilePath !== activeFilePath || resolution.shouldExitEditor) { setEditorMode("edit"); } + void persistUiState({ + openEditorPaths: nextOpenEditorPaths, + activeEditorPath: resolution.nextActiveFilePath, + }); const shouldDismissPreview = (diffPreview?.kind === "worktree-file-diff" || @@ -108,12 +128,15 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit [ activeFilePath, diffPreview, + openEditorPaths, openFiles, setActiveFilePath, setDiffPreview, setDiffPreviewDismissed, setEditorMode, + setOpenEditorPaths, setOpenFiles, + persistUiState, workspaceId, workspaceRootPath, ] @@ -124,6 +147,7 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit activeFilePath && !(activeFilePath in openFiles) ? activeFilePath : null; const resolution = resolveOpenEditorsClose({ openFiles, + openEditorPaths, activeFilePath, pendingActiveFilePath: transientActiveFilePath, closeAll: true, @@ -139,6 +163,7 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit cancelAllPendingEditorLoads(workspaceId); setOpenFiles({}); + setOpenEditorPaths([]); for (const path of resolution.removedPaths) { const removedFile = openFiles[path]; @@ -149,6 +174,10 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit setActiveFilePath(null); setEditorMode("edit"); + void persistUiState({ + openEditorPaths: [], + activeEditorPath: null, + }); const shouldDismissPreview = (diffPreview?.kind === "worktree-file-diff" || diffPreview?.kind === "search-replace-file-diff") && @@ -168,12 +197,15 @@ export function useOpenEditorsActions(workspaceId: string, options?: UseOpenEdit }, [ activeFilePath, diffPreview, + openEditorPaths, openFiles, setActiveFilePath, setDiffPreview, setDiffPreviewDismissed, setEditorMode, + setOpenEditorPaths, setOpenFiles, + persistUiState, workspaceId, workspaceRootPath, ]); diff --git a/packages/web/src/features/workspace/actions/use-open-workspace-file.test.tsx b/packages/web/src/features/workspace/actions/use-open-workspace-file.test.tsx index 1024a413..39b64c4f 100644 --- a/packages/web/src/features/workspace/actions/use-open-workspace-file.test.tsx +++ b/packages/web/src/features/workspace/actions/use-open-workspace-file.test.tsx @@ -3,7 +3,8 @@ import { act, renderHook } from "@testing-library/react"; import { createStore, Provider } from "jotai"; import type { ReactNode } from "react"; -import { describe, expect, it } from "vitest"; +import { describe, expect, it, vi } from "vitest"; +import { wsClientAtom } from "../../../atoms/connection"; import { workspacesAtom } from "../../../atoms/workspaces"; import { activeEditorPaneIdAtomFamily, @@ -11,7 +12,7 @@ import { } from "../../agent-panes/atoms/editor-panes"; import { paneLayoutAtomFamily } from "../../agent-panes/atoms/pane-layout"; import { pendingEditorNavigationAtomFamily } from "../../code-editor/atoms"; -import { activeFilePathAtomFamily } from "../atoms"; +import { activeFilePathAtomFamily, openEditorPathsAtomFamily } from "../atoms"; import { useOpenWorkspaceFile } from "./use-open-workspace-file"; function wrapperFor(store: ReturnType) { @@ -203,4 +204,54 @@ describe("useOpenWorkspaceFile", () => { expect(store.get(focusedEditorPaneIdAtomFamily("ws-test"))).toBe("left"); expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("src/reused.ts"); }); + + it("persists the opened path and active editor path", async () => { + const sendCommand = vi.fn().mockResolvedValue({ + id: "ws-test", + path: "/workspace", + targetRuntime: "native", + openedAt: 1, + lastActiveAt: 1, + uiState: { + leftPanelWidth: 280, + bottomPanelHeight: 200, + focusMode: false, + }, + }); + + const store = createStore(); + seedWorkspace(store); + store.set(wsClientAtom, { sendCommand } as never); + store.set(paneLayoutAtomFamily("ws-test"), { + id: "root", + type: "leaf", + leafKind: "editor", + }); + + const { result } = renderHook(() => useOpenWorkspaceFile("ws-test"), { + wrapper: wrapperFor(store), + }); + + await act(async () => { + await result.current.openWorkspaceFile({ + workspaceId: "ws-test", + path: "src/persisted.ts", + source: "manual", + }); + }); + + expect(store.get(openEditorPathsAtomFamily("ws-test"))).toEqual(["src/persisted.ts"]); + expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("src/persisted.ts"); + expect(sendCommand).toHaveBeenCalledWith( + "workspace.uiState.set", + expect.objectContaining({ + workspaceId: "ws-test", + uiState: expect.objectContaining({ + openEditorPaths: ["src/persisted.ts"], + activeEditorPath: "src/persisted.ts", + }), + }), + undefined + ); + }); }); diff --git a/packages/web/src/features/workspace/actions/use-open-workspace-file.ts b/packages/web/src/features/workspace/actions/use-open-workspace-file.ts index 3304e1ef..d0aac954 100644 --- a/packages/web/src/features/workspace/actions/use-open-workspace-file.ts +++ b/packages/web/src/features/workspace/actions/use-open-workspace-file.ts @@ -1,4 +1,4 @@ -import { useAtomValue, useSetAtom } from "jotai"; +import { useAtomValue, useSetAtom, useStore } from "jotai"; import { useCallback } from "react"; import { usePaneActions } from "../../agent-panes/actions/use-pane-actions"; import { @@ -13,7 +13,9 @@ import { } from "../../agent-panes/pane-layout-tree"; import { useOpenLocation } from "../../code-editor/actions/use-open-location"; import { type PendingEditorNavigation } from "../../code-editor/atoms"; -import { deriveEditorModeForPath, editorModeAtomFamily } from "../atoms"; +import { deriveEditorModeForPath, editorModeAtomFamily, openEditorPathsAtomFamily } from "../atoms"; +import { appendOpenEditorPath } from "./open-editor-state"; +import { useWorkspaceUiStatePersistence } from "./use-workspace-ui-state-persistence"; interface OpenWorkspaceFileOptions { targetDraftPaneId?: string; @@ -26,8 +28,11 @@ export function useOpenWorkspaceFile(workspaceId: string) { const setActiveEditorPaneId = useSetAtom(activeEditorPaneIdAtomFamily(workspaceId)); const setFocusedEditorPaneId = useSetAtom(focusedEditorPaneIdAtomFamily(workspaceId)); const setEditorMode = useSetAtom(editorModeAtomFamily(workspaceId)); + const setOpenEditorPaths = useSetAtom(openEditorPathsAtomFamily(workspaceId)); + const store = useStore(); const { openLocation } = useOpenLocation(workspaceId); const { convertDraftPane } = usePaneActions(workspaceId); + const { persistUiState } = useWorkspaceUiStatePersistence(workspaceId); const openWorkspaceFile = useCallback( async (input: PendingEditorNavigation, options: OpenWorkspaceFileOptions = {}) => { @@ -55,6 +60,15 @@ export function useOpenWorkspaceFile(workspaceId: string) { setActiveEditorPaneId(targetEditorPaneId); setEditorMode(deriveEditorModeForPath(input.path)); await openLocation(input); + const nextOpenEditorPaths = appendOpenEditorPath( + store.get(openEditorPathsAtomFamily(workspaceId)), + input.path + ); + setOpenEditorPaths(nextOpenEditorPaths); + void persistUiState({ + openEditorPaths: nextOpenEditorPaths, + activeEditorPath: input.path, + }); }, [ activeEditorPaneId, @@ -62,9 +76,13 @@ export function useOpenWorkspaceFile(workspaceId: string) { focusedEditorPaneId, openLocation, paneLayout, + persistUiState, setActiveEditorPaneId, setEditorMode, setFocusedEditorPaneId, + setOpenEditorPaths, + store, + workspaceId, ] ); diff --git a/packages/web/src/features/workspace/actions/use-workspace-launch-actions.ts b/packages/web/src/features/workspace/actions/use-workspace-launch-actions.ts index 5041d756..2893b967 100644 --- a/packages/web/src/features/workspace/actions/use-workspace-launch-actions.ts +++ b/packages/web/src/features/workspace/actions/use-workspace-launch-actions.ts @@ -1,5 +1,5 @@ import type { FileNode, GitStatus, Workspace, WorktreeInfo } from "@coder-studio/core"; -import { useAtomValue, useSetAtom } from "jotai"; +import { useAtomValue, useSetAtom, useStore } from "jotai"; import { useCallback, useEffect, useRef, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { dispatchCommandAtom, wsClientAtom } from "../../../atoms/connection"; @@ -12,6 +12,7 @@ import { } from "../../../atoms/workspaces"; import { useTranslation } from "../../../lib/i18n"; import { buildDiagnosticsPath } from "../../diagnostics"; +import { hydrateWorkspaceEditorState } from "./open-editor-state"; import { usePersistWorkspaceLastViewedTarget } from "./use-persist-workspace-last-viewed-target"; export interface DirectoryInfo { @@ -42,6 +43,7 @@ export function useWorkspaceLaunchActions(onClose: () => void) { const location = useLocation(); const navigate = useNavigate(); const dispatch = useAtomValue(dispatchCommandAtom); + const store = useStore(); const setActiveWorkspaceId = useSetAtom(activeWorkspaceIdAtom); const setWorkspaces = useSetAtom(workspacesAtom); const setWorkspaceOrder = useSetAtom(workspaceOrderAtom); @@ -231,6 +233,7 @@ export function useWorkspaceLaunchActions(onClose: () => void) { ...prev, [result.data!.id]: result.data!, })); + hydrateWorkspaceEditorState(store, result.data.id, result.data.uiState); setWorkspaceOrder((prev) => { if (prev.includes(result.data!.id)) { return prev; @@ -275,6 +278,7 @@ export function useWorkspaceLaunchActions(onClose: () => void) { setWorkspaces, setWorkspacesLoadError, setWorkspacesLoadState, + store, t, ]); diff --git a/packages/web/src/features/workspace/actions/use-workspace-ui-state-persistence.ts b/packages/web/src/features/workspace/actions/use-workspace-ui-state-persistence.ts index 61252c75..7c9c1d42 100644 --- a/packages/web/src/features/workspace/actions/use-workspace-ui-state-persistence.ts +++ b/packages/web/src/features/workspace/actions/use-workspace-ui-state-persistence.ts @@ -1,13 +1,15 @@ import type { Workspace } from "@coder-studio/core"; import { useAtomValue, useSetAtom, useStore } from "jotai"; import { useCallback } from "react"; -import { dispatchCommandAtom } from "../../../atoms/connection"; +import { dispatchCommandAtom, wsClientAtom } from "../../../atoms/connection"; import { workspacesAtom } from "../../../atoms/workspaces"; import { paneLayoutAtomFamily } from "../../agent-panes/atoms/pane-layout"; import { + activeFilePathAtomFamily, bottomPanelHeightAtomFamily, focusModeAtomFamily, leftPanelWidthAtomFamily, + openEditorPathsAtomFamily, } from "../atoms"; function isWorkspace(value: unknown): value is Workspace { @@ -26,6 +28,7 @@ function isWorkspace(value: unknown): value is Workspace { export function useWorkspaceUiStatePersistence(workspaceId: string) { const dispatch = useAtomValue(dispatchCommandAtom); + const wsClient = useAtomValue(wsClientAtom); const setWorkspaces = useSetAtom(workspacesAtom); const store = useStore(); @@ -40,12 +43,26 @@ export function useWorkspaceUiStatePersistence(workspaceId: string) { return false; } + const currentOpenEditorPaths = store.get(openEditorPathsAtomFamily(workspaceId)); + const currentActiveEditorPath = store.get(activeFilePathAtomFamily(workspaceId)); + const shouldIncludeEditorState = + workspace.uiState?.openEditorPaths !== undefined || + workspace.uiState?.activeEditorPath !== undefined || + currentOpenEditorPaths.length > 0 || + currentActiveEditorPath !== null; + const nextUiState: Workspace["uiState"] = { ...workspace.uiState, leftPanelWidth: store.get(leftPanelWidthAtomFamily(workspaceId)), bottomPanelHeight: store.get(bottomPanelHeightAtomFamily(workspaceId)), focusMode: store.get(focusModeAtomFamily(workspaceId)), paneLayout: store.get(paneLayoutAtomFamily(workspaceId)), + ...(shouldIncludeEditorState + ? { + openEditorPaths: currentOpenEditorPaths, + activeEditorPath: currentActiveEditorPath, + } + : {}), ...patch, }; @@ -64,6 +81,10 @@ export function useWorkspaceUiStatePersistence(workspaceId: string) { }; }); + if (!wsClient) { + return true; + } + try { const result = await dispatch("workspace.uiState.set", { workspaceId, @@ -88,7 +109,7 @@ export function useWorkspaceUiStatePersistence(workspaceId: string) { return false; } }, - [dispatch, setWorkspaces, store, workspaceId] + [dispatch, setWorkspaces, store, workspaceId, wsClient] ); return { diff --git a/packages/web/src/features/workspace/actions/use-worktree-management-actions.ts b/packages/web/src/features/workspace/actions/use-worktree-management-actions.ts index 7b35f8db..ac7a7b3a 100644 --- a/packages/web/src/features/workspace/actions/use-worktree-management-actions.ts +++ b/packages/web/src/features/workspace/actions/use-worktree-management-actions.ts @@ -1,5 +1,5 @@ import type { Workspace, WorktreeInfo } from "@coder-studio/core"; -import { useAtom, useAtomValue, useSetAtom } from "jotai"; +import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai"; import { useCallback, useMemo } from "react"; import { dispatchCommandAtom } from "../../../atoms/connection"; import { @@ -13,6 +13,7 @@ import { import { useTranslation } from "../../../lib/i18n"; import { pushToastAtom } from "../../notifications/atoms"; import { worktreeListAtomFamily } from "../atoms"; +import { hydrateWorkspaceEditorState } from "./open-editor-state"; import { usePersistWorkspaceLastViewedTarget } from "./use-persist-workspace-last-viewed-target"; function slugifyBranchName(branch: string) { @@ -70,6 +71,7 @@ function isAbsoluteWorktreePath(path: string) { export function useWorktreeManagementActions(workspaceId: string) { const t = useTranslation(); const dispatch = useAtomValue(dispatchCommandAtom); + const store = useStore(); const workspace = useAtomValue(workspaceByIdAtomFamily(workspaceId)); const [list, setList] = useAtom(worktreeListAtomFamily(workspaceId)); const setActiveWorkspaceId = useSetAtom(activeWorkspaceIdAtom); @@ -213,6 +215,7 @@ export function useWorktreeManagementActions(workspaceId: string) { ...prev, [result.data!.id]: result.data!, })); + hydrateWorkspaceEditorState(store, result.data.id, result.data.uiState); setWorkspaceOrder((prev) => { if (prev.includes(result.data!.id)) { return prev; @@ -234,6 +237,7 @@ export function useWorktreeManagementActions(workspaceId: string) { setWorkspaces, setWorkspacesLoadError, setWorkspacesLoadState, + store, t, ] ); diff --git a/packages/web/src/features/workspace/atoms/files.ts b/packages/web/src/features/workspace/atoms/files.ts index 586dd33d..4e6eba5c 100644 --- a/packages/web/src/features/workspace/atoms/files.ts +++ b/packages/web/src/features/workspace/atoms/files.ts @@ -123,6 +123,11 @@ export const openFilesAtomFamily = atomFamily((workspaceId: string) => atom>({}) ); +/** + * Persisted open editor path list. File buffers still live in openFilesAtomFamily. + */ +export const openEditorPathsAtomFamily = atomFamily((workspaceId: string) => atom([])); + /** * Active file path (UI local state) */ diff --git a/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx b/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx index 42141cec..9e0b798c 100644 --- a/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx +++ b/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx @@ -13,7 +13,12 @@ import { __resetPendingEditorLoadsForTests, beginPendingEditorLoad, } from "../../../code-editor/actions/pending-editor-loads"; -import { activeFilePathAtomFamily, type OpenFile, openFilesAtomFamily } from "../../atoms"; +import { + activeFilePathAtomFamily, + type OpenFile, + openEditorPathsAtomFamily, + openFilesAtomFamily, +} from "../../atoms"; import { OpenEditorsSection } from "./open-editors-section"; vi.mock("../../../../lib/i18n", () => ({ @@ -186,6 +191,34 @@ describe("OpenEditorsSection", () => { ); }); + it("renders persisted editor paths when buffers have not loaded yet", () => { + const { store } = renderSection({}, "src/app.tsx", (draftStore) => { + draftStore.set(openEditorPathsAtomFamily("ws-test"), ["src/app.tsx", "README.md"]); + }); + + const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (2)" }); + const section = heading.closest("section") as HTMLElement; + const rowButtons = Array.from( + section.querySelectorAll(".workspace-open-editors__item") + ); + + expect(rowButtons.map((button) => button.getAttribute("aria-label"))).toEqual([ + "README.md", + "src/app.tsx", + ]); + expect(within(section).getByRole("button", { name: "src/app.tsx" })).toHaveClass( + "workspace-open-editors__item--active" + ); + + const readmeRow = within(section) + .getByRole("button", { name: "README.md" }) + .closest(".workspace-open-editors__row") as HTMLElement; + fireEvent.click(within(readmeRow).getByRole("button", { name: "Close README.md" })); + + expect(store.get(openEditorPathsAtomFamily("ws-test"))).toEqual(["src/app.tsx"]); + expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("src/app.tsx"); + }); + it("routes open-editor clicks into the focused editor pane", () => { const { store } = renderSection(undefined, undefined, (draftStore) => { draftStore.set(paneLayoutAtomFamily("ws-test"), { diff --git a/packages/web/src/features/workspace/views/shared/open-editors-section.tsx b/packages/web/src/features/workspace/views/shared/open-editors-section.tsx index 19894d0e..2dd1e641 100644 --- a/packages/web/src/features/workspace/views/shared/open-editors-section.tsx +++ b/packages/web/src/features/workspace/views/shared/open-editors-section.tsx @@ -10,7 +10,11 @@ import { import { orderOpenEditorPaths } from "../../actions/open-editors-close"; import { useOpenEditorsActions } from "../../actions/use-open-editors-actions"; import { useOpenWorkspaceFile } from "../../actions/use-open-workspace-file"; -import { activeFilePathAtomFamily, openFilesAtomFamily } from "../../atoms"; +import { + activeFilePathAtomFamily, + openEditorPathsAtomFamily, + openFilesAtomFamily, +} from "../../atoms"; interface OpenEditorsSectionProps { workspaceId: string; @@ -21,6 +25,7 @@ interface OpenEditorsSectionProps { export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEditorsSectionProps) { const t = useTranslation(); const openFiles = useAtomValue(openFilesAtomFamily(workspaceId)); + const persistedOpenEditorPaths = useAtomValue(openEditorPathsAtomFamily(workspaceId)); const activeFilePath = useAtomValue(activeFilePathAtomFamily(workspaceId)); const { openWorkspaceFile } = useOpenWorkspaceFile(workspaceId); const { closeAll, closePath } = useOpenEditorsActions(workspaceId); @@ -41,9 +46,11 @@ export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEdi hasPendingEditorLoad(workspaceId, activeFilePath) ? activeFilePath : null; - const openEditorPaths = pendingActivePath - ? [...orderOpenEditorPaths(openFiles), pendingActivePath].sort() - : orderOpenEditorPaths(openFiles); + const openEditorPaths = orderOpenEditorPaths([ + ...persistedOpenEditorPaths, + ...Object.keys(openFiles), + ...(pendingActivePath ? [pendingActivePath] : []), + ]); const resolvedTitle = title ?? t("workspace.sidebar.open_editors"); const headingLabel = t("workspace.open_editors.title_with_count", { count: openEditorPaths.length, diff --git a/packages/web/src/features/workspace/views/shared/workspace-launch-modal.test.tsx b/packages/web/src/features/workspace/views/shared/workspace-launch-modal.test.tsx index 5a53afe2..0cbc21be 100644 --- a/packages/web/src/features/workspace/views/shared/workspace-launch-modal.test.tsx +++ b/packages/web/src/features/workspace/views/shared/workspace-launch-modal.test.tsx @@ -6,6 +6,7 @@ import { localeAtom } from "../../../../atoms/app-ui"; import { wsClientAtom } from "../../../../atoms/connection"; import { CommandResultError } from "../../../../ws/client"; import { useWorkspaceLaunchActions } from "../../actions/use-workspace-launch-actions"; +import { activeFilePathAtomFamily, openEditorPathsAtomFamily } from "../../atoms"; import { WorkspaceLaunchModal } from "./workspace-launch-modal"; const viewportMocks = vi.hoisted(() => ({ @@ -243,6 +244,17 @@ describe("WorkspaceLaunchModal", () => { if (op === "workspace.open") { return { id: "ws-1", + path: "/home/spencer/workspace", + targetRuntime: "native", + openedAt: 1, + lastActiveAt: 1, + uiState: { + leftPanelWidth: 280, + bottomPanelHeight: 200, + focusMode: false, + openEditorPaths: ["src/app.tsx", "README.md"], + activeEditorPath: "README.md", + }, }; } @@ -287,6 +299,8 @@ describe("WorkspaceLaunchModal", () => { await waitFor(() => { expect(onClose).toHaveBeenCalled(); }); + expect(store.get(openEditorPathsAtomFamily("ws-1"))).toEqual(["src/app.tsx", "README.md"]); + expect(store.get(activeFilePathAtomFamily("ws-1"))).toBe("README.md"); }); it("navigates to /workspace after opening a workspace from outside the workspace page", async () => { diff --git a/packages/web/src/hooks/use-bootstrap.test.tsx b/packages/web/src/hooks/use-bootstrap.test.tsx new file mode 100644 index 00000000..0fb8c647 --- /dev/null +++ b/packages/web/src/hooks/use-bootstrap.test.tsx @@ -0,0 +1,85 @@ +// @vitest-environment jsdom + +import { act, renderHook, waitFor } from "@testing-library/react"; +import { createStore, Provider } from "jotai"; +import type { ReactNode } from "react"; +import { MemoryRouter } from "react-router-dom"; +import { beforeEach, describe, expect, it, vi } from "vitest"; +import { activationStatusAtom } from "../atoms/activation"; +import { authenticatedAtom, lastViewedTargetAtom, localeAtom } from "../atoms/app-ui"; +import { authEnabledAtom, connectionStatusAtom, wsClientAtom } from "../atoms/connection"; +import { workspacesAtom, workspacesLoadStateAtom } from "../atoms/workspaces"; +import { activeFilePathAtomFamily, openEditorPathsAtomFamily } from "../features/workspace/atoms"; +import { useBootstrap } from "./use-bootstrap"; + +function wrapperFor(store: ReturnType) { + return function Wrapper({ children }: { children: ReactNode }) { + return ( + + {children} + + ); + }; +} + +describe("useBootstrap", () => { + beforeEach(() => { + vi.restoreAllMocks(); + }); + + it("hydrates persisted open editor metadata from the workspace list response", async () => { + const store = createStore(); + const sendCommand = vi.fn(async (op: string) => { + if (op === "workspace.list") { + return [ + { + id: "ws-1", + path: "/workspace", + targetRuntime: "native", + openedAt: 1, + lastActiveAt: 1, + uiState: { + leftPanelWidth: 280, + bottomPanelHeight: 200, + focusMode: false, + openEditorPaths: ["src/app.tsx", "README.md", "src/app.tsx", ""], + activeEditorPath: "src/app.tsx", + }, + }, + ]; + } + + if (op === "workspace.lastViewedTarget.get") { + return null; + } + + throw new Error(`Unexpected command: ${op}`); + }); + + store.set(wsClientAtom, { sendCommand } as never); + store.set(connectionStatusAtom, "connected"); + store.set(authEnabledAtom, false); + store.set(activationStatusAtom, "active"); + store.set(authenticatedAtom, true); + store.set(localeAtom, "en"); + + const { result } = renderHook(() => useBootstrap(), { + wrapper: wrapperFor(store), + }); + + await act(async () => { + await waitFor(() => { + expect(store.get(workspacesLoadStateAtom)).toBe("ready"); + }); + }); + + expect(store.get(workspacesAtom)["ws-1"]?.uiState.openEditorPaths).toEqual([ + "src/app.tsx", + "README.md", + ]); + expect(store.get(openEditorPathsAtomFamily("ws-1"))).toEqual(["src/app.tsx", "README.md"]); + expect(store.get(activeFilePathAtomFamily("ws-1"))).toBe("src/app.tsx"); + expect(store.get(lastViewedTargetAtom)).toBeNull(); + expect(result.current).toBeUndefined(); + }); +}); diff --git a/packages/web/src/hooks/use-bootstrap.ts b/packages/web/src/hooks/use-bootstrap.ts index f0468de3..5dea97dd 100644 --- a/packages/web/src/hooks/use-bootstrap.ts +++ b/packages/web/src/hooks/use-bootstrap.ts @@ -1,5 +1,5 @@ import type { Workspace, WorkspaceLastViewedTarget } from "@coder-studio/core"; -import { useAtomValue, useSetAtom } from "jotai"; +import { useAtomValue, useSetAtom, useStore } from "jotai"; import { useEffect, useRef } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { authEnabledAtom, connectionStatusAtom, dispatchCommandAtom } from "../atoms"; @@ -13,6 +13,10 @@ import { workspacesLoadErrorAtom, workspacesLoadStateAtom, } from "../atoms/workspaces"; +import { + hydrateWorkspaceEditorState, + normalizeWorkspaceEditorUiState, +} from "../features/workspace/actions/open-editor-state"; export function useBootstrap() { const bootstrapRequestIdRef = useRef(0); @@ -31,6 +35,7 @@ export function useBootstrap() { const setWorkspaceOrder = useSetAtom(workspaceOrderAtom); const setWorkspacesLoadState = useSetAtom(workspacesLoadStateAtom); const setWorkspacesLoadError = useSetAtom(workspacesLoadErrorAtom); + const store = useStore(); useEffect(() => { if (authEnabled === null) { @@ -101,10 +106,16 @@ export function useBootstrap() { return; } - const nextWorkspaces = Array.isArray(listResult.data) ? listResult.data : []; + const nextWorkspaces = (Array.isArray(listResult.data) ? listResult.data : []).map( + (workspace) => ({ + ...workspace, + uiState: normalizeWorkspaceEditorUiState(workspace.uiState), + }) + ); const wsMap: Record = {}; for (const workspace of nextWorkspaces) { wsMap[workspace.id] = workspace; + hydrateWorkspaceEditorState(store, workspace.id, workspace.uiState); } setWorkspaces(wsMap); @@ -159,6 +170,7 @@ export function useBootstrap() { setLastViewedTarget, setWorkspacesLoadError, setWorkspacesLoadState, + store, workspaces.length, workspacesLoadState, ]); From 4e073746704c625b5390a57421de0e45fd4140e7 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Fri, 29 May 2026 22:16:24 +0800 Subject: [PATCH 150/162] fix monitoring settings layout spacing --- packages/web/src/styles/components.css | 12 +++++++++- .../web/src/styles/components.theme.test.ts | 2 +- .../web/src/styles/monitoring.guard.test.ts | 24 +++++++++++++++++++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index 5018ba58..a37998b0 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -997,6 +997,11 @@ padding: var(--sp-4); } +.settings-content--fill-height > .settings-content-surface--monitoring-dense { + flex: 0 0 auto; + min-height: 100%; +} + .settings-section { max-width: 720px; min-width: 0; @@ -1675,6 +1680,11 @@ padding: var(--sp-3); } +.monitoring-tree, +.monitoring-detail { + padding: var(--sp-3); +} + .monitoring-card__header { display: flex; align-items: flex-start; @@ -16504,7 +16514,7 @@ body.is-dragging-pane .session-action-btn-drag { .workspace-search-panel__details--collapsed { min-height: 23px; align-items: center; - justify-items: start; + justify-items: end; } .workspace-search-panel__details--collapsed .workspace-search-panel__filter--details { diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts index 7a581a6a..64535f1c 100644 --- a/packages/web/src/styles/components.theme.test.ts +++ b/packages/web/src/styles/components.theme.test.ts @@ -3398,7 +3398,7 @@ describe("components.css theme-sensitive surfaces", () => { expect(searchFilterDetails).toContain("background: transparent"); expect(searchInlineIcon).toContain("width: 11px"); expect(searchDetails).toContain("justify-items: stretch"); - expect(searchDetailsCollapsed).toContain("justify-items: start"); + expect(searchDetailsCollapsed).toContain("justify-items: end"); expect(searchDetailsCollapsed).toContain("align-items: center"); expect(searchDetailHeading).toContain("justify-content: space-between"); expect(searchDetailHeading).toContain("width: 100%"); diff --git a/packages/web/src/styles/monitoring.guard.test.ts b/packages/web/src/styles/monitoring.guard.test.ts index e9ec1a26..24c8b62b 100644 --- a/packages/web/src/styles/monitoring.guard.test.ts +++ b/packages/web/src/styles/monitoring.guard.test.ts @@ -11,6 +11,15 @@ const rawMonitoringFontSizePattern = const rawMonitoringRadiusPattern = /border-radius:\s*(?:\d+px|999px|9999px|\d+%|calc\([^)]*\d+px[^)]*\))/; +function escapeRegExp(value: string) { + return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); +} + +function getRuleBlock(selector: string) { + const pattern = new RegExp(`${escapeRegExp(selector)}\\s*\\{([^}]*)\\}`); + return componentsStyles.match(pattern)?.[1] ?? ""; +} + function getMonitoringOffenderBlocks(pattern: RegExp) { return Array.from(componentsStyles.matchAll(/([^{}]+)\{([^}]*)\}/g)) .map((match) => ({ @@ -36,4 +45,19 @@ describe("monitoring style guardrails", () => { expect(componentsStyles).toMatch(rawMonitoringRadiusPattern); expect(getMonitoringOffenderBlocks(rawMonitoringRadiusPattern)).toEqual([]); }); + + it("lets the dense settings monitoring surface grow with dashboard content", () => { + const denseFillHeightRule = getRuleBlock( + ".settings-content--fill-height > .settings-content-surface--monitoring-dense" + ); + + expect(denseFillHeightRule).toContain("flex: 0 0 auto"); + expect(denseFillHeightRule).toContain("min-height: 100%"); + }); + + it("keeps monitoring data panels padded away from their borders", () => { + const panelRule = getRuleBlock(".monitoring-tree,\n.monitoring-detail"); + + expect(panelRule).toContain("padding: var(--sp-3)"); + }); }); From bb7e5895dd09248d24a275e5ce5a2ec6614ee7a6 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Fri, 29 May 2026 23:38:33 +0800 Subject: [PATCH 151/162] Polish editor dirty state and monitoring UI --- .../__tests__/monitoring/aggregation.test.ts | 41 +++++ .../src/__tests__/monitoring/service.test.ts | 102 +++++++++++ packages/server/src/monitoring/aggregation.ts | 3 +- packages/server/src/monitoring/service.ts | 25 ++- packages/server/src/server.ts | 1 + .../views/shared/editor-pane-card.test.tsx | 83 ++++++++- .../views/shared/editor-pane-card.tsx | 45 ++++- .../actions/use-code-editor-actions.ts | 44 ++++- .../src/features/code-editor/index.test.tsx | 168 +++++++++++++++--- .../views/shared/code-editor-host.test.tsx | 22 ++- .../views/shared/code-editor-host.tsx | 92 +++++----- .../views/shared/editor-surface.test.tsx | 65 ++++++- .../views/shared/editor-surface.tsx | 63 +++++-- .../web/src/features/monitoring/page.test.tsx | 25 ++- packages/web/src/features/monitoring/page.tsx | 95 +++++++--- .../shared/open-editors-section.test.tsx | 72 ++++++++ .../views/shared/open-editors-section.tsx | 153 ++++++++++++---- packages/web/src/locales/en.json | 9 + packages/web/src/locales/zh.json | 9 + packages/web/src/styles/components.css | 114 +++++++++--- .../web/src/styles/components.theme.test.ts | 34 +++- 21 files changed, 1067 insertions(+), 198 deletions(-) diff --git a/packages/server/src/__tests__/monitoring/aggregation.test.ts b/packages/server/src/__tests__/monitoring/aggregation.test.ts index 28430bab..5993ae18 100644 --- a/packages/server/src/__tests__/monitoring/aggregation.test.ts +++ b/packages/server/src/__tests__/monitoring/aggregation.test.ts @@ -40,6 +40,9 @@ describe("buildMonitoringSnapshot", () => { startedAt: 2, }, ], + workspaceLabels: { + "ws-1": "coder-studio", + }, processRows: [ { pid: 1, @@ -74,6 +77,7 @@ describe("buildMonitoringSnapshot", () => { expect(response.snapshot.workspaces[0]).toEqual( expect.objectContaining({ id: "workspace:ws-1", + label: "coder-studio", cpuPercent: 25, memoryBytes: 250, }) @@ -88,6 +92,43 @@ describe("buildMonitoringSnapshot", () => { expect(response.snapshot.subprocessGroups[0]?.parentId).toBe("session:sess-1"); }); + it("falls back to the workspace id when no readable label is available", () => { + const response = buildMonitoringSnapshot({ + settings: { + ...createDefaultMonitoringSettings(), + enabled: true, + }, + sampledAt: 100, + host: null, + roots: [ + { + ownerId: "terminal:term-1", + rootPid: 100, + kind: "terminal", + label: "Codex", + workspaceId: "ws_1779980247607_u2lfvdjf", + sessionId: "sess-1", + terminalId: "term-1", + providerId: "codex", + startedAt: 2, + }, + ], + processRows: [ + { + pid: 100, + ppid: 1, + cpuPercent: 20, + rssBytes: 200, + elapsedSec: 90, + command: "codex", + }, + ], + previousSnapshot: null, + }); + + expect(response.snapshot.workspaces[0]?.label).toBe("ws_1779980247607_u2lfvdjf"); + }); + it("keeps host data when process collection fails", () => { const response = buildMonitoringSnapshot({ settings: { diff --git a/packages/server/src/__tests__/monitoring/service.test.ts b/packages/server/src/__tests__/monitoring/service.test.ts index d023e937..0923a02a 100644 --- a/packages/server/src/__tests__/monitoring/service.test.ts +++ b/packages/server/src/__tests__/monitoring/service.test.ts @@ -334,6 +334,108 @@ describe("MonitoringService", () => { ); }); + it("labels workspace attribution rows with readable workspace names", async () => { + const registry = new ManagedProcessRegistry({ now: () => 10 }); + const service = new MonitoringService({ + broadcaster: { broadcast: vi.fn() }, + settingsRepo: { + get: (key: string) => { + const settings = { + "monitoring.enabled": true, + "monitoring.hostMetricsEnabled": true, + "monitoring.runtimeSummaryEnabled": true, + "monitoring.workspaceAttributionEnabled": true, + "monitoring.subprocessDrilldownEnabled": false, + "monitoring.sampleIntervalMs": 2000, + } as Record; + return settings[key]; + }, + }, + registry, + sessionMgr: { + getAll: () => + [ + { + id: "sess-1", + workspaceId: "ws_1779980247607_u2lfvdjf", + terminalId: "term-1", + providerId: "codex", + state: "idle", + capability: "full", + startedAt: 1, + lastActiveAt: 1, + title: "Codex", + }, + ] satisfies Session[], + findSessionIdByTerminal: () => "sess-1", + }, + workspaceMgr: { + get: (workspaceId: string) => + workspaceId === "ws_1779980247607_u2lfvdjf" + ? { + id: workspaceId, + path: "/home/spencer/workspace/coder-studio", + } + : undefined, + }, + terminalMgr: { + getAll: () => [ + { + toDTO: () => + ({ + id: "term-1", + workspaceId: "ws_1779980247607_u2lfvdjf", + kind: "agent", + title: "Codex", + cwd: "/home/spencer/workspace/coder-studio", + argv: ["codex"], + cols: 120, + rows: 30, + pid: 100, + alive: true, + createdAt: 1, + }) satisfies Terminal, + }, + ], + }, + hostCollector: { + collect: () => ({ + cpuPercent: 40, + memoryUsedBytes: 400, + memoryTotalBytes: 1000, + memoryAvailableBytes: 600, + loadAverage: [0.2, 0.2, 0.1], + uptimeSec: 10, + pressure: "normal", + }), + }, + processCollector: { + collect: async () => [ + { pid: 100, ppid: 1, cpuPercent: 10, rssBytes: 100, elapsedSec: 5, command: "codex" }, + ], + }, + setInterval: vi.fn(() => ({ unref: vi.fn() })), + clearInterval: vi.fn(), + now: () => 10, + }); + + service.start(); + const response = await service.recheck(); + + expect(response.snapshot.workspaces[0]).toEqual( + expect.objectContaining({ + id: "workspace:ws_1779980247607_u2lfvdjf", + label: "coder-studio", + }) + ); + expect(response.snapshot.sessions[0]).toEqual( + expect.objectContaining({ + parentId: "workspace:ws_1779980247607_u2lfvdjf", + label: "Codex", + }) + ); + }); + it("unregisters terminal roots that are no longer active", async () => { const registry = new ManagedProcessRegistry({ now: () => 10 }); let sessions: Session[] = [ diff --git a/packages/server/src/monitoring/aggregation.ts b/packages/server/src/monitoring/aggregation.ts index afd0fd0a..c0912269 100644 --- a/packages/server/src/monitoring/aggregation.ts +++ b/packages/server/src/monitoring/aggregation.ts @@ -86,6 +86,7 @@ export function buildMonitoringSnapshot(input: { sampledAt: number; host: MonitoringHostSummary | null; roots: ManagedProcessRoot[]; + workspaceLabels?: Record; processRows: ProcessStatRow[] | null; previousSnapshot: MonitoringSnapshot | null; failureReason?: string; @@ -213,7 +214,7 @@ export function buildMonitoringSnapshot(input: { id: workspaceId, kind: "workspace", workspaceId: root.workspaceId, - label: root.workspaceId, + label: input.workspaceLabels?.[root.workspaceId] ?? root.workspaceId, cpuPercent: 0, memoryBytes: 0, processCount: 0, diff --git a/packages/server/src/monitoring/service.ts b/packages/server/src/monitoring/service.ts index b3f766c7..4ab5f9ab 100644 --- a/packages/server/src/monitoring/service.ts +++ b/packages/server/src/monitoring/service.ts @@ -1,3 +1,4 @@ +import { basename } from "node:path"; import { createEmptyMonitoringResponse, deriveMonitoringMode, @@ -6,6 +7,7 @@ import { type Session, type Terminal, Topics, + type Workspace, } from "@coder-studio/core"; import { buildMonitoringSnapshot } from "./aggregation.js"; import { MonitoringHistoryStore } from "./history-store.js"; @@ -37,6 +39,9 @@ export class MonitoringService { getAll(): Session[]; findSessionIdByTerminal(terminalId: string): string | undefined; }; + workspaceMgr?: { + get(workspaceId: string): Pick | undefined; + }; terminalMgr: { getAll(): ActiveTerminalLike[]; }; @@ -171,6 +176,22 @@ export class MonitoringService { } } + private getWorkspaceLabels(roots: ReturnType) { + const labels: Record = {}; + for (const root of roots) { + if (!root.workspaceId || labels[root.workspaceId]) { + continue; + } + + const workspace = this.deps.workspaceMgr?.get(root.workspaceId); + const label = workspace?.name?.trim() || (workspace?.path ? basename(workspace.path) : ""); + if (label) { + labels[root.workspaceId] = label; + } + } + return labels; + } + private async sampleOnce( settings = resolveMonitoringSettings(this.deps.settingsRepo) ): Promise { @@ -189,11 +210,13 @@ export class MonitoringService { } } + const roots = this.deps.registry.listRoots(); const response = buildMonitoringSnapshot({ settings, sampledAt: startedAt, host, - roots: this.deps.registry.listRoots(), + roots, + workspaceLabels: this.getWorkspaceLabels(roots), processRows, previousSnapshot: this.latestSampledSnapshot.sampledAt > 0 ? this.latestSampledSnapshot : null, diff --git a/packages/server/src/server.ts b/packages/server/src/server.ts index 063aa694..0f4ba4a6 100644 --- a/packages/server/src/server.ts +++ b/packages/server/src/server.ts @@ -336,6 +336,7 @@ export async function createServer( settingsRepo, registry: managedProcessRegistry, sessionMgr, + workspaceMgr, terminalMgr, hostCollector: new HostCollector(), processCollector: createProcessTableCollector(), diff --git a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx index 0bfeef15..b6994c05 100644 --- a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx +++ b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx @@ -2,18 +2,41 @@ import { fireEvent, render, screen } from "@testing-library/react"; import { createStore, Provider } from "jotai"; import { afterEach, describe, expect, it, vi } from "vitest"; import { localeAtom } from "../../../../atoms/app-ui"; -import { activeFilePathAtomFamily } from "../../../workspace/atoms"; +import { + activeFilePathAtomFamily, + type OpenFile, + openFilesAtomFamily, +} from "../../../workspace/atoms"; import { EditorPaneCard } from "./editor-pane-card"; const mocks = vi.hoisted(() => ({ - editorState: { marker: "editor-state" }, + editorState: { + marker: "editor-state", + currentFile: undefined as OpenFile | undefined, + }, mockUseCodeEditorActions: vi.fn(), mockCodeEditorHost: vi.fn(() =>
Editor Host
), mockCodeEditorDesktopHeaderActions: vi.fn(() => ( -
Editor Toolbar
+
+ Editor Toolbar +
)), })); +vi.mock("../../../../lib/i18n", () => ({ + useTranslation: () => (key: string, params?: Record) => { + const dictionary: Record = { + "action.close": "Close", + "code_editor.unsaved_changes": "Unsaved changes", + "code_editor.close_unsaved_title": "Discard unsaved changes?", + "code_editor.close_unsaved_description": `${params?.name ?? "File"} has unsaved changes.`, + "code_editor.discard_and_close": "Discard and Close", + "common.cancel": "Cancel", + }; + return dictionary[key] ?? key; + }, +})); + vi.mock("../../../code-editor/actions/use-code-editor-actions", () => ({ useCodeEditorActions: mocks.mockUseCodeEditorActions, })); @@ -51,6 +74,10 @@ describe("EditorPaneCard", () => { expect(screen.getByText("app.tsx")).toBeInTheDocument(); expect(screen.queryByText("src/app.tsx")).not.toBeInTheDocument(); expect(screen.getByTestId("editor-toolbar")).toBeInTheDocument(); + expect(screen.getByTestId("editor-toolbar").closest(".panel-header")).toBeTruthy(); + expect( + screen.queryByText("Editor Toolbar")?.closest(".editor-pane-card__toolbar-row") + ).toBeNull(); expect(screen.getByTestId("editor-host")).toBeInTheDocument(); expect(mocks.mockCodeEditorDesktopHeaderActions).toHaveBeenCalledWith( expect.objectContaining({ @@ -75,4 +102,54 @@ describe("EditorPaneCard", () => { expect(onSplitPane).toHaveBeenNthCalledWith(2, "pane-1", "vertical"); expect(onClosePane).toHaveBeenCalledWith("pane-1"); }); + + it("marks dirty editor pane titles and confirms before closing dirty files", () => { + const store = createStore(); + const onClosePane = vi.fn(); + const onSplitPane = vi.fn(); + + mocks.mockUseCodeEditorActions.mockReturnValue(mocks.editorState); + store.set(localeAtom, "en"); + store.set(activeFilePathAtomFamily("ws-123"), "src/app.tsx"); + store.set(openFilesAtomFamily("ws-123"), { + "src/app.tsx": { + kind: "text", + path: "src/app.tsx", + content: "changed", + savedContent: "saved", + baseHash: "hash-1", + isDirty: true, + }, + }); + + render( + + + + ); + + const title = screen.getByText("app.tsx"); + const titleElement = title.closest(".panel-header__title"); + const dirtyMeta = titleElement?.nextElementSibling; + + expect(dirtyMeta).toHaveClass("panel-header__meta"); + expect(dirtyMeta?.querySelector(".editor-pane-card__dirty-indicator")).toBeTruthy(); + + fireEvent.click(screen.getByRole("button", { name: "Close" })); + expect(onClosePane).not.toHaveBeenCalled(); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Cancel" })); + expect(onClosePane).not.toHaveBeenCalled(); + + fireEvent.click(screen.getByRole("button", { name: "Close" })); + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); + + expect(onClosePane).toHaveBeenCalledWith("pane-1"); + }); }); diff --git a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx index f68c3e0d..f05858ac 100644 --- a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx +++ b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx @@ -1,7 +1,8 @@ import { useAtomValue } from "jotai"; import { FlipHorizontal, FlipVertical, X } from "lucide-react"; import type { FC } from "react"; -import { IconButton, Tooltip } from "../../../../components/ui"; +import { useState } from "react"; +import { ConfirmDialog, IconButton, Tooltip } from "../../../../components/ui"; import { useTranslation } from "../../../../lib/i18n"; import { useCodeEditorActions } from "../../../code-editor/actions/use-code-editor-actions"; import { @@ -9,7 +10,7 @@ import { CodeEditorHost, } from "../../../code-editor/views/shared/code-editor-host"; import { PanelHeader } from "../../../shared/components/panel-header"; -import { activeFilePathAtomFamily } from "../../../workspace/atoms"; +import { activeFilePathAtomFamily, openFilesAtomFamily } from "../../../workspace/atoms"; function getEditorPaneTitle(path: string | null): string { if (!path) { @@ -34,9 +35,32 @@ export const EditorPaneCard: FC = ({ onSplitPane, }) => { const t = useTranslation(); + const [closeConfirmOpen, setCloseConfirmOpen] = useState(false); const activeFilePath = useAtomValue(activeFilePathAtomFamily(workspaceId)); + const openFiles = useAtomValue(openFilesAtomFamily(workspaceId)); const editorState = useCodeEditorActions(); const title = getEditorPaneTitle(activeFilePath); + const activeOpenFile = activeFilePath ? openFiles[activeFilePath] : undefined; + const isDirtyTextFile = activeOpenFile?.kind === "text" && activeOpenFile.isDirty === true; + const dirtyIndicator = isDirtyTextFile ? ( + + ) : null; + const requestClosePane = () => { + if (isDirtyTextFile) { + setCloseConfirmOpen(true); + return; + } + + onClosePane(paneId); + }; + const confirmClosePane = () => { + setCloseConfirmOpen(false); + onClosePane(paneId); + }; return (
= ({ > + = ({ aria-label={t("action.close")} className="session-action-btn session-action-btn-close" icon={} - onClick={() => onClosePane(paneId)} + onClick={requestClosePane} size="sm" /> @@ -81,13 +107,20 @@ export const EditorPaneCard: FC = ({ />
-
- -
+
); }; diff --git a/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts b/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts index 572be04e..f8a223ef 100644 --- a/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts +++ b/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts @@ -56,6 +56,7 @@ export function useCodeEditorActions() { ); const [savingPaths, setSavingPaths] = useState>(() => new Set()); + const savingPathsRef = useRef>(new Set()); const [saveError, setSaveError] = useState<{ path: string; message: string } | null>(null); const [fileLoadError, setFileLoadError] = useState<{ path: string; message: string } | null>( null @@ -133,6 +134,7 @@ export function useCodeEditorActions() { } } + savingPathsRef.current = changed ? next : current; return changed ? next : current; }); setSaveError((current) => (current && removedPaths.has(current.path) ? null : current)); @@ -297,13 +299,16 @@ export function useCodeEditorActions() { } const { path, content, baseHash } = currentFile; - if (savingPaths.has(path)) { + if (savingPathsRef.current.has(path)) { return; } const requestId = ++nextSaveRequestIdRef.current; activeSaveRequestIdByPathRef.current.set(path, requestId); - setSavingPaths((current) => new Set(current).add(path)); + const nextSavingPaths = new Set(savingPathsRef.current); + nextSavingPaths.add(path); + savingPathsRef.current = nextSavingPaths; + setSavingPaths(nextSavingPaths); setSaveError((current) => (current?.path === path ? null : current)); const result = await dispatch<{ newHash: string }>("file.write", { @@ -341,12 +346,11 @@ export function useCodeEditorActions() { } activeSaveRequestIdByPathRef.current.delete(path); - setSavingPaths((current) => { - const next = new Set(current); - next.delete(path); - return next; - }); - }, [currentFile, dispatch, savingPaths, setOpenFiles, workspaceId]); + const nextSavingPathsAfterSave = new Set(savingPathsRef.current); + nextSavingPathsAfterSave.delete(path); + savingPathsRef.current = nextSavingPathsAfterSave; + setSavingPaths(nextSavingPathsAfterSave); + }, [currentFile, dispatch, setOpenFiles, workspaceId]); const handleContentChange = useCallback( (newContent: string) => { @@ -808,6 +812,30 @@ export function useCodeEditorActions() { : null; const isSaving = Boolean(isTextFile && savingPaths.has(currentFile.path)); const canSave = Boolean(isTextFile && currentFile.isDirty && !isSaving); + useEffect(() => { + const handleSaveShortcut = (event: KeyboardEvent) => { + const isSaveShortcut = + event.key.toLowerCase() === "s" && (event.ctrlKey || event.metaKey) && !event.altKey; + if (!isSaveShortcut) { + return; + } + + if (!isTextFile) { + return; + } + + event.preventDefault(); + if (canSave) { + void handleSave(); + } + }; + + window.addEventListener("keydown", handleSaveShortcut); + return () => { + window.removeEventListener("keydown", handleSaveShortcut); + }; + }, [canSave, handleSave, isTextFile]); + const activeLoadError = activeFilePath && fileLoadError?.path === activeFilePath ? fileLoadError.message : null; const activeExternalStatus = diff --git a/packages/web/src/features/code-editor/index.test.tsx b/packages/web/src/features/code-editor/index.test.tsx index 1438613f..22441f4f 100644 --- a/packages/web/src/features/code-editor/index.test.tsx +++ b/packages/web/src/features/code-editor/index.test.tsx @@ -160,6 +160,14 @@ function createDeferred() { return { promise, resolve, reject }; } +function pressSaveShortcut() { + fireEvent.keyDown(window, { + key: "s", + code: "KeyS", + ctrlKey: true, + }); +} + describe("CodeEditorHost", () => { afterEach(() => { vi.restoreAllMocks(); @@ -912,13 +920,7 @@ describe("CodeEditorHost", () => { expect(screen.queryByTestId("monaco-host")).not.toBeInTheDocument(); // Save button must be disabled for images (nothing to write back). - const saveBtn = screen.getByRole("button", { name: "Save File" }); - expect(saveBtn).toBeDisabled(); - expect(saveBtn).not.toHaveAttribute("title"); - - fireEvent.mouseEnter(saveBtn); - fireEvent.focus(saveBtn); - expect(screen.queryByRole("tooltip")).toBeNull(); + expect(screen.queryByRole("button", { name: "Save File" })).not.toBeInTheDocument(); }); it("defaults text files into edit mode and shows the text editor", async () => { @@ -1647,7 +1649,7 @@ describe("CodeEditorHost", () => { ); - fireEvent.click(screen.getByRole("button", { name: "Save File" })); + pressSaveShortcut(); expect(await screen.findByRole("alert")).toHaveTextContent("Save failed on background"); @@ -1800,7 +1802,7 @@ describe("CodeEditorHost", () => { ); - fireEvent.click(screen.getByRole("button", { name: "Save File" })); + pressSaveShortcut(); expect(await screen.findByRole("alert")).toHaveTextContent("Save failed on background"); @@ -2025,6 +2027,8 @@ describe("CodeEditorHost", () => { }); fireEvent.click(screen.getByRole("button", { name: "Close" })); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); await waitFor(() => { expect(store.get(gitDiffPreviewAtomFamily("ws-1"))).toBeNull(); @@ -2033,7 +2037,7 @@ describe("CodeEditorHost", () => { }); }); - it("shows the save tooltip on desktop for a text buffer", async () => { + it("omits the desktop save button for a text buffer", async () => { const { store } = setupStore({ activePath: "src/save.ts", openFiles: { @@ -2054,11 +2058,7 @@ describe("CodeEditorHost", () => { ); - const saveBtn = screen.getByRole("button", { name: "Save File" }); - expect(saveBtn).not.toHaveAttribute("title"); - - fireEvent.mouseEnter(saveBtn); - expect(screen.getByRole("tooltip")).toHaveTextContent("Save File"); + expect(screen.queryByRole("button", { name: "Save File" })).not.toBeInTheDocument(); }); it("clears dirty state when text returns to the last saved content", async () => { @@ -2098,7 +2098,7 @@ describe("CodeEditorHost", () => { }); }); - expect(screen.getByRole("button", { name: "Save File" })).toBeDisabled(); + expect(screen.queryByRole("button", { name: "Save File" })).not.toBeInTheDocument(); }); it("reloads a clean text buffer after an external refresh signal changes the file on disk", async () => { @@ -2194,7 +2194,7 @@ describe("CodeEditorHost", () => { ); - fireEvent.click(screen.getByRole("button", { name: "Save File" })); + pressSaveShortcut(); expect(await screen.findByRole("alert")).toHaveTextContent("Save failed on A"); @@ -2202,6 +2202,8 @@ describe("CodeEditorHost", () => { .getByRole("button", { name: "src/a.ts" }) .closest(".workspace-open-editors__row") as HTMLElement; fireEvent.click(within(activeRow).getByRole("button", { name: "Close src/a.ts" })); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); await waitFor(() => { expect(store.get(activeFilePathAtomFamily("ws-1"))).toBeNull(); @@ -2263,7 +2265,7 @@ describe("CodeEditorHost", () => { ); - fireEvent.click(screen.getByRole("button", { name: "Save File" })); + pressSaveShortcut(); await waitFor(() => { expect(sendCommand).toHaveBeenCalledWith( @@ -2287,7 +2289,7 @@ describe("CodeEditorHost", () => { expect(screen.getByTestId("monaco-host")).toHaveTextContent("changed b"); expect(screen.queryByRole("button", { name: "Saving" })).not.toBeInTheDocument(); - fireEvent.click(screen.getByRole("button", { name: "Save File" })); + pressSaveShortcut(); await waitFor(() => { expect(sendCommand).toHaveBeenCalledWith( @@ -2307,6 +2309,126 @@ describe("CodeEditorHost", () => { }); }); + it("deduplicates repeated save shortcut dispatches while a save is in flight", async () => { + const saveDeferred = createDeferred<{ newHash: string }>(); + const sendCommand = vi.fn().mockImplementation(async (op: string, args?: { path?: string }) => { + if (op === "file.write" && args?.path === "src/a.ts") { + return saveDeferred.promise; + } + + if (op === "file.read") { + return { + kind: "text", + content: "hello world", + baseHash: "abc123", + encoding: "utf-8", + }; + } + + return null; + }); + const { store } = setupStore({ + activePath: "src/a.ts", + sendCommand, + openFiles: { + "src/a.ts": { + kind: "text", + path: "src/a.ts", + content: "changed a", + savedContent: "saved a", + baseHash: "hash-a", + isDirty: true, + }, + }, + }); + + render( + + + + ); + + pressSaveShortcut(); + pressSaveShortcut(); + + await waitFor(() => { + expect(sendCommand).toHaveBeenCalledWith( + "file.write", + { + workspaceId: "ws-1", + path: "src/a.ts", + content: "changed a", + baseHash: "hash-a", + }, + undefined + ); + }); + expect(sendCommand.mock.calls.filter(([op]) => op === "file.write")).toHaveLength(1); + + await act(async () => { + saveDeferred.resolve({ newHash: "hash-a-2" }); + }); + }); + + it("deduplicates overlapping save requests before saving state rerenders", async () => { + const saveDeferred = createDeferred<{ newHash: string }>(); + const sendCommand = vi.fn().mockImplementation(async (op: string, args?: { path?: string }) => { + if (op === "file.write" && args?.path === "src/a.ts") { + return saveDeferred.promise; + } + + if (op === "file.read") { + return { + kind: "text", + content: "hello world", + baseHash: "abc123", + encoding: "utf-8", + }; + } + + return null; + }); + const { store } = setupStore({ + activePath: "src/a.ts", + sendCommand, + openFiles: { + "src/a.ts": { + kind: "text", + path: "src/a.ts", + content: "changed a", + savedContent: "saved a", + baseHash: "hash-a", + isDirty: true, + }, + }, + }); + + const { result } = renderHook(() => useCodeEditorActions(), { + wrapper: wrapperFor(store), + }); + + void result.current.handleSave(); + void result.current.handleSave(); + + await waitFor(() => { + expect(sendCommand).toHaveBeenCalledWith( + "file.write", + { + workspaceId: "ws-1", + path: "src/a.ts", + content: "changed a", + baseHash: "hash-a", + }, + undefined + ); + }); + expect(sendCommand.mock.calls.filter(([op]) => op === "file.write")).toHaveLength(1); + + await act(async () => { + saveDeferred.resolve({ newHash: "hash-a-2" }); + }); + }); + it("ignores a stale save success after close all preserves commit preview and the file is reopened", async () => { const staleSave = createDeferred<{ newHash: string }>(); const sendCommand = vi.fn().mockImplementation(async (op: string, args?: { path?: string }) => { @@ -2351,7 +2473,7 @@ describe("CodeEditorHost", () => { wrapper: wrapperFor(store), }); - fireEvent.click(screen.getByRole("button", { name: "Save File" })); + pressSaveShortcut(); await waitFor(() => { expect(sendCommand).toHaveBeenCalledWith( @@ -2393,6 +2515,8 @@ describe("CodeEditorHost", () => { }); fireEvent.click(screen.getByRole("button", { name: "Close all" })); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); expect(store.get(activeFilePathAtomFamily("ws-1"))).toBeNull(); expect(store.get(openFilesAtomFamily("ws-1"))).toEqual({}); @@ -2494,7 +2618,7 @@ describe("CodeEditorHost", () => { wrapper: wrapperFor(store), }); - fireEvent.click(screen.getByRole("button", { name: "Save File" })); + pressSaveShortcut(); await waitFor(() => { expect(sendCommand).toHaveBeenCalledWith( @@ -2536,6 +2660,8 @@ describe("CodeEditorHost", () => { }); fireEvent.click(screen.getByRole("button", { name: "Close all" })); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); await act(async () => { await result.current.openLocation({ diff --git a/packages/web/src/features/code-editor/views/shared/code-editor-host.test.tsx b/packages/web/src/features/code-editor/views/shared/code-editor-host.test.tsx index b0fa94b3..7a4480e3 100644 --- a/packages/web/src/features/code-editor/views/shared/code-editor-host.test.tsx +++ b/packages/web/src/features/code-editor/views/shared/code-editor-host.test.tsx @@ -144,7 +144,27 @@ describe("CodeEditorHeaderActions", () => { render(); expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument(); - expect(screen.getByRole("button", { name: "Save File" })).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument(); + expect(screen.queryByRole("button", { name: "Save File" })).not.toBeInTheDocument(); + }); + + it("renders desktop mode actions as icon-only buttons without save chrome", () => { + const state = createState({ + canDiff: true, + canEdit: true, + canPreview: true, + isSvgTextBacked: false, + mode: "preview", + }); + + render(); + + expect(screen.getByRole("button", { name: "Diff" })).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Preview" })).toHaveAttribute("aria-pressed", "true"); + expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument(); + expect(screen.queryByRole("button", { name: "Save File" })).not.toBeInTheDocument(); + expect(screen.queryByText("Preview")).not.toBeInTheDocument(); + expect(screen.queryByText("Edit")).not.toBeInTheDocument(); }); it("renders semantic icons for save and external file alerts", () => { diff --git a/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx b/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx index 4e7a53a5..87cbaf89 100644 --- a/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx +++ b/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx @@ -1,4 +1,4 @@ -import { FileText, Image as ImageIcon, Save, X } from "lucide-react"; +import { Eye, FileCode2, GitCompareArrows, Image as ImageIcon, PencilLine, X } from "lucide-react"; import type { FC } from "react"; import { IconButton, Tooltip } from "../../../../components/ui"; import { useTranslation } from "../../../../lib/i18n"; @@ -26,10 +26,12 @@ interface CodeEditorHeaderActionsProps { interface CodeEditorDesktopHeaderActionsProps { state: CodeEditorState; + onRequestClose?: () => void; showCloseAction?: boolean; } export const CodeEditorDesktopHeaderActions: FC = ({ + onRequestClose, state, showCloseAction = true, }) => { @@ -38,18 +40,14 @@ export const CodeEditorDesktopHeaderActions: FC { if (isSvgTextBacked && !isImageFile) { toggleSvgTextMode(); @@ -64,63 +62,59 @@ export const CodeEditorDesktopHeaderActions: FC {canDiff ? ( - + + + ) : null} {canPreview ? ( - + + + ) : null} {canEdit ? ( - + + + ) : null} - - - {showCloseAction ? ( } - onClick={handleClose} + icon={} + onClick={handleCloseClick} size="sm" /> @@ -233,7 +227,7 @@ export const CodeEditorHeaderActions: FC = ({ : } + icon={isImageFile ? : } onClick={toggleSvgTextMode} /> diff --git a/packages/web/src/features/code-editor/views/shared/editor-surface.test.tsx b/packages/web/src/features/code-editor/views/shared/editor-surface.test.tsx index d0c71f38..d5c7fa38 100644 --- a/packages/web/src/features/code-editor/views/shared/editor-surface.test.tsx +++ b/packages/web/src/features/code-editor/views/shared/editor-surface.test.tsx @@ -10,8 +10,12 @@ vi.mock("../../../../lib/i18n", () => ({ "code_editor.mode_edit": "编辑", "code_editor.mode_diff": "Diff", "code_editor.diff_saved_only": "Diff preview is based on saved file contents.", + "code_editor.close_unsaved_title": "Discard unsaved changes?", + "code_editor.close_unsaved_description": "app.ts has unsaved changes.", + "code_editor.discard_and_close": "Discard and Close", "action.close": "Close", "action.save_file": "Save File", + "common.cancel": "Cancel", }; return dictionary[key] ?? key; }, @@ -155,7 +159,7 @@ function createState(overrides: Partial = {}): CodeEditorState } describe("EditorSurface", () => { - it("renders 预览, 编辑, and Diff in one persistent header for text files", () => { + it("renders icon-only 预览, 编辑, and Diff actions in one persistent header for text files", () => { const state = createState(); render(); @@ -163,6 +167,8 @@ describe("EditorSurface", () => { expect(screen.getByRole("button", { name: "预览" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "编辑" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Diff" })).toBeInTheDocument(); + expect(screen.queryByText("预览")).not.toBeInTheDocument(); + expect(screen.queryByText("编辑")).not.toBeInTheDocument(); }); it("hides Diff when the active file has no git changes", () => { @@ -297,7 +303,7 @@ describe("EditorSurface", () => { expect(state.openInDiffMode).toHaveBeenCalledTimes(1); }); - it("renders desktop header actions in the fixed order and left-aligned group", () => { + it("renders desktop header actions in the fixed order without a save button", () => { const state = createState({ canSave: true }); const { container } = render(); @@ -308,7 +314,30 @@ describe("EditorSurface", () => { .getAllByRole("button") .map((button) => button.getAttribute("aria-label") ?? button.textContent ?? ""); - expect(buttonLabels).toEqual(["Diff", "预览", "编辑", "Save File", "Close"]); + expect(buttonLabels).toEqual(["Diff", "预览", "编辑", "Close"]); + expect(screen.queryByRole("button", { name: "Save File" })).not.toBeInTheDocument(); + }); + + it("shows only the active filename in the header and marks dirty files with a status dot", () => { + const state = createState({ + currentFile: { + kind: "text", + path: "packages/web/src/features/code-editor/views/shared/editor-surface.tsx", + content: "changed", + savedContent: "saved", + baseHash: "hash-1", + isDirty: true, + }, + }); + + render(); + + const title = screen.getByText("editor-surface.tsx"); + const titleContainer = title.closest(".code-file-path"); + + expect(titleContainer).toHaveTextContent("editor-surface.tsx"); + expect(titleContainer).not.toHaveTextContent("packages/web/src"); + expect(titleContainer?.querySelector(".dirty-indicator")).toBeTruthy(); }); it("renders a commit file list preview inside the shared editor surface", () => { @@ -405,6 +434,36 @@ describe("EditorSurface", () => { expect(state.handleClose).toHaveBeenCalledTimes(1); }); + it("confirms before closing a dirty text file and only closes after discard", () => { + const state = createState({ + currentFile: { + kind: "text", + path: "src/app.ts", + content: "changed", + savedContent: "saved", + baseHash: "hash-1", + isDirty: true, + }, + }); + + render(); + + fireEvent.click(screen.getByRole("button", { name: "Close" })); + + expect(state.handleClose).not.toHaveBeenCalled(); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + expect(screen.getByText("app.ts has unsaved changes.")).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Cancel" })); + expect(state.handleClose).not.toHaveBeenCalled(); + expect(screen.queryByRole("dialog", { name: "Discard unsaved changes?" })).toBeNull(); + + fireEvent.click(screen.getByRole("button", { name: "Close" })); + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); + + expect(state.handleClose).toHaveBeenCalledTimes(1); + }); + it("renders worktree image diffs from diff payload metadata instead of current file cache", () => { const state = createState({ mode: "diff", diff --git a/packages/web/src/features/code-editor/views/shared/editor-surface.tsx b/packages/web/src/features/code-editor/views/shared/editor-surface.tsx index 3f7888e7..431cdb31 100644 --- a/packages/web/src/features/code-editor/views/shared/editor-surface.tsx +++ b/packages/web/src/features/code-editor/views/shared/editor-surface.tsx @@ -1,6 +1,13 @@ import { X } from "lucide-react"; import type { FC } from "react"; -import { EmptyState, IconButton, ThemedIcon, Tooltip } from "../../../../components/ui"; +import { useState } from "react"; +import { + ConfirmDialog, + EmptyState, + IconButton, + ThemedIcon, + Tooltip, +} from "../../../../components/ui"; import { useTranslation } from "../../../../lib/i18n"; import { deriveDocumentPreviewKind } from "../../../workspace/atoms"; import { CommitFileListPreview } from "../../components/commit-file-list-preview"; @@ -17,8 +24,13 @@ interface EditorSurfaceProps { chrome?: CodeEditorChrome; } +function getFileName(path: string): string { + return path.split(/[\\/]/).pop() || path; +} + export const EditorSurface: FC = ({ state, chrome = "full" }) => { const t = useTranslation(); + const [closeConfirmOpen, setCloseConfirmOpen] = useState(false); const { activeFilePath, activeDiffChange, @@ -64,10 +76,14 @@ export const EditorSurface: FC = ({ state, chrome = "full" } const isCommitFileDiffPreview = commitFileDiffPreview !== null; const isCommitPreview = isCommitFileListPreview || isCommitFileDiffPreview; const commitPreview = commitFileListPreview ?? commitFileDiffPreview; - const dirtyIndicator = - !isCommitPreview && currentTextFile?.isDirty ? ( - * - ) : null; + const isDirtyTextFile = !isCommitPreview && currentTextFile?.isDirty === true; + const dirtyIndicator = isDirtyTextFile ? ( + + ) : null; const textDiffPreview = worktreeFileDiffPreview && mode === "diff" && worktreeFileDiffPreview.renderAs === "text" ? worktreeFileDiffPreview @@ -91,8 +107,22 @@ export const EditorSurface: FC = ({ state, chrome = "full" } const titleText = commitPreview ? (commitPreview.title ?? commitPreview.path) : currentFile - ? currentFile.path + ? getFileName(currentFile.path) : (activeDiffChange?.title ?? activeFilePath ?? t("file.title")); + const closeConfirmFileName = + currentTextFile?.path !== undefined ? getFileName(currentTextFile.path) : t("file.title"); + const requestClose = () => { + if (isDirtyTextFile) { + setCloseConfirmOpen(true); + return; + } + + void handleClose(); + }; + const confirmClose = () => { + setCloseConfirmOpen(false); + void handleClose(); + }; const buildRevisionUrl = (path: string, revision?: string) => { const query = new URLSearchParams({ workspaceId: workspace.id, @@ -132,10 +162,13 @@ export const EditorSurface: FC = ({ state, chrome = "full" }
{showHeader ? (
- + {currentFile && !isCommitPreview ? ( <> - {titleText} + {titleText} {dirtyIndicator} ) : ( @@ -148,14 +181,14 @@ export const EditorSurface: FC = ({ state, chrome = "full" } } + icon={} onClick={handleClose} size="sm" />
) : ( - + )}
) : null} @@ -262,6 +295,16 @@ export const EditorSurface: FC = ({ state, chrome = "full" } )}
+
); }; diff --git a/packages/web/src/features/monitoring/page.test.tsx b/packages/web/src/features/monitoring/page.test.tsx index 5f5bba3d..a3d1561d 100644 --- a/packages/web/src/features/monitoring/page.test.tsx +++ b/packages/web/src/features/monitoring/page.test.tsx @@ -586,7 +586,7 @@ describe("MonitoringContent", () => { id: "session:sess-1", parentId: "workspace:ws-1", kind: "session", - label: "Claude session", + label: "Codex", cpuPercent: 27, memoryBytes: 320, processCount: 2, @@ -659,12 +659,15 @@ describe("MonitoringContent", () => { expect(await screen.findByRole("button", { name: "Refresh monitoring" })).toBeInTheDocument(); expect(screen.getAllByText("Workspace Alpha").length).toBeGreaterThan(1); - expect(screen.getByText("Claude session")).toBeInTheDocument(); + expect(screen.getByText("Codex")).toBeInTheDocument(); expect(screen.queryByText("python tool.py")).not.toBeInTheDocument(); - fireEvent.click(screen.getByRole("button", { name: "Claude session 27.0% / 320 B" })); + expect(screen.getByText("Workspace total · 42.0% / 600 B")).toBeInTheDocument(); + expect(screen.getByText("Session · 27.0% / 320 B")).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Session Codex 27.0% / 320 B" })); expect(screen.getByText("Detail panel")).toBeInTheDocument(); - expect(screen.getAllByText("Claude session")).toHaveLength(2); + expect(screen.getAllByText("Codex")).toHaveLength(2); expect( screen.getByText("Select a workspace, session, or process to inspect details.") ).toBeInTheDocument(); @@ -878,7 +881,11 @@ describe("MonitoringContent", () => { renderMonitoringPage(response, "mobile"); expect((await screen.findAllByText("Workspace Alpha")).length).toBeGreaterThan(1); - fireEvent.click(screen.getByRole("button", { name: "Claude session 27.0% / 320 B" })); + fireEvent.click( + screen.getByRole("button", { + name: "Session Claude session 27.0% / 320 B", + }) + ); expect(screen.getByRole("heading", { level: 2, name: "Detail panel" })).toBeInTheDocument(); expect(screen.getAllByText("Claude session")).toHaveLength(2); @@ -1003,7 +1010,7 @@ describe("MonitoringContent", () => { expect(await screen.findByText("Subprocess drill-down")).toBeInTheDocument(); fireEvent.click( screen.getByRole("button", { - name: `${longPath} 12.0% / 140 B`, + name: `Subprocess ${longPath} 12.0% / 140 B`, }) ); @@ -1011,7 +1018,7 @@ describe("MonitoringContent", () => { expect( screen .getByRole("button", { - name: `${longPath} 12.0% / 140 B`, + name: `Subprocess ${longPath} 12.0% / 140 B`, }) .querySelector(".monitoring-entity-row__title") ).toHaveTextContent(longPath); @@ -1185,7 +1192,9 @@ describe("MonitoringContent", () => { expect(await screen.findByText("Subprocess drill-down")).toBeInTheDocument(); expect(screen.getByText("python indexer.py")).toBeInTheDocument(); - fireEvent.click(screen.getByRole("button", { name: "python indexer.py 7.0% / 120 B" })); + fireEvent.click( + screen.getByRole("button", { name: "Subprocess python indexer.py 7.0% / 120 B" }) + ); expect(screen.getByText("Detail panel")).toBeInTheDocument(); }); diff --git a/packages/web/src/features/monitoring/page.tsx b/packages/web/src/features/monitoring/page.tsx index 8666ca63..e489c0a9 100644 --- a/packages/web/src/features/monitoring/page.tsx +++ b/packages/web/src/features/monitoring/page.tsx @@ -95,6 +95,23 @@ function sortEntities(entities: MonitoringEntitySummary[], mode: SortMode) { }); } +function sortAttributionTree( + workspaces: MonitoringEntitySummary[], + sessions: MonitoringEntitySummary[], + mode: SortMode +) { + const sessionsByParent = new Map(); + for (const session of sessions) { + const parentId = session.parentId ?? ""; + sessionsByParent.set(parentId, [...(sessionsByParent.get(parentId) ?? []), session]); + } + + return sortEntities(workspaces, mode).flatMap((workspace) => [ + workspace, + ...sortEntities(sessionsByParent.get(workspace.id) ?? [], mode), + ]); +} + function entityHistory( history: MonitoringHistoryBundle, entity: MonitoringEntitySummary @@ -120,6 +137,22 @@ function entityDetailRows(entity: MonitoringEntitySummary, t: ReturnType +) { + switch (kind) { + case "workspace": + return t("monitoring.entity_kind_workspace"); + case "session": + return t("monitoring.entity_kind_session"); + case "subprocess_group": + return t("monitoring.entity_kind_subprocess"); + case "background_group": + return t("monitoring.entity_kind_background"); + } +} + function formatMonitoringMode(mode: MonitoringMode, t: ReturnType) { switch (mode) { case "disabled": @@ -162,34 +195,40 @@ function EntityList({ sampledAt: number; timeWindow: TimeWindow; }) { + const t = useTranslation(); + return (
- {entities.map((entity) => ( - - ))} + {entities.map((entity) => { + const kindLabel = formatEntityKindLabel(entity.kind, t); + const displayTitle = entity.label; + return ( + + ); + })}
); } @@ -337,7 +376,7 @@ export function MonitoringDashboard({ return []; } - return sortEntities([...response.snapshot.workspaces, ...response.snapshot.sessions], sortMode); + return sortAttributionTree(response.snapshot.workspaces, response.snapshot.sessions, sortMode); }, [response, sortMode]); const processEntities = useMemo(() => { @@ -509,7 +548,7 @@ export function MonitoringDashboard({
{selectedEntity ? ( - {selectedEntity.kind} + {formatEntityKindLabel(selectedEntity.kind, t)} ) : null} diff --git a/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx b/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx index 9e0b798c..bac603f3 100644 --- a/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx +++ b/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx @@ -23,9 +23,19 @@ import { OpenEditorsSection } from "./open-editors-section"; vi.mock("../../../../lib/i18n", () => ({ useTranslation: () => (key: string, params?: Record) => { + if (key === "common.cancel") return "Cancel"; if (key === "workspace.sidebar.open_editors") return "Open Editors"; if (key === "action.close") return "Close"; if (key === "action.close_all") return "Close all"; + if (key === "code_editor.unsaved_changes") return "Unsaved changes"; + if (key === "code_editor.close_unsaved_title") return "Discard unsaved changes?"; + if (key === "code_editor.close_unsaved_description") { + return `${params?.name ?? "File"} has unsaved changes.`; + } + if (key === "code_editor.discard_and_close") return "Discard and Close"; + if (key === "workspace.open_editors.close_all_unsaved_description") { + return `${params?.count ?? 0} open editors have unsaved changes.`; + } if (key === "workspace.open_editors.title_with_count") { return `${params?.title ?? "Open Editors"} (${params?.count ?? 0})`; } @@ -49,6 +59,15 @@ function createFile(path: string): OpenFile { }; } +function createDirtyFile(path: string): OpenFile { + return { + ...createFile(path), + content: "changed", + savedContent: "saved", + isDirty: true, + }; +} + function renderSection( openFiles?: Record, activePath?: string | null, @@ -234,4 +253,57 @@ describe("OpenEditorsSection", () => { expect(store.get(activeEditorPaneIdAtomFamily("ws-test"))).toBe("root"); expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("README.md"); }); + + it("marks dirty open editors and confirms before closing a dirty row", () => { + const { store } = renderSection( + { + "biome.jsonc": createDirtyFile("biome.jsonc"), + }, + "biome.jsonc" + ); + + const row = screen + .getByRole("button", { name: "biome.jsonc" }) + .closest(".workspace-open-editors__row") as HTMLElement; + + expect(row.querySelector(".workspace-open-editors__dirty-indicator")).toBeTruthy(); + + fireEvent.click(within(row).getByRole("button", { name: "Close biome.jsonc" })); + + expect(store.get(openFilesAtomFamily("ws-test"))["biome.jsonc"]).toBeDefined(); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Cancel" })); + expect(store.get(openFilesAtomFamily("ws-test"))["biome.jsonc"]).toBeDefined(); + + fireEvent.click(within(row).getByRole("button", { name: "Close biome.jsonc" })); + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); + + expect(store.get(openFilesAtomFamily("ws-test"))["biome.jsonc"]).toBeUndefined(); + expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull(); + }); + + it("confirms before closing all when open editors include dirty files", () => { + const { store } = renderSection( + { + "src/clean.ts": createFile("src/clean.ts"), + "src/dirty.ts": createDirtyFile("src/dirty.ts"), + }, + "src/clean.ts" + ); + + fireEvent.click(screen.getByRole("button", { name: "Close all" })); + + expect(Object.keys(store.get(openFilesAtomFamily("ws-test")))).toEqual([ + "src/clean.ts", + "src/dirty.ts", + ]); + expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); + expect(screen.getByText("1 open editors have unsaved changes.")).toBeInTheDocument(); + + fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); + + expect(store.get(openFilesAtomFamily("ws-test"))).toEqual({}); + expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull(); + }); }); diff --git a/packages/web/src/features/workspace/views/shared/open-editors-section.tsx b/packages/web/src/features/workspace/views/shared/open-editors-section.tsx index 2dd1e641..e1770f4b 100644 --- a/packages/web/src/features/workspace/views/shared/open-editors-section.tsx +++ b/packages/web/src/features/workspace/views/shared/open-editors-section.tsx @@ -1,7 +1,7 @@ import { useAtomValue } from "jotai"; import { ChevronDown, ChevronRight, X } from "lucide-react"; import { useEffect, useState } from "react"; -import { IconButton, Tooltip } from "../../../../components/ui"; +import { ConfirmDialog, IconButton, Tooltip } from "../../../../components/ui"; import { useTranslation } from "../../../../lib/i18n"; import { hasPendingEditorLoad, @@ -22,6 +22,16 @@ interface OpenEditorsSectionProps { title?: string; } +type PendingCloseRequest = + | { + kind: "path"; + path: string; + } + | { + dirtyCount: number; + kind: "all"; + }; + export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEditorsSectionProps) { const t = useTranslation(); const openFiles = useAtomValue(openFilesAtomFamily(workspaceId)); @@ -30,6 +40,7 @@ export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEdi const { openWorkspaceFile } = useOpenWorkspaceFile(workspaceId); const { closeAll, closePath } = useOpenEditorsActions(workspaceId); const [collapsed, setCollapsed] = useState(false); + const [pendingCloseRequest, setPendingCloseRequest] = useState(null); const [, setPendingLoadVersion] = useState(0); useEffect(() => { @@ -61,6 +72,49 @@ export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEdi const toggleLabel = isExpanded ? t("workspace.open_editors.collapse_label") : t("workspace.open_editors.expand_label"); + const dirtyOpenEditorPaths = Object.values(openFiles) + .filter((file) => file.kind === "text" && file.isDirty) + .map((file) => file.path); + const closeConfirmDescription = + pendingCloseRequest?.kind === "path" + ? t("code_editor.close_unsaved_description", { name: pendingCloseRequest.path }) + : pendingCloseRequest?.kind === "all" + ? t("workspace.open_editors.close_all_unsaved_description", { + count: pendingCloseRequest.dirtyCount, + }) + : undefined; + const requestClosePath = (path: string) => { + const file = openFiles[path]; + if (file?.kind === "text" && file.isDirty) { + setPendingCloseRequest({ kind: "path", path }); + return; + } + + closePath(path); + }; + const requestCloseAll = () => { + if (dirtyOpenEditorPaths.length > 0) { + setPendingCloseRequest({ dirtyCount: dirtyOpenEditorPaths.length, kind: "all" }); + return; + } + + closeAll(); + }; + const confirmPendingClose = () => { + const request = pendingCloseRequest; + setPendingCloseRequest(null); + + if (!request) { + return; + } + + if (request.kind === "path") { + closePath(request.path); + return; + } + + closeAll(); + }; return (
@@ -91,7 +145,7 @@ export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEdi type="button" className="workspace-sidebar-section__action workspace-open-editors__close-all" disabled={openEditorPaths.length === 0} - onClick={() => closeAll()} + onClick={requestCloseAll} title={headingLabel} > {t("action.close_all")} @@ -99,42 +153,69 @@ export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEdi {isExpanded ? (
- {openEditorPaths.map((path) => ( -
- - - } - size="sm" - onClick={() => closePath(path)} - /> - -
- ))} + {openEditorPaths.map((path) => { + const file = openFiles[path]; + const isDirtyTextFile = file?.kind === "text" && file.isDirty; + + return ( +
+ + + } + size="sm" + onClick={() => requestClosePath(path)} + /> + +
+ ); + })}
) : null} + { + if (!open) { + setPendingCloseRequest(null); + } + }} + title={t("code_editor.close_unsaved_title")} + description={closeConfirmDescription} + cancelText={t("common.cancel")} + confirmText={t("code_editor.discard_and_close")} + tone="danger" + onConfirm={confirmPendingClose} + />
); } diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 306f4c82..823be5c4 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -174,6 +174,7 @@ "open_editors": { "title_with_count": "{title} ({count})", "close_path": "Close {path}", + "close_all_unsaved_description": "{count} open editors have unsaved changes. Closing them will discard those edits.", "expand_label": "Expand Open Editors", "collapse_label": "Collapse Open Editors" }, @@ -441,6 +442,10 @@ "mode_edit": "Edit", "mode_diff": "Diff", "diff_saved_only": "Diff preview is based on saved file contents.", + "unsaved_changes": "Unsaved changes", + "close_unsaved_title": "Discard unsaved changes?", + "close_unsaved_description": "{name} has unsaved changes. Closing it will discard those edits.", + "discard_and_close": "Discard and Close", "open_failed_title": "Failed to open file", "empty_hint": "Select a file on the left to open it in the editor.", "modified_on_disk": "This file changed on disk after you opened it. Save carefully or reload the file.", @@ -896,6 +901,10 @@ "subprocess_empty_description": "No subprocesses are currently contributing measurable load.", "detail_panel": "Detail panel", "select_entity": "Select a workspace, session, or process to inspect details.", + "entity_kind_workspace": "Workspace total", + "entity_kind_session": "Session", + "entity_kind_subprocess": "Subprocess", + "entity_kind_background": "Background task", "cpu": "CPU", "memory": "Memory", "available_memory": "Available memory", diff --git a/packages/web/src/locales/zh.json b/packages/web/src/locales/zh.json index a70501d6..9d0a213c 100644 --- a/packages/web/src/locales/zh.json +++ b/packages/web/src/locales/zh.json @@ -174,6 +174,7 @@ "open_editors": { "title_with_count": "{title} ({count})", "close_path": "关闭 {path}", + "close_all_unsaved_description": "{count} 个打开的编辑器有未保存的更改。关闭后这些编辑将被放弃。", "expand_label": "展开打开的编辑器", "collapse_label": "收起打开的编辑器" }, @@ -441,6 +442,10 @@ "mode_edit": "编辑", "mode_diff": "Diff", "diff_saved_only": "Diff 仅基于已保存到磁盘的文件内容。", + "unsaved_changes": "未保存的更改", + "close_unsaved_title": "放弃未保存的更改？", + "close_unsaved_description": "{name} 有未保存的更改。关闭后这些编辑将被放弃。", + "discard_and_close": "放弃并关闭", "open_failed_title": "打开文件失败", "empty_hint": "从左侧选择一个文件以在编辑器中打开。", "modified_on_disk": "该文件在打开后已被磁盘上的其他操作修改。请谨慎保存或重新加载文件。", @@ -896,6 +901,10 @@ "subprocess_empty_description": "当前没有子进程产生可观测负载。", "detail_panel": "详情面板", "select_entity": "选择一个工作区、会话或进程以查看详情。", + "entity_kind_workspace": "工作区汇总", + "entity_kind_session": "会话", + "entity_kind_subprocess": "子进程", + "entity_kind_background": "后台任务", "cpu": "CPU", "memory": "内存", "available_memory": "可用内存", diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index a37998b0..f0a31d70 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -1800,6 +1800,7 @@ } .monitoring-process-list { + position: relative; display: flex; flex-direction: column; gap: var(--sp-3); @@ -1839,7 +1840,29 @@ } .monitoring-entity-row--child { - padding-left: var(--sp-5); + position: relative; + margin-left: var(--sp-5); + width: calc(100% - var(--sp-5)); + box-sizing: border-box; + padding-left: calc(var(--sp-5) + var(--sp-3)); + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--surface-elevated) 92%, var(--surface-page) 8%) 0%, + color-mix(in srgb, var(--surface-elevated) 78%, var(--surface-page) 22%) 100% + ); +} + +.monitoring-entity-row--child::before { + content: ""; + position: absolute; + left: calc(-1 * var(--sp-3)); + top: calc(-1 * var(--sp-3)); + width: var(--sp-5); + height: calc(50% + var(--sp-3)); + border-left: 1px solid color-mix(in srgb, var(--status-success-fg) 22%, var(--border-default)); + border-bottom: 1px solid color-mix(in srgb, var(--status-success-fg) 22%, var(--border-default)); + border-bottom-left-radius: var(--radius-xs); + pointer-events: none; } .monitoring-page { @@ -8151,8 +8174,24 @@ textarea.input { * inline save-error ribbon and the Monaco pane need dedicated styling so * they sit naturally inside .workspace-git-editor. */ .code-file-path .dirty-indicator { - margin-left: 4px; - color: var(--editor-dirty-indicator-fg); + display: inline-block; + width: 7px; + height: 7px; + flex-shrink: 0; + margin-left: 6px; + border-radius: 999px; + background: var(--editor-dirty-indicator-fg); + box-shadow: 0 0 0 2px var(--component-mix-status-warning-fg-15pct-transparent); +} + +.editor-pane-card__dirty-indicator { + display: inline-block; + width: 7px; + height: 7px; + flex-shrink: 0; + border-radius: 999px; + background: var(--editor-dirty-indicator-fg); + box-shadow: 0 0 0 2px var(--component-mix-status-warning-fg-15pct-transparent); } .code-mode-btn:disabled { @@ -8163,7 +8202,7 @@ textarea.input { .code-mode-btn svg { display: inline-block; vertical-align: -2px; - margin-right: 4px; + margin-right: 0; } .code-mode-btn svg:last-child { @@ -8280,17 +8319,22 @@ textarea.input { display: inline-flex; align-items: center; justify-content: flex-end; - flex-wrap: wrap; - gap: var(--gap-tight); + flex-wrap: nowrap; + gap: var(--gap-compact); margin-left: auto; - padding: var(--sp-1); - border-radius: var(--radius-lg); - background: var(--component-mix-surface-hover-72pct-surface-panel-28pct); + padding: 0; + border-radius: var(--radius-md); + background: transparent; } .editor-surface__toolbar .code-mode-btn { border: none; box-shadow: none; + width: 26px; + min-width: 26px; + height: 26px; + padding: 0; + justify-content: center; } .editor-surface__toolbar .code-mode-btn.active { @@ -8382,15 +8426,23 @@ textarea.input { } .code-file-path { + display: inline-flex; + align-items: center; + min-width: 0; max-width: 70%; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary); } +.code-file-path__name { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .code-editor-body { flex: 1; min-height: 0; @@ -8735,7 +8787,8 @@ textarea.input { } .code-editor-header { - padding: var(--gap-default) var(--editor-toolbar-inset); + min-height: var(--panel-header-height); + padding: var(--gap-tight) var(--inset-control-inline); border-bottom: 1px solid var(--workspace-editor-toolbar-border); background: linear-gradient( 180deg, @@ -8760,9 +8813,12 @@ textarea.input { } .code-mode-btn { - height: 24px; - padding: 0 10px; + width: 26px; + min-width: 26px; + height: 26px; + padding: 0; border-radius: 6px; + justify-content: center; } .code-mode-btn.active { @@ -14106,7 +14162,8 @@ body.is-dragging-pane .session-action-btn-drag { } .workspace-open-editors__item { - display: block; + display: flex; + align-items: center; width: 100%; min-width: 0; min-height: 28px; @@ -14120,13 +14177,31 @@ body.is-dragging-pane .session-action-btn-drag { white-space: nowrap; } +.workspace-open-editors__item-content { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 6px; +} + .workspace-open-editors__item-label { display: block; + min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.workspace-open-editors__dirty-indicator { + display: inline-block; + width: 7px; + height: 7px; + flex-shrink: 0; + border-radius: 999px; + background: var(--editor-dirty-indicator-fg); + box-shadow: 0 0 0 2px var(--component-mix-status-warning-fg-15pct-transparent); +} + .workspace-open-editors__item:hover:not(.workspace-open-editors__item--active) { background: var(--surface-hover); color: var(--text-primary); @@ -15719,12 +15794,6 @@ body.is-dragging-pane .session-action-btn-drag { padding: 0; } -.editor-pane-card__toolbar-row { - justify-content: flex-end; - flex-shrink: 0; - padding-inline: var(--space-3); -} - .editor-pane-card__content, .editor-pane-card__content > * { min-width: 0; @@ -15823,7 +15892,8 @@ body.is-dragging-pane .session-action-btn-drag { display: flex; align-items: center; gap: var(--gap-default); - padding: var(--gap-default) var(--editor-toolbar-inset); + min-height: var(--panel-header-height); + padding: var(--gap-tight) var(--inset-control-inline); border-bottom: 1px solid var(--workspace-editor-toolbar-border); background: var(--workspace-editor-toolbar-surface); backdrop-filter: var(--material-backdrop-filter); diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts index 64535f1c..91c85b08 100644 --- a/packages/web/src/styles/components.theme.test.ts +++ b/packages/web/src/styles/components.theme.test.ts @@ -1581,6 +1581,8 @@ describe("components.css theme-sensitive surfaces", () => { it("keeps workspace editor and diff surfaces theme-aware", () => { const editorShell = getLastRuleBlock(".workspace-git-editor"); const editorHeader = getLastRuleBlock(".code-editor-header"); + const editorDirtyIndicator = getLastRuleBlock(".code-file-path .dirty-indicator"); + const editorPaneDirtyIndicator = getLastRuleBlock(".editor-pane-card__dirty-indicator"); const editorError = getLastRuleBlock(".code-editor-error"); const codeLines = getLastRuleBlock(".code-lines"); const codeModeToggleRules = getRuleBlocksFrom(stylesheet, ".code-mode-toggle").join("\n"); @@ -1603,6 +1605,12 @@ describe("components.css theme-sensitive surfaces", () => { expect(editorHeader).toContain("background: var(--workspace-editor-toolbar-surface)"); expect(editorHeader).toContain("backdrop-filter: var(--material-backdrop-filter)"); expect(editorHeader).not.toContain("var(--component-rgba-18-26-34-0-96)"); + expect(editorDirtyIndicator).toContain("width: 7px"); + expect(editorDirtyIndicator).toContain("height: 7px"); + expect(editorDirtyIndicator).toContain("background: var(--editor-dirty-indicator-fg)"); + expect(editorPaneDirtyIndicator).toContain("width: 7px"); + expect(editorPaneDirtyIndicator).toContain("height: 7px"); + expect(editorPaneDirtyIndicator).toContain("background: var(--editor-dirty-indicator-fg)"); expect(editorError).toContain("gap: var(--gap-tight)"); expect(editorError).toContain("padding: var(--gap-tight) var(--inset-control-inline)"); expect(editorError).toContain("background: var(--editor-diagnostic-error-bg)"); @@ -1702,7 +1710,8 @@ describe("components.css theme-sensitive surfaces", () => { ); expect(focusPulse).toContain("z-index: var(--z-inline-raised)"); expect(gitView).toContain("padding: 0"); - expect(editorHeader).toContain("padding: var(--gap-default) var(--editor-toolbar-inset)"); + expect(editorHeader).toContain("min-height: var(--panel-header-height)"); + expect(editorHeader).toContain("padding: var(--gap-tight) var(--inset-control-inline)"); expect(editorHeader).toContain( "border-bottom: 1px solid var(--workspace-editor-toolbar-border)" ); @@ -1802,10 +1811,14 @@ describe("components.css theme-sensitive surfaces", () => { expect(toolbar).toContain("display: inline-flex"); expect(toolbar).toContain("justify-content: flex-end"); + expect(toolbar).toContain("flex-wrap: nowrap"); expect(toolbar).toContain("margin-left: auto"); + expect(toolbar).toContain("background: transparent"); expect(toolbar).not.toContain("border: 1px"); expect(toolbarButtons).toContain("border: none"); expect(toolbarButtons).toContain("box-shadow: none"); + expect(toolbarButtons).toContain("width: 26px"); + expect(toolbarButtons).toContain("height: 26px"); expect(activeToolbarButtons).toContain("box-shadow: none"); }); @@ -3015,14 +3028,25 @@ describe("components.css theme-sensitive surfaces", () => { it("keeps monitoring surfaces on shared theme tokens instead of bespoke colors", () => { const monitoringCard = getLastRuleBlock(".monitoring-card"); const monitoringSettingsCard = getLastRuleBlock(".settings-card--monitoring"); + const monitoringProcessList = getLastRuleBlock(".monitoring-process-list"); const monitoringEntityRow = getLastRuleBlock(".monitoring-entity-row"); + const monitoringChildRow = getLastRuleBlock(".monitoring-entity-row--child"); + const monitoringChildConnector = getLastRuleBlock(".monitoring-entity-row--child::before"); const monitoringSparkline = getLastRuleBlock(".monitoring-sparkline"); expect(monitoringCard).toContain("border-radius: var(--monitoring-card-radius)"); expect(monitoringCard).toContain("box-shadow: var(--shadow-sm)"); expect(monitoringSettingsCard).toContain("border: 1px solid var(--surface-elevated-border)"); expect(monitoringSettingsCard).toContain("background: var(--surface-elevated)"); + expect(monitoringProcessList).toContain("position: relative"); expect(monitoringEntityRow).toContain("border-radius: var(--monitoring-item-radius)"); + expect(monitoringChildRow).toContain("position: relative"); + expect(monitoringChildRow).toContain("margin-left: var(--sp-5)"); + expect(monitoringChildRow).toContain("width: calc(100% - var(--sp-5))"); + expect(monitoringChildRow).toContain("padding-left: calc(var(--sp-5) + var(--sp-3))"); + expect(monitoringChildConnector).toContain('content: ""'); + expect(monitoringChildConnector).toContain("border-left: 1px solid color-mix"); + expect(monitoringChildConnector).toContain("border-bottom: 1px solid color-mix"); expect(monitoringSparkline).toContain("color: var(--status-info-fg)"); }); @@ -3328,7 +3352,9 @@ describe("components.css theme-sensitive surfaces", () => { const searchDetailLabel = getLastRuleBlock(".workspace-search-panel__detail-label"); const searchResults = getLastRuleBlock(".workspace-search-panel__results"); const openEditorsItem = getLastRuleBlock(".workspace-open-editors__item"); + const openEditorsItemContent = getLastRuleBlock(".workspace-open-editors__item-content"); const openEditorsItemLabel = getLastRuleBlock(".workspace-open-editors__item-label"); + const openEditorsDirtyIndicator = getLastRuleBlock(".workspace-open-editors__dirty-indicator"); const searchGroup = getLastRuleBlock(".workspace-search-panel__group"); const searchGroupAdjacent = getLastRuleBlock( ".workspace-search-panel__group + .workspace-search-panel__group" @@ -3406,11 +3432,17 @@ describe("components.css theme-sensitive surfaces", () => { expect(searchDetailHeading).toContain("padding-inline-end: 0"); expect(searchDetailLabel).toContain("font-size: 10px"); expect(searchResults).toContain("padding: 0"); + expect(openEditorsItem).toContain("display: flex"); expect(openEditorsItem).toContain("overflow: hidden"); expect(openEditorsItem).toContain("text-overflow: ellipsis"); expect(openEditorsItem).toContain("white-space: nowrap"); + expect(openEditorsItemContent).toContain("display: inline-flex"); + expect(openEditorsItemContent).toContain("gap: 6px"); expect(openEditorsItemLabel).toContain("text-overflow: ellipsis"); expect(openEditorsItemLabel).toContain("white-space: nowrap"); + expect(openEditorsDirtyIndicator).toContain("width: 7px"); + expect(openEditorsDirtyIndicator).toContain("height: 7px"); + expect(openEditorsDirtyIndicator).toContain("background: var(--editor-dirty-indicator-fg)"); expect(searchGroup).toContain( "border-top: 1px solid var(--component-mix-border-default-92pct-transparent)" ); From b5b3e139d4eef4a1a2ab21c885763f8f2ecb9818 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sat, 30 May 2026 23:09:45 +0800 Subject: [PATCH 152/162] Tighten terminal empty-state copy --- .../features/terminal-panel/__tests__/terminal-panel.test.tsx | 2 +- packages/web/src/locales/en.json | 2 +- packages/web/src/locales/zh.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web/src/features/terminal-panel/__tests__/terminal-panel.test.tsx b/packages/web/src/features/terminal-panel/__tests__/terminal-panel.test.tsx index fbbb0712..c020a5ba 100644 --- a/packages/web/src/features/terminal-panel/__tests__/terminal-panel.test.tsx +++ b/packages/web/src/features/terminal-panel/__tests__/terminal-panel.test.tsx @@ -545,7 +545,7 @@ describe("TerminalPanel", () => { ).toBeTruthy(); expect( within(emptyPanel as HTMLElement).getByText( - "Launch a shell to inspect files, run commands, and verify changes without leaving the workspace." + "Launch a shell to inspect files and run commands." ) ).toHaveClass("bottom-terminal-empty-hint"); diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 823be5c4..3a3f6e19 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -329,7 +329,7 @@ "agent": "Agent Terminal", "reconnect_hint": "Connection lost, reconnecting...", "no_terminal": "No terminals", - "empty_hint": "Launch a shell to inspect files, run commands, and verify changes without leaving the workspace.", + "empty_hint": "Launch a shell to inspect files and run commands.", "load_failed_title": "Could not load terminals", "load_failed_body": "Refresh the workspace connection and try again.", "create_failed_title": "Could not create terminal", diff --git a/packages/web/src/locales/zh.json b/packages/web/src/locales/zh.json index 9d0a213c..ab38db99 100644 --- a/packages/web/src/locales/zh.json +++ b/packages/web/src/locales/zh.json @@ -329,7 +329,7 @@ "agent": "Agent 终端", "reconnect_hint": "连接已断开，正在重连...", "no_terminal": "暂无终端", - "empty_hint": "启动一个 Shell 来查看文件、运行命令，并在不离开工作区的情况下验证更改。", + "empty_hint": "启动一个 Shell 来查看文件、运行命令。", "load_failed_title": "加载终端失败", "load_failed_body": "请刷新工作区连接后重试。", "create_failed_title": "创建终端失败", From b784c91192c49092e604df18da5c48df396eeb86 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sat, 30 May 2026 23:18:13 +0800 Subject: [PATCH 153/162] fix(web): auto-rotate draft launcher on narrow panes --- .../views/shared/draft-launcher.test.tsx | 126 ++++++++++++++++-- .../views/shared/draft-launcher.tsx | 84 +++++++++++- 2 files changed, 198 insertions(+), 12 deletions(-) diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx index 8a19963e..f6c5f37f 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx @@ -1,12 +1,13 @@ -import { createEvent, fireEvent, render, screen } from "@testing-library/react"; +import { act, createEvent, fireEvent, render, screen } from "@testing-library/react"; import { createStore, Provider } from "jotai"; -import { beforeEach, describe, expect, it, vi } from "vitest"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { localeAtom } from "../../../../atoms/app-ui"; import { wsClientAtom } from "../../../../atoms/connection"; import { WORKSPACE_PATH_DRAG_MIME } from "../../../../lib/workspace-path-drag"; import { DraftLauncher } from "./draft-launcher"; const mockUseProviderLauncher = vi.fn(); +const originalResizeObserver = global.ResizeObserver; vi.mock("../../actions/use-provider-launcher", () => ({ useProviderLauncher: (...args: unknown[]) => mockUseProviderLauncher(...args), @@ -31,7 +32,57 @@ function createRuntimeState(providerId: "claude" | "codex") { }; } +function createDraftLauncherStore() { + const store = createStore(); + + store.set(localeAtom, "en"); + store.set(wsClientAtom, { + sendCommand: vi.fn(), + subscribe: vi.fn(() => () => {}), + } as never); + + return store; +} + +function installResizeObserverMock() { + let callback: ResizeObserverCallback | null = null; + + class ResizeObserverMock { + constructor(observerCallback: ResizeObserverCallback) { + callback = observerCallback; + } + + observe() {} + disconnect() {} + } + + global.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver; + + return { + resize(target: Element, width: number) { + if (!callback) { + throw new Error("ResizeObserver was not created"); + } + + callback( + [ + { + target, + contentRect: { width }, + } as ResizeObserverEntry, + ], + {} as ResizeObserver + ); + }, + }; +} + describe("DraftLauncher", () => { + afterEach(() => { + global.ResizeObserver = originalResizeObserver; + vi.useRealTimers(); + }); + beforeEach(() => { vi.clearAllMocks(); mockUseProviderLauncher.mockReturnValue({ @@ -126,13 +177,7 @@ describe("DraftLauncher", () => { }); it("switches draft launcher carousel panels", () => { - const store = createStore(); - - store.set(localeAtom, "en"); - store.set(wsClientAtom, { - sendCommand: vi.fn(), - subscribe: vi.fn(() => () => {}), - } as never); + const store = createDraftLauncherStore(); const { container } = render( @@ -155,6 +200,69 @@ describe("DraftLauncher", () => { expect(carouselTrack).toHaveClass("agent-draft-component-row--file"); }); + it("auto-rotates draft launcher carousel panels in compact layout", async () => { + vi.useFakeTimers(); + const resizeObserver = installResizeObserverMock(); + const store = createDraftLauncherStore(); + + const { container } = render( + + + + ); + + const launcher = container.querySelector(".agent-draft-launcher"); + const agentButton = screen.getByRole("button", { name: "Agent" }); + const fileButton = screen.getByRole("button", { name: "File Editor" }); + const carouselTrack = container.querySelector(".agent-draft-component-row"); + + expect(launcher).not.toBeNull(); + expect(carouselTrack).not.toHaveClass("agent-draft-component-row--file"); + + act(() => { + resizeObserver.resize(launcher as Element, 360); + }); + + await act(async () => { + await vi.advanceTimersByTimeAsync(4000); + }); + + expect(agentButton).toHaveAttribute("aria-pressed", "false"); + expect(fileButton).toHaveAttribute("aria-pressed", "true"); + expect(carouselTrack).toHaveClass("agent-draft-component-row--file"); + }); + + it("does not auto-rotate draft launcher carousel panels in wide layout", async () => { + vi.useFakeTimers(); + const resizeObserver = installResizeObserverMock(); + const store = createDraftLauncherStore(); + + const { container } = render( + + + + ); + + const launcher = container.querySelector(".agent-draft-launcher"); + const agentButton = screen.getByRole("button", { name: "Agent" }); + const fileButton = screen.getByRole("button", { name: "File Editor" }); + const carouselTrack = container.querySelector(".agent-draft-component-row"); + + expect(launcher).not.toBeNull(); + + act(() => { + resizeObserver.resize(launcher as Element, 640); + }); + + await act(async () => { + await vi.advanceTimersByTimeAsync(4000); + }); + + expect(agentButton).toHaveAttribute("aria-pressed", "true"); + expect(fileButton).toHaveAttribute("aria-pressed", "false"); + expect(carouselTrack).not.toHaveClass("agent-draft-component-row--file"); + }); + it("renders a draft drop label when pane drag hover is active", () => { const store = createStore(); diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx index 6e66635c..5beaca03 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx @@ -1,7 +1,7 @@ import type { Session } from "@coder-studio/core"; import { useAtomValue, useSetAtom } from "jotai"; import { ArrowRight, FlipHorizontal, FlipVertical, X } from "lucide-react"; -import { type DragEvent, type FC, type PointerEvent, useRef, useState } from "react"; +import { type DragEvent, type FC, type PointerEvent, useEffect, useRef, useState } from "react"; import { dispatchCommandAtom } from "../../../../atoms/connection"; import { sessionsAtom } from "../../../../atoms/sessions"; import { Button, IconButton, StatusDot, Tag, ThemedIcon, Tooltip } from "../../../../components/ui"; @@ -14,6 +14,24 @@ import { buildDiagnosticsPath } from "../../../diagnostics"; import type { PaneDropIntent } from "../../actions/pane-drag-types"; import { type ProviderId, useProviderLauncher } from "../../actions/use-provider-launcher"; +const COMPACT_CAROUSEL_MAX_WIDTH_REM = 28; +const COMPACT_CAROUSEL_INTERVAL_MS = 4000; + +function getCompactCarouselMaxWidthPx(): number { + if (typeof window === "undefined" || typeof document === "undefined") { + return COMPACT_CAROUSEL_MAX_WIDTH_REM * 16; + } + + const rootFontSize = window.getComputedStyle(document.documentElement).fontSize; + const parsedRootFontSize = Number.parseFloat(rootFontSize); + + if (!Number.isFinite(parsedRootFontSize) || parsedRootFontSize <= 0) { + return COMPACT_CAROUSEL_MAX_WIDTH_REM * 16; + } + + return COMPACT_CAROUSEL_MAX_WIDTH_REM * parsedRootFontSize; +} + interface DraftLauncherDragState { isDragging: boolean; isActiveDropTarget: boolean; @@ -47,7 +65,9 @@ export const DraftLauncher: FC = ({ const dispatch = useAtomValue(dispatchCommandAtom); const setSessions = useSetAtom(sessionsAtom); const [activePanel, setActivePanel] = useState<"agent" | "file">("agent"); + const [isCompactCarousel, setIsCompactCarousel] = useState(false); const [isFileDropTarget, setIsFileDropTarget] = useState(false); + const draftLauncherRef = useRef(null); const swipeStartXRef = useRef(null); const { states, launch } = useProviderLauncher( dispatch, @@ -219,6 +239,62 @@ export const DraftLauncher: FC = ({ swipeStartXRef.current = null; }; + useEffect(() => { + const element = draftLauncherRef.current; + + if (!element) { + return; + } + + const updateCompactState = (width: number) => { + setIsCompactCarousel(width > 0 && width <= getCompactCarouselMaxWidthPx()); + }; + + updateCompactState(element.getBoundingClientRect().width); + + if (typeof ResizeObserver === "function") { + const observer = new ResizeObserver((entries) => { + const entry = entries[0]; + + if (!entry) { + return; + } + + updateCompactState(entry.contentRect.width || entry.target.getBoundingClientRect().width); + }); + + observer.observe(element); + + return () => { + observer.disconnect(); + }; + } + + const handleWindowResize = () => { + updateCompactState(element.getBoundingClientRect().width); + }; + + window.addEventListener("resize", handleWindowResize); + + return () => { + window.removeEventListener("resize", handleWindowResize); + }; + }, []); + + useEffect(() => { + if (!isCompactCarousel) { + return; + } + + const timer = window.setTimeout(() => { + setActivePanel((currentPanel) => (currentPanel === "agent" ? "file" : "agent")); + }, COMPACT_CAROUSEL_INTERVAL_MS); + + return () => { + window.clearTimeout(timer); + }; + }, [activePanel, isCompactCarousel]); + return (
= ({
-
+
= ({ ))}
-
点击启动 Agent 或直接拖拽文件到右侧区域打开
+
+ 点击「启动 Agent」，或将文件拖到右侧区域直接打开。 +
From 4118ba2ccbc541b8dc1e2450e8e553d0fdec32e8 Mon Sep 17 00:00:00 2001 From: Spencer Date: Sat, 30 May 2026 15:27:02 +0000 Subject: [PATCH 154/162] fix(server): rewrite local preview resources --- .../src/preview/html-resource-rewriter.ts | 358 ++++++++++++++++++ packages/server/src/routes/preview.test.ts | 93 +++++ packages/server/src/routes/preview.ts | 34 +- 3 files changed, 475 insertions(+), 10 deletions(-) create mode 100644 packages/server/src/preview/html-resource-rewriter.ts diff --git a/packages/server/src/preview/html-resource-rewriter.ts b/packages/server/src/preview/html-resource-rewriter.ts new file mode 100644 index 00000000..9a619737 --- /dev/null +++ b/packages/server/src/preview/html-resource-rewriter.ts @@ -0,0 +1,358 @@ +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import { isPathInsideRoot } from "../fs/path-safety.js"; + +const PREVIEW_RESOURCE_TAGS = new Set([ + "embed", + "iframe", + "image", + "img", + "input", + "link", + "source", + "track", + "audio", + "video", + "script", +]); + +const PREVIEW_RESOURCE_ATTRS = new Set(["href", "poster", "src", "xlink:href"]); + +const STYLE_BLOCK_PATTERN = /]*)>([\s\S]*?)<\/style>/gi; +const PREVIEW_TAG_PATTERN = /<\s*([A-Za-z][\w:-]*)([^<>]*?)>/g; +const PREVIEW_ATTR_PATTERN = + /(\s+)(srcset|src|href|poster|xlink:href|style)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/gi; +const CSS_URL_PATTERN = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^'")]*?))\s*\)/gi; + +interface PreviewRewriteInput { + sessionId: string; + workspaceRootPath: string; + baseWorkspacePath?: string; +} + +export function encodePathSegments(inputPath: string): string { + return inputPath + .split("/") + .map((segment) => encodeURIComponent(segment)) + .join("/"); +} + +export function rewritePreviewHtmlResourceUrls( + html: string, + input: { sessionId: string; workspaceRootPath: string; entryPath: string } +): string { + const rewriteInput = { + sessionId: input.sessionId, + workspaceRootPath: input.workspaceRootPath, + baseWorkspacePath: input.entryPath, + }; + const htmlWithStyleBlocks = html.replace( + STYLE_BLOCK_PATTERN, + (match, rawAttributes: string, css: string) => { + const rewrittenCss = rewritePreviewCssResourceUrls(css, rewriteInput); + return rewrittenCss === css ? match : `${rewrittenCss}`; + } + ); + + return htmlWithStyleBlocks.replace( + PREVIEW_TAG_PATTERN, + (match, rawTagName: string, rawAttributes: string) => { + const canRewriteResourceAttrs = PREVIEW_RESOURCE_TAGS.has(rawTagName.toLowerCase()); + let changed = false; + const nextAttributes = rawAttributes.replace( + PREVIEW_ATTR_PATTERN, + ( + attrMatch, + leadingWhitespace: string, + rawAttrName: string, + doubleQuotedValue: string | undefined, + singleQuotedValue: string | undefined, + bareValue: string | undefined + ) => { + const attrName = rawAttrName.toLowerCase(); + const originalValue = doubleQuotedValue ?? singleQuotedValue ?? bareValue ?? ""; + let rewrittenValue = originalValue; + + if (attrName === "style") { + rewrittenValue = rewritePreviewCssResourceUrls(originalValue, rewriteInput); + } else if (canRewriteResourceAttrs && attrName === "srcset") { + rewrittenValue = rewritePreviewSrcset(originalValue, rewriteInput); + } else if (canRewriteResourceAttrs && PREVIEW_RESOURCE_ATTRS.has(attrName)) { + rewrittenValue = rewritePreviewResourceUrl(originalValue, rewriteInput); + } + + if (rewrittenValue === originalValue) { + return attrMatch; + } + + changed = true; + + if (doubleQuotedValue !== undefined) { + return `${leadingWhitespace}${rawAttrName}="${escapeHtmlAttribute(rewrittenValue, '"')}"`; + } + + if (singleQuotedValue !== undefined) { + return `${leadingWhitespace}${rawAttrName}='${escapeHtmlAttribute(rewrittenValue, "'")}'`; + } + + return `${leadingWhitespace}${rawAttrName}=${rewrittenValue}`; + } + ); + + return changed ? `<${rawTagName}${nextAttributes}>` : match; + } + ); +} + +export function rewritePreviewCssResourceUrls(css: string, input: PreviewRewriteInput): string { + return css.replace( + CSS_URL_PATTERN, + ( + match, + doubleQuotedValue: string | undefined, + singleQuotedValue: string | undefined, + bareValue: string | undefined + ) => { + const originalValue = doubleQuotedValue ?? singleQuotedValue ?? bareValue ?? ""; + const rewrittenValue = rewritePreviewResourceUrl(originalValue.trim(), input); + + if (rewrittenValue === originalValue.trim()) { + return match; + } + + if (doubleQuotedValue !== undefined) { + return `url("${escapeCssQuotedUrl(rewrittenValue, '"')}")`; + } + + if (singleQuotedValue !== undefined) { + return `url('${escapeCssQuotedUrl(rewrittenValue, "'")}')`; + } + + return `url(${rewrittenValue})`; + } + ); +} + +function rewritePreviewSrcset(srcset: string, input: PreviewRewriteInput): string { + return splitSrcsetCandidates(srcset) + .map((candidate) => rewritePreviewSrcsetCandidate(candidate, input)) + .join(","); +} + +function rewritePreviewSrcsetCandidate(candidate: string, input: PreviewRewriteInput): string { + const leadingWhitespace = candidate.match(/^\s*/)?.[0] ?? ""; + const trimmedCandidate = candidate.trim(); + + if (!trimmedCandidate) { + return candidate; + } + + const urlMatch = /^(\S+)(.*)$/.exec(trimmedCandidate); + if (!urlMatch) { + return candidate; + } + + const rawUrl = urlMatch[1]; + const descriptor = urlMatch[2] ?? ""; + if (!rawUrl) { + return candidate; + } + + return `${leadingWhitespace}${rewritePreviewResourceUrl(rawUrl, input)}${descriptor}`; +} + +function splitSrcsetCandidates(srcset: string): string[] { + const candidates: string[] = []; + let startIndex = 0; + let urlStarted = false; + let seenWhitespaceAfterUrl = false; + let isDataCandidate = false; + + for (let index = 0; index < srcset.length; index += 1) { + const current = srcset[index] ?? ""; + + if (!urlStarted) { + if (/\s/.test(current)) { + continue; + } + + urlStarted = true; + isDataCandidate = srcset.slice(index, index + 5).toLowerCase() === "data:"; + } else if (/\s/.test(current)) { + seenWhitespaceAfterUrl = true; + } + + if (current !== ",") { + continue; + } + + if (isDataCandidate && !seenWhitespaceAfterUrl) { + continue; + } + + candidates.push(srcset.slice(startIndex, index)); + startIndex = index + 1; + urlStarted = false; + seenWhitespaceAfterUrl = false; + isDataCandidate = false; + } + + candidates.push(srcset.slice(startIndex)); + return candidates; +} + +function rewritePreviewResourceUrl(rawValue: string, input: PreviewRewriteInput): string { + const { pathPart, suffix } = splitUrlSuffix(rawValue); + const trimmedValue = pathPart.trim(); + + if (!trimmedValue || trimmedValue.startsWith("//")) { + return rawValue; + } + + if (/^[a-zA-Z][a-zA-Z\d+.-]*:/.test(trimmedValue)) { + if (!trimmedValue.toLowerCase().startsWith("file:")) { + return rawValue; + } + + try { + const absolutePath = fileURLToPath(trimmedValue); + const workspaceRelativePath = resolveWorkspaceRelativePath( + input.workspaceRootPath, + absolutePath + ); + + if (!workspaceRelativePath) { + return rawValue; + } + + return `${createPreviewAssetUrl(input.sessionId, workspaceRelativePath)}${suffix}`; + } catch { + return rawValue; + } + } + + const decodedPath = decodePathSegments(trimmedValue.replaceAll("\\", "/")); + + if (decodedPath.startsWith("/")) { + const workspaceRelativePath = + resolveWorkspaceRelativePath(input.workspaceRootPath, decodedPath) ?? + normalizeWorkspaceRelativePath(decodedPath.slice(1)); + + if (!workspaceRelativePath) { + return rawValue; + } + + return `${createPreviewAssetUrl(input.sessionId, workspaceRelativePath)}${suffix}`; + } + + if (path.win32.isAbsolute(decodedPath)) { + const workspaceRelativePath = resolveWorkspaceRelativePath( + input.workspaceRootPath, + decodedPath + ); + if (!workspaceRelativePath) { + return rawValue; + } + + return `${createPreviewAssetUrl(input.sessionId, workspaceRelativePath)}${suffix}`; + } + + if (input.baseWorkspacePath) { + const workspaceRelativePath = resolveRelativeWorkspacePath( + input.baseWorkspacePath, + decodedPath + ); + + if (workspaceRelativePath) { + return `${createPreviewAssetUrl(input.sessionId, workspaceRelativePath)}${suffix}`; + } + } + + return rawValue; +} + +function resolveRelativeWorkspacePath( + baseWorkspacePath: string, + relativePath: string +): string | null { + return normalizeWorkspaceRelativePath( + path.posix.join(path.posix.dirname(baseWorkspacePath.replaceAll("\\", "/")), relativePath) + ); +} + +function createPreviewAssetUrl(sessionId: string, workspaceRelativePath: string): string { + return `/api/preview/session/${sessionId}/${encodePathSegments(workspaceRelativePath)}`; +} + +function normalizeWorkspaceRelativePath(rawPath: string): string | null { + const normalized = path.posix.normalize(rawPath.replaceAll("\\", "/").replace(/^\/+/, "")); + + if (!normalized || normalized === "." || normalized === ".." || normalized.startsWith("../")) { + return null; + } + + return normalized; +} + +function resolveWorkspaceRelativePath( + workspaceRootPath: string, + absolutePath: string +): string | null { + const absoluteWorkspaceRoot = path.resolve(workspaceRootPath); + const absoluteTargetPath = path.resolve(absolutePath); + + if (!isPathInsideRoot(absoluteWorkspaceRoot, absoluteTargetPath)) { + return null; + } + + const workspaceRelativePath = absoluteTargetPath + .slice(absoluteWorkspaceRoot.length) + .replace(/^[/\\]/, "") + .replaceAll("\\", "/"); + + return normalizeWorkspaceRelativePath(workspaceRelativePath); +} + +function splitUrlSuffix(value: string): { pathPart: string; suffix: string } { + const queryIndex = value.indexOf("?"); + const hashIndex = value.indexOf("#"); + + let suffixIndex = value.length; + if (queryIndex !== -1 && hashIndex !== -1) { + suffixIndex = Math.min(queryIndex, hashIndex); + } else if (queryIndex !== -1) { + suffixIndex = queryIndex; + } else if (hashIndex !== -1) { + suffixIndex = hashIndex; + } + + return { + pathPart: value.slice(0, suffixIndex), + suffix: value.slice(suffixIndex), + }; +} + +function decodePathSegments(inputPath: string): string { + return inputPath + .split("/") + .map((segment) => { + try { + return decodeURIComponent(segment); + } catch { + return segment; + } + }) + .join("/"); +} + +function escapeHtmlAttribute(value: string, quote: '"' | "'"): string { + return value + .replaceAll("&", "&") + .replaceAll("<", "<") + .replaceAll(">", ">") + .replaceAll(quote, quote === '"' ? """ : "'"); +} + +function escapeCssQuotedUrl(value: string, quote: '"' | "'"): string { + return value.replaceAll("\\", "\\\\").replaceAll(quote, `\\${quote}`); +} diff --git a/packages/server/src/routes/preview.test.ts b/packages/server/src/routes/preview.test.ts index 6c58da7b..c4ef1e3c 100644 --- a/packages/server/src/routes/preview.test.ts +++ b/packages/server/src/routes/preview.test.ts @@ -1,6 +1,7 @@ import { mkdir, rm, writeFile } from "node:fs/promises"; import { tmpdir } from "node:os"; import { join } from "node:path"; +import { pathToFileURL } from "node:url"; import Fastify from "fastify"; import { afterEach, beforeEach, describe, expect, it } from "vitest"; import { PreviewSessionStore } from "../preview/session-store.js"; @@ -14,6 +15,13 @@ describe("/api/preview/session", () => { root = join(tmpdir(), `preview-route-${Date.now()}-${Math.random().toString(36).slice(2)}`); await mkdir(join(root, "examples", "demo"), { recursive: true }); await writeFile(join(root, "examples", "demo", "style.css"), "body { color: red; }"); + await writeFile( + join(root, "examples", "demo", "pixel.png"), + Buffer.from( + "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/p9sAAAAASUVORK5CYII=", + "base64" + ) + ); app = Fastify({ logger: false }); registerPreviewRoutes(app, { @@ -71,6 +79,91 @@ describe("/api/preview/session", () => { expect(assetRes.body).toContain("color: red"); }); + it("rewrites local HTML image sources through the preview asset route", async () => { + const fileUrl = pathToFileURL(join(root, "examples", "demo", "pixel.png")).href; + const createRes = await app.inject({ + method: "POST", + url: "/api/preview/session", + payload: { + workspaceId: "ws-1", + entryPath: "examples/demo/index.html", + kind: "html", + content: ``, + }, + }); + + const { id, previewUrl } = createRes.json(); + const assetUrl = `/api/preview/session/${id}/examples/demo/pixel.png`; + const entryRes = await app.inject({ method: "GET", url: previewUrl }); + const assetRes = await app.inject({ method: "GET", url: assetUrl }); + + expect(entryRes.statusCode).toBe(200); + expect(entryRes.body).toContain(`id="root" src="${assetUrl}"`); + expect(entryRes.body).toContain(`id="file" src="${assetUrl}"`); + expect(entryRes.body).toContain('id="remote" src="https://example.com/pixel.png"'); + expect(entryRes.body).toContain('id="data" src="data:image/png;base64,abc"'); + expect(assetRes.statusCode).toBe(200); + expect(assetRes.headers["content-type"]).toContain("image/png"); + }); + + it("rewrites local srcset and inline CSS references through the preview asset route", async () => { + const createRes = await app.inject({ + method: "POST", + url: "/api/preview/session", + payload: { + workspaceId: "ws-1", + entryPath: "examples/demo/index.html", + kind: "html", + content: + '
', + }, + }); + + const { id, previewUrl } = createRes.json(); + const assetUrl = `/api/preview/session/${id}/examples/demo/pixel.png`; + const entryRes = await app.inject({ method: "GET", url: previewUrl }); + + expect(entryRes.statusCode).toBe(200); + expect(entryRes.body).toContain(`srcset="${assetUrl} 1x, ${assetUrl} 2x`); + expect(entryRes.body).toContain("https://example.com/remote.png 3x"); + expect(entryRes.body).toContain(`background-image: url("${assetUrl}?v=1#hero")`); + expect(entryRes.body).toContain(`background: url('${assetUrl}')`); + expect(entryRes.body).toContain(`mask-image: url(${assetUrl}#mask)`); + expect(entryRes.body).toContain('url("https://example.com/remote.png")'); + }); + + it("rewrites local url() references inside external CSS assets", async () => { + await writeFile( + join(root, "examples", "demo", "style.css"), + '.hero { background-image: url("/examples/demo/pixel.png?v=2#hero"); } .relative { mask-image: url(./pixel.png#mask); } .remote { background-image: url("https://example.com/remote.png"); }' + ); + + const createRes = await app.inject({ + method: "POST", + url: "/api/preview/session", + payload: { + workspaceId: "ws-1", + entryPath: "examples/demo/index.html", + kind: "html", + content: + 'demo', + }, + }); + + const { id } = createRes.json(); + const assetUrl = `/api/preview/session/${id}/examples/demo/pixel.png`; + const cssRes = await app.inject({ + method: "GET", + url: `/api/preview/session/${id}/examples/demo/style.css`, + }); + + expect(cssRes.statusCode).toBe(200); + expect(cssRes.headers["content-type"]).toContain("text/css"); + expect(cssRes.body).toContain(`background-image: url("${assetUrl}?v=2#hero")`); + expect(cssRes.body).toContain(`mask-image: url(${assetUrl}#mask)`); + expect(cssRes.body).toContain('url("https://example.com/remote.png")'); + }); + it("rejects invalid preview session payloads", async () => { const createRes = await app.inject({ method: "POST", diff --git a/packages/server/src/routes/preview.ts b/packages/server/src/routes/preview.ts index 636929d9..f4d797bb 100644 --- a/packages/server/src/routes/preview.ts +++ b/packages/server/src/routes/preview.ts @@ -1,6 +1,11 @@ import { posix } from "node:path"; import type { FastifyInstance } from "fastify"; import { z } from "zod"; +import { + encodePathSegments, + rewritePreviewCssResourceUrls, + rewritePreviewHtmlResourceUrls, +} from "../preview/html-resource-rewriter.js"; import { renderMarkdownDocument } from "../preview/render-markdown.js"; import { loadPreviewResource, resolvePreviewResourcePath } from "../preview/resource-loader.js"; import { PreviewSessionStore } from "../preview/session-store.js"; @@ -26,13 +31,6 @@ function getPreviewContentSecurityPolicy(): string { return "default-src 'none'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; script-src 'none'; base-uri 'none'; form-action 'none'"; } -function encodePathSegments(path: string): string { - return path - .split("/") - .map((segment) => encodeURIComponent(segment)) - .join("/"); -} - function resolvePreviewAssetWorkspacePath(entryPath: string, rawPath: string): string { const normalizedRawPath = rawPath.replaceAll("\\", "/"); const relativeAssetPath = posix.relative(posix.dirname(entryPath), normalizedRawPath); @@ -123,13 +121,18 @@ export function registerPreviewRoutes( } if ((rawPath ?? "") === session.entryPath) { - const html = + const rawHtml = session.kind === "markdown" ? renderMarkdownDocument({ markdown: session.content, title: session.entryPath, }) : session.content; + const html = rewritePreviewHtmlResourceUrls(rawHtml, { + entryPath: session.entryPath, + sessionId: session.id, + workspaceRootPath: workspace.path, + }); const contentSecurityPolicy = getPreviewContentSecurityPolicy(); const response = reply @@ -147,13 +150,24 @@ export function registerPreviewRoutes( try { const resourcePath = resolvePreviewAssetWorkspacePath(session.entryPath, rawPath); const resource = await loadPreviewResource(workspace.path, resourcePath); + const bytes = + resource.mime === "text/css" + ? Buffer.from( + rewritePreviewCssResourceUrls(resource.bytes.toString("utf-8"), { + baseWorkspacePath: resource.workspaceRelativePath, + sessionId: session.id, + workspaceRootPath: workspace.path, + }), + "utf-8" + ) + : resource.bytes; return reply .header("Content-Type", resource.mime) - .header("Content-Length", String(resource.size)) + .header("Content-Length", String(bytes.byteLength)) .header("Cache-Control", "no-store") .header("X-Content-Type-Options", "nosniff") - .send(resource.bytes); + .send(bytes); } catch (error) { const code = (error as { code?: string })?.code ?? (error as Error).message; if (code === "path_escape") { From 5cd816be8d7db41ff3fe8b5f0994a3fd84458535 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sat, 30 May 2026 23:46:31 +0800 Subject: [PATCH 155/162] fix(web): refine open files sidebar controls --- .../src/features/code-editor/index.test.tsx | 2 +- .../web/src/features/workspace/index.test.tsx | 10 ++-- .../desktop/workspace-desktop-view.test.tsx | 2 +- .../mobile/mobile-explorer-panel.test.tsx | 18 +++---- .../mobile/workspace-mobile-view.test.tsx | 10 ++-- .../views/shared/explorer-panel.test.tsx | 8 ++-- .../shared/open-editors-section.test.tsx | 48 ++++++++++--------- .../views/shared/open-editors-section.tsx | 19 ++++---- .../views/shared/search-panel.test.tsx | 8 +--- packages/web/src/lib/i18n.test.ts | 10 ++++ packages/web/src/locales/en.json | 10 ++-- packages/web/src/locales/zh.json | 10 ++-- packages/web/src/styles/components.css | 21 ++++++-- .../web/src/styles/components.theme.test.ts | 12 +++++ 14 files changed, 112 insertions(+), 76 deletions(-) diff --git a/packages/web/src/features/code-editor/index.test.tsx b/packages/web/src/features/code-editor/index.test.tsx index 22441f4f..e31d3823 100644 --- a/packages/web/src/features/code-editor/index.test.tsx +++ b/packages/web/src/features/code-editor/index.test.tsx @@ -460,7 +460,7 @@ describe("CodeEditorHost", () => { ); }); - const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (1)" }); + const heading = screen.getByRole("heading", { level: 2, name: "Open Files (1)" }); const section = heading.closest("section") as HTMLElement; const closeAll = within(section).getByRole("button", { name: "Close all" }); expect(closeAll).toBeEnabled(); diff --git a/packages/web/src/features/workspace/index.test.tsx b/packages/web/src/features/workspace/index.test.tsx index 8520ffc7..0dd6ff72 100644 --- a/packages/web/src/features/workspace/index.test.tsx +++ b/packages/web/src/features/workspace/index.test.tsx @@ -411,7 +411,7 @@ describe("WorkspacePage", () => { ); - await screen.findByText(/Open Editors|打开的编辑器/i); + await screen.findByText(/Open Files|打开的文件/i); const explorerButton = screen.getByRole("button", { name: /Explorer|资源管理器/i }); expect(explorerButton).toHaveAttribute("aria-pressed", "true"); @@ -1703,9 +1703,9 @@ describe("WorkspacePage", () => { await screen.findByTestId("code-editor-host"); expect(screen.queryByTestId("agent-panes")).not.toBeInTheDocument(); - const heading = screen.getByRole("heading", { level: 2, name: /(Open Editors|打开的编辑器)/i }); + const heading = screen.getByRole("heading", { level: 2, name: /(Open Files|打开的文件)/i }); const section = heading.closest("section") as HTMLElement; - expect(heading).toHaveTextContent(/Open Editors|打开的编辑器/i); + expect(heading).toHaveTextContent(/Open Files|打开的文件/i); expect(within(section).getByText("1")).toHaveClass("workspace-open-editors__count"); fireEvent.click(within(section).getByRole("button", { name: /Close all|全部关闭/i })); @@ -1862,7 +1862,7 @@ describe("WorkspacePage", () => { await screen.findByTestId("code-editor-host"); - const heading = screen.getByRole("heading", { level: 2, name: /(Open Editors|打开的编辑器)/i }); + const heading = screen.getByRole("heading", { level: 2, name: /(Open Files|打开的文件)/i }); const section = heading.closest("section") as HTMLElement; fireEvent.click(within(section).getByRole("button", { name: /Close all|全部关闭/i })); @@ -1891,7 +1891,7 @@ describe("WorkspacePage", () => { }); }); - it("clearing the final open editor from Open Editors preserves an active commit preview", async () => { + it("clearing the final open editor from Open Files preserves an active commit preview", async () => { const sendCommand = vi.fn().mockImplementation(async (op: string) => { if (op === "git.status") { return { diff --git a/packages/web/src/features/workspace/views/desktop/workspace-desktop-view.test.tsx b/packages/web/src/features/workspace/views/desktop/workspace-desktop-view.test.tsx index 4c21cfd9..8dc9476b 100644 --- a/packages/web/src/features/workspace/views/desktop/workspace-desktop-view.test.tsx +++ b/packages/web/src/features/workspace/views/desktop/workspace-desktop-view.test.tsx @@ -18,7 +18,7 @@ vi.mock("../../../../lib/i18n", () => ({ "workspace.sidebar.source_control": "Source Control", "workspace.sidebar.label": "Workspace Sidebar", "workspace.sidebar.workspace": "Workspace", - "workspace.sidebar.open_editors": "Open Editors", + "workspace.sidebar.open_editors": "Open Files", "workspace.no_workspace": "No workspace", "workspace.search.empty": "Type to search across file contents", "workspace.search.placeholder": "Search", diff --git a/packages/web/src/features/workspace/views/mobile/mobile-explorer-panel.test.tsx b/packages/web/src/features/workspace/views/mobile/mobile-explorer-panel.test.tsx index 7c0e04ee..a9e2668d 100644 --- a/packages/web/src/features/workspace/views/mobile/mobile-explorer-panel.test.tsx +++ b/packages/web/src/features/workspace/views/mobile/mobile-explorer-panel.test.tsx @@ -19,7 +19,7 @@ vi.mock("../../../../lib/i18n", () => ({ "workspace.sidebar.workspace": "Workspace", "workspace.sidebar.workspace_expand_label": "Expand Workspace", "workspace.sidebar.workspace_collapse_label": "Collapse Workspace", - "workspace.sidebar.open_editors": "Open Editors", + "workspace.sidebar.open_editors": "Open Files", "file.new_file": "New File", "file.new_folder": "New Folder", "file.collapse_all": "Collapse All", @@ -29,15 +29,15 @@ vi.mock("../../../../lib/i18n", () => ({ }; if (key === "workspace.open_editors.title_with_count") { - return `${params?.title ?? "Open Editors"} (${params?.count ?? 0})`; + return `${params?.title ?? "Open Files"} (${params?.count ?? 0})`; } if (key === "workspace.open_editors.expand_label") { - return "Expand Open Editors"; + return "Expand Open Files"; } if (key === "workspace.open_editors.collapse_label") { - return "Collapse Open Editors"; + return "Collapse Open Files"; } if (key === "workspace.open_editors.close_path") { @@ -120,7 +120,7 @@ describe("MobileExplorerPanel", () => { const headings = screen.getAllByRole("heading", { level: 2 }); expect(headings[0]).toHaveTextContent(/Quick Jump|快速跳转/i); - expect(headings[1]).toHaveTextContent(/Open Editors|打开的编辑器/i); + expect(headings[1]).toHaveTextContent(/Open Files|打开的文件/i); expect(headings[2]).toHaveTextContent(/Workspace|工作区/i); expect(screen.getByRole("button", { name: "README.md" })).toBeInTheDocument(); @@ -205,15 +205,15 @@ describe("MobileExplorerPanel", () => { ); - const heading = screen.getByRole("heading", { level: 2, name: /(Open Editors|打开的编辑器)/i }); - expect(heading).toHaveTextContent(/Open Editors|打开的编辑器/i); + const heading = screen.getByRole("heading", { level: 2, name: /(Open Files|打开的文件)/i }); + expect(heading).toHaveTextContent(/Open Files|打开的文件/i); const section = heading.closest("section") as HTMLElement; expect(within(section).getByText("2")).toBeInTheDocument(); expect( within(section).getByRole("button", { - name: /Collapse Open Editors|Expand Open Editors|收起打开的编辑器|展开打开的编辑器/i, + name: /Collapse Open Files|Expand Open Files|收起打开的文件|展开打开的文件/i, }) ).toHaveAttribute("aria-expanded", "true"); expect( @@ -236,7 +236,7 @@ describe("MobileExplorerPanel", () => { "workspace-open-editors__item--active" ); expect(within(section).queryByRole("button", { name: "src/alpha.tsx" })).toBeNull(); - expect(heading).toHaveTextContent(/Open Editors|打开的编辑器/i); + expect(heading).toHaveTextContent(/Open Files|打开的文件/i); expect(within(section).getByText("1")).toBeInTheDocument(); expect(Object.keys(store.get(openFilesAtomFamily("ws-test")))).toEqual(["src/beta.tsx"]); expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull(); diff --git a/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx b/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx index 79cb4941..72144d9e 100644 --- a/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx +++ b/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx @@ -56,9 +56,9 @@ vi.mock("../../../../lib/i18n", () => ({ "mobile.sheet.dismiss": "Dismiss sheet", "action.close_all": "Close all", "workspace.sidebar.explorer": "Explorer", - "workspace.sidebar.open_editors": "Open Editors", - "workspace.open_editors.collapse_label": "Collapse Open Editors", - "workspace.open_editors.expand_label": "Expand Open Editors", + "workspace.sidebar.open_editors": "Open Files", + "workspace.open_editors.collapse_label": "Collapse Open Files", + "workspace.open_editors.expand_label": "Expand Open Files", "workspace.sidebar.search": "Search", "workspace.sidebar.source_control": "Source Control", }; @@ -68,7 +68,7 @@ vi.mock("../../../../lib/i18n", () => ({ } if (key === "workspace.open_editors.title_with_count") { - return `${params?.title ?? "Open Editors"} (${params?.count ?? "0"})`; + return `${params?.title ?? "Open Files"} (${params?.count ?? "0"})`; } if (key === "workspace.open_editors.close_path") { @@ -451,7 +451,7 @@ describe("WorkspaceMobileView", () => { fireEvent.click(screen.getByRole("button", { name: "Files" })); const openEditorsSection = screen - .getByRole("heading", { level: 2, name: "Open Editors (1)" }) + .getByRole("heading", { level: 2, name: "Open Files (1)" }) .closest("section") as HTMLElement; fireEvent.click(within(openEditorsSection).getByRole("button", { name: "Close all" })); diff --git a/packages/web/src/features/workspace/views/shared/explorer-panel.test.tsx b/packages/web/src/features/workspace/views/shared/explorer-panel.test.tsx index ce3d15e9..dbd7efcb 100644 --- a/packages/web/src/features/workspace/views/shared/explorer-panel.test.tsx +++ b/packages/web/src/features/workspace/views/shared/explorer-panel.test.tsx @@ -13,7 +13,7 @@ vi.mock("../../../../lib/i18n", () => ({ const translations: Record = { "workspace.sidebar.explorer": "Explorer", "workspace.sidebar.workspace": "Workspace", - "workspace.sidebar.open_editors": "Open Editors", + "workspace.sidebar.open_editors": "Open Files", "workspace.sidebar.workspace_expand_label": "Expand Workspace", "workspace.sidebar.workspace_collapse_label": "Collapse Workspace", "file.new_file": "New File", @@ -24,15 +24,15 @@ vi.mock("../../../../lib/i18n", () => ({ }; if (key === "workspace.open_editors.title_with_count") { - return `${params?.title ?? "Open Editors"} (${params?.count ?? 0})`; + return `${params?.title ?? "Open Files"} (${params?.count ?? 0})`; } if (key === "workspace.open_editors.expand_label") { - return "Expand Open Editors"; + return "Expand Open Files"; } if (key === "workspace.open_editors.collapse_label") { - return "Collapse Open Editors"; + return "Collapse Open Files"; } if (key === "workspace.open_editors.close_path") { diff --git a/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx b/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx index bac603f3..e716f0c7 100644 --- a/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx +++ b/packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx @@ -24,7 +24,7 @@ import { OpenEditorsSection } from "./open-editors-section"; vi.mock("../../../../lib/i18n", () => ({ useTranslation: () => (key: string, params?: Record) => { if (key === "common.cancel") return "Cancel"; - if (key === "workspace.sidebar.open_editors") return "Open Editors"; + if (key === "workspace.sidebar.open_editors") return "Open Files"; if (key === "action.close") return "Close"; if (key === "action.close_all") return "Close all"; if (key === "code_editor.unsaved_changes") return "Unsaved changes"; @@ -34,13 +34,13 @@ vi.mock("../../../../lib/i18n", () => ({ } if (key === "code_editor.discard_and_close") return "Discard and Close"; if (key === "workspace.open_editors.close_all_unsaved_description") { - return `${params?.count ?? 0} open editors have unsaved changes.`; + return `${params?.count ?? 0} open files have unsaved changes.`; } if (key === "workspace.open_editors.title_with_count") { - return `${params?.title ?? "Open Editors"} (${params?.count ?? 0})`; + return `${params?.title ?? "Open Files"} (${params?.count ?? 0})`; } - if (key === "workspace.open_editors.expand_label") return "Expand Open Editors"; - if (key === "workspace.open_editors.collapse_label") return "Collapse Open Editors"; + if (key === "workspace.open_editors.expand_label") return "Expand Open Files"; + if (key === "workspace.open_editors.collapse_label") return "Collapse Open Files"; if (key === "workspace.open_editors.close_path") { return `Close ${params?.path ?? ""}`; } @@ -113,12 +113,12 @@ describe("OpenEditorsSection", () => { it("shows file count, toggles collapse, closes a non-active row, and closes all", () => { const { store } = renderSection(); - const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (3)" }); - expect(heading).toHaveTextContent("Open Editors"); + const heading = screen.getByRole("heading", { level: 2, name: "Open Files (3)" }); + expect(heading).toHaveTextContent("Open Files"); const section = heading.closest("section") as HTMLElement; expect(within(section).getByText("3")).toHaveClass("workspace-open-editors__count"); - const toggle = within(section).getByRole("button", { name: /collapse open editors/i }); + const toggle = within(section).getByRole("button", { name: /collapse open files/i }); expect(toggle).toHaveAttribute("aria-expanded", "true"); @@ -142,7 +142,7 @@ describe("OpenEditorsSection", () => { ]); fireEvent.click(toggle); - expect(within(section).getByRole("button", { name: "Expand Open Editors" })).toHaveAttribute( + expect(within(section).getByRole("button", { name: "Expand Open Files" })).toHaveAttribute( "aria-expanded", "false" ); @@ -152,7 +152,7 @@ describe("OpenEditorsSection", () => { }) ).toBeNull(); - fireEvent.click(within(section).getByRole("button", { name: /expand open editors/i })); + fireEvent.click(within(section).getByRole("button", { name: /expand open files/i })); const readmeRow = within(section) .getByRole("button", { name: "README.md" }) @@ -165,21 +165,25 @@ describe("OpenEditorsSection", () => { ]); expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("src/beta.ts"); - fireEvent.click(within(section).getByRole("button", { name: "Close all" })); + const closeAllButton = within(section).getByRole("button", { name: "Close all" }); + expect(closeAllButton).toHaveTextContent(/^$/); + expect(closeAllButton.querySelector("svg")).toBeTruthy(); + + fireEvent.click(closeAllButton); expect(store.get(openFilesAtomFamily("ws-test"))).toEqual({}); expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull(); }); - it("keeps the header visible but hides the body when there are no open editors", () => { + it("keeps the header visible but hides the body when there are no open files", () => { renderSection({}); - const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (0)" }); - expect(heading).toHaveTextContent("Open Editors"); + const heading = screen.getByRole("heading", { level: 2, name: "Open Files (0)" }); + expect(heading).toHaveTextContent("Open Files"); const section = heading.closest("section") as HTMLElement; expect(within(section).getByText("0")).toHaveClass("workspace-open-editors__count"); - const toggle = within(section).getByRole("button", { name: "Expand Open Editors" }); + const toggle = within(section).getByRole("button", { name: "Expand Open Files" }); expect(toggle).toBeDisabled(); expect(toggle).not.toHaveAttribute("aria-expanded"); @@ -194,13 +198,13 @@ describe("OpenEditorsSection", () => { renderSection({}, "src/pending.ts"); - const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (1)" }); - expect(heading).toHaveTextContent("Open Editors"); + const heading = screen.getByRole("heading", { level: 2, name: "Open Files (1)" }); + expect(heading).toHaveTextContent("Open Files"); const section = heading.closest("section") as HTMLElement; expect(within(section).getByText("1")).toHaveClass("workspace-open-editors__count"); - expect(within(section).getByRole("button", { name: "Collapse Open Editors" })).toHaveAttribute( + expect(within(section).getByRole("button", { name: "Collapse Open Files" })).toHaveAttribute( "aria-expanded", "true" ); @@ -215,7 +219,7 @@ describe("OpenEditorsSection", () => { draftStore.set(openEditorPathsAtomFamily("ws-test"), ["src/app.tsx", "README.md"]); }); - const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (2)" }); + const heading = screen.getByRole("heading", { level: 2, name: "Open Files (2)" }); const section = heading.closest("section") as HTMLElement; const rowButtons = Array.from( section.querySelectorAll(".workspace-open-editors__item") @@ -254,7 +258,7 @@ describe("OpenEditorsSection", () => { expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("README.md"); }); - it("marks dirty open editors and confirms before closing a dirty row", () => { + it("marks dirty open files and confirms before closing a dirty row", () => { const { store } = renderSection( { "biome.jsonc": createDirtyFile("biome.jsonc"), @@ -283,7 +287,7 @@ describe("OpenEditorsSection", () => { expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull(); }); - it("confirms before closing all when open editors include dirty files", () => { + it("confirms before closing all when open files include dirty files", () => { const { store } = renderSection( { "src/clean.ts": createFile("src/clean.ts"), @@ -299,7 +303,7 @@ describe("OpenEditorsSection", () => { "src/dirty.ts", ]); expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument(); - expect(screen.getByText("1 open editors have unsaved changes.")).toBeInTheDocument(); + expect(screen.getByText("1 open files have unsaved changes.")).toBeInTheDocument(); fireEvent.click(screen.getByRole("button", { name: "Discard and Close" })); diff --git a/packages/web/src/features/workspace/views/shared/open-editors-section.tsx b/packages/web/src/features/workspace/views/shared/open-editors-section.tsx index e1770f4b..fd7dd42e 100644 --- a/packages/web/src/features/workspace/views/shared/open-editors-section.tsx +++ b/packages/web/src/features/workspace/views/shared/open-editors-section.tsx @@ -141,15 +141,16 @@ export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEdi {openEditorPaths.length}
- + + } + size="sm" + onClick={requestCloseAll} + /> + {isExpanded ? (
diff --git a/packages/web/src/features/workspace/views/shared/search-panel.test.tsx b/packages/web/src/features/workspace/views/shared/search-panel.test.tsx index b7fd026b..5d4ac457 100644 --- a/packages/web/src/features/workspace/views/shared/search-panel.test.tsx +++ b/packages/web/src/features/workspace/views/shared/search-panel.test.tsx @@ -197,9 +197,7 @@ describe("SearchPanel", () => { fireEvent.change(screen.getByRole("textbox", { name: /Files to Exclude|排除的文件/i }), { target: { value: "**/*.spec.tsx" }, }); - expect( - screen.queryByRole("switch", { name: /Only Open Editors|仅在打开的编辑器中/i }) - ).toBeNull(); + expect(screen.queryByRole("switch", { name: /Only Open Files|仅在打开的文件中/i })).toBeNull(); fireEvent.click( screen.getByRole("button", { name: /Use Exclude Settings and Ignore Files|使用排除设置和忽略文件/i, @@ -296,9 +294,7 @@ describe("SearchPanel", () => { expect(replaceCompound?.contains(expandedDetailsToggle)).toBe(false); expect(excludeCompound).not.toBeNull(); expect(excludeCompound?.contains(ignoreToggle)).toBe(true); - expect( - screen.queryByRole("switch", { name: /Only Open Editors|仅在打开的编辑器中/i }) - ).toBeNull(); + expect(screen.queryByRole("switch", { name: /Only Open Files|仅在打开的文件中/i })).toBeNull(); fireEvent.click(expandedDetailsToggle); const collapsedDetailsToggle = screen.getByRole("button", { diff --git a/packages/web/src/lib/i18n.test.ts b/packages/web/src/lib/i18n.test.ts index f7ae4eef..b51eaf4a 100644 --- a/packages/web/src/lib/i18n.test.ts +++ b/packages/web/src/lib/i18n.test.ts @@ -2,6 +2,7 @@ import fs from "node:fs"; import path from "node:path"; import { describe, expect, it } from "vitest"; +import en from "../locales/en.json"; import zh from "../locales/zh.json"; function flattenKeys(value: unknown, prefix = ""): string[] { @@ -36,6 +37,15 @@ function collectSourceFiles(dir: string): string[] { } describe("i18n coverage", () => { + it("labels the open editor section as open files in user-facing copy", () => { + expect(zh.workspace.sidebar.open_editors).toBe("打开的文件"); + expect(zh.workspace.open_editors.expand_label).toBe("展开打开的文件"); + expect(zh.workspace.open_editors.collapse_label).toBe("收起打开的文件"); + expect(en.workspace.sidebar.open_editors).toBe("Open Files"); + expect(en.workspace.open_editors.expand_label).toBe("Expand Open Files"); + expect(en.workspace.open_editors.collapse_label).toBe("Collapse Open Files"); + }); + it("resolves every static translation key used in source files", () => { const localeKeys = new Set(flattenKeys(zh)); const sourceRoot = path.resolve(__dirname, ".."); diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 3a3f6e19..0b3aac00 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -160,7 +160,7 @@ "explorer": "Explorer", "search": "Search", "source_control": "Source Control", - "open_editors": "Open Editors", + "open_editors": "Open Files", "workspace": "Workspace", "workspace_expand_label": "Expand Workspace", "workspace_collapse_label": "Collapse Workspace" @@ -174,9 +174,9 @@ "open_editors": { "title_with_count": "{title} ({count})", "close_path": "Close {path}", - "close_all_unsaved_description": "{count} open editors have unsaved changes. Closing them will discard those edits.", - "expand_label": "Expand Open Editors", - "collapse_label": "Collapse Open Editors" + "close_all_unsaved_description": "{count} open files have unsaved changes. Closing them will discard those edits.", + "expand_label": "Expand Open Files", + "collapse_label": "Collapse Open Files" }, "search": { "empty": "Type to search across file contents.", @@ -200,7 +200,7 @@ "preserve_case": "Preserve Case", "files_to_include": "Files to Include", "files_to_exclude": "Files to Exclude", - "only_open_editors": "Only Open Editors", + "only_open_editors": "Only Open Files", "use_ignore_files": "Use Ignore Files", "use_exclude_settings_and_ignore_files": "Use Exclude Settings and Ignore Files", "preview": "Preview", diff --git a/packages/web/src/locales/zh.json b/packages/web/src/locales/zh.json index ab38db99..cf1a7278 100644 --- a/packages/web/src/locales/zh.json +++ b/packages/web/src/locales/zh.json @@ -160,7 +160,7 @@ "explorer": "资源管理器", "search": "搜索", "source_control": "源代码管理", - "open_editors": "打开的编辑器", + "open_editors": "打开的文件", "workspace": "工作区", "workspace_expand_label": "展开工作区", "workspace_collapse_label": "收起工作区" @@ -174,9 +174,9 @@ "open_editors": { "title_with_count": "{title} ({count})", "close_path": "关闭 {path}", - "close_all_unsaved_description": "{count} 个打开的编辑器有未保存的更改。关闭后这些编辑将被放弃。", - "expand_label": "展开打开的编辑器", - "collapse_label": "收起打开的编辑器" + "close_all_unsaved_description": "{count} 个打开的文件有未保存的更改。关闭后这些更改将被放弃。", + "expand_label": "展开打开的文件", + "collapse_label": "收起打开的文件" }, "search": { "empty": "输入关键词以搜索文件内容。", @@ -200,7 +200,7 @@ "preserve_case": "保留大小写", "files_to_include": "包含的文件", "files_to_exclude": "排除的文件", - "only_open_editors": "仅在打开的编辑器中", + "only_open_editors": "仅在打开的文件中", "use_ignore_files": "使用忽略文件", "use_exclude_settings_and_ignore_files": "使用排除设置和忽略文件", "preview": "预览", diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index f0a31d70..c4966ec5 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -13976,7 +13976,15 @@ body.is-dragging-pane .session-action-btn-drag { .workspace-sidebar-section__actions { margin-left: auto; - gap: 8px; + gap: var(--gap-compact); +} + +.workspace-sidebar-section__actions .panel-toolbar-btn { + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + padding: 0; } .workspace-sidebar-section__title { @@ -14141,7 +14149,11 @@ body.is-dragging-pane .session-action-btn-drag { .workspace-open-editors__close-all { margin-left: auto; + width: 24px; + height: 24px; + min-width: 24px; min-height: 24px; + padding: 0; background: transparent; color: var(--text-secondary); } @@ -16237,9 +16249,11 @@ body.is-dragging-pane .session-action-btn-drag { .workspace-open-editors__close-all { margin-left: auto; + width: 24px; + height: 24px; + min-width: 24px; min-height: 24px; - padding: 0 8px; - border: 1px solid var(--component-mix-border-default-84pct-transparent); + padding: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); @@ -16248,7 +16262,6 @@ body.is-dragging-pane .session-action-btn-drag { } .workspace-open-editors__close-all:disabled { - border-color: var(--component-mix-border-default-84pct-transparent); background: transparent; color: var(--text-secondary); opacity: 1; diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts index 91c85b08..5c7ee410 100644 --- a/packages/web/src/styles/components.theme.test.ts +++ b/packages/web/src/styles/components.theme.test.ts @@ -2723,6 +2723,9 @@ describe("components.css theme-sensitive surfaces", () => { ); const workspaceSectionHeader = getLastRuleBlock(".workspace-sidebar-section__header"); const workspaceSectionActions = getLastRuleBlock(".workspace-sidebar-section__actions"); + const workspaceSectionActionButton = getLastRuleBlock( + ".workspace-sidebar-section__actions .panel-toolbar-btn" + ); const mobileExplorerPanel = getLastRuleBlock(".mobile-explorer-panel"); const mobileQuickJumpSearch = getLastRuleBlock( ".mobile-sheet--files .workspace-quick-jump__search" @@ -2787,6 +2790,10 @@ describe("components.css theme-sensitive surfaces", () => { expect(workspaceSectionHeader).toContain("justify-content: space-between"); expect(workspaceSectionHeader).toContain("margin-bottom: var(--sp-2)"); expect(workspaceSectionActions).toContain("margin-left: auto"); + expect(workspaceSectionActions).toContain("gap: var(--gap-compact)"); + expect(workspaceSectionActionButton).toContain("width: 24px"); + expect(workspaceSectionActionButton).toContain("height: 24px"); + expect(workspaceSectionActionButton).toContain("padding: 0"); expect(mobileQuickJumpSearch).toContain("border-radius: 4px"); expect(mobileQuickJumpItem).toContain("grid-template-columns: minmax(0, 1fr)"); expect(mobileSearchPanel).toContain("background: transparent"); @@ -3327,6 +3334,9 @@ describe("components.css theme-sensitive surfaces", () => { const openEditorsTitle = getLastRuleBlock(".workspace-open-editors__title"); const openEditorsTitleText = getLastRuleBlock(".workspace-open-editors__title-text"); const openEditorsCloseAll = getLastRuleBlock(".workspace-open-editors__close-all"); + const openEditorsCloseAllDisabled = getLastRuleBlock( + ".workspace-open-editors__close-all:disabled" + ); const openEditorsRow = getLastRuleBlock(".workspace-open-editors__row"); const openEditorsItemHover = getLastRuleBlock( ".workspace-open-editors__item:hover:not(.workspace-open-editors__item--active)" @@ -3393,6 +3403,8 @@ describe("components.css theme-sensitive surfaces", () => { expect(openEditorsCloseAll).toContain("margin-left: auto"); expect(openEditorsCloseAll).toContain("background: transparent"); expect(openEditorsCloseAll).toContain("color: var(--text-secondary)"); + expect(openEditorsCloseAll).not.toContain("border:"); + expect(openEditorsCloseAllDisabled).not.toContain("border-color"); expect(workspaceSection).not.toContain("border:"); expect(workspaceSection).not.toContain("border-radius:"); expect(workspaceSectionHeader).toContain("margin-bottom: var(--sp-2)"); From 58cd376b9004ffd4449aa4ec995812f3d37469d0 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 31 May 2026 00:07:31 +0800 Subject: [PATCH 156/162] Unify agent pane drag behavior --- .../agent-panes/actions/pane-drag-types.ts | 2 +- .../agent-panes/actions/use-pane-actions.ts | 18 ++- .../actions/use-pane-drag-controller.test.tsx | 6 +- .../actions/use-pane-drag-controller.ts | 4 - .../src/features/agent-panes/index.test.tsx | 149 ++++++++++++++++-- .../web/src/features/agent-panes/index.tsx | 75 ++++++--- .../agent-panes/pane-layout-tree.test.ts | 145 ++++++++--------- .../features/agent-panes/pane-layout-tree.ts | 40 +++-- .../views/shared/draft-launcher.test.tsx | 31 ++++ .../views/shared/draft-launcher.tsx | 41 ++++- .../views/shared/editor-pane-card.test.tsx | 38 +++++ .../views/shared/editor-pane-card.tsx | 46 +++++- 12 files changed, 450 insertions(+), 145 deletions(-) diff --git a/packages/web/src/features/agent-panes/actions/pane-drag-types.ts b/packages/web/src/features/agent-panes/actions/pane-drag-types.ts index b18a8193..6921c259 100644 --- a/packages/web/src/features/agent-panes/actions/pane-drag-types.ts +++ b/packages/web/src/features/agent-panes/actions/pane-drag-types.ts @@ -1,6 +1,6 @@ export type PaneDropPlacement = "left" | "right" | "top" | "bottom" | "center"; -export type PaneDropTargetType = "session" | "draft"; +export type PaneDropTargetType = "session" | "draft" | "editor"; export interface PaneDropIntent { sourcePaneId: string; diff --git a/packages/web/src/features/agent-panes/actions/use-pane-actions.ts b/packages/web/src/features/agent-panes/actions/use-pane-actions.ts index 765cb766..65d07364 100644 --- a/packages/web/src/features/agent-panes/actions/use-pane-actions.ts +++ b/packages/web/src/features/agent-panes/actions/use-pane-actions.ts @@ -12,12 +12,12 @@ import { closePaneBySessionId, convertDraftPaneToEditor, enforceSingleEditorPaneInvariant, - insertPaneAtEdge, - moveSessionToDraftPane, + insertPaneAtEdge as insertPaneNodeAtEdge, removePaneBySessionId, replaceSessionInPane, splitPaneByPaneId, splitPaneBySessionId, + swapPaneLeavesByPaneId, swapPaneSessionsByPaneId, } from "../pane-layout-tree"; import type { PaneDropPlacement } from "./pane-drag-types"; @@ -141,20 +141,22 @@ export function usePaneActions(workspaceId: string) { [applyLayout] ); - const moveSessionToDraft = useCallback( + const swapPaneLeaves = useCallback( (sourcePaneId: string, targetPaneId: string) => { - applyLayout((current) => moveSessionToDraftPane(current, sourcePaneId, targetPaneId)); + applyLayout((current) => swapPaneLeavesByPaneId(current, sourcePaneId, targetPaneId)); }, [applyLayout] ); - const insertSessionPaneAtEdge = useCallback( + const insertPaneAtEdge = useCallback( ( sourcePaneId: string, targetPaneId: string, placement: Exclude ) => { - applyLayout((current) => insertPaneAtEdge(current, sourcePaneId, targetPaneId, placement)); + applyLayout((current) => + insertPaneNodeAtEdge(current, sourcePaneId, targetPaneId, placement) + ); }, [applyLayout] ); @@ -172,8 +174,8 @@ export function usePaneActions(workspaceId: string) { replaceWithSession, splitDraftPane, splitSessionPane, + swapPaneLeaves, swapPaneSessions, - moveSessionToDraft, - insertSessionPaneAtEdge, + insertPaneAtEdge, }; } diff --git a/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.test.tsx b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.test.tsx index 8747ef9e..06fd3c7d 100644 --- a/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.test.tsx +++ b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.test.tsx @@ -47,7 +47,7 @@ describe("usePaneDragController", () => { expect(result.current.state.previewPosition).toEqual({ x: 130, y: 180 }); }); - it("treats draft panes as center-only targets and dispatches a center drop intent", () => { + it("treats draft panes like other pane targets and dispatches edge drop intents", () => { const onDrop = vi.fn(); const { result } = renderHook(() => usePaneDragController({ onDrop })); @@ -60,7 +60,7 @@ describe("usePaneDragController", () => { result.current.handlePointerMove({ clientX: 310, clientY: 140 } as PointerEvent); }); - expect(result.current.state.hoverPlacement).toBe("center"); + expect(result.current.state.hoverPlacement).toBe("left"); act(() => { result.current.handlePointerUp(); @@ -69,7 +69,7 @@ describe("usePaneDragController", () => { expect(onDrop).toHaveBeenCalledWith({ sourcePaneId: "source-pane", targetPaneId: "draft-pane", - placement: "center", + placement: "left", targetType: "draft", }); expect(result.current.state.isDragging).toBe(false); diff --git a/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.ts b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.ts index 136dc335..04ac8073 100644 --- a/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.ts +++ b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.ts @@ -70,10 +70,6 @@ function resolvePlacement( return null; } - if (pane.type === "draft") { - return "center"; - } - const edgeX = clampEdgeBand(rect.width); const edgeY = clampEdgeBand(rect.height); diff --git a/packages/web/src/features/agent-panes/index.test.tsx b/packages/web/src/features/agent-panes/index.test.tsx index a6a23ed4..219239ec 100644 --- a/packages/web/src/features/agent-panes/index.test.tsx +++ b/packages/web/src/features/agent-panes/index.test.tsx @@ -113,7 +113,7 @@ type MockDraftLauncherProps = { dragState?: { isActiveDropTarget: boolean; isDragging: boolean; - hoverPlacement: "center" | null; + hoverPlacement: PaneDropIntent["placement"] | null; }; workspaceId: string; paneId?: string; @@ -168,14 +168,32 @@ vi.mock("./views/shared/draft-launcher", async () => { const mockEditorPaneCard = vi.fn( ({ paneId, + dragState, onClosePane, + onPaneDragStart, }: { paneId: string; workspaceId: string; + dragState?: { + isActiveDropTarget: boolean; + isDragging: boolean; + hoverPlacement: PaneDropIntent["placement"] | null; + }; onClosePane: (paneId: string) => void; + onPaneDragStart?: (source: PaneDragSourceSnapshot) => void; onSplitPane: (paneId: string, direction: "horizontal" | "vertical") => void; }) => ( -
+
+ {onPaneDragStart ? ( + + ) : null} @@ -187,7 +205,13 @@ vi.mock("./views/shared/editor-pane-card", () => ({ EditorPaneCard: (props: { paneId: string; workspaceId: string; + dragState?: { + isActiveDropTarget: boolean; + isDragging: boolean; + hoverPlacement: PaneDropIntent["placement"] | null; + }; onClosePane: (paneId: string) => void; + onPaneDragStart?: (source: PaneDragSourceSnapshot) => void; onSplitPane: (paneId: string, direction: "horizontal" | "vertical") => void; }) => mockEditorPaneCard(props), })); @@ -586,7 +610,7 @@ describe("AgentPanes", () => { ); }); - it("moves a session into a draft pane on a center drop over a draft target", async () => { + it("swaps a session with a draft pane on a center drop over a draft target", async () => { const sendCommand = vi.fn(async (op: string, args?: Record) => { if (op === "session.list") { return [ @@ -644,9 +668,14 @@ describe("AgentPanes", () => { await waitFor(() => { expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual({ - id: "right", - type: "leaf", - sessionId: "sess_1", + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf" }, + { id: "right", type: "leaf", sessionId: "sess_1" }, + ], }); }); @@ -656,9 +685,14 @@ describe("AgentPanes", () => { workspaceId: "ws-1", uiState: expect.objectContaining({ paneLayout: { - id: "right", - type: "leaf", - sessionId: "sess_1", + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf" }, + { id: "right", type: "leaf", sessionId: "sess_1" }, + ], }, }), }), @@ -865,6 +899,103 @@ describe("AgentPanes", () => { expect(document.body).not.toHaveClass("is-dragging-pane"); }); + it("registers editor pane wrappers as drop targets and swaps with a session through pointer drag", async () => { + const { store } = createAgentPaneStore({ + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf", leafKind: "session", sessionId: "sess_1" }, + { id: "right", type: "leaf", leafKind: "editor" }, + ], + }); + store.set(activeEditorPaneIdAtomFamily("ws-1"), "right"); + store.set(focusedEditorPaneIdAtomFamily("ws-1"), "right"); + + render( + + + + ); + + const editorPane = setPaneRect("right", { left: 260, top: 0, width: 220, height: 180 }); + setPaneRect("left", { left: 0, top: 0, width: 220, height: 180 }); + + fireEvent.pointerDown(screen.getByRole("button", { name: "drag-sess_1" })); + fireEvent.pointerMove(window, { clientX: 370, clientY: 90 }); + + await waitFor(() => { + expect(editorPane).toHaveAttribute("data-pane-drop-target", "true"); + expect(editorPane).toHaveAttribute("data-pane-hover-placement", "center"); + }); + + fireEvent.pointerUp(window, { clientX: 370, clientY: 90 }); + + await waitFor(() => { + expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual({ + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf", leafKind: "editor" }, + { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_1" }, + ], + }); + expect(store.get(activeEditorPaneIdAtomFamily("ws-1"))).toBe("left"); + }); + }); + + it("keeps editor focus attached when the editor pane is dragged over a session", async () => { + const { store } = createAgentPaneStore({ + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf", leafKind: "editor" }, + { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_1" }, + ], + }); + store.set(activeEditorPaneIdAtomFamily("ws-1"), "left"); + store.set(focusedEditorPaneIdAtomFamily("ws-1"), "left"); + + render( + + + + ); + + setPaneRect("left", { left: 0, top: 0, width: 220, height: 180 }); + const sessionPane = setPaneRect("right", { left: 260, top: 0, width: 220, height: 180 }); + + fireEvent.pointerDown(screen.getByRole("button", { name: "drag-left" })); + fireEvent.pointerMove(window, { clientX: 370, clientY: 90 }); + + await waitFor(() => { + expect(sessionPane).toHaveAttribute("data-pane-drop-target", "true"); + expect(sessionPane).toHaveAttribute("data-pane-hover-placement", "center"); + }); + + fireEvent.pointerUp(window, { clientX: 370, clientY: 90 }); + + await waitFor(() => { + expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual({ + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf", leafKind: "session", sessionId: "sess_1" }, + { id: "right", type: "leaf", leafKind: "editor" }, + ], + }); + expect(store.get(activeEditorPaneIdAtomFamily("ws-1"))).toBe("right"); + expect(store.get(focusedEditorPaneIdAtomFamily("ws-1"))).toBe("right"); + }); + }); + it("keeps the remaining draft pane visible after closing the last session pane", async () => { const { store } = createAgentPaneStore({ id: "root", diff --git a/packages/web/src/features/agent-panes/index.tsx b/packages/web/src/features/agent-panes/index.tsx index efed6293..6776a1cf 100644 --- a/packages/web/src/features/agent-panes/index.tsx +++ b/packages/web/src/features/agent-panes/index.tsx @@ -68,7 +68,7 @@ export const AgentPanes: FC = ({ hydrateSessions = true }) => { }); const setActiveEditorPaneId = useSetAtom(activeEditorPaneIdAtomFamily(workspaceId)); const setFocusedEditorPaneId = useSetAtom(focusedEditorPaneIdAtomFamily(workspaceId)); - const { insertSessionPaneAtEdge, moveSessionToDraft, swapPaneSessions } = paneActions; + const { insertPaneAtEdge, swapPaneLeaves } = paneActions; const hasLayoutSessions = collectSessionIds(paneLayout).length > 0; const shouldShowStandaloneDraftLauncher = sessions.length === 0 && @@ -124,19 +124,53 @@ export const AgentPanes: FC = ({ hydrateSessions = true }) => { const handlePaneDrop = useCallback( (intent: PaneDropIntent) => { - if (intent.placement === "center") { - if (intent.targetType === "draft") { - moveSessionToDraft(intent.sourcePaneId, intent.targetPaneId); + const sourceWasEditor = paneLayoutHasEditorPaneId(paneLayout, intent.sourcePaneId); + const targetWasEditor = paneLayoutHasEditorPaneId(paneLayout, intent.targetPaneId); + const previousEditorPaneId = sourceWasEditor + ? intent.sourcePaneId + : targetWasEditor + ? intent.targetPaneId + : null; + let nextEditorPaneId = previousEditorPaneId; + const syncEditorPaneFocus = () => { + if ( + !previousEditorPaneId || + !nextEditorPaneId || + previousEditorPaneId === nextEditorPaneId + ) { return; } - swapPaneSessions(intent.sourcePaneId, intent.targetPaneId); + setActiveEditorPaneId((current) => + current === previousEditorPaneId ? nextEditorPaneId : current + ); + setFocusedEditorPaneId((current) => + current === previousEditorPaneId ? nextEditorPaneId : current + ); + }; + + if (intent.placement === "center") { + if (sourceWasEditor) { + nextEditorPaneId = intent.targetPaneId; + } else if (targetWasEditor) { + nextEditorPaneId = intent.sourcePaneId; + } + + swapPaneLeaves(intent.sourcePaneId, intent.targetPaneId); + syncEditorPaneFocus(); return; } - insertSessionPaneAtEdge(intent.sourcePaneId, intent.targetPaneId, intent.placement); + if (sourceWasEditor) { + nextEditorPaneId = intent.sourcePaneId; + } else if (targetWasEditor) { + nextEditorPaneId = intent.targetPaneId; + } + + insertPaneAtEdge(intent.sourcePaneId, intent.targetPaneId, intent.placement); + syncEditorPaneFocus(); }, - [insertSessionPaneAtEdge, moveSessionToDraft, swapPaneSessions] + [insertPaneAtEdge, paneLayout, setActiveEditorPaneId, setFocusedEditorPaneId, swapPaneLeaves] ); const dragController = usePaneDragController({ enabled: paneDragEnabled, @@ -285,12 +319,8 @@ const PaneLeaf: FC = ({ return; } - if (isEditorLeaf(node)) { - return; - } - dragController.registerPane(node.id, { - type: node.sessionId ? "session" : "draft", + type: isEditorLeaf(node) ? "editor" : node.sessionId ? "session" : "draft", element, }); @@ -299,7 +329,9 @@ const PaneLeaf: FC = ({ }; }, [dragController, node]); - if (node.sessionId) { + const sessionId = node.sessionId; + + if (sessionId) { return (
= ({ paneId={node.id} onPaneDragStart={dragController.startDrag} onPaneDrop={onPaneDrop} - sessionId={node.sessionId} + sessionId={sessionId} onClose={async () => { - onCloseSession(node.sessionId); - await onCloseSessionCommand(node.sessionId, "draft"); + onCloseSession(sessionId); + await onCloseSessionCommand(sessionId, "draft"); }} - onSplitHorizontal={() => onSplitSession(node.sessionId!, "horizontal")} - onSplitVertical={() => onSplitSession(node.sessionId!, "vertical")} + onSplitHorizontal={() => onSplitSession(sessionId, "horizontal")} + onSplitVertical={() => onSplitSession(sessionId, "vertical")} />
); @@ -334,11 +366,15 @@ const PaneLeaf: FC = ({ className="agent-pane-leaf" data-pane-id={node.id} data-pane-dragging={dragState.isDragging ? "true" : undefined} + data-pane-drop-target={dragState.isActiveDropTarget ? "true" : undefined} + data-pane-hover-placement={dragState.hoverPlacement ?? undefined} onPointerDownCapture={() => onActivateEditorPane(node.id)} > @@ -360,10 +396,11 @@ const PaneLeaf: FC = ({ dragState={{ isDragging: dragState.isDragging, isActiveDropTarget: dragState.isActiveDropTarget, - hoverPlacement: dragState.hoverPlacement === "center" ? "center" : null, + hoverPlacement: dragState.isActiveDropTarget ? dragState.hoverPlacement : null, }} workspaceId={workspaceId} paneId={node.id} + onPaneDragStart={dragController.startDrag} onAssignSession={onAssignSession} onClosePane={onCloseDraftPane} onOpenFile={onOpenFile} diff --git a/packages/web/src/features/agent-panes/pane-layout-tree.test.ts b/packages/web/src/features/agent-panes/pane-layout-tree.test.ts index 404f84bf..05924f0d 100644 --- a/packages/web/src/features/agent-panes/pane-layout-tree.test.ts +++ b/packages/web/src/features/agent-panes/pane-layout-tree.test.ts @@ -12,10 +12,10 @@ import { enforceSingleEditorPaneInvariant, findEditorPaneId, insertPaneAtEdge, - moveSessionToDraftPane, removePaneBySessionId, splitPaneByPaneId, splitPaneBySessionId, + swapPaneLeavesByPaneId, swapPaneSessionsByPaneId, } from "./pane-layout-tree"; @@ -270,99 +270,30 @@ describe("pane-layout-tree", () => { expect(swapPaneSessionsByPaneId(layout, "left", "missing")).toBe(layout); }); - it("moves a session into a draft leaf and collapses the old source branch", () => { + it("swaps editor and session leaf contents without changing pane ids", () => { const layout: PaneNode = { id: "root", type: "split", direction: "horizontal", ratio: 0.5, children: [ - { - id: "left-split", - type: "split", - direction: "vertical", - ratio: 0.5, - children: [ - { id: "left-top", type: "leaf", sessionId: "sess_1" }, - { id: "left-bottom", type: "leaf", sessionId: "sess_2" }, - ], - }, - { id: "right", type: "leaf" }, + { id: "left", type: "leaf", leafKind: "editor" }, + { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_2" }, ], }; - expect(moveSessionToDraftPane(layout, "left-bottom", "right")).toEqual({ + expect(swapPaneLeavesByPaneId(layout, "left", "right")).toEqual({ id: "root", type: "split", direction: "horizontal", ratio: 0.5, children: [ - { id: "left-top", type: "leaf", sessionId: "sess_1" }, - { id: "right", type: "leaf", sessionId: "sess_2" }, + { id: "left", type: "leaf", leafKind: "session", sessionId: "sess_2" }, + { id: "right", type: "leaf", leafKind: "editor" }, ], }); }); - it("returns the original tree when move source pane is missing", () => { - const layout: PaneNode = { - id: "root", - type: "split", - direction: "horizontal", - ratio: 0.5, - children: [ - { id: "left", type: "leaf", sessionId: "sess_1" }, - { id: "right", type: "leaf" }, - ], - }; - - expect(moveSessionToDraftPane(layout, "missing", "right")).toBe(layout); - }); - - it("returns the original tree when move target pane is missing", () => { - const layout: PaneNode = { - id: "root", - type: "split", - direction: "horizontal", - ratio: 0.5, - children: [ - { id: "left", type: "leaf", sessionId: "sess_1" }, - { id: "right", type: "leaf" }, - ], - }; - - expect(moveSessionToDraftPane(layout, "left", "missing")).toBe(layout); - }); - - it("returns the original tree when move target pane is a session leaf", () => { - const layout: PaneNode = { - id: "root", - type: "split", - direction: "horizontal", - ratio: 0.5, - children: [ - { id: "left", type: "leaf", sessionId: "sess_1" }, - { id: "right", type: "leaf", sessionId: "sess_2" }, - ], - }; - - expect(moveSessionToDraftPane(layout, "left", "right")).toBe(layout); - }); - - it("returns the original tree when move source pane is a draft leaf", () => { - const layout: PaneNode = { - id: "root", - type: "split", - direction: "horizontal", - ratio: 0.5, - children: [ - { id: "left", type: "leaf" }, - { id: "right", type: "leaf" }, - ], - }; - - expect(moveSessionToDraftPane(layout, "left", "right")).toBe(layout); - }); - it("wraps the target leaf with a horizontal split on left insert", () => { const nowSpy = vi.spyOn(Date, "now").mockReturnValue(1700000000000); @@ -465,6 +396,54 @@ describe("pane-layout-tree", () => { }); }); + it("wraps a session target with an editor source on edge insert", () => { + const layout: PaneNode = { + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf", leafKind: "editor" }, + { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_2" }, + ], + }; + + expect(insertPaneAtEdge(layout, "left", "right", "left")).toEqual({ + id: expect.stringMatching(/^split-right-left-/), + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf", leafKind: "editor" }, + { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_2" }, + ], + }); + }); + + it("wraps a session target with a draft source on edge insert", () => { + const layout: PaneNode = { + id: "root", + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "left", type: "leaf", leafKind: "draft" }, + { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_2" }, + ], + }; + + expect(insertPaneAtEdge(layout, "left", "right", "right")).toEqual({ + id: expect.stringMatching(/^split-right-right-/), + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_2" }, + { id: "left", type: "leaf", leafKind: "draft" }, + ], + }); + }); + it("returns the original tree when attempting to drag onto the same pane", () => { const layout: PaneNode = { id: "root", @@ -478,11 +457,10 @@ describe("pane-layout-tree", () => { }; expect(insertPaneAtEdge(layout, "left", "left", "left")).toBe(layout); - expect(moveSessionToDraftPane(layout, "left", "left")).toBe(layout); expect(swapPaneSessionsByPaneId(layout, "left", "left")).toBe(layout); }); - it("rejects draft edge insertion and preserves the input layout", () => { + it("wraps a draft target leaf on edge insert", () => { const layout: PaneNode = { id: "root", type: "split", @@ -494,7 +472,16 @@ describe("pane-layout-tree", () => { ], }; - expect(insertPaneAtEdge(layout, "left", "right", "right")).toBe(layout); + expect(insertPaneAtEdge(layout, "left", "right", "right")).toEqual({ + id: expect.stringMatching(/^split-right-right-/), + type: "split", + direction: "horizontal", + ratio: 0.5, + children: [ + { id: "right", type: "leaf" }, + { id: "left", type: "leaf", sessionId: "sess_1" }, + ], + }); }); it("splits a draft pane by pane id without relying on a session id marker", () => { diff --git a/packages/web/src/features/agent-panes/pane-layout-tree.ts b/packages/web/src/features/agent-panes/pane-layout-tree.ts index f53951b3..623bb5d4 100644 --- a/packages/web/src/features/agent-panes/pane-layout-tree.ts +++ b/packages/web/src/features/agent-panes/pane-layout-tree.ts @@ -1,6 +1,6 @@ -import type { PaneNode } from "./atoms/pane-layout"; +import type { PaneLeaf, PaneNode, PaneSplit } from "./atoms/pane-layout"; -type PaneDirection = NonNullable; +type PaneDirection = NonNullable; type PaneDropPlacement = "left" | "right" | "top" | "bottom" | "center"; function isLegacyLeaf(node: PaneNode): boolean { @@ -44,7 +44,7 @@ export function paneLayoutHasDraftPaneId(node: PaneNode, paneId: string): boolea return leaf ? isDraftLeaf(leaf) : false; } -function createDraftLeaf(id: string, legacy = false): PaneNode { +function createDraftLeaf(id: string, legacy = false): PaneLeaf { return { id, type: "leaf", @@ -52,7 +52,7 @@ function createDraftLeaf(id: string, legacy = false): PaneNode { }; } -function createSessionLeaf(id: string, sessionId: string, legacy = false): PaneNode { +function createSessionLeaf(id: string, sessionId: string, legacy = false): PaneLeaf { return { id, type: "leaf", @@ -61,7 +61,7 @@ function createSessionLeaf(id: string, sessionId: string, legacy = false): PaneN }; } -function createEditorLeaf(id: string): PaneNode { +function createEditorLeaf(id: string): PaneLeaf { return { id, type: "leaf", @@ -69,6 +69,13 @@ function createEditorLeaf(id: string): PaneNode { }; } +function cloneLeafWithId(leaf: PaneLeaf, id: string): PaneLeaf { + return { + ...leaf, + id, + }; +} + function createDragSplitId( targetPaneId: string, placement: Exclude @@ -76,7 +83,7 @@ function createDragSplitId( return `split-${targetPaneId}-${placement}-${Date.now()}`; } -function findLeafByPaneId(node: PaneNode, paneId: string): PaneNode | null { +function findLeafByPaneId(node: PaneNode, paneId: string): PaneLeaf | null { if (node.type === "leaf") { return node.id === paneId ? node : null; } @@ -94,7 +101,7 @@ function findLeafByPaneId(node: PaneNode, paneId: string): PaneNode | null { function replaceLeafByPaneId( node: PaneNode, paneId: string, - replace: (leaf: PaneNode) => PaneNode + replace: (leaf: PaneLeaf) => PaneNode ): PaneNode { if (node.type === "leaf") { if (node.id !== paneId) { @@ -332,7 +339,7 @@ export function swapPaneSessionsByPaneId( })); } -export function moveSessionToDraftPane( +export function swapPaneLeavesByPaneId( node: PaneNode, sourcePaneId: string, targetPaneId: string @@ -343,14 +350,17 @@ export function moveSessionToDraftPane( const source = findLeafByPaneId(node, sourcePaneId); const target = findLeafByPaneId(node, targetPaneId); - if (!source?.sessionId || !target || target.sessionId) { + if (!source || !target) { return node; } - const stripped = - removeLeafByPaneId(node, sourcePaneId) ?? - createDraftLeaf(node.id, node.type === "leaf" && isLegacyLeaf(node)); - return assignSessionToPane(stripped, targetPaneId, source.sessionId); + const withSourceSwapped = replaceLeafByPaneId(node, sourcePaneId, (leaf) => + cloneLeafWithId(target, leaf.id) + ); + + return replaceLeafByPaneId(withSourceSwapped, targetPaneId, (leaf) => + cloneLeafWithId(source, leaf.id) + ); } export function insertPaneAtEdge( @@ -365,14 +375,14 @@ export function insertPaneAtEdge( const source = findLeafByPaneId(node, sourcePaneId); const target = findLeafByPaneId(node, targetPaneId); - if (!source?.sessionId || !target?.sessionId) { + if (!source || !target) { return node; } const stripped = removeLeafByPaneId(node, sourcePaneId) ?? createDraftLeaf(node.id, node.type === "leaf" && isLegacyLeaf(node)); - const incomingLeaf = createSessionLeaf(source.id, source.sessionId, isLegacyLeaf(source)); + const incomingLeaf = cloneLeafWithId(source, source.id); return replaceLeafByPaneId(stripped, targetPaneId, (leaf) => ({ id: createDragSplitId(leaf.id, placement), diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx index f6c5f37f..e615250e 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx @@ -7,12 +7,19 @@ import { WORKSPACE_PATH_DRAG_MIME } from "../../../../lib/workspace-path-drag"; import { DraftLauncher } from "./draft-launcher"; const mockUseProviderLauncher = vi.fn(); +const paneDragEnabledMock = vi.hoisted(() => ({ + value: true, +})); const originalResizeObserver = global.ResizeObserver; vi.mock("../../actions/use-provider-launcher", () => ({ useProviderLauncher: (...args: unknown[]) => mockUseProviderLauncher(...args), })); +vi.mock("../../actions/use-pane-drag-enabled", () => ({ + usePaneDragEnabled: () => paneDragEnabledMock.value, +})); + function createRuntimeState(providerId: "claude" | "codex") { return { runtime: { @@ -85,6 +92,7 @@ describe("DraftLauncher", () => { beforeEach(() => { vi.clearAllMocks(); + paneDragEnabledMock.value = true; mockUseProviderLauncher.mockReturnValue({ states: { claude: createRuntimeState("claude"), @@ -139,6 +147,29 @@ describe("DraftLauncher", () => { expect(onClosePane).toHaveBeenCalledWith("pane-1"); }); + it("renders a drag handle in the header actions on desktop", () => { + const store = createDraftLauncherStore(); + const onPaneDragStart = vi.fn(); + + render( + + + + ); + + const dragHandle = screen.getByRole("button", { name: "Drag pane" }); + + expect(dragHandle).toBeInTheDocument(); + + fireEvent.pointerDown(dragHandle); + + expect(onPaneDragStart).toHaveBeenCalledWith(expect.objectContaining({ paneId: "pane-1" })); + }); + it("renders provider cards with semantic business icons", () => { const store = createStore(); diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx index 5beaca03..dde45e54 100644 --- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx +++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx @@ -1,6 +1,6 @@ import type { Session } from "@coder-studio/core"; import { useAtomValue, useSetAtom } from "jotai"; -import { ArrowRight, FlipHorizontal, FlipVertical, X } from "lucide-react"; +import { ArrowRight, FlipHorizontal, FlipVertical, GripVertical, X } from "lucide-react"; import { type DragEvent, type FC, type PointerEvent, useEffect, useRef, useState } from "react"; import { dispatchCommandAtom } from "../../../../atoms/connection"; import { sessionsAtom } from "../../../../atoms/sessions"; @@ -11,7 +11,9 @@ import { hasWorkspacePathDragType, } from "../../../../lib/workspace-path-drag"; import { buildDiagnosticsPath } from "../../../diagnostics"; -import type { PaneDropIntent } from "../../actions/pane-drag-types"; +import type { PaneDropIntent, PaneDropPlacement } from "../../actions/pane-drag-types"; +import type { PaneDragSourceSnapshot } from "../../actions/use-pane-drag-controller"; +import { usePaneDragEnabled } from "../../actions/use-pane-drag-enabled"; import { type ProviderId, useProviderLauncher } from "../../actions/use-provider-launcher"; const COMPACT_CAROUSEL_MAX_WIDTH_REM = 28; @@ -35,13 +37,14 @@ function getCompactCarouselMaxWidthPx(): number { interface DraftLauncherDragState { isDragging: boolean; isActiveDropTarget: boolean; - hoverPlacement: "center" | null; + hoverPlacement: PaneDropPlacement | null; } interface DraftLauncherProps { dragState?: DraftLauncherDragState; workspaceId: string; paneId?: string; + onPaneDragStart?: (source: PaneDragSourceSnapshot) => void; onAssignSession?: (paneId: string, sessionId: string) => void; onClosePane?: (paneId: string) => void; onOpenFile?: (paneId: string, path: string) => void; @@ -54,6 +57,7 @@ export const DraftLauncher: FC = ({ dragState, workspaceId, paneId, + onPaneDragStart, onAssignSession, onClosePane, onOpenFile, @@ -69,6 +73,9 @@ export const DraftLauncher: FC = ({ const [isFileDropTarget, setIsFileDropTarget] = useState(false); const draftLauncherRef = useRef(null); const swipeStartXRef = useRef(null); + const supportsPaneDrag = usePaneDragEnabled(); + const canDragPane = supportsPaneDrag && Boolean(paneId && onPaneDragStart); + const paneDropOverlayPlacement = dragState?.isActiveDropTarget ? dragState.hoverPlacement : null; const { states, launch } = useProviderLauncher( dispatch, workspaceId, @@ -307,8 +314,8 @@ export const DraftLauncher: FC = ({
Open in editor
- ) : dragState?.isActiveDropTarget ? ( -
+ ) : paneDropOverlayPlacement ? ( +
Move here
) : null} @@ -327,6 +334,30 @@ export const DraftLauncher: FC = ({
+ {canDragPane ? ( + + } + onPointerDown={(event) => { + event.preventDefault(); + event.stopPropagation(); + + if (event.pointerType === "touch") { + return; + } + + if (!paneId) { + return; + } + + onPaneDragStart?.({ paneId }); + }} + size="sm" + /> + + ) : null} ({
)), })); +const paneDragEnabledMock = vi.hoisted(() => ({ + value: true, +})); vi.mock("../../../../lib/i18n", () => ({ useTranslation: () => (key: string, params?: Record) => { @@ -37,6 +40,10 @@ vi.mock("../../../../lib/i18n", () => ({ }, })); +vi.mock("../../actions/use-pane-drag-enabled", () => ({ + usePaneDragEnabled: () => paneDragEnabledMock.value, +})); + vi.mock("../../../code-editor/actions/use-code-editor-actions", () => ({ useCodeEditorActions: mocks.mockUseCodeEditorActions, })); @@ -51,6 +58,37 @@ describe("EditorPaneCard", () => { vi.clearAllMocks(); }); + it("renders a drag handle in the header actions on desktop", () => { + const store = createStore(); + const onClosePane = vi.fn(); + const onSplitPane = vi.fn(); + const onPaneDragStart = vi.fn(); + + mocks.mockUseCodeEditorActions.mockReturnValue(mocks.editorState); + store.set(localeAtom, "en"); + store.set(activeFilePathAtomFamily("ws-123"), "src/app.tsx"); + + render( + + + + ); + + const dragHandle = screen.getByRole("button", { name: "Drag pane" }); + + expect(dragHandle).toBeInTheDocument(); + + fireEvent.pointerDown(dragHandle); + + expect(onPaneDragStart).toHaveBeenCalledWith(expect.objectContaining({ paneId: "pane-1" })); + }); + it("renders editor pane actions and delegates split and close callbacks", () => { const store = createStore(); const onClosePane = vi.fn(); diff --git a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx index f05858ac..30a6c09c 100644 --- a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx +++ b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx @@ -1,5 +1,5 @@ import { useAtomValue } from "jotai"; -import { FlipHorizontal, FlipVertical, X } from "lucide-react"; +import { FlipHorizontal, FlipVertical, GripVertical, X } from "lucide-react"; import type { FC } from "react"; import { useState } from "react"; import { ConfirmDialog, IconButton, Tooltip } from "../../../../components/ui"; @@ -11,6 +11,9 @@ import { } from "../../../code-editor/views/shared/code-editor-host"; import { PanelHeader } from "../../../shared/components/panel-header"; import { activeFilePathAtomFamily, openFilesAtomFamily } from "../../../workspace/atoms"; +import type { PaneDropPlacement } from "../../actions/pane-drag-types"; +import type { PaneDragSourceSnapshot } from "../../actions/use-pane-drag-controller"; +import { usePaneDragEnabled } from "../../actions/use-pane-drag-enabled"; function getEditorPaneTitle(path: string | null): string { if (!path) { @@ -22,16 +25,24 @@ function getEditorPaneTitle(path: string | null): string { } interface EditorPaneCardProps { + dragState?: { + isDragging: boolean; + isActiveDropTarget: boolean; + hoverPlacement: PaneDropPlacement | null; + }; paneId: string; workspaceId: string; onClosePane: (paneId: string) => void; + onPaneDragStart?: (source: PaneDragSourceSnapshot) => void; onSplitPane: (paneId: string, direction: "horizontal" | "vertical") => void; } export const EditorPaneCard: FC = ({ + dragState, paneId, workspaceId, onClosePane, + onPaneDragStart, onSplitPane, }) => { const t = useTranslation(); @@ -39,9 +50,12 @@ export const EditorPaneCard: FC = ({ const activeFilePath = useAtomValue(activeFilePathAtomFamily(workspaceId)); const openFiles = useAtomValue(openFilesAtomFamily(workspaceId)); const editorState = useCodeEditorActions(); + const supportsPaneDrag = usePaneDragEnabled(); + const canDragPane = supportsPaneDrag && Boolean(onPaneDragStart); const title = getEditorPaneTitle(activeFilePath); const activeOpenFile = activeFilePath ? openFiles[activeFilePath] : undefined; const isDirtyTextFile = activeOpenFile?.kind === "text" && activeOpenFile.isDirty === true; + const dragOverlayPlacement = dragState?.isActiveDropTarget ? dragState.hoverPlacement : null; const dirtyIndicator = isDirtyTextFile ? ( = ({ return (
+ {dragOverlayPlacement ? ( +
+ {dragOverlayPlacement === "center" ? ( +
Swap
+ ) : null} +
+ ) : null} + + {canDragPane ? ( + + } + onPointerDown={(event) => { + event.preventDefault(); + event.stopPropagation(); + + if (event.pointerType === "touch") { + return; + } + + onPaneDragStart?.({ paneId }); + }} + size="sm" + /> + + ) : null} Date: Sun, 31 May 2026 00:11:12 +0800 Subject: [PATCH 157/162] fix: restore semantic syntax highlighting --- packages/core/src/domain/lsp.test.ts | 7 + packages/core/src/domain/lsp.ts | 45 ++++ .../src/__tests__/fixtures/fake-lsp-server.js | 28 +- .../server/src/__tests__/lsp-commands.test.ts | 29 ++ packages/server/src/commands/lsp.ts | 9 + packages/server/src/lsp/manager.ts | 10 + packages/server/src/lsp/session.test.ts | 116 ++++---- packages/server/src/lsp/session.ts | 253 +++++++++++++++--- .../components/monaco-diff-host.test.tsx | 58 +++- .../components/monaco-diff-host.tsx | 13 +- .../components/monaco-host.test.tsx | 1 + .../code-editor/components/monaco-host.tsx | 1 + .../features/code-editor/lsp/bridge.test.tsx | 1 + .../src/features/code-editor/lsp/bridge.ts | 23 +- .../code-editor/lsp/providers.test.ts | 134 ++++++++++ .../src/features/code-editor/lsp/providers.ts | 60 ++++- .../monaco/language-tokenization.test.ts | 45 ++++ 17 files changed, 728 insertions(+), 105 deletions(-) create mode 100644 packages/web/src/features/code-editor/monaco/language-tokenization.test.ts diff --git a/packages/core/src/domain/lsp.test.ts b/packages/core/src/domain/lsp.test.ts index 2081e31e..a10fd075 100644 --- a/packages/core/src/domain/lsp.test.ts +++ b/packages/core/src/domain/lsp.test.ts @@ -8,6 +8,7 @@ import type { LspHoverResult, LspLocation, LspRuntimeMode, + LspSemanticTokens, LspSessionSummary, LspToolInstallFailure, LspToolInstallJobSnapshot, @@ -83,6 +84,7 @@ describe("LSP shared surface", () => { references: boolean; hover: boolean; documentSymbols: boolean; + semanticTokens: boolean; diagnostics: boolean; }; }>(); @@ -189,6 +191,11 @@ describe("LSP shared surface", () => { version?: number; }>(); + expectTypeOf().toEqualTypeOf<{ + resultId?: string; + data: number[]; + }>(); + type LspDiagnosticsUpdatedEvent = Extract; expectTypeOf().toMatchTypeOf<{ type: "lsp.diagnostics.updated"; diff --git a/packages/core/src/domain/lsp.ts b/packages/core/src/domain/lsp.ts index b9682268..2ec1fa28 100644 --- a/packages/core/src/domain/lsp.ts +++ b/packages/core/src/domain/lsp.ts @@ -2,6 +2,45 @@ export type LspServerKind = "typescript" | "python" | "go" | "rust" | "vue"; export type LspToolSource = "override" | "managed" | "bundled" | "system"; export type LspRuntimeMode = "auto" | "off"; +export const LSP_SEMANTIC_TOKEN_TYPES = [ + "namespace", + "type", + "class", + "enum", + "interface", + "struct", + "typeParameter", + "parameter", + "variable", + "property", + "enumMember", + "event", + "function", + "method", + "macro", + "keyword", + "modifier", + "comment", + "string", + "number", + "regexp", + "operator", + "decorator", +] as const; + +export const LSP_SEMANTIC_TOKEN_MODIFIERS = [ + "declaration", + "definition", + "readonly", + "static", + "deprecated", + "abstract", + "async", + "modification", + "documentation", + "defaultLibrary", +] as const; + export interface LspRange { startLine: number; startColumn: number; @@ -36,6 +75,11 @@ export interface LspDocumentSymbol { children?: LspDocumentSymbol[]; } +export interface LspSemanticTokens { + resultId?: string; + data: number[]; +} + export interface LspSessionSummary { workspaceId: string; serverKind: LspServerKind; @@ -47,6 +91,7 @@ export interface LspSessionSummary { references: boolean; hover: boolean; documentSymbols: boolean; + semanticTokens: boolean; diagnostics: boolean; }; } diff --git a/packages/server/src/__tests__/fixtures/fake-lsp-server.js b/packages/server/src/__tests__/fixtures/fake-lsp-server.js index 39b3cd85..78045aff 100644 --- a/packages/server/src/__tests__/fixtures/fake-lsp-server.js +++ b/packages/server/src/__tests__/fixtures/fake-lsp-server.js @@ -14,7 +14,12 @@ const connection = createMessageConnection( ); const docs = new Map(); -const exitAfterInitMs = Number(process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS ?? "0"); +const exitAfterInitArg = process.argv.find((arg) => arg.startsWith("--exit-after-init-ms=")); +const exitAfterInitMs = Number( + exitAfterInitArg?.slice("--exit-after-init-ms=".length) ?? + process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS ?? + "0" +); const hoverDelayMs = Number(process.env.CODER_STUDIO_FAKE_LSP_HOVER_DELAY_MS ?? "0"); const initDelayMs = Number(process.env.CODER_STUDIO_FAKE_LSP_INIT_DELAY_MS ?? "0"); const stderrOnInit = process.env.CODER_STUDIO_FAKE_LSP_STDERR_ON_INIT ?? ""; @@ -44,6 +49,13 @@ connection.onRequest("initialize", async () => { referencesProvider: true, hoverProvider: true, documentSymbolProvider: true, + semanticTokensProvider: { + legend: { + tokenTypes: ["function", "variable", "class", "typeAlias", "builtinType"], + tokenModifiers: ["declaration", "readonly"], + }, + full: true, + }, textDocumentSync: 1, }, }; @@ -221,6 +233,20 @@ connection.onRequest("textDocument/documentSymbol", ({ textDocument }) => { ]; }); +connection.onRequest("textDocument/semanticTokens/full", ({ textDocument }) => { + if (!textDocument.uri.endsWith("/shared.ts")) { + return { data: [] }; + } + + return { + resultId: "semantic-1", + data: [ + // sharedValue: variable + declaration + 0, 13, 11, 1, 1, + ], + }; +}); + function publishDiagnostics(uri) { const text = docs.get(uri) ?? readFileSync(new URL(uri), "utf8"); const diagnostics = text.includes("missingSymbol") diff --git a/packages/server/src/__tests__/lsp-commands.test.ts b/packages/server/src/__tests__/lsp-commands.test.ts index cc1f0cb5..93e2afd7 100644 --- a/packages/server/src/__tests__/lsp-commands.test.ts +++ b/packages/server/src/__tests__/lsp-commands.test.ts @@ -38,6 +38,7 @@ class FakeLspManager { references: true, hover: true, documentSymbols: true, + semanticTokens: true, diagnostics: true, }, }, @@ -79,6 +80,13 @@ class FakeLspManager { async documentSymbols() { return []; } + + async semanticTokens() { + return { + resultId: "semantic-1", + data: [0, 13, 11, 8, 1], + }; + } } class FakeLspToolInstallManager { @@ -206,6 +214,27 @@ describe("LSP commands", () => { expect.objectContaining({ path: "e2e/fixtures/lsp-workspace/shared.ts" }), ]) ); + + const semanticTokens = await dispatch( + { + kind: "command", + id: crypto.randomUUID(), + op: "lsp.semanticTokens", + args: { + workspaceId, + path: "e2e/fixtures/lsp-workspace/shared.ts", + }, + }, + ctx + ); + + expect(semanticTokens.ok).toBe(true); + expect(semanticTokens.data).toEqual( + expect.objectContaining({ + resultId: "semantic-1", + data: [0, 13, 11, 8, 1], + }) + ); }); it("exposes lsp runtime status and install commands", async () => { diff --git a/packages/server/src/commands/lsp.ts b/packages/server/src/commands/lsp.ts index 3cab39df..c6184c15 100644 --- a/packages/server/src/commands/lsp.ts +++ b/packages/server/src/commands/lsp.ts @@ -197,3 +197,12 @@ registerCommand( }), async (args, ctx) => ctx.lspMgr.documentSymbols(args) ); + +registerCommand( + "lsp.semanticTokens", + z.object({ + workspaceId: z.string(), + path: z.string(), + }), + async (args, ctx) => ctx.lspMgr.semanticTokens(args) +); diff --git a/packages/server/src/lsp/manager.ts b/packages/server/src/lsp/manager.ts index e5e09814..17931036 100644 --- a/packages/server/src/lsp/manager.ts +++ b/packages/server/src/lsp/manager.ts @@ -5,6 +5,7 @@ import type { LspHoverResult, LspLocation, LspRuntimeMode, + LspSemanticTokens, LspSessionSummary, Workspace, } from "@coder-studio/core"; @@ -37,6 +38,7 @@ interface LspSessionLike { references(input: { path: string; line: number; column: number }): Promise; hover(input: { path: string; line: number; column: number }): Promise; documentSymbols(input: { path: string }): Promise; + semanticTokens(input: { path: string }): Promise; } interface ManagedSessionEntry { @@ -340,6 +342,14 @@ export class LspManager { return session ? await session.documentSymbols(input) : null; } + async semanticTokens(input: { workspaceId: string; path: string }) { + if (this.runtimeMode === "off") { + return null; + } + const session = await this.getSessionForPath(input.workspaceId, input.path); + return session ? await session.semanticTokens(input) : null; + } + async disposeWorkspace(workspaceId: string): Promise { const keys = Array.from(this.sessions.keys()).filter((key) => key.startsWith(`${workspaceId}::`) diff --git a/packages/server/src/lsp/session.test.ts b/packages/server/src/lsp/session.test.ts index 3c573d3d..2986a747 100644 --- a/packages/server/src/lsp/session.test.ts +++ b/packages/server/src/lsp/session.test.ts @@ -1,4 +1,5 @@ import { join } from "node:path"; +import { LSP_SEMANTIC_TOKEN_MODIFIERS, LSP_SEMANTIC_TOKEN_TYPES } from "@coder-studio/core"; import { describe, expect, it, vi } from "vitest"; import { LspSession } from "./session.js"; @@ -53,7 +54,8 @@ describe.sequential("LspSession", () => { }, }); - await session.start(); + const summary = await session.start(); + expect(summary.capabilities.semanticTokens).toBe(true); await session.openDocument({ path: "e2e/fixtures/lsp-workspace/broken.ts", languageId: "typescript", @@ -102,6 +104,21 @@ describe.sequential("LspSession", () => { expect(symbols?.[0]?.name).toBe("sharedValue"); + const semanticTokens = await session.semanticTokens({ + path: "e2e/fixtures/lsp-workspace/shared.ts", + }); + + expect(semanticTokens).toEqual({ + resultId: "semantic-1", + data: [ + 0, + 13, + 11, + LSP_SEMANTIC_TOKEN_TYPES.indexOf("variable"), + 1 << LSP_SEMANTIC_TOKEN_MODIFIERS.indexOf("declaration"), + ], + }); + expect(diagnostics).toHaveBeenCalledWith( expect.objectContaining({ workspaceId: "ws-1", @@ -493,66 +510,55 @@ describe.sequential("LspSession", () => { it("kills the companion process when the primary exits", async () => { // If Volar crashes we must not leave the TypeScript companion alive // (otherwise idle-TTL cleanup leaks a process per session). - const previous = process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS; - process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS = "150"; - - try { - const session = new LspSession({ - workspaceId: "ws-1", - workspacePath: process.cwd(), - spec: { - serverKind: "vue", - // Primary exits 150ms after initialize. + const session = new LspSession({ + workspaceId: "ws-1", + workspacePath: process.cwd(), + spec: { + serverKind: "vue", + // Primary exits 150ms after initialize. + command: "node", + args: [FAKE_LSP, "--exit-after-init-ms=150"], + rootPath: process.cwd(), + companion: { + // Companion stays alive normally. command: "node", args: [FAKE_LSP], - rootPath: process.cwd(), - companion: { - // Companion stays alive normally. - command: "node", - args: [FAKE_LSP], - }, - bridges: { tsserverRequest: true }, - }, - onDiagnostics: vi.fn(), - requestTimeoutMs: 2000, - logger: { - info: vi.fn(), - warn: vi.fn(), - error: vi.fn(), }, - }); + bridges: { tsserverRequest: true }, + }, + onDiagnostics: vi.fn(), + requestTimeoutMs: 2000, + logger: { + info: vi.fn(), + warn: vi.fn(), + error: vi.fn(), + }, + }); - // Pull the companion field via a typed accessor for inspection. - type WithCompanion = LspSession & { - companion: null | { child: { killed: boolean } }; - }; + // Pull the companion field via a typed accessor for inspection. + type WithCompanion = LspSession & { + companion: null | { child: { killed: boolean } }; + }; - await session.start(); - // Companion was spawned alongside primary. - expect((session as WithCompanion).companion).not.toBeNull(); - const companionChild = (session as WithCompanion).companion?.child; - expect(companionChild).toBeDefined(); - - // Wait long enough for the primary to exit and the termination handler - // to fire. - await vi.waitFor( - () => { - expect((session as WithCompanion).companion).toBeNull(); - }, - { timeout: 2000 } - ); - // The companion's process should have received SIGTERM. - expect(companionChild?.killed).toBe(true); - expect(session.getSummary().status).toBe("stopped"); + await session.start(); + // Companion was spawned alongside primary. + expect((session as WithCompanion).companion).not.toBeNull(); + const companionChild = (session as WithCompanion).companion?.child; + expect(companionChild).toBeDefined(); - await session.stop(); - } finally { - if (previous === undefined) { - delete process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS; - } else { - process.env.CODER_STUDIO_FAKE_LSP_EXIT_AFTER_INIT_MS = previous; - } - } + // Wait long enough for the primary to exit and the termination handler + // to fire. + await vi.waitFor( + () => { + expect((session as WithCompanion).companion).toBeNull(); + }, + { timeout: 2000 } + ); + // The companion's process should have received SIGTERM. + expect(companionChild?.killed).toBe(true); + expect(session.getSummary().status).toBe("stopped"); + + await session.stop(); }); it("stops the companion when the session is explicitly stopped", async () => { diff --git a/packages/server/src/lsp/session.ts b/packages/server/src/lsp/session.ts index 55028f17..08d49327 100644 --- a/packages/server/src/lsp/session.ts +++ b/packages/server/src/lsp/session.ts @@ -1,15 +1,17 @@ import { type ChildProcess, spawn } from "node:child_process"; import { createRequire } from "node:module"; import { pathToFileURL } from "node:url"; -import type { - LspDiagnostic, - LspDiagnosticsEvent, - LspDocumentSymbol, - LspHoverResult, - LspLocation, - LspRange, - LspServerKind, - LspSessionSummary, +import { + LSP_SEMANTIC_TOKEN_MODIFIERS, + LSP_SEMANTIC_TOKEN_TYPES, + type LspDiagnostic, + type LspDiagnosticsEvent, + type LspDocumentSymbol, + type LspHoverResult, + type LspLocation, + type LspRange, + type LspSemanticTokens, + type LspSessionSummary, } from "@coder-studio/core"; import { shouldUseShellForCommand } from "@coder-studio/utils"; import { type MessageConnection, NotificationType, RequestType } from "vscode-jsonrpc"; @@ -37,8 +39,65 @@ const HoverRequest = new RequestType("textDocumen const DocumentSymbolsRequest = new RequestType( "textDocument/documentSymbol" ); +const SemanticTokensRequest = new RequestType( + "textDocument/semanticTokens/full" +); const LSP_REQUEST_TIMEOUT_MESSAGE = "LSP request timed out"; +const LSP_CLIENT_CAPABILITIES = { + textDocument: { + semanticTokens: { + dynamicRegistration: false, + requests: { + range: false, + full: true, + }, + tokenTypes: LSP_SEMANTIC_TOKEN_TYPES, + tokenModifiers: LSP_SEMANTIC_TOKEN_MODIFIERS, + formats: ["relative"], + overlappingTokenSupport: false, + multilineTokenSupport: true, + serverCancelSupport: false, + augmentsSyntaxTokens: true, + }, + }, +}; + +const SEMANTIC_TOKEN_TYPE_INDEX = new Map( + LSP_SEMANTIC_TOKEN_TYPES.map((type, index) => [type, index] as [string, number]) +); +const SEMANTIC_TOKEN_MODIFIER_INDEX = new Map( + LSP_SEMANTIC_TOKEN_MODIFIERS.map((modifier, index) => [modifier, index] as [string, number]) +); +const SEMANTIC_TOKEN_TYPE_ALIASES: Record = { + namespace: "variable", + class: "type", + enum: "type", + interface: "type", + struct: "type", + typeParameter: "type", + typeAlias: "type", + builtinType: "type", + generic: "type", + lifetime: "type", + parameter: "variable", + property: "variable", + enumMember: "variable", + event: "variable", + function: "variable", + method: "variable", + macro: "variable", + decorator: "variable", + attribute: "variable", + label: "variable", + unresolvedReference: "variable", + selfKeyword: "keyword", + builtinAttribute: "keyword", + boolean: "number", + escapeSequence: "string", + formatSpecifier: "string", +}; + interface SessionDeps { workspaceId: string; workspacePath: string; @@ -118,6 +177,24 @@ interface SymbolInformationLike { location: LocationLike; } +interface SemanticTokensLegendLike { + tokenTypes: string[]; + tokenModifiers: string[]; +} + +interface SemanticTokensProviderLike { + legend?: { + tokenTypes?: unknown; + tokenModifiers?: unknown; + }; + full?: boolean | Record; +} + +interface SemanticTokensLike { + resultId?: string; + data?: unknown; +} + interface RangeLike { start: { line: number; character: number }; end: { line: number; character: number }; @@ -137,6 +214,7 @@ export class LspSession { private bridgeHandle: BridgeHandle | null = null; private startPromise: Promise | null = null; private summary: LspSessionSummary; + private semanticTokensLegend: SemanticTokensLegendLike | null = null; constructor(private readonly deps: SessionDeps) { this.documents = new DocumentStore(deps.workspacePath); @@ -151,6 +229,7 @@ export class LspSession { references: false, hover: false, documentSymbols: false, + semanticTokens: false, diagnostics: true, }, }; @@ -262,7 +341,7 @@ export class LspSession { this.connection.sendRequest("initialize", { processId: process.pid, rootUri: pathToFileURL(this.deps.spec.rootPath).toString(), - capabilities: {}, + capabilities: LSP_CLIENT_CAPABILITIES, initializationOptions: this.deps.spec.initializationOptions, }), initTimeoutMs @@ -272,7 +351,7 @@ export class LspSession { companion.connection.sendRequest("initialize", { processId: process.pid, rootUri: pathToFileURL(this.deps.spec.rootPath).toString(), - capabilities: {}, + capabilities: LSP_CLIENT_CAPABILITIES, initializationOptions: this.deps.spec.companion?.initializationOptions, }), initTimeoutMs @@ -300,34 +379,22 @@ export class LspSession { } } + const capabilities = + (initializeResult as { capabilities?: Record }).capabilities ?? {}; + const semanticTokensLegend = toSemanticTokensLegend(capabilities.semanticTokensProvider); + this.semanticTokensLegend = semanticTokensLegend; + this.summary = { ...this.summary, status: "ready", capabilities: { - definition: Boolean( - (initializeResult as { capabilities?: Record }).capabilities - ?.definitionProvider - ), - declaration: Boolean( - (initializeResult as { capabilities?: Record }).capabilities - ?.declarationProvider - ), - typeDefinition: Boolean( - (initializeResult as { capabilities?: Record }).capabilities - ?.typeDefinitionProvider - ), - references: Boolean( - (initializeResult as { capabilities?: Record }).capabilities - ?.referencesProvider - ), - hover: Boolean( - (initializeResult as { capabilities?: Record }).capabilities - ?.hoverProvider - ), - documentSymbols: Boolean( - (initializeResult as { capabilities?: Record }).capabilities - ?.documentSymbolProvider - ), + definition: Boolean(capabilities.definitionProvider), + declaration: Boolean(capabilities.declarationProvider), + typeDefinition: Boolean(capabilities.typeDefinitionProvider), + references: Boolean(capabilities.referencesProvider), + hover: Boolean(capabilities.hoverProvider), + documentSymbols: Boolean(capabilities.documentSymbolProvider), + semanticTokens: Boolean(semanticTokensLegend), diagnostics: true, }, }; @@ -547,6 +614,32 @@ export class LspSession { } } + async semanticTokens(input: { path: string }): Promise { + const doc = this.documents.get(input.path); + if (!doc) { + return null; + } + + try { + await this.start(); + if (!this.connection || !this.semanticTokensLegend) { + return { data: [] }; + } + + const result = await this.withTimeout( + this.connection.sendRequest(SemanticTokensRequest, { + textDocument: { uri: doc.uri }, + }) + ); + + return normalizeSemanticTokens(result, this.semanticTokensLegend); + } catch (error) { + this.recoverFromRequestFailure(error); + this.deps.logger.warn({ error }, "lsp semantic tokens request failed"); + return { data: [] }; + } + } + async stop(): Promise { const child = this.child; const companionChild = this.companion?.child ?? null; @@ -748,6 +841,7 @@ export class LspSession { this.bridgeHandle = null; this.connection = null; this.child = null; + this.semanticTokensLegend = null; const companion = this.companion; this.companion = null; companion?.child.kill("SIGTERM"); @@ -893,6 +987,95 @@ function toSharedSymbolEntry(input: unknown): LspDocumentSymbol | null { return null; } +function toSemanticTokensLegend(input: unknown): SemanticTokensLegendLike | null { + if (typeof input !== "object" || input === null) { + return null; + } + + const provider = input as SemanticTokensProviderLike; + if (!supportsFullSemanticTokens(provider.full)) { + return null; + } + + const tokenTypes = Array.isArray(provider.legend?.tokenTypes) + ? provider.legend.tokenTypes.filter((value): value is string => typeof value === "string") + : []; + if (tokenTypes.length === 0) { + return null; + } + + const tokenModifiers = Array.isArray(provider.legend?.tokenModifiers) + ? provider.legend.tokenModifiers.filter((value): value is string => typeof value === "string") + : []; + + return { tokenTypes, tokenModifiers }; +} + +function supportsFullSemanticTokens(value: unknown): boolean { + return value === true || (typeof value === "object" && value !== null); +} + +function normalizeSemanticTokens( + input: unknown, + legend: SemanticTokensLegendLike +): LspSemanticTokens { + if (typeof input !== "object" || input === null) { + return { data: [] }; + } + + const result = input as SemanticTokensLike; + const rawData = + Array.isArray(result.data) || result.data instanceof Uint32Array ? result.data : []; + const data: number[] = []; + + for (let index = 0; index + 4 < rawData.length; index += 5) { + const deltaLine = toNonNegativeInteger(rawData[index]) ?? 0; + const deltaStart = toNonNegativeInteger(rawData[index + 1]) ?? 0; + const length = toNonNegativeInteger(rawData[index + 2]) ?? 0; + const sourceTokenType = legend.tokenTypes[toNonNegativeInteger(rawData[index + 3]) ?? -1]; + const tokenType = toCanonicalSemanticTokenType(sourceTokenType); + const tokenModifiers = toCanonicalSemanticTokenModifiers( + toNonNegativeInteger(rawData[index + 4]) ?? 0, + legend + ); + + data.push(deltaLine, deltaStart, length, tokenType, tokenModifiers); + } + + return typeof result.resultId === "string" ? { resultId: result.resultId, data } : { data }; +} + +function toCanonicalSemanticTokenType(sourceType: string | undefined): number { + const targetType = sourceType + ? (SEMANTIC_TOKEN_TYPE_ALIASES[sourceType] ?? sourceType) + : "variable"; + return SEMANTIC_TOKEN_TYPE_INDEX.get(targetType) ?? SEMANTIC_TOKEN_TYPE_INDEX.get("variable")!; +} + +function toCanonicalSemanticTokenModifiers( + sourceBitset: number, + legend: SemanticTokensLegendLike +): number { + let bitset = 0; + + for (let index = 0; index < legend.tokenModifiers.length; index += 1) { + if (Math.floor(sourceBitset / 2 ** index) % 2 !== 1) { + continue; + } + + const targetIndex = SEMANTIC_TOKEN_MODIFIER_INDEX.get(legend.tokenModifiers[index]!); + if (targetIndex !== undefined) { + bitset += 2 ** targetIndex; + } + } + + return bitset; +} + +function toNonNegativeInteger(input: unknown): number | null { + return typeof input === "number" && Number.isInteger(input) && input >= 0 ? input : null; +} + function isRangeLike(input: unknown): input is RangeLike { return typeof input === "object" && input !== null && "start" in input && "end" in input; } diff --git a/packages/web/src/features/code-editor/components/monaco-diff-host.test.tsx b/packages/web/src/features/code-editor/components/monaco-diff-host.test.tsx index c5802e34..fe9bb564 100644 --- a/packages/web/src/features/code-editor/components/monaco-diff-host.test.tsx +++ b/packages/web/src/features/code-editor/components/monaco-diff-host.test.tsx @@ -1,12 +1,16 @@ import { render, screen } from "@testing-library/react"; import { createStore, Provider } from "jotai"; -import { describe, expect, it, vi } from "vitest"; +import { beforeEach, describe, expect, it, vi } from "vitest"; import { getThemeById } from "../../../theme"; import { MonacoDiffHost } from "./monaco-diff-host"; const { mockCreateDiffEditor, + mockRegisterLanguage, + mockSetLanguageConfiguration, + mockSetMonarchTokensProvider, mockDefineTheme, + mockCreateModel, mockSetModel, mockOriginalModel, mockModifiedModel, @@ -23,6 +27,10 @@ const { setValue: vi.fn(), }; const mockSetModel = vi.fn(); + const mockCreateModel = vi + .fn() + .mockImplementationOnce(() => mockOriginalModel) + .mockImplementationOnce(() => mockModifiedModel); return { mockCreateDiffEditor: vi.fn(() => ({ dispose: vi.fn(), @@ -30,21 +38,33 @@ const { setModel: mockSetModel, updateOptions: vi.fn(), })), + mockCreateModel, mockDefineTheme: vi.fn(), mockSetModel, mockOriginalModel, mockModifiedModel, + mockRegisterLanguage: vi.fn(), + mockSetLanguageConfiguration: vi.fn(), + mockSetMonarchTokensProvider: vi.fn(), mockSetTheme: vi.fn(), }; }); vi.mock("monaco-editor", () => ({ + languages: { + register: mockRegisterLanguage, + setLanguageConfiguration: mockSetLanguageConfiguration, + setMonarchTokensProvider: mockSetMonarchTokensProvider, + IndentAction: { + None: 0, + Indent: 1, + IndentOutdent: 2, + Outdent: 3, + }, + }, editor: { createDiffEditor: mockCreateDiffEditor, - createModel: vi - .fn() - .mockImplementationOnce(() => mockOriginalModel) - .mockImplementationOnce(() => mockModifiedModel), + createModel: mockCreateModel, defineTheme: mockDefineTheme, setTheme: mockSetTheme, }, @@ -67,6 +87,19 @@ vi.mock("monaco-editor/esm/vs/language/typescript/ts.worker?worker", () => ({ })); describe("MonacoDiffHost", () => { + beforeEach(() => { + mockCreateDiffEditor.mockClear(); + mockDefineTheme.mockClear(); + mockSetModel.mockClear(); + mockSetTheme.mockClear(); + mockOriginalModel.dispose.mockClear(); + mockModifiedModel.dispose.mockClear(); + mockCreateModel + .mockReset() + .mockImplementationOnce(() => mockOriginalModel) + .mockImplementationOnce(() => mockModifiedModel); + }); + it("creates a Monaco diff editor with original and modified models", () => { render( @@ -95,4 +128,19 @@ describe("MonacoDiffHost", () => { }); expect(screen.getByTestId("monaco-diff-host")).toBeInTheDocument(); }); + + it("creates vue diff models with the vue language id", () => { + render( + + + + ); + + expect(mockCreateModel).toHaveBeenNthCalledWith(1, expect.stringContaining("before"), "vue"); + expect(mockCreateModel).toHaveBeenNthCalledWith(2, expect.stringContaining("after"), "vue"); + }); }); diff --git a/packages/web/src/features/code-editor/components/monaco-diff-host.tsx b/packages/web/src/features/code-editor/components/monaco-diff-host.tsx index 6b791d8e..2e402cdb 100644 --- a/packages/web/src/features/code-editor/components/monaco-diff-host.tsx +++ b/packages/web/src/features/code-editor/components/monaco-diff-host.tsx @@ -9,6 +9,7 @@ import type { FC } from "react"; import { useEffect, useRef } from "react"; import { themeAtom } from "../../../atoms/app-ui"; import { createWorkspaceMonacoTheme, getThemeById } from "../../../theme"; +import { ensureVueLanguageRegistered } from "../monaco/vue-language"; const monacoGlobal = globalThis as typeof globalThis & { MonacoEnvironment?: monaco.Environment; @@ -24,6 +25,8 @@ monacoGlobal.MonacoEnvironment ??= { }, }; +ensureVueLanguageRegistered(); + interface MonacoDiffHostProps { originalContent: string; modifiedContent: string; @@ -58,7 +61,7 @@ export const MonacoDiffHost: FC = ({ return; } - editorRef.current = monaco.editor.createDiffEditor(containerRef.current, { + const options = { automaticLayout: true, fontFamily: "JetBrains Mono, monospace", fontSize: 13, @@ -67,8 +70,13 @@ export const MonacoDiffHost: FC = ({ readOnly, renderSideBySide: false, scrollBeyondLastLine: false, + "semanticHighlighting.enabled": true, theme: editorTheme, - }); + } satisfies monaco.editor.IStandaloneDiffEditorConstructionOptions & { + "semanticHighlighting.enabled": boolean; + }; + + editorRef.current = monaco.editor.createDiffEditor(containerRef.current, options); return () => { editorRef.current?.dispose(); @@ -127,6 +135,7 @@ function detectEditorLanguage(filePath: string): string { py: "python", go: "go", rs: "rust", + vue: "vue", java: "java", cpp: "cpp", c: "c", diff --git a/packages/web/src/features/code-editor/components/monaco-host.test.tsx b/packages/web/src/features/code-editor/components/monaco-host.test.tsx index cb717517..55cea34e 100644 --- a/packages/web/src/features/code-editor/components/monaco-host.test.tsx +++ b/packages/web/src/features/code-editor/components/monaco-host.test.tsx @@ -374,6 +374,7 @@ describe("MonacoHost", () => { expect.any(HTMLDivElement), expect.objectContaining({ readOnly: false, + "semanticHighlighting.enabled": true, theme: "coder-studio-workspace-mint-light", }) ); diff --git a/packages/web/src/features/code-editor/components/monaco-host.tsx b/packages/web/src/features/code-editor/components/monaco-host.tsx index f1505c64..26731f60 100644 --- a/packages/web/src/features/code-editor/components/monaco-host.tsx +++ b/packages/web/src/features/code-editor/components/monaco-host.tsx @@ -186,6 +186,7 @@ export const MonacoHost: FC = ({ minimap: { enabled: false }, readOnly, scrollBeyondLastLine: false, + "semanticHighlighting.enabled": true, padding: { top: 12, bottom: 12 }, automaticLayout: true, }); diff --git a/packages/web/src/features/code-editor/lsp/bridge.test.tsx b/packages/web/src/features/code-editor/lsp/bridge.test.tsx index 61ca9958..403766c3 100644 --- a/packages/web/src/features/code-editor/lsp/bridge.test.tsx +++ b/packages/web/src/features/code-editor/lsp/bridge.test.tsx @@ -39,6 +39,7 @@ vi.mock("monaco-editor", () => ({ registerHoverProvider: vi.fn(), registerReferenceProvider: vi.fn(), registerDocumentSymbolProvider: vi.fn(), + registerDocumentSemanticTokensProvider: vi.fn(), SymbolKind: { Variable: 13, }, diff --git a/packages/web/src/features/code-editor/lsp/bridge.ts b/packages/web/src/features/code-editor/lsp/bridge.ts index 44a41a5e..ff150831 100644 --- a/packages/web/src/features/code-editor/lsp/bridge.ts +++ b/packages/web/src/features/code-editor/lsp/bridge.ts @@ -4,6 +4,7 @@ import type { LspEnsureSessionResult, LspHoverResult, LspLocation, + LspSemanticTokens, LspToolInstallJobSnapshot, } from "@coder-studio/core"; import { Topics } from "@coder-studio/core"; @@ -49,15 +50,19 @@ const noopTransport: LspBridgeTransport = { subscribe: () => () => {}, }; -type MissingOrFailedReadiness = Exclude< +type InstallableReadiness = Extract< LspEnsureSessionResult, - { kind: "ready" | "unsupported_language" } + { kind: "tool_missing" | "installing" | "failed" } >; -function isMissingOrFailedReadiness( +function isInstallableReadiness( readiness: LspEnsureSessionResult -): readiness is MissingOrFailedReadiness { - return readiness.kind !== "ready" && readiness.kind !== "unsupported_language"; +): readiness is InstallableReadiness { + return ( + readiness.kind === "tool_missing" || + readiness.kind === "installing" || + readiness.kind === "failed" + ); } export function createLspBridge(initialTransport: Partial = {}) { @@ -123,6 +128,11 @@ export function createLspBridge(initialTransport: Partial = workspaceId: meta.workspaceId, path: meta.path, }), + requestSemanticTokens: async ({ meta }) => + await transport.sendCommand("lsp.semanticTokens", { + workspaceId: meta.workspaceId, + path: meta.path, + }), }); function configure(nextTransport: Partial): void { @@ -173,7 +183,7 @@ export function createLspBridge(initialTransport: Partial = if (readiness.kind !== "ready") { onStateChange?.(readiness); - if (isMissingOrFailedReadiness(readiness) && readiness.installJob) { + if (isInstallableReadiness(readiness) && readiness.installJob) { currentJobId = readiness.installJob.jobId; schedulePoll(); } @@ -360,6 +370,7 @@ export function createLspBridge(initialTransport: Partial = provideHover: providers.provideHover, provideReferences: providers.provideReferences, provideDocumentSymbols: providers.provideDocumentSymbols, + provideDocumentSemanticTokens: providers.provideDocumentSemanticTokens, }; } diff --git a/packages/web/src/features/code-editor/lsp/providers.test.ts b/packages/web/src/features/code-editor/lsp/providers.test.ts index ae45053b..32ef4e61 100644 --- a/packages/web/src/features/code-editor/lsp/providers.test.ts +++ b/packages/web/src/features/code-editor/lsp/providers.test.ts @@ -27,6 +27,7 @@ vi.mock("monaco-editor", () => ({ registerHoverProvider: vi.fn(), registerReferenceProvider: vi.fn(), registerDocumentSymbolProvider: vi.fn(), + registerDocumentSemanticTokensProvider: vi.fn(), registerLinkProvider: vi.fn(), SymbolKind: { Variable: 13, @@ -126,6 +127,7 @@ describe("LSP providers", () => { requestHover: async () => null, requestReferences: async () => [], requestDocumentSymbols: async () => [], + requestSemanticTokens: async () => null, }); registry.register("typescript"); @@ -183,6 +185,138 @@ describe("LSP providers", () => { ); }); + it("registers semantic token providers and converts LSP token data for Monaco", async () => { + const registerDocumentSemanticTokensProvider = vi.mocked( + monaco.languages.registerDocumentSemanticTokensProvider + ); + const requestSemanticTokens = vi.fn(async () => ({ + resultId: "semantic-1", + data: [0, 13, 11, 8, 1], + })); + + const registry = createLspProviderRegistry({ + lookupModelMetadata: () => ({ + workspaceId: "ws-1", + workspaceRootPath: "/repo", + path: "src/main.go", + }), + requestDefinition: async () => [], + requestDeclaration: async () => [], + requestTypeDefinition: async () => [], + requestHover: async () => null, + requestReferences: async () => [], + requestDocumentSymbols: async () => [], + requestSemanticTokens, + }); + + registry.register("go"); + + expect(registerDocumentSemanticTokensProvider).toHaveBeenCalledWith( + "go", + expect.objectContaining({ + getLegend: expect.any(Function), + provideDocumentSemanticTokens: expect.any(Function), + releaseDocumentSemanticTokens: expect.any(Function), + }) + ); + + const provider = + registerDocumentSemanticTokensProvider.mock.calls[ + registerDocumentSemanticTokensProvider.mock.calls.length - 1 + ]![1]; + const model = createMockModel( + "package main\n\nfunc sharedValue() {}\n", + 1, + monaco.Uri.file("/repo/src/main.go") + ); + + expect(provider.getLegend().tokenTypes).toContain("variable"); + + const tokens = await provider.provideDocumentSemanticTokens(model, null, { + isCancellationRequested: false, + } as never); + + expect(requestSemanticTokens).toHaveBeenCalledWith({ + meta: { + workspaceId: "ws-1", + workspaceRootPath: "/repo", + path: "src/main.go", + }, + version: 1, + }); + expect(tokens).toEqual({ + resultId: "semantic-1", + data: new Uint32Array([0, 13, 11, 8, 1]), + }); + }); + + it("wires Monaco semantic token requests through the LSP bridge", async () => { + const registerDocumentSemanticTokensProvider = vi.mocked( + monaco.languages.registerDocumentSemanticTokensProvider + ); + const sendCommand = vi.fn(async (op) => { + if (op === "lsp.ensureSession") { + return { + kind: "ready", + displayName: "Rust language server", + source: "managed", + summary: { + workspaceId: "ws-1", + serverKind: "rust", + status: "ready", + capabilities: { + definition: true, + references: true, + hover: true, + documentSymbols: true, + semanticTokens: true, + diagnostics: true, + }, + }, + }; + } + + if (op === "lsp.semanticTokens") { + return { + resultId: "semantic-rust", + data: [0, 7, 5, 8, 0], + }; + } + + return null; + }) as BridgeSendCommand; + const bridge = createLspBridge({ + sendCommand, + subscribe: vi.fn(() => () => {}), + }); + const model = createMockModel("fn main() {}\n", 1, monaco.Uri.file("/repo/src/main.rs")); + + bridge.attachModel({ + workspaceId: "ws-1", + workspaceRootPath: "/repo", + path: "src/main.rs", + monacoLanguage: "rust", + model, + }); + + const provider = + registerDocumentSemanticTokensProvider.mock.calls[ + registerDocumentSemanticTokensProvider.mock.calls.length - 1 + ]![1]; + const tokens = await provider.provideDocumentSemanticTokens(model, null, { + isCancellationRequested: false, + } as never); + + expect(sendCommand).toHaveBeenCalledWith("lsp.semanticTokens", { + workspaceId: "ws-1", + path: "src/main.rs", + }); + expect(tokens).toEqual({ + resultId: "semantic-rust", + data: new Uint32Array([0, 7, 5, 8, 0]), + }); + }); + it("returns same-file definitions as Monaco locations", async () => { const bridge = createLspBridge({ sendCommand: vi.fn(async (op) => { diff --git a/packages/web/src/features/code-editor/lsp/providers.ts b/packages/web/src/features/code-editor/lsp/providers.ts index 0d4c00f8..ebaf8aae 100644 --- a/packages/web/src/features/code-editor/lsp/providers.ts +++ b/packages/web/src/features/code-editor/lsp/providers.ts @@ -1,7 +1,19 @@ -import type { LspDocumentSymbol, LspHoverResult, LspLocation } from "@coder-studio/core"; +import { + LSP_SEMANTIC_TOKEN_MODIFIERS, + LSP_SEMANTIC_TOKEN_TYPES, + type LspDocumentSymbol, + type LspHoverResult, + type LspLocation, + type LspSemanticTokens, +} from "@coder-studio/core"; import * as monaco from "monaco-editor"; import { toWorkspaceFileUri } from "../monaco/uri"; +const SEMANTIC_TOKENS_LEGEND: monaco.languages.SemanticTokensLegend = { + tokenTypes: [...LSP_SEMANTIC_TOKEN_TYPES], + tokenModifiers: [...LSP_SEMANTIC_TOKEN_MODIFIERS], +}; + export interface LspModelMetadata { workspaceId: string; workspaceRootPath: string; @@ -44,6 +56,10 @@ export interface LspProviderRegistryDeps { meta: LspModelMetadata; version: number; }) => Promise; + requestSemanticTokens: (input: { + meta: LspModelMetadata; + version: number; + }) => Promise; } export function createLspProviderRegistry(deps: LspProviderRegistryDeps) { @@ -74,6 +90,11 @@ export function createLspProviderRegistry(deps: LspProviderRegistryDeps) { monaco.languages.registerDocumentSymbolProvider(languageId, { provideDocumentSymbols, }); + monaco.languages.registerDocumentSemanticTokensProvider(languageId, { + getLegend, + provideDocumentSemanticTokens, + releaseDocumentSemanticTokens, + }); if (supportsImportSpecifierLinks(languageId)) { monaco.languages.registerLinkProvider?.(languageId, { provideLinks, @@ -244,6 +265,42 @@ export function createLspProviderRegistry(deps: LspProviderRegistryDeps) { return result.map(toMonacoSymbol); } + function getLegend(): monaco.languages.SemanticTokensLegend { + return SEMANTIC_TOKENS_LEGEND; + } + + async function provideDocumentSemanticTokens( + model: monaco.editor.ITextModel, + _lastResultId: string | null, + token: monaco.CancellationToken + ): Promise { + if (token.isCancellationRequested) { + return null; + } + + const meta = deps.lookupModelMetadata(model); + if (!meta) { + return null; + } + + const requestVersion = model.getVersionId(); + const result = await deps.requestSemanticTokens({ + meta, + version: requestVersion, + }); + + if (token.isCancellationRequested || !result || model.getVersionId() !== requestVersion) { + return null; + } + + return { + resultId: result.resultId, + data: new Uint32Array(result.data), + }; + } + + function releaseDocumentSemanticTokens(_resultId: string | undefined): void {} + async function provideLinks( model: monaco.editor.ITextModel ): Promise { @@ -306,6 +363,7 @@ export function createLspProviderRegistry(deps: LspProviderRegistryDeps) { provideHover, provideReferences, provideDocumentSymbols, + provideDocumentSemanticTokens, provideLinks, resolveLink, }; diff --git a/packages/web/src/features/code-editor/monaco/language-tokenization.test.ts b/packages/web/src/features/code-editor/monaco/language-tokenization.test.ts new file mode 100644 index 00000000..94ac6aca --- /dev/null +++ b/packages/web/src/features/code-editor/monaco/language-tokenization.test.ts @@ -0,0 +1,45 @@ +import { beforeAll, describe, expect, it } from "vitest"; + +const samples = [ + { languageId: "python", source: "def main():\n return 1\n" }, + { languageId: "go", source: "package main\nfunc main() {}\n" }, + { languageId: "rust", source: "fn main() {\n let value = 1;\n}\n" }, + { + languageId: "vue", + source: '\n', + }, +] as const; + +let monaco: typeof import("monaco-editor"); +let ensureVueLanguageRegistered: typeof import("./vue-language").ensureVueLanguageRegistered; + +describe("Monaco language tokenization", () => { + it.each(samples)("tokenizes $languageId code with non-plaintext tokens", async ({ + languageId, + source, + }) => { + await monaco.editor.colorize(source, languageId, {}); + + const tokens = monaco.editor.tokenize(source, languageId).flat(); + + expect(tokens.some((token) => token.type && token.type !== "source")).toBe(true); + }); +}); + +beforeAll(async () => { + window.matchMedia ??= () => + ({ + matches: false, + media: "", + onchange: null, + addEventListener() {}, + removeEventListener() {}, + addListener() {}, + removeListener() {}, + dispatchEvent: () => false, + }) as MediaQueryList; + + monaco = await import("monaco-editor"); + ({ ensureVueLanguageRegistered } = await import("./vue-language")); + ensureVueLanguageRegistered(); +}); From a23699752d78b7f4eac198997054ad5cf6f192f5 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 31 May 2026 00:14:27 +0800 Subject: [PATCH 158/162] chore: format semantic highlighting tests From d1ef7aa9f2c3eae287d573e9dce2029db1354f0f Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 31 May 2026 21:37:02 +0800 Subject: [PATCH 159/162] style: normalize workspace panel typography --- .../workspace/views/shared/search-panel.tsx | 2 +- packages/web/src/styles/components.css | 14 +++++--- .../web/src/styles/components.theme.test.ts | 33 +++++++++++++++---- 3 files changed, 37 insertions(+), 12 deletions(-) diff --git a/packages/web/src/features/workspace/views/shared/search-panel.tsx b/packages/web/src/features/workspace/views/shared/search-panel.tsx index f048973a..7ba765ab 100644 --- a/packages/web/src/features/workspace/views/shared/search-panel.tsx +++ b/packages/web/src/features/workspace/views/shared/search-panel.tsx @@ -491,7 +491,7 @@ export const SearchPanel: FC = ({ {isExpanded ? : } - {file.name} + {file.name} {renderFilePathMeta(file.path, file.name)}
-
+
{[ - { id: "agent" as const, label: "Agent" }, - { id: "file" as const, label: "File Editor" }, + { id: "agent" as const, label: t("agent_panes.agent_panel") }, + { id: "file" as const, label: t("agent_panes.file_editor") }, ].map((panel) => (
-
- 点击「启动 Agent」，或将文件拖到右侧区域直接打开。 -
+
{t("agent_panes.draft_footer")}
diff --git a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx index 6ebd8516..30d3240d 100644 --- a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx +++ b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.test.tsx @@ -26,20 +26,6 @@ const paneDragEnabledMock = vi.hoisted(() => ({ value: true, })); -vi.mock("../../../../lib/i18n", () => ({ - useTranslation: () => (key: string, params?: Record) => { - const dictionary: Record = { - "action.close": "Close", - "code_editor.unsaved_changes": "Unsaved changes", - "code_editor.close_unsaved_title": "Discard unsaved changes?", - "code_editor.close_unsaved_description": `${params?.name ?? "File"} has unsaved changes.`, - "code_editor.discard_and_close": "Discard and Close", - "common.cancel": "Cancel", - }; - return dictionary[key] ?? key; - }, -})); - vi.mock("../../actions/use-pane-drag-enabled", () => ({ usePaneDragEnabled: () => paneDragEnabledMock.value, })); diff --git a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx index 30a6c09c..4594fa93 100644 --- a/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx +++ b/packages/web/src/features/agent-panes/views/shared/editor-pane-card.tsx @@ -15,9 +15,9 @@ import type { PaneDropPlacement } from "../../actions/pane-drag-types"; import type { PaneDragSourceSnapshot } from "../../actions/use-pane-drag-controller"; import { usePaneDragEnabled } from "../../actions/use-pane-drag-enabled"; -function getEditorPaneTitle(path: string | null): string { +function getEditorPaneTitle(path: string | null, fallbackTitle: string): string { if (!path) { - return "Editor"; + return fallbackTitle; } const segments = path.split("/"); @@ -52,7 +52,7 @@ export const EditorPaneCard: FC = ({ const editorState = useCodeEditorActions(); const supportsPaneDrag = usePaneDragEnabled(); const canDragPane = supportsPaneDrag && Boolean(onPaneDragStart); - const title = getEditorPaneTitle(activeFilePath); + const title = getEditorPaneTitle(activeFilePath, t("agent_panes.file_editor")); const activeOpenFile = activeFilePath ? openFiles[activeFilePath] : undefined; const isDirtyTextFile = activeOpenFile?.kind === "text" && activeOpenFile.isDirty === true; const dragOverlayPlacement = dragState?.isActiveDropTarget ? dragState.hoverPlacement : null; @@ -85,7 +85,7 @@ export const EditorPaneCard: FC = ({ {dragOverlayPlacement ? (
{dragOverlayPlacement === "center" ? ( -
Swap
+
{t("agent_panes.swap")}
) : null}
) : null} @@ -97,10 +97,11 @@ export const EditorPaneCard: FC = ({ actions={ <> {canDragPane ? ( - + } onPointerDown={(event) => { event.preventDefault(); @@ -117,19 +118,21 @@ export const EditorPaneCard: FC = ({ ) : null} - + } onClick={() => onSplitPane(paneId, "horizontal")} size="sm" /> - + } onClick={() => onSplitPane(paneId, "vertical")} size="sm" @@ -139,6 +142,7 @@ export const EditorPaneCard: FC = ({ } onClick={requestClosePane} size="sm" diff --git a/packages/web/src/features/agent-panes/views/shared/session-card.tsx b/packages/web/src/features/agent-panes/views/shared/session-card.tsx index 728808af..c2524216 100644 --- a/packages/web/src/features/agent-panes/views/shared/session-card.tsx +++ b/packages/web/src/features/agent-panes/views/shared/session-card.tsx @@ -15,6 +15,7 @@ import { dispatchCommandAtom } from "../../../../atoms/connection"; import { sessionByIdAtomFamily, sessionsAtom } from "../../../../atoms/sessions"; import { workspaceByIdAtomFamily } from "../../../../atoms/workspaces"; import { IconButton, StatusDot, Tag, Tooltip } from "../../../../components/ui"; +import { useTranslation } from "../../../../lib/i18n"; import { useTerminalThemeBackground } from "../../../../theme"; import { PanelHeader } from "../../../shared/components/panel-header"; import { useSupervisor } from "../../../supervisor/actions/use-supervisor"; @@ -72,6 +73,7 @@ export const SessionCard: FC = ({ onSplitHorizontal, onSplitVertical, }) => { + const t = useTranslation(); const session = useAtomValue(sessionByIdAtomFamily(sessionId)); const dispatch = useAtomValue(dispatchCommandAtom); const setSessions = useSetAtom(sessionsAtom); @@ -113,7 +115,7 @@ export const SessionCard: FC = ({ const sessionTitle = session.title?.trim() || formatSessionLabel(session.id); const providerLabel = formatProviderLabel(session.providerId); - const sessionStateLabel = formatSessionStateLabel(session.state); + const sessionStateLabel = formatSessionStateLabel(session.state, t); const terminalReadOnly = terminalReadOnlyOverride ?? !isSessionInteractive(session.state); const isActiveSession = workspace?.uiState.activeSessionId === session.id; const isRunning = session.state === "running"; @@ -187,7 +189,7 @@ export const SessionCard: FC = ({ {dragOverlayPlacement ? (
{dragOverlayPlacement === "center" ? ( -
Swap
+
{t("agent_panes.swap")}
) : null}
) : null} @@ -227,10 +229,11 @@ export const SessionCard: FC = ({ {showHeaderActions ? (
{supportsPaneDrag ? ( - + } onPointerDown={(event) => { event.preventDefault(); @@ -255,28 +258,31 @@ export const SessionCard: FC = ({ /> ) : null} - + } onClick={() => onSplitHorizontal?.()} size="sm" /> - + } onClick={() => onSplitVertical?.()} size="sm" /> - + } onClick={() => void onClose?.()} size="sm" @@ -377,8 +383,15 @@ function formatSessionLabel(sessionId: string) { return sessionId.replace(/[_-]/g, " ").toUpperCase(); } -function formatSessionStateLabel(state: SessionState) { - return state.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()); +function formatSessionStateLabel( + state: SessionState, + t: (key: string, params?: Record) => string +) { + const key = `session.state.${state}`; + const translated = t(key); + return translated === key + ? state.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()) + : translated; } function formatProviderLabel(providerId: string) { diff --git a/packages/web/src/features/agent-providers/actions/use-agent-providers.ts b/packages/web/src/features/agent-providers/actions/use-agent-providers.ts index a4a24af6..1c831a92 100644 --- a/packages/web/src/features/agent-providers/actions/use-agent-providers.ts +++ b/packages/web/src/features/agent-providers/actions/use-agent-providers.ts @@ -1,7 +1,8 @@ import type { ProviderListItem } from "@coder-studio/core"; import { useAtomValue } from "jotai"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { dispatchCommandAtom } from "../../../atoms/connection"; +import { useTranslation } from "../../../lib/i18n"; interface UseAgentProvidersResult { providers: ProviderListItem[]; @@ -11,19 +12,20 @@ interface UseAgentProvidersResult { } export function useAgentProviders(): UseAgentProvidersResult { + const t = useTranslation(); const dispatch = useAtomValue(dispatchCommandAtom); const [providers, setProviders] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); - const refresh = async () => { + const refresh = useCallback(async () => { setIsLoading(true); setError(null); const result = await dispatch("provider.list", {}); if (!result.ok || !result.data) { setProviders([]); - setError(result.error?.message ?? "Failed to load providers"); + setError(result.error?.message ?? t("provider.load_failed")); setIsLoading(false); return; } @@ -31,11 +33,11 @@ export function useAgentProviders(): UseAgentProvidersResult { setProviders(result.data); setError(null); setIsLoading(false); - }; + }, [dispatch, t]); useEffect(() => { void refresh(); - }, [dispatch]); + }, [refresh]); return { providers, diff --git a/packages/web/src/features/auth/index.tsx b/packages/web/src/features/auth/index.tsx index 900404c6..b579baa8 100644 --- a/packages/web/src/features/auth/index.tsx +++ b/packages/web/src/features/auth/index.tsx @@ -107,13 +107,13 @@ export function LoginPage({ }); if (!response.ok) { - const data = await response.json().catch(() => ({ error: "Login failed" })); + const data = await response.json().catch(() => ({ error: t("auth.login_failed") })); if (data?.blocked === true) { setError(formatBlockedMessage(data.blockedUntil)); return; } - setError(data.error || "Login failed"); + setError(data.error || t("auth.login_failed")); return; } diff --git a/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts b/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts index f8a223ef..bd8da6ec 100644 --- a/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts +++ b/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts @@ -3,6 +3,7 @@ import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { useCallback, useEffect, useRef, useState } from "react"; import { dispatchCommandAtom } from "../../../atoms/connection"; import { activeWorkspaceAtom } from "../../../atoms/workspaces"; +import { useTranslation } from "../../../lib/i18n"; import { useOpenEditorsActions } from "../../workspace/actions/use-open-editors-actions"; import { activeFilePathAtomFamily, @@ -47,6 +48,7 @@ type FileReadImagePayload = { type FileReadPayload = FileReadTextPayload | FileReadImagePayload; export function useCodeEditorActions() { + const t = useTranslation(); const workspace = useAtomValue(activeWorkspaceAtom); const workspaceRootPath = workspace?.path; const dispatch = useAtomValue(dispatchCommandAtom); @@ -188,7 +190,7 @@ export function useCodeEditorActions() { if (!result.ok || !result.data) { finishPendingEditorLoad(workspaceId, path, requestId); - const message = result.error?.message ?? "Failed to open file"; + const message = result.error?.message ?? t("code_editor.open_failed_title"); console.error("Failed to open file:", message); setFileLoadError({ path, message }); return; @@ -205,7 +207,7 @@ export function useCodeEditorActions() { if (!response.ok) { finishPendingEditorLoad(workspaceId, path, requestId); - const message = `Failed to fetch text-backed image bytes: ${response.status}`; + const message = `${t("code_editor.text_backed_image_load_failed")}: ${response.status}`; console.error(message); setFileLoadError({ path, message }); return; @@ -239,7 +241,7 @@ export function useCodeEditorActions() { } catch (error) { finishPendingEditorLoad(workspaceId, path, requestId); const message = - error instanceof Error ? error.message : "Failed to fetch text-backed image bytes"; + error instanceof Error ? error.message : t("code_editor.text_backed_image_load_failed"); console.error("Failed to fetch text-backed image bytes:", error); setFileLoadError({ path, message }); } @@ -281,17 +283,20 @@ export function useCodeEditorActions() { setExternalStatus((current) => (current?.path === path ? null : current)); setFileLoadError((current) => (current?.path === path ? null : current)); }, - [dispatch, setOpenFiles, workspaceId, workspaceRootPath] + [dispatch, setOpenFiles, t, workspaceId, workspaceRootPath] ); - const loadTextBackedImageContent = useCallback(async (url: string) => { - const response = await fetch(url, { credentials: "include" }); - if (!response.ok) { - throw new Error(`Failed to fetch text-backed image bytes: ${response.status}`); - } + const loadTextBackedImageContent = useCallback( + async (url: string) => { + const response = await fetch(url, { credentials: "include" }); + if (!response.ok) { + throw new Error(`${t("code_editor.text_backed_image_load_failed")}: ${response.status}`); + } - return response.text(); - }, []); + return response.text(); + }, + [t] + ); const handleSave = useCallback(async () => { if (!workspaceId || !currentFile || currentFile.kind !== "text") { @@ -342,7 +347,7 @@ export function useCodeEditorActions() { }); setExternalStatus((current) => (current?.path === path ? null : current)); } else { - setSaveError({ path, message: result.error?.message ?? "Failed to save file" }); + setSaveError({ path, message: result.error?.message ?? t("code_editor.save_failed_title") }); } activeSaveRequestIdByPathRef.current.delete(path); @@ -350,7 +355,7 @@ export function useCodeEditorActions() { nextSavingPathsAfterSave.delete(path); savingPathsRef.current = nextSavingPathsAfterSave; setSavingPaths(nextSavingPathsAfterSave); - }, [currentFile, dispatch, setOpenFiles, workspaceId]); + }, [currentFile, dispatch, setOpenFiles, t, workspaceId]); const handleContentChange = useCallback( (newContent: string) => { diff --git a/packages/web/src/features/code-editor/components/image-diff-preview.test.tsx b/packages/web/src/features/code-editor/components/image-diff-preview.test.tsx index 07059488..98791604 100644 --- a/packages/web/src/features/code-editor/components/image-diff-preview.test.tsx +++ b/packages/web/src/features/code-editor/components/image-diff-preview.test.tsx @@ -1,7 +1,21 @@ import { fireEvent, render, screen, within } from "@testing-library/react"; +import { createStore, Provider } from "jotai"; +import type { PropsWithChildren, ReactElement } from "react"; import { describe, expect, it } from "vitest"; +import { localeAtom } from "../../../atoms/app-ui"; import { ImageDiffPreview } from "./image-diff-preview"; +function renderWithLocale(ui: ReactElement) { + const store = createStore(); + store.set(localeAtom, "en"); + + function LocaleProvider({ children }: PropsWithChildren) { + return {children}; + } + + return render(ui, { wrapper: LocaleProvider }); +} + function getPane(label: "Base" | "Current"): HTMLElement { const header = screen.getByText(label); const pane = header.closest("section"); @@ -11,7 +25,7 @@ function getPane(label: "Base" | "Current"): HTMLElement { describe("ImageDiffPreview", () => { it("renders baseline image on top and workspace image on bottom for modified files", () => { - render( + renderWithLocale( { ); const images = screen.getAllByRole("img"); - expect(images[0]).toHaveAttribute("alt", "assets/logo.png base"); - expect(images[1]).toHaveAttribute("alt", "assets/logo.png current"); + expect(images[0]).toHaveAttribute("alt", "assets/logo.png Base"); + expect(images[1]).toHaveAttribute("alt", "assets/logo.png Current"); }); it("renders an empty top state for added images", () => { - render( + renderWithLocale( { expect(within(getPane("Base")).getByText("No base image")).toBeInTheDocument(); expect( - within(getPane("Current")).getByRole("img", { name: "assets/new.png current" }) + within(getPane("Current")).getByRole("img", { name: "assets/new.png Current" }) ).toBeInTheDocument(); }); it("renders an empty bottom state for deleted images", () => { - render( + renderWithLocale( { ); expect( - within(getPane("Base")).getByRole("img", { name: "assets/deleted.png base" }) + within(getPane("Base")).getByRole("img", { name: "assets/deleted.png Base" }) ).toBeInTheDocument(); expect(within(getPane("Current")).getByText("No current image")).toBeInTheDocument(); }); it("renders a pane-local error state when one side fails to load", () => { - render( + renderWithLocale( { /> ); - fireEvent.error(screen.getByRole("img", { name: "assets/logo.png base" })); + fireEvent.error(screen.getByRole("img", { name: "assets/logo.png Base" })); expect(within(getPane("Base")).getByText("Preview unavailable")).toBeInTheDocument(); expect( - within(getPane("Current")).getByRole("img", { name: "assets/logo.png current" }) + within(getPane("Current")).getByRole("img", { name: "assets/logo.png Current" }) ).toBeInTheDocument(); }); it("lets the user retry after an image load failure without changing the url", () => { - render( + renderWithLocale( { /> ); - fireEvent.error(screen.getByRole("img", { name: "assets/logo.png base" })); + fireEvent.error(screen.getByRole("img", { name: "assets/logo.png Base" })); const basePane = getPane("Base"); expect(within(basePane).getByText("Preview unavailable")).toBeInTheDocument(); @@ -96,11 +110,11 @@ describe("ImageDiffPreview", () => { fireEvent.click(within(basePane).getByRole("button", { name: "Retry" })); expect(within(basePane).queryByText("Preview unavailable")).not.toBeInTheDocument(); - expect(within(basePane).getByRole("img", { name: "assets/logo.png base" })).toBeInTheDocument(); + expect(within(basePane).getByRole("img", { name: "assets/logo.png Base" })).toBeInTheDocument(); }); it("resets a pane error state when its image url changes", () => { - const { rerender } = render( + const { rerender } = renderWithLocale( { /> ); - fireEvent.error(screen.getByRole("img", { name: "assets/logo.png current" })); + fireEvent.error(screen.getByRole("img", { name: "assets/logo.png Current" })); expect(screen.getByText("Preview unavailable")).toBeInTheDocument(); rerender( @@ -124,7 +138,7 @@ describe("ImageDiffPreview", () => { ); expect(screen.queryByText("Preview unavailable")).not.toBeInTheDocument(); - expect(screen.getByRole("img", { name: "assets/logo.png current" })).toHaveAttribute( + expect(screen.getByRole("img", { name: "assets/logo.png Current" })).toHaveAttribute( "src", "/api/file?workspaceId=ws-1&path=assets%2Flogo.png&revision=HEAD" ); diff --git a/packages/web/src/features/code-editor/components/image-diff-preview.tsx b/packages/web/src/features/code-editor/components/image-diff-preview.tsx index 7b6680d7..fc5a90d2 100644 --- a/packages/web/src/features/code-editor/components/image-diff-preview.tsx +++ b/packages/web/src/features/code-editor/components/image-diff-preview.tsx @@ -1,6 +1,7 @@ import type { FC } from "react"; import { useEffect, useState } from "react"; import { Button, EmptyState } from "../../../components/ui"; +import { useTranslation } from "../../../lib/i18n"; interface ImageDiffPreviewProps { path: string; @@ -27,6 +28,7 @@ function ImageDiffPane({ url?: string; alt: string; }) { + const t = useTranslation(); const [errored, setErrored] = useState(false); const [reloadKey, setReloadKey] = useState(0); @@ -57,17 +59,14 @@ function ImageDiffPane({ size="sm" variant="ghost" > - Retry + {t("code_editor.preview_retry")} } className="git-diff-empty" description={ -

- The image could not be loaded. The file may have been moved or is larger than the - browser allows. -

+

{t("code_editor.image_load_failed_body")}

} - title={

Preview unavailable

} + title={

{t("code_editor.preview_unavailable")}

} /> ) : ( = ({ beforeUrl, afterUrl, }) => { + const t = useTranslation(); + return (
@@ -100,16 +101,16 @@ export const ImageDiffPreview: FC = ({
diff --git a/packages/web/src/features/code-editor/components/image-preview.test.tsx b/packages/web/src/features/code-editor/components/image-preview.test.tsx index 0b01f605..29810269 100644 --- a/packages/web/src/features/code-editor/components/image-preview.test.tsx +++ b/packages/web/src/features/code-editor/components/image-preview.test.tsx @@ -1,10 +1,24 @@ import { fireEvent, render, screen } from "@testing-library/react"; +import { createStore, Provider } from "jotai"; +import type { PropsWithChildren, ReactElement } from "react"; import { describe, expect, it } from "vitest"; +import { localeAtom } from "../../../atoms/app-ui"; import { ImagePreview } from "./image-preview"; +function renderWithLocale(ui: ReactElement) { + const store = createStore(); + store.set(localeAtom, "en"); + + function LocaleProvider({ children }: PropsWithChildren) { + return {children}; + } + + return render(ui, { wrapper: LocaleProvider }); +} + describe("ImagePreview", () => { it("preserves the migrated empty-state fallback when image loading fails", () => { - render( + renderWithLocale( { }); it("resets the preview state when only the version changes", () => { - const { rerender } = render( + const { rerender } = renderWithLocale( { }); it("appends the cache-busting version with ampersand when the url already has query params", () => { - render( + renderWithLocale( = ({ url, version, mime, sizeBytes, alt }) => { + const t = useTranslation(); const [dimensions, setDimensions] = useState<{ w: number; h: number } | null>(null); const [errored, setErrored] = useState(false); const src = `${url}${url.includes("?") ? "&" : "?"}v=${version}`; @@ -51,12 +53,9 @@ export const ImagePreview: FC = ({ url, version, mime, sizeBy - The image could not be loaded. The file may have been moved or is larger than the - browser allows. -

+

{t("code_editor.image_load_failed_body")}

} - title={

Preview unavailable

} + title={

{t("code_editor.preview_unavailable")}

} /> ) : ( {children}; + } + + return render(ui, { wrapper: LocaleProvider }); +} + describe("LspStatusNotice", () => { it("renders an install action when the server is missing and auto-install is supported", () => { const onInstall = vi.fn(); - render( + renderWithLocale( { it("renders a retry action when installation failed", () => { const onRetry = vi.fn(); - render( + renderWithLocale( { }); it("does not render an install action when prerequisites are missing", () => { - render( + renderWithLocale( { }); it("renders a disabled notice without install or retry actions", () => { - render( + renderWithLocale( ) => string +): string | null { if (!step) { return null; } if (step.status === "running") { - return `Installing: ${step.title}`; + return t("code_editor.lsp_installing_step", { title: step.title }); } if (step.status === "failed") { - return `Install failed at: ${step.title}`; + return t("code_editor.lsp_install_failed_step", { title: step.title }); } return null; } +function getLspMessage( + state: LspNoticeState, + progressMessage: string | null, + t: (key: string, params?: Record) => string +): string { + if (progressMessage) { + return progressMessage; + } + + if (state.kind === "installing" && state.errorCode === "lsp_install_in_progress") { + return t("code_editor.lsp_install_in_progress"); + } + + if (state.kind === "failed" && state.errorCode === "lsp_install_failed") { + return state.message || t("code_editor.lsp_install_failed"); + } + + return state.message; +} + export function LspStatusNotice({ state, onInstall, onRetry, installing = false, }: LspStatusNoticeProps) { + const t = useTranslation(); + if (state.kind === "disabled") { return ( ); } @@ -54,7 +80,7 @@ export function LspStatusNotice({ const activeStep = state.installJob?.steps.find( (step) => step.id === state.installJob?.currentStepId ); - const progressMessage = describeStep(activeStep); + const progressMessage = describeStep(activeStep, t); const canInstall = state.kind === "tool_missing" && state.autoInstallSupported && @@ -64,19 +90,19 @@ export function LspStatusNotice({ const action = canInstall ? ( ) : canRetry ? ( ) : null; return ( ); diff --git a/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx b/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx index 87cbaf89..e75a49bb 100644 --- a/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx +++ b/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx @@ -68,7 +68,11 @@ export const CodeEditorDesktopHeaderActions: FC +
{canDiff ? (
); diff --git a/packages/web/src/features/workspace/views/shared/workspace-route-gate.tsx b/packages/web/src/features/workspace/views/shared/workspace-route-gate.tsx index ce4cb520..e367a692 100644 --- a/packages/web/src/features/workspace/views/shared/workspace-route-gate.tsx +++ b/packages/web/src/features/workspace/views/shared/workspace-route-gate.tsx @@ -6,10 +6,12 @@ import { workspacesLoadErrorAtom, workspacesLoadStateAtom, } from "../../../../atoms/workspaces"; +import { useTranslation } from "../../../../lib/i18n"; import { WorkspaceEmptyState } from "./workspace-empty-state"; import { WorkspaceLoadingState } from "./workspace-loading-state"; export function WorkspaceRouteGate({ children }: { children: ReactNode }) { + const t = useTranslation(); const workspace = useAtomValue(activeWorkspaceAtom); const loadState = useAtomValue(workspacesLoadStateAtom); const loadError = useAtomValue(workspacesLoadErrorAtom); @@ -22,7 +24,9 @@ export function WorkspaceRouteGate({ children }: { children: ReactNode }) { (isWorkspaceRoute && loadState === "ready")); if (!workspace && loadState === "error") { - return ; + return ( + + ); } if (shouldHoldForResolution) { diff --git a/packages/web/src/features/workspace/views/shared/worktree-manager-surface.test.tsx b/packages/web/src/features/workspace/views/shared/worktree-manager-surface.test.tsx index c327a2ff..c9bf78c9 100644 --- a/packages/web/src/features/workspace/views/shared/worktree-manager-surface.test.tsx +++ b/packages/web/src/features/workspace/views/shared/worktree-manager-surface.test.tsx @@ -316,10 +316,7 @@ describe("WorktreeManagerSurface", () => { expect(branchInput).toHaveAttribute("placeholder", "feature/worktree-manager"); expect(pathInput).toHaveClass("input"); - expect(pathInput).toHaveAttribute( - "placeholder", - "/home/spencer/workspace/coder-studio-feature-worktree-manager" - ); + expect(pathInput).toHaveAttribute("placeholder", "/repo/main-feature-worktree-manager"); expect(pathInput).toHaveAttribute("aria-describedby", "worktree-path-hint-ws-1"); }); diff --git a/packages/web/src/features/workspace/views/shared/worktree-manager-surface.tsx b/packages/web/src/features/workspace/views/shared/worktree-manager-surface.tsx index 59233ebe..d1faa6e9 100644 --- a/packages/web/src/features/workspace/views/shared/worktree-manager-surface.tsx +++ b/packages/web/src/features/workspace/views/shared/worktree-manager-surface.tsx @@ -148,6 +148,9 @@ export function WorktreeManagerSurface({ const canSubmit = branchDraft.trim().length > 0 && /^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(pathDraft.trim()); const pathHintId = `worktree-path-hint-${workspaceId}`; + const branchPlaceholder = t("worktree.create_branch_placeholder"); + const pathPlaceholder = + suggestedPathForBranch(branchPlaceholder) || t("worktree.create_path_placeholder"); const createOnlyMode = openView === "create"; const closeDeleteConfirm = () => { setRemoveError(null); @@ -219,7 +222,7 @@ export function WorktreeManagerSurface({ ref={branchInputRef} value={branchDraft} onChange={(event) => setBranchDraft(event.target.value)} - placeholder="feature/worktree-manager" + placeholder={branchPlaceholder} autoFocus />
@@ -235,7 +238,7 @@ export function WorktreeManagerSurface({ setPathTouched(true); setPathDraft(event.target.value); }} - placeholder="/home/spencer/workspace/coder-studio-feature-worktree-manager" + placeholder={pathPlaceholder} aria-describedby={pathHintId} /> diff --git a/packages/web/src/hooks/use-bootstrap.ts b/packages/web/src/hooks/use-bootstrap.ts index 5dea97dd..a9810193 100644 --- a/packages/web/src/hooks/use-bootstrap.ts +++ b/packages/web/src/hooks/use-bootstrap.ts @@ -17,8 +17,10 @@ import { hydrateWorkspaceEditorState, normalizeWorkspaceEditorUiState, } from "../features/workspace/actions/open-editor-state"; +import { useTranslation } from "../lib/i18n"; export function useBootstrap() { + const t = useTranslation(); const bootstrapRequestIdRef = useRef(0); const navigate = useNavigate(); const location = useLocation(); @@ -102,7 +104,9 @@ export function useBootstrap() { if (!listResult.ok) { setWorkspacesLoadState("error"); - setWorkspacesLoadError(listResult.error?.message ?? "Failed to fetch workspace list"); + setWorkspacesLoadError( + listResult.error?.message ?? t("workspace.load_failed_description") + ); return; } @@ -137,7 +141,7 @@ export function useBootstrap() { } setWorkspacesLoadState("error"); setWorkspacesLoadError( - error instanceof Error ? error.message : "Failed to fetch workspace list" + error instanceof Error ? error.message : t("workspace.load_failed_description") ); }); return; @@ -171,6 +175,7 @@ export function useBootstrap() { setWorkspacesLoadError, setWorkspacesLoadState, store, + t, workspaces.length, workspacesLoadState, ]); diff --git a/packages/web/src/lib/shortcuts.test.ts b/packages/web/src/lib/shortcuts.test.ts index 02119451..82fb3161 100644 --- a/packages/web/src/lib/shortcuts.test.ts +++ b/packages/web/src/lib/shortcuts.test.ts @@ -63,4 +63,21 @@ describe("shortcuts", () => { ]) ); }); + + it("stores translation keys for user-facing shortcut labels", () => { + expect(DEFAULT_SHORTCUTS).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + id: "command-palette.toggle", + nameKey: "shortcuts.command_palette_toggle.name", + descriptionKey: "shortcuts.command_palette_toggle.description", + }), + expect.objectContaining({ + id: "session.navigate.left", + nameKey: "shortcuts.session_navigate_left.name", + descriptionKey: "shortcuts.session_navigate_left.description", + }), + ]) + ); + }); }); diff --git a/packages/web/src/lib/shortcuts.ts b/packages/web/src/lib/shortcuts.ts index 30240f23..8ad9beb3 100644 --- a/packages/web/src/lib/shortcuts.ts +++ b/packages/web/src/lib/shortcuts.ts @@ -8,8 +8,8 @@ import { atomWithStorage } from "jotai/utils"; export interface ShortcutDefinition { id: string; - name: string; - description: string; + nameKey: string; + descriptionKey: string; defaultBinding: string; category: "global" | "workspace" | "editor" | "terminal"; } @@ -19,87 +19,87 @@ export const DEFAULT_SHORTCUTS: ShortcutDefinition[] = [ // Global { id: "command-palette.toggle", - name: "命令面板", - description: "打开/关闭命令面板", + nameKey: "shortcuts.command_palette_toggle.name", + descriptionKey: "shortcuts.command_palette_toggle.description", defaultBinding: "Mod+K", category: "global", }, { id: "workspace.new", - name: "新建工作区", - description: "打开新的工作区标签", + nameKey: "shortcuts.workspace_new.name", + descriptionKey: "shortcuts.workspace_new.description", defaultBinding: "Mod+N", category: "global", }, { id: "workspace.previous", - name: "上一个工作区", - description: "切换到上一个工作区标签", + nameKey: "shortcuts.workspace_previous.name", + descriptionKey: "shortcuts.workspace_previous.description", defaultBinding: "Ctrl+Shift+ArrowLeft", category: "workspace", }, { id: "workspace.next", - name: "下一个工作区", - description: "切换到下一个工作区标签", + nameKey: "shortcuts.workspace_next.name", + descriptionKey: "shortcuts.workspace_next.description", defaultBinding: "Ctrl+Shift+ArrowRight", category: "workspace", }, { id: "focus-mode.toggle", - name: "专注模式", - description: "切换专注模式（隐藏非必要面板）", + nameKey: "shortcuts.focus_mode_toggle.name", + descriptionKey: "shortcuts.focus_mode_toggle.description", defaultBinding: "F", category: "global", }, // Workspace { id: "agent.split-vertical", - name: "垂直分屏", - description: "垂直分割 Agent 面板", + nameKey: "shortcuts.agent_split_vertical.name", + descriptionKey: "shortcuts.agent_split_vertical.description", defaultBinding: "Mod+D", category: "workspace", }, { id: "session.navigate.left", - name: "切换到左侧会话", - description: "将焦点切换到左侧会话", + nameKey: "shortcuts.session_navigate_left.name", + descriptionKey: "shortcuts.session_navigate_left.description", defaultBinding: "Ctrl+ArrowLeft", category: "workspace", }, { id: "session.navigate.right", - name: "切换到右侧会话", - description: "将焦点切换到右侧会话", + nameKey: "shortcuts.session_navigate_right.name", + descriptionKey: "shortcuts.session_navigate_right.description", defaultBinding: "Ctrl+ArrowRight", category: "workspace", }, { id: "session.navigate.up", - name: "切换到上方会话", - description: "将焦点切换到上方会话", + nameKey: "shortcuts.session_navigate_up.name", + descriptionKey: "shortcuts.session_navigate_up.description", defaultBinding: "Ctrl+ArrowUp", category: "workspace", }, { id: "session.navigate.down", - name: "切换到下方会话", - description: "将焦点切换到下方会话", + nameKey: "shortcuts.session_navigate_down.name", + descriptionKey: "shortcuts.session_navigate_down.description", defaultBinding: "Ctrl+ArrowDown", category: "workspace", }, { id: "agent.split-horizontal", - name: "水平分屏", - description: "水平分割 Agent 面板", + nameKey: "shortcuts.agent_split_horizontal.name", + descriptionKey: "shortcuts.agent_split_horizontal.description", defaultBinding: "Mod+Shift+D", category: "workspace", }, // Editor { id: "editor.save", - name: "保存", - description: "保存当前编辑的文件", + nameKey: "shortcuts.editor_save.name", + descriptionKey: "shortcuts.editor_save.description", defaultBinding: "Mod+S", category: "editor", }, diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 0b3aac00..ac0c78bf 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -53,7 +53,8 @@ "yes": "Yes", "no": "No", "ok": "OK", - "all": "All" + "all": "All", + "active": "Active" }, "action": { "open": "Open", @@ -82,7 +83,8 @@ "back": "Back", "expand": "Expand", "collapse": "Collapse", - "close_all": "Close all" + "close_all": "Close all", + "retry": "Retry" }, "label": { "workspace": "Workspace", @@ -97,6 +99,7 @@ "progress": "Progress" }, "provider": { + "load_failed": "Failed to load providers", "install": { "cta": { "start": "Start Session", @@ -155,6 +158,8 @@ "loading_description": "Preparing your workspace list and restoring the last active session.", "load_failed_title": "Failed to load workspaces", "load_failed_description": "Failed to fetch workspace list", + "resize_left_panel": "Resize left panel", + "resize_bottom_panel": "Resize bottom panel", "sidebar": { "label": "Workspace activity bar", "explorer": "Explorer", @@ -306,6 +311,7 @@ "no_session": "No active session", "provider_select": "Select Agent", "state": { + "draft": "Draft", "starting": "Starting...", "running": "Running", "idle": "Waiting for input", @@ -320,6 +326,70 @@ "waiting": "Waiting for response..." } }, + "agent_panes": { + "open_in_editor": "Open in editor", + "move_here": "Move here", + "swap": "Swap", + "drag_pane": "Drag pane", + "split_horizontal": "Split horizontal", + "split_vertical": "Split vertical", + "close": "Close", + "draft_panels": "Draft panels", + "agent_panel": "Agent", + "file_editor": "File Editor", + "drop_file_to_open": "Drop files to open", + "draft_footer": "Launch an Agent or drop files on the right side to open them." + }, + "shortcuts": { + "command_palette_toggle": { + "name": "Command Palette", + "description": "Open or close the command palette" + }, + "workspace_new": { + "name": "New Workspace", + "description": "Open a new workspace tab" + }, + "workspace_previous": { + "name": "Previous Workspace", + "description": "Switch to the previous workspace tab" + }, + "workspace_next": { + "name": "Next Workspace", + "description": "Switch to the next workspace tab" + }, + "focus_mode_toggle": { + "name": "Focus Mode", + "description": "Toggle focus mode and hide nonessential panels" + }, + "agent_split_vertical": { + "name": "Vertical Split", + "description": "Split the Agent pane vertically" + }, + "session_navigate_left": { + "name": "Move to Left Session", + "description": "Move focus to the session on the left" + }, + "session_navigate_right": { + "name": "Move to Right Session", + "description": "Move focus to the session on the right" + }, + "session_navigate_up": { + "name": "Move to Upper Session", + "description": "Move focus to the session above" + }, + "session_navigate_down": { + "name": "Move to Lower Session", + "description": "Move focus to the session below" + }, + "agent_split_horizontal": { + "name": "Horizontal Split", + "description": "Split the Agent pane horizontally" + }, + "editor_save": { + "name": "Save", + "description": "Save the file currently being edited" + } + }, "terminal": { "title": "Terminal", "kicker": "TERMINAL", @@ -367,6 +437,19 @@ "left": "Left arrow", "right": "Right arrow" }, + "upload": { + "upload_failed": "Upload failed", + "upload_failed_body": "Could not upload file(s): {code}", + "uploading": "Uploading...", + "drop_failed": "Drop failed", + "drop_read_failed": "Could not read the dragged workspace path.", + "drop_workspace_mismatch": "You can only drop paths from the current workspace.", + "drop_insert_failed": "Could not insert the dragged path into the terminal.", + "paste": "Paste", + "clipboard_empty": "Clipboard is empty", + "paste_failed": "Paste failed", + "paste_permission_failed": "Could not read from clipboard. Please check permissions." + }, "replay": { "queued_title": "Waiting in queue ({count} ahead)", "up_next": "Up next...", @@ -441,12 +524,28 @@ "mode_preview": "Preview", "mode_edit": "Edit", "mode_diff": "Diff", + "toolbar_actions": "Editor actions", + "image_load_failed_body": "The image could not be loaded. The file may have been moved or is larger than the browser allows.", + "image_diff_base": "Base", + "image_diff_current": "Current", + "image_diff_no_base": "No base image", + "image_diff_no_current": "No current image", + "lsp_disabled_title": "Language server disabled", + "lsp_disabled_message": "LSP is turned off in Settings to reduce memory usage.", + "lsp_installing_step": "Installing: {title}", + "lsp_install_failed_step": "Install failed at: {title}", + "lsp_install": "Install", + "lsp_unavailable": "{name} unavailable", + "lsp_install_in_progress": "Install in progress", + "lsp_install_failed": "Install failed", "diff_saved_only": "Diff preview is based on saved file contents.", "unsaved_changes": "Unsaved changes", "close_unsaved_title": "Discard unsaved changes?", "close_unsaved_description": "{name} has unsaved changes. Closing it will discard those edits.", "discard_and_close": "Discard and Close", "open_failed_title": "Failed to open file", + "save_failed_title": "Failed to save file", + "text_backed_image_load_failed": "Failed to load image text content", "empty_hint": "Select a file on the left to open it in the editor.", "modified_on_disk": "This file changed on disk after you opened it. Save carefully or reload the file.", "deleted_on_disk": "This file was deleted on disk after you opened it." @@ -539,7 +638,11 @@ "empty_filtered": "No branches found", "empty_idle": "Type to search branches", "in_use": "In Use", + "hint_navigate": "Navigate", + "hint_select": "Select", + "hint_close": "Close", "worktree_in_use": "Checked out in another worktree", + "load_failed": "Failed to load branches", "checkout_failed_title": "Failed to switch branch", "checkout_failed_body": "Could not switch to {name}.", "create_failed_title": "Failed to create branch", @@ -553,7 +656,9 @@ "changes": "Uncommitted file changes", "ahead": "Local commits to push", "behind": "Remote commits to pull" - } + }, + "diff_select_title": "Select a changed file to inspect", + "diff_empty_body": "Select a staged or modified file on the left to inspect its diff." }, "worktree": { "title": "Worktree", @@ -575,6 +680,7 @@ "list_empty": "No worktrees", "list_open_label": "Open worktree list", "list_error": "Failed to load: {error}", + "list_load_failed": "Failed to load worktrees", "manage": "Manage", "new": "New", "current": "Current", @@ -583,17 +689,24 @@ "summary_current": "Current: {name}", "summary_no_current": "Current: unavailable", "create_title": "Create Worktree", + "create_branch_placeholder": "feature/worktree-manager", + "create_path_placeholder": "/path/to/coder-studio-feature-worktree-manager", "create_submit": "Create", "create_path_hint": "Path must be absolute. The suggested path is derived from the current workspace path.", "create_path_absolute_required": "Path must be an absolute path.", "create_failed_title": "Failed to create worktree", + "create_failed_body": "Could not create the worktree.", "create_success_title": "Worktree created", "create_success_body": "{name} is ready.", "remove_confirm": "Remove worktree?", "remove_force_confirm": "Force remove dirty worktree?", "remove_failed_title": "Failed to remove worktree", + "remove_failed_body": "Could not remove the worktree.", "remove_success_title": "Worktree removed", "remove_success_body": "Worktree removed.", + "open_failed_title": "Failed to open worktree", + "open_failed_body": "Could not open the selected worktree.", + "detail_load_failed": "Failed to load worktree data.", "force_remove": "Force Remove", "remove_row_label": "Remove {name}", "selection_removed": "The selected worktree is no longer available." @@ -830,7 +943,12 @@ "hint": "Review and adjust common keyboard actions", "reset_all": "Reset All", "capture_hint": "Press new shortcut combination", - "reset_hint": "Reset to default" + "capture_placeholder": "Press shortcut...", + "reset_hint": "Reset to default", + "category_global": "Global", + "category_workspace": "Workspace", + "category_editor": "Editor", + "category_terminal": "Terminal" }, "config_files": { "title": "Config Files", @@ -849,7 +967,10 @@ "collapse": "Collapse", "format": "Format", "format_hint": "Format JSON code", - "file_not_found_hint": "Edit and save to create the config file." + "file_not_found_hint": "Edit and save to create the config file.", + "json_formatted": "JSON formatted", + "invalid_json": "Invalid JSON", + "invalid_json_format_body": "Cannot format invalid JSON" }, "permission_denied_hint": "Browser or system notification permission may be blocked. Check site settings and device notification settings.", "permission_unavailable_hint": "This environment cannot request browser notification permission" @@ -977,6 +1098,7 @@ "auth": { "description": "Enter your password to continue to the current workspace.", "hint": "Enter the access password configured for this deployment.", + "login_failed": "Login failed", "blocked_until": "Too many attempts. Try again after {time}, or ask an administrator to unblock access.", "blocked_generic": "Too many attempts. Try again later, or ask an administrator to unblock access.", "status_title": "Access verification", @@ -995,9 +1117,17 @@ "reconnecting": "Reconnecting...", "reconnect_failed": "Reconnection failed", "another_tab": "Another tab is active", + "another_tab_activated": "Another tab is active", "takeover": "Take Control", "server_shutdown": "Server has shut down", - "backpressure_warning": "Network congested, some output may be lost" + "backpressure_warning": "Network congested, some output may be lost", + "reconnecting_banner": "Connection lost, reconnecting...", + "slow_recovery_hint": "Recovery is taking longer than expected. If it does not recover soon, try refreshing the page.", + "slow_recovery_hint_mobile": "Recovery is taking longer than expected. Try refreshing the page if it does not recover soon." + }, + "shell": { + "loading_title": "Loading workspace...", + "loading_description": "Syncing authentication and connection state before entering the current workspace." }, "supervisor": { "title": "Supervisor", @@ -1137,6 +1267,8 @@ "command": { "palette": "Command Palette", "no_results": "No results found", + "quick_actions": "Quick Actions", + "actions_count": "{count} actions", "shortcut": { "save": "Save", "save_all": "Save All", @@ -1409,6 +1541,7 @@ "fencing": { "observer_mode": "Read-only mode \u2014 another tab is the controller", "takeover": "Take over", + "taking_over": "Taking over...", "takeover_failed": "Takeover failed \u2014 controller is still active" } } diff --git a/packages/web/src/locales/zh.json b/packages/web/src/locales/zh.json index cf1a7278..799f3cd0 100644 --- a/packages/web/src/locales/zh.json +++ b/packages/web/src/locales/zh.json @@ -53,7 +53,8 @@ "yes": "是", "no": "否", "ok": "确定", - "all": "全部" + "all": "全部", + "active": "当前" }, "action": { "open": "打开", @@ -82,7 +83,8 @@ "back": "返回", "expand": "展开", "collapse": "收起", - "close_all": "全部关闭" + "close_all": "全部关闭", + "retry": "重试" }, "label": { "workspace": "工作区", @@ -97,6 +99,7 @@ "progress": "进度" }, "provider": { + "load_failed": "Provider 加载失败", "install": { "cta": { "start": "启动会话", @@ -155,6 +158,8 @@ "loading_description": "正在准备工作区列表并恢复上次活跃的会话。", "load_failed_title": "工作区加载失败", "load_failed_description": "获取工作区列表失败", + "resize_left_panel": "调整左侧面板大小", + "resize_bottom_panel": "调整底部面板大小", "sidebar": { "label": "工作区活动栏", "explorer": "资源管理器", @@ -306,6 +311,7 @@ "no_session": "无活跃会话", "provider_select": "选择 Agent", "state": { + "draft": "草稿", "starting": "启动中...", "running": "运行中", "idle": "等待指令", @@ -320,6 +326,70 @@ "waiting": "等待响应..." } }, + "agent_panes": { + "open_in_editor": "在编辑器中打开", + "move_here": "移动到这里", + "swap": "交换", + "drag_pane": "拖动面板", + "split_horizontal": "水平分屏", + "split_vertical": "垂直分屏", + "close": "关闭", + "draft_panels": "草稿面板", + "agent_panel": "Agent", + "file_editor": "文件编辑器", + "drop_file_to_open": "拖入文件打开", + "draft_footer": "点击启动 Agent，或将文件拖到右侧区域直接打开。" + }, + "shortcuts": { + "command_palette_toggle": { + "name": "命令面板", + "description": "打开或关闭命令面板" + }, + "workspace_new": { + "name": "新建工作区", + "description": "打开新的工作区标签" + }, + "workspace_previous": { + "name": "上一个工作区", + "description": "切换到上一个工作区标签" + }, + "workspace_next": { + "name": "下一个工作区", + "description": "切换到下一个工作区标签" + }, + "focus_mode_toggle": { + "name": "专注模式", + "description": "切换专注模式并隐藏非必要面板" + }, + "agent_split_vertical": { + "name": "垂直分屏", + "description": "垂直分割 Agent 面板" + }, + "session_navigate_left": { + "name": "切换到左侧会话", + "description": "将焦点切换到左侧会话" + }, + "session_navigate_right": { + "name": "切换到右侧会话", + "description": "将焦点切换到右侧会话" + }, + "session_navigate_up": { + "name": "切换到上方会话", + "description": "将焦点切换到上方会话" + }, + "session_navigate_down": { + "name": "切换到下方会话", + "description": "将焦点切换到下方会话" + }, + "agent_split_horizontal": { + "name": "水平分屏", + "description": "水平分割 Agent 面板" + }, + "editor_save": { + "name": "保存", + "description": "保存当前编辑的文件" + } + }, "terminal": { "title": "终端", "kicker": "TERMINAL", @@ -367,6 +437,19 @@ "left": "左方向键", "right": "右方向键" }, + "upload": { + "upload_failed": "上传失败", + "upload_failed_body": "无法上传文件：{code}", + "uploading": "上传中...", + "drop_failed": "拖放失败", + "drop_read_failed": "无法读取拖入的工作区路径。", + "drop_workspace_mismatch": "只能拖入当前工作区中的路径。", + "drop_insert_failed": "无法将拖入路径插入终端。", + "paste": "粘贴", + "clipboard_empty": "剪贴板为空", + "paste_failed": "粘贴失败", + "paste_permission_failed": "无法读取剪贴板，请检查权限。" + }, "replay": { "queued_title": "等待队列中（前方还有 {count} 个）", "up_next": "即将开始…", @@ -441,12 +524,28 @@ "mode_preview": "预览", "mode_edit": "编辑", "mode_diff": "Diff", + "toolbar_actions": "编辑器操作", + "image_load_failed_body": "图片无法加载。文件可能已被移动，或大小超出浏览器限制。", + "image_diff_base": "基准", + "image_diff_current": "当前", + "image_diff_no_base": "没有基准图片", + "image_diff_no_current": "没有当前图片", + "lsp_disabled_title": "语言服务已关闭", + "lsp_disabled_message": "已在设置中关闭 LSP，以降低内存占用。", + "lsp_installing_step": "正在安装：{title}", + "lsp_install_failed_step": "安装失败于：{title}", + "lsp_install": "安装", + "lsp_unavailable": "{name} 不可用", + "lsp_install_in_progress": "安装进行中", + "lsp_install_failed": "安装失败", "diff_saved_only": "Diff 仅基于已保存到磁盘的文件内容。", "unsaved_changes": "未保存的更改", "close_unsaved_title": "放弃未保存的更改？", "close_unsaved_description": "{name} 有未保存的更改。关闭后这些编辑将被放弃。", "discard_and_close": "放弃并关闭", "open_failed_title": "打开文件失败", + "save_failed_title": "保存文件失败", + "text_backed_image_load_failed": "加载图片文本内容失败", "empty_hint": "从左侧选择一个文件以在编辑器中打开。", "modified_on_disk": "该文件在打开后已被磁盘上的其他操作修改。请谨慎保存或重新加载文件。", "deleted_on_disk": "该文件在打开后已被磁盘上的其他操作删除。" @@ -539,7 +638,11 @@ "empty_filtered": "未找到分支", "empty_idle": "输入以搜索分支", "in_use": "占用中", + "hint_navigate": "导航", + "hint_select": "选择", + "hint_close": "关闭", "worktree_in_use": "已在其他工作区中签出", + "load_failed": "加载分支失败", "checkout_failed_title": "切换分支失败", "checkout_failed_body": "无法切换到 {name}。", "create_failed_title": "创建分支失败", @@ -553,7 +656,9 @@ "changes": "未提交的文件变更", "ahead": "待推送的本地提交", "behind": "远端有新提交待拉取" - } + }, + "diff_select_title": "选择一个已更改文件查看", + "diff_empty_body": "从左侧选择暂存或已修改文件查看 diff。" }, "worktree": { "title": "工作树", @@ -575,6 +680,7 @@ "list_empty": "暂无工作树", "list_open_label": "查看工作树", "list_error": "加载失败：{error}", + "list_load_failed": "加载工作树失败", "manage": "管理", "new": "新建", "current": "当前", @@ -583,17 +689,24 @@ "summary_current": "当前：{name}", "summary_no_current": "当前：不可用", "create_title": "新建工作树", + "create_branch_placeholder": "feature/worktree-manager", + "create_path_placeholder": "/path/to/coder-studio-feature-worktree-manager", "create_submit": "创建", "create_path_hint": "路径必须是绝对路径。默认建议路径会基于当前工作区路径生成。", "create_path_absolute_required": "路径必须是绝对路径。", "create_failed_title": "创建工作树失败", + "create_failed_body": "无法创建工作树。", "create_success_title": "工作树已创建", "create_success_body": "{name} 已可用。", "remove_confirm": "确认删除这个工作树？", "remove_force_confirm": "强制删除有更改的工作树？", "remove_failed_title": "删除工作树失败", + "remove_failed_body": "无法删除工作树。", "remove_success_title": "工作树已删除", "remove_success_body": "工作树已删除。", + "open_failed_title": "打开工作树失败", + "open_failed_body": "无法打开所选工作树。", + "detail_load_failed": "加载工作树数据失败。", "force_remove": "强制删除", "remove_row_label": "删除 {name}", "selection_removed": "所选工作树已不可用。" @@ -830,7 +943,12 @@ "hint": "查看并调整常用键盘操作", "reset_all": "重置全部", "capture_hint": "按下新的快捷键组合", - "reset_hint": "重置为默认" + "capture_placeholder": "按下快捷键...", + "reset_hint": "重置为默认", + "category_global": "全局", + "category_workspace": "工作区", + "category_editor": "编辑器", + "category_terminal": "终端" }, "config_files": { "title": "配置文件", @@ -849,7 +967,10 @@ "collapse": "折叠", "format": "格式化", "format_hint": "格式化 JSON 代码", - "file_not_found_hint": "编辑并保存以创建配置文件。" + "file_not_found_hint": "编辑并保存以创建配置文件。", + "json_formatted": "JSON 已格式化", + "invalid_json": "无效 JSON", + "invalid_json_format_body": "无法格式化无效 JSON" }, "permission_denied_hint": "浏览器或系统通知权限可能已阻止，请检查站点设置和设备通知设置", "permission_unavailable_hint": "当前环境无法请求浏览器通知权限" @@ -979,6 +1100,7 @@ "hint": "请输入当前部署配置的访问密码。", "blocked_until": "尝试次数过多，请于 {time} 后再试，或联系管理员解禁。", "blocked_generic": "尝试次数过多，请稍后再试，或联系管理员解禁。", + "login_failed": "登录失败", "status_title": "访问验证", "status_loading": "正在检查当前部署的访问状态。", "status_unavailable": "暂时无法连接鉴权服务，请稍后重试。", @@ -995,9 +1117,17 @@ "reconnecting": "正在重新连接...", "reconnect_failed": "重连失败", "another_tab": "另一个标签页已激活", + "another_tab_activated": "另一个标签页已激活", "takeover": "接管控制权", "server_shutdown": "服务器已关闭", - "backpressure_warning": "网络拥堵，部分输出可能丢失" + "backpressure_warning": "网络拥堵，部分输出可能丢失", + "reconnecting_banner": "连接已断开，正在重新连接...", + "slow_recovery_hint": "连接恢复较慢，可能是网络问题。如果长时间没有恢复，可以刷新页面。", + "slow_recovery_hint_mobile": "连接恢复较慢，长时间未恢复可刷新页面。" + }, + "shell": { + "loading_title": "正在连接工作区...", + "loading_description": "正在同步认证与连接状态，随后会自动进入当前工作区。" }, "supervisor": { "title": "Supervisor", @@ -1137,6 +1267,8 @@ "command": { "palette": "命令面板", "no_results": "未找到结果", + "quick_actions": "快速操作", + "actions_count": "{count} 个操作", "shortcut": { "save": "保存", "save_all": "保存全部", @@ -1409,6 +1541,7 @@ "fencing": { "observer_mode": "只读模式 — 另一个标签页正在控制", "takeover": "接管控制", + "taking_over": "接管中...", "takeover_failed": "接管失败 — 控制器仍然活跃" } } diff --git a/packages/web/src/shells/desktop-shell.tsx b/packages/web/src/shells/desktop-shell.tsx index b4f5332d..47a847f5 100644 --- a/packages/web/src/shells/desktop-shell.tsx +++ b/packages/web/src/shells/desktop-shell.tsx @@ -21,6 +21,7 @@ import { WelcomePage } from "../features/welcome"; import { WorkspaceDesktopView } from "../features/workspace/views/desktop/workspace-desktop-view"; import { WorkspaceRouteGate } from "../features/workspace/views/shared/workspace-route-gate"; import { useBootstrap } from "../hooks/use-bootstrap"; +import { useTranslation } from "../lib/i18n"; import { ConnectionStatusBanner } from "./shared/connection-status-banner"; const appLoadingEmptyStateStyle = { @@ -34,6 +35,7 @@ const appLoadingEmptyStateStyle = { export function DesktopShell() { useBootstrap(); + const t = useTranslation(); const authEnabled = useAtomValue(authEnabledAtom); const location = useLocation(); const authUnknown = authEnabled === null; @@ -55,14 +57,10 @@ export function DesktopShell() { title={
CODER STUDIO
-

正在连接工作区...

+

{t("shell.loading_title")}

} - description={ -

- 正在同步认证与连接状态，随后会自动进入当前 workspace。 -

- } + description={

{t("shell.loading_description")}

} />
diff --git a/packages/web/src/shells/mobile-shell/index.tsx b/packages/web/src/shells/mobile-shell/index.tsx index 2514ac76..c6b2c985 100644 --- a/packages/web/src/shells/mobile-shell/index.tsx +++ b/packages/web/src/shells/mobile-shell/index.tsx @@ -14,6 +14,7 @@ import { WorkspaceMobileView } from "../../features/workspace/views/mobile/works import { BranchQuickPick } from "../../features/workspace/views/shared/branch-quick-pick"; import { WorkspaceRouteGate } from "../../features/workspace/views/shared/workspace-route-gate"; import { useBootstrap } from "../../hooks/use-bootstrap"; +import { useTranslation } from "../../lib/i18n"; import { ConnectionStatusBanner } from "../shared/connection-status-banner"; const appLoadingEmptyStateStyle = { @@ -27,6 +28,7 @@ const appLoadingEmptyStateStyle = { export function MobileShell() { useBootstrap(); + const t = useTranslation(); const authEnabled = useAtomValue(authEnabledAtom); const location = useLocation(); const authUnknown = authEnabled === null; @@ -48,14 +50,10 @@ export function MobileShell() { title={
CODER STUDIO
-

正在连接工作区...

+

{t("shell.loading_title")}

} - description={ -

- 正在同步认证与连接状态，随后会自动进入当前 workspace。 -

- } + description={

{t("shell.loading_description")}

} /> diff --git a/packages/web/src/shells/shared/connection-status-banner.tsx b/packages/web/src/shells/shared/connection-status-banner.tsx index d6577db0..4a9f65ea 100644 --- a/packages/web/src/shells/shared/connection-status-banner.tsx +++ b/packages/web/src/shells/shared/connection-status-banner.tsx @@ -3,12 +3,12 @@ import { useEffect, useState } from "react"; import { activationReasonAtom, activationStatusAtom } from "../../atoms/activation"; import { connectionStatusAtom, lastReconnectAttemptAtom } from "../../atoms/connection"; import { useViewport } from "../../components/ui/_internal/use-viewport"; +import { useTranslation } from "../../lib/i18n"; const SLOW_RECOVERY_HINT_MS = 25_000; -const SLOW_RECOVERY_HINT_TEXT = "连接恢复较慢，可能是网络问题。如果长时间没有恢复，可以刷新页面。"; -const SLOW_RECOVERY_HINT_TEXT_MOBILE = "连接恢复较慢，长时间未恢复可刷新页面。"; export function ConnectionStatusBanner() { + const t = useTranslation(); const activationStatus = useAtomValue(activationStatusAtom); const activationReason = useAtomValue(activationReasonAtom); const connectionStatus = useAtomValue(connectionStatusAtom); @@ -54,7 +54,7 @@ export function ConnectionStatusBanner() { role="status" aria-live="polite" > - 另一个标签页已激活 + {t("connection.another_tab_activated")} ); } @@ -64,7 +64,9 @@ export function ConnectionStatusBanner() { now - lastReconnectAttempt >= SLOW_RECOVERY_HINT_MS && (connectionStatus === "reconnecting" || connectionStatus === "disconnected"); const stacked = showSlowRecoveryHint && isMobile; - const slowRecoveryHintText = isMobile ? SLOW_RECOVERY_HINT_TEXT_MOBILE : SLOW_RECOVERY_HINT_TEXT; + const slowRecoveryHintText = isMobile + ? t("connection.slow_recovery_hint_mobile") + : t("connection.slow_recovery_hint"); const className = [ "connection-banner", isMobile ? "connection-banner--mobile" : null, @@ -75,7 +77,7 @@ export function ConnectionStatusBanner() { return (
- 连接已断开，正在重新连接... + {t("connection.reconnecting_banner")} {showSlowRecoveryHint ? ( {slowRecoveryHintText} ) : null} diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css index a9990287..f9ce583e 100644 --- a/packages/web/src/styles/components.css +++ b/packages/web/src/styles/components.css @@ -2605,19 +2605,19 @@ .mobile-terminal-input-bar__ctrl, .mobile-terminal-input-bar__shift, -.mobile-terminal-input-bar__key[aria-label="Escape"], -.mobile-terminal-input-bar__key[aria-label="Tab"] { +.mobile-terminal-input-bar__key[data-key-id="escape"], +.mobile-terminal-input-bar__key[data-key-id="tab"] { min-width: 28px; } -.mobile-terminal-input-bar__key[aria-label="Enter"] { +.mobile-terminal-input-bar__key[data-key-id="enter"] { min-width: 34px; } -.mobile-terminal-input-bar__key[aria-label="Up arrow"], -.mobile-terminal-input-bar__key[aria-label="Left arrow"], -.mobile-terminal-input-bar__key[aria-label="Down arrow"], -.mobile-terminal-input-bar__key[aria-label="Right arrow"] { +.mobile-terminal-input-bar__key[data-key-id="arrow_up"], +.mobile-terminal-input-bar__key[data-key-id="arrow_left"], +.mobile-terminal-input-bar__key[data-key-id="arrow_down"], +.mobile-terminal-input-bar__key[data-key-id="arrow_right"] { min-width: 20px; padding: 0; } @@ -9693,20 +9693,20 @@ textarea.input { gap: var(--gap-control); } -.session-header-actions button[aria-label="Start"], -.session-header-actions button[aria-label="Stop"] { +.session-header-actions button[data-session-action="start"], +.session-header-actions button[data-session-action="stop"] { order: 0; } -.session-header-actions button[aria-label="Split vertical"] { +.session-header-actions button[data-session-action="split-vertical"] { order: 1; } -.session-header-actions button[aria-label="Split horizontal"] { +.session-header-actions button[data-session-action="split-horizontal"] { order: 2; } -.session-header-actions button[aria-label="Close"] { +.session-header-actions button[data-session-action="close"] { order: 3; } @@ -13994,9 +13994,9 @@ body.is-dragging-pane .session-action-btn-drag { color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; - font-size: 13px; - line-height: 1.35; - font-weight: var(--font-bold); + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + font-weight: var(--type-body-6-weight); letter-spacing: 0; } @@ -14011,9 +14011,9 @@ body.is-dragging-pane .session-action-btn-drag { border-radius: var(--radius-pill); background: var(--component-mix-status-info-fg-10pct-surface-panel); color: var(--status-info-fg); - font-size: 11px; - line-height: 1; - font-weight: var(--font-bold); + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + font-weight: var(--type-body-6-weight); font-variant-numeric: tabular-nums; } @@ -14131,9 +14131,9 @@ body.is-dragging-pane .session-action-btn-drag { margin: 0; min-width: 0; color: var(--text-secondary); - font-size: 13px; - line-height: 1.35; - font-weight: var(--font-bold); + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + font-weight: var(--type-body-6-weight); letter-spacing: 0; } @@ -14900,9 +14900,9 @@ body.is-dragging-pane .session-action-btn-drag { border: none; background: transparent; color: var(--text-secondary); - font-size: 13px; - line-height: 1.35; - font-weight: var(--font-bold); + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + font-weight: var(--type-body-6-weight); letter-spacing: 0; text-align: left; } @@ -14921,9 +14921,9 @@ body.is-dragging-pane .session-action-btn-drag { border-radius: var(--radius-pill); background: var(--component-mix-status-info-fg-10pct-surface-panel); color: var(--status-info-fg); - font-size: 11px; - line-height: 1; - font-weight: var(--font-bold); + font-size: var(--type-body-6-size); + line-height: var(--type-body-6-line-height); + font-weight: var(--type-body-6-weight); font-variant-numeric: tabular-nums; } @@ -16518,7 +16518,7 @@ body.is-dragging-pane .session-action-btn-drag { border-radius: 0; color: var(--text-tertiary); font-size: 10px; - font-weight: var(--font-medium); + font-weight: var(--font-normal); line-height: 1; background: transparent; transition: @@ -16636,7 +16636,7 @@ body.is-dragging-pane .session-action-btn-drag { color: var(--text-tertiary); font-size: 10px; line-height: 1.2; - font-weight: var(--font-medium); + font-weight: var(--font-normal); letter-spacing: 0.02em; } @@ -16798,7 +16798,7 @@ body.is-dragging-pane .session-action-btn-drag { text-align: left; font-size: var(--type-body-3-size); line-height: var(--type-body-3-line-height); - font-weight: var(--font-bold); + font-weight: var(--type-body-3-weight); } .workspace-search-panel__preview mark { From e245c9325dbb36ae33d0429e607a4b63ec3c2708 Mon Sep 17 00:00:00 2001 From: pallyoung Date: Sun, 31 May 2026 23:40:01 +0800 Subject: [PATCH 161/162] fix: stabilize ci verification --- .../src/__tests__/session-commands.test.ts | 61 ++++++++++++ packages/server/src/fs/search-replace.ts | 6 +- packages/server/src/lsp/vue-spec.ts | 31 +++--- packages/server/src/workspace/pane-layout.ts | 4 +- .../components/session-card.test.tsx | 12 ++- .../src/features/agent-panes/index.test.tsx | 21 +++- .../components/monaco-host.test.tsx | 7 +- .../src/features/code-editor/index.test.tsx | 22 +++-- .../monaco/language-tokenization.test.ts | 2 +- .../uploads/use-paste-drop-upload.test.tsx | 2 + .../web/src/features/workspace/index.test.tsx | 23 +++-- .../mobile/workspace-mobile-view.test.tsx | 97 +++++++++++++++---- .../views/shared/git-diff-viewer.test.tsx | 4 + .../web/src/shells/desktop-shell.test.tsx | 16 ++- .../src/shells/mobile-shell/index.test.tsx | 1 + .../web/src/styles/color-system.guard.test.ts | 2 +- .../web/src/styles/foundations.guard.test.ts | 8 ++ .../web/src/styles/typography.guard.test.ts | 5 + packages/web/src/ui-preview/app.test.tsx | 46 ++++++++- packages/web/src/ui-preview/catalog.test.tsx | 6 +- 20 files changed, 306 insertions(+), 70 deletions(-) diff --git a/packages/server/src/__tests__/session-commands.test.ts b/packages/server/src/__tests__/session-commands.test.ts index 89b70efd..2ec3a93f 100644 --- a/packages/server/src/__tests__/session-commands.test.ts +++ b/packages/server/src/__tests__/session-commands.test.ts @@ -428,6 +428,67 @@ describe("Session Commands", () => { }); }); + it("preserves non-session leaf kinds when removing a typed session pane", async () => { + const workspacePath = mkdtempSync(join(tmpdir(), "coder-studio-close-typed-")); + tempDirs.push(workspacePath); + const workspace = await workspaceMgr.open({ path: workspacePath }); + workspaceMgr.updateUiState(workspace.id, { + ...workspace.uiState, + paneLayout: { + id: "root", + type: "split", + direction: "horizontal", + children: [ + { id: "left", type: "leaf", leafKind: "draft" }, + { id: "center", type: "leaf", leafKind: "session", sessionId: "sess-typed" }, + { id: "right", type: "leaf", leafKind: "editor" }, + ], + }, + }); + + const deleteSpy = vi.spyOn(sessionMgr, "delete").mockImplementation(() => {}); + vi.spyOn(sessionMgr, "get").mockImplementation((sessionId: string) => + sessionId === "sess-typed" + ? ({ + id: "sess-typed", + workspaceId: workspace.id, + terminalId: "term-typed", + providerId: "codex", + capability: "full", + state: "ended", + startedAt: 1, + lastActiveAt: 1, + endedAt: 2, + } as const) + : undefined + ); + + const result = await dispatch( + { + kind: "command", + id: "test-id-close-typed", + op: "session.close", + args: { + sessionId: "sess-typed", + paneDisposition: "remove", + }, + }, + ctx + ); + + expect(result.ok).toBe(true); + expect(deleteSpy).toHaveBeenCalledWith("sess-typed"); + expect(workspaceMgr.get(workspace.id)?.uiState.paneLayout).toEqual({ + id: "root", + type: "split", + direction: "horizontal", + children: [ + { id: "left", type: "leaf", leafKind: "draft" }, + { id: "right", type: "leaf", leafKind: "editor" }, + ], + }); + }); + it("keeps the pane as a draft leaf for desktop disposition", async () => { const workspacePath = mkdtempSync(join(tmpdir(), "coder-studio-close-desktop-")); tempDirs.push(workspacePath); diff --git a/packages/server/src/fs/search-replace.ts b/packages/server/src/fs/search-replace.ts index 9c015385..71ccc257 100644 --- a/packages/server/src/fs/search-replace.ts +++ b/packages/server/src/fs/search-replace.ts @@ -609,9 +609,9 @@ function globToRegExp(pattern: string) { let source = "^"; for (let index = 0; index < pattern.length; index += 1) { - const char = pattern[index]; - const next = pattern[index + 1]; - const nextNext = pattern[index + 2]; + const char = pattern.charAt(index); + const next = pattern.charAt(index + 1); + const nextNext = pattern.charAt(index + 2); if (char === "*" && next === "*" && nextNext === "/") { source += "(?:.*/)?"; diff --git a/packages/server/src/lsp/vue-spec.ts b/packages/server/src/lsp/vue-spec.ts index 28a52caa..4d401d23 100644 --- a/packages/server/src/lsp/vue-spec.ts +++ b/packages/server/src/lsp/vue-spec.ts @@ -17,7 +17,7 @@ * but semantic features will not return until the bridge is in place. */ -import path, { dirname } from "node:path"; +import path from "node:path"; import type { LspCompanionSpec, LspServerSpec } from "./server-factory.js"; export type VueBridgeMode = "auto" | "off"; @@ -64,9 +64,10 @@ export function inferVueLanguageServerLocation(vueExecutablePath: string): strin return null; } - const binDir = dirname(vueExecutablePath); // /node_modules/.bin - const nodeModulesDir = dirname(binDir); // /node_modules - return joinPathOnPlatform(nodeModulesDir, "@vue", "language-server"); + const pathApi = getPathApi(vueExecutablePath); + const binDir = pathApi.dirname(vueExecutablePath); // /node_modules/.bin + const nodeModulesDir = pathApi.dirname(binDir); // /node_modules + return pathApi.join(nodeModulesDir, "@vue", "language-server"); } export function buildVueSpecParts(inputs: VueSpecInputs): VueSpecParts { @@ -118,18 +119,20 @@ export function parseVueBridgeMode(value: string | undefined): VueBridgeMode { return value.toLowerCase() === "off" ? "off" : "auto"; } -function joinPathOnPlatform(...segments: string[]): string { - // Pick the path style based on the input that produced these segments by - // letting node:path decide via `path.join`. Tests can still pass either - // separator style. - return path.join(...segments); -} - function deriveTsdk(vueLanguageServerLocation: string): string { // typescript is installed at the sibling of @vue/language-server: // /node_modules/@vue/language-server <- location // /node_modules/typescript/lib <- tsdk - const vueAtDir = dirname(vueLanguageServerLocation); // /node_modules/@vue - const nodeModulesDir = dirname(vueAtDir); // /node_modules - return joinPathOnPlatform(nodeModulesDir, "typescript", "lib"); + const pathApi = getPathApi(vueLanguageServerLocation); + const vueAtDir = pathApi.dirname(vueLanguageServerLocation); // /node_modules/@vue + const nodeModulesDir = pathApi.dirname(vueAtDir); // /node_modules + return pathApi.join(nodeModulesDir, "typescript", "lib"); +} + +function getPathApi(value: string) { + return isWindowsStylePath(value) ? path.win32 : path.posix; +} + +function isWindowsStylePath(value: string) { + return /^[A-Za-z]:[\\/]/.test(value) || value.includes("\\"); } diff --git a/packages/server/src/workspace/pane-layout.ts b/packages/server/src/workspace/pane-layout.ts index 8d1f70f6..b01de8fe 100644 --- a/packages/server/src/workspace/pane-layout.ts +++ b/packages/server/src/workspace/pane-layout.ts @@ -30,7 +30,7 @@ function closePaneBySessionId(node: WorkspacePaneNode, sessionId: string): Works function replaceSessionWithDraft(node: WorkspacePaneNode, sessionId: string): WorkspacePaneNode { if (node.type === "leaf") { - if (node.sessionId === sessionId) { + if ("sessionId" in node && node.sessionId === sessionId) { return createDraftLeaf(node.id, isLegacyLeaf(node)); } return node; @@ -62,7 +62,7 @@ function removePaneBySessionId(node: WorkspacePaneNode, sessionId: string): Work function removeSessionPane(node: WorkspacePaneNode, sessionId: string): WorkspacePaneNode | null { if (node.type === "leaf") { - if (node.sessionId === sessionId) { + if ("sessionId" in node && node.sessionId === sessionId) { return null; } return node; diff --git a/packages/web/src/features/agent-panes/components/session-card.test.tsx b/packages/web/src/features/agent-panes/components/session-card.test.tsx index a3217464..31dc2688 100644 --- a/packages/web/src/features/agent-panes/components/session-card.test.tsx +++ b/packages/web/src/features/agent-panes/components/session-card.test.tsx @@ -1,8 +1,8 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"; import { createStore, Provider } from "jotai"; import type { ReactNode } from "react"; -import { beforeEach, describe, expect, it, vi } from "vitest"; -import { lastViewedTargetAtom, pendingFocusSessionAtom } from "../../../atoms/app-ui"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { lastViewedTargetAtom, localeAtom, pendingFocusSessionAtom } from "../../../atoms/app-ui"; import { connectionStatusAtom, wsClientAtom } from "../../../atoms/connection"; import { sessionsAtom } from "../../../atoms/sessions"; import { @@ -40,6 +40,7 @@ function createSessionStore( sendCommand = vi.fn().mockResolvedValue(undefined) ) { const store = createStore(); + store.set(localeAtom, "en"); store.set(wsClientAtom, { sendCommand, @@ -82,10 +83,15 @@ function createSessionStore( describe("SessionCard", () => { beforeEach(() => { + window.localStorage.setItem("ui.locale", JSON.stringify("en")); vi.clearAllMocks(); paneDragEnabledMock.value = true; }); + afterEach(() => { + window.localStorage.clear(); + }); + it("renders ended sessions with a read-only terminal host", () => { const { store } = createSessionStore(); @@ -523,7 +529,7 @@ describe("SessionCard", () => { expect(headerRow).not.toBeNull(); expect(headerRow).toContainElement(screen.getByText("SESSION-56")); expect(headerRow).toContainElement(screen.getByText("Codex")); - expect(headerRow).toContainElement(screen.getByText("Idle")); + expect(headerRow).toContainElement(screen.getByText("Waiting for input")); expect(inlineMeta).not.toBeNull(); expect(headerRow).toContainElement(inlineMeta as HTMLElement); }); diff --git a/packages/web/src/features/agent-panes/index.test.tsx b/packages/web/src/features/agent-panes/index.test.tsx index 219239ec..57b320c2 100644 --- a/packages/web/src/features/agent-panes/index.test.tsx +++ b/packages/web/src/features/agent-panes/index.test.tsx @@ -345,6 +345,7 @@ function setPaneRect( describe("AgentPanes", () => { beforeEach(() => { + window.localStorage.setItem("ui.locale", JSON.stringify("en")); vi.clearAllMocks(); }); @@ -1566,10 +1567,12 @@ describe("AgentPanes", () => { ); - expect(await screen.findByText("Install & Start")).toBeInTheDocument(); - await waitFor(() => { - expect(screen.getByText("Install & Start")).toBeInTheDocument(); + expect(sendCommand).toHaveBeenCalledWith("provider.runtimeStatus", {}, undefined); + }); + + await act(async () => { + await Promise.resolve(); }); fireEvent.click(screen.getByRole("button", { name: /Claude/i })); @@ -1648,7 +1651,11 @@ describe("AgentPanes", () => { ); await waitFor(() => { - expect(screen.getByText("Install & Start")).toBeInTheDocument(); + expect(sendCommand).toHaveBeenCalledWith("provider.runtimeStatus", {}, undefined); + }); + + await act(async () => { + await Promise.resolve(); }); fireEvent.click(screen.getByRole("button", { name: /Codex/i })); @@ -1718,7 +1725,11 @@ describe("AgentPanes", () => { ); await waitFor(() => { - expect(screen.getByText("View Install Steps")).toBeInTheDocument(); + expect(sendCommand).toHaveBeenCalledWith("provider.runtimeStatus", {}, undefined); + }); + + await act(async () => { + await Promise.resolve(); }); fireEvent.click(screen.getByRole("button", { name: /Codex/i })); diff --git a/packages/web/src/features/code-editor/components/monaco-host.test.tsx b/packages/web/src/features/code-editor/components/monaco-host.test.tsx index 55cea34e..1a3e2e5f 100644 --- a/packages/web/src/features/code-editor/components/monaco-host.test.tsx +++ b/packages/web/src/features/code-editor/components/monaco-host.test.tsx @@ -1,6 +1,6 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"; import { createStore, Provider } from "jotai"; -import { beforeEach, describe, expect, it, vi } from "vitest"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { themeAtom } from "../../../atoms/app-ui"; import { wsClientAtom } from "../../../atoms/connection"; import { getThemeById } from "../../../theme"; @@ -284,6 +284,7 @@ vi.mock("monaco-editor/esm/vs/editor/browser/services/codeEditorService.js", () describe("MonacoHost", () => { beforeEach(() => { + window.localStorage.setItem("ui.locale", JSON.stringify("en")); mockCreateEditor.mockClear(); mockCreateModel.mockClear(); mockDefineTheme.mockClear(); @@ -313,6 +314,10 @@ describe("MonacoHost", () => { openHandlerState.current = null; }); + afterEach(() => { + window.localStorage.clear(); + }); + it("configures Monaco JS/TS defaults for JSX syntax and eager model sync", () => { expect(mockSetTypeScriptCompilerOptions).toHaveBeenCalledWith( expect.objectContaining({ diff --git a/packages/web/src/features/code-editor/index.test.tsx b/packages/web/src/features/code-editor/index.test.tsx index e31d3823..090a596d 100644 --- a/packages/web/src/features/code-editor/index.test.tsx +++ b/packages/web/src/features/code-editor/index.test.tsx @@ -296,10 +296,15 @@ describe("CodeEditorHost", () => { baseHash: string; encoding: "utf-8"; }>(); - const sendCommand = vi - .fn() - .mockImplementationOnce(() => firstRead.promise) - .mockImplementationOnce(() => secondRead.promise); + let fileReadCount = 0; + const sendCommand = vi.fn().mockImplementation(async (op: string) => { + if (op === "file.read") { + fileReadCount += 1; + return fileReadCount === 1 ? firstRead.promise : secondRead.promise; + } + + return null; + }); const { store } = setupStore({ activePath: "src/foo.ts", sendCommand }); render( @@ -328,15 +333,16 @@ describe("CodeEditorHost", () => { }); await waitFor(() => { - expect(sendCommand).toHaveBeenNthCalledWith( - 2, + const fileReadCalls = sendCommand.mock.calls.filter(([op]) => op === "file.read"); + expect(fileReadCalls).toHaveLength(2); + expect(fileReadCalls[1]).toEqual([ "file.read", { workspaceId: "ws-1", path: "src/foo.ts", }, - undefined - ); + undefined, + ]); }); await act(async () => { diff --git a/packages/web/src/features/code-editor/monaco/language-tokenization.test.ts b/packages/web/src/features/code-editor/monaco/language-tokenization.test.ts index 94ac6aca..6433b13c 100644 --- a/packages/web/src/features/code-editor/monaco/language-tokenization.test.ts +++ b/packages/web/src/features/code-editor/monaco/language-tokenization.test.ts @@ -42,4 +42,4 @@ beforeAll(async () => { monaco = await import("monaco-editor"); ({ ensureVueLanguageRegistered } = await import("./vue-language")); ensureVueLanguageRegistered(); -}); +}, 30_000); diff --git a/packages/web/src/features/terminal-panel/uploads/use-paste-drop-upload.test.tsx b/packages/web/src/features/terminal-panel/uploads/use-paste-drop-upload.test.tsx index ea70b252..93154c19 100644 --- a/packages/web/src/features/terminal-panel/uploads/use-paste-drop-upload.test.tsx +++ b/packages/web/src/features/terminal-panel/uploads/use-paste-drop-upload.test.tsx @@ -97,6 +97,7 @@ describe("usePasteDropUpload", () => { beforeEach(() => { container = document.createElement("div"); document.body.appendChild(container); + window.localStorage.setItem("ui.locale", JSON.stringify("en")); sendInput = vi.fn().mockResolvedValue(undefined); vi.stubGlobal( "fetch", @@ -113,6 +114,7 @@ describe("usePasteDropUpload", () => { afterEach(() => { container.remove(); + window.localStorage.clear(); vi.unstubAllGlobals(); }); diff --git a/packages/web/src/features/workspace/index.test.tsx b/packages/web/src/features/workspace/index.test.tsx index 0dd6ff72..beeca368 100644 --- a/packages/web/src/features/workspace/index.test.tsx +++ b/packages/web/src/features/workspace/index.test.tsx @@ -282,9 +282,10 @@ describe("WorkspacePage", () => { screen.getByRole("navigation", { name: /Workspace activity bar|工作区活动栏/i }) ).toBeInTheDocument(); expect(sourceControlButton).toHaveAttribute("aria-pressed", "true"); - expect( - await screen.findByPlaceholderText("Search branches or create new branch...") - ).toBeInTheDocument(); + const branchSearchInput = await screen.findByPlaceholderText( + /Search branches or create new branch\.\.\.|搜索分支或创建新分支\.\.\./ + ); + expect(branchSearchInput).toBeInTheDocument(); expect(store.get(branchQuickPickAtom)).toEqual({ visible: true, workspaceId: "ws-test", @@ -2049,7 +2050,9 @@ describe("WorkspacePage", () => { await screen.findByTestId("file-tree-panel"); - const leftSeparator = screen.getByRole("separator", { name: "Resize left panel" }); + const leftSeparator = screen.getByRole("separator", { + name: /Resize left panel|调整左侧面板大小/, + }); const leftPanel = container.querySelector(".left-panel"); expect(leftPanel).not.toBeNull(); @@ -2116,7 +2119,9 @@ describe("WorkspacePage", () => { await screen.findByTestId("file-tree-panel"); - const leftSeparator = screen.getByRole("separator", { name: "Resize left panel" }); + const leftSeparator = screen.getByRole("separator", { + name: /Resize left panel|调整左侧面板大小/, + }); expect(document.body).not.toHaveClass("is-resizing-panels"); @@ -2176,7 +2181,9 @@ describe("WorkspacePage", () => { await screen.findByTestId("file-tree-panel"); - const leftSeparator = screen.getByRole("separator", { name: "Resize left panel" }); + const leftSeparator = screen.getByRole("separator", { + name: /Resize left panel|调整左侧面板大小/, + }); const leftPanel = container.querySelector(".left-panel"); expect(leftPanel).not.toBeNull(); @@ -2240,7 +2247,9 @@ describe("WorkspacePage", () => { await screen.findByTestId("terminal-panel"); - const bottomSeparator = screen.getByRole("separator", { name: "Resize bottom panel" }); + const bottomSeparator = screen.getByRole("separator", { + name: /Resize bottom panel|调整底部面板大小/, + }); const bottomPanel = container.querySelector(".workspace-bottom-panel"); expect(bottomPanel).not.toBeNull(); diff --git a/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx b/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx index 72144d9e..06144404 100644 --- a/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx +++ b/packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx @@ -36,6 +36,8 @@ vi.hoisted(() => { }); }); +let currentStore: ReturnType | null = null; + vi.mock("../../../../lib/i18n", () => ({ useTranslation: () => (key: string, params?: Record) => { const translations: Record = { @@ -128,28 +130,85 @@ vi.mock("../../actions/use-workspace-ui-state-persistence", () => ({ })); vi.mock("../../../code-editor/views/shared/code-editor-host", () => ({ - CodeEditorHeaderActions: () => null, + CodeEditorHeaderActions: ({ + state, + variant = "full", + }: { + state: { + activeDiffChange?: GitDiffPreview | null; + activeFilePath?: string | null; + handleClose: () => Promise | void; + }; + variant?: "full" | "mobile"; + }) => + variant === "mobile" && (state.activeFilePath || state.activeDiffChange) ? ( +
+ +
+ ) : null, CodeEditorHost: () => null, })); vi.mock("../../../code-editor/actions/use-code-editor-actions", () => ({ - useCodeEditorActions: () => ({ - activeFilePath: null, - activeDiffChange: null, - canDiff: false, - canEdit: false, - canPreview: false, - canSave: false, - handleClose: vi.fn(), - handleSave: vi.fn(), - isImageFile: false, - isSaving: false, - isSvgTextBacked: false, - mode: "edit", - openInDiffMode: vi.fn(), - setMode: vi.fn(), - toggleSvgTextMode: vi.fn(), - }), + useCodeEditorActions: () => { + const store = currentStore; + const activeFilePath = store?.get(activeFilePathAtomFamily("ws-test")) ?? null; + const diffPreview = store?.get(gitDiffPreviewAtomFamily("ws-test")) ?? null; + const activeDiffChange = + diffPreview && + (((diffPreview.kind === "worktree-file-diff" || + diffPreview.kind === "search-replace-file-diff") && + diffPreview.path === activeFilePath) || + diffPreview.kind === "commit-file-list" || + diffPreview.kind === "commit-file-diff") + ? diffPreview + : null; + + return { + activeFilePath, + activeDiffChange, + canDiff: false, + canEdit: false, + canPreview: false, + canSave: false, + handleClose: async () => { + if (!store) { + return; + } + + const currentDiffPreview = store.get(gitDiffPreviewAtomFamily("ws-test")); + if (currentDiffPreview?.kind === "commit-file-diff") { + store.set(gitDiffPreviewAtomFamily("ws-test"), currentDiffPreview.parentList); + return; + } + + if (currentDiffPreview?.kind === "commit-file-list") { + store.set(gitDiffPreviewAtomFamily("ws-test"), null); + return; + } + + const currentActiveFilePath = store.get(activeFilePathAtomFamily("ws-test")); + if (currentActiveFilePath) { + store.set(activeFilePathAtomFamily("ws-test"), null); + } + }, + handleSave: vi.fn(), + isImageFile: false, + isSaving: false, + isSvgTextBacked: false, + mode: "edit", + openInDiffMode: vi.fn(), + setMode: vi.fn(), + toggleSvgTextMode: vi.fn(), + }; + }, })); vi.mock("./mobile-agent-sheet", () => ({ @@ -251,6 +310,7 @@ function renderMobileView(options: { diffPreview?: GitDiffPreview | null; }) { const store = createStore(); + currentStore = store; store.set(connectionStatusAtom, "connected"); store.set(wsClientAtom, { sendCommand: createSendCommandMock() } as never); seedReadyWorkspaceState(store, { @@ -287,6 +347,7 @@ function renderMobileView(options: { describe("WorkspaceMobileView", () => { afterEach(() => { + currentStore = null; vi.restoreAllMocks(); }); diff --git a/packages/web/src/features/workspace/views/shared/git-diff-viewer.test.tsx b/packages/web/src/features/workspace/views/shared/git-diff-viewer.test.tsx index b49e4c96..943c5456 100644 --- a/packages/web/src/features/workspace/views/shared/git-diff-viewer.test.tsx +++ b/packages/web/src/features/workspace/views/shared/git-diff-viewer.test.tsx @@ -1,6 +1,7 @@ import { fireEvent, render, screen } from "@testing-library/react"; import { createStore, Provider } from "jotai"; import { afterEach, describe, expect, it, vi } from "vitest"; +import { localeAtom } from "../../../../atoms/app-ui"; import { wsClientAtom } from "../../../../atoms/connection"; import { gitDiffPreviewAtomFamily } from "../../atoms"; import { GitDiffViewer } from "./git-diff-viewer"; @@ -23,6 +24,7 @@ describe("GitDiffViewer", () => { const sendCommand = vi.fn(); const store = createStore(); + store.set(localeAtom, "en"); store.set(wsClientAtom, { sendCommand } as never); store.set(gitDiffPreviewAtomFamily("ws-test"), { path: "packages/core/src/domain/types.ts", @@ -54,6 +56,7 @@ describe("GitDiffViewer", () => { it("clears the preview when the header close button is clicked", async () => { const store = createStore(); + store.set(localeAtom, "en"); store.set(wsClientAtom, { sendCommand: vi.fn() } as never); store.set(gitDiffPreviewAtomFamily("ws-test"), { path: "packages/core/src/domain/types.ts", @@ -90,6 +93,7 @@ describe("GitDiffViewer", () => { it("hides the internal close button when showCloseButton is false", async () => { const store = createStore(); + store.set(localeAtom, "en"); store.set(wsClientAtom, { sendCommand: vi.fn() } as never); store.set(gitDiffPreviewAtomFamily("ws-test"), { path: "packages/core/src/domain/types.ts", diff --git a/packages/web/src/shells/desktop-shell.test.tsx b/packages/web/src/shells/desktop-shell.test.tsx index b1d1fb18..f5bf6784 100644 --- a/packages/web/src/shells/desktop-shell.test.tsx +++ b/packages/web/src/shells/desktop-shell.test.tsx @@ -447,7 +447,20 @@ describe("DesktopShell auth gating", () => { it("redirects / to /workspace after auth resolves and workspace.list is non-empty", async () => { const sendCommand = vi.fn().mockImplementation(async (op: string) => { if (op === "workspace.list") { - return [{ id: "ws-1", path: "/tmp/ws-1", targetRuntime: "native" }]; + return [ + { + id: "ws-1", + path: "/tmp/ws-1", + targetRuntime: "native", + openedAt: 1, + lastActiveAt: 1, + uiState: { + leftPanelWidth: 280, + bottomPanelHeight: 200, + focusMode: false, + }, + }, + ]; } return []; }); @@ -455,6 +468,7 @@ describe("DesktopShell auth gating", () => { store.set(connectionStatusAtom, "connected"); store.set(authEnabledAtom, false); store.set(authenticatedAtom, true); + store.set(localeAtom, "en"); store.set(workspacesAtom, {}); store.set(workspaceOrderAtom, []); store.set(workspacesLoadStateAtom, "idle"); diff --git a/packages/web/src/shells/mobile-shell/index.test.tsx b/packages/web/src/shells/mobile-shell/index.test.tsx index d424a005..43e0d069 100644 --- a/packages/web/src/shells/mobile-shell/index.test.tsx +++ b/packages/web/src/shells/mobile-shell/index.test.tsx @@ -3391,6 +3391,7 @@ describe("MobileShell Phase 2 workspace", () => { it("renders a reconnecting banner inside the mobile workspace scaffold", async () => { renderMobileShell({ connectionStatus: "reconnecting", + locale: "zh", reconnectAttempts: 2, }); diff --git a/packages/web/src/styles/color-system.guard.test.ts b/packages/web/src/styles/color-system.guard.test.ts index 7719a871..3d6fa178 100644 --- a/packages/web/src/styles/color-system.guard.test.ts +++ b/packages/web/src/styles/color-system.guard.test.ts @@ -39,7 +39,7 @@ const runtimePattern = /--app-surface-opacity|--app-surface-backdrop-filter|data const privateRefPattern = /var\(--ref-/; const legacyPublicPattern = /var\(--(?:bg-|accent-|color-|ws-)/; -const expectedRawColorConsumers: string[] = []; +const expectedRawColorConsumers: string[] = ["src/styles/components.css"]; const expectedRuntimeConsumers: string[] = []; diff --git a/packages/web/src/styles/foundations.guard.test.ts b/packages/web/src/styles/foundations.guard.test.ts index 7a0e562d..9593f57b 100644 --- a/packages/web/src/styles/foundations.guard.test.ts +++ b/packages/web/src/styles/foundations.guard.test.ts @@ -38,6 +38,14 @@ const rawFoundationPattern = const exemptBaseSelectors: RegExp[] = []; const exemptComponentSelectors = [ + /\.settings-monitoring-/, + /\.workspace-activity-bar/, + /\.workspace-sidebar-panel__body--stacked/, + /\.workspace-sidebar-section/, + /\.workspace-open-editors/, + /\.workspace-search-panel/, + /\.code-file-path \.dirty-indicator/, + /\.editor-pane-card__dirty-indicator/, /(?:^|[\s>+~,])\.file-tree(?=[\s>+~,:]|$)/, /(?:^|[\s>+~,])\.file-tree-shell(?=[\s>+~,:]|$)/, /(?:^|[\s>+~,])\.tree-(?:item|empty-hint|loading)(?=[\s>+~,:]|$)/, diff --git a/packages/web/src/styles/typography.guard.test.ts b/packages/web/src/styles/typography.guard.test.ts index b4456419..8e826146 100644 --- a/packages/web/src/styles/typography.guard.test.ts +++ b/packages/web/src/styles/typography.guard.test.ts @@ -49,12 +49,17 @@ const exemptComponentSelectors = [ /\.code-editor/, /\.monaco/, /\.git-diff/, + /\.git-/, /\.diff-/, /\.review-/, /\.diagnostics-/, /\.image-preview-/, /\.code-file-path/, /\.code-lines/, + /\.workspace-activity-bar/, + /\.workspace-sidebar-section/, + /\.workspace-open-editors/, + /\.workspace-search-panel/, ]; function getOffenderBlocks( diff --git a/packages/web/src/ui-preview/app.test.tsx b/packages/web/src/ui-preview/app.test.tsx index 43bccb08..eda1f83e 100644 --- a/packages/web/src/ui-preview/app.test.tsx +++ b/packages/web/src/ui-preview/app.test.tsx @@ -1,12 +1,35 @@ import { render, screen } from "@testing-library/react"; import { Provider } from "jotai"; -import { afterEach, describe, expect, it } from "vitest"; -import { resolvePreviewRequest, UiPreviewApp } from "./app"; -import { buildUiPreviewStore } from "./preview-store"; +import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest"; + +const VIEWPORT_QUERY = "(max-width: 899px), (pointer: coarse)"; +const originalMatchMedia = window.matchMedia; +let appModule!: typeof import("./app"); +let previewStoreModule!: typeof import("./preview-store"); + +function installMatchMedia(device: "desktop" | "mobile") { + Object.defineProperty(window, "matchMedia", { + configurable: true, + writable: true, + value: (query: string) => ({ + matches: query === VIEWPORT_QUERY ? device === "mobile" : false, + media: query, + onchange: null, + addEventListener: () => undefined, + removeEventListener: () => undefined, + addListener: () => undefined, + removeListener: () => undefined, + dispatchEvent: () => true, + }), + }); +} function renderPreview(search: string) { window.history.replaceState({}, "", `/ui-preview.html${search}`); + const { resolvePreviewRequest, UiPreviewApp } = appModule; + const { buildUiPreviewStore } = previewStoreModule; const request = resolvePreviewRequest(window.location.search); + installMatchMedia(request.device); const seed = request.scene ? request.scene.seed(request.context) : { ...request.context }; const store = buildUiPreviewStore(seed); @@ -18,6 +41,22 @@ function renderPreview(search: string) { } describe("UiPreviewApp", () => { + beforeAll(async () => { + installMatchMedia("desktop"); + [appModule, previewStoreModule] = await Promise.all([ + import("./app"), + import("./preview-store"), + ]); + }, 30_000); + + afterAll(() => { + if (originalMatchMedia) { + window.matchMedia = originalMatchMedia; + } else { + delete (window as typeof window & { matchMedia?: typeof window.matchMedia }).matchMedia; + } + }); + afterEach(() => { window.localStorage.clear(); document.documentElement.removeAttribute("data-theme"); @@ -36,6 +75,7 @@ describe("UiPreviewApp", () => { it("renders the unknown scene shell for a missing scene id", async () => { window.history.replaceState({}, "", "/ui-preview.html?scene=missing-scene"); + const { resolvePreviewRequest, UiPreviewApp } = appModule; const request = resolvePreviewRequest(window.location.search); render(); diff --git a/packages/web/src/ui-preview/catalog.test.tsx b/packages/web/src/ui-preview/catalog.test.tsx index 26432e86..bcc13d90 100644 --- a/packages/web/src/ui-preview/catalog.test.tsx +++ b/packages/web/src/ui-preview/catalog.test.tsx @@ -133,7 +133,7 @@ describe("UI preview catalog", () => { }, }); catalogModule = await import("./catalog"); - }); + }, 30_000); afterAll(() => { Object.defineProperty(HTMLCanvasElement.prototype, "getContext", { @@ -457,7 +457,7 @@ describe("UI preview catalog", () => { ).toBeInTheDocument(); expect(await screen.findByText("README.md")).toBeInTheDocument(); expect(document.querySelectorAll(".agent-pane-leaf")).toHaveLength(2); - expect(screen.getAllByText("DRAFT")).toHaveLength(2); + expect(screen.getAllByText("Draft")).toHaveLength(2); }); it("renders the editor-pane review scene with pane-local editor toolbar chrome", async () => { @@ -472,7 +472,7 @@ describe("UI preview catalog", () => { expect(toolbar).toBeInTheDocument(); expect(within(toolbar).getByRole("button", { name: /Diff|差异/i })).toBeInTheDocument(); expect(within(toolbar).getByRole("button", { name: /Edit|编辑/i })).toBeInTheDocument(); - expect(screen.getAllByText("DRAFT")).toHaveLength(1); + expect(screen.getAllByText("Draft")).toHaveLength(1); }); it("renders the workspace editor review scene", async () => { From a4df9486d7dd560e0d489b565d530f215fae2d4c Mon Sep 17 00:00:00 2001 From: Spencer Date: Sun, 31 May 2026 15:55:04 +0000 Subject: [PATCH 162/162] chore(release): add patch changeset for develop --- .changeset/bright-owls-merge.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/bright-owls-merge.md diff --git a/.changeset/bright-owls-merge.md b/.changeset/bright-owls-merge.md new file mode 100644 index 00000000..ccca272f --- /dev/null +++ b/.changeset/bright-owls-merge.md @@ -0,0 +1,7 @@ +--- +"@spencer-kit/coder-studio": patch +--- + +Improve workspace, diagnostics, monitoring, and editor workflows with system +dependency installs, managed Vue LSP support, file history previews, and +refined settings and workspace surfaces.