@design.estate/dees-catalog 13.1.0 → 13.2.0

package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -27,12 +27,15 @@ import {
   computeLineDiff,
   diffStats,
   foldContextRows,
-  parseUnifiedDiff,
+  parseUnifiedDiffDocument,
   toUnifiedDiff,
   type IDiffRow,
   type IDiffSegment,
   type ISplitCell,
   type TDiffDisplayRow,
+  type IUnifiedDiffDocument,
+  type IUnifiedDiffFileSection,
+  type IUnifiedDiffMetadata,
 } from './codebox.diff.js';
 
 declare global {
@@ -79,6 +82,10 @@ export class DeesDataviewCodebox extends DeesElement {
   @property({ type: String })
   accessor unifiedDiff: string = '';
 
+  /** The unified patch ends before the producer's complete output. */
+  @property({ type: Boolean })
+  accessor unifiedDiffTruncated: boolean = false;
+
   /** '' = regular code; 'inline' = unified rows; 'split' = side by side; 'auto' splits at 640px. */
   @property({ type: String })
   accessor diffView: '' | TDiffViewRequest = '';
@@ -414,18 +421,65 @@ export class DeesDataviewCodebox extends DeesElement {
       .diffStat.removed {
         color: var(--dees-color-accent-error);
       }
+
+      .diffFileHeader {
+        display: flex;
+        align-items: baseline;
+        gap: var(--dees-spacing-md);
+        min-width: 0;
+        padding: 6px var(--dees-spacing-lg);
+        border-top: 1px solid var(--dees-color-border-subtle);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        background: var(--dees-color-bg-secondary);
+      }
+
+      .diffFile:first-child > .diffFileHeader { border-top: 0; }
+
+      .diffFilePath {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--dees-color-text-primary);
+        font: 600 var(--dees-font-control-size-sm)/1.4 var(--dees-font-family-mono);
+      }
+
+      .diffFileMeta {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      .diffFileNotice,
+      .diffDocumentNotice {
+        padding: var(--dees-spacing-lg);
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-control-size-sm);
+      }
+
+      .diffQualifier {
+        margin-left: var(--dees-spacing-sm);
+        color: var(--dees-color-text-muted);
+        font-weight: 500;
+      }
     `,
   ];
 
   render(): TemplateResult {
     const contextMenuOptions = [
-      {
-        name: 'Copy Code',
-        iconName: 'lucide:Copy',
-        action: async () => {
-          await this.copyCode();
-        },
-      },
+      ...(!this.unifiedDiff
+        ? [{
+            name: 'Copy Code',
+            iconName: 'lucide:Copy',
+            action: async () => {
+              await this.copyCode();
+            },
+          }]
+        : []),
       ...(this.isDiffActive
         ? [{
             name: 'Copy Unified Diff',
@@ -454,13 +508,15 @@ export class DeesDataviewCodebox extends DeesElement {
                     @option-activate=${(event: CustomEvent) => { event.stopPropagation(); this.setDiffView(event.detail.value); }}></dees-input-multitoggle>
                 `
               : ''}
-            <div
-              class="copyButton ${this.copied ? 'copied' : ''}"
-              title="Copy code"
-              @click=${this.copyCode}
-            >
-              <dees-icon .icon=${this.copied ? 'lucide:Check' : 'lucide:Copy'} iconSize="14"></dees-icon>
-            </div>
+            ${!this.unifiedDiff ? html`
+              <div
+                class="copyButton ${this.copied ? 'copied' : ''}"
+                title="Copy code"
+                @click=${this.copyCode}
+              >
+                <dees-icon .icon=${this.copied ? 'lucide:Check' : 'lucide:Copy'} iconSize="14"></dees-icon>
+              </div>
+            ` : ''}
           </div>
         </div>
         ${this.isDiffActive ? this.renderDiff() : this.renderCode()}
@@ -492,20 +548,85 @@ export class DeesDataviewCodebox extends DeesElement {
   }
 
   private renderDiffFooter(): TemplateResult {
-    const stats = diffStats(this.diffRows);
+    const summary = this.diffDocument?.summary;
+    const stats = summary
+      ? summary.type === 'unparseable' ? undefined : summary.stats
+      : diffStats(this.diffRows);
+    const qualifiers: string[] = [];
+    if (summary?.type === 'partial') qualifiers.push('Partial diff');
+    if (summary?.type === 'unparseable') qualifiers.push('Diff format unavailable');
+    if (summary?.binaryFiles) {
+      qualifiers.push(`${summary.binaryFiles} binary ${summary.binaryFiles === 1 ? 'file' : 'files'}`);
+    }
+    if (summary?.type === 'exact' && !stats && !summary.binaryFiles) qualifiers.push('Metadata-only diff');
     return html`
       <div class="lineCount">
-        <span class="diffStat added">+${stats.added}</span>
-        <span class="diffStat removed">−${stats.removed}</span>
+        ${stats ? html`
+          <span class="diffStat added">+${stats.added}</span>
+          <span class="diffStat removed">−${stats.removed}</span>
+        ` : ''}
+        ${qualifiers.length ? html`<span class="diffQualifier">${qualifiers.join(' · ')}</span>` : ''}
       </div>
     `;
   }
 
   private renderDiff(): TemplateResult {
-    const displayRows = this.displayRowsWithFolds();
+    const sections = this.displaySectionsWithFolds();
+    if (!sections.length) {
+      return html`<div class="diffDocumentNotice">The diff has no displayable file sections.</div>`;
+    }
     return this.effectiveDiffView === 'split'
-      ? this.renderSplitGrid(displayRows)
-      : html`<div class="diffScroll">${this.renderInlineGrid(displayRows)}</div>`;
+      ? html`${sections.map(({ file, rows }) => html`
+          <section class="diffFile">
+            ${this.renderDiffFileHeader(file)}
+            ${rows.length ? this.renderSplitGrid(rows) : this.renderDiffFileNotice(file)}
+          </section>
+        `)}`
+      : html`<div class="diffScroll">${sections.map(({ file, rows }) => html`
+          <section class="diffFile">
+            ${this.renderDiffFileHeader(file)}
+            ${rows.length ? this.renderInlineGrid(rows) : this.renderDiffFileNotice(file)}
+          </section>
+        `)}</div>`;
+  }
+
+  private renderDiffFileHeader(fileArg: IUnifiedDiffFileSection): TemplateResult | '' {
+    const details = this.diffFileMetadataLabels(fileArg);
+    const path = fileArg.beforePath && fileArg.afterPath && fileArg.beforePath !== fileArg.afterPath
+      ? `${fileArg.beforePath} → ${fileArg.afterPath}`
+      : fileArg.displayPath;
+    if (!path && !details.length) return '';
+    return html`
+      <div class="diffFileHeader">
+        <div class="diffFilePath">${path ?? 'Unscoped patch'}</div>
+        ${details.length ? html`<div class="diffFileMeta">${details.join(' · ')}</div>` : ''}
+      </div>
+    `;
+  }
+
+  private diffFileMetadataLabels(fileArg: IUnifiedDiffFileSection): string[] {
+    const labels: string[] = [];
+    const metadata = (kindArg: IUnifiedDiffMetadata['kind']) =>
+      fileArg.metadata.filter((entry) => entry.kind === kindArg).map((entry) => entry.value);
+    const newFileMode = metadata('new-file-mode')[0];
+    const deletedFileMode = metadata('deleted-file-mode')[0];
+    const oldMode = metadata('old-mode')[0];
+    const newMode = metadata('new-mode')[0];
+    if (newFileMode) labels.push(`New file · mode ${newFileMode}`);
+    if (deletedFileMode) labels.push(`Deleted file · mode ${deletedFileMode}`);
+    if (metadata('rename-from').length || metadata('rename-to').length) labels.push('Renamed');
+    if (metadata('copy-from').length || metadata('copy-to').length) labels.push('Copied');
+    if (oldMode || newMode) labels.push(`Mode ${oldMode ?? '?'} → ${newMode ?? '?'}`);
+    labels.push(...metadata('similarity-index').map((value) => `${value} similar`));
+    labels.push(...metadata('dissimilarity-index').map((value) => `${value} dissimilar`));
+    if (fileArg.binary) labels.push('Binary change');
+    return labels;
+  }
+
+  private renderDiffFileNotice(fileArg: IUnifiedDiffFileSection): TemplateResult {
+    return html`<div class="diffFileNotice">${fileArg.binary
+      ? 'Binary content is not shown.'
+      : 'No textual line changes.'}</div>`;
   }
 
   private renderInlineGrid(displayRows: TDiffDisplayRow[]): TemplateResult {
@@ -627,6 +748,7 @@ export class DeesDataviewCodebox extends DeesElement {
   private highlightToken = 0;
   private copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
   private diffRows: IDiffRow[] = [];
+  private diffDocument: IUnifiedDiffDocument | null = null;
   private diffHighlightCache = new Map<string, string>();
   private autoDiffResizeObserver: ResizeObserver | null = null;
 
@@ -687,13 +809,21 @@ export class DeesDataviewCodebox extends DeesElement {
       changedProperties.has('codeToDisplay')
       || changedProperties.has('codeBefore')
       || changedProperties.has('unifiedDiff')
+      || changedProperties.has('unifiedDiffTruncated')
       || changedProperties.has('diffView')
     ) {
       if (this.isDiffActive) {
-        this.diffRows = this.unifiedDiff
-          ? parseUnifiedDiff(this.unifiedDiff)
-          : computeLineDiff(this.codeBefore, this.codeToDisplay);
+        if (this.unifiedDiff) {
+          this.diffDocument = parseUnifiedDiffDocument(this.unifiedDiff, {
+            truncated: this.unifiedDiffTruncated,
+          });
+          this.diffRows = this.diffDocument.files.flatMap((file) => file.rows);
+        } else {
+          this.diffDocument = null;
+          this.diffRows = computeLineDiff(this.codeBefore, this.codeToDisplay);
+        }
       } else {
+        this.diffDocument = null;
         this.diffRows = [];
       }
       this.diffHighlightCache.clear();
@@ -705,23 +835,36 @@ export class DeesDataviewCodebox extends DeesElement {
     }
   }
 
-  private displayRowsWithFolds(): TDiffDisplayRow[] {
-    const folded = foldContextRows(this.diffRows);
-    const result: TDiffDisplayRow[] = [];
+  private displaySectionsWithFolds(): Array<{
+    file: IUnifiedDiffFileSection;
+    rows: TDiffDisplayRow[];
+  }> {
+    const files = this.diffDocument?.files ?? [{
+      metadata: [],
+      rows: this.diffRows,
+      binary: false,
+    } satisfies IUnifiedDiffFileSection];
     let foldOrdinal = 0;
-    for (const row of folded) {
-      if (row.kind === 'fold') {
-        if (this.expandedFolds.has(foldOrdinal)) {
-          result.push(...row.rows);
+    return files.map((file) => {
+      const result: TDiffDisplayRow[] = [];
+      for (const row of foldContextRows(file.rows)) {
+        if (row.kind === 'fold') {
+          if (this.expandedFolds.has(foldOrdinal)) {
+            result.push(...row.rows);
+          } else {
+            result.push({ ...row, ordinal: foldOrdinal });
+          }
+          foldOrdinal++;
         } else {
-          result.push({ ...row, ordinal: foldOrdinal });
+          result.push(row);
         }
-        foldOrdinal++;
-      } else {
-        result.push(row);
       }
-    }
-    return result;
+      return { file, rows: result };
+    });
+  }
+
+  private displayRowsWithFolds(): TDiffDisplayRow[] {
+    return this.displaySectionsWithFolds().flatMap((section) => section.rows);
   }
 
   public async updated(changedProperties: Map<string, any>) {
@@ -742,6 +885,7 @@ export class DeesDataviewCodebox extends DeesElement {
         changedProperties.has('codeToDisplay')
         || changedProperties.has('codeBefore')
         || changedProperties.has('unifiedDiff')
+        || changedProperties.has('unifiedDiffTruncated')
         || changedProperties.has('diffView')
         || changedProperties.has('expandedFolds')
         || changedProperties.has('progLang')
@@ -814,6 +958,9 @@ export class DeesDataviewCodebox extends DeesElement {
   }
 
   private copyCode = async () => {
+    if (this.unifiedDiff) {
+      return;
+    }
     // in diff mode the copy button yields the after-state text
     const textToCopy = this.isDiffActive
       ? this.diffRows