@chainingintention/pi-web-cn 2.202610.4 → 2.202611.1

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

@@ -1,11 +1,13 @@
 // 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 { defineGitFileIconElement } from "./gitFileIcon.js";
 import { buildGitFileList } from "./gitFileList.js";
 import { buildGitFileTree, collectGitFileTreeDirectoryPaths } from "./gitFileTree.js";
 import { readGitFileView, writeGitFileView } from "./gitFileViewPreference.js";
 import { createGitDiffRoute } from "./gitRoute.js";
 import { parseUnifiedDiff } from "./unifiedDiff.js";
+import definitions from "./git.messages.js";
 const GIT_PANEL_LOCAL_ID = "workspace.git";
 const GIT_POLL_INTERVAL_MS = 8_000;
 const LARGE_GIT_POLL_INTERVAL_MS = 30_000;
@@ -17,9 +19,10 @@ 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, stylesheetIntegration = () => undefined) {
+export function createGitBrowserContributions(sourcePluginId, runtimePluginId, html, svg, stylesheetIntegration, localization, fileIcons) {
     const panelId = `${runtimePluginId}:${GIT_PANEL_LOCAL_ID}`;
-    const controller = new GitUiController(sourcePluginId, createGitDiffRoute(panelId));
+    const controller = new GitUiController(sourcePluginId, createGitDiffRoute(panelId), localization, fileIcons);
+    defineGitFileIconElement();
     defineGitPanelActivityElement();
     return {
         actions: createGitActions(panelId, controller),
@@ -29,15 +32,22 @@ export function createGitBrowserContributions(sourcePluginId, runtimePluginId, h
 class GitUiController {
     sourcePluginId;
     route;
+    localization;
+    getFileIcons;
+    messages;
     states = new Map();
     activeWorkspaceKey;
     connectedWorkspaceKey;
     routeNavigationPending = true;
     view = readGitFileView();
-    constructor(sourcePluginId, route) {
+    constructor(sourcePluginId, route, localization, getFileIcons) {
         this.sourcePluginId = sourcePluginId;
         this.route = route;
+        this.localization = localization;
+        this.getFileIcons = getFileIcons;
+        this.messages = localization.registerMessages("panel", definitions);
     }
+    get fileIcons() { return this.getFileIcons(); }
     canInspectWorkspace(workspace) {
         return workspace !== undefined && (workspace.provider === undefined || workspace.provider.pluginId === this.sourcePluginId);
     }
@@ -134,7 +144,7 @@ class GitUiController {
         })
             .catch((error) => {
             if (state.retained)
-                state.error = errorMessage(error);
+                state.error = gitError(error);
         })
             .finally(() => {
             if (state.statusRequest !== request)
@@ -318,7 +328,7 @@ class GitUiController {
         catch (error) {
             if (!state.retained || state.diffRequestSequence !== sequence || state.selectedDiffPath !== path)
                 return;
-            state.error = errorMessage(error);
+            state.error = gitError(error);
         }
         finally {
             if (state.retained && state.diffRequestSequence === sequence && state.selectedDiffPath === path) {
@@ -340,19 +350,19 @@ function createGitActions(panelId, controller) {
     return [
         {
             id: "view.git",
-            title: t("client.actions.go.to.git.0d4886", "Go to Git"),
+            get title() { return controller.messages.t("goToGit"); },
             shortcut: "mod+3",
             shortcutAliases: ["core:view.git"],
-            group: t("client.actions.navigation.e72622", "Navigation"),
+            get group() { return controller.messages.t("navigation"); },
             enabled: hasGitWorkspace,
             run: (context) => { context.selectWorkspaceTool(panelId); },
         },
         {
             id: "workspace.refresh-git",
-            title: t("client.actions.refresh.git.496f8a", "Refresh Git"),
+            get title() { return controller.messages.t("refreshGit"); },
             shortcut: "mod+shift+g",
             shortcutAliases: ["core:workspace.refresh-git"],
-            group: t("bundled.workspace-tasks.workspace.379798", "Workspace"),
+            get group() { return controller.messages.t("workspace"); },
             enabled: hasGitWorkspace,
             run: (context) => context.refreshWorkspacePanels(panelId),
         },
@@ -361,7 +371,7 @@ function createGitActions(panelId, controller) {
 function createGitPanel(html, svg, controller, stylesheetIntegration) {
     return {
         id: GIT_PANEL_LOCAL_ID,
-        title: "Git",
+        get title() { return controller.messages.t("git"); },
         icon: svg `
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="6" cy="6" r="2"></circle>
@@ -382,7 +392,7 @@ function createGitPanel(html, svg, controller, stylesheetIntegration) {
 }
 function requestGitBackend(context, operation, input) {
     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 Promise.reject(new GitBackendUnavailableError());
     }
     return context.peer.request(operation, input);
 }
@@ -392,30 +402,30 @@ function renderGitPanel(html, controller, context, stylesheetIntegration) {
     return html `
     <section class="git-panel">
       <style data-git-styles .textContent=${gitPanelStyles}></style>
-      <pi-web-git-panel-activity .stylesheetIntegration=${stylesheetIntegration} .controller=${controller} .context=${context}></pi-web-git-panel-activity>
+      <pi-web-git-panel-activity .fileIcons=${controller.fileIcons} .stylesheetIntegration=${stylesheetIntegration} .localization=${controller.localization} .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">${t("ui.main.3468df3f1fe9", "stale")}</span>` : null}
+        <strong>${controller.messages.t("git")}</strong>
+        ${state.stale ? html `<span class="git-stale">${controller.messages.t("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 class="ui-button" type="button" ?disabled=${state.statusLoading} @click=${() => { void controller.refresh(context); }}>${t("bundled.relays.refresh.aee887", "Refresh")}</button>
+          <button type="button" class="ui-button" ?disabled=${state.statusLoading} @click=${() => { void controller.refresh(context); }}>${controller.messages.t("refresh")}</button>
         </div>
       </section>
-      ${state.error === undefined ? null : html `<div class="git-error" role="alert">${state.error}</div>`}
+      ${state.error === undefined ? null : html `<div class="git-error" role="alert">${controller.messages.t(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="ui-file-list git-file-list">${renderFileList(html, controller, context, state, viewState)}</div>
-        <div class="git-viewer">${renderDiffViewer(html, state)}</div>
+        <div class="git-viewer">${renderDiffViewer(html, state, controller)}</div>
       </section>
     </section>
   `;
 }
 function renderViewToggle(html, controller, context) {
     return html `
-    <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 class="ui-toolbar-group git-view-toggle" role="group" aria-label=${controller.messages.t("changedFilesView")}>
+      ${renderViewToggleButton(html, controller, context, "list", controller.messages.t("list"))}
+      ${renderViewToggleButton(html, controller, context, "tree", controller.messages.t("tree"))}
     </div>
   `;
 }
@@ -425,17 +435,17 @@ function renderViewToggleButton(html, controller, context, view, label) {
 }
 function renderExpandCollapseAll(html, controller, context, state, expandablePaths) {
     const allExpanded = expandablePaths.every((path) => state.expandedDirectories.has(path));
-    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>`;
+    return html `<button type="button" class="ui-button" @click=${() => { controller.toggleExpandAll(context, expandablePaths, allExpanded); }}>${controller.messages.t(allExpanded ? "collapseAll" : "expandAll")}</button>`;
 }
 function renderFileList(html, controller, context, state, viewState) {
     const status = state.status;
     if (status === undefined)
-        return html `<p class="git-muted">${state.error === undefined ? t("ui.main.f2cb84a98270", "Loading status…") : t("ui.main.d2302e08b20b", "Status unavailable.")}</p>`;
+        return html `<p class="git-muted">${controller.messages.t(state.error === undefined ? "loadingStatus" : "statusUnavailable")}</p>`;
     if (!status.isGitRepo)
-        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>`;
+        return html `<p class="git-muted">${controller.messages.t("notRepository")}</p>`;
+    const summary = html `<p class="git-summary">${gitSummary(html, status, controller)}</p>`;
     if (status.files.length === 0)
-        return html `${summary}<p class="git-muted">${t("ui.workspaceGitPanel.noChanges", "No changes.")}</p>`;
+        return html `${summary}<p class="git-muted">${controller.messages.t("noChanges")}</p>`;
     state.remainingRows = state.visibleFileLimit;
     state.hasMoreRows = status.files.length > state.visibleFileLimit;
     const body = controller.currentView() === "tree"
@@ -460,7 +470,7 @@ function renderSubmoduleGroup(html, controller, context, state, group) {
     return html `
     <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>
+      <span class="ui-file-label"><bdi dir="ltr">${group.name}</bdi>${submoduleBadge(html, controller)}</span>
     </button>
     ${expanded ? html `
       ${group.pointer === undefined ? null : renderSelectableRow(html, controller, context, state, group.path, group.pointer.name, group.pointer.file, 1)}
@@ -479,7 +489,7 @@ function renderTreeNode(html, controller, context, state, node, depth) {
         return html `
       <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>
+        <span class="ui-file-label"><bdi dir="ltr">${node.name}</bdi>${node.isSubmodule === true ? submoduleBadge(html, controller) : null}</span>
       </button>
       ${expanded ? node.children.map((child) => renderTreeNode(html, controller, context, state, child, depth + 1)) : null}
     `;
@@ -493,25 +503,38 @@ function renderSelectableRow(html, controller, context, state, path, label, file
     if (!consumeGitRow(state))
         return html ``;
     const selected = state.selectedDiffPath === path;
+    const status = file.index === "conflicted" || file.workingTree === "conflicted"
+        ? "conflicted" : file.workingTree !== "unmodified" ? file.workingTree : file.index;
+    const description = controller.messages.t("fileState", { state: status });
+    const staged = file.index !== "unmodified";
+    const unstaged = file.workingTree !== "unmodified";
+    const staging = status === "conflicted" || status === "untracked" || status === "ignored"
+        ? undefined : staged && unstaged ? "bothChanges" : staged ? "stagedChanges" : "unstagedChanges";
     return html `
-    <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 type="button" class=${selected ? "ui-button ui-file-row selected" : "ui-button ui-file-row"} data-git-state=${status} style=${`--depth:${String(depth)}`} title=${path} aria-current=${selected ? "page" : "false"} @click=${() => { controller.selectDiff(context, path); }}>
+      <span class="ui-file-leading" aria-hidden="true"><pi-web-git-file-icon .url=${controller.fileIcons?.resolveIcon(file.path)}></pi-web-git-file-icon></span>
+      <span class="ui-file-label"><bdi dir="ltr">${label}</bdi></span>
+      <span class="git-file-details">
+      ${staging === undefined ? null : html `<span class="git-staging" title=${controller.messages.t("stagingDetail", {
+        index: controller.messages.t("fileState", { state: file.index }),
+        workingTree: controller.messages.t("fileState", { state: file.workingTree }),
+    })}>${controller.messages.t(staging)}</span>`}
+      <span class="ui-file-meta git-status" title=${description} aria-label=${description}>${status === "conflicted" ? description : stateLabel(status)}</span>
+      </span>
     </button>
   `;
 }
-function renderDiffViewer(html, state) {
+function renderDiffViewer(html, state, controller) {
     if (state.selectedDiffPath === undefined)
-        return html `<p class="git-muted">${t("ui.main.77ed4aee3792", "Select a changed file.")}</p>`;
+        return html `<p class="git-muted">${controller.messages.t("selectFile")}</p>`;
     const unstaged = state.selectedDiff;
     const staged = state.selectedStagedDiff;
     if (unstaged === undefined || staged === undefined)
-        return html `<p class="git-muted">${t("ui.workspaceGitPanel.loadingDiff", "Loading diff…")}</p>`;
+        return html `<p class="git-muted">${controller.messages.t("loadingDiff")}</p>`;
     const diffs = [staged, unstaged].filter((diff) => diff.response.diff !== "");
     if (diffs.length === 0)
-        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>`;
+        return html `<p class="git-muted">${controller.messages.t("noStagedDiff")}</p>`;
+    return html `<div class=${diffs.length === 1 ? "git-diffs is-single" : "git-diffs"}>${diffs.map((diff) => renderDiffSection(html, diff, controller))}</div>`;
 }
 function consumeGitRow(state) {
     if (state.remainingRows > 0) {
@@ -521,27 +544,27 @@ function consumeGitRow(state) {
     state.hasMoreRows = true;
     return false;
 }
-function renderDiffSection(html, view) {
+function renderDiffSection(html, view, controller) {
     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 ?? 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-viewer-header"><strong><bdi dir="ltr">${diff.path ?? controller.messages.t("diff")}</bdi></strong><small>${controller.messages.t("diffState", { staged: diff.staged ? "yes" : "no", truncated: diff.truncated ? "yes" : "no" })}</small></div>
+      ${lines.length === 0 ? html `<p class="git-muted">${controller.messages.t("noDiff")}</p>` : html `
         <div class="git-diff-scroller">
-          <div class="git-diff-grid" role="table" aria-label="${t("ui.unifiedDiffViewer.unifiedDiff", "Unified diff")}">
-            ${lines.map((line) => renderDiffLine(html, line))}
+          <div class="git-diff-grid" role="table" aria-label=${controller.messages.t("unifiedDiff")} dir="ltr">
+            ${lines.map((line) => renderDiffLine(html, line, controller))}
           </div>
         </div>
       `}
     </section>
   `;
 }
-function renderDiffLine(html, line) {
+function renderDiffLine(html, line, controller) {
     return html `
     <div class="git-diff-line" role="row">
-      <span class=${`git-diff-cell git-line-number ${line.kind}`} role="cell">${formatLineNumber(line.oldLineNumber)}</span>
-      <span class=${`git-diff-cell git-line-number ${line.kind}`} role="cell">${formatLineNumber(line.newLineNumber)}</span>
+      <span class=${`git-diff-cell git-line-number ${line.kind}`} role="cell">${formatLineNumber(line.oldLineNumber, controller)}</span>
+      <span class=${`git-diff-cell git-line-number ${line.kind}`} role="cell">${formatLineNumber(line.newLineNumber, controller)}</span>
       <span class=${`git-diff-cell git-prefix ${line.kind}`} role="cell">${line.prefix}</span>
       <span class=${`git-diff-cell git-content ${line.kind}`} role="cell">${renderDiffSpans(html, line.spans)}</span>
     </div>
@@ -594,6 +617,36 @@ function defineGitPanelActivityElement() {
         pollTimer;
         integration;
         releaseStyles;
+        localizationValue;
+        releaseLocalization;
+        icons;
+        releaseIcons;
+        set fileIcons(value) {
+            if (value === this.icons)
+                return;
+            this.releaseIcons?.();
+            this.releaseIcons = undefined;
+            this.icons = value;
+            this.subscribeIcons();
+        }
+        subscribeIcons() {
+            if (!this.isConnected || this.releaseIcons !== undefined)
+                return;
+            this.releaseIcons = this.icons?.subscribe(() => this.contextValue?.host.requestRender());
+        }
+        set localization(value) {
+            if (this.localizationValue === value)
+                return;
+            this.releaseLocalization?.();
+            this.releaseLocalization = undefined;
+            this.localizationValue = value;
+            this.subscribeLocalization();
+        }
+        subscribeLocalization() {
+            if (!this.isConnected || this.releaseLocalization !== undefined)
+                return;
+            this.releaseLocalization = this.localizationValue?.subscribe(() => this.contextValue?.host.requestRender());
+        }
         set stylesheetIntegration(value) {
             if (this.integration === value)
                 return;
@@ -624,11 +677,18 @@ function defineGitPanelActivityElement() {
         }
         connectedCallback() {
             this.registerStyles();
+            this.subscribeLocalization();
+            this.subscribeIcons();
+            this.contextValue?.host.requestRender();
             window.addEventListener("popstate", this.onPopState);
             document.addEventListener("visibilitychange", this.onVisibilityChange);
             this.restart();
         }
         disconnectedCallback() {
+            this.releaseIcons?.();
+            this.releaseIcons = undefined;
+            this.releaseLocalization?.();
+            this.releaseLocalization = undefined;
             this.releaseStyles?.();
             this.releaseStyles = undefined;
             window.removeEventListener("popstate", this.onPopState);
@@ -666,21 +726,26 @@ function defineGitPanelActivityElement() {
     }
     customElements.define(activityElementTag, GitPanelActivityElement);
 }
-function submoduleBadge(html) {
-    return html `<span class="submodule-badge">${t("ui.workspaceGitPanel.submodule", "Submodule")}</span>`;
+function submoduleBadge(html, controller) {
+    return html `<span class="submodule-badge">${controller.messages.t("submodule")}</span>`;
 }
-function gitSummary(status) {
-    const branch = status.branch ?? t("ui.workspaceGitPanel.detachedHead", "Detached HEAD");
+function gitSummary(html, status, controller) {
+    const branch = status.branch ?? controller.messages.t("detached");
     const ahead = status.ahead ?? 0;
     const behind = status.behind ?? 0;
-    return ahead === 0 && behind === 0 ? branch : `${branch} · ↑${String(ahead)} ↓${String(behind)}`;
+    return ahead === 0 && behind === 0
+        ? html `<bdi dir="ltr">${branch}</bdi>`
+        : controller.messages.rich("branchSummary", { branch, ahead, behind, name: (parts) => html `<bdi dir="ltr">${parts}</bdi>` });
 }
-function stateLabel(index, workingTree) {
-    const label = workingTree !== "unmodified" ? workingTree : index;
-    return label.slice(0, 1).toUpperCase();
+function stateLabel(state) {
+    if (state === "untracked")
+        return "?";
+    if (state === "ignored")
+        return "!";
+    return state.slice(0, 1).toUpperCase();
 }
-function formatLineNumber(lineNumber) {
-    return lineNumber === undefined ? "" : String(lineNumber);
+function formatLineNumber(lineNumber, controller) {
+    return lineNumber === undefined ? "" : controller.localization.number(lineNumber, { useGrouping: false });
 }
 function createDiffView(response, previous) {
     if (previous?.response.hash !== response.hash)
@@ -693,16 +758,21 @@ function createDiffView(response, previous) {
 function workspaceContextKey(context) {
     return JSON.stringify([context.machine.id, context.workspace.projectId, context.workspace.id]);
 }
-function errorMessage(error) {
-    return error instanceof Error ? error.message : String(error);
+class GitBackendUnavailableError extends Error {
+}
+function gitError(error) {
+    if (error instanceof GitBackendUnavailableError)
+        return "backendUnavailable";
+    console.error("Git request failed", error);
+    return "requestFailed";
 }
 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 var(--pi-font, system-ui, sans-serif); }
   .git-panel ${activityElementTag} { display: none; }
   .git-panel small, .git-panel .git-muted { color: var(--pi-muted); }
   .git-panel p { margin: 10px; }
-  .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 { overflow-x: auto; flex: 0 0 auto; font-size: 12px; color: var(--pi-muted); }
+  .git-panel .git-toolbar-actions { margin-inline-start: 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); }
@@ -712,8 +782,17 @@ const gitPanelStyles = `
   .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 { border-bottom: 1px solid var(--pi-border); }
+  .git-panel [data-git-state] { --git-status-color: var(--pi-muted); }
+  .git-panel [data-git-state="added"], .git-panel [data-git-state="untracked"] { --git-status-color: var(--pi-success); }
+  .git-panel [data-git-state="modified"] { --git-status-color: var(--pi-warning); }
+  .git-panel [data-git-state="deleted"], .git-panel [data-git-state="conflicted"] { --git-status-color: var(--pi-danger); }
+  .git-panel [data-git-state="renamed"], .git-panel [data-git-state="copied"] { --git-status-color: var(--pi-accent); }
+  .git-panel [data-git-state] .ui-file-label, .git-panel .git-status { color: var(--git-status-color); }
+  .git-panel .git-status { font-weight: 600; }
+  .git-panel .git-file-details { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
+  .git-panel .git-staging { color: var(--pi-muted); font-size: 11px; white-space: nowrap; }
   .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 .submodule-badge { display: inline-block; margin-inline-start: 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); }
   .git-panel .git-diffs.is-single { grid-template-rows: minmax(0, 1fr); }

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

@@ -0,0 +1,47 @@
+// Generated from pi-web-plugins/git/browser/git.messages.ts. Do not edit directly.
+const git = { "message": "Git", "description": "Git panel title; product name" };
+const goToGit = { "message": "Go to Git", "description": "Navigate to the Git panel" };
+const refreshGit = { "message": "Refresh Git", "description": "Action to refresh repository status" };
+const navigation = { "message": "Navigation", "description": "Action palette group for navigation" };
+const workspace = { "message": "Workspace", "description": "Action palette group for workspace actions" };
+const stale = { "message": "stale", "description": "Repository status is out of date" };
+const refresh = { "message": "Refresh", "description": "Reload Git status" };
+const changedFilesView = { "message": "Changed files view", "description": "Accessible name of list/tree view controls" };
+const list = { "message": "List", "description": "Flat changed-file view" };
+const tree = { "message": "Tree", "description": "Hierarchical changed-file view" };
+const collapseAll = { "message": "Collapse all", "description": "Collapse all directories and submodules" };
+const expandAll = { "message": "Expand all", "description": "Expand all directories and submodules" };
+const loadingStatus = { "message": "Loading status…", "description": "Repository status request is pending" };
+const statusUnavailable = { "message": "Status unavailable.", "description": "Repository status could not be loaded" };
+const notRepository = { "message": "Not a git repository.", "description": "Selected workspace is not in a Git repository" };
+const noChanges = { "message": "No changes.", "description": "Repository has no changed files" };
+const selectFile = { "message": "Select a changed file.", "description": "Diff viewer before file selection" };
+const loadingDiff = { "message": "Loading diff…", "description": "Diff request is pending" };
+const noStagedDiff = { "message": "No staged or unstaged diff.", "description": "Selected file has no diff to display" };
+const diff = { "message": "diff", "description": "Fallback title for a diff with no path" };
+const noDiff = { "message": "No diff.", "description": "Diff response has no lines" };
+const unifiedDiff = { "message": "Unified diff", "description": "Accessible name for the diff table" };
+const submodule = { "message": "submodule", "description": "Badge identifying a Git submodule" };
+const detached = { "message": "detached", "description": "Repository is not on a named branch" };
+const backendUnavailable = { "message": "Git workspace backend is unavailable. Update and restart PI WEB on this machine, then reload the browser.", "description": "Recovery instructions when the paired Git backend is missing" };
+const requestFailed = { "message": "Could not refresh Git. Try refreshing again.", "description": "Repository status or diff request failed; technical details are logged" };
+const diffState = {
+    message: "{staged, select, yes {{truncated, select, yes {staged · truncated} other {staged}}} other {{truncated, select, yes {unstaged · truncated} other {unstaged}}}}",
+    description: "Diff staging state, with optional truncation warning; translate each complete alternative",
+};
+const branchSummary = {
+    message: "<name>{branch}</name> · ↑{ahead, number} ↓{behind, number}",
+    description: "Branch name with commits ahead and behind upstream; arrows indicate ahead and behind",
+};
+const fileState = {
+    message: "{state, select, modified {Modified} added {Added} deleted {Deleted} renamed {Renamed} copied {Copied} untracked {Untracked} ignored {Ignored} conflicted {Conflicted} other {Unmodified}}",
+    description: "Full accessible description of the changed file state; visible letters are Git notation",
+};
+const stagedChanges = { message: "Staged", description: "File has staged changes only" };
+const unstagedChanges = { message: "Unstaged", description: "File has unstaged changes only" };
+const bothChanges = { message: "Both", description: "File has both staged and unstaged changes" };
+const stagingDetail = {
+    message: "Staged: {index} · Unstaged: {workingTree}",
+    description: "File status in the index and working tree; values are localized file states",
+};
+export default { stagedChanges, unstagedChanges, bothChanges, stagingDetail, git, goToGit, refreshGit, navigation, workspace, stale, refresh, changedFilesView, list, tree, collapseAll, expandAll, loadingStatus, statusUnavailable, notRepository, noChanges, selectFile, loadingDiff, noStagedDiff, diff, noDiff, unifiedDiff, submodule, detached, backendUnavailable, requestFailed, diffState, branchSummary, fileState };

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

@@ -0,0 +1,71 @@
+// Generated from pi-web-plugins/git/browser/gitFileIcon.ts. Do not edit directly.
+const tag = "pi-web-git-file-icon";
+/** Git consumes alpha masks, not artwork colours or another plugin's elements. */
+export function defineGitFileIconElement() {
+    if (typeof customElements === "undefined" || typeof HTMLElement === "undefined" || customElements.get(tag) !== undefined)
+        return;
+    class GitFileIcon extends HTMLElement {
+        value;
+        image;
+        root = this.attachShadow({ mode: "open" });
+        content = document.createElement("span");
+        constructor() {
+            super();
+            const style = document.createElement("style");
+            style.textContent = ":host { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--pi-muted, currentColor); } .content { display: contents; } .mask { display: block; width: 16px; height: 16px; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; }";
+            this.content.className = "content";
+            this.root.append(style, this.content);
+            this.showFallback();
+        }
+        set url(value) {
+            if (value === this.value)
+                return;
+            this.value = value;
+            this.showFallback();
+            if (value === undefined)
+                return;
+            const image = document.createElement("img");
+            image.alt = "";
+            image.hidden = true;
+            image.draggable = false;
+            image.crossOrigin = "anonymous";
+            image.referrerPolicy = "no-referrer";
+            image.addEventListener("load", () => {
+                if (this.image !== image)
+                    return;
+                const mask = document.createElement("span");
+                mask.className = "mask";
+                mask.setAttribute("aria-hidden", "true");
+                mask.style.maskImage = `url(${JSON.stringify(value)})`;
+                this.content.querySelector("svg")?.replaceWith(mask);
+            }, { once: true });
+            image.addEventListener("error", () => {
+                if (this.image !== image)
+                    return;
+                console.warn("Failed to load Git file icon", value);
+                this.showFallback();
+            }, { once: true });
+            this.content.append(image);
+            this.image = image;
+            image.src = value;
+        }
+        showFallback() {
+            this.image = undefined;
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("width", "14");
+            svg.setAttribute("height", "14");
+            svg.setAttribute("viewBox", "0 0 24 24");
+            svg.setAttribute("fill", "none");
+            svg.setAttribute("stroke", "currentColor");
+            svg.setAttribute("stroke-width", "1.6");
+            svg.setAttribute("aria-hidden", "true");
+            for (const d of ["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z", "M14 2v6h6"]) {
+                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                path.setAttribute("d", d);
+                svg.append(path);
+            }
+            this.content.replaceChildren(svg);
+        }
+    }
+    customElements.define(tag, GitFileIcon);
+}

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

@@ -1,6 +1,6 @@
 // Generated from pi-web-plugins/git/browser/pi-web-plugin.ts. Do not edit directly.
-import { setTranslator } from "./i18n.js";
 import { createGitBrowserContributions } from "./git-panel.js";
+import { setTranslator } from "./i18n.js";
 const stylesheetIntegrationCapability = {
     pluginId: "pi-web", id: "stylesheet-integration", version: 1,
     parse: (value) => {
@@ -16,18 +16,35 @@ function isStylesheetIntegration(value) {
         && "subscribe" in value && typeof value.subscribe === "function"
         && "createController" in value && typeof value.createController === "function";
 }
+const fileIconsCapability = {
+    pluginId: "pi-web", id: "file-icons", version: 1,
+    parse(value) {
+        if (!isFileIcons(value))
+            throw new Error("Invalid PI WEB file icons capability v1");
+        return value;
+    },
+};
+function isFileIcons(value) {
+    return typeof value === "object" && value !== null
+        && "resolveIcon" in value && typeof value.resolveIcon === "function"
+        && "subscribe" in value && typeof value.subscribe === "function";
+}
 const plugin = {
     apiVersion: 4,
     name: "Git",
-    requires: [stylesheetIntegrationCapability],
-    activate: ({ pluginId, runtimePluginId, html, svg, translate }) => {
+    requires: [stylesheetIntegrationCapability, fileIconsCapability],
+    activate: ({ pluginId, runtimePluginId, html, svg, localization, translate }) => {
         setTranslator(translate);
+        if (localization === undefined)
+            throw new Error("The Git plugin requires a localization-capable PI WEB host");
         let stylesheetIntegration;
+        let fileIcons;
         return {
             start: ({ capabilities }) => {
                 stylesheetIntegration = capabilities.resolve(stylesheetIntegrationCapability);
+                fileIcons = capabilities.resolve(fileIconsCapability);
             },
-            contributions: createGitBrowserContributions(pluginId, runtimePluginId, html, svg, () => stylesheetIntegration),
+            contributions: createGitBrowserContributions(pluginId, runtimePluginId, html, svg, () => stylesheetIntegration, localization, () => fileIcons),
         };
     },
 };

package/dist/pi-web-plugins/git/server-plugin.js

@@ -115,7 +115,8 @@ export function createGitWorkspaceProvider(context, instanceNamespace = "") {
             if (current.bare === true)
                 throw new Error(t("ui.main.e316bd0c1e32", "A bare Git workspace cannot be removed as a linked worktree"));
             return {
-                title: t("ui.shared.168f8f19045c", "Delete workspace: {workspace}", { workspace: workspace.label }),
+                title: `Delete workspace: ${workspace.label}`,
+                titlePresentation: { kind: "workspaceRemoval", label: workspace.label },
                 command: `git worktree remove ${shellQuote(workspace.path)}`,
             };
         },
@@ -157,8 +158,9 @@ function singleGitWorkspace(project) {
 }
 function gitRemovalPresentation(label, path) {
     return {
-        actionLabel: t("client.actions.delete.workspace.1bca7e", "Delete workspace"),
-        confirmation: t("ui.main.8e2b2416adcd", "Delete workspace {arg0}?\n\nThis runs git worktree remove and deletes:\n{arg1}\n\nThe corresponding Git branch will not be deleted.", { arg0: label, arg1: path }),
+        localization: { kind: "gitWorktree", label, path },
+        actionLabel: "Delete workspace",
+        confirmation: `Delete workspace ${label}?\n\nThis will run git worktree remove and delete:\n${path}\n\nThe Git branch will not be deleted.`,
     };
 }
 function gitPrivateWorktreePath(workspace) {