collabmd 0.1.47 → 0.1.49

package/src/client/presentation/git-diff-view-controller.js

@@ -1,4 +1,6 @@
+import { createExcalidrawExportOptions } from '../domain/excalidraw-scene.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { commitButtonLabel } from '../domain/git-labels.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 import { renderDrawioViewer } from './drawio-viewer.js';
@@ -199,29 +201,25 @@ function getDrawioSourcePair(detail = {}) {
   };
 }
 
-function decodeXmlAttribute(value) {
-  return String(value ?? '')
-    .replace(/"/gu, '"')
-    .replace(/'/gu, "'")
-    .replace(/&/gu, '&')
-    .replace(/&lt;/gu, '<')
-    .replace(/&gt;/gu, '>');
-}
-
 function getDrawioCellMap(source) {
   const cells = new Map();
-  const cellPattern = /<mxCell\b([^>]*?)(?:\/|>([\s\S]*?)<\/mxCell\s*)>/giu;
-  let match;
+  if (typeof DOMParser === 'undefined' || typeof XMLSerializer === 'undefined') {
+    return cells;
+  }
+
+  const documentNode = new DOMParser().parseFromString(String(source ?? ''), 'application/xml');
+  if (documentNode.querySelector('parsererror')) {
+    return cells;
+  }
 
-  while ((match = cellPattern.exec(String(source ?? ''))) !== null) {
-    const idMatch = match[1].match(/\bid\s*=\s*(['"])(.*?)\1/iu);
-    const id = decodeXmlAttribute(idMatch?.[2] || '');
+  const serializer = new XMLSerializer();
+  for (const cell of documentNode.getElementsByTagName('mxCell')) {
+    const id = cell.getAttribute('id');
     if (!id || id === '0' || id === '1') {
       continue;
     }
 
-    const signature = `${match[1]}${match[2] || ''}`.replace(/\s+/gu, ' ').trim();
-    cells.set(id, signature);
+    cells.set(id, serializer.serializeToString(cell).replace(/\s+/gu, ' ').trim());
   }
 
   return cells;
@@ -456,6 +454,7 @@ export class GitDiffViewController {
     this.data = null;
     this.currentIndex = 0;
     this.activeFilePath = null;
+    this.workspaceFilePath = null;
     this.fileCache = new Map();
     this.fileErrors = new Map();
     this.loadingFiles = new Set();
@@ -507,12 +506,12 @@ export class GitDiffViewController {
         return;
       }
 
-      const currentFile = this.getCurrentFile();
-      if (!currentFile?.path) {
+      const filePath = this.getCurrentFile()?.path ?? this.workspaceFilePath;
+      if (!filePath) {
         return;
       }
 
-      this.onOpenFile?.(currentFile.path);
+      this.onOpenFile?.(filePath);
     });
     this.primaryActionButton?.addEventListener('click', () => {
       if (!this.isActive) {
@@ -611,6 +610,7 @@ export class GitDiffViewController {
     this.layoutMode = 'focused';
     this.currentIndex = 0;
     this.activeFilePath = null;
+    this.workspaceFilePath = null;
     this.fileCache.clear();
     this.fileErrors.clear();
     this.loadingFiles.clear();
@@ -624,7 +624,6 @@ export class GitDiffViewController {
     this.commitMeta = null;
     this.historyFilePath = null;
     this.pendingAction = null;
-    this.repoStatus = null;
   }
 
   async openWorkspaceDiff({ filePath = null, scope = 'all' } = {}) {
@@ -636,6 +635,7 @@ export class GitDiffViewController {
     this.commitMeta = null;
     this.historyFilePath = null;
     this.activeFilePath = filePath;
+    this.workspaceFilePath = filePath;
     this.fileCache.clear();
     this.fileErrors.clear();
     this.loadingFiles.clear();
@@ -644,7 +644,7 @@ export class GitDiffViewController {
     this.excalidrawPreviewPayloads.clear();
     this.drawioPreviewPayloads.clear();
     this.requestScope = scope;
-    this.renderLoading('Loading diff summary...');
+    this.renderLoading('Loading diff summary…');
 
     try {
       const data = await this.gitApiClient.readDiff({
@@ -674,7 +674,7 @@ export class GitDiffViewController {
         source: 'workspace',
         summary: { additions: 0, deletions: 0, filesChanged: 0 },
       };
-      this.renderEmpty('Failed to load git diff');
+      this.renderEmpty('Failed to load git diff', { alert: true });
       return this.data;
     }
   }
@@ -688,6 +688,7 @@ export class GitDiffViewController {
     this.commitMeta = null;
     this.historyFilePath = String(historyFilePath ?? '').trim() || null;
     this.activeFilePath = path || null;
+    this.workspaceFilePath = null;
     this.fileCache.clear();
     this.fileErrors.clear();
     this.loadingFiles.clear();
@@ -696,7 +697,7 @@ export class GitDiffViewController {
     this.excalidrawPreviewPayloads.clear();
     this.drawioPreviewPayloads.clear();
     this.requestScope = 'all';
-    this.renderLoading('Loading commit summary...');
+    this.renderLoading('Loading commit summary…');
 
     try {
       const data = await this.gitApiClient.readCommit({
@@ -737,7 +738,7 @@ export class GitDiffViewController {
         summary: { additions: 0, deletions: 0, filesChanged: 0 },
       };
       this.commitMeta = null;
-      this.renderEmpty('Failed to load git commit');
+      this.renderEmpty('Failed to load git commit', { alert: true });
       return this.data;
     }
   }
@@ -786,25 +787,27 @@ export class GitDiffViewController {
     void this.loadCurrentFile();
   }
 
-  renderLoading(message = 'Loading git diff...') {
+  renderLoading(message = 'Loading git diff…') {
     if (!this.isActive) {
       return;
     }
     this.page?.classList.remove('hidden');
     if (this.content) {
-      this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
+      // pi-lens-ignore: ast-grep:no-inner-html-js
+      this.content.innerHTML = `<div class="diff-empty-state" role="status" aria-live="polite">${escapeHtml(message)}</div>`;
     }
     this.data = null;
     this.syncToolbar();
   }
 
-  renderEmpty(message) {
+  renderEmpty(message, { alert = false } = {}) {
     if (!this.isActive) {
       return;
     }
     this.page?.classList.remove('hidden');
     if (this.content) {
-      this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
+      // pi-lens-ignore: ast-grep:no-inner-html-js
+      this.content.innerHTML = `<div class="diff-empty-state"${alert ? ' role="alert"' : ''}>${escapeHtml(message)}</div>`;
     }
     this.syncToolbar();
   }
@@ -1188,16 +1191,7 @@ export class GitDiffViewController {
       }
 
       try {
-        const svg = await exportToSvg({
-          appState: {
-            exportBackground: true,
-            exportWithDarkMode: false,
-            viewBackgroundColor: scene.appState?.viewBackgroundColor || '#ffffff',
-          },
-          elements: getVisibleSceneElements(scene),
-          exportPadding: 24,
-          files: scene.files || null,
-        });
+        const svg = await exportToSvg(createExcalidrawExportOptions(scene));
         preview.replaceChildren(svg);
         preview.classList.add('is-ready');
       } catch (error) {
@@ -1240,10 +1234,14 @@ export class GitDiffViewController {
     const headerStats = fileKind === 'image'
       ? `<span class="diff-file-header-kind">${escapeHtml(getImageFormat(file.path))} image</span>`
       : `<span class="diff-file-header-stats"><span class="ui-stat-token ui-stat-token--add diff-stats-add">+${file.stats?.additions ?? 0}</span><span class="ui-stat-token ui-stat-token--del diff-stats-del">-${file.stats?.deletions ?? 0}</span></span>`;
+    const inclusionStatus = file.hasStagedChanges
+      ? '<span class="ui-pill-badge ui-pill-badge--muted" aria-label="Included in next commit">✓ Included</span>'
+      : '';
     return `
       <div class="diff-file-header">
         <span class="diff-file-path">${escapeHtml(file.path)}</span>
         <span class="ui-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
+        ${inclusionStatus}
         ${headerStats}
       </div>
     `;
@@ -1335,7 +1333,7 @@ export class GitDiffViewController {
       return `
         <section class="diff-file-block">
           ${this.renderFileHeader(currentFile)}
-          <div class="diff-empty-state">Loading file diff...</div>
+          <div class="diff-empty-state" role="status" aria-live="polite">Loading file diff…</div>
         </section>
       `;
     }
@@ -1345,7 +1343,7 @@ export class GitDiffViewController {
       return `
         <section class="diff-file-block">
           ${this.renderFileHeader(currentFile)}
-          <div class="diff-empty-state">${escapeHtml(errorMessage)}</div>
+          <div class="diff-empty-state" role="alert">${escapeHtml(errorMessage)}</div>
         </section>
       `;
     }
@@ -1425,9 +1423,9 @@ export class GitDiffViewController {
     const bodyMarkup = isCollapsed
       ? ''
       : isLoading
-        ? '<div class="diff-empty-state">Loading file diff...</div>'
+        ? '<div class="diff-empty-state" role="status" aria-live="polite">Loading file diff…</div>'
         : errorMessage
-          ? `<div class="diff-empty-state">${escapeHtml(errorMessage)}</div>`
+          ? `<div class="diff-empty-state" role="alert">${escapeHtml(errorMessage)}</div>`
           : this.renderDiffDetail(detail, index, { includeHeader: false });
 
     return `
@@ -1837,8 +1835,8 @@ export class GitDiffViewController {
         this.fileIndicator.textContent = `${totalFiles} file${totalFiles === 1 ? '' : 's'}`;
       } else {
         this.fileIndicator.textContent = totalFiles > 0
-          ? `${visibleIndex} / ${totalFiles} files`
-          : '0 / 0 files';
+          ? `${visibleIndex} of ${totalFiles}`
+          : '0 files';
       }
     }
 
@@ -1859,6 +1857,7 @@ export class GitDiffViewController {
       const deletions = allFilesAreImages
         ? 0
         : Math.max(0, rawDeletions - imageLineStats.deletions);
+      // pi-lens-ignore: ast-grep:no-inner-html-js
       this.stats.innerHTML = `
         <span class="ui-stat-token ui-stat-token--add diff-stats-add">+${additions}</span>
         <span class="ui-stat-token ui-stat-token--del diff-stats-del">-${deletions}</span>
@@ -1866,16 +1865,22 @@ export class GitDiffViewController {
     }
 
     this.modeButtons.forEach((button) => {
+      const active = button.getAttribute('data-diff-mode') === this.mode;
       button.classList.remove('hidden');
-      button.classList.toggle('active', button.getAttribute('data-diff-mode') === this.mode);
+      button.classList.toggle('active', active);
+      button.setAttribute?.('aria-pressed', String(active));
     });
     this.layoutButtons.forEach((button) => {
-      button.classList.toggle('active', button.getAttribute('data-diff-layout') === this.layoutMode);
+      const active = button.getAttribute('data-diff-layout') === this.layoutMode;
+      button.classList.toggle('active', active);
+      button.setAttribute?.('aria-pressed', String(active));
     });
 
     const hasCurrentFile = Boolean(this.getCurrentFile()?.path);
+    const hasEditorFile = hasCurrentFile || Boolean(this.workspaceFilePath);
     const actionState = this.getCurrentActionState();
     const primaryAction = this.getPrimaryAction();
+    const includedFileCount = Number(this.repoStatus?.summary?.staged || 0);
 
     this.backToHistoryButton?.classList.toggle('hidden', !isCommitSource);
     this.gitActionsGroup?.classList.toggle('hidden', isCommitSource);
@@ -1885,23 +1890,33 @@ export class GitDiffViewController {
     this.stats?.classList.remove('hidden');
 
     if (this.openEditorButton) {
-      this.openEditorButton.textContent = 'Open in Editor';
+      this.openEditorButton.textContent = 'Open in editor';
     }
-    this.openEditorButton?.toggleAttribute('disabled', !hasCurrentFile || isCommitSource);
+    this.openEditorButton?.toggleAttribute('disabled', !hasEditorFile || isCommitSource);
     if (this.primaryActionButton) {
-      this.primaryActionButton.textContent = this.pendingAction === primaryAction
-        ? 'Working...'
+      const emphasizeInclude = primaryAction === 'stage' && !actionState.canUnstage;
+      this.primaryActionButton.classList.toggle('ui-button--primary', emphasizeInclude);
+      this.primaryActionButton.classList.toggle('ui-button--secondary', !emphasizeInclude);
+      this.primaryActionButton.classList.toggle('ui-button--surface', !emphasizeInclude);
+      this.primaryActionButton.textContent = this.pendingAction && this.pendingAction === primaryAction
+        ? 'Working…'
         : primaryAction === 'unstage'
-          ? 'Unstage'
-          : 'Stage';
+          ? 'Remove'
+          : 'Include in commit';
       this.primaryActionButton.toggleAttribute(
         'disabled',
         isCommitSource || !hasCurrentFile || !primaryAction || Boolean(this.pendingAction),
       );
     }
     if (this.commitButton) {
-      this.commitButton.textContent = this.pendingAction === 'commit' ? 'Working...' : 'Commit Staged';
+      this.commitButton.textContent = this.pendingAction === 'commit'
+        ? 'Working…'
+        : commitButtonLabel(includedFileCount);
     }
+    this.commitButton?.classList.toggle(
+      'hidden',
+      isCommitSource || !hasCurrentFile || !actionState.canUnstage,
+    );
     this.commitButton?.toggleAttribute(
       'disabled',
       isCommitSource || !actionState.canCommit || Boolean(this.pendingAction),
@@ -1934,8 +1949,10 @@ export class GitDiffViewController {
     this.drawioPreviewPayloads.clear();
 
     if (this.source === 'commit') {
+      // pi-lens-ignore: ast-grep:no-inner-html-js
       this.content.innerHTML = `${this.renderCommitHeader()}${this.renderCommitBody()}`;
     } else {
+      // pi-lens-ignore: ast-grep:no-inner-html-js
       this.content.innerHTML = this.renderFocusedFileBody();
     }
     this.syncToolbar();

package/src/client/presentation/git-panel-controller.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { commitButtonLabel } from '../domain/git-labels.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
@@ -93,7 +94,9 @@ export class GitPanelController {
     onResetFile = () => {},
     onSelectCommit = () => {},
     onSelectDiff = () => {},
+    onStageAll = () => {},
     onStageFile = () => {},
+    onUnstageAll = () => {},
     onUnstageFile = () => {},
     onViewAllDiff = () => {},
     searchInput = null,
@@ -109,7 +112,9 @@ export class GitPanelController {
     this.onResetFile = onResetFile;
     this.onSelectCommit = onSelectCommit;
     this.onSelectDiff = onSelectDiff;
+    this.onStageAll = onStageAll;
     this.onStageFile = onStageFile;
+    this.onUnstageAll = onUnstageAll;
     this.onUnstageFile = onUnstageFile;
     this.onViewAllDiff = onViewAllDiff;
     this.searchInput = searchInput;
@@ -117,6 +122,7 @@ export class GitPanelController {
     this.panel = document.getElementById('gitPanel');
     this.pullBackups = [];
     this.status = null;
+    this.statusError = '';
     this.active = false;
     this.refreshTimer = null;
     this.searchQuery = '';
@@ -235,6 +241,17 @@ export class GitPanelController {
 
     if (this._handleFileActionClick(event)) return;
 
+    const bulkActionButton = event.target instanceof Element
+      ? event.target.closest('[data-git-bulk-action]')
+      : null;
+    if (bulkActionButton) {
+      const action = bulkActionButton.getAttribute('data-git-bulk-action');
+      if (action === 'stage-all' || action === 'unstage-all') {
+        void this.handleBulkAction(action);
+      }
+      return;
+    }
+
     if (event.target instanceof Element && event.target.closest('[data-git-view-all]')) {
       this.onViewAllDiff();
       return;
@@ -376,7 +393,7 @@ export class GitPanelController {
 
   async refresh({ force = false, includeHistory = this.panelMode === 'history' } = {}) {
     const status = await this.refreshStatus({ force });
-    if (includeHistory && status.isGitRepo) {
+    if (includeHistory && status?.isGitRepo) {
       await this.refreshHistory({ force });
     }
     return status;
@@ -384,6 +401,7 @@ export class GitPanelController {
 
   async refreshStatus({ force = false } = {}) {
     if (!this.enabled) {
+      this.statusError = '';
       this.status = {
         isGitRepo: false,
         sections: [],
@@ -408,6 +426,7 @@ export class GitPanelController {
     try {
       const data = await this.gitApiClient.readStatus({ force });
       this.status = data;
+      this.statusError = '';
       this.pullBackups = [];
       if (data.isGitRepo) {
         try {
@@ -434,25 +453,9 @@ export class GitPanelController {
     } catch (error) {
       console.error('[git-panel] Failed to load git status:', error);
       this.toastController?.show('Failed to load git status');
-      this.status = {
-        isGitRepo: false,
-        sections: [],
-        summary: { changedFiles: 0 },
-      };
-      this.pullBackups = [];
-      this.history = {
-        ...this.history,
-        commits: [],
-        error: '',
-        hasMore: false,
-        loaded: false,
-        loading: false,
-        loadingMore: false,
-        offset: 0,
-      };
-      this.onRepoChange(false, this.status);
+      this.statusError = 'Failed to load Git status. Try again.';
       this.render();
-      return this.status;
+      return null;
     }
   }
 
@@ -614,6 +617,22 @@ export class GitPanelController {
     }
   }
 
+  async handleBulkAction(action) {
+    if (this.pendingActionKey) {
+      return;
+    }
+
+    this.pendingActionKey = action;
+    this.render();
+
+    try {
+      await (action === 'stage-all' ? this.onStageAll() : this.onUnstageAll());
+    } finally {
+      this.pendingActionKey = null;
+      this.render();
+    }
+  }
+
   async handleCommitStaged() {
     const actionKey = 'commit-staged';
     if (this.pendingActionKey === actionKey) {
@@ -659,12 +678,13 @@ export class GitPanelController {
     }
 
     const isCollapsed = this.collapsedSections.has(section.key);
+    const label = section.key === 'staged' ? 'Included in Next Commit' : section.label;
 
     return `
       <section class="git-section">
         <button class="git-section-header" type="button" data-git-section-toggle="${escapeHtml(section.key)}">
           ${chevronSvg(isCollapsed)}
-          ${escapeHtml(section.label)}
+          ${escapeHtml(label)}
           <span class="ui-pill-badge ui-pill-badge--count ui-pill-badge--muted git-section-count">${files.length}</span>
         </button>
         <div class="git-file-list${isCollapsed ? ' hidden' : ''}">
@@ -724,8 +744,8 @@ export class GitPanelController {
     const fullPath = String(file.path || '');
     const statusClass = badgeClass(file.status);
     const stageAction = file.scope === 'staged'
-      ? { label: 'Unstage', value: 'unstage' }
-      : { label: 'Stage', value: 'stage' };
+      ? { label: 'Remove from commit', value: 'unstage' }
+      : { label: 'Include in commit', value: 'stage' };
     const actionKey = `${stageAction.value}:${file.scope}:${file.path}`;
     const isPending = this.pendingActionKey === actionKey;
     const resetActionKey = `reset:${file.scope}:${file.path}`;
@@ -833,11 +853,11 @@ export class GitPanelController {
     const commits = this.filterCommits(this.history.commits);
 
     if (this.history.loading && !this.history.loaded) {
-      return '<div class="git-panel-empty">Loading git history...</div>';
+      return '<div class="git-panel-empty" role="status" aria-live="polite">Loading git history…</div>';
     }
 
     if (this.history.error && !this.history.loaded) {
-      return `<div class="git-panel-empty">${escapeHtml(this.history.error)}</div>`;
+      return `<div class="git-panel-empty" role="alert">${escapeHtml(this.history.error)}</div>`;
     }
 
     if (this.history.loaded && commits.length === 0 && this.history.commits.length === 0) {
@@ -860,7 +880,7 @@ export class GitPanelController {
             data-git-history-load-more
             ${this.history.loadingMore ? 'disabled' : ''}
           >
-            ${this.history.loadingMore ? 'Loading...' : 'Load More'}
+            ${this.history.loadingMore ? 'Loading…' : 'Load more'}
           </button>
         </div>
       ` : ''}
@@ -874,7 +894,9 @@ export class GitPanelController {
       .filter(Boolean)
       .join('');
     const hasChanges = Boolean(this.status.summary?.changedFiles);
-    const hasStagedChanges = Number(this.status.summary?.staged || 0) > 0;
+    const includedFileCount = Number(this.status.summary?.staged || 0);
+    const excludedFileCount = Number(this.status.summary?.workingTree || 0)
+      + Number(this.status.summary?.untracked || 0);
     const isCommitPending = this.pendingActionKey === 'commit-staged';
 
     return `
@@ -883,17 +905,37 @@ export class GitPanelController {
       ${hasChanges ? `
         <div class="git-panel-footer">
           <div class="git-panel-footer-actions">
+            ${excludedFileCount > 0 ? `
+              <button
+                class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true })}"
+                type="button"
+                data-git-bulk-action="stage-all"
+                ${this.pendingActionKey ? 'disabled' : ''}
+              >
+                ${this.pendingActionKey === 'stage-all' ? 'Working...' : 'Include all changes'}
+              </button>
+            ` : ''}
+            ${includedFileCount > 0 ? `
+              <button
+                class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true })}"
+                type="button"
+                data-git-bulk-action="unstage-all"
+                ${this.pendingActionKey ? 'disabled' : ''}
+              >
+                ${this.pendingActionKey === 'unstage-all' ? 'Working...' : 'Remove all from commit'}
+              </button>
+            ` : ''}
             <button class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true })}" type="button" data-git-view-all>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M2 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-              View Full Diff
+              View full diff
             </button>
             <button
               class="${buttonClassNames({ variant: 'primary', action: true, wide: true, extra: 'git-footer-commit-btn' })}"
               type="button"
               data-git-commit-staged
-              ${!hasStagedChanges || isCommitPending ? 'disabled' : ''}
+              ${includedFileCount === 0 || isCommitPending ? 'disabled' : ''}
             >
-              ${isCommitPending ? 'Working...' : 'Commit Staged'}
+              ${isCommitPending ? 'Working…' : commitButtonLabel(includedFileCount)}
             </button>
           </div>
         </div>
@@ -901,13 +943,19 @@ export class GitPanelController {
     `;
   }
 
-  renderEmpty(message) {
+  renderEmpty(message, { alert = false, status = false } = {}) {
     if (!this.panel) {
       return;
     }
 
+    const semantics = alert
+      ? ' role="alert"'
+      : status
+        ? ' role="status" aria-live="polite"'
+        : '';
+    // pi-lens-ignore: ast-grep:no-inner-html-js
     this.panel.innerHTML = `
-      <div class="git-panel-empty ui-empty-state ui-empty-state--compact">
+      <div class="git-panel-empty ui-empty-state ui-empty-state--compact"${semantics}>
         <p class="ui-empty-state-copy">${escapeHtml(message)}</p>
       </div>
     `;
@@ -918,8 +966,13 @@ export class GitPanelController {
       return;
     }
 
+    if (this.statusError) {
+      this.renderEmpty(this.statusError, { alert: true });
+      return;
+    }
+
     if (!this.status) {
-      this.renderEmpty('Loading git status...');
+      this.renderEmpty('Loading git status…', { status: true });
       return;
     }
 
@@ -933,6 +986,7 @@ export class GitPanelController {
     const isPullPending = this.pendingActionKey === 'sync:pull';
     const isPushPending = this.pendingActionKey === 'sync:push';
 
+    // pi-lens-ignore: ast-grep:no-inner-html-js
     this.panel.innerHTML = `
       <div class="git-branch-bar">
         <div class="git-branch-meta">