Improve git state sync and auto-fetch

Author: pallyoung

docs/help/desktop-guide.md

@@ -88,6 +88,26 @@
 
 切换到 Git 标签可以看到当前分支名称和文件变更列表。文件前面的图标表示状态（新增、修改、删除等）。
 
+### 获取远程分支
+
+左侧面板标题里的分支名按钮会打开分支选择器，显示本地分支和远程分支。状态栏里的 **Fetch** 按钮会立即执行一次远程 `git fetch`，并刷新分支列表。
+
+当页面处于前台、且当前工作区正显示在界面上时，Coder Studio 还会为这个活动工作区周期性执行远程 fetch，用来让分支选择器里的远程分支保持最新。
+
+#### 高级：调整自动 fetch 周期
+
+高级设置键 `git.autofetchPeriodSec` 控制活动工作区的周期性远程 fetch，默认值是 `180` 秒；设为 `0` 会关闭周期性 fetch，但不会影响打开工作区时的自动 fetch，也不会影响手动点击 **Fetch**。
+
+当前设置页还没有这个高级键的图形化入口。如需手动调整，可以直接写入本地运行时数据库的 `user_settings` 表。默认数据库通常位于 `~/.coder-studio/data/coder-studio.db`；如果你通过 `coder-studio config --data-dir ...` 改过数据目录，请使用你自己的数据库路径。
+
+```bash
+sqlite3 ~/.coder-studio/data/coder-studio.db "
+INSERT INTO user_settings (key, value)
+VALUES ('git.autofetchPeriodSec', '60')
+ON CONFLICT(key) DO UPDATE SET value = excluded.value;
+"
+```
+
 ### 查看变更内容
 
 点击 Git 列表中的某个文件，中央区域会显示差异视图。

e2e/fixtures/seed-git-auto-fetch-db.ts

@@ -0,0 +1,103 @@
+import { execFileSync } from "node:child_process";
+import { mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { closeDatabase, openDatabase } from "../../packages/server/src/storage/db.ts";
+
+const WORKSPACE_ID = "ws-git-auto-fetch";
+const AUTO_FETCH_PERIOD_SEC = 1;
+const WORKSPACE_DIR_NAME = "git-auto-fetch-workspace";
+const REMOTE_DIR_NAME = "git-auto-fetch-remote.git";
+const CONTRIBUTOR_DIR_NAME = "git-auto-fetch-contributor";
+
+const [, , dbPath, workspacesRoot] = process.argv;
+
+if (!dbPath || !workspacesRoot) {
+  throw new Error("Usage: tsx seed-git-auto-fetch-db.ts <db-path> <workspaces-root>");
+}
+
+const sandboxRoot = dirname(dbPath);
+const remotePath = join(sandboxRoot, REMOTE_DIR_NAME);
+const contributorPath = join(sandboxRoot, CONTRIBUTOR_DIR_NAME);
+
+mkdirSync(dirname(dbPath), { recursive: true });
+mkdirSync(workspacesRoot, { recursive: true });
+rmSync(dbPath, { force: true });
+rmSync(remotePath, { recursive: true, force: true });
+rmSync(contributorPath, { recursive: true, force: true });
+
+const runGit = (args: string[], cwd: string) => {
+  execFileSync("git", args, {
+    cwd,
+    env: {
+      ...process.env,
+      GIT_AUTHOR_NAME: "Coder Studio E2E",
+      GIT_AUTHOR_EMAIL: "e2e@coder-studio.test",
+      GIT_COMMITTER_NAME: "Coder Studio E2E",
+      GIT_COMMITTER_EMAIL: "e2e@coder-studio.test",
+    },
+    stdio: "pipe",
+  });
+};
+
+const createWorkspaceDir = (dirName: string): string => {
+  const workspacePath = join(workspacesRoot, dirName);
+  rmSync(workspacePath, { recursive: true, force: true });
+  mkdirSync(workspacePath, { recursive: true });
+  mkdirSync(join(workspacePath, "src"), { recursive: true });
+  writeFileSync(join(workspacePath, "README.md"), `# ${dirName}\n`);
+  writeFileSync(join(workspacePath, "src", "index.ts"), "export const ready = true;\n");
+
+  runGit(["init", "--initial-branch=main"], workspacePath);
+  runGit(["add", "."], workspacePath);
+  runGit(["commit", "-m", "init"], workspacePath);
+
+  return workspacePath;
+};
+
+const workspacePath = createWorkspaceDir(WORKSPACE_DIR_NAME);
+runGit(["init", "--bare", remotePath], sandboxRoot);
+runGit(["remote", "add", "origin", remotePath], workspacePath);
+runGit(["push", "-u", "origin", "main"], workspacePath);
+runGit(["clone", remotePath, contributorPath], sandboxRoot);
+runGit(["config", "user.name", "Coder Studio E2E"], contributorPath);
+runGit(["config", "user.email", "e2e@coder-studio.test"], contributorPath);
+
+const db = openDatabase(dbPath);
+const now = Date.now();
+
+try {
+  db.prepare(
+    `INSERT INTO workspaces (id, path, target_runtime, wsl_distro, opened_at, last_active_at, ui_state)
+     VALUES (?, ?, ?, ?, ?, ?, ?)`
+  ).run(
+    WORKSPACE_ID,
+    workspacePath,
+    "native",
+    null,
+    now - 10_000,
+    now,
+    JSON.stringify({
+      leftPanelWidth: 280,
+      bottomPanelHeight: 200,
+      focusMode: false,
+    })
+  );
+
+  db.prepare("INSERT INTO user_settings (key, value) VALUES (?, ?)").run(
+    "git.autofetchPeriodSec",
+    JSON.stringify(AUTO_FETCH_PERIOD_SEC)
+  );
+
+  console.log(
+    JSON.stringify({
+      dbPath,
+      workspaceId: WORKSPACE_ID,
+      workspacePath,
+      remotePath,
+      contributorPath,
+      autoFetchPeriodSec: AUTO_FETCH_PERIOD_SEC,
+    })
+  );
+} finally {
+  closeDatabase(db);
+}

e2e/specs/git-auto-fetch.spec.ts

@@ -0,0 +1,225 @@
+import { type ChildProcess, spawn, spawnSync } from "node:child_process";
+import { existsSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { expect, test } from "@playwright/test";
+
+const HOST = "127.0.0.1";
+const SERVER_PORT = 43185;
+const WEB_PORT = 53185;
+const BACKEND_HTTP_URL = `http://${HOST}:${SERVER_PORT}`;
+const BASE_URL = `http://${HOST}:${WEB_PORT}`;
+const REMOTE_BRANCH_NAME = "feature/auto-fetch-remote";
+const REMOTE_BRANCH_REF = `origin/${REMOTE_BRANCH_NAME}`;
+
+let sandboxDir: string;
+let dbPath: string;
+let runtimeDir: string;
+let workspacesRoot: string;
+let contributorDir: string;
+let backendProcess: ChildProcess | undefined;
+let webProcess: ChildProcess | undefined;
+
+const startProcess = (
+  command: string,
+  args: string[],
+  options: {
+    cwd: string;
+    env?: NodeJS.ProcessEnv;
+  }
+): ChildProcess => {
+  const child = spawn(command, args, {
+    cwd: options.cwd,
+    env: {
+      ...process.env,
+      ...options.env,
+    },
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+
+  child.stdout?.on("data", () => {});
+  child.stderr?.on("data", () => {});
+  child.on("error", (error) => {
+    throw error;
+  });
+
+  return child;
+};
+
+const waitForHttp = async (url: string, timeoutMs = 30000): Promise<void> => {
+  const start = Date.now();
+
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const response = await fetch(url);
+      if (response.ok) {
+        return;
+      }
+    } catch {
+      // keep polling
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+
+  throw new Error(`Timed out waiting for ${url}`);
+};
+
+const runGit = (args: string[], cwd: string) => {
+  const result = spawnSyncSafe("git", args, cwd);
+  if (result.status !== 0) {
+    throw new Error(result.stderr || `git ${args.join(" ")} failed`);
+  }
+};
+
+const spawnSyncSafe = (command: string, args: string[], cwd: string) => {
+  return spawnSync(command, args, {
+    cwd,
+    env: {
+      ...process.env,
+      GIT_AUTHOR_NAME: "Coder Studio E2E",
+      GIT_AUTHOR_EMAIL: "e2e@coder-studio.test",
+      GIT_COMMITTER_NAME: "Coder Studio E2E",
+      GIT_COMMITTER_EMAIL: "e2e@coder-studio.test",
+    },
+    encoding: "utf8",
+  });
+};
+
+const pushRemoteBranch = () => {
+  if (!existsSync(join(contributorDir, ".git"))) {
+    throw new Error(`Contributor repo missing at ${contributorDir}`);
+  }
+
+  writeFileSync(join(contributorDir, "feature.txt"), "feature\n");
+  runGit(["checkout", "-b", REMOTE_BRANCH_NAME], contributorDir);
+  runGit(["add", "."], contributorDir);
+  runGit(["commit", "-m", "add remote branch"], contributorDir);
+  runGit(["push", "-u", "origin", REMOTE_BRANCH_NAME], contributorDir);
+};
+
+test.describe("git auto-fetch acceptance", () => {
+  test.beforeAll(async () => {
+    sandboxDir = mkdtempSync(join(tmpdir(), "coder-studio-git-auto-fetch-e2e-"));
+    dbPath = join(sandboxDir, "coder-studio.db");
+    runtimeDir = join(sandboxDir, "runtime");
+    workspacesRoot = join(sandboxDir, "workspaces");
+    contributorDir = join(sandboxDir, "git-auto-fetch-contributor");
+
+    mkdirSync(runtimeDir, { recursive: true });
+    mkdirSync(workspacesRoot, { recursive: true });
+
+    const seed = spawn(
+      "pnpm",
+      ["exec", "tsx", "e2e/fixtures/seed-git-auto-fetch-db.ts", dbPath, workspacesRoot],
+      {
+        cwd: "/home/spencer/workspace/coder-studio",
+        env: process.env,
+        stdio: ["ignore", "pipe", "pipe"],
+      }
+    );
+
+    await new Promise<void>((resolve, reject) => {
+      let stderr = "";
+      seed.stderr?.on("data", (chunk) => {
+        stderr += chunk.toString();
+      });
+      seed.on("exit", (code) => {
+        if (code === 0) {
+          resolve();
+          return;
+        }
+        reject(new Error(stderr || `seed exited with code ${code}`));
+      });
+      seed.on("error", reject);
+    });
+
+    backendProcess = startProcess("pnpm", ["exec", "tsx", "packages/server/src/server.ts"], {
+      cwd: "/home/spencer/workspace/coder-studio",
+      env: {
+        HOST,
+        PORT: String(SERVER_PORT),
+        DATA_DIR: dbPath,
+        RUNTIME_DIR: runtimeDir,
+        NO_AUTH: "true",
+      },
+    });
+
+    await waitForHttp(`${BACKEND_HTTP_URL}/healthz`);
+
+    webProcess = startProcess(
+      "pnpm",
+      ["exec", "vite", "--host", HOST, "--port", String(WEB_PORT)],
+      {
+        cwd: "/home/spencer/workspace/coder-studio/packages/web",
+        env: {
+          NODE_ENV: "development",
+          VITE_BACKEND_HTTP_URL: BACKEND_HTTP_URL,
+          VITE_BACKEND_WS_URL: `ws://${HOST}:${SERVER_PORT}/ws`,
+        },
+      }
+    );
+
+    await waitForHttp(`${BASE_URL}/`);
+  });
+
+  test.afterAll(async () => {
+    const kill = async (child: ChildProcess | undefined) => {
+      if (!child || child.killed) {
+        return;
+      }
+
+      child.kill("SIGTERM");
+      await new Promise((resolve) => child.once("exit", resolve));
+    };
+
+    await kill(webProcess);
+    await kill(backendProcess);
+    rmSync(sandboxDir, { recursive: true, force: true });
+  });
+
+  test.use({
+    baseURL: BASE_URL,
+  });
+
+  test("discovers a new remote branch via periodic auto-fetch and updates the manual fetch tooltip", async ({
+    page,
+  }) => {
+    await page.goto("/workspace");
+    await expect(page.getByTestId("workspace-resolving-shell")).toHaveCount(0, { timeout: 20000 });
+
+    const branchButton = page.getByRole("button", {
+      name: "Open branch switcher for main",
+    });
+    await expect(branchButton).toBeVisible({ timeout: 20000 });
+
+    await branchButton.click();
+    await expect(page.locator(".branch-quick-pick-overlay")).toBeVisible();
+    await expect(page.locator(".branch-quick-pick-name").filter({ hasText: /^main$/ })).toHaveCount(
+      1
+    );
+    await expect(
+      page
+        .locator(".branch-quick-pick-name")
+        .filter({ hasText: new RegExp(`^${REMOTE_BRANCH_REF}$`) })
+    ).toHaveCount(0);
+
+    pushRemoteBranch();
+
+    await expect(page.getByText(REMOTE_BRANCH_REF)).toBeVisible({ timeout: 15000 });
+
+    await page.keyboard.press("Escape");
+    await expect(page.locator(".branch-quick-pick-overlay")).toHaveCount(0);
+
+    const fetchButton = page.locator(".git-status-bar > button").first();
+    await expect(fetchButton).toHaveAttribute("title", /^(Never fetched|尚未获取)$/);
+
+    await fetchButton.click();
+
+    await expect
+      .poll(async () => await fetchButton.getAttribute("title"), {
+        timeout: 15000,
+      })
+      .toMatch(/^(Last fetched |上次获取于 )/);
+  });
+});