@chainingintention/pi-web-cn 2.0.0 → 2.202610.0

package/dist/pi-web-plugins/git/browser/git-panel.js

@@ -1,4 +1,5 @@
 // Generated from pi-web-plugins/git/browser/git-panel.ts. Do not edit directly.
+import { t } from "./i18n.js";
 import { GIT_DIFF_OPERATION, GIT_STATUS_OPERATION, parseGitDiffResponse, parseGitStatusResponse, } from "./git-contract.js";
 import { buildGitFileList } from "./gitFileList.js";
 import { buildGitFileTree, collectGitFileTreeDirectoryPaths } from "./gitFileTree.js";
@@ -7,19 +8,22 @@ import { createGitDiffRoute } from "./gitRoute.js";
 import { parseUnifiedDiff } from "./unifiedDiff.js";
 const GIT_PANEL_LOCAL_ID = "workspace.git";
 const GIT_POLL_INTERVAL_MS = 8_000;
+const LARGE_GIT_POLL_INTERVAL_MS = 30_000;
+const LARGE_GIT_FILE_COUNT = 1_000;
+const GIT_FILE_RENDER_BATCH = 500;
 // Keep navigation state for a few recent workspaces; heavy diff views are
 // released as soon as another machine/workspace becomes active.
 const GIT_WORKSPACE_STATE_LIMIT = 8;
 const activityElementTag = "pi-web-git-panel-activity";
 const EMPTY_LIST_MODEL = { submodules: [], files: [] };
 const EMPTY_VIEW_STATE = { nodes: [], listModel: EMPTY_LIST_MODEL, expandablePaths: [] };
-export function createGitBrowserContributions(sourcePluginId, runtimePluginId, html, svg) {
+export function createGitBrowserContributions(sourcePluginId, runtimePluginId, html, svg, stylesheetIntegration = () => undefined) {
     const panelId = `${runtimePluginId}:${GIT_PANEL_LOCAL_ID}`;
     const controller = new GitUiController(sourcePluginId, createGitDiffRoute(panelId));
     defineGitPanelActivityElement();
     return {
         actions: createGitActions(panelId, controller),
-        workspacePanels: [createGitPanel(html, svg, controller)],
+        workspacePanels: [createGitPanel(html, svg, controller, stylesheetIntegration)],
     };
 }
 class GitUiController {
@@ -34,8 +38,8 @@ class GitUiController {
         this.sourcePluginId = sourcePluginId;
         this.route = route;
     }
-    isOwnedWorkspace(workspace) {
-        return workspace?.provider?.pluginId === this.sourcePluginId;
+    canInspectWorkspace(workspace) {
+        return workspace !== undefined && (workspace.provider === undefined || workspace.provider.pluginId === this.sourcePluginId);
     }
     state(context) {
         return this.stateFor(context);
@@ -51,8 +55,8 @@ class GitUiController {
         this.synchronizeRoute(state, changedWorkspace);
         if (state.status === undefined && state.statusRequest === undefined)
             void this.refresh(context);
-        else if (state.selectedDiffPath !== undefined && (state.selectedDiff === undefined || state.selectedStagedDiff === undefined) && !state.diffLoading) {
-            if (state.status?.files.some((file) => file.path === state.selectedDiffPath) === true)
+        else if (state.status !== undefined && state.selectedDiffPath !== undefined && (state.selectedDiff === undefined || state.selectedStagedDiff === undefined) && !state.diffLoading) {
+            if (state.status.files.some((file) => file.path === state.selectedDiffPath))
                 void this.refreshDiff(state, state.selectedDiffPath, context);
             else
                 this.clearSelection(state, true);
@@ -70,37 +74,63 @@ class GitUiController {
         this.requestRender(this.stateFor(context));
     }
     poll(context) {
-        void this.refresh(context);
+        if (typeof document !== "undefined" && document.visibilityState !== "visible")
+            return;
+        const state = this.stateFor(context);
+        const interval = (state.status?.files.length ?? 0) > LARGE_GIT_FILE_COUNT ? LARGE_GIT_POLL_INTERVAL_MS : GIT_POLL_INTERVAL_MS;
+        if (Date.now() - state.lastStatusRefreshAt < interval)
+            return;
+        void this.refresh(context, false);
     }
     invalidate(context) {
-        if (!this.isOwnedWorkspace(context.workspace))
+        if (!this.canInspectWorkspace(context.workspace))
             return Promise.resolve();
         const state = this.stateFor(context);
         state.stale = state.status !== undefined;
         this.requestRender(state);
         return this.refresh(context);
     }
-    refresh(context) {
+    refresh(context, force = true) {
         const state = this.stateFor(context);
-        if (state.statusRequest !== undefined)
+        const background = !force;
+        if (state.statusRequest !== undefined) {
+            if (!background && !state.statusLoading) {
+                state.statusLoading = true;
+                this.requestRender(state);
+            }
             return state.statusRequest;
-        state.statusLoading = true;
-        this.requestRender(state);
-        const request = requestGitBackend(context, GIT_STATUS_OPERATION, null)
+        }
+        const previousStatus = state.status;
+        const previousError = state.error;
+        const previousStale = state.stale;
+        const previousPath = state.selectedDiffPath;
+        const showLoading = !background || state.status === undefined;
+        if (showLoading) {
+            state.statusLoading = true;
+            this.requestRender(state);
+        }
+        state.lastStatusRefreshAt = Date.now();
+        const request = requestGitBackend(context, GIT_STATUS_OPERATION, force ? { refresh: true } : null)
             .then(parseGitStatusResponse)
             .then(async (status) => {
             if (!state.retained)
                 return;
-            state.status = state.status?.hash === status.hash ? state.status : status;
+            if (state.status?.hash !== status.hash) {
+                state.status = status;
+                state.visibleFileLimit = GIT_FILE_RENDER_BATCH;
+                revealSelectedFile(state, this.view);
+            }
             state.stale = false;
-            state.error = undefined;
             const path = state.selectedDiffPath;
-            if (path === undefined)
-                return;
-            if (!status.files.some((file) => file.path === path))
-                this.clearSelection(state, true);
-            else if (this.connectedWorkspaceKey === workspaceContextKey(context))
-                await this.refreshDiff(state, path, context);
+            if (path !== undefined && status.files.some((file) => file.path === path)
+                && this.connectedWorkspaceKey === workspaceContextKey(context)) {
+                await this.refreshDiff(state, path, context, background);
+            }
+            else {
+                state.error = undefined;
+                if (path !== undefined && !status.files.some((file) => file.path === path))
+                    this.clearSelection(state, true);
+            }
         })
             .catch((error) => {
             if (state.retained)
@@ -110,8 +140,11 @@ class GitUiController {
             if (state.statusRequest !== request)
                 return;
             state.statusRequest = undefined;
+            const wasLoading = state.statusLoading;
             state.statusLoading = false;
-            this.requestRender(state);
+            if (wasLoading || previousStatus !== state.status || previousError !== state.error
+                || previousStale !== state.stale || previousPath !== state.selectedDiffPath)
+                this.requestRender(state);
         });
         state.statusRequest = request;
         return request;
@@ -119,6 +152,7 @@ class GitUiController {
     selectDiff(context, path) {
         const state = this.stateFor(context);
         state.selectedDiffPath = path;
+        revealSelectedFile(state, this.view);
         state.selectedDiff = undefined;
         state.selectedStagedDiff = undefined;
         state.diffLoading = true;
@@ -144,12 +178,18 @@ class GitUiController {
     }
     viewState(state) {
         const cached = state.viewStateCache;
-        if (cached !== undefined && cached.status === state.status && cached.view === this.view)
+        if (cached !== undefined && cached.status === state.status && cached.view === this.view && cached.visibleFileLimit === state.visibleFileLimit)
             return cached.viewState;
         const viewState = buildViewState(state.status, this.view);
-        state.viewStateCache = { status: state.status, view: this.view, viewState };
+        state.viewStateCache = { status: state.status, view: this.view, viewState, visibleFileLimit: state.visibleFileLimit };
         return viewState;
     }
+    showMore(context) {
+        const state = this.stateFor(context);
+        state.visibleFileLimit += GIT_FILE_RENDER_BATCH;
+        state.viewStateCache = undefined;
+        this.requestRender(state);
+    }
     toggleDirectory(context, path) {
         const state = this.stateFor(context);
         const next = new Set(state.expandedDirectories);
@@ -191,6 +231,10 @@ class GitUiController {
             statusRequest: undefined,
             diffRequestSequence: 0,
             viewStateCache: undefined,
+            visibleFileLimit: GIT_FILE_RENDER_BATCH,
+            remainingRows: GIT_FILE_RENDER_BATCH,
+            hasMoreRows: false,
+            lastStatusRefreshAt: 0,
         };
         this.states.set(key, created);
         return created;
@@ -237,6 +281,7 @@ class GitUiController {
         if (state.selectedDiffPath === path)
             return;
         state.selectedDiffPath = path;
+        revealSelectedFile(state, this.view);
         state.selectedDiff = undefined;
         state.selectedStagedDiff = undefined;
         state.diffLoading = false;
@@ -248,11 +293,17 @@ class GitUiController {
             this.route.write(undefined, { replace: true });
         }
     }
-    async refreshDiff(state, path, context) {
+    async refreshDiff(state, path, context, background = false) {
         const sequence = state.diffRequestSequence + 1;
         state.diffRequestSequence = sequence;
-        state.diffLoading = true;
-        this.requestRender(state);
+        const previousDiff = state.selectedDiff;
+        const previousStagedDiff = state.selectedStagedDiff;
+        const previousError = state.error;
+        const showLoading = !background || previousDiff === undefined || previousStagedDiff === undefined;
+        if (showLoading) {
+            state.diffLoading = true;
+            this.requestRender(state);
+        }
         try {
             const [selectedDiff, selectedStagedDiff] = await Promise.all([
                 requestGitBackend(context, GIT_DIFF_OPERATION, { path }).then(parseGitDiffResponse),
@@ -271,8 +322,11 @@ class GitUiController {
         }
         finally {
             if (state.retained && state.diffRequestSequence === sequence && state.selectedDiffPath === path) {
+                const wasLoading = state.diffLoading;
                 state.diffLoading = false;
-                this.requestRender(state);
+                if (wasLoading || previousDiff !== state.selectedDiff || previousStagedDiff !== state.selectedStagedDiff
+                    || previousError !== state.error)
+                    this.requestRender(state);
             }
         }
     }
@@ -282,29 +336,29 @@ class GitUiController {
     }
 }
 function createGitActions(panelId, controller) {
-    const hasGitWorkspace = (context) => controller.isOwnedWorkspace(context.state.selectedWorkspace);
+    const hasGitWorkspace = (context) => controller.canInspectWorkspace(context.state.selectedWorkspace);
     return [
         {
             id: "view.git",
-            title: "转到 Git",
+            title: t("client.actions.go.to.git.0d4886", "Go to Git"),
             shortcut: "mod+3",
             shortcutAliases: ["core:view.git"],
-            group: "导航",
+            group: t("client.actions.navigation.e72622", "Navigation"),
             enabled: hasGitWorkspace,
-            run: (context) => { context.selectMainView(panelId); },
+            run: (context) => { context.selectWorkspaceTool(panelId); },
         },
         {
             id: "workspace.refresh-git",
-            title: "刷新 Git",
+            title: t("client.actions.refresh.git.496f8a", "Refresh Git"),
             shortcut: "mod+shift+g",
             shortcutAliases: ["core:workspace.refresh-git"],
-            group: "工作区",
+            group: t("bundled.workspace-tasks.workspace.379798", "Workspace"),
             enabled: hasGitWorkspace,
-            run: (context) => context.refreshWorkspacePanels?.(panelId),
+            run: (context) => context.refreshWorkspacePanels(panelId),
         },
     ];
 }
-function createGitPanel(html, svg, controller) {
+function createGitPanel(html, svg, controller, stylesheetIntegration) {
     return {
         id: GIT_PANEL_LOCAL_ID,
         title: "Git",
@@ -320,36 +374,38 @@ function createGitPanel(html, svg, controller) {
     `,
         order: 20,
         routeAliases: ["git", "core:workspace.git"],
-        visible: (context) => controller.isOwnedWorkspace(context.workspace),
+        navigationAliases: ["core:workspace.git"],
+        visible: (context) => controller.canInspectWorkspace(context.workspace),
         onInvalidate: (context) => controller.invalidate(context),
-        render: (context) => renderGitPanel(html, controller, context),
+        render: (context) => renderGitPanel(html, controller, context, stylesheetIntegration()),
     };
 }
 function requestGitBackend(context, operation, input) {
-    if (context.backend === undefined || context.workspace.provider?.capabilities.request === false) {
-        return Promise.reject(new Error("Git 工作区后端不可用。请更新并重启此机器上的 PI WEB，然后重新加载浏览器。"));
+    if (context.peer?.request === undefined) {
+        return Promise.reject(new Error(t("ui.main.fc3b27465765", "Git workspace backend is unavailable. Update and restart PI WEB on this machine, then reload the browser.")));
     }
-    return context.backend.request(operation, input);
+    return context.peer.request(operation, input);
 }
-function renderGitPanel(html, controller, context) {
+function renderGitPanel(html, controller, context, stylesheetIntegration) {
     const state = controller.state(context);
     const viewState = controller.viewState(state);
     return html `
     <section class="git-panel">
-      <style .textContent=${gitPanelStyles}></style>
-      <pi-web-git-panel-activity .controller=${controller} .context=${context}></pi-web-git-panel-activity>
-      <section class="git-toolbar">
+      <style data-git-styles .textContent=${gitPanelStyles}></style>
+      <pi-web-git-panel-activity .stylesheetIntegration=${stylesheetIntegration} .controller=${controller} .context=${context}></pi-web-git-panel-activity>
+      <section class="ui-toolbar git-toolbar">
         <strong>Git</strong>
-        ${state.stale ? html `<span class="git-stale">数据已过期</span>` : null}
-        <div class="git-toolbar-actions">
+        ${state.stale ? html `<span class="git-stale">${t("ui.main.3468df3f1fe9", "stale")}</span>` : null}
+        <div class="ui-toolbar-group git-toolbar-actions">
           ${viewState.expandablePaths.length === 0 ? null : renderExpandCollapseAll(html, controller, context, state, viewState.expandablePaths)}
           ${renderViewToggle(html, controller, context)}
-          <button type="button" ?disabled=${state.statusLoading} @click=${() => { void controller.refresh(context); }}>刷新</button>
+          <button class="ui-button" type="button" ?disabled=${state.statusLoading} @click=${() => { void controller.refresh(context); }}>${t("bundled.relays.refresh.aee887", "Refresh")}</button>
         </div>
       </section>
       ${state.error === undefined ? null : html `<div class="git-error" role="alert">${state.error}</div>`}
+      ${state.status?.truncated === true ? html `<div class="git-warning" role="status">${t("ui.main.1634590c49b8", "Git status output was too large; the file list was truncated.")}</div>` : null}
       <section class="git-split">
-        <div class="git-file-list">${renderFileList(html, controller, context, state, viewState)}</div>
+        <div class="ui-file-list git-file-list">${renderFileList(html, controller, context, state, viewState)}</div>
         <div class="git-viewer">${renderDiffViewer(html, state)}</div>
       </section>
     </section>
@@ -357,33 +413,39 @@ function renderGitPanel(html, controller, context) {
 }
 function renderViewToggle(html, controller, context) {
     return html `
-    <div class="git-view-toggle" role="group" aria-label="已更改文件视图">
-      ${renderViewToggleButton(html, controller, context, "list", "列表")}
-      ${renderViewToggleButton(html, controller, context, "tree", "树形")}
+    <div class="ui-toolbar-group git-view-toggle" role="group" aria-label="${t("ui.main.898449210b9d", "Changed files view")}">
+      ${renderViewToggleButton(html, controller, context, "list", t("ui.workspaceGitPanel.list", "List"))}
+      ${renderViewToggleButton(html, controller, context, "tree", t("ui.main.7f32c63d2d35", "Tree"))}
     </div>
   `;
 }
 function renderViewToggleButton(html, controller, context, view, label) {
     const active = controller.currentView() === view;
-    return html `<button type="button" class=${active ? "is-selected" : ""} aria-pressed=${String(active)} @click=${() => { controller.setView(context, view); }}>${label}</button>`;
+    return html `<button type="button" class="ui-button" aria-pressed=${String(active)} @click=${() => { controller.setView(context, view); }}>${label}</button>`;
 }
 function renderExpandCollapseAll(html, controller, context, state, expandablePaths) {
     const allExpanded = expandablePaths.every((path) => state.expandedDirectories.has(path));
-    return html `<button type="button" @click=${() => { controller.toggleExpandAll(context, expandablePaths, allExpanded); }}>${allExpanded ? "全部折叠" : "全部展开"}</button>`;
+    return html `<button class="ui-button" type="button" @click=${() => { controller.toggleExpandAll(context, expandablePaths, allExpanded); }}>${allExpanded ? t("ui.workspaceGitPanel.collapseAll", "Collapse all") : t("ui.workspaceGitPanel.expandAll", "Expand all")}</button>`;
 }
 function renderFileList(html, controller, context, state, viewState) {
     const status = state.status;
     if (status === undefined)
-        return html `<p class="git-muted">${state.error === undefined ? "正在加载状态…" : "状态不可用。"}</p>`;
+        return html `<p class="git-muted">${state.error === undefined ? t("ui.main.f2cb84a98270", "Loading status…") : t("ui.main.d2302e08b20b", "Status unavailable.")}</p>`;
     if (!status.isGitRepo)
-        return html `<p class="git-muted">当前工作区不是 Git 仓库。</p>`;
+        return html `<p class="git-muted">${t("ui.main.b4b1ea928fc3", "Not a git repository.")}</p>`;
     const summary = html `<p class="git-summary">${gitSummary(status)}</p>`;
     if (status.files.length === 0)
-        return html `${summary}<p class="git-muted">没有更改。</p>`;
+        return html `${summary}<p class="git-muted">${t("ui.workspaceGitPanel.noChanges", "No changes.")}</p>`;
+    state.remainingRows = state.visibleFileLimit;
+    state.hasMoreRows = status.files.length > state.visibleFileLimit;
     const body = controller.currentView() === "tree"
         ? viewState.nodes.map((node) => renderTreeNode(html, controller, context, state, node, 0))
         : renderListBody(html, controller, context, state, viewState.listModel);
-    return html `${summary}${body}`;
+    const rendered = Math.min(state.visibleFileLimit, status.files.length);
+    const more = state.hasMoreRows || rendered < status.files.length
+        ? html `<button type="button" class="git-load-more" @click=${() => { controller.showMore(context); }}>${t("ui.main.34f2d3bdae3d", "Show more (")}${String(rendered)}/${String(status.files.length)}）</button>`
+        : null;
+    return html `${summary}${body}${more}`;
 }
 function renderListBody(html, controller, context, state, model) {
     return html `
@@ -392,11 +454,13 @@ function renderListBody(html, controller, context, state, model) {
   `;
 }
 function renderSubmoduleGroup(html, controller, context, state, group) {
+    if (!consumeGitRow(state))
+        return html ``;
     const expanded = state.expandedDirectories.has(group.path);
     return html `
-    <button type="button" class="git-row" style="--depth:0" aria-expanded=${String(expanded)} @click=${() => { controller.toggleDirectory(context, group.path); }}>
-      <span class="git-twisty">${expanded ? "▾" : "▸"}</span>
-      <span>${group.name}${submoduleBadge(html)}</span>
+    <button type="button" class="ui-button ui-file-row" style="--depth:0" title=${group.path} aria-expanded=${String(expanded)} @click=${() => { controller.toggleDirectory(context, group.path); }}>
+      <span class="ui-file-leading" aria-hidden="true">${expanded ? "▾" : "▸"}</span>
+      <span class="ui-file-label">${group.name}${submoduleBadge(html)}</span>
     </button>
     ${expanded ? html `
       ${group.pointer === undefined ? null : renderSelectableRow(html, controller, context, state, group.path, group.pointer.name, group.pointer.file, 1)}
@@ -409,11 +473,13 @@ function renderSubmoduleFileRow(html, controller, context, state, entry) {
 }
 function renderTreeNode(html, controller, context, state, node, depth) {
     if (node.kind === "directory") {
+        if (!consumeGitRow(state))
+            return html ``;
         const expanded = state.expandedDirectories.has(node.path);
         return html `
-      <button type="button" class="git-row" style=${`--depth:${String(depth)}`} aria-expanded=${String(expanded)} @click=${() => { controller.toggleDirectory(context, node.path); }}>
-        <span class="git-twisty">${expanded ? "▾" : "▸"}</span>
-        <span>${node.name}${node.isSubmodule === true ? submoduleBadge(html) : null}</span>
+      <button type="button" class="ui-button ui-file-row" style=${`--depth:${String(depth)}`} title=${node.path} aria-expanded=${String(expanded)} @click=${() => { controller.toggleDirectory(context, node.path); }}>
+        <span class="ui-file-leading" aria-hidden="true">${expanded ? "▾" : "▸"}</span>
+        <span class="ui-file-label">${node.name}${node.isSubmodule === true ? submoduleBadge(html) : null}</span>
       </button>
       ${expanded ? node.children.map((child) => renderTreeNode(html, controller, context, state, child, depth + 1)) : null}
     `;
@@ -424,35 +490,46 @@ function renderFileRow(html, controller, context, state, file) {
     return renderSelectableRow(html, controller, context, state, file.path, file.path, file, 0);
 }
 function renderSelectableRow(html, controller, context, state, path, label, file, depth) {
+    if (!consumeGitRow(state))
+        return html ``;
     const selected = state.selectedDiffPath === path;
     return html `
-    <button type="button" class=${selected ? "git-row is-selected" : "git-row"} style=${`--depth:${String(depth)}`} @click=${() => { controller.selectDiff(context, path); }}>
-      <span>${stateLabel(file.index, file.workingTree)}</span>
-      <span>${label}</span>
+    <button type="button" class=${selected ? "ui-button ui-file-row selected" : "ui-button ui-file-row"} style=${`--depth:${String(depth)}`} title=${path} aria-current=${selected ? "page" : "false"} @click=${() => { controller.selectDiff(context, path); }}>
+      <span class="ui-file-leading" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path><path d="M14 2v6h6"></path></svg></span>
+      <span class="ui-file-label">${label}</span>
+      <span class="ui-file-meta">${stateLabel(file.index, file.workingTree)}</span>
     </button>
   `;
 }
 function renderDiffViewer(html, state) {
     if (state.selectedDiffPath === undefined)
-        return html `<p class="git-muted">请选择一个已更改文件。</p>`;
+        return html `<p class="git-muted">${t("ui.main.77ed4aee3792", "Select a changed file.")}</p>`;
     const unstaged = state.selectedDiff;
     const staged = state.selectedStagedDiff;
     if (unstaged === undefined || staged === undefined)
-        return html `<p class="git-muted">正在加载差异…</p>`;
+        return html `<p class="git-muted">${t("ui.workspaceGitPanel.loadingDiff", "Loading diff…")}</p>`;
     const diffs = [staged, unstaged].filter((diff) => diff.response.diff !== "");
     if (diffs.length === 0)
-        return html `<p class="git-muted">没有已暂存或未暂存的差异。</p>`;
+        return html `<p class="git-muted">${t("ui.workspaceGitPanel.noStagedOrUnstagedDiff", "No staged or unstaged diff.")}</p>`;
     return html `<div class=${diffs.length === 1 ? "git-diffs is-single" : "git-diffs"}>${diffs.map((diff) => renderDiffSection(html, diff))}</div>`;
 }
+function consumeGitRow(state) {
+    if (state.remainingRows > 0) {
+        state.remainingRows -= 1;
+        return true;
+    }
+    state.hasMoreRows = true;
+    return false;
+}
 function renderDiffSection(html, view) {
     const diff = view.response;
     const lines = view.lines ??= parseUnifiedDiff(diff.diff);
     return html `
     <section class="git-diff-section">
-      <div class="git-viewer-header"><strong>${diff.path ?? "差异"}</strong><small>${diff.staged ? "已暂存" : "未暂存"}${diff.truncated ? " · 已截断" : ""}</small></div>
-      ${lines.length === 0 ? html `<p class="git-muted">没有差异。</p>` : html `
+      <div class="git-viewer-header"><strong>${diff.path ?? t("ui.workspaceGitPanel.diff", "Diff")}</strong><small>${diff.staged ? t("ui.workspaceGitPanel.staged", "Staged") : t("ui.workspaceGitPanel.unstaged", "Unstaged")}${diff.truncated ? t("ui.workspaceGitPanel.truncated", " · Truncated") : ""}</small></div>
+      ${lines.length === 0 ? html `<p class="git-muted">${t("ui.unifiedDiffViewer.noDiff", "No diff.")}</p>` : html `
         <div class="git-diff-scroller">
-          <div class="git-diff-grid" role="table" aria-label="统一差异">
+          <div class="git-diff-grid" role="table" aria-label="${t("ui.unifiedDiffViewer.unifiedDiff", "Unified diff")}">
             ${lines.map((line) => renderDiffLine(html, line))}
           </div>
         </div>
@@ -476,13 +553,38 @@ function renderDiffSpans(html, spans) {
 function buildViewState(status, view) {
     if (status === undefined || !status.isGitRepo || status.files.length === 0)
         return EMPTY_VIEW_STATE;
+    const visibleStatus = status;
     if (view === "tree") {
-        const nodes = buildGitFileTree(status.files, status.submodules);
+        const nodes = buildGitFileTree(visibleStatus.files, visibleStatus.submodules);
         return { nodes, listModel: EMPTY_LIST_MODEL, expandablePaths: collectGitFileTreeDirectoryPaths(nodes) };
     }
-    const listModel = buildGitFileList(status.files, status.submodules);
+    const listModel = buildGitFileList(visibleStatus.files, visibleStatus.submodules);
     return { nodes: [], listModel, expandablePaths: listModel.submodules.map((group) => group.path) };
 }
+function revealSelectedFile(state, view) {
+    const path = state.selectedDiffPath;
+    if (path === undefined || state.status === undefined)
+        return;
+    let selectedRow = state.status.files.findIndex((file) => file.path === path) + state.status.submodules.length + 1;
+    if (view === "tree") {
+        const nodes = buildGitFileTree(state.status.files, state.status.submodules);
+        for (const directory of collectGitFileTreeDirectoryPaths(nodes))
+            if (path.startsWith(`${directory}/`))
+                state.expandedDirectories.add(directory);
+        let row = 0;
+        const visit = (children) => {
+            for (const node of children) {
+                row += 1;
+                if (node.path === path)
+                    selectedRow = row;
+                if (node.kind === "directory" && state.expandedDirectories.has(node.path))
+                    visit(node.children);
+            }
+        };
+        visit(nodes);
+    }
+    state.visibleFileLimit = Math.max(state.visibleFileLimit, Math.ceil(selectedRow / GIT_FILE_RENDER_BATCH) * GIT_FILE_RENDER_BATCH);
+}
 function defineGitPanelActivityElement() {
     if (typeof customElements === "undefined" || typeof HTMLElement === "undefined" || customElements.get(activityElementTag) !== undefined)
         return;
@@ -490,6 +592,24 @@ function defineGitPanelActivityElement() {
         controllerValue;
         contextValue;
         pollTimer;
+        integration;
+        releaseStyles;
+        set stylesheetIntegration(value) {
+            if (this.integration === value)
+                return;
+            this.releaseStyles?.();
+            this.releaseStyles = undefined;
+            this.integration = value;
+            this.registerStyles();
+        }
+        registerStyles() {
+            if (!this.isConnected || this.releaseStyles !== undefined)
+                return;
+            const root = this.getRootNode();
+            // The activity element shares the host panel's root; it owns only this opt-in.
+            if (root instanceof ShadowRoot)
+                this.releaseStyles = this.integration?.registerRoot(root, { sharedUi: true });
+        }
         set controller(value) {
             if (this.controllerValue === value)
                 return;
@@ -503,18 +623,23 @@ function defineGitPanelActivityElement() {
                 this.restart();
         }
         connectedCallback() {
+            this.registerStyles();
             window.addEventListener("popstate", this.onPopState);
+            document.addEventListener("visibilitychange", this.onVisibilityChange);
             this.restart();
         }
         disconnectedCallback() {
+            this.releaseStyles?.();
+            this.releaseStyles = undefined;
             window.removeEventListener("popstate", this.onPopState);
+            document.removeEventListener("visibilitychange", this.onVisibilityChange);
             if (this.controllerValue !== undefined && this.contextValue !== undefined)
                 this.controllerValue.disconnect(this.contextValue);
             this.stopTimer();
         }
         restart() {
             this.stopTimer();
-            if (!this.isConnected || this.controllerValue === undefined || this.contextValue === undefined)
+            if (!this.isConnected || document.visibilityState !== "visible" || this.controllerValue === undefined || this.contextValue === undefined)
                 return;
             this.controllerValue.connect(this.contextValue);
             this.pollTimer = window.setInterval(() => {
@@ -531,14 +656,21 @@ function defineGitPanelActivityElement() {
             if (this.controllerValue !== undefined && this.contextValue !== undefined)
                 this.controllerValue.handlePopState(this.contextValue);
         };
+        onVisibilityChange = () => {
+            this.stopTimer();
+            if (document.visibilityState === "visible" && this.controllerValue !== undefined && this.contextValue !== undefined) {
+                this.restart();
+                void this.controllerValue.refresh(this.contextValue);
+            }
+        };
     }
     customElements.define(activityElementTag, GitPanelActivityElement);
 }
 function submoduleBadge(html) {
-    return html `<span class="submodule-badge">子模块</span>`;
+    return html `<span class="submodule-badge">${t("ui.workspaceGitPanel.submodule", "Submodule")}</span>`;
 }
 function gitSummary(status) {
-    const branch = status.branch ?? "游离 HEAD";
+    const branch = status.branch ?? t("ui.workspaceGitPanel.detachedHead", "Detached HEAD");
     const ahead = status.ahead ?? 0;
     const behind = status.behind ?? 0;
     return ahead === 0 && behind === 0 ? branch : `${branch} · ↑${String(ahead)} ↓${String(behind)}`;
@@ -551,10 +683,12 @@ function formatLineNumber(lineNumber) {
     return lineNumber === undefined ? "" : String(lineNumber);
 }
 function createDiffView(response, previous) {
-    return {
-        response,
-        lines: previous?.response.hash === response.hash ? previous.lines : undefined,
-    };
+    if (previous?.response.hash !== response.hash)
+        return { response, lines: undefined };
+    if (previous.response.path === response.path && previous.response.staged === response.staged
+        && previous.response.truncated === response.truncated)
+        return previous;
+    return { response, lines: previous.lines };
 }
 function workspaceContextKey(context) {
     return JSON.stringify([context.machine.id, context.workspace.projectId, context.workspace.id]);
@@ -563,28 +697,22 @@ function errorMessage(error) {
     return error instanceof Error ? error.message : String(error);
 }
 const gitPanelStyles = `
-  .git-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--pi-text); background: var(--pi-bg); font: 13px system-ui, sans-serif; }
+  .git-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--pi-text); background: var(--pi-bg); font: 13px var(--pi-font, system-ui, sans-serif); }
   .git-panel ${activityElementTag} { display: none; }
-  .git-panel button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--pi-border); border-radius: 7px; background: var(--pi-surface); color: var(--pi-text); padding: 5px 7px; cursor: pointer; }
-  .git-panel button:disabled { cursor: wait; opacity: .65; }
   .git-panel small, .git-panel .git-muted { color: var(--pi-muted); }
   .git-panel p { margin: 10px; }
-  .git-panel .git-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--pi-border-muted); }
-  .git-panel .git-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
-  .git-panel .git-view-toggle { display: inline-flex; }
-  .git-panel .git-view-toggle button { border-radius: 0; }
-  .git-panel .git-view-toggle button:first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
-  .git-panel .git-view-toggle button:last-child { margin-left: -1px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
-  .git-panel .git-view-toggle button.is-selected { position: relative; z-index: 1; border-color: var(--pi-accent); background: var(--pi-selection-bg); }
-  .git-panel .git-stale { border: 1px solid var(--pi-warning-border); border-radius: 999px; color: var(--pi-warning); padding: 1px 6px; font-size: 12px; }
+  .git-panel .git-toolbar { flex: 0 0 auto; border-bottom: 1px solid var(--pi-border-muted); font-size: 12px; color: var(--pi-muted); }
+  .git-panel .git-toolbar-actions { margin-left: auto; }
+  .git-panel .git-toolbar > strong { display: flex; align-items: center; padding-inline: 10px; font-weight: 500; }
+  .git-panel .git-toolbar .ui-button { white-space: nowrap; }
+  .git-panel .git-toolbar .ui-button[aria-pressed="true"] { background: var(--pi-surface-hover); color: var(--pi-text); }
+  .git-panel .git-stale { border: 1px solid var(--pi-warning-border); border-radius: 999px; color: var(--pi-warning); padding: 1px 6px; font-size: 12px; align-self: center; }
   .git-panel .git-error { flex: 0 0 auto; margin: 8px; border: 1px solid var(--pi-danger); border-radius: 7px; color: var(--pi-danger); padding: 8px; }
+  .git-panel .git-warning { flex: 0 0 auto; margin: 8px; border: 1px solid var(--pi-warning-border); border-radius: 7px; color: var(--pi-warning); padding: 8px; }
+  .git-panel .git-load-more { margin: 8px auto; }
   .git-panel .git-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(160px, 34%) minmax(0, 1fr); }
-  .git-panel .git-file-list { min-height: 0; overflow: auto; border-bottom: 1px solid var(--pi-border); padding: 6px; }
-  .git-panel .git-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px; width: 100%; border: 0; border-radius: 5px; background: transparent; text-align: left; padding: 4px 6px 4px calc(6px + var(--depth, 0) * 14px); }
-  .git-panel .git-row:hover, .git-panel .git-row.is-selected { background: var(--pi-selection-bg); }
-  .git-panel .git-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .git-panel .git-twisty { color: var(--pi-dim, var(--pi-muted)); }
-  .git-panel .git-summary { margin: 4px 6px 8px; color: var(--pi-muted); }
+  .git-panel .git-file-list { border-bottom: 1px solid var(--pi-border); }
+  .git-panel .git-summary { margin: 10px 12px 8px; color: var(--pi-muted); }
   .git-panel .submodule-badge { display: inline-block; margin-left: 6px; border: 1px solid var(--pi-border); border-radius: 999px; color: var(--pi-muted); padding: 0 5px; font-size: 11px; font-weight: 400; vertical-align: baseline; }
   .git-panel .git-viewer { min-height: 0; overflow: auto; display: flex; flex-direction: column; }
   .git-panel .git-diffs { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-rows: minmax(120px, 1fr) minmax(120px, 1fr); }
@@ -594,7 +722,7 @@ const gitPanelStyles = `
   .git-panel .git-viewer-header { position: sticky; top: 0; display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid var(--pi-border-muted); background: var(--pi-bg); }
   .git-panel .git-viewer-header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .git-panel .git-diff-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--pi-bg); }
-  .git-panel .git-diff-grid { display: grid; grid-template-columns: max-content max-content 2ch max-content; width: max-content; min-width: 100%; padding: 6px 0; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.45; }
+  .git-panel .git-diff-grid { display: grid; grid-template-columns: max-content max-content 2ch max-content; width: max-content; min-width: 100%; padding: 6px 0; font: 12px var(--pi-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); line-height: 1.45; }
   .git-panel .git-diff-line { display: contents; }
   .git-panel .git-diff-cell { min-height: 1.45em; white-space: pre; }
   .git-panel .git-line-number { min-width: 4ch; padding: 0 8px; border-right: 1px solid var(--pi-border-muted); color: var(--pi-dim); text-align: right; user-select: none; }

package/dist/pi-web-plugins/git/browser/i18n.js

@@ -0,0 +1,7 @@
+// Generated from pi-web-plugins/git/browser/i18n.ts. Do not edit directly.
+let translate;
+export function setTranslator(value) {
+    translate = value;
+}
+export const t = (key, fallback, params) => translate?.(key, fallback, params)
+    ?? fallback.replace(/\{([A-Za-z0-9_]+)\}/g, (match, name) => String(params?.[name] ?? match));